:root{
  --paper:#121212;
  --paper-2:#1c1c1c;
  --ink:#f4f4f4;
  --ink-soft:#a89f97;
  --lime:#a1cb03;
  --lime-soft: rgba(161, 203, 3, 0.15);
  --line: rgba(244,244,244,0.14);
  --err:#c65a42;
  --display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --hand: "Zen Old Mincho", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--hand);
  overflow-x:hidden; overflow-y:auto; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--lime); color:var(--paper);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }

.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15), transparent 18%, transparent 82%, rgba(0,0,0,0.2));
}
.grain{
  position:fixed; inset:-100px; z-index:2; pointer-events:none; opacity:0.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Large watermark kanji on the right edge of the background */
.bg-kanji{
  position:fixed;
  top:50%; right:clamp(-20px, 2vw, 24px);
  transform:translateY(-50%);
  z-index:0;
  writing-mode:vertical-rl;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(90px, 26vw, 340px);
  letter-spacing:0.06em;
  color:var(--ink);
  opacity:0.045;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  line-height:1;
  max-height:88vh;
}

/* Hanko stamp on the top right */
.hanko-seal{
  position:fixed; top:24px; right:28px; z-index:4;
  border:1.5px solid var(--lime); color:var(--lime);
  padding:5px 4px 6px; font-family:var(--display); font-size:13px; font-weight:700;
  line-height:1.2; writing-mode:vertical-rl; letter-spacing:0.18em;
  border-radius:4px;
  opacity:0; animation:riseIn .8s ease forwards .08s;
}

.brand-chip{
  position:fixed; top:26px; left:28px; z-index:4;
  display:flex; align-items:baseline; gap:10px;
  opacity:0; animation:riseIn .8s ease forwards .05s;
}
.brand-chip .jp{ font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:0.04em; color:var(--ink); }
.brand-chip .en{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; color:var(--ink-soft); text-transform:uppercase; }

main{
  position:relative; z-index:3; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:32px;
  padding-bottom:96px;
}

h1{
  font-family:var(--display); font-weight:800; color:var(--ink);
  font-size:clamp(56px, 14vw, 150px); line-height:0.95;
  opacity:0; animation:riseIn 1.1s ease forwards .2s;
}

.romanized{
  font-family:var(--mono); font-weight:500; font-size:clamp(11px, 3vw, 14px);
  letter-spacing:0.34em;
  color:var(--lime); text-transform:uppercase; margin-top:18px; margin-left:0.34em;
  opacity:0; animation:riseIn .9s ease forwards .42s;
}

p.tagline{
  font-family:var(--hand); font-style:normal; font-size:clamp(15px,2vw,20px); line-height:1.8;
  color:var(--ink-soft); max-width:460px; margin:34px auto 0;
  opacity:0; animation:riseIn .9s ease forwards .56s;
}

@keyframes riseIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.cta-zone{
  margin-top:44px; opacity:0; animation:riseIn .9s ease forwards .72s;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:100%;
}

.enter-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--ink); font-family:var(--mono); font-weight:500; font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; padding:15px 30px; border:1px solid var(--line); border-radius:999px;
  transition:border-color .3s ease, background .3s ease, transform .25s ease, gap .3s ease;
}
.enter-btn:hover{ border-color:var(--lime); background:var(--lime-soft); gap:14px; transform:translateY(-1px); }
.enter-btn svg{ width:14px; height:14px; transition:transform .3s ease; }
.enter-btn:hover svg{ transform:translateX(2px); }

/* ---------------- application card ---------------- */
.app-wrap{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s ease, opacity .4s ease, margin .5s ease;
  width:min(94vw, 420px);
  margin-left:auto; margin-right:auto;
}
.app-wrap.open{ max-height:900px; opacity:1; margin-top:2px; }

.app-card{
  background:rgba(28,28,28,0.65); border:1px solid var(--line); border-radius:20px;
  padding:26px 24px 22px; text-align:left; backdrop-filter:blur(6px);
}

.progress{
  display:flex; gap:6px; margin-bottom:20px;
}
.progress span{
  flex:1; height:3px; border-radius:99px; background:var(--line); transition:background .3s ease;
}
.progress span.done{ background:var(--lime); }

.step{ display:none; flex-direction:column; gap:14px; }
.step.active{ display:flex; animation:riseIn .4s ease forwards; }

.step-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}
.step-title{
  font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink);
}
.step-desc{
  font-family:var(--hand); font-size:13.5px; line-height:1.55; color:var(--ink-soft);
}

.field{
  display:flex; align-items:center; gap:0; width:100%;
}
.field input{
  flex:1; background:var(--paper-2); border:1px solid var(--line); border-right:none;
  color:var(--ink); padding:13px 15px; font-size:13px; font-family:var(--mono);
  border-radius:12px 0 0 12px; min-width:0;
}
.field input::placeholder{ color:#6e6a65; }
.field input:focus{ outline:none; border-color:var(--lime); }
.field input:disabled{ opacity:0.4; cursor:not-allowed; }
.field button, .primary-btn{
  background:var(--lime); color:#121212; border:none; font-family:var(--mono); font-weight:700; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:0 18px; height:46px; border-radius:0 12px 12px 0; white-space:nowrap;
  transition:filter .2s ease, transform .2s ease;
}
.primary-btn{
  flex:1; border-radius:12px; padding:14px 18px;
}
.field button:hover, .primary-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.primary-btn:disabled{ opacity:0.35; cursor:not-allowed; transform:none; filter:none; }

.link-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); color:var(--ink);
  padding:12px 16px; border-radius:12px; font-family:var(--mono); font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase; transition:border-color .2s ease, background .2s ease;
  width:100%;
}
.link-btn:hover{ border-color:var(--lime); background:var(--lime-soft); }

.follow-status{
  display:none; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:0.04em; color:var(--lime);
}
.follow-status.done{ display:flex; animation:riseIn .3s ease forwards; }
.follow-status .dot{
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  flex-shrink:0;
}

.step-nav{
  display:flex; align-items:center; gap:10px; margin-top:4px;
}
.back-btn{
  background:transparent; border:none; border-radius:0;
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:10px 14px 10px 0; transition:color .2s ease;
}
.back-btn svg{ width:12px; height:12px; transition:transform .2s ease; }
.back-btn:hover{ color:var(--ink); }
.back-btn:hover svg{ transform:translateX(-2px); }

.form-msg{ font-family:var(--mono); font-size:11.5px; min-height:16px; color:var(--ink-soft); }
.form-msg.err{ color:var(--err); }

.success-state{
  display:none; align-items:center; gap:10px; color:var(--lime);
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em;
  text-align:center; padding:0 12px;
}
.success-state.show{ display:flex; animation:riseIn .5s ease forwards; }
.success-state svg{ width:16px; height:16px; flex-shrink:0; }

footer{
  position:fixed; bottom:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);
  letter-spacing:0.08em; text-transform:uppercase;
  opacity:0; animation:riseIn .9s ease forwards .85s;
}
footer span.sep{ color:var(--line); margin:0 8px; }

/* ---------------- phone-width alignment ---------------- */
@media (max-width:520px){
  main{ padding:24px 20px; padding-bottom:110px; padding-top:96px; }
  h1{ font-size:clamp(48px, 17vw, 90px); }
  .romanized{ letter-spacing:0.28em; margin-left:0.28em; }
  p.tagline{ max-width:320px; font-size:15px; }

  footer{ flex-direction:column; gap:6px; text-align:center; padding:16px 16px 18px; }
  .brand-chip{ top:18px; left:16px; }
  .brand-chip .jp{ font-size:15px; }
  .brand-chip .en{ font-size:9.5px; }
  .hanko-seal{ top:16px; right:16px; font-size:11px; padding:4px 3px 5px; }
  .bg-kanji{ font-size:clamp(70px, 40vw, 160px); right:-6px; opacity:0.05; }

  .app-wrap{ width:100%; }
  .app-card{ padding:22px 18px 18px; border-radius:16px; }
  .field{ flex-wrap:nowrap; }
  .field input{ padding:12px 13px; font-size:12.5px; }
  .field button{ padding:0 14px; font-size:11px; }
  .step-nav{ flex-wrap:wrap; }
  .primary-btn{ min-width:120px; }
}

@media (max-width:360px){
  h1{ font-size:clamp(40px, 16vw, 70px); }
  .bg-kanji{ font-size:clamp(56px, 38vw, 120px); }
  .step-nav{ flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .back-btn{ justify-content:center; padding:10px 0; }
}