@layer components{.lab-intro{padding-block:var(--space-xxl)}.lab-intro-heading{justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.lab-intro h1{font-size:var(--web-type-display-large)}.lab-intro>p{max-width:calc(var(--space-page) * 12);margin-block:var(--space-md);font-size:var(--web-docs-supporting)}.lab-intro-meta{gap:var(--space-lg) var(--space-section);font-size:var(--web-type-control);color:var(--web-primary);flex-wrap:wrap;display:flex}.lab-layout{align-items:start;gap:var(--space-section);padding-block:var(--space-section);flex-wrap:wrap;display:flex}.lab-sidebar{flex:1 1 calc(var(--space-page) * 3);gap:var(--space-lg);min-width:0;padding:var(--space-xl);border:var(--space-hairline) solid var(--web-border);border-radius:var(--radius-panel);background:var(--web-surface);display:grid}.lab-field{gap:var(--space-sm);min-width:0;color:var(--web-muted);font-size:var(--web-type-control);display:grid}.lab-field input,.lab-field select,.lab-zoom select{width:100%;min-width:0;padding:var(--space-sm) var(--space-md);background:var(--web-background);border:var(--space-hairline) solid var(--web-border-strong);border-radius:var(--radius-small);color:var(--web-text);font:inherit}.lab-field select:disabled,.lab-zoom select:disabled,.lab-button:disabled{opacity:var(--opacity-placeholder);cursor:default}.lab-story-list{gap:var(--space-xs);max-height:calc(var(--space-page) * 8);padding:var(--space-xs);margin-inline:calc(var(--space-xs) * -1);display:grid;overflow-y:auto}.lab-story-list button{border:var(--space-hairline) solid transparent;border-radius:var(--radius-small);width:100%;padding:var(--space-md);text-align:left;background:0 0}.lab-story-list button span{color:var(--web-muted);font-size:var(--web-type-caption-small);display:block}.lab-story-list button strong{font-size:var(--web-type-body);display:block}.lab-story-list button:hover{background:var(--web-surface-raised)}.lab-story-list button[aria-pressed=true]{border-color:var(--web-border-strong);background:var(--web-surface-accent)}.lab-story-list button[aria-pressed=true] strong{color:var(--web-primary)}.lab-workbench{flex:4 1 calc(var(--space-page) * 8);gap:var(--space-xl);min-width:0;display:grid}.lab-story-heading{gap:var(--space-lg);flex-wrap:wrap;justify-content:space-between;align-items:start;display:flex}.lab-story-heading>div{flex:1 1 calc(var(--space-page) * 5)}.lab-story-heading h2{font-size:var(--web-type-display-large);margin-block:var(--space-sm) var(--space-md)}.lab-story-heading p,.lab-section>p{font-size:var(--web-docs-supporting)}.lab-badge{border:var(--space-hairline) solid var(--web-border-strong);border-radius:var(--radius-control);padding:var(--space-xs) var(--space-md);font-size:var(--web-type-caption);color:var(--web-primary);white-space:nowrap}.lab-controls{grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--space-page) * 2)), 1fr));gap:var(--space-md);display:grid}.lab-stage-toolbar{justify-content:space-between;align-items:center;gap:var(--space-lg);flex-wrap:wrap;display:flex}.lab-zoom{align-items:center;gap:var(--space-sm);font-size:var(--web-type-control);color:var(--web-muted);display:flex}.lab-zoom select{width:auto}.lab-stage{height:calc(var(--space-page) * 8);border:var(--space-hairline) solid var(--web-border-strong);border-radius:var(--radius-panel);background:var(--web-background);position:relative;overflow:auto}.lab-canvas{width:max-content;min-width:100%;min-height:100%;padding:var(--space-xxl);place-items:center;display:grid}.lab-canvas img{flex:none;max-width:none;display:block}.lab-stage-notice{bottom:var(--space-md);width:fit-content;max-width:calc(100% - var(--space-xxl));margin:calc(var(--space-wide) * -1) var(--space-md) var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--web-surface);border:var(--space-hairline) solid var(--web-border);border-radius:var(--radius-small);color:var(--web-text);font-size:var(--web-type-control);position:sticky}.lab-feedback{min-height:var(--space-xxl);font-size:var(--web-type-control);color:var(--web-muted)}.lab-actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.lab-button{justify-content:center;align-items:center;gap:var(--space-sm);border:var(--space-hairline) solid var(--web-border-strong);border-radius:var(--radius-small);padding:var(--space-sm) var(--space-md);background:var(--web-surface-raised);color:var(--web-text);font-size:var(--web-type-control);text-decoration:none;display:inline-flex}.lab-button:hover:not(:disabled){color:var(--web-primary);background:var(--web-surface-accent)}.lab-details{border-block:var(--space-hairline) solid var(--web-border);padding-block:var(--space-lg)}.lab-details summary,.lab-reference summary{cursor:pointer;font-size:var(--web-type-body);color:var(--web-text)}.lab-detail-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--space-page) * 4)), 1fr));gap:var(--space-xxl);margin-top:var(--space-xl);display:grid}.lab-detail-grid>div{min-width:0}.lab-detail-grid h3{font-size:var(--web-type-body-large);margin-bottom:var(--space-md)}.lab-detail-grid h3:not(:first-child){margin-top:var(--space-xl)}.lab-recipe{padding:var(--space-lg);margin:0 0 var(--space-md);background:var(--web-surface);border-radius:var(--radius-small);color:var(--web-text);font-size:var(--web-docs-code);overflow:auto}.lab-token-list{padding-left:var(--space-xl);font-size:var(--web-type-control);color:var(--web-primary);overflow-wrap:anywhere;margin:0}.lab-token-list li+li{margin-top:var(--space-sm)}.lab-supporting{font-size:var(--web-type-control);color:var(--web-muted);overflow-wrap:anywhere}.lab-supporting kbd{font-size:inherit}.lab-section{padding-block:var(--space-page);border-top:var(--space-hairline) solid var(--web-border)}.lab-section>h2{font-size:var(--web-type-display-large);margin-block:var(--space-lg) var(--space-xxl)}.lab-section>p{max-width:calc(var(--space-page) * 13);margin-bottom:var(--space-xl)}.lab-section .code-block{margin-block:var(--space-xxl)}.lab-reference-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--space-page) * 4)), 1fr));gap:var(--space-lg);margin-block:var(--space-xxl);display:grid}.lab-reference{border:var(--space-hairline) solid var(--web-border);border-radius:var(--radius-small);min-width:0;padding:var(--space-lg);align-self:start}.lab-reference summary span{font-size:var(--web-type-caption);color:var(--web-muted);margin-top:var(--space-xs);display:block}.lab-reference img{margin-top:var(--space-lg)}.lab-reference p{margin-top:var(--space-md);font-size:var(--web-type-control)}}