[hidden] { display: none !important; }
:root {
  --bg: #0a0f15; --board: #0c131b; --surface: #111a24; --surface2: #16212d; --line: #243241; --line2: #2f4052;
  --ink: #e6edf3; --muted: #93a1b0; --dim: #5d6c7c;
  --cyan: #4cc3e6; --green: #4cc38a; --violet: #a78bfa; --amber: #f2b14c; --red: #ef6b5b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); }
button { font: inherit; }
:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--surface); color: var(--ink); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; top: 0.5rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 0.75rem 1.5rem; padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0d151e, #0b1118); z-index: 20; }
.brand { flex: 0 1 auto; min-width: 0; }
.brand h1 { font: 700 1.3rem/1.15 var(--serif); margin: 0; letter-spacing: 0.01em; }
.brand .sub { margin: 0; color: var(--muted); font-size: 0.82rem; }
.disc { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--dim); letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.4rem; }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: live 2.4s infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 138, 0.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(76, 195, 138, 0); } }
.controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; margin-left: auto; justify-content: flex-end; }
.ctl { background: var(--surface2); color: var(--ink); border: 1px solid var(--line2); border-radius: 7px; padding: 0.36rem 0.7rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ctl:hover { border-color: var(--cyan); }
.ctl.small { padding: 0.28rem 0.6rem; font-size: 0.8rem; }
.ctl.accent { background: #13394a; border-color: #2c6a82; color: #bfeaf8; }
.ctl.ok { background: #123829; border-color: #2c7a55; color: #c9f2dc; }
.ctl.amber { background: #3d2e12; border-color: #8a6420; color: #fde3b3; }
.ctl[aria-pressed="true"] { border-color: var(--cyan); }
.sel select { background: var(--surface2); color: var(--ink); border: 1px solid var(--line2); border-radius: 7px; padding: 0.34rem 0.5rem; font: 600 0.84rem var(--sans); max-width: 17rem; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; }
.seg button { background: var(--surface2); color: var(--muted); border: 0; padding: 0.36rem 0.65rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: #3d2e12; color: #fde3b3; }
.seg button + button { border-left: 1px solid var(--line2); }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line2); border-radius: 10px; padding: 0.35rem; z-index: 40; min-width: 13rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; }
.menu-list button { background: none; border: 0; color: var(--ink); text-align: left; padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; font-size: 0.88rem; }
.menu-list button:hover, .menu-list button:focus-visible { background: var(--surface2); }
.credit { font-size: 0.8rem; color: var(--muted); text-decoration: none; padding: 0.3rem 0.4rem; white-space: nowrap; }
.credit b { color: var(--ink); }
.credit:hover b { color: var(--cyan); }
.menu-btn { display: none; }

/* ---------- board ---------- */
#stage { position: relative; overflow: hidden; background: radial-gradient(70rem 40rem at 70% 0%, rgba(76, 195, 230, 0.06), transparent 60%), radial-gradient(50rem 30rem at 0% 100%, rgba(167, 139, 250, 0.05), transparent 60%), var(--board); }
#board { display: block; width: 100%; height: 100%; }
body[data-mode="v2"] #stage, body[data-mode="v3"] #stage { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body[data-mode="v2"] #board, body[data-mode="v3"] #board { height: auto; }
body[data-mode="v3"] #board { max-width: 760px; margin: 0 auto; }

.stage-label { font: 700 13px var(--sans); letter-spacing: 0.32em; fill: #7d8fa2; }
.stage-desc { font: 500 11px var(--sans); fill: var(--dim); letter-spacing: 0.02em; }
.stage-rule { stroke: var(--line); stroke-width: 1; }
.stage-arrow { fill: var(--dim); font-size: 16px; }
#board.vertical .stage-label { font-size: 12px; letter-spacing: 0.18em; fill: #8fa1b3; }
#board.vertical .stage-desc { font-size: 10.5px; }

.legend-box { fill: rgba(17, 26, 36, 0.7); stroke: var(--line); stroke-dasharray: 3 3; }
.legend-h { font: 700 10.5px var(--sans); fill: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.legend-t { font: 500 11px var(--sans); fill: var(--muted); }

/* nodes */
.node { cursor: pointer; transition: opacity 0.35s; outline: none; }
.node .box { fill: var(--surface); stroke: var(--line2); stroke-width: 1.2; transition: stroke 0.3s, fill 0.3s; }
.node:hover .box { stroke: #4a6378; fill: #13202c; }
.node .halo { fill: none; stroke: transparent; stroke-width: 2; }
.node:focus-visible .halo { stroke: var(--amber); stroke-width: 2.5; }
.node .accent { fill: var(--cyan); opacity: 0.85; }
.node.k-ai .accent { fill: var(--violet); }
.node.k-human .accent { fill: var(--amber); }
.node .label { font: 650 13.5px var(--sans); fill: var(--ink); }
.node .status { font: 500 11.5px var(--sans); fill: var(--muted); }
.node .num { font: 600 10px var(--mono); fill: #4f6072; }
.node.bar .box { fill: #0f1923; stroke-dasharray: 0; }
.node.bar .label { font-size: 13.5px; }
.ki { stroke-width: 1.4; }
.ki-platform { fill: var(--cyan); }
.ki-rules { fill: none; stroke: var(--cyan); }
.ki-ai { fill: var(--violet); }
.ki-human { fill: var(--amber); }
.node.active .box { stroke: var(--cyan); stroke-width: 2; fill: #122230; }
.node.active .halo { stroke: rgba(76, 195, 230, 0.45); filter: url(#glow); }
.node.k-human.active .box { stroke: var(--amber); }
.node.k-human.active .halo { stroke: rgba(242, 177, 76, 0.5); }
.node.flash .box { animation: nflash 0.9s ease-out; }
@keyframes nflash { 0% { fill: #1b3445; } 100% { fill: var(--surface); } }
.node.ping .accent { animation: nping 0.7s ease-out; }
@keyframes nping { 0% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 0.85; } }
#board.vertical .node .label { font-size: 13px; }
#board.vertical .node .status { font-size: 11px; }

/* edges */
.edge { fill: none; stroke-width: 1.6; opacity: 0.5; transition: opacity 0.35s, stroke-width 0.25s; stroke-linecap: round; }
.k-event { stroke: var(--cyan); }
.k-sync { stroke: var(--cyan); stroke-dasharray: 6 5; }
.k-proposal { stroke: var(--violet); stroke-dasharray: 2 4; }
.k-approval { stroke: var(--amber); }
.k-execute { stroke: var(--green); }
.k-outcome { stroke: var(--green); stroke-dasharray: 8 5; }
.k-exception { stroke: var(--red); stroke-dasharray: 5 4; opacity: 0.38; }
.k-request { stroke: #7fd6ef; stroke-dasharray: 1 5; }
.edge.lg { opacity: 0.95; stroke-width: 2; }
.arrow { stroke: none; }
.a-event, .a-sync { fill: var(--cyan); } .a-proposal, .a-request { fill: var(--violet); } .a-approval { fill: var(--amber); }
.a-execute, .a-outcome { fill: var(--green); } .a-exception { fill: var(--red); }
.edge.traced { opacity: 0.85; stroke-width: 2.1; }
.edge.live { opacity: 1; stroke-width: 2.8; filter: url(#glow); }
#board.focus-soft .edge:not(.inj):not(.live) { opacity: 0.26; }
#board.focus-soft .edge.inj { opacity: 0.7; }
#board.focus-journey .edge:not(.inj):not(.live), #board.focus-node .edge:not(.inj) { opacity: 0.1; }
#board.focus-journey .edge.inj, #board.focus-node .edge.inj { opacity: 0.85; stroke-width: 2.1; }
#board.focus-journey .node:not(.inj), #board.focus-node .node:not(.inj) { opacity: 0.4; }
#board.focus-node .node.inj .box { stroke: #4a6378; }

/* packets */
.packet .pk { filter: url(#glow); }
.packet.k-event .pk, .packet.k-sync .pk, .packet.k-request .pk { fill: #8fe3fb; }
.packet.k-proposal .pk { fill: #c9b6ff; }
.packet.k-approval .pk { fill: #ffd38a; }
.packet.k-execute .pk, .packet.k-outcome .pk { fill: #8ef0bf; }
.packet.k-exception .pk { fill: #ff9a8c; }
.packet .trail { fill: currentColor; }
.packet.k-event, .packet.k-sync, .packet.k-request { color: var(--cyan); }
.packet.k-proposal { color: var(--violet); } .packet.k-approval { color: var(--amber); }
.packet.k-execute, .packet.k-outcome { color: var(--green); } .packet.k-exception { color: var(--red); }
.packet .t0 { opacity: 0.5; } .packet .t1 { opacity: 0.3; } .packet .t2 { opacity: 0.15; }
.packet.faint { opacity: 0.42; }
.packet.faint .pk { filter: none; }
#board.focus-journey .packet.faint, #board.focus-node .packet.faint { opacity: 0.16; }
.packet.ec .pk { stroke: #fff; stroke-width: 1; }

/* micro visuals */
.mt-txt { font: 600 11px var(--sans); fill: #c3cfdb; }
.mt-dim { font: 500 10px var(--sans); fill: var(--dim); }
.mt-txt.amber, .mt-txt.r-wait, .mt-txt.t-wait { fill: var(--amber); }
.mt-txt.t-ok, .mt-txt.r-approved { fill: var(--green); }
.mt-txt.t-warn, .mt-txt.r-hold { fill: var(--red); }
.mt-txt.r-revise { fill: var(--amber); }
.mt-tick { fill: #1d2c3a; animation: tick 2.8s ease-in-out infinite; }
.mt-tick.lit { fill: var(--cyan); animation: none; }
@keyframes tick { 0%, 100% { fill: #1d2c3a; } 12% { fill: #2f5a70; } }
.mt-track { fill: #1a2735; }
.mt-track-l { stroke: #22313f; stroke-width: 2; }
.mt-fill { fill: var(--cyan); transition: width 0.6s; }
.mt-fill.stale { fill: var(--amber); opacity: 0.6; }
.mt-fill.s0 { fill: var(--cyan); } .mt-fill.s1 { fill: var(--green); } .mt-fill.s2 { fill: var(--violet); }
.mt-fill.aud { fill: var(--cyan); animation: aud 3s ease-in-out infinite; }
@keyframes aud { 50% { opacity: 0.6; } }
.mt-thresh { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 2 2; }
.mt-av { fill: #1d2c3a; stroke: var(--line2); }
.mt-av.t-ok { fill: #123829; stroke: var(--green); } .mt-av.t-wait { fill: #3d2e12; stroke: var(--amber); } .mt-av.t-warn { fill: #3d1712; stroke: var(--red); }
.mt-avt { font: 700 9.5px var(--sans); fill: var(--ink); }
.mt-waitdot { fill: var(--amber); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.mt-bar { fill: #2a6b85; animation: bar 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes bar { 50% { transform: scaleY(0.82); } }
.mt-mag circle { fill: none; stroke: #7fd6ef; stroke-width: 2; } .mt-mag line { stroke: #7fd6ef; stroke-width: 2.2; stroke-linecap: round; }
.mt-mag.spin { animation: magspin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes magspin { 50% { transform: translate(3px, -2px); } }
.mt-badge { fill: #1a2735; stroke: var(--line2); } .mt-badge.b-unverified { fill: #3d2e12; stroke: var(--amber); } .mt-badge.b-verified { fill: #123829; stroke: var(--green); } .mt-badge.b-searching { fill: #241d3f; stroke: var(--violet); }
.mt-badget { font: 600 9.5px var(--sans); fill: var(--ink); }
.mt-q { fill: #18242f; stroke: #263646; animation: q 3.2s linear infinite; }
.mt-q.on { fill: #24526a; stroke: var(--cyan); animation: none; }
.mt-q.on.amber { fill: #3d2e12; stroke: var(--amber); animation: blink 1.8s infinite; }
.mt-q.warn { fill: #3d1712; stroke: var(--red); }
@keyframes q { 0%, 100% { fill: #18242f; } 20% { fill: #1f3442; } }
.mt-dot { transition: cx 0.8s ease; } .mt-dot.a { fill: var(--cyan); } .mt-dot.b { fill: #7fd6ef; } .mt-dot.b.amb { fill: var(--amber); } .mt-dot.c { fill: #3a5266; }
.mt-dot.drift { animation: drift 4s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateX(80px); } }
.mt-ring { fill: none; stroke: var(--green); stroke-width: 1.5; }
.mt-q-mark { font: 700 12px var(--sans); fill: var(--amber); }
.mt-chk { fill: #18242f; stroke: #2c3e50; }
.mt-chk.pend { animation: chk 3s ease-in-out infinite; }
@keyframes chk { 50% { stroke: #4a6378; } }
.mt-chk.ok { fill: #123829; stroke: var(--green); } .mt-chk.bad { fill: #3d1712; stroke: var(--red); }
.mt-tickmark { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-xmark { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.mt-field { fill: none; stroke: #2c3e50; stroke-dasharray: 3 2; }
.mt-field:not(.on) { animation: chk 3.4s ease-in-out infinite; }
.mt-field.on { fill: #1d4559; stroke: var(--cyan); stroke-dasharray: 0; }
.mt-role { fill: none; stroke: #3a4b5c; stroke-dasharray: 3 2; stroke-width: 1.5; }
.mt-role.r-ok { fill: #123829; stroke: var(--green); stroke-dasharray: 0; }
.mt-role.r-wait { fill: #3d2e12; stroke: var(--amber); stroke-dasharray: 0; animation: blink 1.6s infinite; }
.mt-rolet { font: 700 10px var(--sans); fill: var(--dim); } .mt-rolet.r-ok { fill: #c9f2dc; } .mt-rolet.r-wait { fill: #fde3b3; }
.mt-pill { fill: #18242f; stroke: #263646; } .mt-pill.on { fill: #1d4559; stroke: var(--cyan); }
.mt-pillt { font: 600 9.5px var(--sans); fill: var(--dim); } .mt-pillt.on { fill: #d8f3fc; }
.mt-line { fill: #1a2735; } .mt-line.on { fill: var(--cyan); transition: width 0.8s; } .mt-line.on.ai { fill: var(--violet); }
.mt-caret { fill: var(--violet); animation: blink 1s steps(1) infinite; } .mt-caret.idle { fill: #3a4b5c; }
.mt-doc { fill: #18242f; stroke: #7fd6ef; stroke-width: 1.3; }
.mt-fresh { fill: var(--green); animation: blink 3s infinite; } .mt-fresh.t-warn { fill: var(--amber); }
.mt-rev { fill: #18242f; stroke: #3a4b5c; stroke-width: 1.5; }
.mt-rev.r-wait { fill: #3d2e12; stroke: var(--amber); animation: waitring 1.8s ease-in-out infinite; }
@keyframes waitring { 50% { stroke-width: 3; } }
.mt-rev.r-approved { fill: #123829; stroke: var(--green); } .mt-rev.r-revise { fill: #3d2e12; stroke: var(--amber); } .mt-rev.r-hold { fill: #3d1712; stroke: var(--red); }
.mt-revi { font: 700 12px var(--sans); fill: var(--muted); } .mt-revi.r-wait { fill: var(--amber); } .mt-revi.r-approved { fill: var(--green); } .mt-revi.r-revise { fill: var(--amber); } .mt-revi.r-hold { fill: var(--red); }
.mt-txt.r-idle { fill: var(--muted); }
.mt-step { fill: #18242f; stroke: #2c3e50; } .mt-step.on { fill: var(--green); stroke: var(--green); } .mt-step.cur { stroke: var(--cyan); stroke-width: 2; animation: waitring 1.6s infinite; }
.mt-fun { fill: #18242f; stroke: #263646; } .mt-fun.on { fill: #123829; stroke: var(--green); }
.mt-funt { font: 600 9.5px var(--sans); fill: var(--dim); } .mt-funt.on { fill: #c9f2dc; }
.mt-spark { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; }
.mt-sparkdot { fill: var(--green); animation: blink 2.4s infinite; }
.mt-hd { fill: var(--green); } .mt-hd.h-ok { animation: hd 4s ease-in-out infinite; } .mt-hd.h-warn { fill: var(--amber); animation: blink 0.8s infinite; } .mt-hd.h-bad { fill: var(--red); }
@keyframes hd { 50% { opacity: 0.55; } }
.mt-retry circle { fill: none; stroke: #22313f; stroke-width: 2; } .mt-retry path { fill: none; stroke: #3a4b5c; stroke-width: 2; }
.mt-retry.on { animation: spin 1s linear infinite; transform-box: fill-box; transform-origin: center; } .mt-retry.on path { stroke: var(--amber); }
.mt-retry:not(.on) { animation: spin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
body.paused .node *, body.paused .live { animation-play-state: paused !important; }

/* ---------- story strip ---------- */
.story { position: relative; display: flex; align-items: center; gap: 0.6rem 1rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--line); background: #0d151e; z-index: 15; min-height: 3.4rem; }
.chip { flex: none; display: flex; flex-direction: column; line-height: 1.2; padding: 0.25rem 0.7rem; border-left: 3px solid var(--cyan); }
.chip b { font-size: 0.8rem; color: var(--ink); } .chip span { font-size: 0.75rem; color: var(--muted); }
.cap { margin: 0; flex: 1; min-width: 0; font-size: 0.95rem; color: #d7e1ea; }
.simtag { flex: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fde3b3; background: #3d2e12; border: 1px solid #8a6420; border-radius: 999px; padding: 0.15rem 0.55rem; }
.cap-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; flex: none; }
.cap-actions > div { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.why-pop { position: absolute; right: 1.1rem; bottom: calc(100% + 8px); max-width: 30rem; background: var(--surface); border: 1px solid #5a4a8a; border-left: 3px solid var(--violet); border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.88rem; color: #d7e1ea; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.why-pop b { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); margin-bottom: 0.2rem; }
.toast { position: absolute; right: 1rem; top: 0.8rem; max-width: 24rem; background: rgba(17, 26, 36, 0.96); border: 1px solid var(--line2); border-left: 3px solid var(--red); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.86rem; z-index: 12; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.toast.show { animation: toastin 0.3s ease-out; }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- drawer ---------- */
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(430px, 100%); background: #0f1720; border-left: 1px solid var(--line2); z-index: 30; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45); animation: din 0.25s ease-out; }
@keyframes din { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font: 700 1.2rem var(--serif); margin: 0; }
.drawer-body { overflow-y: auto; padding: 1rem 1.1rem 2rem; font-size: 0.92rem; }
.det-stage { margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kbs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.kb { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.12rem 0.55rem; border: 1px solid; }
.kb-platform, .kb-rules { color: #bfeaf8; border-color: #2c6a82; background: #10303d; }
.kb-ai { color: #ddd3ff; border-color: #6a58b8; background: #221b3d; }
.kb-human { color: #fde3b3; border-color: #8a6420; background: #3d2e12; }
.det-purpose { font: 600 1.02rem/1.45 var(--serif); margin: 0 0 0.7rem; }
.det-now { margin: 0 0 0.8rem; padding: 0.5rem 0.7rem; background: #10202b; border-radius: 8px; font-size: 0.86rem; }
.det-now span { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-right: 0.5rem; }
.det-dl { margin: 0; display: grid; gap: 0.15rem; }
.det-dl dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.55rem; }
.det-dl dd { margin: 0; color: #d7e1ea; }
.det-art { margin-top: 1.1rem; }
.det-conn { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.det-conn summary { cursor: pointer; font-weight: 700; font-size: 0.86rem; }
.det-conn ul, .ledger { list-style: none; padding: 0; margin: 0.2rem 0 0.4rem; }
.det-conn li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; font-size: 0.86rem; }
.ek { display: inline-block; width: 22px; height: 0; border-top: 2px solid; flex: none; }
.ek.k-event, .ek.k-sync, .ek.k-request { border-color: var(--cyan); } .ek.k-sync, .ek.k-request { border-top-style: dashed; }
.ek.k-proposal { border-color: var(--violet); border-top-style: dotted; } .ek.k-approval { border-color: var(--amber); }
.ek.k-execute { border-color: var(--green); } .ek.k-outcome { border-color: var(--green); border-top-style: dashed; } .ek.k-exception { border-color: var(--red); border-top-style: dashed; }
.linkbtn { margin-top: 1.2rem; background: none; border: 0; color: var(--cyan); font-weight: 700; cursor: pointer; padding: 0; }
.ledger li { display: grid; grid-template-columns: 3rem 1.6rem 1fr; gap: 0.4rem; align-items: start; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.ledger .t { font: 600 0.75rem var(--mono); color: var(--muted); padding-top: 0.1rem; }
.ledger .ek { margin-top: 0.55rem; }

/* artifacts */
.art { background: var(--surface); border: 1px solid var(--line2); border-radius: 12px; padding: 0.9rem 1rem; }
.art + .art { margin-top: 0.8rem; }
.art-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
.art h4 { font: 700 1.02rem/1.3 var(--serif); margin: 0.1rem 0 0; }
.art-k { margin: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.art-sub { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.82rem; }
.art-note { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--muted); border-top: 1px dashed var(--line2); padding-top: 0.5rem; }
.tag { flex: none; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.55rem; background: #10303d; border: 1px solid #2c6a82; color: #bfeaf8; white-space: nowrap; }
.tag.ai { background: #221b3d; border-color: #6a58b8; color: #ddd3ff; } .tag.ok { background: #123829; border-color: #2c7a55; color: #c9f2dc; } .tag.amber { background: #3d2e12; border-color: #8a6420; color: #fde3b3; }
.art-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.9rem; margin: 0.4rem 0; font-size: 0.86rem; }
.art-kv dt { color: var(--muted); font-weight: 600; } .art-kv dd { margin: 0; }
.src { display: inline-block; margin-left: 0.4rem; font-size: 0.68rem; color: #7fd6ef; background: #10303d; border-radius: 4px; padding: 0 0.3rem; }
.art-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 0.4rem 0 0.6rem; }
.art-table th { text-align: left; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line2); }
.art-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.art-table.metrics td:last-child { text-align: right; }
.art-roles { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.art-roles li { display: flex; gap: 0.6rem; align-items: center; padding: 0.45rem 0.6rem; border: 1px solid var(--line2); border-radius: 8px; }
.art-roles .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed #4a5a6b; flex: none; }
.art-roles .r-ok .dot { background: var(--green); border: 0; } .art-roles .r-wait .dot { background: var(--amber); border: 0; }
.art-roles b { display: block; font-size: 0.86rem; } .art-roles span { font-size: 0.8rem; color: var(--muted); }
.art-brief { margin: 0; } .art-brief dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); margin-top: 0.55rem; } .art-brief dd { margin: 0.1rem 0 0; font-size: 0.88rem; }
.cmp { display: grid; gap: 0.6rem; }
.mail { background: #0b1219; border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 0.86rem; }
.mail p { margin: 0 0 0.45rem; } .mail p:last-child { margin: 0; }
mark.bad { background: rgba(239, 107, 91, 0.2); color: #ffc6bd; text-decoration: line-through; text-decoration-color: var(--red); padding: 0 0.15rem; border-radius: 3px; }
.cmp-note { background: #2a2010; border: 1px solid #8a6420; border-radius: 8px; padding: 0.5rem 0.7rem; }
.cmp-note p { margin: 0.35rem 0 0; font-size: 0.86rem; color: #fde3b3; }
.cmp-col.pending .mail { opacity: 0.6; }
.art-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.86rem; }
.art-check li { display: flex; gap: 0.55rem; } .art-check span { color: var(--green); font-weight: 800; }
.art-states { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 0.6rem 0 0; }
.art-states li { font-size: 0.74rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--line2); color: var(--dim); }
.art-states li.on { color: var(--ink); border-color: var(--cyan); background: #10303d; }
.about { font-size: 0.92rem; }
.about .lede { font: 600 1.05rem/1.5 var(--serif); margin-top: 0; }
.about h4 { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 0.4rem; }
.about ul { padding-left: 1.1rem; margin: 0; } .about li { margin-bottom: 0.35rem; }
.cta { margin-top: 1.4rem; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #10303d, #1a1838); border: 1px solid #2c6a82; }
.cta p { margin: 0 0 0.7rem; }
.btn { display: inline-block; background: var(--cyan); color: #06222d; font-weight: 800; text-decoration: none; border: 0; border-radius: 8px; padding: 0.6rem 1rem; cursor: pointer; font-size: 0.95rem; }
.btn:hover { filter: brightness(1.08); }
.leg-shapes, .leg-lines { list-style: none; padding: 0 !important; }
.leg-shapes li, .leg-lines li { display: flex; align-items: center; gap: 0.6rem; }
.sh { display: inline-block; width: 1.1rem; text-align: center; } .sh-platform, .sh-rules { color: var(--cyan); } .sh-ai { color: var(--violet); } .sh-human { color: var(--amber); }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(6, 10, 15, 0.62); backdrop-filter: blur(3px); }
.intro-card { max-width: 34rem; background: #0f1720; border: 1px solid var(--line2); border-radius: 16px; padding: 1.6rem 1.7rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: din 0.4s ease-out; }
.intro-card .kicker { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.intro-card h2 { font: 700 2rem/1.15 var(--serif); margin: 0.2rem 0 0.6rem; }
.intro-card p { margin: 0 0 0.7rem; }
.flow { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; color: var(--dim); font-weight: 700; }
.flow span { color: var(--ink); background: var(--surface2); border: 1px solid var(--line2); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.82rem; letter-spacing: 0.04em; }
.intro-key { list-style: none; padding: 0; margin: 0 0 0.8rem; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.8rem; }
.credit-line { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0 !important; }
.noscript { padding: 2rem; }

/* ---------- vertical / mobile ---------- */
body[data-mode="v2"], body[data-mode="v3"] { font-size: 14.5px; }
body[data-mode="v2"] .top, body[data-mode="v3"] .top { padding: 0.5rem 0.85rem; }
body[data-mode="v2"] .brand h1 { font-size: 1.12rem; }
body[data-mode="v2"] .brand .sub { font-size: 0.76rem; }
body[data-mode="v2"] .disc { font-size: 0.66rem; }
body[data-mode="v2"] .menu-btn, body[data-mode="v3"] .menu-btn { display: inline-block; margin-left: auto; }
body[data-mode="v2"] .controls, body[data-mode="v3"] .controls { display: none; }
body.menu-open[data-mode="v2"] .controls, body.menu-open[data-mode="v3"] .controls { display: flex; position: fixed; left: 0.6rem; right: 0.6rem; top: 3.9rem; z-index: 45; background: #0f1720; border: 1px solid var(--line2); border-radius: 14px; padding: 0.8rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); justify-content: flex-start; gap: 0.5rem; }
body[data-mode="v2"] .controls .sel, body[data-mode="v2"] .controls .sel select { width: 100%; max-width: none; }
body[data-mode="v2"] .controls .sel { flex: 1 1 100%; }
body[data-mode="v2"] .credit { flex: 1 1 100%; padding-top: 0.4rem; }
body[data-mode="v2"] .menu-list { left: 0; right: auto; }
body[data-mode="v2"] .story, body[data-mode="v3"] .story { flex-wrap: wrap; padding: 0.55rem 0.85rem calc(0.55rem + env(safe-area-inset-bottom)); gap: 0.35rem 0.6rem; }
body[data-mode="v2"] .chip { flex-direction: row; gap: 0.4rem; align-items: baseline; padding: 0 0.5rem; }
body[data-mode="v2"] .cap { flex: 1 1 100%; font-size: 0.9rem; order: 2; }
body[data-mode="v2"] .simtag { order: 1; }
body[data-mode="v2"] .cap-actions { order: 3; flex: 1 1 100%; }
body[data-mode="v2"] .cap-actions .ctl.small { padding: 0.45rem 0.7rem; font-size: 0.84rem; }
body[data-mode="v2"] .why-pop { left: 0.6rem; right: 0.6rem; max-width: none; }
body[data-mode="v2"] .toast, body[data-mode="v3"] .toast { position: fixed; top: auto; bottom: 8.5rem; left: 0.6rem; right: 0.6rem; max-width: none; }
body[data-mode="v2"] .drawer, body[data-mode="v3"] .drawer { top: auto; left: 0; width: 100%; max-height: 82dvh; border-left: 0; border-top: 1px solid var(--line2); border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5); animation: sheet 0.28s ease-out; }
@keyframes sheet { from { transform: translateY(30px); opacity: 0; } }
body[data-mode="v2"] .drawer-body { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
body[data-mode="v2"] .intro-card { padding: 1.2rem 1.2rem; }
body[data-mode="v2"] .intro-card h2 { font-size: 1.6rem; }

/* ---------- reduced motion ---------- */
body.reduced *, body.reduced *::before, body.reduced *::after { animation: none !important; transition: none !important; }
body.reduced .edge.live { filter: none; }

.mt-txt.route { fill: #d8f3fc; }
.mt-idle { fill: var(--dim); font-weight: 500; }
@media (max-width: 1320px) { body[data-mode="desktop"] .brand .sub { display: none; } body[data-mode="desktop"] .credit { display: none; } }
body.menu-open[data-mode="v2"] .controls, body.menu-open[data-mode="v3"] .controls { flex-wrap: wrap; }

.disc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button { white-space: nowrap; }
.sel select { max-width: 14rem; }
body[data-mode="v2"] .brand, body[data-mode="v3"] .brand { flex: 1 1 auto; }
body[data-mode="v2"] .menu-btn, body[data-mode="v3"] .menu-btn { flex: none; }
body[data-mode="v2"] .disc { white-space: normal; }
body { grid-template-columns: minmax(0, 1fr); }
.top { min-width: 0; }
body[data-mode="desktop"] .controls { flex-wrap: wrap; min-width: 0; }
body[data-mode="desktop"] .ctl, body[data-mode="desktop"] .seg button { padding: 0.32rem 0.58rem; font-size: 0.8rem; }
body[data-mode="desktop"] .sel select { max-width: 12.5rem; font-size: 0.8rem; }
body[data-mode="desktop"] .brand h1 { font-size: 1.2rem; }
body[data-mode="desktop"] .disc { font-size: 0.68rem; }

body[data-mode="v2"] .brand .sub { display: none; }
body[data-mode="v2"] .disc { font-size: 0.64rem; }

body.fitw #stage { overflow-y: auto; overscroll-behavior: contain; }
body.fitw #board { height: auto; }
.menu-link { color: var(--ink); text-decoration: none; padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.88rem; }
.menu-link:hover { background: var(--surface2); }
@media (max-width: 1240px) {
  body[data-mode="desktop"] .sel select { max-width: 10.5rem; }
  body[data-mode="desktop"] .ctl, body[data-mode="desktop"] .seg button { padding: 0.3rem 0.5rem; font-size: 0.78rem; }
  body[data-mode="desktop"] .disc { max-width: 18rem; }
}
@media (max-width: 1060px) { body[data-mode="desktop"] .disc { display: none; } body[data-mode="desktop"] #restart { display: none; } }