:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #07111f; color: #eef5ff; }
* { box-sizing: border-box; } body { margin: 0; min-width: 720px; background: radial-gradient(circle at 10% 10%, #173b58 0, #07111f 35%, #050b14 100%); } button, input { font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, details:focus-visible { outline: 3px solid #75d5ff; outline-offset: 3px; } button:disabled { cursor: not-allowed; opacity: .45; }
.setup-shell { max-width: 1440px; margin: auto; padding: 32px clamp(20px, 4vw, 64px) 64px; } .setup-header, .configuration, .episode-group { border: 1px solid #29425c; background: #0d1a2a; box-shadow: 0 20px 45px #01050b55; } .setup-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 28px; border-radius: 18px; } h1, h2, h3, p { margin: 0; } h1 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; } h2 { font-size: 1.25rem; } h3 { font-size: .9rem; color: #9fb5cb; text-transform: uppercase; letter-spacing: .08em; } .setup-header p:last-child { max-width: 760px; margin-top: 12px; color: #b7c7d8; } .eyebrow { color: #58c8ff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; } .setup-map { display: grid; gap: 20px; margin-top: 24px; } .episode-group { padding: 18px; border-radius: 14px; } .episode-group h2 { margin-bottom: 12px; } .episode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; } .episode-card { min-height: 120px; padding: 14px; border: 1px solid #35526d; border-radius: 10px; color: inherit; background: #0a1422; text-align: left; } .episode-card:hover, .episode-card.selected { border-color: #5fd1ff; background: #10304a; } .episode-card span, .episode-card small, .episode-card em { display: block; } .episode-card span, .episode-card small { color: #a8bacd; font-size: .78rem; } .episode-card strong { display: block; margin: 5px 0; } .episode-card em { margin-top: 12px; color: #6be5b0; font-size: .76rem; font-style: normal; } .episode-card:not(.selected) em { color: #a8bacd; }
.route-progress { display: grid; flex: 0 0 auto; grid-template-columns: max-content max-content; align-items: baseline; justify-items: end; gap: 0 8px; }
.route-progress > strong { color: #7be3b5; font-size: 1.7rem; line-height: 1; }
.route-progress > span { color: #9fb4c7; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.route-progress > button { grid-column: 1 / -1; margin-top: 16px; }
.class-route-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px); margin-top: 28px; }
.class-route-map::before { position: absolute; z-index: 0; top: 24px; right: 16.66%; left: 16.66%; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #5fc8f4, #8f86f5 52%, #de8bc1); box-shadow: 0 0 20px #6dcff544; content: ""; }
.class-route-stop { position: relative; z-index: 1; display: grid; grid-template-rows: 52px minmax(0, 1fr); min-width: 0; justify-items: center; }
.route-marker { display: grid; width: 52px; height: 52px; place-items: center; border: 4px solid #0b1724; border-radius: 50%; background: #70d5f4; box-shadow: 0 0 0 2px #3b6c83, 0 8px 24px #0008; }
.route-marker span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #081521; background: #e6f8ff; font-size: 1.05rem; font-weight: 950; }
.class-route-stop:nth-child(2) .route-marker { background: #988cf6; box-shadow: 0 0 0 2px #635c9b, 0 8px 24px #0008; }
.class-route-stop:nth-child(3) .route-marker { background: #e08bc2; box-shadow: 0 0 0 2px #945c82, 0 8px 24px #0008; }
.class-route-stop.completed .route-marker { background: #62dda7; box-shadow: 0 0 0 2px #3c8c69, 0 0 24px #62dda777; }
.class-route-stop.completed .route-marker span { color: #052218; background: #dffff0; }
.route-card { width: 100%; min-height: 288px; padding: 19px; border: 1px solid #2f4a63; border-radius: 18px; background: linear-gradient(150deg, #102237, #0a1421 72%); box-shadow: 0 18px 42px #01050b66; }
.class-route-stop.selected .route-card { border-color: #69d7f7; box-shadow: 0 0 0 2px #69d7f724, 0 22px 48px #01050b88; }
.class-route-stop.completed .route-card { border-color: #3f8065; background: linear-gradient(150deg, #102b29, #0a171a 72%); }
.route-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-card > header > div > span, .route-card > header > div > small { display: block; }
.route-card > header > div > span { color: #7bdcf8; font-size: .75rem; font-weight: 950; letter-spacing: .13em; }
.route-card > header > div > small { margin-top: 3px; color: #7f96aa; font-size: .61rem; font-weight: 850; letter-spacing: .1em; }
.class-route-stop.completed .route-card > header > div > span, .class-route-stop.completed .route-card > header > div > small { color: #72dca9; }
.route-card h2 { margin-top: 20px; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.025em; }
.route-card > p { min-height: 64px; margin-top: 8px; color: #aebfd0; font-size: .88rem; line-height: 1.45; }
.class-completion-toggle { display: grid; grid-template-columns: 30px max-content; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #405a70; border-radius: 99px; color: #aec0cf; background: #08131f; font-size: .65rem; font-weight: 850; }
.class-completion-toggle i { position: relative; width: 30px; height: 17px; border-radius: 99px; background: #32485a; }
.class-completion-toggle i::after { position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #b5c6d3; transition: transform .2s ease, background .2s ease; content: ""; }
.class-completion-toggle[aria-checked="true"] { border-color: #3c8065; color: #89e1b5; background: #0b211a; }
.class-completion-toggle[aria-checked="true"] i { background: #3db57d; }
.class-completion-toggle[aria-checked="true"] i::after { transform: translateX(13px); background: #effff6; }
.route-activities { display: grid; gap: 7px; margin-top: 16px; }
.route-activity { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; min-width: 0; gap: 9px; padding: 9px 10px; border: 1px solid #30485c; border-radius: 10px; color: #dce9f3; background: #0a1724; text-align: left; }
.route-activity:hover, .route-activity.selected { border-color: #66cdec; background: #123148; }
.route-activity > span { color: #6ebfdb; font-size: .58rem; font-weight: 950; letter-spacing: .09em; }
.route-activity > strong { min-width: 0; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.setup-outline { overflow: hidden; border: 1px solid #304b62; border-radius: 12px; background: #091522; }
.setup-outline > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 15px; color: #d9e8f3; font-weight: 850; cursor: pointer; }
.setup-outline > summary small { color: #76cfea; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.setup-outline > ol { max-height: 430px; margin: 0; overflow: auto; border-top: 1px solid #29445a; }
@media (max-width: 900px) {
  .class-route-map { grid-template-columns: 1fr; gap: 18px; padding-left: 38px; }
  .class-route-map::before { top: 26px; right: auto; bottom: 26px; left: 25px; width: 4px; height: auto; }
  .class-route-stop { grid-template-rows: auto; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 12px; }
  .route-card { min-height: 0; }
}
.configuration { display: grid; gap: 22px; margin-top: 24px; padding: 24px; border-radius: 18px; } .configuration > div > p { margin-top: 8px; color: #b7c7d8; } .config-columns { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; } .roster-input-list { display: grid; gap: 7px; max-height: 430px; margin: 12px 0; padding: 0; overflow: auto; } .roster-input-row { display: grid; grid-template-columns: 32px 1fr 32px 32px 32px; gap: 6px; align-items: center; list-style: none; } .setup-position { color: #76d4ff; font-variant-numeric: tabular-nums; text-align: center; } input { width: 100%; padding: 9px 10px; border: 1px solid #3b5874; border-radius: 7px; color: inherit; background: #07111f; } label { display: grid; gap: 7px; color: #c9d7e6; } .two-fields { display: grid; gap: 13px; } .icon-button { width: 32px; height: 32px; border: 1px solid #3b5874; border-radius: 6px; color: #dfeeff; background: #132940; } .primary, .secondary, .exit { padding: 10px 14px; border: 1px solid transparent; border-radius: 7px; font-weight: 750; } .primary { color: #05131d; background: #68d6ff; } .secondary { border-color: #47647d; color: #dbeafa; background: #13263b; } .validation { margin-top: 16px; padding: 12px; border-left: 3px solid #6be5b0; color: #c9f6df; background: #0c2a29; } .validation.warning { border-color: #ffc55c; color: #ffe2aa; background: #392a10; } .validation.invalid { border-color: #ff7d7d; color: #ffd0d0; background: #35191e; } .preview-block { overflow: auto; border: 1px solid #35526d; border-radius: 10px; background: #050c15; } .preview-block > span { display: block; padding: 9px 12px; color: #9fb5cb; font-size: .78rem; } .preview-block pre { margin: 0; padding: 15px; border-top: 1px solid #29425c; color: #e6f1fb; font: .95rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; } .setup-actions { display: flex; justify-content: space-between; gap: 12px; } .placeholder { opacity: .72; }
.projection-shell { display: grid; grid-template-rows: 48px minmax(0, 1fr) 128px 22px; height: 100dvh; min-height: 720px; padding: 14px; gap: 12px; overflow: hidden; } .projection-header { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 20px; min-width: 0; padding: 0 10px 0 16px; border: 1px solid #27435f; border-radius: 10px; background: #0b1928; } .projection-header > strong { color: #e4ad42; } .projection-header > span:nth-child(2) { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .projection-actions { display: flex; min-width: 0; align-items: center; justify-content: end; gap: 12px; } .runtime { display: flex; align-items: center; gap: 8px; color: #b5c7d9; font-size: .85rem; } .runtime i { width: 9px; height: 9px; border-radius: 50%; background: #69dca2; box-shadow: 0 0 12px #69dca2; } .page-navigator { display: flex; align-items: center; gap: 8px; min-width: 0; } .page-navigator > span { color: #8ea6ba; font-size: .62rem; font-weight: 850; letter-spacing: .08em; white-space: nowrap; } .page-navigator > span strong { color: #eef8ff; font-size: .76rem; } .page-navigator > div { display: flex; gap: 3px; max-width: 360px; overflow-x: auto; scrollbar-width: none; } .page-navigator > div::-webkit-scrollbar { display: none; } .page-navigator button { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; padding: 0; border: 1px solid #334e64; border-radius: 6px; color: #91a9bb; background: #0c1824; font-size: .62rem; font-weight: 850; } .page-navigator button:hover, .page-navigator button:focus-visible { border-color: #6bd8ff; color: #eaf9ff; } .page-navigator button.current { border-color: #75dcff; color: #06131d; background: #75dcff; box-shadow: 0 0 12px #75dcff55; } .exit { padding: 6px 10px; border-color: #46647f; color: #d6e5f2; background: transparent; font-size: .83rem; } .projection-main { display: grid; min-height: 0; grid-template-columns: 42fr 58fr; gap: 12px; } .panel { min-width: 0; min-height: 0; overflow: auto; border: 1px solid #294760; border-radius: 12px; background: #0a1725; } .roster-panel { position: relative; padding: 12px; } .character-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: 9px; align-content: start; } .character-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #2c4a63; border-radius: 8px; background: #102237; } .character-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.85); } .character-card strong, .character-card small { display: block; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .character-card strong { padding-top: 7px; font-size: clamp(.74rem, 1.15vw, 1rem); } .character-card small { padding-bottom: 7px; color: #9ab0c6; font-size: clamp(.63rem, .86vw, .8rem); } .visual-position { position: absolute; z-index: 1; top: 5px; left: 5px; min-width: 23px; padding: 2px 5px; border-radius: 4px; color: #06101b; background: #eff7ff; font-size: clamp(.65rem, .85vw, .82rem); font-weight: 800; } .python-index { display: block; padding: 3px 7px 7px; color: #70d8ff; font-size: clamp(.61rem, .8vw, .76rem); } .character-card.pointed { border: 3px solid #ffc55c; } .character-card.chosen { border: 3px solid #5ae1a0; box-shadow: 0 0 24px #5ae1a066; } .index-pointer { position: sticky; bottom: 0; margin-top: 10px; padding: 9px; border-left: 3px solid #ffc55c; background: #34270f; color: #ffe4ac; font-weight: 750; } .ap-index-row { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: 4px; margin-top: 10px; color: #d8bdff; font-size: .75rem; } .ap-index-row strong { grid-column: 1 / -1; } .ap-index-row span { padding: 3px; border: 1px solid #694796; text-align: center; }
.grid-3 .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 .character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 .character-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6 .character-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.code-panel { display: flex; flex-direction: column; background: #f4f7fb; color: #122033; } .code-panel pre { flex: 1; min-height: 0; margin: 0; padding: clamp(18px, 2.4vw, 38px); overflow: auto; font: clamp(1.05rem, 1.7vw, 1.65rem)/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; } .code-panel code { display: block; padding: 2px 10px; border-left: 4px solid transparent; } .code-panel code span { display: inline-block; width: 2.1em; margin-right: 1em; color: #6e7d8b; text-align: right; user-select: none; } .code-panel code.active-line { border-color: #067fb8; color: #04121e; background: #c8efff; font-weight: 750; } .state-values, .runtime-error { display: grid; gap: 6px; margin: 0 16px 16px; padding: 12px; border-left: 4px solid #057daf; background: #dceefa; font: 1rem/1.4 ui-monospace, monospace; } .runtime-error { border-color: #b66812; color: #492300; background: #fff0d7; font-family: inherit; } .runtime-error details { font-size: .8rem; }
.teaching-bar { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: stretch; border: 1px solid #3b5f7c; border-radius: 12px; background: #10243a; overflow: hidden; } .student-prompt { display: flex; flex-wrap: wrap; align-content: center; gap: 14px; padding: 17px 22px; font-size: clamp(1rem, 1.5vw, 1.35rem); } .student-prompt p + p { color: #bcd0e3; } .student-prompt code { padding: 2px 5px; border-radius: 4px; color: #062233; background: #a9e7ff; font: .9em ui-monospace, monospace; } .response-labels { display: flex; gap: 8px; } .response-labels span { padding: 5px 8px; border: 1px solid #6690ae; border-radius: 5px; color: #dceefa; font-size: .77em; white-space: nowrap; } .teacher-controls { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-left: 2px solid #547895; } .teacher-hints { color: #7894ae; font-size: .72rem; text-align: right; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } @media (max-width: 1000px) { .config-columns { grid-template-columns: 1fr; } .projection-shell { padding: 9px; gap: 8px; } .projection-main { gap: 8px; } }

/* Whole-course progress route */
.course-map-shell { max-width: 1180px; }
.course-progress-route {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 960px;
  margin: 42px auto 0;
  padding: 24px 0 40px;
}
.course-progress-route::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8px;
  border: 2px solid #25435c;
  border-radius: 99px;
  background: linear-gradient(#4bd2ff 0 24%, #23445c 24% 100%);
  box-shadow: 0 0 26px #45cfff33;
  content: "";
  transform: translateX(-50%);
}
.course-route-node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  min-height: 126px;
}
.course-route-node::before {
  position: absolute;
  top: 50%;
  width: 58px;
  height: 3px;
  background: #315570;
  content: "";
}
.course-route-node.side-left::before { right: 50%; }
.course-route-node.side-right::before { left: 50%; }
.course-route-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.side-left .course-route-copy {
  grid-column: 1;
  justify-content: end;
}
.side-right .course-route-copy {
  grid-column: 3;
  flex-direction: row-reverse;
  justify-content: start;
}
.course-route-launch {
  display: grid;
  width: min(100%, 330px);
  min-height: 82px;
  align-content: center;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid #355a75;
  border-radius: 15px;
  color: #edf7ff;
  background: linear-gradient(145deg, #12314a, #0b1b2a);
  box-shadow: 0 14px 28px #01050b66;
  text-align: left;
}
button.course-route-launch:hover {
  border-color: #6bd9ff;
  background: linear-gradient(145deg, #174664, #0d2639);
  transform: translateY(-2px);
}
.course-route-launch > span {
  color: #72d9ff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
}
.course-route-launch > strong {
  overflow: hidden;
  font-size: 1.02rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-route-launch > small {
  color: #768da1;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .11em;
}
.course-route-launch.is-locked {
  border-color: #283e51;
  color: #8193a4;
  background: linear-gradient(145deg, #101c28, #09121c);
  box-shadow: none;
}
.course-route-launch.is-locked > span { color: #61798c; }
.course-route-orb {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  width: 68px;
  height: 68px;
  place-self: center;
  place-items: center;
  border: 5px solid #091522;
  border-radius: 50%;
  color: #06131e;
  background: linear-gradient(145deg, #dff8ff, #65d6ff);
  box-shadow: 0 0 0 2px #4ba1c2, 0 0 26px #51d2ff55, 0 12px 22px #0008;
}
.course-route-orb span { font-size: 1.12rem; font-weight: 950; }
.course-route-orb i {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 3px solid #091522;
  border-radius: 50%;
  color: #062033;
  background: #9de7ff;
  font-size: .55rem;
  font-style: normal;
}
button.course-route-orb:hover { transform: scale(1.08); }
.course-route-orb.is-locked {
  color: #6d8192;
  background: #182a39;
  box-shadow: 0 0 0 2px #2b4559, 0 10px 20px #0006;
}
.course-route-orb.is-locked i { color: #71889a; background: #1d3446; }
.course-route-node.completed::before { background: #42c98b; }
.course-route-node.completed .course-route-orb {
  color: #062218;
  background: linear-gradient(145deg, #dcffed, #58d89b);
  box-shadow: 0 0 0 2px #3b9d70, 0 0 28px #54d99b55, 0 12px 22px #0008;
}
.course-route-node.completed .course-route-orb i { display: none; }
.course-route-node.completed .course-route-launch { border-color: #34765b; }
.course-route-node.selected .course-route-launch { box-shadow: 0 0 0 2px #65d8ff33, 0 14px 28px #01050b77; }
.route-finished-toggle {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 30px;
  justify-items: center;
  gap: 4px;
  padding: 7px 6px;
  border: 0;
  color: #7890a4;
  background: transparent;
  font-size: .57rem;
  font-weight: 800;
}
.route-finished-toggle i {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 99px;
  background: #31485b;
}
.route-finished-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b5c6d3;
  content: "";
  transition: transform .2s ease;
}
.route-finished-toggle[aria-checked="true"] { color: #6fdaa5; }
.route-finished-toggle[aria-checked="true"] i { background: #34ad76; }
.route-finished-toggle[aria-checked="true"] i::after {
  background: #f1fff8;
  transform: translateX(13px);
}

@media (max-width: 820px) {
  .course-map-shell .setup-header { align-items: center; }
  .course-progress-route { margin-top: 28px; padding: 24px 0 40px; }
  .course-progress-route::before { left: 34px; }
  .course-route-node { grid-template-columns: 68px minmax(0, 1fr); min-height: 118px; }
  .course-route-node.side-left::before,
  .course-route-node.side-right::before { right: auto; left: 34px; width: 52px; }
  .course-route-node .course-route-orb { grid-column: 1; }
  .course-route-node .course-route-copy,
  .course-route-node.side-right .course-route-copy {
    grid-column: 2;
    flex-direction: row;
    justify-content: start;
  }
}