html.mobile-prototype{
--mobile-tabs-h:58px;
--mobile-strip-h:112px;
--mobile-sheet-h:min(42dvh,380px);
--mobile-export-h:min(64dvh,460px);
--mobile-tools-h:108px;
--safe-top:env(safe-area-inset-top);
--safe-bottom:env(safe-area-inset-bottom);
}
html.mobile-prototype.in-frame{ --safe-top:0px; --safe-bottom:0px; }
html.mobile-prototype,
html.mobile-prototype body{
width:100%;
height:100%;
height:100dvh;
overflow:hidden;
overscroll-behavior:none;
touch-action:manipulation;
}
html.mobile-prototype #app{ height:100dvh; }
html.mobile-prototype header{
min-height:56px;
padding:calc(7px + var(--safe-top)) 8px 7px;
gap:6px;
z-index:120;
}
html.mobile-prototype header .brand-area{
width:100%;
min-width:0;
gap:6px;
}
html.mobile-prototype header .brand{
flex:1 1 auto;
min-width:56px;
overflow:hidden;
}
html.mobile-prototype header .brand img{
display:block;
width:88px !important;
max-width:100%;
height:auto;
}
html.mobile-prototype header button.tiny{
min-width:42px;
min-height:42px;
padding:0 8px;
flex:0 0 auto;
border-radius:8px;
}
html.mobile-prototype #historyBtn,
html.mobile-prototype #undoBtn,
html.mobile-prototype #redoBtn{
overflow:hidden;
font-size:0;
}
html.mobile-prototype #historyMenu{
position:fixed;
top:calc(58px + var(--safe-top));
left:8px;
width:calc(100vw - 16px);
max-height:60dvh;
z-index:150;
}
html.mobile-prototype .mobile-menu-button{
font-size:0;
line-height:1;
}
html.mobile-prototype header .hactions{
display:none;
position:fixed;
z-index:145;
top:calc(58px + var(--safe-top));
left:8px;
right:8px;
max-height:calc(100dvh - 130px);
overflow:auto;
grid-template-columns:1fr 1fr;
gap:8px;
padding:10px;
border:1px solid var(--border);
border-radius:12px;
background:var(--panel);
box-shadow:0 18px 48px rgba(0,0,0,.48);
}
html.mobile-prototype.mobile-menu-open header .hactions{ display:grid; }
html.mobile-prototype header .hactions button.tiny{
width:100%;
min-height:46px;
padding:8px;
color:var(--text);
white-space:normal;
}
html.mobile-prototype header .hactions #uploadBtn{
grid-column:1 / -1;
color:#06231a;
}
html.mobile-prototype #body{
position:relative;
flex:1 1 auto;
min-height:0;
width:100%;
overflow:hidden;
overflow:clip;
}
html.mobile-prototype #autosaveState{ display:none; }
html.mobile-prototype #scanModeBtn,
html.mobile-prototype #cutterModeBtn{ display:none !important; }
html.mobile-prototype #center{
width:100%;
min-width:0;
flex:1 1 100%;
padding-bottom:calc(60px + var(--safe-bottom));
}
html.mobile-prototype #left,
html.mobile-prototype #right{
display:flex;
position:absolute;
z-index:95;
top:8px;
left:8px;
right:8px;
bottom:calc(66px + var(--safe-bottom));
width:auto;
min-width:0;
max-width:none;
max-height:none;
border:1px solid var(--border);
border-radius:14px;
background:var(--panel);
box-shadow:0 22px 60px rgba(0,0,0,.5);
overflow-y:auto;
transform:translateY(calc(100% + 24px));
transition:transform .22s ease;
overscroll-behavior:contain;
}
html.mobile-prototype #body.mobile-left-open #left,
html.mobile-prototype #body.mobile-right-open #right{
transform:translateY(0);
}
html.mobile-prototype #left,
html.mobile-prototype #right{
top:auto;
left:0;
right:0;
bottom:calc(var(--mobile-tabs-h) + var(--safe-bottom));
border-width:1px 0 0;
border-radius:14px 14px 0 0;
box-shadow:0 -12px 32px rgba(0,0,0,.42);
}
html.mobile-prototype #right{ height:var(--mobile-sheet-h); }
html.mobile-prototype[data-mobile-panel="export"] #right{ height:var(--mobile-export-h); }
html.mobile-prototype #left{
height:var(--mobile-strip-h);
overflow:hidden;
}
html.mobile-prototype #left > #sec-effects{
flex:1 1 auto;
min-height:0;
border-bottom:0;
}
html.mobile-prototype #left > #sec-effects > .shead,
html.mobile-prototype #left > #leftFoot{ display:none; }
html.mobile-prototype #left > #sec-effects > .sbody{
position:relative;
height:100%;
padding:0 !important;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
scroll-snap-type:x proximity;
scrollbar-width:none;
}
html.mobile-prototype #left > #sec-effects > .sbody::-webkit-scrollbar{ display:none; }
html.mobile-prototype ul.efflist{
display:flex;
align-items:stretch;
gap:6px;
width:max-content;
height:100%;
padding:10px 12px;
}
html.mobile-prototype ul.efflist li[data-key]{
flex:0 0 72px;
flex-direction:column;
justify-content:flex-start;
gap:5px;
width:72px;
min-height:0;
margin:0;
padding:4px;
border-radius:8px;
scroll-snap-align:center;
text-align:center;
}
html.mobile-prototype ul.efflist .effect-thumb{
width:62px;
height:62px;
flex:0 0 62px;
border-radius:6px;
}
html.mobile-prototype ul.efflist .effect-name{
display:block;
width:100%;
overflow:hidden;
font-size:10px;
line-height:1.2;
white-space:nowrap;
text-overflow:ellipsis;
}
html.mobile-prototype ul.efflist li.efgroup{
flex:0 0 1px;
align-self:stretch;
margin:10px 3px;
padding:0 !important;
overflow:hidden;
background:var(--border);
font-size:0;
opacity:1;
}
html.mobile-prototype #center{ transition:padding-bottom .22s ease; }
html.mobile-prototype #app #body.mobile-left-open #center{
padding-bottom:calc(var(--mobile-tabs-h) + var(--mobile-strip-h) + var(--safe-bottom));
}
html.mobile-prototype #app #body.mobile-right-open #center{
padding-bottom:calc(var(--mobile-tabs-h) + var(--mobile-sheet-h) + var(--safe-bottom));
}
html.mobile-prototype[data-mobile-panel="export"] #app #body.mobile-right-open #center{
padding-bottom:calc(var(--mobile-tabs-h) + var(--mobile-export-h) + var(--safe-bottom));
}
html.mobile-prototype #app #body.mobile-left-open #zoomBar,
html.mobile-prototype #app #body.mobile-right-open #zoomBar{ display:none; }
html.mobile-prototype #rightResizeHandle{ display:none !important; }
html.mobile-prototype .mobile-sheet-backdrop{
position:fixed;
z-index:90;
inset:calc(56px + var(--safe-top)) 0 calc(58px + var(--safe-bottom));
border:0;
padding:0;
background:rgba(0,0,0,.46);
backdrop-filter:blur(2px);
}
html.mobile-prototype .mobile-sheet-backdrop[hidden]{ display:none; }
html.mobile-prototype .section > .shead{
min-height:48px;
position:sticky;
top:0;
z-index:4;
background:var(--panel);
}
html.mobile-prototype .section .sbody{ padding-bottom:18px; }
html.mobile-prototype .preset-card{ min-height:48px; padding:10px 12px; }
html.mobile-prototype[data-mobile-panel="effects"] #left #sec-workspaces{
display:none !important;
}
html.mobile-prototype[data-mobile-panel="effects"] #left #sec-presets{
flex:0 0 auto;
min-height:0;
max-height:36%;
}
html.mobile-prototype[data-mobile-panel="workspaces"] #left #sec-effects,
html.mobile-prototype[data-mobile-panel="workspaces"] #left #sec-presets,
html.mobile-prototype[data-mobile-panel="workspaces"] #left #leftFoot{
display:none !important;
}
html.mobile-prototype[data-mobile-panel="workspaces"] #left #sec-workspaces{
display:flex;
flex:1 1 auto;
flex-direction:column;
min-height:0;
}
html.mobile-prototype[data-mobile-panel="workspaces"] #left #sec-workspaces .sbody{
flex:1 1 auto;
overflow-y:auto;
}
html.mobile-prototype[data-mobile-panel="settings"] #right #sec-export,
html.mobile-prototype[data-mobile-panel="more"] #right #sec-export{
display:none !important;
}
html.mobile-prototype[data-mobile-panel="export"] #right > .section:not(#sec-export){
display:none !important;
}
html.mobile-prototype[data-mobile-panel="export"] #right #sec-export{
display:block !important;
width:100%;
border-bottom:0;
}
html.mobile-prototype .prow{
min-height:46px;
margin:6px 0;
gap:8px;
}
html.mobile-prototype .prow > label{
max-width:42%;
font-size:12px;
line-height:1.3;
}
html.mobile-prototype .prow input[type=range]{ min-height:38px; }
html.mobile-prototype .prow select,
html.mobile-prototype .prow input[type=text],
html.mobile-prototype .prow button.pbtn{ min-height:44px; }
html.mobile-prototype .prow input[type=color]{ width:42px; height:38px; }
html.mobile-prototype .segwrap button,
html.mobile-prototype .multiwrap button{ min-height:38px; padding:7px 9px; }
html.mobile-prototype #previewBar{
min-height:40px;
justify-content:flex-start;
padding:6px 8px;
padding-right:92px;
overflow:hidden;
}
html.mobile-prototype #previewBar #effLabel{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
html.mobile-prototype #engineTag{ display:none; }
html.mobile-prototype #topIcons{
right:8px;
top:5px;
}
html.mobile-prototype #compareAxisBtn,
html.mobile-prototype #fullscreenBtn{ display:none !important; }
html.mobile-prototype #topIcons button,
html.mobile-prototype .mobile-stop-button{
width:34px;
height:34px;
min-width:34px;
}
html.mobile-prototype .mobile-stop-button{
position:absolute;
right:48px;
top:5px;
display:grid;
place-items:center;
padding:0;
border:1px solid var(--border);
border-radius:6px;
background:var(--panel2);
color:var(--dim);
cursor:pointer;
z-index:4;
}
html.mobile-prototype .mobile-stop-button.is-paused{
border-color:var(--accent);
color:var(--accent);
}
html.mobile-prototype #stageWrap{
min-height:0;
padding:8px;
touch-action:none;
}
html.mobile-prototype #placeholder{
max-width:calc(100% - 28px);
padding:18px;
}
html.mobile-prototype #placeholder .placeholder-copy{ max-width:280px; }
html.mobile-prototype #emptyUploadBtn{ min-height:44px; padding:8px 14px; }
html.mobile-prototype #zoomBar{
min-height:40px;
justify-content:center;
padding:5px 8px;
}
html.mobile-prototype #zoomBar .dims,
html.mobile-prototype #zoomBar .sep{ display:none; }
html.mobile-prototype #zoomBar button{
width:34px;
height:32px;
min-height:32px;
}
html.mobile-prototype #tabs{
position:fixed;
z-index:110;
left:0;
right:0;
bottom:0;
min-height:58px;
padding-bottom:var(--safe-bottom);
border-top:1px solid var(--border);
background:var(--panel);
box-shadow:0 -8px 24px rgba(0,0,0,.24);
}
html.mobile-prototype #tabs button{
min-height:58px;
padding:7px 3px;
font-size:10px;
}
html.mobile-prototype .tablet-settings-tab{ display:flex !important; }
html.mobile-prototype #app.cutter-mode #center{
padding-bottom:calc(60px + var(--safe-bottom));
}
html.mobile-prototype #app.cutter-mode #right{ display:flex; }
html.mobile-prototype #app.cutter-mode #body.mobile-right-open #right{ transform:translateY(0); }
html.mobile-prototype .workspace-dialog{
width:calc(100vw - 24px);
max-height:calc(100dvh - 40px);
overflow-y:auto;
}
@media (max-width:380px){
html.mobile-prototype header .brand img{ width:68px !important; }
html.mobile-prototype header .brand-area{ gap:4px; }
html.mobile-prototype header button.tiny,
html.mobile-prototype #historyBtn,
html.mobile-prototype #undoBtn,
html.mobile-prototype #redoBtn,
html.mobile-prototype .mobile-menu-button{ width:38px; min-width:38px; }
}
html.mobile-prototype .mobile-tools{
position:fixed; z-index:96; left:0; right:0;
bottom:calc(var(--mobile-tabs-h) + var(--safe-bottom));
height:var(--mobile-tools-h);
display:flex; flex-direction:column; justify-content:center;
background:var(--bg); border-top:1px solid var(--border);
transform:translateY(calc(100% + var(--mobile-tabs-h) + 40px));
transition:transform .22s ease;
}
html.mobile-prototype.mobile-tools-open .mobile-tools{ transform:translateY(0); }
html.mobile-prototype.mobile-tools-open #app #center{
padding-bottom:calc(var(--mobile-tabs-h) + var(--mobile-tools-h) + var(--safe-bottom));
}
html.mobile-prototype.mobile-tools-open #zoomBar{ display:none; }
html.mobile-prototype .mt-chips{
display:flex; gap:6px; overflow-x:auto; padding:0 12px;
scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
}
html.mobile-prototype .mt-chips::-webkit-scrollbar{ display:none; }
html.mobile-prototype .mt-chips[hidden],
html.mobile-prototype .mt-slider[hidden]{ display:none; }
html.mobile-prototype .mt-chip{
flex:0 0 auto; min-width:68px; max-width:128px; height:68px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
padding:6px 12px; border:1px solid var(--border); border-radius:12px;
background:transparent; color:var(--text); font:inherit; font-size:12.5px; line-height:1.2;
scroll-snap-align:start; cursor:pointer;
}
html.mobile-prototype .mt-chip:active{ background:var(--hover); }
html.mobile-prototype .mt-chip-name{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.mobile-prototype .mt-chip-val{ font:11px var(--mono); color:var(--dim); }
html.mobile-prototype .mt-chip.is-more::before{
content:""; width:18px; height:18px; background:currentColor;
-webkit-mask:var(--i-sliders) center/18px 18px no-repeat; mask:var(--i-sliders) center/18px 18px no-repeat;
}
html.mobile-prototype .mt-slider{ padding:2px 10px 8px; }
html.mobile-prototype .mt-head{ display:flex; align-items:center; gap:6px; height:42px; }
html.mobile-prototype .mt-head button{
flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; padding:0;
border:0; border-radius:10px; background:transparent; color:var(--text); font-size:0; cursor:pointer;
}
html.mobile-prototype .mt-head button:active{ background:var(--hover); }
html.mobile-prototype .mt-head button::before{
content:""; width:22px; height:22px; background:currentColor;
-webkit-mask:var(--i-clear) center/22px 22px no-repeat; mask:var(--i-clear) center/22px 22px no-repeat;
}
html.mobile-prototype .mt-head .mt-done::before{ -webkit-mask-image:var(--i-check); mask-image:var(--i-check); }
html.mobile-prototype .mt-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:14px; }
html.mobile-prototype .mt-value{ flex:0 0 auto; font:12.5px var(--mono); color:var(--dim); }
html.mobile-prototype .mobile-tools input[type=range]{ width:calc(100% - 20px); margin:0 10px; height:40px; min-height:40px; --thumb:24px; }
html.mobile-prototype .mobile-more-head{ display:none; }
html.mobile-prototype[data-mobile-panel="more"] .mobile-more-head{
display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:6;
min-height:48px; padding:4px 8px; background:var(--bg); border-bottom:1px solid var(--border);
}
html.mobile-prototype .mobile-more-head button{
display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 10px;
border:0; border-radius:10px; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer;
}
html.mobile-prototype .mobile-more-head button::before{
content:""; width:18px; height:18px; background:currentColor; transform:rotate(90deg);
-webkit-mask:var(--i-chevron) center/18px 18px no-repeat; mask:var(--i-chevron) center/18px 18px no-repeat;
}
html.mobile-prototype .mobile-more-head span{ font-size:13px; color:var(--dim); }
html.mobile-prototype #stageWrap{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
html.mobile-prototype .mobile-share{ align-items:flex-end; padding:12px; }
html.mobile-prototype .mobile-share .workspace-dialog{ width:100%; max-height:calc(100dvh - 24px); overflow-y:auto; }
html.mobile-prototype .mobile-share-preview:empty{ display:none; }
html.mobile-prototype .mobile-share-preview :is(img,video){
display:block; width:100%; max-height:46dvh; object-fit:contain; border-radius:10px; background:var(--stage);
}
html.mobile-prototype .mobile-share-name{ margin:10px 0 4px; font:11.5px var(--mono); color:var(--dim); overflow-wrap:anywhere; }
html.mobile-prototype .mobile-share .workspace-dialog-actions{ display:grid; gap:8px; }
html.mobile-prototype .mobile-share .workspace-dialog-actions button{ justify-content:center; text-align:center; }
html.mobile-prototype .mobile-share-go{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
html.mobile-prototype .mobile-share-go::before{
content:""; width:18px; height:18px; background:currentColor;
-webkit-mask:var(--i-share) center/18px 18px no-repeat; mask:var(--i-share) center/18px 18px no-repeat;
}