:root{--bg-0: #0d0f14;--bg-1: #14171f;--bg-2: #1c2029;--text-0: #e8e6e0;--text-1: #9aa0ac;--accent: #d9b36c;--accent-soft: rgba(217, 179, 108, .35);--pad-glow: rgba(255, 224, 160, .85);--focus-ring: #7db4ff;--danger: #e06c6c}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;background:radial-gradient(1200px 700px at 50% -10%,#232a38 0%,transparent 60%),var(--bg-0);color:var(--text-0);font-family:Avenir Next,Helvetica Neue,PingFang TC,Noto Sans TC,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1024px;margin:0 auto;padding:1.25rem 1rem 2rem;display:flex;flex-direction:column;gap:1rem}.app-header{text-align:center}.app-header h1{margin:0;font-size:1.6rem;font-weight:600;letter-spacing:.06em}.subtitle{color:var(--accent);font-size:1rem;font-weight:400;margin-left:.4em}.hint{margin:.4rem 0 0;color:var(--text-1);font-size:.85rem}kbd{display:inline-block;padding:.05em .45em;border:1px solid #3a4152;border-bottom-width:2px;border-radius:4px;background:var(--bg-2);font-family:inherit;font-size:.85em}.stage{position:relative;display:flex;justify-content:center}.handpan-wrap{width:min(92vw,560px);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.handpan-svg{width:100%;height:100%;display:block}.pad{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:transform 90ms ease-out}.pad .pad-surface{transition:filter 90ms ease-out;will-change:filter}.pad.active{transform:scale(1.055)}.pad.active .pad-surface{filter:drop-shadow(0 0 14px var(--pad-glow)) brightness(1.35)}.pad:focus-visible .pad-surface{stroke:var(--focus-ring);stroke-width:3}.pad-name{fill:var(--text-0);font-weight:600;pointer-events:none}.pad-key{fill:var(--text-1);pointer-events:none}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0d0f148c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:12px;pointer-events:none;opacity:1;transition:opacity .3s ease-out}.start-overlay.hidden{opacity:0;visibility:hidden}.start-overlay span{padding:.7em 1.4em;border:1px solid var(--accent-soft);border-radius:999px;background:var(--bg-1);color:var(--accent);font-size:.95rem;letter-spacing:.08em;animation:overlay-pulse 2.4s ease-in-out infinite}@keyframes overlay-pulse{0%,to{opacity:.75}50%{opacity:1}}.panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.panel-group{background:var(--bg-1);border:1px solid #262b37;border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.panel-title{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-1)}.control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem .6rem}.control label{font-size:.85rem;color:var(--text-0)}.control output{font-size:.8rem;color:var(--text-1);font-variant-numeric:tabular-nums;min-width:2.8em;text-align:right}.control input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--accent);cursor:pointer}.control-inline{display:flex;justify-content:space-between;align-items:center}.control input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--accent);cursor:pointer}.tone-scale{grid-column:1 / -1;display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-1);margin-top:-.25rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #343b4a;border-radius:8px;background:var(--bg-2);color:var(--text-0);font:inherit;font-size:.85rem;padding:.5em 1em;cursor:pointer;transition:background .12s ease,border-color .12s ease}.btn:hover:not(:disabled){background:#262c3a;border-color:#46506a}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:focus-visible,input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.btn-record.recording{border-color:var(--danger);color:var(--danger)}.button-row{display:flex;flex-wrap:wrap;gap:.5rem}.recorder-status{margin:0;font-size:.8rem;color:var(--text-1);font-variant-numeric:tabular-nums}.beat-indicator{display:flex;gap:.6rem;align-items:center}.beat-dot{width:.75rem;height:.75rem;border-radius:50%;background:#2c3340;transition:background 80ms ease,transform 80ms ease}.beat-dot.active{background:var(--accent);transform:scale(1.3)}.beat-dot.accent.active{background:#f2d59a;box-shadow:0 0 8px var(--accent-soft)}.app-footer{text-align:center;color:var(--text-1);font-size:.75rem}.app-footer p{margin:0}@media(prefers-reduced-motion:reduce){.pad,.pad .pad-surface,.beat-dot,.start-overlay{transition:none}.pad.active,.beat-dot.active{transform:none}.start-overlay span{animation:none}}@media(max-width:640px){.app{padding:.9rem .75rem 1.5rem}.app-header h1{font-size:1.25rem}.hint{display:none}.panel{grid-template-columns:1fr}}