.sample-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 14px}.sample-picker button{position:relative;display:grid;gap:0;padding:0;overflow:clip;text-align:left;cursor:pointer;color:var(--t2);background:#080a0c8c;border:1px solid var(--line);border-radius:var(--r3);transition:border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}.sample-picker img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:#0b1012;filter:saturate(.8) brightness(.78);transition:filter .2s var(--ease)}.sample-picker span{display:grid;gap:2px;padding:9px 11px 10px;min-width:0}.sample-picker b{color:var(--t1);font-size:13.5px;font-weight:700;letter-spacing:.02em;line-height:1.25}.sample-picker small{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}.sample-picker button:hover{border-color:var(--line-strong, rgba(131, 148, 143, .3))}.sample-picker button:hover img{filter:saturate(.95) brightness(.92)}.sample-picker button[aria-selected=true]{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset}.sample-picker button[aria-selected=true] img{filter:none}.sample-picker button[aria-selected=true] small{color:var(--sel)}.sample-picker button:focus-visible{outline:2px solid var(--sel);outline-offset:2px}.trial{overflow:clip;display:grid}.trial-stage{position:relative;border-bottom:1px solid var(--line);background:#05080a}.trial .stagebox{flex:none;min-height:0;aspect-ratio:16 / 9;background:#05080a}.trial .hud-root{position:absolute;inset:0;width:auto;transform:none}.runtime-preview-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent;opacity:1;transition:opacity .35s var(--ease)}.runtime-preview-frame.is-loading{opacity:0}.runtime-preview-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#05080a}.trial-caption{position:absolute;left:12px;bottom:12px;z-index:2;margin:0;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:6px 10px;background:#05080ab8;border:1px solid var(--line);border-radius:var(--r2);font:500 11px/1.4 var(--f-mono);letter-spacing:.05em;color:var(--t1);pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.trial-caption small{color:var(--t3);font:inherit;letter-spacing:.03em}.trial .demo-toolbar{margin:0;padding:14px 16px;border-bottom:1px solid var(--line)}.trial .split-code{border:0}.trial .code-editor-shell{min-height:0;height:clamp(300px,42vh,460px)}@media (max-width: 1100px){.sample-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 640px){.sample-picker{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 4px;scrollbar-width:none}.sample-picker::-webkit-scrollbar{display:none}.sample-picker button{flex:0 0 42%;scroll-snap-align:start}.trial-caption small{display:none}.trial .code-editor-shell{height:320px}}@media (prefers-reduced-motion: reduce){.runtime-preview-frame,.sample-picker button,.sample-picker img{transition:none}}.sample-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}.is-live>.sample-frame{opacity:1}.hero-live-scene[data-sample]:after{z-index:1}.hero-live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.hero-pod{position:absolute;pointer-events:none}@media (prefers-reduced-motion: reduce){.sample-frame{transition:none}}.demo-play{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--line-strong);background:#080c0c9e;color:var(--t1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s var(--ease),background .2s}.demo-play svg{width:26px;height:26px;margin-left:3px;fill:currentColor}.demo-play:hover{transform:scale(1.06);background:#0e1614c7}.demo-play:focus-visible{outline:2px solid var(--sel);outline-offset:3px}.demo-play[hidden]{display:none}