:root{--cyan: #3fdcff;--mag: #ff3ea5;--ink: #04060b;--panel: rgba(10, 16, 26, .55);--line: rgba(63, 220, 255, .28);--txt: #cfe8f6}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;background:var(--ink);font-family:Chakra Petch,monospace;color:var(--txt)}#app{position:fixed;inset:0}canvas{display:block;touch-action:none}#loading{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 30%,#0b1424,#04060b 70%);gap:22px;transition:opacity .6s ease}.ring{width:54px;height:54px;border-radius:50%;border:2px solid rgba(63,220,255,.18);border-top-color:var(--cyan);border-right-color:var(--mag);animation:spin .9s linear infinite;box-shadow:0 0 24px #3fdcff40}@keyframes spin{to{transform:rotate(360deg)}}#status{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#8fb6cc}.brandmark{font-weight:700;letter-spacing:.34em;font-size:15px;color:#eaf6ff;text-shadow:0 0 18px rgba(63,220,255,.5)}.brandmark b{color:var(--mag);text-shadow:0 0 18px rgba(255,62,165,.6)}#drop{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:#04060bdb;backdrop-filter:blur(6px);padding:24px}#drop.show{display:flex}.dz-card{width:min(520px,92vw);border:1.5px dashed var(--line);border-radius:18px;background:var(--panel);padding:38px 32px;text-align:center;box-shadow:0 0 60px #0009,inset 0 0 40px #3fdcff0d}.dz-card.hot{border-color:var(--cyan);background:#101c2eb3;box-shadow:0 0 70px #3fdcff40}.dz-card h2{font-weight:700;letter-spacing:.12em;font-size:20px;margin-bottom:10px;color:#eaf6ff}.dz-card p{font-size:13.5px;line-height:1.7;color:#9fc0d4;margin-bottom:22px}.dz-card code{color:var(--cyan);background:#3fdcff14;padding:2px 7px;border-radius:5px;font-size:12.5px}.pick{display:inline-block;cursor:pointer;border:1px solid var(--line);color:#eaf6ff;background:linear-gradient(180deg,#3fdcff29,#3fdcff0a);padding:12px 26px;border-radius:10px;letter-spacing:.16em;font-weight:600;font-size:13px;text-transform:uppercase;transition:.2s}.pick:hover{background:#3fdcff38;box-shadow:0 0 24px #3fdcff4d}#hud{position:fixed;inset:0;z-index:20;pointer-events:none}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px}.title{pointer-events:none;font-weight:700;letter-spacing:.3em;font-size:13px;color:#eaf6ff;text-shadow:0 0 16px rgba(63,220,255,.45)}.title small{display:block;letter-spacing:.22em;font-size:9.5px;color:#6f93a8;margin-top:4px;font-weight:500}.title b{color:var(--mag)}.tools{display:flex;gap:8px;pointer-events:auto}.tool{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);backdrop-filter:blur(8px);color:var(--cyan);cursor:pointer;transition:.18s}.tool:hover{background:#3fdcff29;box-shadow:0 0 18px #3fdcff40}.tool svg{width:18px;height:18px}.reticle{position:absolute;top:50%;left:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#ffffff80;box-shadow:0 0 8px #3fdcffcc;opacity:.7}.hint{position:absolute;left:50%;bottom:22px;transform:translate(-50%);font-size:11px;letter-spacing:.14em;color:#8fb6cc;text-transform:uppercase;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:8px 16px;backdrop-filter:blur(8px);white-space:nowrap}.hint b{color:var(--cyan)}#pad{position:absolute;left:18px;bottom:20px;display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:7px;pointer-events:auto}.pbtn{display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:var(--panel);backdrop-filter:blur(8px);color:var(--cyan);user-select:none;touch-action:none;transition:transform .07s,background .15s}.pbtn:active,.pbtn.on{background:#3fdcff47;transform:scale(.93);box-shadow:0 0 20px #3fdcff66}.pbtn svg{width:22px;height:22px}.pbtn.up{grid-area:1 / 2 / 2 / 3}.pbtn.left{grid-area:2 / 1 / 3 / 2}.pbtn.right{grid-area:2 / 3 / 3 / 4}.pbtn.down{grid-area:3 / 2 / 4 / 3}.pbtn.run{grid-area:2 / 2 / 3 / 3;font-size:9px;letter-spacing:.08em;font-weight:700;color:var(--mag);border-color:#ff3ea54d}.pbtn.run:active,.pbtn.run.on{background:#ff3ea547;box-shadow:0 0 20px #ff3ea566}.lookpad{position:absolute;right:18px;bottom:20px;width:120px;height:120px;border:1px solid var(--line);border-radius:50%;background:var(--panel);backdrop-filter:blur(8px);pointer-events:none;display:grid;place-items:center;color:#6f93a8;font-size:9px;letter-spacing:.12em;text-align:center;opacity:.55}#settings{position:absolute;top:62px;right:18px;width:230px;pointer-events:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(10px);padding:16px;display:none;box-shadow:0 16px 50px #00000080}#settings.show{display:block}#settings h3{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#7fa6bc;margin-bottom:14px}.row{margin-bottom:14px}.row label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:#aecbdd;margin-bottom:6px}.row label span{color:var(--cyan)}input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:#3fdcff33;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #3fdcff99;cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--cyan);cursor:pointer}.reset{width:100%;margin-top:4px;cursor:pointer;border:1px solid var(--line);border-radius:9px;background:#3fdcff0f;color:#eaf6ff;padding:9px;letter-spacing:.16em;font-size:11px;text-transform:uppercase;font-family:inherit}.reset:hover{background:#3fdcff2e}@media (max-width: 760px){.hint{display:none}#settings{width:200px}}@media (hover: hover) and (pointer: fine){.lookpad{display:none}}