.component-showcase-split{display:grid;grid-gap:1.25rem;gap:1.25rem;grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:start;max-width:none}@media (max-width:900px){.component-showcase-split{grid-template-columns:minmax(0,1fr)}}.component-variant-list{display:grid;grid-gap:.65rem;gap:.65rem;grid-template-columns:minmax(0,1fr)}.component-variant-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;flex-direction:column;gap:.2rem;width:100%;margin:0;padding:.75rem .85rem;border:1px solid var(--waka-border);border-radius:var(--waka-radius-md);background:var(--waka-bg-elevated);color:var(--waka-text);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--waka-duration-normal) var(--waka-ease),background var(--waka-duration-normal) var(--waka-ease)}.component-variant-item:hover{border-color:color-mix(in srgb,var(--waka-accent) 35%,var(--waka-border))}.component-variant-item.is-active{border-color:var(--waka-accent);background:color-mix(in srgb,var(--waka-accent) 10%,var(--waka-bg-elevated))}.component-variant-item strong{font-size:.9rem}.component-variant-item .component-showcase-hint{font-size:.72rem}.component-showcase-stage{position:-webkit-sticky;position:sticky;top:1rem;min-width:0;color:var(--waka-text)}.component-showcase-stage[data-theme],.component-variant-list[data-theme]{color-scheme:light dark}.component-showcase-stage[data-theme=dark],.component-variant-list[data-theme=dark]{color-scheme:dark}.component-showcase-stage[data-theme=light],.component-variant-list[data-theme=light]{color-scheme:light}.device-mockup-frame{display:flex;flex-direction:column;gap:.75rem;min-width:0;border:1px solid var(--waka-border);border-radius:var(--waka-radius-lg);background:var(--waka-bg-muted);padding:1rem}.device-mockup-frame-toolbar{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;margin-left:auto;width:-moz-fit-content;width:fit-content;max-width:100%}.device-mockup-frame-toolbar .waka-tabs{flex-wrap:wrap;justify-content:flex-end}.device-mockup-device-switch button,.device-mockup-orient-switch button,.ds-preview-theme-switch button{display:inline-flex;align-items:center;justify-content:center;min-width:2.35rem;min-height:2.35rem;padding:.35rem .45rem}.device-mockup-tab-ico{display:block;flex:0 0 auto}.device-mockup-frame-stage{display:flex;align-items:flex-start;justify-content:center;width:100%;min-height:320px;padding:.75rem;overflow:auto;box-sizing:border-box}.device-mockup-frame-stage[data-device=desktop]{align-items:flex-start;justify-content:stretch}.device-mockup-host{width:100%;min-width:0;display:flex;justify-content:center}.device-mockup-frame-stage[data-device=desktop] .device-mockup-host{justify-content:stretch}.device-mockup-frame-stage[data-device=desktop] device-mockup{width:100%}.device-mockup-frame-stage.is-landscape{min-height:440px}.device-mockup-frame-stage.is-landscape device-mockup{transform:rotate(90deg);transform-origin:center center}.device-mockup-frame-stage.is-landscape .device-mockup-screen-content{transform:rotate(-90deg);transform-origin:center center}.device-mockup-frame-stage.is-landscape .device-mockup-screen-content.has-viewport-scale{align-items:center;justify-content:center}.device-mockup-screen-content{width:100%;height:100%;min-height:100%;overflow:auto;box-sizing:border-box;background:var(--waka-bg,#f6f7f9);color:var(--waka-text,#1a1a1a);font-size:var(--preview-base-font,15px);line-height:1.45}.device-mockup-screen-content.has-viewport-scale{overflow:hidden;display:flex;align-items:center;justify-content:center}.device-mockup-viewport-wrap{width:calc(var(--mockup-viewport-w, 375) * var(--mockup-content-scale, 1) * 1px);height:calc(var(--mockup-viewport-h, 812) * var(--mockup-content-scale, 1) * 1px);max-width:100%;max-height:100%;overflow:hidden;flex:0 0 auto}.device-mockup-viewport{width:calc(var(--mockup-viewport-w, 375) * 1px);height:calc(var(--mockup-viewport-h, 812) * 1px);min-height:calc(var(--mockup-viewport-h, 812) * 1px);transform:scale(var(--mockup-content-scale,1));transform-origin:top left;display:flex;flex-direction:column;box-sizing:border-box}.device-mockup-screen-content.is-shell{padding:0;overflow:hidden}.device-mockup-screen-content.is-calendar,.device-mockup-screen-content.is-table{padding:.35rem}.component-showcase-preview-in-frame{display:flex;width:100%;height:100%;min-height:100%;padding:.65rem;box-sizing:border-box;flex:1 1 auto}.component-showcase-preview-in-frame,.component-showcase-preview-in-frame.is-atomic{align-items:center;justify-content:center}.component-showcase-preview-in-frame.is-atomic>*{flex:0 0 auto;width:auto;max-width:100%;box-sizing:border-box}.component-showcase-preview-in-frame.is-atomic .tabs,.component-showcase-preview-in-frame.is-atomic .waka-tabs{width:auto;max-width:100%}.component-showcase-preview-in-frame.is-atomic .field,.component-showcase-preview-in-frame.is-atomic .theme-switch,.component-showcase-preview-in-frame.is-atomic .theme-toggle{width:auto;max-width:min(100%,22rem)}.component-showcase-preview-in-frame.is-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:100%;min-height:100%;padding:.65rem;box-sizing:border-box}.component-showcase-preview-in-frame.is-layout>*{width:100%;max-width:100%;box-sizing:border-box}.component-showcase-preview-in-frame.is-typo{align-items:flex-start;justify-content:flex-start;text-align:left}.component-showcase-preview-in-frame.is-shell{padding:0;align-items:stretch;justify-content:stretch;width:100%;height:100%;min-height:100%}.component-showcase-preview-in-frame.is-shell>*{flex:1 1 auto;min-height:0;height:100%}.component-showcase-preview-in-frame.is-table{display:block;padding:.35rem;overflow:auto}.component-showcase-preview-in-frame.is-table .waka-table,.component-showcase-preview-in-frame.is-table .waka-table-scroll{width:100%}.component-showcase-preview-in-frame.is-calendar{align-items:stretch;justify-content:stretch;padding:.35rem;overflow:auto}.component-showcase-preview-in-frame.is-calendar>*{flex:1 1 auto;min-height:0;width:100%}.component-showcase-preview-in-frame.is-chat{align-items:stretch;justify-content:stretch;padding:.35rem;overflow:hidden}.component-showcase-preview-in-frame.is-chat>*{flex:1 1 auto;min-height:0;height:100%;width:100%}.component-showcase-preview-in-frame.is-chat .chat-showcase-rail.is-collapsed{width:52px;max-width:52px}.component-manager{max-width:none}