/* mygorithm — base styles ported from the design comp, plus hover/focus
   utilities (the design tool's style-hover/style-focus attributes) and
   minimal responsive rules. Layout stays inline in app.js, faithful to
   the design source. */

html, body { margin: 0; padding: 0; background: #050508; }
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
a { color: oklch(0.74 0.14 252); text-decoration: none; }
a:hover { color: #f5f5f7; }
::selection { background: oklch(0.6 0.16 260 / 0.5); color: #fff; }

@keyframes rise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #f5f5f7; border: none; box-shadow: 0 1px 6px rgba(0,0,0,0.5); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #f5f5f7; border: none; cursor: pointer; }
input::placeholder { color: rgba(255,255,255,0.32); }

/* ---- hover / focus utilities (from design style-hover / style-focus) ---- */

.navlink:hover     { color: #ffffff !important; }
.btn-link:hover    { color: #f5f5f7 !important; }
.btn-white:hover   { background: #ffffff !important; }
.btn-primary:hover { background: #ffffff !important; transform: translateY(-2px); }
.btn-primary-sm:hover { background: #ffffff !important; transform: translateY(-1px); }
.card-h:hover      { transform: translateY(-4px); border-color: rgba(255,255,255,0.2) !important; background: rgba(255,255,255,0.055) !important; }
.row-h:hover       { border-color: rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.05) !important; }
.chip:hover        { transform: translateY(-1px); }
.qopt:hover        { border-color: rgba(255,255,255,0.3) !important; }
.pill:hover        { border-color: rgba(255,255,255,0.3) !important; }
.pill-soft:hover   { border-color: rgba(255,255,255,0.25) !important; }
.btn-ghost:hover   { background: rgba(255,255,255,0.12) !important; }
.btn-add:hover     { background: rgba(255,255,255,0.14) !important; }
.btn-outline:hover { color: #ffffff !important; border-color: rgba(255,255,255,0.3) !important; }
.btn-danger:hover  { border-color: oklch(0.72 0.15 25 / 0.7) !important; }
.thread:hover      { background: rgba(255,255,255,0.06) !important; }
.input:focus       { border-color: rgba(255,255,255,0.3) !important; }

/* ---- rendered course modules (site/markdown.js output) ---- */

.prose { font-size: 16.5px; line-height: 1.68; color: rgba(255,255,255,0.72); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 44px 0 14px; color: #f5f5f7; }
.prose h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 10px; color: #f5f5f7; }
.prose h4 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; color: rgba(255,255,255,0.9); }
.prose p { margin: 0 0 16px; text-wrap: pretty; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 0 0 7px; }
.prose strong { color: #f5f5f7; font-weight: 600; }
.prose a { color: oklch(0.74 0.14 252); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #f5f5f7; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 6px; padding: 1.5px 5px;
  color: oklch(0.86 0.08 200); white-space: nowrap;
}
.prose pre {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; padding: 18px 20px; overflow-x: auto; margin: 0 0 20px;
}
.prose pre code { background: none; border: none; padding: 0; white-space: pre; color: rgba(255,255,255,0.82); font-size: 13.5px; line-height: 1.6; }
.prose blockquote {
  margin: 0 0 20px; padding: 14px 20px; border-left: 2px solid oklch(0.6 0.14 260 / 0.6);
  background: rgba(255,255,255,0.03); border-radius: 0 12px 12px 0; color: rgba(255,255,255,0.62);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: none; border-top: 1px solid rgba(255,255,255,0.09); margin: 36px 0; }
.prose .tw { overflow-x: auto; margin: 0 0 22px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose th {
  text-align: left; font-weight: 600; color: rgba(255,255,255,0.5);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.14); white-space: nowrap;
}
.prose td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
.prose tr:last-child td { border-bottom: none; }
.prose td code { white-space: nowrap; }

/* ---- in-module quizzes (from the repo's ```quiz blocks) ---- */

.quiz {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px; padding: 22px 24px; margin: 0 0 24px;
}
.quiz-q { font-size: 16.5px; font-weight: 600; line-height: 1.45; color: #f5f5f7; margin-bottom: 14px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8); border-radius: 13px; padding: 12px 15px;
  font-family: inherit; font-size: 14.5px; line-height: 1.45; cursor: pointer; transition: all 0.18s;
}
.quiz-opt:hover:not(:disabled) { border-color: rgba(255,255,255,0.3); }
.quiz-opt:disabled { cursor: default; }
.quiz-mark { width: 16px; flex-shrink: 0; font-weight: 700; }
.quiz-opt.is-correct {
  background: oklch(0.72 0.15 150 / 0.14); border-color: oklch(0.72 0.15 150 / 0.7); color: #eafff1;
}
.quiz-opt.is-correct .quiz-mark::before { content: '✓'; }
.quiz-opt.is-wrong {
  background: oklch(0.62 0.19 25 / 0.12); border-color: oklch(0.62 0.19 25 / 0.6); color: #ffe9e6;
}
.quiz-opt.is-wrong .quiz-mark::before { content: '✕'; }
.quiz-why {
  font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.6);
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
}

/* ---- responsive ---- */

.nav-tabs { scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 920px) {
  .pg-grid    { grid-template-columns: 1fr !important; }
  .build-grid { grid-template-columns: 1fr !important; }
  .mod-grid   { grid-template-columns: 1fr !important; gap: 32px !important; }
  .build-side { position: static !important; }
  .les-side   { position: static !important; }
  .mod-side   { position: static !important; }
}

@media (max-width: 700px) {
  .nav-tabs { gap: 14px !important; overflow-x: auto; }
  .nav-tabs button { font-size: 13px !important; }
  .toast { white-space: normal !important; max-width: calc(100vw - 40px); text-align: center; }
}