@font-face{font-family:Inter;src:url("fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
:root{--paper:#fbfbfa;--ink:#1a1a1a;--accent:#5546d6;--muted:#62625e;--line:#ddddd7;--control-line:#85857e;--surface:#f1f1ee;--tint:#eeebff;--radius:8px;--focus:3px solid var(--accent)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:15px;line-height:1.65;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-underline-offset:4px}
a:hover{color:var(--accent)}
button,input,select{font:inherit}
button,a,input,select{touch-action:manipulation}
button{cursor:pointer}
button:disabled,input:disabled,select:disabled{cursor:wait;opacity:.6}
:focus-visible{outline:var(--focus);outline-offset:4px}
.shell{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.topbar{min-height:80px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;white-space:nowrap}
.brand span{font-family:"Space Grotesk",sans-serif;font-size:28px;font-weight:600;letter-spacing:-1.1px}
.brand img{display:block;object-fit:contain}
.product-label{border-left:1px solid var(--line);padding-left:30px;font-size:13px;color:var(--muted)}
.manual-link{margin-left:auto;font-size:13px;text-decoration:none}
.manual-link span{padding-left:6px}
.skip-link{position:fixed;top:12px;left:12px;z-index:2;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--radius);transform:translateY(-180%)}
.skip-link:focus{transform:none}
main{flex:1}
.page-heading{padding:46px 0 38px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:-.04em}
h1{font-size:clamp(32px,4vw,46px);line-height:1.18}
.heading-stop{color:var(--accent)}
.page-heading p{color:var(--muted);margin-top:12px;font-size:15px}
.environment-note{margin:0 0 28px;padding:10px 16px;background:var(--tint);border-left:3px solid var(--accent);font-size:12px;color:#423696}
.catalog-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:48px}
.filters{padding-top:4px;min-width:0}
.filters label{display:block;font-size:12px;font-weight:600;margin:0 0 8px}
.filters input,.filters select{width:100%;height:46px;border:1px solid var(--control-line);border-radius:var(--radius);background:var(--paper);color:var(--ink);padding:0 12px;min-width:0;outline-offset:3px;margin-bottom:24px}
.filters input::placeholder{color:var(--muted);opacity:1}
.filters select{padding-right:22px}
.text-button{background:transparent;color:var(--ink);border:0;padding:8px 0;min-height:40px;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.text-button:hover{color:var(--accent)}
.filter-note{border-top:1px solid var(--line);padding-top:22px;margin-top:24px}
.filter-note p{font-size:12px;line-height:1.75;color:var(--muted);max-width:27ch}
.result-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:18px}
.result-heading h2{font-size:18px;letter-spacing:-.02em}
.result-heading p{font-size:12px;color:var(--muted);font-family:"JetBrains Mono",monospace}
.demo{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);margin-bottom:24px}
.demo-top{padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.category{font-size:12px;color:var(--muted);letter-spacing:0}
.status{display:inline-block;border:1px solid #b9b1ed;background:var(--tint);color:#423696;border-radius:4px;padding:3px 9px;white-space:nowrap;font-size:11px;font-weight:600}
.status.available{background:var(--tint);color:var(--accent)}
.status.archived{color:var(--muted);background:var(--surface);border-color:var(--line)}
.demo-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:32px;padding:32px 28px}
.demo-title{font-size:clamp(27px,2.7vw,36px);line-height:1.18;max-width:16ch;margin-bottom:18px}
.demo-description{color:var(--muted);font-size:14px;line-height:1.8;max-width:44ch}
.demo-aside{padding-left:26px;border-left:1px solid var(--line);align-self:stretch}
.meta-label{display:block;font-size:11px;color:var(--muted);margin-bottom:7px;font-weight:500}
.tech-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tech-list li{font-family:"JetBrains Mono",monospace;font-size:10px;line-height:1.6;border:1px solid var(--line);background:var(--surface);padding:4px 7px;border-radius:4px}
.owner{margin-top:22px;font-size:13px}
.demo-bottom{padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface)}
.availability-note{color:var(--muted);font-size:12px;max-width:34ch}
.demo-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;border:1px solid var(--accent);border-radius:var(--radius);min-height:44px;padding:10px 18px;background:var(--accent);color:var(--paper);text-decoration:none;font-size:12px;font-weight:600;line-height:1.5}
.button:hover{background:#4435b7;color:var(--paper);border-color:#4435b7}
.button:active{transform:translateY(1px)}
.button.secondary{background:transparent;border-color:var(--control-line);color:var(--ink)}
.button.secondary:hover{border-color:var(--ink);background:var(--surface)}
.preview{width:100%;height:auto;display:block;max-height:360px;object-fit:contain;background:var(--surface)}
.preview-note{font-size:12px;color:var(--muted);padding:8px 28px}
.empty-state,.error-state{padding:40px 32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.empty-state h3,.error-state h3{font-size:24px;line-height:1.3;margin-bottom:12px}
.empty-state p,.error-state p{font-size:14px;color:var(--muted);max-width:58ch;margin-bottom:14px;overflow-wrap:anywhere}
.empty-state .button,.error-state .button{margin-top:12px}
.error-state{border-left:3px solid var(--accent)}
.loading{border:1px solid var(--line);border-radius:var(--radius);padding:36px 28px;min-height:330px;background:var(--paper)}
.loading div{height:18px;background:var(--surface);border-radius:4px;margin:15px 0;width:76%}
.loading div:first-child{width:48%;height:36px;margin-bottom:30px}
.loading div:last-child{width:55%}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;border-top:1px solid var(--line);margin-top:70px;font-size:11px;color:var(--muted)}
.footer p:first-child{font-family:"Space Grotesk",sans-serif;font-weight:500;color:var(--ink);font-size:13px}
dialog{border:1px solid var(--line);border-radius:var(--radius);padding:0;width:min(660px,calc(100% - 32px));max-height:calc(100dvh - 48px);background:var(--paper);color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(26,26,26,.42)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px;border-bottom:1px solid var(--line)}
.dialog-label{font-size:12px;color:var(--muted)}
#detail-content{padding:28px}
#detail-title{font-size:32px;line-height:1.2;margin:16px 0}
#detail-description{color:var(--muted);font-size:14px;margin:0 0 25px}
.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0}
.detail-meta dt{font-size:11px;color:var(--muted);margin-bottom:4px}
.detail-meta dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.destination{padding:16px;background:var(--surface);border-radius:var(--radius);margin:24px 0;overflow-wrap:anywhere}
.destination code{font:11px/1.8 "JetBrains Mono",monospace;word-break:break-word}
.detail-explainer{font-size:12px;color:var(--muted);margin:20px 0}
@media(prefers-reduced-motion:no-preference){.button,.text-button,a{transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease,transform 120ms ease}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1024px){.shell{width:calc(100% - 56px)}.catalog-layout{gap:28px;grid-template-columns:208px minmax(0,1fr)}.demo-body{grid-template-columns:1fr}.demo-aside{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.owner{margin-top:14px}.demo-title{max-width:none;font-size:30px}}
@media(max-width:767px){.shell{width:calc(100% - 32px)}.topbar{min-height:70px;gap:15px}.brand span{font-size:24px}.brand img{width:28px;height:28px}.product-label{display:none}.manual-link{font-size:11px}.page-heading{padding:32px 0 28px}.page-heading p{font-size:14px;max-width:33ch}.catalog-layout{display:grid;grid-template-columns:1fr;gap:25px}.filters{display:grid;grid-template-columns:1fr;gap:0}.filters input,.filters select{margin-bottom:16px}.filter-note{display:none}.result-heading{padding-bottom:14px}.demo-top{padding:16px 20px;gap:12px;align-items:flex-start}.category{font-size:11px;max-width:20ch}.status{font-size:10px}.demo-body{grid-template-columns:1fr;padding:25px 20px;gap:24px}.demo-title{font-size:30px;max-width:15ch}.demo-description{font-size:13px}.demo-bottom{padding:18px 20px;flex-direction:column;align-items:flex-start;gap:16px}.availability-note{max-width:none}.demo-actions{width:100%}.demo-actions .button{flex:1}.footer{margin-top:36px;padding:22px 0;font-size:10px;align-items:flex-start;flex-direction:column;gap:6px}dialog{max-height:calc(100dvh - 24px)}.dialog-top{padding:14px 20px}#detail-content{padding:20px}#detail-title{font-size:28px}.detail-meta{gap:18px}.empty-state,.error-state{padding:28px 20px}.environment-note{font-size:11px}}
/* Manual: native document, same brand, no extra runtime. */
.manual{max-width:820px;padding-bottom:40px}.manual h1{margin:40px 0 14px}.manual h2{font-size:26px;margin:38px 0 12px}.manual h3{font-size:19px;margin:24px 0 10px}.manual p,.manual li{font-size:14px;color:var(--muted);margin:10px 0}.manual pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;overflow:auto;font:12px/1.8 "JetBrains Mono",monospace}.manual code{font-family:"JetBrains Mono",monospace;font-size:12px}.manual strong{color:var(--ink)}.manual nav{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}