:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f5f7fb;font-synthesis:none;--gallery-header-height:64px;--gallery-sidebar-width:300px;--gallery-border:#ffffff17;--gallery-muted:#98a2b3;--gallery-panel:#111622f5;--gallery-accent:#69e6c2;--gallery-accent-strong:#2ccda4;background:#080b12;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:radial-gradient(circle at 10% 0,#416dff29,#0000 35%),#080b12;overflow:hidden}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gallery-accent);outline-offset:2px}.galleryHeader{z-index:20;height:var(--gallery-header-height);border-bottom:1px solid var(--gallery-border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#080b12db;justify-content:space-between;align-items:center;gap:24px;padding:0 20px;display:flex;position:relative}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brandMark{width:36px;height:36px;color:var(--gallery-accent);letter-spacing:-.04em;background:linear-gradient(145deg,#69e6c22e,#4463ff33);border:1px solid #69e6c26b;border-radius:11px;flex:none;place-items:center;font-size:14px;font-weight:800;display:grid}.brandText{min-width:0}.brandTitle{letter-spacing:-.01em;margin:0;font-size:16px;font-weight:700}.brandSubtitle{color:var(--gallery-muted);margin:2px 0 0;font-size:12px}.headerActions,.backendControl,.viewerActions,.siteLinks{align-items:center;gap:10px;display:flex}.siteLinks{gap:18px;margin-right:6px}.siteLinks a{color:var(--gallery-muted);font-size:12px;font-weight:650;text-decoration:none;transition:color .14s}.siteLinks a:hover{color:var(--gallery-accent)}.backendControl{color:var(--gallery-muted);font-size:12px}.backendControl select,.searchInput{border:1px solid var(--gallery-border);color:#f5f7fb;background:#ffffff0e;border-radius:9px}.backendControl select{min-width:112px;padding:8px 30px 8px 10px}.repositoryLink,.viewerAction{border:1px solid var(--gallery-border);color:#e7ebf3;background:#ffffff0b;border-radius:9px;justify-content:center;align-items:center;min-height:34px;padding:0 12px;font-size:12px;font-weight:600;text-decoration:none;transition:border-color .14s,background .14s,color .14s;display:inline-flex}.repositoryLink:hover,.viewerAction:hover{color:var(--gallery-accent);background:#69e6c217;border-color:#69e6c26b}.sidebarToggle{border:1px solid var(--gallery-border);color:#f5f7fb;cursor:pointer;background:#ffffff0b;border-radius:9px;width:36px;height:36px;display:none}.galleryLayout{width:100%;height:calc(100% - var(--gallery-header-height));grid-template-columns:var(--gallery-sidebar-width) minmax(0, 1fr);display:grid}.gallerySidebar{z-index:15;border-right:1px solid var(--gallery-border);background:var(--gallery-panel);min-width:0;position:relative;overflow:hidden}.sidebarInner{flex-direction:column;height:100%;min-height:0;display:flex}.searchArea{border-bottom:1px solid var(--gallery-border);padding:16px}.searchLabel{color:var(--gallery-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:700;display:block}.searchInput{width:100%;height:40px;padding:0 12px}.searchInput::placeholder{color:#667085}.searchMeta{color:#7f8999;justify-content:space-between;align-items:center;margin-top:9px;font-size:11px;display:flex}.exampleNavigation{overscroll-behavior:contain;scrollbar-color:#3a4353 transparent;scrollbar-width:thin;flex:1;min-height:0;padding:10px 10px 24px;overflow-y:auto}.categorySection{margin-top:14px}.categorySection:first-child{margin-top:0}.categoryHeading{color:#778297;letter-spacing:.09em;text-transform:uppercase;margin:0;padding:6px 9px;font-size:10px;font-weight:800}.categoryList{gap:3px;margin:0;padding:0;list-style:none;display:grid}.exampleButton{color:#cfd5df;cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:9px;width:100%;padding:9px 10px;transition:background .12s,border-color .12s,color .12s;display:block}.exampleButton:hover{color:#fff;background:#ffffff0e}.exampleButton[aria-current=page]{color:#fff;background:linear-gradient(90deg,#69e6c226,#69e6c20a);border-color:#69e6c23d}.exampleButton[aria-current=page]:before{background:var(--gallery-accent);content:"";border-radius:50%;width:5px;height:5px;margin:0 8px 2px 0;display:inline-block;box-shadow:0 0 12px #69e6c2bf}.emptyState{color:var(--gallery-muted);text-align:center;padding:30px 16px;font-size:13px;line-height:1.6}.viewer{background:#05070b;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid}.viewerToolbar{border-bottom:1px solid var(--gallery-border);background:#0d111af5;justify-content:space-between;align-items:center;gap:20px;min-height:70px;padding:12px 18px;display:flex}.viewerIdentity{min-width:0}.viewerMeta{align-items:center;gap:8px;margin-bottom:5px;display:flex}.viewerCategory,.viewerBackend{letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:800}.viewerCategory{color:#aebcff;background:#4463ff29}.viewerBackend{color:var(--gallery-accent);background:#69e6c21f}.viewerTitle{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:16px;font-weight:700;overflow:hidden}.viewerDescription{max-width:720px;color:var(--gallery-muted);text-overflow:ellipsis;white-space:nowrap;margin:3px 0 0;font-size:11px;overflow:hidden}.frameViewport{min-width:0;min-height:0;position:relative;overflow:hidden}.exampleFrame{background:#05070b;border:0;width:100%;height:100%;display:block}.frameStatus{z-index:3;color:var(--gallery-muted);pointer-events:none;background:#05070beb;place-items:center;font-size:13px;transition:opacity .16s;display:grid;position:absolute;inset:0}.frameStatus[data-state=ready]{opacity:0}.frameStatus[data-state=error]{color:#ffb4ab}.loadingIndicator{align-items:center;gap:10px;display:inline-flex}.loadingIndicator:before{border:2px solid #69e6c238;border-top-color:var(--gallery-accent);content:"";border-radius:50%;width:12px;height:12px;animation:.7s linear infinite gallerySpin}.frameStatus[data-state=error] .loadingIndicator:before,.sidebarBackdrop{display:none}@keyframes gallerySpin{to{transform:rotate(360deg)}}@media (max-width:900px){:root{--gallery-header-height:58px}.galleryHeader{padding:0 12px}.brandSubtitle,.repositoryLink,.backendControl>span{display:none}.sidebarToggle{place-items:center;display:inline-grid}.galleryLayout{display:block}.gallerySidebar{z-index:30;width:min(86vw,320px);inset:var(--gallery-header-height) auto 0 0;transition:transform .18s;position:fixed;transform:translate(-102%);box-shadow:20px 0 50px #0006}body.sidebarOpen .gallerySidebar{transform:translate(0)}.sidebarBackdrop{z-index:25;inset:var(--gallery-header-height) 0 0;opacity:0;pointer-events:none;background:#0000008f;border:0;transition:opacity .18s;display:block;position:fixed}body.sidebarOpen .sidebarBackdrop{opacity:1;pointer-events:auto}.viewer{height:100%}}@media (max-width:620px){.viewerToolbar{min-height:60px;padding:9px 12px}.viewerDescription,.viewerCategory,.viewerActionSource{display:none}.viewerActions{gap:6px}.viewerAction{min-height:32px;padding:0 9px}.backendControl select{min-width:100px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
