/* ==========================================================================
   Widget styles. Blue = the model decides. White + mono = code decides.
   ========================================================================== */

[data-widget] { position: absolute; inset: 0; }
.w { font-family: var(--font); color: var(--fg); }
.w code, .w pre { font-family: var(--mono); }
.pulse { fill: #9cc8ff; filter: drop-shadow(0 0 10px rgba(106,168,255,.95)); }
.pulse.red { fill: var(--red); filter: drop-shadow(0 0 10px rgba(255,91,79,.9)); }
.pulse.alt { fill: var(--amber); filter: drop-shadow(0 0 10px rgba(243,184,78,.9)); }
.arrhead { fill: var(--fg2); }
.arrhead.red { fill: var(--red); }
.mute { color: var(--mute); }

/* small pieces used on slides */
.stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.stack span { font-family: var(--mono); font-size: 17px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg2); }
.pillar-legend { display: flex; gap: 22px; margin-top: auto; padding-bottom: 6px; }
.pl { font-family: var(--mono); font-size: 19px; display: inline-flex; align-items: center; gap: 10px; color: var(--fg2); }
.pl i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.pl-tools, .k-tools .ktag { background: #6aa8ff; }
.pl-memory, .k-memory .ktag { background: #3fd49b; }
.pl-state, .k-state .ktag { background: #f3b84e; }
.legend { display: flex; gap: 14px; margin-top: 40px; }
.legend .tag { font-size: 18px; padding: 9px 16px; }
.bio { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.bio li { font-size: 36px; line-height: 1.28; color: var(--fg); font-weight: 400; }
.bio li b { font-weight: 700; }
.bio li.old { color: var(--mute); font-size: 30px; }
.l-statement .q .codew { font-family: var(--mono); font-weight: 700; letter-spacing: -.05em; font-size: .9em; background: rgba(255,255,255,.55); padding: 0 .18em; border-radius: .14em; }
.title-row .lead.side { margin-top: 18px; font-size: 28px; max-width: 1500px; color: var(--mute); }
.below-title.tall { top: 330px; bottom: 76px; }
.lessons .numbered { width: 1500px; top: 290px; gap: 30px; }
.lessons .numbered .txt { max-width: 1150px; font-size: 38px; line-height: 1.12; color: var(--fg); }
.lessons .numbered li { min-height: 120px; }

/* ============ chat ============ */
.w-chat { display: flex; justify-content: flex-end; }
.chat-card { width: 900px; height: 870px; border-radius: 30px; background: rgba(18,18,18,.62); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.chat-head { display: flex; gap: 16px; align-items: center; padding: 22px 28px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat-head b { display: block; font-size: 23px; }
.chat-head small { font-size: 16px; color: var(--mute); }
.chat-dot { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8bbcff, #1d58b0); box-shadow: 0 0 26px rgba(47,127,224,.6); flex: 0 0 auto; }
.chat-phase { margin-left: auto; font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; color: #111; background: #f3b84e; transition: background .4s; }
.chat-phase.hand { background: #ff8a5c; }
.chat-body { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px); mask-image: linear-gradient(to bottom, transparent 0, #000 110px); }
.chat-list { display: flex; flex-direction: column; gap: 13px; }
.msg { display: none; max-width: 80%; font-size: 23px; line-height: 1.36; padding: 15px 20px; border-radius: 22px; }
.msg.show { display: block; animation: msgIn .5s var(--ease) both; }
.msg.v { align-self: flex-end; background: rgba(255,255,255,.13); border-bottom-right-radius: 6px; }
.msg.a { align-self: flex-start; background: linear-gradient(135deg, #2f7fe0, #1b55a8); color: #fff; border-bottom-left-radius: 6px; }
.msg.t { align-self: flex-start; max-width: 96%; font-size: 17px; padding: 10px 14px; border-radius: 12px; border: 1.5px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.035); color: #ececec; align-items: center; gap: 12px; }
.msg.t.show { display: flex; }
.msg.t code { font-size: 17px; }
.msg.t .ktag { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; color: #111; }
.msg.t .res { color: #9a9a9a; font-family: var(--mono); white-space: nowrap; }
.msg.t.running .res { visibility: hidden; position: relative; }
.msg.t.running .res::after { content: ""; visibility: visible; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid #777; border-top-color: #fff; animation: spin .7s linear infinite; }
.typing { display: none; align-self: flex-start; gap: 6px; padding: 16px 20px; border-radius: 22px; background: rgba(47,127,224,.35); }
.typing.show { display: flex; }
.typing i { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .5; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ============ loop ============ */
.loop-svg { width: 100%; height: 100%; overflow: visible; }
.w-loop text { font-family: var(--font); fill: var(--fg); }
.loop-ring { fill: none; stroke: var(--fg2); stroke-width: 2; stroke-dasharray: 8 9; opacity: .5; transition: opacity .5s, stroke .5s; }
.loop-ring.on { opacity: 1; stroke: #fff; stroke-dasharray: none; }
.mono-lbl { font-family: var(--mono) !important; font-size: 19px; fill: var(--fg2) !important; }
.turn-lbl { font-family: var(--mono) !important; font-size: 22px; font-weight: 700; fill: var(--fg) !important; }
.edge { fill: none; stroke: var(--fg2); stroke-width: 2.5; opacity: .35; transition: opacity .4s, stroke .4s, stroke-width .4s; }
.edge.on { opacity: 1; stroke: #9cc8ff; stroke-width: 4; }
.edge-lbl { font-family: var(--mono) !important; font-size: 19px; fill: var(--mute) !important; transition: fill .4s; }
.edge-lbl.on { fill: #9cc8ff !important; }
.nd { transition: opacity .4s; }
.nd rect { fill: rgba(255,255,255,.04); stroke: var(--fg2); stroke-width: 2; transition: fill .4s, stroke .4s; }
.nd text { font-size: 30px; font-weight: 700; }
.nd text.sub { font-family: var(--mono); font-size: 18px; font-weight: 400; fill: var(--fg2); }
.nd-tools text:first-of-type, .nd-ans text:first-of-type { font-family: var(--mono); }
.nd-model circle { transition: filter .5s; }
.nd-model.on circle { filter: drop-shadow(0 0 34px rgba(47,127,224,.85)); }
.nd-model text { font-size: 34px; fill: #fff; }
.nd.on rect { fill: rgba(255,255,255,.1); stroke: #fff; }
.nd-ans.on rect { fill: rgba(63,212,155,.12); stroke: var(--green); }
.w-loop.dim .nd, .w-loop.dim .edge { opacity: .5; }
.stag rect { stroke-width: 2; }
.stag text { font-family: var(--mono) !important; font-size: 16px; font-weight: 700; }
.stag.m rect { fill: rgba(47,127,224,.22); stroke: var(--blue-hi); }
.stag.m text { fill: #cfe2ff !important; }
.stag.c rect { fill: rgba(255,255,255,.06); stroke: #fff; }
.stag.c text { fill: #fff !important; }
.tags { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.tags.on { opacity: 1; transform: none; }

/* ============ decisions (quadrants) ============ */
.w-dec { --pl: 92px; --pb: 56px; }
.dec-plot { position: absolute; left: var(--pl); right: 0; top: 0; bottom: var(--pb); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dec-q { position: relative; border-radius: 16px; margin: 6px; transition: background .6s; overflow: hidden; }
.dec-q.q-tl { grid-area: 1 / 1; } .dec-q.q-tr { grid-area: 1 / 2; } .dec-q.q-bl { grid-area: 2 / 1; } .dec-q.q-br { grid-area: 2 / 2; }
.dec-q.on.m { background: rgba(47,127,224,.13); }
.dec-q.on.c { background: rgba(255,255,255,.06); }
.dec-q.on.mc { background: linear-gradient(120deg, rgba(47,127,224,.14), rgba(255,255,255,.06)); }
.dec-q.on.j { background: rgba(255,255,255,.025); }
.dec-qt { position: absolute; left: 22px; top: 16px; font-size: 22px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); transition: color .5s; }
.dec-q.on .dec-qt { color: var(--fg); }
.dec-q.on.m .dec-qt { color: var(--blue-hi); }
.dec-pill { position: absolute; font-size: 24px; padding: 10px 20px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translate(30px, 20px) scale(.92); transition: opacity .55s var(--ease), transform .7s var(--ease); }
.dec-q.on .dec-pill { opacity: 1; transform: none; }
.dec-pill.m { background: linear-gradient(135deg, #3a8cf0, #1f5fb8); color: #fff; box-shadow: 0 10px 30px rgba(47,127,224,.3); }
.dec-pill.c { font-family: var(--mono); font-size: 21px; border: 2px solid #fff; color: #fff; border-radius: 10px; background: rgba(0,0,0,.25); }
.dec-pill.mc { background: linear-gradient(90deg, rgba(47,127,224,.9), rgba(47,127,224,.12)); border: 2px solid rgba(255,255,255,.8); color: #fff; }
.dec-pill.j { font-family: var(--mono); font-size: 21px; border: 1.5px dashed var(--fg2); color: var(--fg2); border-radius: 10px; }
.dec-axis-x, .dec-axis-y { position: absolute; background: var(--line); pointer-events: none; }
.dec-axis-x { left: 0; right: 0; top: 50%; height: 2px; }
.dec-axis-y { top: 0; bottom: 0; left: 50%; width: 2px; }
.dec-xlbl { position: absolute; left: var(--pl); right: 0; bottom: 0; height: 44px; display: flex; justify-content: flex-end; align-items: center; font-family: var(--mono); font-size: 21px; color: var(--fg2); }
.dec-ylbl { position: absolute; left: 0; top: 0; bottom: var(--pb); width: 60px; }
.dec-ylbl span { position: absolute; left: 30px; top: 0; transform-origin: 0 0; transform: rotate(-90deg) translate(-100%, -50%); white-space: nowrap; font-family: var(--mono); font-size: 21px; color: var(--fg2); }

/* ============ propose / dispose ============ */
.w-prop { display: flex; flex-direction: column; justify-content: center; gap: 0; padding-bottom: 20px; }
.pp-pipe { position: relative; padding-top: 70px; }
.pp-row { display: flex; align-items: center; gap: 0; }
.pp-st { position: relative; flex: 0 0 236px; height: 124px; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; transition: all .4s var(--ease); }
.pp-st b { font-size: 28px; }
.pp-st small { font-size: 16px; color: var(--fg2); font-family: var(--mono); }
.pp-st.m { background: linear-gradient(140deg, #3a8cf0, #17467f); color: #fff; box-shadow: 0 10px 40px rgba(47,127,224,.25); }
.pp-st.m small { color: #d6e6ff; }
.pp-st.c { border: 2px solid var(--fg2); background: rgba(0,0,0,.2); }
.pp-st.c b { font-family: var(--mono); font-size: 25px; }
.pp-st.act { transform: translateY(-6px); box-shadow: 0 0 0 4px rgba(156,200,255,.5), 0 14px 40px rgba(0,0,0,.3); }
.pp-st.ok.c { border-color: var(--green); }
.pp-st.bad { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(255,91,79,.35); }
.pp-st.pol { border-color: var(--amber) !important; }
.pp-st .badge { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #111; background: transparent; transition: background .3s; }
.pp-st.ok .badge { background: var(--green); }
.pp-st.bad .badge { background: var(--red); color: #fff; }
.pp-st.pol .badge { background: var(--amber); }
.pp-arrow { flex: 1; height: 2px; background: var(--fg2); position: relative; opacity: .6; margin: 0 6px; }
.pp-arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 10px solid var(--fg2); border-right: 0; }
.pp-retry { position: absolute; left: 118px; top: 30px; width: 622px; height: 40px; border: 2.5px dashed var(--red); border-bottom: 0; border-radius: 18px 18px 0 0; opacity: 0; transition: opacity .4s; }
.pp-retry.on { opacity: 1; }
.pp-retry::after { content: ""; position: absolute; left: -9px; bottom: -6px; border: 8px solid transparent; border-top: 12px solid var(--red); border-bottom: 0; }
.pp-retry .lbl { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); background: var(--bg); padding: 4px 14px; font-family: var(--mono); font-size: 16px; color: #ffb3ad; white-space: nowrap; max-width: 760px; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 10px; }
.pp-retry .lbl b { color: var(--red); }
.pp-bottom { display: grid; grid-template-columns: 560px 1fr; gap: 24px; margin-top: 40px; }
.pp-card { border-radius: 18px; background: var(--code-bg); border: 1px solid rgba(255,255,255,.08); padding: 20px 24px; min-height: 290px; }
.pp-card.flash { animation: flash .7s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 4px rgba(106,168,255,.7); } 100% { box-shadow: 0 0 0 0 rgba(106,168,255,0); } }
.pp-ch { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 15px; color: #888; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; }
.pp-ch .att { color: var(--blue-hi); font-weight: 700; }
.pp-plan { margin: 0; font-size: 21px; line-height: 1.55; color: #e8e8e8; white-space: pre; overflow: hidden; }
.pp-log { font-family: var(--mono); font-size: 18px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.pp-log .ll { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.04); animation: msgIn .4s var(--ease) both; }
.pp-log .ll.m { color: #9cc8ff; }
.pp-log .ll.ok { color: #8fe6c4; }
.pp-log .ll.bad { color: #ffb3ad; background: rgba(255,91,79,.1); }
.pp-log .ll.pol { color: #ffd894; background: rgba(243,184,78,.1); }
.pp-tabs { display: flex; gap: 10px; margin-top: 36px; }
.pp-tab { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: 10px 18px; font-family: var(--mono); font-size: 16px; color: var(--mute); cursor: pointer; }
.pp-tab.on { color: var(--fg); border-color: var(--fg2); background: rgba(255,255,255,.06); }

/* ============ tool design (light slide) ============ */
.w-td { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.td-card { border-radius: 20px; padding: 22px 26px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.08); opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .7s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.td-card.on { opacity: 1; transform: none; }
.td-h { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.td-h code { font-size: 21px; font-weight: 700; color: #111; }
.td-l { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; padding: 5px 10px; border-radius: 6px; color: #fff; background: #555; }
.td-card.after .td-l { background: #1c63c4; }
.td-card.err .td-l { background: #222; }
.td-body { margin: 0; font-size: 17px; line-height: 1.5; color: #333; background: rgba(0,0,0,.05); border-radius: 12px; padding: 12px 16px; white-space: pre; overflow: hidden; }
.td-card.before .td-body { color: #777; }
.td-bar { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.td-track { flex: 1; height: 16px; border-radius: 8px; background: rgba(0,0,0,.08); overflow: hidden; }
.td-track i { display: block; height: 100%; width: 0; border-radius: 8px; background: #888; transition: width .2s; }
.td-card.before .td-track i { background: linear-gradient(90deg, #c96, #e0573f); }
.td-card.after .td-track i { background: #1c63c4; }
.td-n { font-family: var(--mono); font-size: 17px; color: #444; white-space: nowrap; min-width: 220px; }
.td-n b { color: #111; font-size: 22px; }
.td-note { margin-top: 10px; font-size: 20px; color: #444; }
.td-card .t-str { color: #a0620a; } .td-card .t-num { color: #c2410c; } .td-card .t-bi { color: #6d4fd0; }

/* ============ toolsets ============ */
.w-ts { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-bottom: 30px; }
.ts-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-tab { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: 11px 20px; font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--mute); cursor: pointer; transition: all .3s; }
.ts-tab.on { color: #111; background: #f3b84e; border-color: #f3b84e; }
.ts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ts-card { border-radius: 16px; padding: 20px 22px; min-height: 142px; border: 2px solid rgba(255,255,255,.75); background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px; transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .45s, filter .45s; }
.ts-card code { font-size: 20px; font-weight: 700; color: #fff; }
.ts-card span { font-size: 19px; color: var(--fg2); }
.ts-card small { margin-top: auto; font-family: var(--mono); font-size: 14px; color: var(--mute); }
.ts-card.off { opacity: .13; transform: scale(.95); border-color: rgba(255,255,255,.2); filter: grayscale(1); }
.ts-stats { display: grid; grid-template-columns: 260px 320px 1fr; gap: 24px; align-items: end; margin-top: 6px; }
.ts-stat .k { display: block; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-bottom: 6px; }
.ts-stat b { font-size: 60px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-stat .of { font-size: 30px; color: var(--mute); }
.ts-meter { height: 18px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 18px; }
.ts-meter i { display: block; height: 100%; background: linear-gradient(90deg, #2f7fe0, #9cc8ff); border-radius: 9px; }

/* ============ budgets ============ */
.w-bud { display: flex; flex-direction: column; gap: 22px; padding-top: 20px; }
.bud-btns { display: flex; gap: 12px; }
.bud-btn { border: 1.5px solid var(--line); background: transparent; color: var(--fg2); border-radius: 12px; padding: 12px 20px; font-family: var(--mono); font-size: 18px; cursor: pointer; }
.bud-btn.on { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.bud-ms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bud-m { border: 1px solid var(--card-line); background: var(--card); border-radius: 16px; padding: 16px 20px; }
.bud-m .k { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.bud-m .vv { margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.bud-m b { font-size: 46px; font-weight: 700; }
.bud-m .lim { font-family: var(--mono); font-size: 20px; color: var(--mute); }
.bud-mb { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.bud-mb i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; transition: width .25s, background .3s; }
.w-bud.over .bud-mb i { background: var(--red); }
.w-bud.lim .bud-mb i { background: var(--green); }
.bud-tl { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; gap: 10px; align-content: start; }
.w-bud.lim .bud-tl { grid-template-columns: 1fr; }
.bud-c { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.5); font-size: 17px; animation: msgIn .3s var(--ease) both; flex-wrap: wrap; }
.bud-c .n { font-family: var(--mono); color: var(--mute); font-size: 14px; }
.bud-c.dup { border-color: rgba(255,91,79,.75); background: rgba(255,91,79,.08); }
.bud-c.ok { border-color: rgba(255,255,255,.6); }
.bud-c.retry { border-color: var(--amber); background: rgba(243,184,78,.08); }
.bud-c.done { border-color: var(--green); background: rgba(63,212,155,.1); }
.bud-c .why { font-family: var(--mono); font-size: 15px; color: #ffd894; flex-basis: 100%; padding-left: 36px; }
.bud-banner { min-height: 64px; border-radius: 14px; padding: 18px 22px; font-size: 22px; font-weight: 700; opacity: 0; transition: opacity .4s; }
.bud-banner.show { opacity: 1; }
.bud-banner.bad { background: rgba(255,91,79,.14); color: #ffb3ad; border: 1px solid rgba(255,91,79,.4); }
.bud-banner.ok { background: rgba(63,212,155,.12); color: #9ff0cf; border: 1px solid rgba(63,212,155,.4); }

/* ============ context window ============ */
.w-ctx { display: grid; grid-template-columns: 560px 1fr; gap: 40px; padding-top: 30px; }
.ctx-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--mute); margin-bottom: 14px; }
.ctx-h .cap { font-family: var(--mono); letter-spacing: 0; font-weight: 400; color: var(--mute); }
.ctx-win { position: relative; }
.ctx-slots { position: relative; height: 680px; border-radius: 18px; border: 2px solid var(--fg2); background: rgba(0,0,0,.25); overflow: hidden; padding: 0; }
.ctx-m { position: absolute; left: 10px; right: 10px; top: 8px; height: 76px; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: rgba(255,255,255,.07); opacity: 0; transition: transform .6s var(--ease), opacity .5s var(--ease), background .4s, box-shadow .4s; }
.ctx-m.show { opacity: 1; }
.ctx-m .who { font-family: var(--mono); font-size: 13px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.ctx-m .t { font-size: 20px; line-height: 1.25; }
.ctx-m.a { background: rgba(47,127,224,.22); }
.ctx-m.fact { box-shadow: inset 0 0 0 2px var(--amber); }
.ctx-m.fact .who::after { content: "  ★ important"; color: var(--amber); }
.ctx-m.flash { background: rgba(255,91,79,.4); box-shadow: inset 0 0 0 2px var(--red); }
.ctx-m.gone.fact { opacity: 0; }
.ctx-m.pin { background: rgba(63,212,155,.16); box-shadow: inset 0 0 0 2px var(--green); }
.ctx-m.pin .who { color: var(--green); }
.ctx-lost { position: absolute; left: 0; right: 0; bottom: -44px; font-family: var(--mono); font-size: 17px; color: #ffb3ad; opacity: 0; transition: opacity .4s; }
.ctx-lost.show { opacity: 1; }
.ctx-right { display: flex; flex-direction: column; gap: 30px; padding-top: 0; }
.ctx-mem, .ctx-ans { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ctx-mem.show, .ctx-ans.show { opacity: 1; transform: none; }
.ctx-fact { border-radius: 16px; border: 2px solid var(--green); background: rgba(63,212,155,.08); padding: 18px 22px; display: grid; gap: 6px; }
.ctx-fact code { font-size: 18px; color: var(--green); font-weight: 700; }
.ctx-fact span { font-size: 28px; font-weight: 700; }
.ctx-fact small { font-family: var(--mono); font-size: 14px; color: var(--mute); }
.ctx-ans p { margin: 0; font-size: 26px; line-height: 1.4; border-radius: 16px; padding: 20px 24px; background: linear-gradient(135deg, #2f7fe0, #1b55a8); color: #fff; }
.ctx-ans.bad p { box-shadow: 0 0 0 3px var(--red); }
.ctx-ans.good p { box-shadow: 0 0 0 3px var(--green); }
.ctx-ans .verdict { font-weight: 700; }
.ctx-ans.bad .verdict { color: #ff8f86; }
.ctx-ans.good .verdict { color: var(--green); }

/* ============ read / write paths ============ */
.paths-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-e { fill: none; stroke: var(--fg2); stroke-width: 2; opacity: .35; transition: opacity .4s; }
.w-paths.s1 .pa-e.r { opacity: .9; }
.w-paths.s2 .pa-e.w, .pa-e.hand.on { opacity: .9; }
.pa-e.hand { stroke-dasharray: 7 7; }
.pa-lane { position: absolute; left: 0; display: flex; background: var(--bg); padding-right: 14px; gap: 18px; align-items: baseline; }
.pa-lane b { font-size: 17px; letter-spacing: .16em; font-weight: 700; }
.pa-lane span { font-family: var(--mono); font-size: 17px; color: var(--mute); }
.pa-box { position: absolute; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; opacity: .35; transition: opacity .35s, transform .35s var(--ease), box-shadow .35s; }
.pa-box b { font-size: 21px; line-height: 1.1; }
.pa-box small { font-size: 14px; color: var(--fg2); font-family: var(--mono); line-height: 1.2; }
.pa-box em { font-style: normal; font-family: var(--mono); font-size: 15px; color: #9cc8ff; }
.pa-box.m { background: linear-gradient(140deg, #3a8cf0, #17467f); color: #fff; }
.pa-box.m small, .pa-box.m em { color: #d6e6ff; }
.pa-box.c { border: 2px solid var(--fg2); background: rgba(0,0,0,.3); }
.pa-box.c b { font-family: var(--mono); font-size: 19px; }
.pa-box.n { border: 1.5px dashed var(--line); }
.pa-box.par { padding: 0; gap: 0; }
.pa-box.par .half { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; }
.pa-box.par .half + .half { border-top: 1.5px solid var(--line); }
.pa-box.par b { font-size: 16px; }
.pa-box.done { opacity: 1; }
.pa-box.act { opacity: 1; transform: translateY(-5px); box-shadow: 0 0 0 4px rgba(156,200,255,.55); }
.pa-budget { position: absolute; left: 0; right: 150px; display: flex; align-items: center; gap: 20px; opacity: 0; transition: opacity .4s; }
.w-paths.s1 .pa-budget { opacity: 1; }
.pa-track { position: relative; flex: 1; height: 20px; border-radius: 10px; background: rgba(255,255,255,.07); }
.pa-fill { display: flex; height: 100%; border-radius: 10px; overflow: hidden; }
.pa-fill i { display: block; height: 100%; }
.pa-fill i.m { background: #2f7fe0; }
.pa-fill i.c { background: #fff; }
.pa-limit { position: absolute; right: 0; top: 28px; font-family: var(--mono); font-size: 14px; color: var(--mute); }
.pa-budget > b { font-family: var(--mono); font-size: 24px; min-width: 120px; text-align: right; }
.pa-budget.done > b { color: var(--green); }
.pa-note { position: absolute; left: 0; right: 0; font-size: 22px; color: var(--fg2); }
.pa-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 26px; align-items: center; font-size: 18px; color: var(--fg2); }
.pa-legend .lg { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mono); }
.pa-legend .lg i { width: 22px; height: 22px; border-radius: 6px; display: block; }
.pa-legend .lg.m i { background: #2f7fe0; }
.pa-legend .lg.c i { border: 2px solid #fff; }
.pa-legend .cnt { margin-left: auto; color: var(--mute); font-family: var(--mono); font-size: 16px; }

/* ============ memory governance ============ */
.w-gov { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; }
.gv-lbl { font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--mute); margin-top: 6px; }
.gv-say { align-self: flex-start; max-width: 100%; font-size: 26px; padding: 16px 22px; border-radius: 20px 20px 20px 6px; background: rgba(255,255,255,.12); transition: opacity .3s; }
.gv-say.empty { opacity: .3; }
.gv-flow { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.gv-gate { flex: 0 0 auto; border-radius: 14px; padding: 14px 20px; display: grid; gap: 2px; transition: box-shadow .3s, transform .3s; }
.gv-gate b { font-size: 21px; }
.gv-gate small { font-family: var(--mono); font-size: 13px; }
.gv-gate.m { background: linear-gradient(140deg, #3a8cf0, #17467f); color: #fff; }
.gv-gate.c { border: 2px solid #fff; background: rgba(0,0,0,.25); }
.gv-gate.c b { font-family: var(--mono); font-size: 19px; }
.gv-gate.act { transform: translateY(-4px); box-shadow: 0 0 0 4px rgba(156,200,255,.55); }
.gv-ar { width: 26px; height: 2px; background: var(--fg2); opacity: .6; flex: 0 0 auto; }
.gv-cand { flex: 1; min-width: 0; border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.gv-cand code { font-size: 18px; color: #e8e8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-cand small { font-family: var(--mono); font-size: 13px; color: var(--mute); }
.w-gov.forget .gv-gate.m { opacity: .25; }
.gv-verdict { flex: 0 0 210px; font-family: var(--mono); font-size: 18px; font-weight: 700; border-radius: 12px; padding: 14px 16px; text-align: center; opacity: 0; transition: opacity .3s; }
.gv-verdict.on { opacity: 1; }
.gv-verdict.ok { background: rgba(63,212,155,.14); color: #9ff0cf; }
.gv-verdict.bad { background: rgba(255,91,79,.16); color: #ffb3ad; }
.gv-verdict.forget { background: #fff; color: #111; }
.gv-table { border-radius: 16px; border: 1px solid var(--card-line); overflow: hidden; min-height: 222px; background: rgba(0,0,0,.2); }
.gv-row { display: grid; grid-template-columns: 200px 1fr 140px 190px; padding: 14px 22px; font-family: var(--mono); font-size: 20px; align-items: center; border-top: 1px solid var(--card-line); animation: msgIn .4s var(--ease) both; transition: opacity .5s, transform .5s; }
.gv-row.head { border-top: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); animation: none; padding-top: 12px; padding-bottom: 12px; }
.gv-row.current span:last-child { color: var(--green); }
.gv-row.superseded { color: var(--mute); }
.gv-row.superseded span:nth-child(2) { text-decoration: line-through; }
.gv-row.flash { animation: flash .8s var(--ease); }
.gv-row.del { opacity: 0; transform: translateX(40px); }
.gv-audit { font-family: var(--mono); font-size: 17px; color: var(--mute); display: grid; gap: 6px; }
.gv-audit .new { color: var(--fg); }

/* ============ state machine ============ */
.w-sm { display: flex; flex-direction: column; gap: 10px; padding-top: 30px; }
.sm-svg { width: 100%; height: 540px; overflow: visible; }
.sm-e { fill: none; stroke: var(--fg2); stroke-width: 2.2; opacity: .35; transition: opacity .4s, stroke .4s, stroke-width .4s; }
.sm-e.on { opacity: 1; stroke: #fff; stroke-width: 3.5; }
.sm-e.illegal { stroke: var(--red); stroke-dasharray: 8 7; opacity: 0; stroke-width: 3; }
.sm-e.illegal.on { opacity: 1; }
.sm-x { opacity: 0; transition: opacity .3s; }
.sm-x.on { opacity: 1; }
.sm-x circle { fill: var(--red); }
.sm-x text { fill: #fff; font-size: 22px; font-weight: 700; font-family: var(--font); }
.sm-n rect { fill: rgba(0,0,0,.3); stroke: var(--fg2); stroke-width: 2; transition: all .4s; }
.sm-n text { font-family: var(--mono); font-size: 21px; font-weight: 700; fill: var(--fg2); letter-spacing: .04em; transition: fill .4s; }
.sm-n.on rect { fill: #f3b84e; stroke: #f3b84e; filter: drop-shadow(0 0 24px rgba(243,184,78,.45)); }
.sm-n.on text { fill: #111; }
.w-sm.reject .sm-n.on rect { stroke: var(--red); stroke-width: 4; }
.sm-panel { display: grid; grid-template-columns: 250px 1fr; gap: 16px; }
.sm-cell { border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); padding: 16px 20px; }
.sm-cell.full { grid-column: 1 / -1; }
.sm-cell .k { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-bottom: 8px; }
.sm-cell > b { font-family: var(--mono); font-size: 28px; color: #f3b84e; }
.sm-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-tools code { font-size: 16px; padding: 5px 10px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.6); }
.sm-prop { font-family: var(--mono); font-size: 20px; }
.sm-prop b { color: #9cc8ff; }
.sm-prop .ok { color: var(--green); margin-left: 10px; }
.sm-prop .bad { color: #ff8f86; margin-left: 10px; }

/* ============ state storage ============ */
.st-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-bus { fill: none; stroke: var(--line); stroke-width: 2; }
.st-e { fill: none; stroke: transparent; stroke-width: 4; transition: stroke .4s; }
.st-e.on { stroke: #9cc8ff; }
.st-e.on2 { stroke: var(--amber); }
.st-e.bad { stroke: var(--red); }
.st-nodes { position: absolute; inset: 0; }
.st-n { position: absolute; border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 2px solid var(--fg2); background: rgba(20,20,20,.75); transition: border-color .4s, box-shadow .4s, opacity .4s; }
.st-n b { font-size: 24px; }
.st-n small { font-family: var(--mono); font-size: 14px; color: var(--mute); line-height: 1.3; }
.st-n.worker b, .st-n.lb b { font-family: var(--mono); font-size: 21px; }
.st-n.client { border-style: dashed; }
.st-n.act { border-color: #fff; box-shadow: 0 0 0 4px rgba(156,200,255,.35); }
.st-n.worker.wait { border-color: var(--amber); }
.st-n.worker.bad { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,91,79,.35); }
.st-n.store { border-width: 1.5px; }
.st-badge { font-family: var(--mono); font-size: 14px; color: #ffd894; min-height: 0; }
.st-n.bad .st-badge { color: #ff8f86; }
.st-panel { position: absolute; left: 1290px; right: 0; top: 0; bottom: 30px; border-radius: 18px; border: 1px solid var(--card-line); background: rgba(10,10,10,.55); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.st-panel .k { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--mute); }
.st-vrow { display: flex; align-items: center; justify-content: space-between; }
.st-ver { font-family: var(--mono); font-size: 64px; font-weight: 700; transition: color .3s; }
.st-ver.bad { color: var(--red); }
.st-lock { font-family: var(--mono); font-size: 15px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--line); color: var(--mute); }
.st-lock.on { border-color: var(--amber); color: #ffd894; }
.st-log { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 16px; line-height: 1.4; }
.st-log div { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--fg2); animation: msgIn .35s var(--ease) both; }
.st-log .ok { color: #9ff0cf; }
.st-log .bad { color: #ffb3ad; background: rgba(255,91,79,.1); }
.st-log .note { background: transparent; color: var(--mute); font-style: italic; padding-left: 0; }

/* ==========================================================================
   GSAP widgets (widgets-gsap.js). Model = blue, soft. Code = white, crisp.
   ========================================================================== */
.g-svg { width: 100%; height: 100%; overflow: visible; }
.g-svg text { font-family: var(--font); fill: var(--fg); }
.g-mono { font-family: var(--mono) !important; }
.g-arrhead { fill: #fff; }
.g-arrhead.red { fill: var(--red); }

.g-ring-faint { fill: none; stroke: var(--fg2); stroke-width: 2; stroke-dasharray: 8 9; opacity: .45; }
.g-ring-code { fill: none; stroke: #fff; stroke-width: 2.5; }
.g-ring-lbl { font-size: 19px; fill: var(--fg2) !important; }
.g-turn { font-size: 22px; font-weight: 700; }
.g-edge-faint { fill: none; stroke: var(--fg2); stroke-width: 2; opacity: .18; stroke-dasharray: 4 7; }
.g-edge { fill: none; stroke: #fff; stroke-width: 3.5; }
.g-edge-call, .g-edge-out { stroke: #9cc8ff; }
.g-edge-lbl { font-size: 18px; fill: var(--fg2) !important; }

.g-node rect { fill: rgba(255,255,255,.05); stroke: var(--fg2); stroke-width: 2; }
.g-node text { font-size: 30px; font-weight: 700; }
.g-code-node rect { fill: rgba(0,0,0,.35); stroke: #fff; }
.g-code-node text { font-family: var(--mono); font-size: 28px; }
.g-sub { font-size: 16px; fill: var(--fg2) !important; }
.g-sub-sans { font-size: 18px; font-weight: 400 !important; fill: #d6e6ff !important; }
.g-ans rect { fill: rgba(47,127,224,.22); stroke: #6aa8ff; }
.g-glow { fill: #2f7fe0; filter: blur(34px); }
.g-model text { font-size: 34px; font-weight: 700; fill: #fff !important; }

.g-pill rect { stroke-width: 2; }
.g-pill text { font-family: var(--mono) !important; font-size: 16px; font-weight: 700; }
.g-pill.m rect { fill: rgba(47,127,224,.28); stroke: #6aa8ff; }
.g-pill.m text { font-family: var(--font) !important; font-size: 17px; fill: #e3eeff !important; }
.g-pill.c rect { fill: rgba(0,0,0,.4); stroke: #fff; rx: 6; }
.g-pill.c text { fill: #fff !important; }

/* decisions (GSAP): GSAP owns opacity/transform, so drop the CSS transitions */
.g-dec .dec-pill, .g-dec .dec-q, .g-dec .dec-qt { transition: none; }
.g-dec .dec-q .dec-pill { opacity: 1; transform: none; }
.g-dec .dec-qt { color: var(--fg); letter-spacing: .02em; text-transform: none; font-size: 24px; }
.g-dec .q-tl .dec-qt { color: var(--blue-hi); }
.g-dec .dec-pill.mc { background: rgba(47,127,224,.55); border: 0; }
.g-dec .dec-xlbl, .g-dec .dec-ylbl span { font-family: var(--font); font-size: 22px; }

/* state machine (GSAP): the amber cursor is the state */
.g-sm-node { fill: rgba(0,0,0,.3); stroke: var(--fg2); stroke-width: 2; }
.g-sm-text { font-family: var(--mono) !important; font-size: 21px; font-weight: 700; fill: rgba(217,217,217,1); letter-spacing: .04em; }
.g-cursor { fill: var(--amber); filter: drop-shadow(0 0 22px rgba(243,184,78,.45)); }
.g-sm-lit { fill: none; stroke: #fff; stroke-width: 3.5; }
.g-sm-illegal { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 9 8; }
.g-sm.reject .g-cursor { stroke: var(--red); stroke-width: 4; }

/* labels: sentence case, no tracking (caps are reserved for enum values like GREETING) */
.ctx-h, .gv-lbl, .bud-m .k, .ts-stat .k, .sm-cell .k, .pa-lane b, .st-panel .k, .pp-ch, .td-l, .pv-label, .pv-box .k {
  text-transform: none; letter-spacing: 0;
}
.ctx-h, .gv-lbl, .bud-m .k, .ts-stat .k, .sm-cell .k, .st-panel .k { font-size: 16px; font-weight: 600; color: var(--mute); }
.pa-lane b { font-size: 19px; }
.pp-ch { font-family: var(--font); font-size: 15px; }
.td-l { font-family: var(--font); font-size: 14px; letter-spacing: 0; }
.legend .tag.model { font-family: var(--font); font-weight: 600; background: rgba(47,127,224,.22); }
.g-loop .g-node .g-sub-sans { font-size: 18px; font-weight: 400; }