.task-nav-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: transparent; font-family: inherit; font-size: 12px; font-weight: 750; line-height: 1.3; text-decoration: none; cursor: pointer; transition: background-color .18s,color .18s,border-color .18s; }
.task-nav-link:hover { background: #e8e2d7; }
.task-nav-link:active { background: #ddd5c7; }
.task-nav-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.topbar .task-nav-link { margin-left: 18px; margin-right: auto; font-family: inherit; font-size: 12px; font-weight: 750; }
.task-navigation-footer { display: flex; justify-content: end; gap: 12px; padding-top: 20px; }
.classic-navigation { width: min(1320px,calc(100% - 32px)); margin: 0 auto; padding: 0 0 24px; }
.player-bottom #nextTask { margin-left: auto; color: var(--green); }
.selection-main { width: min(740px,calc(100% - 40px)); margin: 0 auto; padding: 42px 0 48px; }
.selection-heading { margin-bottom: 24px; }
.selection-heading h1 { font-size: clamp(32px,4vw,42px); }
.selection-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.selection-profile { margin-left: auto; color: var(--muted); font-size: 12px; }
.task-choices { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 8px; background: #fffcf5; }
.task-choice { display: flex; align-items: center; gap: 16px; padding: 14px 16px; min-height: 72px; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: background-color .18s,border-color .18s; }
.task-choice + .task-choice { border-top-color: #e9e3d8; }
.task-choice:hover { background: #f1efe5; }
.task-choice:active { background: #e3ebdb; }
.task-choice.is-current { background: #e3ebdb; border-color: #bfd1bb; }
.task-choice.is-current + .task-choice { border-top-color: transparent; }
.choice-copy { flex: 1; min-width: 0; }
.choice-copy strong { display: block; font-size: 15px; line-height: 1.4; font-weight: 700; }
.choice-copy small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.choice-solved,.choice-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; height: 22px; }
.choice-solved { color: var(--green); border-radius: 50%; background: #e3ebdb; }
.choice-solved .icon { width: 15px; height: 15px; }
.choice-arrow { color: #778670; }
.choice-arrow .icon { width: 17px; height: 17px; }
[hidden] { display: none !important; }
@media (max-width:700px) {
  .topbar .task-nav-link { margin-left: 12px; padding-inline: 9px; font-size: 10px; }
  .page-shell { height: calc(100dvh - 108px); }
  .task-navigation-footer.classic-navigation { width: 100%; height: 60px; padding: 8px 14px; border-top: 1px solid var(--line); }
  .selection-page .player-topbar { min-height: 60px; }
  .selection-page .task-nav-link { min-height: 44px; padding-inline: 9px; font-size: 11px; }
  .selection-main { width: calc(100% - 24px); padding-top: 26px; }
  .selection-profile { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .task-choices { padding: 5px; }
  .task-choice { gap: 10px; padding: 13px 9px; }
  .choice-copy strong { font-size: 14px; }
  .choice-solved,.choice-arrow { flex-basis: 18px; }
  .task-navigation-footer { padding: 16px 14px; }
}
@media (prefers-reduced-motion:reduce) { .task-choice,.task-nav-link { transition: none; } }