@keyframes astroFadeInOut{0%{opacity:1}to{opacity:0}}@keyframes astroFadeIn{0%{opacity:0;mix-blend-mode:plus-lighter}to{opacity:1;mix-blend-mode:plus-lighter}}@keyframes astroFadeOut{0%{opacity:1;mix-blend-mode:plus-lighter}to{opacity:0;mix-blend-mode:plus-lighter}}@keyframes astroSlideFromRight{0%{transform:translate(100%)}}@keyframes astroSlideFromLeft{0%{transform:translate(-100%)}}@keyframes astroSlideToRight{to{transform:translate(100%)}}@keyframes astroSlideToLeft{to{transform:translate(-100%)}}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*),[data-astro-transition-scope]{animation:none!important}}.astro-route-announcer{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;top:0;left:0;overflow:hidden}:root{--font-display:"Bricolage Grotesque", sans-serif;--font-ui:"IBM Plex Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--bg-page:#fff;--surface:#fff;--ink:#17181c;--ink-2:#2a2c33;--text-strong-muted:#44464e;--text-muted:#5e6068;--text-subtle:#6a6c74;--text-on-dark-muted:#c9cbd3;--border:#e2e8f0;--border-control:#e2e8f0;--border-hover:#94a3b8;--border-card-hover:#cbd5e1;--hairline:#f1f5f9;--fill-subtle:#f1f5f9;--fill-toggle:#f1f5f9;--card-stage:#fff;--switch-off:#cbd5e1;--accent:#2f4bd8;--accent-hover:#1f35a8;--ind-text:#1f35a8;--ind-bg:#e8ecfb;--prod-text:#0b5a3c;--prod-bg:#e2f4ea;--warn-text:#6b4e00;--warn-bg:#fff1c7;--note-bg:#fff7dd;--note-border:#f2df9e;--code-bg:#17181c;--code-divider:#2e3038;--code-label:#b8bac2;--code-text:#e8e9ee;--code-btn-bg:#2a2c33;--code-btn-border:#3a3c44;--stage-white:#fff;--stage-shade:#f3f3f3;--stage-shade-dot:#dadada;--stage-dark:#16181d;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-vtab:9px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:14px;--radius-3xl:16px;--radius-pill:999px;--text-11:11px;--text-12:12px;--text-13:13px;--text-14:14px;--text-15:15px;--text-16:16px;--text-20:20px;--text-22:22px;--text-30:30px;--text-32:32px;--text-34:34px;--tracking-h1:-.02em;--tracking-display:-.01em;--tracking-caps:.06em;--tracking-caps-wide:.08em;--shadow-seg:0 1px 2px #0000001f;--shadow-toggle:0 1px 3px #0000001a, 0 0 0 1px #00000008;--shadow-card-hover:0 6px 18px #17181c14;--shadow-host:0 8px 28px #17181c1a;--ring-active:0 0 0 1px var(--border);--transition-fast:.15s;--header-h:56px;--nav-w-examples:300px;--nav-w-components:256px;--nav-w-tutorials:300px;--aside-w:336px;--focus-ring:2px solid var(--accent);--focus-on-dark:#a5b4fc}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg-page);color:var(--ink);font-family:var(--font-ui);font-size:var(--text-14);margin:0;line-height:1.4}a{color:var(--accent)}a:hover{color:var(--accent-hover)}button,input,select,textarea{font-family:inherit}button{font-size:inherit}h1,h2,h3,p{margin:0}:focus-visible{outline:var(--focus-ring);outline-offset:2px}.mono{font-family:var(--font-mono)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip-link{z-index:100;border-radius:var(--radius-md);background:var(--ink);color:var(--surface);font-size:var(--text-13);padding:8px 14px;font-weight:500;text-decoration:none;position:absolute;top:-48px;left:12px}.skip-link:focus{color:var(--surface);top:12px}[hidden]{display:none!important}.btn-ghost{border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);min-height:34px;color:var(--ink-2);font-size:var(--text-13);cursor:pointer;align-items:center;gap:6px;padding:6px 12px;text-decoration:none;display:inline-flex}.btn-ghost:hover{border-color:var(--border-hover);color:var(--ink-2)}.btn-ghost:disabled,.btn-ghost[aria-disabled=true]{opacity:.45;cursor:default;pointer-events:none}.btn-ghost:disabled:hover{border-color:var(--border-control)}.btn-dark{border-radius:var(--radius-md);background:var(--ink);min-height:36px;color:var(--surface);font-size:var(--text-13);white-space:nowrap;cursor:pointer;border:0;align-items:center;gap:6px;padding:8px 14px;font-weight:500;text-decoration:none;display:inline-flex}.btn-dark:hover{background:var(--ink-2);color:var(--surface)}.appexchange{min-height:30px;padding:5px 12px}.back-link{border-radius:var(--radius-md);min-height:36px;color:var(--accent);font-size:var(--text-13);cursor:pointer;background:0 0;border:0;align-self:flex-start;align-items:center;gap:6px;padding:8px 10px;font-weight:500;text-decoration:none;display:inline-flex}.back-link:hover{background:var(--fill-subtle);color:var(--accent)}.crumb-link{color:var(--accent);font-size:var(--text-13);cursor:pointer;background:0 0;border:0;padding:0;text-decoration:none}.crumb-link:hover{color:var(--accent);text-decoration:underline}.pill{border:1px solid var(--border-control);border-radius:var(--radius-pill);background:var(--surface);min-height:34px;color:var(--ink-2);font-size:var(--text-13);cursor:pointer;align-items:center;padding:6px 14px;text-decoration:none;display:inline-flex}.pill:hover{border-color:var(--border-hover);color:var(--ink-2)}.pill.is-active,.pill[aria-pressed=true],.pill[aria-current=page]{border-color:var(--accent);background:var(--accent);color:var(--surface)}.badge-edited{border-radius:var(--radius-pill);background:var(--warn-bg);color:var(--warn-text);font-size:var(--text-12);align-items:center;padding:4px 10px;display:inline-flex}.seg{border-radius:var(--radius-md);background:var(--fill-subtle);flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.seg-btn{border-radius:var(--radius-sm);min-height:28px;color:var(--text-strong-muted);font-size:var(--text-12);cursor:pointer;background:0 0;border:0;padding:5px 10px}.seg-btn.is-active,.seg-btn[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-seg);font-weight:500}.seg-lg .seg-btn{font-size:var(--text-13);padding:6px 12px}.seg-block{display:flex}.seg-block .seg-btn{flex-grow:1}.tabs{align-items:flex-end;display:flex}.tab{color:var(--text-muted);font-size:var(--text-14);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-right:22px;padding:10px 2px}.tab:hover{color:var(--ink)}.tab.is-active,.tab[aria-selected=true]{border-bottom-color:var(--ink);color:var(--ink);font-weight:500}.vtabs{border-radius:var(--radius-lg);background:var(--fill-toggle);gap:2px;padding:3px;display:inline-flex}.vtab{border-radius:var(--radius-md);min-height:28px;color:var(--text-muted);font-size:var(--text-14);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:4px 12px;font-weight:500;text-decoration:none;display:inline-flex}.vtab:hover{color:var(--ink)}.vtab.is-active,.vtab[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-toggle)}.plat{border-radius:var(--radius-lg);background:var(--fill-toggle);gap:2px;padding:3px;display:inline-flex}.plat-btn{border-radius:var(--radius-md);min-height:32px;color:var(--text-muted);font-size:var(--text-13);white-space:nowrap;cursor:pointer;background:0 0;border:0;padding:7px 12px;font-weight:500}.plat-btn:hover{color:var(--ink)}.plat-btn.is-active,.plat-btn[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-toggle)}.plat-btn:disabled{opacity:.45;cursor:not-allowed}.plat-btn:disabled:hover{color:var(--text-muted)}.input{border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);width:100%;height:34px;color:var(--ink);font-size:var(--text-13);padding:0 10px}.input:focus{outline:var(--focus-ring);outline-offset:0;border-color:var(--accent)}textarea.input{resize:vertical;height:auto;min-height:72px;padding:8px 10px;line-height:1.45}.search{position:relative}.search-icon{pointer-events:none;position:absolute;top:10px;left:10px}.search .input{padding-left:30px}.search .input::-webkit-search-decoration{-webkit-appearance:none}.switch{width:40px;height:22px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0;position:absolute}.track{border-radius:var(--radius-pill);background:var(--switch-off);transition:background var(--transition-fast);cursor:pointer;position:absolute;inset:0}.track:after{content:"";background:var(--surface);width:16px;height:16px;transition:transform var(--transition-fast);border-radius:50%;position:absolute;top:3px;left:3px}.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track:after{transform:translate(18px)}.switch input:focus-visible+.track{outline:var(--focus-ring);outline-offset:2px}.range-row{align-items:center;gap:10px;display:flex}.range-row input{accent-color:var(--accent);flex-grow:1}.range-val{min-width:28px;font-size:var(--text-12);text-align:right}.field{border-bottom:1px solid var(--hairline);flex-direction:column;gap:6px;padding:12px 0;display:flex}.field-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.field-label{color:var(--ink);font-size:var(--text-13);font-weight:600}.field-attr{color:var(--text-subtle);font-size:var(--text-11)}.field-desc{color:var(--text-muted);font-size:var(--text-12);line-height:1.4}.group-title{color:var(--text-subtle);font-size:var(--text-11);letter-spacing:var(--tracking-caps-wide);text-transform:uppercase;padding:14px 10px 4px;font-weight:600}.nav-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.nav-item{border-radius:var(--radius-md);width:100%;min-height:36px;color:var(--ink-2);font-size:var(--text-14);text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;text-decoration:none;display:flex}.nav-item:hover{background:var(--fill-subtle);color:var(--ink-2)}.nav-item.is-active,.nav-item[aria-current=page]{background:var(--ink);color:var(--surface)}.nav-count{color:var(--text-subtle);font-size:var(--text-12)}.nav-item:hover .nav-count,.nav-item:hover .ex-nav-sub{color:var(--text-muted)}.nav-item.is-active .nav-count,.nav-item[aria-current=page] .nav-count{color:var(--text-on-dark-muted)}.ex-nav-item{flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;padding:7px 10px}.ex-nav-sub{color:var(--text-subtle);font-size:var(--text-11)}.ex-nav-item[aria-current=page] .ex-nav-sub{color:var(--text-on-dark-muted)}.nav-empty{color:var(--text-muted);font-size:var(--text-13);padding:8px 10px}.tagchip{border-radius:var(--radius-sm);background:var(--fill-subtle);color:var(--text-strong-muted);font-size:var(--text-11);padding:2px 6px}.tagchip-lg{font-size:var(--text-12);padding:3px 8px}.dc-chip{border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--surface);max-width:100%;font-size:var(--text-12);align-items:stretch;line-height:1.4;display:inline-flex;overflow:hidden}.dc-chip-label{color:var(--text-strong-muted);white-space:nowrap;padding:2px 7px}.dc-chip-element{border-left:1px solid var(--border-control);background:var(--fill-subtle);color:var(--ink-2);overflow-wrap:anywhere;padding:2px 7px}.ind-chip,.prod-chip{border-radius:var(--radius-pill);font-size:var(--text-11);white-space:nowrap;padding:2px 8px}.ind-chip{background:var(--ind-bg);color:var(--ind-text)}.prod-chip{background:var(--prod-bg);color:var(--prod-text)}.chip-lg{font-size:var(--text-12)}.cfg-chip{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2);font-size:var(--text-12);overflow-wrap:anywhere;padding:3px 8px}.sec-head{align-items:baseline;gap:10px;padding:22px 0 12px;display:flex}.sec-title{color:var(--ink);font-family:var(--font-display);font-size:var(--text-20);letter-spacing:var(--tracking-display);font-weight:700}.sec-count{color:var(--text-subtle);font-size:var(--text-13)}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid}.card{border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--surface);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex;position:relative;overflow:hidden}.card:hover{border-color:var(--border-card-hover);box-shadow:var(--shadow-card-hover)}.card:focus-within{outline:var(--focus-ring);outline-offset:2px}.card-stage{border-bottom:1px solid var(--hairline);background:var(--card-stage);pointer-events:none;justify-content:center;align-items:center;height:200px;display:flex;overflow:hidden}.card-stage img{object-fit:cover;width:100%;height:100%;display:block}.card-body{flex-direction:column;gap:6px;padding:14px 16px 16px;display:flex}.card-title{color:var(--ink);font-size:var(--text-15);font-weight:600}.card-link{color:inherit;text-decoration:none}.card-link:hover{color:inherit}.card-link:after{content:"";border-radius:var(--radius-2xl);position:absolute;inset:0}.card-link:focus-visible{outline:none}.card-meta{color:var(--text-muted);font-size:var(--text-12);flex-wrap:wrap;align-items:center;gap:8px;display:flex}.card-components{color:var(--text-muted);font-size:var(--text-12);line-height:1.45}.thumb-placeholder{background-color:var(--card-stage);background-image:radial-gradient(var(--border) 1px, transparent 1px);background-size:16px 16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;display:flex}.thumb-name{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);font-family:var(--font-display);font-size:var(--text-20);letter-spacing:var(--tracking-display);padding:10px 18px;font-weight:700;box-shadow:0 1px 2px #17181c0d}.thumb-platforms{flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0 16px;list-style:none;display:flex}.thumb-platforms li{border-radius:var(--radius-pill);background:var(--fill-subtle);color:var(--text-strong-muted);font-size:var(--text-11);padding:2px 8px}.empty{color:var(--text-muted);font-size:var(--text-14)}.stage{border:1px solid var(--border);border-radius:var(--radius-2xl);flex-grow:1;justify-content:center;align-items:center;min-height:320px;display:flex;position:relative;overflow:hidden}.stage.bg-white{background:var(--stage-white)}.stage.bg-shade{background-color:var(--stage-shade);background-image:radial-gradient(var(--stage-shade-dot) 1px, transparent 1px);background-size:16px 16px}.stage.bg-dark{background:var(--stage-dark)}.stage-tools{z-index:3;position:absolute;top:12px;right:12px}.plat-note{border:1px solid var(--note-border);border-radius:var(--radius-lg);background:var(--note-bg);color:var(--warn-text);font-size:var(--text-13);align-items:flex-start;gap:8px;margin-top:10px;padding:9px 12px;line-height:1.45;display:flex}.plat-note svg{flex-shrink:0;margin-top:1px}.code-panel{border-radius:var(--radius-2xl);background:var(--code-bg);flex-direction:column;flex-grow:1;min-height:0;display:flex;overflow:hidden}.code-head{border-bottom:1px solid var(--code-divider);justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.code-label{color:var(--code-label);font-size:var(--text-12)}.code-copy{border-color:var(--code-btn-border);background:var(--code-btn-bg);color:var(--surface)}.code-copy:hover{color:var(--surface)}.code-body{color:var(--code-text);font-family:var(--font-mono);font-size:var(--text-14);white-space:pre-wrap;flex-grow:1;margin:0;padding:18px 20px;line-height:1.7;overflow:auto}.tut-item{border-radius:var(--radius-lg);text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;gap:3px;width:100%;padding:10px 12px;text-decoration:none;display:flex}.tut-item:hover{background:var(--fill-subtle)}.tut-item.is-active,.tut-item[aria-current=page]{background:var(--surface);box-shadow:var(--ring-active)}.tut-title{color:var(--ink);font-size:var(--text-14);font-weight:500}.tut-surface{color:var(--text-muted);font-size:var(--text-12)}.app{background:var(--bg-page);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.site-header{height:var(--header-h);border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;align-items:center;gap:20px;padding:0 16px;display:flex}.wordmark{color:var(--ink);white-space:nowrap;align-items:center;gap:8px;text-decoration:none;display:inline-flex}.wordmark:hover{color:var(--ink)}.wordmark-logo{flex-shrink:0}.wordmark-text{align-items:baseline;gap:6px;display:inline-flex}.wordmark-brand{font-family:var(--font-display);font-size:var(--text-16);letter-spacing:var(--tracking-display);font-weight:700}.wordmark-product{color:var(--text-strong-muted);font-size:var(--text-16);font-weight:500}.header-spacer{flex-grow:1}.view{flex-direction:column;flex-grow:1;min-height:0;display:flex}#content:focus{outline:none}.side-nav{border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:6px;min-height:0;padding:16px 12px;display:flex;overflow-y:auto}.side-nav-head{flex-direction:column;flex-shrink:0;gap:6px;display:flex}.side-nav-scroll{background:linear-gradient(var(--bg-page) 40%, transparent) top / 100% 20px no-repeat local, radial-gradient(farthest-side at 50% 0, #17181c1f, transparent) top / 100% 8px no-repeat scroll;flex:auto;min-height:0;margin:0 -12px;padding:0 12px 4px;scroll-padding-block:8px;overflow-y:auto}.detail .side-nav-scroll{margin-bottom:-16px;padding-bottom:16px}.gallery{flex-direction:column;flex-grow:1;min-height:0;padding:28px 32px 0;display:flex}.gallery-head{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.gallery-intro{flex-direction:column;gap:6px;display:flex}.page-title{color:var(--ink);font-family:var(--font-display);font-size:var(--text-32);letter-spacing:var(--tracking-h1);font-weight:700;line-height:1.15}.page-subtitle{color:var(--text-muted);font-size:var(--text-15)}.gallery-search{flex-shrink:0;width:280px}.gallery-toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;display:flex}.gallery-toolbar>.seg{flex-wrap:nowrap;flex-shrink:0}.toolbar-divider{background:var(--border-control);flex-shrink:0;width:1px;height:24px}.filter-row{flex:240px;align-items:center;gap:6px;min-width:0;display:flex}.filter-pills{scrollbar-width:none;flex:auto;gap:8px;min-width:0;margin:-4px;padding:4px;scroll-padding-inline:40px;display:flex;position:relative;overflow-x:auto}.filter-pills::-webkit-scrollbar{display:none}.filter-pills .pill{white-space:nowrap;flex-shrink:0}.filter-row.has-start .filter-pills{mask-image:linear-gradient(90deg,#0000,#000 36px)}.filter-row.has-end .filter-pills{mask-image:linear-gradient(270deg,#0000,#000 36px)}.filter-row.has-start.has-end .filter-pills{mask-image:linear-gradient(90deg,#0000,#000 36px calc(100% - 36px),#0000)}.filter-scroll{border:1px solid var(--border-control);background:var(--surface);width:30px;height:30px;color:var(--ink-2);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.filter-scroll:hover{border-color:var(--border-hover)}.filter-scroll:disabled{opacity:.35;cursor:default}.filter-scroll:disabled:hover{border-color:var(--border-control)}@media (pointer:coarse){.filter-scroll{display:none}}.gallery-scroll{flex-grow:1;min-height:0;margin-top:8px;padding-bottom:32px;overflow-y:auto}.gallery-scroll .empty{padding-top:22px}.detail{flex-grow:1;min-height:0;display:flex}.detail .side-nav{width:var(--nav-w-examples)}.ex-search{margin-top:4px}.ex-group{margin-top:6px}.detail-main{flex-direction:column;flex-grow:1;min-width:0;min-height:0;padding:22px 32px 24px;display:flex;overflow-y:auto}.crumbs{min-height:18px;color:var(--text-subtle);font-size:var(--text-13);align-items:center;gap:6px;display:flex}.title-row{justify-content:space-between;align-items:flex-start;gap:24px;margin-top:8px;display:flex}.title-block{flex-direction:column;gap:6px;min-width:0;display:flex}.title-line{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.view-title{color:var(--ink);font-family:var(--font-display);font-size:var(--text-30);letter-spacing:var(--tracking-h1);font-weight:700;line-height:1.15}.lede{max-width:640px;color:var(--text-strong-muted);font-size:var(--text-15);line-height:1.5}.pager{flex-shrink:0;align-items:center;gap:8px;display:flex}.pager .btn-ghost{justify-content:center;min-width:34px;padding:6px 9px}.pager-pos{min-width:48px;color:var(--text-subtle);font-size:var(--text-12);text-align:center}.toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:18px;display:flex}.toolbar-end{flex-wrap:wrap;gap:8px;margin-bottom:6px;display:flex}.panel{flex-direction:column;flex:1 1 0;min-height:0;display:flex}.panel-code{overflow-y:auto}.panel-preview .stage{flex:1 1 0;justify-content:flex-start;align-items:stretch;overflow:hidden auto}.panel-preview,.panel-code{margin-top:16px}.config-row{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;margin-top:14px;display:flex}.config-label{color:var(--text-strong-muted);font-size:var(--text-12);margin-right:4px;font-weight:600}.config-empty{color:var(--text-subtle);font-size:var(--text-12)}.workbench{flex-grow:1;min-height:0;display:flex}.workbench .side-nav{width:var(--nav-w-components)}.nav-groups{flex-direction:column;display:flex}.side-nav,.side-nav-scroll,.gallery-scroll,.detail-main,.workbench-main,.props-aside,.tutorial-main{position:relative}.persist-contents{display:contents}.workbench-main{flex-direction:column;flex-grow:1;min-width:0;min-height:0;padding:20px 24px;display:flex;overflow-y:auto}.component-head{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.component-head .title-block{gap:4px}.component-desc{max-width:720px;color:var(--text-muted);font-size:var(--text-14);line-height:1.45}.examples-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;display:flex}.examples-label{color:var(--text-subtle);font-size:var(--text-12);margin-right:4px}.used-in-row .pill{max-width:200px}.pill-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.pill-toggle{color:var(--text-muted);border-style:dashed;font-family:inherit}.workbench .toolbar{margin-top:14px}.props-aside{width:var(--aside-w);border-left:1px solid var(--border);background:var(--surface);flex-direction:column;flex-shrink:0;min-height:0;scroll-padding-top:72px;display:flex;overflow-y:auto}.tutorials{flex-grow:1;min-height:0;display:flex}.tutorials .side-nav{width:var(--nav-w-tutorials);gap:4px;padding:24px 16px}.tutorials .side-nav .group-title{padding:0 12px 10px}.tutorial-main{flex-grow:1;min-width:0;min-height:0;padding:36px 56px 48px;overflow-y:auto}.tutorial{flex-direction:column;gap:14px;max-width:760px;display:flex}.kicker{color:var(--accent);font-size:var(--text-12);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:600}.tutorial-title{color:var(--ink);font-family:var(--font-display);font-size:var(--text-34);letter-spacing:var(--tracking-h1);font-weight:700;line-height:1.15}.tutorial-intro,.tutorial-body p{color:var(--text-strong-muted);font-size:var(--text-16);line-height:1.55}.tutorial-body{flex-direction:column;gap:14px;display:flex}.tutorial-body h2,.tutorial-body h3{color:var(--ink);font-family:var(--font-display);letter-spacing:var(--tracking-display);margin-top:10px;font-weight:700}.tutorial-body h2{font-size:var(--text-20)}.tutorial-body h3{font-size:var(--text-16)}.tutorial-body ol{border-top:1px solid var(--hairline);counter-reset:step;margin:10px 0 0;padding:0;list-style:none}.tutorial-body ol>li{border-bottom:1px solid var(--hairline);min-height:56px;color:var(--ink-2);font-size:var(--text-15);counter-increment:step;padding:17px 0 14px 46px;line-height:1.55;position:relative}.tutorial-body ol>li:before{content:counter(step);background:var(--ink);width:28px;height:28px;color:var(--surface);font-size:var(--text-13);border-radius:50%;justify-content:center;align-items:center;font-weight:600;display:flex;position:absolute;top:14px;left:0}.tutorial-body ol>li>:first-child{margin-top:0}.tutorial-body ol>li>*+*{margin-top:10px}.tutorial-body ol>li p{font-size:var(--text-15);color:var(--ink-2)}.tutorial-body ul{color:var(--text-strong-muted);font-size:var(--text-15);margin:0;padding-left:20px;line-height:1.55}.tutorial-body :not(pre)>code{border-radius:var(--radius-xs);background:var(--fill-subtle);color:var(--ink-2);font-family:var(--font-mono);padding:1px 5px;font-size:.9em}.tutorial-body pre{border-radius:var(--radius-xl);background:var(--code-bg);color:var(--code-text);font-family:var(--font-mono);font-size:var(--text-13);white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0;padding:18px 20px;line-height:1.7;overflow-x:auto}.tutorial-body pre code{font-family:inherit}.try-card{border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--surface);justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:18px 20px;display:flex}.try-text{flex-direction:column;gap:2px;display:flex}.try-title{color:var(--ink);font-size:var(--text-14);font-weight:600}.try-sub{color:var(--text-muted);font-size:var(--text-13)}.message-view{flex-direction:column;align-items:flex-start;gap:12px;max-width:640px;padding:56px 32px;display:flex}@media (width<=1200px){:root{--nav-w-examples:264px;--nav-w-components:224px;--nav-w-tutorials:264px;--aside-w:304px}.detail-main{padding:20px 24px 24px}.tutorial-main{padding:32px 40px 48px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=1100px){.site-header{gap:12px;padding:0 12px}.vtab{padding:4px 10px}.plat-btn{padding-inline:8px}}@media (width<=1023px){.gallery{padding:24px 24px 0}.gallery-head{flex-direction:column;align-items:stretch}.gallery-search{width:100%;max-width:420px}}@media (width<=767px){.app{height:auto;min-height:100vh;overflow:visible}.site-header{flex-wrap:wrap;gap:8px 12px;height:auto;padding:10px 16px}.header-spacer{display:none}.appexchange{margin-left:auto}.site-sections{order:3;width:100%}.site-sections .vtab{flex-grow:1;justify-content:center;min-height:38px;padding:8px 10px}.detail,.workbench,.tutorials{flex-direction:column}.side-nav,.detail .side-nav,.workbench .side-nav,.tutorials .side-nav{border-right:0;border-bottom:1px solid var(--border);width:100%;max-height:320px}.detail .side-nav{max-height:400px}.props-aside{border-top:1px solid var(--border);border-left:0;width:100%}.gallery,.detail-main,.workbench-main,.tutorial-main{padding:20px 16px 24px;overflow:visible}.gallery-scroll{overflow:visible}.panel{flex:1 0 auto}.panel-code{overflow:visible}.panel-preview .stage{flex:1 0 auto;overflow:hidden}.title-row,.component-head{flex-direction:column;align-items:stretch}.card-grid{grid-template-columns:minmax(0,1fr)}.page-title{font-size:26px}.view-title{font-size:24px}.tutorial-title{font-size:28px}.try-card{flex-direction:column;align-items:stretch}.toolbar-end{width:100%}.stage{min-height:260px}}.config-list,.pill-list{margin:0;padding:0;list-style:none;display:contents}.not-found-links{flex-wrap:wrap;gap:10px;margin-top:8px;display:flex}@media (width<=767px){.toolbar-divider{display:none}}@media (width<=480px){.site-header{column-gap:6px;padding-inline:12px}.appexchange{padding-inline:10px}.site-sections .vtab{font-size:var(--text-13);padding:8px 6px}.site-sections .vtab svg{display:none}}