/* A/B uses the original moving SVG geometry; labels and exact results remain readable outside it. */
.motion-main .comparison-focus-note{font-size:13px;line-height:1.6;margin:8px 0 12px;color:var(--cl-muted)}
.motion-main #science-scenes.compact-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.motion-main .compact-compare .science-lane{min-width:0;margin:0;padding:10px;border:1px solid var(--cl-line);border-radius:8px;background:var(--cl-surface,#fff)}
.motion-main .compact-compare .lane-header{margin:0;font-size:14px;font-weight:700;color:var(--cl-ink)}
.motion-main .compact-compare .science-diagram{display:block;width:100%;height:190px;min-height:0;max-height:none;margin:0}
.motion-main .compact-compare .science-diagram text{visibility:hidden}
.motion-main .compact-compare .science-metrics,.motion-main .compact-compare .triangle-note{display:none}
.motion-main .comparison-result{margin:0;font-size:13px;line-height:1.5;font-weight:600;color:var(--cl-ink)}
.motion-main .lesson-timeline{display:flex;align-items:center;gap:12px;flex-basis:100%;min-width:0}
.motion-main .lesson-timeline>label:first-child{display:flex;align-items:center;gap:7px;flex:1;min-width:0;font-size:12px;white-space:nowrap;margin:0}
.motion-main .lesson-timeline input[type=range]{width:100%;min-width:30px;min-height:24px;margin:0;accent-color:#147661}
.motion-main .lesson-repeat{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;margin:0}
.motion-main .lesson-repeat input{width:16px;height:16px;min-height:0;accent-color:#147661}
#comparison-layout[hidden],.comparison-focus-note[hidden]{display:none!important}
@media(max-width:620px){
 .motion-main #science-scenes.compact-compare{grid-template-columns:1fr;gap:8px}
 .motion-main .compact-compare .science-lane{padding:7px 9px}
 .motion-main .compact-compare .science-diagram{height:145px}
 .motion-main .visible-playbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px!important;padding:6px!important}
 .motion-main .visible-playbar>button{font-size:12px;min-height:34px!important;padding:5px 8px!important;flex:0 1 auto}
 .motion-main .visible-playbar .input-flow-edit{width:auto!important;flex:0 1 auto!important;margin:0!important}
 .motion-main .visible-playbar>label{display:flex;align-items:center;gap:4px;font-size:11px!important;margin:0}
 .motion-main .visible-playbar>label select{width:100px;min-height:32px;height:32px;padding:3px;font-size:11px}
 #science-tool[data-kind=hardness] .vickers-fit-view{display:none}
 .motion-main .visible-playbar:has(#lesson-progress)>label{display:none}
 .motion-main .visible-playbar:has(#lesson-progress) #science-play{max-width:150px}
 .motion-main #science-comparison{font-size:12px;margin:7px 0}
 .motion-main .comparison-focus-note{font-size:12px;margin:7px 0}
 .motion-main .lesson-timeline{gap:7px}
 .motion-main .lesson-timeline>label:first-child{font-size:11px}
}
@media(max-height:600px) and (min-width:480px) and (orientation:landscape){
 .motion-main #science-scenes.compact-compare{gap:8px}
 .motion-main .compact-compare .science-diagram{height:110px}
 .motion-main .visible-playbar{gap:5px;padding:5px}
}
.motion-main .compact-compare .science-diagram{height:190px!important}
.motion-main .stage:has(#lesson-progress) .timebar{display:none}
@media(max-width:620px){.motion-main .compact-compare .science-diagram{height:145px!important}}
@media(max-height:600px) and (min-width:480px) and (orientation:landscape){.motion-main .compact-compare .science-diagram{height:110px!important}}
.motion-main .lesson-timeline>#comparison-layout{font-size:11px;white-space:nowrap;min-height:28px;padding:3px 6px}
.comparison-views{display:flex;font-size:11px;line-height:1.6;color:var(--cl-muted);text-align:center}.comparison-views span{flex:1}
@media(max-width:360px){.motion-main .compact-compare .science-diagram{height:125px!important}}
/* Keep the full comparison visible on a short landscape screen. */
@media(max-height:600px) and (min-width:480px) and (orientation:landscape){
 .motion-main .visible-playbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px!important;padding:5px!important}
 .motion-main .visible-playbar>button{font-size:12px;min-height:32px!important;padding:4px 8px!important;flex:0 1 auto}
 .motion-main .visible-playbar .input-flow-edit{width:auto!important;flex:0 1 auto!important;margin:0!important}
 .motion-main .visible-playbar>label{display:flex;align-items:center;gap:4px;font-size:11px;margin:0}
 .motion-main .visible-playbar>label select{width:100px;min-height:30px;height:30px;padding:3px;font-size:11px}
 .motion-main .visible-playbar:has(#lesson-progress)>label,#science-tool[data-kind=hardness] .vickers-fit-view{display:none}
 .motion-main .lesson-timeline{gap:8px}
 .motion-main .lesson-timeline>label:first-child{font-size:11px}
 .motion-main .compact-compare .science-lane{padding:5px 8px}
 .motion-main .compact-compare .science-diagram{height:80px!important}
 .motion-main .compact-compare .lane-header,.motion-main .comparison-result{font-size:12px;line-height:1.4}
 .motion-main .comparison-views{font-size:10px;line-height:1.3}
}
.motion-main .lesson-timeline>label:first-child{flex-direction:row!important;flex-wrap:nowrap!important}
.motion-main .lesson-timeline input[type=range]{box-sizing:border-box;height:26px!important;min-height:26px!important;padding:0!important}
@media(max-height:600px) and (min-width:480px) and (orientation:landscape){
 .motion-main #science-scenes:not(.compact-compare) .science-diagram,.motion-main .force-scale-picture{height:var(--scene-available-height,130px)!important;max-height:none!important}
 .motion-main #size-scene>svg{height:calc(100svh - var(--tool-header-height,110px) - 125px)!important;max-height:220px!important}
}
@media(max-width:620px){
 .motion-main .visible-playbar>button{min-height:44px!important}
 .motion-main .lesson-timeline>#comparison-layout,.motion-main .lesson-repeat{min-height:36px!important}
 .motion-main .lesson-timeline input[type=range]{height:36px!important;min-height:36px!important}
 .pour-tool .pour-player .pour-controls button,.bounce-controls button{min-height:44px!important}
}
@media(max-height:600px) and (min-width:480px) and (orientation:landscape){
 .motion-main .visible-playbar>button{min-height:40px!important}
 .motion-main .lesson-timeline>#comparison-layout,.motion-main .lesson-repeat{min-height:32px!important}
 .motion-main .lesson-timeline input[type=range]{height:32px!important;min-height:32px!important}
}
.motion-main{--scene-available-height:clamp(60px,calc(100svh - var(--tool-header-height,110px) - var(--lesson-bar-height,90px) - 35px),380px)}
@media(max-height:600px) and (min-width:480px) and (orientation:landscape){
 body.motion-site>header{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px!important;padding:5px 10px!important;min-height:0!important;height:auto!important}
 body.motion-site>header .tool-brand-navigation{display:flex;flex:0 0 auto;width:auto!important;min-width:0;gap:4px!important}
 body.motion-site>header .tool-wordmark{width:100px!important;height:30px!important;max-width:none!important}
 body.motion-site>header .company-home-link{width:auto!important;min-width:0!important;min-height:32px!important;padding:3px 6px!important;font-size:11px!important}
 body.motion-site>header .tool-shortcuts{display:flex!important;flex:1 1 auto;flex-wrap:nowrap!important;order:0!important;width:auto!important;min-width:0;gap:2px!important}
 body.motion-site>header .tool-shortcuts a{flex:1 1 0;min-width:0!important;min-height:32px!important;padding:3px!important;gap:0;font-size:11px!important;white-space:nowrap}
 body.motion-site>header .tool-shortcuts a svg,.motion-site>header .tool-label-full{display:none!important}
 body.motion-site>header .tool-label-compact{display:inline!important}
 body.motion-site>header .tool-preferences-menu{flex:0 0 30px;order:0!important;margin:0!important}
 body.motion-site>header .tool-preferences-menu>summary{width:30px!important;height:30px!important;min-height:30px!important;padding:0!important}
 body.motion-site>header .my-tools-open{flex:0 0 30px;width:30px!important;height:30px!important;min-height:30px!important;min-width:30px!important;padding:0!important;margin:0!important}
 .motion-main #science-scenes.compact-compare{grid-template-columns:repeat(2,minmax(0,1fr))}
 .motion-main .compact-compare .science-diagram{height:clamp(70px,calc(100svh - var(--tool-header-height,110px) - var(--lesson-bar-height,90px) - 100px),140px)!important}
}