#midterms-classroom{--navy:#102036;--ink:#16253c;--muted:#4a596a;--paper:#f4f3ee;--card:#fffdf8;--line:#d9d9d0;--amber:#ffbf57;--teal:#225753;color:var(--ink);background:var(--paper);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
#midterms-classroom *,#midterms-classroom *::before,#midterms-classroom *::after{box-sizing:border-box}
#midterms-classroom :is(h1,h2,h3,h4,p){margin:0}
#midterms-classroom :is(button,a){font:inherit}
#midterms-classroom :is(button,a):focus-visible{outline:3px solid #157c76;outline-offset:3px}
#midterms-classroom a{color:inherit;text-underline-offset:3px}
#midterms-classroom button{cursor:pointer}
#midterms-classroom button:disabled{cursor:default}
.mt-head{background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:17px max(24px,calc((100% - 1192px)/2));border-bottom:1px solid #334155}
.mt-brand{display:flex;align-items:center;gap:10px;font-weight:850;letter-spacing:.09em;line-height:1.2;white-space:nowrap}
.mt-brand small{display:block;color:#b9c9da;font-size:.61rem;letter-spacing:.17em;margin-top:3px}
.mt-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--amber);color:var(--navy);border-radius:5px}
.mt-head nav{display:flex;gap:22px}
#midterms-classroom .mt-head a{text-decoration:none;font-size:.88rem;font-weight:650}
.mt-edition,.mt-kicker,.mt-ann>strong,.mt-state-head>span,.mt-clock span,.mt-qnum,.mt-feature>span,.mt-footer,.mt-preview{font-family:ui-monospace,Consolas,monospace;letter-spacing:.105em;font-weight:750;font-size:.75rem}
.mt-edition{color:var(--amber);white-space:nowrap}
.mt-main{max-width:1240px;margin:auto;padding:24px}
#midterms-classroom .mt-preview{padding:0 0 12px;color:var(--teal)}
.mt-hero{display:flex;align-items:end;justify-content:space-between;gap:30px;border-radius:12px;padding:clamp(24px,5vw,60px);background:radial-gradient(ellipse at 80% 0%,#29445c,var(--navy) 62%);color:#fff}
.mt-hero .mt-kicker{color:var(--amber)}
#midterms-classroom h1{font:700 clamp(3rem,8vw,7rem)/.87 Georgia,serif;letter-spacing:-.065em;margin:16px 0 24px;color:#fff}
#midterms-classroom h1 em{font-weight:400;color:var(--amber)}
.mt-hero p:last-child{color:#d7e1ed;max-width:350px}
.mt-hero-side{min-width:205px;border-left:1px solid #718093;padding-left:22px}
.mt-hero-side p,.mt-hero-side strong span{color:#cbd7e3;font:750 .75rem ui-monospace,monospace;letter-spacing:.12em}
.mt-hero-side strong{display:block;font:700 4rem/1.2 Georgia,serif;color:#fff}
#midterms-classroom .mt-button{display:inline-block;border:1px solid transparent;background:var(--amber);color:var(--navy);text-decoration:none;padding:9px 13px;border-radius:5px;font-size:.87rem;font-weight:750}
#midterms-classroom .mt-button:hover{background:#ffd68c}
#midterms-classroom .mt-button:disabled{opacity:.5}
.mt-ann{margin:17px 0;display:flex;align-items:baseline;gap:16px;border:1px solid #e2c785;background:#fff0c9;padding:11px 16px;border-radius:7px;white-space:pre-wrap}
.mt-ann>strong{flex:none}
.mt-grid{display:grid;grid-template-columns:1.28fr 1fr;gap:16px;align-items:start}
.mt-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:clamp(16px,3vw,27px);min-width:0;scroll-margin-top:20px}
.mt-card .mt-kicker{color:var(--teal)}
#midterms-classroom h2{font:700 clamp(1.55rem,3vw,2.1rem)/1.15 Georgia,serif;color:var(--navy);margin:5px 0 8px}
#midterms-classroom h3{font-size:1.08rem;font-weight:780;line-height:1.35}
.mt-card>p:not(.mt-kicker),.mt-card #mt-video>p{color:var(--muted);font-size:.93rem}
.mt-states{margin:17px 0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
#midterms-classroom .mt-states button{border:1px solid var(--line);background:#f3f4f1;color:var(--navy);font:700 .76rem ui-monospace,monospace;min-height:36px;border-radius:4px;padding:0}
#midterms-classroom .mt-states button:hover{background:#e3ebe7}
#midterms-classroom .mt-states button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.mt-state{border-top:1px solid var(--line);padding-top:13px}
.mt-state-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-state-head>span{color:var(--teal);text-align:right}
.mt-actions{display:flex;flex-wrap:wrap;gap:6px 15px;margin:8px 0;font-size:.87rem;font-weight:700}
.mt-state p,.mt-race,.mt-feature p{font-size:.88rem;color:var(--muted)}
.mt-race{margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:5px}
.mt-race>div{display:flex;justify-content:space-between;gap:10px}
.mt-clock{display:flex;justify-content:space-between;align-items:center;margin:14px 0;padding:9px 13px;background:var(--navy);color:white;border-radius:5px}
.mt-clock strong{font:800 1.4rem ui-monospace,monospace;color:var(--amber);font-variant-numeric:tabular-nums}
.mt-qnum,.mt-feature>span{color:var(--teal)}
.mt-choices{display:grid;gap:6px;margin:10px 0}
#midterms-classroom .mt-choices button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);padding:7px 9px;font-size:.91rem}
.mt-choices button span{font:750 .7rem ui-monospace,monospace;background:#f2eee3;border-radius:4px;min-width:22px;padding:4px;text-align:center}
#midterms-classroom .mt-choices button[aria-pressed=true]{border-color:var(--navy);background:#e7edf3}
#midterms-classroom .mt-choices button.mt-correct{border-color:#4e8d6b;background:#e3f4e9}
#midterms-classroom .mt-standard{font-size:.77rem;margin-top:10px;color:var(--muted)}
#midterms-classroom .mt-feedback{margin:9px 0;padding:8px;background:#e3f4e9;border-radius:5px;font-size:.88rem}
.mt-feature{margin-top:12px;background:#eff3f1;padding:13px;border-radius:5px}
.mt-feature h3{margin:4px 0!important}
.mt-feature .mt-button{margin:8px 7px 0 0}
.mt-feature iframe{margin-top:10px;width:100%;border:0;aspect-ratio:16/9}
.mt-links{display:grid;gap:7px;margin-top:10px;font-size:.88rem}
.mt-links a{font-weight:700}
.mt-links small{display:block;color:var(--muted);font-size:.8rem}
.mt-footer{padding:16px 24px 24px;text-align:center;color:var(--muted)}
.mt-footer span{color:var(--teal);padding:0 6px}
@media(max-width:850px){.mt-grid{grid-template-columns:1fr 1fr}.mt-states{grid-template-columns:repeat(5,1fr)}}
@media(max-width:660px){.mt-main{padding:12px}.mt-head{padding:12px;flex-wrap:wrap}.mt-head nav{order:3;width:100%;gap:15px}.mt-hero{display:block}.mt-hero-side{border:0;padding:12px 0 0}.mt-hero-side strong{font-size:2.7rem}.mt-grid{grid-template-columns:1fr}.mt-states{grid-template-columns:repeat(10,1fr)}.mt-ann{display:block}}
@media(max-width:365px){.mt-states{grid-template-columns:repeat(5,1fr)}}

.mt-livebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px max(24px, calc((100% - 1192px) / 2));
  border-bottom: 1px solid #394b64;
  background: #182c45;
  color: #f3f7fb;
}

.mt-live-label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--amber);
  color: var(--navy);
  font: 800 .69rem/1.3 ui-monospace, Consolas, monospace;
  letter-spacing: .1em;
}

.mt-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: currentColor;
  animation: mt-signal 1s ease-out 3;
}

.mt-live-status {
  color: #fff;
  font-size: .84rem;
  font-weight: 750;
}

.mt-live-ticker {
  flex: 1 1 17rem;
  min-width: 0;
  color: #dce8f5;
  font-size: .84rem;
}

.mt-live-track {
  display: block;
  overflow-wrap: anywhere;
  animation: mt-enter .3s ease-out both;
}

.mt-loading {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 110px;
  max-width: 1192px;
  margin: 0 auto;
  padding: 18px 24px;
  color: var(--muted);
  font-weight: 700;
}

.mt-loading-bars {
  display: inline-flex;
  align-items: flex-end;
  flex: none;
  gap: 3px;
  height: 24px;
}

.mt-loading-bars span {
  width: 4px;
  height: 22px;
  border-radius: 3px;
  background: var(--teal);
  transform: scaleY(.55);
  transform-origin: bottom;
  animation: mt-bars .72s ease-in-out 6;
}

.mt-loading-bars span:nth-child(2) {
  animation-delay: .12s;
  transform: scaleY(.82);
}

.mt-loading-bars span:nth-child(3) {
  animation-delay: .24s;
  transform: scaleY(.66);
}

.mt-meter {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #c9d5db;
}

.mt-meter > span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--teal);
  transform-origin: left center;
  transition: width .25s ease-out, transform .25s ease-out;
}

.mt-state.mt-state-enter {
  animation: mt-enter .25s ease-out both;
}

@keyframes mt-enter {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mt-signal {
  50% { opacity: .55; transform: scale(1.2); }
}

@keyframes mt-bars {
  50% { transform: scaleY(1); }
}

@media (max-width: 660px) {
  .mt-livebar { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-live-dot,
  .mt-live-track,
  .mt-loading-bars span,
  .mt-state.mt-state-enter { animation: none; }
  .mt-meter > span { transition: none; }
}
.mt-scoreboard {margin: 0 0 1rem;}
.mt-scores {display: grid; grid-template-columns: repeat(auto-fit,minmax(78px,1fr)); gap: .5rem;}
.mt-scores > div {display: grid; gap: .2rem; padding: .6rem .35rem; text-align: center; border-radius: .45rem; background: #102036; color: #fff;}
.mt-scores strong {color: #ffbf57; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums;}