/* Desktop keeps the public Tonehome composition; phones use a separate tuning workspace. */
:root {
  color-scheme: dark;
  --bg: #101719; --panel: #1b2527; --surface: #1b2527; --ink: #f0f5f3; --muted: #a5b4b2;
  --line: #ffffff14; --accent: #c3eedb; --control-line: #80978d; --level: 0;
  --hover: #ffffff0c; --selected: #c3eedb12; --glass-edge: #ffffff24;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 15% 0%, #30554f55, transparent 55%), radial-gradient(ellipse at 95% 65%, #34414d30, transparent 55%), var(--bg); background-attachment: fixed; color: var(--ink); font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, select, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 10; padding: 12px 20px; background: var(--accent); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(1140px, 100%); margin-inline: auto; padding-inline: max(42px, env(safe-area-inset-left)) max(42px, env(safe-area-inset-right)); }
.shell { padding-top: 20px; }
.header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 104px; padding: 24px 0; gap: 16px 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 15px; max-width: 100%; font-size: 27px; font-weight: 550; letter-spacing: -.5px; line-height: 1.15; overflow-wrap: anywhere; }
.brand > span:last-child { min-width: 0; }
.brand-sub { display: block; margin-top: 5px; font-size: 9px; font-weight: 500; letter-spacing: 3.5px; color: var(--muted); }
.brand-mark { display: flex; flex-shrink: 0; align-items: center; gap: 4px; width: 32px; height: 42px; }
.brand-mark i { width: 1px; height: calc(26px + var(--i)*3px); background: linear-gradient(var(--ink), #84bca6); transform: rotate(10deg); }
.language-toggle { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--glass-edge); border-radius: 50%; background: #ffffff08; color: var(--muted); font-size: 12px; }
.language-toggle:hover { background: #ffffff18; }
.toolbar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; }
.preset-picker { position: relative; min-width: 184px; max-width: 56%; }
.preset-picker summary { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 62px; padding: 11px 16px; cursor: pointer; list-style: none; border: 1px solid var(--glass-edge); border-radius: 19px; background: linear-gradient(135deg, #ffffff13, #ffffff04); box-shadow: inset 0 1px 0 #ffffff14; }
.preset-picker summary > span { min-width: 0; }
.preset-picker summary::-webkit-details-marker { display: none; }
.preset-picker summary::marker { content: ''; }
.preset-caption { display: block; margin-bottom: 4px; font-size: 10px; color: var(--muted); }
#preset-label { display: block; font-size: 14px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.preset-picker summary svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.preset-picker[open] summary svg { transform: rotate(180deg); }
.preset-panel { position: absolute; left: 0; top: calc(100% + 16px); width: 340px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100dvh - 160px)); overflow-y: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 60px #0006; animation: sheet-in .2s ease-out; }
.preset-panel-heading { display: flex; justify-content: space-between; padding: 8px 10px 20px; gap: 16px; font-size: 12px; color: var(--muted); }
.preset-option { display: block; width: 100%; padding: 14px 12px; text-align: left; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.preset-option:hover { background: var(--hover); }
.preset-option[aria-pressed=true] { border-color: var(--line); background: var(--selected); }
.preset-option + .preset-option { margin-top: 8px; }
.preset-option-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.preset-check { visibility: hidden; color: var(--accent); }
.preset-option[aria-pressed=true] .preset-check { visibility: visible; }
.preset-notes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.preset-notes span { padding: 4px 0; text-align: center; font-size: 12px; color: var(--muted); }
.preset-custom { display: flex; justify-content: space-between; align-items: center; min-height: 72px; border-top: 1px solid var(--line); border-radius: 0; margin-top: 16px !important; }
.preset-option-description { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

.mode-control { display: flex; flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid var(--glass-edge); border-radius: 30px; background: #ffffff04; box-shadow: inset 0 1px 0 #ffffff08; }
.mode-control button { min-width: 64px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 24px; background: transparent; color: var(--muted); font-size: 12px; transition: background .18s, color .18s; }
.mode-control button[aria-pressed=true] { background: linear-gradient(#ffffff20, #ffffff0e); box-shadow: inset 0 1px 0 #ffffff20, 0 2px 6px #0002; color: var(--ink); }
.notice { margin: 0 0 16px; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--surface); font-size: 14px; line-height: 1.6; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 24px; align-items: stretch; }
.instrument { min-width: 0; min-height: 475px; display: flex; flex-direction: column; padding: 26px 30px 22px; border: 1px solid var(--glass-edge); border-radius: 30px; background: radial-gradient(ellipse at 50% 20%, #c4eadc09, transparent 65%), linear-gradient(135deg, #ffffff0b, #ffffff02), var(--panel); box-shadow: 0 20px 60px #0003, inset 0 1px 0 #ffffff16; }
.instrument:focus { outline: none; }
.instrument-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
h1 { margin: 0; font-size: 12px; font-weight: 400; color: #c2d1cc; }
.pitch-core { min-width: 0; text-align: center; }
.pitch-display { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; min-height: 148px; padding-top: 20px; font-size: 112px; line-height: 1; letter-spacing: -5px; }
#target-note { font-weight: 350; }
#target-octave { margin-left: 8px; color: #b7c9c3; font-size: .36em; font-weight: 350; letter-spacing: -1px; }
.target-frequency { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 1.2px; }
.meter { position: relative; flex-shrink: 0; height: 73px; margin: 31px 10px 0; }
.meter-ticks { position: absolute; inset: 8px 0 auto; height: 25px; }
.meter-ticks i { position: absolute; top: 8px; width: 1px; height: 11px; background: #6b817b; }
.meter-ticks .major { top: 2px; height: 20px; background: #91a59e; }
.tune-zone { position: absolute; top: 0; left: calc(50% - var(--tolerance, 5)*1%); width: calc(var(--tolerance, 5)*2%); height: 38px; border-radius: 7px; background: linear-gradient(#c3eedb0c, #c3eedb03); }
.center-line { position: absolute; left: 50%; top: 0; height: 34px; width: 1px; background: var(--accent); }
.needle { position: absolute; left: 50%; top: -6px; width: 3px; height: 46px; transform: translateX(-50%); background: var(--ink); opacity: 0; border-radius: 5px; transition: left .1s linear, opacity .15s, background .2s; }
.needle span { position: absolute; left: -3px; top: -6px; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: inherit; }
.meter.active .needle { opacity: 1; }
.meter.in-tune .needle { background: var(--accent); }
.meter-labels { position: absolute; top: 44px; inset-inline: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.tolerance-hint { text-align: center; margin: 2px 0 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.feedback { text-align: center; margin-top: 8px; min-width: 0; }
#guidance { margin: 0 0 7px; font-size: 19px; font-weight: 500; letter-spacing: .5px; line-height: 1.4; }
.cents-line { display: flex; justify-content: center; align-items: baseline; gap: 7px; }
#cents { font-size: 24px; font-weight: 350; line-height: 30px; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); font-size: 11px; }
.hold-track { width: 60px; height: 2px; margin: 11px auto 8px; overflow: hidden; background: #36463a; }
.hold-track span { display: block; height: 100%; width: 0; background: var(--accent); }
.in-tune #guidance, .in-tune #cents { color: var(--accent); }
.heard { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.instrument-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 23px; font-size: 10px; color: var(--muted); }
.strings-panel { position: relative; min-width: 0; padding: 24px; border: 1px solid #ffffff10; border-radius: 30px; background: linear-gradient(140deg, #ffffff06, #ffffff01); }
.section-heading { margin-bottom: 21px; padding-right: 76px; }
.section-heading h2 { font-size: 23px; font-weight: 450; letter-spacing: .5px; }
.strings { display: flex; flex-direction: column; gap: 5px; }
.string-row { display: flex; position: relative; align-items: center; width: 100%; min-height: 47px; gap: 15px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; transition: background .18s, border-color .18s; }
.string-row:hover { background: #ffffff06; }
.string-row.selected { border-color: #c3eedb35; background: linear-gradient(110deg, #c3eedb16, #c3eedb06); box-shadow: inset 0 1px 0 #ffffff08; }
.string-number { color: var(--muted); font-size: 12px; width: 12px; font-variant-numeric: tabular-nums; }
.string-illustration { flex: 1; height: var(--thickness); border-radius: 3px; background: linear-gradient(90deg, #778f8655, #b8cec4, #778f8655); opacity: .5; }
.string-row.selected .string-illustration { opacity: .85; }
.string-note { font-size: 19px; min-width: 45px; text-align: right; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.string-check { width: 17px; color: var(--accent); font-size: 13px; }
.string-row.selected .string-check:empty::before { content: '•'; }
.session-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 46px; margin-top: 15px; padding-top: 8px; border-top: 1px solid var(--line); }
.session-summary > span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.session-tools { display: flex; gap: 16px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 0; border: 0; background: transparent; color: #cad7d1; font-size: 12px; }
.text-button:hover { color: var(--accent); }
.strings-panel #edit-targets { position: absolute; top: 24px; right: 24px; }
.small-help { margin: 13px 0 0; max-width: 280px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.start-area { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0 24px; }
.start-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; width: min(260px, 100%); padding: 12px 24px; border: 1px solid #dcf8eb; border-radius: 30px; background: linear-gradient(150deg, #d9f7e9, #b4ddca); color: #15251a; font-size: 15px; font-weight: 600; letter-spacing: 1px; box-shadow: 0 5px 20px #0003, inset 0 1px 0 #ffffff80; transition: background .18s, color .18s; }
.start-button:hover { background: #ddf8ec; }
.start-button:active { background: #b2d7bf; }
.start-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.start-button.listening { background: linear-gradient(#3c5751, #293e38); border-color: #c3eedb45; box-shadow: inset 0 1px 0 #ffffff16; color: var(--accent); }
.start-caption { display: flex; align-items: center; justify-content: center; gap: 8px; }
.start-caption p { margin: 0; text-align: center; font-size: 11px; line-height: 1.6; color: var(--muted); }
.live-state { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 11px; }
.live-state > i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--muted); }
.live-state > i.on { background: var(--accent); }
.level-bars { display: flex; align-items: center; gap: 2px; height: 14px; }
.level-bars i { width: 2px; height: 4px; background: var(--accent); opacity: calc(.2 + var(--level)*.8); }
.level-bars i:nth-child(2), .level-bars i:nth-child(4) { height: calc(4px + var(--level)*5px); }
.level-bars i:nth-child(3) { height: calc(4px + var(--level)*9px); }
.page-footer { width: 100%; padding-inline: 0; padding-top: 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 11px; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.footer-meta a { display: flex; align-items: center; min-height: 44px; }

dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid #4b5c51; border-radius: 16px; color: var(--ink); background: #1b2821; box-shadow: 0 30px 100px #0008; overflow-y: auto; }
dialog::backdrop { background: #050b08c7; }
dialog[open] { animation: sheet-in .18s ease-out; }
.editor-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
h2 { margin: 0; font-size: 25px; font-weight: 400; letter-spacing: -.5px; }
.close-button { width: 44px; min-height: 44px; flex-shrink: 0; border: 0; background: transparent; font-size: 27px; color: var(--muted); }
.editor-caption { margin: 20px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.editor-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 62px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.editor-row label { font-size: 12px; overflow-wrap: anywhere; }
select { min-height: 44px; min-width: 0; width: 100%; padding: 8px; border: 1px solid #526357; border-radius: 4px; color: var(--ink); background: #24332a; font-size: 16px; }
.editor-hz { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.editor-error { min-height: 18px; color: #f0ccad; font-size: 12px; line-height: 1.6; }
.editor-footer { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: -24px; margin: 0 -8px -8px; padding: 12px 8px; background: #1b2821; }
.secondary-button, .save-button { min-height: 46px; padding: 10px 20px; border: 1px solid #526357; border-radius: 4px; background: transparent; color: var(--ink); font-size: 14px; }
.save-button { color: #18281e; background: var(--accent); border-color: var(--accent); }
.saved-presets-heading { margin: 16px 10px 6px; color: var(--muted); font-size: 12px; }
.saved-preset-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.saved-preset-row .preset-option { flex: 1; min-width: 0; }
.remove-preset { width: 44px; min-height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--muted); font-size: 23px; }
.remove-preset:hover { color: var(--ink); }
.preset-save { margin-top: 12px; }
.save-preset-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; cursor: pointer; }
.save-preset-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
#preset-name-field > label { display: block; margin: 8px 0; color: var(--muted); font-size: 12px; }
#preset-name { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #526357; border-radius: 4px; background: #24332a; color: var(--ink); font-size: 16px; }
#preset-save-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }


@keyframes sheet-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 761px) and (max-width: 960px) and (min-height: 501px) {
  .shell { padding-inline: 24px; }
  .workspace { gap: 16px; grid-template-columns: minmax(0, 1.2fr) minmax(270px, 1fr); }
  .instrument { padding-inline: 20px; }
  .strings-panel { padding: 20px; }
}
/* Same breakpoint as app.mjs: a phone in landscape keeps the phone interaction. */
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  body { background: radial-gradient(ellipse at 50% 15%, #30554f38, transparent 65%), var(--bg); }
  .shell { width: min(600px, 100%); padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .shell { display: flex; flex-direction: column; min-height: 100svh; min-height: 100dvh; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .header { min-height: 56px; padding: 0; border: 0; }
  .brand { font-size: 28px; font-weight: 400; letter-spacing: -1px; gap: 12px; }
  .brand-mark { width: 24px; height: 32px; gap: 3px; }
  .brand-mark i { height: calc(17px + var(--i)*3px); }
  .brand-sub { display: none; }
  .language-toggle { border: 0; background: transparent; font-size: 13px; }
  .toolbar { padding: 20px 0 24px; gap: 12px; }
  .preset-picker { min-width: 0; max-width: 52%; }
  .preset-picker summary { min-height: 48px; padding: 0; gap: 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #preset-label { font-size: 16px; font-weight: 400; }
  .preset-caption { font-size: 12px; margin-bottom: 4px; }
  .mode-control { gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .mode-control button { min-width: 48px; min-height: 48px; padding: 10px 8px; border-radius: 0; border-bottom: 1px solid transparent; background: transparent; font-size: 14px; }
  .mode-control button[aria-pressed=true] { border-color: var(--accent); background: transparent; box-shadow: none; }
  .workspace { --peg: 64px; display: grid; flex: 1; grid-template-columns: var(--peg) minmax(0, 1fr) var(--peg); grid-template-rows: repeat(3, minmax(var(--peg), auto)) auto auto; column-gap: 24px; row-gap: 16px; align-content: center; align-items: center; }
  .instrument, .strings-panel, .strings { display: contents; }
  .section-heading, .small-help, .instrument-footer { display: none; }
  .instrument-top { display: none; }
  h1 { color: var(--muted); font-size: 13px; }
  .pitch-core { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .pitch-display { min-height: 0; padding: 0; font-size: 128px; font-weight: 300; line-height: 1.05; letter-spacing: -.05em; }
  #target-octave { font-size: .28em; }
  .string-row { display: flex; justify-content: center; width: var(--peg); height: var(--peg); min-height: var(--peg); padding: 0; gap: 0; border: 1px solid #a8c7b233; border-radius: 50%; background: #24332e; box-shadow: none; }
  .string-row[data-string="4"] { grid-column: 1; grid-row: 1; }
  .string-row[data-string="5"] { grid-column: 1; grid-row: 2; }
  .string-row[data-string="6"] { grid-column: 1; grid-row: 3; }
  .string-row[data-string="3"] { grid-column: 3; grid-row: 1; }
  .string-row[data-string="2"] { grid-column: 3; grid-row: 2; }
  .string-row[data-string="1"] { grid-column: 3; grid-row: 3; }
  .string-number, .string-illustration { display: none; }
  .string-note { min-width: 0; color: #d2dfd8; font-size: 23px; font-weight: 400; line-height: 1.2; letter-spacing: -.5px; text-align: center; }
  .string-row:hover { background: #31443b; }
  .string-row.selected { border-color: #e3f6e9; background: #dceee2; outline: 1px solid #aec9b67a; outline-offset: 4px; box-shadow: none; }
  .string-row.selected .string-note { color: #193026; }
  .string-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  .string-row:active { background: #b8d7c5; }
  .string-check { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; color: var(--accent); background: var(--bg); border: 1px solid #7b9987; font-size: 12px; line-height: 16px; }
  .string-check:empty { display: none; }
  .meter { grid-column: 1 / -1; grid-row: 4; justify-self: center; width: calc(100% - 24px); height: 48px; margin: 16px 0 0; }
  .meter-ticks { top: 0; }
  .meter-ticks i { top: 8px; height: 10px; }
  .meter-ticks .major { top: 3px; height: 20px; }
  .tune-zone, .center-line { height: 28px; }
  .needle { height: 37px; top: -5px; }
  .needle span { width: 7px; height: 7px; left: -2px; top: -4px; }
  .meter-labels { top: 36px; font-size: 12px; }
  .feedback { grid-column: 1 / -1; grid-row: 5; min-height: 38px; margin: 0; }
  #guidance { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: 0; }
  .hold-track { visibility: hidden; width: 48px; margin: 8px auto 0; }
  .meter.active ~ .feedback .hold-track { visibility: visible; }
  .start-area { padding: 16px 0 0; gap: 12px; }
  .session-summary { width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; }
  .session-tools { gap: 16px; }
  .text-button, .session-summary > span { font-size: 12px; }
  .start-button { width: min(260px, 100%); min-height: 50px; font-weight: 500; letter-spacing: 0; box-shadow: none; }
  .start-caption { flex-wrap: wrap; gap: 4px 8px; }
  .start-caption p { flex-basis: 100%; font-size: 11px; }
  .start-caption .level-bars { display: none; }
  #target-frequency, #tolerance-hint, #cents-line, #heard { display: none; }
  .page-footer { padding: 4px 0 0; }
  .footer-meta { border: 0; }
  dialog { padding: 20px 16px; }
  .editor-row { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 58px; gap: 6px; }
  .editor-footer { bottom: -20px; }
}
@media (max-width: 760px) and (max-height: 800px) {
  .shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .header { min-height: 48px; }
  .toolbar { padding: 12px 0 16px; }
  .preset-picker summary, .mode-control button { min-height: 44px; }
  .workspace { --peg: 52px; column-gap: 20px; row-gap: 12px; }
  .pitch-display { font-size: 104px; }
  .string-note { font-size: 21px; }
  .meter { height: 44px; margin-top: 12px; }
  .feedback { min-height: 34px; }
  .start-area { padding-top: 8px; gap: 8px; }
}
@media (max-width: 359px), (max-width: 760px) and (max-height: 700px) {
  .shell { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .brand { font-size: 26px; }
  .toolbar { padding: 4px 0 8px; }
  .mode-control button { min-width: 44px; padding-inline: 6px; }
  .workspace { --peg: 48px; column-gap: 12px; row-gap: 8px; }
  .pitch-display { font-size: 84px; }
  .string-note { font-size: 20px; }
  .meter { height: 42px; }
  .feedback { min-height: 30px; }
  #guidance { font-size: 16px; }
  .session-tools { gap: 12px; }
  .start-button { min-height: 44px; padding-block: 10px; }
  .start-caption p { display: none; }
}
@media (max-width: 559px) and (max-height: 560px) {
  .shell { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .header { min-height: 44px; }
  .workspace { --peg: 44px; }
  .string-note { font-size: 18px; }
}
@media (min-width: 560px) and (max-width: 960px) and (max-height: 500px) {
  .shell { width: min(960px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .45fr); grid-template-rows: auto 1fr; gap: 8px 32px; padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .header { grid-column: 1; grid-row: 1; min-height: 44px; gap: 8px; }
  .brand { font-size: 24px; gap: 10px; }
  .toolbar { grid-column: 2; grid-row: 1; flex-wrap: nowrap; padding: 0; gap: 8px; }
  .preset-caption { display: none; }
  .preset-picker { max-width: 50%; }
  .preset-picker summary { min-height: 44px; gap: 8px; }
  .preset-picker summary svg { width: 16px; }
  #preset-label { font-size: 14px; }
  .mode-control { gap: 8px; }
  .mode-control button { min-width: 44px; min-height: 44px; padding: 8px 6px; font-size: 12px; }
  .notice { grid-column: 1 / -1; }
  .workspace { grid-column: 1; grid-row: 2; --peg: 44px; column-gap: 12px; row-gap: 8px; }
  .pitch-core { grid-row: 1 / 4; }
  .pitch-display { font-size: 64px; }
  .string-note { font-size: 18px; }
  .meter { height: 40px; margin-top: 12px; }
  .meter-labels { top: 30px; }
  .meter-ticks i { height: 8px; }
  .meter-ticks .major { height: 16px; }
  .center-line, .tune-zone { height: 22px; }
  .needle { height: 30px; }
  .feedback { min-height: 22px; }
  #guidance { font-size: 14px; line-height: 1.2; }
  .hold-track { margin-top: 4px; }
  .start-panel { grid-column: 2; grid-row: 2; align-self: center; min-width: 0; }
  .start-area { padding: 0; gap: 12px; }
  .start-caption p { display: none; }
  .start-button { width: 100%; }
  .footer-meta { row-gap: 4px; }
  .preset-panel { left: auto; right: 0; max-height: calc(100dvh - 76px); max-width: calc(100vw - 40px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  body { background: var(--bg); }
  .string-row { border-color: var(--control-line); }
  .string-row.selected { outline: 2px solid var(--accent); outline-offset: 4px; }
}
@media (forced-colors: active) {
  .string-row { background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .string-row.selected { outline: 2px solid Highlight; }
}