:root{
  --bg:#070b0a;
  --panel:#0d1413;
  --panel-2:#0a1110;
  --ink:#d8f3e8;
  --muted:#6f8a82;
  --line:#16241f;
  --accent:#48f0b0;      /* set per-harness by JS */
  --accent-dim:#1c3a30;
  --amber:#ffcf6b;
  --violet:#b69cff;
  --red:#ff6b6b;
  --term:#9ffcd0;
  --glow:0 0 10px rgba(72,240,176,.45);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(72,240,176,.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
  line-height:1.5;
}

/* CRT scanlines overlay */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply; opacity:.5;
}

.shell{max-width:1040px; margin:0 auto; padding:32px 20px 60px}

/* ---------- console ---------- */
.console{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.console-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:14px}
.brand-mark{
  font-family:var(--mono); font-weight:800; font-size:34px; color:var(--accent);
  text-shadow:var(--glow); line-height:1;
  border:2px solid var(--accent-dim); border-radius:12px; padding:6px 14px;
}
.brand h1{margin:0; font-size:20px; letter-spacing:.3px}
.sub{margin:2px 0 0; color:var(--muted); font-size:13px}

.harness-toggle{display:flex; gap:6px; background:#0a0f0e; border:1px solid var(--line); border-radius:10px; padding:4px}
.ht-btn{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.4px;
  color:var(--muted); background:transparent; border:0; padding:8px 12px; border-radius:7px; cursor:pointer;
  transition:.18s;
}
.ht-btn.is-active{color:#05110c; background:var(--accent); box-shadow:var(--glow)}

.prompt-row{display:flex; gap:10px; margin:20px 0 14px}
#promptInput{
  flex:1; background:#070d0c; border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:var(--mono); font-size:14px; padding:13px 15px; outline:none;
  transition:.15s;
}
#promptInput:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.run-btn{
  font-family:var(--mono); font-weight:700; letter-spacing:.5px; font-size:13px;
  color:#05110c; background:var(--accent); border:0; border-radius:10px; padding:0 20px; cursor:pointer;
  box-shadow:var(--glow); transition:.15s; white-space:nowrap;
}
.run-btn:hover{filter:brightness(1.08)}
.run-btn:disabled{opacity:.5; cursor:wait; box-shadow:none}

.presets{display:flex; flex-wrap:wrap; gap:8px}
.preset{
  font-family:var(--mono); font-size:11.5px; color:var(--term);
  background:#0a0f0e; border:1px dashed var(--accent-dim); border-radius:20px; padding:6px 13px; cursor:pointer;
  transition:.15s;
}
.preset:hover{border-style:solid; border-color:var(--accent); color:var(--accent)}

/* mode tabs (Lesson | Curriculum) */
.mode-tabs{display:flex; gap:6px; margin:18px 0 0; border-bottom:1px solid var(--line); padding-bottom:0}
.mode-tab{
  font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.3px;
  color:var(--muted); background:transparent; border:0; border-bottom:2px solid transparent;
  padding:9px 14px 10px; cursor:pointer; transition:.16s; margin-bottom:-1px;
}
.mode-tab:hover{color:var(--ink)}
.mode-tab.is-active{color:var(--accent); border-bottom-color:var(--accent)}

/* curriculum input */
#curriculumInput{margin-top:16px}
#curriculumText{
  width:100%; background:#070d0c; border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:var(--mono); font-size:13.5px; line-height:1.55; padding:13px 15px;
  outline:none; resize:vertical; transition:.15s;
}
#curriculumText:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.cur-fields{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.cur-fields input{
  flex:1; min-width:160px; background:#070d0c; border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:var(--mono); font-size:13px; padding:11px 14px; outline:none; transition:.15s;
}
.cur-fields input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.cur-hint{font-size:12px; color:var(--muted); line-height:1.55; margin:11px 2px 0}
.cur-hint b{color:var(--term)}

/* curriculum result */
.cur-essential{font-size:13.5px; color:var(--ink); opacity:.9; margin:2px 0 8px; max-width:60ch}
.cur-eq-label{font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--accent); margin-right:7px}

/* scope & sequence */
.sequence{display:grid; gap:10px; margin-bottom:8px}
.seq-item{border:1px solid var(--line); border-radius:12px; background:var(--panel-2); overflow:hidden}
.seq-head{display:flex; align-items:flex-start; gap:13px; padding:14px 16px}
.seq-n{font-family:var(--mono); font-weight:800; font-size:14px; color:#05110c; background:var(--accent);
  min-width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; margin-top:1px}
.seq-titles{flex:1; min-width:0}
.seq-title{font-weight:700; font-size:15px; color:var(--ink)}
.seq-purpose{font-size:13.5px; color:var(--ink); opacity:.82; margin-top:3px; line-height:1.5}
.seq-std{font-family:var(--mono); font-size:11px; color:var(--term); opacity:.85; margin-top:5px}
.seq-expand{
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--accent);
  background:#0a1110; border:1px solid var(--accent-dim); border-radius:8px; padding:7px 12px; cursor:pointer;
  white-space:nowrap; transition:.15s; align-self:center;
}
.seq-expand:hover{border-color:var(--accent); background:var(--accent-dim)}
.seq-expand:disabled{opacity:.6; cursor:wait}
.seq-body{border-top:1px solid var(--line); background:var(--panel)}
.seq-body:not(.hidden){padding:16px 18px}
.seq-error{color:var(--red); font-size:13px; font-family:var(--mono)}

/* an expanded lesson, inline under its sequence row */
.xl-title{font-size:17px; font-weight:700; color:var(--ink); margin-bottom:4px}
.xl-meta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.xl-doc{margin-bottom:14px}
.xl-cards{display:grid; gap:10px}
.xl-cards .conscience-card,.xl-cards .sovereignty-card{padding:14px 16px}

/* ---------- connect ---------- */
.connect{margin-top:14px; border-top:1px dashed var(--line); padding-top:12px}
.connect-toggle{display:flex; align-items:center; gap:10px; background:transparent; border:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; color:var(--muted); padding:0}
.connect-toggle:hover #connectLabel{color:var(--ink)}
.mode-pill{font-family:var(--mono); font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px;
  border:1px solid var(--line); color:var(--muted)}
.mode-pill.live{color:#05110c; background:var(--accent); border-color:var(--accent); box-shadow:var(--glow)}
.connect-body{margin-top:12px}
.connect-row{display:flex; gap:8px; flex-wrap:wrap}
#apiKey{flex:1; min-width:220px; background:#070d0c; border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-family:var(--mono); font-size:13px; padding:10px 12px; outline:none}
#apiKey:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
#modelSelect,#providerSelect,#specialistSelect{background:#070d0c; border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-family:var(--mono); font-size:12px; padding:10px; outline:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236f8a82' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:28px}
#providerSelect,#specialistSelect{flex:1}
#modelSelect:focus,#providerSelect:focus,#specialistSelect:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
#specialistSelect{width:100%}
#specialistSelect option{background:#0d1413; color:var(--ink)}
#ollamaUrl,#ollamaModel{flex:1; min-width:150px; background:#070d0c; border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-family:var(--mono); font-size:13px; padding:10px 12px; outline:none}
#ollamaUrl:focus,#ollamaModel:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.save-btn{font-family:var(--mono); font-weight:700; font-size:12px; color:#05110c; background:var(--accent);
  border:0; border-radius:9px; padding:0 16px; cursor:pointer}
.clear-btn{font-family:var(--mono); font-size:12px; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:9px; padding:0 12px; cursor:pointer}
.clear-btn:hover{color:var(--red); border-color:var(--red)}
.connect-note{font-size:11.5px; color:var(--muted); margin:10px 0 0; line-height:1.6}
.connect-note b{color:var(--term); font-weight:600}

/* ---------- terminal ---------- */
.terminal{
  margin-top:22px; background:#040807; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.term-bar{
  display:flex; align-items:center; gap:8px; padding:11px 15px;
  background:#0a100e; border-bottom:1px solid var(--line);
}
.dot{width:12px; height:12px; border-radius:50%}
.dot.red{background:#ff5f56}.dot.amber{background:#ffbd2e}.dot.green{background:#27c93f}
.term-title{margin-left:10px; font-family:var(--mono); font-size:12px; color:var(--muted)}

.term-body{padding:16px 18px; min-height:260px; max-height:520px; overflow-y:auto}
.banner{
  font-family:var(--mono); font-size:clamp(7px,1.7vw,12px); line-height:1.05; margin:0 0 6px;
  color:var(--accent); text-shadow:var(--glow); white-space:pre; overflow:hidden;
}
.term-stream{font-family:var(--mono); font-size:13px; color:var(--term); white-space:pre-wrap; word-break:break-word}

.tline{opacity:0; animation:fadein .12s forwards}
@keyframes fadein{to{opacity:1}}
.tline.dim{color:var(--muted)}
.tline.accent{color:var(--accent)}
.tline.warn{color:var(--amber)}
.tline.ok{color:var(--accent)}
.tline .spin{display:inline-block; color:var(--amber)}
.tline .tick{color:var(--accent)}
.cursor{display:inline-block; width:9px; height:15px; background:var(--accent); margin-left:2px;
  vertical-align:-2px; animation:blink 1s steps(1) infinite; box-shadow:var(--glow)}
@keyframes blink{50%{opacity:0}}

/* ---------- result ---------- */
.hidden{display:none}
.result{margin-top:24px; animation:rise .4s ease both}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.result-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:18px}
.result-kicker{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--accent)}
#resultTitle{margin:6px 0 10px; font-size:26px; letter-spacing:.2px}
.meta-chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-family:var(--mono); font-size:11px; color:var(--term); background:#0a1110;
  border:1px solid var(--line); border-radius:6px; padding:4px 9px}

.result-right{display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.verdict{font-family:var(--mono); font-size:12px; font-weight:700; text-align:right; padding:10px 14px;
  border-radius:10px; border:1px solid var(--amber); color:var(--amber); background:rgba(255,207,107,.06);
  max-width:230px}
.verdict .v-label{font-size:10px; letter-spacing:1.5px; opacity:.8; display:block; margin-bottom:3px}
.result-actions{display:flex; gap:8px}
.act-btn{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink); background:#0a1110;
  border:1px solid var(--line); border-radius:9px; padding:8px 13px; cursor:pointer; transition:.15s; white-space:nowrap}
.act-btn:hover{border-color:var(--accent); color:var(--accent)}
.act-btn.primary{color:#05110c; background:var(--accent); border-color:var(--accent); box-shadow:var(--glow)}
.act-btn.primary:hover{filter:brightness(1.08); color:#05110c}
.act-btn.copied{color:#05110c; background:var(--accent); border-color:var(--accent)}

/* reasoned doc */
.output-doc{display:grid; gap:2px; margin-bottom:30px}
.doc-sec{border-left:2px solid var(--accent-dim); padding:12px 0 12px 16px; transition:.2s}
.doc-sec:hover{border-left-color:var(--accent); background:rgba(72,240,176,.03)}
.doc-sec h4{margin:0 0 6px; font-size:13.5px; color:var(--accent); font-family:var(--mono); letter-spacing:.3px}
.doc-sec.required h4::after{content:" ● required by the conscience"; color:var(--amber); font-size:10.5px; letter-spacing:.5px}

/* formatted (markdown-lite) content */
.doc-body, .acc-body-inner, .cc-summary{font-size:14.5px; color:var(--ink); opacity:.94; line-height:1.62}
.doc-body p, .acc-body-inner p, .cc-summary p{margin:0 0 9px}
.doc-body p:last-child, .acc-body-inner p:last-child, .cc-summary p:last-child{margin-bottom:0}
.md-list{margin:4px 0 9px; padding-left:20px; display:grid; gap:5px}
.md-list li{padding-left:4px}
.md-list li::marker{color:var(--accent)}
strong{color:#eafff6; font-weight:700}
.doc-body em, .acc-body-inner em{color:var(--term); font-style:italic; opacity:.95}
.doc-body code, .acc-body-inner code{font-family:var(--mono); font-size:.88em; color:var(--accent);
  background:var(--accent-dim); padding:1px 5px; border-radius:4px}

/* soul leads: the first section (Invitation) gets weight */
.output-doc > .doc-sec:first-child{border-left-width:3px; padding-top:4px}
.output-doc > .doc-sec:first-child h4{font-size:15px}
.output-doc > .doc-sec:first-child .doc-body{font-size:16px; opacity:1}

/* logistics: present but clearly secondary */
.logistics{margin-top:22px; border-top:1px dashed var(--line)}
.logistics > summary{font-family:var(--mono); font-size:11px; letter-spacing:1.5px; color:var(--muted);
  cursor:pointer; padding:12px 0 6px; list-style:none; outline:none}
.logistics > summary::-webkit-details-marker{display:none}
.logistics > summary::before{content:"▸ "; color:var(--accent-dim)}
.logistics[open] > summary::before{content:"▾ "; color:var(--accent)}
.logistics > summary:hover{color:var(--ink)}
.logistics-body{opacity:.78}
.logistics-body .doc-sec{border-left-color:var(--line)}
.logistics-body .doc-sec:hover{border-left-color:var(--muted); background:transparent}
.logistics-body .doc-sec h4{color:var(--term); font-size:12.5px}

.section-label{font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--muted);
  margin:30px 0 12px; border-top:1px dashed var(--line); padding-top:18px}
.section-label .hint{color:var(--accent-dim); letter-spacing:0; font-size:11px; text-transform:none}

/* accordion */
.accordion{display:grid; gap:8px}
.acc-item{border:1px solid var(--line); border-radius:11px; background:var(--panel-2); overflow:hidden}
.acc-head{display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; user-select:none; transition:.15s}
.acc-head:hover{background:rgba(72,240,176,.04)}
.acc-glyph{font-size:18px; width:24px; text-align:center}
.acc-titles{flex:1; min-width:0}
.acc-name{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink)}
.acc-role{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acc-skill{font-family:var(--mono); font-size:10.5px; color:var(--accent); background:var(--accent-dim);
  padding:3px 8px; border-radius:5px; white-space:nowrap}
.acc-caret{color:var(--muted); transition:transform .2s; font-size:12px}
.acc-item.open .acc-caret{transform:rotate(90deg)}
.acc-body{max-height:0; overflow:hidden; transition:max-height .28s ease}
.acc-body-inner{padding:0 15px 15px 51px; font-size:14px; color:var(--ink); opacity:.9}
.acc-body-inner .lens{font-size:12px; color:var(--muted); font-style:italic; margin-bottom:8px}

/* conscience */
.conscience-card{border:1px solid var(--amber); border-radius:13px; background:rgba(255,207,107,.05); padding:18px 20px}
.cc-top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.cc-glyph{font-size:22px}
.cc-verdict{font-family:var(--mono); font-weight:700; color:var(--amber); font-size:14px}
.cc-applied{font-family:var(--mono); font-size:10.5px; font-weight:700; color:#05110c; background:var(--accent);
  border-radius:6px; padding:3px 9px; box-shadow:var(--glow)}
.cc-changes-label{font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px; color:var(--muted);
  text-transform:uppercase; margin-bottom:8px}
.cc-summary{font-size:14.5px; color:var(--ink); opacity:.95; margin-bottom:14px}
.cc-changes{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.cc-changes li{display:flex; gap:10px; font-size:13.5px; color:var(--ink); opacity:.92}
.cc-changes li::before{content:"▸"; color:var(--amber); font-weight:700}

/* subject specialist (reuses .conscience-card structure, violet palette) */
.specialist-card{border-color:var(--violet); background:rgba(182,156,255,.06)}
.sp-verdict{font-family:var(--mono); font-weight:700; color:var(--violet); font-size:14px}
.sp-changes{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.sp-changes li{display:flex; gap:10px; font-size:13.5px; color:var(--ink); opacity:.92}
.sp-changes li::before{content:"▸"; color:var(--violet); font-weight:700}

/* sovereignty lens */
.sovereignty-card{border:1px solid var(--accent); border-radius:13px;
  background:linear-gradient(180deg, rgba(72,240,176,.07), rgba(72,240,176,.02)); padding:18px 20px}
.sov-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.sov-glyph{font-size:20px; color:var(--accent); text-shadow:var(--glow)}
.sov-verdict{font-family:var(--mono); font-weight:700; color:var(--accent); font-size:14px; letter-spacing:.2px}
.sov-list{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:9px}
.sov-list li{display:flex; gap:10px; font-size:13.5px; color:var(--ink); opacity:.93}
.sov-list li::before{content:"✦"; color:var(--accent); font-size:11px; padding-top:3px}
.sov-push{font-size:13px; color:var(--ink); opacity:.9; border-top:1px dashed var(--line); padding-top:11px}
.sov-push-label{font-family:var(--mono); font-size:10.5px; letter-spacing:1px; color:var(--accent);
  text-transform:uppercase; margin-right:6px}

.foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:34px;
  font-family:var(--mono); font-size:11px; color:var(--muted)}
.foot code{color:var(--term)}

@media(max-width:640px){
  .result-head{flex-direction:column}
  .verdict{max-width:none; text-align:left}
  .acc-role{display:none}
}