
.v16-root .crs{
  --cr-card:#fff;
  --cr-tint:#f4f6f8;
  --cr-ink:#192d40;
  --cr-ink-deep:#19364a;
  --cr-soft:#4f6475;
  --cr-muted:#587283;
  --cr-line:#dbe2e7;
  --cr-rule:#e4eaee;
  --cr-night:#19344c;
  --cr-cream:#fdf7ea;
  --cr-warm:#f19b47;
  --cr-warm-line:#eb9441;
  --cr-warm-ink:#18364b;
  --cr-warm-hover:#f5aa63;
  --cr-on-edge:#41657f;
  --cr-good:#007a52;
  --cr-chev:#8aa0b0;
  --cr-thumb:#c4d1dd;
  --cr-press:#eef2f5;
  --cr-cur:#fff7ee;
  --cr-tag:#a4570f;
  --cr-link-line:#9bb2c3;
  --cr-sec-hover:#e8eef2;
  --cr-sec-hover-line:#b8cbd8;
  --cr-ease-out:cubic-bezier(.23,1,.32,1);
  color:var(--cr-ink);font-family:"Inter",system-ui,sans-serif;font-size:15px;line-height:1.5}
.v16-root .crs a,.v16-root .crs button{touch-action:manipulation}
.v16-root .crs img{display:block}
.v16-root .crs .cr-tnum{font-variant-numeric:tabular-nums}
.v16-root .crs .cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v16-root .crs svg.cr-i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ------------------------------------------------------------ buttons */
.v16-root .crs .cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:transform 160ms var(--cr-ease-out),background-color 150ms ease,border-color 150ms ease}
/* the press gives at once, unless the student asked for less motion */
@media (prefers-reduced-motion:no-preference){.v16-root .crs .cr-btn:active{transform:scale(.97)}}
.v16-root .crs .cr-btn:focus-visible{outline:2px solid var(--cr-on-edge);outline-offset:2px}
.v16-root .crs .cr-btn.cr-sm{min-height:36px;padding:0 14px;font-size:13px}
.v16-root .crs .cr-btn.cr-primary{background:var(--cr-warm);border-color:var(--cr-warm-line);color:var(--cr-warm-ink)}
.v16-root .crs .cr-btn.cr-sec{background:var(--cr-tint);border-color:var(--cr-line);color:var(--cr-ink-deep)}
@media (hover:hover) and (pointer:fine){
  .v16-root .crs .cr-btn.cr-primary:hover{background:var(--cr-warm-hover)}
  .v16-root .crs .cr-btn.cr-sec:hover{background:var(--cr-sec-hover);border-color:var(--cr-sec-hover-line)}
}

/* ------------------------------------------------------- page grammar */
.v16-root .crs .cr-hd{margin:0 0 24px}
.v16-root .crs .cr-kick{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--cr-soft)}
.v16-root .crs .cr-hd h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.035em;line-height:1.15;text-wrap:balance;color:var(--cr-ink)}
.v16-root .crs .cr-sub{margin:8px 0 0;color:var(--cr-soft);font-size:15px;font-weight:400;max-width:60ch}
.v16-root .crs .cr-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:6px 0;color:var(--cr-soft);font-size:14px;font-weight:500;text-decoration:none;background:none;border:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){.v16-root .crs .cr-back:hover{color:var(--cr-ink)}}
.v16-root .crs .cr-back:active{color:var(--cr-ink)}
.v16-root .crs .cr-back:focus-visible{outline:2px solid var(--cr-on-edge);outline-offset:2px;border-radius:4px}
.v16-root .crs .cr-card{background:var(--cr-card);border:1px solid var(--cr-line);border-radius:16px}
.v16-root .crs .cr-sech{margin:28px 0 10px;font-size:13px;font-weight:600;line-height:1.5;letter-spacing:0;color:var(--cr-soft)}
.v16-root .crs .cr-thumb{width:56px;height:40px;border-radius:9px;object-fit:cover;background:var(--cr-thumb);flex:none}
.v16-root .crs .cr-glyph{width:36px;height:36px;border-radius:10px;background:var(--cr-night);color:var(--cr-cream);display:grid;place-items:center;flex:none}
.v16-root .crs .cr-glyph svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v16-root .crs .cr-chev{margin-left:auto;color:var(--cr-chev);display:flex;flex:none}
.v16-root .crs .cr-chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v16-root .crs .cr-note{margin:12px 0 0;font-size:13px;color:var(--cr-soft)}

/* --------------------------- a list row: the one pressable shape the rooms use */
.v16-root .crs .cr-row{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:10px 16px;border:0;border-top:1px solid var(--cr-rule);background:transparent;
  text-align:left;text-decoration:none;color:var(--cr-ink);cursor:pointer;font:inherit;transition:background-color 150ms ease}
.v16-root .crs .cr-row:first-child{border-top:0}
.v16-root .crs .cr-row:focus-visible{outline:2px solid var(--cr-on-edge);outline-offset:-2px;border-radius:12px}
@media (hover:hover) and (pointer:fine){.v16-root .crs .cr-row:hover{background:var(--cr-tint)}}
.v16-root .crs .cr-row:active{background:var(--cr-press)}
.v16-root .crs .cr-row .cr-tx{min-width:0;flex:1}
.v16-root .crs .cr-row .cr-tt{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.v16-root .crs .cr-row .cr-ss{display:block;font-size:13px;color:var(--cr-soft);margin-top:1px}
.v16-root .crs .cr-row .cr-rt{font-size:13px;color:var(--cr-soft);white-space:nowrap}
.v16-root .crs .cr-row.cr-soon{cursor:default}
.v16-root .crs .cr-row.cr-soon .cr-thumb{filter:grayscale(1);opacity:.55}
.v16-root .crs .cr-row.cr-soon .cr-tt{color:var(--cr-soft)}
@media (hover:hover) and (pointer:fine){.v16-root .crs .cr-row.cr-soon:hover{background:transparent}}
.v16-root .crs .cr-row.cr-soon:active{background:transparent}
.v16-root .crs .cr-pl{font-size:13px;font-weight:500;color:var(--cr-ink-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cr-link-line);white-space:nowrap}
.v16-root .crs .cr-pl:active{color:var(--cr-ink)}
.v16-root .crs .cr-pl:focus-visible{outline:2px solid var(--cr-on-edge);outline-offset:2px;border-radius:4px}

/* -------------------------------------------------------- lesson rows */
.v16-root .crs .cr-mod{padding:14px 16px 4px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--cr-muted)}
.v16-root .crs .cr-ls{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 16px;border:0;background:transparent;text-align:left;text-decoration:none;font:inherit;color:var(--cr-ink);cursor:pointer;transition:background-color 150ms ease}
.v16-root .crs .cr-ls:focus-visible{outline:2px solid var(--cr-on-edge);outline-offset:-2px;border-radius:10px}
@media (hover:hover) and (pointer:fine){.v16-root .crs .cr-ls:hover{background:var(--cr-tint)}}
.v16-root .crs .cr-ls:active{background:var(--cr-press)}
.v16-root .crs .cr-ls .cr-n{width:24px;height:24px;border-radius:50%;border:1px solid var(--cr-line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--cr-soft);flex:none;margin-top:1px}
.v16-root .crs .cr-ls .cr-n svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v16-root .crs .cr-ls[data-st=done] .cr-n{background:var(--cr-good);border-color:var(--cr-good);color:#fff}
.v16-root .crs .cr-ls[data-st=cur]{background:var(--cr-cur)}
.v16-root .crs .cr-ls[data-st=cur] .cr-n{background:var(--cr-warm);border-color:var(--cr-warm-line);color:var(--cr-warm-ink)}
.v16-root .crs .cr-ls .cr-tx{min-width:0;flex:1}
.v16-root .crs .cr-ls .cr-tt{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.v16-root .crs .cr-ls .cr-oo{display:block;font-size:13px;color:var(--cr-soft);margin-top:1px}
.v16-root .crs .cr-ls .cr-tag{font-size:12px;font-weight:600;color:var(--cr-tag);white-space:nowrap;margin-top:3px}
.v16-root .crs .cr-lsl{padding:4px 0 10px}

/* ------------------------------------------------ the checkpoint row */
.v16-root .crs .cr-arow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--cr-rule)}
.v16-root .crs .cr-arow:first-child{border-top:0}
.v16-root .crs .cr-arow .cr-ico{width:36px;height:36px;border-radius:10px;background:var(--cr-tint);border:1px solid var(--cr-line);display:grid;place-items:center;color:var(--cr-ink-deep);flex:none}
.v16-root .crs .cr-arow .cr-tx{flex:1;min-width:0}
.v16-root .crs .cr-arow .cr-tt{display:block;font-size:15px;font-weight:600}
.v16-root .crs .cr-arow .cr-ss{display:block;font-size:13px;color:var(--cr-soft);margin-top:2px}
.v16-root .crs .cr-nx{border-top:1px solid var(--cr-rule)}

/* ------------------- the placement offer: a line under the main action, never a card */
.v16-root .crs .cr-place{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:0;margin-top:12px;font-size:14px;color:var(--cr-soft)}
.v16-root .crs .cr-place a{background:none;border:0;padding:6px 0;font:inherit;font-weight:600;color:var(--cr-ink-deep);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.v16-root .crs .cr-place a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform 160ms var(--cr-ease-out)}
@media (hover:hover) and (pointer:fine){.v16-root .crs .cr-place a:hover svg{transform:translateX(2px)}}
.v16-root .crs .cr-place a:active{color:var(--cr-ink)}
.v16-root .crs .cr-place a:focus-visible{outline:2px solid var(--cr-on-edge);outline-offset:2px;border-radius:4px}

/* --------------------------------------------------- Syllabus blocks */
.v16-root .crs .cr-cont{display:flex;align-items:center;gap:18px;padding:18px 20px}
.v16-root .crs .cr-cont img{width:96px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--cr-thumb)}
.v16-root .crs .cr-cont .cr-tx{flex:1;min-width:0}
.v16-root .crs .cr-cont .cr-k{font-size:13px;color:var(--cr-soft)}
.v16-root .crs .cr-cont .cr-t{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:2px 0 0}
.v16-root .crs .cr-cont .cr-s{font-size:14px;color:var(--cr-soft);margin-top:2px}
.v16-root .crs .cr-chhd{display:flex;align-items:flex-end;gap:24px;margin:0 0 22px}
.v16-root .crs .cr-chhd .cr-hd{margin:0;flex:1;min-width:0}
.v16-root .crs .cr-chhd .cr-act{flex:none;text-align:right}
.v16-root .crs .cr-chhd .cr-act .cr-place{justify-content:flex-end}
.v16-root .crs .cr-foot{margin-top:16px}

/* ------------------------------------------- arrival: one short stagger, once */
.v16-root .crs .cr-rv{animation:cr-rv 260ms var(--cr-ease-out) both}
.v16-root .crs .cr-rv.cr-i1{animation-delay:45ms}
.v16-root .crs .cr-rv.cr-i2{animation-delay:90ms}
@keyframes cr-rv{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cr-fade{from{opacity:0}to{opacity:1}}

/* -------------------------------------------- the phone, at the shell's 920px */
@media (max-width:920px){
  .v16-root .crs .cr-hd h1{font-size:26px}
  .v16-root .crs .cr-cont{flex-wrap:wrap;gap:12px 14px;padding:16px}
  .v16-root .crs .cr-cont img{width:64px;height:44px;border-radius:10px}
  .v16-root .crs .cr-cont .cr-t{font-size:17px}
  .v16-root .crs .cr-cont .cr-btn{width:100%}
  .v16-root .crs .cr-chhd{display:block}
  .v16-root .crs .cr-chhd .cr-act{margin-top:16px;text-align:left}
  .v16-root .crs .cr-chhd .cr-act .cr-btn{width:100%}
  .v16-root .crs .cr-place,.v16-root .crs .cr-chhd .cr-act .cr-place{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .v16-root .crs .cr-rv{animation-name:cr-fade}
  .v16-root .crs .cr-place a svg{transition:none}
}
