.answers-page { width: min(980px, calc(100% - 48px)); padding-bottom: 110px; }
.answers-index-hero, .answer-detail-hero { position: relative; padding: clamp(34px, 7vw, 78px); overflow: hidden; border: 1px solid #202d23; border-radius: 30px; background: radial-gradient(circle at 88% 0, rgba(80, 231, 121, .12), transparent 32%), #09110c; }
.answers-index-hero::after { position: absolute; top: 16px; right: 24px; color: rgba(80, 231, 121, .055); content: "ANSWERS"; font-family: "Courier New", monospace; font-size: clamp(52px, 12vw, 130px); font-weight: 900; letter-spacing: -.1em; writing-mode: vertical-rl; }
.answers-index-hero > * { position: relative; z-index: 1; }
.answers-index-hero h1 { margin: 14px 0 0; color: #edf7ef; font-size: clamp(58px, 9vw, 100px); line-height: .82; letter-spacing: -.075em; }
.answers-index-hero > p:not(.content-eyebrow) { max-width: 590px; margin: 28px 0 0; color: #91a097; font-size: 14px; line-height: 1.75; }
.answers-index-hero .primary-button { display: inline-flex; margin-top: 26px; text-decoration: none; }

.answer-date-list { margin-top: 68px; }
.answer-date-list > div:first-child { margin-bottom: 20px; }
.answer-date-list h2 { margin: 8px 0 0; color: #e5efe7; font-size: 30px; letter-spacing: -.045em; }
.answer-date-card { display: grid; grid-template-columns: 42px 1fr auto; min-height: 86px; padding: 16px 20px; align-items: center; gap: 17px; border-top: 1px solid #202b23; }
.answer-date-card:last-child { border-bottom: 1px solid #202b23; }
.answer-date-card > span { color: #465249; font-family: "Courier New", monospace; font-size: 9px; }
.answer-date-card time { color: #dfe9e1; font-size: 14px; font-weight: 850; }
.answer-date-card p { margin: 6px 0 0; color: #68756c; font-size: 9px; text-transform: uppercase; }
.answer-date-card > div:last-child { display: flex; gap: 8px; }
.answer-date-card a { padding: 9px 12px; border: 1px solid #29352c; border-radius: 9px; color: #839087; font-size: 9px; font-weight: 850; text-decoration: none; }
.answer-date-card a:last-child { border-color: rgba(80, 231, 121, .25); color: #50e779; }
.answers-empty { padding: 30px; border: 1px dashed #28332a; border-radius: 18px; color: #69766d; text-align: center; }

.answer-detail-hero { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.answer-detail-hero h1 { max-width: 650px; margin: 14px 0 0; color: #edf7ef; font-size: clamp(45px, 7vw, 76px); line-height: .92; letter-spacing: -.065em; }
.answer-detail-hero p:not(.content-eyebrow) { max-width: 610px; margin: 20px 0 0; color: #8c9a91; font-size: 12px; line-height: 1.7; }
.answer-detail-hero > a { flex: 0 0 auto; text-decoration: none; }
.answer-spoiler-note { display: flex; padding: 16px 20px; margin-top: 24px; align-items: center; justify-content: space-between; border: 1px solid rgba(241, 187, 67, .24); border-radius: 13px; color: #837866; background: rgba(241, 187, 67, .055); font-size: 10px; }
.answer-spoiler-note strong { color: #e0be68; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.answer-track-list { display: grid; gap: 9px; margin-top: 26px; }
.answer-track { display: grid; grid-template-columns: 38px 82px minmax(0, 1fr) auto; min-height: 108px; padding: 13px 16px; align-items: center; gap: 18px; border: 1px solid #202c23; border-radius: 18px; background: linear-gradient(100deg, rgba(80, 231, 121, .04), transparent 48%), #0c1410; animation: answer-track-in 380ms calc(var(--answer-order) * 70ms) both; }
.answer-position { color: #4d5a51; font-family: "Courier New", monospace; font-size: 9px; }
.answer-track img { width: 82px; height: 82px; border-radius: 13px; object-fit: cover; box-shadow: 0 12px 30px rgba(0, 0, 0, .36); }
.answer-track p { margin: 0; color: #50e779; font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.answer-track h2 { margin: 6px 0 0; color: #e8f1ea; font-size: clamp(18px, 3vw, 25px); letter-spacing: -.035em; }
.answer-track strong { display: block; margin-top: 5px; color: #859289; font-size: 10px; font-weight: 600; }
.answer-track > a { color: #718078; font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.answer-track > a:hover { color: #50e779; }
@keyframes answer-track-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.answer-bottom-nav { display: flex; margin-top: 28px; justify-content: space-between; gap: 12px; }
.answer-bottom-nav a { color: #50e779; font-size: 10px; font-weight: 800; text-decoration: none; }
.answer-not-found { min-height: 520px; padding-top: 110px; text-align: center; }
.answer-not-found h1 { margin: 14px 0 0; color: #edf7ef; font-size: clamp(46px, 7vw, 76px); letter-spacing: -.06em; }
.answer-not-found > p:not(.content-eyebrow) { margin: 20px 0 28px; color: #7d8a81; }
.answer-not-found a { display: inline-flex; text-decoration: none; }

@media (max-width: 680px) {
  .answers-page { width: calc(100% - 28px); padding-top: 28px; }
  .answers-index-hero, .answer-detail-hero { padding: 38px 24px; border-radius: 23px; }
  .answers-index-hero h1 { font-size: 61px; }
  .answer-date-card { grid-template-columns: 32px 1fr; padding-inline: 8px; }
  .answer-date-card > div:last-child { grid-column: 2; }
  .answer-detail-hero { display: grid; }
  .answer-detail-hero > a { justify-self: start; }
  .answer-spoiler-note { display: grid; gap: 6px; }
  .answer-track { grid-template-columns: 25px 64px minmax(0, 1fr); min-height: 94px; gap: 10px; padding: 12px 10px; }
  .answer-track img { width: 64px; height: 64px; border-radius: 10px; }
  .answer-track > a { grid-column: 3; }
  .answer-bottom-nav { display: grid; }
}

@media (prefers-reduced-motion: reduce) { .answer-track { animation: none; } }