:root {
  --ink: #11233f;
  --muted: #65758b;
  --paper: #f4f7fb;
  --card: #ffffff;
  --line: #dce5ef;
  --navy: #122746;
  --navy-2: #17375e;
  --cyan: #1dbbd6;
  --mint: #63e6be;
  --orange: #ff9b5d;
  --yellow: #f6cf65;
  --red: #f26f6f;
  --shadow: 0 18px 50px rgba(23, 55, 94, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.section-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding-top: 96px; padding-bottom: 96px; }
.section-muted { background: #eaf0f7; width: 100%; max-width: none; padding-left: max(20px, calc((100% - 1180px) / 2)); padding-right: max(20px, calc((100% - 1180px) / 2)); }
.section-dark { width: 100%; max-width: none; color: #eef7ff; background: var(--navy); padding-left: max(20px, calc((100% - 1180px) / 2)); padding-right: max(20px, calc((100% - 1180px) / 2)); }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(244, 247, 251, .88); border-bottom: 1px solid rgba(220, 229, 239, .82); backdrop-filter: blur(18px); }
.header-inner { width: min(1180px, calc(100% - 40px)); height: 74px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--navy); border-radius: 10px; font-size: 18px; }
.main-nav { display: flex; gap: 24px; color: var(--muted); font-size: 14px; font-weight: 650; }
.main-nav a:hover { color: var(--cyan); }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 22px; }
.hero { min-height: 620px; padding-top: 94px; padding-bottom: 90px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 70px; }
.eyebrow, .mini-label { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; max-width: 690px; color: var(--navy); font-size: clamp(42px, 5vw, 72px); letter-spacing: -.065em; line-height: 1.03; }
h2 { margin: 4px 0 0; color: inherit; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.08; letter-spacing: -.05em; }
h3 { color: var(--navy); font-size: 20px; letter-spacing: -.025em; line-height: 1.2; }
.hero-lead { max-width: 630px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(17, 35, 63, .12); }
.button-primary { color: #fff; background: var(--navy); }
.button-primary span { color: var(--mint); font-size: 18px; }
.button-ghost { color: var(--navy); background: transparent; border-color: #bdccda; }
.button-dark { color: #fff; background: var(--navy); }
.button-small { min-height: 38px; padding: 8px 14px; border-radius: 10px; color: var(--navy); background: #e8f6f8; }
.text-button { padding: 5px 0; border: 0; color: var(--cyan); background: none; cursor: pointer; font-size: 13px; font-weight: 800; }
.hero-stats { display: flex; gap: 35px; }
.hero-stats div { display: grid; gap: 0; }
.hero-stats strong { color: var(--navy); font-size: 26px; line-height: 1; }
.hero-stats span { color: var(--muted); font-size: 12px; }
.hero-card { padding: 20px; color: #e9f4ff; background: linear-gradient(145deg, #183a62, #0e213e); border-radius: 28px; box-shadow: 0 30px 80px rgba(18, 39, 70, .28); transform: rotate(2deg); }
.console-top { display: flex; align-items: center; gap: 7px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.dot { width: 8px; height: 8px; border-radius: 99px; }
.dot-red { background: var(--red); }.dot-yellow { background: var(--yellow); }.dot-green { background: var(--mint); }
.console-title { margin-left: 6px; font-size: 11px; letter-spacing: .12em; color: #b8cade; }
.console-live { margin-left: auto; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.lcd-preview { margin: 28px 4px 18px; padding: 24px; color: #8affcf; background: #102f2d; border: 7px solid #284458; border-radius: 8px; box-shadow: inset 0 0 28px rgba(99,230,190,.10); font-family: "Courier New", monospace; font-size: 16px; line-height: 1.5; letter-spacing: .08em; }
.lcd-row { min-height: 25px; }.lcd-accent { color: #ffe88e; }
.console-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; background: rgba(255,255,255,.12); border-radius: 12px; }
.console-grid div { display: grid; gap: 2px; padding: 15px; background: rgba(12,30,55,.65); }.console-label { color: #87a6c5; font-size: 10px; letter-spacing: .14em; }.console-grid strong { font-size: 14px; }.cyan-text { color: var(--cyan); }.orange-text { color: var(--orange); }
.student-bar { position: relative; display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 28px; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.student-bar h2 { color: var(--navy); font-size: 22px; }
.student-form { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 12px; align-items: end; }
label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #f9fbfd; border: 1px solid #ccd9e5; border-radius: 10px; outline: none; }
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(29,187,214,.13); }
.form-status { position: absolute; right: 28px; bottom: -25px; margin: 0; color: #168278; font-size: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
.section-heading > p { max-width: 420px; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.light-heading > p { color: #aebfd3; }.light-heading h2 { color: #fff; }
.timeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.timeline-card { position: relative; min-height: 290px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(23,55,94,.05); }
.active-card { border-top: 4px solid var(--cyan); }.time-tag { color: var(--cyan); font-size: 12px; font-weight: 850; }.timeline-number { margin: 22px 0 10px; color: #c3d0dd; font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.08em; }.timeline-card p { color: var(--muted); font-size: 14px; }.timeline-card ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }.timeline-card li { padding: 5px 9px; color: #3e6b8e; background: #eef7fb; border-radius: 99px; font-size: 11px; font-weight: 700; }
.component-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.component-card { display: flex; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }.component-card h3 { margin-bottom: 7px; font-size: 17px; }.component-card p { margin-bottom: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }.component-icon { flex: 0 0 43px; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: var(--navy); background: #e7f6f8; font-weight: 900; }.display-icon { background: #fff2df; color: #ad6b2c; }.sensor-icon { background: #e7f4ec; color: #268063; }.switch-icon { background: #f3e9fb; color: #8958aa; }.door-icon { background: #e9edf6; color: #5571a2; }.led-icon { background: #fff0ee; color: #d35147; }.buzzer-icon { background: #fff7dc; color: #a67c14; font-size: 12px; }.pin-chip { display: inline-block; padding: 4px 8px; color: #4d7894; background: #f0f7fa; border-radius: 7px; font-size: 10px; font-weight: 800; }
.code-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: start; }.flow-card, .code-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }.flow-top, .code-toolbar, .diagram-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }.flow-badge { padding: 5px 9px; color: #487e91; background: #edf8fa; border-radius: 7px; font-family: "Courier New", monospace; font-size: 11px; }.flowchart { display: block; width: 100%; height: auto; padding: 18px 18px 2px; }.flow-box { fill: #edf5fa; stroke: #a8c2d8; stroke-width: 2; }.flow-start, .flow-end { fill: #e5f8f7; stroke: #56b9ac; }.flow-accent { fill: #fff0dc; stroke: #eea16d; }.flow-decision { fill: #f2ebfb; stroke: #a684c8; stroke-width: 2; }.flowchart text { fill: var(--navy); font-size: 15px; font-weight: 800; }.flowchart .flow-small { fill: #6e7992; font-size: 11px; font-weight: 700; }.flow-line { fill: none; stroke: #63e6be; stroke-width: 3; marker-end: url(#arrow); }.flow-note { margin: 0; padding: 0 22px 22px; color: var(--muted); font-size: 12px; }.code-card { background: #0e2038; border-color: #1f3b5d; }.code-toolbar { color: #a9bfd8; border-bottom-color: #27435f; }.code-toolbar .mini-label { color: var(--mint); }.source-code { height: 660px; overflow: auto; margin: 0; padding: 22px; color: #d6f6ee; font-family: "Cascadia Code", "Courier New", monospace; font-size: 12px; line-height: 1.65; white-space: pre; tab-size: 2; }
.wiring-layout { display: grid; grid-template-columns: 1fr 265px; gap: 18px; align-items: start; }.diagram-card, .pin-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }.zoom-controls { display: flex; align-items: center; gap: 6px; }.zoom-controls button { min-width: 32px; min-height: 30px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--navy); background: #fff; cursor: pointer; }.zoom-controls button:hover { border-color: var(--cyan); }.zoom-controls output { min-width: 50px; text-align: center; color: var(--muted); font-size: 12px; }.diagram-viewport { min-height: 420px; overflow: auto; padding: 25px; background: #f8fbfd; text-align: center; }.diagram-viewport img { display: inline-block; width: 100%; max-width: 1100px; transform-origin: top center; transition: transform .25s ease; }.pin-card { padding-bottom: 14px; }.pin-card > .mini-label { display: block; padding: 20px 20px 12px; }.pin-row { display: grid; grid-template-columns: 9px 1fr 1fr; gap: 9px; align-items: center; padding: 10px 20px; border-top: 1px solid #edf1f5; font-size: 12px; }.pin-row strong { font-size: 12px; }.pin-row span:last-child { color: var(--muted); text-align: right; font-size: 11px; }.pin-color { width: 8px; height: 8px; border-radius: 50%; }.pin-color.red { background: #ed6969; }.pin-color.cyan { background: #1dbbd6; }.pin-color.orange { background: #ff9b5d; }.pin-color.green { background: #39b886; }.pin-color.yellow { background: #e8bd39; }.tip-box { margin: 18px 20px 0; padding: 12px; color: #6a5f3f; background: #fff6d7; border-radius: 10px; font-size: 11px; line-height: 1.55; }
.score-panel { display: flex; align-items: center; gap: 13px; padding: 10px 14px; color: #638096; background: #eef8fa; border-radius: 12px; font-size: 12px; }.score-panel strong { color: var(--navy); font-size: 20px; }.worksheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.task-card { position: relative; padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 28px rgba(23,55,94,.05); }.task-card.completed { border-color: #61c9a0; box-shadow: 0 10px 28px rgba(45,166,116,.10); }.task-head { display: flex; gap: 12px; align-items: start; }.task-number { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; color: #fff; background: var(--navy); border-radius: 10px; font-size: 13px; font-weight: 900; }.task-head h3 { margin: 3px 0 0; font-size: 18px; }.task-state { margin-left: auto; padding: 4px 8px; color: #798b9c; background: #f0f4f7; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }.completed .task-state { color: #1f8961; background: #e6f8f0; }.task-card > p { min-height: 47px; margin: 17px 0; color: var(--muted); font-size: 13px; }.select-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }.task-feedback { display: inline-block; margin-left: 10px; color: #538096; font-size: 12px; }.task-feedback.success { color: #168278; }.task-feedback.error { color: #c45f50; }.wire-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 220px; margin-bottom: 15px; padding: 20px; background: #f3f8fb; border: 1px dashed #b6ccd7; border-radius: 14px; }.wire-board svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }.wire-sources, .wire-targets { display: grid; align-content: center; gap: 11px; z-index: 1; }.wire-targets { justify-items: end; }.drag-wire, .wire-target { width: max-content; min-width: 115px; padding: 8px 10px; border-radius: 9px; font-size: 11px; font-weight: 800; }.drag-wire { color: #245a74; background: #dcf2f4; border: 1px solid #8ed0d4; cursor: grab; }.drag-wire:active { cursor: grabbing; }.wire-target { color: #5b667a; background: #fff; border: 1px dashed #9eacbb; text-align: center; }.wire-target.wired { color: #16796c; background: #e6f8f0; border-style: solid; }.wire-line { stroke: #1dbbd6; stroke-width: 3; stroke-linecap: round; }.move-game { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; margin-bottom: 15px; }.part-pool, .drop-zones { display: grid; gap: 8px; }.move-part, .drop-zone { min-height: 49px; padding: 8px 10px; border-radius: 9px; font-size: 11px; font-weight: 850; }.move-part { color: #79552c; background: #fff1dc; border: 1px solid #f2c783; cursor: grab; }.move-part small { color: #9a7b4c; font-weight: 600; }.drop-zone { display: grid; place-items: center; color: #748396; background: #f6f8fa; border: 1px dashed #b9c7d4; }.drop-zone.filled { color: #25776c; background: #e9f8f3; border-style: solid; }.simulator { display: grid; grid-template-columns: 1fr .85fr; gap: 12px; padding: 14px; background: #eff5fa; border-radius: 14px; margin-bottom: 15px; }.sim-lcd { grid-row: span 2; padding: 14px; color: #96ffd6; background: #133a39; border: 4px solid #37506b; border-radius: 6px; font-family: "Courier New", monospace; font-size: 11px; line-height: 1.9; }.sim-controls { display: grid; gap: 7px; }.sim-button { padding: 8px; border: 1px solid #bdd1df; border-radius: 8px; color: var(--navy); background: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }.sim-button:hover { border-color: var(--cyan); background: #f2fcfd; }.sim-lights { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }.sim-led, .sim-buzzer { display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: #b8c3cf; }.sim-led.on { background: #f05252; box-shadow: 0 0 10px #f05252; }.sim-buzzer.on { background: var(--orange); box-shadow: 0 0 10px var(--orange); }.quiz-list { display: grid; gap: 11px; margin-bottom: 15px; }.quiz-list fieldset { margin: 0; padding: 10px 12px; border: 1px solid #e0e8ef; border-radius: 10px; }.quiz-list legend { padding: 0 5px; color: var(--navy); font-size: 12px; font-weight: 800; }.quiz-list label { display: flex; grid-template-columns: none; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }.quiz-list input { width: auto; min-height: auto; }.worksheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }.worksheet-footer p { margin: 0; color: var(--muted); font-size: 12px; }
.challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.challenge-grid > div { padding: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }.challenge-index { display: grid; place-items: center; width: 30px; height: 30px; color: var(--navy); background: var(--mint); border-radius: 9px; font-weight: 900; }.challenge-grid h3 { margin: 18px 0 7px; color: #fff; font-size: 18px; }.challenge-grid p { margin: 0; color: #b1c1d2; font-size: 13px; }.site-footer { color: #b2c4d8; background: #0c1c31; }.site-footer .section-shell { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; padding-bottom: 25px; font-size: 11px; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 40px; }.hero-card { max-width: 660px; transform: none; }.component-grid { grid-template-columns: repeat(2, 1fr); }.code-layout, .wiring-layout { grid-template-columns: 1fr; }.pin-card { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 0; }.pin-card > .mini-label { grid-column: 1 / -1; }.tip-box { grid-column: 1 / -1; } }
@media (max-width: 720px) { .section-shell { width: min(100% - 28px, 600px); }.section-muted, .section-dark { padding-left: 14px; padding-right: 14px; }.section-pad { padding-top: 65px; padding-bottom: 65px; }.main-nav { display: none; position: absolute; left: 14px; right: 14px; top: 66px; padding: 15px; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }.main-nav.open { display: flex; }.nav-toggle { display: block; }.student-bar { grid-template-columns: 1fr; gap: 10px; }.student-form { grid-template-columns: 1fr 1fr; }.student-form label:nth-child(3) { grid-column: 1 / -1; }.student-form button { grid-column: 1 / -1; }.form-status { position: static; }.section-heading { display: block; }.section-heading > p { margin-top: 14px; }.timeline-grid, .component-grid, .worksheet-grid, .challenge-grid { grid-template-columns: 1fr; }.select-list { grid-template-columns: 1fr; }.wiring-layout { gap: 12px; }.diagram-viewport { min-height: 300px; padding: 10px; }.pin-card { grid-template-columns: 1fr; }.pin-card > .mini-label, .tip-box { grid-column: auto; }.move-game, .simulator { grid-template-columns: 1fr; }.sim-lcd { grid-row: auto; }.worksheet-footer, .site-footer .section-shell { display: block; }.worksheet-footer p { margin-top: 12px; }.site-footer span { display: block; margin-bottom: 8px; } }
.drag-wire { user-select: none; }
.drag-wire.selected { color: #fff; background: #167f94; border-color: #0c596b; box-shadow: 0 0 0 3px rgba(29,187,214,.22); }
.wire-target { cursor: pointer; user-select: none; }
.wire-target.drop-ready { border-color: #1dbbd6; background: #f0fcfd; }
.wire-target.drag-over { color: #145f71; border-color: #167f94; background: #dff8fa; transform: scale(1.03); }
.move-part { user-select: none; }
.move-part.selected { color: #fff; background: #a96e2c; border-color: #7c4b18; box-shadow: 0 0 0 3px rgba(255,155,93,.24); }
.drop-zone { cursor: pointer; user-select: none; }
.drop-zone.drop-ready { border-color: #ff9b5d; background: #fffaf2; }
.drop-zone.drag-over { color: #7c4b18; border-color: #a96e2c; background: #fff0d9; transform: scale(1.03); }