/* Unit 1 visual lab. Colors carry meaning: blue = subject, orange = predicate,
   purple = joining word, yellow = clue, red capital = proper noun. */
.u1{--s:#1d64c8;--s-bg:#d9e9ff;--p:#c2410c;--p-bg:#ffe2cc;--j:#6a2be2;--ok:#157a43;--ok-bg:#d5f4d8;--no:#b42318;--no-bg:#ffe1db;--ease:cubic-bezier(.16,1,.3,1);display:grid;gap:16px}
.u1 ::selection{background:#ffca33;color:#2c196f}
.u1 button{font:inherit;color:inherit}
.u1 button:focus-visible{outline:4px solid #167aca;outline-offset:3px}

/* lesson tabs */
.u1-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.u1-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:2px solid var(--ink);border-radius:18px;background:#fffdf8;box-shadow:3px 4px var(--ink);cursor:pointer;text-align:left;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s}
.u1-tab b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#6145a6}
.u1-tab span{font-weight:900;line-height:1.2}
.u1-tab i{font-style:normal;color:#b7791f;letter-spacing:1px;font-size:.85rem}
.u1-tab:hover{transform:translateY(-2px);box-shadow:4px 6px var(--ink)}
.u1-tab:active{transform:translateY(1px);box-shadow:2px 2px var(--ink)}
.u1-tab.on{background:var(--c);box-shadow:5px 6px var(--ink)}

.u1-lesson{background:#fffdf9;border:2px solid var(--ink);border-radius:26px;box-shadow:5px 6px var(--ink);padding:20px;display:grid;gap:16px}
.u1-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.u1-head h3{font-family:Fraunces,Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1;margin:0}
.u1-pages{margin:6px 0 0;font-size:.85rem;font-weight:800;color:#65449f}
.u1-modes{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff}
.u1-modes button{border:0;background:none;padding:9px 18px;font-weight:900;cursor:pointer;transition:background .2s}
.u1-modes button.on{background:var(--sun)}
.u1-modes button+button{border-left:2px solid var(--ink)}
.u1-pane{display:grid;gap:16px}

/* big idea */
.u1-bigwrap{position:relative;overflow-x:clip;background:var(--c);border:2px solid var(--ink);border-radius:22px;padding:18px 18px 14px}
.u1-bigline{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.15;margin:0 0 14px;max-width:34ch}
.u1-replay{position:absolute;top:14px;right:14px;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:5px 12px;font-weight:900;cursor:pointer}
.u1-replay:hover{background:var(--sun)}
.bi-cap{margin:12px 0 0;font-size:.78rem;font-weight:800;color:#4b3a8a}
.bi1{display:grid;gap:9px}
.bi1-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bi1-row .job{flex:none}
.bi1-s{font-weight:800;font-size:clamp(1rem,2.2vw,1.2rem);background:#fff;border:2px solid var(--ink);border-radius:14px;padding:7px 12px;display:inline-flex;align-items:center;gap:2px}
.bi2-s{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;font-weight:900;font-size:clamp(1.2rem,3vw,1.7rem)}
.bi2-part{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:16px;background:#fff;border:2px solid var(--ink)}
.bi2-part em{font-style:normal;font-size:.72rem;letter-spacing:.12em;font-family:Nunito,sans-serif}
.bi2-part.s{border-color:var(--s);box-shadow:0 5px 0 var(--s)}.bi2-part.s em{color:var(--s)}
.bi2-part.p{border-color:var(--p);box-shadow:0 5px 0 var(--p)}.bi2-part.p em{color:var(--p)}
.bi3-train{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:900;font-size:clamp(1.05rem,2.6vw,1.35rem)}
.bi3-train .car{padding:10px 14px}
.bi3-train .mark2,.bi3-train .low{display:none}
.bi3-train .b b{font-weight:inherit}
.bi3-fan{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bi3-fan span{font-weight:900;padding:4px 11px;border-radius:999px;border:2px solid var(--ink);background:#fff}
.bi3-fan span:nth-child(2),.bi3-fan span:nth-child(4),.bi3-fan span:nth-child(5){background:var(--j);color:#fff;border-color:var(--j)}
.bi4-bins{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bi4-bins .bin{min-height:150px;align-content:start}
.bi4-bins .ncard{margin:4px 4px 0 0}
.bi5-machine{display:grid;gap:8px}
.bi5-row{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) auto;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:6px 12px;font-weight:900;font-size:clamp(1rem,2.3vw,1.2rem)}
.bi5-in{color:#5a4a8f}
.gear{font-size:1.3rem;text-align:center;color:var(--ink)}

/* study + quest cards */
.u1-card,.u1-quest{background:#fff;border:2px solid var(--ink);border-radius:22px;padding:18px;display:grid;gap:12px}
.u1-cardtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.u1-card h4,.u1-quest h4{margin:0;font-size:1.15rem;font-weight:900}
.u1-ref{font-size:.8rem;color:#4b3a8a;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.u1-ref span{font-style:italic}
.u1-rev{font-style:normal;font-weight:900;font-size:.72rem;background:#fff3c4;border:1.5px solid #b7791f;color:#7a4d00;border-radius:999px;padding:1px 8px}
.u1-board{background:#f8f5ff;border:2px dashed #a58fd8;border-radius:18px;padding:16px;display:grid;gap:12px;min-height:120px;align-content:center;overflow-x:clip}
.u1-strip{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;font-weight:800;font-size:clamp(1.12rem,2.6vw,1.5rem);line-height:1.35}
.w{position:relative;display:inline-block;padding:2px 6px 6px;border-radius:9px;border:0;background:none;transition:background .25s,color .25s}
.w.tap{cursor:pointer;background:#fff;box-shadow:inset 0 0 0 2px #cdbff0}
.w.tap:hover{background:#fff4c7;box-shadow:inset 0 0 0 2px var(--ink)}
.w.tap.wrong{background:var(--no-bg);box-shadow:inset 0 0 0 2px var(--no)}
.w::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:0;transform-origin:left;transition:transform .35s var(--ease)}
.w.subj{color:var(--s)}
.w.subj::after{height:4px;border-radius:3px;background:var(--s)}
.w.pred{color:var(--p)}
.w.pred::after{height:8px;border-top:3px solid var(--p);border-bottom:3px solid var(--p)}
.w.ring{box-shadow:0 0 0 3px currentColor;border-radius:999px;padding-inline:10px}
.w.ring-s{color:var(--s);background:var(--s-bg)}
.w.ring-p{color:var(--p);background:var(--p-bg)}
.w.conj{background:var(--j);color:#fff;border-radius:999px;padding:3px 13px;box-shadow:0 3px 0 #3d1590}
.w.glow{background:#ffe27a;box-shadow:0 0 0 3px #ffca33}
.w.noun::after{height:0;border-bottom:4px dotted #0f8f7a}
.w.ghost{border:2px dashed #8b78c6;color:#6e5ca6;font-style:italic;font-weight:700}
.capL{color:var(--red);display:inline-block;font-weight:900}
.slot{display:inline-grid;place-items:center;min-width:1.4em;height:1.6em;border:2px dashed #8b78c6;border-radius:8px;color:#a597d3;font-weight:900;margin-left:2px}
.slot.full{border:0;color:var(--red);font-size:1.25em;min-width:.7em}
.u1-strip .slot.full{margin-left:-11px}
.u1 .btn{color:#fff}.u1 .btn.secondary{color:var(--ink)}
.u1-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.78rem;font-weight:800;color:#4b3a8a}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg::before{content:"";width:22px;height:0}
.lg.subj::before{border-bottom:4px solid var(--s)}
.lg.pred::before{height:5px;border-top:3px solid var(--p);border-bottom:3px solid var(--p)}
.lg.ring::before{width:14px;height:14px;border-radius:50%;border:3px solid var(--ink)}
.lg.conj::before{width:18px;height:12px;border-radius:999px;background:var(--j)}
.lg.noun::before{border-bottom:4px dotted #0f8f7a}
.lg.glow::before{width:16px;height:14px;border-radius:4px;background:#ffe27a;box-shadow:0 0 0 2px #ffca33}

/* sentence jobs (rule 1) */
.u1-jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.job{display:flex;align-items:center;gap:6px;padding:6px 9px;border:2px solid #cfc4ef;border-radius:14px;background:#fff;color:#6e5ca6;transition:opacity .3s,background .3s,border-color .3s}
.job svg{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.job svg .fill{fill:currentColor;stroke:none}
.job b{font-size:.85rem}
.job i{font-style:normal;margin-left:auto;font-weight:900;font-size:1.2rem;color:var(--red)}
.job.on{border-color:var(--ink);background:var(--sun);color:var(--ink)}
.job.off{opacity:.35}

/* cars (compound sentences) */
.car{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px 14px;border:2px solid var(--ink);border-radius:16px;background:#fff;margin-bottom:8px}
.car::before,.car::after{content:"";position:absolute;bottom:-9px;width:16px;height:16px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 4px #fff,0 0 0 2px var(--ink)}
.car::before{left:16px}.car::after{right:16px}
.carno{font-style:normal;position:absolute;top:-11px;left:10px;background:var(--ink);color:#fff;font-size:.7rem;padding:1px 7px;border-radius:999px}
.car.one{background:#fff}
.u1-badge{justify-self:start;font-weight:900;background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:4px 14px}
.u1-cards{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:800;font-size:clamp(1.05rem,2.4vw,1.3rem);transition:gap .4s var(--ease)}
.u1-cards.close{gap:4px}
.scard{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 12px}
.coupler{font-weight:900;font-size:1.4rem;color:#8b78c6}
.mark{color:var(--red);font-weight:900}
.merged .w{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 12px}

/* sentence or not */
.u1-needs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.need{display:flex;flex-direction:column;align-items:center;min-width:104px;padding:8px 12px;border:2px dashed #8b78c6;border-radius:14px;background:#fff}
.need b{font-size:.72rem;letter-spacing:.08em}
.need i{font-style:normal;font-weight:900;font-size:1.25rem}
.need.yes{border:2px solid var(--ok);background:var(--ok-bg);color:var(--ok)}
.need.no{border:2px solid var(--no);background:var(--no-bg);color:var(--no)}
.plus{font-weight:900;font-size:1.3rem}

/* nouns */
.u1-noun{display:grid;gap:14px;justify-items:center}
.ncard{position:relative;display:inline-flex;flex-direction:column;align-items:center;font-weight:900;font-size:clamp(1.3rem,3vw,1.8rem);background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px 22px;box-shadow:3px 4px var(--ink)}
.ncard small{font-size:.7rem;font-weight:800;color:#6145a6;letter-spacing:.06em}
.ncard.stack{box-shadow:3px 4px var(--ink),9px 10px 0 -2px #fff,9px 10px 0 0 var(--ink),15px 16px 0 -2px #fff,15px 16px 0 0 var(--ink)}
.ncard.mini{font-size:.95rem;padding:4px 10px;box-shadow:2px 2px var(--ink);border-radius:10px}
.crown{position:absolute;top:-15px;left:50%;width:30px;transform:translateX(-50%)}
.crown svg{display:block;fill:#ffca33;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.ncard.mini .crown{width:18px;top:-11px}
.u1-bins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.bin{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:64px;padding:10px 12px;border:2px solid var(--ink);border-radius:14px;background:#fff}
.bin>b{font-weight:900}.bin>i{font-style:normal;font-size:.82rem;color:#4b3a8a;flex-basis:100%;margin-top:-6px}
.bin.p1,.bin.p2,.bi4-bins .bin.p{background:#fff1f0}.bin.c1,.bin.c2,.bi4-bins .bin.c{background:#effaf3}
.bin.got{box-shadow:0 0 0 4px var(--sun)}

/* plurals */
.u1-plural{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lts{display:inline-flex;gap:3px;font-weight:900;font-size:clamp(1.6rem,4vw,2.3rem)}
.lt{display:inline-grid;place-items:center;min-width:1.15em;padding:2px 4px;border-radius:8px;background:#fff;border:2px solid #cfc4ef;transition:background .25s}
.lt.hot{background:#ffe27a;border-color:var(--ink)}
.lt.tap{cursor:pointer}.lt.tap:hover{background:#fff4c7;border-color:var(--ink)}.lt.tap.wrong{background:var(--no-bg);border-color:var(--no)}
.u1-morph{font-weight:900}
.u1-morph del{text-decoration:line-through 3px var(--no);color:var(--no)}
.u1-morph ins{text-decoration:none;color:var(--ok);background:var(--ok-bg);border-radius:6px;padding:0 2px}
.rchip{font-weight:900;font-size:.95rem;background:var(--ink);color:#fff;border-radius:999px;padding:4px 12px;white-space:nowrap}
.u1-ctx{margin:0;font-size:1.05rem;font-weight:700}
.u1-ctx small{color:#6145a6}
.blank{display:inline-block;min-width:4.5em;text-align:center;border-bottom:3px solid var(--ink);font-weight:900;color:#8b78c6}
.blank.other{min-width:2.5em;color:#bbb;border-bottom-style:dashed}
.blank.filled{color:var(--ok);background:var(--ok-bg);border-radius:6px 6px 0 0}
.u1-pair{display:flex;flex-wrap:wrap;gap:12px}
.u1-pairw{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:clamp(1.3rem,3vw,1.8rem);background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 14px}

/* asking */
.u1-ask{display:grid;gap:10px}
.u1-q{margin:0;font-weight:900;font-size:1.12rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.u1-q:focus{outline:none}
.u1-dots{display:inline-flex;gap:4px}
.u1-dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.u1-dots i.d{background:var(--ok);border-color:var(--ok)}.u1-dots i.c{background:var(--sun)}
.u1-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.u1-opt{text-align:left;border:2px solid var(--ink);border-radius:14px;padding:11px 14px;background:#f4efff;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s}
.u1-opt small{display:block;font-weight:700;color:#5c4488;font-size:.8rem}
.u1-opt:hover{background:#e8dfff;transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.u1-opt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.u1-opt.wrong{background:var(--no-bg);border-color:var(--no);box-shadow:0 3px 0 var(--no);cursor:default}
.u1-mk{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#fff;border:2px solid var(--ink);color:var(--red);margin-right:4px}
.u1-tapnote{margin:0;font-weight:800;color:#6145a6}
.u1-tiprow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.u1-tipbtn{border:1.5px solid #c9a227;background:#fff6d6;color:#6b4e00;border-radius:999px;padding:5px 12px;font-weight:800;cursor:pointer}
.u1-tip{font-weight:700;color:#4b3a8a}
.u1-msg{margin:0;min-height:1.4em;font-weight:900}
.u1-msg.yes{color:var(--ok)}.u1-msg.no{color:var(--no)}
.u1-trail{display:flex;flex-wrap:wrap;gap:6px}
.u1-trail span{font-size:.78rem;font-weight:800;background:var(--ok-bg);color:#14532d;border-radius:8px;padding:3px 8px}
.u1-why{background:var(--ok-bg);border:2px solid var(--ok);border-radius:14px;padding:12px 14px;font-weight:700;color:#14532d}
.u1-why:focus{outline:none}
.u1-next{display:flex;flex-wrap:wrap;gap:10px}

/* quest */
.u1-quest p{margin:0}
.u1-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.u1-level{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 8px;border-radius:16px;border:2px solid var(--ink);background:#6a2be2;color:#fff;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.u1 .u1-level{color:#fff}
.u1-level span{font-size:1.7rem}.u1-level b{font-size:1.05rem}.u1-level small{font-size:.75rem;font-weight:800}
.u1-level:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink)}
.u1-level:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.u1 .u1-level.locked{background:#eceef4;color:#6b7280;border-color:#c9cdd8;box-shadow:0 3px 0 #c9cdd8;cursor:not-allowed;transform:none}
.u1-note{color:#4b3a8a;font-weight:700}
.u1-reset{justify-self:start;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-weight:800;color:#5c4488;cursor:pointer;padding:4px 0}
.u1-playtop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.u1-kicker{font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#6145a6}
.u1-time{display:flex;align-items:center;gap:8px;font-weight:900;font-variant-numeric:tabular-nums}
.u1-clock{width:56px;height:56px;flex:none}
.u1-clock circle{fill:#fff;stroke:var(--ink);stroke-width:3}
.u1-clock path{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.u1-clock .mh{stroke-width:3}.u1-clock .hh{stroke-width:4}.u1-clock .sh{stroke:var(--red);stroke-width:1.6}
.u1-clock .fill{fill:var(--ink);stroke:none}
.u1-track{display:flex;align-items:center;gap:8px}
.u1-track span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-weight:900;font-size:.85rem}
.u1-track span.d{background:var(--ok-bg)}.u1-track span.c{background:var(--sun);transform:scale(1.12)}
.u1-track .u1-score{width:auto;border-radius:999px;padding:0 10px;margin-left:auto;background:#fff6d6;border-color:#c9a227}
.u1-result{display:grid;gap:10px;text-align:center;justify-items:center;padding:14px;border-radius:16px;background:#f4efff}
.u1-result.pass{background:var(--ok-bg)}
.u1-stars{font-size:2.2rem;letter-spacing:4px;color:#d1d5db}
.u1-stars i{font-style:normal;display:inline-block}.u1-stars i.on{color:#f5b301;text-shadow:0 2px 0 var(--ink)}
.u1-recap{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:.88rem;font-weight:700;text-align:left}
.u1-recap li.ok{color:var(--ok)}
.u1-burst{position:fixed;width:0;height:0;pointer-events:none;z-index:50}
.u1-burst i{position:absolute;width:9px;height:9px;border-radius:2px;animation:u1-fly .9s var(--ease,cubic-bezier(.16,1,.3,1)) forwards}

/* motion: every animation explains a change of state */
@media (prefers-reduced-motion:no-preference){
  .w.new.subj::after,.w.new.pred::after,.w.new.noun::after{animation:u1-draw .5s var(--ease) both}
  .w.new.ring,.w.new.glow,.w.new.conj,.job.new,.rchip.new,.u1-badge.new,.need.new{animation:u1-pop .45s var(--ease) both}
  .w.ghost.new{animation:u1-slide .5s var(--ease) both}
  .slot.stamp{animation:u1-stamp .45s var(--ease) both}
  .capL.flip{animation:u1-flip .55s var(--ease) both}
  .car.roll{animation:u1-roll .55s var(--ease) both}.car.roll2{animation:u1-roll2 .55s var(--ease) both}
  .mark.morph{animation:u1-pop .5s var(--ease) both}
  .ncard.new{animation:u1-pop .45s var(--ease) both}
  .ncard.drop{animation:u1-drop .6s var(--ease) both}
  .lt.hot.new{animation:u1-pop .4s var(--ease) both}
  .u1-morph.live del{display:inline-block;animation:u1-gone .5s .15s var(--ease) both}
  .u1-morph.live ins{display:inline-block;animation:u1-in .45s .55s var(--ease) both}
  .blank.filled.new{animation:u1-pop .45s .3s var(--ease) both}
  .merged.new{animation:u1-pop .5s var(--ease) both}
  .need.pulse{animation:u1-pulse 1.4s ease-in-out 2}
  .shake{animation:u1-shake .35s ease-in-out}
  .u1-result .u1-stars i.on{animation:u1-pop .45s calc(var(--d)*.12s + .2s) var(--ease) both}
  .gear{display:inline-block}
  .bi.play .bi1-row{animation:u1-in .5s calc(var(--d)*.55s) var(--ease) both}
  .bi.play .bi1-row .slot{animation:u1-stamp .45s calc(var(--d)*.55s + .35s) var(--ease) both}
  .bi.play .bi2-part.s{animation:u1-lift .7s .2s var(--ease) both}
  .bi.play .bi2-part.p{animation:u1-drop2 .7s .6s var(--ease) both}
  .bi.play .bi2-part em{animation:u1-in .4s 1.1s var(--ease) both}
  .bi.play .bi2-part .ring{animation:u1-ringin .5s 1.5s var(--ease) both}
  .bi.play .bi3-train .car.a{animation:u1-roll .8s .1s var(--ease) both}
  .bi.play .bi3-train .car.b{animation:u1-roll2 .8s .3s var(--ease) both}
  .bi.play .bi3-train .conj{animation:u1-dropin .5s 1.1s var(--ease) both}
  .bi.play .bi3-train .mark{animation:u1-hide .01s 1.1s both}
  .bi.play .bi3-train .mark2,.bi.play .bi3-train .low{display:inline;animation:u1-pop .4s 1.15s var(--ease) both}
  .bi.play .bi3-train .up{animation:u1-hide .01s 1.15s both}
  .bi.play .bi3-fan span{animation:u1-in .35s calc(1.6s + var(--d)*.08s) var(--ease) both}
  .bi.play .bi4-bins .ncard{animation:u1-drop .55s calc(var(--d)*.28s + .2s) var(--ease) both}
  .bi.play .bi5-row{animation:u1-in .45s calc(var(--d)*.32s) var(--ease) both}
  .bi.play .bi5-row .gear{animation:u1-spin .8s calc(var(--d)*.32s + .2s) var(--ease) both}
  .bi.play .bi5-row del{display:inline-block;animation:u1-gone .45s calc(var(--d)*.32s + .5s) var(--ease) both}
  .bi.play .bi5-row ins{display:inline-block;animation:u1-in .45s calc(var(--d)*.32s + .75s) var(--ease) both}
}
@media (prefers-reduced-motion:reduce){
  .u1 *{transition:none!important}
  .bi3-train .mark,.bi3-train .up{display:none}.bi3-train .mark2,.bi3-train .low{display:inline}
}
@keyframes u1-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes u1-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes u1-slide{from{transform:translateX(-20px);opacity:0}to{transform:none;opacity:1}}
@keyframes u1-stamp{0%{transform:scale(2.6) rotate(-18deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:none}}
@keyframes u1-flip{0%{transform:rotateX(90deg) scale(1.4)}100%{transform:none}}
@keyframes u1-roll{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes u1-roll2{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes u1-drop{0%{transform:translateY(-60px) rotate(-6deg);opacity:0}70%{transform:translateY(4px) rotate(1deg);opacity:1}100%{transform:none}}
@keyframes u1-dropin{0%{transform:translateY(-36px);opacity:0}100%{transform:none;opacity:1}}
@keyframes u1-drop2{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes u1-lift{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes u1-ringin{from{box-shadow:0 0 0 12px transparent}to{box-shadow:0 0 0 3px currentColor}}
@keyframes u1-gone{0%{opacity:1}55%{opacity:.7;transform:translateY(-4px)}100%{opacity:0;font-size:0;transform:translateY(-10px)}}
@keyframes u1-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes u1-hide{to{opacity:0;font-size:0;margin:0;padding:0}}
@keyframes u1-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes u1-pulse{50%{box-shadow:0 0 0 6px rgba(180,35,24,.25)}}
@keyframes u1-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes u1-fly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(200deg) scale(.6);opacity:0}}

@media(max-width:900px){.u1-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.u1-levels{grid-template-columns:repeat(3,minmax(0,1fr))}.u1-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .chapter .body:has(> #u1-host){padding:0 8px 16px}
  .u1-lesson{border:0;box-shadow:none;background:transparent;padding:4px 0}
  .u1-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px}
  .u1-tab{flex:0 0 72%;scroll-snap-align:start}
  .u1-bigwrap,.u1-card,.u1-quest{padding:12px;border-radius:18px}
  .u1-replay{position:static;margin-top:10px}
  .u1-opts{grid-template-columns:1fr}.u1-opts.two{grid-template-columns:1fr 1fr}
  .u1-board{padding:12px}
  .bi5-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}.bi5-row .gear{display:none}.bi5-row .rchip{grid-column:1/-1;justify-self:start}
  .bi4-bins{grid-template-columns:1fr}
  .u1-playtop{flex-direction:column}
  .u1-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .need{min-width:84px}
}