/* WIDE LAYOUT (see /wide.js). Owner, 2026-10-21: use the whole screen, not
 * the middle third; keep it adaptable to every screen size; no big blank
 * areas. Long paragraphs still stop at a readable width; everything else
 * (pictures, grids, bands, demos) uses the room.
 * Everything that changes the layout is under html.ll-wide (wide.js adds
 * it to every page; there is no narrow layout any more). */

/* ---------- home page: "Four ways in" (both layouts) ---------- */
.four_grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.four_card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:0 0 16px;transition:border-color .15s,transform .15s}
.four_card:hover{border-color:var(--green);transform:translateY(-2px)}
.four_card > span:not(.four_pic){padding:0 16px}
.four_pic{display:block;aspect-ratio:16/9;overflow:hidden;background:#000;margin-bottom:8px}
.four_pic img{width:100%;height:100%;object-fit:cover;display:block}
.four_k{font:600 11.5px/1.2 roboto-medium,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.four_card.is-course .four_k{color:var(--green)}
.four_h{font:700 19px/1.25 roboto-bold,roboto-medium,sans-serif}
.four_p{color:var(--dim);font:400 14.5px/1.55 roboto-regular,sans-serif;flex:1}
.four_go{color:var(--green);font:600 14px/1.2 roboto-medium,sans-serif;margin-top:6px}
.nav_text{background:transparent}

/* ---------- every site page with a .wrap (home, For teachers, legal, contact, 404) ---------- */
html.ll-wide{--wpad:clamp(16px,4vw,72px)}
html.ll-wide .wrap{max-width:none;padding-left:var(--wpad);padding-right:var(--wpad)}

/* ---------- home page ---------- */
@media (min-width:1000px){
  /* Hero: the words on the left, the app big on the right. */
  html.ll-wide header.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,72px);
    align-items:center;text-align:left;padding:40px 0 56px}
  html.ll-wide header.hero > *{grid-column:1}
  html.ll-wide header.hero h1{font-size:clamp(40px,3.4vw,64px)}
  html.ll-wide header.hero .tag{margin:0 0 26px;max-width:40ch;font-size:clamp(18px,1.25vw,22px)}
  html.ll-wide header.hero .cta{justify-content:flex-start}
  html.ll-wide header.hero .free{align-self:start}
  html.ll-wide header.hero .shot{grid-column:2;grid-row:1 / -1;margin:0;box-shadow:0 30px 80px rgba(0,0,0,.35)}
  /* The words sit together in the middle, beside the picture, not spread down its height. */
  html.ll-wide header.hero{grid-template-rows:1fr repeat(4,auto) 1fr}
  html.ll-wide header.hero h1{grid-row:2}
  html.ll-wide header.hero .tag{grid-row:3}
  html.ll-wide header.hero .cta{grid-row:4;margin-bottom:12px}
  html.ll-wide header.hero .free{grid-row:5}
}
/* Sections run edge to edge; every other one is a band of color. */
html.ll-wide main > section{margin-left:calc(-1 * var(--wpad));margin-right:calc(-1 * var(--wpad));
  padding:clamp(34px,3.8vw,56px) var(--wpad)}
html.ll-wide main > section:nth-of-type(even){background:var(--panel)}
html.ll-wide main > section:nth-of-type(even) .card,html.ll-wide main > section:nth-of-type(even) .four_card{background:var(--page,var(--bg))}
html.ll-wide main > section > h2{font-size:clamp(26px,2vw,34px)}
html.ll-wide main > section > .lede{max-width:70ch}
html.ll-wide main .grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
@media (min-width:1300px){
  html.ll-wide .four_grid{grid-template-columns:repeat(3,1fr)}
  html.ll-wide main .grid:not(:has(.tool_card)){grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1700px){html.ll-wide main .grid:not(:has(.tool_card)){grid-template-columns:repeat(6,1fr)}}
/* Picture-and-words rows sit side by side, the picture getting the room. */
@media (min-width:900px){
  html.ll-wide main .split{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,3vw,56px);align-items:center}
  html.ll-wide main .split:has(> figure + figure){grid-template-columns:1fr 1fr;align-items:start}
  html.ll-wide #course .split{align-items:start}
  /* The two tools: half the width each, not two small cards and an empty half. */
  html.ll-wide main .grid:has(.tool_card){grid-template-columns:1fr 1fr}
}
/* The two live demos: the whole width, but never taller than the screen. */
html.ll-wide main .pcx{max-width:min(100%,calc((100vh - 140px) * 16 / 9));margin-left:auto;margin-right:auto}
/* Owner, 2026-10-24: "The Open the Console buttons are pretty messed up."
   A block made the button's words sit in its top-left corner, and it beat
   the phone rule that hides it; it stays the flex button the home page
   draws, just as wide as the demo above it. */
html.ll-wide main .pcx_open{display:flex;max-width:min(100%,calc((100vh - 140px) * 16 / 9));margin-left:auto;margin-right:auto;box-sizing:border-box}
html.ll-wide.is-phone main .pcx_open{display:none}
/* Questions (owner, 2026-11-02: "this edge doesn't line up", "I don't love this look when I open one", "some cooler
   animations than just opening"): ONE column of cards, all the same width, so nothing can sit higher or lower than
   its neighbor. The heading sits to the left, held in view. Opening is animated by /motion.js (height + fade);
   the open card takes the app's green on its edge. */
#faq .faq_side{display:none}
@media (min-width:900px){
  html.ll-wide #faq{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr);column-gap:clamp(32px,4vw,72px);align-items:start}
  html.ll-wide #faq > h2{grid-column:1;grid-row:1 / span 20;align-self:start;position:sticky;top:20px}
  html.ll-wide #faq > .faq_side{display:block;grid-column:1;grid-row:1 / span 20;align-self:start;position:sticky;top:20px;margin:clamp(48px,3.4vw,62px) 0 0;color:var(--dim);font:400 15px/1.6 roboto-regular,sans-serif;max-width:30ch}
  html.ll-wide #faq > .faq_side .ll-btn{margin-top:14px}
  html.ll-wide #faq > details{grid-column:2}
}
html.ll-wide #faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0;margin:0 0 10px;overflow:hidden;
  transition:border-color .2s,background-color .2s,box-shadow .25s}
html.ll-wide #faq details:hover{border-color:var(--secondary-light-alt)}
html.ll-wide #faq details[open]{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green),0 8px 24px rgba(0,0,0,.12)}
html.ll-wide #faq summary{padding:15px 18px;cursor:pointer}
html.ll-wide #faq details > p{margin:0;padding:0 18px 4px 37px}
html.ll-wide #faq details > p:last-child{padding-bottom:16px}
html.ll-wide #faq details > p + p{margin-top:8px}
html.ll-wide #faq:nth-of-type(even) details{background:var(--page,var(--bg))}
/* The site pages' footer only: on the course this made the bar along the
   bottom 93px tall, under the outline, half hiding the Back button. */
html.ll-wide .wrap footer{padding-top:28px;padding-bottom:28px}

/* ---------- For teachers, legal, contact (the .wrap pages with prose) ---------- */
@media (min-width:1000px){
  /* Each section: its heading on the left, the text beside it. */
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main > section:has(> h2:not(.sr_only)){display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);column-gap:clamp(32px,4vw,72px);align-items:start}
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main > section:has(> h2:not(.sr_only)) > *{grid-column:2;max-width:80ch}
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main > section:has(> h2:not(.sr_only)) > :is(ul,dl){max-width:none}
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main > section:has(> h2:not(.sr_only)) > h2{grid-column:1;grid-row:1 / span 40;position:sticky;top:20px}
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main > section ul{columns:2;column-gap:40px}
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main > section li{break-inside:avoid}
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > header:not(:has(> .wide_shot)){max-width:80ch}
}
/* For teachers: the header beside a picture of the tool, like the home page. */
.wide_shot{display:none}
@media (min-width:1000px){
  html.ll-wide body .wrap > header:has(> .wide_shot){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,4vw,72px);
    align-items:center;max-width:none}
  html.ll-wide .wrap > header:has(> .wide_shot) > *{grid-column:1}
  html.ll-wide .wrap > header:has(> .wide_shot) > h1{font-size:clamp(34px,2.6vw,52px)}
  html.ll-wide body .wrap > header:has(> .wide_shot){grid-template-rows:1fr repeat(4,auto) 1fr}
  html.ll-wide .wrap > header:has(> .wide_shot) > .kicker{grid-row:2}
  html.ll-wide .wrap > header:has(> .wide_shot) > h1{grid-row:3}
  html.ll-wide .wrap > header:has(> .wide_shot) > .lede{grid-row:4}
  html.ll-wide .wrap > header:has(> .wide_shot) > .meta,html.ll-wide .wrap > header:has(> .wide_shot) > .cta{grid-row:5}
  html.ll-wide .wrap > header > .wide_shot{display:block;grid-column:2;grid-row:1 / -1;width:100%;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
  /* Questions: each question beside its answer, a row apiece. */
  html.ll-wide main dl{display:grid;grid-template-columns:minmax(180px,2fr) minmax(0,5fr);gap:0 32px;max-width:none}
  html.ll-wide main dl > dt{grid-column:1;margin:0;padding:12px 0;border-top:1px solid var(--line)}
  html.ll-wide main dl > dd{grid-column:2;margin:0;padding:12px 0;border-top:1px solid var(--line)}
}
/* The contact form: the two columns it already has, given room. */
html.ll-wide form .two{gap:24px}

/* ---------- the course (/learn and the sound course) ----------
 * What the wide course sites do (Khan Academy, Coursera, Udemy, LearnDash's
 * lesson layouts): the lesson's outline down the left, the screen itself in
 * the rest. Codecademy splits "the instructions" from "the workspace"; our
 * hands-on screens already do that, so they are left alone.
 *
 * Owner, 2026-10-24: "I don't like all of the blank space. It still feels
 * like we just scooted the centered thing over a little ... some lessons
 * take up a lot of space, which is nice, and then there are some that take
 * up far, far less." So every kind of screen gets its own wide layout:
 *   - a screen with a picture or a drawing: the words on the left, the
 *     picture BIG on the right (as tall as the room allows), held in view;
 *   - a screen of tiles, tables or term lists: the grid runs the whole width;
 *   - a screen of words only: one readable column;
 * and then learn.js (fitToRoom) grows the whole screen's type, one size for
 * all of it, until a short screen fills the room instead of floating in it. */
.ln_outline{display:none}
.ln_outline_toggle{display:none}
html.ll-wide{--ln-fs:clamp(16px,0.62vw + 8.5px,23px);--olw:clamp(250px,16vw,320px)}
html.ll-wide .ln_col.is-wide{max-width:min(1800px,100%);padding-left:var(--wpad);padding-right:var(--wpad)}
@media (min-width:1200px){
  html.ll-wide:not(.present) .ln_outline{display:flex;flex-direction:column;gap:6px;position:fixed;z-index:2;left:0;
    top:var(--ln-bar);bottom:var(--ln-foot);width:var(--olw);box-sizing:border-box;overflow:auto;padding:22px 14px 18px 22px;
    border-right:1px solid var(--ln-line);background:var(--primary-light);font:400 15px/1.35 roboto-regular,sans-serif}
  html.ll-wide:not(.present):not(.ln-full) .ln_body:has(> .ln_outline){padding-left:var(--olw)}
  html.ll-wide:not(.present) .ln_body:has(> .ln_outline){display:flex;flex-direction:column;justify-content:safe center}
  html.ll-wide .ln_body:has(> .ln_outline) > *{flex:none}
  /* An auto margin in a flex column shrinks the column to its words: THE
     reason screens looked like the old centered column nudged right. */
  html.ll-wide .ln_body:has(> .ln_outline) > .ln_col{width:100%;box-sizing:border-box}
  /* A lesson's opening picture sits at the top, big, never mid-page. */
  html.ll-wide .ln_body:has(> .ln_outline):has(> .ln_hero_img){justify-content:flex-start}
  html.ll-wide .ln_body:has(> .ln_outline) > .ln_hero_img{height:min(46vh,30vw);max-height:none}
  .ln_outline .ln_kicker{margin:10px 0 0;font-size:11.5px}
  .ln_outline_back,.ln_outline_next{color:var(--ln-green);text-decoration:none;font:500 14px/1.35 roboto-medium,sans-serif}
  .ln_outline_back:hover,.ln_outline_next:hover{text-decoration:underline}
  .ln_outline_title{margin:0 0 6px;color:var(--ink-strong);font:700 19px/1.25 roboto-bold,roboto-medium,sans-serif}
  .ln_outline_list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:2px}
  .ln_outline_list button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;
    background:transparent;color:var(--ln-ink);font:400 15px/1.35 roboto-regular,sans-serif;cursor:pointer}
  .ln_outline_list button:hover{background:var(--ln-panel)}
  .ln_outline_n{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--ln-faint);
    color:var(--ln-dim);font:600 11.5px/1 roboto-medium,sans-serif}
  .ln_outline_list li.is-lab .ln_outline_n{border-radius:5px}
  .ln_outline_list li.is-done .ln_outline_n{background:var(--ln-green);border-color:var(--ln-green);color:#fff}
  .ln_outline_list li.is-now button{background:var(--ln-panel);color:var(--ink-strong);font-family:roboto-medium,sans-serif;font-weight:600;
    box-shadow:inset 3px 0 0 var(--ln-green)}
  .ln_outline_next{margin-top:auto;padding-top:12px;border-top:1px solid var(--ln-line)}
  /* THE OUTLINE'S HIDE ARROW (owner, 2026-10-24: "just a little arrow to
     hide the lessons on the lessons panel"). Top right of the outline;
     folded, the outline is a thin strip holding only the arrow back. */
  html.ll-wide:not(.present) .ln_outline_toggle{display:grid;place-items:center;position:absolute;top:14px;right:8px;width:28px;height:28px;
    padding:0;border:1px solid transparent;border-radius:6px;background:none;color:var(--ln-dim);cursor:pointer}
  .ln_outline_toggle:hover{background:var(--ln-panel);color:var(--ink-strong)}
  .ln_outline_toggle:focus-visible{outline:2px solid var(--accent-sea-green);outline-offset:1px}
  .ln_outline_toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html.ll-wide:not(.present).ln-full .ln_outline{width:44px;padding:0;overflow:hidden}
  html.ll-wide:not(.present).ln-full .ln_outline > :not(.ln_outline_toggle){display:none}
  html.ll-wide:not(.present).ln-full .ln_outline_toggle{right:7px}
  html.ll-wide:not(.present).ln-full .ln_body:has(> .ln_outline){padding-left:44px}
}
@media (min-width:1100px){
  html.ll-wide .ln_col:not(.is-wide){max-width:min(1600px,100%);padding-left:var(--wpad);padding-right:var(--wpad)}
  /* A reading screen with a picture (or a drawing, when nothing else on
     it is side by side): words on the left, the picture on the right, as
     big as the room allows, held in view. */
  html.ll-wide .ln_col:is(:has(> .ln_fig),:has(> .ln_diagram):not(:has(.ln_two,.ln_compare))){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    grid-template-rows:repeat(39,min-content) 1fr;column-gap:clamp(28px,3vw,64px);align-content:start;align-items:start}
  html.ll-wide .ln_col:is(:has(> .ln_fig),:has(> .ln_diagram):not(:has(.ln_two,.ln_compare))) > *{grid-column:1;min-width:0}
  html.ll-wide .ln_col:has(> .ln_fig) > .ln_fig:first-of-type,
  html.ll-wide .ln_col:not(:has(> .ln_fig)):has(> .ln_diagram):not(:has(.ln_two,.ln_compare)) > .ln_diagram:first-of-type{
    grid-column:2;grid-row:1 / -1;align-self:start;position:sticky;top:20px;margin-top:0}
  html.ll-wide .ln_col > .ln_fig:first-of-type img,html.ll-wide .ln_col > .ln_fig.is-photo:first-of-type img{
    height:auto;max-height:calc(100dvh - var(--ln-bar) - var(--ln-foot) - 110px)}
  html.ll-wide .ln_col:not(:has(> .ln_fig)):not(:has(.ln_two,.ln_compare)) > .ln_diagram:first-of-type svg{max-height:calc(100dvh - var(--ln-bar) - var(--ln-foot) - 150px)}
  /* A screen with only words: tiles, tables and term lists run the whole
     width; paragraphs keep a readable line. */
  html.ll-wide .ln_body:has(> .ln_outline) > .ln_col:not(:has(img,svg,figure,iframe,.ln_two)){max-width:min(1500px,100%)}
  html.ll-wide .ln_body:has(> .ln_outline) > .ln_col:not(:has(img,svg,figure,iframe,.ln_two,.ln_stats,.ln_cards,.ln_terms,.ln_table,.ln_tiles,.ln_grid,.ln_choices,.ln_big)){max-width:min(calc(80ch + 2 * var(--wpad)),100%)}
  html.ll-wide .ln_body:has(> .ln_outline) > .ln_col > :is(.ln_p,.ln_lede,.ln_ul,.ln_ol,.ln_callout,.ln_steps){max-width:80ch}
  /* Picture beside words: the picture gets the bigger half and a gap. */
  html.ll-wide .ln_two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,2.5vw,48px)}
  html.ll-wide .ln_two .ln_fig img,html.ll-wide .ln_two .ln_fig.is-photo img{height:auto;max-height:min(560px,52vh)}
  /* Quiz: bigger question, answers in two columns. */
  html.ll-wide .ln_q{font-size:1.25em;max-width:none}
  html.ll-wide .ln_choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  html.ll-wide .ln_choices .ln_choice{margin:0;width:auto}
  /* Glossary: words in columns instead of one long list. */
  html.ll-wide .ln_terms,html.ll-wide .ln_terms.is-two{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));max-width:none}
  /* Teacher page: the folded sections two by two; an open one takes the row. */
  html.ll-wide .ln_teach{max-width:min(1600px,100%)}
  html.ll-wide .ln_folds{grid-template-columns:1fr 1fr;align-items:start}
  html.ll-wide .ln_folds > .ln_fold[open]{grid-column:1 / -1}
  html.ll-wide .ln_folds > .ln_fold:not([open]):last-child:nth-child(odd){grid-column:1 / -1}
}
/* Big screens: tiles and paths fill whole rows (grid.js --cols-xl). */
@media (min-width:1600px){
  html.ll-wide :is(.ln_grid,.ln_tiles,.ln_grid.is-paths){grid-template-columns:repeat(var(--cols-xl,var(--cols-wide,4)),1fr)}
}

/* The certificate page: the words and the name box on the left, the sheet big beside them (screen only; paper keeps its own look).
   A locked one has its sample sheet held in view while the list of what is left scrolls beside it. */
@media screen and (min-width:1200px){
  html.ll-wide .ln_cert_page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:clamp(28px,3vw,64px);align-items:start;grid-template-rows:repeat(39,min-content) 1fr}
  html.ll-wide .ln_cert_page > *{grid-column:1 / -1}
  html.ll-wide .ln_cert_page > .ln_noprint:first-child{grid-column:1;grid-row:1}
  html.ll-wide .ln_cert_page > .ln_cert_sheet:not(.is-locked){grid-column:2;grid-row:1;margin:0}
  html.ll-wide .ln_cert_page:has(> .is-locked) > *{grid-column:1}
  html.ll-wide .ln_cert_page > .ln_cert_sheet.is-locked{grid-column:2;grid-row:1 / -1;position:sticky;top:20px;margin:0;max-width:none}
  html.ll-wide .ln_cert_page .ln_cert_progress{max-width:none}
}

/* ---------- contact: the words on the left, the form on the right ---------- */
@media (min-width:1000px){
  html.ll-wide .wrap:has(#contact){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:clamp(32px,5vw,96px);align-items:start}
  html.ll-wide .wrap:has(#contact) > *{grid-column:1 / -1}
  html.ll-wide .wrap:has(#contact) > header{grid-column:1;grid-row:2;position:sticky;top:20px}
  html.ll-wide .wrap:has(#contact) > main{grid-column:2;grid-row:2}
}

/* Prose pages: on a big screen the small print grows a little too. */
@media (min-width:1000px){
  html.ll-wide body:not(:has(header.hero)):not(.ft) .wrap > main :is(p,li){font-size:clamp(15px,0.95vw,18px);line-height:1.6}
}

/* ---------- phones: the floating bar (see /wide.js) ----------
 * Owner 2026-10-23: "I really like the concept of a floating bar, but the
 * execution of it is poor." So it FLOATS: a rounded capsule held off the
 * screen's edges, frosted over the page, the page you're on lit, and it
 * slips away while you scroll down and comes back the moment you scroll up
 * (the way phone apps and big sites do it), so it never sits on the words
 * you are reading. */
.ll_mbar{display:none}
@media (max-width:700px){
  html.ll-wide .ll_mbar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:fixed;z-index:60;
    left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:6px;border-radius:22px;
    background:color-mix(in srgb,var(--primary-light,#141a13) 88%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
    border:1px solid color-mix(in srgb,var(--ink-strong,#e8ece9) 12%,transparent);
    box-shadow:0 12px 32px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.18);
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
  html.ll-wide .ll_mbar.is-away{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
  html.ll-wide .ll_mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;
    border-radius:16px;text-decoration:none;color:var(--secondary-lighter,#b8c2bc);font:500 11.5px/1 roboto-medium,sans-serif;
    letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,transform .1s}
  html.ll-wide .ll_mbar a:active{transform:scale(.94)}
  html.ll-wide .ll_mbar a[aria-current]{color:var(--accent-sea-green,#2e9557);
    background:color-mix(in srgb,var(--accent-sea-green,#2e9557) 16%,transparent)}
  html.ll-wide .ll_mbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html.ll-wide.has-mbar body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  /* The bar does the links' job on a phone. */
  html.ll-wide.has-mbar .nav_links{display:none}
}
/* The course on a phone (owner, 2026-10-24: "there is a lot of text" and
   "a bunch of weird formatting stuff on the phone"). The phone page lists
   every lesson: here just its name and time, in tight rows; the floating
   bar gets you home; the course bar is one line; the progress box says its
   "nothing saves by itself" once, not twice. */
@media (max-width:700px){
  html.ll-wide .ln_plainlist{gap:0;border:1px solid var(--ln-line);border-radius:10px;overflow:hidden;background:var(--ln-panel)}
  html.ll-wide .ln_plainlist li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border:0;border-radius:0;
    background:transparent;padding:10px 14px}
  html.ll-wide .ln_plainlist li + li{border-top:1px solid var(--ln-line)}
  html.ll-wide .ln_plainlist .ln_sum{display:none}
  html.ll-wide .ln_plainlist b{margin:0;font-weight:500;font-family:roboto-regular,sans-serif}
  html.ll-wide .ln_plainlist .ln_min{flex:none;color:var(--ln-dim);font-size:.85em;white-space:nowrap}
  html.ll-wide .ln_plainlist .ln_dot{display:none}
  html.ll-wide .ln_phone_dup{display:none}
  /* One line: Home, the name, Feedback. The projector buttons (Teacher notes, Print) are for a computer. */
  html.ll-wide .ln_bar{flex-wrap:nowrap;padding-top:0;padding-bottom:0;gap:8px}
  html.ll-wide .ln_bar_right .ll-btn:not(.ln_bar_save):not(.ln_bar_feedback){display:none}
  html.ll-wide .ln_bar_title{display:none}
  html.ll-wide .ln_brand{gap:8px;min-width:0}
  html.ll-wide .ln_brand a,html.ll-wide .ln_brand a.ln_brand_chip{letter-spacing:.14em;font-size:14px}
  html.ll-wide .ln_brand_chip{gap:8px}
  /* The Home button needs the room the Beta tag took (the tag is on the home page and the tool). */
  html.ll-wide .ln_brand .beta_chip{display:none}
  html.ll-wide .ln_bar_right{margin-left:auto;flex-wrap:nowrap}
  /* A projector mode on a phone screen: never used, and it pushed the bar onto two lines. */
  html.ll-wide .ln_present_btn{display:none}
  /* A printable page has more buttons (Print, the answer key, Back): they wrap instead of running off the screen. */
  html.ll-wide:has(.ln_body.is-print) .ln_bar,html.ll-wide:has(.ln_body.is-print) .ln_bar_right{flex-wrap:wrap;row-gap:4px}
  html.ll-wide.has-mbar .ln_body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  html.ll-wide.has-mbar body.learn{padding-bottom:0}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){html.ll-wide .ll_mbar{transition:none}}
@media print{.ll_mbar{display:none !important}}

/* ---------- For teachers: fewer, fuller sections, pictures of Limelight itself ---------- */
html.ll-wide .ft .wrap > header{max-width:none}
html.ll-wide .ft header .cta{margin:22px 0 0;display:flex;gap:12px;flex-wrap:wrap}
html.ll-wide .ft header .lede{max-width:52ch}
.ft main > section > h2{margin-bottom:18px}
.teach_list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.teach_list li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:9px;padding:12px 16px;
  color:var(--dim);font:400 15.5px/1.55 roboto-regular,sans-serif;transition:translate .2s,border-color .2s}
.teach_list li:hover{translate:4px 0;border-color:var(--green)}
.teach_list strong{color:var(--ink-strong);font-family:roboto-medium,sans-serif}
html.ll-wide main > section:nth-of-type(even) .teach_list li{background:var(--page,var(--bg))}
.teach_shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.teach_shots figure{margin:0}
.teach_shots img{display:block;width:100%;aspect-ratio:960/422;object-fit:cover}
.ft main figure img{width:100%;display:block}
@media (max-width:560px){.teach_shots{grid-template-columns:1fr}}
@media (min-width:900px){html.ll-wide .ft main #practice .split{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start}}
@media (min-width:900px){html.ll-wide .ft main #course .split{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center}}
/* For teachers has no inline style block like the home page: it borrows the home page's tokens and card, grid, split and figure looks. */
.ft{--bg:var(--primary-dark);--panel:var(--card);--line:var(--primary-lighter-alt);--dim:var(--secondary-lighter);--faint:var(--secondary-light-alt);--green:var(--accent-sea-green)}
.ft main > section{padding:46px 0;border-top:1px solid var(--line)}
.ft main h2{font:700 26px/1.25 roboto-bold,roboto-medium,sans-serif}
.ft .lede{color:var(--dim);font:400 16px/1.65 roboto-regular,sans-serif;margin:0 0 14px}
.ft .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ft .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.ft .card h3{font:700 16px/1.35 roboto-medium,sans-serif;margin:0 0 6px;color:var(--green)}
.ft .card p{color:var(--dim);font:400 14.5px/1.6 roboto-regular,sans-serif;margin:0}
.ft .split{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.ft figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.ft figcaption{padding:8px 12px;color:var(--faint);font:500 12.5px/1.5 roboto-regular,sans-serif;border-top:1px solid var(--line)}
.ft main section > h2{margin:0 0 18px}
.ft img{height:auto}
html.ll-wide .ft .wrap > header{padding:20px 0 36px}
@media (max-width:999px){.ft .wrap > header{padding:18px 0 28px}}