/* Taku Lab: a technical sheet on grey paper. One 3D phone (fixed canvas, z 1) travels the page; sections paint their ground below it and their words above it (z 2). */
:root{
 --paper:#EFEFEC;--paper-hi:#F6F6F4;--ink:#16140F;--ui:#1B1B1B;--night:#0D0E11;--night2:#14151A;--cream:#F3EFE4;--org:#FF5A1F;--org-d:#E94E17;
 --sage:#C4DFCB;--peach:#F3CEB9;--sand:#ECE5CF;--lav:#D8D5F1;--rose:#F0C9CF;--mist:#C5DCEF;--ok:#36A246;
 --line:rgba(22,20,15,.07);--line2:rgba(22,20,15,.22);--sub:rgba(22,20,15,.62);--subd:rgba(243,239,228,.62);
 --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--dot:"Doto",ui-monospace,monospace;
 --ease:cubic-bezier(.2,.7,.3,1);--spring:cubic-bezier(.3,1.45,.5,1);
 --gut:max(20px,env(safe-area-inset-left,0px));--wrap:1280px;
 --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);overflow-x:hidden}
/* type and colour belong to the page, not <body>: the site's dialogs render outside it */
:where(.tk){color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;background:var(--noise);opacity:.1;mix-blend-mode:multiply}
:where(.tk) a{color:inherit}:where(.tk) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.tk) img{display:block;max-width:100%}
:where(.tk) :focus-visible{outline:2px solid var(--org);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.up{position:relative;z-index:2}
.cap{font:400 10.5px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.h{margin:0;font:400 clamp(34px,3.6vw,56px)/1.02 var(--display);letter-spacing:-.04em}
.hx{margin:0;font:400 clamp(48px,6vw,104px)/.92 var(--display);letter-spacing:-.06em}
.p{margin:0;font:400 16px/1.55 var(--sans);color:var(--sub);max-width:40ch}
.dark .p,.p.d{color:var(--subd)}
.led{font-family:var(--dot);font-weight:900;font-variation-settings:"ROND" 100,"wght" 900;color:var(--org)}
.led i{font-style:normal;opacity:0}.led i.on{opacity:1}
.led .pn{font-family:var(--display);font-weight:500;font-variation-settings:normal;margin-left:-.04em}
.cln{display:inline-block;width:.26em;height:.72em;vertical-align:0;background:radial-gradient(circle .06em at 50% 25%,currentColor 96%,transparent) no-repeat,radial-gradient(circle .06em at 50% 75%,currentColor 96%,transparent) no-repeat}

/* parts-sheet labels */
.lbl{display:inline-flex;align-items:stretch;white-space:nowrap}
.tagx{display:inline-flex;align-items:center;height:22px;padding:0 8px;background:var(--org);color:#fff;font:400 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.box{display:inline-flex;align-items:center;height:22px;padding:0 9px;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--line2);font:400 11.5px/1 var(--sans);color:var(--ink)}
.dark .box{background:rgba(13,14,17,.7);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(243,239,228,.3)}
.chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;box-shadow:inset 0 0 0 1px var(--line2);font:400 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.chip i{width:7px;height:7px;background:var(--org)}
.dark .chip{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(243,239,228,.3)}

/* buttons: rectangular, small caps */
.bx{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:46px;padding:0 20px;background:var(--org);color:#fff;font:400 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .2s,scale .12s}
@media (hover:hover) and (pointer:fine){.bx:hover{background:var(--org-d)}}.bx:active{scale:.97}
.bx.ink{background:var(--ink)}@media (hover:hover) and (pointer:fine){.bx.ink:hover{background:#000}}
.bx.cream{background:var(--cream);color:var(--ink)}@media (hover:hover) and (pointer:fine){.bx.cream:hover{background:#fff}}
.bx.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--line2)}@media (hover:hover) and (pointer:fine){.bx.line:hover{background:rgba(255,255,255,.45)}}
.dark .bx.line{box-shadow:inset 0 0 0 1px rgba(243,239,228,.35)}@media (hover:hover) and (pointer:fine){.dark .bx.line:hover{background:rgba(255,255,255,.08)}}
.bx svg{width:14px;height:14px;flex:none}
.tl{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--sans);text-decoration:none}
.tl .pl{width:30px;height:30px;display:grid;place-items:center;background:var(--ink);color:#fff}
.dark .tl .pl{background:var(--cream);color:var(--ink)}

/* review bar (not part of the product) */
.rev{position:relative;z-index:70;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;min-height:32px;padding:4px 12px;background:#000;color:rgba(243,239,228,.6);font:400 11px/1 var(--display)}
.rev span{margin-right:8px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.rev button{height:22px;padding:0 10px;color:rgba(243,239,228,.75)}
.rev button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}

/* nav */
.nav{position:sticky;z-index:80;top:0;height:52px;margin-bottom:-52px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);color:var(--cream);transition:color .3s,background .3s}
.nav.light{color:var(--ink);background:rgba(216,216,212,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav .l{display:flex;gap:22px}.nav a{text-decoration:none}.nav .l a[aria-current="page"]{color:var(--org)}
.nav .logo img{height:20px;width:auto;display:block}
.nav .logo .on-light{display:none}.nav.light .logo .on-light{display:block}.nav.light .logo .on-dark{display:none}
.nav .r{justify-self:end;display:flex;align-items:center;gap:18px}
.nav .r .reg{color:var(--org)}
.nav .menu{display:none;width:36px;height:36px;place-items:center;box-shadow:inset 0 0 0 1px currentColor}
.drawer{display:none}

/* the one phone */
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:1;pointer-events:none;touch-action:pan-y}
#gl.grab{pointer-events:auto;cursor:grab}
#hud{position:fixed;inset:0;width:100vw;height:100dvh;z-index:3;pointer-events:none;opacity:var(--hud,0);transition:opacity .3s}
#hud path{fill:none;stroke-width:1.2}
#hud text{font:400 9.5px var(--display);letter-spacing:.12em}

/* plates and grounds */
.plate{position:relative;background:var(--night);color:var(--cream)}
.horizon{position:absolute;inset:0;pointer-events:none;background:radial-gradient(150% 115% at 50% var(--hz,152%),var(--night) 59%,var(--hz1,rgba(255,90,31,.95)) 61%,var(--hz2,rgba(255,170,120,.6)) 62%,rgba(216,213,241,.38) 63.6%,rgba(13,14,17,0) 72%);transition:background .9s}
.stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 72% 14%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 86% 40%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 30% 8%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 58% 30%,rgba(255,255,255,.25),transparent),radial-gradient(1px 1px at 6% 48%,rgba(255,255,255,.3),transparent)}
.grid{background-color:var(--paper-hi);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;background-position:center}
.pin{position:sticky;top:0;height:100dvh;height:100svh;overflow:hidden;z-index:2}
.pinbg{position:sticky;top:0;height:100dvh;height:100svh;overflow:hidden}
.pinbg+.pin{margin-top:-100dvh;margin-top:-100svh}
.bp{position:absolute;inset:0;opacity:var(--bp,0)}
.bp svg{width:100%;height:100%}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.lines path{fill:none;stroke:var(--ink);stroke-width:1}
.lines circle{fill:var(--org)}
.dark .lines path{stroke:rgba(243,239,228,.7)}
.call{position:absolute;z-index:3;left:0;top:0;opacity:0;transition:opacity .35s;will-change:transform}
.call.on{opacity:1}
.seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(255,255,255,.4)}
.seg button{height:34px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--sub);transition:background .25s,color .25s}
.seg button i{width:6px;height:6px;border:1px solid currentColor}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}.seg button[aria-pressed="true"] i{background:var(--org);border-color:var(--org)}
.dark .seg{box-shadow:inset 0 0 0 1px rgba(243,239,228,.3);background:rgba(13,14,17,.6)}.dark .seg button{color:var(--subd)}.dark .seg button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.steps{display:flex;gap:6px}
.steps i{width:24px;height:2px;background:var(--line2);position:relative;overflow:hidden}.steps i b{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--k,0))}
.dark .steps i{background:rgba(243,239,228,.25)}.dark .steps i b{background:var(--cream)}
.note{color:var(--sub)}.dark .note{color:rgba(243,239,228,.45)}

/* waitlist */
.wl-block{width:min(440px,100%)}
.wl{display:flex;height:48px;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.wl input{flex:1;min-width:0;width:0;border:0;outline:0;padding:0 14px;background:#fff;color:var(--ui);font:400 15px var(--sans)}
.wl input::placeholder{color:rgba(22,20,15,.45)}
.wl input:focus{box-shadow:inset 0 0 0 2px var(--org)}
.wl .bx{height:48px}
.wl-msg{margin:8px 0 0;min-height:1.3em;font:400 13px/1.35 var(--sans);color:var(--sub)}
.dark .wl-msg{color:var(--subd)}
.wl-block[data-state="invalid"] .wl-msg,.wl-block[data-state="fail"] .wl-msg{color:#CC2A4A}
.dark .wl-block[data-state="invalid"] .wl-msg,.dark .wl-block[data-state="fail"] .wl-msg{color:#FF8A66}
.wl-block[data-state="ok"] form,.wl-block[data-state="dup"] form{display:none}
.wl-block[data-state="ok"] .wl-msg,.wl-block[data-state="dup"] .wl-msg{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;background:#fff;color:var(--ui);font-size:14px}
.wl-block[data-state="ok"] .wl-msg::before,.wl-block[data-state="dup"] .wl-msg::before{content:"";width:8px;height:8px;flex:none;background:var(--org)}
.wl-legal{margin:6px 0 0;font:400 12px/1.4 var(--sans);color:var(--sub)}
.dark .wl-legal{color:rgba(243,239,228,.55)}
.wl-legal.focus{max-height:0;opacity:0;overflow:hidden;margin:0;transition:max-height .4s var(--ease),opacity .3s,margin .3s}
.wl-block:focus-within .wl-legal.focus{max-height:40px;opacity:1;margin-top:6px}

/* capsule nav: square, ink */
.cnav{position:fixed;z-index:85;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 30px));transition:transform .5s var(--ease);display:flex;flex-direction:column}
.cnav.show{transform:translate(-50%,0)}
.cbar{display:flex;align-items:center;gap:4px;height:50px;padding:4px;background:rgba(13,14,17,.9);color:var(--cream);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 40px -16px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.ccur{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 10px;min-width:184px;font:400 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){.ccur:hover{background:rgba(255,255,255,.06)}}
.ccur .n{font:900 15px/1 var(--dot);font-variation-settings:"ROND" 100;color:var(--org);letter-spacing:0}
.ccur .lb{flex:1;text-align:left;white-space:nowrap}
.ccur .bar{width:36px;height:2px;background:rgba(243,239,228,.2);position:relative}.ccur .bar b{position:absolute;inset:0;background:var(--org);transform-origin:left;transform:scaleX(var(--k,0))}
.cbar .bx{height:42px;padding:0 16px;font-size:11px}
.clist{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.cnav.open .clist{grid-template-rows:1fr}
.clist>div{overflow:hidden}
.clist ul{list-style:none;margin:0 0 6px;padding:4px;background:rgba(13,14,17,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.clist a{display:flex;align-items:center;gap:14px;height:38px;padding:0 12px;text-decoration:none;color:rgba(243,239,228,.65);font:400 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){.clist a:hover{background:rgba(255,255,255,.06);color:var(--cream)}}
.clist a span{font:900 13px/1 var(--dot);font-variation-settings:"ROND" 100;color:rgba(243,239,228,.35);letter-spacing:0;width:22px}
.clist a.on{color:var(--cream)}.clist a.on span{color:var(--org)}

/* video modal */
.vmodal{position:fixed;inset:0;z-index:100;background:rgba(10,10,9,.78);display:grid;place-items:center;padding:24px}
.vmodal[hidden]{display:none}
.vbox{width:min(880px,100%);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.vframe{width:100%;aspect-ratio:16/9;background:var(--night);box-shadow:inset 0 0 0 1px rgba(243,239,228,.2);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.vframe p{margin:0;max-width:46ch;font:400 15px/1.5 var(--sans);color:var(--subd)}

/* footer: debossed wordmark lit by the cursor */
.foot{position:relative;z-index:2;background:var(--paper);padding:26px var(--gut) 22px;overflow:hidden}
.foot .links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 26px}
.foot .links div{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot .links a{text-decoration:none}@media (hover:hover) and (pointer:fine){.foot .links a:hover{color:var(--org)}}
.emb{position:relative;margin:clamp(40px,8vh,80px) auto 0;max-width:1400px;aspect-ratio:394/100;filter:drop-shadow(-1.5px -1.5px 1px rgba(255,255,255,.75)) drop-shadow(2px 2.5px 2px rgba(0,0,0,.2))}
.emb div{position:absolute;inset:0;-webkit-mask:url(/taku/a/8c7a2dc320f9.svg) center/contain no-repeat;mask:url(/taku/a/8c7a2dc320f9.svg) center/contain no-repeat;background:radial-gradient(circle 16vw at var(--mx,-50%) var(--my,-50%),rgba(255,138,80,.95),rgba(255,90,31,.55) 30%,rgba(216,213,241,.5) 55%,transparent 75%),linear-gradient(#CFCFCB,#D6D6D2)}
.foot .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px;color:var(--sub)}

@media (max-width:900px){
 .nav .l{display:none}.nav{grid-template-columns:auto 1fr}.nav .r{grid-column:2}.nav .menu{display:grid}
 .nav.open .drawer{display:flex;position:absolute;top:52px;left:0;right:0;flex-direction:column;background:var(--night);color:var(--cream);padding:8px var(--gut) 16px}
 .drawer a{display:flex;align-items:center;height:44px;text-decoration:none;border-bottom:1px solid rgba(243,239,228,.1)}
 .cnav{left:12px;right:12px;transform:translateY(calc(100% + 30px))}.cnav.show{transform:none}
 .ccur{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}


/* ===== v0.2: fewer, larger, calmer ===== */
.gut{padding-inline:var(--gut)}
.cap{font:400 12.5px/1 var(--display);letter-spacing:.04em}
.h{font:400 clamp(36px,4vw,64px)/1 var(--display);letter-spacing:-.045em}
.hx{font:400 clamp(52px,6.4vw,112px)/.92 var(--display);letter-spacing:-.06em}
.p{font:400 18px/1.5 var(--sans)}
.note,.note.cap{font:400 12.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--sub)}
.dark .note,.dark .note.cap{color:rgba(243,239,228,.5)}
.tagx,.box{height:26px;font-size:12px;border-radius:0}
.lbl .tagx{border-radius:4px 0 0 4px}.lbl .box:last-child{border-radius:0 4px 4px 0}.lbl>.tagx:only-child{border-radius:4px}
.lbl>.box:only-child,.tags>.box,.needs>.box{border-radius:4px}
.tagx{font:400 11.5px/1 var(--display);letter-spacing:.05em}
.box{font:400 13px/1 var(--sans)}
.bx{height:48px;padding:0 22px;border-radius:8px;font:500 15px/1 var(--sans);letter-spacing:-.01em;text-transform:none}
.cbar .bx{border-radius:999px}
.lk{display:inline-flex;align-items:center;gap:8px;font:400 17px/1.2 var(--sans);color:var(--org);text-decoration:none}
.lk::after{content:"→";transition:transform .25s var(--ease)}@media (hover:hover) and (pointer:fine){.lk:hover::after{transform:translateX(3px)}}
.seg{border-radius:8px;overflow:hidden}.seg button{height:36px;font:500 13px/1 var(--sans);letter-spacing:0;text-transform:none}
.grid{background-size:64px 64px}
.stars{display:none}
.wl{border-radius:10px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.5),0 0 0 1px rgba(22,20,15,.08)}
.wl .bx{border-radius:0}

/* review bar: out of the way */
.rev{position:fixed;left:14px;bottom:14px;z-index:90;min-height:30px;border-radius:8px;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rev button{border-radius:5px}
@media (max-width:900px){.rev{position:relative;left:auto;bottom:auto;border-radius:0}}

/* header: the v0.7 glass pill, glassier; it turns smoked glass over dark grounds */
.nav{position:sticky;top:12px;z-index:80;max-width:1240px;width:calc(100% - 2*var(--gut));height:56px;margin:12px auto -68px;padding:0 8px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:14px;
 color:var(--cream);background:rgba(30,30,34,.38);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 16px 40px -24px rgba(0,0,0,.6);transition:background .35s,color .35s,box-shadow .35s}
.nav.light{color:var(--ui);background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(0,0,0,.04),0 16px 40px -24px rgba(0,0,0,.28)}
.nav .logo img{height:22px}
.nav .l{display:flex;gap:2px}
.nav .l a{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;padding:10px 12px;border-radius:8px;opacity:.86}
@media (hover:hover) and (pointer:fine){.nav .l a:hover{background:rgba(255,255,255,.1);opacity:1}}@media (hover:hover) and (pointer:fine){.nav.light .l a:hover{background:rgba(0,0,0,.06)}}
.nav .l a[aria-current="page"]{color:inherit;opacity:1;background:rgba(255,255,255,.12)}.nav.light .l a[aria-current="page"]{background:rgba(0,0,0,.06)}
.nav .r{display:flex;gap:6px}
.nav .sin{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:9px;background:var(--cream);color:var(--ui);font:500 14px/1 var(--sans);text-decoration:none}
.nav.light .sin{background:var(--ui);color:#fff}
.nav .menu{width:40px;height:40px;border-radius:9px;box-shadow:none;background:rgba(255,255,255,.12)}.nav.light .menu{background:rgba(0,0,0,.06)}
.nav .drawer{display:none}
@media (max-width:900px){.nav{grid-template-columns:none}.nav .l{display:none}.nav .menu{display:grid}
 .nav.open .drawer{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;border-radius:14px;padding:8px;background:rgba(255,255,255,.92);color:var(--ui);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
 .drawer a{height:48px;padding:0 12px;border-radius:8px;border:0;font:400 20px/1 var(--display);letter-spacing:-.02em;text-transform:none}}

/* capsule nav: the v0.7 rounded smoked glass */
.cbar{border-radius:999px;height:52px;padding:5px;background:rgba(20,20,22,.72);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px -16px rgba(0,0,0,.5)}
.ccur{border-radius:999px;font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;padding:0 14px 0 12px}
.ccur .n{font-size:14px}
.clist ul{border-radius:20px;background:rgba(20,20,22,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.clist a{border-radius:12px;font:400 14px/1 var(--sans);letter-spacing:0;text-transform:none}

/* footer (v0.7 dot-matrix) helpers */
.sf .btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap}
.sf{z-index:2}

/* contact shadow under the phone on light grounds */
#cshadow{position:fixed;left:0;top:0;z-index:1;width:200px;height:40px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.28),rgba(0,0,0,.08) 60%,transparent);opacity:0;will-change:transform,opacity}
#hud text{display:none}
/* v0.2b: glassier header. A sheen, a lit edge, links truly centred. */
.nav{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 62%),rgba(26,26,30,.32);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.07),0 22px 50px -30px rgba(0,0,0,.75)}
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(115deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 28%,rgba(255,255,255,0) 60%,rgba(255,255,255,.22));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.nav.light{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.46)),rgba(246,246,244,.2);
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.05),0 22px 50px -30px rgba(0,0,0,.3)}
.nav.light::before{background:linear-gradient(115deg,#fff,rgba(255,255,255,.3) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,.8))}
@media (min-width:901px){.nav .l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}
/* review control: collapsed to the current choice until hovered */
@media (min-width:901px){.rev{opacity:.78;transition:opacity .2s}.rev:focus-within{opacity:1}@media (hover:hover) and (pointer:fine){.rev:hover{opacity:1}}
 @media (hover:hover) and (pointer:fine){.rev:not(:hover):not(:focus-within) button[aria-pressed="false"]{display:none}}}
/* v0.2b: no label under 12px outside the phone's own screen */
.tagx{font-size:12px}

/* ===== v0.3: the shared system for all four pages ===== */
/* type: three heading sizes, one body size; grey body with the key phrase lit */
.hx{font-size:clamp(52px,6.4vw,96px);line-height:.98}
.h{font-size:clamp(34px,3.9vw,56px);line-height:1.02;letter-spacing:-.045em}
.t3{font:400 clamp(24px,2.2vw,32px)/1.08 var(--display);letter-spacing:-.035em}
.p{font:400 19px/1.5 var(--sans);color:rgba(22,20,15,.5)}
.dark .p,.p.d{color:rgba(243,239,228,.52)}
.p b{font-weight:inherit;color:var(--ink)}.dark .p b,.p.d b{color:var(--cream)}
@media (max-width:900px){.p{font-size:17px}}
/* corners follow the DS: cards 12, controls 8, tags 4 */
.sf{border-radius:12px 12px 0 0;margin-top:-12px}
.cnav{display:none !important}

/* global nav (PRD): Products ▾ · Developers · Resources ▾ · search · Sign in. It scrolls away; the product bar takes over. */
.nav{position:relative;top:0;margin:12px auto -68px;border-radius:12px}
.nav .l{gap:2px}
.nav .l>a,.ddb{font:500 14px/1 var(--sans);letter-spacing:0;padding:10px 12px;border-radius:8px;opacity:.86;display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.ddb svg{width:9px;height:9px;transition:transform .2s}
.dd{position:relative}
.dd.open .ddb{background:rgba(255,255,255,.1);opacity:1}@media (hover:hover) and (pointer:fine){.dd:hover .ddb,.nav .l>a:hover{background:rgba(255,255,255,.1);opacity:1}}.nav.light .dd.open .ddb{background:rgba(0,0,0,.06)}@media (hover:hover) and (pointer:fine){.nav.light .dd:hover .ddb,.nav.light .l>a:hover{background:rgba(0,0,0,.06)}}
.ddb[aria-current="true"]{opacity:1}
.ddp{position:absolute;top:calc(100% + 14px);left:-6px;min-width:210px;padding:6px;border-radius:12px;display:flex;flex-direction:column;
 background:rgba(28,28,32,.72);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 24px 50px -24px rgba(0,0,0,.6);
 opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.ddp::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.ddp a{padding:11px 12px;border-radius:8px;font:400 15px/1 var(--sans);color:var(--cream);text-decoration:none}
@media (hover:hover) and (pointer:fine){.ddp a:hover{background:rgba(255,255,255,.1)}}.ddp a[aria-current="page"]{color:var(--org)}
.nav.light .ddp{background:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.06),0 24px 50px -24px rgba(0,0,0,.3)}.nav.light .ddp a{color:var(--ui)}@media (hover:hover) and (pointer:fine){.nav.light .ddp a:hover{background:rgba(0,0,0,.05)}}
@media (hover:hover){.dd:hover .ddp{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}.dd:hover .ddb svg{transform:rotate(180deg)}}
.dd.open .ddp{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.nav .srch{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:inherit;opacity:.86}@media (hover:hover) and (pointer:fine){.nav .srch:hover{background:rgba(255,255,255,.1);opacity:1}}@media (hover:hover) and (pointer:fine){.nav.light .srch:hover{background:rgba(0,0,0,.06)}}
.nav .sin{border-radius:8px}.nav .menu{border-radius:8px}
.drawer .grp{padding:12px 12px 4px;font:400 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:rgba(22,20,15,.45)}
@media (max-width:900px){.nav .srch{display:none}.nav.open .drawer{border-radius:12px}}

/* product bar: name · sections · one button. Appears once the hero is behind you. */
.lnav{position:fixed;z-index:85;top:12px;left:0;right:0;margin:0 auto;max-width:1240px;width:calc(100% - 2*var(--gut));height:52px;padding:0 6px 0 18px;border-radius:12px;display:flex;align-items:center;gap:16px;
 color:var(--cream);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 62%),rgba(26,26,30,.4);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.07),0 22px 50px -30px rgba(0,0,0,.75);
 transform:translateY(calc(-100% - 20px));opacity:0;transition:transform .45s var(--ease),opacity .3s,background .35s,color .35s}
.lnav.show{transform:none;opacity:1}
.lnav.light{color:var(--ui);background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.5)),rgba(246,246,244,.2);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.05),0 22px 50px -30px rgba(0,0,0,.3)}
.ln-name{font:500 16px/1 var(--display);letter-spacing:-.02em;color:inherit;text-decoration:none;white-space:nowrap}
.ln-l{display:flex;gap:2px;margin-left:auto}
.ln-l a{font:400 14px/1 var(--sans);padding:9px 11px;border-radius:8px;color:inherit;text-decoration:none;opacity:.62;transition:opacity .2s,background .2s}
@media (hover:hover) and (pointer:fine){.ln-l a:hover{opacity:1}}.ln-l a.on{opacity:1;background:rgba(255,255,255,.1)}.lnav.light .ln-l a.on{background:rgba(0,0,0,.06)}
.ln-r{display:flex;align-items:center;gap:8px}
.ln-r .bx{height:40px;padding:0 16px;font-size:14px}
.ln-tog{display:none}
@media (max-width:900px){
 .lnav{height:50px;padding:0 5px 0 14px;gap:8px}
 .ln-tog{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 8px;border-radius:8px;color:inherit;font:400 14px/1 var(--sans);opacity:.7}
 .ln-tog svg{width:9px;height:9px;transition:transform .2s}.lnav.open .ln-tog svg{transform:rotate(180deg)}
 .ln-name{margin-right:auto}
 .ln-l{position:absolute;top:58px;left:0;right:0;margin:0;flex-direction:column;padding:6px;border-radius:12px;background:rgba(28,28,32,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:var(--cream);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility 0s .18s}
 .lnav.light .ln-l{background:rgba(255,255,255,.92);color:var(--ui)}
 .lnav.open .ln-l{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
 .ln-l a{padding:14px 12px;font-size:16px;opacity:.86}
 .ln-r .bx{padding:0 12px}
}

.hbar .desc b{font-weight:inherit;color:var(--cream)}
/* menus must read cleanly over big type: near-opaque glass */
.ddp{background:rgba(24,24,28,.94)}.nav.light .ddp{background:rgba(255,255,255,.96)}
.nav.open .drawer{background:rgba(255,255,255,.97)}
@media (max-width:900px){.ln-l{background:rgba(24,24,28,.95)}.lnav.light .ln-l{background:rgba(255,255,255,.97)}}

/* ===== v0.4: after the 11/3 review =====
   corners follow the mobile DS: buttons 6, chips and inputs 10, cards 12–16, whole panels 28.
   no paper grain; grids only where the OS page explains the hardware. */
body::after{display:none}
.bx{border-radius:6px}
.wl{border-radius:10px}.wl .bx{border-radius:6px}
.sf .wl{border-radius:10px}.sf .wl .btn{border-radius:6px}
.nav .sin,.nav .menu,.nav .srch,.ln-r .bx{border-radius:6px}
.seg{border-radius:10px;padding:3px}.seg button{border-radius:7px}
.tagx{border-radius:5px}.box{border-radius:5px}
.lbl .tagx{border-radius:5px 0 0 5px}.lbl .box:last-child{border-radius:0 5px 5px 0}
.stat{border-radius:5px}
.col,.wcard,.cd,.term,.vis,.know,.facts,.specs{border-radius:16px;overflow:hidden}
.tree{border-radius:12px}
.node .ic{border-radius:12px}
.card,.ba,.lap .scr{border-radius:16px}

.hx,.h,.t3{text-wrap:balance}

/* ===== v0.5: closer to the 11/3 Taku OS screens =====
   pill buttons; neutral black (or cream on dark) for actions; orange only where you send something (the waitlist).
   cards 20, chips 6, menus 20. */
.bx{border-radius:999px;background:var(--ink);color:#fff}
.dark .bx,.plate .bx,.bx.cream{background:var(--cream);color:var(--ink)}
.bx.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.wl{border-radius:999px}.wl .bx,.dark .wl .bx{border-radius:999px;background:var(--org);color:#fff}
.sf .wl{border-radius:999px}.sf .wl .btn{border-radius:999px;background:var(--org);color:#fff}
.nav{border-radius:999px;padding-left:22px}.nav .sin,.nav .menu,.nav .srch{border-radius:999px}
.nav .l>a,.ddb{border-radius:999px}
.ddp{border-radius:20px}.ddp a{border-radius:12px}
.lnav{border-radius:999px;padding-left:22px}.ln-l a{border-radius:999px}
.lnav .ln-r .bx{background:var(--ink);color:#fff}.lnav:not(.light) .ln-r .bx{background:var(--cream);color:var(--ink)}
@media (max-width:900px){.nav.open .drawer,.ln-l{border-radius:20px}}
.seg{border-radius:999px}.seg button{border-radius:999px}
.tagx,.box{border-radius:6px}.lbl .tagx{border-radius:6px 0 0 6px}.lbl .box:last-child{border-radius:0 6px 6px 0}
.col,.wcard,.cd,.term,.vis,.know,.facts,.specs,.card,.ba,.pc,.cc,.plan,.dcard,.byok,.cover{border-radius:20px}
.modes li{border-radius:20px}
@media (hover:hover) and (pointer:fine){.bx:hover{background:#000}}@media (hover:hover) and (pointer:fine){.dark .bx:hover,.plate .bx:hover,.bx.cream:hover{background:#fff}}
@media (hover:hover) and (pointer:fine){.bx.line:hover{background:rgba(127,127,127,.12)}}
@media (hover:hover) and (pointer:fine){.wl .bx:hover,.dark .wl .bx:hover,.sf .wl .btn:hover{background:var(--org-d)}}
@media (hover:hover) and (pointer:fine){.lnav .ln-r .bx:hover{background:#000}}@media (hover:hover) and (pointer:fine){.lnav:not(.light) .ln-r .bx:hover{background:#fff}}