@font-face {
  font-family: Nunito; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("./nunito-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Nunito; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("./nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #172145;
  --muted: #495782;
  --paper: #edf2ff;
  --white: #fff;
  --line: #dce5ff;
  --plum: #2448ca;
  --lavender: #e7ebff;
  --green: #1f604f;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper) radial-gradient(ellipse at 16% 0, #cbd9ff 0, transparent 52%); font-family: Nunito, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .53; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #dc8d24; outline-offset: 3px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.13; }
[hidden] { display: none !important; }
#root { min-height: 100dvh; }
.ro-wrap { width: min(100% - 40px, 1080px); margin-inline: auto; }
.ro-header { background: #193cba; color: #fff; border-bottom: 1px solid #3659d4; }
.ro-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.ro-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: inherit; text-decoration: none; }
.ro-brand img, .ro-profile img { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; object-position: 84% center; }
.ro-header .ro-link { color: #fff; }
.ro-top-right, .ro-actions, .ro-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ro-heading { justify-content: space-between; }
.ro-label { font-size: 13px; color: #fff; background: #ffffff26; padding: 7px 10px; border-radius: 999px; }
.ro-main { padding-block: 24px max(36px, env(safe-area-inset-bottom)); }
.ro-hero { background: radial-gradient(ellipse at 82% 10%, #4f73f6, transparent 68%), #173aad; border: 1px solid #4466db; color: #fff; border-radius: 32px; padding: clamp(20px, 5vw, 42px); overflow: hidden; box-shadow: 0 18px 38px #193fa52c; }
.ro-hero h1 { font-size: clamp(32px, 6vw, 58px); overflow-wrap: anywhere; }
.ro-hero > div:first-child { min-width: 0; }
.ro-hero p, .ro-card p { line-height: 1.5; margin-top: 8px; color: var(--muted); }
.ro-hero p { color: #edf2ff; }
.ro-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--plum); margin-bottom: 9px; }
.ro-hero .ro-eyebrow { color: #e2eaff; }
.ro-entry { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
.ro-entry-art { text-align: center; }
.ro-mascot { aspect-ratio: 1.13; overflow: hidden; border-radius: 25px; background: #eae2f7; }
.ro-mascot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 87% center; }
.ro-entry-art .ro-mascot { width: min(100%, 345px); margin: 23px auto 0; transform: rotate(-2deg); box-shadow: 0 14px 26px #10247365; }
.ro-entry-art .ro-guest-link { display: flex; width: fit-content; margin: 23px auto 0; color: #1939a7; background: #fff; }
.ro-entry-art .ro-guest-link:hover { background: #e6edff; }
.ro-staff-hero, .ro-family-hero { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.ro-staff-hero .ro-mascot, .ro-family-hero .ro-mascot { flex: 0 0 clamp(84px, 23vw, 175px); align-self: center; }
.ro-staff-layout { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr); gap: 16px; align-items: start; }
.ro-stack, .ro-profiles { display: grid; gap: 12px; }
.ro-card { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(15px, 4vw, 26px); box-shadow: 0 8px 28px #3860ba13; }
.ro-card h2 { overflow-wrap: anywhere; }
.ro-profiles { margin-top: 12px; }
.ro-profile { width: 100%; background: #f4f6ff; border-radius: 16px; padding: 10px; display: flex; align-items: center; gap: 9px; text-align: left; min-height: 50px; overflow-wrap: anywhere; }
.ro-profile img { width: 32px; height: 32px; flex-shrink: 0; }
.ro-profile small { display: block; color: var(--muted); }
.ro-profile.ro-active { background: var(--lavender); color: var(--plum); }
.ro-button, .ro-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.ro-button { background: var(--plum); color: white; border-radius: 14px; padding: 10px 16px; }
.ro-button:hover:not(:disabled) { background: #1935a6; }
.ro-button.ro-secondary { background: #e7edff; color: #1b3cab; }
.ro-button.ro-secondary:hover:not(:disabled) { background: #d9e3ff; }
.ro-link { background: transparent; padding: 5px; color: var(--plum); }
.ro-small { padding-inline: 12px; }
.ro-card label { display: block; min-width: 0; font-size: 14px; font-weight: 700; margin: 12px 0; }
.ro-card :is(input, select, textarea) { width: 100%; min-height: 44px; display: block; margin-top: 5px; border: 1px solid #cfc7d3; border-radius: 10px; padding: 9px; background: white; color: var(--ink); font-size: 16px; }
.ro-card textarea { resize: vertical; }
.ro-form-row, .ro-family-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ro-form-row + .ro-form-row { margin-top: -7px; }
.ro-optional { color: var(--muted); font-weight: 500; }
.ro-chip { background: var(--lavender); color: var(--plum); font-size: 13px; padding: 7px 9px; border-radius: 99px; white-space: nowrap; }
.ro-card details { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 13px; }
.ro-card summary { cursor: pointer; min-height: 36px; padding-block: 8px; color: var(--plum); font-weight: 800; }
.ro-card details .ro-actions { margin-top: 10px; }
.ro-picker { margin: 4px 0 14px; padding: 14px; border-radius: 18px; background: #f1f5ff; border: 1px solid #dce5ff; }
.ro-picked { display: grid; gap: 6px; padding-inline-start: 23px; }
.ro-picked li { padding: 8px; border-radius: 10px; background: white; }
.ro-picked li > div:first-child { display: inline-block; vertical-align: middle; }
.ro-picked small { display: block; margin-top: 4px; color: var(--muted); }
.ro-card-tools { display: inline-flex; gap: 4px; margin: 4px 0 0; }
.ro-card-tools button { min-width: 44px; min-height: 44px; border-radius: 10px; background: var(--lavender); font-weight: 800; }
.ro-catalog { display: grid; gap: 6px; max-height: 480px; overflow: auto; padding: 3px; }
.ro-catalog-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; background: white; border: 1px solid var(--line); border-radius: 13px; padding: 10px; }
.ro-catalog-card button { align-self: center; }
.ro-catalog-card details { grid-column: 1 / -1; margin-top: 1px; padding: 0; }
.ro-catalog-card p { margin-top: 4px; overflow-wrap: anywhere; }
.ro-catalog-card h4, .ro-picked li { overflow-wrap: anywhere; }
.ro-card .ro-card-example { font-size: .9rem; color: #34446e; }
.ro-preview-target { white-space: pre-line; }
.ro-preview-options { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 3px; }
.ro-preview-options > span:not(.ro-picture) { padding: 6px 8px; border-radius: 8px; background: var(--lavender); }
.ro-login { overflow-wrap: anywhere; }
.ro-login-card { margin-bottom: 12px; }
.ro-empty { color: var(--muted); padding: 14px 0 0; }
.ro-game-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ro-game { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ro-game + .ro-game { border-top: 1px solid var(--line); }
.ro-game-icon { flex: 0 0 38px; display: grid; place-items: center; height: 38px; background: var(--lavender); color: var(--plum); border-radius: 12px; }
.ro-game-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ro-game small { display: block; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ro-game-copy p { white-space: pre-wrap; }
.ro-play { max-width: 730px; margin: 0 auto; text-align: center; min-height: min(540px, 74dvh); padding-bottom: 28px; }
.ro-play h1 { font-size: clamp(25px, 6vw, 42px); white-space: pre-line; overflow-wrap: anywhere; }
.ro-play .ro-button { margin-top: 15px; }
.ro-play-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: clamp(20px, 6vw, 40px); }
.ro-play-top small { flex-shrink: 0; color: var(--muted); }
.ro-track { flex: 1; height: 9px; background: var(--lavender); overflow: hidden; border-radius: 999px; }
.ro-track span { display: block; height: 100%; background: #375add; }
.ro-stimulus { white-space: pre-line; font-size: clamp(23px, 6vw, 46px); line-height: 1.45; margin: 15px 0; overflow-wrap: anywhere; }
.ro-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-width: 540px; margin: 19px auto 0; }
.ro-answers.ro-wide { grid-template-columns: 1fr; }
.ro-answer { min-height: 70px; padding: 10px; background: var(--lavender); color: var(--ink); border-radius: 17px; font-size: clamp(24px, 6vw, 39px); overflow-wrap: anywhere; }
.ro-answer.ro-text-answer { font-size: clamp(18px, 4vw, 26px); }
.ro-feedback { min-height: 24px; font-weight: 700; }
.ro-reward { font-size: 80px; }
.ro-reward .ro-mascot { width: min(185px, 64%); margin: 0 auto 12px; }
.ro-picture {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #fff url("./lesson-objects.png") no-repeat;
  background-size: 400% 400%;
  border-radius: 14px;
}
.ro-picture-line { display: flex; justify-content: center; gap: 8px; margin: 20px auto 12px; }
.ro-picture-line .ro-picture { width: clamp(90px, 26vw, 148px); border: 2px solid #dbe5f2; }
.ro-sample .ro-picture { width: clamp(100px, 28vw, 154px); border-color: #86cde9; }
.ro-mini-pictures { display: flex; flex-wrap: wrap; gap: 5px; }
.ro-mini-pictures .ro-picture { width: 56px; padding: 0; background-color: white; border: 1px solid #dbe5f2; }
.ro-unit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ro-demo-sound {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin: 0 0 8px; font-weight: 800; cursor: pointer;
}
.ro-demo-sound input { width: 20px; height: 20px; accent-color: #226927; }
.ro-unit {
  display: grid; grid-template-columns: minmax(58px, 90px) minmax(0, 1fr);
  min-height: 105px; align-items: center; text-align: left; padding: 10px 14px;
  gap: 12px; border: 2px solid #d6e2f2; border-bottom-width: 5px;
  border-radius: 20px; background: white;
}
.ro-unit:hover { border-color: #82bf56; background: #fbfff7; }
.ro-unit span > strong { display: block; font-size: clamp(17px, 3vw, 24px); }
.ro-unit small { display: block; color: var(--muted); margin-top: 4px; font-size: 14px; }
.ro-question { display: flex; gap: 10px; align-items: center; justify-content: center; }
.ro-question h1 { font-size: clamp(24px, 5vw, 37px); }
.ro-speaker {
  display: inline-grid; place-items: center; flex: 0 0 46px; width: 46px; min-height: 46px;
  border: 2px solid #b5e2f5; border-bottom-width: 4px; border-radius: 13px;
  background: #eaf8ff; color: #0b5585;
}
.ro-speaker:hover { background: #d4f1ff; }
.ro-play-top { gap: 9px; }
.ro-play-top .ro-exit { font-size: 27px; width: 44px; flex-shrink: 0; }
.ro-play-top .ro-sound { padding: 4px 6px; white-space: nowrap; font-size: 13px; }
.ro-play .ro-track { background: #e0edd9; height: 11px; }
.ro-play .ro-track span { background: #58aa37; }
.ro-picture-answers { grid-template-columns: repeat(var(--answer-count), minmax(0, 1fr)); }
.ro-answer-row { display: flex; min-width: 0; gap: 6px; align-items: stretch; }
.ro-answer-row .ro-answer { width: 100%; color: #202d48; background: #fff; border: 2px solid #d4e0ef; border-bottom-width: 5px; }
.ro-answer-row .ro-answer:hover:not(:disabled) { background: #edf7ff; border-color: #88c6ef; }
.ro-answer-row .ro-answer:disabled { opacity: 1; }
.ro-answer-row .ro-correct { background: #e8f7d9; border-color: #65ad42; }
.ro-answer-row .ro-retry { background: #fff2e6; border-color: #da9c64; }
.ro-picture-answers .ro-answer { padding: 4px; }
.ro-lesson-status { border-radius: 16px; margin-top: 16px; }
.ro-lesson-status:is(.ro-positive,.ro-try) { padding: 12px; }
.ro-lesson-status .ro-feedback { margin: 0; }
.ro-lesson-status.ro-positive { background: #e8f7d9; }
.ro-lesson-status.ro-positive p { color: #205820; }
.ro-lesson-status.ro-try { background: #fff2e6; }
.ro-lesson-status.ro-try p { color: #783f18; }
.ro-play .ro-button { color: white; background: #25722c; border-bottom: 4px solid #16481b; }
.ro-play .ro-button:hover { background: #1d5c24; }

@media (max-width: 560px) {
  .ro-unit-list { grid-template-columns: 1fr; }
  .ro-question { align-items: flex-start; text-align: left; }
  .ro-play-top .ro-sound { font-size: 12px; }
}
.load-message { margin: 45px auto; text-align: center; }
.ro-form-error { color: #9d293a !important; }
.ro-form-error:empty, #notice:empty { display: none; }
#notice { position: fixed; z-index: 10; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 12px 15px; border-radius: 13px; background: var(--green); color: white; box-shadow: 0 5px 24px #15182530; }
#notice[data-error="true"] { background: #972e3d; }

@media (max-width: 670px) {
  .ro-wrap { width: calc(100% - 24px); }
  .ro-top { min-height: 60px; }
  .ro-top-right { gap: 5px; }
  .ro-entry, .ro-staff-layout, .ro-family-columns { grid-template-columns: 1fr; }
  .ro-entry-art .ro-mascot { width: min(71%, 270px); margin-top: 16px; }
  .ro-entry-art .ro-guest-link { margin-top: 17px; }
  .ro-profiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); }
}
@media (max-width: 365px) {
  .ro-label { display: none; }
  .ro-form-row { grid-template-columns: 1fr; gap: 0; }
  .ro-game-icon { display: none; }
}