.usage-copy{grid-template-columns:1fr 1fr;column-gap:60px;margin-bottom:36px;display:grid}.usage-copy>.eyebrow{grid-column:1/-1}.usage-copy>h2{grid-row:1/3}.usage-copy>p:not(.eyebrow){color:#9299a6;max-width:440px;margin-top:0}.renderer-note{color:#929caf;grid-column:2;margin-top:12px;font-size:12px}.renderer-note summary{cursor:pointer;padding-block:6px}.renderer-note p{max-width:440px;margin-top:8px;line-height:1.8}.renderer-note[open] p{animation:.18s gentle-arrive}.layer-workbench{grid-template-columns:.9fr 1.1fr;align-items:start;gap:54px;display:grid}.layer-explorer{min-width:0}.layer-explorer-bar{justify-content:space-between;align-items:center;gap:12px;display:flex}.layer-explorer-bar>span{color:#727e90;font-size:11px}.stack-controls{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.loop-play-shape,[data-looping=false] .loop-pause-shape{opacity:0}[data-looping=false] .loop-play-shape{opacity:1}.stack-toggle,.sample-replay{isolation:isolate;color:#c1d2eb;touch-action:manipulation;min-height:38px;transition:background var(--motion-ui) ease, border-color var(--motion-ui) ease, color var(--motion-ui) ease, transform var(--motion-press) var(--ease-out);background:#1c2430;border:1px solid #3d485b;border-radius:9px;justify-content:center;align-items:center;gap:7px;padding:7px 13px;font-size:12px;display:inline-flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #d7eaff14,0 3px #10151e}.control-sheen{z-index:0;opacity:0;pointer-events:none;width:45%;transition:transform .24s var(--ease-out), opacity .12s ease;background:linear-gradient(90deg,#0000,#b4d4ff20,#0000);position:absolute;top:-50%;bottom:-50%;left:0;transform:translate(-160%)skew(-18deg)}.stack-toggle>svg,.stack-toggle>span:not(.control-sheen),.sample-replay>svg,.sample-replay>span:not(.control-sheen),.layer-workbench .copy-button>svg,.layer-workbench .copy-button>span:not(.control-sheen){z-index:1;position:relative}.loop-orbit{stroke-dasharray:4 5;opacity:.5;transform-origin:50%;transition:transform .24s var(--ease-out), stroke-dashoffset .24s var(--ease-out), opacity var(--motion-ui) ease}.stack-toggle .loop-control-icon{width:20px;height:20px}[data-looping=true] .loop-orbit{opacity:.85}.stack-toggle:focus-visible .control-sheen,.sample-replay:focus-visible .control-sheen,.copy-button:focus-visible .control-sheen,.layer-choices:focus-within .control-sheen{opacity:1;transform:translate(320%)skew(-18deg)}.stack-toggle svg,.sample-replay svg{stroke:currentColor;stroke-width:1.3px;fill:none;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.stack-toggle:active,.sample-replay:active{transform:scale(.97)}.stack-stage{isolation:isolate;height:350px;position:relative;overflow:clip}.stack-floor{pointer-events:none;background-image:linear-gradient(#899ab916 1px,#0000 1px),linear-gradient(90deg,#899ab916 1px,#0000 1px);background-size:30px 30px;width:310px;height:240px;position:absolute;bottom:-40px;left:calc(50% - 155px);transform:rotateX(56deg)rotate(-35deg);mask-image:radial-gradient(#000 30%,#0000 72%)}.stack-assembly{position:absolute;inset:0;transform:perspective(1000px)rotateX(0)rotateY(0)}.stack-plane{--spacing:22px;--plate-color:#f4f5f8;--plate-ink:#192135;width:260px;height:180px;z-index:calc(3 - var(--level));color:var(--plate-ink);transform:translateY(calc((var(--level) - 1) * var(--spacing)));transition:transform .4s var(--ease-out);touch-action:manipulation;background:0 0;border:0;padding:0;position:absolute;top:calc(50% - 90px);left:calc(50% - 130px)}.stack-plane-chunks{--plate-color:#f8f7fc}.stack-plane-renderer{--plate-color:#eef2f8}.stack-plane-motion{--plate-color:#e9eef9}.stack-plane-renderer[aria-pressed=true],.stack-plane-motion[aria-pressed=true]{transform:translate(16px, calc((var(--level) - 1) * var(--spacing) - 6px)) scale(1.035)}.stack-plane-face{z-index:1;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:110px;height:88px;font-size:12px;font-weight:650;display:flex;position:absolute;top:32px;left:75px;transform:rotate(-31deg)skew(24deg)scaleY(.78)}.stack-plane-face svg{stroke:currentColor;stroke-width:1.8px;fill:none;stroke-linecap:round;stroke-linejoin:round;width:34px;height:34px}.stack-plane-base{stroke:#202945;stroke-width:.8px}.stack-plane-seam{fill:#dce3f1;stroke:#263149;stroke-width:.8px}.stack-plane-shape{width:100%;height:100%;display:block}.stack-plane-surface{fill:var(--plate-color);stroke:#263149;stroke-width:1px;transition:stroke var(--motion-ui) ease}.stack-plane[aria-pressed=true] .stack-plane-surface{stroke:#659aff}[data-separated=true] .stack-plane{--spacing:84px}.stack-axis{color:#505c6f;letter-spacing:.08em;font:9px Consolas,monospace;position:absolute;left:50%;translate:-50%}.stack-axis:after{content:"";background:#344053;width:1px;height:18px;position:absolute;left:50%}.stack-axis-top{top:16px}.stack-axis-top:after{top:18px}.stack-axis-bottom{bottom:16px}.stack-axis-bottom:after{bottom:18px}.layer-choices{isolation:isolate;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;display:grid;position:relative}.layer-choices:before{content:"";pointer-events:none;background:#3b4657;height:1px;position:absolute;top:25px;left:16%;right:16%}.layer-selection{transform-origin:0;pointer-events:none;background:0 0;border:0;width:calc(33.3333% - 5.33333px);height:2px;position:absolute;top:auto;bottom:0;left:0;transform:translate(0)}.layer-route-packet{opacity:0;pointer-events:none;width:calc(33.333% - 38px);height:3px;transition:opacity .12s;position:absolute;top:24px;overflow:hidden}.route-to-renderer{left:calc(16.666% + 19px)}.route-to-motion{left:calc(50% + 19px)}.layer-route-packet i{transform-origin:0;background:#a9d1ff;width:100%;height:100%;animation:1.4s linear infinite paused layer-packet-travel;display:block}.route-to-motion i{animation-delay:.65s}[data-sample-state=receiving] .layer-route-packet{opacity:1}[data-sample-state=receiving] .layer-route-packet i{animation-play-state:running}@keyframes layer-packet-travel{0%{opacity:0;transform:translate(-10%)scaleX(.08)}20%,80%{opacity:.8}to{opacity:0;transform:translate(100%)scaleX(.08)}}.layer-selection:after{content:"";background:#a9d1ff;border-radius:2px;height:2px;position:absolute;bottom:0;left:14px;right:14px}.layer-choices button{z-index:1;color:#a4aec0;touch-action:manipulation;min-width:0;min-height:82px;transition:color var(--motion-ui) ease, transform var(--motion-press) var(--ease-out);background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:9px;padding:12px 8px;font-size:13px;font-weight:600;display:flex;position:relative}.layer-choices button:before{content:"";z-index:-1;background:#111112;width:38px;height:30px;position:absolute;top:10px;left:calc(50% - 19px)}.layer-choices button[aria-pressed=true]{color:#ecf4ff;transform:translateY(-3px)scale(1.035)}.layer-choices button:active,.layer-choices button[aria-pressed=true]:active{transform:scale(.97)}.layer-choices button:focus-visible{outline-offset:3px}.layer-choice-icon{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linecap:round;stroke-linejoin:round;color:#8296b4;width:26px;height:26px;transition:color var(--motion-ui) ease;flex:0 0 26px}.layer-choices button[aria-pressed=true] .layer-choice-icon{color:#a9d1ff}.layer-choice-icon>*{transform-box:fill-box;transform-origin:50%;transition:transform var(--motion-ui) var(--ease-out), opacity var(--motion-ui) ease}.choice-packet-b,.choice-line-b,.choice-motion-b{transition-delay:30ms}.choice-packet-c,.choice-line-c,.choice-motion-c{transition-delay:60ms}.layer-choice-label{transition:transform var(--motion-ui) var(--ease-out)}.layer-choices button[aria-pressed=true] .choice-packet-a{transform:translate(-1px,-2px)}.layer-choices button[aria-pressed=true] .choice-packet-b{transform:translate(1px,-2px)}.layer-choices button[aria-pressed=true] .choice-packet-c{transform:translateY(2px)}.layer-choices button[aria-pressed=true] .choice-line-a{transform:translate(1px)}.layer-choices button[aria-pressed=true] .choice-line-c{transform:translate(2px)}.layer-choices button[aria-pressed=true] .choice-motion-a{transform:translateY(-2px)}.layer-choices button[aria-pressed=true] .choice-motion-c{transform:translateY(2px)}.loop-play-shape,.loop-pause-shape{transform-origin:50%;transition:transform var(--motion-ui) var(--ease-out), opacity .12s ease}.stack-toggle[aria-pressed=true]{color:#e0edff;border-color:#6286b4}[data-looping=false] .loop-pause-shape,[data-looping=true] .loop-play-shape{transform:scale(.75)}.copy-icon-sheets,.copy-icon-front,.copy-icon-back,.sample-replay svg{transform-origin:50%;transition:transform var(--motion-ui) var(--ease-out), opacity .12s ease}.copy-icon-check{stroke-dasharray:16;stroke-dashoffset:16px;opacity:0;transition:stroke-dashoffset var(--motion-ui) var(--ease-out), opacity .12s ease}.copy-button[data-copied=true] .copy-icon-sheets{opacity:0;transform:scale(.8)}.copy-button[data-copied=true] .copy-icon-check{stroke-dashoffset:0;opacity:1}.stack-instruction{text-align:center;color:#929caf;margin-top:14px;font-size:11px}.layer-inspector{min-width:0}.layer-detail{min-height:114px}.layer-detail .eyebrow{margin-bottom:9px}.layer-detail h3{color:#d5dcea;letter-spacing:-.4px;font-size:18px;font-weight:550}.layer-detail>p:last-child{color:#8590a3;max-width:400px;margin-top:9px;font-size:13px;line-height:1.7}.layer-code{background:#141820;border-color:#354052}.layer-code>.code-panel-header{background:#1a202a;border-bottom-color:#303846;padding:10px 16px}.code-file{color:#a1b1cb;align-items:center;gap:8px;font:10px Consolas,monospace;display:inline-flex}.code-file i{border:1px solid #89b5f1;border-radius:2px;width:6px;height:6px}.layer-code-panel pre{scrollbar-width:thin;scrollbar-color:#3e4d65 transparent;height:294px;padding:20px 16px;font-size:12px;line-height:1.85;background:0 0!important}.layer-sample-header{border-top:1px solid #303846;justify-content:space-between;align-items:center;gap:10px;padding:9px 16px;display:flex}.layer-sample-header>span{color:#a8b8cf;align-items:center;gap:7px;font-size:11px;display:flex}.layer-sample-header i{width:4px;height:4px;transition:background var(--motion-ui) ease;background:#5c7190;border-radius:50%}[data-sample-state=receiving] .layer-sample-header i{background:#9dc8ff}.layer-sample-header [data-sample-state]{color:#929caf}.sample-replay{min-height:32px;padding:5px 11px;font-size:11px}.layer-workbench .copy-button{isolation:isolate;background:linear-gradient(#273247,#1a2333);border:1px solid #42516a;border-radius:999px;min-height:32px;padding:5px 11px;position:relative;overflow:hidden;box-shadow:inset 0 1px #d7eaff14}.sample-replay svg{width:13px;height:13px}.layer-sample{background:#10141b;flex-wrap:wrap;align-content:center;align-items:center;gap:6px;height:94px;padding:12px 16px;display:flex;overflow:auto}.workbench-answer{color:#c1d1e8;font-size:13px;line-height:1.8}[data-layer=motion] .workbench-answer [data-stream-morph-key]{animation:workbench-word-enter .32s var(--ease-out) both}@keyframes workbench-word-enter{0%{transform:translateY(.35em)}to{transform:translateY(0)}}.sample-chunk{color:#bbaee3;background:#221e2e;border:1px solid #47405e;border-radius:5px;padding:5px 7px;font:10px Consolas,monospace}@media (hover:hover) and (pointer:fine){.stack-toggle:hover .control-sheen,.sample-replay:hover .control-sheen,.copy-button:hover .control-sheen,.layer-choices:hover .control-sheen{opacity:1;transform:translate(320%)skew(-18deg)}.stack-toggle:hover .loop-orbit{stroke-dashoffset:-9px;opacity:1;transform:rotate(45deg)}.layer-choices button:hover{color:#ecf4ff}.layer-choices button:hover .layer-choice-icon{color:#c1ddff}.layer-choices button:hover .choice-packet-a{transform:translate(-1px,-2px)}.layer-choices button:hover .choice-packet-b{transform:translate(1px,-2px)}.layer-choices button:hover .choice-packet-c{transform:translateY(2px)}.layer-choices button:hover .choice-packet-d{transform:translate(1px,2px)}.layer-choices button:hover .choice-document{transform:translateY(-1px)}.layer-choices button:hover .choice-line-a{transform:translate(1px)}.layer-choices button:hover .choice-line-b{transform:translate(-1px)}.layer-choices button:hover .choice-line-c{transform:translate(2px)}.layer-choices button:hover .choice-motion-a{transform:translateY(-2px)}.layer-choices button:hover .choice-motion-c{transform:translateY(2px)}.sample-replay:hover svg{transform:rotate(-30deg)}.copy-button:not([data-copied=true]):hover .copy-icon-back{transform:translate(-1px,-1px)}.copy-button:not([data-copied=true]):hover .copy-icon-front{transform:translate(1px,1px)}.stack-plane:hover .stack-plane-surface{stroke:#8fbaff}.stack-toggle:hover,.sample-replay:hover,.layer-workbench .copy-button:hover{color:#e5f0ff;border-color:#85a8d4}}@media (width<=800px){.layer-workbench{grid-template-columns:1fr 1.1fr;gap:26px}.usage-copy{column-gap:30px}.stack-axis,.layer-explorer-bar>span{display:none}}@media (width<=600px){.usage-copy{margin-bottom:30px;display:block}.usage-copy>p:not(.eyebrow){margin-top:18px}.layer-workbench{grid-template-columns:1fr;gap:32px}.stack-stage{height:350px}.layer-detail{min-height:100px}.layer-code-panel pre{height:288px;padding-inline:12px;font-size:12px}}@media (hover:none),(pointer:coarse){.stack-toggle,.sample-replay,.layer-workbench .copy-button,.layer-choices button{min-height:44px}.renderer-note summary{min-height:44px;padding-block:14px}}@media (prefers-reduced-motion:reduce){.layer-route-packet,.control-sheen{display:none}.layer-choice-icon>*,.layer-choice-label,.loop-orbit,.loop-play-shape,.loop-pause-shape,.copy-icon-sheets,.copy-icon-front,.copy-icon-back,.sample-replay svg{transition:opacity .12s;transform:none!important}.copy-icon-check{transition:opacity .12s}[data-layer=motion] .workbench-answer [data-stream-morph-key]{animation:.12s both gentle-arrive}.stack-plane{transition:none}.stack-assembly{transform:none!important}.stack-toggle:active,.sample-replay:active,.layer-choices button:active,.layer-choices button[aria-pressed=true]:active,.layer-choices button[aria-pressed=true]{transform:none}.stack-plane-renderer[aria-pressed=true],.stack-plane-motion[aria-pressed=true]{transform:translateY(calc((var(--level) - 1) * var(--spacing)))}}main{isolation:isolate;position:relative}main:before{content:"";z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff03 1px,#0000 1px),linear-gradient(90deg,#ffffff03 1px,#0000 1px);background-size:88px 88px;position:absolute;inset:520px 0 0;mask-image:linear-gradient(#0000,#000 140px calc(100% - 140px),#0000)}.examples-section,.usage-section{isolation:isolate;position:relative}.section-pattern{z-index:-1;color:#546681;opacity:.45;pointer-events:none;height:320px;position:absolute;top:0;left:-32px;right:-32px;overflow:clip;mask-image:linear-gradient(#0000,#000 20% 70%,#0000)}.section-pattern svg{width:100%;height:100%}.section-pattern-usage{top:-90px}.pattern-route{stroke:#53647e;stroke-width:1px;opacity:.5}.pattern-node rect{fill:#171c25;stroke:#657995}.pattern-node path{stroke:#7e99bb}.pattern-packet{fill:#a7caff;opacity:0;animation:12s linear infinite paused pattern-transmit-left}.pattern-packet-right{animation-name:pattern-transmit-right;animation-delay:-6s}[data-ambient-playing=true] .pattern-packet{animation-play-state:running}@keyframes pattern-transmit-left{0%,20%{opacity:0;transform:translate(0)}23%{opacity:.8}32%{transform:translate(96px)}40%{transform:translate(160px,-64px)}50%{transform:translate(256px,-64px)}58%{opacity:.8;transform:translate(320px)}70%,to{opacity:0;transform:translate(480px)}}@keyframes pattern-transmit-right{0%,20%{opacity:0;transform:translate(0)}23%{opacity:.8}32%{transform:translate(-96px)}40%{transform:translate(-160px,64px)}50%{transform:translate(-256px,64px)}58%{opacity:.8;transform:translate(-320px)}70%,to{opacity:0;transform:translate(-480px)}}.featured:not(.is-comparing) .pane-label{display:none}.compact .demo-topbar{background:#17191e;height:34px}.compact .demo-model svg{color:#73849e;width:14px;height:14px}.example-heading{margin:0 6px 12px}.compact:before,.compact:after{content:"";z-index:2;pointer-events:none;opacity:0;width:12px;height:12px;transition:opacity var(--motion-ui) ease, transform var(--motion-ui) var(--ease-out);border-style:solid;border-color:#465978;position:absolute}.compact{position:relative}.compact:before{border-width:1px 0 0 1px;border-top-left-radius:12px;top:0;left:0;transform:translate(3px,3px)}.compact:after{border-width:0 1px 1px 0;border-bottom-right-radius:12px;bottom:0;right:0;transform:translate(-3px,-3px)}.compact[data-state=streaming]:before,.compact[data-state=streaming]:after{opacity:1;transform:translate(0)}.compact .icon-button:active{transform:scale(.94)}@media (hover:hover) and (pointer:fine){.example-card:hover .compact:before,.example-card:hover .compact:after{opacity:.6;transform:translate(0)}}@media (width<=600px){.section-pattern{opacity:.3;left:-15px;right:-15px}main:before{background-size:64px 64px}}@media (prefers-reduced-motion:reduce){.pattern-packet{display:none}.compact:before,.compact:after{transform:none!important}}