/* OriMath's child-friendly dark learning world. */
:root {
  --page:#11212c;
  --surface:#192e3c;
  --surface-raised:#223c4c;
  --line:#34505f;
  --text:#edf7fa;
  --muted:#acc1cd;
  --accent:#78dda6;
  --teal:#78dda6;
  --warm:#f6ca66;
  --danger:#ffb2ba;
  --sky:#78c8ed;
}
body { background:var(--page); font-weight:400; }
::selection { background:#78dda6; color:#112c20; }
.app-shell { max-width:1224px; padding-inline:34px; }
.app-header { padding-top:23px; }
.header-main { padding-bottom:18px; }
.wordmark { gap:10px; }
.wordmark strong { font-size:29px; font-weight:800; letter-spacing:-.025em; }
.brand-dot { color:var(--accent); }
.wordmark small { font-size:12px; font-weight:500; }
.wordmark-mark { color:#123425; background:var(--accent); border-radius:17px; width:49px; height:49px; transform:rotate(7deg); }
.wordmark-mark svg { stroke-width:2.7; transform:rotate(-7deg); }
.learner-name { display:flex; align-items:center; gap:7px; margin-inline-end:10px; }
.learner-avatar { width:36px; height:36px; display:grid; place-items:center; background:#314c5b; color:var(--sky); border:2px solid #4a687a; font-weight:700; font-size:18px; border-radius:13px; }
.tool-button { border:2px solid var(--line); border-bottom-width:4px; border-radius:14px; background:var(--surface); color:#d1e2ea; min-width:44px; }
.tool-button:active { transform:translateY(2px); border-bottom-width:2px; }
.app-nav { border-bottom:2px solid #2b4352; padding-bottom:10px; }
.nav-tabs { gap:10px; }
.app-nav .nav-tabs button { border-radius:13px; font-size:14px; font-weight:600; padding:10px 17px; color:var(--muted); border:2px solid transparent; }
.app-nav .nav-tabs button.bg-indigo-600 { border-color:#41735d; background:#203e32!important; color:#a3f0c3; }
.app-nav .nav-tabs button.bg-indigo-600:after { display:none; }
.app-nav .nav-tabs button:hover { color:var(--text); background:#203644!important; }
.app-nav .nav-tabs button svg { width:20px; height:20px; stroke-width:2.4; }
.sync-status { font-size:11px; max-width:245px; text-align:start; }
.sync-status[data-state=saved] { color:#b7ddc7; }
.app-main { padding-top:24px; }
.welcome-layout { display:grid; grid-template-columns:minmax(0,1fr) 345px; align-items:center; gap:30px; min-height:330px; padding:12px 12px 19px 0; }
.welcome-copy h2 { font-size:clamp(32px,3.9vw,49px); font-weight:800; line-height:1.25; margin-bottom:15px; letter-spacing:-.025em; }
.welcome-copy h2 span { color:var(--accent); }
.welcome-copy>p { font-size:17px; line-height:1.8; color:#c0d1db; }
.welcome-actions { margin-top:23px; align-items:center; gap:18px; }
.button-primary,.button-small { background:var(--accent); color:#123b26; border:0; border-bottom:5px solid #3c996a; border-radius:15px; min-height:53px; padding:11px 22px 12px; font-size:16px; font-weight:750; box-shadow:none; transform:none; }
.button-primary:hover,.button-small:hover { background:#94eab9; transform:translateY(-1px); }
.button-primary:active,.button-small:active { transform:translateY(3px); border-bottom-width:2px; padding-bottom:15px; }
.button-primary:disabled,.button-small:disabled { transform:none; opacity:.55; }
.button-primary svg { stroke-width:2.8; }
.button-secondary { border:2px solid var(--line); border-bottom-width:4px; border-radius:14px; background:var(--surface); font-size:14px; }
.button-subtle { color:#bad0dc; font-size:13px; font-weight:500; }
.button-subtle:hover { color:var(--accent); }
.hero-secondary { text-decoration:underline; text-underline-offset:5px; }
.welcome-copy>p.hero-footnote { display:flex; align-items:center; gap:7px; font-size:12px; color:#a3bac8; margin-top:15px; }
.hero-footnote svg { width:16px; height:16px; color:var(--accent); }
.mascot-stage { position:relative; display:flex; align-items:end; justify-content:center; height:324px; padding-top:40px; }
.hero-mascot { width:248px; height:280px; object-fit:contain; display:block; transform:rotate(-4deg); animation:pixel-arrives .65s cubic-bezier(.16,1,.3,1) both; }
.mascot-speech { position:absolute; top:1px; inset-inline-start:10px; z-index:1; background:#233d4d; border:2px solid #426170; border-radius:17px 17px 5px 17px; padding:10px 17px; line-height:1.55; transform:rotate(3deg); font-size:14px; }
.mascot-speech strong { color:var(--accent); font-weight:650; display:block; }
.mascot-speech span { color:#e0ebf0; display:block; }
.mascot-sparkle { position:absolute; color:var(--warm); stroke-width:2.5; }
.sparkle-one { width:29px; height:29px; top:128px; inset-inline-end:17px; transform:rotate(9deg); }
.sparkle-two { color:var(--sky); width:20px; height:20px; top:230px; inset-inline-start:11px; transform:rotate(-13deg); }
.learning-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:0; border-block:2px solid #2d4655; margin:7px 0 29px; padding:19px 0; }
.overview-item { flex:none; justify-content:center; gap:13px; }
.overview-item+.overview-item { border-inline-start:2px solid #2d4655; padding-inline-start:0; }
.stat-symbol { width:43px; height:43px; border-radius:14px; display:grid; place-items:center; }
.stat-symbol svg { width:23px; height:23px; display:block; stroke-width:2.4; }
.stat-symbol.green { background:#234736; color:var(--accent); }
.stat-symbol.blue { background:#233f50; color:var(--sky); }
.stat-symbol.gold { background:#443e2b; color:var(--warm); }
.overview-item strong { display:block; font-size:23px; font-weight:750; }
.overview-item span:not(.stat-symbol) { font-size:12px; color:#b6cad5; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:25px; margin-bottom:38px; align-items:start; }
.game-main,.game-sidebar { min-width:0; }
.journey-panel { padding:23px 24px 21px; border:2px solid var(--line); border-radius:22px; }
.journey-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.journey-heading h2 { margin:0 0 5px; font-size:23px; font-weight:700; }
.journey-heading p { color:var(--muted); font-size:13px; }
.journey-heading>svg { width:29px; height:29px; color:var(--sky); stroke-width:2; }
.journey-track { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:27px 0 0; }
.journey-line { position:absolute; top:45px; left:0; width:100%; height:60px; pointer-events:none; }
.journey-line path { fill:none; stroke:#3a5666; stroke-width:8; stroke-linecap:round; stroke-dasharray:1 17; }
.journey-stop { position:relative; padding:0 2px; border:0; color:var(--text); background:transparent; text-align:center; display:flex; align-items:center; flex-direction:column; }
.stop-disc { display:grid; place-items:center; width:77px; height:76px; border-radius:28px; background:#314c5c; border:3px solid #4a697a; border-bottom:9px solid #213746; transition:transform .16s,background .16s; }
.stop-disc svg { width:31px; height:31px; stroke-width:2.6; }
.journey-stop strong { margin-top:13px; font-size:14px; font-weight:600; }
.journey-stop small { color:var(--muted); font-size:11px; margin-top:3px; }
.stop-practice .stop-disc { background:var(--accent); border-color:#a1efc2; border-bottom-color:#3f9b6d; color:#174c30; transform:rotate(6deg); }
.stop-practice .stop-disc svg { fill:#d1f8e2; }
.stop-discover .stop-disc { background:#284b5d; border-color:#3d7189; border-bottom-color:#1b3543; color:var(--sky); }
.stop-progress .stop-disc { background:#47412d; border-color:#74613b; border-bottom-color:#302c20; color:var(--warm); }
.journey-stop:hover .stop-disc { transform:translateY(-4px); }
.journey-stop:active .stop-disc { transform:translateY(3px); }
.journey-stop:focus-visible { border-radius:16px; }
.next-step { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:15px; margin-top:18px; padding:21px; border-radius:19px; background:#1c3730; border:2px solid #375c4b; }
.mission-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#2b5740; color:var(--accent); }
.mission-icon svg { width:24px; height:24px; }
.next-step h3 { font-size:12px; font-weight:500; color:#b9d7c4; margin:0 0 5px; }
.next-step h4 { font-size:18px; font-weight:700; margin:0 0 5px; }
.next-step p { color:#b8cebf; font-size:12px; line-height:1.8; }
.next-step>.button-primary { margin:0; font-size:14px; min-height:46px; padding-inline:15px; }
.level-panel { border:2px solid var(--line); border-radius:20px; padding:20px; background:#182d3a; }
.level-heading { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.level-star { width:36px; height:36px; display:grid; place-items:center; background:#483f29; color:var(--warm); border-radius:12px; }
.level-star svg { width:21px; height:21px; fill:#f6ca6633; stroke-width:2.4; }
.level-panel h3 { font-size:16px; color:var(--text); font-weight:700; margin:0; }
.level-panel>p { font-size:13px; }
.xp-track { height:13px; background:#2b4554; border-radius:7px; margin:14px 0 9px; }
.xp-track span { background:var(--warm); border-radius:7px; min-width:0; }
.level-panel small { font-size:11px; line-height:1.7; }
.level-panel>p.level-kind-note { font-size:12px; color:var(--accent); margin-top:13px; }
.focus-panel { padding:20px 4px 0; }
.focus-panel h3 { font-size:17px; font-weight:650; margin-bottom:3px; }
.focus-row { padding:13px 0; gap:11px; border-bottom-color:#2d4655; }
.focus-row strong { font-size:12px; line-height:1.6; }
.focus-row small { font-size:11px; }
.focus-row>svg:first-child { color:var(--sky); width:18px; height:18px; }
.gentle-reminder { display:flex; gap:11px; padding:17px 4px 0; color:#9ab5c4; font-size:12px; align-items:center; }
.gentle-reminder svg { color:var(--warm); width:23px; height:23px; }
.gentle-reminder strong { font-weight:500; color:#c1d3dc; }
.section-heading { align-items:center; margin-bottom:20px; scroll-margin-top:25px; }
.section-heading h2 { font-weight:700; font-size:25px; }
.section-heading p { font-size:14px; }
.topic-controls input,.topic-controls select { border:2px solid var(--line); background:#182d3a; border-radius:13px; font-size:14px; min-height:46px; }
.topic-controls input { width:185px; }
.topics-grid { gap:17px; }
.topic-card { border:2px solid var(--line); border-bottom-width:5px; border-radius:20px; padding:21px; background:#192e3c; transition:border-color .18s,transform .18s; }
.topic-card:hover { border-color:#4b7183; transform:translateY(-2px); }
.topic-card-top { margin-bottom:15px; }
.topic-symbol { width:49px; height:49px; border-radius:16px; display:grid; place-items:center; color:var(--accent); background:#264c3a; }
.topic-symbol svg { width:26px; height:26px; stroke-width:2.5; }
.topic-card[data-tone=blue] .topic-symbol { background:#284656; color:var(--sky); }
.topic-card[data-tone=gold] .topic-symbol { background:#45402d; color:var(--warm); }
.topic-card h3 { font-size:18px; font-weight:700; margin-bottom:9px; }
.topic-card>p { font-size:13px; line-height:1.8; }
.skill-status { border-radius:8px; background:transparent; padding:4px 0; font-size:11px; }
.skill-status.unseen { color:#b3c7d2; background:transparent; }
.skill-status.sampling { background:#233f50; color:#b0def4; padding-inline:8px; }
.skill-status.strong { background:#264b39; color:#a4efc3; padding-inline:8px; }
.skill-status.focus { background:#3b3540; color:#f3c6ce; padding-inline:8px; }
.skill-status.developing { background:#443e2d; color:#f7d993; padding-inline:8px; }
.topic-stars { display:flex; gap:3px; color:#4e6673; margin-inline-start:auto; }
.topic-stars svg { width:16px; height:16px; stroke-width:2; }
.topic-stars .earned { color:var(--warm); fill:var(--warm); }
.topic-measure { margin-top:20px; font-size:11px; }
.topic-measure strong { font-size:14px; color:#c2d8e2; }
.skill-bar { background:#2c4858; height:7px; margin-bottom:16px; }
.skill-bar span { background:var(--sky); }
.skill-bar .strong { background:var(--accent); }
.skill-bar .developing { background:var(--warm); }
.skill-bar .focus { background:#a8c5d3; }
.topic-actions .button-small { font-size:13px; min-height:43px; padding:8px 17px 9px; border-radius:12px; border-bottom-width:4px; }
.topic-actions .button-small:active { padding-bottom:11px; border-bottom-width:2px; }
.topic-actions .button-subtle { font-size:12px; }
.resume-section { background:#203f43; border:2px solid #427575; border-radius:20px; padding:20px 24px; }
.resume-section h3 { color:#b6f2d5; font-weight:700; }
.resume-section p { color:#bdd6dc; }
.app-notice { border-radius:15px; background:#244a37; color:#d6f5e2; }
.notice-error { background:#4b303b; color:#ffe0e6; }
.connection-settings { border-top:2px solid #2c4655; }
.connection-settings>summary { font-size:13px; }
.connection-columns input { border:2px solid var(--line); border-radius:12px; background:#192e3c; }
.app-footer { border-top:2px solid #2c4655; padding-block:22px; font-size:12px; }
.runner-buddy { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:9px; }
.runner-buddy img { width:90px; height:100px; object-fit:contain; }
.runner-buddy p { border:2px solid var(--line); border-radius:16px 16px 4px 16px; padding:11px 17px; font-size:15px; color:#d4e7ee; background:#192f3d; max-width:430px; }
#viewRunner>.glass-card { border:2px solid var(--line); background:var(--surface); border-radius:21px; }
#viewRunner .glass-card .bg-slate-950\/70 { background:#142735; border-color:#304b5a; }
#runnerProgressBar { background:var(--accent); border-top:3px solid #a4edc2; border-radius:7px; }
#runnerProgressBar:empty { min-height:8px; }
#runnerModeBadge { background:#264a39; color:#baf1d0; border-color:#49755a; border-radius:10px; }
#examProtectionBadge { background:#263e4d!important; color:#d2e5ed!important; border-color:#446474!important; }
#questionTopicBadge { background:#244252; color:#b8e7fc; border-color:#426b7d; border-radius:12px; }
#questionPrompt { font-weight:650; color:#f1f7fa; font-size:clamp(23px,2.4vw,30px); }
#questionPrompt .text-amber-300 { color:var(--warm); }
#viewRunner .choice-option { background:#1b3443; border:2px solid #426171; border-bottom:5px solid #304b5a; border-radius:17px; color:#f1f8fb; font-size:21px; min-height:75px; font-weight:600; }
#viewRunner .choice-option:hover:not(:disabled) { background:#254555; border-color:#6896ac; transform:translateY(-1px); }
#viewRunner .choice-option.selected { background:#224b5b; border-color:var(--sky); border-bottom-color:#4c9dbb; color:#c5efff; }
#viewRunner .choice-option.correct { background:#224b36; border-color:var(--accent); border-bottom-color:#3d9866; }
#viewRunner .choice-option.wrong { background:#4b303c; border-color:#e6a4af; border-bottom-color:#9a6473; }
#viewRunner .choice-option:active:not(:disabled) { transform:translateY(2px); }
#questionNavPills button { border-radius:11px; min-width:38px; min-height:39px; font-size:14px; font-weight:650; }
#viewRunner #nextQuestionBtn { background:var(--accent)!important; color:#123b26!important; border:0; border-bottom:5px solid #3c996a; border-radius:15px; min-height:48px; font-size:15px; box-shadow:none; }
#viewRunner #nextQuestionBtn:active { transform:translateY(3px); }
#prevQuestionBtn { border:2px solid var(--line); border-bottom-width:4px; border-radius:14px; color:#d0e2ec; background:#243e4e; min-height:48px; }
#solutionBox { background:#1b3740; border-color:#3d6877; border-radius:17px; }
#showExplanationBtn { color:#b8e3f4; border-color:#3c677b; background:#244555; }
#runnerReviewBanner { background:#214335; border:2px solid #4a8464; border-radius:18px; box-shadow:none; }
#reviewBannerTitle { color:#d2f5df; }
.report-intro h2 { font-size:29px; font-weight:700; }
.report-summary { border-width:2px; }
.report-summary strong { color:var(--warm); font-weight:700; }
.report-table tbody .skill-status { white-space:normal; }
.report-section h3 { font-weight:600; }
.lesson-dialog { border:2px solid var(--line); border-radius:23px; background:#192f3d; }
.lesson-dialog h2 { font-weight:750; }
.lesson-visual { background:#10232f; border-radius:17px; }
.lesson-dialog .button-primary { width:100%; }
.text-action { color:#a2e9c0; }
@keyframes pixel-arrives { from { transform:translateY(12px) rotate(-7deg); opacity:.7; } to { transform:translateY(0) rotate(-4deg); opacity:1; } }
@media(min-width:1050px) { .topics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1050px) {
  .app-shell { padding-inline:25px; }
  .welcome-layout { grid-template-columns:minmax(0,1fr) 280px; gap:15px; }
  .hero-mascot { width:230px; height:265px; }
  .mascot-stage { height:310px; }
  .mascot-speech { inset-inline-start:0; }
  .game-layout { grid-template-columns:minmax(0,1fr) 245px; gap:18px; }
  .journey-panel { padding:20px 17px; }
  .next-step { grid-template-columns:38px minmax(0,1fr); gap:12px; }
  .mission-icon { width:38px; height:40px; }
  .next-step>.button-primary { grid-column:2; justify-self:start; }
  .next-step p { display:none; }
  .journey-stop strong { font-size:12px; }
  .journey-stop small { font-size:12px; }
  .stop-disc { width:67px; height:67px; border-radius:25px; }
  .journey-heading p { font-size:12px; }
}
@media(max-width:760px) {
  .app-shell { padding-inline:18px; }
  .learner-name { display:none; }
  .header-main { padding-bottom:15px; }
  .wordmark strong { font-size:25px; }
  .wordmark small { font-size:10px; }
  .wordmark-mark { width:42px; height:43px; border-radius:14px; }
  .tool-button { padding:9px; }
  .app-nav { display:flex; flex-direction:column; align-items:start; gap:0; padding-bottom:2px; }
  .nav-tabs { width:100%; justify-content:space-between; gap:6px; }
  .app-nav .nav-tabs button { padding:9px 11px; font-size:12px; gap:6px; }
  .app-nav .nav-tabs button svg { width:17px; height:17px; }
  .sync-status { font-size:10px; padding:9px 2px; max-width:none; }
  .app-main { padding-top:15px; }
  .welcome-layout { grid-template-columns:minmax(0,1fr) 230px; min-height:280px; gap:8px; padding:5px 0 13px; }
  .welcome-copy h2 { font-size:32px; }
  .welcome-copy>p { font-size:15px; }
  .welcome-actions { gap:7px; flex-direction:column; align-items:start; margin-top:17px; }
  .hero-secondary { padding:7px 0; font-size:12px; min-height:36px; }
  .welcome-copy>p.hero-footnote { font-size:11px; margin-top:6px; }
  .hero-mascot { width:205px; height:239px; }
  .mascot-stage { height:280px; }
  .mascot-speech { font-size:12px; padding:8px 12px; }
  .sparkle-one { inset-inline-end:0; width:23px; }
  .sparkle-two { inset-inline-start:0; }
  .learning-overview { padding-block:16px; margin-bottom:22px; }
  .stat-symbol { width:35px; height:35px; border-radius:12px; }
  .stat-symbol svg { width:20px; height:20px; display:block; }
  .overview-item { gap:9px; }
  .overview-item strong { font-size:21px; }
  .overview-item span:not(.stat-symbol) { font-size:12px; }
  .game-layout { grid-template-columns:1fr; gap:20px; margin-bottom:30px; }
  .game-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
  .focus-panel { padding-top:0; }
  .gentle-reminder { display:none; }
  .stop-disc { width:78px; height:76px; border-radius:28px; }
  .journey-stop strong { font-size:14px; }
  .journey-stop small { font-size:12px; }
  .next-step { grid-template-columns:42px minmax(0,1fr) auto; }
  .next-step>.button-primary { grid-column:auto; }
  .section-heading { align-items:start; }
  .section-heading h2 { font-size:23px; }
  .topic-controls { width:auto; }
}
@media(max-width:560px) {
  .app-shell { padding-inline:16px; }
  .header-main { gap:10px; }
  .header-tools { gap:6px; }
  .wordmark { gap:8px; }
  .wordmark strong { font-size:24px; }
  .wordmark small { font-size:9px; }
  .wordmark-mark { width:39px; height:41px; }
  .app-nav .nav-tabs button { padding:8px 8px; font-size:12px; }
  .welcome-layout { grid-template-columns:minmax(0,1fr) 146px; gap:5px; min-height:250px; padding-bottom:12px; }
  .welcome-copy h2 { font-size:28px; line-height:1.25; margin-bottom:11px; }
  .welcome-copy>p { font-size:13px; line-height:1.85; }
  .welcome-actions { margin-top:14px; gap:3px; }
  .welcome-actions .button-primary { width:100%; min-height:48px; padding:9px 12px; font-size:14px; }
  .welcome-actions .button-subtle { font-size:11px; }
  .welcome-copy>p.hero-footnote { display:none; }
  .mascot-stage { height:242px; padding-top:50px; align-self:center; }
  .hero-mascot { width:157px; height:184px; max-width:none; }
  .mascot-speech { top:10px; inset-inline-start:0; font-size:11px; padding:8px 10px; line-height:1.6; border-radius:14px 14px 4px 14px; }
  .sparkle-one { top:107px; inset-inline-end:-1px; width:16px; height:16px; }
  .sparkle-two { top:208px; inset-inline-start:6px; width:14px; height:14px; }
  .learning-overview { margin-top:0; padding:13px 0; border-block-width:2px; }
  .overview-item { gap:8px; align-items:center; }
  .stat-symbol { width:30px; height:34px; border-radius:10px; }
  .stat-symbol svg { width:18px; height:18px; }
  .overview-item strong { font-size:21px; }
  .overview-item span:not(.stat-symbol) { font-size:12px; line-height:1.5; }
  .overview-item+.overview-item { padding-inline-start:5px; }
  .journey-panel { padding:19px 13px 21px; border-radius:20px; }
  .journey-heading { gap:7px; }
  .journey-heading h2 { font-size:22px; }
  .journey-heading p { font-size:11px; }
  .journey-heading>svg { width:25px; height:25px; }
  .journey-track { gap:4px; padding-top:24px; }
  .journey-line { top:44px; height:40px; }
  .stop-disc { width:65px; height:65px; border-radius:23px; border-bottom-width:8px; }
  .stop-disc svg { width:27px; height:27px; }
  .journey-stop strong { font-size:11px; margin-top:12px; }
  .journey-stop small { font-size:12px; margin-top:3px; line-height:1.6; }
  .next-step { grid-template-columns:37px minmax(0,1fr); padding:17px; gap:11px; border-radius:18px; }
  .next-step h4 { font-size:16px; margin:0; }
  .next-step h3 { font-size:11px; margin-bottom:3px; }
  .next-step>.button-primary { grid-column:1/-1; justify-self:stretch; font-size:14px; min-height:46px; }
  .game-sidebar { grid-template-columns:1fr; gap:0; }
  .level-panel { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; padding:17px 19px; border-radius:18px; }
  .level-heading { grid-row:1/3; margin:0; align-self:center; }
  .level-panel h3 { font-size:13px; }
  .level-star { width:33px; height:35px; }
  .level-panel>p { font-size:11px; }
  .level-panel .xp-track { margin:3px 0; height:10px; }
  .level-panel small { font-size:10px; grid-column:1/-1; margin-top:6px; }
  .level-panel>p.level-kind-note { display:none; }
  .focus-panel { display:none; }
  .section-heading { gap:15px; }
  .section-heading h2 { font-size:22px; }
  .section-heading p { font-size:12px; }
  .topic-controls { width:100%; gap:8px; }
  .topic-controls input,.topic-controls select { width:50%; min-width:0; font-size:13px; min-height:46px; }
  .topics-grid { grid-template-columns:1fr; gap:15px; }
  .topic-card { padding:20px; border-radius:19px; }
  .topic-card h3 { font-size:18px; }
  .topic-card>p { font-size:13px; }
  .topic-card-top { margin-bottom:13px; }
  .topic-symbol { width:45px; height:45px; border-radius:14px; }
  .topic-actions { gap:16px; }
  .topic-actions .button-small { min-width:114px; }
  .runner-buddy { gap:11px; margin-bottom:7px; }
  .runner-buddy img { width:70px; height:80px; }
  .runner-buddy p { padding:9px 12px; font-size:13px; }
  #questionPrompt { font-size:23px; line-height:1.7; }
  #viewRunner .choice-option { font-size:19px; min-height:69px; }
  #viewRunner>.glass-card { border-radius:18px; }
  .resume-section { padding:18px; gap:14px; }
  .resume-section .button-primary { min-height:48px; font-size:14px; }
  .resume-section p { font-size:12px; }
  .report-intro h2 { font-size:26px; }
  .report-buttons .button-primary { font-size:13px; min-height:48px; }
}
@media(max-width:370px) {
  .app-shell { padding-inline:12px; }
  .welcome-layout { grid-template-columns:minmax(0,1fr) 128px; }
  .welcome-copy h2 { font-size:25px; }
  .hero-mascot { width:140px; height:167px; }
  .mascot-stage { height:224px; }
  .mascot-speech { font-size:10px; padding:7px 8px; }
  .overview-item { gap:5px; }
  .stat-symbol { width:25px; }
  .overview-item span:not(.stat-symbol) { font-size:12px; }
  .app-nav .nav-tabs button { font-size:11px; padding-inline:6px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-mascot { animation:none; }
  .journey-stop:hover .stop-disc,.topic-card:hover { transform:none; }
}
@media print {
  .runner-buddy { display:none!important; }
  .report-summary strong,.report-intro h2,.report-section h3 { color:#111; }
  .button-primary,.button-small { border:0; }
}

.remote-access-note { margin-top:24px; padding-block:20px; border-block:1px solid var(--line); }
.remote-access-note strong { font-size:16px; }
.remote-access-note p { color:var(--muted); font-size:13px; line-height:1.8; margin:10px 0; max-width:70ch; }
.remote-access-note a { text-decoration:none; }