@layer reset,tokens,base,layout,landing,gallery,preview,responsive;@layer tokens{:root{--bg-color: #09090b;--panel-color: #101014;--panel-strong-color: #16161c;--hover-color: #1e1e25;--border-color: #27272f;--border-strong-color: #3f3f48;--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent-color: #d4d4d8;--accent-strong-color: #f4f4f5;--danger-color: #fca5a5;color-scheme:dark}}@layer reset{*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background:var(--bg-color);color:var(--text-primary);font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:16px;letter-spacing:0}button,input{font:inherit}:focus-visible{outline:2px solid var(--accent-strong-color);outline-offset:3px}}@layer layout{.examples-page{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem;width:min(100% - 2rem,1440px);height:100dvh;margin:0 auto;padding:1rem 0}.examples-page-centered{max-width:760px}.examples-header{display:grid;gap:.75rem;padding:0 0 1rem;border-bottom:1px solid var(--border-color)}.examples-header-primary{display:flex;align-items:end;justify-content:space-between;gap:1rem}.examples-header-controls{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;flex:0 1 34rem;min-width:0}.examples-brand{min-width:0}.examples-brand h1{margin:0;font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:0}.examples-brand p{margin:.35rem 0 0;color:var(--text-muted);font-size:.75rem;line-height:1.4}.examples-breadcrumb a{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.72rem;line-height:1.4;text-decoration:none}.examples-breadcrumb a:hover{color:var(--text-primary)}.examples-search{position:relative;display:flex;align-items:center;flex:1 1 24rem;min-width:12rem;height:2.4rem;border:1px solid var(--border-color);border-radius:.375rem;background:var(--panel-color)}.examples-search-icon{display:grid;place-items:center;width:2.25rem;color:var(--text-muted);font-size:.8rem}.examples-search input{width:100%;min-width:0;height:100%;padding:0 .75rem 0 0;border:0;background:transparent;color:var(--text-primary);font-size:.78rem;outline:0}.examples-search input::placeholder{color:var(--text-muted)}.examples-header-links{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:0 0 auto}.examples-header-link{display:inline-flex;align-items:center;justify-content:center;height:2.4rem;padding:0 .75rem;border:1px solid var(--border-color);border-radius:.375rem;background:var(--panel-color);color:var(--text-secondary);font-size:.72rem;line-height:1;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}.examples-header-link:hover{border-color:var(--border-strong-color);background:var(--hover-color);color:var(--text-primary)}.examples-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.72rem}.examples-footer-label{min-width:0;flex:1 1 auto;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.examples-footer-label a{color:var(--text-muted);text-decoration:none}.examples-footer-label a:hover{color:var(--text-primary)}.examples-footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem 1rem;min-width:0;font-size:.72rem;line-height:1.4;text-align:right}.examples-footer-links a{color:var(--text-muted);text-decoration:none}.examples-footer-links a:hover{color:var(--text-primary)}.not-found-panel{display:grid;align-content:center;justify-items:start;gap:1rem;color:var(--text-secondary)}}@layer landing{.landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;align-content:start;min-height:0;overflow:auto;padding:1px .25rem 0 0}.library-card{display:grid;grid-template-rows:auto auto minmax(3rem,1fr) auto;gap:.65rem;min-height:12rem;padding:1rem;border:1px solid var(--border-color);border-radius:.5rem;background:var(--panel-color);color:inherit;text-decoration:none;transition:background-color .15s,border-color .15s,transform .15s}.library-card:hover{border-color:var(--border-strong-color);background:var(--panel-strong-color);transform:translateY(-1px)}.library-card-name{overflow-wrap:anywhere;color:var(--text-primary);font-size:1rem;font-weight:600;line-height:1.25}.library-card-tagline{color:var(--text-muted);font-size:.72rem;line-height:1.35}.library-card-desc{color:var(--text-secondary);font-size:.78rem;line-height:1.45}.library-card-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:var(--text-muted);font-size:.72rem}.library-card-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:1.55rem;padding:0 .5rem;border:1px solid var(--border-color);border-radius:999px;color:var(--accent-color);font-variant-numeric:tabular-nums}}@layer gallery{.examples-browser{display:grid;grid-template-columns:minmax(18rem,.72fr) minmax(0,1.28fr);gap:1rem;min-height:0}.gallery-state{align-self:start;margin:0;padding:1rem;color:var(--text-muted);font-size:.8rem}.examples-list-panel,.preview-panel{min-height:0;overflow:auto;border:1px solid var(--border-color);border-radius:.5rem;background:var(--panel-color)}.examples-list-panel{padding:.5rem}.example-group{border-radius:.375rem}.example-group+.example-group{margin-top:.25rem}.group-summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title count" "description count";gap:.15rem .75rem;align-items:center;min-height:3.4rem;padding:.65rem 2rem .65rem .75rem;border-radius:.375rem;cursor:pointer;list-style:none;transition:background-color .15s,color .15s}.group-summary::-webkit-details-marker{display:none}.group-summary:after{position:absolute;top:50%;right:.75rem;color:var(--text-muted);content:">";font-size:1rem;line-height:1;transform:translateY(-50%) rotate(90deg);transition:transform .15s}.example-group:not([open]) .group-summary:after{transform:translateY(-50%) rotate(0)}.group-summary:hover,.example-group[open]>.group-summary{background:var(--hover-color)}.group-title{grid-area:title;overflow:hidden;color:var(--text-primary);font-size:.82rem;font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.group-description{grid-area:description;overflow:hidden;color:var(--text-muted);font-size:.68rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.group-count{grid-area:count;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:1.45rem;border:1px solid var(--border-color);border-radius:999px;color:var(--text-secondary);font-size:.68rem;font-variant-numeric:tabular-nums;line-height:1}.group-content{padding:.35rem .35rem .75rem}.subgroup-block+.subgroup-block{margin-top:.75rem}.subgroup-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.2rem .4rem .4rem;color:var(--accent-strong-color);font-size:.68rem;font-weight:600;line-height:1.2}.subgroup-count{color:var(--text-muted);font-variant-numeric:tabular-nums;font-weight:500}.entry-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:.375rem}.entry-link{display:flex;align-items:center;min-width:0;min-height:2rem;padding:.35rem .55rem;overflow:hidden;border:1px solid transparent;border-radius:.375rem;background:var(--panel-strong-color);color:var(--text-secondary);font-size:.72rem;line-height:1.2;text-decoration:none;text-overflow:ellipsis;transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap}.entry-link:hover{border-color:var(--border-strong-color);background:var(--hover-color);color:var(--text-primary)}.entry-link.is-active{border-color:var(--text-secondary);background:var(--bg-color);color:var(--text-primary)}}@layer preview{.preview-panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;padding:.875rem 1rem;border-bottom:1px solid var(--border-color);background:var(--panel-color)}.preview-meta{min-width:0}.preview-kicker{overflow:hidden;color:var(--accent-color);font-size:.68rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.preview-title{margin:.18rem 0 0;overflow:hidden;color:var(--text-primary);font-size:.95rem;font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.preview-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.preview-action{display:inline-flex;align-items:center;justify-content:center;min-width:3.5rem;height:2rem;padding:0 .65rem;border:1px solid var(--border-color);border-radius:.375rem;background:var(--panel-color);color:var(--text-secondary);font:inherit;font-size:.72rem;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}.preview-action:hover{border-color:var(--border-strong-color);background:var(--hover-color);color:var(--text-primary)}.preview-frame-shell{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#070709}.preview-workspace{display:grid;grid-template-areas:"preview";grid-template-columns:minmax(0,1fr);flex:1 1 auto;min-height:0}.preview-workspace[data-code-visible=true]{grid-template-areas:"code preview";grid-template-columns:minmax(14rem,var(--code-panel-width, 32%)) minmax(0,1fr)}.preview-frame-shell{grid-area:preview}.preview-empty{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;color:var(--text-muted);font-size:.8rem;text-align:center}.preview-error{color:var(--danger-color)}.preview-frame{display:block;width:100%;height:100%;overflow:hidden;border:0;background:var(--bg-color)}.code-panel{position:relative;grid-area:code;display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--border-color);background:#0b0b0f}.code-resize-handle{position:absolute;top:0;right:-.35rem;bottom:0;z-index:5;width:.7rem;padding:0;border:0;background:transparent;cursor:col-resize}.code-resize-handle:after{position:absolute;top:0;right:.32rem;bottom:0;width:1px;background:var(--border-color);content:"";transition:background-color .15s,box-shadow .15s}.code-resize-handle:hover:after,.code-resize-handle:focus-visible:after{background:var(--accent-strong-color);box-shadow:0 0 0 1px var(--accent-strong-color)}.code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem;padding:.5rem .75rem;border-bottom:1px solid var(--border-color);background:var(--panel-color)}.code-status{min-width:0;overflow:hidden;color:var(--text-muted);font-size:.68rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.code-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.code-actions .preview-action:disabled{cursor:not-allowed;opacity:.45}.code-editor-shell{min-height:0;overflow:hidden}.code-editor-shell .cm-editor{height:100%;background:#0b0b0f;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.76rem}.code-editor-shell .cm-scroller{font-family:inherit}.code-error{padding:1rem;color:var(--danger-color);font-size:.78rem;line-height:1.5}.code-loading{display:grid;place-items:center;min-height:100%;padding:1rem;color:var(--text-muted);font-size:.78rem}}@layer responsive{@media(max-width:980px){.examples-page{height:auto;min-height:100dvh}.examples-header-primary,.examples-footer{align-items:stretch;flex-direction:column}.examples-header-controls{align-items:stretch;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-start;width:100%}.examples-search{order:1;flex:1 1 auto;width:100%}.examples-header-links{order:2;flex-wrap:wrap;justify-content:flex-start}.examples-browser{grid-template-columns:1fr;grid-template-rows:minmax(24rem,62dvh) auto}.preview-workspace[data-code-visible=true]{grid-template-areas:"preview" "code";grid-template-columns:1fr;grid-template-rows:minmax(18rem,1fr) minmax(18rem,44dvh)}.code-panel{border-top:1px solid var(--border-color);border-right:0}.code-resize-handle{display:none}.examples-list-panel{max-height:none}.examples-footer-links{justify-content:flex-start;text-align:left}}@media(max-width:560px){.examples-page{width:min(100% - 1rem,1440px);gap:.75rem;padding:.5rem 0}.landing-grid{grid-template-columns:1fr}.preview-toolbar{align-items:stretch;flex-direction:column;min-height:0}.preview-actions{flex-wrap:wrap}.preview-action{flex:1 1 auto}.code-toolbar{align-items:stretch;flex-direction:column}.code-actions{width:100%}.examples-header-link{flex:1 1 auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}