/* GraphBoard site. Tokens from brands/graphboard/DESIGN.md (dark default). No external requests. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;src:url(fonts/martian-mono-latin.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --room:#101713;--room-raised:#18221C;--room-high:#1F2B24;--grid:#2A372F;--edge:#6E8076;
  --chalk:#F1ECE1;--chalk-soft:#AEB9B1;
  --key:#FCFAF5;--key-side:#D5CCBA;--key-pressed:#EEE8DC;--app-key:#DBD4C8;--app-key-side:#A69D8A;--app-key-pressed:#CDC6B8;--app-hint:#4F554E;--ink:#1B1F1C;--ink-soft:#565C55;
  --forest:#1E3B32;--forest-side:#0B1510;
  --signal:#F2622E;--signal-hover:#F47A4C;--signal-deep:#C64A1C;--on-signal:#1B1F1C;--paper:#F3EFE6;
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fs-hero:clamp(3rem,1.6rem + 6vw,6rem);--fs-display:clamp(2.25rem,1.6rem + 3vw,3.5rem);--fs-h2:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);
  --fs-h3:1.25rem;--fs-lede:clamp(1.125rem,1rem + .4vw,1.25rem);--fs-body:1.0625rem;--fs-small:.875rem;--fs-label:.75rem;
  --r-xs:3px;--r-sm:6px;--r-key:10px;--r-md:14px;--r-lg:22px;
  --gutter:16px;--gutter-wide:40px;--shell:1240px;
  --key-shadow:inset 0 1px 0 #fff,inset 0 -4px 0 var(--key-side),0 1px 0 rgb(0 0 0 / .5),0 14px 24px -12px rgb(0 0 0 / .7);
  --key-shadow-down:inset 0 1px 0 #fff,inset 0 -1px 0 var(--key-side),0 1px 0 rgb(0 0 0 / .5),0 4px 8px -4px rgb(0 0 0 / .7);
  --mod-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 -4px 0 var(--forest-side),0 0 0 1px rgb(255 255 255 / .06),0 14px 24px -12px rgb(0 0 0 / .7);
  --mod-shadow-down:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 -1px 0 var(--forest-side),0 0 0 1px rgb(255 255 255 / .06),0 4px 8px -4px rgb(0 0 0 / .7);
  --signal-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -4px 0 var(--signal-deep),0 1px 0 rgb(0 0 0 / .5),0 10px 24px -12px rgb(242 98 46 / .22);
  --signal-shadow-down:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -1px 0 var(--signal-deep),0 1px 0 rgb(0 0 0 / .5),0 4px 12px -6px rgb(242 98 46 / .22);
  --object-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 40px 80px -40px rgb(0 0 0 / .8);
  --press:3px;
  --graph:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-pop:cubic-bezier(.34,1.4,.64,1);
  --t-press:110ms;--t-release:160ms;--t-color:140ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--room);color:var(--chalk);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;font-variation-settings:"opsz" 14;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
img,svg{display:block}
a{color:var(--chalk);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgb(241 236 225 / .5);transition:text-decoration-color var(--t-color) var(--ease-out)}
a:hover{text-decoration-color:var(--signal);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--key);color:var(--ink);padding:12px 16px;border-radius:var(--r-sm);font-weight:650;text-decoration:none}
.skip:focus{top:16px}
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:768px){.shell{padding-inline:var(--gutter-wide)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.hero-t{font-size:var(--fs-hero);font-weight:760;line-height:.92;letter-spacing:-.035em;font-variation-settings:"wdth" 82,"opsz" 96}
.disp{font-size:var(--fs-display);font-weight:740;line-height:.98;letter-spacing:-.03em;font-variation-settings:"wdth" 85,"opsz" 72}
.h2{font-size:var(--fs-h2);font-weight:720;line-height:1.05;letter-spacing:-.02em;font-variation-settings:"wdth" 90,"opsz" 48}
.h3{font-size:var(--fs-h3);font-weight:660;line-height:1.2;letter-spacing:-.01em;font-variation-settings:"opsz" 24}
.lede{font-size:var(--fs-lede);font-weight:420;line-height:1.45;font-variation-settings:"opsz" 20}
.small{font-size:var(--fs-body);line-height:1.5}
.muted{color:var(--chalk-soft)}
.label{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-variation-settings:"wdth" 87.5;line-height:1.3}
.sig{color:var(--signal)}
.tag{display:inline-flex;align-items:center;background:var(--room-high);color:var(--chalk-soft);padding:5px 8px;border-radius:var(--r-xs)}

/* buttons are keys */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px 4px;border-radius:var(--r-key);border:0;font:inherit;font-size:1rem;font-weight:650;font-variation-settings:"opsz" 16;line-height:1;text-decoration:none;cursor:pointer;transition:transform var(--t-release) var(--ease-pop),box-shadow var(--t-release) var(--ease-out),background-color var(--t-color) var(--ease-out)}
.btn svg{width:20px;height:20px;flex:none}
.btn-signal{background:var(--signal);color:var(--on-signal);box-shadow:var(--signal-shadow)}
.btn-key{background:var(--key);color:var(--ink);box-shadow:var(--key-shadow)}
@media (hover:hover){.btn-signal:not(:disabled):hover{background:var(--signal-hover);color:var(--on-signal)}.btn-key:hover{background:var(--paper);color:var(--ink)}}
.btn-signal:active{transform:translateY(var(--press));box-shadow:var(--signal-shadow-down);transition-duration:var(--t-press)}
.btn-key:active{transform:translateY(var(--press));box-shadow:var(--key-shadow-down);transition-duration:var(--t-press)}
.btn-quiet{background:var(--room-high);color:var(--chalk);box-shadow:inset 0 0 0 1px var(--edge),inset 0 -4px 0 var(--forest-side),0 10px 18px -12px rgb(0 0 0 / .7)}
@media (hover:hover){.btn-quiet:not(:disabled):hover{background:var(--forest);color:var(--chalk)}}
.btn-quiet:active{transform:translateY(var(--press));box-shadow:inset 0 0 0 1px var(--edge),inset 0 -1px 0 var(--forest-side),0 4px 8px -4px rgb(0 0 0 / .7);transition-duration:var(--t-press)}
.btn-sm{min-height:48px;padding:0 16px 4px;font-size:1rem}

/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:5}
.hero,.doc-hero{padding-top:76px}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;position:relative;z-index:5}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--chalk);text-decoration:none;font-weight:740;font-size:1.25rem;letter-spacing:-.02em;font-variation-settings:"wdth" 85,"opsz" 24;min-height:44px}
.brand svg{width:34px;height:34px}
.nav{display:flex;align-items:center;gap:8px}
.nav a:not(.btn){display:none;color:var(--chalk);font-weight:560;padding:12px 12px;border-radius:var(--r-sm)}
.nav a:not(.btn):hover{color:var(--chalk)}
.nav a[aria-current="page"]{text-decoration-color:var(--signal);text-decoration-thickness:2px}
@media (min-width:900px){.nav{gap:12px}.nav a:not(.btn){display:inline-block}}
.nav .keep{display:inline-block !important}

/* keyboard drawing: flat faces, 1px top highlight, darker lip, soft shadow (what an Android key drawable can do) */
.kb{display:grid;gap:var(--kgap,8px);padding:var(--kpad,12px);background:var(--room-high);border-radius:var(--r-md);box-shadow:var(--object-shadow)}
.kb-row{display:flex;gap:var(--kgap,8px);justify-content:center}
.k{--w:1;flex:var(--w) 1 0;min-width:0;height:var(--kh,46px);display:grid;place-items:center;padding-bottom:4px;border-radius:var(--r-key);background:var(--key);color:var(--ink);box-shadow:var(--key-shadow);font-family:var(--font);font-size:var(--kfs,1.0625rem);font-weight:560;font-variation-settings:"opsz" 24;line-height:1;position:relative}
.k.m{background:var(--forest);color:var(--chalk);box-shadow:var(--mod-shadow)}
.k.space{color:var(--ink-soft)}
.k.down{transform:translateY(var(--press));box-shadow:var(--key-shadow-down);background:var(--key-pressed)}
.k svg{width:1.15em;height:1.15em}
.k.half{flex:.5 1 0;visibility:hidden}
.strip{display:flex;justify-content:space-around;align-items:center;height:40px;font-size:.875rem;color:var(--chalk-soft)}
.strip b{color:var(--chalk);font-weight:650}
.strip i{width:1px;height:16px;background:var(--grid)}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px var(--room),0 0 0 9px rgb(242 98 46 / .22);transform:translate(-50%,-50%);z-index:3}

/* hero: the plotted tap */
.hero{position:relative;overflow:hidden;background:var(--graph);background-color:var(--room);border-bottom:1px solid var(--grid)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--room) 0,rgb(16 23 19 / .85) 38%,rgb(16 23 19 / .2) 70%,transparent);pointer-events:none}
.hero::after{content:"";position:absolute;right:-10%;top:10%;width:70%;height:90%;background:radial-gradient(closest-side,rgb(241 236 225 / .06),transparent);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.copy{padding:24px 0 48px;position:relative;z-index:3}
.copy h1{margin:16px 0 24px;max-width:11ch}
.copy .lede{max-width:40ch;color:var(--chalk)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.plot{position:relative;height:300px;border-radius:var(--r-lg);overflow:hidden;background:var(--graph);background-color:var(--room-high);box-shadow:var(--object-shadow),inset 0 0 0 1px var(--grid);margin-bottom:64px}
.plot .k{position:absolute;top:80px;width:120px;height:120px;font-size:2.8rem;border-radius:18px;padding-bottom:8px;
  box-shadow:inset 0 2px 0 #fff,inset 0 -7px 0 var(--key-side),0 2px 0 rgb(0 0 0 / .5),0 30px 40px -20px rgb(0 0 0 / .85)}
.plot .k.down{background:var(--key-pressed);transform:translateY(5px);box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 var(--key-side),0 2px 0 rgb(0 0 0 / .5),0 8px 14px -8px rgb(0 0 0 / .85)}
.plot .kj{left:calc(50% - 261px)}.plot .kk{left:calc(50% - 127px)}.plot .kl{left:calc(50% + 7px)}.plot .kx{left:calc(50% + 141px)}
.cross-h,.cross-v{position:absolute;background:rgb(110 128 118 / .55);z-index:2}
.cross-h{height:1px;left:0;right:0;top:140px}.cross-v{width:1px;top:0;bottom:0;left:50%}
.plot .dot{left:50%;top:140px;width:18px;height:18px}
.ann{position:absolute;z-index:4;white-space:nowrap;background:var(--room-raised);color:var(--chalk-soft);padding:8px 8px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--grid)}
.ann b{color:var(--chalk);font-weight:500}
.a1{left:14px;top:18px}.a2{left:14px;top:250px}
@media (min-width:1180px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:64px;align-items:start;padding-bottom:64px}
  .copy{padding:128px 0 0;align-self:start}
  .plot{height:480px;margin:48px 0 0}
  .plot .k{top:140px;width:200px;height:200px;font-size:4.4rem;border-radius:24px;padding-bottom:8px}
  .plot .kj{left:calc(52% - 433px)}.plot .kk{left:calc(52% - 211px)}.plot .kl{left:calc(52% + 11px)}.plot .kx{left:calc(52% + 233px)}
  .cross-h{top:240px}.cross-v{left:52%}
  .plot .dot{left:52%;top:240px;width:22px;height:22px}
  .a1{left:calc(52% - 16px);top:64px;transform:translateX(-100%)}.a2{left:calc(52% - 16px);top:392px;transform:translateX(-100%)}
}
/* the tap lands: once, on load */
@media (prefers-reduced-motion:no-preference){
  .plot .dot{animation:land 260ms var(--ease-out) 600ms both}
  .plot .kl{animation:keydown 110ms var(--ease-out) 860ms both}
  .cross-h,.cross-v{animation:fadein 320ms var(--ease-out) 300ms both}
  .ann{animation:fadein 320ms var(--ease-out) 1000ms both}
  .a2{animation-delay:1060ms}
}
@keyframes land{from{opacity:0;translate:0 -28px;scale:1.6}to{opacity:1;translate:0 0;scale:1}}
@keyframes fadein{from{opacity:0}}

/* keyboard drawings match the real app's dark theme (measured from app screenshots 2026-10-15) */
.kb{background:var(--room);box-shadow:var(--object-shadow),inset 0 0 0 1px var(--grid)}
.kb .k:not(.m),.plot .k,.lrow-k .k,.doc-keys .k:not(.m),.lost .keys .k{background:var(--app-key);font-weight:560}
.kb .k:not(.m):not(.space),.lrow-k .k{box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -4px 0 var(--app-key-side),0 1px 0 rgb(0 0 0 / .5),0 10px 18px -12px rgb(0 0 0 / .7)}
.kb .k.space{background:var(--app-key);color:var(--app-hint);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -4px 0 var(--app-key-side),0 1px 0 rgb(0 0 0 / .5),0 10px 18px -12px rgb(0 0 0 / .7)}
.kb .k .hint{position:absolute;top:3px;right:5px;font-style:normal;font-size:.55em;line-height:1;color:var(--app-hint)}
.kb .strip{justify-content:space-between;padding:0 4px;gap:8px}
.kb .strip > span:not(.chev):not(.mic),.kb .strip > b{flex:1;text-align:center}
.kb .strip .chev{width:30px;height:30px;border-radius:50%;background:var(--room-high);display:grid;place-items:center;flex:none}
.kb .strip .chev svg,.kb .strip .mic svg{width:16px;height:16px}
.kb .strip .mic{width:30px;display:grid;place-items:center;flex:none;color:var(--chalk)}
.plot .k{box-shadow:inset 0 2px 0 rgb(255 255 255 / .5),inset 0 -8px 0 var(--app-key-side),0 2px 0 rgb(0 0 0 / .5),0 30px 40px -20px rgb(0 0 0 / .85)}
.plot .k.down{background:var(--app-key-pressed);box-shadow:inset 0 2px 0 rgb(255 255 255 / .5),inset 0 -2px 0 var(--app-key-side),0 2px 0 rgb(0 0 0 / .5),0 8px 14px -8px rgb(0 0 0 / .85)}
@keyframes keydown{from{transform:none;background:var(--app-key);box-shadow:inset 0 2px 0 rgb(255 255 255 / .5),inset 0 -8px 0 var(--app-key-side),0 2px 0 rgb(0 0 0 / .5),0 30px 40px -20px rgb(0 0 0 / .85)}}
.mini .k{box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -2px 0 var(--app-key-side)}
.t-dark .k:not(.m){background:var(--app-key)}
.t-forest .k:not(.m){background:var(--app-key-side)}

/* keys inside a keyboard tray: pressed face drops, base stays on the row (like a key drawable's pressed state) */
.kb .k.down{transform:none;padding-top:3px;background:var(--app-key-pressed);box-shadow:inset 0 3px 0 var(--room),inset 0 4px 0 rgb(255 255 255 / .4),inset 0 -1px 0 var(--app-key-side),0 1px 0 rgb(0 0 0 / .5),0 4px 8px -4px rgb(0 0 0 / .7)}

/* section 2: the keyboard */
.blk{padding-block:64px}
@media (min-width:1024px){.blk{padding-block:64px 128px}}
.two{display:grid;gap:32px;grid-template-areas:"head" "device" "body"}
.prose-head{grid-area:head}.prose-body{grid-area:body}.device{grid-area:device}
.prose-head h2{margin-top:16px;max-width:16ch}
@media (min-width:1024px){.two{grid-template-columns:1fr 1.1fr;grid-template-areas:"head device" "body device";column-gap:96px;row-gap:24px;align-items:start}.prose-head{align-self:end}.device{align-self:center}}
.prose{max-width:46ch}
.prose h2{margin:16px 0 24px}
.prose p+p{margin-top:16px}
.points{list-style:none;padding:0;margin-top:32px;border-top:1px solid var(--grid)}
.points li{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--grid)}
.points b{font-weight:660;font-variation-settings:"opsz" 20}
.points span.small{grid-column:1/-1}
.device{min-width:0}
.field{display:flex;align-items:center;gap:12px;background:var(--room-raised);border-radius:var(--r-md);padding:16px 16px;margin-bottom:12px;box-shadow:inset 0 0 0 1px var(--grid);font-size:1.0625rem}
.field .caret{display:inline-block;width:2px;height:1.2em;background:var(--signal);vertical-align:-3px;margin-left:1px}
.field svg{width:20px;height:20px;color:var(--chalk-soft);margin-left:auto}
.device .kb{--kh:44px}
@media (min-width:1024px){.device .kb{--kh:52px;--kgap:8px}}
@media (max-width:420px){.device .kb{--kh:40px;--kgap:4px;--kpad:6px;--kfs:1rem}}

/* HeliBoard tiles: features drawn working */
.tiles-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--grid)}
@media (min-width:1024px){.tiles-head{margin-top:128px}}
.tiles{display:grid;gap:16px;margin-top:24px}
@media (min-width:900px){.tiles{gap:24px}}
.tile{background:var(--room-raised);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--grid);overflow:hidden}
.tile .pic{height:200px;display:grid;place-content:center;gap:12px;background:var(--graph);background-color:var(--room-high);border-bottom:1px solid var(--grid);padding:24px}
.tile figcaption{padding:24px 24px 24px}.tile figcaption p{margin-top:8px}
.mini-field{background:var(--room-raised);border-radius:var(--r-sm);padding:12px 16px;box-shadow:inset 0 0 0 1px var(--grid);font-size:1.0625rem;width:230px}
.mini-field s{text-decoration-color:var(--signal);text-decoration-thickness:2px;color:var(--chalk-soft)}
.mini-field .caret{display:inline-block;width:2px;height:1.1em;background:var(--signal);vertical-align:-3px;margin-left:1px}
.mini-strip{width:230px;height:40px;border-radius:var(--r-sm);background:var(--room-raised);box-shadow:inset 0 0 0 1px var(--grid)}
.mini-strip .pick{background:var(--key);color:var(--ink);padding:5px 12px 8px;border-radius:7px;box-shadow:inset 0 -3px 0 var(--key-side)}
.themes{grid-auto-flow:column;gap:12px}
.mini{display:grid;grid-template-columns:repeat(4,24px);gap:5px;padding:12px;border-radius:10px;box-shadow:0 12px 20px -12px rgb(0 0 0 / .8)}
.mini .k{height:24px;border-radius:5px;padding:0;box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),inset 0 -2px 0 var(--key-side)}
.mini .k.m{box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 -2px 0 var(--forest-side)}
.t-dark{background:var(--room)}
.t-light{background:#E9E3D6}.t-light .k{background:#FFFFFF}.t-light .k.m{background:var(--forest)}
.t-forest{background:var(--forest)}.t-forest .k{background:var(--key-side);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -2px 0 var(--app-key-side)}.t-forest .k.m{background:var(--forest-side)}
.lrow-k{display:flex;gap:8px;align-items:center}
.lrow-k .label{width:64px}
.lrow-k .k{width:34px;flex:none;height:38px;--kfs:1rem;border-radius:8px;padding-bottom:3px;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 var(--key-side),0 8px 12px -8px rgb(0 0 0 / .7)}

/* section 3: the ledger */
.ledger-intro{display:grid;gap:16px;margin-bottom:32px}
@media (min-width:1024px){.ledger-intro{grid-template-columns:1fr 1fr;align-items:end;gap:96px}}
.ledger{border-radius:var(--r-md);background:var(--room-raised);box-shadow:var(--object-shadow),inset 0 0 0 1px var(--grid);overflow:hidden}
.lhead,.lrow{display:grid;gap:8px 32px;padding:16px 24px}
@media (min-width:900px){.lhead,.lrow{grid-template-columns:1.2fr .9fr 1.5fr;align-items:baseline;padding:24px 32px}}
.lhead{background:var(--room-high);color:var(--chalk-soft);display:none}
@media (min-width:900px){.lhead{display:grid}}
.lrow+.lrow{border-top:1px solid var(--grid)}
.lrow .what{font-weight:660;font-variation-settings:"opsz" 18}
.lrow .when{color:var(--chalk-soft)}
.dest{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;font-variation-settings:"wdth" 87.5;color:var(--chalk-soft)}
.chip{display:inline-grid;place-items:center;height:30px;padding:0 12px 4px;border-radius:7px;font-family:var(--font);font-size:.875rem;font-weight:560;font-variation-settings:"opsz" 24;letter-spacing:0;text-transform:none;background:var(--key);color:var(--ink);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 var(--key-side),0 6px 10px -6px rgb(0 0 0 / .7)}
.chip.kl{background:var(--room);color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal),inset 0 -3px 0 var(--signal-deep)}
.chip.none{background:var(--room-high);color:var(--chalk-soft);box-shadow:inset 0 0 0 1px var(--edge)}
.lfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 32px;background:var(--room-high)}
.lfoot a{display:inline-block;padding:12px 0}

/* download block */
.get{margin-top:64px;display:grid;gap:32px;border-radius:var(--r-md);background:var(--room-raised);box-shadow:inset 0 0 0 1px var(--grid)}
@media (min-width:768px){.get{margin-top:128px}}
@media (min-width:1024px){.get{padding:64px;grid-template-columns:1fr 1fr;column-gap:64px;align-items:end}.get .note{grid-column:1/-1}}
.get .row{margin-top:32px}
.get .status{display:grid;gap:16px;max-width:52ch}
.get .status li{display:grid;gap:8px;align-items:baseline}
@media (min-width:640px){.get .status li{grid-template-columns:132px 1fr;gap:12px}}
.get .status .tag{white-space:nowrap;justify-self:start}
.get .status{list-style:none;padding:0}
.get .row{display:flex;flex-wrap:wrap;gap:12px}
.get .note{border-top:1px solid var(--grid);padding-top:16px}
.klipy{display:inline-block;margin-left:8px}
.what .klipy,.status .klipy{display:block;margin:8px 0 0}
.klipy-inline{display:block;flex-basis:100%;font-size:var(--fs-label);color:var(--chalk-soft)}
.dest{flex-wrap:wrap}
.ico{width:40px;height:40px;--kh:40px;flex:none;display:grid;place-items:center;font-size:.875rem}
.ico svg{width:18px;height:18px}
.points li{grid-template-columns:auto 1fr auto}
.points .ico{grid-row:span 2;align-self:start}
.points span.small{grid-column:2/-1}

/* footer (v4) */
.foot{background:var(--room-raised);border-top:1px solid var(--grid);margin-top:64px}
@media (min-width:768px){.foot{margin-top:128px}}
.foot .shell{display:grid;gap:32px;padding-block:64px}
@media (min-width:900px){.foot .shell{grid-template-columns:1fr auto;align-items:end}}
.foot .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.foot li a{display:inline-block;padding:12px 0}
.foot .fine{margin-top:16px;max-width:58ch}

/* privacy page */
.doc-hero{background:var(--graph);background-color:var(--room);border-bottom:1px solid var(--grid);position:relative}
.doc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--room) 10%,rgb(16 23 19 / .7));pointer-events:none}
.doc-hero .shell{position:relative;padding-block:64px 48px}
.doc-hero h1{margin:16px 0 16px}
.doc{display:grid;gap:48px;padding-block:64px 0}
@media (min-width:1024px){.doc{grid-template-columns:240px minmax(0,46ch);gap:96px;padding-block:96px 0}}
.toc{display:none}
@media (min-width:1024px){.toc{display:block;position:sticky;top:24px;align-self:start}}
.toc ol{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px;border-left:1px solid var(--grid)}
.toc a{display:block;padding:12px 16px;color:var(--chalk-soft);text-decoration:none;margin-left:-1px;border-left:1px solid transparent}
.toc a:hover{color:var(--chalk);border-left-color:var(--signal)}
.doc section+section{margin-top:64px;padding-top:64px;border-top:1px solid var(--grid)}
.doc h2{margin-bottom:16px}
.doc p+p,.doc p+ul,.doc ul+p{margin-top:16px}
.doc ul{padding-left:0;list-style:none;display:grid;gap:12px}
.doc ul li{padding-left:24px;position:relative}
.doc ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--key)}
.doc .flow li::before{background:var(--signal)}
.doc dl{display:grid;border-top:1px solid var(--grid);margin-top:16px}
.doc dl div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--grid)}
@media (min-width:640px){.doc dl div{grid-template-columns:150px 1fr;gap:24px}}
.doc dt{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--chalk-soft);padding-top:4px}
.callout{margin-top:24px;padding:24px 24px;border-radius:var(--r-md);background:var(--room-raised);box-shadow:inset 0 0 0 1px var(--grid)}

.doc-hero .shell{display:grid;gap:32px}
@media (min-width:1024px){.doc-hero .shell{grid-template-columns:1fr auto;align-items:center}}
.doc-keys{display:none}
@media (min-width:1024px){.doc-keys{display:grid;grid-template-columns:auto auto;gap:16px 24px;align-items:center;padding:32px 32px;border-radius:var(--r-lg);background:var(--graph);background-color:var(--room-high);box-shadow:var(--object-shadow),inset 0 0 0 1px var(--grid)}}
.doc-keys .k{width:72px;flex:none;--kh:72px;border-radius:14px}
.doc-keys .k svg{width:28px;height:28px}
.doc-keys .k.m{font-size:1.25rem}

/* 404 */
.lost{min-height:calc(100svh - 76px);display:grid;align-content:center;gap:32px;padding-block:48px 96px}
.lost .keys{display:flex;gap:12px}
.lost .keys .k{width:96px;flex:none;--kh:96px;font-size:2.6rem;border-radius:16px}
.lost .keys .k.down .dot{left:-7px;top:46%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .btn:active{transform:none}
}

@media (max-width:519px){.cta .btn,.get .row .btn,.lost .cta .btn{width:100%}}

.ledger-intro p,.lrow .when{max-width:46ch}
.doc ul{gap:16px}
@media (max-width:899px){.lfoot{padding:16px 24px}}
@media (max-width:899px){.hd{height:72px}.hero,.doc-hero{padding-top:72px}.lost{min-height:calc(100svh - 72px)}}
.doc-cta{margin-top:64px;padding-top:48px;border-top:1px solid var(--grid)}

/* QA pass 1 */
.lost .keys{gap:8px}
.lost .keys .k{width:clamp(72px,26vw,96px);--kh:clamp(72px,26vw,96px);font-size:clamp(2rem,1.2rem + 3vw,2.6rem)}
.lrow-k{gap:4px}.lrow-k .label{width:52px}.lrow-k .k{width:28px;height:34px}
@media (min-width:1180px){.lrow-k{gap:8px}.lrow-k .label{width:64px}.lrow-k .k{width:34px;height:38px}}
.tile .pic.themes{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px}
.mini{grid-template-columns:repeat(4,18px)}.mini .k{height:18px}
.tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
@media (max-width:899px){.lhead{display:grid;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.ledger{border-radius:var(--r-md) var(--r-md) 0 0}
.lfoot{border-radius:0 0 var(--r-md) var(--r-md);box-shadow:inset 0 0 0 1px var(--grid)}
.get{padding:32px 16px}
@media (min-width:768px){.get{padding:48px 32px}}
@media (min-width:1024px){.get{padding:64px}}
.btn:disabled{cursor:not-allowed;opacity:.55;transform:none}
.btn:disabled:active{transform:none;transition:none}
.brand:hover{color:var(--key)}
a:active{text-decoration-color:var(--signal-deep);text-decoration-thickness:2px}
.nav a[aria-current="page"]{font-weight:650}

/* QA pass 2 */
.doc > div{max-width:46ch}
@media (min-width:640px) and (max-width:943px){.tiles > :last-child:nth-child(odd){grid-column:1/-1}}
.get .status{gap:24px}
.foot .fine + .label{margin-top:8px}
.chip{background:var(--room-high);color:var(--chalk);box-shadow:inset 0 0 0 1px var(--edge)}
.chip.kl{background:var(--room);color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.lost .keys .k,.doc-keys .k:not(.m){box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -4px 0 var(--app-key-side),0 1px 0 rgb(0 0 0 / .5),0 14px 24px -12px rgb(0 0 0 / .7)}
.lost .keys .k.down{background:var(--app-key-pressed);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 var(--app-key-side),0 1px 0 rgb(0 0 0 / .5),0 4px 8px -4px rgb(0 0 0 / .7)}
.brand:hover{color:var(--chalk);text-decoration:underline 2px var(--signal);text-underline-offset:4px}
.toc a:active{color:var(--chalk);border-left-color:var(--signal-deep)}