/* Home Lab v0.6: one camera move from the room to the terminal.
   Desktop ("film"): four pinned scenes, each picks up the last frame of the one before.
   Small screens and reduced motion ("flow"): the same scenes, stacked, each plays once on arrival. */
/* Typed properties are registered page-wide, so the Home Lab ones carry an --hl- prefix: the OS
   sections on the same page use --r, --k and --tx for different kinds of values. */
@property --hl-sel{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --hl-k{syntax:"<length>";inherits:true;initial-value:1px}
@property --hl-r{syntax:"<number>";inherits:true;initial-value:30}
@property --hl-w1{syntax:"<color>";inherits:true;initial-value:#A9BCD9}
@property --hl-w2{syntax:"<color>";inherits:true;initial-value:#C9D5E6}
@property --hl-w3{syntax:"<color>";inherits:true;initial-value:#E7EBF2}
@property --hl-cd{syntax:"<color>";inherits:true;initial-value:#FFFFFF}
@property --hl-cd2{syntax:"<color>";inherits:true;initial-value:#F1F2F4}
@property --hl-tx{syntax:"<color>";inherits:true;initial-value:#16140F}
@property --hl-tx2{syntax:"<color>";inherits:true;initial-value:#7A776F}
@property --hl-pri{syntax:"<color>";inherits:true;initial-value:#1B1B1B}
@property --hl-prt{syntax:"<color>";inherits:true;initial-value:#FFFFFF}
@property --hl-pl{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.92)}
@property --hl-hc{syntax:"<color>";inherits:true;initial-value:#16140F}
@property --hl-h2{syntax:"<color>";inherits:true;initial-value:#CFE0F5}
@property --hl-mc{syntax:"<color>";inherits:true;initial-value:#16140F}
.tk-home{--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1)}
/* Lenis lives on <html>, outside the .tk-home wrapper, so its rules stay global */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.tk-home{background:var(--paper)}
.tk-home .rp{display:none}
.tk[data-repo="pre"] .tk-home .rp-pre,.tk[data-repo="live"] .tk-home .rp-live{display:revert}
.tk[data-repo="pre"] .tk-home .btns .rp-pre,.tk[data-repo="live"] .tk-home .btns .rp-live{display:inline-flex}
.tk[data-repo="pre"] .tk-home .cd.rp-pre,.tk[data-repo="live"] .tk-home .cd.rp-live{display:flex}
.tk[data-repo="pre"] .rp-live,.tk[data-repo="live"] .rp-pre{display:none !important}
.tk-home .btns{display:flex;flex-wrap:wrap;gap:10px}
.tk-home .wlx{display:none;width:min(440px,100%)}.tk-home .wlx.open{display:block}
.tk-home .hx2{margin:0;font:400 clamp(40px,4.6vw,72px)/1 var(--display);letter-spacing:-.05em;text-wrap:balance}
.tk-home .hx2 .l1,.tk-home .hx2 .l2{display:block}
.tk-home .hx2 .l2{color:rgba(22,20,15,.34)}
.tk-home .rv{opacity:0;transform:translateY(26px);filter:blur(10px);transition:opacity 1.1s var(--e-out),transform 1.3s var(--e-out),filter 1.1s var(--e-out);transition-delay:calc(var(--d,0)*90ms)}
.tk-home .rv.in{opacity:1;transform:none;filter:none}

/* ---------- A · the room ---------- */
.tk-home .scA>.pin{background-color:#506A85;--hl-hc:#16140F;--hl-h2:#F8F6F1;color:var(--hl-hc);transition:background-color 1.6s ease,--hl-hc 1.6s ease,--hl-h2 1.6s ease;border-radius:0}
.tk-home .scA[data-t="0"]>.pin{background-color:#506A85;--hl-hc:#F6F3EC;--hl-h2:#CFE0F5}
.tk-home .scA[data-t="1"]>.pin{background-color:#97A9BC;--hl-hc:#16140F;--hl-h2:#3D5A80}
.tk-home .scA[data-t="2"]>.pin{background-color:#697680;--hl-hc:#16140F;--hl-h2:#FFF2DE}
.tk-home .scA[data-t="3"]>.pin{background-color:#887482;--hl-hc:#16140F;--hl-h2:#FFEEE4}
.tk-home .scA[data-t="4"]>.pin{background-color:#0C1420;--hl-hc:#F3EFE4;--hl-h2:#FF8A57}
.tk-home .room{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.tk-home .rm-z{position:absolute;inset:0;transform-origin:var(--ox,50%) var(--oy,80%);will-change:transform,filter}
.tk-home .rm-bg{position:absolute;inset:-24px;transform:translate3d(var(--bx,0px),var(--by,0px),0)}
.tk-home .rm-bg .rmi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;opacity:0;transition:opacity 1.8s ease}
.tk-home .rm-bg .rmi.on{opacity:1}
.tk-home .rm-bg .rmi:first-child{animation:hzin 2.4s var(--e-out) both}
@keyframes hzin{from{transform:scale(1.07);opacity:.2}to{transform:none;opacity:1}}
.tk-home .rm-grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;transition:background-color 2s ease,opacity 2s ease}
/* window light: four panes thrown on the wall and on the floor */
.tk-home .rm-sun{position:absolute;display:grid;grid-template-columns:1fr 1fr;gap:5%;pointer-events:none;mix-blend-mode:screen;filter:blur(14px);transition:left 2.2s var(--e-io),top 2.2s var(--e-io),width 2.2s var(--e-io),height 2.2s var(--e-io),transform 2.2s var(--e-io),opacity 2s ease}
.tk-home .rm-sun i{border-radius:4px;background:var(--sc,#FFF6EA);transition:background-color 2s ease}
.tk-home .rm-sun.w{left:64%;top:10%;width:20%;height:46%;transform:perspective(900px) rotateY(-18deg) skewY(-6deg);opacity:.42}
.tk-home .rm-sun.f{left:56%;top:82%;width:30%;height:22%;transform:perspective(600px) rotateX(64deg) skewX(-30deg);opacity:.34}
.tk-home .room.t1 .rm-sun.w{left:40%;top:-8%;width:22%;height:30%;transform:perspective(900px) rotateY(0deg) skewY(0deg);opacity:.32}
.tk-home .room.t1 .rm-sun.f{left:36%;top:80%;width:28%;height:26%;transform:perspective(600px) rotateX(64deg) skewX(0deg);opacity:.55}
.tk-home .room.t2 .rm-sun.w{left:8%;top:16%;width:26%;height:50%;transform:perspective(900px) rotateY(20deg) skewY(10deg);opacity:.5}
.tk-home .room.t2 .rm-sun.f{left:8%;top:80%;width:40%;height:24%;transform:perspective(600px) rotateX(64deg) skewX(38deg);opacity:.4}
.tk-home .room.t3 .rm-sun.w{left:-4%;top:30%;width:34%;height:44%;transform:perspective(900px) rotateY(30deg) skewY(18deg);opacity:.62}
.tk-home .room.t3 .rm-sun.f{left:-6%;top:79%;width:58%;height:22%;transform:perspective(600px) rotateX(66deg) skewX(52deg);opacity:.5}
.tk-home .room.t4 .rm-sun.w{left:72%;top:14%;width:12%;height:26%;transform:perspective(900px) rotateY(-14deg) skewY(-4deg);opacity:.18}
.tk-home .room.t4 .rm-sun.f{left:62%;top:84%;width:18%;height:14%;transform:perspective(600px) rotateX(64deg) skewX(-20deg);opacity:.14}
.tk-home .room.t0{--sc:#F2F7FF}.tk-home .room.t1{--sc:#FFFBF1}.tk-home .room.t2{--sc:#FFE4BC}.tk-home .room.t3{--sc:#FFB58C}.tk-home .room.t4{--sc:#C9DAFF}
.tk-home .room.t0 .rm-grade{background-color:#7E9ACB;opacity:.16}
.tk-home .room.t1 .rm-grade{background-color:#FFFFFF;opacity:0}
.tk-home .room.t2 .rm-grade{background-color:#E9BB7C;opacity:.26}
.tk-home .room.t3 .rm-grade{background-color:#DF6E48;opacity:.36}
.tk-home .room.t4 .rm-grade{background-color:#141B33;opacity:.74}
.tk-home .room.t0 .rm-bg img{filter:brightness(1.04)}.tk-home .room.t1 .rm-bg img{filter:brightness(1.14) saturate(.9)}.tk-home .room.t2 .rm-bg img{filter:brightness(1.04)}.tk-home .room.t3 .rm-bg img{filter:brightness(.92) saturate(1.1)}.tk-home .room.t4 .rm-bg img{filter:brightness(.7)}
.tk-home .rm-lamp{position:absolute;z-index:6;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,248,236,.34),rgba(255,248,236,.1) 45%,rgba(255,248,236,0));mix-blend-mode:soft-light;transform:translate3d(var(--lx,-999px),var(--ly,-999px),0);opacity:.9;transition:opacity 1.6s}
.tk-home .scA.night .rm-lamp{mix-blend-mode:screen;opacity:.55}
.tk-home .rm-paper{position:absolute;inset:0;z-index:7;background:var(--paper);opacity:0;pointer-events:none}

/* the giant word, cut into the wall */
.tk-home .giant{position:absolute;left:3vw;right:3vw;top:45%;height:min(30vh,22vw);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;font:300 min(30vh,22vw)/1 var(--display);letter-spacing:0;color:rgba(236,240,247,.2);text-shadow:0 1px 1px rgba(255,255,255,.22),0 -1px 1px rgba(30,40,60,.16);transition:color 2s ease}
.tk-home .room.t3 .giant{color:rgba(255,226,206,.2)}.tk-home .room.t4 .giant{color:rgba(200,214,255,.1)}
.tk-home .giant .gl{position:relative;display:block;overflow:hidden;height:1em;line-height:1;padding:0 .02em}
.tk-home .giant .gl span{display:block;transform:translateY(118%);transition:transform 1.1s var(--e-out);transition-delay:calc(var(--i)*55ms)}
.tk-home .giant .gl.on span{transform:none}
.tk-home .giant .gl.out span{transform:translateY(-118%);transition-duration:.7s;transition-delay:calc(var(--i)*30ms)}
.tk-home .giant .gw{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end}

/* copy */
.tk-home .hc{position:absolute;z-index:8;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(108px,14vh,148px) var(--gut) 0;color:var(--hl-hc);will-change:transform,opacity}
.tk-home .hc h1{margin:0;font:400 clamp(48px,min(5.8vw,10.4vh),90px)/1 var(--display);letter-spacing:-.055em}
.tk-home .hc h1 .l1,.tk-home .hc h1 .l2{display:block;white-space:nowrap}
.tk-home .hc h1 .l2{color:var(--hl-h2);text-shadow:0 1px 30px rgba(120,135,160,.22)}
.tk-home .scA[data-t="1"] .hc h1 .l2{text-shadow:none}
.tk-home .scA[data-t="4"] .hc h1 .l2{text-shadow:0 0 40px rgba(255,110,50,.35)}
.tk-home .hc h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .1em;margin:0 -.03em -.1em}
.tk-home .hc h1 .w>span{display:inline-block;animation:rise 1.4s var(--e-out) both}
.tk-home .hc h1 .l1 .w:nth-child(2)>span{animation-delay:.06s}.tk-home .hc h1 .l1 .w:nth-child(3)>span{animation-delay:.12s}.tk-home .hc h1 .l1 .w:nth-child(4)>span{animation-delay:.18s}.tk-home .hc h1 .l1 .w:nth-child(5)>span{animation-delay:.24s}
.tk-home .hc h1 .l2 .w>span{animation-delay:.36s}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
.tk-home .rot{position:relative;display:inline-block;vertical-align:top;text-align:left;transition:width .8s var(--e-out);padding-bottom:.1em;margin-bottom:-.1em}
.tk-home .rot .sz{visibility:hidden}
.tk-home .rw{position:absolute;left:0;top:0;white-space:nowrap}
.tk-home .rw span{display:inline-block;opacity:0;transform:translateY(.36em);filter:blur(9px);transition:opacity .55s ease,transform .9s var(--e-out),filter .7s var(--e-out);transition-delay:calc(var(--i)*30ms + .08s)}
.tk-home .rw.on span{opacity:1;transform:none;filter:none}
.tk-home .rw.out span{opacity:0;transform:translateY(-.3em);filter:blur(9px);transition-duration:.45s,.6s,.5s;transition-delay:calc(var(--i)*16ms)}
.tk-home .hp{margin:20px 0 0;max-width:42ch;font:400 19px/1.5 var(--sans);color:color-mix(in srgb,var(--hl-hc) 74%,transparent)}
.tk-home .hp b{font-weight:inherit;color:var(--hl-hc)}
.tk-home .hc .btns{justify-content:center;margin-top:28px}
.tk-home .hc .rv{--d:4}.tk-home .hc .btns.rv{--d:5}.tk-home .hc .fine.rv{--d:6}.tk-home .hc .macl.rv{--d:7}
.tk-home .bx.glass{background:rgba(255,255,255,.36);color:var(--ink);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){.tk-home .bx.glass:hover{background:rgba(255,255,255,.6)}}
.tk-home .scA.lt .bx.glass{background:rgba(255,255,255,.12);color:#F3EFE4;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.14)}
.tk-home .scA .hc .btns .bx{transition:background-color .9s ease,color .9s ease,box-shadow .9s ease,scale .12s}
.tk-home .scA.night .hc .btns .bx:not(.glass){background:#F3EFE4;color:var(--ink)}
.tk-home .soon-b{cursor:default;gap:10px}.tk-home .soon-b i{width:6px;height:6px;border-radius:50%;background:var(--org);animation:beat 2.2s ease-in-out infinite}
@keyframes beat{50%{opacity:.35}}
.tk-home .hc .wlx{margin-top:14px}.tk-home .hc .wl-block{margin:0 auto}
.tk-home .fine{margin:18px 0 0;font:400 11.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--hl-hc) 70%,transparent)}
.tk-home .macl{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font:400 15px/1.3 var(--sans);color:var(--hl-hc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.tk-home .macl::after{content:"→";transition:transform .3s var(--e-out)}
@media (hover:hover) and (pointer:fine){.tk-home .macl:hover{text-decoration-color:transparent}}@media (hover:hover) and (pointer:fine){.tk-home .macl:hover::after{transform:translateX(3px)}}

/* ---------- the Taku screen, built so it can take any shape ---------- */
.tk-home .tui{position:absolute;inset:0;container-type:size;overflow:hidden;background:linear-gradient(170deg,var(--hl-w1),var(--hl-w2) 55%,var(--hl-w3));color:var(--hl-tx);font-family:var(--sans);
 transition:--hl-w1 1.1s ease,--hl-w2 1.1s ease,--hl-w3 1.1s ease,--hl-cd 1.1s ease,--hl-cd2 1.1s ease,--hl-tx 1.1s ease,--hl-tx2 1.1s ease,--hl-pri 1.1s ease,--hl-prt 1.1s ease,--hl-pl 1.1s ease,--hl-r 1.1s var(--e-out)}
.tk-home .tu-in{position:absolute;inset:0;--hl-k:calc(100cqw/412);transition:--hl-k 1.1s var(--e-out)}
.tk-home .tu-in>*{position:absolute;box-sizing:border-box;transition:left 1.1s var(--e-out),top 1.1s var(--e-out),width 1.1s var(--e-out),height 1.1s var(--e-out),opacity .6s ease,transform 1.1s var(--e-out)}
.tk-home .tu-st{left:0;top:1.6%;width:100%;height:3.4%;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font:600 calc(15*var(--hl-k))/1 var(--sans)}
.tk-home .tu-st .isl{position:absolute;left:50%;top:0;width:calc(96*var(--hl-k));height:calc(30*var(--hl-k));transform:translateX(-50%);border-radius:99px;background:#0B0B0C}
.tk-home .tu-st .ic{display:flex;gap:calc(3*var(--hl-k));align-items:flex-end}
.tk-home .tu-st .ic i{display:block;width:calc(4*var(--hl-k));background:currentColor;border-radius:1px}
.tk-home .tu-st .ic i:nth-child(1){height:calc(5*var(--hl-k))}.tk-home .tu-st .ic i:nth-child(2){height:calc(8*var(--hl-k))}.tk-home .tu-st .ic i:nth-child(3){height:calc(11*var(--hl-k))}
.tk-home .tu-st .ic b{display:block;width:calc(22*var(--hl-k));height:calc(11*var(--hl-k));margin-left:calc(6*var(--hl-k));border-radius:calc(3*var(--hl-k));box-shadow:inset 0 0 0 calc(1.4*var(--hl-k)) currentColor;background:linear-gradient(90deg,currentColor 70%,transparent 70%) calc(2.6*var(--hl-k)) 50%/calc(13*var(--hl-k)) calc(6*var(--hl-k)) no-repeat}
.tk-home .tu-date{left:5.8%;top:9.6%;white-space:nowrap;font:400 calc(30*var(--hl-k))/1.1 var(--display);letter-spacing:-.025em}
.tk-home .tu-time{left:0;top:26%;width:100%;text-align:center;font:900 calc(64*var(--hl-k))/1 var(--dot);font-variation-settings:"ROND" 100;opacity:0}
.tk-home .tu-av{left:82%;top:8.6%;width:12.6%;aspect-ratio:1;border-radius:50%;background:#C4DFCB url(/taku/a/5610e9fe8e7d.png) 50% 70%/78% no-repeat;box-shadow:0 0 0 calc(3*var(--hl-k)) rgba(255,255,255,.7)}
.tk-home .tu-pills{left:3.9%;top:17.4%;width:150%;height:8.3%;display:flex;gap:calc(10*var(--hl-k));overflow:hidden;border-radius:99px}
.tk-home .tu-pills .pl{flex:none;height:100%;display:flex;align-items:center;gap:calc(10*var(--hl-k));padding:0 calc(16*var(--hl-k));border-radius:99px;background:var(--hl-pl);font:400 calc(26*var(--hl-k))/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.tk-home .tu-pills .sun{width:calc(34*var(--hl-k));height:calc(34*var(--hl-k));border-radius:50%;background:radial-gradient(circle,currentColor 34%,transparent 38%) 0 0/calc(6.4*var(--hl-k)) calc(6.4*var(--hl-k));-webkit-mask:radial-gradient(circle,#000 62%,transparent 64%);mask:radial-gradient(circle,#000 62%,transparent 64%)}
.tk-home .tu-pills .art{width:calc(50*var(--hl-k));height:calc(50*var(--hl-k));border-radius:calc(12*var(--hl-k));background:linear-gradient(140deg,#C4DFCB,#8FC19F)}
.tk-home .tu-pills .mt{display:flex;flex-direction:column;gap:calc(4*var(--hl-k));font:500 calc(17*var(--hl-k))/1 var(--sans);letter-spacing:0}.tk-home .tu-pills .mt small{font-size:calc(13*var(--hl-k));color:var(--hl-tx2)}
.tk-home .tu-pills .play{position:relative;width:calc(48*var(--hl-k));height:calc(48*var(--hl-k));border-radius:50%;background:var(--hl-pri)}
.tk-home .tu-pills .play::after{content:"";position:absolute;left:40%;top:30%;border-left:calc(14*var(--hl-k)) solid var(--hl-prt);border-top:calc(9*var(--hl-k)) solid transparent;border-bottom:calc(9*var(--hl-k)) solid transparent}
.tk-home .tu-pills .moon{width:calc(28*var(--hl-k));height:calc(28*var(--hl-k));border-radius:50%;box-shadow:inset calc(-7*var(--hl-k)) calc(-3*var(--hl-k)) 0 0 currentColor}
.tk-home .tu-card{display:flex;flex-direction:column;gap:calc(12*var(--hl-k));padding:calc(16*var(--hl-k));overflow:hidden;border-radius:calc(var(--hl-r)*var(--hl-k));background:var(--hl-cd);box-shadow:0 calc(10*var(--hl-k)) calc(30*var(--hl-k)) calc(-14*var(--hl-k)) rgba(30,40,60,.22)}
.tk-home .tu-card .hd{display:flex;justify-content:space-between;align-items:center;font:500 calc(15*var(--hl-k))/1 var(--sans);color:var(--hl-tx2)}
.tk-home .tu-card .hd span:first-child{display:flex;align-items:center;gap:calc(8*var(--hl-k))}
.tk-home .tu-card .hd span:first-child::before{content:"";width:calc(8*var(--hl-k));height:calc(8*var(--hl-k));border-radius:50%;background:var(--org)}
.tk-home .tu-card .msg{flex:1;min-height:0;display:flex;gap:calc(12*var(--hl-k));padding:calc(14*var(--hl-k));border-radius:calc(18*var(--hl-k));background:var(--hl-cd2)}
.tk-home .tu-card .msg .pp{flex:none;width:calc(44*var(--hl-k));height:calc(44*var(--hl-k));border-radius:50%;background:linear-gradient(140deg,#F3CEB9,#E9A98A)}
.tk-home .tu-card .msg b{display:block;font:500 calc(17*var(--hl-k))/1.2 var(--sans)}.tk-home .tu-card .msg b small{font-weight:400;color:var(--hl-tx2);margin-left:calc(6*var(--hl-k));font-size:calc(14*var(--hl-k))}
.tk-home .tu-card .msg p{margin:calc(6*var(--hl-k)) 0 0;font:400 calc(16*var(--hl-k))/1.4 var(--sans)}
.tk-home .tu-card .act{flex:none;display:flex;gap:calc(10*var(--hl-k));max-height:calc(56*var(--hl-k));transition:opacity .5s,max-height .9s var(--e-out)}
.tk-home .tu-card .act span{flex:1;height:calc(52*var(--hl-k));display:flex;align-items:center;justify-content:center;gap:calc(6*var(--hl-k));border-radius:99px;font:500 calc(17*var(--hl-k))/1 var(--sans);background:var(--hl-cd2);white-space:nowrap}
.tk-home .tu-card .act .b1{background:var(--hl-pri);color:var(--hl-prt)}
.tk-home .tu-card .ord{flex:1;min-height:0;display:flex;gap:calc(14*var(--hl-k));align-items:stretch}
.tk-home .tu-card .cup{flex:none;width:44%;border-radius:calc(18*var(--hl-k));background:radial-gradient(60% 50% at 50% 40%,#E9B48F,#C98962 70%),#F1E5DA;box-shadow:inset 0 0 0 calc(10*var(--hl-k)) var(--hl-cd2)}
.tk-home .tu-card .oi{display:flex;flex-direction:column;justify-content:space-between;padding:calc(4*var(--hl-k)) 0}
.tk-home .tu-card .oi b{font:400 calc(22*var(--hl-k))/1.1 var(--display)}
.tk-home .tu-card .oi small{font:400 calc(13*var(--hl-k))/1.3 var(--sans);color:var(--hl-tx2)}
.tk-home .tu-card .oi .pr{font:400 calc(30*var(--hl-k))/1 var(--display)}
.tk-home .tu-lock{left:3.9%;top:62.3%;width:92.2%;height:9.2%;display:flex;align-items:center;gap:calc(12*var(--hl-k));padding:calc(7*var(--hl-k));border-radius:99px;background:var(--hl-pl);font:400 calc(18*var(--hl-k))/1 var(--sans);color:var(--hl-tx2)}
.tk-home .tu-lock .kn{position:relative;flex:none;height:100%;aspect-ratio:1;border-radius:50%;background:var(--hl-cd);box-shadow:0 calc(4*var(--hl-k)) calc(12*var(--hl-k)) rgba(0,0,0,.12)}
.tk-home .tu-lock .kn::after{content:"";position:absolute;left:36%;top:44%;width:28%;height:24%;border-radius:calc(3*var(--hl-k));box-shadow:inset 0 0 0 calc(2*var(--hl-k)) var(--hl-tx)}
.tk-home .tu-lock .kn::before{content:"";position:absolute;left:41%;top:30%;width:18%;height:20%;border-radius:calc(8*var(--hl-k)) calc(8*var(--hl-k)) 0 0;box-shadow:inset 0 0 0 calc(2*var(--hl-k)) var(--hl-tx);border-bottom:0}
.tk-home .tu-lock span{flex:1;text-align:center;white-space:nowrap;overflow:hidden}
.tk-home .tu-lock .ch{flex:none;margin-right:calc(14*var(--hl-k));letter-spacing:-.2em;opacity:.7}
.tk-home .tu-c1{left:3.9%;top:27.6%;width:92.2%;height:32.8%}
.tk-home .tu-c2{left:3.9%;top:73.2%;width:92.2%;height:32%}
.tk-home .tu-comp{left:-22%;top:86.5%;width:144%;height:44%;border-radius:50%;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 -10px 30px rgba(255,255,255,.3)}
.tk-home .tu-comp span{position:absolute;left:0;right:0;top:9%;text-align:center;font:400 calc(15*var(--hl-k))/1 var(--sans);color:var(--hl-tx2)}
.tk-home .tu-home{left:36%;top:97.6%;width:28%;height:.5%;border-radius:99px;background:var(--hl-tx);opacity:.8}

/* the same screen, laid out for each device; colours and corners change with it */
.tk-home .tui[data-d="laptop"]{--hl-w1:#E5D9C2;--hl-w2:#EFE7DA;--hl-w3:#F6F1E8;--hl-cd2:#F4F0E8;--hl-r:16;--hl-pl:rgba(255,255,255,.85)}
.tk-home .tui[data-d="tv"]{--hl-w1:#B4D2BD;--hl-w2:#CFE3D4;--hl-w3:#E8F1EA;--hl-cd2:#EEF4EF;--hl-r:40;--hl-pl:rgba(255,255,255,.88)}
.tk-home .tui[data-d="car"]{--hl-w1:#2B2D33;--hl-w2:#1E2025;--hl-w3:#131417;--hl-cd:#2A2C32;--hl-cd2:#35373E;--hl-tx:#F3EFE4;--hl-tx2:#A6A39C;--hl-pri:#F3EFE4;--hl-prt:#16140F;--hl-pl:rgba(255,255,255,.08);--hl-r:14}
.tk-home .tui[data-d="watch"]{--hl-w1:#121317;--hl-w2:#0B0C0E;--hl-w3:#060607;--hl-cd:#1F2024;--hl-cd2:#2A2B30;--hl-tx:#F3EFE4;--hl-tx2:#9C9992;--hl-pri:#FF5A1F;--hl-prt:#FFFFFF;--hl-pl:rgba(255,255,255,.08);--hl-r:34}
.tk-home .tui[data-d="laptop"] .tu-in{--hl-k:calc(100cqw/900)}
.tk-home .tui[data-d="tv"] .tu-in{--hl-k:calc(100cqw/1000)}
.tk-home .tui[data-d="car"] .tu-in{--hl-k:calc(100cqh/300)}
.tk-home .tui[data-d="watch"] .tu-in{--hl-k:calc(100cqw/240)}
.tk-home .tui[data-d="laptop"] .tu-st{top:0;height:5%;background:rgba(255,255,255,.4)}
.tk-home .tui[data-d="laptop"] .tu-st .isl{height:100%;border-radius:0 0 calc(10*var(--hl-k)) calc(10*var(--hl-k))}
.tk-home .tui[data-d="laptop"] .tu-date{left:4.5%;top:10%}
.tk-home .tui[data-d="laptop"] .tu-av{left:90%;top:8.6%;width:5.4%}
.tk-home .tui[data-d="laptop"] .tu-pills{left:4.5%;top:21.5%;width:44%;height:11.5%}
.tk-home .tui[data-d="laptop"] .tu-c1{left:4.5%;top:36%;width:44%;height:46%}
.tk-home .tui[data-d="laptop"] .tu-lock{left:4.5%;top:85.5%;width:44%;height:9.5%}
.tk-home .tui[data-d="laptop"] .tu-c2{left:51%;top:21.5%;width:44.5%;height:73.5%}
.tk-home .tui[data-d="laptop"] .tu-comp{left:30%;top:104%;width:40%;height:30%;opacity:0}
.tk-home .tui[data-d="tv"] .tu-st{opacity:0}
.tk-home .tui[data-d="tv"] .tu-date{left:5%;top:9%;font-size:calc(46*var(--hl-k))}
.tk-home .tui[data-d="tv"] .tu-av{left:89.5%;top:7.5%;width:5.5%}
.tk-home .tui[data-d="tv"] .tu-pills{left:5%;top:78%;width:59%;height:12.5%}
.tk-home .tui[data-d="tv"] .tu-c1{left:5%;top:25%;width:43%;height:48%}
.tk-home .tui[data-d="tv"] .tu-c2{left:50%;top:25%;width:45%;height:48%}
.tk-home .tui[data-d="tv"] .tu-lock{left:66%;top:78%;width:29%;height:12.5%}
.tk-home .tui[data-d="tv"] .tu-comp{opacity:0;top:110%}
.tk-home .tui[data-d="car"] .tu-st{opacity:0}
.tk-home .tui[data-d="car"] .tu-date{left:3%;top:9%;font-size:calc(24*var(--hl-k))}
.tk-home .tui[data-d="car"] .tu-av{left:91.8%;top:6%;width:5.2%}
.tk-home .tui[data-d="car"] .tu-pills{left:3%;top:28%;width:31%;height:26%}
.tk-home .tui[data-d="car"] .tu-lock{left:3%;top:63%;width:31%;height:26%}
.tk-home .tui[data-d="car"] .tu-c1{left:36%;top:9%;width:30%;height:82%}
.tk-home .tui[data-d="car"] .tu-c2{left:68%;top:9%;width:29%;height:82%}
.tk-home .tui[data-d="car"] .tu-comp{opacity:0;top:110%}
.tk-home .tui[data-d="watch"] .tu-st,.tk-home .tui[data-d="watch"] .tu-date,.tk-home .tui[data-d="watch"] .tu-av,.tk-home .tui[data-d="watch"] .tu-pills,.tk-home .tui[data-d="watch"] .tu-lock,.tk-home .tui[data-d="watch"] .tu-c2,.tk-home .tui[data-d="watch"] .tu-home{opacity:0;transform:scale(.9)}
.tk-home .tui[data-d="watch"] .tu-time{opacity:1;top:10%}
.tk-home .tui[data-d="watch"] .tu-c1{left:7%;top:44%;width:86%;height:40%}
.tk-home .tui[data-d="watch"] .tu-c1 .act{opacity:0;max-height:0}
.tk-home .tui[data-d="watch"] .tu-c1 .hd{display:none}
.tk-home .tui[data-d="watch"] .tu-comp{left:14%;top:91%;width:72%;height:30%;background:rgba(255,255,255,.12)}
.tk-home .tui[data-d="watch"] .tu-comp span{opacity:0}
.tk-home .tui[data-d="car"] .tu-comp,.tk-home .tui[data-d="car"] .tu-home,.tk-home .tui[data-d="tv"] .tu-home,.tk-home .tui[data-d="laptop"] .tu-home{opacity:0}

/* ---------- the frame that changes shape (TV, car, watch in the hero) ---------- */
.tk-home .mf{--bw:1.1cqh;position:relative;transform-style:preserve-3d;width:calc(88cqh*.4493);height:88cqh;--rr:calc(88cqh*.4493*.155);
 transform:rotateY(var(--tw,0deg)) rotateX(calc(var(--e,0)*56deg + var(--hl-tx2,0deg))) rotateZ(calc(var(--e,0)*-38deg)) scale(calc(1 - var(--e,0)*.2));
 transition:width 1.1s var(--e-out),height 1.1s var(--e-out)}
.tk-home .mf[data-d="laptop"]{width:84cqw;height:calc(84cqw*.625);--rr:1.2cqw;--bw:1.6cqh}
.tk-home .mf[data-d="tv"]{width:92cqw;height:calc(92cqw*.5625);--rr:.8cqw;--bw:.7cqh}
.tk-home .mf[data-d="car"]{width:84cqw;height:calc(84cqw*.36);--rr:2.6cqw;--bw:1cqh}
.tk-home .mf[data-d="watch"]{width:calc(40cqh*.88);height:40cqh;--rr:9cqh;--bw:1.6cqh}
.tk-home .mf .bz{position:absolute;inset:calc(var(--bw)*-1);border-radius:calc(var(--rr) + var(--bw));transition:opacity .8s ease,inset 1.1s var(--e-out),border-radius 1.1s var(--e-out);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.8),inset 0 -1px 1px rgba(0,0,0,.2),0 40px 70px -40px rgba(22,28,40,.55)}
.tk-home .mf .bz.bk{background:#141518;box-shadow:inset 0 0 0 1px #34363B,0 40px 70px -40px rgba(22,28,40,.6);opacity:0}
.tk-home .mf[data-d="laptop"] .bz.bk,.tk-home .mf[data-d="tv"] .bz.bk,.tk-home .mf[data-d="car"] .bz.bk{opacity:1}
.tk-home .mf[data-d="laptop"] .bz.al,.tk-home .mf[data-d="tv"] .bz.al,.tk-home .mf[data-d="car"] .bz.al{opacity:0}
.tk-home .mf[data-d="laptop"] .bz{border-radius:calc(var(--rr) + var(--bw)) calc(var(--rr) + var(--bw)) .6cqw .6cqw}
.tk-home .mf>.scr{position:absolute;inset:0;border-radius:var(--rr);overflow:hidden;background:#0E0F12;transform:translateZ(calc(var(--g,40px)*var(--e,0)*3));transition:border-radius 1.1s var(--e-out)}
.tk-home .ac{position:absolute;display:block;opacity:0;pointer-events:none;transition:opacity .7s ease,transform 1.1s var(--e-out)}
.tk-home .ac-btn{right:calc(var(--bw)*-1 - 3px);top:22%;width:4px;height:12%;border-radius:2px;background:linear-gradient(90deg,#9EA3AA,#E3E5E8)}
.tk-home .mf[data-d="phone"] .ac-btn{opacity:calc(1 - var(--e,0))}
.tk-home .ac-deck{left:-7%;right:-7%;top:calc(100% + var(--bw));height:3.2cqh;border-radius:.3cqw .3cqw 2.4cqw 2.4cqw;background:linear-gradient(#F0F1F3,#C8CBD0 45%,#9DA1A8);transform:translateY(-12px)}
.tk-home .mf[data-d="laptop"] .ac-deck{opacity:1;transform:none}
.tk-home .ac-stand{left:50%;top:calc(100% + var(--bw));width:30%;height:11cqh;transform:translate(-50%,-12px);background:linear-gradient(90deg,transparent 46%,#B9BDC3 46%,#E6E8EB 50%,#B9BDC3 54%,transparent 54%) 0 0/100% 82% no-repeat,linear-gradient(#ECEEF0,#B2B6BC) 0 100%/100% 18% no-repeat;border-radius:0 0 .6cqw .6cqw}
.tk-home .mf[data-d="tv"] .ac-stand{opacity:1;transform:translate(-50%,0)}
.tk-home .ac-dash{left:-6%;right:-6%;top:58%;height:72%;transform:translateZ(-6px) translateY(10px);border-radius:50% 50% 6% 6%/60% 60% 6% 6%;background:linear-gradient(#EEF0F2,#C4C8CE 40%,#9EA4AD);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 30px 50px -30px rgba(22,28,40,.6)}
.tk-home .mf[data-d="car"] .ac-dash{opacity:1;transform:translateZ(-6px)}
.tk-home .ac-wheel{left:-13%;top:58%;width:30cqh;height:30cqh;border-radius:50%;transform:translateY(16px);box-shadow:inset 0 0 0 2.6cqh #24262B,inset 0 0 0 2.9cqh rgba(255,255,255,.18),0 20px 34px -18px rgba(0,0,0,.6);background:radial-gradient(circle,#30333A 0 4cqh,transparent 4.2cqh),linear-gradient(transparent 47%,#24262B 47% 55%,transparent 55%)}
.tk-home .mf[data-d="car"] .ac-wheel{opacity:1;transform:none}
.tk-home .ac-band{left:16%;right:16%;height:24cqh;background:linear-gradient(90deg,#AEB5BF,#D8DCE2 50%,#A9B0BA);transform:scaleY(.4)}
.tk-home .ac-band.t{bottom:calc(100% + var(--bw) - 2px);border-radius:3cqh 3cqh 0 0;transform-origin:50% 100%}
.tk-home .ac-band.b{top:calc(100% + var(--bw) - 2px);border-radius:0 0 3cqh 3cqh;transform-origin:50% 0}
.tk-home .mf[data-d="watch"] .ac-band{opacity:1;transform:none}
/* ---------- the Mac screen ---------- */
.tk-home .ms{aspect-ratio:16/10;container-type:inline-size;background:radial-gradient(60% 70% at 85% 30%,rgba(255,240,228,.75),rgba(255,240,228,0) 70%),linear-gradient(165deg,#B4C2D3,#CDD6E1 45%,#E6E2DD);font-family:var(--sans);color:#2B2B2E}
.tk-home .ms span,.tk-home .ms i,.tk-home .ms b,.tk-home .ms mark{display:block}
.tk-home .ms .ms-bar{position:absolute;left:0;right:0;top:0;height:3.4cqw;display:flex;align-items:center;gap:2.2cqw;padding:0 2cqw;font:500 1.3cqw/1 var(--sans);background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tk-home .ms .ms-bar .g{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#2B2B2E}
.tk-home .ms .ms-bar span{font-weight:400;opacity:.8}.tk-home .ms .ms-bar .r{margin-left:auto}
.tk-home .ms .ms-isl{position:absolute;z-index:6;left:50%;top:0;height:3.4cqw;min-width:12cqw;padding:0 1.8cqw;transform:translateX(-50%);border-radius:0 0 1.4cqw 1.4cqw;background:#0B0B0C;color:#fff;display:flex;align-items:center;justify-content:center;gap:.9cqw;font:400 1.15cqw/1 var(--display);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
.tk-home .ms .ms-isl b{width:.8cqw;height:.8cqw;border-radius:50%;background:var(--org)}
.tk-home .ms .ms-isl span{max-width:0;overflow:hidden;opacity:0;transition:max-width .6s var(--e-out),opacity .4s}
.tk-home .ms.s3 .ms-isl span,.tk-home .ms.s4 .ms-isl span{max-width:20cqw;opacity:1}
.tk-home .ms.s2 .ms-isl b{animation:beat .8s ease-in-out infinite}
.tk-home .ms .ms-win{position:absolute;left:7%;top:12%;width:56%;height:68%;border-radius:1.4cqw;background:#FBFBFC;box-shadow:0 2cqw 5cqw -2cqw rgba(30,40,60,.35),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.tk-home .ms .tb{display:flex;align-items:center;gap:.8cqw;height:3.4cqw;padding:0 1.4cqw;background:#F2F2F4;border-bottom:1px solid rgba(0,0,0,.05);font:500 1.2cqw/1 var(--sans);color:#66666b}
.tk-home .ms .tb i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#D8D8DC}
.tk-home .ms .tb span{margin:0 auto;transform:translateX(-2cqw)}
.tk-home .ms .tx{padding:3cqw 3.4cqw}
.tk-home .ms .tx .hd{font:500 2.1cqw/1.2 var(--display);letter-spacing:-.02em;margin-bottom:1.6cqw;color:#1B1B1B}
.tk-home .ms .tx .pp{font:400 1.7cqw/1.75 var(--sans)}
.tk-home .ms mark{display:inline;color:inherit;border-radius:.3cqw;background:linear-gradient(90deg,rgba(255,90,31,.24) var(--hl-sel),transparent var(--hl-sel));transition:--hl-sel 1s var(--e-io)}
.tk-home .ms.s1,.tk-home .ms.s2,.tk-home .ms.s3,.tk-home .ms.s4{--hl-sel:100%}
.tk-home .ms .ln{height:1.1cqw;margin-top:2cqw;border-radius:1cqw;background:rgba(0,0,0,.06)}.tk-home .ms .ln.s{width:62%;margin-top:1.4cqw}
.tk-home .ms .ms-ask{position:absolute;z-index:5;left:47%;top:44%;width:36%;padding:1.8cqw;border-radius:1.6cqw;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 2.4cqw 5cqw -2cqw rgba(30,40,60,.4),0 0 0 1px rgba(0,0,0,.05);font:400 1.45cqw/1.5 var(--sans);opacity:0;transform:translateY(1.4cqw) scale(.97);transform-origin:20% 0}
.tk-home .ms .who{display:flex;align-items:center;gap:.8cqw;margin-bottom:1cqw;font:500 1.3cqw/1 var(--sans)}
.tk-home .ms .who i{position:relative;width:2cqw;height:2cqw;border-radius:.6cqw;background:#16140F}
.tk-home .ms .who i::after{content:"";position:absolute;left:50%;top:50%;width:.7cqw;height:.7cqw;margin:-.35cqw 0 0 -.35cqw;border-radius:50%;background:var(--org)}
.tk-home .ms .ans span{display:inline;opacity:0;filter:blur(3px);transition:opacity .35s ease,filter .45s ease;transition-delay:calc(var(--i)*55ms)}
.tk-home .ms.s3 .ms-ask,.tk-home .ms.s4 .ms-ask{opacity:1;transform:none}
.tk-home .ms.s4 .ans span{opacity:1;filter:none}
.tk-home .ms .ms-dock{position:absolute;z-index:3;left:50%;bottom:1.4cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1cqw;padding:.9cqw;border-radius:1.8cqw;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tk-home .ms .ms-dock i{width:4cqw;height:4cqw;border-radius:1cqw;background:#E7E7EA}
.tk-home .ms .ms-dock i:nth-child(2){background:#C4DFCB}.tk-home .ms .ms-dock i:nth-child(3){background:#F3CEB9}.tk-home .ms .ms-dock i:nth-child(4){background:#D8D5F1}
.tk-home .ms .ms-dock i.tk{position:relative;background:#16140F}.tk-home .ms .ms-dock i.tk::after{content:"";position:absolute;right:22%;bottom:22%;width:28%;height:28%;border-radius:50%;background:var(--org)}

/* ---------- D · build it with us ---------- */
.tk-home .scD{position:relative;z-index:4;background:#0C0D10;color:var(--cream);padding:clamp(120px,18vh,200px) 0 clamp(160px,24vh,260px);overflow:hidden;isolation:isolate}
.tk-home .bp{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask:radial-gradient(260px 260px at var(--mx,50%) var(--my,-40%),#000 0,rgba(0,0,0,.5) 45%,transparent 72%);mask:radial-gradient(260px 260px at var(--mx,50%) var(--my,-40%),#000 0,rgba(0,0,0,.5) 45%,transparent 72%)}
.tk-home .bp svg{position:absolute;inset:0;width:100%;height:100%}
.tk-home .bp .ln *{fill:none;stroke:rgba(140,178,230,.8);stroke-width:1}
.tk-home .bp .ln .dm{stroke:rgba(140,178,230,.5);stroke-dasharray:3 4}
.tk-home .bp .tx text{fill:rgba(140,178,230,.7);font:400 11px var(--display);letter-spacing:.1em}
/* the OS Lab horizon replaces this glow */
.tk-home .hz2{display:none;position:absolute;left:-10%;right:-10%;bottom:0;height:46%;z-index:-1;pointer-events:none;background:radial-gradient(70% 100% at 50% 100%,rgba(255,110,50,.55),rgba(255,90,31,.2) 32%,rgba(40,90,190,.3) 56%,rgba(12,13,16,0) 80%);transform:translateY(var(--hy,40%));opacity:var(--ho,0);filter:blur(10px)}
.tk-home .d-in{position:relative}
.tk-home .bgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.tk-home .b-tx2 .hx2{font-size:clamp(52px,6.4vw,104px)}
.tk-home .b-tx2 .p{margin-top:24px}
.tk-home .cur{display:inline-block;width:.42em;height:.78em;margin-left:.12em;vertical-align:-.02em;background:var(--org);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tk-home .term{background:rgba(5,6,8,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(243,239,228,.1),0 40px 80px -40px rgba(0,0,0,.9);font:400 13.5px/1.75 ui-monospace,Menlo,Consolas,monospace;color:var(--cream);min-height:280px;border-radius:16px}
.tk-home .term .tb{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid rgba(243,239,228,.07)}
.tk-home .term .tb i{width:9px;height:9px;border-radius:50%;background:rgba(243,239,228,.16)}
.tk-home .term pre{margin:0;padding:18px 20px;white-space:pre-wrap;word-break:break-all}
.tk-home .term .pr{color:var(--org)}.tk-home .term .mu{color:rgba(243,239,228,.48)}.tk-home .term .ok{color:#8FD19E}
.tk-home .term .cr{display:inline-block;width:8px;height:15px;background:var(--cream);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.tk-home .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:64px}
.tk-home .cd{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:132px;padding:20px;border-radius:16px !important;text-decoration:none;color:inherit;background:rgba(243,239,228,.035);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(243,239,228,.1);transition:background .35s,box-shadow .35s,transform .5s var(--e-out),opacity 1.1s var(--e-out),filter 1.1s var(--e-out)}
@media (hover:hover) and (pointer:fine){.tk-home .cd:hover{background:rgba(243,239,228,.07);box-shadow:inset 0 0 0 1px rgba(243,239,228,.3);transform:translateY(-3px)}}
.tk-home .cd b{font:400 24px/1 var(--display);letter-spacing:-.03em}
.tk-home .cd .k{position:absolute;right:18px;top:18px;font:400 16px/1 var(--sans);color:rgba(243,239,228,.5);transition:transform .35s var(--e-out),color .3s}
@media (hover:hover) and (pointer:fine){.tk-home .cd:hover .k{transform:translate(2px,-2px);color:var(--org)}}
.tk-home .cd .k.s{font:400 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--org)}
.tk-home .cd[aria-disabled="true"]{pointer-events:none}


/* ===== v0.8 ===== */
.tk-home .mf .bz.al{background:linear-gradient(140deg,#F1F2F4,#C3C7CD 30%,#E9EBEE 52%,#A8ADB5 78%,#D6D9DD)}
.tk-home .scA>.pin{position:relative;display:flex;flex-direction:column;height:auto;min-height:max(760px,100svh);overflow:hidden;border-radius:0 0 28px 28px}
.tk-home .scA .hc{position:relative;flex:none;padding-top:clamp(92px,12vh,128px);will-change:transform,opacity}
.tk-home .scA .hc h1{font-size:clamp(44px,min(5.4vw,8.6vh),84px)}
.tk-home .scA .hc .hp{margin-top:16px}
.tk-home .scA .hc .btns{margin-top:24px}
.tk-home .meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;margin-top:18px}
.tk-home .meta>*{margin:0!important}
.tk-home .hc .meta.rv{--d:6}

/* the stage: one device at a time, in step with the word */
.tk-home .hstage{position:relative;z-index:4;flex:1 0 360px;width:min(1000px,94vw);margin:clamp(8px,1.6vh,18px) auto 0;container-type:size}
.tk-home .hl{position:absolute;inset:0;opacity:0;transform:translateY(28px) scale(.94);filter:blur(12px);transition:opacity .85s ease,transform 1.25s var(--e-out),filter .9s var(--e-out);pointer-events:none}
.tk-home .hl.on{opacity:1;transform:none;filter:none}
.tk-home .hl.out{transform:translateY(-16px) scale(1.03)}
.tk-home .hl canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tk-home .hl .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .7s ease}
.tk-home #hlP canvas,.tk-home #hlP .poster{top:-12%;height:124%}
.tk-home #hlT canvas{left:-6%;width:112%;top:-5%;height:112%}
.tk-home .hl.ready .poster{opacity:0}
.tk-home .hl-mf{display:grid;place-items:center;perspective:1700px}
.tk-home .hl-mf::after{content:"";position:absolute;left:50%;bottom:-2%;width:56%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(20,26,40,.36),rgba(20,26,40,0));filter:blur(4px);z-index:-1}
.tk-home .hstage .mf[data-d="phone"]{height:84cqh;width:calc(84cqh*.4493);--rr:calc(84cqh*.4493*.155)}
.tk-home .hstage .mf[data-d="tv"]{height:70cqh;width:calc(70cqh*1.7778);--rr:.5cqw;--bw:.6cqh;margin-top:-8cqh}
.tk-home .hstage .mf[data-d="car"]{width:64cqw;height:calc(64cqw*.36);--rr:2cqw;--bw:.9cqh;margin-top:-10cqh}
.tk-home .hstage .mf[data-d="watch"]{height:46cqh;width:calc(46cqh*.88);--rr:11cqh;--bw:1.8cqh}
.tk-home .hstage .ac-band{height:16cqh}
.tk-home .hstage .ac-stand{height:13cqh}
.tk-home .hstage .ac-wheel{width:36cqh;height:36cqh;left:-10%;top:52%}
.tk-home .scA.night .hl-mf .tui{box-shadow:0 0 60px 8px rgba(160,190,255,.22)}
.tk-home .hsel{position:relative;z-index:6;flex:none;align-self:center;margin:6px 0 clamp(16px,2.6vh,26px);display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12)}
.tk-home .hsel button{all:unset;box-sizing:border-box;position:relative;cursor:pointer;width:40px;height:32px;display:grid;place-items:center;border-radius:999px;color:var(--hl-hc);opacity:.55;transition:opacity .3s,background .3s}
@media (hover:hover) and (pointer:fine){.tk-home .hsel button:hover{opacity:.9}}
.tk-home .hsel button[aria-pressed="true"]{opacity:1;background:rgba(255,255,255,.24)}
.tk-home .hsel button::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(var(--hp,0));transform-origin:left;opacity:0}
.tk-home .hsel button[aria-pressed="true"]::after{opacity:.6}
.tk-home .hsel button:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.tk-home .hsel svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}

/* ---------- Taku OS: the phone opens into its parts as you scroll ---------- */
.tk-home .os{position:relative}
.tk-home .os-pin{position:relative;min-height:max(720px,100svh);min-height:max(720px,100svh);display:flex;align-items:center;overflow:hidden}
.tk-home .os-grid{position:relative;z-index:1}
.tk-home .os-pin::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(.4 + var(--bk,0)*.6);background:radial-gradient(48% 56% at 78% 26%,rgba(150,182,228,.2),rgba(150,182,228,0)),radial-gradient(44% 50% at 58% 88%,rgba(255,150,100,.14),rgba(255,150,100,0))}
/* the section keeps its paper and drawing only; the blue and orange light is gone */
.tk-home .os-pin::before,.tk-home .os-vis .glow,.tk-home .os-vis .core{display:none}
/* blueprint: the grid comes up first, then the drawing traces itself as the phone opens */
.tk-home .os-bp{position:absolute;inset:0;z-index:0;color:var(--ink);pointer-events:none}
.tk-home .os-bp svg{position:absolute;inset:0;display:block;fill:none;stroke:currentColor;stroke-width:.75}
.tk-home .os-bp .bp-g{opacity:min(1,calc(var(--bk,0)*2.2))}
.tk-home .os-bp .bp-t{opacity:max(0,calc(var(--bk,0)*1.6 - .5))}
.tk-home .os-bp .bp-d>*{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--bk,0))}
.tk-home .os-grid{width:100%;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:28px}
.tk-home .os .hx2{font-size:clamp(34px,3.9vw,60px)}
.tk-home .os .p{margin-top:28px;max-width:44ch}
.tk-home .os .btns{margin-top:34px}
.tk-home .os .rv:nth-child(2){--d:1}.tk-home .os .rv:nth-child(3){--d:2}
.tk-home .os-vis{position:relative;height:min(86vh,800px)}
.tk-home .os-vis canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tk-home .os-vis .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .7s}
.tk-home .os-vis.ready .poster{opacity:0}
/* light behind the phone: cool blue above, warm orange below, both kept faint */
.tk-home .os-vis .glow{position:absolute;left:14%;right:2%;top:2%;bottom:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,182,228,.34),rgba(150,182,228,.12) 55%,rgba(150,182,228,0));filter:blur(18px);transform:scale(var(--gs,.85));transition:transform 1.2s var(--e-out)}
.tk-home .os-vis .core{position:absolute;left:30%;top:66%;width:62%;aspect-ratio:1.5;border-radius:50%;transform:translate(-50%,-50%) scale(var(--cs,.4));opacity:var(--co,0);background:radial-gradient(closest-side,rgba(255,150,100,.26),rgba(255,120,70,.08) 55%,rgba(255,120,70,0));filter:blur(18px)}

/* ---------- the two products: same size, same parts ---------- */
.tk-home .prods{padding:clamp(24px,5vh,60px) 0 16px}
.tk-home .pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.tk-home .pc{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#FAFAF9;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 60px -44px rgba(30,40,60,.35);transition:box-shadow .6s var(--e-out)}
@media (hover:hover) and (pointer:fine){.tk-home .pc:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 40px 80px -44px rgba(30,40,60,.45)}}
.tk-home .pc.rv{transform:translateY(40px)}.tk-home .pc.rv.in{transform:none}
.tk-home .pv{position:relative;display:block;height:clamp(320px,31vw,450px);overflow:hidden}
.tk-home .ph .pv{background:#E6D8C2}
.tk-home .mc .pv{background:radial-gradient(60% 70% at 80% 12%,rgba(250,252,255,.95),rgba(250,252,255,0) 70%),linear-gradient(165deg,#E5EAF0,#CFD7E1)}
.tk-home .surf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tk-home .surf::before{content:"";position:absolute;inset:-4%;background:url(/taku/a/218c78672e9a.webp) 50% 50%/cover no-repeat;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}to{transform:scale(1) translate3d(1%,.6%,0)}}
.tk-home .pv .lt{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(36% 46% at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.4),rgba(255,255,255,0));mix-blend-mode:soft-light;opacity:0;transition:opacity .6s}
@media (hover:hover) and (pointer:fine){.tk-home .pc:hover .pv .lt{opacity:1}}
.tk-home .pt{display:flex;flex-direction:column;gap:10px;padding:28px 32px 32px}
.tk-home .pt .t3{margin:0}.tk-home .pt .p{font-size:17px}.tk-home .pt .bx{margin-top:14px;align-self:flex-start}
.tk-home .bigph{position:absolute;left:50%;top:11%;transform:translate3d(-50%,var(--fy,30px),0) rotate(-6deg);transition:transform 1.4s var(--e-out)}
.tk-home .bigph .ph-body{display:block;width:clamp(170px,15vw,212px);aspect-ratio:.471;border-radius:18%/8.5%;padding:2.4%;background:linear-gradient(140deg,#F1F2F4,#C3C7CD 30%,#E9EBEE 52%,#A8ADB5 78%,#D6D9DD);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.8),inset 0 -1px 1px rgba(0,0,0,.18),34px 46px 54px -18px rgba(84,58,30,.5),8px 12px 18px -6px rgba(84,58,30,.32)}
.tk-home .bigph .scr{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:15.5%/7.3%;background:#0E0F12}
.tk-home .bigph .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1s ease,transform 1.6s var(--e-out)}
.tk-home .bigph .scr img.on{opacity:1;transform:none}
.tk-home .bigph .scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.2),rgba(255,255,255,0) 38%);pointer-events:none}
.tk-home .bigmac{position:absolute;left:32px;top:36px;width:max(620px,112%);border-radius:12px 0 0 0;overflow:hidden;box-shadow:0 40px 60px -30px rgba(30,40,60,.45),0 0 0 1px rgba(0,0,0,.06);transform:translate3d(0,var(--fy,30px),0);transition:transform 1.4s var(--e-out)}
.tk-home .bigmac .ms{display:block;position:relative}

/* ---------- Marketplace: the words on the wall ---------- */
.tk-home .mkt{padding:16px 0 clamp(72px,9vw,132px)}
.tk-home .mk{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;color:#F8F6F1;isolation:isolate;background:linear-gradient(#5F7A94,#7B93AA)}
.tk-home .mk-art{position:absolute;inset:0;transform:scale(var(--z,1.08));transform-origin:62% 56%;will-change:transform}
.tk-home .mk-art img{width:100%;height:100%;object-fit:cover;display:block}
.tk-home .mk-scr{position:absolute;left:58.05%;top:45.07%;width:10.78%;height:12.29%;border-radius:.4%;overflow:hidden;opacity:0;filter:brightness(1.04) saturate(.92);transition:opacity 1.4s ease .4s}
.tk-home .mk-scr .ms{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.tk-home .mk-glow{position:absolute;left:53%;top:38%;width:21%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(230,236,255,.42),rgba(230,236,255,0));mix-blend-mode:screen;opacity:0;transition:opacity 1.6s ease .6s;pointer-events:none}
.tk-home .mk.lit .mk-scr,.tk-home .mk.lit .mk-glow{opacity:1}
.tk-home .mk::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(26,38,56,.42),rgba(26,38,56,.14) 42%,rgba(26,38,56,0) 60%)}
.tk-home .mk-tx{position:absolute;z-index:2;left:clamp(30px,6.5%,96px);top:clamp(32px,10%,104px);max-width:min(520px,42%)}
.tk-home .mk-tx .hx2{font-size:clamp(30px,4.2vw,64px)}
.tk-home .mk-tx .p{margin-top:20px;max-width:36ch;color:rgba(248,246,241,.8)}
.tk-home .mk-tx .p b{color:#F8F6F1}
.tk-home .mk-tx .btns{margin-top:28px}

/* ---------- responsive ---------- */
@media (max-width:900px){
 .tk-home .scA .hc h1{font-size:clamp(40px,7.4vw,64px)}
 .tk-home .hp{font-size:17px}
 .tk-home .os-grid{gap:12px}
 .tk-home .pt{padding:24px 24px 26px}
 .tk-home .mk-tx .p{font-size:16px}
 .tk-home .scD{padding:90px 0 120px}
 .tk-home .bgrid{grid-template-columns:minmax(0,1fr);gap:28px}
 .tk-home .cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
}
@media (max-width:640px){
 .tk-home .scA>.pin{min-height:0}
 .tk-home .scA .hc{padding-top:104px}
 .tk-home .scA .hc h1{font-size:clamp(38px,11.2vw,56px)}
 .tk-home .hc h1 .l1{white-space:normal;text-wrap:balance}
 .tk-home .hc .btns{width:100%;max-width:420px}.tk-home .hc .btns>.bx{flex:1 1 calc(50% - 5px);padding:0 12px}
 .tk-home .hstage{flex:none;width:100vw;height:min(96vw,380px);margin-top:10px}
 .tk-home .hstage .mf[data-d="tv"]{height:auto;width:88cqw;aspect-ratio:16/9}
 .tk-home .hstage .mf[data-d="car"]{width:80cqw;height:calc(80cqw*.36)}
 .tk-home .hstage .ac-wheel{width:26cqh;height:26cqh;left:-5%;top:58%}
 .tk-home #hlM canvas,.tk-home #hlM .poster{left:10%;top:10%;width:80%;height:80%}
 .tk-home #hlW canvas{left:14%;top:12%;width:72%;height:76%}
 .tk-home #hlT canvas{left:4%;width:92%;top:6%;height:92%}
 .tk-home .giant{top:auto;bottom:260px;height:24vw;font-size:24vw}
 .tk-home .os{height:auto}
 .tk-home .os-pin{position:relative;height:auto;display:block;padding:72px 0 24px}
 .tk-home .os-grid{grid-template-columns:minmax(0,1fr)}
 .tk-home .os-vis{height:min(116vw,560px)}
 .tk-home .pgrid{grid-template-columns:minmax(0,1fr)}
 .tk-home .pv{height:clamp(300px,86vw,420px)}
 .tk-home .bigmac{left:20px;top:24px;width:560px}
 .tk-home .mk{aspect-ratio:4/5;background:#62778A}
 .tk-home .mk-art{inset:auto;left:-42%;right:-42%;bottom:0;aspect-ratio:16/9;transform:none;-webkit-mask-image:linear-gradient(transparent,#000 26%);mask-image:linear-gradient(transparent,#000 26%)}
 .tk-home .mk::before{background:linear-gradient(rgba(26,38,56,.4),rgba(26,38,56,0) 55%)}
 .tk-home .mk-tx{left:24px;right:24px;top:28px;max-width:none}
 .tk-home .cd{min-height:104px}
}
@media (prefers-reduced-motion:reduce){.tk-home .hl,.tk-home .surf::before{transition:none;animation:none}}
.tk-home .sb.sin{transition:background-color .35s ease,color .35s ease,transform .15s}

/* the horizon from OS Lab: a thin orange rim with a dim field of dot-matrix numbers living in its light */
.tk-home .scD .horizon{z-index:-1;transition:none;background:radial-gradient(150% 115% at 50% var(--hz,192%),var(--night) 59%,rgba(255,90,31,.95) 61%,rgba(255,150,100,.48) 62.1%,rgba(228,214,234,.19) 63.6%,rgba(200,202,236,.12) 66.5%,rgba(172,182,226,.075) 70.5%,rgba(150,162,212,.04) 76%,rgba(14,22,34,0) 85%)}
.tk-home .scD .digits{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}