:root{color-scheme:dark;--bg:#141619;--panel:#1d1f23;--line:#36383e;--muted:#a8abb3;--yellow:#ffc629;--text:#f6f6f7;--red:#d3232a;font-family:Arial,Tahoma,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#292c31;border-radius:7px;color:var(--text);padding:9px 13px;min-height:38px;transition:background .15s}button:hover{background:#383c43}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}input,select,textarea{border:1px solid var(--line);background:#17191d;color:var(--text);border-radius:7px;min-width:0;padding:9px 11px}textarea{resize:vertical}input[type=range]{padding:0;accent-color:var(--yellow);height:22px;border:none;width:100%;direction:ltr}input[type=color]{width:48px;height:35px;padding:3px}h1,h2,h3,p{margin:0}h1{font-size:19px}h2{font-size:16px}h3{font-size:15px}small,.hint{font-size:13px;line-height:1.65;color:var(--muted)}.yellow{background:var(--yellow);border-color:var(--yellow);color:#151515;font-weight:700}.yellow:hover{background:#ffdb68}.outline{background:transparent}.text-button{border:0;background:none;padding:8px 0;color:var(--yellow);text-align:right}.full{width:100%}.icon-btn{font-size:20px;padding:4px 11px}.muted{color:var(--muted);font-size:13px}.topbar{height:80px;display:flex;align-items:center;gap:36px;padding:12px 24px;border-bottom:1px solid var(--line);background:#101113}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-mark{color:var(--yellow);font-size:49px;line-height:1;transform:rotate(-8deg)}.brand b{display:block;font-size:24px;letter-spacing:-1px}.brand div>span{display:block;color:#b7b9bf;font-size:12px;font-weight:700;letter-spacing:2.4px;margin-top:3px}.project-name{display:flex;flex-direction:column;gap:4px;flex:1}.project-name input{font-weight:bold;background:none;border:0;padding:0;max-width:380px;font-size:17px}.project-name span{font-size:12px;color:var(--muted)}.header-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:292px minmax(330px,1fr) 300px;min-height:calc(100vh - 80px)}.panel{background:var(--panel);min-width:0}.library{border-left:1px solid var(--line);display:flex;flex-direction:column;height:calc(100vh - 80px);position:sticky;top:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 18px 15px}.count{font-size:12px;color:#c7c9ce;background:#33363c;border-radius:20px;padding:4px 8px}.tabs{display:flex;gap:3px;padding:0 14px;border-bottom:1px solid var(--line)}.tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 4px;color:var(--muted);font-size:14px}.tabs [aria-selected=true]{border-bottom-color:var(--yellow);color:var(--yellow);font-weight:bold}.library-controls{display:grid;gap:8px;padding:16px}.library-controls input,.library-controls select{width:100%;font-size:14px}.library-grid{padding:0 14px 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:auto;align-content:start;flex:1}.product-card{padding:0;display:flex;flex-direction:column;text-align:right;background:#26282d;overflow:hidden;min-height:152px;position:relative}.product-card img{width:100%;aspect-ratio:1.2;object-fit:contain;background:#fff}.product-card strong{font-size:13px;line-height:1.4;padding:9px 8px 3px;font-weight:500;direction:ltr;text-align:left}.product-card small{font-size:11px;padding:0 8px 9px}.product-card.active{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}.library-footer{padding:14px 16px;background:var(--panel);border-top:1px solid var(--line)}.library-footer small{display:block;margin-top:10px;font-size:12px}.stage-column{min-width:0;display:flex;flex-direction:column;background:#141619}.stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);min-height:66px}.stage-toolbar button,.stage-toolbar select{font-size:13px;padding:7px 9px}.button-group{display:flex;gap:7px;align-items:center}.stage-area{height:min(60vh,620px);min-height:310px;display:flex;justify-content:center;align-items:center;padding:28px;position:relative;background-image:radial-gradient(#3b3d421c 1px,transparent 1px);background-size:16px 16px}.canvas-shell{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}#canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 18px 70px #0008;touch-action:none;background:repeating-conic-gradient(#e5e5e5 0 25%,#fff 0 50%) 50% / 18px 18px;cursor:move}.canvas-error{position:absolute;background:#501e22;border:1px solid #ff6674;border-radius:8px;padding:14px;max-width:80%;text-align:center}.canvas-meta{display:flex;justify-content:space-between;gap:10px;padding:7px 22px 16px;font-size:12px;color:var(--muted)}#dimensions{direction:ltr;font-family:monospace}.command-bar{margin:0 18px 18px;padding:7px 10px 7px 7px;display:flex;gap:10px;align-items:center;background:#24272c;border:1px solid #494d54;border-radius:9px}.command-icon{color:var(--yellow);font-size:25px}.command-bar input{border:0;flex:1;width:100%;background:none;padding:5px;font-size:14px}.command-bar button{font-size:14px;background:#42464d}.layers-panel{border-top:1px solid var(--line);flex:1;background:#191b1e}.layers-panel>.panel-heading{padding:16px 20px 12px}.layer-row{margin:0 16px 6px;display:flex;gap:10px;align-items:center;border:1px solid transparent;border-radius:7px;padding:7px;background:#23262a}.layer-row.selected{border-color:#7b682e;background:#302d23}.layer-row img{width:38px;height:35px;object-fit:contain;background:#eee;border-radius:4px}.layer-row .layer-name{flex:1;border:0;background:none;text-align:right;padding:0;font-size:14px}.layer-row small{display:block;font-size:11px;color:var(--muted)}.layer-row .icon-btn{font-size:15px;min-height:30px;padding:3px 7px;background:none;border:none}.layer-row.hidden-layer{opacity:.5}.inspector{border-right:1px solid var(--line);height:calc(100vh - 80px);overflow:auto;position:sticky;top:0}.inspector-tabs{padding-top:5px;position:sticky;top:0;background:var(--panel);z-index:2}.inspector-section{padding:20px 18px;border-bottom:1px solid var(--line)}.inspector-section h2{margin-bottom:18px}.selected-preview{background:#f3f3f3;border-radius:8px;height:140px;display:grid;place-items:center;margin-bottom:13px}.selected-preview img{max-width:100%;max-height:140px;object-fit:contain}.field{display:flex;flex-direction:column;gap:7px;font-size:14px;margin:14px 0}.field input,.field select{width:100%;font-size:14px}.field input[type=color]{width:100%;height:34px}.number-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.range-row{margin:17px 0}.range-label{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:9px}.range-label output{color:#c9ccd2;font-size:13px;direction:ltr}.range-label input[type=number]{width:64px;padding:3px 5px;font-size:13px}.properties-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.properties-buttons button{font-size:13px}.notice{border:1px solid #5b5033;background:#332e20;color:#f1d68d;font-size:13px;padding:12px;border-radius:7px;line-height:1.7;margin:13px 0}.notice.good{border-color:#30684c;background:#1d352a;color:#a7e3ba}.hint{margin-top:12px}.swatches{display:flex;flex-wrap:wrap;gap:9px}.swatch{width:34px;height:34px;min-height:34px;border-radius:50%;border:2px solid #565a63;padding:0}.swatch.selected{outline:2px solid var(--yellow);outline-offset:3px}.transparent{background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 50% / 12px 12px}.empty{grid-column:1/-1;padding:26px 12px;text-align:center;color:var(--muted);line-height:1.75}.ingredient-card{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:#282b30;border:1px solid var(--line);border-radius:7px;padding:12px}.ingredient-card .ingredient-symbol{background:#34373d;border-radius:7px;width:42px;height:42px;display:grid;place-items:center;font-size:23px;color:var(--yellow)}.ingredient-card .ingredient-info{flex:1}.ingredient-card strong{font-size:14px}.ingredient-card button{font-size:12px;padding:6px;min-height:32px}.job-card{border:1px solid var(--line);padding:10px;margin-bottom:10px;border-radius:8px;font-size:13px}.job-card img{width:100%;max-height:180px;object-fit:contain;background:#f2f2f2;border-radius:5px;margin:8px 0}.job-card p{color:var(--muted);line-height:1.6}.job-card button{margin-top:8px;font-size:13px}.job-card.running{border-color:#a07e23}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#f7f7f8;color:#17181a;border:1px solid #ddd;padding:15px 22px;border-radius:9px;z-index:100;max-width:min(92vw,650px);box-shadow:0 8px 40px #0008;line-height:1.5}#toast.error{background:#55252b;color:#fff;border-color:#9e4853}dialog{color:var(--text);border:1px solid #4f535c;border-radius:13px;background:var(--panel);padding:24px;width:min(92vw,680px);max-height:90vh;box-shadow:0 25px 100px #000b}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-top h2{font-size:20px}.modal-top button{font-size:25px;background:none;border:0}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.modal-copy{line-height:1.9;font-size:15px}.modal-copy a{color:var(--yellow)}.modal-copy code{direction:ltr;display:inline-block;background:#303339;padding:2px 5px;border-radius:4px}.project-item{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.project-item button{font-size:14px}.crop-wrap{background:repeating-conic-gradient(#aaa 0 25%,#ddd 0 50%) 50% / 15px 15px;position:relative;margin:15px 0}.crop-wrap canvas{width:100%;display:block;cursor:crosshair;touch-action:none}#job-progress{padding:12px;background:#332e20;color:var(--yellow);border-radius:7px;margin:12px 0}.engine-row{padding:15px 0;border-bottom:1px solid var(--line)}.engine-row b{display:block;direction:ltr;text-align:right;margin-bottom:4px}.engine-row span{font-size:14px;color:var(--muted)}.danger{color:#ff9aa4}.quick-help{grid-column:1/-1;font-size:13px;line-height:1.7;padding:10px 0;color:var(--muted)}[hidden]{display:none!important}@media(min-width:1500px){.workspace{grid-template-columns:320px minmax(330px,1fr) 330px}.stage-area{height:64vh}}@media(max-width:1150px){.workspace{grid-template-columns:235px minmax(300px,1fr) 260px}.topbar{gap:22px;padding:12px 16px}.stage-toolbar{flex-wrap:wrap;padding:10px}.stage-toolbar #hide-selection{display:none}.library-grid{gap:7px;padding:0 10px 15px}.product-card strong{font-size:12px}.inspector-section{padding:16px 13px}}@media(max-width:900px){.workspace{grid-template-columns:230px minmax(0,1fr)}.inspector{grid-column:1/-1;position:static;height:auto;overflow:visible;border-top:1px solid var(--line);border-right:0}.inspector-section{max-width:700px;margin:auto}.inspector-tabs{position:static}.library{height:790px}.stage-area{height:480px}.topbar{gap:15px}.brand b{font-size:20px}.brand-mark{font-size:38px}.header-actions button{font-size:13px}.header-actions #logout{display:none}}@media(max-width:600px){.topbar{height:auto;min-height:115px;flex-wrap:wrap;gap:12px;padding:12px}.brand{flex:1}.project-name{flex:1;text-align:left;min-width:130px}.project-name input{width:100%;font-size:15px;text-align:left}.header-actions{width:100%;justify-content:space-between}.header-actions button{flex:1}.workspace{display:flex;flex-direction:column}.stage-column{order:0}.library{order:1;height:460px;position:static;border-left:0;border-top:1px solid var(--line)}.inspector{order:2}.stage-area{height:400px;min-height:250px;padding:22px}.stage-toolbar{gap:5px}.stage-toolbar button,.stage-toolbar select{font-size:12px;min-height:35px}.library-grid{grid-template-columns:repeat(3,1fr);padding:0 12px 15px}.product-card{min-height:135px}.library-controls{grid-template-columns:1fr 1fr;padding:10px 14px}.library-footer small{font-size:11px}.panel-heading{padding:16px}.canvas-meta{font-size:11px;padding:6px 16px 12px}.command-bar{margin:0 12px 14px}.command-bar input{font-size:13px}.layers-panel{padding-bottom:14px}.layer-row{margin:0 12px 5px}.layers-panel .muted{font-size:11px}.ingredient-card{grid-column:auto;display:flex;flex-direction:column;text-align:center}.ingredient-card .ingredient-symbol{display:none}.quick-help{grid-column:1/-1}.library-footer{padding:10px 14px}.library-footer small{display:none}.inspector-section{padding:20px}dialog{padding:18px}.notice{font-size:14px}}
.props-fields{border:0;padding:0;margin:0;min-width:0}.props-fields:disabled{opacity:.5}summary{font-size:14px;cursor:pointer;color:#d8dbe1}

.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.ready-filter{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:12px}.asset-variant{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:8px}.asset-variant img{width:100%;height:90px;object-fit:contain;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 50%/16px 16px}.asset-variant span{font-size:11px}.ingredient-card{align-items:start}.ingredient-info{min-width:0;flex:1}

/* Studio navigation: keep the canvas and relevant controls together on phones. */
:root{--red:#d71920;--yellow:#ffc72c;font-family:Arial,Tahoma,sans-serif}
.topbar{border-top:4px solid var(--red);height:88px}.brand-logo{width:148px;height:48px;object-fit:contain}.brand div>span{font-size:10px;letter-spacing:1.8px}.brand small{font-size:11px}.connection-status{font-size:12px;padding:9px 22px;background:#262117;color:#f2d17b;border-bottom:1px solid #51472e}.connection-status.ready{background:#15291f;color:#b8e2c5}.connection-status.failed{background:#411c22;color:#ffd3d6}.mobile-tools{display:none}.quick-actions{margin:0 18px 18px;padding:15px;background:#202226;border:1px solid #45474b;border-radius:12px}.quick-heading{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}.quick-heading span{font-size:12px;color:var(--muted)}.quick-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:7px}.quick-fields select{width:100%;font-size:13px}.quick-actions .button-group{margin:12px 0;flex-wrap:wrap}.quick-actions details{border-top:1px solid var(--line);padding-top:10px}.quick-actions .command-bar{margin:10px 0 0}.brand-mark{display:none}.stage-area{background-color:#111214}.selected-preview{height:90px}.selected-preview img{max-height:90px}
@media(max-width:600px){.topbar{min-height:100px;padding:8px 12px;gap:8px}.brand{gap:8px}.brand-logo{width:103px;height:37px}.brand div>span{font-size:8px;letter-spacing:.6px}.brand small{display:none}.project-name input{font-size:13px}.header-actions button{min-height:40px}.connection-status{font-size:11px;padding:8px 12px}.mobile-tools{display:flex;position:sticky;top:0;z-index:5;gap:5px;overflow:auto;padding:9px;background:#101113;border-bottom:1px solid #37383b;white-space:nowrap}.mobile-tools button{font-size:12px;min-height:42px;padding:8px 12px;flex-shrink:0}.mobile-tools [aria-pressed=true]{background:var(--yellow);color:#111;border-color:var(--yellow)}.stage-area{height:36vh;min-height:230px;padding:14px}.quick-actions{margin:0 12px 12px;padding:12px}.quick-fields{grid-template-columns:1fr 1fr}.quick-fields button{grid-column:1/-1;min-height:42px}.quick-heading span{font-size:11px}.quick-actions .hint{font-size:12px;margin-top:8px}.library,.inspector{display:none!important}.stage-column{display:flex}.layers-panel{max-height:200px;overflow:auto;flex:none}body[data-panel=library] .library{display:flex!important;height:65vh;order:0}body[data-panel=inspector] .inspector{display:block!important;order:0;height:65vh;overflow:auto}body[data-panel=library] .stage-column,body[data-panel=inspector] .stage-column{display:none}.inspector-tabs{position:sticky;top:0}.library-grid{grid-template-columns:repeat(2,1fr)}.ingredient-card{text-align:right;align-items:stretch}.asset-variant img{height:120px}.inspector-section{padding:14px}.props-fields .range-row{margin:12px 0}.field{margin:10px 0}.selected-preview{height:70px}.selected-preview img{max-height:70px}}