:root{--bg: #000000;--fg: #e8edf7;--muted: #8e9bb3;--line: rgba(255, 255, 255, .12);--accent: #7ea6ff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}#scene{display:none;position:fixed;inset:0;width:100%;height:100%;touch-action:none}html[data-view=sphere]{overflow:hidden}html[data-view=sphere] #scene{display:block}html[data-view=sphere] #index{display:none}html[data-view=sphere] #hud{display:block}html[data-view=list] #scene{display:none}html[data-view=list] #masthead{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,40px);font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(to bottom,#05070cd9,#05070c00)}#masthead a{color:var(--muted);text-decoration:none}#masthead a:hover{color:var(--fg)}#view-toggle{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);background:#ffffff0d;border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}#view-toggle:hover{color:var(--fg);border-color:#ffffff4d}#view-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#view-toggle{display:none}html[data-sphere=ok] #view-toggle{display:inline-block}#hud{display:none;position:fixed;left:clamp(16px,4vw,40px);bottom:12px;z-index:10;font:11px/1.5 ui-monospace,monospace;color:#fff6;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}#index{position:relative;z-index:5;max-width:1100px;margin:0 auto;padding:96px clamp(16px,4vw,40px) 96px}#index>h1{font-size:clamp(32px,7vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}#index>.lede{margin:0 0 40px;color:var(--muted);max-width:60ch;font-size:17px}#index .demo-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}@media(min-width:720px){#index .demo-list{grid-template-columns:repeat(2,1fr)}}.demo{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:#ffffff05}.demo:hover{border-color:#ffffff47}.demo h2{margin:0 0 6px;font-size:19px;font-weight:600}.demo h2 a{text-decoration:none}.demo h2 a:hover{text-decoration:underline}.demo p{margin:0 0 12px;color:#b6c0d3}.demo .tags{margin:0 0 12px;font:10px/1.4 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.demo .links{display:flex;gap:14px;font:12px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.demo .links a{color:var(--accent);text-decoration:none}.demo .links a:hover{text-decoration:underline}#index footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}#index footer a{color:var(--accent)}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}#panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:5;display:flex;flex-direction:column;background:#090a0deb;-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%);border-left:1px solid rgba(255,255,255,.09);box-shadow:-32px 0 64px #00000073;transform:translate(100%);transition:transform .38s cubic-bezier(.22,1,.36,1)}:root[data-panel=open] #panel{transform:translate(0)}#panel[hidden]{display:none}#panel-close{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:32px;height:32px;font-size:18px;line-height:1;color:var(--fg);background:#00000073;border:1px solid rgba(255,255,255,.14);border-radius:50%;cursor:pointer;transition:background .16s,border-color .16s}#panel-close:hover{background:#000000b3;border-color:#ffffff4d}#panel-media{margin:0;height:clamp(210px,32vh,430px);overflow:hidden;background:#05070c;border-bottom:1px solid rgba(255,255,255,.07);flex:none}#panel-media video{width:100%;height:100%;object-fit:cover;display:block}#panel-body{flex:1 1 auto;display:flex;flex-direction:column;overflow-y:auto;padding:30px 32px}#panel-body:before,#panel-body:after{content:"";flex:1 1 0;min-height:0}#panel-body:after{flex-grow:1.15}#panel-tags{margin:0 0 12px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}#panel-title{margin:0 0 12px;font-size:27px;font-weight:600;line-height:1.14;letter-spacing:-.01em}#panel-description{margin:0 0 26px;color:#b9c3d6;line-height:1.58;font-size:15px}#panel-links{display:flex;flex-wrap:wrap;gap:10px;margin:0}#panel-links a{padding:10px 18px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;transition:opacity .16s,border-color .16s,background .16s}#panel-live{background:var(--fg);color:#05070c!important;border-color:transparent!important}#panel-live:hover{opacity:.86}#panel-repo{color:var(--fg)}#panel-repo:hover{background:#ffffff14;border-color:#ffffff57}#panel-repo[hidden]{display:none}#panel-url{flex:none;margin:0;padding:14px 28px 18px;border-top:1px solid rgba(255,255,255,.07);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;letter-spacing:.4px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){#panel{top:auto;left:0;width:auto;max-height:78vh;border-left:0;border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -24px 48px #00000080;transform:translateY(100%)}:root[data-panel=open] #panel{transform:translateY(0)}#panel-media{aspect-ratio:2 / 1}#panel-body{padding:20px 22px 16px}#panel-title{font-size:23px}}#preloader{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--bg);transition:opacity .42s ease}#preloader p{margin:0;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.preloader-bar{width:148px;height:2px;overflow:hidden;background:#ffffff1f;border-radius:2px}.preloader-bar span{display:block;width:40%;height:100%;background:var(--fg);border-radius:2px;animation:preloader-sweep 1.1s cubic-bezier(.65,0,.35,1) infinite}@keyframes preloader-sweep{0%{transform:translate(-110%)}to{transform:translate(360%)}}:root[data-ready] #preloader{opacity:0;pointer-events:none}:root[data-view=list] #preloader{display:none}@media(prefers-reduced-motion:reduce){.preloader-bar span{animation-duration:2.4s}}
