:root{color-scheme:dark;--ink:#060e24;--cyan:#7efcff;--pink:#ff3cce;--lime:#bcff52}*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;color:#e8f7fc;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 50% 52%,#10254b 0, var(--ink) 70%)}main{max-width:1600px;margin:auto;min-height:100svh;overflow:hidden;position:relative}header,footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 20px;font:9px/1.5 monospace;letter-spacing:1.4px;position:relative;z-index:3}header{color:#a4b6d2}.live{color:var(--lime)}.live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:7px;box-shadow:0 0 10px currentColor}.identity{text-align:center;position:relative;z-index:2;margin:24px 0 -25px;pointer-events:none}.identity p{font:8px monospace;letter-spacing:3px;color:#90a6c5;margin-bottom:16px}h1{font-size:clamp(39px,10.8vw,100px);font-weight:900;line-height:.85;letter-spacing:-.065em;margin:0;text-shadow:2px 0 #ff3cce66,-2px 0 #00ffff66}h1 span{color:transparent;-webkit-text-stroke:1px var(--cyan);margin-left:.12em}.scene{position:relative;width:min(100%,750px);margin:0 auto;isolation:isolate}.television{width:100%;position:relative}.tv-art{display:block;width:100%;height:auto;mix-blend-mode:screen}.screen{position:absolute;left:22%;top:33.7%;width:45.9%;height:26.7%;border-radius:12% 13% 15% 14%;overflow:hidden;transform:rotate(-4deg);background:#173644;box-shadow:inset 0 0 16px #001a25,0 0 12px #00e7ff88}.picture,.rgb,.scanlines,.tear{position:absolute;inset:0}.picture,.rgb{background:url('assets/chaotickoala.jpg') 48% 48%/cover}.picture{filter:saturate(.75) contrast(1.15);opacity:.94}.rgb{mix-blend-mode:screen;opacity:0;filter:sepia(1) saturate(6) hue-rotate(110deg);transform:translateX(4px)}.scanlines{background:repeating-linear-gradient(0deg,#00102230 0 1px,transparent 1px 3px);box-shadow:inset 0 0 25px 8px #001225bb;pointer-events:none}.channel{position:absolute;top:9%;left:8%;font:clamp(7px,1.5vw,12px) monospace;color:#b4ffdb;text-shadow:0 0 4px #b4ffdb}.tear{background:linear-gradient(transparent 45%,#1cebd350 46%,#fc48ef70 48%,transparent 50%);opacity:0}.recursive{position:absolute;inset:0;background:#07102a;opacity:0;transform:scale(1.02)}.recursive>img:first-child{position:absolute;width:100%;height:100%;object-fit:cover}.inner-photo{position:absolute;left:22%;top:29%;width:46%;height:35%;object-fit:cover;transform:rotate(-4deg);border-radius:10%}.watcher{position:absolute;z-index:2;bottom:1%;left:45%;width:47%;height:auto;filter:drop-shadow(-6px -3px 8px #00d8ff18);pointer-events:none}.scene figcaption{position:absolute;bottom:6%;left:8%;font:8px/1.9 monospace;letter-spacing:1.6px;color:#8394ad}.scene figcaption span{color:var(--cyan)}footer{color:#6e829f;margin-top:-12px;padding-top:0;font-size:8px}button{font:inherit;letter-spacing:inherit;color:#a4b6d2;background:#0c1930;border:1px solid #354259;border-radius:2px;min-height:44px;padding:10px 12px;cursor:pointer}button:hover{color:var(--cyan);border-color:var(--cyan)}button:focus-visible{outline:2px solid var(--pink);outline-offset:4px}.glitch .rgb{opacity:.4}.glitch .picture{transform:translateX(-3px)}.glitch .tear{opacity:1}.recurse .recursive{opacity:1}@media(min-width:700px){header,footer{padding-left:48px;padding-right:48px;font-size:10px}.identity{margin-top:25px;margin-bottom:-55px}.identity p{font-size:10px}.scene{width:min(74vw,760px)}.scene figcaption{font-size:10px}footer{margin-top:-35px;padding-bottom:28px}}@media(max-width:359px){header,footer{padding-left:12px;padding-right:12px;letter-spacing:.7px}h1{font-size:10.6vw}.identity p{letter-spacing:2px}.scene figcaption{font-size:7px}}@media(prefers-reduced-motion:reduce){.rgb,.tear,.recursive{display:none!important}.picture{transform:none!important}} 
@media(min-width:700px) and (min-height:650px){.scene{width:min(74vw,calc((100svh - 200px)*.714),760px)}.identity{margin-top:12px;margin-bottom:-30px}h1{font-size:clamp(60px,8vw,100px)}footer{margin-top:-12px}}

/* Minimal composition: the wordmark is live, selectable HTML text. */
.identity{padding-top:40px;margin-top:0}h1{word-spacing:-.15em}footer{justify-content:flex-end}#motion{width:44px;padding:10px;font-size:16px}#motion:disabled{opacity:.4}@media(min-width:700px){.identity{padding-top:42px;margin-top:0}}