/* Compact tuner workspace: the meter stays beside instrument and settings. */
.wrap{max-width:1080px;padding:58px 16px 12px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:start}
.wrap>.topbar{grid-column:1/-1;margin:0 0 4px;min-height:38px}
.wrap>.card{margin:0;min-width:0}
.wrap>.card:nth-child(2){grid-column:1;grid-row:2/span 2;align-self:stretch}
.wrap>.card:nth-child(3){grid-column:2;grid-row:2}
.wrap>.card:nth-child(4){grid-column:2;grid-row:3}
.meter{padding:12px 10px;justify-content:center;height:100%}
.gauge{width:min(300px,100%)}
.bar,.lvl{max-width:100%}
.readout{min-height:100px}
.note{font-size:4rem}
.meter>div:has(>#toggle){margin-top:12px!important}
.card-h{padding:9px 12px}.card-b{padding:12px}
.strings{gap:6px!important;margin-top:8px!important}
.hint{font-size:12px;line-height:1.5;margin:8px 0}
.row{gap:7px;margin-bottom:8px}
.sel{min-height:34px;padding:6px 8px;font-size:14px}
.chip{padding:6px 9px;font-size:12px}
.wrap details>summary{padding:10px 12px}
body>footer{margin:6px 0!important;padding:4px!important;font-size:10px!important;line-height:14px!important}
@media(max-width:649px){.wrap{grid-template-columns:1fr;padding:58px 10px 8px!important;gap:8px}.wrap>.card:nth-child(n){grid-column:1;grid-row:auto}.gauge{width:230px}.readout{min-height:83px}.note{font-size:3.3rem}.cents{font-size:14px;margin-top:3px}.hz{font-size:11px}.meter{padding:6px 10px}.meter .lvl{margin-top:6px}.meter .bar{margin-top:5px}.meter>div:has(>#toggle){margin-top:8px!important}.btn{padding:9px 20px;font-size:14px}.card-h{padding:7px 10px}.card-b{padding:8px 10px}.topbar h1{font-size:18px}.topbar h1 small{font-size:9px}.topbar .sel{font-size:12px;padding:4px}.hint{font-size:11px;margin:6px 0}}
@media(orientation:landscape) and (max-height:600px){.wrap{padding-top:48px;gap:8px;max-width:1000px}.wrap>.topbar{min-height:30px}.topbar h1{font-size:18px}.topbar h1 small{display:none}.gauge{width:190px}.readout{min-height:65px}.note{font-size:2.7rem}.cents{font-size:12px;margin-top:2px;min-height:16px}.hz{font-size:10px}.meter{padding:4px 8px}.meter .bar{margin-top:4px;height:7px}.meter .lvl{margin-top:5px}.meter>div:has(>#toggle){margin-top:7px!important}.btn{padding:7px 16px;font-size:13px}.card-h{padding:6px 10px}.card-b{padding:8px}.hint{font-size:10px;margin:5px 0}.wrap details>summary{padding:8px 10px}.sel{min-height:29px;padding:4px 6px;font-size:12px}.chip{padding:4px 7px;font-size:11px}}
@media(min-width:1000px){.wrap>.card:nth-child(4) .card-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wrap>.card:nth-child(4) .card-b>.row{margin:0;min-width:0;flex-wrap:wrap;gap:5px}.wrap>.card:nth-child(4) .card-b>.row:first-child,.wrap>.card:nth-child(4) .card-b>.hint{grid-column:1/-1}.wrap>.card:nth-child(4) .sel{max-width:100%;min-width:0}.wrap>.card:nth-child(4) .chip{font-size:11px;padding:4px 6px}}
.tuner-side-panels{grid-column:2;grid-row:2/span 2;min-width:0;display:flex;flex-direction:column;gap:8px}
.tuner-panel-tabs{display:flex;gap:7px;padding:4px;border:1px solid var(--border-hover);border-radius:12px;background:var(--panel)}
.tuner-panel-tabs button{flex:1;padding:8px 6px;min-height:38px;border:1px solid var(--border);border-radius:8px;background:var(--panel-alt);color:var(--text-2);font:700 13px/1.3 system-ui;cursor:pointer}
.tuner-panel-tabs button[aria-selected=true]{background:#7961ad;color:white;border-color:#bda5e7}
.tuner-panel-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tuner-side-panels>.card{margin:0!important;min-height:300px}
.tuner-side-panels>[hidden]{display:none!important}
.tuner-side-panels #tuner-panel-1>details>summary{display:none}
.tuner-side-panels #tuner-panel-1 .card-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tuner-side-panels #tuner-panel-1 .card-b>.row{margin:0;min-width:0;flex-wrap:wrap;gap:5px}
.tuner-side-panels #tuner-panel-1 .card-b>.row:first-child,.tuner-side-panels #tuner-panel-1 .hint{grid-column:1/-1}
.tuner-side-panels #tuner-panel-1 .sel{min-width:0;max-width:100%}
.tuner-side-panels #tuner-panel-1 .chip{font-size:11px;padding:4px 6px}
.tuner-fullscreen{position:fixed;top:12px;left:70px;z-index:10001;min-width:146px;min-height:54px;padding:10px 12px;border:2px solid #63c9ef;border-radius:13px;background:#17415e;color:#f1fbff;font:800 16px/1.25 system-ui;box-shadow:0 0 0 4px #38bdf821,0 4px 12px #0003;cursor:pointer;white-space:nowrap}
.tuner-fullscreen:focus-visible{outline:3px solid #b3efff;outline-offset:4px}
.wrap{padding-top:76px}
html.tuner-fullscreen-mode{position:fixed;inset:0;overflow:auto;background:var(--bg-page);z-index:9999}
@media(max-width:649px){.wrap{padding-top:76px!important}.tuner-side-panels{grid-column:1;grid-row:auto}.tuner-side-panels>.card{min-height:0}.tuner-panel-tabs button{padding:6px;font-size:12px;min-height:32px}.tuner-side-panels #tuner-panel-1 .card-b{gap:5px;padding:8px}.tuner-side-panels #tuner-panel-1 .lbl{font-size:11px}.tuner-side-panels #tuner-panel-1 .row{gap:3px}.tuner-side-panels #tuner-panel-1 .sel{font-size:11px;min-height:26px}.tuner-side-panels #tuner-panel-1 .hint{font-size:10px}}
@media(orientation:landscape) and (max-height:600px){.wrap{padding-top:68px}.tuner-side-panels{gap:5px}.tuner-side-panels>.card{min-height:0}.tuner-panel-tabs button{padding:4px;font-size:11px;min-height:27px}.tuner-side-panels #tuner-panel-1 .card-b{padding:6px;gap:4px}.tuner-side-panels #tuner-panel-1 .lbl{font-size:10px}.tuner-side-panels #tuner-panel-1 .sel,.tuner-side-panels #tuner-panel-1 .num{font-size:11px;min-height:24px;padding:2px 4px}.tuner-side-panels #tuner-panel-1 .hint{font-size:9px;line-height:1.3;margin:3px 0}.tuner-side-panels #tuner-panel-1 .chip{font-size:10px;padding:3px 5px}}
@media(orientation:landscape) and (max-height:600px){.gauge{width:160px}.readout{min-height:54px}.tuner-side-panels #tuner-panel-1 .card-b{gap:3px;padding:5px}.tuner-side-panels #tuner-panel-1 .hint{font-size:8px;line-height:1.2}.tuner-side-panels #tuner-panel-1 .chip{padding:2px 4px;font-size:9px}.tuner-side-panels #tuner-panel-1 .row{gap:3px}.tuner-side-panels #tuner-panel-1 .num{height:24px}}
/* Equal frames, with a calm backdrop behind the tuning meter. */
.wrap{align-items:stretch}
.wrap>.card:nth-child(2){position:relative;background:radial-gradient(ellipse at 25% 15%,#36c4d52b,transparent 60%),radial-gradient(ellipse at 85% 90%,#8b73cb20,transparent 65%),linear-gradient(145deg,var(--panel),var(--panel-alt));border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}
.wrap>.card:nth-child(2)::before{content:'';position:absolute;inset:10px;border:1px solid #67d8e514;border-radius:13px;pointer-events:none}
.tuner-side-panels{align-self:stretch;min-height:0}
.tuner-side-panels>.card{flex:1;min-height:0!important}
@media(min-width:650px){.wrap>.card:nth-child(2){grid-row:2!important}.tuner-side-panels{grid-row:2!important}.wrap>.card:nth-child(2) .meter{height:100%}.tuner-side-panels>.card{min-height:340px!important}.wrap>.card:nth-child(2){min-height:394px}}
@media(orientation:landscape) and (max-height:600px){.tuner-side-panels>.card{min-height:0!important}.wrap>.card:nth-child(2){min-height:0}}
:root[data-theme=light] .wrap>.card:nth-child(2){background:radial-gradient(ellipse at 25% 15%,#36c4d51a,transparent 60%),radial-gradient(ellipse at 85% 90%,#8b73cb14,transparent 65%),linear-gradient(145deg,var(--panel),var(--panel-alt))}
/* Frequency increases toward the physical right in both languages. */
#a4rng{direction:ltr}
.topbar h1{color:#77dce9;text-shadow:0 1px 8px #38bdf820}
.topbar h1 small{color:#a6b6d1}
:root[data-theme=light] .topbar h1{color:#13677c;text-shadow:none}
:root[data-theme=light] .topbar h1 small{color:#526884}
.tuner-side-panels #tuner-panel-1 .tuner-input-source,.tuner-side-panels #tuner-panel-1 .tuner-input-hint{grid-column:1/-1}
.tuner-input-source{align-items:center}
.tuner-input-source #micSel{min-width:100px!important}
.tuner-input-status{flex:1 0 100%;font-size:11px;color:var(--text-3)}
.tuner-input-status:empty{display:none}
.tuner-input-hint{margin:0;font-size:11px;line-height:1.45;color:var(--text-3)}
@media(orientation:landscape) and (max-height:600px){.tuner-input-hint{font-size:9px;line-height:1.3}}
.tuner-input-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.tuner-input-list[hidden]{display:none}
.tuner-input-list .chip{white-space:normal;overflow-wrap:anywhere;text-align:start;line-height:1.4}
.tuner-input-list .chip[aria-pressed=true]{background:#375d80;border-color:#72b6db;color:white}
.tuner-input-dialog{width:min(620px,calc(100vw - 28px));max-height:85dvh;overflow:auto;padding:20px;border:1px solid var(--border-hover);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 15px 60px #0008}
.tuner-input-dialog::backdrop{background:#030712b8}
.tuner-input-dialog h2{font-size:20px;margin:0 0 16px;color:var(--accent)}
.tuner-input-dialog>.tuner-input-list{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
.tuner-input-dialog .tuner-input-list .chip{padding:12px;font-size:14px}
/* Fullscreen is a dedicated, large tuning display. */
html:is(:fullscreen,.tuner-fullscreen-mode) .tuner-side-panels,html:is(:fullscreen,.tuner-fullscreen-mode) body>footer,html:is(:fullscreen,.tuner-fullscreen-mode) #spec-btn,html:is(:fullscreen,.tuner-fullscreen-mode) #mms-home-fab{display:none!important}
html:is(:fullscreen,.tuner-fullscreen-mode) .wrap{display:flex;flex-direction:column;width:100%;max-width:none;height:100dvh;padding:80px 24px 16px!important;gap:0}
html:is(:fullscreen,.tuner-fullscreen-mode) .topbar{min-height:0;height:0;margin:0;flex:none}
html:is(:fullscreen,.tuner-fullscreen-mode) .topbar>h1,html:is(:fullscreen,.tuner-fullscreen-mode) .topbar>#lang{display:none}
html:is(:fullscreen,.tuner-fullscreen-mode) .wrap>.card{flex:1;width:100%;min-height:0!important;grid-row:auto!important}
html:is(:fullscreen,.tuner-fullscreen-mode) .meter{height:100%;padding:12px;justify-content:center;gap:8px}
html:is(:fullscreen,.tuner-fullscreen-mode) .gauge{width:min(760px,90vw,calc((100dvh - 340px)*1.7))}
html:is(:fullscreen,.tuner-fullscreen-mode) .readout{min-height:130px}
html:is(:fullscreen,.tuner-fullscreen-mode) .note{font-size:clamp(72px,12dvh,130px)}
html:is(:fullscreen,.tuner-fullscreen-mode) .note .oct{font-size:32px}
html:is(:fullscreen,.tuner-fullscreen-mode) .cents{font-size:24px}
html:is(:fullscreen,.tuner-fullscreen-mode) .hz{font-size:16px}
html:is(:fullscreen,.tuner-fullscreen-mode) .bar,html:is(:fullscreen,.tuner-fullscreen-mode) .lvl{width:min(600px,90vw)}
@media(max-height:500px){html:is(:fullscreen,.tuner-fullscreen-mode) .wrap{padding:70px 12px 8px!important}html:is(:fullscreen,.tuner-fullscreen-mode) .meter{gap:3px;padding:5px}html:is(:fullscreen,.tuner-fullscreen-mode) .gauge{width:min(380px,calc((100dvh - 230px)*1.7))}html:is(:fullscreen,.tuner-fullscreen-mode) .readout{min-height:74px}html:is(:fullscreen,.tuner-fullscreen-mode) .note{font-size:52px}html:is(:fullscreen,.tuner-fullscreen-mode) .cents{font-size:14px}html:is(:fullscreen,.tuner-fullscreen-mode) .hz{font-size:11px}html:is(:fullscreen,.tuner-fullscreen-mode) .bar,html:is(:fullscreen,.tuner-fullscreen-mode) .lvl{margin-top:3px}}
/* A smaller fullscreen dial keeps the application title visible. */
html:is(:fullscreen,.tuner-fullscreen-mode) .topbar{height:42px;min-height:42px;width:100%;margin-bottom:8px}
html:is(:fullscreen,.tuner-fullscreen-mode) .topbar>h1{display:block;font-size:24px}
html:is(:fullscreen,.tuner-fullscreen-mode) .gauge{width:min(570px,84vw,calc((100dvh - 390px)*1.7))}
html:is(:fullscreen,.tuner-fullscreen-mode) .note{font-size:clamp(64px,10dvh,100px)}
html:is(:fullscreen,.tuner-fullscreen-mode) .readout{min-height:110px}
@media(max-height:500px){html:is(:fullscreen,.tuner-fullscreen-mode) .topbar{height:25px;min-height:25px;margin-bottom:3px}html:is(:fullscreen,.tuner-fullscreen-mode) .topbar>h1{font-size:18px}html:is(:fullscreen,.tuner-fullscreen-mode) .gauge{width:min(300px,calc((100dvh - 260px)*1.7))}html:is(:fullscreen,.tuner-fullscreen-mode) .note{font-size:44px}html:is(:fullscreen,.tuner-fullscreen-mode) .readout{min-height:65px}}

/* Studio identity keeps its physical order in either language. */
.tuner-studio-brand{position:fixed;top:13px;right:65px;z-index:1000;display:flex;align-items:center;gap:8px;direction:ltr;min-height:38px;white-space:nowrap;font:800 17px/1.2 system-ui,sans-serif;color:var(--text,#eef4fc)}
.tuner-studio-brand img{width:32px;height:32px;object-fit:contain;flex:none}
@media(max-width:649px){.tuner-studio-brand{font-size:14px;gap:6px}.tuner-studio-brand img{width:28px;height:28px}}