:root{
  --bg:#06050b; --bg2:#180a2e; --ink:#f4f1ff; --mute:#8b86a8; --dim:#4d486a;
  --sh:0;
  --vi:color-mix(in srgb,#ff2d55 calc(var(--sh)*100%),#9b5cff);
  --ac:color-mix(in srgb,#ff5d7d calc(var(--sh)*100%),#3ee0c5);
  --ichor:#9b5cff; --teal:#3ee0c5; --gold:#e0b25a; --gold2:#a8791f; --gold3:#5e4319; --rose:#ff4f8b;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root:not([data-theme="light"]){ color-scheme:dark; }
:root[data-theme="dark"]{ color-scheme:dark; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; }
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Noto Sans JP','Syncopate',system-ui,sans-serif;
  overflow-x:hidden;
}
body::before{ /* aurora wash that lives behind everything */
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60vw 50vh at 15% 10%, rgba(155,92,255,.22), transparent 70%),
    radial-gradient(50vw 45vh at 90% 30%, rgba(62,224,197,.13), transparent 70%),
    radial-gradient(70vw 60vh at 50% 110%, rgba(255,79,139,.14), transparent 70%),
    linear-gradient(180deg,#06050b,#0c0716 60%,#06050b);
}

/* scroll progress */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--teal),var(--ichor),var(--rose));box-shadow:0 0 12px var(--ichor)}