* { box-sizing:border-box; }
:root { --teal:#0f766e; --highlight:#a8e1d9; --line:#e0e8e6; --quiet:#7d8b88; }
body { margin:0; background:#fff; color:#222c2a; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1320px,calc(100% - 64px)); margin:24px auto; }
header { color:var(--teal); font-size:18px; font-weight:650; }
h1 { max-width:980px; margin:16px 0 12px; font-size:clamp(23px,3vw,28px); font-weight:550; letter-spacing:-.6px; line-height:1.3; }
h2 { margin:0; font-size:17px; font-weight:650; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; border:0; border-radius:8px; background:#222c2a; color:#fff; padding:10px 18px; white-space:nowrap; }
button:hover { background:var(--teal); }
button:disabled { cursor:default; opacity:.45; }
button>span { margin-left:10px; font-size:11px; }
.controls { display:flex; align-items:center; gap:14px; }
#speed { font:inherit; font-size:13px; color:#667570; border:0; background:transparent; padding:8px 2px; cursor:pointer; }
#clear { background:none; color:#667570; padding:8px 0; font-size:13px; }
:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
.standalone-guide { color:#667570; font-size:13px; margin-bottom:28px; }
.relay-bar { display:flex; align-items:center; gap:24px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.topology { display:flex; flex:1; min-width:0; gap:25px; margin:0; padding:0; list-style:none; }
.topology li { position:relative; display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:12px; }
.topology strong { display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; background:#f1f5f4; border-radius:50%; color:#5f706a; font-size:11px; }
.topology span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topology li:not(:last-child)::after { content:"→"; position:absolute; right:-19px; color:#8c9b97; font-size:16px; }
.topology li.reached strong { background:#d5eeea; color:var(--teal); }
.method { margin-top:22px; }
.method-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.method-name,.run-status { display:flex; align-items:center; gap:12px; }
.channel-label { font-size:12px; color:#6b7974; }
#rclc-title { color:var(--teal); }
.activity { display:flex; align-items:center; gap:6px; font-size:11px; color:#7d8b88; }
.activity::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.activity.running::before { animation:pulse 1.2s ease-in-out infinite; }
.activity.complete { color:var(--teal); }
.time { min-width:78px; text-align:right; font-size:19px; line-height:1; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
#rclc-time { color:var(--teal); }
.row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.chunk { position:relative; height:320px; min-width:0; border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; }
.source-title { display:flex; justify-content:space-between; gap:8px; margin:0 0 12px; color:#53665f; font-size:11px; font-weight:600; }
.source-title>span { color:#90a09a; font-weight:400; white-space:nowrap; }
.document-body,.message-body { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#c9d4d0 transparent; padding-right:10px; white-space:pre-wrap; overflow-wrap:anywhere; }
.document-body { font:11.5px/1.85 Georgia,"Times New Roman",serif; color:#68776f; }
mark { color:#104f47; background:var(--highlight); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.source.is-selecting mark { animation:highlight var(--selection-duration,.3s) ease-out both; }
.source.is-selecting .document-body { background:linear-gradient(180deg,transparent,#eef9f6 50%,transparent) 0 -300px/100% 150px no-repeat; animation:scan var(--selection-duration,.3s) linear both; }
.position-map { width:100%; height:13px; display:block; margin:12px 0 0; border-radius:2px; }
.position-map rect { fill:#e7edeb; }
.position-map rect.selected { fill:var(--teal); }
.source.is-selecting .position-map { animation:pulse .65s ease-in-out infinite; }
.source>.position-map { margin:0; flex-shrink:0; }
.source>.handoff { margin-bottom:12px; }
.handoff { display:flex; align-items:center; gap:8px; position:relative; height:29px; flex-shrink:0; color:#95a49e; font-size:10px; }
.handoff>span { position:relative; z-index:1; background:white; padding-right:8px; }
.handoff::after { content:"→"; position:absolute; right:-18px; color:#b3c2bc; font-size:16px; }
.handoff-track { position:absolute; left:0; right:-13px; bottom:5px; height:1px; background:#e7eeeb; }
.packet { position:absolute; left:0; top:-4px; display:flex; gap:2px; opacity:0; }
.packet i { width:5px; height:9px; border-radius:1px; background:var(--teal); }
.source.has-passed .handoff { color:var(--teal); }
.source.has-passed .handoff::after { color:var(--teal); }
.source.has-passed .packet { animation:pass-state 1.1s cubic-bezier(.2,.6,.3,1) both; }
.message-body { font-size:12px; line-height:1.75; color:#56665f; }
.message-title { color:#788980; }
.message-card.is-writing .message-body::after { content:""; display:inline-block; height:1em; width:2px; background:#55665e; vertical-align:text-bottom; margin-left:3px; animation:cursor .8s steps(1) infinite; }
.message-card .handoff::after { color:#9ca9a3; }
.message-card.has-passed .handoff { color:#53665f; }
.placeholder { color:#a4afa9; font-size:11px; line-height:1.65; white-space:normal; margin:0; }
.waiting-state { display:flex; gap:5px; margin:24px 0 12px; }
.waiting-state i { width:6px; height:6px; background:#e2e9e6; border-radius:50%; }
.is-writing .waiting-state i { animation:pulse .9s ease-in-out infinite; }
.answer { padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#f9fbfa; }
.answer .source-title { margin-bottom:12px; }
.answer-check { margin:0 0 12px; font-size:16px; font-weight:650; line-height:1.45; color:var(--teal); }
.answer.complete { background:#f1f9f7; border-color:#c9e7df; }
.answer.unresolved { background:#fcfaf6; border-color:#ece4d4; }
.unresolved .answer-check { color:#956724; font-size:14px; }
.answer.is-writing .source-title { color:var(--teal); }
.answer .message-body { font-size:12px; }
strong { font-weight:650; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:24px; font-size:10px; color:#8a9992; }
footer p { margin:0; }
footer a { flex-shrink:0; }
a { color:inherit; text-underline-offset:3px; }
#error { color:#8e2b1d; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.embedded header,.embedded #question,.embedded .standalone-guide { display:none; }
.embedded main { margin:20px auto; }
@keyframes highlight { from { background-color:transparent; color:#68776f; } to { background-color:var(--highlight); color:#104f47; } }
@keyframes scan { to { background-position:0 400px; } }
@keyframes pulse { 50% { opacity:.4; } }
@keyframes cursor { 50% { opacity:0; } }
@keyframes pass-state { 0% { left:0; opacity:0; } 15% { opacity:1; } 80% { opacity:1; } 100% { left:calc(100% - 24px); opacity:0; } }
@media(max-width:900px) {
  main { width:calc(100% - 36px); }
  .relay-bar { gap:16px; }
  .topology { gap:16px; }
  .topology li { gap:5px; font-size:10px; }
  .topology li:not(:last-child)::after { right:-12px; font-size:13px; }
  .controls { gap:8px; }
  button { padding:9px 12px; }
  .row { gap:16px; }
  .handoff::after { right:-13px; }
  .handoff-track { right:-8px; }
  .source-title>span { display:none; }
}
@media(max-width:680px) {
  .relay-bar { flex-wrap:wrap; }
  .topology { flex-basis:100%; }
  .controls { margin-left:auto; }
  .method-heading { align-items:flex-start; }
  .method-name { align-items:flex-start; flex-direction:column; gap:2px; }
  .run-status { flex-direction:column-reverse; align-items:flex-end; gap:7px; }
  .time { font-size:18px; }
  .row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .chunk { height:280px; }
  .chunk:nth-child(2) .handoff::after { right:0; content:"↓"; }
  .chunk:nth-child(2) .handoff-track { right:5px; }
  footer { flex-direction:column; gap:8px; }
}
@media(max-width:420px) {
  main { width:calc(100% - 28px); }
  .row { gap:14px; }
  .document-body { font-size:10.5px; }
  .message-body { font-size:11px; }
  .channel-label { font-size:10px; }
  .source-title { font-size:10px; }
  .topology span { font-size:9px; }
  .topology strong { width:18px; height:18px; font-size:9px; }
  .answer { padding-inline:10px; }
  .answer-check { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; } }