/* Layout: header with stepper and theme toggle; each step is a two-part board (pieces to place, places to put them). */
:root{
  --bg:#eef2f5; --surface:#ffffff; --surface-2:#f5f8fa;
  --ink:#14212b; --muted:#566775; --line:#cfd9e1; --line-strong:#a6b6c2;
  --accent:#1d6f8c; --on-accent:#ffffff; --accent-soft:#d9ecf3;
  --ok:#1b7a4b; --ok-soft:#dcf2e6; --bad:#b3372c; --bad-soft:#fae3e0;
  --c0:#9a6b12; --c1:#7a4bb0; --c2:#1f7a6a; --c3:#2a5fc0; --c4:#b0357a;
  --shadow:0 12px 28px rgba(20,33,43,.28); --hl:#ffd479;
  --font-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e161c; --surface:#152028; --surface-2:#1a2730;
    --ink:#e6eef4; --muted:#92a5b3; --line:#2b3b47; --line-strong:#445768;
    --accent:#62b6d4; --on-accent:#08202a; --accent-soft:#17323d;
    --ok:#4ec28a; --ok-soft:#123325; --bad:#f27d70; --bad-soft:#3a1b18;
    --c0:#e0b25a; --c1:#b996ea; --c2:#58c4ae; --c3:#7aa7f2; --c4:#ec7fb7;
    --shadow:0 12px 28px rgba(0,0,0,.6); --hl:#9a7420;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e161c; --surface:#152028; --surface-2:#1a2730;
  --ink:#e6eef4; --muted:#92a5b3; --line:#2b3b47; --line-strong:#445768;
  --accent:#62b6d4; --on-accent:#08202a; --accent-soft:#17323d;
  --ok:#4ec28a; --ok-soft:#123325; --bad:#f27d70; --bad-soft:#3a1b18;
  --c0:#e0b25a; --c1:#b996ea; --c2:#58c4ae; --c3:#7aa7f2; --c4:#ec7fb7;
  --shadow:0 12px 28px rgba(0,0,0,.6); --hl:#9a7420;
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.45 var(--font-body);
  padding-block:20px 36px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:1280px; margin-inline:auto; display:flex; flex-direction:column; gap:14px}

/* Header, stepper, theme toggle */
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.tools{display:flex; flex-wrap:wrap; gap:8px}
h1{margin:0; font-size:clamp(21px,3vw,27px); line-height:1.15; letter-spacing:-.01em; font-weight:700}
.sub{margin:3px 0 0; color:var(--muted); font-size:14px}
.btn{
  font:inherit; font-weight:600; font-size:14px; padding:9px 16px; border-radius:8px;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn svg{width:16px; height:16px; flex:none}
.btn:focus-visible,.stepbtn:focus-visible,.tile:focus-visible,.zone:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.stepper{display:flex; flex-wrap:wrap; gap:8px}
.stepbtn{
  font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 7px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:var(--surface); cursor:pointer;
}
.stepbtn .num{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12.5px; background:var(--surface-2); border:1.5px solid var(--line-strong);
}
.stepbtn:hover:not(:disabled){border-color:var(--accent)}
.stepbtn[aria-current="step"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.stepbtn[aria-current="step"] .num{background:transparent; border-color:currentColor}
.stepbtn.done .num{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.stepbtn[aria-current="step"].done .num{background:transparent; border-color:currentColor; color:inherit}
.stepbtn:disabled{opacity:.5; cursor:not-allowed}

/* Instant feedback switch */
.switch .track{width:30px; height:18px; border-radius:9px; background:var(--line-strong); position:relative; flex:none; transition:background .15s}
.switch .knob{position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); transition:left .15s}
.switch[aria-checked="true"] .track{background:var(--accent)}
.switch[aria-checked="true"] .knob{left:14px}
body.instant .js-check{display:none}

/* Enlarged structure view */
.lb{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; background:rgba(8,14,18,.62);
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.lb-card{position:relative; max-width:100%; padding:20px 20px 14px; background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow)}
.lb-art{width:min(82vw, 640px, calc(76vh * 4 / 3)); aspect-ratio:4 / 3}
.lb-art svg{display:block; width:100%; height:100%}
.lb-cap{margin:6px 0 0; text-align:center; font-weight:600; font-size:17px}
.lb-close{position:absolute; top:8px; right:8px; padding:3px 11px; font-size:20px; line-height:1.2}

/* Step header and progress */
.stephead{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:flex-end; justify-content:space-between}
.stext{flex:1 1 380px; min-width:0}
.stext h2{margin:0 0 3px; font-size:19px; line-height:1.2; font-weight:700}
.lede{margin:0; color:var(--muted); max-width:70ch}
.controls{display:flex; gap:10px; flex-wrap:wrap}
.progress{margin-top:12px}
.progress-row{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-bottom:7px; min-height:34px}
.placed{font-family:var(--font-mono); font-size:13px; font-weight:500}
.result{color:var(--muted); font-size:14px}
.result.good{color:var(--ok); font-weight:600}
.next{padding:6px 14px}
.timebox{margin-left:auto; display:flex; align-items:baseline; gap:10px}
.clock{font-family:var(--font-mono); font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--muted)}
.clock.running{color:var(--ink)}
.clock.finished{color:var(--ok)}
.bestline{font-size:12.5px; color:var(--muted)}
.times{margin-top:8px; font-size:13.5px}
.times summary{cursor:pointer; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px; border-radius:6px}
.times summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.times .tsum{font-family:var(--font-mono); font-size:12px}
.trows{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; max-width:620px}
.trow{display:grid; grid-template-columns:34px 54px minmax(50px, 1fr) 60px 44px; align-items:center; gap:10px}
.trow .tm{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500}
.trow .tn2,.trow .tmode{color:var(--muted); font-size:12px}
.tbar{height:8px; border-radius:4px; background:var(--line); overflow:hidden}
.tbar i{display:block; height:100%; background:var(--line-strong)}
.trow.best .tbar i{background:var(--accent)}
.badge{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
.tfoot{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; color:var(--muted); font-size:12.5px}
.tclear{padding:4px 10px; font-size:12.5px}
.meter{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.meter i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}

.board{display:grid; gap:24px; margin-top:16px}
.b0{grid-template-columns:repeat(2, minmax(0,1fr))}
.b1,.b3{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
@media (min-width: 901px){
  /* The pool stays in view while the groups scroll past */
  .b1 > .panel:first-child,.b3 > .panel:first-child{
    position:sticky; top:calc(env(safe-area-inset-top, 0px) + 12px); align-self:start;
    max-height:calc(100vh - 24px); overflow-y:auto; padding:4px;
  }
}
.b2{grid-template-columns:minmax(0,1fr); gap:18px}
@media (max-width: 900px){ .b0,.b1,.b3{grid-template-columns:minmax(0,1fr)} }
.panel{min-width:0}
.ph{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 10px; font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.ph small{font-family:var(--font-mono); font-size:12px; letter-spacing:0; text-transform:none; font-weight:500}
.grid{display:grid; gap:10px}
.foot{margin:14px 0 0; color:var(--muted); font-size:13px; max-width:90ch}

.step[data-step="1"],.step[data-step="3"]{--tw:120px; --th:126px}
.step[data-step="2"]{--tw:54px; --th:30px}

/* Home cells in the pools keep the layout still while pieces move */
.cell{position:relative; min-width:0; border:1.5px solid transparent; border-radius:9px}
.cell:empty{border-color:var(--line-strong); border-style:dashed}

/* Tiles */
.tile{
  position:absolute; inset:-1.5px; padding:8px;
  background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line-strong); border-radius:9px;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.tile:hover{border-color:var(--accent)}
.tile > svg{display:block; width:100%; height:100%; pointer-events:none}
.tile.selected{outline:2.5px solid var(--accent); outline-offset:2px}
.tile.lifting{opacity:.3}
.tile.ghost{
  position:fixed; inset:auto; z-index:1000; pointer-events:none; cursor:grabbing;
  box-shadow:var(--shadow); transform:scale(1.05) rotate(-1.5deg); border-color:var(--accent);
}
body.dragging,body.dragging *{cursor:grabbing !important}
.tile.ok{border-color:var(--ok)}
.tile.bad{border-color:var(--bad)}
.tile.ok::after,.tile.bad::after{position:absolute; top:3px; left:4px; font-size:12px; font-weight:700; line-height:1}
.tile.ok::after{content:"\2713"; color:var(--ok)}
.tile.bad::after{content:"\2717"; color:var(--bad)}

/* Magnifier button in the corner of structure cards */
.zoom{
  position:absolute; top:4px; right:4px; width:22px; height:22px; padding:0; display:grid; place-items:center;
  border:1.5px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--muted);
  cursor:zoom-in; touch-action:manipulation;
}
.zoom:hover{color:var(--accent); border-color:var(--accent)}
.zoom:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.zoom svg{width:13px; height:13px; pointer-events:none}
.step[data-step="1"] .zoom{width:24px; height:24px; top:4px; right:4px}
.step[data-step="1"] .zoom svg{width:14px; height:14px}
.holder.fill .zoom{top:6px; right:6px}
.tile.ghost .zoom{display:none}

/* Step 1 */
.g1{grid-template-columns:repeat(auto-fill, minmax(128px, 1fr))}
.g1 .cell,.slot{aspect-ratio:1.05}
.slot{display:flex; flex-direction:column; overflow:hidden; background:var(--surface-2); border:1.5px solid var(--line); border-radius:9px; min-width:0}
.slot .name{
  flex:none; height:30px; display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:0 10px; font-weight:600; font-size:13.5px; background:var(--surface); border-bottom:1.5px solid var(--line);
}
.slot .name span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mark{font-weight:700; font-size:14px; flex:none}
.holder{position:relative}
.holder.fill{flex:1; min-height:0}
.holder.fill .tile{inset:0; border-width:0; border-radius:0}
.holder.fill .tile.selected{outline-offset:-3px}
.holder:empty::after{
  content:"Drop here"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--muted); font-size:12px; pointer-events:none;
}

/* Step 2: pool of named tiles and five groups */
.g2{grid-template-columns:repeat(auto-fill, var(--tw)); gap:8px; justify-content:start}
.g2 .cell{width:var(--tw); height:var(--th)}
.tile.named{display:flex; flex-direction:column; padding:4px 3px 3px; gap:1px}
.tile.named > svg{flex:1; min-height:0}
.tn{font-size:12.5px; font-weight:600; text-align:center; line-height:1.2; white-space:nowrap; flex:none}
.bins{display:flex; flex-direction:column; gap:10px}
.bin,.aslot{border:1.5px solid var(--line); border-radius:10px; background:var(--surface-2); overflow:hidden; min-width:0}
.bhead{display:flex; align-items:center; gap:8px; min-height:32px; padding:5px 10px; background:var(--surface); border-bottom:1.5px solid var(--line); font-size:13.5px}
.bin .bhead{background:color-mix(in srgb, var(--c) 12%, var(--surface))}
.bhead strong{font-weight:600; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.bhead .desc{flex:1; min-width:0; color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bhead .cnt{margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--muted); flex:none}
.dot{width:10px; height:10px; border-radius:50%; background:var(--c); flex:none}
.holder.flow{display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; padding:7px}
.holder.flow .tile{position:relative; inset:auto; width:var(--tw); height:var(--th); flex:none}
.bin .holder.flow{min-height:calc(var(--th) + 14px)}
@media (max-width: 640px){
  .bin .bhead{flex-wrap:wrap}
  .bhead .desc{order:9; flex-basis:100%; white-space:normal}
}

/* Step 3: codon chips and amino acid slots */
.g3{grid-template-columns:repeat(auto-fill, var(--tw)); gap:6px; justify-content:start}
.g3 .cell{width:var(--tw); height:var(--th); border-radius:8px}
.cpool{display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 24px}
.cgroup{min-width:0}
.ch{margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ch b{font-family:var(--font-mono); font-size:13px; color:var(--ink); letter-spacing:0}
.cgrid.g3{grid-template-columns:repeat(4, var(--tw))}
.tile.chip{
  display:flex; align-items:center; justify-content:center; gap:3px; padding:0; border-radius:8px;
  font-family:var(--font-mono); font-size:13px; font-weight:500;
}
.tile.chip.ok::after,.tile.chip.bad::after{position:static; font-size:11px}
.g3z{grid-template-columns:repeat(auto-fill, minmax(184px, 1fr)); align-items:start}
.aslot .holder.flow{gap:6px; min-height:46px}
.b2 > .panel:first-child{position:relative}
.startq{position:absolute; left:0; right:0; top:24px; bottom:0; z-index:5; display:flex; flex-direction:column; justify-content:center; padding:12px 18px; border:1.5px solid var(--accent); border-radius:10px; background:var(--accent-soft)}
.startq .opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.startq .btn.wrong{border-color:var(--bad); color:var(--bad); background:var(--bad-soft); opacity:.8}
.aslot.special{border-color:var(--accent)}
.aslot.special .bhead{background:var(--accent-soft)}
.aslot.special .dot{display:none}

/* Drop and check states shared by all zones */
.zone.over{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent)}
.zone.ok{border-color:var(--ok)}
.zone.ok .name,.zone.ok .bhead{background:var(--ok-soft); color:var(--ok); border-bottom-color:var(--ok)}
.zone.ok .bhead .desc,.zone.ok .bhead .cnt{color:var(--ok)}
.zone.bad{border-color:var(--bad)}
.zone.bad .name,.zone.bad .bhead{background:var(--bad-soft); color:var(--bad); border-bottom-color:var(--bad)}
.zone.bad .bhead .desc,.zone.bad .bhead .cnt{color:var(--bad)}

.ta{display:none}

/* Fit mode: on a laptop-sized window each step fills the screen, no page scrolling */
@media (min-width:1000px) and (min-height:600px){
  body{margin:0; height:100dvh; overflow:hidden; padding-block:10px}
  .wrap{max-width:1600px; height:100%; gap:8px}
  .sub{display:none}
  .top{flex-wrap:nowrap; gap:16px}
  .top h1{font-size:20px; white-space:nowrap}
  .top .stepper{flex:1; justify-content:center; flex-wrap:nowrap}
  .stepbtn{padding:4px 12px 4px 5px}
  .btn{padding:6px 12px}
  #steps{flex:1; min-height:0}
  .step:not([hidden]){display:flex; flex-direction:column; height:100%}
  .stephead{flex-wrap:nowrap; gap:16px; align-items:center}
  .stext{flex:1 1 auto}
  .stext h2{font-size:17px; margin:0 0 1px}
  .lede{font-size:13px; max-width:130ch}
  .progress{margin-top:6px}
  .progress-row{min-height:28px; margin-bottom:4px}
  .times{margin-top:4px}
  .foot{display:none}
  .board{flex:1; min-height:0; margin-top:8px; gap:16px}
  .panel{display:flex; flex-direction:column; min-height:0}
  .ph{margin:0 0 6px}

  /* Step 1: two 5 x 4 grids that stretch to the available height */
  .g1{flex:1; min-height:0; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px}
  .g1 .cell,.slot{aspect-ratio:auto; min-height:0}
  .slot .name{height:26px; font-size:12.5px; padding:0 8px}

  /* Step 2: stretching pool, compact groups sized from the window height */
  .step[data-step="1"],.step[data-step="3"]{--th:clamp(48px, calc((100dvh - 345px) / 4), 100px); --tw:clamp(64px, var(--th), 76px)}
  .bins{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; align-content:start}
  .bins > .bin:first-child{grid-column:1 / -1}
  .b0,.b1,.b3{grid-template-rows:minmax(0,1fr)}
  .b1,.b3{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .b1 > .panel:first-child,.b3 > .panel:first-child{position:static; align-self:stretch; max-height:none; overflow:visible; padding:0}
  .g2{flex:1; min-height:0; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; justify-content:stretch}
  .g2 .cell{width:auto; height:auto; min-height:0}
  .bins{gap:6px}
  .bhead{min-height:26px; padding:3px 8px}
  .holder.flow{padding:5px; gap:6px}
  .bin .holder.flow{min-height:calc(var(--th) + 10px)}
  .holder.flow .tn{display:none}
  .holder.flow .ta{display:block; font-size:12px; font-weight:600; text-align:center; flex:none; line-height:1.2}

  /* Step 3: four codon blocks side by side, 7 x 3 amino acid slots below */
  .step[data-step="2"]{--tw:46px; --th:23px; --ch:clamp(20px, 3.8dvh, 32px)}
  .b2{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:8px}
  .cpool{flex-wrap:nowrap; gap:12px; align-items:stretch}
  .cgroup{flex:1 1 0; min-width:0}
  .ch{margin:0 0 4px}
  .cgrid.g3{grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px}
  .g3 .cell{width:auto; height:var(--ch)}
  .b2 > .panel:last-child{min-height:0}
  .g3z{flex:1; min-height:0; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; align-items:stretch}
  .aslot{display:flex; flex-direction:column; min-height:0}
  .aslot .holder.flow{flex:1; min-height:0; gap:4px; padding:5px}
  .tile.chip{font-size:12.5px}
}

/* Learn / Test switch and Learn mode */
.seg{display:inline-flex; border:1.5px solid var(--line-strong); border-radius:8px; overflow:hidden; background:var(--surface)}
.segb{font:inherit; font-weight:600; font-size:14px; padding:6px 14px; border:0; background:transparent; color:var(--ink); cursor:pointer}
.segb.on{background:var(--accent); color:var(--on-accent)}
.segb:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.learn{display:none; margin-top:12px}
.step.learning .learn{display:flex; flex-direction:column; gap:10px; flex:1; min-height:0}
.step.learning .board,.step.learning .progress,.step.learning .js-check,.step.learning .js-reset,.step.learning .js-sheet,.step.learning .foot{display:none !important}

.ltabs{display:flex; flex-wrap:wrap; gap:6px}
.ltab{
  font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 5px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:var(--surface);
}
.ltab .ln{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:11.5px; border:1.5px solid var(--line-strong); background:var(--surface-2)}
.ltab.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.ltab.on .ln{background:transparent; border-color:currentColor}
.ltab.fin:not(.on) .ln{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.ltab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lbody{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px}
.lcols{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px}
.lleft,.lside,.lq{min-width:0; min-height:0}
.lcards{display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:10px; align-content:start}
.lcards > .lcard{max-width:250px}
.lcards.many{grid-template-columns:repeat(auto-fill, minmax(116px, 1fr))}
.lcards.many > .lcard{max-width:none}
.lcards.many:not(.compact) .la{aspect-ratio:5 / 3; padding:3px}
.lcards.compact{grid-template-columns:repeat(auto-fill, minmax(112px, 1fr))}
.lcards.compact.many{grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:6px}
.lcard{margin:0; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column}
.lcard.known{border-color:var(--c, var(--ok))}
.lcard .la{aspect-ratio:4 / 3; padding:6px}
.lcard .la svg{display:block; width:100%; height:100%}
.lcard figcaption{padding:5px 9px 8px; border-top:1.5px solid var(--line); display:flex; flex-direction:column; gap:2px; font-size:12.5px; line-height:1.3}
.lcard figcaption b{font-size:13.5px; display:flex; align-items:center; gap:6px}
.lcard figcaption span{color:var(--muted)}
.lcards.many figcaption span{display:none}
.lcards.compact figcaption{padding:3px 6px 4px}
.lcards.compact figcaption span{display:none}
.lcards.compact figcaption b{font-size:12px}
.lcard .mk{color:var(--muted); letter-spacing:.2em}
.ltip{margin:0; max-width:80ch; font-size:14px}
.lact{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.rule{margin:0; padding:8px 12px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; font-size:13.5px}

/* Codon table */
.ctab{display:grid; grid-template-columns:30px repeat(4, minmax(0,1fr)); gap:4px; font-size:12px}
.ctab .chd,.ctab .rhd,.ctab .corner{display:grid; place-items:center; font-family:var(--font-mono); font-weight:500; color:var(--muted); font-size:11.5px}
.ctab .rhd{font-size:15px; color:var(--ink); font-weight:600}
.ctab .cc{display:flex; flex-direction:column; gap:1px; padding:3px 4px; border:1.5px solid var(--line); border-radius:8px; background:var(--surface)}
.ctab .cl{display:flex; justify-content:space-between; gap:6px; font-family:var(--font-mono); line-height:1.35; padding:0 3px; border-radius:4px}
.ctab .cl i{font-style:normal; font-weight:500; color:var(--c)}
.ctab .cl.dim{opacity:.3}
.ctab .cl.act{background:var(--accent-soft); outline:1.5px solid var(--accent)}

/* Questions */
.lq{display:flex; flex-direction:column; gap:10px}
.qprog{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted)}
.qprog .meter{flex:1}
.qtext{font-size:16px; font-weight:600}
.qtext .cod{font-family:var(--font-mono); font-size:22px; letter-spacing:.06em; padding:2px 10px; border-radius:8px; background:var(--accent-soft); color:var(--ink)}
.qsvg{width:min(100%, 260px); aspect-ratio:4 / 3; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); padding:6px; margin-bottom:6px}
.qsvg svg{display:block; width:100%; height:100%}
.opts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.opt{
  font:inherit; font-weight:600; font-size:14px; text-align:left; padding:9px 12px; border-radius:9px; cursor:pointer;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); display:flex; align-items:center; gap:8px;
}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok); background:var(--ok-soft); color:var(--ok)}
.opt.wrong{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
.fb{min-height:20px; font-size:14px; color:var(--muted)}
.fb .g{color:var(--ok)} .fb .b{color:var(--bad)}
@media (max-width: 900px){ .lcols{grid-template-columns:minmax(0,1fr)} }
@media (min-width:1000px) and (min-height:600px){
  .learn{margin-top:6px}
  .ctab .cc{padding:2px 4px}
  .ctab .cl{line-height:1.5; font-size:13px}
  .ctab .cc{padding:3px 5px}
  .opt{padding:7px 12px}
}
@media (min-width:1000px) and (min-height:600px) and (max-height:660px){
  .step[data-step="2"]{--th:20px; --tw:42px}
  .lcards.many:not(.compact) figcaption{padding:2px 6px 3px}
  .lcards.many:not(.compact) .la{aspect-ratio:2 / 1}
}
.lb-art.wide{width:min(94vw, 900px); aspect-ratio:auto}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* Step 3 scope bar: which codon lessons the board covers */
.scope{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:8px; font-size:13.5px; color:var(--muted)}
.scope label{display:inline-flex; align-items:center; gap:8px}
.scope select{font:inherit; font-weight:600; font-size:13.5px; padding:5px 8px; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink)}
.scope .cum input{width:16px; height:16px; accent-color:var(--accent)}
.scope .cum input:disabled + *, .scope .cum:has(input:disabled){opacity:.5}
.scope-n{font-family:var(--font-mono); font-size:12.5px}

/* Practice flow: auto-advance switch, key hints, codon drag question */
.ltabs{align-items:center}
.lauto{margin-left:auto; padding:4px 10px; font-size:12.5px}
kbd{margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--muted); border:1px solid var(--line-strong); border-radius:4px; padding:0 5px; line-height:1.5}
.lcell{position:relative; width:128px; height:56px; margin:2px 0 4px}
.lcell .tile{font-size:24px; letter-spacing:.06em; cursor:grab}
.lslots{display:grid; grid-template-columns:repeat(auto-fill, minmax(172px, 1fr)); gap:8px}
.lslot{display:flex; align-items:center; gap:7px; min-width:0; padding:8px 10px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--surface); font-weight:600; font-size:13.5px; cursor:pointer}
.lslot .sn{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lslot:hover{border-color:var(--accent)}
.lslot:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lslot.ok{border-color:var(--ok); background:var(--ok-soft); color:var(--ok)}
.lslot.bad{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
.opts.bases{grid-template-columns:repeat(4, minmax(0,1fr))}
.opts.bases .opt{justify-content:center; font-family:var(--font-mono); font-size:18px}
.opts.bases kbd{margin-left:6px}
.rev{margin:2px 0 4px}
.rev .cod{font-family:var(--font-mono); font-size:26px; letter-spacing:.08em; padding:2px 12px; border-radius:8px; background:var(--accent-soft)}
.rev u{text-decoration:none; color:var(--accent)}
.step.learning .scope{display:none}

/* Step 4: letter slots, and letter styling in cards and questions */
.lgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(var(--tw) + 18px), 1fr)); gap:8px; align-content:start}
.lzone{border:1.5px solid var(--line); border-radius:10px; background:var(--surface-2); overflow:hidden; min-width:0}
.lzone .bhead{justify-content:space-between; min-height:30px}
.ltr{font-family:var(--font-mono); font-size:16px; font-weight:600}
.lzone .holder.flow{min-height:calc(var(--th) + 14px); justify-content:center}
.ltrb{font-family:var(--font-mono); font-weight:700; color:var(--accent); min-width:1.1em}
.olt{font-family:var(--font-mono); font-size:20px; font-weight:600}
@media (min-width:1000px) and (min-height:600px){
  .lgrid{flex:1; min-height:0; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; align-content:stretch}
  .lzone{display:flex; flex-direction:column; min-height:0}
  .lzone .bhead{min-height:24px}
  .lzone .holder.flow{flex:1; min-height:0; align-content:center}
}

/* Step 3 table layout */
.js-layout{margin-left:auto}
.js-layout .segb{font-size:13px; padding:5px 12px}
.tpool.g3{grid-template-columns:repeat(auto-fill, var(--tw))}
.tile.aatile{border-left:4px solid var(--c)}
.ttab{display:grid; grid-template-columns:30px repeat(4, minmax(0,1fr)); gap:5px}
.ttab .chd,.ttab .rhd,.ttab .corner{display:grid; place-items:center; font-family:var(--font-mono); font-weight:500; color:var(--muted); font-size:11.5px}
.ttab .rhd{font-size:15px; color:var(--ink); font-weight:600}
.tbox{display:flex; flex-direction:column; justify-content:center; gap:4px; padding:4px; min-height:40px; min-width:0; border:1.5px solid var(--line); border-radius:9px; background:var(--surface)}
.tbox:empty{opacity:.35}
.tzone{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 2px 8px; border:1.5px solid var(--line); border-radius:7px; background:var(--surface-2)}
.tpat{font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.03em}
.tzone .holder.flow{padding:0; gap:0; min-width:var(--tw); min-height:calc(var(--th) + 2px); border:1.5px dashed var(--line-strong); border-radius:7px; flex:none}
.tzone .holder.flow:not(:empty){border-style:solid; border-color:transparent}
.tzone .holder:empty::after{content:""}
.tzone.ok{border-color:var(--ok); background:var(--ok-soft)}
.tzone.bad{border-color:var(--bad); background:var(--bad-soft)}
.tzone.link{outline:2px solid var(--accent); outline-offset:1px}
@media (min-width:1000px) and (min-height:600px){
  .ttab{flex:none; grid-template-rows:auto repeat(4, auto); gap:4px}
  .b2 > .panel:last-child{overflow:auto}
  .tbox{min-height:min-content; padding:3px; gap:3px}
  .tzone{padding:1px 3px 1px 7px}
  .tzone .holder.flow{min-height:var(--th)}
  .tzone .tile{font-size:12px}
}