body:has(.teletext){background:#0c0c0e;margin:0}.teletext{--room:#0c0c0e;--plastic-hi:#2a2a2e;--plastic:#19191c;--plastic-lo:#101012;--label:#d9d6cf;--label-dim:#8f8c86;box-sizing:border-box;min-height:100svh;color:var(--label);background:radial-gradient(ellipse 70% 55% at 45% 45%, #465aa017, transparent 70%), var(--room);place-items:center;padding:56px 24px 32px;font:500 14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;display:grid;position:relative}.teletext .home{color:var(--label-dim);letter-spacing:.04em;font-size:13px;text-decoration:none;position:absolute;top:18px;left:24px}.teletext .home:hover{color:var(--label)}.teletext .set{justify-content:center;align-items:center;gap:clamp(20px,3vw,44px);width:100%;max-width:1280px;display:flex}.teletext .bezel{box-sizing:border-box;background:linear-gradient(170deg, var(--plastic-hi), var(--plastic) 30%, var(--plastic-lo));border-radius:clamp(14px,2vw,26px);flex:0 auto;width:min(100%,133.333svh - 160px);padding:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) clamp(28px,3vw,38px);position:relative;box-shadow:inset 0 1px #ffffff12,inset 0 -2px 6px #00000080,0 40px 80px -30px #000000e6,0 0 0 1px #050506}.teletext .tube{aspect-ratio:4/3;background:#000;border-radius:4.5%/6%;position:relative;overflow:hidden;box-shadow:0 0 0 2px #050506,0 0 0 4px #222226}.teletext .screen{width:100%;height:100%;display:block}.teletext .glass{pointer-events:none;border-radius:inherit;background:radial-gradient(120% 90% at 30% 12%,#ffffff12,#0000 42%),radial-gradient(75% 75%,#0000 62%,#0000008c 100%);position:absolute;inset:0;box-shadow:inset 0 0 40px #000000d9}.teletext .badge{color:#6f6c67;letter-spacing:.32em;text-transform:uppercase;justify-content:center;align-items:center;gap:8px;margin:0;font-size:clamp(9px,.9vw,11px);font-weight:700;display:flex;position:absolute;bottom:clamp(6px,.9vw,11px);left:0;right:0}.teletext .lamp{background:#ff4a2a;border-radius:50%;width:5px;height:5px;box-shadow:0 0 6px 1px #ff4a2ab3}.teletext .remote{box-sizing:border-box;background:linear-gradient(160deg,#26262a,#18181b 45%,#121214);border-radius:30px 30px 40px 40px;flex:none;gap:16px;width:156px;padding:22px 16px 26px;display:grid;box-shadow:inset 0 1px #ffffff14,inset 0 -3px 8px #00000080,0 30px 50px -20px #000000e6,0 0 0 1px #060607}.teletext .pad{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.teletext .fast,.teletext .nav,.teletext .mode{gap:8px;display:grid}.teletext .fast,.teletext .nav{grid-template-columns:repeat(4,1fr)}.teletext .mode{grid-template-columns:repeat(2,1fr)}.teletext .key{appearance:none;min-width:0;height:32px;color:var(--label);font:inherit;cursor:pointer;background:linear-gradient(#3a3a3f,#2a2a2e 55%,#232326);border:0;border-radius:11px;place-items:center;padding:0;transition:transform 60ms,box-shadow 60ms,filter 60ms;display:grid;box-shadow:inset 0 1px #ffffff1f,0 2px #0a0a0b,0 3px 6px #00000080}.teletext .key:hover{filter:brightness(1.12)}.teletext .key:active,.teletext .key.is-down{transform:translateY(2px);box-shadow:inset 0 1px #ffffff0f,0 0 #0a0a0b,0 1px 2px #00000080}.teletext .key:focus-visible{outline-offset:2px;outline:2px solid #8fb4ff}.teletext .num{aspect-ratio:1;font-variant-numeric:tabular-nums;border-radius:50%;justify-self:center;width:34px;height:34px;font-size:15px;font-weight:600}.teletext .fn{letter-spacing:.06em;text-transform:uppercase;color:var(--label-dim);font-size:10px;font-weight:700}.teletext .pad .fn{border-radius:12px;height:34px;font-size:8.5px}.teletext[data-hold=true] .key[data-key=hold],.teletext[data-reveal=true] .key[data-key=reveal]{color:#ffd84a;text-shadow:0 0 6px #ffd84a99}.teletext .fx{border-radius:6px;height:18px}.teletext .fx.red{background:linear-gradient(#ef5446,#c4271c)}.teletext .fx.green{background:linear-gradient(#4fd06a,#1f9a3e)}.teletext .fx.yellow{background:linear-gradient(#f6dd4e,#d0ad1c)}.teletext .fx.cyan{background:linear-gradient(#52d4e6,#1e9fb3)}.teletext .arrow{border-radius:9px;height:26px}.teletext .arrow svg{fill:none;width:14px;height:14px;stroke:var(--label-dim);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.teletext .mirror{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.teletext .nojs{color:var(--label-dim);margin-top:20px}@media (width<=860px){.teletext{align-content:start;padding:52px 16px 28px}.teletext .set{flex-direction:column;gap:22px}.teletext .bezel{width:100%}.teletext .remote{border-radius:26px;grid-template-columns:1fr 1fr;align-items:start;gap:14px 18px;width:100%;max-width:420px;padding:18px}.teletext .pad{grid-row:span 3}.teletext .fast{align-self:start}}