/* OS v0.20 · Terminal, drafted. One black ground, one orange, and a drafting hand:
   hairlines, nodes, brackets and a double-line bus. No arrowheads: direction is shown by light running along the line.
   Orange is reserved for the first line's quote, the layer numbers, the caret and the part a layer lights on the phone.
   Shell (top nav, product bar, footer), buttons and the three site fonts are the same as every other page.
   Space Grotesk for headings, Hanken Grotesk for reading, Doto for the first line and the layer numbers. Monospace only for code.
   Each language has its own measures: CJK runs larger leading, no negative tracking, and narrower measures in em. */
.tk-os{--k0:#0A0A0A;--k1:#0F0F0E;--k2:#151514;--ln:rgba(233,230,223,.1);--ln2:rgba(233,230,223,.17);--t0:#F2EFE8;--t1:#A6A39C;--t2:#6E6B65;--org:#FF5A1F;
 --bp:rgba(233,230,223,.12);--bp2:rgba(233,230,223,.26);--bp3:rgba(233,230,223,.52);
 --pad:clamp(20px,3.2vw,40px);--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
 --dotbg:radial-gradient(circle at 1px 1px,rgba(233,230,223,.075) 1px,transparent 1.4px) 0 0/16px 16px;
 --grid:linear-gradient(rgba(233,230,223,.04) 1px,transparent 1px) -1px -1px/24px 24px,linear-gradient(90deg,rgba(233,230,223,.04) 1px,transparent 1px) -1px -1px/24px 24px;
 /* type measures, English */
 --hw:400;--h2fs:clamp(34px,3.6vw,56px);--h2lh:1.02;--h2ls:-.048em;--h2mw:15ch;
 --xlfs:clamp(48px,6.2vw,104px);--xllh:.94;--xlls:-.06em;--xlmw:11ch;
 --pfs:17px;--plh:1.62;--pls:0em;--pmw:44ch;--sfs:15.5px;--slh:1.6;--sls:0em;--tfs:18px;--tls:-.015em;--tlh:1.2}





.tk-os{background:var(--k0);color:var(--t0)}
.tk-os::after{opacity:.05;mix-blend-mode:screen}
.tk-os.o a{color:inherit}
.tk-os.o p,.tk-os.o dd,.tk-os.o figcaption span,.tk-os .lm .modes>li>span>span{text-wrap:pretty}
.tk-os .fx{fill:none;stroke:var(--t0);stroke-linecap:round;pointer-events:none}
.tk-os .o-wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);box-sizing:border-box}
.tk-os.o section{position:relative;background:var(--k0)}

/* ---------- type ---------- */
.tk-os .o-h1{position:relative;margin:0;font:900 var(--h1,72px)/1.08 var(--dot);font-variation-settings:"ROND" 100,"wght" 900;letter-spacing:-.02em;color:var(--t0)}
.tk-os .o-h1 .l{display:block;white-space:nowrap}
.tk-os .o-h1 em{font-style:normal;color:var(--org)}
.tk-os .o-h1 .c{opacity:0}
.tk-os .o-h1 .c.on{opacity:1}
.tk-os .o-led{display:none;width:100%}
.tk-os .o-h1.cjk .l{display:none}.tk-os .o-h1.cjk .o-led{display:block}
.tk-os .o-h2{margin:0;font:var(--hw) var(--h2fs)/var(--h2lh) var(--display);letter-spacing:var(--h2ls);color:var(--t0);max-width:var(--h2mw);text-wrap:balance}
.tk-os .o-h2.xl{font-size:var(--xlfs);line-height:var(--xllh);letter-spacing:var(--xlls);max-width:var(--xlmw)}
.tk-os .o-p{margin:0;font:400 var(--pfs)/var(--plh) var(--sans);letter-spacing:var(--pls);color:var(--t1);max-width:var(--pmw);text-wrap:pretty}
.tk-os .o-p b{font-weight:500;color:var(--t0)}
.tk-os .o-n{font:400 12.5px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--t2);letter-spacing:.02em;transition:color .3s}
.tk-os .o-dn{display:block;font:900 22px/1 var(--dot);font-variation-settings:"ROND" 100,"wght" 900;letter-spacing:.02em;color:var(--t2);transition:color .35s}
.tk-os .o-dn.big{font-size:clamp(40px,3.6vw,56px);color:var(--org);margin-bottom:clamp(20px,3vh,32px)}
/* a link reads as a link: a hairline under it, an arrow after it */
.tk-os .o-lk{display:inline-flex;align-items:center;gap:10px;padding-bottom:5px;font:400 15px/1.2 var(--sans);letter-spacing:var(--sls);color:var(--t0) !important;text-decoration:none;background:linear-gradient(var(--bp3),var(--bp3)) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease),color .2s}
.tk-os .o-lk::after{content:"→";display:inline-block;font-family:var(--display);transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.tk-os .o-lk:hover{background-image:linear-gradient(var(--t0),var(--t0))}}@media (hover:hover) and (pointer:fine){.tk-os .o-lk:hover::after{transform:translateX(3px)}}
.tk-os .o-cur{display:inline-block;width:.5em;height:1em;background:var(--org);vertical-align:-.12em;animation:o-blink 1.1s steps(1) infinite}
@keyframes o-blink{50%{opacity:0}}
.tk-os .o-ld{display:block;height:4px;min-width:24px;color:rgba(233,230,223,.2);background:radial-gradient(circle,currentColor 1.1px,transparent 1.5px) 0 50%/8px 4px repeat-x;transition:color .35s}

/* buttons: the site's own, toned for the black ground */
.tk-os.o .bx{height:48px;padding:0 20px;font:500 15px/1 var(--sans);letter-spacing:-.01em;text-transform:none}

.tk-os.o .bx.line{color:var(--t0);box-shadow:inset 0 0 0 1px var(--ln2)}@media (hover:hover) and (pointer:fine){.tk-os.o .bx.line:hover{background:rgba(233,230,223,.06)}}
.tk-os.o .bx.cream{background:var(--t0);color:#0A0A0A}@media (hover:hover) and (pointer:fine){.tk-os.o .bx.cream:hover{background:#fff}}
.tk-os.o .bx.o-soon,.tk-os.o .bx[aria-disabled="true"]{background:transparent;color:var(--t1);box-shadow:inset 0 0 0 1px var(--ln2);cursor:default;gap:10px}
.tk-os.o .bx.o-soon i,.tk-os.o .bx[aria-disabled="true"] i{width:5px;height:5px;background:var(--org)}
.tk-os .o-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tk[data-repo="pre"] .tk-os .rp-live,.tk[data-repo="live"] .tk-os .rp-pre{display:none !important}
.tk-os .o-wlx{display:none;margin-top:14px;width:min(440px,100%)}
.tk-os .o-wlx.open{display:block}
.tk-os.o .wl{display:flex;align-items:center;height:52px;padding:4px;border-radius:8px !important;background:var(--k2);box-shadow:inset 0 0 0 1px var(--ln2)}
.tk-os.o .wl:focus-within{box-shadow:inset 0 0 0 1px rgba(233,230,223,.45)}
.tk-os.o .wl input{flex:1;min-width:0;width:0;height:100%;border:0;outline:0;background:transparent;padding:0 12px;color:var(--t0);font:400 15px var(--sans);box-shadow:none !important}
.tk-os.o .wl input::placeholder{color:rgba(233,230,223,.4)}
.tk-os.o .wl .bx{height:44px;border-radius:6px !important;background:var(--org);color:#fff}
.tk-os.o .wl-msg{margin:8px 0 0;font:400 13px/1.5 var(--sans);color:var(--t1)}

/* window chrome: terminal */
.tk-os .o-win{border:1px solid var(--ln2);border-radius:10px;background:var(--k1);overflow:hidden;box-shadow:0 50px 100px -50px #000}
.tk-os .o-wt{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-bottom:1px solid var(--ln);font:400 12.5px/1 var(--display);color:var(--t2)}
.tk-os .o-wt i{width:9px;height:9px;border-radius:50%;background:#262624}
.tk-os .o-wt span{margin-left:9px}

/* the phone: a plain dark frame around the real screens; the OS runs on more than one phone */
.tk-os .o-ph{--pad2:calc(var(--w) * .028);--r:calc(var(--w) * .118);position:relative;z-index:1;width:var(--w);padding:var(--pad2);box-sizing:border-box;border-radius:calc(var(--r) + var(--pad2));background:#1E1E1E;flex:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 1px #050505,0 0 0 2px #2A2A29,0 60px 90px -40px #000,0 30px 60px -30px rgba(0,0,0,.8)}
.tk-os .o-scr{position:relative;aspect-ratio:412/917;border-radius:var(--r);overflow:hidden;background:#1E1E1E;transform:translateZ(0)}
.tk-os .o-scr img,.tk-os .o-scr video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.tk-os .o-scr .on{opacity:1}

/* ---------- 00 the line, and the stack ---------- */
.tk-os .o-hero{min-height:max(760px,100svh);padding:84px 0 clamp(36px,6vh,64px);box-sizing:border-box;display:flex;overflow:hidden}
.tk-os .o-hero::before{content:"";position:absolute;inset:0;background:var(--dotbg);-webkit-mask:linear-gradient(180deg,transparent 8%,#000 46%,#000 70%,transparent);mask:linear-gradient(180deg,transparent 8%,#000 46%,#000 70%,transparent);pointer-events:none}
.tk-os .o-hero .o-wrap{position:relative;width:100%;display:flex;flex-direction:column;--h1:clamp(32px,calc((min(100vw,1240px) - 2 * var(--pad)) * .045),56px)}
.tk-os .o-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--ln);font:400 13px/1 var(--display);letter-spacing:var(--sls);color:var(--t2)}
.tk-os .o-id{display:inline-flex;align-items:center;gap:12px;color:var(--t0);font-weight:500;letter-spacing:0}
.tk-os .o-id .o-cur{width:8px;height:15px}
.tk-os .o-hgrid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px);padding-top:clamp(20px,4vh,48px)}
.tk-os .o-hl{position:relative;z-index:2}
.tk-os .o-hl .o-p{margin-top:clamp(22px,3.4vh,36px);max-width:42ch}

.tk-os .o-hact{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(24px,3.6vh,36px)}
/* the phone from Home: it opens into its parts over a drawing of itself */
.tk-os .o-hv{position:relative;z-index:1;align-self:stretch;min-height:clamp(360px,50vh,600px);--bk:0}
/* a dim backdrop behind the phone, so its black parts keep an edge against the black page */
.tk-os .o-hv::before{content:"";position:absolute;left:-12%;right:-12%;top:-14%;bottom:-14%;background:radial-gradient(46% 44% at 52% 50%,rgba(233,230,223,.07),rgba(233,230,223,.025) 55%,transparent);opacity:var(--bk);pointer-events:none}
.tk-os .o-hv canvas{position:absolute;left:-8%;top:-15%;width:116%;height:130%;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
.tk-os .o-hv.ready canvas{opacity:1}
.tk-os .o-hbp{position:absolute;left:-30%;right:-30%;top:-16%;bottom:-16%;pointer-events:none;color:rgb(233,230,223);-webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 46%,transparent 96%);mask:radial-gradient(50% 50% at 50% 50%,#000 46%,transparent 96%)}
.tk-os .o-hbp svg{position:absolute;inset:0;display:block;fill:none;stroke:currentColor;stroke-width:.75}
.tk-os .o-hbp .bp-g{opacity:min(1,calc(var(--bk) * 2.2))}
.tk-os .o-hbp .bp-t{opacity:max(0,calc(var(--bk) * 1.6 - .5))}
.tk-os .o-hbp .bp-d>*{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--bk))}
.tk-os .o-lw{color:var(--t0) !important;text-decoration:none;background:linear-gradient(var(--bp3),var(--bp3)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .25s,background-image .25s}
.tk-os .o-lw.lit{background-image:linear-gradient(var(--t0),var(--t0))}@media (hover:hover) and (pointer:fine){.tk-os .o-lw:hover{background-image:linear-gradient(var(--t0),var(--t0))}}
.tk-os .o-stack{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2vw,28px);margin-top:clamp(20px,3vh,40px)}
.tk-os .o-stack a{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:5px;align-content:start;padding-top:18px;border-top:1px solid var(--ln2);text-decoration:none}
.tk-os .o-stack a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--t0);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.tk-os .o-stack a::after{content:"";position:absolute;left:-3px;top:-4px;width:7px;height:7px;box-sizing:border-box;border:1px solid var(--bp3);background:var(--k0);transition:background .3s,border-color .3s}
.tk-os .o-stack .o-dn{grid-row:span 5;padding-top:1px}
.tk-os .o-stack strong{font:500 19px/1.15 var(--display);letter-spacing:var(--tls);color:var(--t0);margin-bottom:6px}
.tk-os .o-stack span{grid-column:2;font:400 14px/1.4 var(--sans);letter-spacing:var(--sls);color:var(--t2);transition:color .35s}
.tk-os .o-stack a.lit::before{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){.tk-os .o-stack a:hover::before{transform:scaleX(1)}}
.tk-os .o-stack a.lit::after{background:var(--t0);border-color:var(--t0)}@media (hover:hover) and (pointer:fine){.tk-os .o-stack a:hover::after{background:var(--t0);border-color:var(--t0)}}
.tk-os .o-stack a.lit .o-dn{color:var(--org)}@media (hover:hover) and (pointer:fine){.tk-os .o-stack a:hover .o-dn{color:var(--org)}}
.tk-os .o-stack a.lit span{color:var(--t1)}@media (hover:hover) and (pointer:fine){.tk-os .o-stack a:hover span{color:var(--t1)}}

/* ---------- section scaffolding ---------- */
.tk-os .o-sec{padding:clamp(110px,15vh,180px) 0;border-top:1px solid var(--ln)}
.tk-os .o-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,96px);align-items:end}
.tk-os .o-hd2{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:6px}
.tk-os .o-txt{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- 01 interface: pinned; a leader runs from the idea to a bracket on the phone ---------- */
.tk-os .o-lyr{height:330vh;border-top:1px solid var(--ln)}
.tk-os .o-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.tk-os .o-lgrid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(40px,7vw,120px);align-items:center;padding-top:40px}
.tk-os .o-lyr .o-txt .o-p{margin-top:22px}
.tk-os .o-modes{list-style:none;margin:30px 0 26px;padding:0;width:100%;max-width:440px}

.tk-os .o-modes li{position:relative;border-top:1px solid var(--ln)}
.tk-os .o-modes li:last-child{border-bottom:1px solid var(--ln)}
.tk-os .o-modes button{display:grid;grid-template-columns:36px 1fr;align-items:center;width:100%;padding:17px 0;text-align:left;cursor:pointer}
.tk-os .o-modes strong{font:500 var(--tfs)/var(--tlh) var(--display);letter-spacing:var(--tls);color:var(--t2);transition:color .35s}
.tk-os .o-modes li.on strong{color:var(--t0)}@media (hover:hover) and (pointer:fine){.tk-os .o-modes button:hover strong{color:var(--t0)}}
.tk-os .o-modes li.on .o-n{color:var(--t0)}
.tk-os .o-modes p{margin:0;padding:0 0 0 36px;max-width:40ch;max-height:0;overflow:hidden;opacity:0;font:400 var(--sfs)/var(--slh) var(--sans);letter-spacing:var(--sls);color:var(--t1);transition:max-height .55s var(--ease),opacity .4s,padding .55s var(--ease)}

.tk-os .o-modes li.on p{max-height:11em;opacity:1;padding-bottom:20px}
.tk-os .o-leads{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.tk-os .o-leads .ln{fill:none;stroke:var(--bp3);stroke-width:1;shape-rendering:crispEdges}
.tk-os .o-leads .br{fill:none;stroke:var(--t0);stroke-width:1;shape-rendering:crispEdges}
.tk-os .o-leads .nd{fill:var(--k0);stroke:var(--t0);stroke-width:1}
.tk-os .o-leads .tip{fill:var(--org)}
.tk-os .o-stage{position:relative;justify-self:center;--w:clamp(240px,calc((100svh - 190px) * .449),330px)}
.tk-os .o-ask{position:absolute;left:50%;bottom:6%;margin-left:calc(var(--w) * -.5 + 12px);z-index:4;display:flex;align-items:center;gap:16px;height:50px;padding:0 8px 0 18px;border-radius:14px 14px 4px 14px;background:var(--t0);color:#0A0A0A;white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .45s,transform .55s var(--ease);box-shadow:0 24px 40px -22px #000;pointer-events:none}
.tk-os .o-ask.on{opacity:1;transform:none;pointer-events:auto}
.tk-os .o-q{font:500 15px/1 var(--sans);letter-spacing:var(--sls);min-width:1ch}
.tk-os .o-q::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--org);animation:o-blink 1s steps(1) infinite}
.tk-os .o-sw{display:flex;gap:5px;padding-left:12px;border-left:1px solid rgba(10,10,10,.12)}
.tk-os .o-sw button{width:24px;height:34px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(10,10,10,.14);transition:box-shadow .25s,transform .2s}
.tk-os .o-sw button:nth-child(1){background:linear-gradient(170deg,#050505 30%,#1A3FB8 72%,#9DB2EA)}.tk-os .o-sw button:nth-child(2){background:linear-gradient(170deg,#050505 30%,#5E6577 78%,#B9BDC6)}.tk-os .o-sw button:nth-child(3){background:linear-gradient(170deg,#050505 30%,#4A4A4C 76%,#D6D6D6)}
.tk-os .o-sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--t0),0 0 0 3px #0A0A0A}
.tk-os .o-sw button:active{transform:scale(.94)}

/* ---------- 02 apps: one signal runs through three apps ---------- */
.tk-os .o-thread{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(72px,11vh,128px);--w:clamp(214px,19vw,262px)}
.tk-os .o-thr{position:absolute;left:calc(-1 * var(--pad));top:0;width:calc(100% + 2 * var(--pad));height:100%;z-index:0;pointer-events:none;overflow:visible;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tk-os .o-thr .base{fill:none;stroke:var(--bp2);stroke-width:1;stroke-dasharray:2 4;shape-rendering:crispEdges}
.tk-os .o-thr .run{fill:none;stroke:var(--bp3);stroke-width:1;shape-rendering:crispEdges}
.tk-os .o-thr .nd{fill:var(--k0);stroke:var(--bp3);stroke-width:1;transition:fill .3s,stroke .3s}
.tk-os .o-thr .nd.on{fill:var(--t0);stroke:var(--t0)}
.tk-os .o-col{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;gap:46px}
.tk-os .o-col figcaption{display:grid;grid-template-columns:30px 1fr;row-gap:10px;width:calc(var(--w) + 30px);margin-left:-30px}
.tk-os .o-col figcaption .o-n{align-self:center}
.tk-os .o-col figcaption strong{font:500 var(--tfs)/var(--tlh) var(--display);letter-spacing:var(--tls);color:var(--t1);transition:color .4s}
.tk-os .o-col figcaption span{grid-column:2;font:400 var(--sfs)/var(--slh) var(--sans);letter-spacing:var(--sls);color:var(--t2);transition:color .4s}
.tk-os .o-col.hit figcaption strong{color:var(--t0)}.tk-os .o-col.hit figcaption span{color:var(--t1)}.tk-os .o-col.hit .o-n{color:var(--t0)}

/* ---------- 03 hardware: a phone, drawn ---------- */
.tk-os .hwph{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;--dk:0}
.tk-os .hwph.on{opacity:1}
.tk-os .hwcard{position:absolute;left:0;top:0;transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform;--t:30}
.tk-os .hwph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tk-os .hwph svg.bk{transform:translateZ(calc(var(--u) * var(--t) / 2))}
.tk-os .hwph svg.ft{transform:rotateY(180deg) translateZ(calc(var(--u) * var(--t) / 2))}
/* the two long edges: a strip each, with the seam and the buttons drawn on */
.tk-os .hwph .sd{position:absolute;left:50%;top:50%;width:calc(var(--u) * var(--t));height:calc(var(--u) * 540);margin:calc(var(--u) * -270) 0 0 calc(var(--u) * var(--t) / -2);box-sizing:border-box;
 background:linear-gradient(rgba(233,230,223,.3),rgba(233,230,223,.3)) 50% 0/1px 100% no-repeat,#0D0D0C;border:1px solid rgba(233,230,223,.5);border-radius:calc(var(--u) * 6);opacity:var(--dk)}
.tk-os .hwph .sd.l{transform:translateX(calc(var(--u) * -150)) rotateY(-90deg)}
.tk-os .hwph .sd.r{transform:translateX(calc(var(--u) * 150)) rotateY(90deg)}
.tk-os .hwph .body{fill:#0D0D0C;fill-opacity:var(--dk)}
.tk-os .hwph .tex{fill:url(#hwdots);opacity:calc(var(--dk) * .9)}
.tk-os .hwph #hwdots circle{fill:rgba(233,230,223,.1)}
.tk-os .hwph .sheen{fill:url(#hwsh);opacity:var(--dk)}
.tk-os .hwph .l1,.tk-os .hwph .l2,.tk-os .hwph .l3,.tk-os .hwph .l4{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .5s}
.tk-os .hwph .l1{stroke:rgba(233,230,223,.62)}
.tk-os .hwph .l2{stroke:rgba(233,230,223,.36)}
.tk-os .hwph .l3{stroke:rgba(233,230,223,.18)}
.tk-os .hwph .l4{stroke:rgba(233,230,223,.16);stroke-dasharray:2 4}
.tk-os .hwph .d>*:not(.l4),.tk-os .hwph .d g>*{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--dk))}
.tk-os .hwph .d .l4{opacity:var(--dk)}
.tk-os .hwph [data-h].on>*{stroke:var(--t0)}
.tk-os .hwph .scr{opacity:var(--dk)}
.tk-os .hwph .scr image{transition:opacity .7s var(--ease)}.tk-os .hwph .scr .s2{opacity:0}.tk-os .hwph .scr.bot .s2{opacity:1}
.tk-os .lm{position:relative;background:var(--k0)}
.tk-os #hardware{height:300vh;border-top:1px solid var(--ln)}
.tk-os .lm .pinbg{background:var(--k0)}
.tk-os .lm .pinbg::before{content:"";position:absolute;inset:0;background:var(--dotbg);-webkit-mask:radial-gradient(70% 80% at 62% 50%,#000,transparent 80%);mask:radial-gradient(70% 80% at 62% 50%,#000,transparent 80%)}
.tk-os .lm .in{position:absolute;z-index:3;left:max(var(--pad),calc((100% - 1240px)/2 + var(--pad)));top:50%;transform:translateY(-50%);width:min(40vw,500px)}
.tk-os .lm .in .o-p{margin-top:20px;max-width:40ch}

.tk-os .lm .modes{list-style:none;padding:0;margin:28px 0 24px;display:flex;flex-direction:column;gap:6px}
.tk-os .lm .modes li{padding:16px 18px;border-radius:12px;opacity:.45;transition:opacity .35s,background .35s,box-shadow .35s;cursor:pointer}
.tk-os .lm .modes li.on{opacity:1;background:rgba(14,22,34,.55);box-shadow:inset 0 0 0 1px rgba(226,236,250,.13);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tk-os .lm .modes b{font:500 var(--tfs)/var(--tlh) var(--display);letter-spacing:var(--tls);color:var(--t0)}
.tk-os .lm .modes>li>span{display:grid;grid-template-rows:0fr;margin-top:0;font:400 var(--sfs)/var(--slh) var(--sans);letter-spacing:var(--sls);color:var(--t1);transition:grid-template-rows .4s var(--ease),margin .4s}
.tk-os .lm .modes>li>span>span{overflow:hidden}
.tk-os .lm .modes>li.on>span{grid-template-rows:1fr;margin-top:6px}
.tk-os .bay{position:absolute;z-index:3;right:max(var(--pad),calc((100% - 1240px)/2 + var(--pad)));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;padding:16px 14px;border-radius:6px;background:linear-gradient(#24262b,#17181c);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.05),0 24px 50px -30px #000;opacity:0;transition:opacity .45s;pointer-events:none}
.tk-os .bay.on{opacity:1}
.tk-os .jack{display:flex;align-items:center;gap:12px;font:500 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:rgba(226,236,250,.6)}

.tk-os .jack i{position:relative;width:26px;height:26px;border-radius:50%;flex:none;background:radial-gradient(circle,#050608 0 34%,#8d9097 36% 52%,#d8dade 56%,#7d8087 74%,#2a2c31 76%)}
.tk-os .jack i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--t0);opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--spring)}
.tk-os .jack.on i::after{opacity:1;transform:none}
.tk-os .jack.on{color:var(--t0)}
.tk-os #clines{z-index:2}
/* callouts sit on top of the phone, so each line carries a dark under-stroke and ends in a ring, not on the surface */
.tk-os #clines .halo{fill:none;stroke:rgba(5,7,10,.72);stroke-width:4;stroke-linecap:round}
.tk-os #clines .trace{fill:none;stroke:rgba(226,236,250,.42);stroke-width:1;shape-rendering:crispEdges}
.tk-os #clines .ring{fill:rgba(5,7,10,.35);stroke:rgba(242,239,232,.9);stroke-width:1}
.tk-os #clines .dot{fill:var(--t0)}
.tk-os #clines .dash{fill:none;stroke:rgba(226,236,250,.5);stroke-width:1;stroke-dasharray:2 4}
.tk-os .room{position:absolute;inset:0;opacity:var(--rm,0);background:#0B1119}
.tk-os .room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:51% 50%}
.tk-os .room img.lt{mix-blend-mode:screen;opacity:0;transition:opacity 1.1s var(--ease)}
.tk-os .room img.lt.on{opacity:1}
.tk-os .room img.lt[data-k="spk"].on{animation:o-breathe 2.6s ease-in-out infinite}
.tk-os .room img.lt[data-k="bot"].on{animation:o-boot .9s steps(1) both}
@keyframes o-breathe{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes o-boot{0%{opacity:0}12%{opacity:.7}20%{opacity:.1}34%{opacity:.9}44%{opacity:.35}60%{opacity:1}}
.tk-os .room::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,14,22,.62),rgba(9,14,22,.15) 50%,transparent 70%)}
.tk-os .spot{position:absolute;z-index:3;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(226,236,250,.5);opacity:0;transition:opacity .4s,box-shadow .3s;will-change:transform;pointer-events:none;cursor:pointer}
.tk-os .spot.on{opacity:1;pointer-events:auto}
@media (hover:hover) and (pointer:fine){.tk-os .spot:hover{box-shadow:inset 0 0 0 1px rgba(255,236,214,.9)}}
.tk-os .spot[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(226,236,250,.22)}
.tk-os .spot::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(255,220,180,.7);opacity:0}
.tk-os .spot.lit::after{animation:o-ring 1.4s var(--ease) 1}
@keyframes o-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.tk-os .lm .note{position:absolute;z-index:3;right:max(var(--pad),calc((100% - 1240px)/2 + var(--pad)));bottom:36px;font:400 12.5px/1 var(--sans);color:var(--t2);opacity:0;transition:opacity .4s}
.tk-os .lm .note.on{opacity:1}

/* ---------- 04 system: the source tree is the diagram ---------- */
.tk-os .o-tree{--fs:clamp(26px,3vw,42px);--lh:1.15;--py:22px;--tx:calc(var(--fs) * .32);margin-top:clamp(56px,8vh,96px)}
.tk-os .o-tr{position:relative;display:grid;grid-template-columns:minmax(150px,auto) minmax(32px,1fr) minmax(0,38ch);align-items:start;column-gap:22px;padding:var(--py) 0}

.tk-os .o-tr:not(.root){padding-left:calc(var(--fs) * 1.5)}
.tk-os .o-tr:not(.root)::before{content:"";position:absolute;left:var(--tx);top:0;bottom:0;width:1px;background:var(--bp2)}
.tk-os .o-tr.last::before{bottom:auto;height:calc(var(--py) + var(--fs) * var(--lh) / 2)}
.tk-os .o-tr:not(.root)::after{content:"";position:absolute;left:var(--tx);top:calc(var(--py) + var(--fs) * var(--lh) / 2);width:calc(var(--fs) * .9);height:1px;background:var(--bp2);transition:background .4s}
.tk-os .o-tr code{font:400 var(--fs)/var(--lh) var(--mono);letter-spacing:-.03em;color:var(--t2);white-space:pre;transition:color .4s}
.tk-os .o-tr.root{padding-bottom:6px}
.tk-os .o-tr.root code{color:var(--t1)}
.tk-os .o-rn{margin:0;padding-top:calc(var(--fs) * var(--lh) / 2 - 11px);font:400 var(--sfs)/var(--slh) var(--sans);letter-spacing:var(--sls);color:var(--t2)}
.tk-os .o-tr .o-ld{margin-top:calc(var(--fs) * var(--lh) / 2 - 2px)}
.tk-os .o-td{padding-top:calc(var(--fs) * var(--lh) / 2 - 11px)}
.tk-os .o-td strong{display:block;font:500 var(--tfs)/var(--tlh) var(--display);letter-spacing:var(--tls);color:var(--t1);transition:color .4s}
.tk-os .o-td p{margin:8px 0 0;font:400 var(--sfs)/var(--slh) var(--sans);letter-spacing:var(--sls);color:var(--t2);transition:color .4s}
.tk-os .o-td small{display:block;margin-top:8px;font:400 13px/1.5 var(--sans);letter-spacing:var(--sls);color:var(--t2)}
.tk-os .o-tr.on code{color:var(--t0)}
.tk-os .o-tr.on::after{background:var(--t0)}
.tk-os .o-tr.on .o-ld{color:var(--t1)}
.tk-os .o-tr.on .o-td strong{color:var(--t0)}.tk-os .o-tr.on .o-td p{color:var(--t1)}

/* ---------- 05 plugins: modules wired down to one bus ---------- */
.tk-os .o-bus{position:relative;margin-top:clamp(64px,9vh,112px);padding:28px 28px 34px;--gap:48px}
.tk-os .o-bus::after{content:"";position:absolute;inset:0;background:var(--grid);pointer-events:none;-webkit-mask:radial-gradient(80% 90% at 50% 60%,#000 40%,transparent);mask:radial-gradient(80% 90% at 50% 60%,#000 40%,transparent)}
.tk-os .o-bus h3{position:relative;z-index:1;margin:0 0 26px;font:400 14px/1 var(--display);letter-spacing:var(--sls);color:var(--t1)}
.tk-os .o-carts,.tk-os .o-rail{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px}
.tk-os .o-cart{position:relative;min-height:clamp(128px,11vw,150px);padding:20px 20px 18px;box-sizing:border-box;background:var(--k0);border:1px solid var(--bp2);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transform:translateY(var(--dy,-20px));opacity:0;transition:transform .9s var(--ease),opacity .6s,border-color .3s}
.tk-os .o-cart strong{display:flex;align-items:center;gap:6px;font:500 19px/1.2 var(--display);letter-spacing:var(--tls);color:var(--t0)}
.tk-os .o-cart span{font:400 14.5px/1.5 var(--sans);letter-spacing:var(--sls);color:var(--t1)}
.tk-os .o-cart::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(var(--gap) + 1px);background:var(--bp3);transform-origin:top;transform:scaleY(0);transition:transform .5s var(--ease) .55s}
.tk-os .o-cart.dim{border-color:var(--bp)}
.tk-os .o-cart.dim strong,.tk-os .o-cart.dim span{color:var(--t2)}
.tk-os .o-cart.dim::after,.tk-os .o-cart.you::after{background:linear-gradient(var(--bp3) 50%,transparent 0) 0 0/1px 6px repeat-y}
.tk-os .o-cart.you{background:transparent;border:1px dashed var(--bp3)}
.tk-os .o-cart.you .o-cur{width:9px;height:18px}
@media (hover:hover) and (pointer:fine){.tk-os .o-cart:hover{border-color:var(--bp3)}}
.tk-os .o-bus.in .o-cart{--dy:0px;opacity:1}
.tk-os .o-bus.in .o-cart::after{transform:scaleY(1)}
/* light runs down each wire into the bus */
.tk-os .o-bus.in .o-cart:not(.dim):not(.you)::after{background:linear-gradient(transparent,var(--t0) 78%,transparent) 0 0/1px 64% no-repeat,var(--bp3);animation:o-wire 2.8s linear infinite}
.tk-os .o-bus .o-cart:nth-child(2)::after{animation-delay:.5s}.tk-os .o-bus .o-cart:nth-child(3)::after{animation-delay:1s}.tk-os .o-bus .o-cart:nth-child(4)::after{animation-delay:1.5s}
@keyframes o-wire{0%{background-position:0 -200%,0 0}55%,100%{background-position:0 380%,0 0}}
@media (prefers-reduced-motion:reduce){.tk-os .o-bus .o-cart::after{animation:none !important}}
.tk-os .o-bus .o-cart:nth-child(2){transition-delay:.08s}.tk-os .o-bus .o-cart:nth-child(3){transition-delay:.16s}.tk-os .o-bus .o-cart:nth-child(4){transition-delay:.24s}
.tk-os .o-bus .o-cart:nth-child(2)::after{transition-delay:.63s}.tk-os .o-bus .o-cart:nth-child(3)::after{transition-delay:.71s}.tk-os .o-bus .o-cart:nth-child(4)::after{transition-delay:.79s}
/* the bus: two hairlines, end caps, the name on the line */
.tk-os .o-rail{margin-top:var(--gap);height:9px;border-top:1px solid var(--t0);border-bottom:1px solid var(--t0);align-items:center}
.tk-os .o-rail::before,.tk-os .o-rail::after{content:"";position:absolute;top:-7px;bottom:-7px;width:1px;background:var(--t0)}
.tk-os .o-rail::before{left:0}.tk-os .o-rail::after{right:0}
.tk-os .o-rail span{position:absolute;left:18px;top:50%;transform:translateY(-50%);padding:0 10px;background:var(--k0);font:500 15px/1 var(--display);letter-spacing:-.01em;color:var(--t0);z-index:1}
.tk-os .o-rail i{justify-self:center;width:9px;height:9px;box-sizing:border-box;border:1px solid var(--t0);background:var(--k0);transform:rotate(45deg);transition:background .3s .9s}
.tk-os .o-bus.in .o-rail i.on{background:var(--t0)}

/* ---------- 06 dev kit: the route, drawn like a schematic ---------- */
.tk-os .o-dk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:center}
.tk-os .o-dk .o-p{margin-top:24px}
.tk-os .o-dk .o-btns{margin-top:32px;gap:18px}
.tk-os .o-route{position:relative;margin:0;--rg:28px}
.tk-os .o-route::after{content:"";position:absolute;inset:calc(-1 * var(--rg));background:var(--grid);pointer-events:none;-webkit-mask:radial-gradient(75% 75% at 50% 50%,#000 30%,transparent);mask:radial-gradient(75% 75% at 50% 50%,#000 30%,transparent)}
.tk-os .o-route svg{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible}
.tk-os .o-route .bx3 rect{fill:var(--k0);stroke:var(--bp3);shape-rendering:crispEdges}
.tk-os .o-route .lb3 text,.tk-os .o-route .rtt,.tk-os .o-route .ost{font:400 13px var(--display);text-anchor:middle;fill:var(--t1)}
.tk-os .o-route .tr3 path{fill:none;stroke:rgba(233,230,223,.38);stroke-width:1;shape-rendering:crispEdges}
.tk-os .o-route .nd3 circle{fill:var(--k0);stroke:var(--t0)}
.tk-os .o-route .rt,.tk-os .o-route .os{fill:var(--k0);stroke:var(--t0);shape-rendering:crispEdges}
.tk-os .o-route .rt2,.tk-os .o-route .os2{fill:none;stroke:var(--bp2);shape-rendering:crispEdges}
.tk-os .o-route .rtt{fill:var(--t0);font-size:15px}
.tk-os .o-route .ost{fill:var(--t0);font-size:16px;font-weight:500}
.tk-os .o-ann p{position:absolute;z-index:1;margin:0;font:400 13.5px/1.55 var(--sans);letter-spacing:var(--sls);color:var(--t1);text-wrap:pretty}
.tk-os .o-ann .a1{left:21.4%;top:24.6%;width:31%}
.tk-os .o-ann .a2{left:72.2%;top:56.4%;width:25%}
.tk-os .o-route .tk3 path{fill:none;stroke:var(--t1);stroke-width:1;shape-rendering:crispEdges}


/* ---------- 07 compatibility: a spec sheet with leaders ---------- */
.tk-os .o-cmpg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.tk-os .o-cq{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.tk-os .o-cq .o-h2{max-width:9ch;font-size:clamp(40px,4.6vw,72px);line-height:.98}

.tk-os .o-cmp{display:flex;flex-direction:column;gap:56px}
.tk-os .o-cg h3{margin:0 0 8px;padding-bottom:14px;border-bottom:1px solid var(--ln);font:400 14px/1 var(--display);letter-spacing:var(--sls);color:var(--t2)}
.tk-os .o-cl{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center;column-gap:16px;padding:16px 0}
.tk-os .o-cl strong{font:500 clamp(18px,1.6vw,22px)/1.25 var(--display);letter-spacing:var(--tls);color:var(--t0)}

.tk-os .o-cn{margin:-10px 0 8px;max-width:48ch;font:400 14px/1.55 var(--sans);letter-spacing:var(--sls);color:var(--t2)}

.tk-os .o-s{display:inline-flex;align-items:center;gap:9px;font:400 15px/1 var(--sans);letter-spacing:var(--sls);color:var(--t1);white-space:nowrap}
.tk-os .o-s::before{content:"";width:7px;height:7px;box-sizing:border-box}
.tk-os .o-s.ok{color:var(--t0)}.tk-os .o-s.ok::before{background:var(--t0)}
.tk-os .o-s.op::before{box-shadow:inset 0 0 0 1px var(--t1)}
.tk-os .o-s.nx{color:var(--t1)}.tk-os .o-s.nx::before{background:linear-gradient(135deg,var(--t1) 50%,transparent 50%);box-shadow:inset 0 0 0 1px var(--t1)}
.tk-os .o-rp{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;padding:20px 0 0;border-top:1px dashed var(--bp2);font:400 14px/1.55 var(--sans);letter-spacing:var(--sls);color:var(--t2)}
.tk-os .o-rp b{font:500 14px/1.55 var(--display);letter-spacing:0;color:var(--t1);white-space:nowrap}


/* ---------- 08 get started: four steps on one spine, or skip them ---------- */
.tk-os .o-inst{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(56px,8vh,96px)}
.tk-os .o-steps{list-style:none;margin:0;padding:0;position:relative;--sx:16px}
.tk-os .o-steps::before{content:"";position:absolute;left:var(--sx);top:16px;bottom:16px;width:1px;background:var(--bp2)}
.tk-os .o-steps::after{content:"";position:absolute;left:var(--sx);top:16px;width:1px;height:calc((100% - 32px) * var(--k,0));background:var(--t0)}
.tk-os .o-steps>li{position:relative;display:grid;grid-template-columns:33px 1fr;column-gap:clamp(20px,2.4vw,32px);padding-bottom:clamp(34px,4.6vh,48px)}
.tk-os .o-steps>li:last-child{padding-bottom:0}
.tk-os .o-sn{position:relative;z-index:1;display:grid;place-items:center;width:33px;height:33px;box-sizing:border-box;border:1px solid var(--bp3);background:var(--k0);transition:border-color .4s,background .4s}
.tk-os .o-sn .o-dn{font-size:13px;color:var(--t1)}
.tk-os .o-steps>li.done .o-sn{border-color:var(--t0)}.tk-os .o-steps>li.done .o-sn .o-dn{color:var(--t0)}
.tk-os .o-steps>li.on .o-sn{border-color:var(--t0);background:var(--t0)}.tk-os .o-steps>li.on .o-sn .o-dn{color:#0A0A0A}
.tk-os .o-sb{padding-top:4px;min-width:0}
.tk-os .o-sb h3{margin:0;font:var(--hw) clamp(20px,1.8vw,24px)/1.3 var(--display);letter-spacing:var(--tls);color:var(--t0)}
.tk-os .o-sb>p{margin:10px 0 0;max-width:var(--pmw);font:400 var(--sfs)/var(--slh) var(--sans);letter-spacing:var(--sls);color:var(--t1)}
.tk-os .o-sb>.o-lk{margin-top:16px}
.tk-os .o-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;border:1px solid var(--bp2)}
.tk-os .o-opt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px 22px}
.tk-os .o-opt+.o-opt{border-left:1px solid var(--bp2)}
.tk-os .o-opt h4{margin:0;font:500 16px/1.3 var(--display);letter-spacing:var(--tls);color:var(--t0)}
.tk-os .o-opt p{margin:0 0 6px;font:400 14px/1.6 var(--sans);letter-spacing:var(--sls);color:var(--t2)}

.tk-os .o-opt .o-lk{margin-top:auto;font-size:14.5px}
.tk-os .o-off{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font:400 14px/1 var(--sans);color:var(--t2)}
.tk-os .o-off::before{content:"";width:5px;height:5px;background:var(--org)}
.tk-os .o-prompt{position:relative;display:flex;align-items:flex-start;gap:16px;margin-top:18px;padding:18px 18px 18px 20px;border:1px solid var(--bp2);background:var(--k1)}
.tk-os .o-prompt::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--org)}
.tk-os .o-prompt code{flex:1;min-width:0;font:400 13.5px/1.75 var(--mono);color:var(--t0);overflow-wrap:anywhere;word-break:normal}

.tk-os .o-copy{flex:none;height:32px;padding:0 12px;border:1px solid var(--bp3);background:transparent;color:var(--t0);font:500 13px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
@media (hover:hover) and (pointer:fine){.tk-os .o-copy:hover{background:var(--t0);color:#0A0A0A}}
.tk-os .o-copy.ok{border-color:var(--t0)}
.tk-os .o-way{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,2.6vw,38px);box-sizing:border-box;border:1px solid var(--bp2);overflow:hidden}
.tk-os .o-way h3{margin:0;font:var(--hw) clamp(26px,2.3vw,34px)/1.12 var(--display);letter-spacing:var(--h2ls);color:var(--t0)}
.tk-os .o-way.warm{background:radial-gradient(90% 60% at 50% 112%,rgba(255,120,60,.14),transparent 70%),var(--k1)}
.tk-os .o-way.warm .o-p{margin-top:14px;font-size:15.5px}
.tk-os .o-way.warm .o-btns{margin-top:24px;position:relative;z-index:2}
.tk-os .o-tp{position:relative;display:block;align-self:center;width:min(66%,290px);margin:clamp(28px,4vh,44px) 0 -34%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));pointer-events:none;transition:transform 1.2s var(--ease)}
@media (hover:hover) and (pointer:fine){.tk-os .o-way.warm:hover .o-tp{transform:translateY(-12px)}}

/* ---------- 09 community ---------- */
.tk-os .o-bh{max-width:12ch}
.tk-os .o-cgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,96px);align-items:stretch;margin-top:clamp(56px,8vh,96px)}
.tk-os .o-term pre{margin:0;padding:22px 22px 26px;min-height:320px;font:400 14px/1.8 var(--mono);color:var(--t1);white-space:pre-wrap;box-sizing:border-box}
.tk-os .o-term .pr{color:var(--t2)}.tk-os .o-term .mu{color:var(--t2)}
.tk-os .o-term .cur{display:inline-block;width:8px;height:1.05em;vertical-align:-.18em;background:var(--org);animation:o-blink 1.1s steps(1) infinite}
.tk-os .o-cside{display:flex;flex-direction:column;justify-content:flex-end;gap:22px}
.tk-os .o-links{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--ln)}
.tk-os .o-links>*{display:flex;justify-content:space-between;align-items:center;height:62px;padding:0 4px;border-top:1px solid var(--ln);text-decoration:none;transition:padding .35s var(--ease)}
.tk-os .o-links strong{font:400 clamp(22px,2vw,28px)/1 var(--display);letter-spacing:-.03em;color:var(--t0);transition:color .25s}

.tk-os .o-links em{font-style:normal;color:var(--t2);transition:color .25s,transform .3s var(--ease)}
.tk-os .o-links small{font:400 13px/1 var(--sans);color:var(--t2)}
.tk-os .o-links span strong{color:var(--t2)}
@media (hover:hover) and (pointer:fine){.tk-os .o-links a:hover{padding-left:12px}}
@media (hover:hover) and (pointer:fine){.tk-os .o-links a:hover em{color:var(--t0);transform:translate(2px,-2px)}}
.tk-os .o-cy{margin:0;max-width:40ch;font:400 14px/1.6 var(--sans);letter-spacing:var(--sls);color:var(--t2)}


/* ---------- 10 why: a field of dots comes up under the line ---------- */
.tk-os .o-why{min-height:min(920px,100svh);padding:clamp(120px,18vh,200px) 0 clamp(140px,20vh,220px);box-sizing:border-box;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--ln)}
.tk-os .o-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tk-os .o-why .o-wrap{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.tk-os .o-why .o-h2{max-width:none}
.tk-os .o-why .o-h2 em{font-style:normal;color:var(--org)}
.tk-os .o-why .o-p{max-width:52ch}

.tk-os .o-why .o-btns{justify-content:center;margin-top:8px}
.tk-os .o-why .o-wlx{margin:0 auto}

/* short laptop screens: the pinned Interface module tightens so it never runs under the bars */
@media (min-width:901px) and (max-height:880px){
 .tk-os .o-lgrid{padding-top:64px}
 .tk-os .o-lyr .o-dn.big{font-size:34px;margin-bottom:14px}
 .tk-os .o-lyr .o-h2{font-size:clamp(30px,5.4vh,46px)}
 
 .tk-os .o-lyr .o-txt .o-p{font-size:15.5px;line-height:1.55;margin-top:14px}
 
 .tk-os .o-modes{margin:18px 0 16px}.tk-os .o-modes button{padding:12px 0}.tk-os .o-modes strong{font-size:17px}
 .tk-os .o-modes p{font-size:14.5px;line-height:1.55}.tk-os .o-modes li.on p{padding-bottom:14px}
 
 .tk-os .o-stage{--w:clamp(220px,calc((100svh - 150px) * .449),330px)}
}
/* ---------- smaller screens ---------- */
@media (max-width:1080px){
 .tk-os .o-stack{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
 .tk-os .o-head,.tk-os .o-dk,.tk-os .o-cmpg,.tk-os .o-inst{grid-template-columns:1fr;align-items:start}
 .tk-os .o-cq,.tk-os .o-way{position:static}
 .tk-os .o-tr{grid-template-columns:auto minmax(24px,1fr);row-gap:10px}
 
 .tk-os .o-tr .o-td,.tk-os .o-tr .o-rn{grid-column:1/-1;padding-top:0}
}
@media (max-width:900px){
 .tk-os .o-hero{min-height:0}
 .tk-os .o-hgrid{grid-template-columns:1fr;gap:0}
 .tk-os .o-hv{min-height:min(100vw,500px);margin:12px 0 0}
 .tk-os .o-hero .o-wrap{--h1:clamp(28px,7.2vw,54px)}
 .tk-os .o-lyr{height:auto}
 .tk-os .o-pin{position:relative;height:auto;padding:110px 0 90px}
 .tk-os .o-lgrid{grid-template-columns:1fr;gap:56px;padding-top:0}
 .tk-os .o-leads{display:none}
 .tk-os .o-modes p{max-height:none;opacity:1;padding-bottom:18px}
 .tk-os .o-modes li strong{color:var(--t0)}
 .tk-os .o-stage{--w:min(300px,72vw);justify-self:center}
 .tk-os .o-ask{right:auto;left:50%;top:auto;bottom:-70px;margin-left:0;transform:translateX(-50%)}
 .tk-os .o-ask.on{transform:translateX(-50%)}
 .tk-os .o-stage{margin-bottom:80px}
 .tk-os .o-thread{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,300px);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding:20px var(--pad) 8px;scrollbar-width:none;--w:min(232px,60vw)}
 .tk-os .o-thread::-webkit-scrollbar{display:none}
 .tk-os .o-col{scroll-snap-align:start;align-items:flex-start;padding-left:18px}
 .tk-os .o-col figcaption{margin-left:-18px;width:auto}
 .tk-os .o-thr{display:none}
 .tk-os .o-col figcaption strong{color:var(--t0)}.tk-os .o-col figcaption span{color:var(--t1)}
 .tk-os .lm .in{left:var(--pad);right:var(--pad);width:auto;top:70px;transform:none}
 .tk-os .lm .in .o-dn.big{display:none}
 .tk-os .lm .in .o-h2{font-size:30px}.tk-os .lm .in .o-p{font-size:15px;margin-top:12px}
 
 
 .tk-os .lm .modes{margin:14px 0 12px}.tk-os .lm .modes li{padding:12px 14px}.tk-os .lm .modes b{font-size:16px}.tk-os .lm .modes>li>span{font-size:14px}
 .tk-os .bay{top:66%;right:var(--pad);gap:10px;padding:10px 10px 10px 9px}
 .tk-os .jack{gap:8px;font-size:8.5px;letter-spacing:.1em}
 .tk-os .jack i{width:20px;height:20px}.tk-os .jack i::after{inset:6px}
 
 .tk-os .lm .note{bottom:24px}
 .tk-os .o-ann{display:flex;flex-direction:column;gap:14px;margin-top:28px}
 .tk-os .o-ann p{position:static;width:auto !important}
 .tk-os .o-route .tk3{display:none}
 .tk-os .o-bus{padding:20px 0 26px;--gap:28px}
 .tk-os .o-carts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
 .tk-os .o-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tk-os .o-rail i{display:none}
 .tk-os .o-cart::after{display:none}
 .tk-os .o-opts{grid-template-columns:1fr}.tk-os .o-opt+.o-opt{border-left:0;border-top:1px solid var(--bp2)}
 .tk-os .o-cgrid{grid-template-columns:1fr}
}
@media (max-width:560px){
 .tk-os .o-hero{padding-top:80px}
 .tk-os .o-bar>span:last-child{display:none}
 .tk-os .o-h1 .l{white-space:normal}
 .tk-os .o-hero .o-wrap{--h1:clamp(28px,8.3vw,40px)}
 .tk-os .o-stack{grid-template-columns:1fr 1fr;gap:22px 16px}
 .tk-os .o-stack a{grid-template-columns:1fr;row-gap:8px;padding-top:14px}
 .tk-os .o-stack .o-dn{grid-row:auto;font-size:16px}
 .tk-os .o-stack strong{font-size:17px;margin:0}
 .tk-os .o-stack span{display:none}
 .tk-os .o-p{font-size:16px}
 
 .tk-os .o-tr code{font-size:24px}
 .tk-os .o-tr{grid-template-columns:auto minmax(16px,1fr)}
 .tk-os .o-cl{grid-template-columns:1fr auto;row-gap:6px}
 .tk-os .o-cl .o-ld{display:none}
 .tk-os .o-carts{grid-template-columns:1fr}
 .tk-os .o-steps{--sx:14px}.tk-os .o-steps>li{grid-template-columns:29px 1fr;column-gap:16px}.tk-os .o-sn{width:29px;height:29px}
 .tk-os .o-prompt{flex-direction:column}
 .tk-os .o-rp{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .tk-os.o *,.tk-os.o *::before,.tk-os.o *::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}
/* the shared footer, set for Chinese and Japanese */




/* ===== Home and OS on one page (Home Lab v0.20; v0.21 takes the new models) =====
   The first screen is Home's Dots hero carrying the OS line. Under it the phone opens into the four layers, then the OS page runs in full.
   The page ends on the two products. */
.tk-os{--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);--bounce:cubic-bezier(.34,1.56,.64,1);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --sky-clear:var(--grain),linear-gradient(180deg,#5F9BD6 0%,#86B7E4 40%,#B9D6F0 75%,#E2EEF8 100%)}

/* Taku's face, the full stop after the line */
.tk-os .tf{--tfc:#FF5A1F;--tfe:#FFF7EC;display:inline-block;position:relative;width:.3em;height:.3em;margin-left:.07em;border-radius:34%;background:var(--tfc);vertical-align:baseline;
 transform-origin:50% 100%;transform:scale(0);transition:background-color .5s ease;pointer-events:auto;cursor:default}
.tk-os #brand.lit .tf{animation:tfPop .7s var(--bounce) .9s both,tfHop 7.5s ease-in-out 3.5s infinite}
.tk-os .tf i{position:absolute;top:27%;width:13%;height:38%;border-radius:99px;background:var(--tfe);transform-origin:50% 50%;animation:tfBlink 4.8s infinite;animation-delay:var(--bd,1.2s);transition:transform .15s ease,top .15s ease,height .15s ease}
.tk-os .tf i:nth-child(1){left:30%}.tk-os .tf i:nth-child(2){left:57%}
@media (hover:hover) and (pointer:fine){.tk-os .tf:hover i{height:14%;top:38%;border-radius:99px 99px 2px 2px;animation:none}}
@keyframes tfPop{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes tfHop{0%,86%,100%{transform:none}90%{transform:translateY(-.14em) rotate(-8deg)}94%{transform:translateY(0) scale(1.06,.92)}97%{transform:none}}
@keyframes tfBlink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
.tk-os #brand .fscr{background:var(--sky-clear)}
.tk-os #brand .fglow{background:radial-gradient(50% 50% at 50% 50%,rgba(134,183,228,.22),rgba(134,183,228,.07) 55%,transparent 72%)}

/* the first screen sits on the OS page's black */
.tk-os #brand{border-radius:0;background-color:var(--k0);background-image:radial-gradient(64% 56% at 52% 52%,#161416 0%,#0C0B0C 62%,var(--k0) 100%)}
.tk-os #brand .bx.soon{gap:10px;cursor:default;color:rgba(241,236,226,.7)}
.tk-os #brand .bx.soon i{width:5px;height:5px;background:var(--org)}

/* the four layers: the phone alone, in the middle, with the stack under it */
.tk-os .o-open{min-height:0;display:block;padding:clamp(40px,7vh,88px) 0 clamp(44px,7vh,84px)}
.tk-os .o-open::before{-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.tk-os .o-open .o-hv{width:100%;height:clamp(420px,66vh,700px);min-height:0;max-width:1080px;margin:0 auto}
.tk-os .o-open .o-hv canvas{left:0;top:-5%;width:100%;height:110%}
.tk-os .o-open .o-hbp{left:-8%;right:-8%;top:-8%;bottom:-8%}
.tk-os .o-open .o-stack{margin-top:clamp(8px,2vh,28px)}
@media (max-width:900px){.tk-os .o-open .o-hv{height:min(108vw,540px);margin:0 auto}}

/* the second screen: one OS, two ways in. Each card carries the short way to the part of that page you came for */
.tk-os .o-prods{padding:clamp(88px,12vh,128px) 0}
.tk-os .o-eh{margin:0 0 clamp(28px,4.4vh,48px);max-width:none}
.tk-os .o-eh span,.tk-os .o-eh em{display:block}
.tk-os .o-eh em{font-style:normal;color:var(--t2)}
.tk-os .o-pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.4vw,20px)}
.tk-os .o-pc{position:relative;display:flex;flex-direction:column;border:1px solid var(--bp2);background:var(--k1);color:var(--t0);overflow:hidden;transition:border-color .4s}
@media (hover:hover) and (pointer:fine){.tk-os .o-pc:hover{border-color:var(--bp3)}}
.tk-os .o-pv{position:relative;display:block;height:clamp(260px,min(29vw,44vh),430px);overflow:hidden;background:var(--dotbg)}
.tk-os .o-pv::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 70% at 50% 66%,rgba(134,183,228,.2),rgba(134,183,228,.06) 55%,transparent 76%)}
.tk-os .o-pc.mc .o-pv::before{background:radial-gradient(62% 70% at 50% 66%,rgba(242,188,159,.17),rgba(212,182,198,.05) 55%,transparent 76%)}
.tk-os .o-duo{position:absolute;inset:9% 0;display:flex;justify-content:center;align-items:center;transition:transform .7s var(--e-out)}
.tk-os .o-duo img{display:block;height:100%;width:auto;max-width:none}
.tk-os .o-pbk{transform:translateX(6%)}
.tk-os .o-pft{position:relative;transform:translateX(-6%);filter:drop-shadow(-16px 12px 22px rgba(0,0,0,.5))}
.tk-os .o-pmac{position:absolute;left:50%;top:7%;height:86%;width:auto;max-width:none;display:block;transform:translateX(-50%);transition:transform .7s var(--e-out)}
@media (hover:hover) and (pointer:fine){.tk-os .o-pc:hover .o-duo{transform:translateY(-8px)}}
@media (hover:hover) and (pointer:fine){.tk-os .o-pc:hover .o-pmac{transform:translateX(-50%) translateY(-8px)}}
.tk-os .o-pt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 20px;padding:clamp(18px,1.8vw,26px) clamp(20px,2vw,28px);border-top:1px solid var(--ln);background:var(--k1)}
.tk-os .o-pt strong{grid-column:1;font:var(--hw) clamp(24px,2.1vw,30px)/1.1 var(--display);letter-spacing:var(--h2ls)}
.tk-os .o-pt>span{grid-column:1;font:400 15px/1.5 var(--sans);letter-spacing:var(--sls);color:var(--t1)}
.tk-os .o-pt .bx{grid-column:2;grid-row:1/span 2}
.tk-os .o-pn{position:relative;display:flex;flex-wrap:wrap;gap:0 clamp(14px,1.6vw,24px);padding:6px clamp(20px,2vw,28px) 10px;border-top:1px solid var(--ln);background:var(--k1)}
.tk-os .o-pn a{position:relative;padding:9px 0;font:400 14px/1.3 var(--sans);letter-spacing:var(--sls);color:var(--t2);text-decoration:none;transition:color .25s}
.tk-os .o-pn a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--t0);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tk-os .o-pn a:focus-visible{color:var(--t0)}@media (hover:hover) and (pointer:fine){.tk-os .o-pn a:hover{color:var(--t0)}}
.tk-os .o-pn a:focus-visible::after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){.tk-os .o-pn a:hover::after{transform:scaleX(1)}}
/* and the same two, as the last line of the page */
@media (max-width:760px){.tk-os .o-pgrid{grid-template-columns:1fr}.tk-os .o-pv{height:min(70vw,340px)}.tk-os .o-pt{grid-template-columns:1fr}.tk-os .o-pt .bx{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px}}
@media (prefers-reduced-motion:reduce){.tk-os #brand .l3,.tk-os .o-duo,.tk-os .o-pmac{transition:none}}

/* ===== v0.25: the site's structure =====
   what Taku OS is, over the place for the developer video */
.tk-os .tk-intro{padding-top:clamp(88px,13vh,150px)}
.tk-os .tk-intro .o-h2 em{font-style:normal;color:var(--org)}
.tk-os .tk-video{position:relative;display:grid;place-items:center;margin:clamp(48px,7vh,80px) 0 0;aspect-ratio:16/9;border:1px solid var(--ln2);border-radius:10px;background:var(--k1) var(--dotbg);overflow:hidden}
.tk-os .tk-video-play{width:72px;height:72px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--bp3)}
.tk-os .tk-video-play::after{content:"";display:block;margin:25px 0 0 30px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--t0)}
.tk-os .tk-video figcaption{position:absolute;left:20px;bottom:18px;display:flex;gap:12px;align-items:baseline;font:400 14px/1 var(--sans);color:var(--t1)}
.tk-os .tk-video figcaption small{font:400 12px/1 var(--mono);color:var(--t2)}
/* Marketplace, the third card: one wide row under the two devices. An endless shelf of apps, drawn in the hero's dots */
.tk-os .o-pc.mk{grid-column:1/-1}
.tk-os .o-pc.mk .o-pv{height:clamp(170px,17vw,236px);background:var(--k1)}
.tk-os .o-pc.mk .o-pv::before{z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,11,.72),rgba(12,12,11,0) 34%,rgba(12,12,11,0) 62%,rgba(12,12,11,.8))}
.tk-os .o-mkc{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
@media (max-width:760px){.tk-os .o-pc.mk{grid-column:auto}}
/* the products are no longer the last floor */
.tk-os .o-prods{padding-bottom:clamp(64px,9vh,104px)}
.tk-os .tk-intro .o-h2{max-width:none}
/* the route drawing's backdrop reaches past the column; on a phone that used to add 8px of sideways scroll */
.tk-os #devkit{overflow-x:clip}