/* ===================================================================
   NERO — Liquid Glass token layer (2026-11-04)
   Loaded by nero-ui.js AFTER every page's inline CSS, so it wins the
   cascade and re-skins all module pages from their shared :root names.
   Material rule: glass ONLY on the navigation/control layer (.glass);
   content stays flat on the surface ladder. Never glass on glass.
   =================================================================== */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ───────────────────────────── tokens ───────────────────────────── */
:root{
  /* type */
  --display:'Switzer',system-ui,-apple-system,sans-serif;
  --sans:'Switzer',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --fs-d1:48px; --fs-d2:40px; --fs-d3:34px; --fs-body:15px; --fs-eyebrow:11px;
  --lh-display:1.1; --ls-display:-.025em; --ls-eyebrow:.12em;

  /* surface ladder (Macro on #000) */
  --s0:#000; --s1:oklch(15% 0 0); --s2:oklch(16.5% 0 0); --s3:oklch(18% 0 0); --s4:oklch(36% 0 0);
  --edge:#292929; --edge-muted:#1c1c1c;
  --ink:#fff; --ink-2:#c9c9c9; --ink-3:#8a8a8a; --ink-4:#737373;
  --hover:rgb(255 255 255/.03); --active:rgb(255 255 255/.06); --divider:rgb(255 255 255/.04);
  --focus:rgb(255 255 255/.4);

  /* one accent (user's settings.accent arrives as --accent via nero-ui applyAccent) + derived shades */
  --accent:#C4513A;
  --ac:var(--accent);
  --ac-bright:color-mix(in oklch, var(--ac) 82%, white);
  --ac-deep:color-mix(in oklch, var(--ac) 72%, black);
  --ac-soft:color-mix(in oklch, var(--ac) 14%, transparent);
  --ac-ring:color-mix(in oklch, var(--ac) 45%, transparent);
  --selected:color-mix(in oklch, var(--ac) 8%, transparent);

  /* semantic object colours */
  --c-task:#22C55E; --c-note:#A855F7; --c-person:#E4B34A; --c-money:#2EF2C5;
  --c-body:#FF5C5C; --c-know:#6EA8FE; --c-chat:#22D3EE; --c-live:#22C55E;

  /* radii: pill 999 · panels 20 · cards 16 · chips 10 · concentric inner = outer − padding */
  --r-pill:999px; --r-panel:20px; --r-card:16px; --r-chip:10px; --r-xs:6px;
  --r-xl:20px; --r-lg:16px; --r-md:12px; --r-sm:10px;

  /* shadows */
  --shadow-menu:0 8px 24px -16px rgb(0 0 0/.24), 0 2px 8px -6px rgb(0 0 0/.18);
  --shadow-card:0 1px 0 rgb(255 255 255/.03) inset, 0 10px 30px -18px rgb(0 0 0/.6);
  --shadow-glass:0 8px 32px rgb(0 0 0/.35), 0 1px 2px rgb(0 0 0/.3);
  --nshadow:var(--shadow-card);

  /* glass material */
  --glass-tint:20 22 28;
  --glass-alpha:.22;           /* default = server DEFAULT_SETTINGS.glass_alpha (0.22); Settings → Look slider: .10 (clear) … .55 (tinted) */
  --glass-blur:18px;
  --glass-rim:.28;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-menu:cubic-bezier(.16,1,.3,1);
  --spring:linear(0,.21 6%,.62 14%,.94 22%,1.05 30%,1.07 36%,1.04 44%,1.01 55%,.995 68%,1 100%);
  --spring-soft:linear(0,.3 8%,.72 18%,.95 28%,1.01 40%,1 100%);

  /* ---- legacy page token names (every template re-skins through these) ---- */
  --bg:var(--s0); --card:var(--s1); --card2:var(--s2); --card3:var(--s3);
  --border:var(--edge); --border-soft:rgb(255 255 255/.07);
  --t1:var(--ink); --t2:var(--ink-2); --t3:var(--ink-3);
  --red:var(--ac); --red5:var(--ac); --red4:color-mix(in oklch, var(--ac) 84%, black); --red3:color-mix(in oklch, var(--ac) 64%, black);
  --red2:color-mix(in oklch, var(--ac) 40%, black); --red1:color-mix(in oklch, var(--ac) 24%, black);
  --purple:var(--c-note); --purple2:#7C3AED; --green:var(--c-task); --teal:var(--c-money); --blue:#4F8EF7;
  --orange:#FB923C; --amber:#FFC107; --pink:#F472B6;
  /* shell geometry the child pages pad against (the shell updates these by postMessage) */
  --shell-left:0px; --shell-top:0px; --shell-right:0px; --shell-bottom:0px;
}

/* ─────────────────────── base type + surfaces ─────────────────────── */
html{ -webkit-text-size-adjust:100%; }
body,button,input,select,textarea{ font-family:var(--sans); }
body{ font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; color:var(--ink); }
h1,h2,h3{ text-wrap:balance; }
code,kbd,pre,.mono,[data-mono]{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* big light display moments (ad contrast: huge light headline vs tiny tracked caps) */
.hero h1, .boot-logo, .display-1{ font-family:var(--display); font-weight:300; letter-spacing:var(--ls-display); line-height:var(--lh-display); font-size:var(--fs-d1); }
.display-2{ font-family:var(--display); font-weight:300; letter-spacing:-.02em; line-height:1.12; font-size:var(--fs-d2); }
.display-3{ font-family:var(--display); font-weight:400; letter-spacing:-.015em; line-height:1.15; font-size:var(--fs-d3); }
.hero h1 .os, .hero h1 b{ font-weight:500; color:var(--ac); }
.topnav .brand{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; }
.shead h2{ font-family:var(--display); font-weight:500; text-transform:none; letter-spacing:-.01em; font-size:15px; display:inline-flex; align-items:center; gap:8px; }
.tile .tl, .area .an, .hstat, .fab, .btn, .modal h3{ font-family:var(--display); letter-spacing:-.005em; }
/* eyebrows + tiny labels → Plex Mono caps */
.pill, .falbl, .tm-lbl, .kick, .eyebrow, .gl, .lab, .ns-sec, .nm-title, .nt-step, .cmd-sec, .step .n, .hero-live .date, .eyebrow-mono{
  font-family:var(--mono); font-size:var(--fs-eyebrow); font-weight:500; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
}
.pill{ border-radius:var(--r-pill); padding:3px 9px; font-size:10px; letter-spacing:.1em; }
.hero-live .time, .rc-time .t, .gstreak b, .glevel b, .stat b, .hstat b{ font-variant-numeric:tabular-nums; font-family:var(--mono); }

/* radii — intentional, concentric */
.hero{ border-radius:var(--r-panel); }
.card, .modal, .calmcard, .final, .step{ border-radius:var(--r-card); }
.tile, .area, .fabar, .notif, .spot-frame iframe, .msg, .tm-card, .feat, .mod{ border-radius:var(--r-card); }
.btn, .fab, .cbx, .modal input, .modal select, .modal textarea, .cinrow input, input, select, textarea{ border-radius:var(--r-chip); }
.hstat, .gstreak, .glevel, .schip, .chip{ border-radius:var(--r-chip); }
.btn.sm{ border-radius:8px; }

/* surfaces: ladder + hairlines, no glare */
.card, .hero, .modal, .tile, .area, .fabar, .notif, .tm-card{ background-color:var(--s1); border-color:var(--edge-muted); box-shadow:var(--shadow-card); }
.card:hover, .tile:hover, .area:hover{ border-color:var(--edge); }
.hero{ background-image:none; }
.hero::after{ background:radial-gradient(closest-side, var(--ac-soft), transparent); opacity:.9; }
.hero::before{ background:linear-gradient(90deg, var(--ac), transparent 70%); opacity:.7; }
body::before{ background:
  radial-gradient(60% 40% at 12% 0%, color-mix(in oklch, var(--ac) 14%, transparent), transparent 60%),
  radial-gradient(45% 35% at 92% 8%, color-mix(in oklch, var(--ac) 8%, transparent), transparent 60%) !important; }
::selection{ background:var(--ac-ring); color:#fff; }

/* hover / active / selected = ink overlays */
.btn, .fab, .tile, .area, .schip, .chip, a.nl, .hab, .btn-pill, .tap{
  transition:transform .12s var(--ease-out), background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, opacity .15s ease;
}
.btn:hover, .fab:hover{ filter:none; transform:translateY(-1px); background-image:linear-gradient(var(--hover), var(--hover)); }
.btn:active, .fab:active, .tile:active, .schip:active, .chip:active, .tap:active{ transform:scale(.97); transition-duration:.08s; }
.btn{ font-weight:500; border-color:var(--edge); }
.btn.ghost{ background:transparent; }
:where(.btn,.fab,.tile,.schip,.chip,a.nl,input,select,textarea,button,[tabindex]):focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
*:focus{ outline:none; }
input, select, textarea{ background-color:var(--s0); border:1px solid var(--edge); color:var(--ink); }
input:focus, select:focus, textarea:focus{ border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft); }

/* ────────────────────── tactile pill CTA (Macro B) ────────────────────── */
.btn-pill{
  --pill-bg:linear-gradient(180deg,#fbfaf6 0%,#ece9e1 100%); --pill-ink:#1d1c1a;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 24px; border-radius:var(--r-pill); border:1px solid rgb(255 255 255/.78);
  background:var(--pill-bg); color:var(--pill-ink); font:500 15px/1 var(--sans); letter-spacing:-.005em; cursor:pointer;
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 1px rgb(0 0 0/.08), 0 0 0 1px rgb(255 255 255/.04), 0 6px 20px -8px rgb(255 255 255/.25);
  position:relative; overflow:hidden; text-decoration:none; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ease-out), box-shadow .2s ease, filter .2s ease;
}
.btn-pill:hover{ filter:brightness(1.03); box-shadow:inset 0 1px 0 #fff, inset 0 -1px 1px rgb(0 0 0/.08), 0 10px 26px -10px rgb(255 255 255/.35); }
.btn-pill:active{ transform:scale(.97); }
.btn-pill.lg{ height:64px; padding:0 32px; font-size:17px; }
.btn-pill.sm{ height:36px; padding:0 16px; font-size:13px; }
.btn-pill.primary{ --pill-bg:linear-gradient(180deg, var(--ac-bright) 0%, var(--ac) 100%); --pill-ink:#fff; border-color:color-mix(in oklch, var(--ac) 60%, white);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.45), inset 0 -1px 1px rgb(0 0 0/.18), 0 8px 24px -10px var(--ac); text-shadow:0 1px 1px rgb(0 0 0/.15); }
.btn-pill.ghost{ --pill-bg:rgb(255 255 255/.06); --pill-ink:var(--ink); border-color:rgb(255 255 255/.12); box-shadow:inset 0 1px 0 rgb(255 255 255/.08); }
.btn-pill.dark{ --pill-bg:linear-gradient(180deg,#1b1b1b,#0d0d0d); --pill-ink:#fff; border-color:rgb(255 255 255/.14); box-shadow:inset 0 1px 0 rgb(255 255 255/.08); }
/* tap ripple ring (JS adds .ripple span at the pointer) */
.btn-pill .ripple{ position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%; border:1.5px solid currentColor; opacity:.6; pointer-events:none; animation:pillRipple .4s ease-out forwards; }
@keyframes pillRipple{ to{ transform:scale(7); opacity:0 } }

/* ─────────────────────────── glass (04 §2.1) ─────────────────────────── */
.glass{
  position:relative; isolation:isolate; border-radius:var(--r-panel);
  --mx:50%; --my:0%; --angle:215deg;
  background:linear-gradient(135deg, rgb(var(--glass-tint)/calc(var(--glass-alpha) + .10)), rgb(var(--glass-tint)/var(--glass-alpha)));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%) brightness(1.04);
          backdrop-filter:blur(var(--glass-blur)) saturate(160%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.22),      /* top specular rim */
    inset 0 -1px 0 rgb(0 0 0/.38),           /* darker bottom edge (iOS 27) */
    inset 0 0 0 1px rgb(255 255 255/.055),   /* hairline */
    inset 0 0 28px rgb(255 255 255/.035),    /* inner glow = thickness */
    var(--shadow-glass);
  color:var(--ink);
}
.glass::before{ /* gradient rim that fades along the edge */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:conic-gradient(from var(--angle), rgb(255 255 255/var(--glass-rim)), rgb(255 255 255/.03) 25%, rgb(255 255 255/.03) 50%, rgb(255 255 255/calc(var(--glass-rim) * .7)) 75%, rgb(255 255 255/var(--glass-rim)));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass::after{ /* pointer-following specular (04 §2.3) */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; mix-blend-mode:soft-light;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgb(255 255 255/.5), transparent 62%);
  opacity:0; transition:opacity .35s ease;
}
.glass:hover::after, .glass.lit::after{ opacity:1; }
.glass.press::after{ opacity:1; transition-duration:.05s; }
.glass [data-lum="light"]{ color:#111; text-shadow:none; }
.glass .on-glass, .glass.on-glass{ text-shadow:0 1px 8px rgb(0 0 0/.35); }
/* one container for neighbouring glass controls (GlassEffectContainer) */
.glass-container{ display:inline-flex; align-items:center; gap:4px; padding:4px; }
.glass-container > *{ border-radius:calc(var(--r-panel) - 4px); background:transparent; }
.concentric{ border-radius:calc(var(--r-outer, var(--r-panel)) - var(--pad, 8px)); }

/* live / status dots + the green wave */
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--c-live); box-shadow:0 0 0 0 color-mix(in srgb, var(--c-live) 55%, transparent); animation:liveWave 2.4s ease-out infinite; }
.dot-live.off{ background:var(--ink-4); animation:none; box-shadow:none; }
@keyframes liveWave{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--c-live) 55%, transparent) } 70%{ box-shadow:0 0 0 7px transparent } 100%{ box-shadow:0 0 0 0 transparent } }

/* blur-resolve text (per word) — JS splits words into .w spans and sets --i */
.blur-in .w{ display:inline-block; opacity:0; filter:blur(8px); transform:translateY(6px); animation:blurIn .38s var(--ease-out) forwards; animation-delay:calc(var(--i,0) * 60ms); will-change:filter,transform,opacity; }
@keyframes blurIn{ to{ opacity:1; filter:blur(0); transform:none } }

/* staggered reveal (kept from v2) */
.nv-in{ animation:nvIn .6s var(--ease-out) both; animation-delay:calc(var(--nv-i,0) * 45ms); }
@keyframes nvIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
body.nv-leave{ opacity:.35; transition:opacity .16s ease; }

/* grain — one whisper; the shell draws its own so framed pages skip it */
html:not([data-shell]) body::after{
  content:''; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scrollbars */
*{ scrollbar-width:thin; scrollbar-color:#2a2a2a transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:#262626; border-radius:6px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#363636; background-clip:content-box; }
html{ scroll-behavior:smooth; }

/* ───────────────────── child mode (page framed by the shell) ───────────────────── */
html[data-shell]{ background:transparent !important; }
html[data-shell] body{
  background:transparent !important; min-height:100dvh;
  padding-left:var(--shell-left) !important; padding-top:var(--shell-top) !important;
  padding-right:var(--shell-right) !important; padding-bottom:var(--shell-bottom) !important;
  transition:padding .32s var(--ease-out);
  animation:none !important;
}
html[data-shell] body::before{ display:none !important; }
html[data-shell] .topnav, html[data-shell] #boot,
html[data-shell] #nb-fab, html[data-shell] #nb-help, html[data-shell] #nb-panel, html[data-shell] #ns-gear, html[data-shell] #nl-flag,
html[data-shell] #nn-bell, html[data-shell] #nt-bar, html[data-shell] #nm-sheet, html[data-shell] #np, html[data-shell] #nero-recpill,
html[data-shell] #sp-fab{ display:none !important; }
html[data-shell] .wrap{ padding-top:16px; }
html[data-shell] .wrap > .top{ display:none; }            /* /now: brand + 'Full app' row — the shell bar does this */
html[data-shell] .one{ font-weight:500; letter-spacing:-.02em; }
html[data-shell] .one.dim{ font-weight:400; }
html[data-shell] .lead{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; letter-spacing:.12em; }
html[data-shell] .fab-float, html[data-shell] .fab.float{ bottom:calc(var(--shell-bottom) + 16px); }
/* keep a little air so content never kisses the floating chrome */
html[data-shell] .wrap{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }

/* ────────────────────────── a11y fallbacks ────────────────────────── */
@media (prefers-reduced-transparency: reduce){
  .glass{ -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px); background:rgb(var(--glass-tint)/.9); }
}
html[data-reduce-transparency] .glass{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgb(var(--glass-tint)/.96) !important; }
html[data-reduce-transparency] .glass::after{ display:none; }
@media (prefers-contrast: more){
  .glass{ background:rgb(var(--glass-tint)/.97); box-shadow:inset 0 0 0 1.5px currentColor; -webkit-backdrop-filter:none; backdrop-filter:none; }
  :root{ --edge:#4a4a4a; --ink-3:#b0b0b0; --ink-4:#9a9a9a; }
}
@media (prefers-reduced-motion: reduce){
  .glass, .glass *, .nv-in, .blur-in .w, .dot-live{ transition-duration:.01ms !important; animation:none !important; opacity:1; filter:none; transform:none; }
  body.nv-leave{ opacity:1 }
  html{ scroll-behavior:auto; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgb(var(--glass-tint)/.92); }
}

/* ═══════════════════════ W3 (n) light theme — html[data-theme=light] ═══════════════════════
   Same material rules, re-derived for a #f5f5f7 room: white surfaces, hairline edges, dark ink,
   bright specular top rims, a dark faint rim, no text-shadow on glass. Every page + legacy template
   re-skins through these tokens; the fixes below cover their hard-coded dark values. */
html[data-theme=light]{
  color-scheme:light;
  --s0:#f5f5f7; --s1:#ffffff; --s2:#ffffff; --s3:#f2f2f4; --s4:#c7c7cc;
  --edge:#d9d9de; --edge-muted:#e7e7eb;
  --ink:#1d1d1f; --ink-2:#3a3a3c; --ink-3:#6e6e73; --ink-4:#6e6e73;
  --hover:rgb(0 0 0/.045); --active:rgb(0 0 0/.07); --divider:rgb(0 0 0/.08); --focus:rgb(0 0 0/.5);
  --selected:color-mix(in oklch, var(--ac) 10%, transparent);
  --c-task:#15803D; --c-note:#7E22CE; --c-person:#A16207; --c-money:#0F766E; --c-body:#DC2626; --c-know:#2563EB; --c-chat:#0E7490; --c-live:#16A34A;
  --amber:#B45309; --orange:#C2410C; --blue:#2563EB; --pink:#BE185D; --teal:var(--c-money); --green:var(--c-task); --purple:var(--c-note);
  --shadow-menu:0 12px 32px -12px rgb(0 0 0/.18), 0 2px 8px -4px rgb(0 0 0/.08);
  --shadow-card:0 1px 0 rgb(255 255 255/.8) inset, 0 1px 2px rgb(0 0 0/.04), 0 8px 24px -16px rgb(0 0 0/.16);
  --shadow-glass:0 10px 30px rgb(0 0 0/.08), 0 1px 2px rgb(0 0 0/.06);
  --glass-tint:252 252 253;
  --border-soft:rgb(0 0 0/.07);
  --bg:var(--s0); --card:var(--s1); --card2:var(--s2); --card3:var(--s3); --border:var(--edge); --t1:var(--ink); --t2:var(--ink-2); --t3:var(--ink-3);
}
html[data-theme=light] body{ color:var(--ink); }
/* companion bubble + tag in light: white surface, dark ink, hairline edge, soft shadow (shell sidebar + standalone pages) */
html[data-theme=light] body .np-host .np-bub{ background:#fff; color:#1d1d1f; border:1px solid rgb(0 0 0/.08); border-left:3px solid var(--np-acc); box-shadow:0 12px 30px -14px rgb(0 0 0/.22), 0 1px 2px rgb(0 0 0/.06); }
html[data-theme=light] body .np-host.np-full .np-tag{ background:#fff; color:#6e6e73; border:1px solid rgb(0 0 0/.08); box-shadow:0 1px 2px rgb(0 0 0/.05); }
html[data-theme=light] body .np-host .np-bub::after{ background:#fff; }
html[data-theme=light] .np-host.np-full .np-bot{ filter:drop-shadow(0 8px 12px rgb(0 0 0/.18)); }
html[data-theme=light] .np-host.np-full .np-shadow{ opacity:.35; }
html[data-theme=light] .glass{
  background:linear-gradient(135deg, rgb(255 255 255/calc(var(--glass-alpha) + .50)), rgb(248 248 250/calc(var(--glass-alpha) + .38)));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%); backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.95), inset 0 -1px 0 rgb(0 0 0/.05), inset 0 0 0 1px rgb(0 0 0/.06), var(--shadow-glass);
}
html[data-theme=light] .glass::before{
  background:conic-gradient(from var(--angle), rgb(255 255 255/.95), rgb(0 0 0/.05) 25%, rgb(0 0 0/.05) 50%, rgb(255 255 255/.7) 75%, rgb(255 255 255/.95));
}
html[data-theme=light] .glass::after{ background:radial-gradient(260px circle at var(--mx) var(--my), rgb(255 255 255/.7), transparent 62%); }
html[data-theme=light] .glass .on-glass, html[data-theme=light] .glass.on-glass{ text-shadow:none; }
html[data-theme=light] .btn-pill{ border-color:rgb(0 0 0/.1); box-shadow:inset 0 1px 0 #fff, inset 0 -1px 1px rgb(0 0 0/.06), 0 4px 14px -8px rgb(0 0 0/.25); }
html[data-theme=light] .btn-pill.ghost{ --pill-bg:rgb(0 0 0/.04); --pill-ink:var(--ink); border-color:rgb(0 0 0/.1); box-shadow:none; }
html[data-theme=light] .btn-pill.dark{ --pill-bg:linear-gradient(180deg,#2a2a2c,#1d1d1f); }
html[data-theme=light] .btn-pill.primary{ border-color:color-mix(in oklch, var(--ac) 70%, black); }
html[data-theme=light] *{ scrollbar-color:#c4c4c8 transparent; }
html[data-theme=light] *::-webkit-scrollbar-thumb{ background:#c9c9ce; background-clip:content-box; }
html[data-theme=light] ::selection{ color:var(--ink); }
html[data-theme=light] :not(html)[data-shell] body::after, html[data-theme=light]:not([data-shell]) body::after{ opacity:.02; }
html[data-theme=light] input, html[data-theme=light] select, html[data-theme=light] textarea{ background-color:#fff; color:var(--ink); border-color:var(--edge); }
html[data-theme=light] input::placeholder, html[data-theme=light] textarea::placeholder{ color:var(--ink-4); }
html[data-theme=light] .hero::after{ opacity:.5; }
html[data-theme=light] .card, html[data-theme=light] .tile, html[data-theme=light] .area, html[data-theme=light] .modal, html[data-theme=light] .hero,
html[data-theme=light] .fabar, html[data-theme=light] .notif, html[data-theme=light] .tm-card{ background-color:var(--s1); border-color:var(--edge-muted); color:var(--ink); }
@media (prefers-contrast: more){ html[data-theme=light]{ --edge:#8e8e93; --ink-3:#3a3a3c; --ink-4:#48484a; } html[data-theme=light] .glass{ background:rgb(255 255 255/.97); } }
html[data-theme=light][data-reduce-transparency] .glass{ background:rgb(252 252 253/.97) !important; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html[data-theme=light] .glass{ background:rgb(252 252 253/.94); } }

/* >>> W3 generated light overrides (tools/gen_light_css.py) >>> */
/* templates\academic.html */
html[data-theme=light][data-page=academic] ::selection{color:var(--ink)}
html[data-theme=light][data-page=academic] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=academic] .hero{background:var(--s3)}
html[data-theme=light][data-page=academic] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=academic] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=academic] .lday{background:rgb(0 0 0/0.035)}
html[data-theme=light][data-page=academic] .wb-btn:hover{color:var(--ink)}
html[data-theme=light][data-page=academic] .course .pbar{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=academic] td{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=academic] tr.trow:hover td{background:rgb(0 0 0/0.030)}
html[data-theme=light][data-page=academic] .topic{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=academic] .conf span{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=academic] .pm{background:rgb(0 0 0/0.042);color:var(--ink);border:1px solid rgb(0 0 0/0.14)}
html[data-theme=light][data-page=academic] .pm.on{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=academic] .psm{background:rgb(0 0 0/0.042);color:var(--ink);border:1px solid rgb(0 0 0/0.14)}
html[data-theme=light][data-page=academic] .theme-sel{background:rgb(0 0 0/0.048);color:var(--ink);border:1px solid rgb(0 0 0/0.14)}
html[data-theme=light][data-page=academic] .focus-today{color:var(--ink)}
html[data-theme=light][data-page=academic] .fsrow{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=academic] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=academic] .modal input,html[data-theme=light][data-page=academic] .modal select{background:var(--s3)}
html[data-theme=light][data-page=academic][data-mod] .pm.on{background:rgb(0 0 0/0.072)}
/* templates\area.html */
html[data-theme=light][data-page=area] ::selection{color:var(--ink)}
html[data-theme=light][data-page=area] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=area] .hero{background:var(--s3)}
html[data-theme=light][data-page=area] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=area] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=area] .trow{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=area] .addrow input{background:var(--s3)}
/* templates\business.html */
html[data-theme=light][data-page=business] ::selection{color:var(--ink)}
html[data-theme=light][data-page=business] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=business] .hero{background:var(--s3)}
html[data-theme=light][data-page=business] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=business] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=business] .biz .next{background:rgb(0 0 0/0.036)}
html[data-theme=light][data-page=business] .inc{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=business] .pb{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=business] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=business] .modal input,html[data-theme=light][data-page=business] .modal select{background:var(--s3)}
/* templates\connect.html */
html[data-theme=light][data-page=connect] .tabs{background:rgb(0 0 0/0.045);border:1px solid rgb(0 0 0/0.07)}
html[data-theme=light][data-page=connect] .tabs button.on{color:var(--ink)}
html[data-theme=light][data-page=connect] .card{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=connect] .chip{border:1px solid rgb(0 0 0/0.09)}
html[data-theme=light][data-page=connect] .ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=connect] .tokbox{background:rgb(0 0 0/0.048)}
html[data-theme=light][data-page=connect] .drop{border:1.5px dashed rgb(0 0 0/0.14)}
html[data-theme=light][data-page=connect] .prog{background:rgb(0 0 0/0.054)}
/* templates\content.html */
html[data-theme=light][data-page=content] ::selection{color:var(--ink)}
html[data-theme=light][data-page=content] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=content] .hero{background:var(--s3)}
html[data-theme=light][data-page=content] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=content] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=content] .tg-fmt{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=content] .iact button:hover{color:var(--ink)}
html[data-theme=light][data-page=content] .kcol{background:rgb(0 0 0/0.035)}
html[data-theme=light][data-page=content] .kbtns button:hover{color:var(--ink)}
html[data-theme=light][data-page=content] .pos input,html[data-theme=light][data-page=content] .pos textarea{background:var(--s3)}
html[data-theme=light][data-page=content] .arow{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=content] .vault{background:var(--s3)}
html[data-theme=light][data-page=content] .refrow{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=content] .refadd input{background:var(--s3)}
html[data-theme=light][data-page=content] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=content] .modal input,html[data-theme=light][data-page=content] .modal select{background:var(--s3)}
/* templates\dialer.html */
html[data-theme=light][data-page=dialer] ::selection{color:var(--ink)}
html[data-theme=light][data-page=dialer] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=dialer] .hero{background:var(--s3)}
html[data-theme=light][data-page=dialer] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=dialer] .banner{color:var(--ink)}
html[data-theme=light][data-page=dialer] .banner b{color:var(--ink)}
html[data-theme=light][data-page=dialer] .search{background:var(--s3)}
html[data-theme=light][data-page=dialer] input,html[data-theme=light][data-page=dialer] select,html[data-theme=light][data-page=dialer] textarea{background:var(--s3)}
html[data-theme=light][data-page=dialer] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=dialer] .ibtn:hover{color:var(--ink)}
html[data-theme=light][data-page=dialer] td{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=dialer] tr.row:hover td{background:rgb(0 0 0/0.030)}
html[data-theme=light][data-page=dialer] .st-Potential{color:var(--ink)}
html[data-theme=light][data-page=dialer] .ft.no{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=dialer] .drawer{background:var(--s3)}
html[data-theme=light][data-page=dialer] .ev.out .es{color:var(--ink)}
html[data-theme=light][data-page=dialer] .shade{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=dialer] .modal{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=dialer] .mbox{background:var(--s3)}
html[data-theme=light][data-page=dialer] .session{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=dialer] .chip:hover{color:var(--ink)}
html[data-theme=light][data-page=dialer] .li.warn{color:var(--ink)}
html[data-theme=light][data-page=dialer] .phone{background:var(--s3);border:6px solid var(--edge)}
html[data-theme=light][data-page=dialer] .phone .ph{border-bottom:1px solid var(--edge)}
html[data-theme=light][data-page=dialer] .phone .ph b{background:var(--s3)}
html[data-theme=light][data-page=dialer][data-mod] .bk.on{background:rgb(0 0 0/0.054)}
/* templates\finance.html */
html[data-theme=light][data-page=finance] ::selection{color:var(--ink)}
html[data-theme=light][data-page=finance] .hero{background:var(--s3)}
html[data-theme=light][data-page=finance] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=finance] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=finance] td{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=finance] tr.trow:hover td{background:rgb(0 0 0/0.030)}
html[data-theme=light][data-page=finance] .cat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=finance] .pbar{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=finance] .wgcard .wx{background:rgb(0 0 0/0.060);color:var(--ink)}
html[data-theme=light][data-page=finance] .segs i{background:rgb(0 0 0/0.081)}
html[data-theme=light][data-page=finance] .sumrow{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=finance] .goal .gbar{background:rgb(0 0 0/0.072)}
html[data-theme=light][data-page=finance] .asset{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=finance] .chk{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=finance] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=finance] .modal input,html[data-theme=light][data-page=finance] .modal select{background:var(--s3)}
html[data-theme=light][data-page=finance] .topnav{background:rgb(0 0 0/0.070)}
/* templates\form_public.html */
html[data-theme=light][data-page=form_public] body{background:var(--s3)}
html[data-theme=light][data-page=form_public] .f select option{background:var(--s3)}
/* templates\health.html */
html[data-theme=light][data-page=health] ::selection{color:var(--ink)}
html[data-theme=light][data-page=health] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=health] .hero{background:var(--s3)}
html[data-theme=light][data-page=health] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=health] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=health] .fg input,html[data-theme=light][data-page=health] .fg select{background:var(--s3)}
html[data-theme=light][data-page=health] .wrow input{background:var(--s3)}
html[data-theme=light][data-page=health] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=health] .modal select,html[data-theme=light][data-page=health] .modal input,html[data-theme=light][data-page=health] .modal textarea{background:var(--s3)}
html[data-theme=light][data-page=health] .pex{border-bottom:1px solid rgb(0 0 0/0.06)}
/* templates\home.html */
html[data-theme=light][data-page=home] .seg{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=home] .seg button.on{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=home] .feed-item{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=home] .feed-item .ic{background:rgb(0 0 0/0.045)}
html[data-theme=light][data-page=home] .acts button{background:rgb(0 0 0/0.036);border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=home] .acts button:hover{background:rgb(0 0 0/0.081)}
html[data-theme=light][data-page=home] .acts kbd{border:1px solid rgb(0 0 0/0.10)}
html[data-theme=light][data-page=home] .mute .pop .r:hover{background:rgb(0 0 0/0.036)}
html[data-theme=light][data-page=home] .snz button:hover{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=home] .kbdhint{background:rgb(0 0 0/.28);border:1px solid rgb(0 0 0/0.06)}
/* templates\index.html */
html[data-theme=light][data-page=app] ::selection{color:var(--ink)}
html[data-theme=light][data-page=app] .bnav{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=app] .pbar-wrap{background:var(--s3)}
html[data-theme=light][data-page=app] input,html[data-theme=light][data-page=app] textarea,html[data-theme=light][data-page=app] select{background:rgb(0 0 0/0.036)}
html[data-theme=light][data-page=app] .btn-out{background:rgb(0 0 0/0.036)}
html[data-theme=light][data-page=app] .cal-d.today.has-ev::after{background:var(--s3)}
html[data-theme=light][data-page=app] .moverlay{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=app] .mbox{background:var(--s3)}
/* templates\kitchen.html */
html[data-theme=light][data-page=kitchen] ::selection{color:var(--ink)}
html[data-theme=light][data-page=kitchen] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=kitchen] .hero{background:var(--s3)}
html[data-theme=light][data-page=kitchen] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=kitchen] textarea,html[data-theme=light][data-page=kitchen] input,html[data-theme=light][data-page=kitchen] select{background:var(--s3)}
html[data-theme=light][data-page=kitchen] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=kitchen] #recipe{background:var(--s3)}
html[data-theme=light][data-page=kitchen] .macro .bar{background:rgb(0 0 0/0.072)}
html[data-theme=light][data-page=kitchen] .meal{border-bottom:1px solid rgb(0 0 0/0.06)}
/* templates\knowledge.html */
html[data-theme=light][data-page=knowledge] ::selection{color:var(--ink)}
html[data-theme=light][data-page=knowledge] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=knowledge] .hero{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=knowledge] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=knowledge] .capture{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .capbox{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .capfile:hover{color:var(--ink)}
html[data-theme=light][data-page=knowledge] .note{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=knowledge] .res{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=knowledge] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=knowledge] .modal pre{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .md{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .md .stamp{border-top:1px dashed var(--edge)}
html[data-theme=light][data-page=knowledge] .modal input,html[data-theme=light][data-page=knowledge] .modal select{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .rmodes{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .rmodes button.on{background:var(--s3)}
html[data-theme=light][data-page=knowledge] .rmeter .bar{background:rgb(0 0 0/0.063)}
/* templates\memory.html */
html[data-theme=light][data-page=memory] .search{background:rgb(0 0 0/0.045);border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=memory] .chip{border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=memory] .it{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=memory] .it .tx[contenteditable="true"]{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=memory] .it .src .conf i{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=memory] .ops button{background:rgb(0 0 0/0.036);border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=memory] .ops button:hover{background:rgb(0 0 0/0.081)}
/* templates\now.html */
html[data-theme=light][data-page=now] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=now] .task{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=now] .dots i{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=now] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=now] .modal textarea{background:var(--s3)}
html[data-theme=light][data-page=now] .mbtn.ghost{background:var(--s3)}
html[data-theme=light][data-page=now] .mbtn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=now] .streak-chip b{color:var(--ink)}
html[data-theme=light][data-page=now] .xp-bar{background:rgb(0 0 0/0.063)}
/* templates\object.html */
html[data-theme=light][data-page=object] h1.display-2:focus{background:rgb(0 0 0/0.036)}
html[data-theme=light][data-page=object] .sub a{border-bottom:1px solid rgb(0 0 0/0.14)}
html[data-theme=light][data-page=object] .card{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=object] .chips span{border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=object] .pv{background:var(--s3);border:1px solid var(--edge-muted,var(--edge))}
/* templates\os.html */
html[data-theme=light][data-page=os] ::selection{color:var(--ink)}
html[data-theme=light][data-page=os] .hero{background:var(--s3)}
html[data-theme=light][data-page=os] .hstat{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=os] .gstreak{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=os] .glevel{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=os] .gxp .bar{background:rgb(0 0 0/0.072)}
html[data-theme=light][data-page=os] .wkd i{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=os] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=os] td{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=os] tr.trow:hover td{background:rgb(0 0 0/0.030)}
html[data-theme=light][data-page=os] .area .bar{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=os] .hab{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=os] .pbar{background:rgb(0 0 0/0.063)}
html[data-theme=light][data-page=os] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=os] .modal input,html[data-theme=light][data-page=os] .modal select,html[data-theme=light][data-page=os] .modal textarea{background:var(--s3)}
html[data-theme=light][data-page=os] #boot{background:var(--s3)}
html[data-theme=light][data-page=os] .boot-bar{background:rgb(0 0 0/0.072)}
html[data-theme=light][data-page=os] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=os] .n-alert{color:var(--ink)}
html[data-theme=light][data-page=os] .n-bill{color:var(--ink)}
html[data-theme=light][data-page=os] .cinrow input{background:var(--s3)}
html[data-theme=light][data-page=os] .hminibar{background:rgb(0 0 0/0.072)}
html[data-theme=light][data-page=os] .pet-face{background:var(--s3)}
/* templates\people.html */
html[data-theme=light][data-page=people] .kcol{background:rgb(0 0 0/0.030);border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=people] .pc{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=people] .pc .av{background:var(--s3);border:1px solid rgb(0 0 0/0.10)}
html[data-theme=light][data-page=people] .pc .src{border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=people] .card{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=people] .ph .av{background:var(--s3);border:1px solid rgb(0 0 0/0.10)}
html[data-theme=light][data-page=people] .seg{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=people] .seg button.on{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=people] .tl .it{border-top:1px solid rgb(0 0 0/0.06)}
/* templates\planning.html */
html[data-theme=light][data-page=planning] ::selection{color:var(--ink)}
html[data-theme=light][data-page=planning] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=planning] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=planning] .cnb:hover{color:var(--ink)}
html[data-theme=light][data-page=planning] .up{border-bottom:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=planning] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=planning] .modal input,html[data-theme=light][data-page=planning] .modal select{background:var(--s3)}
/* templates\projects.html */
html[data-theme=light][data-page=projects] .seg{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=projects] .seg button.on{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=projects] .pc{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=projects] .pc .st{border:1px solid rgb(0 0 0/0.10)}
html[data-theme=light][data-page=projects] .track{background:rgb(0 0 0/0.054)}
html[data-theme=light][data-page=projects] .card{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=projects] .ttl:focus{background:rgb(0 0 0/0.036)}
html[data-theme=light][data-page=projects] .tk{border-top:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=projects] .ck{color:var(--ink);border:1.5px solid rgb(0 0 0/0.14)}
html[data-theme=light][data-page=projects] .it:hover{background:rgb(0 0 0/0.030)}
html[data-theme=light][data-page=projects] .it .rm:hover{background:rgb(0 0 0/0.072)}
/* templates\protocols.html */
html[data-theme=light][data-page=protocols] ::selection{color:var(--ink)}
html[data-theme=light][data-page=protocols] .topnav{background:rgb(0 0 0/0.070)}
html[data-theme=light][data-page=protocols] .hero{background:var(--s3)}
html[data-theme=light][data-page=protocols] .btn.ghost:hover{color:var(--ink)}
html[data-theme=light][data-page=protocols] .mback{background:rgb(0 0 0/.28)}
html[data-theme=light][data-page=protocols] .modal input,html[data-theme=light][data-page=protocols] .modal select,html[data-theme=light][data-page=protocols] .modal textarea{background:var(--s3)}
html[data-theme=light][data-page=protocols] .mview{background:var(--s3)}
/* templates\routines.html */
html[data-theme=light][data-page=routines] .card{border:1px solid var(--edge-muted,var(--edge))}
html[data-theme=light][data-page=routines] .card .bi{border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light][data-page=routines] .card .out{background:rgb(0 0 0/0.036);border:1px solid rgb(0 0 0/0.06)}
html[data-theme=light][data-page=routines] .ghost.run{color:var(--ink)}
html[data-theme=light][data-page=routines] .tog{background:rgb(0 0 0/0.090)}
html[data-theme=light][data-page=routines] .spin{border:1.5px solid rgb(0 0 0/0.14)}
/* static\nero-bot.js */
html[data-theme=light] .np-bub{background:var(--s3);border:1px solid rgb(0 0 0/0.08)}
html[data-theme=light] .np-host.np-full .np-shadow{background:var(--s3)}
html[data-theme=light] .np-host.np-full .np-tag{background:rgb(0 0 0/0.070);border:1px solid var(--edge)}
html[data-theme=light] #nero-recpill{background:rgb(0 0 0/.28);color:var(--ink)}
/* static\nero-ui.js */
html[data-theme=light] #nb-help{background:var(--s3);border:1px solid var(--edge)}
html[data-theme=light] #nb-help:hover{color:var(--ink)}
html[data-theme=light] #nb-panel{background:var(--s3);border:1px solid var(--edge)}
html[data-theme=light] #nb-head{background:var(--s3);color:var(--ink);border-bottom:1px solid var(--edge)}
html[data-theme=light] #nb-close:hover{color:var(--ink)}
html[data-theme=light] #nb-msgs::-webkit-scrollbar-thumb{background:var(--s3)}
html[data-theme=light] .nb-m{color:var(--ink)}
html[data-theme=light] .nb-n{background:var(--s3);border:1px solid var(--edge)}
html[data-theme=light] #nb-inrow{border-top:1px solid var(--edge)}
html[data-theme=light] #nb-in{background:var(--s3);color:var(--ink);border:1px solid var(--edge)}
html[data-theme=light] #nt-overlay{background:rgb(0 0 0/.28)}
html[data-theme=light] #nt-card{background:var(--s3)}
html[data-theme=light] #nt-title{color:var(--ink)}
html[data-theme=light] #nt-body{color:var(--ink)}
html[data-theme=light] #nt-skip:hover{color:var(--ink)}
html[data-theme=light] #nt-back{background:var(--s3);color:var(--ink)}
html[data-theme=light] .np-face{background:var(--s3)}
html[data-theme=light] .np-bub{background:var(--s3);color:var(--ink)}
html[data-theme=light] .np-bub::after{background:var(--s3)}
html[data-theme=light] if (window.__neroSet || window.__neroShell || window.__neroChild) return; window.__neroSet = 1;
  const css = `
html{background:var(--s3)}
html[data-theme=light] ::-webkit-scrollbar-thumb{background:var(--s3);border:2px solid var(--edge)}
html[data-theme=light] .nl-opt{color:var(--ink)}
html[data-theme=light] .nl-opt:hover{background:var(--s3);color:var(--ink)}
html[data-theme=light] #ns-back{background:rgb(0 0 0/.28)}
html[data-theme=light] #ns-head{border-bottom:1px solid var(--edge)}
html[data-theme=light] #ns-head b{color:var(--ink)}
html[data-theme=light] #ns-close:hover{color:var(--ink)}
html[data-theme=light] .ns-row input{background:var(--s3);color:var(--ink);border:1px solid var(--edge)}
html[data-theme=light] .ns-btn{background:var(--s3);color:var(--ink);border:1px solid var(--edge)}
html[data-theme=light] .ns-stat{color:var(--ink)}
html[data-theme=light] if (window.__neroSpot) return;
  if (!window.__neroShell && window.top !== window.self) return;
  window.__neroSpot = 1;
  const css = `
#sp-fab{background:var(--s3);border:1px solid var(--edge)}
html[data-theme=light] #sp-head{background:var(--s3);color:var(--ink);border-bottom:1px solid var(--edge)}
html[data-theme=light] #sp-close:hover{color:var(--ink)}
html[data-theme=light] #sp-chips::-webkit-scrollbar-thumb{background:var(--s3)}
html[data-theme=light] .sp-chip{background:var(--s3);color:var(--ink);border:1px solid var(--edge)}
html[data-theme=light] #sp-in{background:var(--s3);color:var(--ink);border:1px solid var(--edge)}
html[data-theme=light] if (window.__neroCmd || window.__neroShell || window.__neroChild) return; window.__neroCmd = 1;
  const css = `
#cmd-back{background:rgb(0 0 0/.28)}
html[data-theme=light] #cmd-in{color:var(--ink);border-bottom:1px solid var(--edge)}
html[data-theme=light] #cmd-list::-webkit-scrollbar-thumb{background:var(--s3)}
html[data-theme=light] .cmd-row{color:var(--ink)}
html[data-theme=light] .cmd-row.sel{background:var(--s3);color:var(--ink)}
html[data-theme=light] #nn-head{color:var(--ink);border-bottom:1px solid var(--edge)}
html[data-theme=light] .nn-it{color:var(--ink)}
html[data-theme=light] .nn-it:hover{background:var(--s3)}
html[data-theme=light] .nn-x:hover{color:var(--ink)}
html[data-theme=light] #nn-foot{border-top:1px solid var(--edge)}
html[data-theme=light] #nt-bar{background:rgb(0 0 0/.28);border-top:1px solid var(--edge)}
html[data-theme=light] #nt-bar a.on{color:var(--ink)}
html[data-theme=light] #nm-back{background:rgb(0 0 0/.28)}
html[data-theme=light] .ns-mod{background:var(--s3);border:1px solid var(--edge)}
html[data-theme=light] .ns-mod .lb{color:var(--ink)}
html[data-theme=light] .ns-row textarea{background:var(--s3);color:var(--ink);border:1px solid var(--edge)}
/* hand fixes: values the scanner cannot see (colour set next to a var() background) */
html[data-theme=light] .np-bub{color:var(--ink);box-shadow:var(--shadow-menu)}
html[data-theme=light] .np-host.np-full .np-tag{color:var(--ink-3)}
html[data-theme=light] .hero{background:var(--s1)}
html[data-theme=light][data-page=dialer] .bk.on{color:var(--ink)}
/* <<< W3 generated light overrides <<< */