/* The Jyotish Project Study Space v1.90: surfaces, the Nature colour mood, and layout refinements.

   1. Matte panels. The feature panels (dashboard greeting, games, milestones, landing hero) were glossy: a bright
      radial glow over a gradient. They are now matte, like pigment on handmade paper: a flat two-tone ground,
      a fine paper grain and a hairline edge. Each colour mood defines one set of panel tokens, so text, chips,
      buttons and accents keep the same contrast in every mood:
        --panel, --panel-2   ground (two close tones)
        --panel-ink          text on the panel (at least 7:1 on --panel)
        --panel-muted        secondary text (at least 4.5:1)
        --panel-accent       dates, labels, primary buttons on panels
        --panel-line         hairlines and chip borders
      Settings → Colour mood → Panel finish can bring back the soft glow (html[data-finish=glow]).
   2. Nature: a sixth colour mood, moss, fern, bark and sunlit ochre, with survey-map contour lines.
   3. Layout: game cards, dashboard cards, assignments, sidebar spacing. */

html{
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --panel:#3a291d;--panel-2:#46311f;--panel-ink:#f7efe3;--panel-muted:#dccab0;--panel-accent:#e0b264;--panel-accent-ink:#2a1c10;--panel-line:rgba(255,238,214,.16);
  --tone-mix:62%;
}
html[data-appearance=dark]{--panel:#1a130e;--panel-2:#211811;--panel-ink:#efe6d8;--panel-muted:#c4b39b;--panel-accent:#d9b27c;--panel-accent-ink:#1c140c;--panel-line:rgba(255,232,200,.13)}
html[data-appearance=bubblegum]{--panel:#6a4640;--panel-2:#76514a;--panel-ink:#fff6ee;--panel-muted:#f3d9cd;--panel-accent:#ffd49c;--panel-accent-ink:#3c2620;--panel-line:rgba(255,236,226,.2)}
html[data-appearance=rainbow]{--panel:#8a3616;--panel-2:#9c431b;--panel-ink:#fff6ea;--panel-muted:#ffdcc2;--panel-accent:#ffd27a;--panel-accent-ink:#3a1406;--panel-line:rgba(255,232,210,.22)}
html[data-appearance=celestial]{--panel:#15244a;--panel-2:#1b2c57;--panel-ink:#f5ebd3;--panel-muted:#cad1e4;--panel-accent:#e4cea4;--panel-accent-ink:#132038;--panel-line:rgba(228,206,164,.2)}
html[data-appearance=nature]{--panel:#263322;--panel-2:#2f3e29;--panel-ink:#f0f2e4;--panel-muted:#c9d3b6;--panel-accent:#dcc06a;--panel-accent-ink:#1d2718;--panel-line:rgba(230,240,200,.16)}

/* matte grounds (the default finish) */
html:not([data-finish=glow]),html:not([data-finish=glow])[data-appearance]{
  --earth-panel:var(--grain),linear-gradient(160deg,var(--panel),var(--panel-2));
  --earth-glass:var(--grain),linear-gradient(160deg,color-mix(in srgb,var(--panel) 95%,transparent),color-mix(in srgb,var(--panel-2) 91%,transparent));
  --earth-night:var(--panel);--earth-night2:var(--panel-2);--earth-gold:var(--panel-accent);
}
html[data-appearance=nature][data-finish=glow]{--earth-panel:radial-gradient(circle at 86% 8%,rgba(220,192,106,.32),transparent 44%),radial-gradient(circle at 12% 100%,#3f5a33,#1b2617 70%);--earth-glass:radial-gradient(circle at 86% 8%,rgba(220,192,106,.32),transparent 44%),linear-gradient(150deg,rgba(27,38,23,.93),rgba(63,90,51,.86));--earth-night:#1b2617;--earth-night2:#3f5a33;--earth-gold:#dcc06a}

/* panels in the app: one surface, one set of text colours */
html body :is(.dh8-hero,.fw8-hero,.ms7-hero,.ar7-hero){background:var(--earth-panel)!important;color:var(--panel-ink)!important;border:1px solid var(--panel-line);box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 26px rgba(30,20,10,.14)!important}
html:not([data-finish=glow]) body :is(.dh8-hero,.fw8-hero,.ms7-hero,.ar7-hero){box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 8px 20px rgba(30,20,10,.12)!important}
html body :is(.dh8-hero,.fw8-hero,.ms7-hero,.ar7-hero) :is(h1,h2,h3,b,strong){color:var(--panel-ink)!important}
html body :is(.dh8-hero,.fw8-hero,.ms7-hero,.ar7-hero) :is(p,small){color:var(--panel-muted)!important;opacity:1!important}
html body .dh8-hero .dh8-date{color:var(--panel-accent)!important}
html body .dh8-hero .dh8-chip{background:rgba(255,248,236,.07)!important;border-color:var(--panel-line)!important;color:var(--panel-ink)!important}
html body .dh8-hero .dh8-chip:hover{border-color:var(--panel-accent)!important}
html body :is(.dh8-hero,.ar7-hero,.ms7-hero) svg circle.bg,html body :is(.dh8-hero,.ar7-hero,.ms7-hero) svg .bg{stroke:var(--panel-line)!important}
html body :is(.dh8-hero,.ar7-hero,.ms7-hero) svg circle.fg,html body :is(.dh8-hero,.ar7-hero,.ms7-hero) svg .fg{stroke:var(--panel-accent)!important}
html body :is(.dh8-hero,.ar7-hero,.ms7-hero) :is(svg,.dh8-prog,.ar7-level){background:transparent!important}
html body .ar7-hero .btn.primary,html body .ar7-hero button.primary{background:var(--panel-accent)!important;color:var(--panel-accent-ink)!important;border-color:var(--panel-accent)!important}
html body .ar7-hero .btn:not(.primary){background:rgba(255,248,236,.06)!important;color:var(--panel-ink)!important;border-color:var(--panel-line)!important}
html body .ar7-hero .ar7-pill{background:rgba(255,248,236,.07)!important;border-color:var(--panel-line)!important;color:var(--panel-ink)!important}
html body .ar7-hero .ar7-pill.hot{border-color:var(--panel-accent)!important}

/* game cards: matte pigment tiles, each tinted by a Graha colour mixed into the panel ground */
html body .ar7-game{--hue:#a55828;background:var(--grain),linear-gradient(165deg,color-mix(in srgb,var(--hue) var(--tone-mix),var(--panel)),color-mix(in srgb,var(--hue) calc(var(--tone-mix) - 14%),var(--panel-2)))!important;color:var(--panel-ink)!important;border:1px solid var(--panel-line)!important;box-shadow:0 6px 16px rgba(30,20,10,.12)!important}
html:not([data-finish=glow]) body .ar7-game::after{content:none!important}
html body .ar7-game:hover{box-shadow:0 12px 24px rgba(30,20,10,.18)!important}
html body .ar7-game span,html body .ar7-game small{color:var(--panel-ink)!important;opacity:.86}
html body .ar7-games>.ar7-game:nth-child(8n+1){--hue:#a6443d}html body .ar7-games>.ar7-game:nth-child(8n+2){--hue:#436e76}
html body .ar7-games>.ar7-game:nth-child(8n+3){--hue:#8f5770}html body .ar7-games>.ar7-game:nth-child(8n+4){--hue:#b07a2a}
html body .ar7-games>.ar7-game:nth-child(8n+5){--hue:#4f7a52}html body .ar7-games>.ar7-game:nth-child(8n+6){--hue:#8a6b20}
html body .ar7-games>.ar7-game:nth-child(8n+7){--hue:#535779}html body .ar7-games>.ar7-game:nth-child(8n+8){--hue:#8a6246}
html body .ar7-card .back{background:var(--grain),var(--panel)!important;border-color:var(--panel-line)!important;color:var(--panel-accent)!important}

/* dashboard: the Daily Challenge card was a glossy orange gradient */
html body .dh8-card.dh8-daily{background:var(--grain),linear-gradient(165deg,color-mix(in srgb,#b07a2a 64%,var(--panel)),color-mix(in srgb,#b07a2a 48%,var(--panel-2)))!important;color:var(--panel-ink)!important;border-color:var(--panel-line)!important}
html body .dh8-card.dh8-daily :is(b,small,span){color:var(--panel-ink)!important;opacity:1}
html body .dh8-card.dh8-daily small{color:var(--panel-muted)!important}

/* landing page: text on panels from the same tokens; tiles lose their gradient wash */
html #authGate .lpx.lpx.lpx{--x-sky-ink:var(--panel-ink);--x-sky-muted:var(--panel-muted);--x-sky-gold:var(--panel-accent);--x-sky-btn:var(--panel-accent);--x-sky-btn-ink:var(--panel-accent-ink)}
html #authGate .lpx .lpx-tile{background:var(--grain),color-mix(in srgb,var(--g) 6%,var(--x-paper))!important}
html #authGate .lpx .lpx-tile:hover{box-shadow:0 10px 24px color-mix(in srgb,var(--g) 14%,transparent)}
html:not([data-finish=glow]) #authGate .lpx :is(.lpx-hero,.lpx-final){box-shadow:0 14px 34px rgba(30,20,10,.18)!important;border:1px solid var(--panel-line)}
/* the live chart on the landing page: plain rashi labels, as in Chart Laboratory and the Transit Observatory */
html #authGate .lpx .lpx-sky-chart .chart-rashi180 rect{fill:transparent!important;stroke:transparent!important}
html #authGate .lpx .lpx-sky-chart :is(.chart-rashi180 text,.chart-lagna-degree181){fill:#927b5b!important}
html #authGate .lpx .lpx-sky-chart .chart-marker-mask176{fill:var(--x-paper)!important}
html #authGate .lpx .lpx-sky-chart .chart-glyph-name{fill:var(--x-ink)!important}
html #authGate .lpx .lpx-sky-chart .chart-glyph-degree{fill:var(--x-muted)!important}

/* ---------- 2. Nature ---------- */
html[data-appearance=nature]{
  --bg:#e8ecdd;--paper:#fbfaf1;--paper2:#eef1e2;--card:#fbfaf1;--surface:#fbfaf1;--surface2:#eef1e2;--cream:#fbfaf1;
  --ink:#1f2a1d;--text:#1f2a1d;--muted:#56634f;--line:#c7cfb5;--dark:#1d2a1c;
  --wine:#3d6a38;--olive:#6b7a3a;--gold:#a97c22;--blue:#44707c;--accent:#3d6a38;
  --shadow:0 10px 26px rgba(30,50,25,.08);
  --chart-label:#6d7a55;--chart-hover:#3d6a38;
}
html[data-appearance=nature] body{background:url("assets/contours190.svg") center top/cover fixed,var(--bg)}
html[data-appearance=nature] .main{background:transparent}
html[data-appearance=nature] .sidebar{background:var(--grain),linear-gradient(175deg,#233322,#172317 80%)!important;color:#eef1e3;border-right:1px solid #33452f}
html[data-appearance=nature] .sidebar .nav-group147>summary{color:#f0f2e4!important}
html[data-appearance=nature] .sidebar :is(.nav button.active,.nav a.active,[aria-current=page]){background:rgba(220,192,106,.16)!important;color:#fff!important;box-shadow:inset 3px 0 0 #dcc06a}
html[data-appearance=nature] :is(.card,.page .card){background:color-mix(in srgb,var(--paper) 94%,transparent)}
html[data-appearance=nature] .btn.primary,html[data-appearance=nature] button.primary{background:#3d6a38;border-color:#3d6a38;color:#fff}
html[data-appearance=nature] .theme-picker153 select{background-color:var(--paper)}
html[data-appearance=nature] #authGate .lpx.lpx{--pg-bg:#e6eadb;--pg-1:#7f9a5a;--pg-2:#b98b3e;--pg-3:#5f7f73;--pg-4:#5b4632;--pg-a:.6;--x-shadow:0 1px 0 rgba(30,50,25,.03),0 16px 36px rgba(30,50,25,.08)}

/* ---------- 3. Assignments ---------- */
.aq9{display:flex;flex-direction:column;gap:16px}
.aq9-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:end}
.aq9-head h2{margin:4px 0 6px}.aq9-head p{margin:0;color:var(--muted)}
.aq9-stats{display:flex;gap:10px;flex-wrap:wrap}
.aq9-stats div{min-width:110px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper2)}
.aq9-stats b{display:block;font:normal 26px/1.1 Georgia,serif;color:var(--wine)}.aq9-stats span{font-size:12.5px;color:var(--muted)}
.aq9-continue{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--earth-panel)!important;color:var(--panel-ink)!important;border:1px solid var(--panel-line)!important}
.aq9-continue small{display:block;font:600 10.5px system-ui,sans-serif;letter-spacing:.16em;color:var(--panel-accent)!important}
.aq9-continue b{display:block;font:normal 21px Georgia,serif;color:var(--panel-ink)!important;margin:4px 0 2px}.aq9-continue span{font-size:13px;color:var(--panel-muted)!important}
.aq9-continue .btn.primary{background:var(--panel-accent)!important;border-color:var(--panel-accent)!important;color:var(--panel-accent-ink)!important}
.aq9-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.aq9-tools input{flex:1 1 260px;margin:0}
.aq9-chips{display:flex;gap:6px;flex-wrap:wrap}
.aq9-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.aq9-chip[aria-pressed=true]{background:var(--wine);border-color:var(--wine);color:#fff}
html[data-appearance=dark] .aq9-chip[aria-pressed=true]{color:#141414}
.aq9-group{display:flex;flex-direction:column;gap:10px}
.aq9-group h3{display:flex;align-items:baseline;gap:10px;margin:8px 0 0;font-size:1.25rem}
.aq9-group h3 small{font:600 11px system-ui,sans-serif;letter-spacing:.12em;color:var(--muted)}
.aq9-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.aq9-card{--c:var(--wine);display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.aq9-card.psyche{--c:#8a6246}
.aq9-card h4{margin:0;font-size:1.12rem;line-height:1.3}.aq9-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.aq9-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.aq9-pill{font:600 10.5px system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--paper2);color:var(--muted);border:1px solid var(--line)}
.aq9-card.started .aq9-pill{background:color-mix(in srgb,var(--gold) 18%,var(--paper));color:var(--ink);border-color:var(--gold)}
.aq9-card.done .aq9-pill{background:color-mix(in srgb,var(--c) 14%,var(--paper));color:var(--ink);border-color:var(--c)}
.aq9-q{font-size:12.5px;color:var(--muted)}
.aq9-bar{height:6px;border-radius:999px;background:var(--paper2);overflow:hidden;border:1px solid var(--line)}
.aq9-bar i{display:block;height:100%;background:var(--c);border-radius:inherit}
.aq9-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.aq9-foot small{color:var(--muted)}
.aq9-results{padding:0!important}
.aq9-results summary{cursor:pointer;padding:16px 20px;font-size:1.05rem}
.aq9-results .aq9-row{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:12px;align-items:center;width:100%;padding:12px 20px;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.aq9-results .aq9-row:hover{background:var(--paper2)}
.aq9-results .aq9-row small{display:block;color:var(--muted)}
.aq9-results .aq9-row b{font-weight:normal;font-family:Georgia,serif;font-size:18px;white-space:nowrap}
.aq9-empty{padding:0 20px 18px;color:var(--muted)}
#written-work{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0 20px;margin-top:16px}
#written-work>summary{cursor:pointer;padding:16px 0;font-size:1.05rem}
@media (max-width:760px){.aq9-head{grid-template-columns:1fr}.aq9-results .aq9-row{grid-template-columns:1fr auto}.aq9-results .aq9-row .aq9-bar{display:none}}

/* sidebar: a little more air between groups, clearer group titles */
.sidebar .nav-group147>summary{letter-spacing:.02em}
.mood-swatch162.nature{background:linear-gradient(135deg,#e8ecdd 0 38%,#3d6a38 38% 70%,#a97c22 70%)!important}
html body .card.aq9-continue{background:var(--earth-panel)!important;color:var(--panel-ink)!important;border:1px solid var(--panel-line)!important;box-shadow:0 8px 20px rgba(30,20,10,.12)!important}
html body .dh8-hero :is(.dh8-skybtn,.dh8-ring){background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:var(--panel-ink)!important}
html body .dh8-hero .dh8-skybtn>span{background:rgba(255,248,236,.07)!important;border:1px solid var(--panel-line)!important;color:var(--panel-ink)!important}
html body .dh8-hero .dh8-skybtn:hover>span{border-color:var(--panel-accent)!important}
/* contrast fixes found by the theme audit */
.pa9-tt b{background:var(--earth-panel)!important;color:var(--panel-accent)!important;border:1px solid var(--panel-line)}
html[data-appearance=dark] .pa9-c.available .pa9-st{color:#8fcf96}
.time-resolution{color:var(--muted)!important}
html[data-appearance] body #assignments .card.aq9-continue{background:var(--earth-panel)!important;color:var(--panel-ink)!important;border:1px solid var(--panel-line)!important}
html[data-appearance] body #assignments .card.aq9-continue :is(b,small,span){background:transparent!important}
/* landing: a slim call to action that follows on phones once the hero has scrolled away */
html #authGate .lpx .lpx-stick{display:none}
@media (max-width:760px){
  html #authGate .lpx .lpx-stick{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:25;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--earth-panel)!important;color:var(--panel-ink)!important;border:1px solid var(--panel-line);box-shadow:0 10px 26px rgba(20,12,6,.25);transform:translateY(130%);transition:transform .3s ease}
  html #authGate .lpx .lpx-stick.on{transform:none}
  html #authGate .lpx .lpx-stick span{font-size:13px;color:var(--panel-muted)!important}
  html #authGate .lpx .lpx-stick .btn.primary{background:var(--panel-accent)!important;border-color:var(--panel-accent)!important;color:var(--panel-accent-ink)!important;padding:9px 16px}
  html #authGate .lpx .lpx-motion{bottom:70px}
}
.qp9{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.qp9 header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.qp9 header div{flex:1}.qp9 header small{font:600 10.5px system-ui,sans-serif;letter-spacing:.14em;color:var(--wine)}.qp9 header h4{margin:2px 0 0}
.qp9 header span{font-size:13px;color:var(--muted)}

/* ---------- Nature: the living garden (nature190.js draws the vines) ---------- */
#nt9{position:fixed;inset:0;z-index:610;pointer-events:none;overflow:hidden}
#nt9 svg{position:absolute;inset:0;overflow:visible}
#nt9 .nt9-vine{filter:drop-shadow(0 2px 2px rgba(20,40,15,.18))}
#nt9 .nt9-leaf{transform-box:fill-box;transform-origin:50% 100%;animation:nt9-sway 6s ease-in-out infinite alternate}
@keyframes nt9-sway{from{rotate:-4deg}to{rotate:5deg}}
#nt9 .nt9-bloom{filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
#nt9 .nt9-sun{position:absolute;inset:-20%;background:radial-gradient(closest-side at 20% 30%,rgba(255,244,190,.22),transparent),radial-gradient(closest-side at 70% 20%,rgba(255,240,180,.16),transparent),radial-gradient(closest-side at 55% 70%,rgba(255,246,200,.12),transparent),radial-gradient(closest-side at 85% 60%,rgba(255,240,185,.14),transparent);background-size:60% 60%,50% 50%,70% 70%,45% 45%;background-repeat:no-repeat;mix-blend-mode:soft-light;animation:nt9-dapple 38s ease-in-out infinite alternate}
@keyframes nt9-dapple{0%{transform:translate(0,0)}50%{transform:translate(3%,-2%)}100%{transform:translate(-2%,3%)}}
#nt9 .nt9-fall{position:absolute;top:-40px;animation:nt9-fall linear forwards;opacity:.85}
#nt9 .nt9-fall svg{position:static;animation:nt9-spin 3.2s ease-in-out infinite alternate}
@keyframes nt9-fall{0%{transform:translate(0,0)}25%{transform:translate(var(--sway),25vh)}50%{transform:translate(calc(var(--sway) * -.4),52vh)}75%{transform:translate(var(--sway),78vh)}100%{transform:translate(0,110vh);opacity:0}}
@keyframes nt9-spin{from{transform:rotate(-40deg) scaleX(1)}to{transform:rotate(50deg) scaleX(.6)}}
.nt9-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:0}
.nt9-deco~*{position:relative;z-index:1}
.nt9-fern{position:absolute;right:-8px;bottom:-10px;width:130px;height:170px;opacity:.28;transform-origin:10% 100%;animation:nt9-unfurl 9s ease-in-out infinite alternate}
@keyframes nt9-unfurl{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.nt9-fly{position:absolute;width:4px;height:4px;border-radius:50%;background:#f7f0a0;box-shadow:0 0 6px 2px rgba(247,240,160,.8),0 0 16px 4px rgba(210,230,120,.35);animation:nt9-fly 12s ease-in-out infinite}
@keyframes nt9-fly{0%{transform:translate(0,0);opacity:.1}20%{opacity:1}40%{transform:translate(18px,-14px);opacity:.3}60%{transform:translate(-10px,-26px);opacity:1}80%{opacity:.2}100%{transform:translate(8px,6px);opacity:.9}}
html[data-appearance=nature] .main{background:transparent}
html[data-appearance=nature] body{background:url("assets/contours190.svg") center top/cover fixed,radial-gradient(ellipse at 10% 0%,#f3f1dc,transparent 55%),radial-gradient(ellipse at 100% 100%,#dfe8cf,transparent 60%),#e8ecdd}
html[data-appearance=nature] .card{border-color:#c7cfb5}
html[data-appearance=nature] .page-head h1,html[data-appearance=nature] #pageTitle{text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-appearance=nature] .sidebar::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 10%,rgba(220,192,106,.12),transparent 50%),url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .8 0 0 0 0 .5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-appearance=nature] .sidebar{position:sticky}
@media (prefers-reduced-motion:reduce){#nt9 .nt9-leaf,#nt9 .nt9-sun,.nt9-fern{animation:none}}
@media print{#nt9,.nt9-deco{display:none}}
body:has(.modal:not(.hidden)) #nt9,body:has(dialog[open]) #nt9,body:has(.auth-dialog:not(.hidden)) #nt9{opacity:0;transition:opacity .2s}

/* ---------- Book Reader: a reading room (reader190.js) ---------- */
.br9-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
#br9-tools{display:inline-flex;gap:6px}
#br9-tools button[aria-pressed=true],#br9-tools button[aria-expanded=true]{background:var(--wine);color:#fff;border-color:var(--wine)}
.br9-progress{position:relative;margin:6px 0 8px}
.br9-progress>i{display:block;height:4px;border-radius:999px;background:var(--wine);max-width:100%;transition:width .3s}
.br9-progress::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:999px;background:var(--paper2);z-index:-1}
.br9-progress div{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--muted)}
.br9-progress small{color:var(--muted)}
.br9-progress .text-btn{margin-left:auto;font-size:12.5px}
.br9-set,.br9-keyhelp{position:absolute;z-index:30;right:16px;margin-top:4px;width:min(360px,calc(100vw - 32px));padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgba(20,14,8,.18)}
#bl-reader{position:relative}
.br9-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.br9-row b{width:92px;font-weight:normal;font-size:13px;color:var(--muted)}
.br9-row input[type=range]{flex:1;margin:0}
.br9-row button{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 10px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.br9-row button[aria-pressed=true]{border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine)}
.br9-light i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid rgba(0,0,0,.2)}
.br9-light.paper i{background:#fbf8f1}.br9-light.sepia i{background:#f1e2c4}.br9-light.dusk i{background:#3b2f25}.br9-light.night i{background:#111}
.br9-note{margin:2px 0 -4px;font-size:12px}
.br9-keyhelp dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:6px 0 0;font-size:13.5px}.br9-keyhelp dt{font:600 12px ui-monospace,monospace}
/* the page in each light: PDF pages are tinted with filters, EPUB and Word text is recoloured */
#bl-reader #br-surface canvas{filter:sepia(var(--r9-warm,0)) brightness(var(--r9-bright,1))}
#bl-reader[data-rlight=sepia] #br-scroll{background:#efe3c8}
#bl-reader[data-rlight=sepia] #br-surface canvas{filter:sepia(calc(.45 + var(--r9-warm,0))) saturate(1.05) brightness(calc(var(--r9-bright,1) * .97))}
#bl-reader[data-rlight=dusk] #br-scroll{background:#2a211a}
#bl-reader[data-rlight=dusk] #br-surface canvas{filter:invert(.86) sepia(calc(.55 + var(--r9-warm,0))) hue-rotate(-8deg) brightness(calc(var(--r9-bright,1) * .9))}
#bl-reader[data-rlight=night] #br-scroll{background:#0b0b0c}
#bl-reader[data-rlight=night] #br-surface canvas{filter:invert(.9) hue-rotate(180deg) sepia(var(--r9-warm,0)) brightness(calc(var(--r9-bright,1) * .85))}
#bl-reader .br-prose{font-family:var(--r9-face);font-size:var(--r9-size,19px);line-height:var(--r9-lead,1.7);max-width:var(--r9-measure,68ch);margin-inline:auto}
#bl-reader[data-rlight=sepia] .br-prose{background:#f4e8cf;color:#3b2f22}
#bl-reader[data-rlight=dusk] .br-prose{background:#2a211a;color:#e9dcc6}
#bl-reader[data-rlight=night] .br-prose{background:#0f0f10;color:#d8d4cc}
#bl-reader[data-rlight=night] .br-highlight,#bl-reader[data-rlight=dusk] .br-highlight{mix-blend-mode:screen;opacity:.5}
/* focus mode */
body.br9-focus .sidebar,body.br9-focus .topbar,body.br9-focus .reference-bar146,body.br9-focus #br-back,body.br9-focus .page-head{display:none!important}
body.br9-focus .app-shell{grid-template-columns:1fr!important;display:block!important}
body.br9-focus .main{max-width:none!important;padding:12px 20px!important;margin:0!important}
/* selection bar */
.br9-sel{position:fixed;z-index:900;display:flex;gap:2px;padding:4px;border-radius:12px;background:#1d1a17;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.br9-sel button{border:0;background:transparent;color:#f6efe2;font:13px system-ui,sans-serif;padding:7px 10px;border-radius:8px;cursor:pointer}
.br9-sel button:hover{background:rgba(255,255,255,.12)}
/* library: reading time */
.bl9-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(120px,1.2fr);gap:10px;align-items:stretch;margin-bottom:16px}
.bl9-stat{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper2)}
.bl9-stat b{display:block;font:normal 24px Georgia,serif;color:var(--wine)}.bl9-stat span{font-size:12.5px;color:var(--muted)}
.bl9-week{display:flex;align-items:flex-end;gap:5px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--paper2);min-height:64px}
.bl9-week i{flex:1;background:var(--wine);opacity:.75;border-radius:3px 3px 0 0}
.bl9-top{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:13.5px}
.bl9-top small{font:600 10.5px system-ui,sans-serif;letter-spacing:.14em;color:var(--muted)}
.bl9-top em{font-style:normal;color:var(--muted);font-size:12.5px}
@media (max-width:760px){.bl9-stats{grid-template-columns:repeat(3,1fr)}.bl9-week{grid-column:1/-1}}

/* ---------- v1.90 Study Companion ---------- */
.cp9{display:grid;gap:16px;--cp9-accent:#7a4a2a}
html[data-appearance=dark] .cp9,html[data-appearance=celestial] .cp9{--cp9-accent:#c99a52;--cp9-accent-ink:#1d140b}
html[data-appearance=nature] .cp9{--cp9-accent:#3f6b35}
html[data-appearance=bubblegum] .cp9{--cp9-accent:#a23b72}
html[data-appearance=rainbow] .cp9{--cp9-accent:#5b3fa0}
.cp9-r h4 .text-btn{color:inherit}
.cp9-r h4 .text-btn:hover{color:var(--cp9-accent);text-decoration:underline}
.cp9-ask h2{margin:.2em 0 .3em}
.cp9-form{display:flex;gap:8px;margin:12px 0 10px}
.cp9-form input{flex:1;min-width:0;font-size:1.08rem;padding:12px 14px;border-radius:12px;border:1px solid var(--line,rgba(0,0,0,.15));background:var(--surface2,#fff);color:var(--ink,inherit)}
.cp9-form input:focus{outline:2px solid var(--cp9-accent);outline-offset:1px}
.cp9-opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.cp9-opts label{display:inline-flex;gap:6px;align-items:center;font-size:.9rem}
.cp9-types,.cp9-recent,.cp9-go{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cp9-recent{margin-top:10px}
.cp9-recent small,.cp9-go small{opacity:.7;margin-right:4px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.cp9-chip{border:1px solid var(--line,rgba(0,0,0,.15));background:transparent;color:inherit;border-radius:999px;padding:5px 11px;font:inherit;font-size:.86rem;cursor:pointer}
.cp9-chip small{opacity:.65;margin-left:3px}
.cp9-chip[aria-pressed=true],.cp9-chip.strong{background:var(--cp9-accent);color:var(--cp9-accent-ink,#fff);border-color:transparent}
.cp9-chip.ghost{border-style:dashed}
.cp9-chip:hover{border-color:var(--cp9-accent)}
.cp9-go{margin:0 0 12px}
.cp9-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.cp9-side{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto}
.cp9-side h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.cp9-side h3 small{background:var(--cp9-accent);color:var(--cp9-accent-ink,#fff);border-radius:999px;padding:1px 9px;font-size:.78rem}
.cp9-results{display:grid;gap:12px}
.cp9-r{background:var(--card,#fff);color:var(--ink,inherit);border:1px solid var(--line,rgba(0,0,0,.12));box-shadow:0 1px 0 rgba(0,0,0,.03);border-radius:14px;padding:14px 16px}
.cp9-r header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem}
.cp9-r header small{color:var(--muted,inherit)}
.cp9-cov{margin-left:auto}
.cp9-type{border-radius:6px;padding:2px 8px;background:var(--surface2,rgba(0,0,0,.05));border:1px solid var(--line,rgba(0,0,0,.1));font-weight:600;letter-spacing:.02em}
.cp9-r h4{margin:8px 0 4px;font-size:1.05rem}
.cp9-r h4 .text-btn{font:inherit;text-align:left}
.cp9-r p{margin:.3em 0;line-height:1.6}
.cp9-r mark,.cp9-full mark{background:rgba(214,160,60,.32);color:inherit;border-radius:3px;padding:0 2px}
.cp9-r details{margin:6px 0}
.cp9-r summary{cursor:pointer;font-size:.86rem;opacity:.8}
.cp9-full{max-height:320px;overflow:auto;padding:10px 12px;margin-top:6px;border-radius:10px;background:var(--surface2,rgba(0,0,0,.04));line-height:1.65;font-size:.94rem}
.cp9-r footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.cp9-ti{border:1px solid var(--line,rgba(0,0,0,.12));border-radius:10px;padding:8px 10px;margin-bottom:8px}
.cp9-ti header{display:grid;grid-template-columns:1fr auto;gap:2px 6px}
.cp9-ti header small{grid-column:1/-1;opacity:.7;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.cp9-ti header span{display:flex;gap:2px}
.cp9-ti header button{border:0;background:transparent;color:inherit;cursor:pointer;padding:2px 5px;border-radius:6px}
.cp9-ti header button:hover{background:var(--surface2,rgba(0,0,0,.06))}
.cp9-ti textarea{width:100%;margin-top:6px;min-height:44px;font:inherit;font-size:.86rem;border-radius:8px;border:1px solid var(--line,rgba(0,0,0,.12));background:transparent;color:inherit;padding:6px}
.cp9-trail-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cp9-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.cp9-side .cp9-cmp{grid-template-columns:1fr}
.cp9-cmp section{border:1px solid var(--line,rgba(0,0,0,.12));border-radius:12px;padding:10px 12px;max-height:300px;overflow:auto;font-size:.9rem;line-height:1.55}
.cp9-cmp h4{margin:.2em 0}
.cp9-cnote{font-style:italic;border-left:3px solid var(--cp9-accent);padding-left:8px}
.cp9-quiz{display:grid;gap:12px;max-height:60vh;overflow:auto}
.cp9-quiz article{border:1px solid var(--line,rgba(0,0,0,.12));border-radius:12px;padding:10px 12px}
.cp9-quiz article>div{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:900px){.cp9-body{grid-template-columns:1fr}.cp9-side{position:static;max-height:none}}
@media (max-width:560px){.cp9-form{flex-direction:column}.cp9-cov{margin-left:0}}