@layer ui.theme-studio{.ui-studio{background:var(--color-base-200);color:var(--color-base-content);font-family:var(--font-sans);font-size:var(--t-md);gap:1.5rem;padding:clamp(1rem,2.5vw,2rem);display:grid}.ui-studio-probe,.ui-studio-probe[hidden]{display:none}.ui-studio-head{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;display:flex}.ui-studio-title{font-family:var(--font-display);font-size:var(--t-3xl);margin:0;font-weight:600;line-height:1.1}.ui-studio-lede{max-width:62ch;color:var(--color-base-content-muted);margin:.5rem 0 0;line-height:1.5}.ui-studio-head-actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.ui-studio-confirm{font-size:var(--t-sm);color:var(--color-base-content-muted)}.ui-studio-body{grid-template-columns:minmax(20rem,27rem) minmax(0,1fr);align-items:start;gap:1.5rem;display:grid}.ui-studio-editor{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-border-strong) transparent;max-block-size:calc(100dvh - 2rem);padding-inline-end:.25rem;position:sticky;top:1rem;overflow:auto}.ui-studio-editor .ui-acc{min-inline-size:0}@media (width<=70rem){.ui-studio-body{grid-template-columns:minmax(0,1fr)}.ui-studio-editor{max-block-size:none;position:static}}.ui-studio-note{font-size:var(--t-xs);color:var(--color-base-content-muted);margin:0;line-height:1.5}.ui-studio-anchor-head code,.ui-studio-font-label code,.ui-studio-step-name{font-family:var(--font-data);font-size:var(--t-2xs);color:var(--color-base-content-faint)}.ui-studio-css{contain:inline-size;border-radius:var(--r-sm);background:var(--color-base-100);max-block-size:24rem;color:var(--color-base-content);box-shadow:inset 0 0 0 1px var(--color-border);font-family:var(--font-data);font-size:var(--t-2xs);white-space:pre;margin:0;padding:.75rem;line-height:1.6;overflow:auto}.ui-studio-presets,.ui-studio-rail{gap:.6rem;display:grid}.ui-studio-rail-cards{grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:.4rem;display:grid}.ui-studio-card{--ui-surface:var(--color-base-200);--_ui-radius:var(--r-sm);border-radius:var(--_ui-radius);corner-shape:var(--s-corner);background:var(--ui-surface-paint);color:var(--color-base-content);box-shadow:var(--ui-edge), inset 0 0 0 1px var(--color-border-strong);font:inherit;font-family:var(--font-sans);text-align:start;cursor:pointer;border:0;align-content:start;justify-items:start;gap:.3rem;padding:.55rem .6rem;transition:box-shadow .15s;display:grid}.ui-studio-card:hover{box-shadow:var(--ui-edge-hover), inset 0 0 0 2px var(--color-primary)}.ui-studio-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ui-studio-card-dots{gap:3px;display:flex}.ui-studio-card-dots>span{block-size:.75rem;inline-size:.75rem;box-shadow:inset 0 0 0 1px var(--color-border-strong);border-radius:50%}.ui-studio-card-name{font-size:var(--t-xs);font-weight:600}.ui-studio-card-note{font-size:var(--t-2xs);color:var(--color-base-content-muted);line-height:1.3}.ui-studio-anchors{gap:1rem;display:grid}.ui-studio-anchor{border-block-end:1px solid var(--color-border);gap:.4rem;padding-block-end:1rem;display:grid}.ui-studio-anchor:last-child{border-block-end:0;padding-block-end:0}.ui-studio-anchor-head{flex-wrap:wrap;align-items:baseline;gap:.5rem;display:flex}.ui-studio-anchor-head .ui-studio-reset{margin-inline-start:auto}.ui-studio-sides{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;display:grid}.ui-studio-side{align-content:start;gap:.35rem;min-inline-size:0;display:grid}.ui-studio-side-label{font-family:var(--font-label,var(--font-data));font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-base-content-muted)}.ui-studio-changed{color:var(--color-base-content);font-weight:700}.ui-studio-side-controls{align-items:center;gap:.35rem;min-inline-size:0;display:flex}.ui-studio-swatch{border-radius:var(--r-xs);cursor:pointer;background:0 0;border:0;flex:none;block-size:2.25rem;inline-size:2.25rem;padding:0}.ui-studio-swatch::-webkit-color-swatch-wrapper{padding:0}.ui-studio-swatch::-webkit-color-swatch{border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--color-border-strong);border:0}.ui-studio-swatch::-moz-color-swatch{border-radius:var(--r-xs);border:0}.ui-studio-swatch:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ui-studio-value,.ui-studio-step-value{inline-size:100%;min-inline-size:0;font-family:var(--font-data);font-size:var(--t-2xs);flex:1}.ui-studio-side-actions{flex-wrap:wrap;gap:.25rem;display:flex}.ui-studio-fonts,.ui-studio-ladder{gap:.9rem;display:grid}.ui-studio-font{gap:.35rem;display:grid}.ui-studio-font-label{align-items:baseline;gap:.5rem;display:flex}.ui-studio-font-select{inline-size:100%}.ui-studio-font-specimen{font-size:var(--t-lg);overflow-wrap:anywhere;margin:0;line-height:1.3}.ui-studio-step{grid-template-columns:4.75rem minmax(0,6.5rem) minmax(0,1fr) auto;align-items:center;gap:.5rem;display:grid}.ui-studio-step-sample{white-space:nowrap;align-items:center;min-block-size:2rem;display:flex;overflow:hidden}.ui-studio-radius-sample{background:var(--color-primary-soft);block-size:2rem;inline-size:3rem;box-shadow:inset 0 0 0 1.5px var(--color-primary)}.ui-studio-plates{border-radius:var(--r-md);background:var(--color-base-200);flex-wrap:wrap;align-items:center;gap:.9rem;padding:1rem;display:flex}.ui-studio-plate-sample{--_ui-radius:var(--r-md);border-radius:var(--_ui-radius);corner-shape:var(--s-corner);background:var(--ui-surface-paint);color:var(--color-base-content);box-shadow:var(--ui-edge), 0 0 0 1px var(--color-border);font-size:var(--t-sm);place-items:center;padding:.55rem 1rem;transition:translate .2s;display:inline-grid}.ui-studio-plate-sample:hover{translate:0 calc(-1 * var(--s-lift))}.ui-studio-surface-ladder{gap:.75rem;display:grid}.ui-studio-surface-steps{flex-wrap:wrap;gap:.25rem .9rem;display:flex}.ui-studio-surface-steps code{font-family:var(--font-data);font-size:var(--t-2xs);color:var(--color-base-content-muted)}.ui-studio-previews{gap:2rem;min-inline-size:0;display:grid;container:ui-studio-previews/inline-size}.ui-studio-preview,.ui-studio-frames,.ui-studio-catalogue{gap:.75rem;min-inline-size:0;display:grid}.ui-studio-frames-bar,.ui-studio-catalogue-bar{flex-wrap:wrap;align-items:end;gap:.75rem;display:flex}.ui-studio-frames-grid,.ui-studio-panes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1rem;display:grid}.ui-studio-frames-grid[data-viewport=phone]{grid-template-columns:repeat(2,minmax(0,390px))}@container ui-studio-previews (width<=44rem){.ui-studio-frames-grid,.ui-studio-frames-grid[data-viewport=phone],.ui-studio-panes{grid-template-columns:minmax(0,1fr)}}.ui-studio-frame{gap:.4rem;min-inline-size:0;margin:0;display:grid}.ui-studio-frame-caption,.ui-studio-pane-tag{font-family:var(--font-label,var(--font-data));font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-base-content-muted)}.ui-studio-frame-box{block-size:calc(var(--ui-studio-frame-height) * var(--ui-studio-frame-scale));border-radius:var(--r-md);background:var(--color-base-100);box-shadow:0 0 0 1px var(--color-border-strong);position:relative;overflow:hidden}.ui-studio-frame-page{inline-size:var(--ui-studio-frame-width);block-size:var(--ui-studio-frame-height);transform:scale(var(--ui-studio-frame-scale));transform-origin:0 0;border:0;display:block}.ui-studio-pane{border-radius:var(--r-md);background:var(--color-base-200);min-inline-size:0;color:var(--color-base-content);font-family:var(--font-sans);box-shadow:inset 0 0 0 1px var(--color-border-strong);padding:2.25rem 1rem 1.25rem;position:relative}.ui-studio-pane-tag{color:var(--color-base-content-faint);position:absolute;inset-block-start:.7rem;inset-inline-end:.85rem}.ui-studio-specimens{gap:1rem;min-inline-size:0;display:grid}.ui-studio-type{gap:.85rem;display:grid}.ui-studio-type-row{gap:.25rem;display:grid}.ui-studio-type-row[data-role=display] .ui-studio-type-sample{font-size:var(--t-3xl);font-weight:600;line-height:1.1}.ui-studio-type-row[data-role=sans] .ui-studio-type-sample{max-width:52ch;color:var(--color-base-content-muted);line-height:1.55}.ui-studio-type-row[data-role=data] .ui-studio-type-sample{font-size:var(--t-lg)}.ui-studio-type-row[data-role=label] .ui-studio-type-sample{font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-base-content-muted)}.ui-studio-swatches,.ui-studio-type-ladder,.ui-studio-radius-ladder{flex-wrap:wrap;align-items:end;gap:.75rem 1rem;display:flex}.ui-studio-swatch-cell,.ui-studio-ladder-cell{justify-items:center;gap:.25rem;display:grid}.ui-studio-swatch-cell code,.ui-studio-ladder-cell code{font-family:var(--font-data);font-size:var(--t-2xs);color:var(--color-base-content-muted)}.ui-studio-swatch-chip{border-radius:var(--r-xs);block-size:2rem;inline-size:2.75rem;box-shadow:inset 0 0 0 1px var(--color-border-strong)}.ui-studio-matrix,.ui-studio-variants{scrollbar-width:thin;gap:4px;padding-block-end:4px;display:grid;overflow-x:auto}.ui-studio-matrix-row{grid-template-columns:4.5rem repeat(11,minmax(1.9rem,1fr));align-items:center;gap:3px;min-inline-size:26rem;display:grid}.ui-studio-variants-row{grid-template-columns:4.5rem repeat(5,minmax(4.25rem,1fr));align-items:center;gap:.35rem;min-inline-size:28rem;display:grid}.ui-studio-matrix-row strong,.ui-studio-variants-row strong{font-size:var(--t-2xs)}.ui-studio-level{border-radius:var(--r-xs);background:var(--ui-surface);block-size:2rem;color:var(--ui-ink);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-base-content) 12%, transparent);font-family:var(--font-data);font-size:var(--t-2xs);cursor:copy;border:0;place-items:center;padding:0;font-weight:700;display:grid}.ui-studio-level:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ui-studio-shapes,.ui-studio-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.ui-studio-specimen-panels{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start;gap:.75rem;display:grid}.ui-studio-stack{gap:.85rem;display:grid}.ui-studio-anatomy{gap:.75rem;display:grid}.ui-studio-anatomy-surfaces{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.5rem;display:grid}.ui-studio-anatomy-surface{gap:.3rem;display:grid}.ui-studio-anatomy-swatch{border:1px solid var(--ui-border);border-radius:var(--r-xs);block-size:2.25rem}.ui-studio-anatomy-ink{border:2px solid var(--ui-border);border-radius:var(--r-sm);background:var(--ui-surface);color:var(--ui-ink);gap:.25rem;padding:.75rem;display:grid}.ui-studio-ink-muted{color:var(--ui-ink-muted)}.ui-studio-ink-faint{color:var(--ui-ink-faint)}.ui-studio-anatomy-marks{gap:.35rem;display:grid}.ui-studio-anatomy-track{border-radius:var(--r-pill);background:var(--ui-track);block-size:6px;overflow:hidden}.ui-studio-anatomy-track>span{background:var(--ui-color);block-size:100%;inline-size:68%;display:block}.ui-studio-role{gap:1px;display:grid}.ui-studio-role code{font-family:var(--font-data);font-size:var(--t-2xs);font-weight:700}.ui-studio-role span{font-size:var(--t-2xs);color:color-mix(in oklab, currentColor 72%, transparent)}.ui-studio-type-step{font-family:var(--font-display);line-height:1}.ui-studio-radius-box{background:var(--color-primary-soft);block-size:2.5rem;inline-size:3.5rem;box-shadow:inset 0 0 0 1.5px var(--color-primary)}}.landing-theme-studio{padding-top:2.5rem}.landing-theme-studio .ui-studio-editor{max-block-size:calc(100dvh - 6rem);top:5rem}.landing-theme-loading{text-align:center;color:var(--color-base-content-faint);padding:6rem 1.5rem}