.aru-page { --orange: #e74c2a; }
.aru-hero { background: linear-gradient(135deg, #f3efe4 0 72%, #e9e2d2 72%); }
.aru-hero h1 em { color: var(--blue); }
.aru-hero-note { box-shadow-color: var(--orange); box-shadow: 12px 12px 0 var(--orange); }
.opening-form { max-width: 900px; }
.single-prompt { padding: clamp(26px, 5vw, 52px); border: 1px solid var(--ink); background: var(--paper-2); }
.single-prompt label { display: grid; gap: 18px; }
.single-prompt label span { color: var(--orange); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.single-prompt label b { font-family: "Yu Mincho", Georgia, serif; font-size: clamp(28px, 5vw, 54px); line-height: 1.5; }
.single-prompt input { width: 100%; margin-top: 32px; padding: 15px 4px; border: 0; border-bottom: 2px solid var(--ink); outline: 0; background: transparent; font-family: ui-monospace, monospace; font-size: clamp(16px, 2vw, 22px); }
.single-prompt input:focus { border-color: var(--blue); box-shadow: 0 3px 0 rgba(69,104,255,.18); }
.aru-friction { background: #222c4b; }
.your-opening { padding: 15px 18px; border-left: 4px solid var(--acid); color: white !important; background: rgba(255,255,255,.08); font-family: ui-monospace, monospace; }
.your-opening::before { content: "YOUR ANSWER  "; color: var(--acid); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.camera-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.camera-choice.two-choice { grid-template-columns: repeat(2, 1fr); }
.camera-choice label { position: relative; cursor: pointer; }
.camera-choice input { position: absolute; opacity: 0; }
.camera-choice label > span { display: block; min-height: 190px; padding: 26px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.camera-choice small { display: grid; width: 32px; height: 32px; margin-bottom: 28px; place-items: center; border: 1px solid var(--acid); color: var(--acid); }
.camera-choice b { font-family: ui-monospace, monospace; font-size: clamp(16px, 2vw, 22px); line-height: 1.8; }
.camera-choice i { display: block; margin-top: 22px; color: #bdc9d7; font-size: 13px; font-style: normal; line-height: 1.7; }
.camera-choice input:checked + span { border-color: var(--acid); color: var(--ink); background: var(--acid); }
.camera-choice input:checked + span small { border-color: var(--ink); color: var(--ink); }
.camera-choice input:checked + span i { color: var(--ink); }
.camera-choice .action-button { grid-column: 1 / -1; justify-self: start; margin-top: 20px; }
.all-correct { padding: 120px max(5vw, calc((100vw - 1080px) / 2)); }
.all-correct > h2 { margin: 0; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(45px, 7vw, 86px); letter-spacing: -.06em; }
.all-correct > h2 em { color: var(--blue); font-style: normal; }
.all-correct > p:not(.section-number) { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 2; }
.three-cameras { display: grid; margin-top: 52px; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.three-cameras.two-cameras { grid-template-columns: repeat(2, 1fr); }
.three-cameras > div { min-height: 210px; padding: 27px; border: 1px solid var(--ink); background: var(--paper-2); }
.three-cameras span { color: var(--orange); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.three-cameras b { display: block; margin: 34px 0 20px; font-family: "Yu Mincho", Georgia, serif; font-size: 21px; line-height: 1.6; }
.three-cameras code { display: block; background: rgba(69,104,255,.11); line-height: 1.7; }
.aru-why { color: white; background: var(--green); }
.aru-explanation { background: #ede8dc; }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scene-grid.two-scenes { grid-template-columns: repeat(2, 1fr); }
.scene { padding: 28px; border: 1px solid var(--ink); }
.there-scene { background: var(--acid); }
.have-scene { color: white; background: var(--blue); }
.sell-scene { color: white; background: var(--orange); }
.scene-top { display: flex; align-items: center; gap: 12px; font-family: ui-monospace, monospace; }
.scene-top span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid currentColor; }
.scene-top small { font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.scene h3 { min-height: 135px; margin: 30px 0; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(22px, 2.7vw, 32px); line-height: 1.55; }
.scene-sentence { min-height: 105px; padding: 16px; border: 1px solid currentColor; font-family: ui-monospace, monospace; font-size: 17px; font-weight: 700; line-height: 1.8; }
.scene-sentence i { opacity: .7; font-style: normal; }
.scene > p:last-child { line-height: 1.9; }
.scene code { color: inherit; background: rgba(255,255,255,.2); }
.perspective-pair { margin-top: 55px; padding: clamp(25px, 5vw, 50px); color: white; background: var(--ink); }
.perspective-pair > span { color: var(--acid); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.perspective-pair h3 { margin: 20px 0 30px; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(27px, 4vw, 45px); }
.perspective-pair > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perspective-pair p { margin: 0; padding: 20px; border: 1px solid rgba(255,255,255,.25); }
.perspective-pair code { display: block; color: var(--acid); background: none; font-size: 15px; }
.perspective-pair small { display: block; margin-top: 12px; color: #bbc7c2; }
.aru-retry { background: #222c4b; }
.store-form { max-width: 900px; }
.dark-prompt { border-color: rgba(255,255,255,.35); color: white; background: rgba(255,255,255,.04); }
.dark-prompt input { border-color: rgba(255,255,255,.6); color: white; }
.dark-prompt input::placeholder { color: #aeb8c8; }
.retry-prompts { grid-template-columns: repeat(3, 1fr); }
.view-hint { display: block; margin: 16px 0 0; color: var(--acid); line-height: 1.6; }
.aru-transfer { background: #172039; }
.beer-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.beer-views p { margin: 0; padding: 18px; border: 1px solid rgba(255,255,255,.25); }
.beer-views code { display: block; color: var(--ink); background: var(--acid); }
.beer-views small { display: block; margin-top: 13px; color: #bdc9d7; }
.aru-transfer blockquote { margin: 28px 0 0; padding: 22px; border-left: 5px solid var(--acid); color: white; background: rgba(255,255,255,.06); line-height: 1.9; }
.service-bridge { margin-top: 48px; padding: clamp(25px, 5vw, 48px); border: 1px solid rgba(255,255,255,.25); background: var(--ink); }
.service-bridge > span { color: var(--orange); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.service-bridge h3 { margin: 18px 0 26px; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(25px, 4vw, 42px); line-height: 1.5; }
.service-bridge > p:last-child { max-width: 760px; color: #bdc9d7; line-height: 1.9; }
.service-answer { display: inline-block; margin: 0 0 18px; padding: 12px 16px; background: var(--acid); }
.service-answer code { color: var(--ink); background: none; font-size: clamp(16px, 2.5vw, 22px); }
.aru-path { display: grid; max-width: 920px; margin: 46px auto; align-items: center; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; text-align: left; }
.aru-path p { min-height: 155px; margin: 0; padding: 23px; border: 1px solid var(--line); background: var(--paper-2); }
.aru-path span, .aru-path b, .aru-path small { display: block; }
.aru-path span { color: var(--orange); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.aru-path b { margin-top: 22px; font-family: ui-monospace, monospace; font-size: 18px; }
.aru-path small { margin-top: 12px; color: var(--muted); line-height: 1.6; }
.aru-path > i { font-size: 24px; font-style: normal; }
.chapter-pair { display: grid; max-width: 820px; margin: 45px auto; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.chapter-pair p { margin: 0; padding: 24px; border: 1px solid var(--line); background: var(--paper-2); font-weight: 800; line-height: 1.8; }
.chapter-pair span { display: block; margin-bottom: 8px; color: var(--orange); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .15em; }
@media (max-width: 760px) {
  .aru-hero { background: var(--paper); }
  .aru-hero-note { box-shadow: 7px 7px 0 var(--orange); }
  .camera-choice, .camera-choice.two-choice, .three-cameras, .three-cameras.two-cameras, .scene-grid, .scene-grid.two-scenes, .retry-prompts, .beer-views, .chapter-pair, .perspective-pair > div, .aru-path { grid-template-columns: 1fr; }
  .aru-path > i { transform: rotate(90deg); text-align: center; }
  .scene h3 { min-height: auto; }
}