:root {
  --bg: #0a0a0f;
  --bg2: #111118;
  --panel: #15151f;
  --fg: #e8e6f0;
  --dim: #9b98ad;
  --line: #262633;
  --acc: #7c6cff;
  --acc2: #39d0ff;
  --warm: #ffb454;
  --grad: linear-gradient(120deg, #7c6cff, #39d0ff 55%, #7cffc4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  color: var(--fg);
  background: var(--bg);
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
}
::selection { color: #fff; background: var(--acc); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { border-radius: 5px; background: #2c2c3d; }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

#progress {
  position: fixed; z-index: 1000; top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--grad);
  box-shadow: 0 0 12px #7c6cff88;
}

nav {
  position: fixed; z-index: 900; top: 0; right: 0; left: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 5vw;
  border-bottom: 1px solid #26263355;
  background: rgb(10 10 15 / 55%);
  backdrop-filter: blur(14px);
}
.logo { color: var(--fg); font-size: 1.05rem; font-weight: 900; letter-spacing: .06em; text-decoration: none; }
.logo em {
  color: transparent; font-style: normal;
  background: var(--grad); background-clip: text; -webkit-background-clip: text;
}
nav ul { display: flex; gap: 2.2em; list-style: none; }
nav a:not(.logo) { color: var(--dim); font-size: .85rem; text-decoration: none; transition: color .25s; }
nav a:not(.logo):hover { color: var(--fg); }

header {
  position: relative;
  display: flex; overflow: hidden; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 0 6vw;
  text-align: center;
}
#stage { position: absolute; z-index: 0; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }
.orb {
  position: absolute; border-radius: 50%; opacity: .5;
  filter: blur(90px); animation: drift 18s ease-in-out infinite alternate;
}
.orb.a { top: -14vw; left: -10vw; width: 46vw; height: 46vw; background: #4333c9; }
.orb.b { right: -8vw; bottom: -12vw; width: 36vw; height: 36vw; background: #0e6f8f; animation-delay: -6s; }
.orb.c { top: 38%; left: 56%; width: 22vw; height: 22vw; opacity: .35; background: #3f8f6f; animation-delay: -12s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.15); } }
.hero-inner { position: relative; z-index: 2; }
.tag {
  display: inline-block; margin-bottom: 2.2em; padding: .5em 1.4em;
  color: var(--dim); border: 1px solid #26263388; border-radius: 999px;
  font-size: .75rem; letter-spacing: .25em; backdrop-filter: blur(6px);
}
h1 { font-size: clamp(2.6rem, 8.5vw, 6.2rem); font-weight: 900; line-height: 1.15; letter-spacing: .02em; }
.grad {
  color: transparent; background: var(--grad); background-size: 200% 100%;
  background-clip: text; -webkit-background-clip: text; animation: sheen 7s linear infinite;
}
@keyframes sheen { to { background-position: 200% 0; } }
.hero-sub { margin-top: 1.6em; color: var(--dim); font-size: clamp(.95rem, 2vw, 1.2rem); }
.hero-sub strong { color: var(--fg); }
.hero-loss { margin-top: .8em; color: var(--acc2); font-family: "JetBrains Mono", monospace; font-size: .85rem; letter-spacing: .05em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1.2em; justify-content: center; margin-top: 3em; }
.btn {
  display: inline-block; overflow: hidden; padding: .9em 2.4em;
  border-radius: 999px; font-size: .9rem; font-weight: 700; letter-spacing: .05em; text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.btn.solid { color: #0a0a0f; background: var(--grad); }
.btn.solid:hover { box-shadow: 0 12px 40px #7c6cff55; transform: translateY(-3px); }
.btn.ghost { color: var(--fg); border: 1px solid #262633cc; }
.btn.ghost:hover { border-color: var(--acc); transform: translateY(-3px); }
.scroll-hint {
  position: absolute; z-index: 2; bottom: 3.5vh; left: 50%;
  color: var(--dim); font-size: .7rem; letter-spacing: .3em;
  transform: translateX(-50%); animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

.marquee { overflow: hidden; padding: 14px 0; border-top: 1px solid #26263388; border-bottom: 1px solid #26263388; background: var(--bg2); white-space: nowrap; }
.marquee-track { display: inline-block; color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: .8rem; animation: mq 45s linear infinite; }
.marquee-track span { margin: 0 2.4em; }
.marquee-track b { color: var(--acc2); font-weight: 400; }
@keyframes mq { to { transform: translateX(-50%); } }

section { position: relative; max-width: 1180px; margin: 0 auto; padding: 14vh 6vw; }
.kicker { margin-bottom: 1.2em; color: var(--acc2); font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .35em; }
h2 { margin-bottom: .9em; font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 900; line-height: 1.4; }
.lead { max-width: 46em; color: var(--dim); }
.reveal { opacity: 0; filter: blur(6px); transform: translateY(34px); transition: opacity .8s ease, transform .8s ease, filter .8s ease; }
.reveal.in { opacity: 1; filter: none; transform: none; }

.subject {
  display: grid; grid-template-columns: minmax(260px, .88fr) minmax(320px, 1.12fr); gap: clamp(2.2rem, 7vw, 7rem); align-items: center;
  margin: 5.5em 0 1.5em;
}
.portrait-wrap {
  position: relative; overflow: hidden; max-width: 430px; aspect-ratio: 4 / 5;
  border: 1px solid #7c6cff55; border-radius: 18px; background: #12121c;
  box-shadow: 0 0 0 1px #39d0ff18, 0 28px 80px #00000088, 0 0 65px #7c6cff22;
}
.portrait-wrap::before {
  position: absolute; z-index: 2; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(135deg, #7c6cff22, transparent 38%), linear-gradient(0deg, #09091099 0%, transparent 38%);
}
.portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.08); transform: scale(1.02); transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease; }
.portrait-wrap:hover .portrait { filter: saturate(1.05) contrast(1.1); transform: scale(1.08); }
.scanline { position: absolute; z-index: 3; inset: 0; opacity: .25; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, #7c6cff20 5px, transparent 6px); animation: scan 9s linear infinite; }
@keyframes scan { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
.portrait-label { position: absolute; z-index: 4; right: 1.2em; bottom: 1.1em; left: 1.2em; display: flex; justify-content: space-between; gap: .8em; color: #e8e6f0cc; font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .08em; }
.subject-copy .lead { margin-top: 1.2em; }
.subject-note { margin-top: 1.4em; color: var(--acc2); font-family: "JetBrains Mono", monospace; font-size: .86rem; line-height: 1.8; }
.model-links { display: grid; gap: .9em; margin-top: 2.2em; }
.model-link { position: relative; display: flex; align-items: center; gap: 1.2em; overflow: hidden; padding: 1.05em 1.15em; color: var(--fg); border: 1px solid #262633cc; border-radius: 12px; background: var(--panel); text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.model-link::after { position: absolute; inset: 0; content: ""; background: linear-gradient(110deg, transparent 25%, #7c6cff16, transparent 70%); transform: translateX(-100%); transition: transform .55s ease; }
.model-link:hover { border-color: #7c6cff77; box-shadow: 0 10px 32px #00000055; transform: translateX(5px); }
.model-link:hover::after { transform: translateX(100%); }
.model-icon { position: relative; z-index: 1; display: grid; flex: 0 0 46px; width: 46px; height: 46px; color: #0a0a0f; border-radius: 11px; background: var(--grad); font: 700 .82rem "JetBrains Mono", monospace; place-items: center; }
.model-link span:last-child { position: relative; z-index: 1; display: grid; line-height: 1.35; }
.model-link small { color: var(--dim); font: .57rem "JetBrains Mono", monospace; letter-spacing: .1em; }
.model-link strong { margin-top: .2em; font-size: .94rem; }
.model-link em { margin-top: .27em; color: var(--acc2); font-size: .7rem; font-style: normal; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); overflow: hidden; margin-top: 4em; border: 1px solid #26263388; border-radius: 18px; background: #26263388; gap: 1px; }
.stat { padding: 2.4em 1.6em; background: var(--panel); text-align: center; transition: background .3s; }
.stat:hover { background: #1b1b29; }
.stat .num { color: transparent; background: var(--grad); background-clip: text; -webkit-background-clip: text; font-family: "JetBrains Mono", monospace; font-size: 2.3rem; font-weight: 700; }
.stat .lbl { margin-top: .5em; color: var(--dim); font-size: .78rem; letter-spacing: .12em; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4em; margin-top: 3.5em; perspective: 1200px; }
.card { padding: 1.8em; border: 1px solid #26263388; border-radius: 16px; background: var(--panel); transform-style: preserve-3d; transition: box-shadow .3s; will-change: transform; }
.card:hover { box-shadow: 0 18px 50px #00000066; }
.card .k { margin-bottom: .8em; color: var(--acc2); font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .2em; }
.card .v { font-size: 1.02rem; font-weight: 700; }
.card .d { margin-top: .6em; color: var(--dim); font-size: .82rem; }

.timeline { margin-top: 3.5em; padding-left: 2.2em; border-left: 2px solid #26263388; }
.tl-item { position: relative; padding-bottom: 2.6em; }
.tl-item::before { position: absolute; top: .45em; left: calc(-2.2em - 7px); width: 12px; height: 12px; content: ""; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); }
.tl-item:nth-child(even)::before { background: var(--acc2); box-shadow: 0 0 14px var(--acc2); }
.tl-item .t { color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .15em; }
.tl-item .h { margin: .3em 0; font-size: 1.08rem; font-weight: 700; }
.tl-item .p { max-width: 44em; color: var(--dim); font-size: .9rem; }
.tl-item code { padding: .1em .45em; color: var(--warm); border-radius: 6px; background: #00000055; font-family: "JetBrains Mono", monospace; font-size: .85em; }
.terminal { overflow: hidden; margin-top: 3em; border: 1px solid #26263388; border-radius: 14px; background: #0c0c14; box-shadow: 0 24px 70px #00000070; }
.term-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #26263388; background: #131320; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a4d; }
.term-bar i:nth-child(1) { background: #ff5f57; }.term-bar i:nth-child(2) { background: #febc2e; }.term-bar i:nth-child(3) { background: #28c840; }
.term-body { min-height: 15em; padding: 1.4em 1.6em; color: #c9c6dd; font-family: "JetBrains Mono", monospace; font-size: .8rem; line-height: 2.1; }
.term-body .ok { color: #7cffc4; }.term-body .warn { color: var(--warm); }.term-body .cm { color: #5a5870; }
.cursor { display: inline-block; width: .55em; height: 1.1em; vertical-align: -2px; background: var(--acc2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.losswrap { margin-top: 3em; padding: 2em; border: 1px solid #26263388; border-radius: 16px; background: var(--panel); }
.losswrap .cap { margin-bottom: 1.4em; color: var(--dim); font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .15em; }
.legend { display: flex; gap: 2em; margin-top: 1.2em; color: var(--dim); font-size: .78rem; }
.legend i { display: inline-block; width: 22px; height: 3px; margin-right: .6em; vertical-align: middle; border-radius: 2px; }
.legend-train { background: #7c6cff; }.legend-eval { background: #ff7a8a; }

.cta-panel { position: relative; overflow: hidden; margin-top: 3em; padding: 3.5em 3em; border: 1px solid #7c6cff33; border-radius: 22px; background: linear-gradient(160deg, #171726, #101019); }
.cta-panel::before { position: absolute; inset: -40%; content: ""; pointer-events: none; background: conic-gradient(from 0deg, transparent 70%, #7c6cff22, transparent 90%); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.panel-title, .steps, .linkrow, .note, .panel-lead { position: relative; z-index: 1; }
.panel-title { font-size: 1.4rem; }
.steps { margin-top: 2.4em; counter-reset: st; }
.step { display: flex; gap: 1.4em; padding: 1.3em 0; border-bottom: 1px dashed #26263388; }
.step:last-child { border-bottom: 0; }
.step::before { min-width: 2.2em; padding-top: .3em; color: var(--acc2); font-family: "JetBrains Mono", monospace; font-size: .85rem; content: "0" counter(st); counter-increment: st; }
.step .b { font-weight: 700; }.step .s { color: var(--dim); font-size: .88rem; }
.linkrow { display: flex; flex-wrap: wrap; gap: .9em; margin-top: 2.2em; }
.chip { padding: .55em 1.3em; color: var(--fg); border: 1px solid #262633cc; border-radius: 999px; background: #00000030; font-size: .8rem; text-decoration: none; transition: border-color .25s, transform .25s; }
.chip:hover { border-color: var(--acc2); transform: translateY(-2px); }
.note { margin-top: 2.4em; padding-left: 1.1em; color: var(--dim); border-left: 3px solid var(--acc); font-size: .78rem; }
.episode-panel { margin-top: 2em; }
.panel-lead { margin-top: 1em; }

details { overflow: hidden; margin-top: 1em; border: 1px solid #26263388; border-radius: 14px; background: var(--panel); }
summary { position: relative; padding: 1.2em 1.5em; font-weight: 700; cursor: pointer; list-style: none; transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary::after { position: absolute; right: 1.4em; color: var(--acc2); content: "＋"; transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); } summary:hover { color: var(--acc2); }
details .a { padding: 0 1.5em 1.4em; color: var(--dim); font-size: .9rem; }
footer { padding: 3.5em 6vw; color: var(--dim); border-top: 1px solid #26263388; background: var(--bg2); font-size: .78rem; text-align: center; }
footer .mark { display: block; margin-bottom: 1em; color: transparent; background: var(--grad); background-clip: text; -webkit-background-clip: text; font-size: 1rem; font-weight: 900; }

@media (max-width: 720px) {
  nav ul { display: none; }
  section { padding: 11vh 6vw; }
  .subject { grid-template-columns: 1fr; gap: 2.4em; margin-top: 4em; }
  .portrait-wrap { max-width: 340px; }
  .cta-panel { padding: 2.2em 1.4em; }
  .timeline { padding-left: 1.6em; }
  .tl-item::before { left: calc(-1.6em - 7px); }
  .portrait-label { font-size: .54rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}