@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap');
/* Learn Anything: the Library and its reader (owner, 13 October 2026: "simpler, cleaner, like Apple or better").
   Apple's system type (San Francisco on Apple devices, Inter elsewhere), quiet translucent bars, grouped lists,
   book covers, and three reading themes. Everything is scoped to .lx (Library, reader); lessons, flashcards and GCSE
   screens are untouched. */
.lx{
  --lx-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lx-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lx-serif:ui-serif,"New York","Iowan Old Style",Charter,"Bitstream Charter",Georgia,serif;
  --lx-cover-font:ui-serif,"New York","Iowan Old Style","Sitka Heading","Sitka Display",Charter,"Bitstream Charter",Georgia,serif;
  --lx-bg:#fff;--lx-bg2:#f5f5f7;--lx-card:#fff;--lx-text:#1d1d1f;--lx-text2:#6e6e73;--lx-text3:#8e8e93;
  --lx-sep:rgba(60,60,67,.16);--lx-fill:rgba(118,118,128,.12);--lx-fill2:rgba(118,118,128,.22);
  --lx-tint:#4540eb;--lx-tint-bg:rgba(69,64,235,.1);--lx-green:#248a3d;--lx-orange:#c45a00;--lx-orange-bg:rgba(255,149,0,.14);--lx-red:#d70015;
  --lx-bar:rgba(255,255,255,.76);--lx-shadow:0 0 0 .5px rgba(0,0,0,.08),0 12px 40px rgba(0,0,0,.16);
  font-family:var(--lx-font);color:var(--lx-text);background:var(--lx-bg);min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
.lx[data-theme="sepia"]{--lx-bg:#f8f1e3;--lx-bg2:#efe4cd;--lx-card:#fbf6ec;--lx-text:#3b2e1e;--lx-text2:#776350;--lx-text3:#98846b;--lx-sep:rgba(91,70,40,.2);--lx-fill:rgba(120,95,60,.12);--lx-fill2:rgba(120,95,60,.22);--lx-tint:#8f4f14;--lx-tint-bg:rgba(143,79,20,.12);--lx-bar:rgba(248,241,227,.8)}
.lx[data-theme="dark"]{--lx-bg:#151517;--lx-bg2:#1f1f22;--lx-card:#232326;--lx-text:#f5f5f7;--lx-text2:#a1a1a6;--lx-text3:#86868b;--lx-sep:rgba(255,255,255,.13);--lx-fill:rgba(118,118,128,.24);--lx-fill2:rgba(118,118,128,.34);--lx-tint:#9a96ff;--lx-tint-bg:rgba(154,150,255,.16);--lx-green:#30d158;--lx-orange:#ff9f0a;--lx-orange-bg:rgba(255,159,10,.16);--lx-red:#ff453a;--lx-bar:rgba(21,21,23,.76);--lx-shadow:0 0 0 .5px rgba(255,255,255,.1),0 12px 40px rgba(0,0,0,.55);color-scheme:dark}
body[data-view="learn"],body[data-view="learnread"]{background:#fff}
body[data-view="learn"][data-lx-theme="sepia"],body[data-view="learnread"][data-lx-theme="sepia"]{background:#f8f1e3}
body[data-view="learn"][data-lx-theme="dark"],body[data-view="learnread"][data-lx-theme="dark"]{background:#151517}
body[data-view="learn"] #root.focus-root,body[data-view="learnread"] #root.focus-root{max-width:none!important;padding:0!important;margin:0!important;min-height:0;height:auto}
.lx :where(p){color:inherit}   /* design.css greys every <p> (--mut); reading text is near-black. Low specificity, so classes below still set their own colour. */
.lx .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lx button,.lx a,.lx input{-webkit-tap-highlight-color:transparent}
.lx :focus-visible{outline:2px solid var(--lx-tint);outline-offset:2px}
.lx h1:focus,.lx article:focus,.lx section:focus{outline:none}
.lx-ic{width:22px;height:22px;flex-shrink:0}

/* ---------- bar ---------- */
.lx-bar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:56px;padding:0 max(12px,env(safe-area-inset-left)) 0 max(8px,env(safe-area-inset-left));transition:background .25s,box-shadow .25s}
.lx-bar.is-scrolled{background:var(--lx-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--lx-sep)}
.lx-back{justify-self:start;display:inline-flex;align-items:center;gap:1px;min-height:44px;border:0;background:none;color:var(--lx-tint);font:400 17px/1 var(--lx-font);letter-spacing:-.01em;padding:0 10px 0 2px;border-radius:12px;cursor:pointer;max-width:100%}
.lx-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-back .lx-ic{width:24px;height:24px;stroke-width:2.1}
.lx-bar-title{justify-self:center;font:600 17px/1.2 var(--lx-font);letter-spacing:-.01em;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity .22s,transform .22s;pointer-events:none}
.lx-bar.is-scrolled .lx-bar-title{opacity:1;transform:none}
.lx-bar-actions{justify-self:end;display:flex;align-items:center;gap:2px}
.lx-icon{width:44px;height:44px;display:inline-grid;place-items:center;border:0;background:none;color:var(--lx-tint);border-radius:12px;cursor:pointer;padding:0;transition:background .15s,transform .12s}
.lx-aa{font:600 18px/1 var(--lx-font);letter-spacing:-.02em}
.lx-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;margin-right:6px;border:0;border-radius:999px;background:var(--lx-tint-bg);color:var(--lx-tint);font:600 14px/1 var(--lx-font);cursor:pointer;transition:transform .12s,opacity .12s}
.lx-pill b{min-width:18px;padding:3px 6px;border-radius:999px;background:var(--lx-tint);color:#fff;font-size:11px;line-height:1;text-align:center}
@media (hover:hover){.lx-icon:hover,.lx-back:hover{background:var(--lx-fill)}.lx-pill:hover{opacity:.85}}
.lx-icon:active,.lx-pill:active,.lx-btn:active{transform:scale(.96)}

/* ---------- buttons ---------- */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:999px;font:600 16px/1 var(--lx-font);letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:transform .12s,opacity .15s}
.lx-btn .lx-ic{width:18px;height:18px}
.lx-btn-fill{background:var(--lx-tint);color:#fff}
.lx-btn-tint{background:var(--lx-tint-bg);color:var(--lx-tint)}
.lx-btn-plain{background:none;color:var(--lx-tint)}
.lx[data-theme="dark"] .lx-btn-fill,.lx[data-theme="dark"] .lx-pill b,.lx[data-theme="dark"] .lr-skim-btn[aria-pressed="true"]{color:#151517}   /* dark text on the light dark-mode tint (white would be 2.6:1) */
@media (hover:hover){.lx-btn-fill:hover,.lx-btn-tint:hover{opacity:.88}}

/* ---------- book covers ----------
   A coloured board, the title set in type, and a clay sculpture underneath. The sculptures are rendered in Blender
   (prototypes/library-books) in grey; the cover's colour is laid over them with the "overlay" blend, so the mid-grey
   backdrop shows the colour itself and the sculpture appears in lighter and darker shades of it. Type scales with
   the cover (cqw units), so the same cover works at every size. */
.lx-c0{--tint:#5652e3;--tint2:#2f2b9e;--ink:#fff;--soft:#ecebfd}
.lx-c1{--tint:#cfdcca;--tint2:#a5bd9f;--ink:#1e2a1c;--soft:#eef3ec}
.lx-c2{--tint:#8b4ca8;--tint2:#57286f;--ink:#fff;--soft:#f3ebf7}
.lx-c3{--tint:#f2c9aa;--tint2:#e0a074;--ink:#3b2417;--soft:#fcefe5}
.lx-c4{--tint:#2f7f57;--tint2:#1a5337;--ink:#fff;--soft:#e8f3ed}
.lx-c5{--tint:#386cbd;--tint2:#1d427e;--ink:#fff;--soft:#e9effa}
.lx-c6{--tint:#c24a6e;--tint2:#8f2645;--ink:#fff;--soft:#fbebf0}
.lx-c7{--tint:#e6dccb;--tint2:#c9b89b;--ink:#2a251e;--soft:#f5f1ea}
.lx-cover{position:relative;isolation:isolate;display:block;aspect-ratio:3/4;border-radius:3px 8px 8px 3px;overflow:hidden;color:var(--ink);background:var(--tint);container-type:inline-size;box-shadow:0 1px 1px rgba(0,0,0,.06),0 2px 5px rgba(0,0,0,.08),0 14px 28px -8px rgba(0,0,0,.28)}
.lx-cover-art{position:absolute;inset:0;z-index:-1;background-color:var(--tint);background-size:cover;background-position:center bottom;background-blend-mode:overlay,normal}
.lx-art-0 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-openbook.webp)}
.lx-art-1 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-stack.webp)}
.lx-art-2 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-arches.webp)}
.lx-art-3 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-steps.webp)}
.lx-art-4 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-hoop.webp)}
.lx-art-5 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-cairn.webp)}
.lx-art-6 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-bauhaus.webp)}
.lx-art-7 .lx-cover-art{background-image:linear-gradient(160deg,var(--tint) 35%,var(--tint2)),url(library/cover-shelf.webp)}
.lx-cover::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 3.5%,rgba(255,255,255,.18) 4.6%,rgba(255,255,255,0) 8.5%),linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.lx-cover-text{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:16px 14px 0 19px;padding:8.5cqw 8cqw 0 10.5cqw}
.lx-cover-kind{font:600 10px/1.2 var(--lx-font);font-size:5cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.lx-cover-title{margin-top:8px;margin-top:4.4cqw;font:600 20px/1.1 var(--lx-cover-font);font-size:10.6cqw;letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.lx-cover-title.is-mid{font-size:9.3cqw}
.lx-cover-title.is-long{font-size:8cqw;line-height:1.12;-webkit-line-clamp:6}
.lx-cover-by{margin-top:6px;margin-top:3.6cqw;font:500 11px/1.3 var(--lx-font);font-size:5.6cqw;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-cover-small{width:58px;border-radius:2px 5px 5px 2px;flex-shrink:0}
.lx-cover-mini{width:40px;border-radius:2px 4px 4px 2px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.12)}
.lx-cover-small .lx-cover-text,.lx-cover-mini .lx-cover-text{display:none}
/* a book's own cover (owner, 16 October 2026): the picture fills the cover; the spine shading still sits over it */
.lx-cover-pic{background:var(--tint)}
.lx-cover-img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.li-cover{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:400 14px/1.4 var(--lx-font);color:var(--lx-text2)}

/* ---------- a cover as a 3D book: front board, page edges (rendered in Blender), back board ---------- */
.lx-book{position:relative;display:block;--d:17px;transform-style:preserve-3d;transform:perspective(1200px) rotateY(0deg) scale(1);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lx-book>.lx-cover{transform:translateZ(calc(var(--d) / 2))}
.lx-book-edge{position:absolute;top:1.5%;bottom:1.5%;right:calc(var(--d) / -2 + 2px);width:var(--d);transform:rotateY(90deg);background:#f3eee4 url(library/pages.webp) center/100% 100%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.lx-book-back{position:absolute;inset:0;transform:translateZ(calc(var(--d) / -2)) rotateY(180deg);background:var(--tint2);border-radius:8px 3px 3px 8px}

/* ---------- the Library ---------- */
.lb-main{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px) 100px}
.lb-head{margin:6px 0 22px}
.lb-head h1{font:700 clamp(34px,4vw,44px)/1.05 var(--lx-display);letter-spacing:-.028em;margin:0}
.lb-head p{font:400 15px/1.4 var(--lx-font);color:var(--lx-text2);margin:6px 0 0}
.lb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 34px}
.lx-search{flex:1 1 260px;max-width:440px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:12px;background:var(--lx-fill);color:var(--lx-text3);transition:box-shadow .15s}
.lx-search .lx-ic{width:18px;height:18px}
.lx-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:400 16px/1 var(--lx-font);color:var(--lx-text);outline:none;padding:0}
.lx-search input::placeholder{color:var(--lx-text3)}
.lx-search:focus-within{box-shadow:0 0 0 3px var(--lx-tint-bg)}
.lx-seg{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:var(--lx-fill)}
.lx-seg button{min-height:30px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--lx-text);font:500 13px/1 var(--lx-font);cursor:pointer;white-space:nowrap;transition:background .15s,box-shadow .15s}
.lx-seg button[aria-pressed="true"]{background:var(--lx-card);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05);font-weight:600}
.lb-h2{font:700 22px/1.2 var(--lx-display);letter-spacing:-.018em;margin:0 0 16px}
.lb-grid,.lb-sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:44px 30px}
.lb-book{position:relative;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--lx-text);text-align:left;cursor:pointer;border-radius:12px}
.lb-book[hidden]{display:none}
.lb-book .lx-book{margin-bottom:10px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.lb-book:hover .lx-book{transform:perspective(1200px) rotateY(-30deg) scale(1.03)}}
.lb-book:active .lx-book{transform:perspective(1200px) rotateY(0deg) scale(.97)}
.lb-book-meta{display:flex;align-items:center;gap:6px;font:400 13px/1.35 var(--lx-font);color:var(--lx-text2)}
.lb-new{width:8px;height:8px;border-radius:50%;background:var(--lx-tint);flex-shrink:0}
.lb-prog{display:block;height:4px;margin-top:4px;border-radius:2px;background:var(--lx-fill2);overflow:hidden}
.lb-prog i{display:block;height:100%;border-radius:2px;background:var(--lx-tint)}
.lb-done{display:inline-flex;align-items:center;gap:4px;font:500 13px/1 var(--lx-font);color:var(--lx-green);margin-top:2px}
.lb-done .lx-ic{width:14px;height:14px;stroke-width:2.6}
.lb-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px);margin:0 0 52px;padding:clamp(30px,4.2vw,52px) clamp(28px,5vw,72px);border-radius:28px;background:linear-gradient(120deg,var(--soft),var(--lx-bg2) 88%);overflow:hidden}
.lb-hero-book{position:relative;isolation:isolate;display:block;width:clamp(150px,17vw,214px);padding:0 0 12px;border:0;background:none;cursor:pointer;border-radius:10px}
.lb-hero-book::after{content:"";position:absolute;z-index:-1;left:6%;right:-10%;bottom:-6px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.26),rgba(0,0,0,0));animation:lx-shadow 7s ease-in-out infinite}
.lx-book-hero{--d:24px;transform:perspective(1200px) translateY(0) rotateY(-26deg) rotateX(4deg);animation:lx-float 7s ease-in-out infinite}
@keyframes lx-float{0%,100%{transform:perspective(1200px) translateY(0) rotateY(-26deg) rotateX(4deg)}50%{transform:perspective(1200px) translateY(-9px) rotateY(-21deg) rotateX(3deg)}}
@keyframes lx-shadow{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.7;transform:scaleX(.92)}}
.lx[data-theme="dark"] .lb-hero{background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 88%);background:linear-gradient(120deg,color-mix(in srgb,var(--tint) 30%,var(--lx-bg2)),var(--lx-bg2) 88%)}
.lx[data-theme="sepia"] .lb-hero{background:linear-gradient(120deg,color-mix(in srgb,var(--tint) 16%,var(--lx-bg2)),var(--lx-bg2) 88%)}
.lb-hero-text{min-width:0}
.lb-hero-eyebrow{font:600 13px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-text2);margin:0 0 10px}
.lb-hero-title{font:700 clamp(26px,3vw,38px)/1.1 var(--lx-display);letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
.lb-hero-meta{font:400 15px/1.45 var(--lx-font);color:var(--lx-text2);margin:0 0 20px}
.lb-hero-prog{display:flex;align-items:center;gap:12px;max-width:360px;margin:-6px 0 22px;font:500 14px/1 var(--lx-font);color:var(--lx-text2);white-space:nowrap}
.lb-hero-prog .lb-prog{flex:1;margin:0;height:5px}
.lb-none{color:var(--lx-text2);font:400 16px/1.5 var(--lx-font);padding:30px 0}
.lb-none[hidden]{display:none}
.lb-loading{color:var(--lx-text2);font:400 15px/1.5 var(--lx-font);padding:60px 0;text-align:center}
.lb-empty{max-width:440px;margin:12vh auto 0;text-align:center}
.lb-empty-art{width:132px;margin:0 auto 26px;border-radius:14px;transform:rotate(-4deg)}
.lb-empty h2{font:700 24px/1.2 var(--lx-display);letter-spacing:-.018em;margin:0 0 8px}
.lb-empty p{font:400 16px/1.5 var(--lx-font);color:var(--lx-text2);margin:0 0 22px}
/* free sample books (owner, 16 October 2026): first on an empty shelf, under your documents otherwise */
.lb-samples{margin-top:64px}
.lb-samples-first{margin-top:10px}
.lb-samples-sub{font:400 15px/1.5 var(--lx-font);color:var(--lx-text2);margin:-8px 0 24px;max-width:560px}
.lb-sample-about{font:400 13px/1.45 var(--lx-font);color:var(--lx-text2)}
.lb-sample[aria-busy="true"]{opacity:.55;cursor:progress}
.lb-own{margin-top:64px;max-width:560px}
.lb-own p{font:400 16px/1.5 var(--lx-font);color:var(--lx-text2);margin:0 0 18px}
.lb-own-actions{display:flex;flex-wrap:wrap;gap:10px}
.lx-banner{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:12px 6px 12px 16px;border-radius:14px;background:var(--lx-bg2);font:400 14px/1.45 var(--lx-font)}
.lx-banner p{flex:1;margin:4px 0}
.lx-banner-warn{background:var(--lx-orange-bg)}
.lx-banner .lx-icon{width:32px;height:32px;color:var(--lx-text2)}
.lx-banner .lx-ic{width:16px;height:16px}

/* ---------- the reader ---------- */
/* About 68 characters a line at every text size (research: 50-75), body text from 18 px up. */
.lr{--lr-size:20px;--lr-measure:34em}
.lr[data-size="0"]{--lr-size:17px}.lr[data-size="1"]{--lr-size:18.5px}.lr[data-size="3"]{--lr-size:22px}.lr[data-size="4"]{--lr-size:24px}
.lr-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
/* Highlight words while reading: see what they mean, or make flashcards from them (owner, 17 and 18 October 2026) */
.lr-mkbar{position:fixed;z-index:60;display:inline-flex;align-items:stretch;height:38px;border-radius:999px;background:var(--lx-text);color:var(--lx-bg);box-shadow:0 8px 24px -8px rgba(0,0,0,.45),0 0 0 .5px var(--lx-sep);overflow:hidden;-webkit-user-select:none;user-select:none}
.lr-mkbar[hidden]{display:none}
.lr-mkbar button{display:inline-flex;align-items:center;gap:7px;padding:0 15px 0 12px;border:0;background:none;color:inherit;font:600 14px/1 var(--lx-font);letter-spacing:0;cursor:pointer}
.lr-mkbar button+button{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--lx-bg) 28%,transparent)}
.lr-mkbar svg{width:17px;height:17px;flex-shrink:0}
.lr-mkbar button:active{background:color-mix(in srgb,var(--lx-bg) 14%,transparent)}
@media (prefers-reduced-motion:no-preference){.lr-mkbar:not([hidden]){animation:lx-pop .16s cubic-bezier(.2,.8,.2,1)}}
/* Key terms in the reader: tap one for its meaning */
.lr-kt{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,var(--lx-tint) 70%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;border-radius:3px}
.lr-kt:hover{text-decoration-color:var(--lx-tint)}
.lr-kt:focus-visible{outline:2px solid var(--lx-tint);outline-offset:2px}
/* What it means: a key term, the notes' explanation, or a looked-up meaning, with adding it to your lessons and flashcards */
.lmn-term{margin:2px 2px 6px;font:700 20px/1.25 var(--lx-display);letter-spacing:-.015em}
.lmn-meaning{margin:0 2px 8px;font:400 16.5px/1.5 var(--lx-font);color:var(--lx-text)}
.lmn-from,.lmn-note{margin:0 2px 12px;font:400 13px/1.45 var(--lx-font);color:var(--lx-text2)}
.lmn-none,.lmn-busy{margin:0 2px 10px;font:400 15.5px/1.5 var(--lx-font);color:var(--lx-text2)}
.lmn-error{margin:0 2px 12px;font:500 14px/1.45 var(--lx-font);color:var(--lx-red)}
.lmn-status{display:flex;align-items:flex-start;gap:8px;margin:4px 2px 12px;padding:10px 12px;border-radius:12px;background:var(--lx-tint-bg);font:500 14px/1.45 var(--lx-font);color:var(--lx-text)}
.lmn-status .lx-ic{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--lx-tint);stroke-width:2.4}
.lmn-sheet .lm-actions{flex-wrap:wrap}
.lmn-sheet .lm-actions .lmn-add,.lmn-sheet .lm-actions .lmn-look{flex:1 1 100%}
.lmn-look .lx-ic,.lm-look .lx-ic{width:16px;height:16px}
.lm-look{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:8px 12px;border:0;border-radius:999px;background:var(--lx-fill);color:var(--lx-tint);font:600 13.5px/1 var(--lx-font);cursor:pointer}
/* New flashcards: the cards a highlight could make, each ticked or not, switchable and editable, shown before any is added */
.lm-intro{margin:-2px 2px 12px;font:400 14px/1.45 var(--lx-font);color:var(--lx-text2)}
.lm-cards{display:flex;flex-direction:column;gap:10px}
.lm-card{padding:6px 12px 10px;border:1.5px solid var(--lx-sep);border-radius:14px;background:var(--lx-card);transition:border-color .15s,background-color .15s}
.lm-card.is-on{border-color:var(--lx-tint);background:var(--lx-tint-bg)}
.lm-card-top{display:flex;align-items:center;gap:8px;margin:0 -6px 2px}
.lm-pick{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 6px;border:0;border-radius:10px;background:none;color:var(--lx-text);font:600 14.5px/1 var(--lx-font);cursor:pointer}
.lm-tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;box-sizing:border-box;border:1.8px solid var(--lx-text3);border-radius:50%;color:transparent;transition:background-color .15s,border-color .15s}
.lm-tick .lx-ic{width:14px;height:14px;stroke-width:2.8}
.lm-card.is-on .lm-tick{background:var(--lx-tint);border-color:var(--lx-tint);color:#fff}
.lx[data-theme="dark"] .lm-card.is-on .lm-tick{color:#151517}   /* dark tick on the light dark-mode tint */
.lm-swap{display:inline-flex;align-items:center;gap:5px;min-height:32px;margin-left:auto;padding:0 11px;border:0;border-radius:999px;background:var(--lx-fill);color:var(--lx-text2);font:600 13px/1 var(--lx-font);cursor:pointer}
.lm-swap .lx-ic{width:15px;height:15px}
@media (hover:hover){.lm-swap:hover,.lm-pick:hover{color:var(--lx-text)}}
.lm-line{display:block;margin:2px 0 0}
.lm-line>span{display:block;margin:6px 2px 2px;font:600 11.5px/1.2 var(--lx-font);letter-spacing:.04em;text-transform:uppercase;color:var(--lx-text3)}
.lm-line textarea{display:block;width:calc(100% + 4px);min-height:0;box-sizing:border-box;margin:0 -2px;padding:5px 6px;border:0;border-radius:8px;background:transparent;color:var(--lx-text);font:400 16px/1.45 var(--lx-font);resize:none;outline:none;overflow:hidden}
.lm-line textarea:focus{background:var(--lx-card);box-shadow:0 0 0 2px var(--lx-tint)}
.lm-line textarea::placeholder{color:var(--lx-text3)}
.lm-from{margin:6px 2px 0;font:400 12.5px/1.4 var(--lx-font);color:var(--lx-text2)}
.lm-own{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:10px 0 0;padding:13px;border:1.5px dashed var(--lx-sep);border-radius:14px;background:none;color:var(--lx-tint);font:600 15px/1 var(--lx-font);cursor:pointer}
.lm-own .lx-ic{width:18px;height:18px}
.lm-actions{position:sticky;bottom:0;z-index:1;display:flex;gap:10px;justify-content:flex-end;margin:6px 0 0;padding:12px 0 2px;background:var(--lx-card)}
.lm-add:disabled{opacity:.45;cursor:default}
.lx-sheet.lm-sheet{scroll-padding-bottom:84px}   /* a card brought into view stops above the Add bar */
@media (min-width:701px){.lx-sheet.lm-sheet{width:min(440px,calc(100vw - 28px))}}
.lc-remove{display:block;margin:10px auto 0;border:0;background:none;padding:6px 10px;color:var(--lx-text3);font:500 13px/1.2 var(--lx-font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lc-remove:hover{color:var(--lx-red)}

.lr-progress span{display:block;height:100%;background:var(--lx-tint);transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}
.lr-main{padding:0 clamp(20px,5vw,48px) 120px}
.lr-article{max-width:var(--lr-measure);margin:0 auto;font:400 var(--lr-size)/1.62 var(--lx-font);letter-spacing:-.003em;animation:lx-fade .35s ease-out}
@keyframes lx-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lr .lx-bar{transition:transform .28s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s}
.lr .lx-bar.is-hidden{transform:translateY(-100%)}
.lr .lx-bar-title{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}
.lr .lx-bar-title b{font:600 15px/1.2 var(--lx-font);max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .lx-bar-title small{font:400 12px/1.2 var(--lx-font);color:var(--lx-text2)}
.lr-skim-btn{border:0;background:var(--lx-tint-bg);color:var(--lx-tint);font:600 13px/1 var(--lx-font);padding:7px 12px;border-radius:999px;cursor:pointer;transition:transform .12s,opacity .15s}
.lr-skim-btn:active{transform:scale(.96)}
.lr-skim-btn[aria-pressed="true"]{background:var(--lx-tint);color:#fff}
.lr[data-skim="1"] .lr-rest,.lr[data-skim="1"] .lr-lead,.lr[data-skim="1"] .lr-intro,.lr[data-skim="1"] .lr-row-why,.lr[data-skim="1"] .lr-note{display:none}
.lr[data-skim="1"] .lr-list li{margin-bottom:.4em}
.lr-skim-bar{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--lx-card);box-shadow:var(--lx-shadow);font:500 14px/1 var(--lx-font);color:var(--lx-text);white-space:nowrap;animation:lx-pop .2s cubic-bezier(.2,.8,.2,1)}
.lr-skim-bar[hidden]{display:none}
.lr-skim-bar .lx-btn{min-height:36px;padding:0 16px;font-size:14px}
.lr[data-font="serif"] .lr-article{font-family:var(--lx-serif);line-height:1.62;letter-spacing:0}
.lr-head{margin:clamp(12px,5vh,48px) 0 44px}
.lr-eyebrow{font:600 13px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-text2);margin:0 0 14px}
.lr-head h1{font:700 clamp(36px,5vw,60px)/1.04 var(--lx-display);letter-spacing:-.032em;margin:0 0 22px;text-wrap:balance}
.lr-dek{font:500 clamp(21px,2.2vw,27px)/1.38 var(--lx-display);letter-spacing:-.015em;color:var(--lx-text);margin:0 0 22px;text-wrap:pretty}
.lr-dek strong{font-weight:700}
.lr-byline{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin:0;font:400 15px/1.5 var(--lx-font);color:var(--lx-text2)}
.lr-byline a{display:inline-flex;align-items:center;gap:1px;color:var(--lx-tint);text-decoration:none}
.lr-byline a .lx-ic{width:15px;height:15px}
.lr-intro{margin:0 0 48px;padding-top:22px;border-top:.5px solid var(--lx-sep)}
.lr-who{font:400 .8em/1.55 var(--lx-font);color:var(--lx-text2);margin:0 0 .8em}
.lr-who span{font-weight:600;color:var(--lx-text)}
.lr-sec{margin:0 0 3.1em;scroll-margin-top:70px}
.lr-sec h2{display:flex;align-items:center;gap:.45em;font:700 1.42em/1.2 var(--lx-display);letter-spacing:-.022em;margin:0 0 .75em;text-wrap:balance}
.lr[data-font="serif"] .lr-sec h2{font-family:var(--lx-display)}
.lr-h-ic{width:.92em;height:.92em;stroke-width:2}
.lr-sec-you .lr-h-ic{color:var(--lx-green)}
.lr-sec-caution .lr-h-ic{color:var(--lx-orange)}
.lr-sec-recall .lr-h-ic,.lr-sec-ni .lr-h-ic{color:var(--lx-tint)}
.lr-article p{margin:0 0 1em}
.lr-article strong{font-weight:650}
.lr-sub{font:600 1.04em/1.35 var(--lx-font);letter-spacing:-.01em;margin:1.7em 0 .45em}
.lr-sec h2+.lr-sub{margin-top:.1em}
.lr-article .lr-lead{color:var(--lx-text2);font-size:.88em;margin-top:-.15em}
.lr-idea{font:600 1.12em/1.3 var(--lx-display);letter-spacing:-.012em;margin:1.7em 0 .45em}
.lr-list{list-style:none;margin:0 0 1.15em;padding:0}
.lr-list li{position:relative;margin:0 0 .58em;padding-left:1.15em}
.lr-list li::before{content:"";position:absolute;left:.18em;top:.66em;width:.3em;height:.3em;border-radius:50%;background:var(--lx-text3)}
.lr-list li.lr-l1{margin-left:1.15em;font-size:.95em}
.lr-list li.lr-l1::before{background:none;border:1.3px solid var(--lx-text3);width:.26em;height:.26em;top:.7em}
.lr-dot{margin:0 .45em}
.lr-article .lr-note{font:400 .8em/1.5 var(--lx-font);color:var(--lx-text2);margin:-.35em 0 1.2em}
.lr-recall{list-style:none;margin:0;padding:0;border-top:.5px solid var(--lx-sep)}
.lr-recall li{border-bottom:.5px solid var(--lx-sep)}
.lr-q{display:flex;align-items:flex-start;gap:14px;width:100%;padding:.8em 2px;border:0;background:none;color:inherit;font:inherit;line-height:1.5;text-align:left;cursor:pointer}
.lr-q-n{min-width:1.3em;font:600 .74em/2 var(--lx-font);color:var(--lx-text3)}
.lr-q-t{flex:1}
.lr-q-c{width:26px;height:26px;margin-top:.12em;border-radius:50%;border:1.6px solid var(--lx-text3);display:grid;place-items:center;flex-shrink:0;color:transparent;transition:background .15s,border-color .15s,transform .15s}
.lr-q-c .lx-ic{width:16px;height:16px;stroke-width:2.8}
.lr-q[aria-pressed="true"] .lr-q-c{background:var(--lx-tint);border-color:var(--lx-tint);color:#fff;transform:scale(1.04)}
.lr-q[aria-pressed="true"] .lr-q-t{color:var(--lx-text2)}
.lr-table{overflow-x:auto;margin:.3em 0 1.5em;-webkit-overflow-scrolling:touch}
.lr-table table{width:100%;border-collapse:collapse;font:400 .78em/1.45 var(--lx-font);font-variant-numeric:tabular-nums}
.lr-table th,.lr-table td{padding:.7em .85em;border-bottom:.5px solid var(--lx-sep);text-align:left;vertical-align:top}
.lr-table th:first-child,.lr-table td:first-child{padding-left:0}
.lr-table thead th{font-weight:600;font-size:.92em;color:var(--lx-text2);vertical-align:bottom;border-bottom:1px solid var(--lx-sep)}
.lr-table tbody th{font-weight:600;min-width:5.5em}
.lr-table .lx-num{text-align:right;white-space:nowrap}
.lr-table .lx-nw{white-space:nowrap}
.lx-sheet:focus{outline:none}
.lr-table tbody tr:last-child>*{border-bottom:0}
.lr-eq{font-family:"Cambria Math","Latin Modern Math",Georgia,serif;text-align:center;padding:.5em;margin:0 0 1.2em;overflow-x:auto}
.lr-terms{margin:0 0 1.2em}
.lr-terms div{padding:.55em 0;border-bottom:.5px solid var(--lx-sep)}
.lr-terms dt{font-weight:600}
.lr-terms dd{margin:.1em 0 0;color:var(--lx-text2)}
.lr-code{background:var(--lx-bg2);border-radius:12px;padding:14px 16px;overflow-x:auto;font-size:.75em}
.lr-rows{list-style:none;margin:0;padding:0;border-top:.5px solid var(--lx-sep);font:400 .82em/1.5 var(--lx-font)}
.lr-rows li{padding:.9em 0;border-bottom:.5px solid var(--lx-sep)}
.lr-row-what{display:block}
.lr-row-where{color:var(--lx-text3)}
.lr-row-why{display:block;margin-top:.15em;color:var(--lx-text2)}
.lr-may{display:inline-block;margin:0 0 .45em;padding:.38em .75em;border-radius:999px;background:var(--lx-orange-bg);color:var(--lx-orange);font:600 .72em/1 var(--lx-font);letter-spacing:.01em}
.lr-end{display:flex;flex-direction:column;align-items:center;gap:14px;margin:5em 0 0;padding-top:3.2em;border-top:.5px solid var(--lx-sep);text-align:center}
.lr-end-mark{width:56px;height:56px;border-radius:50%;background:var(--lx-tint-bg);color:var(--lx-tint);display:grid;place-items:center}
.lr-end-mark .lx-ic{width:28px;height:28px;stroke-width:2.4}
.lr-end h2{margin:0;font:700 28px/1.2 var(--lx-display);letter-spacing:-.022em}
.lr-end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.lr-end-wait{max-width:34em;margin:0 auto;font:400 15px/1.5 var(--lx-font);color:var(--lx-text2);text-align:center}   /* the next part is still being prepared */
.lr-end .lx-btn:disabled,.lr-study .lx-btn:disabled{opacity:.5;cursor:default}
.lr-next{display:flex;align-items:center;gap:14px;width:min(100%,440px);margin-top:14px;padding:12px 14px;border:0;border-radius:16px;background:var(--lx-bg2);color:var(--lx-text);text-align:left;cursor:pointer;transition:transform .15s}
.lr-next:active{transform:scale(.98)}
.lr-next-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lr-next-text small{font:600 11px/1.2 var(--lx-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lx-text2)}
.lr-next-text b{font:600 15px/1.3 var(--lx-font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- opening a book: it lifts off the shelf, the cover swings open, the first page fills the screen ---------- */
.lx-fly{position:fixed;inset:0;z-index:300;pointer-events:none}
.lx.lx-fly{background:none;min-height:0}
.lx-fly-book{position:absolute;--d:14px;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.lx-fly-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0 50%;will-change:transform}
.lx-fly-lid>.lx-cover{position:absolute;inset:0;width:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lx-fly-inside{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px 3px 3px 8px;background:linear-gradient(90deg,var(--soft),var(--tint) 160%)}
.lx-fly-page{position:absolute;top:1.2%;bottom:1.2%;left:0;right:1.4%;transform:translateZ(calc(var(--d) / 2 - 1px));background:var(--page,#fff);box-shadow:inset 22px 0 26px -22px rgba(0,0,0,.22);border-radius:1px 3px 3px 1px}

/* ---------- studying: the lesson and the flashcards (Library documents only) ----------
   One idea or one question per screen, a thin progress bar, one big button at the bottom; flashcards are one card
   that turns over and is graded with two buttons or a swipe. The reading theme and text size carry over. */
body[data-view="learnlesson"],body[data-view="learnrecall"]{background:#f5f5f7}
body[data-view="learncards"]{background:#f5f5f7}
body[data-view="learnlesson"][data-lx-theme="sepia"],body[data-view="learnrecall"][data-lx-theme="sepia"]{background:#efe4cd}
body[data-view="learncards"][data-lx-theme="sepia"]{background:#efe4cd}
body[data-view="learnlesson"][data-lx-theme="dark"],body[data-view="learncards"][data-lx-theme="dark"],body[data-view="learnrecall"][data-lx-theme="dark"]{background:#151517}
body[data-view="learnlesson"] #root.focus-root,body[data-view="learncards"] #root.focus-root,body[data-view="learnrecall"] #root.focus-root{max-width:none!important;padding:0!important;margin:0!important;min-height:0;height:auto}
.ls{--lr-size:19px;--lr-measure:34em;display:flex;flex-direction:column}
.ls[data-size="0"]{--lr-size:16px}.ls[data-size="1"]{--lr-size:17.5px}.ls[data-size="3"]{--lr-size:21px}.ls[data-size="4"]{--lr-size:23px}
.lc{background:var(--lx-bg2)}
.lx[data-theme="dark"].lc{background:var(--lx-bg)}
.ls-top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:44px minmax(0,1fr) 64px;align-items:center;gap:12px;height:60px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));background:var(--lx-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.lc .ls-top{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.ls-x{color:var(--lx-text2)}
.ls-bar{justify-self:center;width:100%;max-width:520px;height:6px;border-radius:3px;background:var(--lx-fill);overflow:hidden}
.ls-bar i{display:block;height:100%;border-radius:3px;background:var(--lx-tint);transform-origin:0 50%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.ls-count{font:500 13px/1 var(--lx-font);color:var(--lx-text3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ls-main{flex:1;width:100%;max-width:680px;margin:0 auto;padding:clamp(18px,6vh,64px) 24px 200px;box-sizing:border-box}
.ls-step{animation:ls-in .36s cubic-bezier(.2,.8,.2,1)}
.ls-step.is-back{animation-name:ls-back}
@keyframes ls-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ls-back{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes ls-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ls-eyebrow{display:flex;align-items:center;gap:7px;font:600 13px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-text2);margin:0 0 14px}
.ls-eyebrow .lx-ic{width:16px;height:16px;color:var(--lx-tint);stroke-width:2.2}
.ls-title{font:700 clamp(28px,4vw,38px)/1.12 var(--lx-display);letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.ls-claim{font:600 clamp(26px,3.6vw,36px)/1.3 var(--lx-display);letter-spacing:-.02em;margin:0;text-wrap:pretty}
.ls-claim strong{font-weight:750;color:var(--lx-tint)}
.ls-body.lr-article{max-width:none;animation:none}
.ls-body .lr-table{margin-top:.6em}
.ls-prompt{font:650 clamp(23px,3vw,29px)/1.3 var(--lx-display);letter-spacing:-.018em;margin:0 0 26px;text-wrap:pretty}
.ls h1:focus{outline:none}
.ls-opts{display:flex;flex-direction:column;gap:12px}
.ls-opt{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:62px;padding:16px 18px;box-sizing:border-box;border:1.5px solid var(--lx-sep);border-radius:18px;background:var(--lx-card);color:var(--lx-text);font:400 17px/1.45 var(--lx-font);text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s,transform .12s,opacity .25s}
@media (hover:hover){.ls-opt:not(:disabled):hover,.ls-chip:hover{border-color:var(--lx-tint)}}
.ls-opt:active:not(:disabled),.ls-chip:active,.ls-slot-btn:active:not(:disabled){transform:scale(.985)}
.ls-key{flex-shrink:0;width:28px;height:28px;margin-top:-2px;border-radius:50%;display:grid;place-items:center;background:var(--lx-fill);font:600 13px/1 var(--lx-font);color:var(--lx-text2);transition:background-color .15s,color .15s}
.ls-key .lx-ic{width:16px;height:16px;stroke-width:2.6}
.ls-opt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ls-why{display:block;font:400 14.5px/1.45 var(--lx-font);color:var(--lx-text2);animation:ls-up .3s ease-out}
.ls-opt.is-picked{border-color:var(--lx-tint);background:var(--lx-tint-bg)}
.ls-opt.is-picked .ls-key{background:var(--lx-tint);color:#fff}
.ls-opt.is-right{border-color:var(--lx-green);background:rgba(36,138,61,.08)}
.ls-opt.is-wrong{border-color:var(--lx-orange);background:var(--lx-orange-bg)}
.ls-opt.is-right .ls-key{background:var(--lx-green);color:#fff}
.ls-opt.is-wrong .ls-key{background:var(--lx-orange);color:#fff}
.ls-opt:disabled,.ls-slot-btn:disabled{opacity:1;cursor:default}   /* design.css fades every disabled button; an answered question stays readable */
.ls-opt.is-dim{opacity:.45}
.ls-help{font:400 15px/1.45 var(--lx-font);color:var(--lx-text2);margin:-12px 0 18px}
.ls-seq{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.ls-slot{display:flex;align-items:center;gap:14px;min-height:58px;padding:0 16px;box-sizing:border-box;border:1.5px dashed var(--lx-fill2);border-radius:16px;color:var(--lx-text3)}
.ls-slot.is-filled,.ls-slot.is-right,.ls-slot.is-wrong{padding:0;border-style:solid}
.ls-slot.is-filled{border-color:var(--lx-tint);background:var(--lx-tint-bg)}
.ls-slot.is-right{border-color:var(--lx-green);background:rgba(36,138,61,.08)}
.ls-slot.is-wrong{border-color:var(--lx-orange);background:var(--lx-orange-bg)}
.ls-slot-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 16px;border:0;background:none;color:var(--lx-text);font:400 16.5px/1.45 var(--lx-font);text-align:left;cursor:pointer;border-radius:15px}
.ls-slot-btn:disabled{cursor:default}
.ls-slot-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ls-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--lx-fill);font:600 13px/1 var(--lx-font);color:var(--lx-text2)}
.ls-slot.is-filled .ls-n{background:var(--lx-tint);color:#fff}
.ls-slot.is-right .ls-n{background:var(--lx-green);color:#fff}
.ls-slot.is-wrong .ls-n{background:var(--lx-orange);color:#fff}
.ls-pool{display:flex;flex-direction:column;gap:10px}
.ls-chip{display:block;width:100%;padding:15px 18px;box-sizing:border-box;border:1.5px solid var(--lx-sep);border-radius:16px;background:var(--lx-card);color:var(--lx-text);font:400 16.5px/1.45 var(--lx-font);text-align:left;cursor:pointer;transition:border-color .15s,transform .12s;animation:ls-up .25s ease-out}
.ls-write textarea{display:block;width:100%;min-height:136px;box-sizing:border-box;padding:16px 18px;border:1.5px solid var(--lx-sep);border-radius:18px;background:var(--lx-card);color:var(--lx-text);font:400 17px/1.55 var(--lx-font);resize:vertical;outline:none;transition:border-color .15s,box-shadow .15s}
.ls-write textarea:focus{border-color:var(--lx-tint);box-shadow:0 0 0 4px var(--lx-tint-bg)}
.ls-write textarea::placeholder{color:var(--lx-text3)}
.ls-model{margin-top:16px;padding:18px 20px;border-radius:18px;background:var(--lx-bg2);animation:ls-up .3s ease-out}
.ls-model-label{font:600 12px/1.2 var(--lx-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lx-text2);margin:0 0 8px}
.ls-model p+p{font:400 17px/1.55 var(--lx-font);margin:0}
.ls-foot{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--lx-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -.5px 0 var(--lx-sep);transition:background-color .25s}
.ls-foot-in{max-width:680px;margin:0 auto;padding:14px 24px max(16px,env(safe-area-inset-bottom));box-sizing:border-box}
.ls-feedback{display:flex;flex-direction:column;gap:5px;margin:4px 0 14px;font:400 15.5px/1.5 var(--lx-font);color:var(--lx-text);animation:ls-up .28s cubic-bezier(.2,.8,.2,1)}
.ls-feedback b{display:flex;align-items:center;gap:8px;font:700 19px/1.2 var(--lx-display);letter-spacing:-.01em}
.ls-feedback b .lx-ic{width:22px;height:22px;stroke-width:2.6}
.ls-foot.is-right{background:#e9f6ec}
.ls-foot.is-wrong{background:#fff1e1}
.ls-foot.is-model{background:var(--lx-bg2)}
.lx[data-theme="dark"] .ls-foot.is-right{background:#17301e}
.lx[data-theme="dark"] .ls-foot.is-wrong{background:#3a2a12}
.lx[data-theme="sepia"] .ls-foot.is-right{background:#e3eccf}
.lx[data-theme="sepia"] .ls-foot.is-wrong{background:#f6e0c2}
.ls-foot.is-right .ls-feedback b{color:var(--lx-green)}
.ls-foot.is-wrong .ls-feedback b{color:var(--lx-orange)}
.ls-foot-row{display:flex;align-items:center;gap:12px}
.ls-prev{flex-shrink:0;width:54px;height:54px;border-radius:50%;background:var(--lx-fill);color:var(--lx-text)}
.ls-go{flex:1;min-height:54px;font-size:17px}
.ls-go:disabled{opacity:.35;cursor:default;transform:none}
.ls-foot.is-right .ls-go{background:var(--lx-green)}
.ls-foot.is-wrong .ls-go{background:var(--lx-orange)}
.lx[data-theme="dark"] .ls-foot.is-right .ls-go,.lx[data-theme="dark"] .ls-foot.is-wrong .ls-go{color:#151517}
.ls-two{flex:1;display:flex;gap:10px}
.ls-two .lx-btn{flex:1;min-height:54px;font-size:16px;padding:0 14px}
.ls-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(36px,11vh,120px)}
.ls-done h1{font:700 clamp(30px,4vw,40px)/1.1 var(--lx-display);letter-spacing:-.025em;margin:0 0 10px}
.ls-done>p{font:400 17px/1.5 var(--lx-font);color:var(--lx-text2);margin:0 0 30px;max-width:440px}
.ls-done-actions{display:flex;flex-direction:column;gap:10px;width:min(100%,340px)}
.ls-done-actions .lx-btn{min-height:52px}
.ls-ring{position:relative;width:150px;height:150px;margin:0 0 28px}
.ls-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ls-ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ls-ring-track{stroke:var(--lx-fill)}
.ls-ring-fill{stroke:var(--lx-tint);stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1) .15s}
.ls-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 38px/1 var(--lx-display);letter-spacing:-.03em}
.ls-ring b small{font-size:.5em;font-weight:600;margin:.35em 0 0 1px;color:var(--lx-text2)}
/* ---------- the lesson: notes, then questions on those notes (the GCSE rhythm), in the reader's design ----------
   White cards on a soft page; the parts of the lesson in a sidebar on a computer (a panel on a phone); the reader's
   type, themes and text size. */
.ls2{--lr-size:19px;min-height:100vh;min-height:100dvh;background:var(--lx-bg2)}
.lx[data-theme="dark"].ls2{background:var(--lx-bg)}
.ls2[data-size="0"]{--lr-size:16px}.ls2[data-size="1"]{--lr-size:17.5px}.ls2[data-size="3"]{--lr-size:21px}.ls2[data-size="4"]{--lr-size:23px}
.ls2-top{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:96px minmax(0,1fr) 96px;align-items:center;gap:12px;height:62px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));background:var(--lx-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--lx-sep)}
.ls2-track{justify-self:center;width:min(560px,100%);display:flex;flex-direction:column;gap:8px;min-width:0}
.ls2-crumb{font:600 12.5px/1.2 var(--lx-font);color:var(--lx-text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls2-track .ls-bar{max-width:none;height:5px}
.ls2-actions{justify-self:end;display:flex;gap:2px}
.ls2-body{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start}
.ls2-side{position:sticky;top:62px;height:calc(100vh - 62px);height:calc(100dvh - 62px);overflow:auto;overscroll-behavior:contain;padding:22px 14px 40px 16px;box-sizing:border-box;background:var(--lx-bg);box-shadow:.5px 0 0 var(--lx-sep)}
.lx[data-theme="dark"] .ls2-side{background:var(--lx-bg2)}
.ls2-side-head{display:flex;align-items:center;gap:12px;padding:2px 8px 12px}
.ls2-side-head b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 14px/1.3 var(--lx-font);letter-spacing:-.005em}
.ls2-side-head small{display:block;margin-top:3px;font:400 12.5px/1.3 var(--lx-font);color:var(--lx-text2)}
.ls2-sec{margin:18px 10px 6px;font:600 11.5px/1.2 var(--lx-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lx-text3)}
.ls2-list{list-style:none;margin:0;padding:0}
.ls2-part{display:flex;align-items:center;gap:11px;width:100%;min-height:40px;padding:8px 10px;box-sizing:border-box;border:0;border-radius:10px;background:none;color:var(--lx-text);font:400 14.5px/1.35 var(--lx-font);text-align:left;cursor:pointer;transition:background-color .15s}
@media (hover:hover){.ls2-part:hover{background:var(--lx-fill)}}
.ls2-part.is-here{background:var(--lx-tint-bg);color:var(--lx-tint);font-weight:600}
.ls2-dot{flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.6px solid var(--lx-fill2);display:grid;place-items:center;color:#fff}
.ls2-part.is-here .ls2-dot{border-color:var(--lx-tint);background:conic-gradient(var(--lx-tint) 0 50%,transparent 50% 100%)}
.ls2-part.is-done .ls2-dot{border-color:var(--lx-green);background:var(--lx-green)}
.ls2-dot .lx-ic{width:12px;height:12px;stroke-width:3.2}
.lx-sheet .ls2-sec:first-of-type{margin-top:4px}
.ls2-main{display:flex;justify-content:center;padding:clamp(28px,9vh,96px) clamp(16px,4vw,56px) 72px;min-width:0}
.ls2-card{width:min(760px,100%);box-sizing:border-box;padding:clamp(26px,4vw,44px) clamp(22px,4vw,48px) 22px;border-radius:26px;background:var(--lx-card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 44px -14px rgba(0,0,0,.14);animation:ls-in .36s cubic-bezier(.2,.8,.2,1)}
.ls2-card.is-back{animation-name:ls-back}
.ls2-card h1:focus{outline:none}
.ls2-title{font:700 clamp(26px,3.2vw,34px)/1.15 var(--lx-display);letter-spacing:-.022em;margin:0 0 18px;text-wrap:balance}
.ls2-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ls2-count{flex-shrink:0;font:600 13px/1 var(--lx-font);color:var(--lx-text3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ls2-points{list-style:none;margin:6px 0 0;padding:0;font:400 var(--lr-size)/1.6 var(--lx-font);letter-spacing:-.003em;animation:ls-up .3s ease-out}
/* A key term in a lesson, just before the notes that first use it */
.ls2-kts{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;animation:ls-up .3s ease-out}
.ls2-kt{padding:16px 18px;border-radius:16px;background:var(--lx-tint-bg);box-shadow:inset 3px 0 0 var(--lx-tint)}
.ls2-kt b{display:block;font:700 calc(var(--lr-size) * 1.05)/1.3 var(--lx-display);letter-spacing:-.012em;color:var(--lx-text)}
.ls2-kt p{margin:6px 0 0;font:400 var(--lr-size)/1.55 var(--lx-font);color:var(--lx-text)}
.ls2-kt small{display:block;margin-top:8px;font:400 13px/1.4 var(--lx-font);color:var(--lx-text2)}
.ls2[data-font="serif"] .ls2-points{font-family:var(--lx-serif);letter-spacing:0}
.ls2-points li{position:relative;margin:0 0 .85em;padding-left:1.3em;text-wrap:pretty}
.ls2-points li:last-child{margin-bottom:0}
.ls2-points li::before{content:"";position:absolute;left:.2em;top:.62em;width:.38em;height:.38em;border-radius:50%;background:var(--lx-tint)}
.ls2-points strong{font-weight:650}
.ls2-reread-panel .ls2-points{font-size:calc(var(--lr-size) * .9)}
.ls2-reread-panel .ls2-points+.ls2-points,.ls2-reread-panel .ls2-notes+.ls2-points,.ls2-reread-panel .ls2-points+.ls2-notes{margin-top:.85em}
.ls2-tstack{display:none}
.ls2-tcap{margin:0 0 4px;font:600 12px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-text3)}
.ls2-trow{padding:12px 0;border-bottom:.5px solid var(--lx-sep)}
.ls2-trow:last-child{border-bottom:0}
.ls2-trow b{display:block;margin:0 0 6px;font:600 calc(var(--lr-size) * .92)/1.35 var(--lx-font)}
.ls2-trow dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;margin:0;font:400 calc(var(--lr-size) * .84)/1.4 var(--lx-font)}
.ls2-trow dl div{display:contents}
.ls2-trow dt{color:var(--lx-text2)}
.ls2-trow dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:700px){.ls2 .ls2-notes .lr-table{display:none}.ls2 .ls2-tstack{display:block}}
.ls2-claim{margin:0;font:600 clamp(23px,3vw,30px)/1.38 var(--lx-display);letter-spacing:-.015em;text-wrap:pretty}
.ls2-claim strong{font-weight:750;color:var(--lx-tint)}
.ls2-notes.lr-article{max-width:none;animation:none}
.ls2[data-font="serif"] .ls2-notes{font-family:var(--lx-serif);letter-spacing:0}
.ls2-notes .lr-table{margin-bottom:1em}
.ls2-notes>*:last-child{margin-bottom:0}
.ls2-q .ls-prompt{margin-bottom:24px}
.ls2-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;padding-top:18px;box-shadow:0 -.5px 0 var(--lx-sep)}
.ls2-pager{display:flex;align-items:center;gap:12px;min-width:0}
.ls2-prev{width:46px;height:46px;border-radius:50%;background:var(--lx-fill);color:var(--lx-text)}
.ls2-dots{display:flex;align-items:center;gap:6px}
.ls2-dots i{width:7px;height:7px;border-radius:4px;background:var(--lx-fill2);transition:width .25s,background-color .25s}
.ls2-dots i.is-on{width:20px;background:var(--lx-tint)}
.ls2-go{min-height:50px;padding:0 22px 0 26px;font-size:16.5px}
.ls2-go .lx-ic{width:18px;height:18px;margin-left:-2px}
.ls2-go:disabled{opacity:.35;cursor:default;transform:none}
.ls2-reread{min-height:40px;padding:0 6px;font-size:15px;font-weight:500}
.ls2-fb{margin:18px 0 0;padding:16px 18px;border-radius:16px;animation:ls-up .28s cubic-bezier(.2,.8,.2,1)}
.ls2-fb b{display:flex;align-items:center;gap:8px;font:700 18px/1.2 var(--lx-display);letter-spacing:-.01em}
.ls2-fb b .lx-ic{width:20px;height:20px;stroke-width:2.6}
.ls2-fb p{margin:6px 0 0;font:400 16px/1.5 var(--lx-font);color:var(--lx-text)}
.ls2-fb.is-right{background:#eaf6ed}.ls2-fb.is-right b{color:var(--lx-green)}
.ls2-fb.is-wrong{background:#fff2e3}.ls2-fb.is-wrong b{color:var(--lx-orange)}
.lx[data-theme="dark"] .ls2-fb.is-right{background:#17301e}.lx[data-theme="dark"] .ls2-fb.is-wrong{background:#3a2a12}
.lx[data-theme="sepia"] .ls2-fb.is-right{background:#e5edd2}.lx[data-theme="sepia"] .ls2-fb.is-wrong{background:#f6e2c6}
.ls2-two{display:flex;gap:10px}
.ls2-two .lx-btn{min-height:50px;padding:0 22px}
.ls2-reread-panel{margin-top:18px;padding:16px 20px;border-radius:16px;background:var(--lx-bg2);max-height:44vh;overflow:auto;animation:ls-up .25s ease-out}
.ls2-reread-panel .lr-article{font-size:calc(var(--lr-size) * .9)}
.ls2-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(30px,6vh,56px);padding-bottom:34px}
.ls2-done h1{margin:0 0 18px;font:700 clamp(30px,4vw,38px)/1.1 var(--lx-display);letter-spacing:-.025em}
.ls2-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 26px}
.ls2-stats div{min-width:150px;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:16px;background:var(--lx-bg2)}
.ls2-stats b{font:700 24px/1.1 var(--lx-display);letter-spacing:-.01em}
.ls2-stats span{font:500 13px/1.3 var(--lx-font);color:var(--lx-text2)}
@media (min-width:1101px){.ls2-parts-btn{display:none}}
@media (max-width:1100px){.ls2-body{grid-template-columns:minmax(0,1fr)}.ls2-side{display:none}.ls2-top{grid-template-columns:136px minmax(0,1fr) 136px}}   /* parts, theme and Aa */
@media (max-width:700px){
  .ls2-top{grid-template-columns:44px minmax(0,1fr) 130px;height:56px;gap:6px}
  .ls2-main{padding:12px 10px 16px}
  .ls2-card{border-radius:22px;padding:24px 18px 0}
  .ls2-foot{position:sticky;bottom:0;z-index:2;margin:24px -18px 0;padding:12px 18px max(12px,env(safe-area-inset-bottom));background:var(--lx-card);border-radius:0 0 22px 22px}
  .ls2-foot .ls2-go,.ls2-two{flex:1}
  .ls2-go{justify-content:center;padding:0 16px}
  .ls2-two .lx-btn{flex:1;padding:0 12px;font-size:15.5px}
  .ls2-stats div{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){.ls2-card,.ls2-fb,.ls2-reread-panel{animation:none}.ls2-dots i{transition:none}}
/* ---------- the lesson feed: cards drop in below and the page glides down to them (GCSE lessons, Seneca) ---------- */
.lf-feed{width:min(720px,100%);display:flex;flex-direction:column;gap:18px;padding-bottom:62vh;padding-bottom:62dvh}
.lf-section{padding:4px 6px 2px}
.lf-section .ls-eyebrow{margin-bottom:8px}
.lf-section h1{margin:0;font:700 clamp(28px,3.4vw,38px)/1.1 var(--lx-display);letter-spacing:-.026em;text-wrap:balance}
.lf-section h1:focus{outline:none}
.lf-card{box-sizing:border-box;padding:clamp(22px,3.4vw,34px) clamp(22px,3.6vw,40px);border-radius:24px;background:var(--lx-card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 40px -16px rgba(0,0,0,.16);transition:opacity .7s ease,box-shadow .7s ease}
.lf-card.is-done{opacity:.5;box-shadow:0 0 0 .5px var(--lx-sep)}
@media (hover:hover){.lf-card.is-done:hover{opacity:.9}}
.lf-card.is-new{animation:lf-arrive .8s cubic-bezier(.25,.7,.25,1) .14s both}   /* the glide carries it up; it only fades in */
@keyframes lf-arrive{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
.lf-feed.is-leaving{opacity:0;transition:opacity .32s ease}
.lf-feed.is-arriving{animation:lf-fade .6s ease both}
@keyframes lf-fade{from{opacity:0}to{opacity:1}}
.lf-card .ls2-fb{animation:ls-up .5s cubic-bezier(.25,.7,.25,1)}
.lf-card .ls-opt{transition:border-color .35s,background-color .35s,opacity .45s,transform .12s}
.lf-title{margin:0 0 14px;font:700 clamp(22px,2.7vw,28px)/1.2 var(--lx-display);letter-spacing:-.018em;text-wrap:balance}
.lf-title:focus{outline:none}
.lf-q .lf-title{font-weight:650;margin-bottom:20px}
.lf-card .ls-opts{gap:10px}
.lf-card .ls2-fb{margin-top:16px}
.lf-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.lf-go{min-height:48px;padding:0 20px 0 24px;font-size:16px}
.lf-go .lx-ic{width:18px;height:18px;margin-left:-2px}
.lf-go:disabled{opacity:.35;cursor:default;transform:none}
.lf-sentence{margin:0 0 18px;font:400 var(--lr-size)/1.7 var(--lx-font);text-wrap:pretty}
.ls2[data-font="serif"] .lf-sentence{font-family:var(--lx-serif)}
.lf-sentence strong{font-weight:650}
.lf-blank{display:inline-block;min-width:6em;margin:0 .1em;padding:0 .35em;border-bottom:2.5px dashed var(--lx-tint);line-height:1.35;text-align:center;font-weight:650}
.lf-blank.is-right{border-bottom:2.5px solid var(--lx-green);color:var(--lx-green);background:rgba(36,138,61,.08);border-radius:6px 6px 0 0}
.lf-blank.is-wrong{border-bottom:2.5px solid var(--lx-orange);color:var(--lx-orange);background:var(--lx-orange-bg);border-radius:6px 6px 0 0}
.lf-type{display:flex;gap:10px}
.lf-input{flex:1;min-width:0;height:52px;box-sizing:border-box;padding:0 16px;border:1.5px solid var(--lx-sep);border-radius:14px;background:var(--lx-card);color:var(--lx-text);font:400 17px/1 var(--lx-font);outline:none;transition:border-color .15s,box-shadow .15s}
.lf-input:focus{border-color:var(--lx-tint);box-shadow:0 0 0 4px var(--lx-tint-bg)}
.lf-input::placeholder{color:var(--lx-text3)}
.lf-type .lx-btn{min-height:52px;padding:0 22px}
.lf-wrote{margin:4px 0 0;font:400 15px/1.45 var(--lx-font);color:var(--lx-text2)}
.lf-done{width:100%}
/* Importing a book or document (owner, 14 October 2026): one panel, then a quiet progress card on the Library page */
.li-sheet{width:min(460px,calc(100vw - 28px))}
.li-drop{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:30px 18px 26px;margin:2px 0 14px;box-sizing:border-box;border:1.5px dashed var(--lx-fill2);border-radius:18px;background:var(--lx-bg2);color:var(--lx-text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.li-drop:hover,.li-drop.is-over{border-color:var(--lx-tint);background:var(--lx-tint-bg)}
.li-drop-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--lx-tint-bg);color:var(--lx-tint);margin-bottom:6px}
.li-drop-mark .lx-ic{width:26px;height:26px}
.li-drop b{font:600 17px/1.3 var(--lx-font)}
.li-drop small{font:400 13.5px/1.4 var(--lx-font);color:var(--lx-text2);text-align:center}
/* an article by its link (owner, 20 October 2026) */
.li-url{display:flex;gap:8px;margin:0 0 12px}
.li-url input{flex:1;min-width:0;height:44px;padding:0 14px;box-sizing:border-box;border:1.5px solid var(--lx-sep);border-radius:12px;background:var(--lx-card);color:var(--lx-text);font:400 16px/1 var(--lx-font);outline:none}
.li-url input:focus{border-color:var(--lx-tint);box-shadow:0 0 0 3px var(--lx-tint-bg)}
.li-url input::placeholder{color:var(--lx-text3)}
.li-url .lx-btn{flex-shrink:0;min-height:44px;padding:0 18px}
.li-paste-btn{width:100%;margin:0 0 10px}
.li-paste{margin:0 0 14px}
.li-paste textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:0;border-radius:12px;background:var(--lx-bg2);color:var(--lx-text);font:400 15px/1.5 var(--lx-font);resize:vertical;outline:none}
.li-field{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.li-field span{font:600 12px/1.2 var(--lx-font);letter-spacing:.05em;text-transform:uppercase;color:var(--lx-text2)}
.li-field input{height:44px;padding:0 14px;box-sizing:border-box;border:1.5px solid var(--lx-sep);border-radius:12px;background:var(--lx-card);color:var(--lx-text);font:400 16px/1 var(--lx-font);outline:none}
.li-field input:focus,.li-paste textarea:focus{border-color:var(--lx-tint);box-shadow:0 0 0 3px var(--lx-tint-bg)}
.li-parts-head{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 6px;font:400 13.5px/1.3 var(--lx-font);color:var(--lx-text2)}
.li-parts-head b{font-weight:600;color:var(--lx-text)}
.li-parts{list-style:none;margin:0;padding:4px 0;max-height:min(260px,34vh);overflow:auto;border-radius:12px;background:var(--lx-bg2)}
.li-parts label{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;font:400 15px/1.35 var(--lx-font);color:var(--lx-text);letter-spacing:0;text-transform:none}   /* the app's own label styles would grey every part out */
.li-parts input:not(:checked)~.li-part-t{color:var(--lx-text2)}   /* a part left out reads quieter */
.li-parts input{width:18px;height:18px;flex-shrink:0;accent-color:var(--lx-tint)}
.li-part-t{flex:1;min-width:0}
.li-part-w{flex-shrink:0;font-size:13px;color:var(--lx-text2);font-variant-numeric:tabular-nums}
.li-hint{margin:6px 2px 14px;font:400 13px/1.45 var(--lx-font);color:var(--lx-text2)}
.li-part-row{display:flex;align-items:center;gap:6px;padding-right:10px}
.li-part-row label{flex:1;min-width:0}
/* Saver or Fast (owner, 18 October 2026): any part can be made fast */
.li-fast{flex-shrink:0;min-height:30px;padding:0 11px;border:1.5px solid var(--lx-sep);border-radius:999px;background:none;color:var(--lx-text2);font:600 12.5px/1 var(--lx-font);cursor:pointer}
.li-fast:hover{border-color:var(--lx-tint);color:var(--lx-tint)}
.li-fast.is-on{border-color:var(--lx-tint);background:var(--lx-tint);color:#fff}
.li-speed{margin-bottom:6px}
/* a book you may already have (owner, 18 October 2026): the same parts again, new parts for your copy, or another edition */
.li-match{margin:2px 0 14px;padding:12px 14px;border-radius:12px;background:var(--lx-tint-bg);color:var(--lx-text);font:400 14px/1.45 var(--lx-font)}
.li-match.is-warn{background:var(--lx-orange-bg)}
.li-match>b{display:block;font:600 15px/1.35 var(--lx-font)}
.li-match>p{margin:4px 0 0}
.li-match-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.li-match-actions .lx-btn{flex:1 1 auto;min-height:40px}
.li-match-ok{display:flex;align-items:flex-start;gap:6px}
.li-match-ok .lx-ic{width:16px;height:16px;margin-top:2px;flex-shrink:0;color:var(--lx-tint)}
.li-match-choice{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding:2px 0;border-radius:10px;background:var(--lx-card)}
.li-match-choice label{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;cursor:pointer;color:var(--lx-text);letter-spacing:0;text-transform:none}
.li-match-choice input{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--lx-tint)}
.li-match-choice span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:400 15px/1.35 var(--lx-font)}
.li-match-choice b{font-weight:600}
.li-match-choice small{font-size:13px;line-height:1.4;color:var(--lx-text2)}
.li-part-have{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--lx-fill);color:var(--lx-text2);font:500 11.5px/1.5 var(--lx-font);white-space:nowrap;vertical-align:1px}
/* What to make: the notes always, lessons and flashcards ticked or not, each with its credits (owner, 17 October 2026) */
.li-make{list-style:none;margin:0;padding:4px 0;border-radius:12px;background:var(--lx-bg2)}
.li-make label{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;cursor:pointer;color:var(--lx-text);letter-spacing:0;text-transform:none}
.li-make .is-fixed label{cursor:default}
.li-make input{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--lx-tint)}
.li-make input:disabled{opacity:.6}
.li-make-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:400 15px/1.35 var(--lx-font)}
.li-make-t b{font-weight:600}
.li-make-t small{font-size:13px;line-height:1.4;color:var(--lx-text2)}
.li-make-c{flex-shrink:0;margin-top:1px;font:500 13.5px/1.3 var(--lx-font);color:var(--lx-text2);font-variant-numeric:tabular-nums}
.li-error{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--lx-orange-bg);color:var(--lx-text);font:400 14px/1.45 var(--lx-font)}
.li-link{border:0;background:none;padding:0;color:var(--lx-tint);font:600 14px/1 var(--lx-font);cursor:pointer;text-decoration:underline}
.li-rights{display:flex;align-items:flex-start;gap:10px;margin:0 2px 14px;font:400 14.5px/1.45 var(--lx-font);color:var(--lx-text);letter-spacing:0;text-transform:none;cursor:pointer}   /* the app's own label styles would grey it out */
.li-rights input{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--lx-tint)}
.li-go{width:100%;min-height:50px}
.li-again{width:100%;margin-top:6px}
/* the Library plan: offered when the trial cannot cover a book, bought and managed on Stripe's own pages */
.li-plan{width:100%;min-height:46px;margin:-4px 0 14px}
.lp-price{margin:4px 2px 10px;font:700 34px/1.1 var(--lx-display);letter-spacing:-.025em}
.lp-price small{font:500 16px/1 var(--lx-font);letter-spacing:-.01em;color:var(--lx-text2)}
.lp-list{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.lp-list li{position:relative;padding-left:24px;font:400 15px/1.45 var(--lx-font)}
.lp-list li::before{content:"";position:absolute;left:3px;top:.42em;width:10px;height:6px;border-left:2px solid var(--lx-tint);border-bottom:2px solid var(--lx-tint);transform:rotate(-45deg)}
.lp-note{margin:0 2px 16px;font:400 15px/1.5 var(--lx-font);color:var(--lx-text2)}
.lp-go{width:100%;min-height:50px;margin-bottom:12px}
.lp-sheet .lx-sheet-foot a{color:var(--lx-tint);text-decoration:underline;text-underline-offset:2px}
.lp-balance{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--lx-bg2);font:400 14.5px/1.4 var(--lx-font)}
.lp-balance b{font-weight:600}.lp-balance span{color:var(--lx-text2);text-align:right}
.lp-h{margin:4px 2px 10px;font:600 15px/1.3 var(--lx-font);letter-spacing:-.005em}
.lp-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lp-pack{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 6px;border:0;border-radius:14px;background:var(--lx-bg2);color:var(--lx-text);cursor:pointer;box-shadow:inset 0 0 0 1px var(--lx-sep);transition:box-shadow .15s}
.lp-pack b{font:700 19px/1.1 var(--lx-display);letter-spacing:-.02em}.lp-pack span{font:400 13px/1.2 var(--lx-font);color:var(--lx-text2)}
@media (hover:hover){.lp-pack:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--lx-tint)}}
/* what an import or a stopped book needs, and the top-up that covers it (owner, 16 October 2026) */
.lp-need{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--lx-tint-bg);font:400 15px/1.45 var(--lx-font);color:var(--lx-text)}
.lp-need b{font-weight:600}
.lp-need span{color:var(--lx-text2)}
.lp-need .li-link{align-self:flex-start;margin-top:4px}
.lp-pack.is-enough{box-shadow:0 0 0 2px var(--lx-tint) inset}
.lp-pack i{font:600 11px/1.2 var(--lx-font);font-style:normal;color:var(--lx-tint);letter-spacing:.02em}
.lp-fine{margin:8px 2px 22px;font:400 12.5px/1.4 var(--lx-font);color:var(--lx-text3)}
.li-reading{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 12px 30px;text-align:center}
.li-reading p{margin:0;font:600 16px/1.4 var(--lx-font)}
.li-reading .li-sub{font-weight:400;font-size:14px;color:var(--lx-text2);min-height:1.4em}
.li-spin{width:34px;height:34px;margin-bottom:10px;border-radius:50%;border:3px solid var(--lx-fill);border-top-color:var(--lx-tint);animation:li-spin .9s linear infinite}
@keyframes li-spin{to{transform:rotate(360deg)}}
.lb-build{display:flex;align-items:center;gap:18px;margin:0 0 18px;padding:18px 20px 18px 18px;border-radius:22px;background:var(--lx-card);box-shadow:0 0 0 .5px var(--lx-sep),0 8px 28px rgba(0,0,0,.06)}
.lb-build h2{margin:0;font:700 20px/1.2 var(--lx-display);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-build.is-working .lb-recall-mark{animation:li-pulse 1.6s ease-in-out infinite}
@keyframes li-pulse{50%{opacity:.55}}
.lb-build.is-ready .lb-recall-mark{background:rgba(36,138,61,.12);color:var(--lx-green)}
.lb-build.is-failed .lb-recall-mark{background:var(--lx-orange-bg);color:var(--lx-orange)}
.lb-build-bar{display:block;height:5px;margin:10px 0 0;border-radius:3px;background:var(--lx-fill);overflow:hidden}
.lb-build-bar i{display:block;height:100%;background:var(--lx-tint);transform-origin:0 50%;transition:transform .6s ease}
@media (max-width:700px){
  .lb-build{flex-wrap:wrap;gap:14px;padding:16px}
  .lb-build .lb-recall-go{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.li-spin,.lb-build.is-working .lb-recall-mark{animation:none}}
/* Daily recall (owner, 14 October 2026): a card on the Library page, and the lesson feed without the parts beside it */
.lb-recall{display:flex;align-items:center;gap:18px;margin:0 0 28px;padding:18px 20px 18px 18px;border-radius:22px;background:var(--lx-card);box-shadow:0 0 0 .5px var(--lx-sep),0 8px 28px rgba(0,0,0,.06)}
.lb-recall-mark{flex-shrink:0;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--lx-tint-bg);color:var(--lx-tint)}
.lb-recall-mark .lx-ic{width:26px;height:26px}
.lb-recall.is-done .lb-recall-mark{background:rgba(36,138,61,.12);color:var(--lx-green)}
.lb-recall-text{flex:1;min-width:0}
.lb-recall-eyebrow{margin:0 0 3px;font:600 12px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-text2)}
.lb-recall h2{margin:0;font:700 20px/1.2 var(--lx-display);letter-spacing:-.015em}
.lb-recall-meta{margin:3px 0 0;font:400 14.5px/1.4 var(--lx-font);color:var(--lx-text2)}
.lb-recall-go{display:flex;align-items:center;gap:16px;flex-shrink:0}
.lb-recall-go .lx-btn{min-height:46px;padding:0 26px}
.lb-recall-streak{display:inline-flex;align-items:center;gap:5px;font:600 14px/1 var(--lx-font);color:var(--lx-orange);white-space:nowrap}
.lb-recall-streak .lx-ic{width:18px;height:18px}
.ls2-body.is-solo{grid-template-columns:minmax(0,1fr)}
.lf-next{margin:0 0 20px;font:400 15px/1.45 var(--lx-font);color:var(--lx-text2)}
@media (max-width:700px){
  .lb-recall{flex-wrap:wrap;gap:14px;padding:16px}
  .lb-recall-go{width:100%;justify-content:space-between}
  .lb-recall-go .lx-btn{flex:1}
  .lb-recall-go .lb-recall-streak+.lx-btn{flex:0 1 auto;min-width:150px}
}
/* Hints on request, matching, sorting, missed ideas coming back and the tricky ideas (owner, 14 October 2026) */
.lf-hint{min-height:40px;padding:0 14px;font-size:15px}
.lf-hintbox{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--lx-tint-bg);animation:ls-up .28s ease-out}
.lf-hintbox b{font:600 12.5px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-tint)}
.lf-hintbox p{margin:6px 0 0;font:400 16px/1.5 var(--lx-font);color:var(--lx-text)}
.lf-match{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.lf-mrow{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:10px}
.lf-mleft{display:flex;align-items:center;padding:12px 14px;border-radius:14px;background:var(--lx-bg2);font:600 16px/1.35 var(--lx-font)}
.lf-mslot{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:54px;padding:10px 14px;box-sizing:border-box;border:1.5px dashed var(--lx-fill2);border-radius:14px;background:none;color:var(--lx-text);font:400 16px/1.4 var(--lx-font);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.lf-mslot:disabled{cursor:default;opacity:1}   /* design.css fades disabled buttons; a checked answer stays readable */
.lf-mempty{color:var(--lx-tint);font-size:14px}
.lf-mrow.is-act .lf-mslot{border:1.5px solid var(--lx-tint);box-shadow:0 0 0 4px var(--lx-tint-bg)}
.lf-mrow.is-filled .lf-mslot{border:1.5px solid var(--lx-tint);background:var(--lx-tint-bg)}
.lf-mrow.is-right .lf-mslot{border:1.5px solid var(--lx-green);background:rgba(36,138,61,.08)}
.lf-mrow.is-wrong .lf-mslot{border:1.5px solid var(--lx-orange);background:var(--lx-orange-bg)}
.lf-sort{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:10px}
.lf-srow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 12px 16px;border:1.5px solid var(--lx-sep);border-radius:16px;transition:border-color .15s,background .15s}
.lf-srow.is-right{border-color:var(--lx-green);background:rgba(36,138,61,.06)}
.lf-srow.is-wrong{border-color:var(--lx-orange);background:var(--lx-orange-bg)}
.lf-sitem{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font:400 16.5px/1.45 var(--lx-font)}
.lf-sgroups{flex-shrink:0}
.lf-sgroups button{min-height:36px;padding:0 14px;font-size:14px}
.lf-sgroups button[aria-pressed="true"]{background:var(--lx-tint);color:#fff;box-shadow:none}   /* the chosen group is plain to see in every theme */
.lf-sgroups button:disabled{cursor:default;opacity:1}
.lf-sgroups button:disabled[aria-pressed="false"]{opacity:.5}
.lf-back .ls-eyebrow{color:var(--lx-tint)}
.lf-tricky{width:100%;margin:0 0 26px;text-align:left}
.lf-tricky h2{margin:0 0 4px;font:700 20px/1.2 var(--lx-display);letter-spacing:-.015em}
.lf-tricky-note{margin:0 0 12px;font:400 14.5px/1.45 var(--lx-font);color:var(--lx-text2)}
.lf-tricky ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lf-tricky li{padding:14px 16px;border-radius:16px;background:var(--lx-bg2)}
.lf-tricky li p{margin:0;font:400 16px/1.5 var(--lx-font)}
.lf-tricky .lf-tricky-from{margin:0 0 4px;font:600 12px/1.2 var(--lx-font);letter-spacing:.06em;text-transform:uppercase;color:var(--lx-text2)}
@media (max-width:700px){
  .lf-mrow{grid-template-columns:1fr;gap:6px}
  .lf-mleft{padding:6px 2px 0;background:none}
  .lf-srow{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .lf-sgroups{display:flex}
  .lf-sgroups button{flex:1}
}
@media (max-width:700px){
  .lf-feed{gap:14px}
  .lf-card{padding:22px 18px;border-radius:22px}
  .lf-foot .lf-go,.lf-foot .ls2-two{flex:1;justify-content:center}
  .lf-section h1{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.lf-card.is-new,.lf-feed.is-arriving,.lf-card .ls2-fb{animation:none}.lf-card,.lf-feed.is-leaving{transition:none}}
/* flashcards */
.lc-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;width:100%;padding:8px 20px max(26px,env(safe-area-inset-bottom));box-sizing:border-box;min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px)}
.lc-stack{position:relative;width:min(620px,100%);height:min(430px,56vh);height:min(430px,56dvh);perspective:1800px}
.lc-ghost{position:absolute;left:4%;right:4%;top:14px;bottom:-12px;border-radius:28px;background:var(--lx-card);opacity:.7;box-shadow:0 10px 30px -14px rgba(0,0,0,.18)}
.lc-ghost-2{left:8%;right:8%;top:28px;bottom:-24px;opacity:.4}
.lc-card{position:absolute;inset:0;z-index:2;cursor:pointer;outline:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lc-card.is-in{animation:lc-in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes lc-in{from{opacity:.3;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
.lc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,.8,.2,1)}
.lc-card.is-flipped .lc-inner{transform:rotateY(180deg)}
.lc-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:26px 30px 22px;box-sizing:border-box;border-radius:28px;background:var(--lx-card);box-shadow:0 1px 2px rgba(0,0,0,.05),0 22px 54px -16px rgba(0,0,0,.22);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:auto}
.lc-back{transform:rotateY(180deg)}
.lc-card:focus-visible .lc-face{box-shadow:0 0 0 3px var(--lx-tint),0 22px 54px -16px rgba(0,0,0,.22)}
.lc-eyebrow{font:600 12px/1.2 var(--lx-font);letter-spacing:.08em;text-transform:uppercase;color:var(--lx-text3)}
.lc-text{flex:1;display:flex;align-items:center;justify-content:center;margin:0;padding:6px 4px;text-align:center;font:650 clamp(21px,2.9vw,28px)/1.35 var(--lx-display);letter-spacing:-.016em;text-wrap:balance}
.lc-text.lc-long{font-size:clamp(17px,2.2vw,21px);font-weight:600;line-height:1.45;letter-spacing:-.008em}   /* a whole sentence, such as a card you made from a highlight */
.lc-answer{display:block;margin:auto 0;flex:0 1 auto;text-align:left;font:400 clamp(18px,2.3vw,21px)/1.55 var(--lx-font);letter-spacing:0;text-wrap:pretty}
.lc-answer strong{font-weight:650;color:var(--lx-tint)}
.lc-hint{display:flex;align-items:center;justify-content:center;gap:6px;font:500 13px/1.3 var(--lx-font);color:var(--lx-text3);text-align:center}
.lc-hint .lx-ic{width:15px;height:15px}
.lc-stamp{position:absolute;top:24px;z-index:3;padding:7px 13px;border-radius:12px;font:800 15px/1 var(--lx-font);letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;background:var(--lx-card)}
.lc-stamp-again{left:24px;color:var(--lx-orange);border:2.5px solid var(--lx-orange);transform:rotate(-9deg)}
.lc-stamp-good{right:24px;color:var(--lx-green);border:2.5px solid var(--lx-green);transform:rotate(9deg)}
.lc-actions{display:flex;gap:12px;width:min(620px,100%)}
.lc-actions .lx-btn{flex:1;min-height:58px;font-size:17px;border-radius:999px}
.lc-again{background:var(--lx-orange-bg);color:var(--lx-orange)}
.lc-good{background:var(--lx-green);color:#fff}
.lx[data-theme="dark"] .lc-good{color:#151517}
.lc-again .lx-ic,.lc-good .lx-ic{width:19px;height:19px;stroke-width:2.4}
.lc-keys{margin:-10px 0 0;font:400 13px/1 var(--lx-font);color:var(--lx-text3)}
@media (hover:none){.lc-keys{display:none}}
/* the study row under a document's title */
.lr-study{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.lr-study .lx-btn{min-height:42px;padding:0 18px;font-size:15px}
.lr-study .lx-ic{width:18px;height:18px}

/* ---------- Focus reading: a variation switched on in Text and display ----------
   The point you are reading, or the one under the mouse, comes forward (a little larger, fully clear) and the rest goes
   quiet. Classic reading is untouched. The contents on the left (a wide screen, both styles) are styled here too. */
.lr-side{display:none}
.lr[data-mode="focus"] .lr-main{padding-bottom:52vh;overflow-x:clip}
.lr[data-mode="focus"] .lr-unit{opacity:.28;transform-origin:0 50%;transition:opacity .5s ease,transform .55s cubic-bezier(.22,.8,.22,1)}
.lr[data-mode="focus"] .lr-unit.is-near{opacity:.55}
.lr[data-mode="focus"] .lr-unit.is-focus{opacity:1;transform:scale(1.045)}
.lr[data-mode="focus"] .lr-table.lr-unit.is-focus{transform:scale(1.015)}
.lr[data-mode="focus"] .lr-head h1,.lr[data-mode="focus"] .lr-eyebrow,.lr[data-mode="focus"] .lr-byline,.lr[data-mode="focus"] .lr-study{opacity:.85}
.lr[data-mode="focus"] .lr-sec h2,.lr[data-mode="focus"] .lr-sub,.lr[data-mode="focus"] .lr-idea{opacity:.72}
.lr-side-head{margin:14px 12px 8px;font:600 11.5px/1.2 var(--lx-font);letter-spacing:.07em;text-transform:uppercase;color:var(--lx-text3)}
.lr-side-head:first-child{margin-top:0}
.lr-side-toc a{display:block;padding:8px 12px;border-radius:10px;color:var(--lx-text2);font:400 14.5px/1.35 var(--lx-font);letter-spacing:-.005em;text-decoration:none;transition:background-color .25s,color .25s}
@media (hover:hover){.lr-side-toc a:hover{background:var(--lx-fill)}}
.lr-side-toc a.is-past{color:var(--lx-text)}
.lr-side-toc a.is-on{background:var(--lx-tint-bg);color:var(--lx-tint);font-weight:600}
.lr-side-parts{display:flex;flex-direction:column;gap:2px}
.lr-side-part{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:0;border-radius:10px;background:none;color:var(--lx-text2);font:400 14.5px/1.35 var(--lx-font);text-align:left;cursor:pointer}
.lr-side-part span{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--lx-fill);display:grid;place-items:center;font:600 12px/1 var(--lx-font)}
.lr-side-part.is-on{color:var(--lx-text);font-weight:600}
.lr-side-part.is-on span{background:var(--lx-tint);color:#fff}
.lr-side-part.is-wait{flex-wrap:wrap;color:var(--lx-text3);cursor:default}   /* a part still being prepared */
.lr-side-part.is-wait small{flex-basis:100%;padding-left:32px;font:400 12px/1.3 var(--lx-font);color:var(--lx-text3)}
.lx-row.is-wait{color:var(--lx-text3);cursor:default}
.lx-row.is-wait .lx-row-val{font-size:13px;color:var(--lx-text3)}
.lx-seg-mode{margin-top:2px}
.lx-seg-note{margin:-6px 4px 14px;font:400 12.5px/1.45 var(--lx-font);color:var(--lx-text2)}
@media (min-width:1100px){
  /* The contents sit on the left in both reading styles. The article keeps its full line length and stays centred where
     there is room; the empty right-hand column gives way first. */
  .lr-main.lr-has-side{display:grid;grid-template-columns:236px minmax(min(calc(var(--lr-size) * 34),calc(100% - 292px)),1fr) minmax(0,236px);column-gap:28px;align-items:start}
  .lr-has-side > .lr-side{display:block;grid-column:1;position:sticky;top:84px;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain;padding:4px 0 24px}
  .lr-has-side > .lr-article{grid-column:2}
  .lr .lx-icon[data-sheet-open="contents"]{display:none}   /* the contents are already on the left */
}
@media (max-width:700px){.lr[data-mode="focus"] .lr-unit.is-focus{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.lr[data-mode="focus"] .lr-unit{transition:none}.lr[data-mode="focus"] .lr-unit.is-focus{transform:none}}

/* ---------- your notes (learn-notes.js): a column beside the reading on a wide screen, a sheet under it on a tablet or
   phone. Not modal: the reading still scrolls while you write. The inks follow the theme, so black ink is the text colour. */
.lx{--ln-ink:var(--lx-text);--ln-blue:#2f5bea;--ln-red:#d7263d;--ln-yellow:rgba(255,204,0,.4);--ln-rule:rgba(60,60,67,.1)}
.lx[data-theme="sepia"]{--ln-blue:#2a56c6;--ln-red:#b3261e;--ln-yellow:rgba(236,182,30,.42);--ln-rule:rgba(91,70,40,.13)}
.lx[data-theme="dark"]{--ln-blue:#8fa6ff;--ln-red:#ff7a85;--ln-yellow:rgba(255,214,10,.3);--ln-rule:rgba(255,255,255,.08)}
.lx-notes-btn[aria-expanded="true"]{background:var(--lx-tint-bg)}
.lx-notes{display:flex;flex-direction:column;box-sizing:border-box;min-height:0;background:var(--lx-bg2);color:var(--lx-text);overflow:hidden;outline:none}
.lx-notes .lx-grab{display:none}
.ln-head{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:10px 8px 8px 16px}
.ln-head h2{margin:0 auto 0 0;font:700 17px/1.2 var(--lx-display);letter-spacing:-.012em}
.ln-tabs button{min-height:30px;padding:0 13px}
.ln-head .lx-icon{width:34px;height:34px;border-radius:50%;color:var(--lx-text2)}
.ln-head .lx-icon .lx-ic{width:18px;height:18px}
.ln-head .lx-sheet-x{width:30px;height:30px;margin-left:2px}
.ln-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.ln-pane[hidden]{display:none}
.ln-text{flex:1;min-height:0;min-width:0;width:calc(100% - 24px);box-sizing:border-box;margin:0 12px 6px;padding:14px 14px 18px;border:0;border-radius:14px;background:var(--lx-card);color:var(--lx-text);font:400 16px/1.55 var(--lx-font);letter-spacing:-.005em;resize:none;outline:none;box-shadow:inset 0 0 0 .5px var(--lx-sep)}
.ln-text:focus{box-shadow:inset 0 0 0 .5px var(--lx-sep),0 0 0 3px var(--lx-tint-bg)}
.lx .ln-text:focus-visible{outline:none}   /* the soft ring is enough while writing */
.ln-text::placeholder{color:var(--lx-text3)}
.ln-tools{display:flex;align-items:center;gap:2px;flex-shrink:0;padding:0 8px 8px 10px}
.ln-tool{width:38px;height:38px;display:inline-grid;place-items:center;flex-shrink:0;border:0;border-radius:11px;background:none;color:var(--lx-text2);cursor:pointer;transition:background .15s,color .15s}
.ln-tool .lx-ic{width:20px;height:20px}
.ln-tool[aria-pressed="true"]{background:var(--lx-tint-bg);color:var(--lx-tint)}
.ln-tool:disabled{opacity:.35;cursor:default}
@media (hover:hover){.ln-tool:not(:disabled):not([aria-pressed="true"]):hover{background:var(--lx-fill)}}
.ln-dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.ln-dot-ink{background:var(--ln-ink)}.ln-dot-blue{background:var(--ln-blue)}.ln-dot-red{background:var(--ln-red)}
.ln-tool[aria-pressed="true"] .ln-dot{box-shadow:0 0 0 2px var(--lx-bg2),0 0 0 3.5px var(--lx-tint)}
.ln-gap{flex:1}
.ln-pages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 14px}
.ln-hint{margin:2px 4px 10px;font:400 12.5px/1.4 var(--lx-font);color:var(--lx-text3)}
.ln-page{display:block;width:100%;aspect-ratio:2000/2828;margin:0 0 12px;border-radius:12px;background-color:var(--lx-card);box-shadow:inset 0 0 0 .5px var(--lx-sep);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--ln-step,16px) - 1px),var(--ln-rule) calc(var(--ln-step,16px) - 1px),var(--ln-rule) var(--ln-step,16px));
  background-position:0 calc(var(--ln-step,16px) * 2);background-origin:content-box;cursor:crosshair;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ln-pages.is-pen .ln-page{touch-action:pan-y}   /* once a pen has been used, a finger scrolls and only the pen writes */
.ln-status{flex-shrink:0;min-height:16px;margin:0;padding:2px 16px 10px;font:400 12px/1.35 var(--lx-font);color:var(--lx-text3)}
@media (min-width:1000px){
  /* A column on the right. Below 1400px the contents leave the left side for it (they are still in the bar's list). */
  .lr.has-notes .lr-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:28px;align-items:start}
  .lr.has-notes.notes-big .lr-main{grid-template-columns:minmax(0,1fr) min(560px,46vw)}
  .lr.has-notes .lr-main > .lr-side{display:none}
  .lr.has-notes .lr-main > .lr-article{grid-column:1;grid-row:1;width:100%}
  .lr.has-notes .lx-icon[data-sheet-open="contents"]{display:inline-grid}
  .lx-notes{grid-column:2;grid-row:1;position:sticky;top:68px;height:calc(100vh - 92px);height:calc(100dvh - 92px);border-radius:20px;box-shadow:0 0 0 .5px var(--lx-sep)}
}
@media (min-width:1400px){
  .lr.has-notes .lr-main.lr-has-side{grid-template-columns:220px minmax(0,1fr) 360px}
  .lr.has-notes.notes-big .lr-main.lr-has-side{grid-template-columns:220px minmax(0,1fr) min(600px,40vw)}
  .lr.has-notes .lr-main.lr-has-side > .lr-side{display:block;grid-column:1}
  .lr.has-notes .lr-main.lr-has-side > .lr-article{grid-column:2}
  .lr.has-notes .lr-main.lr-has-side > .lx-notes{grid-column:3}
  .lr.has-notes .lx-icon[data-sheet-open="contents"]{display:none}
}
@media (max-width:999px){
  /* A sheet along the bottom: the reading stays readable above it, and the page leaves room so its end can scroll clear. */
  .lx-notes{position:fixed;left:0;right:0;bottom:0;z-index:45;height:min(50vh,540px);height:min(50dvh,540px);padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -.5px 0 var(--lx-sep),0 -14px 40px rgba(0,0,0,.16);animation:lx-up .3s cubic-bezier(.2,.8,.2,1)}
  .lx-notes.is-big{height:calc(100vh - 60px);height:calc(100dvh - 60px)}
  .lx-notes .lx-grab{display:block;width:36px;height:5px;margin:7px auto 0;border-radius:3px;background:var(--lx-fill2)}
  .ln-head{padding-top:4px}
  .lr.has-notes .lr-main{padding-bottom:calc(min(50vh,540px) + 48px)}
}
@media (max-width:700px){
  .lx-notes{height:58vh;height:58dvh}
  .lr.has-notes .lr-main{padding-bottom:calc(58vh + 40px)}
}
@media (prefers-reduced-motion:reduce){.lx-notes{animation:none}}

/* ---------- sheets (popovers on a computer, slide-up sheets on a phone) ---------- */
.lx-scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.08)}
.lx-scrim[hidden],.lx-sheet[hidden],.lx-sheet [hidden]{display:none!important}
.lx-sheet{position:fixed;z-index:70;top:62px;right:14px;width:min(380px,calc(100vw - 28px));max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:4px 16px 16px;border-radius:18px;background:var(--lx-card);color:var(--lx-text);box-shadow:var(--lx-shadow);animation:lx-pop .2s cubic-bezier(.2,.8,.2,1)}
.lx-sheet-small{width:min(340px,calc(100vw - 28px))}
@keyframes lx-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.lx-grab{display:none}
.lx-sheet-head{position:sticky;top:-4px;z-index:1;display:flex;align-items:center;gap:12px;margin:0 -4px 6px;padding:10px 4px 10px;background:var(--lx-card)}
.lx-sheet-head h2{flex:1;margin:0;font:700 20px/1.2 var(--lx-display);letter-spacing:-.018em}
.lx-sheet-x{width:30px;height:30px;margin-left:auto;border-radius:50%;background:var(--lx-fill);color:var(--lx-text2)}
.lx-sheet-x .lx-ic{width:15px;height:15px;stroke-width:2.6}
.lx-sheet-doc{flex:1;min-width:0}
.lx-sheet-doc h2{font:600 16px/1.3 var(--lx-font);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lx-sheet-doc p{margin:2px 0 0;font:400 13px/1.35 var(--lx-font);color:var(--lx-text2)}
.lx-back-sm{font-size:16px;min-height:36px;padding-right:2px}
.lx-sheet-head .lx-back-sm+h2{text-align:center;margin-right:30px}
.lx-group{margin:0 0 14px;border-radius:12px;background:var(--lx-bg2);overflow:hidden}
.lx-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:11px 14px;box-sizing:border-box;border:0;background:none;color:var(--lx-text);font:400 16px/1.3 var(--lx-font);letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer;transition:background .12s}
.lx-row+.lx-row::before{content:"";position:absolute;top:0;left:48px;right:0;border-top:.5px solid var(--lx-sep)}
.lx-row[role="radio"]+.lx-row[role="radio"]::before,.lx-row-num+.lx-row-num::before{left:14px}
.lx-row>.lx-ic:first-child{width:22px;height:22px;color:var(--lx-tint)}
.lx-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lx-row-text small{font:400 13px/1.35 var(--lx-font);color:var(--lx-text2)}
.lx-row-val{color:var(--lx-text2);font-size:15px;white-space:nowrap}
.lx-row .lx-row-chev{width:15px;height:15px;color:var(--lx-text3);stroke-width:2.4}
.lx-row .lx-row-check{width:20px;height:20px;color:var(--lx-tint);stroke-width:2.6}
.lx-row-danger,.lx-row-danger>.lx-ic:first-child{color:var(--lx-red)!important}
.lx-row-n{width:24px;height:24px;border-radius:50%;background:var(--lx-fill);display:grid;place-items:center;font:600 12px/1 var(--lx-font);flex-shrink:0}
.lx-row.is-current{font-weight:600}
@media (hover:hover){.lx-row:hover{background:var(--lx-fill)}}
.lx-row:active{background:var(--lx-fill2)}
.lx-sheet-foot{margin:2px 4px 0;font:400 12px/1.5 var(--lx-font);color:var(--lx-text2)}
.lx-toc{display:flex;flex-direction:column;gap:1px;margin:0 0 10px}
.lx-toc a{display:block;padding:11px 12px;border-radius:10px;color:var(--lx-text);font:400 16px/1.3 var(--lx-font);letter-spacing:-.01em;text-decoration:none}
@media (hover:hover){.lx-toc a:hover{background:var(--lx-fill)}}
.lx-toc a.is-on{background:var(--lx-tint-bg);color:var(--lx-tint);font-weight:600}
.lx-toc .lx-toc-top{color:var(--lx-text2)}
.lx-size{display:flex;align-items:center;gap:14px;padding:8px 4px 18px}
.lx-size-a{font:500 14px/1 var(--lx-font);color:var(--lx-text2)}
.lx-size-big{font-size:23px}
.lx-size input{flex:1;accent-color:var(--lx-tint)}
.lx-sheet .lx-seg{display:flex;width:100%;margin:0 0 14px;box-sizing:border-box}
.lx-sheet .lx-seg button{flex:1;min-height:36px;font-size:14px}
.lx-font-serif{font-family:var(--lx-serif)!important}
.lx-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.lx-theme{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--lx-text2);font:500 12px/1 var(--lx-font);cursor:pointer}
.lx-theme span{display:grid;place-items:center;width:100%;height:54px;border-radius:12px;font:600 19px/1 var(--lx-font);box-shadow:inset 0 0 0 1px var(--lx-sep);transition:box-shadow .15s}
.lx-theme-light span{background:#fff;color:#1d1d1f}.lx-theme-sepia span{background:#f8f1e3;color:#3b2e1e}.lx-theme-dark span{background:#1c1c1e;color:#f5f5f7}.lx-theme-auto span{background:linear-gradient(135deg,#fff 50%,#1c1c1e 50%);color:#8e8e93}
.lx-theme[aria-pressed="true"]{color:var(--lx-text);font-weight:600}
.lx-theme[aria-pressed="true"] span{box-shadow:0 0 0 2.5px var(--lx-tint)}
.lx-need{padding:2px 4px 2px}
.lx-need p{margin:0 0 12px;font:400 14px/1.5 var(--lx-font);color:var(--lx-text2)}
.lx-paste{margin:0 0 14px}
.lx-paste textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:0;border-radius:12px;background:var(--lx-bg2);color:var(--lx-text);font:400 15px/1.5 var(--lx-font);resize:vertical;outline:none}
.lx-paste textarea:focus{box-shadow:0 0 0 3px var(--lx-tint-bg)}
.lx-paste-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

/* Below 940px the bar has no room for the Flashcards and Lesson pills beside four icons; the same buttons sit under the title. */
@media (max-width:940px){.lx-pill{display:none}}

/* ---------- phones ---------- */
@media (max-width:700px){
  .lx-bar{height:52px;padding:0 4px}
  .lx-bar-title{max-width:38vw;font-size:16px}
  .lx-icon{width:42px}
  /* The reader's bar has four icons on a phone, so the title cannot sit in the middle: once you scroll, "Library" folds
     to its arrow and the title takes the room beside it, cut short with an ellipsis when it must be. */
  .lr .lx-bar{grid-template-columns:auto minmax(0,1fr) auto;column-gap:2px}
  .lr .lx-bar-title{justify-self:stretch;align-items:flex-start;max-width:none;min-width:0}
  .lr .lx-bar-title b{max-width:100%}
  .lr .lx-bar.is-scrolled .lx-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lx-scrim{background:rgba(0,0,0,.32)}
  .lx-sheet,.lx-sheet-small{top:auto;right:0;left:0;bottom:0;width:100%;max-height:88vh;max-height:88dvh;padding:0 16px max(18px,env(safe-area-inset-bottom));border-radius:16px 16px 0 0;animation:lx-up .3s cubic-bezier(.2,.8,.2,1)}
  .lx-grab{display:block;width:36px;height:5px;margin:7px auto 0;border-radius:3px;background:var(--lx-fill2)}
  .lx-sheet-head{top:0}
  html.lx-locked,html.lx-locked body{overflow:hidden}
  .lb-head h1{font-size:34px}
  .lb-tools{margin-bottom:28px}
  .lb-tools .lx-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .lb-grid,.lb-sample-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
  .lb-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px;margin-bottom:40px;padding:34px 22px 28px;border-radius:24px}
  .lb-hero-book{width:148px}
  .lb-hero-prog{margin-left:auto;margin-right:auto}
  .lb-hero .lx-btn{min-width:200px}
  .lr{--lr-size:18px}
  .lr[data-size="0"]{--lr-size:15.5px}.lr[data-size="1"]{--lr-size:17px}.lr[data-size="3"]{--lr-size:20px}.lr[data-size="4"]{--lr-size:22px}
  .lr-main{padding:0 20px 90px}
  .lr-head{margin-top:10px}
  .lr-head h1{font-size:34px;letter-spacing:-.026em}
  .lr-dek{font-size:20px}
  .lr-end h2{font-size:24px}
  .ls-main{padding:16px 20px 210px}
  .ls-foot-in{padding:12px 16px max(14px,env(safe-area-inset-bottom))}
  .ls-opt{padding:14px 15px;font-size:16.5px;border-radius:16px}
  .lc-stack{height:min(470px,58vh);height:min(470px,58dvh)}
  .lc-face{padding:22px 22px 18px;border-radius:24px}
  .lr-study .lx-btn{flex:1 1 auto}
}
@keyframes lx-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.ls-step,.ls-why,.ls-chip,.ls-model,.ls-feedback,.lc-card.is-in{animation:none}.ls-bar i,.ls-ring-fill,.lc-inner,.lc-card{transition:none}.lx-sheet,.lr-article,.lr-skim-bar,.lx-book-hero,.lb-hero-book::after{animation:none}.lx-book{transition:none}.lr .lx-bar{transition:none}.lr-progress span,.lx-bar,.lx-bar-title,.lr-q-c{transition:none}}
@media print{.lx-bar,.lr-progress,.lr-end,.lx-sheet,.lx-scrim,.lx-notes{display:none!important}.lr-main{padding:0}}

/* ---------- tables in notes rendered by the app (lessons) ---------- */
.note-table{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:12px;max-width:100%}
.note-table table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.45}
.note-table th,.note-table td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.note-table th{background:var(--canvas);font-weight:600}
.note-table tr:last-child td{border-bottom:0}
/* The Library's own door (/library; owner, 21 October 2026): a home link and an account button in the bar, the account
   sheet, and the sign-in screens in the Library's look (design.js draws them in LEARN.authFrame at the door). The sign-in
   form's own classes come from the study app; here they take the Library's colours, type and shapes. */
.lx-home{gap:8px;color:var(--lx-text);font-weight:600;text-decoration:none;padding-left:6px}
.lx-home img{width:22px;height:22px;border-radius:6px;flex:none}
.lx-acc-btn .lx-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lx-tint);color:#fff;font:600 14px/1 var(--lx-font)}
.lx[data-theme="dark"] .lx-acc-btn .lx-avatar{color:#151517}
.lx-acc-who{cursor:default}
.lx-acc-who .lx-row-text{min-width:0;overflow-wrap:anywhere}
.lx-acc-go{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.lx-acc-go .lx-btn{flex:1 1 auto}
.auth-root>.lx-auth{max-width:none;padding:0}
.lx.lx-auth{--paper:var(--lx-bg2);--ink:var(--lx-text);--mut:var(--lx-text2);--dim:var(--lx-text3);--line:var(--lx-sep);--canvas:var(--lx-fill);--blue:var(--lx-tint);--card:var(--lx-card);--card2:var(--lx-bg2);--green:var(--lx-green);--red:var(--lx-red);--font:var(--lx-font);--display:var(--lx-display)}
.lx-auth-main{display:grid;justify-items:center;padding:20px 20px 64px}
.lx-auth-card{width:100%;max-width:420px;padding:28px 24px 24px;border-radius:20px;background:var(--lx-card);box-shadow:var(--lx-shadow);box-sizing:border-box;color:var(--lx-text)}
.lx-auth-card .eyebrow{display:block;font:600 12px/1.2 var(--lx-font);letter-spacing:.08em;color:var(--lx-tint)}
.lx-auth-card h1,.lx-auth-card h2{margin:12px 0 8px;font:700 30px/1.15 var(--lx-display);letter-spacing:-.02em;color:var(--lx-text)}
.lx-auth-card p{font:400 15px/1.5 var(--lx-font);color:var(--lx-text2)}
.lx-auth-card label{display:block;margin:16px 0 6px;font:600 13px/1.2 var(--lx-font);color:var(--lx-text)}
.lx-auth-card .tin{background:var(--lx-bg2);color:var(--lx-text);border:1px solid var(--lx-sep);border-radius:12px;font-family:var(--lx-font)}
.lx-auth-card .tin::placeholder{color:var(--lx-text3)}
.lx-auth-card .btn{border-radius:999px;font-family:var(--lx-font);font-weight:600;min-height:48px}
.lx-auth-card .btn.hot{background:var(--lx-tint);color:#fff;border-color:transparent;margin-top:20px;width:100%}
.lx[data-theme="dark"] .lx-auth-card .btn.hot{color:#151517}
.lx-auth-card .btn.hot:hover{background:var(--lx-tint);opacity:.9}
.lx-auth-card .gbtn{background:var(--lx-bg2);color:var(--lx-text);border:1px solid var(--lx-sep);margin:22px 0 12px;width:100%}
.lx-auth-card .or{border-top-color:var(--lx-sep)}
.lx-auth-card .or span{background:var(--lx-card);color:var(--lx-text2)}
.lx-auth-card .auMsg{background:var(--lx-tint-bg);color:var(--lx-text)}
.lx-auth-card .auMsg:empty{display:none}
.lx-auth-card .alinks{color:var(--lx-text2)}
.lx-auth-card .alinks button{color:var(--lx-tint)}
.lx-auth-card .guest-button{background:var(--lx-bg2);border-color:var(--lx-sep);color:var(--lx-text);border-radius:999px;margin-top:22px}
.lx-auth-card .auth-footnote{font-size:12px;text-align:center;margin-top:12px;color:var(--lx-text2)}
.lx-auth-card .auth-footnote a{color:var(--lx-tint)}
.lx-auth-card .pw-toggle{background:var(--lx-fill);color:var(--lx-tint);border-color:var(--lx-sep)}
.lx-auth-card .pw-mark{background:var(--lx-bg2)}
.lx-auth-card .note-p{color:var(--lx-text2)}
@media(max-width:520px){.lx-auth-main{padding:8px 12px 48px}.lx-auth-card{padding:22px 18px;border-radius:18px}.lx-auth-card h1,.lx-auth-card h2{font-size:27px}}

/* ---------- books kept on this device only: "Just add it to my Library" (owner, 22 October 2026) ----------
   The import's first choice: study notes, or just add it, free. A PDF opens on its own pages, a column of them drawn
   from the file as they come near the screen; each page keeps its shape from the start, so nothing moves while they draw. */
.li-mode{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.li-mode label{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1.5px solid var(--lx-sep);border-radius:14px;background:var(--lx-card);cursor:pointer;color:var(--lx-text);letter-spacing:0;text-transform:none;transition:border-color .15s,background .15s}
.li-mode label.is-on{border-color:var(--lx-tint);background:var(--lx-tint-bg)}
.li-mode input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0;accent-color:var(--lx-tint)}
.li-mode span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font:400 15px/1.35 var(--lx-font)}
.li-mode b{font-weight:600}
.li-mode small{font-size:13px;line-height:1.4;color:var(--lx-text2)}
.li-signin{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:4px 2px 14px}
.li-signin p{margin:0;font:400 15px/1.45 var(--lx-font);color:var(--lx-text)}
.li-plain-what{margin:-2px 2px 14px;font:400 14px/1.4 var(--lx-font);color:var(--lx-text2)}
.li-plain-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--lx-bg2);color:var(--lx-text);font:400 14px/1.45 var(--lx-font)}
.li-plain-note .lx-ic{width:18px;height:18px;margin-top:1px;color:var(--lx-green);stroke-width:2.2}
.li-plain-note span{flex:1;min-width:0}
.li-plain-note b{display:block;margin-bottom:2px;font-weight:600}
.li-usage{margin:0 2px 14px;font:500 13px/1.4 var(--lx-font);color:var(--lx-text2);font-variant-numeric:tabular-nums}
.lr.lp .lx-icon[data-sheet-open="contents"]{display:inline-grid}   /* a PDF has no contents column beside it */
.lp-main{padding:8px max(10px,env(safe-area-inset-right)) 120px max(10px,env(safe-area-inset-left))}
.lp-pages{width:min(var(--lp-w,880px),100%);margin:0 auto}
.lp-page{position:relative;width:100%;height:0;margin:0 0 14px;background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 2px 12px rgba(0,0,0,.08)}
.lx[data-theme="dark"] .lp-page{box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 2px 16px rgba(0,0,0,.55)}
.lp-page:not(.is-drawn)::after{content:attr(data-page);position:absolute;inset:0;display:grid;place-items:center;font:500 15px/1 var(--lx-font);color:#a1a1a6}
.lp-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.lp-error{max-width:560px;margin:16px auto}
.lp-end{max-width:560px;margin:3em auto 0}
.lp-goto{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font:400 15px/1.3 var(--lx-font);color:var(--lx-text)}
.lp-goto label{flex-shrink:0;letter-spacing:0;text-transform:none;color:var(--lx-text);font:inherit}
.lp-goto input{flex:1;min-width:0;height:40px;padding:0 12px;box-sizing:border-box;border:1.5px solid var(--lx-sep);border-radius:10px;background:var(--lx-card);color:var(--lx-text);font:400 16px/1 var(--lx-font);outline:none}
.lp-goto input:focus{border-color:var(--lx-tint);box-shadow:0 0 0 3px var(--lx-tint-bg)}
.lp-goto .lx-btn{min-height:40px;padding:0 18px}
@media (max-width:700px){.lp-zoom-btn{display:none}.lp-main{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}.lp-page{margin-bottom:8px}}