/* ==========================================================================
   Obsidian — the student side, dark.

   Light Steel: nine cool greys at hue 210, used the way Apple uses them on a
   dark page. Four steps of surface:

     #252525   the canvas: the page itself, behind everything.
     #3e454c   a card. A tile of solid colour on the canvas: no border, no
               shadow, no gradient, no glass. The step in colour is the edge.
     #495057   a fill inside a card — a field, a chip, a key — and anything
               that floats over the page: a menu, a popover, a toast.
               Iron Grey.
     #525960   a fill under the pointer.

   and the greys that sit on them:

     #f8f9fa   primary text and headings. Bright Snow.
     #e9ecef   long reading. Platinum.
     #ced4da   secondary text.
     #adb5bd   the quietest text: captions, counts, what is secondary.

   Alabaster (#dee2e6) is the step between, used by the generated rules, and
   Slate Grey (#6c757d) is a control's track. #1c1c1c is the
   browser's own bar. Every text colour reads at 4.5:1 or better on the
   surface it sits on; on the #495057 fill the quietest grey steps up to
   #ced4da so it still does. Colour is kept for
   meaning: the blue of what can be pressed, green for right, red for wrong,
   amber for a warning — each in the tone Apple uses for text on a dark page.

   Nothing is lit, glowing or see-through. Surfaces are flat and opaque;
   depth is only ever the next step of grey.

   ONLY THE STUDENT SIDE, and by role rather than by address. The look is
   carried by <html data-look="obsidian">, set from what the server says the
   person is (app.js setLook) so it holds for every student route — a deep
   link, a course, a unit, a lesson, a lab, a sitting, a Back — and not just
   for the ones whose address happens to start /student/. The console, the
   family view and the signed-out welcome page are untouched.

   The file has three parts. The first two are written by hand: the tokens,
   and the page — the one section that says what the canvas is and which
   shells paint it. The third is generated by tools/obsidian.py from the
   light stylesheets — every literal colour they use, translated to this
   palette — and is rewritten whenever that script runs.
   ========================================================================== */

/* ------------------------------------------------------------- Tokens */
/* The student canvas. #252525, and a surface ramp that climbs from it.

   These two lines are the source of truth for the page behind a student.
   --obsidian is what the student scope paints html, body and the app shell
   with; --canvas is the name the light stylesheets already use for the same
   thing, so every module that reads var(--canvas) — app.css, exam.css,
   challenge.css, checks.css, lab/lab.css and the lab kits — reads this value
   without knowing anything about dark. They are written out separately on
   purpose: each is the token something actually asks for, and
   tools/check_student_canvas.py holds them equal so they cannot drift.

   Changing only --obsidian would have been the easy version and the wrong
   one. A card has to be lighter than the page it stands on or it reads as a
   hole in it, and the quietest text has to clear 4.5:1 on the card as well as
   on the page. Iron Grey (#495057) is the obvious card and is not one:
   #adb5bd on it is 3.9:1. So the card is a step short of it, and Iron Grey is
   the fill inside the card, where the quiet text steps up. Both are checked
   rather than judged by eye: see tools/check_obsidian_contrast.py. */
html[data-look="obsidian"] {
  color-scheme: dark;

  --obsidian: #252525;      /* the page */
  --canvas: #252525;
  --paper:  #3e454c;        /* a card */
  --sunk:   #495057;        /* a fill inside a card */
  --raise:  #495057;
  --elevated: #495057;      /* what floats over the page */
  --press:  #525960;        /* a fill under the pointer */
  /* The browser's own bar, which theme-color paints. One step *below* the
     canvas on purpose: the bar is the frame the page sits in, and a bar of
     exactly the canvas colour has no edge to be seen by. It is here rather
     than in index.html so the number is written down once. */
  --chrome: #1c1c1c;

  --ink:    #f8f9fa;
  --prose:  #e9ecef;        /* long reading: a shade off white */
  --ink-2:  #ced4da;
  --ink-3:  #adb5bd;        /* 5.6:1 on the page, 4.7:1 on a card */
  --ink-3-fill: #ced4da;    /* the same, on #495057: 5.5:1 */
  --rule:   rgba(222,226,230,.16);
  --hair:   rgba(222,226,230,.09);

  /* Colour is text here as often as it is paint, so each accent is the tone
     Apple uses for text on a dark page. A blue fill that carries white text
     takes the deeper --fill (white on it is 4.7:1); tools/obsidian.py points
     every blue background at it. */
  --blue:   #2997ff;
  --blue-d: #52aaff;
  --fill:   #0071e3;
  --fill-d: #0068d6;
  --green:  #30d158;
  --amber:  #ff9f0a;
  --red:    #ff6961;

  /* Kept for anything that still names them: flat, not lit. */
  --edge:   0 0 0 0 transparent;
  --lift:   none;
  --glass:  var(--obsidian);

  background: var(--obsidian);
}

/* --------------------------------------------------------------- Page
   THE STUDENT CANVAS. This section is the only place the page behind a
   student is given a colour, and the only place the app shell is told to
   paint it. Everything else — every module, every overlay, every view — is
   either transparent here or already reads var(--canvas), which the token
   block above points at the same value.

   #252525 is the canvas; #3e454c, #495057 and #525960 are surfaces standing
   on it. Those are tokens above and are not restated here: a second literal
   for a surface is a value that can drift from the one it is meant to match.

   Which elements are named, and why each is here rather than left to
   inheritance — each of the three can win on its own, and which one wins is
   exactly the kind of thing that is true until it isn't:

     html    the area above the viewport on a bounce, and the document
             root the browser paints from
     body    the page itself
     #wrap   the app shell. <main class="lx-wrap" id="wrap"> is the one the
             twenty-eight .lx-view sections are rendered into, and it is
             transparent in the light look — it is a max-width, not a
             surface — so it has to be named rather than relied on to stay
             empty behind it.

   `main` is deliberately not blanket-dark, and the exception is the point.
   There are two <main> elements: #wrap, the app itself, and .ld-main, which
   sits inside the signed-out welcome gate — a fixed full-viewport overlay
   that landing.css paints #fff. On a student address that gate is up before
   sign-in, so painting every <main> here would put a #252525 band inside a
   white overlay. The welcome page stays light by design. So the app is named
   and the gate is left alone. */
html[data-look="obsidian"] { background: var(--obsidian); }
html[data-look="obsidian"] body { background: var(--obsidian); color: var(--ink); }
html[data-look="obsidian"] #wrap { background: var(--obsidian); }
html[data-look="obsidian"] .ld-main { background: transparent; }

/* The console claims the document root too. console.css writes
   `html:has(> body.is-console) { background: #ffffff }` for the light
   console, and that selector is (0,1,2) — more specific than the
   html[data-look="obsidian"] above, and in a file that loads after this one,
   so on a page that is both a student's and console-shelled it would paint
   the student canvas white and win on both counts.

   One person can be both: an administrator who is also studying opens
   /student/, and the console shell is a body class rather than a second
   document, so nothing about the address rules it out. Rather than leave
   that to load order, the student canvas is restated against the console's
   own selector. Same selector, one level deeper, so it is the same subject
   the console is talking about and it outranks it on specificity. */
html[data-look="obsidian"]:has(> body.is-console) { background: var(--obsidian); }
html[data-look="obsidian"] ::selection { background: rgba(0,113,227,.55); color: #fff; }
html[data-look="obsidian"] :focus-visible { outline-color: var(--blue); }
html[data-look="obsidian"] input::placeholder,
html[data-look="obsidian"] textarea::placeholder { color: var(--ink-3); }

/* ------------------------------------------------------- Accessibility
   Increase Contrast: the order of emphasis keeps its steps, but every step
   moves toward white, and each surface gets a visible edge. */
@media (prefers-contrast: more) {
  html[data-look="obsidian"] {
    --ink-2: #dee2e6;
    --ink-3: #ced4da;
    --ink-3-fill: #dee2e6;
    --prose: #f8f9fa;
    --rule: rgba(222,226,230,.32);
    --hair: rgba(222,226,230,.22);
    --blue: #6bb6ff;
  }
}

/* The waiting blank before the server has said who is signed in: dark here,
   so a student reloading their page never sees a white frame. */
html[data-look="obsidian"] .ld.ld-wait { background: var(--obsidian); }

/* ===== generated by tools/obsidian.py — do not edit by hand ===== */
/* ---- app.css */
html[data-look="obsidian"] .lx-bar {
  background: #3e454c;
}
html[data-look="obsidian"] .lx-back:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-top button[aria-current="true"] {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-user .av {
  background: #495057;
}
html[data-look="obsidian"] .lx-prog {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-prog i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-subbar {
  background: #3e454c;
}
html[data-look="obsidian"] .lx-subbar-in button[aria-current="true"] {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .bc-a:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-btn {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-btn:hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .lx-btn:disabled {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-btn.quiet:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .lx-tag.live {
  background: rgba(62,224,137,0.147);
}
html[data-look="obsidian"] .lx-tag.late {
  background: rgba(235,61,51,0.115);
  color: #ea8c85;
}
html[data-look="obsidian"] .lx-resume {
  background: #495057;
}
html[data-look="obsidian"] .lx-mastery {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-mastery i {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-mastery i.fam {
  background: rgba(53,144,232,0.282);
}
html[data-look="obsidian"] .lx-mastery i.master {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-legend i {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-legend i.fam {
  background: rgba(53,144,232,0.282);
}
html[data-look="obsidian"] .lx-legend i.master {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-unit.done .n {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-umeter {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-umeter i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-pill[aria-pressed="true"] {
  color: #252525;
}
html[data-look="obsidian"] .lx-opt[aria-pressed="true"] {
  background: rgba(47,143,239,0.091);
}
html[data-look="obsidian"] .lx-opt[aria-pressed="true"] .lx-key {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-opt.right {
  background: rgba(62,224,134,0.118);
}
html[data-look="obsidian"] .lx-opt.wrong {
  background: rgba(227,59,73,0.097);
}
html[data-look="obsidian"] .lx-num:focus {
  box-shadow: 0 0 0 4px rgba(61,158,255,0.168);
}
html[data-look="obsidian"] .lx-num.right {
  background: rgba(62,224,134,0.118);
}
html[data-look="obsidian"] .lx-num.wrong {
  background: rgba(227,59,73,0.097);
}
html[data-look="obsidian"] .lx-foot {
  background: #3e454c;
}
html[data-look="obsidian"] .lx-tile.pick {
  background: rgba(47,143,239,0.091);
}
html[data-look="obsidian"] .lx-tile.hit {
  background: rgba(62,224,134,0.118);
}
html[data-look="obsidian"] .lx-tile.miss {
  background: rgba(227,59,73,0.097);
}
html[data-look="obsidian"] .lx-acct-head .av {
  background: #495057;
}
html[data-look="obsidian"] .lx-toast {
  background: #495057;
}
html[data-look="obsidian"] .lx-field input:focus {
  box-shadow: 0 0 0 4px rgba(61,158,255,0.168);
}
html[data-look="obsidian"] .lx-next {
  background: #495057;
}
html[data-look="obsidian"] .lx-barrow .track {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-barrow .track i {
  background: var(--fill);
}
html[data-look="obsidian"] .km-stat.streak svg {
  color: #adb5bd;
}
html[data-look="obsidian"] .km-stat.streak.on svg {
  color: #ffaf66;
  filter: drop-shadow(0 3px 6px rgba(255,143,41,0.455));
}
html[data-look="obsidian"] .km-bar {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .km-news {
  background: color-mix(in srgb, var(--hue) 9%, #3e454c);
}
html[data-look="obsidian"] .km-m:hover {
  box-shadow: 0 14px 32px rgba(0,0,0,0.224);
}
html[data-look="obsidian"] .km-m .ic {
  background: color-mix(in srgb, var(--mc) 13%, #3e454c);
}
html[data-look="obsidian"] .km-m .xp {
  background: color-mix(in srgb, var(--mc) 13%, #3e454c);
  color: color-mix(in srgb, var(--mc) 78%, #f8f9fa);
}
html[data-look="obsidian"] .km-m.k-fading {
  --mc: #ffac2d;
}
html[data-look="obsidian"] .km-board {
  background: radial-gradient(circle at 1px 1px, #5f676e 1px, transparent 0) 0 0 / 22px 22px, var(--paper);
}
html[data-look="obsidian"] .km-edges .dim {
  stroke: rgba(255,255,255,0.178);
}
html[data-look="obsidian"] .km-edges .flow {
  stroke: rgba(255,255,255,0.07);
}
html[data-look="obsidian"] .km-orb {
  box-shadow: 0 1px 2px rgba(0,0,0,0.178), 0 8px 20px rgba(0,0,0,0.201);
}
html[data-look="obsidian"] .km-node:hover .km-orb {
  box-shadow: 0 2px 4px rgba(0,0,0,0.178), 0 16px 32px rgba(0,0,0,0.293);
}
html[data-look="obsidian"] .km-node.on .km-orb {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px color-mix(in srgb, var(--hue) 60%, transparent), 0 14px 32px rgba(0,0,0,0.316);
}
html[data-look="obsidian"] .km-node.s-mastered .km-core {
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.362), inset 0 6px 12px rgba(255,255,255,0.022);
}
html[data-look="obsidian"] .km-node.s-mastered .km-state {
  color: color-mix(in srgb, var(--hue) 80%, #f8f9fa);
}
html[data-look="obsidian"] .km-node.s-fading .km-core {
  background: color-mix(in srgb, var(--hue) 55%, #3e454c);
}
html[data-look="obsidian"] .km-node.s-fading .km-state {
  color: #ffcf99;
}
html[data-look="obsidian"] .km-node.s-active .km-core {
  background: color-mix(in srgb, var(--hue) 11%, #3e454c);
  color: color-mix(in srgb, var(--hue) 82%, #f8f9fa);
}
html[data-look="obsidian"] .km-node.s-ready .km-core {
  background: #3e454c;
}
html[data-look="obsidian"] .km-node.s-ready .trk {
  stroke: color-mix(in srgb, var(--hue) 28%, rgba(255,255,255,0.07));
}
html[data-look="obsidian"] .km-node.s-locked .km-orb {
  background: #3e454c;
}
html[data-look="obsidian"] .km-node.s-locked .trk {
  stroke: rgba(255,255,255,0.205);
}
html[data-look="obsidian"] .km-lock {
  box-shadow: 0 1px 4px rgba(0,0,0,0.316);
}
html[data-look="obsidian"] .km-node.s-unwritten .trk {
  stroke: rgba(255,255,255,0.167);
}
html[data-look="obsidian"] .km-node.s-unwritten .km-core {
  color: #adb5bd;
}
html[data-look="obsidian"] .km-node.s-unwritten .km-name,
html[data-look="obsidian"] .km-node.s-unwritten .km-state {
  color: #adb5bd;
}
html[data-look="obsidian"] .km-flag {
  background: #495057;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}
html[data-look="obsidian"] .km-legend i {
  border: 2px solid rgba(255,255,255,0.205);
}
html[data-look="obsidian"] .km-legend i.s-active {
  background: color-mix(in srgb, var(--hue) 22%, #3e454c);
}
html[data-look="obsidian"] .km-legend i.s-fading {
  background: color-mix(in srgb, var(--hue) 55%, #3e454c);
}
html[data-look="obsidian"] .km-tag {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .km-tag.s-mastered {
  background: color-mix(in srgb, var(--hue) 14%, #3e454c);
  color: color-mix(in srgb, var(--hue) 78%, #f8f9fa);
}
html[data-look="obsidian"] .km-tag.s-fading {
  background: rgba(255,173,31,0.171);
  color: #ffd099;
}
html[data-look="obsidian"] .km-tag.s-active {
  background: color-mix(in srgb, var(--hue) 10%, #3e454c);
  color: color-mix(in srgb, var(--hue) 75%, #f8f9fa);
}
html[data-look="obsidian"] .km-tag.s-ready {
  background: rgba(62,224,122,0.165);
}
html[data-look="obsidian"] .km-facts .amber b {
  color: #ffcf99;
}
html[data-look="obsidian"] .km-c {
  --b: #6c757d;
}
html[data-look="obsidian"] .km-c .lad i {
  background: #5f676e;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .km-c.b-mastered {
  border-color: color-mix(in srgb, var(--b) 35%, rgba(255,255,255,0.07));
  background: color-mix(in srgb, var(--b) 9%, #3e454c);
}
html[data-look="obsidian"] .km-c.fading {
  border-color: #ffb13d;
}
html[data-look="obsidian"] .km-c.flagged {
  border-color: rgba(255,51,67,0.34);
}
html[data-look="obsidian"] .km-ladder svg {
  color: #adb5bd;
}
html[data-look="obsidian"] .km-cd .km-warn {
  background: rgba(255,31,50,0.118);
  color: #ff99a2;
}
html[data-look="obsidian"] .km-cd .km-warn.amber {
  background: rgba(255,173,31,0.171);
  color: #ffd199;
}
html[data-look="obsidian"] .km-teaser:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.201);
}
html[data-look="obsidian"] .km-t-trail::before {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .km-t-trail i {
  border: 2.5px solid rgba(255,255,255,0.193);
}
html[data-look="obsidian"] .km-t-trail i.s-fading {
  background: color-mix(in srgb, var(--hue) 55%, #3e454c);
}
html[data-look="obsidian"] .km-t-trail i.s-active {
  background: color-mix(in srgb, var(--hue) 25%, #3e454c);
}
html[data-look="obsidian"] .rd-kicker .num {
  background: rgba(26,140,255,0.125);
}
html[data-look="obsidian"] .rd-obj li::before {
  background: var(--fill);
}
html[data-look="obsidian"] .rd-fig img {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-zoom-stage img.vector {
  background: #3e454c;
}
html[data-look="obsidian"] .rd-zoom-x {
  background: rgba(255,255,255,0.14);
}
html[data-look="obsidian"] .rd-zoom-x:hover {
  background: rgba(255,255,255,0.24);
}
html[data-look="obsidian"] .rd-refs a {
  text-decoration-color: rgba(61,158,255,0.42);
}
html[data-look="obsidian"] .rd-fig-grid {
  --c: #3e454c;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
}
html[data-look="obsidian"] .rd-words {
  background: rgba(61,135,225,0.094);
}
html[data-look="obsidian"] .rd-words dt,
html[data-look="obsidian"] .rd-words dd {
  border-top: 1px solid rgba(61,158,255,0.144);
}
html[data-look="obsidian"] .rd-depth[data-depth="CORE"] {
  background: rgba(26,140,255,0.125);
}
html[data-look="obsidian"] .rd-depth[data-depth="MORE"] {
  background: rgba(255,193,26,0.15);
  color: #ffe199;
}
html[data-look="obsidian"] .rd-depth[data-depth="DEEP DIVE"] {
  background: rgba(223,58,58,0.125);
  color: #ee9d9d;
}
html[data-look="obsidian"] .rd-mcon {
  background: rgba(223,58,58,0.062);
  border: 1px solid rgba(228,88,88,0.24);
}
html[data-look="obsidian"] .rd-mcon > span {
  color: #ee9d9d;
}
html[data-look="obsidian"] .rd-fbk {
  background: rgba(26,140,255,0.062);
  border: 1px solid rgba(61,158,255,0.24);
}
html[data-look="obsidian"] .rd-cer-part .k {
  background: rgba(26,140,255,0.125);
}
html[data-look="obsidian"] .rd-mo-stage {
  background: #495057;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-mo-read {
  background: #3e454c;
}
html[data-look="obsidian"] .rd-mo-strip i.d {
  background: #81afe4;
}
html[data-look="obsidian"] .rd-mo-strip i.k {
  background: var(--fill);
}
html[data-look="obsidian"] .rd-mo-legend i.d {
  background: #81afe4;
}
html[data-look="obsidian"] .rd-mo-legend i.k {
  background: var(--fill);
}
html[data-look="obsidian"] .rd-mo-btn:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-mo-btn.main {
  background: var(--fill);
}
html[data-look="obsidian"] .rd-mo-btn.main:hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .rd-mo-onion:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-mo-onion[aria-pressed="true"] {
  color: #252525;
}
html[data-look="obsidian"] .rd-mo-seg button[aria-pressed="true"] {
  background: #3e454c;
  box-shadow: 0 1px 3px rgba(0,0,0,0.362), 0 0 0 .5px rgba(255,255,255,0.095);
}
html[data-look="obsidian"] .rd-rail i {
  background: var(--fill);
}
html[data-look="obsidian"] .pd-step .track {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .pd-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.132), 0 12px 34px -18px rgba(0,0,0,0.362);
}
html[data-look="obsidian"] .rt-step .track {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rt-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.132), 0 12px 34px -20px rgba(0,0,0,0.339);
}
html[data-look="obsidian"] .rt-flag {
  background: rgba(255,26,48,0.069);
}
html[data-look="obsidian"] .rt-belief p {
  text-decoration-color: rgba(255,255,255,0.3);
}
html[data-look="obsidian"] mark.rt-flash {
  box-shadow: 0 0 0 3px rgba(61,158,255,0.36);
}
html[data-look="obsidian"] .rd-toc button[aria-current="true"] {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-toc .badge {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-toc .dots i {
  color: rgba(248,249,250,0.62);
}
html[data-look="obsidian"] .rd-unitprog .track {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-unitprog .track i {
  background: var(--fill);
}
html[data-look="obsidian"] .rd-passes button[aria-pressed="true"] {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-body ::selection {
  background: rgba(26,140,255,0.2);
}
html[data-look="obsidian"] mark.hl {
  --hue: #ffd83a;
  --wash: rgba(255,217,26,0.425);
}
html[data-look="obsidian"] mark.hl.p1 {
  --hue: #ffd83a;
  --wash: rgba(255,217,26,0.425);
}
html[data-look="obsidian"] mark.hl.p2 {
  --wash: rgba(143,92,255,0.25);
}
html[data-look="obsidian"] mark.hl.p3 {
  --hue: #69d985;
  --wash: rgba(58,223,99,0.275);
}
html[data-look="obsidian"] mark.hl.p4 {
  --wash: rgba(77,163,255,0.275);
}
html[data-look="obsidian"] mark.hl.p5 {
  --wash: rgba(255,69,58,0.225);
}
html[data-look="obsidian"] mark.hl.p6 {
  --wash: rgba(255,165,26,0.275);
}
html[data-look="obsidian"] mark.hl.noted {
  box-shadow: inset 0 -3px 0 -1px var(--hue), inset 0 0 0 1px rgba(255,255,255,0.083);
}
html[data-look="obsidian"] .rd-point {
  background: rgba(26,140,255,0.25);
}
html[data-look="obsidian"] .rd-pop {
  background: #3e454c;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 54px rgba(0,0,0,0.454), 0 2px 6px rgba(0,0,0,0.178);
}
html[data-look="obsidian"] .rd-pop-x:hover {
  background: rgba(255,255,255,0.066);
}
html[data-look="obsidian"] .rd-pop .kinds button[aria-pressed="true"] {
  color: #252525;
}
html[data-look="obsidian"] .rd-pop textarea:focus {
  box-shadow: 0 0 0 3px rgba(61,158,255,0.144);
}
html[data-look="obsidian"] .rd-pop-linked .lk button:hover {
  background: rgba(255,255,255,0.084);
}
html[data-look="obsidian"] .rd-pop .row .save {
  background: var(--fill);
}
html[data-look="obsidian"] .rd-pop .row .save:hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .rd-pop .row .quote:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .rd-pop .row .del:hover {
  background: rgba(255,26,48,0.125);
}
html[data-look="obsidian"] .mg {
  --hue: #ffd83a;
}
html[data-look="obsidian"] .mg:hover,
html[data-look="obsidian"] .mg.focus {
  box-shadow: 0 4px 16px rgba(0,0,0,0.201);
}
html[data-look="obsidian"] .nb-search:focus {
  box-shadow: 0 0 0 4px rgba(61,158,255,0.144);
}
html[data-look="obsidian"] .nb-modes {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .nb-seg[aria-pressed="true"] {
  box-shadow: 0 1px 3px rgba(0,0,0,0.27);
}
html[data-look="obsidian"] .nb-row {
  --hue: #ffd83a;
}
html[data-look="obsidian"] .nb-row-tools button:last-child:hover {
  background: rgba(255,26,48,0.112);
}
html[data-look="obsidian"] .rd-vph-art {
  background: linear-gradient(150deg, #f8f9fa, #414950 55%, #f8f9fa);
}
html[data-look="obsidian"] .rd-vph-art .wave {
  background: repeating-linear-gradient(90deg,
      rgba(255,255,255,0.16) 0 2px, transparent 2px 7px);
}
html[data-look="obsidian"] .rd-vph-art .glyph {
  background: rgba(255,255,255,0.14);
}
html[data-look="obsidian"] .pr-open:hover {
  background: rgba(255,255,255,0.057);
}
html[data-look="obsidian"] .pr-dot {
  box-shadow: 0 0 0 3px rgba(83,234,168,0.192);
}
html[data-look="obsidian"] .fb {
  background: rgba(26,140,255,0.112);
  border-bottom: 1px solid rgba(61,158,255,0.192);
}
html[data-look="obsidian"] .fb-stop {
  border: 1px solid rgba(61,158,255,0.288);
}
html[data-look="obsidian"] .fb-stop:hover {
  background: var(--fill);
}
html[data-look="obsidian"] .rm {
  background: #3e454c;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 22px 62px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .rm-x:hover {
  background: rgba(255,255,255,0.066);
}
html[data-look="obsidian"] .rm-go {
  color: #252525;
}
html[data-look="obsidian"] .rm-go:hover {
  background: #ffffff;
}
html[data-look="obsidian"] .rm-follow[aria-pressed="true"] {
  background: var(--fill);
}
html[data-look="obsidian"] .rm-inv.in,
html[data-look="obsidian"] .rm-inv:disabled {
  background: rgba(51,230,152,0.125);
}
html[data-look="obsidian"] .rm-copy {
  color: #252525;
}
html[data-look="obsidian"] .rm-leave:hover {
  background: rgba(255,26,48,0.112);
}
html[data-look="obsidian"] .tt {
  background: #3e454c;
  border: .5px solid rgba(255,255,255,0.17);
  box-shadow: 0 32px 80px rgba(0,0,0,0.546), 0 6px 18px rgba(0,0,0,0.224), inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-look="obsidian"] .tt-head {
  border-bottom: .5px solid rgba(255,255,255,0.12);
}
html[data-look="obsidian"] .tt-dot {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.083);
}
html[data-look="obsidian"] .tt-dot.live {
  box-shadow: 0 0 0 3px rgba(83,234,168,0.192);
}
html[data-look="obsidian"] .tt-dot.busy {
  background: var(--fill);
}
html[data-look="obsidian"] .tt-icon:hover {
  background: rgba(255,255,255,0.061);
}
html[data-look="obsidian"] .tt-ladder {
  border-bottom: .5px solid rgba(255,255,255,0.12);
}
html[data-look="obsidian"] .tt-ladder .rungs i {
  background: rgba(255,255,255,0.102);
}
html[data-look="obsidian"] .tt-ladder .rungs i.on {
  background: var(--fill);
}
html[data-look="obsidian"] .tt-msg.me {
  background: var(--fill);
  box-shadow: 0 1px 2px rgba(41,147,255,0.312);
}
html[data-look="obsidian"] .tt-msg.it {
  background: #3e454c;
  border: .5px solid rgba(255,255,255,0.095);
  box-shadow: 0 1px 2px rgba(0,0,0,0.132);
}
html[data-look="obsidian"] .tt-msg.sys {
  background: rgba(255,255,255,0.046);
}
html[data-look="obsidian"] .tt-ask {
  border-top: .5px solid rgba(255,255,255,0.12);
}
html[data-look="obsidian"] .tt-quick button {
  background: #3e454c;
  border: .5px solid rgba(255,255,255,0.108);
}
html[data-look="obsidian"] .tt-quick button:hover {
  background: #3e454c;
}
html[data-look="obsidian"] .tt-form textarea {
  border: .5px solid rgba(255,255,255,0.145);
  background: #3e454c;
}
html[data-look="obsidian"] .tt-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(61,158,255,0.156);
}
html[data-look="obsidian"] .tt-send {
  background: var(--fill);
  box-shadow: 0 1px 3px rgba(41,147,255,0.39);
}
html[data-look="obsidian"] .tt-send:not(:disabled):hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .ln-count.end {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-track i {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.109), 0 12px 40px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .ln-lv i.n0 {
  background: #6c757d;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-lv i.n3 {
  background: #64d881;
}
html[data-look="obsidian"] .ln-diag {
  background: rgba(26,140,255,0.125);
}
html[data-look="obsidian"] .ln-opt:not(:disabled):hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.178);
}
html[data-look="obsidian"] .ln-opt:not(:disabled):hover .n {
  color: #252525;
}
html[data-look="obsidian"] .ln-opt.right {
  background: rgba(58,223,99,0.1);
}
html[data-look="obsidian"] .ln-opt.wrong {
  background: rgba(255,69,58,0.075);
}
html[data-look="obsidian"] .ln-type input:focus {
  box-shadow: 0 0 0 4px rgba(61,158,255,0.144);
}
html[data-look="obsidian"] .ln-type input.right {
  background: rgba(58,223,99,0.088);
}
html[data-look="obsidian"] .ln-type input.wrong {
  background: rgba(255,69,58,0.062);
}
html[data-look="obsidian"] .ln-free textarea:focus {
  box-shadow: 0 0 0 4px rgba(61,158,255,0.144);
}
html[data-look="obsidian"] .ln-go {
  color: #252525;
}
html[data-look="obsidian"] .ln-go:hover {
  background: #ffffff;
}
html[data-look="obsidian"] .ln-hint {
  background: rgba(255,217,26,0.2);
  color: #ffe499;
}
html[data-look="obsidian"] .ln-hint:hover {
  background: rgba(255,217,26,0.375);
}
html[data-look="obsidian"] .ln-why:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-dunno:hover {
  background: rgba(26,140,255,0.1);
}
html[data-look="obsidian"] .ln-verdict.right {
  background: rgba(58,223,99,0.088);
  border-color: rgba(88,228,123,0.288);
}
html[data-look="obsidian"] .ln-verdict.wrong {
  background: rgba(255,69,58,0.062);
  border-color: rgba(255,72,61,0.24);
}
html[data-look="obsidian"] .ln-verdict .ln-miss {
  background: #3e454c;
}
html[data-look="obsidian"] .ln-state {
  border-top: 1px solid rgba(255,255,255,0.108);
}
html[data-look="obsidian"] .ln-dim .t {
  background: rgba(255,255,255,0.093);
}
html[data-look="obsidian"] .ln-dim.now .t i {
  background: var(--fill);
}
html[data-look="obsidian"] .ln-continue {
  background: var(--fill);
}
html[data-look="obsidian"] .ln-continue:hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .ln-talk:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-goal:hover {
  box-shadow: 0 8px 26px rgba(0,0,0,0.201);
}
html[data-look="obsidian"] .ln-known-bar {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-known-flag {
  background: rgba(255,69,58,0.075);
}
html[data-look="obsidian"] .ln-move .t {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-rank {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-rank:hover {
  background: #5f676e;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-rank i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-rank i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-badge {
  box-shadow: 0 20px 60px rgba(0,0,0,0.546), 0 0 0 .5px rgba(255,255,255,0.12);
}
html[data-look="obsidian"] .ln-xp-rank .t {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ln-xp-rank .t i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-stand-track {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-stand-track i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-week-bar {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-week-bar i {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-bdg {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gm-track {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gm-track i {
  background: var(--fill);
}
html[data-look="obsidian"] .gm-card {
  box-shadow: 0 0 0 .5px var(--hair), 0 2px 14px rgba(0,0,0,0.132);
}
html[data-look="obsidian"] .gm-opt.right {
  background: rgba(62,224,137,0.135);
  color: #a3f5d3;
}
html[data-look="obsidian"] .gm-opt.wrong {
  background: rgba(234,52,63,0.112);
  color: #ff99a3;
}
html[data-look="obsidian"] .hunt-cell:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .hunt-cell.pick {
  color: #252525;
}
html[data-look="obsidian"] .hunt-cell.hit {
  background: rgba(62,224,139,0.206);
  color: #a3f5d3;
}
html[data-look="obsidian"] .hunt-cell.hit:hover {
  background: rgba(62,224,139,0.206);
}
html[data-look="obsidian"] .hunt-cell.nope {
  background: rgba(234,52,63,0.112);
}
html[data-look="obsidian"] .hang-key.hit {
  background: rgba(62,224,137,0.135);
  border-color: #58e49d;
  color: #a3f5d3;
}
html[data-look="obsidian"] .admin-field input:disabled,
html[data-look="obsidian"] .admin-field textarea:disabled,
html[data-look="obsidian"] .admin-field select:disabled {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .admin-tr input:disabled,
html[data-look="obsidian"] .admin-tr textarea:disabled,
html[data-look="obsidian"] .admin-tr select:disabled {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .admin-x:hover {
  background: rgba(234,52,63,0.112);
}
html[data-look="obsidian"] .admin-mark-part .t {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .admin-mark-part .t i {
  background: var(--fill);
}
html[data-look="obsidian"] .admin-book:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .admin-warn {
  background: rgba(255,180,31,0.112);
  box-shadow: 0 0 0 .5px rgba(226,180,80,0.34);
}
html[data-look="obsidian"] .admin-warn p {
  color: #f0d9a8;
}
html[data-look="obsidian"] .admin-warn code {
  background: rgba(255,255,255,0.057);
}
html[data-look="obsidian"] .admin-failed {
  background: rgba(224,62,62,0.091);
  box-shadow: 0 0 0 .5px rgba(226,80,80,0.34);
}
html[data-look="obsidian"] .admin-failed b {
  color: #f2a6ae;
}
html[data-look="obsidian"] .admin-failed p {
  color: #f0a8ae;
}
html[data-look="obsidian"] .admin-depth {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-setcard:hover {
  box-shadow: 0 0 0 .5px var(--rule), 0 6px 22px rgba(0,0,0,0.201);
}
html[data-look="obsidian"] .lx-setcard .ic {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr {
  --gr-blue-track: rgba(66,145,240,0.34);
  --gr-grid: rgba(255,255,255,0.124);
  --gr-axis: rgba(255,255,255,0.24);
  --gr-good: #00aa00;
  --gr-good-fill: #11e611;
  --gr-warn: #d18900;
}
html[data-look="obsidian"] .gr-hero {
  box-shadow: 0 0 0 .5px var(--hair), 0 10px 40px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .gr-key i.left {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-miles::before {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-badge.locked .ic {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-meter {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-steps i {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-act {
  background: linear-gradient(180deg, rgba(31,124,255,0.085), #3e454c);
  box-shadow: 0 0 0 .5px rgba(80,144,226,0.34);
}
html[data-look="obsidian"] .gr-review-row {
  background: rgba(255,180,31,0.094);
  box-shadow: 0 0 0 .5px rgba(226,180,80,0.34);
}
html[data-look="obsidian"] .gr-tick {
  fill: #4b535b;
}
html[data-look="obsidian"] .gr-tip {
  background: #495057;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
html[data-look="obsidian"] .gr-hbar .trk {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-exam .trk {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .chip {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .chip.ok {
  background: rgba(62,224,62,0.15);
}
html[data-look="obsidian"] .chip.bad {
  color: #f0a8ab;
  background: rgba(234,52,52,0.112);
}
html[data-look="obsidian"] .chip.warn {
  background: rgba(255,184,31,0.153);
}
html[data-look="obsidian"] .gr-crs .fl em {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-crs .fl em.rec {
  background: rgba(62,224,62,0.15);
}
html[data-look="obsidian"] .gr-crs .fl em.no {
  background: rgba(234,52,52,0.112);
  color: #f0a8ab;
}
html[data-look="obsidian"] .gr {
  --gr-extra: #4c555d;
}
html[data-look="obsidian"] .gcm-bed {
  --ink-3: var(--ink-3-fill);
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,0.084) calc(100% - 1px));
}
html[data-look="obsidian"] .gk-band.alt {
  fill: #495057;
}
html[data-look="obsidian"] .gr-check .ic {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-check.ok .ic {
  background: rgba(62,224,62,0.15);
}
html[data-look="obsidian"] .gr-check.check .ic {
  background: rgba(255,184,31,0.153);
}
html[data-look="obsidian"] .gs-lv u {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .gr-flag {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-crow .p {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-owncard .bar {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .atb-badge {
  background: var(--fill);
}
html[data-look="obsidian"] .lx-exam-tab:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-exam-tab[aria-current="true"] {
  box-shadow: 0 1px 3px rgba(0,0,0,0.178);
}
html[data-look="obsidian"] .lx-exam-tab .n {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-exam-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.178);
}
html[data-look="obsidian"] .lx-exam-status.today {
  background: rgba(62,224,137,0.147);
  color: #a4f4d1;
}
html[data-look="obsidian"] .lx-exam-status.today .dot {
  background: #1ad181;
}
html[data-look="obsidian"] .lx-exam-status.upcoming {
  background: rgba(45,146,241,0.141);
  color: #99ccff;
}
html[data-look="obsidian"] .lx-exam-status.upcoming .dot {
  background: #0884ff;
}
html[data-look="obsidian"] .lx-exam-status.past .dot {
  background: #6c757d;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .lx-today-strip {
  background: #495057;
}

/* ---- oplo-chrome.css */


/* ---- exam.css */
html[data-look="obsidian"] .ex-btn:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ex-btn.primary {
  background: var(--fill);
}
html[data-look="obsidian"] .ex-btn.primary:hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .ex-btn.primary:disabled {
  background: var(--fill);
}
html[data-look="obsidian"] .ex-btn.submit {
  color: #252525;
}
html[data-look="obsidian"] .ex-btn.submit:hover {
  background: #ffffff;
}
html[data-look="obsidian"] .ex-icon:hover,
html[data-look="obsidian"] .ex-x:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .exh-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.132), 0 8px 30px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .exh-card.is-active::before {
  background: var(--fill);
}
html[data-look="obsidian"] .exh-pill.ready {
  background: rgba(62,224,137,0.147);
}
html[data-look="obsidian"] .exh-pill.live {
  background: rgba(48,134,238,0.126);
}
html[data-look="obsidian"] .exh-pill.end {
  background: rgba(241,168,45,0.141);
}
html[data-look="obsidian"] .exh-clear > svg {
  background: rgba(62,224,137,0.147);
}
html[data-look="obsidian"] .exh-row:hover {
  background: #495057;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] #navExams.ex-waiting::after {
  background: var(--fill);
}
html[data-look="obsidian"] .ex-bar {
  background: #3e454c;
}
html[data-look="obsidian"] .ex-tool.on {
  color: #252525;
}
html[data-look="obsidian"] .ex-timer:hover,
html[data-look="obsidian"] .ex-mapbtn:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ex-timer.low {
  background: rgba(241,168,45,0.141);
}
html[data-look="obsidian"] .ex-mapbtn[aria-expanded="true"] {
  color: #252525;
}
html[data-look="obsidian"] .ex-seg {
  background: #5f676e;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ex-seg:hover {
  background: #6c757d;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ex-seg.part {
  background: linear-gradient(90deg, #4e5760 0 50%, #5f676e 50% 100%);
}
html[data-look="obsidian"] .ex-seg.done {
  color: #252525;
}
html[data-look="obsidian"] .ex-seg.cur {
  background: var(--fill);
}
html[data-look="obsidian"] .ex-notice span {
  box-shadow: 0 1px 2px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .ex-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.132), 0 12px 40px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .ex-flag.on {
  background: rgba(241,168,45,0.141);
}
html[data-look="obsidian"] .ex-choice:hover {
  background: #495057;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ex-choice.on {
  background: rgba(47,127,239,0.091);
}
html[data-look="obsidian"] .ex-choice.on .ex-key {
  background: var(--fill);
}
html[data-look="obsidian"] .ex-ta:focus,
html[data-look="obsidian"] .ex-in:focus {
  box-shadow: 0 0 0 3.5px rgba(61,158,255,0.192);
}
html[data-look="obsidian"] .ex-sym:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .exg-sc[aria-checked="true"] {
  color: #252525;
}
html[data-look="obsidian"] .exg-grid line {
  stroke: rgba(255,255,255,0.1);
}
html[data-look="obsidian"] .exg-grid line.ax {
  stroke: rgba(255,255,255,0.24);
}
html[data-look="obsidian"] .exg-pt {
  stroke: rgba(255,255,255,0.07);
}
html[data-look="obsidian"] .xc-screen {
  background: #495057;
}
html[data-look="obsidian"] .xc-out.err {
  color: #ffbc5c;
}
html[data-look="obsidian"] .xc-m[aria-checked="true"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.224);
}
html[data-look="obsidian"] .xc-k:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .xc-k.num {
  background: #3e454c;
}
html[data-look="obsidian"] .xc-k.run {
  background: var(--fill);
}
html[data-look="obsidian"] .xc-k.run:hover {
  background: var(--fill-d);
}
html[data-look="obsidian"] .ex-foot {
  background: #3e454c;
}
html[data-look="obsidian"] .ex-scrim.dark {
  background: rgba(255,255,255,0.14);
}
html[data-look="obsidian"] .ex-map {
  box-shadow: 0 2px 6px rgba(0,0,0,0.178), 0 24px 60px rgba(0,0,0,0.408);
}
html[data-look="obsidian"] .ex-tile.done {
  color: #252525;
}
html[data-look="obsidian"] .ex-review {
  box-shadow: 0 1px 2px rgba(0,0,0,0.132), 0 12px 40px rgba(0,0,0,0.155);
}
html[data-look="obsidian"] .ex-rrow.done .ex-rn {
  color: #252525;
}
html[data-look="obsidian"] .ex-confirm {
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
@media (max-width: 899px) {
  html[data-look="obsidian"] .ex.has-panel .ex-panel {
    box-shadow: 0 -12px 40px rgba(0,0,0,0.362);
  }
}
@media (max-width: 640px) {
  html[data-look="obsidian"] .ex-scrim {
    background: rgba(255,255,255,0.14);
  }
}

/* ---- checks.css */
html[data-look="obsidian"] .kc {
  box-shadow: 0 1px 2px rgba(0,0,0,0.132), 0 0 0 1px var(--hair);
}
html[data-look="obsidian"] .kc.near,
html[data-look="obsidian"] .kc:hover,
html[data-look="obsidian"] .kc:focus-within,
html[data-look="obsidian"] .kc.lit {
  box-shadow: 0 1px 2px rgba(0,0,0,0.155), 0 10px 28px rgba(0,0,0,0.201), 0 0 0 1px var(--rule);
}
html[data-look="obsidian"] .kc-opt:hover:not(:disabled) {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .kc-opt.right {
  background: rgba(62,224,137,0.147);
  color: #a3f5d1;
  box-shadow: inset 0 0 0 1px rgba(83,234,168,0.384);
}
html[data-look="obsidian"] .kc-opt.wrong {
  text-decoration-color: rgba(255,255,255,0.295);
}
html[data-look="obsidian"] .kc-bin[aria-checked="true"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.27);
}
html[data-look="obsidian"] .kc-row.off .kc-seg {
  box-shadow: 0 0 0 1.5px rgba(255,177,61,0.54);
}
html[data-look="obsidian"] .kc-go {
  color: #252525;
}
html[data-look="obsidian"] .kc-go:hover:not(:disabled) {
  background: #ffffff;
}
html[data-look="obsidian"] .kc-go.quiet:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .kc-step.off {
  box-shadow: inset 0 0 0 1.5px rgba(255,177,61,0.6);
}
html[data-look="obsidian"] .kc-ta:focus {
  box-shadow: 0 0 0 3px rgba(61,158,255,0.168);
}
html[data-look="obsidian"] .kc-model {
  background: rgba(47,127,239,0.091);
}
html[data-look="obsidian"] .kc-self .kc-bin:hover {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .kc.near .kc-link path,
html[data-look="obsidian"] .kc.lit .kc-link path {
  stroke: rgba(61,158,255,0.66);
}
html[data-look="obsidian"] .rd-body > .kc-lit {
  background-color: rgba(26,140,255,0.056);
  box-shadow: 0 0 0 10px rgba(61,158,255,0.054);
}
html[data-look="obsidian"] .kc-toggle {
  background: rgba(43,130,243,0.103);
}
html[data-look="obsidian"] .kc-toggle:hover {
  background: rgba(52,136,234,0.144);
}

/* ---- challenge.css */
html[data-look="obsidian"] .ch-prog i {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ch-prog i.seen {
  background: rgba(56,139,229,0.282);
}
html[data-look="obsidian"] .ch-prog i.cur {
  background: var(--fill);
}
html[data-look="obsidian"] .ch-sn-btn:hover:not(:disabled) {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ch-sn-dot::before {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ch-sn-dot.seen::before {
  background: rgba(56,139,229,0.282);
}
html[data-look="obsidian"] .ch-sn-dot.cur::before {
  background: var(--fill);
}
html[data-look="obsidian"] .ch-btn:hover:not(:disabled) {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ch-btn.primary {
  background: var(--fill);
}
html[data-look="obsidian"] .ch-btn.primary:hover:not(:disabled) {
  background: var(--fill-d);
}
html[data-look="obsidian"] .ch-opt.on {
  background: rgba(31,120,255,0.08);
}
html[data-look="obsidian"] .ch-opt.yes {
  background: rgba(62,224,135,0.112);
  color: #a4f4d1;
}
html[data-look="obsidian"] .ch-opt.no {
  box-shadow: inset 0 0 0 1.5px rgba(255,177,61,0.48);
  background: rgba(255,180,31,0.094);
}
html[data-look="obsidian"] .ch-opt.no .ch-mark,
html[data-look="obsidian"] .ch-opt.no .ch-box {
  box-shadow: inset 0 0 0 1.5px rgba(255,177,61,0.6);
}
html[data-look="obsidian"] .ch-cardlet {
  box-shadow: 0 1px 2px rgba(0,0,0,0.178), 0 0 0 1px var(--rule);
}
html[data-look="obsidian"] .ch-cardlet:hover:not(:disabled) {
  box-shadow: 0 3px 10px rgba(0,0,0,0.224), 0 0 0 1px var(--ink-3);
}
html[data-look="obsidian"] .ch-cardlet.sel {
  box-shadow: 0 0 0 2px var(--blue), 0 6px 16px rgba(41,147,255,0.234);
  background: rgba(31,120,255,0.08);
}
html[data-look="obsidian"] .ch-cardlet.no {
  box-shadow: 0 0 0 1.5px rgba(255,177,61,0.72);
  background: rgba(255,177,31,0.118);
}
html[data-look="obsidian"] .ch-cardlet.ok {
  box-shadow: 0 0 0 1.5px rgba(83,234,168,0.54);
  background: rgba(62,224,135,0.112);
  color: #a4f4d1;
}
html[data-look="obsidian"] .ch-ghost {
  box-shadow: 0 14px 34px rgba(0,0,0,0.454), 0 0 0 1.5px var(--blue);
}
html[data-look="obsidian"] .ch-place.picking .ch-bins .ch-target {
  box-shadow: inset 0 0 0 1.5px rgba(61,158,255,0.42);
  background: #495057;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ch-bins .ch-target.ch-over,
html[data-look="obsidian"] .ch-place.picking .ch-bins .ch-target:hover {
  background: rgba(31,124,255,0.085);
}
html[data-look="obsidian"] .ch-slot {
  background: #3e454c;
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,0.028) 7px 14px);
}
html[data-look="obsidian"] .ch-place.picking .ch-slot {
  box-shadow: inset 0 0 0 1.5px rgba(61,158,255,0.72);
  background-color: rgba(31,124,255,0.077);
}
html[data-look="obsidian"] .ch-place.picking .ch-slot:hover,
html[data-look="obsidian"] .ch-target.ch-over .ch-slot {
  background-color: rgba(31,127,255,0.112);
}
html[data-look="obsidian"] .ch-place.picking .ch-target.row:not(.filled) {
  box-shadow: inset 0 0 0 1.5px rgba(61,158,255,0.336);
}
html[data-look="obsidian"] .ch-target.row.ch-over {
  background: rgba(31,115,255,0.08);
}
html[data-look="obsidian"] .ch-step.dragging {
  box-shadow: 0 10px 28px rgba(0,0,0,0.316), inset 0 0 0 2px var(--blue);
  background: #495057;
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .ch-step.no {
  box-shadow: inset 0 0 0 1.5px rgba(255,177,61,0.66);
  background: rgba(255,180,31,0.094);
}
html[data-look="obsidian"] .ch-order.done .ch-step {
  box-shadow: inset 0 0 0 1.5px rgba(83,234,168,0.42);
  background: rgba(62,224,143,0.097);
}
html[data-look="obsidian"] .ch-order.done .ch-n {
  background: rgba(62,224,135,0.179);
  color: #a3f5d1;
}
html[data-look="obsidian"] .ch-seg:hover:not(:disabled) {
  background: rgba(26,140,255,0.1);
}
html[data-look="obsidian"] .ch-seg.on {
  background: rgba(26,140,255,0.175);
}
html[data-look="obsidian"] .ch-seg.yes {
  background: rgba(51,230,152,0.175);
}
html[data-look="obsidian"] .ch-seg.no {
  background: rgba(255,162,26,0.15);
}
html[data-look="obsidian"] .ch-num.no {
  box-shadow: inset 0 0 0 2px rgba(255,177,61,0.66);
}
html[data-look="obsidian"] .ch-num.yes {
  background: rgba(62,224,135,0.112);
}
html[data-look="obsidian"] .ch-endmark circle {
  stroke: rgba(80,226,145,0.34);
}
html[data-look="obsidian"] .chx:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.201), 0 0 0 1px var(--rule);
}
html[data-look="obsidian"] .chx-bar i {
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .chx.review {
  background: linear-gradient(135deg, rgba(31,112,255,0.082), #3e454c 60%);
  box-shadow: 0 0 0 1px rgba(61,158,255,0.24);
}
html[data-look="obsidian"] .chx-cta {
  background: linear-gradient(135deg, rgba(31,117,255,0.088), #495057);
  box-shadow: 0 0 0 1px rgba(61,158,255,0.216);
}
html[data-look="obsidian"] .chx-cta:hover {
  box-shadow: 0 8px 24px rgba(41,147,255,0.156), 0 0 0 1px rgba(61,158,255,0.42);
}
html[data-look="obsidian"] .chx-cta .chx-ico {
  background: var(--fill);
}

/* ---- lab/lab.css */
html[data-look="obsidian"] .lb-node.cur .lb-dot {
  background: var(--fill);
}
html[data-look="obsidian"] .lb-go {
  background: var(--fill);
}
html[data-look="obsidian"] .lw-rail li.cur b {
  background: var(--fill);
}
html[data-look="obsidian"] .lw-how li b {
  background: var(--fill);
}
html[data-look="obsidian"] .lb-step.cur .lb-step-dot {
  background: var(--fill);
}
/* ===== end of generated ===== */

/* ==========================================================================
   The hand-tuned layer. It comes after the generated rules, so where the
   two disagree, this wins.
   ========================================================================== */

/* -------------------------------------------------------------- Chrome
   The bar is the page: solid black, with one hairline under it. The section
   you are in is a #212124 pill. */
html[data-look="obsidian"] .lx-bar, html[data-look="obsidian"] .lx-subbar, html[data-look="obsidian"] .lx-foot {
  background: var(--obsidian);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-look="obsidian"] .lx-bar { border-bottom-color: var(--hair); }
html[data-look="obsidian"] .lx-subbar { border-top-color: var(--hair); }
html[data-look="obsidian"] .lx-foot { border-top-color: var(--hair); }
html[data-look="obsidian"] .lx-top button:hover,
html[data-look="obsidian"] .lx-subbar-in button:hover,
html[data-look="obsidian"] .lx-user:hover { background: var(--paper); }
html[data-look="obsidian"] .lx-top button[aria-current="true"],
html[data-look="obsidian"] .lx-subbar-in button[aria-current="true"] {
  background: var(--sunk); color: var(--ink); box-shadow: none;
}
html[data-look="obsidian"] :is(.lx-user .av, .lx-acct-head .av) {
  background: var(--sunk); color: var(--ink); box-shadow: none;
}
html[data-look="obsidian"] .lx-prog { background: var(--sunk); }
html[data-look="obsidian"] .lx-prog i { box-shadow: none; }

/* ---------------------------------------------------------------- Type
   Headings are white, solid. Long reading is a shade off white, which is
   easier on the eye for twenty minutes at a time. */
html[data-look="obsidian"] :is(.lx-h1, .rd h1, .ch-title b, .ch-endh, .ex-h1, .gr-hero h1) {
  background: none; color: var(--ink); -webkit-text-fill-color: currentColor;
}
html[data-look="obsidian"] .rd-body { color: var(--prose); }
html[data-look="obsidian"] .rd-body :is(h2, h3, b, strong) { color: var(--ink); }
html[data-look="obsidian"] .lx-lede, html[data-look="obsidian"] .rd-stand { color: var(--ink-2); }

/* ------------------------------------------------------------ Surfaces
   A card is a tile of #161618 on the black. No border, no shadow, no
   gradient: the step of grey is the edge. A card you can open answers the
   pointer by stepping a little lighter. */
html[data-look="obsidian"] :is(
  .lx-card, .lx-panel, .lx-unit, .lx-mode, .lx-note, .lx-term, .lx-tutor, .lx-mistake,
  .lx-setcard, .lx-stand-card, .km-stat, .km-m, .km-sheet, .km-c, .km-teaser,
  .pd-card, .rt-card, .ln-card, .gm-card, .rd-def, .rd-call, .rd-check, .rd-panel,
  .gr-hero, .gr-card, .gr-kpi, .gr-focus, .gr-risk, .gr-path, .gr-exams, .gr-cur, .gr-year, .gr-rec,
  .lx-exam-card, .lx-exams-empty, .exh-card, .chx, .kc, .mg,
  .lb-next, .lb-test, .lb-lesson, .lb-skill, .chx-cta, .chx.review
) {
  background-color: var(--paper);
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
html[data-look="obsidian"] :is(.lx-card, .lx-unit, .lx-mode, .lx-setcard, .km-m, .chx, .lx-exam-card,
      .lb-next, .lb-test, .lb-lesson, .lb-skill, .chx-cta):hover {
  background-color: #1b1b1e;
  border-color: transparent;
  box-shadow: none;
}
/* What is next is marked by a line of the accent, not a glow. */
html[data-look="obsidian"] :is(.lb-next, .lb-node.cur .lb-lesson, .chx.review, .chx-cta) { box-shadow: inset 0 0 0 1px rgba(41,151,255,.45); }
html[data-look="obsidian"] .lb-test { box-shadow: inset 0 0 0 1px rgba(167,139,250,.4); }
html[data-look="obsidian"] :is(.lb-node.done .lb-dot, .lb-node.cur .lb-dot) { box-shadow: none; }
html[data-look="obsidian"] .lb-node.cur .lb-dot { background: var(--fill); }
/* A unit page is a page, not a card: it sits straight on the black, like
   every other page. Only the things on it are cards. */
html[data-look="obsidian"] .lb-unit { background: transparent; box-shadow: none; }
html[data-look="obsidian"] .lx-item:hover { background: var(--paper); }
html[data-look="obsidian"] .lx-tag { background: var(--sunk); color: var(--ink-2); }
html[data-look="obsidian"] .lx-tag.live { background: rgba(48,209,88,.16); color: var(--green); }
/* A hint written in the colour of a line cannot be read; it is the quietest
   text instead. */
html[data-look="obsidian"] .mg-empty .k { color: var(--ink-3); }
/* A badge not yet earned is quieter, not faded out: its name still reads,
   and an outline instead of a fill says it is still to come. */
html[data-look="obsidian"] .lx-bdg.off {
  opacity: 1; color: var(--ink-3); background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* ------------------------------------------------------------ Controls
   The one accent is a flat fill: #0071e3 with white on it, a step deeper
   under the pointer. A quiet button is #212124. */
html[data-look="obsidian"] :is(.lx-btn:not(.quiet):not(.ghost), .ch-btn.primary, .ex-btn.primary:not(.submit), .lb-go) {
  background: var(--fill); color: #fff; box-shadow: none;
}
html[data-look="obsidian"] :is(.lx-btn:not(.quiet):not(.ghost), .ch-btn.primary, .ex-btn.primary:not(.submit), .lb-go):hover:not(:disabled) {
  background: var(--fill-d); box-shadow: none;
}
html[data-look="obsidian"] :is(.lx-btn, .ch-btn.primary, .ex-btn.primary):disabled { box-shadow: none; }
html[data-look="obsidian"] :is(.lx-btn.quiet, .ch-btn:not(.primary):not(.ghost), .ex-btn:not(.primary):not(.ghost)) {
  background: var(--sunk); color: var(--ink); box-shadow: none;
}
html[data-look="obsidian"] :is(.lx-btn.quiet, .ch-btn:not(.primary):not(.ghost), .ex-btn:not(.primary):not(.ghost)):hover:not(:disabled) {
  background: var(--press);
}
html[data-look="obsidian"] .lx-btn.ghost:hover { background: rgba(41,151,255,.12); }
html[data-look="obsidian"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  color: var(--ink);
}
html[data-look="obsidian"] :is(.lx-field input, .rt-form textarea, .ln-type input, .ln-free textarea, .ch-ta, .nb-search, .lb-in) {
  background: var(--sunk); --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] :is(.lx-field input, .rt-form textarea, .ln-type input, .ln-free textarea, .ch-ta, .nb-search, .lb-in):focus {
  background: var(--sunk);
}
html[data-look="obsidian"] :is(input, textarea)::placeholder { color: var(--ink-3-fill); }

/* --------------------------------------------------------- Hero panels
   The panels that were ink-dark on the light page — what to do next, what
   to resume, what is due today — are cards like any other, set apart by the
   one white button on the page. */
html[data-look="obsidian"] :is(.lx-resume, .lx-next, .lx-today-strip) {
  background: var(--paper); color: var(--ink); box-shadow: none;
}
html[data-look="obsidian"] :is(.lx-resume, .lx-next, .lx-today-strip) .lx-btn { background: #fff; color: #000; box-shadow: none; }
html[data-look="obsidian"] :is(.lx-resume, .lx-next, .lx-today-strip) .lx-btn:hover:not(:disabled) { background: #e6e6e6; }
html[data-look="obsidian"] .lx-next .warn { background: var(--sunk); }

/* ------------------------------------------------------------ Floating
   Anything that floats over the page — a menu, a popover, a toast — is solid
   #212124 with a hairline edge, so it reads as above the page. */
html[data-look="obsidian"] :is(.tt-open, .rd-tools, .lx-xp, .lx-toast, .km-flag, .gr-tip, .lx-badge, .rd-pop) {
  background: var(--elevated);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hair), 0 16px 40px rgba(0,0,0,.6);
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] .tt-open:hover { background: var(--press); box-shadow: 0 0 0 1px var(--rule), 0 16px 40px rgba(0,0,0,.6); }
html[data-look="obsidian"] .km-flag::after { background: var(--elevated); }

/* The tutor is a panel over the page: solid, with the same hairline. A
   scrim behind a dialog darkens the page; it does not blur it. */
html[data-look="obsidian"] .tt {
  background: var(--elevated);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--hair), 0 24px 60px rgba(0,0,0,.6);
  --ink-3: var(--ink-3-fill);
}
html[data-look="obsidian"] :is(.cn-finderwrap, .nav-scrim) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-look="obsidian"] .cn-finderwrap { background: rgba(0,0,0,.6); }
/* Boards and mats are plain wells, not dotted paper. */
html[data-look="obsidian"] .km-board { background: var(--paper); border-color: transparent; }
html[data-look="obsidian"] .lw-mat-in { background-image: none; }

/* ------------------------------------------------------------- Figures
   Photographs are photographs, with a hairline so a dark picture still has
   an edge. Diagrams are drawn for paper — white ground, black ink — so they
   are turned into the page instead: the ground goes dark, the ink to white,
   and every hue comes back round to itself. */
html[data-look="obsidian"] .rd-fig img { box-shadow: 0 0 0 1px var(--hair); }
html[data-look="obsidian"] .rd-fig.diagram img,
html[data-look="obsidian"] .rd-zoom-stage img.vector {
  filter: invert(.915) hue-rotate(180deg) saturate(1.25) brightness(1.04);
  box-shadow: none;
}
html[data-look="obsidian"] .rd-zoom-stage img.vector { background: #fff; }
html[data-look="obsidian"] .rd-zoom { background: #000; }

/* SVG drawn by the app with literal colours: the mastery rings. */
html[data-look="obsidian"] :is(.lx-dim, .lx-done) svg circle:first-child { stroke: var(--sunk); }
html[data-look="obsidian"] :is(.lx-dim, .lx-done) svg text { fill: var(--ink); }
html[data-look="obsidian"] .lx-done #ringArc { stroke: var(--green); filter: none; }

/* ---------------------------------------------------------- Scrollbars */
html[data-look="obsidian"] { scrollbar-color: rgba(255,255,255,.2) transparent; }
html[data-look="obsidian"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-look="obsidian"] ::-webkit-scrollbar-track { background: transparent; }
html[data-look="obsidian"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
html[data-look="obsidian"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }

/* ------------------------------------------------------------- Details */
/* A segmented control: a #212124 track, and the chosen segment a flat step
   lighter. */
html[data-look="obsidian"] :is(.nb-seg[aria-pressed="true"], .lx-exam-tab[aria-current="true"],
      .xc-m[aria-checked="true"], .kc-bin[aria-checked="true"]) {
  background: #3a3a3e; color: #fff; box-shadow: none;
}
/* The calculator's display is a well of black. */
html[data-look="obsidian"] .xc-screen { background: #000; color: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
/* The Lab's manipulatives sit on the page itself, with no well of their
   own — a lesson step has no card around it (challenge.css); their pieces
   are #212124. The function machine is a flat blue. */
html[data-look="obsidian"] :is(.lw, .lb-unit, .ch-card) { --lw-surface: var(--canvas); --lw-tile: #212124; }
html[data-look="obsidian"] .lw-mbox { background: var(--fill); box-shadow: none; }
/* The record's charts, in the dark palette: the same two series, the same
   meanings, each colour lifted to read on a dark page. */
html[data-look="obsidian"] .gr {
  --gr-blue: #2997ff;
  --gr-blue-soft: #7fbaff;
  --gr-blue-track: rgba(41,151,255,.2);
  --gr-orange: #ff7a45;
  --gr-grid: rgba(255,255,255,.08);
  --gr-axis: rgba(255,255,255,.24);
  --gr-good: #30d158;
  --gr-good-fill: #30d158;
  --gr-bad: #ff6961;
  --gr-warn: #ffb340;
  --gr-warn-fill: #ffb340;
}

/* ------------------------------------------------------- Accessibility
   Increase Contrast: every card and floating surface gets a visible edge,
   because a step of grey alone is not enough for everyone. */
@media (prefers-contrast: more) {
  html[data-look="obsidian"] :is(.lx-card, .lx-panel, .lx-unit, .lx-mode, .lx-note, .lx-stand-card, .gr-card, .gr-kpi,
        .chx, .rd-panel, .rd-call, .rd-check, .lb-next, .lb-test, .lb-lesson, .lb-skill,
        .lx-resume, .lx-next, .lx-today-strip) {
    box-shadow: inset 0 0 0 1px var(--rule);
  }
}