/* Semantic questions remain readable without the decorative enhancement. */
.problems-scroll { position: relative; background: var(--cream, #fef9ef); color: var(--ink, #20252b); width: 100%; }
.problems-reading-list { width: min(1180px, calc(100% - 96px)); margin-inline: auto; padding-block: 64px; }
.problem-reading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 7vw, 110px); padding-block: 46px; }
.problem-reading + .problem-reading { border-top: 1px solid #20252b24; }
.problem-reading h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.2; letter-spacing: -.035em; }
.problem-reading-points { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 20px; font-size: 18px; line-height: 1.55; }
.problem-reading-points li { padding-left: 19px; position: relative; }
.problem-reading-points li::before { content: ''; position: absolute; top: .65em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #59616f; }
.problems-enhanced .problems-reading-list { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.problems-scroll-track { position: relative; }
.problems-sticky { position: relative; isolation: isolate; }
.problems-enhanced .problems-scroll-track { height: 505svh; }
.problems-enhanced .problems-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; }
.problems-orbits, .problems-scenes { display: none; }
.problems-enhanced .problems-orbits, .problems-enhanced .problems-scenes { display: block; }
.problems-topic-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(520px, 86%); margin: 0 auto; padding-top: 36px; }
.problems-topic-nav button { min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #20252b2e; border-radius: 7px; background: var(--cream, #fef9ef); color: #454c57; font: 500 14px/1.2 var(--reading); }
.problems-topic-nav button[aria-pressed="true"] { background: #98aaff; color: #20252b; border-color: #98aaff; }
.problems-topic-nav button:hover:not([aria-pressed="true"]) { border-color: #20252b; }
.problems-topic-nav button:focus-visible { outline: 3px solid #596dba; outline-offset: 4px; box-shadow: none; }
.problems-enhanced .problems-topic-nav { position: absolute; z-index: 3; left: 50%; top: var(--problem-nav-top); transform: translateX(-50%); margin: 0; padding: 0; }
.problems-orbits { position: absolute; inset: 0; pointer-events: none; }
.problems-orbits span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1.2px solid #272c3547; border-radius: 50%; }
.problems-orbits span:nth-child(2) { border-color: #272c353b; }
.problems-orbits span:nth-child(3) { border-color: #272c352e; }
.problems-scenes, .problem-scene { position: absolute; inset: 0; }
.problem-scene { opacity: 0; pointer-events: none; }
.problem-scene-center { position: absolute; width: min(66%, 840px); left: 50%; top: calc(50% + var(--problem-question-offset, 32px)); transform: translate(-50%, -50%); text-align: center; }
.problem-scene-title { display: block; color: var(--ink, #20252b); font: 600 clamp(30px, min(4.3vw, 5.4svh), 64px)/1.12 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.problem-scene-points { list-style: none; margin: 0; }
.problem-orbit-point { position: absolute; left: 0; top: 0; transform: translate(-50%, 12px); opacity: 0; width: 360px; padding: 14px 18px; border: 1px solid #272c3533; border-radius: 9px; background: var(--cream, #fef9ef); color: #303640; font-size: 20px; line-height: 1.4; }
.problem-orbit-point[data-side="above"] { transform: translate(-50%, calc(-100% - 12px)); }
.problem-orbit-point::after { content: ''; position: absolute; left: 50%; top: -12px; height: 12px; border-left: 1px solid #272c3573; }
.problem-orbit-point[data-side="above"]::after { top: 100%; }
.problem-orbit-marker { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #4b515d; left: 50%; top: -13px; transform: translate(-50%, -50%); }
.problem-orbit-point[data-side="above"] .problem-orbit-marker { top: calc(100% + 13px); }
@media (max-width: 1099px) {
  .problems-reading-list { width: calc(100% - 48px); }
  .problem-scene-center { width: 86%; max-width: 640px; }
  .problem-scene-title { font-size: clamp(30px, min(5vw, 5.4svh), 46px); }
  .problem-orbit-point { width: min(360px, 76vw); font-size: 18px; padding: 12px 14px; }
}
@media (max-width: 600px) {
  .problems-reading-list { width: calc(100% - 40px); padding-block: 32px; }
  .problem-reading { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 32px; }
  .problem-reading-points { font-size: 17px; }
  .problem-scene-title { font-size: clamp(25px, 6.8vw, 34px); line-height: 1.14; }
  .problem-orbit-point { font-size: 16px; padding: 12px; }
  .problems-topic-nav button { font-size: 12px; padding: 7px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .problems-enhanced .problems-scroll-track { height: auto; }
  .problems-enhanced .problems-sticky { position: relative; height: auto; overflow: visible; }
  .problems-enhanced .problems-orbits, .problems-enhanced .problems-scenes { display: none; }
  .problems-enhanced .problems-topic-nav { position: static; transform: none; margin-inline: auto; padding-top: 36px; }
  .problems-enhanced .problems-reading-list { position: static; width: min(1180px, calc(100% - 40px)); height: auto; margin-inline: auto; padding-block: 32px; overflow: visible; clip-path: none; white-space: normal; }
}

.problems-skip { display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:20px auto; color:var(--cream); border-radius:50%; position:relative; z-index:5; background:#15171c; }
.problems-skip svg { width:56px; height:56px; overflow:visible; }
.problems-skip text { fill:currentColor; font:700 10px monospace; text-anchor:middle; }
.problems-skip:hover { color:#98aaff; }
.problems-skip:focus-visible { outline:2px solid var(--cream); outline-offset:4px; }
.problems-enhanced .problems-skip { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); margin:0; }
@media(prefers-reduced-motion:reduce) {
  .problems-enhanced .problems-skip { position:relative; bottom:auto; left:auto; transform:none; margin:20px auto; }
  html { scroll-behavior:auto; }
}

/* Keep the skip arrow behind opaque answer cards when their paths overlap. */
.problems-enhanced .problems-scenes { z-index: 1; pointer-events: none; }
.problems-enhanced .problems-skip { z-index: 0; background: transparent; }