/* TYPE 1451 workshop identity: cream stock, racing navy, rust and crisp rules. */
:root{--paper:#f3efe5;--ink:#1d1f21;--navy:#0f2a44;--rust:#b14a2a;--rule:#b7b6b0;--muted:#59616a}
body{background:var(--paper);color:var(--ink);font-family:'Bahnschrift','DIN 1451','Arial Narrow',Arial,sans-serif;font-size:16px;line-height:1.6}
header{background:var(--paper);border-bottom:2px solid var(--navy);padding:22px 28px;position:relative;gap:20px}
header:after{content:'';position:absolute;bottom:-7px;left:0;right:0;height:5px;background:linear-gradient(110deg,var(--navy) 0 68%,#173a5e 68% 82%,var(--rust) 82% 94%,var(--paper) 94%)}
.brandLockup{display:flex;align-items:center;gap:18px;min-width:0}.brandMark{background:var(--navy);color:var(--paper);padding:9px 13px;font-weight:800;line-height:1.05;font-size:20px;letter-spacing:1.5px;border-left:5px solid var(--rust)}.brandMark span{display:block;font-size:13px;letter-spacing:4px;margin-bottom:5px}.brandTitle{display:block;font-size:22px;font-weight:800;letter-spacing:-.4px;text-transform:uppercase}.brandSub{font:12px/1.5 monospace;letter-spacing:1px;color:var(--muted)}header small{color:var(--navy);font:12px/1.6 monospace;text-transform:uppercase;letter-spacing:1px;text-align:right}
main{max-width:1000px;padding:34px 24px 120px}h1,h2,h3{font-family:'Bahnschrift','DIN 1451','Arial Narrow',Arial,sans-serif;color:var(--navy);font-stretch:condensed}h1{font-size:34px;letter-spacing:-1px;line-height:1.15;max-width:720px}h2{font-size:23px;letter-spacing:-.5px}h3{font-size:18px}.eyebrow{color:var(--rust);font:700 13px/1.5 monospace;letter-spacing:1.6px}.muted,small,footer{color:var(--muted)}
.panel{background:#faf8f1;border:1px solid var(--rule);border-top:3px solid var(--navy);border-radius:0;padding:24px;margin:24px 0;position:relative;box-shadow:none}.panel:after{content:'';position:absolute;right:-1px;top:-3px;width:40px;border-top:3px solid var(--rust)}
button{background:transparent;color:var(--navy);border:1px solid #8794a0;border-radius:2px;font-weight:650;padding:11px 16px;transition:background .15s,color .15s;box-shadow:none}button:hover{background:#e2e5e2;border-color:var(--navy)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--rust);outline-offset:3px}button.active,.primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}.primary:hover,button.active:hover{background:#173a5e;color:var(--paper)}button:disabled{cursor:default;opacity:.8}
input,select{background:var(--paper);color:var(--ink);border:1px solid #8794a0;border-radius:2px}label{font-weight:650}input::placeholder{color:#69727b}input[type=range],progress{accent-color:var(--rust)}.sliderField input{accent-color:var(--rust)}.pill{border-radius:0;background:#e4e2d8;color:var(--navy);font:13px/1.5 monospace;border:1px solid #c6c7be}.feedback{border-left:4px solid var(--rust);background:#ece7db;color:var(--ink);padding:14px 18px}.feedback b{color:var(--navy)}.lesson{border-color:#c7c8bf}.lesson summary{color:var(--navy)}a{color:#963c21;text-decoration-thickness:1px;text-underline-offset:3px}.good{border-color:#38604c!important;background:#dce9dc!important;color:#183b27!important}.bad{border-color:#a93828!important;background:#f4ded8!important}
nav{background:var(--paper);border-top:2px solid var(--navy);gap:0;padding:8px 8px max(8px,env(safe-area-inset-bottom))}nav button{border-radius:0;border-right:1px solid #bfc4c5;color:var(--navy);font-size:14px;letter-spacing:.2px}nav button:last-child{border-right:0}nav button.active{background:var(--navy);box-shadow:inset 0 -4px 0 var(--rust)}
svg{background:#eee9dd;border:1px solid #c7c8bf;border-radius:0}svg text{fill:var(--navy)}svg .wire{stroke:var(--rust)}svg .ground{stroke:#173a5e}svg .part{fill:#f7f4eb;stroke:var(--navy)}.flow{stroke:#eb8b4a}.schematic svg{background-image:linear-gradient(#0f2a4409 1px,transparent 1px),linear-gradient(90deg,#0f2a4409 1px,transparent 1px);background-size:20px 20px}.component{background:#e5e0d2;color:var(--navy);border-color:#8190a0;border-radius:0}.point{background:#f8f5ec;color:var(--navy);border-color:var(--navy)}.point.red-point{border-color:#aa3322;color:#8b271a}.point.black-point{box-shadow:0 0 0 3px #173a5e}.meter{background:var(--navy);border:2px solid #263c51;border-radius:5px;color:var(--paper);padding:22px}.meter .eyebrow{color:#e89b78}.meter .muted{color:#c6ced3}.meter button,.meter select{color:var(--paper);border-color:#8b9dab;background:#19364f}.meter button.active{background:#f3efe5;color:#0f2a44}.meter output{border-radius:2px;background:#d0d8b6;color:#1a281b;border:5px solid #263c51;letter-spacing:-1px}.meter label{color:var(--paper)}.liveStats{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);justify-content:space-between}.liveStats b{color:var(--navy)}.liveStats span{color:var(--muted)}.caseLog li{background:#ece7db;border-color:var(--navy)}.labTabs{border-bottom:2px solid var(--navy);gap:0}.labTabs button{border-radius:0;border-bottom:0}.grid>section{border-top:1px solid var(--rule);padding-top:18px}footer{font-size:13px;border-top:1px solid var(--rule);padding-top:18px}
@media(min-width:1250px){nav{left:24px;right:auto;top:145px;bottom:auto;width:180px;flex-direction:column;border:1px solid var(--rule);border-top:3px solid var(--navy);padding:0}nav button{max-width:none;flex:none;text-align:left;border-right:0;border-bottom:1px solid var(--rule);padding:18px 16px}nav button.active{box-shadow:inset 5px 0 0 var(--rust)}main{margin-left:230px;margin-right:auto;width:calc(100% - 260px)}}
@media(max-width:550px){header{padding:16px 18px;align-items:flex-start}.brandLockup{gap:12px}.brandMark{font-size:17px;padding:8px 10px}.brandTitle{font-size:18px}.brandSub{font-size:10px;letter-spacing:.4px}header small{display:none}main{padding:26px 18px 115px}h1{font-size:29px}.panel{padding:18px;margin:20px 0}.grid{gap:20px}nav button{font-size:12px}.liveStats{gap:14px}.liveStats b{font-size:25px}.labTabs button{padding:10px 7px;font-size:14px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.coursePath{border-top:2px solid var(--navy);margin:14px 0 24px}.courseRow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;border:0;border-bottom:1px solid var(--rule);padding:18px 8px;text-align:left;border-radius:0}.courseRow:hover{background:#e8e4d8}.courseNum{font:700 21px monospace;color:var(--rust)}.courseTitle b{font-size:18px;display:block}.courseTitle span{font-weight:400;font-size:14px;color:var(--muted);display:block;line-height:1.4;margin-top:5px}.courseStatus{font:12px/1.5 monospace;color:var(--muted);max-width:150px}.testSequence{padding-left:24px}.testSequence li{margin:13px 0;padding-left:6px}.lessonGoal{font-size:19px;color:var(--navy);border-left:4px solid var(--rust);padding-left:14px}.feedback h3{margin-top:0}.lesson ol{padding-left:22px}.lesson li{margin:10px 0}@media(max-width:550px){.courseRow{grid-template-columns:30px minmax(0,1fr);gap:10px}.courseStatus{grid-column:2;max-width:none}.courseTitle b{font-size:17px}.courseNum{align-self:start}.lessonGoal{font-size:17px}}
.lessonVisual{margin:24px 0 30px;padding:0;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule);background:#f3efe5}.lessonArt{display:block;width:100%;height:auto;max-height:350px;object-fit:cover;object-position:center;border-bottom:1px solid var(--rule)}.lessonVisual figcaption{padding:18px 18px 0}.lessonVisual figcaption h3{font-size:20px;margin:0}.lessonVisual figcaption p{font-size:14px;line-height:1.5}.visualStates{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px 16px}.visualStates button{font-size:14px}.visualDiagram{overflow-x:auto;overscroll-behavior-x:contain;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.visualDiagram .teachingSvg{width:100%;min-width:560px;max-width:none;border:0;display:block}.teachingSvg .redLead{stroke:#b14a2a;stroke-width:3;fill:none}.teachingSvg .blackLead{stroke:#0f2a44;stroke-width:3;fill:none}.teachingSvg .faultWire{stroke:#b14a2a;stroke-width:4;stroke-dasharray:6 4;fill:none}.teachingSvg .selectedBranch{fill:none;stroke:#b14a2a;stroke-width:4}.visualNote{padding:0 18px;font-size:15px}.lessonVisual>small{display:block;padding:0 18px 18px;font-size:12px;line-height:1.5}.lessonVisual figcaption:after{content:'Compare the two states below.';font-size:13px;color:var(--muted)}@media(max-width:650px){.lessonVisual figcaption:after{content:'Compare states below. Swipe the diagram sideways to see every label.'}.visualStates button{flex:1;min-width:125px}.lessonArt{max-height:none}.lessonVisual figcaption,.visualStates{padding-left:12px;padding-right:12px}.visualNote{padding:0 12px}.lessonVisual>small{padding-left:12px;padding-right:12px}}
.betaBar{padding:12px 24px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.betaBar>span{font:12px monospace;color:var(--rust)}.betaBar .row{display:flex;gap:8px;flex-wrap:wrap}.betaBar button{font-size:13px;padding:7px 12px;min-height:44px}.betaBar .row{margin-left:auto}dialog#betaDialog{background:var(--paper);color:var(--ink);border:2px solid var(--navy);max-width:650px;width:calc(100% - 24px);max-height:90dvh;padding:24px;overflow-y:auto;font:16px/1.6 Arial,sans-serif}dialog::backdrop{background:#0f2a4499}#betaDialog label{display:block;margin:16px 0 6px}#betaDialog input,#betaDialog select,#betaDialog textarea{display:block;width:100%;box-sizing:border-box;font:16px/1.5 Arial,sans-serif;border:1px solid #8794a0;background:#faf8f1;padding:11px;color:var(--ink)}#betaDialog textarea{resize:vertical}#betaDialog h2{margin-top:20px}#betaDialog .muted{font-size:13px}#feedbackStatus{color:#963c21}#feedbackSubmit{margin-top:10px}@media(min-width:1250px){nav{top:205px}}@media(max-width:550px){.betaBar{padding:10px 18px}.betaBar>span{width:100%}.betaBar .row{margin-left:0;width:100%}.betaBar button{flex:1}dialog#betaDialog{padding:18px}}