:root { font-family: "Segoe UI", Arial, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-underline-offset: 5px; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.design-shell { width: min(100%, 1320px); min-height: 100svh; margin: auto; padding: 30px 48px 22px; display: grid; grid-template-rows: auto 1fr auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; font-weight: 750; letter-spacing: -.065em; line-height: 1; }
.wordmark .slash { color: var(--accent); padding-inline: .04em; }
.score { display: flex; align-items: center; gap: 16px; font-variant-numeric: tabular-nums; }
.score-label { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.score-numbers { white-space: nowrap; font-size: 22px; }
.score-numbers strong { font-weight: 650; }
.score-numbers .divider { padding-inline: 6px; opacity: .3; }
#answered { opacity: .5; }
.game-area { width: 100%; }
.play-area, .feedback-copy { min-width: 0; }
.game-intro h1, .game-intro p { margin: 0; }
.round-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.round-label, .round-question { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.quote-text { margin: 0; overflow-wrap: break-word; text-wrap: balance; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { display: flex; align-items: center; justify-content: center; gap: 13px; color: inherit; transition: background .16s, color .16s, transform .16s; }
.choice-icon { display: inline-flex; flex: none; }
.choice-icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.choice kbd { margin-left: auto; font-family: inherit; font-weight: 400; font-size: 12px; opacity: .5; }
.keyboard-help { margin: 15px 0 0; text-align: center; font-size: 10px; letter-spacing: .04em; }
.feedback { display: none; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 13px; }
.feedback.visible { display: grid; animation: enter .2s ease-out; }
.feedback-icon { display: grid; place-items: center; width: 25px; height: 25px; font-size: 15px; font-weight: 700; }
.feedback-title { margin: 1px 0 6px; font-size: 15px; font-weight: 650; }
.feedback-detail { margin: 0; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.feedback-detail a { display: inline-block; font-weight: 600; }
.music-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 15px; margin-top: 5px; }
.music-links a { display: inline-flex; align-items: center; min-height: 40px; }
.next { display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 46px; padding: 10px 17px; font-weight: 650; border: 0; white-space: nowrap; }
.next .arrow { font-size: 20px; }
.site-footer { display: flex; justify-content: space-between; align-items: end; gap: 24px; font-size: 10px; }
.footer-left { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-link, .restart { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 0; border: 0; font-size: 11px; background: none; color: inherit; text-decoration: none; }
.footer-link:hover, .restart:hover { text-decoration: underline; }
.catalog-status { margin: 8px 0 0; font-size: 10px; line-height: 1.5; }
.footer-domain { margin: 0 0 15px; letter-spacing: .02em; white-space: nowrap; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* 01 — After Hours: a quiet music interface, with the line as the focal point. */
.after-hours { --accent: #b9f8cf; color-scheme: dark; background: #0c1111; color: #f0f3ed; }
.after-hours .wordmark { font-size: 30px; }
.after-hours .site-header { border-bottom: 1px solid #26302d; padding-bottom: 26px; }
.after-hours .score-label { color: #7d8c85; }
.after-hours .game-area { max-width: 740px; margin: auto; padding: 55px 0 35px; }
.after-hours .game-intro { text-align: center; margin-bottom: 33px; }
.after-hours .game-intro h1 { font-size: 12px; font-weight: 450; color: #9daaa3; letter-spacing: .04em; }
.after-hours .game-intro .intro-decoration { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; margin-bottom: 17px; }
.after-hours .intro-decoration i { width: 3px; height: 9px; background: #779885; border-radius: 4px; }
.after-hours .intro-decoration i:nth-child(2), .after-hours .intro-decoration i:nth-child(6) { height: 17px; }
.after-hours .intro-decoration i:nth-child(3), .after-hours .intro-decoration i:nth-child(5) { height: 25px; }
.after-hours .intro-decoration i:nth-child(4) { height: 34px; background: var(--accent); }
.after-hours .round-line { justify-content: center; }
.after-hours .round-label { font-size: 9px; color: #658473; }
.after-hours .round-question { display: none; }
.after-hours .quote-card { min-height: 247px; display: flex; flex-direction: column; justify-content: center; }
.after-hours .quote-text { padding: 26px 0 34px; text-align: center; font-size: clamp(35px, 4.3vw, 56px); font-weight: 500; line-height: 1.18; letter-spacing: -.045em; }
.after-hours .answer-zone { min-height: 151px; padding-top: 13px; }
.after-hours .choice { justify-content: start; min-height: 72px; padding: 18px 24px; background: #151e1b; border: 1px solid #34433b; border-radius: 99px; font-size: 17px; font-weight: 550; }
.after-hours .choice:hover:not(:disabled) { background: var(--accent); color: #0c2115; border-color: var(--accent); transform: translateY(-2px); }
.after-hours .choice-icon { color: #b9f8cf; }
.after-hours .choice:hover .choice-icon { color: inherit; }
.after-hours .keyboard-help { color: #64766b; }
.after-hours .feedback { padding: 20px 21px; border: 1px solid #34433b; border-radius: 20px; background: #151e1b; }
.after-hours .feedback-icon { color: #b9f8cf; background: #254031; border-radius: 50%; }
.after-hours .feedback.incorrect .feedback-icon { color: #f3c19e; background: #49382c; }
.after-hours .feedback-detail { color: #9caea2; }
.after-hours .feedback-detail a { color: #d8eadd; }
.after-hours .next { background: var(--accent); color: #11251a; border-radius: 99px; }
.after-hours .site-footer { padding-top: 20px; border-top: 1px solid #26302d; color: #82938a; }
.after-hours .footer-domain { color: #586b60; }
.after-hours .catalog-status { color: #586b60; }

/* 02 — Margins: a small literary journal, open space and printed type. */
.margins { --accent: #c85835; color-scheme: light; background: #f5f0e5; color: #272e27; }
.margins .design-shell { padding-inline: 52px; }
.margins .site-header { padding: 5px 0 27px; border-bottom: 1px solid #343c3335; }
.margins .wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 38px; font-weight: 500; letter-spacing: -.075em; }
.margins .wordmark .slash { font-style: italic; padding-inline: .12em; }
.margins .score { gap: 18px; }
.margins .score-label { color: #777b6e; }
.margins .score-numbers { font-family: Georgia, serif; font-size: 24px; }
.margins .game-area { display: grid; grid-template-columns: .8fr 1.25fr; gap: 75px; align-items: center; padding: 68px 0 64px; }
.margins .eyebrow { color: #8c705b; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 25px; }
.margins .game-intro h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(62px, 7vw, 98px); line-height: .99; letter-spacing: -.065em; font-weight: 400; }
.margins .game-intro h1 em { color: var(--accent); font-weight: 400; }
.margins .intro-note { margin-top: 29px; font-size: 13px; line-height: 1.8; color: #777b6e; max-width: 240px; }
.margins .round-line { border-top: 1px solid #343c3340; padding-top: 18px; color: #777b6e; }
.margins .round-question { font-size: 9px; }
.margins .quote-card { min-height: 240px; display: flex; flex-direction: column; }
.margins .quote-text { margin-block: auto; padding: 38px 0 40px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 3.4vw, 47px); line-height: 1.22; letter-spacing: -.04em; }
.margins .answer-zone { min-height: 151px; }
.margins .choice { justify-content: start; min-height: 68px; padding: 17px 20px; border: 1px solid #343c3380; border-radius: 3px; background: transparent; font-size: 15px; }
.margins .choice:hover:not(:disabled) { background: #263c31; color: #f5f0e5; border-color: #263c31; }
.margins .keyboard-help { color: #929286; text-align: left; margin-top: 18px; }
.margins .feedback { padding: 19px 0; border-top: 1px solid #343c3340; border-bottom: 1px solid #343c3340; }
.margins .feedback-icon { color: #f5f0e5; background: #385445; border-radius: 50%; }
.margins .feedback.incorrect .feedback-icon { background: #b7794f; }
.margins .feedback-detail { color: #747768; }
.margins .feedback-detail a { color: #384c3e; }
.margins .next { background: #263c31; color: #f5f0e5; border-radius: 3px; }
.margins .site-footer { border-top: 1px solid #343c3335; padding-top: 19px; color: #777b6e; }
.margins .catalog-status { color: #929286; }
.margins .footer-domain { font-family: Georgia, serif; font-size: 13px; font-style: italic; }

/* 03 — Split Decision: a bold game poster with broad, tactile choice panels. */
.split-decision { --accent: #173351; color-scheme: light; color: #152d48; background: #ff633d; }
.split-decision .design-shell { width: min(100%, 1216px); padding-top: 25px; }
.split-decision .site-header { padding-bottom: 23px; border-bottom: 2px solid #152d48; }
.split-decision .wordmark { font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(35px, 4.5vw, 59px); font-weight: 900; letter-spacing: -.09em; }
.split-decision .wordmark .slash { color: #fff3db; padding-inline: .025em; }
.split-decision .score { align-items: start; flex-direction: column; gap: 2px; background: #fff3db; padding: 10px 19px; transform: rotate(3deg); box-shadow: 3px 3px 0 #152d48; }
.split-decision .score-label { font-size: 8px; font-weight: 800; }
.split-decision .score-numbers { font-size: 24px; line-height: 1.15; }
.split-decision .game-area { width: min(100%, 900px); margin: auto; padding: 33px 0 28px; }
.split-decision .game-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.split-decision .game-intro h1 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.split-decision .intro-star { font-size: 33px; line-height: 1; }
.split-decision .quote-stack { position: relative; margin: 0 0 20px; }
.split-decision .quote-stack::before { content: ""; position: absolute; inset: 7px -5px -6px 4px; background: #152d48; transform: rotate(1.3deg); }
.split-decision .quote-card { position: relative; min-height: 261px; display: flex; flex-direction: column; justify-content: center; padding: 22px 32px; background: #fff3db; border: 2px solid #152d48; }
.split-decision .round-line { color: #62717a; }
.split-decision .round-question { font-size: 9px; }
.split-decision .quote-text { margin-block: auto; padding: 30px 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; text-align: center; font-size: clamp(37px, 4.6vw, 62px); line-height: 1.13; letter-spacing: -.012em; }
.split-decision .choices { gap: 0; border: 2px solid #152d48; }
.split-decision .choice { justify-content: start; min-height: 87px; padding: 17px 28px; border: 0; border-radius: 0; font-size: 26px; font-weight: 800; letter-spacing: -.045em; }
.split-decision .choice.song { color: #fff3db; background: #152d48; }
.split-decision .choice.bible { color: #152d48; background: #ffb9a0; }
.split-decision .choice:hover:not(:disabled) { background: #fff3db; color: #152d48; }
.split-decision .choice-icon svg { width: 31px; height: 31px; stroke-width: 1.8; }
.split-decision .choice kbd { font-size: 15px; }
.split-decision .answer-zone { min-height: 137px; }
.split-decision .keyboard-help { color: #693e37; font-size: 10px; font-weight: 550; }
.split-decision .feedback { min-height: 87px; padding: 19px 23px; border: 2px solid #152d48; background: #fff3db; }
.split-decision .feedback-icon { background: #d9e65f; border: 1px solid #152d48; }
.split-decision .feedback.incorrect .feedback-icon { background: #ffb9a0; }
.split-decision .feedback-title { font-weight: 800; }
.split-decision .feedback-detail { color: #5a6873; }
.split-decision .feedback-detail a { color: #152d48; }
.split-decision .next { border-radius: 0; background: #152d48; color: #fff3db; }
.split-decision .site-footer { padding-top: 13px; border-top: 2px solid #152d48; color: #542f2a; }
.split-decision .footer-link, .split-decision .restart { font-weight: 650; }
.split-decision .catalog-status { color: #693e37; }
.split-decision .footer-domain { font-weight: 800; letter-spacing: -.02em; }

@media (min-width: 1440px) { .after-hours .quote-card { min-height: 285px; } }
@media (max-width: 900px) {
  .design-shell, .margins .design-shell { padding-inline: 30px; }
  .margins .game-area { gap: 36px; }
  .margins .game-intro h1 { font-size: 65px; }
  .margins .quote-text { font-size: 34px; }
  .margins .round-question { display: none; }
  .margins .choice { padding-inline: 15px; gap: 9px; }
}
@media (max-width: 640px) {
  .design-shell, .margins .design-shell { padding: 23px 22px 15px; }
  .site-header { gap: 12px; }
  .score { gap: 10px; }
  .score-label { font-size: 9px; }
  .score-numbers { font-size: 19px; }
  .choice { min-width: 0; }
  .choice kbd, .keyboard-help { display: none; }
  .feedback { grid-template-columns: 25px minmax(0, 1fr); gap: 10px; }
  .next { grid-column: 1 / -1; margin-top: 5px; }
  .site-footer { gap: 10px; align-items: center; }
  .footer-left { gap: 15px; }
  .footer-domain { display: none; }
  .catalog-status { font-size: 9px; }
  .footer-link, .restart { font-size: 10px; }
  .after-hours .site-header { padding-bottom: 23px; }
  .after-hours .wordmark { font-size: 26px; }
  .after-hours .score-label { display: none; }
  .after-hours .game-area { padding: 40px 0 32px; }
  .after-hours .game-intro { margin-bottom: 25px; }
  .after-hours .game-intro h1 { font-size: 11px; }
  .after-hours .quote-card { min-height: 240px; }
  .after-hours .quote-text { font-size: clamp(32px, 8.5vw, 46px); padding-block: 25px 33px; }
  .after-hours .answer-zone { min-height: 110px; }
  .after-hours .choice { min-height: 68px; font-size: 15px; padding: 16px; gap: 10px; }
  .after-hours .feedback { padding: 18px; }
  .after-hours .site-footer { padding-top: 10px; }
  .margins .wordmark { font-size: 32px; }
  .margins .site-header { padding-bottom: 22px; }
  .margins .score { gap: 8px; }
  .margins .score-label { display: none; }
  .margins .game-area { display: block; padding: 30px 0; }
  .margins .game-intro { margin-bottom: 30px; }
  .margins .eyebrow { font-size: 8px; margin-bottom: 12px; }
  .margins .game-intro h1 { font-size: clamp(43px, 12vw, 60px); line-height: 1.03; }
  .margins .game-intro h1 br { display: none; }
  .margins .intro-note { display: none; }
  .margins .quote-card { min-height: 223px; }
  .margins .quote-text { font-size: clamp(31px, 8.5vw, 40px); padding-block: 30px; }
  .margins .round-line { padding-top: 16px; }
  .margins .answer-zone { min-height: 99px; }
  .margins .choice { font-size: 14px; min-height: 64px; gap: 10px; }
  .margins .site-footer { padding-top: 10px; }
  .split-decision .design-shell { padding-top: 22px; }
  .split-decision .site-header { padding-bottom: 23px; }
  .split-decision .wordmark { font-size: 35px; }
  .split-decision .score { padding: 8px 12px; gap: 1px; }
  .split-decision .score-label { font-size: 7px; }
  .split-decision .score-numbers { font-size: 19px; }
  .split-decision .game-area { padding: 32px 0; }
  .split-decision .game-intro { margin-bottom: 15px; }
  .split-decision .game-intro h1 { font-size: 10px; letter-spacing: .06em; }
  .split-decision .intro-star { font-size: 28px; }
  .split-decision .quote-card { min-height: 255px; padding: 19px; }
  .split-decision .quote-text { font-size: clamp(36px, 10vw, 49px); padding-block: 28px; }
  .split-decision .round-question { display: none; }
  .split-decision .choice { min-height: 82px; padding: 17px 16px; gap: 11px; font-size: 23px; }
  .split-decision .choice-icon svg { width: 25px; height: 25px; }
  .split-decision .answer-zone { min-height: 110px; }
  .split-decision .feedback { padding: 18px 15px; }
  .split-decision .site-footer { padding-top: 8px; }
}
@media (max-width: 355px) {
  .design-shell, .margins .design-shell { padding-inline: 17px; }
  .after-hours .choice { font-size: 13px; padding-inline: 13px; gap: 8px; }
  .choice-icon svg { width: 20px; height: 20px; }
  .footer-left { gap: 11px; }
  .split-decision .wordmark { font-size: 31px; }
  .split-decision .choice { font-size: 21px; padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }