.ns-page{--bg:#070912;--panel:#0d1020cc;--line:#262d52;--glow:#7c5cff;--speed:#ff5d8f;--size:#ffb547;--sense:#4fd9ff;--food:#58e28a;--txt:#e8e6ff;--mut:#8b93b8;color:var(--txt);position:relative}
.ns-page *{box-sizing:border-box}.ns-page [hidden]{display:none!important}
.c-speed{color:var(--speed)}.c-size{color:var(--size)}.c-sense{color:var(--sense)}
/* Hero: deep-space lab look, different from the regular tool pages. */
.ns-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:30px 32px;margin:14px 0;border-radius:24px;border:1px solid #2c2f5e;
 background:radial-gradient(circle at 85% 20%,#ff5d8f33,transparent 40%),radial-gradient(circle at 60% 120%,#4fd9ff2e,transparent 45%),radial-gradient(circle at 0 0,#7c5cff40,transparent 45%),#0a0c1b}
.ns-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none}
.ns-hero-copy{position:relative;max-width:760px}
.ns-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:#a6f0c6;padding:6px 10px;border:1px solid #58e28a55;border-radius:20px;background:#58e28a12}
.ns-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--food);box-shadow:0 0 10px var(--food);animation:nsPulse 1.6s infinite}
@keyframes nsPulse{50%{opacity:.25}}
.ns-hero h1{margin:14px 0 10px;font-size:40px;line-height:1.08;letter-spacing:-.02em;background:linear-gradient(92deg,#fff 10%,#c9b8ff 45%,#ff9cc0 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ns-hero p{margin:0;font-size:15px;line-height:1.7;color:#c0c4e0}
.ns-hero-stats{position:relative;display:flex;gap:10px}
.ns-hero-stats span{display:flex;flex-direction:column;align-items:center;min-width:86px;padding:10px 12px;border:1px solid #33396b;border-radius:14px;background:#0b0e20aa;font:600 10px ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ns-hero-stats b{font-size:24px;color:#fff;letter-spacing:0}
/* Presets */
.ns-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;margin-bottom:14px}
@media(max-width:640px){.ns-presets{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.ns-page .ns-preset{scroll-snap-align:start}}
.ns-page .ns-preset{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center;text-align:left;padding:12px 14px;min-height:0;border:1px solid #2a3060;border-radius:16px;background:linear-gradient(160deg,#141936,#0c0f22);color:var(--txt);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.ns-page .ns-preset:hover{transform:translateY(-2px);border-color:#6b5cff;box-shadow:0 8px 24px #3b2bff33}
.ns-page .ns-preset[aria-pressed=true]{border-color:#9d8bff;box-shadow:0 0 0 1px #9d8bff inset,0 0 22px #7c5cff44;background:linear-gradient(160deg,#211a4d,#0f1128)}
.ns-pi{grid-row:span 2;font-size:24px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff0c}
.ns-preset b{font-size:14px}.ns-preset small{font-size:11.5px;line-height:1.4;color:var(--mut)}
/* Lab layout */
.ns-lab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:14px;align-items:start}
.ns-stage{min-width:0}
.ns-canvas-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid #33397a;box-shadow:0 0 0 1px #000,0 20px 60px #0009,0 0 60px #5b3cff22;background:var(--bg)}
.ns-canvas-wrap canvas{display:block;width:100%;aspect-ratio:1;height:auto;cursor:crosshair}
.ns-hud{position:absolute;top:12px;display:flex;gap:8px;font-family:ui-monospace,Consolas,monospace;pointer-events:none}
.ns-hud-tl{left:12px}.ns-hud-tl div{display:flex;flex-direction:column;padding:6px 10px;border:1px solid #ffffff1c;border-radius:10px;background:#070912b8;backdrop-filter:blur(6px)}
.ns-hud small{font-size:9px;letter-spacing:.16em;color:var(--mut)}.ns-hud b{font-size:18px;color:#fff}
.ns-hud-tr{right:12px;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:auto;padding:6px 8px;border:1px solid #ffffff1c;border-radius:10px;background:#070912b8;backdrop-filter:blur(6px);font-size:10px;color:var(--mut)}
.ns-hud-tr label{letter-spacing:.12em;text-transform:uppercase}
.ns-ramp{display:flex;align-items:center;gap:6px}.ns-ramp i{width:90px;height:6px;border-radius:4px;background:linear-gradient(90deg,#2878ff,#50dcff,#be78ff,#ff50a0,#ffbe46)}
.ns-dayline{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff10}.ns-dayline i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7c5cff,#ff5d8f);box-shadow:0 0 10px #ff5d8f;transition:width .2s}
.ns-inspect{position:absolute;left:12px;bottom:14px;display:grid;grid-template-columns:repeat(3,auto);gap:6px 14px;padding:10px 34px 10px 12px;border:1px solid #ffffff26;border-radius:12px;background:#070912d9;backdrop-filter:blur(8px);font:12px ui-monospace,Consolas,monospace}
.ns-inspect>b{grid-column:1/-1;font-size:13px}.ns-page .ns-inspect>button{position:absolute;top:4px;right:4px;min-height:24px;width:24px;padding:0;border:0;background:none;color:#fff;font-size:16px}
.ns-ig{display:flex;flex-direction:column}.ns-ig i{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}.ns-ig em{font-style:normal;color:#fff}
.ns-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#070912cc;backdrop-filter:blur(3px);text-align:center;padding:20px}.ns-overlay b{font-size:24px}.ns-overlay p{color:#c0c4e0;max-width:380px}
/* Buttons & inputs */
.ns-page button{font:inherit;font-size:13px;line-height:1.2;min-height:36px;padding:7px 14px;border:1px solid #333b72;border-radius:11px;background:#13173a;color:var(--txt);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0}
.ns-page button:hover:not(:disabled){border-color:#7c6cff;background:#1c2150}
.ns-page .ns-go{background:linear-gradient(135deg,#7c5cff,#ff5d8f);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 18px #7c5cff55}
.ns-page .ns-go:hover:not(:disabled){filter:brightness(1.12);background:linear-gradient(135deg,#7c5cff,#ff5d8f)}
.ns-page .ns-ghost{background:transparent;font-size:12px;min-height:32px}
.ns-page button:focus-visible,.ns-page input:focus-visible,.ns-page select:focus-visible,.ns-page summary:focus-visible{outline:3px solid #b6a8ff;outline-offset:2px}
.ns-page select,.ns-page input[type=number],.ns-page input[type=text]{font:inherit;font-size:13px;min-height:36px;padding:6px 9px;color:#fff;background:#0a0d1f;border:1px solid #333b72;border-radius:10px;margin:0;width:100%}
.ns-hud-tr select{min-height:28px;padding:2px 6px;font-size:12px;width:auto}
.ns-page input[type=range]{accent-color:#9d7bff;width:100%;margin:0}
.ns-transport,.ns-view{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ns-transport{padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.ns-page #nsPlay{min-width:110px;font-size:14px}
.ns-ff{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}.ns-ff select{width:auto}
.ns-speed{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}.ns-speed input{width:110px}.ns-speed output{min-width:38px;color:#fff;font-family:ui-monospace,Consolas,monospace}
.ns-grow{flex:1}
.ns-tog{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#c8cbe6;cursor:pointer}.ns-tog input{accent-color:#9d7bff;width:16px;height:16px;margin:0}
.ns-status{min-height:18px;margin:8px 2px 0;font-size:12px;color:var(--mut)}.ns-status[data-error=true]{color:#ff9cb0}
/* Side panel */
.ns-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.ns-card{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#0f1328ee,#0a0d1ccc)}
.ns-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ns-card h2{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#cfd2f2}
.ns-key{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--mut)}.ns-key i{width:12px;height:3px;border-radius:2px;margin-left:6px}
.k-pop{background:#b892ff}.k-food{background:var(--food)}.k-birth{background:#fff8}.k-speed{background:var(--speed)}.k-size{background:var(--size)}.k-sense{background:var(--sense)}
.ns-chart{display:block;width:100%;height:150px}#nsChartScatter{height:190px}#nsChartHist{height:130px}
.ns-seg{display:flex;padding:2px;gap:2px;border:1px solid #333b72;border-radius:9px;background:#0a0d1f}.ns-page .ns-seg button{min-height:24px;padding:2px 9px;font-size:11px;border:0;background:transparent}.ns-page .ns-seg button[aria-checked=true]{background:#2b2466;color:#fff}
.ns-facts{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);font-size:12px}
.ns-facts dt{color:var(--mut)}.ns-facts dd{margin:0;text-align:right;font-family:ui-monospace,Consolas,monospace;color:#fff}
/* Settings */
.ns-settings{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 100% 0,#7c5cff1c,transparent 40%),#0b0e1f}
.ns-set-head h2{margin:0 0 4px;font-size:20px}.ns-set-head p{margin:0 0 12px;font-size:13px;color:var(--mut)}
.ns-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.ns-page .ns-tabs button{background:transparent}.ns-page .ns-tabs button[aria-selected=true]{background:#221c55;border-color:#9d8bff;color:#fff}
.ns-pan{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;align-items:end}
.ns-pan>label:not(.ns-tog){display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#c8cbe6}
.ns-range{display:flex;align-items:center;gap:8px}.ns-range output{min-width:48px;font:12px ui-monospace,Consolas,monospace;color:#fff}
.ns-note{grid-column:1/-1;margin:0;font-size:12px;line-height:1.6;color:var(--mut)}
.ns-gene{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #2a3060;border-radius:14px;background:#0f1330}.ns-gene b{font-size:15px}.ns-gene label:not(.ns-tog){display:flex;flex-direction:column;gap:5px;font-size:12px;color:#c8cbe6}.ns-gene small{font-size:11px;color:var(--mut);line-height:1.5}
.ns-formula{grid-column:1/-1;padding:14px 16px;border:1px dashed #4a4290;border-radius:14px;background:#120f2e;font:600 17px ui-monospace,Consolas,monospace;color:#fff}.ns-formula span{color:var(--mut);font-weight:400}
.ns-calc{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,140px)) 1fr;gap:10px;align-items:end;margin:0;padding:12px;border:1px solid #2a3060;border-radius:14px}
.ns-calc legend{font-size:12px;color:#cfd2f2;padding:0 6px}.ns-calc label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#c8cbe6}
.ns-calc-out{font-size:12.5px;line-height:1.5;color:#d9dcff;padding:8px 10px;border-radius:10px;background:#ffffff08}
.ns-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.ns-dirty{font-size:12px;color:#ffd27a}
.ns-how{margin-top:14px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:#0b0e1f}.ns-how summary{cursor:pointer;font-weight:600;font-size:14px}
.ns-how ol{padding-left:20px;line-height:1.75;font-size:13.5px;color:#c8cbe6}.ns-how p{font-size:12.5px;color:var(--mut);line-height:1.6}
@media(max-width:1000px){.ns-lab{grid-template-columns:1fr}.ns-side{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
@media(max-width:640px){.ns-hero{padding:22px 18px}.ns-hero h1{font-size:30px}.ns-hero-stats span{min-width:0;flex:1}.ns-hero-stats{width:100%}
 .ns-hud b{font-size:14px}.ns-hud-tl div{padding:4px 7px}.ns-ramp i{width:50px}.ns-inspect{grid-template-columns:repeat(2,auto);right:12px}
 .ns-speed input{width:80px}.ns-calc{grid-template-columns:repeat(3,1fr)}.ns-calc output{grid-column:1/-1}
 .ns-page select,.ns-page input[type=number],.ns-page input[type=text]{font-size:16px}.ns-hud-tr select{font-size:12px}}
@media(prefers-reduced-motion:reduce){.ns-eyebrow i{animation:none}.ns-page .ns-preset{transition:none}}
/* ===== App layout v3: one lab section (arena + tabbed panel) that can go full screen ===== */
.ns-app{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:12px;height:clamp(560px,calc(100vh - 32px),920px);padding:12px;border:1px solid #2c2f5e;border-radius:24px;background:radial-gradient(circle at 30% 0,#7c5cff14,transparent 50%),#05070f;box-shadow:0 30px 80px #0008}
.ns-stage{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.ns-page .ns-canvas-wrap{flex:1;min-height:0;display:grid;place-items:center;border-radius:18px}
.ns-page .ns-canvas-wrap canvas{width:auto;height:auto;aspect-ratio:auto;border-radius:8px}
.ns-page .ns-transport{margin:0;padding:8px;gap:8px}.ns-page .ns-transport #nsReset{margin-left:auto}
.ns-speed span{white-space:nowrap}
.ns-page .ns-icon{min-height:30px;padding:4px 10px;font-size:12px;background:#0b0e20d9}
.ns-hud-tr{flex-direction:row;align-items:center;gap:10px}
.ns-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--line);border-radius:18px;background:#0a0d1c;overflow:hidden}
.ns-ptabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);background:#080a17}
.ns-page .ns-ptabs button{flex-direction:column;gap:2px;min-height:54px;padding:6px 2px;border:0;border-radius:0;background:transparent;font-size:11.5px;color:var(--mut);border-bottom:2px solid transparent}
.ns-ptabs button span{font-size:17px}
.ns-page .ns-ptabs button[aria-selected=true]{color:#fff;background:#151a3a;border-bottom-color:#b39cff}
.ns-ppanes{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.ns-pp{display:flex;flex-direction:column;gap:10px;padding:12px}
.ns-page .ns-pp .ns-status{margin:0;padding:8px 10px;border-radius:10px;background:#ffffff08;font-size:12.5px;color:#c8cbe6;min-height:36px}
.ns-tip{margin:0;font-size:11.5px;color:var(--mut);line-height:1.8}.ns-tip kbd{font:11px ui-monospace,Consolas,monospace;padding:1px 6px;border:1px solid #39407a;border-radius:5px;background:#12163a;color:#fff}
.ns-pp .ns-card{padding:10px 12px}
#nsChartMini{height:120px}
.ns-pp .ns-presets{display:flex;flex-direction:column;gap:8px;margin:0}
.ns-pp .ns-subtabs{margin:0}.ns-page .ns-pp .ns-subtabs button{min-height:30px;padding:4px 9px;font-size:12px}
.ns-pp .ns-pan{grid-template-columns:1fr 1fr;gap:10px}
.ns-pp .ns-gene{grid-column:1/-1}.ns-pp .ns-pan>label:has(.ns-range),.ns-pp .ns-pan>.ns-tog{grid-column:1/-1}
.ns-pp .ns-calc{grid-template-columns:repeat(3,1fr)}.ns-pp .ns-calc output{grid-column:1/-1}
.ns-pp .ns-formula{font-size:14px}
.ns-pp .ns-form-actions{position:sticky;bottom:-12px;margin:6px -12px -12px;padding:10px 12px;background:#0a0d1cf2;border-top:1px solid var(--line)}
.ns-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#c8cbe6}
.ns-pp h3{margin:6px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cfd2f2}
.ns-row{display:flex;gap:8px;flex-wrap:wrap}
.ns-page .ns-how{margin-top:14px}
/* Full screen (native API, or a fixed overlay where it is not available). */
.ns-app:fullscreen{height:100vh;width:100vw;border-radius:0;border:0;padding:12px}
.ns-app.is-max{position:fixed;inset:0;z-index:10000;height:100dvh;width:100vw;border-radius:0;border:0}
.ns-app:fullscreen .ns-icon span,.ns-app.is-max .ns-icon span{display:none}
@media(max-width:1000px){.ns-app{grid-template-columns:1fr;height:auto}.ns-page .ns-canvas-wrap{flex:none;aspect-ratio:1}.ns-panel{min-height:420px}.ns-ppanes{max-height:70vh}
 .ns-app.is-max,.ns-app:fullscreen{grid-template-rows:minmax(0,1fr) minmax(0,42%);height:100dvh;overflow:hidden}.ns-app.is-max .ns-canvas-wrap,.ns-app:fullscreen .ns-canvas-wrap{flex:1;aspect-ratio:auto}.ns-app.is-max .ns-panel,.ns-app:fullscreen .ns-panel{min-height:0}.ns-app.is-max .ns-ppanes,.ns-app:fullscreen .ns-ppanes{max-height:none}}
@media(max-width:640px){.ns-app{padding:8px;gap:8px;border-radius:18px}.ns-page .ns-ptabs button{font-size:10.5px;min-height:48px}.ns-icon span{display:none}.ns-speed span{display:none}.ns-pp .ns-pan{grid-template-columns:1fr}}

/* ===== v5: HUD bar above the arena (never covers creatures), arena box ===== */
.ns-page .ns-canvas-wrap{display:flex;flex-direction:column;align-items:stretch;place-items:initial;background:radial-gradient(circle at 50% 40%,#16201a,#05070f 75%)}
.ns-hudbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px 0;flex:none}
.ns-page .ns-hudbar .ns-hud{position:static;pointer-events:auto}
.ns-hudbar .ns-hud-tl div{padding:4px 10px}.ns-hudbar .ns-hud b{font-size:16px}
.ns-arena{flex:1;min-height:0;display:grid;place-items:center;padding:8px}
.ns-arena canvas{display:block;border-radius:10px;box-shadow:0 10px 40px #000a;cursor:crosshair}
.ns-page .ns-inspect{bottom:16px}
@media(max-width:1000px){.ns-page .ns-canvas-wrap{aspect-ratio:auto}.ns-arena{aspect-ratio:1;flex:none}.ns-app.is-max .ns-arena,.ns-app:fullscreen .ns-arena{aspect-ratio:auto;flex:1}}
@media(max-width:640px){.ns-hudbar{padding:6px 6px 0}.ns-hudbar .ns-hud b{font-size:13px}.ns-hudbar .ns-hud small{font-size:8px}.ns-hudbar .ns-hud-tl div{padding:3px 6px}.ns-hudbar .ns-hud-tr{padding:4px 6px;gap:6px}.ns-arena{padding:4px}}