/* Scoped dark-teal laboratory surfaces; all charts use original vectors and data. */
.interactive-demo { --lab-ink:#eef8f5; --lab-muted:#a7c3bf; --lab-accent:#3ecdb1; --lab-warm:#f0bd7b; --lab-line:#31565a; --lab-paper:#0c2d32; --lab-surface:#123a3f; --lab-control-border:#5b8984; color:var(--lab-ink); color-scheme:dark; font-family:var(--sans,Inter,sans-serif); font-size:1rem; }
.interactive-demo *, .interactive-demo *::before, .interactive-demo *::after { box-sizing:border-box; }
.interactive-demo .demo-note { color:var(--lab-muted); font-size:.85rem; line-height:1.65; margin:0 0 1.2rem; }
.interactive-demo .demo-note strong { color:var(--lab-ink); }
.interactive-demo .demo-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); align-items:end; gap:1.1rem; margin:1.4rem 0; }
.interactive-demo .control { display:flex; flex-direction:column; gap:.6rem; min-width:0; font-size:.82rem; font-weight:600; line-height:1.5; }
.interactive-demo .control > span { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.3rem; }
.interactive-demo .control output { color:#8be9d6; font-variant-numeric:tabular-nums; }
.interactive-demo textarea,.interactive-demo select,.interactive-demo input[type="number"],.interactive-demo input[type="text"] { font:inherit; font-size:16px; font-weight:400; width:100%; min-height:44px; border:1px solid var(--lab-line); border-radius:7px; background:var(--lab-surface); color:var(--lab-ink); padding:.7rem .85rem; border-color:var(--lab-control-border); }
.interactive-demo textarea { resize:vertical; line-height:1.65; }
.interactive-demo :is(input,textarea)::placeholder { color:#9ab9b4; opacity:1; }
.interactive-demo [aria-invalid="true"] { border-color:#f0bd7b; }
.interactive-demo input[type="range"] { width:100%; height:44px; accent-color:var(--lab-accent); cursor:pointer; margin:0; }
.interactive-demo .checkbox-control { flex-direction:row; align-items:center; min-height:44px; font-weight:500; }
.interactive-demo .checkbox-control input { accent-color:var(--lab-accent); width:19px; height:19px; flex-shrink:0; }
.interactive-demo :is(input,select,textarea,button,a,summary):focus-visible { outline:3px solid #f0c78b; outline-offset:3px; }
.interactive-demo .demo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin:1.2rem 0; }
.interactive-demo .demo-actions .demo-note { margin:0; }
.interactive-demo .button { cursor:pointer; border:1px solid var(--lab-accent); background:var(--lab-accent); color:#082c2b; padding:.68rem 1rem; border-radius:6px; font:inherit; font-size:.85rem; font-weight:600; min-height:44px; line-height:1.4; text-decoration:none; }
.interactive-demo .button-secondary { background:transparent; color:#8be9d6; border-color:var(--lab-control-border); }
.interactive-demo .button:hover { filter:brightness(1.08); }
.interactive-demo .button:disabled { opacity:.5; cursor:default; filter:none; }
.interactive-demo .demo-output { border:1px solid var(--lab-line); border-radius:10px; background:var(--lab-paper); padding:1.4rem; overflow:hidden; }
.interactive-demo .demo-output > :last-child { margin-bottom:0; }
.interactive-demo .demo-output-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--lab-muted); margin:0 0 1rem; font-weight:600; }
.interactive-demo .demo-status { font-size:.78rem; line-height:1.5; color:var(--lab-muted); min-height:1.5em; margin:.7rem 0 1rem; }
.interactive-demo .demo-details { font-size:.86rem; line-height:1.8; border-top:1px solid var(--lab-line); padding:1rem 0 0; }
.interactive-demo .demo-details summary { color:#8be9d6; cursor:pointer; font-weight:600; min-height:44px; padding-block:8px; }
.interactive-demo .demo-details p { margin:.9rem 0; }
.interactive-demo .demo-details a { color:var(--lab-accent); text-decoration:underline; text-underline-offset:3px; }
.interactive-demo .demo-details h4 { margin:1rem 0 .5rem; }
.interactive-demo .demo-metrics { display:flex; flex-wrap:wrap; gap:1rem 2.2rem; margin:0 0 1.4rem; }
.interactive-demo .metric { display:flex; flex-direction:column; color:var(--lab-muted); font-size:.78rem; }
.interactive-demo .metric strong { font-family:var(--serif,Syne,sans-serif); font-size:1.65rem; color:#c9fff0; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.interactive-demo .token-cloud { display:flex; flex-wrap:wrap; gap:.45rem; }
.interactive-demo .token-chip { display:flex; flex-direction:column; align-items:flex-start; border:1px solid #488b80; border-radius:5px; background:#16464b; padding:.55rem .65rem; min-width:42px; max-width:100%; overflow-wrap:anywhere; }
.interactive-demo .token-chip:nth-child(3n+2) { background:#244b42; border-color:#598d74; }
.interactive-demo .token-chip:nth-child(3n+3) { background:#163b4b; border-color:#487b8b; }
.interactive-demo .token-chip > span { font:500 1rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.interactive-demo .token-chip small { font-size:.65rem; color:#c0dad4; padding-top:.35rem; }
.interactive-demo .token-chip.token-fallback { border-style:dashed; }
.interactive-demo .demo-reconstruction { margin-top:1.5rem; border-top:1px solid var(--lab-line); padding-top:1rem; }
.interactive-demo .demo-reconstruction > span { color:var(--lab-muted); font-size:.75rem; }
.interactive-demo .demo-reconstruction pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.9rem; margin:.5rem 0 0; line-height:1.6; }
.interactive-demo .vocabulary { display:flex; flex-wrap:wrap; gap:.35rem; }
.interactive-demo .vocabulary code { color:#c9fff0; background:var(--lab-paper); padding:.2rem .4rem; border:1px solid var(--lab-line); border-radius:4px; }
.interactive-demo .demo-empty { font-size:.9rem; color:var(--lab-muted); line-height:1.7; }
.interactive-demo .vector-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:1.5rem; align-items:center; }
.interactive-demo svg { display:block; width:100%; height:auto; }
.interactive-demo svg text { fill:var(--lab-muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; }
.interactive-demo .diagram-grid { fill:none; stroke:#284d51; stroke-width:1; }
.interactive-demo .diagram-axis { fill:none; stroke:#6a9691; stroke-width:1; }
.interactive-demo .vector-reference { stroke:var(--lab-accent); stroke-width:4; }
.interactive-demo .vector-custom { stroke:var(--lab-warm); stroke-width:3; stroke-dasharray:7 4; }
.interactive-demo .vector-reference-dot { fill:var(--lab-accent); }
.interactive-demo .vector-custom-dot { fill:var(--lab-warm); }
.interactive-demo .demo-big-number { font-family:var(--serif,Syne,sans-serif); color:#8be9d6; font-size:clamp(2rem,4vw,3rem); display:block; margin:.5rem 0 1rem; font-weight:600; letter-spacing:-.05em; line-height:1.1; }
.interactive-demo .vector-reading p { font-size:.83rem; line-height:1.8; color:var(--lab-muted); }
.interactive-demo .legend-dot { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; margin-right:.25rem; }
.interactive-demo .legend-dot.reference { background:var(--lab-accent); }
.interactive-demo .legend-dot.custom { background:var(--lab-warm); }
.interactive-demo .matrix-scroll { overflow-x:auto; }
.interactive-demo .matrix { width:100%; border-collapse:separate; border-spacing:3px; font-size:.8rem; font-variant-numeric:tabular-nums; }
.interactive-demo .matrix caption { text-align:left; font-size:.75rem; color:var(--lab-muted); margin:0 0 .7rem; }
.interactive-demo .matrix th { color:#c0dad4; padding:.6rem .4rem; text-align:center; font-weight:500; font-size:.73rem; }
.interactive-demo .matrix th:first-child { text-align:left; min-width:80px; }
.interactive-demo .matrix td { padding:1rem .5rem; text-align:center; background:color-mix(in srgb,#2d7666 calc(var(--heat) * 75%),#123a3f); border-radius:4px; min-width:56px; color:#eef8f5; }
.interactive-demo .matrix td.masked { background:repeating-linear-gradient(135deg,#14383d,#14383d 5px,#1b4247 5px,#1b4247 6px); color:#a7c3bf; }
.interactive-demo .matrix-selected th { font-weight:700; color:var(--lab-accent); }
.interactive-demo .matrix-selected td { outline:1px solid #72d8be; outline-offset:-1px; }
.interactive-demo .attention-equation { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; font: .85rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; padding:1.2rem 0; }
.interactive-demo .probabilities { display:grid; gap:.8rem; margin:1rem 0 1.4rem; }
.interactive-demo .prob-row { display:grid; grid-template-columns:60px minmax(45px,1fr) 55px; align-items:center; gap:.8rem; font-size:.82rem; font-variant-numeric:tabular-nums; }
.interactive-demo .prob-row:has(.prob-logit) { grid-template-columns:60px minmax(45px,1fr) 55px 53px; }
.interactive-demo .prob-row.is-selected .prob-label { color:var(--lab-warm); font-weight:700; }
.interactive-demo .prob-track { height:12px; border-radius:3px; background:#234b50; overflow:hidden; }
.interactive-demo .prob-bar { background:var(--lab-accent); display:block; height:100%; min-width:0; border-radius:3px; }
.interactive-demo .is-selected .prob-bar { background:var(--lab-warm); }
.interactive-demo .prob-number { text-align:right; }
.interactive-demo .prob-logit { font-size:.7rem; color:var(--lab-muted); text-align:right; }
.interactive-demo .sample-result { border-top:1px solid var(--lab-line); padding:1rem 0 0; margin:1rem 0; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.interactive-demo .sample-result > span { font-size:.75rem; color:var(--lab-muted); }
.interactive-demo .sample-result > strong { padding:.4rem 1rem; background:#18524d; border:1px solid #60c6ae; color:#c7fff0; border-radius:5px; font-size:1.2rem; font-weight:500; }
.interactive-demo .generated-sequence { display:flex; flex-wrap:wrap; gap:.35rem; min-height:60px; align-items:flex-start; }
.interactive-demo .generated-token { padding:.5rem .7rem; border:1px solid var(--lab-line); background:var(--lab-surface); border-radius:4px; font:1.1rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.interactive-demo .generated-token.latest { background:#18524d; border-color:#60c6ae; color:#c7fff0; }
.interactive-demo .generated-token.end-token { font-size:.75rem; padding:.75rem .7rem; color:var(--lab-muted); }
.interactive-demo .loop-labels { display:flex; justify-content:center; align-items:center; gap:.75rem; flex-wrap:wrap; margin:1.5rem 0; padding:.8rem 0; border-block:1px solid var(--lab-line); font-size:.7rem; color:var(--lab-muted); text-transform:uppercase; letter-spacing:.04em; }
.interactive-demo .demo-finished { padding:1rem; background:#16473f; color:#d4f7e9; border-radius:6px; font-size:.85rem; line-height:1.6; }
.interactive-demo .loss-chart { margin:1.5rem 0 .75rem; }
.interactive-demo .loss-line { fill:none; stroke:var(--lab-accent); stroke-width:2; stroke-linejoin:round; }
.interactive-demo .loss-point { fill:var(--lab-accent); }
.interactive-demo .loss-optimum { stroke:var(--lab-warm); stroke-width:1; stroke-dasharray:5 5; }
.interactive-demo .context-meter { display:flex; height:22px; overflow:hidden; border-radius:5px; border:1px solid var(--lab-line); }
.interactive-demo .context-used { background:var(--lab-accent); }
.interactive-demo .context-free { background:#234b50; }
.interactive-demo .context-reserve { background:#d6aa63; }
.interactive-demo .context-legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.7rem; color:var(--lab-muted); margin:.6rem 0 1.3rem; }
.interactive-demo .context-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:.3rem; }
.interactive-demo .context-messages { display:grid; gap:.55rem; list-style:none; padding:0; margin:1rem 0; }
.interactive-demo .context-messages li { padding:.7rem .9rem; border:1px solid var(--lab-line); border-left:3px solid var(--lab-accent); background:var(--lab-surface); border-radius:4px; }
.interactive-demo .context-messages li.dropped { background:#102e33; border-left-color:#71918e; border-style:dashed; }
.interactive-demo .context-messages li > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem; font-size:.72rem; color:var(--lab-muted); }
.interactive-demo .context-messages li p { font-size:.83rem; line-height:1.6; margin:.35rem 0 0; }
.interactive-demo .context-consequence { padding:1rem; background:#17463f; color:#e2faf0; border-radius:5px; margin-top:1rem; font-size:.85rem; }
.interactive-demo .context-consequence p { font-size:.8rem; line-height:1.8; margin:.4rem 0 0; }
.interactive-demo .demo-presets { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0; }
.interactive-demo .demo-presets button { font:inherit; font-size:.72rem; padding:.5rem .65rem; border:1px solid var(--lab-control-border); border-radius:20px; background:transparent; cursor:pointer; color:var(--lab-ink); min-height:44px; }
.interactive-demo .demo-presets button:hover { background:#1d4e4e; color:#b7f8e5; border-color:#5b8984; }
.interactive-demo .workflow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:0 0 1rem; }
.interactive-demo .workflow-steps li { padding:1rem; border:1px solid var(--lab-line); background:var(--lab-surface); border-radius:5px; }
.interactive-demo .workflow-steps li > span { display:block; color:var(--lab-accent); font: .75rem ui-monospace,SFMono-Regular,Consolas,monospace; margin-bottom:.8rem; }
.interactive-demo .workflow-steps li strong { font-size:.8rem; display:block; }
.interactive-demo .workflow-steps li p { font-size:.8rem; line-height:1.8; margin:.5rem 0 0; overflow-wrap:anywhere; }
.interactive-demo .demo-document-link { font-size:.8rem; color:var(--lab-accent); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:600px){
 .interactive-demo .demo-output { padding:1rem; }
 .interactive-demo .demo-controls { grid-template-columns:1fr; gap:.8rem; }
 .interactive-demo .vector-layout { grid-template-columns:1fr; gap:.2rem; }
 .interactive-demo .vector-layout svg { max-width:300px; margin:auto; }
 .interactive-demo .vector-reading { text-align:center; }
 .interactive-demo .workflow-steps { grid-template-columns:1fr; gap:.6rem; }
 .interactive-demo .workflow-steps li { padding:.8rem; }
 .interactive-demo .workflow-steps li > span { float:left; margin:0 .7rem 0 0; }
 .interactive-demo .matrix { font-size:.68rem; border-spacing:2px; }
 .interactive-demo .matrix td { min-width:43px; padding:.9rem .2rem; }
 .interactive-demo .matrix th { font-size:.62rem; padding:.5rem .15rem; }
 .interactive-demo .matrix th:first-child { min-width:60px; }
 .interactive-demo .prob-row,.interactive-demo .prob-row:has(.prob-logit) { grid-template-columns:48px minmax(35px,1fr) 46px; gap:.55rem; font-size:.73rem; }
 .interactive-demo .prob-logit { display:none; }
 .interactive-demo .demo-big-number { font-size:2.4rem; }
 .interactive-demo .attention-equation { font-size:.72rem; }
 .interactive-demo .demo-metrics { gap:.8rem 1.5rem; }
 .interactive-demo .metric strong { font-size:1.4rem; }
}
@media(prefers-reduced-motion:reduce){.interactive-demo * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }}

/* Controlled comparisons reuse each lab's inputs and stack when space is limited. */
.interactive-demo [hidden] { display:none!important; }
.interactive-demo .demo-compare-toggle { border:1px solid var(--lab-line); border-radius:7px; background:#123a3f; padding:.7rem 1rem; margin:1.2rem 0; }
.interactive-demo .demo-compare-toggle .control { color:#d1f5e9; }
.interactive-demo .demo-compare-toggle p { margin:0 0 .2rem 1.85rem; color:var(--lab-muted); font-size:.78rem; line-height:1.65; }
.interactive-demo .demo-comparison-controls { display:grid; grid-template-columns:minmax(180px,1fr) minmax(160px,1fr); align-items:center; gap:1.3rem; padding:1rem; margin:0 0 1.2rem; border:1px solid #5d7960; border-radius:7px; background:#183e3c; }
.interactive-demo .demo-comparison-controls output { color:#f0bd7b; }
.interactive-demo .demo-comparison-controls input[type=range] { accent-color:#f0bd7b; }
.interactive-demo .demo-comparison-controls > p { color:#c4d4c5; font-size:.78rem; line-height:1.7; margin:0; }
.interactive-demo .demo-compare-intro { margin-bottom:1.2rem; }
.interactive-demo .demo-compare-intro .demo-output-label { display:block; color:#8be9d6; margin-bottom:.55rem; }
.interactive-demo .demo-compare-intro p { margin:0; color:var(--lab-muted); font-size:.8rem; line-height:1.75; }
.interactive-demo .demo-comparison-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1rem; }
.interactive-demo .demo-compare-panel { min-width:0; border:1px solid #457d71; border-radius:7px; background:var(--lab-surface); padding:1rem; }
.interactive-demo .demo-compare-panel > header { display:flex; gap:.7rem; align-items:flex-start; padding-bottom:1rem; }
.interactive-demo .demo-compare-letter { flex-shrink:0; display:grid; place-items:center; width:27px; height:27px; border-radius:4px; background:#1c5850; border:1px solid #61bda5; color:#b5ffe7; font:600 .75rem var(--mono,monospace); }
.interactive-demo .demo-compare-panel h3 { font-family:var(--serif,Syne,sans-serif); font-size:1.12rem; line-height:1.35; color:#c9fff0; margin:0; }
.interactive-demo .demo-compare-panel header p { font-size:.73rem; color:var(--lab-muted); margin:.25rem 0 0; line-height:1.6; }
.interactive-demo .demo-compare-panel .probabilities { margin:0 0 1.3rem; }
.interactive-demo .demo-compare-panel .prob-row { grid-template-columns:48px minmax(35px,1fr) 48px; gap:.6rem; font-size:.75rem; }
.interactive-demo .demo-compare-panel .matrix { font-size:.73rem; border-spacing:2px; }
.interactive-demo .demo-compare-panel .matrix th { padding:.5rem .25rem; font-size:.65rem; }
.interactive-demo .demo-compare-panel .matrix th:first-child { min-width:60px; }
.interactive-demo .demo-compare-panel .matrix td { min-width:40px; padding:.8rem .25rem; }
.interactive-demo .demo-compare-panel .matrix caption { font-size:.7rem; }
.interactive-demo .matrix td.future-visible { outline:1px solid #e6b875; outline-offset:-1px; }
.interactive-demo .demo-compare-readout { display:grid; gap:.45rem; border-top:1px solid #3c696a; padding-top:1rem; margin-top:1rem; }
.interactive-demo .demo-compare-readout > span { color:var(--lab-muted); font-size:.75rem; line-height:1.6; }
.interactive-demo .demo-compare-readout > strong { font:500 1.15rem/1.5 var(--mono,monospace); color:#c9fff0; overflow-wrap:anywhere; }
.interactive-demo .demo-compare-readout > span b { color:#e8f8f1; font-weight:600; }
.interactive-demo .demo-compare-panel > .demo-note { margin:.8rem 0 0; font-size:.72rem; }
.interactive-demo .demo-compare-alternate { border-color:#8b7959; }
.interactive-demo .demo-compare-alternate .demo-compare-letter { color:#ffe2b5; background:#4a4937; border-color:#bfa177; }
.interactive-demo .demo-compare-alternate h3,.interactive-demo .demo-compare-alternate .demo-compare-readout > strong { color:#f5d2a1; }
.interactive-demo .demo-compare-alternate .prob-bar { background:#f0bd7b; }
.interactive-demo .demo-comparison-insight { border-left:3px solid #3ecdb1; background:#153c3a; border-radius:0 5px 5px 0; padding:1rem 1.1rem; margin:1.1rem 0; }
.interactive-demo .demo-comparison-insight > strong { font-size:.83rem; color:#b8f6e2; }
.interactive-demo .demo-comparison-insight p { color:#c0d8ce; font-size:.8rem; line-height:1.75; margin:.45rem 0 0; }
@media(max-width:600px){
 .interactive-demo .demo-comparison-controls { grid-template-columns:1fr; gap:.5rem; }
 .interactive-demo .demo-comparison-grid { grid-template-columns:1fr; }
 .interactive-demo .demo-compare-panel { padding:.8rem; }
 .interactive-demo .demo-compare-toggle { padding:.65rem .8rem; }
 .interactive-demo .demo-compare-panel .matrix td { font-size:.68rem; min-width:36px; padding:.75rem .15rem; }
 .interactive-demo .demo-compare-panel .matrix th { font-size:.6rem; }
 .interactive-demo .demo-compare-panel .matrix th:first-child { min-width:54px; }
 .interactive-demo .demo-compare-readout > strong { font-size:1rem; }
}

/* Keep compact controls usable without text-field zoom or clipped long values. */
.interactive-demo,.interactive-demo .demo-controls>*,.interactive-demo .demo-output,.interactive-demo .vector-layout>*,.interactive-demo .workflow-steps>*,.interactive-demo .demo-compare-panel>header>div,.interactive-demo .demo-metrics>*{min-width:0}
.interactive-demo :is(.demo-note,.demo-status,.demo-details,.demo-compare-intro,.demo-comparison-insight,.attention-equation){overflow-wrap:anywhere}
.interactive-demo .demo-actions .button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.interactive-demo .demo-presets button{min-width:44px}
.interactive-demo .matrix-scroll{max-width:100%;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.interactive-demo .matrix-scroll:focus-visible{outline:3px solid #f0c78b;outline-offset:3px}
.interactive-demo .demo-document-link{display:inline-flex;align-items:center;min-height:44px}
@media(forced-colors:active){
 .interactive-demo{--lab-ink:CanvasText;--lab-muted:CanvasText;--lab-accent:Highlight;--lab-warm:CanvasText;--lab-line:CanvasText;--lab-paper:Canvas;--lab-surface:Canvas;--lab-control-border:ButtonText}
 .interactive-demo .button,.interactive-demo .button-secondary,.interactive-demo .demo-presets button{background:ButtonFace;color:ButtonText;border-color:ButtonText}
 .interactive-demo :is(input,select,textarea,button,a,summary,[tabindex="0"]):focus-visible{outline-color:Highlight}
 .interactive-demo .prob-track,.interactive-demo .context-meter{background:Canvas;border:1px solid CanvasText}
 .interactive-demo .prob-bar,.interactive-demo .context-used,.interactive-demo .legend-dot.reference{forced-color-adjust:none;background:Highlight}
 .interactive-demo .context-free{forced-color-adjust:none;background:Canvas}
 .interactive-demo .context-reserve,.interactive-demo .legend-dot.custom{forced-color-adjust:none;background:CanvasText}
 .interactive-demo .diagram-grid{stroke:GrayText}.interactive-demo .diagram-axis{stroke:CanvasText}
 .interactive-demo .vector-reference,.interactive-demo .loss-line{forced-color-adjust:none;stroke:Highlight}
 .interactive-demo .vector-custom,.interactive-demo .loss-optimum{forced-color-adjust:none;stroke:CanvasText}
 .interactive-demo .vector-reference-dot,.interactive-demo .loss-point{forced-color-adjust:none;fill:Highlight}
 .interactive-demo .vector-custom-dot{forced-color-adjust:none;fill:CanvasText}
 .interactive-demo svg text{fill:CanvasText}
 .interactive-demo .matrix td{background:Canvas;color:CanvasText;border:1px solid CanvasText}
 .interactive-demo .matrix td.masked{background:Canvas;color:GrayText;border-style:dashed}
 .interactive-demo .matrix-selected td,.interactive-demo .generated-token.latest{outline:2px solid Highlight;outline-offset:-2px}
 .interactive-demo .matrix td.future-visible{outline:2px dashed Highlight;outline-offset:-2px}
 .interactive-demo .is-selected .prob-label{font-weight:700;text-decoration:underline}
 .interactive-demo .demo-compare-panel,.interactive-demo .demo-compare-alternate{background:Canvas;border-color:CanvasText}
 .interactive-demo .demo-compare-letter{background:ButtonFace;color:ButtonText;border-color:ButtonText}
}