/* Design-system page: only the scaffolding for specimens. All values come from shared/tokens.css. */
@layer page {
.ds-tag { margin-left: 4px; } .brand .ds-tag { --tag-bg: var(--surface-2); }
.ds-hero { padding-block: clamp(56px, 9vw, 120px) clamp(32px, 5vw, 56px); position: relative; isolation: isolate; overflow: clip; }
.ds-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 480px at 80% 0, color-mix(in oklab, var(--glow) 18%, transparent), transparent 62%); }
.ds-hero__art { --aw: clamp(130px, 13vw, 170px); position: absolute; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 0; width: calc(var(--aw) + 300px); height: 72%; pointer-events: none; }
.ds-hero__art i { position: absolute; left: 50%; top: 0; bottom: -16%; width: var(--aw); margin-left: calc(var(--aw) / -2); border-radius: var(--r-2xl); border: 1px solid color-mix(in oklab, var(--p-lit) 50%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--p-lit) 34%, var(--surface-2)), var(--surface) 78%); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .85), 0 0 60px -16px color-mix(in oklab, var(--p-lit) 45%, transparent); transform-origin: 50% 100%; transform: translateX(calc(var(--pos) * 24px)) translateY(calc(var(--abs) * 3px)) rotate(calc(var(--pos) * 5deg)); z-index: calc(8 - var(--abs) * 2); animation: ds-deal var(--dur-stage) var(--ease-open) backwards; animation-delay: calc(var(--i) * var(--stagger) * 2 + 120ms); }
@keyframes ds-deal { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
.ds-hero h1 { max-width: 14ch; margin: 14px 0 20px; } .ds-hero .lede { margin-bottom: 28px; max-width: 30em; }
.ds { padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.ds-h { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 14px; }
.ds-h3 { font-size: 24px; margin: 36px 0 10px; } .ds .sub { margin-bottom: 22px; }
.ds code { background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--r-xs); padding: 1px 6px; font-size: .86em; }
.ds-grid { display: grid; gap: 16px; } .ds-grid > * { min-width: 0; } .ds-grid--4 { grid-template-columns: repeat(4, 1fr); } .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds .card h3 { margin-bottom: 8px; } .ds .card p { color: var(--mute); font-size: 14.5px; }
.ds-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.ds-theme { background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(16px, 2.4vw, 28px); min-width: 0; }
.ds-theme > h3 { font-size: 22px; margin-bottom: 14px; } .ds-theme > h3 small { font: 600 11px var(--font-mono); letter-spacing: .08em; color: var(--soft); margin-left: 8px; text-transform: uppercase; }
.ds-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sw { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.sw__chip { height: 54px; display: grid; place-items: end start; padding: 6px 8px; font: 600 11px var(--font-mono); }
.sw__meta { padding: 8px 10px 10px; font-size: 12px; line-height: 1.35; } .sw__meta b { display: block; font: 600 12.5px var(--font-mono); color: var(--ink); } .sw__meta span { color: var(--soft); font-family: var(--font-mono); font-size: 11px; }
.sw__cr { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: var(--r-pill); font: 600 10.5px var(--font-mono); } .sw__cr.pass { background: var(--allow-soft); color: var(--allow); } .sw__cr.deco { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--mute); } .sw__cr.fail { background: var(--deny-soft); color: var(--deny); }
.ds-persona { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pw { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); } .pw__row { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 54px; } .pw__row i { display: block; } .pw__t { padding: 8px 10px; font-size: 12.5px; background: var(--surface); } .pw__t b { display: block; } .pw__t span { display: block; font: 11px var(--font-mono); color: var(--soft); }
.ds-row { margin: 8px 0 0; }
.ds-type { display: grid; gap: 4px; } .ds-spec { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); } .ds-spec > code { background: none; color: var(--soft); font-size: 12px; } .ds-spec h1, .ds-spec h2, .ds-spec h3 { margin: 0; }
.ds-mono { display: grid; gap: 12px; justify-items: start; }
.ds-space { display: grid; gap: 8px; } .ds-space div { display: flex; align-items: center; gap: 10px; font: 11.5px var(--font-mono); color: var(--soft); } .ds-space i { display: block; height: 14px; border-radius: 3px; background: var(--accent); opacity: .85; }
.ds-radius { display: flex; flex-wrap: wrap; gap: 12px; } .ds-radius div { width: 76px; height: 56px; border: 1.5px solid var(--accent); display: grid; place-items: center; font: 11px var(--font-mono); color: var(--soft); }
.ds-depth { display: grid; gap: 14px; } .ds-depth div { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); font: 11.5px var(--font-mono); color: var(--soft); }
.ds-arches { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; padding: 30px 0 0; }
.ds-arch { min-height: 160px; display: grid; place-items: end center; padding: 14px; background: linear-gradient(180deg, color-mix(in oklab, var(--p) 22%, var(--surface-2)), var(--surface)); position: relative; font: 11.5px var(--font-mono); color: var(--soft); } .ds-arch--plain { border: 1px solid var(--line-2); --p: var(--accent); }
.ds-motion { display: grid; gap: 10px; align-content: start; } .ds-motion .btn { justify-self: start; }
.ds-stage { position: relative; height: 150px; display: grid; place-items: end center; overflow: hidden; border-radius: var(--r-md); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ds-mini { height: 120px; background: linear-gradient(180deg, color-mix(in oklab, var(--p) 40%, var(--surface-2)), var(--surface)); }
.ds-mini.go { animation: rt-open var(--dur-stage) var(--ease-open) both; }
.ds-big { align-self: center; font: 400 44px/1 var(--font-serif); letter-spacing: var(--tracking-tight); } .ds-big.go { animation: rt-focus var(--dur-slow) var(--ease-settle) both; }
.ds-stage--fan { place-items: end center; } .ds-stage--fan i { position: absolute; bottom: 0; left: 50%; width: 96px; height: 118px; margin-left: -48px; border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--p-lit) 50%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--p) 36%, var(--surface-2)), var(--surface)); transform-origin: 50% 108%; transform: translateX(calc(var(--pos) * 22px)) rotate(calc(var(--pos) * 6deg)); transition: transform var(--dur-stage) var(--ease-spring); z-index: calc(5 - var(--abs)); } .ds-stage--fan.stacked i { transform: none; }
.ds-table-wrap { overflow-x: auto; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-md); } .ds-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ds-table th, .ds-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); } .ds-table th { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); } .ds-table tr:last-child td { border-bottom: 0; } .ds-table td:first-child { font-family: var(--font-mono); font-size: 12.5px; }
.cmp { display: grid; gap: 18px; } .cmp h4 { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 4px 0 0; }
.cmp__r { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cmp .frame { max-width: 420px; } .cmp .frame__body { padding: 14px; font-size: 13px; color: var(--mute); }
.ds-code { margin: 12px 0; padding: 14px 16px; border-radius: var(--r-md); background: #11141d; color: #d8deec; font: 12px/1.7 var(--font-mono); overflow-x: auto; } .ds-code code { background: none; padding: 0; white-space: pre; font-size: inherit; }
.ds-rules { display: grid; gap: 10px; padding: 0; list-style: none; margin: 10px 0 24px; } .ds-rules li { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--mute); background: var(--surface); } .ds-rules b { color: var(--ink); }
.foot { padding-block: 40px; border-top: 1px solid var(--line); color: var(--soft); font-size: 14px; } .foot a { color: var(--mute); }
@media (max-width: 960px) { .ds-hero > .wrap { display: flex; flex-direction: column; align-items: flex-start; } .ds-hero__art { --aw: clamp(110px, 30vw, 160px); order: 9; position: relative; right: auto; bottom: auto; width: 100%; height: 170px; margin-top: 36px; } .ds-hero { padding-bottom: 0; } .ds-grid--4 { grid-template-columns: 1fr 1fr; } .ds-grid--3, .ds-themes { grid-template-columns: 1fr; } .ds-spec { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 560px) { .ds-grid--4 { grid-template-columns: 1fr; } .ds-sw { grid-template-columns: 1fr 1fr; } }
}