@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color-scheme:dark;font-family:Space Grotesk,Arial,sans-serif;--paper: #eef1ec;--muted: #8a938c;--line: rgba(238, 241, 236, .22);--lime: #c9f354;--orange: #ff6938;--ink: #090a0b}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}html,body{width:100vw;height:100vh}body{background:transparent}#app{position:relative;width:100vw;height:100vh;min-width:0;min-height:0;isolation:isolate;color:var(--paper);background:transparent;transform-origin:top left;font-size:clamp(8px,.8333vw,16px)}.kaplay-canvas{position:absolute;inset:0;z-index:-2;width:100vw!important;height:100vh!important;max-width:none;max-height:none;display:block;pointer-events:none}.noise,.scanline{position:absolute;inset:0;pointer-events:none}.noise{z-index:-1;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.scanline{z-index:5;opacity:.09;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.18) 4px,transparent 5px);mix-blend-mode:overlay}.topbar{position:absolute;top:5.2%;left:5.2%;right:5.2%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:1.1%}.brand-mark{display:flex;align-items:baseline;gap:.75em}.brand-slash{color:var(--lime);font:500 1.35em DM Mono,monospace;letter-spacing:-.15em}.brand-name{font-size:1.35em;font-weight:700;letter-spacing:.12em}.brand-sub,.session-meta,.frame-label,.stat-label,.ticker,.live-footer{font:500 .7em DM Mono,monospace;letter-spacing:.12em}.brand-sub{color:var(--muted);margin-left:.8em}.session-meta{display:flex;align-items:center;gap:1.3em;color:var(--muted)}.signal-dot{width:.6em;height:.6em;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);animation:blink 1.5s infinite}.meta-divider{width:1px;height:1.2em;background:var(--line)}.camera-frame{position:absolute;left:5.2%;bottom:17.2%;width:25.5%;height:35%;border:1px solid rgba(238,241,236,.34);background:#16191880}.camera-frame:after{content:"";position:absolute;inset:8%;border:1px solid rgba(238,241,236,.12)}.frame-label{position:absolute;left:0;top:-2.1em;color:var(--paper)}.frame-label span{color:var(--orange);margin-left:1.5em}.frame-label b{color:var(--lime);font-weight:500;margin-left:1.5em}.corner{position:absolute;z-index:2;width:1.2em;height:1.2em;border-color:var(--lime);border-style:solid}.corner-tl{left:-.4em;top:-.4em;border-width:2px 0 0 2px}.corner-tr{right:-.4em;top:-.4em;border-width:2px 2px 0 0}.corner-bl{left:-.4em;bottom:-.4em;border-width:0 0 2px 2px}.corner-br{right:-.4em;bottom:-.4em;border-width:0 2px 2px 0}.camera-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#eef1ec47;font:500 .72em DM Mono,monospace;letter-spacing:.25em;line-height:1.8;text-align:center}.camera-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:0;transition:opacity .35s ease}.camera-video.is-live{opacity:1}.pose-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);pointer-events:none}.camera-placeholder{z-index:2;background:#090a0b70;transition:opacity .35s ease}.camera-placeholder.is-connected{opacity:0;pointer-events:none}.camera-placeholder button{display:block;margin-top:1.6em;padding:.75em 1.1em;border:1px solid var(--lime);color:var(--lime);background:#090a0bb3;font:500 .72em DM Mono,monospace;letter-spacing:.1em;cursor:pointer}.camera-placeholder button:hover{color:var(--ink);background:var(--lime)}.camera-placeholder button:disabled{opacity:.55;cursor:wait}.camera-controls{position:absolute;z-index:4;right:.9em;bottom:.9em;text-align:right}.camera-source-label{display:block;color:var(--muted);font-size:.62em;letter-spacing:.12em}.camera-source{display:block;width:min(80%,22em);margin:.7em auto 0;padding:.65em .8em;border:1px solid rgba(238,241,236,.3);color:var(--paper);background:#090a0bd9;font:500 .72em DM Mono,monospace;letter-spacing:.04em;outline:none}.camera-source:focus{border-color:var(--lime)}.live-card{position:absolute;left:40.8%;top:27.3%;width:32%}.live-topline{display:flex;justify-content:space-between;align-items:center;font:500 .72em DM Mono,monospace;letter-spacing:.12em}.live-pill{display:inline-flex;align-items:center;gap:.7em;padding:.55em .9em;color:var(--ink);background:var(--lime);font-weight:500}.live-pill i{width:.65em;height:.65em;border-radius:50%;background:var(--ink)}.live-viewers{color:var(--muted)}h1{margin:.36em 0 .15em;font-size:clamp(3.5em,6.6vw,7.5em);font-weight:600;line-height:.84;letter-spacing:-.08em}h1 em{color:var(--lime);font-style:normal}.live-card p{margin:1.5em 0 2.3em;color:var(--muted);font:500 .72em DM Mono,monospace;letter-spacing:.18em}.progress{height:3px;background:#eef1ec29}.progress span{display:block;height:100%;width:75%;background:var(--lime)}.live-footer{display:flex;justify-content:space-between;padding-top:1em;color:var(--muted)}.live-footer strong{color:var(--paper);font-weight:500}.side-stats{position:absolute;right:5.2%;top:27.5%;width:15%}.stat{display:grid;grid-template-columns:2.2em 1fr;padding:1.15em 0;border-top:1px solid var(--line)}.stat:last-child{border-bottom:1px solid var(--line)}.stat-index{color:var(--lime);font:500 .68em DM Mono,monospace}.stat-label{color:var(--muted);font-size:.62em;align-self:center}.stat strong{grid-column:2;margin-top:.55em;font-size:.88em;letter-spacing:.05em;font-weight:500}.ticker{position:absolute;left:5.2%;right:5.2%;bottom:7%;height:4.2em;display:flex;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}.ticker-tag{height:100%;display:flex;align-items:center;padding-right:2.5em;color:var(--ink);background:var(--lime);padding-left:1.2em;margin-left:-1px}.ticker-track{margin-left:2.4em;color:var(--muted);animation:slide 24s linear infinite}.ticker-code{margin-left:auto;padding-left:2em;color:var(--lime)}.bottom-accent{position:absolute;left:5.2%;bottom:4.8%;width:8.5%;height:2px;background:var(--orange)}@keyframes blink{50%{opacity:.35}}@keyframes slide{0%{transform:translate(0)}to{transform:translate(-18%)}}@media(max-width:1100px){.side-stats{display:none}.live-card{left:38%;width:50%}}
