:root{--bg: #0e1620;--card: rgba(16, 28, 40, .86);--ink: #eaf6ff;--dim: #9fb3c8;--accent: #58d6c8;--gold: #ffd166}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#landing{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(1200px 600px at 50% 0%,rgba(88,214,200,.12),transparent 60%);transition:opacity .3s}#landing.hidden{opacity:0;pointer-events:none}.card{width:min(520px,100%);background:var(--card);border:1px solid rgba(127,216,255,.18);border-radius:22px;padding:28px 28px 22px;backdrop-filter:blur(8px);box-shadow:0 20px 60px #00000059}.orb{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9fff6,var(--accent) 45%,#0d3b3a 100%);box-shadow:0 0 30px #58d6c88c;animation:breathe 3.2s ease-in-out infinite}@keyframes breathe{50%{transform:scale(1.08);box-shadow:0 0 44px #58d6c8bf}}h1{margin:14px 0 2px;font-size:30px;letter-spacing:.2px}.tag{margin:0 0 16px;color:var(--gold);font-weight:600}.how{margin:0 0 16px;padding-left:20px;color:var(--dim)}.how b{color:var(--ink)}.grid-picker{margin:0 0 18px;text-align:left}.grid-label{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}.grid-options{display:flex;flex-wrap:wrap;gap:8px}.grid-options button{border:1px solid rgba(127,216,255,.25);background:#ffffff0a;color:var(--ink);border-radius:999px;padding:8px 12px;font-size:13px;cursor:pointer}.grid-options button.active{border-color:var(--gold);background:#ffd1661f;color:var(--gold)}.grid-options button small{display:block;opacity:.75;font-size:11px}.actions{display:flex;gap:10px;flex-wrap:wrap}button{font:inherit;border-radius:999px;padding:12px 22px;border:1px solid transparent;cursor:pointer}button.primary{background:var(--accent);color:#062224;font-weight:700;font-size:18px;min-width:180px}button.primary:disabled{opacity:.55;cursor:default}button.ghost{background:transparent;color:var(--ink);border-color:#eaf6ff4d}button.ghost.ok{border-color:var(--accent);color:var(--accent)}.status{min-height:1.4em;margin:14px 0 0;color:var(--dim);font-size:14px}#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:#0a121cd9;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:calc(100% - 32px)}#toast.show{opacity:1}#debug{position:fixed;top:10px;right:10px;width:300px;max-height:calc(100% - 20px);overflow:auto;background:#0a121ce6;border:1px solid #234;border-radius:12px;padding:10px;font-size:12px;z-index:5}#debug h3{margin:4px 0 6px;font-size:13px;color:var(--gold)}#debug button{padding:4px 8px;margin:2px;font-size:12px;border-radius:6px;background:#1c2c3c;color:var(--ink);border:1px solid #2c4256}#debug input,#debug textarea{width:100%;background:#0b131c;color:var(--ink);border:1px solid #2c4256;border-radius:6px;padding:6px;font:12px ui-monospace,monospace}#debug .stats{font:12px ui-monospace,monospace;color:var(--dim);white-space:pre}#legend{position:fixed;left:50%;top:14px;transform:translate(-50%);max-width:calc(100% - 32px);background:#0a121cd1;border:1px solid rgba(127,216,255,.25);color:var(--ink);padding:8px 14px;border-radius:12px;font-size:13px;line-height:1.5;opacity:0;transition:opacity .25s;pointer-events:none;z-index:4}#legend.show{opacity:1}#legend b{color:var(--gold)}#pad{position:fixed;left:50%;bottom:10px;transform:translate(-50%);width:min(760px,calc(100% - 16px));background:#0a121cdb;border:1px solid rgba(127,216,255,.25);border-radius:18px;padding:8px 10px 10px;display:none;z-index:6;backdrop-filter:blur(6px)}#pad.show{display:block}.pad-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin:0 2px 2px;line-height:1.3}.pad-title{flex:1;min-width:0}.pad-extras{display:flex;gap:6px;flex-shrink:0}.pad-mini{padding:5px 10px;border-radius:10px;background:#1c2c3c;color:var(--ink);border:1px solid #2c4256;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}.pad-mini:hover{border-color:var(--accent)}.pad-mini kbd{font:600 10px ui-monospace,monospace;color:var(--dim)}.pad-head b{color:var(--gold);font-size:15px;margin-right:6px}.pad-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px}.pad-btn{flex:1 1 0;min-width:64px;min-height:44px;padding:6px 8px;border-radius:12px;background:#1c2c3c;color:var(--ink);border:1px solid #2c4256;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:14px;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}.pad-btn:hover{background:#24394d;border-color:var(--accent)}.pad-btn:active{transform:translateY(1px);background:#2b4660}.pad-btn.wide{flex-grow:1.6}.pad-btn.accent{background:var(--accent);color:#062224;border-color:transparent}.pad-btn kbd{font:600 11px ui-monospace,monospace;color:var(--dim);background:#ffffff12;border-radius:5px;padding:1px 5px}.pad-btn.accent kbd{color:#0b3a36;background:#ffffff59}#howto{position:fixed;inset:0;background:#04080e99;display:none;place-items:center;z-index:8;padding:16px}#howto.show{display:grid}.howto-card{width:min(720px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--card);border:1px solid rgba(255,209,102,.4);border-radius:20px;padding:20px 22px}.howto-card h2{margin:0 0 4px;color:var(--gold);font-size:22px}.howto-hint{margin:0 0 12px;color:var(--dim)}.howto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 18px;margin-bottom:14px}.howto-grid h3{margin:6px 0 4px;font-size:14px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}.howto-grid ul{margin:0;padding-left:18px;font-size:14px;line-height:1.5}@media(max-width:640px){.pad-btn{min-width:56px;min-height:50px;font-size:13px}.pad-title span,.pad-mini kbd{display:none}}@media(pointer:coarse){.pad-btn kbd,.pad-mini kbd{display:none}}.pad-mini.selected,.pad-btn.selected{border-color:var(--gold);color:var(--gold);background:#ffd16624}.pad-mini[data-id^=depth]{padding:5px 8px}#talk{position:fixed;left:50%;top:12px;transform:translate(-50%);width:min(620px,calc(100% - 16px));display:none;gap:8px;z-index:5}#talk.show{display:flex}#talk input{flex:1;min-width:0;padding:11px 14px;border-radius:12px;border:1px solid rgba(127,216,255,.35);background:#0a121cdb;color:#eafcff;font:500 15px system-ui,sans-serif}#talk input::placeholder{color:#8aa0b4}#talk button{padding:0 16px;border-radius:12px;border:0;background:#58d6c8;color:#0b1a1f;font:700 15px system-ui,sans-serif;cursor:pointer}