:root{color-scheme:light;--void:#f3f0e9;--ink:#fbfaf6;--ink-deep:#ebe7de;--line:#d3cec3;--line-strong:#9a9489;--text:#171715;--muted:#5d5a54;--muted-dim:#7c776f;--signal:#c64b32;--signal-ink:#fffaf5;--blue:#28597c;--violet:#6b5b79;--amber:#9a691d;--red:#a7352a;font:15px/1.5 "Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{min-width:320px;margin:0;background:var(--void);color:var(--text)}button,input,select{color:inherit;font:inherit}button{cursor:pointer;padding:8px 11px;border:1px solid var(--line-strong);border-radius:3px;background:#fffdfa;font-size:13px;font-weight:650}button:hover{border-color:var(--text)}button.primary{border-color:var(--signal);background:var(--signal);color:var(--signal-ink)}button.primary:hover{border-color:#9f3625;background:#9f3625}button:disabled{cursor:wait;opacity:.55}input,select{min-width:0;padding:9px 10px;border:1px solid var(--line-strong);border-radius:3px;background:#fffdfa}input:focus,button:focus-visible,select:focus,summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}input[type=checkbox]{accent-color:var(--signal)}h1,h2,h3,p{margin:0}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(3rem,5.8vw,5.8rem);font-weight:500;line-height:.87;letter-spacing:-.065em}h1 em{color:var(--signal);font-style:italic}h2{font-size:1.14rem;letter-spacing:-.025em}h3{font-size:1.05rem}p{color:var(--muted)}a{color:var(--blue);text-underline-offset:3px}
.app-shell{max-width:1480px;margin:0 auto;overflow:hidden}.site-header{padding:25px 30px 18px;border-bottom:1px solid var(--line);background:var(--ink)}.hero-stage{display:grid;grid-template-columns:minmax(0,1fr) 285px;min-height:190px;border-bottom:1px solid var(--line)}.hero-copy{padding-bottom:25px}.mast,.panelhead,.case-card-head,.task-card-head,.verdict-head,.story-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.brand{display:flex;gap:13px}.brand-mark{display:grid;grid-template-columns:repeat(3,1fr);width:36px;min-width:36px;height:36px;border:1px solid var(--text);color:var(--text);font:700 9px/1 Arial,sans-serif}.brand-mark span{display:grid;place-items:center;border-right:1px solid var(--line-strong)}.brand-mark span:last-child{border:0}.eyebrow,.panel-kicker,.readout-label,.stat-label,.stat-detail,.control-field,.form label,.badge,.legend,.process-rail li,.story-heading,.field b,.provenance-grid b,.story-metrics b,.result-status,.verdict-status small,.orbit-hud,footer{font-family:"Segoe UI",Arial,sans-serif;letter-spacing:.045em}.eyebrow,.panel-kicker{color:var(--signal);font-size:10px;font-weight:750;text-transform:uppercase}.eyebrow{margin:2px 0 12px}.system-readout{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.readout-label{color:var(--muted-dim);font-size:10px;font-weight:700;text-transform:uppercase;white-space:nowrap}.badge{display:inline-flex;align-items:center;gap:6px;min-height:23px;padding:4px 9px;border:1px solid var(--line-strong);border-radius:999px;color:var(--blue);font-size:10px;font-weight:700;text-transform:uppercase;white-space:nowrap}.badge:before{width:5px;height:5px;border-radius:50%;background:currentColor;content:""}.intro{max-width:510px;margin:22px 0 0 49px;color:var(--muted);font-size:15px}.header-note{align-self:end;margin:0 0 25px;padding:13px 0 13px 18px;border-left:2px solid var(--signal)}.header-note span{display:block;color:var(--muted-dim);font-size:11px}.header-note strong{display:block;margin:5px 0;font-size:16px;font-weight:650}.header-note p{font-size:12px;line-height:1.45}
.control-deck{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(230px,1.2fr) minmax(200px,1fr) auto;gap:12px;align-items:end;margin-top:17px}.control-field,.form label{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.025em}.control-field input,.control-field select{width:100%;font-size:13px}.process-rail{display:flex;gap:0;margin:18px 0 0;padding:0;overflow:hidden;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-rail li{flex:1;min-width:114px;padding:9px 12px;border-right:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:650}.process-rail li:last-child{border:0}.process-rail span{margin-right:7px;color:var(--signal)}.status{min-height:22px;margin-top:10px;color:var(--blue);font-size:12px}.error{color:var(--red)}
main{padding:22px 30px 34px}.stats{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:18px;overflow:hidden;border:1px solid var(--line)}.stat{display:flex;flex-direction:column;justify-content:space-between;min-height:88px;padding:13px 16px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat-label{color:var(--muted);font-size:10px;font-weight:650;text-transform:uppercase}.stat-detail{color:var(--muted-dim);font-size:10px}.stat strong{font-family:Georgia,"Times New Roman",serif;font-size:2rem;font-weight:500;line-height:1}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}.stack{display:flex;flex-direction:column;gap:18px}.panel{min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--ink)}.panelhead{min-height:66px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}.panelhead h2{margin-top:4px}.body{padding:16px}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.55}
.toolbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.toolbar input{height:34px;padding:6px 8px;font-size:12px}.toolbar button{padding:6px 8px;font-size:12px}.view-switcher{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:3px;background:var(--ink-deep)}.view-switcher button{border:0;border-radius:2px;color:var(--muted);background:transparent}.view-switcher button[aria-selected="true"]{color:var(--signal-ink);background:var(--signal)}.orbit-only{border-color:var(--blue)!important;color:var(--blue)}.orbit-only[aria-pressed="true"]{color:#fff;background:var(--blue)}.tool-divider{width:1px;align-self:stretch;margin:0 4px;background:var(--line)}.legend{display:flex;flex-wrap:wrap;gap:8px 15px;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600}.dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%}.green{background:var(--signal)}.violet{background:var(--violet)}.blue{background:var(--blue)}.amber{color:var(--amber)}.red{color:var(--red)}.event-key{margin-right:5px;color:var(--violet);font-size:16px}
.graphwrap{position:relative;min-height:500px;overflow:hidden;background:#eeebe4}.graph-surface{position:relative;min-height:500px}.graph-surface[hidden]{display:none}svg,#orbitCanvas{position:relative;display:block;width:100%;height:530px;touch-action:none;cursor:grab}svg:active,#orbitCanvas:active{cursor:grabbing}svg text{fill:#171715;font-family:"Segoe UI",Arial,sans-serif;paint-order:stroke;stroke:#eeebe4;stroke-width:3px}svg .edge-label{font-size:9px;font-weight:700;letter-spacing:.02em}.graph-3d{isolation:isolate;background:#0c1219}.graph-3d:before{display:none!important}.orbit-hud{position:absolute;right:22px;bottom:17px;max-width:320px;color:#c7c1b7;font-size:10px;font-weight:600;text-align:right;pointer-events:none}.orbit-fallback,.graph-state{position:absolute;z-index:4;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;background:rgba(243,240,233,.94)}.orbit-fallback[hidden],.graph-state[hidden],.empty[hidden],.notice[hidden]{display:none}#orbitLabels{position:absolute;inset:0;pointer-events:none}.empty{position:absolute;inset:0;display:grid;place-content:center;gap:10px;padding:20px;text-align:center;pointer-events:none}.map-caption{padding:11px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.quote{margin:15px 0;padding:13px 14px;border-left:3px solid var(--signal);background:#f1eee7;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}.field{margin:12px 0;overflow-wrap:anywhere}.field b,.provenance-grid b,.story-metrics b{display:block;margin-bottom:5px;color:var(--muted-dim);font-size:9px;font-weight:700;text-transform:uppercase}.inspector-lead{display:grid;gap:7px;padding:13px;border:1px solid var(--line);background:#f4f1ea}.inspector-lead strong{font-size:15px;overflow-wrap:anywhere}.inspector-lead p{font-size:12px}.provenance-grid,.story-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:14px 0;overflow:hidden;border:1px solid var(--line);background:var(--line)}.provenance-grid>div,.story-metrics>div{min-width:0;padding:10px;background:#fffdfa}.provenance-grid span,.story-metrics span{display:block;overflow-wrap:anywhere;font-size:12px}.story-section{margin-top:17px}.story-heading{align-items:center;margin-bottom:8px;color:var(--muted-dim);font-size:10px;font-weight:700;text-transform:uppercase}.limit-note{margin:12px 0 0;padding:10px 12px;border-left:2px solid var(--amber);background:#f7f0df;color:#59431f;font-size:12px;line-height:1.5}.limit-note strong{display:block;margin-bottom:4px;color:var(--amber);font-size:9px;text-transform:uppercase}.evidence-card,.trace-step,.action-brief{margin-top:8px;padding:12px;border:1px solid var(--line);background:#fffdfa}.evidence-card .quote,.evidence-card .provenance-grid{margin:9px 0 0}.trace-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}.trace-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;margin:0;padding:9px 10px}.trace-index{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;color:var(--blue);font-size:10px;font-weight:700}.trace-step strong{font-size:12px}.trace-step p{margin-top:3px;font-size:11px}.form{display:grid;gap:12px}.form label>span{color:var(--muted-dim);font-size:10px}.form input[type=file]{width:100%;padding:9px}.form label.check{display:flex;align-items:center;gap:7px;font-size:12px}.operations-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.query-row{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:9px}.answer{margin-top:13px;padding:15px;border:1px solid var(--line);background:#f4f1ea}.result-status{display:inline-flex;align-items:center;min-height:24px;padding:5px 8px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:700}.verdict-head h3{margin-top:10px;font-size:1.35rem}.verdict-status{text-align:right}.verdict-status small{display:block;margin-top:6px;color:var(--muted-dim);font-size:9px}.action-brief--preview{border-left:3px solid var(--blue)}.action-brief--executed{border-left:3px solid var(--signal)}.action-brief h3{margin:8px 0 0}.action-brief>p{margin-top:6px;font-size:12px}.case-card,.task-card{display:grid;gap:9px;padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.case-card:last-child,.task-card:last-child{border:0}.case-card .story-metrics{margin:0}.task-actions{display:flex;flex-wrap:wrap;gap:7px}.notice{padding:9px 16px;border-bottom:1px solid var(--line);background:#f7f0df;color:#59431f;font-size:11px}pre{max-height:300px;padding:11px;overflow:auto;border:1px solid var(--line);background:#24231f;color:#e9e4da;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.55 Consolas,monospace}details{margin-top:13px}summary{cursor:pointer;color:var(--muted);font-size:12px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{display:flex;flex-wrap:wrap;gap:12px 20px;padding:18px 30px 26px;border-top:1px solid var(--line);color:var(--muted-dim);font-size:11px}footer span:first-child{color:var(--text)}footer a{margin-left:auto}
@media(max-width:1120px){.hero-stage{grid-template-columns:1fr 260px}.control-deck{grid-template-columns:1fr 1fr}.control-field--key{grid-column:span 2}.workspace{grid-template-columns:1fr}.stack{display:grid;grid-template-columns:1fr 1fr}.graphwrap,.graph-surface{min-height:440px}svg,#orbitCanvas{height:470px}}
@media(max-width:720px){.site-header,main{padding-right:16px;padding-left:16px}.hero-stage{grid-template-columns:1fr;min-height:0}.system-readout{display:none}.header-note{margin:0 0 20px 49px}.intro{margin-left:49px;font-size:14px}.control-deck{grid-template-columns:1fr;margin-top:12px}.control-field--key{grid-column:auto}.control-deck button{width:100%}.process-rail{margin-top:15px;overflow-x:auto}.process-rail li{flex:none}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2),.stat:nth-child(4){border-right:0}.stat:nth-child(3),.stat:nth-child(4),.stat:nth-child(5){border-top:1px solid var(--line)}.stack,.operations-grid{grid-template-columns:1fr}.toolbar{width:100%}.toolbar input,.toolbar>button{flex:1 1 auto}.view-switcher{width:100%}.view-switcher button{flex:1}.tool-divider{display:none}.query-row,.provenance-grid,.story-metrics{grid-template-columns:1fr}.graphwrap,.graph-surface{min-height:390px}svg,#orbitCanvas{height:420px}.orbit-hud{left:18px;right:18px;text-align:left}.verdict-head{display:block}.verdict-status{margin-top:13px;text-align:left}footer{padding-right:16px;padding-left:16px}footer a{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* UI-008: retain the spatial composition; only soften the palette and type. */
:root{color-scheme:dark;--void:#0a0e14;--ink:#0f151e;--ink-deep:#080c12;--line:#263240;--line-strong:#4c5b6c;--text:#edf1f3;--muted:#b2bdc7;--muted-dim:#7f91a2;--signal:#cf664c;--signal-ink:#171b20;--blue:#67a7c8;--violet:#8d82b4;--amber:#d5a861;--red:#df7a70}
html,body{background:var(--void)}body{background:radial-gradient(circle at 83% 5%,rgba(103,167,200,.08),transparent 25rem),radial-gradient(circle at 8% 16%,rgba(207,102,76,.045),transparent 18rem),var(--void)}button{border-color:var(--line-strong);background:rgba(14,19,26,.88);color:var(--text)}button:hover{border-color:var(--blue)}button.primary{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}input,select{border-color:var(--line);background:rgba(8,12,18,.92);color:var(--text)}.site-header{position:relative;overflow:hidden;background:linear-gradient(120deg,#101620,#080c12)}.site-header:before{display:none!important}.hero-stage{position:relative;grid-template-columns:minmax(0,1.16fr) minmax(280px,.84fr);min-height:285px;border-color:var(--line)}.hero-copy{position:relative;z-index:1;padding-bottom:26px}.mast{gap:28px}.brand{gap:18px}.brand-mark{width:45px;min-width:45px;height:45px;border-color:var(--signal);color:var(--signal);transform:skewY(-6deg)}.brand-mark span{border-color:rgba(207,102,76,.5)}h1{max-width:720px;font-size:clamp(3.35rem,7vw,6.6rem);color:var(--text)}.eyebrow,.panel-kicker{color:var(--blue)}.intro{max-width:610px;margin:25px 0 0 63px;color:#c5d0d8}.system-readout{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.header-note{display:none}.signal-sculpture{position:relative;min-height:285px;perspective:800px}.sculpture-plane,.sculpture-core,.sculpture-path{position:absolute;display:block;transform-style:preserve-3d}.sculpture-plane{width:195px;height:136px;top:67px;left:50%;border:1px solid var(--blue);box-shadow:inset 0 0 28px rgba(103,167,200,.14)}.sculpture-plane--back{transform:translateX(-52%) rotateX(56deg) rotateZ(-27deg);opacity:.58}.sculpture-plane--front{border-color:var(--signal);transform:translateX(-42%) rotateX(56deg) rotateZ(-27deg) translateZ(38px)}.sculpture-core{width:63px;height:63px;top:105px;left:50%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 6%,#cf664c 18%,#6d8db7 58%,#1d2938 100%);box-shadow:0 0 36px rgba(103,167,200,.32);transform:translateX(-45%) rotateX(24deg)}.sculpture-path{top:140px;left:21%;width:62%;height:1px;background:linear-gradient(90deg,transparent,var(--signal),var(--blue),transparent);transform:rotate(-18deg)}.sculpture-label{position:absolute;color:var(--muted);font:700 10px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.07em}.sculpture-label--top{top:38px;left:7%;color:var(--blue)}.sculpture-label--bottom{right:6%;bottom:35px;color:var(--signal)}.control-deck{position:relative;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(7,10,15,.75)}.process-rail{border-color:var(--line)}.process-rail li{border-color:var(--line)}main{background:transparent}.stats,.panel{border-color:var(--line);background:rgba(12,17,24,.86)}.panel--map{background:#070b10!important}.panelhead,.legend,.map-caption{border-color:var(--line)}.view-switcher{border-color:var(--line-strong);background:rgba(7,12,18,.75)}.graphwrap{background:#070b10!important;position:relative;overflow:hidden}.graphwrap:before{display:none!important}.graph-3d{background:#070b10!important}.orbit-fallback,.graph-state{background:rgba(10,14,20,.96)}svg text{fill:#edf1f3;stroke:#070b10}.quote,.inspector-lead,.answer{border-color:var(--line);background:rgba(8,12,18,.75);color:var(--text)}.provenance-grid,.story-metrics{border-color:var(--line);background:var(--line)}.provenance-grid>div,.story-metrics>div,.evidence-card,.trace-step,.action-brief{background:rgba(10,14,21,.95);border-color:var(--line)}.limit-note,.notice{background:rgba(213,168,97,.09);color:#e5c995}.graph-state p,.orbit-fallback p{color:var(--muted)}#graph3d:not([hidden])~.empty{display:none}
@media(max-width:720px){.hero-stage{display:block;min-height:0}.signal-sculpture{display:none}.intro{margin-left:0;margin-top:16px}.system-readout{display:none}.brand{gap:12px}h1{font-size:clamp(1.75rem,7.2vw,2.9rem);line-height:0.96;letter-spacing:-0.04em}.stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.stat{border-top:none!important;border-right:none!important}}

/* UGI Guided Rulebook + P5 additive compatibility layer */
.guided-panel{margin-top:18px}.guided-inputs{margin-top:12px}.guided-actions{display:flex;flex-wrap:wrap;gap:8px}.guided-panel .answer{margin-top:12px;white-space:pre-wrap;overflow-wrap:anywhere}.guided-panel .status.error{color:var(--red)}


/* UI-011 / UI-012 Friend B Scoped Styles */
.ugi-b-pickable{cursor:pointer;outline:none;transition:filter .15s ease,opacity .15s ease}.ugi-b-pickable:hover{filter:brightness(1.25) drop-shadow(0 0 6px rgba(103,167,200,.45))}.ugi-b-pickable:focus-visible{outline:2px solid var(--blue,#67a7c8);outline-offset:3px}.ugi-b-state-active{display:grid!important;place-content:center;justify-items:center;gap:12px;background:rgba(12,18,26,.94);backdrop-filter:blur(4px);z-index:5}.ugi-b-truncation-notice{background:rgba(213,168,97,.14)!important;border-left:3px solid var(--amber,#d5a861)!important;color:#f1dfbc!important;font-size:11px;line-height:1.5;padding:8px 14px!important}.ugi-b-fallback-active{display:grid!important;place-content:center;justify-items:center;gap:14px;padding:32px 24px;background:rgba(12,18,26,.96);border:1px solid var(--line-strong,#56677a);border-radius:4px;text-align:center;z-index:10}.ugi-b-fallback-active .panel-kicker{color:var(--amber,#d5a861);font-size:11px;letter-spacing:.05em;text-transform:uppercase}.ugi-b-fallback-active p{max-width:420px;margin:0;color:var(--text,#edf1f3);font-size:13px;line-height:1.5}.ugi-b-fallback-active button{margin-top:6px;padding:8px 16px;border-color:var(--blue,#67a7c8);color:var(--text,#edf1f3);background:rgba(103,167,200,.15);font-weight:650}.ugi-b-fallback-active button:hover{background:rgba(103,167,200,.28);border-color:var(--blue,#67a7c8)}.ugi-b-orbit-hud{position:absolute;right:18px;bottom:14px;max-width:380px;color:var(--muted-dim,#7f91a2);font-size:10px;font-weight:600;letter-spacing:.03em;text-align:right;pointer-events:none;user-select:none;background:rgba(10,15,22,.65);padding:4px 8px;border-radius:3px}.ugi-b-guided-active{animation:ugiBfadeIn .25s ease-out}@keyframes ugiBfadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.ugi-b-verdict-card{margin-top:14px;padding:14px 16px;border-radius:3px;background:rgba(10,15,22,.75)}.ugi-b-verdict-title{display:block;font-size:13px;font-weight:700;margin-bottom:4px}.ugi-b-verdict-desc{margin:0;font-size:12px;line-height:1.45;color:var(--muted,#b2bdc7)}.ugi-b-receipt-valid{border-left-color:var(--signal,#cf664c)!important;background:rgba(207,102,76,.08)!important}.ugi-b-receipt-valid .ugi-b-verdict-title{color:var(--signal,#cf664c)}.ugi-b-receipt-stale{border-left-color:var(--amber,#d5a861)!important;background:rgba(213,168,97,.08)!important}.ugi-b-receipt-stale .ugi-b-verdict-title{color:var(--amber,#d5a861)}.ugi-b-receipt-unknown{border-left-color:var(--red,#df7a70)!important;background:rgba(223,122,112,.08)!important}.ugi-b-receipt-unknown .ugi-b-verdict-title{color:var(--red,#df7a70)}@media(prefers-reduced-motion:reduce){.ugi-b-pickable,.ugi-b-guided-active{transition:none!important;animation:none!important}}

/* 3D Orbit HUD Badges & Reticles */
#orbitLabels text{fill:#f8fafc!important;stroke:none!important;paint-order:normal!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;letter-spacing:.02em}
.orbit-badge{pointer-events:none;transition:opacity .15s ease}
.orbit-reticle{pointer-events:none}
@keyframes orbit-reticle-pulse{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}
.orbit-reticle circle:first-child{animation:orbit-reticle-pulse 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.orbit-reticle circle{animation:none!important}}

/* ==========================================================================
   HERO SPHERE VISUAL & GRAPH TUNABLES
   ========================================================================== */
:root {
  --hero-pad-top: clamp(56px, 7vh, 96px); /* Top padding of hero stage for breathing room */
  --visual-scale: 1.35;                   /* Art scale: 1.3 - 1.4 for clear breathing room */
  --visual-offset-y: -10px;               /* Shifts sphere level with headline vertical center */
  --halo-opacity: 0.28;                   /* Blue halo/glow opacity behind sphere */
  --graph-opacity: 1;                     /* Graph canvas network opacity */
}

/* === BACKGROUND SYSTEM === */

:root {
  /* ── Background & Form Layout Tunable Tokens ── */
  --control-h: 40px;
  --label-gap: 8px;
  --bg-base-top: #070a0f;
  --bg-base-bottom: #0c1017;
  --bg-orb-a-color: 207, 102, 76;   /* Copper */
  --bg-orb-a-opacity: 0.13;
  --bg-orb-a-size: 520px;
  --bg-orb-b-color: 103, 167, 200;  /* Steel blue */
  --bg-orb-b-opacity: 0.16;
  --bg-orb-b-size: 520px;
  --bg-orb-c-opacity: 0.08;
  --bg-grid-size: 64px;
  --bg-grid-color: 103, 167, 200;
  --bg-grid-opacity: 0.055;
  --bg-grain-opacity: 0.062;        /* Increased +1.7% for visibility on dark areas while keeping text crisp */
  --bg-surface-fill: rgba(8, 12, 18, 0.68);
  --bg-surface-blur: 14px;
  --bg-surface-border: rgba(103, 167, 200, 0.16);
  --bg-surface-highlight: rgba(255, 255, 255, 0.06);
  --bg-surface-hover-glow: rgba(207, 102, 76, 0.32);
  --bg-ann-opacity: 0.45;
}

/* Background root container: fixed, full viewport, non-interactive, sits at stacking level 0 */
.ugi-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  z-index: 0;
}

/* Content wrapper sits strictly above background system */
.app-shell {
  position: relative;
  z-index: 1;
}

.site-header {
  background: transparent !important;
}

/* Base layer (-3): subtle vertical gradient (very dark navy top to slightly lighter/warmer bottom) */
.ugi-bg-base {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, var(--bg-base-top) 0%, var(--bg-base-bottom) 100%);
}

/* Glow orbs (-2): soft, heavy radial blur, subtle copper & steel-blue accents */
.ugi-bg-orbs {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ugi-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Orb A: copper glow behind the "Read the path." area (left-center) */
/* Vertical reach shortened with bottom fade: clean dark navy 40px+ above bottom divider */
.ugi-bg-orb--a {
  left: 22%;
  top: 130px;
  width: 500px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, rgba(var(--bg-orb-a-color), var(--bg-orb-a-opacity)) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100px, transparent 160px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100px, transparent 160px);
  animation: ugi-orb-drift-a 75s ease-in-out infinite alternate;
}

/* Orb C: faint copper-to-blue glow wash behind stats section (Y ~ 480px) */
.ugi-bg-orb--c {
  left: 50%;
  top: 480px;
  width: 960px;
  height: 290px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, rgba(var(--bg-orb-b-color), 0.11) 0%, rgba(var(--bg-orb-a-color), 0.07) 50%, transparent 100%);
}

@keyframes ugi-orb-drift-a {
  0% { transform: translate(-50%, -50%) translate(0, 0); }
  50% { transform: translate(-50%, -50%) translate(22px, -16px); }
  100% { transform: translate(-50%, -50%) translate(-14px, 12px); }
}

/* Blueprint grid layer (-1): fading blueprint lines extending faintly behind stats */
.ugi-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: var(--bg-grid-size) var(--bg-grid-size);
  background-image:
    linear-gradient(to right, rgba(var(--bg-grid-color), var(--bg-grid-opacity)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--bg-grid-color), var(--bg-grid-opacity)) 1px, transparent 1px);
  -webkit-mask-image:
    radial-gradient(ellipse at 76% 28%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 380px, rgba(0,0,0,0.50) 530px, transparent 650px);
  mask-image:
    radial-gradient(ellipse at 76% 28%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 380px, rgba(0,0,0,0.50) 530px, transparent 650px);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Grain overlay layer (0): sits above all background elements but BEHIND all content */
.ugi-bg-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background-image: url("data:image/png;base64,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");
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: var(--bg-grain-opacity);
  mix-blend-mode: soft-light;
}

/* ── Hero Stage & Visual Architecture ── */
.hero-stage {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.84fr) !important;
  padding-top: var(--hero-pad-top, clamp(56px, 7vh, 96px)) !important;
  min-height: 310px !important;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  position: relative;
  z-index: 2 !important;
  padding-bottom: 26px;
}

h1 {
  max-width: 720px;
  font-size: clamp(2.9rem, 6.5vw, 6.1rem) !important;
  line-height: .87 !important;
  letter-spacing: -.065em !important;
  color: var(--text);
}

.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 295px;
  /* NO overflow: hidden: labels and leader lines are unclipped */
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1; /* Sits behind headline text and system readout */
}

/* Scaled layer: sphere, planes, halo, graph canvas, path */
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 46%;
  transform: translateY(var(--visual-offset-y)) scale(var(--visual-scale));
  perspective: 800px;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Layer 1: Blue Halo Glow */
.hero-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(103, 167, 200, var(--halo-opacity)) 0%, rgba(103, 167, 200, calc(var(--halo-opacity) * 0.45)) 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Layer 2: Graph Canvas */
.hero-graph-canvas {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: 2;
  pointer-events: none;
  opacity: var(--graph-opacity);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%);
}

/* Layer 3 & 4: Tilted Translucent Planes */
.sculpture-plane {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  width: 195px;
  height: 136px;
  top: calc(46% - 68px);
  left: 50%;
  border: 1px solid var(--blue);
  box-shadow: inset 0 0 28px rgba(103, 167, 200, .14);
  pointer-events: none;
}

.sculpture-plane--back {
  z-index: 3;
  transform: translateX(-52%) rotateX(56deg) rotateZ(-27deg);
  opacity: .58;
}

.sculpture-plane--front {
  z-index: 4;
  border-color: var(--signal);
  transform: translateX(-42%) rotateX(56deg) rotateZ(-27deg) translateZ(38px);
}

/* Layer 5 & 6: Sphere Core & Path */
.sculpture-core {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  width: 63px;
  height: 63px;
  top: calc(46% - 31px);
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 6%, #cf664c 18%, #6d8db7 58%, #1d2938 100%);
  box-shadow: 0 0 36px rgba(103, 167, 200, .32);
  transform: translateX(-45%) rotateX(24deg);
  z-index: 5;
  pointer-events: none;
}

.sculpture-path {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  top: 46%;
  left: 21%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), var(--blue), transparent);
  transform: rotate(-18deg);
  z-index: 6;
  pointer-events: none;
}

/* Unscaled layer: Monospace Annotations, Ticks, and Leader Line */
.hero-annotations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 7;
}

.sculpture-ann {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font: 600 10px/1 "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  white-space: nowrap;
}

/* Top-right annotation: full text visible, right-aligned to content edge */
.sculpture-ann--coord {
  top: 18px;
  right: 0;
  color: var(--blue, #67a7c8);
}

/* Left annotation: full text visible, leader line points to anchor node */
.sculpture-ann--rel {
  top: 26%;
  left: 0;
  color: var(--signal, #cf664c);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sculpture-ann--rel .ann-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(207, 102, 76, 0.75), rgba(103, 167, 200, 0.5));
  position: relative;
}

.sculpture-ann--rel .ann-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -1.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal, #cf664c);
  box-shadow: 0 0 6px rgba(207, 102, 76, 0.8);
}

.sculpture-ann--cross-a {
  top: 22%;
  left: 22%;
  font-size: 13px;
  color: rgba(103, 167, 200, 0.45);
}

/* Bottom-Right Labels: Direct children of .hero-stage, unscaled, unclipped */
.sculpture-ann--src {
  position: absolute;
  right: 0;
  bottom: 54px;
  color: var(--muted-dim, #7f91a2);
  font: 600 10px/1 "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  pointer-events: none;
  z-index: 7;
  opacity: 0.42;
}

.sculpture-label--bottom {
  position: absolute;
  right: 0;
  bottom: 34px;
  color: var(--signal, #cf664c);
  font: 700 10px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .07em;
  pointer-events: none;
  z-index: 7;
}

.sculpture-ann--cross-b {
  position: absolute;
  right: 180px;
  bottom: 35px;
  font-size: 13px;
  color: rgba(207, 102, 76, 0.45);
  pointer-events: none;
  z-index: 7;
}

/* ── Control Deck Form Bar Alignment & Symmetry ── */
.control-deck {
  display: grid !important;
  grid-template-columns: minmax(150px, .7fr) minmax(230px, 1.2fr) minmax(200px, 1fr) auto !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  align-items: end !important;
  padding: 14px 16px !important;
  margin-top: 17px !important;
  background: linear-gradient(rgba(8, 12, 18, 0.68), rgba(8, 12, 18, 0.68)) padding-box,
              linear-gradient(135deg, rgba(207, 102, 76, 0.32), rgba(103, 167, 200, 0.22) 50%, rgba(255, 255, 255, 0.06)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  backdrop-filter: blur(var(--bg-surface-blur));
  -webkit-backdrop-filter: blur(var(--bg-surface-blur));
  box-shadow:
    inset 0 1px 0 var(--bg-surface-highlight),
    0 4px 20px rgba(0, 0, 0, 0.38) !important;
}

.control-field {
  display: grid !important;
  grid-template-rows: auto var(--control-h) !important;
  row-gap: var(--label-gap) !important;
  color: var(--muted) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.control-field input,
.control-field select {
  height: var(--control-h) !important;
  min-height: var(--control-h) !important;
  max-height: var(--control-h) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  color: var(--text) !important;
  background: rgba(8, 12, 18, 0.92) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  outline: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

.control-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  color-scheme: dark !important;
  padding-right: 36px !important;
  padding-left: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2367a7c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
  cursor: pointer !important;
}

.control-field select option {
  background-color: #0c1219 !important;
  color: var(--text, #edf1f3) !important;
  padding: 8px 12px !important;
}

.control-field input:hover,
.control-field select:hover {
  border-color: var(--line-strong, #4c5b6c) !important;
}

.control-field input:focus,
.control-field select:focus {
  border-color: var(--signal, #cf664c) !important;
  box-shadow: 0 0 0 2px rgba(207, 102, 76, 0.25) !important;
}

.control-deck button,
#refresh {
  height: var(--control-h) !important;
  min-height: var(--control-h) !important;
  max-height: var(--control-h) !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  padding: 0 18px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.03em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  border: 1px solid var(--signal) !important;
  background: var(--signal) !important;
  color: var(--signal-ink) !important;
  cursor: pointer !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.control-deck button:hover,
#refresh:hover {
  background: #bf5b42 !important;
  border-color: #bf5b42 !important;
  box-shadow: 0 2px 10px rgba(207, 102, 76, 0.28) !important;
}

.control-deck button:focus-visible,
#refresh:focus-visible {
  outline: 2px solid var(--blue, #67a7c8) !important;
  outline-offset: 2px !important;
}

/* ── Uniform 5-step process row ── */
.process-rail {
  background: rgba(8, 12, 18, 0.68) !important;
  border: 1px solid rgba(103, 167, 200, 0.16) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(var(--bg-surface-blur));
  -webkit-backdrop-filter: blur(var(--bg-surface-blur));
  box-shadow:
    inset 0 1px 0 var(--bg-surface-highlight),
    0 2px 14px rgba(0, 0, 0, 0.25) !important;
}

.process-rail li {
  background: transparent !important;
  border-right: 1px solid rgba(103, 167, 200, 0.14) !important;
}

.process-rail li:last-child {
  border-right: 0 !important;
}

.stats {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat {
  background: linear-gradient(rgba(8, 12, 18, 0.72), rgba(8, 12, 18, 0.72)) padding-box,
              linear-gradient(135deg, rgba(207, 102, 76, 0.32), rgba(103, 167, 200, 0.22) 50%, rgba(255, 255, 255, 0.07)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  backdrop-filter: blur(var(--bg-surface-blur));
  -webkit-backdrop-filter: blur(var(--bg-surface-blur));
  box-shadow:
    inset 0 1px 0 var(--bg-surface-highlight),
    0 4px 20px rgba(0, 0, 0, 0.35) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 88px;
  padding: 13px 16px;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.stat:hover {
  background: linear-gradient(rgba(14, 20, 28, 0.82), rgba(14, 20, 28, 0.82)) padding-box,
              linear-gradient(135deg, rgba(207, 102, 76, 0.55), rgba(103, 167, 200, 0.38) 50%, rgba(255, 255, 255, 0.12)) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px var(--bg-surface-hover-glow),
    0 6px 22px rgba(207, 102, 76, 0.18) !important;
  transform: translateY(-2px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .control-deck,
  .process-rail,
  .stats {
    background: rgba(8, 12, 18, 0.92) !important;
  }
}

/* Responsive adjustments for hero visual, background system & form bar */
@media (max-width: 900px) {
  :root {
    --hero-pad-top: 36px;
    --visual-scale: 1.0;
    --visual-offset-y: 0px;
  }
  .control-deck {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .control-field--key {
    grid-column: auto !important;
  }
  .control-deck button,
  #refresh {
    width: 100% !important;
  }
  .hero-graph-canvas {
    opacity: 0.35;
  }
  .ugi-bg-orb--a {
    width: 360px;
    height: 200px;
    left: 20%;
  }
  .sculpture-ann,
  .sculpture-label {
    display: none !important;
  }
  .hero-visual {
    min-height: 240px;
  }
}

@media (max-width: 720px) {
  .hero-stage {
    padding-top: 20px !important;
  }
  .hero-visual,
  .signal-sculpture,
  .sculpture-ann--src,
  .sculpture-label--bottom,
  .sculpture-ann--cross-b {
    display: none !important;
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .ugi-bg-orb--a {
    animation: none !important;
  }
  .stat {
    transition: none !important;
  }
  .stat:hover {
    transform: none !important;
  }
}