@font-face{font-family:Dingos;src:url('assets/DingosBlack.otf')}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f4f0;color:#26232d;font-family:Arial,Helvetica,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #7853d5;outline-offset:6px}header{position:fixed;z-index:20;top:0;left:0;width:100%;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:linear-gradient(#f5f4f0 35%,#f5f4f000)}.wordmark{font-size:20px;font-weight:950;line-height:.85;position:relative;letter-spacing:-1px;display:block}.wordmark span{display:block}.wordmark i{position:absolute;right:-28px;bottom:0;background:#f2d744;border-radius:50%;font-size:13px;width:29px;height:29px;display:grid;place-items:center;transform:rotate(-13deg)}.header-note,.header-link,.eyebrow,.spec,.scene-caption,.hero-meta,.margin-note,.bottom-bar,footer{font-family:monospace}.header-note{font-size:12px;letter-spacing:.09em}.header-link{font-size:13px}.header-link span{font-size:20px;margin-left:15px}#stage{position:fixed;left:43%;right:1%;top:9%;height:83%;z-index:2}#scene{width:100%;height:100%;display:block;touch-action:pan-y}.scene-caption{display:flex;justify-content:space-between;position:absolute;left:8%;right:8%;bottom:3%;font-size:11px;color:#77717f;letter-spacing:.08em;pointer-events:none}#loading{position:absolute;inset:45% 0;text-align:center;font-size:14px;color:#655079}#loading.hidden{display:none}.chapter{height:115vh;min-height:750px;position:relative;display:flex;align-items:center;padding:90px 7% 90px 7%;scroll-margin-top:0}.copy{position:relative;z-index:4;width:40%;max-width:550px}.eyebrow{font-size:12px;letter-spacing:.11em;font-weight:bold;margin:0 0 27px;color:#635d6c}h1,h2{font-weight:900;font-size:clamp(48px,5.1vw,84px);letter-spacing:-.067em;line-height:1.02;margin:0 0 30px}h2{font-size:clamp(43px,4.8vw,76px)}em{font-style:normal;color:#9374d9}.copy>p:not(.eyebrow):not(.spec):not(.small-note){font-size:17px;line-height:1.75;color:#6c6674;max-width:400px}.hero{height:100vh;min-height:700px}.hero .copy{padding-top:10px}.hero .lede{font-size:16px!important;line-height:1.7!important}.start{display:inline-flex;align-items:center;gap:35px;font-size:14px;border-bottom:1px solid #aaa2ae;padding:20px 0 13px;margin-top:15px}.start span{font-size:22px}.hero-meta{display:flex;gap:48px;margin-top:56px;font-size:18px}.hero-meta b{display:block;font-size:10px;font-weight:normal;letter-spacing:.06em;margin-top:6px;color:#837c8b}.margin-note{position:absolute;left:7%;bottom:65px;font-size:10px;color:#938b9b;letter-spacing:.06em}.instruction{border-left:2px solid #b297e5;padding:2px 0 2px 20px;margin:30px 0 23px;max-width:365px}.instruction b{font-size:15px;font-weight:600}.instruction p{font-size:14px;line-height:1.8;color:#756d7e;margin:9px 0 0}.spec{font-size:10px;line-height:1.6;color:#867d91;letter-spacing:.07em}.text-button{border:0;background:none;padding:7px 0;color:#53475f;font-size:13px;border-bottom:1px solid #bbb1c7}.step-nav{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:5px}.step-nav a{display:block;width:22px;height:20px;position:relative}.step-nav a:before{content:'';position:absolute;width:4px;height:4px;background:#c8c3ce;border-radius:50%;left:9px;top:8px;transition:all .2s}.step-nav a.active:before{width:7px;height:7px;left:7px;top:6px;background:#8060be;box-shadow:0 0 0 4px #e9e1f4}.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:10;height:44px;background:#f5f4f0e8;display:flex;align-items:center;gap:30px;padding:0 5%;font-size:10px;color:#7a7284;letter-spacing:.08em}.progress-track{height:1px;background:#ded9e4;flex:1}#progress{height:2px;width:0;background:#9a7bd9}.checks{display:flex;flex-direction:column;gap:17px;font-size:14px;margin-top:30px}.checks label{display:flex;align-items:center;gap:10px;line-height:1.5}.checks input{accent-color:#9975dc;width:17px;height:17px}.small-note{font-size:12px;line-height:1.7;color:#81768c;max-width:340px;margin-top:24px}.final-controls{display:flex;gap:25px;align-items:center;margin-top:30px}.primary{border:0;background:#28232e;color:#fff;padding:17px 23px;border-radius:3px;font-size:14px}.button-demo{display:flex;gap:9px;margin-top:20px}.button-demo button{border:1px solid #cfc5dc;width:37px;height:37px;border-radius:50%;background:#e8ddf6;color:#342a42;font-size:19px}.button-demo button:nth-child(2){background:#f2d744}.finale{height:110vh}footer{position:absolute;left:7%;right:7%;bottom:70px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#80778d}dialog{width:min(780px,90vw);max-height:85vh;border:1px solid #d9d1e3;border-radius:8px;padding:45px;background:#f9f8fc;color:#30293b;box-shadow:0 30px 100px #1f10244a}dialog::backdrop{background:#28203466;backdrop-filter:blur(7px)}.close-dialog{position:absolute;right:15px;top:10px;font-size:28px;border:0;background:none;color:#70637d}dialog h2{font-size:36px;letter-spacing:-.04em}dialog h3{margin-top:30px}dialog p,dialog li{font-size:14px;line-height:1.8}dialog table{border-collapse:collapse;width:100%;font-size:13px}dialog th,dialog td{text-align:left;padding:9px 6px;border-bottom:1px solid #ddd4e5}dialog a{color:#7953b5;text-decoration:underline}body.inspecting #scene{touch-action:none;cursor:grab}body.inspecting #stage{z-index:5}.inspect-hint{color:#8368a7}
@media(min-width:1600px){.copy{max-width:600px}h1{font-size:90px}}
@media(max-width:760px){header{height:75px;padding:0 7%}.header-note{display:none}.header-link{font-size:11px}.wordmark{font-size:16px}.wordmark i{width:24px;height:24px;font-size:11px;right:-24px}#stage{left:0;right:0;top:42%;height:51%;z-index:3;pointer-events:none}body.inspecting #stage{pointer-events:auto}.chapter{height:135svh;min-height:850px;padding:110px 8% 60px;align-items:flex-start}.copy{width:100%;max-width:none}h1,h2{font-size:46px;margin-bottom:18px}.hero{height:115svh;min-height:760px}.hero .copy{padding-top:0}.eyebrow{font-size:10px;margin-bottom:18px}.copy>p:not(.eyebrow):not(.spec):not(.small-note){font-size:14px;line-height:1.55;max-width:85%}.hero .lede{font-size:14px!important;max-width:95%!important}.hero-meta{display:none}.start{margin-top:0;padding-top:8px;font-size:12px}.margin-note{display:none}.scene-caption{font-size:9px;bottom:0;left:9%;right:9%}.instruction{margin:18px 0 15px;padding-left:13px;max-width:95%;}.instruction p{font-size:12px;line-height:1.6}.instruction b{font-size:13px}.spec{font-size:9px}.step-nav{right:6px;gap:0;top:68%}.bottom-bar{gap:14px;font-size:8px;padding:0 7%;height:34px}.small-note{font-size:11px;margin-top:15px;max-width:90%}.checks{margin-top:18px;gap:9px;font-size:12px}.final-controls{margin-top:15px}.primary{padding:12px 17px;font-size:12px}.button-demo{margin-top:10px;position:relative;z-index:7}.button-demo button{width:31px;height:31px}.finale{height:125svh}footer{bottom:50px;left:8%;right:8%;font-size:8px;gap:20px}footer .text-button{font-size:10px;white-space:nowrap}dialog{padding:35px 22px}dialog table{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:760px){#stage{top:57%;height:36%}.copy>p:not(.eyebrow):not(.spec):not(.small-note){max-width:100%}h2{font-size:40px}.scene-caption{bottom:0;font-size:8px}}
footer{z-index:8}
.hero{align-items:flex-start;padding-top:125px;justify-content:center}.hero .copy{width:100%;max-width:1000px;text-align:center;padding:0}.hero h1{font-size:clamp(40px,5vw,76px);letter-spacing:-.06em;margin:0 0 15px}.hero .eyebrow{margin-bottom:18px}.hero .lede{max-width:none!important;margin:0}.hero .start{margin-top:3px;padding-top:10px;gap:24px}.hero-meta{display:none}.hero .margin-note{bottom:51px}.cable-picker{display:block;font:11px monospace;max-width:330px;margin:18px 0}.cable-picker select{display:block;width:100%;border:1px solid #c7bbd8;border-radius:5px;padding:12px 8px;background:#fff9;color:#32293c;margin-top:8px}body.wiring-view #stage{pointer-events:auto}body.wiring-view #scene{cursor:crosshair}#cable-detail{position:fixed;z-index:12;right:5%;bottom:80px;width:min(360px,90vw);padding:24px;border:1px solid #ccc0db;border-left:4px solid var(--wire,#9566d5);border-radius:7px;background:#fcfaf8f5;box-shadow:0 12px 40px #30253b1a;backdrop-filter:blur(12px)}#cable-detail[hidden]{display:none}#cable-detail strong{display:block;margin-top:12px;font-size:19px}#cable-detail p{font:12px/1.65 monospace;color:#594e66}#close-cable{position:absolute;right:12px;top:8px;border:0;background:none;font-size:24px}#cable-detail .eyebrow{font-size:9px}.cable-purpose{margin-bottom:0}
@media(max-width:760px){.hero{padding-top:104px}.hero h1{font-size:43px;max-width:360px;margin:0 auto 12px}.hero .lede{font-size:12px!important}.hero .eyebrow{font-size:9px}.hero .start{font-size:11px;padding:7px 0}.cable-picker{margin:10px 0}.cable-picker select{padding:8px}.hero .copy{z-index:4}#cable-detail{bottom:45px;right:5%;padding:17px}}
:root{--page-bg:#ffffff}body{background:var(--page-bg)}header{background:linear-gradient(var(--page-bg) 35%,transparent)}.bottom-bar{background:var(--page-bg)}.wordmark img{display:block;object-fit:contain}.scene-caption,.margin-note{display:none}.parts-picker{position:absolute;z-index:5;bottom:57px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;white-space:nowrap;font:10px monospace;color:#73697d}.parts-picker select{border:0;border-bottom:1px solid #c8bfd1;background:transparent;color:#756387;font:inherit;padding:6px;max-width:190px}.on-bench #stage{pointer-events:auto}
body.at-finale #stage{pointer-events:auto} /* the finished badge answers to a tap: it opens Explore */#part-detail{position:fixed;z-index:24;width:280px;padding:22px;background:#fffefa;border:1px solid #d5c9e3;border-radius:8px;box-shadow:0 8px 35px #32234325}#part-detail[hidden]{display:none}#part-detail strong{display:block;margin-top:13px;font-size:17px}#part-detail p{font:12px/1.6 Arial;color:#6c5e79}#part-detail a{font:10px monospace;color:#765a9a;border-bottom:1px solid #c6b5da}#part-detail>button{position:absolute;right:9px;top:5px;background:none;border:0;font-size:24px}#part-detail .eyebrow{font-size:9px}#toggle-render{position:fixed;right:22px;top:91px;z-index:25;background:#292332;color:#eee6fa;border:1px solid #4b405b;border-radius:6px;padding:10px 13px;font:11px monospace;box-shadow:0 4px 14px #30203c18}#render-panel{position:fixed;top:135px;right:22px;width:310px;max-height:calc(100dvh - 200px);overflow:auto;overscroll-behavior:contain;z-index:26;padding:9px;background:#24212a;color:#e8e0f0;border:1px solid #54445f;border-radius:8px;box-shadow:0 14px 40px #26182e35}#render-panel[hidden]{display:none}.render-heading{display:flex;justify-content:space-between;align-items:center;padding:4px 2px;font:12px monospace}.render-heading button{background:none;border:0;color:#e6d8f0;font-size:23px}#render-panel>p{font:10px/1.6 monospace;color:#b4a5c3;margin:8px 2px}.render-actions{display:flex;gap:7px;margin:10px 0}.render-actions button{border:1px solid #a998bf;border-radius:4px;background:#e6daf4;color:#32263f;padding:9px 10px;font-size:11px}.render-actions button:first-child{background:#ad86e2;border-color:#ad86e2;color:#171020}#render-panel .dg{float:none;width:100%!important}.dg .property-name{width:46%!important}.dg .c{width:54%!important}.dg li.title{font-weight:bold;background-color:#302738!important}.dg .cr.number{border-left-color:#a181ca!important}.dg .c .slider-fg{background:#a181ca!important}.dg .cr.number input[type=text]{color:#ceb2f5!important}#settings-json{display:block;resize:vertical;width:100%;min-height:330px;font:12px/1.5 monospace;background:#eee9f4;border:1px solid #d0c1dd;border-radius:5px;padding:15px;color:#382748}#settings-dialog h2{font-size:29px}#render-status{min-height:16px}#render-panel .dg .close-button{display:none!important}@media(max-width:760px){#toggle-render{right:14px;top:70px;padding:7px 10px;font-size:10px}#render-panel{right:12px;top:106px;max-height:calc(100dvh - 150px);width:min(310px,calc(100vw - 24px))}.wordmark img{width:85px}.parts-picker{bottom:46px;gap:5px;font-size:8px;flex-direction:column}.hero{padding-top:121px}.hero h1{font-size:39px}}

@media(max-width:760px){.hero{height:100svh;min-height:760px}}

#peek{position:fixed;z-index:26;width:30px;height:30px;border-radius:50%;border:1px solid #d0c4de;background:#fffefa;color:#5d4a78;display:grid;place-items:center;box-shadow:0 4px 14px #2f204025;transform:translate(-50%,-100%);cursor:pointer;padding:0}#peek:hover{background:#efe7fa}#peek[hidden]{display:none}

#stage{left:0!important;right:0!important;top:0!important;height:100%!important;width:100%}

#fps{position:fixed;right:22px;top:136px;z-index:25;font:10px monospace;color:#8f84a0;letter-spacing:.05em;pointer-events:none}
.parts-picker{display:none}
@media(max-width:760px){#fps{right:14px;top:104px}
 body.on-bench .parts-picker{display:flex;position:fixed;left:0;right:0;bottom:34px;transform:none;z-index:9;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#fffefaf2;border-top:1px solid #d9d0e3;backdrop-filter:blur(10px);font:11px monospace;color:#73697d}
 body.on-bench .parts-picker select{max-width:58%;border:1px solid #c7bbd8;border-radius:6px;padding:8px;background:#fff;color:#32293c}
 .chapter .copy{transition:opacity .15s linear}
 h1,h2{font-size:38px}.chapter h2{font-size:34px}.copy>p:not(.eyebrow):not(.spec):not(.small-note){font-size:13.5px;line-height:1.5}.instruction p{font-size:11.5px;line-height:1.55}.instruction b{font-size:12.5px}.instruction{margin:12px 0 10px}
 #part-detail{width:min(300px,92vw);left:4vw!important;top:auto!important;bottom:92px!important}
}

@media(max-width:760px){
 body.on-bench .parts-picker{flex-direction:row;padding:8px 14px}
 body.on-bench .parts-picker select{max-width:60%;padding:7px}
 body.on-bench #scene{touch-action:pan-y}
 .hero{padding-top:84px;min-height:100svh;height:auto}
 .hero .eyebrow{margin-bottom:8px}.hero h1{font-size:34px;margin:0 auto 8px;max-width:330px}.hero .lede{font-size:12px!important;line-height:1.45}.hero .start{font-size:11px;padding:6px 0;margin-top:2px}
 .chapter:not(.hero){padding-top:80px}
 .chapter:not(.hero) .copy{position:sticky;top:var(--stick,78px)}
 .chapter .eyebrow{margin-bottom:10px}.chapter h2{font-size:30px;margin-bottom:10px}
 .finale .copy{position:relative;top:auto}
}
@media(max-width:760px){#toggle-render,#render-panel{display:none}#fps{top:82px;right:14px}}
body.intro .hero .copy .w{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(5px)}
body.intro-in .hero .copy .w{opacity:1;transform:none;filter:blur(0);transition:opacity .6s ease,transform .8s cubic-bezier(.16,.8,.2,1),filter .6s ease;transition-delay:calc(var(--i)*42ms)}
body.intro .hero .copy .start.w{display:inline-flex}

/* Cover: full-screen intro over the workbench, driven by scroll (see coverT in app.js). The canvas sits above this layer so the 3D cap reads over the title; clicks pass through the canvas while the cover is up. */
@font-face{font-family:DingosBold;src:url('assets/DingosBold.otf');font-display:swap}
#cover-bg{position:fixed;inset:0;z-index:1;background:linear-gradient(162deg,#574189 -4%,#b79fec 75%);pointer-events:none}
#cover-space{height:120vh}
#cover{position:fixed;inset:0;z-index:1;color:#fff;text-align:center}
#cover.gone{pointer-events:none}
body.on-cover #stage{pointer-events:none}
.cover-inner{position:absolute;left:5%;right:5%;top:50%;transform:translateY(calc(-56% + var(--cover-y,0px)))}
.cover-actions{position:absolute;left:0;right:0;bottom:9%;transform:translateY(var(--cover-y,0px))}
.cover-eyebrow{font:24px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#c8b6f0;margin:0 0 14px}
.cover-title{font:min(70px,4.05vw)/1.1 DingosBold,Dingos,Arial Black,sans-serif;letter-spacing:-.02em;margin:0;white-space:nowrap;color:#fff}
.cap-slot{display:inline-block;width:2.45em;height:1em;vertical-align:-.12em;margin:0 -.12em;cursor:pointer}
.cover-lede{font:400 clamp(15px,1.28vw,22px)/1.3 Inter,Arial,sans-serif;color:#e1d7f7;margin:22px 0 0}
.cover-cta{display:inline-flex;align-items:center;justify-content:center;height:90px;padding:0 60px;border-radius:121px;background:#fff;color:#68539b;font:24px/1 'Bebas Neue',Impact,sans-serif;text-transform:uppercase;text-decoration:none;letter-spacing:.02em;box-shadow:0 12px 40px #2f1a5a30;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .3s,color .3s}
.cover-cta:hover{background:#ffdb78;color:#1c1c1c;transform:translateY(-3px) scale(1.03);box-shadow:0 18px 50px #2f1a5a40}
.cover-credit{margin:26px 0 0;font:13px monospace;color:#fff}
.cover-credit a{text-decoration:none}
.header-links{display:flex;gap:30px;align-items:center}
body.on-cover header{background:none}
body.on-cover .cover-credit{color:#fff}
.header-link{color:#fff;color:color-mix(in srgb,#26232d calc(var(--chrome-ink,1) * 100%),#ffffff)}
.header-link{transition:color .4s}
body.on-cover .bottom-bar,body.on-cover .step-nav,body.on-cover .scene-caption,body.on-cover .parts-picker,body.on-cover #peek{opacity:0;pointer-events:none}
.bottom-bar,.step-nav{transition:opacity .4s}
body.intro #cover .w{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(5px)}
body.intro-in #cover .w{opacity:1;transform:none;filter:blur(0);transition:opacity .6s ease,transform .8s cubic-bezier(.16,.8,.2,1),filter .6s ease;transition-delay:calc(var(--i)*40ms)}
body.intro #cover .cta-wrap.w{display:inline-block}
body.intro #cover .cover-credit.w{display:block}
@media(max-width:760px){.cover-title{font-size:38px;line-height:1.15;white-space:normal}.cap-slot{width:2.4em;margin:0 -.2em}.cover-inner{transform:translateY(calc(-62% + var(--cover-y,0px)))}.cover-eyebrow{font-size:16px;margin-bottom:10px}.cover-lede{font-size:14px;margin-top:16px}.cover-actions{bottom:6%}.cover-cta{height:64px;padding:0 38px;font-size:20px}.cover-credit{font-size:11px;margin-top:18px}.header-links{gap:16px}#cover-space{height:110vh}}

/* Header links: the arrow sits one space after the label, inside the same underline. */
.header-link{display:inline;white-space:nowrap}.header-link .hl-arrow::before{content:'\00a0'}
.header-link span{font-size:inherit;margin-left:0}
.header-link .hl-arrow{font-size:1.1em}
.header-link .hl-sm{display:none}
@media(max-width:760px){.header-link .hl-lg{display:none}.header-link .hl-sm{display:inline}.header-links{gap:10px}.header-link{font-size:9.5px}.header-link .hl-arrow{font-size:1em}header{padding:0 5%}}

/* The cover paints correctly before the module runs, and holds its copy until fonts and scene are ready. */
.cover-pending .cover-inner,.cover-pending .cover-actions{opacity:0}
body.on-cover #loading:not(.error){opacity:0}
/* CTA: the colour sweeps in from the left, and the button settles a touch smaller. */
.cover-cta{position:relative;overflow:hidden;isolation:isolate;transition:transform .55s cubic-bezier(.34,1.3,.36,1),box-shadow .5s ease,color .3s ease .07s}
.cover-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:#ffdb78;transform:scaleX(0);transform-origin:right center;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.cover-cta:hover,.cover-cta:focus-visible{background:#fff;color:#1c1c1c;transform:scale(.86);box-shadow:0 4px 14px #2f1a5a26}
.cover-cta:hover::before,.cover-cta:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.cover-cta:active{transform:scale(.82)}

/* Header links and the intro credit share the site's mono style; the underline is the hover state. */
.header-link,.cover-credit a{text-decoration:none;text-underline-position:from-font;text-decoration-thickness:1px;text-underline-offset:3px}
.header-link:hover,.header-link:focus-visible,.cover-credit a:hover,.cover-credit a:focus-visible{text-decoration:underline}
.cta-wrap{display:inline-block}

/* Bench chapter: the title and the bill-of-materials button are pinned to the viewport while the mat is on
   screen (the section itself starts 18vh below the fold, where the cover scroll ends). */
#intro.chapter{height:112vh;min-height:760px;padding:0}
.bench-copy,.bom-cta{position:fixed;z-index:4;opacity:0;pointer-events:none;transition:opacity .45s ease}
body.on-bench .bench-copy,body.on-bench .bom-cta{opacity:1;pointer-events:auto}
.bench-copy{left:7%;right:7%;top:12vh;text-align:center}
.bench-title{font:min(60px,4.1vw)/1.1 DingosBold,Dingos,Arial Black,sans-serif;letter-spacing:-.02em;color:#211c3b;margin:0}
.bench-lede{font:400 18px/28px Inter,Arial,sans-serif;color:#727272;margin:14px 0 0}
.inline-link{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-position:from-font;text-decoration-thickness:1px;text-underline-offset:2px}
.inline-link:hover{color:#211c3b}
.bom-cta{left:50%;translate:-50% 0;bottom:6vh;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:90px;padding:0 60px;border:0;border-radius:121px;background:#03211c;color:#fff;font:24px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 34px #03211c26;transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.3,.36,1),box-shadow .5s ease,color .3s ease .07s}
.bom-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:#ffdb78;transform:scaleX(0);transform-origin:right center;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.bom-cta:hover,.bom-cta:focus-visible{color:#03211c;transform:scale(.86);box-shadow:0 4px 14px #03211c26}
.bom-cta:hover::before,.bom-cta:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.bom-cta:active{transform:scale(.82)}
/* Explore in 3D wears the same pill as the other calls to action. */
#inspect{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:68px;padding:0 42px;border:0;border-radius:121px;background:#000;color:#fff;font:20px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 10px 28px #00000026;transition:transform .55s cubic-bezier(.34,1.3,.36,1),box-shadow .5s ease,color .3s ease .07s}
#inspect::before{content:'';position:absolute;inset:0;z-index:-1;background:#ffdb78;transform:scaleX(0);transform-origin:right center;transition:transform .6s cubic-bezier(.76,0,.24,1)}
#inspect:hover,#inspect:focus-visible{color:#000;transform:scale(.86);box-shadow:0 4px 14px #00000026}
#inspect:hover::before,#inspect:focus-visible::before{transform:scaleX(1);transform-origin:left center}
#inspect:active{transform:scale(.82)}
@media(max-width:760px){#inspect{height:46px;padding:0 24px;font-size:16px}}
.bom-list{width:100%;border-collapse:collapse;margin-top:10px}
.bom-list td{padding:11px 10px;border-bottom:1px solid #e4dced;vertical-align:top;font-size:13px}
.bom-list td:first-child{font-weight:bold;white-space:nowrap}
.bom-list td:last-child{text-align:right;white-space:nowrap}
.bom-list p{margin:3px 0 0;font-size:12px;color:#6c5e79}
@media(max-width:760px){
 .bench-copy{top:11vh;left:6%;right:6%}
 .bench-title{font-size:27px}
 .bench-lede{font-size:13px;line-height:20px;margin-top:9px}
 .bom-cta{height:52px;padding:0 26px;font-size:18px;bottom:104px}
 .bom-list td{font-size:12px;padding:9px 6px}
}

/* Every section title (and the dialogs') uses the cover's display face, at the bench title's size. */
.chapter h2,.bench-title,dialog h2{font-family:DingosBold,Dingos,'Arial Black',sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.1}
.chapter h2,.bench-title{font-size:clamp(30px,4.1vw,60px);margin-bottom:22px}
.bench-title{margin-bottom:0}
dialog h2{font-size:clamp(26px,2.8vw,40px);line-height:1.15}
@media(max-width:760px){.chapter h2,.bench-title{font-size:27px;margin-bottom:12px}.bench-title{margin-bottom:0}dialog h2{font-size:24px}}
.bom-sheet{margin:14px 0 4px}
.bom-sheet a{display:inline-flex;align-items:center;gap:.5em;padding:11px 18px;border:1px solid #cdbfe0;border-radius:99px;background:#f6f1fc;font:12px monospace;color:#5c4780;text-decoration:none;transition:background .25s,border-color .25s}
.bom-sheet a:hover{background:#ece0fa;border-color:#b49ddb}

/* Step 5 carries a field-fix notice: the badge drains its cell unless a switch is added. */
.disclaimer{display:block;margin:4px 0 18px;padding:12px 15px;border:0;border-left:3px solid #e0a83c;border-radius:0 6px 6px 0;background:#fdf4e3;color:#6b4e18;font:12px/1.5 Arial,Helvetica,sans-serif;text-align:left;cursor:pointer;transition:background .25s}
.disclaimer:hover,.disclaimer:focus-visible{background:#faead0}
@media(max-width:760px){.disclaimer{font-size:11.5px;padding:10px 12px;margin-bottom:12px}}

/* The finale footer carries the emulator's controls in short form. */
.finale footer{display:block;bottom:56px;color:#6f6680}
.emu-help p{margin:0 0 5px;font:10px/1.7 monospace;letter-spacing:.02em}
.emu-help p:last-child{margin-bottom:0;color:#8c8499}
.emu-help kbd{display:inline-block;min-width:1.5em;padding:1px 5px;margin:0 1px;border:1px solid #cfc6dc;border-radius:4px;background:#f6f2fb;font:inherit;color:#5b5069;text-align:center}
@media(max-width:760px){.finale footer{bottom:40px;padding:7px 0;background:#fffffff2;backdrop-filter:blur(6px)}.emu-help .emu-note{display:none}.emu-help p{font-size:9px;line-height:1.55}.emu-help kbd{padding:0 3px}}

/* Four header links: the short labels come in before they would crowd the wordmark. */
@media(max-width:900px){.header-link .hl-lg{display:none}.header-link .hl-sm{display:inline}.header-links{gap:12px}.header-link{font-size:11px}}
@media(max-width:760px){.header-links{gap:10px}.header-link{font-size:9.5px}}

/* Step details: a plain block on desktop, a fold-out on phones so the badge keeps the screen. */
details.instruction>summary{list-style:none;font-size:15px;font-weight:600;cursor:default}
details.instruction>summary::-webkit-details-marker{display:none}
@media(max-width:760px){
 details.instruction>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
 details.instruction>summary::after{content:'';width:7px;height:7px;flex:none;border-right:1.6px solid #9b8bb5;border-bottom:1.6px solid #9b8bb5;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
 details.instruction[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
}

/* Phones: dragging parts and swiping should never start a text selection or a long-press callout. */
@media(max-width:760px){
 body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 #detail,#part-detail,#cable-detail,#settings-json{-webkit-user-select:text;user-select:text}
}

details.emu-help>summary{list-style:none;font:10px/1.7 monospace;letter-spacing:.06em;text-transform:uppercase;color:#8c8499;cursor:default}
details.emu-help>summary::-webkit-details-marker{display:none}
@media(max-width:760px){
 details.emu-help>summary{cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:9px}
 details.emu-help>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid #9b8bb5;border-bottom:1.5px solid #9b8bb5;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
 details.emu-help[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
 details.emu-help>p:first-of-type{margin-top:7px}
}

/* The test step carries a checklist: it has to fit above the badge on a phone. */
@media(max-width:760px){
 .checks{margin-top:12px;gap:5px;font-size:11.5px}
 .checks label{gap:8px;line-height:1.35}
 .checks input{width:14px;height:14px}
 .small-note{font-size:10px;line-height:1.5;margin-top:10px}
}

body.inspecting #finished .copy{z-index:12}
#finished .copy>*{transition:opacity .45s ease}
body.inspecting #finished .copy>:not(.final-controls){opacity:0;pointer-events:none}
body.inspecting #finished .final-controls{position:fixed;left:0;right:0;bottom:46px;margin:0;display:flex;justify-content:center;z-index:15}
body.inspecting #finished .final-controls .text-button{display:none}
body.inspecting #inspect{height:56px;padding:0 34px;font-size:19px;gap:9px;box-shadow:0 10px 30px #2a1f3a30}
body.inspecting footer,body.inspecting .step-nav{opacity:0;pointer-events:none}
/* Explore in 3D on a phone: the badge takes the screen, so only the way out stays on top of it. */
@media(max-width:760px){
 body.inspecting footer,body.inspecting .step-nav,body.inspecting .bottom-bar{opacity:0;pointer-events:none}
 body.inspecting #finished .copy{z-index:15}
 body.inspecting #finished .copy>:not(.final-controls){opacity:0;pointer-events:none}
 body.inspecting #finished .final-controls{position:fixed;left:0;right:0;bottom:30px;margin:0;display:flex;justify-content:center;z-index:15}
 body.inspecting #finished .final-controls .text-button{display:none}
 body.inspecting #inspect{box-shadow:0 10px 30px #2a1f3a45}
}

/* Phone chrome: no parts picker, no dot rail — the bottom bar becomes a floating stepper. */
.step-jump{display:none}
@media(max-width:760px){
 body.on-bench .parts-picker,.parts-picker,.step-nav{display:none!important}
 .bottom-bar{left:10px;right:10px;bottom:10px;height:auto;padding:9px 9px 9px 15px;border-radius:17px;background:#fffffff5;backdrop-filter:blur(12px);box-shadow:0 7px 24px #2a1f3a1f;border:1px solid #efeaf5;
  display:grid;grid-template-columns:1fr auto auto;grid-template-areas:'label label jump' 'prog count jump';align-items:center;gap:4px 10px}
 #step-label{grid-area:label;font-size:8.5px}
 .progress-track{grid-area:prog;margin:0}
 #step-count{grid-area:count;font-size:8.5px}
 .step-jump{grid-area:jump;display:flex;gap:7px}
 .step-jump button{width:36px;height:36px;border-radius:50%;border:0;background:#ebe3f8;color:#4a3a62;display:grid;place-items:center;padding:0}
 .step-jump button:active{background:#ddd0f2}
 .finale footer{bottom:76px}
 body.on-bench .bom-cta{bottom:80px}
}

@media(max-width:760px){
 #fps{top:auto;bottom:74px;right:14px;font-size:9px}
 .finale footer{bottom:96px}
}
@media(max-width:760px){body.inspecting #fps{opacity:0}}

/* The bottom bar's left half is a button: on phones it opens a drawer of every step. */
.step-open{display:flex;align-items:center;gap:30px;flex:1;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:default}
#step-drawer{position:fixed;z-index:13;left:10px;right:10px;bottom:78px;display:flex;flex-direction:column;padding:7px;border-radius:17px;background:#fffffff7;backdrop-filter:blur(14px);border:1px solid #efeaf5;box-shadow:0 14px 40px #2a1f3a24;max-height:64vh;overflow:auto;overscroll-behavior:contain}
#step-drawer[hidden]{display:none}
#step-drawer button{display:flex;align-items:center;gap:12px;padding:11px 12px;border:0;border-radius:11px;background:none;font:10px/1 monospace;letter-spacing:.06em;color:#5f5670;text-align:left}
#step-drawer button b{font-size:10px;color:#a596bd;min-width:18px}
#step-drawer button.now{background:#f1eafc;color:#3c2f52}
#step-drawer button.now b{color:#7b5fb0}
@media(max-width:760px){
 .step-open{cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-areas:'label label' 'prog count';gap:4px 10px;align-items:center}
 .bottom-bar{grid-template-columns:1fr auto;grid-template-areas:'open jump'}
 .step-open{grid-area:open}
 .chapter:not(.hero) .copy{top:88px}
}
@media(min-width:761px){#step-drawer{display:none}}

/* On a phone the controls belong to Explore in 3D, not to the story page. */
@media(max-width:760px){
 .finale footer{opacity:0;pointer-events:none;transition:opacity .4s ease}
 body.inspecting .finale footer{opacity:1;pointer-events:auto;position:fixed;left:7%;right:7%;bottom:100px;z-index:15}
 body.inspecting details.emu-help>summary{color:#6f6680}
}

/* Render settings and the frame counter are for #debug only. */
#toggle-render,#render-panel,#fps{display:none}
body.debug #toggle-render{display:block}
body.debug #fps{display:inline}

.burger{display:none}
@media(max-width:760px){
 .step-open{grid-template-columns:1fr auto auto;grid-template-areas:'label label burger' 'prog count burger'}
 .burger{grid-area:burger;display:grid;gap:3.5px;align-content:center;justify-items:end;width:26px;height:36px;padding-left:9px;border-left:1px solid #eee7f4}
 .burger i{display:block;width:15px;height:1.6px;border-radius:2px;background:#8b81a0;transition:transform .3s ease,opacity .25s ease}
 body.drawer-open .burger i:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
 body.drawer-open .burger i:nth-child(2){opacity:0}
 body.drawer-open .burger i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}
}

/* Explore on a phone: controls fold into a pill bottom-left, the way out is a round button bottom-right. */
@media(max-width:760px){
 body.inspecting .finale footer{position:fixed;left:14px;right:auto;bottom:20px;width:auto;max-width:76vw;padding:0;background:none;backdrop-filter:none;z-index:15}
 body.inspecting details.emu-help{padding:11px 17px;border:1px solid #efeaf5;border-radius:20px;background:#fffffff2;backdrop-filter:blur(12px);box-shadow:0 8px 24px #2a1f3a1f}
 body.inspecting details.emu-help:not([open]){border-radius:999px;padding:10px 17px}
 /* The pill is pinned to the bottom, so it unfolds upward: the chevron points that way. */
 body.inspecting details.emu-help>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
 body.inspecting details.emu-help[open]>summary::after{transform:rotate(45deg) translate(-2px,-2px)}
 body.inspecting #finished .final-controls{left:auto;right:14px;bottom:14px;justify-content:flex-end}
 body.inspecting #inspect{width:58px;height:58px;padding:0;border-radius:50%;background:#e7dff7;color:#3b3053;font:21px/1 Arial,Helvetica,sans-serif;box-shadow:0 8px 24px #2a1f3a26}
 body.inspecting #inspect span{display:none}
}