:root {
  color-scheme:dark;
  --bg:#101c21;
  --panel:#18272c;
  --line:#304147;
  --text:#eff0e7;
  --muted:#a2b3b7;
  --lime:#d5e99a;
  --blue:#9dbded;
  --amber:#efc084;
  --mono:'SFMono-Regular',Consolas,monospace;
  --heading:'Avenir Next','Segoe UI',Arial,sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:14px;
  line-height:1.5
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  cursor:pointer
}

button:disabled {
  cursor:default
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:4px
}

button {
  color:inherit
}

a {
  color:var(--lime)
}

[hidden] {
  display:none!important
}

.topbar {
  height:90px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4%
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  color:var(--text);
  font:700 19px var(--heading);
  letter-spacing:1px
}

.brand-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #56664c;
  border-radius:50%;
  color:var(--lime);
  font-size:27px;
  transform:rotate(-25deg)
}

.brand small {
  display:block;
  font:9px var(--mono);
  letter-spacing:1.5px;
  color:var(--muted);
  margin-top:7px
}

.session-label {
  display:flex;
  align-items:center;
  gap:10px;
  font:10px var(--mono);
  letter-spacing:1px;
  color:var(--muted)
}

.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 9px #d5e99a30
}

.separator {
  color:#567078;
  margin:0 8px
}

.quiet-button {
  background:transparent;
  border:1px solid #4b5e64;
  border-radius:6px;
  padding:10px 15px;
  font-size:12px
}

.quiet-button:hover {
  background:#26373c
}

.quiet-button span {
  margin-left:16px;
  color:var(--lime)
}

main {
  max-width:1560px;
  margin:auto;
  padding:36px 4% 0
}

.eyebrow {
  font:10px var(--mono);
  letter-spacing:1.2px;
  color:var(--muted);
  line-height:1.6
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  font:500 clamp(29px,3vw,42px)/1.15 var(--heading);
  letter-spacing:-1.4px;
  margin-bottom:12px
}

.intro {
  color:var(--muted);
  margin-bottom:0
}

.primary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--lime);
  color:#17221a;
  border:0;
  padding:15px 19px;
  border-radius:6px;
  font-size:13px;
  font-weight:700;
  margin-top:16px;
  width:100%
}

.primary-button:hover {
  background:#e1f4ad
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 0;
  font:8px/1.6 var(--mono);
  letter-spacing:.6px;
  color:#90a3aa
}

dialog {
  background:#1a2a2f;
  color:var(--text);
  border:1px solid #526567;
  border-radius:13px;
  padding:28px;
  width:min(570px,calc(100% - 30px));
  max-height:85vh;
  box-shadow:0 30px 100px #0007
}

dialog::backdrop {
  background:#020d13bd;
  backdrop-filter:blur(5px)
}

.guide-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}

.guide-top .quiet-button {
  padding:7px 12px
}

dialog h2 {
  font:500 29px var(--heading);
  letter-spacing:-1px
}

dialog>p {
  color:#b7c8cb;
  font-size:13px;
  line-height:1.7
}

.guide-rules dt {
  color:var(--lime);
  font-size:13px;
  margin:17px 0 4px
}

.guide-rules dd {
  margin:0;
  color:#d0dbdc;
  font-size:13px;
  line-height:1.65
}

.guide-small {
  font-size:11px!important
}

.guide-sources {
  display:flex;
  flex-wrap:wrap;
  gap:8px 15px;
  margin:18px 0;
  font-size:11px
}

@media(max-width:1050px) {
.session-label {
    display:none
  }
.eyebrow {
    font-size:8px
  }
}

@media(max-width:760px) {
.topbar {
    height:76px;
    padding:0 20px
  }
.brand {
    font-size:16px
  }
.brand small {
    font-size:7px
  }
.brand-icon {
    width:35px;
    height:35px
  }
.quiet-button {
    font-size:11px;
    padding:9px 10px
  }
main {
    padding:26px 18px 0
  }
.intro {
    font-size:12px
  }
.page-footer {
    flex-direction:column;
    gap:5px;
    font-size:7px
  }
}

@media(max-width:380px) {
.brand small {
    letter-spacing:.7px
  }
}

@media(prefers-reduced-motion:reduce) {
* {
    scroll-behavior:auto!important;
    transition:none!important
  }
}

/* Classroom readability: supporting labels never shrink below 12px. */
body { font-size: 16px; }
:root { --muted: #bdcbd0; }
.eyebrow { font-size: 12px; letter-spacing: .7px; color: #bdcbd0; }
.topbar { min-height: 90px; height: auto; padding-top: 18px; padding-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.brand small { font-size: 12px; letter-spacing: .5px; }
.session-label { font-size: 12px; }
.quiet-button { display: inline-block; color: var(--text); text-decoration: none; font-size: 14px; min-height: 44px; }
.page-footer { font-size: 12px; letter-spacing: .2px; }
.primary-button { font-size: 16px; min-height: 48px; }
dialog > p, .guide-rules dd { font-size: 16px; }
.guide-rules dt { font-size: 17px; }
.guide-small { font-size: 14px !important; }
.guide-sources { font-size: 14px; line-height: 1.7; }
.guide-top { gap: 16px; }
.guide-top .quiet-button { flex-shrink: 0; }
@media (max-width: 420px) {
  .topbar { padding: 16px 18px; }
  .brand { font-size: 17px; }
  .brand small { font-size: 12px; }
  .brand-icon { width: 32px; height: 32px; }
  .topbar > .quiet-button { margin-left: auto; }
}