/* ---- Arcade (Governance): short runs of quick cards over the learn
   session. A card sits still from its first frame to its verdict: the
   answer is marked where it is (right green, a wrong pick red and struck,
   a missed one outlined), the chips straighten, and the sheet comes up
   from the bottom with right or not, the answer, and why. Motion: one
   ease, short; a card rises in, the old one fades where it stood ---- */
.arc { --arcease: cubic-bezier(.2,.8,.2,1); --arcok: var(--green); --arcno: var(--red); }
/* the run covers the session at once (no fade over an empty chat); its
   first card rises in */
.ldrill.arc { animation: none; }
.archead { display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 4px max(10px, calc((100% - 820px) / 2)) 0; }
.arcx { flex-shrink: 0; width: 44px; height: 44px; border: 0; background: none;
  color: var(--dim2); font: 400 17px/1 Geist, Inter, system-ui, sans-serif;
  cursor: pointer; border-radius: 22px; }
@media (hover: hover) { .arcx:hover { color: var(--text); background: var(--hov); } }
/* the run as pips: grey ahead, lilac here, then green, red, amber, dim */
.arcpips { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; }
.arcpips i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.09);
  transition: background .25s, transform .25s var(--arcease); }
.arcpips i.re { flex: .6; }
.arcpips i.boss { flex: 1.8; height: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent); }
.arcpips i.on { background: var(--accent); transform: scaleY(1.4); }
.arcpips i.ok { background: var(--arcok); }
.arcpips i.no { background: var(--arcno); }
.arcpips i.part { background: var(--amber); }
.arcpips i.dk { background: var(--dim2); opacity: .45; }
.arcrow { flex-shrink: 0; min-width: 82px; text-align: right;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--accent2);
  opacity: 0; transition: opacity .25s, color .25s; font-variant-numeric: tabular-nums; }
.arcrow.on { opacity: 1; }
.arcrow b { display: inline-block; font-weight: 700; color: var(--text); }
.arcrow.hot, .arcrow.hot b { color: var(--amber); }
.arcnote { position: absolute; top: 50px; left: 0; right: 0; z-index: 4; padding: 0 16px;
  text-align: center; font-size: 12.5px; color: var(--amber); pointer-events: none; }
.arcnote:empty { display: none; }
.arcstage { padding-bottom: calc(var(--sheet, 0px) + 28px + var(--kb, 0px));
  scroll-padding-bottom: calc(var(--sheet, 0px) + 12px); transition: padding-bottom .22s var(--arcease); }

/* the card: high on the screen, still while it is answered */
.arccard { display: flex; flex-direction: column; gap: 14px; width: 100%;
  max-width: 44rem; margin-top: clamp(4px, 4vh, 40px);
  transition: opacity .24s var(--arcease), transform .24s var(--arcease); }
.arccard.in { opacity: 0; transform: translateY(12px); }
.arccard.out { position: absolute; right: auto; margin: 0; opacity: 0;
  transform: translateY(-6px); pointer-events: none;
  transition: opacity .14s ease-in, transform .14s ease-in; }
/* a new card takes no tap in its first moment (a double tap meant for
   the card before) */
.arccard.wait { pointer-events: none; }
/* judged: a tap goes through to the card (Continue) */
.arccard.judged button { pointer-events: none; }
.arccard.judged.k-boss details, .arccard.judged.k-boss summary,
.arccard.judged.k-end button { pointer-events: auto; }
.arccard, .arccard button, .arcsc, .arcsheet { -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.arcwhere { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font: 600 10.5px/1.35 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); }
.arcwhere .src { color: var(--accent2); }
.arcwhere .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; }
.arcwhere .again { color: var(--amber); }
.arcwhere .her { color: var(--amber); }
.arcask { font: 400 19px/1.45 Literata, "Source Serif 4", Georgia, serif;
  color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; hyphens: auto; }
.arcask b { font-weight: 600; }
.archint { margin-top: -4px; font-size: 13.5px; line-height: 1.4; color: var(--dim2); }
.archint .left { color: var(--accent2); font-variant-numeric: tabular-nums; }
.arccard.judged .archint { visibility: hidden; }
/* a term's meaning, asked for its term */
.arcmean { padding: 14px 16px; border-radius: 14px; font: 400 17.5px/1.5 Literata,
  "Source Serif 4", Georgia, serif; color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, var(--lsurf));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  overflow-wrap: anywhere; hyphens: auto; }
.arcdk { align-self: center; min-height: 44px; padding: 8px 16px; border: 0; background: none;
  color: var(--dim); font: 500 14px/1 Geist, Inter, system-ui, sans-serif; cursor: pointer;
  border-radius: 16px; }
@media (hover: hover) { .arcdk:hover { color: var(--text); background: var(--hov); } }
.arccard.judged .arcdk { visibility: hidden; }
.shake { animation: arcshake .3s ease-in-out; }
@keyframes arcshake {
  20% { translate: -6px 0; } 45% { translate: 5px 0; } 70% { translate: -3px 0; } 100% { translate: 0 0; } }
.pop { animation: arcpop .26s var(--arcease); }
@keyframes arcpop { 45% { scale: 1.06; } }
.arcghost { pointer-events: none; }

/* the gap in a sentence */
.arcgap { display: inline-block; min-width: 4.5em; margin: 0 .15em; padding: 0 .2em;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  text-align: center; line-height: 1.2; transition: border-color .2s, color .2s; }
.arcgap i { font-style: normal; }
.arcgap.good, .arcgap.fix { color: var(--arcok); border-bottom-color: var(--arcok); }
.arcgap.long { display: inline; min-width: 0; margin: 0; padding: 0; border-bottom: 0;
  text-align: left; text-decoration: underline 2px var(--arcok); text-underline-offset: 5px; }

/* chips: a small pile, each a little tilted until the card is judged */
.arcchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.arcchips.col { flex-direction: column; align-items: stretch; }
.arcchip { position: relative; min-height: 48px; max-width: 100%; padding: 11px 16px; border: 0;
  border-radius: 14px; background: var(--lsurf); box-shadow: inset 0 0 0 1px var(--lhair);
  color: var(--text); font: 400 16px/1.35 Geist, Inter, system-ui, sans-serif; text-align: center;
  transform: rotate(var(--r, 0deg)); cursor: pointer; overflow-wrap: anywhere; hyphens: auto;
  transition: background .16s, box-shadow .16s, opacity .2s, transform .3s var(--arcease); }
.arcchips.col .arcchip, .arcchip.wide { transform: none; }
.arcchips.col .arcchip, .arcchip.wide { text-align: left; }
.arccard.settled .arcchip { transform: none; }
.arcchip:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) {
  .arcchip:hover:not(:disabled), .arcverd:hover:not(:disabled), .arcm:hover:not(:disabled),
  .arcbin:hover:not(:disabled) { background: color-mix(in srgb, var(--lsurf) 85%, white); }
}
.arcchip:disabled, .arcverd:disabled, .arcm:disabled, .arcbin:disabled { cursor: default; }
.arcchip.on { background: color-mix(in srgb, var(--accent) 22%, var(--lsurf));
  box-shadow: inset 0 0 0 1.5px var(--accent); }
.arcchip.good, .arcverd.good, .arcm.good {
  background: color-mix(in srgb, var(--arcok) 17%, var(--lsurf));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--arcok) 70%, transparent); }
.arcchip.bad, .arcverd.bad, .arcm.bad {
  background: color-mix(in srgb, var(--arcno) 14%, var(--lsurf));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--arcno) 65%, transparent);
  color: color-mix(in srgb, var(--text) 80%, var(--arcno)); }
.arccard.judged .arcchip.bad, .arccard.judged .arcverd.bad {
  text-decoration: line-through 1.5px color-mix(in srgb, var(--arcno) 80%, transparent); }
/* a right one not picked: outlined, with a word on it */
.arcchip.miss { background: color-mix(in srgb, var(--arcok) 7%, var(--lsurf)); box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--arcok) 75%, transparent); outline-offset: -1.5px; }
.arcchip.miss::after, .arcchip.fix.imp::after, .arcchip.shown::after { position: absolute; top: -8px; right: 8px; padding: 1px 6px;
  border-radius: 6px; font: 600 10px/1.4 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .04em; text-transform: uppercase; background: var(--chatbg); }
.arcchip.miss::after { content: "missed"; color: var(--arcok); }
/* the answer you should have picked: outlined, "answer" on it */
.arcchip.shown, .arcverd.shown { background: color-mix(in srgb, var(--arcok) 7%, var(--lsurf)); box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--arcok) 75%, transparent); outline-offset: -1.5px; }
.arcchip.shown::after { content: "answer"; color: var(--arcok); }
.arcchip.dim, .arcverd.dim, .arcchip.plain { opacity: .5; }
/* odd: the impostor struck through, the real item under it */
.arcchip.imp { display: flex; flex-direction: column; gap: 4px; }
.arcchip.imp .x { text-decoration: line-through 1.5px; color: var(--dim2); }
.arcchip.imp.fix { background: color-mix(in srgb, var(--arcok) 7%, var(--lsurf)); box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--arcok) 75%, transparent); outline-offset: -1.5px; }
.arcchip.fix.imp::after { content: "the odd one"; color: var(--arcok); }
.arcchip .real { display: block; text-decoration: none; color: var(--arcok); font-weight: 600;
  animation: arcrise .3s var(--arcease) both; }
.arcchip .real::before { content: "→ "; opacity: .7; }
@keyframes arcrise { from { opacity: 0; transform: translateY(4px); } }

/* match: terms left, meanings right; a pair locks with its number */
.arcmatch { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.arcmatch .col { display: flex; flex-direction: column; gap: 8px; }
.arcm { position: relative; flex: 1; min-height: 56px; padding: 10px 12px; border: 0;
  border-radius: 13px; background: var(--lsurf); box-shadow: inset 0 0 0 1px var(--lhair);
  color: var(--text); font: 400 14.5px/1.35 Geist, Inter, system-ui, sans-serif; text-align: left;
  cursor: pointer; overflow-wrap: anywhere; hyphens: auto;
  transition: background .16s, box-shadow .16s, opacity .25s; }
.arcm.t { font-weight: 600; font-size: 15px; }
.arcm.sel { background: color-mix(in srgb, var(--accent) 22%, var(--lsurf));
  box-shadow: inset 0 0 0 1.5px var(--accent); }
.arcm.good.late { background: color-mix(in srgb, var(--arcok) 7%, var(--lsurf)); box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--arcok) 75%, transparent); outline-offset: -1.5px; }
.arcm.fix { box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--arcok) 70%, transparent);
  outline-offset: -1.5px; }
.arcm[data-no]::after { content: attr(data-no); position: absolute; top: 6px; right: 7px;
  font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim2); }

/* sort: the deck on top, the bins under it fill as you go */
.arcdeck { position: relative; display: grid; place-items: center; min-height: 104px;
  touch-action: pan-y; }
.arcdeck.empty { visibility: hidden; }
.arcsc { grid-area: 1 / 1; width: min(100%, 26rem); padding: 16px 18px; border-radius: 16px;
  background: var(--lsurf); box-shadow: inset 0 0 0 1px var(--lhair), 0 6px 18px rgba(0,0,0,.28);
  color: var(--text); font: 400 16.5px/1.45 Geist, Inter, system-ui, sans-serif;
  text-align: center; transform: rotate(var(--r, 0deg)); cursor: grab; overflow-wrap: anywhere;
  hyphens: auto; transition: transform .22s var(--arcease), opacity .22s, color .22s; }
.arcsc:not(:last-child) { color: transparent; opacity: .5; box-shadow: inset 0 0 0 1px var(--lhair);
  transform: rotate(var(--r)) translateY(calc(var(--k) * -5px)) scale(.97); }
.arcsc:nth-last-child(n+4) { display: none; }
.arcbins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arcbin { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 84px;
  padding: 12px 12px 14px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 8%, var(--lsurf));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text); font-family: inherit; transition: box-shadow .16s, background .16s; }
.arcbin .bt { font: 600 15px/1.3 Geist, Inter, system-ui, sans-serif; text-align: center;
  overflow-wrap: anywhere; hyphens: auto; }
.arcbin .bs { display: flex; flex-direction: column; gap: 5px; }
.arcbin .bs:empty { display: none; }
.arcbin .bs span { padding: 5px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.4;
  overflow-wrap: anywhere; hyphens: auto;
  color: var(--text); background: color-mix(in srgb, var(--arcok) 12%, transparent);
  animation: arcrise .25s var(--arcease) both; }
.arcbin .bs span.bad { background: color-mix(in srgb, var(--arcno) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--arcno); }
.arcbin .bs span em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px;
  color: color-mix(in srgb, var(--arcno) 75%, var(--text)); }
.arcbin .bs span.fix { background: none; outline: 1.5px dashed color-mix(in srgb, var(--arcok) 60%, transparent);
  outline-offset: -1.5px; }
.arcbin.flash { box-shadow: inset 0 0 0 2px var(--arcno);
  background: color-mix(in srgb, var(--arcno) 12%, var(--lsurf)); }

/* duo: two verdicts side by side, then the reasons */
.arcverds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arcverd { min-height: 58px; padding: 10px 14px; border: 0; border-radius: 14px;
  background: var(--lsurf); box-shadow: inset 0 0 0 1px var(--lhair); color: var(--text);
  font: 600 17px/1.3 Geist, Inter, system-ui, sans-serif; cursor: pointer; overflow-wrap: anywhere;
  hyphens: auto; transition: background .16s, box-shadow .16s, opacity .2s; }
.arcreasons { display: flex; flex-direction: column; gap: 8px; }
.arcreasons.hidden { visibility: hidden; }
.arcreasons.rise { animation: arcrise .3s var(--arcease) both; }
.arcreasons .lbl { font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* order: numbered slots fill as the steps are tapped */
.arcslots { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arcslots li { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 12px;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lhair);
  transition: background .2s, box-shadow .2s; }
.arcslots .no { flex: none; width: 18px; font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace;
  color: var(--dim); }
.arcslots .tx { flex: 1; min-width: 0; min-height: 1em; font-size: 15px; line-height: 1.35; color: var(--text); }
.arcslots li.filled.good { background: color-mix(in srgb, var(--arcok) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arcok) 45%, transparent); }
.arcslots li.filled.fix { background: color-mix(in srgb, var(--arcok) 6%, transparent); box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--arcok) 70%, transparent); outline-offset: -1.5px; }
.arcchip.used { visibility: hidden; }

/* boss: her open question, typed */
.arcboss-tag { display: flex; align-items: baseline; gap: 10px; margin-bottom: -4px; }
.arcboss-tag span { padding: 3px 8px; border-radius: 7px; font: 700 11px/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--chatbg); background: var(--amber); }
.arcboss-tag em { font-style: normal; font-size: 12.5px; color: var(--amber); }
.k-boss .arcask { font-size: 17.5px; }
.arctype { width: 100%; min-height: 128px; padding: 12px 14px; border: 0; border-radius: 14px; resize: vertical;
  background: var(--lsurf); box-shadow: inset 0 0 0 1px var(--lhair); color: var(--text);
  font: 400 16px/1.5 Geist, Inter, system-ui, sans-serif; outline: none;
  -webkit-user-select: text; user-select: text; }
.arctype:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.arctype[readonly] { opacity: .75; }
.arcbossacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.arcbossacts.gone { display: none; }
.arcbossacts .arccheck { flex: 1 1 100%; }
.arcbossacts .arcdk, .arcskip { align-self: center; }
.arcskip { margin-left: auto; min-height: 44px; padding: 8px 16px; border: 0; background: none; border-radius: 16px;
  color: var(--dim); font: 500 14px/1 Geist, Inter, system-ui, sans-serif; cursor: pointer; }
.arccheck.busy { position: relative; overflow: hidden; }
.arccheck.busy::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: arcsheen 1.1s linear infinite; }
@keyframes arcsheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.arcres:empty { display: none; }
.arcres { display: flex; flex-direction: column; gap: 12px; animation: arcrise .3s var(--arcease) both; }
.arcrows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arcrows li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--lsurf); font-size: 14.5px; line-height: 1.45; color: var(--text);
  overflow-wrap: anywhere; hyphens: auto; }
.arcrows li i { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--dim); }
.arcrows li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arcrows li em { font-style: normal; font-size: 13px; color: var(--dim2); }
.arcrows li.hit { background: color-mix(in srgb, var(--arcok) 12%, var(--lsurf)); }
.arcrows li.hit i { background: var(--arcok); box-shadow: none; }
.arcrows li.partly { background: color-mix(in srgb, var(--amber) 11%, var(--lsurf)); }
.arcrows li.partly i { box-shadow: inset 0 0 0 1.5px var(--amber);
  background: linear-gradient(90deg, var(--amber) 50%, transparent 50%); }
.arcrows li.miss { background: color-mix(in srgb, var(--arcno) 10%, var(--lsurf)); }
.arcrows li.miss i { box-shadow: inset 0 0 0 1.5px var(--arcno); }
.arcrows.wrong li em { color: var(--arcno); }
.arcfeed { margin: 0; font: 400 15.5px/1.55 Literata, "Source Serif 4", Georgia, serif; color: var(--lprose, var(--text)); }
.arcwarn { font-size: 14px; color: var(--amber); }
.arcmodel summary, .arcfixes summary { display: flex; align-items: center; gap: 8px; min-height: 44px;
  cursor: pointer; font-size: 14px; color: var(--dim2); list-style: none; }
.arcmodel summary::-webkit-details-marker, .arcfixes summary::-webkit-details-marker { display: none; }
.arcmodel summary::before, .arcfixes summary::before { content: "›"; display: inline-block;
  width: 10px; font-size: 18px; line-height: 1; transition: transform .2s var(--arcease, ease-out); }
.arcmodel[open] summary::before, .arcfixes[open] summary::before { transform: rotate(90deg); }
.arcmodel div { margin-top: 8px; font: 400 15.5px/1.6 Literata, "Source Serif 4", Georgia, serif;
  color: var(--lprose, var(--text)); }
.arcmodel div b { color: var(--text); }
.arcwait { margin: 30vh 0 0; text-align: center; color: var(--dim); font-size: 14px; }

/* the sheet: right or not, the answer, why */
.arcsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px max(18px, calc((100% - 780px) / 2)) calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0; background: var(--panel2);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35), inset 0 1px 0 var(--lhair);
  transform: translateY(105%); transition: transform .24s var(--arcease); cursor: pointer; }
.arcsheet.on { transform: none; }
.arcsheet .sh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.arcsheet .sh b { font: 700 17px/1.2 Geist, Inter, system-ui, sans-serif; }
.arcsheet .sh span { font-size: 13px; color: var(--dim2); }
.arcsheet.ok { background: color-mix(in srgb, var(--arcok) 14%, var(--panel2)); }
.arcsheet.ok .sh b { color: var(--arcok); }
.arcsheet.no { background: color-mix(in srgb, var(--arcno) 12%, var(--panel2)); }
.arcsheet.no .sh b { color: var(--arcno); }
.arcsheet.part { background: color-mix(in srgb, var(--amber) 11%, var(--panel2)); }
.arcsheet.part .sh b { color: var(--amber); }
.arcsheet .sa { font-size: 15px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; hyphens: auto; }
.arcsheet .sa b { color: var(--arcok); font-weight: 600; }
.arcsheet .sw { font: 400 15px/1.5 Literata, "Source Serif 4", Georgia, serif; color: var(--lmuted);
  overflow-wrap: anywhere; hyphens: auto; }
.arcsheet .sw b { color: var(--text); font-weight: 600; }
.arcsheet .sgo { margin-top: 6px; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer;
  font: 600 16px/1 Geist, Inter, system-ui, sans-serif; color: var(--chatbg); background: var(--text); }
.arcsheet.no .sgo { background: color-mix(in srgb, var(--arcno) 75%, var(--text)); }
.arcsheet.part .sgo { background: var(--amber); }

/* the board: a row per lecture, a cell per topic that fills from below */
.arcboard { display: flex; flex-direction: column; gap: 5px; }
.arcbrow { display: flex; align-items: center; gap: 8px; }
.arcbrow .no { flex: none; width: 18px; font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  color: var(--dim); }
.arcbrow .cells { display: flex; flex-wrap: wrap; gap: 3px; }
.arcboard i { position: relative; display: block; width: 14px; height: 14px; border-radius: 3px;
  overflow: hidden; background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); transition: box-shadow .3s; }
.arcboard i.sup { width: 8px; }
.arcboard i.lit { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.arcboard i b { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 0) * 100%);
  background: var(--accent); opacity: .85; transition: height .6s var(--arcease, ease-out); }
.arcboard i.rdy { box-shadow: 0 0 0 1px var(--amber), 0 0 8px color-mix(in srgb, var(--amber) 50%, transparent); }
.arcboard i.rdy b { background: var(--amber); opacity: 1; }
.arcboard i.pulse { animation: arcpulse .9s ease-out; }
@keyframes arcpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
  100% { box-shadow: 0 0 0 7px transparent; } }
.arcboard.mini { gap: 3px; }
.arcboard.mini .arcbrow { gap: 0; }
.arcboard.mini .no { display: none; }
.arcboard.mini .cells { gap: 2px; }
.arcboard.mini i { width: 7px; height: 7px; border-radius: 2px; }
.arcboard.mini i.sup { width: 4px; }
.lpbody .arcboard { margin: 4px 0 6px; }
.lpbody .arcboard i { width: 16px; height: 16px; cursor: pointer; }
.lpbody .arcboard i.sup { width: 10px; }
.arcboard i.sel { outline: 2px solid var(--text); outline-offset: 1px; }
.arctopic { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 14px; }
.arctopic .t { flex: 1 1 60%; font-size: 15px; font-weight: 600; color: var(--text); }
.arctopic .n { font-size: 13px; color: var(--dim); }
.arctopic .lpgo { flex: 0 0 auto; min-height: 38px; }

/* the projected grade on a hairline from 1 to 10 */
.arcgrade { display: flex; flex-direction: column; gap: 8px; }
.arcgrade .gl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.arcgrade .gl b { font: 600 30px/1 Geist, Inter, system-ui, sans-serif; color: var(--text);
  font-variant-numeric: tabular-nums; }
.arcgrade .gl span { font-size: 13px; color: var(--dim2); }
.arcgrade .gl em { font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; font-style: normal; }
.arcgrade .gl em.up { color: var(--arcok, var(--green)); }
.arcgrade .gl em.down { color: var(--arcno, var(--red)); }
.arcgrade .gt { position: relative; height: 16px; margin-bottom: 8px; }
.arcgrade .gt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--lhair); }
.arcgrade .band { position: absolute; top: 5px; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 30%, transparent); }
.arcgrade .pass { position: absolute; top: 1px; width: 1px; height: 14px; background: var(--dim); }
.arcgrade .pass.made { background: var(--green); }
.arcgrade .pass b { position: absolute; top: 15px; left: 0; transform: translateX(-50%);
  font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim); }
.arcgrade .pass.made b { color: var(--green); }
.arcgrade .tick { position: absolute; top: 0; width: 2px; height: 16px; margin-left: -1px;
  border-radius: 1px; background: var(--text); transition: left 1s var(--arcease, ease-out); }
.arcgrade .gtoday { margin-top: -6px; font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; }
.arcgrade .gtoday.up { color: var(--green); }
.arcgrade .gtoday.down { color: var(--red); }
.arcgrade .gs { font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.arcgrade.compact .gl b { font-size: 20px; }
.arcgrade.compact { gap: 5px; }

/* the end of a run */
.arcend { display: flex; flex-direction: column; gap: 20px; }
.arcscore { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; color: var(--dim2); }
.arcscore b { font: 600 46px/1.05 Geist, Inter, system-ui, sans-serif;
  color: var(--text); font-variant-numeric: tabular-nums; }
.arcscore em { flex-basis: 100%; font-style: normal; font: 600 12.5px/1.3 "JetBrains Mono", ui-monospace, monospace;
  color: var(--amber); }
.arcscore em.ok { color: var(--green); }
.arclines { display: flex; flex-wrap: wrap; gap: 8px; }
.arclines span { padding: 5px 9px; border-radius: 8px;
  font: 600 12px/1.35 "JetBrains Mono", ui-monospace, monospace; color: var(--accent2);
  background: color-mix(in srgb, var(--accent) 11%, transparent); }
.arcpromo { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent);
  opacity: 0; transform: scale(.96); transition: opacity .35s, transform .35s var(--arcease); }
.arcpromo.on { opacity: 1; transform: none; }
.arcpromo b { font: 700 17px/1.2 Geist, Inter, system-ui, sans-serif; color: var(--green); }
.arcpromo span { font-size: 13px; color: var(--dim2); }
.arcfix { display: flex; flex-direction: column; gap: 3px; padding: 10px 0;
  border-top: 1px solid var(--lhair); }
.arcfix:first-of-type { margin-top: 8px; }
.arcfix .q { font-size: 13.5px; line-height: 1.45; color: var(--lmuted); }
.arcfix .a { font-size: 14px; line-height: 1.45; color: var(--green); }
.arcteaser { font-size: 13.5px; line-height: 1.45; color: var(--dim); }
.arcendacts { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.arcleave { align-self: center; min-height: 44px; padding: 10px 18px; border: 0; background: none; cursor: pointer;
  color: var(--dim2); font: 500 14.5px/1 Geist, Inter, system-ui, sans-serif; }
@media (hover: hover) { .arcleave:hover { color: var(--text); } }

/* Progress: the card under the tiles */
.archome { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px;
  padding: 14px 14px 12px; border-radius: var(--lradius);
  background: color-mix(in srgb, var(--accent) 9%, transparent); }
.archomeinfo { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0;
  background: none; color: inherit; text-align: left; cursor: pointer; font-family: inherit; }
.archome .llabel { color: var(--accent2); opacity: .85; line-height: 1.4; }
.arcplay { width: 100%; }
.arctips { font-size: 13px; line-height: 1.5; color: var(--lmuted); }
.arctips b { color: var(--text); }
.arclec .bar i { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .arccard, .arcboard i b, .arcgrade .tick, .arcsheet, .arcpromo { transition: opacity .2s !important; }
  .arcchip, .arcsc { transform: none; }
  .shake, .pop, .arcboard i.pulse, .arcres, .arcreasons.rise, .arcchip .real,
  .arcbin .bs span, .arccheck.busy::after { animation: none !important; }
}