/* Mobile layout v2: layout follows the available width, including iframe width. */
html{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body,.page,.workspace,.metronome,.side-panel{min-width:0}
input,select{min-width:0}
.settings-drawer{border:0;margin:0;padding:0}
.settings-drawer>summary{display:none}
.focus-mode .settings-drawer{display:none}
.embedded .intro,.embedded .tips,.embedded footer{display:none}
.embedded .page{padding-top:18px}
.embedded.focus-mode .page{min-height:0}
.embedded dialog[open]{position:fixed;top:var(--embed-dialog-top,50%);left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);max-height:calc(var(--embed-visible-height,100dvh) - 24px)}
@media(max-width:900px){
 .workspace{grid-template-columns:minmax(0,1fr)}
 .side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
 .training{grid-row:span 2}
 .main-settings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .site-head{min-height:60px;padding:8px max(12px,env(safe-area-inset-left));gap:12px}
 .brand{gap:9px}.brand-mark{width:36px;height:36px}.brand strong{font-size:18px}
 .head-product,.head-rule{display:none}.head-actions{gap:6px}
 .head-actions .icon-button{min-width:44px;min-height:44px}
 .page{padding:12px max(10px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom))}
 .intro{margin:0 2px 12px}.intro .eyebrow,.intro-note{display:none}
 .intro h1{font-size:30px;line-height:1.15;letter-spacing:-.045em;margin:0 0 4px}
 .intro .subtitle{font-size:14px;line-height:1.45;max-width:none}
 .workspace{gap:14px;display:grid;grid-template-columns:minmax(0,1fr)}
 .card{border-radius:17px}.metronome{padding:10px 14px 0;overflow:visible}
 .card-top{gap:8px;min-height:38px}.card-top .eyebrow{font-size:11px;letter-spacing:.08em}
 .card-top .text-button{font-size:13px;min-height:44px;padding:5px 3px}
 .tempo{gap:14px;margin:2px 0 5px;justify-content:space-between}
 .tempo-number{max-width:225px;flex:1}.tempo-number input{font-size:clamp(72px,22vw,96px);height:1.08em;letter-spacing:-.06em}
 .round-button{height:48px;width:48px;min-width:48px;font-size:28px}
 .tempo-caption{font-size:13px;gap:7px;line-height:1.5;margin-top:0}
 #beatUnit{font-size:24px}.tempo-slider{gap:10px;font-size:12px}
 .tempo-slider input{height:36px;min-height:36px;margin:2px 0}
 .quick-tempos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:3px 0 10px}
 .quick-tempos button{min-width:0;min-height:44px;font-size:14px;padding:5px 0}
 .beat-display{margin:0 0 12px;padding-top:10px}.beats{gap:7px;min-height:48px}
 .beat,.beats:has(.beat:nth-child(8)) .beat{width:48px;height:48px;min-height:48px;font-size:18px;border-radius:11px}
 .beats:has(.beat:nth-child(8)){gap:7px}
 .beat-legend{font-size:12px;gap:7px 12px;margin-top:8px;line-height:1.4}
 .legend-hint{display:none!important}.dot{width:8px;height:8px}
 .transport{grid-template-columns:minmax(0,1fr) minmax(90px,.48fr);gap:9px}
 .play-button{min-height:58px;font-size:19px;gap:10px}.play-button kbd{display:none}
 .tap-button{font-size:17px;min-height:58px}.tap-button span{font-size:11px;line-height:1.4}
 .play-status{font-size:12px;line-height:1.5;margin:9px 0 7px;gap:10px;min-height:24px}
 #status{min-width:0;overflow-wrap:anywhere}#time{flex:none;font-size:12px}
 .volume-field{gap:8px;margin:5px 0 10px;flex-wrap:nowrap;min-height:44px}
 .volume-field .icon-button{width:44px;min-width:44px;min-height:44px;font-size:15px;border:1px solid var(--line)}
 .volume-field label{font-size:13px}.volume-field input{min-width:25px;min-height:44px;margin:0}
 .volume-field output{font-size:13px;min-width:42px}
 .settings-drawer{border-top:1px solid var(--line);padding:0}
 .settings-drawer>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;min-height:59px;padding:10px 0;list-style:none;font-size:14px;font-weight:750}
 .settings-drawer>summary::-webkit-details-marker{display:none}
 .settings-drawer>summary>span{display:flex;flex-direction:column;gap:3px;min-width:0}
 .settings-drawer>summary small{font-size:12px;color:var(--muted);font-weight:400}
 .settings-drawer>summary::after{content:'+';color:var(--cyan);font-size:24px;flex:none;padding:0 4px}
 .settings-drawer[open]>summary::after{content:'−'}
 .settings-content{padding:2px 0 14px}
 .main-settings{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .field{min-width:0}.field label,.section-label{font-size:14px;line-height:1.5}
 input[type=number]:not(#bpm),input[type=text],input:not([type]),select,.field select,.field-grid input,.field-grid select{font-size:16px!important;min-height:48px;padding:9px 10px;border-radius:10px}
 .custom-meter{align-items:end;gap:10px}.custom-meter label{min-width:0;font-size:14px}
 .check-line{font-size:14px;line-height:1.6;gap:9px}.check-line input{width:22px;height:22px}
 .subdivision{margin-top:18px}.section-label{gap:6px;flex-wrap:wrap;margin-bottom:12px}
 .sub-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .sub-options button{min-height:83px;padding:8px 4px;gap:4px}
 .sub-options button>span:last-child{font-size:13px;line-height:1.5}
 .note-icon{width:58px;height:36px}
 .sub-extras{margin-top:17px}.sub-extras label,.tool-content label{font-size:14px;line-height:1.6}
 .sub-extras input[type=range],.tool-content input[type=range]{min-height:44px}
 .hint{font-size:13px;line-height:1.65;margin-top:11px}
 .metronome-bottom{margin:0 -14px;padding:7px 14px;gap:8px;flex-wrap:wrap;justify-content:flex-end}
 .metronome-bottom>span{display:none}.metronome-bottom .text-button{font-size:13px;min-height:44px}
 .side-panel{grid-template-columns:minmax(0,1fr);gap:14px}.training{grid-row:auto;padding:18px 16px 0}
 .section-heading{gap:10px;margin-bottom:10px}.section-heading .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.07em}
 .section-heading h2{font-size:23px}.tool summary{gap:10px;min-height:80px;padding:14px 0}
 .tool summary strong{font-size:16px;line-height:1.4}.tool summary small{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
 .tool-icon{width:36px;height:42px}.tool-badge{font-size:12px;padding:3px 6px}
 .tool summary:after{font-size:20px}.tool-content{padding-bottom:18px}
 .switch-line{font-size:14px!important;min-height:44px}.switch-line input{width:42px;height:26px}
 .switch-line input:before{height:18px;width:18px}.switch-line input:checked:before{left:19px}
 .field-grid{gap:8px}.field-grid label{font-size:13px}.field-grid small{font-size:12px}
 .training-footer{margin-left:-16px;margin-right:-16px;font-size:12px;line-height:1.5;padding:13px 10px}
 .presets{padding:18px 16px}.presets .section-heading{flex-direction:row;align-items:center}
 .presets h2{font-size:22px}.small-button{font-size:14px;min-height:44px;white-space:nowrap}
 .preset-load{min-height:66px;padding:11px 12px}.preset-load strong{font-size:15px;line-height:1.5}.preset-load small{font-size:13px;line-height:1.5}
 .preset-delete{min-width:44px;min-height:44px;font-size:23px}
 .export-card{padding:3px 6px;align-items:center;gap:11px}.export-card>div{min-width:0}.export-card strong{font-size:15px;line-height:1.5}.export-card p{font-size:13px;line-height:1.5}.export-card .icon-button{width:44px;min-width:44px;min-height:44px}
 .tips{margin-top:28px}.tips-heading h2{font-size:25px}.tips .eyebrow{font-size:11px}
 .tip-grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}.tip-grid article{padding:15px 0 0 34px}
 .tip-grid h3{font-size:17px}.tip-grid p{font-size:15px;line-height:1.7}.tip-number{font-size:13px}
 .tip-grid .text-button{font-size:14px;min-height:44px}.help-details{margin-top:20px;padding:14px 0}.help-details summary{font-size:15px;line-height:1.6;min-height:44px}
 .help-grid{grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 0 0}.help-grid h3{font-size:16px}.help-grid p{font-size:15px;line-height:1.75}
 footer{padding:22px 0 12px;display:block}.footer-brand{font-size:17px}.footer-brand span{display:block;font-size:13px;margin:4px 0}
 footer>div{justify-content:flex-start;gap:5px 16px;flex-wrap:wrap;margin-top:10px}footer>div a,footer .text-button{font-size:13px;min-height:44px;display:flex;align-items:center}
 dialog{padding:20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;border-radius:16px}
 .dialog-heading h2{font-size:21px}.dialog-heading .icon-button{min-width:44px;min-height:44px}
 dialog p,dialog label{font-size:15px;line-height:1.65}.primary{font-size:16px;min-height:52px}
 .toast{bottom:max(12px,env(safe-area-inset-bottom));font-size:14px;padding:12px 16px;line-height:1.6}
 .focus-mode .page{min-height:100svh;padding:10px max(10px,env(safe-area-inset-left));align-items:center}
 .focus-mode .metronome{padding:0;background:none}.focus-mode .tempo{gap:12px;margin:12px 0}
 .focus-mode .tempo-number{max-width:250px}.focus-mode .tempo-number input{font-size:clamp(80px,25vw,120px);height:1.1em}
 .focus-mode .beat-display{margin:15px 0}.focus-mode .beat{width:48px;height:48px;font-size:20px}
 .focus-mode .quick-tempos{margin:8px 0 12px}.focus-mode .play-status{margin:10px 0}
 .embedded .page{padding-top:10px}
}
@media(max-width:370px){
 .intro .subtitle{display:none}
 .site-head{padding-left:10px;padding-right:10px}.brand strong{font-size:17px}
 .main-settings{grid-template-columns:minmax(0,1fr)}
 .volume-field{gap:6px}.volume-field label{font-size:12px}
 .tool summary{gap:7px}.tool-icon{width:30px}.tool summary small{font-size:12px}
 .tool-badge{font-size:11px}.tool summary:after{width:10px}
 .presets .section-heading{flex-wrap:wrap}.sub-options{gap:7px}
 .tempo{gap:8px}.round-button{width:46px;min-width:46px;height:46px}
}
@media(max-width:1000px) and (max-height:580px) and (orientation:landscape){
 .focus-mode .page{min-height:100svh;padding:8px 18px}
 .focus-mode .metronome{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;align-items:center;padding:0}
 .focus-mode .card-top{grid-column:1/-1;min-height:32px}.focus-mode .card-top .text-button{min-height:32px}.focus-mode .tempo{grid-row:2/4;margin:0}
 .focus-mode .tempo-number input{font-size:82px}.focus-mode .tempo-slider{width:100%}
 .focus-mode .beat-display{grid-column:1/-1;margin:3px 0;padding-top:6px}.focus-mode .transport{grid-column:1/-1;width:100%}
 .focus-mode .beats{min-height:44px;gap:8px}.focus-mode .beat,.focus-mode .beats:has(.beat:nth-child(8)) .beat{width:44px;height:44px;min-height:44px;font-size:18px}
 .focus-mode .beat-legend{font-size:11px;margin-top:5px}.focus-mode .legend-hint{display:none!important}
 .focus-mode .play-button,.focus-mode .tap-button{min-height:48px}
 .focus-mode .play-status{grid-column:1/-1;width:100%;margin:0}
}