:root {
  --ink: #171815;
  --paper: #f1eddf;
  --acid: #d9ff43;
  --orange: #ff6337;
  --line: rgba(23, 24, 21, .2);
  --muted: #67685f;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(23,24,21,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,24,21,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 22px 22px;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "PingFang SC", monospace;
}

button, input { font: inherit; }
button { color: inherit; }

.topbar {
  height: 68px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
}

.brand { color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 900; letter-spacing: -1px; }
.brand span { color: var(--orange); }
.case-status { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 1.5px; }
.case-status i { width: 8px; height: 8px; border-radius: 50%; background: #56a548; box-shadow: 0 0 0 4px rgba(86,165,72,.13); }

main { min-height: calc(100vh - 115px); }

.intro {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(70px, 12vh, 135px) 30px 90px;
  position: relative;
}

.intro::after {
  content: "K9 / F9";
  position: absolute;
  top: 92px;
  right: 3%;
  padding: 8px 13px;
  border: 1px solid var(--ink);
  transform: rotate(5deg);
  font-size: 12px;
}

.eyebrow { font-size: 11px; letter-spacing: 2.5px; font-weight: 800; color: var(--muted); }
.intro h1 { margin: 24px 0 24px; max-width: 820px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "PingFang SC", sans-serif; font-size: clamp(58px, 11vw, 126px); line-height: .82; letter-spacing: -4px; font-weight: 900; }
.intro p { max-width: 550px; margin: 0; font-family: system-ui, "PingFang SC", sans-serif; font-size: 17px; line-height: 1.8; }
.intro-actions, .finish-actions { display: flex; align-items: center; gap: 24px; margin-top: 38px; }
.primary { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 16px 20px; cursor: pointer; box-shadow: 6px 6px 0 var(--orange); transition: transform .15s, box-shadow .15s; }
.primary:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--orange); }
.primary span { color: var(--acid); margin-left: 25px; }
.text-button { border: 0; border-bottom: 1px solid var(--ink); padding: 7px 0; background: none; cursor: pointer; }
.text-button b { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 4px; margin-left: 6px; background: var(--orange); color: white; font-size: 11px; }

.desk { max-width: 1120px; margin: 0 auto; padding: 54px 24px 90px; display: grid; grid-template-columns: 105px 1fr; gap: 30px; }
.desk[hidden], .finish[hidden] { display: none; }
.rail { border-right: 1px solid var(--ink); padding-right: 22px; }
.rail-label { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.rail > strong { display: block; margin: 5px 0 18px; font-family: Impact, sans-serif; font-size: 54px; line-height: 1; }
.progress-track { height: 145px; width: 7px; background: rgba(23,24,21,.12); position: relative; overflow: hidden; }
.progress-track span { position: absolute; bottom: 0; left: 0; width: 100%; height: 10%; background: var(--orange); transition: height .3s; }
.rail-stat { margin-top: 20px; }
.rail-stat span { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.rail-stat b { font-size: 20px; }

.case-card { background: #faf7ed; border: 1px solid var(--ink); box-shadow: 11px 11px 0 var(--ink); padding: clamp(22px, 5vw, 54px); }
.case-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.target-label { display: block; font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
.case-head h2 { margin: 0; font-size: clamp(28px, 6vw, 52px); letter-spacing: -2px; line-height: 1; }
.pet-tag { border: 1px solid var(--ink); padding: 7px 10px; background: var(--acid); font-size: 11px; white-space: nowrap; }
.brief { font-family: system-ui, "PingFang SC", sans-serif; line-height: 1.7; margin: 22px 0 32px; max-width: 700px; }

fieldset { border: 0; padding: 0; margin: 0; }
legend { width: 100%; font-size: 12px; font-weight: 800; margin-bottom: 13px; display: flex; justify-content: space-between; gap: 12px; }
legend span { color: var(--orange); }
.ingredients { border-top: 1px solid var(--ink); }
.ingredient { display: grid; grid-template-columns: 35px 1fr 24px; align-items: center; min-height: 58px; padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.ingredient:hover { background: rgba(217,255,67,.3); }
.ingredient .num { color: var(--muted); font-size: 10px; }
.ingredient input { position: absolute; opacity: 0; }
.box { width: 19px; height: 19px; border: 1px solid var(--ink); display: grid; place-items: center; }
.ingredient input:checked + .box { background: var(--ink); }
.ingredient input:checked + .box::after { content: "×"; color: var(--acid); font-weight: 900; line-height: 1; }
.ingredient.locked { cursor: default; }
.ingredient.correct { background: rgba(217,255,67,.45); }
.ingredient.wrong { background: rgba(255,99,55,.15); text-decoration: line-through; text-decoration-color: var(--orange); }
.form-error { min-height: 34px; padding-top: 10px; color: #ad2d0e; font-size: 12px; }
.submit, .next { width: 100%; border: 0; background: var(--acid); padding: 16px; font-weight: 900; cursor: pointer; border: 1px solid var(--ink); }
.submit:hover, .next:hover { filter: brightness(.94); }

.verdict { margin-top: 32px; border-top: 2px solid var(--ink); padding-top: 28px; display: grid; grid-template-columns: 105px 1fr; gap: 24px; }
.verdict[hidden] { display: none; }
.stamp { align-self: start; aspect-ratio: 1; border: 4px double currentColor; border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 13px; transform: rotate(-9deg); color: #34722c; }
.stamp.fail { color: var(--orange); }
.verdict-copy > span { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.verdict h3 { margin: 5px 0 9px; font-size: 24px; }
.verdict p { font-family: system-ui, "PingFang SC", sans-serif; line-height: 1.7; margin: 0; }
.answer-row { margin-top: 15px; display: flex; gap: 12px; font-size: 12px; }
.answer-row span { color: var(--muted); }
.next { grid-column: 1 / -1; background: var(--ink); color: var(--paper); }
.next span { color: var(--acid); margin-left: 16px; }

.finish { max-width: 900px; margin: 0 auto; padding: clamp(80px, 15vh, 150px) 28px; display: grid; grid-template-columns: 150px 1fr; gap: 45px; align-items: start; }
.finish-mark { height: 150px; background: var(--acid); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); display: grid; place-items: center; font-size: 75px; font-family: sans-serif; }
.finish h2 { font-size: clamp(35px, 7vw, 65px); margin: 13px 0; letter-spacing: -3px; }
.finish p { font-family: system-ui, "PingFang SC", sans-serif; line-height: 1.7; }

footer { min-height: 47px; padding: 14px clamp(20px, 5vw, 72px); display: flex; justify-content: space-between; gap: 15px; background: var(--ink); color: var(--paper); font-size: 9px; letter-spacing: 1px; }

@media (max-width: 680px) {
  .topbar { height: 58px; }
  .case-status span { display: none; }
  .intro { padding-top: 70px; }
  .intro::after { top: 35px; right: 24px; }
  .intro h1 { letter-spacing: -2px; }
  .intro-actions, .finish-actions { align-items: stretch; flex-direction: column; gap: 16px; }
  .desk { grid-template-columns: 1fr; padding: 24px 14px 70px; }
  .rail { border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 13px; display: grid; grid-template-columns: auto auto 1fr repeat(3, auto); align-items: end; gap: 13px; }
  .rail > strong { font-size: 35px; margin: 0; }
  .progress-track { height: 7px; width: 100%; margin-bottom: 4px; }
  .progress-track span { height: 100% !important; width: 10%; transition: width .3s; }
  .rail-stat { margin: 0; }
  .rail-stat b { font-size: 16px; }
  .case-card { padding: 21px; box-shadow: 6px 6px 0 var(--ink); }
  .case-head { flex-direction: column-reverse; }
  legend { display: block; line-height: 1.6; }
  legend span { display: block; }
  .ingredient { min-height: 62px; }
  .verdict { grid-template-columns: 70px 1fr; gap: 15px; }
  .finish { grid-template-columns: 1fr; gap: 28px; }
  .finish-mark { width: 100px; height: 100px; font-size: 50px; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }