/* Editorial layout for this showcase. Source tokens and component origins: SOURCE-MAP.md. */
:root{color-scheme:dark;--background:#050608;--background-elevated:#0b0d10;--workspace:#0a0c0f;--panel:rgba(255,255,255,.018);--card:rgba(255,255,255,.02);--border:rgba(255,255,255,.1);--border-soft:rgba(255,255,255,.06);--text:rgba(255,255,255,.96);--text-soft:rgba(255,255,255,.72);--text-muted:rgba(255,255,255,.68);--text-dim:rgba(255,255,255,.52);--accent:#5c8dff;--accent-hover:#7aa2ff;--public-accent:#9fb7d4;--success:#10b981;--warning:#f59e0b;--danger:#f43f5e;--font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-heading:"Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:var(--background);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--font-heading);letter-spacing:-.04em;line-height:1.08;font-weight:600}h2{font-size:clamp(32px,3.5vw,56px)}h3{font-size:24px}p{color:var(--text-muted)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button,a,input{-webkit-tap-highlight-color:transparent}img{max-width:100%;height:auto}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent-hover);outline-offset:5px}[hidden]{display:none!important}::selection{background:rgba(92,141,255,.28)}.container{width:min(1320px,calc(100% - 96px));margin-inline:auto}.masthead{height:76px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 40px;background:var(--background);border-bottom:1px solid var(--border-soft)}.brand{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:500}.brand img{width:34px;height:34px}.chapter-nav{display:flex;gap:7px}.chapter-nav a{color:var(--text-dim);font-size:12px;display:grid;place-items:center;width:34px;height:34px;border-bottom:1px solid transparent;transition:color 160ms,border-color 160ms}.chapter-nav a:hover,.chapter-nav a[aria-current]{color:var(--text);border-color:var(--public-accent)}.edition{font-size:10px;letter-spacing:.13em;color:var(--text-dim)}.edition span{margin:0 10px}.chapter{padding:100px 0;border-bottom:1px solid var(--border-soft);scroll-margin-top:0}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--public-accent);margin-bottom:35px}.eyebrow>span{display:inline-block;color:var(--text-dim);margin-right:23px}.hero{padding:56px 0 0;min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 74% 40%,rgba(159,183,212,.055),transparent 28rem),repeating-linear-gradient(90deg,rgba(255,255,255,.008) 0,rgba(255,255,255,.008) 1px,transparent 1px,transparent 96px)}.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding-bottom:58px}.hero h1{font-size:clamp(44px,4.6vw,74px);line-height:1.02;letter-spacing:-.04em}.hero h1 span,.principles-chapter h2 span{color:var(--public-accent)}.hero .lead{margin-top:26px}.lead{font-size:clamp(19px,1.5vw,23px);line-height:1.6;color:var(--text-soft)}.hero-note{max-width:46ch;margin:18px 0 28px;font-size:15px}.button{display:inline-flex;align-items:center;justify-content:center;gap:35px;min-height:46px;padding:0 20px;font-size:14px;line-height:1;transition:background 160ms,transform 160ms,border-color 160ms}.primary{border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.9);color:#050608}.ghost{border:1px solid rgba(255,255,255,.095);background:rgba(255,255,255,.012)}a.primary:hover{background:#fff;transform:translateY(-1px)}.reading-time{display:inline-block;font-size:12px;margin-left:18px;color:var(--text-dim)}.brand-figure{width:100%;max-width:460px;margin-left:auto}.mark-frame{border:1px solid var(--border-soft);padding:38px;position:relative}.mark-frame:before,.mark-frame:after{content:"";position:absolute;inset:-9px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);pointer-events:none}.mark-frame:after{inset:24px -9px;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border)}.brand-figure img{display:block;aspect-ratio:1;object-fit:contain}.brand-figure figcaption{display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.12em;margin-top:24px;color:var(--text-dim)}.section-foot{border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:10px;letter-spacing:.13em;color:var(--text-dim)}.section-foot a{font-size:15px;color:var(--text-soft)}.section-heading{display:flex;justify-content:space-between;gap:64px;align-items:end;margin-bottom:44px}.section-heading>p{max-width:42ch;font-size:16px}.problem-board{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:26px 0}.note-card{border:1px solid var(--border);background:var(--panel);padding:22px 25px;min-height:148px}.note-card:nth-child(2){transform:translateY(-9px)}.note-card:nth-child(3){transform:translateY(8px)}.note-card:nth-child(5){transform:translateY(7px)}.note-card>span,.tiny-label{font-size:10px;letter-spacing:.15em;color:var(--text-dim)}.note-card strong{display:block;font-size:17px;font-weight:500;margin-top:10px}.note-lines{margin-top:20px;height:15px;width:68%;border-block:1px solid var(--border-soft)}.insight{border-top:1px solid var(--border-soft);margin-top:22px;padding-top:28px;display:flex;align-items:center;gap:40px}.insight p{font-size:21px;color:var(--text-soft)}.definition-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:90px}.definition-grid .lead{margin-top:28px;max-width:40ch}.canon-definition{border:1px solid var(--border);background:var(--panel);padding:34px}.canon-definition h3{margin:22px 0 18px;line-height:1.25;font-size:27px}.definition-rule{height:1px;background:var(--border-soft);margin:28px 0}.canon-definition .value{color:var(--text);font-size:21px;margin-top:16px}.audience{display:flex;gap:40px;align-items:center;border-top:1px solid var(--border-soft);padding-top:28px;margin-top:55px}.audience p{font-size:14px}.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border)}.flow li{padding:28px 25px 32px;background:var(--panel);position:relative}.flow li+li{border-left:1px solid var(--border)}.flow li:not(:last-child):after{content:"→";position:absolute;right:-10px;top:50%;z-index:1;background:var(--background);color:var(--public-accent);line-height:1}.step-number{font-size:10px;letter-spacing:.1em;color:var(--public-accent)}.flow h3{margin:24px 0 16px;font-size:23px;line-height:1.2}.flow p{font-size:14px}.architecture-line{display:flex;justify-content:space-between;gap:20px;margin:32px 0 20px;align-items:center}.architecture-line>div{display:flex;gap:10px;flex-wrap:wrap}.architecture-line>div>span{border:1px solid var(--border-soft);padding:6px 14px;font-size:13px}.caption{font-size:12px;line-height:1.65;color:var(--text-dim)}.product-chapter{background:var(--background-elevated)}.product-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);margin-bottom:28px;gap:20px}.product-toolbar>span{font-size:9px;letter-spacing:.13em;color:var(--text-dim)}.view-switch{display:flex;gap:25px}.view-switch button{padding:14px 0;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--text-dim);font-size:14px}.view-switch button.selected{color:var(--text);border-bottom-color:var(--public-accent)}.product-view{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}.product-explainer{padding-top:12px}.product-explainer h3{font-size:25px;margin-bottom:18px}.product-explainer p{font-size:15px}.product-explainer>a{display:inline-block;margin-top:25px;font-size:12px;border-bottom:1px solid var(--border);padding-bottom:5px}.canvas-capture{border:1px solid var(--border-soft);background:var(--background)}.canvas-capture img{display:block;width:100%;height:auto}.canvas-capture figcaption{font-size:11px;padding:15px 20px;color:var(--text-dim);border-top:1px solid var(--border-soft)}.product-view iframe{width:100%;height:790px;border:1px solid var(--border);background:var(--background)}#workspace-view>.caption{grid-column:2}.surface-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;border-top:1px solid var(--border-soft);padding-top:25px;margin-top:34px;color:var(--text-dim);font-size:12px}.surface-footer strong{display:block;font-size:14px;color:var(--text-soft);font-weight:500;margin-bottom:5px}.brand-board{display:grid;grid-template-columns:1fr .7fr 1.2fr;border:1px solid var(--border);margin-bottom:24px}.identity-cell,.type-cell{padding:30px}.identity-cell+.identity-cell,.type-cell{border-left:1px solid var(--border)}.identity-cell{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:25px}.identity-cell>.tiny-label{align-self:start}.identity-cell img{width:170px}.identity-cell strong{font-size:14px;font-weight:500}.appmark-cell img{width:100px}.appmark-cell>span:last-child{font-size:12px;color:var(--text-dim)}.type-cell h3{font-size:33px;margin:25px 0 12px}.type-sample{font-size:18px}.type-cell>.caption{margin-top:22px}.type-cell strong{font-size:20px;font-weight:500}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:35px 0}.palette>div{min-width:0}.swatch{display:block;width:100%;height:74px;border:1px solid var(--border);margin-bottom:14px}.bg{background:var(--background)}.elevated{background:var(--background-elevated)}.workspace{background:var(--workspace)}.accent{background:var(--accent)}.hover{background:var(--accent-hover)}.public{background:var(--public-accent)}.palette strong{display:block;font-size:12px;font-weight:500}.palette code{color:var(--text-dim);font-size:11px}code{font-family:var(--font-body);font-variant-numeric:tabular-nums}.component-board{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--border)}.component-cell{padding:28px 30px}.component-cell:nth-child(even){border-left:1px solid var(--border)}.component-cell:nth-child(n+3){border-top:1px solid var(--border)}.component-cell>.tiny-label{display:block;margin-bottom:22px}.surface-sample{padding:14px;border:1px solid var(--border);background:var(--panel);display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px}.surface-sample strong{font-weight:500}.surface-sample code{color:var(--text-dim)}.card-sample{background:var(--card);border-radius:8px}.sample-buttons{display:flex;gap:12px;margin-bottom:20px}.sample-label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:8px}.component-cell input{width:100%;min-width:0;background:rgba(255,255,255,.03);border:1px solid var(--border);color:rgba(255,255,255,.92);padding:12px 14px;font-size:13px}.component-cell>.caption{margin-top:15px}.semantic{display:flex;gap:14px;align-items:center;margin-bottom:14px;font-size:14px}.semantic code{margin-left:auto;font-size:12px;color:var(--text-dim)}.dot{height:10px;width:10px;border-radius:100%}.success{background:var(--success)}.warning{background:var(--warning)}.danger{background:var(--danger)}.icon-samples{display:flex;gap:40px}.icon-samples>span{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;color:var(--text-soft)}.icon-samples svg{width:25px;height:25px}.principles-chapter{background:radial-gradient(circle at 90% 100%,rgba(159,183,212,.055),transparent 28rem)}.principles-chapter h2{font-size:clamp(38px,4.4vw,70px)}.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:58px 0 28px}.principles-grid article{border-top:1px solid var(--border);padding-top:20px}.principles-grid article>span{font-size:10px;letter-spacing:.12em;color:var(--public-accent)}.principles-grid h3{font-size:22px;margin:19px 0 15px}.principles-grid p{font-size:14px}.principle-note{max-width:110ch;font-size:12px;color:var(--text-dim)}.closing{display:flex;align-items:center;gap:20px;margin-top:70px;padding-top:25px;border-top:1px solid var(--border-soft)}.closing strong{font-size:16px;font-weight:500}.closing p{font-size:14px}.closing a{margin-left:auto;font-size:12px;color:var(--text-soft)}.site-footer{display:flex;justify-content:space-between;gap:30px;padding-block:25px;font-size:11px;color:var(--text-dim)}.site-footer>div{display:flex;gap:24px}.skip-link{position:fixed;top:-70px;left:15px;z-index:100;padding:10px 20px;background:var(--accent);color:var(--background)}.skip-link:focus{top:10px}
@media(min-width:1700px){.hero{justify-content:center;gap:35px}.hero-grid{padding-bottom:45px}.section-foot{margin-top:30px}}
@media(max-width:1100px){.container{width:calc(100% - 64px)}.masthead{padding:0 24px}.edition{display:none}.hero-grid{gap:35px}.mark-frame{padding:22px}.brand-figure figcaption{flex-direction:column;gap:4px}.reading-time{display:block;margin:15px 0 0}.section-heading{gap:35px}.section-heading>p{max-width:34ch}.definition-grid{gap:40px}.flow li{padding:23px 18px}.flow h3{font-size:20px}.product-view{grid-template-columns:210px minmax(0,1fr);gap:25px}.product-toolbar>span{font-size:8px}.brand-board{grid-template-columns:1fr .7fr 1.1fr}.identity-cell,.type-cell{padding:24px}.type-cell h3{font-size:28px}.principles-grid{gap:20px}.principles-grid h3{font-size:20px}}
@media(max-width:760px){html{scroll-padding-top:110px}.masthead{height:auto;min-height:94px;flex-wrap:wrap;gap:3px 12px;padding:12px 20px}.brand{font-size:12px}.brand img{width:26px;height:26px}.chapter-nav{gap:3px;margin-left:auto}.chapter-nav a{height:28px;width:26px;font-size:10px}.container{width:calc(100% - 40px)}.chapter{padding:62px 0}.hero{padding-bottom:0}.hero-grid{grid-template-columns:1fr;gap:45px}.hero h1{font-size:clamp(40px,8.5vw,62px)}.brand-figure{max-width:270px;margin-inline:auto}.hero-note{font-size:14px}.brand-figure figcaption{font-size:8px}.section-foot{font-size:8px;gap:15px}.section-foot>span:nth-child(2){display:none}.eyebrow{margin-bottom:28px}.section-heading{display:block;margin-bottom:32px}.section-heading>p{max-width:unset;margin-top:23px}.problem-board{grid-template-columns:repeat(2,1fr);gap:12px}.note-card{padding:18px 14px;min-height:138px}.note-card strong{font-size:14px}.note-card>span{font-size:8px}.insight{display:block}.insight p{margin-top:13px;font-size:19px}.definition-grid{grid-template-columns:1fr;gap:35px}.canon-definition{padding:25px}.audience{display:block;margin-top:30px}.audience p{margin-top:12px}.flow{grid-template-columns:1fr 1fr}.flow li{padding:23px 18px}.flow li:nth-child(3){border-left:0}.flow li:nth-child(n+3){border-top:1px solid var(--border)}.flow li:nth-child(2):after{display:none}.flow h3{font-size:20px}.architecture-line{align-items:start;flex-direction:column}.product-toolbar{display:block}.product-toolbar>span{display:block;margin:10px 0 17px;font-size:9px}.view-switch{gap:24px}.view-switch button{font-size:13px}.product-view{display:block}.product-explainer{padding-top:0;margin-bottom:28px}.product-explainer h3{font-size:25px}.product-explainer>a{margin-top:15px}.product-view iframe{height:780px}.product-view>.caption{margin-top:15px}.surface-footer{grid-template-columns:1fr 1fr;gap:20px}.brand-board{grid-template-columns:1fr 1fr}.type-cell{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}.identity-cell img{width:140px}.appmark-cell img{width:80px}.identity-cell strong{font-size:11px}.identity-cell .tiny-label{font-size:8px}.palette{grid-template-columns:repeat(3,1fr);gap:20px 14px}.component-board{grid-template-columns:1fr}.component-cell:nth-child(even){border-left:0}.component-cell+.component-cell{border-top:1px solid var(--border)}.component-cell{padding:25px 22px}.principles-grid{grid-template-columns:1fr 1fr;gap:30px 20px;margin-top:36px}.closing{flex-wrap:wrap;margin-top:40px}.closing a{margin-left:62px}.site-footer{flex-direction:column;gap:14px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.masthead,.view-switch,.skip-link{display:none}.chapter{break-before:page;padding:30px 0}.hero{min-height:0}.container{width:100%}.product-view[hidden]{display:grid!important}.product-view{margin-bottom:30px}.site-footer{display:none}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}