.example-viewer-page{overflow:hidden;background:var(--bg)}.example-viewer{--example-rail-width: 286px;display:grid;position:relative;grid-template-columns:var(--example-rail-width) minmax(0,1fr);height:calc(100svh - 56px);min-height:620px;border-top:1px solid var(--border-subtle);background:#05070b;transition:grid-template-columns .18s ease}.example-viewer.is-rail-collapsed{--example-rail-width: 0px}.example-rail{overflow:auto;border-right:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--surface-subtle)),var(--surface);transition:border-color .18s ease,opacity .16s ease,visibility .16s ease}.example-viewer.is-rail-collapsed .example-rail{visibility:hidden;opacity:0;border-right-color:transparent;pointer-events:none}.example-rail-toggle{position:absolute;top:50%;left:calc(var(--example-rail-width) - 17px);z-index:8;width:16px;min-width:16px;min-height:76px;padding:0;border:1px solid color-mix(in srgb,var(--border) 74%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 78%,transparent);color:color-mix(in srgb,var(--text-muted) 78%,transparent);box-shadow:0 8px 22px #0f172a14;cursor:w-resize;backdrop-filter:blur(10px);transform:translateY(-50%);transform-origin:right center;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,min-height .16s ease,left .18s ease,top .18s ease,transform .18s ease}.example-rail-toggle span{position:relative;display:block;width:6px;height:6px;margin:0 auto;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;opacity:.82;transform:translate(1px) rotate(225deg);transition:opacity .16s ease,transform .16s ease}.example-rail-toggle:hover,.example-rail-toggle:focus-visible{min-height:112px;border-color:color-mix(in srgb,var(--example-accent) 62%,var(--border));background:color-mix(in srgb,var(--example-accent) 18%,var(--surface));color:color-mix(in srgb,var(--example-accent) 82%,var(--text));box-shadow:0 0 0 2px color-mix(in srgb,var(--example-accent) 12%,transparent),0 14px 34px color-mix(in srgb,var(--example-accent) 18%,transparent)}.example-rail-toggle:hover span,.example-rail-toggle:focus-visible span{opacity:1}.example-rail-toggle:active{transform:translateY(-50%)}.example-rail nav{display:grid;gap:10px;padding:12px 10px 22px}.example-rail a{--rail-accent: var(--example-accent);display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:center;min-height:76px;padding:8px;border:1px solid transparent;border-radius:var(--radius);color:var(--text);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease}.example-rail a:hover,.example-rail a.is-active{border-color:color-mix(in srgb,var(--rail-accent) 34%,var(--border));background:color-mix(in srgb,var(--rail-accent) 7%,var(--surface));color:var(--text);box-shadow:var(--shadow-soft)}.example-rail a:hover{transform:translateY(-1px)}.example-rail a.is-active{box-shadow:inset 3px 0 0 var(--rail-accent),var(--shadow-soft)}.example-thumb{position:relative;display:block;aspect-ratio:1.42;overflow:hidden;border:1px solid color-mix(in srgb,var(--rail-accent) 34%,transparent);border-radius:var(--radius-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--rail-accent) 34%,#080c12),#111827 56%,#1f2937),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:auto,16px 16px,16px 16px}.example-thumb:after{content:"";position:absolute;top:50%;left:50%;width:42%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--rail-accent) 74%,white);border-radius:var(--radius-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--rail-accent) 72%,white),var(--rail-accent));box-shadow:0 12px 28px color-mix(in srgb,var(--rail-accent) 24%,transparent);transform:translate(-50%,-45%) rotate(12deg)}.example-rail a.is-active .example-thumb{border-color:var(--rail-accent)}.example-rail-copy{display:grid;gap:9px;min-width:0}.example-rail-copy strong{overflow:hidden;font-size:.92rem;font-weight:760;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.example-rail-tags{display:flex;flex-wrap:wrap;gap:6px}.example-rail-tags span{border:1px solid color-mix(in srgb,var(--border) 72%,transparent);border-radius:999px;color:var(--text-muted);font-size:.72rem;font-weight:700;line-height:1;padding:5px 7px}.example-rail-tags{overflow:hidden;max-height:24px}.example-viewer.is-rail-collapsed .example-rail-toggle{left:8px;border-color:#ffffff24;background:#080d1694;color:#ffffff9e;cursor:e-resize;transform:translateY(-50%);transform-origin:left center}.example-viewer.is-rail-collapsed .example-rail-toggle:hover,.example-viewer.is-rail-collapsed .example-rail-toggle:focus-visible{left:8px}.example-viewer.is-rail-collapsed .example-rail-toggle:active{transform:translateY(-50%)}.example-viewer.is-rail-collapsed .example-rail-toggle span{transform:translate(-1px) rotate(45deg)}.example-stage{position:relative;min-width:0;overflow:hidden}.example-stage .example-preview{position:relative;height:100%;min-height:100%;border:0;border-radius:0}.example-stage .preview-stage{position:relative;height:100%;min-height:100%;overflow:hidden}.example-stage .preview-stage canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}.example-stage .preview-stage:before,.example-stage .preview-stage:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}.example-stage .preview-stage:before{background:linear-gradient(180deg,#03071252,#0307120a 42%,#03071275),radial-gradient(circle at 50% 50%,transparent 42%,rgba(3,7,18,.28))}.example-stage .preview-stage:after{inset:auto 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(3,7,18,.42)),linear-gradient(90deg,transparent,color-mix(in srgb,var(--example-accent) 10%,transparent),transparent)}.example-preview:not([data-state=loading]) .preview-stage:after{content:none}.example-preview-status{position:absolute;top:50%;left:50%;z-index:3;max-width:min(420px,calc(100% - 40px));padding:10px 12px;border:1px solid color-mix(in srgb,var(--example-accent) 42%,rgba(255,255,255,.18));border-radius:var(--radius-sm);background:#030712bd;color:#ffffffd1;font-size:.82rem;font-weight:700;line-height:1.35;text-align:center;box-shadow:0 18px 48px #00000042;transform:translate(-50%,-50%);backdrop-filter:blur(12px)}.example-preview[data-state=error] .example-preview-status{border-color:#f8717170;color:#fecaca}.example-preview[data-state=error] canvas{opacity:.32}.example-edit-button{position:absolute;z-index:4;top:14px;right:14px;border-color:color-mix(in srgb,var(--example-accent) 60%,transparent);background:color-mix(in srgb,var(--example-accent) 88%,#ffffff);color:#06111e;box-shadow:0 12px 34px color-mix(in srgb,var(--example-accent) 24%,transparent)}@media(max-width:900px){.example-viewer-page{overflow:auto}.example-viewer{grid-template-columns:1fr;grid-template-rows:auto minmax(500px,1fr);height:auto;min-height:calc(100svh - 102px)}.example-viewer.is-rail-collapsed{--example-rail-width: 0px;grid-template-columns:1fr;grid-template-rows:0 minmax(500px,1fr)}.example-rail{overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--border)}.example-rail nav{display:flex;width:max-content;min-width:100%;gap:8px;padding:10px}.example-viewer.is-rail-collapsed .example-rail{overflow:hidden}.example-rail a{width:min(74vw,260px);grid-template-columns:74px minmax(0,1fr)}.example-rail a.is-active{box-shadow:inset 0 -3px 0 var(--rail-accent),var(--shadow-soft)}.example-stage{height:calc(100svh - 210px);min-height:500px}.example-viewer.is-rail-collapsed .example-stage{height:calc(100svh - 102px)}.example-rail-toggle{top:88px;right:auto;left:50%;width:76px;min-width:76px;min-height:16px;justify-self:center;cursor:n-resize;transform:translate(-50%,-50%)}.example-rail-toggle span{transform:translateY(1px) rotate(315deg)}.example-rail-toggle:hover,.example-rail-toggle:focus-visible{left:50%;width:76px;min-height:22px}.example-rail-toggle:active{transform:translate(-50%,-50%)}.example-viewer.is-rail-collapsed .example-rail-toggle{top:8px;left:50%;cursor:s-resize;transform:translate(-50%)}.example-viewer.is-rail-collapsed .example-rail-toggle:hover,.example-viewer.is-rail-collapsed .example-rail-toggle:focus-visible{left:50%}.example-viewer.is-rail-collapsed .example-rail-toggle:active{transform:translate(-50%)}.example-viewer.is-rail-collapsed .example-rail-toggle span{transform:translateY(-1px) rotate(135deg)}}@media(max-width:560px){.example-rail a{width:min(82vw,244px)}.example-stage{height:calc(100svh - 232px);min-height:480px}.example-viewer.is-rail-collapsed .example-stage{height:calc(100svh - 102px)}.example-edit-button{top:10px;right:10px}}