@layer mlola.preview{.ml-workbench{padding-block:var(--ml-space-8) var(--ml-space-12)}.ml-workbench-heading{justify-content:space-between;align-items:flex-end;gap:var(--ml-space-6);margin-bottom:var(--ml-space-6);display:flex}.ml-workbench-kind{color:var(--ml-text-faint);font-size:var(--ml-type-sm);text-transform:capitalize;margin:0}.ml-workbench-heading h1{margin:var(--ml-space-1) 0 0;font-family:var(--ml-font-display);font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:var(--ml-display-weight);letter-spacing:-.035em}.ml-workbench-heading p:last-child{max-width:44rem;margin:var(--ml-space-2) 0 0;color:var(--ml-text-muted);font-size:var(--ml-type-md);line-height:1.6}.ml-workbench-heading-actions{gap:var(--ml-space-2);flex-wrap:wrap;display:flex}.ml-workbench-install code{font-family:var(--ml-font-mono);font-size:var(--ml-type-xs)}.ml-workbench-warning{margin-bottom:var(--ml-space-4);padding:var(--ml-space-3) var(--ml-space-4);border:1px solid color-mix(in oklab, var(--ml-warning) 40%, var(--ml-border));border-radius:var(--ml-radius-md);background:color-mix(in oklab, var(--ml-warning) 10%, var(--ml-surface));font-size:var(--ml-type-sm)}.ml-workbench-layout{gap:var(--ml-space-6);grid-template-columns:14rem minmax(0,1fr);display:grid}.ml-workbench-sidebar{top:calc(var(--ml-site-header) + var(--ml-space-4));align-content:start;align-self:start;gap:var(--ml-space-3);max-height:calc(100dvh - var(--ml-site-header) - var(--ml-space-8));scrollbar-width:thin;display:grid;position:sticky;overflow-y:auto}.ml-workbench-tree-group>summary{align-items:center;gap:var(--ml-space-2);min-height:2rem;padding:0 var(--ml-space-2);border-radius:var(--ml-radius-md);color:var(--ml-text);font-size:var(--ml-type-sm);cursor:pointer;font-weight:600;list-style:none;display:flex}.ml-workbench-tree-group>summary::-webkit-details-marker{display:none}.ml-workbench-tree-group>summary:hover{background:var(--ml-fill-hover)}.ml-workbench-tree-group>summary>svg{color:var(--ml-text-faint);flex:none}.ml-workbench-tree-group>summary span{flex:1}.ml-workbench-tree-group>summary small{color:var(--ml-text-faint);font-size:var(--ml-type-xs);font-variant-numeric:tabular-nums;font-weight:400}.ml-workbench-tree-group>summary>svg:last-child{transition:transform var(--ml-duration-fast)}.ml-workbench-tree-group[open]>summary>svg:last-child{transform:rotate(180deg)}.ml-workbench-tree-group ul,.ml-workbench-search-results{padding-block:var(--ml-space-1) var(--ml-space-3);gap:1px;display:grid}.ml-workbench-tree-link{justify-content:space-between;align-items:center;gap:var(--ml-space-2);min-height:1.875rem;padding:var(--ml-space-1) var(--ml-space-2) var(--ml-space-1) var(--ml-space-8);border-radius:var(--ml-radius-md);color:var(--ml-text-muted);font-size:var(--ml-type-sm);text-decoration:none;display:flex}.ml-workbench-search-results .ml-workbench-tree-link{padding-inline-start:var(--ml-space-2)}.ml-workbench-tree-link small{color:var(--ml-text-faint);font-size:var(--ml-type-xs)}.ml-workbench-tree-link:hover{color:var(--ml-text)}.ml-workbench-tree-link[aria-current=page]{background:var(--ml-fill-hover);color:var(--ml-text);font-weight:500}.ml-workbench-main{min-width:0}.ml-workbench-workbench{border:1px solid var(--ml-border-subtle);border-radius:calc(var(--ml-radius-lg) + 2px);background:var(--ml-surface);overflow:hidden}.ml-workbench-workbench-bar{justify-content:space-between;align-items:center;gap:var(--ml-space-2);padding:var(--ml-space-2);border-bottom:1px solid var(--ml-border-subtle);flex-wrap:wrap;display:flex}.ml-workbench-control-row{align-items:center;gap:var(--ml-space-1);flex-wrap:wrap;display:flex}.ml-workbench-divider{width:1px;height:1.25rem;margin-inline:var(--ml-space-1);background:var(--ml-border-subtle)}.ml-workbench-compare-select{align-items:center;gap:var(--ml-space-2);padding:var(--ml-space-2) var(--ml-space-3);border-bottom:1px solid var(--ml-border-subtle);color:var(--ml-text-muted);font-size:var(--ml-type-xs);font-weight:500;display:flex}.ml-workbench-compare-select select{min-height:1.875rem;padding-inline:var(--ml-space-2);border:1px solid var(--ml-border);border-radius:var(--ml-radius-md);background:var(--ml-surface);color:var(--ml-text);font-size:var(--ml-type-xs)}.ml-workbench-comparison{grid-template-columns:minmax(0,1fr);display:grid}.ml-workbench-comparison[data-compare]{grid-template-columns:repeat(2,minmax(0,1fr))}.ml-workbench-canvas{min-width:0;min-height:clamp(30rem,100dvh - 14rem,84rem);padding:var(--ml-space-12) var(--ml-space-6) var(--ml-space-6);background:radial-gradient(circle, color-mix(in oklab, var(--ml-text) 9%, transparent) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem, var(--ml-background);color:var(--ml-text);font-family:var(--ml-font-sans);letter-spacing:var(--ml-tracking);transition:background-color var(--ml-duration-normal), color var(--ml-duration-normal);justify-content:center;display:flex;position:relative;overflow:auto}.ml-workbench-comparison[data-compare] .ml-workbench-canvas+.ml-workbench-canvas{border-left:1px solid var(--ml-border-subtle)}.ml-workbench-canvas-label{top:var(--ml-space-3);left:var(--ml-space-3);padding:var(--ml-space-0-5) var(--ml-space-2);border-radius:var(--ml-radius-pill);background:var(--ml-background-subtle);color:var(--ml-text-muted);font-size:var(--ml-type-2xs);font-weight:500;position:absolute}.ml-workbench-canvas[data-viewport=mobile] .ml-workbench-component-wrap,.ml-workbench-canvas[data-viewport=mobile] .ml-workbench-frame{width:min(100%,24.375rem)}.ml-workbench-component-wrap{align-self:start;width:min(100%,48rem)}.ml-workbench-component-stage{border:0;min-width:0;margin:0;padding:0}.ml-workbench-component-stage:disabled{opacity:.7}.ml-workbench-tilt-stage{padding:var(--ml-space-6);border:1px solid var(--ml-border-subtle);border-radius:var(--ml-radius-lg);background:var(--ml-surface);box-shadow:var(--ml-shadow-lg)}.ml-workbench-frame{border:1px solid var(--ml-border-subtle);border-radius:var(--ml-radius-lg);background:var(--ml-background);width:100%;height:clamp(28rem,100dvh - 16rem,82rem);box-shadow:var(--ml-shadow-md);flex:none}.ml-workbench-code{gap:var(--ml-space-5);padding:var(--ml-space-4);background:var(--ml-background);display:grid}.ml-workbench-code-file>div{justify-content:space-between;align-items:center;gap:var(--ml-space-4);margin-bottom:var(--ml-space-2);color:var(--ml-text-muted);font-family:var(--ml-font-mono);font-size:var(--ml-type-xs);display:flex}.ml-workbench-code-file>.ml-showcase-note{margin-bottom:var(--ml-space-3)}.ml-workbench-code pre{max-height:min(72vh,52rem);padding:var(--ml-space-4) var(--ml-space-5);border:1px solid var(--ml-border-subtle);border-radius:var(--ml-radius-lg);background:var(--ml-code-bg);color:var(--ml-text);font-family:var(--ml-font-mono);tab-size:2;font-size:.8125rem;line-height:1.7;overflow:auto}@media (max-width:64rem){.ml-workbench-layout{grid-template-columns:1fr}.ml-workbench-sidebar{max-height:20rem;position:static}}@media (max-width:48rem){.ml-workbench-heading{flex-direction:column;align-items:flex-start}.ml-workbench-comparison[data-compare]{grid-template-columns:1fr}.ml-workbench-comparison[data-compare] .ml-workbench-canvas+.ml-workbench-canvas{border-top:1px solid var(--ml-border-subtle);border-left:0}.ml-workbench-canvas{min-height:28rem;padding-inline:var(--ml-space-4)}}}