/*  V947 --- THE LANGUAGE LAB.

    A FILE AND NOT A <style> BLOCK, and the reason is sitting one release back:
    todo.html carries 772 lines of inline CSS, is 274 lines over its own ceiling
    because of it, and re-sends every one of those lines on every page load. A
    stylesheet is cached, minified and gzipped; an inline block is none of the
    three. Kids Zone already works this way.

    EVERY COLOUR COMES FROM A SITE TOKEN. Not one hex value for text or
    background is written here, which is what stops this tool being the next one
    to fail the contrast guard on the light theme -- the fault found across Kids
    Zone and To-Do in V945, both of which had their own hand-picked palette.

    FIELDS GO THROUGH --fld-fs. A field under 16px makes iOS zoom the page on
    tap; the switch gives 13.5px on a laptop and 16px on a touch screen, which
    is his 02-Oct ruling and is one token rather than a media query here. */

/*  A SIDE GUTTER, because this page does not get one from the shell. Measured:
    the root sat at x=0 with 0px to the right edge at 390px wide, so the
    household board's number was flush against the glass and the module cards
    were touching both edges. 16px, which is what the rest of the site uses. */
#ll-root{max-width:720px;margin:0 auto;padding:0 16px 28px}
#ll-root *{box-sizing:border-box}

/* ---------------------------------------------------------------- the top */
/*  A GRID, SO THE RING AND THE GEAR CANNOT BE PUSHED OFF and the pills have
    somewhere to go. The first cut scrolled the language row sideways, which
    was fine with three languages and wrong with four: on his phone the fourth
    pill sat half-hidden under the ring with no hint that it was scrollable, so
    the row read as broken rather than as scrollable. Pills WRAP now -- two
    short lines show everything, and nothing is hidden behind an affordance
    nobody can see. */
.ll-top{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:10px;margin:4px 0 14px}
.ll-langs{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.ll-lang{border:1px solid var(--line2);background:var(--btn);color:var(--text);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:800;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.ll-lang.ll-on{background:var(--accent);border-color:transparent;color:#06243c}
.ll-ic{border:1px solid var(--line2);background:var(--btn);color:var(--text);
  width:38px;height:38px;border-radius:11px;font-size:17px;cursor:pointer;
  flex:0 0 auto;display:grid;place-items:center}

/*  The ring is the day, against the target he set. No streak anywhere in this
    file, which is the point: a ring that resets every midnight asks for today
    and makes no claim about yesterday. */
.ll-ring{position:relative;width:38px;height:38px;flex:0 0 auto}
.ll-ring svg{transform:rotate(-90deg)}
.ll-rbg,.ll-rfg{fill:none;stroke-width:3}
.ll-rbg{stroke:var(--line2)}
.ll-rfg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:97.4;
  stroke-dashoffset:97.4;transition:stroke-dashoffset .4s ease}
.ll-ring b{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:900;color:var(--text)}

/* --------------------------------------------------------------- the tabs */
.ll-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line2);
  margin-bottom:14px;scrollbar-width:none}
.ll-tabs::-webkit-scrollbar{display:none}
/*  THE FIVE TAB LABELS WERE SHORTENED AT V950, not squeezed. "Polish my
    writing", "Household" and "Recordings" came to 514px of tabs in a 320px
    phone, so two of them were simply off the screen behind a scroller with no
    visible edge. The screen HEADINGS keep the longer wording, which is where
    there is room to say it properly. */
.ll-tab{border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;
  font-weight:800;padding:9px 11px;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;flex:0 0 auto}
.ll-tab.ll-on{color:var(--text);border-bottom-color:var(--accent)}

/* ------------------------------------------------------------- the pieces */
.ll-h{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
.ll-h:first-child{margin-top:0}
.ll-sub{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 12px}
.ll-fine{color:var(--muted);font-size:12px;line-height:1.55;margin-top:14px}
.ll-go{border:1px solid transparent;background:var(--accent);color:#06243c;
  border-radius:11px;padding:11px 16px;font:inherit;font-size:14.5px;
  font-weight:800;cursor:pointer}
.ll-go:disabled{opacity:.5;cursor:default}
.ll-quit{display:block;margin:14px auto 0;border:0;background:none;
  color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;
  cursor:pointer}
.ll-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.ll-stats{color:var(--muted);font-size:12.5px}

/* --------------------------------------------------------------- the sets */
.ll-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:9px;margin-bottom:13px}
/*  display:block IS LOAD-BEARING, and leaving it out was the bug he reported
    from his phone. Something site-wide gives a <button> `display:flex`, so
    these three block children -- the name, the "0 of 12 learnt" line and the
    progress bar -- were laid out as three columns in a ROW: the name wrapped
    to two lines in a 70px column with the count squeezed beside it. The same
    family of fault as V943's 526px checkbox, which was a site-wide
    `width:100%` winning over a rule that never set a width. A tool that does
    not state its own display inherits whatever the site decides a button is.
    Found by measuring getComputedStyle(.ll-mod).display, not by reading. */
.ll-mod{display:block;text-align:left;border:1px solid var(--line2);
  background:var(--panel);border-radius:13px;padding:12px 13px;font:inherit;
  color:var(--text);cursor:pointer}
.ll-mod b{display:block;font-size:14px;margin-bottom:3px}
.ll-mod span{display:block;color:var(--muted);font-size:11.5px}
/*  THE TRACK IS --btn, NOT --line2. Rendered on the forest theme, --line2 is
    a mid-green that reads as a FULL bar -- every module looked finished
    before a single card had been answered. Found by looking at the screen;
    no measurement would have caught it. */
.ll-mbar{height:4px;border-radius:99px;background:var(--btn);margin-top:8px;
  overflow:hidden}
.ll-mbar i{display:block;height:100%;background:var(--accent)}

/* -------------------------------------------------------------- the card */
.ll-pbar{height:4px;border-radius:99px;background:var(--btn);overflow:hidden;
  margin-bottom:14px}
.ll-pbar i{display:block;height:100%;width:0;background:var(--accent);
  transition:width .25s ease}
.ll-card{border:1px solid var(--line2);background:var(--panel);border-radius:16px;
  padding:22px 18px;text-align:center}
.ll-kind{font-size:11.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
/*  The phrase. Big, because on a phone the thing you are learning should be the
    only thing you can see. */
.ll-q{font-size:27px;font-weight:800;line-height:1.3;word-break:break-word}
.ll-q.ll-cjk{font-size:40px;line-height:1.25}
/*  V949 -- ARABIC. Two things the Latin sizing gets wrong.
    FIRST, THE DOTS AND THE MARKS BELOW THE LINE. Arabic letters carry dots
    under them and the tashkeel sits further down again; at 1.3 line-height
    the descenders of one line touch the next, which is why Arabic typography
    is conventionally set looser than Latin.
    SECOND, IT IS SMALLER AT THE SAME POINT SIZE -- the letterforms are lighter
    and the distinguishing marks are tiny, so 27px of Arabic is harder to read
    than 27px of French. Both measured against the rendered page rather than
    taken from a rule of thumb. */
.ll-q.ll-rtl{font-size:31px;line-height:1.75}
#ll-root [dir="rtl"]{text-align:right}
#ll-root .ll-card [dir="rtl"].ll-q{text-align:center}
/*  The typing box: right-aligned so the caret starts where the writing does.
    An Arabic field that starts the caret on the left is one where the first
    letter appears to jump across the box. */
#ll-root .ll-in[dir="rtl"]{text-align:right;direction:rtl}
.ll-rom{color:var(--muted);font-size:14px;margin-top:6px;min-height:19px}
.ll-say{margin-top:13px;border:1px solid var(--line2);background:var(--btn);
  color:var(--text);border-radius:999px;padding:8px 17px;font:inherit;
  font-size:13.5px;font-weight:800;cursor:pointer}
.ll-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}
.ll-opt{border:1px solid var(--line2);background:var(--btn);color:var(--text);
  border-radius:11px;padding:13px 11px;font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;min-height:52px;line-height:1.35}
/*  RIGHT AND WRONG DIFFER BY MORE THAN COLOUR -- a tick and a cross as well as
    green and red. The site's contrast guard measures these, and the tokens are
    the site's own so they are correct on all six themes rather than on the one
    this was written against. */
.ll-opt.ll-yes{border-color:var(--good);color:var(--good);font-weight:800}
.ll-opt.ll-no{border-color:var(--bad);color:var(--bad)}
.ll-opt:disabled{cursor:default}
.ll-in{width:100%;margin-top:16px;border:1px solid var(--line2);
  background:var(--btn);color:var(--text);border-radius:11px;padding:12px 13px;
  font:inherit;font-size:var(--fld-fs,15px);text-align:center}
.ll-ans{margin-top:15px;font-size:15px;font-weight:700;line-height:1.45}
.ll-ans.ll-yes{color:var(--good)}
.ll-ans.ll-no{color:var(--bad)}
.ll-note2{margin-top:9px;color:var(--muted);font-size:13px;line-height:1.55;
  text-align:left;border-top:1px solid var(--line2);padding-top:11px}
.ll-card .ll-go{margin-top:15px}
.ll-big{font-size:21px;font-weight:800;text-align:center;margin-top:24px}
.ll-done .ll-sub,.ll-sub.ll-mid{text-align:center}

/* ------------------------------------------------------------- the polish */
#ll-text{width:100%;border:1px solid var(--line2);background:var(--btn);
  color:var(--text);border-radius:12px;padding:12px 13px;font:inherit;
  font-size:var(--fld-fs,14px);line-height:1.6;resize:vertical}
.ll-n{border:1px solid var(--line2);border-radius:12px;padding:11px 13px;
  margin-top:9px;background:var(--panel)}
/*  TWO FAMILIES, KEPT APART. Mixed together they read as one wall of nagging:
    a person will fix four errors and apply none of forty suggestions. */
.ll-n.fix{border-left:3px solid var(--bad)}
.ll-n.tighten{border-left:3px solid var(--warn,#e0a020)}
.ll-nk{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted)}
.ll-nt{font-weight:800;font-size:14px;margin:3px 0 4px;word-break:break-word}
.ll-nw{color:var(--muted);font-size:13px;line-height:1.55}
.ll-ns{margin-top:6px;font-size:13.5px}
.ll-ns b{color:var(--good)}
.ll-clean{text-align:center;color:var(--muted);font-size:14px;padding:22px 0}

/* ----------------------------------------------------------- the progress */
/*  THE TWO CHARTS SIT IN A PANEL, and that is a fix rather than decoration.
    The first cut drew the tracks in --btn straight onto the page: on the forest
    theme --btn and the page background are the same colour, so the charts were
    INVISIBLE -- seven labels under seven bars nobody could see. Seen by looking
    at the rendered screen. A panel behind them makes --line2 a track again
    (which is what it is for) without the 4px progress bars above reading as
    full, which is why those keep --btn. */
.ll-chart{background:var(--panel);border:1px solid var(--line2);
  border-radius:13px;padding:13px 13px 10px}
/*  align-items:STRETCH, and the first cut had flex-end. With flex-end each
    column shrinks to its label, so the bar inside it -- flex:1 1 auto with
    nothing to grow into -- measured ZERO PIXELS HIGH. Seven labels under
    seven invisible bars, on a screen whose entire job is the chart. Measured
    off the rendered page, not reasoned about; every inline height was
    correct and the container was nought. */
.ll-week{display:flex;gap:6px;align-items:stretch;height:84px}
.ll-d{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:0}
.ll-dbar{width:100%;border-radius:5px 5px 0 0;background:var(--line2);
  position:relative;flex:1 1 auto;display:flex;align-items:flex-end;
  overflow:hidden}
.ll-dbar i{display:block;width:100%;background:var(--accent)}
.ll-d.ll-hit .ll-dbar i{background:var(--good)}
.ll-dl{font-size:10.5px;color:var(--muted);font-weight:800}
.ll-boxes{display:flex;gap:5px;align-items:stretch;height:66px}
.ll-b{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.ll-bbar{width:100%;flex:1 1 auto;display:flex;align-items:flex-end;
  background:var(--line2);border-radius:5px 5px 0 0;overflow:hidden}
.ll-bbar i{display:block;width:100%;background:var(--accent)}
.ll-bl{font-size:10px;color:var(--muted);font-weight:800}
.ll-w{display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);
  padding:9px 0;font-size:14px}
.ll-w b{flex:0 0 auto}
.ll-w span{color:var(--muted);font-size:12.5px;margin-left:auto;white-space:nowrap}

/* -------------------------------------------------------------- the board */
.ll-br{display:flex;align-items:center;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.ll-br:last-child{border-bottom:none}
.ll-br b{flex:1 1 auto;min-width:0;font-weight:700}
.ll-br.me b{font-weight:900}
.ll-br i{font-style:normal;font-weight:900;color:var(--accent)}
.ll-rank{width:22px;color:var(--muted);font-size:12.5px;font-weight:800;
  flex:0 0 auto}

/* --------------------------------------------------------- the recordings */
.ll-sel{width:100%;margin-bottom:11px;border:1px solid var(--line2);
  background:var(--btn);color:var(--text);border-radius:10px;padding:10px 11px;
  font:inherit;font-size:var(--fld-fs,14px)}
.ll-r{border:1px solid var(--line2);background:var(--panel);border-radius:12px;
  padding:11px 13px;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.ll-rt{flex:1 1 auto;min-width:0}
.ll-rt b{display:block;font-size:15px;word-break:break-word}
.ll-rt span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.ll-rm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.ll-rm span{margin-top:0}
.ll-rby{font-size:11.5px}
/*  THE SOURCE, AS A WORD AND NOT ONLY A COLOUR. V946's lesson applied before
    it became a defect here: "real voice" and "built-in" told apart by two
    shades of the same pill is a distinction a colour-blind reader cannot
    make. The word is the information; the colour is decoration. */
.ll-rsrc{font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;border-radius:999px;padding:3px 9px;
  border:1px solid var(--line2);color:var(--muted);flex:0 0 auto;
  white-space:nowrap}
.ll-rsrc.on{color:var(--good);border-color:var(--good)}
.ll-rb{flex:0 0 auto;border:1px solid var(--line2);background:var(--btn);
  color:var(--text);border-radius:999px;width:40px;height:40px;font-size:15px;
  cursor:pointer;display:grid;place-items:center}
/*  RECORDING IS LOUD ON SCREEN. A control that looks the same whether or not
    a microphone is live is how somebody records thirty seconds of a kitchen. */
.ll-rb.rec{color:var(--bad)}
.ll-rb.live{background:var(--bad);color:#fff;border-color:transparent;
  animation:llpulse 1s ease-in-out infinite}
@keyframes llpulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ll-rb.live{animation:none}}

/* ------------------------------------------------- settings, and the sheet */
.ll-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(480px,100%);background:var(--panel);border:1px solid var(--line2);
  border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  z-index:60;box-shadow:0 -10px 40px -18px rgba(0,0,0,.6)}
.ll-sh{font-weight:800;font-size:16px;margin-bottom:14px}
.ll-f{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ll-f > span{flex:1 1 auto;font-size:14px}
.ll-seg{display:flex;gap:5px;flex:0 0 auto}
.ll-seg button{border:1px solid var(--line2);background:var(--btn);
  color:var(--text);border-radius:9px;padding:7px 11px;font:inherit;
  font-size:13px;font-weight:800;cursor:pointer}
.ll-seg button.ll-on{background:var(--accent);border-color:transparent;
  color:#06243c}
.ll-sw{display:flex;align-items:flex-start;gap:9px;margin:13px 0;font-size:14px;
  cursor:pointer}
/*  V943's lesson, which cost a release: something site-wide gives an input
    width:100%, so a checkbox in a flex row comes out the width of the row and
    pushes its own label off the screen. width:auto and min-width:0. */
.ll-sw input{margin-top:3px;flex:0 0 auto;width:auto}
.ll-sw > span{flex:1 1 auto;min-width:0}
/*  THE EMPTY STATE, and the class says so: test_v600 reads `note` as
    explanatory prose and would have it behind the info dot, which is his
    rule. This is the tool with no content in it yet -- the one block that
    has to be on the page, which is why the guard excuses `empty` by name. */
.ll-empty{border:1px solid var(--line2);border-left:3px solid var(--accent);
  background:var(--panel);border-radius:12px;padding:14px 15px;font-size:14px;
  line-height:1.6}
.ll-empty p{margin:7px 0 0;color:var(--muted);font-size:13px}
.ll-empty code{background:var(--btn);border-radius:5px;padding:1px 5px;
  font-size:12.5px}

/*  THE TAB ROW STILL SCROLLS ON A SMALL PHONE, and a scroller with no visible
    edge is what made the first version read as broken -- he saw "Hou" and
    nothing after it. Shorter labels took it from 514px to 380px in a 288px
    row, which is one tab's worth rather than two, and the fade says out loud
    that there is more to the right. Only below 460px, where it is certain to
    overflow: above that the fade would dim a last tab with nothing behind it. */
@media (max-width:460px){
  .ll-tab{padding:9px 9px;font-size:13px}
  .ll-tabs{-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent)}
}
@media (max-width:420px){
  .ll-opts{grid-template-columns:1fr}
  .ll-q{font-size:23px}
  .ll-q.ll-cjk{font-size:34px}
  .ll-q.ll-rtl{font-size:26px}
}

/* =================================================== V951 — CONVERSATIONS
   His design: *"two people, several settings, you take one side... i will
   guess what could be next sentence and i get an option to reveal"*.

   THE SCRIPT IS THE SCREEN. Everything else here is chrome around a column of
   speech, so the two sides have to be told apart at a glance and WITHOUT
   colour alone -- his V946 ruling, that a tick and a gold tick are the same
   shape and somebody in the room will be colour blind. So the two sides differ
   by SIDE OF THE COLUMN, by background, and by a name above the line. */
.ll-tbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:10px;margin:2px 0 14px}
.ll-tback{border:1px solid var(--line2);background:var(--btn);color:var(--text);
  border-radius:9px;width:34px;height:34px;font:inherit;font-size:16px;
  line-height:1;cursor:pointer;flex:0 0 auto}
.ll-tname{font-size:15px;font-weight:800;min-width:0;line-height:1.3}
.ll-tcount{color:var(--muted);font-size:12px;font-weight:700;flex:0 0 auto}
.ll-tabout{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 16px}
.ll-tf{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin:14px 0 8px}
/*  WRAPS. Two part names ("You" / "The taxi driver") in a row that cannot wrap
    pushed the second one off a 320px screen -- the V950 fault again, and the
    same fix: let it wrap and give the children a min-width of zero. */
.ll-tseg{flex-wrap:wrap}
.ll-tseg button{min-width:0;max-width:100%;text-align:left}
.ll-tmodes{display:grid;grid-template-columns:1fr;gap:8px}
.ll-tm{display:block;text-align:left;border:1px solid var(--line2);
  background:var(--panel);border-radius:12px;padding:11px 13px;font:inherit;
  color:var(--text);cursor:pointer}
.ll-tm b{display:block;font-size:14px;margin-bottom:2px}
.ll-tm span{display:block;color:var(--muted);font-size:11.5px;line-height:1.5}
.ll-tm.ll-on{border-color:var(--accent);background:var(--btn)}
#ll-tstart{margin-top:16px}

/* ---------------------------------------------------------- the script */
.ll-tscript{display:flex;flex-direction:column;gap:11px;margin-bottom:4px}
/*  A LINE OF SPEECH. `.me` is whichever side he took -- not a fixed speaker --
    because taking the other part is half the point and a column that did not
    move would make his own lines read as the other person's. */
.ll-tl{border:1px solid var(--line2);background:var(--panel);border-radius:14px;
  padding:11px 13px;max-width:88%;align-self:flex-start;
  border-bottom-left-radius:5px}
.ll-tl.me{align-self:flex-end;background:var(--btn);
  border-bottom-left-radius:14px;border-bottom-right-radius:5px}
.ll-tl .ll-tw{font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ll-tl .ll-ta{font-size:17px;font-weight:700;line-height:1.5}
.ll-tl .ll-tr{color:var(--muted);font-size:12.5px;margin-top:3px;font-style:italic}
.ll-tl .ll-tb{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.5}
.ll-tl .ll-tn{color:var(--muted);font-size:12.5px;margin-top:7px;line-height:1.55;
  border-top:1px solid var(--line2);padding-top:7px}
/*  THE ONE HE GOT AND THE ONE HE DID NOT, marked on the line itself so the
    script he scrolls back through is a record of the run. A LEFT BAR rather
    than a tint: a tinted bubble against six themes is a contrast argument
    every time, and a 3px bar is legible on all of them. */
.ll-tl.got{border-left:3px solid var(--good)}
.ll-tl.missed{border-left:3px solid var(--bad)}
/*  CJK and RTL, same reasoning as the card: characters need the size and
    Arabic needs the line height. Direction is set per line by the script,
    from the SERVER's rtl flag, never from the pack. */
.ll-tl.cjk .ll-ta{font-size:22px;line-height:1.6}
.ll-tl.rtl .ll-ta{font-size:20px;line-height:1.8}

/* ------------------------------------------------------------ his turn */
.ll-turn{border:1px dashed var(--accent);border-radius:14px;padding:14px 13px;
  margin-top:12px;background:var(--panel)}
.ll-tyou{font-size:11.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
/*  WHAT HE IS TRYING TO SAY. Not the line -- the intention. "Guess the next
    sentence" with nothing to go on is mind-reading; with an intention it is
    "put that into Arabic", which is the exercise. */
.ll-thint{font-size:15.5px;font-weight:700;line-height:1.5}
.ll-turn .ll-in{text-align:left;margin-top:12px}
.ll-turn .ll-go{margin-top:12px}
.ll-tmark{margin-top:13px;border-top:1px solid var(--line2);padding-top:11px}
.ll-tmark .ll-tf{margin-top:0}
.ll-tmarkb{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ll-tnext{margin-top:14px}
#ll-tdone .ll-go,#ll-tdone .ll-sub{margin-top:14px;text-align:center}

/*  The script gets its own gutter back on a small phone: 88% of a 320px screen
    is a bubble whose longest Arabic line wraps at four words. */
@media (max-width:420px){
  .ll-tl{max-width:94%}
  .ll-tl .ll-ta{font-size:16px}
  .ll-tl.cjk .ll-ta{font-size:20px}
  .ll-tl.rtl .ll-ta{font-size:18px}
  .ll-tmarkb{grid-template-columns:1fr}
}