@font-face{ font-family:"Park Noto Sans HK"; font-style:normal; font-weight:400; font-display:swap; src:url("asset/fonts/noto-sans-hk-400-latin.woff2?v=20261011") format("woff2"); unicode-range:U+0000-2E7F; }
@font-face{ font-family:"Park Noto Sans HK"; font-style:normal; font-weight:400; font-display:swap; src:url("asset/fonts/noto-sans-hk-400-cjk.woff2?v=20261011") format("woff2"); unicode-range:U+2E80-FFFF; }
@font-face{ font-family:"Park Noto Sans HK"; font-style:normal; font-weight:500; font-display:swap; src:url("asset/fonts/noto-sans-hk-500-latin.woff2?v=20261011") format("woff2"); unicode-range:U+0000-2E7F; }
@font-face{ font-family:"Park Noto Sans HK"; font-style:normal; font-weight:500; font-display:swap; src:url("asset/fonts/noto-sans-hk-500-cjk.woff2?v=20261011") format("woff2"); unicode-range:U+2E80-FFFF; }
@font-face{ font-family:"Park Noto Sans HK"; font-style:normal; font-weight:700; font-display:swap; src:url("asset/fonts/noto-sans-hk-700-latin.woff2?v=20261011") format("woff2"); unicode-range:U+0000-2E7F; }
@font-face{ font-family:"Park Noto Sans HK"; font-style:normal; font-weight:700; font-display:swap; src:url("asset/fonts/noto-sans-hk-700-cjk.woff2?v=20261011") format("woff2"); unicode-range:U+2E80-FFFF; }
#langBtn[lang="zh-Hant"]{ font-family:"PingFang HK","Microsoft JhengHei",system-ui,sans-serif; }
:root{
color-scheme:dark;
--bg:#0b0b0c; --panel:#0b0b0c; --panel2:#161618; --hover:rgba(255,255,255,.045);
--border:#222226; --line-strong:#37373d;
--text:#ececee; --dim:#8c8c94; --faint:#5e5e66;
--accent:#ececee; --on-accent:#0b0b0c; --accent2:#ececee;
--stage:#070708; --danger:#ff6b6b; --warn:#e0b04c;
--focus-ring:#ececee;
--option-font:"Park Noto Sans HK","Noto Sans HK","Noto Sans CJK HK","PingFang HK","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
--ease:cubic-bezier(.32,.72,0,1);
--pop-shadow:0 18px 48px rgba(0,0,0,.42);
--sheet-shadow:0 -12px 32px rgba(0,0,0,.36);
}
:root[data-theme="light"]{
color-scheme:light;
--bg:#ffffff; --panel:#ffffff; --panel2:#f3f3f5; --hover:rgba(0,0,0,.04);
--border:#e7e7ea; --line-strong:#cbcbd1;
--text:#18181b; --dim:#6b6b74; --faint:#a2a2aa;
--accent:#18181b; --on-accent:#ffffff; --accent2:#18181b;
--stage:#f4f4f5; --focus-ring:#18181b;
--pop-shadow:0 18px 48px rgba(20,20,30,.14);
--sheet-shadow:0 -12px 32px rgba(20,20,30,.10);
}
html[lang="zh-Hant"]{ --option-font:"Park Noto Sans HK","Noto Sans HK","Noto Sans CJK HK","PingFang HK","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif; }
:root{
--i-undo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
--i-redo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/%3E%3C/svg%3E");
--i-history:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
--i-clear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E");
--i-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E");
--i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10-6.5z'/%3E%3C/svg%3E");
--i-scan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E");
--i-cut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 8.1 12 12M20 4 8.1 15.9M14.8 14.8 20 20'/%3E%3C/svg%3E");
--i-export:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5 12 4l4.5 4.5'/%3E%3Cpath d='M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E");
--i-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2.5'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Cpath d='m20.5 15-4.2-4.2a1.5 1.5 0 0 0-2.1 0L5 20'/%3E%3C/svg%3E");
--i-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5.5' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='18.5' cy='12' r='1.3'/%3E%3C/svg%3E");
--i-theme:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 0 17z' fill='black'/%3E%3C/svg%3E");
--i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.3 3.5 5.2 3.5 8.5s-1.1 6.2-3.5 8.5M12 3.5C9.6 5.8 8.5 8.7 8.5 12s1.1 6.2 3.5 8.5'/%3E%3C/svg%3E");
--i-reset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.6-5.9L4 8.5'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3C/svg%3E");
--i-pulse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 5 12 2.5-6h4'/%3E%3C/svg%3E");
--i-compare:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M12 4.5v15'/%3E%3C/svg%3E");
--i-axis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5 3.5 12 7 15.5M17 8.5l3.5 3.5-3.5 3.5M3.5 12h17'/%3E%3C/svg%3E");
--i-full:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3'/%3E%3C/svg%3E");
--i-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
--i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12M12 6v12'/%3E%3C/svg%3E");
--i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
--i-effects:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3C/svg%3E");
--i-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
--i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
--i-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 14.5V3.5M8 7.5l4-4 4 4'/%3E%3Cpath d='M8 10.5H6.5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H16'/%3E%3C/svg%3E");
--i-help:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.7 9.5a2.4 2.4 0 0 1 4.6.9c0 1.6-2.3 2-2.3 3.6'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
}
:is(#undoBtn,#redoBtn,#historyBtn,#clearMediaBtn,#animationBtn,#scanModeBtn,#cutterModeBtn,#headerExportBtn,#moreActions > summary,#uploadBtn,#themeBtn,#resetAllBtn,#langBtn,#diagnosticsBtn,#compareBtn,#compareAxisBtn,#fullscreenBtn,#zoomOut,#zoomIn,#mobileMenuBtn,#mobileHelpBtn,.mobile-stop-button)::before,
#tabs .tab-ico{
content:""; flex:0 0 16px; width:16px; height:16px; background:currentColor;
-webkit-mask:var(--icon) center/16px 16px no-repeat; mask:var(--icon) center/16px 16px no-repeat;
}
#undoBtn{ --icon:var(--i-undo); }
#redoBtn{ --icon:var(--i-redo); }
#historyBtn{ --icon:var(--i-history); }
#clearMediaBtn{ --icon:var(--i-clear); }
#animationBtn,.mobile-stop-button{ --icon:var(--i-pause); }
#animationBtn[data-paused="true"],.mobile-stop-button.is-paused{ --icon:var(--i-play); }
#scanModeBtn{ --icon:var(--i-scan); }
#cutterModeBtn{ --icon:var(--i-cut); }
#headerExportBtn{ --icon:var(--i-export); }
#moreActions > summary,#mobileMenuBtn{ --icon:var(--i-more); }
#uploadBtn{ --icon:var(--i-upload); }
#themeBtn{ --icon:var(--i-theme); }
#resetAllBtn{ --icon:var(--i-reset); }
#langBtn{ --icon:var(--i-globe); }
#diagnosticsBtn{ --icon:var(--i-pulse); }
#mobileHelpBtn{ --icon:var(--i-help); }
#compareBtn{ --icon:var(--i-compare); }
#compareAxisBtn{ --icon:var(--i-axis); }
#fullscreenBtn{ --icon:var(--i-full); }
#zoomOut{ --icon:var(--i-minus); }
#zoomIn{ --icon:var(--i-plus); }
#tabs [data-tab="effects"]{ --icon:var(--i-effects); }
#tabs [data-tab="settings"]{ --icon:var(--i-sliders); }
#tabs [data-tab="export"]{ --icon:var(--i-export); }
#tabs .tab-ico{ display:block; }
body{
background:var(--bg); color:var(--text); font-size:13px; line-height:1.45;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:is(#left .sbody,#right,#historyMenu,.more-actions-panel,#exportPopover){
scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border:3px solid transparent; background-clip:padding-box; border-radius:8px; }
:root :focus-visible{ outline-width:1.5px !important; outline-offset:2px !important; }
#exportPopover[hidden]{ display:none !important; }
html.mobile-prototype #headerExportBtn{ display:none !important; }
#historyMenu{ padding:6px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--pop-shadow); }
#historyMenu .history-empty{ color:var(--dim); padding:10px; font-size:12px; }
#historyMenu button.history-item{ min-height:36px; padding:7px 10px; border-radius:8px; font-size:12.5px; gap:10px; color:var(--dim); }
#historyMenu button.history-item:hover{ background:var(--hover); color:var(--text); }
#historyMenu button.history-item.active{ background:var(--panel2); color:var(--text); }
#historyMenu button.history-item.active small{ color:var(--dim); opacity:1; }
#historyMenu .history-dot{ width:6px; height:6px; background:transparent; border:1px solid var(--line-strong); }
#historyMenu .history-item.active .history-dot{ background:var(--text); border-color:var(--text); }
#historyMenu .history-item small{ font:10.5px var(--mono); color:var(--faint); }
.section{ border-bottom:1px solid var(--border); }
.section > .shead{
min-height:40px; padding:14px 16px 8px; gap:8px; align-items:center;
color:var(--dim); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
transition:color .16s var(--ease);
}
.section > .shead:hover{ background:transparent; color:var(--text); }
.section > .shead .mark{
width:10px; height:10px; flex:0 0 10px; font-size:0; color:inherit; background:currentColor; opacity:.7;
-webkit-mask:var(--i-chevron) center/10px 10px no-repeat; mask:var(--i-chevron) center/10px 10px no-repeat;
transition:transform .22s var(--ease);
}
.section.collapsed > .shead .mark{ transform:rotate(-90deg); }
.section .sbody{ padding:2px 16px 18px; }
#resetEffectBtn{
margin-left:auto; padding:3px 8px; margin-right:-8px; border-radius:6px;
font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--dim) !important;
}
#resetEffectBtn:hover{ color:var(--text) !important; background:var(--hover); }
.effect-thumb{ background:var(--panel2); box-shadow:0 0 0 1px var(--border); transition:box-shadow .2s var(--ease); }
ul.efflist li[data-key].active .effect-thumb{ box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text); }
ul.efflist li[data-key]{ border:0; background:transparent; color:var(--dim); transition:color .16s var(--ease),background-color .16s var(--ease); }
ul.efflist li[data-key].active{ color:var(--text); background:transparent; }
ul.efflist li[data-key].active .effect-name{ font-weight:500; }
:root #center{ background:var(--stage); }
#stageWrap,[data-theme="light"] #stageWrap{ background:var(--stage); }
#previewBar{ background:var(--bg); border-bottom:1px solid var(--border); color:var(--dim); }
#previewBar > .dot,#engineTag{ display:none !important; }
#workflowPath{ color:var(--text); font-weight:500; }
#previewBar #sourceBadge{ border:0; padding:0; color:var(--faint); font-size:11.5px; }
#topIcons button,.mobile-stop-button,#zoomBar button{
display:inline-flex; align-items:center; justify-content:center; padding:0;
font-size:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--dim); cursor:pointer;
transition:color .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease);
}
.mobile-stop-button[hidden]{ display:none !important; }
#topIcons button:hover,.mobile-stop-button:hover,#zoomBar button:hover{ color:var(--text); background:var(--hover); border-color:transparent; }
#topIcons button.active{ color:var(--text); border-color:var(--line-strong); background:transparent; }
#topIcons button::before{ transition:transform .22s var(--ease); }
:root:has(#stageWrap.compare-horizontal) #compareAxisBtn::before{ transform:rotate(90deg); }
#compareDivider{ background:var(--text); box-shadow:0 0 0 1px rgba(0,0,0,.35); }
#stageWrap.compare:not(.compare-horizontal) #compareDivider{ width:1px; }
#stageWrap.compare.compare-horizontal #compareDivider{ height:1px; }
#zoomBar{ background:var(--bg); border-top:1px solid var(--border); color:var(--dim); }
#zoomBar .sep{ display:none; }
#zoomBar #zoomReset{ width:auto !important; padding:0 10px !important; font-size:11.5px; }
#zoomLabel{ min-width:46px; text-align:center; color:var(--text); font:11px var(--mono); font-variant-numeric:tabular-nums; }
#tabs{ border-top:1px solid var(--border); background:var(--bg); }
#tabs button{ background:var(--bg); border-right:0; color:var(--faint); font-size:11px; gap:4px; transition:color .16s var(--ease); }
#tabs button:hover{ color:var(--dim); }
#tabs button.active{ color:var(--text); background:var(--bg); }
#placeholder #emptyUploadBtn{ background:var(--text); border-color:var(--text); color:var(--on-accent); }
#placeholder .sample-effect:hover{ border-color:var(--line-strong); }
#right > .section{ container:settings / inline-size; }
#right .sbody{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:12px; align-items:end; }
#right .section.collapsed .sbody{ display:none; }
#right .sbody > *{ grid-column:1/-1; min-width:0; margin:0; }
@container settings (min-width:272px){
#right .sbody{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
#right .sbody > .prow-range:not(.span-full){ grid-column:auto; }
}
.subhead{ margin:0; padding-top:4px; color:var(--text); font-size:12.5px; font-weight:500; }
#uniqueParams > .subhead:first-child{ padding-top:0; font-size:14px; letter-spacing:-.005em; }
#right .sbody > .subhead:not(:first-child){ margin-top:6px; padding-top:12px; border-top:1px solid var(--border); }
.hint{ font-size:11.5px; line-height:1.55; color:var(--dim); }
.prow{ gap:12px; min-height:28px; }
.prow > label{ color:var(--dim); font-size:12px; line-height:1.3; }
.prow.prow-range{
display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label val" "input input";
align-items:end; column-gap:8px; row-gap:3px; min-height:0;
}
.prow-range > label{ grid-area:label; min-width:0; max-width:none; overflow-wrap:anywhere; }
.prow-range > .val{
grid-area:val; width:auto; min-width:3ch; text-align:right; color:var(--text);
font:11px/1.3 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.prow-range > input[type=range]{ grid-area:input; width:100%; }
:is(#right,#exportPopover,.mobile-tools) input[type=range]{
-webkit-appearance:none; appearance:none; display:block; height:18px; margin:0; padding:0;
background:transparent; cursor:pointer; min-height:0; touch-action:pan-y;
--thumb:11px;
}
:is(#right,#exportPopover,.mobile-tools) input[type=range]::-webkit-slider-runnable-track{
height:1px; border-radius:1px;
background:linear-gradient(to right,var(--text) 0 var(--p,0%),var(--line-strong) var(--p,0%) 100%);
}
:is(#right,#exportPopover,.mobile-tools) input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; width:var(--thumb); height:var(--thumb); margin-top:calc((1px - var(--thumb)) / 2); border-radius:50%;
border:1px solid var(--text); background:var(--bg);
transition:transform .18s var(--ease),background-color .18s var(--ease);
}
:is(#right,#exportPopover,.mobile-tools) input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.2); }
:is(#right,#exportPopover,.mobile-tools) input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.2); background:var(--text); }
:is(#right,#exportPopover,.mobile-tools) input[type=range]::-moz-range-track{ height:1px; background:var(--line-strong); border:0; }
:is(#right,#exportPopover,.mobile-tools) input[type=range]::-moz-range-progress{ height:1px; background:var(--text); }
:is(#right,#exportPopover,.mobile-tools) input[type=range]::-moz-range-thumb{
width:calc(var(--thumb) - 2px); height:calc(var(--thumb) - 2px); border-radius:50%; border:1px solid var(--text); background:var(--bg);
}
:is(#right,#exportPopover,.mobile-tools) input[type=range]:focus-visible{ outline:none !important; }
:is(#right,#exportPopover,.mobile-tools) input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--text); }
:is(#right,#exportPopover,.mobile-tools) input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--text); }
.prow .segwrap{ gap:4px; }
.prow.seg-stacked{ row-gap:8px; }
:is(.segwrap,.multiwrap) button{
min-height:26px; padding:4px 10px; border:1px solid var(--border); border-radius:7px;
background:transparent; color:var(--dim); font-size:11.5px; line-height:1.35;
transition:color .16s var(--ease),border-color .16s var(--ease);
}
:is(.segwrap,.multiwrap) button:hover{ color:var(--text); border-color:var(--line-strong); }
:is(.segwrap,.multiwrap) button.on{ color:var(--text); border-color:var(--text); background:transparent; }
:is(#right,#exportPopover) input[type=checkbox]{
-webkit-appearance:none; appearance:none; position:relative; flex:0 0 auto; width:28px; height:16px; margin:0;
border:1px solid var(--line-strong); border-radius:8px; background:transparent; cursor:pointer;
transition:border-color .2s var(--ease);
}
:is(#right,#exportPopover) input[type=checkbox]::before{
content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--dim);
transition:transform .22s var(--ease),background-color .22s var(--ease);
}
:is(#right,#exportPopover) input[type=checkbox]:checked{ border-color:var(--text); }
:is(#right,#exportPopover) input[type=checkbox]:checked::before{ transform:translateX(12px); background:var(--text); }
:is(#right,#exportPopover) :is(input[type=text],input[type=number],select){
height:28px; min-height:28px; padding:0 8px; border:1px solid var(--border); border-radius:7px;
background:transparent; color:var(--text); font:11.5px var(--mono);
transition:border-color .16s var(--ease);
}
:is(#right,#exportPopover) :is(input[type=text],input[type=number],select):hover{ border-color:var(--line-strong); }
:is(#right,#exportPopover) :is(input[type=text],input[type=number],select):focus{ border-color:var(--text); outline:none; }
.prow .colorwrap{ gap:8px; }
.prow input[type=color]{
width:28px; height:28px; flex:0 0 28px; padding:0; border:1px solid var(--border); border-radius:7px; background:transparent; cursor:pointer;
}
.prow input[type=color]::-webkit-color-swatch-wrapper{ padding:3px; }
.prow input[type=color]::-webkit-color-swatch{ border:0; border-radius:4px; }
.prow input[type=color]::-moz-color-swatch{ border:0; border-radius:4px; }
.prow button.pbtn{
min-height:30px; padding:5px 10px; border:1px solid var(--border); border-radius:8px;
background:transparent; color:var(--text); font-size:12px;
transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.prow button.pbtn:hover{ border-color:var(--line-strong); background:var(--hover); }
.stepwrap{ gap:4px; }
.stepwrap button{ width:28px; height:28px; border:1px solid var(--border); border-radius:7px; background:transparent; color:var(--text); }
.stepwrap button:hover{ border-color:var(--line-strong); }
.stepwrap input[type=number]{ width:64px; text-align:center; }
.stepwrap .unit{ color:var(--faint); font:11px var(--mono); }
#sec-export .subhead{ margin:4px 0 8px !important; padding:0; border:0 !important; color:var(--dim); font-size:11px; font-weight:400; letter-spacing:.02em; }
.fmt-grid{ gap:6px; margin:0 0 12px; }
.fmt-grid button{
min-height:52px; padding:9px 12px; border:1px solid var(--border); border-radius:10px;
background:transparent; color:var(--text); font-size:13px; font-weight:500;
transition:border-color .16s var(--ease);
}
.fmt-grid button:hover{ border-color:var(--line-strong); }
.fmt-grid button.active{ border-color:var(--text); }
.fmt-grid button small{ margin-top:2px; color:var(--faint); font:400 11px var(--mono); }
#exportSummary{
margin:0 0 12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
background:transparent; color:var(--dim); font-size:11.5px; line-height:1.6;
}
#exportSummary strong{ color:var(--text); font-size:12.5px; font-weight:500; }
.qtoggle{ justify-content:space-between; flex-direction:row-reverse; gap:12px; margin:0 0 14px; color:var(--dim); font-size:12px; }
#recordRow{ margin:0 0 8px; }
#recordRow button{ min-height:38px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); font-size:12.5px; }
#recordRow button:hover{ border-color:var(--line-strong); }
#exportBtn{
min-height:42px; margin-top:0; border:1px solid var(--text); border-radius:10px;
background:var(--text); color:var(--on-accent); font-size:13px; font-weight:600; filter:none;
transition:opacity .16s var(--ease);
}
#exportBtn:hover{ filter:none; opacity:.88; }
#exportBtn:disabled{ opacity:.35; }
:is(#recBtn,#exportBtn).recording{ background:transparent; border-color:var(--danger); color:var(--danger); }
:is(.workspace-modal,.reliability-modal){ background:rgba(0,0,0,.58); }
[data-theme="light"] :is(.workspace-modal,.reliability-modal){ background:rgba(24,24,27,.28); }
:is(.workspace-dialog,.reliability-dialog){
padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:var(--pop-shadow);
}
:is(.workspace-dialog,.reliability-dialog) h2{ font-size:16px; font-weight:500; letter-spacing:-.005em; color:var(--text); }
:is(.workspace-dialog,.reliability-dialog) :is(p,li){ color:var(--dim); font-size:13px; line-height:1.6; }
.workspace-dialog-actions{ gap:6px; }
:is(.workspace-dialog-actions,.reliability-dialog-actions) button,
.reliability-dialog button{
min-height:38px; padding:8px 14px; border:1px solid var(--border); border-radius:10px;
background:transparent; color:var(--text); font-size:12.5px; font-weight:400;
transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
:is(.workspace-dialog-actions,.reliability-dialog-actions) button:hover,
.reliability-dialog button:hover{ border-color:var(--line-strong); background:var(--hover); }
:is(.workspace-dialog-actions,.reliability-dialog) button.primary{
background:var(--text); border-color:var(--text); color:var(--on-accent); font-weight:600;
}
:is(.workspace-dialog-actions,.reliability-dialog) button.primary:hover{ background:var(--text); opacity:.88; }
.reliability-dialog button.danger{ border-color:var(--danger); color:var(--danger); }
.diagnostic-data{ background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); }
.progress-track{ height:2px; background:var(--border); }
.progress-track > span{ background:var(--text); }
.reliability-banner{
top:62px; padding:10px 12px 10px 14px; gap:12px; border:1px solid var(--line-strong); border-radius:12px;
background:var(--panel); color:var(--text); box-shadow:var(--pop-shadow); font-size:12.5px;
}
.reliability-banner::before{ content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--warn); }
.reliability-banner button{ border:1px solid var(--border); border-radius:8px; padding:5px 10px; color:var(--text); }
.reliability-banner button:hover{ border-color:var(--line-strong); }
:root:not(.mobile-prototype) header{
height:52px; min-height:52px; padding:0 12px 0 16px; gap:16px; flex-wrap:nowrap;
background:var(--bg); border-bottom:1px solid var(--border);
}
:root:not(.mobile-prototype) header .brand-area{ gap:2px; flex:0 1 auto; }
:root:not(.mobile-prototype) header .brand{ flex:0 0 auto; margin-right:14px; padding-right:16px; border-right:1px solid var(--border); height:24px; align-items:center; }
:root:not(.mobile-prototype) header .brand img{ width:124px; }
:root:not(.mobile-prototype) header .hactions{ gap:2px; flex-wrap:nowrap; margin-left:auto; overflow:visible; padding:0; }
:root:not(.mobile-prototype) #undoBtn{ order:1; }
:root:not(.mobile-prototype) #redoBtn{ order:2; }
:root:not(.mobile-prototype) #historyBtn{ order:3; margin-left:6px; }
:root:not(.mobile-prototype) #clearMediaBtn{ order:1; }
:root:not(.mobile-prototype) #animationBtn{ order:2; }
:root:not(.mobile-prototype) #scanModeBtn{ order:4; margin-left:17px; position:relative; }
:root:not(.mobile-prototype) #cutterModeBtn{ order:5; margin-left:4px; }
:root:not(.mobile-prototype) #headerExportBtn{ order:7; margin-left:17px; position:relative; }
:root:not(.mobile-prototype) #moreActions{ order:8; margin-left:4px; }
:root:not(.mobile-prototype) :is(#scanModeBtn,#headerExportBtn)::after{
content:""; position:absolute; left:-9px; top:8px; bottom:8px; width:1px; background:var(--border); pointer-events:none;
}
:root:not(.mobile-prototype) header .hactions > #uploadBtn{ display:none; }
:root:not(.mobile-prototype) header button.tiny,
:root:not(.mobile-prototype) .more-actions > summary{
height:32px; min-height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:7px;
border:1px solid transparent; border-radius:8px; background:transparent; color:var(--dim);
font-size:12.5px; font-weight:400; line-height:1; white-space:nowrap; cursor:pointer;
transition:color .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease);
}
:root:not(.mobile-prototype) header button.tiny:hover:not(:disabled),
:root:not(.mobile-prototype) .more-actions > summary:hover{ color:var(--text); background:var(--hover); border-color:transparent; }
:root:not(.mobile-prototype) header button.tiny:disabled{ opacity:.34; cursor:default; }
:root:not(.mobile-prototype) :is(#undoBtn,#redoBtn){ width:32px; padding:0; justify-content:center; font-size:0; gap:0; }
:root:not(.mobile-prototype) #historyBtn::after{
content:""; width:12px; height:12px; margin-left:-2px; background:currentColor; opacity:.7;
-webkit-mask:var(--i-chevron) center/12px 12px no-repeat; mask:var(--i-chevron) center/12px 12px no-repeat;
}
:root:not(.mobile-prototype) #historyBtn[aria-expanded="true"]{ color:var(--text); background:var(--hover); }
:root:not(.mobile-prototype) header :is(#scanModeBtn,#cutterModeBtn){ color:var(--text); border-color:var(--border); }
:root:not(.mobile-prototype) header :is(#scanModeBtn,#cutterModeBtn):hover:not(:disabled){ border-color:var(--line-strong); }
:root:not(.mobile-prototype) #app.scan-mode #scanModeBtn,
:root:not(.mobile-prototype) #app.cutter-mode #cutterModeBtn{ border-color:var(--text); }
:root:not(.mobile-prototype) header button#headerExportBtn{
background:var(--text); color:var(--on-accent); border-color:var(--text); font-weight:600; padding:0 14px 0 12px;
}
:root:not(.mobile-prototype) header button#headerExportBtn:hover:not(:disabled){ background:var(--text); color:var(--on-accent); opacity:.86; }
:root:not(.mobile-prototype) header button#headerExportBtn[aria-expanded="true"]{ opacity:.86; }
:root:not(.mobile-prototype) header button#headerExportBtn.is-busy::after{
content:""; position:static; width:6px; height:6px; margin-left:2px; border-radius:50%; background:var(--danger);
}
:root:not(.mobile-prototype) .more-actions > summary{ width:32px; padding:0; justify-content:center; font-size:0; gap:0; border-color:transparent; }
:root:not(.mobile-prototype) .more-actions[open] > summary{ color:var(--text); background:var(--hover); border-color:transparent; }
:root:not(.mobile-prototype) .more-actions-panel{
top:calc(100% + 9px); padding:6px; gap:1px; min-width:212px;
background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--pop-shadow);
}
:root:not(.mobile-prototype) #historyMenu{ top:calc(100% + 8px); width:min(320px,calc(100vw - 32px)); }
:root:not(.mobile-prototype) .more-actions-panel button.tiny,
:root:not(.mobile-prototype) .more-actions-panel button{
width:100%; height:34px; min-height:34px; padding:0 10px; gap:10px; justify-content:flex-start;
border:0; border-radius:8px; background:transparent; color:var(--text); font-weight:400; font-size:12.5px; filter:none; box-shadow:none;
}
:root:not(.mobile-prototype) .more-actions-panel button:hover{ background:var(--hover); color:var(--text); }
:root:not(.mobile-prototype) .more-actions-panel button::before{ opacity:.75; }
:root:not(.mobile-prototype) .more-actions-panel #uploadBtn{ margin-bottom:5px; position:relative; }
:root:not(.mobile-prototype) .more-actions-panel #uploadBtn::after{
content:""; position:absolute; left:6px; right:6px; bottom:-3px; height:1px; background:var(--border);
}
:root:not(.mobile-prototype) #left{ width:244px; background:var(--bg); border-right:1px solid var(--border); }
:root:not(.mobile-prototype) #left > #sec-effects{ border-bottom:0; }
:root:not(.mobile-prototype) ul.efflist{ padding:0 8px 18px; }
:root:not(.mobile-prototype) ul.efflist li.efgroup{
padding:18px 8px 6px; font-size:10.5px; font-weight:500; letter-spacing:.1em; color:var(--faint); opacity:1;
}
:root:not(.mobile-prototype) ul.efflist li.efgroup:first-child{ padding-top:6px; }
:root:not(.mobile-prototype) ul.efflist li[data-key]{ min-height:50px; gap:12px; padding:5px 8px; margin:0 0 1px; border-radius:10px; }
:root:not(.mobile-prototype) ul.efflist li[data-key]:hover{ color:var(--text); background:var(--hover); }
:root:not(.mobile-prototype) .effect-thumb{ width:40px; height:40px; flex:0 0 40px; border-radius:7px; }
:root:not(.mobile-prototype) .effect-name{ font-size:13px; line-height:1.35; }
:root:not(.mobile-prototype) #leftFoot{ padding:10px 16px; border-top:1px solid var(--border); }
:root:not(.mobile-prototype) a.footlink{ color:var(--faint); font-size:11.5px; margin-right:16px; }
:root:not(.mobile-prototype) a.footlink:hover{ color:var(--text); }
:root:not(.mobile-prototype) #previewBar{ height:40px; padding:0 112px 0 16px; gap:10px; font-size:12.5px; }
:root:not(.mobile-prototype) #sourceBadge{ max-width:40%; }
:root:not(.mobile-prototype) #topIcons{ top:6px; right:10px; gap:2px; }
:root:not(.mobile-prototype) #topIcons button{ width:28px; height:28px; border-radius:7px; }
:root:not(.mobile-prototype) #zoomBar{ height:36px; padding:0 10px 0 16px; gap:4px; }
:root:not(.mobile-prototype) #zoomBar .dims{ margin-right:auto; opacity:1; color:var(--faint); font:11px var(--mono); font-variant-numeric:tabular-nums; }
:root:not(.mobile-prototype) #zoomBar button{ width:28px; height:28px; border:0; border-radius:7px; }
:root:not(.mobile-prototype) #zoomBar #zoomReset{ margin-left:6px; }
@media (min-width:901px){
:root:not(.mobile-prototype) #tabs{ display:none !important; }
}
:root:not(.mobile-prototype) #right{ width:320px; background:var(--bg); border-left:1px solid var(--border); }
:root:not(.mobile-prototype) #rightResizeHandle:hover::after,
:root:not(.mobile-prototype) body.resizing-right #rightResizeHandle::after{ background:var(--line-strong); width:1px; left:4px; }
:root:not(.mobile-prototype) #exportPopover{
position:absolute; z-index:110; top:calc(100% + 8px); right:12px; width:340px;
max-height:calc(100vh - 72px); overflow:auto;
background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--pop-shadow);
}
:root:not(.mobile-prototype) #exportPopover #sec-export{ border:0; }
:root:not(.mobile-prototype) #exportPopover #sec-export > .shead{ pointer-events:none; padding:16px 18px 4px; }
:root:not(.mobile-prototype) #exportPopover #sec-export > .shead .mark{ display:none; }
:root:not(.mobile-prototype) #exportPopover #sec-export > .sbody{ display:block !important; padding:6px 18px 18px; }
@media (max-width:1280px){
:root:not(.mobile-prototype) #left{ width:224px; }
:root:not(.mobile-prototype) #right{ width:300px; }
:root:not(.mobile-prototype) header .brand img{ width:108px; }
}
@media (min-width:600px) and (max-width:900px){
:root:not(.mobile-prototype) :is(#left,#right){ box-shadow:none; }
:root:not(.mobile-prototype) #body.tablet-left-open #left,
:root:not(.mobile-prototype) #body.tablet-right-open #right{ box-shadow:var(--pop-shadow); }
}
@media (max-width:1100px){
:root:not(.mobile-prototype) :is(#historyBtn,#clearMediaBtn,#animationBtn){ font-size:0; gap:0; width:32px; padding:0; justify-content:center; }
:root:not(.mobile-prototype) #historyBtn::after{ display:none; }
}
html.mobile-prototype header{ background:var(--bg); border-bottom:1px solid var(--border); }
html.mobile-prototype header .brand img{ width:84px !important; }
html.mobile-prototype header .brand-area > button.tiny{
width:40px; min-width:40px; height:40px; min-height:40px; padding:0;
display:inline-flex; align-items:center; justify-content:center; font-size:0; color:var(--dim);
border:0; border-radius:10px; background:transparent;
transition:color .16s var(--ease),background-color .16s var(--ease);
}
html.mobile-prototype header .brand-area > button.tiny::before{ flex-basis:18px; width:18px; height:18px; -webkit-mask-size:18px 18px; mask-size:18px 18px; }
html.mobile-prototype header .brand-area > button.tiny:not(:disabled):active,
html.mobile-prototype header .brand-area > button.tiny[aria-expanded="true"]{ color:var(--text); background:var(--hover); }
html.mobile-prototype header .brand-area > button.tiny:disabled{ opacity:.34; }
html.mobile-prototype #historyBtn{ order:3; }
html.mobile-prototype #undoBtn{ order:1; }
html.mobile-prototype #redoBtn{ order:2; }
html.mobile-prototype #mobileMenuBtn{ order:4; }
html.mobile-prototype header .hactions{
grid-template-columns:1fr; gap:1px; padding:6px;
background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--pop-shadow);
}
html.mobile-prototype header .hactions > button.tiny{
display:flex; align-items:center; justify-content:flex-start; gap:12px;
width:100%; min-height:46px; padding:0 12px; border:0; border-radius:10px;
background:transparent; color:var(--text); font-size:14px; font-weight:400; text-align:left; filter:none; box-shadow:none;
}
html.mobile-prototype header .hactions > button.tiny::before{ opacity:.75; flex-basis:18px; width:18px; height:18px; -webkit-mask-size:18px 18px; mask-size:18px 18px; }
html.mobile-prototype header .hactions > button.tiny:active{ background:var(--hover); }
html.mobile-prototype header .hactions > button.tiny:disabled{ opacity:.34; }
html.mobile-prototype header .hactions #uploadBtn{ grid-column:auto; color:var(--text); background:transparent; }
html.mobile-prototype header .hactions > #uploadBtn{ order:1; }
html.mobile-prototype header .hactions > #clearMediaBtn{ order:2; }
html.mobile-prototype header .hactions > #animationBtn{ order:3; margin-bottom:6px; position:relative; }
html.mobile-prototype header .hactions > #animationBtn::after{ content:""; position:absolute; left:6px; right:6px; bottom:-4px; height:1px; background:var(--border); }
html.mobile-prototype header .hactions > #themeBtn{ order:4; }
html.mobile-prototype header .hactions > #langBtn{ order:5; }
html.mobile-prototype header .hactions > #resetAllBtn{ order:6; }
html.mobile-prototype header .hactions > #diagnosticsBtn{ order:7; }
html.mobile-prototype header .hactions > #mobileHelpBtn{ order:8; }
html.mobile-prototype header .hactions > #moreActions{ display:none !important; }
html.mobile-prototype #historyMenu{ border-radius:14px; }
html.mobile-prototype #historyMenu button.history-item{ min-height:44px; font-size:13.5px; }
html.mobile-prototype #previewBar{ font-size:13px; }
html.mobile-prototype #sourceBadge{ display:none !important; }
html.mobile-prototype #workflowPath{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.mobile-prototype #topIcons button,
html.mobile-prototype .mobile-stop-button{ width:36px; height:36px; min-width:36px; border-radius:10px; }
html.mobile-prototype .mobile-stop-button{ border:0; background:transparent; color:var(--dim); }
html.mobile-prototype .mobile-stop-button.is-paused{ color:var(--text); border:1px solid var(--line-strong); }
html.mobile-prototype :is(#topIcons button,.mobile-stop-button)::before{ flex-basis:18px; width:18px; height:18px; -webkit-mask-size:18px 18px; mask-size:18px 18px; }
html.mobile-prototype #left,
html.mobile-prototype #right{
background:var(--bg); border-top:1px solid var(--border); border-radius:16px 16px 0 0; box-shadow:var(--sheet-shadow);
}
html.mobile-prototype .section > .shead{ min-height:44px; padding:14px 16px 8px; background:var(--bg); }
html.mobile-prototype .section .sbody{ padding:2px 16px 20px; }
html.mobile-prototype ul.efflist{ gap:4px; padding:12px 12px 10px; }
html.mobile-prototype ul.efflist li[data-key]{ flex-basis:68px; width:68px; gap:6px; padding:3px 2px; border-radius:10px; }
html.mobile-prototype ul.efflist .effect-thumb{ width:56px; height:56px; flex:0 0 56px; border-radius:9px; }
html.mobile-prototype ul.efflist .effect-name{ font-size:10.5px; color:inherit; }
html.mobile-prototype ul.efflist li.efgroup{ background:var(--border); }
html.mobile-prototype .prow{ min-height:0; margin:0; gap:10px; }
html.mobile-prototype .prow:not(.prow-range){ min-height:40px; }
html.mobile-prototype .prow > label{ max-width:none; font-size:12.5px; }
html.mobile-prototype .prow-range > .val{ font-size:12px; }
html.mobile-prototype #right input[type=range]{ height:30px; min-height:30px; --thumb:18px; }
html.mobile-prototype #right input[type=range]:hover::-webkit-slider-thumb{ transform:none; }
html.mobile-prototype #right input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.1); }
html.mobile-prototype #right .sbody{ row-gap:10px; }
html.mobile-prototype :is(.segwrap,.multiwrap) button{ min-height:36px; padding:7px 12px; font-size:12.5px; border-radius:9px; }
html.mobile-prototype #right input[type=checkbox]{ width:40px; height:24px; border-radius:12px; }
html.mobile-prototype #right input[type=checkbox]::before{ top:3px; left:3px; width:16px; height:16px; }
html.mobile-prototype #right input[type=checkbox]:checked::before{ transform:translateX(16px); }
html.mobile-prototype #right :is(input[type=text],input[type=number],select){ height:40px; min-height:40px; font-size:13px; border-radius:9px; }
html.mobile-prototype .prow input[type=color]{ width:40px; height:40px; flex-basis:40px; border-radius:9px; }
html.mobile-prototype .prow button.pbtn{ min-height:42px; border-radius:10px; font-size:13px; }
html.mobile-prototype .stepwrap button{ width:40px; height:40px; border-radius:9px; }
html.mobile-prototype .fmt-grid button{ min-height:56px; }
html.mobile-prototype #exportBtn{ min-height:48px; font-size:14px; border-radius:12px; }
html.mobile-prototype .qtoggle{ min-height:40px; font-size:13px; }
html.mobile-prototype #zoomBar{ gap:4px; }
html.mobile-prototype #zoomBar button{ width:40px; height:36px; min-height:36px; border-radius:10px; }
html.mobile-prototype #zoomBar button::before{ flex-basis:18px; width:18px; height:18px; -webkit-mask-size:18px 18px; mask-size:18px 18px; }
html.mobile-prototype #tabs{ background:var(--bg); box-shadow:none; }
html.mobile-prototype #tabs button{ font-size:11px; gap:5px; padding:8px 3px; }
html.mobile-prototype #tabs .tab-ico{ width:22px; height:22px; flex-basis:22px; -webkit-mask-size:22px 22px; mask-size:22px 22px; }
html.mobile-prototype :is(.workspace-dialog,.reliability-dialog){ padding:20px; border-radius:18px; }
html.mobile-prototype :is(.workspace-dialog-actions,.reliability-dialog-actions) button,
html.mobile-prototype .reliability-dialog button{ min-height:46px; font-size:14px; border-radius:12px; }
html.mobile-prototype .reliability-banner{ top:calc(64px + var(--safe-top)); }
.help-dialog{ width:min(560px,100%); max-height:calc(100dvh - 40px); overflow-y:auto; }
.help-dialog h3{ margin:16px 0 6px; font-size:13px; font-weight:600; color:var(--text); }
.help-dialog :is(ol,ul){ margin:0; padding-left:18px; }
.help-dialog li{ margin:3px 0; }
.help-dialog p{ margin:0; }
.help-dialog .workspace-dialog-actions{ margin-top:20px; }
.help-dialog .workspace-dialog-actions button{ justify-content:center; text-align:center; }
#stageWrap.hold-original #compareDivider{ display:none !important; }