/* Pearl daylight, cobalt actions; the original night remains the default. */
.masthead nav .theme-toggle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--pale)}
.theme-toggle svg{grid-area:1/1;width:21px;height:21px;stroke-width:1.6;transition:opacity 180ms ease,transform 180ms ease}
.theme-sun{opacity:0;transform:rotate(-25deg) scale(.7)}
.theme-moon{opacity:1;transform:none}
[data-theme=light] .theme-moon{opacity:0;transform:rotate(25deg) scale(.7)}
[data-theme=light] .theme-sun{opacity:1;transform:none}
html[data-theme=light]{--night:#fbfcff;--panel:#fff;--ink:#14284a;--soft:#455e80;--muted:#526889;--line:#cedaeb;--blue:#2455c7;--pale:#2455b4;color-scheme:light;scrollbar-color:#7d9bc5 var(--night)}
html[data-theme=light] body{--chapter-ground:#fbfcff;--pale:#2455b4;background:var(--chapter-ground)}
.menu-controls,[data-theme=light] .menu-controls{position:sticky;top:0;z-index:8;isolation:isolate;background:transparent;border:0;box-shadow:none;padding-top:max(10px,env(safe-area-inset-top))}
.controls-anchor{height:1px;margin-bottom:-1px;pointer-events:none}
.menu-controls::before{content:'';position:absolute;inset:-1px -16px -12px;z-index:-1;pointer-events:none;background:var(--chapter-ground);opacity:0;mask-image:linear-gradient(#000 0%,#000 calc(100% - 14px),transparent);transition:opacity 160ms ease}
.menu-controls.is-pinned::before{opacity:1}
.category-tabs{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.search-field,[data-theme=light] .search-field{background:transparent;border:0;border-bottom:1px solid var(--line);padding-inline:2px}
.search-field:focus-within,[data-theme=light] .search-field:focus-within{border-bottom-color:var(--pale)}
[data-theme=light] .category-tabs{background:transparent;scrollbar-color:#7d9bc5 transparent;backdrop-filter:none}
[data-theme=light] .category-tabs button{background:#fff;border-color:#b5c6dd;color:#314e78}
[data-theme=light] .category-tabs button small{color:#526889}
[data-theme=light] .category-tabs button[aria-selected=true]{background:#2455c7;border-color:#2455c7;color:#fff}
[data-theme=light] .category-tabs button[aria-selected=true] small{color:#fff}
[data-theme=light] .search-field{border-bottom-color:#91a8c8}
[data-theme=light] .search-field:focus-within{border-color:#2455c7}
[data-theme=light] .search-field input::placeholder{color:#526889}
[data-theme=light] .menu-item{border-color:var(--line)}
[data-theme=light] .menu-item:hover,[data-theme=light] .menu-item:active{background:#eaf1fc;color:var(--ink)}
[data-theme=light] .item-info .english{color:#375e97}
[data-theme=light] .item-note{color:#455e80}
[data-theme=light] .art-title em{color:#2455c7}
[data-theme=light] .powered-by a{color:#2455c7;text-decoration-color:#8aa8d8}
[data-theme=light] button:hover,[data-theme=light] a:hover{color:#174193}
[data-theme=light] .primary-button,[data-theme=light] .primary-button:hover{color:#fff}
[data-theme=light] :is(button,a,[tabindex]):focus-visible{outline-color:#2455c7}
[data-theme=light] dialog{border-color:#b5c6dd}
[data-theme=light] dialog::backdrop{background:#14284a80}
[data-theme=light] .close-button{background:#f8fbff;color:#2455b4;border-color:#91a8c8}
[data-theme=light] .mood-options button{background:#f3f7ff;border-color:#a8bddb;color:#14284a}
[data-theme=light] .mood-options button:hover{background:#e6efff}
[data-theme=light] .mood-options button small{color:#455e80}
[data-theme=light] .step-lights i{background:#c5d3e8}
[data-theme=light] .step-lights i.active{background:#2455c7}
/* Preserve contrast around the white cinematic deer and its dark video matte. */
[data-theme=light] .whisper-pair-scene{--panel:#101625;--ink:#f7f6f2;--soft:#bec9dd;--pale:#c3d2ff;--line:#364560;background:var(--panel);color:var(--ink);padding:12px}
[data-theme=light] .whisper-pair-scene button:hover{color:#fff}
[data-theme=light] .lucky-message{color:#f7f6f2}
[data-theme=light] .lucky-message:hover{color:#fff}
[data-theme=light] .lucky-message small{color:#d4e1f5}
[data-theme=light] .forest-intro{--night:#080c15;--ink:#f7f6f2;--soft:#bec9dd;--pale:#c3d2ff;color-scheme:dark}
[data-theme=light] .forest-skip:hover{color:#fff;background:#15233a}
/* Morning light: airy blue reflections on pearl-white, never a neon stripe. */
[data-theme=light] .sheen-texture{
  inset:-15%;
  background:
    radial-gradient(ellipse 64% 46% at 0% 28%,#609be730 0%,#a8c8f31c 45%,transparent 76%),
    radial-gradient(ellipse 56% 50% at 100% 76%,#709fe329 0%,#b7d4f818 48%,transparent 78%),
    radial-gradient(ellipse 58% 30% at 52% 46%,#fff 0%,#ffffffa6 40%,transparent 78%);
  filter:blur(24px);mix-blend-mode:normal;opacity:1;
  animation:dayPearlDrift 26s ease-in-out infinite alternate
}
[data-theme=light] .sparkle-canvas{filter:brightness(.52) saturate(1.8)}
[data-theme=light] .forest-intro .sparkle-canvas{filter:none}
@keyframes dayPearlDrift{from{transform:translate3d(-3%,-4%,0) rotate(-3deg)}to{transform:translate3d(4%,5%,0) rotate(3deg)}}
[data-theme=light] .page-hidden .sheen-texture{animation-play-state:paused}
[data-theme=light] .motion-off .sheen-texture{animation:none;opacity:1}
/* Soft folded-silk reflection; scrolling moves only this composited layer. */
[data-theme=light] .page-sheen::after{
  content:'';position:absolute;inset:-12%;pointer-events:none;
  background:
    radial-gradient(ellipse 84% 15% at 13% 47%,#fff 4%,#ffffffd9 35%,#ffffff00 74%),
    radial-gradient(ellipse 85% 19% at 16% 54%,#8fb6eb29 0%,#c4dbf522 48%,transparent 76%),
    radial-gradient(ellipse 72% 12% at 98% 82%,#ffffffde 12%,transparent 76%);
  filter:blur(14px);opacity:.95;
  transform:translate3d(var(--day-silk-x,0px),var(--day-silk-y,0px),0) rotate(-12deg);
  transition:transform 220ms ease-out;will-change:transform
}
[data-theme=light] .motion-off .page-sheen::after{transform:rotate(-12deg);transition:none;will-change:auto}
@media(prefers-reduced-motion:reduce){[data-theme=light] .page-sheen::after{transform:rotate(-12deg);transition:none;will-change:auto}}
@media(max-width:760px){.masthead nav{gap:8px}.masthead{column-gap:10px}.brand>span[dir]{font-size:1.2rem}.brand .logo-crop{width:42px;height:42px}}
@media(max-width:380px){.masthead{padding-inline:12px;column-gap:7px}.brand{gap:7px}.brand>span[dir]{font-size:1.05rem}.brand .logo-crop{width:36px;height:36px}.masthead nav{font-size:.6875rem;gap:6px}}
@media(prefers-reduced-motion:reduce){.theme-toggle svg{transition:none}}
