/* RNN Next-Word Predictor — styles. Self-contained. */
* { box-sizing: border-box; }
:root { --ink:#202124; --muted:#5f6368; --line:#e0e0e0; --bg:#f7f8fa; --panel:#fff; --accent:#d9480f; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.lm { display:flex; gap:18px; align-items:flex-start; padding:20px; flex-wrap:wrap; justify-content:center; }
.lm section { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.lm h2 { margin:0 0 12px; font-size:16px; }

/* training panel */
.train-panel { flex:0 0 280px; }
#corpus { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
  border:1px solid var(--line); border-radius:8px; padding:8px; resize:vertical; }
.corpus-actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.file-btn { display:inline-flex; align-items:center; cursor:pointer; }
.knobs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.knob label { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.knob select { width:100%; padding:5px 6px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; }
.btn-row { display:flex; gap:8px; margin-bottom:14px; }
.primary-btn { flex:1; padding:11px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.primary-btn:hover { background:#b93c0c; }
.ghost-btn { padding:11px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); cursor:pointer; font-size:14px; }
.ghost-btn.small { padding:6px 10px; font-size:12px; }
.ghost-btn:hover { background:#eef1f6; }
.stats { display:flex; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.stat { flex:1 1 60px; }
.cap { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.val { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.chart-caption { font-size:12px; color:var(--muted); margin:10px 0 4px; }
#rnn-chart { width:100%; height:90px; border:1px solid var(--line); border-radius:8px; }
#rnn-chart .line { fill:none; stroke-width:1.5px; }
#rnn-chart .axis line, #rnn-chart .axis path { display:none; }

/* predict stage */
.predict-stage { flex:1 1 440px; max-width:560px; }
.io-row { display:flex; align-items:center; gap:12px; overflow-x:auto; }
.io-label { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:8px; }
.inputs-box, .emb-col, .output-box { flex:0 0 auto; }
.output-box { flex:1 1 auto; }
.context-inputs { display:flex; flex-direction:column; gap:8px; }
.word-slot { display:flex; align-items:center; gap:8px; }
.slot-label { font-size:10px; color:var(--muted); width:42px; }
.word-select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:14px; background:#fff; min-width:96px; }
.arrow { font-size:28px; color:#bbb; }
.context-emb { display:flex; flex-direction:column; gap:8px; }
.emb-vec { display:flex; gap:3px; align-items:center; min-height:32px; }
.emb-cell { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:22px; border-radius:4px; font-size:10px; font-variant-numeric:tabular-nums; color:#1a1a1a; }
.predictions { display:flex; flex-direction:column; gap:5px; }
.pred-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.pred-word { width:66px; text-align:right; color:var(--muted); }
.pred-bar-wrap { flex:1; background:#f3ece8; border-radius:5px; overflow:hidden; height:16px; }
.pred-bar { display:block; height:100%; width:0%; background:#e6a37f; transition:width .15s linear; }
.pred-pct { width:36px; font-variant-numeric:tabular-nums; color:var(--muted); }
.pred-row.top1 .pred-word { color:var(--ink); font-weight:700; }
.pred-row.top1 .pred-bar { background:var(--accent); }
.pred-row.top1 .pred-pct { color:var(--ink); font-weight:700; }

/* memory (hidden state) strip — the recurrence viz */
.memory-box { margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#fff8f4; }
.hidden-strip { display:flex; flex-direction:column; gap:6px; overflow-x:auto; }
.hid-row { display:flex; align-items:center; gap:10px; }
.hid-lab { flex:0 0 auto; width:96px; font-size:12px; color:var(--muted); text-align:right; }
.hid-vec { display:flex; gap:3px; }

.guess-box { margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#fbfaf9; }
.guess-box label { font-size:13px; color:var(--muted); margin-right:8px; }
.guess-box select { padding:5px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; }
.guess-metrics { margin-top:10px; font-size:13px; line-height:1.5; }
.coach-hint { margin-top:18px; padding:14px 16px; background:#fdf0e9; border-left:4px solid var(--accent); border-radius:8px; font-size:14px; line-height:1.5; min-height:70px; }

/* explanation + experiments panels (full width) */
.explain-panel, .tryit-panel { flex-basis:100%; width:100%; }

/* unrolled RNN diagram */
.rnn-arch-wrap { max-width:640px; margin:4px auto 16px; }
.rnn-arch-svg { width:100%; height:auto; display:block; }
.rnn-a-box { fill:#fff; stroke:#d2d2d7; stroke-width:1.5; }
.rnn-a-word { fill:#eef2f6; }
.rnn-a-out { fill:#fdf0e9; stroke:var(--accent); stroke-width:2; }
.rnn-a-cell { fill:#fff1e9; stroke:var(--accent); stroke-width:2; }
.rnn-a-t { font-size:13px; font-weight:700; fill:#202124; }
.rnn-a-h { font-size:14px; font-weight:700; fill:#7a2e0c; }
.rnn-a-lab { font-size:11px; font-weight:600; fill:var(--accent); }
.rnn-a-s { font-size:11px; fill:var(--muted); }
.rnn-a-cap { font-size:11px; fill:var(--muted); }
.explain-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.explain-grid p { font-size:14px; line-height:1.6; color:var(--ink); margin:0 0 10px; }
.formula { font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff8f4; border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; text-align:center; color:#7a2e0c; }
.vs-note { color:var(--muted) !important; }
.try-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:16px; }
.try-card { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; }
.try-card h3 { margin:0 0 6px; font-size:14px; color:var(--accent); }
.try-card p { margin:0; font-size:13px; line-height:1.5; color:var(--ink); }
.try-card a, .try-steps a { color:var(--accent); }
.try-steps { margin:0; padding-left:20px; font-size:14px; line-height:1.7; color:var(--ink); }
@media (max-width:640px){ .explain-grid { grid-template-columns:1fr; } }

/* embedding panel */
.emb-panel { flex:1 1 500px; max-width:620px; }
.emb-note { font-size:12px; color:var(--muted); margin:0 0 10px; }
.emb-layout { display:flex; gap:16px; align-items:flex-start; }
.emb-table { flex:0 0 auto; max-height:320px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; }
.etbl { border-collapse:collapse; font-size:11px; }
.etbl th { position:sticky; top:0; background:#fafafa; color:var(--muted); font-weight:600; padding:4px 8px; text-align:center; border-bottom:1px solid var(--line); }
.etbl td { padding:3px 8px; text-align:center; font-variant-numeric:tabular-nums; border-bottom:1px solid #f2f2f4; color:#1a1a1a; }
.etbl .etbl-w { text-align:left; font-weight:600; color:#202124; background:#fff; position:sticky; left:0; }
#emb-map { flex:0 0 auto; }
#emb-map svg { border:1px solid var(--line); border-radius:8px; background:#fbfaff; }
.emb-dot { fill:var(--accent); opacity:.85; }
.emb-label { font-size:11px; fill:#3c4043; }