/* A soft stationery palette, with generous, explicit timer controls. */
:root {
  --green: #386958;
  --deep: #28513f;
  --mint: #e9f2e6;
  --paper: #fcf8f1;
  --ink: #4c5146;
  --muted: #7a7e72;
  --line: #e8e5d9;
  --gold: #ae7a5e;
  font-family: "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, "Yu Gothic", Meiryo, sans-serif;
  background-image: radial-gradient(#ddd7c866 .7px, transparent .7px);
  background-size: 15px 15px;
}
.topbar {background: #fcf8f1e8; border-bottom-style: dashed}
.brand-icon {background: #638b70; border-radius: 15px 15px 15px 5px; transform: rotate(-5deg)}
.brand-icon i {transform: rotate(5deg)}
.install-button {background: #fffdf8; border: 1px solid #e4ddcf; box-shadow: 0 3px 0 #eee8dc; border-radius: 16px}
.intro {padding-top: 32px; padding-bottom: 32px; min-height: 280px}
.intro h1 {font-weight: 650; letter-spacing: .07em; color: #435c4b}
.intro-eyebrow {display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border-radius: 20px; background: #f5e6dc; color: #896b55; font-size: 9px}
.intro-eyebrow span {color: #bd9170; font-size: 13px}
.intro-companion {display: flex; align-items: center; gap: 15px}
.companion {width: 154px; flex: none; position: relative; padding-top: 15px; transform: rotate(-3deg)}
.companion svg {display: block; width: 100%; filter: drop-shadow(0 6px 0 #e9decc66)}
.companion-note {display: block; width: max-content; font-size: 10px; color: #8b7460; background: #fffdf8; border: 1px solid #e5ddce; border-radius: 20px 20px 20px 4px; padding: 8px 12px; margin: 0 auto -4px}
.progress-card {display: block; text-align: center; margin-right: 4px}
.progress-ring {height: 85px; width: 85px; margin: auto; padding: 5px; background: conic-gradient(#82a180 var(--progress,0%), #e6e5d7 0)}
.progress-ring>span {padding-top: 15px; background: #fcf8f1}
.progress-ring strong {font-size: 30px; color: #648364}
.progress-card p {font-size: 11px; margin-top: 11px; font-weight: 550}
.progress-card p>span {font-size: 9px; line-height: 1.8; margin-top: 6px}
.question-list {gap: 14px}
.question-button {border-radius: 20px; background: #fff9ee; gap: 10px; padding: 18px 14px; box-shadow: 0 4px 0 #eee7d866; border: 1px solid #e9e0cf; min-height: 100px}
.question-button:nth-child(2) {background: #f7edf0; border-color: #ebdce1}
.question-button:nth-child(3) {background: #edf2f9; border-color: #dce5ec}
.question-button.active {background: #e8f1e3; color: var(--green); border: 2px solid #8da885; padding: 17px 13px; box-shadow: 0 5px 0 #dfe6d4}
.question-button.active small {color: #6e7e65}
.question-number, .active .question-number {color: #9a8d72; font-size: 10px}
.question-button strong {font-size: 17px}
.question-button small {font-size: 9px; line-height: 1.7}
.question-charm {display: grid; place-items: center; width: 33px; height: 37px; flex: none; border-radius: 12px; background: #f4e5ca; color: #a78654; font-size: 25px; transform: rotate(-6deg)}
.question-button:nth-child(2) .question-charm {background: #f0d7de; color: #a97882; transform: rotate(4deg)}
.question-button:nth-child(3) .question-charm {background: #dbe6f4; color: #7a91b2}
.practice {border-radius: 28px; border-color: #e9e2d5; background: #fffefa; box-shadow: 0 8px 0 #eee8dc66, 0 15px 40px #7a705609}
.practice-heading h2 {color: #4f644d}
.language-tag {background: #faf1e5; border-color: #ede1ce; color: #8c7a5f; border-radius: 12px}
.steps li[aria-current=step]>span {background: #75946a; border-color: #75946a; box-shadow: 0 2px 0 #d8e1cd}
.player-card {background: #eef4e9; border: 1px solid #e3eadb; border-radius: 23px; padding-bottom: 18px}
.player-top .tiny-label {background: #e0ead7; padding: 6px 9px; border-radius: 8px; color: #697e58}
.waveform span {background: #96ae80}
.waveform span:nth-child(4n) {background: #d7ad91}
.listening-guide {border: 1px dashed #d5ddca; border-radius: 14px; padding: 13px 8px; margin: 3px 0 18px; background: #ffffff88}
.player-prompt {font-size: 12px; color: #5d7453; line-height: 1.9; min-height: 0; margin: 0}
.timer-notice {font-size: 11px; line-height: 1.9; margin-top: 4px; color: #83704f; font-weight: 550}
.timer-notice>span {font-size: 15px; vertical-align: -1px; padding-right: 3px}
.mobile-break {display: none}
.play-button {background: #6c9068; box-shadow: 0 4px 0 #52754e; border-radius: 17px; font-weight: 600}
.restart-button {border-radius: 15px; background: #fffdf7; border-color: #d7e0cc; box-shadow: 0 3px 0 #e0e7d8}
.player-bottom {margin-top: 3px; color: #6f7b65}
.seek-row input::-webkit-slider-thumb {background: #71916a}
.answer-locked {border-radius: 18px; background: #fbf1e8; border-color: #e8d8c5; margin-top: 22px}
.answer-locked>span {color: #c1a48c}
.answer-locked strong {color: #8a7158}
.answer-locked p {color: #8e8575}
.primary-button {border-radius: 15px; background: #648861; border-color: #648861; box-shadow: 0 3px 0 #4d704a}
.secondary-button {border-radius: 15px; background: #fbf7ed}
.translate-panel {display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 18px; padding: 23px; margin: 21px 0 17px; border: 2px solid #e8c6ac; border-radius: 22px; background: #fff2e6; box-shadow: 0 4px 0 #f6e4d2}
.translate-panel .tiny-label {color: #a16c49}
.translate-panel h3 {font-size: 16px; line-height: 1.8; color: #7b5f49}
.translate-panel p:last-child {font-size: 11px; line-height: 1.9; color: #8c7865}
.timer-box {gap: 10px; align-items: stretch; width: 100%}
.timer-display {display: flex; justify-content: center; align-items: center; gap: 10px}
.timer-display>#timer {font-size: 37px; font-weight: 650; letter-spacing: .03em; line-height: 1.2; font-variant-numeric: tabular-nums; color: #815c40}
.timer-status {font-size: 10px; color: #926c4a; border-radius: 20px; padding: 6px 8px; background: #f7dfc7; white-space: nowrap}
.timer-toggle {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 51px; padding: 12px 16px; color: #70452d; background: #f4c59f; border: 2px solid #d4a078; border-radius: 14px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 0 #dfb18b}
#timer-toggle-icon {display: grid; place-items: center; flex: none; width: 23px; height: 23px; background: #fff5e6; border-radius: 7px; font-size: 15px}
.timer-paused {background: #f0f4eb; border-color: #b1c4a7; box-shadow: 0 4px 0 #e2eadb}
.timer-paused .timer-toggle {background: #dceacf; border-color: #a4bc96; color: #46623e; box-shadow: 0 4px 0 #c2d3b7}
.timer-paused .timer-display>#timer {color: #5c7750}
.timer-paused .timer-status {color: #5e7755; background: #dce8d5}
.timer-paused #timer-toggle-icon {background: #f5faef}
#finish {margin-top: 5px; min-height: 51px}
.reveal-panel {padding: 19px; border-radius: 20px; background: #f5eee5; border: 1px solid #ece1d3}
.english-answer {background: #f1f5e9; border-left-color: #b5c49a; border-radius: 0 18px 18px 0}
.check-badge {background: #e9efdf; color: #688159}
.transcript {background: #fcf6ed; border-color: #ece2d4; border-radius: 15px}
footer {border-top-style: dashed}
@media(max-width:850px) {
  .intro-companion {gap: 7px}
  .companion {width: 132px}
  .progress-card p>span {display: none}
  .progress-ring {width: 72px; height: 72px}
  .progress-ring>span {padding-top: 12px}
  .progress-ring strong {font-size: 25px}
  .question-charm {width: 27px; height: 32px; font-size: 23px}
  .question-button {gap: 8px; padding: 17px 11px}
  .question-button.active {padding: 16px 10px}
  .question-button strong {font-size: 16px}
  .translate-panel {grid-template-columns: 1fr; gap: 14px; padding: 19px}
  .timer-box {max-width: none}
  .timer-display>#timer {font-size: 39px}
}
@media(max-width:640px) {
  .topbar {height: 78px}
  .brand-icon {border-radius: 12px 12px 12px 4px}
  .intro {min-height: 250px; padding: 26px 0 28px; gap: 7px}
  .intro h1 {font-size: 25px; letter-spacing: .04em; margin-top: 13px}
  .intro .intro-eyebrow {font-size: 7px; padding: 6px 8px; letter-spacing: .08em; gap: 4px}
  .intro-companion {flex-direction: column; gap: 7px; width: 105px; flex: none}
  .companion {width: 99px; padding-top: 0}
  .companion-note {font-size: 7px; padding: 5px 7px; margin-bottom: -1px}
  .progress-card {margin: 0}
  .progress-ring {width: 58px; height: 58px; padding: 4px}
  .progress-ring>span {padding-top: 9px}
  .progress-ring strong {font-size: 20px}
  .progress-ring small {font-size: 8px; margin-left: 3px}
  .progress-card p {font-size: 8px; margin-top: 6px}
  .question-list {gap: 9px}
  .question-button {min-height: 108px; padding: 13px 10px; border-radius: 17px}
  .question-button.active {padding: 12px 9px}
  .question-number {margin-bottom: 16px; font-size: 9px}
  .question-charm {position: absolute; right: 9px; top: 8px; width: 27px; height: 28px; font-size: 22px; border-radius: 9px}
  .question-button strong {font-size: 15px}
  .question-button small {font-size: 8px; line-height: 1.5}
  .question-check {top: 38px; right: 9px; color: #52734a}
  .practice {border-radius: 24px; padding: 23px 16px}
  .player-card {border-radius: 20px; padding: 15px 12px 16px}
  .player-top .tiny-label {padding: 5px 7px; font-size: 7px}
  .listening-guide {padding: 11px 7px; margin-bottom: 17px; border-radius: 13px}
  .player-prompt {font-size: 10px; line-height: 1.9}
  .timer-notice {font-size: 10px; line-height: 1.9; margin-top: 4px}
  .timer-notice>span {font-size: 13px; padding-right: 1px}
  .mobile-break {display: inline}
  .play-button {border-radius: 15px; min-width: 166px}
  .restart-button {padding: 9px 12px; border-radius: 13px}
  .answer-locked {border-radius: 16px; padding: 17px 14px}
  .translate-panel {border-radius: 19px; padding: 18px 17px; gap: 14px; margin-top: 20px}
  .translate-panel h3 {font-size: 15px}
  .translate-panel p:last-child {font-size: 10px}
  .timer-display {gap: 12px}
  .timer-display>#timer {font-size: 43px}
  .timer-status {font-size: 11px; padding: 7px 11px}
  .timer-toggle {min-height: 55px; font-size: 15px; padding: 13px 12px}
  #timer-toggle-icon {width: 25px; height: 25px}
  .player-bottom {font-size: 8px}
}