@font-face { font-family: "Zen Maru Gothic"; font-weight: 700; font-display: swap;
  src: url("fonts/zen-maru-gothic-700.woff2") format("woff2"); unicode-range: U+0-10FFFF; }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 900; font-display: swap;
  src: url("fonts/zen-maru-gothic-900.woff2") format("woff2"); unicode-range: U+0-10FFFF; }

:root { --head-h: 64px; }
@media (max-width: 599px) { :root { --head-h: 56px; } }

.site-head, .site-foot, .to-top {
  --c-ink: #16203A;
  --c-ink-mid: #384464;
  --c-ink-sub: #56607E;
  --c-accent: #2F5BFF;
  --c-accent-ink: #2449E0;
  --c-rm: 14px;
  --c-rl: 26px;
  --c-head: "Zen Maru Gothic", "Zen Kaku Gothic New", var(--k-gothic);
  --c-body: "Zen Kaku Gothic New", var(--k-gothic);
  --c-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --c-hazard: repeating-linear-gradient(-45deg, #F2C200 0 10px, #111010 10px 20px);
}

.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--k-gutter);
  font-family: var(--c-body); line-height: 1.9;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-head.is-solid { position: sticky; z-index: 40; }
.site-head.is-scrolled, .site-head.is-solid, html:not(.js) .site-head {
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 1px 0 rgba(22, 32, 58, .08);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--c-ink); text-decoration: none; }
.brand-mark { display: block; width: 36px; height: 36px; flex: none; transition: transform .25s var(--c-ease-out); }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); } }
.brand-text { font-size: var(--k-fs-xs); color: var(--c-ink-mid); line-height: 1.3; letter-spacing: .06em; }
.brand-text b { display: block; font-family: var(--c-head); font-weight: 900; font-size: var(--k-fs-h4); color: var(--c-ink); letter-spacing: .04em; }
.site-nav { display: flex; gap: 4px; white-space: nowrap; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--c-rm);
  font-family: var(--c-head); font-size: var(--k-fs-sm); font-weight: 700; color: var(--c-ink); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.site-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s var(--c-ease-out); }
.site-nav a:hover { background: rgba(255, 255, 255, .9); color: var(--c-accent-ink); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover::after { transform: scaleX(1); } }
@media (max-width: 599px) {
  .brand-text { display: none; }
  .site-nav a { padding: 0 9px; }
  .site-nav a::after { left: 9px; right: 9px; }
}
@media (max-width: 359px) { .site-nav a { padding: 0 6px; font-size: var(--k-fs-xs); } }

.site-foot {
  position: relative; z-index: 1; margin: 0 var(--k-gutter) calc(var(--floor-h, 0px) + 96px); padding: var(--k-sp-4); border-radius: var(--c-rl);
  font-family: var(--c-body); line-height: 1.9; letter-spacing: .04em; color: var(--c-ink);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(22, 32, 58, .06), 0 6px 18px rgba(22, 32, 58, .08);
}
.site-foot.is-sub { margin-top: var(--k-sp-5); }
@media (max-width: 359px) { .site-foot { padding: 20px; } .foot-title { font-size: 16px; } }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--k-sp-3); max-width: var(--k-max); margin: 0 auto; }
.foot-title { margin: 0; font-family: var(--c-head); font-weight: 900; font-size: var(--k-fs-h3); color: var(--c-ink); letter-spacing: 0; }
.foot-note { margin: 6px 0 0; font-size: var(--k-fs-sm); color: var(--c-ink-mid); line-height: 1.8; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin: 0; padding: 0; list-style: none; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--k-fs-sm); font-weight: 700; color: var(--c-accent-ink); }
.foot-copy { max-width: var(--k-max); margin: var(--k-sp-3) auto 0; font-family: var(--c-body); font-size: var(--k-fs-xs); color: var(--c-ink-sub); letter-spacing: .08em; }
.rift { position: relative; display: inline-block; width: 4px; height: 4px; margin-left: 2px; padding: 0; border: 0; border-radius: 1px; background: var(--c-ink-sub); opacity: .6; vertical-align: baseline; cursor: pointer; touch-action: manipulation; }
.rift::before { content: ""; position: absolute; inset: -20px; }
html.motion .rift { animation: rift-wink 9s steps(1) infinite; }
@media (hover: hover) and (pointer: fine) { html .rift:hover { animation: none; background: #E0261B; opacity: 1; } }
@keyframes rift-wink { 0%, 97% { background-color: #56607E; } 97.5%, 98.4% { background-color: #E0261B; } 98.5% { background-color: #56607E; } }

.to-top {
  position: fixed; right: 16px; bottom: calc(var(--floor-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 35;
  display: block; width: 52px; height: 64px; border-radius: 16px; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.to-top:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.to-top-bot { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 6px 10px rgba(22, 32, 58, .24)); transition: transform .2s var(--c-ease-out); }
.tt-flame { fill: #9FF0FF; opacity: .9; transform-box: fill-box; transform-origin: 50% 0; }
.tt-ant { fill: none; stroke: #C3CCDB; stroke-width: 2; stroke-linecap: round; }
.tt-lamp { fill: #FFC93D; }
.tt-body { fill: #FFFFFF; stroke: #C3CCDB; stroke-width: 1.5; }
.tt-side { fill: #E3E9F2; }
.tt-visor { fill: #1B2340; }
.tt-arrow { fill: none; stroke: #6FE3FF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tt-label { font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif; font-size: 8.5px; font-weight: 900; letter-spacing: .14em; fill: #2449E0; }
.tt-grim { display: none; }
html.motion .tt-flame { animation: tt-flame .18s ease-in-out infinite alternate; }
@keyframes tt-flame { from { transform: scaleY(.78); } to { transform: scaleY(1.08); } }
.to-top:active .to-top-bot { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover .to-top-bot { transform: translateY(-4px); }
  .to-top:hover .tt-flame { fill: #CFF8FF; }
}
.chrome-js .to-top { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .2s var(--c-ease-out), transform .2s var(--c-ease-out), visibility 0s linear .2s; }
.chrome-js .to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--c-ease-out), transform .2s var(--c-ease-out), visibility 0s; }
html.is-watching .to-top.is-on { opacity: 0; visibility: hidden; }

html.grim .site-head, html.grim .site-head.is-scrolled, html.grim .site-head.is-solid { background: #0E0D0C; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.grim .site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--c-hazard); }
html.grim .brand { color: #EDE6D6; }
html.grim .brand-mark { filter: grayscale(1) contrast(1.3) brightness(.85); }
html.grim .brand-text { color: #B9AE95; }
html.grim .brand-text b { color: #FFFFFF; }
html.grim .site-nav a { color: #EDE6D6; font-family: var(--c-body); font-weight: 900; border-radius: 0; }
html.grim .site-nav a::after { background: #D7261E; }
html.grim .site-nav a:hover { background: #D7261E; color: #FFFFFF; }
html.grim .site-foot { border-radius: 0; background: #0E0D0C; color: #EDE6D6; box-shadow: 0 -6px 0 #F2C200; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.grim .site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: var(--c-hazard); }
html.grim .foot-title { font-family: var(--c-body); color: #FFFFFF; }
html.grim .foot-note { color: #B9AE95; }
html.grim .foot-links a { color: #F2C200; }
html.grim .foot-copy { color: #8E8472; }
html.grim .rift { background: #E0261B; opacity: .8; }
html.grim.motion .rift { animation: none; }
html.grim .to-top-bot { rotate: 7deg; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
html.grim .to-top:focus-visible { outline-color: #F2C200; }
html.grim .tt-flame { fill: #FF8A3D; opacity: .7; }
html.grim .tt-ant { stroke: #6E665A; }
html.grim .tt-lamp { fill: #E0261B; }
html.grim .tt-body { fill: #948A78; stroke: #3A332D; }
html.grim .tt-side { fill: #766D5E; }
html.grim .tt-visor { fill: #121113; }
html.grim .tt-arrow { stroke: #E0261B; }
html.grim .tt-label { fill: #15120F; }
html.grim .tt-grim { display: inline; }

html.grim:not(.chrome-ready) .site-nav, html.grim:not(.chrome-ready) .foot-note, html.grim:not(.chrome-ready) .foot-links { visibility: hidden; }
html.grim-boot { background: #0E0D0C; }
html.grim-boot body { visibility: hidden; }
html.is-rift-flip .site-head, html.is-rift-flip .site-foot, html.is-rift-flip .to-top-bot { animation: c-rift .36s steps(6, end) 1; }
@keyframes c-rift {
  0%, 100% { filter: none; }
  20% { filter: contrast(1.8) saturate(0); }
  45% { filter: hue-rotate(90deg) contrast(1.4); }
  70% { filter: saturate(2.2) brightness(.8); }
}
.c-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .site-head, .site-nav a, .brand-mark { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
  .brand:hover .brand-mark, .to-top:hover .to-top-bot { transform: none; }
  .site-nav a::after { display: none; }
  .chrome-js .to-top, .chrome-js .to-top.is-on { transform: none; }
  html.is-rift-flip .site-head, html.is-rift-flip .site-foot, html.is-rift-flip .to-top-bot { animation: none; }
}