.studio-grid-layout-canvas{--grid-canvas-fit:1;--grid-paper:var(--brand-white,#fff);--grid-ink:var(--brand-carbon,#191919);--grid-paper-rule:color-mix(in srgb,var(--grid-ink) 18%,transparent);position:relative;flex:0 0 auto;box-sizing:border-box;background:var(--grid-paper);color:var(--grid-ink);color-scheme:light;font-synthesis:none;isolation:isolate;outline:calc(1px / var(--grid-canvas-fit)) solid var(--grid-paper-rule);box-shadow:0 8px 32px color-mix(in srgb,var(--brand-carbon) 32%,transparent)}.studio-grid-layout-canvas[data-guide-canvas=dark]{--grid-paper:var(--brand-carbon,#191919);--grid-ink:var(--brand-cool-white,#eee);color-scheme:dark}.studio-grid-layout-canvas[data-grow=false]{overflow:hidden}.studio-grid-layout-canvas[data-grow=true]{overflow:visible}.studio-guide-overlay{position:absolute;inset:0;z-index:3;display:block;pointer-events:none;overflow:hidden}.studio-grid-sample{position:absolute;display:grid;align-items:start;box-sizing:border-box}.studio-grid-sample>h2,.studio-grid-sample>p{min-width:0;margin:0;white-space:pre-wrap;font-synthesis:none;word-break:normal;overflow-wrap:normal}.studio-grid-sample>h2{text-wrap:pretty}.studio-grid-sample-shape{position:relative;min-width:0;overflow:hidden;background:var(--brand-concrete,#dadbd8)}.studio-grid-sample-shape:after{content:"";position:absolute;width:75%;aspect-ratio:1;left:12.5%;top:18%;border:1px solid var(--grid-ink);border-radius:50%}.studio-grid-sample-column{box-sizing:border-box;display:grid;place-items:center;min-width:0;border:1px solid var(--grid-paper-rule);background:var(--brand-concrete,#dadbd8);font:12px/1.4 var(--font-mono,monospace)}.studio-layout-panel{position:absolute;box-sizing:border-box;min-width:0;outline:1px solid var(--grid-paper-rule);outline-offset:-1px}.studio-grid-layout-canvas[data-preview=true] .studio-layout-panel{outline:none}.studio-layout-panel[data-drag-over=true]{outline:calc(2px / var(--grid-canvas-fit)) solid var(--grid-ink);background:color-mix(in srgb,var(--grid-ink) 6%,var(--grid-paper))}.studio-layout-block-wrap{position:relative;min-width:0}.studio-grid-layout-canvas .studio-layout-block,.studio-grid-layout-canvas .studio-layout-block-wrap .ui-button.studio-layout-block{box-sizing:border-box;display:block;min-width:0;max-width:100%;width:100%;min-height:0;height:auto;padding:0;border:0;border-radius:0;outline-offset:4px;color:inherit;background:transparent;text-align:left;white-space:pre-wrap;text-transform:none;letter-spacing:inherit;font-synthesis:none;word-break:normal;overflow-wrap:normal}.studio-layout-block-text{display:block;min-height:1em;white-space:pre-wrap;word-break:normal;overflow-wrap:normal}.studio-layout-block[data-kind=heading]{text-wrap:pretty}.studio-layout-block[data-kind=button] .studio-layout-block-text{display:inline-block;padding:10px 16px;border:1px solid;border-radius:4px}.studio-layout-block[data-kind=tag] .studio-layout-block-text{display:inline-block;padding:5px 10px;border:1px solid var(--grid-paper-rule);border-radius:100px}.studio-layout-block[data-kind=link] .studio-layout-block-text{text-decoration:underline;text-underline-offset:3px}.studio-layout-block[data-selected=true]{outline:calc(1px / var(--grid-canvas-fit)) solid var(--grid-ink)}.studio-layout-block:focus-visible,.studio-layout-divider:focus-visible{outline:calc(2px / var(--grid-canvas-fit)) solid var(--grid-ink)}.studio-layout-empty-panel{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;min-height:100%;text-align:center;color:color-mix(in srgb,var(--grid-ink) 60%,transparent);font:calc(var(--studio-text-meta, 11px) / var(--grid-canvas-fit))/var(
      --studio-line-ui,1.45
    ) var(--studio-font-ui,sans-serif)}.studio-layout-empty-label{position:absolute;top:0;left:0;font-family:var(--font-mono,monospace);opacity:.55}.studio-layout-drop-hint{position:absolute;top:calc(50% + 24px / var(--grid-canvas-fit))}.studio-grid-layout-canvas .studio-layout-panel .studio-layout-empty-panel .ui-button{border:calc(1px / var(--grid-canvas-fit)) solid var(--grid-paper-rule);border-radius:calc(4px / var(--grid-canvas-fit));background:transparent;color:var(--grid-ink);min-width:0;max-width:100%;min-height:calc(30px / var(--grid-canvas-fit));height:auto;padding:calc(5px / var(--grid-canvas-fit)) calc(8px / var(--grid-canvas-fit));font:calc(var(--studio-text-control, 13px) / var(--grid-canvas-fit))/var(
      --studio-line-ui,1.45
    ) var(--studio-font-ui,sans-serif)}.studio-layout-insert>svg{width:calc(13px / var(--grid-canvas-fit));height:calc(13px / var(--grid-canvas-fit))}.studio-layout-binding{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:space-around;flex-direction:column;overflow:hidden;box-sizing:border-box;border-right:1.5px dashed var(--grid-paper-rule)}.studio-layout-binding>i{display:block;flex:0 0 auto;width:14%;height:var(--layout-binding-mark-height,16px);border-radius:2px;background:var(--grid-ink);opacity:.8}.studio-layout-binding>span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:pre-wrap;font-family:var(--font-mono,monospace);line-height:1.4;letter-spacing:.12em}.studio-layout-metadata{position:absolute;box-sizing:border-box;white-space:pre-wrap;font:12px/1.2 var(--font-mono,monospace)}.studio-layout-metadata-footer{text-align:right}.studio-grid-layout-canvas .ui-button.studio-layout-divider,.studio-grid-layout-canvas .ui-button.studio-layout-divider:is(:hover,:focus-visible,:active){position:absolute;z-index:5;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--grid-ink);touch-action:none;box-shadow:none;transform:none;transition:none;animation:none;overflow:visible}.studio-layout-divider[data-axis=vertical]{cursor:col-resize}.studio-layout-divider[data-axis=horizontal]{cursor:row-resize}.studio-layout-divider-grip{display:flex;align-items:center;justify-content:center;gap:calc(3px / var(--grid-canvas-fit));border:calc(1px / var(--grid-canvas-fit)) solid var(--grid-paper-rule);border-radius:calc(4px / var(--grid-canvas-fit));background:var(--grid-paper);opacity:.7;transition:opacity .12s,border-color .12s}.studio-layout-divider[data-axis=vertical] .studio-layout-divider-grip{width:calc(10px / var(--grid-canvas-fit));height:calc(40px / var(--grid-canvas-fit))}.studio-layout-divider[data-axis=horizontal] .studio-layout-divider-grip{width:calc(40px / var(--grid-canvas-fit));height:calc(10px / var(--grid-canvas-fit));flex-direction:column}.studio-layout-divider-grip>i{display:block;background:currentColor}.studio-layout-divider[data-axis=vertical] .studio-layout-divider-grip>i{width:calc(1px / var(--grid-canvas-fit));height:calc(18px / var(--grid-canvas-fit))}.studio-layout-divider[data-axis=horizontal] .studio-layout-divider-grip>i{width:calc(18px / var(--grid-canvas-fit));height:calc(1px / var(--grid-canvas-fit))}.studio-layout-divider:is(:hover,:focus-visible,[data-resizing=true]) .studio-layout-divider-grip{opacity:1;border-color:currentColor}.studio-layout-divider-value{position:absolute;bottom:calc(100% + 4px / var(--grid-canvas-fit));left:50%;transform:translateX(-50%);box-sizing:border-box;padding:calc(4px / var(--grid-canvas-fit)) calc(6px / var(--grid-canvas-fit));border-radius:calc(3px / var(--grid-canvas-fit));background:var(--grid-ink);color:var(--grid-paper);font:calc(11px / var(--grid-canvas-fit))/1.4 var(--font-mono,monospace);white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .12s}.studio-layout-divider:is(:hover,:focus-visible,[data-resizing=true]) .studio-layout-divider-value{visibility:visible;opacity:1}@media (prefers-reduced-motion:reduce){.studio-layout-divider-grip,.studio-layout-divider-value{transition:none}}.studio-grid-font-feedback,.studio-grid-geometry-note,.studio-grid-overflow-note{position:relative;z-index:6;display:flex;align-items:center;gap:calc(8px / var(--grid-canvas-fit));box-sizing:border-box;max-width:100%;margin:0;padding:calc(6px / var(--grid-canvas-fit));border:calc(1px / var(--grid-canvas-fit)) solid var(--studio-rule);border-radius:calc(4px / var(--grid-canvas-fit));background:var(--studio-panel);color:var(--studio-text);font:calc(var(--studio-text-meta, 11px) / var(--grid-canvas-fit))/var(
      --studio-line-ui,1.45
    ) var(--studio-font-ui,sans-serif)}.studio-grid-font-feedback>span{min-width:0}.studio-grid-font-feedback .ui-button{height:auto;min-height:calc(28px / var(--grid-canvas-fit));padding:calc(4px / var(--grid-canvas-fit)) calc(8px / var(--grid-canvas-fit));font-size:calc(var(--studio-text-control, 13px) / var(--grid-canvas-fit))}.studio-grid-sample>.studio-grid-font-feedback{grid-column:1/-1}.studio-grid-overflow-note{position:absolute;bottom:12px;left:12px;right:12px}.studio-grid-geometry-note{position:absolute;top:12px;left:12px;right:12px}