.crt-root{--crt-body-hi:#4e4e4e;--crt-body:#303030;--crt-body-lo:#1a1a1a;--crt-bezel:#202020;--crt-screen:#0a0a0a;--rx:2deg;--ry:-21deg;perspective:1250px;perspective-origin:62% 42%;background:0 0;width:100%;max-width:none;margin-inline:0}@media (min-width:1024px){.crt-root{max-width:min(48rem,82vh);margin-inline:auto}}@media (max-width:1023.98px){.crt-root{width:auto;height:100%}.crt-root .crt-tilt,.crt-root .crt-set,.crt-root .crt-bezel{height:100%;display:inline-block}.crt-root .crt-set{border-radius:2.1rem;padding:.3rem}.crt-root .crt-bezel{border-radius:1.85rem;padding:.26rem}.crt-root .crt-screen{aspect-ratio:9/19.5;border-radius:1.62rem;width:auto;height:100%;transform:none}.crt-root .crt-chin,.crt-root .crt-hump{display:none}}.crt-notch{z-index:2;pointer-events:none;background:#000000bf;border-radius:99px;width:2.2rem;height:.2rem;position:absolute;top:.42rem;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffff14}@media (min-width:1024px){.crt-notch{display:none}}.crt-tilt{transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform;transition:transform .42s cubic-bezier(.32,.72,0,1);position:relative}.crt-set{transform-style:preserve-3d;background:linear-gradient(168deg, var(--crt-body-hi) 0%, var(--crt-body) 26%, var(--crt-body-lo) 78%, #131313 100%);border-radius:1rem 1rem .8rem .8rem;padding:1.4rem 1.4rem .6rem;position:relative;box-shadow:inset 0 2px #ffffff2b,inset 0 -2px #000000b8,inset 3px 0 #ffffff0f,inset -3px 0 #00000073,0 34px 74px -30px #000000eb,0 3px 12px -3px #000000a6}.crt-set:before{content:"";border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff06 0 1px,#0000 1px 3px);position:absolute;inset:0}.crt-depth{--d1:88px;--d2:124px;transform-style:preserve-3d;pointer-events:none;position:absolute;inset:0}.crt-side{height:100%;width:var(--d1);transform-origin:0;background:linear-gradient(90deg,#3a3a3a 0%,#202020 42%,#101010 100%);border-radius:0 .6rem .6rem 0;position:absolute;top:0;left:100%;transform:rotateY(90deg);box-shadow:inset 0 2px #ffffff17}.crt-hump{transform-style:preserve-3d;transform:translateZ(calc(var(--d1) * -1));border-radius:.6rem;position:absolute;inset:15% 0 21%}.crt-hump-side{height:100%;width:var(--d2);transform-origin:0;background:linear-gradient(90deg,#191919 0%,#0d0d0d 55%,#070707 100%);border-radius:0 .5rem .5rem 0;position:absolute;top:0;left:100%;transform:rotateY(90deg)}.crt-hump-back{transform:translateZ(calc(var(--d2) * -1));background:linear-gradient(150deg,#121212,#080808 70%,#050505);border-radius:.7rem;position:absolute;inset:0}.crt-hump-top{height:var(--d2);transform-origin:50% 0;background:linear-gradient(#1f1f1f,#0c0c0c);border-radius:0 0 .5rem .5rem;position:absolute;top:0;left:0;right:0;transform:rotateX(-90deg)}.crt-bezel{transform-style:preserve-3d;background:linear-gradient(160deg, #151515, var(--crt-bezel) 45%, #0e0e0e);border-radius:.85rem;padding:1.05rem;position:relative;box-shadow:inset 0 2px 6px #000000eb,inset 0 -1px #ffffff0f}.crt-screen{aspect-ratio:4/3;background:var(--crt-screen);border-radius:8%/11%;position:relative;overflow:hidden;transform:translateZ(10px);box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 26px 8px #000000f2}.crt-canvas{width:100%;height:100%;display:block}.crt-glass{border-radius:inherit;pointer-events:none;background:radial-gradient(124% 108% at 50% 44%,#0000 52%,#0000006b 84%,#000000c7 100%),linear-gradient(148deg,#ffffff14 0%,#ffffff06 17%,#0000 38%);position:absolute;inset:0}.crt-chin{justify-content:space-between;align-items:center;gap:1.15rem;padding:.85rem .6rem .4rem;display:flex;transform:translateZ(4px)}.crt-vent{background:repeating-linear-gradient(90deg,#000000a3 0 2px,#ffffff0d 2px 5px);border-radius:1px;flex:1;height:.6rem;box-shadow:inset 0 1px 1px #000000d1}.crt-knobs{gap:.6rem;display:flex}.crt-knobs span{background:linear-gradient(160deg,#5e5e5e,#212121 62%,#171717);border-radius:50%;width:.85rem;height:.85rem;box-shadow:inset 0 1px #ffffff3d,0 1px 3px #000000d1}.crt-lamp{background:#d8d8d8;border-radius:50%;width:.46rem;height:.46rem;animation:3.1s ease-in-out infinite crt-lamp;box-shadow:0 0 7px 1px #ffffff80}@keyframes crt-lamp{0%,to{opacity:.55}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.crt-lamp{opacity:.8;animation:none}.crt-tilt{transition:none}}
