*{box-sizing:border-box}html{background-color:var(--maya-bg-root);color:var(--maya-text-primary)}html[data-theme=dark]{color-scheme:dark}html[data-theme=light]{color-scheme:light}body{font-family:var(--maya-font-sans);padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;transition:background-color .2s ease,color .2s ease}body,h1,h2,h3,h4,h5,h6,p{margin:0}a{color:inherit;text-decoration:none}ul{list-style:none;margin:0;padding:0}.layout{display:flex;min-height:100vh}.sidebar{background-color:var(--maya-bg-root);border-right:1px solid var(--maya-border);bottom:0;display:flex;flex-direction:column;left:0;min-width:220px;position:fixed;top:0;transition:background-color .2s ease,border-color .2s ease;width:220px;z-index:10}.sidebar-header{align-items:center;border-bottom:1px dashed var(--maya-dash-color);display:flex;height:52px;justify-content:space-between;padding:0 20px}.sidebar-header h1{font-size:.875rem;font-weight:600;letter-spacing:-.01em}.sidebar-nav{flex:1;overflow-y:auto;padding:16px 12px}.nav-group{margin-bottom:20px}.nav-group-title{color:var(--maya-text-muted);font-size:.6875rem;font-weight:500;letter-spacing:.06em;margin-bottom:4px;padding:0 8px;text-transform:uppercase}.nav-item{border-radius:var(--maya-radius-sm);color:var(--maya-text-secondary);cursor:pointer;display:block;font-size:.8125rem;padding:6px 8px;transition:color var(--maya-duration) var(--maya-ease)}.nav-item.active,.nav-item:hover{color:var(--maya-text-primary)}.nav-item.active{background-color:var(--maya-bg-surface)}.main-content{display:flex;flex:1;flex-direction:column;margin-left:220px}.topbar{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:var(--maya-bg-topbar);border-bottom:1px dashed var(--maya-dash-color);display:flex;height:52px;justify-content:space-between;padding:0 40px;position:sticky;top:0;transition:background-color .2s ease,border-color .2s ease;z-index:5}.path{color:var(--maya-text-secondary);font-size:.8125rem}.content-area{flex:1;max-width:860px;padding:40px}.component-header{margin-bottom:40px}.component-title{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;margin-bottom:6px}.component-desc{color:var(--maya-text-secondary);font-size:.875rem}.page-enter-active,.page-leave-active{transition:opacity .2s ease,transform .2s ease}.page-enter-from{opacity:0;transform:translateY(6px)}.page-leave-to{opacity:0;transform:translateY(-6px)}.layout-enter-active,.layout-leave-active{transition:opacity .2s ease}.layout-enter-from,.layout-leave-to{opacity:0}.topbar-left{align-items:center;display:flex;gap:12px}.mobile-menu-close,.mobile-menu-open{align-items:center;background:transparent;border:none;border-radius:var(--maya-radius-sm);color:var(--maya-text-primary);cursor:pointer;display:none;justify-content:center;margin:-4px;padding:4px}.mobile-menu-close:hover,.mobile-menu-open:hover{background:var(--maya-bg-raised)}@media(max-width:768px){.sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.is-sidebar-open .sidebar{box-shadow:0 0 40px #00000080;transform:translate(0)}.sidebar-overlay{animation:fade-in .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006;inset:0;position:fixed;z-index:9}.main-content{margin-left:0}.topbar{padding:0 16px}.content-area{padding:24px 16px}#app .maya-preview-code-canvas{padding:24px 16px!important}#app .maya-preview-code-canvas>div{max-width:100%}#app .maya-preview-code-canvas [style*="display: flex"]:not(.maya-banner__inner){flex-wrap:wrap}.mobile-menu-close,.mobile-menu-open{display:flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}}:root{--maya-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--maya-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--maya-radius-sm:5px;--maya-radius-md:6px;--maya-radius-lg:8px;--maya-radius-xl:12px;--maya-duration:.15s;--maya-duration-bouncy:.4s;--maya-ease:cubic-bezier(.16,1,.3,1);--maya-ease-in:cubic-bezier(.32,0,.67,0);--maya-ease-out:cubic-bezier(.33,1,.68,1);--maya-ease-in-out:cubic-bezier(.65,0,.35,1);--maya-ease-bouncy:cubic-bezier(.25,1,.5,1.2);--maya-dash-color:hsla(0,0%,100%,.12);--maya-dash-size:1px;--maya-dash-pattern:4px 4px}:root,[data-theme=dark]{--maya-bg-root:#0a0a0a;--maya-bg-surface:#111;--maya-bg-raised:#191919;--maya-bg-overlay:rgba(0,0,0,.6);--maya-bg-topbar:hsla(0,0%,4%,.6);--maya-text-primary:#ededed;--maya-text-secondary:#888;--maya-text-muted:#555;--maya-text-inverse:#0a0a0a;--maya-border:hsla(0,0%,100%,.08);--maya-border-strong:hsla(0,0%,100%,.14);--maya-border-hover:hsla(0,0%,100%,.22);--maya-shadow-sm:0 1px 2px rgba(0,0,0,.5);--maya-shadow-md:0 8px 30px rgba(0,0,0,.3),0 0 0 1px hsla(0,0%,100%,.08);--maya-shadow-inset:inset 0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.2);--maya-gradient-surface:linear-gradient(180deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,0));--maya-pattern-stripes:repeating-linear-gradient(-45deg,hsla(0,0%,100%,.04),hsla(0,0%,100%,.04) 1px,transparent 0,transparent 6px);--maya-skeleton-base:hsla(0,0%,100%,.04);--maya-skeleton-shimmer:hsla(0,0%,100%,.08);--maya-code-bg:#0a0a0a;--maya-btn-primary-bg:#ededed;--maya-btn-primary-bg-hover:#fff;--maya-btn-primary-text:#0a0a0a;--maya-btn-primary-gradient:linear-gradient(180deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,0) 50%,rgba(0,0,0,.08));--maya-btn-primary-shadow:inset 0 1px 0 hsla(0,0%,100%,.5),inset 0 -2px 0 rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.2);--maya-btn-secondary-bg:transparent;--maya-btn-secondary-bg-hover:hsla(0,0%,100%,.06);--maya-btn-secondary-text:#ededed;--maya-btn-secondary-shadow:inset 0 1px 0 hsla(0,0%,100%,.04),0 1px 2px rgba(0,0,0,.1);--maya-btn-ghost-bg:transparent;--maya-btn-ghost-bg-hover:hsla(0,0%,100%,.06);--maya-btn-ghost-text:#888;--maya-btn-ghost-text-hover:#ededed;--maya-input-bg:hsla(0,0%,7%,.6);--maya-input-gradient:linear-gradient(180deg,hsla(0,0%,100%,.02),hsla(0,0%,100%,0));--maya-input-shadow:inset 0 2px 4px rgba(0,0,0,.4),inset 0 0 0 1px hsla(0,0%,100%,.04),0 1px 1px hsla(0,0%,100%,.02);--maya-input-focus-border:hsla(0,0%,100%,.3);--maya-checkbox-bg:#121212;--maya-checkbox-gradient:linear-gradient(180deg,hsla(0,0%,100%,.04),hsla(0,0%,100%,0));--maya-checkbox-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.1);--maya-checkbox-checked-bg:#ededed;--maya-checkbox-checked-border:#ededed;--maya-checkbox-check-color:#0a0a0a;--maya-table-bg:#0a0a0a;--maya-table-head-bg:hsla(0,0%,100%,.03);--maya-table-head-text:#888;--maya-table-row-hover:hsla(0,0%,100%,.02);--maya-table-row-border:hsla(0,0%,100%,.05);--maya-dash-color:hsla(0,0%,100%,.2);--maya-success:#30a46c;--maya-success-hover:#33b074;--maya-success-muted:rgba(48,164,108,.15);--maya-success-border:rgba(48,164,108,.3);--maya-success-text:#4cc38a;--maya-warning:#f76b15;--maya-warning-hover:#ff761a;--maya-warning-muted:rgba(247,107,21,.15);--maya-warning-border:rgba(247,107,21,.3);--maya-warning-text:#ffb073;--maya-danger:#e5484d;--maya-danger-hover:#ec5d5e;--maya-danger-muted:rgba(229,72,77,.15);--maya-danger-border:rgba(229,72,77,.3);--maya-danger-text:#ffb2b6;--maya-info:#0090ff;--maya-info-hover:#119bff;--maya-info-muted:rgba(0,144,255,.15);--maya-info-border:rgba(0,144,255,.3);--maya-info-text:#52a9ff;color-scheme:dark}[data-theme=light]{--maya-bg-root:#fff;--maya-bg-surface:#f8f8f8;--maya-bg-raised:#f0f0f0;--maya-bg-overlay:rgba(0,0,0,.3);--maya-bg-topbar:hsla(0,0%,100%,.6);--maya-text-primary:#171717;--maya-text-secondary:#6b6b6b;--maya-text-muted:#a3a3a3;--maya-text-inverse:#fff;--maya-border:rgba(0,0,0,.08);--maya-border-strong:rgba(0,0,0,.14);--maya-border-hover:rgba(0,0,0,.22);--maya-shadow-sm:0 1px 2px rgba(0,0,0,.04);--maya-shadow-md:0 8px 30px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.03);--maya-shadow-inset:inset 0 1px 2px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.02);--maya-gradient-surface:linear-gradient(180deg,rgba(0,0,0,.01),transparent);--maya-pattern-stripes:repeating-linear-gradient(-45deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 0,transparent 6px);--maya-skeleton-base:rgba(0,0,0,.04);--maya-skeleton-shimmer:rgba(0,0,0,.08);--maya-code-bg:#f5f5f5;--maya-btn-primary-bg:#171717;--maya-btn-primary-bg-hover:#303030;--maya-btn-primary-text:#fff;--maya-btn-primary-gradient:linear-gradient(180deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,0) 50%,rgba(0,0,0,.15));--maya-btn-primary-shadow:inset 0 1px 0 hsla(0,0%,100%,.15),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.12);--maya-btn-secondary-bg:transparent;--maya-btn-secondary-bg-hover:rgba(0,0,0,.04);--maya-btn-secondary-text:#171717;--maya-btn-secondary-shadow:inset 0 1px 0 hsla(0,0%,100%,.4),0 1px 2px rgba(0,0,0,.04);--maya-btn-ghost-bg:transparent;--maya-btn-ghost-bg-hover:rgba(0,0,0,.04);--maya-btn-ghost-text:#6b6b6b;--maya-btn-ghost-text-hover:#171717;--maya-input-bg:#fff;--maya-input-gradient:linear-gradient(180deg,rgba(0,0,0,.01),transparent);--maya-input-shadow:inset 0 2px 4px rgba(0,0,0,.02),inset 0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--maya-input-focus-border:rgba(0,0,0,.3);--maya-checkbox-bg:#fff;--maya-checkbox-gradient:linear-gradient(180deg,rgba(0,0,0,.02),transparent);--maya-checkbox-shadow:inset 0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);--maya-checkbox-checked-bg:#171717;--maya-checkbox-checked-border:#171717;--maya-checkbox-check-color:#fff;--maya-table-bg:#fff;--maya-table-head-bg:rgba(0,0,0,.02);--maya-table-head-text:#6b6b6b;--maya-table-row-hover:rgba(0,0,0,.02);--maya-table-row-border:rgba(0,0,0,.06);--maya-dash-color:rgba(0,0,0,.24);--maya-success:#30a46c;--maya-success-hover:#298c5a;--maya-success-muted:rgba(48,164,108,.1);--maya-success-border:rgba(48,164,108,.2);--maya-success-text:#18794e;--maya-warning:#f76b15;--maya-warning-hover:#db5b0f;--maya-warning-muted:rgba(247,107,21,.1);--maya-warning-border:rgba(247,107,21,.2);--maya-warning-text:#c25100;--maya-danger:#e5484d;--maya-danger-hover:#ce3a43;--maya-danger-muted:rgba(229,72,77,.1);--maya-danger-border:rgba(229,72,77,.2);--maya-danger-text:#cc1825;--maya-info:#0090ff;--maya-info-hover:#007ee6;--maya-info-muted:rgba(0,144,255,.1);--maya-info-border:rgba(0,144,255,.2);--maya-info-text:#0068d6;color-scheme:light}*,:after,:before{box-sizing:border-box}.maya-btn,.maya-checkbox,.maya-input,.maya-table,.maya-textarea{font-family:var(--maya-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.maya-dash-top{border-top:var(--maya-dash-size) dashed var(--maya-dash-color)!important}.maya-dash-bottom{border-bottom:var(--maya-dash-size) dashed var(--maya-dash-color)!important}.maya-dash-left{border-left:var(--maya-dash-size) dashed var(--maya-dash-color)!important}.maya-dash-right{border-right:var(--maya-dash-size) dashed var(--maya-dash-color)!important}.maya-dash-all{border:var(--maya-dash-size) dashed var(--maya-dash-color)!important}.maya-icon-swap-enter-active{transition:all .3s cubic-bezier(.34,1.56,.64,1)}.maya-icon-swap-leave-active{transition:all .15s cubic-bezier(.55,.05,.68,.19)}.maya-icon-swap-enter-from,.maya-icon-swap-leave-to{opacity:0;transform:scale(.5)}.maya-panel-fade-enter-active{transition:opacity .2s ease,transform .2s ease}.maya-panel-fade-leave-active{transition:opacity .12s ease}.maya-panel-fade-enter-from{opacity:0;transform:translateY(4px)}.maya-panel-fade-leave-to{opacity:0}.maya-fade-enter-active,.maya-fade-leave-active{transition:opacity .15s ease}.maya-fade-enter-from,.maya-fade-leave-to{opacity:0}.maya-overlay-fade-enter-active,.maya-overlay-fade-leave-active{transition:opacity .25s var(--maya-ease)}.maya-overlay-fade-enter-from,.maya-overlay-fade-leave-to{opacity:0}.maya-dialog-zoom-enter-active{transition:opacity .25s var(--maya-ease-out),transform .3s var(--maya-ease-out),filter .25s var(--maya-ease-out)}.maya-dialog-zoom-leave-active{transition:opacity .15s var(--maya-ease-in),transform .15s var(--maya-ease-in),filter .15s var(--maya-ease-in)}.maya-dialog-zoom-enter-from,.maya-dialog-zoom-leave-to{filter:blur(8px);opacity:0;transform:scale(.96) translateY(8px)}::view-transition-new(root),::view-transition-old(root){animation:none;mix-blend-mode:normal}