@media(max-width:700px){
 .tutorial-home .device-card[href="#guide/desktop"]{display:none}
 .tutorial-home{padding-top:20px}.tutorial-home .home-layout{gap:20px}.tutorial-home .home-caption{display:none}.tutorial-home h1{font-size:28px;margin-bottom:10px}.tutorial-home .lead{font-size:14px;line-height:1.8}.tutorial-home .device-card{min-height:132px}.tutorial-home .device-card h3{font-size:19px}.tutorial-home .software-entry{font-size:12px}
 .singbox-mobile-view>.wrap{padding-inline:14px}.singbox-mobile-view .topbar{height:52px;gap:10px}.singbox-mobile-view .brand{font-size:15px;gap:7px;white-space:nowrap}.singbox-mobile-view .brandmark{width:28px;height:28px}.singbox-mobile-view .nav{gap:14px;font-size:11px}.singbox-mobile-view .nav a{white-space:nowrap}
 .sm-page{height:auto;min-height:calc(100dvh - 52px);padding:10px 0 calc(24px + env(safe-area-inset-bottom));gap:10px;display:flex;flex-direction:column}
 .sm-toolbar{display:flex;align-items:center;gap:9px;min-height:40px}.sm-toolbar>a{display:grid;place-items:center;width:25px;height:36px;color:#5d7291}.sm-toolbar>a svg{rotate:180deg}.sm-toolbar h1{font-size:18px;line-height:1.5;margin:0;letter-spacing:0}.sm-toolbar .guide-downloads{margin-left:auto}.sm-toolbar .guide-downloads .btn{font-size:12px;padding:8px 11px;min-height:36px}
 .sm-clients .client-tabs{margin:0;display:flex;gap:8px}.sm-clients .client-tabs button{flex:1;min-height:42px;gap:8px;padding:8px 12px;font-size:13px}.sm-clients .software-icon{width:22px;height:22px}
 .sm-navigation{position:sticky;top:0;z-index:20;background:#fff;padding:0 4px 4px;border-bottom:1px solid #e8edf4}.sm-chapters{position:relative}.sm-chapters summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;cursor:pointer;list-style:none}.sm-chapters summary::-webkit-details-marker{display:none}.sm-chapters summary strong{font-size:15px;color:#29476b}.sm-chapters summary>span{display:flex;align-items:center;gap:5px;font-size:12px;color:#567499}.sm-chapters summary svg{rotate:90deg}.sm-chapters[open] summary svg{rotate:270deg}
 .sm-chapters nav{position:absolute;top:44px;right:0;left:0;border:1px solid #d9e4f2;border-radius:10px;padding:8px;background:#fff;box-shadow:0 12px 25px -12px #203c6544;z-index:25}.sm-chapters nav button{display:flex;justify-content:space-between;align-items:center;text-align:left;background:transparent;padding:11px 12px;min-height:42px;font-size:14px;width:100%;color:#526782;border-radius:6px}.sm-chapters nav button[aria-current]{background:#edf3ff;color:#215bd6;font-weight:600}.sm-chapters nav small{font-size:11px;color:#64748b}.sm-chapters nav [data-sm-restart]{border-top:1px solid #edf1f7;margin-top:5px;color:#2464df}
 .sm-progress-row{display:flex;gap:14px;align-items:center;height:42px;padding-inline:8px}.sm-page .cinema-scrubber{position:relative;inset:auto;width:auto;height:42px;flex:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:0}.sm-page .cinema-step-line{inset:20px 0 auto;height:2px;width:100%}.sm-page .cinema-step-line>span{height:100%;width:var(--guide-progress,0%)}.sm-page .cinema-tick{left:auto;top:21px;width:7px;height:7px;translate:-50% -50%;border-width:1px}.sm-page .cinema-thumb{left:var(--guide-progress,0%);top:21px;translate:-50% -50%;width:20px;height:20px;border-width:3px}.sm-clock{font-size:10px;color:#64748b;font-variant-numeric:tabular-nums;white-space:nowrap}
 .sm-page .cinema-stage-area{display:block;flex:none;min-height:0;margin-top:2px}.sm-page .cinema-film{border-radius:12px;box-sizing:border-box;max-width:100%}.sm-page .cinema-test-node{margin:4px 0 0;min-height:64px;padding:12px 16px;gap:13px;font-size:14px}.sm-page .cinema-test-node small{font-size:11px}.sm-switch-note{margin:0;text-align:center;font-size:11px;line-height:1.8;color:#64748b}

}

@media(max-width:360px){.sm-clients .client-tabs button{min-width:0;font-size:12px;padding-inline:6px;gap:5px;white-space:normal}.sm-clients .software-icon{width:20px;height:20px}}

/* The host page owns captions and controls; iframe cropping cannot hide them. */
.sm-page[data-host-controls] .sm-player{width:100%;border:1px solid #dfe7f1;border-radius:12px;overflow:hidden;background:#f5f8fc;overflow-anchor:none}
.sm-page[data-host-controls] .sm-player .cinema-film{width:100%;height:auto;aspect-ratio:414 / 620;border:0;border-radius:0;box-sizing:border-box}
.sm-caption{display:flex;align-items:center;gap:14px;padding:14px 16px 16px;border-top:1px solid #e2e8f0;background:#f5f8fc;color:#253e61}
.sm-caption-texts{display:grid;flex:1;min-width:0}
.sm-caption-text{grid-area:1 / 1;min-width:0}
.sm-caption-text strong{display:block;font-size:18px;line-height:1.45;font-weight:650}
.sm-caption-text p{margin:6px 0 0;font-size:15px;line-height:1.6;color:#5c718b}
.sm-caption-ghost{visibility:hidden;pointer-events:none}
.sm-play{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:#2464df;color:#fff;cursor:pointer}
.sm-play:disabled{opacity:.6;cursor:default}
.sm-play:focus-visible{outline:3px solid #99baf1;outline-offset:3px}
@media(max-width:352px){.sm-caption{padding-inline:12px;gap:10px}.sm-caption-text strong{font-size:17px}.sm-caption-text p{font-size:14px}}

/* The existing picture/caption divider doubles as the seek rail. */
.sm-page[data-host-controls] .sm-navigation{border-bottom:0;padding-bottom:0}
.sm-page[data-host-controls] .sm-chapter-meta{gap:12px}
.sm-chapter-meta>span:last-child{display:inline-flex;align-items:center;gap:5px}
.sm-page[data-host-controls] .sm-chapter-meta .sm-clock{font-size:11px}
.sm-page[data-host-controls] .sm-player .sm-progress-row{position:relative;height:0;margin:0;padding:0;z-index:3}
.sm-page[data-host-controls] .sm-player .cinema-scrubber{position:absolute;inset:-22px 12px auto;width:auto;height:44px;flex:none}
.sm-page[data-host-controls] .sm-player .cinema-step-line{top:21px;height:2px}
.sm-page[data-host-controls] .sm-player .cinema-tick,.sm-page[data-host-controls] .sm-player .cinema-thumb{top:22px}
.sm-page[data-host-controls] .sm-caption{border-top:0;padding-top:20px}
.sm-play{position:relative;z-index:4}
@media(max-width:352px){.sm-page[data-host-controls] .sm-chapter-meta{gap:7px}.sm-page[data-host-controls] .sm-chapter-meta .sm-clock{font-size:10px}}

.sm-page[data-host-controls] .sm-player .cinema-film{position:relative}
.sm-page[data-host-controls] .sm-player .cinema-frame{position:absolute;inset:0;width:100%;height:100%}

/* Shared phone guidance above the picture, with idle-aware overlay controls. */
@media(max-width:700px){
 .sm-page[data-overlay-controls="true"] .sm-navigation{position:relative;top:auto}
 .sm-page[data-host-controls][data-overlay-controls="true"] .sm-caption{padding-top:14px;padding-bottom:24px}
 .sm-page[data-host-controls][data-overlay-controls="true"] .cinema-film>.sm-play{position:absolute;right:12px;bottom:12px;transition:opacity .18s ease-out}
 .sm-page[data-overlay-controls="true"].sm-controls-dimmed .sm-play:not(:disabled):not(:focus-visible){opacity:.28}
 .sm-page[data-overlay-controls="true"] .cinema-frame{pointer-events:none}
}

@media(prefers-reduced-motion:reduce){.sm-page[data-host-controls][data-overlay-controls="true"] .cinema-film>.sm-play{transition:none}}