:root {
  --bg: #F2603A;
  --ink: #121212;
  --em: #F2EEE6;
  --sub: rgba(18, 18, 18, 0.78);
  --muted: rgba(18, 18, 18, 0.74);
  --card: #F2EEE6;
  --card-ink: #121212;
  --card-muted: #55524C;
  --field: #FFFFFF;
  --chip: #E6E0D4;
  --error: #B42D20;
  --hero: min(900px, 62vw);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.display { font-family: 'M PLUS Rounded 1c', 'Geist', system-ui, sans-serif; font-weight: 800; }

.page { position: relative; min-height: 100svh; overflow: hidden; }

/* background */
.grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; }
.spark { position: absolute; fill: var(--ink); pointer-events: none; }
.spark.faint { opacity: 0.35; }

/* header */
.top { position: relative; z-index: 3; display: flex; align-items: center; padding: 24px 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand neko-mascot { width: 34px; height: 34px; }
.brand span { font-size: 25px; letter-spacing: -0.03em; }

/* content */
.main { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: min(820px, 100%); padding: 10px 0 140px 120px; }
.main h1 { margin: 0; font-size: 80px; line-height: 0.95; letter-spacing: -0.045em; }
.main h1 em { font-style: normal; padding: 0 0.1em; margin: 0 -0.02em; border-radius: 0.16em; background: var(--em); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lede { margin: 0; max-width: 470px; font-size: 19px; line-height: 1.5; color: var(--sub); }

.card { width: 100%; max-width: 480px; padding: 22px; border-radius: 28px; background: var(--card); color: var(--card-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14); }
.card form { display: grid; gap: 16px; }
.label { font-size: 13px; font-weight: 600; }
.field { display: grid; gap: 8px; }
.field input { height: 48px; width: 100%; padding: 0 18px; border: 0; border-radius: 999px; background: var(--field); color: var(--card-ink); font: inherit; font-size: 15px; outline: none; }
.field input::placeholder { color: var(--card-muted); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
.err { margin-top: -8px; padding-left: 18px; font-size: 13px; color: var(--error); }
.err:empty { display: none; }
fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
legend { margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--chip); color: var(--card-ink); font-size: 14px; font-weight: 500; }
.chip.small { height: 34px; padding: 0 13px; font-size: 13px; }
.chip[aria-checked="true"] { background: var(--ink); color: var(--em); }
.go { height: 52px; border: 0; border-radius: 999px; background: var(--ink); color: var(--em); font-size: 16px; font-weight: 600; }
.go[disabled] { opacity: 0.7; cursor: progress; }
.fine { font-size: 12.5px; text-align: center; color: var(--card-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.done { display: grid; gap: 12px; padding: 4px 2px; }
.done h2 { margin: 0; font-size: 36px; line-height: 1.05; letter-spacing: -0.03em; }
.done p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--card-muted); }
.done p strong { color: var(--card-ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; width: max-content; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--field); font-size: 13px; font-weight: 500; }
.pill i { width: 8px; height: 8px; border-radius: 999px; background: #1FA37A; }
.row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--em); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn.soft { padding: 0 18px; background: var(--field); color: var(--card-ink); font-weight: 500; }
.ghost { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--card-muted); font-size: 13.5px; }

/* hero Neko + rings */
.hero { position: absolute; z-index: 1; width: var(--hero); height: var(--hero); right: calc(var(--hero) * -0.2); bottom: calc(var(--hero) * -0.27); }
.hero neko-mascot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform: rotate(-7deg); cursor: pointer; }
.rings circle { vector-effect: non-scaling-stroke; }
.rings { position: absolute; left: 50%; top: 50%; width: 320%; height: 320%; transform: translate(-50%, -50%); stroke: var(--ink); opacity: 0.07; pointer-events: none; }

.foot { position: absolute; z-index: 3; left: 120px; bottom: 26px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.foot a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot svg { width: 15px; height: 15px; fill: currentColor; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.in { animation: in 360ms ease both; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.shake { animation: shake 420ms ease both; }

/* 404 */
.fallen { position: absolute; z-index: 1; left: calc(100% - var(--hero) * 0.95); bottom: -40px; width: 230px; height: 290px; padding: 18px; border-radius: 18px; background: var(--card); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); transform: rotate(-24deg); display: grid; align-content: start; gap: 10px; }
.fallen span { height: 10px; border-radius: 999px; background: var(--field); }
.fallen code { margin-top: 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--card-muted); word-break: break-all; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: var(--card-muted); word-break: break-all; }

@media (max-width: 900px) {
  .main { padding-left: 56px; padding-right: 56px; }
  .foot { left: 56px; }
}

@media (max-width: 640px) {
  :root { --hero: 450px; }
  .top { padding: 18px 20px; }
  .brand neko-mascot { width: 30px; height: 30px; }
  .brand span { font-size: 21px; }
  .main { gap: 16px; padding: 10px 20px 300px; }
  .main h1 { font-size: 54px; }
  .lede { font-size: 16px; }
  .card { padding: 18px; }
  .done h2 { font-size: 30px; }
  .hero { right: -80px; bottom: -190px; }
  .foot { left: 20px; bottom: 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .fallen { left: 30px; bottom: 90px; width: 150px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .in, .shake { animation: none; }
}