:root{
  --navy:#0f1b2d;--navy-soft:#172741;--ink:#162235;--muted:#66758a;
  --accent:#f46a3d;--accent-soft:#fff0e9;--line:#e1e6ed;--surface:#ffffff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);color-scheme:light;
}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:#f2f5f8}button,select{font:inherit}button,select,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding:14px max(24px,calc((100vw - 1140px)/2));background:rgba(15,27,45,.97);box-shadow:0 8px 26px rgba(15,27,45,.13)}
.brand{border:0;background:none;display:flex;align-items:center;gap:11px;text-align:left;padding:0;color:#fff}.brand img{border-radius:12px;box-shadow:0 7px 18px rgba(0,0,0,.22)}.brand strong{display:block;font-size:21px;line-height:1;font-weight:950;letter-spacing:.05em}.brand small{display:block;margin-top:5px;color:#dfe7f2;font-size:11px;font-weight:800;letter-spacing:.23em}.header-controls{display:flex;gap:10px;align-items:center}.language-control{display:flex;gap:8px;align-items:center;color:#e1e9f3;font-size:13px;font-weight:750}select{border:1px solid rgba(255,255,255,.17);border-radius:999px;min-height:42px;padding:8px 33px 8px 14px;background:var(--navy-soft);color:#fff;font-size:14px}.install-button{border:1px solid rgba(255,255,255,.22);border-radius:999px;background:var(--accent);color:#fff;padding:10px 15px;font-weight:850;font-size:13px;min-height:42px}
.library-view{max-width:1140px;margin:auto;padding:34px 24px 72px}.library-heading{position:relative;overflow:hidden;padding:31px 34px 32px;border-radius:26px;background:linear-gradient(125deg,#101d30 0%,#172b48 58%,#253b5c 100%);box-shadow:0 18px 42px rgba(21,37,60,.18)}.library-heading:after{content:"";position:absolute;right:-68px;bottom:-93px;width:240px;height:240px;border-radius:50%;border:42px solid rgba(244,106,61,.24);pointer-events:none}.studio-name{position:relative;z-index:1;color:#ff9a77;font-size:11px;letter-spacing:.21em;font-weight:900}.library-heading h1{position:relative;z-index:1;color:#fff;font-size:clamp(27px,3.7vw,40px);font-weight:900;letter-spacing:-.045em;line-height:1.16;margin:10px 0 0}.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.book-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 9px 23px rgba(15,27,45,.07);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column}.book-card:hover{transform:translateY(-3px);border-color:#cbd5e2;box-shadow:0 17px 30px rgba(15,27,45,.13)}.book-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(244,106,61,.32),0 17px 30px rgba(15,27,45,.13)}.book-visual{position:relative;height:202px;background:linear-gradient(135deg,#f5f7f9,#fff6f1);overflow:hidden;display:grid;place-items:center}.book-visual:after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,rgba(15,27,45,.08));pointer-events:none}.book-visual img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:13px}.book-number{position:absolute;z-index:2;left:14px;top:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:17px;font-weight:900;background:var(--navy);color:#fff;box-shadow:0 5px 11px rgba(15,27,45,.21)}.book-card:nth-child(1) .book-visual:before,.book-card:nth-child(2) .book-visual:before,.book-card:nth-child(3) .book-visual:before{position:absolute;z-index:3;right:13px;top:15px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.88);font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--navy)}.book-card:nth-child(1) .book-visual:before{content:"START HERE"}.book-card:nth-child(2) .book-visual:before{content:"BUILD FLUENCY"}.book-card:nth-child(3) .book-visual:before{content:"REAL LIFE"}.book-content{padding:18px 19px 19px;display:flex;flex-direction:column;flex:1}.book-content h2{font-size:23px;line-height:1.15;margin:0 0 7px;font-weight:900;letter-spacing:-.03em}.book-topics{font-size:14px;line-height:1.55;margin:0 0 18px;color:var(--muted);min-height:44px}.edition-tag{font-size:12px;font-weight:800;color:var(--accent);margin:0 0 9px;min-height:17px}.open-book{width:100%;border:0;border-radius:12px;background:var(--navy);color:#fff;padding:12px 15px;text-align:center;font-weight:850;min-height:45px;letter-spacing:.01em;margin-top:auto}.open-book:hover{background:#263a58}.open-book.pending{background:#fff;border:1px solid var(--line);color:var(--ink)}
.chapter-panel{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 9px 23px rgba(15,27,45,.06)}.chapter-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.chapter-heading h2{font-size:21px;line-height:1.2;margin:0}.quiet-button{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);min-height:41px;padding:9px 14px;font-size:13px;font-weight:800}.chapter-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.chapter-button{border:1px solid var(--line);background:#f9fafb;border-radius:14px;text-align:left;padding:16px 13px;min-height:95px;color:var(--ink)}.chapter-button:hover{border-color:var(--accent);background:var(--accent-soft)}.chapter-button span{font-size:12px;color:var(--accent);font-weight:900;display:block;margin-bottom:7px}.chapter-button strong{font-size:15px;line-height:1.35;display:block}.edition-note{font-size:14px;line-height:1.7;color:var(--muted);margin:22px 0 0}.connection-note{display:flex;gap:8px;align-items:center;margin:22px 4px 0;color:var(--muted)}.connection-note p{font-size:13px;line-height:1.5;margin:0}.connection-dot{border:2px solid var(--accent);border-radius:50%;width:8px;height:8px;flex:none}.ios-install-note{font-size:14px;color:var(--muted);line-height:1.7;max-width:650px}
.reader-navigation{height:66px;border-bottom:1px solid rgba(255,255,255,.1);padding:10px 24px;display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff}.reader-navigation strong{font-size:15px;white-space:nowrap}.reader-navigation label{margin-left:auto;max-width:55%}.reader-navigation select{max-width:100%;font-size:14px;background:var(--navy-soft)}.reader-view{height:calc(100dvh - 78px);position:relative;display:flex;flex-direction:column}#reader-frame{display:block;border:0;width:100%;flex:1;min-height:0;background:#fff}.reader-loading{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:2;background:#fff;border:1px solid var(--line);padding:14px 19px;border-radius:14px;font-size:14px;color:var(--muted);box-shadow:0 10px 25px rgba(15,27,45,.13)}.reader-error{position:absolute;top:95px;left:24px;right:24px;background:#fff4ed;border:1px solid #f5bea9;padding:18px;border-radius:15px;font-size:15px;line-height:1.7}.offline-status{position:fixed;bottom:0;left:0;right:0;padding:13px 20px calc(13px + env(safe-area-inset-bottom));z-index:20;background:var(--navy);color:#fff;text-align:center;font-size:14px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{padding:24px}
@media(max-width:800px){.book-grid{gap:12px}.book-visual{height:180px}.book-content{padding:17px 15px}.book-content h2{font-size:22px}.chapter-list{grid-template-columns:repeat(3,minmax(0,1fr))}.app-header{padding:13px 20px}.book-topics{font-size:14px}}
@media(max-width:580px){.app-header{min-height:70px;padding:12px 16px;gap:8px}.brand img{width:35px;height:35px}.brand{gap:8px}.brand strong{font-size:19px}.brand small{font-size:10px}.language-control>span{display:none}.language-control select{font-size:14px;min-height:40px;padding-left:10px}.header-controls{gap:7px}.install-button{padding:9px 11px;font-size:12px;max-width:82px;line-height:1.25}.library-view{padding:20px 14px 56px}.library-heading{padding:26px 22px;border-radius:22px}.library-heading h1{font-size:30px}.book-grid{grid-template-columns:1fr;gap:12px;margin-top:14px}.book-card{display:grid;grid-template-columns:115px minmax(0,1fr);border-radius:18px}.book-card:hover{transform:none}.book-visual{height:100%;min-height:181px}.book-visual img{padding:10px 5px}.book-number{left:9px;top:9px;width:31px;height:31px;font-size:16px;border-radius:9px}.book-card:nth-child(1) .book-visual:before,.book-card:nth-child(2) .book-visual:before,.book-card:nth-child(3) .book-visual:before{display:none}.book-content{padding:17px 15px}.book-content h2{font-size:22px}.book-topics{margin-bottom:13px;min-height:0;font-size:13px}.open-book{padding:10px;font-size:13px;min-height:41px}.edition-tag{font-size:12px;margin-bottom:7px;min-height:0}.chapter-panel{padding:17px;margin-top:18px}.chapter-list{grid-template-columns:1fr}.chapter-button{min-height:0;padding:15px;display:flex;align-items:center;gap:13px}.chapter-button span{margin:0;white-space:nowrap}.chapter-button strong{font-size:15px}.reader-view{height:calc(100dvh - 70px)}.reader-navigation{padding:9px 12px;gap:9px;height:62px}.reader-navigation strong{font-size:13px}.reader-navigation .quiet-button{padding:8px 11px;font-size:13px;background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}.reader-navigation select{font-size:13px;padding-left:10px}.reader-navigation label{max-width:48%}}
/* The home screen is a quiet book library, not an illustrated poster gallery. */
.book-grid{gap:14px}.book-card{display:block;min-height:194px;border-radius:20px}.book-visual{position:static;height:0;min-height:0;overflow:visible;background:transparent;display:block}.book-visual img,.book-visual:after,.book-card:nth-child(1) .book-visual:before,.book-card:nth-child(2) .book-visual:before,.book-card:nth-child(3) .book-visual:before{display:none}.book-number{left:20px;top:21px;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);border:1px solid #f3b39c;color:#c84f2b;box-shadow:none;font-size:15px}.book-content{min-height:194px;padding:20px 20px 20px 70px}.book-content h2{font-size:24px;margin:1px 0 8px}.book-topics{min-height:0;margin:0 0 15px;font-size:14px;line-height:1.55}.open-book{width:auto;align-self:flex-start;min-height:38px;padding:8px 15px;border:1px solid #efa082;border-radius:999px;background:#fff;color:#c84f2b;font-size:13px;font-weight:850}.open-book:hover{background:var(--accent-soft);border-color:var(--accent)}
@media(max-width:580px){.book-grid{gap:11px}.book-card{display:block;min-height:168px;border-radius:18px}.book-visual{height:0;min-height:0}.book-number{left:17px;top:19px;width:30px;height:30px;font-size:14px;border-radius:9px}.book-content{min-height:168px;padding:18px 17px 17px 63px}.book-content h2{font-size:22px;margin:1px 0 6px}.book-topics{font-size:13px;margin-bottom:12px}.open-book{padding:7px 13px;min-height:36px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Calm eucalyptus palette for the library home screen. */
:root{--navy:#315c4f;--navy-soft:#406e60;--ink:#20372f;--muted:#65766e;--line:#dce6e0;--accent:#d96842;--accent-soft:#fff2eb}
body{background:#f3f6f3}
.app-header{background:rgba(49,92,79,.97);box-shadow:0 8px 26px rgba(35,72,60,.14)}
.brand small{color:#e0eee8}.language-control{color:#e1eee8}.language-control select{background:#406e60}
.library-heading{background:linear-gradient(125deg,#315c4f 0%,#467564 58%,#5c8977 100%);box-shadow:0 18px 42px rgba(42,82,69,.17)}
.library-heading:after{border-color:rgba(217,104,66,.20)}
.book-card{box-shadow:0 9px 23px rgba(41,78,67,.07)}.book-card:hover{border-color:#bfd2c8;box-shadow:0 17px 30px rgba(41,78,67,.12)}
.reader-navigation,.offline-status{background:var(--navy)}
.copyright-notice{margin:24px 4px 0;color:#7a8982;font-size:12px;line-height:1.55;text-align:center}
/* A focused vertical library keeps the desktop view as calm as the mobile app. */
@media(min-width:581px){
  .library-view{max-width:820px;padding-top:30px}
  .book-grid{grid-template-columns:1fr;gap:12px}
  .book-card{min-height:150px}
  .book-content{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:22px;align-items:center;min-height:150px;padding:20px 24px 20px 78px}
  .book-content h2{grid-column:1;grid-row:1;margin:0 0 5px}
  .book-topics{grid-column:1;grid-row:2;align-self:start;margin:0;font-size:15px}
  .open-book{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end}
  .book-number{left:24px;top:22px}
}
/* Keep the reader's Chapter selector aligned with the header's Language selector. */
.reader-navigation{padding-left:max(24px,calc((100vw - 1140px)/2));padding-right:max(24px,calc((100vw - 1140px)/2))}
.reader-back-button{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.36);border-radius:999px;background:transparent;color:#fff;min-height:36px;padding:7px 12px;font-size:14px;font-weight:800}.reader-back-button:hover{background:rgba(255,255,255,.1)}.connection-note{justify-content:center;text-align:center}
@media(max-width:800px){.reader-navigation{padding-left:20px;padding-right:20px}}
@media(max-width:580px){.reader-navigation{padding-left:16px;padding-right:16px}.reader-back-button{min-height:34px;padding:6px 10px;font-size:13px}}

/* book color coding (Claude v6) */
.book-card[data-book="1"]{--bc:#ef5a2f;--bs:#fff0e8;--bl:#f6cdb8}
.book-card[data-book="2"],#chapter-panel[data-book="2"],#reader-view[data-book="2"]{--bc:#1f8ad0;--bs:#e8f4fc;--bl:#bcdcf2}
.book-card[data-book="3"],#chapter-panel[data-book="3"],#reader-view[data-book="3"]{--bc:#3e9a35;--bs:#edf7ea;--bl:#c6e4bf}
#chapter-panel[data-book="1"],#reader-view[data-book="1"]{--bc:#ef5a2f;--bs:#fff0e8;--bl:#f6cdb8}
.book-card[data-book] .book-number{background:var(--bs);border-color:var(--bl);color:var(--bc)}
.book-card[data-book] .open-book{border-color:var(--bc);color:var(--bc);background:#fff}
.book-card[data-book] .open-book:hover{background:var(--bs)}
.book-card[data-book].selected{border-color:var(--bc);box-shadow:0 0 0 2px var(--bl),0 17px 30px rgba(15,27,45,.13)}
#chapter-panel[data-book] .chapter-button span{color:var(--bc)}
#chapter-panel[data-book] .chapter-button:hover{border-color:var(--bc);background:var(--bs)}
#reader-view[data-book] .reader-navigation{box-shadow:inset 0 -4px 0 var(--bc)}

/* Books button in header, left of language (Claude v6) */
.header-books{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-weight:850;font-size:14px;white-space:nowrap}
.header-books:hover{background:rgba(255,255,255,.22)}
@media(max-width:580px){.header-books{min-height:40px;padding:7px 11px;font-size:13px}}

/* section tabs in the top bar next to Book N (Claude v8) */
.reader-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.reader-tabs::-webkit-scrollbar{display:none}
.reader-tab{flex:0 0 auto;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:800;white-space:nowrap;min-height:36px;cursor:pointer}
.reader-tab:hover{background:rgba(255,255,255,.12)}
.reader-tab.active{background:#fff;color:var(--bc,#17202a);border-color:#fff}
@media(max-width:800px){.reader-navigation{flex-wrap:wrap;height:auto;row-gap:8px}.reader-tabs{order:3;flex:1 0 100%}}
@media(max-width:580px){.reader-navigation{height:auto}.reader-tab{padding:6px 11px;font-size:12.5px;min-height:34px}}
/* spacing between "Book N" and the tabs (Claude v11) */
#reader-book-label{display:inline-flex;align-items:center;gap:8px;font-size:16px;margin-right:6px;padding-right:20px;border-right:1px solid rgba(255,255,255,.28)}
#reader-book-label:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--bc,#ef5a2f);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
@media(max-width:800px){#reader-book-label{border-right:0;padding-right:0;margin-right:0}}



/* phone: nothing cut in the top bar (Claude v17) */
.reader-tab .t-short{display:none}
@media(max-width:700px){
  .reader-tab .t-long{display:none}.reader-tab .t-short{display:inline}
  .reader-tabs{flex-wrap:wrap;overflow:visible}
  .reader-navigation label{flex:1 1 auto;max-width:none!important;margin-left:12px;min-width:0}
  .reader-navigation select{width:100%;max-width:none!important;text-overflow:ellipsis}
}
@media(max-width:420px){.header-controls{gap:6px;min-width:0}.language-control select{max-width:none;padding-right:26px;font-size:13px;padding-left:10px}.header-books{padding:6px 10px;font-size:12.5px}.brand strong{font-size:17px}.brand small{font-size:9px;letter-spacing:.18em}.app-header{gap:6px}}
@media(max-width:400px){.brand span{display:none}.language-control select{max-width:none!important;font-size:13px;padding-left:10px}}
@media(max-width:340px){.reader-navigation select{font-size:12px!important;padding-left:8px!important;padding-right:24px!important}.reader-navigation label{margin-left:0!important}}

/* ===== gamification step 1 (Claude) ===== */
.rx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.rx-stat{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(15,27,45,.05);text-align:left;font:inherit;color:var(--ink)}
.rx-stat>span:first-child{font-size:24px;line-height:1}
.rx-stat b{display:block;font-size:20px;line-height:1.1}
.rx-stat small{display:block;color:var(--muted);font-size:12px;font-weight:700}
.rx-fire{filter:grayscale(1);opacity:.55}.rx-fire.lit{filter:none;opacity:1;animation:rxPulse 1.6s ease-in-out infinite}
@keyframes rxPulse{50%{transform:scale(1.15)}}
.rx-badge-btn{cursor:pointer}
.rx-badges{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.rx-badge{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:9px 10px;border-radius:12px;background:#f4f5f6;filter:grayscale(1);opacity:.55}
.rx-badge span{grid-row:1/3;font-size:24px}.rx-badge b{font-size:13px}.rx-badge small{font-size:11px;color:var(--muted)}
.rx-badge.on{filter:none;opacity:1;background:#fff6e8;border:1px solid #f3d29a}
.rx-meter{display:flex;align-items:center;gap:8px;margin:-6px 0 12px}
.rx-track{flex:1;height:7px;border-radius:9px;background:#eef0f2;overflow:hidden}.rx-track i{display:block;height:100%;border-radius:9px;background:var(--bc,var(--accent))}
.rx-meter small{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.chapter-button{position:relative}
.rx-ch{position:absolute;top:8px;right:10px;font-style:normal;font-size:12px;font-weight:900;color:var(--bc,var(--accent))}
.rx-ch.full{width:22px;height:22px;border-radius:50%;background:var(--bc,var(--accent));color:#fff;display:grid;place-items:center;font-size:13px}
.reader-tab.rx-done::after{content:" ✓";font-weight:900}
.rx-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
.rx-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;z-index:10000;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;background:#17202a;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.25);transition:.3s;max-width:calc(100vw - 32px)}
.rx-toast.on{transform:translate(-50%,0);opacity:1}.rx-toast-i{font-size:26px}.rx-toast b{display:block;font-size:15px}.rx-toast small{display:block;opacity:.8;font-size:12.5px}
@media(max-width:700px){.rx-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rx-stat{padding:10px 12px}.rx-stat b{font-size:18px}.rx-ch{top:50%;transform:translateY(-50%);right:12px}}