/*
 * The course's layout. Every color, font and button is the site's
 * (/site.css, lifted from the app's global.css) — nothing here invents
 * a token, so the course and the tool inside it read as one product in
 * both themes. This file is spacing, sizes and the few course-only
 * shapes (a step list, a quiz choice, the lesson frame).
 *
 * Sized for a small laptop first: 1366 x 768 with the browser's own bars
 * taking ~110px. Every reading screen fits without scrolling at that
 * size; anything longer was cut.
 */
:root{
  --ln-bar:48px;
  --ln-foot:54px;
  /* Type follows the screen. On a small laptop it is about what it was;
     on a wide monitor the letters grow and the column widens with them,
     up to a ceiling, so nobody reaches for Cmd-plus and the page is never
     a narrow strip in a field of blank. The column is a count of
     characters, not pixels, so it scales with the type. */
  /* 1366px laptop -> 17px, 1920 -> 20px, 2560 and up -> 21px (the cap). */
  --ln-fs:clamp(16px, 0.55vw + 9.5px, 21px);
  /* 72 characters of text plus the column's own 20px gutters (border-box),
     never wider than the screen. ch resolves where the var is USED, so it
     follows .ln_col's font-size, not the root's. */
  --ln-col:min(calc(72ch + 40px), 100%);
  --ln-col-wide:min(calc(96ch + 40px), 100%);
  --ln-line:var(--primary-lighter-alt);
  --ln-panel:var(--card);
  --ln-dim:var(--secondary-lighter);
  /* Body copy is INK, not the app's label gray: a course is read, a label
     is glanced at. 88% of the heading ink, the rest the page behind it, in
     both themes (--page is the site's, per theme). */
  --ln-ink:color-mix(in srgb,var(--ink-strong) 88%,var(--page));
  --ln-faint:var(--secondary-light-alt);
  --ln-green:var(--accent-sea-green);
  --ln-blue:var(--accent-blue);
  --ln-gold:var(--accent-gold);
  --ln-red:var(--accent-maroon);
  /* Words on a photo. The photo has a dark veil in BOTH themes, so this
     is the app's --on-accent idea: white because it sits on something
     dark, not because the theme is dark. */
  --ln-on-photo:#fff;
  --ln-on-photo-dim:rgba(255,255,255,.86);
  --ln-on-photo-faint:rgba(255,255,255,.6);
}
:root[data-theme="light"]{ --ln-line:var(--primary-dark-alt); }
/* The drawings (content/diagrams.js). The one place the course needs
   colors the site doesn't have: a solid surface for a drawn object (a
   light, a clamp, a console) a step off the panel, and, on the light
   page, deeper shades of the accents for WORDS, because the accents
   themselves are too pale to read as text on a pale panel. */
:root{
  --dg-metal:#30362f;--dg-metal-dark:#191c18;
  --dg-green-ink:var(--accent-sea-green);--dg-blue-ink:var(--accent-blue);
  --dg-gold-ink:var(--accent-gold);--dg-red-ink:#ec6a8d;
}
:root[data-theme="light"]{
  --dg-metal:#d3ddd8;--dg-metal-dark:#aebcb5;
  --dg-green-ink:#0b7a52;--dg-blue-ink:#1d63b3;--dg-gold-ink:#7a5a00;--dg-red-ink:#b0284f;
}

*{box-sizing:border-box}
html,body.learn{height:100%}
body.learn{margin:0;overflow:hidden;font:400 16px/1.6 roboto-regular,sans-serif}
button{font-family:roboto-medium,roboto-regular,sans-serif}
a{text-decoration:none}
a:hover{text-decoration:underline}
.ln_hidden{display:none !important}

/* ---- before the script runs ---- */
.ln_boot{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ln_boot_note{margin:90px 0 0;color:var(--ln-faint);font:400 14px/1.5 roboto-regular,sans-serif}

/* ---- the frame: bar / body / foot ---- */
/* The bar's row grows when a narrow window wraps it (it was clipped at a fixed height). */
.ln_root{display:grid;grid-template-rows:minmax(var(--ln-bar),auto) minmax(0,1fr) auto;height:100vh;height:100dvh}
.ln_bar{display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--ln-line);
  background:var(--primary-light);min-width:0}
.ln_brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink-strong)}
.ln_brand a{color:inherit;font:300 15px/1.2 roboto-regular,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.ln_brand a:hover{text-decoration:none;color:var(--ln-green)}
/* "LIMELIGHT | LEARN": Learn is the second half of the name, set in the
   same type as LIMELIGHT, in the course's green, after a hairline
   (owner, 2026-10-05: the boxed LEARN chip "doesn't look thematically
   right"). BETA rides after it as the small superscript tag (site.css). */
.ln_brand_chip{display:flex;align-items:center;gap:10px;color:var(--ln-green);
  font:400 15px/1.2 roboto-regular,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.ln_brand a.ln_brand_chip{color:var(--ln-green);font-weight:400}
.ln_brand a.ln_brand_chip:hover{color:var(--ink-strong)}
.ln_brand_chip::before{content:"";width:1px;height:15px;background:var(--secondary-light)}
.ln_bar_title{flex:1 1 auto;min-width:0;text-align:center;color:var(--ln-dim);font:500 13.5px/1.3 roboto-medium,sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln_bar_title strong{color:var(--ink-strong);font-weight:600}
.ln_bar_right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ln_bar .ll-btn{min-height:32px;padding:0 12px;font-size:12px}

.ln_body{overflow:auto;min-height:0;position:relative}
.ln_body.is-lab{overflow:hidden;display:flex;flex-direction:column}

.ln_foot{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:var(--ln-foot);
  border-top:1px solid var(--ln-line);background:var(--primary-light)}
.ln_foot_mid{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;flex-wrap:wrap}
.ln_dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--ln-faint);background:transparent;padding:0;cursor:pointer}
.ln_dot.is-done{background:var(--ln-green);border-color:var(--ln-green)}
.ln_dot.is-now{border-color:var(--ink-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-strong) 25%,transparent)}
.ln_dot.is-lab{border-radius:2px}
.ln_foot .ll-btn{min-height:36px}
.ln_foot_note{color:var(--ln-faint);font:500 12px/1.4 roboto-regular,sans-serif}

/* ---- reading column ---- */
.ln_col{max-width:var(--ln-col);margin:0 auto;padding:22px 20px 30px;font-size:var(--ln-fs)} /* ch resolves against this size */
.ln_col.is-wide{max-width:var(--ln-col-wide)}
.ln_kicker{margin:0 0 4px;color:var(--ln-green);font:700 calc(var(--ln-fs) * 0.66)/1.3 roboto-medium,sans-serif;letter-spacing:.14em;text-transform:uppercase}
/* Headings scale with the body so a 21px page does not get a 22px h2. */
h1.ln_h1{margin:0 0 8px;font:700 calc(var(--ln-fs) * 1.75)/1.15 roboto-bold,roboto-medium,sans-serif;letter-spacing:-.01em;color:var(--ink-strong)}
h2.ln_h2{margin:0 0 10px;font:700 calc(var(--ln-fs) * 1.3)/1.2 roboto-bold,roboto-medium,sans-serif;color:var(--ink-strong)}
h3.ln_h3{margin:18px 0 6px;font:700 var(--ln-fs)/1.3 roboto-medium,sans-serif;color:var(--ink-strong)}
.ln_lede{margin:0 0 18px;color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.ln_p{margin:0 0 14px;color:var(--ln-ink);font:400 var(--ln-fs)/1.6 roboto-regular,sans-serif;overflow-wrap:anywhere}
/* Bold is weight only. When strong was also the brightest thing on a gray page, the page read as gray with shouting. */
.ln_col strong,.ln_termcard strong,.ln_lab_intro strong{color:inherit;font-family:roboto-medium,sans-serif;font-weight:600}
.ln_root code{font:500 .88em/1 'Atkinson Hyperlegible Mono',ui-monospace,monospace;
  padding:.1em .35em;border-radius:4px;background:var(--secondary-dark);color:var(--ink-strong);white-space:nowrap}
/* A key on the keyboard (⟦J⟧ in the content): a key cap, never bare brackets. */
.ln_root kbd.ln_kbd{display:inline-block;min-width:1.5em;padding:.05em .4em;margin:0 .05em;text-align:center;
  font:500 .85em/1.45 'Atkinson Hyperlegible Mono',ui-monospace,monospace;color:var(--ink-strong);background:var(--secondary-dark);
  border:1px solid var(--ln-faint);border-bottom-width:2px;border-radius:4px;white-space:nowrap;vertical-align:.05em}
.ln_paper kbd.ln_kbd{background:transparent;border-color:#999}
.ln_ul{margin:0 0 12px;padding-left:22px;color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.ln_ul li{margin-bottom:5px}
.ln_ol{margin:0 0 12px;padding-left:24px;color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.ln_ol li{margin-bottom:6px}
/* A glossary word is a WORD: inline, whatever its parent's spans do (the big-statement
   line and the unit header style their own child spans as blocks). */
/* A glossary word reads as a word, not a link (owner: "the blue text needs a
   huge fix"): same ink as the sentence, a faint dotted underline as the only
   hint, and the hover card is where the help lives. Blue only while hovered. */
.ln_term{display:inline;color:inherit;border-bottom:1.5px dotted color-mix(in srgb,var(--ln-dim) 80%,transparent);cursor:help;border-radius:2px}
.ln_choice_t{flex:1 1 auto;min-width:0}
.ln_term:hover,.ln_term:focus-visible{color:var(--ln-blue);background:color-mix(in srgb,var(--ln-blue) 12%,transparent);outline:none;border-bottom:1px solid var(--ln-blue)}
.ln_termcard{position:fixed;z-index:9999;max-width:min(360px,calc(100vw - 24px));padding:10px 13px;border-radius:9px;background:var(--ln-panel);
  color:var(--ln-ink);border:1px solid var(--ln-blue);box-shadow:0 8px 28px rgba(0,0,0,.35);
  font:400 max(14px,calc(var(--ln-fs) * 0.82))/1.5 roboto-regular,sans-serif;pointer-events:none}
.ln_termcard[hidden]{display:none}
.ln_termcard b{display:block;color:var(--ln-blue);font:700 12px/1.3 roboto-medium,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}

/* two things side by side on a wide screen, stacked on a narrow one */
.ln_two{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:start;margin-bottom:12px}
@media (max-width:760px){.ln_two{grid-template-columns:1fr}}

/* pictures and diagrams */
.ln_fig{margin:0 0 14px;border:1px solid var(--ln-line);border-radius:10px;overflow:hidden;background:var(--ln-panel)}
/* Pictures give way on a short screen (a 768-tall laptop) so the words under them stay in view. */
.ln_fig img{width:100%;display:block;max-height:min(340px,44vh);object-fit:cover}
.ln_fig.is-photo{border:0;background:transparent}
.ln_fig.is-photo .ln_pic{border-radius:10px;overflow:hidden;border:1px solid var(--ln-line)}
.ln_fig.is-tall img{max-height:min(440px,58vh)}
/* A drawing is never cropped: the height cap shrinks it whole (the gel diagram lost its top and bottom). */
.ln_fig:not(.is-photo) img{object-fit:contain}
.ln_fig figcaption{padding:8px 12px;color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif;border-top:1px solid var(--ln-line)}
.ln_fig figcaption b{font-family:roboto-medium,sans-serif;font-weight:600}
.ln_fig figcaption a{color:var(--ln-dim);text-decoration:underline}
.ln_diagram{margin:0 0 14px;border:1px solid var(--ln-line);border-radius:10px;overflow:hidden;background:var(--ln-panel);padding:10px}
/* Every diagram has a viewBox, so a height cap letterboxes it (smaller, centered) instead of squashing it. */
.ln_diagram svg{width:100%;height:auto;max-height:38vh;display:block;font-family:roboto-regular,sans-serif}
.ln_diagram figcaption{padding:6px 4px 0;color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}

/* callouts (safety red, tip blue, term green, teacher gold): /learn/callout.css, shared with the sound board's practice screens */

/* term lists (word — meaning) */
.ln_terms{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px}
.ln_terms li{padding:9px 12px;border:1px solid var(--ln-line);border-radius:8px;background:var(--ln-panel);
  color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}
.ln_terms b{color:var(--ink-strong);font:600 var(--ln-fs)/1.5 roboto-medium,sans-serif;margin-right:6px}
.ln_terms.is-two{grid-template-columns:1fr 1fr}
@media (max-width:700px){.ln_terms.is-two{grid-template-columns:1fr}}

/* tables */
.ln_table{width:100%;border-collapse:collapse;margin:0 0 14px;font:400 var(--ln-fs)/1.45 roboto-regular,sans-serif;color:var(--ln-ink)}
.ln_table th{text-align:left;padding:7px 10px;border-bottom:1px solid var(--ln-line);color:var(--ink-strong);
  font:700 11px/1.3 roboto-medium,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ln_table td{padding:7px 10px;border-bottom:1px solid var(--ln-line);vertical-align:top;text-wrap:balance}
.ln_table td:first-child{color:var(--ink-strong);font-family:roboto-medium,sans-serif}
.ln_swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;border:1px solid var(--secondary-light)}

/* ---- home / lists ---- */
.ln_hero{padding:36px 0 18px;text-align:center}
.ln_hero h1{margin:0 0 10px;font:700 38px/1.1 roboto-bold,roboto-medium,sans-serif;letter-spacing:-.02em;color:var(--ink-strong)}
.ln_hero p{margin:0 auto 18px;max-width:min(64ch,100%);color:var(--ln-ink);font:400 calc(var(--ln-fs) * 1.06)/1.6 roboto-regular,sans-serif}
.ln_cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ln_grid{display:grid;gap:12px;grid-template-columns:repeat(var(--cols-wide,3),1fr);margin-bottom:18px}
.ln_card{display:block;position:relative;padding:16px 16px 14px;border:1px solid var(--ln-line);border-radius:10px;background:var(--ln-panel);
  color:var(--ln-ink);text-align:left;font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif;cursor:pointer;overflow:hidden}
.ln_card:hover{border-color:var(--secondary-light);text-decoration:none}
.ln_card h3{margin:0 0 4px;font:700 var(--ln-fs)/1.3 roboto-medium,sans-serif;color:var(--ln-green)}
.ln_card p{margin:0}
.ln_card .ln_meta{display:block;margin-top:8px;color:var(--ln-faint);font:500 12px/1.4 roboto-regular,sans-serif;letter-spacing:.04em}
.ln_card.is-on{border-color:var(--ln-green);background:color-mix(in srgb,var(--ln-green) 10%,var(--ln-panel))}
.ln_card.is-on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ln-green)}
button.ln_card{width:100%;font-family:roboto-regular,sans-serif}

.ln_lessons{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:6px}
.ln_lesson{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--ln-line);
  border-radius:8px;background:var(--ln-panel);color:var(--ln-dim);text-decoration:none;font:400 14.5px/1.4 roboto-regular,sans-serif}
.ln_lesson:hover{border-color:var(--secondary-light);text-decoration:none}
.ln_lesson_n{width:30px;height:30px;border-radius:50%;border:1px solid var(--ln-faint);display:flex;align-items:center;justify-content:center;
  color:var(--ln-dim);font:700 12px/1 roboto-medium,sans-serif}
.ln_lesson.is-done .ln_lesson_n{border-color:var(--ln-green);color:var(--ln-green);background:color-mix(in srgb,var(--ln-green) 14%,transparent)}
.ln_lesson_t{color:var(--ink-strong);font:600 15px/1.3 roboto-medium,sans-serif}
.ln_lesson_s{display:block;color:var(--ln-dim);font:400 13.5px/1.4 roboto-regular,sans-serif}
.ln_lesson_m{color:var(--ln-faint);font:500 12px/1.3 roboto-regular,sans-serif;white-space:nowrap}
.ln_unit_h{margin:18px 0 8px;display:flex;align-items:baseline;gap:10px}
.ln_unit_h h2{margin:0;font:700 18px/1.3 roboto-bold,roboto-medium,sans-serif;color:var(--ink-strong)}
.ln_unit_h>span{color:var(--ln-faint);font:500 12px/1.3 roboto-regular,sans-serif;letter-spacing:.06em;text-transform:uppercase}

.ln_row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ln_input{box-sizing:border-box;min-height:38px;padding:0 12px;border-radius:4px;border:1px solid var(--secondary-light);
  background:var(--primary-light);color:var(--ink-strong);font:500 15px/1 roboto-regular,sans-serif;outline:none;min-width:0}
.ln_input:focus{border-color:var(--ln-green)}
.ln_input.is-code{font:600 18px/1 'Atkinson Hyperlegible Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;width:13.5ch;text-align:center}
.ln_err{color:var(--ln-red);font:500 13.5px/1.4 roboto-regular,sans-serif}
.ln_ok{color:var(--ln-green);font:500 13.5px/1.4 roboto-regular,sans-serif}
.ln_muted{color:var(--ln-dim);font:400 max(13.5px,calc(var(--ln-fs) * 0.82))/1.5 roboto-regular,sans-serif}

/* ---- the lab (follow-along) screen ---- */
.ln_lab_strip{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--ln-line);background:var(--primary-light);min-height:56px}
.ln_lab_step{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
.ln_step_n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--ln-faint);display:flex;align-items:center;justify-content:center;
  color:var(--ln-dim);font:700 12px/1 roboto-medium,sans-serif}
.ln_step_n.is-done{border-color:var(--ln-green);color:var(--ln-green);background:color-mix(in srgb,var(--ln-green) 14%,transparent)}
.ln_step{min-width:0;color:var(--ink-strong);font:500 15.5px/1.4 roboto-medium,sans-serif;overflow-wrap:anywhere}
.ln_step small{display:block;color:var(--ln-faint);font:400 12.5px/1.4 roboto-regular,sans-serif}
.ln_lab_btns{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.ln_lab_btns .ll-btn{min-height:34px}
.ln_check{flex:0 0 auto;color:var(--ln-green);font:600 12.5px/1 roboto-medium,sans-serif;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.ln_check.is-on{opacity:1}
.ln_frame_wrap{flex:1 1 auto;min-height:0;position:relative;background:#070a06}
.ln_frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ln_frame_veil{position:absolute;inset:0;z-index:2;background:#070a06;pointer-events:none}
/* The next practice screen's tool, loading out of sight while the student
   reads the screen before it (learn.js warmLab). Full size so it lays out
   and draws like the real thing; see-through, behind the page, unclickable
   and inert, so it never takes a click, a key or the focus. */
.ln_warm{position:fixed;inset:0;z-index:-1;opacity:0;pointer-events:none;overflow:hidden}
/* Gone the moment the tool says it is drawn: no fade, no run to 100%.
   The words and bar are the shared ones (/loading-bar.css). */
.ln_frame_wrap.is-live .ln_frame_veil{display:none}
/* Ordered checks (a stat block with ordered: true): the row, then ONE long arrow under all of it, no words. */
.ln_ordered{margin:18px 0 22px}
.ln_ordered>.ln_stats.is-ordered{margin-top:0;margin-bottom:6px}
.ln_stats.is-ordered{display:flex;align-items:stretch}
.ln_stats.is-ordered>.ln_stat{flex:1 1 0;min-width:0}
.ln_order_arrow{display:flex;align-items:center;height:22px;color:var(--ln-unit,var(--ln-green))}
.ln_order_line{flex:1 1 auto;height:4px;border-radius:2px 0 0 2px;background:currentColor}
.ln_order_head{flex:0 0 auto;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:20px solid currentColor}
.ln_paper .ln_ordered{margin:8px 0 12px}
.ln_paper .ln_order_arrow{color:#000;height:14px}
.ln_paper .ln_order_line{height:2.5px}
.ln_paper .ln_order_head{border-top-width:7px;border-bottom-width:7px;border-left-width:13px}
@media (max-width:560px){.ln_stats.is-ordered{flex-direction:column}.ln_order_arrow{display:none}}
/* A pick that is about to move on: the others step back. */
.ln_ask_row.is-going .ln_choice:not(.is-picked){opacity:.45;transition:opacity .12s}
.ln_lab_intro{padding:10px 20px 0;max-width:var(--ln-col);margin:0 auto;width:100%;font-size:var(--ln-fs)}
.ln_lab_strip>.ll-btn{flex:0 0 auto;min-height:34px}

/* ---- quiz ---- */
.ln_q{margin:0 0 14px;color:var(--ln-ink);font:600 calc(var(--ln-fs) * 1.18)/1.35 roboto-medium,sans-serif}
.ln_choices{display:grid;gap:8px;margin-bottom:14px}
.ln_choice{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:11px 14px;border:1px solid var(--ln-line);border-radius:8px;
  background:var(--ln-panel);color:var(--ln-ink);font:400 var(--ln-fs)/1.45 roboto-regular,sans-serif;cursor:pointer;width:100%}
.ln_choice:hover{border-color:var(--secondary-light)}
.ln_choice .ln_key{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--ln-faint);display:flex;align-items:center;justify-content:center;
  font:700 11.5px/1 roboto-medium,sans-serif;color:var(--ln-dim)}
.ln_choice.is-right{border-color:var(--ln-green);background:color-mix(in srgb,var(--ln-green) 12%,var(--ln-panel))}
.ln_choice.is-right .ln_key{border-color:var(--ln-green);color:var(--ln-green)}
.ln_choice.is-wrong{border-color:var(--ln-red);background:color-mix(in srgb,var(--ln-red) 10%,var(--ln-panel))}
.ln_choice.is-wrong .ln_key{border-color:var(--ln-red);color:var(--ln-red)}
.ln_choice:disabled{cursor:default}
.ln_why{margin:0 0 14px;padding:12px 14px;border-radius:8px;border:1px solid var(--ln-line);background:var(--ln-panel);color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.ln_why b{color:var(--ink-strong);font-family:roboto-medium,sans-serif;font-weight:600}
.ln_score{text-align:center;padding:30px 0 10px}
.ln_score .big{font:700 54px/1 roboto-bold,roboto-medium,sans-serif;color:var(--ink-strong);margin-bottom:6px}
.ln_score .big.is-pass{color:var(--ln-green)}
.ln_score p{color:var(--ln-ink);font:400 var(--ln-fs)/1.6 roboto-regular,sans-serif;margin:0 0 14px}

/* ---- projects & teacher ---- */
.ln_steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:s}
.ln_steps li{position:relative;padding:12px 14px 12px 52px;border:1px solid var(--ln-line);border-radius:8px;background:var(--ln-panel);margin-bottom:8px;
  color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.ln_steps li::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--ln-green);color:var(--ln-green);display:flex;align-items:center;justify-content:center;font:700 12px/1 roboto-medium,sans-serif}
.ln_steps li b{color:var(--ink-strong);font:600 var(--ln-fs)/1.5 roboto-medium,sans-serif;display:block;margin-bottom:2px}
.ln_tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.ln_tabs .ll-btn{min-height:34px}
.ln_slip{border:1px dashed var(--secondary-light);border-radius:8px;padding:14px 16px;background:var(--ln-panel);margin-bottom:14px;color:var(--ln-ink);font:400 calc(var(--ln-fs) * 0.92)/1.55 roboto-regular,sans-serif}
.ln_slip .ln_code_big{display:block;margin:6px 0 8px;font:700 30px/1.1 'Atkinson Hyperlegible Mono',ui-monospace,monospace;letter-spacing:.14em;color:var(--ln-green)}
.ln_check_row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--ln-line);border-radius:8px;background:var(--ln-panel);margin-bottom:6px;
  color:var(--ln-ink);font:400 calc(var(--ln-fs) * 0.88)/1.45 roboto-regular,sans-serif;cursor:pointer}
.ln_check_row input{margin-top:4px;accent-color:var(--accent-sea-green)}
.ln_check_row b{color:var(--ink-strong);font:600 calc(var(--ln-fs) * 0.88)/1.45 roboto-medium,sans-serif}
.ln_check_row.is-on{border-color:var(--ln-green);background:color-mix(in srgb,var(--ln-green) 10%,var(--ln-panel))}
.ln_pill{display:inline-block;padding:2px 8px;border-radius:99px;border:1px solid var(--ln-faint);color:var(--ln-faint);font:600 10.5px/1.5 roboto-medium,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-left:6px;vertical-align:1px}
.ln_pill.is-lab{border-color:var(--ln-blue);color:var(--ln-blue)}
.ln_pill.is-quiz{border-color:var(--ln-gold);color:var(--ln-gold)}
.ln_pill.is-safety{border-color:var(--ln-red);color:var(--ln-red)}

/* ---- present mode (teacher on a projector): bigger, nothing else ---- */
.present .ln_col{max-width:960px}
.present .ln_p,.present .ln_ul,.present .ln_ol{font-size:21px;line-height:1.55}
.present h1.ln_h1{font-size:40px}
.present h2.ln_h2{font-size:30px}
.present .ln_lede{font-size:22px;max-width:none}
.present .ln_terms li{font-size:19px}.present .ln_terms b{font-size:19px}
.present .ln_callout{font-size:19px}
.present .ln_q{font-size:28px}.present .ln_choice{font-size:20px}
.present .ln_fig img{max-height:420px}

/* ---- print: the progress page ---- */
@media (max-width:640px){
  .ln_bar_title{display:none}
  /* Five buttons plus the theme chip are wider than a phone. They wrap
     onto a second row instead of pushing the bar (and the page) wide. */
  .ln_bar{flex-wrap:wrap;row-gap:4px;padding-top:10px;padding-bottom:6px}
  .ln_bar_right{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .ln_bar .ll-btn{padding:0 9px;min-height:28px}
  h1.ln_h1{font-size:26px}
  .ln_hero h1{font-size:30px}
}
/* A short screen (a 768-tall laptop under the browser's bars) gets a
   little of its padding back for the words. */
@media (max-height:720px){
  .ln_col{padding-top:14px;padding-bottom:18px}
}

/* ---- second pass: pictures first ---- */
/* the hairline of progress under the bar */
.ln_bar{position:relative}
.ln_progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent}
.ln_progress_fill{height:100%;background:var(--ln-green);transition:width .35s ease}

/* a photo with the words on it */
.ln_hero_img{position:relative;min-height:200px;max-height:36vh;height:28vw;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;overflow:hidden}
.ln_hero_veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,6,.15) 0%,rgba(7,10,6,.35) 45%,rgba(7,10,6,.86) 100%)}
.ln_hero_text{position:relative;width:100%;max-width:var(--ln-col);margin:0 auto;padding:22px 20px 26px;font-size:var(--ln-fs)}
.ln_col.is-wide ~ .ln_hero_text,.ln_hero_img.is-wide .ln_hero_text{max-width:var(--ln-col-wide)}
.ln_hero_text .ln_kicker{color:#7fe0b3}
.ln_hero_h{margin:0 0 8px;font:700 40px/1.1 roboto-bold,roboto-medium,sans-serif;letter-spacing:-.02em;color:var(--ln-on-photo);text-shadow:0 2px 18px rgba(0,0,0,.5)}
.ln_hero_sub{margin:0;max-width:640px;color:var(--ln-on-photo-dim);font:400 17px/1.55 roboto-regular,sans-serif;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.present .ln_hero_h{font-size:52px}
@media (max-width:640px){.ln_hero_h{font-size:28px}.ln_hero_sub{font-size:15px}}
/* On a phone a long photo credit (the sound course's collage names five people) wraps to two lines and ran
   over the line under the title. There it sits in the flow under the words instead of on top of them. */
@media (max-width:640px){
  .ln_hero_img{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .ln_hero_img .ln_hero_text{padding-bottom:6px}
  .ln_hero_img>.ln_credit{position:relative;right:auto;bottom:auto;align-self:flex-end;max-width:calc(100% - 20px);margin:0 10px 8px;text-align:right}
}

/* the front page gets the taller picture */
.ln_hero_img.is-home{max-height:46vh;height:34vw}

/* big numbers */
.ln_stats{display:grid;gap:10px;grid-template-columns:repeat(var(--cols-wide,3),1fr);margin:18px 0 22px}
.ln_stat{padding:14px 14px 12px;text-align:center}
.ln_stat_n{font:700 30px/1.1 roboto-bold,roboto-medium,sans-serif;color:var(--ln-green);letter-spacing:-.01em}
.ln_stat_l{margin-top:6px;color:var(--ln-ink);font:400 max(15px,calc(var(--ln-fs) * 0.88))/1.4 roboto-regular,sans-serif;text-wrap:balance}
.present .ln_stat_n{font-size:44px}

/* picture cards */
.ln_cards{display:grid;gap:12px;grid-template-columns:repeat(var(--cols-wide,3),1fr);margin:0 0 14px}
.ln_pcard{border:0;border-radius:10px;overflow:hidden;background:transparent}
.ln_pcard .ln_pic{border-radius:10px;border:1px solid var(--ln-line);overflow:hidden}
.ln_pcard img{width:100%;height:112px;object-fit:cover;display:block}
.ln_pcard_svg{padding:8px;background:var(--ln-panel)}
.ln_pcard_svg svg{width:100%;height:auto;display:block}
.ln_pcard_body{padding:8px 2px 4px}
.ln_pcard_body h3{margin:0 0 3px;font:700 var(--ln-fs)/1.3 roboto-medium,sans-serif;color:var(--ln-unit,var(--ln-green))}
.ln_pcard_body p{margin:0;color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}

/* one big idea */
.ln_big{margin:8px 0 20px;padding:26px 24px;border-radius:12px;background:var(--ln-panel);border:1px solid var(--ln-line);position:relative;overflow:hidden}
.ln_big::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,rgba(30,168,118,.95),rgba(77,163,255,.95),rgba(226,176,74,.95),rgba(217,65,107,.95))}
.ln_big p{margin:0;font:700 calc(var(--ln-fs) * 1.35)/1.3 roboto-bold,roboto-medium,sans-serif;color:var(--ink-strong);letter-spacing:-.01em}
.ln_big>span{display:block;margin-top:10px;color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.present .ln_big p{font-size:38px}

/* two pictures side by side */
.ln_compare{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:0 0 14px}
.ln_compare .ln_fig img{max-height:min(260px,34vh)}
.ln_compare figcaption b{color:var(--ink-strong);font-family:roboto-medium,sans-serif;font-weight:600}
@media (max-width:640px){.ln_compare{grid-template-columns:1fr}}

/* lesson finished */
.ln_done{text-align:center;padding:40px 0 20px}
.ln_done_mark{width:86px;height:86px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--ln-green);color:var(--ln-green);
  display:flex;align-items:center;justify-content:center;font:700 44px/1 roboto-bold,sans-serif;
  background:color-mix(in srgb,var(--ln-green) 12%,transparent);box-shadow:0 0 0 8px color-mix(in srgb,var(--ln-green) 10%,transparent);
  animation:ln_pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ln_pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.ln_done .ln_cta{margin-top:18px}

/* home: three doors */
.ln_choose{display:grid;gap:12px;grid-template-columns:repeat(var(--cols-wide,3),1fr);margin:18px 0 8px}
.ln_choice_card{display:block;padding:18px 18px 16px;border:1px solid var(--ln-line);border-radius:12px;background:var(--ln-panel);color:var(--ln-dim);text-decoration:none;min-height:150px}
a.ln_choice_card:hover{border-color:var(--ln-green);text-decoration:none}
.ln_choice_k{display:block;margin-bottom:6px;color:var(--ln-faint);font:700 10.5px/1.3 roboto-medium,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ln_choice_card h3{margin:0 0 6px;font:700 20px/1.25 roboto-bold,roboto-medium,sans-serif;color:var(--ink-strong)}
a.ln_choice_card h3{color:var(--ln-unit,var(--ln-green))}
.ln_choice_card p{margin:0;color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}
.ln_choice_card .ln_row{margin:6px 0 0}
.ln_choice_card .ln_input.is-code{width:12.5ch;font-size:16px;letter-spacing:.08em}
.ln_choice_card .ln_muted{width:100%}

/* cards with a picture on top */
.ln_card.is-pic{padding:0}
.ln_card.is-pic img{width:100%;height:120px;object-fit:cover;display:block}
.ln_card_body{padding:12px 14px 12px}


/* the progress code, when shown */
.ln_code_area{width:100%;box-sizing:border-box;margin:4px 0 10px;padding:10px 12px;border-radius:6px;border:1px solid var(--ln-green);background:var(--primary-light);color:var(--ln-green);font:600 12px/1.5 'Atkinson Hyperlegible Mono',ui-monospace,monospace;resize:vertical;overflow-wrap:anywhere;word-break:break-all}

/* ---- energy: unit colors, the light sweep, tiles, the hit ---- */
.u-green{--ln-unit:var(--ln-green)}.u-gold{--ln-unit:var(--ln-gold)}.u-blue{--ln-unit:var(--ln-blue)}.u-red{--ln-unit:var(--ln-red)}
.ln_root .ln_progress_fill{background:var(--ln-unit,var(--ln-green))}
.ln_root .ln_kicker{color:var(--ln-unit,var(--ln-green))}
.ln_root .ln_hero_text .ln_kicker{color:var(--ln-unit,#7fe0b3)}
.ln_root .ln_big::before{background:var(--ln-unit,var(--ln-green))}
.ln_root .ln_stat_n{color:var(--ln-unit,var(--ln-green))}
.ln_root .ln_done_mark{border-color:var(--ln-unit,var(--ln-green));color:var(--ln-unit,var(--ln-green));
  background:color-mix(in srgb,var(--ln-unit,var(--ln-green)) 12%,transparent);box-shadow:0 0 0 8px color-mix(in srgb,var(--ln-unit,var(--ln-green)) 10%,transparent)}
.ln_unit_dot{width:10px;height:10px;border-radius:50%;background:var(--ln-unit,var(--ln-green));flex:0 0 auto;align-self:center;box-shadow:0 0 12px var(--ln-unit,var(--ln-green))}
.ln_lesson .ln_lesson_n{border-color:color-mix(in srgb,var(--ln-unit,var(--ln-green)) 60%,transparent);color:var(--ln-unit,var(--ln-green))}
.ln_lesson.is-done .ln_lesson_n{background:color-mix(in srgb,var(--ln-unit,var(--ln-green)) 16%,transparent);border-color:var(--ln-unit)}
.ln_choice_card h3{color:var(--ln-unit,var(--ln-green))}
a.ln_choice_card:hover{border-color:var(--ln-unit,var(--ln-green));box-shadow:0 0 0 1px var(--ln-unit,var(--ln-green)),0 0 24px color-mix(in srgb,var(--ln-unit,var(--ln-green)) 30%,transparent)}

/* the light sweep: a soft beam of the four colors drifting across every cover */
.ln_hero_img::after{content:'';position:absolute;inset:-20% -40%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(100deg,transparent 30%,rgba(30,168,118,.35) 40%,rgba(77,163,255,.35) 47%,rgba(226,176,74,.35) 54%,rgba(217,65,107,.35) 61%,transparent 72%);
  animation:ln_sweep 9s ease-in-out infinite alternate}
@keyframes ln_sweep{from{transform:translateX(-28%)}to{transform:translateX(28%)}}
.ln_hero_text,.ln_hero_img>.ln_credit{z-index:1}
@media (prefers-reduced-motion:reduce){.ln_hero_img::after{animation:none}}

/* lesson tiles */
.ln_tiles{display:grid;gap:10px;grid-template-columns:repeat(var(--cols-wide,4),1fr);margin:0 0 6px}
.ln_tile{display:block;border:1px solid var(--ln-line);border-radius:10px;overflow:hidden;background:var(--ln-panel);color:var(--ln-dim);text-decoration:none;position:relative;
  transition:transform .15s,box-shadow .15s}
.ln_tile:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--ln-unit);box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 1px var(--ln-unit)}
.ln_tile img{width:100%;height:96px;object-fit:cover;display:block}
.ln_tile_body{padding:8px 10px 10px;display:grid;grid-template-columns:26px 1fr;gap:4px 8px;align-items:center}
.ln_tile_n{width:26px;height:26px;border-radius:50%;border:1px solid var(--ln-unit);color:var(--ln-unit);display:flex;align-items:center;justify-content:center;font:700 11px/1 roboto-medium,sans-serif;grid-row:span 2}
.ln_tile.is-done .ln_tile_n{background:color-mix(in srgb,var(--ln-unit) 18%,transparent)}
.ln_tile_t{color:var(--ink-strong);font:600 13.5px/1.25 roboto-medium,sans-serif}
.ln_tile_m{color:var(--ln-faint);font:500 11px/1.3 roboto-regular,sans-serif}

/* the step you just nailed */
.ln_lab_strip{transition:background .25s}
.ln_lab_strip.is-hit{background:color-mix(in srgb,var(--ln-green) 18%,var(--primary-light))}
.ln_lab_strip.is-hit .ln_step_n{animation:ln_pop .45s cubic-bezier(.2,1.4,.4,1)}

/* the done screen's beam */
.ln_done_beam{height:4px;width:220px;margin:0 auto 14px;border-radius:2px;
  background:linear-gradient(90deg,rgba(30,168,118,.95),rgba(77,163,255,.95),rgba(226,176,74,.95),rgba(217,65,107,.95));
  filter:blur(.4px);animation:ln_beam_in .8s ease-out}
@keyframes ln_beam_in{from{width:0;opacity:0}to{width:220px;opacity:1}}
.ln_grid.is-paths{grid-template-columns:repeat(var(--cols-wide,3),1fr)}

/* the step-done dialog wears the site's modal */
.ln_askdone .ll-modal{font-family:roboto-regular,sans-serif}
.ln_askdone .ll-modal-body p{color:var(--secondary-lighter);font:400 15px/1.55 roboto-regular,sans-serif}

/* Grids never leave one item alone on the last row. The column counts
   come from grid.js (colsFor), per element, from how many items it has;
   these breakpoints pick which count applies. */
@media (max-width:860px){.ln_grid,.ln_stats,.ln_cards,.ln_choose,.ln_tiles,.ln_grid.is-paths{grid-template-columns:repeat(var(--cols-mid,2),1fr)}}
@media (max-width:520px){.ln_grid,.ln_stats,.ln_cards,.ln_choose,.ln_tiles,.ln_grid.is-paths{grid-template-columns:repeat(var(--cols-narrow,1),1fr)}}

/* class check (teacher › Assess) and the two bar buttons */
.ln_classcheck{margin-top:18px;padding:16px 18px;border:1px solid var(--ln-line);border-radius:10px;background:var(--ln-panel)}
.ln_classcheck h3{margin:0 0 6px;color:var(--ink-strong);font:700 18px/1.3 roboto-bold,roboto-medium,sans-serif}
.ln_classcheck .ln_code_area{width:100%;margin:8px 0}
.ln_bar_feedback,.ln_bar_save{white-space:nowrap}
@media (max-width:700px){.ln_bar_save{display:none}}
/* After an answer: See my score on the left, Ask me another at the far right. */
.ln_quiz_next{margin:10px 0 0;justify-content:space-between}
.ln_quiz_next .ll-btn:only-child,.ln_quiz_next .ln_hidden + .ll-btn{margin-left:auto}
.ln_score_l{margin:0 0 10px;color:var(--ln-dim);font:500 var(--ln-fs)/1.4 roboto-regular,sans-serif}

/* Guess first: a one-tap prediction before the explanation. */
.ln_ask{margin:6px 0 16px;padding:14px 16px;border:1px solid var(--ln-line);border-left:3px solid var(--ln-gold);border-radius:10px;background:var(--ln-panel)}
.ln_ask_q{margin:0 0 10px;color:var(--ink-strong);font:600 var(--ln-fs)/1.45 roboto-medium,sans-serif}
.ln_ask_row{display:flex;flex-wrap:wrap;gap:8px}
/* Inside the question's own panel a choice needs its own edge to read as a button. */
.ln_lq .ln_choice{border-color:var(--secondary-light)}
.ln_ask_row .ln_choice{width:auto;flex:0 1 auto;max-width:100%;align-items:center}
.ln_choices.is-fit{justify-items:start}
.ln_choices.is-fit .ln_choice{width:auto;max-width:100%;align-items:center}
.ln_ask_then{margin:10px 0 0;color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif}
.ln_ask_then b{color:var(--ln-green)}
.ln_ask_then.is-miss b{color:var(--ln-gold)}

/* Look and answer: the photos ARE the choices. */
.ln_ask_pics{display:grid;gap:12px;grid-template-columns:repeat(var(--cols-wide,2),1fr)}
@media (max-width:640px){.ln_ask_pics.is-many{grid-template-columns:1fr}}
.ln_ask_pic{position:relative;padding:0;border:2px solid var(--ln-line);border-radius:10px;overflow:hidden;background:var(--ln-panel);cursor:pointer;text-align:left}
.ln_ask_pic img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.ln_ask_pic b{display:block;padding:9px 12px;color:var(--ink-strong);font:600 var(--ln-fs)/1.4 roboto-medium,sans-serif}
.ln_ask_pic .ln_pic img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.ln_ask_pic:hover{border-color:var(--ln-blue)}
.ln_ask_pic.is-right{border-color:var(--ln-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--ln-green) 35%,transparent)}
.ln_ask_pic.is-wrong{border-color:var(--ln-red)}
.ln_ask_pic.is-picked{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-strong) 30%,transparent)}
.ln_ask_pic.is-right.is-picked{box-shadow:0 0 0 3px color-mix(in srgb,var(--ln-green) 45%,transparent)}
/* While the frame shows the step on its own card, the strip says only where you are. */
.ln_step_short{color:var(--ln-dim);font:500 14px/1.4 roboto-medium,sans-serif}
/* PROSE SPANS THE COLUMN (owner, video 8, hanging screen 2: the line
   above the drawing stopped short of it, so two words, "hang anything.",
   wrapped onto a line of their own and pushed the page down). In a lesson
   the column itself (72ch) is the reading measure, so a paragraph, a list
   and a Worth-knowing box are as wide as the picture or card under them.
   The wide pages (home, a path, a project) are 96ch for their tiles; their
   few lines of prose keep a 72ch measure. */
.ln_col.is-wide .ln_p,.ln_col.is-wide .ln_lede,.ln_col.is-wide .ln_callout,.ln_col.is-wide .ln_ul,.ln_col.is-wide .ln_ol{max-width:72ch}

/* ---- 2026-10-03: credits, choices, the teacher's ways, paper ---- */

/* The credit sits ON the picture, bottom right, small: "Photo: Name".
   Not a link (the credits page has the license and the links). White
   on a dark wash, because it sits on a photo in both themes. */
.ln_pic{position:relative;display:block}
.ln_pic img{display:block}
.ln_credit{position:absolute;right:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 7px;border-radius:4px;
  background:rgba(7,10,6,.62);color:var(--ln-on-photo-dim);font:500 11px/1.35 roboto-regular,sans-serif;
  overflow-wrap:anywhere;pointer-events:none}
.ln_hero_img>.ln_credit{right:10px;bottom:8px;background:transparent;color:var(--ln-on-photo-faint);padding:0}

/* An ungraded question, after the first answer: every choice can still be
   clicked to read what it means; the one you are reading is outlined. */
.ln_lq .ln_choice.is-picked{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-strong) 35%,transparent)}
.ln_lq .ln_choice.is-right.is-picked{box-shadow:0 0 0 2px color-mix(in srgb,var(--ln-green) 55%,transparent)}
.ln_lq .ln_why{margin-top:12px}

/* Teacher › Plan: one card per way to run it, its code made in place. */
.ln_ways{display:grid;gap:10px;margin:0 0 18px}
.ln_way{padding:14px 16px;border:1px solid var(--ln-line);border-radius:10px;background:var(--ln-panel);color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif}
.ln_way p{margin:4px 0 10px}
.ln_way_head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.ln_way_head h3{margin:0;color:var(--ink-strong);font:700 var(--ln-fs)/1.3 roboto-medium,sans-serif}
.ln_way_time{color:var(--ln-dim);font:500 var(--ln-fs)/1.3 roboto-regular,sans-serif}
.ln_way_set{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding-top:10px;border-top:1px solid var(--ln-line);color:var(--ln-dim)}
.ln_way_set>span{min-width:0;flex:1 1 220px}
.ln_way_code:not(:empty){margin-top:10px}
.ln_way_code .ln_code_big{display:block;margin:0 0 8px;font:700 28px/1.1 'Atkinson Hyperlegible Mono',ui-monospace,monospace;letter-spacing:.14em;color:var(--ln-green);overflow-wrap:anywhere}
.ln_way_code .ln_row{margin:0}
.ln_teach .ln_table{font-size:var(--ln-fs)}

/* ---- the handout: a sheet of paper, on screen and printed ----
   White paper, black ink, thin gray rules, no filled boxes: every block
   re-reads its colors from these tokens, so nothing prints as a dark
   slab. The colors are fixed (paper is white in both themes). */
.ln_body.is-print{background:var(--primary-dark)}
.ln_paper_desk{padding:24px 16px 40px}
.ln_paper{
  --ln-fs:11.5pt; --ln-ink:#111; --ink-strong:#000; --ln-panel:transparent; --ln-line:#b9b9b9;
  --ln-dim:#444; --ln-faint:#555; --ln-green:#111; --ln-blue:#111; --ln-gold:#111; --ln-red:#111; --ln-unit:#111;
  --secondary-dark:transparent; --secondary-light:#999;
  max-width:8.5in;margin:0 auto;padding:.6in .7in;background:#fff;color:#111;font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif;
  box-shadow:0 6px 30px rgba(0,0,0,.35);border-radius:2px}
.ln_paper .ln_kicker{color:#444;font-size:8.5pt}
.ln_paper h1.ln_h1{font-size:22pt;margin-bottom:4px}
.ln_paper h2.ln_h2{font-size:14pt;margin:0 0 8px;break-after:avoid}
.ln_paper h3.ln_h3{font-size:var(--ln-fs);break-after:avoid}
.ln_paper .ln_lede,.ln_paper .ln_p,.ln_paper .ln_ul,.ln_paper .ln_ol,.ln_paper .ln_callout{max-width:none}
.ln_paper code{border:1px solid #bbb;background:transparent}
.ln_paper_name{display:flex;gap:28px;margin:6px 0 4px;color:#333}
.ln_paper_name span{flex:1 1 0;border-bottom:1px solid #777;padding:14px 0 2px}
.ln_paper_name span:last-child{flex:0 0 32%}
.ln_print_screen{padding:14px 0 4px;border-top:1px solid #ccc;margin-top:12px}
.ln_paper .ln_big{padding:12px 14px;border-radius:6px;background:transparent;margin:6px 0 12px}
.ln_paper .ln_big::before{display:none}
.ln_paper .ln_big p{font-size:13pt}
.ln_paper .ln_callout{padding:8px 12px;border-radius:6px}
.ln_paper .ln_callout::before{width:2px;background:#555}
.ln_paper .ln_stats{margin:8px 0 12px;gap:8px}
.ln_paper .ln_stat{padding:8px;border-radius:6px}
.ln_paper .ln_stat_n{font-size:16pt;color:#000}
.ln_paper .ln_stat_l{font-size:9pt;color:#333}
.ln_paper .ln_terms li,.ln_paper .ln_pcard_body{border-radius:6px}
.ln_paper .ln_pcard img{height:1.3in}
.ln_paper .ln_cards{gap:10px}
.ln_paper .ln_pill{color:#111;border-color:#777}
.ln_paper .ln_fig,.ln_paper .ln_diagram{border:0;background:transparent;padding:0;margin:4px 0 12px;break-inside:avoid}
.ln_paper .ln_fig .ln_pic{display:inline-block;max-width:100%;border:1px solid #bbb;border-radius:4px;overflow:hidden}
.ln_paper .ln_fig img{width:auto;max-width:100%;max-height:2in;object-fit:contain}
.ln_paper .ln_diagram svg{max-height:2.8in}
.ln_paper .ln_diagram figcaption,.ln_paper .ln_fig figcaption{border:0;padding:4px 0 0}
/* On paper the credit is a line of small gray type under the picture, not ink on the photo. */
.ln_paper .ln_credit{position:static;display:block;background:transparent;color:#555;padding:2px 4px;font-size:7.5pt;text-align:right}
.ln_paper .ln_hero_img{display:none}

/* Worksheet questions: a circle to fill per choice, a line for the reason. */
.ln_wq{margin:8px 0 14px;break-inside:avoid}
.ln_wq_q{margin:0 0 6px;color:#000;font:600 var(--ln-fs)/1.45 roboto-medium,sans-serif}
.ln_wq_choices{list-style:none;margin:0 0 6px;padding:0 0 0 18px;display:grid;gap:5px}
.ln_wq_c{display:flex;align-items:flex-start;gap:8px;color:#111}
.ln_wq_o{flex:0 0 auto;width:.95em;height:.95em;margin-top:.22em;border:1px solid #222;border-radius:50%}
.ln_wq_k{flex:0 0 auto;min-width:1.2em;font-family:roboto-medium,sans-serif}
.ln_wq.is-pics .ln_wq_choices{grid-template-columns:repeat(auto-fit,minmax(2.2in,1fr));gap:10px}
.ln_wq.is-pics .ln_wq_c{flex-wrap:wrap}
.ln_wq.is-pics .ln_pic{flex:1 1 100%;order:-1;border:1px solid #bbb;border-radius:4px;overflow:hidden}
.ln_wq.is-pics .ln_pic img{width:100%;height:1.5in;object-fit:cover}
.ln_wq_line{margin:10px 0 0 18px;border-bottom:1px solid #888;min-height:1.9em;display:flex;align-items:flex-end;color:#555;font-size:9pt}
.ln_wq_steps{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.ln_wq_steps li{display:flex;gap:10px;align-items:flex-start;break-inside:avoid}
.ln_wq_box{flex:0 0 auto;width:.95em;height:.95em;margin-top:.22em;border:1px solid #222;border-radius:2px}
.ln_print_key{margin-top:18px;padding-top:12px;border-top:2px solid #333;break-before:page}
@media (max-width:640px){
  .ln_paper_desk{padding:12px 8px 24px}
  .ln_paper{padding:22px 18px}
}

/* Printing any page: paper colors everywhere, no app chrome. */
@media print{
  @page{size:letter;margin:.55in .6in}
  :root,:root[data-theme="light"],:root[data-theme="dark"]{
    --page:#fff; --card:transparent; --primary-light:#fff; --primary-lighter:#fff; --primary-lighter-alt:#fff;
    --primary-dark:#fff; --ink-strong:#000; --ln-ink:#111; --ln-panel:transparent; --ln-line:#bbb; --ln-dim:#444; --ln-faint:#555;
    --ln-green:#111; --ln-blue:#111; --ln-gold:#111; --ln-red:#111; --ln-unit:#111; --secondary-dark:transparent;
    color-scheme:light}
  html,body,body.learn{background:#fff !important;color:#111;overflow:visible;height:auto}
  .ln_root{display:block;height:auto}
  .ln_bar,.ln_foot,.ln_noprint,.ln_termcard{display:none !important}
  .ln_body,.ln_body.is-print{overflow:visible;background:#fff}
  .ln_col{max-width:none;padding:0}
  .ln_paper_desk{padding:0}
  .ln_paper{max-width:none;margin:0;padding:0;box-shadow:none;border-radius:0}
  .ln_hero_img::after{display:none}
  .ln_print_screen{border-top-color:#ccc}
}
.ln_paper strong,.ln_paper b{color:inherit;font-family:roboto-medium,sans-serif;font-weight:600}
/* A practice checklist is short: it stays on one page with its heading. */
.ln_print_screen.is-lab{break-inside:avoid}
/* The work area at the end of every printed screen (learn.js renderPrint work(), print-prompts.js):
   a name for what to do, ONE line saying how, then the place to do it. */
.ln_work{margin:10px 0 2px;padding:8px 10px 10px;border:1px solid #888;border-radius:6px;break-inside:avoid}
.ln_work_k{display:block;font:700 8.5pt/1.3 roboto-bold,roboto-medium,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#111}
.ln_work_q{display:block;margin:2px 0 4px;font:400 10pt/1.4 roboto-regular,sans-serif;color:#222}
.ln_work_line{display:block;height:1.9em;border-bottom:1px solid #999}
.ln_work_bank{margin:6px 0 4px;padding:4px 8px;border:1px dashed #999;border-radius:4px;font:400 9.5pt/1.5 roboto-regular,sans-serif;color:#111}
.ln_work_fig{color:#111;margin:4px auto 2px;max-width:5.6in}
.ln_work_fig svg{display:block;width:100%;height:auto}
.ln_work_fig.is-stage{max-width:5.2in}
/* Text only (no pictures): the drawings are black line art, no fills, no gray (review 10/07 c7; learn.js toLineArt). */
.ln_paper.is-textonly .ln_work_fig{color:#000}
.ln_work_answers{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:4px 0 0;padding-left:26px;font:600 9.5pt/1 roboto-medium,sans-serif}
.ln_work_answers li{padding-left:2px}
.ln_work_answers li::marker{content:'(' counter(list-item) ')  '}
.ln_work_blanks{margin:4px 0 0;padding-left:22px;font:400 10pt/1.5 roboto-regular,sans-serif;color:#111}
.ln_work_blanks li{margin:0 0 7px}
.ln_work_gap{display:inline-block;width:1.5in;border-bottom:1px solid #444;height:1.1em;vertical-align:baseline}
.ln_work_table{width:100%;border-collapse:collapse;margin-top:4px;font:400 9.5pt/1.4 roboto-regular,sans-serif;color:#111}
.ln_work_table th,.ln_work_table td{border:1px solid #888;padding:4px 7px;text-align:left;vertical-align:top}
.ln_work_table th{font:700 8.5pt/1.3 roboto-medium,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.ln_work_table td.is-empty{height:2.1em}
.ln_work_table td:first-child{width:22%}
.ln_printed{align-self:center;color:var(--ln-green);font:600 12.5px/1 roboto-medium,sans-serif}

/* ---- 2026-10-03b: walkthrough video #3, the course shell ---- */

:root{--ln-on-mark:#fff} /* white on a solid green/red mark, in both themes */
/* Save progress wears a dot while there is progress since the last save (no autosave). */
.ln_bar_save.is-unsaved{border-color:var(--ln-gold);color:var(--ink-strong);animation:ln_save_pulse 3.6s ease-in-out infinite}
/* only the words glow (owner 10/17: a glow over the whole button fought the colored strip on top) */
@keyframes ln_save_pulse{0%,100%{text-shadow:none}50%{color:var(--accent-teal);text-shadow:0 0 8px var(--accent-teal),0 0 16px var(--accent-teal),0 0 28px color-mix(in srgb,var(--accent-teal) 60%,transparent)}}
@media (prefers-reduced-motion:reduce){.ln_bar_save.is-unsaved{animation:none;text-shadow:0 0 6px var(--accent-teal)}}
/* Saved: one quick fade from the glow, then plain (owner, video 2026-10-18 at 5:31). */
.ln_bar_save.is-savedfade{animation:ln_saved_fade .24s ease-out}
@keyframes ln_saved_fade{from{color:var(--accent-teal);text-shadow:0 0 8px var(--accent-teal)}to{text-shadow:none}}
.ln_bar_save.is-unsaved::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ln-gold);flex:0 0 auto}

/* Your course: both ways out at the top. */
.ln_course_nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ln_course_nav .ll-btn{min-height:34px}

/* Thin dotted rules between words-only columns and cards, so they read
   as separate things instead of floating. Each card draws its rule on
   its left and top; the container clips the ones on its outside edge.
   Owner, 2026-10-04: "Tiny bit thinner. Tiny, tiny, tiny." A border
   cannot do it: Chrome rounds a 0.5px border back up to 1px, and a
   0.5px gradient vanishes at some column positions. So the rule is a
   tiny SVG tile: a half-pixel dot every 2px (one device pixel on a
   Retina screen), in a fainter ink than before. One tile per theme. */
:root{
  --ln-rule-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='2'%3E%3Crect width='.5' height='1' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E");
  --ln-rule-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='1'%3E%3Crect width='1' height='.5' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E")}
:root[data-theme="light"]{
  --ln-rule-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='2'%3E%3Crect width='.5' height='1' fill='%230d1411' fill-opacity='.38'/%3E%3C/svg%3E");
  --ln-rule-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='1'%3E%3Crect width='1' height='.5' fill='%230d1411' fill-opacity='.38'/%3E%3C/svg%3E")}
.ln_cards.is-text{gap:0;overflow:hidden;margin-left:-18px;margin-top:4px}
.ln_cards.is-text>.ln_pcard{border-radius:0;margin:-1px 0 0 -1px;padding:10px 18px 12px;
  background-image:var(--ln-rule-v),var(--ln-rule-h);background-size:1px 2px,2px 1px;
  background-repeat:repeat-y,repeat-x;background-position:left top,left top}
.ln_cards.is-text .ln_pcard_body{padding:0}
/* Stat tiles are side-by-side words too: the same hairline between them, no boxes (owner, video #4). */
.ln_stats{gap:0;overflow:hidden;margin-left:-18px}
.ln_stats>.ln_stat{margin:-1px 0 0 -1px;padding:12px 18px 14px;
  background-image:var(--ln-rule-v),var(--ln-rule-h);background-size:1px 2px,2px 1px;
  background-repeat:repeat-y,repeat-x;background-position:left top,left top}
/* Word tiles: a heading the size of the text, not a big colored figure (owner, video 2026-10-18 #2). */
.ln_stats.is-words>.ln_stat{text-align:left;padding:10px 18px 12px}
.ln_root .ln_stats.is-words .ln_stat_n{color:var(--ink-strong);font:600 calc(var(--ln-fs) * 1.05)/1.35 roboto-medium,sans-serif;letter-spacing:0}
.ln_stats.is-words .ln_stat_l{margin-top:3px;font-size:var(--ln-fs);text-wrap:pretty}
.present .ln_stats.is-words .ln_stat_n{font-size:22px}
.ln_two>div+div{padding-left:18px;
  background-image:var(--ln-rule-v);background-size:1px 2px;background-repeat:repeat-y;background-position:left top}
@media (max-width:760px){.ln_two>div+div{padding-left:0;padding-top:12px;
  background-image:var(--ln-rule-h);background-size:2px 1px;background-repeat:repeat-x}}

/* Ungraded choices: right is green, wrong is plainly red (a red edge, a
   red bar, a red mark), and the words stay the page's ink, never dark on
   a color. Every choice stays clickable. */
.ln_lq .ln_choice.is-right,.ln_lq .ln_choice.is-wrong{box-shadow:inset 4px 0 0 var(--btn-mark)}
.ln_lq .ln_choice.is-right{--btn-mark:var(--ln-green);border-color:var(--ln-green);background:color-mix(in srgb,var(--ln-green) 14%,var(--ln-panel))}
.ln_lq .ln_choice.is-wrong{--btn-mark:var(--ln-red);border-color:var(--ln-red);background:color-mix(in srgb,var(--ln-red) 14%,var(--ln-panel))}
.ln_lq .ln_choice.is-right.is-picked,.ln_lq .ln_choice.is-wrong.is-picked{box-shadow:inset 4px 0 0 var(--btn-mark),0 0 0 2px color-mix(in srgb,var(--btn-mark) 55%,transparent)}
.ln_lq .ln_choice.is-right .ln_key,.ln_lq .ln_choice.is-wrong .ln_key{font-size:0;border-color:var(--btn-mark);background:var(--btn-mark)}
.ln_lq .ln_choice.is-right .ln_key::after{content:'\2713';font:700 13px/1 roboto-bold,sans-serif;color:var(--ln-on-mark)}
.ln_lq .ln_choice.is-wrong .ln_key::after{content:'\2717';font:700 13px/1 roboto-bold,sans-serif;color:var(--ln-on-mark)}
.ln_ask_pic.is-wrong{border-color:var(--ln-red);box-shadow:0 0 0 2px color-mix(in srgb,var(--ln-red) 45%,transparent)}
.ln_ask_pic.is-wrong img{filter:saturate(.55) brightness(.8)}
.ln_ask_pic.is-wrong::after,.ln_ask_pic.is-right::after{position:absolute;top:8px;left:8px;z-index:2;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ln-on-mark);font:700 15px/1 roboto-bold,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ln_ask_pic.is-wrong::after{content:'\2717';background:var(--ln-red)}
.ln_ask_pic.is-right::after{content:'\2713';background:var(--ln-green)}

/* No pop-in: a photo's box is a fixed height before it arrives (cover
   crop, as it always was at this size), so the words never jump. */
.ln_fig.is-photo img{height:min(340px,44vh);max-height:none;object-fit:cover}
.ln_fig.is-photo.is-tall img{height:min(440px,58vh)}
.ln_compare .ln_fig img{height:min(260px,34vh);max-height:none;object-fit:cover}
.present .ln_fig.is-photo img{height:min(420px,50vh)}
.ln_paper .ln_fig.is-photo img,.ln_paper .ln_compare .ln_fig img{height:auto}
.ln_pic img{background:var(--secondary-darker)}

/* Score page: one row per answer, green right / red wrong, labeled. */
.ln_score_row{margin:0 0 10px;padding:12px 14px 12px 18px;border:1px solid var(--ln-line);border-radius:8px;background:var(--ln-panel);
  color:var(--ln-ink);font:400 var(--ln-fs)/1.5 roboto-regular,sans-serif;box-shadow:inset 4px 0 0 var(--row-mark)}
.ln_score_row.is-right{--row-mark:var(--ln-green);border-color:color-mix(in srgb,var(--ln-green) 60%,var(--ln-line));background:color-mix(in srgb,var(--ln-green) 10%,var(--ln-panel))}
.ln_score_row.is-wrong{--row-mark:var(--ln-red);border-color:color-mix(in srgb,var(--ln-red) 60%,var(--ln-line));background:color-mix(in srgb,var(--ln-red) 10%,var(--ln-panel))}
.ln_score_q{margin:0 0 8px;color:var(--ink-strong);font-family:roboto-medium,sans-serif;font-weight:600}
.ln_score_mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;
  background:var(--row-mark);color:var(--ln-on-mark);font:700 12px/1 roboto-bold,sans-serif;vertical-align:1px}
.ln_score_ans{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0 0 6px}
.ln_score_ans dt{color:var(--ln-dim);font:600 calc(var(--ln-fs) * 0.72)/1.9 roboto-medium,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ln_score_ans dd{margin:0;color:var(--ink-strong)}
.ln_score_why{margin:0;color:var(--ln-ink)}
@media (max-width:520px){.ln_score_ans{grid-template-columns:1fr}.ln_score_ans dd{margin-bottom:4px}}

/* Teacher notes: their own window. */
.ln_notes .ln_note{margin:0 0 12px;padding:12px 14px;border:1px solid var(--ln-line);border-radius:10px;background:var(--ln-panel);
  color:var(--ln-ink);font:400 var(--ln-fs)/1.55 roboto-regular,sans-serif;scroll-margin-top:12px}
.ln_notes .ln_note.is-now{border-color:var(--ln-gold);box-shadow:inset 4px 0 0 var(--ln-gold),0 0 0 1px var(--ln-gold)}
.ln_note_h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.ln_note_h h2{margin:0;flex:1 1 200px;min-width:0;color:var(--ink-strong);font:700 var(--ln-fs)/1.3 roboto-medium,sans-serif}
.ln_note_n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--ln-faint);display:flex;align-items:center;justify-content:center;color:var(--ln-dim);font:700 12px/1 roboto-medium,sans-serif}
.ln_note.is-now .ln_note_n{border-color:var(--ln-gold);color:var(--ln-gold)}
.ln_note_h .ln_pill{margin-left:0}
.ln_note_go{min-height:30px;padding:0 10px;font-size:12px}
.ln_note_t{margin:0 0 6px}
.ln_note_ans,.ln_note_steps{margin:6px 0 0;padding-left:22px;color:var(--ln-ink)}
.ln_note_ans li,.ln_note_steps li{margin-bottom:4px}
.ln_note_done{margin:0 0 30px;padding:12px 14px;border:1px dashed var(--ln-line);border-radius:10px;color:var(--ln-dim)}
.ln_note_done.is-now{border-color:var(--ln-gold);color:var(--ink-strong)}
/* The notes window's way on, and its remote for a check (2026-10-04). */
.ln_note_nav{margin:-14px 0 30px;justify-content:flex-end;flex-wrap:wrap}
.ln_note_next{white-space:normal;text-align:left}
.ln_note_choices{margin:8px 0 10px}
/* The notes window is narrow on purpose: its bar stays one row, and says what it is. */
@media (max-width:640px){
  .is-notes .ln_bar{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .is-notes .ln_bar_title{display:block}
  .is-notes .ln_bar_right{flex:0 0 auto}
}
/* Notes on a phone (a teacher's remote in the hand): LIMELIGHT | LEARN BETA plus Feedback and the theme chip came
   to a pixel more than 390 wide, so the page scrolled sideways. The bar already says "Teacher notes"; LEARN goes. */
@media (max-width:440px){
  .is-notes .ln_bar{gap:8px}
  .is-notes .ln_brand_chip{display:none}
}
/* One screen at a time (2026-10-05): its number as the projector shows it. */
.ln_notes .ln_note_n{width:auto;min-width:26px;padding:0 7px;border-radius:13px}
.ln_note_sub{margin:14px 0 6px;color:var(--ln-dim);font:600 12px/1.4 roboto-medium,sans-serif;letter-spacing:.08em;text-transform:uppercase}
/* The remote for a question on the screen: big letters, nothing else until a pick. */
.ln_note_letters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.ln_note_letters .ln_letter{width:auto;min-width:64px;justify-content:center;align-items:center;padding:12px 16px;border-color:var(--secondary-light)}
.ln_note_letters .ln_letter .ln_key{width:30px;height:30px;font-size:15px}
.ln_note_letters .ln_letter .ln_choice_t{font-size:14px}
.ln_note_letters .ln_letter.is-picked:not(.is-right):not(.is-wrong){border-color:var(--ink-strong)}
.ln_note_ask{margin-top:4px}
/* Jump the projector to any screen: the projector's own dots, numbered. */
.ln_note_jump{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 24px}
.ln_note_dot{min-width:30px;height:30px;padding:0 6px;border-radius:15px;border:1px solid var(--ln-line);background:transparent;
  color:var(--ln-dim);font:600 12px/1 roboto-medium,sans-serif;cursor:pointer}
.ln_note_dot.is-lab{border-radius:5px}
.ln_note_dot:hover{border-color:var(--secondary-light);color:var(--ink-strong)}
.ln_note_dot.is-now{border-color:var(--ln-gold);color:var(--ln-gold);box-shadow:0 0 0 1px var(--ln-gold)}
/* The notes window's remote: Back, scroll the projected page, Next. Always in reach at the bottom. */
.ln_notes_remote .ll-btn:disabled{opacity:.4;cursor:default}
.ln_notes_scroll{gap:8px}
.ln_notes_remote .ll-btn{padding:0 12px}

/* A short value in a table ("25–45", "Their screens") never wraps while a long column has room. */
.ln_table td.ln_nw{white-space:nowrap}
@media (max-width:520px){.ln_table td.ln_nw{white-space:normal}}
/* The student's own board in a table of boards (any-board): a green frame round its column, its name in green ink. */
.ln_table .is-mine{border-left:2px solid var(--ln-green);border-right:2px solid var(--ln-green)}
.ln_table th.is-mine{border-top:2px solid var(--ln-green);color:var(--dg-green-ink);font-family:roboto-medium,sans-serif}
.ln_table th.is-mine::after{content:"Your board";display:block;font:400 .78em/1.3 roboto-regular,sans-serif;color:var(--dg-green-ink)}
.ln_table tr:last-child td.is-mine{border-bottom:2px solid var(--ln-green)}

/* No orphan words (owner, video #4): a line of prose, a card, a term or a
   caption never ends on one or two words by themselves when the line
   above could give them company. Headings and labels balance their lines. */
.ln_body p,.ln_body li,.ln_body figcaption,.ln_terms li{text-wrap:pretty}
.ln_body .ln_pcard p{text-wrap:balance}
.ln_body h1,.ln_body h2,.ln_body h3,.ln_pcard h3,.ln_table th,.ln_big p{text-wrap:balance}

/* ---- 2026-10-06: projects, the teacher page, our theater's rules ---- */

/* Teacher page: two lines, one button, then folded sections (owner, video 5c: "an endless scroll"). */
.ln_teach_top{margin-bottom:6px}
.ln_folds{display:grid;gap:8px;margin:18px 0 10px}
.ln_fold{border:1px solid var(--ln-line);border-radius:10px;background:var(--ln-panel)}
.ln_fold_sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding:14px 16px 14px 40px;cursor:pointer;list-style:none;position:relative}
/* The arrow is the shared one (/ll-arrow.css), held level with the title's first line. */
.ln_fold_sum>.ll-arrow{position:absolute;left:16px;top:calc(14px + var(--ln-fs) * 1.02 * 1.35 / 2 - 5px);margin:0}
.ln_fold_sum:hover .ln_fold_t{color:var(--ln-green)}
.ln_fold_t{color:var(--ink-strong);font:700 calc(var(--ln-fs) * 1.02)/1.35 roboto-medium,sans-serif}
.ln_fold_s{flex:1 1 260px;min-width:0;color:var(--ln-dim);font:400 max(13.5px,calc(var(--ln-fs) * 0.86))/1.45 roboto-regular,sans-serif}
.ln_fold_body{padding:4px 16px 16px;border-top:1px solid var(--ln-line)}
.ln_fold_body>.ln_h3:first-child,.ln_fold_body>p:first-child{margin-top:12px}
.ln_fold .ln_classcheck{background:transparent}
.ln_slip .ln_code_big.is-long{font-size:18px;letter-spacing:.04em;overflow-wrap:anywhere}

/* The rules builder: compact ticks, grouped by place. */
.ln_rules_groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:4px 18px;margin:10px 0}
.ln_rules_h{margin:12px 0 6px;color:var(--ink-strong);font:700 calc(var(--ln-fs) * 0.8)/1.3 roboto-medium,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ln_rule_pick{display:flex;gap:9px;align-items:flex-start;padding:6px 8px;border-radius:6px;color:var(--ln-ink);font:400 max(13.5px,calc(var(--ln-fs) * 0.86))/1.4 roboto-regular,sans-serif;cursor:pointer}
.ln_rule_pick input{margin-top:3px;accent-color:var(--accent-sea-green);flex:0 0 auto}
.ln_rule_pick.is-on{background:color-mix(in srgb,var(--ln-green) 10%,transparent);color:var(--ink-strong)}
/* Tests on paper (learn.js paperPanel, renderPaper, renderSlips). */
.ln_paper_panel{margin-top:8px}
.ln_paper_panel select.ln_input{font:400 15px/1.4 roboto-regular,sans-serif;min-height:38px}
.ln_paper_rows{display:grid;gap:6px;margin:8px 0}
.ln_paper_row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ln_paper_row .is-name{flex:1 1 200px;min-width:0}
.ln_paper_row .is-score{flex:0 0 76px;width:76px}
.ln_paper_of{min-width:2ch;color:var(--ln-ink);font:400 var(--ln-fs)/1.4 roboto-regular,sans-serif}
.ln_paper_code{flex:0 1 auto;font:700 15px/1.4 'Atkinson Hyperlegible Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--ink-strong);overflow-wrap:anywhere}
.ln_paper_keylist{margin:6px 0 16px;padding-left:2.2em;columns:2 14em;column-gap:28px}
.ln_paper_keylist li{break-inside:avoid;margin:0 0 4px;color:#111}
.ln_paper_key{break-inside:auto}
.ln_slips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,3.2in),1fr));gap:0}
.ln_slip_card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px dashed #888;break-inside:avoid;color:#111;font:400 10.5pt/1.4 roboto-regular,sans-serif}
.ln_slip_card b{font:600 12pt/1.3 roboto-medium,sans-serif}
.ln_slip_card .ln_code_big{margin:4px 0;font-size:15pt}
.ln_paper_entry{margin-top:18px}
.ln_rule_own_row{display:flex;flex-wrap:wrap;gap:6px 8px;max-width:640px;margin:0 0 10px}
.ln_rule_own_row .ln_rule_own{margin:0}
.ln_rule_own_why{box-sizing:border-box;width:100%;max-width:640px;font:400 14px/1.4 roboto-regular,sans-serif;padding:6px 12px}
.ln_decoy_fold{margin:4px 0 12px;max-width:640px}
.ln_decoy_fold>summary{cursor:pointer;list-style:none;font:500 var(--ln-fs)/1.5 roboto-medium,sans-serif;color:var(--ln-ink)}
.ln_decoy_fold>summary::-webkit-details-marker{display:none}
.ln_decoy{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ln_rule_own{display:block;box-sizing:border-box;width:100%;max-width:640px;margin:0 0 6px;font:400 15px/1.4 roboto-regular,sans-serif;resize:none;overflow:hidden;min-height:38px;padding:8px 12px}
.ln_rules_status{margin:8px 0}
.ln_rules_row .ln_row{margin:8px 0 0}

/* Projects: the songs, the questions to write, the PDFs. */
.ln_songs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;margin:0 0 14px}
.ln_song{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--ln-line);border-radius:10px;background:var(--ln-panel)}
.ln_song_head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ln_song_head h3{margin:0;color:var(--ink-strong);font:700 var(--ln-fs)/1.3 roboto-medium,sans-serif}
.ln_song_len{color:var(--ln-dim);font:500 max(13.5px,calc(var(--ln-fs) * 0.86))/1.3 roboto-regular,sans-serif}
.ln_song_by{margin:0;color:var(--ln-green);font:500 max(13.5px,calc(var(--ln-fs) * 0.86))/1.3 roboto-medium,sans-serif}
.ln_song_feel{margin:0 0 4px;flex:1;color:var(--ln-ink);font:400 max(13.5px,calc(var(--ln-fs) * 0.86))/1.45 roboto-regular,sans-serif}
.ln_song audio{width:100%;height:36px}
.ln_song .ll-btn{align-self:flex-start;white-space:normal;text-align:left}
.ln_song_credit{margin:0 0 18px}
.ln_step_write{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--ln-gold);background:color-mix(in srgb,var(--ln-gold) 8%,transparent);color:var(--ln-ink)}
.ln_steps li .ln_step_write b{display:inline;color:var(--ink-strong)}
.ln_pdfs{margin-top:18px;padding-top:14px;border-top:1px solid var(--ln-line)}
@media print{.ln_print_hide{display:none !important}}

/* The notes window's practice-screen remote (video 2026-10-18 #3). */
.ln_note_steps li.is-now{font-family:roboto-medium,sans-serif;color:var(--ink-strong);background:color-mix(in srgb,var(--ln-green) 12%,transparent);border-radius:6px;padding:2px 6px;margin-left:-6px}
.ln_note_steps li.is-done{color:var(--ln-muted,var(--ln-ink))}
.ln_note_tick{color:var(--ln-green);font-family:roboto-medium,sans-serif}
.ln_note_labbtns{flex-wrap:wrap;gap:8px;margin-top:10px}
.ln_note_labbtns .ll-btn,.ln_note_toolbtns .ll-btn{white-space:normal;text-align:center;line-height:1.25;padding-top:6px;padding-bottom:6px}
/* A step in the notes is a button: the projector goes to it. Reads as the step's own words. */
.ln_note_stepgo{all:unset;display:block;text-align:left;cursor:pointer;color:inherit;font:inherit;border-radius:4px;overflow-wrap:anywhere}
.ln_note_stepgo:hover{text-decoration:underline;text-decoration-color:var(--ln-green);text-underline-offset:3px;color:var(--ink-strong)}
.ln_note_stepgo:focus-visible{outline:2px solid var(--ln-green);outline-offset:2px}
/* The tool's own buttons on the projector (GO, PLAY, Hear it...): one row per group, label then buttons, wrapping. */
.ln_note_tool{display:flex;flex-direction:column;gap:8px}
.ln_note_toolrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.ln_note_toollbl{flex:0 0 auto;min-width:96px;color:var(--ln-dim);font:600 13px/1.3 roboto-medium,sans-serif}
.ln_note_toolbtns{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
/* ---- more than one course (content/courses.js): the picker, and a course's own front page ---- */
.ln_courses{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--ln-col-wide);margin:14px auto 0;padding:0 20px;font-size:var(--ln-fs);font-family:roboto-regular,sans-serif}
.ln_course_tab{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 1 auto;padding:8px 14px 9px;border:1px solid var(--ln-line);border-radius:8px;background:var(--ln-panel);color:var(--ln-dim);text-decoration:none}
.ln_course_tab:hover{border-color:var(--secondary-light);color:var(--ink-strong)}
.ln_course_tab.is-on{border-color:color-mix(in srgb,var(--ln-green) 70%,transparent);background:color-mix(in srgb,var(--ln-green) 9%,var(--ln-panel));color:var(--ink-strong)}
.ln_course_k{font:700 11px/1.3 roboto-medium,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ln-faint)}
.ln_course_tab.is-on .ln_course_k{color:var(--ln-green)}
.ln_course_t{font:500 15px/1.3 roboto-medium,sans-serif;overflow-wrap:anywhere}
.ln_course_head{padding:10px 0 4px}
.ln_course_head .ln_row{align-items:center;margin-top:10px}
.ln_opening{padding-bottom:0}
.ln_opening .ln_h1{margin-bottom:6px}
.ln_feedback [hidden]{display:none !important}
/* The feedback box is words, not a code: the course's own font, wrapping at spaces (it borrowed the code box, mono and break-all). */
.ln_feedback .ln_fb_text{display:block;width:100%;box-sizing:border-box;margin:0 0 10px;padding:10px 12px;border-radius:6px;border:1px solid var(--ln-green);background:var(--primary-light);color:var(--ink-strong);font:400 15px/1.5 roboto-regular,sans-serif;resize:vertical;overflow-wrap:break-word;word-break:normal}
.ln_feedback .ln_fb_reply{display:block;width:100%;margin:0 0 8px}
.ln_feedback .ln_muted a{font:inherit;color:var(--ln-green)}
.ln_feedback .ln_row{align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}

/* The rules lesson: each rule, then its reason on its own line (owner, 2026-10-20). */
.ln_rule_list .ln_li{display:block}
.ln_rule_why{display:block;margin-top:2px}
.ln_rule_why_k{font-weight:600}

/* Copy buttons (every code on screen has one). Small ones sit beside a code in a row; "Copied" turns green. */
.ln_copy.is-small{min-height:28px;padding:0 10px;font-size:12px}
.ln_copy.is-copied{border-color:var(--ln-green);color:var(--ln-green)}
.ln_cert_coderow{align-items:center;gap:10px}
.ln_cert_codetext{font:700 16px/1.3 'Atkinson Hyperlegible Mono',ui-monospace,monospace;letter-spacing:.1em;color:var(--ink-strong)}
.ln_slip_card .ln_copy{align-self:flex-start}

/* Phones: a printed sheet fits the screen (it keeps paper size on a computer), and a wide table wraps instead of running off. */
@media (max-width:700px){
  .ln_paper{width:auto;max-width:100%;min-width:0;box-sizing:border-box;padding-left:18px;padding-right:18px}
  .ln_paper_desk{padding:12px 8px 28px}
  .ln_table{table-layout:fixed}
  .ln_table td,.ln_table th{overflow-wrap:anywhere}
}

/* The Home button, first at the left of every course bar: the Lab's own (toolbar.fragment.vue .home_link), copied:
   a 36px cell the height of the bar, a hairline on its right, a filled house, a soft wash under the pointer.
   (Owner, 2026-11-02: "The home button should be the exact same as this home button ... part of our theming.") */
.ln_bar .ln_brand{align-self:stretch}
.ln_bar .ln_bar_home{align-self:stretch;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;margin:0 0 0 -14px;padding:0;
  border-right:1px solid var(--primary-dark);color:inherit;text-decoration:none;cursor:pointer}
.ln_bar .ln_bar_home svg{fill:var(--secondary-lighter)}
.ln_bar .ln_bar_home:hover{background:var(--secondary-darker);text-decoration:none}

/* The course's top and bottom edge strips match its bar, not the page color (site.css, the colored line). */
:root:has(.ln_root){--ll-edge:var(--primary-light)}

/* Three looks made in the tool, on the front page: the product, not a stock photo (owner, 2026-11-02). */
.ln_lookstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.ln_lookstrip figure{margin:0;border:1px solid var(--ln-line);border-radius:10px;overflow:hidden;background:var(--ln-panel)}
.ln_lookstrip img{display:block;width:100%;height:auto;aspect-ratio:960/422;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ln_lookstrip figure:hover img{transform:scale(1.035)}
.ln_lookstrip figcaption{padding:7px 12px;color:var(--ln-faint);font:500 12.5px/1.4 roboto-regular,sans-serif;border-top:1px solid var(--ln-line)}
@media (max-width:640px){.ln_lookstrip{grid-template-columns:1fr}}