*{box-sizing:border-box}
:root{
 --bg:#08111f;--panel:#111c2f;--panel2:#16243c;--border:#2d3e5a;
 --text:#f4f8ff;--muted:#a9bad1;--blue:#69a9ff;--green:#42d6a4;
 --yellow:#ffd166;--red:#ff7b8a
}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
background:radial-gradient(circle at top right,rgba(70,123,190,.16),transparent 30%),linear-gradient(180deg,#08101c,#0a1322 50%,#0d1728);
color:var(--text)}
button,input,select{font:inherit}button{cursor:pointer}
.hidden{display:none!important}
.app-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:28px 0 56px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.eyebrow,.mini-label{margin:0 0 7px;font-size:.76rem;font-weight:900;letter-spacing:.11em;color:var(--blue)}
h1{margin:0;font-size:clamp(2.3rem,5vw,4rem);line-height:.95;letter-spacing:-.05em}
h2{margin:0 0 12px;font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.035em}
.tagline,.section-copy{color:var(--muted);line-height:1.6}.tagline{margin:8px 0 0}
.student-pill,.score-card{padding:10px 15px;border:1px solid var(--border);background:#101a2c;border-radius:16px}
.status-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.student-pill span{color:var(--muted);font-size:.75rem;display:block}.student-pill strong{font-size:.95rem}
.score-card{text-align:center;min-width:88px}.score-card span{font-size:.7rem;color:var(--muted);display:block;text-transform:uppercase}.score-card strong{font-size:1.5rem}
.progress-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}
.nav-step{border:1px solid var(--border);background:#101a2c;color:var(--muted);border-radius:14px;padding:12px 10px;font-weight:800}
.nav-step.active{color:white;border-color:#508fdf;background:#17345b}.nav-step.done:after{content:" ✓";color:var(--green)}
.screen{display:none}.screen.active{display:block}
.card{background:rgba(17,28,47,.96);border:1px solid var(--border);border-radius:24px;padding:clamp(20px,4vw,34px);box-shadow:0 24px 60px rgba(0,0,0,.24)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero p{color:#c9d6e8;line-height:1.65}.callout{margin:20px 0;padding:16px 18px;border-left:4px solid var(--blue);border-radius:12px;background:#0d1a2d;line-height:1.55}
.demo-panel{padding:24px;border:1px solid var(--border);border-radius:22px;background:#0a1424}
.big-binary{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.big-binary span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:#142640;font-size:1.4rem;font-weight:950}.big-binary .on{background:#12665d}.equation{text-align:center}
.primary,.secondary,.danger{border-radius:12px;padding:12px 16px;font-weight:900}
.primary{border:0;color:#07111f;background:var(--blue)}.secondary{color:white;background:#1b2a43;border:1px solid #3a506f}.danger{color:white;background:#50202a;border:1px solid #944b5c}
.button-row{display:flex;gap:10px;flex-wrap:wrap}.end-row{justify-content:space-between;margin-top:26px}.centered{justify-content:center}
.flip-board,.game-bit-board{display:grid;grid-template-columns:repeat(8,minmax(64px,1fr));gap:10px;overflow-x:auto;padding:6px 0}
.bit-tile{min-width:64px;background:#0b1525;border:1px solid var(--border);border-radius:16px;padding:9px;text-align:center}
.bit-value{display:block;margin-bottom:8px;color:var(--muted);font-size:.72rem;font-weight:800}
.bit-button{width:100%;aspect-ratio:1;border:1px solid #3a4e6b;border-radius:12px;background:#17253d;color:white;font-size:1.8rem;font-weight:950}
.bit-button.on{background:#107266;border-color:#38d6bf;color:#fff}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.metric{min-width:0;padding:14px;background:#0b1525;border:1px solid var(--border);border-radius:14px}.metric span{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase}.metric strong{display:block;margin-top:5px;font-size:clamp(1.1rem,2.5vw,1.7rem);overflow-wrap:anywhere}
.challenge-box,.concept-check,.tracking-box{margin-top:22px;padding:18px;background:#0d192b;border:1px solid var(--border);border-radius:16px}.feedback{min-height:24px;margin:12px 0 0;font-weight:700;color:#cbd8ea}.feedback.good{color:#8ff0ce}.feedback.bad{color:#ffb2bc}
.odometer-controls{display:flex;align-items:end;gap:12px;margin:18px 0}.odometer-controls label{color:var(--muted);font-size:.83rem;font-weight:800}.odometer-controls select{display:block;margin-top:5px;padding:10px 12px;color:white;background:#0b1525;border:1px solid var(--border);border-radius:10px}
.odometer-digits{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:18px;border-radius:20px;background:#07111e;border:1px solid var(--border)}
.odo-digit{display:grid;place-items:center;width:74px;height:92px;border:1px solid #3b506e;border-radius:14px;background:#14223a;font-size:2.7rem;font-weight:950}.odo-digit.carry{animation:carry .45s ease}@keyframes carry{50%{transform:translateY(-5px);background:#145c59}}
.overflow-message{display:none;margin-top:18px;padding:16px 18px;background:#35151e;border:1px solid #8c4051;border-radius:14px;color:#ffd4da}.overflow-message.show{display:block}
.answer-buttons{display:flex;gap:10px;flex-wrap:wrap}.choice{padding:10px 16px;border:1px solid #3a506f;border-radius:10px;background:#18273e;color:white;font-weight:850}
.game-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.harbor-scene{min-height:350px;position:relative;overflow:hidden;padding:22px;background:radial-gradient(circle at 78% 15%,rgba(105,169,255,.22),transparent 24%),linear-gradient(180deg,#0a2844 0 45%,#0b3a51 45% 65%,#0b2030 65%);border:1px solid var(--border);border-radius:20px}
.water-lines{position:absolute;left:0;right:0;top:48%;height:36%;background:repeating-linear-gradient(180deg,transparent,transparent 16px,rgba(148,214,255,.13) 17px,transparent 19px)}
.packet-card{position:relative;width:min(250px,90%);margin:26px auto;padding:18px;text-align:center;color:#07111f;background:#f6f9ff;border-radius:16px;box-shadow:0 14px 26px rgba(0,0,0,.22)}.packet-card span{display:block;color:#5d6b7d;font-size:.68rem;letter-spacing:.11em;font-weight:900}.packet-card strong{display:block;margin:4px 0;font-size:2rem}.packet-card small{color:#526072}
.timer-track{position:relative;height:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.17)}.timer-bar{width:100%;height:100%;border-radius:inherit;background:var(--yellow)}
.dock-row{position:absolute;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dock-row div{padding:12px 6px;text-align:center;background:#6d4d35;border:1px solid #9e7959;border-radius:9px 9px 3px 3px;font-weight:850}
.game-console{padding:18px;border:1px solid var(--border);border-radius:20px;background:#0b1525}.game-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.game-stats div{padding:10px;border:1px solid var(--border);border-radius:12px;background:#111e32}.game-stats span{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase}.game-stats strong{display:block;margin-top:3px;font-size:1.25rem}
.game-value{text-align:center;color:var(--muted)}.decode-panel{padding:20px 0}.decode-binary{margin-bottom:16px;padding:18px;text-align:center;background:#111f34;border:1px solid var(--border);border-radius:14px;font-family:monospace;font-size:clamp(1.7rem,5vw,2.7rem);letter-spacing:.14em}.decode-panel label{display:block;color:var(--muted);font-size:.8rem;font-weight:850}.decode-panel input{width:100%;margin-top:6px;padding:13px;color:white;background:#101c2f;border:1px solid #3b506e;border-radius:11px}.hint-box{margin-top:16px;padding:13px 15px;border-left:4px solid var(--yellow);border-radius:10px;background:#251f12;color:#ffe6a0}.hint-box p{margin:4px 0 0;line-height:1.45}
.login-overlay{
 position:fixed;
 inset:0;
 width:100%;
 min-height:100vh;
 min-height:100dvh;
 background:rgba(2,7,14,.92);
 display:flex;
 justify-content:center;
 align-items:flex-start;
 overflow-y:auto;
 overflow-x:hidden;
 padding:20px;
 z-index:999;
 -webkit-overflow-scrolling:touch
}
.login-card{
 width:min(520px,100%);
 flex:0 0 auto;
 margin:auto;
 background:#111c2f;
 border:1px solid var(--border);
 border-radius:24px;
 padding:28px;
 box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.login-card h2{font-size:2.2rem}

@media (max-height:700px){
 .login-overlay{
  padding:12px 16px
 }
 .login-card{
  margin-top:0;
  margin-bottom:0;
  padding:20px
 }
 .login-card h2{
  margin-bottom:8px;
  font-size:1.9rem
 }
 .login-card .form-group{
  margin-top:8px
 }
 .login-card .privacy-note{
  margin:8px 0
 }
}

@media (max-width:560px){
 .login-overlay{
  padding:12px
 }
 .login-card{
  padding:20px;
  border-radius:18px
 }
 .form-grid{
  grid-template-columns:1fr
 }
 .form-group.full{
  grid-column:auto
 }
}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group{margin-top:12px}.form-group.full{grid-column:1/-1}.form-group label{display:block;margin-bottom:5px;color:var(--muted);font-size:.82rem;font-weight:800}.form-group input{width:100%;padding:12px;color:white;background:#0b1525;border:1px solid #3b506e;border-radius:10px}.privacy-note{font-size:.84rem;color:var(--muted);line-height:1.5}
.progress-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.progress-item{padding:12px;border:1px solid var(--border);border-radius:12px;background:#101b2d}.progress-item strong{display:block;margin-top:4px}.progress-item.complete{border-color:#27745f;background:#102b27}
.teacher-tools{margin-top:18px;border-top:1px solid var(--border);padding-top:18px}.small{font-size:.83rem;color:var(--muted)} .lesson-intro{margin:18px 0;padding:18px;border:1px solid var(--border);border-radius:16px;background:#0c1829}.lesson-intro h3{margin-top:0}.lesson-intro p{color:#c8d4e5;line-height:1.6}.odo-note{margin-top:14px;padding:14px;border-radius:12px;background:#182215;border:1px solid #465f31;color:#d8f1b6}

.history-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.history-card{padding:16px;border:1px solid var(--border);border-radius:16px;background:#0b1525}
.history-card h4{margin:0 0 8px;color:var(--yellow)}
.history-card p{margin:0;color:#c8d4e5;line-height:1.55;font-size:.92rem}
.warning-card{margin:18px 0;padding:16px;border-left:4px solid var(--red);background:#2b151c;border-radius:12px;color:#ffd6dc}
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.context-bit-display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:.12em;text-align:center;padding:22px;border:1px solid var(--border);border-radius:16px;background:#081321}
.interpretation-list{display:grid;gap:10px;margin-top:14px}
.interpretation{padding:14px;border:1px solid var(--border);border-radius:12px;background:#101b2d}
.interpretation span{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase}
.interpretation strong{display:block;margin-top:4px;font-size:1.2rem}
.sign-demo{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:16px 0}
.sign-demo div{padding:12px 4px;text-align:center;border:1px solid var(--border);border-radius:10px;background:#122039;font-weight:900}
.sign-demo div:first-child{background:#4a1f2a;border-color:#9b4e60}
.sign-weights{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;color:var(--muted);font-size:.72rem;text-align:center}
.source-note{font-size:.78rem;color:var(--muted);line-height:1.5;margin-top:16px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.media-card{padding:18px;border:1px solid var(--border);border-radius:18px;background:#0b1525}
.media-card h3{margin-top:0}
.beat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:14px 0}
.beat-cell{aspect-ratio:1;border-radius:10px;border:1px solid #3a506f;background:#13243b;color:white;font-weight:900}
.beat-cell.on{background:#107266;border-color:#38d6bf;color:#fff}
.pixel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:230px;margin:12px auto}
.pixel{aspect-ratio:1;border:1px solid #40516b;border-radius:4px;background:white}
.pixel.black{background:black}
.rgb-preview{width:110px;height:110px;border-radius:14px;border:1px solid var(--border);margin:12px auto}
.slider-row{display:grid;grid-template-columns:28px 1fr 42px;gap:8px;align-items:center;margin:8px 0}

.ascii-ref{margin-top:14px;overflow-x:auto;border:1px solid var(--border);border-radius:12px}
.ascii-ref table{width:100%;border-collapse:collapse;font-size:.82rem}
.ascii-ref th,.ascii-ref td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:center}
.ascii-ref th{background:#13243b;color:var(--blue)}
.ascii-ref tr:last-child td{border-bottom:0}
.play-status{margin-top:10px;font-size:.82rem;color:var(--muted)}


.rgb-values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.rgb-value-card{padding:10px;border:1px solid var(--border);border-radius:10px;background:#101b2d}
.rgb-value-card span{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase}
.rgb-value-card strong{display:block;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem}
.hex-note{margin-top:14px;padding:14px;border-left:4px solid var(--blue);border-radius:10px;background:#0d192b;color:#cbd8ea;line-height:1.5;font-size:.9rem}
@media(max-width:650px){.rgb-values{grid-template-columns:1fr}}

@media(max-width:950px){.history-grid,.context-grid,.media-grid{grid-template-columns:1fr}.progress-nav{grid-template-columns:1fr 1fr}.sign-demo,.sign-weights{min-width:620px}.context-scroll{overflow-x:auto}}

@media(max-width:850px){.hero,.game-layout{grid-template-columns:1fr}.progress-nav{grid-template-columns:1fr 1fr}.metrics,.progress-summary{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.app-shell{width:min(100% - 18px,1180px);padding-top:16px}.topbar{align-items:flex-start;flex-direction:column}.status-wrap{justify-content:flex-start}.progress-nav,.metrics,.progress-summary,.form-grid{grid-template-columns:1fr}.card{padding:18px}.odo-digit{width:52px;height:68px;font-size:2rem}.end-row{flex-direction:column}}

/* Dr. TeachTech shared app shell */
:root{
  --dt-bg:#f5f7fb;
  --dt-card:#ffffff;
  --dt-ink:#182235;
  --dt-muted:#667085;
  --dt-line:#d9e0e8;
  --dt-navy:#17324d;
  --dt-blue:#2f6f9f;
  --dt-blue-soft:#eaf3f9;
  --dt-green:#2f7d63;
  --dt-green-soft:#e9f5f0;
  --dt-warm:#f8f4ec;
  --dt-danger:#9d3d46;
}
body{
  background:var(--dt-bg);
  color:var(--dt-ink);
}
.app-shell{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:0 0 56px;
}
.dt-site-header{
  background:#fff;
  border-bottom:1px solid var(--dt-line);
  box-shadow:0 1px 0 rgba(24,34,53,.03);
}
.dt-header-inner{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 14px;
}
.dt-brand-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
}
.dt-brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.dt-logo-mark{
  width:42px;height:42px;border-radius:12px;
  background:var(--dt-navy);color:#fff;
  display:grid;place-items:center;
  font-weight:900;font-size:1.1rem;
}
.dt-brand-copy strong{
  display:block;font-size:1rem;color:var(--dt-navy);
}
.dt-brand-copy span{
  display:block;font-size:.78rem;color:var(--dt-muted);margin-top:2px;
}
.dt-app-name{
  color:var(--dt-navy);
  font-size:.92rem;
  font-weight:900;
  text-align:right;
  border-left:1px solid var(--dt-line);
  padding-left:16px;
}
.dt-app-name small{display:block;color:var(--dt-muted);font:700 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;margin-top:2px}
.dt-savebar{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--dt-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.dt-save-status{
  display:flex;align-items:center;gap:8px;
  color:var(--dt-muted);font-size:.82rem;
}
.dt-status-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--dt-green);
  box-shadow:0 0 0 3px var(--dt-green-soft);
}
.dt-save-actions{display:flex;gap:8px;flex-wrap:wrap}
.dt-btn{
  border:1px solid var(--dt-line);
  background:#fff;
  color:var(--dt-navy);
  padding:9px 12px;
  border-radius:9px;
  font-weight:800;
  font-size:.82rem;
}
.dt-save-actions a.dt-btn,.dt-file-row a.dt-btn{text-decoration:none}
.dt-header-row{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%}
.teacher-guide-page{max-width:920px}.teacher-guide-page>h1{color:var(--dt-navy);font-size:clamp(2.6rem,7vw,5rem);margin:.2rem 0}.teacher-guide-page>.dt-hero-slogan{margin-bottom:2rem}.teacher-guide-page .card{margin-bottom:1.25rem}.teacher-guide-page li,.teacher-guide-page p{line-height:1.65}
.dt-btn:hover{background:var(--dt-blue-soft)}
.dt-btn.primary{
  background:var(--dt-navy);color:#fff;border-color:var(--dt-navy);
}
.dt-btn.primary:hover{background:#234766}
.dt-hero{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 24px;
}
.dt-kicker{
  margin:0 0 7px;
  color:var(--dt-blue);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:900;
}
.dt-hero h1{
  margin:0;color:var(--dt-navy);
  font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:.98;letter-spacing:-.045em;
}
.dt-hero p{
  max-width:820px;
  color:var(--dt-muted);
  line-height:1.65;
  margin:12px 0 0;
}
.dt-workspace-card{
  background:#fff;
  border:1px solid var(--dt-line);
  border-radius:18px;
  box-shadow:0 8px 28px rgba(24,34,53,.06);
}
.dt-workspace-label{
  color:var(--dt-blue);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.72rem;
  font-weight:900;
  margin-bottom:6px;
}
.dt-login-note{
  color:var(--dt-muted);
  line-height:1.55;
  font-size:.9rem;
}
.dt-file-row{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--dt-line);
}
.dt-hidden-input{display:none}

/* Bring existing game UI into the shared light visual language */
.topbar{
  margin:0 0 18px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--dt-line);
  border-radius:16px;
  align-items:center;
}
.topbar h1{font-size:1.5rem;letter-spacing:-.02em;color:var(--dt-navy)}
.topbar .eyebrow{display:none}
.tagline{color:var(--dt-muted)}
.student-pill,.score-card{
  background:var(--dt-bg);border-color:var(--dt-line);color:var(--dt-ink);
}
.student-pill span,.score-card span{color:var(--dt-muted)}
.progress-nav{
  background:#fff;
  border:1px solid var(--dt-line);
  border-radius:14px;
  padding:6px;
  gap:5px;
}
.nav-step{
  background:transparent;
  border:0;
  color:var(--dt-muted);
  border-radius:9px;
}
.nav-step.active{
  background:var(--dt-blue-soft);
  color:var(--dt-navy);
  border:0;
}
.card,.demo-panel,.challenge-box,.concept-check,.tracking-box,.lesson-intro,
.metric,.game-console,.bit-tile,.interpretation,.media-card,.history-card{
  background:#fff;
  color:var(--dt-ink);
  border-color:var(--dt-line);
  box-shadow:none;
}
.card{
  border-radius:18px;
  box-shadow:0 8px 28px rgba(24,34,53,.05);
}
.card h2,.hero h2{color:var(--dt-navy)}
.section-copy,.hero p,.small,.history-card p,.dt-login-note{color:var(--dt-muted)}
.eyebrow,.mini-label{color:var(--dt-blue)}
.callout{
  background:var(--dt-blue-soft);
  color:var(--dt-navy);
  border-left-color:var(--dt-blue);
}
.primary{
  background:var(--dt-navy);color:#fff;
}
.secondary{
  background:#fff;color:var(--dt-navy);border-color:var(--dt-line);
}
.danger{
  background:#fff;color:var(--dt-danger);border-color:#e6c7cb;
}
.bit-button{
  background:#f4f6f8;color:var(--dt-navy);border-color:var(--dt-line);
}
.bit-button.on{
  background:var(--dt-green);color:#fff!important;border-color:var(--dt-green);
}
.metric,.game-stats div{
  background:var(--dt-bg);
  border-color:var(--dt-line);
}
.odometer-digits{
  background:var(--dt-navy);
  border-color:var(--dt-navy);
}
.odo-digit{
  background:#fff;color:var(--dt-navy);border-color:#dfe7ee;
}
.login-overlay{
  background:rgba(19,36,55,.72);
}
.login-card{
  background:#fff;
  color:var(--dt-ink);
  border-color:var(--dt-line);
  box-shadow:0 24px 80px rgba(19,36,55,.24);
}
.login-card h2{color:var(--dt-navy)}
.dt-login-slogan{margin:-.25rem 0 1rem;color:var(--dt-muted);font-size:1.02rem;font-weight:700;line-height:1.45}
.form-group input,.decode-panel input,#asciiInput{
  color:var(--dt-ink)!important;
  background:#fff!important;
  border-color:var(--dt-line)!important;
}
.privacy-note{color:var(--dt-muted)}
.feedback.good{color:var(--dt-green)}
.feedback.bad{color:var(--dt-danger)}
.hex-note{background:var(--dt-blue-soft);color:var(--dt-navy)}
.progress-item{background:var(--dt-bg);border-color:var(--dt-line)}
.progress-item.complete{background:var(--dt-green-soft);border-color:#b9dfd0}
.source-note{color:var(--dt-muted)}
footer.dt-footer{
  margin-top:26px;
  padding:20px 0 0;
  border-top:1px solid var(--dt-line);
  color:var(--dt-muted);
  font-size:.78rem;
}
@media(max-width:720px){
  .dt-brand-row{flex-direction:column}
  .dt-app-name{text-align:left;border-left:0;padding-left:0}
  .dt-savebar{align-items:flex-start}
  .dt-save-actions{width:100%}
  .dt-btn{flex:1}
}


.dt-hero h1{
  font-size:clamp(3rem,8vw,6rem);
  line-height:.92;
  letter-spacing:-.055em;
  color:var(--dt-navy);
  margin:0;
}
.dt-hero-slogan{
  font-size:clamp(1.15rem,2.5vw,1.55rem);
  font-weight:700;
  color:var(--dt-navy)!important;
  margin:12px 0 0!important;
}
.dt-hero-description{
  max-width:820px;
  color:var(--dt-muted)!important;
  line-height:1.65;
  margin:12px 0 0!important;
}
.bit-button.on,
.progress-item.complete,
.odo-digit.carry,
.game-over,
[class*="complete"][style*="background"],
button[style*="#107266"],
button[style*="#2f7d63"]{
  color:#fff!important;
}
.bit-button.on * ,
.progress-item.complete * ,
.game-over *{
  color:#fff!important;
}


/* Contrast corrections */
.big-binary span,
.big-binary span.on,
.demo-panel .big-binary span,
.demo-panel .big-binary span.on{
  color:#fff!important;
}

/* Dark surfaces should always use light foreground text */
.odometer-digits,
.odometer-digits *,
.harbor-scene,
.harbor-scene *,
.game-over,
.game-over *,
.warning-card,
.warning-card *,
.bit-button.on,
.bit-button.on *,
.beat-cell.on,
.beat-cell.on *{
  color:#fff!important;
}

/* Preserve dark text on intentionally light green completion cards */
.progress-item.complete,
.progress-item.complete *{
  color:var(--dt-ink)!important;
}

/* Light surfaces retain readable text */
.demo-panel,
.challenge-box,
.concept-check,
.lesson-intro,
.media-card,
.history-card,
.interpretation,
.metric,
.game-console{
  color:var(--dt-ink);
}
.demo-panel p,
.challenge-box p,
.concept-check p,
.lesson-intro p,
.media-card p,
.history-card p,
.interpretation p,
.metric p,
.game-console p{
  color:var(--dt-muted);
}

/* Buttons and choices */
.primary{
  color:#fff!important;
}
.secondary{
  color:var(--dt-navy)!important;
}
.choice{
  background:#fff!important;
  color:var(--dt-navy)!important;
  border-color:var(--dt-line)!important;
}
.choice:hover{
  background:var(--dt-blue-soft)!important;
}


/* Odometer contrast override */
.odometer-digits{
  background:#10243a!important;
  border-color:#10243a!important;
  padding:20px!important;
}
.odo-digit{
  background:#1d3553!important;
  color:#ffffff!important;
  border:2px solid #6f8dab!important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.odo-digit.carry{
  background:#1f6a5a!important;
  color:#ffffff!important;
  border-color:#8bd8c2!important;
}
#odoBinary,
#odoDecimal,
#odoMax{
  color:var(--dt-navy)!important;
}


.odo-mode-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:18px 0 12px;
}
.odo-mode-tab{
  border:1px solid var(--dt-line);
  background:#fff;
  color:var(--dt-navy);
  padding:9px 14px;
  border-radius:9px;
  font-weight:800;
}
.odo-mode-tab.active{
  background:var(--dt-navy);
  color:#fff;
  border-color:var(--dt-navy);
}
.odo-main-display{
  background:#10243a;
  color:#fff;
  border-radius:18px;
  padding:22px;
  text-align:center;
  margin-bottom:14px;
}
.odo-main-display .label{
  display:block;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#c9d7e5!important;
  margin-bottom:8px;
}
.odo-main-display strong{
  color:#fff!important;
  font-size:clamp(2.4rem,7vw,5rem);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}
.odo-three-base{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:14px 0 18px;
}
.odo-base-card{
  background:#fff;
  border:1px solid var(--dt-line);
  border-radius:12px;
  padding:13px;
}
.odo-base-card span{
  display:block;
  color:var(--dt-muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.odo-base-card strong{
  display:block;
  margin-top:5px;
  color:var(--dt-navy);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.25rem;
}
.odo-speed{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  color:var(--dt-muted);
  font-size:.82rem;
}
.odo-speed input{flex:1}
@media(max-width:650px){
  .odo-three-base{grid-template-columns:1fr}
}


.odo-digit-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.odo-digit-wrap{
  text-align:center;
}
.odo-place-label{
  display:block;
  margin-top:6px;
  color:#c9d7e5!important;
  font-size:.68rem;
  font-weight:800;
}
.odometer-digits.decimal .odo-digit{
  min-width:76px;
}


/* Context Matters contrast corrections */
#context .sign-demo div{
  color:#ffffff!important;
  background:#1d3553!important;
  border-color:#6f8dab!important;
}
#context .sign-demo div:first-child{
  color:#ffffff!important;
  background:#7a2638!important;
  border-color:#c66a7a!important;
}
#context .sign-weights div{
  color:var(--dt-muted)!important;
  background:transparent!important;
}
#context .context-bit-display{
  color:#ffffff!important;
  background:#10243a!important;
  border-color:#6f8dab!important;
}
#context .interpretation{
  background:#ffffff!important;
  color:var(--dt-ink)!important;
}
#context .interpretation span{
  color:var(--dt-muted)!important;
}
#context .interpretation strong{
  color:var(--dt-navy)!important;
}
#context .callout{
  background:var(--dt-blue-soft)!important;
  color:var(--dt-navy)!important;
}
#context .callout strong{
  color:var(--dt-navy)!important;
}


/* Stack decimal above binary so a full byte stays on one line */
.odo-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}
.odo-stack-section{
  width:100%;
}
#binaryOdometerDigits{
  flex-wrap:nowrap!important;
  overflow-x:auto;
  justify-content:center;
}
#binaryOdometerDigits .odo-digit-wrap{
  flex:0 0 auto;
}
#decimalOdometerDigits{
  flex-wrap:nowrap!important;
  justify-content:center;
}
@media(max-width:760px){
  #binaryOdometerDigits{
    justify-content:flex-start;
  }
  #binaryOdometerDigits .odo-digit{
    width:56px!important;
    min-width:56px!important;
  }
}


/* =========================================================
   FINAL APP-WIDE CONTRAST OVERRIDES
   Dark surfaces = white text. Light surfaces = dark text.
   ========================================================= */

/* Binary Basics demo tiles */
.big-binary span,
.big-binary span.on,
.demo-panel .big-binary span,
.demo-panel .big-binary span.on{
  color:#ffffff!important;
}

/* Odometer dark digit tiles */
.odometer-digits{
  color:#ffffff!important;
}
.odo-digit,
.odo-digit *,
#decimalOdometerDigits .odo-digit,
#binaryOdometerDigits .odo-digit{
  color:#ffffff!important;
}
.odo-digit.carry,
.odo-digit.carry *{
  color:#ffffff!important;
}

/* Active bit and beat controls */
.bit-button.on,
.bit-button.on *,
.beat-cell.on,
.beat-cell.on *{
  color:#ffffff!important;
}

/* Packet Harbor dark scene */
.harbor-scene,
.harbor-scene *,
.packet-card + .timer-track,
.game-over,
.game-over *{
  color:#ffffff!important;
}

/* Context Matters dark visual elements */
#context .sign-demo div,
#context .sign-demo div *,
#context .context-bit-display,
#context .context-bit-display *,
#contextBits{
  color:#ffffff!important;
}
#context .sign-demo div:first-child,
#context .sign-demo div:first-child *{
  color:#ffffff!important;
}

/* Force Context signed-number digits to white even if inherited styles compete */
#context .sign-demo{
  color:#ffffff!important;
}
#context .sign-demo > div{
  color:#ffffff!important;
}
#context .sign-demo > div::before,
#context .sign-demo > div::after{
  color:#ffffff!important;
}

/* Warning and other intentionally dark callouts */
.warning-card,
.warning-card *,
.overflow-message,
.overflow-message *{
  color:#ffffff!important;
}

/* Dark brand buttons */
.primary,
.primary *,
.dt-btn.primary,
.dt-btn.primary *{
  color:#ffffff!important;
}

/* Light surfaces stay dark */
.card,
.demo-panel,
.challenge-box,
.concept-check,
.lesson-intro,
.media-card,
.history-card,
.interpretation,
.metric,
.game-console,
.progress-item,
.odo-base-card,
.rgb-value-card,
.ascii-ref{
  color:var(--dt-ink)!important;
}

/* Light-card headings and strong values */
.card h2,
.card h3,
.card h4,
.interpretation strong,
.metric strong,
.odo-base-card strong,
.rgb-value-card strong{
  color:var(--dt-navy)!important;
}

/* Light-card secondary text */
.card p,
.lesson-intro p,
.media-card p,
.history-card p,
.interpretation span,
.metric span,
.odo-base-card span,
.rgb-value-card span{
  color:var(--dt-muted);
}

/* Exceptions where text sits on dark surfaces inside otherwise light cards */
#context .context-bit-display,
#context .context-bit-display strong,
.odometer-digits .odo-place-label{
  color:#ffffff!important;
}

/* Keep place labels readable on dark odometer panel */
#decimalOdometerDigits .odo-place-label,
#binaryOdometerDigits .odo-place-label{
  color:#d9e7f3!important;
}

/* Light completion cards should NOT become white-on-light */
.progress-item.complete,
.progress-item.complete *{
  color:var(--dt-ink)!important;
}

/* Answer choices remain dark-on-light */
.choice,
.choice *{
  color:var(--dt-navy)!important;
}

/* Secondary buttons remain dark-on-light */
.secondary,
.secondary *{
  color:var(--dt-navy)!important;
}


/* Binary in Media contrast corrections */

/* ASCII binary display is a dark surface */
#media .context-bit-display,
#media #asciiByte{
  background:#10243a!important;
  color:#ffffff!important;
  border-color:#6f8dab!important;
}

/* Beat buttons */
#media .beat-cell{
  background:#eef2f6!important;
  color:var(--dt-navy)!important;
  border-color:var(--dt-line)!important;
}
#media .beat-cell.on{
  background:var(--dt-green)!important;
  color:#ffffff!important;
  border-color:var(--dt-green)!important;
}

/* Pixel buttons */
#media .pixel{
  background:#ffffff!important;
  border-color:#7f8ea3!important;
}
#media .pixel.black{
  background:#111827!important;
  border-color:#111827!important;
}

/* RGB preview can be any color, so give it a clear neutral border */
#media .rgb-preview{
  border:3px solid #ffffff!important;
  outline:1px solid var(--dt-line)!important;
}

/* RGB readout cards remain light with dark values */
#media .rgb-value-card,
#media .interpretation{
  background:#ffffff!important;
  color:var(--dt-ink)!important;
}
#media .rgb-value-card span,
#media .interpretation span{
  color:var(--dt-muted)!important;
}
#media .rgb-value-card strong,
#media .interpretation strong{
  color:var(--dt-navy)!important;
}

/* ASCII table */
#media .ascii-ref{
  background:#ffffff!important;
  color:var(--dt-ink)!important;
}
#media .ascii-ref th{
  background:var(--dt-navy)!important;
  color:#ffffff!important;
}
#media .ascii-ref td{
  color:var(--dt-ink)!important;
  background:#ffffff!important;
}

/* Hex explanation is a light callout */
#media .hex-note,
#media .hex-note *{
  background:var(--dt-blue-soft)!important;
  color:var(--dt-navy)!important;
}

/* Inputs remain dark text on light background */
#media input[type="text"],
#media input[type="number"],
#media #asciiInput{
  background:#ffffff!important;
  color:var(--dt-ink)!important;
  border-color:var(--dt-line)!important;
}

/* Media card general text stays dark on light */
#media .media-card{
  background:#ffffff!important;
  color:var(--dt-ink)!important;
}
#media .media-card h3,
#media .media-card strong{
  color:var(--dt-navy);
}


/* =========================================================
   PACKET HARBOR CONTRAST FIX
   ========================================================= */

/* Harbor scene is dark, all default text inside it should be white */
#harbor .harbor-scene,
#harbor .harbor-scene p,
#harbor .harbor-scene span,
#harbor .harbor-scene strong,
#harbor .harbor-scene small,
#harbor .dock-row,
#harbor .dock-row div{
  color:#ffffff!important;
}

/* Packet card is intentionally light, so its text must be dark */
#harbor .packet-card{
  background:#ffffff!important;
  color:#182235!important;
}
#harbor .packet-card span{
  color:#667085!important;
}
#harbor .packet-card strong{
  color:#17324d!important;
}
#harbor .packet-card small{
  color:#526072!important;
}

/* Game console is a light card */
#harbor .game-console{
  background:#ffffff!important;
  color:#182235!important;
  border-color:var(--dt-line)!important;
}
#harbor .game-console p{
  color:#667085!important;
}
#harbor .game-console strong{
  color:#17324d!important;
}

/* Stats are light cards */
#harbor .game-stats div{
  background:#f5f7fb!important;
  color:#182235!important;
  border-color:var(--dt-line)!important;
}
#harbor .game-stats span{
  color:#667085!important;
}
#harbor .game-stats strong{
  color:#17324d!important;
}

/* Binary controls */
#harbor .bit-tile{
  background:#ffffff!important;
  color:#182235!important;
  border-color:var(--dt-line)!important;
}
#harbor .bit-value{
  color:#667085!important;
}
#harbor .bit-button{
  background:#eef2f6!important;
  color:#17324d!important;
  border-color:var(--dt-line)!important;
}
#harbor .bit-button.on{
  background:var(--dt-green)!important;
  color:#ffffff!important;
  border-color:var(--dt-green)!important;
}

/* Decode binary display is dark */
#harbor .decode-binary{
  background:#10243a!important;
  color:#ffffff!important;
  border-color:#6f8dab!important;
}

/* Input is light */
#harbor .decode-panel label{
  color:#667085!important;
}
#harbor .decode-panel input{
  background:#ffffff!important;
  color:#182235!important;
  border-color:var(--dt-line)!important;
}

/* Hint uses a light instructional callout instead of dark brown */
#harbor .hint-box{
  background:#fff7df!important;
  color:#5b4700!important;
  border-left-color:#c99a00!important;
}
#harbor .hint-box strong,
#harbor .hint-box p{
  color:#5b4700!important;
}

/* Feedback on light console */
#harbor .feedback{
  color:#344054!important;
}
#harbor .feedback.good{
  color:#236b54!important;
}
#harbor .feedback.bad{
  color:#9d3d46!important;
}

/* Dark completion panel */
#harbor .game-over{
  background:#173f35!important;
  color:#ffffff!important;
  border-color:#2f7d63!important;
}
#harbor .game-over h3,
#harbor .game-over p,
#harbor .game-over strong{
  color:#ffffff!important;
}

/* Ensure buttons remain legible */
#harbor .primary,
#harbor .primary *{
  color:#ffffff!important;
}
#harbor .secondary,
#harbor .secondary *{
  color:#17324d!important;
}


.completion-export-note{margin-top:10px;color:var(--dt-muted);font-size:.84rem;line-height:1.5}


/* Sequential progression locking */
.nav-step.locked,
[data-next].locked{
  opacity:.45!important;
  cursor:not-allowed!important;
  filter:grayscale(.35);
}
.nav-step.locked:hover,
[data-next].locked:hover{
  transform:none!important;
  box-shadow:none!important;
}
[data-next]:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}


/* Programming error types */
.error-types-card{
  margin:24px 0;
  padding:22px;
  background:#f5f7fb;
  border:1px solid var(--dt-line);
  border-radius:14px;
  color:var(--dt-ink);
}
.error-types-card h3,
.error-types-card h4{
  color:var(--dt-navy);
}
.error-types-card p,
.error-types-card li{
  color:var(--dt-ink);
}
.error-type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.error-type-item{
  background:#ffffff;
  border:1px solid var(--dt-line);
  border-radius:12px;
  padding:18px;
}
.error-type-item h4{
  margin-top:0;
  margin-bottom:8px;
}
.error-example{
  margin-bottom:0;
  color:var(--dt-muted)!important;
}
.error-connection{
  margin-top:18px;
  background:#eaf1f8;
  border-left:5px solid #4f78a0;
  padding:16px 18px;
  border-radius:8px;
}
.error-connection strong{
  color:var(--dt-navy);
}
@media(max-width:800px){
  .error-type-grid{
    grid-template-columns:1fr;
  }
}


/* Overflow error emphasis */
.error-type-item.overflow-type{
  background:#fff7df;
  border-color:#d7b24a;
}
.error-type-item.overflow-type h4{
  color:#6b5200;
}
.overflow-learning-note{
  margin-top:18px;
  background:#17324d;
  color:#ffffff!important;
  border-radius:10px;
  padding:16px 18px;
  line-height:1.6;
}
.overflow-learning-note strong{
  color:#ffffff!important;
}


/* No-local-save recovery notice */
.backup-notice{
  margin:16px 0;
  padding:16px 18px;
  background:#fff7df;
  border-left:5px solid #c99a00;
  border-radius:8px;
  color:#4f3b00;
}
.backup-notice p{
  color:#4f3b00!important;
  margin:8px 0 12px;
}
.backup-notice strong{
  color:#4f3b00!important;
}