:root{font-family:var(--kb-font);color:var(--kb-fg);background:var(--kb-bg);color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,.layer-item:focus-visible{}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}.app{min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding:15px clamp(18px,2.4vw,38px);background:#0d0e14;border-bottom:1px solid #252631}.identity,.top-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.identity{font-size:12px;font-weight:750;letter-spacing:.06em}.slash{color:#454654;font-size:19px;font-weight:300}.product{color:#fff;letter-spacing:.13em}.version{color:#bd9fff;border:1px solid #53476b;border-radius:3px;padding:4px 7px;font-size:9px;letter-spacing:.08em}.top-actions{gap:7px}.autosave{font-size:9px;letter-spacing:.1em;color:#707380;margin-right:12px;white-space:nowrap}.button,.icon-button,.pill,.help-button{min-height:36px;padding:8px 14px}.icon-button{font-size:19px;padding:2px 12px;line-height:1}.button.subtle{background:transparent}.studio{display:grid;grid-template-columns:290px minmax(0,1fr) 296px;flex:1;min-height:calc(100dvh - 79px)}.sidebar{min-width:0;background:#111217;display:flex;flex-direction:column}.layers-panel{border-right:1px solid #292a34}.inspector-panel{border-left:1px solid #292a34}.panel-heading{min-height:44px;border-bottom:1px solid #252630;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:9px;font-weight:800;letter-spacing:.16em;color:#747583}.panel-heading span{color:#aa90ce}.panel-title-row{padding:24px 22px 17px;display:flex;align-items:center;justify-content:space-between}.panel-title-row h2{font-size:23px;letter-spacing:-.055em;margin:0;font-weight:650}.count{color:#8b8b9a;font:600 11px/1.3 ui-monospace,monospace;border:1px solid #343542;border-radius:4px;padding:5px 7px}.help-button{border:1px solid #353642;border-radius:50%;width:24px;height:24px;padding:0;min-height:0;font-size:11px;color:#a3a3ad}.add-panel{margin:0 14px;padding:11px;border:1px solid #2d2e37;border-radius:8px;background:#15161d}.add-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.add-highlight{border:1px dashed #66616f;background:#20202b;color:#ede9f4;padding:12px 4px;border-radius:5px;font:650 10px ui-monospace,monospace;white-space:nowrap}.add-highlight:hover{border-color:#c9aeff;background:#2b253a}.add-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:13px;column-gap:3px;margin-top:15px}.add-grid button{border:0;background:transparent;color:#b1afb9;display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px 1px;font-size:10px;border-radius:5px}.add-grid button:hover{color:#f4efff;background:#23232c}.add-icon{font-size:21px;line-height:24px;font-weight:400;color:#ded7eb}.micro-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 21px 12px;color:#91909d;font-size:9px;font-weight:750;letter-spacing:.15em}.micro-heading span{font-weight:400;color:#555662}.layer-list{padding:0 11px;display:flex;flex-direction:column;gap:5px;min-height:90px}.layer-item{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:54px;border:1px solid #2a2b35;border-radius:6px;background:#171820;padding:6px 7px;color:#e1dfeb;cursor:pointer}.layer-item:hover{border-color:#666176}.layer-item.selected{background:#292536;border-color:#a487da;box-shadow:inset 3px 0 0 #bc9df0}.layer-item.dragging{opacity:.48}.drag-handle{font-size:16px;color:#61616d;touch-action:none;cursor:grab}.layer-name{display:block;font-size:11px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-kind{display:block;font-size:9px;color:#7e7d8d;text-transform:uppercase;letter-spacing:.07em;margin-top:3px}.layer-actions{display:flex;gap:0}.layer-actions button{display:grid;place-items:center;border:0;background:transparent;color:#9693a3;font-size:15px;padding:5px 3px;min-width:19px;border-radius:4px}.layer-actions button:hover{color:#fff;background:#454053}.layer-actions .remove:hover{color:#ffa0b1}.layer-item.muted .layer-name{color:#7a7887}.layer-empty{font-size:11px;color:#82808e;line-height:1.6;padding:15px}.presets-area{margin-top:auto;padding:29px 17px 18px}.section-split{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-split h3{font-size:12px;margin:0;font-weight:650}.section-split span{font-size:9px;letter-spacing:.1em;color:#777481}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.preset{padding:0;background:#1d1d25;border:1px solid #34333e;color:#eae6f2;border-radius:7px;overflow:hidden;text-align:left;transition:border-color .15s}.preset:hover,.preset.active{border-color:#b692ef}.preset-swatch{height:68px;position:relative;display:block;overflow:hidden}.preset-swatch:after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 62% 72%,transparent 0 8px,#ffffff29 9px 10px,transparent 11px 16px);transform:rotate(-22deg) scale(1.5)}.preset[data-preset="gold"] .preset-swatch{background:radial-gradient(circle at 67% 85%,#171413 5%,#82330e 34%,#ffa02a 62%,#fbbe80)}.preset[data-preset="midnight"] .preset-swatch{background:radial-gradient(circle at 70% 75%,#151928,#303b95 40%,#986dc3 75%,#251b44)}.preset[data-preset="signal"] .preset-swatch{background:linear-gradient(140deg,#0b1112,#006d63 45%,#a9ffde)}.preset[data-preset="mono"] .preset-swatch{background:linear-gradient(130deg,#080808,#858585,#e8e8e8)}.preset-label{display:flex;align-items:center;justify-content:space-between;padding:9px;font-size:10px;font-weight:650}.preset-label span{font-size:13px;color:#aaa}.aside-foot{border-top:1px solid #262730;padding:13px 16px;font-size:9px;text-align:center;letter-spacing:.08em;color:#656570}.aside-foot span{color:#a88de0}.workspace{position:relative;display:flex;flex-direction:column;min-width:0;background:radial-gradient(ellipse at 52% 40%,#1d1a23 0%,#111116 60%,#0c0c11 100%)}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 23px;border-bottom:1px solid #24242c;flex-wrap:wrap}.project-title{display:flex;gap:7px;align-items:center;min-width:0}.project-title label,.canvas-footer label{font-size:9px;font-weight:800;color:#777383;letter-spacing:.12em}.project-title input{border:0;border-bottom:1px solid transparent;outline:none;background:transparent;color:#ede8f3;font-size:13px;font-weight:650;width:150px;max-width:44vw;padding:5px}.project-title input:focus{border-bottom-color:#ad8dde}.workspace-tools{display:flex;gap:6px;flex-wrap:wrap}.pill{min-height:32px;padding:6px 11px}.canvas-space{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 27px;min-height:370px;position:relative;overflow:hidden;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:32px 32px}.canvas-outline{position:relative;display:flex;max-width:100%;max-height:68dvh;box-shadow:0 18px 95px #0009,0 0 0 1px #ffffff2b;aspect-ratio:4/5;overflow:hidden;background:#000}.canvas-outline canvas{display:block;max-width:100%;max-height:68dvh;width:100%;height:100%;object-fit:contain}.canvas-watermark{position:absolute;bottom:8px;left:12px;right:12px;font:600 8px ui-monospace,monospace;letter-spacing:.1em;color:#fff9;text-shadow:0 1px 4px #000;display:flex;justify-content:space-between;pointer-events:none}.drop-indicator{position:absolute;inset:15px;border:2px dashed #cda6ff;background:#160f26da;color:#fff;display:none;align-items:center;justify-content:center;text-align:center;font-size:15px;letter-spacing:.08em;font-weight:700;pointer-events:none;z-index:20}.canvas-space.is-drag-over .drop-indicator{display:flex}.canvas-footer{border-top:1px solid #292833;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 21px;flex-wrap:wrap;font:600 10px ui-monospace,monospace;letter-spacing:.08em;color:#a3a1ac}.live-dot{display:inline-block;width:6px;height:6px;background:#b6f1aa;border-radius:50%;margin-right:6px;box-shadow:0 0 9px #7cda81aa}.canvas-footer-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.canvas-footer select{border:1px solid #3b3948;background:#201e27;color:#dfd9e7;font-size:10px;border-radius:5px;padding:7px 8px;max-width:155px}.workspace-bottom{display:flex;justify-content:space-between;gap:10px;padding:10px 22px;font-size:9px;letter-spacing:.12em;color:#676471}.inspector-body{padding:0 19px 20px;flex:1}.inspector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #292932;padding:0 0 14px;gap:8px}.inspector-header strong{font-size:13px}.inspector-header small{font-size:9px;color:#8c8a99}.inspector-group{margin-bottom:25px}.group-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2b2a35;margin-bottom:14px;padding-bottom:9px;font-size:9px;font-weight:800;color:#9894a3;letter-spacing:.13em}.control-field{margin:0 0 18px}.control-field .control-label{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:8px;color:#b9b4c4;font-size:11px}.control-field output{font:600 10px ui-monospace,monospace;color:#ede0ff}.control-field input[type=range]{width:100%;accent-color:#b898f0;height:14px;cursor:pointer}.control-field input[type=text],.control-field input[type=number],.control-field textarea,.control-field select{width:100%;background:#20202a;border:1px solid #3a3946;border-radius:5px;color:#f3eef8;padding:10px;font-size:12px;min-width:0}.control-field textarea{min-height:75px;resize:vertical}.control-field input[type=color]{width:100%;height:39px;padding:3px;background:#22212b;border:1px solid #494351;border-radius:5px;cursor:pointer}.control-field .checkbox-line{display:flex;align-items:center;gap:9px;color:#d8d2e0;font-size:11px}.control-field input[type=checkbox]{accent-color:#b898f0}.dual-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stacked-fields{display:grid;gap:12px}.empty-inspector{font-size:12px;line-height:1.8;color:#a29cad;background:#1b1a23;border:1px dashed #454151;border-radius:9px;padding:18px}.inspector-note{font-size:10px;line-height:1.65;color:#878393}.inspector-command{display:block;width:100%;text-align:center;border:1px solid #423a54;background:#24202f;color:#e6dcf9;border-radius:6px;padding:10px;margin-bottom:10px;font-size:11px;font-weight:650}.inspector-command:hover{background:#30273f;border-color:#ad8be3}.export-section{border-top:1px solid #272731;padding:20px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.export-grid button{background:#24212b;color:#e0d9e9;border:1px solid #3c3746;border-radius:5px;padding:12px 7px;font-size:10px;font-weight:700}.export-grid button:hover{border-color:#b18fe3}.helper{font-size:10px;line-height:1.7;color:#817f8c;margin:13px 0 0}.app-footer{border-top:1px solid #262630;display:flex;justify-content:space-between;gap:8px;font-size:9px;font-weight:700;letter-spacing:.06em;padding:15px 20px;color:#787685}.app-footer a:hover{color:#eee}.mobile-switch{display:none}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,14px);background:#eee6ff;color:#20192e;border:1px solid #c3a3ff;border-radius:8px;padding:12px 18px;min-width:140px;max-width:min(92vw,430px);z-index:120;box-shadow:0 20px 70px #000b;font-size:12px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{background:#181720;color:#f0eaf5;border:1px solid #4a4158;border-radius:12px;width:min(92vw,500px);padding:0;box-shadow:0 35px 90px #000b}dialog::backdrop{background:#000b}.dialog-inner{padding:26px}.dialog-inner h2{font-size:17px;margin:0}.dialog-inner p{font-size:12px;color:#b6b0c1;line-height:1.75}.dialog-inner .section-split{margin-bottom:24px}.dialog-inner .section-split button{background:transparent;color:#fff;border:0;cursor:pointer}
@media(max-width:1280px){.studio{grid-template-columns:252px minmax(0,1fr) 265px}.panel-heading{padding:0 17px}.panel-title-row{padding:20px 16px 15px}.inspector-body{padding:0 13px 12px}.canvas-space{padding:24px 16px}.canvas-outline,.canvas-outline canvas{max-height:60dvh}.topbar{padding:14px 17px}.autosave{display:none}.workspace-header{padding:14px 16px}}
@media(max-width:940px){.studio{grid-template-columns:226px minmax(0,1fr)}.inspector-panel{grid-column:1/-1;border-left:0;border-top:1px solid #33313e;display:block}.inspector-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px;padding:0 24px 8px}.inspector-header{grid-column:1/-1}.export-section{max-width:100%}.top-actions .button{padding:8px 10px}.topbar{gap:10px}.version{display:none}.canvas-outline,.canvas-outline canvas{max-height:60dvh}.canvas-space{min-height:390px}}
@media(max-width:690px){.topbar{min-height:60px;padding:10px 12px}.identity{gap:7px;font-size:10px}.slash{display:none}.product{letter-spacing:.09em}.top-actions{gap:5px}.top-actions .button.subtle,.autosave{display:none}.top-actions .icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:29px;padding:4px 6px}.top-actions .button.accent{padding:8px 11px;min-height:35px}.mobile-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 10px;background:#111118;border-bottom:1px solid #292832}.mobile-switch button{background:#1d1d26;border:1px solid #343440;color:#92909c;border-radius:5px;font-size:11px;font-weight:750;padding:10px;min-height:40px}.mobile-switch button[aria-selected=true]{background:#33283e;border-color:#a180ca;color:#f3e9ff}.studio{display:flex;flex-direction:column;min-height:0}.workspace{order:0}.layers-panel{order:1;border-right:0;border-top:1px solid #34313c;display:none}.inspector-panel{order:2;display:none;border-left:0;border-top:1px solid #34313c}.studio[data-mobile="layers"] .layers-panel{display:flex}.studio[data-mobile="controls"] .inspector-panel{display:block}.workspace-header{padding:9px 12px;gap:6px}.project-title label{display:none}.project-title input{width:120px;padding:4px 0;font-size:12px}.workspace-tools{gap:4px}.workspace-tools .pill{font-size:10px;padding:5px 8px;min-height:31px}.canvas-space{min-height:0;padding:14px 12px;max-height:calc(64svh - 20px)}.canvas-outline,.canvas-outline canvas{max-height:52svh;max-width:100%}.canvas-footer{padding:9px 11px;gap:8px;font-size:9px}.canvas-footer-controls{gap:6px}.canvas-footer select{font-size:10px;padding:6px;max-width:128px}.workspace-bottom{display:none}.panel-title-row{padding:19px 16px 15px}.layer-list{padding:0 12px}.add-panel{margin:0 12px}.presets-area{margin-top:0;padding:23px 15px}.aside-foot{display:none}.inspector-body{display:block;padding:0 17px 14px}.inspector-group{margin-bottom:23px}.app-footer{margin-bottom:8px}}
@media(max-width:370px){.workspace-tools .pill{font-size:0}.workspace-tools .pill::first-letter{font-size:15px}.canvas-footer-controls label{display:none}.top-actions .button.accent span{display:none}.canvas-footer select{max-width:120px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:0ms!important}}


/* v2: Mobile-first canvas and floating creative studio */
.mobile-dock,.mobile-sheet-scrim{display:none}
.creative-dialog{width:min(900px,94vw);max-width:94vw;max-height:min(90dvh,980px);border-radius:18px;background:#17151e;color:#f4eef9;border:1px solid #51435e;padding:0;overflow:hidden;box-shadow:0 20px 110px #000d}
.creative-dialog::backdrop{background:#050409d9;backdrop-filter:blur(6px)}
.browser-shell{max-height:min(90dvh,950px);display:flex;flex-direction:column;overflow:hidden;padding:23px}
.browser-top{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px}
.browser-top h2{margin:4px 0 0;letter-spacing:-.045em;font-size:clamp(20px,3vw,29px)}
.section-kicker{font:800 9px ui-monospace,monospace;letter-spacing:.15em;color:#af90df;margin:0 0 9px}
.dialog-close{border:1px solid #484151;color:#ece6f1;border-radius:8px;background:#24212d;min-width:42px;min-height:42px;font-size:17px}
#shader-search{background:#25212d;border:1px solid #4a4056;border-radius:9px;padding:15px;color:#fff;width:100%;font-size:14px;min-height:48px;outline:none}
#shader-search:focus{border-color:#b998ed}
.browser-categories{display:flex;gap:7px;padding:16px 0 13px;overflow-x:auto;flex-shrink:0;scrollbar-width:thin}
.browser-categories button{white-space:nowrap;border:1px solid #45404f;color:#bdb4ca;background:#221f2a;padding:10px 15px;border-radius:99px;font-size:11px;font-weight:750}
.browser-categories button.active{color:#271b33;background:#e2d1ff;border-color:#e2d1ff}
.browser-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:4px 2px 18px;min-height:180px;align-content:start}
.browser-card{display:flex;flex-direction:column;gap:0;text-align:left;background:#23212a;border:1px solid #393343;border-radius:10px;color:#f0e9f7;padding:0;overflow:hidden;min-width:0}
.browser-card:hover,.browser-card:focus-visible{border-color:#b99adb}
.browser-card canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#29232d}
.browser-card strong{font-size:12px;padding:10px 10px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-card small{font-size:10px;color:#a69bad;padding:0 10px 11px}
.browser-empty{grid-column:1/-1;color:#afa5b8;text-align:center;padding:55px 12px;font-size:13px}
.export-intro{font-size:13px;line-height:1.6;color:#b9b2be}
.export-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}
.export-tile-grid button{display:flex;align-items:start;flex-direction:column;gap:9px;text-align:left;background:#26212e;color:#f1e9f8;padding:20px;border:1px solid #40354b;border-radius:9px;min-height:105px}
.export-tile-grid button:hover{border-color:#cfb4f6}
.export-tile-grid strong{font-size:16px}.export-tile-grid span{font-size:11px;color:#b1a9bc}
.control-field .control-label input[type=number]{width:78px;min-width:0;padding:7px 6px;font-size:12px;font-weight:750;color:#efe2ff;border:1px solid #393442;background:#241e2d;border-radius:5px;text-align:right}
.control-field .control-label input[type=number]:focus{border-color:#b79cde}
.canvas-outline canvas{touch-action:none;user-select:none;-webkit-user-select:none}
.canvas-outline.has-draggable{cursor:move}
.drag-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:6px 11px;border-radius:99px;white-space:nowrap;background:#16111fb8;border:1px solid #ffffff42;color:#fff;font-size:10px;letter-spacing:.04em;pointer-events:none;z-index:3}
@media(max-width:940px){.browser-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:690px){
 html,body{overscroll-behavior:none}
 .app{height:100dvh;overflow:hidden}
 .mobile-switch{display:none}
 .topbar{z-index:14;flex-shrink:0}
 .top-actions .button.accent{font-size:11px}
 .top-actions .icon-button{font-size:18px}
 .studio{display:block;flex:1;min-height:0;height:calc(100dvh - 134px);position:relative;overflow:hidden}
 .workspace{height:100%;display:flex;overflow:hidden}
 .workspace-header{flex-shrink:0}
 .workspace-tools .pill{font-size:11px}
 .canvas-space{flex:1;min-height:0;max-height:none;padding:12px;overflow:hidden}
 .canvas-outline,.canvas-outline canvas{max-height:none}
 .canvas-footer{min-height:51px;flex-shrink:0}
 .canvas-footer-controls{gap:5px}
 .canvas-footer select{max-width:125px}
 .mobile-dock{height:calc(67px + env(safe-area-inset-bottom,0px));padding:6px 8px calc(7px + env(safe-area-inset-bottom,0px));background:#14121a;border-top:1px solid #39313f;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;flex-shrink:0;position:relative;z-index:40}
 .mobile-dock button{min-width:0;min-height:54px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:1px solid transparent;border-radius:8px;color:#aaa0b4;background:transparent;font-size:10px;font-weight:700}
 .mobile-dock button[aria-pressed=true],.mobile-dock button:hover{background:#30253c;color:#edddff;border-color:#57436d}
 .dock-symbol{font-size:23px;line-height:25px;font-weight:400}
 .mobile-sheet-scrim{display:none;position:fixed;inset:0;background:#0008;z-index:24}
 .studio[data-mobile=layers] .mobile-sheet-scrim,.studio[data-mobile=controls] .mobile-sheet-scrim{display:block}
 .studio .layers-panel,.studio .inspector-panel{position:fixed;z-index:30;left:0;right:0;bottom:calc(67px + env(safe-area-inset-bottom,0px));top:clamp(170px,39dvh,410px);display:none;overflow-y:auto;overscroll-behavior:contain;background:#191720;border-radius:17px 17px 0 0;border:1px solid #493d54;box-shadow:0 -8px 40px #0008;padding-bottom:10px}
 .studio[data-mobile=layers] .layers-panel{display:flex}
 .studio[data-mobile=controls] .inspector-panel{display:block}
 .layers-panel .panel-heading,.inspector-panel .panel-heading{position:sticky;top:0;z-index:2;background:#1b1922;min-height:42px}
 .layers-panel .panel-heading:before,.inspector-panel .panel-heading:before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:37px;height:4px;background:#5a5064;border-radius:8px}
 .layer-item{min-height:59px}
 .layer-actions button{min-width:26px;min-height:32px;font-size:18px}
 .presets-area{padding-bottom:25px}
 .canvas-watermark{font-size:7px}
 .canvas-footer{padding:8px 10px}
 .canvas-footer label{font-size:8px}
 .inspector-body{padding-top:2px}
 .inspector-group{margin-bottom:18px}
 .control-field{margin-bottom:16px}
 .control-field input[type=range]{height:23px}
 .creative-dialog{width:100%;max-width:100%;max-height:88dvh;height:min(83dvh,790px);border-radius:19px 19px 0 0;position:fixed;margin:0;top:auto;bottom:0;left:0;right:0;border-left:0;border-right:0;border-bottom:0}
 .creative-dialog[open]{display:block}
 .browser-shell{max-height:100%;padding:19px 14px calc(17px + env(safe-area-inset-bottom,0px))}
 .browser-top h2{font-size:22px}
 .browser-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .browser-card strong{font-size:12px;padding:9px 9px 3px}
 .browser-card small{font-size:9px}
 .browser-categories{padding:12px 0}
 .browser-categories button{min-height:40px}
 .export-tile-grid button{padding:16px;min-height:93px}
 .export-intro{margin-bottom:3px}
}
@media(max-width:360px){.topbar{gap:4px}.top-actions{gap:1px}.top-actions .icon-button{min-width:25px;padding:4px}.mobile-dock{padding-left:3px;padding-right:3px}.mobile-dock button{font-size:9px}}

.preset[data-preset="aurora"] .preset-swatch{background:radial-gradient(ellipse at 35% 80%,#4b327f 1%,#78d4b9 34%,#092237 76%)}
.preset[data-preset="pixel"] .preset-swatch{background:repeating-linear-gradient(90deg,#ab7aff 0 8px,#5b3abf 8px 16px,#ffad9f 16px 24px)}
.preset[data-preset="cymatics"] .preset-swatch{background:radial-gradient(circle at center,#fae0a6 1%,#bf83bd 36%,#160c27 84%)}
.preset[data-preset="retro"] .preset-swatch{background:repeating-linear-gradient(0deg,#0f1a25 0 3px,#207577 3px 6px,#de77aa 6px 8px)}


/* Mobile QA pass: preserve a visible canvas while editing and expose close buttons. */
.panel-heading-tools{display:inline-flex;align-items:center;gap:10px}
.sheet-close{display:none;border:1px solid #494153;border-radius:7px;color:#f4eafb;background:#2a2634;min-width:32px;min-height:32px;font-size:13px;align-items:center;justify-content:center}
@media(max-width:690px){
 .studio .layers-panel,.studio .inspector-panel{top:clamp(270px,52dvh,540px);bottom:calc(67px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 34px #0009}
 .studio .layers-panel .panel-heading,.studio .inspector-panel .panel-heading{padding-top:7px;padding-bottom:4px;min-height:45px}
 .sheet-close{display:inline-flex}
 .mobile-sheet-scrim{display:none!important}
 .canvas-space{padding:10px 12px}
 .canvas-outline{flex-shrink:1}
 .canvas-outline canvas{touch-action:none}
 .studio[data-mobile="layers"] .workspace,.studio[data-mobile="controls"] .workspace{filter:none;pointer-events:auto}
 .studio[data-mobile="layers"] .workspace-tools,.studio[data-mobile="controls"] .workspace-tools{position:relative;z-index:1}
 .inspector-panel .inspector-body{padding-bottom:30px}
 .export-section{padding-bottom:20px}
}


/* Prevent iPhone Safari auto-zooming the page when a small form control is focused. */
@media(max-width:690px){
 input[type="text"],input[type="search"],input[type="number"],textarea,select{font-size:16px!important}
 .project-title input{max-width:136px}
 .canvas-footer select{max-width:164px}
 .control-field .control-label input[type="number"]{font-size:16px!important}
 .control-field textarea{line-height:1.5}
 .mobile-dock button{touch-action:manipulation}
}


/* Native Android pull-to-refresh restoration.
   Keep browser-level vertical overscroll active while preserving the editor's
   individual canvas drag gestures and scrollable bottom-sheet panels. */
@media(max-width:690px){
 html,body{overscroll-behavior-y:auto!important;overflow-x:clip;overflow-y:auto!important}
 body{min-height:calc(100dvh + 1px)}
 .app{height:auto!important;min-height:100dvh;overflow:visible!important}
 .studio{height:calc(100dvh - 134px);flex:0 0 auto;min-height:0;overflow:hidden}
 .workspace{min-height:0}
 .mobile-dock{position:sticky;bottom:0}
 .refresh-button{display:inline-flex!important;align-items:center;justify-content:center}
 .top-actions .refresh-button{min-width:29px;min-height:34px;font-size:23px;font-weight:450;padding:0 5px;color:#d7c1ff}
 .top-actions .refresh-button:hover{background:#342844}
 .version{display:none}
}