:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light;--paper:#e8e3ee;--ink:#25232a;--rule:rgba(37,35,42,.35);--sheet:#f2f3f3;--sheet-ink:#17191d;--sheet-muted:#4d5660;--sheet-line:#aeb3b7}
html[data-theme=dark]{color-scheme:dark;--paper:#231e20;--ink:#f6eee8;--rule:rgba(246,238,232,.5);--sheet:#2a2528;--sheet-ink:#f6eee8;--sheet-muted:#cbbfc4;--sheet-line:#6f6268}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);color:var(--ink)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:7px}a:hover{text-decoration:underline;text-underline-offset:7px}button:hover{opacity:.72}.masthead{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:28px 3.6vw}.wordmark{font-size:23px;letter-spacing:-.04em;font-weight:550}.masthead nav{display:flex;gap:42px;align-items:center;font-size:19px}.masthead nav>a{min-height:44px;display:flex;align-items:center}.languages{display:flex;gap:15px}.languages button{padding:10px 0;min-width:30px;min-height:44px;background:none;border:0;font-size:17px}.languages button[aria-pressed=true]{text-decoration:underline;text-underline-offset:7px}.languages button[aria-pressed=false]{opacity:.65}.poster{padding:clamp(45px,9vh,120px) 3.6vw 55px;display:flex;flex-direction:column;justify-content:center}.poster h1{font-family:inherit;font-style:normal;font-weight:500;font-size:clamp(64px,10.5vw,158px);line-height:1.06;letter-spacing:-.065em;margin:0 0 30px}.poster h1>span{display:block}.poster>p{font-size:clamp(18px,2.15vw,30px);line-height:1.5;letter-spacing:-.025em;margin:0}.poster-action{display:flex;justify-content:flex-end;margin-top:clamp(30px,5vh,65px)}.open-apps{border:1.5px solid currentColor;padding:18px 34px;min-height:60px;display:inline-flex;align-items:center;justify-content:center;font-size:24px}.open-apps:hover{background:var(--ink);color:var(--paper);text-decoration:none}footer{margin:0 3.6vw;border-top:1px solid var(--rule);padding:20px 0 25px;display:flex;justify-content:space-between;gap:25px;font-size:15px}footer>div{display:flex;gap:32px;align-items:center}footer a{display:inline-flex;align-items:center;min-height:44px}footer button{background:none;border:0;min-height:44px;padding:10px 0}.skip{position:absolute;top:-100px;left:20px;padding:12px;background:var(--ink);color:var(--paper);z-index:5}.skip:focus{top:15px}dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(620px,100%);height:100dvh;max-height:100dvh;max-width:100%;border:0;background:var(--sheet);color:var(--sheet-ink);padding:0;overflow:auto}dialog::backdrop{background:rgba(16,15,18,.4)}.drawer-content{padding:32px 40px 45px}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.drawer-head h2{font-size:26px;letter-spacing:-.04em;margin:0}.drawer-head button{border:0;background:none;min-height:44px;padding:10px 0;font-size:15px}.drawer-intro{font-family:inherit;font-weight:450;font-size:38px;line-height:1.1;margin:45px 0}.app-list a{display:block;border-top:1px solid var(--sheet-line);padding:26px 0 28px;text-decoration:none}.app-list a:last-child{border-bottom:1px solid var(--sheet-line)}.app-list a:hover h3{text-decoration:underline;text-underline-offset:7px}.app-list h3{font-size:36px;letter-spacing:-.04em;margin:0 0 8px;font-weight:550}.app-list a>div>span{font-size:13px;color:var(--sheet-muted)}.app-list p{font-size:17px;line-height:1.55;max-width:390px;margin:20px 0}.app-status{font-size:13px;color:var(--sheet-muted)}.drawer-note{font-size:14px;line-height:1.6;color:var(--sheet-muted);margin-top:35px;max-width:420px}dialog[open] .drawer-content{animation:drawer-enter .2s ease-out both}@keyframes drawer-enter{from{opacity:.35;transform:translateX(20px)}to{opacity:1;transform:none}}
html[lang=en] .poster h1{font-size:clamp(58px,8.1vw,124px);letter-spacing:-.055em}
@media(max-width:760px){.masthead{padding:20px 6vw;align-items:flex-start}.masthead nav{gap:20px;font-size:16px;flex-wrap:wrap;justify-content:flex-end}.wordmark{font-size:21px}.languages{gap:10px}.languages button{font-size:14px}.poster{padding:65px 6vw 45px}.poster h1{font-size:clamp(54px,11.7vw,88px);letter-spacing:-.065em;line-height:1.08;margin-bottom:25px}.poster>p{font-size:20px;max-width:360px}.poster-action{margin-top:55px;justify-content:flex-start}.open-apps{font-size:20px;padding:15px 25px;min-height:56px}footer{margin:0 6vw;padding:15px 0;font-size:13px}footer>div{gap:20px}html[lang=en] .poster h1{font-size:clamp(44px,8.6vw,68px)}.drawer-content{padding:24px 25px 35px}.drawer-intro{font-size:32px;margin:30px 0}.app-list h3{font-size:32px}}
@media(max-width:430px){.masthead{display:block}.masthead nav{justify-content:space-between;margin-top:18px;gap:15px}.poster{padding-top:45px}.poster h1{font-size:11.7vw}.poster>p{font-size:18px}.poster-action{margin-top:38px}footer{flex-wrap:wrap;gap:5px}footer>div{gap:20px}html[lang=en] .poster h1{font-size:10.3vw}}
@media(prefers-reduced-motion:reduce){dialog[open] .drawer-content{animation:none}*{scroll-behavior:auto!important}}

html[data-motion=reduce] dialog[open] .drawer-content{animation:none}

.variant-link{font-size:13px;text-decoration:underline;text-underline-offset:4px}.poster-action{align-items:center;gap:28px;flex-wrap:wrap}html[lang=en] .poster h1{font-weight:500}

.poster{padding-top:clamp(30px,5vh,80px);padding-bottom:32px}.poster h1{letter-spacing:-.045em;word-spacing:.025em;font-weight:450}html[lang=en] .poster h1{letter-spacing:-.045em;font-weight:450}

@media(max-width:430px){html[lang=en] .poster h1{font-size:8.9vw}}

/* Comparison controls belong to the current text draft only. */
html[data-palette]{--paper:#b5c8b3;--ink:#202725;--rule:rgba(32,39,37,.4)}
html[data-palette=petrol]{--paper:#87b3b0}
html[data-palette=apricot]{--paper:#e7b296}
html[data-palette][data-theme=dark]{--paper:#231e20;--ink:#f6eee8;--rule:rgba(246,238,232,.5)}
.palette-picker{border:0;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px;min-inline-size:0}
.palette-picker[hidden]{display:none}
.palette-picker legend{font-size:13px;margin-bottom:12px;padding:0}
.palette-option{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid transparent;color:#202725;font-size:14px;cursor:pointer}
.tone-sage{background:#b5c8b3}.tone-petrol{background:#87b3b0}.tone-apricot{background:#e7b296}
.palette-option:has(input:checked){border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.palette-option:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.palette-option input{margin:0;accent-color:#202725;width:16px;height:16px;flex:none}
.palette-option:hover{border-color:currentColor}
@media(max-width:430px){.palette-picker{gap:8px;margin-top:25px}.palette-option{font-size:13px;padding:10px 12px}.poster-action{margin-top:26px}}

.palette-comparison{margin-top:30px;font-size:13px;align-self:flex-start;max-width:100%}
.palette-comparison[hidden]{display:none}
.palette-comparison summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;text-decoration:underline;text-underline-offset:4px}
.palette-comparison summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.palette-comparison .palette-picker{margin-top:10px}

/* One background colour at a time; monochrome actions. */
html[data-palette]{--ink:#000;--paper:#87b3b0}
html[data-palette=sage]{--paper:#b5c8b3}
html[data-palette=apricot]{--paper:#e7b296}
html[data-palette][data-theme=dark]{--paper:#231e20;--ink:#fff}
html[data-palette] .open-apps,html[data-palette] .drawer-head button,html[data-palette] #appearance{background:#000;color:#fff;border:1px solid #000}
html[data-palette] .drawer-head button,html[data-palette] #appearance{padding:10px 14px}
html[data-palette] .open-apps:hover{background:#222;color:#fff}
html[data-palette][data-theme=dark] .open-apps,html[data-palette][data-theme=dark] .drawer-head button,html[data-palette][data-theme=dark] #appearance{border-color:#fff}
html[data-palette] .palette-option{color:#000}
html[data-palette] .palette-option input{accent-color:#000}

html[data-palette][data-theme=color]{--sheet-ink:#000}

html[data-palette] .open-apps:focus-visible,html[data-palette] #appearance:focus-visible{outline-color:var(--ink)}
html[data-palette] .drawer-head button:focus-visible{outline-color:var(--sheet-ink)}

/* Local headline alternatives; navigation and body text remain constant. */
.font-picker{border:0;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px;min-inline-size:0}
.font-picker[hidden]{display:none}
.font-picker legend{font-size:13px;padding:0;margin-bottom:10px}
.font-option{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 13px;border:1px solid currentColor;font-size:14px;cursor:pointer}
.font-option input{margin:0;width:16px;height:16px;accent-color:#000;flex:none}
.font-option:has(input:checked){box-shadow:inset 0 0 0 1px currentColor}
.font-option:has(input:focus-visible){outline:2px solid currentColor;outline-offset:4px}
html[data-font=humanist] .poster h1{font-family:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;font-weight:500;letter-spacing:-.055em}
html[data-font=serif] .poster h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:normal;letter-spacing:-.05em}
html[data-font=mono] .poster h1{font-family:Menlo,Consolas,"Liberation Mono",monospace;font-weight:400;letter-spacing:-.055em;font-size:clamp(52px,9.7vw,145px);line-height:1.12}
html[lang=en][data-font=mono] .poster h1{font-size:clamp(42px,7vw,106px)}
.poster:has(.font-picker) .palette-comparison{margin-top:14px}
@media(max-width:760px){html[data-font=mono] .poster h1{font-size:9.2vw}html[lang=en][data-font=mono] .poster h1{font-size:6.6vw}.font-option{font-size:13px;padding:10px 11px}}

.poster>.font-picker{margin:0 0 28px}

@font-face{font-family:"Bitstream Vera Sans Mono";src:url("assets/fonts/bitstream-vera/VeraMono.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
html[data-font=vera] .poster h1{font-family:"Bitstream Vera Sans Mono",Menlo,Consolas,monospace;font-weight:400;font-style:normal;letter-spacing:-.055em;font-size:clamp(52px,9.7vw,145px);line-height:1.12}
html[lang=en][data-font=vera] .poster h1{font-size:clamp(42px,7vw,106px)}
@media(max-width:760px){html[data-font=vera] .poster h1{font-size:9.2vw}html[lang=en][data-font=vera] .poster h1{font-size:6.6vw}}

/* One-shot type sequence; decorative copies are hidden from AT. */
.swap-reserve,.swap-echo{display:none}
.swap-trigger[hidden]{display:none}
.swap-trigger{align-self:flex-start;min-height:44px;margin:0 0 24px;padding:10px 16px;background:#000;color:#fff;border:1px solid #000;font-size:14px}
.swap-trigger:focus-visible{outline-color:var(--ink)}
html[data-theme=dark] .swap-trigger{border-color:#fff}
.swap-trigger[aria-disabled=true]{cursor:default}
html[data-font=play] .poster h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:normal;letter-spacing:-.05em}
html[data-font=play] .swap-word{display:inline-grid;position:relative;vertical-align:baseline;align-items:baseline;white-space:nowrap}
html[data-font=play] .swap-base,html[data-font=play] .swap-reserve{grid-area:1/1}
html[data-font=play] .swap-reserve{display:block;visibility:hidden;font-family:"Bitstream Vera Sans Mono",monospace;font-size:.88em;pointer-events:none}
html[data-font=play] .swap-reserve-serif{font-family:Georgia,"Times New Roman",serif;font-size:1em}
html[data-font=play] .swap-word.is-vera .swap-base{font-family:"Bitstream Vera Sans Mono",monospace;font-size:.88em}
html[data-font=play] .swap-echo{display:block;position:absolute;inset:0;opacity:0;pointer-events:none}
.echo-serif{font-family:Georgia,"Times New Roman",serif}.echo-vera{font-family:"Bitstream Vera Sans Mono",monospace;font-size:.88em}
.is-glitching .swap-base{animation:word-family 3.3s steps(1,end) both,word-jolt .8s .9s steps(1,end) 3}
.is-glitching .swap-echo{animation:word-echo .8s .9s steps(1,end) 3 both}
.is-glitching .echo-vera{animation-direction:reverse}
@keyframes word-jolt{0%,65%,100%{transform:none;clip-path:inset(0)}20%{transform:translateX(2px);clip-path:inset(22% 0 45%)}42%{transform:translateX(-2px);clip-path:inset(58% 0 8%)}80%{transform:translateX(1px);clip-path:inset(0)}}
@keyframes word-echo{0%,75%,100%{opacity:0;transform:none}20%{opacity:.75;transform:translateX(-2px);clip-path:inset(8% 0 65%)}45%{opacity:.75;transform:translateX(2px);clip-path:inset(62% 0 8%)}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=preview]) .is-glitching .swap-base,html:not([data-motion=preview]) .is-glitching .swap-echo{animation:none!important}}
html[data-motion=reduce] .is-glitching .swap-base,html[data-motion=reduce] .is-glitching .swap-echo{animation:none!important}

/* Georgia x-height 481/1000; Vera Mono 547/1000. Match optical lowercase height.
   Both hidden reserves keep line height/width stable throughout all three bursts. */
@keyframes word-family{
 0%,31%,40%,55%,64%,79%{font-family:Georgia,"Times New Roman",serif;font-size:1em}
 32%,39%,56%,63%,80%,100%{font-family:"Bitstream Vera Sans Mono",monospace;font-size:.88em}
}
.design-controls{align-self:flex-start;margin-top:12px;max-width:100%;font-size:13px}
.design-controls[hidden]{display:none}
.design-controls>summary{cursor:pointer;min-height:44px;align-content:center;text-decoration:underline;text-underline-offset:4px}
.design-controls>summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.design-controls>.font-picker{margin:14px 0 0}
.design-controls .palette-comparison{margin-top:14px}
.poster>.swap-trigger{margin:18px 0 0;padding:0;min-height:44px;background:none;color:var(--ink);border:0;border-bottom:1px solid currentColor;font-size:13px}

.motion-option{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px}.motion-option input{accent-color:#000;width:16px;height:16px}

.headline-picker .font-option{white-space:normal;text-align:left}

/* Quiet product gateway: domain name, byline, then apps. Older slogans stay selectable. */
html[data-headline=identity] .headline-second{display:none}
html[data-headline=identity] .poster h1{font-size:clamp(60px,13vw,188px);line-height:1.08;letter-spacing:-.06em;margin-bottom:22px}
html[data-headline=identity] .poster-action{justify-content:flex-start;margin-top:36px}
html[data-headline=identity] .design-controls{margin-top:24px}
html[data-headline=identity] .font-option:has(input[value=play]){display:none}
.motion-option[hidden]{display:none}
@media(max-width:760px){html[data-headline=identity] .poster h1{font-size:13vw}html[data-headline=identity] .poster{padding-top:50px;padding-bottom:40px}}

/* The neutral headline and header wordmark share one typographic definition. */
.wordmark,html[data-headline=identity][data-font=sans] .poster h1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:550;letter-spacing:-.04em;word-spacing:normal}