/* Cosmos Science notes (Years 7–10). Loaded only on science notes pages, after notes.css. */
:root {
	--sci-blue: #5cc8ff;
	--sci-blue-soft: rgba(92, 200, 255, .16);
	--sci-orange: #ff9a5c;
	--sci-green: #59d499;
	--sci-red: #ff6b6b;
	--sci-ink: #e8ecf6;
	--sci-muted: #a7b3d1;
	--sci-panel: rgba(255, 255, 255, .045);
	--sci-line: rgba(255, 255, 255, .12);
}

/* ---------- Opening hook ---------- */
.sci-hook { position: relative; margin: 0 0 1.8rem; padding: 1.1rem 1.25rem 1.1rem 3.4rem; border-radius: 14px; background: linear-gradient(135deg, rgba(242, 107, 29, .16), rgba(92, 200, 255, .08)); border: 1px solid rgba(255, 154, 92, .28); font-size: 1.06rem; }
.sci-hook::before { content: "?"; position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent, #f26b1d); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1rem; }
.sci-hook p { margin: 0; }

/* ---------- Boxes ---------- */
.sci-box { margin: 1.6rem 0; padding: 1rem 1.2rem; border-radius: 12px; background: var(--sci-panel); border: 1px solid var(--sci-line); border-left-width: 4px; }
.sci-box > :last-child { margin-bottom: 0; }
.sci-box-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .45rem; }
.sci-key { border-left-color: var(--sci-blue); }
.sci-key .sci-box-label { color: var(--sci-blue); }
.sci-mistakes { border-left-color: var(--sci-red); }
.sci-mistakes .sci-box-label { color: var(--sci-red); }
.sci-mistakes li { margin-bottom: .45rem; }
.sci-further { border-left-color: var(--sci-green); background: rgba(89, 212, 153, .06); }
.sci-further .sci-box-label { color: var(--sci-green); }
.sci-lab { border-left-color: var(--sci-orange); }
.sci-lab .sci-box-label { color: var(--sci-orange); }

/* ---------- Tables ---------- */
.sci-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; -webkit-overflow-scrolling: touch; }
.sci-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.sci-table-narrow { min-width: 0; max-width: 420px; }
.sci-table th, .sci-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--sci-line); text-align: left; vertical-align: top; }
.sci-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sci-muted); border-bottom-color: rgba(255, 255, 255, .25); }
.sci-table tbody th { color: var(--sci-orange); font-weight: 700; white-space: nowrap; }
.sci-table a { color: var(--sci-orange); }

/* ---------- Lists ---------- */
.sci-big-list { counter-reset: big; list-style: none; padding: 0; }
.sci-big-list li { counter-increment: big; position: relative; padding: .55rem .8rem .55rem 3rem; margin: .4rem 0; background: var(--sci-panel); border-radius: 10px; }
.sci-big-list li::before { content: counter(big); position: absolute; left: .8rem; top: .5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sci-blue-soft); color: var(--sci-blue); font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.sci-steps { counter-reset: st; list-style: none; padding: 0; border-left: 2px dashed rgba(255, 154, 92, .5); margin-left: .6rem; }
.sci-steps li { counter-increment: st; position: relative; padding: .2rem 0 .9rem 1.6rem; }
.sci-steps li::before { content: counter(st); position: absolute; left: -.85rem; top: .15rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent, #f26b1d); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }

/* ---------- Formula ---------- */
.sci-formula { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.2rem auto; padding: 1rem 1.4rem; width: fit-content; max-width: 100%; border-radius: 12px; background: rgba(92, 200, 255, .1); border: 1px solid rgba(92, 200, 255, .35); font-size: 1.25rem; font-weight: 700; }
.sci-frac { display: inline-flex; flex-direction: column; align-items: center; }
.sci-frac span:first-child { border-bottom: 2px solid currentColor; padding: 0 .3rem; }
.sci-frac span:last-child { padding: 0 .3rem; }

/* ---------- Worked examples ---------- */
.sci-example { margin: 1.4rem 0; border-radius: 12px; border: 1px solid var(--sci-line); overflow: hidden; }
.sci-example > header { padding: .55rem 1rem; background: rgba(255, 255, 255, .06); font-weight: 800; font-size: .92rem; }
.sci-example-body { padding: .9rem 1rem; }
.sci-example-body > p:first-child { margin-top: 0; }
.sci-step { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .55rem 0 .55rem .9rem; border-left: 3px solid rgba(255, 154, 92, .55); margin: .4rem 0; }
.sci-step-note { font-size: .86rem; color: var(--sci-muted); font-style: italic; }
@media (min-width: 720px) { .sci-step { grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: baseline; } }

/* ---------- Terms ---------- */
.sci-term { all: unset; cursor: help; border-bottom: 2px dotted var(--sci-blue); color: inherit; }
.sci-tip { position: absolute; z-index: 90; max-width: 260px; padding: .55rem .75rem; border-radius: 10px; background: #050b1c; border: 1px solid var(--sci-line); font-size: .88rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* ---------- Figures (SVG diagrams) ---------- */
.sci-fig { margin: 1.6rem 0; }
.sci-fig-art { border-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, rgba(92, 200, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--sci-line); padding: .8rem; }
.sci-fig-art svg { display: block; width: 100%; height: auto; }
.sci-fig-half { max-width: 460px; margin-left: auto; margin-right: auto; }
.sci-fig figcaption { margin-top: .5rem; font-size: .88rem; color: var(--sci-muted); display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; }
.sci-fig-toggle { flex: none; font: inherit; font-size: .8rem; padding: .2rem .65rem; border-radius: 999px; background: transparent; color: var(--sci-blue); border: 1px solid rgba(92, 200, 255, .45); cursor: pointer; }
.sci-fig.labels-hidden .lbl { opacity: 0; }
.sci-fig.labels-hidden .lbl.peek { opacity: 1; }
.sci-fig .lbl { transition: opacity .2s; cursor: default; }
.sci-fig.labels-hidden .lbl { cursor: pointer; }

/* Diagram palette */
svg.sd text { font-family: var(--font, system-ui, sans-serif); }
.sd .s-ink { fill: var(--sci-ink); }
.sd .s-mut { fill: var(--sci-muted); }
.sd .s-acc { fill: var(--sci-orange); }
.sd .s-acc-f { fill: var(--sci-orange); }
.sd .s-line { stroke: var(--sci-muted); stroke-width: 2; fill: none; }
.sd .s-line-thin { stroke: var(--sci-muted); stroke-width: 1.2; fill: none; }
.sd .s-dash { stroke: var(--sci-muted); stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.sd .s-glass { stroke: #c6d0e8; stroke-width: 2.2; fill: rgba(255, 255, 255, .03); }
.sd .s-p { fill: var(--sci-blue); stroke: #0a1633; stroke-width: 1.5; }
.sd .s-p2 { fill: var(--sci-orange); stroke: #0a1633; stroke-width: 1.5; }
.sd .s-heavy { fill: #8fa3c8; stroke: #0a1633; stroke-width: 1.5; }
.sd .s-water { fill: rgba(92, 200, 255, .14); }
.sd .s-surface { stroke: var(--sci-blue); stroke-width: 2; fill: none; opacity: .8; }
.sd .s-vib { stroke: var(--sci-orange); stroke-width: 2; stroke-linecap: round; }
.sd .s-arr, .sd .s-arr-thin { stroke: var(--sci-muted); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sd .s-arr-thin { stroke-width: 1.6; }
.sd .s-arr-acc { stroke: var(--sci-orange); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sd .s-arr-blue { stroke: var(--sci-blue); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sd .s-plunger { fill: #c6d0e8; }
.sd .s-stop { fill: var(--sci-orange); }
.sd .s-sand { fill: #d9b46a; stroke: #0a1633; stroke-width: 1; }
.sd .s-dye { fill: var(--sci-orange); }
.sd .s-rock { fill: #8a8f99; stroke: #0a1633; stroke-width: 1.5; }
.sd .s-hit { stroke: #ffd36b; stroke-width: 2.5; stroke-linecap: round; }
.sd .s-bubble { fill: rgba(255, 255, 255, .12); stroke: #e8ecf6; stroke-width: 1.5; }
.sd .s-beam { fill: #6b7488; stroke: #c6d0e8; stroke-width: 1.5; }
.sd .s-steel { fill: var(--sci-orange); stroke: #0a1633; stroke-width: 1.5; }
.sd .s-steel-r { fill: #c6d0e8; }
.sd .s-deck { fill: #4a5470; stroke: #c6d0e8; stroke-width: 1.5; }
.sd .s-node { fill: rgba(92, 200, 255, .12); stroke: var(--sci-blue); stroke-width: 2; }
.sd .s-curve { stroke: var(--sci-orange); stroke-width: 4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sd .s-kettle { fill: #39425c; stroke: #c6d0e8; stroke-width: 2; }
.sd .s-droplet { fill: rgba(232, 236, 246, .75); }
.sd .s-orbit { stroke: var(--sci-muted); stroke-width: 1.4; fill: none; stroke-dasharray: 3 4; }
.sd .s-pro { fill: var(--sci-orange); }
.sd .s-neu { fill: #c6d0e8; }
.sd .s-ele { fill: var(--sci-blue); }
.sd .s-stm { fill: var(--sci-orange); opacity: .85; }

/* Small particle diagrams used in questions */
.sci-dots { width: 92px; height: 92px; display: block; }
.sci-dots-box { fill: rgba(255, 255, 255, .04); stroke: #c6d0e8; stroke-width: 2; }
.sci-dots-p { fill: var(--sci-blue); stroke: #0a1633; stroke-width: 1.2; }
.sci-dots-v { stroke: var(--sci-orange); stroke-width: 1.6; stroke-linecap: round; }
.sci-dots-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .85rem; }

/* ---------- Interactives ---------- */
.sci-sim { margin: 2rem 0; border-radius: 16px; border: 1px solid rgba(255, 154, 92, .35); background: linear-gradient(180deg, rgba(242, 107, 29, .08), rgba(255, 255, 255, .02)); overflow: hidden; }
.sci-sim-head { display: flex; align-items: baseline; gap: .7rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--sci-line); }
.sci-sim-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0a1633; background: var(--sci-orange); padding: .12rem .45rem; border-radius: 6px; }
.sci-sim-title { font-weight: 800; font-size: 1.05rem; }
.sci-sim-stage { padding: 1rem 1.1rem; min-height: 120px; }
.sci-sim-tasks { padding: .2rem 1.1rem 1rem; font-size: .95rem; }
.sci-sim-tasks .sci-box-label { color: var(--sci-orange); }
.sci-sim-tasks ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.sci-sim-tasks li { margin: .25rem 0; }
.sci-sim canvas { display: block; width: 100%; height: auto; border-radius: 12px; background: rgba(5, 11, 28, .55); touch-action: pan-y; }
.sci-canvas-wrap.is-fit canvas { touch-action: none; }
.sci-ctrls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0 0; }
.sci-ctrls label { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--sci-muted); }
.sci-btn { font: inherit; font-size: .9rem; font-weight: 700; padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: var(--sci-ink); cursor: pointer; transition: background .15s, border-color .15s; }
.sci-btn:hover { background: rgba(255, 255, 255, .12); }
.sci-btn.is-on, .sci-btn[aria-pressed="true"] { background: var(--accent, #f26b1d); border-color: var(--accent, #f26b1d); color: #fff; }
.sci-btn:disabled { opacity: .45; cursor: not-allowed; }
.sci-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.sci-range { accent-color: var(--accent, #f26b1d); width: 160px; }
.sci-readout { display: inline-flex; gap: .4rem; align-items: baseline; padding: .3rem .7rem; border-radius: 10px; background: rgba(5, 11, 28, .6); font-variant-numeric: tabular-nums; font-size: .92rem; }
.sci-readout b { color: var(--sci-orange); font-size: 1.05rem; }
.sci-note { font-size: .9rem; color: var(--sci-muted); margin: .7rem 0 0; min-height: 1.4em; }
.sci-note strong { color: var(--sci-ink); }
.sci-grid2 { display: grid; gap: 1rem; }
@media (min-width: 760px) { .sci-grid2 { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.sci-mini-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sci-mini-table th, .sci-mini-table td { padding: .35rem .45rem; border-bottom: 1px solid var(--sci-line); text-align: left; }
.sci-mini-table td.ok { color: var(--sci-green); font-weight: 700; }
.sci-mini-table td.no { color: var(--sci-red); font-weight: 700; }
.sci-mini-table tr.is-here { background: rgba(255, 154, 92, .1); }
.sci-input { font: inherit; width: 6.5rem; padding: .4rem .55rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(5, 11, 28, .6); color: var(--sci-ink); }

/* ---------- Test yourself ---------- */
.sci-test { margin: 3rem 0 1rem; padding: 1.2rem; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid var(--sci-line); }
.sci-test-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sci-test-head h2 { margin: 0; }
.sci-test-score { font-size: .9rem; color: var(--sci-muted); }
.sci-test-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.2rem; }
.sci-tab { font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; padding: .5rem .95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: var(--sci-muted); cursor: pointer; }
.sci-tab[aria-selected="true"] { background: var(--sci-ink); color: #0a1633; border-color: var(--sci-ink); }
.sci-tab .sci-tab-done { display: inline-block; margin-left: .35rem; color: var(--sci-green); }
.sci-panel[hidden] { display: none; }
.sci-panel-title { font-weight: 700; margin: 0 0 .8rem; }
.sci-panel-foot { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.sci-result { font-weight: 700; }
.sci-result.good { color: var(--sci-green); }
.sci-result.meh { color: var(--sci-orange); }
.sci-panel + .sci-panel.sci-sa { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--sci-line); }

/* Multiple choice */
.sci-mcqs { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.sci-mcq { counter-increment: q; margin: 0 0 1.3rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--sci-line); }
.sci-mcq > p:first-child::before { content: counter(q) ". "; font-weight: 800; color: var(--sci-orange); }
.sci-mcq > p { margin: 0 0 .6rem; }
.sci-opt { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit; margin: .35rem 0; padding: .6rem .8rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); color: var(--sci-ink); cursor: pointer; }
.sci-opt:hover:not(:disabled) { border-color: rgba(255, 255, 255, .4); }
.sci-opt::before { content: attr(data-l); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: rgba(255, 255, 255, .08); }
.sci-opt.is-right { border-color: var(--sci-green); background: rgba(89, 212, 153, .12); }
.sci-opt.is-right::before { background: var(--sci-green); color: #0a1633; }
.sci-opt.is-wrong { border-color: var(--sci-red); background: rgba(255, 107, 107, .1); }
.sci-opt:disabled { cursor: default; }
.sci-mcq:has(.sci-dots) .sci-opt { display: inline-flex; width: auto; margin-right: .4rem; vertical-align: top; }
.sci-why { margin-top: .5rem; padding: .55rem .8rem; border-radius: 8px; background: rgba(92, 200, 255, .08); font-size: .93rem; }
.sci-why p { margin: 0; }

/* Word bank, gaps, sorting, ordering, labelling */
.sci-bank { display: flex; flex-wrap: wrap; gap: .45rem; padding: .7rem; margin-bottom: 1rem; border-radius: 12px; background: rgba(5, 11, 28, .45); border: 1px dashed rgba(255, 255, 255, .2); min-height: 3rem; }
.sci-chip { font: inherit; font-size: .92rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: var(--sci-ink); cursor: grab; touch-action: none; user-select: none; }
.sci-chip.is-picked { background: var(--accent, #f26b1d); border-color: var(--accent, #f26b1d); color: #fff; }
.sci-chip.is-used { opacity: .3; pointer-events: none; }
.sci-blanks-text { line-height: 2.3; }
.sci-gap { display: inline-block; min-width: 6.5rem; padding: 0 .5rem; margin: 0 .15rem; border-bottom: 2px solid var(--sci-blue); text-align: center; color: var(--sci-blue); font-weight: 700; cursor: pointer; line-height: 1.6; border-radius: 6px 6px 0 0; }
.sci-gap:empty::after { content: "\00a0"; }
.sci-gap.is-target { background: rgba(92, 200, 255, .12); }
.sci-gap.is-right { color: var(--sci-green); border-color: var(--sci-green); }
.sci-gap.is-wrong { color: var(--sci-red); border-color: var(--sci-red); }
.sci-items { display: flex; flex-wrap: wrap; gap: .45rem; padding: .7rem; border-radius: 12px; background: rgba(5, 11, 28, .45); border: 1px dashed rgba(255, 255, 255, .2); min-height: 3rem; }
.sci-item { font: inherit; font-size: .92rem; padding: .4rem .8rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); color: var(--sci-ink); cursor: grab; touch-action: none; user-select: none; }
.sci-item.is-picked { outline: 2px solid var(--accent, #f26b1d); }
.sci-item.is-right { border-color: var(--sci-green); background: rgba(89, 212, 153, .14); }
.sci-item.is-wrong { border-color: var(--sci-red); background: rgba(255, 107, 107, .12); }
.sci-groups { display: grid; gap: .7rem; margin-top: .9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sci-group { border-radius: 12px; border: 1px solid var(--sci-line); background: rgba(255, 255, 255, .03); padding: .6rem; min-height: 7rem; }
.sci-group.is-target { border-color: var(--sci-orange); background: rgba(255, 154, 92, .08); }
.sci-group h4 { margin: 0 0 .5rem; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sci-orange); }
.sci-group .sci-item { display: block; width: 100%; text-align: left; margin: .3rem 0; }
.sci-order-list { list-style: none; padding: 0; margin: 0; counter-reset: ord; }
.sci-order-list .sci-item { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; margin: .4rem 0; cursor: default; }
.sci-order-list .sci-item::before { counter-increment: ord; content: counter(ord); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: rgba(255, 255, 255, .1); }
.sci-order-list .sci-item span.t { flex: 1; }
.sci-move { font: inherit; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: var(--sci-ink); cursor: pointer; }
.sci-label-art { position: relative; border-radius: 14px; border: 1px solid var(--sci-line); padding: .6rem; background: rgba(255, 255, 255, .02); }
.sci-label-art svg { display: block; width: 100%; height: auto; }
.sci-label-art .lbl text { opacity: 0; font-size: 17px; }
.sci-label-art .lbl .sci-drop { fill: rgba(92, 200, 255, .1); stroke: var(--sci-blue); stroke-width: 1.5; stroke-dasharray: 4 3; cursor: pointer; }
.sci-label-art .lbl.is-filled text { opacity: 1; }
.sci-label-art .lbl.is-filled .sci-drop { stroke-dasharray: none; fill: rgba(255, 255, 255, .06); }
.sci-label-art .lbl.is-right text { fill: var(--sci-green); }
.sci-label-art .lbl.is-wrong text { fill: var(--sci-red); }

/* Short answer */
.sci-sa-q { position: relative; padding-right: 4.5rem; }
.sci-sa-q > p { margin-top: 0; }
.sci-sa-marks { position: absolute; right: 0; top: 0; font-size: .78rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.sci-sa-label { display: block; font-size: .85rem; color: var(--sci-muted); }
.sci-sa-input { display: block; width: 100%; margin-top: .35rem; font: inherit; font-size: 1rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(5, 11, 28, .55); color: var(--sci-ink); resize: vertical; }
.sci-guide { margin-top: 1rem; border-radius: 12px; border: 1px solid var(--sci-line); overflow: hidden; }
.sci-guide-head { padding: .55rem .9rem; background: rgba(255, 255, 255, .06); font-size: .85rem; font-weight: 800; letter-spacing: .04em; }
.sci-guide-head small { display: block; font-weight: 400; letter-spacing: 0; color: var(--sci-muted); font-size: .82rem; margin-top: .15rem; }
.sci-band { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .65rem .9rem; border-top: 1px solid var(--sci-line); cursor: pointer; font-size: .93rem; }
.sci-band:hover { background: rgba(255, 255, 255, .04); }
.sci-band .sci-band-m { font-weight: 800; color: var(--sci-orange); white-space: nowrap; }
.sci-band.is-picked { background: rgba(255, 154, 92, .14); }
.sci-band.is-picked .sci-band-m::before { content: "✓ "; color: var(--sci-green); }
.sci-model { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(89, 212, 153, .07); border-left: 4px solid var(--sci-green); }
.sci-model .sci-box-label { color: var(--sci-green); }
.sci-model p { margin: 0; }
.sci-yours { margin-top: 1rem; padding: .7rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: .93rem; white-space: pre-wrap; }
.sci-yours b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sci-muted); margin-bottom: .2rem; }

@media print {
	.sci-sim, .sci-test-tabs, .sci-panel-foot, .sci-fig-toggle { display: none !important; }
	.sci-panel[hidden] { display: block !important; }
}
.sd .s-blue { fill: var(--sci-blue); }
.sd .s-vibring { fill: none; stroke: var(--sci-orange); stroke-width: 2; stroke-dasharray: 3 3; }

.sci-canvas-wrap { border-radius: 12px; }
.sci-swipe { display: none; font-size: .8rem; color: var(--sci-muted); margin: .35rem 0 0; }
@media (max-width: 600px) {
	.sci-sim-stage { padding: .8rem; }
	.sci-canvas-wrap:not(.is-fit) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.sci-canvas-wrap:not(.is-fit) canvas { width: 560px; max-width: none; touch-action: pan-x pan-y; }
	.sci-swipe { display: block; }
}

/* Real photos */
.sci-photo { margin: 1.6rem auto; }
.sci-photo img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--sci-line); background: rgba(255, 255, 255, .03); }
.sci-photo-half { max-width: 460px; }
.sci-photo figcaption { margin-top: .5rem; font-size: .9rem; color: var(--sci-muted); }
.sci-credit { display: block; font-size: .75rem; margin-top: .2rem; opacity: .8; }
.sci-credit a { color: inherit; }
.sci-photo-row { display: grid; gap: 1rem; margin: 1.6rem 0; }
.sci-photo-row .sci-photo { margin: 0; }
@media (min-width: 640px) { .sci-photo-row { grid-template-columns: 1fr 1fr; } }

/* ---- Year 7 Ch1 skill tools ---- */
.sci-btn.is-right, .sci-btn.is-right:disabled { opacity: 1; background: rgba(89, 212, 153, .2); border-color: var(--sci-green); color: var(--sci-ink); }
.sci-btn.is-wrong, .sci-btn.is-wrong:disabled { opacity: 1; background: rgba(255, 107, 107, .16); border-color: var(--sci-red); color: var(--sci-ink); }
.sci-hb-q { margin: .9rem 0 .6rem; }
.sci-hb-cols { display: grid; gap: .8rem; }
@media (min-width: 760px) { .sci-hb-cols { grid-template-columns: repeat(3, 1fr); } }
.sci-hb-col { display: flex; flex-direction: column; gap: .4rem; }
.sci-hb-h { font-weight: 800; color: var(--sci-orange); font-size: .95rem; }
.sci-btn.sci-hb-opt { border-radius: 10px; text-align: left; font-weight: 600; line-height: 1.35; }
.sci-hb-out { margin-top: .9rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(5, 11, 28, .6); border: 1px dashed var(--sci-line); font-size: 1.02rem; line-height: 1.5; }
.sci-hb-out .is-good { color: var(--sci-green); }
.sci-hb-out .is-weak { color: var(--sci-red); text-decoration: underline wavy rgba(255, 107, 107, .6); text-underline-offset: 4px; }
.sci-hb-ph { color: var(--sci-muted); }
.sci-hb-fb { margin: .3rem 0 0; padding-left: 1.1rem; }
.sci-eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; margin-top: .6rem; }
.sci-eq-tile { font: inherit; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .3rem; border-radius: 12px; border: 1px solid var(--sci-line); background: rgba(255, 255, 255, .03); color: var(--sci-ink); cursor: pointer; font-size: .78rem; line-height: 1.2; text-align: center; }
.sci-eq-tile svg { width: 52px; height: 48px; fill: none; stroke: #c6d0e8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sci-eq-tile svg .w { stroke: var(--sci-blue); }
.sci-eq-tile svg .red { fill: #ff6b6b; stroke: none; }
.sci-eq-tile svg .fl { fill: rgba(92, 200, 255, .5); stroke: var(--sci-blue); stroke-width: 1.2; }
.sci-eq-tile svg .dash { stroke-dasharray: 3 3; }
.sci-eq-tile[aria-pressed="true"] { border-color: var(--accent, #f26b1d); background: rgba(242, 107, 29, .16); }
.sci-eq-tile.is-right { border-color: var(--sci-green); background: rgba(89, 212, 153, .16); }
.sci-eq-tile.is-wrong { border-color: var(--sci-red); background: rgba(255, 107, 107, .14); }
.sci-eq-tile.is-miss { border-color: #ffd36b; border-style: dashed; }
.sci-hz-list { margin: .6rem 0 0; padding-left: 1.3rem; font-size: .92rem; }
.sci-hz-list li { margin: .25rem 0; }
.sci-ft-boxes { display: grid; gap: .8rem; margin-top: .8rem; }
@media (min-width: 760px) { .sci-ft-boxes { grid-template-columns: 1fr 1fr; } }
.sci-ft-box { padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--sci-line); background: rgba(255, 255, 255, .03); }
.sci-ft-h { font-weight: 800; color: var(--sci-orange); margin-bottom: .3rem; }
.sci-ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .35rem 0; font-size: .88rem; }
.sci-ft-row > span:first-child { width: 6.2rem; color: var(--sci-muted); }
.sci-ft-row .sci-btn { padding: .3rem .6rem; font-size: .82rem; }
.sci-ft-run { margin-top: .4rem; }
.sci-fp-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .8rem; }
.sci-fp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .45rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--sci-line); font-size: .93rem; }
.sci-fp-row .sci-btn { padding: .3rem .7rem; font-size: .82rem; }
.sci-unit { color: var(--sci-muted); }

/* ---- Year 7 Ch2 field-guide tools ---- */
.sci-cl-lab { font-size: .85rem; font-weight: 700; color: var(--sci-muted); text-transform: uppercase; letter-spacing: .04em; }
.sci-cl-cols { display: grid; gap: .8rem; margin-top: .8rem; }
@media (min-width: 640px) { .sci-cl-cols { grid-template-columns: 1fr 1fr; } }
.sci-cl-col { padding: .6rem; border-radius: 12px; border: 1px dashed var(--sci-line); background: rgba(5, 11, 28, .35); }
.sci-cl-h { font-weight: 800; color: var(--sci-orange); margin: 0 0 .45rem .2rem; }
.sci-cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; }
.sci-cl-all { grid-column: 1 / -1; }
.sci-cl-card { display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sci-line); font-size: .84rem; line-height: 1.2; transition: opacity .35s, transform .35s, border-color .2s; }
.sci-cl-ico { font-size: 1.35rem; line-height: 1; flex: none; }
.sci-cl-card.is-out { opacity: .18; transform: scale(.94); }
.sci-cl-card.is-tgt { border-color: var(--sci-orange); background: rgba(242, 107, 29, .16); }
.sci-cl-tag { display: inline-block; font-size: .75rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; margin-right: .3rem; }
.sci-cl-tag.is-good { background: rgba(89, 212, 153, .2); color: var(--sci-green); }
.sci-cl-tag.is-ok { background: rgba(255, 211, 107, .18); color: #ffd36b; }
.sci-cl-tag.is-poor { background: rgba(255, 107, 107, .18); color: var(--sci-red); }
.sci-lc-pick { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.sci-btn.sci-lc-obj { font-weight: 600; font-size: .82rem; padding: .35rem .7rem; }
.sci-lc-head { display: flex; align-items: center; gap: .8rem; margin: .9rem 0 .5rem; }
.sci-lc-big { font-size: 2.6rem; line-height: 1; }
.sci-lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.sci-btn.sci-lc-ch { border-radius: 10px; text-align: left; font-weight: 600; }
.sci-btn.sci-lc-ch b { color: var(--sci-orange); margin-right: .2rem; }
.sci-btn.sci-lc-ch[aria-pressed="true"] b { color: #fff; }
.sci-do-env { margin: .7rem 0 .4rem; font-size: .92rem; }
.sci-do-grid { display: grid; gap: .7rem; }
@media (min-width: 760px) { .sci-do-grid { grid-template-columns: repeat(4, 1fr); } }
.sci-do-slot { display: flex; flex-direction: column; gap: .35rem; }
.sci-do-meter { flex: 1 1 180px; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sci-do-meter span { display: block; height: 100%; width: 0; transition: width 1.2s ease-out; background: var(--sci-green); }
.sci-do-meter span.is-ok { background: #ffd36b; }
.sci-do-meter span.is-bad { background: var(--sci-red); }
.sci-do-out { margin: .7rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.sci-do-out li { margin: .25rem 0; }
.sci-do-out li::marker { content: '● '; }
.sci-do-out .is-good::marker { color: var(--sci-green); }
.sci-do-out .is-ok::marker { color: #ffd36b; }
.sci-do-out .is-bad::marker { color: var(--sci-red); }
.sci-tz { display: grid; gap: .8rem; margin-top: .8rem; }
@media (min-width: 760px) { .sci-tz { grid-template-columns: 210px 1fr; } }
.sci-tz-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.sci-tz-ladder li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--sci-line); font-size: .85rem; color: var(--sci-muted); }
.sci-tz-ladder li.is-done { color: var(--sci-ink); border-color: rgba(92, 200, 255, .5); background: rgba(92, 200, 255, .08); }
.sci-tz-ladder li.is-now { border-color: var(--sci-orange); color: var(--sci-ink); }
.sci-tz-ladder b { font-weight: 700; text-align: right; }
.sci-tz-ladder b.sci-it { font-style: italic; }
.sci-tz-q p { margin: 0 0 .5rem; }
.sci-tz-grid { margin-top: .7rem; }
.sci-tz-sel { max-width: 15rem; }
.sci-kr { display: grid; gap: .8rem; margin-top: .8rem; align-items: start; }
@media (min-width: 760px) { .sci-kr { grid-template-columns: 300px 1fr; } }
.sci-kr-l .sci-canvas-wrap { background: radial-gradient(circle at 50% 40%, rgba(217, 180, 106, .16), rgba(5, 11, 28, .6)); border-radius: 14px; }
.sci-kr-key { display: flex; flex-direction: column; gap: .25rem; }
.sci-kr-row { font: inherit; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .5rem; align-items: center; text-align: left; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--sci-line); background: rgba(255, 255, 255, .02); color: var(--sci-muted); font-size: .86rem; }
.sci-kr-row:nth-child(4n+1), .sci-kr-row:nth-child(4n+2) { background: rgba(255, 255, 255, .045); }
.sci-kr-row.is-now { color: var(--sci-ink); border-color: var(--sci-orange); cursor: pointer; }
.sci-kr-row.is-now:hover { background: rgba(242, 107, 29, .16); }
.sci-kr-row.is-took { color: var(--sci-ink); border-color: var(--sci-blue); background: rgba(92, 200, 255, .12); }
.sci-kr-row:disabled { cursor: default; }
.sci-kr-n { font-weight: 800; color: var(--sci-orange); }
.sci-kr-go { font-size: .8rem; white-space: nowrap; }
.sci-kb-q p { margin: .8rem 0 .4rem; }
.sci-kb-tree { margin-top: .9rem; }
.sci-kb-node { display: flex; flex-direction: column; gap: .35rem; }
.sci-kb-qq { align-self: flex-start; padding: .3rem .7rem; border-radius: 10px; border: 1px solid var(--sci-blue); background: rgba(92, 200, 255, .1); font-weight: 700; font-size: .85rem; }
.sci-kb-kids { list-style: none; margin: 0 0 0 .9rem; padding: 0 0 0 .8rem; border-left: 2px solid var(--sci-line); display: flex; flex-direction: column; gap: .4rem; }
.sci-kb-kids > li { display: flex; align-items: flex-start; gap: .5rem; }
.sci-kb-yn { flex: none; width: 2rem; margin-top: .35rem; font-size: .72rem; font-weight: 800; color: var(--sci-muted); text-transform: uppercase; letter-spacing: .05em; }
.sci-kb-leaf { display: flex; flex-wrap: wrap; gap: .2rem .7rem; padding: .3rem .6rem; border-radius: 10px; border: 1px dashed var(--sci-line); font-size: .82rem; }
.sci-kb-leaf.is-active { border: 2px solid var(--sci-orange); background: rgba(242, 107, 29, .12); }
.sci-kb-leaf.is-done { border-style: solid; border-color: rgba(89, 212, 153, .6); background: rgba(89, 212, 153, .08); }
.sci-kd-spec { margin-top: .8rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(217, 180, 106, .1); border: 1px solid rgba(217, 180, 106, .4); }
.sci-kd-spec p { margin: .3rem 0 0; }
.sci-kd-tag { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #d9b46a; }
.sci-kd-tests { display: grid; gap: .4rem; margin-top: .6rem; }
@media (min-width: 640px) { .sci-kd-tests { grid-template-columns: 1fr 1fr; } }
.sci-kd-row { display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.sci-btn.sci-kd-t { font-size: .82rem; padding: .3rem .7rem; flex: none; }
.sci-kd-r { color: var(--sci-muted); font-size: .88rem; }
.sci-kd-r.is-shown { color: var(--sci-ink); font-weight: 700; }
.sci-vc-list { margin: .8rem 0 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.sci-vc-list li { padding: .35rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.sci-vc-list li span { font-size: .75rem; font-weight: 800; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; }
.sci-vc-list li.is-v { border-left: 3px solid var(--sci-green); }
.sci-vc-list li.is-v span { background: rgba(89, 212, 153, .2); color: var(--sci-green); }
.sci-vc-list li.is-x { border-left: 3px solid var(--sci-red); }
.sci-vc-list li.is-x span { background: rgba(255, 107, 107, .18); color: var(--sci-red); }
.sci-dna { margin-top: .8rem; display: flex; flex-direction: column; gap: .35rem; overflow-x: auto; }
.sci-dna-row { display: flex; align-items: center; gap: .6rem; }
.sci-dna-row > span { width: 6.5rem; flex: none; font-size: .85rem; }
.sci-dna-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; letter-spacing: .06em; white-space: nowrap; }
.sci-dna-row i { font-style: normal; display: inline-block; width: .9em; text-align: center; color: var(--sci-muted); }
.sci-dna-row i.d { color: #0a1633; background: var(--sci-orange); border-radius: 3px; font-weight: 800; }
.sci-dna-mat td, .sci-dna-mat th { text-align: center; font-size: .82rem; }
.sci-dna-tree svg { display: block; max-width: 460px; margin: .6rem auto 0; width: 100%; height: auto; }
.sci-btn.sci-lc-ch[aria-pressed="true"]::after { content: ' ✓'; }
.sci-btn.sci-lc-ch.is-right[aria-pressed="true"], .sci-btn.sci-lc-ch.is-wrong[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgba(242, 107, 29, .7); }
.sci-btn.sci-go { border-color: rgba(92, 200, 255, .6); color: var(--sci-blue); }

/* ---------- Year 7 Ch3 microscope bench ---------- */
.sci-vm-badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.sci-vm-b { font-size: .85rem; padding: .25rem .6rem; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .25); color: var(--sci-muted); }
.sci-vm-b.on { border: 1px solid var(--sci-green); color: var(--sci-green); background: rgba(89, 212, 153, .1); }
.sci-ce { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: .8rem; }
@media (max-width: 640px) { .sci-ce { grid-template-columns: 1fr; } }
.sci-ce-svg { width: 100%; height: auto; display: block; }
.sci-ce-p { cursor: pointer; outline: none; transition: filter .15s; }
.sci-ce-p:hover, .sci-ce-p:focus-visible { filter: brightness(1.35); }
.sci-ce-p.on { filter: drop-shadow(0 0 6px #ffd36b) brightness(1.4); }
.sci-ce-side { background: rgba(5, 11, 28, .55); border: 1px solid var(--sci-line); border-radius: 12px; padding: .8rem 1rem; min-height: 10rem; }
.sci-ce-side h4 { margin: 0 0 .4rem; color: var(--sci-orange); font-size: 1.1rem; }
.sci-ce-side p { margin: 0 0 .5rem; font-size: .93rem; }
.sci-ce-an { color: var(--sci-muted); font-style: italic; }
.sci-ce-hint { color: var(--sci-muted); }
.sci-ce-f { display: flex; flex-wrap: wrap; gap: .35rem; }
.sci-ce-f span { font-size: .8rem; padding: .15rem .5rem; border-radius: 999px; }
.sci-ce-f .y { background: rgba(89, 212, 153, .15); color: var(--sci-green); }
.sci-ce-f .n { background: rgba(255, 107, 107, .12); color: var(--sci-red); }
.sci-ch-slots { display: flex; flex-wrap: wrap; align-items: stretch; gap: .4rem; margin-top: .9rem; }
.sci-ch-slot { flex: 1 1 8rem; min-height: 4.6rem; border: 2px dashed rgba(255, 255, 255, .22); border-radius: 12px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .2rem; }
.sci-ch-slot span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sci-muted); }
.sci-ch-slot b { font-size: .92rem; color: var(--sci-muted); font-weight: 600; }
.sci-ch-slot.on { border-style: solid; border-color: var(--sci-green); background: rgba(89, 212, 153, .08); }
.sci-ch-slot.on b { color: var(--sci-ink); }
.sci-ch-arr { align-self: center; color: var(--sci-muted); }
@media (max-width: 640px) { .sci-ch-arr { display: none; } .sci-ch-slot { flex-basis: 40%; } }
.sci-ch-pool { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.sci-ch-tile.used { opacity: .3; }
.sci-ch-tile.shake { animation: sciShake .4s; border-color: var(--sci-red); }
@keyframes sciShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sci-ch-tally { font-size: .85rem; color: var(--sci-muted); margin: .3rem 0 0; }
.sci-sk { margin-top: .8rem; }
.sci-sk-svg { width: 100%; height: auto; display: block; border-radius: 12px; background: rgba(5, 11, 28, .5); }
.sci-sk-svg .sk-epi { fill: rgba(255, 211, 107, .2); stroke: #ffd36b; stroke-width: 2; transition: fill .8s; }
.sci-sk-svg .sk-derm { fill: rgba(255, 143, 177, .12); }
.sci-sk-svg .sk-fat { fill: rgba(255, 211, 107, .06); }
.sci-sk-svg .sk-fatc { fill: rgba(255, 211, 107, .16); stroke: rgba(255, 211, 107, .45); stroke-width: 1.4; }
.sci-sk-svg .sk-mel { fill: rgba(140, 90, 50, .35); transition: fill .8s, r .8s; }
.sci-sk-svg .sk-folli { fill: none; stroke: #c6d0e8; stroke-width: 2; }
.sci-sk-svg .sk-hair { transform-origin: 146px 120px; transition: transform .8s; }
.sci-sk-svg .sk-hairline { fill: none; stroke: #e8ecf6; stroke-width: 4; }
.sci-sk-svg .sk-erector { stroke: #ff8fb1; stroke-width: 5; stroke-linecap: round; transition: stroke-width .5s; }
.sci-sk-svg .sk-duct, .sci-sk-svg .sk-sweat { fill: none; stroke: #5cc8ff; stroke-width: 2.5; }
.sci-sk-svg .sk-drop { fill: #5cc8ff; opacity: 0; }
.sci-sk-svg .sk-cap { fill: none; stroke: #ff6b6b; stroke-width: 6; transition: stroke-width .8s, stroke .8s; }
.sci-sk-svg .sk-nerve { fill: none; stroke: #ffd36b; stroke-width: 3; }
.sci-sk-svg .sk-ending { fill: #ffd36b; }
.sci-sk-svg .sk-cutgap, .sci-sk-svg .sk-clot, .sci-sk-svg .sk-new { opacity: 0; }
.sci-sk-svg .sk-cutgap { fill: #0a1633; }
.sci-sk-svg .sk-clot { fill: #b3202a; }
.sci-sk-svg .sk-new { fill: #ffd36b; }
.sci-sk-svg .sk-t { fill: #a7b3d1; font-size: 15px; }
.sci-sk-svg.is-hot .sk-drop { animation: skDrop 1.6s infinite; }
.sci-sk-svg.is-hot .sk-cap { stroke-width: 13; }
.sci-sk-svg.is-hot .sk-sweat, .sci-sk-svg.is-hot .sk-duct { stroke-width: 4.5; }
.sci-sk-svg.is-cold .sk-hair { transform: rotate(-28deg); }
.sci-sk-svg.is-cold .sk-erector { stroke-width: 9; }
.sci-sk-svg.is-cold .sk-cap { stroke-width: 2.5; stroke: #b56b7a; }
.sci-sk-svg.is-uv .sk-mel { fill: #5a3418; r: 6px; }
.sci-sk-svg.is-uv .sk-epi { fill: rgba(170, 110, 60, .45); }
.sci-sk-svg.is-cut .sk-cutgap { opacity: 1; }
.sci-sk-svg.is-cut .sk-clot { animation: skIn .6s .3s forwards; }
.sci-sk-svg.is-cut .sk-new { animation: skIn .5s forwards; }
.sci-sk-svg.is-touch .sk-nerve { stroke-dasharray: 10 8; animation: skNerve .6s linear infinite; }
.sci-sk-svg.is-touch .sk-ending { animation: skFlash .6s infinite; }
@keyframes skDrop { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes skIn { to { opacity: 1; } }
@keyframes skNerve { to { stroke-dashoffset: 18; } }
@keyframes skFlash { 50% { fill: #fff; r: 11px; } }
@media (prefers-reduced-motion: reduce) { .sci-sk-svg * { animation-duration: 0s !important; transition: none !important; } }

/* ---------- Year 7 Ch5 separation lab ---------- */
.sci-btn.is-right { border-color: var(--sci-green); background: rgba(89, 212, 153, .15); color: var(--sci-green); }
.sci-btn.is-wrong { border-color: var(--sci-red); background: rgba(255, 107, 107, .12); color: var(--sci-red); }
.sci-sep { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
@media (max-width: 640px) { .sci-sep { grid-template-columns: 1fr; } }
.sci-sep-box { background: rgba(5, 11, 28, .55); border: 1px solid var(--sci-line); border-radius: 12px; padding: .7rem .9rem; min-height: 5rem; display: flex; flex-direction: column; gap: .4rem; }
.sci-sep-box b { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sci-muted); }
.sci-sep-box > span { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .95rem; }
.sci-sep-pile { padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(255, 211, 107, .5); color: var(--sci-ink); font-size: .88rem; }
.sci-sep-pile.ok { border-color: var(--sci-green); background: rgba(89, 212, 153, .12); }
.sci-sep-log { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--sci-muted); }