/* Self-study (/study): the look of the phone app (app.css tokens: indigo, sun yellow, soft paper) on a page that is good on a phone and on a desktop.
   No inline styles in the markup; the scripts set only numbers (grid places, a bar's width) through element.style. */
.st-body { background: var(--paper); }
#root { min-height: 100vh; min-height: 100dvh; }
.st-loading { text-align: center; padding: 60px 0; color: var(--ink-2); }
.st-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px var(--gutter) 40px; display: grid; gap: 16px; align-content: start; }
.st-center { max-width: 640px; text-align: center; }
/* the way back, above an inner view (a problem, a task, a lesson, a project) */
.st-crumb { display: flex; margin: -4px 0 -8px; }
.st-back { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: transparent; color: #3a3fd1; font: inherit; font-weight: 600; cursor: pointer; }
.st-back:hover, .st-back:focus-visible { background: rgba(58, 63, 209, .08); }
.st-back-arrow { font-size: 1.2em; line-height: 1; }

/* ---- the top bar (the app's gradient) ---- */
.st-top .st-top-in { max-width: 1120px; padding: 8px var(--gutter); }
.st-top-col { display: grid; gap: 6px; width: 100%; }
.st-top-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.st-brand { margin-inline-end: 0; font-size: 1.1rem; }
.st-brand-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.st-brand-row .st-home { margin-inline-start: auto; }      /* the home icon on the far left of the bar, where it is empty */
.st-home { display: inline-flex; align-items: center; gap: .35em; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 10px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; }
.st-home:hover, .st-home:focus-visible { background: rgba(255, 255, 255, .16); }
.st-home-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .st-home-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .st-home { justify-content: center; padding: 0; } }
.st-logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .2); font-size: 1.2rem; }
.st-who { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 12px 2px 4px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.st-who:hover { background: rgba(255, 255, 255, .26); }
.st-chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; font-size: .92rem; }
.st-code-chip { background: var(--sun); color: var(--ink); }
.st-py { display: inline-flex; gap: 8px; align-items: center; margin-inline-start: auto; font-size: .85rem; color: rgba(255, 255, 255, .9); }
.st-bar { width: 80px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.st-bar > i { display: block; height: 100%; background: #fff; width: 0; transition: width .2s; }
.st-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.st-nav .btn-quiet { background: rgba(255, 255, 255, .16); color: #fff; }
.st-nav .btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.st-banners { display: grid; }
.st-test { flex-wrap: wrap; }

/* ---- entry ---- */
.st-hero { padding: 22px 0 6px; }
.st-hero-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; border-radius: 50%; background: var(--accent-wash); font-size: 2.4rem; box-shadow: inset 0 0 0 3px #fff, var(--shadow-1); }
.st-hero h1 { margin: 0 0 4px; font-size: 1.6rem; }
.st-hero p { margin: 0; color: var(--ink-2); }
.st-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.st-pick .btn { justify-content: center; }

/* ---- cards ---- */
.st-card { background: var(--sheet); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-1); }
.st-card h2 { margin: 0 0 6px; font-size: 1.25rem; }
.st-card h3 { margin: 14px 0 4px; font-size: 1rem; }
.st-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.st-card-head p { margin: 2px 0 0; }
.st-card-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-wash); font-size: 1.8rem; flex: none; }
.st-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; justify-content: flex-end; }
.st-note { color: var(--ink-2); font-size: .95rem; margin: 6px 0; line-height: 1.8; }
.st-center-actions { justify-content: flex-end; }      /* every button row on the left (the Persian rule of the site) */
.st-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.st-contact-chip { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(58, 63, 209, .1); color: #2a2ca3; font-weight: 600; text-decoration: none; }
.st-contact-chip:hover { background: rgba(58, 63, 209, .18); }
.st-contact-id { color: var(--ink-2); font-weight: 500; font-size: .9rem; }
.st-warn { background: var(--note-wash); color: var(--note-ink); border-radius: 14px; padding: 10px 14px; margin: 8px 0; line-height: 1.8; }
.st-banner { background: var(--mint-wash); color: #0f5a2d; border-radius: 14px; padding: 10px 14px; margin: 8px 0; font-weight: 700; }
.st-code { direction: ltr; unicode-bidi: isolate; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); background: var(--accent-wash); padding: 1px 6px; border-radius: 6px; }

/* ---- the road of stations ---- */
.st-road { position: relative; background: linear-gradient(180deg, #eef0ff 0%, #f7f4ff 100%); border-radius: 24px; padding: 18px 10px 10px; box-shadow: var(--shadow-1); overflow: hidden; }
.st-road-svg { position: absolute; inset: 0; pointer-events: none; }
.st-road-back { fill: none; stroke: #c9cdf0; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 16; }
.st-road-done { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; opacity: .85; }
.st-road-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); row-gap: 22px; padding: 6px 0 4px; }
@media (min-width: 1000px) { .st-road-grid { --cols: 7; } }
@media (min-width: 640px) and (max-width: 999px) { .st-road-grid { --cols: 5; } }
@media (max-width: 639px) { .st-road-grid { --cols: 4; } }
.st-station { position: relative; display: grid; justify-items: center; gap: 6px; padding: 4px 2px; min-height: 0; border: 0; background: transparent; box-shadow: none; font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.st-station:hover { background: transparent; }
.st-node { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 4px solid var(--accent-wash); box-shadow: 0 3px 0 rgba(42, 44, 163, .18), 0 8px 16px rgba(58, 63, 209, .14); font-size: 1.7rem; transition: transform .15s var(--ease); }
.st-station:hover .st-node { transform: translateY(-2px); }
.st-node-n { position: absolute; bottom: -4px; inset-inline-end: -4px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.st-node-title { font-size: .8rem; font-weight: 600; line-height: 1.5; color: var(--ink-2); max-width: 9em; }
.st-station.open .st-node { border-color: var(--accent); }
.st-station.done .st-node { background: #d8f5e4; border-color: #2fb36b; }
.st-station.done .st-node-n { background: #1f9d63; }
.st-station.current .st-node { background: var(--sun); border-color: var(--sun-deep); animation: st-pulse 2s ease-in-out infinite; }
.st-station.current .st-node-title { color: var(--ink); font-weight: 700; }
.st-station.lock .st-node { background: #eceaf3; border-color: #dad7e6; filter: grayscale(1); box-shadow: none; }
.st-station.lock .st-node-title { color: #8a89a0; }
.st-station.picked .st-node-title { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.st-station:focus-visible .st-node { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-here { position: absolute; top: -26px; inset-inline-start: 50%; transform: translateX(50%); filter: drop-shadow(0 3px 4px rgba(27, 33, 64, .3)); }
@keyframes st-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 51, .6), 0 6px 14px rgba(217, 154, 0, .3); } 50% { box-shadow: 0 0 0 12px rgba(255, 194, 51, 0), 0 6px 14px rgba(217, 154, 0, .3); } }
@media (prefers-reduced-motion: reduce) { .st-station.current .st-node { animation: none; } .st-node { transition: none; } }

/* ---- the quota and the problems ---- */
.st-quota { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.st-pip { width: 34px; height: 12px; border-radius: 6px; background: var(--rule); }
.st-pip.on { background: #1f9d63; }
.st-problems { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-prob { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 14px; background: var(--accent-wash); color: var(--ink); font: inherit; font-weight: 600; text-align: start; cursor: pointer; box-shadow: 0 2px 0 rgba(42, 44, 163, .12); }
.st-prob:hover { background: #dcd8fb; }
.st-prob.solved { background: var(--mint-wash); box-shadow: 0 2px 0 rgba(31, 157, 99, .3); }
.st-lv { font-size: .75rem; padding: 2px 10px; border-radius: 99px; background: #fff; flex: none; }
.st-lv.l2 { background: var(--sun-wash); } .st-lv.l3 { background: #fde0e0; }

/* ---- a problem ---- */
.st-work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.st-statement p { margin: .4em 0; line-height: 1.9; }
.st-pre { direction: ltr; text-align: left; background: #151a34; color: #e8ecff; border-radius: 12px; padding: 10px 12px; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: .92rem; white-space: pre-wrap; overflow-x: auto; margin: 6px 0; min-height: 1.6em; }
.st-err { background: #3a1f1a; color: #ffd9c7; }
.st-editor { width: 100%; min-height: 300px; direction: ltr; text-align: left; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 1rem; line-height: 1.6; padding: 14px; border-radius: 14px; border: 2px solid var(--accent); background: #fbfbff; color: #151a34; resize: vertical; tab-size: 4; box-sizing: border-box; }
.st-editor:focus { outline: 3px solid var(--accent-wash); }
.st-stdin { width: 100%; min-height: 64px; direction: ltr; text-align: left; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rule); box-sizing: border-box; }
.st-res { display: grid; gap: 8px; margin-top: 10px; }
.st-case { border-radius: 12px; padding: 8px 12px; background: #fff; border: 2px solid var(--rule); }
.st-case.ok { border-color: #2fb36b; background: var(--mint-wash); }
.st-case.no { border-color: #e08a4b; background: var(--bad-wash); }

/* ---- the class table ---- */
.st-table { width: 100%; border-collapse: collapse; }
.st-table th, .st-table td { padding: 10px 10px; border-bottom: 1px solid var(--rule); text-align: start; }
.st-table tr.me { background: var(--accent-wash); font-weight: 700; }

/* ---- the reader and the avatar sheet ---- */
.st-overlay { position: fixed; inset: 0; background: rgba(15, 18, 45, .6); z-index: 60; display: grid; place-items: center; padding: 12px; }
.st-reader { width: min(1180px, 100%); height: min(860px, 100%); background: #fff; border-radius: 18px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; box-shadow: var(--shadow-2); }
.st-reader header { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--rule); }
.st-reader iframe { width: 100%; height: 100%; border: 0; }
.st-sheet { width: min(640px, 100%); max-height: 100%; background: #fff; border-radius: 18px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: var(--shadow-2); }
.st-sheet header { padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 1.1rem; }
.st-sheet-body { overflow-y: auto; padding: 12px 16px; }
.st-sheet footer { padding: 0 16px 8px; }

@media (max-width: 900px) {
  .st-work { grid-template-columns: minmax(0, 1fr); }
  .st-wrap { padding-top: 12px; }
  .st-card { padding: 14px; }
  .st-py { margin-inline-start: 0; }
}
@media (max-width: 600px) {
  .st-table th, .st-table td { padding: 6px 4px; font-size: .88rem; white-space: nowrap; }
  .st-table td:nth-child(2) { white-space: normal; min-width: 7em; }
  .st-node { width: 52px; height: 52px; font-size: 1.4rem; }
  .st-node-title { font-size: .72rem; }
  .st-who-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.st-contact { margin: 0; text-align: center; color: var(--ink-2); font-size: .95rem; }
.st-contact b { background: var(--sun-wash); padding: 2px 10px; border-radius: 99px; color: var(--ink); }
.st-qs { display: grid; gap: 10px; margin-top: 8px; }
.st-q { border-radius: 14px; padding: 10px 14px; background: var(--accent-wash); }
.st-q.answered { background: var(--mint-wash); }
.st-q-text { margin: 0 0 6px; white-space: pre-wrap; line-height: 1.8; }
.st-q-answer { margin: 0; white-space: pre-wrap; line-height: 1.8; }
.st-ask { min-height: 110px; font-family: inherit; direction: rtl; text-align: start; }

/* ---- learning helpers: the first difference, the tips, the hints ---- */
.st-diff { margin-top: 6px; }
.st-diff-line mark { background: #ffe08a; color: #151a34; border-radius: 3px; padding: 0 1px; }
.st-diff-tag { color: #aeb6e8; }
.st-tip { background: var(--sun-wash); color: var(--ink); border-radius: 12px; padding: 8px 12px; margin: 6px 0; line-height: 1.8; }
.st-hints { display: grid; gap: 4px; justify-items: end; margin-top: 8px; }
.st-hints .st-tip, .st-hints .st-note { justify-self: stretch; }
.st-keys { font-size: .8rem; }
@media (hover: none) { .st-keys { display: none; } }
.st-pip-mid { width: 46px; height: 18px; display: inline-grid; place-items: center; font-size: .7rem; color: #fff; background: #c9c4e6; }
.st-pip-mid.on { background: var(--sun-deep); }
.st-given { white-space: pre; overflow-x: auto; }
.st-rich > p { margin: .4em 0; line-height: 1.9; }
.st-code { white-space: pre-wrap; }

/* ---- week 1 audit fixes ---- */
.app .st-editor { min-height: 280px; height: auto; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 1rem; line-height: 1.6; border: 2px solid var(--accent); border-radius: 14px; background: #fbfbff; direction: ltr; text-align: left; padding: 14px; }
.app .st-stdin { min-height: 64px; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); direction: ltr; text-align: left; border: 1px dashed #b7b2d6; background: #fff; }
.st-box-title { margin: 10px 0 4px; font-size: .95rem; }
.st-err-head { margin: 8px 0 2px; color: #7a2a12; font-weight: 700; }
.st-busy { opacity: .7; cursor: progress; }
.st-busy .btn-text::after { content: " …"; }
.st-py { min-width: 15em; }
.st-station.lock .st-node-title { color: #5f5e75; }
.st-codes b { background: var(--sun-wash); padding: 1px 8px; border-radius: 99px; }
.st-next { justify-content: flex-end; }
@media (max-width: 700px) {
  .st-top { position: static; }
  .st-top .st-chip { font-size: .82rem; padding: 2px 9px; }
  .st-py { min-width: 0; width: 100%; order: 9; }
}

/* ---- week 2: «what next», the checklist, the tasks, «me», the tab bar, phase 2 ---- */
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-chips-top { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* the sections: a row under the top bar on a wide screen, a tab bar fixed at the bottom of a phone */
.st-tabs { display: flex; gap: 6px; justify-content: center; max-width: 1120px; margin: 10px auto 0; padding: 0 var(--gutter); }
.st-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 16px; border: 0; border-radius: 12px; background: var(--accent-wash); color: var(--accent-dark); font: inherit; font-weight: 700; cursor: pointer; }
.st-tab:hover { background: #dcd8fb; }
.st-tab.on { background: var(--accent); color: #fff; }
.st-tab:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 2px; }
.st-tab-icon { font-size: 1.1rem; }
.st-tab-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #fff; }
.st-root.st-has-tabs > .st-tabs { order: 0; }
@media (max-width: 700px) {
  .st-tabs { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; margin: 0; max-width: none; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 2px;
    background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 16px rgba(27, 33, 64, .12); justify-content: space-around; }
  .st-tab { flex: 1; flex-direction: column; gap: 0; min-height: 52px; padding: 4px 2px; background: transparent; font-size: .78rem; border-radius: 12px; }
  .st-tab.on { background: var(--accent-wash); color: var(--accent-dark); }
  .st-tab-icon { font-size: 1.3rem; }
  .st-root.st-has-tabs .st-wrap { padding-bottom: 96px; }
  .st-sticky { position: sticky; bottom: 70px; z-index: 30; background: rgba(255, 255, 255, .96); margin: 8px -8px; padding: 8px; border-radius: 14px; box-shadow: 0 -2px 12px rgba(27, 33, 64, .1); }
}

/* the «next step» card */
.st-next-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px;
  background: linear-gradient(135deg, #3a3fd1 0%, #6a4fe0 100%); color: #fff; box-shadow: var(--shadow-1); }
.st-next-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .18); font-size: 2rem; }
.st-next-kicker { font-size: .85rem; opacity: .85; }
.st-next-card h2 { margin: 2px 0 4px; font-size: 1.2rem; color: #fff; }
.st-next-card p { margin: 0; opacity: .92; line-height: 1.8; }
@media (max-width: 700px) {
  .st-next-card { grid-template-columns: auto minmax(0, 1fr); }
  .st-next-card .btn { grid-column: 1 / -1; justify-self: end; }      /* on the left, like every button */
  .st-next-icon { width: 52px; height: 52px; font-size: 1.6rem; }
}

/* a station: why it matters, the checklist, the parts */
.st-why { display: grid; gap: 4px; padding: 12px 14px; margin: 6px 0 10px; border-radius: 14px; background: var(--sun-wash); }
.st-why p { margin: 0; line-height: 1.85; }
.st-checklist { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.st-checklist li { display: flex; align-items: center; gap: 10px; line-height: 1.7; }
.st-check { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid #b7b2d6; background: #fff; color: #fff; font-weight: 800; font-size: .85rem; }
.st-checklist li.done .st-check { background: #1f9d63; border-color: #1f9d63; }
.st-checklist li.done > span:nth-child(2) { color: var(--ink-2); }
.st-sub { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.st-sub > h3 { margin-top: 0; }
.st-actions-start { justify-content: flex-end; }      /* the Persian rule of the site: every button row sits on the left (flex-end in RTL); the name stays for the callers */
.st-prob-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.st-statement .st-prob-tags { margin-bottom: 6px; }
.st-core { background: var(--sun) !important; color: var(--ink); font-weight: 700; }
.st-done { background: var(--mint-wash) !important; color: #0f5a2d; }
.st-prob.core { box-shadow: 0 2px 0 var(--sun-deep); }
.st-prob.closed { background: #f1eff7; color: var(--ink-2); }
.st-prob-title { display: grid; gap: 2px; }
.st-rule { background: #fff4e5; border-inline-start: 4px solid var(--sun-deep); border-radius: 10px; padding: 6px 12px; margin: 4px 0; }
.st-rule p { margin: 0; }
.st-question { font-weight: 700; line-height: 1.9; margin: 6px 0; }
.st-note-area { min-height: 90px; }
.st-teacher { background: var(--mint-wash); border-radius: 12px; padding: 8px 12px; margin-top: 8px; }
.st-explain { background: var(--accent-wash); border-radius: 14px; padding: 10px 14px; line-height: 1.9; margin: 8px 0; }
.st-explain .st-rich > p:first-child { display: inline; }

/* the intro (station 0) */
.st-intro-list { display: grid; gap: 12px; margin: 8px 0 12px; }
.st-intro-item { padding: 12px 14px; border-radius: 14px; background: #f7f6ff; }
.st-intro-item h3 { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.st-intro-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .9rem; flex: none; }

/* the tasks */
.st-options { display: grid; gap: 8px; margin: 8px 0; }
.st-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 2px solid var(--rule); border-radius: 14px; background: #fff; font: inherit; cursor: pointer; text-align: start; }
.st-option:hover { border-color: #b7b2d6; }
.st-option.on { border-color: var(--accent); background: var(--accent-wash); }
.st-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.st-option-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b7b2d6; background: #fff; }
.st-option.on .st-option-dot { border: 6px solid var(--accent); }
.st-option-t { margin: 0; min-height: 0; }
.st-lines, .st-parsons-built, .st-parsons-pool { direction: ltr; text-align: left; display: grid; gap: 4px; margin: 6px 0; }
.st-line, .st-pline-t, .st-pool-line { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: center; width: 100%; min-height: 40px; padding: 4px 8px; border: 2px solid transparent; border-radius: 10px;
  background: #151a34; color: #e8ecff; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: .92rem; text-align: left; cursor: default; }
button.st-line, .st-pline-t, .st-pool-line { cursor: pointer; }
button.st-line:hover, .st-pool-line:hover { border-color: #8f95e8; }
.st-line.on { border-color: var(--sun); background: #3a2f12; }
.st-line-n { color: #8f95c8; font-size: .8rem; }
.st-line-t { white-space: pre; overflow-x: auto; }
.st-pool-line { grid-template-columns: minmax(0, 1fr); background: #2b3160; }
.st-parsons-built { min-height: 64px; padding: 8px; border: 2px dashed #b7b2d6; border-radius: 14px; background: #f7f6ff; }
.st-pline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.st-pline-move { display: inline-flex; gap: 4px; }
.st-mini { min-width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: var(--accent-wash); color: var(--accent-dark); font: inherit; cursor: pointer; }
.st-mini:disabled { opacity: .35; cursor: default; }
.st-rtl { direction: rtl; text-align: start; }

/* «me» */
.st-me-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.st-me-head h2 { margin: 0; }
.st-me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-skill { display: inline-flex; padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: .9rem; }
.st-skill-strong { background: var(--mint-wash); color: #0f5a2d; }
.st-skill-learning { background: var(--sun-wash); color: #6b4b00; }
.st-skill-weak { background: #fde0e0; color: #8a1c1c; }
.st-hist { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; margin: 10px 0; direction: rtl; }
.st-hist-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; align-items: end; gap: 2px; }
.st-hist-bar { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: #c9cdf0; align-self: end; }
.st-hist-bar.me { background: var(--sun-deep); }
.st-hist-n, .st-hist-x { font-size: .72rem; color: var(--ink-2); }
.st-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.st-badge { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: #f1eff7; color: #6c6b80; font-size: .85rem; line-height: 1.6; }
.st-badge.on { background: var(--sun-wash); color: var(--ink); }

/* a short celebration */
.st-celebrate { position: fixed; z-index: 80; inset-inline: 0; top: 18px; margin: 0 auto; width: max-content; max-width: calc(100% - 24px); display: flex; gap: 10px; align-items: center;
  padding: 12px 20px; border-radius: 18px; background: #1f9d63; color: #fff; box-shadow: var(--shadow-2); animation: st-pop .35s var(--ease); transition: opacity .5s, transform .5s; }
.st-celebrate.out { opacity: 0; transform: translateY(-10px); }
.st-celebrate-icon { font-size: 1.6rem; }
@keyframes st-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .st-celebrate { animation: none; transition: none; } }

/* phase 2 */
.st-p2-list .st-prob { min-height: 72px; }
.st-p2-item.locked { opacity: .55; cursor: default; }
.st-p2-lesson { margin: 8px 0 12px; border-radius: 14px; background: #f7f6ff; padding: 8px 12px; }
.st-p2-lesson > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.st-p2-steps { display: grid; gap: 4px; }
.st-step.done { border-top-color: #2fb36b; }
.st-step-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-step-head h3 { margin: 0; }
.st-calls td { direction: ltr; text-align: left; font-size: .9rem; }
.st-calls td:last-child { direction: rtl; text-align: start; color: var(--ink-2); }
.st-demo { margin: 8px 0; }
.st-demo > summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; }
.st-editor-side { position: sticky; top: 8px; }
@media (max-width: 900px) { .st-editor-side { position: static; } }
.app .st-line, .app .st-pline-t, .app .st-pool-line, .app .st-line-t, .app .st-option-t, .st-mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace); letter-spacing: 0; }
.app .st-line, .app .st-pline-t, .app .st-pool-line { font-size: .92rem; font-weight: 500; }
@media (max-width: 700px) { .toast, .b-toast { bottom: 84px !important; } }
.st-tab.on:hover { background: var(--accent); }
@media (max-width: 700px) { .st-tab.on:hover { background: var(--accent-wash); } }
.st-wrap > * { min-width: 0; }
.st-p2-steps, .st-step, .st-editor-side { min-width: 0; }
.st-calls { display: block; overflow-x: auto; }
.st-why > summary { cursor: pointer; font-weight: 700; color: #6b4b00; min-height: 32px; }
.st-why:not([open]) { padding-block: 6px; }

/* ---- the editor: a dark sheet with line numbers and coloured code (the textarea types, the layer under it shows) ---- */
.st-code-box { direction: ltr; background: #0f1730; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(15, 23, 48, .25); overflow: hidden; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 1rem; line-height: 1.65; }
.st-code-box:focus-within { box-shadow: inset 0 0 0 2px var(--sun), 0 10px 30px rgba(15, 23, 48, .3); }
.st-code-bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: #161f3d; color: #8f9bc8; font-size: .78rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.st-code-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.st-code-bar i:nth-child(2) { background: #febc2e; } .st-code-bar i:nth-child(3) { background: #28c840; }
.st-code-bar span { margin-left: 6px; }
.st-code-body { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.st-gutter { display: grid; align-content: start; padding: 14px 10px 14px 14px; color: #8f9bc8; text-align: right; user-select: none; background: #0b1227; overflow: hidden; }
.st-gutter span { display: block; height: 1.65em; font-size: .9em; line-height: 1.65rem; }
.st-code-scroll { position: relative; min-width: 0; }
.app .st-code-scroll .st-editor, .st-code-scroll .st-editor { display: block; width: 100%; min-height: 0; margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; color: transparent; caret-color: #ffd45c; font: inherit; line-height: inherit; white-space: pre; overflow: auto; resize: none; tab-size: 4; box-sizing: border-box; position: relative; z-index: 1; }
.st-code-scroll .st-editor::placeholder { color: #8f9bc8; }
.st-code-scroll .st-editor::selection { background: rgba(255, 210, 92, .35); color: transparent; }
.st-code-scroll .st-editor:focus { outline: none; }
.st-hl { position: absolute; inset: 0; margin: 0; padding: 14px 16px; color: #e8ecfb; white-space: pre; pointer-events: none; overflow: hidden; font: inherit; line-height: inherit; z-index: 0; }
.tk-kw { color: #c792ea; } .tk-fn { color: #82aaff; } .tk-str { color: #c3e88d; } .tk-num { color: #f78c6c; } .tk-cm { color: #8f9bc8; font-style: italic; } .tk-id { color: #e8ecfb; } .tk-op { color: #89ddff; }
@media (max-width: 700px) { .st-code-box { font-size: .92rem; border-radius: 14px; } .st-gutter { padding: 12px 8px 12px 10px; } .st-code-scroll .st-editor, .st-hl { padding: 12px 12px; } }
/* the output looks like a terminal under the editor */
.st-pre { background: #0f1730; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.st-err { background: #2a1a2e; }

/* ---- quality pass: identity, hierarchy, moments ---- */
.st-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--accent); font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-weight: 700; font-size: .95rem; direction: ltr; letter-spacing: 0; }
.st-mark-big { width: 72px; height: 72px; border-radius: 22px; font-size: 1.8rem; margin: 0 auto 10px; background: var(--accent); color: #fff; box-shadow: var(--shadow-2); }
.st-hero h1 { font-size: 1.9rem; }
.st-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: .92rem; }
.st-pill-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .35); }
.st-pill-xp { color: #ffd45c; }
.st-dots { display: inline-flex; gap: 4px; }
.st-dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .4; animation: st-dot 1.2s infinite; }
.st-dots i:nth-child(2) { animation-delay: .2s; } .st-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes st-dot { 50% { opacity: 1; transform: translateY(-2px); } }
/* entry: choice cards instead of a stack of slabs */
.st-pick { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 520px; margin-inline: auto; }
.st-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--sheet); color: var(--ink); font: inherit; text-align: start; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .15s var(--ease), box-shadow .15s; }
.st-choice:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: #c8c4ea; }
.st-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.st-choice-text { display: grid; gap: 2px; }
.st-choice-text b { font-size: 1.1rem; }
.st-choice-text span { color: var(--ink-2); font-size: .9rem; }
.st-mono-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-wash); color: var(--accent-dark); font-weight: 700; font-size: 1.3rem; }
.st-chev { color: #b7b2d6; font-size: 1.6rem; line-height: 1; }
/* the verdict */
.st-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; animation: st-rise .35s var(--ease); }
.st-verdict.ok { background: linear-gradient(135deg, #1f9d63 0%, #2fb36b 100%); color: #fff; box-shadow: 0 10px 30px rgba(31, 157, 99, .3); }
.st-verdict.no { background: var(--sun-wash); color: var(--ink); border: 1px solid #f3dc9c; }
.st-verdict-text { display: grid; gap: 2px; }
.st-verdict-text b { font-size: 1.25rem; }
.st-verdict-text span { font-size: .92rem; opacity: .92; }
.st-check-big { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; animation: st-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.st-check-path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: st-draw .45s .15s ease-out forwards; }
@keyframes st-draw { to { stroke-dashoffset: 0; } }
.st-count-big { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 10px; border-radius: 16px; background: #fff; color: var(--sun-ink); font-weight: 700; font-size: 1.1rem; direction: ltr; }
.st-xp { font-size: 2rem; font-weight: 700; color: #fff; direction: ltr; }
.st-banner-big { font-size: 1.05rem; padding: 14px 16px; }
.st-badge-moment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #fff3d1, #ffe08a); border: 1px solid #f3cf5e; margin: 8px 0; animation: st-rise .4s var(--ease); }
.st-badge-moment b { display: block; font-size: 1.15rem; }
.st-badge-moment p { margin: 2px 0 0; color: var(--ink-2); }
.st-badge-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; font-size: 2rem; box-shadow: 0 0 0 4px #ffd45c, var(--shadow-1); animation: st-pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.st-cases { display: grid; gap: 8px; }
.st-fold { margin-top: 4px; }
.st-fold > summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; padding: 6px 0; }
.st-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.st-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: st-fall 2s ease-in forwards; }
@keyframes st-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .6; } }
@keyframes st-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .st-verdict, .st-check-big, .st-badge-moment, .st-badge-ring, .st-dots i { animation: none; } .st-check-path { stroke-dashoffset: 0; animation: none; } }
/* the stars of the week */
.st-stars { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 14px; }
.st-star { display: grid; justify-items: center; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--sun-wash); min-width: 120px; text-align: center; }
.st-star.me { box-shadow: inset 0 0 0 2px var(--sun-deep); }
.st-star b { font-size: 1rem; }
.st-star span { font-size: .85rem; color: var(--ink-2); }
/* the next-step card: progress of the station */
.st-next-progress { display: grid; gap: 4px; margin-top: 10px; }
.st-next-track { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.st-next-track i { display: block; height: 100%; background: var(--sun); border-radius: 99px; transition: width .4s var(--ease); }
.st-next-progress small { font-size: .8rem; opacity: .85; }
/* the road: labels fit, done stations are filled, no underline */
.st-node-title { max-width: 96px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.st-station.done .st-node { background: var(--accent); border-color: var(--accent); color: #fff; }
.st-station.done .st-node-icon { filter: grayscale(1) brightness(10); }
.st-station.done .st-node-n { background: #fff; color: var(--accent-dark); }
.st-station.lock .st-node { background: #eeece6; border-color: #e3e0d6; opacity: .75; }
.st-station.picked .st-node-title { text-decoration: none; }
.st-station.picked::after { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 2px; }
/* checklist boxes: the custom look */
.st-check { border-radius: 8px; border-width: 2px; transition: background .2s, border-color .2s; }
/* type scale with air */
.st-card { padding: 22px 24px; }
.st-card h2 { font-size: 1.45rem; }
.st-station-card .st-card-head h2 { font-size: 1.5rem; }
.st-statement h2 { font-size: 1.6rem; }
.st-next-card h2 { font-size: 1.4rem; }
.st-sub > h3 { font-size: 1.1rem; }
@media (max-width: 700px) { .st-card { padding: 16px; } .st-card h2 { font-size: 1.3rem; } .st-statement h2 { font-size: 1.4rem; } .st-next-card h2 { font-size: 1.2rem; } }
/* motion budget */
.app .btn-primary:hover:not(:disabled), .app .btn-sun:hover:not(:disabled) { transform: translateY(-1px); transition: transform .12s var(--ease), background .12s; }
.st-prob { transition: transform .15s var(--ease), box-shadow .15s; }
.st-prob:hover { transform: translateY(-1px); }
.ic { display: inline-block; vertical-align: middle; }
.st-node-icon .ic { color: var(--accent-dark); }
.st-station.current .st-node-icon .ic { color: var(--sun-ink); }
.st-station.done .st-node-icon .ic { color: #fff; }
.st-station.done .st-node-icon { filter: none; }
.st-station.lock .st-node-icon .ic { color: #8a89a0; }
.st-card-icon .ic { color: var(--accent-dark); }
.st-tab-icon .ic { color: currentColor; }
.st-next-icon .ic { color: #fff; }
.st-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1f9d63; color: #fff; margin-inline-end: 6px; vertical-align: middle; }
.st-tick .ic { stroke-width: 3; }
.st-kind-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; color: var(--accent-dark); margin-inline-end: 6px; vertical-align: middle; }
.st-prob.closed .st-kind-ic { color: #8a89a0; }
.st-mark { unicode-bidi: bidi-override; }

/* ---- the interactive lesson ---- */
.st-lesson-head { display: grid; gap: 10px; }
.st-lesson-progress { display: grid; gap: 4px; }
.st-lesson-track { display: block; height: 6px; border-radius: 99px; background: var(--accent-wash); overflow: hidden; }
.st-lesson-track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .4s var(--ease); }
.st-lesson-count { color: var(--ink-2); font-size: .85rem; }
.st-lesson-goals { margin: 8px 0 4px; padding: 8px 14px; border-radius: 14px; background: var(--sun-wash); }
.st-lesson-goals > summary { cursor: pointer; font-weight: 700; }
.st-lesson-goals li { line-height: 1.9; }
.st-steps { display: grid; gap: 14px; margin-top: 12px; }
.st-step-card { padding: 16px 18px; border-radius: 18px; background: #f7f6ff; border: 1px solid #e6e3f7; animation: st-rise .35s var(--ease); }
.st-step-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.st-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; }
.st-step-kicker { display: block; color: var(--accent-dark); font-size: .85rem; font-weight: 600; }
.st-step-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.6; }
.st-hi { background: var(--sun-wash); color: inherit; padding: 0 3px; border-radius: 4px; }
.st-lesson-p { margin: .5em 0; line-height: 2; font-size: 1.02rem; }
.st-lesson-big { margin: .6em 0; font-size: 1.25rem; font-weight: 700; line-height: 1.8; }
.st-lesson-list { margin: .4em 0; padding-inline-start: 1.3em; line-height: 2; }
.st-lesson-tip { margin: 10px 0; }
.st-lesson-table th, .st-lesson-table td { padding: 8px 10px; }
.st-table-wrap { overflow-x: auto; }
.st-boxes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; direction: ltr; }
.st-box { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); min-width: 90px; text-align: center; }
.st-box-name { font-size: .78rem; color: var(--ink-2); direction: rtl; }
.st-box-value { font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-weight: 700; color: var(--accent-dark); }
.st-box-type { font-size: .75rem; color: #8a1c1c; font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); }
.st-lesson-code { font-size: .95rem; }
/* the live example */
.st-try { margin: 12px 0; display: grid; gap: 8px; }
.st-try .st-code-box { font-size: .95rem; }
.st-try-actions { margin: 0; }
.st-try-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.st-try-stdin { min-height: 40px; }
.st-try-out:empty { display: none; }
.st-tip-ok { background: var(--mint-wash); color: #0f5a2d; }
.st-gutter-mark { background: rgba(255, 194, 51, .25); color: #ffd45c; border-radius: 4px; }
/* the prediction */
.st-predict { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px dashed #c8c4ea; display: grid; gap: 8px; }
.st-predict-q { margin: 0; line-height: 1.9; }
.st-guess { min-height: 48px; }
.st-predict-a { padding: 10px 12px; border-radius: 12px; background: var(--mint-wash); line-height: 1.9; animation: st-rise .3s var(--ease); }
.st-lesson-foot { flex-direction: row-reverse; justify-content: flex-start; align-items: center; }
.st-lesson-done { flex: 1 1 100%; }
@media (max-width: 700px) { .st-step-card { padding: 12px; } .st-step-card h3 { font-size: 1.1rem; } }

/* ---- the progress ring round my avatar (the header) ---- */
.st-ring { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; }
.st-ring > .av { grid-area: 1 / 1; }
.st-ring-svg { grid-area: 1 / 1; width: 48px; height: 48px; transform: rotate(-90deg); }
.st-ring-back { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 3; }
.st-ring-fill { fill: none; stroke: #ffd45c; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }

/* ---- the skill sky («من») ---- */
.st-sky-card { grid-column: 1 / -1; }
.st-sky-wrap { margin: 6px auto 0; max-width: 760px; }
.st-sky { display: block; width: 100%; height: auto; border-radius: 18px; background: radial-gradient(circle at 50% 50%, #2b2f8f 0%, #1b1f5e 55%, #141741 100%); font-family: inherit; }
.st-sky-orbit { fill: none; stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 7; }
.st-sky-ray { stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; }
.st-sky-halo { fill: currentColor; opacity: .18; }
.st-sky-dot { fill: currentColor; stroke: #fff; stroke-width: 2; }
.st-sky-label { fill: #fff; font-size: 15px; font-weight: 600; paint-order: stroke; stroke: rgba(20, 23, 65, .9); stroke-width: 4px; stroke-linejoin: round; }
.st-star { transform-box: fill-box; transform-origin: center; animation: st-star-in .6s var(--ease) both; }
.st-star-strong { color: #4fe09a; }
.st-star-learning { color: #ffc84a; }
.st-star-weak { color: #ff7a7a; }
.st-star-strong .st-sky-dot { filter: drop-shadow(0 0 6px rgba(79, 224, 154, .9)); }
.st-sky-core { fill: #fff; stroke: #ffd45c; stroke-width: 4; }
.st-sky-core-text { fill: #1b1f5e; font-size: 18px; font-weight: 700; }
.st-sky-core-sub { fill: #3a3fd1; font-size: 11px; font-weight: 600; }
.st-sky-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
@keyframes st-star-in { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }

/* ---- the road moment: the line grows into the station that just opened, the station pops ---- */
.st-road-grow { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1); }
.st-station-new .st-node { animation: st-node-pop .7s var(--ease) both; box-shadow: 0 0 0 10px rgba(255, 196, 51, .35), 0 8px 22px rgba(58, 63, 209, .25); }
@keyframes st-node-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .st-star { animation: none; } .st-ring-fill { transition: none; } .st-station-new .st-node { animation: none; } }

.st-py-detail { display: block; flex-basis: 100%; opacity: .8; font-size: .78em; line-height: 1.5; word-break: break-word; }

/* «بررسی کلاسی» and the programs from class, on «من» */
.st-review { border-inline-start: 4px solid var(--accent, #3a3fd1); }
.st-review-summary { font-size: 1.05em; line-height: 1.9; }
.st-review-redo { padding: 10px 12px; border-radius: 12px; background: #fff4d6; line-height: 1.8; }
.st-review-problem { margin: 10px 0; padding-inline-start: 12px; border-inline-start: 3px solid #d9dcff; }
.st-review-issues { margin: 4px 0 6px; padding-inline-start: 20px; line-height: 1.8; }
.st-review-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-review-next { padding-inline-start: 22px; line-height: 1.9; }
.st-classwork-row { padding: 6px 0; border-top: 1px solid #eceef5; }
.st-classwork-row summary { cursor: pointer; }
.st-classwork-row.ok summary b::before { content: "✓ "; color: #1e8f4e; }
.st-classwork-row.bad summary b::before { content: "✗ "; color: #b54a1c; }

/* ---- the inputs of a program: one coloured, numbered field per input() (study-run.js) ---- */
.st-inputs { display: grid; gap: 8px; margin: 4px 0 6px; }
.st-in-list { display: grid; gap: 8px; }
.st-in {
  --in: #3a3fd1; --in-wash: #eef0ff;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge label x" "badge field x"; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 8px 10px 10px; border-radius: 14px; background: var(--in-wash); border-inline-start: 5px solid var(--in); box-sizing: border-box;
}
.st-in-c0 { --in: #3a3fd1; --in-wash: #eef0ff; }
.st-in-c1 { --in: #d97706; --in-wash: #fff3d1; }
.st-in-c2 { --in: #0f8a5a; --in-wash: #e1f5ea; }
.st-in-c3 { --in: #c2367c; --in-wash: #fde7f1; }
.st-in-c4 { --in: #0b7fa8; --in-wash: #e0f3fa; }
.st-in-c5 { --in: #6d3fc9; --in-wash: #efe6ff; }
.st-in-badge { grid-area: badge; width: 30px; height: 30px; border-radius: 50%; background: var(--in); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.st-in-label { grid-area: label; font-size: .86rem; color: var(--in); font-weight: 600; line-height: 1.5; }
.st-in-field {
  grid-area: field; width: 100%; min-height: 42px; box-sizing: border-box; padding: 6px 10px; border-radius: 10px; border: 2px solid transparent; background: #fff; color: var(--ink);
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 16px; direction: ltr; text-align: left;
}
.st-in-field:focus { outline: none; border-color: var(--in); box-shadow: 0 0 0 3px color-mix(in srgb, var(--in) 22%, transparent); }
.st-in-x { grid-area: x; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 1.3rem; line-height: 1; cursor: pointer; align-self: start; }
.st-in-x:hover, .st-in-x:focus-visible { background: #fff; color: var(--ink); outline: none; }
.st-in-x[hidden] { display: none; }
.st-in-note { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.7; min-height: 1.2em; }
.st-in-actions { display: flex; justify-content: flex-end; }         /* the button on the left, like every button row */
.st-in-new { animation: st-in-pop .5s cubic-bezier(.2, .9, .3, 1.3); }
.st-in-hot { box-shadow: 0 0 0 3px var(--in); animation: st-in-pop .5s cubic-bezier(.2, .9, .3, 1.3), st-in-glow 1.2s ease-in-out 2; }
@keyframes st-in-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-in-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--in); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--in) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .st-in-new, .st-in-hot { animation: none; } }
.st-inputs-compact .st-in { padding: 6px 8px 8px; border-radius: 12px; }
.st-inputs-compact .st-in-field { min-height: 36px; }
.st-inputs-compact .st-in-badge { width: 24px; height: 24px; font-size: .8rem; }
.st-try-in .st-inputs { width: 100%; }

/* ---- the error's line, and the tips with a piece of code ---- */
.st-err-line { margin: 6px 0; font-size: .92rem; color: var(--ink-2); }
.st-err-line .st-code { background: #fff3f3; color: #8a1c1c; border-radius: 6px; padding: 2px 6px; }
.st-tips { display: grid; gap: 6px; margin-top: 6px; }
.st-tips .st-tip { margin: 0; }
.st-tips .st-tip:not(.st-tip-first) { background: #f4f3ff; }
.st-tip-code { margin: 6px 0 0; padding: 8px 10px; font-size: .9rem; background: #1b2140; color: #e8ecff; border-radius: 10px; white-space: pre; overflow-x: auto; }

/* ---- the lab's «الگوهای آماده» ---- */
.st-patterns { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
.st-pat-title { margin: 0 0 4px; font-size: 1.05rem; }
.st-pat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.st-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--rule); background: #fff; color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.st-chip:hover { border-color: var(--ink-2); }
.st-chip[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.st-chip:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.st-pat-card { background: var(--sun-wash); border-radius: 14px; padding: 10px 12px 12px; }
.st-pat-card[hidden] { display: none; }
.st-pat-why { margin: 0 0 6px; line-height: 1.8; }
.st-pat-code { margin: 0; }
.st-pat-actions { margin-top: 8px; }

/* ---- the teacher on a pupil's page: said loudly, with the way out ---- */
.st-teacher-view { position: sticky; top: 0; z-index: 41; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; background: #ffe9a8; color: #4a2f00; border-bottom: 3px solid #d99a00; box-shadow: 0 4px 14px rgba(122, 77, 0, .18); }
.st-teacher-view .banner-text { flex: 1 1 260px; line-height: 1.7; }
.st-banner-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }      /* on their own line (a phone) the buttons still sit on the left */
.st-teacher-pick .st-choice { border-color: #d99a00; }

/* ---- the Python failure's whole story, folded under the bar ---- */
/* Python did not load: one calm sentence on its own line, the button under it on the left (the story itself goes to the admin, not the pupil) */
.st-py.st-py-failed { flex-wrap: wrap; justify-content: flex-end; line-height: 1.7; }
.st-py.st-py-failed > span { flex-basis: 100%; }
.st-py-server-bad { color: #ffd2d2; font-weight: 600; }