:root { --paper: #f7f7f2; --ink: #1c3550; --muted: #536574; --line: #bdcbd2; --green: #244f77; --pale: #e4edf3; --yellow: #f2df9a; --focus: #a63f19; color: var(--ink); }
a { color: #24557e; }h1, h2, h3 { text-wrap: balance; }.eyebrow { color: #4e6377; }
.vex-masthead { width: min(100% - 3rem, 1180px); display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; margin: 3rem auto 2.5rem; }
.vex-masthead h1 { font-size: clamp(3.6rem, 6.3vw, 6.4rem); line-height: .96; letter-spacing: -.065em; max-width: 12ch; margin: .65rem 0 1.4rem; }.vex-masthead h1 span { color: #99671c; }
.vex-masthead > div > p:last-of-type { max-width: 38ch; color: var(--muted); }.vex-facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; font-weight: 750; margin-top: 1.2rem; }
.hero-start { margin-top: 1.2rem; font-size: .9rem; }.vex-reading .vex-masthead { display: none; }.vex-reading .course-toolbar { margin-top: 1rem; border-top: 0; }
.field-preview { border: 1px solid #b9c9d1; background-color: #eaf0f1; background-image: linear-gradient(#c7d6da55 1px, transparent 1px), linear-gradient(90deg, #c7d6da55 1px, transparent 1px); background-size: 24px 24px; padding: 1.8rem 2rem; }
.field-preview > p:last-child { font-size: .82rem; margin-bottom: 0; }.field-route { position: relative; padding: .5rem 0; }.field-stop { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; padding: .95rem 0; }.field-stop:not(:last-child)::after { content: ''; position: absolute; left: 21px; width: 2px; height: 36px; background: #a18b4a; top: 61px; }.field-stop > span { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #244f77; background: #f7f7f2; font-size: .75rem; font-weight: 750; border-radius: 50%; z-index: 1; }.field-stop:last-child > span { background: #f2df9a; }.field-stop > strong { font-size: 1.14rem; }.field-stop > small { color: var(--muted); }
.course-toolbar [data-vex-progress] { margin-right: auto; }#vex-main { min-width: 0; scroll-margin-top: 1.5rem; }.vex-breadcrumb { font-size: .8rem; margin-bottom: 1.8rem; color: var(--muted); }.mission-brief { max-width: 65ch; color: var(--muted); font-size: 1.04rem; }
#build-filter { font: inherit; font-size: .84rem; width: 100%; min-height: 44px; border: 1px solid #a8b7bf; background: #fafaf7; padding: .4rem; border-radius: 3px; color: var(--ink); }label[for="build-filter"] { margin-top: .9rem; }
.unit-menu a[aria-current] { color: #173c61; background: #dfebf1; box-shadow: inset 3px 0 #3f719b; }.unit-overview .eyebrow { font-size: .62rem; margin: 0 0 .5rem; }.unit-index { color: #718a9c; }.unit-overview li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; }.lesson-meta { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.build-label { display: inline-block; padding: .2rem .6rem; margin: .2rem 0; background: #e1ebf0; border-left: 3px solid #547e9e; font-weight: 750; font-size: .85rem; }.vex-sources { display: grid; gap: .35rem; margin: .8rem 0; font-size: .78rem; }.vex-sources a { min-height: 32px; display: inline-flex; align-items: center; }
.block-plan { margin: 1.5rem 0 1rem; background: #edf1f2; border: 1px solid #c1ced4; border-radius: 4px; padding: 1rem; }.block-plan figcaption { font-weight: 800; font-size: .88rem; margin-bottom: 1rem; }.block-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }.block-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .4rem; padding: .45rem .6rem; border: 1px solid #97b4c8; border-left: 4px solid #497696; background: #e3edf4; border-radius: 3px; line-height: 1.5; }.block-row code { font: .82rem/1.55 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }.block-number { font-size: .65rem; color: #485d6a; line-height: 2; }.block-event { border-color: #bba258; background: #f1e4b3; }.block-control { border-color: #be9c6e; background: #f4e4ce; }.block-motor { border-color: #9694b5; background: #e9e5f1; }.block-sensor { border-color: #79a89d; background: #dcefe9; }.block-variable { border-color: #b39479; background: #f2e4d8; }.block-screen { border-color: #9aaab3; background: #edf1f3; }.depth-1 { margin-left: .75rem; }.depth-2 { margin-left: 1.5rem; }.depth-3 { margin-left: 2.25rem; }.depth-4,.depth-5,.depth-6 { margin-left: 3rem; }.stack-divider { margin: 1rem 0 .3rem; font-size: .72rem; color: var(--muted); }.plan-text { margin: 0; padding: 0; background: transparent; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: .83rem/1.6 "SFMono-Regular", Consolas, monospace; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .84rem; }.primary:hover { background: #173b61; }
.vex-experiment { background: #f0ebd9; border-left: 3px solid #aa8845; padding: 1rem 1.3rem; margin: 1.5rem 0; }.vex-experiment h4 { font-size: 1.1rem; margin: .4rem 0 1rem; }.vex-experiment dt { font-weight: 750; font-size: .8rem; }.vex-experiment dd { margin: .1rem 0 .7rem; font-size: .9rem; }
.mission-field { margin: 1.5rem 0; padding: 1rem; border: 1px solid #bacbd2; background: #edf2f2; }.mission-field figcaption { font-weight: 750; font-size: .85rem; }.mission-lane { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .6rem; margin: 1rem 0; align-items: stretch; }.mission-lane > div { padding: .7rem .5rem; border: 1px dashed #8da5b5; display: flex; flex-direction: column; gap: .5rem; }.mission-lane > div:nth-child(3) { background: #f2df9a; border-style: solid; }.mission-lane strong { font-size: .8rem; }.mission-lane small { font-size: .7rem; }.mission-field > p { font-size: .8rem; margin-bottom: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1rem 0; }table { table-layout: fixed; width: 100%; }th { text-align: left; font-size: .8rem; }td, th { vertical-align: top; padding: .65rem .5rem; overflow-wrap: anywhere; }caption { text-align: left; font-size: .85rem; font-weight: 750; margin-bottom: .5rem; }table:has(textarea) th:first-child { width: 45px; }table textarea { width: 100%; min-width: 0; min-height: 88px; padding: .4rem; font-size: .8rem; }textarea { background: #fcfcf8; border: 1px solid #9aaebb; color: var(--ink); width: 100%; max-width: 100%; }
.calibration-tool { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid #9fbbca; background: #e7eff3; }.calibration-tool h4 { margin-top: 0; }.calibration-tool input { width: 100%; min-height: 44px; padding: .5rem; color: var(--ink); background: white; border: 1px solid #8da5b5; margin-bottom: 1rem; border-radius: 3px; }.calibration-result { font-weight: 650; }.calibration-result:empty { display: none; }.vex-glossary .lesson-section { margin: 1.5rem 0; padding-top: .5rem; }
@media (max-width: 800px) { .vex-masthead { gap: 2rem; }.vex-masthead h1 { font-size: clamp(3.5rem, 10vw, 5rem); }.field-preview { padding: 1rem; }.field-stop { grid-template-columns: 35px 1fr; gap: .6rem; }.field-stop > span { width: 35px; height: 35px; }.field-stop:not(:last-child)::after { left: 17px; top: 52px; height: 45px; }.field-stop > strong { font-size: .94rem; }.field-stop > small { font-size: .7rem; }.unit-overview li { grid-template-columns: 1fr; gap: 0; padding-bottom: .5rem; }.lesson-meta { white-space: normal; }.coding-sidebar { padding-right: 0; } }
@media (max-width: 580px) { .vex-masthead { width: calc(100% - 2rem); grid-template-columns: 1fr; margin-top: 1.7rem; gap: 1.5rem; }.vex-masthead h1 { font-size: 4.3rem; }.field-preview { padding: 1rem 1.3rem; }.field-route { padding: 0; }.field-stop { padding: .6rem 0; }.field-stop:not(:last-child)::after { top: 43px; }.field-preview > .eyebrow { margin-top: 0; }.block-plan { padding: .65rem; }.block-row { padding: .4rem; grid-template-columns: 17px minmax(0, 1fr); gap: .2rem; }.block-row code { font-size: .74rem; }.depth-1 { margin-left: .4rem; }.depth-2 { margin-left: .8rem; }.depth-3 { margin-left: 1.2rem; }.table-scroll th, .table-scroll td { padding: .4rem .2rem; font-size: .7rem; }table textarea { font-size: .75rem; }.unit-overview { gap: .6rem; grid-template-columns: 34px 1fr; } }
@media (max-width: 580px) { .field-preview { display: none; }.vex-masthead h1 { font-size: 3.5rem; }.mission-lane { grid-template-columns: 1fr 1fr; }.course-toolbar [data-vex-progress] { order: -1; width: 100%; } }
@media print {
  @page { size: Letter; margin: .6in .6in .65in; }
  .vex-masthead, .vex-breadcrumb, .plan-actions, .calibration-tool { display: none !important; }#vex-main { width: auto; }.vex-setup, .vex-glossary { break-before: page; }.vex-lesson { break-before: page; }.mission-brief { font-size: 10pt; }.block-plan { padding: .1in; margin: .1in 0; break-inside: avoid; }.block-plan figcaption { font-size: 9pt; margin-bottom: .06in; }.plan-text { font-size: 9pt; line-height: 1.4; }.vex-sources { font-size: 7.5pt; display: block; margin: .06in 0; }.vex-sources a { display: block; min-height: 0; padding: .015in 0; }.vex-experiment { margin: .1in 0; padding: .08in .12in; }.vex-experiment p { margin: .04in 0; }.vex-experiment h4 { margin: .04in 0; font-size: 10pt; }.vex-experiment dd { margin-bottom: .04in; font-size: 9pt; }.vex-experiment dt { font-size: 8pt; }.table-scroll { overflow: visible; margin: .1in 0; }table { font-size: 8pt; }th, td { padding: .06in; font-size: 8pt; }caption { font-size: 9pt; }h3, h4, figcaption { break-after: avoid; }.build-label { font-size: 9pt; }.paper-notes { height: .45in; }.teaching-guide .lesson-section { break-inside: auto; }textarea, button { display: none !important; }
}

@media print { .prediction, .vex-experiment, .mission-field { break-inside: avoid; } }