:root{--bg: #0c0e12;--bg-elevated: #141820;--ink: #e8e4dc;--ink-muted: rgba(232, 228, 220, .55);--ink-faint: rgba(232, 228, 220, .28);--accent: #3dd68c;--accent-dim: rgba(61, 214, 140, .18);--danger: #e84855;--wood-deep: #3d2314;--wood-mid: #6b3d22;--wood-light: #9a5c35;--wood-highlight: #c4844f;--peg: #2a2e36;--ring: rgba(232, 228, 220, .12);--font-display: "Bebas Neue", Impact, sans-serif;--font-body: "DM Sans", system-ui, sans-serif;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100%;min-height:100dvh;display:flex;flex-direction:column;position:relative;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(61,214,140,.06),transparent 55%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(232,72,85,.05),transparent 50%),linear-gradient(180deg,#10141a 0%,var(--bg) 40%,#090b0e 100%)}.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 20px 8px;flex-shrink:0}.brand{display:flex;flex-direction:column;gap:0;line-height:1}.brand-name{font-family:var(--font-display);font-size:clamp(1.75rem,5vw,2.25rem);letter-spacing:.06em;color:var(--ink)}.brand-tag{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-top:2px}.mode-toggle{display:flex;background:var(--bg-elevated);border:1px solid var(--ring);border-radius:999px;padding:3px;gap:2px}.mode-toggle button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--ink-muted);font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}.mode-toggle button.active{background:var(--accent-dim);color:var(--accent)}.mode-toggle button:hover:not(.active){color:var(--ink)}.stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}#seismo{display:block;width:100%;flex:1;min-height:180px;touch-action:none}.status-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;transition:opacity .4s;background:linear-gradient(180deg,#0c0e1226,#0c0e1259,#0c0e1233)}.status-overlay.hidden{opacity:0}.status-card{pointer-events:auto;text-align:center;padding:28px 32px;max-width:300px;animation:rise-in .6s cubic-bezier(.22,1,.36,1) both;background:#0c0e12b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgba(255,255,255,.06)}@keyframes rise-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.status-card h2{font-family:var(--font-display);font-size:2rem;letter-spacing:.04em;margin-bottom:8px}.status-card p{font-size:.9rem;color:var(--ink-muted);line-height:1.45;margin-bottom:20px}.btn-start{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--accent);color:#0c0e12;font-family:var(--font-body);font-size:.9rem;font-weight:700;letter-spacing:.04em;padding:14px 28px;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;box-shadow:0 0 #3dd68c66;animation:pulse-ring 2.4s ease-out infinite}.btn-start:hover{transform:scale(1.03);background:#4fe09a}.btn-start:active{transform:scale(.98)}@keyframes pulse-ring{0%{box-shadow:0 0 #3dd68c73}70%{box-shadow:0 0 0 18px #3dd68c00}to{box-shadow:0 0 #3dd68c00}}.error-msg{color:var(--danger);font-size:.85rem;margin-top:12px}.readout{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:3;text-align:center;pointer-events:none;opacity:0;transition:opacity .3s}.readout.visible{opacity:1}.readout-note{font-family:var(--font-display);font-size:3.5rem;letter-spacing:.02em;line-height:1;color:var(--ink);text-shadow:0 2px 24px rgba(0,0,0,.5)}.readout-note.in-tune{color:var(--accent)}.readout-hz{font-size:.8rem;font-weight:500;color:var(--ink-muted);letter-spacing:.08em;margin-top:4px}.headstock-area{position:relative;flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;padding:8px 12px max(20px,env(safe-area-inset-bottom));z-index:4}.string-col{display:flex;flex-direction:column;gap:14px;align-items:center}.string-col.left{align-items:flex-end;padding-right:4px}.string-col.right{align-items:flex-start;padding-left:4px}.string-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ring);background:linear-gradient(160deg,#1c2129,#12151b);color:var(--ink-muted);font-family:var(--font-display);font-size:1.35rem;letter-spacing:.02em;cursor:pointer;transition:border-color .2s,color .2s,background .2s,box-shadow .25s,transform .15s;position:relative}.string-btn:hover{color:var(--ink);border-color:#e8e4dc40;transform:scale(1.05)}.string-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 20px #3dd68c40}.string-btn.detected:not(.active){border-color:#e8485580;color:var(--danger)}.string-btn.detected.in-tune:not(.active){border-color:var(--accent);color:var(--accent)}.headstock{width:min(180px,42vw);height:auto;display:block;filter:drop-shadow(0 12px 28px rgba(0,0,0,.55));animation:headstock-in .8s cubic-bezier(.22,1,.36,1) .1s both}@keyframes headstock-in{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.headstock-wrap{position:relative;display:flex;justify-content:center}.listening{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);opacity:0;transition:opacity .3s;white-space:nowrap}.listening.visible{opacity:1}.listening-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 1.4s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}.btn-stop{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ring);background:transparent;color:var(--ink-muted);font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s;opacity:0;pointer-events:none}.btn-stop.visible{opacity:1;pointer-events:auto}.btn-stop:hover{color:var(--ink);border-color:#e8e4dc4d}@media(max-width:380px){.string-btn{width:42px;height:42px;font-size:1.15rem}.readout-note{font-size:2.8rem}}@media(min-width:700px){.headstock{width:180px}.string-btn{width:56px;height:56px;font-size:1.5rem}.string-col{gap:18px}}