/* Optical workbench: an exploratory object and the existing useful directory. */
:root,html[data-theme=light] { --neural-bg:#edf2f7; --neural-panel:#ffffff; --neural-ink:#101a28; --neural-muted:#617487; --neural-line:#ccd7e2; --neural-accent:#2865e8; --neural-glow:#c5dbf4; --neural-wash:#dce9ff; }
html[data-theme=dark] { --neural-bg:#0a121e; --neural-panel:#121f30; --neural-ink:#edf5ff; --neural-muted:#9eb2c8; --neural-line:#2c3e53; --neural-accent:#90b9ff; --neural-glow:#223b5b; --neural-wash:#172e4c; }
body.neural-app { --bg:var(--neural-bg); --panel:var(--neural-panel); --line:var(--neural-line); --muted:var(--neural-muted); --green:var(--neural-accent); background:var(--neural-bg); color:var(--neural-ink); font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
.neural-app *, .neural-app *::before,.neural-app *::after { box-sizing:border-box; }
.neural-app button,.neural-app a { touch-action:manipulation; }
.neural-app :is(button,a,input,summary,textarea):focus-visible { outline:2px solid var(--neural-accent); outline-offset:4px; }
.neural-app [hidden] { display:none!important; }
.neural-app .sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.neural-app .skip-link { position:fixed; z-index:100; left:20px; top:-70px; padding:10px 16px; background:var(--neural-ink); color:var(--neural-bg); }
.neural-app .skip-link:focus { top:15px; }
.neural-app .sidebar { position:fixed; inset:0 auto 0 0; width:92px; padding:26px 12px 14px; background:var(--neural-bg); border-right:1px solid var(--neural-line); display:flex; flex-direction:column; z-index:30; overflow-y:auto; scrollbar-width:thin; }
.neural-app .brand { display:flex; justify-content:center; gap:0; text-decoration:none; }
.neural-app .brand > span:not(.brand-mark) { display:none; }
.neural-app .brand .brand-mark { width:42px; height:42px; border-radius:14px; font-size:24px!important; background:var(--neural-ink)!important; color:var(--neural-bg)!important; font-weight:750; }
.neural-app .sidebar > .label,.neural-app .sidebar .side-note p,.neural-app .sidebar .foot { display:none; }
.neural-app .sidebar nav { display:flex; flex-direction:column; gap:5px; margin-top:32px; }
.neural-app .sidebar nav button { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:100%; min-height:57px; padding:9px 3px; font-size:10px; line-height:1.4; border:0!important; border-radius:11px; background:transparent!important; color:var(--neural-muted)!important; }
.neural-app .sidebar nav button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.neural-app .sidebar nav button.active,.neural-app .sidebar nav button:hover { background:var(--neural-wash)!important; color:var(--neural-accent)!important; }
.neural-app .side-note { margin-top:auto; padding:16px 0 0; border-top:1px solid var(--neural-line); }
.neural-app .side-note a { display:block; padding:6px 0; font-size:9px; text-align:center; color:var(--neural-muted); }
.neural-app main { position:relative; margin-left:92px; max-width:none; padding:0 5.5vw 30px; }
.neural-app main > header { position:relative; z-index:12; min-height:76px; height:76px; border-bottom:1px solid var(--neural-line); font-size:12px; color:var(--neural-muted); }
html[data-view=home] .neural-app main > header { position:absolute; inset:0 5.5vw auto; border-bottom:0; }
.neural-app header strong { color:var(--neural-ink); }
.neural-app .header-actions { display:flex; align-items:center; gap:8px; }
.neural-app header button { border:1px solid var(--neural-line)!important; border-radius:30px; min-height:36px; font-size:10px; padding:7px 12px; color:var(--neural-muted)!important; background:transparent!important; }
.neural-app #account { border-color:var(--neural-ink)!important; color:var(--neural-ink)!important; }
.neural-app #bookmark { display:none; }
.neural-hero { position:relative; isolation:isolate; min-height:740px; height:100svh; max-height:1000px; margin:0 -5.5vw; overflow:hidden; }
.neural-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 75% 42%,var(--neural-glow),transparent 49%); opacity:.7; }
.neural-app #home-intro { position:absolute; top:22%; left:5.5vw; width:44%; padding:0; z-index:4; }
.neural-app #home-intro h1 { font-family:inherit; color:var(--neural-ink); font-size:clamp(58px,6.1vw,96px); font-weight:800; line-height:1.18; letter-spacing:-.06em; margin:0 0 23px; }
.neural-app #home-intro > p { max-width:33ch; margin:0; color:var(--neural-muted); font-size:13px; line-height:1.9; }
.neural-app .home-meta { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:24px; color:var(--neural-muted); font-size:10px; }
.neural-app .home-meta span::before { content:none!important; }
.neural-app .home-meta strong { color:var(--neural-ink); font-weight:650; font-variant-numeric:tabular-nums; }
.neural-stage { position:absolute; right:0; top:12%; width:54%; height:530px; perspective:900px; isolation:isolate; touch-action:pan-y pinch-zoom; --core-x:0px; --core-y:0px; --core-turn:0deg; }
.neural-stage::before { content:""; position:absolute; inset:22% 12%; border:1px solid var(--neural-line); border-radius:50%; transform:rotate(-26deg) scaleY(.65); opacity:.6; pointer-events:none; }
.neural-stage::after { content:""; position:absolute; width:75%; height:1px; top:49%; left:12%; background:linear-gradient(90deg,transparent,var(--neural-line),transparent); pointer-events:none; }
.neural-core { position:absolute; z-index:2; width:100%; height:76%; left:0; top:10%; display:block; background:transparent; color:var(--neural-ink); border:0; cursor:grab; text-decoration:none; transform:translate3d(var(--core-x),var(--core-y),0) rotateY(var(--core-turn)); transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.neural-core img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; pointer-events:none; filter:drop-shadow(0 20px 24px #0d2c4922); }
.neural-core-label { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); padding:8px 17px; display:inline-flex; align-items:center; gap:12px; border:1px solid var(--neural-line); border-radius:30px; background:var(--neural-panel); color:var(--neural-ink); font-size:11px; white-space:nowrap; box-shadow:0 5px 20px #0b2b3f0c; }
.neural-core-label::after { content:"↗"; font-size:16px; }
.neural-core:hover .neural-core-label { border-color:var(--neural-accent); }
.neural-node { position:absolute; z-index:5; display:flex; flex-direction:column; gap:4px; min-width:118px; min-height:62px; padding:11px 15px; border:1px solid var(--neural-line); background:var(--neural-panel); border-radius:9px; color:var(--neural-ink); text-align:left; box-shadow:0 10px 30px #112e4d0a; }
.neural-node strong { font-size:12px; font-weight:650; white-space:nowrap; }
.neural-app button.neural-node { background:var(--neural-panel)!important; color:var(--neural-ink)!important; border-color:var(--neural-line); }
.neural-app button.neural-node.is-focused,.neural-app button.neural-node:hover { border-color:var(--neural-accent); }
.neural-node small { font-size:10px; color:var(--neural-muted); }
.neural-node.is-focused,.neural-node:hover { border-color:var(--neural-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--neural-accent) 10%,transparent); }
.neural-node[data-neural-kind=agent] { top:8%; right:8%; }
.neural-node[data-neural-kind=framework] { bottom:8%; right:3%; }
.neural-node[data-neural-kind=skill] { left:3%; top:39%; }
.neural-stage.is-dragging .neural-core { transition:none; cursor:grabbing; }
.neural-stage-caption { position:absolute; width:100%; bottom:-17px; text-align:center; margin:0; color:var(--neural-muted); font-size:10px; letter-spacing:.02em; }
.neural-prompts { position:absolute; left:5.5vw; top:var(--neural-prompts-top,595px); z-index:5; display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--neural-muted); font-size:10px; }
.neural-prompts button { padding:7px 12px; min-height:34px; border:1px solid var(--neural-line); border-radius:20px; color:var(--neural-muted); background:transparent; font-size:10px; }
.neural-prompts button:hover { border-color:var(--neural-accent); color:var(--neural-accent); }
.neural-app .neural-prompts button { background:transparent!important; color:var(--neural-muted)!important; }
.neural-app .neural-bottom button { background:transparent!important; color:var(--neural-ink)!important; }
.neural-bottom { position:absolute; left:5.5vw; bottom:39px; display:flex; gap:26px; align-items:center; z-index:5; }
.neural-bottom a,.neural-bottom button { min-height:40px; display:inline-flex; align-items:center; color:var(--neural-ink); border:0; background:transparent; padding:0; font-size:11px; }
.neural-bottom a { color:var(--neural-muted); }
.neural-bottom button::after { content:"↗"; margin-left:18px; font-size:17px; }
.neural-app .search { position:sticky; top:10px; z-index:8; min-height:60px; padding:14px 18px; margin:24px 0 0; border:1px solid var(--neural-line)!important; border-radius:13px; background:var(--neural-panel)!important; box-shadow:0 8px 24px #102a4307; }
html[data-view=home] .neural-app .search { position:absolute; width:43%; left:5.5vw; top:var(--neural-search-top,515px); min-height:64px; margin:0; }
.neural-app .search span { color:var(--neural-muted); }
.neural-app .search input { color:var(--neural-ink); font-size:14px; min-width:0; }
.neural-app .search input::placeholder { color:var(--neural-muted); }
.neural-app .search:focus-within { border-color:var(--neural-accent)!important; outline:2px solid color-mix(in srgb,var(--neural-accent) 25%,transparent); outline-offset:3px; }
.neural-app .search input:focus-visible { outline:none; }
.neural-app .search kbd { font-size:11px; color:var(--neural-muted); border:1px solid var(--neural-line); border-radius:4px; padding:2px 6px; }
.neural-app .section-heading { margin:24px 0 14px; align-items:baseline; }
.neural-app .section-heading h2 { font-weight:650; font-size:21px; letter-spacing:-.02em; }
.neural-app .section-heading > span { color:var(--neural-muted); font-size:11px; }
.neural-app #category-filter { padding:17px 0; margin:12px 0; border:0; border-bottom:1px solid var(--neural-line); background:transparent; }
.neural-app .category-row button[aria-pressed=true] { color:var(--neural-accent)!important; background:var(--neural-wash)!important; }
.neural-app .grid { gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.neural-app .card { border:1px solid var(--neural-line); border-radius:12px; background:var(--neural-panel); padding:22px; box-shadow:none; }
.neural-app .card:hover { border-color:var(--neural-accent); }
.neural-app .card .source-image { display:none; }
.neural-app .card h3 { font-size:21px; color:var(--neural-ink); letter-spacing:-.02em; }
.neural-app .card .monogram { border:0; border-radius:7px; background:var(--neural-wash); color:var(--neural-accent); font-size:11px; }
.neural-app .card p { color:var(--neural-muted); font-size:12px; line-height:1.9; }
.neural-app .card .recommended-for { color:var(--neural-accent); margin-bottom:18px; }
.neural-app .card .home-actions .primary { background:var(--neural-ink)!important; color:var(--neural-bg)!important; border-radius:7px; padding:9px 12px; font-size:10px; }
.neural-app .card .home-actions a:not(.primary),.neural-app .card .project-open,.neural-app .card > a { color:var(--neural-accent); font-size:11px; }
.neural-app .home-next > div { border-radius:12px; background:transparent; border-color:var(--neural-line); }
.neural-app .home-next h2 { font-size:18px; }
.neural-app dialog { background:var(--neural-panel); color:var(--neural-ink); border:1px solid var(--neural-line); border-radius:14px; }
.neural-app dialog::backdrop { background:#041021a8; backdrop-filter:blur(5px); }
.neural-app dialog .notice,.neural-app .detail-guide,.neural-app .recovery-panel { background:var(--neural-bg); color:var(--neural-muted); border-color:var(--neural-line); }
.neural-app dialog input,.neural-app dialog textarea { color:var(--neural-ink); background:var(--neural-bg); border-color:var(--neural-line); }
.neural-app dialog button,.neural-app .actions a { background:var(--neural-bg); color:var(--neural-ink); border-color:var(--neural-line); border-radius:6px; }
.neural-app #toast { background:var(--neural-ink); color:var(--neural-bg); }
.neural-app footer { color:var(--neural-muted); font-size:10px; border-color:var(--neural-line); }
html[data-view]:not([data-view=home]) .neural-hero { display:none; }
.neural-app.neural-ready #home-intro { animation:neural-arrive .75s cubic-bezier(.2,.7,.2,1) both; }
@keyframes neural-arrive { from { opacity:0; transform:translateY(17px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1550px) { .neural-stage { height:650px; top:13%; } }
@media(max-width:1100px) and (min-width:761px) { .neural-app .sidebar { width:78px; padding-inline:8px; } .neural-app main { margin-left:78px; padding-inline:4vw; } .neural-hero { margin-inline:-4vw; } .neural-app #home-intro { left:4vw; top:23%; width:47%; } .neural-app #home-intro h1 { font-size:57px; } .neural-stage { width:51%; top:15%; height:470px; right:-1%; } .neural-node { min-width:100px; padding:10px; } .neural-node strong { font-size:10px; } .neural-node small { font-size:9px; } html[data-view=home] .neural-app .search { left:4vw; width:43%; } .neural-prompts,.neural-bottom { left:4vw; } .neural-prompts { gap:5px; } .neural-prompts button { padding-inline:9px; } .neural-app .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .neural-app .sidebar { position:relative; inset:auto; width:100%; padding:18px 20px 8px; border-right:0; border-bottom:1px solid var(--neural-line); }
 .neural-app .brand { justify-content:flex-start; gap:10px; } .neural-app .brand > span:not(.brand-mark) { display:block; font-size:20px; } .neural-app .brand .brand-mark { width:34px; height:34px; font-size:21px!important; border-radius:10px; } .neural-app .brand small { display:block; color:var(--neural-muted); font-size:8px; }
 .neural-app .sidebar nav { flex-direction:row; overflow-x:auto; gap:4px; margin:15px -3px 0; scrollbar-width:thin; padding-bottom:3px; }
 .neural-app .sidebar nav button { flex:0 0 auto; width:auto; min-height:37px; padding:8px 11px; font-size:10px; flex-direction:row; gap:6px; white-space:nowrap; border-radius:7px; }
 .neural-app .sidebar nav button svg { width:14px; height:14px; } .neural-app .side-note { display:none; }
 .neural-app main { margin-left:0; padding:0 22px 22px; }
 .neural-app main > header { min-height:55px; height:55px; font-size:10px; gap:8px; }
 html[data-view=home] .neural-app main > header { inset:0 22px auto; }
 .neural-app .header-actions { gap:5px; } .neural-app header button { font-size:9px; min-height:32px; padding:6px 9px; }
 .neural-hero { margin:0 -22px; min-height:var(--neural-mobile-h,890px); height:auto; max-height:none; }
 .neural-app #home-intro { top:88px; left:26px; width:calc(100% - 52px); }
 .neural-app #home-intro h1 { font-size:clamp(51px,13vw,74px); line-height:1.15; margin-bottom:17px; }
 .neural-app #home-intro > p { font-size:12px; max-width:none; } .neural-app .home-meta { margin-top:17px; gap:12px; font-size:9px; }
 html[data-view=home] .neural-app .search { top:var(--neural-search-top,310px); left:26px; width:calc(100% - 52px); min-height:59px; padding:12px 14px; }
 .neural-app .search input { font-size:16px; } .neural-prompts { top:var(--neural-prompts-top,387px); left:26px; gap:7px; } .neural-prompts button { font-size:10px; min-height:33px; padding:7px 11px; }
 .neural-stage { top:var(--neural-stage-top,440px); right:0; width:100%; height:330px; } .neural-node { min-width:98px; min-height:56px; padding:9px 11px; } .neural-node strong { font-size:10px; } .neural-node small { font-size:9px; }
 .neural-node[data-neural-kind=agent] { top:4%; right:6%; } .neural-node[data-neural-kind=framework] { right:3%; bottom:8%; } .neural-node[data-neural-kind=skill] { left:3%; top:35%; }
 .neural-stage-caption { bottom:-14px; font-size:9px; } .neural-core-label { font-size:10px; }
 .neural-bottom { left:26px; bottom:19px; gap:25px; } .neural-bottom a,.neural-bottom button { font-size:11px; }
 .neural-app .grid { grid-template-columns:1fr; gap:15px; } .neural-app .card { padding:20px; } .neural-app .home-next { grid-template-columns:1fr; } .neural-app .section-heading h2 { font-size:18px; }
 .neural-app .search { margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) { .neural-app *, .neural-app *::before,.neural-app *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .neural-core { transform:none; } }