:root{--bg: #f6f5f2;--bg-2: #ffffff;--bg-3: #efedea;--bg-4: #e7e4df;--border: #e3dfd8;--border-2: #d0cbc2;--text: #181733;--text-2: #555173;--text-3: #8c88a4;--on-brand: #ffffff;--note: #ef8a1c;--note-d: #d97110;--note-l: #f6a83c;--note-50: #fdf1e3;--grad-note: linear-gradient(135deg, #f7a83c 0%, #ef8a1c 55%, #dd6f0e 100%);--shadow-sm: 0 1px 2px rgba(24, 23, 51, .06), 0 1px 3px rgba(24, 23, 51, .05);--shadow: 0 4px 16px rgba(24, 23, 51, .08), 0 2px 6px rgba(24, 23, 51, .05);--shadow-lg: 0 20px 52px rgba(30, 27, 75, .16), 0 8px 20px rgba(30, 27, 75, .09);--ring: 0 0 0 3px rgba(239, 138, 28, .28);--r-xs: 6px;--r-sm: 9px;--r: 13px;--r-lg: 20px;--r-full: 999px;--hh: 56px;--font-display: "Syne", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color-scheme:light}[data-theme=dark]{--bg: #121127;--bg-2: #1a1937;--bg-3: #222144;--bg-4: #2b2a55;--border: #2e2c5a;--border-2: #3b3970;--text: #edebfb;--text-2: #b4b0da;--text-3: #837fb4;--note: #f4a343;--note-d: #ef8a1c;--note-50: #2e2114;color-scheme:dark}*{box-sizing:border-box;margin:0}body{font-family:var(--font-body);background:var(--bg);color:var(--text);accent-color:var(--note-d)}#root{min-height:100vh;display:flex;flex-direction:column}.visually-hidden{position:absolute;clip-path:inset(50%);overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--note);outline-offset:2px}.topbar{min-height:var(--hh);display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--bg-2);border-bottom:1px solid var(--border);flex-wrap:wrap}.logo{width:32px;height:32px;border-radius:8px;background:var(--grad-note);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:17px;flex-shrink:0}.brand-title{font-family:var(--font-display);font-size:15px;font-weight:700}.brand-link{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.topbar .spacer{flex:1}.chip,.lang-select{font-family:inherit;font-size:12px;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--border-2);color:var(--text-2);background:var(--bg-2);text-decoration:none;cursor:pointer}.chip.pro{background:var(--note-50);border-color:transparent;color:var(--note-d);font-weight:600}.stage{flex:1;padding:24px 20px 44px;max-width:1120px;width:100%;margin:0 auto;display:grid;gap:16px;align-content:start}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.rec{width:56px;height:56px;border-radius:50%;background:var(--grad-note);border:none;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 8px 24px #ef8a1c66;flex-shrink:0}.rec[data-armed=true]{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 12px #ef8a1c26}}.tool{min-height:40px;padding:8px 16px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--bg-2);color:var(--text-2);font-family:inherit;font-size:13px;cursor:pointer}.tool:disabled{opacity:.45;cursor:default}.tool.primary{background:var(--note-50);border-color:var(--note);color:var(--note-d);font-weight:600}.status{font-size:13px;color:var(--text-3)}.status.error{color:#dc2626}progress{accent-color:var(--note-d);width:180px}.subcontrols{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r)}.field-inline{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}.field-inline label{font-weight:500}.select-sm,.input-bpm{font-family:inherit;font-size:12px;min-height:30px;padding:4px 8px;border-radius:var(--r-xs);border:1px solid var(--border-2);background:var(--bg);color:var(--text)}.input-bpm{width:60px;font-family:var(--font-mono);text-align:center}.check-label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:30px}.check-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}@supports not (accent-color: var(--note-d)){.check-label input[type=checkbox]{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.check-label span{position:relative;padding-left:22px}.check-label span:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg)}.check-label input[type=checkbox]:checked+span:before{background:var(--note-d);border-color:var(--note-d)}}.mini-btn{min-height:30px;padding:4px 10px;border-radius:var(--r-xs);border:1px solid var(--border-2);background:var(--bg-2);color:var(--text-2);font-family:inherit;font-size:12px;cursor:pointer}.mini-btn:disabled{opacity:.4;cursor:default}.mini-btn.active{background:var(--note-50);border-color:var(--note);color:var(--note-d);font-weight:600}.mini-btn.danger:not(:disabled){color:#dc2626;border-color:#dc262659}.meter-panel{background:var(--bg-2);border:1px solid var(--note);border-radius:var(--r);padding:12px 16px;display:grid;gap:8px;box-shadow:var(--shadow-sm)}.meter-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}.meter-rec-dot{width:10px;height:10px;border-radius:50%;background:#dc2626;animation:pulse 1s ease-in-out infinite}.meter-label{font-weight:600;color:var(--text)}.meter-time{font-family:var(--font-mono);color:var(--note-d);font-weight:600}.meter-level{font-size:12px;color:var(--text-3)}.beat-dots{margin-left:auto;display:inline-flex;align-items:center;gap:6px}.beat-dot{width:10px;height:10px;border-radius:50%;background:var(--border-2);transition:transform 80ms ease,background-color 80ms ease}.beat-dot.active{background:var(--note-l);transform:scale(1.25)}.beat-dot.downbeat{background:var(--note-d);transform:scale(1.4)}.waveform-canvas{width:100%;height:56px;display:block}.score-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px;min-height:220px}.score-card .empty{display:grid;place-items:center;min-height:220px;color:var(--text-3);font-size:14px;text-align:center;line-height:1.9}.note-editor{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;display:grid;gap:10px}.note-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.note-editor-title{font-size:12px;color:var(--text-3)}.note-editor-actions{display:flex;flex-wrap:wrap;gap:6px}.note-pills{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow-y:auto}.note-pill{min-height:30px;padding:4px 9px;border-radius:var(--r-xs);border:1px solid var(--border-2);background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:12px;display:inline-flex;align-items:baseline;gap:4px;cursor:pointer}.note-pill small{color:var(--text-3);font-size:11px}.note-pill.selected{background:var(--note-50);border-color:var(--note-d);color:var(--note-d);font-weight:700}@media(pointer:coarse){.mini-btn,.note-pill,.select-sm,.input-bpm{min-height:38px}}.auth-dialog[open]{margin:auto;width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-2);color:var(--text);box-shadow:var(--shadow-lg);display:grid;gap:14px}dialog:modal{overscroll-behavior:contain}dialog::backdrop{background:#18173373;overflow:hidden;overscroll-behavior:contain}.auth-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.auth-dialog-head h2{font-family:var(--font-display);font-size:18px}.auth-close{width:36px;height:36px;border-radius:var(--r-xs);border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:20px;line-height:1;cursor:pointer}.auth-desc{font-size:14px;color:var(--text-2);line-height:1.5}.auth-form{display:grid;gap:14px}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-field label{font-size:13px;font-weight:600;color:var(--text)}.auth-field input{font:inherit;font-size:max(1rem,1em);min-height:48px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--bg);color:var(--text)}.auth-field input:user-invalid,.auth-field input[aria-invalid=true]{border-color:#dc2626}.auth-field-error{font-size:12px;color:#dc2626}.auth-actions{display:flex;justify-content:flex-end;gap:10px}.auth-actions .tool{min-height:44px}.auth-feedback{min-height:20px;font-size:13px;line-height:1.5;color:var(--text-2)}.auth-feedback.ok{color:#15803d}.auth-feedback.error{color:#dc2626}footer{text-align:center;padding:18px;font-size:12px;color:var(--text-3)}footer a{color:var(--note-d)}