html,body{height:100%;margin:0}body{font-family:var(--tb-font);font-size:var(--tb-text-md);line-height:var(--tb-leading);color:var(--tb-fg);background:var(--tb-bg-canvas)}#app{min-height:100vh;display:flex}.doc-nav{top:var(--tb-space-4);width:248px;height:calc(100vh - var(--tb-space-4) * 2);margin:var(--tb-space-4) 0 var(--tb-space-4) var(--tb-space-4);box-sizing:border-box;border-radius:var(--tb-radius-lg);box-shadow:var(--tb-shadow-md);flex:0 0 248px;align-self:flex-start;position:sticky;overflow:hidden}.doc-brand{min-height:var(--tb-space-12);font-weight:var(--tb-weight-semibold);font-size:var(--tb-text-lg);flex:none}.doc-version{font-size:var(--tb-text-xs);color:var(--tb-fg-muted);font-weight:var(--tb-weight-regular);margin-left:auto}.doc-nav-scroll{--_fade-top:0px;--_fade-bottom:0px;overscroll-behavior:contain;min-height:0;padding:var(--tb-space-2) var(--tb-space-2) var(--tb-space-4);scrollbar-width:thin;scrollbar-color:var(--tb-border-strong) transparent;-webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--_fade-top), #000 calc(100% - var(--_fade-bottom)), transparent);-webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--_fade-top), #000 calc(100% - var(--_fade-bottom)), transparent);mask-image:linear-gradient(to bottom, transparent, #000 var(--_fade-top), #000 calc(100% - var(--_fade-bottom)), transparent);flex:1;position:relative;overflow-y:auto}.doc-nav-scroll::-webkit-scrollbar{width:8px}.doc-nav-scroll::-webkit-scrollbar-track{background:0 0}.doc-nav-scroll::-webkit-scrollbar-thumb{background:var(--tb-border-strong);border-radius:var(--tb-radius-full);background-clip:padding-box;border:2px solid #0000}.doc-nav-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--tb-fg-subtle)}.doc-nav-scroll.can-up{--_fade-top:var(--tb-space-8)}.doc-nav-scroll.can-down{--_fade-bottom:var(--tb-space-8)}.doc-nav-group{margin-bottom:var(--tb-space-3)}.doc-nav-title{font-size:var(--tb-text-sm);color:var(--tb-fg-muted);font-weight:var(--tb-weight-medium);padding:var(--tb-space-2)}.doc-nav-link{padding:5px var(--tb-space-2) 5px var(--tb-space-3);color:var(--tb-fg);border-radius:var(--tb-radius-sm);text-decoration:none;display:block;position:relative}.doc-nav-link:hover{background:var(--tb-bg-hover)}.doc-nav-link.is-active{background:var(--tb-bg-selected);color:var(--tb-fg-link);font-weight:var(--tb-weight-medium)}.doc-nav-link.is-active:before{content:"";top:var(--tb-space-1);bottom:var(--tb-space-1);background:var(--tb-accent);border-radius:var(--tb-radius-full);width:2px;position:absolute;left:0}.doc-nav-foot{flex:none;justify-content:flex-start}.doc-top{right:var(--tb-space-6);bottom:var(--tb-space-6);z-index:var(--tb-z-dropdown);background:var(--tb-bg-raised);box-shadow:var(--tb-shadow-md);opacity:0;transform:translateY(var(--tb-space-2));pointer-events:none;transition:opacity var(--tb-duration) var(--tb-ease), transform var(--tb-duration) var(--tb-ease), background-color var(--tb-duration-fast) var(--tb-ease), border-color var(--tb-duration-fast) var(--tb-ease);position:fixed}.doc-top.is-visible{opacity:1;pointer-events:auto;transform:none}@media (prefers-reduced-motion:reduce){.doc-top{transition:none}}.doc-main{min-width:0;padding:var(--tb-space-10) var(--tb-space-12) var(--tb-space-12);flex:1;max-width:1040px}.doc-hero-band{align-items:center;gap:var(--tb-space-10);padding:var(--tb-space-10) var(--tb-space-10);background:var(--tb-bg-surface);border:var(--tb-border-width) solid var(--tb-border);border-radius:var(--tb-radius-lg);grid-template-columns:auto minmax(0,1fr);display:grid;position:relative;overflow:hidden}.doc-hero-band:before{content:"";background-image:var(--tb-brand-pattern);opacity:calc(var(--tb-brand-pattern-opacity) * 1.4);pointer-events:none;background-position:100%;background-size:160px 160px;position:absolute;inset:0 0 0 45%;-webkit-mask-image:linear-gradient(90deg,#0000,#000 70%);mask-image:linear-gradient(90deg,#0000,#000 70%)}.doc-hero-band>*{position:relative}.doc-hero-marks{align-items:center;gap:var(--tb-space-8);display:flex}.doc-hero-mark{--_size:120px;width:120px;height:120px;margin:0 var(--tb-space-6)}.doc-hero-band:hover .doc-hero-mark{--_split:var(--_open)}.doc-hero-text{min-width:0}.doc-hero h1{margin:var(--tb-space-2) 0 var(--tb-space-4);font-size:56px;line-height:1.05;font-weight:var(--tb-weight-semibold);letter-spacing:-.02em}.doc-hero-lead{font-size:var(--tb-text-lg);color:var(--tb-fg-muted);max-width:560px;margin:0}.doc-hero-by{margin:var(--tb-space-4) 0 0;font-size:var(--tb-text-md);color:var(--tb-fg)}.doc-hero-by a{font-weight:var(--tb-weight-semibold)}.doc-hero-actions{gap:var(--tb-space-2);margin-top:var(--tb-space-6);flex-wrap:wrap;display:flex}.doc-hero-actions a{text-decoration:none}.doc-hero-cards{gap:var(--tb-space-3);margin-top:var(--tb-space-3);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.doc-hero-card{align-items:baseline;column-gap:var(--tb-space-2);row-gap:var(--tb-space-1);padding:var(--tb-space-4);color:var(--tb-fg);grid-template-columns:auto minmax(0,1fr);text-decoration:none;display:grid}.doc-hero-card:hover{text-decoration:none}.doc-hero-card-n{font-size:var(--tb-text-2xl);font-weight:var(--tb-weight-semibold);font-variant-numeric:tabular-nums}.doc-hero-card-unit{font-size:var(--tb-text-sm);color:var(--tb-fg-muted)}.doc-hero-card strong,.doc-hero-card-text{grid-column:1/-1}.doc-hero-card-text{font-size:var(--tb-text-sm);color:var(--tb-fg-muted)}@media (width<=1100px){.doc-hero-band{gap:var(--tb-space-6);padding:var(--tb-space-6);grid-template-columns:minmax(0,1fr)}.doc-hero-mark{--_size:72px;width:72px;height:72px}.doc-hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}.doc-section{margin-top:var(--tb-space-12);scroll-margin-top:var(--tb-space-8)}.doc-section-head{margin-bottom:var(--tb-space-5)}.doc-kicker{font-size:var(--tb-text-sm);color:var(--tb-fg-muted);font-weight:var(--tb-weight-medium)}.doc-section h2{font-size:var(--tb-text-2xl);margin:var(--tb-space-1) 0 var(--tb-space-2);font-weight:var(--tb-weight-semibold)}.doc-section h3{font-size:var(--tb-text-lg);margin:var(--tb-space-6) 0 var(--tb-space-2);font-weight:var(--tb-weight-semibold)}.doc-lead{color:var(--tb-fg-muted);max-width:640px;font-size:var(--tb-text-md);margin:0}.doc-section p{max-width:680px}.doc-example{border:var(--tb-border-width) solid var(--tb-border);border-radius:var(--tb-radius-md);background:var(--tb-bg-surface);margin:var(--tb-space-3) 0 var(--tb-space-5)}.doc-example-stage{padding:var(--tb-space-5);gap:var(--tb-space-3);flex-wrap:wrap;align-items:center;display:flex}.doc-example-stage.is-block{display:block}.doc-example-stage.is-canvas{background:var(--tb-bg-canvas)}.doc-motion{gap:var(--tb-space-3) var(--tb-space-4);grid-template-columns:auto 1fr;align-items:center;display:grid}.doc-motion-track{height:var(--tb-space-4);border-bottom:var(--tb-border-width) solid var(--tb-border);position:relative}.doc-motion-dot{width:var(--tb-space-4);height:var(--tb-space-4);background:var(--tb-accent);border-radius:var(--tb-radius-sm);transition:left var(--_d) var(--tb-ease);position:absolute;top:0;left:0}.doc-example-stage:is(:hover,:focus-visible) .doc-motion-dot{left:calc(100% - var(--tb-space-4))}@media (prefers-reduced-motion:reduce){.doc-motion-dot{transition:none}}.doc-example-code{border-top:var(--tb-border-width) solid var(--tb-border);background:var(--tb-bg-sunken);padding:var(--tb-space-3) var(--tb-space-4);font-family:var(--tb-font-mono);font-size:var(--tb-text-sm);white-space:pre;color:var(--tb-fg-muted);margin:0;overflow:auto}.doc-table{border-collapse:collapse;width:100%;font-size:var(--tb-text-sm);margin:var(--tb-space-3) 0 var(--tb-space-5)}.doc-table th,.doc-table td{text-align:left;padding:var(--tb-space-2) var(--tb-space-3);border-bottom:var(--tb-border-width) solid var(--tb-border);vertical-align:top}.doc-table th{font-size:var(--tb-text-sm);color:var(--tb-fg-muted);font-weight:var(--tb-weight-medium)}.doc-table code{font-family:var(--tb-font-mono);font-size:var(--tb-text-sm)}.doc-swatch{border-radius:var(--tb-radius-sm);border:var(--tb-border-width) solid var(--tb-border);vertical-align:middle;width:28px;height:20px;margin-right:var(--tb-space-2);display:inline-block}.doc-swatches{gap:var(--tb-space-3);margin:var(--tb-space-3) 0 var(--tb-space-5);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.doc-swatch-card{border:var(--tb-border-width) solid var(--tb-border);border-radius:var(--tb-radius-md);background:var(--tb-bg-surface);overflow:hidden}.doc-swatch-card .chip{height:56px}.doc-swatch-card .meta{padding:var(--tb-space-2) var(--tb-space-3);font-size:var(--tb-text-xs)}.doc-swatch-card .meta strong{font-family:var(--tb-font-mono);font-weight:var(--tb-weight-medium);font-size:var(--tb-text-xs);display:block}.doc-swatch-card .meta span{color:var(--tb-fg-muted)}.doc-rules{padding-left:var(--tb-space-5);max-width:680px}.doc-rules li{margin-bottom:var(--tb-space-2)}.doc-do-dont{gap:var(--tb-space-3);margin:var(--tb-space-3) 0 var(--tb-space-5);grid-template-columns:1fr 1fr;display:grid}.doc-do,.doc-dont{border:var(--tb-border-width) solid var(--tb-border);border-radius:var(--tb-radius-md);padding:var(--tb-space-3) var(--tb-space-4);background:var(--tb-bg-surface);font-size:var(--tb-text-sm)}.doc-do strong,.doc-dont strong{align-items:center;gap:var(--tb-space-2);margin-bottom:var(--tb-space-1);display:flex}.doc-do strong:before,.doc-dont strong:before{content:"";width:var(--tb-space-4);height:var(--tb-space-4);-webkit-mask:var(--_doc-icon) center / contain no-repeat;-webkit-mask:var(--_doc-icon) center / contain no-repeat;mask:var(--_doc-icon) center / contain no-repeat;flex:none}.doc-do strong:before{--_doc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");background:var(--tb-success)}.doc-dont strong:before{--_doc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");background:var(--tb-danger)}.doc-shell-demo{border:var(--tb-border-width) solid var(--tb-border);background:var(--tb-bg-canvas)}.doc-shell-demo .tb-app-shell{min-height:0}.doc-shell-demo .tb-appbar{position:relative}.doc-shell-demo.tb-nav-left .tb-appbar{height:380px}.doc-shell-demo .tb-page-main{min-height:140px}@media (width<=900px){#app{flex-direction:column}.doc-nav{width:auto;height:auto;margin:var(--tb-space-3) var(--tb-space-3) 0;flex:none;position:static}.doc-nav-scroll{overflow:visible;-webkit-mask-image:none;mask-image:none}.doc-main{padding:var(--tb-space-5) var(--tb-space-4)}}