:root{color:#f2f2f2;background:#000;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:#000}button,input,select{font:inherit}a{color:inherit;text-decoration:none}.docs-app{min-height:100vh;color:#eee;background:#000}.icon-button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:7px;color:#858585;background:transparent;cursor:pointer}.icon-button:hover{color:#efefef;background:#1b1b1b}.docs-shell{display:grid;grid-template-columns:220px minmax(0,760px) 300px;gap:48px;width:min(1380px,calc(100vw - 48px));margin:0 auto;padding-top:48px;align-items:start}.playground-shell{grid-template-columns:220px minmax(0,760px) 240px}.sidebar-scroll{position:sticky;top:36px;height:calc(100vh - 56px);overflow:hidden}.sidebar{padding:6px 0 36px}.nav-group,.nav-section{display:grid;gap:4px}.nav-section{margin-top:30px}.nav-section h2{margin:0 0 8px;color:#f1f1f1;font-size:13px;font-weight:600}.nav-link{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;align-items:center;column-gap:8px;min-height:32px;width:100%;border:0;border-radius:6px;padding:0 4px 0 0;color:#777;background:transparent;font-size:13px;line-height:20px;text-align:left}.nav-link svg{justify-self:center;width:14px;height:14px;color:#3f3f3f}.nav-link span{min-width:0}.nav-link.active,.nav-link:hover{color:#f4f4f4}.nav-link.active svg{color:#008ae6}.nav-link small{color:#00a3ff;font-size:12px}.nav-end{width:13px;height:13px;justify-self:end;color:#4f4f4f}.section-trigger{width:100%;padding:0;cursor:pointer}.nested{margin-left:22px;padding-left:12px;border-left:1px solid #222222}.nested-link{grid-template-columns:1fr}.content{min-width:0;padding-bottom:80px}.content-header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}h1{margin:0 0 12px;color:#f5f5f5;font-size:22px;line-height:1.25;letter-spacing:0}.content p{margin:0;max-width:620px;color:#a8a8a8;font-size:15px;line-height:1.65}.llm-button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid #2c2c2c;border-radius:7px;color:#858585;background:#111;font-size:13px;cursor:pointer}.llm-button:hover{color:#f1f1f1;border-color:#464646}.carousel-section{margin:22px 0 30px}.shader-carousel{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;width:100%}.carousel-card{display:grid;grid-template-rows:1fr auto;gap:16px;min-height:236px;padding:20px;border:1px solid #1c1c1c;border-radius:8px;background:#111}.carousel-logo{align-self:center;justify-self:center;width:118px;height:118px}.carousel-card h2{margin:0 0 4px;color:#f4f4f4;font-size:14px;letter-spacing:0}.carousel-card p{margin:0;color:#777;font-size:13px;line-height:1.35}.playground-layout{display:block;margin:28px 0}.play-panel{border:1px solid #2c2c2c;border-radius:8px;background:#0e0e0e}.play-stage{display:grid;place-items:center;min-height:min(620px,calc(100vh - 160px))}.play-logo{width:min(100%,520px);height:min(70vw,520px)}.play-panel{grid-column:3;grid-row:1 / span 2;position:sticky;top:48px;width:100%;overflow:visible;display:grid;gap:10px;align-content:start;padding:14px}.panel-title{margin:0;color:#f3f3f3;font-size:13px;font-weight:600;letter-spacing:0}.panel-divider{height:1px;margin:10px 0 2px;background:#2c2c2c}.logo-row,.color-row{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:8px;min-height:32px}.logo-row>span,.color-row>span,.radix-field>span,.play-control span{color:#9a9a9a;font-size:12px;font-weight:600}.logo-upload-input{display:none}.radix-field{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:8px;min-height:32px}.radix-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:32px;padding:0 9px;border:1px solid #2c2c2c;border-radius:7px;color:#e8e8e8;background:#111;font-size:12px;text-align:left;overflow:hidden;cursor:pointer}.radix-trigger:hover{border-color:#464646}.radix-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radix-icon{flex-shrink:0;color:#7f7f7f}.logo-trigger{padding-left:7px}.logo-trigger-inner{display:flex;align-items:center;flex:1;width:100%;gap:8px;min-width:0;overflow:hidden}.logo-trigger-thumb{display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;border:1px solid #2c2c2c;border-radius:5px;background:#0f0f0f}.logo-trigger-thumb img{display:block;width:14px;height:14px;object-fit:contain;filter:brightness(0)}.logo-trigger-text{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-item-text{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radix-content{z-index:45;min-width:max(var(--radix-select-trigger-width),180px);border:1px solid #2c2c2c;border-radius:8px;background:#0e0e0e;box-shadow:0 14px 30px #00000073}.radix-viewport{padding:4px}.radix-item{position:relative;display:flex;align-items:center;min-height:30px;padding:0 28px 0 8px;border-radius:6px;color:#d8d8d8;font-size:12px;outline:none;-webkit-user-select:none;user-select:none}.radix-item[data-highlighted]{color:#f1f1f1;background:#1a1a1a}.radix-item-indicator{position:absolute;right:8px;display:grid;place-items:center;color:#4ab2ff}.radix-separator{height:1px;margin:4px;background:#262626}.color-value{grid-column:2;display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;min-height:32px;padding:4px 8px;border:1px solid #2c2c2c;border-radius:7px;background:#0f0f0f}.color-swatch{width:20px;height:20px;border-radius:4px;box-shadow:inset 0 0 0 1px #fff3;pointer-events:none}.color-trigger{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.color-trigger:hover{filter:brightness(1.08)}.color-value strong{color:#e8e8e8;font-size:12px;font-weight:600}.color-stack{display:grid;gap:8px}.color-action-row{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:8px}.add-color-button{height:30px;border:1px solid #2c2c2c;border-radius:7px;color:#d8d8d8;background:#111;font-size:12px;cursor:pointer}.add-color-button:hover:enabled{border-color:#464646;color:#f0f0f0}.add-color-button:disabled{opacity:.5;cursor:not-allowed}.color-remove-button{display:grid;place-items:center;width:16px;height:16px;border:0;color:#9d9d9d;background:transparent;font-size:13px;line-height:1;padding:0;align-self:center;cursor:pointer}.color-remove-button:hover:enabled{color:#fff}.color-remove-button:disabled{opacity:.45;cursor:not-allowed}.color-popover{z-index:46;display:grid;gap:10px;width:180px;padding:10px;border:1px solid #2c2c2c;border-radius:10px;background:#0e0e0e;box-shadow:0 14px 30px #00000073;user-select:none;-webkit-user-select:none}.hex-picker.react-colorful{width:100%;height:132px;user-select:none;-webkit-user-select:none;touch-action:none}.hex-picker .react-colorful__saturation{border-bottom:0;border-radius:8px 8px 0 0}.hex-picker .react-colorful__last-control{border-radius:0 0 8px 8px}.hex-picker .react-colorful__hue-pointer,.hex-picker .react-colorful__alpha-pointer,.hex-picker .react-colorful__saturation-pointer{width:14px;height:14px}.hex-input{width:100%;height:30px;border:1px solid #2c2c2c;border-radius:7px;padding:0 10px;color:#e8e8e8;background:#111;font-size:12px;font-family:SFMono-Regular,Consolas,monospace;text-transform:uppercase}.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.select-field,.play-control{display:grid;gap:6px}.select-field span{color:#9a9a9a;font-size:12px;font-weight:600}.select-field select{width:100%;height:30px;padding:0 8px;border:1px solid #2c2c2c;border-radius:7px;color:#e8e8e8;background:#111;font-size:12px}.play-control{grid-template-columns:76px 56px 1fr;align-items:center;gap:8px}.play-control strong{display:flex;align-items:center;height:28px;padding:0 9px;border:1px solid #2c2c2c;border-radius:7px;background:#111;color:#e8e8e8;font-size:12px;font-weight:600}.hidden-field{display:none}.control-label{display:flex;align-items:center}.play-slider{position:relative;display:flex;grid-column:3;grid-row:1;align-items:center;width:100%;height:18px;touch-action:none;-webkit-user-select:none;user-select:none}.slider-track{position:relative;flex-grow:1;height:4px;border-radius:999px;background:#2f2f2f}.slider-range{position:absolute;height:100%;border-radius:inherit;background:#d0d0d0}.slider-thumb{display:block;width:16px;height:16px;border:0;border-radius:999px;background:#fff;box-shadow:0 1px 6px #00000073}.slider-thumb:focus,button:focus-visible,a:focus-visible{outline:2px solid #5e9eff;outline-offset:2px}.doc-section{display:grid;gap:14px}.api-section{margin-top:28px}.code-title{display:flex;align-items:center;justify-content:space-between;gap:16px}.doc-section h2{margin:0;color:#f3f3f3;font-size:17px;letter-spacing:0}.content code{padding:2px 5px;border:1px solid #333333;border-radius:4px;color:#f0f0f0;background:#101010;font-size:13px}.package-tabs{display:grid;gap:12px;margin:8px 0 14px}.package-tabs [role=tablist]{display:flex;align-items:center;gap:18px}.package-tabs [role=tab]{height:26px;padding:0;border:0;color:#858585;background:transparent;cursor:pointer}.package-tabs [role=tab][data-state=active]{color:#fff}.install-command,.code-shell{border:1px solid #2c2c2c;border-radius:8px;background:#0e0e0e}.install-command{min-height:45px;padding:14px 16px;color:#d7b889;font-family:SFMono-Regular,Consolas,monospace;font-size:13px}.code-shell{position:relative;overflow:hidden;scrollbar-color:#3a3a3a #111111}.code-shell pre{scrollbar-color:#3a3a3a #111111}.code-shell pre::-webkit-scrollbar{width:10px;height:10px}.code-shell pre::-webkit-scrollbar-track{background:#111}.code-shell pre::-webkit-scrollbar-thumb{border:2px solid #111111;border-radius:999px;background:#3a3a3a}.code-shell pre::-webkit-scrollbar-corner{background:#111}.copy-code{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:7px;color:#777;background:transparent;cursor:pointer}.copy-code:hover{color:#f0f0f0;background:#1f1f1f}pre{margin:0;padding:18px 20px 18px 0;overflow-x:auto;font-family:SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.55}.code-line{display:grid;grid-template-columns:48px 1fr;min-width:560px}.line-number{color:#444;text-align:right;-webkit-user-select:none;user-select:none}.code-line code{padding:0 0 0 18px;border:0;color:#c9d1d9;background:transparent}.code-keyword{color:#ff7b72}.code-component{color:#79c0ff}.code-prop{color:#d2a8ff}.code-string{color:#a5d6ff}.code-number{color:#79c0ff}.play-code-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}.play-code-header h2{margin:0;color:#f3f3f3;font-size:13px;letter-spacing:0}.play-code-header .llm-button{height:28px;padding:0 8px;font-size:12px}.compact-code pre{max-height:210px;padding:12px 12px 12px 0;font-size:11px;line-height:1.5}.compact-code .code-line{min-width:420px;grid-template-columns:32px 1fr}.compact-code .code-line code{padding-left:10px}.play-code-section{margin-top:18px}.tooltip{z-index:50;padding:7px 9px;border:1px solid #303030;border-radius:7px;color:#f4f4f4;background:#151515;box-shadow:0 10px 28px #00000073;font-size:12px}.tooltip-arrow{fill:#151515}@media(max-width:1060px){.docs-shell{grid-template-columns:190px minmax(0,1fr);gap:30px;width:min(920px,calc(100vw - 40px))}.playground-shell{grid-template-columns:170px minmax(0,430px) 240px;gap:22px;width:min(872px,calc(100vw - 24px))}.play-panel{grid-column:3;grid-row:1 / span 2;position:sticky;top:48px;width:100%;margin-top:0}}@media(max-width:760px){.docs-shell{display:block;width:min(100vw - 24px,680px);margin:0 auto;padding-top:24px}.playground-shell{display:block}.sidebar-scroll{position:relative;top:0;height:auto}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:12px}.nav-section{margin-top:0}.content-header,.playground-layout{grid-template-columns:1fr}.llm-button{width:fit-content}.play-panel{position:relative;top:auto;right:auto;width:100%;max-height:none;margin-bottom:18px}}@media(max-width:520px){.sidebar,.package-tabs [role=tablist]{grid-template-columns:1fr}.sidebar{display:none}.package-tabs [role=tablist]{display:grid;gap:8px}.package-tabs [role=tab]{justify-self:start}}