/* NEURAL NEXUS — self-hosted, real-time WebGL ecosystem. */
.nexus-intro { padding-top:65px; padding-bottom:45px; }
.nexus-intro .section-heading { margin-bottom:38px; }
.nexus-intro .section-heading h1 { font-size:clamp(56px,6vw,94px); }
.nexus-intro .section-heading>p { font-size:17px; max-width:350px; }
.nexus-shell { position:relative; border:1px solid #394333; background:#090e0e; isolation:isolate; box-shadow:0 30px 120px #0008; }
.nexus-topline { height:57px; padding:0 25px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #2a3530; background:#101610; font:10px/1.5 var(--mono); letter-spacing:.08em; color:#929f93; }
.nexus-topline>span:first-child { color:var(--yellow); }
.nexus-topline i { display:inline-block; width:5px; height:5px; margin-right:9px; background:var(--yellow); box-shadow:0 0 12px #efff38aa; }
#nexus-status { color:#96cfc4; font-size:9px; text-align:center; }
.nexus-workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; }
.nexus-viewport { position:relative; height:670px; min-width:0; overflow:hidden; background:radial-gradient(ellipse at 45% 42%,#18312e65,transparent 60%),linear-gradient(135deg,#111b18,#060a0c 72%); }
#nexus-canvas { position:absolute; inset:0; width:100%; height:100%; outline-offset:-4px; opacity:0; transition:opacity 1s; cursor:grab; touch-action:pan-y; }
#nexus-canvas:active { cursor:grabbing; }
.nexus-shell[data-render-state="ready"] #nexus-canvas { opacity:1; }
.nexus-shell[data-render-state="ready"] .nexus-fallback { display:none; }
.nexus-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; z-index:1; background:radial-gradient(ellipse at 50% 45%,#263b1f66,transparent 65%); }
.fallback-core { width:160px; height:160px; border:1px solid #83963d; display:flex; align-items:center; justify-content:center; color:var(--yellow); font:48px var(--display); border-radius:50%; outline:1px dashed #617a3544; outline-offset:22px; margin-bottom:55px; }
.fallback-core>span { font:30px var(--body); margin:0 8px; }
.nexus-fallback p { font-size:18px; color:#d3ddd0; max-width:390px; }
.nexus-fallback small { font-size:14px; color:#97a58f; margin-top:10px; }
.nexus-labels { position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; opacity:0; transition:opacity .7s; }
.nexus-shell[data-render-state="ready"] .nexus-labels { opacity:1; }
.scene-label { position:absolute; left:0; top:0; transform:translate(-50%,-50%); background:#071211bb; border:1px solid #4d86805c; color:#b2d6d1; font:500 14px/1.25 var(--display); text-transform:uppercase; letter-spacing:.045em; padding:9px 12px; pointer-events:auto; min-height:38px; white-space:nowrap; transition:color .2s,border-color .2s,background .2s; }
.scene-label small { color:#81a39d; font:9px var(--mono); padding-right:7px; vertical-align:2px; }
.scene-label.active { color:var(--yellow); border-color:#d5e63eaa; background:#1f2a17ed; box-shadow:0 0 25px #d2e74715; }
.scene-label.active small { color:var(--yellow); }
.scene-label:hover { color:#fff; background:#213831ef; border-color:#84d9d3; }
.nexus-core-tag { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; z-index:2; opacity:0; white-space:nowrap; }
.nexus-shell[data-render-state="ready"] .nexus-core-tag { opacity:1; }
.nexus-core-tag span { display:block; font:7px/1.7 var(--mono); letter-spacing:.14em; color:#a7b99c; }
.nexus-core-tag b { display:block; font:500 23px/1.4 var(--display); color:var(--yellow); letter-spacing:.12em; text-shadow:0 0 20px #efff3844; }
.nexus-corner { position:absolute; pointer-events:none; width:32px; height:32px; z-index:3; opacity:.55; }
.corner-tl { top:20px; left:20px; border-top:1px solid var(--yellow); border-left:1px solid var(--yellow); }
.corner-br { bottom:45px; right:20px; border-bottom:1px solid var(--cyan); border-right:1px solid var(--cyan); }
.scene-caption { position:absolute; left:24px; right:24px; bottom:17px; display:flex; justify-content:space-between; font:7px/1.4 var(--mono); letter-spacing:.09em; color:#748b7e; pointer-events:none; z-index:3; }
.nexus-inspector { min-height:0; overflow-y:auto; border-left:1px solid #324032; padding:28px; background:linear-gradient(155deg,#1b251680,#0c1210 70%); display:flex; flex-direction:column; justify-content:space-between; }
.nexus-inspector .network-panel { display:block; }
.inspector-id { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#a6b59a; font:9px/1.7 var(--mono); letter-spacing:.06em; }
.inspector-id>span { max-width:130px; }
.inspector-id b { font:500 61px/1 var(--display); color:transparent; -webkit-text-stroke:1px #526438; }
.inspector-connection { margin:40px 0 24px; display:flex; align-items:center; gap:9px; color:var(--yellow); font:11px/1.7 var(--mono); }
.inspector-connection>span:last-child { margin-left:auto; font-size:19px; }
.connection-dot { width:5px; height:5px; background:var(--yellow); flex-shrink:0; }
.nexus-inspector h2 { font:500 32px/1.15 var(--display); text-transform:uppercase; letter-spacing:-.02em; color:var(--yellow); overflow-wrap:anywhere; }
.nexus-inspector h3 { font:600 17px/1.5 var(--body); margin-top:17px; }
.nexus-inspector p { color:#b8c3b5; font:16px/1.8 var(--body); margin-top:18px; }
.nexus-inspector .button { margin-top:30px; padding:16px; width:100%; font-size:12px; gap:15px; }
.nexus-pulse-state { border-top:1px solid #34412e; margin-top:25px; padding-top:18px; color:#829877; font:11px/1.75 var(--mono); min-height:58px; }
.nexus-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-top:1px solid #2a3530; background:#0d1411; }
.nexus-toolbar p { font:12px/1.7 var(--body); color:#ccd4c7; }
.nexus-toolbar small { display:block; font-size:10px; color:#7f927e; margin-top:3px; }
.mobile-gesture { display:none; }
.scene-controls { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.scene-controls button { min-width:44px; height:44px; padding:0 12px; border:1px solid #3d4d39; color:#baccae; background:#121c14; font:20px/1 var(--body); display:flex; gap:7px; align-items:center; justify-content:center; }
.scene-controls button>span { font:600 11px var(--body); }
.scene-controls button:hover:not(:disabled) { border-color:var(--yellow); color:var(--yellow); }
.scene-controls button:disabled { opacity:.4; cursor:default; }
.scene-controls .pulse-action { background:var(--yellow); border-color:var(--yellow); color:#16200b; }
.scene-controls .pulse-action:hover:not(:disabled) { background:#fff; color:#16200b; }
.nexus-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid #34402c; }
.nexus-tab { text-align:left; background:#111711; padding:19px 16px; border-right:1px solid #2e382a; position:relative; min-height:88px; transition:background .2s; }
.nexus-tab:last-child { border-right:0; }
.nexus-tab>span { display:block; font:10px var(--mono); color:#859a7b; margin-bottom:8px; }
.nexus-tab strong { font:500 17px/1.15 var(--display); color:#bccbb4; letter-spacing:.03em; text-transform:uppercase; }
.nexus-tab i { position:absolute; top:16px; right:14px; color:#576b4a; font-style:normal; }
.nexus-tab.active { background:#28341a; box-shadow:inset 0 3px var(--yellow); }
.nexus-tab.active strong,.nexus-tab.active>span,.nexus-tab.active i { color:var(--yellow); }
.nexus-tab:hover { background:#243123; }
.nexus-caption { color:#8a9b89; font-size:12px; line-height:1.8; margin-top:20px; max-width:960px; }
.nexus-noscript { padding:25px; color:#d4d8b6; }
.nexus-noscript a { text-decoration:underline; }
.nexus-intro~.principles .principle-list p { font-size:16px; }
@media(min-width:1700px) { .nexus-workspace { grid-template-columns:minmax(0,1fr) 340px; } .nexus-viewport { height:760px; } .nexus-inspector { padding:34px; } .nexus-inspector p { font-size:18px; } }
@media(max-width:1150px) { .nexus-workspace { grid-template-columns:minmax(0,1fr) 285px; } .nexus-viewport { height:620px; } .nexus-inspector { padding:24px; } .nexus-inspector h2 { font-size:32px; } .inspector-connection { margin-top:28px; } .nexus-inspector p { font-size:15px; } .nexus-tab { padding:18px 13px; } .nexus-tab strong { font-size:15px; } .nexus-toolbar { flex-wrap:wrap; } .nexus-toolbar p { flex:1; min-width:280px; } }
@media(max-width:1000px) { .nexus-workspace { grid-template-columns:1fr; } .nexus-viewport { height:650px; } .nexus-inspector { border-left:0; border-top:1px solid #33432d; padding:27px 30px; display:block; } .nexus-inspector .network-panel { display:grid; grid-template-columns:1fr 1.5fr; gap:0 35px; } .inspector-id { grid-column:1; grid-row:1; justify-content:start; gap:25px; } .inspector-id b { font-size:42px; } .inspector-connection { grid-column:1; margin:20px 0 15px; } .nexus-inspector h2 { grid-column:1; } .nexus-inspector h3 { grid-column:1; margin-top:12px; } .nexus-inspector p { grid-column:2; grid-row:1/4; margin-top:0; font-size:17px; } .nexus-inspector .button { grid-column:2; grid-row:4; margin-top:20px; width:100%; } .nexus-pulse-state { font-size:11px; min-height:0; } .nexus-intro .section-heading>p { font-size:16px; } }
@media(max-width:600px) { .nexus-intro { padding:45px 4vw 35px; } .nexus-intro>.eyebrow,.nexus-intro>.section-heading { margin-left:2vw; margin-right:2vw; } .nexus-intro .section-heading h1 { font-size:55px; } .nexus-intro .section-heading>p { font-size:16px; line-height:1.8; } .nexus-topline { padding:0 15px; height:50px; gap:10px; font-size:8px; letter-spacing:.03em; } .nexus-topline>span:last-child { display:none; } #nexus-status { font-size:7px; } .nexus-viewport { height:510px; } .nexus-corner { width:22px; height:22px; } .corner-tl { left:12px; top:14px; } .corner-br { right:12px; bottom:36px; } .scene-label { padding:7px 8px; font-size:13px; letter-spacing:0; min-height:44px; } .scene-label small { font-size:8px; padding-right:4px; } .scene-caption { left:13px; right:13px; bottom:13px; font-size:6px; letter-spacing:0; } .nexus-core-tag b { font-size:19px; letter-spacing:.08em; } .nexus-core-tag span { font-size:5px; } .nexus-inspector { padding:25px 22px; } .nexus-inspector .network-panel { display:block; } .inspector-id { justify-content:space-between; font-size:9px; } .inspector-id>span { max-width:none; } .inspector-id b { font-size:42px; } .inspector-connection { margin-top:22px; margin-bottom:17px; font-size:11px; } .nexus-inspector h2 { font-size:38px; } .nexus-inspector h3 { font-size:18px; } .nexus-inspector p { font-size:17px; line-height:1.8; margin-top:17px; } .nexus-inspector .button { margin-top:22px; font-size:13px; } .nexus-toolbar { padding:20px 16px; gap:17px; } .nexus-toolbar p { font-size:12px; min-width:0; flex:auto; width:100%; } .nexus-toolbar small { font-size:10px; margin-top:6px; } .desktop-gesture { display:none; } .mobile-gesture { display:inline; } .scene-controls { width:100%; gap:6px; flex-wrap:wrap; } .scene-controls button { padding:0 11px; min-width:42px; } .scene-controls button>span { font-size:11px; } #nexus-pause { flex:1; } .nexus-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .nexus-tab { padding:16px 12px; min-height:85px; border-bottom:1px solid #2e382a; } .nexus-tab:nth-child(2n) { border-right:0; } .nexus-tab:nth-child(n+5) { border-bottom:0; } .nexus-tab strong { font-size:16px; letter-spacing:0; } .nexus-tab>span { font-size:9px; } .nexus-caption { margin-left:2vw; margin-right:2vw; font-size:12px; } .nexus-fallback { padding:25px; } .nexus-fallback p { font-size:16px; } .nexus-intro~.principles .principle-list p { font-size:15px; } }
.nexus-shell:fullscreen { width:100vw; height:100vh; display:flex; flex-direction:column; overflow:auto; }
.nexus-shell:fullscreen .nexus-topline,.nexus-shell:fullscreen .nexus-toolbar,.nexus-shell:fullscreen .nexus-tabs { flex-shrink:0; }
.nexus-shell:fullscreen .nexus-workspace { flex:1; min-height:450px; }
.nexus-shell:fullscreen .nexus-viewport { height:100%; min-height:450px; }
@media(max-width:600px) { #nexus-fullscreen { display:none; } }
@media(max-width:1000px) { .nexus-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#2e382a; } .nexus-tab { border:0!important; } }
@media(max-width:600px) { .nexus-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:360px) { .nexus-inspector h2 { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { #nexus-canvas,.nexus-labels { transition:none; } }