/* SEISAN — futuristic line-console aesthetic */
:root{
  --bg:#04060b; --bg2:#070b14; --panel:rgba(16,24,40,.72); --panel-solid:#0b111f;
  --line:#1d2a44; --line-bright:#2e4470;
  --ink:#e9f2ff; --dim:#9db1cf; --faint:#5f7396;
  --cyan:#3ee6ff; --amber:#f0b24a; --green:#5fd68a;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --jp:"Noto Serif JP",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--disp);overflow-x:hidden;
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(62,230,255,.09), transparent 60%),
    radial-gradient(900px 500px at 85% 30%, rgba(240,178,74,.05), transparent 60%),
    linear-gradient(rgba(62,230,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,230,255,.045) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;}
.mono{font-family:var(--mono)}
a{color:var(--cyan);text-decoration:none}
::selection{background:rgba(62,230,255,.35)}

#flowfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
.scanlines{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

/* ---------- HUD top ---------- */
.hud-top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;background:linear-gradient(180deg,rgba(4,6,11,.92),rgba(4,6,11,.55) 70%,transparent);backdrop-filter:blur(6px)}
.hud-left{display:flex;align-items:center;gap:12px}
.glyph-mini{font-family:var(--jp);font-weight:900;font-size:22px;color:var(--ink);text-shadow:0 0 18px rgba(62,230,255,.65)}
.wordmark{font-weight:700;letter-spacing:6px;font-size:17px}
.hud-nav{display:flex;gap:28px}
.hud-nav a{color:var(--dim);font-size:13.5px;letter-spacing:2.5px;text-transform:uppercase}
.hud-nav a:hover{color:var(--cyan)}
.hud-right{font-size:11px;letter-spacing:2px;color:var(--faint)}
@media(max-width:820px){.hud-nav,.hud-right{display:none}}

main{position:relative;z-index:1}

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:130px 20px 90px;position:relative}
.hud-corner{position:absolute;font-size:10.5px;letter-spacing:2px;color:var(--faint)}
.hud-corner.tl{top:96px;left:26px}.hud-corner.tr{top:96px;right:26px}
.hud-corner.bl{bottom:26px;left:26px}.hud-corner.br{bottom:26px;right:26px}
@media(max-width:820px){.hud-corner{display:none}}
.kanji-stage{position:relative;line-height:1;margin-bottom:8px}
.kanji-main{font-family:var(--jp);font-weight:900;font-size:min(38vw,300px);color:var(--ink);position:relative;
  text-shadow:0 0 34px rgba(62,230,255,.45),0 0 120px rgba(62,230,255,.22);animation:breathe 5.5s ease-in-out infinite}
.kanji-glow{font-family:var(--jp);font-weight:900;font-size:min(38vw,300px);position:absolute;inset:0;color:var(--cyan);
  filter:blur(46px);opacity:.35;animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.hero-name{font-size:min(13vw,84px);font-weight:700;letter-spacing:min(4.5vw,34px);text-indent:min(4.5vw,34px);margin-top:6px;
  background:linear-gradient(180deg,#fff,#a9c6ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-roman{margin-top:14px;font-size:12.5px;letter-spacing:3px;color:var(--amber)}
.hero-tag{margin-top:30px;font-size:clamp(26px,4.6vw,44px);font-weight:600;line-height:1.25}
.hero-tag em{font-style:normal;color:var(--cyan);text-shadow:0 0 24px rgba(62,230,255,.5)}
.hero-sub{margin-top:18px;max-width:620px;color:var(--dim);font-size:17px}
.hero-cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.btn-primary,.btn-ghost{padding:13px 30px;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;border-radius:3px}
.btn-primary{background:var(--cyan);color:#031018;font-weight:700;box-shadow:0 0 26px rgba(62,230,255,.45)}
.btn-primary:hover{box-shadow:0 0 40px rgba(62,230,255,.75);color:#031018}
.btn-ghost{border:1px solid var(--line-bright);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.hero-readout{margin-top:52px;font-size:11px;letter-spacing:2.5px;color:var(--faint)}
.hero-readout::before{content:"▸ " ;color:var(--green)}

/* ---------- Ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(7,11,20,.7);position:relative;z-index:1}
.ticker-track{display:flex;gap:26px;align-items:center;width:max-content;padding:13px 0;animation:tick 36s linear infinite;
  font-family:var(--mono);font-size:12.5px;letter-spacing:3px;color:var(--faint);white-space:nowrap}
.ticker-track .jp{font-family:var(--jp);color:var(--dim);letter-spacing:0;font-size:14px}
.ticker-track i{color:var(--cyan);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{max-width:1220px;margin:0 auto;padding:110px 26px 30px;position:relative}
.sec-head{display:flex;gap:26px;align-items:flex-start;margin-bottom:44px}
.sec-index{font-size:13px;color:var(--cyan);border:1px solid var(--line-bright);padding:6px 12px;border-radius:3px;letter-spacing:2px}
.sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.15}
.sec-sub{margin-top:12px;color:var(--dim);max-width:760px;font-size:16.5px}
.sec-sub strong{color:var(--ink)}

/* ---------- Line board ---------- */
.line-board{position:relative;height:470px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:radial-gradient(circle,#1a2742 1px,transparent 1.2px) 0 0/22px 22px, linear-gradient(180deg,rgba(10,16,28,.9),rgba(6,9,16,.9))}
.line-wires{position:absolute;inset:0;width:100%;height:100%}
.wire{fill:none;stroke:#54749f;stroke-width:2;stroke-dasharray:7 7;animation:flow 1.6s linear infinite}
.wire.good{stroke:var(--green)}.wire.warn{stroke:var(--amber)}
@keyframes flow{to{stroke-dashoffset:-14}}
.flow-tag{position:absolute;font-size:10.5px;letter-spacing:1.5px;color:var(--dim);background:var(--panel-solid);
  border:1px solid var(--line);padding:2px 8px;border-radius:20px}
.flow-tag.good{color:var(--green);border-color:#24503a}.flow-tag.warn{color:var(--amber);border-color:#54431f}
.station{position:absolute;width:270px;background:var(--panel);border:1px solid var(--line-bright);border-radius:8px;
  padding:16px 18px 14px;backdrop-filter:blur(4px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.station .st-role{font-size:10px;letter-spacing:2.5px;color:var(--faint);text-transform:uppercase}
.station h3{font-size:20px;margin:3px 0 10px}
.station.brain{border-top:3px solid var(--cyan)}.station.floor{border-top:3px solid var(--amber)}
.station.audit{border-top:3px solid var(--green)}.station.sink{border-top:3px solid var(--faint)}
.st-model{background:rgba(62,230,255,.06);border:1px solid var(--line);border-radius:5px;padding:8px 11px;font-weight:600;font-size:15px}
.st-model span{display:block;font-weight:400;font-size:12.5px;color:var(--dim);margin-top:1px}
.st-cost{margin-top:9px;font-size:10.5px;letter-spacing:1.5px;color:var(--dim)}
.station p{margin-top:9px;font-size:13.5px;color:var(--dim);line-height:1.5}
.st-alt{margin-top:9px;font-size:10.5px;letter-spacing:1px;color:var(--amber)}
.lanes{display:flex;gap:5px;margin-top:11px}
.lanes i{flex:1;height:7px;border-radius:3px;background:linear-gradient(90deg,var(--amber),#ffd27a);box-shadow:0 0 10px rgba(240,178,74,.5);animation:lane 2.6s ease-in-out infinite}
.lanes i:nth-child(2){animation-delay:.3s}.lanes i:nth-child(3){animation-delay:.6s}.lanes i:nth-child(4){animation-delay:.9s}
.lanes i.dim{background:#33465f;box-shadow:none;animation:none}
@keyframes lane{0%,100%{opacity:.55}50%{opacity:1}}
.line-total{margin-top:18px;text-align:center;font-size:12px;letter-spacing:2px;color:var(--faint)}
.line-total strong{color:var(--ink)}
@media(max-width:900px){.line-board{height:auto;display:flex;flex-direction:column;gap:14px;padding:16px}
  .station{position:static;width:100%}.line-wires,.flow-tag{display:none}}

/* ---------- Doctrine ---------- */
.doctrine-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.doctrine-grid{grid-template-columns:1fr}}
.doc-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px 28px 24px;position:relative;overflow:hidden}
.doc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.6}
.doc-k{font-size:11px;letter-spacing:2.5px;color:var(--cyan)}
.doc-card h3{font-size:23px;margin:10px 0 16px;line-height:1.3}
.doc-card h3 em{font-style:normal;color:var(--cyan)}
.doc-card p{color:var(--dim);font-size:15px}
.doc-card p strong{color:var(--ink)}
.meter{height:9px;border:1px solid var(--line-bright);border-radius:5px;margin:4px 0 18px;overflow:hidden;background:rgba(255,255,255,.03)}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1d7f96,var(--cyan));box-shadow:0 0 14px rgba(62,230,255,.6);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.meter.amber i{background:linear-gradient(90deg,#96691d,var(--amber));box-shadow:0 0 14px rgba(240,178,74,.6)}
.inview .meter i{width:var(--fill)}
.doc-num{margin-top:18px;font-size:12px;letter-spacing:2px;color:var(--faint)}
.doc-num span{font-size:30px;color:var(--ink);letter-spacing:0;margin-right:4px}
.doctrine-foot{margin-top:24px;color:var(--dim);text-align:center;font-size:15.5px}

/* ---------- Heritage ---------- */
.heritage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.heritage-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.heritage-grid{grid-template-columns:1fr}}
.her-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px}
.her-glyph{font-family:var(--jp);font-weight:900;font-size:44px;color:var(--ink);text-shadow:0 0 20px rgba(62,230,255,.4);margin-bottom:12px}
.her-card h3{font-size:17.5px;margin-bottom:9px}
.her-card p{color:var(--dim);font-size:14px;line-height:1.55}
.her-card p em{color:var(--amber);font-style:normal}

/* ---------- Rules ---------- */
.rules{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rule{display:flex;gap:22px;padding:20px 26px;background:var(--panel);border-bottom:1px solid var(--line);align-items:baseline}
.rule:last-child{border-bottom:none}
.r-id{color:var(--cyan);font-size:13px;letter-spacing:2px;border:1px solid var(--line-bright);border-radius:3px;padding:3px 9px}
.rule p{color:var(--dim);font-size:15.5px}
.rule p strong{color:var(--ink)}

/* ---------- Status ---------- */
.status-sec{padding-bottom:120px}
.status-panel{border:1px solid var(--line-bright);border-radius:12px;text-align:center;padding:64px 30px 54px;
  background:radial-gradient(700px 300px at 50% 0%,rgba(62,230,255,.08),transparent 65%),var(--panel)}
.status-k{font-size:11.5px;letter-spacing:3px;color:var(--amber)}
.status-big{font-size:clamp(26px,4.2vw,42px);font-weight:600;line-height:1.3;margin-top:20px}
.status-big em{font-style:normal;color:var(--cyan)}
.status-sub{color:var(--dim);max-width:640px;margin:18px auto 0;font-size:16px}
.status-line{margin-top:34px;font-size:11px;letter-spacing:2.5px;color:var(--faint)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 26px 54px;text-align:center;position:relative;z-index:1;background:rgba(4,6,11,.85)}
.foot-mark{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:14px}
footer p{color:var(--dim);font-size:14.5px}
.foot-fine{margin-top:12px;font-size:10.5px;letter-spacing:2px;color:var(--faint)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.inview{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none}
}

/* ---------- Line showcase animation (homepage, non-interactive) ---------- */
.glowable{animation:stglow 7s ease-in-out infinite}
@keyframes stglow{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.5)}10%,22%{box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 30px var(--glow)}34%{box-shadow:0 14px 34px rgba(0,0,0,.5)}}
.ghost-lane{position:absolute;left:430px;top:262px;width:270px;border:1.5px dashed var(--amber);border-radius:8px;
  padding:14px 18px;background:rgba(240,178,74,.05);opacity:0;animation:ghostlane 9s ease-in-out infinite}
.ghost-lane h3{font-size:18px;margin:2px 0 8px}
.ghost-lane .st-role{font-size:10px;letter-spacing:2.5px;color:var(--faint);text-transform:uppercase}
.ghost-note{font-size:10px;letter-spacing:1.5px;color:var(--amber)}
@keyframes ghostlane{0%,52%{opacity:0;transform:translateY(10px)}62%,88%{opacity:.92;transform:none}97%,100%{opacity:0;transform:translateY(6px)}}
@media(max-width:900px){.ghost-lane{display:none}}
.line-cta{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.line-cta-note{color:var(--faint);font-size:13.5px}

/* ---------- Statement (the harness line, standing alone) ---------- */
.statement{text-align:center}
.statement-line{font-size:clamp(24px,4vw,40px);font-weight:600;line-height:1.35}
.statement-line em{font-style:normal;color:var(--cyan);text-shadow:0 0 24px rgba(62,230,255,.5)}