:root { --lang-en: var(--spk-1); --lang-hi: var(--spk-2); --lang-kn: var(--spk-3); }
header { position: static; }
.hero { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.hero p { margin: 6px 0 0; line-height: 1.55; }
.hero-ctl { display: grid; gap: 8px; }
.hero-ctl .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.seg-ctl { display: flex; }
.seg-ctl button { border-radius: 0; padding: 7px 10px; }
.seg-ctl button:first-child { border-radius: 8px 0 0 8px; }
.seg-ctl button:last-child { border-radius: 0 8px 8px 0; }
.seg-ctl button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ribbon: the data's shape as it moves through the steps */
.ribbon { position: sticky; top: 0; z-index: 5; display: flex; gap: 0; overflow-x: auto; padding: 10px 12px; }
.rb { flex: 1 0 104px; min-width: 104px; cursor: pointer; padding: 4px 6px; border-left: 1px solid var(--border); position: relative; }
.rb:first-child { border-left: 0; }
.rb .ph { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.rb .nm { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb .sh { font-family: var(--mono); font-size: 10.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb.on { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; }
.rb.on .nm { color: var(--accent); }
.rb.seen .nm::before { content: "✓ "; color: var(--good); }

/* step layout */
.step { display: grid; grid-template-columns: 330px 1fr; gap: 22px; scroll-margin-top: 90px; }
@media (max-width: 1000px) { .step { grid-template-columns: 1fr; } }
.step .side h2 { font-size: 17px; display: flex; gap: 10px; align-items: center; }
.step .side .n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.step .phase { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; }
.step .side p { line-height: 1.6; margin: 8px 0; color: var(--text); }
.step .side .why { color: var(--text-2); font-size: 13px; border-left: 3px solid var(--accent); padding-left: 10px; }
.step .shape { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin-top: 10px; line-height: 1.6; }
.step .shape b { color: var(--accent); font-weight: 600; }
.step .stage { min-width: 0; display: grid; gap: 10px; align-content: start; }
.stage-bar { display: flex; gap: 8px; align-items: center; }
.stage-bar .cap { flex: 1; font-size: 12px; color: var(--text-3); }
.stage-bar button { padding: 4px 10px; font-size: 12px; }
.prog { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.prog > i { display: block; height: 100%; width: 0; background: var(--accent); }
canvas.viz { width: 100%; display: block; border-radius: 8px; background: var(--surface-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fact { background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.fact small { display: block; color: var(--text-3); font-size: 11px; }
.fact b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.illus { font-size: 11px; color: var(--text-3); font-style: italic; }

/* language */
.utt-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.utt { height: 22px; min-width: 14px; border-radius: 4px; cursor: pointer; opacity: .55; border: 2px solid transparent; }
.utt.on { opacity: 1; border-color: var(--text); }
.lid { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 14px; align-items: center; }
.bars { display: grid; gap: 5px; }
.bar-row { display: grid; grid-template-columns: 74px 1fr 46px; gap: 8px; align-items: center; font-size: 12px; }
.bar-row .tr { height: 14px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.bar-row .tr i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--text-3); transition: width .5s ease; }
.bar-row .v { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; }
.arrow { text-align: center; font-size: 12px; color: var(--text-3); }
.arrow b { display: block; font-size: 26px; color: var(--accent); }
.verdict { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }

/* tokens */
.tokens { display: flex; flex-wrap: wrap; gap: 3px; font-family: var(--mono); font-size: 12.5px; min-height: 80px; background: var(--surface-2); padding: 10px; border-radius: 8px; align-content: flex-start; }
.tok { padding: 2px 5px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); white-space: pre; animation: pop .25s; }
.tok.sp { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent); }
.tok.ts { background: color-mix(in srgb, var(--spk-4) 14%, var(--surface)); color: var(--spk-4); border-color: color-mix(in srgb, var(--spk-4) 40%, var(--border)); }
.words { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; }
.word { padding: 2px 6px; border-radius: 4px; animation: pop .25s; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* prompt + generation */
.blocks { display: grid; gap: 8px; }
.pblk { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: opacity .4s, transform .4s; }
.pblk.off { opacity: 0; transform: translateY(10px); }
.pblk .hd { display: flex; gap: 8px; padding: 6px 10px; background: var(--surface-2); font-size: 12px; font-weight: 600; }
.pblk .hd span { margin-left: auto; font-weight: 400; color: var(--text-3); }
.pblk pre { margin: 0; padding: 8px 10px; max-height: 150px; overflow: auto; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; }
.tokbar { height: 26px; border-radius: 6px; background: var(--surface-2); position: relative; overflow: hidden; }
.tokbar i { position: absolute; top: 0; bottom: 0; left: 0; }
.tokbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.gen { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
@media (max-width: 760px) { .gen { grid-template-columns: 1fr; } }
.schema { display: grid; gap: 3px; font-size: 12px; align-content: start; }
.schema div { padding: 3px 8px; border-radius: 5px; background: var(--surface-2); display: flex; gap: 6px; }
.schema div small { color: var(--text-3); margin-left: auto; font-family: var(--mono); font-size: 10px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schema div.done { background: color-mix(in srgb, var(--good) 14%, transparent); }
.schema div.done::before { content: "✓"; color: var(--good); }
.jsonout { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); border-radius: 8px; padding: 10px; height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.jsonout .cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mask { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; align-items: center; }
.mask span { padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); }
.mask .no { text-decoration: line-through; color: var(--bad); opacity: .7; }
.mask .yes { color: var(--good); border-color: var(--good); }

/* normalise */
.cards { display: grid; gap: 8px; }
.ncard { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1.2fr; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; animation: pop .35s; }
.ncard .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.ncard .ar { color: var(--text-3); text-align: center; }
.ncard .code { font-family: var(--mono); font-weight: 600; }
.badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.badge.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.badge.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: #8a5d00; }
.badge.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }

/* grounding */
.gr { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
@media (max-width: 760px) { .gr { grid-template-columns: 1fr; } }
.gr-list { display: grid; gap: 4px; align-content: start; }
.gr-list div { font-size: 12px; padding: 5px 8px; border-radius: 6px; cursor: pointer; background: var(--surface-2); display: flex; gap: 6px; }
.gr-list div.on { outline: 2px solid var(--accent); }
.gr-list div small { margin-left: auto; }
.gsteps { display: grid; gap: 8px; }
.gs { border-left: 3px solid var(--border); padding: 4px 10px; transition: opacity .3s; }
.gs.off { opacity: .15; }
.gs .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.gs .t { font-size: 13px; word-break: break-word; }
.gs .t.mono { font-family: var(--mono); font-size: 12px; }
mark { background: color-mix(in srgb, var(--warn) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.score { height: 16px; background: var(--surface-2); border-radius: 4px; position: relative; overflow: hidden; }
.score i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); transition: width .6s; }
.score .th { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text-2); }
.score .lb { position: absolute; top: 0; font-size: 10px; color: var(--text); padding-left: 4px; line-height: 16px; }

/* safety */
table.rules { width: 100%; border-collapse: collapse; font-size: 12px; }
table.rules th, table.rules td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; }
table.rules th:first-child, table.rules td:first-child { text-align: left; }
table.rules td.c { transition: background .3s; }
table.rules td.c.pass { color: var(--good); }
table.rules td.c.crit { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); font-weight: 700; }
table.rules td.c.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: #8a5d00; font-weight: 700; }
table.rules td.c.info { background: var(--surface-2); color: var(--text-2); }
.alert { padding: 8px 10px; border-radius: 8px; font-size: 13px; animation: pop .35s; }
.alert.critical { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.alert.warning { background: color-mix(in srgb, var(--warn) 20%, transparent); color: #7a5200; }
.alert.info { background: var(--surface-2); color: var(--text-2); }

/* audit */
.chain { display: flex; gap: 0; overflow-x: auto; padding: 6px 0 10px; align-items: center; }
.blk { flex: 0 0 auto; width: 150px; border: 1.5px solid var(--border); border-radius: 8px; padding: 8px; font-size: 11px; background: var(--surface); transition: border-color .3s, background .3s; }
.blk.off { opacity: 0; transform: translateX(-12px); }
.blk { transition: opacity .35s, transform .35s, border-color .3s, background .3s; }
.blk .ev { font-weight: 600; font-size: 12px; }
.blk .h { font-family: var(--mono); color: var(--text-2); word-break: break-all; }
.blk.broken { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.link { flex: 0 0 26px; height: 2px; background: var(--good); }
.link.broken { background: var(--bad); }

/* phones */
.step > * { min-width: 0; }
@media (max-width: 760px) {
  .lid { grid-template-columns: 1fr; }
  .arrow b { display: inline; margin-right: 6px; }
  .ncard { grid-template-columns: 1fr; }
  .ncard .ar { display: none; }
  .stage > div:has(> table.rules) { overflow-x: auto; }
  .rb { flex-basis: 92px; min-width: 92px; }
  .ribbon { position: static; }
}