:root{--bg: #0b0d12;--panel: #151a24;--fg: #e8ecf3;--muted: #9aa3b2;--accent: #6ad08f;--warn: #e0b14a;--error: #e06a6a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Hiragino Sans,Noto Sans JP,sans-serif;overflow:hidden}.hidden{display:none!important}#canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:grab}#canvas:active{cursor:grabbing}#intro{position:relative;z-index:1;max-width:540px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}h1{margin:0;font-size:clamp(2rem,6vw,3rem);letter-spacing:.04em}.lead{margin:0;color:var(--muted)}#dropzone{width:100%;padding:44px 24px;border:2px dashed #2e3848;border-radius:16px;background:var(--panel);display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s}#dropzone:hover,#dropzone.over{border-color:var(--accent);background:#19212e}#dropzone.busy{opacity:.55;pointer-events:none}.dz-title{font-size:1.05rem;font-weight:600}.dz-sub{color:var(--muted);font-size:.85rem}.samples{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.samples-label{color:var(--muted);font-size:.85rem}.sample-btn{background:transparent;color:var(--accent);border:1px solid #2e3848;border-radius:10px;padding:10px 18px;font-size:.9rem;cursor:pointer;transition:border-color .15s,background .15s}.sample-btn:hover{border-color:var(--accent);background:#19212e}.sample-btn:disabled{opacity:.5;cursor:default}#status{min-height:1.2em;color:var(--muted);font-size:.9rem}#status.error{color:var(--error)}.hint{color:var(--muted);font-size:.85rem;line-height:1.7}kbd{display:inline-block;padding:1px 6px;margin:0 1px;border:1px solid #2e3848;border-bottom-width:2px;border-radius:5px;background:#1c2431;font-size:.78rem}#hud{position:fixed;z-index:2;top:12px;right:12px;display:flex;align-items:center;gap:8px}#hud button{background:#151a24d9;color:var(--fg);border:1px solid #2e3848;border-radius:8px;padding:8px 12px;font-size:.85rem;cursor:pointer;backdrop-filter:blur(4px)}#hud button:hover{border-color:var(--accent)}.tag{font-size:.75rem;color:var(--muted);background:#151a24d9;border:1px solid #2e3848;border-radius:8px;padding:6px 10px;backdrop-filter:blur(4px)}.tag.warn{color:var(--warn);border-color:#4a3f24}