:root { color-scheme: dark; --bg: #08100f; --surface: #0d1715; --surface-2: #111f1c; --line: #20312d; --text: #f3f0e8; --muted: #93a39f; --green: #1fd1a1; --green-soft: #123d33; --amber: #f1b95d; --red: #e87676; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 75% 0%, #12352d 0, transparent 28rem), var(--bg); color: var(--text); font-family: Manrope, system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 32px 32px; }
a { color: inherit; }
header { height: 74px; padding: 0 max(24px, calc((100vw - 1240px)/2)); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 34px; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); background: rgba(8,16,15,.9); }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; object-fit: cover; object-position: 50% 23%; border-radius: 11px; margin-right: 12px; }
.brand span { display: grid; }.brand strong { font-size: 20px; }.brand small { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
nav { display: flex; gap: 4px; } nav a { color: var(--muted); padding: 9px 12px; font-size: 12px; font-weight: 600; border-radius: 7px; text-decoration: none; } nav a:hover, nav a.active { color: var(--text); background: var(--surface-2); }
nav a.new-action { color: var(--green); border: 1px solid #285648; }
.live { color: var(--muted); font: 11px DM Mono, monospace; display: flex; align-items: center; gap: 8px; }.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
main { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 70px; position: relative; }
.result-hero { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 30px 0 38px; }.result-hero h1 { font-size: clamp(28px, 4vw, 50px); line-height: 1.07; letter-spacing: -.045em; max-width: 850px; margin: 8px 0 16px; font-weight: 600; }.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: .14em; font: 500 10px DM Mono, monospace; margin: 0; }.verified { color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }.verified i { color: var(--green); font-style: normal; }
.spend-orb { width: 150px; height: 150px; border: 1px solid #285648; border-radius: 50%; background: radial-gradient(circle, #163c33, #0a1714 70%); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 60px rgba(31,209,161,.08); }.spend-orb small, .spend-orb span { color: var(--muted); font-size: 10px; }.spend-orb strong { font: 500 34px DM Mono, monospace; margin: 4px 0; }
.job-strip { border: 1px solid var(--line); border-radius: 13px; background: rgba(13,23,21,.85); display: grid; grid-template-columns: 2.1fr .55fr .75fr .55fr 1.4fr; margin-bottom: 18px; overflow: hidden; }.job-strip > div { padding: 18px; border-right: 1px solid var(--line); }.job-strip > div:last-child { border: 0; }.job-strip span, .stacked-list dt, .summary-panel p span, .learning-decision span, .ref span, .proof-grid span { display: block; color: var(--muted); font: 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }.job-strip strong { font-size: 12px; font-weight: 600; }.constraints strong { display: flex; gap: 5px; flex-wrap: wrap; }.constraints em { font-style: normal; color: #b9c8c4; background: var(--surface-2); border-radius: 4px; padding: 3px 5px; font-size: 9px; }
.main-grid { display: grid; grid-template-columns: 1.65fr .85fr; gap: 18px; }.panel { border: 1px solid var(--line); background: rgba(13,23,21,.88); border-radius: 13px; padding: 22px; }.section-head, .node-title, .proof-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }.section-head { margin-bottom: 20px; }.section-head h2, .memory-panel h2, .proof-heading h2 { font-size: 19px; margin: 5px 0 0; }.section-head > span { color: var(--muted); font: 10px DM Mono, monospace; }
.graph { display: grid; gap: 9px; }.node { display: grid; grid-template-columns: 46px 1fr; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }.node-index { border-right: 1px solid var(--line); color: #51615d; font: 12px DM Mono, monospace; padding: 17px 12px; }.node-body { padding: 14px 16px; }.node-title h3 { margin: 0; font-size: 14px; }.status { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); padding: 3px 7px; border-radius: 99px; color: var(--muted); font: 9px DM Mono, monospace; text-transform: uppercase; }.status i { color: var(--green); font-style: normal; }.node-skipped .status i { color: var(--amber); }.node-cancelled .status i { color: var(--red); }
.node-meta { display: grid; grid-template-columns: .75fr 1.6fr .35fr; gap: 12px; margin: 13px 0 0; }.node-meta dt { color: #667671; font: 9px DM Mono, monospace; text-transform: uppercase; }.node-meta dd { margin: 4px 0 0; color: #b6c3bf; font-size: 10px; }.reason { color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); padding-top: 10px; margin: 11px 0 0; }.order { display: flex; gap: 7px; align-items: center; margin-top: 14px; flex-wrap: wrap; }.order span { color: var(--muted); font: 9px DM Mono, monospace; text-transform: uppercase; margin-right: 5px; }.order b { font-size: 9px; font-weight: 500; padding: 4px 7px; background: var(--green-soft); color: #a9e9d7; border-radius: 4px; }
.side-stack { display: grid; gap: 18px; align-content: start; }.panel-label { color: var(--muted); font: 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .09em; display: flex; align-items: center; gap: 8px; }.signal { width: 7px; height: 7px; border-radius: 50%; background: #52605d; }.signal.on { background: var(--green); box-shadow: 0 0 10px var(--green); }.stacked-list { margin: 18px 0 0; }.stacked-list div { border-top: 1px solid var(--line); padding: 12px 0; }.stacked-list dd { margin: 0; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }.stacked-list small { color: var(--amber); display: block; margin-top: 7px; }
.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }.metric-row div { background: var(--surface-2); padding: 13px; border-radius: 7px; }.metric-row span { color: var(--muted); font-size: 9px; }.metric-row strong { display: block; font: 500 22px DM Mono, monospace; margin-top: 3px; }.summary-panel p { border-top: 1px solid var(--line); padding-top: 12px; }.summary-panel p b { display: block; font-size: 10px; margin: 4px 0; color: #c2d0cc; }
.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.evidence-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); }.evidence-row strong { font-size: 11px; }.evidence-row span { color: var(--muted); font-size: 10px; text-align: right; }.learning-panel > p { color: #b5c3bf; font-size: 12px; line-height: 1.65; }.confirmed { color: var(--green) !important; }.learning-decision { background: var(--green-soft); border-radius: 7px; padding: 13px; margin: 15px 0; }.learning-decision strong { font-size: 11px; }.ref { padding: 8px 0; border-top: 1px solid var(--line); }.ref code, .transactions code { font: 9px DM Mono, monospace; color: #aab9b5; overflow-wrap: anywhere; }
.proof-hero h1 { max-width: 790px; }.proof-panel { padding: 28px; }.proof-heading { margin-bottom: 25px; }.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }.proof-grid div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.proof-grid div:nth-child(3n) { border-right: 0; }.proof-grid div:nth-last-child(-n+3) { border-bottom: 0; }.proof-grid strong { font: 500 14px DM Mono, monospace; }.transactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }.transactions a { border: 1px solid var(--line); border-radius: 8px; padding: 16px; text-decoration: none; display: grid; gap: 7px; }.transactions a:hover { border-color: var(--green); }.transactions span { color: var(--muted); font-size: 10px; }.transactions b { color: var(--green); font-size: 10px; }.accounting { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 20px 0 0; }
footer { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; }footer span { color: var(--text); font-weight: 700; }footer code { color: #667671; font: 9px DM Mono, monospace; }
.loading { padding: 50px; color: var(--muted); }
.comparison-bar { display: flex; align-items: center; gap: 8px; margin: -10px 0 18px; flex-wrap: wrap; }.comparison-bar span { color: var(--muted); font: 9px DM Mono, monospace; text-transform: uppercase; margin-right: 5px; }.comparison-bar b { color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 10px; }.comparison-bar b.selected { color: var(--text); border-color: var(--green); background: var(--green-soft); }
.memory-consequence { margin-bottom: 18px; border-color: #285648; }.consequence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.consequence-run { border: 1px solid var(--line); border-radius: 9px; padding: 16px; background: var(--surface); }.consequence-run.active { border-color: var(--green); box-shadow: inset 0 0 0 1px rgba(31,209,161,.12); }.consequence-run p { color: var(--muted); margin: 0 0 7px; font: 9px DM Mono, monospace; text-transform: uppercase; }.consequence-run > strong { font-size: 16px; }.consequence-run dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }.consequence-run dl div { border-top: 1px solid var(--line); padding-top: 10px; }.consequence-run dt { color: var(--muted); font: 8px DM Mono, monospace; text-transform: uppercase; }.consequence-run dd { margin: 5px 0 0; font-size: 10px; line-height: 1.45; }.consequence-run.recalled dd { color: #cce9e1; }.consequence-result { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.consequence-result strong { display: block; padding: 13px 16px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 15px; text-align: center; }.causal-strip { display: flex; align-items: stretch; gap: 7px; margin: 0 0 18px; }.causal-strip > span { flex: 1; border: 1px solid var(--line); background: rgba(13,23,21,.88); border-radius: 8px; padding: 11px; color: #d9e3e0; font-size: 9px; line-height: 1.4; }.causal-strip small { display: block; color: var(--muted); margin-top: 5px; font: 7px DM Mono, monospace; overflow-wrap: anywhere; }.causal-strip i { align-self: center; color: var(--green); font-style: normal; }.fresh-session-statement { padding: 11px; margin: 14px 0 0; border: 1px solid #285648; border-radius: 7px; color: var(--muted); font-size: 10px; line-height: 1.5; }.fresh-session-statement strong { display: block; color: var(--green); margin-top: 5px; }
.form-hero { padding-bottom: 24px; }.safety-note { max-width: 290px; border: 1px solid #285648; background: var(--green-soft); border-radius: 10px; padding: 15px; display: grid; gap: 6px; }.safety-note strong { color: var(--green); font-size: 11px; }.safety-note span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.assessment-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.assessment-form label { display: grid; gap: 8px; }.assessment-form label > span { color: var(--muted); font: 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .08em; }.assessment-form .wide { grid-column: 1 / -1; }.assessment-form input, .assessment-form textarea, .assessment-form select { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 12px; font: 12px Manrope, sans-serif; }.assessment-form textarea { min-height: 78px; resize: vertical; }.assessment-form small { color: var(--muted); font-size: 10px; }.assessment-form .memory-choice { display: flex; align-items: center; grid-template-columns: auto 1fr; }.assessment-form .memory-choice input { width: 17px; height: 17px; accent-color: var(--green); }.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }.form-actions button { border: 0; border-radius: 8px; background: var(--green); color: #04110d; padding: 12px 18px; font-weight: 800; cursor: pointer; }.form-actions button:disabled { opacity: .55; }.form-actions span { color: var(--muted); font: 9px DM Mono, monospace; }.timeline { display: grid; }.timeline > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }.timeline i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.timeline strong { font-size: 11px; }.timeline span, .timeline small { color: var(--muted); font: 9px DM Mono, monospace; }.timeline small { grid-column: 2 / -1; }.status-word { font-size: 16px !important; text-transform: capitalize; }
.memory-source { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 13px; }.memory-source summary, .memory-source.unavailable > strong { color: var(--green); cursor: pointer; font: 600 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .06em; }.memory-source.unavailable > strong { display: block; color: var(--muted); }.memory-source.unavailable > span, .source-empty { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 8px; }.source-session { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 14px 0; padding: 11px; background: var(--surface-2); border-radius: 7px; }.source-session span, .source-record span, .source-decision span { color: var(--muted); font: 8px DM Mono, monospace; text-transform: uppercase; }.source-session code, .source-record code { color: #b8c8c3; font: 8px DM Mono, monospace; overflow-wrap: anywhere; }.source-record { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 13px; }.source-record .wide { grid-column: 1 / -1; }.source-record strong, .source-record p, .source-decision p { display: block; margin: 5px 0 0; color: #c4d0cd; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }.source-decision { margin-top: 13px; padding: 11px; border: 1px solid #285648; border-radius: 7px; }.source-decision span:not(:first-child) { display: block; margin-top: 10px; }.source-decision small { display: block; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { header { padding: 0 18px; overflow-x: auto; }.live { display: none; }nav { min-width: max-content; }.main-grid, .lower-grid, .consequence-grid { grid-template-columns: 1fr; }.causal-strip { display: grid; }.causal-strip i { transform: rotate(90deg); justify-self: center; }.job-strip { grid-template-columns: 1fr 1fr; }.job-objective, .constraints { grid-column: 1 / -1; }.job-strip > div { border-bottom: 1px solid var(--line); }.proof-grid { grid-template-columns: 1fr 1fr; }.proof-grid div { border: 0; border-bottom: 1px solid var(--line); }.transactions { grid-template-columns: 1fr; } }
@media (max-width: 600px) { header { height: auto; min-height: 68px; flex-wrap: wrap; gap: 8px; padding-block: 10px; }.brand { width: 100%; }.brand img { width: 42px; height: 42px; }nav { width: 100%; overflow-x: auto; padding-bottom: 2px; }nav a { padding: 7px 9px; }main { width: min(100% - 24px, 1240px); padding-top: 22px; }.result-hero { grid-template-columns: 1fr; }.result-hero h1 { font-size: 31px; }.spend-orb { width: 120px; height: 120px; }.job-strip { grid-template-columns: 1fr 1fr; }.node-meta, .consequence-run dl, .consequence-result { grid-template-columns: 1fr; }.lower-grid { grid-template-columns: 1fr; }.proof-grid { grid-template-columns: 1fr; }.proof-grid div { border-bottom: 1px solid var(--line); }.evidence-row { display: grid; }.evidence-row span { text-align: left; }.assessment-form { grid-template-columns: 1fr; }.assessment-form .wide { grid-column: auto; }.form-actions { justify-content: flex-start; flex-wrap: wrap; } }
.assessment-form .live-acp-choice { align-items: start; grid-template-columns: auto 1fr; }
.assessment-form .live-acp-choice small { grid-column: 2; }
.assessment-error { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid rgba(232,118,118,.45); border-radius: 8px; color: var(--red); background: rgba(232,118,118,.08); }
.intent-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid #285648; border-radius: 9px; background: var(--green-soft); }
.intent-strip span { color: var(--green); font: 9px DM Mono, monospace; text-transform: uppercase; }.intent-strip strong { font-size: 11px; text-transform: capitalize; }.intent-strip small, .intent-strip p { color: var(--muted); font-size: 9px; }.intent-strip p { margin: 0 0 0 auto; text-align: right; }
.live-acp-panel { margin-top: 18px; border-color: #285648; }
.acp-job + .acp-job { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }