:root {
 --ink: #17343b;
 --muted: #50666b;
 --green: #146358;
 --paper: #f3f7f6;
 --line: #d8e5e2;
 --soft: #e3f1ed;
 --lime: #adf1d6;
}

.sidebar { background: #102d35; border-color: #203f47; color: #f5fffb; }
.brand { font-size: 22px; }
.brand small { color: #98c4c0; font-size: 10px; letter-spacing: .22em; }
.brand-icon { background: #adf1d6; color: #102d35; }
.brand-icon span { color: #246e62; }
.sidebar .nav-label, .sidebar-bottom { color: #9dbbbd; }
.sidebar nav button { color: #c2dddc; }
.sidebar nav button:hover, .sidebar nav button.active { background: #224650; color: #d4ffef; }
.sidebar .nav-dot { background: #adf1d6; }
.sidebar-note { background: #1a3b43; border-color: #36555d; }
.sidebar-note p, .sidebar-note > span { color: #b4d0ce; }
.sidebar .small-atom { color: #adf1d6; }
.topbar { background: #fff; }
.hero {
 background: radial-gradient(ellipse at 85% 65%, #19535c 0, #123742 41%, #102d35 77%);
 color: #f4fffa;
 min-height: 330px;
 padding: clamp(26px, 4vw, 52px);
 border-radius: 24px;
 box-shadow: 0 14px 35px #163c3f1c;
}
.hero .eyebrow { color: #abedda; font-family: ui-monospace, monospace; letter-spacing: .12em; }
.hero h1 { font-size: clamp(34px, 4.6vw, 68px); letter-spacing: -.055em; line-height: 1.02; font-weight: 760; margin: 16px 0; }
.hero h1 em { color: #adf1d6; font-style: normal; }
.hero p { color: #d0e4e4; font-size: 14px; max-width: 380px; }
.hero .primary { background: #adf1d6; color: #102d35; }
.hero .primary:hover { background: #d4ffef; }
.hero-membership { color: #d1eeea; font-size: 12px; }
.hero-visual { width: clamp(200px, 29vw, 360px); }
.hero-visual svg { border: 1px solid #9cf0dd33; border-radius: 18px; }
.learning-row { margin-top: 34px; }
.grade-tabs button.active { background: #146358; color: #fff; }
.stat, .lesson-row, .membership-card, .progress-panel, .question-card { box-shadow: 0 4px 15px #163c3f08; }
.lesson-row:hover { border-color: #a1cbc1; }
.unit h3 { font-size: 18px; }
.unit-heading small, .unit-subtitle { color: #50666b; font-size: 12px; }
.lesson-symbol, .unit:nth-of-type(even) .lesson-symbol, .unit-number { background: #e2f1ed; color: #146358; }
.site-announcement {
 max-width: 1000px; margin: 20px auto 0; padding: 12px 18px;
 background: #fff4dc; border: 1px solid #e4cc9e; border-radius: 10px;
 color: #574426; overflow-wrap: anywhere;
}
#owner-dialog { max-width: 910px; max-height: 90dvh; overflow: auto; }
.owner-header, .owner-links, .owner-pass { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.owner-header h2 { margin: 4px 0; }
.owner-links { justify-content: flex-start; margin-bottom: 16px; }
.owner-links a { font-size: 13px; }
.owner-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.owner-panel { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 14px; min-width: 0; }
.owner-panel h3 { margin: 0 0 9px; }
.owner-panel label { display: grid; gap: 5px; margin: 10px 0; font-size: 13px; font-weight: 600; }
.owner-panel input:not([type=checkbox]), .owner-panel select, .owner-panel textarea {
 width: 100%; padding: 9px 11px; background: #f7faf9; color: var(--ink);
 border: 1px solid #b8cecb; border-radius: 8px; font: inherit;
}
.owner-panel textarea { resize: vertical; }
.owner-panel .owner-check { display: flex; align-items: center; gap: 8px; }
.owner-question { border-top: 1px solid var(--line); padding: 12px 0; }
.owner-question summary { cursor: pointer; font-weight: 650; }
.owner-pass { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.owner-pass small { display: block; color: var(--muted); }
.owner-subscriptions { padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
#owner-message { color: #146358; font-weight: 650; }
.traffic-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.traffic-cards > div { border:1px solid var(--line); border-radius:10px; padding:12px; min-width:0; }
.traffic-cards strong { display:block; font-size:25px; color:#146358; }
.traffic-cards span,.traffic-table { font-size:12px; }
.traffic-table-wrap { overflow-x:auto; margin-bottom:16px; }
.traffic-table { width:100%; border-collapse:collapse; text-align:left; }
.traffic-table th,.traffic-table td { padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; min-width:100px; }
.traffic-table th { font-weight:700; }
.traffic-table small { display:block; margin-top:4px; color:var(--muted); }
.traffic-table small.traffic-active { color:#146358; }
.traffic-chart { height:120px; display:flex; align-items:flex-end; gap:4px; margin:14px 0 28px; }
.traffic-chart > div { height:100%; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.traffic-chart span { width:100%; min-height:2px; background:#2e7a6c; border-radius:3px 3px 0 0; }
.traffic-chart small { font-size:9px; margin-top:4px; }
.traffic-empty { color:var(--muted); font-size:13px; padding:12px 0; }
#privacy-dialog { max-width:600px; }
#privacy-dialog .owner-check { display:flex; align-items:center; gap:9px; margin:20px 0; }
@media(max-width:600px) { .traffic-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .traffic-chart { gap:2px; } .traffic-chart small { font-size:8px; } }
@media (max-width: 1080px) { .site-announcement { margin-inline: 24px; } }
@media (max-width: 730px) {
 .hero { min-height: 285px; }
 .hero-visual { width: 170px; }
 .sidebar { flex-wrap: wrap; gap: 8px; }
 .sidebar nav { flex-wrap: wrap; }
}
@media (max-width: 520px) {
 .hero { min-height: 270px; padding: 25px; }
 .hero-visual { width: 235px; opacity: .35; }
 .hero p { max-width: 270px; }
 .owner-grid { grid-template-columns: 1fr; }
 .owner-links { align-items: flex-start; flex-direction: column; }
}

.sidebar-byline {
  margin: 6px 0 0;
  color: #b4d0ce;
  font-size: 11px;
}

.orbit-electron-moving { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .orbit-electron-moving { display: inline; }
  .orbit-electron-still { display: none; }
}

.study-notes {
  margin: 24px 0;
  padding: 18px 22px;
  text-align: left;
  background: #f0f7f5;
  border: 1px solid #cfdfda;
  border-radius: 12px;
}

.study-notes h3 { margin: 0 0 10px; }
.study-notes ul { margin: 0; padding-inline-start: 1.25em; }
.study-notes li + li { margin-top: 8px; }

.free-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin: 16px 0;
}

.free-tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid #cbded9;
  border-radius: 14px;
  background: #edf7f4;
  color: #18332d;
}

.lab-card {
  background: #f4f1fc;
  border-color: #ddd3f0;
}

.free-tool h3 { margin: 6px 0 4px; }
.free-tool p { margin: 0 0 14px; }
.free-tool button { margin-top: auto; }

.particle-vessel {
  display: block;
  width: min(100%, 280px);
  margin: 16px auto;
  border: 2px solid #92b7ad;
  border-radius: 12px;
  background: #e9f6f1;
  fill: #176955;
}

.particle-controls [aria-pressed="true"] {
  color: #fff;
  background: #176955;
  border-color: #176955;
}

.traffic-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#owner-dialog .traffic-controls label { display:inline; margin:0; }
#owner-dialog .traffic-controls select { width:auto; min-width:135px; }

/* Classroom presentation resources */
.slides-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0;padding:24px;background:#eaf2ef;border-radius:16px}.slides-banner h2{margin:0 0 8px}.slides-banner p{margin:0}.slides-list{border-top:1px solid #dce5df}.slide-download{display:block;padding:18px 0;color:#174d49;font-weight:600;text-decoration:underline;text-underline-offset:3px;border-bottom:1px solid #dce5df}.slide-download span{display:block;font-size:12px;font-weight:400;color:#556b68;margin-top:5px;text-decoration:none}.related-slides{margin:14px 0;font-size:13px}.related-slides .slide-download{padding:7px 0}.related-slides>strong{font-size:11px;text-transform:uppercase;color:#607571;letter-spacing:1px}.slide-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.slide-figures figure{margin:0}.slide-figures img{width:100%;height:210px;object-fit:contain;background:white;border-radius:8px}.slide-figures figcaption{margin-top:10px;font-size:14px;color:#526963}@media(max-width:650px){.slides-banner{align-items:flex-start;flex-direction:column}.slide-figures{grid-template-columns:1fr}}

.lesson-slide-match{padding:20px 0;border-bottom:1px solid #dce5df}.lesson-slide-match h3{margin:0 0 8px}.related-slides p{line-height:1.6;max-width:75ch}.related-slides summary,.chapter-slides>summary{cursor:pointer;padding:14px 0;color:#174d49;font-weight:600}.chapter-slides{margin:24px 0}

.slide-open{width:100%;text-align:left;background:transparent;border-radius:0;font:inherit;font-weight:600;cursor:pointer}.slide-open:hover{background:#edf3ed}.slide-player h1{max-width:950px}.slide-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0}.slide-controls>span{min-width:130px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}.slide-stage{background:#102d35;position:relative;width:100%;border-radius:10px;overflow:hidden;min-height:160px;display:flex;align-items:center;justify-content:center}.slide-stage canvas{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}.slide-stage>p{position:absolute;color:white;top:30px;left:25px}.slide-stage:fullscreen{border-radius:0;background:#102d35}.slide-stage:fullscreen canvas{width:auto;height:100%;max-width:100%;object-fit:contain}.slide-transcript{margin:16px 0;padding:14px;background:#eef2eb;border-radius:10px}.slide-transcript pre{white-space:pre-wrap;font:inherit}.slide-player .subtitle{font-size:13px}@media(max-width:600px){.slide-controls{gap:8px}.slide-controls button{padding:10px;font-size:12px}.slide-controls>span{min-width:105px}.slide-player h1{font-size:26px}}@media print{.slide-stage{display:none}.slide-player::after{content:'View this presentation on ChemPath Practice.'}}

.slide-stage canvas{max-height:72vh;object-fit:contain}.slide-stage:fullscreen canvas{max-height:100vh}