/* Mint, sunshine and peach retain the garden feel with clearer letter contrast. */
.wheel-area > .status-message { text-align: center; font-size: 12px; line-height: 1.6; max-width: 520px; }
.wheel-option { cursor: pointer; outline: none; }
.wheel-option:hover .segment { filter: brightness(1.08); }
.wheel-option:focus-visible .segment { stroke: #234c36; stroke-width: 3px; }
.preset-row { flex-wrap: wrap; }
.page-footer { flex-wrap: wrap; font-size: 11px; line-height: 1.8; }
.page-footer p { margin: 0; }
.page-footer a { color: #2f7659; text-decoration: underline; text-underline-offset: 3px; }
/* Full-inventory wheels get the main share of the classroom canvas. */
.activity, .focus-mode .activity { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: center; }
.wheel-wrap, .focus-mode .wheel-wrap { max-width: 780px; }
.focus-mode main { max-width: 1480px; }
.final-ring text.radial-label { font-size: 20px; }
.spin-center strong { font-size: clamp(18px, 1.7vw, 25px); }
.spin-center small { font-size: 9px; }
.tone-symbol-card { justify-content: center; gap: 20px; min-height: 88px; }
.tone-symbol-card .tone-number { position: static; font: 800 28px 'Nunito', sans-serif; color: #405b34; }
.tone-symbol-card .mini-contour { width: 64px; height: 38px; }
.tone-sign { font: 800 52px/1 'Nunito', sans-serif; color: #405b34; }
.tone-ring text.tone-label-number { font-size: 18px; font-weight: 800; }
.wheel-tone-mark { fill: none; stroke: #633329; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
.combination-count { color: #435e38; font-size: 11px; background: #edf2e3; padding: 12px; border-radius: 8px; }
@media (min-width: 1450px) { main { padding-inline: 40px; } .activity, .focus-mode .activity { grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; } }
@media (min-width: 671px) and (max-width: 1100px) { .activity, .focus-mode .activity { grid-template-columns: 1fr; gap: 28px; } .wheel-wrap, .focus-mode .wheel-wrap { max-width: 760px; } .practice-area { width: 100%; max-width: 600px; justify-self: center; } .result-card { padding-inline: 32px; } .result-word { font-size: 112px; } .mystery-card { min-height: 420px; } .tone-symbol-card { gap: 12px; } .tone-symbol-card .mini-contour { width: 44px; } }
@media (max-width: 670px) { .wheel-wrap, .focus-mode .wheel-wrap { width: calc(100% + 28px); max-width: 620px; flex-shrink: 0; } .spin-center strong { font-size: 19px; } .spin-center small { font-size: 6.5px; } .tone-symbol-card { gap: 18px; min-height: 84px; } .tone-symbol-card .mini-contour { width: 53px; } }
:root { color: #294638; --pine: #2f7659; --muted: #63715d; }
.initial-ring .segment { fill: #8fcda7; }
.initial-ring .shade-1 { fill: #b4dfb4; }
.initial-ring .shade-2 { fill: #a0d9b7; }
.initial-ring text { fill: #163e2b; font-weight: 850; }
.final-ring .segment { fill: #f2cc68; }
.final-ring .shade-1 { fill: #f7dfa1; }
.final-ring .shade-2 { fill: #efbe64; }
.final-ring text { fill: #584015; font-weight: 850; }
.tone-ring .segment { fill: #efa995; }
.tone-ring .shade-1 { fill: #f5c2ad; }
.tone-ring .shade-2 { fill: #edb19b; }
.tone-ring text { fill: #633329; font-weight: 800; }
.initial-ring .single { stroke: #8fcda7; }
.final-ring .single { stroke: #f2cc68; }
.tone-ring .single { stroke: #efa995; }
.legend-initial { background: #62ad7d; }
.legend-final { background: #d9a535; }
.legend-tone { background: #da8970; }
h1 { color: #294638; }
h1 em { color: #638543; }
.result-word { color: #24573c; }
.brand-mark, .nav-item.current { background: #d5eaca; color: #2b5c3b; }
.nav-dot { background: #438457; }
.mode-switch button { color: #526548; }
.mode-switch button.selected { color: #24543a; }
.spin-center { color: #28573b; border-color: #d8dfbf; }
.spin-center:hover:not(:disabled) { background: #eff5d9; }
.spin-center small { color: #606e50; }
.sound-part { background: #d8efdb; }
.sound-part strong { color: #204f35; }
.sound-part small, .sound-part > span { color: #3b6746; }
.part-1 { background: #fae8af; }
.part-1 strong { color: #634810; }
.part-1 small, .part-1 > span { color: #77591f; }
.part-2 { background: #f7d4c5; }
.part-2 strong { color: #743b2d; }
.part-2 small, .part-2 > span { color: #8a4e3b; }
.sound-part > span { opacity: 1; }
.sound-part.locked { border: 2px solid #356247; }
.did-it, .primary-button { background: #2f7659; color: #fffdf8; }
.did-it:hover:not(:disabled), .primary-button:hover:not(:disabled) { background: #245e46; }
.did-it.done { background: #d7ebca; color: #315c3b; }
.progress-card { background: #e8f0d9; border-color: #dce7c7; }
.progress-card strong { color: #3e6035; }
.progress-seed.grown { color: #3b7c4b; }
.tone-card { background: #f2f3e8; }
.tone-card.active { background: #e0edce; border-color: #789b5d; }
.tone-card strong { color: #405b34; }
.tone-card small, .tone-number, .tone-example { color: #5d704c; }
.tone-stroke { stroke: #4f7b40; }
.history-chip { color: #355b34; background: #dfedcf; border-color: #c6d9b1; }
.sound-option input:checked + span { background: #d8ebca; color: #335a2d; border-color: #83a665; }
.sound-option span { color: #68765e; }
.breadcrumb, .page-heading p, .eyebrow, .focus-button, .result-eyebrow,
.lock-hint, .tone-description p, .teacher-cue, .wheel-legend > span,
.keyboard-hint, .keyboard-hint > span, .progress-card > div > span,
.history-empty, .recent > span, .recent > small, .section-title > span,
.page-footer, .help-button, .sidebar-foot, .sidebar-garden > span,
.brand small, .nav-label, .modal > p, legend span, .text-button,
.status-message, .tone-description strong { color: #63715a; }
.teacher-cue > span { color: #4d6541; background: #e9efdf; }
.settings-status { color: #81542b; }
.result-eyebrow { font-size: 9px; }
.sound-part small { font-size: 10px; }
.tone-description strong { font-size: 12px; }
.tone-description p { font-size: 11px; }
.lock-hint, .teacher-cue { font-size: 9px; }
.tone-card strong { font-size: 11px; }
.tone-card small { font-size: 10px; }
.mystery-card { min-height: 491px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mystery-card .result-eyebrow { margin-bottom: 16px; }
.mystery-illustration { width: 120px; height: 120px; position: relative; margin: 8px 0 20px; }
.mystery-illustration > span { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 36% 48% 40% 49%; background: #d7ebca; color: #356440; font: 850 70px/1 'Nunito', sans-serif; transform: rotate(-8deg); }
.mystery-illustration i { position: absolute; right: -13px; top: -10px; color: #956718; font: 36px/1 'Nunito', sans-serif; }
.mystery-illustration b { position: absolute; bottom: -4px; left: -12px; color: #b66c50; font-size: 22px; }
.mystery-card h2 { font-size: 23px; color: #35563b; line-height: 1.3; }
.mystery-instruction { font-size: 12px; color: #5a6d50; line-height: 1.9; margin: 14px 0 18px; }
.explore-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 26px; }
.explore-steps span { padding: 6px 8px; border-radius: 6px; background: #e3f0de; color: #365e3a; font-size: 9px; }
.explore-steps span:nth-child(2) { background: #fae8af; color: #634810; }
.explore-steps span:nth-child(3) { background: #f7d4c5; color: #743b2d; }
.reveal-button { width: 100%; min-height: 46px; font-size: 12px; }
.reveal-button:disabled { background: #e3e9d9; color: #576b49; cursor: wait; }
.mystery-note { font-size: 10px; color: #63715a; line-height: 1.8; margin: 13px 4px 0; }
.hide-answer { background: transparent; color: #526b44; font-size: 10px; margin: 13px 0 -3px; padding: 6px; text-decoration: underline; text-underline-offset: 3px; }
.hide-answer:hover { color: #234b32; }
@media (max-width: 1150px) and (min-width: 901px) { .tone-card strong { font-size: 9px; } .tone-card small { font-size: 9px; } }
@media (max-width: 670px) { .mystery-card { min-height: 450px; padding: 30px 22px; } .mystery-card h2 { font-size: 25px; } .mystery-instruction { font-size: 13px; } .reveal-button { font-size: 13px; min-height: 49px; } .explore-steps span { font-size: 10px; } .mystery-note { font-size: 11px; } }