@charset "UTF-8";
:root{color-scheme:dark;--bg:#101215;--panel:#171a1e;--panel2:#1d2127;--field:#111419;--line:#303640;--text:#e7e9ed;--muted:#99a2b0;--accent:#ef6477;--accentInk:#211015;--hover:#262d34;--danger:#ffacb0;--shadow:0 12px 40px #0005;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);height:100dvh;overflow:hidden}body[data-theme=light]{color-scheme:light;--bg:#e9ecef;--panel:#fff;--panel2:#f4f6f8;--field:#fff;--line:#d8dde3;--text:#18212c;--muted:#596575;--accent:#bf3049;--accentInk:#fff;--hover:#edf2f2;--danger:#b62739;--shadow:0 12px 40px #17314b1c}
button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:3px}button{cursor:pointer;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:7px;min-height:34px;padding:6px 10px;transition:background .12s}button:hover{background:var(--hover);border-color:var(--muted)}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:var(--accent);border-color:var(--accent);color:var(--accentInk);font-weight:700}.primary:hover{filter:brightness(.93);background:var(--accent)}.danger{color:var(--danger)}.ghost{background:transparent}.wide{width:100%}a{color:var(--accent)}input,select,textarea{min-width:0;max-width:100%;border:1px solid var(--line);border-radius:6px;padding:8px;background:var(--field);color:var(--text)}input[type=number]{width:100%}textarea{resize:vertical;width:100%;min-height:76px;line-height:1.5}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}input[type=color]{width:36px;min-width:36px;padding:3px;height:34px}label{min-width:0}h1,h2,h3,h4,p{margin-top:0}h2{font-size:1.25rem}h3{font-size:1rem}small,.help{font-size:12px;color:var(--muted);line-height:1.55}.help{margin:8px 0 12px}.muted{color:var(--muted)}.row{display:flex;gap:8px;align-items:center}.row>*{min-width:0}.row .grow{flex:1}.stack{display:grid;gap:10px}.button-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.button-row button{flex:1}.pill{display:inline-block;padding:4px 7px;border:1px solid var(--line);border-radius:20px;font-size:11px;color:var(--muted)}
.app-header{height:72px;padding:12px 18px;display:flex;align-items:center;gap:18px;background:var(--panel);border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;text-decoration:none;color:var(--text);font-weight:700;white-space:nowrap;letter-spacing:-.4px}.brand small{display:block;color:var(--accent);font-size:11px;letter-spacing:.3px;margin-top:3px}.brand-icon{width:35px;height:38px;display:grid;place-items:center;background:var(--accent);color:var(--accentInk);border-radius:9px;font-size:25px;position:relative}.brand-icon span{font-size:13px;position:absolute;right:4px;top:1px}.document-name{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.save-status{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}.save-status::before{content:'●';color:var(--accent);font-size:9px;padding-right:6px}.header-actions{display:flex;gap:6px;flex-shrink:0}.workspace{height:calc(100dvh - 72px);display:grid;grid-template-columns:236px minmax(240px,1fr) 312px;overflow:hidden}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}.rail{padding:12px;display:grid;gap:4px;border-bottom:1px solid var(--line)}.rail button{text-align:left;display:flex;align-items:center;gap:10px;background:transparent;border-color:transparent}.rail b{font-weight:500;font-size:12px}.rail span{font-size:17px;width:22px;text-align:center}.rail .active{background:var(--hover);color:var(--accent);border-color:var(--line)}#collapse-sidebar{min-height:25px;font-size:11px}#sidebar-content{flex:1;overflow:auto;padding:16px 12px}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}.guide-button{margin:10px 12px;background:transparent;border:0;text-align:left;font-size:12px;color:var(--muted)}.section-item{display:flex;gap:5px;align-items:center;margin-bottom:5px}.section-item>button{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;font-size:12px}.section-item .minor{flex:0;font-size:12px;min-width:27px;padding:4px;background:transparent}.section-item .selected{border-color:var(--accent);color:var(--accent)}.section-type{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:3px}.block-item{margin-left:12px}.block-item button{font-size:11px}.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette button{display:grid;gap:8px;justify-items:start;padding:13px 11px;text-align:left;font-size:11px;min-height:75px}.palette button span{font-size:22px;color:var(--accent)}.palette button[draggable]{cursor:grab}.asset-entry{border:1px solid var(--line);border-radius:7px;padding:8px;display:flex;align-items:center;gap:10px;overflow:hidden}.asset-entry img{height:46px;width:52px;object-fit:contain;background:var(--field);border-radius:4px}.asset-entry .asset-name{flex:1;overflow-wrap:anywhere;font-size:12px}.asset-entry small{display:block;font-size:10px}
.editor-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}.preview-controls{min-height:60px;display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}.segmented{display:flex;padding:3px;background:var(--field);border:1px solid var(--line);border-radius:8px;margin-right:auto}.segmented button{border:0;background:transparent;font-size:12px}.segmented .active{background:var(--hover);color:var(--accent)}.preview-controls select{font-size:11px;max-width:170px}.preview-controls button{min-height:30px}.preview-caption{padding:10px 16px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:12px;flex-shrink:0}.preview-viewport{flex:1;min-height:0;overflow:hidden;position:relative;display:grid;place-items:start center;padding:12px 16px 18px;background:radial-gradient(var(--line) .7px,transparent .7px);background-size:12px 12px}#frame-wrap{overflow:hidden;box-shadow:var(--shadow);border-radius:8px;position:relative;flex:none;background:#0c111a}#preview{border:0;display:block;transform-origin:top left;background:#0c111a}.editor-status{height:31px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:10px;color:var(--muted);padding:0 14px;border-top:1px solid var(--line);flex-shrink:0}#floating-toolbar{position:absolute;z-index:10;max-width:calc(100% - 28px);padding:5px;background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:9px;display:flex;gap:5px;overflow:auto;white-space:nowrap}#floating-toolbar[hidden]{display:none}#floating-toolbar input[type=number]{width:65px}#floating-toolbar select{max-width:140px;font-size:12px}#floating-toolbar button{min-width:32px}#floating-toolbar input,#floating-toolbar select{height:32px;padding:4px}
.inspector{background:var(--panel);border-left:1px solid var(--line);min-height:0;display:flex;flex-direction:column}.inspector-top{display:flex;gap:6px;align-items:center;height:49px;border-bottom:1px solid var(--line);padding:10px 14px}.inspector-top strong{font-size:10px;letter-spacing:1.3px;margin-right:auto}.inspector-top button{border:0;background:transparent;font-size:18px;min-height:28px;padding:2px 7px}#inspector-content{padding:16px 13px 28px;overflow:auto;flex:1}.inspector-title{margin-bottom:16px}.inspector-title h2{margin:0 0 6px}.component-group{border:1px solid var(--line);border-radius:8px;margin:11px 0;background:var(--panel2);overflow:hidden}.component-group>summary{padding:11px 10px;font-size:12px;font-weight:600;cursor:pointer;user-select:none}.component-group>summary::marker{color:var(--muted)}.group-body{padding:4px 10px 12px;display:grid;gap:11px}.field{display:grid;gap:5px}.field>span,.field-title{font-size:11px;color:var(--muted)}.field input,.field select,.field textarea{width:100%;font-size:12px}.field.inline{display:flex;justify-content:space-between;align-items:center}.field.inline input{width:17px}.field-color{display:flex;gap:6px}.field-color input[type=text]{min-width:0;width:100%}.field-color input[type=color]{width:36px}.array-item{border:1px solid var(--line);border-radius:6px;padding:9px;background:var(--field);margin-bottom:8px}.array-heading{display:flex;align-items:center;gap:4px;margin-bottom:10px}.array-heading strong{font-size:11px;flex:1;overflow:hidden}.array-heading button{font-size:11px;min-height:25px;padding:2px 6px}.color-list{display:grid;gap:5px}.asset-field{display:flex;gap:5px}.asset-field input{min-width:0}.asset-field button{font-size:11px}.empty-inspector{padding:25px 5px}.empty-inspector .empty-symbol{font-size:40px;color:var(--accent);margin-bottom:20px}.tree-cell{display:flex;gap:4px;margin:4px 0}.tree-cell button{flex:1;text-align:left;font-size:11px}.grid-preview{display:grid;gap:4px;border:1px dashed var(--line);padding:6px;border-radius:5px}.grid-preview button{min-width:0;font-size:10px;padding:5px}.note{background:var(--hover);border-radius:7px;padding:11px;font-size:12px;color:var(--muted);line-height:1.6}.selection-badge{border-left:3px solid var(--accent);padding:5px 9px;font-size:12px;margin-bottom:15px}
body.sidebar-collapsed .workspace{grid-template-columns:64px minmax(240px,1fr) 312px}body.sidebar-collapsed .rail{padding:12px 7px}body.sidebar-collapsed .rail button{padding:6px;justify-content:center}body.sidebar-collapsed .rail b,body.sidebar-collapsed #sidebar-content,body.sidebar-collapsed .guide-button{display:none}body.inspector-hidden .workspace{grid-template-columns:236px minmax(240px,1fr)}body.inspector-hidden .inspector{display:none}body.inspector-hidden.sidebar-collapsed .workspace{grid-template-columns:64px minmax(240px,1fr)}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);width:min(680px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:0}dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.modal-heading{position:sticky;top:0;background:var(--panel);z-index:1;padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}.modal-heading h2{margin:0;flex:1;font-size:18px}.modal-heading button{background:transparent;border:0;font-size:22px}#modal-content{padding:22px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-grid button{text-align:left;padding:16px;min-height:100px}.choice-grid button strong{display:block;margin-bottom:8px}.choice-grid button small{display:block}.choice-grid button.selected{border-color:var(--accent);background:var(--hover)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .full{grid-column:1/-1}.progress{padding:35px;text-align:center}.spinner{height:25px;width:25px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);z-index:100;background:var(--accent);color:var(--accentInk);border-radius:8px;padding:12px 19px;box-shadow:var(--shadow);max-width:min(600px,90vw);font-size:13px}#toast.error{background:var(--danger);color:#2a1318}.guide-list{padding-left:20px;color:var(--muted);line-height:1.75}.guide-list strong{color:var(--text)}.code-editor{font-family:ui-monospace,monospace!important;min-height:200px;font-size:12px!important;tab-size:2}.asset-grid{display:grid;gap:8px;max-height:350px;overflow:auto}.list-choice{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.list-choice label{display:flex;gap:5px;align-items:center;font-size:12px}.welcome-tag{font-size:11px;letter-spacing:1.3px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
@media(max-width:1150px){.document-name,.save-status{display:none}.app-header{justify-content:space-between;gap:10px}.workspace{grid-template-columns:200px minmax(200px,1fr) 280px}body.sidebar-collapsed .workspace{grid-template-columns:60px minmax(200px,1fr) 280px}.preview-controls{padding:8px}.preview-controls select{max-width:128px}.editor-status span:last-child{display:none}}
@media(max-width:850px){.app-header{height:auto;min-height:72px;flex-wrap:wrap;padding:9px 12px}.header-actions{gap:3px}.header-actions button{font-size:11px;padding:6px}.workspace{height:calc(100dvh - 100px);grid-template-columns:60px minmax(160px,1fr) 260px}.rail{padding:10px 6px}.rail b,#sidebar-content,.guide-button{display:none}.rail button{padding:6px;justify-content:center}.workspace .inspector{width:260px}body.inspector-hidden .workspace{grid-template-columns:60px minmax(160px,1fr)}.preview-caption{font-size:10px}.brand{font-size:13px}.preview-controls{gap:4px}.segmented{width:100%;margin-right:0;justify-content:center}}
@media(max-width:600px){.workspace{grid-template-columns:50px minmax(100px,1fr)}.inspector{position:fixed;right:0;top:110px;bottom:0;z-index:20;box-shadow:var(--shadow);max-width:90vw}.preview-controls select{max-width:100px}.form-grid,.choice-grid{grid-template-columns:1fr}.app-header{min-height:110px}.workspace{height:calc(100dvh - 110px)}.brand-icon{display:none}.header-actions{flex-wrap:wrap}.header-actions #save{display:none}body.sidebar-collapsed .workspace{grid-template-columns:50px minmax(100px,1fr)}.preview-viewport{padding:8px}.editor-status{font-size:9px}}
.workspace { height: calc(100dvh - var(--app-header-height,72px)); }
@media(max-width:600px){.inspector{top:var(--app-header-height,110px)}}

/* Visual layout editing and compact creative tools. */
.preview-viewport {display:flex;justify-content:center;align-items:flex-start;overflow:hidden;overflow-anchor:none;}
#frame-wrap {flex:0 0 auto;margin:0;align-self:flex-start;}
.scope-notice {border:1px solid var(--line);border-left:3px solid var(--accent);padding:9px;border-radius:6px;display:grid;gap:6px;margin-bottom:14px;}
.scope-notice strong {font-size:12px;}.scope-notice button {font-size:11px;}
.scrubbable {cursor:ew-resize;}.scrubbing,.scrubbing * {cursor:ew-resize!important;user-select:none!important;}
.ratio-control {display:grid;gap:12px;padding:8px 0;min-width:0;}
.ratio-track {height:46px;position:relative;display:flex;border:1px solid var(--line);border-radius:7px;}
.ratio-segment {display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,var(--field));font-size:10px;min-width:0;overflow:hidden;white-space:nowrap;}
.ratio-segment:nth-child(even) {background:color-mix(in srgb,var(--accent) 28%,var(--field));}
.ratio-handle {position:absolute;top:-4px;bottom:-4px;min-height:0;width:14px;padding:0;transform:translateX(-50%);border:2px solid var(--panel);background:var(--accent);cursor:col-resize;touch-action:none;border-radius:6px;z-index:1;}
.ratio-handle::after {content:'⋮';color:var(--accentInk);font-size:13px;}
.ratio-legend {display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;font-size:11px;color:var(--muted);}
.direction-choices {display:grid;align-content:center;gap:14px;}
.direction-choices label {display:flex;gap:8px;align-items:center;cursor:pointer;font-size:12px;}
.direction-choices input {accent-color:var(--accent);}
.split-options {display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.split-picture {height:130px;padding:7px;display:grid;gap:5px;background:var(--field);border:1px solid var(--line);border-radius:8px;}
.split-picture span {display:grid;place-items:center;min-width:0;overflow:hidden;border:1px solid var(--accent);border-radius:4px;color:var(--accent);font-size:11px;text-align:center;}
.icon-choice {display:flex;align-items:center;gap:10px;text-align:left;font-size:12px;}.icon-choice>span:first-child {font-size:24px;}
.icon-library {display:grid;gap:14px;}.icon-library-body {display:grid;grid-template-columns:145px minmax(0,1fr);height:min(58vh,500px);gap:12px;}
.icon-categories {overflow:auto;display:flex;flex-direction:column;gap:5px;}.icon-categories button {font-size:11px;text-align:left;flex:none;}.icon-categories .active {color:var(--accent);border-color:var(--accent);}
.icon-grid {overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:7px;align-content:start;}
.icon-grid button {min-height:90px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:10px;overflow-wrap:anywhere;}
.icon-grid button>span:first-child {font-size:28px!important;}.icon-grid .selected{border-color:var(--accent);}
body.full-view .app-header,body.full-view .sidebar,body.full-view .inspector,body.full-view .preview-caption,body.full-view .editor-status {display:none!important;}
body.full-view .workspace {height:100dvh;display:block!important;}
body.full-view .editor-main {height:100dvh;}
body.full-view .preview-controls {min-height:46px;height:46px;padding:5px 12px;flex-wrap:nowrap;justify-content:flex-end;}
body.full-view .preview-controls>*:not(#full-view):not(#device):not(.segmented) {display:none;}
body.full-view .preview-viewport {padding:0;}
body.full-view #frame-wrap {border-radius:0;box-shadow:none;}
@media(max-width:600px){.icon-library-body{grid-template-columns:100px 1fr;}.split-options{grid-template-columns:1fr;}.split-picture{height:100px;}}

/* A transformed iframe keeps its unscaled layout size. Hidden overflow would
   still let focus/scrollIntoView scroll its wrapper and strand visible content.
   These are clipping boundaries, never scroll containers. The website scrolls
   inside the iframe; the inspector and sidebar retain their own scrollbars. */
html,body,.workspace,.editor-main,.preview-viewport,#frame-wrap {overflow:clip;}
.preview-controls {flex-shrink:0;}
#inspector-content {min-height:0;overflow-anchor:none;}