@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --navy-50:#EEF2FB; --navy-100:#D6E0F5; --navy-200:#AEC1EA; --navy-300:#7E9BDB;
  --navy-400:#4F72C9; --navy-500:#2E51AE; --navy-600:#1E3A8A; --navy-700:#172E6E;
  --navy-800:#112152; --navy-900:#0A1636; --navy-950:#060E24;
  --lime-50:#F5FCE0; --lime-100:#E8F9B8; --lime-200:#D8F585; --lime-300:#C6F135;
  --lime-400:#B4E01E; --lime-500:#97BE14; --lime-600:#74940F;
  --slate-0:#FFFFFF; --slate-25:#FAFBFD; --slate-50:#F4F6FB; --slate-100:#E9EDF5;
  --slate-200:#D8DEEB; --slate-300:#BAC3D6; --slate-400:#8B96AD; --slate-500:#626C82;
  --slate-600:#475065; --slate-700:#333B4E; --slate-800:#1F2637; --slate-900:#121828; --slate-950:#0A0E1A;
  --bg-base:var(--slate-25); --bg-subtle:var(--slate-50); --bg-inset:var(--slate-100);
  --surface-card:var(--slate-0); --surface-raised:var(--slate-0);
  --border:var(--slate-100); --border-strong:var(--slate-200);
  --text-primary:var(--slate-900); --text-secondary:var(--slate-600); --text-muted:var(--slate-400);
  --brand:var(--navy-600); --brand-hover:var(--navy-700); --accent:var(--lime-300); --accent-hover:var(--lime-400);
  --danger:#E5484D;
  --gradient-spectrum:linear-gradient(90deg,#FF4B24 0%,#FFA51F 15%,#F7DC2E 30%,#8FD41F 45%,#38BDF8 62%,#2456E6 78%,#1FA84C 92%,#8FD41F 100%);
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(10,22,54,.08),0 1px 2px rgba(10,22,54,.04);
  --shadow-lg:0 12px 28px rgba(10,22,54,.14),0 4px 8px rgba(10,22,54,.06);
  --shadow-focus:0 0 0 3px rgba(79,114,201,.35);
  --panel:color-mix(in srgb,var(--surface-card) 94%,transparent);
  --panel-2:var(--bg-subtle); --line:var(--border); --line-strong:var(--border-strong);
  --text:var(--text-primary); --muted:var(--text-secondary);
  color-scheme:light;
}

[data-theme="dark"] {
  --bg-base:var(--slate-950); --bg-subtle:var(--slate-900); --bg-inset:#0F1524;
  --surface-card:#151C2E; --surface-raised:#1C2438;
  --border:#232C40; --border-strong:#333B4E;
  --text-primary:var(--slate-50); --text-secondary:var(--slate-300); --text-muted:var(--slate-400);
  --brand:var(--navy-400); --brand-hover:var(--navy-300); --accent:var(--lime-300); --accent-hover:var(--lime-200);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 12px 28px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.35);
  --shadow-focus:0 0 0 3px rgba(126,155,219,.45);
  color-scheme:dark;
}

html,body { background:var(--bg-base); color:var(--text-primary); }
body {
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--navy-300) 15%,transparent),transparent 25rem),
    var(--bg-base);
  transition:background-color .2s ease,color .2s ease;
}
button,input,textarea,select { font-family:inherit; }
button { border-color:var(--border-strong); border-radius:var(--radius-pill); background:var(--surface-raised); color:var(--text-primary); font-weight:600; box-shadow:var(--shadow-sm); transition:background .15s ease,border-color .15s ease,transform .15s ease; }
button:hover { border-color:var(--navy-300); background:var(--bg-inset); }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--navy-950); box-shadow:0 6px 20px rgba(180,224,30,.28); }
button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.danger-ghost { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 32%,transparent); }
#app { grid-template-rows:82px 1fr; position:relative; }
.spectrum-ribbon { position:fixed; inset:0 0 auto; height:3px; z-index:20; background:var(--gradient-spectrum); background-size:200% 100%; animation:spectrum-pan 12s linear infinite; }
@keyframes spectrum-pan { to { background-position:200% 0; } }
.topbar { padding:0 22px; border-color:var(--border); background:color-mix(in srgb,var(--bg-base) 86%,transparent); backdrop-filter:saturate(140%) blur(14px); }
.brand-lockup { display:flex; align-items:center; min-width:0; gap:16px; }
.brand-logo { display:block; width:auto; height:35px; flex:none; filter:drop-shadow(0 4px 7px rgba(10,22,54,.12)); }
.brand-divider { width:1px; height:35px; background:var(--border-strong); }
.topbar h1,.panel-heading h2 { font-family:var(--font-display); color:var(--text-primary); }
.topbar h1 { font-size:19px; }
.eyebrow { color:var(--brand); letter-spacing:.15em; }
.badge { color:var(--navy-700); background:var(--lime-50); border-color:var(--lime-200); }
[data-theme="dark"] .badge { color:var(--lime-300); background:#1E2A10; border-color:#344418; }
.top-actions { align-items:center; }
.theme-toggle { width:36px; height:36px; padding:0; display:grid; place-items:center; font-size:17px; }
.workspace { gap:12px; padding:12px; background:transparent; }
.panel { border:1px solid var(--border)!important; border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow-lg); }
.panel-heading { min-height:68px; }
.count { background:var(--bg-inset); color:var(--text-secondary); font-weight:700; }
.layer { border-radius:var(--radius-md); }
.layer:hover { background:var(--bg-subtle); }
.layer.selected { border-color:var(--navy-300); background:var(--navy-50); box-shadow:inset 3px 0 0 var(--accent); }
[data-theme="dark"] .layer.selected { background:#15234A; }
.visibility { background:transparent; box-shadow:none; }
.layer-title,.object-name { font-family:var(--font-display); }
.section-title { color:var(--text-secondary); }
.control-row output { color:var(--brand); font-family:var(--font-mono); font-weight:700; }
input[type=range],.toggle-row input { accent-color:var(--brand); }
.viewport-shell { border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.proxy-notice { top:14px; border-color:rgba(198,241,53,.55); background:rgba(10,22,54,.82); border-radius:var(--radius-pill); color:var(--lime-200); box-shadow:0 6px 20px rgba(10,22,54,.25); }
.mode-bar { gap:6px; }
.mode { border-radius:var(--radius-pill); }
.mode.active { background:var(--navy-50); border-color:var(--navy-300); color:var(--navy-700); }
[data-theme="dark"] .mode.active { background:#15234A; color:var(--navy-200); }
.number-grid input,.select-row select { background:var(--bg-inset); border-color:var(--border-strong); color:var(--text-primary); }
.command-section textarea { background:var(--navy-950); color:var(--lime-200); border-color:var(--navy-700); border-radius:var(--radius-md); font-family:var(--font-mono); }
.command-result { background:var(--bg-inset); color:var(--text-secondary); font-family:var(--font-mono); }

@media (max-width:980px) {
  .workspace { grid-template-columns:210px minmax(350px,1fr); }
  .inspector-panel { top:94px; bottom:12px; right:12px; }
}
@media (max-width:760px) {
  #app { grid-template-rows:74px 1fr; }
  .topbar { padding:0 12px; }
  .brand-logo { height:29px; }
  .brand-divider { height:29px; }
  .eyebrow { display:none; }
  .topbar h1 { font-size:15px; white-space:nowrap; }
  .badge { display:none; }
  .top-actions button:not(#resetScene):not(#themeToggle) { display:none; }
  .top-actions .theme-toggle { display:grid!important; }
  .workspace { grid-template-columns:1fr; padding:8px; gap:8px; }
  .inspector-panel { display:none; }
  .proxy-notice { max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:520px) {
  .brand-lockup { gap:9px; }
  .brand-logo { height:24px; }
  .brand-divider { display:none; }
  .topbar h1 { font-size:13px; }
  #resetScene { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .spectrum-ribbon { animation:none; }
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}