/* PetPal chapters at night.
   1) Every chapter is its own stacking context, so the star canvas that dark/stars.js puts at z -1 inside it sits above the chapter
      colour and under the text and cards.
   2) The chapters in the card colour (02, 04, 06 and 08) fade in from the page colour at the top and fade back out at the bottom,
      so there is no hard line where one chapter meets the next. The last one (08) keeps its solid bottom, because the strip at the top
      of the closing scene already continues from the same colour (see bgfx-pet.css).
   3) 03, 05 and 07 sit on the page colour. The dividers between chapters were taken out on purpose. */
html.neon .level-section,html.neon .epilogue{isolation:isolate;}

html.neon .level-section[data-level="02"]{background:none !important;}

html.neon .level-section[data-level="04"]{background:none !important;}

html.neon .level-section[data-level="06"]{background:none !important;}

html.neon .level-section[data-level="08"]{background:none !important;}

/* 03 and 05 have no chapter colour of their own, 07 sits on the page colour */
html.neon .level-section[data-level="03"]{
  background-color:var(--bg) !important;}

html.neon .level-section[data-level="05"]{
  background-color:var(--bg) !important;}

html.neon .level-section[data-level="07"]{
  background-color:var(--bg) !important;}


/* Each chapter gets its own atmosphere. The old corner aurora (::before, switched off at night) is reused for a soft nebula
   of the chapter colour behind the mascot on the left. */
html.neon .level-section::before{
  content:"";opacity:1;z-index:-2;mix-blend-mode:screen;
  background:
    radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 8%,transparent) 0,color-mix(in srgb,var(--lv) 3%,transparent) 55%,transparent 100%),
    radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 5%,transparent) 0,transparent 100%);}

/* A small constellation in the empty top left corner of every chapter, drawn to hint at what the chapter is about
   (goal, family hub, discoveries, journey path, branching ideas, zodiac, flow, takeaway). Chapter colour, hair thin lines. */
html.neon .level-section[data-level="01"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ff8c3c%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23ff8c3c%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ff8c3c%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3Cline%20x1=%2250%22%20y1=%22140%22%20x2=%22165%22%20y2=%22100%22/%3E%3Cline%20x1=%22165%22%20y1=%22100%22%20x2=%22280%22%20y2=%2260%22/%3E%3C/g%3E%3Ccircle%20cx=%22280%22%20cy=%2260%22%20r=%2216%22%20fill=%22none%22%20stroke=%22%23ff8c3c%22%20stroke-width=%22.8%22%20stroke-dasharray=%222%203%22%20opacity=%22.6%22/%3E%3Ccircle%20cx=%2250%22%20cy=%22140%22%20r=%221.6%22%20fill=%22%23ff8c3c%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22165%22%20cy=%22100%22%20r=%221.8%22%20fill=%22%23ff8c3c%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22280%22%20cy=%2260%22%20r=%229%22%20fill=%22%23ff8c3c%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22280%22%20cy=%2260%22%20r=%223%22%20fill=%22%23ff8c3c%22%20opacity=%221%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 8%,transparent) 0,color-mix(in srgb,var(--lv) 3%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 5%,transparent) 0,transparent 100%);}
html.neon .level-section[data-level="02"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffb454%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23ffb454%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ffb454%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3Cline%20x1=%22170%22%20y1=%22100%22%20x2=%2270%22%20y2=%2250%22/%3E%3Cline%20x1=%22170%22%20y1=%22100%22%20x2=%22260%22%20y2=%2240%22/%3E%3Cline%20x1=%22170%22%20y1=%22100%22%20x2=%22285%22%20y2=%22140%22/%3E%3Cline%20x1=%22170%22%20y1=%22100%22%20x2=%2295%22%20y2=%22160%22/%3E%3C/g%3E%3Ccircle%20cx=%22170%22%20cy=%22100%22%20r=%2210%22%20fill=%22%23ffb454%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22170%22%20cy=%22100%22%20r=%223.2%22%20fill=%22%23ffb454%22%20opacity=%221%22/%3E%3Ccircle%20cx=%2270%22%20cy=%2250%22%20r=%221.8%22%20fill=%22%23ffb454%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22260%22%20cy=%2240%22%20r=%221.8%22%20fill=%22%23ffb454%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22285%22%20cy=%22140%22%20r=%221.8%22%20fill=%22%23ffb454%22%20opacity=%221%22/%3E%3Ccircle%20cx=%2295%22%20cy=%22160%22%20r=%221.8%22%20fill=%22%23ffb454%22%20opacity=%221%22/%3E%3Ccircle%20cx=%2230%22%20cy=%22110%22%20r=%221%22%20fill=%22%23ffb454%22%20opacity=%220.5%22/%3E%3Ccircle%20cx=%22200%22%20cy=%22175%22%20r=%221%22%20fill=%22%23ffb454%22%20opacity=%220.5%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2285%22%20r=%221%22%20fill=%22%23ffb454%22%20opacity=%220.5%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%),linear-gradient(180deg,rgba(18,19,42,0) 0,rgba(18,19,42,.2) 50px,rgba(18,19,42,.5) 110px,rgba(18,19,42,.8) 170px,#12132a 230px,#12132a calc(100% - 230px),rgba(18,19,42,.8) calc(100% - 170px),rgba(18,19,42,.5) calc(100% - 110px),rgba(18,19,42,.2) calc(100% - 50px),rgba(18,19,42,0) 100%);}
html.neon .level-section[data-level="03"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffd24d%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23ffd24d%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ffd24d%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3Cline%20x1=%2260%22%20y1=%22150%22%20x2=%22170%22%20y2=%2240%22/%3E%3Cline%20x1=%22170%22%20y1=%2240%22%20x2=%22280%22%20y2=%22140%22/%3E%3Cline%20x1=%22280%22%20y1=%22140%22%20x2=%2260%22%20y2=%22150%22/%3E%3Cline%20x1=%22170%22%20y1=%2240%22%20x2=%22170%22%20y2=%22110%22/%3E%3C/g%3E%3Ccircle%20cx=%2260%22%20cy=%22150%22%20r=%221.8%22%20fill=%22%23ffd24d%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22170%22%20cy=%2240%22%20r=%2210%22%20fill=%22%23ffd24d%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22170%22%20cy=%2240%22%20r=%223%22%20fill=%22%23ffd24d%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22280%22%20cy=%22140%22%20r=%221.8%22%20fill=%22%23ffd24d%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22170%22%20cy=%22110%22%20r=%221.4%22%20fill=%22%23ffd24d%22%20opacity=%220.8%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%);}
html.neon .level-section[data-level="04"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23b79cff%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23b79cff%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23b79cff%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3C/g%3E%3Cpath%20d=%22M20,160%20C80,160%2090,60%20150,80%20S230,170%20270,110%20S310,50%20322,40%22%20fill=%22none%22%20stroke=%22%23b79cff%22%20stroke-width=%221%22%20stroke-dasharray=%221.5%205%22%20stroke-linecap=%22round%22%20opacity=%22.7%22/%3E%3Ccircle%20cx=%2220%22%20cy=%22160%22%20r=%221.8%22%20fill=%22%23b79cff%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22150%22%20cy=%2280%22%20r=%221.8%22%20fill=%22%23b79cff%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22270%22%20cy=%22110%22%20r=%221.8%22%20fill=%22%23b79cff%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22322%22%20cy=%2240%22%20r=%2210%22%20fill=%22%23b79cff%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22322%22%20cy=%2240%22%20r=%223%22%20fill=%22%23b79cff%22%20opacity=%221%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%),linear-gradient(180deg,rgba(18,19,42,0) 0,rgba(18,19,42,.2) 50px,rgba(18,19,42,.5) 110px,rgba(18,19,42,.8) 170px,#12132a 230px,#12132a calc(100% - 230px),rgba(18,19,42,.8) calc(100% - 170px),rgba(18,19,42,.5) calc(100% - 110px),rgba(18,19,42,.2) calc(100% - 50px),rgba(18,19,42,0) 100%);}
html.neon .level-section[data-level="05"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ff9a5a%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23ff9a5a%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ff9a5a%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3Cline%20x1=%2230%22%20y1=%22100%22%20x2=%22150%22%20y2=%2235%22/%3E%3Cline%20x1=%2230%22%20y1=%22100%22%20x2=%22160%22%20y2=%22100%22/%3E%3Cline%20x1=%2230%22%20y1=%22100%22%20x2=%22150%22%20y2=%22165%22/%3E%3Cline%20x1=%22150%22%20y1=%2235%22%20x2=%22290%22%20y2=%2215%22/%3E%3Cline%20x1=%22150%22%20y1=%2235%22%20x2=%22300%22%20y2=%2260%22/%3E%3Cline%20x1=%22160%22%20y1=%22100%22%20x2=%22300%22%20y2=%2260%22/%3E%3Cline%20x1=%22160%22%20y1=%22100%22%20x2=%22290%22%20y2=%22105%22/%3E%3Cline%20x1=%22150%22%20y1=%22165%22%20x2=%22300%22%20y2=%22150%22/%3E%3Cline%20x1=%22150%22%20y1=%22165%22%20x2=%22285%22%20y2=%22190%22/%3E%3C/g%3E%3Ccircle%20cx=%2230%22%20cy=%22100%22%20r=%222%22%20fill=%22%23ff9a5a%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22150%22%20cy=%2235%22%20r=%221.7%22%20fill=%22%23ff9a5a%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22160%22%20cy=%22100%22%20r=%221.7%22%20fill=%22%23ff9a5a%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22150%22%20cy=%22165%22%20r=%221.7%22%20fill=%22%23ff9a5a%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22290%22%20cy=%2215%22%20r=%221.3%22%20fill=%22%23ff9a5a%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22300%22%20cy=%2260%22%20r=%221.3%22%20fill=%22%23ff9a5a%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22290%22%20cy=%22105%22%20r=%221.3%22%20fill=%22%23ff9a5a%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22300%22%20cy=%22150%22%20r=%221.3%22%20fill=%22%23ff9a5a%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22285%22%20cy=%22190%22%20r=%221.3%22%20fill=%22%23ff9a5a%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22290%22%20cy=%22105%22%20r=%2210%22%20fill=%22%23ff9a5a%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22290%22%20cy=%22105%22%20r=%223%22%20fill=%22%23ff9a5a%22%20opacity=%221%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%);}
html.neon .level-section[data-level="06"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ff6fae%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23ff6fae%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ff6fae%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3Cline%20x1=%2240%22%20y1=%22150%22%20x2=%2290%22%20y2=%22110%22/%3E%3Cline%20x1=%2290%22%20y1=%22110%22%20x2=%22140%22%20y2=%22125%22/%3E%3Cline%20x1=%22140%22%20y1=%22125%22%20x2=%22190%22%20y2=%2280%22/%3E%3Cline%20x1=%22190%22%20y1=%2280%22%20x2=%22240%22%20y2=%2295%22/%3E%3Cline%20x1=%22240%22%20y1=%2295%22%20x2=%22290%22%20y2=%2245%22/%3E%3Cline%20x1=%22240%22%20y1=%2295%22%20x2=%22300%22%20y2=%22120%22/%3E%3Cline%20x1=%22300%22%20y1=%22120%22%20x2=%22235%22%20y2=%22150%22/%3E%3Cline%20x1=%22235%22%20y1=%22150%22%20x2=%22140%22%20y2=%22125%22/%3E%3C/g%3E%3Ccircle%20cx=%2240%22%20cy=%22150%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%2290%22%20cy=%22110%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22140%22%20cy=%22125%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22190%22%20cy=%2280%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22240%22%20cy=%2295%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22290%22%20cy=%2245%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22300%22%20cy=%22120%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22235%22%20cy=%22150%22%20r=%221.6%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22190%22%20cy=%2280%22%20r=%229%22%20fill=%22%23ff6fae%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22190%22%20cy=%2280%22%20r=%222.8%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22290%22%20cy=%2245%22%20r=%227%22%20fill=%22%23ff6fae%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22290%22%20cy=%2245%22%20r=%222.2%22%20fill=%22%23ff6fae%22%20opacity=%221%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%),linear-gradient(180deg,rgba(18,19,42,0) 0,rgba(18,19,42,.2) 50px,rgba(18,19,42,.5) 110px,rgba(18,19,42,.8) 170px,#12132a 230px,#12132a calc(100% - 230px),rgba(18,19,42,.8) calc(100% - 170px),rgba(18,19,42,.5) calc(100% - 110px),rgba(18,19,42,.2) calc(100% - 50px),rgba(18,19,42,0) 100%);}
html.neon .level-section[data-level="07"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%232ef2e0%22%20stop-opacity=%22.3%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%232ef2e0%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%232ef2e0%22%20stop-opacity=%22.3%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%20fill=%22none%22%3E%3Cline%20x1=%22320%22%20y1=%2245%22%20x2=%22303%22%20y2=%2222%22/%3E%3Cline%20x1=%22303%22%20y1=%2222%22%20x2=%22244%22%20y2=%2248%22/%3E%3Cline%20x1=%22244%22%20y1=%2248%22%20x2=%22237%22%20y2=%2285%22/%3E%3Cline%20x1=%22237%22%20y1=%2285%22%20x2=%22268%22%20y2=%22117%22/%3E%3Cline%20x1=%22268%22%20y1=%22117%22%20x2=%22265%22%20y2=%22166%22/%3E%3Cline%20x1=%22237%22%20y1=%2285%22%20x2=%22105%22%20y2=%2278%22/%3E%3Cline%20x1=%22105%22%20y1=%2278%22%20x2=%2220%22%20y2=%22139%22/%3E%3Cline%20x1=%2220%22%20y1=%22139%22%20x2=%22105%22%20y2=%22131%22/%3E%3Cline%20x1=%22105%22%20y1=%22131%22%20x2=%22105%22%20y2=%2278%22/%3E%3Cline%20x1=%22105%22%20y1=%22131%22%20x2=%22265%22%20y2=%22166%22/%3E%3C/g%3E%3Ccircle%20cx=%22265%22%20cy=%22166%22%20r=%2211%22%20fill=%22%232ef2e0%22%20opacity=%22.16%22/%3E%3Ccircle%20cx=%22265%22%20cy=%22166%22%20r=%223.2%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22268%22%20cy=%22117%22%20r=%221.7%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22237%22%20cy=%2285%22%20r=%226%22%20fill=%22%232ef2e0%22%20opacity=%22.14%22/%3E%3Ccircle%20cx=%22237%22%20cy=%2285%22%20r=%222.2%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22244%22%20cy=%2248%22%20r=%221.7%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22303%22%20cy=%2222%22%20r=%221.7%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2245%22%20r=%221.7%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22105%22%20cy=%2278%22%20r=%221.7%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%22105%22%20cy=%22131%22%20r=%221.7%22%20fill=%22%232ef2e0%22/%3E%3Ccircle%20cx=%2220%22%20cy=%22139%22%20r=%226%22%20fill=%22%232ef2e0%22%20opacity=%22.14%22/%3E%3Ccircle%20cx=%2220%22%20cy=%22139%22%20r=%222.2%22%20fill=%22%232ef2e0%22/%3E%3C/svg%3E") calc(11vw + 2px) 21%/320px 188px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%);}
html.neon .level-section[data-level="08"]::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22340%22%20height=%22200%22%20viewBox=%220%200%20340%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20x2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%238fb0ff%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%238fb0ff%22%20stop-opacity=%22.6%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%238fb0ff%22%20stop-opacity=%22.25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20stroke=%22url%28%23g%29%22%20stroke-width=%22.8%22%3E%3Cline%20x1=%2270%22%20y1=%2250%22%20x2=%22128%22%20y2=%22100%22/%3E%3Cline%20x1=%22212%22%20y1=%22100%22%20x2=%22270%22%20y2=%2240%22/%3E%3C/g%3E%3Cpath%20d=%22M170,58%20L177,93%20L212,100%20L177,107%20L170,142%20L163,107%20L128,100%20L163,93%20Z%22%20fill=%22%238fb0ff%22%20opacity=%22.9%22/%3E%3Ccircle%20cx=%22170%22%20cy=%22100%22%20r=%2222%22%20fill=%22%238fb0ff%22%20opacity=%22.12%22/%3E%3Ccircle%20cx=%2270%22%20cy=%2250%22%20r=%221.4%22%20fill=%22%238fb0ff%22%20opacity=%220.7%22/%3E%3Ccircle%20cx=%22270%22%20cy=%2240%22%20r=%221.6%22%20fill=%22%238fb0ff%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22290%22%20cy=%22150%22%20r=%221.2%22%20fill=%22%238fb0ff%22%20opacity=%220.6%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22160%22%20r=%221.6%22%20fill=%22%238fb0ff%22%20opacity=%221%22/%3E%3Ccircle%20cx=%22230%22%20cy=%22170%22%20r=%221%22%20fill=%22%238fb0ff%22%20opacity=%220.5%22/%3E%3Ccircle%20cx=%22115%22%20cy=%2230%22%20r=%221%22%20fill=%22%238fb0ff%22%20opacity=%220.5%22/%3E%3C/svg%3E") 8vw 112px/340px 200px no-repeat,radial-gradient(34% 40% at 24% 74%,color-mix(in srgb,var(--lv) 11%,transparent) 0,color-mix(in srgb,var(--lv) 4%,transparent) 55%,transparent 100%),radial-gradient(20% 22% at 30% 70%,color-mix(in srgb,var(--lv) 7%,transparent) 0,transparent 100%),linear-gradient(180deg,rgba(18,19,42,0) 0,rgba(18,19,42,.2) 50px,rgba(18,19,42,.5) 110px,rgba(18,19,42,.8) 170px,#12132a 230px,#12132a 100%);}
@media (max-width:900px){html.neon .level-section::before{background-size:230px 136px,auto,auto !important;}}

/* The mascots were the brightest thing on the dark page. Take them down a little and soften the cream sticker edge. */
html.neon .level-section img.char-img{
  filter:brightness(.8) saturate(.95) drop-shadow(0 0 1.2px rgba(255,238,214,.55)) drop-shadow(0 0 1px rgba(255,238,214,.35));}


/* Day to night switch. The solid floor of the opening and closing scenes used to be the scene's own background, and a
   gradient background cannot fade, so it jumped to near black at once while the rest of the page faded over about a second.
   That showed as a dark band above and a pale page below with a hard edge between them for a moment. The same floor now
   lives on a layer of its own that fades in and out together with the night layer (.pp-dusk) and the chapters. */
html.neon .opening-sticky,html.neon .closing-sticky{background:none !important;}
.opening-sticky::before,.closing-sticky::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#ffffff 0%,#efeeee 4%,#e2dfdf 8%,#d5d2d2 12%,#cac7c7 16%,#c0bcbc 20%,#b7b3b3 24%,#afabab 28%,#a7a3a3 32%,#828590 36%,#5c6479 40%,#475069 44%,#3a435c 48%,#313952 52%,#2a324a 56%,#222940 60%,#1b2036 64%,#171b2f 68%,#131729 72%,#111425 76%,#0f1221 80%,#0e101f 84%,#0d0f1d 88%,#0c0e1b 92%,#0b0d1a 96%,#0a0c18 100%);}
html.neon .opening-sticky::before,html.neon .closing-sticky::before{opacity:1;}


/* The strip at the top of the closing scene (same gradient as in bgfx-pet.css) now exists by day too, at opacity 0, so it fades in
   with the switch instead of appearing at once. */
.closing-transition::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;z-index:8;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#12132a 0%,rgba(18,19,42,.78) 22%,rgba(18,19,42,.45) 48%,rgba(18,19,42,.18) 75%,rgba(18,19,42,0) 100%);}
html.neon .closing-transition::before{opacity:1;}

/* the light beams in the opening and closing scenes are not needed at night */
html.neon .closing-glow,html.neon .opening-glow{display:none !important;}

/* The soft glow on the ground under the hero jeep now comes up together with the jeep (same timing and curve as the video's rise),
   it used to sit there on its own before the jeep arrived. */
.prologue-scene .ground{--gt:.55;animation:groundIn 1.3s cubic-bezier(.16,1,.3,1) both 1.35s;}
html.neon .prologue-scene .ground{--gt:1;}
@keyframes groundIn{from{opacity:0;transform:translateY(40px) scale(.9);}to{opacity:var(--gt);transform:translateY(-3.5vw) scale(1.07);}}
@media (prefers-reduced-motion:reduce){.prologue-scene .ground{animation:none;opacity:var(--gt);}}

/* The two scene sentences ("Gather your companions..." and "The next chapter is on the road.") were hollow neon tubes with a big glow and hard to read.
   Make them plain solid light text with only a soft dark shadow behind. The "Let's start exploring" and "To be continued" tags keep the neon look. */
html.neon .opening-teaser,html.neon .closing-teaser{
  color:#eef1ff;-webkit-text-fill-color:#eef1ff;-webkit-text-stroke:0;font-weight:700;filter:none;
  text-shadow:0 1px 8px rgba(8,9,22,.75);
}