*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: var(--fs-14)/1.6 Inter, system-ui, -apple-system, "Noto Sans JP", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(11,98,135,0.16) 1px, transparent 0);
  background-size: 20px 20px;
  background-position: -19px -19px;
  will-change: transform;
}

#grid-boost{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;


  background-image:
    radial-gradient(rgba(var(--blue-light-rgb), 0.55) 1px, transparent 0);
  background-size: 20px 20px;
  background-position: -19px -19px;


  -webkit-mask-image: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.8) 3%,
    rgba(0,0,0,0) 12%
  );
  mask-image: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.8) 3%,
    rgba(0,0,0,0) 12%
  );

  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .3s ease-out;
  will-change: opacity;
  contain: layout style paint;
}

#sig-anchor {
  position: fixed;
  top: 15px;
  right: 20px;
  width: 100px;
  height: 400px;
  pointer-events: none;
  --glow: 0;
  --sx: -200%;
  --sy: -200%;
  contain: layout style;
}

.sig-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sig-base {
  filter: invert(8%) sepia(31%) saturate(1044%) hue-rotate(155deg) brightness(92%) contrast(97%);
}

.sig-outline-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: mask-image, -webkit-mask-image;

    -webkit-mask-image: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 50%),
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,1)  25%,
    rgba(0,0,0,0)  60%
  );
  mask-image: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 50%),
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,1)  25%,
    rgba(0,0,0,0)  60%
  );
}

.sig-lit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  --mask-grow: 1px;

  -webkit-mask-image: url('/assets/images/anmiteiji_outline.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: calc(-1 * var(--mask-grow)) calc(-1 * var(--mask-grow));
  -webkit-mask-size: calc(100% + var(--mask-grow) * 2)
                     calc(100% + var(--mask-grow) * 2);

  mask-image: url('/assets/images/anmiteiji_outline.svg');
  mask-repeat: no-repeat;
  mask-position: calc(-1 * var(--mask-grow)) calc(-1 * var(--mask-grow));
  mask-size: calc(100% + var(--mask-grow) * 2)
             calc(100% + var(--mask-grow) * 2);

  filter: blur(3px) hue-rotate(165deg);

}

h1,h2,h3{margin:0 0 var(--gap-2); line-height:1.25; letter-spacing:.1px}
h1{font-size:var(--fs-28); font-weight:700}
h2{font-size:var(--fs-22); font-weight:650}
h3{font-size:var(--fs-18); font-weight:600}
p{margin:0 0 var(--gap-2)}
small,.muted{opacity:.78}

a{color:var(--blue-light); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background: rgba(6,216,232,.25)}

.grid-bg{
  background-image:
    radial-gradient(transparent 98%, rgba(255,255,255,.05) 99%),
    linear-gradient(transparent 31px, rgba(255,255,255,.035) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.035) 32px);
  background-size: 480px 480px, 32px 32px, 32px 32px;
}

.project-divider-text {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.pad{padding:var(--gap-4)}
.center{display:flex; align-items:center; justify-content:center}
.hidden{display:none !important}

.kanji{font-feature-settings:"palt" 1}