/* Open views for the desk toys (toyview.js). transform / opacity only for anything that moves. */
#tv{--ink:#2A1812;--cream:#F6EBDA;--acc:#E8613C;--acc2:#FF8B63;--chip:rgba(246,235,218,.94);--chipT:#2A1812;--chipB:rgba(42,24,18,.14);
  position:fixed;inset:0;z-index:125;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;font-family:var(--ps-font),system-ui,sans-serif;color:var(--cream)}
html.dark #tv{--chip:rgba(30,29,38,.94);--chipT:#EDE8DB;--chipB:rgba(237,232,219,.16);--acc:#FF7A52}
#tv.on{opacity:1;visibility:visible}
#tv[hidden]{display:none}
#tv .tv-scrim{position:absolute;inset:0;background:radial-gradient(110% 90% at 50% 42%,rgba(52,30,22,.74),rgba(26,14,10,.92));will-change:opacity}
#tv .tv-scrim:after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(40vh,300px);background:linear-gradient(0deg,rgba(26,14,10,.95),rgba(26,14,10,0))}
html.dark #tv .tv-scrim{background:radial-gradient(110% 90% at 50% 42%,rgba(8,9,16,.8),rgba(2,3,8,.94))}
#tv .tv-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,28px);width:100%;height:100%;padding:56px 16px 20px;box-sizing:border-box}
#tv button,#tv a{cursor:pointer;-webkit-tap-highlight-color:transparent}
#tv :focus-visible{outline:2px solid var(--acc2);outline-offset:3px}

/* close: a round chip in the project-page chrome tokens */
#tv .tv-x{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--ps-rule);background:var(--ps-bg);color:var(--ps-tp);display:grid;place-items:center;padding:0;
  transition:transform .3s var(--spring,cubic-bezier(.3,1.5,.5,1)),border-color .2s linear,background-color .2s linear,color .2s linear}
#tv .tv-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#tv .tv-x:hover{transform:translateY(-1px);border-color:var(--ps-accent);background:var(--ps-elev)}
#tv .tv-x:active{transform:scale(.94)}

/* big toy */
#tv .tv-toy{--w:min(92vw,calc((100svh - 258px) * var(--ar)),980px);--h:calc(var(--w) / var(--ar));--s:var(--spr);position:relative;width:var(--w);height:var(--h);flex:none;will-change:transform}
html.dark #tv .tv-toy{--s:var(--nspr)}
/* Porsche: bigger (screen ~1.2x). The sprite's transparent margins (top/bottom ~5%) overlap the stage padding and the hud instead of eating layout room. */
#tv.k-handheld .tv-stage{padding-top:24px}
#tv.k-handheld .tv-toy{--w:min(94vw,calc((100svh - 190px) * var(--ar)),1220px);margin:calc(var(--h) * -.04) 0}
#tv .tv-spr{position:absolute;inset:0;background:var(--s) 0 0/100% 100% no-repeat}
#tv .tv-shadow{position:absolute;left:6%;right:6%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,8,0,.55),rgba(30,8,0,0));pointer-events:none}
#tv .tv-scr{position:absolute;overflow:hidden;border-radius:calc(var(--w) * var(--rr) * 1.1);background:#05060a;isolation:isolate;box-shadow:0 0 0 calc(var(--w) * .004) rgba(0,0,0,.55)}
#tv .tv-scr{touch-action:pan-y}
#tv.k-phone .tv-scr{box-shadow:none;background:#d9d4cc}
#tv .tv-media{position:absolute;inset:0;overflow:hidden}
#tv .tv-l{position:absolute;inset:0;background:#05060a;will-change:transform,opacity}
#tv .tv-l video,#tv .tv-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
#tv .tv-l.fit video,#tv .tv-l.fit img{object-fit:contain}
#tv .tv-l img{opacity:0;transition:opacity .3s linear}
#tv .tv-l.ready img{opacity:1}
#tv .tv-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%),radial-gradient(120% 120% at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.34));box-shadow:inset 0 0 calc(var(--w) * .02) rgba(0,0,0,.6)}
#tv.k-crt .tv-scr:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,rgba(0,0,0,0) 1px 3px)}
#tv.tv-toy .tv-scr,#tv.tv-gallery .tv-frame{cursor:pointer}

/* knob + ticks */
#tv .tv-ticks{position:absolute;left:calc(var(--w) * var(--kx));top:calc(var(--h) * var(--ky));width:0;height:0;pointer-events:none}
#tv .tv-tick{position:absolute;left:0;top:0;width:calc(var(--w) * .0085);height:calc(var(--w) * .0085);border-radius:50%;background:rgba(42,24,18,.38);transform:rotate(var(--a)) translateY(calc(var(--w) * -.083)) translate(-50%,-50%)}
#tv .tv-tick.on{background:var(--acc);box-shadow:0 0 calc(var(--w) * .01) var(--acc)}
#tv .tv-knob{position:absolute;left:calc(var(--w) * (var(--kx) - var(--kr)));top:calc(var(--h) * var(--ky) - var(--w) * var(--kr));width:calc(var(--w) * var(--kr) * 2);height:calc(var(--w) * var(--kr) * 2);
  border-radius:50%;border:0;padding:0;background:var(--s) calc(var(--w) * (var(--kr) - var(--kx))) calc(var(--w) * var(--kr) - var(--h) * var(--ky)) / var(--w) var(--h) no-repeat;touch-action:none;cursor:grab;will-change:transform}
#tv .tv-knob.drag{cursor:grabbing}
#tv .tv-knob:after{content:"";position:absolute;inset:-9%;border-radius:50%;box-shadow:0 0 0 2px var(--acc),0 0 18px rgba(232,97,60,.55);opacity:0;transition:opacity .25s linear}
#tv .tv-knob:hover:after,#tv .tv-knob.drag:after{opacity:.9}
#tv .tv-knob:focus-visible{outline:none}
#tv .tv-knob:focus-visible:after{opacity:1;box-shadow:0 0 0 3px var(--acc2),0 0 0 6px rgba(255,255,255,.7)}
#tv .tv-knob:active{filter:none}

/* hud: the project-page info treatment shared with #cap: 10px uppercase meta, Inter 300 title, hairline, then pills (quiet prev / next, solid Open project) */
#tv .tv-hud{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:min(92vw,380px);box-sizing:border-box;padding:22px 24px 20px;border:1px solid var(--ps-rule);border-radius:4px;background:var(--ps-bg);color:var(--ps-tp);box-shadow:var(--ps-shadow)}
#tv .tv-cap{grid-column:1/-1;grid-row:1;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--ps-rule);display:flex;flex-direction:column-reverse;gap:0;text-align:left;min-width:0}
#tv .tv-cap i{display:block;margin:0 0 14px;font:400 10px/1.5 var(--ps-font);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ps-accent-ink);white-space:normal}
#tv .tv-cap b{display:block;font:300 28px/1.02 var(--ps-font);letter-spacing:-.03em;color:var(--ps-tp);min-height:1em}
#tv .tv-hud .tv-prev{grid-row:2;grid-column:1}
#tv .tv-hud .tv-next{grid-row:2;grid-column:2}
#tv .tv-hud .tv-link{grid-row:2;grid-column:3;justify-self:end}
#tv .tv-hud-1{grid-template-columns:1fr}
#tv .tv-hud-1 .tv-link{grid-column:1;justify-self:start}
#tv .tv-nav,#tv .tv-link{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--ps-rule);border-radius:999px;background:var(--ps-elev);color:var(--ps-tp);text-decoration:none;white-space:nowrap;
  font:400 10px/1 var(--ps-font);letter-spacing:.12em;text-transform:uppercase;transition:transform .3s var(--spring,cubic-bezier(.3,1.5,.5,1)),border-color .2s linear,background-color .2s linear,color .2s linear,opacity .2s linear}
#tv .tv-link{font-weight:500;border-color:var(--ps-tp);background:var(--ps-tp);color:var(--ps-bg)}
#tv .tv-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#tv .tv-nav:hover:not(:disabled){transform:translateY(-1px);border-color:var(--ps-accent)}
#tv .tv-link:hover{transform:translateY(-1px);background:var(--ps-accent);border-color:var(--ps-accent);color:var(--ps-bg)}
#tv .tv-nav:active:not(:disabled),#tv .tv-link:active{transform:scale(.96)}
#tv .tv-nav:disabled{opacity:.4;cursor:default}
#tv .tv-nav:focus-visible,#tv .tv-link:focus-visible,#tv .tv-x:focus-visible{outline:1.5px solid var(--ps-accent);outline-offset:2px}
#tv .tv-nav::after,#tv .tv-link::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
/* frame side arrows: round chips beside the picture */
#tv .tv-side{width:44px;height:44px;padding:0;border-radius:50%;background:var(--ps-bg)}

/* video + gallery frames */
#tv .tv-frame{position:relative;flex:none;width:min(92vw,calc((100svh - 238px) * 16 / 9),1180px);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#07080c;will-change:transform;
  box-shadow:0 40px 90px -24px rgba(20,4,0,.75),0 10px 30px -10px rgba(20,4,0,.5),0 0 0 1px rgba(255,255,255,.08)}
#tv.tv-gallery .tv-frame{width:min(92vw,calc((100svh - 338px) * 16 / 9),1100px);touch-action:pan-y}
#tv.tv-video .tv-l video{object-fit:cover}
#tv .tv-side{position:absolute;top:50%;margin-top:-22px;z-index:3}
#tv .tv-side.tv-prev{left:12px}
#tv .tv-side.tv-next{right:12px}
#tv .tv-thumbs{display:flex;gap:8px;max-width:min(92vw,820px);overflow-x:auto;padding:6px 4px;scrollbar-width:none}
#tv .tv-thumbs::-webkit-scrollbar{display:none}
#tv .tv-th{flex:none;width:76px;height:46px;padding:0;border:0;border-radius:7px;overflow:hidden;background:#0c0c10;opacity:.55;position:relative;transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .2s linear}
#tv .tv-th img{width:100%;height:100%;object-fit:cover;display:block}
#tv .tv-th:hover{opacity:.95;transform:translateY(-3px)}
#tv .tv-th:active{transform:scale(.94)}
#tv .tv-th.on{opacity:1;box-shadow:0 0 0 2px var(--acc)}

/* cropped toy (laptop): only the screen end of the sprite, so the screen is what grows */
#tv .tv-crop{--cw:min(92vw,calc((100svh - 258px) * var(--car)),1100px);position:relative;flex:none;width:var(--cw);height:calc(var(--cw) / var(--car));overflow:hidden;border-radius:clamp(10px,1.6vw,20px);will-change:transform;
  box-shadow:0 40px 90px -24px rgba(20,4,0,.75),0 10px 30px -10px rgba(20,4,0,.5)}
#tv .tv-crop .tv-shadow{display:none}

/* paper frames (Omen board, Hublot print): the desk print grows into a 16:9 sheet; the Hublot stack keeps its binder clip */
#tv.k-omen .tv-frame,#tv.k-hublot .tv-frame,#tv.k-filmphone .tv-frame{overflow:visible;border-radius:3px;background:linear-gradient(160deg,#EEEAE2,#DAD5CB);
  box-shadow:0 44px 80px -26px rgba(20,4,0,.7),0 12px 28px -12px rgba(20,4,0,.5),0 0 0 1px rgba(60,40,20,.12)}
#tv.k-omen .tv-media,#tv.k-hublot .tv-media,#tv.k-filmphone .tv-media{inset:4.6% 2.6%;border-radius:2px;box-shadow:0 0 0 1px rgba(40,24,10,.25),inset 0 0 14px rgba(0,0,0,.35)}
#tv.k-omen .tv-frame{transform:rotate(-.4deg)}
#tv.k-filmphone .tv-frame{transform:rotate(.3deg)}
#tv.k-hublot .tv-frame:before{content:"";position:absolute;inset:-1.2% -1.4% 1.4% 1.2%;z-index:-1;border-radius:3px;background:#D9D4CA;transform:rotate(1.1deg);box-shadow:0 8px 18px -8px rgba(20,4,0,.45)}
#tv .tv-mat{display:none}
#tv.k-hublot .tv-mat{display:block;position:absolute;left:50%;top:-4.4%;width:7%;aspect-ratio:1.5;margin-left:-3.5%;z-index:4;pointer-events:none;border-radius:3px;
  background:linear-gradient(180deg,#4A4A50,#1E1E22);box-shadow:0 8px 12px -4px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.2) inset}
#tv.k-hublot .tv-mat:after{content:"";position:absolute;left:18%;right:18%;bottom:80%;height:150%;border-radius:50%;border:max(2px,.45vw) solid #C9CCD2;border-bottom-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.35)}
#tv.tv-gallery .tv-th{width:84px;height:48px}
#tv.k-omen .tv-frame,#tv.k-hublot .tv-frame,#tv.k-filmphone .tv-frame{width:min(90vw,calc((100svh - 418px) * 16 / 9),1000px);margin-top:3vh}
/* Copilot Summit: the print is 19:8 (285 x 120 css on the desk, 14 px paper border), so the open frame is 19:8 too; media is cover-fit, never stretched */
#tv.k-filmphone .tv-frame{aspect-ratio:313/148;width:min(92vw,calc((100svh - 418px) * 313 / 148),1100px)}
#tv.k-filmphone .tv-media{inset:9.46% 4.47%}

@media (max-width:760px){
  #tv .tv-stage{padding:60px 10px 16px;gap:14px}
  #tv .tv-hud{width:94vw;padding:18px 18px 16px}
  #tv .tv-cap b{font-size:24px}
  #tv .tv-side{margin-top:-22px}
  #tv .tv-th{width:60px;height:38px}
  #tv .tv-toy{--w:min(96vw,calc((100svh - 290px) * var(--ar)),980px)}
  #tv.k-handheld .tv-stage{padding-top:60px}
  #tv.k-handheld .tv-toy{--w:min(96vw,calc((100svh - 270px) * var(--ar)),1220px);margin:0}
}
@media (prefers-reduced-motion:reduce){#tv *{transition:none!important}}