:root {
  --paper: #fbf3df;
  --ink: #243746;
  --muted: #6c7b77;
  --blue: #3d7890;
  --blue-dark: #28566b;
  --gold: #e4ae4b;
  --coral: #d87961;
  --mint: #b8d5c1;
  --white: #fffdf7;
  --shadow: 0 18px 45px rgba(49, 65, 70, .12);
  font-family: "Montserrat", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(135deg, #fff8e8, #eef4e9); }
a { color: inherit; text-decoration: none; }
.shell { max-width: 1180px; margin: auto; padding: 22px 28px 64px; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { font-family: "Rubik", "Segoe UI", sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; }
.brand span { color: var(--coral); }
.nav-links { display: flex; gap: 22px; color: var(--muted); font-size: .92rem; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-link { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.nav-link:hover, .nav-link:focus-visible { color: var(--blue-dark); }
.support-link { padding: 8px 0; border: 0; background: transparent; color: var(--blue-dark); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.support-link:hover, .support-link:focus-visible { color: var(--coral); }
.pill, .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 12px 20px; border: 0; font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.pill { background: rgba(255,255,255,.7); color: var(--blue-dark); }
.button { background: var(--blue); color: white; box-shadow: 0 8px 0 #285d72; }
.button.gold { background: var(--gold); color: #463717; box-shadow: 0 8px 0 #c38d32; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; color: var(--coral); }
h1, h2, h3 { font-family: "Rubik", "Segoe UI", sans-serif; font-weight: 700; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.8rem, 6vw, 5.7rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
p { line-height: 1.6; }
.card { background: rgba(255,253,247,.78); border: 1px solid rgba(61,120,144,.14); border-radius: 26px; box-shadow: var(--shadow); }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 46px; padding: 70px 0 80px; }
.hero-copy { display: grid; gap: 24px; }
.hero-copy p { max-width: 500px; font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 1.12rem; font-weight: 400; letter-spacing: normal; color: var(--muted); text-indent: 4px; }
.hero-copy p .text-fade-word, .hero-copy p .text-fade-char { letter-spacing: normal; }
.hero-copy p .text-fade-word { display: inline-block; }
.hero-copy p .text-fade-char { display: inline; }
.hero-art { min-height: 400px; display: grid; place-items: center; position: relative; overflow: visible; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; filter: saturate(.9) contrast(.96); }
.welcome-art { background: transparent; padding: 0; border: 0; box-shadow: none; }
.polaroid { width: 120%; padding: 16px 16px 68px; background: #fffefa; border: 1px solid #e5e0d4; box-shadow: 0 18px 18px -10px rgba(49,65,70,.28); transform: rotate(3.5deg); }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.92) contrast(.98); }
.tag { position: absolute; z-index: 1; padding: 10px 14px; border-radius: 14px; background: #fff8dc; transform: rotate(-5deg); box-shadow: 0 8px 18px #33445522; font-weight: 700; }
.tag.one { top: 28px; left: 24px; } .tag.two { right: 20px; bottom: 26px; transform: rotate(5deg); }
.section { padding: 30px 0 66px; }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.section-head p { max-width: 440px; color: var(--muted); margin: 0; }
.section-head .section-intro { margin-top: 12px; max-width: none; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile { padding: 0 24px 24px; min-height: 180px; overflow: hidden; }
.course-preview { padding-top: 18px; }
.story-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.story-card { display: grid; grid-template-columns: minmax(280px, 34%) 1fr; overflow: hidden; min-height: 250px; }
.story-image { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; filter: saturate(.9) contrast(.97); }
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: 30px 36px; }
.story-copy small { color: var(--coral); font-weight: 700; }
.story-copy h3 { margin: 12px 0 10px; font-size: clamp(1.45rem, 2.2vw, 2rem); }
.story-copy p { color: var(--muted); margin: 0; font-size: .93rem; line-height: 1.5; }
.story-card-cta { background: rgba(255,253,247,.78); border-color: rgba(61,120,144,.14); }
.rank-story-card .story-image { object-fit: contain; padding: 18px; background: #fffefa; }
.rank-story-card { height: 250px; min-height: 250px; }
.rank-story-card .story-image, .rank-story-card .story-copy { min-height: 0; }
.rank-story-card .medal-stack { position:relative; overflow:hidden; padding:0; background:#fffefa; }
.rank-story-card .medal-stack img { position:absolute; display:block; width:58%; height:88%; object-fit:contain; filter:drop-shadow(0 5px 4px rgba(67,47,22,.18)); }
.rank-story-card .medal-stack .medal-back { opacity:.82; }
.rank-story-card .medal-stack .medal-back-left { left:4%; bottom:-5%; transform:rotate(-13deg); }
.rank-story-card .medal-stack .medal-back-right { right:2%; bottom:-5%; transform:rotate(13deg); }
.rank-story-card .medal-stack .medal-front { z-index:2; left:21%; bottom:-7%; width:64%; height:96%; }
.progress-card { margin-top: 22px; padding: 22px 24px 20px; background: rgba(255,253,247,.84); }
.progress-heading, .progress-meta { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.progress-heading h3 { margin-top: 8px; font-size: 1.5rem; }
.progress-heading strong { color: var(--coral); font-size: .95rem; }
.progress-card .progress { margin-top: 18px; height: 14px; }
.progress i { width: 0; background: linear-gradient(90deg, var(--coral), var(--gold)); }
.progress-meta { margin-top: 9px; color: var(--muted); font-size: .84rem; }
.course-total-meta { display: flex; gap: 18px; margin-top: 7px; color: var(--blue-dark); font-size: .84rem; font-weight: 700; }
.stream-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 18px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #d8e0d5; }
.stream-list div { display: grid; gap: 3px; }
.rank-avatar { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(174,126,54,.42); box-shadow: 0 3px 8px rgba(72,51,25,.14); margin-bottom: 3px; }
.stream-list span { color: var(--muted); font-size: .74rem; line-height: 1.25; }
.stream-list strong { color: var(--blue-dark); font-size: .78rem; line-height: 1.25; }
.mission-dots { display: flex; gap: 8px; margin-top: 16px; }
.mission-dots span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e6eadc; color: var(--muted); font-size: .8rem; font-weight: 700; }
.mission-dots .done { background: var(--mint); color: var(--blue-dark); }
.mission-dots .current { background: var(--gold); color: #463717; box-shadow: 0 0 0 4px rgba(228,174,75,.2); }
.lesson-image { display: block; width: calc(100% + 48px); margin: 0 -24px 20px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 25px 25px 0 0; filter: saturate(.9) contrast(.97); }
.tile small { color: var(--coral); font-weight: 700; }
.tile h3 { margin: 13px 0 8px; font-size: 1.45rem; }
.tile p { color: var(--muted); margin-bottom: 0; }
.progress { height: 10px; background: #e6eadc; border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--coral); border-radius: inherit; }
.footer { color: var(--muted); font-size: .9rem; padding-top: 25px; border-top: 1px solid #d8e0d5; }
.back-to-top { display: flex; margin: 28px auto 8px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.reveal-left { transform: translateX(-28px); }
.reveal.reveal-right { transform: translateX(28px); }
.reveal.is-visible { opacity: 1; transform: translate(0); }
.story-grid .reveal:nth-child(2) { transition-delay: .08s; }
.story-grid .reveal:nth-child(3) { transition-delay: .16s; }
.story-grid .reveal:nth-child(4) { transition-delay: .24s; }
.text-fade-in { display: block; }
.text-fade-word { display: inline-block; white-space: nowrap; }
.text-fade-space { white-space: pre; }
.text-fade-char { display: inline-block; opacity: 0; transform: translateY(.3em); }
.text-fade-word-unit { opacity: 0; transform: translateY(.2em); }
.text-fade-in.is-typed .text-fade-char,
.reveal.is-visible .text-fade-char { animation: text-fade-in .52s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--char-index) * 0.028s); }
.text-fade-in.is-typed .text-fade-word-unit,
.reveal.is-visible .text-fade-word-unit { animation: text-fade-in .3s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--char-index) * 0.045s); }
@keyframes text-fade-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.reveal-left, .reveal.reveal-right { opacity: 1; transform: none; transition: none; } }
body.modal-open { overflow: hidden; }
.parent-modal[hidden] { display: none; }
.parent-modal { position: fixed; inset: 0; z-index: 19; display: grid; place-items: center; padding: 20px; }
.parent-backdrop { position: absolute; inset: 0; background: rgba(36,55,70,.46); backdrop-filter: blur(5px); }
.parent-dialog { position: relative; display: flex; flex-direction: column; width: min(100%, 620px); max-height: min(720px, calc(100vh - 40px)); padding: 38px 38px 28px; border: 1px solid rgba(61,120,144,.18); border-radius: 28px; background: var(--white); box-shadow: 0 28px 80px rgba(36,55,70,.25); animation: auth-pop .18s ease-out; }
.parent-dialog-content { overflow-y: auto; padding-right: 5px; }
.parent-dialog h2 { margin-top: 12px; font-size: clamp(2rem, 5vw, 3rem); }
.parent-dialog h3 { margin: 28px 0 0; color: var(--blue-dark); font: 700 clamp(1.25rem, 3vw, 1.7rem)/1.2 "Rubik", sans-serif; }
.parent-dialog p { margin: 16px 0 0; color: var(--muted); line-height: 1.65; }
.parent-points { display: grid; gap: 10px; margin: 20px 0 0; padding: 0 0 0 20px; color: var(--blue-dark); line-height: 1.45; }
.parent-points li::marker { color: var(--coral); }
.parent-close { align-self: stretch; margin-top: 24px; }
.auth-modal[hidden] { display: none; }
.auth-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(36,55,70,.46); backdrop-filter: blur(5px); }
.auth-dialog { position: relative; width: min(100%, 470px); padding: 38px; border: 1px solid rgba(61,120,144,.18); border-radius: 28px; background: var(--white); box-shadow: 0 28px 80px rgba(36,55,70,.25); animation: auth-pop .18s ease-out; }
.auth-close { position: absolute; top: 13px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef4e9; color: var(--blue-dark); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.auth-dialog h2 { margin-top: 12px; font-size: clamp(2rem, 6vw, 2.8rem); }
.auth-step[data-auth-step="email"] form { margin-top: 40px; }
.auth-lead { margin: 14px 0 24px; color: var(--muted); line-height: 1.5; }
.auth-label { display: block; margin-bottom: 7px; color: var(--blue-dark); font-size: .85rem; font-weight: 700; }
.auth-input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #c9d7d1; border-radius: 13px; background: #fffefa; color: var(--ink); font: inherit; outline: none; }
.auth-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(61,120,144,.14); }
.auth-otp { letter-spacing: .24em; font-weight: 700; text-align: center; }
.auth-submit { width: 100%; margin-top: 10px; }
.auth-error { min-height: 20px; margin: 7px 0 0; color: #b84d46; font-size: .82rem; }
.auth-note { margin: 18px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.support-modal[hidden] { display: none; }
.support-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; }
.support-backdrop { position: absolute; inset: 0; background: rgba(36,55,70,.46); backdrop-filter: blur(5px); }
.support-dialog { position: relative; display: flex; flex-direction: column; width: min(100%, 520px); max-height: min(760px, calc(100vh - 40px)); min-height: 0; overflow: hidden; padding: 38px; border: 1px solid rgba(61,120,144,.18); border-radius: 28px; background: var(--white); box-shadow: 0 28px 80px rgba(36,55,70,.25); animation: auth-pop .18s ease-out; }
.support-dialog h2 { margin-top: 12px; font-size: clamp(2rem, 6vw, 2.8rem); }
.support-dialog form { min-height: 0; overflow-y: auto; padding: 0 10px 12px 0; }
.support-dialog .auth-label { margin-top: 8px; margin-bottom: 7px; }
.support-dialog form > .auth-label:first-of-type { margin-top: 0; }
.support-dialog .auth-submit { margin-top: 0; }
.support-actions { flex: 0 0 auto; display: grid; gap: 24px; margin-top: 10px; padding-right: 8px; }
.support-actions .support-submit, .support-actions .parent-close { width: 100%; margin-top: 0; }
.support-message { min-height: 70px; padding: 12px 14px; resize: vertical; }
.support-files { width: 100%; font: .82rem inherit; color: var(--muted); }
.support-file-list { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.support-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid #d7e1da; border-radius: 10px; background: rgba(238,244,233,.66); color: var(--blue-dark); font-size: .78rem; }
.support-file-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-file-remove { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--coral); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.support-file-remove:hover, .support-file-remove:focus-visible { color: var(--blue-dark); text-decoration: underline; }
.support-hint, .support-status { margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.support-status { min-height: 18px; color: var(--blue-dark); }
.support-success { display: grid; gap: 14px; align-content: center; flex: 1 1 auto; min-height: 220px; padding: 28px 8px; color: var(--blue-dark); text-align: center; opacity: 0; transform: translateY(12px) scale(.98); }
.support-success[hidden], .support-actions [hidden] { display: none; }
.support-success.is-visible { animation: support-success-in .38s ease-out forwards; }
.support-success strong { font: 700 clamp(2rem, 6vw, 3.2rem)/1.05 "Rubik", sans-serif; text-transform: uppercase; }
.support-success span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
@keyframes support-success-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.auth-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--blue-dark); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-button:disabled { color: var(--muted); cursor: wait; text-decoration: none; }
@keyframes auth-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) { .shell { padding-inline: 18px; } .nav-links { display: none; } .hero { grid-template-columns: 1fr; padding-top: 46px; } .hero-art { min-height: 280px; padding: 8px; } .polaroid { width: 100%; padding: 10px 10px 44px; } .grid, .story-grid { grid-template-columns: 1fr; } .story-card { display: block; } .story-image { height: auto; min-height: 0; aspect-ratio: 4 / 3; } .story-copy { padding: 24px 22px 26px; } .section-head { display: block; } .section-head .section-intro { white-space: normal; } .progress-heading, .progress-meta { align-items: flex-start; flex-direction: column; gap: 7px; } }
@media (max-width: 520px) { .parent-dialog { padding: 30px 22px 22px; border-radius: 22px; } .parent-dialog h2 { font-size: 2rem; } .auth-dialog, .support-dialog { padding: 32px 22px 24px; border-radius: 22px; } .auth-actions { flex-direction: column; align-items: flex-start; } }
@media (max-width: 760px) { .rank-story-card { height: auto; min-height: 0; } }

/* Главная: тот же раскрываемый прогресс, что и в дневнике. */
.main-progress-card { margin-top: 22px; padding: 28px 30px 24px; background: rgba(255,253,247,.88); }
.main-progress-card .progress-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.main-progress-card .progress-title-row h2 { margin-top:8px; font-size:clamp(1.7rem,3vw,2.4rem); }
.main-progress-card .progress-title-row > strong { color:var(--coral); font:700 .92rem "Rubik",sans-serif; white-space:nowrap; }
.main-progress-card .progress-summary { display:flex; align-items:baseline; gap:10px; margin-top:22px; color:var(--muted); }
.main-progress-card .progress-summary strong { color:var(--coral); font:700 1.8rem "Rubik",sans-serif; }
.main-progress-card .progress-summary span { font-size:.82rem; }
.main-progress-card .course-progress { height:13px; margin-top:10px; overflow:hidden; border-radius:99px; background:#dfd2b3; box-shadow:inset 0 2px 4px rgba(95,64,29,.12); }
.main-progress-card .course-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--coral),var(--gold)); }
.main-progress-card .progress-meta { display:flex; justify-content:space-between; gap:10px; margin-top:9px; color:var(--muted); font-size:.74rem; }
.main-progress-card .progress-stats { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:14px; }
.main-progress-card .progress-stats div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 11px; border:1px solid rgba(114,86,43,.18); border-radius:10px; background:rgba(255,248,218,.58); }
.main-progress-card .progress-stats span { color:var(--muted); font-size:.72rem; }
.main-progress-card .progress-stats strong { color:var(--blue); font:700 .82rem "Rubik",sans-serif; white-space:nowrap; }
.main-progress-card .lesson-browser { max-height:420px; margin-top:16px; padding-right:5px; overflow-y:auto; scrollbar-color:rgba(71,123,132,.7) rgba(223,210,179,.55); scrollbar-width:thin; }
.main-progress-card .lesson-browser::-webkit-scrollbar { width:7px; }
.main-progress-card .lesson-browser::-webkit-scrollbar-track { border-radius:99px; background:rgba(223,210,179,.55); }
.main-progress-card .lesson-browser::-webkit-scrollbar-thumb { border-radius:99px; background:rgba(71,123,132,.7); }
.main-progress-card .flow-group { border:1px solid rgba(114,86,43,.2); border-radius:10px; background:rgba(255,248,218,.48); }
.main-progress-card .flow-group + .flow-group { margin-top:8px; }
.main-progress-card .flow-group[open] { border-color:rgba(71,123,132,.38); background:rgba(255,248,218,.72); }
.main-progress-card .flow-group summary { display:grid; grid-template-columns:28px 1fr auto 18px; gap:10px; align-items:center; padding:10px 12px; cursor:pointer; list-style:none; }
.main-progress-card .flow-group summary::-webkit-details-marker { display:none; }
.main-progress-card .flow-group summary::after { content:'＋'; color:var(--blue); font-size:1rem; font-weight:700; text-align:center; }
.main-progress-card .flow-group[open] summary::after { content:'−'; }
.main-progress-card .flow-number { display:grid; place-items:center; width:27px; height:27px; border:1px solid #c8b88d; border-radius:50%; color:var(--muted); font-weight:700; font-size:.72rem; }
.main-progress-card .flow-group[open] .flow-number { border-color:var(--gold); background:var(--gold); color:#5b4420; }
.main-progress-card .flow-group summary b { display:block; color:var(--ink); font-size:.78rem; line-height:1.2; }
.main-progress-card .flow-group summary small { display:block; margin-top:3px; color:var(--muted); font-size:.62rem; }
.main-progress-card .flow-group summary em { color:var(--muted); font-size:.62rem; font-style:normal; }
.main-progress-card .flow-group:first-child summary em { color:#5b836e; }
.main-progress-card .lesson-list { display:grid; gap:4px; padding:0 12px 11px 48px; }
.main-progress-card .lesson-row { display:grid; grid-template-columns:20px 1fr; gap:7px; align-items:center; padding:7px; border-top:1px dashed rgba(111,83,44,.17); color:var(--muted); }
.main-progress-card .lesson-row > span { color:#a99a78; font-size:.68rem; font-weight:700; text-align:center; }
.main-progress-card .lesson-row b { font-size:.68rem; font-weight:600; line-height:1.2; }
.main-progress-card .lesson-row.done { color:#5b836e; }
.main-progress-card .lesson-row.done > span { color:#5b836e; }
.main-progress-card .lesson-row.current { border-radius:6px; background:rgba(226,170,71,.18); color:var(--ink); }
.main-progress-card .lesson-row.current > span { color:var(--coral); }
.legacy-path { display:none; }
@media (max-width:760px) { .main-progress-card { padding:22px 18px 18px; } .main-progress-card .progress-title-row { gap:10px; } .main-progress-card .progress-title-row h2 { font-size:1.55rem; } .main-progress-card .progress-title-row > strong { font-size:.68rem; } .main-progress-card .progress-summary { margin-top:14px; } .main-progress-card .progress-summary span { font-size:.62rem; } .main-progress-card .progress-meta { font-size:.58rem; } .main-progress-card .progress-stats { grid-template-columns:1fr 1fr; gap:6px; } .main-progress-card .progress-stats div { display:grid; gap:3px; padding:7px; } .main-progress-card .progress-stats span { font-size:.52rem; } .main-progress-card .progress-stats strong { font-size:.62rem; } .main-progress-card .flow-group summary { grid-template-columns:24px 1fr auto 14px; gap:6px; padding:8px 7px; } .main-progress-card .flow-number { width:22px; height:22px; font-size:.6rem; } .main-progress-card .flow-group summary b { font-size:.64rem; } .main-progress-card .flow-group summary small,.main-progress-card .flow-group summary em { font-size:.5rem; } .main-progress-card .lesson-list { padding-left:34px; } .main-progress-card .lesson-row { grid-template-columns:16px 1fr; gap:5px; padding:5px 4px; } .main-progress-card .lesson-row > span,.main-progress-card .lesson-row b { font-size:.56rem; } }