@font-face{font-family:InterVariable;src:url('inter-latin.woff2?v=e7394470b6e1') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height, 6.5rem) + 1.5rem)}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 var(--font-ui);font-feature-settings:'cv02','cv03','cv04','cv11','ss01','ss03';-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,dl,dd,figure{margin:0}
p,dd{text-wrap:pretty}
h1,h2,h3,dt{text-wrap:balance;font-weight:500}
h1,h2,h3{letter-spacing:-.045em}
button,input,select{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset)}
input:focus-visible,select:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-inset)}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{width:100%;max-width:var(--content-width);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Shared header: compact desktop disclosures and a mobile navigation sheet. */
.site-header{--header-gutter:var(--gutter);position:sticky;top:0;z-index:100;width:100%;background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:var(--space-2);min-height:4.5rem;padding:.5rem var(--header-gutter);width:100%;max-width:var(--content-width);margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:.625rem;flex-shrink:0;color:var(--ink);font-size:1.125rem;font-weight:600;letter-spacing:-.045em;white-space:nowrap}
.brand img{width:1.75rem;height:1.75rem;flex-shrink:0}
.desktop-nav,.header-notify{display:none}
.header-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;flex-shrink:0}
.site-header summary{list-style:none;cursor:pointer}
.site-header summary::-webkit-details-marker{display:none}
.site-header summary::marker{content:""}
.header-actions>details>summary{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-control);color:var(--muted)}
.header-actions>details>summary:hover,.header-actions>details[open]>summary{color:var(--ink);background:var(--menu-hover)}
.header-actions svg{flex-shrink:0;pointer-events:none}
.header-actions>details>summary>svg{width:24px;height:24px}
.menu-close-icon,.mobile-menu[open] .menu-open-icon{display:none}
.mobile-menu[open] .menu-close-icon{display:block}
.dropdown-panel{background:var(--menu-surface);color:var(--ink);border:var(--border-width) solid var(--line);box-shadow:var(--shadow-popover)}
.dropdown-list>:is(a,label){min-height:var(--touch-target);padding-block:.75rem}
.dropdown-list>:is(a,label)+:is(a,label){border-top:1px solid var(--line)}
.nav-link-description{display:none}
.header-notify{display:none}
.site-header .header-notify .primary-link{gap:var(--space-5)}
.mobile-notify .primary-link{display:flex;width:100%}
.appearance-control{position:relative}
.appearance-panel{position:absolute;top:calc(100% + .5rem);right:0;width:12rem;padding:var(--panel-inset);border-radius:var(--radius-panel)}
.appearance-panel fieldset{border:0;padding:0;margin:0;min-width:0}
.appearance-panel legend{padding:.5rem .75rem;font-size:.875rem;color:var(--muted)}
.appearance-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--touch-target);padding:var(--space-3);border-radius:var(--radius-control);font-size:1rem;cursor:pointer}
.appearance-panel .appearance-option+.appearance-option{border:0}
.appearance-option input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.appearance-option:hover,.appearance-option:has(input:checked){background:var(--menu-hover)}
.appearance-check{width:24px;height:24px;visibility:hidden}
.appearance-option:has(input:checked) .appearance-check{visibility:visible}
.appearance-option:has(input:focus-visible){outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-inset)}
.mobile-menu-panel{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--header-height,4.5rem));overflow-y:auto;overscroll-behavior:contain;border:0;box-shadow:none;padding:1rem var(--header-gutter) max(1.5rem,env(safe-area-inset-bottom))}
.mobile-main-nav{display:flex;flex-direction:column;min-height:100%;gap:var(--space-1)}
.mobile-nav-group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--nav-row-height);color:var(--ink);font-size:1.125rem}
.mobile-nav-group>summary svg{width:24px;height:24px;flex-shrink:0;transition:transform .15s ease}
.mobile-nav-group[open]>summary svg{transform:rotate(180deg)}
.mobile-nav-group+.mobile-nav-group,.mobile-main-nav>a:not(.nav-notify){border-top:1px solid var(--line)}
.mobile-nav-links{display:grid;gap:var(--space-1);padding:.25rem 0 1rem .75rem}
.mobile-menu .mobile-nav-links a{display:flex;align-items:center;min-height:var(--touch-target);padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-control);color:var(--muted);font-size:1rem;line-height:1.5}
.mobile-menu .mobile-nav-links a:hover,.mobile-menu .mobile-nav-links a:is([aria-current=page],[aria-current=location]){color:var(--ink);background:var(--menu-hover)}
.mobile-main-nav>a:not(.nav-notify){display:flex;align-items:center;min-height:var(--nav-row-height);font-size:1.125rem;color:var(--ink)}
.mobile-main-nav>a:is([aria-current=page],[aria-current=location]){text-decoration:underline;text-underline-offset:.3em}
.mobile-nav-group:is([data-current-page],:has(a:is([aria-current=page],[aria-current=location])))>summary{text-decoration:underline;text-underline-offset:.3em}
.mobile-main-nav>.mobile-notify{margin-top:auto;flex-shrink:0}
.mobile-main-nav>.mobile-notify{padding-top:var(--space-6)}
html:has(.mobile-menu[open]){overflow:hidden}
@media(min-width:64rem){
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-4);min-height:5rem;padding-block:.75rem}
 .brand{justify-self:start;font-size:1.25rem}
 .desktop-nav{display:flex;align-items:center;gap:var(--space-1)}
 .nav-group{position:relative}
 .nav-group>summary,.desktop-nav>a{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-target);padding:var(--space-3);font-size:.9375rem;line-height:1.5;color:var(--muted);border-radius:var(--radius-control)}
 .nav-group>summary svg{width:24px;height:24px;flex-shrink:0;transition:transform .15s ease}
 .nav-group[open]>summary svg{transform:rotate(180deg)}
 .nav-group>summary:hover,.nav-group[open]>summary,.desktop-nav>a:hover,.desktop-nav>a:is([aria-current=page],[aria-current=location]){color:var(--ink);background:var(--menu-hover)}
 .nav-group:is([data-current-page],:has(a:is([aria-current=page],[aria-current=location])))>summary,.desktop-nav>a:is([aria-current=page],[aria-current=location]){color:var(--ink);background:var(--menu-hover);text-decoration:underline;text-underline-offset:.3em}
 .nav-group-panel{position:absolute;top:calc(100% + .75rem);left:0;width:21rem;max-height:calc(100dvh - var(--header-height,5rem) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;padding:var(--panel-inset);border-radius:var(--radius-panel)}
 .nav-panel-links{display:grid;gap:var(--space-1)}
 .nav-panel-links a{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:var(--control-padding-block) var(--space-4);border-radius:var(--radius-control);color:var(--ink);font-size:1rem;line-height:1.5;text-decoration:none}
 .nav-panel-links .nav-link-description{display:block;font-size:.875rem;color:var(--muted)}
 .nav-panel-links a:hover,.nav-panel-links a:is([aria-current=page],[aria-current=location]){background:var(--menu-hover)}
 .nav-panel-links a:focus-visible{outline-offset:var(--focus-inset)}
 .header-actions{justify-self:end;margin:0;gap:var(--space-3)}
 .header-notify{display:flex;font-size:.875rem}
 .mobile-menu{display:none}
 .appearance-option{font-size:.875rem}
}
@media(max-width:22rem){.brand{font-size:1rem}.brand img{width:1.5rem;height:1.5rem}.header-inner,.header-actions{gap:0}}
@media(prefers-reduced-motion:reduce){.nav-group>summary svg,.mobile-nav-group>summary svg{transition:none}}
@media(forced-colors:active){.appearance-option:has(input:checked){outline:1px solid Highlight;outline-offset:var(--focus-inset)}.appearance-option:has(input:focus-visible){outline:2px solid Highlight;outline-offset:-3px}}

.hero{padding-top:3.5rem;padding-bottom:3rem}
.hero h1{font-size:clamp(2.7rem,7.1vw,6.5rem);line-height:1.05;max-width:24ch;margin-block:1.75rem 2rem;overflow-wrap:anywhere}
.hero h1 span,.closing h2 span{color:var(--ink)}
.hero-bottom{display:flex;align-items:flex-start;flex-direction:column;gap:2rem}
.hero-bottom>p{font-size:1.125rem;line-height:1.75rem;color:var(--muted);max-width:66ch}
.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--accent);color:var(--on-accent);font-size:var(--font-control);font-weight:500;padding:var(--control-padding-block) var(--control-padding-inline);min-height:var(--control-height);border-radius:var(--radius-control)}
.primary-link:hover{background:var(--accent-hover)}
.primary-link.button--compact{min-height:var(--control-height-compact);padding:var(--control-padding-compact-block) var(--control-padding-compact-inline);font-size:var(--font-control-compact)}
.playground-section{padding-bottom:4rem}
.playground-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:1.25rem}
.playground-top h2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.02em}
.playground-top p{font-size:.75rem;color:var(--muted)}
.playground{border:var(--border-width) solid var(--line);background:var(--surface)}
.story-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
.story-tabs button{display:flex;align-items:baseline;gap:.75rem;padding:1rem;text-align:left;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:.875rem;min-width:0}
.story-tabs button span{font: .6875rem ui-monospace,monospace;opacity:1}
.story-tabs button[aria-selected=true]{border-bottom-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:500}
.story-tabs button[aria-selected=true] span{opacity:1}
.story-tabs button[aria-selected=false]:hover{color:var(--ink);background:var(--menu-hover)}
.story-tabs button:focus-visible{outline-offset:-4px;outline-color:currentColor}
@media(min-width:40rem){.story-tabs button:not(:last-child){border-right:1px solid var(--line)}}
@media(max-width:39.99rem){
 .story-tabs button:nth-child(odd){border-right:1px solid var(--line)}
 .story-tabs button:nth-child(n+3){border-top:1px solid var(--line)}
}
.step-panel{display:grid;gap:1.5rem;padding:1.5rem}
.step-copy{min-width:0}
.step-copy h3{font-size:1.25rem;line-height:1.75rem;letter-spacing:-.025em;margin-bottom:.5rem}
.step-copy p{font-size:.9375rem;line-height:1.5rem;color:var(--muted);max-width:58ch}
.step-controls{display:grid;gap:1rem;align-items:end;min-width:0}
.control{display:flex;flex-direction:column;gap:.5rem;font-size:.8125rem;min-width:0;color:var(--control-text)}
.control-caption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.25rem .75rem}
.control output{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--accent)}
.control input:not([type=range]):not([type=color]),.control select{background:var(--control-surface);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink);padding:.625rem .75rem;min-height:var(--control-height-compact);min-width:0;width:100%;border-radius:var(--radius-control);font-size:var(--font-control)}
.select-wrap{display:grid;grid-template-columns:1fr 2rem}
.select-wrap select{grid-column:1/-1;grid-row:1;appearance:none;padding-right:2rem}
.select-wrap>span{grid-column:2;grid-row:1;place-self:center;display:grid;place-items:center;pointer-events:none}
.select-wrap svg{display:block;width:24px;height:24px}
.control input[type=range]{width:100%;min-width:0;height:2.75rem;accent-color:var(--accent);margin:0;cursor:pointer}
.color-wrap{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;min-height:var(--control-height-compact)}
.control input[type=color]{width:var(--control-height-compact);height:var(--control-height-compact);border-radius:var(--radius-control);padding:.125rem;background:transparent;border:var(--border-width) solid var(--line);cursor:pointer;flex-shrink:0}
.color-wrap output{font-size:.6875rem}
.check-control{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;min-height:var(--control-height-compact);padding-block:.5rem;color:var(--control-text);cursor:pointer}
.check-control input{width:1rem;height:1rem;margin:.1875rem 0 0;accent-color:var(--accent);flex-shrink:0}
.secondary-button{border-radius:var(--radius-control);background:transparent;color:var(--ink);border:var(--border-width) solid var(--line);padding:.625rem .75rem;min-height:var(--control-height-compact);text-align:left;font-size:var(--font-control-compact)}
.secondary-button:hover{border-color:var(--accent);color:var(--accent)}
.preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.5rem;border-top:1px solid var(--line);font-size:.75rem}
.preview-toolbar p>span{color:var(--muted);margin-left:.5rem}
.preview-toolbar>span{font: .6875rem ui-monospace,monospace;color:var(--muted)}
.demo-stage{padding:1rem;background:var(--preview-stage);min-width:0;display:grid;gap:1.5rem;align-items:start}
.sample-placement{min-width:0;width:100%}
.viewport-shell{position:relative;max-width:100%;margin-inline:auto}
.sample-viewport{container-type:inline-size;width:100%;transform-origin:top left}
.design-sample{--sample-accent:var(--demo-default-accent);--sample-on-accent:#ffffff;--sample-font:var(--font-ui);--sample-gap:32px;--sample-columns:minmax(0,1fr) minmax(0,1fr);background:var(--preview-paper);color:var(--preview-ink);font-family:var(--font-ui);color-scheme:light}
.sample-brandline,.sample-foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:clamp(12px,2.5cqw,28px);font-size:clamp(8px,1.1cqw,12px);line-height:1.4}
.sample-brandline{border-bottom:1px solid color-mix(in srgb,var(--preview-ink) 15%,transparent)}
.sample-brandline>span:first-child{font-size:clamp(18px,2.6cqw,28px);font-weight:600;letter-spacing:-.06em}
.registered{font-size:.45em;vertical-align:super;letter-spacing:0}
.sample-brandline>span:last-child{font-family:ui-monospace,monospace;text-align:right}
.sample-grid{display:grid;grid-template-columns:var(--sample-columns);gap:var(--sample-gap);padding:clamp(12px,2.5cqw,28px);align-items:stretch}
.sample-image{min-width:0;min-height:0;grid-column:1;grid-row:1;position:relative;aspect-ratio:1/1;max-height:360px;overflow:hidden}
.sample-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.sample-copy{min-width:0;grid-column:2;grid-row:1;align-self:center;text-align:left}
.sample-eyebrow{font-family:ui-monospace,monospace;font-size:clamp(7px,1cqw,11px);line-height:1.4;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:clamp(8px,2cqw,24px);overflow-wrap:anywhere}
.sample-title{font-family:var(--sample-font);font-size:clamp(18px,4.8cqw,60px);font-weight:500;line-height:1.03;letter-spacing:-.05em;max-width:14ch;overflow-wrap:anywhere}
.sample-description{font-size:clamp(9px,1.45cqw,16px);line-height:1.6;max-width:37ch;margin-top:clamp(8px,1.8cqw,24px)}
.sample-link{display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(8px,2cqw,32px);background:var(--sample-accent);color:var(--sample-on-accent);padding:clamp(8px,1.3cqw,16px);font-size:clamp(8px,1.15cqw,13px);line-height:1.4;margin-top:clamp(10px,2.8cqw,32px);max-width:100%}
.sample-link>span{flex-shrink:0}
.sample-foot{border-top:1px solid color-mix(in srgb,var(--preview-ink) 15%,transparent);padding-block:clamp(10px,1.5cqw,16px)}
.sample-foot>span:last-child{flex-shrink:0}
.design-sample[data-order=text-first] .sample-image{grid-column:2}
.design-sample[data-order=text-first] .sample-copy{grid-column:1}
.design-sample[data-stacked=true] .sample-grid{grid-template-columns:minmax(0,1fr)}
.design-sample[data-stacked=true] .sample-image{grid-column:1;grid-row:1;max-height:230px;aspect-ratio:1.8}
.design-sample[data-stacked=true] .sample-copy{grid-column:1;grid-row:2}
.design-sample[data-stacked=true][data-order=text-first] .sample-image{grid-row:2}
.design-sample[data-stacked=true][data-order=text-first] .sample-copy{grid-row:1}
.design-sample[data-stacked=true] .sample-title{font-size:clamp(28px,7cqw,48px)}
.design-sample[data-stacked=true] .sample-description{font-size:clamp(12px,3cqw,16px)}
.design-sample[data-stacked=true] .sample-eyebrow{font-size:clamp(9px,2cqw,11px)}
.design-sample[data-stacked=true] .sample-link{font-size:clamp(11px,2.8cqw,13px)}
.placement-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;font-size:.75rem;color:var(--preview-label)}
.placement-label>span:last-child{color:var(--accent)}
.demo-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;font-size:.8125rem}
.demo-bottom p{color:var(--muted);max-width:75ch}
.next-step{background:transparent;color:var(--accent);border:0;display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:.8125rem;text-align:left}
.next-step:hover{text-decoration:underline;text-underline-offset:.25em}
.demo-caption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-top:1rem;color:var(--muted);font-size:.875rem}
.reset-link{color:var(--muted);font-size:.75rem;padding:.5rem 0;border:0;background:transparent;text-underline-offset:.25em}
.reset-link:hover{color:var(--ink);text-decoration:underline}
.noscript-note{padding:1rem 1.5rem;color:var(--muted);font-size:.875rem}
.section{padding-block:4rem}
h2{font-size:2.25rem;line-height:1.1;max-width:30ch}
.section-intro{max-width:52ch;font-size:1.0625rem;line-height:1.75rem;color:var(--muted);margin-top:1.5rem}
.section .eyebrow{margin-bottom:1.5rem}
.system-section{border-top:1px solid var(--line);padding-block:3rem}
.system-grid{align-items:center}
.system-grid>.section-intro{margin-top:0}
.system-grid,.roadmap-grid{display:grid;gap:var(--column-gap)}
.definition-list>div{padding-block:1.25rem;border-bottom:1px solid var(--line);display:grid;gap:.5rem}
.definition-list>div:first-child{padding-top:0}
.definition-list dt,.roadmap-list dt,.craft-features dt{font-size:1.125rem;line-height:1.75rem}
.definition-list dd,.roadmap-list dd,.craft-features dd{font-size:1rem;line-height:1.625rem;color:var(--muted);max-width:55ch}
.craft-features{display:grid;gap:var(--column-gap);margin-block:3rem}
.craft-features>div{padding-top:1rem;border-top:1px solid var(--line);min-width:0}
.craft-features dd{margin-top:.75rem}
.twig-strip{display:grid;gap:1.5rem;background:var(--code-surface);padding:1.5rem;border:var(--border-width) solid var(--line);min-width:0}
.twig-strip>p{font-size:1rem}
.twig-strip>div{min-width:0}
.twig-strip span{display:block;font-size:.875rem;color:var(--muted);margin-bottom:.5rem}
.twig-strip code{font-size:.8125rem;color:var(--accent);overflow-wrap:anywhere}
.code-note{margin-top:.75rem;font-size:.875rem;color:var(--muted)}
.roadmap-section{border-block:1px solid var(--line)}
.roadmap-list{display:grid;gap:2rem}
.roadmap-list dt:before{content:'Planned';display:block;font: .8125rem ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.75rem}
.roadmap-list dd{margin-top:.75rem}
.closing{display:grid;gap:var(--column-gap)}
.release-note{align-self:end;max-width:45ch}
.release-note p{font-size:1rem;color:var(--muted);margin-top:1rem}
.release-note p:last-child{font-size:.8125rem}
.skip{position:fixed;top:1rem;left:1rem;padding:.75rem 1rem;background:var(--accent);color:var(--on-accent);z-index:20}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;top:0;left:0}
@media(min-width:40rem){.hero{padding-block:4.5rem 3.5rem}.hero h1{margin-block:2rem}.story-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.step-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.reuse-controls{grid-template-columns:1.4fr 1fr 1fr}.demo-stage{padding:2rem}.demo-stage[data-step=reuse]{grid-template-columns:repeat(2,minmax(0,1fr))}.section{padding-block:5rem}h2{font-size:3rem;line-height:1}.definition-list>div{grid-template-columns:1fr 2fr;gap:1.5rem}}
@media(min-width:64rem){.hero{padding-top:5rem}.hero-bottom{flex-direction:row;align-items:flex-end;justify-content:space-between}.hero-bottom>p{max-width:64ch}.primary-link{flex-shrink:0}.playground-section{padding-bottom:6rem}.step-panel{grid-template-columns:1fr 1.3fr;gap:var(--column-gap);align-items:center;padding:1.75rem 2rem;min-height:11rem}.story-tabs button{padding:1.25rem 2rem;font-size:1rem}.preview-toolbar{padding-inline:2rem}.demo-bottom{padding-inline:2rem}.system-grid,.roadmap-grid,.closing{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.5rem}.craft-features{grid-template-columns:repeat(3,minmax(0,1fr))}.twig-strip{grid-template-columns:.8fr 1fr 1fr;gap:var(--column-gap);align-items:center}.section{padding-block:6rem}.closing h2{font-size:4rem}.closing .release-note{justify-self:end}.roadmap-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--column-gap)}.playground-top h2{font-size:1.25rem}}
@media(max-width:25rem){.story-tabs button{gap:.5rem;padding:.875rem .75rem}.step-panel{padding:1rem}.demo-stage{padding:.75rem}.preview-toolbar,.demo-bottom{padding:1rem}.hero h1{font-size:2.65rem}.color-wrap{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sample-image{width:100%;height:clamp(140px,30cqw,360px);max-height:none;aspect-ratio:auto}
.design-sample[data-stacked=true] .sample-image{height:clamp(160px,50cqw,260px);max-height:none;aspect-ratio:auto}
@media(max-width:39.99rem){
 .playground{display:grid;grid-template-areas:'tabs' 'copy' 'toolbar' 'preview' 'controls' 'bottom'}
 .story-tabs{grid-area:tabs}
 .step-panel{display:contents}
 .step-copy{grid-area:copy;padding:1.25rem}
 .step-controls{grid-area:controls;padding:1.25rem;border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr))}
 .step-controls>.control:last-child{grid-column:1/-1}
 .responsive-controls>.control:first-child,.reuse-controls>.control:first-child{grid-column:1/-1}
 .step-controls>.secondary-button{grid-column:1/-1;width:100%}
 .preview-toolbar{grid-area:toolbar}
 .demo-stage{grid-area:preview}
 .demo-bottom{grid-area:bottom}
 .noscript-note{grid-column:1/-1}
}
.control select:disabled{opacity:.45;cursor:not-allowed}
.design-sample[data-alignment=center] .sample-copy{text-align:center}
.design-sample[data-alignment=center] .sample-title,.design-sample[data-alignment=center] .sample-description{margin-inline:auto}
.sample-extra{padding:clamp(24px,5cqw,64px);background:var(--sample-accent);color:var(--sample-on-accent);text-align:center}
.sample-extra h4{font-family:var(--sample-font);font-size:clamp(24px,4.8cqw,60px);line-height:1.05;letter-spacing:-.04em;font-weight:500;margin:0}
.sample-extra>p:last-child{font-size:clamp(10px,1.5cqw,16px);margin:clamp(12px,2cqw,24px) auto 0;max-width:40ch}
@media(max-width:39.99rem){.compose-controls>.control:last-child{grid-column:auto}}
.demo-action{display:inline-flex;align-items:center;gap:1rem;min-height:var(--control-height-compact);margin-top:.75rem;padding:.25rem 0;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);font-size:.875rem;text-align:left}
.demo-action:hover{border-bottom-color:var(--accent)}

/* Page-owned composition surrounds the shared Component. */
.page-intro{padding:clamp(20px,4cqw,40px) clamp(12px,2.5cqw,28px) clamp(12px,2.5cqw,28px);text-align:left}
.page-intro>span{font:clamp(9px,1.5cqw,12px) ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em}
.page-intro h3{font:500 clamp(24px,4.8cqw,40px)/1.1 var(--sample-font);letter-spacing:-.04em;max-width:24ch;margin:.4em 0 0}
/* Compact is a deliberate responsive override; base definitions stay intact. */
.design-sample[data-responsive-compact=true] .sample-grid{gap:16px;padding:16px}
.design-sample[data-responsive-compact=true] .sample-title{font-size:36px;line-height:1.08}
.design-sample[data-responsive-compact=true] .sample-description{font-size:16px;margin-top:16px}
.design-sample[data-responsive-compact=true] .sample-eyebrow{font-size:11px;margin-bottom:12px}
.design-sample[data-responsive-compact=true] .sample-link{font-size:14px;padding:14px;margin-top:20px}
.design-sample[data-responsive-compact=true] .sample-extra{padding:24px 16px}
.design-sample[data-responsive-compact=true] .sample-extra h4{font-size:32px}
.design-sample[data-responsive-compact=true] .sample-extra>p:last-child{font-size:16px}
@media(max-width:39.99rem){
 .control,.check-control,.secondary-button,.next-step{font-size:1rem}
 .control select,.control input[type=number],.control input[type=text]{font-size:1rem;min-height:var(--touch-target)}
 .check-control{min-height:var(--touch-target)}
 .check-control input{width:1.25rem;height:1.25rem}
 .demo-action,.reset-link,.next-step,.secondary-button{min-height:var(--touch-target)}
 .check-control{grid-column:1/-1}
 .design-sample[data-stacked=true] .sample-description{font-size:16px}
 .design-sample[data-stacked=true] .sample-link{font-size:14px}
}

/* Shared interface colors follow the selected Studio palette. */
@media(min-width:40rem){.system-section{padding-block:4rem}}
@media(min-width:64rem){#colors-type{padding-top:4rem}}
@media(max-width:39.99rem){.code-note,.demo-caption{font-size:.875rem}}

/* Sample identities are independent of the page's light/dark appearance. */
#identity-demo{--specimen-accent:#a84a30;--specimen-paper:#f4ece1;--specimen-ink:#3b2c26;--specimen-on-accent:#ffffff;--specimen-font:Georgia,serif}
#rhythm-demo{--preview-paper:#edf1e6;--preview-ink:#28352b;--specimen-accent:#c2d4a0}
#grid-demo{--preview-paper:#edf3f4;--preview-ink:#263b42}
#connections-demo{--preview-paper:#f2edf8;--preview-ink:#382c4d;--specimen-accent:#b6a5e3}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-mark-dark{display:none}
@media(prefers-color-scheme:dark){:root:not([data-appearance=light]) .brand-mark-light{display:none}:root:not([data-appearance=light]) .brand-mark-dark{display:block}}
:root[data-appearance=dark] .brand-mark-light{display:none}
:root[data-appearance=dark] .brand-mark-dark{display:block}
.external-link-mark{white-space:nowrap}
.external-link-mark{font-size:.8em;text-decoration:none}

/* Launch signup uses the page palette; sample designs remain independent. */
.inline-link{text-decoration:underline;text-underline-offset:.2em;color:var(--ink)}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;flex-shrink:0}
.signup-link{display:inline-flex;gap:1.5rem;align-items:center;min-height:var(--control-height-compact);font-size:.9375rem;text-decoration:underline;text-underline-offset:.3em}
.signup-link:hover{color:var(--accent)}
#signup{scroll-margin-top:2rem}
.signup-form{margin-top:2rem;position:relative}
.signup-form>label{display:block;font-size:1rem;font-weight:500;margin-bottom:.75rem;color:var(--ink)}
.signup-fields{display:flex;gap:.5rem;flex-wrap:wrap}
.signup-fields input{width:100%;min-width:0;flex:1 1 12rem;border:var(--border-width) solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);padding:var(--control-padding-block) var(--control-padding-inline);font-size:var(--font-control);min-height:var(--control-height)}
.signup-fields input::placeholder{color:var(--muted);opacity:1}
.signup-fields input:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset)}
.signup-fields button{border:0;gap:1.5rem;min-height:var(--control-height)}
.signup-fields button:disabled{opacity:.7;cursor:wait}
.signup-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.release-note .signup-privacy{font-size:.8125rem;line-height:1.6;margin-top:1rem}
.release-note .signup-status{font-size:.9375rem;line-height:1.5;min-height:3em;color:var(--ink);margin-top:.75rem}
.signup-status[data-state=error]{border-left:2px solid var(--accent);padding-left:.75rem}
@media(max-width:25rem){.signup-fields{flex-direction:column}.signup-fields input{flex:auto}.signup-fields button{justify-content:space-between}}

/* Editorial content shares the landing page's typography and appearance. */
.journal-section{display:grid;gap:2rem;border-bottom:1px solid var(--line)}
.journal-section>div:last-child{max-width:50ch;align-self:center}
.journal-section p:not(.eyebrow){color:var(--muted);font-size:1.125rem;line-height:1.75;margin-bottom:1.25rem}
.article-page{padding-block:3.5rem 5rem}
.wrap--reading{max-width:calc(var(--reading-width) + var(--gutter) * 2)}
.article-header h1{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1.08;text-wrap:pretty;margin-block:1.5rem;max-width:23ch}
.article-deck{font-size:1.25rem;line-height:1.6;color:var(--muted);max-width:58ch}
.article-meta{font-size:.875rem;color:var(--muted);margin-top:1.5rem}
.article-meta .meta-item{display:inline-block;max-width:100%}
.article-meta time{white-space:nowrap}
.article-meta a,.article-prose a{text-decoration:underline;text-underline-offset:.2em}
.article-prose{max-width:none;margin-top:3rem;font-size:1rem;line-height:1.8}
.article-prose p+p{margin-top:1.25rem}
.article-prose h2{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.2;text-wrap:pretty;margin:2.75rem 0 1rem;max-width:none}
.article-prose a{color:var(--accent)}
.article-end{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
@media(min-width:64rem){.journal-section{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.5rem}.article-page{padding-block:5rem 6rem}}
.signup-verification{margin-top:1rem;min-height:0}
.verification-status{font-size:.875rem!important;margin-top:.5rem!important}
.verification-retry{border:0;background:transparent;color:var(--ink);font-size:.875rem;text-decoration:underline;padding:.75rem 0;min-height:var(--touch-target)}
.control input:not([type=range]):not([type=color]),.control select,.signup-fields input{border-color:var(--muted)}

@media(max-width:63.99rem){
}


/* Footer: identity and useful destinations, followed by attribution. */
.site-footer{width:100%;border-top:1px solid var(--line);color:var(--muted)}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem 1.5rem;padding-block:3rem}
.footer-identity{grid-column:1/-1}
.footer-brand{display:inline-flex;align-items:center;gap:.625rem;color:var(--ink);font-size:1.25rem;font-weight:600;letter-spacing:-.045em;min-height:var(--control-height-compact)}
.footer-brand img{width:28px;height:28px;flex-shrink:0}
.footer-identity>p{font-size:1rem;line-height:1.6;margin-top:.75rem;max-width:28ch}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.footer-links h2{font-size:1rem;line-height:1.5;font-weight:500;letter-spacing:0;color:var(--ink);margin:0 0 .75rem}
.footer-links>a,.footer-links>[data-cookie-settings]{display:flex;align-items:center;width:100%;min-height:var(--touch-target);padding-block:.375rem;font-size:1rem;line-height:1.5;font-weight:400;max-width:100%;text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.footer-bottom{display:flex;flex-direction:column;gap:.75rem;border-top:1px solid var(--line);padding-block:1.5rem;font-size:.875rem;line-height:1.7}
.footer-bottom a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em}
.footer-bottom .photo-credit{max-width:60ch}
@media(min-width:48rem){
 .footer-main{grid-template-columns:2fr 1fr 1fr;gap:var(--column-gap);padding-block:3.5rem}
 .footer-identity{grid-column:auto}
 .footer-links h2{font-size:.875rem}
 .footer-links>a,.footer-links>[data-cookie-settings]{width:auto;font-size:.875rem;min-height:2.25rem}
 .footer-bottom{flex-direction:row;justify-content:space-between;align-items:baseline;gap:2rem}
 .footer-bottom .photo-credit{text-align:right}
}