:root{--bg: #0d1017;--bg-soft: #12161f;--panel: #161c26;--panel-2: #1b2230;--border: #26303f;--text: #e8edf4;--muted: #8b98a9;--accent: #e8b84b;--accent-dim: #a8842f;--blue: #5cc8ff;--ok: #46c266;--err: #f0625d;--radius: 16px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);font-size:15px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:radial-gradient(1000px 500px at 85% -10%,rgba(232,184,75,.07),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(92,200,255,.05),transparent 60%),var(--bg);color:var(--text);line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}#app{max-width:760px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) clamp(14px,3vw,24px) 0}.hidden{display:none!important}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0 14px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:36px;height:36px;color:var(--accent);background:linear-gradient(145deg,#e8b84b29,#e8b84b0d);border:1px solid rgba(232,184,75,.35);border-radius:11px;padding:6px}.brand-text h1{font-size:1.1rem;letter-spacing:.16em;font-weight:800}.conn-controls{display:flex;align-items:center;gap:10px}.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;font-weight:650;padding:10px 18px;border-radius:12px;cursor:pointer;transition:transform .06s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}.btn:hover:not(:disabled){filter:brightness(1.12)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-accent{background:linear-gradient(160deg,var(--accent),var(--accent-dim));border-color:transparent;color:#171204}.btn-outline{border-color:#f0625d80;color:var(--err)}.btn-ghost{background:transparent}.btn-sm{padding:7px 14px;font-size:.82rem;border-radius:10px}.btn-lg{padding:13px 34px;font-size:1rem;border-radius:14px}.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.icon-btn svg{width:17px;height:17px}.icon-btn:hover{color:var(--text);border-color:var(--muted)}.icon-danger:hover{color:var(--err);border-color:#f0625d80}.pill{font-size:.74rem;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px}.pill-dot{width:7px;height:7px;border-radius:50%;background:currentColor}.pill-off{background:#8b98a91f;color:var(--muted);border:1px solid var(--border)}.pill-ok{background:#46c26621;color:var(--ok);border:1px solid rgba(70,194,102,.4)}.pill-ok .pill-dot{animation:pulse-dot 1.6s ease-out infinite}@keyframes pulse-dot{0%{box-shadow:0 0 #46c26680}to{box-shadow:0 0 0 7px #46c26600}}.views{flex:1;min-height:0;padding-bottom:96px}.view{display:none;animation:view-in .22s ease}.view.active{display:block}@keyframes view-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.view-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 16px}.view-head h2{font-size:1.3rem;font-weight:800}.card-sub{color:var(--muted);font-size:.78rem}.hero{text-align:center;padding:60px 20px 40px;display:flex;flex-direction:column;align-items:center;gap:14px}.hero-icon{width:62px;height:62px;color:var(--accent);opacity:.9;background:radial-gradient(circle,rgba(232,184,75,.12),transparent 70%);border-radius:50%;padding:12px}.hero h2{font-size:1.4rem;font-weight:800}.hero p{color:var(--muted);font-size:.92rem;max-width:380px}.hero-note{font-size:.76rem!important;opacity:.75}.status-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:480px){.status-tiles{grid-template-columns:1fr 1fr}}.tile{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:7px;min-width:0;box-shadow:var(--shadow)}.tile-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}.tile-value{font-size:1.2rem;font-weight:800;min-height:26px}.tile-value-sm{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-hint{font-size:.7rem;color:var(--muted)}.batt-bar{height:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden}.batt-fill{height:100%;background:linear-gradient(90deg,var(--ok),#8ee6a3);border-radius:999px;transition:width .4s ease}.batt-fill.batt-low{background:linear-gradient(90deg,var(--err),#f6928e)}.play-zone{display:flex;align-items:center;justify-content:center;gap:26px;padding:30px 0 26px}.play-btn{width:108px;height:108px;border-radius:50%;border:1px solid rgba(232,184,75,.4);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.14),transparent 45%),linear-gradient(160deg,var(--accent),var(--accent-dim));color:#171204;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px #e8b84b40;transition:transform .08s ease,box-shadow .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}.play-btn svg{width:44px;height:44px}.play-btn:active{transform:scale(.96)}.play-btn.capturing{background:linear-gradient(160deg,#6aa9d8,#3b6f96);border-color:#5cc8ff66;box-shadow:0 12px 34px #5cc8ff33;color:#08202e;cursor:not-allowed;animation:capturing-glow 1.2s ease-in-out infinite}@keyframes capturing-glow{0%,to{box-shadow:0 12px 30px #5cc8ff2e}50%{box-shadow:0 12px 44px #5cc8ff6b}}.play-btn:disabled{opacity:.85}.play-btn.playing{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.1),transparent 45%),linear-gradient(160deg,#f0716c,#b8433f);border-color:#f0625d66;box-shadow:0 12px 34px #f0625d40;color:#2a0c0b;animation:playing-glow 1.6s ease-in-out infinite}@keyframes playing-glow{0%,to{box-shadow:0 12px 34px #f0625d38}50%{box-shadow:0 12px 44px #f0625d66}}.play-state{display:flex;flex-direction:column}.play-state-text{font-size:1.5rem;font-weight:850;letter-spacing:.06em}.play-state-hint{color:var(--muted);font-size:.8rem}.tempo-view,.quick-patterns{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);margin-top:12px}.tempo-view-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tempo-current-name{font-size:.78rem;font-weight:700;color:var(--accent)}.tempo-strip{display:flex;gap:3px;min-height:46px;align-items:stretch}.tempo-strip-mini{min-height:18px;gap:2px;margin-top:7px}.tempo-strip-modal,.tempo-strip-record{min-height:30px;margin-top:12px}.tempo-empty{color:var(--muted);font-size:.8rem;align-self:center;padding:8px 4px}.seg{display:flex;align-items:center;justify-content:center;border-radius:7px;min-width:12px;flex-basis:0;font-size:.7rem;font-weight:700;font-family:ui-monospace,Consolas,monospace;transition:box-shadow .1s ease,filter .1s ease;overflow:hidden}.tempo-strip:not(.tempo-strip-mini) .seg{min-width:30px}.seg-pulse{background:linear-gradient(160deg,#e8b84bcc,#a8842fcc);color:#1c1504}.seg-gap{background:#5cc8ff14;border:1px dashed rgba(92,200,255,.3);color:var(--blue)}.seg-active{filter:brightness(1.5);box-shadow:0 0 16px #e8b84b99}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--border);background:var(--panel-2);color:var(--text);font:inherit;font-size:.8rem;font-weight:650;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.chip:hover{border-color:var(--accent-dim)}.chip-active{background:#e8b84b24;border-color:#e8b84b80;color:var(--accent)}.pattern-list{display:flex;flex-direction:column;gap:10px}.pattern-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);padding:13px 16px;box-shadow:var(--shadow)}.pattern-info{flex:1;min-width:0}.pattern-name{font-size:.95rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.empty-msg{color:var(--muted);text-align:center;padding:40px 0}.record-help{color:var(--muted);font-size:.88rem;margin-bottom:18px;max-width:480px}.record-pad{height:210px;border-radius:22px;border:2px dashed rgba(232,184,75,.4);background:radial-gradient(circle at 50% 45%,rgba(232,184,75,.07),transparent 65%),var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background .08s ease,border-color .15s ease,transform .08s ease}.record-pad-label{font-size:1.05rem;font-weight:750;color:var(--text);pointer-events:none}.record-pad-count{font-size:.8rem;color:var(--muted);pointer-events:none}.pad-active{background:radial-gradient(circle at 50% 45%,rgba(232,184,75,.3),transparent 70%),var(--panel-2);border-color:var(--accent);border-style:solid;transform:scale(.985)}.pad-done{border-color:#46c2668c;border-style:solid}.record-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}.card{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}.card-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}.card-title h3{font-size:.95rem;font-weight:750}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}.setting-row+.setting-row{border-top:1px solid var(--border)}.setting-row strong{font-size:.9rem}.setting-desc{color:var(--muted);font-size:.76rem;margin-top:2px}.mode-switch{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px;flex:0 0 auto}.mode-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.8rem;font-weight:650;padding:6px 14px;border-radius:999px;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.mode-btn.active{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}.switch{position:relative;width:46px;height:26px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:var(--bg);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:background .2s ease}.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:var(--muted);transition:transform .2s ease,background .2s ease}.switch input:checked+.slider{background:#e8b84b40;border-color:#e8b84b80}.switch input:checked+.slider:before{transform:translate(20px);background:var(--accent)}.ble-warning{background:#e8b84b17;border:1px solid rgba(232,184,75,.4);color:#f2d38a;border-radius:12px;padding:11px 14px;font-size:.84rem;margin:8px 0}.about-text{color:var(--muted);font-size:.82rem;line-height:1.7}.console-actions{display:flex;align-items:center;gap:10px}.chk{display:flex;align-items:center;gap:5px;font-size:.76rem;color:var(--muted);cursor:pointer}.console{background:#0a0d13;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.76rem;overflow-y:auto;height:260px}.ln{display:flex;gap:8px;padding:2px 0;align-items:baseline}.ln-dim{opacity:.42}.ln-ts{color:#4d5a6b;flex:0 0 auto;font-size:.68rem}.ln-arrow{flex:0 0 12px;text-align:center;font-weight:700}.ln-text{word-break:break-all}.ln-tx .ln-arrow,.ln-tx .ln-text{color:var(--blue)}.ln-rx .ln-arrow,.ln-rx .ln-text{color:var(--accent)}.ln-info .ln-arrow,.ln-info .ln-text{color:var(--muted)}.ln-err .ln-arrow,.ln-err .ln-text{color:var(--err)}.console-hint{margin-top:8px;font-size:.7rem;color:var(--muted);text-align:center}.tabbar{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:4px;background:#161c26eb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:999px;padding:6px;box-shadow:0 14px 40px #00000080;z-index:50}.tab{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.64rem;font-weight:700;padding:8px 18px;border-radius:999px;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.tab svg{width:20px;height:20px}.tab.active{background:#e8b84b21;color:var(--accent)}@media(max-width:420px){.tab{padding:8px 13px}}.modal-backdrop{position:fixed;inset:0;background:#05070bb3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:100}.modal{width:100%;max-width:480px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 30px 80px #0009;animation:view-in .18s ease;max-height:90dvh;overflow-y:auto}.modal h3{font-size:1.05rem;margin-bottom:14px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field span{font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.field input{background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font:inherit;padding:10px 12px}.field input:focus{outline:none;border-color:var(--accent-dim)}.tempo-editor{display:flex;flex-direction:column;gap:8px}.editor-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;flex-wrap:wrap}.editor-n{width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--muted);font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.editor-row label{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);flex:1;min-width:140px}.editor-row input{width:72px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-family:ui-monospace,Consolas,monospace;font-size:.86rem;padding:6px 8px;text-align:right}.editor-row input:focus{outline:none;border-color:var(--accent-dim)}.editor-row em{font-style:normal;font-size:.7rem}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.toast{position:fixed;bottom:92px;left:50%;transform:translate(-50%);background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-size:.85rem;font-weight:650;padding:10px 20px;border-radius:999px;box-shadow:0 14px 40px #00000080;z-index:90;animation:view-in .2s ease;max-width:90vw;text-align:center}.toast-ok{border-color:#46c26673}.toast-err{border-color:#f0625d80}