/* Generated by code.brainlag.space/tools/learn_share.py from brainlag.space/public/assets/css/brainlag.css. Do not edit. */
body.ln-play{
  --f-body:"BL Body","BL Body Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"BL Display","BL Display Fallback","BL Body",system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --paper:#f4f9ff; --surface:#ffffff; --sunk:#e6f1fc;
  --surface-up:#eef4fb;   /* a card that stands on a --surface band: a real step from white in light (owner, 19 Oct: the Continue card and Practise were white on white), a step lighter than --surface in dark */
  --track:var(--sunk);   /* an empty progress track: light, the sunk tone already reads on the page (1.08:1) */
  --ink:#15365a; --ink-2:#2c4a6b; --ink-3:#536b88;
  --ink-rgb:21,54,90;
  --rule:rgba(var(--ink-rgb),.12); --rule-2:rgba(var(--ink-rgb),.22);
  --study:#0d9aa7; --study-ink:#08707a; --study-tint:#dcf3f2;
  /* primary buttons (owner, 9 Oct: "White text - why not?"): white on a deeper teal, 4.76:1 (navy on --study was
     3.95, white on it 3.39); hover and pressed a step deeper, the lip deeper still. The same in the dark theme (the
     fill is 3.8:1 against the dark page). --study stays for accents, progress and icons. */
  --study-btn:#0a7f8a; --study-btn-hover:#097883; --study-btn-press:#09737e; --study-btn-lip:#065a62; --on-study-btn:#ffffff;
  --btn-off-edge:#7a8fa8;   /* a disabled button's edge: 3.1:1 on the page, so its shape still reads */
  /* secondary buttons (owner, 9 Oct: in dark mode they were darker than the page, holes not buttons): always a tone
     ABOVE the page and cards, an edge of 3:1 or more against both, the same raised lip as the answer cards */
  --btn-2:#ffffff; --btn-2-hover:#eef5fd; --btn-2-press:#e2edf9; --btn-2-edge:#7a8fa8; --btn-2-lip:#c3d2e3;
  /* a speech bubble's outline: one solid colour, so the tail and the body join without a seam */
  --say-edge:color-mix(in srgb,var(--ink) 24%,var(--surface));
  --blue:#3a9be8; --blue-ink:#1f6fb5; --blue-tint:#e3f0fc;
  --play:#6a4bc4; --play-ink:#5536ad; --play-tint:#eee8fb;
  --pink:#e0559a; --pink-ink:#b8326f; --pink-tint:#fde8f1;
  /* Music (owner, 10 Oct: pink, "cream looks boring", over the 9 Oct brass; tokens.json palette.subjects.music). --music-2
     is the deeper rose partner for gradients; --music-glow and --music-row are the dark part glow and the active row */
  --music:#e0559a; --music-ink:#b8326f; --music-tint:#fde8f1; --music-2:#c84283; --music-2-tint:#fadbea; --music-glow:#fde8f1; --music-row:#fde8f1;
  --gold:#ffc23d; --gold-ink:#8a5d00; --gold-tint:#fff2cc;
  --navy:#15365a; --on-navy:#ffffff; --on-navy-2:#b9cde3;
  --ok:#13804f; --warn-ink:#8a4b00; --warn-bg:#ffe9c2; --bad:#c0362c;
  /* what is free (owner, 13 Oct: one colour, site-wide, so it is obvious what is free): a leaf green, never teal (the brand),
     never pink (Music) and never a done or progress mark. --free is text, ticks and fills; --free-bg is its chip and the
     text on a --free fill. Light: 5.3:1 on its bg, 5.7:1 on the page, 6.0:1 on a card, 5.1:1 on the music tint. */
  --free:#25721a; --free-bg:#e4f6da;
  --code-bg:#0b1626; --code-ink:#e6eef7;
  --shadow:0 1px 2px rgba(21,54,90,.06),0 6px 18px rgba(21,54,90,.07);
  --r1:14px; --r2:18px; --r3:26px; --pill:10px; --chip:4px;   /* no pills (brand/identity/LAYOUT.md, COLOUR.md #13): --pill is a key's 10 px corner now; label chips 0.12 x their height */
  --wrap:1200px;
  --bg:var(--paper); --card:var(--surface); --text:var(--ink); --muted:var(--ink-3); --text-2:var(--ink-2);
  --accent:var(--study); --accent-text:var(--study-ink); --accent2:var(--play); --br:var(--r2);
  --hdr-bg:var(--surface);
  /* motion (docs/research/MOTION_DESIGN_DEVONHOUSE.md, T1 and T5): the house curves, and durations by size and
     importance. Enter with out, leave with in (and faster); spring only on small things that are touched. A list
     staggers 35ms an item, capped at 6 (the rest arrive with the sixth). Reduced motion: the end state at once. */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.55,0,1,.45); --ease-io:cubic-bezier(.45,0,.55,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-soft:cubic-bezier(.3,1.3,.6,1);
  --dur-press:75ms; --dur-hover:175ms; --dur-enter:220ms; --dur-leave:160ms; --dur-panel:300ms;
  --dur-page-out:140ms; --dur-page-in:240ms; --dur-reward:1s; --stagger:35ms; --stagger-max:6;
  color-scheme:light;
}
:root[data-theme="dark"] body.ln-play{
  --paper:#0b1626; --surface:#12233a; --sunk:#081120;
  --surface-up:#1d3453;   /* 7% lighter than --surface: a card on a --surface band stays a card (owner, 15 Oct: the home's plan cards vanished) */
  --track:#1a2c44;   /* dark: lighter than the page (1.29:1), since a track darker than #0b1626 (sunk, 1.04:1) vanishes */
  --ink:#ffffff; --ink-2:#c8d7e8; --ink-3:#9db3c9;
  --ink-rgb:200,215,232;
  --rule:rgba(157,179,201,.18); --rule-2:rgba(157,179,201,.32);
  --study:#0d9aa7; --study-ink:#2cc6d1; --study-tint:#0f3438;
  --btn-off-edge:#5d7591;   /* 3.8:1 on the dark page */
  --btn-2:#22385a; --btn-2-hover:#2a4368; --btn-2-press:#1b2f4b; --btn-2-edge:#6b829d; --btn-2-lip:#07101c;   /* edge 4.6:1 on the page, 4.0:1 on a card */
  --blue:#5aaff0; --blue-ink:#7cc0f5; --blue-tint:#13304f;
  --play:#8f74e8; --play-ink:#b6a1ff; --play-tint:#241d45;
  /* pink-tint dark: orchid, a cool jewel tone (owner, 18 Oct: no plum or maroon surfaces; #3a1a33 read brown) */
  --pink:#f07ab5; --pink-ink:#f59cc8; --pink-tint:#3a1650;
  /* music-tint dark: the same orchid as --pink-tint (coordinator, 19 Oct 2026: #3a1a33 was the plum the owner flagged);
     --music-ink on it 7.4:1, ink 14.9:1 */
  --music:#f07ab5; --music-ink:#f59cc8; --music-tint:#3a1650; --music-2:#e169a5; --music-2-tint:#4a2242; --music-glow:#5a2a50; --music-row:#3d1d37;
  /* gold-tint / warn-bg dark: a deep wine under the gold ink, never a darkened gold (owner, 14 Oct: "Not poop colour";
     a dark yellow reads brown), redder and lighter than the orchid --music-tint so a gold tile and a pink one side by
     side stay two colours. gold-ink 9.7:1, warn-ink 8.2:1, ink 13.2:1, ink-2 9.0:1, ink-3 6.1:1 on it */
  /* 18 Oct: the wine read maroon on the tools page (owner: no brown or maroon dark surfaces). gold-tint is sapphire now,
     a cool jewel tone that gold ink sits on at 10:1; warn-bg keeps the wine for warnings */
  --gold:#ffc23d; --gold-ink:#ffd877; --gold-tint:#172a5e;
  --navy:#102a44; --on-navy-2:#a9c1da;
  --ok:#3fd59a; --warn-ink:#ffc23d; --warn-bg:#551c2a; --bad:#ff8a80;
  --free:#79dc84; --free-bg:#163a22;   /* dark: 7.5:1 on its bg, 10.7:1 on the page, 9.3:1 on a card, 9.0:1 on the music tint */
  --code-bg:#071020;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  --accent:var(--study); --accent-text:var(--study-ink);
  --dk-panel:#16304d; --danger:#ff8a80; --warn:#ffc23d;
  color-scheme:dark;
}
body.ln-play{--seg-track:var(--sunk)}
:root[data-theme="dark"] body.ln-play{--seg-track:rgba(157,179,201,.12)}
.segc{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;margin:0;border:0;border-radius:12px;background:var(--seg-track)}
.segc > button{min-height:44px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);
  font:700 15px/1.15 var(--f-body);cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
.segc > button:hover{color:var(--ink);background:rgba(var(--ink-rgb),.07)}
.segc > button[aria-selected="true"],.segc > button[aria-checked="true"],.segc > button[aria-pressed="true"]{background:var(--study-btn);color:var(--on-study-btn)}
:root[data-theme="dark"] .segc > button[aria-selected="true"],:root[data-theme="dark"] .segc > button[aria-checked="true"],:root[data-theme="dark"] .segc > button[aria-pressed="true"]{color:var(--on-study-btn)}
.segc > button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.segc.many{display:flex;flex-wrap:wrap;border-radius:12px}
.segc.many > button{flex:1 1 auto;border-radius:9px}
@media (pointer:coarse){.segc > button{min-height:44px}}
@media (prefers-reduced-motion:reduce){.segc > button{transition:none}}
.bl-bubble{position:relative;isolation:isolate;min-width:0;padding:12px 16px;overflow-wrap:anywhere;white-space:normal;text-overflow:clip;overflow:visible}
.bl-bubble:not(.is-drawn){background:var(--surface);border:2px solid var(--say-edge);border-radius:18px}
.bl-bubble-bg{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none}
.bl-bubble-bg path{fill:var(--surface);stroke:var(--say-edge);stroke-width:2;stroke-linejoin:round}