/* Light mode (html[data-theme="light"]). Dark stays the default. The toggle is the sun/moon button in the menu (app.js).
   Some blocks stay dark on purpose in both modes: hero slider, blue band, player dock, pop-ups, video window, tool CTA. */
:root[data-theme="light"]{
  --bg:#f5f4f0; --bg-2:#ffffff; --bg-3:#e8e7e2; --ink:#121212; --ink-2:#3c3b38; --muted:#6a6965; --line:rgba(0,0,0,.12);
  color-scheme:light;
}
[data-theme="light"] body{background:var(--bg);color:var(--ink)}
[data-theme="light"] body::before{opacity:.035}

/* blocks that keep the dark look */
[data-theme="light"] :is(.hero,.band,.dock,.gcard,.vmodal,.npop,.tl-cta,.demo-bg){
  --bg:#121212; --bg-2:#1a1a1a; --bg-3:#222; --ink:#f2f1ee; --ink-2:#cfcfcb; --muted:#8d8d8a; --line:rgba(255,255,255,.12); color:var(--ink);
}
[data-theme="light"] .hero{background:#121212}

/* menu, top bar, footer */
[data-theme="light"] .nav{background:rgba(250,249,246,.94)}
[data-theme="light"] .nav .logo img,[data-theme="light"] footer .foot-top > img{filter:invert(1)}
@media (min-width:901px){[data-theme="light"] .nav ul .sub{background:#fff}}
[data-theme="light"] .nav ul .sub a:hover{background:#f0efeb}
[data-theme="light"] .nav ul a.acct-link{color:#121212}
[data-theme="light"] .annc{background:#121212;color:#f2f1ee}
[data-theme="light"] .annc-i{color:#f2f1ee}
[data-theme="light"] footer{background:#ebeae5}
[data-theme="light"] .marquee{background:#ebeae5}
@media (max-width:900px){[data-theme="light"] .nav nav{background:#f7f6f2}}

/* buttons and small parts */
[data-theme="light"] .socials a{--soc-bg:#fff}
[data-theme="light"] .socials a:hover,[data-theme="light"] .socials a:focus-visible{--soc-bg:#121212;border-color:#121212;color:#fff}
[data-theme="light"] .tl-card:hover{background:#fff}
[data-theme="light"] .ch-card.on{background:#121212;color:#f2f1ee;border-color:#121212}
[data-theme="light"] .ch-card.on span{color:#aaa}
[data-theme="light"] .roll .ph{stroke:#121212}
[data-theme="light"] .roll rect.b{fill:#9a9994}
[data-theme="light"] .fd-drop{border-color:rgba(0,0,0,.25)}
[data-theme="light"] .fd-drop:hover,[data-theme="light"] .fd-drop.over{background:#fff}
[data-theme="light"] .tap-pad.hit{animation:taphitl .18s}
[data-theme="light"] .tap-pad.acc.hit{animation:taphitl .25s}
@keyframes taphitl{from{background:#d9d8d3}to{background:var(--bg)}}
[data-theme="light"] .wf svg{fill:#b8b7b2}
[data-theme="light"] .lib-row:hover .wf svg{fill:#9f9e99}
[data-theme="light"] .lib-toast{background:#121212;color:#f2f1ee}
[data-theme="light"] .lib-check input,[data-theme="light"] .tl-check input{accent-color:#121212}
@media (max-width:900px){[data-theme="light"] .lib-side{background:rgba(245,244,240,.98)}}
[data-theme="light"] .acc-codes li{background:#fff}

/* light / dark switch in the menu: a pill with the mode name and a round knob that slides
   light: light pill, text left, knob with sun on the right | dark: black pill, knob with moon on the left, text right */
.theme-sw{position:relative;display:inline-flex;align-items:center;width:128px;height:32px;padding:0;border-radius:32px;cursor:pointer;
  background:#000;border:1px solid rgba(255,255,255,.35);color:#f2f1ee;transition:background .25s,border-color .25s,color .25s}
.ts-label{position:absolute;top:50%;transform:translateY(-50%);font:800 9.5px/1 var(--font);font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.ts-l{left:14px;opacity:0}
.ts-d{right:13px;opacity:1}
.ts-knob{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#000;border:1px solid #f2f1ee;color:#f2f1ee;
  transition:transform .28s cubic-bezier(.3,.7,.35,1),background .25s,color .25s,border-color .25s}
.ts-knob svg{grid-area:1/1;width:15px;height:15px;transition:opacity .2s}
.ts-sun{opacity:0}
.theme-sw[aria-checked="false"]{background:#e8e7e2;border-color:rgba(0,0,0,.12);color:#121212}
.theme-sw[aria-checked="false"] .ts-l{opacity:1}
.theme-sw[aria-checked="false"] .ts-d{opacity:0}
.theme-sw[aria-checked="false"] .ts-knob{transform:translateX(96px);background:#fff;color:#121212;border-color:rgba(0,0,0,.18)}
.theme-sw[aria-checked="false"] .ts-sun{opacity:1}
.theme-sw[aria-checked="false"] .ts-moon{opacity:0}
.theme-sw:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:900px){.nav-theme{margin-top:16px}}

/* installed app (PWA): looks like an app, not a website. Only inside the app window; the website in a browser stays the same.
   - no top bar, no footer, no pop-ups or the "Name that note" card
   - the Library opens straight on the sounds (no page intro, no "coming soon" box) */
@media (display-mode: standalone){
  .annc,footer,#gcard,#npop{display:none !important}
  body[data-page="library"] .page-head,body[data-page="library"] .lib-acct{display:none}
  body[data-page="library"] main .wrap{padding-top:22px}
  body[data-page="library"] .lib{padding-bottom:40px}
  .nav{padding-top:max(env(safe-area-inset-top,0px),0px);background:#000}
  /* only the NU MOTION logo on a black bar: no menu, no links, the app stays on the Library */
  .nav nav,.nav .burger{display:none !important}
  .nav .logo{pointer-events:none;cursor:default}
  [data-theme="light"] .nav .logo img{filter:none}
}