/* Practice: one sentence, one marmot, one big button within thumb reach. */
.marmotti-app .page-exercise { width: 100%; max-width: 480px; margin-inline: auto; }
.marmotti-app .page-exercise.active {
    display: flex; flex-direction: column; gap: 14px;
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 2px 0 14px;
}
.marmotti-app .page-exercise .training-type-tabs { margin: 0; }
.marmotti-app .page-exercise .training-type-tab { min-height: 38px; font-size: 14px; }

/* -- Progress -- */
.marmotti-app .session-progress { display: flex; align-items: center; gap: 12px; max-width: none; margin: 0; }
.marmotti-app .session-progress-meta { order: 2; margin: 0; }
.marmotti-app .session-progress-label { display: none; }
.marmotti-app .session-progress-count { color: var(--ink); font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marmotti-app .session-progress-track { flex: 1; height: 10px; border: 0; border-radius: 999px; background: #d6e1db; box-shadow: none; overflow: hidden; }
.marmotti-app .session-progress-fill { height: 100%; border: 0; border-radius: 999px; background: var(--fur); transition: width 300ms ease; }

/* -- Sentence card with the marmot hanging on to it -- */
.marmotti-app .challenge-wrap { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; max-height: 520px; padding-top: 80px; }
.challenge-marmot { position: absolute; top: 0; right: 18px; z-index: 0; width: 128px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.challenge-marmot .marmot-svg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.marmotti-app .page-exercise.active .challenge-marmot { animation: marmotPeek 700ms cubic-bezier(.2, 1.3, .4, 1) 150ms both; }
@keyframes marmotPeek { 0% { transform: translateY(70px); } 100% { transform: translateY(0); } }
.challenge-paws { position: absolute; top: 68px; right: 46px; z-index: 2; width: 72px; height: auto; pointer-events: none; }
.marmotti-app .challenge-box {
    position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column;
    min-height: 210px; margin: 0; padding: 18px 20px 22px;
    border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    background: var(--paper); box-shadow: var(--lift);
    transition: border-color 140ms ease, background 140ms ease;
}
.marmotti-app .challenge-box:hover { transform: none; border-color: var(--line); box-shadow: var(--lift); }
.marmotti-app .challenge-box.pop .challenge-text { animation: none; }
.marmotti-app .challenge-box.has-result { flex: 0 0 auto; min-height: 0; }
.marmotti-app .challenge-wrap:has(.has-result) { flex: 0 0 auto; max-height: none; }
.marmotti-app .challenge-box.swiping-red { background: var(--rose-soft) !important; border-color: var(--rose) !important; }
.marmotti-app .challenge-label {
    align-self: flex-start; justify-content: flex-start; margin: 0 48px 10px 0; padding: 0;
    border-radius: 0; background: transparent; color: var(--muted);
    font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.marmotti-app .challenge-label::before { content: none; }
.marmotti-app .challenge-stage { flex: 1 1 auto; min-height: 130px; }
.marmotti-app .challenge-text {
    min-height: 130px; max-height: none; overflow: visible; padding: 0; gap: 12px;
    color: var(--ink); font-size: 27px; font-weight: 900; line-height: 1.3; letter-spacing: -.5px;
}
.marmotti-app .challenge-text-browser { color: var(--ink); }
.marmotti-app .challenge-text-original { color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.marmotti-app .challenge-translation { margin-top: 12px; color: var(--muted); font-size: 15px; font-style: normal; line-height: 1.45; }
.marmotti-app .challenge-box.has-result .challenge-stage { min-height: 56px; }
.marmotti-app .challenge-box.has-result .challenge-text { min-height: 56px; font-size: 21px; }
.marmotti-app .challenge-loading .loading-dots { gap: 8px; }
.marmotti-app .challenge-loading .loading-dots span { width: 9px; height: 9px; flex-basis: 9px; background: var(--line-strong); box-shadow: none; }
.marmotti-app .speak-btn {
    top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--wash); color: var(--ink); box-shadow: none; backdrop-filter: none;
}
.marmotti-app .speak-btn:hover { background: var(--fur-soft); color: var(--ink); box-shadow: none; }
.marmotti-app .speak-btn.speaking { background: var(--fur-soft); color: var(--fur-deep); animation: none; }

/* -- Speak button: the one bold control -- */
.marmotti-app .record-section { min-height: 0; margin: auto 0 0; padding: 12px 0 4px; text-align: center; }
.marmotti-app .record-btn {
    position: relative; display: grid; place-items: center;
    width: 88px; height: 88px; margin: 0 auto 12px; padding: 0;
    border: 3px solid var(--outline); border-radius: 50%;
    background: var(--fur); color: var(--outline);
    box-shadow: 0 6px 0 var(--outline);
    transition: transform 110ms ease, box-shadow 110ms ease, background 140ms ease;
}
.marmotti-app .record-btn::before { content: none; }
.marmotti-app .record-btn::after {
    content: ""; position: absolute; inset: -12px; border-radius: 50%;
    border: 3px solid var(--rose); opacity: 0; pointer-events: none;
}
.marmotti-app .record-btn:hover { transform: translateY(-1px); background: #f2ae4f; box-shadow: 0 7px 0 var(--outline); }
.marmotti-app .record-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--outline); }
.marmotti-app .record-icon { position: relative; width: 14px; height: 24px; margin: -10px 0 0; border: 0; border-radius: 8px; background: currentColor; filter: none; }
.marmotti-app .record-icon::before { content: ""; position: absolute; left: -7px; top: 9px; width: 28px; height: 22px; border: 3px solid currentColor; border-top: 0; border-radius: 0 0 16px 16px; box-sizing: border-box; }
.marmotti-app .record-icon::after { content: ""; position: absolute; left: 5.5px; top: 30px; width: 3px; height: 6px; border-radius: 2px; background: currentColor; }
.marmotti-app .record-btn:hover .record-icon { filter: none; }
.marmotti-app .record-btn:disabled,
.marmotti-app .record-btn.is-disabled { background: #e3e8e4; color: #93a39c; border-color: #b7c4be; box-shadow: 0 6px 0 #b7c4be; opacity: 1; filter: none; transform: none; }
.marmotti-app .record-btn.recording { background: var(--rose); color: #fff; box-shadow: 0 2px 0 var(--outline); transform: translateY(4px); animation: none; outline: none; }
.marmotti-app .record-btn.recording::after { animation: recordRing 1.3s ease-out infinite; }
.marmotti-app .record-btn.recording:hover { background: var(--rose); }
.marmotti-app .record-btn.recording .record-icon { width: 24px; height: 24px; margin: 0; border-radius: 6px; background: currentColor; }
.marmotti-app .record-btn.recording .record-icon::before,
.marmotti-app .record-btn.recording .record-icon::after { display: none; }
@keyframes recordRing { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.3); } }
.marmotti-app .record-label { color: var(--muted); font-size: 14px; font-weight: 700; }
.marmotti-app .record-label .timer { color: var(--rose); font-weight: 900; }
.marmotti-app .level-bar { max-width: 140px; height: 6px; margin: 10px auto 0; border-radius: 999px; background: #d6e1db; overflow: hidden; }
.marmotti-app .level-fill { border-radius: 999px; background: var(--rose); }

/* -- Writing -- */
.marmotti-app .writing-section { min-height: 0; margin: auto 0 0; padding: 4px 0 0; gap: 10px; }
.marmotti-app .writing-label { text-align: left; color: var(--muted); font-size: 14px; font-weight: 700; }
.marmotti-app .writing-input {
    min-height: 96px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
    background: var(--paper); color: var(--ink); font-size: 17px; font-weight: 400; line-height: 1.45; box-shadow: none; scroll-margin-block: 100px;
}
.marmotti-app .writing-input:focus { border-color: var(--gentian); box-shadow: 0 0 0 3px var(--gentian-soft); outline: none; }
.marmotti-app .writing-input:disabled { background: var(--wash); }
.marmotti-app .page-exercise:has(.writing-section:focus-within) { min-height: 0; }
.marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-box { min-height: 160px; }
.marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-stage,
.marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-text { min-height: 80px; }

/* -- Buttons -- */
.marmotti-app .action-buttons { gap: 10px; margin: auto 0 0; padding: 4px 0 0; animation: none; }
.marmotti-app .action-btn {
    flex: 1 1 0; width: auto; height: auto; min-width: 0; min-height: 54px; padding: 12px; gap: 8px;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
    font: inherit; font-size: 15px; font-weight: 900; box-shadow: none; transition: transform 110ms ease;
}
.marmotti-app .action-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.marmotti-app .action-btn.try-again { background: var(--paper); color: var(--ink); }
.marmotti-app .action-btn.next { flex-direction: row-reverse; border-color: var(--ink); background: var(--ink); color: #fff; }
.marmotti-app .action-btn:hover { transform: none; box-shadow: none; }
.marmotti-app .action-btn:active { transform: scale(.97); }
.marmotti-app .writing-submit-btn,
.marmotti-app .session-restart-btn,
.marmotti-app .scenario-start,
.marmotti-app .scenario-advance {
    min-height: 54px; padding: 12px 18px; border: 0; border-radius: var(--radius-md);
    background: var(--ink); color: #fff; box-shadow: none;
    font: inherit; font-size: 16px; font-weight: 900; transition: transform 110ms ease;
}
.marmotti-app .writing-submit-btn { justify-self: stretch; background: var(--gentian); }
.marmotti-app .writing-submit-btn:disabled { background: #c9d3ce; color: #fff; }
.marmotti-app .writing-submit-btn:hover,
.marmotti-app .session-restart-btn:hover,
.marmotti-app .scenario-start:hover,
.marmotti-app .scenario-advance:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.marmotti-app .writing-submit-btn:active,
.marmotti-app .session-restart-btn:active,
.marmotti-app .scenario-start:active,
.marmotti-app .scenario-advance:active { transform: scale(.97); }

/* -- Result -- */
.marmotti-app .result { margin-top: 14px; padding: 14px; border: 0; border-radius: var(--radius-md); background: var(--wash); color: var(--ink); box-shadow: none; text-align: left; animation: none; }
.marmotti-app .result.correct { background: var(--moss-soft); }
.marmotti-app .result.incorrect { background: var(--rose-soft); }
.marmotti-app .result.pending { background: var(--wash); }
.marmotti-app .result.pending-failed { background: var(--rose-soft); }
.marmotti-app .result-header { margin-bottom: 10px; gap: 8px; }
.marmotti-app .result-summary { gap: 0; min-width: 0; }
.marmotti-app .result-emoji { display: none; }
.marmotti-app .result-status { color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1.3; }
.marmotti-app .result.correct .result-status { color: var(--moss); }
.marmotti-app .result.incorrect .result-status,
.marmotti-app .result.pending-failed .result-status { color: var(--rose); }
.marmotti-app .result.pending .result-status { color: var(--muted); }
.marmotti-app .result-row { margin-bottom: 8px; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: rgb(255 255 255 / 75%); color: var(--ink); font-size: 16px; }
.marmotti-app .result-label-text,
.marmotti-app .result-mark-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.marmotti-app .result-value { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.marmotti-app .result-expected { color: var(--muted); }
.marmotti-app .result-speak-btn,
.marmotti-app .result-report-btn,
.marmotti-app .session-summary-report { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); box-shadow: none; }
.marmotti-app .result-speak-btn:hover,
.marmotti-app .result-report-btn:hover,
.marmotti-app .session-summary-report:hover { background: rgb(255 255 255 / 80%); color: var(--ink); transform: none; box-shadow: none; }
.marmotti-app .result-speak-btn.speaking { color: var(--fur-deep); animation: none; }
.marmotti-app .result-mark-word { min-height: 38px; padding: 7px 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; }
.marmotti-app .result-mark-word:hover { transform: none; border-color: var(--ink); }
.marmotti-app .result-mark-word.saved { border-color: var(--moss); background: var(--moss-soft); color: var(--moss); }
.marmotti-app .result-loading-text { color: var(--muted); font-weight: 700; }
.marmotti-app .result-loading-dots span { background: var(--line-strong); box-shadow: none; }

/* -- Session complete -- */
.marmotti-app .session-summary { max-width: none; max-height: none; margin: 0; padding: 0; }
.marmotti-app .session-celebration,
.marmotti-app .session-review { max-height: none; overflow: visible; border: 0; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--lift); }
.marmotti-app .session-celebration { gap: 16px; padding: 18px 18px 20px; }
.marmotti-app .session-celebration-header { padding: 0; justify-items: center; text-align: center; }
.marmotti-app .session-celebration-icon,
.marmotti-app .session-fireworks { display: none; }
.session-marmot { width: 140px; margin: -4px auto 4px; }
.session-marmot .marmot-svg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.marmotti-app .session-summary-kicker,
.marmotti-app .session-celebration .session-summary-kicker { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.marmotti-app .session-summary h2 { margin: 4px 0 0; color: var(--ink); font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.8px; }
.marmotti-app .session-celebration-copy { max-width: 34ch; margin: 8px auto 0; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.45; }
.marmotti-app .session-celebration-result { min-height: 64px; padding: 12px 16px; border: 0; border-radius: var(--radius-md); background: var(--moss-soft); }
.marmotti-app .session-celebration-result > span { color: var(--moss); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.marmotti-app .session-summary-score { min-width: 0; padding: 4px; background: transparent; color: var(--moss); font-size: 28px; font-weight: 900; box-shadow: none; }
.marmotti-app .session-celebration-result.is-pending { background: var(--wash); }
.marmotti-app .session-celebration-result.is-pending > span,
.marmotti-app .session-celebration-result.is-pending .session-summary-score { color: var(--muted); }
.marmotti-app .session-celebration-actions { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.marmotti-app .session-celebration-actions .session-restart-btn { grid-row: 1; }
.marmotti-app .session-review-btn { min-height: 54px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 900; }
.marmotti-app .session-review { gap: 16px; padding: 18px 16px; }
.marmotti-app .session-review h2 { font-size: 24px; }
.marmotti-app .session-summary-header { align-items: flex-start; gap: 10px; }
.marmotti-app .session-review-back { min-height: 44px; margin: -8px 0 2px; color: var(--ink); font-size: 14px; font-weight: 700; }
.marmotti-app .session-summary-list { max-height: none; overflow: visible; gap: 10px; }
.marmotti-app .session-summary-row { padding: 14px; border: 0; border-left: 4px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--wash); }
.marmotti-app .session-summary-row.correct { border-left-color: var(--moss); }
.marmotti-app .session-summary-row.incorrect { border-left-color: var(--rose); }
.marmotti-app .session-summary-index { background: var(--paper); color: var(--muted); font-weight: 700; }
.marmotti-app .session-summary-status { color: var(--ink); font-size: 15px; font-weight: 900; }
.marmotti-app .session-summary-row.correct .session-summary-status { color: var(--moss); }
.marmotti-app .session-summary-row.incorrect .session-summary-status { color: var(--rose); }
.marmotti-app .session-summary-row.pending .session-summary-status { color: var(--muted); }
.marmotti-app .session-summary-prompt { font-weight: 700; }
.marmotti-app .session-summary-target { color: var(--muted); font-weight: 400; }
.marmotti-app .session-review .session-restart-btn { position: static; }
.marmotti-app .session-summary-spinner,
.marmotti-app .social-summary-spinner { border-color: var(--line); border-top-color: var(--ink); }

.marmotti-app .social-summary-card { border: 0; border-radius: var(--radius-md); background: var(--wash); color: var(--ink); }
.marmotti-app .session-celebration .social-summary-panel { padding: 14px; }
.marmotti-app .session-celebration .social-summary-success { gap: 14px; }
.marmotti-app .social-summary-success.is-revealed { animation: none; }
.marmotti-app .session-celebration .social-summary-streak { padding: 12px; border: 0; border-radius: var(--radius-sm); background: var(--paper); }
.marmotti-app .social-summary-streak-icon { color: var(--fur-deep); background: transparent; box-shadow: none; }
.marmotti-app .social-summary-streak-day.is-today { border-color: var(--fur); }
.marmotti-app .social-summary-streak-day.is-done .social-summary-streak-mark { background: var(--fur); }
.marmotti-app .social-summary-reward span { color: var(--muted); font-weight: 700; }
.marmotti-app .session-celebration .social-summary-reward strong { color: var(--fur-deep); font-size: 28px; font-weight: 900; }
.marmotti-app .social-summary-leaderboard { border-color: var(--line); }
.marmotti-app .session-celebration .social-summary-leaderboard-list { max-height: 200px; }
.marmotti-app .social-summary-leaderboard-list li { padding: 10px; border-radius: var(--radius-sm); }
.marmotti-app .social-summary-leaderboard-list li.is-viewer { background: var(--fur-soft); color: var(--ink); box-shadow: none; }
.marmotti-app .social-summary-actions a { min-height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-weight: 900; box-shadow: none; }
.marmotti-app .social-summary-actions a:last-child { border-color: var(--ink); background: var(--ink); color: #fff; }
.marmotti-app .social-summary-loading,
.marmotti-app .social-summary-link { color: var(--muted); }

/* -- Scenarios -- */
.marmotti-app .scenario-page { width: 100%; padding: 0; }
.marmotti-app .scenario-header { gap: 12px; padding: 0 0 12px; }
.marmotti-app .scenario-kicker { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.marmotti-app .scenario-header h2 { margin-top: 4px; color: var(--ink); font-size: 24px; font-weight: 900; letter-spacing: -.5px; }
.marmotti-app .scenario-round { max-width: 40%; padding: 6px 12px; border-radius: 999px; background: var(--fur-soft); color: var(--ink); font-size: 13px; font-weight: 700; white-space: normal; }
.marmotti-app .scenario-goal { padding: 12px 14px; border: 0; border-radius: var(--radius-sm); background: var(--moss-soft); color: var(--ink); font-size: 15px; }
.marmotti-app .scenario-budget { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.marmotti-app .scenario-history { min-height: 0; max-height: min(38dvh, 330px); padding: 0 0 12px; gap: 10px; scrollbar-gutter: auto; }
.marmotti-app .scenario-history:empty { display: none; }
.marmotti-app .scenario-message { max-width: 88%; padding: 12px 14px; border-radius: 18px; font-size: 16px; animation: none; }
.marmotti-app .scenario-message-npc { border: 0; border-bottom-left-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: var(--lift); }
.marmotti-app .scenario-message-user { border-bottom-right-radius: 6px; background: var(--ink); color: #fff; }
.marmotti-app .scenario-speaker { margin-bottom: 4px; font-size: 12px; font-weight: 700; opacity: .75; }
.marmotti-app .scenario-intro { padding: 20px; border: 0; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--lift); text-align: left; }
.marmotti-app .scenario-intro-icon { display: none; }
.marmotti-app .scenario-intro p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.marmotti-app .scenario-intro > .scenario-start { width: 100%; }
.marmotti-app .scenario-hint,
.marmotti-app .scenario-replay,
.marmotti-app .scenario-retry { min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: none; }
.marmotti-app .scenario-replay { width: 44px; padding: 10px; }
.marmotti-app .scenario-replay.needs-tap { border-color: var(--fur); box-shadow: 0 0 0 3px var(--fur-soft); }
.marmotti-app .scenario-hint-text { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--gentian-soft); color: var(--ink); font-size: 15px; }
.marmotti-app .scenario-result { padding: 14px; border-radius: var(--radius-sm); font-size: 15px; }
.marmotti-app .scenario-result.is-correct { background: var(--moss-soft); color: var(--moss); }
.marmotti-app .scenario-result.is-incorrect { background: var(--rose-soft); color: var(--rose); }
.marmotti-app .scenario-result-example { font-weight: 900; }
.marmotti-app .scenario-audio-status { color: var(--muted); }
.marmotti-app .page-exercise:has(#scenarioPage:not([hidden])) .challenge-wrap { display: none; }

.marmotti-app .page-exercise [hidden] { display: none !important; }

@media (max-width: 360px) {
    .marmotti-app .challenge-box { padding: 16px 16px 18px; }
    .marmotti-app .challenge-text { font-size: 23px; }
    .marmotti-app .action-btn { gap: 6px; padding: 10px 8px; font-size: 14px; }
    .marmotti-app .record-btn { width: 78px; height: 78px; }
}
@media (max-height: 700px) {
    .marmotti-app .page-exercise.active { gap: 10px; }
    .marmotti-app .challenge-box { min-height: 180px; }
    .marmotti-app .challenge-stage, .marmotti-app .challenge-text { min-height: 104px; }
    .marmotti-app .challenge-wrap { padding-top: 64px; }
    .challenge-marmot { width: 104px; right: 16px; }
    .challenge-paws { top: 54px; right: 39px; width: 58px; }
    .marmotti-app .record-btn { width: 76px; height: 76px; }
}
@media (max-height: 600px) {
    .marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-wrap { padding-top: 0; }
    .marmotti-app .page-exercise:has(.writing-section:focus-within) :is(.challenge-marmot, .challenge-paws, .training-type-tabs) { display: none; }
    .marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-box { min-height: 110px; padding: 14px 16px; }
    .marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-stage,
    .marmotti-app .page-exercise:has(.writing-section:focus-within) .challenge-text { min-height: 52px; }
    .marmotti-app .page-exercise:has(.writing-section:focus-within) .writing-input { height: 78px; min-height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
    .marmotti-app .page-exercise *, .marmotti-app .page-exercise *::before, .marmotti-app .page-exercise *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.marmotti-app .action-btn span { white-space: nowrap; }
@media (max-width: 359px) { .marmotti-app .action-btn span { white-space: normal; } }