.grid-studio{border-top:1px solid var(--border)}.grid-studio-toolbar{flex-wrap:wrap;align-items:end;gap:12px;padding-block:20px;display:flex}.grid-studio-toolbar>.lab-field:not(:first-child){flex:0 90px}.grid-studio-toolbar>.lab-field:first-child{flex:180px}.grid-studio-toolbar>button{margin-left:auto}.grid-studio-input-unit{align-items:center;gap:7px;display:flex}.grid-studio-input-unit input{width:66px}.grid-studio-workspace{border-block:1px solid var(--border);display:block}.grid-studio-preview{min-width:0;padding:16px 0 12px}.grid-studio-preview-bar,.grid-studio-preview-caption,.grid-studio-inspector-title,.grid-studio-export-bar,.grid-studio-status{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.grid-studio-widths{flex-wrap:wrap;gap:5px;display:flex}.grid-studio-widths .lab-button{gap:8px;padding-inline:9px;font-size:14px}.grid-studio-choices{flex-wrap:wrap;gap:8px;padding-block:16px;display:flex}.grid-studio-advanced{border-top:1px solid var(--border);margin-top:20px}.grid-studio-advanced>summary{cursor:pointer;min-height:48px;color:var(--muted);padding-block:14px}.grid-studio-advanced>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.grid-studio .lab-button{min-width:44px;min-height:44px}.grid-studio-widths .lab-button span{font-size:10px}.grid-studio-toggle{align-items:center;gap:6px;min-height:44px;font-size:13px;display:flex}.grid-studio-toggle input{accent-color:var(--accent);width:17px;height:17px}.grid-studio-preview-caption{color:var(--muted);margin:16px 0 14px;font-size:11px}.grid-studio-preview-caption>:first-child{flex:1}.grid-studio-preview-caption>:last-child{font-family:var(--font-mono)}.grid-studio-canvas{background:var(--surface);width:100%;padding:0;overflow:clip}.grid-studio-frame-holder{max-width:100%;margin-inline:auto;position:relative}.grid-studio-frame{transform-origin:0 0;container:grid-studio-preview/inline-size}.grid-studio-grid{grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));grid-template-rows:repeat(var(--grid-rows), 80px);gap:var(--grid-gap);align-items:var(--grid-align);justify-items:var(--grid-justify);display:grid}.grid-studio-guide{pointer-events:none;border:1px dashed var(--border);background:color-mix(in srgb, var(--text) 2%, transparent);place-self:stretch stretch}.grid-studio-block{border:1px solid var(--border);background:var(--surface-raised);min-width:0;min-height:48px;color:var(--text);text-align:left;touch-action:none;cursor:grab;user-select:none;flex-direction:column;justify-content:center;gap:3px;padding:8px 12px;display:flex;position:relative;overflow:hidden}.grid-studio-block:hover{border-color:var(--accent)}.grid-studio-block[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}.grid-studio-block:focus-visible{outline:3px solid var(--text);outline-offset:-3px}.grid-studio[data-dragging=true] .grid-studio-block[aria-pressed=true]{cursor:grabbing}.grid-studio-block-number{font:11px/1.4 var(--font-mono);color:var(--muted);justify-content:space-between;align-items:center;gap:12px;display:flex}.grid-studio-block strong{font-size:20px;font-weight:650;line-height:1.2}.grid-studio-block-size{font:11px/1.4 var(--font-mono);color:var(--muted)}.grid-studio-tone-1{background:color-mix(in srgb, var(--accent) 10%, var(--surface))}.grid-studio-tone-2{background:color-mix(in srgb, var(--text) 10%, var(--surface))}.grid-studio-tone-3{background:color-mix(in srgb, var(--accent) 5%, var(--surface-raised))}.grid-studio-inspector{border-top:1px solid var(--border);grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:14px;min-width:0;padding:16px 0;display:grid}.grid-studio-inspector-title,.grid-studio-alignments{grid-column:1/-1}.grid-studio-inspector-title>span{font:10px var(--font-mono);color:var(--muted);letter-spacing:.09em}.grid-studio-inspector-title .lab-button{padding:6px 8px;font-size:12px}.grid-studio-properties,.grid-studio-alignments{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.grid-studio-properties input{width:100%}.grid-studio-move{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.grid-studio-move .lab-button{padding:5px}.grid-studio-delete{min-height:44px;color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;gap:7px;font-size:12px;display:flex}.grid-studio-delete:hover{color:var(--accent)}.grid-studio-delete:disabled{opacity:.4}.grid-studio-alignments{border-top:1px solid var(--border);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));padding-top:12px}.grid-studio-alignments label{font-family:var(--font-mono);font-size:11px}.grid-studio-alignments select{width:100%;padding-inline:10px;font-size:14px}.grid-studio-status{padding-block:16px;font-size:12px;line-height:1.6}.grid-studio-status>:last-child{font:11px var(--font-mono);color:var(--muted)}.grid-studio-warning{border-left:2px solid var(--accent);color:var(--muted);margin:0 0 20px;padding:8px 12px;font-size:12px;line-height:1.7}.grid-studio-export{padding-top:8px}.grid-studio-export-bar{margin-bottom:10px}.grid-studio-export-bar>div{flex-wrap:wrap;gap:6px;display:flex}.grid-studio-export-bar .lab-button{padding-inline:12px;font-size:12px}.grid-studio-code{resize:vertical;border:1px solid var(--border);width:100%;min-height:270px;color:var(--text);background:var(--surface);font:12px/1.8 var(--font-mono);white-space:pre;tab-size:2;border-radius:4px;padding:18px;display:block;overflow:auto}@container grid-studio-preview (width<=520px){.grid-studio-grid{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-auto-rows:80px;place-items:stretch stretch}.grid-studio-block{touch-action:pan-y;cursor:pointer;grid-area:auto!important}.grid-studio-block strong{font-size:20px}}@media (width<=1100px){.grid-studio-workspace{grid-template-columns:minmax(0,1fr)}.grid-studio-preview{padding-right:0}.grid-studio-inspector{border-left:0;border-top:1px solid var(--border);grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;padding-left:0;display:grid}.grid-studio-inspector-title,.grid-studio-alignments{grid-column:1/-1}}@media (width<=560px){.grid-studio-toolbar{gap:10px}.grid-studio-toolbar>.lab-field:first-child{flex-basis:calc(100% - 100px)}.grid-studio-toolbar>button{order:-1;margin-left:0}.grid-studio-toolbar>.lab-field:first-child{order:-2}.grid-studio-toolbar>.lab-field:not(:first-child){flex:70px}.grid-studio-toolbar input{width:100%}.grid-studio-input-unit input{width:calc(100% - 20px)}.grid-studio-inspector{grid-template-columns:minmax(0,1fr)}.grid-studio-preview-caption{font-size:11px}.grid-studio-export-bar>div:last-child{width:100%}.grid-studio-export-bar>div:last-child button{flex:1}}