:root{color-scheme:dark;--bg:#101316;--surface:#171b1f;--text:#f1f3ee;--muted:#989fa3;--line:#2d3338;--accent:#c6f68a;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a{color:inherit;text-decoration:none}button{border:0}button svg{flex-shrink:0}svg.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-definitions{width:0;height:0;position:absolute;overflow:hidden}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.page{max-width:1192px;padding:0 40px;margin:0 auto}.site-header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:31px;font-weight:650;letter-spacing:-1.5px}.brand-mark{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}.brand-dot{color:var(--accent)}.local-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.local-note svg{width:15px;height:15px}.intro{padding:51px 0 35px}.intro h1{font-size:43px;font-weight:500;line-height:1.35;letter-spacing:-1px;margin:0 0 15px}.intro em{font-family:Georgia,"Times New Roman",serif;color:var(--accent);font-weight:400;font-size:1.22em;letter-spacing:-2px}.intro p{margin:0;color:var(--muted);font-size:14px;line-height:1.85;letter-spacing:.25px}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:minmax(0,1.36fr) minmax(0,1fr);gap:26px}.input-panel{min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;min-height:20px}.panel-heading h2{font-size:14px;font-weight:500;margin:0;display:flex;align-items:center;gap:11px;letter-spacing:.5px}.step-number{font-family:var(--mono);font-size:11px;color:#757e83;letter-spacing:0}.file-limit{font-size:11px;color:var(--muted)}.dropzone{position:relative;height:305px;border:1px dashed #434c51;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 10%,#1d2426 0%,#161b1e 75%);overflow:hidden;transition:border-color .2s,background .2s}.dropzone h3{font-size:20px;font-weight:500;letter-spacing:.5px;margin:23px 0 10px}.dropzone p{font-size:12px;color:var(--muted);margin:0 0 21px}.drop-art{height:40px;display:flex;align-items:center;gap:7px}.drop-art span{display:block;width:4px;border-radius:4px;background:#b2c4a1;height:15px}.drop-art span:nth-child(2),.drop-art span:nth-child(6){height:27px;background:#c6f68a}.drop-art span:nth-child(3),.drop-art span:nth-child(5){height:35px;background:#c6f68a}.drop-art span:nth-child(4){height:49px;background:#c6f68a}.choose-button{display:flex;align-items:center;justify-content:center;gap:10px;background:#f0f2eb;color:#212724;font-size:13px;font-weight:600;padding:12px 19px;border-radius:6px;transition:background .2s,transform .2s}.choose-button:hover{background:#fff;transform:translateY(-1px)}.formats{font-size:10px;color:#8e999c;font-family:var(--mono);margin-top:17px;letter-spacing:.1px}.drop-overlay{display:none;position:absolute;inset:0;background:#202b20;color:var(--accent);align-items:center;justify-content:center;gap:14px;font-size:20px;border-radius:12px}.dropzone.dragging{border:1px solid var(--accent)}.dropzone.dragging .drop-overlay{display:flex}.input-hint{margin:17px 0 0;display:flex;gap:7px;align-items:flex-start;color:#8d969b;font-size:11px;line-height:1.7}.input-hint svg{width:13px;height:13px;margin-top:2px;flex-shrink:0}.result-panel{padding:23px 25px 18px;background:linear-gradient(150deg,#1d241e 0%,#191e1d 42%,#181d1d 100%);border:1px solid #354030;border-radius:12px;min-width:0}.result-panel .panel-heading{margin:0 0 29px}.result-status{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);white-space:nowrap}.status-dot{width:5px;height:5px;border-radius:50%;background:#7d8980}.result-panel.complete .status-dot{background:var(--accent)}.result-panel.complete .result-status{color:var(--accent)}.result-panel.nonconstant .result-status{color:#e7bd84}.result-panel.nonconstant .status-dot{background:#e7bd84}.metric-label{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:#a0aca3}.bpm-line{display:flex;align-items:baseline;gap:13px;height:101px;padding-top:7px}.bpm-line output{font-family:var(--mono);font-size:72px;line-height:1.2;letter-spacing:-5px;font-weight:400}.bpm-line output.has-value{font-size:59px;letter-spacing:-3.5px}.bpm-line>span{font-family:var(--mono);font-size:12px;color:#a1afa3;letter-spacing:1px}.signature-metric{display:flex;align-items:center;justify-content:space-between;padding:20px 0 17px;border-top:1px solid #354031;border-bottom:1px solid #354031}.signature-metric p{font-size:11px;color:#8e9b92;margin:6px 0 0}.signature-value{font-family:var(--mono);font-size:34px;display:flex;align-items:baseline;gap:8px;font-weight:400;letter-spacing:-1px}.signature-value span{font-size:25px;color:#88988b}.result-description{font-size:11px;line-height:1.75;color:#a1aca3;margin:16px 0 17px;min-height:20px}.download-button{width:100%;padding:13px 15px;display:flex;align-items:center;gap:10px;background:var(--accent);border:1px solid transparent;border-radius:7px;color:#1a2812;font-size:13px;font-weight:650;transition:background .2s,transform .2s}.download-button .extension{font:11px var(--mono);margin-left:auto;opacity:.65}.download-button:disabled{background:#2c352b;color:#83917e;border-color:#394335}.download-button:not(:disabled):hover{background:#d7ffa8;transform:translateY(-1px)}.midi-hint{text-align:center;font-size:10px;margin:12px 0 0;color:#8c998e}.workflow{display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr;gap:23px;align-items:center;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}.workflow>div>span{font:10px var(--mono);letter-spacing:1.2px;color:#92a084}.workflow h3{font-size:13px;font-weight:500;letter-spacing:.5px;margin:12px 0 7px}.workflow p{font-size:11px;color:#939da2;margin:0;line-height:1.7}.flow-arrow{color:#48544b}.method-note{margin-top:30px;color:#939da2;font-size:11px;line-height:1.9;max-width:850px}.method-note summary{cursor:pointer;display:list-item;width:fit-content}.method-note p{margin:10px 0;color:#a9b0b4;font-size:12px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:33px;padding:21px 0 25px;border-top:1px solid var(--line);font-size:10px;color:#7d898f;letter-spacing:.3px}footer a{display:flex;align-items:center;gap:6px}footer a:hover{color:var(--accent)}footer svg.icon{width:13px;height:13px;transform:rotate(-40deg)}.selected-file{height:305px;border:1px solid #384149;border-radius:12px;background:#171c20;padding:23px;position:relative}.file-heading{display:flex;align-items:center;gap:12px}.file-icon{width:38px;height:42px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#273122;color:var(--accent);flex-shrink:0}.file-info{min-width:0;flex:1}.file-info strong{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-info span{display:block;font-size:10px;color:var(--muted);margin-top:6px;font-family:var(--mono)}.icon-button{display:flex;align-items:center;justify-content:center;background:transparent;color:#a6b0b4;width:30px;height:30px;border-radius:5px;flex-shrink:0}.icon-button:hover{background:#293136;color:var(--text)}.icon-button:disabled{opacity:.3}.waveform{height:112px;margin:24px 0 15px;position:relative;border-bottom:1px solid #2c3438;display:flex;align-items:center;justify-content:center}.waveform canvas{width:100%;height:100%;display:block}.wave-placeholder{position:absolute;font-size:12px;color:#7e8c8a}.player{display:flex;align-items:center;gap:12px}.play-button{width:30px;height:30px;background:#2e3a2a;color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.play-button:disabled{opacity:.4}.play-button svg{width:17px;height:17px}.player-time{font:10px var(--mono);color:#a0aaad;min-width:28px}.player input{min-width:0;flex:1;accent-color:var(--accent);height:4px;cursor:pointer}.analysis-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--accent);margin:14px 0 0;line-height:1.7}.analysis-status>span:last-child{margin-left:auto;font:11px var(--mono);color:var(--muted);white-space:nowrap;flex-shrink:0}#status-message{min-width:0;overflow-wrap:anywhere}.spinner{display:block;width:13px;height:13px;border:1.5px solid #52604a;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}.error-message{font-size:12px;line-height:1.8;color:#f0b3a6;background:#30211f;border:1px solid #5c3731;padding:11px 13px;border-radius:7px;margin:14px 0 0}.preview-note{font-size:10px;line-height:1.5;color:#d4bf96;margin:12px 0 0}.result-panel.loading .bpm-line{opacity:.45}.result-panel.loading .status-dot{animation:pulse 1.2s ease-in-out infinite;background:var(--accent)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.3}}
@media(min-width:1500px){.intro{padding-top:66px;padding-bottom:43px}.workspace{gap:32px}.workflow{margin-top:48px}.site-header{height:115px}footer{margin-top:40px}}
@media(max-width:1000px){.page{padding:0 30px}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}.result-panel{padding:23px 20px 18px}.bpm-line output.has-value{font-size:51px}.bpm-line{gap:10px}.formats{font-size:9px}.workflow{gap:16px}}
@media(max-width:760px){.page{padding:0 22px}.site-header{height:83px}.brand{font-size:28px}.brand-mark{width:27px;height:27px}.intro{padding:34px 0 28px}.intro h1{font-size:34px;letter-spacing:-1px;line-height:1.45}.mobile-break{display:block}.intro p{font-size:13px;line-height:1.9;max-width:420px}.local-note{font-size:10px;gap:5px}.workspace{grid-template-columns:1fr;gap:27px}.panel-heading{margin-bottom:13px}.dropzone{height:290px}.file-limit{font-size:10px}.formats{font-size:9px}.result-panel{padding:23px 23px 20px}.result-panel .panel-heading{margin-bottom:24px}.bpm-line output.has-value{font-size:64px}.bpm-line{height:98px}.signature-metric{padding-top:17px;padding-bottom:17px}.result-description{font-size:12px}.download-button{padding:15px}.workflow{grid-template-columns:1fr;gap:24px;margin-top:31px;padding-top:25px}.workflow>div{display:grid;grid-template-columns:108px 1fr;gap:0 10px}.workflow>div>span{grid-row:1 / 3;margin-top:3px}.workflow h3{margin:0 0 5px}.workflow .flow-arrow{display:none}.method-note{font-size:11px}footer{align-items:flex-start;font-size:9px;margin-top:25px;gap:10px}.selected-file{padding:20px;height:305px}.analysis-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Key estimate is separate from time signature and never presented as ground truth. */
.key-metric { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line, #343e30); }
.key-metric p { color: #91988f; font-size: 12px; line-height: 1.7; margin: 5px 0 0; }
.key-metric output { flex-shrink: 0; font-size: 25px; font-weight: 500; color: #d2f5a8; }
footer a:last-child { margin-left: 16px; }
footer > span { margin-right: auto; }

/* Model explanations share the same presentation in browser and Python modes. */
.model-info { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.model-info-heading h2 { margin: 10px 0 9px; font-size: 22px; font-weight: 500; letter-spacing: .3px; }
.model-info-heading > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.model-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.model-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #151a1c; }
.model-task { color: var(--accent); font-size: 10px; letter-spacing: 1px; }
.model-card h3 { margin: 12px 0 7px; font-size: 25px; font-weight: 550; letter-spacing: -.6px; }
.model-source { color: #9da9a0; font: 10px var(--mono); letter-spacing: .3px; }
.model-card > p { margin: 18px 0 0; color: #b1b8b8; font-size: 12px; line-height: 1.95; }
.model-card > .model-limitation { margin-top: 12px; margin-bottom: 20px; color: #919c96; font-size: 11px; }
.model-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: auto; }
.model-links a { display: inline-flex; align-items: center; gap: 6px; color: #c6d8b7; font-size: 11px; padding: 5px 0; text-underline-offset: 4px; }
.model-links a:hover { color: var(--accent); text-decoration: underline; }
.model-info-note { margin: 16px 0 0; color: #939d98; font-size: 11px; line-height: 1.9; }
@media (max-width: 760px) {
  .model-info { margin-top: 30px; padding-top: 25px; }
  .model-info-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .model-card { padding: 22px; }
  .model-info-heading h2 { font-size: 20px; }
}

.header-tools { display: flex; align-items: center; gap: 20px; font: 400 12px/1.5 var(--sans); }
.header-tools .local-note { font: inherit; }
.language-picker select { max-width: 125px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface); font: inherit; cursor: pointer; }
.language-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:lang(en) .intro h1 { font-size: 43px; letter-spacing: -1.4px; }
:lang(ja) .intro h1 { font-size: 35px; }
.result-panel .panel-heading { flex-wrap: wrap; }
.key-metric > div { min-width: 0; }
.key-metric output { font-size: 23px; }
@media (max-width: 1000px) { .header-tools { gap: 12px; } :lang(en) .intro h1 { font-size: 36px; } :lang(ja) .intro h1 { font-size: 29px; } }
@media (max-width: 760px) {
  .header-tools { gap: 8px; }
  .header-tools .local-note { display: none; }
  .language-picker select { max-width: 110px; }
  .panel-heading h2 { font-size: 13px; gap: 8px; }
  .file-limit { font-size: 9px; }
  .key-metric output { font-size: 22px; }
  .workflow > div { grid-template-columns: 100px minmax(0, 1fr); }
  footer { flex-wrap: wrap; }
  :lang(en) .intro h1 { font-size: 38px; }
  :lang(ja) .intro h1 { font-size: 30px; }
}

/* Keep the complete wordmark beside the language selector on narrow screens. */
.site-header { gap: 12px; }
.brand { white-space: nowrap; }
.brand-mark { flex-shrink: 0; }
@media (max-width: 760px) {
  .brand { font-size: clamp(20px, 5.7vw, 26px); letter-spacing: -1px; gap: 7px; }
  .brand-mark { width: 23px; height: 23px; }
}

.analysis-options { display: grid; gap: 12px; margin-top: 20px; }
.engine-controls { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 17px 20px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.engine-choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-shrink: 0; font-size: 12px; color: var(--text); }
.engine-choice select { color: var(--accent); background: #202820; border: 1px solid #43553c; border-radius: 6px; padding: 9px 11px; font: inherit; cursor: pointer; }
.engine-choice select:disabled { opacity: .5; cursor: wait; }
.engine-choice select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.engine-controls p { margin: 0; font-size: 11px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
@media(max-width:760px) { .engine-controls { align-items: stretch; flex-direction: column; gap: 12px; padding: 16px; } .engine-choice { justify-content: space-between; gap: 8px; } }

.python-setup { margin: 0; border: 1px solid var(--line); border-radius: 9px; background: #141a1b; }
.python-setup > summary { padding: 15px 20px; color: #c6d8b7; font-size: 12px; cursor: pointer; line-height: 1.7; }
.python-setup[open] > summary { border-bottom: 1px solid var(--line); }
.python-setup-content { padding: 3px 20px 20px; }
.python-setup p, .python-setup li { font-size: 12px; line-height: 1.9; color: #aab4ae; }
.python-setup-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 30px; }
.python-setup h3 { font-size: 14px; line-height: 1.7; font-weight: 550; margin: 14px 0 8px; }
.python-setup pre { background: #0e1315; border: 1px solid #29322b; border-radius: 6px; padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.85 var(--mono); color: #d3e5c2; }
.python-setup a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; font-size: 11px; }
.python-troubleshooting { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 5px; }
.python-troubleshooting ul { padding-left: 19px; }
.python-troubleshooting li { margin: 9px 0; }
.python-online { border-top: 1px solid var(--line); padding-top: 15px; }
.python-online summary { font-size: 12px; line-height: 1.8; color: #c6d8b7; cursor: pointer; }
@media(max-width:760px) { .python-setup-steps { grid-template-columns: 1fr; gap: 8px; } .python-setup > summary { padding: 14px 16px; } .python-setup-content { padding: 2px 16px 16px; } }
.python-platform { margin: 12px 0; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.python-platform > summary { color: var(--accent); font-size: 12px; line-height: 1.8; cursor: pointer; }
.python-setup .python-command-label { color: #c6d8b7; font-weight: 600; margin-bottom: 4px; }
.python-api { border-bottom: 1px solid var(--line); padding-bottom: 8px; }

.python-setup-steps > section:nth-child(-n+2) { grid-column: 1 / -1; }

.github-star { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid #526742; border-radius: 6px; background: #202c1d; color: var(--accent); font: inherit; white-space: nowrap; }
.github-star .icon { width: 16px; height: 16px; }
.github-star:hover { background: #2c3b23; border-color: var(--accent); }
@media (max-width: 760px) {
  .site-header { height: auto; min-height: 83px; padding: 18px 0; flex-wrap: wrap; gap: 14px; }
  .header-tools { width: 100%; justify-content: space-between; }
  .github-star, .language-picker select { min-height: 44px; }
}

/* Engine comparison shares the model section layout and stacks on small screens. */
.engine-card h3 { margin: 0; font-size: 19px; letter-spacing: 0; line-height: 1.6; }
.engine-card dl { margin: 18px 0 0; width: 100%; }
.engine-card dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.engine-card dl > div:last-child { padding-bottom: 0; }
.engine-card dt { font-size: 12px; font-weight: 500; color: var(--accent); line-height: 1.8; }
.engine-card dd { margin: 5px 0 0; font-size: 12px; color: #b1b8b8; line-height: 1.95; overflow-wrap: anywhere; }

.selected-file { height: auto; min-height: 305px; }
.range-editor { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; }
.range-editor > summary { cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.8; padding: 5px 0; }
.range-editor > summary::marker { color: var(--accent); }
.range-editor > summary:hover { color: var(--accent); }
.range-heading { display: flex; justify-content: flex-end; margin-top: 8px; }
.range-heading button { color: var(--accent); background: transparent; font-size: 11px; padding: 8px 0 8px 8px; }
.range-heading button:disabled { opacity: .4; }
.range-editor fieldset { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.range-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.range-row { display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: center; gap: 10px; }
.range-row label { color: var(--muted); font-size: 11px; line-height: 1.5; }
/* Both native, keyboard-accessible handles share one visible track. */
.range-bar { position: relative; height: 44px; margin: 0 0 12px; --range-start: 0%; --range-end: 100%; }
.range-track { position: absolute; top: 19px; height: 6px; left: 10px; right: 10px; background: #343e41; border-radius: 3px; overflow: hidden; }
.range-fill { position: absolute; top: 0; bottom: 0; left: var(--range-start); right: calc(100% - var(--range-end)); background: var(--accent); }
.range-bar input[type=range] { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; pointer-events: none; }
.range-bar input[type=range]::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.range-bar input[type=range]::-moz-range-track { height: 6px; background: transparent; }
.range-bar input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 2px solid #101518; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px #8cb35e; cursor: ew-resize; pointer-events: auto; }
.range-bar input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #101518; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px #8cb35e; cursor: ew-resize; pointer-events: auto; }
.range-bar input[type=range]:focus-visible { outline: none; z-index: 2; }
.range-bar input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text); outline-offset: 3px; }
.range-bar input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--text); outline-offset: 3px; }
.range-editor fieldset:disabled .range-bar { opacity: .4; }
.range-editor fieldset:disabled .range-bar input::-webkit-slider-thumb { pointer-events: none; }
.range-editor fieldset:disabled .range-bar input::-moz-range-thumb { pointer-events: none; }
.range-row input[type=number] { width: 100%; min-width: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: 6px; background: #101518; color: var(--text); font: 12px var(--mono); }
.range-row input:disabled { opacity: .4; }
.range-summary { font: 11px/1.8 var(--mono); color: var(--accent); overflow-wrap: anywhere; margin: 15px 0 8px; }
.range-help, .range-result { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 8px 0; }
.range-help.invalid-range { color: #f0b3a6; }
.analyze-range { margin-top: 12px; width: 100%; justify-content: center; }
.analyze-range:disabled { opacity: .45; }
.workspace { align-items: start; }
@media(max-width:760px) { .range-times { gap: 14px; } .range-row { grid-template-columns: minmax(0,1fr); gap: 7px; } }

.report-issue { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #151a1c; }
.report-issue h2 { margin: 0 0 9px; font-size: 18px; font-weight: 500; }
.report-issue p { max-width: 680px; margin: 0; font-size: 12px; line-height: 1.9; color: var(--muted); }
.report-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-height: 44px; padding: 10px 16px; border: 1px solid #566b40; border-radius: 7px; color: var(--accent); font-size: 12px; }
.report-link:hover { background: #222d1d; border-color: var(--accent); }
@media(max-width:760px) { .report-issue { align-items: stretch; flex-direction: column; gap: 18px; padding: 22px; } }

.accuracy-note { margin-top: 20px; padding: 20px 22px; border: 1px solid #425336; border-left: 3px solid var(--accent); border-radius: 8px; background: #192019; }
.accuracy-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.accuracy-heading h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--accent); }
.precision-badge { padding: 4px 8px; border: 1px solid #425336; border-radius: 4px; font-size: 11px; color: #c4d3b6; }
.accuracy-note p { margin: 12px 0 0; color: #b1b8b8; font-size: 12px; line-height: 1.95; }

.export-errors { margin-top: 18px; padding-top: 16px; border-top: 1px solid #425336; }
.export-errors h4 { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.8; }
.export-error-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.export-error-card { padding: 16px; border-radius: 6px; background: #121a14; border: 1px solid #34432d; }
.export-error-card strong { display: block; font-size: 13px; font-weight: 500; }
.export-error-value { display: block; margin-top: 12px; font: 18px/1.6 var(--mono); color: var(--accent); }
.export-error-card p { margin: 8px 0 12px; font-size: 11px; }
.export-error-card a { font-size: 11px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.accuracy-note .export-error-scope { font-size: 11px; color: #a4b29b; }
@media(max-width:760px) { .export-error-grid { grid-template-columns: 1fr; gap: 12px; } }

.formats { max-width: 100%; padding: 0 16px; text-align: center; line-height: 1.8; }

/* Pitch sits beside rhythm/key as an independent estimate, with original-audio preview. */
.pitch-metric{padding:21px 0 18px;border-bottom:1px solid #354031}
.pitch-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pitch-heading h3{margin:0;font-size:13px;font-weight:500;letter-spacing:.3px}
.pitch-heading .precision-badge{font:10px var(--mono);white-space:normal}
.pitch-extremes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pitch-note{display:flex;align-items:flex-start;flex-direction:column;gap:7px;text-align:left;padding:14px 13px;background:#222d24;border:1px solid #3f5038;border-radius:8px;color:var(--text);min-width:0}
.pitch-note>span{font-size:11px;color:#a9b7a5}
.pitch-note strong{font:32px var(--mono);color:var(--accent);letter-spacing:-1px}
.pitch-note small{font:10px var(--mono);color:#a9b7a5;line-height:1.6;overflow-wrap:anywhere}
.pitch-note:not(:disabled):hover{background:#2c3a2c;border-color:#a0c777}
.pitch-note:disabled{background:#1c251f;opacity:.65}
.pitch-summary{margin:13px 0 0;color:#afbcac;font-size:11px;line-height:1.7}
.pitch-caution{margin:12px 0 0;color:#9aa89d;font-size:11px;line-height:1.75}
.pitch-chart{margin:14px 0 0;min-width:0}
.pitch-chart canvas{display:block;width:100%;height:152px;cursor:pointer}
.pitch-chart figcaption{font-size:10px;line-height:1.65;color:#a2afa4;margin-top:7px}
.music-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.model-license{font-size:11px!important;line-height:1.75!important;color:#b4c9a3!important;border-top:1px solid var(--line);padding-top:13px}
.model-links{flex-wrap:wrap;row-gap:12px}
@media(max-width:950px){.music-model-grid{grid-template-columns:1fr}.workspace{align-items:start}}
@media(max-width:400px){.pitch-note{padding:12px 10px}.pitch-note strong{font-size:28px}.pitch-chart canvas{height:135px}footer{flex-wrap:wrap}}

.pitch-transport{margin-top:15px;padding:12px;background:#17211b;border:1px solid #354031;border-radius:8px}
.pitch-transport-heading{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:11px;color:#afbcac;margin-bottom:10px}
.pitch-clock{font:10px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pitch-controls{display:flex;align-items:center;gap:12px;min-width:0}
.pitch-controls button{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-height:36px;padding:6px 10px;background:#c6f68a;color:#182016;border:1px solid #c6f68a;border-radius:6px;font:inherit;font-size:11px}
.pitch-controls button[aria-pressed="true"]{background:#35462b;color:#dcf8bb}
.pitch-controls .icon{width:14px;height:14px}
.pitch-controls input{width:100%;min-width:0;accent-color:var(--accent)}
.pitch-play-error{font-size:11px;color:#ffc4a8;line-height:1.6}

.tempo-click-button{display:inline-flex;align-items:center;gap:7px;margin-top:12px;min-height:34px;padding:6px 12px;background:#263321;border:1px solid #57713e;border-radius:6px;color:var(--accent);font:inherit;font-size:12px}
.tempo-click-button .icon{width:14px;height:14px}
.tempo-click-button[aria-pressed="true"]{background:#c6f68a;color:#182016}
.tempo-click-button:disabled{opacity:.4;cursor:not-allowed}
.tempo-click-hint{margin:8px 0 0;font-size:11px;line-height:1.65;color:#a2afa4}

.model-precision{margin-top:18px}
.model-precision h4{font-size:13px;font-weight:500;margin:0 0 10px;color:#dce5d6}
.model-precision table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:12px}
.model-precision th,.model-precision td{padding:10px 9px;border-bottom:1px solid #354031;overflow-wrap:anywhere;vertical-align:top}
.model-precision th{font-weight:500;color:#bdcbb5}
.model-precision td{font-family:var(--mono);color:var(--accent)}
.model-precision small{display:block;font:10px/1.6 var(--sans);color:#a2afa4;margin-top:3px}

.enhanced-controls { margin: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.enhanced-choice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; cursor: pointer; }
.enhanced-choice input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.enhanced-choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.enhanced-choice input:disabled { cursor: wait; opacity: .5; }
.enhanced-choice:has(input:disabled) { cursor: wait; }
.enhanced-controls p { margin: 10px 0 0 27px; color: var(--muted); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
@media(max-width:760px) { .enhanced-controls { padding: 16px; } }