.mobile-settings-button{display:none}
#mobile-controls-dialog{padding:0;width:min(560px,100%);max-width:100%;max-height:88svh;margin:auto auto 0;border:1px solid #dfe5ef;border-bottom:0;border-radius:22px 22px 0 0;overflow:auto;overscroll-behavior:contain;color:#263247}
#mobile-controls-dialog::backdrop{background:#14213b66;backdrop-filter:blur(5px)}
.mobile-settings-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#fffffff5;border-bottom:1px solid #e8edf5;backdrop-filter:blur(12px)}
.mobile-settings-heading h2{margin:0;font-size:18px;letter-spacing:-.4px}
.mobile-settings-heading button{min-height:44px;padding:0 16px;border-radius:10px;background:#edf3ff;color:#315fc6;font-size:14px;font-weight:600}
@media(max-width:900px){
 body:has(#mobile-controls-dialog[open]){overflow:hidden}
 .app-header{height:56px;padding:0 16px;gap:10px}
 .app-header .text-button{font-size:12px;min-height:44px;padding:0 0 0 8px}
 .brand strong{font-size:24px}
 .header-description,.header-separator{display:none}
 .url-bar{padding:10px 12px;gap:8px;min-height:0;flex-wrap:wrap}
 .website-entry{display:grid;grid-template-columns:1fr auto;flex-basis:100%;height:auto;gap:2px;padding:4px}
 .url-bar .url-input-wrap{grid-column:1/-1;width:100%;height:44px;padding:0 8px}
 .url-bar .url-input-wrap input{font-size:16px}
 .url-bar #reload{width:38px;height:38px}
 .url-bar .mode-label{height:40px;border:0;padding:0 5px;align-items:stretch;justify-content:center}
 .url-bar #preview-mode-trigger{width:100%;height:40px;font-size:13px;min-width:0;padding:0 8px}
 .url-bar .mode-label select{width:100%;height:40px;font-size:16px}
 .url-bar .primary{height:40px;padding:0 17px;font-size:13px}
 .url-bar .primary .preview-suffix{display:inline}
 .demo-choices{width:100%;padding:0;border:0}
 .demo-caption{display:none}
 .demo-segment{width:100%;padding:3px;gap:4px}
 .url-bar .demo-choices .demo-button{flex:1;min-height:40px;font-size:13px;gap:8px}
 .app-layout,.app-layout:has(.duo-three-scene:not([hidden])){display:block;height:auto;min-height:0}
 .workspace{min-width:0;width:100%}
 .workspace-toolbar{display:grid;grid-template-columns:1fr auto;height:auto;padding:8px 12px;gap:6px 12px;min-height:104px}
 .view-toggle{grid-column:1/-1;width:100%}
 .view-toggle button{flex:1;min-height:40px;font-size:12px!important;padding:8px 6px!important}
 .mobile-settings-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 12px;border:1px solid #dce4f2;border-radius:9px;background:#fff;color:#40567b;font-size:12px;justify-self:start}
 .mobile-settings-button svg{width:17px;height:17px;flex:none}
 .toolbar-right{gap:6px;justify-content:flex-end;min-width:0}
 .toolbar-right .icon-button{min-width:40px;min-height:40px;padding:0;margin:0;border:0}
 .stage{height:max(390px,calc(100svh - 368px));min-height:0;flex:none}
 .duo-three-scene{height:100%;min-height:0}
 .duo-model-heading{padding:16px 16px 0;min-height:62px;align-items:center}
 .duo-model-heading h2{font-size:17px;margin-bottom:5px}
 .duo-model-heading p{font-size:11px}
 .duo-download{min-height:40px;display:flex;align-items:center;font-size:11px;padding:8px 10px}
 .duo-render-host{min-height:0}
 .duo-three-footer{display:none}
 .duo-actions{bottom:44px;max-width:calc(100% - 20px);width:max-content;padding:4px;gap:2px}
 .duo-actions button{min-height:40px;font-size:11px;padding:8px;gap:5px}
 .duo-actions button::before{width:14px;height:14px;flex-basis:14px}
 .duo-model-message{font-size:11px;left:16px;right:16px;line-height:1.4;bottom:5px}
 .single-scene{height:100%;min-height:100%;padding:20px 14px 16px}
 .view-title{margin-bottom:16px}
 .stage-instruction{font-size:11px;max-width:290px;line-height:1.5;margin-top:18px}
 .comparison{grid-template-columns:minmax(0,1fr);padding:14px;gap:14px}
 .compare-card{padding:18px 12px}
 .snapshot-notice,.embed-notice{padding:10px 14px;font-size:11px;flex-wrap:wrap;gap:5px}
 .snapshot-notice>span{min-width:0;overflow-wrap:anywhere}
 .snapshot-notice output{font-size:11px}
 .embed-notice button{min-height:40px}
 .workspace-footer{padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:8px;font-size:10px}
 .workspace-footer button{min-height:30px}
 #mobile-controls-dialog .sidebar{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:20px 20px max(24px,env(safe-area-inset-bottom));border:0;overflow:visible}
 #mobile-controls-dialog .sidebar>h1,#mobile-controls-dialog .panel-heading,#mobile-controls-dialog .device-subtitle{display:none}
 #mobile-controls-dialog .control-section{min-width:0}
 #mobile-controls-dialog .control-section h2{font-size:14px;margin-bottom:12px}
 #mobile-controls-dialog kbd{display:none}
 #mobile-controls-dialog .display-options{gap:8px}
 #mobile-controls-dialog .display-option{height:56px;padding:10px;gap:10px}
 #mobile-controls-dialog .display-option strong{font-size:14px}
 #mobile-controls-dialog .display-option small{display:block;font-size:11px;margin-top:4px}
 #mobile-controls-dialog .orientation button,#mobile-controls-dialog .pose-options button{min-height:44px;font-size:14px}
 #mobile-controls-dialog .pose-options{margin-bottom:20px}
 #mobile-controls-dialog .model-controls>input{height:32px;margin:0;touch-action:pan-y}
 #mobile-controls-dialog .angle-ends{font-size:11px}
 #mobile-controls-dialog .finish-options{max-width:none}
 #mobile-controls-dialog .finish-options button{min-height:44px;font-size:13px;justify-content:center}
 #mobile-controls-dialog .player-demo-button{min-height:62px;font-size:14px}
 #mobile-controls-dialog .player-demo-button small{font-size:12px}
 #mobile-controls-dialog .toggle-row{min-height:44px;font-size:14px}
 #mobile-controls-dialog .toggle-row input{width:44px;height:44px}
 #mobile-controls-dialog .switch{width:36px;height:22px}
 #mobile-controls-dialog .switch:before{width:18px;height:18px}
 #mobile-controls-dialog input:checked+.switch:before{transform:translateX(14px)}
 #mobile-controls-dialog .dimension-inputs label{font-size:12px}
 #mobile-controls-dialog .dimension-inputs input{height:44px;font-size:16px;padding:8px 12px}
 #mobile-controls-dialog .dimensions>p{font-size:12px;margin-top:12px}
 #mobile-controls-dialog .estimate{font-size:9px}
 #mobile-controls-dialog .sidebar-bottom{display:flex}
 #mobile-controls-dialog .sidebar-bottom p{font-size:12px}
 .preview-expanded .stage,.workspace:fullscreen .stage{height:auto;min-height:0;flex:1}
 #info-dialog{padding:28px 22px}
 #info-dialog h2{font-size:28px}
 .mode-menu-heading,.mode-menu-note{font-size:11px}
 .preview-mode-menu strong{font-size:14px}
 .preview-mode-menu small{font-size:12px}
}
@media(max-width:350px){
 .app-header .text-button{font-size:11px}
 .duo-actions button{font-size:10px;padding:8px 6px}
 .duo-actions button::before{display:none}
 .mobile-settings-button{padding:0 9px}
}

@media(min-width:701px) and (max-width:900px) and (max-height:500px){
 .app-header{height:48px}
 .url-bar{display:flex;flex-wrap:nowrap;padding:8px 12px;gap:10px}
 .website-entry{display:flex;flex:1;height:48px;gap:0}
 .url-bar .url-input-wrap{flex:1;min-width:80px;width:auto;padding:0 4px}
 .url-bar .url-input-wrap input{font-size:16px}
 .url-bar .mode-label{width:105px;flex:none;padding:0 2px}
 .url-bar #preview-mode-trigger{font-size:11px;padding:0 4px}
 .url-bar .primary{padding:0 10px}
 .url-bar .primary .preview-suffix{display:none}
 .url-bar .primary svg{display:none}
 .demo-choices,.demo-segment{width:auto}
 .url-bar .demo-choices .demo-button{font-size:12px;padding:5px 8px}
 .workspace-toolbar{display:flex;min-height:56px;padding:6px 12px}
 .view-toggle{width:auto;flex:1}
 .mobile-settings-button{flex:none}
 .stage{height:390px}
}