:root{color-scheme:light;--bg: #f6f7f9;--surface: #ffffff;--surface-strong: #eef3f6;--ink: #16181d;--muted: #606873;--line: #d8dee5;--accent: #176b5b;--accent-strong: #0d4f43;--accent-soft: #d7ece6;--danger-line: #f1c9c0;--danger-ink: #9f3a2f;--drop-bg: #f0faf7;--active-output: #e5e7eb;--focus: #d69128;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=dark]{color-scheme:dark;--bg: #121417;--surface: #1d2126;--surface-strong: #252b31;--ink: #f2f4f7;--muted: #a8b0ba;--line: #3a424c;--accent: #4ab59e;--accent-strong: #7dd8c4;--accent-soft: #264f47;--danger-line: #7b4039;--danger-ink: #f0a296;--drop-bg: #19322d;--active-output: #303741;--focus: #e0a342}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{min-height:100%;touch-action:manipulation}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);overscroll-behavior:none}button,select,textarea,input{font:inherit}button,select{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}button{padding:0 14px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .1s ease}button:disabled{color:var(--muted);cursor:not-allowed;opacity:.6}button:active:not(:disabled){transform:translateY(1px)}@media(hover:hover){button:hover:not(:disabled):not(.tap-zone){border-color:color-mix(in srgb,var(--accent),var(--line) 45%);background:color-mix(in srgb,var(--surface),var(--accent-soft) 42%);box-shadow:0 4px 12px color-mix(in srgb,var(--ink),transparent 90%)}}button:focus-visible,select:focus-visible,textarea:focus-visible,.tap-zone:focus-visible,.site-footer a:focus-visible{outline:3px solid color-mix(in srgb,var(--focus),transparent 35%);outline-offset:2px}textarea{width:100%;min-height:260px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:12px;line-height:1.6;color:var(--ink);background:var(--surface)}.app-shell{width:min(1180px,100%);margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.workspace{display:grid;gap:14px}.topbar,.audio-panel,.lyrics-panel,.timing-panel,.preview-panel,.help-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px}.brand-block{min-width:0}h1,h2,p{margin:0}h1{font-size:1.35rem;line-height:1.2}h2{font-size:1rem}.topbar p,.panel-heading span,.options-row label{color:var(--muted);font-size:.9rem}.topbar-actions,.panel-heading,.options-row,.panel-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.topbar-action-button{display:inline-flex;align-items:center;justify-content:center;gap:.45em}.button-icon{width:1.25em;height:1.25em;flex:0 0 auto;color:var(--accent);vector-effect:non-scaling-stroke}.square-action-button{width:44px;min-width:44px;padding:0;display:inline-grid;place-items:center;flex:0 0 auto;border-radius:12px}.square-action-button .button-icon{width:22px;height:22px}:root[data-theme=dark] .theme-action .button-icon{color:#f5c542}.help-panel{padding:12px;display:grid;gap:10px}.shortcut-grid{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:8px 12px;color:var(--muted);font-size:.95rem}kbd{display:inline-block;min-width:28px;padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface-strong);color:var(--ink);text-align:center;font-family:SFMono-Regular,Consolas,monospace;font-size:.86em}.audio-panel{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:12px;padding:12px;align-items:center}.audio-panel.is-dragging{border-color:var(--accent);background:var(--drop-bg)}.file-picker{display:grid;place-items:center;min-height:48px;border:1px dashed var(--accent);border-radius:8px;color:var(--accent-strong);font-weight:700;cursor:pointer}.file-picker input{display:none}audio{width:100%}.editor-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:14px}.lyrics-panel,.timing-panel,.preview-panel{padding:12px}.lyrics-panel,.preview-panel{display:grid;gap:10px}.timing-panel{display:grid;gap:12px;align-content:start}.timing-display{display:grid;gap:8px;min-height:112px;padding:14px;border-radius:8px;background:var(--surface-strong)}#currentTime{font-variant-numeric:tabular-nums;font-size:clamp(2rem,8vw,4rem);font-weight:800;line-height:1;color:var(--accent-strong)}#activeLine{display:block;min-height:2.9em;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.45}.active-token{display:inline-block;border-radius:4px}.active-token.is-stamped{color:var(--muted)}.active-token.is-current{background:var(--accent-soft);color:var(--ink);box-shadow:0 0 0 2px var(--accent-soft)}.segment-progress{display:block;margin-bottom:4px;color:var(--muted);font-size:.85rem;font-weight:700}.tap-zone{display:grid;place-items:center;min-height:150px;width:100%;border-radius:8px;background:var(--accent);color:#fff;font-size:1.25rem;font-weight:800;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}.tap-zone:active{background:var(--accent-strong)}.control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.control-button{display:inline-flex;align-items:center;justify-content:center;gap:.45em}.control-button:disabled .button-icon{color:currentColor}.play-action{grid-column:span 2}.compact-action-button{display:inline-flex;align-items:center;justify-content:center;gap:.45em}.options-row{justify-content:space-between}.options-row label{display:flex;align-items:center;gap:8px}.tempo-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem}.tempo-control span{font-size:.82rem}.timing-warning{margin-top:10px;padding:10px 12px;border:1px solid var(--danger-line);border-radius:8px;background:color-mix(in srgb,var(--danger-line) 12%,var(--surface));color:var(--danger-ink);font-size:.86rem}.timing-warning ul{margin:6px 0 0;padding-left:1.25rem}.danger-action{border-color:var(--danger-line);color:var(--danger-ink)}.danger-action .button-icon{color:var(--danger-ink)}select{padding:0 34px 0 10px}.output-preview,.output-copy-source{min-height:220px;font-family:SFMono-Regular,Consolas,monospace;font-size:.92rem}.output-preview{width:100%;max-height:44vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 0;white-space:pre-wrap}.output-line{padding:4px 12px;min-height:30px;overflow-wrap:anywhere}.output-line span{display:block}.output-line.is-active{background:var(--active-output)}.output-time{color:var(--muted);font-variant-numeric:tabular-nums}.output-empty{padding:12px;color:var(--muted)}.output-notice{margin:8px 0 0;color:var(--muted);font-size:.86rem}.site-footer{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;padding:20px 12px 4px;color:var(--muted);font-size:.9rem}.site-footer a{border-radius:4px;color:var(--accent-strong);font-weight:700;text-underline-offset:3px}.site-footer a:hover{color:var(--accent)}@media(max-width:780px){.app-shell{padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.workspace{gap:10px}.topbar,.audio-panel,.editor-grid{grid-template-columns:1fr}.topbar{display:grid;gap:10px;padding:12px}.topbar-actions{display:grid;grid-template-columns:repeat(5,44px);justify-content:end;gap:6px}.topbar-actions button{min-height:40px;padding:0}.topbar-action-button{gap:0;font-size:0}.topbar-action-button .button-icon{width:22px;height:22px}.audio-panel,.lyrics-panel,.timing-panel,.preview-panel,.help-panel{padding:10px}.audio-panel{gap:8px}.file-picker{min-height:42px}.panel-heading{justify-content:space-between}.panel-heading button{min-height:38px;padding:0 12px}textarea{min-height:170px;font-size:16px}.timing-panel{gap:10px}.timing-display{min-height:88px;padding:12px}#currentTime{font-size:2.2rem}#activeLine{min-height:2.4em}.tap-zone{min-height:112px;font-size:1.15rem}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.control-grid button{min-height:42px;padding:0 10px}.options-row{display:grid;grid-template-columns:1fr;align-items:stretch;gap:8px}.options-row label{justify-content:space-between}.options-row select{min-width:140px}.output-preview{min-height:160px;max-height:34vh}.shortcut-grid{grid-template-columns:1fr}}