/* Demo styles adapted from the NoteBank project page, 2026-10-11. */
:root{--blue:#3a69ad;--wine:#a6344c;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;padding:8px;background:#fdfcf8;color:#37352f;font:14px/1.65 var(--sans)}h1,h2,h3,p{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stream-player{position:relative;margin:0 auto;padding:0 0 16px;max-width:1050px}.stream-heading{display:flex;justify-content:space-between;align-items:center;padding:0 10px 9px;gap:20px}.stream-heading h3{font-size:16px;font-weight:500}.stream-heading>span{font-size:11px;color:#999}.stream-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.stream-viewport svg{display:block;width:100%;min-width:700px;font-family:var(--sans);overflow:hidden}.archive-outline{fill:#fff;stroke:#ccc;stroke-width:1}.archive-title{font-size:19px;font-weight:600;fill:var(--wine)}.svg-overline{font-size:11px;letter-spacing:1px;fill:#777;font-weight:500}.svg-explainer{font-size:15px;fill:#888}.svg-meta{font-size:11px;fill:#888}.svg-note,.svg-token{font-size:13px;fill:#444;font-weight:400}.svg-ellipsis{font-size:14px;fill:#999}.archive-note,.input-token,.evidence-token{stroke-width:1}.note-color-0{fill:#f9e9ed;stroke:#dca6b3}.note-color-1{fill:#e6f4f1;stroke:#9dcfc7}.note-color-2{fill:#fcf3dc;stroke:#e0c78e}.note-color--1,.omitted-note{fill:#f5f5f5;stroke:#ddd}.retrieved rect{stroke:var(--wine);stroke-width:2}.retrieved text{font-weight:600}.stream-track{stroke:#ddd;stroke-width:1.5;fill:none}.state-core{fill:var(--blue);stroke:var(--blue);stroke-width:1}.state-halo{fill:#edf2fa;stroke:#bacce5;stroke-width:1.5}.state-symbol{font-size:25px;font-weight:600;fill:white}.state-wave{stroke:#7c9ac5;stroke-width:2;fill:none}.state-label{font-size:15px;fill:var(--blue);font-weight:600}.question-token{fill:#f1eaf7;stroke:#b49bca}.route-line{stroke:#7955a0;stroke-width:1.5;stroke-dasharray:5 5;fill:none}.answer-token{fill:#edf2f9;stroke:#b4c7e0}.chunk-bracket{stroke:#ccc;fill:none;stroke-width:1}.stream-controls{display:flex;align-items:center;gap:10px;padding:0 10px}.stream-controls button{font-size:12px;background:white;border:0;padding:6px 9px;border-radius:3px;color:#888;white-space:nowrap}.stream-controls .stream-play{color:var(--blue);border:1px solid #ccd7e8;min-width:70px}.stream-controls .stream-restart{color:#888}.phase-buttons{display:flex;justify-content:center;gap:5px;flex:1}.phase-buttons button[aria-pressed=true]{color:var(--blue);background:#edf2fa}.stream-clock{font:11px ui-monospace,SFMono-Regular,monospace;color:#999;white-space:nowrap}.stream-timeline{display:block;width:calc(100% - 20px);height:3px;margin:17px 10px;accent-color:var(--blue);cursor:pointer}.stream-caption{font-size:12px;line-height:1.6;color:#888;text-align:center;margin:0 auto;min-height:20px;padding:0 12px}
.note-speaker{font-size:9px;letter-spacing:.45px;font-weight:600;fill:#666}
.svg-case-detail{font-size:12px;fill:#888}
.interview-label{font-size:14px;font-weight:500;fill:#555}
.speaker-0{fill:#a6344c}.speaker-1{fill:#139888}.speaker-2{fill:#c18a21}
.archive-omission{font-size:9px}
.input-equation{font-size:15px;fill:#666}.case-note{font-size:12px;fill:#444}.case-question,.case-answer{font-size:12px;fill:#444}.note-color-3{fill:#edf2f8;stroke:#b8c9df}.speaker-3{fill:#3a69ad}.answer-step-3{fill:#f9e9ed;stroke:#dca6b3}.retrieved .case-note{font-weight:500}
.stream-heading{display:block;padding:0 0 10px}.stream-heading h3{font-size:16px}.stream-heading>span{font-size:11px}.stream-controls{flex-wrap:wrap;padding:0;gap:8px;margin-top:12px}.stream-controls button{min-height:36px;padding:6px}.phase-buttons{order:4;flex-basis:100%;justify-content:space-between;gap:0}.stream-clock{margin-left:auto}.stream-timeline{margin:20px 0;width:100%;height:6px}.stream-caption{padding:0;text-align:left;color:#666;min-height:40px}.stream-player{padding-bottom:0}
@media(max-width:420px){.phase-buttons button{font-size:10px;padding:6px 3px}.stream-heading>span:after{content:' · Swipe to explore'}.stream-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}