:root{--red:#ff1f1f;--red-dim:#7a0a0a;--bg:#050000;--panel:#120202;--text:#ffd9d4;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}*{box-sizing:border-box}body{background:radial-gradient(ellipse at 50% 0%, #2a0000 0%, var(--bg) 60%) fixed;min-height:100vh;margin:0}body:before,body:after{content:"";pointer-events:none;position:fixed;inset:0}body:before{background:repeating-linear-gradient(#ff1e1e0d 0 1px,#0000 1px 4px) 0 0/100% 4px,linear-gradient(#0000,#ff282812 40%,#ff463c1c 50%,#ff282812 60%,#0000) 0 0/100% 45vh no-repeat;animation:11s linear infinite roll}body:after{mix-blend-mode:screen;opacity:0;background:linear-gradient(#0000 0 18%,#ff1e1e33 18% 19.2%,#0000 19.2% 47%,#a020f029 47% 47.8%,#0000 47.8% 71%,#ff322824 71% 74.5%,#0000 74.5% 88%,#ff1e1e1f 88% 88.6%,#0000 88.6%);animation:7s step-end infinite tear;inset:0 -24px}@keyframes roll{0%{background-position:0 0,0 -45vh}to{background-position:0 88px,0 145vh}}@keyframes tear{0%,to{opacity:0;transform:none}22%{opacity:.9;transform:translate(-14px)}23%{opacity:.5;transform:translate(10px,22vh)scaleY(.5)}24.5%{opacity:0}58%{opacity:1;transform:translate(6px,-12vh)}59.5%{opacity:.7;transform:translate(-12px,8vh)scaleY(1.6)}61%{opacity:0}86%{opacity:.8;transform:translate(-6px,30vh)scaleY(.7)}87.5%{opacity:0}}main{z-index:1;position:relative}button,input,select{font:inherit;color:inherit}main{grid-template-columns:minmax(0,1fr);gap:24px;max-width:1100px;margin:0 auto;padding:24px 16px 64px;display:grid}@media (width>=860px){main{grid-template-columns:360px minmax(0,1fr);align-items:start}header{grid-column:1/-1}.panel{position:sticky;top:24px}.stage{max-width:max(420px,100svh - 150px)}}@media (width<=480px){header{padding-top:8px}.panel{padding:12px}header p{font-size:14px}}header{padding:32px 0 8px;position:relative;overflow:hidden}.ape-wall{letter-spacing:-2px;color:var(--red);opacity:.07;word-spacing:12px;pointer-events:none;-webkit-user-select:none;user-select:none;font:900 64px/.9 Helvetica Neue,Arial,sans-serif;position:absolute;inset:0}h1{color:var(--red);text-shadow:0 0 12px #ff0000b3,0 0 40px #f006;margin:0;font-family:Doto,monospace;font-size:clamp(48px,11vw,112px);font-weight:900;line-height:1;animation:7s step-end infinite title-glitch;position:relative}@keyframes title-glitch{0%,to{transform:none}91%{text-shadow:-4px 0 #a020f0,3px 0 #ff6a50,0 0 12px #ff0000b3;transform:translate(3px)skew(-6deg)}92%{clip-path:inset(30% 0 20%);transform:translate(-2px)}93%{clip-path:none;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation:none!important}}header p{color:#ff8a80;margin:8px 0 0;position:relative}.panel{background:var(--panel);border:1px solid var(--red-dim);grid-template-columns:minmax(0,1fr);gap:16px;padding:16px;display:grid}.tabs{border-bottom:1px solid var(--red-dim);display:flex}.tabs button{cursor:pointer;text-transform:uppercase;letter-spacing:.1em;color:#b56;background:0 0;border:0;border-bottom:2px solid #0000;flex:1;padding:10px 4px}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{color:var(--red);border-color:var(--red)}button{border:1px solid var(--red);color:var(--red);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;background:0 0;padding:10px 14px}button.primary{background:var(--red);color:#000;font-weight:700}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #fff}button.link{text-transform:none;letter-spacing:0;border:0;min-height:0;padding:0;text-decoration:underline}.row{gap:8px;display:flex}.row input{flex:1;min-width:0}input,select,button{border-radius:0;min-height:44px}input,select{border:1px solid var(--red-dim);background:#000;padding:10px}select{appearance:none;cursor:pointer;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ff1f1f' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center no-repeat;padding-right:32px}.drop{border:1px dashed var(--red);cursor:pointer;color:var(--red);text-transform:uppercase;place-items:center;padding:32px;display:grid}.drop input{opacity:0;width:1px;height:1px;position:absolute}.drop:focus-within{outline:2px solid #fff}.hint{color:#c88;margin:8px 0 0;font-size:13px}.error{color:#ff6b6b;margin:0;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:420px;margin:12px 0 0;padding:0;list-style:none;display:grid;overflow:auto}.grid button{border-color:var(--red-dim);text-transform:none;width:100%;color:var(--text);padding:0;font-size:11px;display:grid}.grid button:hover{border-color:var(--red)}.grid img,.grid .ph{aspect-ratio:1;object-fit:cover;background:#200;width:100%;display:block}.grid span{padding:4px}.stage{gap:16px;display:grid}.screen{aspect-ratio:1;border:1px solid var(--red-dim);background:#000;position:relative;box-shadow:0 0 60px #ff000026}.screen img{width:100%;height:100%;display:block}.screen{overflow:hidden}.screen>span{color:var(--red);text-shadow:0 0 16px #ff0000b3;background:#0006;place-items:center;font-family:Doto,monospace;font-size:clamp(28px,7vw,56px);font-weight:900;display:grid;position:absolute;inset:0}.bars{pointer-events:none;position:absolute;inset:0}.scanline{opacity:0;pointer-events:none;background:#ff6a50;height:3px;position:absolute;left:0;right:0;box-shadow:0 0 12px 3px #ff1e1ee6,0 0 40px 8px #ff000073}.scanline:before{content:"";background:linear-gradient(#0000,#ff282847);height:90px;position:absolute;bottom:3px;left:0;right:0}.bar{opacity:0;mix-blend-mode:screen;background:linear-gradient(90deg,#0000,#ff1f1f 20%,#ff4a3a 50%,#a020f0 80%,#0000);width:120%;position:absolute;left:-10%}.glitch{isolation:isolate}.glitch:before,.glitch:after{content:attr(data-text);z-index:-1;opacity:.8;place-items:center;animation:1.6s step-end infinite glitch-a;display:grid;position:absolute;inset:0}.glitch:before{color:#a020f0}.glitch:after{color:#ff6a50;animation-name:glitch-b;animation-duration:2.1s}@keyframes glitch-a{0%,to{clip-path:inset(0);transform:none}20%{clip-path:inset(20% 0 55%);transform:translate(-4px,1px)}24%{clip-path:inset(60% 0 10%);transform:translate(3px)}28%{clip-path:inset(0 0 100%);transform:none}70%{clip-path:inset(40% 0 35%);transform:translate(5px,-1px)}73%{clip-path:inset(0 0 100%);transform:none}}@keyframes glitch-b{0%,to{clip-path:inset(0 0 100%);transform:none}35%{clip-path:inset(10% 0 70%);transform:translate(4px)}39%{clip-path:inset(70% 0 5%);transform:translate(-3px,1px)}43%{clip-path:inset(0 0 100%);transform:none}}.toggles{flex-wrap:wrap;gap:8px 20px;display:flex}.toggles label{cursor:pointer;align-items:center;gap:8px;min-height:32px;font-size:14px;display:flex}.toggles input{accent-color:var(--red);width:16px;height:16px;min-height:0;margin:0}.actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}
