:root{--navy: #000080;--navy-deep: #00004a;--blue: #0000a8;--azure: #0080c0;--azure-light: #40b0e0;--lapis: #1a3a8a;--lapis-deep: #0a1a4a;--teal: #008080;--stone-0: #ffffff;--stone-1: #dfdfdf;--stone-2: #c0c0c0;--stone-3: #a0a0a0;--stone-4: #808080;--stone-5: #404040;--stone-6: #000000;--ink: #000000;--paper: #ffffff;--font-ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;--font-mono: "Courier New", Courier, monospace;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E")}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0%,rgba(64,176,224,.12),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.6),transparent 70%),var(--lapis-deep);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body:before{content:"";position:fixed;inset:0;z-index:0;background-image:var(--grain);background-size:180px 180px;mix-blend-mode:soft-light;opacity:.4;pointer-events:none}body:after{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%);pointer-events:none}.frame{position:fixed;top:50%;left:50%;z-index:1;width:450px;height:800px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:var(--stone-2);border:2px solid var(--lapis);box-shadow:inset 0 0 0 1px var(--azure),inset 0 0 0 2px var(--stone-6),0 0 30px #000c;transform:translate(-50%,-50%) scale(var(--scale, 1));transform-origin:center}.frame:after{content:"";position:absolute;inset:0;z-index:5;background-image:var(--grain);background-size:180px 180px;mix-blend-mode:soft-light;opacity:.3;pointer-events:none}.titlebar{flex:0 0 24px;display:flex;align-items:center;gap:5px;padding:0 5px;background:var(--navy);border-bottom:1px solid var(--lapis-deep);box-shadow:inset 0 1px 0 var(--azure-light),inset 0 -1px 0 var(--lapis);user-select:none}.titlebar-icon{flex:0 0 16px;width:16px;height:16px;display:grid;place-items:center;background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4)}.titlebar-icon svg{display:block;width:12px;height:12px}.titlebar-text{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--paper);text-shadow:0 1px 0 #000}.titlebar-95{color:var(--azure-light)}.titlebar-edition{margin-left:auto;font-size:8px;letter-spacing:.16em;color:var(--azure-light);text-shadow:0 1px 0 #000}.topbar{flex:0 0 28px;display:flex;gap:2px;padding:2px;background:var(--stone-2);border-bottom:1px solid var(--lapis);box-shadow:inset 0 1px 0 var(--stone-0),inset 0 -1px 0 var(--azure)}.bar-button{height:24px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 7px;font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--ink);background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.bar-button:hover{background:var(--stone-1)}.bar-button:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.bar-button:focus-visible{outline:1px dotted var(--ink);outline-offset:-3px}.bar-primary{flex:1}.led{width:6px;height:6px;flex:0 0 6px;background:var(--lapis-deep);border:1px solid var(--stone-6);box-shadow:inset 1px 1px #000,inset -1px -1px 0 var(--lapis)}[aria-pressed=true] .led{background:var(--azure);box-shadow:inset 1px 1px 0 var(--azure-light),inset -1px -1px 0 var(--lapis-deep)}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--stone-2);box-shadow:inset 0 1px 0 var(--stone-0),inset 0 -1px 0 var(--stone-4)}.stage-row{display:flex;align-items:flex-start;justify-content:center;gap:8px}.board-frame{position:relative;width:304px;height:604px;padding:2px;background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4),inset 0 0 0 1px var(--lapis),inset 0 0 0 2px var(--azure)}.board{width:300px;height:600px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(20,1fr);background:var(--lapis-deep);box-shadow:inset 2px 2px #000;touch-action:none;-webkit-touch-callout:none;user-select:none}.board.is-live{cursor:pointer}.board.is-pressing{box-shadow:inset 2px 2px #000,inset 0 0 0 2px var(--azure)}.board:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}.cell{position:relative;background:var(--lapis-deep);box-shadow:inset 0 0 0 1px var(--lapis)}.cell.ghost{background:#40b0e024;box-shadow:inset 0 0 0 1px var(--azure)}.cell.p1,.mini-cell.p1{background:#00b8c8;box-shadow:inset 1px 1px #7ae0e8,inset -1px -1px #006a78,inset 0 0 0 1px #003a44}.cell.p2,.mini-cell.p2{background:#e8c020;box-shadow:inset 1px 1px #fff0a0,inset -1px -1px #8a6a00,inset 0 0 0 1px #4a3a00}.cell.p3,.mini-cell.p3{background:#a050c8;box-shadow:inset 1px 1px #d8a0f0,inset -1px -1px #5a2a78,inset 0 0 0 1px #2a0a3a}.cell.p4,.mini-cell.p4{background:#40b840;box-shadow:inset 1px 1px #a0e8a0,inset -1px -1px #1a6a1a,inset 0 0 0 1px #0a3a0a}.cell.p5,.mini-cell.p5{background:#e04848;box-shadow:inset 1px 1px #f8a0a0,inset -1px -1px #8a1a1a,inset 0 0 0 1px #4a0a0a}.cell.p6,.mini-cell.p6{background:#4868e0;box-shadow:inset 1px 1px #a0b0f8,inset -1px -1px #1a2a8a,inset 0 0 0 1px #0a1a4a}.cell.p7,.mini-cell.p7{background:#e08020;box-shadow:inset 1px 1px #f8c080,inset -1px -1px #8a4a00,inset 0 0 0 1px #4a2a00}.board-badge,.board-score{position:absolute;top:6px;z-index:2;padding:2px 5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--azure-light);background:var(--lapis-deep);border:1px solid var(--azure);box-shadow:inset 1px 1px 0 var(--lapis),inset -1px -1px #000;text-shadow:0 1px 0 #000}.board-badge{left:6px}.board-score{right:6px;font-size:11px;letter-spacing:.08em;color:var(--paper)}.board-message{position:absolute;top:50%;left:50%;z-index:3;padding:6px 10px;transform:translate(-50%,-50%);font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--paper);background:var(--lapis-deep);border:1px solid var(--azure);box-shadow:inset 1px 1px 0 var(--lapis),inset -1px -1px #000;text-shadow:0 1px 0 #000}.board-message[hidden]{display:none}.board-hint{position:absolute;top:calc(50% + 18px);left:50%;z-index:3;transform:translate(-50%);font-size:8px;font-weight:700;letter-spacing:.14em;color:var(--azure-light);text-shadow:0 1px 0 #000;white-space:nowrap}.board-hint[hidden]{display:none}.line-flash{position:absolute;left:2px;right:2px;z-index:1;background:#fff;pointer-events:none;animation:line-flash .22s steps(2,end) forwards}@keyframes line-flash{0%{opacity:.95}50%{opacity:.35}to{opacity:0}}.line-pixel{position:absolute;z-index:4;pointer-events:none;box-shadow:0 0 0 1px #00000059;animation-name:pixel-burst;animation-timing-function:cubic-bezier(.2,.7,.3,1);animation-fill-mode:forwards}@keyframes pixel-burst{0%{transform:translate(0);opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}.board-frame.is-shaking{animation:board-shake .16s steps(2,end)}@keyframes board-shake{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}to{transform:translate(0)}}.side{width:120px;display:flex;flex-direction:column;gap:8px}.side-box{padding:4px;background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4),inset 0 0 0 1px var(--lapis),inset 0 0 0 2px var(--azure)}.side-box[hidden]{display:none}.side-box.is-locked{opacity:.55}.side-label{margin-bottom:4px;font-size:8px;font-weight:700;letter-spacing:.18em;text-align:center;color:var(--lapis)}.mini{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1px;aspect-ratio:1;background:var(--lapis-deep);box-shadow:inset 1px 1px #000}.mini+.mini{margin-top:4px}.mini-cell{background:var(--lapis-deep);box-shadow:inset 0 0 0 1px var(--lapis)}.level-value{font-family:var(--font-mono);font-size:18px;font-weight:700;line-height:1;text-align:center;color:var(--lapis-deep)}.level-bar{height:6px;margin-top:4px;background:var(--lapis-deep);border:1px solid var(--stone-6);box-shadow:inset 1px 1px #000}.level-fill{width:0;height:100%;background:var(--azure);box-shadow:inset 0 1px 0 var(--azure-light)}.controller{position:relative;width:400px;height:var(--pad-height, 88px);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--pad-height, 88px) / 2);background:var(--stone-2);border:2px solid var(--lapis);box-shadow:inset 2px 2px 0 var(--stone-0),inset -2px -2px 0 var(--stone-4),inset 0 0 0 1px var(--azure),0 4px 0 var(--stone-5),0 8px 12px #0006;user-select:none}.controller-window{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--pad-height, 88px) / 2 - 2px)}.controller-cavity{position:absolute;inset:0;display:grid;place-items:center;background:var(--lapis-deep);box-shadow:inset 2px 2px #000,inset -2px -2px 0 var(--lapis)}.start-over{height:34px;padding:0 18px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink);background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4),0 3px 0 var(--stone-5);cursor:pointer}.start-over:hover{background:var(--stone-1)}.start-over:active{transform:translateY(2px);box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.start-over:disabled{cursor:default}.controller-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--stone-2);border-radius:inherit;transition:transform .24s cubic-bezier(.2,.8,.2,1)}.controller.is-over .controller-face{transform:translateY(-100%)}.controller-cluster{display:grid;grid-auto-flow:column;grid-auto-columns:var(--pad-size, 46px);gap:8px}.pad-button{width:var(--pad-size, 46px);height:var(--pad-size, 46px);display:grid;place-items:center;padding:0;border-radius:50%;font-family:var(--font-ui);font-size:calc(var(--pad-size, 46px) * .39);font-weight:700;color:var(--ink);background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 2px 2px 0 var(--stone-0),inset -2px -2px 0 var(--stone-4),0 3px 0 var(--stone-5);cursor:pointer;touch-action:none;text-shadow:0 1px 0 rgba(255,255,255,.5)}.pad-button[hidden]{display:none}.pad-button:hover{background:var(--stone-1)}.pad-button:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 var(--stone-4),inset -2px -2px 0 var(--stone-0)}.pad-button:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}.pad-button:disabled{opacity:.45;cursor:default;transform:none;box-shadow:inset 2px 2px 0 var(--stone-0),inset -2px -2px 0 var(--stone-4),0 3px 0 var(--stone-5)}.controller.is-editing{outline:2px dashed var(--azure);outline-offset:4px}.controller.is-editing .pad-button{cursor:grab}.controller.is-editing .pad-button.is-dragging{position:relative;z-index:4;cursor:grabbing;box-shadow:inset 2px 2px 0 var(--stone-0),inset -2px -2px 0 var(--stone-4),0 8px 14px #00000080}.pad-button.is-drop-target{outline:2px dashed var(--azure);outline-offset:2px}.controller-gear{position:absolute;top:-11px;right:16px;width:22px;height:22px;display:none;place-items:center;padding:0;border-radius:50%;font-family:var(--font-ui);font-size:12px;line-height:1;color:var(--azure-light);background:var(--lapis-deep);border:1px solid var(--azure);box-shadow:inset 1px 1px 0 var(--lapis),inset -1px -1px #000;text-shadow:0 1px 0 #000;cursor:pointer}.controller.is-editing .controller-gear{display:grid}.controller.is-idle .controller-cluster{opacity:.7}.modal-layer{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:#00000073}.modal-layer[hidden]{display:none}.modal-dialog{width:100%;max-width:300px;max-height:100%;display:flex;flex-direction:column;background:var(--stone-2);border:2px solid var(--lapis);box-shadow:inset 0 0 0 1px var(--azure),inset 0 0 0 2px var(--stone-6),0 8px 18px #0009}.modal-titlebar{flex:0 0 24px;display:flex;align-items:center;gap:6px;padding:0 3px 0 6px;background:var(--navy);box-shadow:inset 0 1px 0 var(--azure-light),inset 0 -1px 0 var(--lapis)}.modal-title{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--paper);text-shadow:0 1px 0 #000}.modal-back,.modal-close{width:18px;height:18px;display:grid;place-items:center;padding:0;font-family:var(--font-ui);font-size:12px;font-weight:700;line-height:1;color:var(--ink);background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.modal-back{margin-right:2px}.modal-close{margin-left:auto}.modal-back[hidden]{display:none}.modal-back:active,.modal-close:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.modal-body{padding:8px;overflow-y:auto}.remap-list{display:grid;gap:3px}.remap-list[hidden],.remap-picker[hidden]{display:none}.remap-row{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;font-family:var(--font-ui);font-size:10px;font-weight:700;text-align:left;color:var(--ink);background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.remap-row:hover{background:var(--stone-1)}.remap-row:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.remap-key{flex:0 0 44px;font-size:8px;letter-spacing:.1em;color:var(--lapis)}.remap-slot{margin:0 0 6px;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--lapis)}.remap-options{display:grid;gap:3px}.remap-option{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;font-family:var(--font-ui);font-size:10px;font-weight:700;text-align:left;color:var(--ink);background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.remap-option:hover{background:var(--stone-1)}.remap-option:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.remap-option.is-current{background:var(--lapis);color:var(--paper);box-shadow:inset 1px 1px 0 var(--lapis-deep),inset -1px -1px 0 var(--azure);text-shadow:0 1px 0 #000}.remap-glyph{flex:0 0 18px;display:grid;place-items:center;font-size:13px;line-height:1}.remap-name{flex:1}.option-row{display:flex;align-items:center;gap:8px;padding:5px 6px;font-size:10px;font-weight:700;color:var(--ink);background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.option-row+.option-row{margin-top:3px}.option-row input{width:12px;height:12px;margin:0;accent-color:var(--lapis)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}