:root{--bg:#090b0f;--panel:#11151b;--panel2:#171c24;--line:#2a323e;--text:#edf1f7;--muted:#8d98a8;--a:#8ec5ff;--b:#ffc28e;--accent:#c7ff8e;--danger:#ff8e9a;--radius:16px}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}body{margin:0;background:radial-gradient(circle at 18% 0,#152132 0,transparent 28rem),radial-gradient(circle at 82% 0,#2a1e15 0,transparent 28rem),var(--bg)}
.shell{width:min(1500px,calc(100% - 32px));margin:0 auto;padding:34px 0 42px}.hero{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}.kicker{font-size:11px;letter-spacing:.18em;color:var(--muted)}h1{margin:.18em 0 0;font-size:clamp(38px,6vw,72px);line-height:.95;letter-spacing:-.055em}.subtitle{margin:12px 0 0;color:var(--muted);font-size:16px}.badge{border:1px solid var(--line);padding:8px 11px;border-radius:999px;font:700 11px/1 monospace;letter-spacing:.1em;color:var(--muted);background:#0b0e13}
.card{background:linear-gradient(180deg,rgba(23,28,36,.96),rgba(15,19,25,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 55px rgba(0,0,0,.23)}.controls{padding:18px}.topic-wrap{display:block}.topic-wrap>span,.control-row label>span{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}textarea,input,select{width:100%;color:var(--text);background:#0b0f14;border:1px solid #303946;border-radius:10px;padding:11px 12px;font:inherit;outline:none}textarea:focus,input:focus,select:focus{border-color:#65778d}.control-row{display:grid;grid-template-columns:110px 110px 110px minmax(150px,1fr) 110px;gap:10px;align-items:end;margin-top:12px}.control-row label{min-width:0}button{height:43px;border-radius:10px;border:1px solid var(--line);padding:0 16px;font:700 12px/1 inherit;letter-spacing:.06em;cursor:pointer}.primary{background:var(--text);color:#090b0f}.secondary{background:#141a22;color:var(--muted)}button:disabled{opacity:.45;cursor:not-allowed}.hint,.status{font-size:12px;color:var(--muted);margin:12px 0 0}.status{padding-top:10px;border-top:1px solid var(--line)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;overflow:hidden}.metrics div{padding:14px 16px;border-right:1px solid var(--line)}.metrics div:last-child{border-right:0}.metrics span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}.metrics strong{display:block;margin-top:5px;font-size:19px;font-variant-numeric:tabular-nums}
.agents{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.agent{min-width:0;overflow:hidden}.agent>header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}.agent>header>div{display:flex;align-items:center;gap:10px}.agent h2{font-size:15px;margin:0}.agent-tag{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;font:800 12px/1 monospace}.agent:first-child .agent-tag{background:rgba(142,197,255,.12);color:var(--a);border:1px solid rgba(142,197,255,.32)}.agent:last-child .agent-tag{background:rgba(255,194,142,.12);color:var(--b);border:1px solid rgba(255,194,142,.32)}.pulse{width:8px;height:8px;border-radius:50%;background:#39414c}.agent.busy .pulse{background:var(--accent);box-shadow:0 0 0 5px rgba(199,255,142,.08);animation:pulse 1.1s infinite}@keyframes pulse{50%{opacity:.35}}
.field-box{padding:12px 16px;border-bottom:1px solid var(--line);background:#0e1218}.field-box summary{cursor:pointer;font-size:11px;color:var(--muted);user-select:none}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{font-size:11px;border:1px solid #303947;color:#bbc4d0;border-radius:999px;padding:5px 8px}.agent:first-child .chip.hot{border-color:rgba(142,197,255,.45);color:var(--a)}.agent:last-child .chip.hot{border-color:rgba(255,194,142,.45);color:var(--b)}
.stream{padding:6px 16px 18px;min-height:300px;max-height:68vh;overflow:auto}.empty{color:var(--muted);font-style:italic}.turn{padding:15px 0;border-bottom:1px solid #222a35}.turn:last-child{border-bottom:0}.turn-head{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font:700 10px/1 monospace;text-transform:uppercase;letter-spacing:.08em}.turn .position{white-space:pre-wrap;line-height:1.58;font-size:14px;margin:10px 0 0}.turn details{margin-top:9px}.turn details summary{font-size:11px;color:var(--muted);cursor:pointer}.turn ul{margin:8px 0 0;padding-left:18px;color:#c5ccd6;font-size:12px;line-height:1.5}.change{margin-top:9px;padding:8px 10px;border-left:2px solid var(--accent);background:rgba(199,255,142,.035);font-size:12px;color:#cbd5c1}.used{margin-top:8px;font-size:11px;color:var(--muted)}footer{margin-top:18px;color:#66717f;font-size:11px;text-align:center}
@media(max-width:850px){.control-row{grid-template-columns:1fr 1fr 1fr}.control-row .primary{grid-column:1/3}.agents{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metrics div:nth-child(2){border-right:0}.metrics div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.dialogue-line{font-size:1.03rem;line-height:1.45;max-width:62ch}
.turn{padding-bottom:14px}
.turn + .turn{border-top:1px solid rgba(130,150,175,.12);padding-top:14px}

.dialogue-panel{margin:18px 0 24px;padding:18px;border:1px solid rgba(130,150,175,.22);border-radius:14px;background:rgba(12,18,28,.46)}
.dialogue-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:12px}
.dialogue-title h2{margin:.1rem 0 0}
.continue-control{display:flex;gap:8px;align-items:center;font-size:.84rem;opacity:.8}
.dialogue-thread{max-height:62vh;overflow:auto;padding:8px 3px 16px;display:flex;flex-direction:column;gap:12px}
.thread-empty{text-align:center;opacity:.55;padding:32px}
.chat-turn{max-width:78%}
.chat-turn.side-a{align-self:flex-start}
.chat-turn.side-b{align-self:flex-end}
.chat-meta{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.58;margin:0 8px 4px}
.chat-turn.side-b .chat-meta{text-align:right}
.chat-bubble{padding:11px 14px;border:1px solid rgba(140,160,190,.22);border-radius:16px;line-height:1.46;background:rgba(255,255,255,.035)}
.chat-turn.side-a .chat-bubble{border-bottom-left-radius:4px}
.chat-turn.side-b .chat-bubble{border-bottom-right-radius:4px}
.chat-delta,.chat-used{font-size:.74rem;opacity:.62;margin:5px 9px 0}
.chat-turn.side-b .chat-delta,.chat-turn.side-b .chat-used{text-align:right}
.branch-btn{margin:6px 8px 0;border:0;background:transparent;padding:0;font:inherit;font-size:.72rem;text-decoration:underline;opacity:.36;cursor:pointer}
.branch-btn:hover{opacity:.9}
.chat-turn.side-b .branch-btn{float:right}
@media(max-width:760px){.chat-turn{max-width:94%}.dialogue-title{align-items:flex-start;flex-direction:column}}

.unified-card{padding-bottom:8px}
.unified-card .field-box + .field-box{margin-top:8px}
.dialogue-inline-actions{display:flex;justify-content:flex-end;margin:10px 0 4px}
.dialogue-inline-actions .continue-control{font-size:.76rem;opacity:.72}
.dialogue-thread{max-height:none;padding-top:10px}
.thread-empty{text-align:left;padding:18px 4px;opacity:.48}
.branch-btn{font-size:.62rem;opacity:.18;letter-spacing:.02em}
.branch-btn:hover{opacity:.55}
.chat-turn{max-width:100%}
.chat-meta{font-size:.68rem;opacity:.52}
.chat-bubble{background:transparent;border:0;border-left:2px solid rgba(140,160,190,.16);border-radius:0;padding:8px 12px 4px 10px}
.chat-turn.side-b .chat-bubble{border-left-color:rgba(224,170,96,.18)}
.chat-delta,.chat-used{margin-left:12px}
.chat-turn.side-b .chat-delta,.chat-turn.side-b .chat-used{margin-right:12px}
/* hide obsolete standalone dialogue block if any cached html kept it */
.dialogue-panel{display:none}

#dyadPanel .field-box summary{font-size:.86rem;opacity:.84}

/* v11: single-window rich sequential dialogue */
#dyadPanel .dialogue-thread{padding:0 16px 12px;display:block;max-height:none;overflow:visible}
.thread-turn{padding:18px 0 16px;border-top:1px solid rgba(130,150,175,.16)}
.thread-turn:first-child{border-top:0}
.thread-turn .turn-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.thread-turn .position{font-size:1rem;line-height:1.58;max-width:none;margin:0 0 10px}
.thread-turn .change{margin:8px 0 10px;padding:8px 10px;border-left:2px solid rgba(120,230,140,.8);background:rgba(120,230,140,.045);font-size:.88rem;line-height:1.45}
.thread-turn details.turn-details{margin:8px 0 8px}
.thread-turn details.turn-details summary{cursor:pointer;font-size:.82rem;opacity:.72}
.thread-turn details.turn-details ul{margin:.55rem 0 .35rem 1.15rem;padding:0}
.thread-turn details.turn-details li{margin:.34rem 0;line-height:1.42}
.thread-turn details.turn-details .uncertainties{opacity:.8;list-style-type:'*  '}
.thread-turn .used{margin-top:8px;font-size:.76rem;opacity:.56}
/* old chat/branch UI is intentionally disabled */
.chat-turn,.branch-btn,.dialogue-inline-actions{display:none!important}

/* ============================================================
   v12: readable conversation, two distinguishable voices,
   darker collapsible diagnostic columns
   ============================================================ */

/* Lift secondary-text contrast a notch (was #8d98a8 on near-black). */
:root{--muted:#9aa7b8;--a:#8ec5ff;--b:#ffbf87}

/* Comfortable measure; the thread text was spanning the full card width. */
#dyadPanel .thread-turn .position{max-width:64ch;font-size:1.02rem;line-height:1.6}

/* Two voices, not one grey log. M = blue, F = amber: a coloured rail, a tinted
   meta line, and a slight inset on the F side so turns visibly alternate. */
#dyadPanel .thread-turn{border-top:1px solid rgba(130,150,175,.14);padding-left:14px;border-left:2px solid transparent}
#dyadPanel .thread-turn.side-a{border-left-color:rgba(142,197,255,.55)}
#dyadPanel .thread-turn.side-b{border-left-color:rgba(255,191,135,.55);margin-left:26px}
#dyadPanel .thread-turn.side-a .turn-head{color:var(--a);opacity:.85}
#dyadPanel .thread-turn.side-b .turn-head{color:var(--b);opacity:.85}

/* The Δ line no longer looks like a green system annotation; it is a quiet
   aside and, because model_change is now usually empty, it rarely appears. */
#dyadPanel .thread-turn .change{border-left:0;background:transparent;padding:2px 0 0;margin:6px 0 0;font-size:.82rem;opacity:.62;color:var(--muted)}
#dyadPanel .thread-turn .change strong{font-weight:600;opacity:.8}

/* Basis/uncertainty and Used collapse into quiet footers. */
#dyadPanel .thread-turn details.turn-details summary{font-size:.78rem;opacity:.6}
#dyadPanel .thread-turn .used{font-size:.74rem;opacity:.5;margin-top:6px}

/* Collapsible, darker diagnostic columns (kept for inspection, out of the way). */
.diag-card{margin-top:16px;background:linear-gradient(180deg,rgba(10,13,18,.96),rgba(8,10,14,.96));border-color:#20262f}
.diag-card>summary{cursor:pointer;list-style:none;padding:14px 18px;font:700 12px/1 monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.diag-card>summary::-webkit-details-marker{display:none}
.diag-card>summary::before{content:'▸';font-size:11px;opacity:.7}
.diag-card[open]>summary::before{content:'▾'}
.diag-card .diag-hint{font:400 10px/1 inherit;letter-spacing:.04em;text-transform:none;opacity:.55}
.diag-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#20262f;border-top:1px solid #20262f}
.diag-col{background:#0a0d12;min-width:0}
.diag-col-head{padding:10px 16px;font:700 11px/1 monospace;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid #1a1f27;opacity:.8}
.diag-stream{max-height:52vh;overflow:auto;padding:4px 16px 16px;filter:saturate(.8) brightness(.92)}
.diag-stream .turn .position{font-size:.9rem}
@media(max-width:760px){.diag-cols{grid-template-columns:1fr}#dyadPanel .thread-turn.side-b{margin-left:14px}}

/* v13: one rich stream; mode-specific inputs, no diagnostic duplicates. */
[hidden]{display:none!important}
.mode-select{display:block;max-width:450px;margin-bottom:16px}
.mode-select>span{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
.control-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.control-row>label{width:110px;flex:0 0 110px}
.control-row>.primary{flex:1 1 220px}
.control-row>.secondary{flex:0 0 100px}
#parallelInputs .topic-wrap+.topic-wrap{margin-top:14px}
#parallelInputs textarea{resize:vertical}
.privacy-note{line-height:1.5;max-width:100ch}
#dyadPanel{margin-top:16px}
#dyadPanel .agent-tag{width:auto;min-width:30px;padding:0 7px;color:var(--a);background:rgba(142,197,255,.10)}
#fieldA .chip.hot{border-color:rgba(142,197,255,.45);color:var(--a)}
#fieldB .chip.hot{border-color:rgba(255,191,135,.45);color:var(--b)}
.panel-tools{display:flex;gap:15px;align-items:center}
.quiet-button{height:auto;min-height:32px;padding:5px 8px;background:transparent;border:1px solid transparent;color:var(--muted);font-size:11px;letter-spacing:0;line-height:1.35}
.quiet-button:hover{border-color:var(--line);color:var(--text)}
button:focus-visible,summary:focus-visible{outline:2px solid var(--a);outline-offset:3px}
.parallel-step{padding:18px 0 22px;border-bottom:1px solid var(--line)}
.parallel-step:last-child{border-bottom:0}
.parallel-input-head{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.parallel-stimulus{font-size:14px;line-height:1.5;padding:10px 12px;margin:0 0 8px;background:rgba(255,255,255,.025);border-left:2px solid #536073;white-space:pre-wrap;overflow-wrap:anywhere}
.parallel-context{margin-bottom:12px;font-size:12px;color:var(--muted)}
.parallel-context summary{cursor:pointer}
.parallel-context p{white-space:pre-wrap;line-height:1.5}
#dyadPanel .thread-turn.human-turn{border-left-color:rgba(255,191,135,.55);margin-left:0}
#dyadPanel .thread-turn.neutral-turn{border-left-color:rgba(142,197,255,.55);margin-left:0}
#dyadPanel .human-turn .turn-head{color:var(--b);opacity:.85}
#dyadPanel .neutral-turn .turn-head{color:var(--a);opacity:.85}
#dyadPanel .position{white-space:pre-wrap;overflow-wrap:anywhere}
.comparison-box{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.12);font-size:13px;line-height:1.55}
.comparison-box>summary{cursor:pointer;font-size:13px;color:var(--text)}
.comparison-box[open]>summary{margin-bottom:12px}
.comparison-box h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin:18px 0 8px;color:var(--muted)}
.comparison-box p{margin:7px 0}
.comparison-box ul{margin:8px 0;padding-left:20px}
.compare-axis{border-top:1px solid rgba(130,150,175,.14);margin-top:12px;padding-top:10px}
.compare-axis-title{font-size:12px;color:var(--a)}
.compare-quote{padding:3px 0;color:#bcc7d5;overflow-wrap:anywhere}
.compare-quote strong{font-weight:500;color:var(--muted);font-size:11px}
.compare-note,.pending-note,.audit-note{font-size:12px;color:var(--muted);line-height:1.5}
.compare-warning{color:#ecc695}
.comparison-box .chips{margin:8px 0}
.mapped-node{display:inline-block;margin:3px 5px 3px 0;border:1px solid #374456;border-radius:12px;padding:2px 7px;color:#b8cfdf;font-size:11px}
.parallel-actions{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px;border-top:1px solid var(--line);align-items:center}
@media(max-width:600px){.shell{width:calc(100% - 20px);padding-top:24px}.hero{gap:8px}.mode-select{max-width:none}.control-row>label{flex:1 1 85px;width:auto}.control-row>.primary{flex-basis:100%}.control-row>.secondary{flex:1 1 auto}.panel-tools{gap:6px}#dyadPanel>header{padding:12px}.comparison-box{padding:10px}#dyadPanel .dialogue-thread{padding:0 10px 12px}.parallel-actions .secondary{height:auto;min-height:43px}.turn-head{line-height:1.4!important}}

/* v14 — human inputs routed to imaginary disks through M/F masks */
.path-pair{border-top:1px solid var(--line);padding:18px 0 24px}.path-pair:first-child{border-top:0;padding-top:4px}
.path-pair-head{font-size:.72rem;letter-spacing:.11em;color:var(--muted);margin-bottom:12px}.path-analysis{padding:14px 0 18px;border-bottom:1px solid rgba(120,145,175,.12)}
.seed-source{margin:10px 0 14px;font-size:.8rem;color:var(--muted)}.seed-source .mapped-node{display:inline-block;margin:3px 2px}
.mask-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mask-card{padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018)}
.mask-card h3{margin:0 0 9px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}.m-mask h3{color:#84bdff}.f-mask h3{color:#f2ae72}
.route-target{font-size:.9rem;margin-bottom:10px}.route-chain{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:7px 0 10px}.path-node{display:inline-block;padding:5px 8px;border:1px solid rgba(135,155,180,.25);border-radius:999px;font-size:.77rem}.path-node.disk{border-color:rgba(132,220,164,.52);box-shadow:inset 0 0 0 1px rgba(132,220,164,.08)}
.path-arrow{opacity:.35;font-size:.8rem}.route-next{font-size:.84rem;margin:8px 0}.route-details{margin-top:8px;font-size:.78rem;color:var(--muted)}.route-details p{margin:7px 0}.alt-disk{white-space:nowrap}.trajectory-comparison{margin-top:16px;padding:12px 14px;border:1px solid rgba(132,220,164,.2);border-radius:10px;background:rgba(132,220,164,.025)}.trajectory-comparison p{margin:8px 0}.route-empty{opacity:.6}
@media(max-width:800px){.mask-grid{grid-template-columns:1fr}}

/* v15 — alternating human turns routed to one frozen butterfly target */
.route-setup-row{display:grid;grid-template-columns:minmax(220px,1fr) 150px;gap:10px;margin:12px 0}
.route-setup-row label>span{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
.current-speaker{margin:14px 0 8px;font:700 12px/1.2 monospace;letter-spacing:.08em;color:var(--accent)}
.route-goal-banner{margin:4px 0 14px;padding:10px 12px;border:1px solid rgba(132,220,164,.24);border-radius:10px;background:rgba(132,220,164,.035);font-size:.84rem}
.route-turn{padding:18px 0 22px;border-top:1px solid var(--line);border-left:2px solid transparent;padding-left:14px}
.route-turn:first-of-type{border-top:0}.route-turn.m-turn{border-left-color:rgba(142,197,255,.58)}.route-turn.f-turn{border-left-color:rgba(255,191,135,.58);margin-left:24px}
.route-turn-head{font:700 10px/1.2 monospace;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}.m-turn .route-turn-head{color:var(--a)}.f-turn .route-turn-head{color:var(--b)}
.seed-source{line-height:1.8}.mapped-node.primary{border-color:rgba(199,255,142,.62);color:var(--accent)}.primary-node{box-shadow:inset 0 0 0 1px rgba(199,255,142,.12)}
.path-node.next-node{border-color:rgba(199,255,142,.7);color:var(--accent)}
.route-analysis{margin-top:14px;padding:12px 14px;border:1px solid rgba(130,150,175,.18);border-radius:10px;background:rgba(255,255,255,.018)}
.route-analysis h4{margin:0 0 7px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.route-analysis h4:not(:first-child){margin-top:14px}
.route-analysis p{margin:6px 0;line-height:1.55}.route-analysis blockquote{margin:7px 0;padding:10px 12px;border-left:2px solid var(--accent);background:rgba(199,255,142,.035);font-size:1rem;line-height:1.55}
.bridge-reason,.route-uncertainty{font-size:.8rem;color:var(--muted)}
@media(max-width:700px){.route-setup-row{grid-template-columns:1fr}.route-turn.f-turn{margin-left:10px}}

/* v15.2 automatic route trace */
.dyad-goal-banner{margin-bottom:12px}
.dyad-route-trace{margin:10px 0 4px;padding:10px 12px;border-left:2px solid rgba(104,163,224,.28);background:rgba(28,42,58,.22);border-radius:0 8px 8px 0}
.side-b .dyad-route-trace{border-left-color:rgba(236,164,84,.34)}
.dyad-route-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8fa4bb;margin:4px 0 6px}
.dyad-route-nodes{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.compact-route{margin:4px 0 7px}
.route-move{display:inline-block;font-size:.74rem;margin-top:3px;color:#aebdca}.route-move.closer{color:#8fca9b}.route-move.farther{color:#d99a91}
.dyad-route-details{margin-top:7px;font-size:.78rem;opacity:.82}.dyad-route-details summary{cursor:pointer;color:#91a4b8}

.goal-warning{color:#d79a72;font-size:.78rem;margin-left:.35rem}
.goal-method{opacity:.58;font-size:.75rem;margin-left:.35rem}
.step-check,.recommend-check{display:block;margin-top:6px;font-size:.76rem;opacity:.86}
.route-divergence{font-size:.76rem;opacity:.72}
.route-move.closer,.step-check.closer,.recommend-check.closer{color:#8fd3a5}
.route-move.farther,.step-check.farther,.recommend-check.farther{color:#e2a28f}
/* v15.4: 'mapped' is a weak hit (node merely touched, not centred) -> neutral, never green */
.route-move.partial,.step-check.partial,.recommend-check.partial{color:#c6b98a}
/* v15.4: gender overlay is a collinear axis; its movement label is muted, not scored */
.route-move.muted{color:#9aa7b3}
.collinear-note{display:inline-block;margin-left:.4rem;font-size:.68rem;opacity:.6;font-style:italic}