*,:before,:after{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}button,input,select,textarea{font:inherit}.studio{--paper:#eef1f6;--panel:#fff;--line:#d9dfe9;--ink:#1b2432;--muted:#6a7789;--accent:#7c3aed;--danger:#c02653;z-index:40;background:var(--paper);color:var(--ink);grid-template-rows:auto minmax(0,1fr) auto;font:13px/1.4 Montserrat,sans-serif;display:grid;position:fixed;inset:0}.studio *,.studio :before,.studio :after{box-sizing:border-box}.studio p{margin:0}.studio code{color:var(--accent);font:12px/1.4 ui-monospace,monospace}.studio input,.studio select,.studio textarea{border:1px solid var(--line);width:100%;min-width:0;box-shadow:none;color:var(--ink);font:inherit;text-align:left;background:#fff;border-radius:6px;padding:6px 8px}.studio textarea{resize:vertical}.studio input:focus,.studio select:focus,.studio textarea:focus,.studio button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;box-shadow:none}.studio input[type=checkbox]{width:15px;height:15px;min-height:0;accent-color:var(--accent);padding:0}.studio-icon{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:16px;height:16px}.studio button,.studio .studio-button{border:1px solid var(--line);min-height:30px;color:var(--ink);font:inherit;white-space:nowrap;cursor:pointer;background:#fff;border-radius:6px;align-items:center;gap:6px;padding:5px 9px;font-weight:600;display:inline-flex}.studio button:hover:not(:disabled),.studio .studio-button:hover{background:#f7f9fc;border-color:#a9b4c4}.studio button:disabled{opacity:.45;cursor:not-allowed}.studio .studio-button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.studio .studio-button.primary:hover{background:#6d28d9}.studio .studio-button.danger{color:var(--danger)}.studio .studio-button.compact{padding:6px}.studio label.studio-button{position:relative;overflow:hidden}.studio label.studio-button input{opacity:0;cursor:pointer;position:absolute;inset:0}.studio-topbar{border-bottom:1px solid var(--line);background:var(--panel);align-items:center;gap:10px;padding:8px 12px;display:flex}.studio-brand{align-items:center;gap:7px;font-size:14px;font-weight:800;display:flex}.studio-brand small{color:var(--accent);letter-spacing:.04em;text-transform:uppercase;background:#ede9fe;border-radius:99px;padding:2px 6px;font-size:10px;font-weight:700}.studio-inline{align-items:center;gap:6px;display:flex}.studio-inline.grow{flex:1;min-width:120px}.studio-inline>span{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:700}.studio-topbar .studio-inline input{width:150px}.studio-topbar .studio-inline.grow input{flex:1;width:auto}.studio-formats{background:#e7ebf2;border-radius:8px;gap:2px;padding:2px;display:flex}.studio-formats button{color:var(--muted);background:0 0;border-color:#0000}.studio-formats button.active{border-color:var(--line);color:var(--ink);background:#fff}.studio-body{grid-template-columns:226px minmax(320px,1fr) 348px;min-height:0;display:grid}.studio-rail,.studio-side{background:var(--panel);flex-direction:column;min-height:0;display:flex}.studio-rail{border-right:1px solid var(--line)}.studio-side{border-left:1px solid var(--line)}.studio-rail-head{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;padding:10px 12px 6px;font-size:11px;font-weight:800;display:flex}.studio-rail .studio-add,.studio-rail-actions{flex-wrap:wrap;gap:5px;padding:0 10px 10px;display:flex}.studio-rail-actions{border-top:1px solid var(--line);padding:8px 10px}.studio-layers{flex:1;margin:0;padding:0 8px;list-style:none;overflow:auto}.studio-layers li{margin-bottom:4px}.studio-layers button{text-align:left;grid-template-columns:16px minmax(0,1fr);gap:3px 8px;width:100%;padding:7px 9px;display:grid}.studio-layers b{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.studio-layers small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;grid-column:2;font-weight:500;overflow:hidden}.studio-layers .studio-icon{grid-row:span 2;align-self:center}.studio-layers button.active{border-color:var(--accent);background:#f6f2ff}.studio-layer-background{border-style:dashed!important}.studio-canvas{flex-direction:column;min-width:0;display:flex}.studio-toolbar{border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex}.studio-toolbar select{width:auto}.studio-toggle.active{border-color:var(--accent);color:var(--accent);background:#f6f2ff}.studio-hint{color:var(--muted);margin-left:auto}.studio-board{background-color:#e3e8f0;background-image:linear-gradient(45deg,#d7dde7 25%,#0000 25%),linear-gradient(-45deg,#d7dde7 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d7dde7 75%),linear-gradient(-45deg,#0000 75%,#d7dde7 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;flex:1;min-height:0;padding:18px;display:flex;overflow:hidden}.studio-fit{flex:1;place-items:center;min-width:0;display:grid;container-type:size}.studio-stage{width:min(100cqw, 100cqh * var(--ratio));aspect-ratio:var(--ratio);touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;position:relative;box-shadow:0 12px 34px #141c2c47}.studio-stage canvas{width:100%;height:100%;display:block}.studio-hit{z-index:2;cursor:grab;transform-origin:50%;border:1px dashed #0000;position:absolute}.studio-hit:hover{border-color:#ffffffb3}.studio-hit.active{border:1px solid var(--accent);box-shadow:0 0 0 1px #fffc}.studio-handle{background:var(--accent);touch-action:none;border:2px solid #fff;border-radius:2px;width:11px;height:11px;position:absolute}.studio-handle.nw{cursor:nwse-resize;top:-6px;left:-6px}.studio-handle.ne{cursor:nesw-resize;top:-6px;right:-6px}.studio-handle.sw{cursor:nesw-resize;bottom:-6px;left:-6px}.studio-handle.se{cursor:nwse-resize;bottom:-6px;right:-6px}.studio-guide{z-index:3;pointer-events:none;background:#00c2d1;position:absolute}.studio-guide.vertical{width:1px;top:0;bottom:0}.studio-guide.horizontal{height:1px;left:0;right:0}.studio-tabs{border-bottom:1px solid var(--line);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.studio-tabs button{min-height:38px;color:var(--muted);border:0;border-bottom:2px solid #0000;border-radius:0;justify-content:center}.studio-tabs button.active{border-bottom-color:var(--accent);color:var(--accent);background:#f6f2ff}.studio-panel{flex-direction:column;flex:1;gap:12px;padding:12px;display:flex;overflow:auto}.studio-section{border:1px solid var(--line);background:#fbfcfe;border-radius:8px}.studio-section h3{border-bottom:1px solid var(--line);letter-spacing:.03em;text-transform:uppercase;align-items:center;gap:7px;margin:0;padding:9px 11px;font-size:12px;font-weight:800;display:flex}.studio-section:last-child{margin-bottom:4px}.studio-switch{color:var(--muted);text-transform:none;align-items:center;gap:5px;margin-left:auto;font-size:11px;font-weight:600;display:flex}.studio-rows{flex-direction:column;gap:10px;padding:11px;display:flex}.studio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.studio-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-field{gap:4px;min-width:0;display:grid}.studio-field>span{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-weight:800}.studio-color{gap:5px;display:flex}.studio-color input[type=color]{width:34px;padding:2px}.studio-choice{gap:4px;display:flex}.studio-choice button{flex:1;justify-content:center;padding:6px}.studio-choice button.active{border-color:var(--accent);color:var(--accent);background:#f6f2ff}.studio-choice.wide{grid-template-columns:repeat(6,1fr);display:grid}.studio-add{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.studio-add input{flex:1;min-width:110px}.studio-variant{align-items:flex-end;gap:6px;display:flex}.studio-variant .studio-field{flex:1}.studio-variable-row{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr) auto;align-items:center;gap:5px;display:grid}.studio-variable-row code{text-overflow:ellipsis;overflow:hidden}.studio-note{color:var(--muted);font-size:12px;line-height:1.5}.studio-note .studio-icon{vertical-align:-3px;margin-right:5px}.studio-note.error{color:var(--danger)}.studio-json{white-space:pre;flex:1;min-height:260px;font:12px/1.5 ui-monospace,monospace}.studio-section:has(.studio-json){flex-direction:column;flex:1;display:flex}.studio-section:has(.studio-json) .studio-rows{flex:1}.studio-statusbar{border-top:1px solid var(--line);background:var(--panel);color:var(--muted);align-items:center;gap:7px;padding:7px 12px;display:flex}.studio-statusbar.error{color:var(--danger);background:#fdeef3}@media (width<=1180px){.studio-body{grid-template-columns:190px minmax(280px,1fr) 310px}.studio-hint{display:none}}@media (width<=900px){.studio{grid-template-rows:none;min-height:100vh;position:static}.studio-topbar{flex-wrap:wrap}.studio-body{grid-template-columns:1fr}.studio-rail,.studio-side{border:0;border-bottom:1px solid var(--line)}.studio-layers{max-height:220px}.studio-board{min-height:50vh}.studio-fit{container-type:normal}.studio-stage{width:100%}.studio-panel{overflow:visible}}