@layer components{.design-hero__toolbar{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;min-height:24px;margin-bottom:6px;display:flex}.design-hero__tool{border:1px solid var(--border);background:var(--bg);min-width:22px;height:22px;color:var(--text-dim);font-family:var(--design-font-mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:4px;padding:0 6px;font-size:10px;display:inline-flex}.design-hero__tool:hover{color:var(--text)}.design-hero__tool[aria-pressed=true]{background:color-mix(in srgb, var(--accent) 14%, var(--bg));color:var(--accent)}.design-hero__tool:focus-visible,.design-hero__handle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.design-hero__readout{color:var(--text-dim);font-family:var(--design-font-mono);font-variant-numeric:tabular-nums;padding:0 4px;font-size:11px}.design-hero__frame{isolation:isolate;border:1px solid var(--border);max-width:100%;color:var(--text);font-family:var(--design-font-sans);border-radius:10px;line-height:normal;position:relative}.design-hero__screen{border-radius:9px;overflow-x:auto;container:design-hero/inline-size}.design-hero__screen[data-screen]{container-name:design-hero bk-screen}.design-hero__stage{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;min-height:218px;padding:28px;display:flex}@container design-hero (width<=640px){.design-hero__stage{padding:16px}}.design-hero__stage--flush{padding-inline:0}.design-hero__handle{cursor:ew-resize;touch-action:none;border-radius:0 10px 10px 0;justify-content:center;align-items:center;width:12px;display:flex;position:absolute;top:0;bottom:0;right:-1px}.design-hero__grip{background:var(--border);border-radius:2px;width:4px;height:32px}.design-hero__handle:hover .design-hero__grip,.design-hero__handle[data-dragging] .design-hero__grip{background:var(--text-dim)}.design-hero__handle:focus-visible .design-hero__grip{background:var(--accent)}.design-preview{z-index:calc(var(--bk-layer-dropdown) - 1);background:var(--bg2);color:var(--text);font-family:var(--design-font-sans);flex-direction:column;line-height:normal;display:flex;position:fixed;inset:0}.design-preview:focus{outline:none}.design-preview__bar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;display:flex}.design-preview__picker{width:300px;max-width:100%}.design-preview__spacer{flex:1}.design-preview__size{color:var(--text-dim);font-family:var(--design-font-mono);font-variant-numeric:tabular-nums;font-size:12px}.design-preview__area{flex:1;place-items:center;min-height:0;padding:24px;display:grid;overflow:auto}.design-preview__fit{position:relative}.design-preview__device{transform-origin:0 0;box-shadow:0 0 0 1px var(--border-bright);border-radius:12px;position:absolute;top:0;left:0;overflow:auto}.design-preview__screen{flex-direction:column;height:100%;display:flex;overflow-x:visible;container-type:size}.design-preview__screen>.design-hero__stage{flex:1 0 auto;align-content:flex-start;align-items:flex-start}}