/* Gnomad v5: the owner's manual. Paper and ink, the FM-1 drawn to scale, real screens at true pixels. */

@font-face{font-family:"Zen Maru Gothic";src:url(/fonts/zen-maru-gothic-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Zen Maru Gothic";src:url(/fonts/zen-maru-gothic-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Zen Maru Gothic";src:url(/fonts/zen-maru-gothic-black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#EEEDE8; --raised:#F9F8F4; --well:#E3E2DC;
  --ink:#17181B; --ink-2:#55575C; --ink-3:#6E7075;
  --rule:rgba(23,24,27,.14); --rule-2:rgba(23,24,27,.28);
  --panel:#17181B; --on-panel:#EEEDE8; --on-panel-2:#B4B6BB; --panel-rule:rgba(238,237,232,.18); --panel-line:rgba(238,237,232,.45);
  --k1:#2352E6; --k2:#0B7D4F; --k3:#F4B400; --k4:#F2622A;
  --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(20px,5vw,72px);
  --max:1240px;
  --sec:clamp(96px,11vw,168px);
  --t-display:clamp(2.75rem,1.45rem + 4.9vw,5.5rem);
  --t-h2:clamp(2.125rem,1.45rem + 2.5vw,3.5rem);
  --t-h3:1.3125rem;
  --t-lede:clamp(1.1875rem,1.06rem + .48vw,1.4375rem);
  --t-body:clamp(1.0625rem,1.02rem + .18vw,1.1875rem);
  --t-small:.9375rem;
  --t-mono:.8125rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --bar-h:68px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141518; --raised:#1C1E22; --well:#2B2D32;
    --ink:#EEEDE8; --ink-2:#ACAEB3; --ink-3:#8C8E93;
    --rule:rgba(238,237,232,.13); --rule-2:rgba(238,237,232,.3);
    --panel:#EEEDE8; --on-panel:#17181B; --on-panel-2:#55575C; --panel-rule:rgba(23,24,27,.16); --panel-line:rgba(23,24,27,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141518; --raised:#1C1E22; --well:#2B2D32;
  --ink:#EEEDE8; --ink-2:#ACAEB3; --ink-3:#8C8E93;
  --rule:rgba(238,237,232,.13); --rule-2:rgba(238,237,232,.3);
  --panel:#EEEDE8; --on-panel:#17181B; --on-panel-2:#55575C; --panel-rule:rgba(23,24,27,.16); --panel-line:rgba(23,24,27,.4);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 16px);background:var(--paper);scrollbar-color:var(--ink-3) var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:500;font-size:var(--t-body);line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
p,ul,ol,dl,dd,figure{margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--rule-2);transition:text-decoration-color .2s}
a:hover{text-decoration-color:currentColor}
strong{font-weight:700}
::selection{background:var(--k3);color:#17181B}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* Shared drawing classes (the Gnome, the logo) */
.ln{fill:none;stroke:#17181B;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kl{stroke:#17181B;stroke-width:1.35;stroke-linejoin:round}
.f1{fill:var(--k1)}.f2{fill:var(--k2)}.f3{fill:var(--k3)}.f4{fill:var(--k4)}
.fs{fill:#F9F8F4}.fi{fill:#17181B}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Top bar ---------- */
.bar{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;gap:28px;min-height:var(--bar-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:1.3rem;letter-spacing:-.01em;line-height:1;margin-right:auto;min-height:44px}
.logo{width:28px;height:32px}
.lg-l{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.lg-hat{fill:var(--k4)}
.lg-d{stroke:var(--ink);stroke-width:3.5}
.nav{display:flex;gap:4px}
.nav a,.menu-nav a{font-weight:700;font-size:.9375rem;text-decoration:none;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;color:var(--ink-2);transition:color .2s,background-color .2s}
.nav a:hover,.menu-nav a:hover{color:var(--ink);background:var(--well)}
.nav a[aria-current=page]{color:var(--ink);background:var(--well)}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--rule-2);border-radius:999px;font-weight:700;font-size:.9375rem;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-nav{position:absolute;right:0;top:calc(100% + 10px);display:grid;min-width:220px;padding:8px;background:var(--raised);border:1px solid var(--rule-2);border-radius:18px}
.menu-nav a{color:var(--ink);padding:0 14px;min-height:48px}
@media (max-width:1079px){.nav{display:none}.menu{display:block}.bar-in{gap:10px}}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:1.5px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn .i{transition:transform .35s var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:color-mix(in srgb,var(--ink) 84%,var(--paper))}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--raised)}
.btn-paper{background:var(--on-panel);color:var(--panel)}
.btn-paper:hover{background:color-mix(in srgb,var(--on-panel) 86%,var(--panel))}
.btn-line-paper{border-color:var(--panel-line);color:var(--on-panel)}
.btn-line-paper:hover{border-color:var(--on-panel)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9375rem}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta.center{justify-content:center}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;min-height:44px}
.go .i{transition:transform .35s var(--ease)}
.go:hover .i{transform:translateX(3px)}
.tag{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;border:1px dashed currentColor;border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:.15em}
.key,kbd{font-family:var(--mono);font-weight:500;font-size:.8em;letter-spacing:.03em;border:1px solid currentColor;border-radius:6px;padding:.08em .42em;white-space:nowrap;line-height:1.5;vertical-align:.06em}

/* ---------- Real screens: always pre-scaled, shown at whole multiples ---------- */
/* Each capture ships at 1x/2x/3x/4x/6x (nearest-neighbour), so srcset lands on an exact device-pixel match.
   Where the device-pixel ratio is a whole number, nearest-neighbour is pinned too. */
.lcd{display:inline-block;vertical-align:top;background:#F9F8F4;border:1.5px solid #17181B;border-radius:14px;padding:8.5px}
.lcd img{display:block;width:240px;height:auto;border-radius:3px;background:#17181B}
@media (resolution:1dppx),(resolution:2dppx),(resolution:3dppx){
  .lcd img,.dev-scr img,.bezel-glass img{image-rendering:pixelated}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(36px,5vw,72px) clamp(72px,9vw,128px)}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 64px;align-items:start}
@media (min-width:1000px){.hero-top{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:48px}}
@media (min-width:1280px){.hero-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px}}
.hero h1{font-size:var(--t-display);line-height:.98;letter-spacing:-.03em;max-width:13ch}
.hero-side{display:grid;gap:24px;padding-top:10px}
.lede{font-size:var(--t-lede);line-height:1.5;max-width:30ch;color:var(--ink)}
.status{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:var(--t-small);color:var(--ink-2)}
.status li{position:relative;padding-left:19px}
.dot{position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;border:1.25px dashed var(--ink-2)}
.dot.on{background:var(--k2);border:1.25px solid var(--ink)}
.credit{margin-top:28px;font-size:var(--t-small);color:var(--ink-2);max-width:62ch}
.credit strong{color:var(--ink)}

/* The plate: the FM-1 drawn so its screen window is exactly --lcd wide */
.plate{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr);gap:36px 56px;align-items:center}
.plate-view{--lcd:240px;--cx:430;overflow:clip;margin-inline:calc(-1*var(--gutter));padding-block:4px 36px;margin-bottom:-32px}
.dev{position:relative;width:calc(var(--lcd)*860/240);aspect-ratio:860/560;margin-left:calc(50% - var(--lcd)*var(--cx)/240)}
.fm1{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.d-body{fill:#F9F8F4;stroke:#17181B;stroke-width:2}
.d-bed{fill:#EEEDE8;stroke:#17181B;stroke-width:1;stroke-opacity:.35}
.d-cap{fill:#F9F8F4;stroke:#17181B;stroke-width:1.75}
.d-cap2{fill:#E3E2DC;stroke:#17181B;stroke-width:1;stroke-opacity:.5}
.d-tick{stroke:#17181B;stroke-width:2.5;stroke-linecap:round}
.d-tick-p{stroke:#F9F8F4}
.d-well{fill:#E3E2DC;stroke:#17181B;stroke-width:1.25}
.d-col{stroke:#17181B;stroke-width:1.5}
.d-btn{fill:#F9F8F4;stroke:#17181B;stroke-width:1.5}
.d-key{fill:#F9F8F4;stroke:#17181B;stroke-width:1.5}
.d-key-b{fill:#E3E2DC}
.d-bezel{fill:#17181B}
.d-glass{fill:#000}
.d-lb{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.06em;fill:#17181B;text-anchor:middle}
.d-in{font-size:9px}
.d-mark circle{fill:#17181B}
.d-lead{stroke:#17181B;stroke-width:1;fill:none}
.d-mark text{font-family:var(--mono);font-weight:500;font-size:13px;fill:#F9F8F4;text-anchor:middle}
.dev-scr{position:absolute;left:calc(var(--lcd)*260/240);top:calc(var(--lcd)*34/240);width:var(--lcd);height:var(--lcd);overflow:hidden;background:#000}
.dev-scr img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.dev-scr img:first-child{opacity:1}
@media (min-width:1280px){
  .plate{grid-template-columns:860px minmax(0,1fr)}
  .plate-view{margin-inline:0;overflow:visible}
  .dev{margin-left:0}
}
@media (min-width:720px) and (max-width:959px){.dev{margin-left:calc(100% - var(--gutter) - var(--lcd)*860/240)}}
@media (max-width:719px){.plate-view{--lcd:120px}}
@media (max-width:719px) and (min-resolution:2.5dppx){.plate-view{--lcd:160px}}
@media (max-width:599px) and (min-resolution:2.5dppx){.plate-view{--cx:536.5}}
@media (max-width:719px) and (resolution:1dppx){.dev-scr img{image-rendering:auto}}
@media (max-width:599px) and (min-resolution:2.5dppx){.plate-view{--lcd:160px;--cx:536.5}}

.legend ol{list-style:none;padding:0;display:grid;gap:22px 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px) and (max-width:1279px){.legend ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.legend ol{grid-template-columns:minmax(0,1fr);gap:24px}}
.legend li{position:relative;padding-left:40px;font-size:var(--t-small);line-height:1.55;color:var(--ink-2)}
.legend li strong{display:block;color:var(--ink);font-size:1.0625rem;margin-bottom:2px}
.legend .n{position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.8125rem;display:grid;place-items:center;line-height:1}

@media (prefers-reduced-motion:no-preference){
  .dev-scr img{animation:cycle 12s steps(1,end) infinite}
  .dev-scr img:nth-child(2){animation-delay:3s}
  .dev-scr img:nth-child(3){animation-delay:6s}
  .dev-scr img:nth-child(4){animation-delay:9s}
  .d-algo .d-tick{transform-box:view-box;transform-origin:178px 198px;animation:algo 12s steps(1,end) infinite}
}
@keyframes cycle{0%{opacity:1}25%{opacity:0}100%{opacity:0}}
@keyframes algo{0%{transform:rotate(-54deg)}25%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}75%{transform:rotate(54deg)}}

/* ---------- Sections ---------- */
.sec{padding-block:var(--sec);border-top:1px solid var(--rule)}
.sec h2,.close h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.025em}
.intro{font-size:var(--t-lede);line-height:1.55;color:var(--ink-2);max-width:40ch}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.sec-head h2{max-width:14ch}
@media (min-width:1000px){.sec-head{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}.sec-head .intro{padding-bottom:6px}}
.sec-foot{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:center}
.sec-foot>p:first-child{color:var(--ink-2);font-size:var(--t-small);max-width:52ch}
.sec-foot .links{display:flex;flex-wrap:wrap;gap:0 28px}

/* Easy: six steps, a rail on phones and a grid above */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:56px 40px;grid-template-columns:repeat(auto-fill,minmax(259px,1fr))}
.step{counter-increment:step;display:flex;flex-direction:column;min-width:0}
.step .lcd{align-self:flex-start;margin-bottom:22px}
.step h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em;display:flex;align-items:baseline;gap:12px}
.step h3::before{content:counter(step);font-family:var(--mono);font-weight:500;font-size:.75rem;width:24px;height:24px;border-radius:50%;border:1px solid var(--ink);display:inline-grid;place-items:center;flex:none;transform:translateY(-2px)}
.step p{margin-top:8px;color:var(--ink-2);max-width:30ch;padding-left:36px}
.rail-hint{display:none;margin:-24px 0 20px;font-size:var(--t-small);color:var(--ink-2)}
@media (max-width:639px){.rail-hint{display:block}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(3,259px);justify-content:space-between;gap:72px 40px}}
@media (max-width:639px){
  .steps{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:259px;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:20px;scrollbar-width:thin}
  .step{scroll-snap-align:start}
}
.steps:focus-visible{outline-offset:6px;border-radius:12px}

/* The Gnome */
.sec-kids{background:var(--raised)}
.kids{display:grid;grid-template-columns:minmax(0,1fr);gap:48px 80px;align-items:center}
@media (min-width:900px){.kids{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.kids-stage{justify-self:center;width:min(100%,440px)}
.stage-disc{aspect-ratio:1;border-radius:50%;background:var(--k3);border:1.5px solid #17181B;padding:11% 20% 7%}
.stage-disc svg{width:100%;height:100%;overflow:visible}
.kids-copy h2{max-width:13ch}
.kids-copy .intro{margin-top:24px}
.kids-copy p+p{margin-top:16px;max-width:44ch}
.kids-copy .aside{font-size:var(--t-small);color:var(--ink-2);margin-top:28px;padding-top:16px;border-top:1px solid var(--rule);max-width:44ch}
.m{opacity:0}.mA{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .gnome.sing .m{animation:vowel 3s steps(1,end) infinite}
  .gnome.sing .mE{animation-delay:.6s}.gnome.sing .mI{animation-delay:1.2s}.gnome.sing .mO{animation-delay:1.8s}.gnome.sing .mU{animation-delay:2.4s}
  .gnome.sing .mE,.gnome.sing .mI,.gnome.sing .mO,.gnome.sing .mU{opacity:0}
  .gnome .tip{transform-box:fill-box;transform-origin:100% 100%;animation:bob 1.2s ease-in-out infinite alternate}
  .gnome .note{animation:float 3s cubic-bezier(.2,.7,.3,1) infinite;opacity:0}
  .gnome .n2{animation-delay:1s}.gnome .n3{animation-delay:2s}
  .gnome .breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 2.4s ease-in-out infinite alternate}
  .gnome.cheer .hop{animation:hop 1.6s cubic-bezier(.3,.7,.3,1) infinite}
}
@keyframes vowel{0%{opacity:1}20%{opacity:0}100%{opacity:0}}
@keyframes bob{from{transform:rotate(-6deg)}to{transform:rotate(5deg)}}
@keyframes float{0%{opacity:0;transform:translate(0,6px)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(6px,-26px)}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.02)}}
@keyframes hop{0%,60%,100%{transform:none}75%{transform:translateY(-4px)}}

/* See it: a magnified screen and its picker */
.see{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "screen" "picker";gap:40px 80px}
.see-head{grid-area:head}.see-screen{grid-area:screen}.picker{grid-area:picker}
@media (min-width:1100px){.see{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"screen head" "screen picker";grid-template-rows:auto 1fr;row-gap:36px}.see-head{align-self:end}}
.see-screen{justify-self:center}
.bezel{background:#17181B;border-radius:28px;padding:20px;width:fit-content}
.bezel-glass{--big:480px;position:relative;width:var(--big);height:var(--big);overflow:hidden;border-radius:4px;background:#000}
@media (max-width:699px){.bezel-glass{--big:240px}.bezel{padding:14px;border-radius:22px}}
@media (max-width:699px) and (min-resolution:2.5dppx){.bezel-glass{--big:320px}}
.bezel-glass img{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.bezel-glass .v-play{visibility:visible}
.see:has(input[value=pick]:checked) .v-play,.see:has(input[value=loop]:checked) .v-play,.see:has(input[value=drums]:checked) .v-play{visibility:hidden}
.see:has(input[value=pick]:checked) .v-pick,.see:has(input[value=loop]:checked) .v-loop,.see:has(input[value=drums]:checked) .v-drums{visibility:visible}
.see-head h2{max-width:12ch}
.see-head .intro{margin-top:20px}
.picker{border:0;padding:0;margin:0;align-self:start;min-width:0;display:grid;border-top:1px solid var(--rule)}
.opt{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:center;padding:16px 8px;border-bottom:1px solid var(--rule);cursor:pointer;color:var(--ink-2);transition:color .2s,background-color .2s;border-radius:2px}
.opt:hover{color:var(--ink);background:color-mix(in srgb,var(--raised) 70%,transparent)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt-disc{width:40px;height:40px;border-radius:50%;background:var(--well);border:1.25px solid var(--rule-2);display:grid;place-items:center}
.opt-disc::after{content:"";width:74%;aspect-ratio:1;border-radius:50%;border:1.25px solid #17181B;background:var(--c);transform:scale(.52);transition:transform .45s var(--ease)}
.k1{--c:var(--k1)}.k2{--c:var(--k2)}.k3{--c:var(--k3)}.k4{--c:var(--k4)}
.opt strong{color:var(--ink)}
.opt:has(input:checked){color:var(--ink)}
.opt:has(input:checked) .opt-disc{border-color:var(--ink)}
.opt:has(input:checked) .opt-disc::after{transform:none}
.opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* Deep */
.deep{display:grid;grid-template-columns:minmax(0,1fr);gap:56px 72px;align-items:center}
@media (min-width:1100px){.deep{grid-template-columns:minmax(0,1fr) auto}}
.spec{border-top:1px solid var(--rule-2)}
.spec div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.spec dt{font-weight:700;font-size:1.125rem}
.spec dd{margin:0;color:var(--ink-2)}
@media (max-width:519px){.spec div{grid-template-columns:minmax(0,1fr)}}
.deep-shots{display:flex;flex-wrap:wrap;gap:32px;justify-content:center}
.deep-shots figure{display:grid;gap:14px}
figcaption{font-size:var(--t-small);color:var(--ink-2);line-height:1.45}
figcaption strong{color:var(--ink)}

/* Try it now: the one ink panel */
.sec-try{border-top:0;padding-block:clamp(24px,4vw,48px)}
.try{background:var(--panel);color:var(--on-panel);border-radius:clamp(24px,3vw,36px);padding:clamp(28px,6vw,88px);display:grid;grid-template-columns:minmax(0,1fr);gap:56px 80px}
@media (min-width:1000px){.try{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}}
.try :focus-visible{outline-color:var(--on-panel)}
.try h2{max-width:12ch}
.try a:not(.btn){text-decoration-color:var(--panel-line)}
.try a:not(.btn):hover{text-decoration-color:currentColor}
.try .first{font-size:var(--t-lede);line-height:1.5;margin-top:24px;max-width:36ch}
.num-steps{list-style:none;padding:0;margin:32px 0 0;counter-reset:n;display:grid;border-top:1px solid var(--panel-rule)}
.num-steps li{counter-increment:n;position:relative;padding:16px 0 16px 40px;border-bottom:1px solid var(--panel-rule)}
.num-steps li::before{content:counter(n);position:absolute;left:0;top:19px;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-family:var(--mono);font-size:.75rem;line-height:1}
.try .cta{margin-top:36px}
.try .note{margin-top:18px;color:var(--on-panel-2);font-size:var(--t-small);max-width:52ch}
.try .note strong{color:var(--on-panel)}
.try-side{display:grid;gap:32px;align-content:start;min-width:0}
.splash{display:grid;gap:14px;justify-items:start}
.splash figcaption{color:var(--on-panel-2)}
.lcd-splash{background:#17181B;border-color:var(--panel-rule);padding:12px;border-radius:18px}
.need{border-top:1px solid var(--panel-rule)}
.need div{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--panel-rule);font-size:var(--t-small)}
.need dt{color:var(--on-panel-2)}
.need dd{margin:0}
.try-side .note{margin-top:0}

/* Lessons: the coming app */
.lessons{display:grid;grid-template-columns:minmax(0,1fr);gap:56px 80px;align-items:center}
@media (min-width:1000px){.lessons{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.lessons-copy h2{max-width:14ch}
.lessons-copy .intro{margin-top:24px}
.kids-pack{margin-top:18px;color:var(--ink-2);max-width:46ch}
.coming{margin-top:40px;border:1.25px dashed var(--ink-2);border-radius:24px;padding:clamp(22px,3vw,32px);display:grid;gap:12px;max-width:40rem}
.coming-h{font-size:1.1875rem;line-height:1.35;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.coming p:not(.coming-h){color:var(--ink-2);max-width:46ch}
.coming .cta{margin-top:8px}
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);justify-self:center;width:min(100%,560px);align-items:start}
.phones figure{display:grid;gap:14px}
.phones figure:nth-child(2){margin-top:48px}
.phone{background:#F9F8F4;border:1.5px solid #17181B;border-radius:clamp(26px,3.4vw,38px);padding:clamp(5px,.7vw,8px)}
.phone img{width:100%;height:auto;border-radius:clamp(21px,2.8vw,31px)}

/* Close */
.close{padding-block:var(--sec);border-top:1px solid var(--rule);background:var(--raised)}
.close-in{display:grid;justify-items:center;text-align:center;gap:24px}
.close-disc{width:min(40vw,150px);aspect-ratio:104/160}
.close-disc svg{width:100%;height:100%;overflow:visible}
.close h2{max-width:14ch}
.close p{color:var(--ink-2);max-width:42ch;font-size:var(--t-lede);line-height:1.5}
.close .cta{margin-top:8px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(56px,7vw,88px) 40px;font-size:var(--t-small);color:var(--ink-2)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 64px}
@media (min-width:900px){.foot-top{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.foot-brand p{margin-top:16px;line-height:1.55}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
.foot-nav h2{font-weight:700;font-size:var(--t-small);color:var(--ink);margin-bottom:8px}
.foot-nav ul{list-style:none;padding:0;display:grid;gap:2px}
.foot-nav a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.foot-nav a:hover{text-decoration:underline;text-decoration-color:var(--ink)}
.foot-fine{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);display:grid;gap:8px;font-size:.875rem;line-height:1.6}
.foot-fine p:first-child{max-width:80ch}

/* ---------- Inner pages: how-to, map, privacy ---------- */
.page-head{padding-block:clamp(40px,7vw,96px) clamp(48px,6vw,80px)}
.page-head h1{font-size:var(--t-display);line-height:.98;letter-spacing:-.03em;max-width:12ch}
.page-head .lede{margin-top:28px;max-width:44ch}
.page-head .note{margin-top:18px;color:var(--ink-2);font-size:var(--t-small);max-width:56ch}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule-2);border-radius:999px;font-weight:700;font-size:.9375rem;text-decoration:none;transition:background-color .2s,border-color .2s}
.jump a:hover{border-color:var(--ink);background:var(--raised)}
.crib{padding-bottom:var(--sec)}
.crib h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);letter-spacing:-.02em;line-height:1.15;max-width:24ch}
.crib-list{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule-2)}
@media (min-width:760px){.crib-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
.crib-list div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.crib-list dd{text-align:right}
.crib-list dt{color:var(--ink-2)}
.crib-list dd{margin:0;font-weight:700}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px 80px;align-items:start}
@media (min-width:960px){.how-grid{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:960px){.how-shots{flex-wrap:nowrap}}
.how h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.025em;max-width:14ch}
.how .intro{margin-top:20px}
.how .sec-head .intro{margin-top:0}
.how-steps{list-style:none;padding:0;margin:32px 0 0;counter-reset:hs;display:grid;max-width:52ch;border-top:1px solid var(--rule)}
.how-steps li{counter-increment:hs;position:relative;padding:14px 0 14px 40px;border-bottom:1px solid var(--rule)}
.how-steps li::before{content:counter(hs);position:absolute;left:0;top:17px;width:24px;height:24px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:.75rem;line-height:1}
.tip{margin-top:20px;max-width:52ch;color:var(--ink-2);font-size:var(--t-small)}
.tip+.tip{margin-top:12px}
.how-shots{display:flex;flex-wrap:wrap;gap:28px;justify-content:center}
@media (min-width:960px){.how-shots{justify-content:flex-start}}
.how-shots figure{display:grid;gap:12px;max-width:259px}
.moves{list-style:none;padding:0;display:grid;gap:56px 40px;grid-template-columns:repeat(auto-fill,minmax(259px,1fr))}
@media (min-width:1180px){.moves{grid-template-columns:repeat(4,minmax(0,1fr))}}
.moves li{display:flex;flex-direction:column}
.moves .lcd{align-self:flex-start;margin-bottom:22px}
.moves h3{font-size:var(--t-h3);line-height:1.25}
.moves p{margin-top:8px;color:var(--ink-2);max-width:32ch}
.coming-list{list-style:none;padding:0;border-top:1px dashed var(--ink-2)}
.coming-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px;padding:28px 0;border-bottom:1px dashed var(--ink-2);align-items:baseline}
@media (min-width:900px){.coming-list li{grid-template-columns:minmax(0,18rem) minmax(0,1fr) auto}}
.coming-list h3{font-size:var(--t-h3);line-height:1.25}
.coming-list p{color:var(--ink-2);max-width:52ch}
.coming-list .tag{justify-self:start;color:var(--ink-2)}
.close.how-close .close-in{justify-items:start;text-align:left}

/* Map page */
.sheet-links{list-style:none;padding:0;margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:920px}
@media (min-width:760px){.sheet-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sheet-link{display:grid;gap:6px;height:100%;border:1px solid var(--rule-2);border-radius:22px;background:var(--raised);padding:22px 24px;text-decoration:none;transition:border-color .2s}
.sheet-link:hover{border-color:var(--ink)}
.sheet-link strong{font-size:1.3125rem;line-height:1.25;display:inline-flex;align-items:center;gap:10px}
.sheet-link span:last-child{color:var(--ink-2);font-size:var(--t-small);line-height:1.5}
.map-note{margin-top:24px;color:var(--ink-2);max-width:60ch;font-size:var(--t-small)}
.map-note .mono{font-family:var(--mono);color:var(--ink)}
.map-frame-wrap{padding-bottom:clamp(56px,7vw,96px)}
.map-sheet{display:grid}
.map-sheet-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:14px 0;border-top:1px solid var(--rule-2);font-size:var(--t-small);color:var(--ink-2)}
.map-sheet-bar a{color:var(--ink)}
.map-frame{display:block;width:100%;height:min(86vh,1100px);border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule-2);background:var(--paper)}
.map-phone{display:none}
@media (max-width:759px){.map-phone{display:block}}
@media (max-width:759px){.map-frame-wrap{display:none}}

/* Privacy and 404 */
.doc{padding-block:clamp(40px,7vw,96px) clamp(72px,9vw,128px)}
.doc-in{max-width:44rem}
.doc h1{font-size:var(--t-display);line-height:.98;letter-spacing:-.03em;max-width:11ch}
.doc .lede{margin-top:28px;max-width:40ch}
.doc h2{font-size:1.5rem;letter-spacing:-.015em;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
.doc ul{margin:16px 0 0;padding-left:1.1em;display:grid;gap:10px}
.doc ul li::marker{color:var(--ink-3)}
.doc p{margin-top:16px}
.doc .stamp{margin-top:56px;font-size:var(--t-small);color:var(--ink-2)}
.doc .cta{margin-top:32px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bezel{outline:1px solid var(--rule-2)}}
:root[data-theme="dark"] .bezel{outline:1px solid var(--rule-2)}

/* Below 960px the drawing is too small for markers: the legend reads as a plain list */
@media (max-width:719px){.d-mark,.legend .n{display:none}.legend li{padding-left:0}}
.bar .bar-cta{display:inline-flex}
@media (max-width:599px){.bar .bar-cta{display:none}}

/* The ten sound pictures, cut from the real screen (94 x 98 px native, shown at exactly 2x) */
.pics{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,188px);justify-content:space-between;gap:40px 24px}
.pics li{display:grid;gap:12px;justify-items:start}
.pics img{display:block;width:188px;height:auto;border-radius:14px}
.pics span{font-weight:700;font-size:1.0625rem}
@media (resolution:1dppx),(resolution:2dppx),(resolution:3dppx){.pics img{image-rendering:pixelated}}
@media (max-width:1079px){.pics{grid-template-columns:repeat(auto-fill,188px);justify-content:start}}
@media (max-width:639px){
  .pics{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:188px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:16px;scrollbar-width:thin}
  .pics li{scroll-snap-align:start}
}
.pics:focus-visible{outline-offset:6px;border-radius:12px}
.sec-pics{padding-bottom:calc(var(--sec)*.75)}
.status a{color:var(--ink)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 80px;align-items:start}
@media (min-width:1000px){.faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.faq-head{position:sticky;top:calc(var(--bar-h) + 32px)}}
.faq-head h2{max-width:13ch}
.faq-head .intro{margin-top:20px}
.qas{border-top:1px solid var(--rule-2)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:var(--t-h3);line-height:1.3}
.qa summary::after{content:"";width:12px;height:12px;flex:none;border-right:1.75px solid var(--ink);border-bottom:1.75px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease)}
.qa[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.qa summary:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.qa-a{padding:0 0 26px;color:var(--ink-2);max-width:62ch}
.faq-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:14px;font-weight:700}
.faq-links a{color:var(--ink)}

/* ---------- v5.1: Kyle's picks from the Gemini version ---------- */
:root{--t-hero:clamp(3.1rem,1.1rem + 6.2vw,6.75rem)}
.hero-top{grid-template-areas:"eye" "h1" "side";row-gap:0}
.eyebrow{grid-area:eye;justify-self:start;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule-2);border-radius:999px;padding:6px 14px 6px 10px;margin-bottom:22px;background:var(--raised)}
.knob-dots{display:inline-flex;gap:4px}
.knob-dots i{width:8px;height:8px;border-radius:50%;background:var(--c);border:1px solid #17181B}
.hero h1{grid-area:h1;font-size:var(--t-hero);line-height:.92;letter-spacing:-.04em;max-width:12ch}
.hero-side{grid-area:side;margin-top:32px}
@media (min-width:1000px){.hero-top{grid-template-areas:"eye ." "h1 side";align-items:end}.hero-side{margin-top:0;padding-bottom:8px}}
.pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--raised);font-weight:700;font-size:.875rem;line-height:1.2}
.pill .dot{position:static;width:9px;height:9px}
.pill-coming{border-style:dashed;background:transparent}
.btn-blue{background:var(--k1);color:#F9F8F4}
.btn-blue:hover{background:#1A43C8}
.btn-blue:focus-visible{outline-color:var(--ink)}

/* What makes it different: three cards, knob-colour top rule */
.pillars{list-style:none;padding:0;margin:clamp(48px,6vw,80px) 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.pillar{background:var(--raised);border:1px solid var(--rule);border-top:4px solid var(--c);border-radius:6px 6px 18px 18px;padding:24px 24px 28px}
.pillar-num{display:block;font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.pillar h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.015em}
.pillar p{margin-top:10px;color:var(--ink-2);font-size:var(--t-small);line-height:1.6}

/* The Gnome: one big panel */
.sec-kids{background:transparent}
.kids{background:var(--raised);border:1px solid var(--rule);border-radius:clamp(24px,3vw,40px);padding:clamp(28px,6vw,88px)}
@media (min-width:900px){.kids{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.kids-stage{width:min(100%,480px)}
.kids-copy h2{font-size:clamp(2.4rem,1.5rem + 3vw,4.25rem);line-height:1;max-width:11ch}

/* Dark mode: frames around real screens become dark bezels, so nothing glows white around a screen */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lcd{background:#0E0F11;border-color:var(--rule-2)}:root:not([data-theme="light"]) .phone{background:#0E0F11;border-color:var(--rule-2)}}
:root[data-theme="dark"] .lcd{background:#0E0F11;border-color:var(--rule-2)}
:root[data-theme="dark"] .phone{background:#0E0F11;border-color:var(--rule-2)}

/* ---------- v5.2: the playable FM-1, tactile controls, motion ---------- */
/* Controls are built by /site.js over the drawing; without the script the drawing is a picture. */
.dev-controls{position:absolute;inset:0;z-index:2}
.dk,.dpick{position:absolute;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dk:focus-visible,.dpick:focus-visible,.dknob:focus-visible{outline:2.5px solid var(--k1);outline-offset:2px}
.dknob{position:absolute;border-radius:50%;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s var(--ease)}
.dknob[data-c="1"]{--c:var(--k1)}.dknob[data-c="2"]{--c:var(--k2)}.dknob[data-c="3"]{--c:var(--k3)}.dknob[data-c="4"]{--c:var(--k4)}
.dknob:hover,.dknob:focus-visible,.dknob.turning{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 32%,transparent)}
.dknob.turning{cursor:grabbing}
.d-cknob{transition:transform .12s ease-out}
.d-algo .d-tick{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.d-key{transform-box:fill-box;transition:transform 70ms ease-out,fill 70ms ease-out}
.d-key.down{transform:translateY(3px) scaleY(.985);fill:#E3E2DC}
.d-key-b.down{fill:#BDBCB6}
.dk:hover{background:rgba(23,24,27,.04)}
.dev.live .dev-scr img:not(.live){display:none}
.dev-scr img.live{opacity:1;animation:none}
.dev.live .d-algo .d-tick{animation:none}
.dpick:hover{background:rgba(35,82,230,.06)}

/* the tilt: perspective, a moving soft shadow and a light sheen; flat (and pixel-exact) at rest */
.dev{transform-origin:50% 55%;will-change:auto}
.dev.tilting{will-change:transform}
.dev::before{content:"";position:absolute;left:4%;right:4%;bottom:-2%;height:18%;border-radius:50%;background:rgba(23,24,27,.28);filter:blur(22px);transform:translate(var(--sx,0),var(--sy,8px));opacity:0;transition:opacity .4s var(--ease);z-index:-1;pointer-events:none}
.dev::after{content:"";position:absolute;inset:0;border-radius:4.6% / 7.1%;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:3}
.dev.tilting::before{opacity:.9}
.dev.tilting::after{opacity:.8}

/* the hint under the synth */
.synth-hint{margin-top:14px;font-size:var(--t-small);color:var(--ink-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
.synth-hint .sh-on{display:none;align-items:center;gap:10px;flex-wrap:wrap}
.synth-hint.on .sh-off{display:none}
.synth-hint.on .sh-on{display:inline-flex}
.sh-dot{width:9px;height:9px;border-radius:50%;background:var(--k2);box-shadow:0 0 0 4px color-mix(in srgb,var(--k2) 25%,transparent)}
.sh-mute{font:inherit;font-weight:700;color:var(--ink);background:var(--raised);border:1px solid var(--rule-2);border-radius:999px;min-height:36px;padding:0 14px;cursor:pointer}
@media (max-width:599px){.synth-hint{padding-inline:2px}}

/* tactile buttons: a raised edge, a spring press, a knob-colour glow ring */
.btn{--edge:rgba(0,0,0,.55);--glow:color-mix(in srgb,var(--k3) 45%,transparent);box-shadow:0 3px 0 var(--edge);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s cubic-bezier(.34,1.56,.64,1),background-color .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--edge),0 0 0 5px var(--glow)}
.btn:focus-visible{outline:0;box-shadow:0 3px 0 var(--edge),0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--edge),0 0 0 5px var(--glow);transition-duration:.06s}
.btn-blue{--edge:#0F2A80;--glow:color-mix(in srgb,var(--k1) 30%,transparent)}
.btn-line,.btn-line-paper{--edge:var(--rule-2)}
.btn-line{background:var(--raised)}
.btn-paper{--edge:#6E7075}
.btn-sm{box-shadow:0 2px 0 var(--edge)}
.jump a,.sheet-link,.sh-mute,.menu summary{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,background-color .2s,border-color .2s}
.jump a{box-shadow:0 2px 0 var(--rule-2)}
.jump a:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--rule-2),0 0 0 4px color-mix(in srgb,var(--k2) 25%,transparent)}
.jump a:active,.sh-mute:active{transform:translateY(2px);box-shadow:none}
.sheet-link:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(23,24,27,.45)}

/* feature cards lift and lean on hover */
.pillar{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pillar:hover{transform:perspective(900px) translateY(-6px) rotateX(3deg);box-shadow:0 22px 34px -22px rgba(23,24,27,.5)}

/* scroll motion: only elements the script marked (below the fold) wait, so nothing is hidden without JS */
.js .rv{opacity:0;transform:translateY(28px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(var(--i,0) * 70ms),transform .9s var(--ease) calc(var(--i,0) * 70ms)}
.js .pics li.rv{transform:perspective(700px) rotateY(-75deg) translateY(10px);transform-origin:50% 60%}
.js .pics li.rv.in{transform:none;transition:opacity .5s var(--ease) calc(var(--i,0) * 80ms),transform .8s cubic-bezier(.34,1.3,.64,1) calc(var(--i,0) * 80ms)}

/* the Gnome bobs, and sings an O when you point at him */
@media (prefers-reduced-motion:no-preference){
  .stage-disc .gnome.sing{animation:gbob 3.2s ease-in-out infinite}
  @keyframes gbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
.stage-disc{transition:transform .5s var(--ease)}
.stage-disc:hover{transform:scale(1.02) rotate(-1.5deg)}
.stage-disc:hover .gnome .m{animation:none;opacity:0}
.stage-disc:hover .gnome .mO{opacity:1}

@media (prefers-reduced-motion:reduce){
  .btn,.jump a,.sheet-link,.pillar,.stage-disc{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
  .btn:hover,.btn:active,.jump a:hover,.sheet-link:hover,.pillar:hover,.stage-disc:hover{transform:none}
  .d-key,.d-cknob,.d-algo .d-tick{transition:none}
}
.synth-hint{grid-column:1}
@media (min-width:1280px){.plate .legend{grid-column:2;grid-row:1 / span 2;align-self:center}.synth-hint{margin-top:4px}}