/* Base tokens, layout, header, tabs, shared section furniture */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e6e8ee;
  --border-strong: #d5d9e2;
  --text: #161a26;
  --muted: #5e6577;
  --faint: #8a90a0;
  --brand: #5b5bf0;
  --brand-soft: #eeeefe;
  --s1: #2f6fed; --s1-soft: #eaf1fe;
  --s2: #0e9a8a; --s2-soft: #e5f6f3;
  --s3: #e5762a; --s3-soft: #fdf0e6;
  --s4: #8a52e0; --s4-soft: #f3ecfd;
  --s5: #21a058; --s5-soft: #e7f6ec;
  --red: #d93b3b; --red-soft: #fdecec;
  --amber: #c98208; --amber-soft: #fdf4e2;
  --green: #1d9a52; --green-soft: #e6f6ec;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 24, 40, .05), 0 4px 14px rgba(20, 24, 40, .05);
  --shadow-lg: 0 12px 40px rgba(20, 24, 40, .16);
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 8px; }
a { color: var(--brand); }
code { font-family: var(--mono); font-size: 12px; background: #f0f1f5; padding: 1px 5px; border-radius: 4px; }
button { font-family: inherit; }

/* Header and tabs */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.site-header .bar { max-width: 1240px; margin: 0 auto; padding: 14px 24px 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.logo { font-family: var(--mono); color: var(--brand); font-weight: 600; font-size: 16px; }
.site-title { font-size: 16px; font-weight: 650; }
.site-sub { color: var(--muted); font-size: 13px; }
.tabs { max-width: 1240px; margin: 0 auto; padding: 8px 20px 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: none; padding: 10px 12px 12px; font-size: 13.5px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font-weight: 500;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--tab-color, var(--brand)); font-weight: 600; }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tab-color, var(--brand)); }

.ribbon {
  position: fixed; bottom: 63px; right: -75px; z-index: 100; transform: rotate(-45deg); width: 300px; text-align: center;
  background: #23263a; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 0; box-shadow: 0 2px 8px rgba(0,0,0,.2); pointer-events: none;
}

main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Section furniture */
.sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sec-badge { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px; }
.sec-head h2 { font-size: 24px; font-weight: 700; }
.sec-head .lede { color: var(--muted); margin-top: 4px; max-width: 760px; font-size: 14.5px; }
.problem {
  display: grid; grid-template-columns: 200px 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--sol, var(--brand)); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.problem .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; margin-bottom: 6px; }
.problem .ids { display: flex; flex-wrap: wrap; gap: 5px; }
.problem blockquote { margin: 0; font-size: 16px; font-weight: 500; color: var(--text); }
.problem cite { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.sub { margin: 34px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sub .letter { font-weight: 700; color: var(--sol, var(--brand)); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.sub h3 { font-size: 18px; font-weight: 650; }
.sub .desc { color: var(--muted); font-size: 13.5px; flex-basis: 100%; }
.week1 { margin-top: 36px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 16px 20px; }
.week1 h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--sol, var(--brand)); margin-bottom: 8px; }
.week1 ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 32px; }
.week1 li { margin-bottom: 5px; break-inside: avoid; }
.week1 .measure { margin-top: 10px; color: var(--muted); font-size: 13px; }

.s1 { --sol: var(--s1); --sol-soft: var(--s1-soft); }
.s2 { --sol: var(--s2); --sol-soft: var(--s2-soft); }
.s3 { --sol: var(--s3); --sol-soft: var(--s3-soft); }
.s4 { --sol: var(--s4); --sol-soft: var(--s4-soft); }
.s5 { --sol: var(--s5); --sol-soft: var(--s5-soft); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card h4 { font-size: 15px; margin-bottom: 6px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.note { font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 200;
  background: #1d2030; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-lg);
  transition: all .25s ease; pointer-events: none; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  main { padding: 20px 14px 60px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .problem { grid-template-columns: 1fr; }
  .week1 ul { columns: 1; }
  .sec-head h2 { font-size: 20px; }
  .ribbon { display: none; }
}