/* Neon dark mode, shared part. Applies only when <html class="neon">.
   Per-page colour overrides live in dark/<page>.css (generated by _build_dark.py). */
html.neon{
  color-scheme:dark;
  --bg:#090a14;
  --bg-alt:#0d0e1d;
  --ink:#eceeff;
  --ink-soft:#a6aed8;
  --line:rgba(125,140,255,.20);
  --accent:#ffc94d;
  --accent-soft:rgba(255,201,77,.14);
  --teal:#2ef2e0;
  --teal-soft:rgba(46,242,224,.12);
  --card:#12132a;
  scrollbar-color:#2b2f66 #090a14;
}
html.neon body{
  background:#090a14;
  color:var(--ink);
}
html.neon ::selection{background:rgba(46,242,224,.28);color:#fff;}

/* neon accents */
html.neon .accent{text-shadow:0 0 26px rgba(255,140,90,.45);}

html.neon .project-card,html.neon .g-card,html.neon .side-card{transition:box-shadow .35s ease,border-color .35s ease,transform .35s ease;}
html.neon .project-card:hover,html.neon .g-card:hover,html.neon .side-card:hover{
  border-color:rgba(46,242,224,.55);
  box-shadow:0 0 0 1px rgba(46,242,224,.4),0 16px 54px rgba(46,242,224,.16),0 0 38px rgba(255,79,216,.12);
}
html.neon .nav-links a:hover,html.neon .nav-drop-menu a:hover{text-shadow:0 0 12px rgba(46,242,224,.55);}


/* Nav chips (nav icons, back arrow, Tunes, music controls, boba): one shared night style.
   Each chip keeps its daytime colours underneath and a night layer fades in on top of the colour (under the icon),
   so every chip changes at the same pace and ends up identical. */
.nav-icon,.back-icon{position:relative;}
.nav-icon,.back-icon,.music-btn,.mc-btn,.nav-coffee{isolation:isolate;}
.nav-icon::before,.back-icon::before,.music-btn::before,.mc-btn::before,.nav-coffee::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(130% 120% at 30% 0%,rgba(var(--nn),.24),transparent 62%),
    linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),.78),
    0 0 10px 1px rgba(var(--nn),.5),
    0 0 26px 2px rgba(var(--nn),.24),
    inset 0 0 9px rgba(var(--nn),.34),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:box-shadow .3s ease;
}
html.neon .nav-icon::before,html.neon .back-icon::before,html.neon .music-btn::before,html.neon .mc-btn::before,html.neon .nav-coffee::before{opacity:1;}
html.neon .nav-icon,html.neon .back-icon{--nx-c:#d6dcff;color:var(--nx-c) !important;}
html.neon .music-btn,html.neon .mc-btn{color:#d6dcff;}
html.neon .nav-icon,html.neon .back-icon,html.neon .music-btn,html.neon .mc-btn,html.neon .nav-coffee{
  box-shadow:none !important;
}

/* ===== Neon nav (night) =====
   Every entry has its own tube colour: Tunes cyan, Work amber, About pink, boba coral. --nn is an r,g,b triplet so the
   ring, glow, icon and label can all share it. It is set in day mode too, so nothing loses its colour mid-fade. */
.nav-icon,.back-icon,.music-btn,.mc-btn,.nav-coffee{--nn:46,242,224;}
.nav-dropdown .nav-drop-label .nav-icon,.nav-drop-menu a:nth-child(1) .nav-icon{--nn:255,201,77;}
.nav-drop-menu a:nth-child(2) .nav-icon{--nn:255,95,207;}
.nav-drop-menu a:nth-child(3) .nav-icon{--nn:143,155,255;}
.nav-links > a .nav-icon{--nn:255,95,207;}
.nav-coffee{--nn:255,150,90;}

html.neon .nav-dropdown .nav-drop-label .nav-icon,html.neon .nav-drop-menu a:nth-child(1) .nav-icon{--nx-c:#ffe6a6;}
html.neon .nav-drop-menu a:nth-child(2) .nav-icon,html.neon .nav-links > a .nav-icon{--nx-c:#ffc2ee;}
html.neon .nav-drop-menu a:nth-child(3) .nav-icon{--nx-c:#ccd2ff;}
html.neon .back-icon{--nx-c:#b6fbf5;}
html.neon .music-btn,html.neon .mc-btn{color:#b6fbf5;}
html.neon .nav-icon svg,html.neon .back-icon svg,html.neon .music-emoji svg,html.neon .mc-icon svg{
  filter:drop-shadow(0 0 3px rgba(var(--nn),.9));
}
html.neon .nav-coffee{filter:drop-shadow(0 0 7px rgba(255,150,90,.55));}

/* hover: the tube burns brighter */
html.neon .nav-links a:hover .nav-icon::before,
html.neon .nav-dropdown:hover .nav-drop-label .nav-icon::before,
html.neon .music-btn:hover::before,html.neon .mc-btn:hover::before,
html.neon .nav-coffee:hover::before,html.neon .back-icon:hover::before{
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),1),
    0 0 16px 2px rgba(var(--nn),.85),
    0 0 40px 6px rgba(var(--nn),.4),
    inset 0 0 12px rgba(var(--nn),.52),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* labels glow in their tube colour and go white hot on hover */
html.neon .music-tunes-label{color:#b6fbf5;text-shadow:0 0 8px rgba(46,242,224,.65),0 0 20px rgba(46,242,224,.3);}
html.neon .nav-drop-label{color:#ffe6a6;text-shadow:0 0 8px rgba(255,201,77,.6),0 0 20px rgba(255,201,77,.28);}
html.neon .nav-links > a{color:#ffc2ee;text-shadow:0 0 8px rgba(255,95,207,.6),0 0 20px rgba(255,95,207,.28);}
html.neon .nav-drop-chevron{filter:drop-shadow(0 0 4px rgba(255,201,77,.85));}
html.neon .music-tunes-group:hover .music-tunes-label{color:#fff;text-shadow:0 0 10px rgba(46,242,224,.95),0 0 26px rgba(46,242,224,.55);}
html.neon .nav-dropdown:hover .nav-drop-label{color:#fff;text-shadow:0 0 10px rgba(255,201,77,.95),0 0 26px rgba(255,201,77,.55);}
html.neon .nav-links > a:nth-child(3):hover{color:#fff;text-shadow:0 0 10px rgba(255,95,207,.95),0 0 26px rgba(255,95,207,.55);}

/* dropdown panel: neon edge, entries light up in their own colour */
html.neon .nav-drop-menu{
  border-color:rgba(46,242,224,.3);
  box-shadow:0 0 0 1px rgba(46,242,224,.1),0 24px 44px -14px rgba(0,0,0,.55),0 0 34px rgba(124,92,255,.2);
}
html.neon .nav-drop-menu a:nth-child(1):hover{color:#ffe6a6;text-shadow:0 0 10px rgba(255,201,77,.75);}
html.neon .nav-drop-menu a:nth-child(2):hover{color:#ffc2ee;text-shadow:0 0 10px rgba(255,95,207,.75);}
html.neon .nav-drop-menu a:nth-child(3):hover{color:#ccd2ff;text-shadow:0 0 10px rgba(143,155,255,.8);}

/* tooltips: dark glass with a tube-coloured edge (they were pale lavender plates) */
.nav-tip,.music-tip{--nn:46,242,224;}
.nav-links > a .nav-tip{--nn:255,95,207;}
.nav-coffee .music-tip{--nn:255,150,90;}
html.neon .nav-tip,html.neon .music-tip{
  background:rgba(12,14,32,.96);color:#fff;
  box-shadow:0 0 0 1px rgba(var(--nn),.7),0 0 14px rgba(var(--nn),.4),0 0 30px rgba(var(--nn),.18);
  text-shadow:0 0 8px rgba(var(--nn),.8);
}
html.neon .nav-tip::before,html.neon .music-tip::before{border-bottom-color:rgba(var(--nn),.9);}

/* a neon strip under the bar */
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:0;z-index:-1;
  background:linear-gradient(90deg,transparent 0%,rgba(46,242,224,.85) 26%,rgba(255,95,207,.9) 60%,rgba(255,201,77,.85) 86%,transparent 100%);
  box-shadow:0 0 10px rgba(255,95,207,.4),0 3px 24px rgba(46,242,224,.26);
}
html.neon header::after{opacity:1;}

/* images and video keep their own colours; just seat them on the dark page */
html.neon img,html.neon video{color-scheme:light;}

/* theme switch (desktop only) */
.neon-toggle{
  position:fixed;right:22px;bottom:22px;z-index:120;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(110,95,60,.18);cursor:pointer;display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.82);color:#5a4a2a;
  box-shadow:0 8px 22px rgba(60,50,20,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .25s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.neon-toggle:hover{transform:translateY(-2px) scale(1.05);}
.neon-toggle svg{width:22px;height:22px;display:block;position:absolute;left:50%;top:50%;margin:-11px 0 0 -11px;
  transition:opacity .6s ease,transform .6s cubic-bezier(.65,0,.35,1);}
/* the button shows the current sky: sun by day, moon at night (icons cross-fade) */
.neon-toggle .i-moon{opacity:0;transform:translateY(6px) rotate(-20deg);}
html.neon .neon-toggle .i-sun{opacity:0;transform:translateY(-6px) rotate(20deg);}
html.neon .neon-toggle .i-moon{opacity:1;transform:none;}
html.neon .neon-toggle{
  background:rgba(18,19,42,.82);color:#e3e9ff;border-color:rgba(200,215,255,.35);
  box-shadow:0 0 0 1px rgba(200,215,255,.18),0 0 26px rgba(200,215,255,.32),0 8px 24px rgba(0,0,0,.5);
}
@media (max-width:900px){
  .neon-toggle{width:34px;height:34px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));}
  .neon-toggle svg{width:16px;height:16px;margin:-8px 0 0 -8px;}
  .neon-toggle:hover{transform:none;}
  /* on a phone the script moves the button into the nav, just left of the boba icon, and it is dressed like the boba icon:
     a 30px rounded chip, cream by day, a lit neon tube ring at night (moonlight blue-white). It stays bottom right if there is no boba icon. */
  .neon-toggle.in-nav{
    position:relative;right:auto;bottom:auto;flex:none;z-index:auto;isolation:isolate;
    width:30px;height:30px;border-radius:9px;border:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    --nn:200,215,255;color:#8a6f3d;
    background:linear-gradient(160deg,#fbf3e4 0%,#f2e2c3 100%);
    box-shadow:0 5px 8px -3px rgba(190,150,75,.22),0 2px 4px rgba(190,150,75,.15),inset 0 2px 3px rgba(255,255,255,.65),inset 0 -3px 4px rgba(190,150,75,.12);
    transition:transform .25s ease,box-shadow .25s ease,color .6s ease;
  }
  .neon-toggle.in-nav svg{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;}
  .neon-toggle.in-nav::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
    background:radial-gradient(130% 120% at 30% 0%,rgba(var(--nn),.24),transparent 62%),linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
    box-shadow:0 0 0 1.5px rgba(var(--nn),.78),0 0 10px 1px rgba(var(--nn),.5),0 0 26px 2px rgba(var(--nn),.24),inset 0 0 9px rgba(var(--nn),.34),inset 0 1px 0 rgba(255,255,255,.14);
    transition:opacity .6s ease;
  }
  .neon-toggle.in-nav:active{transform:scale(.93);}
  html.neon .neon-toggle.in-nav{
    color:#e3e9ff;border:none;box-shadow:none;
    background:linear-gradient(160deg,#fbf3e4 0%,#f2e2c3 100%);
    filter:drop-shadow(0 0 7px rgba(var(--nn),.45));
  }
  html.neon .neon-toggle.in-nav::before{opacity:1;}
  html.neon .neon-toggle.in-nav svg{filter:drop-shadow(0 0 3px rgba(var(--nn),.9));}
}

/* these few colours are !important (they must beat inline styles), and !important beats element.animate(), so they read
   a registered custom property that neon.js animates instead */
@property --nx-c{syntax:"<color>";inherits:false;initial-value:transparent;}
/* gradients cannot transition, but the colours inside them can: the contact card and its outline button keep the same
   gradient in day and night and only these registered colours change, so they fade instead of snapping */
@property --g1{syntax:"<color>";inherits:false;initial-value:transparent;}
@property --g2{syntax:"<color>";inherits:false;initial-value:transparent;}
@property --g3{syntax:"<color>";inherits:false;initial-value:transparent;}
@property --ck-r1{syntax:"<color>";inherits:false;initial-value:transparent;}
@property --ck-r2{syntax:"<color>";inherits:false;initial-value:transparent;}
@property --ck-l1{syntax:"<color>";inherits:false;initial-value:transparent;}
@property --ck-l2{syntax:"<color>";inherits:false;initial-value:transparent;}

/* smooth switch: only while a switch is in progress.
   Text colour and svg fill are NOT done here: they are inherited, and CSS transitions on a parent plus its children
   restart on every frame (the text then only jumps at the very end). neon.js fades them with element.animate(). */
html.neon-nox,html.neon-nox *,html.neon-nox *::before,html.neon-nox *::after{transition:none !important;}
html.neon-anim,html.neon-anim *,html.neon-anim *::before,html.neon-anim *::after{
  transition:background-color .8s ease,border-color .8s ease,box-shadow .8s ease,filter .8s ease,opacity .8s ease,text-shadow .8s ease,
    -webkit-text-fill-color .8s cubic-bezier(.7,0,.3,1),-webkit-text-stroke-color .8s cubic-bezier(.7,0,.3,1),
    --ck-r1 .8s ease,--ck-r2 .8s ease,--ck-l1 .8s ease,--ck-l2 .8s ease,--g1 .8s ease,--g2 .8s ease,--g3 .8s ease,--mk .8s ease !important;
}
/* during a sunset / sunrise the page follows the sky: a beat later, a little slower, softer curve */
html.neon-anim.neon-sunset,html.neon-anim.neon-sunset *,html.neon-anim.neon-sunset *::before,html.neon-anim.neon-sunset *::after{
  transition:background-color 1.3s cubic-bezier(.37,0,.63,1) .15s,border-color 1.3s cubic-bezier(.37,0,.63,1) .15s,
    box-shadow 1.3s cubic-bezier(.37,0,.63,1) .15s,filter 1.3s cubic-bezier(.37,0,.63,1) .15s,
    opacity 1.3s cubic-bezier(.37,0,.63,1) .15s,text-shadow 1.3s cubic-bezier(.37,0,.63,1) .15s,
    -webkit-text-fill-color 1.3s cubic-bezier(.37,0,.63,1) .15s,-webkit-text-stroke-color 1.3s cubic-bezier(.37,0,.63,1) .15s,
    --ck-r1 1.3s cubic-bezier(.37,0,.63,1) .15s,--ck-r2 1.3s cubic-bezier(.37,0,.63,1) .15s,
    --ck-l1 1.3s cubic-bezier(.37,0,.63,1) .15s,--ck-l2 1.3s cubic-bezier(.37,0,.63,1) .15s,
    --g1 1.3s cubic-bezier(.37,0,.63,1) .15s,--g2 1.3s cubic-bezier(.37,0,.63,1) .15s,--g3 1.3s cubic-bezier(.37,0,.63,1) .15s,--mk 1.3s cubic-bezier(.37,0,.63,1) .15s !important;
}
html.neon-anim.neon-sunset .neon-toggle svg{transition:opacity .6s ease,transform .6s cubic-bezier(.65,0,.35,1) !important;}
@media (prefers-reduced-motion:reduce){
  html.neon-anim,html.neon-anim *,html.neon-anim *::before,html.neon-anim *::after{transition:none !important;}
}

/* per-element soft tints defined inline (petpal level cards, discovery cards, trait icons ...) */
html.neon .level-section[data-level="01"]{--tint-strong:#b9b6d9 !important;}
html.neon [style*="--d-accent-soft"]{--d-accent-soft:color-mix(in srgb,var(--d-accent) 18%,#0b0c1a) !important;}
html.neon [style*="--p-accent-soft"]{--p-accent-soft:color-mix(in srgb,var(--p-accent) 18%,#0b0c1a) !important;}
html.neon [style*="--t-accent-soft"]{--t-accent-soft:color-mix(in srgb,var(--t-accent) 18%,#0b0c1a) !important;}
html.neon .family-card{background:#14152e !important;}
html.neon .f-circle{background:rgba(125,140,255,.16) !important;}
html.neon .f-label{filter:brightness(1.55) saturate(1.2);}
html.neon .kicker{--nx-c:#ffc94d;color:var(--nx-c) !important;}

/* ===== Hand-tuned sections (homepage) ===== */

/* Graphic / panda band: was an inline light band; now a slightly lifted night band so it reads as its own section */
/* A gradient cannot fade into another gradient, so day and night share one gradient and only its colours (--g1..--g3,
   registered so they transition) change. The day band was an inline flat colour, hence the !important. */
#graphic{
  --g1:rgba(255,79,216,0);--g2:#f7f7f5;--g3:#f7f7f5;
  background:
    radial-gradient(700px 420px at 85% 40%,var(--g1),transparent 65%),
    linear-gradient(180deg,var(--g2) 0%,var(--g3) 100%) !important;
}
html.neon #graphic{
  --g1:rgba(255,79,216,.08);--g2:#0c0d1c;--g3:#101129;
  /* the two hairlines are inset shadows, so day and night keep exactly the same height */
  box-shadow:inset 0 1px 0 rgba(125,140,255,.12),inset 0 -1px 0 rgba(125,140,255,.12);
}
html.neon #graphic .kicker{--nx-c:#ffc94d;color:var(--nx-c) !important;text-shadow:0 0 14px rgba(255,201,77,.35);}
html.neon #graphic h2{color:#f4f5ff;}
html.neon #graphic .graphic-intro p{color:#a6aed8;}
html.neon .graphic-viewall{color:#2ef2e0;text-decoration-color:rgba(46,242,224,.5);}
html.neon .g-card{border:1px solid rgba(125,140,255,.16);}
.g-card::before,html.neon .g-card::before{background:linear-gradient(to top,var(--g1) 0%,var(--g2) 50%,var(--g3) 70%);}
.g-card::before{--g1:rgba(47,59,55,.6);--g2:rgba(47,59,55,.055);--g3:rgba(47,59,55,0);}
html.neon .g-card::before{--g1:rgba(6,7,16,.82);--g2:rgba(6,7,16,.15);--g3:rgba(6,7,16,0);}
html.neon .g-card-title{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);}
.project-card.pc-petpal::before,html.neon .project-card.pc-petpal::before{background:linear-gradient(160deg,var(--g1),var(--g2) 55%,var(--g3) 90%);}
.project-card.pc-petpal::before{--g1:rgba(48,46,57,.48);--g2:rgba(48,46,57,.1);--g3:rgba(48,46,57,0);}
html.neon .project-card.pc-petpal::before{--g1:rgba(28,34,74,.48);--g2:rgba(28,34,74,.1);--g3:rgba(28,34,74,0);}

/* Boba / contact card: clear hierarchy (white heading, glowing "boba", soft body copy) */
.contact-inner,html.neon .contact-inner{
  background:
    radial-gradient(520px 340px at 82% 30%,var(--ck-r1),transparent 70%),
    radial-gradient(420px 300px at 8% 100%,var(--ck-r2),transparent 70%),
    linear-gradient(160deg,var(--ck-l1) 0%,var(--ck-l2) 100%);
}
/* day values: look exactly like the old flat #f6eee3 card */
.contact-inner{--ck-r1:rgba(255,79,216,0);--ck-r2:rgba(46,242,224,0);--ck-l1:#f6eee3;--ck-l2:#f6eee3;}
html.neon .contact-inner{
  --ck-r1:rgba(255,79,216,.16);--ck-r2:rgba(46,242,224,.10);--ck-l1:#17142e;--ck-l2:#100f22;
  /* same shadow slots as the day card (outer, outer, inset, inset) so every layer can fade, none can flip */
  box-shadow:0 0 0 1px rgba(255,143,177,.22),0 24px 60px -18px rgba(0,0,0,.7),
    inset 0 0 0 0 rgba(0,0,0,0),inset 0 0 0 0 rgba(0,0,0,0),0 0 60px rgba(255,79,216,.10);
}
html.neon .contact-inner::before{background:rgba(255,79,216,.35);opacity:.35;}
html.neon .contact-inner .kicker{--nx-c:#ffc94d;color:var(--nx-c) !important;text-shadow:0 0 14px rgba(255,201,77,.4);}
html.neon .contact-inner h2{color:#fff4ea;}
html.neon .boba-accent{color:#ff8fb1;text-shadow:0 0 18px rgba(255,111,170,.65);}
html.neon .contact-inner p{color:#b9b3d9;}
html.neon .contact-leaf-br,html.neon .contact-leaf-tr{opacity:.32;}
/* Floating pearls in the card. By day they are solid beige and brown balls. At night those were the brightest things in
   the card and they drifted over the copy, so they become small neon orbs: milky ones glow pink, dark ones glow indigo,
   and the whole pearl is held at about half strength so it stays behind the words. The night orb is a layer that fades
   in over the day pearl (a gradient cannot fade into another gradient). */
.boba{--pn:143,155,255;--pa:#7a6ad0;--pb:#2d2160;--pc:#150f33;}
.boba.milky{--pn:255,143,177;--pa:#fff1f6;--pb:#ffb3cb;--pc:#e0608f;}
.boba::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 32% 28%,var(--pa) 0%,var(--pb) 55%,var(--pc) 100%);
  box-shadow:0 0 0 1px rgba(var(--pn),.6),0 0 10px 1px rgba(var(--pn),.6),0 0 22px 2px rgba(var(--pn),.28);
}
html.neon .boba::after{opacity:1;}
html.neon .boba{box-shadow:none;filter:opacity(.8);}
/* ===== Neon buttons (night) =====
   Same recipe as the nav chips. The day button stays underneath untouched and a dark plate with a tube-coloured ring
   fades in on top of it, so day and night cross-fade and the glow can grow on hover.
   View Work coral, Say Hello pink, LinkedIn amber (the nav Work colour). */
.btn-primary,.btn-white,.btn-outline-white{position:relative;isolation:isolate;--nn:255,150,90;}
.btn-white{--nn:255,95,207;}
.btn-outline-white{--nn:255,201,77;}
.btn-primary::before,.btn-white::before,.btn-outline-white::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(140% 130% at 30% 0%,rgba(var(--nn),.26),transparent 62%),
    linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),.85),
    0 0 14px 1px rgba(var(--nn),.5),
    0 0 34px 3px rgba(var(--nn),.24),
    inset 0 0 12px rgba(var(--nn),.34),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:box-shadow .3s ease;
}
html.neon .btn-primary::before,html.neon .btn-white::before,html.neon .btn-outline-white::before{opacity:1;}
/* dark/index.css gives LinkedIn its own night gradient, and a gradient cannot fade, so it used to pop in as a black pill
   while the page was still light. Keep the day fill underneath instead and let the plate cover it as it fades in. */
html.neon .btn-outline-white,html.neon .btn-outline-white:hover,html.neon .btn-outline-white:active{
  background:linear-gradient(180deg,#fbf3e4,#f2e2c3);
}
/* the day shadows fade away; at night the glow lives on the plate */
html.neon .btn-primary,html.neon .btn-primary:hover,html.neon .btn-primary:active,html.neon .mobile-only .btn-primary,
html.neon .btn-white,html.neon .btn-white:hover,html.neon .btn-white:active,
html.neon .btn-outline-white,html.neon .btn-outline-white:hover,html.neon .btn-outline-white:active{box-shadow:none !important;}
html.neon .btn-primary{color:#fff1e6;text-shadow:0 0 10px rgba(255,150,90,.9);}
html.neon .btn-white{color:#ffe3f6;text-shadow:0 0 10px rgba(255,95,207,.9);}
html.neon .btn-outline-white{color:#ffe6a6;text-shadow:0 0 10px rgba(255,201,77,.85);}
html.neon .btn-primary:hover{color:#fff;text-shadow:0 0 12px rgba(255,185,140,1);}
html.neon .btn-white:hover{color:#fff;text-shadow:0 0 12px rgba(255,160,230,1);}
html.neon .btn-outline-white:hover{color:#fff;text-shadow:0 0 12px rgba(255,225,140,1);}
html.neon .btn-primary:hover::before,html.neon .btn-white:hover::before,html.neon .btn-outline-white:hover::before{
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),1),
    0 0 24px 3px rgba(var(--nn),.85),
    0 0 60px 8px rgba(var(--nn),.38),
    inset 0 0 16px rgba(var(--nn),.52),
    inset 0 1px 0 rgba(255,255,255,.2);
}
html.neon .btn-primary:active::before,html.neon .btn-white:active::before,html.neon .btn-outline-white:active::before{
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),1),
    0 0 14px 1px rgba(var(--nn),.6),
    0 0 30px 2px rgba(var(--nn),.26),
    inset 0 0 22px rgba(var(--nn),.62),
    inset 0 1px 0 rgba(255,255,255,.12);
}
html.neon .shake-lines{color:rgba(255,150,90,.55);text-shadow:0 0 12px rgba(255,150,90,.9);}
html.neon .shake-label{color:#ffb38a;text-shadow:0 0 10px rgba(255,150,90,.9);}   /* boba coral, same as the heading's boba and the nav cup */
/* the boba cup keeps its real colours and gets a soft neon halo */
html.neon .boba-cup{filter:drop-shadow(0 0 18px rgba(255,143,177,.35)) drop-shadow(0 14px 18px rgba(0,0,0,.6));}

/* night koi video (used when WebGL is off); with WebGL the shader does the same look and keeps the ripples */
.koi-video-dark{transform:translateY(-3px);opacity:0;pointer-events:none;transition:opacity .8s ease;background:#090a14;}
html.neon-sunset .koi-video-dark{transition:opacity 1.3s cubic-bezier(.37,0,.63,1) .15s;}
html.neon .hero-avatar:not(.gl-on) .koi-video-dark{opacity:1;}
html.neon .koi-video{background:#090a14;}
/* theme switch: the night video sits 3px higher, so clip the day video's last 3px too. Both end on the same row, so no pale or dark seam shows under the koi */
html.neon-anim .hero-avatar:not(.gl-on) .koi-video:not(.koi-video-dark){clip-path:inset(0 0 3px 0);}

/* About me: was an inline light band; same night band as Graphic so the page rhythm stays consistent */
#about{
  --g1:rgba(46,242,224,0);--g2:#f7f7f5;--g3:#f7f7f5;
  background:
    radial-gradient(640px 420px at 18% 45%,var(--g1),transparent 65%),
    linear-gradient(180deg,var(--g2) 0%,var(--g3) 100%) !important;
}
html.neon #about{
  --g1:rgba(46,242,224,0);--g2:#0c0d1c;--g3:#101129;
  /* the two hairlines are inset shadows, so day and night keep exactly the same height */
  box-shadow:inset 0 1px 0 rgba(125,140,255,.12),inset 0 -1px 0 rgba(125,140,255,.12);
}
.about-photo-card,html.neon .about-photo-card{background:radial-gradient(circle at 50% 42%,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%);}
.about-photo-card{--g1:#c9d8d1;--g2:#c9d8d1;--g3:#c9d8d1;}
html.neon .about-photo-card{
  --g1:#24315a;--g2:#161a36;--g3:#0f1126;
  border-color:rgba(125,140,255,.22);
  /* slots match the day card (outer, outer, inset, inset) plus one extra outer glow */
  box-shadow:0 0 0 1px rgba(46,242,224,0),0 24px 50px -20px rgba(0,0,0,.7),inset 0 0 0 0 rgba(0,0,0,0),inset 0 0 0 0 rgba(0,0,0,0),0 0 46px rgba(46,242,224,0);
}
html.neon .about-signature{color:#ffc94d;opacity:.85;text-shadow:0 0 12px rgba(255,201,77,.45);}
html.neon .about-main h2{color:#f4f5ff;}
html.neon .about-main .zh-brush{color:#ff8fb1;text-shadow:0 0 14px rgba(255,111,170,.45);}
.about-tl-line,html.neon .about-tl-line{background:linear-gradient(180deg,var(--g1),var(--g2));}
.about-tl-line{--g1:var(--line);--g2:var(--line);}
html.neon .about-tl-line{--g1:rgba(46,242,224,.55);--g2:rgba(124,92,255,.35);}
html.neon .about-tl-dot{background:#0c0d1c;border-color:#ffc94d;color:#ffc94d;box-shadow:0 0 12px rgba(255,201,77,.35);}
html.neon .about-tl-item p{color:#a6aed8;}
html.neon .about-tl-item p strong{color:#fff;}
html.neon .about-side-block + .about-side-block{border-top-color:rgba(125,140,255,.18);}
html.neon .about-side-label{--nc:127,243,228;display:flex;align-items:center;gap:12px;color:#f2fffd;letter-spacing:.14em;
  text-shadow:0 0 2px rgba(var(--nc),.95),0 0 8px rgba(var(--nc),.85),0 0 18px rgba(var(--nc),.6),0 0 34px rgba(var(--nc),.4);}
html.neon .about-side-block:nth-child(2) .about-side-label{--nc:255,160,80;color:#fff4ea;}

@media (min-width:901px){html.neon .about-side-label{font-size:14px;}}
html.neon .about-expertise-pill,html.neon .about-lang-pill{
  background:#12132a;border-color:rgba(125,140,255,.18);color:#e6e8ff;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.6),0 0 0 0 rgba(0,0,0,0),inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 0 0 rgba(0,0,0,0);
}
html.neon .about-lang-pill{color:color-mix(in srgb,var(--sc) 45%,#fff 55%);}
html.neon .about-expertise-bar{background:rgba(125,140,255,.14);}
html.neon .about-expertise-icon,html.neon .about-lang-icon{background:color-mix(in srgb,var(--sc) 24%,#0c0d1c);color:color-mix(in srgb,var(--sc) 45%,#fff);}

/* PetPal hero (transparent video): a thin cream "sticker" outline so the brown linework and the logo read on the dark page */
html.neon .prologue-scene .hero-cover-img{
  filter:drop-shadow(0 0 1.2px rgba(255,238,214,.95)) drop-shadow(0 0 1px rgba(255,238,214,.7));
}
/* PetPal wordmark, night mode: the handwritten "PetPal" baked into the hero video is masked out in night mode and replaced by
   its own outline drawn as a neon tube (same shapes, so it keeps the original curve). Both changes cross-fade when the theme
   switches: the hole in the video mask opens through the registered number --hv, and the tube fades in as opacity. The overlay
   box is always present and uses the same box and rise animation as the video, so it never replays on a theme switch. */
@property --hv{syntax:'<number>';inherits:false;initial-value:0;}
html .prologue-scene .hero-cover-img{
  --hv:0;transition:--hv .6s ease,filter .5s ease;
  /* hole in video coords (1280x720): x 420-850, y 50-183, plus x 420-520, y 183-205. Layers: feather x, feather y, then the
     "keep" zones added together (base fades the hole, left, right, top, bottom, and the lower right quadrant) */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%),
    linear-gradient(rgba(0,0,0,calc(1 - var(--hv))),rgba(0,0,0,calc(1 - var(--hv)))),
    linear-gradient(to right,#000 32.8%,transparent 32.8%),
    linear-gradient(to right,transparent 66.4%,#000 66.4%),
    linear-gradient(to bottom,#000 6.9%,transparent 6.9%),
    linear-gradient(to bottom,transparent 28.5%,#000 28.5%),
    conic-gradient(from 90deg at 40.6% 25.4%,#000 0deg 90deg,transparent 90deg);
  mask-image:
    linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%),
    linear-gradient(rgba(0,0,0,calc(1 - var(--hv))),rgba(0,0,0,calc(1 - var(--hv)))),
    linear-gradient(to right,#000 32.8%,transparent 32.8%),
    linear-gradient(to right,transparent 66.4%,#000 66.4%),
    linear-gradient(to bottom,#000 6.9%,transparent 6.9%),
    linear-gradient(to bottom,transparent 28.5%,#000 28.5%),
    conic-gradient(from 90deg at 40.6% 25.4%,#000 0deg 90deg,transparent 90deg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in,source-in,source-over,source-over,source-over,source-over,source-over,source-over;
  mask-composite:intersect,intersect,add,add,add,add,add,add;
}
html.neon .prologue-scene .hero-cover-img{--hv:1;}
.neon-wordmark{
  display:flex;justify-content:center;align-items:flex-end;
  position:absolute;left:0;right:0;bottom:16px;z-index:2;pointer-events:none;
}
.nwm-box{
  position:relative;flex:none;width:146%;max-width:1376px;aspect-ratio:16/9;
  opacity:0;transform:translateY(40px) scale(.9);
  animation:riseIn 1.3s cubic-bezier(.16,1,.3,1) forwards 1.35s;
}
.nwm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .6s ease;}
html.neon .nwm-svg{opacity:1;}
.nwm-svg path{fill:none;stroke-width:2.6;stroke-linejoin:round;}
.nwm-pet{--lc:46,242,224;stroke:#a6fbf3;
  filter:drop-shadow(0 0 3px rgba(var(--lc),.8)) drop-shadow(0 0 12px rgba(var(--lc),.45)) drop-shadow(0 0 26px rgba(var(--lc),.2));}
.nwm-pal{--lc:255,140,60;stroke:#ffcaa3;
  filter:drop-shadow(0 0 3px rgba(var(--lc),.8)) drop-shadow(0 0 12px rgba(var(--lc),.45)) drop-shadow(0 0 26px rgba(var(--lc),.2));}
@media (max-width:860px){.nwm-box{width:146%;max-width:470px;}}
html.neon .prologue-scene .ground{
  background:radial-gradient(ellipse at center,rgba(255,232,200,.16),transparent 70%);
  filter:blur(18px);opacity:1;
}
/* Safari plays the white-background MP4 multiplied into the page; give it a soft warm stage to sit on in dark mode */
html.neon.safari-blend .prologue-scene .hero-cover-img{filter:brightness(1.008);}
html.neon.safari-blend .prologue-scene::before{
  content:"";position:absolute;left:50%;bottom:16px;width:146%;max-width:1376px;aspect-ratio:16/9;transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 50% at 50% 50%,#f6eddc 0%,#f6eddc 70%,rgba(246,237,220,0) 100%);
  z-index:0;pointer-events:none;
}

/* PetPal opening / closing transitions: the paper doors were drawn for a light page. In dark mode a paper backdrop
   fades in with the scene, so the door seam and the fade look exactly like they do in light mode. */
.pp-paper{position:absolute;inset:0;z-index:0;background:#faf9f4;opacity:0;pointer-events:none;display:none;}
html.neon .pp-paper{display:block;}

/* ===== Audit fixes ===== */
/* Transparent character art with dark linework: a thin cream sticker edge so it doesn't sink into the dark page */
html.neon .about-photo-card img,
html.neon img.char-img,
html.neon img[src*="-cutout"],
html.neon .pp-modal-img{
  filter:drop-shadow(0 0 1.2px rgba(255,238,214,.9)) drop-shadow(0 0 1px rgba(255,238,214,.6));
}
/* Floracracy principle icons are drawn as light tiles: keep them as light tiles */
html.neon .principle-icon img{background:#f3f1ea;border-radius:10px;}
/* PetPal family cards: small light chips with dark text (inline colours) flip to dark chips, same hue */
html.neon .family-card span[style*="background"]{filter:invert(1) hue-rotate(180deg);}
/* PetPal companion modal: header colour is set by script; keep the coloured plate behind the pet, darken the panel */
html.neon .pp-modal-hero{background:#14152e !important;}
html.neon .pp-modal-tags span{filter:invert(1) hue-rotate(180deg);}

/* ===== Sunset (to night) / sunrise (to day), about 1.9s, desktop only =====
   "blue hour": a faint band drifts from the site's sage green through teal and indigo into night; the only warm
   colour is a small sun glow at the bottom right, the sun sinks at the
   round button and a half moon rises just above it. Only opacity and transform animate. */
.neon-sky{position:fixed;inset:0;z-index:115;pointer-events:none;overflow:hidden;}
.neon-sky > *{position:absolute;will-change:transform,opacity;}
.neon-sky .s-warm{inset:0;opacity:0;background:radial-gradient(38% 34% at 100% 100%,rgba(255,180,110,.20) 0%,rgba(255,170,120,.08) 45%,rgba(255,170,120,0) 80%);}
.neon-sky.down .s-warm{animation:nsWarmDusk 1.9s cubic-bezier(.65,0,.35,1) forwards;}
.neon-sky.up .s-warm{animation:nsWarmDawn 1.9s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes nsWarmDusk{0%{opacity:0;}25%{opacity:1;}60%{opacity:.7;}100%{opacity:0;}}
@keyframes nsWarmDawn{0%{opacity:0;}45%{opacity:.4;}75%{opacity:1;}100%{opacity:0;}}
.neon-sky .s-band{left:0;right:0;height:240vh;top:-240vh;
  background:linear-gradient(to bottom,rgba(200,224,212,0) 0%,rgba(170,206,192,.14) 16%,rgba(110,178,170,.18) 32%,
    rgba(70,140,160,.18) 48%,rgba(60,90,150,.16) 64%,rgba(36,40,100,.12) 82%,rgba(9,10,20,0) 100%);}
.neon-sky.down .s-band{animation:nsBandDown 1.9s cubic-bezier(.65,0,.35,1) forwards,nsBandFade 1.9s linear forwards;}
.neon-sky.up .s-band{top:100vh;animation:nsBandUp 1.9s cubic-bezier(.65,0,.35,1) forwards,nsBandFade 1.9s linear forwards;
  background:linear-gradient(to top,rgba(200,224,212,0) 0%,rgba(170,206,192,.14) 16%,rgba(110,178,170,.18) 32%,
    rgba(70,140,160,.18) 48%,rgba(60,90,150,.16) 64%,rgba(36,40,100,.12) 82%,rgba(9,10,20,0) 100%);}
@keyframes nsBandDown{to{transform:translate3d(0,340vh,0);}}
@keyframes nsBandUp{to{transform:translate3d(0,-340vh,0);}}
/* the band's tint fades out as it travels, so the page doesn't keep a teal cast at the bottom after the colours have settled and then darken in a last, late step */
@keyframes nsBandFade{0%,35%{opacity:1;}100%{opacity:0;}}
/* sun: centred on the round button (42px, 22px from the corner) */
.neon-sky .s-sun{right:calc(46px - 14vmin);top:calc(100vh - 46px - 14vmin);width:28vmin;height:28vmin;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,224,160,.6) 0%,rgba(255,168,96,.38) 32%,rgba(240,112,72,.13) 56%,rgba(240,112,72,0) 72%);filter:blur(4px);}
.neon-sky.down .s-sun{animation:nsSunSet 1.9s cubic-bezier(.65,0,.35,1) forwards;}
.neon-sky.up .s-sun{animation:nsSunRise 1.9s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes nsSunSet{0%{transform:translate3d(0,0,0) scale(.92);opacity:0;}15%{opacity:1;}
  55%{transform:translate3d(0,8vmin,0) scale(1);opacity:.9;filter:blur(4px) saturate(1.3) hue-rotate(-8deg);}
  85%{opacity:0;}100%{transform:translate3d(0,24vmin,0) scale(1.04);opacity:0;}}
@keyframes nsSunRise{0%,40%{transform:translate3d(0,24vmin,0) scale(1.04);opacity:0;}
  75%{transform:translate3d(0,3vmin,0) scale(1);opacity:1;}100%{transform:translate3d(0,0,0) scale(.95);opacity:0;}}
/* half moon: just above the button */
.neon-sky .s-moon{right:calc(46px - 7.5vmin);top:calc(100vh - 46px - 55px - 7.5vmin);width:15vmin;height:15vmin;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(200,215,255,.32) 0%,rgba(170,190,250,.16) 34%,rgba(150,170,240,0) 68%);}
.neon-sky .s-moon::after{content:"";position:absolute;left:50%;top:50%;width:4.6vmin;height:4.6vmin;margin:-2.3vmin 0 0 -2.3vmin;border-radius:50%;
  background:radial-gradient(circle at 38% 40%,#fbfcff 0%,#e3e9ff 55%,#c9d3f5 100%);box-shadow:0 0 12px rgba(220,230,255,.5);
  -webkit-mask-image:radial-gradient(circle at 78% 30%,transparent 0,transparent 46%,#000 48%);
  mask-image:radial-gradient(circle at 78% 30%,transparent 0,transparent 46%,#000 48%);transform:rotate(-12deg);}
.neon-sky.down .s-moon{animation:nsMoonRise 1.9s cubic-bezier(.65,0,.35,1) forwards;}
.neon-sky.up .s-moon{animation:nsMoonSet 1.9s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes nsMoonRise{0%,48%{transform:translate3d(0,9vmin,0) scale(.86);opacity:0;}
  85%{transform:translate3d(0,0,0) scale(1);opacity:1;}100%{transform:translate3d(0,0,0) scale(1);opacity:0;}}
@keyframes nsMoonSet{0%{transform:translate3d(0,0,0) scale(1);opacity:1;}40%{transform:translate3d(0,9vmin,0) scale(.86);opacity:0;}100%{opacity:0;}}
/* colour wash for the middle of the switch: the page cross-fades from cream to near black and passes through a flat grey, so a soft
   tint is laid over that moment. Going dark it is a dusk indigo, going back to light a warm dawn rose. It peaks with the surfaces
   (about the middle) and is gone before the switch ends. */
.neon-sky .s-dusk{inset:0;opacity:0;}
.neon-sky.down .s-dusk{background:linear-gradient(180deg,rgba(104,92,190,.36) 0%,rgba(84,72,170,.34) 50%,rgba(52,44,126,.36) 100%);animation:nsDusk 1.9s cubic-bezier(.5,0,.5,1) forwards;}
.neon-sky.up .s-dusk{background:linear-gradient(180deg,rgba(255,196,160,.30) 0%,rgba(255,186,168,.28) 50%,rgba(250,208,176,.28) 100%);animation:nsDusk 1.9s cubic-bezier(.5,0,.5,1) forwards;}
@keyframes nsDusk{0%{opacity:0;}20%{opacity:.2;}42%{opacity:1;}62%{opacity:.85;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.neon-sky{display:none;}}

/* PetPal hero (prologue): its soft cream glow is a gradient, which can't fade, so in dark mode it snapped and
   turned into a brown blob. The glow now lives on one layer over a plain background colour: identical by day,
   and at night the background fades to dark while the glow layer fades out at the same pace. */
.prologue{background:var(--bg) !important;}
.prologue::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,#f5e8c8 0%,rgba(245,232,200,0) 62%);
}
html.neon .prologue::after{opacity:0;}

/* PetPal sections with soft gradient washes (gradients can't fade, so they snapped and went brown at night):
   the washes keep their daytime colours and simply fade out at night, at the same pace as the page. */
.level-wash,.char-ground{--accent-soft:#f5e8c8;--bg-alt:#e9f1ec;}
html.neon .level-wash{opacity:0 !important;}
html.neon .char-ground{opacity:.1 !important;}
.final-level,.epilogue,.proto-panel{isolation:isolate;}
.final-level{background:var(--bg) !important;}
.final-level::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,253,246,0) 0%,#fffdf6 100%);}
.epilogue{background:var(--bg) !important;}
.epilogue::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%,#f5e8c8 0%,rgba(245,232,200,0) 65%);}
.proto-panel{background:var(--bg) !important;}
.proto-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,#fffdf6 0%,rgba(255,253,246,0) 100%);}
html.neon .final-level::after,html.neon .epilogue::after,html.neon .proto-panel::after{opacity:0;}
html.neon .proto-panel{background:var(--card) !important;}

/* PetPal opening / closing scenes at night: the daytime landscape is darkened to a near-black night (it starts at
   the page colour so the top blends into the page, with a faint warm lift at the ground so the road still reads)
   with a multiply layer over the scene, so it no longer flashes bright on a dark page. */
.pp-dusk{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  background:linear-gradient(180deg,#090a14 0%,#0e1020 34%,#343850 58%,#505272 70%,#686a8c 80%,#8584a6 90%,#a09ebc 100%);}
html.neon .pp-dusk{opacity:1;}
/* A multiply layer only blends with what is inside its own stacking context (the sticky scene). Once the scene
   fades out there is nothing left in there, so the night gradient showed up on its own as a pale band, and fading the
   layer with the scene instead washed the whole scene out to grey. Give the scene a solid floor: the night layer then
   always multiplies with something. The floor is the page colour divided by the night gradient, row by row, so that
   floor x night layer comes out exactly as the page colour (white at the top where the layer is darkest, nearly
   black at the bottom where it is brightest), and the scene can fade to the plain page without a visible edge. */
html.neon .opening-sticky,html.neon .closing-sticky{
  background:linear-gradient(180deg,#ffffff 0%,#efeeee 4%,#e2dfdf 8%,#d5d2d2 12%,#cac7c7 16%,#c0bcbc 20%,#b7b3b3 24%,#afabab 28%,#a7a3a3 32%,#86848e 36%,#626274 40%,#4d4e62 44%,#3f4155 48%,#36374b 52%,#2f3043 56%,#292a3c 60%,#232535 64%,#1e212f 68%,#1b1d2b 72%,#181a27 76%,#161824 80%,#141622 84%,#121420 88%,#11131e 92%,#0f111c 96%,#0e101b 100%);}
/* Behind the hills there is a plain cream paper (and the cream background image). With the bottom of the night layer
   left bright, that paper showed through as a pale band whenever no hills were on screen yet. Make the paper and the
   background image (almost) black, so where no hills are on screen the scene is black, and only the hills themselves
   carry the colours of the original picture. */
html.neon .pp-paper{background:#0b0c17;}
html.neon .closing-bg img{filter:brightness(.14);}
/* (The halves now meet along a straight, filled edge, so the pale seam strip that used to hide the old jagged edge is gone.)
   Opening: the two halves of the landscape overlap and meet along a soft, jagged edge, and through that soft edge the
   background shows. In the day version that is cream on cream, so the seam is invisible. With the background dimmed
   it became a dark crack. So keep the background at full brightness along the seam only, and dim it everywhere else. */
html.neon .opening-bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(10,11,22,.86);
}
/* (--nx-seam goes 0 to 1 with the scroll, set by the page script: 0 keeps the strip along the seam bright, 1 dims it
   like the rest, so no pale column is left standing in the middle. It is one layer, so there are no pale edges.) */
/* Scene text ("Let's start exploring!", "To be continued..."): white on the dark scene. The opening text sat under
   the night layer (so it was darkened too); lift it above, like the closing text already is. */
html.neon .opening-content-reveal{z-index:7;}
html.neon .opening-content-reveal .level-tag,html.neon .closing-content-reveal .level-tag{color:#fff;}
html.neon .opening-content-reveal .level-tag::before,html.neon .closing-content-reveal .level-tag::before{background:#fff;}
html.neon .opening-teaser,html.neon .closing-teaser{color:#fff;}
/* Opening and closing text: the exact nav logo treatment (hollow neon tube lettering, 1.3px stroke plus layered glow).
   Hollow letters need body, so the weight is 800. Sizes are the same as the day version. Opacity and
   transform are animated by the page script, so only the look is set here. */
html.neon .opening-content-reveal .level-tag,html.neon .closing-content-reveal .level-tag,
html.neon .opening-teaser,html.neon .closing-teaser{
  color:transparent;font-family:'Nunito',sans-serif;font-weight:800;
  -webkit-text-stroke:1.3px rgb(var(--lc));
  filter:drop-shadow(0 0 3px rgba(var(--lc),.7)) drop-shadow(0 0 10px rgba(var(--lc),.35)) drop-shadow(0 0 22px rgba(var(--lc),.15));
}
html.neon .opening-content-reveal .level-tag,html.neon .closing-content-reveal .level-tag{--lc:255,140,60;text-shadow:none;}
html.neon .opening-content-reveal .level-tag::before,html.neon .closing-content-reveal .level-tag::before{
  background:#ff8c3c;box-shadow:0 0 6px rgba(var(--lc),.95),0 0 14px rgba(var(--lc),.6);
}
html.neon .opening-teaser,html.neon .closing-teaser{--lc:255,244,224;text-shadow:none;}
/* The night multiply layer sat on top of the clouds and turned them black. Lift the clouds above it and dim them
   to moonlit grey-blue instead (the dimming is on the image, because the script animates the cloud element). */
html.neon .opening-cloud,html.neon .closing-cloud{z-index:6;}
html.neon .opening-cloud img,html.neon .closing-cloud img{filter:brightness(.66) saturate(.55) hue-rotate(205deg);}
/* The door-seam light is a beige beam in the day version; at night it read as a muddy stripe on the black scene.
   Make it a soft moonlight blue-violet glow (the neon accent colour) that also fades out at the top and bottom (its opacity is driven by the
   page script, so only the colour and shape change here). */
html.neon .opening-glow,html.neon .closing-glow{
  background:radial-gradient(ellipse 70px 60% at center,rgba(130,148,255,.42) 0%,rgba(130,148,255,.14) 45%,rgba(130,148,255,0) 72%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%);
}

/* ===== PetPal neon (night) =====
   Each level gets its own tube colour (--lv). It is defined by day too so nothing pops: the night pieces below are
   either plates that fade in with opacity or plain colours, glows and rings that transition. Light mode is untouched. */
.level-section[data-level="01"]{--lv:#7d8cff;}
.level-section[data-level="02"]{--lv:#ffb454;}
.level-section[data-level="03"]{--lv:#ffd24d;}
.level-section[data-level="04"]{--lv:#b79cff;}
.level-section[data-level="05"]{--lv:#ff9a5a;}
.level-section[data-level="06"]{--lv:#ff6fae;}
.level-section[data-level="07"]{--lv:#2ef2e0;}
.level-section[data-level="08"]{--lv:#8fb0ff;}
.epilogue{--lv:#ff8a5c;}

/* a soft aurora of the level colour in the corners (plate: day opacity 0, night 1) */
.level-section::before,.epilogue::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(60% 55% at 6% 40%,color-mix(in srgb,var(--lv) 17%,transparent),transparent 72%),
    radial-gradient(45% 50% at 100% 100%,color-mix(in srgb,var(--lv) 9%,transparent),transparent 72%);
}
html.neon .level-section::before,html.neon .epilogue::before{opacity:0;}

/* level tag is a lit tube, heading gets a faint halo */
html.neon .level-tag{color:var(--lv);text-shadow:0 0 10px color-mix(in srgb,var(--lv) 70%,transparent);}
html.neon .level-tag::before{background:var(--lv);box-shadow:0 0 8px var(--lv);}
html.neon .level-h2{text-shadow:0 0 26px color-mix(in srgb,var(--lv) 30%,transparent);}

/* cards: thin tube ring plus a soft glow, brighter on hover */
html.neon .info-card{--c:var(--lv);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 38%,transparent),0 0 22px -5px color-mix(in srgb,var(--c) 28%,transparent);}
html.neon .info-card:hover{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 72%,transparent),0 0 30px -3px color-mix(in srgb,var(--c) 45%,transparent);}
html.neon .info-card .ic-icon{box-shadow:0 0 0 1px color-mix(in srgb,var(--lv) 50%,transparent),0 0 12px color-mix(in srgb,var(--lv) 40%,transparent);}

html.neon .discovery-card{--c:var(--d-accent,var(--lv));
  border-color:color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 0 22px -6px color-mix(in srgb,var(--c) 38%,transparent);}
html.neon .discovery-card:hover{
  border-color:color-mix(in srgb,var(--c) 80%,transparent);
  box-shadow:0 0 32px -4px color-mix(in srgb,var(--c) 52%,transparent);}
html.neon .discovery-card .d-icon{box-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent);}

html.neon .ps-body{--c:var(--p-accent,var(--lv));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 0 24px -6px color-mix(in srgb,var(--c) 32%,transparent);}
html.neon .principle-station:hover .ps-body{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 75%,transparent),0 0 32px -3px color-mix(in srgb,var(--c) 48%,transparent);}
html.neon .ps-icon{border-color:color-mix(in srgb,var(--p-accent,var(--lv)) 70%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--p-accent,var(--lv)) 55%,transparent);}

html.neon .family-card{--c:var(--lv);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 22px -5px color-mix(in srgb,var(--c) 34%,transparent);}
html.neon .family-card:hover{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 85%,transparent),0 0 32px -2px color-mix(in srgb,var(--c) 52%,transparent);}
html.neon .family-card[data-pet="mochi"]{--c:#ffb454;}
html.neon .family-card[data-pet="sugar"]{--c:#ff8fc0;}
html.neon .family-card[data-pet="bao"]{--c:#7be0b0;}
html.neon .family-card[data-pet="pudding"]{--c:#ffd24d;}

html.neon .key-takeaway{border-color:rgba(255,201,77,.6);
  box-shadow:0 0 0 1px rgba(255,201,77,.18),0 0 26px -4px rgba(255,201,77,.32);}
html.neon .key-takeaway .kt-label{text-shadow:0 0 10px rgba(255,201,77,.7);}
html.neon .key-takeaway .kt-icon{box-shadow:0 0 14px rgba(255,201,77,.5);}

html.neon .stat-chip{--c:var(--chip-color,var(--lv));
  border-color:color-mix(in srgb,var(--c) 75%,transparent);
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--c) 45%,transparent);}
html.neon .stat-chip span{text-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent);}

html.neon .trait-chip{border-left-color:color-mix(in srgb,var(--lv) 35%,transparent);}
html.neon .trait-icon{--c:var(--t-accent,var(--lv));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 0 12px color-mix(in srgb,var(--c) 42%,transparent);}

/* journey */
html.neon .journey-nodes::after{background:color-mix(in srgb,var(--lv) 45%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--lv) 55%,transparent);}
html.neon .journey-node .n-dot{--c:#ffb454;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent),0 0 16px color-mix(in srgb,var(--c) 65%,transparent);}
html.neon .journey-node:nth-child(2) .n-dot{--c:#b79cff;}
html.neon .journey-node:nth-child(3) .n-dot{--c:#6ee7a8;}
html.neon .journey-node:last-child .n-dot{--c:#ffd24d;}

/* panels */
html.neon .wireframe-panel{border-color:color-mix(in srgb,var(--lv) 55%,transparent);
  box-shadow:0 0 26px -6px color-mix(in srgb,var(--lv) 40%,transparent);}
html.neon .proto-panel{border-color:color-mix(in srgb,var(--lv) 65%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lv) 18%,transparent),0 0 40px -8px color-mix(in srgb,var(--lv) 50%,transparent);}
html.neon .proto-panel-label,html.neon .proto-panel-meta .pm-expand{text-shadow:0 0 10px color-mix(in srgb,var(--lv) 60%,transparent);}

/* takeaway + epilogue numbers, bars, roadmap */
html.neon .tw-item{border-left-color:color-mix(in srgb,var(--lv) 35%,transparent);}
html.neon .tw-num{color:color-mix(in srgb,var(--lv) 75%,#fff);text-shadow:0 0 14px color-mix(in srgb,var(--lv) 55%,transparent);}
html.neon .fb-stats{border-top-color:rgba(255,138,92,.3);}
html.neon .fb-stat{border-left-color:rgba(255,138,92,.3);}
html.neon .fb-num{color:#ff9a6c;text-shadow:0 0 16px rgba(255,138,92,.6);}
html.neon .fb-bar{background:rgba(125,140,255,.12);}
html.neon .fb-bar-fill{background:#ff8a5c;box-shadow:0 0 12px 1px rgba(255,138,92,.75);}
html.neon .fb-quote{box-shadow:0 0 0 1px rgba(255,138,92,.22),0 0 20px -6px rgba(255,138,92,.25);}
html.neon .rm-step.done .rm-dot{box-shadow:0 0 0 4px rgba(255,138,92,.2),0 0 16px rgba(255,138,92,.7);}
html.neon .rm-step.done .rm-line{box-shadow:0 0 8px rgba(255,138,92,.7);}
html.neon .rm-step.active .rm-dot{box-shadow:0 0 14px rgba(255,138,92,.55);}
html.neon .rm-badge.done{box-shadow:0 0 12px -2px rgba(112,235,156,.45);}
html.neon .rm-badge.active{border-color:rgba(255,138,92,.7);box-shadow:0 0 12px -2px rgba(255,138,92,.5);}
html.neon .sustain-card{border-color:rgba(255,138,92,.4);box-shadow:0 0 30px -8px rgba(255,138,92,.35);}

/* epilogue buttons: same plate recipe as the nav chips and the home buttons */
.sustain-cta{position:relative;isolation:isolate;--nn:255,150,90;}
.sustain-cta.cream{--nn:46,242,224;}
.sustain-cta::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(140% 130% at 30% 0%,rgba(var(--nn),.26),transparent 62%),
    linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),.85),
    0 0 14px 1px rgba(var(--nn),.5),
    0 0 34px 3px rgba(var(--nn),.24),
    inset 0 0 12px rgba(var(--nn),.34),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:box-shadow .3s ease;
}
html.neon .sustain-cta::before{opacity:1;}
html.neon .sustain-cta:hover::before{
  box-shadow:0 0 0 1.5px rgba(var(--nn),1),0 0 20px 2px rgba(var(--nn),.7),0 0 46px 6px rgba(var(--nn),.34),
    inset 0 0 16px rgba(var(--nn),.5),inset 0 1px 0 rgba(255,255,255,.2);}
/* keep each day fill underneath so day and night cross-fade, and let the plate cover it */
html.neon .sustain-cta{border-color:transparent;box-shadow:none;text-shadow:0 0 10px rgba(var(--nn),.85);color:#ffe9dc;}
html.neon .sustain-cta:hover{border-color:transparent;box-shadow:none;color:#fff;}
html.neon .sustain-cta.filled,html.neon .sustain-cta.filled:hover{background:linear-gradient(180deg,#d9784a,#c9683f);box-shadow:none;color:#ffe9dc;}
html.neon .sustain-cta.cream,html.neon .sustain-cta.cream:hover{background:linear-gradient(160deg,#fbf3e4 0%,#f2e2c3 100%);box-shadow:none;color:#d9fffb;}
html.neon .zodiac-item{--c:var(--lv);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 0 22px -6px color-mix(in srgb,var(--c) 32%,transparent);}
html.neon .zodiac-item:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 75%,transparent),0 0 32px -3px color-mix(in srgb,var(--c) 48%,transparent);}

/* ---- brighter cards: lit glass plates with a hot ring, an outer glow and a soft inner glow ---- */
html.neon .principle-station:nth-child(1){--c:#ffb454;}
html.neon .principle-station:nth-child(2){--c:#b79cff;}
html.neon .principle-station:nth-child(3){--c:#4ff0b0;}
html.neon .ps-body{--c:inherit;
  background-color:color-mix(in srgb,var(--c) 13%,#0d0f24);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 85%,transparent),0 0 20px 0 color-mix(in srgb,var(--c) 50%,transparent),
    0 0 48px -2px color-mix(in srgb,var(--c) 26%,transparent),inset 0 0 26px color-mix(in srgb,var(--c) 20%,transparent);}
html.neon .principle-station:hover .ps-body{
  box-shadow:0 0 0 1.5px var(--c),0 0 28px 2px color-mix(in srgb,var(--c) 70%,transparent),
    0 0 64px 2px color-mix(in srgb,var(--c) 36%,transparent),inset 0 0 34px color-mix(in srgb,var(--c) 30%,transparent);}
html.neon .ps-icon{color:var(--c);border-color:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 0 20px 1px color-mix(in srgb,var(--c) 75%,transparent),
    0 0 40px color-mix(in srgb,var(--c) 30%,transparent),inset 0 0 12px color-mix(in srgb,var(--c) 28%,transparent);}
html.neon .ps-icon svg{filter:drop-shadow(0 0 5px var(--c));}
html.neon .ps-num{color:var(--c);opacity:1;text-shadow:0 0 14px var(--c),0 0 30px color-mix(in srgb,var(--c) 55%,transparent);}
html.neon .ps-label{color:#fff;text-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent);}
html.neon .ps-body p{color:#d9dcf5;}
html.neon .ps-star{color:var(--c);opacity:1;filter:drop-shadow(0 0 5px var(--c));}

html.neon .info-card{
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent),0 0 20px 0 color-mix(in srgb,var(--c) 40%,transparent),
    0 0 44px -4px color-mix(in srgb,var(--c) 20%,transparent),inset 0 0 22px color-mix(in srgb,var(--c) 14%,transparent);}
html.neon .info-card:hover{
  box-shadow:0 0 0 1.5px var(--c),0 0 28px 2px color-mix(in srgb,var(--c) 62%,transparent),
    0 0 60px 0 color-mix(in srgb,var(--c) 30%,transparent),inset 0 0 30px color-mix(in srgb,var(--c) 22%,transparent);}
html.neon .discovery-card{
  border-color:color-mix(in srgb,var(--c) 80%,transparent);
  box-shadow:0 0 20px 0 color-mix(in srgb,var(--c) 40%,transparent),0 0 44px -4px color-mix(in srgb,var(--c) 20%,transparent),
    inset 0 0 22px color-mix(in srgb,var(--c) 14%,transparent);}
html.neon .discovery-card:hover{
  border-color:var(--c);
  box-shadow:0 0 28px 2px color-mix(in srgb,var(--c) 62%,transparent),0 0 60px 0 color-mix(in srgb,var(--c) 30%,transparent),
    inset 0 0 30px color-mix(in srgb,var(--c) 22%,transparent);}
html.neon .family-card{
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 80%,transparent),0 0 22px 0 color-mix(in srgb,var(--c) 48%,transparent),
    0 0 48px -4px color-mix(in srgb,var(--c) 24%,transparent);}
html.neon .family-card:hover{
  box-shadow:0 0 0 1.5px var(--c),0 0 30px 2px color-mix(in srgb,var(--c) 68%,transparent),
    0 0 64px 0 color-mix(in srgb,var(--c) 34%,transparent);}
html.neon .zodiac-item{
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent),0 0 20px 0 color-mix(in srgb,var(--c) 40%,transparent),
    0 0 44px -4px color-mix(in srgb,var(--c) 20%,transparent);}
html.neon .zodiac-item:hover{
  box-shadow:0 0 0 1.5px var(--c),0 0 28px 2px color-mix(in srgb,var(--c) 62%,transparent),
    0 0 60px 0 color-mix(in srgb,var(--c) 30%,transparent);}

/* ---- Prologue (opening screen): no frame around the copy, the accents are the neon ---- */
html.neon .prologue .kicker-line{background:#ffc94d;box-shadow:0 0 10px 1px rgba(255,201,77,.8);}
html.neon .prologue .kicker{text-shadow:0 0 12px rgba(255,201,77,.65);}
html.neon .prologue h1{text-shadow:0 0 30px rgba(125,140,255,.38);}
html.neon .prologue-meta{border-top-color:rgba(46,242,224,.85);
  filter:drop-shadow(0 0 5px rgba(46,242,224,.55)) drop-shadow(0 0 14px rgba(125,140,255,.28));}
html.neon .prologue-meta .m-item:nth-child(odd){border-right-color:rgba(125,140,255,.85);}
html.neon .prologue-meta .m-item:nth-child(n+3){border-top-color:rgba(255,95,207,.8);}
html.neon .prologue-meta b{--m:#d9fffb;color:var(--m);text-shadow:0 0 10px color-mix(in srgb,var(--m) 70%,transparent);}
html.neon .prologue-meta .m-item:nth-child(1) b{--m:#2ef2e0;}
html.neon .prologue-meta .m-item:nth-child(2) b{--m:#9aa8ff;}
html.neon .prologue-meta .m-item:nth-child(3) b{--m:#ff6fd2;}
html.neon .prologue-meta .m-item:nth-child(4) b{--m:#ffc94d;}

/* ===== Homepage cards, same lit-glass recipe as the PetPal cards (night) =====
   Each card gets its own tube colour (--c). Night shadow lists keep the day slot order (outer, outer, inset, inset)
   so day and night cross-fade; the ring is the border colour. Light mode is untouched. */
html.neon .project-card{--c:#ffb454;
  background-color:color-mix(in srgb,var(--c) 7%,var(--card));
  border-color:color-mix(in srgb,var(--c) 75%,transparent);
  box-shadow:0 0 22px 0 color-mix(in srgb,var(--c) 42%,transparent),0 0 48px -4px color-mix(in srgb,var(--c) 20%,transparent),
    inset 0 0 26px color-mix(in srgb,var(--c) 12%,transparent),inset 0 0 0 0 transparent;}
html.neon .project-card:hover{border-color:var(--c);
  box-shadow:0 0 32px 2px color-mix(in srgb,var(--c) 62%,transparent),0 0 70px 0 color-mix(in srgb,var(--c) 30%,transparent),
    inset 0 0 36px color-mix(in srgb,var(--c) 20%,transparent),inset 0 0 0 0 transparent;}
html.neon .project-card.pc-petpal{--c:#ffb454;}
html.neon .project-card.pc-firstcover{--c:#b79cff;}
html.neon .project-card.pc-floracracy{--c:#4ff0b0;}
html.neon .project-card.pc-bonvoyage{--c:#ff6fae;}
html.neon .project-card.pc-voluntopia{--c:#2ef2e0;}
html.neon .project-card .tag{color:color-mix(in srgb,var(--c) 55%,#fff);background:color-mix(in srgb,var(--c) 16%,#0b0d19);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent);}
html.neon .project-card .project-title{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent);}
html.neon .project-card .project-desc{color:#c9cdee;}
html.neon .project-card .project-link{color:var(--c);text-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent);}
html.neon .project-card.pc-petpal:hover .project-title,html.neon .project-card.pc-firstcover:hover .project-title,
html.neon .project-card.pc-floracracy:hover .project-title,html.neon .project-card.pc-bonvoyage:hover .project-title,
html.neon .project-card.pc-voluntopia:hover .project-title{color:#fff;}

html.neon .g-card{--c:#ffc94d;
  border-color:color-mix(in srgb,var(--c) 75%,transparent);
  box-shadow:0 0 20px 0 color-mix(in srgb,var(--c) 42%,transparent),0 0 44px -4px color-mix(in srgb,var(--c) 20%,transparent),
    inset 0 0 22px color-mix(in srgb,var(--c) 14%,transparent),inset 0 0 0 0 transparent;}
html.neon .g-card:hover{border-color:var(--c);
  box-shadow:0 0 30px 2px color-mix(in srgb,var(--c) 62%,transparent),0 0 64px 0 color-mix(in srgb,var(--c) 30%,transparent),
    inset 0 0 30px color-mix(in srgb,var(--c) 22%,transparent),inset 0 0 0 0 transparent;}
html.neon .g-card:nth-child(1){--c:#ffc94d;}
html.neon .g-card:nth-child(2){--c:#ff6fae;}
html.neon .g-card:nth-child(3){--c:#b79cff;}
html.neon .g-card:nth-child(4){--c:#2ef2e0;}
html.neon .g-card-title{text-shadow:0 1px 10px rgba(0,0,0,.6),0 0 14px color-mix(in srgb,var(--c) 55%,transparent);}

html.neon .side-card{--c:#2ef2e0;
  background-color:color-mix(in srgb,var(--c) 7%,var(--card));
  border-color:color-mix(in srgb,var(--c) 75%,transparent);
  box-shadow:0 0 22px 0 color-mix(in srgb,var(--c) 40%,transparent),0 0 48px -4px color-mix(in srgb,var(--c) 20%,transparent),
    inset 0 0 26px color-mix(in srgb,var(--c) 12%,transparent),inset 0 0 0 0 transparent;}
html.neon .side-card:nth-child(n):hover{border-color:var(--c);
  box-shadow:0 0 32px 2px color-mix(in srgb,var(--c) 62%,transparent),0 0 70px 0 color-mix(in srgb,var(--c) 30%,transparent),
    inset 0 0 36px color-mix(in srgb,var(--c) 20%,transparent),inset 0 0 0 0 transparent;}
html.neon .side-card:nth-child(1){--c:#2ef2e0;}
html.neon .side-card:nth-child(2){--c:#ffc94d;}
html.neon .side-card:nth-child(3){--c:#ff6fae;}
html.neon .side-icon,html.neon .side-card:nth-child(n):hover .side-icon{
  background:color-mix(in srgb,var(--c) 20%,#0b0d19);color:color-mix(in srgb,var(--c) 55%,#fff);
  box-shadow:0 0 16px 0 color-mix(in srgb,var(--c) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent),
    inset 0 0 12px color-mix(in srgb,var(--c) 28%,transparent),inset 0 0 0 0 transparent;}
html.neon .side-card h3{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--c) 50%,transparent);}
html.neon .side-card p{color:#c9cdee;}
html.neon .side-arrow,html.neon .side-card:nth-child(n):hover .side-arrow{color:var(--c);text-shadow:0 0 10px var(--c);}

/* How I work: lit tiles, glowing dots, a glowing rail */
html.neon .process-step{--c:#2ef2e0;}
html.neon .process-step:nth-child(1){--c:#2ef2e0;}
html.neon .process-step:nth-child(2){--c:#ff6fae;}
html.neon .process-step:nth-child(3){--c:#ffc94d;}
html.neon .process-step:nth-child(4){--c:#b79cff;}
html.neon .process-line{background:rgba(125,140,255,.4);box-shadow:0 0 10px rgba(125,140,255,.55);}
html.neon .process-dot{background:var(--c);border-color:#13162b;box-shadow:0 0 0 1px var(--c),0 0 14px 2px color-mix(in srgb,var(--c) 75%,transparent);}
html.neon .process-num{color:var(--c);text-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent);}
html.neon .process-icon{background:color-mix(in srgb,var(--c) 18%,#0b0d19);color:color-mix(in srgb,var(--c) 55%,#fff);
  box-shadow:0 0 18px 0 color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 26%,transparent),
    0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent);}
html.neon .process-step h3{color:#fff;text-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent);}

/* About: lit pills */
html.neon .about-expertise-pill,html.neon .about-lang-pill{--c:color-mix(in srgb,var(--sc) 55%,#fff);
  background-color:color-mix(in srgb,var(--c) 10%,#0d0f24);
  border-color:color-mix(in srgb,var(--c) 70%,transparent);
  box-shadow:0 0 16px -2px color-mix(in srgb,var(--c) 50%,transparent),0 0 0 0 transparent,
    inset 0 0 16px color-mix(in srgb,var(--c) 12%,transparent),inset 0 0 0 0 transparent;}
html.neon .about-expertise-icon,html.neon .about-lang-icon{box-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent);}
html.neon .about-expertise-bar i{box-shadow:0 0 8px color-mix(in srgb,var(--c) 80%,transparent);}

/* ===== Case study pages (shared by every project page, night) =====
   --pc is the page's tube colour, picked from the page's own stylesheet link. Everything here is a colour, ring or glow
   on elements that already exist, so day and night cross-fade. Light mode is untouched. */
html.neon{--pc:var(--theme);}
html.neon:has(link[href$="firstcover.css"]){--pc:#b79cff;}
html.neon:has(link[href$="floracracy.css"]){--pc:#4ff0b0;}
html.neon:has(link[href$="bonvoyage.css"]){--pc:#ff6fae;}
html.neon:has(link[href$="voluntopia.css"]){--pc:#2ef2e0;}
html.neon:has(link[href$="graphicdesign.css"]){--pc:#ffd24d;}
html.neon:has(link[href$="photography.css"]){--pc:#6aa8ff;}
html.neon:has(link[href$="3dmotion.css"]){--pc:#ffa94d;}

html.neon .cs-kicker{color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,#0b0d19);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 55%,transparent),0 0 16px -2px color-mix(in srgb,var(--pc) 45%,transparent);
  text-shadow:0 0 10px color-mix(in srgb,var(--pc) 60%,transparent);}
/* no orphan words: balanced case study titles, and no single last word in their intro and body text (day and night) */
.cs-title{text-wrap:balance;}
.cs-sub,.cs-section p,.cs-list li{text-wrap:pretty;}

/* Case study titles: the nav logo treatment, hollow neon tube lettering in the page's tube colour (--pc).
   A plain text stroke shows the overlapping contours of most fonts (stray lines inside r, a, g...), so hollow words use the
   overlap-free font copies declared at the end of this file. The inside stays clear, so the page shows through like the logo. */
html.neon .cs-title{
  color:transparent;-webkit-text-stroke:1.6px color-mix(in srgb,var(--pc) 75%,#fff);text-shadow:none;letter-spacing:-0.012em;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pc) 70%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--pc) 35%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--pc) 15%,transparent));
}
html.neon .meta-row{border-top-color:color-mix(in srgb,var(--pc) 65%,transparent);border-bottom-color:color-mix(in srgb,var(--pc) 30%,transparent);}
html.neon .meta-label{color:var(--pc);text-shadow:0 0 8px color-mix(in srgb,var(--pc) 55%,transparent);}
html.neon .cs-cover{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--pc) 70%,transparent),0 0 48px -6px color-mix(in srgb,var(--pc) 38%,transparent);}
html.neon .cs-section{border-bottom-color:color-mix(in srgb,var(--pc) 22%,transparent);}
html.neon .cs-section-label{color:var(--pc);text-shadow:0 0 10px color-mix(in srgb,var(--pc) 60%,transparent);}
html.neon .cs-h2{text-shadow:0 0 22px color-mix(in srgb,var(--pc) 22%,transparent);}
html.neon .cs-list li::before{background:var(--pc);box-shadow:0 0 8px var(--pc);}

html.neon .link-pill{color:var(--pc);border-color:var(--pc);text-shadow:0 0 8px color-mix(in srgb,var(--pc) 55%,transparent);
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--pc) 45%,transparent);}
html.neon .link-pill:hover{box-shadow:0 0 24px 0 color-mix(in srgb,var(--pc) 65%,transparent);}

html.neon .figure,html.neon .cs-section.dark .figure{border-color:color-mix(in srgb,var(--pc) 45%,transparent);
  box-shadow:0 0 18px -6px color-mix(in srgb,var(--pc) 40%,transparent);}
html.neon .figure:hover,html.neon .cs-section.dark .figure:hover{border-color:var(--pc);
  box-shadow:0 0 28px -2px color-mix(in srgb,var(--pc) 60%,transparent);}

html.neon .callout,html.neon .stat-card{background-color:color-mix(in srgb,var(--pc) 11%,#0d0f24);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--pc) 65%,transparent),0 0 24px -2px color-mix(in srgb,var(--pc) 34%,transparent),
    inset 0 0 24px color-mix(in srgb,var(--pc) 12%,transparent);}
html.neon .callout .tag{color:var(--pc);text-shadow:0 0 10px color-mix(in srgb,var(--pc) 60%,transparent);}
html.neon .callout p,html.neon .stat-text{color:#dfe2f8;}
html.neon .stat-num{color:var(--pc);text-shadow:0 0 14px var(--pc),0 0 32px color-mix(in srgb,var(--pc) 45%,transparent);}

html.neon .cs-contact{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--pc) 60%,transparent),0 0 56px -8px color-mix(in srgb,var(--pc) 40%,transparent);}
html.neon .cs-contact .btn-white{box-shadow:0 0 22px 0 color-mix(in srgb,var(--pc) 55%,transparent),0 0 0 1.5px color-mix(in srgb,var(--pc) 85%,transparent),
    inset 0 0 14px color-mix(in srgb,var(--pc) 25%,transparent),inset 0 0 0 0 transparent;}
html.neon .cs-contact .btn-white:hover{box-shadow:0 0 34px 2px color-mix(in srgb,var(--pc) 75%,transparent),0 0 0 1.5px var(--pc),
    inset 0 0 18px color-mix(in srgb,var(--pc) 35%,transparent),inset 0 0 0 0 transparent;}
html.neon .cs-contact .btn-outline-white{border-color:color-mix(in srgb,var(--pc) 65%,transparent);
  box-shadow:0 0 16px -2px color-mix(in srgb,var(--pc) 50%,transparent),0 0 0 0 transparent,
    inset 0 0 10px color-mix(in srgb,var(--pc) 18%,transparent),inset 0 0 0 0 transparent;}

/* Explore More chips: always lit in the colour of the project they lead to */
html.neon .more-case{--c:#8fa2ff;color:color-mix(in srgb,var(--c) 60%,#fff);border-color:color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--c) 45%,transparent),0 0 0 0 transparent,
    inset 0 0 10px color-mix(in srgb,var(--c) 14%,transparent),inset 0 0 0 0 transparent;}
html.neon .more-case:hover,html.neon .more-case:focus-visible{border-color:var(--c);
  box-shadow:0 0 24px 0 color-mix(in srgb,var(--c) 65%,transparent),0 0 0 0 transparent,
    inset 0 0 14px color-mix(in srgb,var(--c) 24%,transparent),inset 0 0 0 0 transparent;}
html.neon .more-case[href*="firstcover"]{--c:#b79cff;}
html.neon .more-case[href*="floracracy"]{--c:#4ff0b0;}
html.neon .more-case[href*="bonvoyage"]{--c:#ff6fae;}
html.neon .more-case[href*="voluntopia"]{--c:#2ef2e0;}
html.neon .more-case[href*="graphicdesign"]{--c:#ffd24d;}
html.neon .more-case[href*="photography"]{--c:#6aa8ff;}
html.neon .more-case[href*="3dmotion"]{--c:#ffa94d;}
html.neon .more-case[href*="petpal"]{--c:#ffb454;}

/* the band that was a flat blue (Photography night shots, 3D Motion noodle cart): same night band as the homepage */
html.neon .cs-section.dark{background-color:#0a0b18;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pc) 40%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--pc) 40%,transparent);}
html.neon .cs-section.dark .cs-section-label{color:var(--pc);}
html.neon .cs-section.dark .figure{background:#0e1024;}


/* Koi hero in night mode: same box and same round fade as the day koi; the neon video is framed so its ring is the same
   size as the day ring. The fade starts a little later at night so the corner clouds stay fuller. */
html.neon .hero-avatar{-webkit-mask-image:radial-gradient(closest-side,#000 var(--kmn),transparent 100%);mask-image:radial-gradient(closest-side,#000 var(--kmn),transparent 100%);}

/* Contact card glow, Safari fix. The soft glow behind the card was a 400px circle softened with filter:blur(80px). Safari
   paints a blurred layer in tiles and draws a hard-edged lighter box wherever a see-through sibling (the two leaf
   drawings) overlaps it, which showed as two squares in the top right and bottom right corners. The same glow is now a
   plain layer with a soft round mask, no blur filter, so every browser draws it the same way. */
.contact-inner::before,html.neon .contact-inner::before{
  filter:none;border-radius:0;width:720px;height:720px;top:-280px;right:-260px;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.9) 39%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.16) 78%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.9) 39%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.16) 78%,transparent 100%);
}


/* ===== Logo, night mode: hollow neon tube lettering, one tube colour per letter, same ring and glow language as the nav icons ===== */
.logo .lg{font-style:normal;display:inline-block;}
html.neon .logo{
  color:transparent;
}
html.neon .logo .lg{
  color:transparent;
  -webkit-text-stroke:1.3px color-mix(in srgb,rgb(var(--lc)) 70%,#fff);
  filter:
    drop-shadow(0 0 2px rgba(var(--lc),.95))
    drop-shadow(0 0 9px rgba(var(--lc),.6))
    drop-shadow(0 0 22px rgba(var(--lc),.3));
  transition:filter .3s ease;
}
html.neon .logo span{
  display:inline-block;text-shadow:none;
  color:#ff8c3c;-webkit-text-stroke:0;
  filter:drop-shadow(0 0 3px rgba(255,140,60,.95)) drop-shadow(0 0 9px rgba(255,110,40,.6));
}
/* hover: the tubes burn brighter */
html.neon .logo:hover .lg{
  filter:
    drop-shadow(0 0 3px rgba(var(--lc),1))
    drop-shadow(0 0 14px rgba(var(--lc),.85))
    drop-shadow(0 0 34px rgba(var(--lc),.45));
}


/* ===== Hero headline, night mode: hollow neon tube lettering. Cyan line, pink line, and the accent word lit solid in orange so it stands out ===== */
.hero h1 .nl{display:block;}
.hero h1 .nl,.hero h1 .accent{
  -webkit-text-stroke:1.5px transparent;
}
html.neon .hero h1 .nl1{
  color:rgba(46,242,224,.07);-webkit-text-stroke:1.5px #b6fbf5;
  filter:drop-shadow(0 0 2px rgba(46,242,224,0.95)) drop-shadow(0 0 10px rgba(46,242,224,0.6)) drop-shadow(0 0 26px rgba(46,242,224,0.3));
}
html.neon .hero h1 .nl2{
  color:rgba(255,95,207,.07);-webkit-text-stroke:1.5px #ffc2ee;
}
html.neon .hero h1 .nt{
  filter:drop-shadow(0 0 2px rgba(255,95,207,0.95)) drop-shadow(0 0 10px rgba(255,95,207,0.6)) drop-shadow(0 0 26px rgba(255,95,207,0.3));
}
/* the accent word: filled tube, hot core, wide warm glow, slow breathing */
html.neon .hero h1 .accent{
  color:#ffe3b8;-webkit-text-stroke:1.5px #ffb36b;text-shadow:none;
  filter:drop-shadow(0 0 3px rgba(255,150,60,1)) drop-shadow(0 0 14px rgba(255,130,50,.85)) drop-shadow(0 0 36px rgba(255,110,40,.5));
  animation:accentBreath 3.2s ease-in-out infinite;
}
@keyframes accentBreath{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,150,60,1)) drop-shadow(0 0 14px rgba(255,130,50,.85)) drop-shadow(0 0 36px rgba(255,110,40,.5));}
  50%{filter:drop-shadow(0 0 2px rgba(255,150,60,.9)) drop-shadow(0 0 9px rgba(255,130,50,.6)) drop-shadow(0 0 24px rgba(255,110,40,.3));}
}
@media (prefers-reduced-motion:reduce){html.neon .hero h1 .accent{animation:none;}}
html.neon-anim .hero h1 .nl,html.neon-anim .hero h1 .accent{
  transition:-webkit-text-fill-color .8s ease,-webkit-text-stroke-color .8s ease;
}


/* ===== Hero text under the headline, night mode: quiet paragraph, three lit keywords, hollow neon stat words ===== */
html.neon .hero-sub{color:#9aa2cf;}
html.neon .hero-sub .hl{font-weight:600;}
html.neon .hero-sub .hl-c{color:#b6fbf5;text-shadow:0 0 10px rgba(46,242,224,.6);}
html.neon .hero-sub .hl-p{color:#ffc2ee;text-shadow:0 0 10px rgba(255,95,207,.55);}
html.neon .hero-sub .hl-y{color:#ffe6a6;text-shadow:0 0 10px rgba(255,201,77,.55);}
html.neon .hero-stats{gap:0;}
html.neon .hero-stats > div{padding:0 28px;border-left:1px solid rgba(125,140,255,.22);}
html.neon .hero-stats > div:first-child{padding-left:0;border-left:0;}
html.neon .hero-stats > div:nth-child(1){--sc:46,242,224;}
html.neon .hero-stats > div:nth-child(2){--sc:255,95,207;}
html.neon .hero-stats > div:nth-child(3){--sc:255,201,77;}
html.neon .hero-stats .stat-num{
  color:transparent;color:transparent;text-shadow:none;
  -webkit-text-stroke:1.1px color-mix(in srgb,rgb(var(--sc)) 70%,#fff);
  filter:drop-shadow(0 0 2px rgba(var(--sc),.95)) drop-shadow(0 0 9px rgba(var(--sc),.6));
}
html.neon .hero-stats .stat-label{color:#7d85b8;margin-top:4px;}
@media (max-width:900px){
  html.neon .hero-stats > div{padding:0 16px;}
}


/* ===== Hero text, calm version: the koi stays the star. Dim unlit tubes, only the accent word is lit (softly) ===== */
html.neon .hero h1 .nl1,html.neon .hero h1 .nl2{
  color:transparent;-webkit-text-stroke:1.3px #8d96c8;filter:none;
}
html.neon .hero h1 .nt{filter:none;}
html.neon .hero h1 .accent{
  color:#ffd2a0;-webkit-text-stroke:1.4px #ff9d4d;text-shadow:none;
  filter:drop-shadow(0 0 2px rgba(255,150,60,.8)) drop-shadow(0 0 9px rgba(255,130,50,.45));
  animation:none;
}
html.neon .hero-sub .hl-c,html.neon .hero-sub .hl-p,html.neon .hero-sub .hl-y{color:#c9cfee;text-shadow:none;}
html.neon .hero-stats .stat-num{
  -webkit-text-stroke:1px color-mix(in srgb,rgb(var(--sc)) 55%,#9aa2cf);filter:none;
}

/* ===== Logo: two colours only, purple letters and amber dot ===== */
html.neon .logo .lg{--lc:255,201,77 !important;}
html.neon .logo .lg:nth-of-type(n+7){--lc:255,95,207 !important;}

/* ===== Hero headline lines: soft lavender fill inside the dim tube outline ===== */
html.neon .hero h1 .nl1,html.neon .hero h1 .nl2{
  color:#7d86b8;-webkit-text-stroke:1.3px #aeb7e6;
}

/* ===== Hero headline lines: soft lavender white, solid ===== */
html.neon .hero h1 .nl1,html.neon .hero h1 .nl2{
  color:#c3c8e8;-webkit-text-stroke:1.3px #c3c8e8;
}

/* ===== Section headings (homepage), night mode: neon tube label with a lit dash, calm lavender title =====
   Two tube colours only, like the logo. Amber and cyan alternate down the page. */
html.neon #work,html.neon #process,html.neon #about{--kc:255,201,77;--kt:#ffe6a6;}
html.neon #graphic,html.neon #side{--kc:46,242,224;--kt:#b6fbf5;}
html.neon #work .kicker,html.neon #graphic .kicker,html.neon #process .kicker,html.neon #side .kicker,html.neon #about .kicker{
  display:flex;align-items:center;gap:12px;
  color:var(--kt) !important;
  text-shadow:0 0 8px rgba(var(--kc),.8),0 0 20px rgba(var(--kc),.4);
}
html.neon #work .kicker::before,html.neon #graphic .kicker::before,html.neon #process .kicker::before,html.neon #side .kicker::before,html.neon #about .kicker::before{
  content:"";flex:none;width:36px;height:2px;border-radius:2px;
  background:rgb(var(--kc));
  box-shadow:0 0 6px rgb(var(--kc)),0 0 14px rgba(var(--kc),.7);
  display:none;
}
html.neon #work h2,html.neon #graphic h2,html.neon #process h2,html.neon #side h2,html.neon .about-main h2{
  color:#c3c8e8;text-shadow:0 0 22px rgba(var(--kc),.14);
}

/* ===== Section titles (homepage), night mode: tube lettering like the logo and nav, soft tinted fill ===== */
html.neon #work h2,html.neon #graphic h2,html.neon #process h2,html.neon #side h2,html.neon .about-main h2{
  color:var(--kt);text-shadow:none;
  color:rgba(var(--kc),.12);
  -webkit-text-stroke:1.3px var(--kt);
  filter:drop-shadow(0 0 2px rgba(var(--kc),.9)) drop-shadow(0 0 9px rgba(var(--kc),.5)) drop-shadow(0 0 22px rgba(var(--kc),.22));
}
html.neon .about-main h2 .zh-brush{-webkit-text-fill-color:#ff8fb1;-webkit-text-stroke:0;}

/* titles take the other tube colour than their label (label amber, title cyan, and the other way round) */
html.neon #work,html.neon #process,html.neon #about{--hc:46,242,224;--ht:#b6fbf5;}
html.neon #graphic,html.neon #side{--hc:255,201,77;--ht:#ffe6a6;}
html.neon #work h2,html.neon #graphic h2,html.neon #process h2,html.neon #side h2,html.neon .about-main h2{
  color:var(--ht);
  color:rgba(var(--hc),.12);
  -webkit-text-stroke:1.3px var(--ht);
  filter:drop-shadow(0 0 2px rgba(var(--hc),.9)) drop-shadow(0 0 9px rgba(var(--hc),.5)) drop-shadow(0 0 22px rgba(var(--hc),.22));
}
html.neon .about-main h2 .zh-brush{-webkit-text-fill-color:#ff8fb1;-webkit-text-stroke:0;}

/* hero stat words: a touch of tinted fill and a soft glow, still quiet */
html.neon .hero-stats .stat-num{
  color:rgba(var(--sc),.14);
  -webkit-text-stroke:1.1px color-mix(in srgb,rgb(var(--sc)) 70%,#c9cfee);
  filter:drop-shadow(0 0 1.5px rgba(var(--sc),.7)) drop-shadow(0 0 7px rgba(var(--sc),.28));
}

/* hero headline lines: just a hint of glow */
html.neon .hero h1 .nl1,html.neon .hero h1 .nt{
  filter:drop-shadow(0 0 1.5px rgba(195,200,232,.55)) drop-shadow(0 0 9px rgba(143,155,255,.28));
}

/* ===== Section colours follow the four nav tubes: amber (Work), cyan (Vibes), pink (About), coral (boba). label / title ===== */
html.neon #work   {--kc:255,201,77;--kt:#ffe6a6;--hc:46,242,224;--ht:#b6fbf5;}   /* amber / cyan  */
html.neon #graphic{--kc:255,95,207;--kt:#ffc2ee;--hc:255,201,77;--ht:#ffe6a6;}   /* pink  / amber */
html.neon #process{--kc:46,242,224;--kt:#b6fbf5;--hc:255,150,90;--ht:#ffcfb0;}   /* cyan  / coral */
html.neon #side   {--kc:255,150,90;--kt:#ffcfb0;--hc:255,95,207;--ht:#ffc2ee;}   /* coral / pink  */
html.neon #about  {--kc:255,95,207;--kt:#ffc2ee;--hc:46,242,224;--ht:#b6fbf5;}   /* pink  / cyan  */

/* About title: "Photographer" in its own tube colour (amber), the rest keeps the title colour */
html.neon .about-main h2{filter:none;}
html.neon .about-main h2 .ht{
  -webkit-text-stroke:1.3px var(--ht);
  filter:drop-shadow(0 0 2px rgba(var(--hc),.9)) drop-shadow(0 0 9px rgba(var(--hc),.5)) drop-shadow(0 0 22px rgba(var(--hc),.22));
}
html.neon .about-main h2 .ph{
  color:rgba(255,201,77,.12);-webkit-text-stroke:1.3px #ffe6a6;
  filter:drop-shadow(0 0 2px rgba(255,201,77,.9)) drop-shadow(0 0 9px rgba(255,201,77,.5)) drop-shadow(0 0 22px rgba(255,201,77,.22));
}

/* ===== About pills (Expertise, Languages): lit with the four nav tubes (cyan, coral, pink, amber) instead of the muted day colours ===== */
html.neon .about-expertise-pill:nth-child(1),html.neon .about-lang-pill:nth-child(1){--nc:46,242,224;}
html.neon .about-expertise-pill:nth-child(2),html.neon .about-lang-pill:nth-child(2){--nc:255,150,90;}
html.neon .about-expertise-pill:nth-child(3),html.neon .about-lang-pill:nth-child(3){--nc:255,95,207;}
html.neon .about-expertise-pill:nth-child(4){--nc:255,95,207;}
html.neon .about-expertise-pill:nth-child(5){--nc:255,201,77;}
html.neon .about-expertise-pill:nth-child(6){--nc:46,242,224;}
html.neon .about-lang-pill:nth-child(4){--nc:255,201,77;}
html.neon .about-expertise-pill,html.neon .about-lang-pill{
  --sc:rgb(var(--nc)) !important;
  --c:color-mix(in srgb,rgb(var(--nc)) 82%,#fff);
  background-color:color-mix(in srgb,rgb(var(--nc)) 7%,#0d0f24);
  border:1.3px solid rgba(var(--nc),.75);
  box-shadow:0 0 12px -1px rgba(var(--nc),.38),inset 0 0 14px rgba(var(--nc),.14);
  color:color-mix(in srgb,rgb(var(--nc)) 40%,#fff);
}
html.neon .about-expertise-icon,html.neon .about-lang-icon{
  background:rgba(var(--nc),.14);
  color:color-mix(in srgb,rgb(var(--nc)) 70%,#fff);
  box-shadow:inset 0 0 0 1px rgba(var(--nc),.55),0 0 9px rgba(var(--nc),.4);
}
html.neon .about-expertise-icon svg,html.neon .about-lang-icon svg{filter:drop-shadow(0 0 3px rgba(var(--nc),.9));}
html.neon .about-expertise-bar i{
  background:linear-gradient(90deg,rgba(var(--nc),.55),rgb(var(--nc))) !important;
  box-shadow:0 0 8px rgba(var(--nc),.85);
}


/* ===== Contact card, night mode: neon tube label, cyan tube title, coral "boba" (the nav boba colour) ===== */
html.neon #contact{--kc:255,201,77;--kt:#ffe6a6;}
html.neon #contact .kicker{
  display:flex;align-items:center;gap:12px;
  color:var(--kt) !important;
  text-shadow:0 0 8px rgba(var(--kc),.8),0 0 20px rgba(var(--kc),.4);
}
html.neon #contact .kicker::before{
  content:"";flex:none;width:36px;height:2px;border-radius:2px;
  background:rgb(var(--kc));
  box-shadow:0 0 6px rgb(var(--kc)),0 0 14px rgba(var(--kc),.7);
  display:none;
}
html.neon .contact-inner h2{color:#b6fbf5;}
html.neon .contact-inner h2 .ht{
  color:rgba(46,242,224,.12);-webkit-text-stroke:1.3px #b6fbf5;
  filter:drop-shadow(0 0 2px rgba(46,242,224,.9)) drop-shadow(0 0 9px rgba(46,242,224,.5)) drop-shadow(0 0 22px rgba(46,242,224,.22));
}
html.neon .contact-inner h2 .boba-accent{
  color:#ffcfb0;text-shadow:none;
  color:rgba(255,150,90,.14);-webkit-text-stroke:1.3px #ffcfb0;
  filter:drop-shadow(0 0 2px rgba(255,150,90,.95)) drop-shadow(0 0 9px rgba(255,150,90,.55)) drop-shadow(0 0 22px rgba(255,150,90,.25));
}
@media (max-width:900px){html.neon #contact .kicker{justify-content:center;}}

/* ===== Case study meta block (Role, Timeline, Platform, Tools), night mode =====
   The three lines become real tubes (own glow), the text stays crisp, and the labels use the four nav tubes. */
html.neon .prologue-meta{position:relative;filter:none;border-top-color:transparent;}
html.neon .prologue-meta .m-item{position:relative;}
html.neon .prologue-meta .m-item:nth-child(odd){border-right-color:transparent;}
html.neon .prologue-meta .m-item:nth-child(n+3){border-top-color:transparent;}
html.neon .prologue-meta::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:#7ff7ec;box-shadow:0 0 3px #2ef2e0,0 0 10px rgba(46,242,224,.6);
}
html.neon .prologue-meta .m-item:nth-child(odd)::after{
  content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;pointer-events:none;
  background:#ffb08a;box-shadow:0 0 3px #ff965a,0 0 10px rgba(255,150,90,.55);
}
html.neon .prologue-meta .m-item:nth-child(n+3)::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:#ff9fe3;box-shadow:0 0 3px #ff5fcf,0 0 10px rgba(255,95,207,.55);
}
html.neon .prologue-meta .m-item:nth-child(3)::before{right:-1px;}
html.neon .prologue-meta .m-item:nth-child(4)::before{left:-1px;}
html.neon .prologue-meta b{text-shadow:0 0 8px color-mix(in srgb,var(--m) 55%,transparent);}
html.neon .prologue-meta .m-item:nth-child(1) b{--m:#2ef2e0;}
html.neon .prologue-meta .m-item:nth-child(2) b{--m:#ff9a62;}
html.neon .prologue-meta .m-item:nth-child(3) b{--m:#ff6fd2;}
html.neon .prologue-meta .m-item:nth-child(4) b{--m:#ffc94d;}
html.neon .prologue-meta .m-item{color:#aeb6dc;text-shadow:none;}

/* meta labels (Role, Timeline, Platform, Tools): tube lettering like the homepage stat words */
html.neon .prologue-meta b{
  display:inline-block;
  color:transparent;text-shadow:none;
  color:color-mix(in srgb,var(--m) 16%,transparent);
  -webkit-text-stroke:1px color-mix(in srgb,var(--m) 65%,#fff);
  filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--m) 80%,transparent)) drop-shadow(0 0 7px color-mix(in srgb,var(--m) 40%,transparent));
}

/* ===== Case study section titles, night mode: tube lettering like the homepage, in the page / level tube colour ===== */
html.neon .cs-h2{
  text-shadow:none;
  color:color-mix(in srgb,var(--pc) 13%,transparent);
  -webkit-text-stroke:1.2px color-mix(in srgb,var(--pc) 55%,#fff);
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--pc) 90%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--pc) 50%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--pc) 22%,transparent));
}
html.neon .level-h2{
  text-shadow:none;
  color:color-mix(in srgb,var(--lv) 13%,transparent);
  -webkit-text-stroke:1.2px color-mix(in srgb,var(--lv) 55%,#fff);
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--lv) 90%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--lv) 50%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--lv) 22%,transparent));
}

/* ===== PetPal keyword row (Proactive, Personal, Warm), night mode: tube lettering and lit icon rings in the nav tubes ===== */
html.neon .keyword-row .kw-item:nth-child(1){--kc:46,242,224;--kt:#b6fbf5;}
html.neon .keyword-row .kw-item:nth-child(3){--kc:255,201,77;--kt:#ffe6a6;}
html.neon .keyword-row .kw-item:nth-child(5){--kc:255,95,207;--kt:#ffc2ee;}
html.neon .keyword-row .kw-item{
  color:rgba(var(--kc),.14);
  -webkit-text-stroke:1px var(--kt);
  filter:drop-shadow(0 0 1.5px rgba(var(--kc),.85)) drop-shadow(0 0 8px rgba(var(--kc),.4));
}
html.neon .keyword-row .kw-icon{
  background:rgba(var(--kc),.12);color:var(--kt);
  box-shadow:inset 0 0 0 1.2px rgba(var(--kc),.75),0 0 10px rgba(var(--kc),.45);
  
}
html.neon .keyword-row .kw-icon svg{filter:drop-shadow(0 0 3px rgba(var(--kc),.9));}
html.neon .keyword-row .kw-dot{background:#9aa8ff;box-shadow:0 0 8px rgba(143,155,255,.9);}

/* ===== Home link on the project pages: its own tube colour (pink), so it no longer repeats Vibes cyan ===== */
html.neon .back-icon{--nn:255,95,207;--nx-c:#ffc2ee;}
html.neon .back-link{color:#ffc2ee !important;text-shadow:0 0 8px rgba(255,95,207,.6),0 0 20px rgba(255,95,207,.28);}
html.neon .back-link:hover{color:#fff !important;text-shadow:0 0 10px rgba(255,95,207,.95),0 0 26px rgba(255,95,207,.55);}

/* ===== Other pages: big numbers get the same tube lettering as the homepage stat words ===== */
html.neon .stat-num,html.neon .ps-num,html.neon .tw-num,html.neon .fb-num,html.neon .d-num{
  text-shadow:none;
  -webkit-text-fill-color:color-mix(in srgb,currentColor 16%,transparent);
  -webkit-text-stroke:1.1px color-mix(in srgb,currentColor 65%,#fff);
  filter:drop-shadow(0 0 1.5px color-mix(in srgb,currentColor 85%,transparent)) drop-shadow(0 0 8px color-mix(in srgb,currentColor 42%,transparent));
}
html.neon .fb-num small,html.neon .fb-num sub{-webkit-text-stroke:0;-webkit-text-fill-color:#a6aed8;}
/* small block labels (Problem, Goal, Approach ...): a soft tube glow in the page colour */
html.neon .cs-block-label{
  color:color-mix(in srgb,var(--pc) 35%,#fff);
  text-shadow:0 0 8px color-mix(in srgb,var(--pc) 45%,transparent);
}

/* hero stats: no divider lines between the three words */
html.neon .hero-stats > div{border-left-color:transparent;}

/* hero stats: night spacing is exactly the day spacing, so nothing moves while the page switches */
html.neon .hero-stats{gap:32px;}
html.neon .hero-stats > div,html.neon .hero-stats > div:first-child{padding:0;border-left:0;}
html.neon .hero-stats .stat-label{margin-top:0;}
@media (max-width:900px){html.neon .hero-stats > div{padding:0;}}


/* ===== Day baselines for the tube lettering: a transparent stroke of the same width, so the night outline fades in with the page
   (the stroke colour and fill are in the switch transitions above) instead of appearing at the first frame ===== */
.logo .lg{-webkit-text-stroke:1.3px transparent;}
.hero-stats .stat-num{-webkit-text-stroke:1.1px transparent;}
#work h2,#graphic h2,#process h2,#side h2,.about-main h2,.about-main h2 .ht,.about-main h2 .ph,
.contact-inner h2 .ht,.contact-inner h2 .boba-accent,.cs-h2,.level-h2{-webkit-text-stroke:1.2px transparent;}
.stat-num,.ps-num,.tw-num,.fb-num,.d-num{-webkit-text-stroke:1.1px transparent;}
.prologue-meta b,.keyword-row .kw-item{-webkit-text-stroke:1px transparent;}

/* hero stat words take their (animated) text colour as the fill, like the other tube lettering */
html.neon .hero-stats .stat-num{-webkit-text-fill-color:currentColor;}

/* "design" in the headline: hollow tube lettering with an orange tube, same recipe as the logo and nav */
html.neon .hero h1 .accent{
  color:rgba(255,138,64,.17);
  -webkit-text-stroke:1.4px #ffb582;
  text-shadow:none;animation:none;
  filter:drop-shadow(0 0 2px rgba(255,148,66,.97)) drop-shadow(0 0 9px rgba(255,128,48,.6)) drop-shadow(0 0 22px rgba(255,108,38,.28));
}

/* hero headline lines: the koi's teal (sampled from the koi picture) */
html.neon .hero h1 .nl1,html.neon .hero h1 .nl2{
  color:#84cdc6;-webkit-text-stroke:1.3px #84cdc6;
}
html.neon .hero h1 .nl1,html.neon .hero h1 .nt{
  filter:drop-shadow(0 0 1.5px rgba(132,205,198,.55)) drop-shadow(0 0 9px rgba(90,190,180,.28));
}

/* hero headline lines: same hollow tube recipe as "design", in the koi's teal */
html.neon .hero h1 .nl1,html.neon .hero h1 .nl2{
  color:rgba(132,205,198,.14);-webkit-text-stroke:1.4px #a6e3dc;
}
html.neon .hero h1 .nl1,html.neon .hero h1 .nt{
  filter:drop-shadow(0 0 2px rgba(110,215,205,.95)) drop-shadow(0 0 9px rgba(90,200,190,.55)) drop-shadow(0 0 22px rgba(70,180,170,.25));
}

/* ===== "More Case Studies" button (homepage), night mode: lit nav chip in the Work amber ===== */
.more-cases-btn{position:relative;isolation:isolate;--nn:255,201,77;}
.more-cases-btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(130% 120% at 30% 0%,rgba(var(--nn),.24),transparent 62%),
    linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),.78),
    0 0 10px 1px rgba(var(--nn),.5),
    0 0 26px 2px rgba(var(--nn),.24),
    inset 0 0 9px rgba(var(--nn),.34),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:box-shadow .3s ease;
}
html.neon .more-cases-btn::before{opacity:1;}
html.neon .more-cases-btn,html.neon .more-cases-btn:hover{
  background:transparent;border-color:transparent;box-shadow:none !important;
  color:#ffe6a6;text-shadow:0 0 8px rgba(var(--nn),.8),0 0 20px rgba(var(--nn),.4);
}
html.neon .more-cases-btn:hover{
  color:#fff;text-shadow:0 0 10px rgba(var(--nn),.95),0 0 26px rgba(var(--nn),.55);
}
html.neon .more-cases-btn:hover::before{
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),1),
    0 0 16px 2px rgba(var(--nn),.85),
    0 0 40px 6px rgba(var(--nn),.4),
    inset 0 0 12px rgba(var(--nn),.52),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* ===== PetPal extras, night mode: small card titles, scroll cues, Explore More, footer links, roadmap dots ===== */

/* small titles inside cards take the lamp colour of their card, with a light glow and no outline (the type is small) */
html.neon .family-card h3,
html.neon .discovery-card .d-tag{
  color:color-mix(in srgb,var(--c) 45%,#fff);
  text-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent),0 0 18px color-mix(in srgb,var(--c) 22%,transparent);
}
html.neon .tw-label,
html.neon .feedback-heading,
html.neon .sustain-card h3{
  color:color-mix(in srgb,var(--lv) 45%,#fff);
  text-shadow:0 0 8px color-mix(in srgb,var(--lv) 55%,transparent),0 0 18px color-mix(in srgb,var(--lv) 22%,transparent);
}

/* BEGIN THE JOURNEY (hero) */
html.neon .scroll-cue{
  color:#ffe0b0;
  text-shadow:0 0 8px rgba(255,180,84,.75),0 0 20px rgba(255,180,84,.35);
}
html.neon .scroll-cue .chev{
  border-right-color:#ffcf8a;border-bottom-color:#ffcf8a;
  filter:drop-shadow(0 0 4px rgba(255,180,84,.9));
  animation:pulseFade 2.4s ease-in-out infinite,ppChevBob 1.8s ease-in-out infinite;
}
@keyframes ppChevBob{0%,100%{transform:translateY(-1px) rotate(45deg);}50%{transform:translateY(4px) rotate(45deg);}}

/* KEEP SCROLLING (between chapters): readable, tinted by the chapter, and nudging downwards */
html.neon .seen .next-cue{
  opacity:.92;
  color:color-mix(in srgb,var(--lv) 55%,#fff);
  text-shadow:0 0 8px color-mix(in srgb,var(--lv) 70%,transparent),0 0 18px color-mix(in srgb,var(--lv) 30%,transparent);
  animation:ppCueBob 2s ease-in-out infinite;
}
@keyframes ppCueBob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
@media (prefers-reduced-motion:reduce){
  html.neon .scroll-cue .chev,html.neon .seen .next-cue{animation:none;}
}

/* Explore More label: same tube lettering as the chapter labels, with a short bar */
html.neon .cs-block-label.explore-label{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#ffb454;text-shadow:0 0 10px rgba(255,180,84,.7);
}
html.neon .cs-block-label.explore-label::after{
  content:"";width:20px;height:2px;border-radius:2px;background:#ffb454;box-shadow:0 0 8px #ffb454;
}

/* footer links light up on hover, each in a nav colour */
html.neon .footer-social a{transition:color .25s ease,text-shadow .25s ease;}
html.neon .footer-social a:nth-child(1):hover{color:#c8fff8;text-shadow:0 0 8px rgba(46,242,224,.95),0 0 20px rgba(46,242,224,.5);}
html.neon .footer-social a:nth-child(2):hover{color:#ffd0f0;text-shadow:0 0 8px rgba(255,95,207,.95),0 0 20px rgba(255,95,207,.5);}

/* roadmap: future steps stay dim but carry a faint ring so the line reads as one path */
html.neon .rm-step:not(.done):not(.active) .rm-dot{
  border-color:rgba(255,138,92,.4);
  color:rgba(255,190,160,.6);
  box-shadow:0 0 0 3px rgba(255,138,92,.07),0 0 12px rgba(255,138,92,.2);
}
html.neon .rm-step:not(.done):not(.active) .rm-line,
html.neon .rm-step.active .rm-line{
  box-shadow:0 0 6px rgba(255,138,92,.22);
}
html.neon .rm-step:not(.done):not(.active) .rm-line{background:rgba(255,138,92,.28);}

/* ===== PetPal opening headline: hollow tube lettering in the nav boba coral (255,150,90) ===== */
.prologue h1{-webkit-text-stroke:1.4px transparent;}
html.neon .prologue h1{
  color:rgba(255,150,90,.14);-webkit-text-stroke:1.4px #ffcfb0;text-shadow:none;
  filter:drop-shadow(0 0 2px rgba(255,150,90,.95)) drop-shadow(0 0 9px rgba(255,150,90,.55)) drop-shadow(0 0 22px rgba(255,150,90,.25));
}

/* ===== PetPal "What Changed" strip, night mode: the label, line and arrow are lit, and the four trait icons are
   lit rings like the nav icons (amber, pink, cyan, coral) ===== */
html.neon .what-changed .wc-label{
  color:color-mix(in srgb,var(--lv) 55%,#fff);
  text-shadow:0 0 8px color-mix(in srgb,var(--lv) 75%,transparent),0 0 18px color-mix(in srgb,var(--lv) 35%,transparent);
}
html.neon .what-changed .wc-line{
  background:var(--lv);
  box-shadow:0 0 6px var(--lv),0 0 14px color-mix(in srgb,var(--lv) 55%,transparent);
}
html.neon .what-changed .wc-arrow{
  color:color-mix(in srgb,var(--lv) 70%,#fff);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--lv) 90%,transparent));
}

.trait-chip:nth-child(1){--nn:255,201,77;}
.trait-chip:nth-child(2){--nn:255,95,207;}
.trait-chip:nth-child(3){--nn:46,242,224;}
.trait-chip:nth-child(4){--nn:255,150,90;}
.trait-icon{position:relative;isolation:isolate;}
.trait-icon::before{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(130% 120% at 30% 0%,rgba(var(--nn),.26),transparent 62%),
    linear-gradient(160deg,#15183a 0%,#0c0e25 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),.8),
    0 0 9px 1px rgba(var(--nn),.5),
    0 0 22px 2px rgba(var(--nn),.22),
    inset 0 0 8px rgba(var(--nn),.34),
    inset 0 1px 0 rgba(255,255,255,.14);
}
html.neon .trait-icon::before{opacity:1;}
html.neon .trait-icon{
  background:transparent;box-shadow:none;
  color:color-mix(in srgb,rgb(var(--nn)) 55%,#fff);
  filter:drop-shadow(0 0 3px rgba(var(--nn),.55));
}
html.neon .trait-chip b{
  color:color-mix(in srgb,rgb(var(--nn)) 40%,#fff);
  text-shadow:0 0 8px rgba(var(--nn),.5),0 0 18px rgba(var(--nn),.2);
}
html.neon .trait-chip{border-left-color:rgba(var(--nn),.4);}
html.neon .trait-chip:hover .trait-icon::before{
  box-shadow:
    0 0 0 1.5px rgba(var(--nn),1),
    0 0 14px 2px rgba(var(--nn),.85),
    0 0 34px 5px rgba(var(--nn),.38),
    inset 0 0 11px rgba(var(--nn),.5),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* ===== Body text, a touch brighter at night (it read a little dim). The shared soft ink moves up one step and the
   few fixed greys follow. Headings, tubes and accents are untouched. ===== */
html.neon{--ink-soft:#c8cef0;}
html.neon #graphic .graphic-intro p,html.neon .about-tl-item p{color:#c8cef0;}
html.neon .hero-sub{color:#c6cdee;}
html.neon .hero-sub .hl-c,html.neon .hero-sub .hl-p,html.neon .hero-sub .hl-y{color:#e2e5f8;}
html.neon .project-card .project-desc,html.neon .side-card p{color:#e0e3f8;}
html.neon .contact-inner p{color:#d5cfec;}
html.neon .cs-section.dark .lede{color:rgba(255,255,255,.84);}

/* Project card titles: same glowing label as the nav (tinted colour, two soft glows), white hot on hover */
html.neon .project-card .project-title{
  color:color-mix(in srgb,var(--c) 38%,#fff);
  text-shadow:0 0 8px color-mix(in srgb,var(--c) 70%,transparent),0 0 20px color-mix(in srgb,var(--c) 32%,transparent);}
html.neon .project-card:hover .project-title,
html.neon .project-card.pc-petpal:hover .project-title,html.neon .project-card.pc-firstcover:hover .project-title,
html.neon .project-card.pc-floracracy:hover .project-title,html.neon .project-card.pc-bonvoyage:hover .project-title,
html.neon .project-card.pc-voluntopia:hover .project-title{
  color:#fff;
  text-shadow:0 0 10px color-mix(in srgb,var(--c) 95%,transparent),0 0 26px color-mix(in srgb,var(--c) 55%,transparent);}

/* Project card titles: the exact nav logo treatment (hollow neon tube lettering, 1.3px stroke plus layered glow) in each card's colour */
.project-card .project-title{-webkit-text-stroke:1.3px transparent;}
html.neon .project-card .project-title{
  color:color-mix(in srgb,var(--c) 14%,transparent);
  -webkit-text-stroke:1.3px color-mix(in srgb,var(--c) 55%,#fff);
  text-shadow:none;
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--c) 95%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--c) 60%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--c) 30%,transparent));
  transition:filter .3s ease;}
html.neon .project-card:hover .project-title,
html.neon .project-card.pc-petpal:hover .project-title,html.neon .project-card.pc-firstcover:hover .project-title,
html.neon .project-card.pc-floracracy:hover .project-title,html.neon .project-card.pc-bonvoyage:hover .project-title,
html.neon .project-card.pc-voluntopia:hover .project-title{
  color:color-mix(in srgb,var(--c) 22%,transparent);
  -webkit-text-stroke:1.3px #fff;
  text-shadow:none;
  filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 14px color-mix(in srgb,var(--c) 85%,transparent)) drop-shadow(0 0 34px color-mix(in srgb,var(--c) 45%,transparent));}

/* Process step titles: nav logo treatment (hollow neon tube lettering) in each step's colour. Hollow letters need body, so weight 800 at night */
.process-step h3{-webkit-text-stroke:1.1px transparent;}
html.neon .process-step h3{
  font-weight:800;
  color:color-mix(in srgb,var(--c) 14%,transparent);
  -webkit-text-stroke:1.1px color-mix(in srgb,var(--c) 55%,#fff);
  text-shadow:none;
  filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--c) 95%,transparent)) drop-shadow(0 0 7px color-mix(in srgb,var(--c) 58%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--c) 28%,transparent));
  transition:filter .3s ease;}
html.neon .process-step:hover h3{
  -webkit-text-stroke-color:#fff;
  filter:drop-shadow(0 0 2.5px var(--c)) drop-shadow(0 0 11px color-mix(in srgb,var(--c) 85%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--c) 45%,transparent));}

/* Tube titles on the homepage cards and process steps: a little less glow */
html.neon .project-card .project-title{
  filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--c) 75%,transparent)) drop-shadow(0 0 7px color-mix(in srgb,var(--c) 38%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--c) 16%,transparent));}
html.neon .project-card:hover .project-title,
html.neon .project-card.pc-petpal:hover .project-title,html.neon .project-card.pc-firstcover:hover .project-title,
html.neon .project-card.pc-floracracy:hover .project-title,html.neon .project-card.pc-bonvoyage:hover .project-title,
html.neon .project-card.pc-voluntopia:hover .project-title{
  filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 9px color-mix(in srgb,var(--c) 65%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--c) 30%,transparent));}
html.neon .process-step h3{
  filter:drop-shadow(0 0 1px color-mix(in srgb,var(--c) 75%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--c) 36%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--c) 15%,transparent));}
html.neon .process-step:hover h3{
  filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 8px color-mix(in srgb,var(--c) 65%,transparent)) drop-shadow(0 0 20px color-mix(in srgb,var(--c) 30%,transparent));}




/* Hollow lettering: overlap-free copies of the same typefaces (Arimo is the Helvetica look-alike, Nunito is the PetPal font),
   so a text stroke draws only the outline. Applied by neon.js (.nx-h-*) and to the case study titles, on screens up to 900px wide only. */
@font-face{font-family:'NxSans';src:url(fonts/nx-arimo-700.woff2) format('woff2');font-weight:700 800;font-style:normal;font-display:swap;}
@font-face{font-family:'NxNunito';src:url(fonts/nx-nunito-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'NxNunito';src:url(fonts/nx-nunito-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;}
/* Phones and small tablets only. On wider screens night keeps exactly the same typefaces as day. */
@media (max-width:900px){
  .nx-h-sans,.cs-title{font-family:'NxSans','Helvetica Neue',Arial,sans-serif !important;}
  .nx-h-nun{font-family:'NxNunito','Nunito',sans-serif !important;}
  .cs-title{letter-spacing:-0.012em !important;}   /* same spacing in day and night, so the title never rewraps when the page switches */
}

/* day: a hollow word keeps its night stroke width, transparent, so the outline can fade out on the switch (see ringify() in neon.js) */
html:not(.neon) .nx-sw{-webkit-text-stroke:var(--nx-sw) transparent !important;}

/* koi circle: while the page switches theme its edge is feathered a little wider, so the disc blends into the page instead of
   showing as a ring (the mask edge starts at 82% as usual, eases out to 70% and back) */
@property --kme{syntax:"<percentage>";inherits:false;initial-value:82%;}
@property --kmn{syntax:"<percentage>";inherits:false;initial-value:88%;}
.hero-avatar{
  -webkit-mask-image:radial-gradient(closest-side,#000 var(--kme),transparent 100%);
  mask-image:radial-gradient(closest-side,#000 var(--kme),transparent 100%);
}
html.neon-anim .hero-avatar{animation:kmeSoft .8s ease both;}
html.neon-anim.neon-sunset .hero-avatar{animation-duration:1.6s;}
@keyframes kmeSoft{0%,100%{--kme:82%;--kmn:88%;}30%,70%{--kme:68%;--kmn:72%;}}
@media (prefers-reduced-motion:reduce){html.neon-anim .hero-avatar{animation:none;}}

/* Safari does not hand a parent's text stroke colour down to the spans inside it (it fell back to the fill colour), so the second
   headline line (its words sit in .nt spans) came out dim, without the outline. The spans now declare their own colour and stroke. */
.hero h1 .nt{-webkit-text-stroke:1.5px transparent;}
html.neon .hero h1 .nt{color:rgba(132,205,198,.14);-webkit-text-stroke:1.4px #a6e3dc;}

/* ===== koi circle blends into the page: the video's own black can come out a hair darker than the page on some screens, which
   showed as a faint disc. Once the night theme has settled, lay the page colour behind the picture and let the picture only
   ever add light over it (lighten), so anything darker than the page simply becomes the page. The day video sits hidden
   underneath at that point, so it can not show through the blend ===== */
html.neon:not(.neon-anim) .hero-avatar{background-color:#090a14;}
html.neon-anim .hero-avatar{transition:none !important;}   /* the page colour behind the picture switches on and off at once, it must not fade */
html.neon:not(.neon-anim) .hero-avatar .koi-video:not(.koi-video-dark){visibility:hidden;}
html.neon:not(.neon-anim) .hero-avatar .koi-video-dark,
html.neon:not(.neon-anim) .hero-avatar .koi-gl{mix-blend-mode:lighten;}

/* PetPal hero: the big soft circle that flashed once when the page opened (stageGlow) is removed, day and night */
.prologue::before{display:none !important;animation:none !important;}

/* PetPal Level 01: the logo's two tubes. The tag, heading and Challenge card use the orange of "Zhu", the
   Opportunity card uses the purple of the "h" in "Richie". */
.level-section[data-level="01"]{--lv:#ff8c3c;}
html.neon .level-section[data-level="01"] .level-h2{
  color:rgba(255,140,60,.14);-webkit-text-stroke-color:#ffb27a;
  filter:drop-shadow(0 0 2px rgba(255,140,60,.95)) drop-shadow(0 0 10px rgba(255,140,60,.5)) drop-shadow(0 0 24px rgba(255,120,40,.26));
}
html.neon .level-section[data-level="01"] .info-card:nth-child(2){--c:#c882ff;}
/* the small icon in each card (the mountain and the star) and its circle take their card's tube colour */
html.neon .level-section[data-level="01"] .info-card .ic-icon{
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,#0c0e25);
  box-shadow:0 0 0 1.4px color-mix(in srgb,var(--c) 80%,transparent),0 0 12px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--c) 28%,transparent);
}
html.neon .level-section[data-level="01"] .info-card .ic-icon svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--c) 90%,transparent));}

/* ===== koi circle, end of the switch to night: the night picture's own black is a hair darker than the page, so a faint
   dark disc used to show for the last moment and then snap away. A sheet of the exact page colour now sits over the
   picture in lighten mode (it only lifts what is darker than the page, the koi and glow stay untouched) and fades in over
   the second half of the switch, so the disc melts into the page instead of jumping. Plain video path only: on a web address
   the WebGL picture is see-through mid-switch, and this sheet would show there as a dark disc ===== */
.hero-avatar:not(.gl-on)::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#090a14;mix-blend-mode:lighten;
  opacity:0;transition:opacity .2s ease;}
html.neon .hero-avatar:not(.gl-on)::after{opacity:1;transition:opacity .5s ease .4s;}
html.neon.neon-sunset .hero-avatar:not(.gl-on)::after{transition:opacity .8s ease .75s;}

/* ===== night refresh: when the WebGL picture takes over from the plain night video, the video must go at once. It used to
   fade out over 0.8s underneath the (partly see-through) WebGL picture, so the glow showed twice and the koi flashed bright
   for a second after every refresh ===== */
.hero-avatar.gl-on .koi-video-dark{transition:none !important;}

/* Hero skill labels (Product Design, Visual Design, Concept & Illustration), night: brighter, and tinted with their column's tube colour */
html.neon .hero-stats .stat-label{
  color:color-mix(in srgb,rgb(var(--sc)) 38%,#f2f4ff);
  text-shadow:0 0 8px rgba(var(--sc),.38);
}

/* Section descriptions and the process / side texts under the glowing headings: the same brightness as the project card text */
html.neon .section-desc,html.neon .process .section-desc,html.neon .process-intro p,html.neon .process-step p,
html.neon .side-intro p,html.neon #graphic .graphic-intro p{color:#e0e3f8;}

/* ===== Hero headline: same tube recipe as the logo (thin bright ring, no fill, 3-step glow) ===== */
  html.neon .hero h1 .nl1,html.neon .hero h1 .nt,html.neon .hero h1 .accent{
    color:transparent;background:none;
    -webkit-text-stroke:1.4px color-mix(in srgb,rgb(var(--lc)) 70%,#fff);
    filter:drop-shadow(0 0 2px rgba(var(--lc),.95)) drop-shadow(0 0 9px rgba(var(--lc),.6)) drop-shadow(0 0 22px rgba(var(--lc),.3));}
  html.neon .hero h1 .nl1,html.neon .hero h1 .nt{--lc:46,242,224;}
  html.neon .hero h1 .accent{--lc:255,131,45;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 2px rgba(255,131,45,.98)) drop-shadow(0 0 10px rgba(255,128,40,.66)) drop-shadow(0 0 26px rgba(255,122,35,.35));}

/* ===== All night-mode titles: one tube recipe, the same as the logo and hero headline (hollow, bright ring, 3-step glow). Colour and glow only, no sizes ===== */
html.neon #work h2,html.neon #graphic h2,html.neon #process h2,html.neon #side h2,
html.neon .about-main h2 .ht,html.neon .contact-inner h2 .ht{--tcol:rgb(var(--hc));}
html.neon .about-main h2 .ph{--tcol:rgb(255,201,77);}
html.neon .contact-inner h2 .ht{--tcol:rgb(46,242,224);}
html.neon .contact-inner h2 .boba-accent{--tcol:rgb(255,150,90);}
html.neon .prologue h1{--tcol:rgb(255,150,90);}
html.neon .cs-title,html.neon .cs-h2{--tcol:var(--pc);}
html.neon .level-h2{--tcol:var(--lv);}

html.neon #work h2,html.neon #graphic h2,html.neon #process h2,html.neon #side h2,
html.neon .about-main h2 .ht,html.neon .about-main h2 .ph,
html.neon .contact-inner h2 .ht,html.neon .contact-inner h2 .boba-accent,
html.neon .prologue h1,html.neon .cs-title,html.neon .cs-h2,html.neon .level-h2{
  color:transparent;
  -webkit-text-stroke-color:color-mix(in srgb,var(--tcol) 70%,#fff);
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--tcol) 95%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--tcol) 60%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--tcol) 30%,transparent));
}

/* the full stop after "design" is lit in the same orange as the word */
html.neon .hero h1 .nl2 > .nt:last-child{--lc:255,131,45;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 2px rgba(255,131,45,.98)) drop-shadow(0 0 10px rgba(255,128,40,.66)) drop-shadow(0 0 26px rgba(255,122,35,.35));}

/* ===== Neon power-on: the headline lights up like a sign, a few stutters then steady. Class is added by neon.js for about 3s ===== */
@keyframes nxFlickA{
  0%{opacity:0}
  5%{opacity:.95;filter:drop-shadow(0 0 3px rgba(var(--lc),1)) drop-shadow(0 0 14px rgba(var(--lc),.95)) drop-shadow(0 0 36px rgba(var(--lc),.7))}
  8%{opacity:.08}
  13%{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--lc),1)) drop-shadow(0 0 14px rgba(var(--lc),.95)) drop-shadow(0 0 36px rgba(var(--lc),.7))}
  17%{opacity:.18}
  22%{opacity:.9}
  26%{opacity:.25}
  34%{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--lc),1)) drop-shadow(0 0 14px rgba(var(--lc),.9)) drop-shadow(0 0 34px rgba(var(--lc),.6))}
  39%{opacity:.6}
  46%,100%{opacity:1}
}
@keyframes nxFlickB{
  0%{opacity:0}
  8%{opacity:.9}
  11%{opacity:.1}
  18%{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--lc),1)) drop-shadow(0 0 14px rgba(var(--lc),.95)) drop-shadow(0 0 36px rgba(var(--lc),.7))}
  23%{opacity:.3}
  29%{opacity:.95}
  33%{opacity:.15}
  42%{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--lc),1)) drop-shadow(0 0 14px rgba(var(--lc),.9)) drop-shadow(0 0 34px rgba(var(--lc),.6))}
  48%{opacity:.7}
  56%,100%{opacity:1}
}
/* "design" and its full stop get an electric shock: a few hard strobes with no easing, one short dark gap, then it holds */
@keyframes nxFlickT{
  0.0%{opacity:0.05;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 1px rgba(255,140,60,.3))}
  4.29%{opacity:1;-webkit-text-stroke-color:#ffa24f;filter:drop-shadow(0 0 4px rgba(255,170,90,1)) drop-shadow(0 0 16px rgba(255,115,25,1)) drop-shadow(0 0 40px rgba(255,95,10,.9))}
  8.57%{opacity:0.05;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 1px rgba(255,140,60,.3))}
  13.57%{opacity:1;-webkit-text-stroke-color:#ffa24f;filter:drop-shadow(0 0 4px rgba(255,170,90,1)) drop-shadow(0 0 16px rgba(255,115,25,1)) drop-shadow(0 0 40px rgba(255,95,10,.9))}
  17.14%{opacity:0.1;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 1px rgba(255,140,60,.3))}
  21.43%{opacity:0.9;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 2px rgba(255,131,45,.98)) drop-shadow(0 0 10px rgba(255,128,40,.66)) drop-shadow(0 0 26px rgba(255,122,35,.35))}
  34.29%{opacity:0.05;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 1px rgba(255,140,60,.3))}
  38.57%{opacity:1;-webkit-text-stroke-color:#ffa24f;filter:drop-shadow(0 0 4px rgba(255,170,90,1)) drop-shadow(0 0 16px rgba(255,115,25,1)) drop-shadow(0 0 40px rgba(255,95,10,.9))}
  42.86%{opacity:0.3;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 1px rgba(255,140,60,.3))}
  46.43%{opacity:1;-webkit-text-stroke-color:#ffa24f;filter:drop-shadow(0 0 4px rgba(255,170,90,1)) drop-shadow(0 0 16px rgba(255,115,25,1)) drop-shadow(0 0 40px rgba(255,95,10,.9))}
  52.86%{opacity:0.9;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 2px rgba(255,131,45,.98)) drop-shadow(0 0 10px rgba(255,128,40,.66)) drop-shadow(0 0 26px rgba(255,122,35,.35))}
  57.14%{opacity:1;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 2px rgba(255,131,45,.98)) drop-shadow(0 0 10px rgba(255,128,40,.66)) drop-shadow(0 0 26px rgba(255,122,35,.35))}
  100.0%{opacity:1;-webkit-text-stroke-color:#ff8630;filter:drop-shadow(0 0 2px rgba(255,131,45,.98)) drop-shadow(0 0 10px rgba(255,128,40,.66)) drop-shadow(0 0 26px rgba(255,122,35,.35))}
}
html.neon.neon-flick .hero h1 .accent,html.neon.neon-flick .hero h1 .nl2 > .nt:last-child{animation:nxFlickT 1.4s steps(1,end) .15s both;}
@media (prefers-reduced-motion:reduce){html.neon.neon-flick .hero h1 .accent,html.neon.neon-flick .hero h1 .nl2 > .nt:last-child{animation:none;}}

/* Graphic page: group labels inside Menu & Packaging */
html.neon .grp-label{color:#ffe6a6;text-shadow:0 0 10px rgba(255,201,77,.45);}

/* Safari clips a glow (drop-shadow filter) on an inline word at the edge of its text box, which showed as a faint rectangle round "design." The word and the full stop get their own box with room all round for the glow; the negative margin keeps the line exactly where it was. */
html.neon .hero h1 .accent,html.neon .hero h1 .nl2 > .nt:last-child{display:inline-block;padding:.32em .5em;margin:-.32em -.5em;}


/* ===== Logo switch, crossfade: the plain name and the neon outline overlap, so the name never goes blank and the grey stage is short.
   Going dark the outline and glow come in from 20% of the switch to the end, going back to light they leave over the first 80%.
   (the matching fill fade is in neon.js) ===== */
html.neon-anim.neon .logo .lg{transition:-webkit-text-stroke-color .64s linear .16s,filter .64s linear .16s !important;}
html.neon-anim:not(.neon) .logo .lg{transition:-webkit-text-stroke-color .64s linear 0s,filter .64s linear 0s !important;}
html.neon-anim.neon-sunset.neon .logo .lg{transition:-webkit-text-stroke-color 1.04s linear .41s,filter 1.04s linear .41s !important;}
html.neon-anim.neon-sunset:not(.neon) .logo .lg{transition:-webkit-text-stroke-color 1.04s linear .15s,filter 1.04s linear .15s !important;}