:root{--accent: #ff3cc8;--accent2: #3ce6ff;--bg: #030308;--panel: rgba(10, 9, 22, .92);--line: #24233a;--text: #c9c6e8;--dim: #9a97c0;--pixel: "Press Start 2P", monospace;--mono: "VT323", monospace}[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--pixel);overflow:hidden}#app{display:flex;height:100vh;height:100dvh}#stage{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}#board{display:block;touch-action:none;cursor:crosshair}#board.panning{cursor:grabbing}.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,#0000 0 2px,#0000002e 2px 3px),radial-gradient(ellipse at center,#0000 55%,#000000a6);animation:flicker 6s infinite steps(1)}@keyframes flicker{0%,to{opacity:1}47%{opacity:.92}48%{opacity:1}82%{opacity:.95}}#hud{position:absolute;top:14px;left:16px;display:flex;gap:18px;pointer-events:none;flex-wrap:wrap}.stat{display:flex;flex-direction:column;gap:2px}.stat .label{font-size:9px;color:var(--dim);letter-spacing:1px}.stat .val{font-family:var(--mono);font-size:28px;line-height:1;color:var(--accent2);text-shadow:0 0 6px var(--accent2),0 0 16px var(--accent2);min-width:4ch}.status{position:absolute;top:16px;right:60px;font-size:10px;padding:6px 10px;border:1px solid var(--dim);color:var(--dim);letter-spacing:2px;pointer-events:none}.status.running{color:var(--accent2);border-color:var(--accent2);box-shadow:0 0 10px var(--accent2),inset 0 0 6px var(--accent2);text-shadow:0 0 6px var(--accent2);animation:blink 1s infinite steps(2)}.status.extinct{color:#f35;border-color:#f35;box-shadow:0 0 14px #f35;text-shadow:0 0 8px #ff3355;animation:shake .4s 2}.status.stable{color:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}@keyframes blink{50%{opacity:.55}}@keyframes shake{25%{translate:-4px 0}75%{translate:4px 0}}.stamp-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);font-size:8px;padding:8px 12px;color:var(--accent2);background:#05050cd9;border:1px solid var(--accent2);box-shadow:0 0 12px var(--accent2);white-space:nowrap;pointer-events:none}.toast{position:absolute;bottom:56px;left:50%;transform:translate(-50%,20px);font-size:10px;padding:10px 14px;color:#fff;background:#05050ce6;border:1px solid var(--accent);box-shadow:0 0 16px var(--accent);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%)}.toast.error{border-color:#f35;box-shadow:0 0 16px #f35}.drop{position:absolute;inset:12px;display:grid;place-items:center;font-size:14px;color:var(--accent2);border:2px dashed var(--accent2);background:#0009;pointer-events:none}.panel-toggle{position:absolute;top:12px;right:12px;width:34px;height:34px;font-family:var(--pixel);font-size:12px;color:var(--accent);background:#05050ccc;border:1px solid var(--accent);cursor:pointer}#app.collapsed #panel{display:none}#app.collapsed .panel-toggle{transform:scaleX(-1)}#panel{width:290px;flex-shrink:0;overflow-y:auto;background:var(--panel);border-left:1px solid var(--accent);box-shadow:-4px 0 24px -8px var(--accent);padding:18px 16px;display:flex;flex-direction:column;gap:18px;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}.logo{margin:0;font-size:20px;color:#fff;text-shadow:0 0 4px #fff,0 0 10px var(--accent),0 0 22px var(--accent),0 0 40px var(--accent);animation:neon 4s infinite}.logo span{color:var(--accent2);text-shadow:0 0 8px var(--accent2),0 0 20px var(--accent2)}@keyframes neon{0%,18%,22%,25%,53%,57%,to{opacity:1}20%,24%,55%{opacity:.45}}.sub{margin:8px 0 0;font-size:8px;color:var(--dim);letter-spacing:1px}section{display:flex;flex-direction:column;gap:12px}h2{margin:0;font-size:9px;color:var(--accent);letter-spacing:2px;text-shadow:0 0 6px var(--accent);border-bottom:1px dashed var(--line);padding-bottom:6px}.btn{font-family:var(--pixel);font-size:9px;padding:10px 6px;color:var(--accent2);background:transparent;border:1px solid var(--accent2);cursor:pointer;text-shadow:0 0 6px var(--accent2);box-shadow:inset 0 0 0 transparent;transition:box-shadow .15s,background .15s,color .15s,transform .05s;white-space:nowrap}.btn:hover{box-shadow:0 0 10px var(--accent2),inset 0 0 8px var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,transparent)}.btn:active{transform:translateY(1px) scale(.98)}.btn.on{color:#05050b;background:var(--accent2);text-shadow:none;box-shadow:0 0 14px var(--accent2)}.btn.primary{color:var(--accent);border-color:var(--accent);text-shadow:0 0 6px var(--accent)}.btn.primary:hover{box-shadow:0 0 10px var(--accent),inset 0 0 8px var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.btn.primary.on{color:#05050b;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:pulse 1.2s infinite}.btn.danger{color:#f35;border-color:#f35;text-shadow:0 0 6px #ff3355}.btn.danger:hover{box-shadow:0 0 10px #f35,inset 0 0 8px #f35;background:#ff33551a}.btn.small{padding:8px 6px;font-size:8px}@keyframes pulse{50%{box-shadow:0 0 28px var(--accent)}}.transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.transport .btn{padding-left:2px;padding-right:2px;font-size:8px;display:flex;align-items:center;justify-content:center;gap:6px}.slider{display:flex;flex-direction:column;gap:8px;font-size:8px}.slider .row{display:flex;justify-content:space-between;color:var(--dim)}output{font-family:var(--mono);font-size:18px;line-height:8px;color:var(--accent2);text-shadow:0 0 6px var(--accent2)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 6px);border:1px solid #2f2d48}input[type=range]::-moz-range-track{height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 6px);border:1px solid #2f2d48}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:16px;margin-top:-7px;background:var(--accent);border:none;box-shadow:0 0 8px var(--accent),0 0 16px var(--accent)}input[type=range]::-moz-range-thumb{width:12px;height:16px;border:none;border-radius:0;background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 16px var(--accent)}input[type=range]:focus-visible{outline:1px dashed var(--accent2);outline-offset:2px}.patterns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:6px}.pattern{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;font-family:var(--pixel);font-size:6px;line-height:1.4;color:var(--text);background:#ffffff05;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,box-shadow .15s}.pattern canvas{width:100%;height:36px;image-rendering:pixelated}.pattern.wide{grid-column:span 2}.pattern.full{grid-column:1 / -1}.pattern.tall{grid-row:span 2}.pattern.tall canvas{height:104px}.pattern:hover{border-color:var(--accent2);box-shadow:0 0 8px var(--accent2)}.pattern.on{border-color:var(--accent);box-shadow:0 0 12px var(--accent),inset 0 0 10px color-mix(in srgb,var(--accent) 40%,transparent);color:#fff}.field{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:var(--dim)}select{font-family:var(--pixel);font-size:8px;padding:6px;color:var(--accent2);background:#07070f;border:1px solid var(--accent2)}.check{display:flex;align-items:center;gap:10px;font-size:8px;color:var(--dim);cursor:pointer}.check input{accent-color:var(--accent);width:14px;height:14px}.sound-row{display:flex;gap:12px;align-items:center}.sound-row .btn{width:58px;padding:7px 4px;flex-shrink:0}.sound-label{width:44px;flex-shrink:0;font-size:8px;color:var(--dim)}.file-row{display:grid;grid-template-columns:1fr 1fr .7fr;gap:8px}footer{margin-top:auto;font-size:8px;line-height:1.5;color:var(--dim)}.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.keys dt{color:var(--text);white-space:nowrap}.keys dd{margin:0;font-family:var(--mono);font-size:15px;line-height:.75;white-space:nowrap}#panel .sticky{position:sticky;top:-18px;z-index:2;margin:-18px -16px 0;padding:14px 16px 12px;background:#0a0916;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 6px 12px -6px #000000e6}button:focus-visible,select:focus-visible{outline:1px dashed var(--accent);outline-offset:2px}@media(max-width:820px){#app{flex-direction:column}#panel{width:auto;max-height:38dvh;border-left:none;border-top:1px solid var(--accent);padding-top:12px}#panel header{display:none}#panel .sticky{top:-12px;margin-top:-12px;padding-top:10px;padding-bottom:10px}.transport{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.transport .btn{font-size:12px;padding:9px 0}.transport .lbl{display:none}#hud{left:12px;right:66px;top:12px;gap:0;justify-content:space-between;flex-wrap:nowrap}.stat .label{font-size:7px}.stat .label .per{display:none}.stat .val{font-size:20px;min-width:0}.status{top:52px;right:auto;left:50%;transform:translate(-50%);font-size:8px;padding:4px 8px}.status:not(.extinct):not(.stable){display:none}.intro{font-size:8px;line-height:1.7;padding:16px}.intro p{font-size:16px}.panel-toggle{transform:rotate(-90deg)}#app.collapsed .panel-toggle{transform:rotate(90deg)}}.intro{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));padding:22px 22px 18px;background:#05050cf0;border:1px solid var(--accent);box-shadow:0 0 24px var(--accent),inset 0 0 18px color-mix(in srgb,var(--accent) 25%,transparent);font-size:9px;line-height:1.9;animation:intro-in .35s ease-out}.intro h2{font-size:11px;margin-bottom:12px}.intro ol{margin:0 0 12px;padding-left:18px}.intro b{color:var(--accent2);font-weight:400;text-shadow:0 0 6px var(--accent2)}.intro p{margin:0 0 16px;color:var(--dim);font-family:var(--mono);font-size:18px;line-height:1.2}@keyframes intro-in{0%{opacity:0;transform:translate(-50%,-46%)}}.paste-box{display:flex;flex-direction:column;gap:8px}.paste-box textarea{width:100%;resize:vertical;font-family:var(--mono);font-size:16px;color:var(--accent2);background:#07070f;border:1px solid var(--line);padding:6px}.paste-box textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 8px var(--accent2)}.paste-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.now-playing{margin:-4px 0 0;font-size:7px;color:var(--dim);letter-spacing:1px}.now-playing span{color:var(--accent2);text-shadow:0 0 6px var(--accent2)}.paste-box textarea::placeholder{color:var(--dim);opacity:.55;font-style:italic}.stat .val.zero{opacity:.45;text-shadow:none}