:root {
  color-scheme: dark;

  /* Editor-inspired AskHackers design tokens */
  --ah-bg: #0e0e11;
  --ah-bg-soft: #111216;
  --ah-panel: #141519;
  --ah-panel-2: #1a1b20;
  --ah-border: rgba(212, 212, 216, .14);
  --ah-border-soft: rgba(212, 212, 216, .08);

  --ah-text: #d4d4d8;
  --ah-text-strong: #f4f4f5;
  --ah-muted: #a1a1aa;
  --ah-soft: #71717a;

  --ah-accent: #34d399;
  --ah-accent-soft: rgba(52, 211, 153, .10);
  --ah-yellow: #e8c766;
  --ah-yellow-soft: rgba(232, 199, 102, .10);
  --ah-blue: #60a5fa;
  --ah-green: #34d399;
  --ah-red: #f87171;
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 22% -8%, rgba(52, 211, 153, 0.055), transparent 28rem),
    radial-gradient(circle at 82% 0%, rgba(96, 165, 250, 0.045), transparent 30rem),
    var(--ah-bg);
  color: var(--ah-text);
}
.font-mono, code, pre { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
::selection { background: var(--ah-accent); color: #08110e; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

.ah-page { min-height: 100dvh; background: transparent; }
.ah-app-body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.ah-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.ah-header { height: 64px; border-bottom: 1px solid var(--ah-border-soft); background: rgba(2, 6, 23, .92); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; padding-inline: 24px; }
.ah-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.ah-brand-mark { color: var(--ah-accent); font-size: 1.55rem; }
.ah-nav { display: none; align-items: center; gap: 24px; color: var(--ah-muted); font-size: .875rem; font-weight: 600; }
.ah-nav a { transition: color .18s ease; }
.ah-nav a:hover { color: white; }
.ah-nav a[aria-current="page"] { color: white; position: relative; }
.ah-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--ah-yellow); border-radius: 999px; }
@media (min-width: 768px) { .ah-nav { display: flex; } }

.ah-panel { background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(11, 17, 32, .985)); border: 1px solid var(--ah-border); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.ah-card { background: rgba(2, 6, 23, .54); border: 1px solid var(--ah-border-soft); }
.ah-muted { color: var(--ah-muted); }
.ah-kicker { color: var(--ah-soft); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 800; }
.ah-readable { color: #cbd5e1; font-size: 15px; line-height: 1.8; }
.ah-readable code { color: #fde68a; font-size: .92em; }

.ah-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 18px; font-size: .875rem; font-weight: 800; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.ah-btn:hover { transform: translateY(-1px); }
.ah-btn-primary { background: var(--ah-accent); color: #08110e; }
.ah-btn-primary:hover { background: #6ee7b7; }
.ah-btn-secondary { background: rgba(96,165,250,.16); border: 1px solid rgba(96,165,250,.34); color: #bfdbfe; }
.ah-btn-secondary:hover { background: #3b82f6; }
.ah-btn-success { background: #16a34a; color: white; }
.ah-btn-success:hover { background: #22c55e; }
.ah-btn-ghost { border: 1px solid #334155; color: #cbd5e1; background: rgba(15,23,42,.45); }
.ah-btn-ghost:hover { background: #1e293b; color: white; }
.ah-btn-locked { border: 1px solid #334155; color: #64748b; background: transparent; pointer-events: none; }
.ah-focus:focus-visible, a:focus-visible, button:focus-visible, textarea:focus-visible { outline: 2px solid var(--ah-accent); outline-offset: 3px; }

.ah-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid var(--ah-border-soft); background: rgba(15, 23, 42, .72); color: #cbd5e1; padding: 6px 10px; font-size: .74rem; font-weight: 800; }
.ah-badge-primary { border-color: rgba(250, 204, 21, .35); background: rgba(250,204,21,.09); color: #fde047; }
.ah-badge-blue { border-color: rgba(37, 99, 235, .35); background: rgba(37,99,235,.12); color: #93c5fd; }
.ah-badge-success { border-color: rgba(34, 197, 94, .35); background: rgba(34,197,94,.10); color: #86efac; }

.ah-step { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: .875rem; font-weight: 700; }
.ah-step span { width: 22px; height: 22px; border-radius: 999px; background: #1e293b; color: #94a3b8; display: grid; place-items: center; font-size: .75rem; font-weight: 900; }
.ah-step.is-active { color: var(--ah-accent); }
.ah-step.is-active span { background: var(--ah-accent); color: #08110e; }
.ah-step.is-done { color: #86efac; }
.ah-step.is-done span { background: rgba(34,197,94,.18); color: #86efac; border: 1px solid rgba(34,197,94,.28); }

.ah-lesson-grid { flex: 1; min-height: 0; padding: 20px; display: grid; grid-template-columns: 340px minmax(460px, 1fr) 320px; gap: 16px; overflow: hidden; }
@media (min-width: 1440px) { .ah-lesson-grid { grid-template-columns: 370px minmax(560px, 1fr) 350px; } }
@media (max-width: 1100px) { .ah-app-body { height: auto; overflow: auto; } .ah-lesson-grid { grid-template-columns: 1fr; overflow: visible; } }

.ah-terminal { background: linear-gradient(180deg, #030712, #020617); color: #cbd5e1; border: 1px solid #1e293b; }
.ah-terminal-header { background: linear-gradient(180deg, #111827, #0f172a); border-bottom: 1px solid #1e293b; }
.ah-terminal-output { background: #020617; color: #cbd5e1; }
.ah-terminal-box { border: 1px solid #1e293b; background: rgba(15,23,42,.62); border-radius: 10px; padding: 12px; white-space: pre-wrap; }
.ah-test-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(30,41,59,.5); }
.ah-test-row:last-child { border-bottom: 0; }


/* Lesson left-panel support box */
.ah-left-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(30, 41, 59, .82);
  padding-top: 2px;
  color: #64748b;
}
.ah-left-help-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  color: #94a3b8;
  white-space: nowrap;
}
.ah-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  border: 1px solid rgba(51, 65, 85, .7);
  background: rgba(15, 23, 42, .45);
  color: #94a3b8;
  padding: 6px 8px;
  font-size: .70rem;
  font-weight: 800;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.ah-help-link:hover {
  border-color: rgba(96, 165, 250, .45);
  background: rgba(30, 41, 59, .62);
  color: #cbd5e1;
}

.ah-mini-code {
  border: 1px solid rgba(30, 41, 59, .9);
  background: rgba(2, 6, 23, .72);
  border-radius: 10px;
  padding: 12px;
}
.ah-mini-code-label {
  margin-bottom: 7px;
  color: #64748b;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ah-mini-code pre {
  overflow-x: auto;
  white-space: pre-wrap;
  color: #e2e8f0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  line-height: 1.7;
}
.ah-mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: .78rem;
  font-weight: 850;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}
.ah-mini-action:hover { transform: translateY(-1px); }
.ah-mini-action-run {
  border: 1px solid rgba(37, 99, 235, .42);
  background: rgba(37, 99, 235, .16);
  color: #bfdbfe;
}
.ah-mini-action-run:hover { background: rgba(37, 99, 235, .24); color: white; }
.ah-mini-action-check {
  border: 1px solid rgba(34, 197, 94, .42);
  background: rgba(34, 197, 94, .14);
  color: #bbf7d0;
}
.ah-mini-action-check:hover { background: rgba(34, 197, 94, .22); color: white; }


.ah-exercise-action-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid rgba(30, 41, 59, .72);
  padding-top: 12px;
  color: #94a3b8;
  font-size: .82rem;
  line-height: 1.65;
}
.ah-exercise-action-note i {
  margin-top: 4px;
  color: #60a5fa;
  flex: 0 0 auto;
}
.ah-exercise-action-note strong {
  color: #e2e8f0;
  font-weight: 850;
}

.CodeMirror { height: 100% !important; background: #020617 !important; color: #e2e8f0 !important; font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.65; border: 0 !important; }
.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-lines, .CodeMirror pre, .CodeMirror-gutters, .CodeMirror-gutter, .CodeMirror-linenumbers { background: #020617 !important; color: #e2e8f0 !important; }
.CodeMirror-gutters { border-right: 1px solid rgba(51,65,85,.7) !important; }
.CodeMirror-linenumber { color: #64748b !important; }
.CodeMirror-cursor { border-left: 2px solid var(--ah-yellow) !important; }
.CodeMirror-selected { background: rgba(250,204,21,.20) !important; }
.cm-s-askhackers .cm-keyword { color: #60a5fa; font-weight: 600; }
.cm-s-askhackers .cm-string { color: #facc15; }
.cm-s-askhackers .cm-number { color: #4ade80; }
.cm-s-askhackers .cm-comment { color: #64748b; font-style: italic; }
.cm-s-askhackers .cm-def, .cm-s-askhackers .cm-variable-2 { color: #93c5fd; }
.cm-s-askhackers .cm-variable, .cm-s-askhackers .cm-property { color: #e2e8f0; }
.cm-s-askhackers .cm-operator { color: #cbd5e1; }
.plain-editor-fallback { width: 100%; height: 100%; resize: none; outline: none; border: 0; background: #020617; color: #e2e8f0; font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.65; padding: 16px; }

/* Theory pages: documentation-style reading experience. Keep theory calmer than the coding workspace. */
.ah-theory-doc-page {
  padding: clamp(32px, 5vw, 72px) 0 clamp(64px, 7vw, 96px);
}
.ah-theory-doc-shell {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}
.ah-theory-flow { display: flex; align-items: center; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ah-theory-flow-minimal {
  margin-bottom: clamp(40px, 6vw, 72px);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(30,41,59,.72);
}
.ah-flow-line { width: 44px; height: 1px; background: rgba(51,65,85,.85); flex: 0 0 auto; }
.ah-doc-article {
  width: min(760px, 100%);
  margin-inline: auto;
}
.ah-doc-header {
  padding-bottom: clamp(34px, 5vw, 56px);
  border-bottom: 1px solid rgba(30,41,59,.76);
}
.ah-doc-eyebrow,
.ah-doc-section-label,
.ah-doc-status {
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 900;
}
.ah-doc-header h1 {
  margin-top: 16px;
  color: #f8fafc;
  font-size: clamp(2.55rem, 7vw, 5.45rem);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 950;
  text-wrap: balance;
}
.ah-doc-lead {
  margin-top: 26px;
  color: #cbd5e1;
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  line-height: 1.65;
  max-width: 70ch;
}
.ah-doc-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.ah-doc-link {
  color: #cbd5e1;
  font-size: .94rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(148,163,184,.35);
  text-underline-offset: 5px;
}
.ah-doc-link:hover { color: #f8fafc; text-decoration-color: #f8fafc; }
.ah-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 22px 0 clamp(44px, 6vw, 72px);
  color: #64748b;
  font-size: .86rem;
  font-weight: 700;
}
.ah-doc-content { margin-top: clamp(40px, 6vw, 64px); }
.ah-doc-content section + section { margin-top: clamp(42px, 6vw, 64px); }
.ah-doc-content h2,
.ah-doc-code-section h2,
.ah-doc-footer h2 {
  margin-top: 10px;
  color: #f8fafc;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 900;
  text-wrap: balance;
}
.ah-doc-content p,
.ah-doc-code-section p,
.ah-doc-footer p {
  margin-top: 18px;
  color: #cbd5e1;
  font-size: clamp(1.045rem, 1.5vw, 1.13rem);
  line-height: 1.75;
  max-width: 68ch;
}
.ah-doc-content p + p { margin-top: 18px; }
.ah-doc-content code,
.ah-doc-code-section code,
.ah-doc-note code,
.ah-doc-warning code,
.ah-doc-checklist code {
  color: #fde68a;
  background: rgba(250,204,21,.075);
  border: 1px solid rgba(250,204,21,.14);
  padding: 1px 6px;
  border-radius: 7px;
  font-size: .9em;
}
.ah-doc-code-section {
  margin-top: clamp(46px, 6vw, 72px);
}
.ah-doc-code-block {
  margin-top: 22px;
  border: 1px solid rgba(30,41,59,.95);
  border-radius: 18px;
  background: linear-gradient(180deg, #030712, #020617);
  color: #cbd5e1;
  padding: clamp(18px, 3vw, 26px);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  line-height: 1.8;
  overflow-x: auto;
  box-shadow: 0 20px 48px rgba(0,0,0,.22);
}
.ah-doc-note,
.ah-doc-warning {
  margin-top: clamp(34px, 5vw, 48px);
  padding: 0 0 0 18px;
  border-left: 3px solid;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.75;
  max-width: 68ch;
}
.ah-doc-note { border-color: #60a5fa; }
.ah-doc-warning { border-color: #facc15; }
.ah-doc-note strong,
.ah-doc-warning strong { color: #f8fafc; font-weight: 900; }
.ah-doc-checklist {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}
.ah-doc-checklist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: #cbd5e1;
  font-size: 1.03rem;
  line-height: 1.72;
}
.ah-doc-checklist i {
  margin-top: 4px;
  color: #86efac;
  font-size: 1rem;
}
.ah-doc-footer {
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: clamp(34px, 5vw, 48px);
  border-top: 1px solid rgba(30,41,59,.76);
}
.text-balance { text-wrap: balance; }
@media (max-width: 720px) {
  .ah-theory-flow { gap: 8px; }
  .ah-flow-line { width: 24px; }
  .ah-doc-header h1 { letter-spacing: -.05em; }
}

.ah-doc-readmore {
  margin-top: clamp(54px, 7vw, 82px);
  padding-top: clamp(32px, 5vw, 46px);
  border-top: 1px solid rgba(30,41,59,.76);
}
.ah-doc-readmore h2 {
  margin-top: 10px;
  color: #f8fafc;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 900;
  text-wrap: balance;
}
.ah-doc-readmore > p {
  margin-top: 18px;
  color: #cbd5e1;
  font-size: clamp(1.045rem, 1.5vw, 1.13rem);
  line-height: 1.75;
  max-width: 68ch;
}
.ah-doc-source-list {
  margin-top: 24px;
  display: grid;
  gap: 18px;
}
.ah-doc-source-list li {
  padding-left: 18px;
  border-left: 2px solid rgba(37,99,235,.55);
}
.ah-doc-source-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-weight: 850;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: rgba(96,165,250,.45);
  text-underline-offset: 5px;
}
.ah-doc-source-list a:hover {
  color: #bfdbfe;
  text-decoration-color: #bfdbfe;
}
.ah-doc-source-list p {
  margin-top: 7px;
  color: #94a3b8;
  font-size: .96rem;
  line-height: 1.65;
  max-width: 66ch;
}

/* Senior article refinement: theory should read like documentation, not a dashboard. */
.ah-doc-header-clean .ah-doc-lead code,
.ah-doc-meta code,
.ah-doc-source-list code {
  color: #fde68a;
  background: rgba(250,204,21,.075);
  border: 1px solid rgba(250,204,21,.14);
  padding: 1px 6px;
  border-radius: 7px;
  font-size: .9em;
}
.ah-doc-header-clean { padding-bottom: clamp(28px, 4vw, 44px); }
.ah-doc-header-clean h1 { max-width: 11ch; }
.ah-doc-toc {
  border-left: 1px solid rgba(51, 65, 85, .7);
  padding-left: 18px;
  margin: 0 0 clamp(44px, 6vw, 68px);
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(30,41,59,.72);
  color: #94a3b8;
}
.ah-doc-toc p {
  color: #f8fafc;
  font-size: .92rem;
  font-weight: 850;
  margin-bottom: 12px;
}
.ah-doc-toc ol {
  display: grid;
  gap: 8px;
  counter-reset: toc;
}
.ah-doc-toc li {
  counter-increment: toc;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: .97rem;
  line-height: 1.55;
}
.ah-doc-toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: #64748b;
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem;
}
.ah-doc-toc a {
  color: #cbd5e1;
  text-decoration: none;
}
.ah-doc-toc a:hover { color: #f8fafc; text-decoration: underline; text-underline-offset: 4px; }
.ah-doc-example {
  margin-top: 24px;
  padding-left: 18px;
  border-left: 2px solid rgba(96,165,250,.62);
}
.ah-doc-example p { margin-top: 10px; }
.ah-doc-mini-heading {
  color: #93c5fd !important;
  font-size: .86rem !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 0 !important;
}
.ah-doc-content section {
  scroll-margin-top: 96px;
}
.ah-doc-content + .ah-doc-content {
  margin-top: clamp(42px, 6vw, 64px);
}

/* Final senior article pass: calmer theory page, cleaner reading rhythm, fewer dashboard/card signals. */
.ah-theory-doc-page {
  padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 7vw, 96px);
}
.ah-article {
  width: min(760px, calc(100% - 32px));
  margin-inline: auto;
}
.ah-doc-progress {
  margin-bottom: clamp(24px, 4vw, 44px);
  color: #64748b;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-doc-header-clean {
  padding-bottom: clamp(26px, 4vw, 40px);
}
.ah-doc-header-clean h1 {
  max-width: 14ch;
  font-size: clamp(2.2rem, 4.6vw, 3.95rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.ah-doc-lead {
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.72;
  max-width: 66ch;
}
.ah-doc-meta {
  margin: 20px 0 clamp(36px, 5vw, 58px);
  gap: 8px 18px;
  font-size: .82rem;
}
.ah-doc-section {
  margin-top: clamp(40px, 5.5vw, 62px);
  scroll-margin-top: 96px;
}
.ah-doc-section:first-of-type {
  margin-top: 0;
}
.ah-doc-section h2,
.ah-doc-readmore h2,
.ah-doc-footer h2 {
  margin-top: 10px;
  color: #f8fafc;
  font-size: clamp(1.52rem, 2.5vw, 2.08rem);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 900;
  text-wrap: balance;
}
.ah-doc-section p,
.ah-doc-readmore > p,
.ah-doc-footer p {
  margin-top: 16px;
  color: #cbd5e1;
  font-size: clamp(1rem, 1.1vw, 1.075rem);
  line-height: 1.82;
  max-width: 68ch;
}
.ah-doc-section p + p {
  margin-top: 18px;
}
.ah-doc-section code,
.ah-doc-lead code,
.ah-doc-meta code,
.ah-doc-note code,
.ah-doc-warning code,
.ah-doc-checklist code,
.ah-doc-rules code,
.ah-doc-source-list code {
  color: #e0f2fe;
  background: rgba(15, 23, 42, .88);
  border: 1px solid rgba(51, 65, 85, .88);
  padding: 1px 6px;
  border-radius: 7px;
  font-size: .9em;
}
.ah-doc-code-block {
  margin-top: 22px;
  border-radius: 16px;
  font-size: .92rem;
  line-height: 1.75;
  overflow-x: auto;
}
.ah-doc-code-small {
  max-width: 620px;
  margin-top: 24px;
}
.ah-doc-note,
.ah-doc-warning {
  margin-top: 28px;
  max-width: 68ch;
}
.ah-doc-rules {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}
.ah-doc-rules li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 1.01rem;
  line-height: 1.7;
}
.ah-rule-good,
.ah-rule-bad,
.ah-rule-note {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-rule-good {
  color: #86efac;
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .22);
}
.ah-rule-bad {
  color: #fca5a5;
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .22);
}
.ah-rule-note {
  color: #bfdbfe;
  background: rgba(37, 99, 235, .10);
  border: 1px solid rgba(37, 99, 235, .24);
}
.ah-doc-readmore-compact {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: clamp(28px, 4vw, 40px);
}
.ah-doc-readmore-compact .ah-doc-source-list {
  gap: 10px;
  margin-top: 18px;
}
.ah-doc-readmore-compact .ah-doc-source-list li {
  padding-left: 0;
  border-left: 0;
}
.ah-doc-readmore-compact .ah-doc-source-list a {
  font-size: .96rem;
  color: #cbd5e1;
}
.ah-doc-readmore-compact .ah-doc-source-list a:hover {
  color: #f8fafc;
}
.ah-doc-footer-clean {
  margin-top: clamp(52px, 7vw, 80px);
  padding-top: clamp(32px, 5vw, 44px);
}
@media (max-width: 720px) {
  .ah-article { width: min(100% - 24px, 760px); }
  .ah-doc-progress { margin-bottom: 28px; }
  .ah-doc-header-clean h1 { font-size: clamp(2.1rem, 13vw, 3.25rem); }
  .ah-doc-toc { margin-bottom: 36px; }
}

/* UI 9/10 polish: calmer premium article rhythm, stronger accessibility, cleaner docs feeling. */
.ah-skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 999;
  transform: translateY(-140%);
  border-radius: 999px;
  background: #facc15;
  color: #020617;
  padding: 10px 14px;
  font-size: .84rem;
  font-weight: 900;
  transition: transform .16s ease;
}
.ah-skip-link:focus { transform: translateY(0); }
.ah-theory-doc-page {
  position: relative;
  isolation: isolate;
  padding-top: clamp(34px, 4.6vw, 68px);
}
.ah-theory-doc-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 360px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .12), transparent 30rem),
    linear-gradient(180deg, rgba(15, 23, 42, .36), transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.ah-article {
  width: min(780px, calc(100% - 40px));
}
.ah-doc-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(30px, 4vw, 52px);
  letter-spacing: 0;
  text-transform: none;
}
.ah-doc-progress span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(51, 65, 85, .72);
  border-radius: 999px;
  background: rgba(15, 23, 42, .42);
  color: #94a3b8;
  padding: 4px 10px;
  font-size: .76rem;
  font-weight: 850;
}
.ah-doc-progress span:nth-child(2) {
  border-color: rgba(250, 204, 21, .34);
  background: rgba(250, 204, 21, .075);
  color: #fde68a;
}
.ah-doc-header-clean {
  padding-bottom: clamp(24px, 4vw, 42px);
  border-bottom-color: rgba(30, 41, 59, .55);
}
.ah-doc-header-clean h1 {
  max-width: 13.5ch;
  font-size: clamp(2.35rem, 4.7vw, 4.18rem);
  letter-spacing: -.058em;
}
.ah-doc-lead {
  max-width: 64ch;
  color: #dbe4ef;
}
.ah-doc-lead code,
.ah-doc-section code,
.ah-doc-note code,
.ah-doc-warning code,
.ah-doc-checklist code,
.ah-doc-rules code,
.ah-doc-source-list code {
  color: #dbeafe;
  background: rgba(15, 23, 42, .72);
  border-color: rgba(71, 85, 105, .66);
}
.ah-doc-meta {
  position: relative;
  margin: 18px 0 clamp(28px, 4vw, 44px);
  color: #7f8da3;
}
.ah-doc-meta span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 18px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .7);
  vertical-align: middle;
}
.ah-doc-goals {
  margin-bottom: clamp(34px, 5vw, 54px);
  padding: 18px 0;
  border-top: 1px solid rgba(30, 41, 59, .62);
  border-bottom: 1px solid rgba(30, 41, 59, .62);
}
.ah-doc-goals p {
  margin: 0 0 12px;
  color: #f8fafc;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ah-doc-goals ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ah-doc-goals li {
  position: relative;
  color: #cbd5e1;
  font-size: .95rem;
  line-height: 1.55;
  padding-left: 18px;
}
.ah-doc-goals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .10);
}
.ah-doc-toc {
  margin-bottom: clamp(40px, 5vw, 62px);
  padding: 18px 0;
  border-left: 0;
  border-top: 1px solid rgba(30, 41, 59, .62);
  border-bottom: 1px solid rgba(30, 41, 59, .62);
}
.ah-doc-toc p { margin-bottom: 14px; }
.ah-doc-toc ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px;
}
.ah-doc-toc a {
  text-underline-offset: 5px;
}
.ah-doc-section {
  margin-top: clamp(46px, 6vw, 72px);
}
.ah-doc-section h2,
.ah-doc-readmore h2,
.ah-doc-footer h2 {
  font-size: clamp(1.58rem, 2.6vw, 2.16rem);
}
.ah-doc-section p,
.ah-doc-readmore > p,
.ah-doc-footer p {
  color: #d3dce8;
  line-height: 1.84;
}
.ah-doc-code-block {
  position: relative;
  padding-top: 44px;
  border-color: rgba(51, 65, 85, .82);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .58), transparent 42px),
    linear-gradient(180deg, #030712, #020617);
  box-shadow: 0 22px 58px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035);
}
.ah-doc-code-block::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 16px 0 0 #facc15, 32px 0 0 #22c55e;
  opacity: .88;
}
.ah-doc-note,
.ah-doc-warning {
  padding-left: 20px;
  color: #d5deeb;
  background: linear-gradient(90deg, rgba(15, 23, 42, .36), transparent 70%);
  padding-top: 2px;
  padding-bottom: 2px;
}
.ah-doc-note { border-color: #60a5fa; }
.ah-doc-warning { border-color: #f59e0b; }
.ah-doc-checklist {
  border-top: 1px solid rgba(30, 41, 59, .52);
  padding-top: 18px;
}
.ah-doc-checklist li {
  grid-template-columns: 22px minmax(0, 1fr);
}
.ah-doc-rules li {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(30, 41, 59, .44);
}
.ah-doc-rules li:last-child { border-bottom: 0; padding-bottom: 0; }
.ah-doc-readmore-compact {
  border-top-color: rgba(30, 41, 59, .58);
}
.ah-doc-readmore-compact .ah-doc-source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.ah-doc-readmore-compact .ah-doc-source-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9fb0c8;
  font-weight: 780;
  text-decoration-color: rgba(148, 163, 184, .28);
}
.ah-doc-next-step {
  position: relative;
  border-top-color: transparent;
  padding-top: clamp(34px, 5vw, 48px);
}
.ah-doc-next-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(250,204,21,.55), rgba(37,99,235,.5), transparent);
}
.ah-doc-next-step .ah-doc-status {
  color: #fde68a;
}
.ah-doc-next-step .ah-doc-actions {
  margin-top: 24px;
}
.ah-doc-next-step .ah-btn-primary {
  min-height: 48px;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(250, 204, 21, .12);
}
@media (max-width: 760px) {
  .ah-article { width: min(100% - 28px, 780px); }
  .ah-doc-meta span:not(:last-child)::after { display: none; }
  .ah-doc-goals ul,
  .ah-doc-toc ol,
  .ah-doc-readmore-compact .ah-doc-source-list { grid-template-columns: 1fr; }
  .ah-doc-goals { padding: 16px 0; }
  .ah-doc-code-block { margin-left: -2px; margin-right: -2px; border-radius: 14px; font-size: .86rem; }
  .ah-doc-actions { flex-direction: column; align-items: stretch; }
  .ah-doc-actions .ah-btn, .ah-doc-actions .ah-doc-link { width: 100%; text-align: center; justify-content: center; }
}

/* HTML/article readability pass: fewer UI cards, calmer reading surface, more documentation-like. */
.ah-theory-doc-page {
  padding-top: clamp(24px, 3.6vw, 50px);
}
.ah-theory-doc-page::before {
  height: 260px;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .08), transparent 28rem),
    linear-gradient(180deg, rgba(15, 23, 42, .18), transparent);
}
.ah-article {
  width: min(720px, calc(100% - 40px));
}
.ah-doc-progress-quiet,
.ah-doc-progress.ah-doc-progress-quiet {
  display: block;
  margin-bottom: clamp(22px, 3vw, 34px);
  color: #7f8da3;
  font-size: .83rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.ah-doc-progress-quiet span { display: none; }
.ah-doc-header-clean {
  padding-bottom: clamp(18px, 3vw, 28px);
  border-bottom: 0;
}
.ah-doc-header-clean h1 {
  max-width: 15ch;
  font-size: clamp(2.05rem, 4.2vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -.048em;
}
.ah-doc-eyebrow {
  margin-bottom: 14px;
  color: #93c5fd;
}
.ah-doc-lead {
  margin-top: 22px;
  max-width: 65ch;
  color: #d6e0ec;
  font-size: clamp(1.06rem, 1.15vw, 1.17rem);
  line-height: 1.78;
}
.ah-doc-meta {
  margin: 18px 0 30px;
  color: #8b9ab0;
  font-size: .82rem;
}
.ah-doc-intro-list {
  margin: 28px 0 34px;
}
.ah-doc-intro-list h2 {
  color: #f8fafc;
  font-size: .88rem;
  line-height: 1.5;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-doc-intro-list ul {
  margin-top: 12px;
  padding-left: 1.25rem;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.85;
}
.ah-doc-intro-list li + li { margin-top: 3px; }
.ah-doc-toc-plain,
.ah-doc-toc.ah-doc-toc-plain {
  margin: 30px 0 clamp(42px, 5vw, 60px);
  padding: 0 0 0 18px;
  border: 0;
  border-left: 2px solid rgba(51, 65, 85, .72);
  background: transparent;
}
.ah-doc-toc-plain p {
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: .92rem;
  line-height: 1.65;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.ah-doc-toc-plain ol,
.ah-doc-toc.ah-doc-toc-plain ol {
  display: block;
  columns: 1;
  margin: 0;
  padding-left: 1.15rem;
  list-style: decimal;
  counter-reset: none;
}
.ah-doc-toc-plain li,
.ah-doc-toc.ah-doc-toc-plain li {
  display: list-item;
  margin-top: 4px;
  color: #64748b;
  font-size: .98rem;
  line-height: 1.65;
}
.ah-doc-toc-plain li::before { content: none; }
.ah-doc-toc-plain a {
  color: #b8c4d6;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, .22);
  text-underline-offset: 4px;
}
.ah-doc-section {
  margin-top: clamp(42px, 5vw, 64px);
}
.ah-doc-section-label {
  margin-bottom: 8px;
  color: #7dd3fc;
  font-size: .77rem;
  letter-spacing: .11em;
}
.ah-doc-section h2,
.ah-doc-readmore h2,
.ah-doc-footer h2 {
  margin-top: 0;
  font-size: clamp(1.45rem, 2.35vw, 1.95rem);
  line-height: 1.24;
  letter-spacing: -.028em;
}
.ah-doc-section p,
.ah-doc-readmore > p,
.ah-doc-footer p {
  max-width: 65ch;
  color: #d2dbe8;
  font-size: clamp(1.01rem, 1.02vw, 1.065rem);
  line-height: 1.86;
}
.ah-doc-section p + p { margin-top: 16px; }
.ah-doc-code-block {
  margin: 24px 0 26px;
  border-radius: 12px;
  font-size: .91rem;
  line-height: 1.78;
  box-shadow: none;
}
.ah-doc-code-block::before {
  opacity: .68;
}
.ah-doc-inline-note,
.ah-doc-note,
.ah-doc-warning {
  margin-top: 24px;
  max-width: 65ch;
  padding: 0 0 0 18px;
  border-left-width: 2px;
  background: transparent;
  color: #d2dbe8;
  line-height: 1.78;
}
.ah-doc-inline-note strong,
.ah-doc-note strong,
.ah-doc-warning strong {
  display: inline;
  margin-right: 6px;
  color: #f8fafc;
  font-weight: 850;
}
.ah-doc-rules {
  display: block;
  margin-top: 18px;
  padding-left: 1.1rem;
  list-style: none;
}
.ah-doc-rules li {
  display: list-item;
  padding-bottom: 9px;
  color: #d2dbe8;
  line-height: 1.82;
  border-bottom: 0;
}
.ah-doc-rules li + li { margin-top: 5px; }
.ah-rule-good,
.ah-rule-bad,
.ah-rule-note {
  margin-right: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: .72rem;
}
.ah-doc-checklist {
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}
.ah-doc-checklist li {
  min-height: 0;
  margin-top: 12px;
  color: #d2dbe8;
  line-height: 1.75;
}
.ah-doc-checklist i {
  width: 20px;
  height: 20px;
  margin-top: .15rem;
  background: transparent;
  color: #86efac;
  box-shadow: none;
}
.ah-doc-readmore-compact {
  margin-top: clamp(46px, 6vw, 68px);
  padding-top: 28px;
  border-top: 1px solid rgba(30, 41, 59, .66);
}
.ah-doc-readmore-compact .ah-doc-source-list {
  display: block;
  margin-top: 14px;
  padding-left: 1.1rem;
  list-style: disc;
}
.ah-doc-readmore-compact .ah-doc-source-list li {
  display: list-item;
  margin-top: 8px;
  color: #64748b;
}
.ah-doc-readmore-compact .ah-doc-source-list a {
  display: inline;
  color: #aebcd0;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, .28);
  text-underline-offset: 4px;
}
.ah-doc-readmore-compact .ah-doc-source-list i { display: none; }
.ah-doc-next-step {
  margin-top: clamp(50px, 7vw, 76px);
  padding-top: 32px;
}
.ah-doc-next-step::before {
  background: rgba(51, 65, 85, .72);
}
.ah-doc-next-step .ah-doc-status {
  color: #94a3b8;
}
.ah-doc-next-step .ah-btn-primary {
  min-height: 46px;
  border-radius: 12px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .ah-article { width: min(100% - 28px, 720px); }
  .ah-doc-header-clean h1 { font-size: clamp(2rem, 11vw, 3.05rem); }
  .ah-doc-meta { display: block; }
  .ah-doc-meta span { display: block; margin-top: 5px; }
  .ah-doc-code-block { margin-left: 0; margin-right: 0; }
}

/* Cleaner exercise reading layout: left panel should feel like simple HTML instructions, not cards. */
.ah-left-article-header {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(30, 41, 59, .82);
}
.ah-left-article-header h2 {
  margin-top: 5px;
  color: #f8fafc;
  font-size: 1.36rem;
  line-height: 1.16;
  font-weight: 850;
  letter-spacing: -.035em;
}
.ah-left-article-header p {
  margin-top: 10px;
  color: #94a3b8;
  font-size: .95rem;
  line-height: 1.72;
}
.ah-exercise-list {
  margin-top: 8px;
}
.ah-exercise-item {
  border-bottom: 1px solid rgba(30, 41, 59, .78);
}
.ah-exercise-item:last-child {
  border-bottom: 0;
}
.ah-exercise-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 17px 0 14px;
  text-align: left;
}
.ah-exercise-label {
  color: #64748b;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.ah-exercise-title {
  color: #e2e8f0;
  font-size: .96rem;
  font-weight: 750;
  line-height: 1.35;
}
.ah-exercise-item.is-active .ah-exercise-label,
.ah-exercise-item.is-active .ah-exercise-title {
  color: #bfdbfe;
}
.ah-exercise-done {
  color: #86efac;
  font-size: .70rem;
  font-weight: 850;
}
.ah-exercise-body {
  padding: 0 0 18px 0;
  color: #cbd5e1;
  font-size: .94rem;
  line-height: 1.78;
}
.ah-exercise-steps {
  margin: 12px 0 0 18px;
  color: #cbd5e1;
}
.ah-exercise-steps li + li {
  margin-top: 4px;
}
.ah-exercise-goal {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid rgba(34, 197, 94, .65);
  color: #94a3b8;
  font-size: .88rem;
  line-height: 1.65;
}
.ah-exercise-goal strong {
  color: #bbf7d0;
}
.ah-exercise-action-note {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(30, 41, 59, .72);
  color: #94a3b8;
  font-size: .82rem;
  line-height: 1.65;
}
.ah-exercise-action-note strong {
  color: #e2e8f0;
  font-weight: 850;
}
.ah-mini-code {
  margin-top: 14px;
  border: 0;
  border-left: 2px solid rgba(96, 165, 250, .55);
  background: rgba(2, 6, 23, .58);
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
}
.ah-mini-code figcaption,
.ah-mini-code-label {
  margin-bottom: 7px;
  color: #64748b;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ah-mini-code pre {
  overflow-x: auto;
  white-space: pre-wrap;
  color: #e2e8f0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.7;
}
.ah-left-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(30, 41, 59, .78);
}
.ah-left-section h3 {
  color: #f8fafc;
  font-size: .98rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.ah-left-section ol {
  margin-left: 18px;
  color: #cbd5e1;
  font-size: .94rem;
  line-height: 1.78;
}
.ah-left-section li + li { margin-top: 5px; }
.ah-completion-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(34, 197, 94, .38);
  color: #cbd5e1;
}
.ah-completion-note > strong {
  color: #86efac;
  display: block;
  font-size: .98rem;
  margin-bottom: 6px;
}
.ah-completion-note p {
  color: #94a3b8;
  font-size: .88rem;
  line-height: 1.65;
}
.ah-completion-note div {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

/* Lesson Variables: full-page HTML workspace polish
   Goal: make the lesson feel like one large HTML/app page, not separated cards. */
.ah-lesson-pagebar {
  min-height: 58px;
  background: rgba(2, 6, 23, .96) !important;
  backdrop-filter: blur(14px);
}

.ah-html-workspace {
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(320px, 24vw) minmax(520px, 1fr) minmax(300px, 23vw);
  background:
    linear-gradient(90deg, rgba(15,23,42,.72), rgba(2,6,23,.96) 28%, rgba(2,6,23,1));
}

@media (min-width: 1440px) {
  .ah-html-workspace {
    grid-template-columns: 390px minmax(650px, 1fr) 380px;
  }
}

.ah-html-left,
.ah-html-editor,
.ah-html-right,
.ah-html-terminal,
.ah-html-tests {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ah-html-left {
  background: rgba(11, 17, 32, .72);
  border-right: 1px solid rgba(30, 41, 59, .9);
}

.ah-html-left-head {
  padding: 24px 24px 18px;
  border-bottom: 1px solid rgba(30, 41, 59, .8);
  background: rgba(2, 6, 23, .28);
}

.ah-html-left-head p {
  max-width: 34ch;
}

.ah-html-left-scroll {
  padding: 24px;
}

.ah-html-left-footer {
  padding: 16px 24px 18px;
  border-top: 1px solid rgba(30, 41, 59, .86);
  background: rgba(2, 6, 23, .4);
}

.ah-html-editor {
  background: #020617;
  border-right: 1px solid rgba(30, 41, 59, .9);
}

.ah-html-editor-topbar,
.ah-html-editor-actions {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(30, 41, 59, .86);
  background: rgba(15, 23, 42, .52);
}

.ah-html-editor-actions {
  border-top: 1px solid rgba(30, 41, 59, .86);
  border-bottom: 0;
}

.ah-html-editor-mount {
  background: #020617;
}

.ah-html-right {
  background: rgba(2, 6, 23, .82);
}

.ah-html-terminal {
  border: 0;
  border-bottom: 1px solid rgba(30, 41, 59, .9);
  background: #020617;
}

.ah-html-tests {
  height: 34%;
  min-height: 190px;
  border: 0;
  background: #020617;
}

.ah-html-tests > div:first-child {
  background: rgba(15,23,42,.52) !important;
}

/* Make the left instructions read more like normal HTML content. */
.ah-html-workspace .ah-left-article-header {
  padding-bottom: 20px;
  margin-bottom: 4px;
}

.ah-html-workspace .ah-left-article-header h2 {
  font-size: 1.45rem;
  letter-spacing: -.04em;
}

.ah-html-workspace .ah-left-article-header p,
.ah-html-workspace .ah-exercise-body,
.ah-html-workspace .ah-left-section ol {
  font-size: .96rem;
  line-height: 1.82;
}

.ah-html-workspace .ah-exercise-toggle {
  padding: 18px 0 15px;
}

.ah-html-workspace .ah-exercise-body {
  padding-bottom: 22px;
}

.ah-html-workspace .ah-mini-code {
  margin-top: 15px;
  padding: 12px 14px;
  background: rgba(2, 6, 23, .74);
}

.ah-html-workspace .ah-left-help {
  padding-top: 0;
  border-top: 0;
}

.ah-html-workspace #nextButton:disabled {
  cursor: not-allowed;
  filter: grayscale(.2);
}

@media (max-width: 1100px) {
  .ah-html-workspace {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ah-html-left,
  .ah-html-editor,
  .ah-html-right {
    border-right: 0;
    border-bottom: 1px solid rgba(30, 41, 59, .9);
  }
  .ah-html-left-scroll { max-height: none; }
  .ah-html-editor { min-height: 620px; }
  .ah-html-right { min-height: 560px; }
  .ah-html-tests { height: auto; }
}

@media (max-width: 720px) {
  .ah-lesson-pagebar { padding-inline: 16px; }
  .ah-html-left-head,
  .ah-html-left-scroll,
  .ah-html-left-footer { padding-left: 18px; padding-right: 18px; }
  .ah-html-editor-actions { align-items: stretch; flex-direction: column; }
  .ah-html-editor-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .ah-html-editor-actions .ah-btn { width: 100%; }
}


/* Lesson Variables: senior clean HTML/article layout
   Less borders, calmer reading surface, real editor + terminal. */
.ah-lesson-pagebar {
  border-bottom: 0 !important;
  background: #020617 !important;
  box-shadow: none !important;
}
.ah-lesson-pagebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51,65,85,.55), transparent);
}

.ah-html-workspace {
  background:
    radial-gradient(circle at 34% 0%, rgba(37, 99, 235, .08), transparent 34%),
    #020617 !important;
  gap: 0 !important;
}

.ah-html-left {
  background: #020617 !important;
  border-right: 0 !important;
}
.ah-html-left-head,
.ah-html-left-footer {
  background: transparent !important;
  border: 0 !important;
}
.ah-html-left-head {
  padding: 28px 30px 12px !important;
}
.ah-html-left-scroll {
  padding: 20px 30px 28px !important;
}
.ah-html-left-footer {
  padding: 14px 30px 24px !important;
}
.ah-html-left-head p {
  max-width: none !important;
  color: #94a3b8;
}
.ah-left-article-header {
  border: 0 !important;
  padding-bottom: 20px !important;
  margin-bottom: 6px !important;
}
.ah-left-article-header h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.28rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
  max-width: 11ch;
}
.ah-left-article-header p {
  max-width: 42ch;
  font-size: .98rem !important;
  line-height: 1.78 !important;
}

.ah-exercise-list {
  margin-top: 10px !important;
}
.ah-exercise-item {
  border: 0 !important;
  padding: 16px 0 18px !important;
}
.ah-exercise-item + .ah-exercise-item {
  border-top: 0 !important;
}
.ah-exercise-toggle {
  padding: 0 0 9px !important;
  grid-template-columns: 74px 1fr auto !important;
}
.ah-exercise-label {
  color: #64748b !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
}
.ah-exercise-title {
  color: #f1f5f9 !important;
  font-size: 1.03rem !important;
}
.ah-exercise-item.is-active .ah-exercise-label {
  color: #60a5fa !important;
}
.ah-exercise-item.is-active .ah-exercise-title {
  color: #f8fafc !important;
}
.ah-exercise-done {
  color: #86efac !important;
}
.ah-exercise-body {
  padding: 0 0 0 74px !important;
  color: #cbd5e1 !important;
  font-size: .96rem !important;
  line-height: 1.82 !important;
  max-width: 48ch;
}
.ah-exercise-steps {
  margin: 14px 0 0 1.2rem !important;
}
.ah-exercise-goal,
.ah-exercise-action-note {
  border: 0 !important;
  padding: 0 !important;
  margin-top: 13px !important;
  color: #94a3b8 !important;
}
.ah-exercise-goal strong,
.ah-exercise-action-note strong {
  color: #e2e8f0 !important;
}
.ah-mini-code {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
}
.ah-mini-code figcaption,
.ah-mini-code-label {
  color: #64748b !important;
}
.ah-mini-code pre {
  display: inline-block;
  min-width: min(100%, 240px);
  border-left: 2px solid rgba(96,165,250,.55);
  padding: 9px 0 9px 14px;
  background: transparent;
  color: #e5e7eb;
  font-size: .82rem !important;
}
.ah-left-section {
  border: 0 !important;
  padding: 22px 0 !important;
}
.ah-left-help {
  font-size: .76rem !important;
  color: #64748b !important;
}
.ah-help-link {
  color: #94a3b8 !important;
}
.ah-help-link:hover { color: #e2e8f0 !important; }

/* Editor should feel like a real code editor, not a card. */
.ah-html-editor {
  background: #050816 !important;
  border-right: 0 !important;
  box-shadow: inset 1px 0 0 rgba(15,23,42,.9), inset -1px 0 0 rgba(15,23,42,.9) !important;
}
.ah-html-editor-topbar,
.ah-html-editor-actions {
  background: #0b1020 !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(15,23,42,.95) !important;
}
.ah-html-editor-actions {
  box-shadow: inset 0 1px 0 rgba(15,23,42,.95) !important;
}
.ah-html-editor-topbar > div:first-child {
  border: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
}
.ah-html-editor-mount {
  background: #050816 !important;
}
.CodeMirror {
  background: #050816 !important;
  color: #e5e7eb !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror pre {
  background: #050816 !important;
}
.CodeMirror-gutters,
.CodeMirror-gutter,
.CodeMirror-linenumbers {
  background: #070b18 !important;
  border: 0 !important;
}
.CodeMirror-gutters {
  box-shadow: inset -1px 0 0 rgba(30,41,59,.75) !important;
}
.CodeMirror-linenumber { color: #4b5563 !important; }
.CodeMirror-cursor { border-left-color: #facc15 !important; }
.CodeMirror-activeline-background { background: rgba(15,23,42,.5) !important; }

/* Real terminal: plain prompt/output, no boxed fake cards. */
.ah-html-right {
  background: #020617 !important;
}
.ah-html-terminal {
  background: #050505 !important;
  color: #d1d5db !important;
  border: 0 !important;
  box-shadow: inset 1px 0 0 rgba(15,23,42,.8) !important;
}
.ah-terminal-header {
  background: #111827 !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(31,41,55,.85) !important;
}
.ah-terminal-output {
  background: #050505 !important;
  color: #d1d5db !important;
  font-size: 12.5px !important;
  line-height: 1.75 !important;
}
.ah-terminal-box {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.ah-terminal-prompt { color: #22c55e; }
.ah-terminal-path { color: #60a5fa; }
.ah-terminal-command { color: #f9fafb; }
.ah-terminal-muted { color: #6b7280; }
.ah-terminal-output-block {
  margin-top: 8px;
  white-space: pre-wrap;
  color: #e5e7eb;
}
.ah-terminal-note {
  margin-top: 14px;
  color: #9ca3af;
}
.ah-html-tests {
  background: #050505 !important;
  border: 0 !important;
  box-shadow: inset 1px 0 0 rgba(15,23,42,.8), inset 0 1px 0 rgba(31,41,55,.85) !important;
}
.ah-html-tests > div:first-child {
  background: #0b0f19 !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(31,41,55,.85) !important;
}
#testOutput {
  background: #050505 !important;
}
.ah-test-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: baseline;
}

@media (max-width: 1100px) {
  .ah-html-editor,
  .ah-html-right,
  .ah-html-left { box-shadow: none !important; }
  .ah-exercise-body { padding-left: 0 !important; max-width: 62ch; }
  .ah-exercise-toggle { grid-template-columns: auto 1fr auto !important; }
}


/* Lesson Variables: ghosty action polish
   Keep the workspace calm. The editor actions are visible, but they no longer shout. */
.ah-html-left-head p {
  font-size: .9rem !important;
  line-height: 1.65 !important;
  color: #64748b !important;
}
.ah-exercise-action-note {
  margin-top: 12px !important;
  max-width: 38ch;
  font-size: .8rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}
.ah-exercise-action-note strong {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}
.ah-html-editor-topbar,
.ah-html-editor-actions {
  background: rgba(5, 8, 22, .86) !important;
  box-shadow: none !important;
}
.ah-html-editor-topbar {
  padding: 11px 18px !important;
  border-bottom: 1px solid rgba(30, 41, 59, .42) !important;
}
.ah-html-editor-actions {
  padding: 12px 18px !important;
  border-top: 1px solid rgba(30, 41, 59, .42) !important;
}
.ah-editor-file-chip {
  opacity: .92;
}
.ah-html-editor-actions .ah-btn {
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  transform: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}
.ah-html-editor-actions .ah-btn:hover {
  transform: none !important;
}
.ah-html-editor-actions .ah-btn-ghost {
  border: 1px solid rgba(100, 116, 139, .22) !important;
  background: rgba(15, 23, 42, .18) !important;
  color: #94a3b8 !important;
}
.ah-html-editor-actions .ah-btn-ghost:hover {
  border-color: rgba(148, 163, 184, .38) !important;
  background: rgba(15, 23, 42, .42) !important;
  color: #e2e8f0 !important;
}
.ah-html-editor-actions .ah-btn-secondary {
  border: 1px solid rgba(96, 165, 250, .28) !important;
  background: rgba(37, 99, 235, .13) !important;
  color: #bfdbfe !important;
}
.ah-html-editor-actions .ah-btn-secondary:hover {
  border-color: rgba(147, 197, 253, .42) !important;
  background: rgba(37, 99, 235, .21) !important;
  color: #eff6ff !important;
}
.ah-html-editor-actions .ah-btn-success {
  border: 1px solid rgba(34, 197, 94, .25) !important;
  background: rgba(22, 163, 74, .12) !important;
  color: #bbf7d0 !important;
}
.ah-html-editor-actions .ah-btn-success:hover {
  border-color: rgba(134, 239, 172, .38) !important;
  background: rgba(22, 163, 74, .2) !important;
  color: #f0fdf4 !important;
}
.ah-html-editor-actions .ah-btn i {
  font-size: .9rem;
  opacity: .82;
}
.ah-html-editor-actions > div {
  gap: 8px !important;
}
.ah-html-editor-actions::before {
  content: "";
  display: block;
  flex: 1 1 auto;
}
.ah-html-editor-actions #resetButton {
  margin-right: auto;
}
.ah-terminal-header,
.ah-html-tests > div:first-child {
  background: rgba(10, 15, 26, .92) !important;
}
.ah-terminal-output,
#testOutput {
  color: #cbd5e1 !important;
}
@media (max-width: 720px) {
  .ah-html-editor-actions {
    gap: 10px !important;
  }
  .ah-html-editor-actions::before { display: none; }
  .ah-html-editor-actions .ah-btn {
    padding: 10px 12px !important;
  }
}

/* Lesson Variables: quieter pro-tool navigation and link-style progression */
.ah-subtle-link {
  color: #64748b;
  text-decoration: none;
  transition: color .15s ease;
}
.ah-subtle-link:hover { color: #cbd5e1; }
.ah-left-progressline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: .72rem;
  color: #64748b;
  letter-spacing: .01em;
}
.ah-left-progressline #progressLabel { color: #94a3b8; }
.ah-next-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: .86rem;
  font-weight: 700;
  text-align: left;
  transition: color .15s ease, opacity .15s ease;
}
.ah-next-link:hover:not(:disabled) { color: #f8fafc; }
.ah-next-link:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.ah-next-link i { font-size: .92rem; opacity: .75; }
.ah-html-left-footer { gap: 10px; }
.ah-terminal-header .font-mono { letter-spacing: 0; }
.ah-terminal-header {
  background: #090d14 !important;
}
.ah-terminal-header button {
  color: #64748b !important;
  text-transform: lowercase;
}
.ah-terminal-prompt { color: #4ade80 !important; }
.ah-terminal-path { color: #93c5fd !important; }
.ah-terminal-muted { color: #6b7280 !important; }
.ah-terminal-command { color: #e5e7eb !important; }


/* Lesson Variables: developer learning tool refinement
   Cleaner left reading area, no instructional callout under exercises, subtle command toolbar. */
.ah-html-workspace {
  background: #020617 !important;
  gap: 0 !important;
  padding: 0 !important;
}
.ah-lesson-pagebar {
  background: #020617 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .95) !important;
  box-shadow: none !important;
}
.ah-lesson-pagebar::after { display: none !important; }
.ah-html-left {
  background: #020617 !important;
  box-shadow: inset -1px 0 0 rgba(15,23,42,.9) !important;
}
.ah-html-left-head {
  padding: 24px 24px 18px !important;
  border-bottom: 0 !important;
}
.ah-html-left-scroll { padding: 0 24px 22px !important; }
.ah-left-article-header {
  padding: 8px 0 18px !important;
  border-bottom: 1px solid rgba(30,41,59,.55) !important;
  margin-bottom: 4px !important;
}
.ah-left-article-header h2 {
  font-size: 1.15rem !important;
  letter-spacing: -.025em !important;
}
.ah-left-article-header p {
  max-width: 42ch !important;
  color: #64748b !important;
}
.ah-exercise-list { border-top: 0 !important; }
.ah-exercise-item {
  border-bottom: 1px solid rgba(30,41,59,.46) !important;
}
.ah-exercise-toggle {
  padding-block: 18px !important;
  gap: 12px !important;
}
.ah-exercise-label {
  font-size: .68rem !important;
  color: #475569 !important;
}
.ah-exercise-title {
  font-size: .98rem !important;
  color: #dbeafe !important;
  font-weight: 700 !important;
}
.ah-exercise-body {
  padding: 0 0 20px 62px !important;
  max-width: 43ch !important;
  font-size: .91rem !important;
  line-height: 1.75 !important;
  color: #94a3b8 !important;
}
.ah-exercise-steps,
.ah-exercise-goal,
.ah-mini-code { margin-top: 12px !important; }
.ah-exercise-action-note { display: none !important; }
.ah-mini-code pre {
  color: #cbd5e1 !important;
  font-size: .75rem !important;
  line-height: 1.65 !important;
}
.ah-html-left-footer {
  padding: 14px 24px 18px !important;
  border-top: 1px solid rgba(30,41,59,.55) !important;
  background: #020617 !important;
}
.ah-left-help {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #475569 !important;
}
.ah-left-help-label { color: #475569 !important; font-weight: 600 !important; }
.ah-help-link { color: #64748b !important; font-size: .76rem !important; }
.ah-help-link:hover { color: #cbd5e1 !important; }
.ah-left-progressline { display: none !important; }
.ah-next-link {
  color: #64748b !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
  padding: 2px 0 !important;
}
.ah-next-link:hover:not(:disabled) { color: #cbd5e1 !important; }
.ah-html-editor {
  background: #020617 !important;
  box-shadow: none !important;
}
.ah-html-editor-topbar {
  height: 48px !important;
  background: #020617 !important;
  border-bottom: 1px solid rgba(15,23,42,.95) !important;
}
.ah-html-editor-mount,
.CodeMirror {
  background: #030712 !important;
}
.ah-html-editor-actions {
  min-height: 48px !important;
  padding: 8px 12px !important;
  background: #020617 !important;
  border-top: 1px solid rgba(15,23,42,.95) !important;
  box-shadow: none !important;
}
.ah-html-editor-actions::before { display: none !important; }
.ah-tool-action {
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  transition: color .16s ease, background .16s ease;
}
.ah-tool-action i { font-size: .86rem; opacity: .78; }
.ah-tool-action:hover { background: rgba(15,23,42,.72); color: #cbd5e1; }
.ah-tool-action-run { color: #93c5fd; }
.ah-tool-action-run:hover { color: #dbeafe; background: rgba(30,64,175,.16); }
.ah-tool-action-check { color: #86efac; }
.ah-tool-action-check:hover { color: #dcfce7; background: rgba(22,101,52,.16); }
.ah-html-right {
  background: #020617 !important;
  box-shadow: inset 1px 0 0 rgba(15,23,42,.95) !important;
}
.ah-html-terminal,
.ah-html-tests {
  background: #020617 !important;
  box-shadow: none !important;
}
.ah-terminal-header,
.ah-html-tests > div:first-child {
  background: #020617 !important;
  border-bottom: 1px solid rgba(15,23,42,.95) !important;
  box-shadow: none !important;
}
.ah-terminal-output,
#testOutput {
  background: #020617 !important;
}
@media (max-width: 1100px) {
  .ah-html-workspace { gap: 0 !important; }
  .ah-html-left-scroll { padding-inline: 18px !important; }
  .ah-html-left-head { padding-inline: 18px !important; }
  .ah-exercise-body { padding-left: 0 !important; max-width: 64ch !important; }
}

/* Senior developer-tool pass: no visual buttons/cards, cleaner workspace. */
.ah-html-workspace {
  background: #020617 !important;
}
.ah-html-left {
  background: #020617 !important;
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, .72) !important;
}
.ah-html-left-head,
.ah-html-left-footer,
.ah-html-editor-topbar,
.ah-html-editor-actions,
.ah-terminal-header,
.ah-html-tests > div:first-child {
  background: #020617 !important;
  border-color: rgba(15, 23, 42, .88) !important;
}
.ah-left-article-header {
  border-bottom: 0 !important;
  padding-bottom: 22px !important;
}
.ah-left-article-header h2 {
  color: #f8fafc !important;
  font-size: 1.12rem !important;
  line-height: 1.25 !important;
}
.ah-left-article-header p {
  color: #64748b !important;
  font-size: .88rem !important;
  line-height: 1.7 !important;
}
.ah-exercise-item {
  border-bottom: 1px solid rgba(15, 23, 42, .92) !important;
}
.ah-exercise-item.is-active {
  background: transparent !important;
}
.ah-exercise-toggle {
  border: 0 !important;
  background: transparent !important;
  padding: 18px 0 !important;
}
.ah-exercise-toggle:hover {
  background: transparent !important;
}
.ah-exercise-title {
  color: #e2e8f0 !important;
  font-size: .96rem !important;
  font-weight: 680 !important;
}
.ah-exercise-label {
  color: #475569 !important;
  font-family: "JetBrains Mono", monospace !important;
}
.ah-exercise-body {
  padding: 0 0 22px 0 !important;
  max-width: 46ch !important;
  color: #94a3b8 !important;
  font-size: .91rem !important;
  line-height: 1.78 !important;
}
.ah-exercise-steps {
  padding-left: 18px !important;
}
.ah-exercise-steps li {
  padding-left: 4px !important;
}
.ah-mini-code {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(71, 85, 105, .58) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 14px !important;
  margin-top: 16px !important;
}
.ah-mini-code figcaption {
  color: #64748b !important;
  font-size: .68rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.ah-mini-code pre {
  color: #cbd5e1 !important;
  background: transparent !important;
}
.ah-exercise-goal {
  color: #64748b !important;
  margin-top: 16px !important;
}
.ah-left-support {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: .76rem;
  line-height: 1.55;
}
.ah-left-support p {
  margin: 0;
  max-width: 42ch;
}
.ah-left-support p span {
  color: #64748b;
  font-weight: 700;
}
.ah-help-link {
  width: max-content;
  color: #64748b !important;
  font-size: .78rem !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(100, 116, 139, .36);
  padding-bottom: 2px;
}
.ah-help-link:hover {
  color: #cbd5e1 !important;
  border-color: rgba(203, 213, 225, .58);
}
.ah-next-link {
  justify-content: flex-start !important;
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  padding: 0 !important;
  min-height: auto !important;
  text-align: left !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
}
.ah-next-link:hover:not(:disabled) {
  color: #e2e8f0 !important;
  background: transparent !important;
}
.ah-next-link:disabled {
  color: #334155 !important;
}
.ah-html-editor {
  background: #020617 !important;
  box-shadow: inset -1px 0 0 rgba(15,23,42,.75), inset 1px 0 0 rgba(15,23,42,.75) !important;
}
.ah-editor-file-chip {
  color: #cbd5e1 !important;
}
.ah-html-editor-actions {
  min-height: 42px !important;
  padding: 6px 14px !important;
}
.ah-tool-action {
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  padding: 0 !important;
  min-height: auto !important;
  border-radius: 0 !important;
  font-size: .78rem !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
}
.ah-tool-action:hover,
.ah-tool-action:focus-visible {
  background: transparent !important;
  color: #e2e8f0 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ah-tool-action-run { color: #93c5fd !important; }
.ah-tool-action-check { color: #86efac !important; }
.ah-html-editor-actions > div {
  gap: 16px !important;
}
.ah-html-terminal {
  background: #010409 !important;
}
.ah-terminal-header {
  min-height: 42px;
}
.ah-terminal-output {
  background: #010409 !important;
  color: #c9d1d9 !important;
}
.ah-terminal-output-block {
  margin-top: 12px !important;
  color: #e5e7eb !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.ah-terminal-note {
  margin-top: 12px !important;
  color: #6b7280 !important;
}
.ah-html-tests,
#testOutput {
  background: #020617 !important;
}
.ah-test-row {
  gap: 8px;
}
.ah-left-section {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.ah-left-hint p {
  color: #64748b;
  font-size: .88rem;
  line-height: 1.7;
  max-width: 42ch;
}

/* Dashboard polish: cleaner developer learning tool, smaller square cards, less color noise. */
.ah-dev-dashboard {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
  padding: 42px 0 56px;
}
.ah-dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(15, 23, 42, .96);
}
.ah-dash-eyebrow,
.ah-dash-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  line-height: 1.4;
  color: #64748b;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 650;
}
.ah-dash-hero h1 {
  margin-top: 14px;
  color: #f8fafc;
  font-size: clamp(2.2rem, 5vw, 4.35rem);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 780;
}
.ah-dash-lead {
  margin-top: 18px;
  max-width: 62ch;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.78;
}
.ah-dash-continue {
  border-left: 1px solid rgba(30, 41, 59, .84);
  padding-left: 24px;
  padding-bottom: 4px;
}
.ah-dash-continue h2 {
  margin-top: 10px;
  color: #e2e8f0;
  font-size: 1.08rem;
  font-weight: 720;
  letter-spacing: -.02em;
}
.ah-dash-continue p {
  margin-top: 9px;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.7;
}
.ah-dash-link,
.ah-dash-row-link,
.ah-dash-reset {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: .86rem;
  font-weight: 680;
  line-height: 1.4;
  padding: 0 0 3px;
  border-bottom: 1px solid rgba(100, 116, 139, .42);
  transition: color .16s ease, border-color .16s ease;
}
.ah-dash-link { margin-top: 18px; }
.ah-dash-link:hover,
.ah-dash-row-link:hover,
.ah-dash-reset:hover {
  color: #e2e8f0;
  border-color: rgba(226, 232, 240, .7);
}
.ah-dash-link-primary { color: #cbd5e1; }
.ah-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.ah-dash-stat {
  min-height: 132px;
  padding: 18px;
  background: rgba(2, 6, 23, .34);
  border: 1px solid rgba(15, 23, 42, .98);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ah-dash-stat span,
.ah-dash-stat small {
  color: #64748b;
  font-size: .78rem;
  line-height: 1.45;
}
.ah-dash-stat span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .04em;
}
.ah-dash-stat strong {
  display: block;
  margin: 18px 0 12px;
  color: #f8fafc;
  font-size: clamp(1.25rem, 2.3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 760;
}

.ah-dash-tabs {
  position: sticky;
  top: 76px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 10px;
  overflow-x: auto;
  background: rgba(2, 6, 23, .74);
  border: 1px solid rgba(30, 41, 59, .78);
  backdrop-filter: blur(16px);
}
.ah-dash-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  color: #94a3b8;
  font-size: .84rem;
  font-weight: 760;
  border: 1px solid rgba(30, 41, 59, .72);
  background: rgba(15, 23, 42, .38);
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.ah-dash-tabs a:hover {
  color: #f8fafc;
  border-color: rgba(250, 204, 21, .28);
  transform: translateY(-1px);
}
.ah-dash-tabs a.is-active {
  color: #020617;
  background: #facc15;
  border-color: rgba(250, 204, 21, .8);
}

.ah-dash-section {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(15, 23, 42, .96);
}
.ah-dash-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.ah-dash-section-head h2 {
  margin-top: 8px;
  color: #f8fafc;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 760;
}
.ah-dash-section-head p {
  margin-top: 8px;
  max-width: 68ch;
  color: #64748b;
  font-size: .92rem;
  line-height: 1.7;
}
.ah-dash-reset {
  color: #475569;
  font-size: .75rem;
  cursor: pointer;
  white-space: nowrap;
}
.ah-dash-module-list {
  border-top: 1px solid rgba(15, 23, 42, .96);
}
.ah-dash-module-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .96);
}
.ah-dash-module-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
  color: #64748b;
  background: rgba(15, 23, 42, .35);
}
.ah-dash-module-index.is-current {
  color: #fde68a;
  background: rgba(250, 204, 21, .055);
}
.ah-dash-module-index.is-active {
  color: #93c5fd;
  background: rgba(37, 99, 235, .07);
}
.ah-dash-module-index.is-done {
  color: #86efac;
  background: rgba(34, 197, 94, .07);
}
.ah-dash-module-index.is-locked {
  color: #334155;
  background: rgba(15, 23, 42, .25);
}
.ah-dash-module-main h3 {
  color: #e2e8f0;
  font-size: .98rem;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: -.01em;
}
.ah-dash-module-main p {
  margin-top: 4px;
  color: #64748b;
  font-size: .88rem;
  line-height: 1.65;
}
.ah-dash-row-link {
  justify-self: end;
  color: #94a3b8;
  white-space: nowrap;
}
.ah-dash-row-link.is-muted { color: #64748b; }
.ah-dash-row-link.is-disabled,
.ah-dash-row-link[aria-disabled="true"] {
  color: #334155;
  border-color: rgba(51, 65, 85, .22);
  pointer-events: none;
}
.ah-dash-module-row.is-locked .ah-dash-module-main h3,
.ah-dash-module-row.is-locked .ah-dash-module-main p { color: #475569; }

@media (max-width: 900px) {
  .ah-dev-dashboard { padding-top: 28px; }
  .ah-dash-hero { grid-template-columns: 1fr; gap: 24px; }
  .ah-dash-continue { border-left: 0; padding-left: 0; border-top: 1px solid rgba(15, 23, 42, .96); padding-top: 20px; }
  .ah-dash-stats { grid-template-columns: 1fr; }
  .ah-dash-tabs { top: 62px; }
  .ah-dash-stat { min-height: 112px; }
  .ah-dash-section-head { align-items: start; flex-direction: column; }
  .ah-dash-module-row { grid-template-columns: 38px minmax(0, 1fr); }
  .ah-dash-row-link { grid-column: 2; justify-self: start; margin-top: 2px; }
}

/* Public homepage: clean HTML/document-style landing page, less card-heavy. */
.ah-home-page {
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 99, 235, 0.08), transparent 34rem),
    radial-gradient(circle at 85% 8%, rgba(250, 204, 21, 0.035), transparent 28rem),
    #020617;
}
.ah-home-shell {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
.ah-home-hero {
  min-height: calc(100dvh - 64px);
  display: grid;
  align-items: center;
  padding: clamp(64px, 8vw, 108px) 0 clamp(48px, 6vw, 84px);
}
.ah-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .78fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
}
.ah-home-copy { max-width: 720px; }
.ah-home-eyebrow,
.ah-home-kicker {
  margin: 0;
  color: #64748b;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-home-copy h1 {
  margin: 18px 0 0;
  max-width: 11ch;
  font-size: clamp(3rem, 7vw, 6.35rem);
  line-height: .94;
  letter-spacing: -.07em;
  font-weight: 900;
  color: #f8fafc;
}
.ah-home-lead {
  margin: 26px 0 0;
  max-width: 62ch;
  color: #cbd5e1;
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  line-height: 1.7;
}
.ah-home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
}
.ah-home-links a {
  color: #cbd5e1;
  font-size: .94rem;
  font-weight: 750;
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, .45);
  padding-bottom: 4px;
  transition: color .16s ease, border-color .16s ease;
}
.ah-home-links a:first-child {
  color: #f8fafc;
  border-color: rgba(250, 204, 21, .55);
}
.ah-home-links a:hover {
  color: #fff;
  border-color: rgba(248, 250, 252, .75);
}
.ah-home-code {
  border-left: 1px solid rgba(30, 41, 59, .95);
  padding-left: clamp(22px, 3vw, 34px);
  color: #cbd5e1;
}
.ah-home-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(30, 41, 59, .85);
  color: #64748b;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ah-home-code pre {
  margin: 22px 0 0;
  overflow-x: auto;
  color: #dbeafe;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem;
  line-height: 1.85;
}
.ah-code-comment { color: #64748b; }
.ah-code-string { color: #fde68a; }
.ah-code-number { color: #86efac; }
.ah-home-terminal {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 41, 59, .85);
  color: #94a3b8;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  line-height: 1.8;
}
.ah-home-terminal span:first-child { color: #86efac; }
.ah-home-terminal span:last-child { color: #93c5fd; }
.ah-home-terminal pre {
  margin-top: 12px;
  color: #f8fafc;
  font-size: .82rem;
  line-height: 1.65;
}
.ah-home-section {
  border-top: 1px solid rgba(15, 23, 42, .95);
  padding: clamp(64px, 8vw, 104px) 0;
}
.ah-home-last { padding-bottom: clamp(72px, 10vw, 128px); }
.ah-home-narrow {
  max-width: 820px;
  margin-inline: auto;
}
.ah-home-section h2 {
  margin: 12px 0 0;
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 880;
}
.ah-home-section p {
  margin: 22px 0 0;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.85;
  max-width: 70ch;
}
.ah-home-flow {
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 24px;
}
.ah-home-flow li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}
.ah-home-flow span {
  color: #475569;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  padding-top: 3px;
}
.ah-home-flow strong {
  display: block;
  color: #f8fafc;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}
.ah-home-flow p {
  grid-column: 2;
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: .95rem;
  line-height: 1.7;
}
.ah-home-two-col {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, .64fr);
  gap: clamp(48px, 8vw, 104px);
  align-items: start;
}
.ah-home-list {
  display: grid;
  gap: 24px;
  padding-top: 8px;
}
.ah-home-list div {
  padding-top: 20px;
  border-top: 1px solid rgba(30, 41, 59, .82);
}
.ah-home-list span {
  display: block;
  color: #64748b;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.ah-home-list strong {
  display: block;
  color: #f8fafc;
  font-size: 1.02rem;
}
.ah-home-list p {
  margin-top: 8px;
  color: #94a3b8;
  font-size: .92rem;
  line-height: 1.7;
}
.ah-home-bullets {
  margin: 30px 0 0;
  padding-left: 1.15rem;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.9;
}
.ah-home-bullets li { padding-left: .25rem; }
.ah-home-note {
  color: #64748b !important;
  font-size: .94rem !important;
}
@media (max-width: 920px) {
  .ah-home-hero-grid,
  .ah-home-two-col {
    grid-template-columns: 1fr;
  }
  .ah-home-code {
    border-left: 0;
    border-top: 1px solid rgba(30, 41, 59, .95);
    padding-left: 0;
    padding-top: 26px;
  }
  .ah-home-copy h1 { max-width: 12ch; }
}
@media (max-width: 560px) {
  .ah-home-shell { width: min(100% - 28px, 1120px); }
  .ah-home-hero { min-height: auto; padding-top: 48px; }
  .ah-home-copy h1 { font-size: clamp(2.7rem, 16vw, 4rem); }
  .ah-home-flow li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
}


/* Homepage viewport hero correction: header + hero should cover the first screen. */
.ah-home-page main {
  min-height: calc(100dvh - 64px);
}
.ah-home-hero {
  min-height: calc(100svh - 64px);
  min-height: calc(100dvh - 64px);
  padding: clamp(28px, 5vh, 58px) 0;
  box-sizing: border-box;
}
.ah-home-hero-grid {
  min-height: min(720px, calc(100dvh - 64px - clamp(56px, 10vh, 116px)));
  align-content: center;
}
.ah-home-copy h1 {
  max-width: 12.2ch;
  font-size: clamp(3.25rem, 6.7vw, 6.15rem);
}
.ah-home-lead {
  max-width: 58ch;
}
.ah-home-links {
  margin-top: clamp(26px, 4vh, 38px);
}
.ah-home-code {
  align-self: center;
}
@media (min-width: 1120px) and (max-height: 780px) {
  .ah-home-copy h1 { font-size: clamp(3rem, 6vw, 5.25rem); }
  .ah-home-lead { margin-top: 20px; line-height: 1.62; }
  .ah-home-links { margin-top: 26px; }
  .ah-home-code pre { margin-top: 18px; line-height: 1.68; }
  .ah-home-terminal { margin-top: 20px; padding-top: 14px; }
}
@media (max-width: 920px) {
  .ah-home-hero {
    min-height: auto;
    padding: clamp(56px, 9vw, 86px) 0 clamp(54px, 8vw, 82px);
  }
  .ah-home-hero-grid { min-height: 0; }
}
@media (max-width: 560px) {
  .ah-home-hero { min-height: auto; padding-top: 44px; }
}


/* =========================================================
   System pass: page modes, quieter actions, less cards.
   AskHackers direction: developer learning tool + docs clarity.
   ========================================================= */
body.ah-page-doc {
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .055), transparent 28rem),
    linear-gradient(180deg, rgba(15, 23, 42, .18), transparent 280px),
    #020617 !important;
}
body.ah-page-tool,
body.ah-page-dashboard,
body.ah-page-journal,
body.ah-page-placeholder {
  background: #020617 !important;
}
body.ah-home-page {
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 99, 235, .075), transparent 34rem),
    radial-gradient(circle at 86% 10%, rgba(250, 204, 21, .026), transparent 28rem),
    #020617 !important;
}

.ah-command-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  border: 0;
  border-bottom: 1px solid rgba(100, 116, 139, .42);
  background: transparent;
  color: #94a3b8;
  padding: 0 0 4px;
  font: inherit;
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 760;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, opacity .16s ease;
}
.ah-command-link:hover { color: #f8fafc; border-color: rgba(248, 250, 252, .72); }
.ah-command-link-primary { color: #e2e8f0; border-color: rgba(250, 204, 21, .48); }
.ah-command-link-primary:hover { color: #fff7c2; border-color: rgba(250, 204, 21, .78); }
.ah-command-link.is-disabled,
.ah-command-link:disabled { color: #475569; border-color: rgba(51, 65, 85, .24); cursor: not-allowed; opacity: .65; }

/* Less button-like actions in learning surfaces. */
.ah-tool-action,
.ah-next-link,
.ah-dash-row-link,
.ah-dash-link,
.ah-dash-reset,
.ah-doc-link {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ah-next-link {
  width: max-content !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(100,116,139,.42) !important;
  background: transparent !important;
  color: #94a3b8 !important;
  padding: 0 0 4px !important;
  font-size: .86rem !important;
  font-weight: 720 !important;
  text-align: left !important;
}
.ah-next-link:not(:disabled):hover { color: #f8fafc !important; border-color: rgba(248,250,252,.72) !important; }
.ah-next-link:disabled { color: #334155 !important; border-color: rgba(51,65,85,.2) !important; }
.ah-tool-action {
  border: 0 !important;
  background: transparent !important;
  padding: 0 0 3px !important;
  color: #64748b !important;
  border-bottom: 1px solid transparent !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: .76rem !important;
  font-weight: 650 !important;
  text-transform: lowercase;
}
.ah-tool-action:hover { transform: none !important; color: #dbeafe !important; border-bottom-color: rgba(148,163,184,.45) !important; }
.ah-tool-action-check:hover { color: #bbf7d0 !important; }
.ah-tool-action-run:hover { color: #bfdbfe !important; }

/* Theory: keep it a calm article, not a marketing page. */
.ah-page-doc .ah-theory-doc-page::before { display: none !important; }
.ah-page-doc .ah-article { width: min(720px, calc(100% - 40px)) !important; }
.ah-page-doc .ah-doc-code-block { padding-top: 22px !important; border-radius: 10px !important; box-shadow: none !important; }
.ah-page-doc .ah-doc-code-block::before { display: none !important; }
.ah-page-doc .ah-doc-next-step::before { background: rgba(30, 41, 59, .86) !important; }
.ah-page-doc .ah-doc-next-step .ah-doc-actions { gap: 22px; align-items: baseline; }
.ah-page-doc .ah-doc-next-step .ah-btn-primary { background: transparent !important; color: #e2e8f0 !important; box-shadow: none !important; min-height: auto !important; padding: 0 0 4px !important; border-radius: 0 !important; border-bottom: 1px solid rgba(250,204,21,.5) !important; }

/* Lesson page: flat developer workspace. */
.ah-page-tool .ah-lesson-pagebar {
  border-bottom: 1px solid rgba(15, 23, 42, .96) !important;
  background: #020617 !important;
}
.ah-page-tool .ah-html-workspace { gap: 0 !important; padding: 0 !important; }
.ah-page-tool .ah-html-left,
.ah-page-tool .ah-html-editor,
.ah-page-tool .ah-html-right {
  border-radius: 0 !important;
  border-color: rgba(15, 23, 42, .96) !important;
  box-shadow: none !important;
}
.ah-page-tool .ah-html-left { border-right: 1px solid rgba(15,23,42,.96) !important; }
.ah-page-tool .ah-html-right { border-left: 1px solid rgba(15,23,42,.96) !important; }
.ah-page-tool .ah-exercise-item,
.ah-page-tool .ah-mini-code,
.ah-page-tool .ah-left-section,
.ah-page-tool .ah-left-support {
  background: transparent !important;
  border-color: rgba(30, 41, 59, .42) !important;
  box-shadow: none !important;
}
.ah-page-tool .ah-left-support {
  border-top: 1px solid rgba(30,41,59,.48) !important;
  padding-top: 12px !important;
}
.ah-page-tool .ah-help-link {
  border: 0 !important;
  border-bottom: 1px solid rgba(100,116,139,.35) !important;
  background: transparent !important;
  padding: 0 0 3px !important;
  border-radius: 0 !important;
  color: #64748b !important;
}
.ah-page-tool .ah-help-link:hover { color: #cbd5e1 !important; border-bottom-color: rgba(203,213,225,.5) !important; }
.ah-page-tool .ah-html-editor-topbar,
.ah-page-tool .ah-html-editor-actions,
.ah-page-tool .ah-terminal-header,
.ah-page-tool .ah-html-tests > div:first-child {
  background: #020617 !important;
  border-color: rgba(15,23,42,.96) !important;
}
.ah-page-tool .ah-terminal { border-radius: 0 !important; border-color: rgba(15,23,42,.96) !important; background: #010409 !important; }
.ah-page-tool .ah-terminal-output { background: #010409 !important; }
.ah-page-tool .ah-html-tests { border-radius: 0 !important; border-color: rgba(15,23,42,.96) !important; }

/* Journal: simple article/form page, no dashboard cards. */
.ah-journal-page,
.ah-placeholder-page {
  width: min(820px, calc(100% - 40px));
  margin-inline: auto;
  padding: clamp(42px, 6vw, 78px) 0 clamp(72px, 8vw, 104px);
}
.ah-journal-article,
.ah-placeholder-article { max-width: 720px; }
.ah-page-note {
  color: #64748b;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .04em;
}
.ah-journal-header,
.ah-placeholder-article { border-bottom: 1px solid rgba(15, 23, 42, .96); padding-bottom: 30px; }
.ah-journal-status {
  display: inline-flex;
  margin: 24px 0 0;
  color: #fde68a;
  font-size: .82rem;
  font-weight: 760;
  line-height: 1.5;
}
.ah-journal-status.is-saved { color: #86efac; }
.ah-journal-header h1,
.ah-placeholder-article h1 {
  margin-top: 14px;
  color: #f8fafc;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 860;
}
.ah-journal-header p,
.ah-placeholder-article > p,
.ah-placeholder-list li {
  margin-top: 18px;
  color: #cbd5e1;
  font-size: 1.03rem;
  line-height: 1.82;
}
.ah-journal-form { margin-top: 34px; }
.ah-journal-field { padding: 28px 0; border-bottom: 1px solid rgba(15,23,42,.96); }
.ah-journal-field label,
.ah-placeholder-list h2 {
  display: block;
  color: #f8fafc;
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 780;
  letter-spacing: -.018em;
}
.ah-journal-field p { margin-top: 8px; color: #64748b; font-size: .94rem; line-height: 1.7; }
.ah-journal-field textarea {
  width: 100%;
  margin-top: 16px;
  resize: vertical;
  border: 0;
  border-left: 1px solid rgba(51,65,85,.75);
  border-radius: 0;
  background: rgba(2, 6, 23, .22);
  color: #e2e8f0;
  padding: 14px 0 14px 18px;
  font-size: 1rem;
  line-height: 1.75;
  outline: none;
}
.ah-journal-field textarea:focus { border-left-color: rgba(250,204,21,.72); background: rgba(15,23,42,.18); }
.ah-journal-field textarea::placeholder { color: #475569; }
.ah-journal-message {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid rgba(148,163,184,.45);
  color: #94a3b8;
  font-size: .94rem;
  line-height: 1.7;
}
.ah-journal-message.is-success { border-left-color: #22c55e; color: #bbf7d0; }
.ah-journal-message.is-warning { border-left-color: #f59e0b; color: #fde68a; }
.ah-journal-actions,
.ah-placeholder-actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; align-items: baseline; }
.ah-placeholder-list { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(15,23,42,.96); }
.ah-placeholder-list ul { margin-top: 14px; padding-left: 1.2rem; }
.ah-placeholder-list code { color: #dbeafe; background: rgba(15,23,42,.7); border: 1px solid rgba(51,65,85,.65); padding: 1px 6px; border-radius: 7px; }

/* Input/dashboard/home fine tuning after system pass. */
.ah-page-dashboard .ah-dash-stat,
.ah-page-dashboard .ah-dash-module-index { border-radius: 0 !important; }
.ah-page-dashboard .ah-dash-stat { background: rgba(2,6,23,.16) !important; }
.ah-home-code { background: transparent !important; box-shadow: none !important; }
.ah-home-links a:first-child::after { content: " →"; }
.ah-home-links a:nth-child(2)::after { content: ""; }

@media (max-width: 900px) {
  .ah-page-tool .ah-html-left,
  .ah-page-tool .ah-html-right { border-left: 0 !important; border-right: 0 !important; }
  .ah-journal-page,
  .ah-placeholder-page { width: min(100% - 28px, 820px); padding-top: 34px; }
  .ah-journal-actions,
  .ah-placeholder-actions { gap: 18px; }
}

/* CodeMirror 6 integration -------------------------------------------------
   The lesson editor now uses CM6 instead of legacy CM5. Keep these styles
   near the end so external module styles cannot make the editor light. */
.ah-html-editor-mount .cm-editor {
  height: 100%;
  min-height: 100%;
  background: #020617;
  color: #e2e8f0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ah-html-editor-mount .cm-scroller {
  height: 100%;
  overflow: auto;
  background: #020617;
  font-family: inherit;
}
.ah-html-editor-mount .cm-content {
  min-height: 100%;
  caret-color: #facc15;
}
.ah-html-editor-mount .cm-focused { outline: none; }
.ah-html-editor-mount .cm-gutters {
  background: #020617;
  color: #475569;
  border-right: 1px solid rgba(51,65,85,.55);
}
.ah-html-editor-mount .cm-activeLine {
  background: rgba(15,23,42,.42);
}
.ah-html-editor-mount .cm-activeLineGutter {
  background: rgba(15,23,42,.72);
  color: #94a3b8;
}
.ah-html-editor-mount .cm-selectionBackground,
.ah-html-editor-mount .cm-focused .cm-selectionBackground {
  background: rgba(96,165,250,.22) !important;
}
.ah-html-editor-mount .cm-cursor {
  border-left-color: #facc15;
  border-left-width: 2px;
}
.ah-html-editor-mount .cm-placeholder {
  color: #475569;
}

/* Lesson viewport/test panel fix -------------------------------------------------
   Keep the whole coding workspace inside the visible browser viewport and let the
   terminal/tests scroll internally. This prevents the last test row from being
   hidden behind the Windows taskbar or below the viewport on short laptop screens. */
.ah-app-body.ah-page-tool {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
}

.ah-app-body.ah-page-tool .ah-header {
  flex: 0 0 64px;
}

.ah-page-tool .ah-lesson-pagebar {
  flex: 0 0 58px;
  min-height: 58px;
}

.ah-page-tool .ah-lesson-grid.ah-html-workspace {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: calc(100dvh - 122px);
  overflow: hidden !important;
}

.ah-page-tool .ah-html-left,
.ah-page-tool .ah-html-editor,
.ah-page-tool .ah-html-right {
  min-height: 0 !important;
  max-height: 100%;
  overflow: hidden !important;
}

.ah-page-tool .ah-html-right {
  display: flex !important;
  flex-direction: column !important;
}

.ah-page-tool .ah-html-terminal {
  flex: 1 1 0 !important;
  min-height: 170px !important;
  overflow: hidden !important;
}

.ah-page-tool .ah-terminal-output {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 22px !important;
}

.ah-page-tool .ah-html-tests {
  flex: 0 1 clamp(210px, 36%, 310px) !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ah-page-tool .ah-html-tests > div:first-child {
  flex: 0 0 auto !important;
}

.ah-page-tool #testOutput {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 28px !important;
}

.ah-page-tool .ah-test-row {
  padding: 6px 0 !important;
  line-height: 1.45 !important;
}

@media (max-height: 760px) and (min-width: 1101px) {
  .ah-page-tool .ah-lesson-pagebar { flex-basis: 50px; min-height: 50px; padding-block: 8px !important; }
  .ah-page-tool .ah-lesson-grid.ah-html-workspace { height: calc(100dvh - 114px); }
  .ah-page-tool .ah-html-tests { flex-basis: clamp(230px, 42%, 330px) !important; }
  .ah-page-tool .ah-terminal-header,
  .ah-page-tool .ah-html-tests > div:first-child { min-height: 38px !important; padding-block: 8px !important; }
  .ah-page-tool .ah-html-editor-topbar,
  .ah-page-tool .ah-html-editor-actions { padding-block: 8px !important; }
}

@media (max-width: 1100px) {
  .ah-app-body.ah-page-tool {
    height: auto;
    max-height: none;
    overflow: auto !important;
  }
  .ah-page-tool .ah-lesson-grid.ah-html-workspace {
    height: auto;
    overflow: visible !important;
  }
  .ah-page-tool .ah-html-left,
  .ah-page-tool .ah-html-editor,
  .ah-page-tool .ah-html-right {
    max-height: none;
    overflow: visible !important;
  }
  .ah-page-tool .ah-html-tests {
    flex-basis: auto !important;
    min-height: 230px !important;
  }
}


/* Comfort palette + typography pass -----------------------------------------
   Goal: reduce eye fatigue for long coding sessions. Dark navy, not black;
   soft light text, not pure white; muted accents and calmer borders. */
:root {
  --ah-bg: #07111f;
  --ah-bg-deep: #050b14;
  --ah-bg-soft: #0d1626;
  --ah-surface: #0d1626;
  --ah-surface-soft: #111c2e;
  --ah-surface-muted: #152238;
  --ah-panel: #0d1626;
  --ah-panel-2: #111c2e;

  --ah-border-subtle: rgba(148, 163, 184, .10);
  --ah-border-soft: rgba(148, 163, 184, .10);
  --ah-border: rgba(148, 163, 184, .16);
  --ah-border-strong: rgba(148, 163, 184, .24);

  --ah-text-strong: #f8fafc;
  --ah-text: #dbe4ef;
  --ah-text-muted: #9aa8ba;
  --ah-text-soft: #6f7f92;
  --ah-text-code: #d7deea;

  --ah-yellow: #e8c766;
  --ah-blue: #7aa2f7;
  --ah-green: #8bd88b;
  --ah-red: #f87171;

  --ah-editor-bg: #0e0e11;
  --ah-editor-gutter: #0e0e11;
  --ah-editor-line: #0d1b2d;
  --ah-terminal-bg: #050b14;
  --ah-terminal-header: #09111f;

  --fs-caption: 12px;
  --fs-meta: 12.5px;
  --fs-ui: 14px;
  --fs-body-sm: 14.5px;
  --fs-body: 16px;
  --fs-article: 17px;
  --fs-code: 14px;
  --fs-terminal: 13px;

  --lh-ui: 1.5;
  --lh-body: 1.65;
  --lh-article: 1.72;
  --lh-code: 1.65;
  --lh-terminal: 1.6;
}

html { background: var(--ah-bg); }
body {
  background: var(--ah-bg);
  color: var(--ah-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(122,162,247,.32); color: var(--ah-text-strong); }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.26); }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.38); }

.ah-page-home,
.ah-home-page {
  background:
    radial-gradient(circle at 78% 8%, rgba(122, 162, 247, .08), transparent 34rem),
    radial-gradient(circle at 16% 0%, rgba(232, 199, 102, .035), transparent 26rem),
    var(--ah-bg);
}
.ah-page-doc {
  background:
    linear-gradient(180deg, rgba(13,22,38,.34), transparent 28rem),
    var(--ah-bg);
}
.ah-page-tool,
.ah-page-dashboard,
.ah-page-journal,
.ah-page-placeholder { background: var(--ah-bg); }

.ah-header {
  background: rgba(7, 17, 31, .88) !important;
  border-bottom-color: var(--ah-border-subtle) !important;
}
.ah-brand { color: var(--ah-text-strong); }
.ah-brand-mark { color: var(--ah-yellow) !important; }
.ah-nav { color: var(--ah-text-muted) !important; font-size: var(--fs-ui); }
.ah-nav a:hover,
.ah-nav a[aria-current="page"] { color: var(--ah-text-strong) !important; }
.ah-nav a[aria-current="page"]::after { background: rgba(232,199,102,.84) !important; }
.ah-focus:focus-visible, a:focus-visible, button:focus-visible, textarea:focus-visible {
  outline-color: rgba(122,162,247,.9) !important;
}

.ah-panel,
.ah-card {
  background: rgba(13, 22, 38, .68) !important;
  border-color: var(--ah-border-subtle) !important;
  box-shadow: none !important;
}
.ah-readable,
.ah-journal-header p,
.ah-placeholder-article > p,
.ah-placeholder-list li,
.ah-dash-module-main p,
.ah-home-lead,
.ah-doc-lead,
.ah-doc-content p,
.ah-doc-article p,
.ah-html-intro,
.ah-html-left p {
  color: var(--ah-text) !important;
}
.ah-muted,
.ah-page-note,
.ah-kicker,
.ah-doc-meta,
.ah-doc-progress,
.ah-dash-eyebrow,
.ah-html-muted,
.ah-terminal-muted { color: var(--ah-text-muted) !important; }
.ah-soft { color: var(--ah-text-soft) !important; }

.ah-doc-content p,
.ah-doc-article p {
  font-size: var(--fs-article) !important;
  line-height: var(--lh-article) !important;
}
.ah-readable { font-size: var(--fs-body-sm) !important; line-height: var(--lh-body) !important; }
.ah-html-left,
.ah-html-left p,
.ah-html-left li {
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-body) !important;
}
.ah-kicker,
.ah-page-note,
.ah-mini-code-label,
.ah-left-help-label,
.ah-help-link { font-size: var(--fs-caption) !important; }

.ah-btn-primary,
.ah-btn-secondary,
.ah-btn-success {
  background: transparent !important;
  color: var(--ah-text) !important;
  border: 1px solid var(--ah-border) !important;
}
.ah-btn-primary:hover,
.ah-btn-secondary:hover,
.ah-btn-success:hover,
.ah-btn-ghost:hover { color: var(--ah-text-strong) !important; background: rgba(17, 28, 46, .72) !important; }
.ah-btn-ghost { color: var(--ah-text-muted) !important; border-color: var(--ah-border-subtle) !important; background: transparent !important; }
.ah-command-link,
.ah-link,
.ah-doc-link,
.ah-home-links a,
.ah-journal-actions a,
.ah-placeholder-actions a { color: var(--ah-text) !important; }
.ah-command-link:hover,
.ah-link:hover,
.ah-doc-link:hover,
.ah-home-links a:hover,
.ah-journal-actions a:hover,
.ah-placeholder-actions a:hover { color: var(--ah-text-strong) !important; }

/* Header progress: developer status text, not a bright badge/button. */
.ah-progress-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ah-text-muted);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .01em;
  border: 0;
  background: transparent;
  padding: 0;
  white-space: nowrap;
}
.ah-progress-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(154,168,186,.55);
  box-shadow: 0 0 0 3px rgba(154,168,186,.06);
}
.ah-progress-status.is-done { color: #b7c2d1; }
.ah-progress-status.is-done::before {
  background: var(--ah-green);
  box-shadow: 0 0 0 3px rgba(139,216,139,.08);
}

/* Long-session editor and terminal colors. */
.ah-terminal,
.ah-html-terminal {
  background: var(--ah-terminal-bg) !important;
  border-color: var(--ah-border-subtle) !important;
  color: #c8d3e1 !important;
}
.ah-terminal-header {
  background: var(--ah-terminal-header) !important;
  border-bottom-color: var(--ah-border-subtle) !important;
  color: var(--ah-text-muted) !important;
}
.ah-terminal-output {
  background: var(--ah-terminal-bg) !important;
  color: #c8d3e1 !important;
  font-size: var(--fs-terminal) !important;
  line-height: var(--lh-terminal) !important;
}
.ah-terminal-output .text-green-300,
.ah-terminal-output .text-green-400,
.ah-terminal .text-green-300,
.ah-terminal .text-green-400 { color: var(--ah-green) !important; }
.ah-terminal-output .text-red-300,
.ah-terminal-output .text-red-400,
.ah-terminal .text-red-300,
.ah-terminal .text-red-400 { color: var(--ah-red) !important; }
.ah-terminal-output .text-blue-300,
.ah-terminal-output .text-blue-400,
.ah-terminal .text-blue-300,
.ah-terminal .text-blue-400 { color: var(--ah-blue) !important; }

.ah-test-row {
  border-bottom-color: var(--ah-border-subtle) !important;
  color: var(--ah-text) !important;
  font-size: 13px !important;
}
.ah-test-row .text-green-300,
.ah-test-row .text-green-400 { color: var(--ah-green) !important; }
.ah-test-row .text-red-300,
.ah-test-row .text-red-400 { color: var(--ah-red) !important; }

.ah-html-editor,
.ah-html-editor-mount,
.ah-html-editor-mount .cm-editor,
.ah-html-editor-mount .cm-scroller {
  background: var(--ah-editor-bg) !important;
  color: var(--ah-text-code) !important;
}
.ah-html-editor-topbar,
.ah-html-editor-actions {
  background: rgba(9, 21, 37, .58) !important;
  border-color: var(--ah-border-subtle) !important;
}
.ah-html-editor-mount .cm-content {
  caret-color: var(--ah-yellow) !important;
  font-size: var(--fs-code) !important;
  line-height: var(--lh-code) !important;
}
.ah-html-editor-mount .cm-gutters {
  background: var(--ah-editor-gutter) !important;
  color: #66758a !important;
  border-right-color: var(--ah-border-subtle) !important;
}
.ah-html-editor-mount .cm-activeLine { background: rgba(148, 163, 184, .055) !important; }
.ah-html-editor-mount .cm-activeLineGutter { background: rgba(148, 163, 184, .08) !important; color: #8a9aaf !important; }
.ah-html-editor-mount .cm-cursor { border-left-color: var(--ah-yellow) !important; }
.ah-html-editor-mount .cm-placeholder { color: #66758a !important; }

/* Softer semantic colors in Tailwind-heavy HTML. */
.text-white { color: var(--ah-text-strong) !important; }
.text-slate-100,
.text-slate-200 { color: var(--ah-text) !important; }
.text-slate-300 { color: #c3cfdd !important; }
.text-slate-400 { color: var(--ah-text-muted) !important; }
.text-slate-500 { color: var(--ah-text-soft) !important; }
.text-yellow-300,
.text-yellow-400 { color: var(--ah-yellow) !important; }
.text-blue-300,
.text-blue-400 { color: var(--ah-blue) !important; }
.text-green-300,
.text-green-400 { color: var(--ah-green) !important; }
.text-red-300,
.text-red-400 { color: var(--ah-red) !important; }

.border-slate-800,
.border-slate-700 { border-color: var(--ah-border-subtle) !important; }
.bg-slate-950,
.bg-slate-900,
.bg-slate-900\/60 { background-color: var(--ah-surface) !important; }

@media (max-width: 900px) {
  .ah-progress-status { display: none; }
}

/* Hero mascot pass: playful snake visual, still comfortable on AskHackers dark navy. */
.ah-home-hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(420px, .88fr);
  gap: clamp(36px, 6vw, 88px);
}
.ah-hero-mascot {
  position: relative;
  align-self: center;
  margin: 0;
  min-height: min(640px, calc(100dvh - 150px));
  display: grid;
  align-items: center;
  isolation: isolate;
}
.ah-hero-mascot::before {
  content: "";
  position: absolute;
  inset: 10% -8% 7% -12%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 199, 102, .13), transparent 24rem),
    radial-gradient(circle at 54% 48%, rgba(122, 162, 247, .16), transparent 30rem);
  filter: blur(6px);
  opacity: .9;
}
.ah-hero-mascot::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 4%;
  bottom: 6%;
  height: 18%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .28), transparent 68%);
  filter: blur(10px);
}
.ah-hero-mascot img {
  display: block;
  width: min(100%, 720px);
  max-height: min(720px, calc(100dvh - 120px));
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 34px 72px rgba(0, 0, 0, .35));
  transform-origin: 52% 58%;
  animation: ahSnakeFloat 7s ease-in-out infinite;
}
.ah-hero-mascot figcaption {
  position: absolute;
  left: 8%;
  bottom: clamp(10px, 2vh, 28px);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ah-text-muted);
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .01em;
}
.ah-hero-mascot figcaption span:first-child {
  color: var(--ah-yellow);
}
.ah-hero-mascot figcaption span + span::before {
  content: "//";
  margin-right: 10px;
  color: var(--ah-text-soft);
}
@keyframes ahSnakeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(.35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ah-hero-mascot img { animation: none; }
}
@media (max-width: 920px) {
  .ah-home-hero-grid { grid-template-columns: 1fr; }
  .ah-hero-mascot {
    min-height: auto;
    max-width: 560px;
    margin: 0 auto;
  }
  .ah-hero-mascot img {
    max-height: 520px;
  }
  .ah-hero-mascot figcaption {
    position: static;
    margin-top: -12px;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .ah-hero-mascot { margin-top: 12px; }
  .ah-hero-mascot img { max-height: 390px; }
  .ah-hero-mascot figcaption { font-size: 11px; }
}

/* Hero mascot refinement: cropped, quieter, less poster-like. */
.ah-home-page {
  background:
    radial-gradient(circle at 72% 28%, rgba(122, 162, 247, .08), transparent 34rem),
    radial-gradient(circle at 58% 55%, rgba(232, 199, 102, .045), transparent 26rem),
    #07111f;
}
.ah-home-hero-grid {
  grid-template-columns: minmax(0, .86fr) minmax(430px, .9fr);
}
.ah-hero-mascot {
  min-height: min(700px, calc(100dvh - 120px));
  overflow: visible;
}
.ah-hero-mascot::before {
  inset: 12% -2% 9% -2%;
  background:
    radial-gradient(circle at 54% 48%, rgba(122, 162, 247, .10), transparent 30rem),
    radial-gradient(circle at 45% 58%, rgba(232, 199, 102, .055), transparent 22rem);
  filter: blur(12px);
  opacity: .72;
}
.ah-hero-mascot::after {
  left: 18%;
  right: 12%;
  bottom: 6%;
  height: 14%;
  opacity: .7;
}
.ah-hero-mascot img {
  width: min(100%, 760px);
  max-height: min(760px, calc(100dvh - 92px));
  object-fit: contain;
  object-position: center bottom;
  margin-inline: auto;
  filter:
    saturate(.88)
    contrast(.96)
    brightness(.94)
    drop-shadow(0 34px 72px rgba(0, 0, 0, .30));
  mask-image: radial-gradient(ellipse at 52% 52%, #000 58%, rgba(0,0,0,.94) 72%, rgba(0,0,0,.35) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at 52% 52%, #000 58%, rgba(0,0,0,.94) 72%, rgba(0,0,0,.35) 88%, transparent 100%);
  animation: ahSnakeFloat 9s ease-in-out infinite;
}
.ah-hero-mascot figcaption { display: none !important; }
@keyframes ahSnakeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.15deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(.12deg); }
}
@media (max-width: 920px) {
  .ah-hero-mascot img {
    width: min(100%, 620px);
    max-height: 560px;
  }
}
@media (max-width: 560px) {
  .ah-hero-mascot img {
    width: min(112%, 520px);
    max-height: 440px;
  }
}


/* Final mascot blend: no rectangular/circular image feel. The PNG has feathered transparent edges; CSS only harmonizes it with the page. */
.ah-hero-mascot::before {
  inset: 8% -7% 4% -16%;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 58% 48%, rgba(122, 162, 247, .075), transparent 34rem),
    radial-gradient(ellipse at 43% 62%, rgba(232, 199, 102, .040), transparent 24rem);
  filter: blur(18px);
  opacity: .72;
}
.ah-hero-mascot::after {
  left: 15%;
  right: 8%;
  bottom: 3%;
  height: 15%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .22), transparent 72%);
  filter: blur(14px);
  opacity: .62;
}
.ah-hero-mascot img {
  width: min(112%, 840px);
  max-height: min(800px, calc(100dvh - 78px));
  transform: translateX(2%);
  filter:
    saturate(.82)
    contrast(.93)
    brightness(.90)
    drop-shadow(0 36px 80px rgba(0, 0, 0, .26));
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
@media (max-width: 920px) {
  .ah-hero-mascot img {
    width: min(108%, 660px);
    max-height: 560px;
    transform: none;
  }
}
@media (max-width: 560px) {
  .ah-hero-mascot img {
    width: min(118%, 500px);
    max-height: 420px;
  }
}


/* Senior hero typography review fix: avoid cramped heading, make the mascot/text balance feel intentional. */
.ah-home-copy {
  max-width: 760px;
}
.ah-home-title,
.ah-home-copy h1.ah-home-title {
  max-width: none !important;
  margin-top: clamp(18px, 3vh, 28px);
  font-size: clamp(3.35rem, 5.9vw, 5.95rem) !important;
  line-height: 1.035 !important;
  letter-spacing: -0.048em !important;
  font-weight: 890;
  text-wrap: balance;
}
.ah-home-title > span {
  display: block;
}
.ah-home-title-accent {
  color: var(--ah-yellow);
  letter-spacing: -0.055em;
}
.ah-home-lead {
  max-width: 56ch !important;
  margin-top: clamp(22px, 3.2vh, 30px) !important;
}
.ah-home-links {
  margin-top: clamp(28px, 4vh, 40px) !important;
}
.ah-home-hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(430px, 0.98fr) !important;
  gap: clamp(34px, 5vw, 72px) !important;
}
.ah-hero-mascot {
  justify-self: end;
}
.ah-hero-mascot img {
  width: min(112%, 820px) !important;
  max-height: min(780px, calc(100dvh - 86px)) !important;
}
@media (min-width: 1120px) and (max-height: 780px) {
  .ah-home-title,
  .ah-home-copy h1.ah-home-title {
    font-size: clamp(3.05rem, 5vw, 5.1rem) !important;
    line-height: 1.04 !important;
  }
  .ah-hero-mascot img {
    max-height: min(650px, calc(100dvh - 84px)) !important;
  }
}
@media (max-width: 1040px) {
  .ah-home-title,
  .ah-home-copy h1.ah-home-title {
    font-size: clamp(3rem, 8.5vw, 5rem) !important;
  }
}
@media (max-width: 920px) {
  .ah-home-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .ah-home-copy {
    max-width: 720px;
  }
  .ah-hero-mascot {
    justify-self: center;
  }
  .ah-hero-mascot img {
    width: min(108%, 620px) !important;
    max-height: 520px !important;
  }
}
@media (max-width: 560px) {
  .ah-home-title,
  .ah-home-copy h1.ah-home-title {
    font-size: clamp(2.65rem, 13vw, 4rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
  }
  .ah-home-title > span {
    display: inline;
  }
  .ah-home-title > span::after {
    content: " ";
  }
  .ah-home-title > span:last-child::after {
    content: "";
  }
  .ah-home-lead {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
}

/* Hero text/image balance fix: let the headline slightly overlap the mascot area on desktop so the text no longer feels squeezed. */
@media (min-width: 921px) {
  .ah-home-copy {
    position: relative;
    z-index: 3;
  }

  .ah-home-title,
  .ah-home-copy h1.ah-home-title {
    width: min(980px, 54vw);
    max-width: none !important;
  }

  .ah-hero-mascot {
    position: relative;
    z-index: 1;
    margin-left: clamp(-92px, -6vw, -48px);
  }

  .ah-hero-mascot img {
    transform: translateX(-1%) !important;
  }
}


/* Profile + Kodarenan prototype */
.ah-profile-page,
.ah-arena-page,
.ah-leaderboard-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.ah-profile-hero,
.ah-arena-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .86));
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .26);
}

.ah-arena-hero {
  grid-template-columns: 1fr auto;
}

.ah-profile-avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: white;
  font-size: 2rem;
  font-weight: 900;
}

.ah-profile-eyebrow,
.ah-arena-eyebrow {
  margin-bottom: 10px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #facc15;
}

.ah-profile-hero h1,
.ah-arena-hero h1 {
  max-width: 780px;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.06em;
  font-weight: 900;
}

.ah-profile-hero p:not(.ah-profile-eyebrow),
.ah-arena-hero p:not(.ah-arena-eyebrow) {
  max-width: 720px;
  margin-top: 18px;
  color: rgba(226, 232, 240, .78);
  line-height: 1.7;
}

.ah-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.ah-profile-stats article,
.ah-arena-unlock,
.ah-profile-panel,
.ah-arena-problems,
.ah-arena-workspace,
.ah-leaderboard-panel {
  border-radius: 24px;
  background: rgba(15, 23, 42, .68);
  border: 1px solid rgba(148, 163, 184, .12);
}

.ah-profile-stats article,
.ah-arena-unlock {
  padding: 22px;
}

.ah-profile-stats span,
.ah-profile-stats small,
.ah-arena-unlock span,
.ah-arena-unlock small {
  display: block;
  color: rgba(203, 213, 225, .72);
  font-size: .85rem;
}

.ah-profile-stats strong,
.ah-arena-unlock strong {
  display: block;
  margin: 8px 0;
  font-size: 2rem;
  font-weight: 900;
}

.ah-profile-grid,
.ah-arena-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.ah-arena-layout {
  grid-template-columns: 360px minmax(0, 1fr);
}

.ah-profile-panel,
.ah-arena-problems,
.ah-arena-workspace,
.ah-leaderboard-panel {
  padding: 24px;
}

.ah-profile-panel-head h2,
.ah-arena-problem-head h2,
.ah-leaderboard-panel h2 {
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -.03em;
}

.ah-profile-list,
.ah-arena-problem-list,
.ah-leaderboard-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.ah-profile-row,
.ah-profile-empty,
.ah-leaderboard-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .10);
}

.ah-profile-row > span,
.ah-leaderboard-rank {
  font-family: 'JetBrains Mono', monospace;
  color: #facc15;
  font-weight: 800;
}

.ah-profile-row strong,
.ah-profile-empty strong,
.ah-leaderboard-row strong {
  display: block;
  font-weight: 800;
}

.ah-profile-row small,
.ah-profile-empty span,
.ah-leaderboard-row small {
  display: block;
  margin-top: 4px;
  color: rgba(203, 213, 225, .7);
}

.ah-profile-row a,
.ah-profile-empty a {
  color: #facc15;
  font-weight: 800;
  font-size: .9rem;
}

.ah-profile-empty {
  grid-template-columns: 1fr;
}

.ah-arena-problem-card {
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .10);
  background: rgba(2, 6, 23, .34);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ah-arena-problem-card:hover,
.ah-arena-problem-card.is-active {
  transform: translateY(-1px);
  border-color: rgba(250, 204, 21, .35);
  background: rgba(250, 204, 21, .07);
}

.ah-arena-problem-card span,
.ah-arena-problem-card small {
  display: block;
  color: rgba(203, 213, 225, .68);
  font-size: .82rem;
}

.ah-arena-problem-card strong {
  display: block;
  margin: 7px 0;
  font-size: 1rem;
}

.ah-arena-problem-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.ah-arena-status {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(148, 163, 184, .12);
  color: rgba(226, 232, 240, .78);
  font-size: .78rem;
  font-weight: 800;
}

.ah-arena-status.is-solved {
  background: rgba(34, 197, 94, .14);
  color: #86efac;
}

.ah-arena-description {
  margin-top: 16px;
  color: rgba(226, 232, 240, .76);
  line-height: 1.7;
}

.ah-arena-task-box {
  margin: 18px 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(2, 6, 23, .34);
}

.ah-arena-task-box h3 {
  margin-bottom: 8px;
  font-weight: 850;
}

.ah-arena-task-box li {
  margin-left: 18px;
  list-style: disc;
  color: rgba(226, 232, 240, .78);
}

.ah-arena-editor,
.ah-arena-output {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 6, 23, .72);
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
}

.ah-arena-editor {
  min-height: 230px;
  padding: 18px;
  outline: none;
  resize: vertical;
}

.ah-arena-editor:focus {
  border-color: rgba(250, 204, 21, .45);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .08);
}

.ah-arena-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}

.ah-arena-output {
  min-height: 112px;
  padding: 16px;
  white-space: pre-wrap;
  color: #bbf7d0;
}

.ah-leaderboard-row {
  grid-template-columns: auto 1fr auto auto;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 18px;
  background: rgba(2, 6, 23, .28);
}

.ah-leaderboard-row.is-you {
  border-color: rgba(250, 204, 21, .34);
  background: rgba(250, 204, 21, .07);
}

@media (max-width: 900px) {
  .ah-profile-hero,
  .ah-arena-hero,
  .ah-profile-grid,
  .ah-arena-layout,
  .ah-profile-stats {
    grid-template-columns: 1fr;
  }
}

.ah-dash-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .ah-dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ah-dash-stats {
    grid-template-columns: 1fr;
  }
}


/* Profile dropdown in app header */
.ah-profile-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ah-profile-trigger {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .24);
}

.ah-profile-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .18), 0 10px 28px rgba(37, 99, 235, .24);
}

.ah-profile-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  width: 220px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(15, 23, 42, .98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
}

.ah-profile-dropdown[hidden] {
  display: none !important;
}

.ah-profile-dropdown-kicker {
  margin: 0 0 2px;
  color: rgba(148, 163, 184, .92);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ah-profile-dropdown strong {
  display: block;
  color: #fff;
  font-size: .95rem;
  margin-bottom: 12px;
}

.ah-profile-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(250, 204, 21, .1);
  color: #fde68a;
  font-size: .85rem;
  font-weight: 800;
  transition: background .18s ease, color .18s ease;
}

.ah-profile-dropdown a:hover {
  background: rgba(250, 204, 21, .16);
  color: #fff7ad;
}

/* Dashboard school preview: current place + clear completion status */
.ah-school-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 0 20px;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(15, 23, 42, .96);
  border-bottom: 1px solid rgba(15, 23, 42, .96);
}
.ah-school-continue h3 {
  margin-top: 6px;
  color: #f8fafc;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: -.02em;
}
.ah-school-continue p:not(.ah-dash-kicker) {
  margin-top: 6px;
  max-width: 68ch;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.65;
}
.ah-dash-module-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 14px;
  min-width: 165px;
}
.ah-dash-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -.01em;
  color: #94a3b8;
  background: rgba(15, 23, 42, .42);
}
.ah-dash-status-pill.is-complete {
  color: #86efac;
  background: rgba(34, 197, 94, .08);
}
.ah-dash-status-pill.is-current {
  color: #fde68a;
  background: rgba(250, 204, 21, .08);
}
.ah-dash-status-pill.is-locked {
  color: #475569;
  background: rgba(15, 23, 42, .26);
}
@media (max-width: 900px) {
  .ah-school-continue { align-items: start; flex-direction: column; }
  .ah-dash-module-actions { grid-column: 2; justify-content: start; min-width: 0; }
}

/* Serious Skola + Community system: calmer, document-like, less card-heavy. */
.ah-serious-page {
  background:
    radial-gradient(circle at 18% -10%, rgba(250, 204, 21, .045), transparent 28rem),
    radial-gradient(circle at 88% 2%, rgba(122, 162, 247, .075), transparent 34rem),
    var(--ah-bg);
}
.ah-serious-shell {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: 48px 0 72px;
}
.ah-serious-hero {
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  padding-bottom: 42px;
}
.ah-serious-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
.ah-serious-eyebrow,
.ah-serious-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ah-yellow);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ah-serious-kicker { color: #6f7f92; letter-spacing: .11em; }
.ah-serious-hero h1 {
  margin-top: 16px;
  max-width: 760px;
  color: #f8fafc;
  font-size: clamp(2.45rem, 6vw, 5.35rem);
  line-height: .96;
  letter-spacing: -.075em;
  font-weight: 820;
}
.ah-serious-lead {
  margin-top: 22px;
  max-width: 68ch;
  color: #9aa8ba;
  font-size: 1.02rem;
  line-height: 1.82;
}
.ah-serious-actions,
.ah-serious-small-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.ah-serious-aside {
  padding-left: 28px;
  border-left: 1px solid rgba(148, 163, 184, .14);
}
.ah-serious-aside h2 {
  margin-top: 12px;
  color: #e2e8f0;
  font-size: 1.18rem;
  line-height: 1.35;
  letter-spacing: -.025em;
  font-weight: 760;
}
.ah-serious-aside p:not(.ah-serious-kicker) {
  margin-top: 10px;
  color: #7f8ea3;
  font-size: .92rem;
  line-height: 1.72;
}
.ah-serious-link,
.ah-text-action {
  display: inline-flex;
  width: max-content;
  align-items: center;
  margin-top: 18px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, .38);
  background: transparent;
  color: #cbd5e1;
  font-size: .86rem;
  font-weight: 760;
  transition: color .16s ease, border-color .16s ease;
}
.ah-serious-link:hover,
.ah-text-action:hover {
  color: #fde68a;
  border-color: rgba(250, 204, 21, .65);
}
.ah-serious-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 285px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-top: 42px;
}
.ah-serious-side-nav,
.ah-serious-info {
  position: sticky;
  top: 88px;
}
.ah-serious-side-nav nav {
  margin-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .10);
}
.ah-serious-side-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .10);
  color: #8391a5;
  font-size: .9rem;
  font-weight: 730;
  transition: color .16s ease, padding-left .16s ease;
}
.ah-serious-side-nav a small {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #56657a;
  font-size: .72rem;
  font-weight: 700;
}
.ah-serious-side-nav a:hover,
.ah-serious-side-nav a[aria-current="page"] {
  color: #f8fafc;
  padding-left: 8px;
}
.ah-serious-side-nav a[aria-current="page"] small { color: var(--ah-yellow); }
.ah-serious-main-list {
  min-width: 0;
}
.ah-serious-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.ah-serious-section-head h2 {
  margin-top: 8px;
  color: #f8fafc;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 800;
}
.ah-serious-section-head p {
  margin-top: 9px;
  max-width: 68ch;
  color: #7f8ea3;
  font-size: .94rem;
  line-height: 1.72;
}
.ah-serious-info {
  display: grid;
  gap: 34px;
  color: #7f8ea3;
  font-size: .92rem;
  line-height: 1.72;
}
.ah-serious-info section {
  border-left: 1px solid rgba(148, 163, 184, .14);
  padding-left: 20px;
}
.ah-serious-info h3 {
  margin-top: 10px;
  color: #e2e8f0;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 780;
  letter-spacing: -.025em;
}
.ah-serious-info p { margin-top: 10px; }
.ah-serious-steps,
.ah-serious-checklist {
  margin-top: 18px;
  display: grid;
  gap: 16px;
}
.ah-serious-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
}
.ah-serious-steps span {
  grid-row: span 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ah-yellow);
  font-size: .78rem;
  font-weight: 800;
}
.ah-serious-steps strong { color: #e2e8f0; font-weight: 780; }
.ah-serious-steps p { margin: 2px 0 0; }
.ah-serious-checklist li {
  position: relative;
  padding-left: 20px;
}
.ah-serious-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ah-yellow);
}
.ah-serious-small-actions a {
  display: inline-flex;
  border-bottom: 1px solid rgba(148, 163, 184, .38);
  color: #cbd5e1;
  font-weight: 760;
  padding-bottom: 3px;
}
.ah-serious-small-actions a:hover { color: #fde68a; border-color: rgba(250, 204, 21, .65); }
.ah-school-continue-serious {
  margin: 0;
  border-top: 0;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  padding: 22px 0;
}
.ah-school-list-frame { margin-top: 0; }
.ah-school-clean-list { border-top: 0; }
.ah-school-clean-list .ah-dash-module-row {
  padding: 22px 0;
  border-color: rgba(148, 163, 184, .12);
}
.ah-school-clean-list .ah-dash-module-index {
  border-radius: 0 !important;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, .12);
}
.ah-school-clean-list .ah-dash-module-main small {
  display: inline-flex;
  margin-top: 8px;
  color: #8391a5;
  font-size: .78rem;
  font-weight: 760;
}
.ah-dash-load-more {
  margin-top: 22px;
  cursor: pointer;
}
.ah-forum-list {
  border-top: 1px solid rgba(148, 163, 184, .12);
}
.ah-forum-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.ah-forum-row h3 {
  margin-top: 8px;
  color: #e2e8f0;
  font-size: 1.12rem;
  line-height: 1.35;
  letter-spacing: -.025em;
  font-weight: 800;
  transition: color .16s ease;
}
.ah-forum-row:hover h3 { color: #fde68a; }
.ah-forum-row p:not(.ah-forum-meta) {
  margin-top: 8px;
  max-width: 68ch;
  color: #7f8ea3;
  font-size: .92rem;
  line-height: 1.68;
}
.ah-forum-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: #8391a5;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-forum-meta span:first-child { color: var(--ah-yellow); }
.ah-forum-meta strong {
  color: #86efac;
  font-size: .7rem;
  font-weight: 800;
}
.ah-forum-row dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: right;
}
.ah-forum-row dt {
  color: #56657a;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ah-forum-row dd {
  margin-top: 4px;
  color: #cbd5e1;
  font-size: .88rem;
  font-weight: 760;
}
@media (max-width: 1100px) {
  .ah-serious-layout { grid-template-columns: 1fr; }
  .ah-serious-side-nav,
  .ah-serious-info { position: static; }
  .ah-serious-side-nav nav { display: flex; gap: 18px; overflow-x: auto; border-bottom: 1px solid rgba(148, 163, 184, .10); }
  .ah-serious-side-nav a { flex: 0 0 auto; border-bottom: 0; }
}
@media (max-width: 760px) {
  .ah-serious-shell { width: min(100% - 24px, 1180px); padding-top: 32px; }
  .ah-serious-hero-split { grid-template-columns: 1fr; }
  .ah-serious-aside { padding-left: 0; border-left: 0; border-top: 1px solid rgba(148, 163, 184, .12); padding-top: 24px; }
  .ah-serious-section-head { align-items: start; flex-direction: column; }
  .ah-forum-row { grid-template-columns: 1fr; }
  .ah-forum-row dl { text-align: left; max-width: 220px; }
}

/* Soft serious pages: fewer hard separators on Skola + Community. */
.ah-serious-page {
  background:
    radial-gradient(circle at 18% -10%, rgba(250, 204, 21, .038), transparent 28rem),
    radial-gradient(circle at 88% 2%, rgba(122, 162, 247, .06), transparent 34rem),
    var(--ah-bg);
}

.ah-serious-hero {
  border-bottom: 0 !important;
  padding-bottom: 46px;
}

.ah-serious-aside {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.ah-serious-aside::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: rgba(250, 204, 21, .5);
  margin-bottom: 18px;
}

.ah-serious-layout {
  padding-top: 18px !important;
}

.ah-serious-side-nav nav {
  border-top: 0 !important;
  display: grid;
  gap: 4px;
}

.ah-serious-side-nav a {
  border-bottom: 0 !important;
  padding: 10px 0 !important;
  color: #748399;
}

.ah-serious-side-nav a:hover,
.ah-serious-side-nav a[aria-current="page"] {
  padding-left: 0 !important;
  color: #f8fafc;
}

.ah-serious-side-nav a[aria-current="page"] span {
  position: relative;
}

.ah-serious-side-nav a[aria-current="page"] span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 999px;
  background: rgba(250, 204, 21, .72);
}

.ah-serious-section-head {
  border-bottom: 0 !important;
  padding-bottom: 16px !important;
}

.ah-serious-info section {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.ah-serious-info section + section {
  margin-top: 2px;
  padding-top: 24px;
}

.ah-school-continue-serious {
  border-bottom: 0 !important;
  padding: 20px 0 18px !important;
}

.ah-school-clean-list .ah-dash-module-row {
  border-bottom: 0 !important;
  padding: 18px 0 !important;
  position: relative;
}

.ah-school-clean-list .ah-dash-module-row + .ah-dash-module-row::before {
  content: "";
  position: absolute;
  left: 64px;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .13), transparent 78%);
}

.ah-school-clean-list .ah-dash-module-index {
  border: 0 !important;
  background: rgba(15, 23, 42, .34) !important;
}

.ah-school-clean-list .ah-dash-module-index.is-current {
  background: rgba(250, 204, 21, .08) !important;
}

.ah-school-clean-list .ah-dash-module-index.is-done {
  background: rgba(34, 197, 94, .08) !important;
}

.ah-forum-list {
  border-top: 0 !important;
}

.ah-forum-row {
  border-bottom: 0 !important;
  padding: 22px 0 !important;
  position: relative;
}

.ah-forum-row + .ah-forum-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .13), transparent 72%);
}

.ah-forum-row:hover h3 {
  color: #f8fafc !important;
}

.ah-forum-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, .20), transparent 70%);
}

@media (max-width: 1100px) {
  .ah-serious-side-nav nav {
    border-bottom: 0 !important;
  }
}

@media (max-width: 760px) {
  .ah-serious-aside {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  .ah-school-clean-list .ah-dash-module-row + .ah-dash-module-row::before {
    left: 48px;
  }
}


/* AskHackers text system — final typography pass.
   Plain Swedish copy, tighter hierarchy, fewer template patterns. */
:root {
  --ah-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ah-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ah-track-title: -0.052em;
  --ah-track-body: -0.011em;
  --ah-track-label: 0.105em;
  --ah-leading-title: 0.98;
  --ah-leading-body: 1.68;
  --ah-leading-ui: 1.38;
}
body {
  font-family: var(--ah-font-sans);
  letter-spacing: var(--ah-track-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.font-mono, code, pre,
.ah-kicker,
.ah-home-kicker,
.ah-serious-eyebrow,
.ah-serious-kicker,
.ah-doc-eyebrow,
.ah-doc-section-label,
.ah-page-eyebrow {
  font-family: var(--ah-font-code);
}
.ah-home-title,
.ah-serious-hero h1,
.ah-doc-header-clean h1,
.ah-doc-header h1,
.ah-profile-hero h1,
.ah-product-title {
  letter-spacing: var(--ah-track-title) !important;
  line-height: var(--ah-leading-title) !important;
  font-weight: 790 !important;
}
.ah-home-title {
  font-size: clamp(2.65rem, 7vw, 5.65rem) !important;
}
.ah-serious-hero h1 {
  font-size: clamp(2.75rem, 5.8vw, 4.85rem) !important;
  max-width: 720px;
}
.ah-product-title {
  margin-top: .75rem;
  max-width: 760px;
  color: var(--ah-text);
  font-size: clamp(2.15rem, 4.4vw, 3.6rem);
}
.ah-product-title-compact {
  font-size: clamp(2rem, 3.9vw, 3.2rem);
}
.ah-home-lead,
.ah-serious-lead,
.ah-doc-lead,
.ah-profile-hero p,
.ah-product-lead {
  line-height: var(--ah-leading-body) !important;
  letter-spacing: var(--ah-track-body);
}
.ah-home-lead,
.ah-serious-lead,
.ah-product-lead {
  font-size: clamp(1rem, 1.15vw, 1.1rem) !important;
  max-width: 64ch;
}
.ah-page-eyebrow,
.ah-home-kicker,
.ah-serious-eyebrow,
.ah-serious-kicker,
.ah-doc-eyebrow,
.ah-doc-section-label {
  letter-spacing: var(--ah-track-label) !important;
  font-weight: 720 !important;
}
.ah-btn,
.ah-dash-link,
.ah-dash-row-link,
.ah-serious-link {
  letter-spacing: -0.006em;
}
.ah-readable p,
.ah-serious-main-list p,
.ah-forum-list p,
.ah-school-row p {
  line-height: var(--ah-leading-body);
}
.ah-serious-hero {
  padding-bottom: 40px !important;
}
.ah-serious-aside::before {
  width: 34px !important;
  opacity: .72;
}
.ah-product-surface {
  background: rgba(17, 28, 46, .72);
  border: 1px solid var(--ah-border);
  border-radius: 24px;
}
@media (max-width: 720px) {
  .ah-home-title { font-size: clamp(2.45rem, 15vw, 3.8rem) !important; }
  .ah-serious-hero h1 { font-size: clamp(2.35rem, 13vw, 3.55rem) !important; }
  .ah-product-title { font-size: clamp(2.05rem, 12vw, 3.1rem); }
}

/* Homepage ecosystem previews: Skola + Kodarenan + Leaderboard + Community. */
.ah-home-hero-updated {
  min-height: calc(92dvh - 64px);
}
.ah-home-intro-section {
  padding-top: clamp(52px, 7vw, 88px);
}
.ah-home-platform-list {
  margin-top: 36px;
  display: grid;
  gap: 18px;
}
.ah-home-platform-list a {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
  padding: 18px 0;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.ah-home-platform-list a + a::before,
.ah-home-step-row + .ah-home-step-row::before,
.ah-home-problem-row + .ah-home-problem-row::before,
.ah-home-community-preview a + a::before,
.ah-home-rank-list div + div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 64px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .12), transparent 75%);
}
.ah-home-platform-list span,
.ah-home-step-row > span,
.ah-home-problem-row > span {
  color: var(--ah-text-muted);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .82rem;
  padding-top: 2px;
}
.ah-home-platform-list strong,
.ah-home-step-row strong,
.ah-home-problem-row strong,
.ah-home-community-preview strong {
  display: block;
  color: var(--ah-text-strong, #f8fafc);
  font-size: 1.02rem;
  letter-spacing: -.012em;
}
.ah-home-platform-list p,
.ah-home-step-row p,
.ah-home-problem-row p,
.ah-home-community-preview p,
.ah-home-weekly-note p,
.ah-home-rank-card p {
  margin-top: 6px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .94rem;
  line-height: 1.65;
}
.ah-home-platform-list a:hover strong,
.ah-home-community-preview a:hover strong {
  color: #fff;
}
.ah-home-inline-link {
  margin-top: 28px !important;
}
.ah-home-inline-link a {
  color: var(--ah-text-strong, #f8fafc);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 199, 102, .5);
  padding-bottom: 4px;
  font-weight: 720;
}
.ah-home-inline-link a:hover {
  border-color: rgba(248, 250, 252, .75);
}
.ah-home-preview-layout {
  align-items: center;
}
.ah-home-lesson-preview,
.ah-home-arena-preview,
.ah-home-leaderboard-preview,
.ah-home-community-preview {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(17, 28, 46, .68), rgba(10, 20, 35, .46));
  border: 1px solid rgba(148, 163, 184, .12);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .16);
}
.ah-home-preview-head,
.ah-home-arena-status,
.ah-home-rank-card {
  margin-bottom: 18px;
}
.ah-home-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--ah-text-muted, #94a3b8);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
}
.ah-home-preview-head strong {
  color: var(--ah-yellow, #e8c766);
  font-weight: 650;
}
.ah-home-step-row,
.ah-home-problem-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.ah-home-step-row em,
.ah-home-problem-row a {
  color: var(--ah-text, #cbd5e1);
  font-size: .88rem;
  font-style: normal;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}
.ah-home-step-row.is-current > span {
  color: var(--ah-yellow, #e8c766);
}
.ah-home-step-row.is-current em,
.ah-home-problem-row a {
  color: var(--ah-yellow, #e8c766);
}
.ah-home-step-row.is-muted {
  opacity: .68;
}
.ah-home-arena-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ah-home-arena-status div {
  padding: 14px 0;
}
.ah-home-arena-status span,
.ah-home-rank-card span,
.ah-home-preview-label,
.ah-home-rank-list > p,
.ah-home-community-preview a span {
  display: block;
  color: var(--ah-text-muted, #94a3b8);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-home-arena-status strong,
.ah-home-rank-card strong {
  display: block;
  margin-top: 7px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: 1.05rem;
}
.ah-home-weekly-note {
  margin-top: 18px;
  padding-top: 18px;
  background: linear-gradient(90deg, rgba(122, 162, 247, .08), transparent 72%);
  border-radius: 18px;
}
.ah-home-weekly-note strong {
  color: var(--ah-text-strong, #f8fafc);
}
.ah-home-leaderboard-preview {
  display: grid;
  gap: 22px;
}
.ah-home-rank-card strong {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  letter-spacing: -.04em;
}
.ah-home-rank-list div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}
.ah-home-rank-list div span,
.ah-home-rank-list div em {
  color: var(--ah-text-muted, #94a3b8);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .82rem;
  font-style: normal;
}
.ah-home-rank-list div strong {
  color: var(--ah-text, #cbd5e1);
  font-weight: 650;
}
.ah-home-community-preview a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 18px 0;
  position: relative;
}
.ah-home-community-preview .ah-home-preview-label {
  margin-bottom: 6px;
}
.ah-home-community-preview a span {
  margin-bottom: 8px;
  color: var(--ah-blue, #7aa2f7);
}
@media (max-width: 760px) {
  .ah-home-platform-list a,
  .ah-home-step-row,
  .ah-home-problem-row,
  .ah-home-rank-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ah-home-platform-list a + a::before,
  .ah-home-step-row + .ah-home-step-row::before,
  .ah-home-problem-row + .ah-home-problem-row::before,
  .ah-home-community-preview a + a::before,
  .ah-home-rank-list div + div::before {
    left: 0;
  }
  .ah-home-arena-status {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ah-home-step-row em,
  .ah-home-problem-row a {
    justify-self: start;
  }
}

/* Fix homepage intro layout: keep number, title and text in a stable two-column row. */
.ah-home-platform-list a > span {
  grid-row: 1 / span 2;
}
.ah-home-platform-list a > strong,
.ah-home-platform-list a > p {
  grid-column: 2;
}
.ah-home-platform-list a > p {
  margin-top: 0;
  max-width: 58ch;
}
@media (max-width: 760px) {
  .ah-home-platform-list a > span,
  .ah-home-platform-list a > strong,
  .ah-home-platform-list a > p {
    grid-column: auto;
    grid-row: auto;
  }
  .ah-home-platform-list a > p {
    margin-top: 2px;
  }
}

/* Senior workspace polish: LeetCode-inspired layout, AskHackers tone.
   Three real panels, draggable splitters, quiet tabs, independent scroll areas. */
.ah-code-workspace {
  --left-panel: 390px;
  --right-panel: 390px;
  display: grid !important;
  grid-template-columns: minmax(280px, var(--left-panel)) 8px minmax(520px, 1fr) 8px minmax(300px, var(--right-panel)) !important;
  height: calc(100vh - 118px);
  min-height: 720px;
  background: #070b16 !important;
}

.ah-code-workspace > .ah-html-left,
.ah-code-workspace > .ah-html-editor,
.ah-code-workspace > .ah-html-right {
  min-width: 0;
  min-height: 0;
  border-radius: 0 !important;
}

.ah-code-workspace > .ah-html-left {
  background: #0b1020 !important;
  box-shadow: inset -1px 0 0 rgba(30,41,59,.48) !important;
}

.ah-code-workspace > .ah-html-editor {
  background: #070b16 !important;
  box-shadow: inset 0 0 0 1px rgba(30,41,59,.34) !important;
}

.ah-code-workspace > .ah-html-right {
  background: #0b1020 !important;
  box-shadow: inset 1px 0 0 rgba(30,41,59,.48) !important;
}

.ah-panel-resizer {
  position: relative;
  z-index: 20;
  cursor: col-resize;
  background: #050816;
}

.ah-panel-resizer::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 999px;
  background: rgba(51,65,85,.44);
  opacity: .45;
  transition: background .18s ease, opacity .18s ease;
}

.ah-panel-resizer:hover::before,
.is-resizing-panels .ah-panel-resizer::before {
  background: rgba(250,204,21,.72);
  opacity: .85;
}

.is-resizing-panels {
  cursor: col-resize !important;
  user-select: none !important;
}

.ah-panel-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.ah-panel-tab {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.01em;
  transition: color .16s ease, background .16s ease;
}

.ah-panel-tab:hover {
  color: #e5e7eb;
  background: rgba(148,163,184,.08);
}

.ah-panel-tab.is-active {
  color: #f8fafc;
  background: rgba(148,163,184,.12);
}

.ah-html-left-head {
  padding-top: 14px !important;
}

.ah-html-left-head > .ah-panel-tabs {
  margin-bottom: 18px;
}

.ah-editor-tabs {
  flex: 0 1 auto;
  overflow: hidden;
}

.ah-editor-tabs .ah-panel-tab {
  border-radius: 7px 7px 0 0;
  min-height: 28px;
}

.ah-result-tabs .ah-panel-tab {
  min-height: 26px;
  padding: 5px 9px;
  font-size: .74rem;
}

.ah-code-workspace .ah-html-left-scroll,
.ah-code-workspace .ah-html-editor-mount,
.ah-code-workspace .ah-terminal-output,
.ah-code-workspace #testOutput {
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.5) transparent;
}

.ah-code-workspace .ah-html-left-scroll::-webkit-scrollbar,
.ah-code-workspace .ah-html-editor-mount::-webkit-scrollbar,
.ah-code-workspace .ah-terminal-output::-webkit-scrollbar,
.ah-code-workspace #testOutput::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.ah-code-workspace .ah-html-left-scroll::-webkit-scrollbar-thumb,
.ah-code-workspace .ah-html-editor-mount::-webkit-scrollbar-thumb,
.ah-code-workspace .ah-terminal-output::-webkit-scrollbar-thumb,
.ah-code-workspace #testOutput::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.38);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.ah-code-workspace .ah-html-left-scroll::-webkit-scrollbar-thumb:hover,
.ah-code-workspace .ah-html-editor-mount::-webkit-scrollbar-thumb:hover,
.ah-code-workspace .ah-terminal-output::-webkit-scrollbar-thumb:hover,
.ah-code-workspace #testOutput::-webkit-scrollbar-thumb:hover {
  background: rgba(250,204,21,.65);
  border: 3px solid transparent;
  background-clip: content-box;
}

.ah-code-workspace .ah-exercise-toggle {
  border-radius: 10px;
  margin-inline: -8px;
  padding: 10px 8px !important;
}

.ah-code-workspace .ah-exercise-toggle:hover {
  background: rgba(148,163,184,.055);
}

.ah-code-workspace .ah-exercise-item.is-active .ah-exercise-toggle {
  background: rgba(96,165,250,.08);
}

.ah-code-workspace .ah-html-editor-topbar {
  gap: 14px;
}

.ah-code-workspace .CodeMirror {
  height: 100% !important;
  font-size: 13.5px !important;
  line-height: 1.68 !important;
}

.ah-code-workspace .CodeMirror-gutters {
  padding-right: 5px;
}

.ah-code-workspace .ah-html-tests {
  min-height: 260px;
  height: 38%;
}

.ah-code-workspace #testOutput {
  max-height: 100%;
  overflow: auto;
}

@media (max-width: 1100px) {
  .ah-code-workspace {
    display: block !important;
    height: auto;
    min-height: 0;
  }
  .ah-panel-resizer { display: none; }
  .ah-code-workspace > .ah-html-left,
  .ah-code-workspace > .ah-html-editor,
  .ah-code-workspace > .ah-html-right {
    min-height: auto;
    box-shadow: inset 0 -1px 0 rgba(30,41,59,.44) !important;
  }
  .ah-code-workspace .ah-html-left-scroll {
    max-height: none;
  }
}

/* Workspace v2: one description panel + right-side stack like a professional problem page.
   Left side scrolls alone. Right side has code editor on top and test/terminal panel below. */
.ah-code-workspace {
  --left-panel: 43%;
  --bottom-panel: 285px;
  display: grid !important;
  grid-template-columns: minmax(340px, var(--left-panel)) 8px minmax(0, 1fr) !important;
  grid-template-rows: minmax(360px, 1fr) 8px minmax(210px, var(--bottom-panel)) !important;
  height: calc(100dvh - 118px);
  min-height: 680px;
  background: #050816 !important;
}

.ah-code-workspace > .ah-html-left {
  grid-column: 1;
  grid-row: 1 / 4;
  background: #0b1020 !important;
  box-shadow: inset -1px 0 0 rgba(30,41,59,.45) !important;
}

.ah-code-workspace > .ah-panel-resizer-left {
  grid-column: 2;
  grid-row: 1 / 4;
  cursor: col-resize;
}

.ah-code-workspace > .ah-html-editor {
  grid-column: 3;
  grid-row: 1;
  background: #07101f !important;
  box-shadow: inset 0 -1px 0 rgba(30,41,59,.55) !important;
}

.ah-code-workspace > .ah-panel-resizer-bottom {
  grid-column: 3;
  grid-row: 2;
  cursor: row-resize;
  background: #050816;
}

.ah-code-workspace > .ah-panel-resizer-bottom::before {
  inset: 3px 0;
  width: auto;
  height: auto;
}

.ah-code-workspace > .ah-html-right {
  grid-column: 3;
  grid-row: 3;
  background: #0b1020 !important;
  box-shadow: inset 0 1px 0 rgba(30,41,59,.55) !important;
}

.ah-code-workspace > .ah-panel-resizer-right { display: none !important; }

.ah-code-workspace .ah-html-left-head,
.ah-code-workspace .ah-html-editor-topbar,
.ah-code-workspace .ah-results-topbar {
  min-height: 44px;
  padding: 10px 14px !important;
  background: rgba(15,23,42,.72) !important;
  border-bottom: 1px solid rgba(30,41,59,.72) !important;
}

.ah-code-workspace .ah-html-left-head {
  padding-bottom: 14px !important;
}

.ah-code-workspace .ah-html-left-head > .ah-panel-tabs {
  margin-bottom: 14px;
}

.ah-code-workspace .ah-html-left-scroll {
  padding: 18px 20px 22px !important;
}

.ah-code-workspace .ah-html-left-footer {
  border-top: 1px solid rgba(30,41,59,.58) !important;
  background: rgba(2,6,23,.42) !important;
}

.ah-code-workspace .ah-html-editor-actions {
  min-height: 46px;
  background: rgba(2,6,23,.72) !important;
  border-top: 1px solid rgba(30,41,59,.68) !important;
}

.ah-code-workspace .ah-results-shell {
  height: 100%;
  background: #0b1020 !important;
}

.ah-code-workspace .ah-result-view {
  display: none;
  background: #07101f !important;
}

.ah-code-workspace .ah-result-view.is-active {
  display: block;
}

.ah-code-workspace .ah-result-view[data-result-view="output"].is-active {
  display: flex;
  flex-direction: column;
}

.ah-code-workspace #testOutput {
  height: 100%;
  max-height: none;
  overflow: auto;
  background: #07101f !important;
}

.ah-code-workspace .ah-terminal,
.ah-code-workspace .ah-terminal-output {
  background: #07101f !important;
}

.ah-code-workspace .ah-terminal-header {
  background: rgba(2,6,23,.55) !important;
  border-bottom: 1px solid rgba(30,41,59,.56) !important;
}

.is-resizing-panels-y {
  cursor: row-resize !important;
  user-select: none !important;
}

@media (max-width: 1100px) {
  .ah-code-workspace {
    display: block !important;
    height: auto;
    min-height: 0;
  }
  .ah-code-workspace > .ah-panel-resizer-bottom,
  .ah-code-workspace > .ah-panel-resizer-left {
    display: none !important;
  }
  .ah-code-workspace > .ah-html-editor,
  .ah-code-workspace > .ah-html-right {
    min-height: 420px;
  }
}

/* Homepage 2026: product miniatures + snake hero. */
.ah-index-game-preview main {
  overflow: hidden;
}
.ah-index-snake-hero {
  min-height: calc(88dvh - 64px);
  padding-block: clamp(56px, 7vw, 108px) clamp(38px, 6vw, 82px);
  background:
    radial-gradient(circle at 18% 8%, rgba(232, 199, 102, .13), transparent 29rem),
    radial-gradient(circle at 82% 16%, rgba(122, 162, 247, .16), transparent 32rem),
    linear-gradient(180deg, rgba(7, 17, 31, .38), rgba(7, 17, 31, 0));
}
.ah-index-snake-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.ah-index-snake-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.ah-index-hero-pulse {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ah-index-hero-pulse span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(17, 28, 46, .56);
  color: var(--ah-text-muted, #94a3b8);
  border: 1px solid rgba(148, 163, 184, .11);
  padding: 8px 12px;
  font-size: .83rem;
  line-height: 1;
}
.ah-index-hero-stage {
  position: relative;
  min-height: clamp(440px, 42vw, 620px);
}
.ah-index-hero-snake {
  position: absolute;
  inset: -8% -10% -4% -18%;
  margin: 0;
  opacity: .95;
  pointer-events: none;
  filter: drop-shadow(0 34px 84px rgba(0, 0, 0, .35));
}
.ah-index-hero-snake img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
}
.ah-index-hero-stage::before {
  content: "";
  position: absolute;
  inset: 8% 0 12% 8%;
  border-radius: 42px;
  background:
    linear-gradient(rgba(219, 228, 239, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 228, 239, .035) 1px, transparent 1px),
    radial-gradient(circle at 65% 40%, rgba(122, 162, 247, .13), transparent 22rem),
    rgba(17, 28, 46, .22);
  background-size: 28px 28px, 28px 28px, auto, auto;
  border: 1px solid rgba(148, 163, 184, .08);
}
.ah-index-floating-card {
  position: absolute;
  z-index: 2;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 24px;
  background: rgba(8, 18, 32, .78);
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}
.ah-index-floating-card span {
  display: block;
  color: var(--ah-text-muted, #94a3b8);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-index-floating-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: 1.12rem;
}
.ah-index-floating-card p {
  margin-top: 8px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .9rem;
  line-height: 1.55;
}
.ah-index-floating-card-main {
  left: 2%;
  bottom: 6%;
  width: min(320px, 58%);
  padding: 20px;
}
.ah-index-floating-card-small {
  right: 4%;
  top: 12%;
  padding: 16px 18px;
}
.ah-index-floating-card-small strong {
  color: var(--ah-yellow, #e8c766);
}
.ah-index-showcase {
  padding-block: clamp(72px, 9vw, 128px);
}
.ah-index-showcase-head {
  max-width: 760px;
  margin-bottom: clamp(30px, 5vw, 56px);
}
.ah-index-showcase-head h2,
.ah-index-community-strip h2,
.ah-index-final-clean h2 {
  margin-top: 10px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 860;
}
.ah-index-showcase-head p,
.ah-index-community-strip p,
.ah-index-final-clean p {
  margin-top: 16px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: 1.03rem;
  line-height: 1.75;
  max-width: 64ch;
}
.ah-index-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: 20px;
  align-items: stretch;
}
.ah-index-preview-card {
  min-width: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(17, 28, 46, .74), rgba(10, 20, 35, .52));
  border: 1px solid rgba(148, 163, 184, .11);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .16);
}
.ah-index-preview-editor {
  grid-row: span 2;
}
.ah-index-preview-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.ah-index-preview-card-head h3 {
  margin-top: 7px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  font-weight: 820;
}
.ah-index-preview-card-head a {
  color: var(--ah-yellow, #e8c766);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 760;
  white-space: nowrap;
}
.ah-index-editor-mini {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(7, 17, 31, .68);
  border: 1px solid rgba(148, 163, 184, .10);
}
.ah-index-editor-left {
  padding: 18px;
  background: rgba(17, 28, 46, .72);
  border-right: 1px solid rgba(148, 163, 184, .10);
}
.ah-index-mini-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.ah-index-mini-tabs span {
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--ah-text-muted, #94a3b8);
  background: rgba(148, 163, 184, .06);
  font-size: .78rem;
  font-weight: 700;
}
.ah-index-mini-tabs .is-active {
  color: #07111f;
  background: var(--ah-yellow, #e8c766);
}
.ah-index-editor-left strong {
  display: block;
  color: var(--ah-text-strong, #f8fafc);
  font-size: 1.03rem;
}
.ah-index-editor-left p {
  margin-top: 8px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .88rem;
  line-height: 1.55;
}
.ah-index-exercise-pill {
  margin-top: 16px;
  border-radius: 16px;
  padding: 12px;
  color: var(--ah-text-muted, #94a3b8);
  background: rgba(7, 17, 31, .58);
  font-size: .86rem;
  font-weight: 760;
}
.ah-index-exercise-pill.is-done {
  color: var(--ah-green, #8bd88b);
}
.ah-index-editor-right {
  display: grid;
  grid-template-rows: 1fr 96px;
  min-width: 0;
}
.ah-index-code-mini {
  padding: 22px;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .92rem;
  line-height: 1.9;
  color: var(--ah-text, #cbd5e1);
}
.ah-index-code-mini div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
}
.ah-index-code-mini span {
  color: rgba(148, 163, 184, .42);
  text-align: right;
}
.ah-index-code-mini code {
  color: var(--ah-text-strong, #f8fafc);
}
.ah-index-test-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(17, 28, 46, .74);
  border-top: 1px solid rgba(148, 163, 184, .10);
}
.ah-index-test-mini span {
  color: var(--ah-text-muted, #94a3b8);
  font-size: .82rem;
  font-weight: 740;
}
.ah-index-test-mini strong {
  color: var(--ah-green, #8bd88b);
  font-size: .92rem;
}
.ah-index-problem-mini {
  display: grid;
  gap: 10px;
}
.ah-index-problem-mini a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.ah-index-problem-mini a + a::before,
.ah-index-rank-mini li + li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .10), transparent 70%);
}
.ah-index-problem-mini span,
.ah-index-rank-mini li span,
.ah-index-rank-mini li em,
.ah-index-your-rank span {
  color: var(--ah-text-muted, #94a3b8);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-style: normal;
}
.ah-index-problem-mini strong,
.ah-index-rank-mini li strong {
  display: block;
  color: var(--ah-text-strong, #f8fafc);
  font-size: .98rem;
}
.ah-index-problem-mini p {
  margin-top: 5px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .84rem;
}
.ah-index-problem-mini em {
  color: var(--ah-yellow, #e8c766);
  font-style: normal;
  font-size: .85rem;
  font-weight: 780;
}
.ah-index-problem-mini .is-ready span {
  color: var(--ah-yellow, #e8c766);
}
.ah-index-rank-mini {
  display: grid;
  gap: 18px;
}
.ah-index-your-rank {
  border-radius: 22px;
  background: rgba(7, 17, 31, .54);
  padding: 18px;
}
.ah-index-your-rank strong {
  display: block;
  margin-top: 8px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: 1.6rem;
  letter-spacing: -.04em;
}
.ah-index-your-rank p {
  margin-top: 8px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .9rem;
  line-height: 1.5;
}
.ah-index-rank-mini ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ah-index-rank-mini li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  position: relative;
}
.ah-index-rank-mini li em {
  color: var(--ah-yellow, #e8c766);
}
.ah-index-community-strip {
  padding-block: clamp(54px, 7vw, 96px);
}
.ah-index-community-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 32px;
  background: linear-gradient(90deg, rgba(17, 28, 46, .72), rgba(7, 17, 31, .48));
  border: 1px solid rgba(148, 163, 184, .10);
  padding: clamp(24px, 4vw, 42px);
}
.ah-index-community-strip a {
  flex: 0 0 auto;
  color: #07111f;
  background: var(--ah-yellow, #e8c766);
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 820;
  text-decoration: none;
}
.ah-index-final-clean {
  padding-top: clamp(56px, 8vw, 108px);
}
@media (max-width: 980px) {
  .ah-index-snake-grid,
  .ah-index-preview-grid {
    grid-template-columns: 1fr;
  }
  .ah-index-hero-stage {
    min-height: 420px;
  }
  .ah-index-preview-editor {
    grid-row: auto;
  }
}
@media (max-width: 720px) {
  .ah-index-snake-hero {
    min-height: auto;
  }
  .ah-index-hero-stage {
    min-height: 360px;
  }
  .ah-index-hero-snake {
    inset: -2% -28% 0 -30%;
    opacity: .72;
  }
  .ah-index-floating-card-main {
    left: 0;
    bottom: 0;
    width: min(310px, 82%);
  }
  .ah-index-floating-card-small {
    right: 0;
    top: 24px;
  }
  .ah-index-editor-mini {
    grid-template-columns: 1fr;
  }
  .ah-index-editor-left {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .10);
  }
  .ah-index-problem-mini a,
  .ah-index-rank-mini li {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ah-index-community-strip-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Index: real product miniatures instead of text cards.
   These previews borrow the shapes from lesson workspace, arena rows and leaderboard. */
.ah-index-inside {
  padding-block: clamp(64px, 8vw, 118px);
}
.ah-index-inside-head {
  max-width: 760px;
  margin-bottom: clamp(28px, 5vw, 52px);
}
.ah-index-inside-head h2 {
  margin-top: 10px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 860;
}
.ah-index-inside-head p {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--ah-text-muted, #94a3b8);
  font-size: 1rem;
  line-height: 1.7;
}
.ah-index-product-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}
.ah-index-mini-workspace,
.ah-index-mini-arena,
.ah-index-mini-leaderboard {
  display: block;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .13);
  background: rgba(7, 17, 31, .76);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .22);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.ah-index-mini-workspace:hover,
.ah-index-mini-arena:hover,
.ah-index-mini-leaderboard:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 199, 102, .28);
  background: rgba(10, 20, 35, .9);
}
.ah-index-mini-workspace {
  border-radius: 28px;
  min-height: 560px;
}
.ah-mini-workspace-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
  background: rgba(9, 21, 37, .78);
}
.ah-mini-workspace-bar span,
.ah-mini-side-head span,
.ah-mini-rank-card p {
  display: block;
  color: var(--ah-text-muted, #94a3b8);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
  letter-spacing: .04em;
}
.ah-mini-workspace-bar strong,
.ah-mini-side-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ah-text-strong, #f8fafc);
  font-weight: 820;
}
.ah-mini-workspace-bar em {
  color: var(--ah-yellow, #e8c766);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-style: normal;
}
.ah-mini-workspace-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: 500px;
}
.ah-mini-lesson-pane {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid rgba(148, 163, 184, .10);
  background: rgba(13, 22, 38, .76);
  overflow: hidden;
}
.ah-mini-tab-row,
.ah-mini-editor-tabs,
.ah-mini-terminal-pane > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ah-mini-tab-row span,
.ah-mini-editor-tabs span,
.ah-mini-terminal-pane span {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(148, 163, 184, .065);
  color: var(--ah-text-muted, #94a3b8);
  font-size: .72rem;
  font-weight: 740;
}
.ah-mini-tab-row .is-active,
.ah-mini-editor-tabs .is-active,
.ah-mini-terminal-pane .is-active {
  color: #07111f;
  background: var(--ah-yellow, #e8c766);
}
.ah-mini-lesson-pane h3 {
  margin-top: 20px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: 1.08rem;
  letter-spacing: -.025em;
  font-weight: 820;
}
.ah-mini-lesson-pane p {
  margin-top: 9px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .87rem;
  line-height: 1.6;
}
.ah-mini-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 0;
  background: linear-gradient(90deg, rgba(148, 163, 184, .07), transparent);
  border-radius: 14px;
}
.ah-mini-step b {
  padding-left: 12px;
  color: var(--ah-yellow, #e8c766);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .82rem;
}
.ah-mini-step span {
  color: var(--ah-text-strong, #f8fafc);
  font-size: .9rem;
  font-weight: 760;
}
.ah-mini-step small {
  padding-right: 12px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .74rem;
  font-weight: 780;
}
.ah-mini-step.is-active small { color: var(--ah-green, #8bd88b); }
.ah-mini-code-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 136px;
  min-width: 0;
  background: var(--ah-editor-bg, #07111f);
}
.ah-mini-editor-pane {
  min-width: 0;
  overflow: hidden;
}
.ah-mini-editor-tabs {
  min-height: 46px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .10);
  background: rgba(9, 21, 37, .58);
}
.ah-mini-code-lines {
  padding: 20px 18px;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .9rem;
  line-height: 2;
}
.ah-mini-code-lines div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
}
.ah-mini-code-lines span {
  color: #66758a;
  text-align: right;
}
.ah-mini-code-lines code {
  color: var(--ah-text-code, #dbe4ef);
}
.ah-mini-terminal-pane {
  border-top: 1px solid rgba(148, 163, 184, .10);
  background: var(--ah-terminal-bg, #050b14);
  padding: 14px 16px;
}
.ah-mini-terminal-pane p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: var(--ah-green, #8bd88b);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .86rem;
  font-weight: 740;
}
.ah-mini-terminal-pane i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ah-green, #8bd88b);
  box-shadow: 0 0 0 4px rgba(139, 216, 139, .08);
}
.ah-index-mini-side {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}
.ah-index-mini-arena,
.ah-index-mini-leaderboard {
  border-radius: 26px;
  padding: 18px;
}
.ah-mini-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.ah-mini-arena-table,
.ah-mini-board-table {
  overflow: hidden;
  border-radius: 20px;
  background: rgba(17, 28, 46, .72);
  border: 1px solid rgba(148, 163, 184, .10);
}
.ah-mini-arena-head {
  display: grid;
  grid-template-columns: 58px 1fr 48px;
  gap: 10px;
  padding: 10px 13px;
  background: rgba(13, 22, 38, .78);
  color: var(--ah-text-muted, #94a3b8);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ah-mini-arena-row,
.ah-mini-board-table div {
  display: grid;
  align-items: center;
  gap: 10px;
  position: relative;
}
.ah-mini-arena-row {
  grid-template-columns: 58px 1fr 48px;
  padding: 13px;
}
.ah-mini-arena-row + .ah-mini-arena-row,
.ah-mini-board-table div + div {
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.ah-mini-arena-row b,
.ah-mini-board-table b {
  color: var(--ah-yellow, #e8c766);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .82rem;
}
.ah-mini-arena-row span,
.ah-mini-board-table span {
  color: var(--ah-text-strong, #f8fafc);
  font-size: .9rem;
  font-weight: 780;
  min-width: 0;
}
.ah-mini-arena-row small,
.ah-mini-board-table small,
.ah-mini-rank-card small {
  display: block;
  margin-top: 4px;
  color: var(--ah-text-muted, #94a3b8);
  font-size: .74rem;
  font-weight: 620;
}
.ah-mini-arena-row em,
.ah-mini-board-table em {
  color: var(--ah-yellow, #e8c766);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}
.ah-mini-arena-row.is-locked { opacity: .55; }
.ah-mini-rank-card {
  margin-bottom: 14px;
  border-radius: 22px;
  background: rgba(232, 199, 102, .10);
  border: 1px solid rgba(232, 199, 102, .22);
  padding: 16px;
}
.ah-mini-rank-card div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}
.ah-mini-rank-card strong {
  color: var(--ah-yellow, #e8c766);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 900;
}
.ah-mini-rank-card em {
  border-radius: 14px;
  background: var(--ah-yellow, #e8c766);
  color: #07111f;
  padding: 7px 10px;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
}
.ah-mini-board-table div {
  grid-template-columns: 42px 1fr 72px;
  padding: 13px;
}
.ah-mini-board-table em { color: var(--ah-yellow, #e8c766); }

@media (max-width: 1040px) {
  .ah-index-product-preview { grid-template-columns: 1fr; }
  .ah-index-mini-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ah-mini-workspace-body { grid-template-columns: 1fr; height: auto; }
  .ah-mini-lesson-pane { border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .10); }
  .ah-mini-code-stack { min-height: 360px; }
  .ah-index-mini-side { grid-template-columns: 1fr; }
  .ah-mini-workspace-bar { align-items: flex-start; flex-direction: column; }
}

/* Index: clean product miniatures (editor + theory + leaderboard). */
.ah-index-showcase {
  padding-block: clamp(68px, 8vw, 120px);
  position: relative;
}
.ah-index-showcase::before {
  content: "";
  position: absolute;
  inset: 10% 0 auto;
  height: 420px;
  background: radial-gradient(circle at 18% 35%, rgba(232, 199, 102, .11), transparent 34%),
              radial-gradient(circle at 80% 65%, rgba(37, 99, 235, .13), transparent 36%);
  pointer-events: none;
  opacity: .75;
}
.ah-index-showcase-head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-bottom: clamp(24px, 4vw, 42px);
}
.ah-index-showcase-head h2 {
  margin-top: 10px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: clamp(2.15rem, 4.6vw, 4rem);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 860;
}
.ah-showcase-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .72fr) minmax(300px, .86fr);
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}
.ah-showcase-grid a {
  color: inherit;
  text-decoration: none;
}
.ah-showcase-editor,
.ah-showcase-theory,
.ah-showcase-board {
  min-width: 0;
  border-radius: 30px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ah-showcase-editor:hover,
.ah-showcase-theory:hover,
.ah-showcase-board:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}
.ah-showcase-editor {
  background: #03070d;
  border: 1px solid rgba(148, 163, 184, .16);
  min-height: 410px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 80px rgba(0,0,0,.22);
}
.ah-showcase-windowbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #070d16;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
}
.ah-showcase-windowbar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .35);
}
.ah-showcase-windowbar span:first-child { background: rgba(248, 113, 113, .75); }
.ah-showcase-windowbar span:nth-child(2) { background: rgba(232, 199, 102, .82); }
.ah-showcase-windowbar span:nth-child(3) { background: rgba(139, 216, 139, .8); }
.ah-showcase-windowbar strong {
  margin-left: 12px;
  color: #9caaba;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-weight: 700;
}
.ah-showcase-editor-body {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 285px;
  background: linear-gradient(180deg, #02060b, #050b14);
}
.ah-showcase-gutter {
  padding-top: 22px;
  background: rgba(255,255,255,.018);
  border-right: 1px solid rgba(148, 163, 184, .08);
}
.ah-showcase-gutter span {
  display: block;
  height: 31px;
  color: #4f5f72;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  text-align: center;
}
.ah-showcase-editor pre {
  margin: 0;
  padding: 22px 18px;
  color: #d6e1ee;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: clamp(.82rem, 1.4vw, .96rem);
  line-height: 1.92;
  white-space: pre-wrap;
}
.ah-code-key { color: #93c5fd; }
.ah-code-string { color: #e8c766; }
.ah-code-fn { color: #8bd88b; }
.ah-code-comment { color: #64748b; }
.ah-showcase-tests {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px;
  background: #050b14;
  border-top: 1px solid rgba(148, 163, 184, .10);
}
.ah-showcase-tests span {
  color: #94a3b8;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
}
.ah-showcase-tests strong {
  color: #8bd88b;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .86rem;
}
.ah-showcase-theory {
  display: flex;
  align-items: stretch;
  background: rgba(232, 199, 102, .08);
  border: 1px solid rgba(232, 199, 102, .18);
  padding: 18px;
}
.ah-theory-paper {
  width: 100%;
  border-radius: 24px;
  background: rgba(9, 21, 37, .88);
  border: 1px solid rgba(255,255,255,.08);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ah-theory-label {
  width: max-content;
  border-radius: 999px;
  background: rgba(232, 199, 102, .13);
  color: var(--ah-yellow, #e8c766);
  padding: 7px 10px;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
  font-weight: 800;
}
.ah-theory-paper h3 {
  margin-top: 22px;
  color: #f8fafc;
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 860;
}
.ah-theory-paper p {
  margin-top: 14px;
  color: #a9b5c5;
  font-size: .95rem;
  line-height: 1.68;
}
.ah-theory-lines {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}
.ah-theory-lines span {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
}
.ah-theory-lines span:nth-child(1) { width: 92%; }
.ah-theory-lines span:nth-child(2) { width: 68%; }
.ah-theory-lines span:nth-child(3) { width: 84%; }
.ah-theory-code {
  margin-top: 24px;
  border-radius: 18px;
  background: #03070d;
  border: 1px solid rgba(148, 163, 184, .11);
  color: #dbeafe;
  padding: 16px;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .86rem;
  line-height: 1.8;
}
.ah-showcase-board {
  background: rgba(7, 17, 31, .82);
  border: 1px solid rgba(148, 163, 184, .13);
  padding: 20px;
  box-shadow: 0 28px 80px rgba(0,0,0,.20);
}
.ah-board-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.ah-board-top i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(232,199,102,.95), rgba(250,204,21,.7));
  color: #07111f;
  font-size: 1.55rem;
  box-shadow: 0 16px 44px rgba(232, 199, 102, .18);
}
.ah-board-top span {
  display: block;
  color: #94a3b8;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
}
.ah-board-top strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 1.2rem;
  letter-spacing: -.03em;
}
.ah-board-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ah-board-list li {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: rgba(17, 28, 46, .72);
  padding: 13px 14px;
}
.ah-board-list b {
  color: #e8c766;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .82rem;
}
.ah-board-list span {
  color: #f8fafc;
  font-weight: 780;
}
.ah-board-list em {
  color: #e8c766;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}
.ah-board-you {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(37, 99, 235, .12);
  border: 1px solid rgba(37, 99, 235, .20);
  padding: 14px 15px;
}
.ah-board-you span {
  color: #9caaba;
  font-size: .82rem;
}
.ah-board-you strong {
  color: #bfdbfe;
  font-size: .92rem;
}
@media (max-width: 1100px) {
  .ah-showcase-grid { grid-template-columns: 1fr 1fr; }
  .ah-showcase-editor { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ah-showcase-grid { grid-template-columns: 1fr; }
  .ah-index-showcase-head h2 { font-size: clamp(2rem, 11vw, 3rem); }
  .ah-showcase-editor-body { min-height: 240px; }
}

/* Index: VS Code miniature + awards preview. */
.ah-index-preview-lab {
  position: relative;
  padding-block: clamp(72px, 9vw, 126px);
  overflow: hidden;
}
.ah-index-preview-lab::before {
  content: "";
  position: absolute;
  inset: 8% -10% auto;
  height: 520px;
  background: radial-gradient(circle at 22% 30%, rgba(37, 99, 235, .16), transparent 36%),
              radial-gradient(circle at 78% 40%, rgba(232, 199, 102, .14), transparent 32%);
  opacity: .8;
  pointer-events: none;
}
.ah-preview-lab-head {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-bottom: clamp(28px, 4.5vw, 52px);
}
.ah-preview-lab-head h2 {
  margin-top: 10px;
  color: var(--ah-text-strong, #f8fafc);
  font-size: clamp(2.25rem, 4.8vw, 4.4rem);
  line-height: .94;
  letter-spacing: -.058em;
  font-weight: 860;
}
.ah-preview-lab-head p {
  margin-top: 18px;
  max-width: 650px;
  color: rgba(203, 213, 225, .78);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.72;
}
.ah-preview-lab-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
  gap: clamp(18px, 2.3vw, 28px);
  align-items: stretch;
}
.ah-preview-lab-grid a {
  color: inherit;
  text-decoration: none;
}
.ah-vscode-mini {
  overflow: hidden;
  min-height: 488px;
  border-radius: 28px;
  background: #02050a;
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 34px 110px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ah-vscode-mini:hover,
.ah-awards-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 38px 120px rgba(0,0,0,.38);
  border-color: rgba(232, 199, 102, .26);
}
.ah-vscode-titlebar {
  height: 42px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-inline: 16px;
  background: #111827;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.ah-vscode-traffic { display: flex; gap: 7px; }
.ah-vscode-traffic span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #64748b;
}
.ah-vscode-traffic span:nth-child(1) { background: #ef4444; }
.ah-vscode-traffic span:nth-child(2) { background: #e8c766; }
.ah-vscode-traffic span:nth-child(3) { background: #22c55e; }
.ah-vscode-titlebar strong {
  color: #cbd5e1;
  font-size: .82rem;
  font-weight: 720;
  justify-self: center;
}
.ah-vscode-titlebar em {
  color: #7f8ea3;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
  font-style: normal;
}
.ah-vscode-workbench {
  display: grid;
  grid-template-columns: 52px 170px minmax(0, 1fr);
  min-height: 446px;
  background: #0b1220;
}
.ah-vscode-sidebar {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding-top: 18px;
  background: #111827;
  border-right: 1px solid rgba(148, 163, 184, .10);
}
.ah-vscode-sidebar i {
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: rgba(148, 163, 184, .22);
}
.ah-vscode-sidebar i:first-child { background: rgba(232, 199, 102, .72); }
.ah-vscode-files {
  padding: 18px 14px;
  background: #0f172a;
  border-right: 1px solid rgba(148, 163, 184, .10);
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
}
.ah-vscode-files span {
  display: block;
  margin-bottom: 13px;
  color: #94a3b8;
  font-size: .68rem;
  letter-spacing: .08em;
}
.ah-vscode-files b {
  display: block;
  margin: 8px 0;
  color: #b8c4d6;
  font-size: .75rem;
  font-weight: 560;
}
.ah-vscode-files b:first-of-type {
  color: #f8fafc;
}
.ah-vscode-main {
  display: grid;
  grid-template-rows: 42px 1fr 128px;
  min-width: 0;
  background: #050a13;
}
.ah-vscode-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  background: #0b1220;
  border-bottom: 1px solid rgba(148, 163, 184, .10);
}
.ah-vscode-tabs span {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: #8090a4;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .73rem;
  background: #111827;
}
.ah-vscode-tabs .is-active {
  color: #e2e8f0;
  background: #050a13;
  box-shadow: inset 0 2px 0 var(--ah-yellow, #e8c766);
}
.ah-vscode-code {
  padding: 20px 0;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: clamp(.82rem, 1.18vw, .95rem);
  line-height: 1.9;
}
.ah-vscode-code .line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 31px;
}
.ah-vscode-code i {
  color: #475569;
  text-align: right;
  padding-right: 15px;
  font-style: normal;
  user-select: none;
}
.ah-vscode-code code {
  color: #dbeafe;
  padding-left: 16px;
  border-left: 1px solid rgba(148, 163, 184, .08);
}
.ah-vscode-code b { color: #93c5fd; font-weight: 600; }
.ah-vscode-code strong { color: #e8c766; font-weight: 500; }
.ah-vscode-code em { color: #8bd88b; font-style: normal; }
.ah-vscode-code small { color: #64748b; font-size: inherit; }
.ah-vscode-terminal {
  background: #02050a;
  border-top: 1px solid rgba(148, 163, 184, .12);
  padding: 14px 18px;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
}
.ah-vscode-terminal div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.ah-vscode-terminal span { color: #7f8ea3; font-size: .7rem; }
.ah-vscode-terminal strong { color: #8bd88b; font-size: .74rem; }
.ah-vscode-terminal p { margin: 0; color: #cbd5e1; font-size: .78rem; line-height: 1.7; }
.ah-vscode-terminal b { color: #f8fafc; }

.ah-awards-mini {
  position: relative;
  overflow: hidden;
  min-height: 488px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, .15);
  background: linear-gradient(180deg, rgba(9,21,37,.98), rgba(4,10,18,.96));
  padding: 24px;
  box-shadow: 0 34px 110px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ah-awards-mini::before {
  content: "";
  position: absolute;
  inset: -24% -28% auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(232,199,102,.20), transparent 62%);
  pointer-events: none;
}
.ah-awards-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 30px;
}
.ah-awards-head span {
  color: #94a3b8;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
}
.ah-awards-head strong {
  color: #f8fafc;
  font-size: 1.14rem;
  letter-spacing: -.035em;
}
.ah-podium {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 210px;
  margin-bottom: 24px;
}
.ah-podium-place {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  border-radius: 24px 24px 18px 18px;
  padding: 16px 10px 14px;
  background: rgba(15, 23, 42, .75);
  border: 1px solid rgba(148, 163, 184, .12);
}
.ah-podium-place.gold { min-height: 205px; background: linear-gradient(180deg, rgba(232,199,102,.18), rgba(15,23,42,.78)); border-color: rgba(232,199,102,.34); }
.ah-podium-place.silver { min-height: 165px; background: linear-gradient(180deg, rgba(203,213,225,.14), rgba(15,23,42,.74)); }
.ah-podium-place.bronze { min-height: 135px; background: linear-gradient(180deg, rgba(180,83,9,.18), rgba(15,23,42,.74)); }
.ah-podium-place i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  font-size: 1.55rem;
  color: #07111f;
  background: #cbd5e1;
}
.ah-podium-place.gold i { background: linear-gradient(135deg, #facc15, #e8c766); box-shadow: 0 18px 44px rgba(232,199,102,.20); }
.ah-podium-place.silver i { background: linear-gradient(135deg, #e2e8f0, #94a3b8); }
.ah-podium-place.bronze i { background: linear-gradient(135deg, #d97706, #92400e); color: #fff7ed; }
.ah-podium-place b {
  color: #f8fafc;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .92rem;
}
.ah-podium-place span {
  color: #a9b5c5;
  font-family: var(--ah-font-code, "JetBrains Mono", monospace);
  font-size: .72rem;
}
.ah-award-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ah-award-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .09);
  border: 1px solid rgba(148, 163, 184, .12);
  color: #cbd5e1;
  padding: 9px 11px;
  font-size: .78rem;
  font-weight: 650;
}
.ah-award-badges i { color: var(--ah-yellow, #e8c766); }
@media (max-width: 1080px) {
  .ah-preview-lab-grid { grid-template-columns: 1fr; }
  .ah-awards-mini { min-height: auto; }
}
@media (max-width: 720px) {
  .ah-vscode-workbench { grid-template-columns: 46px minmax(0, 1fr); }
  .ah-vscode-files { display: none; }
  .ah-vscode-mini { min-height: 430px; }
  .ah-vscode-main { grid-template-rows: 42px 1fr 118px; }
  .ah-podium { min-height: 185px; gap: 8px; }
  .ah-podium-place i { width: 42px; height: 42px; border-radius: 16px; }
}

/* Keep the green, remove the cyberpunk glow. */
:root {
  --ah-shadow-lime: none;
  --ah-shadow-card: 0 16px 42px rgba(0, 0, 0, 0.24);
}

body {
  background: linear-gradient(180deg, #070a0d 0%, #090d10 52%, #0d1419 100%) !important;
}

[class*="shadow-[0_0"],
[class*="hover:shadow-[0_0"],
.ah-btn-primary,
.ah-btn-success,
a[class*="bg-emerald-"],
button[class*="bg-emerald-"],
a[class*="bg-green-"],
button[class*="bg-green-"],
a[class*="bg-lime-"],
button[class*="bg-lime-"] {
  box-shadow: none !important;
}

[class*="bg-emerald-900/20"],
[class*="bg-emerald-500/5"],
[class*="group-hover:bg-emerald-500/15"] {
  display: none !important;
}

.bg-gradient-to-r.from-emerald-400,
.bg-gradient-to-r.from-emerald-500 {
  background-image: none !important;
  background-color: var(--ah-green) !important;
}

.text-transparent.bg-clip-text.bg-gradient-to-r {
  color: var(--ah-green) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.hover\:scale-105:hover {
  transform: none !important;
}

/* Serious learning platform color layer. Matte, calm, no glow. */
:root {
  color-scheme: dark;
  --ah-bg: #0b0f12;
  --ah-bg-soft: #10161b;
  --ah-panel: #151c22;
  --ah-panel-2: #1a232a;
  --ah-panel-3: #202a32;
  --ah-border: rgba(190, 205, 188, 0.14);
  --ah-border-soft: rgba(190, 205, 188, 0.09);
  --ah-border-strong: rgba(190, 205, 188, 0.23);
  --ah-text-strong: #edf3e9;
  --ah-text: #d3dccf;
  --ah-text-muted: #9ca89a;
  --ah-text-soft: #747f72;
  --ah-green: #8bd88b;
  --ah-green-strong: #74c774;
  --ah-green-soft: rgba(139, 216, 139, 0.12);
  --ah-accent: #c7ad62;
  --ah-accent-soft: rgba(199, 173, 98, 0.12);
  --ah-blue: #8fa6b8;
  --ah-red: #df7f7f;
}

html,
body {
  background: var(--ah-bg) !important;
}

body {
  color: var(--ah-text) !important;
  background: linear-gradient(180deg, #0a0e11 0%, var(--ah-bg) 48%, #10161b 100%) !important;
}

nav,
.fixed.top-0,
.ah-header,
header {
  background: rgba(11, 15, 18, 0.94) !important;
  border-color: var(--ah-border-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.bg-\[\#0e0e11\],
.bg-\[\#020617\],
.bg-\[\#030712\],
.bg-\[\#050816\],
.bg-\[\#010409\] {
  background-color: var(--ah-bg) !important;
}

.bg-\[\#141519\],
.bg-\[\#151B22\],
.bg-\[\#111827\],
.bg-slate-900,
.bg-gray-900,
.bg-zinc-900,
.bg-slate-900\/60,
.bg-slate-900\/80,
.bg-gray-900\/80 {
  background-color: var(--ah-panel) !important;
}

.bg-gray-800,
.bg-slate-800,
.bg-zinc-800,
.bg-gray-800\/50,
.bg-slate-800\/50 {
  background-color: var(--ah-panel-2) !important;
}

.border-gray-800,
.border-gray-700,
.border-slate-800,
.border-slate-700,
.border-zinc-800,
[class*="border-gray-800"],
[class*="border-gray-700"],
[class*="border-slate-800"],
[class*="border-slate-700"] {
  border-color: var(--ah-border) !important;
}

article,
section,
.rounded-xl,
.rounded-2xl,
.ah-panel,
.ah-card {
  box-shadow: none !important;
}

article[class*="border"],
section[class*="border"],
div[class*="rounded-xl"][class*="border"],
div[class*="rounded-2xl"][class*="border"] {
  background-color: var(--ah-panel) !important;
  border-color: var(--ah-border) !important;
}

.text-white,
.text-gray-100,
.text-slate-50,
h1,
h2,
h3 {
  color: var(--ah-text-strong) !important;
}

.text-gray-300,
.text-slate-300,
p,
li {
  color: var(--ah-text) !important;
}

.text-gray-400,
.text-slate-400 {
  color: var(--ah-text-muted) !important;
}

.text-gray-500,
.text-gray-600,
.text-slate-500 {
  color: var(--ah-text-soft) !important;
}

.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-green-300,
.text-green-400,
.text-green-500,
.text-lime-300,
.text-lime-400 {
  color: var(--ah-green) !important;
}

.bg-emerald-600,
.bg-emerald-500,
.bg-green-600,
.bg-green-500,
.bg-lime-600,
.bg-lime-500 {
  background-color: var(--ah-green-strong) !important;
  color: #071007 !important;
  border-color: rgba(139, 216, 139, 0.32) !important;
  box-shadow: none !important;
}

.hover\:bg-emerald-500:hover,
.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: var(--ah-green) !important;
  color: #071007 !important;
}

.mb-8.grid.md\:grid-cols-3.gap-4 > a,
.mb-8.grid.md\:grid-cols-3.gap-4 > a:hover {
  background-color: var(--ah-panel) !important;
  border-color: var(--ah-border) !important;
  color: var(--ah-text) !important;
  box-shadow: none !important;
}

.mb-8.grid.md\:grid-cols-3.gap-4 > a:first-child {
  border-color: rgba(139, 216, 139, 0.28) !important;
}

.bg-emerald-500\/10,
.bg-emerald-500\/20,
.bg-green-500\/10,
[class*="bg-emerald-500/"],
[class*="bg-green-500/"] {
  background-color: var(--ah-green-soft) !important;
}

.border-emerald-500\/20,
.border-emerald-500\/30,
.border-emerald-500\/35,
.border-emerald-500\/50,
[class*="border-emerald-"] {
  border-color: rgba(139, 216, 139, 0.28) !important;
}

.text-yellow-300,
.text-yellow-400,
.text-yellow-500,
.text-amber-300,
.text-amber-400 {
  color: var(--ah-accent) !important;
}

.bg-yellow-500,
.bg-yellow-400,
.bg-amber-500 {
  background-color: var(--ah-accent) !important;
}

.bg-yellow-500\/10,
.bg-yellow-500\/20,
[class*="bg-yellow-500/"],
[class*="bg-amber-500/"] {
  background-color: var(--ah-accent-soft) !important;
}

.border-yellow-500,
[class*="border-yellow-"],
[class*="border-amber-"] {
  border-color: rgba(199, 173, 98, 0.30) !important;
}

.text-blue-400,
.text-blue-500,
.text-cyan-400,
.text-purple-400,
.text-pink-400 {
  color: var(--ah-blue) !important;
}

.bg-blue-500\/10,
.bg-blue-500\/20,
[class*="bg-blue-500/"] {
  background-color: rgba(143, 166, 184, 0.11) !important;
}

[class*="border-blue-"] {
  border-color: rgba(143, 166, 184, 0.25) !important;
}

[class*="shadow-[0_0"],
[class*="hover:shadow-[0_0"],
[class*="blur-["],
.animate-ping,
.animate-pulse {
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

[class*="bg-emerald-900/20"],
[class*="bg-emerald-500/5"],
[class*="group-hover:bg-emerald-500/15"] {
  display: none !important;
}

.text-transparent.bg-clip-text.bg-gradient-to-r {
  color: var(--ah-green) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.bg-gradient-to-r.from-emerald-400,
.bg-gradient-to-r.from-emerald-500,
.bg-gradient-to-b.from-transparent {
  background-image: none !important;
  background-color: var(--ah-green) !important;
}

.h-1.bg-gradient-to-r {
  background-color: var(--ah-green) !important;
  opacity: 1 !important;
}

.hover\:scale-105:hover,
.group-hover\:translate-x-1 {
  transform: none !important;
}

nav a.hover\:text-emerald-400:hover,
nav a[class*="hover:text-emerald-"]:hover,
.ah-nav a:hover {
  color: var(--ah-text-strong) !important;
}

nav a[aria-current="page"],
.ah-nav a[aria-current="page"] {
  color: var(--ah-green) !important;
}

.filter.grayscale,
.group-hover\:grayscale-0,
.bg-gradient-to-b.from-transparent.to-\[\#10b981\]\/5 {
  filter: none !important;
  background-image: none !important;
}

/* Visual beginner theory page: variables */
.ah-visual-theory-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 7%, rgba(37, 99, 235, .16), transparent 30rem),
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, .09), transparent 28rem),
    linear-gradient(180deg, #0e0e11 0%, #0b101d 42%, #020617 100%);
  color: #dbe4ef;
}
.ah-visual-header-spacer { height: 80px; }
.ah-visual-topbar {
  position: sticky;
  top: 80px;
  z-index: 35;
  min-height: 58px;
  border-bottom: 1px solid rgba(51,65,85,.55);
  background: rgba(11, 17, 32, .88);
  backdrop-filter: blur(16px);
}
.ah-visual-topbar-inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 58px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ah-visual-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e1;
  font-size: .86rem;
  font-weight: 850;
}
.ah-visual-back:hover { color: #fff; }
.ah-visual-progress {
  display: none;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 850;
}
.ah-visual-progress strong { color: #fde68a; }
@media (min-width: 760px) { .ah-visual-progress { display: flex; } }
.ah-visual-main {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(42px, 6vw, 78px) 0 clamp(70px, 8vw, 108px);
}
.ah-visual-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .ah-visual-hero { grid-template-columns: minmax(0, .92fr) minmax(430px, 1fr); }
}
.ah-visual-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #93c5fd;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ah-visual-hero h1 {
  margin-top: 18px;
  color: #f8fafc;
  font-size: clamp(2.55rem, 7vw, 5rem);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 950;
  text-wrap: balance;
}
.ah-visual-lead {
  margin-top: 24px;
  max-width: 62ch;
  color: #dbe4ef;
  font-size: clamp(1.08rem, 1.6vw, 1.26rem);
  line-height: 1.76;
}
.ah-visual-lead strong { color: #fff; }
.ah-visual-hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.ah-visual-meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.ah-visual-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(71, 85, 105, .72);
  border-radius: 999px;
  background: rgba(15, 23, 42, .58);
  color: #aebcd0;
  padding: 7px 10px;
  font-size: .78rem;
  font-weight: 820;
}
.ah-visual-img-card {
  position: relative;
  border: 1px solid rgba(51, 65, 85, .82);
  border-radius: 32px;
  background: rgba(2, 6, 23, .56);
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.36);
}
.ah-visual-img-card img {
  display: block;
  width: 100%;
  height: auto;
}
.ah-visual-section {
  margin-top: clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 46px);
  align-items: center;
}
@media (min-width: 920px) {
  .ah-visual-section { grid-template-columns: minmax(0, .86fr) minmax(420px, 1fr); }
  .ah-visual-section.is-reversed { grid-template-columns: minmax(420px, 1fr) minmax(0, .86fr); }
  .ah-visual-section.is-reversed .ah-visual-copy { order: 2; }
  .ah-visual-section.is-reversed .ah-visual-img-card { order: 1; }
}
.ah-visual-copy h2 {
  color: #f8fafc;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 950;
  text-wrap: balance;
}
.ah-visual-copy p,
.ah-visual-copy li {
  color: #d2dbe8;
  font-size: clamp(1.035rem, 1.2vw, 1.13rem);
  line-height: 1.82;
}
.ah-visual-copy p { margin-top: 18px; max-width: 65ch; }
.ah-visual-copy ul, .ah-visual-copy ol { margin-top: 18px; padding-left: 1.2rem; }
.ah-visual-copy li + li { margin-top: 8px; }
.ah-visual-copy strong { color: #f8fafc; font-weight: 900; }
.ah-visual-code {
  margin-top: 22px;
  border: 1px solid rgba(51, 65, 85, .84);
  border-radius: 16px;
  background: linear-gradient(180deg, #030712, #020617);
  overflow: hidden;
}
.ah-visual-code figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(51, 65, 85, .68);
  color: #94a3b8;
  font-size: .76rem;
  font-weight: 850;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.ah-visual-code pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  color: #dbe4ef;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .96rem;
  line-height: 1.75;
}
.ah-code-string { color: #fde68a; }
.ah-code-number { color: #86efac; }
.ah-code-comment { color: #64748b; font-style: italic; }
.ah-code-fn { color: #f0abfc; }
.ah-visual-grid {
  margin-top: clamp(64px, 8vw, 112px);
}
.ah-visual-grid-head {
  max-width: 780px;
}
.ah-visual-grid-head h2 {
  color: #f8fafc;
  font-size: clamp(1.85rem, 3.5vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 950;
}
.ah-visual-grid-head p {
  margin-top: 17px;
  color: #d2dbe8;
  font-size: clamp(1.035rem, 1.2vw, 1.13rem);
  line-height: 1.82;
}
.ah-use-case-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 760px) { .ah-use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .ah-use-case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ah-use-card {
  min-height: 100%;
  border: 1px solid rgba(51, 65, 85, .72);
  border-radius: 22px;
  background: rgba(15, 23, 42, .56);
  padding: 20px;
}
.ah-use-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(37, 99, 235, .14);
  color: #93c5fd;
  font-size: 1.15rem;
}
.ah-use-card:nth-child(2) .ah-use-icon { background: rgba(250,204,21,.12); color: #fde68a; }
.ah-use-card:nth-child(3) .ah-use-icon { background: rgba(34,197,94,.12); color: #86efac; }
.ah-use-card:nth-child(4) .ah-use-icon { background: rgba(168,85,247,.14); color: #d8b4fe; }
.ah-use-card h3 {
  margin-top: 16px;
  color: #f8fafc;
  font-size: 1.06rem;
  font-weight: 900;
}
.ah-use-card p {
  margin-top: 10px;
  color: #b8c4d6;
  font-size: .96rem;
  line-height: 1.68;
}
.ah-use-card code {
  display: inline-flex;
  margin-top: 14px;
  border: 1px solid rgba(51,65,85,.72);
  border-radius: 10px;
  background: rgba(2,6,23,.7);
  color: #fde68a;
  padding: 7px 9px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .84rem;
}
.ah-visual-callout {
  margin-top: clamp(58px, 7vw, 88px);
  display: grid;
  gap: 20px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(250,204,21,.10), rgba(37,99,235,.10) 48%, rgba(15,23,42,.58));
  padding: clamp(24px, 4vw, 38px);
}
.ah-visual-callout h2 {
  color: #f8fafc;
  font-size: clamp(1.6rem, 2.8vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 950;
}
.ah-visual-callout p {
  color: #d2dbe8;
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  line-height: 1.78;
  max-width: 72ch;
}
.ah-mistakes {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}
.ah-mistake {
  display: grid;
  gap: 10px;
  border-left: 2px solid rgba(96, 165, 250, .62);
  padding: 2px 0 2px 16px;
}
.ah-mistake strong { color: #f8fafc; }
.ah-mistake p {
  margin: 0;
  color: #d2dbe8;
  font-size: 1rem;
  line-height: 1.72;
}
.ah-visual-summary {
  margin-top: clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border-top: 1px solid rgba(51,65,85,.66);
  padding-top: clamp(34px, 5vw, 52px);
}
@media (min-width: 900px) { .ah-visual-summary { grid-template-columns: minmax(0, .9fr) auto; } }
.ah-visual-summary h2 {
  color: #f8fafc;
  font-size: clamp(1.72rem, 3vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.04em;
  font-weight: 950;
}
.ah-visual-summary ul {
  margin-top: 18px;
  display: grid;
  gap: 9px;
  color: #d2dbe8;
  font-size: 1.05rem;
  line-height: 1.7;
  padding-left: 1.1rem;
}
.ah-visual-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 640px) {
  .ah-visual-main { width: min(100% - 24px, 1180px); }
  .ah-visual-topbar { top: 70px; }
  .ah-visual-header-spacer { height: 70px; }
  .ah-visual-topbar-inner { width: min(100% - 24px, 1180px); }
  .ah-visual-hero h1 { letter-spacing: -.045em; }
  .ah-visual-img-card { border-radius: 22px; }
}
.ah-visual-copy p code,
.ah-mistake code,
.ah-visual-summary code {
  color: #dbeafe;
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(71, 85, 105, .68);
  border-radius: 7px;
  padding: 1px 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .9em;
}

/* AskHackers course model: Teori -> 5 övningar -> Bygg Snake */
.lesson-readable {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.75;
}

.text-ui-muted { color: var(--ah-text-muted, #9ca89a) !important; }
.text-ui-strong { color: var(--ah-text-strong, #edf3e9) !important; }

.course-table {
  border-top: 1px solid var(--ah-border, rgba(190, 205, 188, .14));
  border-bottom: 1px solid var(--ah-border, rgba(190, 205, 188, .14));
}

.course-row {
  display: grid;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ah-border-soft, rgba(190, 205, 188, .09));
}
.course-row:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .course-row {
    grid-template-columns: 72px minmax(180px, .8fr) minmax(220px, 1fr) minmax(260px, 1.15fr) auto;
    align-items: center;
  }
}

.status-active,
.status-done,
.status-locked,
.status-next {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--ah-border, rgba(190, 205, 188, .14));
  padding: 5px 9px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.status-active,
.status-next {
  border-color: rgba(139, 216, 139, .32);
  background: rgba(139, 216, 139, .10);
  color: var(--ah-green, #8bd88b);
}
.status-done {
  border-color: rgba(139, 216, 139, .24);
  color: #b7e7b7;
}
.status-locked {
  color: var(--ah-text-soft, #747f72);
  background: rgba(148, 163, 184, .06);
}

.next-step {
  border: 1px solid var(--ah-border, rgba(190, 205, 188, .14));
  background: linear-gradient(180deg, rgba(21, 28, 34, .96), rgba(12, 17, 21, .96));
  border-radius: 16px;
  padding: clamp(22px, 4vw, 34px);
}

.progress-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.progress-dots span,
.progress-dots a {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ah-border, rgba(190, 205, 188, .14));
  color: var(--ah-text-muted, #9ca89a);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}
.progress-dots .is-done {
  border-color: rgba(139, 216, 139, .34);
  color: var(--ah-green, #8bd88b);
  background: rgba(139, 216, 139, .10);
}

.inline-code {
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 7px;
  background: rgba(2, 6, 23, .42);
  color: var(--ah-text-strong, #edf3e9);
  padding: 1px 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .92em;
}

.ah-snake-demo-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 4px;
  aspect-ratio: 10 / 8;
  width: 100%;
  border: 1px solid var(--ah-border, rgba(190, 205, 188, .14));
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(190, 205, 188, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(190, 205, 188, .08) 1px, transparent 1px),
    #07100d;
  background-size: 10% 12.5%;
  padding: 10px;
}

.ah-snake-demo-board.is-locked {
  filter: grayscale(.75);
  opacity: .62;
}

.ah-snake-demo-cell {
  border-radius: 4px;
  min-width: 0;
  min-height: 0;
}

.ah-snake-demo-cell.is-snake {
  background: var(--ah-green, #8bd88b);
  border: 1px solid rgba(237, 243, 233, .32);
}

.ah-snake-demo-cell.is-food {
  background: var(--ah-accent, #c7ad62);
  border: 1px solid rgba(237, 243, 233, .24);
}

/* Lesson variables editor color fix: make main.py match README.md/snake_pseudo.txt.
   The old CodeMirror gutter used a separate blue-black variable, which created
   the visible left strip inside the editor. Keep the whole editor square one color. */
.ah-html-editor-mount,
.ah-html-editor-mount .cm-editor,
.ah-html-editor-mount .cm-scroller,
.ah-html-editor-mount .cm-content,
.ah-html-editor-mount .cm-line,
.ah-html-editor-mount .cm-gutters,
.ah-html-editor-mount .cm-gutter,
.ah-html-editor-mount .cm-lineNumbers,
.ah-html-editor-mount .cm-gutterElement,
.ah-html-editor-mount .cm-activeLine,
.ah-html-editor-mount .cm-activeLineGutter,
.plain-editor-fallback {
  background: #0e0e11 !important;
  background-color: #0e0e11 !important;
}
.ah-html-editor-mount .cm-gutters {
  border-right-color: transparent !important;
}


/* ------------------------------------------------------------------
   UI consistency patch — 2026-06-07
   Goal: make the whole site follow the calm editor style.
   Yellow is reserved for rare warnings/achievements/syntax, not layout.
------------------------------------------------------------------- */
:root {
  --ah-bg: #0e0e11;
  --ah-bg-soft: #111216;
  --ah-panel: #141519;
  --ah-panel-2: #1a1b20;
  --ah-border: rgba(212, 212, 216, .14);
  --ah-border-soft: rgba(212, 212, 216, .08);
  --ah-text: #d4d4d8;
  --ah-text-strong: #f4f4f5;
  --ah-muted: #a1a1aa;
  --ah-soft: #71717a;
  --ah-accent: #34d399;
  --ah-accent-soft: rgba(52, 211, 153, .10);
  --ah-yellow: #e8c766;
  --ah-yellow-soft: rgba(232, 199, 102, .10);
}

body,
.ah-page {
  background:
    radial-gradient(circle at 20% -10%, rgba(52, 211, 153, .055), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(96, 165, 250, .04), transparent 30rem),
    var(--ah-bg) !important;
  color: var(--ah-text);
}

.ah-header,
header.sticky {
  background: rgba(14, 14, 17, .92) !important;
  border-bottom-color: var(--ah-border-soft) !important;
}

.ah-panel,
.next-step,
.course-map,
.course-module,
.rounded-2xl,
.rounded-3xl {
  border-color: var(--ah-border) !important;
}

.ah-panel,
.ah-card,
.next-step {
  background: linear-gradient(180deg, rgba(20, 21, 25, .96), rgba(17, 18, 22, .98)) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

.ah-card {
  border-color: var(--ah-border-soft) !important;
}

.ah-brand-mark,
.text-yellow-400,
.text-yellow-300 {
  color: #6ee7b7 !important;
}

.text-yellow-200 {
  color: #d9f99d !important;
}

.bg-yellow-400,
.ah-btn-primary,
.module-action.primary {
  background: var(--ah-accent) !important;
  color: #08110e !important;
}

.bg-yellow-300,
.hover\:bg-yellow-300:hover,
.ah-btn-primary:hover,
.module-action.primary:hover {
  background: #6ee7b7 !important;
  color: #08110e !important;
}

.border-yellow-500\/20,
.border-yellow-500\/35,
.border-yellow-400\/20 {
  border-color: rgba(52, 211, 153, .24) !important;
}

.bg-yellow-500\/5,
.bg-yellow-500\/10,
.bg-yellow-500\/\[0\.04\],
.bg-yellow-400\/5,
.bg-yellow-400\/10 {
  background-color: rgba(52, 211, 153, .08) !important;
}

.selection\:bg-emerald-400\/30::selection,
::selection {
  background: rgba(52, 211, 153, .35) !important;
  color: #f4f4f5 !important;
}

.ah-nav a[aria-current="page"]::after {
  background: var(--ah-accent) !important;
}

.ah-badge-primary {
  border-color: rgba(52, 211, 153, .34) !important;
  background: rgba(52, 211, 153, .10) !important;
  color: #bbf7d0 !important;
}

.status-active,
.status-next {
  border-color: rgba(52, 211, 153, .34) !important;
  background: rgba(52, 211, 153, .10) !important;
  color: #bbf7d0 !important;
}

.ah-focus:focus-visible,
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ah-accent) !important;
  outline-offset: 3px;
}

/* Keep yellow available for intentional warning/achievement semantics only. */
.ah-warning,
.ah-achievement,
.ah-readable code {
  color: var(--ah-yellow) !important;
}
.ah-warning-surface,
.ah-achievement-surface {
  border-color: rgba(232, 199, 102, .26) !important;
  background: var(--ah-yellow-soft) !important;
}


/* --------------------------------------------------------------------------
   Senior UX design pass — coding platform visual system
   Source of truth: the index logo + calm editor workspace.
   Goal: one brand mark, fewer accent colors, comfortable dark surfaces,
   readable typography, and semantic yellow only for warnings/achievements/code.
-------------------------------------------------------------------------- */
:root {
  --ah-bg: #0e0e11;
  --ah-bg-elevated: #111216;
  --ah-surface: #141519;
  --ah-surface-2: #1a1b20;
  --ah-surface-3: #202127;
  --ah-border: #27272a;
  --ah-border-soft: rgba(63, 63, 70, .62);

  --ah-text: #d4d4d8;
  --ah-text-strong: #f4f4f5;
  --ah-muted: #a1a1aa;
  --ah-subtle: #71717a;

  --ah-accent: #34d399;
  --ah-accent-strong: #10b981;
  --ah-accent-soft: rgba(52, 211, 153, .10);
  --ah-accent-border: rgba(52, 211, 153, .30);

  --ah-yellow: #e8c766;
  --ah-yellow-soft: rgba(232, 199, 102, .10);
  --ah-yellow-border: rgba(232, 199, 102, .28);

  --ah-info: #60a5fa;
  --ah-danger: #f87171;

  --ah-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ah-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ah-measure: 70ch;
  --ah-radius-card: 1rem;
}

html { background: var(--ah-bg); }

body {
  background-color: var(--ah-bg) !important;
  color: var(--ah-text) !important;
  font-family: var(--ah-font-sans) !important;
  letter-spacing: -0.012em;
  text-rendering: optimizeLegibility;
}

.font-mono,
code,
pre,
kbd,
samp,
[class*="font-mono"] {
  font-family: var(--ah-font-code) !important;
  letter-spacing: -0.01em;
}

/* Same logo treatment as index on every page. */
a[aria-label="AskHackers startsida"],
nav a[href="/"],
header a[href="/"] {
  color: var(--ah-accent-strong) !important;
}

a[aria-label="AskHackers startsida"] i.fa-terminal,
nav a[href="/"] i.fa-terminal,
header a[href="/"] i.fa-terminal {
  color: currentColor !important;
}

/* Comfortable reading defaults for learning and docs pages. */
p,
li {
  line-height: 1.72;
}

main p,
article p,
.ah-readable,
.ah-serious-card p {
  max-width: var(--ah-measure);
}

h1, h2, h3 {
  color: var(--ah-text-strong);
  letter-spacing: -0.04em;
}

h1 {
  line-height: 1.06;
}

h2, h3 {
  line-height: 1.16;
}

/* Normalize page surfaces: one calm editor-inspired dark system. */
.bg-\[\#141519\],
.bg-\[\#101114\],
.bg-\[\#111827\],
.bg-gray-900,
.bg-slate-900,
.bg-zinc-900 {
  background-color: var(--ah-surface) !important;
}

.bg-\[\#0e0e11\],
.bg-gray-950,
.bg-slate-950,
.bg-zinc-950 {
  background-color: var(--ah-bg) !important;
}

.border-gray-800,
.border-slate-800,
.border-zinc-800,
.border-gray-700,
.border-slate-700,
.border-zinc-700 {
  border-color: var(--ah-border) !important;
}

.text-gray-300,
.text-slate-300,
.text-zinc-300 {
  color: var(--ah-text) !important;
}

.text-gray-400,
.text-slate-400,
.text-zinc-400 {
  color: var(--ah-muted) !important;
}

.text-gray-500,
.text-slate-500,
.text-zinc-500 {
  color: var(--ah-subtle) !important;
}

/* Brand hierarchy: emerald for action/progress, yellow for rare semantic emphasis. */
.text-emerald-500,
.text-emerald-400,
.text-emerald-300 {
  color: var(--ah-accent) !important;
}

.bg-emerald-600,
.bg-emerald-500,
.hover\:bg-emerald-500:hover {
  background-color: var(--ah-accent-strong) !important;
}

.bg-emerald-500\/10,
.bg-emerald-400\/5,
.bg-emerald-400\/10,
.bg-emerald-500\/20 {
  background-color: var(--ah-accent-soft) !important;
}

.border-emerald-500\/30,
.border-emerald-400\/20,
.border-emerald-500\/25 {
  border-color: var(--ah-accent-border) !important;
}

/* De-loud yellow across Tailwind utility usage. Keep it soft and intentional. */
.text-yellow-200,
.text-yellow-300,
.text-yellow-400,
.text-yellow-500 {
  color: var(--ah-yellow) !important;
}

.bg-yellow-300,
.bg-yellow-400,
.bg-yellow-500,
.hover\:bg-yellow-300:hover,
.hover\:bg-yellow-400:hover {
  background-color: var(--ah-yellow) !important;
  color: #17140c !important;
}

.bg-yellow-400\/5,
.bg-yellow-400\/10,
.bg-yellow-500\/5,
.bg-yellow-500\/10,
.bg-yellow-500\/20,
[class*="bg-yellow-500/"],
[class*="bg-yellow-400/"] {
  background-color: var(--ah-yellow-soft) !important;
}

.border-yellow-400,
.border-yellow-500,
.border-yellow-400\/20,
.border-yellow-500\/20,
.border-yellow-500\/35,
[class*="border-yellow-"] {
  border-color: var(--ah-yellow-border) !important;
}

/* Cards and panels should feel like the editor. */
.ah-card,
.ah-serious-card,
.ah-use-card,
.ah-community-card,
aside,
form {
  border-color: var(--ah-border) !important;
}

.rounded-2xl.border,
.rounded-3xl.border,
form.rounded-2xl {
  background-color: rgba(20, 21, 25, .78) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.20);
}

/* Inputs/editor affordances. */
input,
textarea,
select {
  background-color: var(--ah-bg) !important;
  border-color: var(--ah-border) !important;
  color: var(--ah-text-strong) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ah-accent) !important;
  box-shadow: 0 0 0 3px rgba(52,211,153,.10) !important;
}

/* Code blocks: readable, not flashy. */
pre,
code {
  color: var(--ah-text);
}

pre {
  background: var(--ah-surface) !important;
  border-color: var(--ah-border) !important;
}

/* Final rule: active learning state should be emerald, not yellow. */
.status-active,
.ah-status-active,
[aria-current="page"] {
  color: var(--ah-accent) !important;
  border-color: var(--ah-accent-border) !important;
}

/* Preserve syntax/achievement yellow without making layout look warning-heavy. */
.ah-code-string,
.ah-achievement,
.ah-warning,
[data-tone="achievement"],
[data-tone="warning"] {
  color: var(--ah-yellow) !important;
}


/* Secondary Python manual note on theory pages */
.ah-manual-note {
  margin-top: 2rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(52, 211, 153, 0.06), rgba(232, 199, 102, 0.04)),
    var(--ah-surface, #141519);
}

.ah-manual-note__eyebrow {
  margin: 0 0 0.35rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ah-accent, #34d399);
}

.ah-manual-note h3 {
  margin: 0 0 0.45rem;
  color: var(--ah-text-strong, #f4f4f5);
  font-size: 1rem;
}

.ah-manual-note p {
  margin: 0 0 0.75rem;
  color: var(--ah-muted, #a1a1aa);
  line-height: 1.6;
}

.ah-manual-note__link {
  color: var(--ah-accent, #34d399);
  text-decoration: none;
  font-weight: 600;
}

.ah-manual-note__link:hover {
  text-decoration: underline;
}


/* ==========================================================================
   AskHackers Design System Pass 2026
   --------------------------------------------------------------------------
   Goal: make every page feel like the editor without changing page layout.
   References behind the direction:
   - accessible contrast-first dark UI
   - developer-platform neutral surfaces
   - restrained accent color
   - Inter for UI, JetBrains Mono for code/technical labels
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Calm developer platform palette, close to the editor but softer than pure black. */
  --ah-bg: #0d1117;
  --ah-bg-elevated: #11161d;
  --ah-bg-soft: #121821;

  --ah-surface: #161b22;
  --ah-surface-2: #1c222b;
  --ah-surface-3: #222a35;

  --ah-border: #30363d;
  --ah-border-soft: rgba(139, 148, 158, .20);
  --ah-border-muted: rgba(139, 148, 158, .12);

  --ah-text-strong: #f0f6fc;
  --ah-text: #d9e2ec;
  --ah-text-muted: #9da7b3;
  --ah-text-subtle: #7d8590;

  /* Primary accent is a calmer coding green. Yellow is reserved for warnings/achievements/syntax. */
  --ah-accent: #6ee7b7;
  --ah-accent-strong: #34d399;
  --ah-accent-solid: #4ade80;
  --ah-accent-ink: #06120d;
  --ah-accent-soft: rgba(110, 231, 183, .10);
  --ah-accent-border: rgba(110, 231, 183, .32);

  --ah-yellow: #d6b55f;
  --ah-yellow-soft: rgba(214, 181, 95, .10);
  --ah-yellow-border: rgba(214, 181, 95, .28);

  --ah-info: #79b8ff;
  --ah-info-soft: rgba(121, 184, 255, .10);
  --ah-danger: #ff7b72;

  --ah-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ah-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ah-radius-sm: 10px;
  --ah-radius-md: 14px;
  --ah-radius-lg: 18px;
  --ah-shadow-card: 0 20px 60px rgba(0, 0, 0, .26);
}

html {
  background: var(--ah-bg) !important;
  color-scheme: dark;
}

body {
  font-family: var(--ah-font-sans) !important;
  color: var(--ah-text) !important;
  background:
    radial-gradient(circle at 18% -8%, rgba(110, 231, 183, .055), transparent 30rem),
    radial-gradient(circle at 82% 2%, rgba(121, 184, 255, .040), transparent 34rem),
    linear-gradient(180deg, #0c1016 0%, var(--ah-bg) 52%, #0f141b 100%) !important;
  letter-spacing: -0.012em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(110, 231, 183, .28) !important;
  color: var(--ah-text-strong) !important;
}

.font-mono,
code,
pre,
textarea,
.ah-kicker,
.ah-home-kicker,
.ah-doc-eyebrow,
.ah-page-eyebrow,
.table-head,
.status-pill,
.mini-pill,
nav[aria-label],
[class*="tracking-"] {
  font-family: var(--ah-font-code) !important;
}

/* Text hierarchy: lower glare, stronger readability. */
h1,
h2,
h3,
.text-white {
  color: var(--ah-text-strong) !important;
}

p,
li,
dd,
.text-gray-300,
.text-slate-300,
.text-zinc-300 {
  color: var(--ah-text) !important;
}

.text-gray-400,
.text-slate-400,
.text-zinc-400 {
  color: var(--ah-text-muted) !important;
}

.text-gray-500,
.text-slate-500,
.text-zinc-500 {
  color: var(--ah-text-subtle) !important;
}

.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.hover\:text-emerald-300:hover,
.hover\:text-emerald-400:hover {
  color: var(--ah-accent) !important;
}

.text-yellow-300,
.text-yellow-400,
.text-amber-300,
.text-amber-400 {
  color: var(--ah-yellow) !important;
}

/* Shared page chrome. */
header.sticky,
.ah-header {
  background: rgba(13, 17, 23, .86) !important;
  border-bottom-color: var(--ah-border-muted) !important;
  backdrop-filter: blur(18px);
}

footer,
.ah-footer {
  border-color: var(--ah-border-muted) !important;
  color: var(--ah-text-muted) !important;
}

.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(139, 148, 158, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139, 148, 158, .075) 1px, transparent 1px) !important;
  opacity: .42 !important;
}

[class*="bg-emerald-900/20"],
[class*="bg-emerald-500/5"],
[class*="bg-emerald-500/10"],
[class*="bg-emerald-400/5"] {
  background-color: var(--ah-accent-soft) !important;
}

[class*="bg-[#141519]"],
[class*="bg-[#101014]"],
[class*="bg-[#0e0e11]"],
.ah-panel,
.ah-card,
.rounded-2xl.border,
.rounded-xl.border {
  background-color: rgba(22, 27, 34, .82) !important;
  border-color: var(--ah-border-muted) !important;
}

.border-gray-700,
.border-gray-800,
.border-slate-700,
.border-slate-800,
.border-zinc-700,
.border-zinc-800,
.border-emerald-500\/30,
.border-emerald-400\/20,
.border-emerald-500\/25 {
  border-color: var(--ah-border-muted) !important;
}

/* Cards stay calm; no neon glow. */
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.ah-panel,
.ah-card {
  box-shadow: var(--ah-shadow-card) !important;
}

[class*="shadow-emerald"],
[class*="shadow-green"],
[class*="shadow-lime"] {
  box-shadow: none !important;
}

/* Buttons and links: one primary action language across the product. */
a[class*="bg-emerald-"],
button[class*="bg-emerald-"],
.module-action.primary,
.ah-btn-primary,
.ah-btn-success {
  background: var(--ah-accent-solid) !important;
  color: var(--ah-accent-ink) !important;
  border-color: rgba(74, 222, 128, .45) !important;
  box-shadow: none !important;
}

a[class*="bg-emerald-"]:hover,
button[class*="bg-emerald-"]:hover,
.module-action.primary:hover,
.ah-btn-primary:hover,
.ah-btn-success:hover {
  background: var(--ah-accent) !important;
  color: var(--ah-accent-ink) !important;
}

a[class*="border"],
button[class*="border"],
.module-action.ghost {
  border-color: var(--ah-border-soft) !important;
}

a[class*="border"]:hover,
button[class*="border"]:hover,
.module-action.ghost:hover {
  border-color: var(--ah-accent-border) !important;
  color: var(--ah-accent) !important;
  background-color: rgba(110, 231, 183, .055) !important;
}

/* Focus states must be clear on dark surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ah-accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(110, 231, 183, .12) !important;
}

/* Form fields and code blocks. */
input,
textarea,
select {
  background-color: #0b1016 !important;
  border-color: var(--ah-border) !important;
  color: var(--ah-text-strong) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ah-text-subtle) !important;
}

pre,
code {
  font-family: var(--ah-font-code) !important;
}

pre {
  background: #0b1016 !important;
  border: 1px solid var(--ah-border-muted) !important;
  color: var(--ah-text) !important;
}

/* Learn page table: keep layout, improve comfort. */
.course-shell {
  background:
    radial-gradient(circle at 16% 0%, rgba(110, 231, 183, .07), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(121, 184, 255, .045), transparent 30rem),
    var(--ah-bg) !important;
}

.course-table,
.course-row,
.course-cell {
  border-color: var(--ah-border-muted) !important;
}

.course-row {
  background: rgba(22, 27, 34, .38) !important;
}

.course-row:hover {
  background: rgba(28, 34, 43, .58) !important;
}

.status-pill {
  border-color: var(--ah-border-soft) !important;
  background: rgba(22, 27, 34, .72) !important;
  color: var(--ah-text-muted) !important;
}

.status-done,
.status-active,
.ah-status-active {
  border-color: var(--ah-accent-border) !important;
  background: var(--ah-accent-soft) !important;
  color: var(--ah-accent) !important;
}

.status-locked {
  border-color: var(--ah-border-muted) !important;
  background: rgba(22, 27, 34, .42) !important;
  color: var(--ah-text-subtle) !important;
}

.mini-step {
  color: var(--ah-text) !important;
}

.mini-step i,
.ah-step span {
  border-color: var(--ah-border-soft) !important;
  background: var(--ah-surface-2) !important;
  color: var(--ah-text-subtle) !important;
}

.mini-step.done i,
.mini-step.active i {
  border-color: var(--ah-accent-border) !important;
  background: var(--ah-accent-soft) !important;
  color: var(--ah-accent) !important;
}

#overallProgress {
  background: linear-gradient(90deg, var(--ah-accent-solid), var(--ah-accent)) !important;
}

/* Theory reading pages: calmer documentation feel. */
section.max-w-4xl,
article.max-w-3xl {
  color: var(--ah-text) !important;
}

header.border-b,
footer.border-t,
.border-y {
  border-color: var(--ah-border-muted) !important;
}

section.max-w-4xl pre {
  border-radius: var(--ah-radius-md) !important;
  background: #0b1016 !important;
}

/* Editor / lesson page: preserve the loved editor style, just normalize tokens. */
.lesson-editor-shell,
.lesson-main-panel,
.editor-surface,
.editor-surface > .code-textarea,
.editor-surface > #readmePanel,
.editor-surface > #pseudoPanel,
.bottom-panels,
[data-panel-view],
#terminalOutput {
  background-color: var(--ah-bg) !important;
}

.lesson-left-panel,
.editor-tab[aria-selected="false"] {
  background-color: var(--ah-surface) !important;
}

.lesson-left-panel,
.vertical-resizer,
.horizontal-resizer,
.bottom-panels,
.editor-surface .cm-gutters {
  border-color: var(--ah-border) !important;
}

.editor-tab[aria-selected="true"],
.panel-tab[aria-selected="true"] {
  color: var(--ah-text-strong) !important;
  border-color: var(--ah-accent) !important;
}

.code-textarea {
  color: var(--ah-text) !important;
  caret-color: var(--ah-accent) !important;
}

#terminalOutput {
  color: var(--ah-text) !important;
}

/* Python manual note: secondary and readable, not a competing CTA. */
.ah-manual-note {
  border-color: var(--ah-border-soft) !important;
  background:
    linear-gradient(135deg, rgba(110, 231, 183, .055), rgba(121, 184, 255, .035)),
    rgba(22, 27, 34, .76) !important;
}

.ah-manual-note__eyebrow,
.ah-manual-note__link {
  color: var(--ah-accent) !important;
}

.ah-manual-note p {
  color: var(--ah-text-muted) !important;
}

/* Yellow is semantic only: achievement, warning, syntax-like highlights. */
.ah-badge-primary,
.ah-achievement,
.ah-warning,
[data-tone="achievement"],
[data-tone="warning"] {
  border-color: var(--ah-yellow-border) !important;
  background: var(--ah-yellow-soft) !important;
  color: var(--ah-yellow) !important;
}

/* Avoid visually loud empty decorative blobs. */
.absolute[class*="blur-"] {
  opacity: .56 !important;
}