:root{--fondo: #f6f5f2;--fondo-panel: #ffffff;--texto: #1b1b1a;--texto-tenue: #5d5c58;--borde: #dedcd6;--acento: #7a3ea8;--aviso-fondo: #fff4d6;--aviso-texto: #6b4a00;--aviso-borde: #e5c76b}@media(prefers-color-scheme:dark){:root{--fondo: #121214;--fondo-panel: #1b1b1f;--texto: #ececec;--texto-tenue: #a3a3a8;--borde: #2e2e34;--acento: #c08cf0;--aviso-fondo: #3a2f10;--aviso-texto: #f3dfa4;--aviso-borde: #6b5720}}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--fondo);color:var(--texto);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column;gap:16px;align-items:center}.barra{text-align:center}.barra h1{margin:0;font-size:clamp(18px,4vw,26px)}.etiqueta{font-size:12px;vertical-align:middle;padding:2px 8px;border-radius:999px;background:var(--acento);color:#fff}.lema{margin:4px 0 0;color:var(--texto-tenue);font-size:13px}main{width:100%;max-width:780px;display:flex;flex-direction:column;gap:16px}.escenario{position:relative;background:#000;border:1px solid var(--borde);border-radius:10px;overflow:hidden;display:grid;place-items:center;aspect-ratio:256 / 240;touch-action:none}.escenario.arrastrando{outline:3px dashed var(--acento);outline-offset:-6px}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:#000}.portada{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:20px;text-align:center;background:#000000b8;color:#fff}.titulo-portada{margin:0;font-size:clamp(15px,3.4vw,19px);font-weight:600}.ayuda{margin:0;color:#b9b9bd;font-size:13px}.boton{display:inline-block;min-height:44px;padding:11px 20px;border-radius:8px;background:var(--acento);color:#fff;font-weight:600;cursor:pointer}.boton:focus-visible{outline:3px solid #fff;outline-offset:2px}.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.solo-lectores:focus-visible+.boton,.boton:focus-visible{outline:3px solid #fff;outline-offset:2px}.error{margin:4px 0 0;padding:8px 12px;border-radius:6px;background:#5b1a1a;color:#ffd9d9;font-size:13px;max-width:46ch}.nota{margin:0;color:var(--texto-tenue);font-size:12px;max-width:46ch}.portada .nota{color:#b9b9bd}.aviso{margin:0;padding:10px 14px;border:1px solid var(--aviso-borde);border-radius:8px;background:var(--aviso-fondo);color:var(--aviso-texto);font-size:13px}.controles{background:var(--fondo-panel);border:1px solid var(--borde);border-radius:10px;padding:14px 16px}.controles h2{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-tenue)}.teclas{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}.teclas li{display:flex;align-items:center;gap:6px;font-size:13px}kbd{min-width:26px;padding:3px 7px;border:1px solid var(--borde);border-bottom-width:2px;border-radius:5px;background:var(--fondo);font:inherit;font-size:12px;text-align:center}.pie{width:100%;max-width:780px}.metricas{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 6px}.metricas div{display:flex;gap:6px;align-items:baseline}.metricas dt{color:var(--texto-tenue);font-size:12px}.metricas dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}