:root{--bg: #f2f4fa;--card: #ffffff;--border: #e4e8f1;--text: #0f1b2d;--text-dim: #6b7280;--accent: #3b5bdb;--red: #ef4538;--red-soft: #fdecea;--red-border: #f3b7b1;--green: #22b573;--track: #dfe3ec;--radius: 14px;--shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 6px 20px rgba(15, 27, 45, .05)}*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app-header{flex:none;display:flex;align-items:center;gap:20px;height:64px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px}.logo{width:28px;height:28px;display:block}.brand h1{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}.status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-dim)}.dot{width:8px;height:8px;border-radius:50%;flex:none}.dot-green{background:var(--green)}.dot-red{background:var(--red)}.dot-blue{background:var(--accent)}main{flex:1;min-height:0;width:100%;max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.recorder-card{flex:none;padding:24px 32px;display:flex;flex-direction:column;align-items:center}.big-timer{font-size:clamp(40px,9vh,64px);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.subtitle{margin:8px 0 0;font-size:15px;color:var(--text-dim)}.tile-row{display:flex;gap:20px;margin-top:20px}.tile{width:190px;height:clamp(96px,16vh,130px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:12px;border:1px solid var(--border);background:var(--card);font:inherit;font-size:16px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1),box-shadow .12s}.tile:hover:not(:disabled){box-shadow:var(--shadow)}.tile:active:not(:disabled){transform:scale(.97)}.tile:disabled{opacity:.45;cursor:default}.tile-icon{width:44px;height:44px}.tile-record{background:var(--red-soft);border-color:var(--red-border);color:var(--red)}.waveform-card{flex:1 1 0;min-height:120px;padding:20px 28px;display:flex;flex-direction:column}.card-head{flex:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-head h2{margin:0;font-size:18px;font-weight:600}.wave-status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--accent)}#waveCanvas{flex:1;min-height:0;display:block;width:100%}.transport-card{flex:none;padding:20px 28px}.transport-buttons{display:flex;gap:16px}.btn{flex:1;height:56px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;border:1px solid var(--border);background:var(--card);font:inherit;font-size:16px;font-weight:600;white-space:nowrap;color:var(--text);cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1),box-shadow .12s}.btn:hover:not(:disabled){box-shadow:var(--shadow)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:default}.btn-icon{width:18px;height:18px;color:var(--accent);flex:none}.btn-record{background:var(--red);border-color:var(--red);color:#fff}.btn-record .btn-icon{color:#fff}.hidden{display:none}.scrub-row{display:flex;align-items:center;gap:16px;margin-top:16px}.time-label{font-size:14px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:16px;margin:0;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--track)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--track)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}input[type=range]:disabled{opacity:.5}input[type=range]:disabled::-webkit-slider-thumb{cursor:default}input[type=range]:disabled::-moz-range-thumb{cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:640px){.app-header{height:56px;padding:0 16px}main{padding:12px 16px;gap:12px}.recorder-card{padding:20px 16px}.big-timer{font-size:clamp(36px,8vh,44px)}.tile-row{width:100%;gap:12px;margin-top:16px}.tile{flex:1;width:auto}.tile-icon{width:40px;height:40px}.waveform-card{padding:16px 20px;min-height:100px}.transport-card{padding:16px 20px}.transport-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn-record{grid-column:1 / -1}.btn{height:52px;font-size:15px}.scrub-row{margin-top:14px}}@media(max-height:480px){body{height:auto;min-height:100vh;min-height:100dvh;overflow:auto}.app-header{height:48px}main{padding:8px 24px;gap:8px}.recorder-card{padding:12px 32px}.big-timer{font-size:34px}.tile-row{margin-top:10px}.tile{height:76px;gap:6px}.tile-icon{width:30px;height:30px}.waveform-card{min-height:90px;padding:12px 28px}.transport-card{padding:12px 28px}.btn{height:44px}.scrub-row{margin-top:10px}}@media(prefers-reduced-motion:reduce){.tile,.btn{transition:none}}