.design-page *{ box-sizing: border-box; margin: 0; padding: 0; }
.design-page .shell{ position: relative; z-index: 2; }
.design-page .sd-container{ max-width: 1360px; padding: 0 64px; margin: 0 auto; position: relative; }
.design-page .sd-container.wide{ max-width: 1480px; }
.design-page .side-rail{ position: fixed; top: 0; bottom: 0; width: 36px; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.design-page .side-rail.sd-right{ right: 0; border-left: 1px solid var(--line-faint); }
.design-page .side-rail.sd-left{ left: 0; border-right: 1px solid var(--line-faint); }
.design-page .side-rail .rail-text{ font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.design-page .side-rail.sd-right .rail-text{ transform: rotate(180deg); }
.design-page .side-rail.sd-left .rail-text{ writing-mode: vertical-rl; transform: none; }
.design-page .topbar{ border-bottom: 1px solid var(--line); padding: 10px 0; background: var(--paper); position: relative; z-index: 4; }
.design-page .topbar-inner{ display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.design-page .topbar-inner b{ color: var(--ink); font-weight: 600; }
.design-page .topbar-inner .sd-coral{ color: var(--coral); }
.design-page .topbar-inner > span{ white-space: nowrap; }
.design-page .topbar-inner .mid{ display: inline-flex; gap: 26px; }
.design-page .topbar-inner .mid > span{ white-space: nowrap; }
.design-page .topbar-inner .sd-right{ display: inline-flex; gap: 18px; align-items: center; }
.design-page .topbar-inner .sd-right > span,.design-page .topbar-inner .sd-right > a{ white-space: nowrap; }
.design-page .topbar-link{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; }
.design-page .topbar-link:hover{ color: var(--coral); border-bottom-color: var(--coral); }
.design-page .topbar .pulse{ width: 6px; height: 6px; border-radius: 50%; background: var(--coral); display: inline-block; margin-right: 6px; animation: pulse 2.4s ease-in-out infinite; }
.design-page .nav{ padding: 22px 0; position: sticky; top: 0; z-index: 50; background: var(--paper); transform: translateY(0); transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease; border-bottom: 1px solid transparent; will-change: transform; }
.design-page .nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.design-page .brand{ display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; font-size: 18px; flex-shrink: 0; }
.design-page .brand-mark{ width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 50%; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); background: transparent; }
.design-page .brand-meta{ font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.3; margin-left: 4px; border-left: 1px solid var(--line); padding-left: 14px; }
.design-page .brand-meta b{ display: block; color: var(--ink); font-weight: 600; }
.design-page .nav-links{ display: flex; gap: 38px; list-style: none; }
.design-page .nav-links a{ color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 500; transition: color 0.18s ease; position: relative; }
.design-page .nav-links a:hover{ color: var(--coral); }
.design-page .nav-links a .sd-num{ font-size: 9px; color: var(--ink-faint); position: absolute; top: -7px; right: -16px; letter-spacing: 0.04em; }
.design-page .nav-side{ display: inline-flex; align-items: center; gap: 18px; }
.design-page .nav-cta{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.design-page .nav-cta [data-github-stars],.design-page .nav-cta [data-github-version]{ font-variant-numeric: tabular-nums; }
.design-page .nav-cta::after{ content: "★"; color: var(--mustard); font-size: 11px; }
.design-page .status-dot{ width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.design-page .status-dot::after{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.design-page .sd-label{ font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--coral); display: inline-flex; align-items: center; gap: 12px; }
.design-page .sd-label::before{ content: ""; width: 18px; height: 1px; background: var(--coral); display: inline-block; }
.design-page .sd-label .sd-ix{ color: var(--ink-faint); font-weight: 500; margin-left: 4px; }
.design-page .sd-display{ font-family: var(--sans); font-weight: 800; letter-spacing: -0.028em; color: var(--ink); line-height: 1.0; }
.design-page .sd-display em{ font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.018em; }
.design-page .sd-display .sd-dot{ color: var(--coral); }
.design-page .sd-lead{ font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 36ch; }
.design-page .sd-meta{ font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.design-page .sd-coord{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); }
.design-page .sd-roman{ font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--coral); }
.design-page .sd-btn{ display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; border: 1px solid transparent; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; cursor: pointer; white-space: nowrap; }
.design-page .sd-btn-primary{ background: var(--coral); color: #fff; box-shadow: 0 14px 26px -16px rgba(237, 111, 92, 1); }
.design-page .sd-btn-primary:hover{ transform: translateY(-1px); background: #e25e4a; }
.design-page .sd-btn-ghost{ background: transparent; color: var(--ink); border-color: rgba(21, 20, 15, 0.2); }
.design-page .sd-btn-ghost:hover{ background: rgba(21, 20, 15, 0.04); }
.design-page .sd-btn .sd-arrow{ width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.design-page .sd-btn .sd-arrow svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.design-page .code-inline{ font-family: var(--mono); font-size: 14px; background: var(--bone); padding: 1px 6px; border-radius: 4px; }
.design-page .sd-hero{ position: relative; padding: 0; min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); }
.design-page .sd-hero > .sd-container{ flex: 0 0 auto; }
.design-page .sd-hero > .sd-container.sd-hero-grid{ flex: 1 1 auto; }
.design-page .sd-hero::before{ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-soft); z-index: 0; display: none; }
.design-page .sd-hero-grid{ display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 36px; align-items: stretch; width: 100%; position: relative; }
.design-page .sd-hero-copy{ padding: 4vh 0 4vh; display: flex; flex-direction: column; position: relative; }
.design-page .sd-hero-copy .sd-label{ margin-bottom: 28px; }
.design-page .sd-hero-copy .sd-lead{ margin-bottom: 30px; max-width: 38ch; font-size: 16px; }
.design-page .sd-hero h1{ font-size: clamp(44px, 5vw, 78px); line-height: 1.0; margin-bottom: 28px; }
.design-page .sd-hero-actions{ display: inline-flex; align-items: center; gap: 14px; margin-bottom: 38px; }
.design-page .sd-hero-stats{ display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; margin-bottom: 28px; }
.design-page .sd-hero-stats .sd-stat{ display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.design-page .sd-hero-stats .sd-stat .sd-ring{ width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.design-page .sd-hero-stats .sd-stat .sd-ring.sd-solid{ border-style: solid; }
.design-page .sd-hero-stats .sd-stat .sd-ring.sd-coral{ border-color: var(--coral); color: var(--coral); }
.design-page .sd-hero-stats .sd-stat-label{ font-family: var(--sans); font-size: 11px; line-height: 1.25; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
.design-page .sd-hero-stats .sd-stat-label b{ display: block; font-weight: 700; color: var(--ink); font-size: 12px; }
.design-page .sd-hero-foot{ margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.design-page .sd-hero-foot .sd-meta{ line-height: 1.4; }
.design-page .hero-art{ position: relative; height: calc(100vh - 160px); max-height: 860px; margin-left: auto; margin-right: -12px; width: 100%; overflow: visible; }
.design-page .hero-art img{ width: 100%; height: 100%; object-fit: contain; object-position: right center; display: block; }
.design-page .annot{ position: absolute; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.4; white-space: nowrap; }
.design-page .annot.has-line::before{ content: ""; position: absolute; background: var(--ink-faint); }
.design-page .annot-tl{ top: 14px; left: 14px; }
.design-page .annot-tr{ top: 14px; right: 14px; text-align: right; }
.design-page .annot-bl{ bottom: 14px; left: 14px; }
.design-page .annot-br{ bottom: 14px; right: 14px; text-align: right; }
.design-page .annot.sd-coord{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: none; }
.design-page .hero-art .sd-index{ position: absolute; right: 12px; top: 36%; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--ink-faint); text-transform: uppercase; background: rgba(239, 231, 210, 0.7); padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 6px; backdrop-filter: blur(2px); }
.design-page .hero-art .sd-index span{ display: block; line-height: 1.6; }
.design-page .hero-art .sd-index span .sd-n{ color: var(--coral); margin-right: 6px; font-weight: 700; }
.design-page .hero-art .sd-index span.sd-on{ color: var(--ink); font-weight: 700; }
.design-page .hero-art .sd-index span.sd-on .sd-n{ color: var(--coral); }
.design-page .hero-art .sd-corner{ position: absolute; width: 22px; height: 22px; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
.design-page .hero-art .sd-corner.sd-tl{ top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.design-page .hero-art .sd-corner.tr{ top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.design-page .hero-art .sd-corner.bl{ bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.design-page .hero-art .sd-corner.sd-br{ bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.design-page section{ position: relative; padding: 130px 0; }
.design-page section.sd-tight{ padding: 90px 0; }
.design-page .sd-sec-rule{ border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.design-page .sd-sec-rule .sd-roman{ font-family: var(--serif); font-style: italic; color: var(--coral); font-size: 14px; letter-spacing: 0.05em; text-transform: none; }
.design-page .sd-sec-rule .sd-meta-grp{ display: inline-flex; gap: 26px; }
.design-page .sd-sec-rule .sd-dot-mark{ color: var(--coral); }
.design-page .section-header{ margin-bottom: 70px; }
.design-page .section-header .sd-label{ margin-bottom: 32px; }
.design-page .section-header h2{ font-size: clamp(40px, 4.6vw, 66px); max-width: 22ch; }
.design-page .section-header .sd-lead{ margin-top: 22px; }
.design-page .wire{ border-bottom: 1px solid var(--line); padding: 26px 0 28px; background: var(--paper); position: relative; overflow: hidden; }
.design-page .wire-inner{ display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 32px; align-items: center; }
.design-page .wire-left{ display: inline-flex; align-items: center; gap: 14px; border-right: 1px solid var(--line); padding-right: 24px; min-height: 56px; }
.design-page .wire-mark{ width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.design-page .wire-pulse{ width: 6px; height: 6px; border-radius: 50%; background: var(--coral); display: inline-block; animation: pulse 2.4s ease-in-out infinite; }
.design-page .wire-title{ font-family: var(--sans); font-size: 11px; line-height: 1.4; display: flex; flex-direction: column; gap: 3px; }
.design-page .wire-title b{ color: var(--ink); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.design-page .wire-title span{ color: var(--ink-faint); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.design-page .wire-rows{ display: grid; gap: 8px; min-width: 0; }
.design-page .wire-row{ overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
.design-page .marquee-track{ display: inline-flex; align-items: center; gap: 36px; width: max-content; white-space: nowrap; animation: marquee-x 52s linear infinite; will-change: transform; }
.design-page .wire-row.reverse .marquee-track{ animation-direction: reverse; animation-duration: 64s; }
.design-page .wire-row:hover .marquee-track{ animation-play-state: paused; }
.design-page .wire-item{ display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); text-decoration: none; flex-shrink: 0; }
.design-page .wire-item .wire-dot{ color: var(--coral); font-size: 16px; line-height: 0; position: relative; top: -1px; margin-right: 2px; }
.design-page .wire-item .wire-coord{ font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0; }
.design-page .wire-item .wire-name{ text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); font-weight: 500; }
.design-page .wire-item .wire-handle{ font-family: var(--mono); color: var(--ink); font-size: 11.5px; font-weight: 500; }
.design-page .wire-item .wire-role{ text-transform: uppercase; letter-spacing: 0.16em; color: var(--coral); font-size: 10px; }
.design-page .wire-item.is-link{ transition: color 160ms ease; }
.design-page .wire-item.is-link:hover .wire-handle{ color: var(--coral); }
@media  (prefers-reduced-motion: reduce) {.design-page .marquee-track{ animation: none; }}
.design-page .sd-about-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.design-page .sd-about h2{ font-size: clamp(44px, 5.4vw, 78px); margin: 30px 0 36px; }
.design-page .sd-about .sd-label{ margin-bottom: 28px; }
.design-page .sd-about .sd-lead{ margin-bottom: 36px; max-width: 42ch; font-size: 17px; }
.design-page .sd-about .sd-footer-row{ display: flex; align-items: center; gap: 20px; margin-top: 56px; color: var(--ink-faint); font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.design-page .sd-about .sd-footer-row .sd-mark{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink); }
.design-page .sd-about .sd-stamp{ margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.4; }
.design-page .sd-about .sd-stamp span:first-child{ color: var(--coral); }
.design-page .sd-about-art{ position: relative; aspect-ratio: 1 / 1; max-width: 620px; margin-left: auto; }
.design-page .sd-about-art img{ width: 100%; height: 100%; object-fit: contain; }
.design-page .sd-about-side-note{ position: absolute; right: -8px; top: 26px; text-align: right; font-family: var(--sans); font-size: 10.5px; line-height: 1.55; color: var(--ink-faint); letter-spacing: 0.04em; max-width: 16ch; }
.design-page .sd-about-side-note b{ display: block; color: var(--coral); width: 36px; height: 1px; background: var(--coral); margin: 0 0 10px auto; }
.design-page .sd-about-caption{ position: absolute; right: 18px; bottom: 4px; font-family: var(--sans); font-size: 9.5px; color: var(--ink-faint); text-align: right; letter-spacing: 0.06em; line-height: 1.45; }
.design-page .sd-about-caption b{ color: var(--ink); display: block; }
.design-page .sd-capabilities-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.design-page .sd-capabilities-art{ position: relative; aspect-ratio: 1 / 1; max-width: 600px; }
.design-page .sd-capabilities-art img{ width: 100%; height: 100%; object-fit: contain; }
.design-page .sd-capabilities-art .sd-ribbon{ position: absolute; right: -42px; top: 50%; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint); writing-mode: vertical-rl; transform: rotate(180deg); }
.design-page .sd-capabilities-art .sd-ribbon b{ color: var(--coral); }
.design-page .sd-capabilities-art .sd-corner{ position: absolute; width: 22px; height: 22px; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
.design-page .sd-capabilities-art .sd-corner.sd-tl{ top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.design-page .sd-capabilities-art .sd-corner.sd-br{ bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.design-page .sd-capabilities-copy h2{ font-size: clamp(40px, 4.8vw, 64px); margin: 22px 0 30px; }
.design-page .sd-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.design-page .sd-card{ padding: 28px 26px 32px; background: var(--bone); border-radius: 18px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(21, 20, 15, 0.06); position: relative; overflow: hidden; transition: transform 0.2s ease; }
.design-page .sd-card:hover{ transform: translateY(-3px); }
.design-page .sd-card .sd-num{ font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 500; color: var(--coral); letter-spacing: 0.04em; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.design-page .sd-card .sd-num .sd-tag{ font-family: var(--sans); font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; font-weight: 500; }
.design-page .sd-card .sd-icon{ width: 28px; height: 28px; margin-bottom: 16px; color: var(--ink); }
.design-page .sd-card h3{ font-family: var(--sans); font-size: 22px; font-weight: 700; line-height: 1.05; letter-spacing: -0.014em; margin-bottom: 14px; }
.design-page .sd-card p{ font-family: var(--body); font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; max-width: 24ch; }
.design-page .sd-card .sd-arrow-mark{ position: absolute; right: 22px; bottom: 22px; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: all 0.18s ease; }
.design-page .sd-card:hover .sd-arrow-mark{ background: var(--coral); border-color: var(--coral); color: #fff; }
.design-page .sd-card .sd-arrow-mark svg{ width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.design-page .sd-labs-head{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; margin-bottom: 48px; }
.design-page .sd-labs-head h2{ font-size: clamp(40px, 4.8vw, 68px); }
.design-page .sd-pills{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.design-page .sd-pill{ padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--ink-soft); background: transparent; cursor: pointer; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 8px; }
.design-page .sd-pill:hover{ background: rgba(21, 20, 15, 0.04); }
.design-page .sd-pill.sd-active{ background: var(--coral); border-color: var(--coral); color: #fff; }
.design-page .sd-pill .sd-count{ font-size: 10px; color: var(--ink-faint); border-left: 1px solid var(--line); padding-left: 8px; }
.design-page .sd-pill.sd-active .sd-count{ color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }
.design-page .sd-labs-meta{ display: flex; align-items: flex-start; justify-content: flex-end; gap: 22px; margin-bottom: 30px; }
.design-page .sd-labs-meta .sd-ring{ width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.design-page .sd-labs-meta .sd-meta-text{ font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.55; color: var(--ink-faint); max-width: 28ch; }
.design-page .sd-labs-meta .sd-meta-text b{ display: block; color: var(--ink); }
.design-page .sd-labs-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.design-page .sd-lab{ display: flex; flex-direction: column; }
.design-page .sd-lab-img{ aspect-ratio: 4 / 5; background: var(--bone); border-radius: 14px; overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow); position: relative; }
.design-page .sd-lab-img img{ width: 100%; height: 100%; object-fit: cover; }
.design-page .sd-lab-img .sd-badge{ position: absolute; top: 12px; left: 12px; background: rgba(239, 231, 210, 0.9); color: var(--ink); padding: 4px 9px; border-radius: 4px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.design-page .sd-lab .sd-num-row{ font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.14em; margin-bottom: 8px; display: flex; justify-content: space-between; text-transform: uppercase; }
.design-page .sd-lab h4{ font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.014em; margin-bottom: 8px; }
.design-page .sd-lab p{ font-family: var(--body); font-size: 13px; color: var(--ink-mute); line-height: 1.55; margin-bottom: 14px; }
.design-page .sd-lab .sd-arrow-mark{ width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); margin-top: auto; align-self: flex-start; }
.design-page .sd-lab .sd-arrow-mark svg{ width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.design-page .sd-labs-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 50px; border-top: 1px dashed var(--line); padding-top: 22px; }
.design-page .sd-progress{ display: flex; align-items: center; gap: 8px; }
.design-page .sd-progress span{ width: 26px; height: 2px; background: var(--line); border-radius: 2px; }
.design-page .sd-progress span.sd-on{ background: var(--coral); }
.design-page .sd-method-head{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; margin-bottom: 80px; }
.design-page .sd-method-head h2{ font-size: clamp(44px, 5.2vw, 76px); }
.design-page .sd-method-head .sd-right{ display: flex; align-items: flex-start; gap: 14px; padding-top: 14px; }
.design-page .sd-method-head .sd-plus{ color: var(--coral); font-size: 24px; line-height: 1; font-family: var(--sans); }
.design-page .sd-method-head .sd-right p{ font-family: var(--sans); font-size: 13px; color: var(--ink-soft); max-width: 22ch; line-height: 1.55; }
.design-page .sd-method-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; position: relative; }
.design-page .sd-method-grid::before{ content: ""; position: absolute; top: 60px; left: 50px; right: 50px; height: 1px; background: var(--line-soft); }
.design-page .sd-method-step{ position: relative; }
.design-page .sd-method-step .sd-num{ font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 78px; color: var(--coral); line-height: 0.85; margin-bottom: 24px; letter-spacing: -0.02em; background: var(--paper); display: inline-block; padding-right: 12px; position: relative; z-index: 1; }
.design-page .sd-method-step h4{ font-family: var(--sans); font-size: 30px; font-weight: 800; letter-spacing: -0.022em; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; padding-right: 18px; }
.design-page .sd-method-step h4 .sd-arrow-r{ color: var(--ink-faint); font-size: 22px; line-height: 1; }
.design-page .sd-method-step:last-child h4 .sd-arrow-r{ display: none; }
.design-page .sd-method-step p{ font-family: var(--body); font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; margin-bottom: 24px; max-width: 24ch; }
.design-page .sd-method-step .sd-img{ aspect-ratio: 1 / 1; background: var(--bone); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.design-page .sd-method-step .sd-img img{ width: 100%; height: 100%; object-fit: cover; }
.design-page .sd-method-foot{ margin-top: 80px; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 24px; }
.design-page .sd-method-foot .sd-left,.design-page .sd-method-foot .sd-right{ font-family: var(--sans); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.18em; text-transform: uppercase; }
.design-page .sd-method-foot .sd-left{ display: inline-flex; align-items: center; gap: 12px; }
.design-page .sd-method-foot .sd-left .sd-ring{ width: 20px; height: 20px; border: 1px dashed var(--ink-faint); border-radius: 50%; }
.design-page .sd-method-foot .sd-right b{ color: var(--ink); }
.design-page .sd-work{ background: #15140f; color: var(--paper); border-radius: 32px; margin: 0 64px; overflow: hidden; position: relative; padding: 110px 64px; }
.design-page .sd-work::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n2)'/></svg>"); background-size: 240px 240px; opacity: 0.6; mix-blend-mode: screen; }
.design-page .sd-work-rule{ position: relative; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(247, 241, 222, 0.16); padding-top: 16px; margin-bottom: 60px; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 241, 222, 0.55); }
.design-page .sd-work-rule .sd-roman{ color: var(--coral); font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0.04em; text-transform: none; }
.design-page .sd-work-grid{ display: grid; grid-template-columns: 1fr 1.05fr 0.85fr; gap: 48px; align-items: center; position: relative; }
.design-page .sd-work .sd-label{ color: var(--coral); }
.design-page .sd-work .sd-label::before{ background: var(--coral); }
.design-page .sd-work-copy h2{ font-family: var(--sans); font-weight: 800; font-size: clamp(40px, 5vw, 66px); line-height: 1.0; letter-spacing: -0.024em; margin: 28px 0 36px; color: var(--paper); }
.design-page .sd-work-copy h2 em{ font-family: var(--serif); font-style: italic; font-weight: 500; }
.design-page .sd-work-copy h2 .sd-dot{ color: var(--coral); }
.design-page .sd-work-link{ display: inline-flex; align-items: center; gap: 18px; color: var(--paper); font-family: var(--sans); font-size: 14px; text-decoration: none; border-bottom: 2px solid var(--coral); padding-bottom: 12px; width: fit-content; }
.design-page .sd-work-link::after{ content: "↗"; color: var(--coral); }
.design-page .sd-work-card{ background: var(--paper); color: var(--ink); border-radius: 18px; padding: 32px 30px; position: relative; transform: rotate(-1.2deg); text-decoration: none; display: block; transition: transform 280ms ease, box-shadow 280ms ease; }
.design-page .sd-work-card:hover{ transform: rotate(-1.2deg) translateY(-4px); box-shadow: var(--shadow); }
.design-page .sd-work-card.sd-alt{ transform: rotate(2.4deg) translateY(20px); padding: 28px 26px; }
.design-page .sd-work-card.sd-alt:hover{ transform: rotate(2.4deg) translateY(16px); box-shadow: var(--shadow); }
.design-page .sd-work-card .sd-label-row{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.design-page .sd-work-card .sd-small-label{ font-family: var(--sans); font-size: 10.5px; color: var(--coral); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.design-page .sd-work-card .sd-index{ font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.design-page .sd-work-card h3{ font-family: var(--sans); font-size: clamp(26px, 2.4vw, 38px); font-weight: 800; letter-spacing: -0.022em; line-height: 1.05; margin-bottom: 14px; }
.design-page .sd-work-card p{ font-family: var(--body); font-size: 14px; color: var(--ink-mute); line-height: 1.55; margin-bottom: 22px; max-width: 28ch; }
.design-page .sd-work-card .sd-img{ aspect-ratio: 4 / 3; background: var(--bone); border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.design-page .sd-work-card .sd-img img{ width: 100%; height: 100%; object-fit: cover; }
.design-page .sd-work-card .sd-meta-row{ display: flex; justify-content: space-between; color: var(--ink-faint); font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 14px; }
.design-page .sd-work-card .sd-year{ color: var(--coral); font-weight: 600; }
.design-page .work-arrows{ position: absolute; right: 64px; bottom: 64px; display: inline-flex; align-items: center; gap: 10px; }
.design-page .work-arrows .nav-btn{ width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(247, 241, 222, 0.2); background: transparent; color: var(--paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.design-page .work-arrows .nav-btn.sd-active{ background: var(--coral); border-color: var(--coral); }
.design-page .sd-testimonial-grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.design-page .sd-testimonial-copy h2{ font-family: var(--sans); font-size: clamp(36px, 4vw, 54px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; margin-bottom: 36px; }
.design-page .sd-testimonial-copy h2 em{ font-family: var(--serif); font-style: italic; font-weight: 500; }
.design-page .sd-author{ display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.design-page .sd-author .sd-avatar{ width: 50px; height: 50px; border-radius: 50%; background: var(--ink); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: var(--paper); font-family: var(--serif); font-style: italic; font-size: 24px; }
.design-page .sd-author p{ font-family: var(--sans); font-size: 14px; color: var(--ink); font-weight: 600; }
.design-page .sd-author p span{ display: block; color: var(--ink-mute); font-weight: 400; }
.design-page .sd-divider{ border-top: 1px solid var(--line); margin: 60px 0 32px; }
.design-page .sd-partners-text{ font-family: var(--body); font-size: 14px; color: var(--ink-mute); margin-bottom: 26px; max-width: 38ch; }
.design-page .sd-partners{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; align-items: end; }
.design-page .sd-partner{ display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; transition: transform 220ms ease; }
.design-page .sd-partner:hover{ transform: translateY(-2px); }
.design-page .sd-partner:hover .sd-glyph{ color: var(--coral); }
.design-page .sd-partner:hover span{ color: var(--coral); }
.design-page .sd-partner .sd-glyph{ height: 32px; display: flex; align-items: center; color: var(--ink); transition: color 220ms ease; }
.design-page .sd-partner .sd-glyph svg{ height: 100%; width: auto; max-width: 90px; }
.design-page .sd-partner span{ font-family: var(--sans); font-size: 13px; color: var(--ink); letter-spacing: -0.005em; font-weight: 600; transition: color 220ms ease; }
.design-page .sd-partner small{ font-family: var(--sans); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; }
.design-page .sd-read-more{ margin-top: 56px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; color: var(--ink); text-decoration: none; letter-spacing: 0.04em; border-bottom: 1px solid var(--coral); padding-bottom: 6px; }
.design-page .sd-read-more::after{ content: "→"; color: var(--coral); }
.design-page .sd-testimonial-art{ position: relative; aspect-ratio: 1 / 1; max-width: 560px; }
.design-page .sd-testimonial-art img{ width: 100%; height: 100%; object-fit: contain; }
.design-page .amr-band{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.design-page .amr-band-inner{ max-width: 860px; margin: 0 auto; padding: 18px 0 0; text-align: center; }
.design-page .amr-band-kicker{ display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.design-page .amr-band-title{ font-family: var(--sans); font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 16px auto 0; max-width: 720px; color: var(--ink); }
.design-page .amr-band-lead{ font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 16px auto 0; max-width: 620px; }
.design-page .amr-band-chips{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.design-page .amr-band-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.design-page .amr-band-chip-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--ink-soft)); flex: none; }
.design-page .amr-band-logos{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; list-style: none; margin: 30px 0 0; padding: 0; }
.design-page .amr-band-logos li{ display: inline-flex; align-items: center; }
.design-page .amr-band-logo{ width: 26px; height: 26px; display: block; opacity: 0.74; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.design-page .amr-band-logos li:hover .amr-band-logo{ opacity: 1; }
.design-page .amr-band-more{ font-family: var(--sans); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: 0.05em; color: var(--ink-faint); transform: translateY(-4px); }
.design-page .amr-band-actions{ display: flex; justify-content: center; margin-top: 30px; }
.design-page .amr-band-cta{ padding: 11px 22px; font-size: 14px; }
.design-page .amr-band-cta::after{ content: "→"; color: var(--paper); font-size: 13px; margin-left: 7px; }
.design-page .sd-cta-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.design-page .sd-cta h2{ font-size: clamp(54px, 6.6vw, 100px); margin: 32px 0 32px; }
.design-page .sd-cta .sd-lead{ margin-bottom: 36px; max-width: 36ch; font-size: 16px; }
.design-page .sd-cta-actions{ display: inline-flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.design-page .sd-email-pill{ display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px 14px 22px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--sans); font-size: 14px; color: var(--ink); text-decoration: none; }
.design-page .sd-email-pill .sd-arrow-circle{ width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.design-page .sd-cta-foot{ display: flex; gap: 28px; align-items: center; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.design-page .sd-cta-foot .sd-stamp{ color: var(--coral); font-weight: 600; }
.design-page .sd-cta-art{ position: relative; aspect-ratio: 1 / 1; max-width: 620px; margin-left: auto; }
.design-page .sd-cta-art img{ width: 100%; height: 100%; object-fit: contain; }
.design-page .sd-cta-art .sd-index{ position: absolute; right: 8px; top: 24px; font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink-faint); }
.design-page .sd-cta-art .sd-ribbon{ position: absolute; left: -32px; top: 50%; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint); writing-mode: vertical-rl; transform: rotate(180deg); }
.design-page footer{ border-top: 1px solid var(--line); padding: 60px 0 30px; margin-top: 60px; }
.design-page .foot-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.design-page .foot-brand .brand{ margin-bottom: 18px; }
.design-page .foot-brand p{ font-family: var(--body); font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; max-width: 38ch; }
.design-page .foot-brand p .inline-link,.design-page .inline-link{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: color 160ms ease, border-color 160ms ease; }
.design-page .inline-link:hover{ color: var(--coral); border-bottom-color: var(--coral); }
.design-page .sd-method-repo-link{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; }
.design-page .sd-method-repo-link:hover{ color: var(--coral); border-bottom-color: var(--coral); }
.design-page .library-link{ text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
.design-page .library-link:hover{ border-bottom-color: var(--coral); }
.design-page .foot-col h5{ font-family: var(--sans); font-size: 11px; color: var(--ink); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 700; }
.design-page .foot-col ul{ list-style: none; }
.design-page .foot-col li{ margin-bottom: 10px; }
.design-page .foot-col a{ font-family: var(--body); font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
.design-page .foot-col a:hover{ color: var(--coral); }
.design-page .foot-bottom{ border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.design-page .foot-bottom .sd-right{ display: inline-flex; gap: 24px; align-items: center; }
.design-page .foot-bottom .pulse{ width: 6px; height: 6px; border-radius: 50%; background: var(--coral); display: inline-block; margin-right: 6px; vertical-align: middle; }
.design-page .foot-mega{ margin-top: 60px; padding-top: 0; padding-bottom: 12px; border-top: 1px solid var(--line); overflow-x: hidden; overflow-y: visible; }
.design-page .foot-mega .word{ font-family: var(--sans); font-weight: 900; font-size: clamp(70px, 13vw, 200px); letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); white-space: nowrap; margin-top: 30px; padding-bottom: 0.18em; }
.design-page .foot-mega .word em{ font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--coral); }
.design-page [data-reveal]{ opacity: 0; translate: 0 28px; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), translate 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), scale 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms); will-change: opacity, translate, scale; }
.design-page [data-reveal="left"]{ translate: -36px 0; }
.design-page [data-reveal="right"]{ translate: 36px 0; }
.design-page [data-reveal="scale"]{ translate: 0 0; scale: 0.96; }
.design-page [data-reveal="rise-lg"]{ translate: 0 64px; scale: 0.985; }
.design-page [data-reveal][data-revealed="true"]{ opacity: 1; translate: 0 0; scale: 1; }
.design-page .sd-cards > .sd-card[data-reveal]:nth-child(1){ --reveal-delay: 0ms; }
.design-page .sd-cards > .sd-card[data-reveal]:nth-child(2){ --reveal-delay: 90ms; }
.design-page .sd-cards > .sd-card[data-reveal]:nth-child(3){ --reveal-delay: 180ms; }
.design-page .sd-cards > .sd-card[data-reveal]:nth-child(4){ --reveal-delay: 270ms; }
.design-page .sd-labs-grid > .sd-lab[data-reveal]:nth-child(1){ --reveal-delay: 0ms; }
.design-page .sd-labs-grid > .sd-lab[data-reveal]:nth-child(2){ --reveal-delay: 90ms; }
.design-page .sd-labs-grid > .sd-lab[data-reveal]:nth-child(3){ --reveal-delay: 180ms; }
.design-page .sd-labs-grid > .sd-lab[data-reveal]:nth-child(4){ --reveal-delay: 270ms; }
.design-page .sd-labs-grid > .sd-lab[data-reveal]:nth-child(5){ --reveal-delay: 360ms; }
.design-page .sd-method-grid > .sd-method-step[data-reveal]:nth-child(1){ --reveal-delay: 0ms; }
.design-page .sd-method-grid > .sd-method-step[data-reveal]:nth-child(2){ --reveal-delay: 110ms; }
.design-page .sd-method-grid > .sd-method-step[data-reveal]:nth-child(3){ --reveal-delay: 220ms; }
.design-page .sd-method-grid > .sd-method-step[data-reveal]:nth-child(4){ --reveal-delay: 330ms; }
.design-page .sd-partners > .sd-partner[data-reveal]:nth-child(1){ --reveal-delay: 0ms; }
.design-page .sd-partners > .sd-partner[data-reveal]:nth-child(2){ --reveal-delay: 70ms; }
.design-page .sd-partners > .sd-partner[data-reveal]:nth-child(3){ --reveal-delay: 140ms; }
.design-page .sd-partners > .sd-partner[data-reveal]:nth-child(4){ --reveal-delay: 210ms; }
.design-page .sd-partners > .sd-partner[data-reveal]:nth-child(5){ --reveal-delay: 280ms; }
.design-page .sd-partners > .sd-partner[data-reveal]:nth-child(6){ --reveal-delay: 350ms; }
.design-page .sd-hero-copy > [data-reveal]:nth-of-type(1){ --reveal-delay: 0ms; }
.design-page .sd-hero-copy > [data-reveal]:nth-of-type(2){ --reveal-delay: 80ms; }
.design-page .sd-hero-copy > [data-reveal]:nth-of-type(3){ --reveal-delay: 160ms; }
.design-page .sd-hero-copy > [data-reveal]:nth-of-type(4){ --reveal-delay: 240ms; }
.design-page .sd-hero-copy > [data-reveal]:nth-of-type(5){ --reveal-delay: 320ms; }
.design-page .sd-hero-copy > [data-reveal]:nth-of-type(6){ --reveal-delay: 400ms; }
@media  (prefers-reduced-motion: reduce) {.design-page [data-reveal]{ opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; transition: none !important; }
.design-page .nav{ transition: none !important; }}
@media  (max-width: 1280px) {.design-page .sd-container{ padding: 0 44px; }
.design-page .sd-work{ margin: 0 44px; padding: 90px 44px; }
.design-page .side-rail{ display: none; }}
@media  (max-width: 1200px) {.design-page .topbar-inner .mid{ display: none; }}
@media  (max-width: 1280px) {.design-page .nav-inner{ gap: 18px; }
.design-page .brand-meta{ display: none; }
.design-page .nav-links{ gap: 28px; }}
@media  (max-width: 1080px) {.design-page .sd-container{ padding: 0 32px; }
.design-page .sd-hero h1{ font-size: clamp(36px, 4.6vw, 54px); }
.design-page .section-header h2{ font-size: clamp(32px, 4vw, 50px); }
.design-page .sd-labs-grid{ grid-template-columns: repeat(5, 1fr); gap: 14px; }
.design-page .sd-partners{ grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 28px; }
.design-page .foot-grid{ grid-template-columns: 2fr 1fr 1fr; }
.design-page .foot-grid .foot-col:nth-child(4),.design-page .foot-grid .foot-col:nth-child(5){ display: none; }}
@media  (max-width: 880px) {.design-page .sd-container{ padding: 0 24px; }
.design-page .sd-hero-grid,.design-page .sd-about-grid,.design-page .sd-capabilities-grid,.design-page .sd-testimonial-grid,.design-page .sd-cta-grid{ grid-template-columns: 1fr; gap: 50px; }
.design-page .sd-labs-head,.design-page .sd-method-head{ grid-template-columns: 1fr; }
.design-page .sd-labs-grid{ grid-template-columns: repeat(2, 1fr); }
.design-page .sd-method-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px; }
.design-page .sd-method-grid::before{ display: none; }
.design-page .sd-work{ margin: 0 12px; padding: 60px 24px; }
.design-page .sd-work-grid{ grid-template-columns: 1fr; }
.design-page .sd-partners{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
.design-page .nav-links,.design-page .brand-meta,.design-page .nav-cta{ display: none; }
.design-page .wire-inner{ grid-template-columns: 1fr; gap: 14px; }
.design-page .wire-left{ border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; min-height: 0; }}
@media  (max-width: 560px) {.design-page .sd-container{ padding: 0 16px; }
.design-page .sd-hero h1{ font-size: 38px; }
.design-page .sd-labs-grid{ grid-template-columns: 1fr; }
.design-page .sd-cards{ grid-template-columns: 1fr; }
.design-page .sd-pills{ justify-content: flex-start; }
.design-page section{ padding: 80px 0; }
.design-page .topbar-inner{ font-size: 9px; }}
.design-page .code-inline{
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bone);
  padding: 1px 6px;
  border-radius: 4px;
}
.design-page .code-inline.sm{ font-size: 12px; padding: 0 4px; }
.design-page a,.design-page button,.design-page summary{touch-action:manipulation}
.design-page a:focus-visible,.design-page button:focus-visible,.design-page summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.design-page .brand-glyph{width:34px;height:34px;flex:none}
.design-page .brand-mark{border:0}
.design-page .brand-meta{display:none}
.design-page .nav-links{gap:26px}
.design-page .nav-side{gap:12px}
.design-page .nav-cta{min-height:44px}
.design-page .nav-cta::after{content:"↗";color:inherit}
.design-page .nav:focus-within,.design-page .nav:has(details[open]){transform:none;pointer-events:auto}
.design-page .nav{transition-duration:180ms}
.design-page .sd-container{max-width:1440px}
.design-page .nav-inner{gap:20px}
.design-page .topbar-inner{letter-spacing:.1em}
.design-page .topbar-inner .mid{gap:20px}
.design-page .topbar .mid>span:last-child{display:none}
.design-page .sd-label{color:var(--ink-mute)}
.design-page .sd-roman{color:var(--ink-mute)}
.design-page .sd-display,.design-page h2{overflow-wrap:anywhere;text-wrap:balance}
.design-page .sd-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px}
.design-page .sd-hero h1{font-size:clamp(44px,5.1vw,76px);max-width:12ch;line-height:1.03}
.design-page .sd-hero-actions,.design-page .sd-cta-actions{flex-wrap:wrap}
.design-page .sd-hero-stats{flex-wrap:wrap;gap:18px}
.design-page .sd-hero-stats .sd-stat{white-space:normal}
.design-page .sd-hero-stats .sd-stat-label{max-width:11ch}
.design-page .sd-hero-foot{flex-wrap:wrap;gap:12px}
.design-page .hero-art{height:auto;aspect-ratio:1/1;margin:0;align-self:center;background:var(--fixed-light);overflow:hidden}
.design-page .hero-art img{object-fit:contain}
.design-page .hero-art .annot{background:var(--fixed-light);color:var(--fixed-dark);padding:4px 6px;max-width:calc(100% - 32px);white-space:normal}
.design-page .hero-art .annot-tr,.design-page .hero-art .annot-br{display:none}
.design-page .hero-art .sd-index{position:static;display:flex;justify-content:space-between;gap:6px;border:0;border-top:1px dotted var(--line);border-radius:0;padding:14px 0;margin-top:18px;background:transparent;backdrop-filter:none}
.design-page .sd-hero-index{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding:18px 0;border-top:1px dotted var(--line);font:12px var(--mono);color:var(--ink-mute)}
.design-page .sd-hero-index .sd-n{margin-right:10px;color:var(--ink)}
.design-page .sd-hero-index span.sd-on{color:var(--ink)}
.design-page .sd-btn-primary{color:var(--fixed-dark);box-shadow:0 6px 18px -12px var(--accent)}
.design-page .sd-btn-primary:hover{background:var(--coral-soft);color:var(--fixed-light)}
.design-page .sd-btn-ghost{background:transparent}
.design-page .sd-btn{min-height:48px}
.design-page .sd-btn .sd-arrow{color:inherit}
.design-page .sd-label::before{background:var(--accent)}
.design-page .sd-about-art{background:var(--fixed-light);padding:16px}
.design-page .sd-about-side-note{display:none}
.design-page .sd-about-caption{position:static;max-width:none;padding-top:16px;color:var(--fixed-dark);font-size:12px}
.design-page .sd-about-caption b{color:var(--fixed-dark)}
.design-page .sd-capabilities-art{background:var(--fixed-light);padding:20px}
.design-page .sd-capabilities-art .sd-ribbon{color:var(--fixed-dark)}
.design-page .sd-card .sd-icon{display:none}
.design-page .sd-card{border-radius:10px;padding-bottom:58px;box-shadow:none;border:1px solid var(--line)}
.design-page .sd-card .sd-num{color:var(--ink)}
.design-page .sd-card p{max-width:none;font-size:15px}
.design-page .sd-card h3{line-height:1.15}
.design-page .sd-card .sd-arrow-mark,.design-page .sd-lab .sd-arrow-mark{width:44px;height:44px}
.design-page .sd-card:hover .sd-arrow-mark{color:var(--fixed-dark)}
.design-page .sd-lab .sd-num-row{flex-wrap:wrap;gap:6px}
.design-page .sd-lab h4{font-size:21px;line-height:1.2}
.design-page .sd-lab p{font-size:15px}
.design-page .sd-lab[hidden]{display:none!important}
.design-page .sd-lab-img{aspect-ratio:3/4;background:var(--fixed-light)}
.design-page .sd-lab-img .sd-badge{top:12px;left:12px;background:var(--fixed-light);color:var(--fixed-dark);box-shadow:var(--shadow-sm)}
.design-page .sd-pill{min-height:44px}
.design-page .sd-pill.sd-active{color:var(--fixed-dark)}
.design-page .sd-pill.sd-active .sd-count{color:var(--fixed-dark)}
.design-page .sd-labs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.design-page .sd-labs-meta .sd-meta-text{font-size:12px}
.design-page .sd-method-step p{font-size:15px}
.design-page .sd-method-step .sd-num{color:var(--ink)}
.design-page .sd-method-step h4{font-size:clamp(22px,2vw,30px)}
.design-page .sd-method-foot{gap:24px}
.design-page .sd-method-step .sd-img{background:var(--fixed-light)}
.design-page .sd-partners{grid-template-columns:repeat(5,minmax(0,1fr))}
.design-page .sd-partner .sd-glyph svg{width:40px}
.design-page .sd-partner small{letter-spacing:.02em}
.design-page .sd-testimonial-art{background:var(--fixed-light)}
.design-page .sd-work{--paper:var(--fixed-light);--ink:var(--fixed-dark);--ink-mute:oklch(54.943% 0.00986 84.587);--ink-faint:oklch(54.943% 0.00986 84.587);--line:color-mix(in oklch,var(--fixed-dark) 18%,transparent);background:var(--fixed-dark);border-radius:16px}
.design-page .sd-work-rule{color:var(--fixed-muted);gap:16px}
.design-page .sd-work-rule .sd-roman{color:var(--fixed-muted)}
.design-page .sd-work .sd-label{color:var(--fixed-muted)}
.design-page .sd-work-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.design-page .sd-work-card{border-radius:10px;min-width:0}
.design-page .sd-work-card .sd-label-row,.design-page .sd-work-card .sd-meta-row{flex-wrap:wrap;gap:8px}
.design-page .sd-work-card .sd-small-label,.design-page .sd-work-card .sd-year{color:var(--ink)}
.design-page .sd-work-card .sd-index{position:static}
.design-page .sd-work-card h3{overflow-wrap:anywhere}
.design-page .sd-work-card .sd-img{background:var(--fixed-light)}
.design-page .sd-work-card p{font-size:15px}
.design-page .sd-work-copy h2{font-size:clamp(38px,4vw,60px)}
.design-page .work-arrows{display:none}
.design-page .sd-cta-art{background:var(--fixed-light)}
.design-page .sd-cta-art .sd-ribbon{left:12px;right:12px;bottom:12px;transform:none;width:auto;background:var(--fixed-dark);color:var(--fixed-light);font-size:11px}
.design-page .sd-cta-art .sd-index{top:12px;right:12px;color:var(--fixed-dark);background:var(--fixed-light)}
.design-page .sd-cta-foot{flex-wrap:wrap;gap:12px}
.design-page .sd-email-pill{min-height:48px}
.design-page .foot-bottom{flex-wrap:wrap;gap:20px;line-height:1.6}
.design-page .foot-bottom .sd-right{flex-wrap:wrap;gap:14px}
.design-page .foot-mega .word{white-space:normal;font-size:clamp(48px,12vw,170px);overflow-wrap:anywhere}
.design-page .foot-mega .word em{color:var(--ink)}
.design-page .sd-sec-rule .sd-meta-grp{gap:12px}
.design-page .sd-sec-rule{gap:16px}
.design-page .sd-sec-rule .sd-meta-grp span{white-space:normal}
.design-page .sd-sec-rule>span:last-child{white-space:nowrap}
.design-page .sd-lead{font-size:17px;max-width:42ch}
.design-page [data-reveal]{transition-duration:500ms;--reveal-delay:0ms!important}
.design-page .sd-progress{display:none}
.design-page .sd-labs-foot .sd-meta{font-size:12px}
.design-page .theme-trigger{background:var(--surface)}
.design-page .theme-option:hover{background:var(--paper-warm)}
.design-page .theme-option[aria-pressed="true"]{color:var(--ink)}
@media (min-width:1281px){.design-page .topbar-inner .mid{display:block}}
@media (max-width:1200px){.design-page .nav-links{display:none}
.design-page .nav-inner>.brand{font-size:18px}
.design-page .sd-work-grid{grid-template-columns:1fr 1fr}
.design-page .sd-work-copy{grid-column:1/-1}
.design-page .sd-work-copy h2{max-width:16ch}
.design-page .sd-work-card.sd-alt{transform:rotate(1deg)}}
@media (max-width:1080px){.design-page .sd-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.design-page .sd-hero h1{font-size:clamp(38px,5.3vw,60px)}
.design-page .sd-hero-actions{display:flex}
.design-page .hero-art{min-width:0}
.design-page .sd-hero-foot .sd-coord{display:none}
.design-page .foot-grid{grid-template-columns:2fr 1fr 1fr}
.design-page .foot-grid .foot-col:nth-child(4),.design-page .foot-grid .foot-col:nth-child(5){display:block}}
@media (max-width:880px){.design-page .nav{padding:14px 0}
.design-page .nav-cta{display:inline-flex}
.design-page .sd-hero-grid,.design-page .sd-about-grid,.design-page .sd-capabilities-grid,.design-page .sd-testimonial-grid,.design-page .sd-cta-grid{grid-template-columns:minmax(0,1fr)}
.design-page .sd-hero{min-height:auto}
.design-page .sd-hero h1{font-size:clamp(44px,8.4vw,72px);max-width:16ch}
.design-page .sd-hero h1 br{display:none}
.design-page .hero-art{max-width:640px;margin:0 auto;width:100%}
.design-page .sd-hero-copy{padding:24px 0 0}
.design-page .sd-hero-grid{gap:28px}
.design-page .sd-hero-index{grid-column:auto}
.design-page .hero-art .annot{font-size:10px}
.design-page .sd-labs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.design-page .sd-method-grid{gap:32px}
.design-page .sd-work{margin:0 16px;padding:60px 24px}
.design-page .sd-work-grid{grid-template-columns:1fr}
.design-page .sd-work-card,.design-page .sd-work-card.sd-alt{transform:none}
.design-page .sd-work-card:hover,.design-page .sd-work-card.sd-alt:hover{transform:translateY(-3px)}
.design-page .sd-work-rule>span:nth-child(2){display:none}
.design-page .sd-partners{grid-template-columns:repeat(3,minmax(0,1fr))}
.design-page .sd-method-foot{flex-wrap:wrap}
.design-page .foot-grid{grid-template-columns:1fr 1fr}
.design-page .foot-brand{grid-column:1/-1}
.design-page .sd-sec-rule .sd-meta-grp{font-size:10px;letter-spacing:.04em}
.design-page .sd-hero-actions{margin-bottom:24px}
.design-page .sd-hero-stats{margin-bottom:24px}
.design-page .sd-cta-foot>span:last-child{margin-left:0!important}}
@media (max-width:560px){.design-page .sd-container{padding:0 20px}
.design-page .topbar-inner{font-size:9px;letter-spacing:.02em;gap:8px}
.design-page .topbar-inner .sd-right{gap:8px}
.design-page .topbar-inner .sd-right>span{display:none}
.design-page .brand{gap:8px}
.design-page .nav-inner{gap:12px;flex-wrap:wrap}
.design-page .nav-inner>.brand{font-size:15px}
.design-page .brand-glyph{width:26px;height:26px}
.design-page .nav-side{gap:8px}
.design-page .nav-cta{padding:8px 12px;font-size:12px}
.design-page .theme-trigger{width:44px;height:44px}
.design-page .nav-inner>nav{display:none}
.design-page .sd-hero h1{font-size:clamp(40px,11vw,60px);line-height:1.06}
.design-page .sd-hero-copy .sd-lead{font-size:16px}
.design-page .sd-hero-actions .sd-btn{padding:12px 18px;font-size:13px}
.design-page .sd-hero-index{flex-wrap:wrap;justify-content:flex-start;gap:16px 24px;font-size:11px}
.design-page .sd-hero-stats{gap:12px;flex-direction:column;align-items:flex-start}
.design-page .sd-hero-stats .sd-stat-label{max-width:none}
.design-page .sd-sec-rule .sd-meta-grp span:last-child{display:none}
.design-page .sd-sec-rule .sd-meta-grp{gap:6px}
.design-page .sd-sec-rule{font-size:10px;gap:8px}
.design-page .sd-about-copy h2,.design-page .sd-capabilities-copy h2,.design-page .sd-labs-head h2,.design-page .sd-method-head h2{font-size:clamp(34px,9vw,46px)}
.design-page .sd-cta h2{font-size:clamp(40px,11vw,60px)}
.design-page .sd-labs-grid,.design-page .sd-cards,.design-page .sd-method-grid{grid-template-columns:1fr}
.design-page .sd-labs-grid{gap:40px}
.design-page .sd-method-grid{gap:48px}
.design-page .sd-method-step .sd-img{max-width:360px}
.design-page .sd-method-step p{max-width:36ch}
.design-page .sd-partners{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.design-page .sd-work-rule{font-size:10px}
.design-page .sd-work-card{padding:24px 20px}
.design-page .sd-work-card.sd-alt{padding:24px 20px}
.design-page .sd-work-card h3{font-size:30px}
.design-page .sd-work-copy h2{font-size:42px}
.design-page .sd-work-card .sd-meta-row{font-size:10px;letter-spacing:.04em}
.design-page .sd-cta-actions{display:flex}
.design-page .foot-grid{gap:32px}
.design-page .foot-col a{font-size:14px}
.design-page .foot-bottom{font-size:10px;letter-spacing:.05em}
.design-page .sd-label{font-size:10px;letter-spacing:.12em}
.design-page .sd-about-art{padding:12px}
.design-page .theme-menu{right:0;left:auto;width:176px}}
.design-page img[data-art-source="atelier-zero"]{filter:grayscale(1)}
.design-page .topbar-inner .sd-coral,.design-page .foot-cta{color:var(--ink)}
.design-page .sd-about-copy .sd-stamp{color:var(--ink-mute)}
.design-page .sd-hero-stats .sd-stat .sd-ring.sd-coral{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.design-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.design-page [data-reveal]{opacity:1!important;translate:0 0!important;scale:1!important}}
.design-page .theme-picker{position:relative; flex:none}
.design-page .theme-trigger{display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-panel); color:var(--text); cursor:pointer; box-shadow:var(--shadow-sm)}
.design-page .theme-trigger::-webkit-details-marker{display:none}
.design-page .theme-trigger:hover{background:var(--bg-subtle); border-color:var(--accent)}
.design-page .theme-trigger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.design-page .theme-trigger svg{display:none; width:20px; height:20px}
.design-page .theme-picker[data-mode="system"] .theme-icon-system,.design-page .theme-picker[data-mode="light"] .theme-icon-light,.design-page .theme-picker[data-mode="dark"] .theme-icon-dark{display:block}
.design-page .theme-menu{position:absolute; top:calc(100% + 8px); right:0; width:184px; padding:6px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-elevated); box-shadow:var(--shadow-md)}
.design-page .theme-option{display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text); font-family:var(--sans); font-size:13px; text-align:left; cursor:pointer}
.design-page .theme-option:hover{background:var(--bg-subtle)}
.design-page .theme-option[aria-pressed="true"]{background:var(--accent-tint); color:var(--text-strong)}
.design-page .theme-option svg{width:16px; height:16px; visibility:hidden}
.design-page .theme-option[aria-pressed="true"] svg{visibility:visible}
.design-page .sd-hero-lab{position:relative;min-width:0;width:100%;max-width:680px;align-self:center;margin:20px auto 0;color:var(--fg);container-type:inline-size}
.design-page .sd-hero-lab-head{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px dotted var(--border);font:10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.design-page .sd-hero-stage{isolation:isolate;position:relative;aspect-ratio:1.18;overflow:hidden;background:transparent}
.design-page .sd-hero-lab .sd-hero-sculpture{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translate(3%,-2%) scale(.91);transition:transform .75s cubic-bezier(.22,1,.36,1),filter .75s;z-index:2;filter:drop-shadow(0 18px 16px color-mix(in oklch,var(--fg) 8%,transparent))}
.design-page .hero-orbit{position:absolute;inset:12% 9% 17%;border:1px solid var(--border);border-radius:50%;transform:rotate(-24deg);transition:transform .8s,opacity .5s;opacity:.6}
.design-page .hero-orbit:after{content:"";position:absolute;inset:12%;border:1px dotted var(--border);border-radius:50%}
.design-page .sd-hero-stage-caption{position:absolute;left:0;bottom:5%;z-index:4;display:flex;gap:10px;align-items:flex-start;font:12px/1.5 var(--mono);color:var(--muted);max-width:46%}
.design-page .sd-hero-caption-number{font-size:10px;border-top:1px solid var(--accent);padding-top:5px;color:var(--accent)}
.design-page .sd-hero-sheet{position:absolute;inset:8% 8% 15%;z-index:1;background:var(--surface);border:1px solid var(--border);box-shadow:0 16px 32px -18px color-mix(in oklch,var(--fg) 25%,transparent);opacity:0;transform:translateY(20px) rotate(-3deg) scale(.9);transition:opacity .45s,transform .65s}
.design-page .sd-hero-sheet-nav{display:flex;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);font:8px var(--mono);letter-spacing:.08em}
.design-page .sd-hero-sheet-title{position:absolute;left:7%;top:27%;font:500 clamp(22px,5cqw,34px)/1.1 "Inter Tight",sans-serif;letter-spacing:-.05em;max-width:55%}
.design-page .sd-hero-sheet-title em{font-family:"Playfair Display",serif;font-weight:400}
.design-page .sd-hero-sheet-foot{position:absolute;left:7%;bottom:8%;font:8px var(--mono);color:var(--muted)}
.design-page .sd-hero-volume-word{position:absolute;left:3%;top:6%;z-index:0;font:italic clamp(80px,23cqw,160px)/1 "Playfair Display",serif;letter-spacing:-.07em;color:var(--border);opacity:0;transition:opacity .5s}
.design-page .sd-hero-format-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px dotted var(--border)}
.design-page .sd-hero-format-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 3px;border:0;border-top:2px solid transparent;margin-top:-1px;color:var(--muted);background:transparent;font:500 12px/1.3 "Inter",sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.design-page .sd-hero-format-tabs button span{font:9px var(--mono);opacity:.7}
.design-page .sd-hero-format-tabs button[aria-selected="true"]{border-top-color:var(--accent);color:var(--fg);background:color-mix(in oklch,var(--accent) 7%,transparent)}
.design-page .sd-hero-format-tabs button:hover{color:var(--accent);background:color-mix(in oklch,var(--accent) 6%,transparent)}
.design-page .sd-hero-lab button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.design-page .sd-hero-format-note{min-height:3.2em;padding-top:12px;margin:0;font:12px/1.6 "Inter",sans-serif;color:var(--muted);max-width:48ch}
.design-page .sd-hero-lab[data-mode="web"] .sd-hero-sheet{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}
.design-page .sd-hero-lab[data-mode="web"] .sd-hero-sculpture{transform:translate(23%,-1%) scale(.53) rotate(8deg)}
.design-page .sd-hero-lab[data-mode="web"] .hero-orbit{opacity:0}
.design-page .sd-hero-lab[data-mode="web"] .sd-hero-stage-caption{bottom:0}
.design-page .sd-hero-lab[data-mode="volume"] .sd-hero-sculpture{transform:translate(7%,7%) scale(.84) rotate(-17deg)}
.design-page .sd-hero-lab[data-mode="volume"] .sd-hero-volume-word{opacity:1}
.design-page .sd-hero-lab[data-mode="volume"] .hero-orbit{transform:rotateX(64deg) translateY(47%);border-style:dotted}
.design-page .sd-hero-lab[data-mode="motion"] .sd-hero-sculpture{transform:translate(2%,-7%) scale(.82) rotate(10deg)}
.design-page .sd-hero-lab[data-mode="motion"][data-playing="true"] .sd-hero-sculpture{animation:hero-sculpture-motion 6s ease-in-out infinite}
.design-page .sd-hero-motion-toggle{position:absolute;right:2%;bottom:5%;z-index:5;min-height:44px;padding:10px 14px;font:11px/1.3 "Inter",sans-serif;border:1px solid var(--border);border-radius:30px;background:var(--surface);color:var(--fg);box-shadow:0 4px 12px color-mix(in oklch,var(--fg) 7%,transparent);cursor:pointer}
.design-page .sd-hero-motion-toggle:hover{border-color:var(--accent);color:var(--accent)}
.design-page .sd-hero-motion-toggle[hidden]{display:none}
@media (max-width:880px){.design-page .sd-hero-lab{margin-top:0;max-width:580px}
.design-page .sd-hero-stage{aspect-ratio:1.25}}
@media (max-width:560px){.design-page .sd-hero-lab-head{font-size:9px}
.design-page .sd-hero-format-tabs button{font-size:10px;gap:4px}
.design-page .sd-hero-format-tabs button span{font-size:8px}
.design-page .sd-hero-stage-caption{font-size:9px;max-width:48%;bottom:3%}
.design-page .sd-hero-caption-number{font-size:8px}
.design-page .sd-hero-sheet-nav{padding:10px;font-size:6px}
.design-page .sd-hero-sheet-foot{font-size:6px}
.design-page .sd-hero-motion-toggle{font-size:10px;padding:8px 10px;right:0;bottom:1%}
.design-page .sd-hero-format-note{font-size:11px;min-height:4.2em}}
@media (prefers-reduced-motion:reduce){.design-page .sd-hero-lab *{animation:none!important;transition:none!important}}
.design-page img[data-art-source="sculpture-v1"]{filter:none;object-fit:contain;object-position:center;display:block}
.design-page .sd-about-art:has([data-art-source="sculpture-v1"]){background:transparent;display:flex;flex-direction:column;aspect-ratio:auto;padding:0}
.design-page .sd-about-art img[data-art-source="sculpture-v1"]{height:auto;aspect-ratio:1;padding:3%}
.design-page .sd-about-art:has([data-art-source="sculpture-v1"]) .sd-about-caption{color:var(--muted);padding:14px 0;border-top:1px dotted var(--border)}
.design-page .sd-about-art:has([data-art-source="sculpture-v1"]) .sd-about-caption b{color:var(--fg)}
.design-page .sd-capabilities-art:has([data-art-source="sculpture-v1"]){background:transparent;padding:0;aspect-ratio:auto;display:flex;flex-direction:column}
.design-page .sd-capabilities-art img[data-art-source="sculpture-v1"]{height:auto;aspect-ratio:1;padding:5%}
.design-page .sd-capabilities-art:has([data-art-source="sculpture-v1"]) .sd-ribbon{position:static;transform:none;writing-mode:horizontal-tb;width:fit-content;max-width:100%;margin:8px auto 0;white-space:normal;text-align:center;color:var(--fg);background:transparent;border-top:1px dotted var(--border);padding:12px 8px;box-shadow:none}
.design-page .sd-lab-img:has([data-art-source="sculpture-v1"]),.design-page .sd-method-step .sd-img:has([data-art-source="sculpture-v1"]){background:var(--surface)}
.design-page .sd-lab-img img[data-art-source="sculpture-v1"]{padding:5%;width:100%;height:100%}
.design-page .sd-method-step .sd-img img[data-art-source="sculpture-v1"]{padding:7%;width:100%;height:100%}
.design-page .sd-work-card .sd-img img[data-art-source="sculpture-v1"]{padding:5%;width:100%;height:100%}
.design-page .sd-testimonial-art:has([data-art-source="sculpture-v1"]){background:transparent}
.design-page .sd-testimonial-art img[data-art-source="sculpture-v1"]{padding:6%}
.design-page .sd-cta-art:has([data-art-source="sculpture-v1"]){background:transparent}
.design-page .sd-cta-art img[data-art-source="sculpture-v1"]{padding:9% 5% 13%}
@media (max-width:560px){.design-page .sd-capabilities-art:has([data-art-source="sculpture-v1"]) .sd-ribbon{font-size:9px;letter-spacing:.08em}
.design-page .sd-about-art img[data-art-source="sculpture-v1"]{padding:2%}}
.design-page .sd-cta-art{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0;aspect-ratio:auto;gap:0}
.design-page .sd-cta-art > .sd-index{grid-row:1;position:static;inset:auto;justify-self:end;margin:0 12px 0 0;padding:0;background:transparent;color:var(--muted);box-shadow:none}
.design-page .sd-cta-art > img{grid-row:2;width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
.design-page .sd-cta-art > img[data-art-source="sculpture-v1"]{padding:4%}
.design-page .sd-cta-art > .sd-ribbon{grid-row:3;position:static;inset:auto;transform:none;writing-mode:horizontal-tb;width:auto;max-width:100%;margin:0;padding:14px 0;border-top:1px dotted var(--border);background:transparent;color:var(--muted);font-size:10px;line-height:1.6;letter-spacing:.14em;text-align:center;white-space:normal;overflow-wrap:anywhere;box-shadow:none}
/* Lab adapter. Geometry above is reused from the owner's studio landing page. */
.design-page{--paper:var(--bg);--paper-warm:var(--soft);--paper-dark:var(--border);--bone:var(--surface);--ink:var(--fg);--ink-soft:var(--fg);--ink-mute:var(--muted);--ink-faint:var(--muted);--coral:var(--accent);--coral-soft:var(--accent);--mustard:var(--accent);--olive:var(--muted);--line:var(--border);--line-soft:var(--border);--line-faint:color-mix(in oklch,var(--border) 60%,transparent);--serif:var(--font-serif);--sans:var(--font-display);--body:var(--font-sans);--mono:var(--font-mono);--shadow:0 20px 40px -24px color-mix(in oklch,var(--fg) 20%,transparent);--fixed-dark:oklch(21.377% .00416 84.589);--fixed-light:oklch(98.232% .00286 84.559);--fixed-muted:oklch(70.790% .01160 76.570);color:var(--fg);background:var(--bg);font-family:var(--font-sans);line-height:1.55;min-width:0;isolation:isolate}
.design-page *, .design-page *::before,.design-page *::after{animation:none!important}
.design-page{--accent-tint:var(--soft);--bg-elevated:var(--surface);--bg-panel:var(--surface);--bg-subtle:var(--soft);--text:var(--fg);--text-strong:var(--fg)}
.design-page [hidden]{display:none!important}
.design-page section{scroll-margin-top:100px}
.design-page .sd-design-back{display:block;width:fit-content;min-height:44px;padding:10px 0;margin-bottom:20px;font:13px/1.5 var(--font-sans);color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.design-page .sd-hero h1{font-size:clamp(38px,4.6vw,66px);letter-spacing:-.025em;line-height:1.06;max-width:14ch}
.design-page h2{letter-spacing:-.02em}.design-page h3,.design-page h4{overflow-wrap:anywhere}
.design-page .sd-hero h1 em,.design-page h2 em{font-family:var(--font-serif)}
.design-page .sd-hero-stage{background:transparent}
.design-page .sd-hero-lab .sd-hero-sculpture{transition:none;filter:none}
.design-page .sd-hero-sheet,.design-page .sd-hero-volume-word{transition:none}
.design-page .sd-hero-stage-caption{position:relative;bottom:auto;left:auto;max-width:100%;margin-top:10px}
.design-page .sd-hero-stage{overflow:visible;margin-bottom:40px}
.design-page .sd-hero-stage-caption{position:absolute;top:100%;height:30px}
.design-page .sd-hero-lab[data-mode="web"] .sd-hero-stage-caption{bottom:auto}
.design-page .sd-about-motion-stage{width:100%;aspect-ratio:1}
.design-page .sd-about-side-note{display:none}
.design-page .sd-work,.design-page .sd-cta{--paper:var(--surface);--ink:var(--fg);--ink-mute:var(--muted);--ink-faint:var(--muted);color:var(--fg);background:var(--surface)}
.design-page .sd-work::before,.design-page .sd-cta::before{display:none}
.design-page .sd-work h2,.design-page .sd-work h3,.design-page .sd-work p,.design-page .sd-cta h2,.design-page .sd-cta p{color:var(--fg)}
.design-page .sd-work .sd-meta-grp,.design-page .sd-work .sd-label,.design-page .sd-cta .sd-label,.design-page .sd-cta .sd-cta-foot{color:var(--muted)}
.design-page .sd-btn-primary{color:var(--on-accent);background:var(--accent);box-shadow:0 4px 12px color-mix(in oklch,var(--fg) 12%,transparent)}
.design-page .sd-btn-primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.design-page .sd-btn,.design-page .sd-pill,.design-page .sd-arrow-mark,.design-page .sd-email-pill,.design-page .sd-partner{min-height:44px}
.design-page .sd-card .sd-arrow-mark{min-width:44px}
.design-page .sd-card .sd-tag,.design-page .sd-roman,.design-page .sd-ix,.design-page .sd-dot,.design-page .sd-hero-caption-number{color:var(--muted)}
.design-page .sd-lab-img .sd-badge{top:12px;left:12px;right:auto;bottom:auto;transform:none;background:var(--surface);color:var(--fg);box-shadow:0 2px 8px color-mix(in oklch,var(--fg) 12%,transparent)}
.design-page .sd-hero-format-note{font-size:13px;min-height:3.2em}
.design-page .sd-pills{flex-wrap:wrap}.design-page .sd-labs-grid>*{min-width:0}
@media(max-width:880px){.design-page .sd-hero-grid{gap:22px}.design-page .sd-hero-lab{max-width:560px}.design-page .sd-sec-rule{flex-wrap:wrap;gap:10px}.design-page .sd-meta-grp{flex-wrap:wrap}.design-page .sd-hero h1{max-width:18ch}.design-page .sd-about-art{max-width:560px;margin:auto}}
@media(max-width:560px){.design-page .sd-hero h1{font-size:38px}.design-page .sd-hero-stats{gap:12px;flex-wrap:wrap}.design-page .sd-hero-actions,.design-page .sd-cta-actions{flex-wrap:wrap}.design-page .sd-btn{max-width:100%;white-space:normal}.design-page .sd-method-grid{grid-template-columns:minmax(0,1fr)}.design-page .sd-hero-format-tabs button{font-size:11px}.design-page .sd-hero-format-note{font-size:13px}.design-page .sd-cta-foot{flex-wrap:wrap}.design-page .sd-about-copy .sd-footer-row{flex-wrap:wrap}.design-page .sd-work{margin-inline:0}.design-page .sd-work-head{flex-wrap:wrap}.design-page .sd-hero h1,.design-page h2{overflow-wrap:normal;hyphens:auto}}
/* The imported page uses the same theme picker as the Lab homepage. */
.theme-picker{position:relative}.theme-picker summary{width:44px;height:44px;display:grid;place-items:center;list-style:none;border:1px solid var(--border);border-radius:50%;cursor:pointer;color:var(--fg);background:var(--surface)}.theme-picker summary::-webkit-details-marker{display:none}.theme-picker summary svg{width:20px;height:20px}.theme-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;padding:6px;border:1px solid var(--border);background:var(--surface);box-shadow:0 8px 24px color-mix(in oklch,var(--fg) 12%,transparent);border-radius:10px;z-index:70}.theme-menu button{display:block;width:100%;min-height:44px;text-align:left;padding:8px 12px;background:transparent;border:0;color:var(--fg);font:inherit;cursor:pointer}.theme-menu button[aria-pressed="true"]{background:var(--soft)}