/* PROJECTS.DSK: the TV world. The picture is HTML laid over the 3D tube; sizes inside it are in cq units of the tube. */
body.tvmode #rail{opacity:0}
/* the sound switch stays up in the TV world (no page covers it), so Eject sits just under it */
body.tvmode #eject{top:calc(52px + env(safe-area-inset-top,0px))}
#tvx{position:fixed;inset:0;z-index:4;pointer-events:none;display:none}
#tvx.on{display:block}
.tvx-scr{position:absolute;left:0;top:0;overflow:hidden;border-radius:5% / 6.5%;container-type:size;background:#000;pointer-events:auto;
  box-shadow:inset 0 0 3cqw rgba(0,0,0,.9);font-family:"DM Mono",ui-monospace,monospace;color:#f2e9da;-webkit-user-select:none;user-select:none}
.tvx-scr canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tvx-osd{pointer-events:none}
.tvx-snow{image-rendering:auto;z-index:4}
.tvx-cur{z-index:2}
.tvx-crt{position:absolute;inset:0;z-index:8;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%)}
.tvx-crt::after{content:"";position:absolute;left:0;right:0;height:18%;background:linear-gradient(transparent,rgba(255,255,255,.035),transparent);animation:tvx-roll 7s linear infinite}
@keyframes tvx-roll{from{top:-20%}to{top:100%}}
.tvx-flash{position:absolute;inset:0;z-index:9;background:#fff;opacity:0;pointer-events:none}

/* OSD + lower third */
.tvx-osd{position:absolute;left:6cqw;top:6cqh;z-index:6;font-family:"VT323",monospace;font-size:7.5cqh;line-height:1;color:#7dff9a;text-shadow:0 0 .4em rgba(125,255,154,.7),2px 2px 0 #000;transition:opacity .3s}
.tvx-lower{position:absolute;left:6cqw;bottom:7cqh;z-index:6;display:grid;gap:.6cqh;max-width:60cqw;pointer-events:none;transition:opacity .35s;text-shadow:0 1px 6px #000}
.tvx-lower small{font-size:2.3cqh;letter-spacing:.18em;text-transform:uppercase;color:#ff9a8a}
.tvx-lower b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:6.4cqh;line-height:1}
.tvx-lower b i{font-style:normal;font-family:inherit;font-size:.6em;opacity:.7;margin-left:.3em}
.tvx-lower span{font-size:2.4cqh;letter-spacing:.12em;text-transform:uppercase;color:#f6dfbf;animation:tvx-blink 1.3s steps(1) infinite}
.tvx-lower.nudge span{animation:tvx-nudge .5s}
@keyframes tvx-blink{50%{opacity:.4}}
@keyframes tvx-nudge{30%{transform:translateY(-4px);color:#fff}}
.tvx-sub{position:absolute;left:8cqw;right:8cqw;bottom:6.5cqh;margin:0;z-index:7;text-align:center;font-family:"Instrument Serif",Georgia,serif;font-size:4.6cqh;line-height:1.2;color:#fff;text-shadow:0 0 .3em #000,0 0 .8em rgba(0,0,0,.85),0 1px 2px #000;opacity:0;pointer-events:none}
.tvx-sub.small{font-family:"DM Mono",monospace;font-size:2.2cqh;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.tvx-sub.draft::after{content:" · draft";font-family:"DM Mono",monospace;font-size:.45em;letter-spacing:.1em;color:#ffb36b;vertical-align:middle}

/* controls: invisible pads over the set's own buttons and dial; a visible remote under the picture on portrait screens */
.tvx-remote{position:absolute;left:0;top:0;display:flex;align-items:center;gap:var(--gap,40px);pointer-events:auto}
.tvx-remote span{display:none}
.tvx-remote button{all:unset;cursor:pointer;width:28px;height:20px;margin:0 -14px;color:transparent;border-radius:3px}
.tvx-remote button:focus-visible{outline:2px solid #ff7563;outline-offset:2px}
.tvx-remote.vis{gap:14px;padding:6px 10px;background:#211915;border:1px solid #4a3a30;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tvx-remote.vis span{display:block;font-size:11px;letter-spacing:.16em;color:#bfae98}
.tvx-remote.vis button{margin:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#f2e9da;background:radial-gradient(circle at 40% 35%,#4a3b31,#1d1612);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.6);font-size:14px}
.tvx-remote.vis button:active{transform:translateY(2px)}
.tvx-dial{all:unset;position:absolute;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;pointer-events:auto}
.tvx-dial:focus-visible{outline:2px solid #ff7563}
#tv-tip{position:fixed;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;text-align:center;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f6dfbf;text-shadow:0 1px 8px #000}
#tv-tip.show{opacity:1}
#tv-tip b{display:block;font-weight:500;animation:tvx-pat 1.2s ease-in-out infinite}
#tv-tip span{display:flex;gap:6px;justify-content:center;margin-top:8px}
#tv-tip i{width:7px;height:7px;border-radius:50%;border:1px solid #ff7563}
#tv-tip i.on{background:#ff7563;box-shadow:0 0 8px #ff7563}
#tv-tip.nudge b{animation:tvx-nudge .5s}
@keyframes tvx-pat{0%,100%{transform:translateY(0)}40%{transform:translateY(5px)}}

/* the little stage behind the curtain */
.pj-stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#0d0606}
.pj-stage .back{position:absolute;inset:0 0 30% 0;background:repeating-linear-gradient(90deg,#1b0d0b 0 6cqw,#160a09 6cqw 6.3cqw),#160a09;box-shadow:inset 0 -6cqh 6cqh rgba(0,0,0,.6)}
.pj-stage .floor{position:absolute;left:-20%;right:-20%;bottom:0;height:30%;background:repeating-linear-gradient(90deg,#3a2414 0 7cqw,#2e1c10 7cqw 7.3cqw);transform:perspective(40cqh) rotateX(38deg);transform-origin:bottom}
.pj-stage .spot{position:absolute;left:20%;right:20%;top:-4%;bottom:12%;background:linear-gradient(rgba(255,238,205,.04),rgba(255,236,200,.2));clip-path:polygon(44% 0,56% 0,92% 100%,8% 100%);mix-blend-mode:screen;opacity:0}
.pj-stage .pool{position:absolute;left:28%;right:28%;bottom:9%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,190,.42),rgba(255,232,190,0));mix-blend-mode:screen;opacity:0}
.pj-stage.lit .spot,.pj-stage.lit .pool{animation:spot-on .7s steps(1,end) forwards}
@keyframes spot-on{0%{opacity:0}15%{opacity:.8}25%{opacity:.1}40%{opacity:1}100%{opacity:1}}
.pj-stage .desk{position:absolute;left:50%;bottom:13%;width:30cqh;transform:translateX(-50%)}
.pj-stage .tbl{display:block;width:100%;margin-top:-3.2cqh}
.pj-stage .obj{all:unset;display:block;width:22cqh;height:22cqh;margin:0 auto;cursor:pointer;position:relative;z-index:1;transition:transform .35s cubic-bezier(.3,.7,.3,1),filter .35s;filter:drop-shadow(0 1.2cqh .8cqh rgba(0,0,0,.6)) brightness(.95)}
.pj-stage .obj svg{width:100%;height:100%;display:block;overflow:visible}
.pj-stage.ready .obj:hover,.pj-stage.ready .obj:focus-visible{transform:translateY(-1.6cqh);filter:drop-shadow(0 2.6cqh 1.2cqh rgba(0,0,0,.5)) brightness(1.15)}
.pj-stage .obj:focus-visible{outline:1px dashed rgba(255,230,200,.6);outline-offset:6px}
.pj-stage .obj.go{filter:drop-shadow(0 0 3cqh rgba(255,236,200,.9)) brightness(1.35)}
.pj-stage .obj.go .disc{animation:cd-spin .7s cubic-bezier(.5,0,.5,1);transform-box:fill-box;transform-origin:center}
@keyframes cd-spin{to{transform:rotate(720deg)}}
.pj-stage .obj.go .fold{animation:map-open .5s ease-out;transform-box:fill-box;transform-origin:center bottom}
@keyframes map-open{50%{transform:scaleX(1.25) scaleY(.9)}}
.pj-stage .dark{position:absolute;inset:0;background:#000;pointer-events:none;z-index:3}

/* shows */
.tvx-prog{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;transition:opacity .45s .15s,visibility 0s .6s}
.tvx-prog.on{opacity:1;visibility:visible;transition:opacity .45s .15s}
.pj-show{position:absolute;inset:0;overflow:hidden;background:#05070c}
.pj-show>*,.pj-show .it{position:absolute;left:0;top:0}
.pj-show canvas{position:absolute;inset:0;width:100%;height:100%}
.goo-wrap{position:absolute;inset:0;isolation:isolate}
.goo-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.goo-wrap .tint{position:absolute;inset:0;background:linear-gradient(#8fd6ff,#1d6fe0);mix-blend-mode:multiply}
.pj-end{margin:0;display:grid;gap:1cqh;font-size:2.1cqh;line-height:1.35;opacity:0}
.pj-end div{display:grid;grid-template-columns:13cqh 1fr;gap:1.5cqh}
.pj-end dt{color:#ff9a8a;letter-spacing:.14em;text-transform:uppercase;font-size:.85em}
.pj-end dd{margin:0;color:#efe6d6}
.pj-end a{color:#fff;text-decoration:underline;text-underline-offset:3px;pointer-events:auto}
.pj-phone{width:30cqh;height:62cqh;border-radius:5cqh;background:#0b0b0d;box-shadow:0 0 0 .6cqh #2b2d33,0 3cqh 6cqh rgba(0,0,0,.6),inset 0 0 0 .3cqh #45474e;opacity:0;visibility:hidden}
.pj-phone .scr{position:absolute;inset:1.6cqh;border-radius:3.6cqh;overflow:hidden;background:#000}
.pj-phone .shot{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1cqh;background:linear-gradient(160deg,#0f2440,#071224);opacity:0;font-size:1.8cqh;letter-spacing:.14em;color:#8fb7e6}
.pj-phone .shot small{font-size:1.4cqh;opacity:.6;letter-spacing:.06em}

/* CH 01 · 水滴记账: dark and glowing — a trailer, not a copy of the app */
.tvx-scr.light .tvx-sub{color:#33322D;text-shadow:0 0 .6em rgba(245,241,235,.9)}
.dr{background:radial-gradient(ellipse at 50% 55%,#0b1424,#04060b 70%)}
.dr .card{width:80cqw;margin:0;text-align:center;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:8cqh;line-height:1.05;color:#fff;text-shadow:0 0 2cqh rgba(0,0,0,.8);opacity:0;visibility:hidden}
.dr .app{position:absolute;left:0;right:0;top:9%;text-align:center;display:grid;gap:.6cqh;z-index:2;color:#d9ecff}
.dr .app small{font-size:1.3cqh;letter-spacing:.16em;opacity:.65}
.dr .app b{font-family:"Instrument Serif",serif;font-weight:400;font-size:4.4cqh;opacity:0;text-shadow:0 0 2cqh rgba(120,200,255,.7)}
.dr .ttl{left:7cqw;top:20cqh;width:46cqw;opacity:0}
.dr .ttl h1{margin:0;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:14cqh;line-height:.9;color:#cfeaff;text-shadow:0 0 3cqh rgba(96,176,255,.45)}
.dr .ttl .soon{display:inline-block;margin:0 0 3.6cqh;padding:.8cqh 1.8cqh;border:1px solid rgba(156,198,238,.6);border-radius:3cqh;font-family:"DM Mono",monospace;font-weight:400;font-size:2cqh;letter-spacing:.14em;text-transform:uppercase;color:#cfeaff}
.pj-phone .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dr .ttl p{margin:1.8cqh 0 2.4cqh;font-family:"Instrument Serif",serif;font-style:italic;font-size:3cqh;color:#9cc6ee}

/* CH 02 · portfolio */
.fo{background:radial-gradient(ellipse at 40% 45%,#2a1d16,#0b0706 70%)}
.fo .cam{all:unset;cursor:pointer;width:46cqh;height:46cqh;z-index:2;filter:drop-shadow(0 2cqh 2cqh rgba(0,0,0,.6))}
.fo .cam svg{width:100%;height:100%}
.fo .pol{margin:0;width:34cqh;padding:1.6cqh 1.6cqh 0;background:#f7f3ea;box-shadow:0 2cqh 4cqh rgba(0,0,0,.5);z-index:1;color:#2a2238;--dev:0}
.fo .pic{aspect-ratio:1;position:relative;overflow:hidden;background:#d7d3cc}
.fo .pic::after{content:"";position:absolute;inset:0;background:#e9e5df;opacity:calc(1 - var(--dev))}
.fo .site{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1cqh;background:radial-gradient(circle at 70% 30%,#fff3c4,#f2a65a 30%,#4b2a4e 75%);filter:saturate(calc(.3 + var(--dev)*.7));color:#fff;font-size:1.8cqh;letter-spacing:.14em}
.fo .site i{width:7cqh;height:7cqh;margin:0 auto;border-radius:50%;background:#fff;box-shadow:0 0 5cqh 2cqh rgba(255,240,200,.8)}
.fo .site small{font-size:1.3cqh;opacity:.75;letter-spacing:.06em}
.fo figcaption{font-family:"Permanent Marker",cursive;font-size:2.3cqh;line-height:1.25;padding:1.6cqh .4cqh .6cqh;opacity:0}
.fo .url{display:block;padding:0 .4cqh 1.8cqh;font-size:1.7cqh;color:#6a5a7a;opacity:0}
.fo a.url{color:#3a3aa0;text-decoration:underline;pointer-events:auto}
.fo .fl{inset:0;width:100%;height:100%;background:#fff;opacity:0;z-index:4;pointer-events:none}
.fo .pj-end{left:6cqw;top:auto;bottom:9cqh;width:44cqw}

/* CH 03 · résumé */
.rs{background:radial-gradient(ellipse at 50% 40%,#1c1a24,#08080c 70%)}
.rs .arrow{display:flex;align-items:center;gap:2cqh;font-size:3cqh;letter-spacing:.2em;color:#f2e9da;--k:0}
.rs .arrow i{width:24cqh;height:2px;background:#ff7563;transform:scaleX(var(--k));transform-origin:left;position:relative}
.rs .arrow i::after{content:"";position:absolute;right:-1px;top:-6px;border:7px solid transparent;border-left:12px solid #ff7563;border-right:0}
.rs .sheet{width:36cqh;height:46cqh;padding:3.5cqh 4cqh;box-sizing:border-box;background:#f4f0e6;color:#222;box-shadow:0 2cqh 4cqh rgba(0,0,0,.5)}
.rs .sheet h4{margin:0;font-family:"Archivo Black",sans-serif;font-size:4.4cqh}
.rs .sheet p{margin:.4cqh 0 3cqh;font-size:1.6cqh;letter-spacing:.2em;text-transform:uppercase;color:#777}
.rs .ln{display:block;height:1.3cqh;margin:2.6cqh 0;background:#cfc8b8;border-radius:2px}
.rs .ln:nth-child(odd){width:78%}
.rs .frag{font-size:2.6cqh;line-height:1.3;color:#222;opacity:0;box-shadow:0 1.4cqh 2.6cqh rgba(0,0,0,.45)}
.rs .f-note{width:22cqh;padding:2.2cqh;background:#ffe27a;font-family:"Permanent Marker",cursive}
.rs .f-file{padding:1.4cqh 1.8cqh;background:#e9eef7;display:flex;gap:1.2cqh;align-items:center}
.rs .f-file i{width:2.6cqh;height:3.2cqh;background:#fff;border:1px solid #8aa;clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%)}
.rs .f-photo{width:22cqh;height:16cqh;background:linear-gradient(135deg,#7d93b0,#c9a98a);clip-path:polygon(0 0,100% 0,100% 62%,78% 70%,60% 58%,40% 74%,20% 60%,0 72%)}
.rs .f-ticket{padding:1.8cqh 3cqh;background:#f2c6a8;font-size:2.2cqh;letter-spacing:.12em;text-align:center;border:2px dashed #b3765a}
.rs .f-chat{padding:1.4cqh 2cqh;background:#fff;border-radius:2cqh 2cqh 2cqh .4cqh;display:flex;gap:1cqh;align-items:center}
.rs .f-chat i{width:2cqh;height:2cqh;border-radius:50%;background:#ff7563}
.rs .morph{width:100%;height:100%;pointer-events:none}
.rs .morph span{position:absolute;left:0;top:0;font-family:"DM Mono",monospace;font-weight:500;font-size:5.4cqw;line-height:1;color:#fff;text-shadow:0 0 2cqh rgba(255,117,99,.5)}
.rs .aio{width:46cqh;height:50cqh;background:linear-gradient(#e7dcc3,#cdbf9f);border-radius:2.4cqh 2.4cqh 1.6cqh 1.6cqh;box-shadow:inset 0 -2cqh 0 rgba(0,0,0,.08),0 3cqh 5cqh rgba(0,0,0,.55);--on:0}
.rs .aio .scrn{position:absolute;left:5cqh;right:5cqh;top:4cqh;height:30cqh;border-radius:2cqh;background:#0b120c;box-shadow:inset 0 0 0 1.2cqh #2a2722,inset 0 0 4cqh rgba(0,0,0,.9);display:grid;place-items:center;overflow:hidden}
.rs .aio .go{opacity:var(--on);font-family:"VT323",monospace;font-size:3.3cqh;color:#7dff9a;text-shadow:0 0 1.2cqh rgba(125,255,154,.8);text-decoration:none;pointer-events:auto}
.rs .aio a.go:hover{background:#7dff9a;color:#0b120c}
.rs .aio .go span{animation:tvx-blink 1s steps(1) infinite}
.rs .aio .slot{position:absolute;left:24cqh;right:6cqh;bottom:9cqh;height:1cqh;background:#3a342b;border-radius:1px}
.rs .aio .vent{position:absolute;left:6cqh;width:12cqh;bottom:7.5cqh;height:4cqh;background:repeating-linear-gradient(90deg,#9c8f73 0 2px,transparent 2px 6px)}
.rs .pj-end{left:58cqw;top:30cqh;width:36cqw}

/* CH 04 · Guangguang */
.gg{background:#0b0e18}
.gg .mapw{width:100cqw;height:100cqh;opacity:0}
.gg .pin{position:absolute;width:3.4cqh;height:4.6cqh;--f:0}
.gg .pin svg{width:100%;height:100%;overflow:visible}
.gg .pin path{fill:#e2412b;fill-opacity:var(--f);stroke:#e2412b;stroke-width:2.2}
.gg .pin circle{fill:#fff;opacity:calc(.25 + var(--f)*.75)}
.gg .bub{position:absolute;left:0;top:0;padding:1cqh 1.8cqh;background:#fff;color:#222;border-radius:3cqh;font-size:2cqh;white-space:nowrap}
.gg .bub::after{content:"";position:absolute;left:30%;bottom:-1.6cqh;width:1.4cqh;height:1.4cqh;border-radius:50%;background:#fff}
.gg .priv{position:absolute;left:11%;top:10%;right:12%;bottom:12%;border:2px dashed rgba(226,65,43,.8);border-radius:4cqh;background:rgba(226,65,43,.07);opacity:0}
.gg .priv span{position:absolute;left:2cqh;top:-1.6cqh;padding:.4cqh 1.2cqh;background:#e2412b;color:#fff;font-size:1.7cqh;letter-spacing:.12em;text-transform:uppercase;border-radius:3px}
.gg .tile{width:100cqw;height:100cqh;background-size:cover;filter:saturate(.7);box-shadow:0 0 0 4px #0b0e18}
.gg .tile::after{content:"";position:absolute;left:46%;top:40%;width:3cqw;height:3cqw;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e2412b}
.gg .links{width:100cqw;height:100cqh;overflow:visible;opacity:0;pointer-events:none}
.gg .links path{fill:none;stroke:#e2412b;stroke-width:.35;stroke-dasharray:1;vector-effect:non-scaling-stroke;stroke-width:2}
.gg .vision{left:50cqw;top:8cqh;transform:translateX(-50%);padding:.6cqh 1.4cqh;border:1px solid #ffb36b;color:#ffb36b;font-size:1.9cqh;letter-spacing:.2em;opacity:0}
.gg .card2{display:grid;gap:.4cqh;padding:1.4cqh 1.8cqh;background:#fff;color:#222;border-radius:1.2cqh;font-size:1.9cqh;box-shadow:0 1.4cqh 3cqh rgba(0,0,0,.4);border-left:.8cqh solid #e2412b;opacity:0}
.gg .card2 span{font-family:"Permanent Marker",cursive;color:#555}
.gg .friend{display:grid;justify-items:center;gap:.6cqh;font-size:1.8cqh;opacity:0}
.gg .friend i{width:7cqh;height:7cqh;border-radius:50%;background:radial-gradient(circle at 50% 38%,#f2c8a8 0 32%,transparent 33%),radial-gradient(circle at 50% 110%,#5a7fd0 0 48%,#dfe8f6 49%)}
.gg .ttl{left:7cqw;top:26cqh;width:46cqw;opacity:0}
.gg .ttl h1{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:12cqh;font-weight:400;line-height:1;color:#ffd0c4}
.gg .ttl p{margin:1.4cqh 0 0;font-size:2.2cqh;color:#e9b3a6}
.gg .pj-end{left:7cqw;top:52cqh;width:46cqw}

/* CH 05 · CROSS-TERMINAL (original desktop: nothing taken from a real OS) */
.xt{background:#06070a}
.xt .rig{inset:0;width:100%;height:100%;background:radial-gradient(ellipse at 50% 45%,#2a2620,#0a0908 70%)}
.xt .drive{left:50cqw;top:46cqh;transform:translate(-50%,-50%);position:absolute;width:56cqh;height:14cqh;background:linear-gradient(#cfc4aa,#b4a888);border-radius:1cqh;box-shadow:0 2cqh 3cqh rgba(0,0,0,.5)}
.xt .drive .mouth{position:absolute;left:8cqh;right:8cqh;top:4cqh;height:2.2cqh;background:#14110d;border-radius:.6cqh}
.xt .drive .led{position:absolute;left:4cqh;bottom:3cqh;width:2cqh;height:1cqh;background:#3a0b07}
.xt .drive .led.on{background:#ff4a2a;box-shadow:0 0 1.2cqh #ff4a2a}
.xt .drive span{position:absolute;right:4cqh;bottom:2.4cqh;font-size:1.4cqh;letter-spacing:.2em;color:#5c5240}
.xt .fd{position:absolute;left:0;top:0;width:40cqh;height:40cqh}
.xt .desk{inset:0;width:100%;height:100%;opacity:0;background:linear-gradient(#2b3f6b,#6a5a8a 55%,#c98a6a 75%,#3a2a2a 76%,#24191a)}
.xt .ico{position:absolute;left:4cqw;display:grid;justify-items:center;gap:.8cqh;width:12cqh;font-size:1.6cqh;color:#fff;text-shadow:0 1px 2px #000;opacity:0}
.xt .i1{top:6cqh}.xt .i2{top:22cqh}
.xt .ico i{width:6cqh;height:6cqh;border-radius:1.2cqh;background:linear-gradient(#3fd38c,#0f8a56);box-shadow:0 .6cqh 1cqh rgba(0,0,0,.4)}
.xt .i2 i{border-radius:50%;background:radial-gradient(circle at 35% 30%,#bfe3ff,#2d76d8 60%,#123e86)}
.xt .win{position:absolute;left:0;top:0;width:48cqw;background:#ece8de;border:2px solid #1f3f7a;border-radius:1cqh 1cqh .4cqh .4cqh;box-shadow:0 2cqh 4cqh rgba(0,0,0,.5);color:#1b1b1b;overflow:hidden;opacity:0}
.xt .win header{display:flex;justify-content:space-between;align-items:center;padding:.9cqh 1.4cqh;background:linear-gradient(#3b6fd0,#1f4fa8);color:#fff;font-size:1.8cqh}
.xt .st{font-style:normal;font-size:1.5cqh;color:#9effb8}
.xt .st.away{color:#c7c7c7}
.xt .log{height:40cqh;padding:1.4cqh;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqh;overflow:hidden;font-size:2cqh}
.xt .log p{margin:0;max-width:80%;padding:1cqh 1.4cqh;background:#fff;border-radius:1cqh;align-self:flex-start;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.xt .log p.me{align-self:flex-end;background:#cfe2ff}
.xt .chat footer{padding:.6cqh 1.4cqh 1cqh;font-size:1.6cqh;color:#666;opacity:0}
.xt .chat footer span{animation:tvx-blink .8s steps(1) infinite}
.xt .web{width:46cqw}
.xt .pg{position:relative;height:44cqh;padding:1.6cqh;box-sizing:border-box}
.xt .life{position:absolute;inset:auto 0 0 0;top:4.4cqh}
.xt .album{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqh}
.xt .album i{aspect-ratio:4/3;display:grid;place-items:end start;padding:.6cqh;background:linear-gradient(160deg,hsl(var(--h) 25% 38%),hsl(var(--h) 30% 14%));font-style:normal;font-size:1.3cqh;color:#e6e6e6;opacity:0}
.xt .life h5{margin:0 0 2cqh;font-size:2cqh;letter-spacing:.14em}
.xt .life p{display:grid;grid-template-columns:9cqh 1fr 6cqh;gap:1.2cqh;align-items:center;margin:1.6cqh 0;font-size:1.7cqh}
.xt .life b{height:1.4cqh;background:linear-gradient(90deg,#2fb36a var(--v),#ccc var(--v))}
.xt .day{left:50cqw;top:6cqh;transform:translateX(-50%);padding:.6cqh 1.6cqh;background:#000;color:#fff;font-size:2cqh;letter-spacing:.3em;opacity:0}
.xt .bar{position:absolute;left:0;right:0;top:auto;bottom:0;height:5cqh;display:flex;justify-content:space-between;align-items:center;padding:0 1.4cqh;background:linear-gradient(#2c4f96,#1c3570);color:#fff;font-size:1.7cqh}
.xt .bar b{padding:.5cqh 1.6cqh;background:#1f8f8a;border-radius:0 1.6cqh 1.6cqh 0;margin-left:-1.4cqh;font-weight:500;letter-spacing:.1em}
.xt .ttl{left:50cqw;top:40cqh;transform:translate(-50%,-50%);margin:0;font-family:"VT323",monospace;font-weight:400;font-size:13cqh;letter-spacing:.06em;white-space:nowrap;color:#e8fff0;text-shadow:0 0 2cqh rgba(125,255,154,.5);opacity:0}
.xt .ttl.glitch{animation:xt-gl .18s steps(2) infinite}
@keyframes xt-gl{0%{transform:translate(-50%,-50%);text-shadow:3px 0 #ff3a3a,-3px 0 #3af}50%{transform:translate(-51%,-49%);text-shadow:-4px 0 #ff3a3a,4px 0 #3af}}
.xt .pj-end{left:50cqw;top:58cqh;transform:translateX(-50%);width:62cqw}

@media (prefers-reduced-motion:reduce){.tvx-crt::after,.tvx-lower span,#tv-tip b,.pj-stage.lit .spot,.pj-stage.lit .pool{animation:none;opacity:1}}