:root{--noche: #151129;--noche-2: #241a3d;--humo: #9a91b8;--texto: #efe9ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--noche);color:var(--texto);font-family:DM Mono,ui-monospace,SF Mono,Menlo,monospace}main{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}h1{margin:0;font-size:13px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--humo)}canvas{background:var(--noche-2);border-radius:6px;display:block;max-width:100%;height:auto;image-rendering:pixelated;box-shadow:0 24px 60px #0000008c}.controls{width:100%;max-width:960px;font-size:12px;color:var(--humo);border:1px solid #2b2450;border-radius:6px;background:#2b1f4a59}.controls>summary{cursor:pointer;padding:10px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto);list-style:none;display:flex;align-items:baseline;gap:12px}.controls>summary::-webkit-details-marker{display:none}.controls>summary:before{content:"▸";display:inline-block;transition:transform .15s ease;color:var(--humo)}.controls[open]>summary:before{transform:rotate(90deg)}.ctl-hint{font-size:10px;letter-spacing:.1em;text-transform:none;color:var(--humo)}.ctl-grid{display:grid;gap:14px;padding:4px 14px 14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.ctl-player{border:1px solid #2b2450;border-radius:5px;padding:10px 12px;background:#15112980}.ctl-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.ctl-head b{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0;line-height:1.6}.key-chip{font:inherit;font-size:11px;min-width:46px;padding:2px 8px;background:#332a52;color:var(--texto);border:1px solid transparent;border-radius:3px;cursor:pointer}.key-chip:hover{border-color:var(--humo)}.key-chip.capturing{background:transparent;border-color:var(--texto);animation:latir .8s ease-in-out infinite}@keyframes latir{50%{opacity:.35}}.ctl-foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding:0 14px 12px;font-size:11px;line-height:1.8}kbd{background:#332a52;border-radius:3px;padding:1px 5px;color:var(--texto);font-size:11px}.stage{position:relative;display:block;max-width:100%}.menu{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#151129f7;border-radius:6px;padding:16px;overflow-y:auto}.menu[hidden]{display:none}.menu-tag{margin:0;color:var(--humo);font-size:11px;letter-spacing:.08em;text-align:center}.menu-cast{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:4px;max-width:100%}.cast-card{display:flex;flex-direction:column;align-items:center;gap:1px;font:inherit;cursor:pointer;padding:4px 10px 5px;background:#1511298c;border:1px solid;border-radius:5px;transition:background .12s ease}.cast-card:hover{background:#3d316380}.cast-card:focus-visible{outline:1px solid var(--texto);outline-offset:2px}.cast-card canvas{display:block}.cast-card b{font-size:10px;font-weight:500;letter-spacing:.16em}.cast-card span{font-size:9px;color:var(--humo);letter-spacing:.08em}.menu-blurb{margin:-8px 0 0;color:var(--humo);font-size:11px;letter-spacing:.1em;text-align:center}.menu-row{display:flex;align-items:center;gap:14px}.menu-label{width:190px;text-align:right;color:var(--humo);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.menu-opts{display:flex;gap:6px}.menu-opts button,.menu-play{font-family:inherit;cursor:pointer;background:#241a3d;color:var(--humo);border:1px solid #3d3163;border-radius:4px;padding:5px 11px;font-size:12px;transition:background .12s,color .12s,border-color .12s}.menu-opts button:hover,.menu-play:hover{border-color:#6b5a9e;color:var(--texto)}.menu-opts button[aria-pressed=true]{background:var(--texto);color:var(--noche);border-color:var(--texto)}.menu-play{margin-top:4px;padding:9px 38px;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--texto);border-color:#6b5a9e}.menu-play:hover{background:var(--texto);color:var(--noche)}.menu-hint{margin:0;color:var(--humo);font-size:10px;letter-spacing:.1em}.menu-link{font-family:inherit;font-size:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--texto);text-decoration:underline}.menu-link:hover{color:#8fd0ff}.catalog{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:var(--noche);border-radius:6px;display:flex;flex-direction:column}.catalog[hidden]{display:none}.cat-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #332a52;color:var(--humo);font-size:11px;letter-spacing:.22em;text-transform:uppercase}.cat-grid{overflow-y:auto;padding:14px 18px 20px}.cat-head{margin:14px 0 8px;color:var(--humo);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}.cat-head:first-child{margin-top:0}.cat-row{display:flex;flex-wrap:wrap;gap:8px}.cat-count{flex:1;text-align:right;letter-spacing:.1em}.cat-count.cat-warn{color:#ff6b5d}.cat-tools{display:flex;gap:14px;margin-left:18px}.cat-piece{width:108px;background:#1d1636;border:1px solid #2b2247;border-radius:4px;padding:6px;display:flex;flex-direction:column;gap:2px;font:inherit;text-align:left;cursor:pointer;transition:opacity .12s ease,border-color .12s ease}.cat-piece[aria-pressed=false]{opacity:.28}.cat-piece:hover{border-color:var(--humo)}.cat-piece[aria-pressed=true]{border-color:#4a3d78}.cat-piece:focus-visible{outline:1px solid var(--texto);outline-offset:1px}.cat-piece canvas{display:block}.cat-piece b{font-size:11px;font-weight:500;color:var(--texto);letter-spacing:.06em}.cat-piece span{font-size:9px;line-height:1.35;color:var(--humo)}.cat-piece em{font-size:9px;font-style:normal;color:#6b5f8c}.editor{z-index:3}.ed-name{font:inherit;font-size:11px;letter-spacing:.1em;background:#1d1636;color:var(--texto);border:1px solid #3d3163;border-radius:3px;padding:4px 8px;margin-left:18px;width:180px}.ed-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 18px;border-bottom:1px solid #332a52}.ed-bar button{font:inherit;font-size:11px;cursor:pointer;background:#241a3d;color:var(--humo);border:1px solid #3d3163;border-radius:4px;padding:5px 11px}.ed-bar button:hover{border-color:#6b5a9e;color:var(--texto)}.ed-bar button[aria-pressed=true]{background:var(--texto);color:var(--noche);border-color:var(--texto)}.ed-rot{margin-left:10px}.ed-status{margin-left:auto;font-size:10px;color:var(--humo);letter-spacing:.1em}.ed-status.ed-warn{color:#ff6b5d}.ed-body{display:flex;gap:12px;padding:12px 18px 16px;min-height:0;flex:1}.ed-canvas{flex:1;min-width:0;height:auto;align-self:flex-start;cursor:crosshair;box-shadow:none}.ed-side{width:210px;display:flex;flex-direction:column;gap:10px;min-height:0}.ed-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;overflow-y:auto;max-height:250px;padding-right:4px}.ed-piece{background:#1d1636;border:1px solid #2b2247;border-radius:3px;padding:2px;cursor:pointer;line-height:0}.ed-piece:hover{border-color:var(--humo)}.ed-piece[aria-pressed=true]{border-color:var(--texto);background:#2b2247}.ed-piece canvas{display:block;width:100%;height:auto}.ed-saved-list{font-size:11px;color:var(--humo);overflow-y:auto}.ed-saved-list b{display:block;margin-bottom:6px;font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase}.ed-saved{display:flex;justify-content:space-between;gap:8px;padding:2px 0}.ed-del{color:var(--humo);text-decoration:none}.ed-del:hover{color:#ff6b5d}.ed-empty{font-size:10px;opacity:.7}.ed-actions{display:flex;gap:6px;margin-left:14px}.ed-primary{border-color:#6b5a9e!important;color:var(--texto)!important}.ed-actions button:disabled{opacity:.35;cursor:default;border-color:#2b2450}.ed-actions button:disabled:hover{border-color:#2b2450;color:var(--humo)}.ed-play{margin-left:4px;min-width:84px}.ed-status.ed-ok{color:#4fd9b8}.ed-editing>.menu-link{color:#4fd9b8}.pause{gap:18px;background:#151129f5;z-index:4}.pause[hidden]{display:none}.pause-title{margin:0;font-size:22px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--texto)}.pause-note{opacity:.7}
