/* Home Lab v0.16 overrides. Loaded after home8.css and feed.css. */

/* ---------- 03 · the two cards: one backdrop and the same light for both ---------- */
.tk-home .prods .defs{position:absolute;width:0;height:0}
.tk-home .pv{height:clamp(340px,32vw,470px);isolation:isolate;
 background:radial-gradient(90% 70% at 50% -10%,#DEE3EA 0%,rgba(222,227,234,0) 70%),linear-gradient(#EAE8E3,#E6E3DD)}
.tk-home .ph .pv,.tk-home .mc .pv{background:radial-gradient(90% 70% at 50% -10%,#DEE3EA 0%,rgba(222,227,234,0) 70%),linear-gradient(#EAE8E3,#E6E3DD)}
/* paper grain, so the colour never reads as flat */
.tk-home .pv::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .47  0 0 0 0 .42  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
 .tk-home transform:translate(-50%,calc(-50% + var(--fy,30px)*.5)) rotate(-9deg);transition:transform 1.4s var(--e-out)}
 background:radial-gradient(closest-side,rgba(60,50,40,.34),rgba(60,50,40,.12) 55%,rgba(60,50,40,0));filter:blur(3px)}
.pv .lt{z-index:4}

/* Taku Phone: the screen is exactly Figma's frame (412 × 917), so nothing is cropped at the top or bottom */
.tk-home .bigph{left:50%;top:auto;bottom:9%;transform:translateX(-50%);transition:none;z-index:2}
.tk-home .bigph .ph-body{position:relative;width:clamp(150px,13vw,190px);aspect-ratio:.4658;padding:3.2%;border-radius:14.1%/6.57%;box-sizing:border-box;
 background:linear-gradient(120deg,#EEF0F2,#C6CACF 26%,#E9EBEE 50%,#B2B7BE 76%,#D9DCE0);
 box-shadow:inset 0 0 0 .6px rgba(255,255,255,.9),inset 0 0 0 1.6px rgba(140,146,154,.45),inset 0 -1px 1px rgba(0,0,0,.16),18px 34px 44px -22px rgba(52,46,40,.45),4px 8px 14px -6px rgba(52,46,40,.25)}
/* side keys */
.tk-home .bigph .ph-body::before,.tk-home .bigph .ph-body::after{content:"";position:absolute;width:2.4px;border-radius:2px;background:linear-gradient(#C9CDD2,#9CA1A8)}
.tk-home .bigph .ph-body::before{left:-2px;top:20%;height:9%;box-shadow:0 calc(var(--h,0px)) 0 0 #A9AEB5}
.tk-home .bigph .ph-body::after{right:-2px;top:24%;height:13%}
.tk-home .bigph .scr{border-radius:11.65%/5.24%;background:#C3D3EE}
.tk-home .bigph .scr img{object-fit:fill;transform:none}
.tk-home .bigph .scr::after{background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 34%)}

/* Taku for Mac: a laptop; its screen keeps the live Taku for Mac demo */
.tk-home .bigmac{left:50%;top:auto;bottom:8.6%;width:min(78%,500px);border-radius:0;overflow:visible;box-shadow:none;transform:translateX(-50%);transition:none;z-index:2}
.tk-home .bigmac .lid{position:relative;display:block;padding:2.1% 2.1% 2.6%;border-radius:14px 14px 3px 3px;background:#0D0E10;
 box-shadow:inset 0 0 0 1px #2C2D31,0 0 0 1.4px #B8BCC2,0 0 0 2px rgba(255,255,255,.6)}
.tk-home .bigmac .lid .ms{display:block;position:relative;border-radius:4px 4px 1px 1px;overflow:hidden}
.tk-home .bigmac .lid .notch{display:none}
.tk-home .bigmac .base{position:relative;display:block;left:-6.5%;width:113%;height:clamp(9px,1vw,14px);margin-top:-1px;border-radius:2px 2px 40% 40%/2px 2px 100% 100%;
 background:linear-gradient(#EEF0F2,#CDD0D5 38%,#A7ABB2 80%,#8D9198);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 26px -16px rgba(52,46,40,.5)}
.tk-home .bigmac .base i{position:absolute;left:50%;top:0;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:linear-gradient(#B9BDC3,#D3D6DA)}

@media (max-width:900px){
 .tk-home .pv{height:clamp(300px,86vw,420px)}
 .tk-home .bigph .ph-body{width:clamp(132px,36vw,170px)}
 .tk-home .bigmac{width:84%}
}

/* ---------- 02 · Taku OS: four layers, from the OS page, set lighter ---------- */
.tk-home .os .hx2{font-size:clamp(34px,3.5vw,54px)}
.tk-home .os .p{margin-top:20px}
.tk-home .os-pin{padding:96px 0 40px;box-sizing:border-box}
.tk-home .layers{list-style:none;margin:26px 0 0;padding:0;max-width:440px;border-top:1px solid rgba(22,20,15,.1)}
.tk-home .layers li{border-bottom:1px solid rgba(22,20,15,.1)}
.tk-home .layers button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:16px;width:100%;padding:12px 0 11px;
 font:400 18px/1.2 var(--display);letter-spacing:-.01em;color:rgba(22,20,15,.4);transition:color .4s}
@media (hover:hover) and (pointer:fine){.tk-home .layers button:hover{color:rgba(22,20,15,.7)}}
.tk-home .layers .n{width:22px;font:400 12px/1 var(--display);letter-spacing:.08em;color:rgba(22,20,15,.34);font-variant-numeric:tabular-nums;transition:color .4s}
.tk-home .layers b{position:relative;font-weight:400}
.tk-home .layers li.on button{color:var(--ink)}
.tk-home .layers li.on .n{color:var(--ink)}
.tk-home .layers li.on b::after{content:"";position:absolute;right:-14px;top:.36em;width:6px;height:6px;border-radius:50%;background:var(--org)}
.tk-home .layers p{margin:0;max-height:0;overflow:hidden;opacity:0;padding:0 24px 0 38px;font:400 15px/1.5 var(--sans);color:rgba(22,20,15,.6);text-wrap:pretty;
 transition:max-height .6s var(--e-out),opacity .45s ease,padding .6s var(--e-out)}
.tk-home .layers li.on p{max-height:96px;opacity:1;padding-bottom:16px}
.tk-home .layers button:focus-visible{outline:2px solid var(--org);outline-offset:4px;border-radius:4px}
.tk-home .os .btns{margin-top:30px}
/* the leader line from the open layer to the parts it reaches */
.tk-home .os-lead{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .5s}
.tk-home .os-lead.on{opacity:1}
/* the line runs behind the parts, so it disappears into the stack; the dot sits on top of the part it names */
.tk-home .os-lead.dot{z-index:2}
.tk-home .os-grid{z-index:auto}.tk-home .os-tx{position:relative;z-index:3}.tk-home .os-vis{z-index:1}
.tk-home .os-lead path{fill:none;stroke:rgba(22,20,15,.36);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.tk-home .os-lead.in path{animation:leadIn .9s var(--e-out) both}
@keyframes leadIn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.tk-home .os-lead circle{fill:var(--org);stroke:none}
.tk-home .os-lead circle.o{fill:none;stroke:rgba(255,90,31,.5);stroke-width:1;animation:leadPing 2.4s ease-out infinite}
@keyframes leadPing{0%{r:4px;opacity:.9}100%{r:15px;opacity:0}}
 .tk-home opacity:calc(.12 + var(--bk,0)*.4);transform:translate(-50%,-50%) rotate(-9deg)}
.os-vis canvas,.tk-home .os-vis .poster{z-index:1}
@media (max-width:900px){.tk-home .os-lead{display:none}.tk-home .layers{max-width:none}.tk-home .layers p{padding-right:0}}
@media (prefers-reduced-motion:reduce){.tk-home .os-lead.in path,.tk-home .os-lead circle.o{animation:none}}

/* ---------- the ending: the OS page's field of dots instead of the horizon ---------- */
.tk-home .scD .horizon,.tk-home .scD .hz2{display:none}
.tk-home .scD .digits{z-index:-1}
/* the footer rises over the field with its rounded top, as on the OS page */