.p404-layout {
  --p404-ink: #173852;
  --p404-midnight: #101b24;
  --p404-brass: #b98b34;
  --p404-brass-deep: #805b1f;
  --p404-paper: #fffdf7;
  --p404-mist: #edf3f2;
  --p404-plum: #5e405d;
  display: grid;
  gap: 1.5rem;
  color: var(--p404-ink);
}

.p404-page { min-width: 0; }

.p404-layout .p404-kicker {
  margin: 0 0 0.18rem;
  color: var(--p404-brass-deep);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.p404-setup {
  display: block;
  margin: 0 0 0.8rem;
  border-bottom: 1px solid #d8c79d;
}

.p404-setup h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.p404-setup > p:last-child {
  max-width: 66rem;
  margin: 0.35rem 0 0;
  padding-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.48;
}

.p404-art-wrap,
.p404-key-art { min-width: 0; margin: 0; }

.p404-key-art {
  overflow: hidden;
  background: var(--p404-midnight);
  border: 1px solid #9f7b3b;
  border-radius: 1rem;
  box-shadow: 0 0.9rem 2rem rgba(23, 56, 82, 0.18);
}

.p404-key-art img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.p404-report {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  color: #f7f1df;
  background: radial-gradient(circle at 84% 16%, rgba(185, 139, 52, 0.2), transparent 15rem), var(--p404-midnight);
  border: 1px solid #523e22;
  border-radius: 1rem;
}

.p404-report .p404-kicker,
.p404-connection .p404-kicker { color: #e5c86d; }

.p404-report__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}

.p404-report__header h2 {
  margin: 0;
  color: #fffaf0;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.05;
}

.p404-status {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, minmax(4.2rem, 1fr));
  gap: 0.35rem;
}

.p404-status div {
  display: flex;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  flex-direction: column-reverse;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(229, 200, 109, 0.33);
  border-radius: 0.55rem;
}

.p404-status dt {
  color: #c9d1d2;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.p404-status dd {
  margin: 0;
  color: #f1d779;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
}

.p404-report__body {
  display: grid;
  margin-top: 0.7rem;
  grid-template-columns: minmax(18rem, 1.2fr) minmax(12rem, 0.8fr);
  align-items: center;
  gap: 0.9rem;
}

.p404-grid {
  width: 100%;
  border-spacing: 0.32rem 0.25rem;
  table-layout: fixed;
}

.p404-grid th {
  padding: 0 0 0.08rem;
  color: #aebbbf;
  font-size: 0.62rem;
  font-weight: 750;
}

.p404-grid td {
  height: clamp(2.2rem, 5vw, 2.9rem);
  color: #fbf8ef;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.55rem, 3.8vw, 2.2rem);
  font-weight: 850;
  line-height: 1;
  text-align: center;
  background: #263540;
  border: 1px solid #536570;
  border-radius: 0.55rem;
}

.p404-rule {
  display: grid;
  padding: 0.75rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.055);
  border-left: 0.22rem solid var(--p404-brass);
  border-radius: 0.45rem;
}

.p404-rule__mark {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0;
  color: #f1d779;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 850;
  place-items: center;
  border: 1px solid rgba(229, 200, 109, 0.48);
  border-radius: 50%;
}

.p404-rule h3 { margin: 0; color: #fffaf0; font-size: 1rem; }
.p404-rule p:last-child { margin: 0.28rem 0 0; color: #ced7d8; font-size: 0.84rem; line-height: 1.4; }

.p404-question { margin-top: 0.9rem; }
.p404-question .problem-section-label { color: var(--p404-ink); }

.p404-first-action {
  display: grid;
  padding: 0.35rem 0 0.15rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
}

.p404-first-action > p { margin: 0; }

.p404-address-response {
  display: flex;
  align-items: end;
  gap: 0.28rem;
  color: var(--p404-plum);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.7rem;
  font-weight: 850;
}

.p404-letter-blank { display: block; width: 2.15rem; height: 2.35rem; border-bottom: 0.13rem solid var(--p404-ink); }

.p404-vivian-line {
  display: flex;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.8rem;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.65rem;
  color: #e9edf1;
  background: linear-gradient(90deg, transparent, #24334d 22%, #17233a);
  border-radius: 0.45rem;
}

.p404-vivian-line p { margin: 0; font-family: var(--font-display); font-size: 1.04rem; font-weight: 750; }
.p404-vivian-line cite { color: #d9ba62; font-size: 0.72rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.p404-scene-cue {
  margin: 0.7rem 0 0;
  color: #64767c;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-align: right;
}

.p404-proof-lead,
.p404-payoff-lead {
  display: grid;
  padding: 1rem 1.15rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  background: linear-gradient(130deg, #f4efe4, #edf3f2);
  border: 1px solid #c9c1ad;
  border-radius: 0.8rem;
}

.p404-proof-lead h2,
.p404-payoff-lead h2 { margin: 0; color: var(--p404-ink); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1; }
.p404-proof-lead > div > p:last-child,
.p404-payoff-lead > div > p:last-child { max-width: 40rem; margin: 0.5rem 0 0; font-size: 0.92rem; }

.p404-page-step { margin: 0; color: #74848a; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; }
.p404-page-step span { color: var(--p404-brass-deep); font-family: var(--font-display); font-size: 2rem; }

.p404-proof-reference {
  display: grid;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(18rem, 1.3fr);
  align-items: center;
  gap: 1.2rem;
  background: var(--p404-midnight);
  border-radius: 0.8rem;
}

.p404-proof-reference h3 { margin: 0; color: #fffaf0; font-size: 1.3rem; }
.p404-proof-reference > div:first-child > p:last-child { margin: 0.35rem 0 0; color: #cad4d6; font-size: 0.85rem; }
.p404-proof-reference .p404-kicker { color: #e5c86d; }

.p404-reference-grid,
.p404-pair-lab__words { display: grid; grid-template-columns: repeat(4, minmax(2.1rem, 1fr)); gap: 0.28rem; }

.p404-reference-grid span,
.p404-pair-lab__words span {
  display: grid;
  min-height: 2.35rem;
  color: #fbf7ea;
  background: #263540;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.18rem;
  font-weight: 850;
  place-items: center;
  border: 1px solid #536570;
  border-radius: 0.35rem;
}

.p404-reference-grid .p404-reference-number,
.p404-pair-lab__words .p404-reference-number { min-height: 1.2rem; color: #9caaae; background: transparent; font-size: 0.72rem; border: 0; }

.p404-question--proof { margin-top: 1.15rem; }
.p404-proof-part > p { max-width: 62rem; margin: 0.2rem 0 0; line-height: 1.48; }

.p404-omit-grid {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.p404-omit-grid div {
  display: grid;
  padding: 0.65rem 0.75rem;
  grid-template-columns: auto minmax(3rem, 1fr);
  align-items: center;
  gap: 0.8rem;
  background: var(--p404-mist);
  border: 1px solid #b6c3c3;
  border-radius: 0.5rem;
}

.p404-omit-grid strong { color: #4d5f64; font-size: 0.82rem; }
.p404-omit-grid span { min-height: 1.15rem; border-bottom: 1px solid #7d9092; }

.p404-proof-writing { margin-top: 1rem; }
.p404-writing-label { margin: 0 0 0.5rem; color: #53666c; font-size: 0.84rem; font-weight: 750; }
.p404-proof-writing > span { display: block; min-height: 1.65rem; border-bottom: 1px solid #98aaad; }

.p404-turn-cue {
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  text-align: right;
  background: linear-gradient(90deg, transparent, #f4efe4 30%);
  border-right: 0.2rem solid var(--p404-brass);
}

.p404-turn-cue > p:last-child { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }

.p404-rule--light { min-width: 18rem; background: rgba(23, 56, 82, 0.06); border-left-color: var(--p404-brass); }
.p404-rule--light .p404-rule__mark { color: var(--p404-brass-deep); border-color: #c4a766; }
.p404-rule--light h3 { color: var(--p404-ink); }
.p404-rule--light p:last-child { color: #52666c; }

.p404-question--payoff { margin-top: 1rem; }
.p404-pair-part,
.p404-build-part { padding: 0.85rem 0; }
.p404-pair-part h3,
.p404-build-part h3 { margin: 0; color: var(--p404-ink); font-size: 1.05rem; }
.p404-pair-part h3 span,
.p404-build-part h3 span { display: inline-grid; width: 1.65rem; height: 1.65rem; margin-right: 0.35rem; color: #fffaf0; background: var(--p404-brass-deep); place-items: center; border-radius: 50%; }
.p404-pair-part > p,
.p404-build-part > p { margin: 0.55rem 0 0; line-height: 1.48; }

.p404-pair-lab {
  display: grid;
  margin-top: 0.8rem;
  padding: 0.85rem;
  grid-template-columns: minmax(13rem, 0.75fr) minmax(20rem, 1.25fr);
  align-items: center;
  gap: 1rem;
  background: #fff9e8;
  border: 1px solid #d9c581;
  border-radius: 0.65rem;
}

.p404-pair-lab__words { grid-template-columns: repeat(4, minmax(2rem, 1fr)); }
.p404-pair-lab__responses { display: grid; gap: 0.75rem; }
.p404-pair-lab__responses p,
.p404-build-response p { display: flex; margin: 0; align-items: baseline; gap: 0.45rem; font-size: 0.88rem; }

.p404-long-blank,
.p404-short-blank,
.p404-why span { display: inline-block; min-width: 2rem; min-height: 1.15rem; flex: 1; border-bottom: 1px solid #6f8185; }
.p404-short-blank { max-width: 5rem; }

.p404-build-part { margin-top: 0.25rem; border-top: 1px solid #d6dddc; }
.p404-build-response { display: grid; margin-top: 0.8rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.p404-four-blanks { display: grid; grid-template-columns: repeat(4, 2.25rem); gap: 0.35rem; }
.p404-four-blanks span { display: block; height: 2.35rem; background: #fbfcfa; border: 1px solid #7f9397; border-bottom: 0.14rem solid var(--p404-ink); border-radius: 0.28rem; }

.p404-page3-tail {
  display: grid;
  margin-top: 0.8rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(14rem, 0.7fr);
  align-items: stretch;
  gap: 0.8rem;
}
.p404-connection {
  padding: 0.95rem 1.1rem;
  color: #ecf3f4;
  background: radial-gradient(circle at 92% 20%, rgba(229, 200, 109, 0.18), transparent 12rem), #1a3845;
  border-radius: 0.75rem;
}
.p404-connection h2 { margin: 0; color: #fffaf0; font-size: 1.3rem; }
.p404-connection p:last-child { max-width: 58rem; margin: 0.4rem 0 0; color: #d5e0e1; font-size: 0.86rem; line-height: 1.45; }

.p404-closing-art {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--p404-midnight);
  border: 1px solid #9f7b3b;
  border-radius: 0.75rem;
}

.p404-closing-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (max-width: 52rem) {
  .p404-setup,
  .p404-report__body,
  .p404-proof-reference,
  .p404-pair-lab,
  .p404-page3-tail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .p404-report__header,
  .p404-proof-lead,
  .p404-payoff-lead,
  .p404-build-response,
  .p404-first-action { grid-template-columns: minmax(0, 1fr); }
  .p404-status { width: 100%; }
  .p404-first-action { justify-items: start; }
  .p404-rule--light { min-width: 0; }
}

@media (max-width: 30rem) {
  .p404-omit-grid { grid-template-columns: minmax(0, 1fr); }
  .p404-status { grid-template-columns: minmax(0, 1fr); }
  .p404-grid { border-spacing: 0.18rem; }
  .p404-letter-blank { width: 1.75rem; }
}

@media print {
  .p404-layout { display: block; color: var(--p404-ink); }
  .p404-page { box-sizing: border-box; }

  .p404-setup { margin-bottom: 0.09in; padding: 0.08in 0.12in 0.09in; }
  .p404-setup > p:last-child { margin-top: 0.025in; font-size: 0.135in; line-height: 1.34; }
  .p404-key-art { border-radius: 0.11in; box-shadow: none; }
  .p404-key-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }

  .p404-report { margin-top: 0.1in; padding: 0.09in 0.11in; border-radius: 0.1in; break-inside: avoid; }
  .p404-report__header h2 { font-size: 0.18in; }
  .p404-status { gap: 0.04in; }
  .p404-status div { padding: 0.025in 0.05in; }
  .p404-status dt { font-size: 0.125in; }
  .p404-status dd { font-size: 0.19in; }
  .p404-report__body { margin-top: 0.045in; grid-template-columns: minmax(4.1in, 1.3fr) minmax(1.9in, 0.7fr); gap: 0.1in; }
  .p404-grid { border-spacing: 0.05in 0.025in; }
  .p404-grid th { font-size: 0.125in; }
  .p404-grid td { height: 0.31in; font-size: 0.21in; border-radius: 0.05in; }
  .p404-rule { padding: 0.07in; gap: 0.07in; }
  .p404-rule__mark { width: 0.38in; height: 0.38in; font-size: 0.15in; }
  .p404-rule h3 { font-size: 0.14in; }
  .p404-rule p:last-child { margin-top: 0.02in; font-size: 0.125in; line-height: 1.3; }

  .p404-question { margin-top: 0.08in; }
  .p404-question .problem-question-header { margin-bottom: 0.035in; }
  .p404-question .problem-section-label { font-size: 0.17in; }
  .p404-question .problem-paper-note { font-size: 0.125in; }
  .p404-first-action { padding-top: 0.025in; gap: 0.12in; }
  .p404-first-action > p { font-size: 0.13in; line-height: 1.32; }
  .p404-address-response { font-size: 0.2in; }
  .p404-letter-blank { width: 0.29in; height: 0.32in; }
  .p404-vivian-line { margin-top: 0.05in; padding: 0.045in 0.08in; border-radius: 0.04in; }
  .p404-vivian-line p { font-size: 0.13in; }
  .p404-vivian-line cite,
  .p404-layout .p404-kicker { font-size: 0.125in; }
  .p404-scene-cue { margin-top: 0.06in; font-size: 0.125in; }

  .p404-page--proof,
  .p404-page--payoff { padding-top: 0.12in; }
  .p404-proof-lead,
  .p404-payoff-lead { padding: 0.11in 0.14in; border-radius: 0.08in; }
  .p404-proof-lead h2,
  .p404-payoff-lead h2 { font-size: 0.23in; }
  .p404-proof-lead > div > p:last-child,
  .p404-payoff-lead > div > p:last-child { margin-top: 0.04in; font-size: 0.13in; }
  .p404-page-step { font-size: 0.125in; }
  .p404-page-step span { font-size: 0.3in; }

  .p404-proof-reference { margin-top: 0.14in; padding: 0.11in 0.13in; grid-template-columns: minmax(1.8in, 0.65fr) minmax(4.4in, 1.35fr); gap: 0.14in; border-radius: 0.08in; }
  .p404-proof-reference h3 { font-size: 0.18in; }
  .p404-proof-reference > div:first-child > p:last-child { margin-top: 0.025in; font-size: 0.125in; }
  .p404-reference-grid { gap: 0.035in; }
  .p404-reference-grid span { min-height: 0.31in; font-size: 0.16in; border-radius: 0.04in; }
  .p404-reference-grid .p404-reference-number,
  .p404-pair-lab__words .p404-reference-number { min-height: 0.14in; font-size: 0.125in; }

  .p404-question--proof { margin-top: 0.15in; }
  .p404-proof-part > p { margin-top: 0.03in; font-size: 0.135in; line-height: 1.4; }
  .p404-omit-grid { margin-top: 0.13in; gap: 0.09in; }
  .p404-omit-grid div { padding: 0.09in 0.1in; gap: 0.09in; }
  .p404-omit-grid strong { font-size: 0.13in; }
  .p404-omit-grid span { min-height: 0.18in; }
  .p404-proof-writing { margin-top: 0.14in; }
  .p404-writing-label { margin-bottom: 0.05in; font-size: 0.13in; }
  .p404-proof-writing > span { min-height: 0.32in; }
  .p404-turn-cue { margin-top: 0.16in; padding: 0.09in 0.11in; }
  .p404-turn-cue > p:last-child { font-size: 0.14in; }

  .p404-payoff-lead { grid-template-columns: minmax(0, 1fr) minmax(2.15in, 0.7fr); }
  .p404-rule--light { min-width: 0; }
  .p404-question--payoff { margin-top: 0.12in; }
  .p404-pair-part,
  .p404-build-part { padding: 0.08in 0; }
  .p404-pair-part h3,
  .p404-build-part h3 { font-size: 0.15in; }
  .p404-pair-part h3 span,
  .p404-build-part h3 span { width: 0.23in; height: 0.23in; margin-right: 0.04in; }
  .p404-pair-part > p,
  .p404-build-part > p { margin-top: 0.045in; font-size: 0.13in; line-height: 1.38; }
  .p404-pair-lab { margin-top: 0.08in; padding: 0.09in; grid-template-columns: minmax(1.65in, 0.58fr) minmax(4.6in, 1.42fr); gap: 0.11in; border-radius: 0.06in; }
  .p404-pair-lab__words { gap: 0.03in; }
  .p404-pair-lab__words span { min-height: 0.3in; font-size: 0.15in; }
  .p404-pair-lab__responses { gap: 0.075in; }
  .p404-pair-lab__responses p,
  .p404-build-response p { font-size: 0.13in; }
  .p404-long-blank,
  .p404-short-blank,
  .p404-why span { min-height: 0.18in; }
  .p404-build-part { margin-top: 0.05in; }
  .p404-build-response { margin-top: 0.07in; gap: 0.12in; }
  .p404-four-blanks { grid-template-columns: repeat(4, 0.34in); gap: 0.045in; }
  .p404-four-blanks span { height: 0.36in; }
  .p404-page3-tail { margin-top: 0.09in; grid-template-columns: minmax(0, 1.35fr) minmax(2.45in, 0.65fr); gap: 0.08in; }
  .p404-connection { padding: 0.09in 0.12in; border-radius: 0.07in; break-inside: avoid; }
  .p404-connection h2 { font-size: 0.16in; }
  .p404-connection p:last-child { margin-top: 0.03in; font-size: 0.125in; line-height: 1.35; }
  .p404-closing-art { min-height: 1.38in; border-radius: 0.07in; break-inside: avoid; }
}