/* slettvold.org — calm dark, one red accent (Oni Dojo's own pages stay louder) */
:root {
  --bg: #0b0a0c; --bg2: #121014; --card: #161318; --ink: #f2eeef; --muted: #a79da1; --soft: #6f666a;
  --red: #ff3147; --ember: #ffb060; --line: rgba(255, 255, 255, .08); --line-red: rgba(255, 49, 71, .35);
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --jp: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --jpt: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
:root { color-scheme: dark; }   /* the site is dark by design: stops browsers' "force dark" modes from recolouring it (they lightened the SVG diagrams) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: #ff8a96; text-underline-offset: 3px; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
.small { font-size: 14px; color: var(--soft); }
.muted { color: var(--muted); }
.jp { font-family: var(--jp); }

/* header */
header.top { position: sticky; top: 0; z-index: 10; background: rgba(11, 10, 12, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.mon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-family: var(--jp); font-weight: 700; }
.nm { font-weight: 600; letter-spacing: .2px; } .nm b { font-weight: 800; }
nav { display: flex; gap: 4px; }
nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 15px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
nav a i { font-style: normal; font-family: var(--jp); font-size: 10px; color: var(--soft); }
nav a:hover, nav a.on { color: var(--ink); background: var(--bg2); }
nav a.on i { color: var(--red); }
.menu { display: none; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; font-size: 18px; padding: 4px 10px; }

/* blocks */
main { padding: 40px 0 20px; }
.kicker { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--red); font-weight: 800; }
h1 { font-size: 46px; line-height: 1.1; margin: 8px 0 14px; letter-spacing: -.5px; }
h1 .jp { display: block; font-size: 20px; color: var(--muted); letter-spacing: 2px; margin-top: 10px; font-weight: 500; }
h2 { font-size: 26px; margin: 52px 0 6px; letter-spacing: -.2px; }
h2 .jp { font-size: 15px; color: var(--red); margin-left: 8px; font-weight: 500; }
h3 { font-size: 19px; margin: 0 0 4px; }
.lead { font-size: 19px; color: var(--muted); max-width: 680px; margin: 0 0 18px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--line-red); }
.card .g { font-family: var(--jp); font-size: 26px; color: var(--red); line-height: 1; }
.card h3 { margin-top: 10px; }
.card p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.card .go { display: inline-block; margin-top: 10px; font-size: 14px; color: #ff8a96; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin: 6px 6px 0 0; }
.tag.red { border-color: var(--line-red); color: #ff8a96; }

/* home hero */
.hero { display: grid; grid-template-columns: 1fr 260px; gap: 36px; align-items: center; padding: 20px 0 10px; }
.portrait { width: 260px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a1016, #120b0e 70%); border: 1px solid var(--line-red);
  display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 60px rgba(255, 49, 71, .15); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .ph { font-family: var(--jp); font-size: 96px; color: var(--red); opacity: .85; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.btn { display: inline-block; padding: 11px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 15px; }
.btn.red { background: var(--red); color: #fff; }
.btn.line { border: 1px solid var(--line); color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.facts li::before { content: "・"; color: var(--red); }

/* timeline */
.tl { list-style: none; margin: 18px 0 0; padding: 0; border-left: 2px solid var(--line); }
.tl li { position: relative; padding: 0 0 22px 22px; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--red); }
.tl li.next::before { border-style: dashed; border-color: var(--ember); }
.tl .when { font-size: 13px; color: var(--soft); font-weight: 700; letter-spacing: .5px; }
.tl h3 { margin: 2px 0; }
.tl p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }

/* Japanese box */
.jabox { margin-top: 18px; padding: 22px; border-radius: 16px; border: 1px solid var(--line-red); background: linear-gradient(160deg, #1b0d11, var(--card)); }
.jabox p.jp { font-size: 21px; line-height: 2; margin: 0; }
.jabox .en { color: var(--muted); font-size: 15px; margin-top: 10px; }

/* skills */
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.skills ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; }

/* project */
.proj { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.proj img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }

/* notes */
.note { border-top: 1px solid var(--line); padding: 20px 0; }
.note .when { font-size: 13px; color: var(--soft); }
.note h3 { margin: 4px 0; font-size: 21px; }

footer { margin-top: 70px; border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 15px; }
footer .wrap { display: grid; gap: 8px; }
footer .links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer a { color: var(--muted); }

@media (max-width: 860px) {
  .menu { display: block; }
  nav { display: none; position: absolute; top: 62px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; padding: 8px 16px 14px; }
  body.nav-open nav { display: flex; }
  nav a { flex-direction: row; gap: 10px; justify-content: flex-start; padding: 10px; font-size: 17px; }
  nav a i { font-size: 13px; }
  .hero { grid-template-columns: 1fr; gap: 18px; }
  .portrait { width: 170px; order: -1; }
  h1 { font-size: 34px; }
  .grid, .grid.two, .skills { grid-template-columns: 1fr; }
  .proj { grid-template-columns: 1fr; }
  .proj img { max-width: 240px; }
}
h2 .jp.sub { font-family: var(--ui); }

/* ---------- atmosphere (assets/fx.js) ---------- */
body { background: radial-gradient(120% 70% at 50% -10%, #2a0910 0%, #0b0507 55%, #050304 100%) fixed; }
header.top, main, footer { position: relative; z-index: 1; }
#fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#fx .glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
#fx .g1 { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(circle, rgba(255, 49, 71, .55), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
#fx .g2 { width: 50vw; height: 50vw; right: -16vw; top: 18vh; background: radial-gradient(circle, rgba(142, 15, 34, .7), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
#fx .g3 { width: 44vw; height: 44vw; left: 22vw; bottom: -26vw; background: radial-gradient(circle, rgba(255, 120, 60, .28), transparent 65%); animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(6vw, 5vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-7vw, -6vh) scale(1.1); } }
#fx .kanji { position: absolute; inset: -10vh -10vw; display: flex; flex-direction: column; justify-content: space-around; will-change: transform; }
#fx .krow { white-space: nowrap; font-family: var(--jp); font-weight: 700; color: rgba(255, 49, 71, .055); text-shadow: 0 0 24px rgba(255, 49, 71, .12); letter-spacing: .2em; }
#fx .r0 { font-size: 15vh; animation: slide 140s linear infinite; }
#fx .r1 { font-size: 22vh; animation: slide 200s linear infinite reverse; color: rgba(255, 49, 71, .04); }
#fx .r2 { font-size: 11vh; animation: slide 110s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
#fx .hot span { position: absolute; font-family: var(--jp); font-weight: 700; color: rgba(255, 49, 71, .0); text-shadow: 0 0 30px rgba(255, 49, 71, .0); animation: flare 9s ease-in-out infinite; }
#fx .hot .h0 { font-size: 160px; left: 8vw; top: 58vh; animation-delay: 0s; }
#fx .hot .h1 { font-size: 120px; right: 10vw; top: 14vh; animation-delay: 2.2s; }
#fx .hot .h2 { font-size: 200px; right: 4vw; bottom: 4vh; animation-delay: 4.5s; }
#fx .hot .h3 { font-size: 110px; left: 40vw; top: 4vh; animation-delay: 6.7s; }
@keyframes flare { 0%, 100% { color: rgba(255, 49, 71, 0); text-shadow: 0 0 0 transparent; } 45% { color: rgba(255, 49, 71, .14); text-shadow: 0 0 40px rgba(255, 49, 71, .55), 0 0 90px rgba(255, 49, 71, .3); } }
#fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#fx .vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .65)); }
#fx .grain { position: absolute; inset: -50%; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* glass surfaces over the glow */
header.top { background: rgba(8, 4, 6, .62); }
.card, .jabox { background: linear-gradient(160deg, rgba(30, 14, 18, .72), rgba(14, 10, 12, .72)); backdrop-filter: blur(6px); position: relative; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; }
.card::before, .btn::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 49, 71, .16), transparent 60%); }
.card:hover::before, .btn:hover::before { opacity: 1; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 1px var(--line-red); }
.btn { position: relative; overflow: hidden; }
.btn.red { box-shadow: 0 0 24px rgba(255, 49, 71, .45), inset 0 0 0 1px rgba(255, 255, 255, .15); }
.btn.red:hover { box-shadow: 0 0 40px rgba(255, 49, 71, .7); }
.card .g, h2 .jp, .kicker { text-shadow: 0 0 14px rgba(255, 49, 71, .55); }

/* headline: a slow ember sheen across the name */
.page-home h1 { background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffb0b8 50%, #fff 60%, #fff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s ease-in-out infinite; }
.page-home h1 .jp { -webkit-text-fill-color: var(--muted); }
@keyframes sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* portrait: a turning ring of fire and a breathing glow */
.portrait { position: relative; overflow: visible; border: 0; background: none; box-shadow: none; }
.portrait::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 0deg, transparent 0 20%, #ff3147 35%, #ffb060 45%, #ff3147 55%, transparent 70% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 8s linear infinite; }
.portrait::after { content: ""; position: absolute; inset: -30px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 49, 71, .45), transparent 65%); animation: breathe 5s ease-in-out infinite; }
.portrait img { border-radius: 50%; border: 1px solid rgba(255, 49, 71, .4); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* scroll reveal */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rise.in { opacity: 1; transform: none; }
.tl li::before { box-shadow: 0 0 12px rgba(255, 49, 71, .6); }

@media (max-width: 860px) {
  #fx .hot .h0 { font-size: 90px; } #fx .hot .h1, #fx .hot .h3 { font-size: 70px; } #fx .hot .h2 { font-size: 110px; }
  #fx .glow { filter: blur(50px); }
}
@media (prefers-reduced-motion: reduce) {
  #fx *, .portrait::before, .portrait::after, .page-home h1 { animation: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---------- entrance gate (assets/intro.js) ---------- */
html.gate-open, html.gate-open body { overflow: hidden; }
#gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 0; padding: 20px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(44, 7, 15, .55), rgba(7, 3, 4, .35) 70%); opacity: 0; transition: opacity .6s ease; text-align: center; }
#gate.show { opacity: 1; }
#gate .gate-glow { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 49, 71, .35), transparent 65%);
  filter: blur(30px); animation: breathe 5s ease-in-out infinite; pointer-events: none; }
#gate .torii { position: relative; width: min(400px, 70vw, 42vh); height: auto; overflow: visible; transition: transform 1.1s cubic-bezier(.6, 0, .3, 1), opacity 1s ease; }
#gate .d { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.6s ease forwards; }
#gate .d2 { animation-delay: .25s; } #gate .d3 { animation-delay: .4s; } #gate .d4 { animation-delay: .55s; } #gate .d5 { animation-delay: .7s; } #gate .d6 { animation-delay: .85s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
#gate .gate-text { position: relative; margin-top: 18px; transition: opacity .5s ease, transform .6s ease; }
#gate .gate-kicker { font-size: 12px; letter-spacing: 6px; color: var(--red); text-transform: uppercase; font-weight: 800; text-shadow: 0 0 12px rgba(255, 49, 71, .6); opacity: 0; animation: up .8s 1.1s ease forwards; }
#gate .gate-name { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -.5px; margin-top: 6px; opacity: 0; animation: up .8s 1.25s ease forwards; }
#gate .gate-jp { font-family: var(--jp); font-size: clamp(15px, 2.2vw, 20px); color: var(--muted); letter-spacing: 3px; opacity: 0; animation: up .8s 1.4s ease forwards; }
#gate .gate-tag { margin-top: 10px; color: var(--soft); font-size: 14px; opacity: 0; animation: up .8s 1.55s ease forwards; }
#gate .gate-choose { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; opacity: 0; animation: up .8s 1.75s ease forwards; }
#gate .gate-choose button { min-width: 170px; padding: 14px 22px; border-radius: 14px; border: 1px solid rgba(255, 49, 71, .45); background: rgba(20, 8, 11, .7); color: var(--ink);
  font: inherit; cursor: pointer; display: grid; gap: 2px; transition: transform .2s, box-shadow .2s, background .2s; }
#gate .gate-choose button b { font-size: 20px; font-family: var(--ui); }
#gate .gate-choose button[data-lang="ja"] b { font-family: var(--jp); }
#gate .gate-choose button span { font-size: 13px; color: var(--muted); letter-spacing: 1px; }
#gate .gate-choose button:hover, #gate .gate-choose button:focus-visible { transform: translateY(-2px); background: rgba(255, 49, 71, .18); box-shadow: 0 0 30px rgba(255, 49, 71, .45); outline: none; }
#gate .gate-choose button.pref { background: var(--red); border-color: var(--red); box-shadow: 0 0 34px rgba(255, 49, 71, .55); }
#gate .gate-choose button.pref span { color: rgba(255, 255, 255, .85); }
#gate .gate-hint { margin-top: 16px; font-size: 13px; color: var(--soft); opacity: 0; animation: up .8s 2s ease forwards; }
@keyframes up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* walking through: the gate rushes toward you, then the site appears */
#gate.through { background: transparent; transition: background .9s ease .2s; pointer-events: none; }
#gate.through .torii { transform: scale(5.5); opacity: 0; }
#gate.through .gate-text, #gate.through .gate-glow { opacity: 0; transform: scale(1.1); }
#gate.leave { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #gate .d { stroke-dashoffset: 0; animation: none; }
  #gate [class^="gate-"] { animation: none !important; opacity: 1 !important; }
  #gate.through .torii { transform: none; }
}
/* language switch + Japanese typography */
nav a.lang-switch { margin-left: 8px; border: 1px solid var(--line-red); color: #ff8a96; justify-content: center; }
body.lang-ja { font-family: "Inter", var(--jpt); line-height: 1.85; }
body.lang-ja h1 { font-size: 40px; line-height: 1.25; letter-spacing: 0; }
body.lang-ja h1 .jp, body.lang-ja h2 .jp { font-family: var(--ui); }
body.lang-ja .lead { font-size: 18px; }
.honest { margin: 18px 0 0; padding: 10px 14px; border-left: 2px solid var(--ember); background: rgba(255, 176, 96, .05); border-radius: 0 8px 8px 0; }
@media (max-width: 860px) { body.lang-ja h1 { font-size: 28px; } nav a.lang-switch { margin: 6px 0 0; } }

/* behind the gate only the atmosphere shows; the page fades in as you walk through */
header.top, main, footer { transition: opacity .9s ease .25s, transform .9s ease .25s; }
html.gate-open header.top, html.gate-open main, html.gate-open footer { opacity: 0; transform: scale(.98); }
html.gate-open #fx .krow { color: rgba(255, 49, 71, .09); }

/* gamer stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.stat { padding: 22px 18px; border-radius: 16px; border: 1px solid var(--line-red); background: linear-gradient(160deg, rgba(42, 9, 16, .75), rgba(14, 10, 12, .75)); text-align: center; }
.stat b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -1px; color: #fff; text-shadow: 0 0 22px rgba(255, 49, 71, .6); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.favs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.fav { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 12, 15, .7); border-left: 3px solid var(--red); }
.fav b { display: block; font-size: 17px; } .fav span { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .stats, .favs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat b { font-size: 32px; } }

/* school: case studies and course plan */
.card.case { margin-top: 16px; padding: 24px; }
.card.case h3 { font-size: 22px; margin: 10px 0 6px; }
.card.case ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
.card.case li { margin: 4px 0; }
.case-head { display: flex; flex-wrap: wrap; gap: 0; }
.courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.sem { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 12, 15, .7); }
.sem h3 { font-size: 15px; color: var(--red); letter-spacing: 1px; text-transform: uppercase; }
.sem ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14.5px; }
.sem li { padding: 4px 0 4px 22px; position: relative; color: var(--ink); }
.sem li::before { position: absolute; left: 0; }
.sem li.done::before { content: "✓"; color: #5ee08a; }
.sem li.next { color: var(--muted); } .sem li.next::before { content: "○"; color: var(--ember); }
body.lang-ja .sem h3 { text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .courses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .courses { grid-template-columns: 1fr; } }
.facts.big { display: grid; gap: 10px; font-size: 17px; color: var(--ink); margin-top: 14px; }
.facts.big li { padding: 12px 16px; border-radius: 12px; background: rgba(20, 12, 15, .6); border: 1px solid var(--line); }
.sem li.now { color: #fff; font-weight: 600; } .sem li.now::before { content: "●"; color: var(--red); text-shadow: 0 0 10px rgba(255, 49, 71, .8); animation: breathe 2.5s ease-in-out infinite; }

/* Typography (self-hosted fonts, see assets/fonts/fonts.css):
   Bricolage Grotesque for headings and big numbers, Inter for text, JetBrains Mono for small labels,
   Shippori Mincho B1 for Japanese accents and big kanji, Zen Kaku Gothic New for Japanese running text. */
body { font-optical-sizing: auto; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, .nm, .stat b, #gate .gate-name, .note h3 { font-family: var(--display); font-optical-sizing: auto; }
h1 { font-weight: 800; letter-spacing: -1.2px; font-variation-settings: "opsz" 96; }
h2 { font-weight: 700; letter-spacing: -.5px; }
h3 { font-weight: 650; letter-spacing: -.2px; }
.stat b { font-weight: 800; letter-spacing: -1.5px; }
#gate .gate-name { font-weight: 800; letter-spacing: -1px; }
.kicker, .tl .when, .note .when, .tag, #gate .gate-kicker, #gate .gate-hint, .stat span {
  font-family: var(--mono); font-feature-settings: normal; }
.kicker { letter-spacing: 2.5px; font-weight: 700; }
#gate .gate-kicker { letter-spacing: 5px; font-weight: 700; }
.tl .when, .note .when { letter-spacing: .5px; font-weight: 600; }
.tag { font-weight: 600; letter-spacing: .2px; }
.btn, #gate .gate-choose button b { font-family: var(--display); font-weight: 700; letter-spacing: .1px; }
#gate .gate-choose button[data-lang="ja"] b { font-family: var(--jp); font-weight: 800; }
.jp, .card .g, .mon, #fx .krow, #fx .hot span, .portrait .ph { font-family: var(--jp); }
.card .g, #fx .krow, #fx .hot span, .mon { font-weight: 800; }
h1 .jp, h2 .jp, #gate .gate-jp { font-weight: 500; }
nav a i, h2 .jp.sub { font-family: var(--jpt); }
.jabox p.jp { font-family: var(--jp); font-weight: 500; }
/* Japanese pages: Latin stays Inter/Bricolage, Japanese uses Zen Kaku for text and Shippori Mincho for headings */
body.lang-ja h1, body.lang-ja h2, body.lang-ja h3, body.lang-ja .note h3 { font-family: "Bricolage Grotesque", var(--jp); }
body.lang-ja h1 { letter-spacing: 0; font-weight: 800; }
body.lang-ja h2, body.lang-ja h3 { letter-spacing: .02em; }
body.lang-ja h1 .jp, body.lang-ja h2 .jp { font-family: var(--display); }
body.lang-ja .kicker { font-family: var(--mono), var(--jpt); }

/* header stays on top of the page content (the atmosphere block above sets main/footer to z-index 1);
   the phone menu gets a solid panel so page text never shows through it */
header.top { position: sticky; top: 0; z-index: 30; }
@media (max-width: 860px) {
  nav { background: #0c0709; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); border-bottom: 1px solid var(--line-red);
        max-height: calc(100vh - 62px); overflow-y: auto; }
  nav a { border-radius: 10px; }
  nav a:active, nav a.on { background: rgba(255, 49, 71, .08); }
  nav a.lang-switch { align-self: flex-start; margin: 8px 0 0 10px; }
}

/* contact & feedback form */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin-top: 22px; align-items: start; }
.contact .other { display: grid; gap: 14px; }
.form label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
.form label:first-child { margin-top: 0; }
.form .opt { color: var(--soft); font-size: 13px; }
.form input, .form select, .form textarea { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(8, 4, 6, .7); color: var(--ink); font: inherit; font-size: 16px; }
.form textarea { resize: vertical; min-height: 140px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 49, 71, .2); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form button { margin-top: 16px; border: 0; cursor: pointer; font-size: 16px; }
.form button:disabled { opacity: .6; cursor: default; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-msg { min-height: 22px; margin: 10px 0 0; font-size: 15px; } .fb-msg.err { color: #ff8a96; } .fb-msg.ok { color: #5ee08a; }
.form.done { text-align: center; padding: 34px 22px; }
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .form .row2 { grid-template-columns: 1fr; } }
.prose { max-width: 760px; } .prose h2 { font-size: 21px; margin-top: 30px; } .prose p { color: #e6dde0; }
/* at a glance (Japan page) and tool stack (Work page) */
.small.gap { margin-top: 10px; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.glance > div { padding: 16px; border-radius: 14px; border: 1px solid var(--line-red); background: linear-gradient(160deg, rgba(42, 9, 16, .7), rgba(14, 10, 12, .7)); }
.glance span { display: block; font-family: var(--mono), var(--jpt); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.glance b { display: block; font-family: var(--display), var(--jpt); font-size: 18px; margin: 6px 0 2px; line-height: 1.3; }
.glance i { font-style: normal; color: var(--muted); font-size: 14px; }
.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.stack > div { padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 12, 15, .7); }
.stack h3 { font-size: 15px; color: var(--red); margin-bottom: 8px; }
.stack span { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; border-radius: 8px; font-size: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
@media (max-width: 860px) { .glance { grid-template-columns: 1fr 1fr; } .stack { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .glance { grid-template-columns: 1fr; } }
/* Oni Dojo on the projects page: screenshot strip and architecture diagram */
h3.sub { font-size: 20px; margin: 34px 0 10px; }
.shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 2px 14px; margin-top: 8px; scrollbar-color: var(--line-red) transparent; }
.shots figure { flex: 0 0 200px; margin: 0; scroll-snap-align: start; }
.shots img { width: 200px; height: auto; border-radius: 18px; border: 1px solid var(--line-red); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); display: block; }
.shots figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.shots:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 12px; }
.archbox { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(12, 7, 9, .7); padding: 10px; }
.arch { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--ui), var(--jpt); }
.arch .grp { fill: rgba(255, 255, 255, .02); stroke: var(--line); stroke-dasharray: 4 4; }
.arch .bx { fill: rgba(30, 14, 18, .9); stroke: rgba(255, 255, 255, .14); }
.arch .bx.hot { stroke: var(--line-red); }
.arch .g { fill: var(--red); font-family: var(--mono), var(--jpt); font-size: 12px; letter-spacing: 1px; font-weight: 700; }
.arch .h { fill: var(--ink); font-size: 15px; font-weight: 700; }
.arch .s { fill: var(--muted); font-size: 12px; }
.arch .li { font-size: 13px; }
.arch .ar { stroke: var(--red); stroke-width: 1.6; }
.arch .ah { fill: var(--red); }
.arch .al { fill: #ffb0b8; font-size: 11px; }
@media (max-width: 860px) { .shots figure { flex-basis: 160px; } .shots img { width: 160px; } }
.arch .ln { stroke: rgba(255, 255, 255, .3); stroke-width: 1.6; }
.case-fig { margin-top: 16px; }

[hidden] { display: none !important; }

/* ---------- accessibility: skip link, focus rings, reading settings (assets/prefs.js) ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid #ff5a6c; outline-offset: 3px; border-radius: 8px; animation: focus-glow 1.8s ease-in-out infinite; }
@keyframes focus-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 49, 71, .28); } 50% { box-shadow: 0 0 0 8px rgba(255, 49, 71, .12); } }
a.card:focus-visible, .btn:focus-visible { border-radius: 16px; }
.prefs-btn { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 4px 9px; font: 700 14px/1.2 var(--display); cursor: pointer; margin-left: 4px; }
.prefs-btn:hover, .prefs-btn[aria-expanded="true"] { border-color: var(--line-red); color: #ff8a96; }
#prefs { position: fixed; top: 70px; right: max(16px, calc((100vw - 1060px) / 2 + 16px)); z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 16px;
  border-radius: 16px; border: 1px solid var(--line-red); background: rgba(14, 7, 10, .97); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); font-size: 15px; }
#prefs .pr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#prefs .pr-x { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 6px; }
#prefs .pr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
#prefs .pr-seg { display: flex; gap: 4px; }
#prefs button[data-size], #prefs .pr-sw, #prefs .pr-reset { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 9px; font: 600 14px/1 var(--ui); cursor: pointer; }
#prefs [aria-pressed="true"], #prefs .pr-sw[aria-checked="true"] { background: var(--red); border-color: var(--red); color: #fff; }
#prefs .pr-sw { min-width: 56px; }
#prefs .pr-reset { margin-top: 8px; width: 100%; color: var(--muted); }
html[data-size="s"] main, html[data-size="s"] footer { zoom: .92; }
html[data-size="l"] main, html[data-size="l"] footer { zoom: 1.12; }
html[data-size="xl"] main, html[data-size="xl"] footer { zoom: 1.25; }
html[data-font="readable"] body, html[data-font="readable"] :is(h1, h2, h3, p, li, a, button, input, select, textarea, label, .btn, .kicker, .tag, .nm, .when, .lead, nav a, figcaption) {
  font-family: "Atkinson Hyperlegible", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif !important; letter-spacing: .01em !important; }
html[data-font="readable"] body { line-height: 1.75; }
html.calm #fx canvas, html.calm #fx .hot, html.calm #fx .grain { display: none; }
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.calm #gate [class^="gate-"] { opacity: 1 !important; }
html.calm #gate .d { stroke-dashoffset: 0; }
html.calm .rise { opacity: 1; transform: none; }

/* ---------- page transitions: a quick fade between pages (browsers with cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
html.calm ::view-transition-group(*) { animation: none !important; }

/* ---------- little secrets ---------- */
.mon.spin, .portrait.spin { animation: mon-spin 1s cubic-bezier(.5, -0.4, .3, 1.4); }
@keyframes mon-spin { to { transform: rotate(720deg) scale(1.1); } }
html.term { --red: #39ff7a; --ember: #b8ff5a; --line-red: rgba(57, 255, 122, .4); --ink: #c8ffd8; --muted: #7fd49a; --soft: #4f9a68; }
html.term body { background: #020a04 !important; font-family: var(--mono) !important; }
html.term #fx .krow, html.term #fx .hot span { color: rgba(57, 255, 122, .12) !important; }
html.term .btn.red { color: #021006; } html.term a { color: #7dffa6; }
html.term .card, html.term .jabox, html.term .glance > div { background: rgba(2, 20, 8, .8) !important; }
.term-note { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; padding: 8px 14px; border-radius: 8px; background: #021006; border: 1px solid #39ff7a; color: #7dffa6; font: 13px var(--mono); }
@media (max-width: 860px) { #prefs { top: 66px; } }
.vault { margin-top: 20px; font-family: var(--mono); background: #04090588 !important; border-color: rgba(57, 255, 122, .35); }
.vault-out { margin: 12px 0; padding: 12px; min-height: 90px; border-radius: 10px; background: #020a04; color: #7dffa6; font-size: 14px; line-height: 1.7; }
.vault-form { display: flex; gap: 8px; align-items: center; color: #39ff7a; }
.vault-form input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(57, 255, 122, .4); background: #020a04; color: #c8ffd8; font: 15px var(--mono); }
.vault-form .btn { border: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.clock .tz { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.clock .tz span { color: var(--muted); font-size: 14px; } .clock .tz b { font: 700 20px var(--mono); font-variant-numeric: tabular-nums; }
.clock p { margin-top: 10px; }
/* ---------- articles ---------- */
.article { max-width: 780px; }
.article h2 { font-size: 24px; margin-top: 40px; scroll-margin-top: 80px; }
.article p, .article li { color: #e6dde0; }
.article code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); word-break: break-word; }
.article pre { padding: 14px 16px; border-radius: 12px; background: #070305; border: 1px solid var(--line); overflow-x: auto; }
.article pre code { background: none; border: 0; padding: 0; color: #9ff0b8; }
.toc { padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 12, 15, .7); margin: 8px 0 10px; }
.toc ol { margin: 6px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; } .toc li { margin: 3px 0; break-inside: avoid; }
.tablewrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; }
.article table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { color: var(--red); font-family: var(--mono), var(--jpt); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 49, 71, .06); }
.article tr:last-child td { border-bottom: 0; }
.grid.three-up { margin: 16px 0; }
ol.steps { padding-left: 22px; } ol.steps li { margin: 10px 0; }
ul.sources li { font-size: 14.5px; }
@media (max-width: 860px) { .toc ol { columns: 1; } }

/* Japanese name card (Japan page) */
.namecard .kanji { font-size: clamp(44px, 8vw, 72px); font-weight: 800; color: #fff; text-align: center; margin: 18px 0 6px; letter-spacing: .08em;
  text-shadow: 0 0 30px rgba(255, 49, 71, .55); }
.namecard rt { font-size: 15px; color: var(--muted); letter-spacing: .1em; font-weight: 500; font-family: var(--jpt); }
.jabox ruby rt { font-size: 11px; color: var(--muted); }

/* app cards on the home page: status tags on their own line */
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.card .tags .tag { margin: 0; }
/* projects: wide screenshot (radio visualizer) and short feature list */
figure.wide { margin: 6px 0 14px; max-width: 760px; }
figure.wide img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line-red); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); display: block; }
figure.wide figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
ul.bullets { padding-left: 20px; margin: 10px 0 14px; } ul.bullets li { margin: 6px 0; line-height: 1.6; }
/* hobbies: live Steam games (assets/steam.js) */
.sgames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; align-items: start; }
.sgame { display: block; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 12, 15, .7); overflow: hidden; text-decoration: none; color: inherit; }
.sgame:hover { border-color: var(--line-red); }
.sgame img { display: block; width: 100%; height: auto; aspect-ratio: 231 / 87; object-fit: cover; }
.sgame b { display: block; padding: 10px 12px 0; font-size: 15px; } .sgame span { display: block; padding: 2px 12px 12px; color: var(--muted); font-size: 13px; }
.supd { margin-top: 10px; }
@media (max-width: 860px) { .sgames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fav .fav-h { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: var(--ember, #ffb060); }
/* hobbies: level bar, achievements (assets/steam.js) */
#steam-more { margin-top: 18px; }
.lvlbar { margin: 4px 0 6px; }
.lvl-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); margin-bottom: 6px; font-family: var(--mono); }
.lvl-track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); overflow: hidden; }
.lvl-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff3147, #ffb060); box-shadow: 0 0 16px rgba(255, 49, 71, .6); }
#steam-more h3.sh { margin-top: 26px; }
.rares { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.rare { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--line-red); background: linear-gradient(160deg, rgba(42, 9, 16, .7), rgba(14, 10, 12, .7)); }
.rare img { width: 56px; height: 56px; border-radius: 10px; flex: none; object-fit: cover; box-shadow: 0 0 14px rgba(255, 176, 96, .25); }
.rare b { display: block; font-size: 15px; } .rare span { display: block; font-size: 13px; color: var(--muted); }
.rare .rd { margin-top: 2px; } .rare .rp { margin-top: 4px; color: #ffb060; font-family: var(--mono); font-size: 12.5px; }
.perfects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }