:root{color-scheme:light;--look-support-bg:#f0f0f0;--look-support-fg:#202020;--look-support-border:#d9d9d9;--syntax-comment:#686868;--syntax-keyword:#a626a4;--syntax-string:#287a36;--syntax-number:#986801;--syntax-function:#075db8;--syntax-type:#9a4713;--bg:#fff;--fg:#171717;--muted:#686868;--line:#e5e5e5;--soft:#f8f8f8;--hover:#eee;--inverse:#fff}
:root[data-theme=dark]{color-scheme:dark;--look-support-bg:#2a2a2a;--look-support-fg:#eeeeee;--look-support-border:#464646;--syntax-comment:#a3a3a3;--syntax-keyword:#c792ea;--syntax-string:#a5d6a7;--syntax-number:#f2c879;--syntax-function:#82b7ff;--syntax-type:#f0b27a;--bg:#101010;--fg:#f5f5f5;--muted:#a3a3a3;--line:#303030;--soft:#171717;--hover:#272727;--inverse:#101010}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--look-support-bg:#2a2a2a;--look-support-fg:#eeeeee;--look-support-border:#464646;--syntax-comment:#a3a3a3;--syntax-keyword:#c792ea;--syntax-string:#a5d6a7;--syntax-number:#f2c879;--syntax-function:#82b7ff;--syntax-type:#f0b27a;--bg:#101010;--fg:#f5f5f5;--muted:#a3a3a3;--line:#303030;--soft:#171717;--hover:#272727;--inverse:#101010}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--fg);outline-offset:5px}button:disabled{cursor:not-allowed;opacity:.35}.skip{position:fixed;top:-80px;left:20px;background:var(--fg);color:var(--bg);padding:8px 18px;z-index:5}.skip:focus{top:8px}
header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;position:sticky;top:0;background:var(--bg);z-index:3}.brand{font-size:21px;font-weight:650;letter-spacing:-.8px;display:flex;gap:12px;align-items:center}.mark{width:19px;height:19px;background:var(--fg);border-radius:50% 50% 3px 50%;transform:rotate(-45deg)}.brand span:last-child{font-size:12px;font-weight:450;color:var(--muted);letter-spacing:0;border-left:1px solid var(--line);padding-left:14px;margin-left:4px}.header-right{display:flex;align-items:center;gap:25px;font-size:13px}.header-right a{color:var(--muted)}.theme{display:flex;align-items:center;gap:9px;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 11px;font-size:12px}.theme svg{width:15px;height:15px}.layout{display:grid;grid-template-columns:230px minmax(0,820px) 180px;gap:64px;max-width:1430px;margin:auto;padding:0 40px}.sidebar{position:sticky;top:76px;height:calc(100dvh - 76px);padding:40px 0;overflow:auto}.nav-label{font-weight:600;font-size:12px;margin:0 0 13px}.sidebar nav+nav{margin-top:32px}.sidebar a{display:block;font-size:14px;color:var(--muted);padding:6px 12px;margin:2px 0;border-radius:5px}.sidebar a:hover{color:var(--fg);background:var(--soft)}.sidebar a[aria-current]{background:var(--hover);color:var(--fg);font-weight:550}.nav-note{margin:40px 12px 0;color:var(--muted);font-size:12px;line-height:1.6;border-top:1px solid var(--line);padding-top:18px}.sidebar .nav-label{padding-left:12px}main{min-width:0;padding:47px 0 70px}.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:17px;display:flex;align-items:center;gap:12px}.breadcrumb span:last-child{color:var(--fg)}h1{font-size:48px;line-height:1.15;font-weight:620;letter-spacing:-2px;margin:0 0 18px}.intro{font-size:19px;color:var(--muted);line-height:1.6;max-width:620px;margin:0 0 23px}.meta{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:11px}.meta code{border:1px solid var(--line);border-radius:4px;padding:2px 7px;color:var(--fg);font-size:11px}section{margin-top:54px}h2{font-weight:600;letter-spacing:-.6px;font-size:24px;line-height:1.3;margin:0 0 14px}h2 .number{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);display:inline-block;vertical-align:middle;margin-right:12px}p{margin:0 0 18px;color:var(--muted)}p code,li code{color:var(--fg);background:var(--soft);padding:2px 5px;border-radius:3px;font-size:.88em}code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}.codebox{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:20px 0}.codebar{display:flex;justify-content:space-between;align-items:center;padding:10px 17px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.copy{background:transparent;border:0;color:var(--muted);font-size:11px;padding:3px 5px}.copy:hover{color:var(--fg)}pre{margin:0;padding:23px 24px;overflow:auto;font-size:12px;line-height:1.9;tab-size:4}.kw{font-weight:650}.comment{color:var(--muted)}.callout{border-left:2px solid var(--fg);padding:1px 0 1px 17px;margin:22px 0;font-size:13px}.callout p{margin:0}.callout strong{font-weight:600;color:var(--fg)}.small{font-size:13px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.notes{padding-left:20px;color:var(--muted);font-size:14px}.notes li{margin:9px 0}.source-link{text-decoration:underline;text-underline-offset:3px}.toc{position:sticky;top:120px;height:fit-content;margin-top:49px;font-size:12px}.toc strong{font-weight:550;display:block;margin-bottom:14px}.toc a{display:block;color:var(--muted);border-left:1px solid var(--line);padding:6px 0 6px 15px}.toc a:hover{color:var(--fg);border-left-color:var(--fg)}footer{border-top:1px solid var(--line);margin-top:52px;padding-top:22px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.mobile-nav{display:none} @media(min-width:1600px){.layout{gap:80px}}@media(max-width:1200px){.layout{grid-template-columns:190px minmax(0,760px);gap:45px}.toc{display:none}}@media(max-width:760px){header{height:64px;padding:0 22px}.header-right{gap:15px}.header-right a{display:none}.brand span:last-child{font-size:11px}.layout{display:block;padding:0 24px}.sidebar{display:none}main{padding-top:26px}.mobile-nav{display:block;border-bottom:1px solid var(--line);padding:12px 24px;font-size:13px}.mobile-nav summary{cursor:pointer}.mobile-nav nav{display:flex;flex-wrap:wrap;gap:9px 20px;padding:15px 0 4px;color:var(--muted)}h1{font-size:40px}.intro{font-size:17px}pre{padding:18px;font-size:11px}section{margin-top:42px}footer{gap:20px}.meta{flex-wrap:wrap}html{scroll-padding-top:86px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h3{font-size:17px;letter-spacing:-.2px;font-weight:600;margin:30px 0 10px}p strong,.notes strong{color:var(--fg);font-weight:600}
.source-list{list-style:none;padding:0}.source-list li{padding:12px 0;border-bottom:1px solid var(--line)}.source-list a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}.source-list small{display:block;color:var(--muted);font-size:12px}h1{font-size:42px}section{margin-top:38px}

.source-list{list-style:none;padding:0}.source-list li{padding:12px 0;border-bottom:1px solid var(--line)}.source-list a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}.source-list small{display:block;color:var(--muted);font-size:12px}h1{font-size:42px}section{margin-top:38px}

.event-table{overflow-x:auto;margin:20px 0}.event-table table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.event-table th{font-weight:600;color:var(--fg)}.event-table th,.event-table td{padding:12px 10px;vertical-align:top;border-bottom:1px solid var(--line)}.event-table td{color:var(--muted)}.event-table td:first-child{width:var(--event-first-column,56%);color:var(--fg)}.event-table code{font-size:11px;white-space:normal;overflow-wrap:anywhere}

/* Balance every three-column reference, including pages without event-reference.
   Narrow viewports scroll the table instead of squeezing callback names. */
.event-table table:has(>thead>tr>th:nth-child(3):last-child){--event-first-column:30%;min-width:700px;table-layout:fixed}
.event-table table:has(>thead>tr>th:nth-child(3):last-child) th:first-child{width:30%}
.event-table table:has(>thead>tr>th:nth-child(3):last-child) th:nth-child(2){width:30%}
.event-table table:has(>thead>tr>th:nth-child(3):last-child) th:nth-child(3){width:40%}

.support-table th:first-child{width:24%}.support-table td:nth-child(2){width:20%;white-space:nowrap}.support-table caption{text-align:left;font-weight:600;color:var(--fg);padding-bottom:12px}
/* Prism token colors follow the same saved/system theme as the page. */
pre .token.comment{color:var(--syntax-comment)}
pre .token.keyword,pre .token.boolean{color:var(--syntax-keyword)}
pre .token.string,pre .token.char{color:var(--syntax-string)}
pre .token.number{color:var(--syntax-number)}
pre .token.function,pre .token.macro{color:var(--syntax-function)}
pre .token.class-name,pre .token.type-definition,pre .token.property,pre .token.table{color:var(--syntax-type)}
pre .token.punctuation,pre .token.operator{color:var(--fg)}
pre .token.attribute,pre .token.annotation{color:var(--syntax-type)}

.mobile-nav-group{display:flex;flex-wrap:wrap;gap:9px 20px;width:100%}.mobile-nav-group strong{flex-basis:100%;font-size:12px;color:var(--fg);margin-top:12px}

/* Desktop panes share the viewport but own their scroll positions. */
@media(min-width:761px){
    body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
    header{flex:0 0 76px}
    .layout{flex:1;min-height:0;width:100%;grid-template-rows:minmax(0,1fr)}
    .sidebar{position:static;height:100%;min-height:0;overscroll-behavior:contain;overflow-anchor:none}
    main{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-top:24px;scroll-behavior:smooth;padding-left:6px;padding-right:6px}
    .toc{position:static;min-height:0;max-height:calc(100% - 49px);overflow:auto;overscroll-behavior:contain}
}
@media(prefers-reduced-motion:reduce){main{scroll-behavior:auto}}

/* Soft Radix-style support badges; labels link to the corresponding Look. */
.live-example{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:20px 0}
.live-example iframe{display:block;width:100%;height:240px;border:0}
.live-example--tall iframe{height:360px}
.live-example--chart iframe{height:440px}
.example-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:20px 0 16px;overflow-x:auto}
.example-tabs [role=tab]{flex-shrink:0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:10px 14px;cursor:pointer}
.example-tabs [role=tab][aria-selected=true]{border-bottom-color:var(--fg);color:var(--fg);font-weight:600}
.example-tabs [role=tab]:focus-visible{outline-offset:-4px}
.look-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 20px}
.look-badge{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--look-badge-border);border-radius:999px;background:var(--look-badge-bg);color:var(--look-badge-fg);font-size:11px;font-weight:550;line-height:1.5;white-space:nowrap;text-decoration:none}
.look-badge--shadcn,.look-badge--radix{--look-badge-bg:var(--look-support-bg);--look-badge-fg:var(--look-support-fg);--look-badge-border:var(--look-support-border)}
.look-badge:hover{border-color:currentColor;text-decoration:underline;text-underline-offset:2px}
.look-badges--inline{display:inline-flex;margin:0 0 0 8px;vertical-align:middle}
.source-list .look-badge{color:var(--look-badge-fg);text-decoration:none}
.source-list .look-badge:hover{text-decoration:underline}
.sidebar a.nav-sub{padding-left:26px;font-size:13px}