/* Styles for the chart kit, hub lab cards and labs 2–6.
   Each lab section uses its subject's own colours; all colours are explicit (single bright theme). */

/* ---------- hub lab cards ---------- */
.lab-card.is-ready { box-shadow: var(--shadow); }
.lab-num { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-right: auto; margin-left: .6rem; align-self: center; }
.lab-card-hook { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--ink-2); line-height: 1.2; }
.lab-progress { height: .4rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.lab-progress i { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.lab-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- chart kit ---------- */
.hbars { display: flex; flex-direction: column; gap: .45rem; }
.hbar { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .84rem; }
.hbar-label { color: var(--ink-2); min-width: 0; }
.hbar-sub { display: block; font-size: .74rem; color: var(--ink-3); }
.hbar-track { height: .8rem; border-radius: 99px; background: var(--surface); overflow: hidden; border: 1px solid var(--line); }
.hbar-track i { display: block; height: 100%; border-radius: 99px; background: var(--machine); transition: width .5s ease; }
.hbar-track i.is-you { background: var(--brand); }
.hbar-val { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 4.5rem; }
.spark { width: 100%; height: auto; display: block; max-width: 100%; }
.spark-bg { fill: var(--surface); stroke: var(--line); }
.spark-area { fill: var(--machine-soft); stroke: none; }
.spark-line { fill: none; stroke: var(--machine); stroke-width: 2.5; stroke-linejoin: round; }
.spark-end { fill: var(--machine); stroke: #fff; stroke-width: 2; }
.sb-num.machine { color: var(--machine); }
.stack-sm { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.map .bar-val { font-family: var(--f-mono); font-size: 12px; font-weight: 600; fill: var(--ink); }
.map .strong-tick { font-weight: 600; fill: var(--ink-2); font-family: var(--f-body); }
.goal-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.goal { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 99px; background: var(--surface-2); font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.goal.is-met { background: var(--good-soft); color: var(--good); }
.lg-line { width: 1.4rem; height: .3rem; border-radius: 99px; background: var(--machine); }

/* ---------- Train the Predictor ---------- */
.notebook { background: #FFFDF6; border: 1px solid #EADFC2; border-radius: var(--r-md); padding: .6rem 1rem 1rem; background-image: repeating-linear-gradient(180deg, transparent 0 2.7rem, #F0E6CC 2.7rem 2.75rem); max-width: 44rem; }
.nb-head, .nb-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr); gap: .8rem; align-items: center; min-height: 2.75rem; }
.nb-head { font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #8A6D2F; font-weight: 600; }
.nb-day { font-family: var(--f-mono); font-weight: 600; color: var(--ink-2); }
.nb-temp { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.thermo { position: relative; width: .55rem; height: 1.8rem; border-radius: 99px; background: #F1E9D6; overflow: hidden; }
.thermo i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #F0A21B, #E2532C); border-radius: 99px; }
.nb-cups { display: flex; align-items: center; gap: .6rem; }
.cup-bar { flex: 1; height: .7rem; border-radius: 99px; background: #F1E9D6; overflow: hidden; }
.cup-bar i { display: block; height: 100%; background: #9A5B2E; border-radius: 99px; }
.eq { font-size: .92rem; background: var(--surface); padding: .45rem .7rem; border-radius: 10px; border: 1px solid var(--line); }
.rule-score.is-good strong { color: var(--good); }
.map .fit-line { stroke-width: 3.5; stroke-linecap: round; }
.map .fit-line.is-yours { stroke: var(--brand); }
.map .fit-line.is-machine { stroke: var(--machine); }
.map .fit-line.is-ghost { stroke: var(--ink-3); stroke-dasharray: 7 6; stroke-width: 2; }
.map .fit-line.is-holiday-line { stroke: #7C4DCC; }
.map .resid { stroke: var(--ink-3); stroke-width: 1.5; opacity: .55; }
.cpt .shape { stroke: #fff; stroke-width: 2; }
.k-school .shape { fill: #9A5B2E; }
.k-holiday .shape { fill: #fff; stroke: #7C4DCC; stroke-width: 3; }
.k-festival .shape { fill: #F0A21B; stroke: #B86E00; stroke-width: 1.2; }
.k-closed .cross { stroke: var(--bad); stroke-width: 3.5; stroke-linecap: round; }
.cpt.is-test .shape { fill: var(--surface); stroke: var(--ink); stroke-width: 2.4; }
.cpt.is-out { opacity: .2; }
.lg-kind { width: .85rem; height: .85rem; border-radius: 50%; }
.lg-kind.k-school { background: #9A5B2E; }
.lg-kind.k-holiday { border: 3px solid #7C4DCC; background: #fff; }
.lg-kind.k-festival { background: #F0A21B; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); border-radius: 0; width: 1rem; height: 1rem; }
.lg-kind.k-closed { background: var(--bad); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); border-radius: 0; }
.lg-line.is-machine { background: var(--machine); } .lg-line.is-holiday-line { background: #7C4DCC; }
.line-handle { cursor: ns-resize; touch-action: none; }
.line-handle circle { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.line-handle path { fill: #fff; }
.line-handle:focus { outline: none; }
.line-handle:focus-visible circle { stroke: var(--machine); stroke-width: 4; }
.map .outside-zone { fill: #EEF1F7; }
.map .impossible-zone { fill: #FDE6E3; }
.map .probe-pt { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.map .zero-line { stroke: var(--ink); stroke-width: 1.5; }
.map .err-bar.is-school { fill: #9A5B2E; }
.map .err-bar.is-holiday { fill: #7C4DCC; }
.lg-zone.bar-school { background: #9A5B2E; } .lg-zone.bar-holiday { background: #7C4DCC; }
.week-strip { display: flex; gap: .35rem; flex-wrap: wrap; }
.wday { display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; padding: .35rem .4rem; border-radius: 12px; background: var(--surface-2); border: 2px solid transparent; font-size: .8rem; }
.wday.is-holiday { background: #F1EBFC; }
.wday.is-current { border-color: var(--brand); }
.wday-name { font-weight: 600; }
.wday-temp { font-family: var(--f-mono); color: var(--ink-3); font-size: .74rem; }
.wday-cups { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; }
.forecast-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: 1rem 1.2rem; border-radius: var(--r-md); background: linear-gradient(135deg, #FFF6E2, #FFE9C2); border: 1px solid #F3D9A0; }
.forecast-card.is-holiday { background: linear-gradient(135deg, #F4EEFF, #E9DEFF); border-color: #D6C6F5; }
.fc-day { display: flex; flex-direction: column; }
.fc-title { font-size: 1.7rem; font-weight: 800; }
.fc-temp { font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; color: #B5451B; }
.tag-holiday { background: #EDE3FF; color: #5A2FA8; } .tag-school { background: #F3E6D8; color: #7A4520; }

/* ---------- Bias Detective ---------- */
.badge-sel { background: #DDF4E6; color: #1C6E40; }
.badge-rej { background: #EEF1F6; color: #4B5573; }
.tag-city { background: #E1ECFC; color: #1F4FA8; } .tag-village { background: #FCEBD9; color: #8A4B12; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .75rem; }
.case-card { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 1rem; border-radius: var(--r-md); background: #FFFDF8; border: 1px solid #E8E1D2; box-shadow: 0 1px 0 #E8E1D2; position: relative; }
.case-card::before { content: ""; position: absolute; top: -1px; right: 1.2rem; width: 2.2rem; height: .55rem; background: #F3D9A0; border-radius: 0 0 6px 6px; }
.case-top { display: flex; align-items: center; gap: .6rem; }
.avatar { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; color: #fff; font-size: 1.1rem; }
.avatar-city { background: #2C64D8; } .avatar-village { background: #C46A1C; }
.case-name { font-weight: 600; font-size: 1.02rem; }
.case-dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; margin: 0; font-size: .86rem; }
.case-dl dt { color: var(--ink-3); } .case-dl dd { margin: 0; }
.case-dec { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .5rem; border-top: 1px dashed #E8E1D2; }
.map .merit-zone { fill: #EAF7EF; }
.map .merit-line { stroke: var(--good); stroke-width: 2.5; stroke-dasharray: 6 4; }
.map .merit-label { font-family: var(--f-mono); font-size: 12px; font-weight: 600; fill: var(--good); }
.spt-dot { stroke: #fff; stroke-width: 2; }
.spt.is-sel .spt-dot { fill: #1C8A4D; }
.spt.is-rej .spt-dot { fill: #A7B0C6; }
.spt-ring { fill: none; stroke: var(--bad); stroke-width: 2.5; opacity: 0; }
.spt.is-wrong .spt-ring { opacity: 1; }
.lg-dot.sel { background: #1C8A4D; } .lg-dot.rej { background: #A7B0C6; } .lg-zone.merit { background: #EAF7EF; }
.map .gbar-city { fill: #2C64D8; } .map .gbar-village { fill: #E08A2E; }
.lg-zone.gbar-city { background: #2C64D8; } .lg-zone.gbar-village { background: #E08A2E; }
.audit { width: 100%; border-collapse: separate; border-spacing: .3rem; min-width: 22rem; font-size: .92rem; }
.audit th { text-align: left; font-weight: 600; color: var(--ink-2); padding: .4rem .5rem; font-size: .84rem; }
.audit td { background: var(--surface-2); border-radius: 10px; padding: .55rem .75rem; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .86rem; }
.audit td.cell-ok { background: var(--good-soft); } .audit td.cell-bad { background: var(--bad-soft); }
.model-card { background: var(--ink); color: #E8EBF5; border-radius: var(--r-md); padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.model-card .eyebrow { color: #9AA4C4; }
.mc-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; font-size: .92rem; }
.mc-dl dt { color: #9AA4C4; } .mc-dl dd { margin: 0; }
.chip-dark { background: rgba(255, 255, 255, .12); color: #fff; }
.twins { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; align-items: center; max-width: 40rem; }
.twin-eq { display: flex; flex-direction: column; align-items: center; font-family: var(--f-display); font-size: 2rem; font-weight: 800; color: var(--ink-3); line-height: 1; }
.twin-eq small { font-family: var(--f-body); font-size: .7rem; font-weight: 500; }
.twin-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.tw { display: flex; flex-direction: column; gap: .35rem; padding: .6rem; border-radius: 12px; background: var(--surface-2); border: 2px solid transparent; }
.tw.is-split { border-color: #F2B6B1; background: var(--bad-soft); }
.tw.is-same { border-color: #A9DBBC; }
.tw-marks { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; }
.tw-pair { display: flex; flex-direction: column; gap: .25rem; }
@media (max-width: 560px) { .twins { grid-template-columns: minmax(0, 1fr); } .twin-eq { flex-direction: row; gap: .5rem; } }

/* ---------- Neural Network Playground ---------- */
.lbl-glow { fill: #F2C12E; } .lbl-dark { fill: #3B3F5C; }
.reg-glow { fill: #FFF3C4; } .reg-dark { fill: #E3E6F0; }
.lg.lbl-glow { background: #F2C12E; } .lg.lbl-dark { background: #3B3F5C; } .lg.reg-glow { background: #FFF3C4; }
.neuron-lab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .neuron-lab { grid-template-columns: minmax(0, 1fr); } }
.slider-row { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) 3rem; align-items: center; gap: .6rem; }
.sl-label { font-weight: 500; font-size: .9rem; }
.sl-val { font-family: var(--f-mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.neuron-viz { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem; border-radius: var(--r-md); background: radial-gradient(circle at 50% 40%, #2A3159, #141B36); color: #E8EBF5; }
.neuron-viz .muted { color: #A9B2CF; }
.firefly svg { width: min(180px, 50vw); height: auto; display: block; }
.glow-pct { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: #FFE45C; }
.neuron-calc { padding: 1rem; border-radius: var(--r-md); background: var(--surface-2); display: flex; flex-direction: column; gap: .4rem; }
.calc-line { font-family: var(--f-mono); font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.cv { padding: .05rem .35rem; border-radius: 6px; font-weight: 600; }
.cv.w { background: var(--brand-soft); color: var(--brand-press); } .cv.i { background: var(--machine-soft); color: var(--machine-press); } .cv.b { background: #EFEBFD; color: #4A31B5; }
.netdiag-wrap { display: flex; flex-direction: column; gap: .4rem; }
.netdiag { width: 100%; height: auto; max-width: 420px; display: block; margin: 0 auto; }
.netdiag .edge { stroke-linecap: round; opacity: .75; }
.netdiag .edge.pos { stroke: var(--brand); } .netdiag .edge.neg { stroke: var(--machine); }
.lg-line.pos { background: var(--brand); } .lg-line.neg { background: var(--machine); }
.netdiag .node { stroke: #fff; stroke-width: 3; }
.netdiag .node-in { fill: #3B3F5C; } .netdiag .node-out { fill: #F2C12E; stroke: #B88B00; }
.netdiag .node-hid { fill: #8B5CD6; }
.netdiag .hid-0 { fill: #E8504A; } .netdiag .hid-1 { fill: #2E9455; } .netdiag .hid-2 { fill: #2C64D8; } .netdiag .hid-3 { fill: #C46A1C; } .netdiag .hid-4 { fill: #8B5CD6; } .netdiag .hid-5 { fill: #10637A; }
.netdiag .node-g { cursor: pointer; }
.netdiag .node-g.is-sel .node { stroke: var(--ink); stroke-width: 4; }
.netdiag .node-g:focus { outline: none; } .netdiag .node-g:focus-visible .node { stroke: var(--brand); }
.netdiag .node-label { font-family: var(--f-body); font-size: 12px; fill: var(--ink-2); }
.netdiag .node-num { font-family: var(--f-mono); font-size: 13px; font-weight: 600; fill: #fff; }
.map .hid-line { stroke-width: 3; stroke-dasharray: 8 5; opacity: .45; }
.map .hid-line.is-sel { opacity: 1; stroke-width: 4.5; stroke-dasharray: none; }
.map .hid-line.hid-0 { stroke: #E8504A; } .map .hid-line.hid-1 { stroke: #2E9455; } .map .hid-line.hid-2 { stroke: #2C64D8; }

/* ---------- Number Guessing AI ---------- */
.numline { width: 100%; height: auto; display: block; max-width: 100%; }
.nl-track { fill: var(--surface-2); }
.nl-range { fill: #FCD3E5; stroke: var(--brand); stroke-width: 1.5; transition: x .3s, width .3s; }
.nl-guess { stroke: var(--ink-3); stroke-width: 2; }
.nl-guess.is-last { stroke: var(--ink); stroke-width: 3; }
.nl-guess.is-hit { stroke: var(--good); stroke-width: 4; }
.numline .tick { font-family: var(--f-mono); font-size: 12px; fill: var(--ink-3); }
.nl-label { font-family: var(--f-mono); font-size: 13px; font-weight: 600; fill: var(--ink); }
.nl-secret { fill: var(--good); }
.nl-secret-label { font-family: var(--f-mono); font-size: 11px; fill: var(--good); font-weight: 600; }
.guess-panel { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem; border-radius: var(--r-md); background: var(--surface-2); }
.guess-bubble { align-self: flex-start; padding: .8rem 1.2rem; border-radius: 18px 18px 18px 4px; background: var(--ink); color: #fff; font-size: 1.1rem; max-width: 100%; }
.guess-bubble strong { color: #FFC94A; }
.guess-bubble.ans-correct { background: var(--good); } .guess-bubble.ans-correct strong { color: #fff; }
.guess-bubble.ans-broken { background: var(--bad); }
.guess-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.num-input { font: inherit; font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; width: 7rem; padding: .3rem .7rem; border-radius: 12px; border: 2px solid var(--line-2); text-align: center; color: var(--ink); background: var(--surface); }
.num-input:focus { border-color: var(--brand); outline: none; }
.guess-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.guess-list li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 99px; background: var(--surface-2); font-size: .88rem; }
.gl-n { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.gl-correct { background: var(--good-soft) !important; color: var(--good); }
.gl-empty { background: var(--bad-soft) !important; color: var(--bad); }
.guess-list li.is-lie { background: var(--bad-soft); outline: 2px solid #F2B6B1; }
.lie-tag { font-family: var(--f-mono); font-size: .66rem; font-weight: 700; background: var(--bad); color: #fff; padding: .05rem .4rem; border-radius: 6px; }
.reasoning { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .9rem; color: var(--machine-press); background: var(--machine-soft); padding: .5rem .75rem; border-radius: 10px; }
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .9rem; }
.strategy { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; border-radius: var(--r-md); background: var(--surface-2); }
.strategy.is-run { background: var(--surface); border: 1px solid var(--line); }
.histo { display: flex; align-items: flex-end; gap: 3px; height: 7.5rem; padding: .3rem; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: stretch; height: 100%; min-width: 0; }
.histo-bar { flex: 1; display: flex; align-items: flex-end; }
.histo-bar i { display: block; width: 100%; background: var(--machine); border-radius: 4px 4px 0 0; min-height: 1px; }
.histo-lbl { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-3); text-align: center; overflow: hidden; white-space: nowrap; }
.tanvi { display: flex; align-items: center; gap: .7rem; }
.heatmap { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.hm-cell { aspect-ratio: 1; border: 0; border-radius: 6px; font-family: var(--f-mono); font-size: clamp(.55rem, 1.2vw, .78rem); color: var(--ink); cursor: pointer; padding: 0; min-width: 0; max-width: 100%; }
.hm-cell.is-hot { color: #fff; font-weight: 700; }

/* ---------- Human vs AI ---------- */
.blip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .7rem; }
.blip-grid.small-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.2rem), 1fr)); gap: .45rem; }
.blip-card { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .7rem .6rem; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); text-align: center; min-width: 0; }
.blip-card.res-ok { border-color: #A9DBBC; background: #F5FBF7; }
.blip-card.res-bad { border-color: #F2B6B1; background: #FFF7F6; }
.blip { display: block; max-width: 100%; height: auto; }
.blip-facts { font-size: .74rem; color: var(--ink-3); }
.badge-zib { background: #E3EAFE; color: #2443A8; } .badge-zub { background: #FFE6D4; color: #9A4A0E; } .badge-unsure { background: var(--surface-2); color: var(--ink-2); }
.pick-row { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.pick { flex: 1; min-height: 2.3rem; padding: .25rem .6rem; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.pick-zib.is-on { background: #3554C8; border-color: #3554C8; color: #fff; }
.pick-zub.is-on { background: #D86A1E; border-color: #D86A1E; color: #fff; }
.pick-unsure.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick[disabled] { cursor: default; }
.reveal { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; align-items: center; }
.conf { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); margin-left: .25rem; }
.versus { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; border-radius: var(--r-md); background: var(--ink); color: #fff; }
.vs-side { display: flex; flex-direction: column; align-items: center; min-width: 6rem; opacity: .75; }
.vs-side.is-win { opacity: 1; }
.vs-side.is-win .vs-score { color: #FFC94A; }
.vs-who { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.vs-score { font-family: var(--f-display); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.vs-mid { font-family: var(--f-display); font-weight: 800; color: #9AA4C4; }
.examples-peek { border-radius: var(--r-md); background: var(--surface-2); padding: .6rem .9rem; }
.examples-peek summary { cursor: pointer; font-weight: 600; }
.examples-peek[open] summary { margin-bottom: .6rem; }
.map .curve { fill: none; stroke-width: 3.5; stroke-linejoin: round; }
.map .curve.curve-a { stroke: #3554C8; } .map .curve.curve-b { stroke: #D86A1E; }
.map .curve-pt { stroke: #fff; stroke-width: 2; }
.map .curve-pt.curve-a { fill: #3554C8; } .map .curve-pt.curve-b { fill: #D86A1E; }
.map .you-pt { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.map .you-label { font-family: var(--f-body); font-size: 13px; font-weight: 600; fill: var(--brand); }
.lg-line.curve-a { background: #3554C8; } .lg-line.curve-b { background: #D86A1E; } .lg-dot.you { background: var(--brand); }
.compare td { font-family: var(--f-body); }
.split-bar { display: flex; height: 2rem; border-radius: 10px; overflow: hidden; font-size: .8rem; font-weight: 600; color: #fff; }
.split-bar i { display: flex; align-items: center; justify-content: center; font-style: normal; white-space: nowrap; overflow: hidden; transition: width .5s ease; }
.sb-ai { background: var(--machine); } .sb-human { background: #C46A1C; }
.preview-blips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-blips .blip-card { padding: .4rem; }