@font-face{font-family:'Bricolage Grotesque';src:url(/a/fonts/bricolage-latin.4083127a1f.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap}@font-face{font-family:'Instrument Sans';src:url(/a/fonts/instrument-sans-latin.561da85450.woff2) format('woff2');font-weight:400 700;font-display:swap}@font-face{font-family:'Geist Mono';src:url(/a/fonts/geist-mono-latin.0e04bb6e7b.woff2) format('woff2');font-weight:400 600;font-display:swap}
/* Colorful for Illustrator, version B.
   Layout: a calm, warm-grey page with everything on one centered axis. Under the headline stands one scene: a rounded
   artboard in the field color of a palette, the word "colorful" set across it as solid letters, and the live panel
   standing in front of the word and hanging over the artboard's lower edge. Below, rounded cards on the same ground,
   then one black section where the whole library pulls back into view.
   The page wears the palette picked in the panel: the artboard, the buttons, the trays behind the panel screens.
   Two modes, light and dark. Every color below is a token; the dark blocks only give the tokens other values.
   The wall of palettes is black in both modes, and the footer card is always the reverse of the page. */
:root{
  color-scheme:light;
  --ground:#EFEEEA; --card:#F8F7F3; --raise:#FFFFFF; --glass:rgba(248,247,243,.86);
  --ink:#0C0C0D; --ink2:#2B2B29; --ink-soft:rgba(12,12,13,.64); --ink-faint:rgba(12,12,13,.4);
  --on-ink:#FFFFFF; --on-ink-dim:#A3A39E;
  --grey:#5A5A56; --grey2:#7B7B76;
  --line:rgba(12,12,13,.1);
  --inv-soft:#D9D9D5; --inv-dim:#A3A39E;
  --acc:var(--acc-l); --acc-on:var(--acc-l-on);
  --flip:1;
  --black:#0C0C0D; --white:#FFFFFF; --grey-d:#A3A39E; --line-d:rgba(255,255,255,.2);
  --flow-w:880px; --flow-t:25.9s;
  --flow-a:#EF541E; --flow-b:#F6B12A; --flow-c:#EF541E; --flow-d:#F6B12A; --flow-on:#0C0C0D;
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --out:cubic-bezier(.16,1,.3,1); --in:cubic-bezier(.7,0,.84,0); --wipe:cubic-bezier(.77,0,.18,1);
  --g:clamp(16px,2.4vw,32px);
  --gx:max(var(--g),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --r:30px;
  /* The palette the page wears, and where the ink of the big word sits. The page script changes the palette. */
  --field:#EF541E;--on:#0C0C0D;--on-inv:#FFFFFF;--on-line:rgba(12,12,13,.24);--acc-d:#EF541E;--acc-d-on:#0C0C0D;--acc-l:#EF541E;--acc-l-on:#0C0C0D;--p0:#EF541E;--p1:#302B25;--p2:#F6B12A;--p3:#667243;--p4:#EEE4D0;--flow-a:#EF541E;--flow-b:#F6B12A;--flow-c:#EF541E;--flow-d:#F6B12A;--flow-on:#0C0C0D;--wem:3.336;--shift:-0.002;--inktop:-0.004;--inkh:0.714;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --ground:#131314; --card:#1D1D1F; --raise:#29292C; --glass:rgba(29,29,31,.82);
  --ink:#F3F2EE; --ink2:#D0D0CB; --ink-soft:rgba(243,242,238,.68); --ink-faint:rgba(243,242,238,.4);
  --on-ink:#0C0C0D; --on-ink-dim:#5A5A56;
  --grey:#A6A6A0; --grey2:#8A8A84;
  --line:rgba(255,255,255,.13);
  --inv-soft:#3A3A38; --inv-dim:#5A5A56;
  --acc:var(--acc-d); --acc-on:var(--acc-d-on);
  --flip:-1;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#131314; --card:#1D1D1F; --raise:#29292C; --glass:rgba(29,29,31,.82);
  --ink:#F3F2EE; --ink2:#D0D0CB; --ink-soft:rgba(243,242,238,.68); --ink-faint:rgba(243,242,238,.4);
  --on-ink:#0C0C0D; --on-ink-dim:#5A5A56;
  --grey:#A6A6A0; --grey2:#8A8A84;
  --line:rgba(255,255,255,.13);
  --inv-soft:#3A3A38; --inv-dim:#5A5A56;
  --acc:var(--acc-d); --acc-on:var(--acc-d-on);
  --flip:-1;
}
/* A change of mode wipes across the page, like a change of palette on the artboard. */
.theme-wipe::view-transition-old(root),.theme-wipe::view-transition-new(root){mix-blend-mode:normal}
.theme-wipe::view-transition-old(root){animation:none}
.theme-wipe::view-transition-new(root){animation:wipe .5s var(--wipe) both}
*{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.5 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--on-ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gx),1180px);margin-left:auto;margin-right:auto}
.skip{position:fixed;z-index:100;left:12px;top:-80px;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--on-ink);font:600 14px/1 var(--text);text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.sel{-webkit-user-select:all;user-select:all}
.label,.facts,.w-src,.spec dt,.note,.text-link,.wall-src{font:500 12px/1.4 var(--mono);letter-spacing:.045em;text-transform:uppercase}
.card{background:var(--card);border-radius:var(--r)}

/* Buttons. A hover is a flip of color, nothing else.
   A download button is never one color for long: a band of the palette the page wears runs through it, at the pace of
   the belts in the library. The script picks the colors of the palette that one text color reads on (--flow-a to d,
   --flow-on). The band has one length and one pace for every palette, so a new palette never moves it: the script melts its four
   colors into the new ones around the hue circle (page.js, wearFlow). The hover only hides the band, so it runs on underneath and comes back in place. */
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 26px;border:0;border-radius:18px;font:600 16px/1 var(--text);letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.btn svg{width:18px;height:18px;margin-left:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-acc{--fa:var(--flow-a);--fb:var(--flow-b);--fc:var(--flow-c);--fd:var(--flow-d);position:relative;z-index:0;overflow:hidden;background:var(--fa);color:var(--flow-on)}
.btn-acc::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:calc(100% + var(--flow-w));background:linear-gradient(90deg,var(--fa),var(--fb),var(--fc),var(--fd),var(--fa)) 0 0/var(--flow-w) 100% repeat-x;animation:flow var(--flow-t) linear infinite}
@keyframes flow{to{transform:translateX(calc(var(--flow-w)*-1))}}
.btn-acc:hover{background:var(--ink);color:var(--on-ink)}
.btn-acc:hover::before{opacity:0}
.wall .btn-acc:hover{background:var(--white);color:var(--black)}
.foot .btn-acc:hover{background:var(--ground);color:var(--ink)}
.text-link{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.text-link:hover{text-decoration-thickness:4px}

/* Menu: one small bar that floats over the page */
.nav{position:fixed;z-index:60;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;height:56px;padding:8px;border-radius:20px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.brand{display:flex;align-items:center;height:40px;padding:0 16px 0 8px;text-decoration:none}
.chip5{display:flex;width:24px;height:24px;margin-right:9px;border-radius:7px;overflow:hidden}
.chip5 i{flex:1}
.chip5 i:nth-child(1){background:var(--p0)}.chip5 i:nth-child(2){background:var(--p1)}.chip5 i:nth-child(3){background:var(--p2)}.chip5 i:nth-child(4){background:var(--p3)}.chip5 i:nth-child(5){background:var(--p4)}
.brand b{font:800 21px/1 var(--display);letter-spacing:-.02em}
.nav-links{display:flex}
.nav-links a{display:flex;align-items:center;height:40px;padding:0 13px;border-radius:12px;font:500 14px/1 var(--text);color:var(--ink-soft);text-decoration:none}
.nav-links a:hover{background:var(--ink);color:var(--on-ink)}
.nav-end{display:flex;align-items:center;margin-left:4px}
.nav-btn{height:40px;padding:0 16px;margin-left:4px;border-radius:12px;font-size:14px}
/* The switch between light and dark: a disc, half lit. It only shows where the script can work it. */
.theme{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink-soft)}
.js .theme{display:flex}
.theme:hover{background:var(--ink);color:var(--on-ink)}
.theme svg{display:block;width:18px;height:18px;transform:scaleX(var(--flip))}

/* Header: the words, centered */
.hero{padding-top:calc(106px + env(safe-area-inset-top,0px));text-align:center}
.hero-text{width:min(100% - 2*var(--gx),1000px);margin:0 auto}
.kicker{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font:500 15px/1.3 var(--text)}
.kicker .sep{width:4px;height:4px;margin:0 11px;border-radius:50%;background:currentColor}
.kicker .by{display:inline-flex;align-items:center;color:var(--grey)}
.kicker a{display:block;margin-left:8px;color:var(--ink)}
.kicker svg{display:block;width:47px;height:18px;fill:currentColor}
.kicker a:hover{color:var(--acc)}
.h1{margin-top:16px;font:700 clamp(42px,min(6vw,9.4vh),88px)/.98 var(--display);letter-spacing:-.02em;text-wrap:balance}
/* Each word of the headline rises out of its own line. The padding keeps the clip clear of the letters. */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .05em .14em;margin:-.1em -.05em -.14em}
.wd>span{display:inline-block;animation:rise .9s var(--out) backwards;animation-delay:calc(var(--k,0)*45ms + 80ms)}
@keyframes rise{from{transform:translateY(130%)}to{transform:none}}
.intro{margin:20px auto 0;max-width:35em;font:400 clamp(17px,1.5vw,20px)/1.42 var(--text);color:var(--grey);text-wrap:balance}
.cta{display:flex;justify-content:center;margin-top:24px}
.facts{display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px;color:var(--grey)}
.facts li{margin:2px 10px}

/* The scene: an artboard, the word, the panel.
   --pad is the space between the artboard's edge and the ink of the word, the same at the top and on both sides.
   --em is the size of the word that makes it span the artboard between those two spaces. */
.stage{--pad:max(4.6vw,18px);--em:calc((100vw - 2*var(--gx) - 2*var(--pad))/var(--wem));--dh:520px;--ds:1;--hang:72px;--pw:340px;
  position:relative;width:min(100% - 2*var(--gx),1560px);margin:clamp(30px,3.1vw,48px) auto 0;text-align:left}
@supports (width:1cqw){.stage{container-type:inline-size;--pad:max(4.6cqw,18px);--em:calc((100cqw - 2*var(--pad))/var(--wem))}}
.board{position:relative;overflow:hidden;border-radius:var(--r);background:var(--field);color:var(--on);
  height:calc(var(--pad) + (var(--inkh) - .115)*var(--em) + var(--dh)*var(--ds) - var(--hang))}
.field{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--field)}
.field.next{visibility:hidden}
.field.next.run{visibility:visible;animation:wipe .5s var(--wipe) both}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.word{position:absolute;z-index:1;left:0;right:0;top:calc(var(--pad) - var(--inktop)*var(--em));text-align:center;font:800 var(--em)/.76 var(--display);font-stretch:100%;letter-spacing:-.018em;white-space:nowrap;-webkit-user-select:none;user-select:none}
.word .row{display:inline-block;transform:translateX(calc(var(--shift)*1em))}
.ltr{display:inline-block;cursor:pointer;paint-order:stroke fill;animation:rise .9s var(--out) backwards;animation-delay:calc(var(--k,0)*45ms + 120ms)}
.ltr.sel{outline:2px solid var(--on);outline-offset:-.03em}
/* The solid word: a canvas under the type draws the letters, and the type itself stays in place, unseen, to be clicked. */
.scene{position:absolute;z-index:1;left:0;top:0;width:100%;pointer-events:none;visibility:hidden}
.gl .scene{visibility:visible}
.gl .ltr{-webkit-text-fill-color:transparent;-webkit-text-stroke-width:0!important;animation:none}
.bl{display:inline-block;width:0;height:0}
.side{position:absolute;z-index:3;left:50%;top:calc(var(--pad) + (var(--inkh) - .115)*var(--em));width:min(var(--pw),100% - 28px);transform:translateX(-50%) scale(var(--ds));transform-origin:50% 0}
.device{position:relative;animation:dock .9s var(--out) .35s backwards}
@keyframes dock{from{transform:translateY(70vh)}to{transform:none}}
.panel{height:var(--dh);border-radius:16px;overflow:hidden;background:#101013;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.panel[data-skin=light]{background:#E6E6EB;box-shadow:0 0 0 1px var(--line)}
.ghost{position:absolute;z-index:5;left:0;top:0;width:26px;height:26px;margin:-3px 0 0 -6px;pointer-events:none;opacity:0;transform:translate(250px,220px);transition:transform .9s var(--out),opacity .2s linear}
.ghost svg{display:block;width:26px;height:26px;fill:#FFFFFF;stroke:#0C0C0D;stroke-width:1.5;stroke-linejoin:round}
.ghost.on{opacity:1}
.ghost.tap svg{transform:scale(.84);transform-origin:20% 10%}
/* Two notes in the lower corners of the artboard: what to do, and what the page wears now. They start on one line,
   and the list of colors keeps room for five, so nothing moves when a palette with fewer colors comes on. */
.notes{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between;align-items:flex-start;color:var(--on);pointer-events:none}
.note-l,.note-r{width:calc(50% - var(--pw)*var(--ds)/2 - var(--pad)*.75);pointer-events:auto}
.note-h{margin-top:10px;font:700 clamp(23px,2.6vw,36px)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.caption{margin-top:12px;max-width:31ch;font-size:16px;line-height:1.45}
.caption b{font-weight:600}
.caption i{font-style:normal;display:inline-block;width:.85em;height:.85em;margin:0 .45em 0 .15em;vertical-align:-.08em;box-shadow:0 0 0 1.5px var(--on)}
.w-src{margin-top:8px}
.w-list{margin-top:14px;min-height:165px}
.w-list li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;column-gap:11px;align-items:center;height:33px;border-top:1px solid var(--on-line);font-size:14.5px;line-height:1.25}
.w-list i{display:block;width:14px;height:14px;box-shadow:0 0 0 1.5px var(--on)}
.w-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-list b{font:500 12px/1 var(--mono);letter-spacing:.02em}
@media (min-width:1480px){.stage{--ds:1.15}}

/* Sections */
.sec{padding-top:clamp(96px,11vw,170px)}
.sec-head{width:min(100% - 2*var(--gx),900px);margin:0 auto;text-align:center}
.sec-head .label{color:var(--grey)}
.h2{margin-top:14px;font:700 clamp(34px,4.8vw,68px)/1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.sub{margin:18px auto 0;max-width:33em;font:400 clamp(16.5px,1.42vw,19.5px)/1.45 var(--text);color:var(--grey);text-wrap:balance}

/* Inside Illustrator: the capture grows to full size as it comes up the screen */
.media{width:min(100% - 2*var(--gx),1400px);margin:clamp(36px,4.4vw,64px) auto 0}
.media-card{border-radius:var(--r);overflow:hidden;background:#323232;transform:scale(calc(.88 + .12*var(--v,1)));transform-origin:50% 100%}
.media-card img{width:100%;height:auto}
.media figcaption{margin-top:14px;text-align:center;color:var(--grey)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,72px)}
.feat{display:flex;flex-direction:column;padding:clamp(20px,3vw,40px)}
.feat .label{color:var(--grey)}
.feat .label b{margin-right:10px;font-weight:500;color:var(--ink)}
.feat h3{margin-top:14px;max-width:16em;font:700 clamp(24px,2.35vw,32px)/1.04 var(--display);letter-spacing:-.02em;text-wrap:balance}
.feat>p:not(.label){margin-top:12px;margin-bottom:clamp(24px,2.8vw,38px);max-width:40ch;font-size:16.5px;color:var(--grey)}
/* A tray in one color of the palette the page wears. The panel screen slides into it with the scroll. */
.tray{position:relative;margin-top:auto;height:clamp(250px,25vw,330px);border-radius:20px;overflow:hidden;background:var(--tray)}
.tray img{position:absolute;left:50%;top:28px;width:min(340px,100% - 36px);max-width:none;height:auto;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.2);transform:translate(-50%,calc((1 - var(--v,1))*48px))}
.tray.low img{top:auto;bottom:28px;transform:translate(-50%,calc((1 - var(--v,1))*-48px))}

/* Library: two belts of palettes that never stop, and chips that choose what rides on them */
.chips{display:flex;flex-wrap:wrap;justify-content:center;width:min(100% - 2*var(--gx),1000px);margin:clamp(26px,3vw,40px) auto 0}
.chips button{display:inline-flex;align-items:center;height:38px;margin:4px;padding:0 14px;border:0;border-radius:12px;background:var(--card);font:500 14px/1 var(--text);white-space:nowrap}
.chips button span{margin-left:8px;font:500 11.5px/1 var(--mono);color:var(--grey)}
.chips button:hover,.chips button[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}
.chips button:hover span,.chips button[aria-pressed=true] span{color:var(--on-ink-dim)}
.belts{margin-top:clamp(26px,3.2vw,46px);overflow:hidden}
.belt{overflow:hidden}
.belt+.belt{margin-top:14px}
.track{display:flex;width:max-content;animation:belt var(--dur,400s) linear infinite}
.belt.back .track{animation-direction:reverse}
.belts:hover .track{animation-play-state:paused}
@keyframes belt{to{transform:translateX(calc(var(--set,0px)*-1))}}
.pc{flex:none;width:248px;margin-right:14px;padding:10px;border-radius:22px;background:var(--card)}
.pc-media{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0C0A09}
.pc-media img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.pc-media.clash{background:var(--a)}
.pc-media i{position:absolute;display:block}
.pc-media .q{left:0;bottom:0;width:43.7%;aspect-ratio:1;border-radius:0 100% 0 0;background:var(--b)}
.pc-media .o{right:9%;top:13%;width:37.8%;aspect-ratio:1;border-radius:50%;background:var(--c)}
.pc-media .k{right:0;bottom:0;width:50%;height:10%;background:var(--d)}
.pc-strip{display:flex;height:22px;margin-top:8px;border-radius:7px;overflow:hidden}
.pc-strip i{display:block;min-width:0}
.pc-meta{padding:11px 6px 6px}
.pc-meta b{display:block;font:700 17px/1.15 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-meta span{display:block;margin-top:5px;font:500 10.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-meta span+span{margin-top:3px;color:var(--grey2)}

/* The whole library, on black. Without script it is a plain closing line. */
.wall{position:relative;margin-top:clamp(96px,11vw,170px);background:var(--black);color:var(--white)}
.wall-pin{position:relative;padding:clamp(72px,9vw,130px) var(--gx)}
.wall-c,.wall-tl,.wall-tr,.wall-cap{display:none}
.wall .h2{margin:0;max-width:11em;font-size:clamp(30px,4vw,56px)}
.wall .cta{justify-content:flex-start;margin-top:22px}
.js .wall{height:350vh}
.js .wall-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:500px;padding:0;overflow:hidden}
.js .wall-c{display:block;position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;touch-action:pan-y}
/* The two labels sit on tags of the section's own black: readable over the tiles, plain text once the wall has pulled back. */
.js .wall-tl,.js .wall-tr{display:block;position:absolute;z-index:2;top:calc(25px + env(safe-area-inset-top,0px));padding:9px 12px;border-radius:10px;background:var(--black);color:var(--grey-d)}
.js .wall-tl{left:calc(var(--gx) - 12px)}
.js .wall-tr{right:calc(var(--gx) - 12px)}
.wall-tr b{font-weight:500;color:var(--white)}
.js .wall-end{position:absolute;z-index:2;left:var(--gx);right:var(--gx);bottom:calc(clamp(20px,3.6vh,40px) + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;clip-path:inset(-8px calc((1 - var(--e,1))*100%) -8px -8px)}
.js .wall-cap{display:block;flex:none;width:min(42%,440px);margin-left:32px}
.wall-cap .label{color:var(--grey-d)}
.wall-name{margin-top:8px;font:700 clamp(20px,1.9vw,27px)/1.1 var(--display);letter-spacing:-.02em}
.wall-src{margin-top:6px;color:var(--grey-d)}
.wall-chips{display:flex;flex-wrap:wrap;min-height:26px;margin:10px -7px 0}
.wall-chips span{display:inline-flex;align-items:center;margin:4px 7px;font:500 12px/1 var(--mono);letter-spacing:.02em}
.wall-chips i{width:14px;height:14px;margin-right:6px;box-shadow:0 0 0 1px var(--line-d)}

/* Install */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(36px,4.4vw,64px)}
.steps li{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px)}
.steps b{font:800 clamp(64px,7vw,104px)/.8 var(--display);letter-spacing:-.04em;color:var(--acc)}
.steps h3{margin-top:24px;font:700 clamp(22px,2.1vw,29px)/1.05 var(--display);letter-spacing:-.02em}
.steps p{margin-top:10px;max-width:34ch;font-size:16.5px;color:var(--grey)}
.steps .step-act{margin-top:auto;padding-top:24px;max-width:none;color:var(--ink)}
.steps .note{margin-top:14px;max-width:30ch;font-size:11.5px;color:var(--grey)}
.spec{display:flex;flex-wrap:wrap;margin-top:20px;padding:clamp(8px,1.2vw,16px) clamp(22px,2.6vw,36px);border-radius:var(--r);background:var(--card)}
.spec div{flex:1 1 170px;padding:14px 16px 14px 0}
.spec dt{color:var(--grey)}
.spec dd{margin-top:6px;font:700 18px/1.2 var(--display);letter-spacing:-.02em}

/* Questions */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:start;margin-top:clamp(36px,4.4vw,64px)}
.qa-col{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.faq details{border-radius:22px;padding:0 24px}
.faq details:hover{background:var(--raise)}
.faq summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;padding:20px 0;font:700 clamp(18px,1.55vw,21px)/1.15 var(--display);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{min-width:0}
.faq summary::after{content:"+";flex:none;margin-left:18px;font:500 22px/1 var(--mono);color:var(--grey)}
.faq details[open] summary::after{content:"\2212"}
.qa details p{padding:0 30px 22px 0;max-width:60ch;overflow-wrap:break-word;font-size:16px;color:var(--ink2)}
.credits{margin-top:12px}
.credits summary{justify-content:flex-start}
.credits-n{margin-left:auto;font-weight:500;color:var(--grey);text-align:right}
.credits-note{max-width:62ch;padding-bottom:20px;font-size:15.5px;color:var(--ink2)}
.credits-list{padding-bottom:24px;columns:2;column-gap:40px}
.credits-list li{break-inside:avoid;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink2)}
.credits-list b{display:block;font-weight:600;color:var(--ink)}
.credits-list a{text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:3px}
.credits-list a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}

/* Footer */
.foot{padding:clamp(96px,11vw,170px) var(--gx) calc(var(--gx) + env(safe-area-inset-bottom,0px))}
.foot-card{max-width:1560px;margin:0 auto;padding:clamp(26px,4vw,56px);border-radius:var(--r);background:var(--ink);color:var(--ground)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:-8px}
.foot-top>*{margin:8px}
.foot-mark svg{display:block;width:120px;height:45px;fill:var(--ground)}
.foot-line{margin-top:clamp(28px,4vw,56px);font:700 clamp(22px,2.4vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.foot-mail{margin-top:10px;font-size:16px;color:var(--inv-soft)}
.foot-legal{margin-top:22px;max-width:78ch;font-size:13px;line-height:1.5;color:var(--inv-dim)}

/* Narrow windows and phones */
@media (max-width:900px){
  .nav{left:var(--gx);right:var(--gx);transform:none;justify-content:space-between}
  .nav-links{display:none}
  .hero{padding-top:calc(104px + env(safe-area-inset-top,0px))}
  .kicker{font-size:14px}
  .h1{margin-top:18px;font-size:clamp(40px,11.4vw,64px)}
  .stage{--dh:500px;--hang:56px}
  .notes{position:static;display:grid;grid-template-columns:1fr 1fr;gap:30px 28px;margin-top:calc(var(--hang) + 34px);color:var(--ink);--on:var(--ink);--on-line:var(--line)}
  .note-l,.note-r{width:auto}
  .note-h{font-size:clamp(24px,6.4vw,32px)}
  .w-list{min-height:0}
  .cards,.steps,.qa{grid-template-columns:minmax(0,1fr)}
  .cards{gap:14px}
  .steps{gap:14px}
  .media-card{aspect-ratio:5/4;border-radius:22px}
  .media-card img{height:100%;object-fit:cover;object-position:86% 0}
  .chips{flex-wrap:nowrap;justify-content:flex-start;width:auto;padding:0 calc(var(--gx) - 4px);overflow-x:auto;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none}
  .pc{width:214px}
  .js .wall-tl,.js .wall-tr{top:calc(79px + env(safe-area-inset-top,0px))}
  .js .wall-end{display:block}
  .js .wall-cap{width:auto;margin:18px 0 0}
  .wall-cap .label,.wall-chips{display:none}
  .wall-name,.wall-src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wall .cta{margin-top:16px}
  .wall .btn{height:52px}
  .credits-list{columns:1}
  .credits summary{flex-wrap:wrap}
  .credits-h{flex:1}
  .credits-n{flex-basis:100%;order:3;margin:6px 0 0;text-align:left}
  .qa details p{padding-right:0}
}
@media (max-width:600px){
  .stage{--pad:14px}
  .notes{grid-template-columns:1fr}
  .facts li{margin:2px 8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .track,.btn-acc::before{animation:none}
  .belt{overflow-x:auto}
  .js .wall{height:auto}
  .js .wall-pin{position:relative}
}