:root{--ink:#0e0c12;--hud:#191622;--hudline:#2b2637;--slot:#241a24;--slotlip:#332c40;--warm:#e8b76a;--warmdim:#7a5526;--pods:#a9d16a;--podsdim:#4d6630;--parch:#a49a88;--stone:#b8a884;--dusk:#a89fbc;--danger:#d25e48}.btn,.mini{clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}#padwrap{touch-action:none;flex:none;margin:-12px;padding:12px;display:flex}#pad{width:min(176px, calc(var(--avail,100vw) * .46));height:min(176px, calc(var(--avail,100vw) * .46));clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);background:var(--dusk);touch-action:none;flex:none;position:relative}#pad:after{content:"";z-index:0;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);background:var(--hud);position:absolute;inset:2px;box-shadow:inset 3px 3px #ffffff0f,inset -3px -3px #00000080}#pad div{z-index:1;background:var(--slotlip);border:1px solid var(--dusk);position:absolute}#pad.flying div{opacity:.35}#pad.flying{background:var(--warm)}#pad .ring{border:1px dashed var(--hudline);pointer-events:none;background:0 0;border-radius:50%;width:76%;height:76%;top:12%;left:12%}#pad .hub{background:var(--slot);border-color:var(--hudline);width:7%;height:7%;top:46.5%;left:46.5%}#pad .knob{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:var(--stone);pointer-events:none;border:0;width:26%;height:26%;transition:transform 80ms steps(4,end);top:37%;left:37%}#pad .knob:after{content:"";clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:var(--slotlip);position:absolute;inset:2px;box-shadow:inset 2px 2px #ffffff1a,inset -2px -2px #00000073}#pad .knob.held{background:#efe7d8;transition:none}#pad .knob.held:after{background:var(--dusk)}#pad.flying .knob{background:var(--warm)}#buttons{flex-direction:column;align-items:center;gap:10px;display:flex}#pair{align-items:center;gap:12px;display:flex}.btn{background:var(--slot);color:var(--warm);box-shadow:inset 0 0 0 2px var(--warm), inset 3px 3px 0 #ffffff14, inset -3px -3px 0 #00000080;width:min(84px, calc(var(--avail,100vw) * .245));height:min(84px, calc(var(--avail,100vw) * .245));letter-spacing:.12em;text-transform:lowercase;--label:#e8b76a;touch-action:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;font-size:12px;display:flex}.btn.on{background-color:var(--warm);color:var(--slot);--label:#2a2028;box-shadow:inset 0 0 0 2px #fff8e8,inset 3px 3px #00000059,inset -3px -3px #ffffff2e}.btn.no,.mini.no{--label:#ffd9d0;color:#ffd9d0;opacity:1!important;box-shadow:inset 0 0 0 4px var(--danger), inset 6px 6px 0 #00000059!important;background-color:#3a1a18!important}.btn.no.on,.mini.no.on{background-color:#3a1a18!important}#pad.waiting,#pad.waiting .knob{background:var(--hudline)}#pad.waiting .knob:after{background:var(--slot)}#pad.waiting .ring{border-color:var(--slot)}#btn-a.charged{font-size:11px;box-shadow:inset 0 0 0 2px #8fd6ff,inset 3px 3px #ffffff0f,inset -3px -3px #00000080}.btn,.mini{transition:none}.mini{letter-spacing:.1em;text-transform:lowercase;--label:#a49a88;background:var(--hud);width:auto;min-width:48px;max-width:92px;height:48px;min-height:48px;color:var(--parch);box-shadow:inset 0 0 0 2px var(--parch), inset 2px 2px 0 #ffffff0f, inset -2px -2px 0 #00000073;touch-action:none;flex:1 1 0;justify-content:center;align-items:center;font-size:10px;display:flex}.mini.on{background-color:var(--parch);color:var(--ink);--label:#2a2028;box-shadow:inset 0 0 0 2px #efe7d8,inset 2px 2px #0000004d,inset -2px -2px #ffffff2e}.mini,.btn{box-shadow:inset 0 0 0 2px var(--parch), inset 3px 3px 0 #ffffff0f, inset -3px -3px 0 #0000008c, 0 2px 0 #00000080;border-radius:0}.btn{box-shadow:inset 0 0 0 2px var(--warm), inset 3px 3px 0 #ffffff0f, inset -3px -3px 0 #0000008c, 0 2px 0 #00000080}.mini:active,.btn:active{box-shadow:inset 0 0 0 2px var(--parch), inset 3px 3px 0 #0006;transform:translateY(1px)}.btn:active{box-shadow:inset 0 0 0 2px var(--warm), inset 3px 3px 0 #0006}.btn[data-tool=pods]{box-shadow:inset 0 0 0 2px var(--pods), inset 3px 3px 0 #ffffff0f, inset -3px -3px 0 #0000008c, 0 2px 0 #00000080;--label:var(--pods);color:var(--pods)}.btn[data-tool=tide]{--label:#7fd6cf;color:#7fd6cf;box-shadow:inset 0 0 0 2px #7fd6cf,inset 3px 3px #ffffff0f,inset -3px -3px #0000008c,0 2px #00000080}.btn[data-tool=ember]{--label:#f2a04e;color:#f2a04e;box-shadow:inset 0 0 0 2px #f2a04e,inset 3px 3px #ffffff0f,inset -3px -3px #0000008c,0 2px #00000080}#pad{background:var(--stone)}#pad:after{background:var(--slot)}#pad .ring{border:2px solid var(--slotlip);border-style:solid}#pad .knob{border:2px solid var(--parch);background:#efe7d8;box-shadow:inset -3px -3px #00000040,0 2px #00000080}#pad .knob.held{background:var(--warm);border-color:#fff2cf}#btn-c{width:min(64px, calc(var(--avail,100vw) * .19));height:min(64px, calc(var(--avail,100vw) * .19));--label:#efe7d8;color:#efe7d8;box-shadow:inset 0 0 0 2px #efe7d8,inset 3px 3px #ffffff0f,inset -3px -3px #0000008c,0 2px #00000080}#btn-c.on{color:var(--slot);--label:#2a2028;background-color:#efe7d8}body.touch .mini,body.touch .btn{letter-spacing:0;position:relative}body.touch #minirow .mini:not(.on):not(.no){--label:#e4e4cc;background-color:#202725;box-shadow:inset 0 0 0 1px #a6b2a5,inset 0 3px #566459,inset 0 -3px #101716,inset 3px 0 #39463e,inset -3px 0 #101716}body.touch #pad{clip-path:none;background:#ac9164;border-radius:50%;box-shadow:inset 0 3px #ead7a5,inset 0 -3px #5e4934}body.touch #pad:after{clip-path:none;background:#17201d;border-radius:50%;inset:5px;box-shadow:inset 0 3px #0b100f,inset 0 -2px #657568}body.touch #pad .ring{border:1px solid #63766a}body.touch #pad .hub{background:#9eae9e;border:0;border-radius:0}body.touch #pad .knob{clip-path:none;background:#dac596;border:0;border-radius:50%;box-shadow:0 3px #080e0c,inset 0 2px #fff0c7}body.touch #pad .knob:after{clip-path:none;background:#52665a;border-radius:50%;inset:3px;box-shadow:inset 0 2px #8ea18a,inset 0 -3px #2b3b34}body.touch #pad .knob.held:after{background:#b9cbb9;box-shadow:inset 0 2px #e6ebcf,inset 0 -3px #6a806e}body.touch #pad.flying{background:var(--warm)}body.touch #pad.waiting .knob:after{background:#27312d}body.touch #pair .btn{--rim:#d8b773;--rim-light:#f3ddb0;--rim-dark:#665037}body.touch #pair #btn-c{--rim:#b6cbd3;--rim-light:#e3e4cf;--rim-dark:#48595e}body.touch #pair .btn:not(.on):not(.no):not(.charged){box-shadow:inset 0 0 0 2px var(--rim), inset 0 4px 0 var(--rim-light), inset 0 -5px 0 var(--rim-dark), inset 4px 0 0 #485047, inset -4px 0 0 #101716;background-color:#222827}body.touch #pair .btn.charged:not(.on):not(.no){background-color:#203238;box-shadow:inset 0 0 0 2px #8fd6ff,inset 0 4px #c0e9ea,inset 0 -5px #355962,inset 4px 0 #3d6268,inset -4px 0 #101c22}body.touch.dressed #pad,body.touch.dressed #pad .knob{isolation:isolate;position:relative}body.touch.dressed #pad:before,body.touch.dressed #pad .knob:before{content:"";z-index:-1;pointer-events:none;background:var(--plate) 0 0 / 100% 100% no-repeat;image-rendering:pixelated;position:absolute;inset:0}body.touch.dressed .mini,body.touch.dressed .btn{box-shadow:none;clip-path:none;background-color:#0000;border:0;border-radius:0;outline:none}body.touch.dressed .mini{color:#322725;--label:#322725}body.touch.dressed .btn{color:#2d2020;--label:#2d2020}body.touch.dressed .btn[data-tool]{box-shadow:none}body.touch.dressed .mini:active,body.touch.dressed .btn:active{filter:brightness(.88);box-shadow:none;transform:translateY(1px)}body.touch.dressed #pad{clip-path:none;background:0 0}body.touch.dressed #pad:after{display:none}body.touch.dressed #pad .ring{border:1px dashed #18171e73}body.touch.dressed #pad .knob{box-shadow:none;background:0 0;border:0}body.touch.dressed #pad .knob:before{z-index:0}body.touch.dressed #pad .knob:after{display:none}body.touch.dressed #pad.flying{background:0 0}body.touch.dressed #pad.flying .knob{filter:sepia()saturate(3)hue-rotate(-15deg)}body.touch.dressed #pad.waiting .knob{filter:grayscale()brightness(.8)}body.touch.dressed #pair .btn,body.touch.dressed #pair .btn:not(.on):not(.no):not(.charged),body.touch.dressed #pair .btn.on,body.touch.dressed #pair .btn.charged,body.touch.dressed #pair #btn-c{box-shadow:none;background-color:#0000;border:0;outline:none}body.touch.dressed #pair .btn:after,body.touch.dressed .mini:after{display:none}body.touch.dressed #pair .btn.on{filter:brightness(1.15)saturate(1.2)}body.touch.dressed #minirow .mini:not(.on):not(.no){--label:#322725;color:#322725}body.touch.dressed #pair #btn-c,body.touch.dressed #pair #btn-c.on{--label:#2d2020;color:#2d2020}body.touch.dressed #pair .btn.on,body.touch.dressed #minirow .mini.on{box-shadow:0 0 0 2px #1a1518,0 0 0 5px #f3ead6}body.touch.dressed #pair .btn.charged{box-shadow:0 0 0 2px #1a1518,0 0 0 5px #e8b76a}body.touch.dressed #pair .btn.no,body.touch.dressed #minirow .mini.no,body.touch.dressed #pair #btn-c.no{box-shadow:0 0 0 2px #1a1518,0 0 0 5px #b8382e}body.touch.dressed #pair .btn.no{filter:grayscale(.6)brightness(.85)}body.touch.dressed #pair .btn.charged:not(.on):not(.no){box-shadow:none;filter:brightness(1.12)drop-shadow(0 0 3px #8fd6ff);background-color:#0000}body.touch.dressed #pair .btn.no:not(.on){box-shadow:none;filter:grayscale(.6)brightness(.85);background-color:#0000}body.touch.dressed #pair .btn.on:not(.no){box-shadow:none;filter:brightness(1.18)saturate(1.25);background-color:#0000}#btn-a.hint{box-shadow:0 0 0 2px #e8c35a,0 0 12px #e8c35a}