/* The computer adventures have their own playful visual identity inside The Sage Dad. */
:root{--paper:#fff9ec;--white:#fffef9;--pine:#22334c;--ink:#22334c;--sage:#d9f3e9;--rust:#994326;--muted:#48546a;--line:#c5c9cd;--gold:#ffcb57;--teal:#53c8b4;--lilac:#c8b6f6;--coral:#ff977d;--heading:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif}
body{font-family:'Trebuchet MS',Arial,sans-serif;background:var(--paper);font-size:17px;line-height:1.65}h1,h2,h3{font-family:var(--heading);font-weight:900;letter-spacing:-.045em;line-height:1.08}h1{font-size:clamp(52px,5.9vw,84px)}h2{font-size:clamp(32px,3.5vw,48px)}h3{font-size:29px}em{font-style:normal;color:var(--ink);position:relative;background:linear-gradient(transparent 64%,#ffcb57 64%,#ffcb57 92%,transparent 92%)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:800}.header{min-height:88px;padding:18px 6vw;border-bottom:2px solid var(--ink);background:var(--white)}.brand-mark{background:var(--pine);color:var(--paper);border:0;transform:rotate(-8deg);border-radius:14px;font:bold 28px Georgia,serif;width:42px;height:42px}.brand strong{font-size:13px}.brand small{font-size:9px}.header nav a{font-size:13px;font-weight:700}.header nav a:last-child{border:1.5px solid var(--ink);padding:7px 12px;border-radius:99px}.hero{padding:64px 6vw 48px;gap:3vw;grid-template-columns:1.12fr 1fr;overflow:hidden;background-image:radial-gradient(#22334c15 1px,transparent 1px);background-size:22px 22px}.hero .eyebrow{display:inline-block;background:var(--white);border:1.5px solid var(--ink);border-radius:99px;padding:6px 14px;letter-spacing:.035em;font-size:11px;margin-bottom:28px}.tiny-star{color:var(--ink)}.lede{color:var(--ink);font-size:20px;max-width:560px}.button{border:2px solid var(--ink);border-radius:13px;padding:13px 21px;font:800 16px/1.4 'Trebuchet MS',Arial,sans-serif;box-shadow:0 4px 0 var(--ink);min-height:52px;transition:transform .15s,box-shadow .15s}.button:hover{filter:none;transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.button:disabled{transform:none;box-shadow:none;opacity:.48}.rust{background:var(--coral);color:var(--ink)}.pine{background:var(--pine);color:white}.outline{background:var(--white);color:var(--ink)}.getting-started{font-size:14px;line-height:1.6;margin-top:25px;max-width:430px}.meta{font-size:12px;font-weight:700;margin-top:15px}.hero-art{padding:0;min-height:0;position:relative;max-width:540px;width:100%;margin:auto}.lab-buddy{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 0 #22334c08)}.buddy-speech{position:absolute;right:0;top:8px;background:var(--white);border:2px solid var(--ink);border-radius:18px 18px 18px 3px;padding:12px 17px;transform:rotate(5deg);font-size:16px;font-weight:800;line-height:1.3;box-shadow:3px 4px 0 var(--ink);z-index:1}.idea-trail{display:flex;align-items:center;justify-content:center;gap:12px;margin:-5px auto 0;transform:rotate(-2deg)}.idea-trail>span{display:grid;place-items:center;background:var(--white);border:2px solid var(--ink);border-radius:14px;width:57px;height:60px;font:900 34px var(--heading);box-shadow:0 4px 0 var(--ink)}.idea-trail>span.mystery{background:var(--lilac)}.idea-trail>b{font-size:13px}.art-caption{font:700 13px 'Trebuchet MS',Arial,sans-serif;text-align:center;margin:25px 0 0;color:var(--muted)}.promise{border:0;background:#d9f3e9;padding:24px 28px;border-radius:20px;gap:24px;margin-top:12px}.promise>span{font-size:11px;font-weight:900;max-width:140px;color:var(--ink);letter-spacing:.07em}.promise p{font-size:15px}.promise>a{font-size:13px;font-weight:700}.adventures{padding:56px 6vw 65px}.section-heading h2{font-size:42px}.section-heading>p{font-size:15px}.cards{gap:25px}.lesson-card{border:2px solid var(--ink);border-radius:23px;padding:0 24px 23px;background:var(--white);box-shadow:0 6px 0 var(--ink);overflow:hidden;transition:transform .16s,box-shadow .16s}.lesson-card:hover{border-color:var(--ink);transform:translateY(-5px) rotate(-.5deg);box-shadow:0 11px 0 var(--ink)}.card-art{margin:0 -24px 21px;height:125px;display:flex;align-items:center;justify-content:center;gap:10px;background:#d9f3e9;border-bottom:2px solid var(--ink)}.lesson-card:nth-child(2) .card-art{background:#e8dcff}.lesson-card:nth-child(3) .card-art{background:#ffe4a3}.card-art>span{display:grid;place-items:center;width:50px;height:55px;border:2px solid var(--ink);border-radius:12px;background:var(--white);font:900 30px var(--heading);box-shadow:3px 3px 0 var(--ink);transform:rotate(-7deg)}.card-art>span:last-child{transform:rotate(8deg);background:#ff977d}.card-art>b{font-size:18px}.card-top{margin-bottom:15px}.card-number{font:900 15px var(--heading);padding:7px 11px;border-radius:9px;background:var(--pine);color:var(--white)}.card-top small{font-size:12px;font-weight:700}.lesson-card h3{font-size:28px;max-width:none;min-height:60px;margin-bottom:12px}.lesson-card p{font-size:16px}.card-bottom{font-size:12px;border-top:2px dashed #c5c9cd;gap:12px;align-items:center}.card-bottom>span:last-child{font-weight:800;text-align:right}.storage-note{font-size:12px;margin-top:22px}.in-adventure .hero,.in-adventure .promise,.in-adventure .adventures,.in-adventure .origin{display:none}.workspace{padding:28px 5vw 0;border:0;background-color:#f4f0ff;background-image:radial-gradient(#22334c12 1px,transparent 1px);background-size:20px 20px;min-height:70vh}.lesson-top{font-size:13px;font-weight:700;margin-bottom:25px}.lesson-heading{margin-bottom:24px}.lesson-heading h2{font-size:clamp(34px,4vw,52px);margin-bottom:15px}.lesson-heading>.eyebrow,.lesson-heading .eyebrow{display:inline-block;border-radius:8px;background:var(--gold);color:var(--ink);padding:4px 9px;margin-bottom:14px}.lesson-heading p:last-child{font-size:17px;color:var(--ink);line-height:1.6}.lesson-progress{background:var(--white);border:2px solid var(--ink);padding:14px;border-radius:16px;font-size:13px;font-weight:800;text-align:center;box-shadow:3px 3px 0 var(--ink)}.lesson-progress>div{justify-content:center}.lesson-progress i{height:9px;width:12px;border-radius:3px;background:#dfdbe7}.lesson-progress i.active{background:var(--teal);border:1px solid var(--ink)}.phase-nav{gap:8px;border:0;overflow:visible;margin-bottom:28px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.phase-nav button{border:2px solid #bcc2ce;border-radius:13px;padding:12px 6px;font:700 12px/1.4 'Trebuchet MS',Arial,sans-serif;white-space:normal;background:#fffcf7;color:var(--muted);min-height:64px}.phase-nav button span{display:block;width:auto;height:auto;border:0;border-radius:0;margin:0 0 3px;font-size:15px;font-weight:900}.phase-nav button[aria-current=step]{border-color:var(--ink);background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--ink)}.phase-nav button[aria-current] span{background:transparent;color:var(--ink);border:0}.lesson-grid{grid-template-columns:minmax(290px,.87fr) minmax(0,1.35fr);gap:28px}.instruction-panel{padding:27px;background:var(--white);border:2px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink)}.instruction-panel>.eyebrow{color:#6b4698;margin-bottom:14px}.instruction-panel h3{font-size:34px}.instruction-panel p{font-size:17px;line-height:1.7}.instruction-panel .small{font-size:14px!important}.materials{background:#fff1c5;border:0;border-radius:12px;padding:15px;margin:22px 0;font-size:15px}.materials strong{font-size:11px;letter-spacing:.07em;margin-bottom:4px}.before-lab{background:#d9f3e9;border:2px solid var(--ink);border-radius:24px;padding:28px;box-shadow:0 5px 0 var(--ink)}.small-buddy{width:190px;display:block;margin:-5px auto 15px}.before-lab h3{font-size:32px}.before-lab li{font-size:18px;padding-left:5px;margin-bottom:17px}.before-lab li::marker{font-weight:900;color:#34685f}.before-lab>p{font-size:17px}.before-lab .small{font-size:14px!important}.choices{gap:12px}.choices button{border:2px solid var(--ink);border-radius:15px;background:#fff1c5;color:var(--ink);min-width:70px;min-height:67px;font:900 30px var(--heading);box-shadow:0 4px 0 var(--ink)}.choices button[aria-pressed=true]{background:var(--teal);color:var(--ink);box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.choices .not-sure{font-weight:700;background:var(--white);font-size:15px}.feedback{background:#d9f3e9;border:2px solid #a6d2c4;border-radius:13px;font-size:15px!important;padding:16px}.lesson-navigation{gap:12px;border-top:2px dashed #d2ccd9}.lesson-navigation .button{font-size:14px;padding:12px 16px}.text-button{font-size:14px;font-weight:700;min-height:44px}.lab-panel{border:2px solid var(--ink);border-radius:24px;padding:26px;box-shadow:0 6px 0 var(--ink);background:var(--white)}.lab-header h3{font-size:30px;margin:6px 0 14px}.lab-header .eyebrow{color:#48546a}.mode-tag{background:#e8dcff;border:1.5px solid var(--ink);padding:5px 10px;font-size:11px;font-weight:700}.lab-disclosure{font-size:13px!important}.number-help{font-size:14px}.registers{gap:12px}.register{border:2px solid var(--ink);border-radius:16px;background:#d9f3e9;padding:15px}.register:nth-child(2){background:#e8dcff}.register:nth-child(3){background:#dceafe}.register label{font-size:15px;font-weight:800}.register label span{font-size:11px;font-weight:400;color:#455570}.register strong{font:900 clamp(38px,4vw,56px)/1.3 var(--heading);margin:6px 0}.register.changed{background:var(--gold);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.dots i{background:var(--ink);width:8px;height:8px}.machine-message{font-size:14px;font-weight:700;line-height:1.5;min-height:50px;padding:15px 0;color:var(--ink)}.controls{gap:12px;margin-top:12px;margin-bottom:22px}.controls .button{font-size:15px;min-height:50px}.controls #step{background:var(--teal);color:var(--ink)}.controls #run{background:var(--gold);color:var(--ink)}.controls .text-button{font-size:13px}.plain-plan{border:2px solid var(--ink);border-radius:15px;background:#fffef9;overflow:hidden}.plain-instruction{border-bottom:1px dashed #c0c8cd;padding:13px 15px}.plain-instruction>span{min-width:67px;font-size:11px;font-weight:800;color:var(--ink)}.plain-instruction p{font-size:16px;line-height:1.6}.plain-instruction.next{background:#ffe4a3;box-shadow:inset 5px 0 var(--ink)}.deeper,.connection{border-top:1px solid #d4d6db;font-size:13px}.deeper summary,.connection summary{font-size:14px;min-height:44px}.value-controls input{border:2px solid var(--ink);border-radius:12px;min-width:95px;font-weight:800;font-size:22px;padding:9px;background:#fff1c5}.value-controls label{font-size:14px;font-weight:700}.hint{background:#fff1c5;border-radius:13px;border:1px solid #d7c995}.hint p{font-size:15px}.instruction-panel textarea{border:2px solid var(--ink);border-radius:12px;font-size:16px}.checks label{padding:10px;background:#f3edfc;border-radius:10px;font-size:14px}.checks input{accent-color:var(--pine);flex-shrink:0}.parent-note{padding:40px 0}.parent-note p{font:800 23px/1.4 var(--heading);margin:10px 0}.parent-note>span:last-child{font-size:14px}.origin{background:#d9f3e9;border-top:2px solid var(--ink);gap:7vw;padding:50px 6vw}.origin h2{font-size:37px}.origin p{font-size:16px}.origin a{font-size:14px;font-weight:700}footer{background:var(--ink);padding:32px 6vw}footer p{font:700 19px var(--heading)}footer small{font-size:11px}dialog{border:2px solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 var(--ink);max-width:500px}dialog h2{font-size:30px}.notice{border:1.5px solid var(--ink);border-radius:12px;background:#fff1c5;font-size:14px}.error{border:2px solid #8c3326;border-radius:12px;color:#702c20;font-size:15px}.code-lines{font-size:13px;border-radius:12px}.code-lines li.next{border-left-color:var(--gold)}#source-editor{border-radius:12px;font-size:14px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #7043af;outline-offset:5px}
@media(max-width:1050px){.hero h1{font-size:58px}.buddy-speech{font-size:14px;right:4px}.hero-art{min-width:0}.lesson-grid{grid-template-columns:minmax(265px,.95fr) minmax(0,1.2fr);gap:20px}.instruction-panel,.lab-panel{padding:21px}.controls .text-button{margin-left:0}.lesson-card{padding-left:18px;padding-right:18px}.card-art{margin-left:-18px;margin-right:-18px}.card-art>span{width:42px;height:49px;font-size:26px}.card-art{gap:7px}.card-bottom{flex-direction:column;align-items:start}.lesson-card h3{font-size:25px}.register label{flex-direction:column}.header nav{gap:17px}.register{padding:12px}.lesson-navigation .button{max-width:76%}}
@media(max-width:740px){.header{gap:17px;padding:16px 6vw}.header nav{gap:15px;align-items:center}.header nav a{font-size:11px}.header nav a:last-child{padding:5px 9px}.hero{grid-template-columns:1fr;padding:34px 6vw 35px;gap:20px}.hero h1{font-size:clamp(42px,10vw,62px);line-height:1.06}.hero .eyebrow{font-size:9px;padding:5px 10px;margin-bottom:21px}.hero .lede{font-size:18px;margin:22px 0}.hero .button{font-size:16px}.hero-art{width:100%;max-width:400px;margin-top:5px}.lab-buddy{max-height:310px}.buddy-speech{font-size:12px;padding:10px;right:0;top:0}.idea-trail{gap:9px}.idea-trail>span{width:47px;height:49px;font-size:29px}.idea-trail>b{font-size:11px}.art-caption{font-size:12px;margin-top:19px}.meta{font-size:11px}.getting-started{font-size:14px}.promise{padding:21px;gap:10px;margin-top:0}.promise>span{width:100%;max-width:none}.promise p{font-size:14px}.adventures{padding:40px 6vw}.section-heading h2{font-size:35px}.cards{gap:25px}.lesson-card{padding:0 22px 22px;min-height:0}.card-art{margin:0 -22px 20px;height:110px}.card-art>span{width:51px;height:55px;font-size:30px}.lesson-card h3{font-size:28px;min-height:0}.card-bottom{flex-direction:row;align-items:center}.workspace{padding:23px 5vw 0}.lesson-top{font-size:12px;gap:10px}.lesson-heading{gap:13px}.lesson-heading h2{font-size:33px}.lesson-heading p:last-child{font-size:16px}.lesson-progress{padding:9px;font-size:11px;min-width:75px;border-radius:13px;box-shadow:2px 2px 0 var(--ink)}.lesson-progress i{width:7px;height:7px}.phase-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px}.phase-nav button{font-size:11px;min-height:66px;padding:8px 4px}.phase-nav button span{display:block;font-size:14px}.lesson-grid{grid-template-columns:minmax(0,1fr);gap:23px}.instruction-panel,.lab-panel,.before-lab{padding:22px 19px;border-radius:19px}.instruction-panel h3{font-size:30px}.instruction-panel p{font-size:16px}.before-lab h3{font-size:29px}.small-buddy{width:165px}.lesson-navigation .button{font-size:13px;max-width:77%}.lab-panel{margin-top:0}.lab-header h3{font-size:28px}.lab-header{gap:3px}.registers{gap:8px}.register{padding:11px 9px;border-radius:12px}.register strong{font-size:40px}.register label{font-size:13px}.number-help{font-size:14px}.plain-instruction{padding:12px 10px;gap:8px}.plain-instruction p{font-size:15px}.plain-instruction>span{min-width:54px;font-size:10px}.controls .button{font-size:14px;padding:11px 13px}.controls{gap:12px}.parent-note p{font-size:21px}.origin{grid-template-columns:1fr;gap:20px}.origin h2{font-size:32px}.origin p{font-size:15px}#back-to-instructions{margin:12px 0 20px}.source-extras{flex-direction:column;align-items:start}.value-controls{gap:12px}.checks label{font-size:14px}}
@media(prefers-reduced-motion:reduce){.button,.lesson-card{transition:none}.button:hover,.lesson-card:hover{transform:none}}

.lab-nav{display:flex;justify-content:space-between;gap:18px;padding:12px 6vw;background:#fff9ec;font:700 13px/1.5 Trebuchet MS,Arial,sans-serif;border-bottom:1px solid #22334c20}.lab-nav a{min-height:32px;display:inline-flex;align-items:center;text-underline-offset:4px}@media(max-width:600px){.lab-nav{font-size:11px;gap:12px;padding:10px 5.5vw}}
