:root{
  --ink:#4f4650;
  --muted:#786f75;
  --paper:#fbf5e8;
  --cream:#fffaf0;
  --pink:#e98aa5;
  --pink-deep:#c76382;
  --mint:#8bc6b4;
  --mint-deep:#5c9b8f;
  --aqua:#83bfc0;
  --aqua-deep:#4f8f8d;
  --lavender:#b7a2cf;
  --lavender-deep:#8f76ad;
  --gold:#e2bd5c;
  --gold-deep:#b58a2b;
  --shadow:0 18px 45px rgba(93,72,65,.13);
  --soft-shadow:0 8px 22px rgba(93,72,65,.12);
  --header-h:70px;
  font-family:ui-rounded,"Avenir Next","Nunito","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 15% 5%,rgba(233,138,165,.12),transparent 28rem),radial-gradient(circle at 88% 12%,rgba(139,198,180,.18),transparent 30rem),linear-gradient(180deg,#fffaf1 0%,var(--paper) 58%,#f6eddc 100%)}
button,a,input{font:inherit} button{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(79,143,141,.48);outline-offset:3px}
.site-bar{position:sticky;z-index:40;top:0;min-height:var(--header-h);padding:10px clamp(14px,3vw,34px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:rgba(255,250,240,.91);border-bottom:1px solid rgba(143,118,90,.15);backdrop-filter:blur(18px)}
.home-link{justify-self:start;display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;line-height:1.05}
.home-link strong{display:block;font-size:.94rem}.home-link small{display:block;margin-top:3px;color:var(--muted);font-size:.7rem}.home-arrow{font-size:1.35rem}
.mini-brand{border:0;background:none;display:flex;align-items:center;gap:8px;font-weight:850;font-size:1rem;cursor:pointer}.brand-gear{color:var(--gold-deep);font-size:1.18rem}
.site-actions{justify-self:end;display:flex;gap:5px}.quiet-button,.back-button{border:0;background:transparent;border-radius:999px;padding:9px 11px;font-weight:750;cursor:pointer}.quiet-button:hover,.back-button:hover{background:rgba(131,191,192,.13)}
main{width:min(1180px,calc(100% - 28px));margin:0 auto}.view{display:none;padding:clamp(24px,4vw,50px) 0 70px}.view.is-active{display:block}
.eyebrow,.view-kicker,.bench-label{color:var(--aqua-deep);font-size:.73rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}
.entrance-view>.eyebrow{text-align:center}.entrance-heading{text-align:center;margin:4px auto 18px}.entrance-heading h1{margin:3px 0 2px;font-size:clamp(2.65rem,7vw,5.7rem);letter-spacing:-.055em;line-height:.94;color:#5c5159}.entrance-heading p{margin:12px 0 0;font-size:clamp(1rem,2vw,1.35rem);color:var(--muted);font-weight:650}
.room-scene{position:relative;overflow:hidden;height:clamp(390px,53vw,590px);border:1px solid rgba(113,99,92,.11);border-radius:34px;background:linear-gradient(180deg,#f6eecf 0 66%,transparent 66%),linear-gradient(165deg,#d7ad80 0 52%,#c18f64 52% 100%);box-shadow:var(--shadow);isolation:isolate}
.room-scene:after{content:"";position:absolute;z-index:-1;left:0;right:0;top:66%;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent 35%,rgba(91,57,36,.07)),repeating-linear-gradient(90deg,rgba(94,62,42,.06) 0 2px,transparent 2px 85px)}
.wall-panel{position:absolute;border-radius:26px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.24)}.wall-panel-a{width:21%;height:37%;left:5%;top:7%}.wall-panel-b{width:27%;height:31%;right:4%;top:9%}
.pegboard-decoration{position:absolute;left:31%;top:7%;width:32%;height:29%;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-content:center;padding:22px 34px;border-radius:20px;background:#dce9d5;border:7px solid #d4ad7e;box-shadow:inset 0 0 0 2px rgba(255,255,255,.48),var(--soft-shadow)}
.pegboard-decoration i{width:7px;height:7px;border-radius:50%;background:#9eb09c;justify-self:center}.shelf{position:absolute;height:10px;background:#ca9367;border-radius:10px;box-shadow:0 6px 0 rgba(120,75,47,.08)}.shelf-top{width:18%;right:7%;top:34%}.shelf-low{width:17%;left:7%;top:37%}
.world-prop,.scene-character{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 8px rgba(84,57,44,.13))}.scene-table{width:54%;left:26%;bottom:7%;z-index:3}.scene-train{width:27%;left:41%;bottom:21%;z-index:5;transform:rotate(-1deg)}.scene-music-box{width:16.5%;left:67%;bottom:24%;z-index:5;transform:rotate(2deg)}.scene-blocks{width:13%;right:5%;top:23%;z-index:2}.scene-wagon{width:17%;left:5%;bottom:5%;z-index:4}.scene-clock{width:10.5%;right:10%;top:5%;z-index:2}.scene-character{height:71%;width:auto;left:8%;bottom:4%;z-index:6}
.loose-parts{position:absolute;z-index:7;left:31%;bottom:19%;display:flex;gap:4px;align-items:end;transform:rotate(-3deg)}
.toy-gear{--gear:#e98aa5;--gear-edge:#c76382;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:rgba(79,70,80,.68);font-size:.73rem;font-weight:950;background:radial-gradient(circle,#f7d7c2 0 14%,var(--gear-edge) 15% 20%,transparent 21%),repeating-conic-gradient(from 7deg,var(--gear) 0 10deg,var(--gear-edge) 10deg 15deg,var(--gear) 15deg 25deg);border:3px solid rgba(255,255,255,.48);box-shadow:inset 0 -6px 8px rgba(86,61,60,.12),inset 0 5px 7px rgba(255,255,255,.38),0 5px 8px rgba(72,51,46,.18)}
.gear-pink{--gear:var(--pink);--gear-edge:var(--pink-deep)}.gear-mint{--gear:var(--mint);--gear-edge:var(--mint-deep)}.gear-lavender{--gear:var(--lavender);--gear-edge:var(--lavender-deep)}.gear-cream{--gear:#f4e9c7;--gear-edge:#d5b869}.loose-parts .toy-gear:nth-child(2){width:48px;height:48px}.loose-parts .toy-gear:nth-child(3){width:40px;height:40px}
.speech-bubble{position:absolute;z-index:9;left:4%;top:5%;max-width:250px;padding:14px 17px;border-radius:20px 20px 20px 7px;background:rgba(255,250,240,.94);box-shadow:var(--soft-shadow)}.speech-bubble strong,.speech-bubble span{display:block}.speech-bubble strong{font-size:.94rem}.speech-bubble span{margin-top:3px;color:var(--muted);font-size:.82rem;line-height:1.3}
.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 0}.mode-card{min-height:116px;padding:17px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;text-align:left;border:1px solid rgba(91,72,65,.1);border-radius:24px;background:rgba(255,250,240,.78);box-shadow:0 7px 20px rgba(93,72,65,.07);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.mode-card:hover{transform:translateY(-3px);box-shadow:var(--soft-shadow);border-color:rgba(91,72,65,.18)}
.mode-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;font-size:1.55rem;background:#f1d6df;color:var(--pink-deep)}.mode-tinker .mode-icon{background:#dcebe4;color:var(--mint-deep)}.mode-machines .mode-icon{background:#e7dff0;color:var(--lavender-deep)}.mode-copy strong,.mode-copy small{display:block}.mode-copy strong{font-size:1.08rem}.mode-copy small{margin-top:5px;color:var(--muted);font-size:.79rem;line-height:1.35}.mode-arrow{font-size:1.25rem}.entrance-note{text-align:center;margin:12px 0 0;color:var(--muted);font-size:.78rem}
.view-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.back-button{margin-left:-10px}.section-heading{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:24px}.section-heading h2,.simple-card h2,.sheet-dialog h2,.mission-brief h2{margin:5px 0 6px;letter-spacing:-.035em}.section-heading h2{font-size:clamp(2rem,5vw,3.7rem)}.section-heading p{max-width:680px;margin:0;color:var(--muted);line-height:1.55}.bench-badge{display:flex;align-items:center}.bench-badge .toy-gear+.toy-gear{margin-left:-12px;margin-top:24px}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mission-card{position:relative;overflow:hidden;min-height:176px;padding:19px;display:flex;flex-direction:column;text-align:left;border:1px solid rgba(91,72,65,.1);border-radius:24px;background:rgba(255,250,240,.9);box-shadow:0 7px 19px rgba(93,72,65,.06);cursor:pointer;transition:transform .17s ease,box-shadow .17s ease}.mission-card:hover{transform:translateY(-2px);box-shadow:var(--soft-shadow)}.mission-number{font-size:.72rem;font-weight:900;color:var(--aqua-deep);letter-spacing:.09em;text-transform:uppercase}.mission-card h3{margin:12px 0 5px;font-size:1.15rem}.mission-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.4;max-width:72%}.mission-object{position:absolute;right:-4px;bottom:-4px;width:38%;max-height:92px;object-fit:contain;filter:drop-shadow(0 7px 6px rgba(80,52,45,.12))}.mission-card:nth-child(4n+2){background:#f6edf2}.mission-card:nth-child(4n+3){background:#edf5f0}.mission-card:nth-child(4n+4){background:#f1edf6}
.workbench-view{max-width:1080px;margin:0 auto}.mission-brief{position:relative;display:grid;grid-template-columns:82px 1fr 130px;gap:15px;align-items:center;min-height:135px;margin-bottom:15px;padding:16px 20px;border-radius:24px;background:rgba(255,250,240,.88);box-shadow:var(--soft-shadow);overflow:hidden}.brief-character{align-self:end;width:74px;height:105px;object-fit:contain;object-position:bottom}.mission-brief h2{font-size:clamp(1.45rem,4vw,2.35rem)}.mission-brief p{margin:0;color:var(--muted)}.brief-object{width:125px;height:105px;object-fit:contain}
.workbench-shell{border-radius:27px;background:#fffaf0;border:1px solid rgba(91,72,65,.11);box-shadow:var(--shadow);overflow:hidden}.board-topline{height:45px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-size:.7rem;font-weight:900;letter-spacing:.12em;color:#7c6c66}.board-status{letter-spacing:0;text-transform:none;font-weight:700;color:var(--mint-deep)}
.machine-board{position:relative;height:470px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.03)),repeating-linear-gradient(0deg,rgba(61,98,94,.025) 0 2px,transparent 2px 23px),#83bfc0;box-shadow:inset 0 0 0 8px rgba(80,123,115,.16),inset 0 0 35px rgba(54,100,96,.18)}.board-stars{position:absolute;color:rgba(226,189,92,.8);font-size:2rem;left:6%;top:9%;pointer-events:none}.board-stars span{position:absolute;left:780px;top:290px;font-size:1.4rem}
.peg-grid{position:absolute;inset:48px 110px;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(5,1fr);place-items:center}.peg-dot{width:14px;height:14px;border-radius:50%;background:#6fa7a5;border:2px solid rgba(255,255,255,.4);box-shadow:inset 0 2px 3px rgba(55,86,84,.25)}
.preview-fixed{position:absolute}.fixed-crank{left:7%;top:44%;width:92px;height:95px}.crank-hub{position:absolute;width:39px;height:39px;left:25px;top:33px;border-radius:50%;background:#e6c66d;border:5px solid #c39b3d;box-shadow:inset 0 5px 7px rgba(255,255,255,.35)}.crank-arm{position:absolute;width:56px;height:10px;left:44px;top:30px;background:#d7b04d;border-radius:8px;transform:rotate(-38deg);transform-origin:left center}.crank-knob{position:absolute;z-index:2;width:25px;height:34px;left:82px;top:5px;border-radius:12px;background:var(--pink);border:4px solid var(--pink-deep)}.fixed-crank small{position:absolute;left:25px;top:80px;color:#407d79;font-weight:850}
.output-dock{right:4%;top:23%;width:185px;height:245px;display:grid;place-items:center}.output-dock img{max-width:180px;max-height:190px;filter:drop-shadow(0 10px 7px rgba(55,70,67,.16))}.output-axle{position:absolute;bottom:18px;width:32px;height:32px;border-radius:50%;background:#e5c66c;border:6px solid #bb9135}
.preview-message{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);min-width:330px;padding:12px 16px;border-radius:15px;background:rgba(255,250,240,.86);text-align:center;color:#546964}.preview-message strong,.preview-message span{display:block}.preview-message span{font-size:.73rem;margin-top:2px;color:#6b7774}
.parts-tray{min-height:112px;padding:13px 16px;display:flex;gap:9px;align-items:center;background:#f6ecd9;border-top:1px solid rgba(91,72,65,.08)}.tray-label{font-size:.7rem;font-weight:900;letter-spacing:.11em;color:#806d61;margin-right:4px}.part-preview{border:0;background:transparent;padding:2px 4px;opacity:1}.part-preview .toy-gear{width:55px;height:55px;margin:auto}.part-preview small{display:block;margin-top:5px;font-size:.63rem;color:var(--muted)}.tray-spacer{flex:1}
.workbench-action,.turn-button,.primary-button{border:0;border-radius:14px;min-height:44px;padding:0 16px;font-weight:850}.workbench-action{background:#fff8eb;color:#72625d}.turn-button,.primary-button{background:var(--pink);color:#fff;box-shadow:inset 0 -3px 0 rgba(127,52,76,.16)}.workbench-action:disabled,.turn-button:disabled{opacity:.58}
.simple-view{max-width:820px;margin:0 auto}.simple-card{margin-top:50px;padding:clamp(28px,5vw,55px);border-radius:32px;text-align:center;background:rgba(255,250,240,.9);box-shadow:var(--shadow)}.simple-card h2{font-size:clamp(2rem,5vw,3.6rem)}.simple-card p{max-width:570px;margin:0 auto 22px;color:var(--muted);line-height:1.55}
.simple-art{position:relative;height:230px;max-width:470px;margin:0 auto 15px}.simple-art img{width:70%;height:100%;object-fit:contain}.simple-art .toy-gear{position:absolute;right:12%;bottom:20%}.simple-art .toy-gear:nth-of-type(2){right:24%;bottom:10%;width:45px;height:45px}
.saved-machine-placeholder{position:relative;height:200px;margin-bottom:20px}.saved-machine-placeholder img{height:150px;max-width:50%;object-fit:contain;position:absolute;left:50%;top:20px;transform:translateX(-50%)}.saved-machine-placeholder .toy-gear{position:absolute;left:23%;top:35%}.saved-machine-placeholder .gear-cream{left:auto;right:22%;top:49%}.primary-button{cursor:pointer;padding:0 22px}
.sheet-dialog{width:min(620px,calc(100% - 28px));padding:0;border:0;border-radius:28px;background:#fffaf0;color:var(--ink);box-shadow:0 30px 80px rgba(61,48,45,.25)}.sheet-dialog::backdrop{background:rgba(69,59,62,.38);backdrop-filter:blur(3px)}.sheet-dialog form{position:relative;padding:30px}.sheet-dialog h2{font-size:2rem}.dialog-close{position:absolute;right:18px;top:16px;width:38px;height:38px;border:0;border-radius:50%;background:#f1e7d7;font-size:1.5rem;cursor:pointer}
.help-steps{display:grid;gap:10px;margin:18px 0 25px}.help-steps>div{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start;padding:12px;border-radius:16px;background:#f7efdf}.help-steps>div>span{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#dcebe4;color:var(--aqua-deep);font-weight:900}.help-steps p{margin:1px 0;color:var(--muted);line-height:1.4}.help-steps strong{color:var(--ink)}
.setting-row{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:15px 5px;border-bottom:1px solid #eee2d1}.setting-row span strong,.setting-row span small{display:block}.setting-row span small{margin-top:3px;color:var(--muted)}.setting-row input{width:23px;height:23px;accent-color:var(--mint-deep)}#settings-form>.primary-button{width:100%;margin-top:22px}
body.hide-gear-numbers .toy-gear{font-size:0}body.hide-peg-grid .peg-dot{opacity:0}
@media (max-width:860px){:root{--header-h:64px}main{width:min(100% - 20px,760px)}.site-bar{grid-template-columns:1fr auto;padding:8px 12px}.mini-brand{display:none}.action-label{display:none}.quiet-button{padding:9px}.room-scene{height:480px}.scene-character{height:61%;left:3%}.scene-table{width:66%;left:23%;bottom:8%}.scene-train{width:31%;left:42%;bottom:22%}.scene-music-box{width:18%;left:70%;bottom:24%}.scene-wagon{width:18%;left:3%}.speech-bubble{left:2%;top:3%;max-width:210px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:92px}.mission-grid{grid-template-columns:repeat(2,1fr)}.machine-board{height:430px}.peg-grid{inset:48px 80px}.output-dock{right:2%;width:150px}.output-dock img{max-width:145px}.parts-tray{flex-wrap:wrap}.tray-spacer{display:none}.workbench-action,.turn-button{margin-left:auto}.mission-brief{grid-template-columns:65px 1fr 92px}.brief-character{width:60px;height:90px}.brief-object{width:88px;height:85px}}
@media (max-width:560px){.view{padding-top:20px}.home-link strong{font-size:.82rem}.home-link small{font-size:.63rem}.site-actions{gap:0}.quiet-button{font-size:.78rem}.entrance-heading h1{font-size:3rem}.room-scene{height:390px;border-radius:24px}.pegboard-decoration{width:39%;left:29%;height:25%;gap:8px;padding:13px}.scene-character{height:49%;left:-2%;bottom:5%}.scene-table{width:83%;left:15%;bottom:3%}.scene-train{width:40%;left:37%;bottom:17%}.scene-music-box{width:25%;left:68%;bottom:18%}.scene-blocks{width:18%;right:1%;top:27%}.scene-wagon{width:23%;left:0;bottom:2%}.scene-clock{width:14%;right:6%}.speech-bubble{top:2%;left:2%;max-width:165px;padding:10px 11px}.speech-bubble strong{font-size:.8rem}.speech-bubble span{font-size:.68rem}.loose-parts{left:25%;bottom:17%}.loose-parts .toy-gear{width:39px;height:39px}.loose-parts .toy-gear:nth-child(2){width:34px;height:34px}.loose-parts .toy-gear:nth-child(3){width:30px;height:30px}.mode-card{grid-template-columns:auto 1fr auto}.mode-icon{width:46px;height:46px}.mission-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start}.bench-badge{display:none}.mission-card{min-height:145px}.view-kicker{display:none}.mission-brief{grid-template-columns:52px 1fr 76px;padding:12px}.brief-character{width:48px;height:75px}.brief-object{width:70px;height:65px}.mission-brief p{font-size:.78rem}.machine-board{height:390px}.peg-grid{inset:45px 45px;grid-template-columns:repeat(7,1fr)}.fixed-crank{left:2%;top:45%;transform:scale(.8)}.output-dock{right:-2%;top:27%;width:120px;height:200px}.output-dock img{max-width:115px;max-height:130px}.preview-message{min-width:0;width:76%;bottom:18px;font-size:.8rem}.preview-message span{display:none}.parts-tray{gap:3px;padding:10px 7px}.tray-label{width:100%;margin-bottom:4px}.part-preview{width:23%}.part-preview .toy-gear{width:45px;height:45px}.workbench-action{display:none}.turn-button{width:100%;margin-top:7px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{transition:none!important;animation:none!important}


/* =========================================================
   PASS 2 — INTERACTIVE MECHANICAL WORKBENCH
   ========================================================= */

.machine-board{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
}
.machine-board.is-dragging{cursor:grabbing}
.peg-grid{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(65,123,118,.52) 0 2px,rgba(255,255,255,.35) 2.2px 3px,transparent 3.2px);
  background-size:var(--peg-step,16px) var(--peg-step,16px);
  background-position:var(--peg-offset-x,0px) var(--peg-offset-y,0px);
  opacity:.82;
}
body.hide-peg-grid .peg-grid{opacity:0}
.mesh-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:3;
}
.mesh-line{
  stroke:rgba(244,238,196,.72);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:4 9;
}
.mesh-line.is-powered{stroke:rgba(255,245,188,.96);filter:drop-shadow(0 0 4px rgba(249,232,133,.62))}
.mesh-line.is-jammed{stroke:rgba(196,92,96,.92);stroke-dasharray:3 6}
.component-layer{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.gear-component{
  --component-size:60px;
  --angle:0deg;
  --gear:#e98aa5;
  --gear-edge:#c76382;
  position:absolute;
  left:0;
  top:0;
  width:var(--hit-size,52px);
  height:var(--hit-size,52px);
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  border-radius:50%;
  background:transparent;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  z-index:10;
}
.gear-component:active{cursor:grabbing}
.gear-component.fixed{
  cursor:default;
  pointer-events:none;
}
.gear-visual{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--component-size);
  height:var(--component-size);
  transform:translate(-50%,-50%) rotate(var(--angle));
  border-radius:50%;
  color:rgba(79,70,80,.72);
  display:grid;
  place-items:center;
  font-size:clamp(.55rem,1.2vw,.78rem);
  font-weight:950;
  line-height:1;
  background:
    radial-gradient(circle,#f7d7c2 0 13%,var(--gear-edge) 14% 20%,transparent 21%),
    repeating-conic-gradient(from 6deg,var(--gear) 0 9deg,var(--gear-edge) 9deg 13deg,var(--gear) 13deg 21deg);
  border:clamp(2px,.45vw,4px) solid rgba(255,255,255,.52);
  box-shadow:
    inset 0 -6px 9px rgba(86,61,60,.13),
    inset 0 5px 8px rgba(255,255,255,.38),
    0 6px 9px rgba(72,51,46,.19);
  will-change:transform;
}
.gear-component[data-teeth="12"]{--gear:var(--pink);--gear-edge:var(--pink-deep)}
.gear-component[data-teeth="18"]{--gear:var(--mint);--gear-edge:var(--mint-deep)}
.gear-component[data-teeth="24"]{--gear:var(--lavender);--gear-edge:var(--lavender-deep)}
.gear-component[data-teeth="36"]{--gear:#f4e9c7;--gear-edge:#d5b869}
.gear-component.driver .gear-visual{--gear:#e7c65f;--gear-edge:#b88f2e}
.gear-component.output .gear-visual{--gear:#f4e9c7;--gear-edge:#cfae54}
.gear-component.is-meshed .gear-visual{
  box-shadow:
    inset 0 -6px 9px rgba(86,61,60,.13),
    inset 0 5px 8px rgba(255,255,255,.38),
    0 0 0 4px rgba(242,239,186,.44),
    0 7px 12px rgba(72,51,46,.18);
}
.gear-component.is-powered .gear-visual{
  box-shadow:
    inset 0 -6px 9px rgba(86,61,60,.13),
    inset 0 5px 8px rgba(255,255,255,.38),
    0 0 0 5px rgba(255,239,144,.64),
    0 0 20px rgba(255,231,111,.34),
    0 7px 12px rgba(72,51,46,.18);
}
.gear-component.is-jammed .gear-visual{
  box-shadow:
    inset 0 -6px 9px rgba(86,61,60,.13),
    inset 0 5px 8px rgba(255,255,255,.38),
    0 0 0 5px rgba(196,92,96,.62),
    0 0 18px rgba(196,92,96,.28);
}
.gear-component.is-dragging{
  z-index:40;
  cursor:grabbing;
}
.gear-component.is-dragging .gear-visual{
  opacity:.9;
  filter:drop-shadow(0 12px 9px rgba(67,47,43,.2));
}
.gear-component.drop-good .gear-visual{
  box-shadow:0 0 0 6px rgba(225,241,207,.8),0 8px 14px rgba(72,51,46,.18);
}
.gear-component.drop-bad .gear-visual{
  box-shadow:0 0 0 6px rgba(202,91,96,.62),0 8px 14px rgba(72,51,46,.18);
}
.gear-label{
  pointer-events:none;
  text-shadow:0 1px rgba(255,255,255,.45);
}
body.hide-gear-numbers .gear-label{font-size:0}
.fixed-tag{
  pointer-events:none;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:calc(50% + var(--component-size)/2 + 8px);
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,250,240,.88);
  color:#4d7773;
  box-shadow:0 2px 8px rgba(65,69,65,.08);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}
.crank-attachment{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--component-size)*1.05);
  height:10px;
  transform-origin:0 50%;
  transform:rotate(var(--angle));
  pointer-events:none;
}
.crank-attachment:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:82%;
  height:clamp(6px,1vw,10px);
  border-radius:10px;
  background:#d5ad4c;
  transform:translateY(-50%);
  box-shadow:inset 0 2px rgba(255,255,255,.28);
}
.crank-attachment:after{
  content:"";
  position:absolute;
  right:-8%;
  top:50%;
  width:clamp(15px,2.2vw,24px);
  height:clamp(23px,3.2vw,34px);
  border-radius:12px;
  background:var(--pink);
  border:3px solid var(--pink-deep);
  transform:translateY(-50%);
  box-shadow:inset 0 3px rgba(255,255,255,.25);
}
.output-dock{
  position:absolute;
  right:auto;
  top:auto;
  width:170px;
  height:155px;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
  transform:translate(-50%,-92%);
}
.output-dock img{
  max-width:100%;
  max-height:130px;
  object-fit:contain;
  filter:drop-shadow(0 10px 7px rgba(55,70,67,.16));
}
.output-caption{
  pointer-events:none;
  position:absolute;
  left:50%;
  bottom:-4px;
  transform:translateX(-50%);
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,250,240,.87);
  color:#4d7773;
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.08em;
}
.board-tip{
  position:absolute;
  left:50%;
  bottom:15px;
  z-index:20;
  transform:translateX(-50%);
  width:min(470px,78%);
  padding:10px 14px;
  border-radius:15px;
  background:rgba(255,250,240,.88);
  color:#546964;
  text-align:center;
  box-shadow:0 4px 14px rgba(61,91,85,.11);
  pointer-events:none;
}
.board-tip strong,.board-tip span{display:block}
.board-tip strong{font-size:.82rem}
.board-tip span{margin-top:2px;font-size:.69rem;color:#6b7774}
.machine-board.feedback-bad{animation:board-nudge .18s ease 0s 2}
@keyframes board-nudge{
  0%,100%{box-shadow:inset 0 0 0 8px rgba(80,123,115,.16),inset 0 0 35px rgba(54,100,96,.18)}
  50%{box-shadow:inset 0 0 0 8px rgba(196,92,96,.35),inset 0 0 35px rgba(196,92,96,.18)}
}
.parts-tray .part-preview{
  border-radius:14px;
  cursor:grab;
  touch-action:none;
  transition:background .15s ease,transform .15s ease;
}
.parts-tray .part-preview:hover{background:rgba(255,255,255,.42)}
.parts-tray .part-preview:active{cursor:grabbing;transform:translateY(1px)}
.parts-tray .part-preview:focus-visible{background:rgba(255,255,255,.54)}
.workbench-action,.turn-button{cursor:pointer}
.workbench-action:disabled{cursor:default}
.stop-button{background:#f1e3d6;color:#7e655e}
.turn-button{min-width:92px}
.board-status.status-powered{color:#4e8e74}
.board-status.status-jammed{color:#aa515b}
.board-status.status-building{color:#6b7774}

@media (max-width:860px){
  .output-dock{width:145px;height:135px}
  .output-dock img{max-height:110px}
}
@media (max-width:560px){
  .parts-tray .part-preview{width:23%;min-height:65px}
  .parts-tray .part-preview .toy-gear{pointer-events:none}
  .stop-button{display:block;width:49%;margin:7px 0 0 0}
  .turn-button{width:49%;margin:7px 0 0 auto}
  .board-tip{width:84%;bottom:10px;padding:8px 10px}
  .board-tip span{display:none}
  .output-dock{width:105px;height:105px}
  .output-dock img{max-height:86px}
}

/* Pass 2 mobile control correction: all mechanical controls remain available. */
@media (max-width:560px){
  .undo-button,.reset-button{
    display:block;
    width:49%;
    margin:7px 0 0 0;
  }
  .reset-button{margin-left:auto}
  .stop-button{margin-left:0}
}


/* =========================================================
   PASS 3 — FINAL PNG MECHANICAL ART + SEGMENTED OUTPUTS
   ========================================================= */

.gear-image-visual{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible;
}
.gear-png{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 5px 5px rgba(72,51,46,.18));
}
.gear-image-visual .gear-label{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
}
.gear-component.is-meshed .gear-image-visual,
.gear-component.is-powered .gear-image-visual,
.gear-component.is-jammed .gear-image-visual,
.gear-component.drop-good .gear-image-visual,
.gear-component.drop-bad .gear-image-visual{
  box-shadow:none !important;
}
.gear-component.is-meshed .gear-png{filter:drop-shadow(0 0 5px rgba(246,235,158,.72)) drop-shadow(0 5px 5px rgba(72,51,46,.16))}
.gear-component.is-powered .gear-png{filter:drop-shadow(0 0 8px rgba(255,231,111,.75)) drop-shadow(0 5px 5px rgba(72,51,46,.16))}
.gear-component.is-jammed .gear-png{filter:drop-shadow(0 0 8px rgba(196,92,96,.8)) drop-shadow(0 5px 5px rgba(72,51,46,.16))}
.gear-component.drop-good .gear-png{filter:drop-shadow(0 0 9px rgba(225,241,207,.95))}
.gear-component.drop-bad .gear-png{filter:drop-shadow(0 0 9px rgba(202,91,96,.88))}
.crank-png{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--component-size)*1.55);
  height:auto;
  transform-origin:0% 50%;
  transform:translateY(-50%) rotate(var(--angle));
  pointer-events:none;
  object-fit:contain;
  filter:drop-shadow(0 4px 4px rgba(72,51,46,.15));
}
.output-dock{
  width:190px;
  height:170px;
  overflow:visible;
}
.machine-output{
  position:relative;
  width:100%;
  height:100%;
  transform-origin:center bottom;
  filter:drop-shadow(0 8px 7px rgba(55,70,67,.14));
}
.machine-output img{
  position:absolute;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.machine-output .machine-body{
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.machine-moving{will-change:transform}
.machine-output-music-box .output-turntable{
  width:37%;
  left:31.5%;
  top:4%;
  transform:rotate(var(--output-angle));
}
.machine-output-toy-train .train-wheel{
  width:25%;
  bottom:4%;
  transform:rotate(var(--output-angle));
}
.machine-output-toy-train .train-wheel-a{left:26%}
.machine-output-toy-train .train-wheel-b{right:8%}
.machine-output-toy-train .machine-rod{
  width:47%;
  left:39%;
  bottom:15%;
  transform:rotate(calc(var(--output-angle) * .03));
  transform-origin:left center;
}
.machine-output-clock .clock-hand{
  width:17%;
  height:47%;
  left:41.5%;
  top:13%;
  transform-origin:50% 86%;
  transform:rotate(var(--output-angle));
  object-fit:contain;
}
.machine-output-wagon .wagon-wheel{
  width:23%;
  bottom:2%;
  transform:rotate(var(--output-angle));
}
.machine-output-wagon .wagon-wheel-a{left:19%}
.machine-output-wagon .wagon-wheel-b{right:12%}
.output-caption{bottom:-10px}
@media (max-width:860px){
  .output-dock{width:160px;height:145px}
}
@media (max-width:560px){
  .output-dock{width:118px;height:108px}
}

.tray-gear-png{
  display:block;
  width:58px;
  height:58px;
  object-fit:contain;
  margin:0 auto;
  pointer-events:none;
  filter:drop-shadow(0 4px 4px rgba(72,51,46,.15));
}
@media (max-width:560px){
  .tray-gear-png{width:47px;height:47px}
}


/* =========================================================
   PASS 4 — MISSION PROGRESSION AND SPECIAL INTERACTIONS
   ========================================================= */

.mode-card:disabled{
  cursor:default;
  opacity:.63;
}
.mode-card:disabled:hover{transform:none;box-shadow:0 7px 20px rgba(93,72,65,.07)}
.mode-card.is-locked .mode-arrow{opacity:.35}
.mission-card.is-complete{
  border-color:rgba(92,155,130,.28);
  background:#edf6ee;
}
.mission-card.is-complete .mission-number{color:#4e8e74}
.mission-card.is-locked{
  opacity:.55;
  cursor:default;
  filter:saturate(.65);
}
.mission-card.is-locked:hover{transform:none;box-shadow:0 7px 19px rgba(93,72,65,.06)}
.mission-special,
.mission-success{
  margin-bottom:15px;
  padding:14px 17px;
  border-radius:20px;
  background:rgba(255,250,240,.9);
  box-shadow:var(--soft-shadow);
}
.mission-special[hidden],
.mission-success[hidden]{display:none!important}
.mission-special{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.prediction-choices{display:flex;gap:8px;flex-wrap:wrap}
.prediction-choice{
  border:1px solid rgba(91,72,65,.12);
  border-radius:999px;
  padding:9px 15px;
  background:#fff8eb;
  font-weight:850;
  cursor:pointer;
}
.prediction-choice.is-selected{
  background:#dcebe4;
  border-color:#8fcbbb;
  color:#477b70;
  box-shadow:inset 0 0 0 2px rgba(95,159,145,.15);
}
.mission-success{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#e9f5e9;
  border:1px solid rgba(92,155,130,.2);
}
.mission-success strong,
.mission-success span{display:block}
.mission-success strong{font-size:1.05rem;color:#49775f}
.mission-success span{margin-top:3px;color:#66766c;font-size:.82rem}
.success-actions{display:flex;gap:8px}
.secondary-button{
  min-height:44px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:#fff8eb;
  color:#72625d;
  font-weight:850;
  cursor:pointer;
}
.parts-tray .part-preview:disabled{
  display:none;
}
@media(max-width:560px){
  .mission-special{
    align-items:stretch;
    flex-direction:column;
    gap:8px;
  }
  .prediction-choices{display:grid;grid-template-columns:repeat(3,1fr)}
  .prediction-choice{padding:9px 7px;font-size:.78rem}
  .mission-success{
    align-items:stretch;
    flex-direction:column;
  }
  .success-actions{display:grid;grid-template-columns:1fr 1fr}
}


/* =========================================================
   PASS 5 — TINKER, SAVED MACHINES, RELEASE POLISH
   ========================================================= */

.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.tinker-view,.machines-view{max-width:1080px;margin:0 auto}
.tinker-heading{align-items:flex-end}
.tinker-object-picker{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.tinker-object-picker button{
  border:1px solid rgba(91,72,65,.11);
  background:#fff8eb;
  border-radius:999px;
  padding:9px 13px;
  font-weight:800;
  cursor:pointer;
}
.tinker-object-picker button.is-selected{
  background:#dcebe4;
  color:#477b70;
  border-color:#8fcbbb;
}
.tinker-savebar{
  display:flex;
  gap:9px;
  align-items:center;
  margin-bottom:14px;
  padding:11px;
  border-radius:18px;
  background:rgba(255,250,240,.86);
  box-shadow:var(--soft-shadow);
}
.tinker-savebar label{flex:1}
.tinker-savebar input{
  width:100%;
  min-height:44px;
  border:1px solid rgba(91,72,65,.15);
  border-radius:13px;
  background:#fffaf0;
  padding:0 13px;
  color:var(--ink);
}
#tinker-save-status{
  min-width:78px;
  color:var(--mint-deep);
  font-size:.74rem;
  font-weight:800;
}
.saved-machines-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.saved-machine-card{
  position:relative;
  overflow:hidden;
  min-height:235px;
  padding:16px;
  border:1px solid rgba(91,72,65,.1);
  border-radius:24px;
  background:rgba(255,250,240,.9);
  box-shadow:0 7px 19px rgba(93,72,65,.07);
}
.saved-machine-preview{
  position:relative;
  height:125px;
  border-radius:17px;
  background:#88c3c1;
  box-shadow:inset 0 0 0 5px rgba(80,123,115,.12);
  overflow:hidden;
}
.saved-machine-preview:before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(65,123,118,.44) 0 1.5px,transparent 1.8px);
  background-size:11px 11px;
}
.saved-preview-gear{
  position:absolute;
  width:var(--size);
  height:var(--size);
  transform:translate(-50%,-50%);
  object-fit:contain;
  filter:drop-shadow(0 3px 3px rgba(72,51,46,.15));
}
.saved-machine-card h3{margin:13px 0 3px;font-size:1.05rem}
.saved-machine-card p{margin:0;color:var(--muted);font-size:.72rem}
.saved-machine-actions{
  display:flex;
  gap:7px;
  margin-top:12px;
}
.saved-machine-actions button{
  flex:1;
  min-height:39px;
  border:0;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.saved-open{background:#dcebe4;color:#477b70}
.saved-delete{background:#f4e6e3;color:#96545b}
.saved-empty{
  display:none;
  text-align:center;
  padding:50px 20px;
  border-radius:28px;
  background:rgba(255,250,240,.84);
  box-shadow:var(--soft-shadow);
}
.saved-empty.is-visible{display:block}
.saved-empty img{height:150px;max-width:60%;object-fit:contain}
.saved-empty h3{margin:5px 0 4px;font-size:1.35rem}
.saved-empty p{margin:0 0 18px;color:var(--muted)}
.settings-danger{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:20px;
}
.settings-danger .secondary-button{
  background:#f3e7df;
  color:#795e59;
}
body.audio-unavailable .sound-button{opacity:.7}

@media(max-width:860px){
  .saved-machines-grid{grid-template-columns:repeat(2,1fr)}
  .tinker-heading{align-items:flex-start;flex-direction:column}
  .tinker-object-picker{justify-content:flex-start}
}
@media(max-width:560px){
  .tinker-savebar{display:grid;grid-template-columns:1fr 1fr}
  .tinker-savebar label{grid-column:1/-1}
  #tinker-save-status{grid-column:1/-1;min-width:0}
  .tinker-object-picker{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .saved-machines-grid{grid-template-columns:1fr}
  .settings-danger{grid-template-columns:1fr}
}


/* Purpose-built Machine Shop art, matched to World rather than a separate game style. */
.machine-shop-world-card{
  display:grid;
  grid-template-columns:minmax(180px,340px) 1fr;
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:12px;
  border-radius:24px;
  background:rgba(255,250,240,.88);
  box-shadow:var(--soft-shadow);
}
.machine-shop-world-card img{
  width:100%;height:190px;object-fit:cover;object-position:center;
  border-radius:17px;
}
.machine-shop-world-card strong,.machine-shop-world-card span{display:block}
.machine-shop-world-card strong{font-size:1.25rem;color:var(--ink)}
.machine-shop-world-card span{margin-top:5px;color:var(--muted)}
.tinker-object-picker button{
  display:grid;
  grid-template-columns:42px auto;
  align-items:center;
  gap:5px;
  padding:4px 11px 4px 5px;
}
.tinker-object-picker button img{
  width:42px;height:42px;object-fit:contain;
}
.machine-parts-guide{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:15px;
}
.machine-parts-guide>div{
  display:grid;
  grid-template-columns:74px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:9px;
  padding:11px;
  border-radius:19px;
  background:rgba(255,250,240,.88);
  box-shadow:var(--soft-shadow);
}
.machine-parts-guide img{grid-row:1/3;width:74px;height:64px;object-fit:contain}
.machine-parts-guide strong{align-self:end}
.machine-parts-guide span{align-self:start;font-size:.72rem;color:var(--muted)}
@media(max-width:620px){
  .machine-shop-world-card{grid-template-columns:1fr}
  .machine-shop-world-card img{height:180px}
  .machine-parts-guide{grid-template-columns:1fr}
}

/* Educational scaffolding */
.mission-learn{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;margin:0 0 12px;padding:10px 14px;border-radius:18px;background:rgba(255,248,211,.9);border:1px solid rgba(191,154,70,.18)}
.learn-icon{font-size:1.45rem;text-align:center}.learn-label{display:block;font-size:.62rem;font-weight:900;letter-spacing:.12em;color:#9a7937}.mission-learn strong{display:block;margin:1px 0 2px;font-size:.92rem}.mission-learn p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.3}
.why-it-worked,.think-next{display:block;margin-top:6px;font-size:.76rem;line-height:1.3}.why-it-worked{color:#5e6c63}.think-next{padding-top:5px;border-top:1px solid rgba(73,119,95,.16);color:#765e3f}
.principle-guide{margin:16px 0}.principle-guide h3{margin:0 0 9px}.principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.principle-grid>div{padding:10px;border-radius:14px;background:#fff8e7}.principle-grid strong,.principle-grid span{display:block}.principle-grid strong{font-size:.8rem}.principle-grid span{margin-top:3px;font-size:.72rem;line-height:1.25;color:var(--muted)}.guide-note{font-size:.72rem;color:var(--muted);margin:9px 2px 0}
@media(max-width:560px){.mission-learn{grid-template-columns:32px 1fr;padding:7px 9px;margin-bottom:7px}.learn-icon{font-size:1.1rem}.mission-learn p{font-size:.7rem}.principle-grid{grid-template-columns:1fr}.why-it-worked,.think-next{font-size:.7rem}}

/* Usability refinement */
.first-run-coach{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 9px;padding:8px 12px;border-radius:16px;background:#fff8dd;border:1px solid rgba(184,144,54,.2);font-size:.76rem;color:#675d4f;transition:opacity .18s,transform .18s}
.first-run-coach.is-hidden{display:none}.coach-step{display:flex;align-items:center;gap:5px;white-space:nowrap}.coach-step b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#f0c95c;color:#584a2f;font-size:.7rem}.coach-arrow{opacity:.55}.coach-close{margin-left:auto;border:0;background:transparent;font-size:1.25rem;line-height:1;cursor:pointer;color:#817666;padding:5px}
.part-preview small em{font-style:normal;font-size:.62rem;font-weight:700;opacity:.68}.part-preview:disabled{opacity:.48;cursor:default}.workbench-action:disabled,.turn-button:disabled{opacity:.45}
.part-preview:focus-visible,.workbench-action:focus-visible,.turn-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.back-button:focus-visible{outline:3px solid rgba(62,116,149,.55);outline-offset:2px}
@media(max-width:560px){.first-run-coach{justify-content:flex-start;overflow-x:auto;gap:5px;padding:6px 8px;font-size:.68rem}.coach-step b{width:19px;height:19px}.coach-close{position:sticky;right:0;background:#fff8dd}}

/* Depth: measurement, transfer, and open challenges */
.machine-meter{display:grid;grid-template-columns:repeat(4,minmax(74px,1fr)) auto;gap:6px;align-items:stretch;margin:0 0 10px}
.machine-meter>div{padding:7px 9px;border-radius:12px;background:rgba(238,246,240,.92);border:1px solid rgba(75,120,92,.12)}
.machine-meter span{display:block;font-size:.56rem;font-weight:900;letter-spacing:.1em;color:#738176}.machine-meter strong{display:block;margin-top:2px;font-size:.78rem;color:#43564a}
.machine-meter button{border:0;border-radius:12px;padding:0 12px;background:#e8e2d4;color:#655f55;font-weight:800;cursor:pointer}
.bonus-build{display:block;margin-top:7px;padding:7px 8px;border-radius:10px;background:#fff5cf;color:#665a3f;font-size:.73rem;line-height:1.3}
.tinker-challenges{margin:8px 0 12px;padding:10px 12px;border-radius:18px;background:rgba(255,248,222,.88);box-shadow:var(--soft-shadow)}
.tinker-challenge-head{display:flex;gap:8px;align-items:baseline;margin-bottom:7px}.tinker-challenge-head span{font-size:.72rem;color:var(--muted)}
.tinker-challenge-buttons{display:flex;flex-wrap:wrap;gap:6px}.tinker-challenge-buttons button{border:1px solid rgba(110,92,60,.15);border-radius:999px;background:#fffaf0;padding:7px 10px;font-weight:750;color:#665d50;cursor:pointer}.tinker-challenge-buttons button.is-selected{background:#e5f0d8;border-color:#a9c28d}
.tinker-challenge-status{margin-top:7px;font-size:.74rem;color:var(--muted);font-weight:700}.tinker-challenge-status.is-success{color:#477354}
@media(max-width:560px){.machine-meter{grid-template-columns:repeat(4,1fr);gap:4px}.machine-meter button{grid-column:1/-1;min-height:32px}.machine-meter>div{padding:5px 6px}.machine-meter strong{font-size:.68rem}.tinker-challenge-buttons{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}.tinker-challenge-buttons button{white-space:nowrap}}

.meter-guide{margin:12px 0;padding:11px 13px;border-radius:15px;background:#eef6f0}.meter-guide strong{display:block}.meter-guide p{margin:4px 0 0;font-size:.76rem;line-height:1.35;color:var(--muted)}

/* Manual crank interaction */
.gear-component.fixed.manual-driver{pointer-events:auto;cursor:grab;touch-action:none;z-index:32}
.crank-png{pointer-events:auto!important;touch-action:none;cursor:grab;user-select:none;-webkit-user-drag:none;height:calc(var(--component-size)*.85)!important;object-fit:contain}
.crank-png:active,.machine-board.is-manual-cranking .crank-png{cursor:grabbing}
.crank-png:focus-visible{outline:4px solid rgba(66,124,151,.55);outline-offset:5px;border-radius:18px}
.machine-board.is-manual-cranking{touch-action:none;cursor:grabbing}
.machine-board.is-manual-cranking .gear-png{filter:drop-shadow(0 0 7px rgba(255,231,111,.48)) drop-shadow(0 5px 5px rgba(72,51,46,.16))}
.crank-png::selection{background:transparent}

/* Axles and compound gears */
.tray-axle-png{display:block;width:56px;height:56px;object-fit:contain;margin:0 auto;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(72,51,46,.15))}
.axle-component{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;display:grid;place-items:center;z-index:7;pointer-events:none}
.axle-component img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(70,55,45,.18))}
.axle-component small{position:absolute;top:31px;padding:2px 5px;border-radius:999px;background:rgba(255,250,240,.88);font-size:.52rem;font-weight:900;color:#7a674b;letter-spacing:.06em}
.axle-component.fixed small{display:none}.axle-component.is-dragging{opacity:.7;filter:drop-shadow(0 0 7px rgba(247,224,105,.9))}
.gear-component[data-level="1"] .gear-png{filter:drop-shadow(0 -4px 2px rgba(255,255,255,.65)) drop-shadow(0 8px 5px rgba(72,51,46,.22))}
.gear-component[data-level="1"]:after{content:"TOP";position:absolute;right:-4px;top:-5px;padding:2px 4px;border-radius:999px;background:#fff4c9;color:#806b3e;font-size:.46rem;font-weight:900;letter-spacing:.05em}
.axle-link{stroke:rgba(226,189,92,.85);stroke-width:8;stroke-linecap:round;stroke-dasharray:none}.axle-link.is-powered{stroke:rgba(248,217,104,.98);filter:drop-shadow(0 0 5px rgba(249,232,133,.72))}.axle-link.is-jammed{stroke:rgba(196,92,96,.92)}
.axle-preview small{font-weight:850}.gear-component.on-axle .gear-png{filter:drop-shadow(0 0 4px rgba(226,189,92,.5)) drop-shadow(0 5px 5px rgba(72,51,46,.18))}
@media(max-width:560px){.tray-axle-png{width:45px;height:45px}.axle-component{width:34px;height:34px}.axle-component img{width:31px;height:31px}.axle-component small{top:26px}}

.mission-section-divider{grid-column:1/-1;margin:13px 0 2px;padding:15px 18px;border-radius:20px;background:#f6edd0;border:1px solid rgba(181,138,43,.18)}.mission-section-divider span,.mission-section-divider strong,.mission-section-divider p{display:block}.mission-section-divider span{font-size:.62rem;font-weight:900;letter-spacing:.12em;color:#9b7737}.mission-section-divider strong{margin-top:2px;font-size:1.2rem}.mission-section-divider p{margin:3px 0 0;color:var(--muted);font-size:.8rem}

.saved-preview-axle{position:absolute;width:9px;height:9px;border-radius:50%;background:#e2bd5c;border:2px solid #a9822e;transform:translate(-50%,-50%);z-index:1}.saved-preview-gear{z-index:2}

/* Pass 3: mechanical diagnosis */
.board-topline{gap:8px}.diagnostic-button{margin-left:auto;border:1px solid rgba(126,91,65,.18);border-radius:999px;background:#fff6dc;color:#6f5944;padding:5px 10px;font-size:.68rem;font-weight:850;cursor:pointer}.diagnostic-button[hidden]{display:none}.diagnostic-button:focus-visible{outline:3px solid rgba(62,116,149,.5);outline-offset:2px}
.machine-board.diagnostic-mode .gear-component:not(.diagnostic-powered):not(.diagnostic-target):not(.diagnostic-redundant):not(.is-jammed){opacity:.48}
.gear-component.diagnostic-powered .gear-visual{box-shadow:inset 0 -6px 9px rgba(86,61,60,.13),0 0 0 6px rgba(255,225,95,.82),0 0 24px rgba(255,225,95,.5)}
.gear-component.diagnostic-source .gear-visual{box-shadow:inset 0 -6px 9px rgba(86,61,60,.13),0 0 0 6px rgba(241,173,73,.9),0 0 24px rgba(241,173,73,.48)}
.gear-component.diagnostic-target .gear-visual{box-shadow:inset 0 -6px 9px rgba(86,61,60,.13),0 0 0 6px rgba(207,91,91,.82),0 0 22px rgba(207,91,91,.35)}
.gear-component.diagnostic-redundant .gear-visual{box-shadow:inset 0 -6px 9px rgba(86,61,60,.13),0 0 0 6px rgba(112,155,195,.86),0 0 20px rgba(112,155,195,.38)}
.diagnostic-break-line{stroke:rgba(211,92,78,.95);stroke-width:5;stroke-linecap:round;stroke-dasharray:8 8;filter:drop-shadow(0 0 4px rgba(211,92,78,.35))}
.gear-component.is-jammed{animation:jam-wiggle .16s ease-in-out 0s 4}
@keyframes jam-wiggle{0%,100%{translate:0 0}25%{translate:-2px 0}75%{translate:2px 0}}
@media(prefers-reduced-motion:reduce){.gear-component.is-jammed{animation:none}}

/* Pass 4: Belt Bench */
.tray-pulley-png{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(70,55,45,.16))}
.tray-belt-png{width:54px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(70,55,45,.12))}
.belt-preview.is-selected{background:#fff1c8;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(184,143,46,.28)}
.belt-preview.is-selected small{color:#785f2f;font-weight:900}

.pulley-component{
  --component-size:70px;
  position:absolute;left:0;top:0;
  width:var(--hit-size,54px);height:var(--hit-size,54px);
  transform:translate(-50%,-50%);
  border:0;padding:0;border-radius:50%;background:transparent;
  pointer-events:auto;cursor:grab;touch-action:none;z-index:11;
}
.pulley-component:active{cursor:grabbing}
.pulley-component.fixed{cursor:default}
.pulley-visual{
  position:absolute;left:50%;top:50%;
  width:var(--component-size);height:var(--component-size);
  transform:translate(-50%,-50%) rotate(var(--angle));
  border-radius:50%;display:grid;place-items:center;
  will-change:transform;
  filter:drop-shadow(0 6px 6px rgba(72,51,46,.18));
}
.pulley-png{width:100%;height:100%;object-fit:contain;display:block}
.pulley-component.is-powered .pulley-visual{filter:drop-shadow(0 0 7px rgba(255,230,113,.85)) drop-shadow(0 7px 6px rgba(72,51,46,.18))}
.pulley-component.is-belted .pulley-visual{box-shadow:0 0 0 3px rgba(127,103,77,.12)}
.pulley-component.is-jammed .pulley-visual{box-shadow:0 0 0 5px rgba(196,92,96,.62);filter:drop-shadow(0 0 7px rgba(196,92,96,.4))}
.pulley-component.is-dragging{opacity:.86;z-index:60}
.pulley-component.drop-good .pulley-visual{box-shadow:0 0 0 6px rgba(225,241,207,.85)}
.pulley-component.drop-bad .pulley-visual{box-shadow:0 0 0 6px rgba(202,91,96,.62)}
.pulley-component[data-level="1"] .pulley-png{filter:drop-shadow(0 -4px 2px rgba(255,255,255,.65)) drop-shadow(0 8px 5px rgba(72,51,46,.22))}
.pulley-component[data-level="1"]:after{content:"TOP";position:absolute;right:-4px;top:-5px;padding:2px 4px;border-radius:999px;background:#fff4c9;color:#806b3e;font-size:.46rem;font-weight:900;letter-spacing:.05em}
.pulley-component.on-axle .pulley-png{filter:drop-shadow(0 0 4px rgba(226,189,92,.5)) drop-shadow(0 5px 5px rgba(72,51,46,.18))}
.pulley-component.belt-selectable .pulley-visual{box-shadow:0 0 0 5px rgba(122,171,174,.3)}
.pulley-component.belt-start .pulley-visual{box-shadow:0 0 0 7px rgba(235,180,85,.72),0 0 18px rgba(235,180,85,.42)}

.belt-line{stroke:#725944;stroke-width:7;stroke-linecap:round;fill:none;opacity:.9}
.belt-line.crossed-belt{stroke:#80604d}
.belt-line.is-powered{stroke:#9b744f;stroke-dasharray:13 7;animation:beltTravel .8s linear infinite;filter:drop-shadow(0 0 3px rgba(235,190,92,.38))}
.belt-line.is-jammed{stroke:#c45c60;animation:none;stroke-dasharray:4 5}
@keyframes beltTravel{to{stroke-dashoffset:-20}}
@media (prefers-reduced-motion:reduce){.belt-line.is-powered{animation:none;stroke-dasharray:none}}

.machine-board.diagnostic-mode .pulley-component:not(.diagnostic-powered):not(.diagnostic-target):not(.is-jammed){opacity:.48}
.pulley-component.diagnostic-powered .pulley-visual{box-shadow:0 0 0 5px rgba(93,172,127,.58)}
.pulley-component.diagnostic-target .pulley-visual{box-shadow:0 0 0 6px rgba(213,118,92,.68)}
.belt-divider{background:#edf4ea;border-color:rgba(94,137,96,.18)}
.belt-divider span{color:#62805d}
.belt-ideas{margin:15px 0;padding-top:2px}
.saved-preview-pulley{position:absolute;transform:translate(-50%,-50%);width:var(--size,28px);height:var(--size,28px);object-fit:contain;z-index:3}


/* Pass 5: multi-constraint engineering specifications */
.mission-spec{
  margin:0 0 10px;
  padding:9px 12px;
  border-radius:16px;
  background:rgba(238,246,240,.94);
  border:1px solid rgba(75,120,92,.16);
}
.mission-spec[hidden]{display:none}
.spec-heading{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.spec-heading span{font-size:.6rem;font-weight:950;letter-spacing:.12em;color:#63806c}
.spec-heading strong{font-size:.82rem;color:#43564a}
.spec-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px}
.spec-item{display:flex;align-items:center;gap:6px;min-height:28px;padding:4px 7px;border-radius:10px;background:rgba(255,255,255,.62);color:#736b62;font-size:.72rem;font-weight:750}
.spec-mark{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:#e9e4d7;color:#8a8174;font-weight:950}
.spec-item.is-met{background:rgba(224,241,215,.78);color:#496450}
.spec-item.is-met .spec-mark{background:#8fbd87;color:#fff}
.mission-spec.is-complete{border-color:rgba(80,145,91,.35);box-shadow:0 0 0 2px rgba(121,178,111,.08)}
.constraint-zone{
  position:absolute;
  z-index:3;
  transform:none;
  background:repeating-linear-gradient(-45deg,rgba(199,87,91,.14) 0 10px,rgba(255,247,222,.16) 10px 20px);
  border-top:2px dashed rgba(182,76,82,.48);
  border-bottom:2px dashed rgba(182,76,82,.48);
  pointer-events:none;
  display:grid;
  place-items:center;
}
.constraint-zone[hidden]{display:none}
.constraint-zone span{
  padding:3px 8px;border-radius:999px;
  background:rgba(255,248,233,.9);
  color:#9a5155;font-size:.55rem;font-weight:950;letter-spacing:.1em;
}
.engineering-divider{background:#eef1f8;border-color:rgba(94,111,154,.18)}
.engineering-divider span{color:#68769a}
@media(max-width:560px){
  .mission-spec{padding:7px 8px;margin-bottom:7px}
  .spec-heading{margin-bottom:5px}
  .spec-items{grid-template-columns:1fr 1fr;gap:4px}
  .spec-item{font-size:.66rem;min-height:25px;padding:3px 5px}
  .spec-mark{width:18px;height:18px;flex-basis:18px}
}


/* Pass 6: multiple outputs and network design */
.multi-output-meter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 10px}
.multi-output-meter[hidden]{display:none}
.output-meter-card{padding:7px 10px;border-radius:13px;background:rgba(244,241,233,.9);border:1px solid rgba(95,82,68,.1)}
.output-meter-card span{display:block;font-size:.58rem;font-weight:950;letter-spacing:.09em;color:#7a7064;text-transform:uppercase}
.output-meter-card strong{display:block;margin-top:2px;font-size:.78rem;color:#5f574f}
.output-meter-card small{display:block;margin-top:1px;font-size:.66rem;color:#81766b}
.output-meter-card.is-powered{background:rgba(231,243,224,.94);border-color:rgba(91,145,89,.18)}
.extra-output-dock{z-index:9}
.output-dock.is-powered-output{filter:drop-shadow(0 0 7px rgba(238,203,101,.28))}
.network-divider{background:#edf6f5;border-color:rgba(77,139,137,.18)}
.network-divider span{color:#557f7b}
.tinker-second-output{position:relative;z-index:35;display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-end;margin-top:7px;padding:4px 6px;border-radius:12px;background:rgba(255,250,240,.92)}
.tinker-second-output>span{font-size:.62rem;font-weight:950;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.tinker-second-output button{border:1px solid rgba(100,92,79,.14);border-radius:999px;background:#fffaf0;padding:6px 9px;font-size:.68rem;font-weight:750;color:#665d50}
.tinker-second-output button.is-selected{background:#e1efec;border-color:#9fc4bd;color:#456d67}
@media(max-width:560px){
 .multi-output-meter{gap:4px;margin-bottom:7px}
 .output-meter-card{padding:5px 7px}.output-meter-card strong{font-size:.7rem}.output-meter-card small{font-size:.6rem}
 .tinker-second-output{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
 .tinker-second-output button{white-space:nowrap}
}


/* Pass 7: Trial A/B experimental comparison */
.experiment-panel{
  margin:0 0 10px;padding:10px 12px;border-radius:17px;
  background:rgba(239,244,250,.94);border:1px solid rgba(85,110,145,.14);
  box-shadow:0 5px 14px rgba(74,64,54,.05)
}
.experiment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.experiment-head>div{min-width:0}
.experiment-head span{display:block;font-size:.58rem;font-weight:950;letter-spacing:.11em;color:#6e7894}
.experiment-head strong{display:block;margin-top:1px;font-size:.86rem;color:#46536d}
.experiment-head small{display:block;margin-top:2px;font-size:.69rem;line-height:1.3;color:#77736d}
.experiment-clear{flex:0 0 auto;border:0;border-radius:10px;background:#e7e3dc;color:#686159;padding:6px 8px;font-size:.66rem;font-weight:800;cursor:pointer}
.experiment-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.experiment-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border:1px solid rgba(73,92,122,.15);border-radius:12px;background:#fff;color:#59647a;font-weight:850;cursor:pointer}
.experiment-actions button b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#dce5f3;color:#4f6281}
.experiment-actions button.is-saved{background:#e7f1e3;border-color:#b2cdaa;color:#4d6b51}
.experiment-actions button.is-saved b{background:#86b17e;color:#fff}
.experiment-result{margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.72);color:#69645d}
.experiment-result strong{display:block;font-size:.76rem;color:#505b6d}
.experiment-result>span{display:block;margin-top:2px;font-size:.7rem;line-height:1.3}
.experiment-result.is-good{background:rgba(234,245,229,.82)}
.experiment-result ul{margin:6px 0 0;padding-left:18px}
.experiment-result li{margin:2px 0;font-size:.7rem;line-height:1.28}
.experiment-result small{display:block;margin-top:7px;padding-top:6px;border-top:1px solid rgba(90,100,110,.1);font-size:.66rem;line-height:1.3;color:#746f68}
.experiment-change{font-weight:800;color:#5d6676}
@media(max-width:560px){
 .experiment-panel{padding:8px;margin-bottom:7px}
 .experiment-head small{font-size:.63rem}
 .experiment-head strong{font-size:.78rem}
 .experiment-actions{gap:4px;margin-top:6px}
 .experiment-actions button{min-height:34px;font-size:.68rem}
 .experiment-result{padding:6px 8px;margin-top:6px}
 .experiment-result li{font-size:.64rem}
}


/* Pass 8: Machine Notebook */
.notebook-card{min-height:0;padding:14px;overflow:visible}
.notebook-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px}
.notebook-title-row h3{margin:0;font-size:1rem}
.notebook-title-row small{flex:0 0 auto;font-size:.61rem;color:var(--muted)}
.notebook-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.notebook-facts span{padding:4px 7px;border-radius:999px;background:#eef4ed;color:#5d6d61;font-size:.64rem;font-weight:800}
.notebook-note{margin-top:10px;padding:8px;border-radius:13px;background:#fff8df}
.notebook-note label{display:block;font-size:.68rem;font-weight:900;color:#6a604c}
.notebook-note textarea{display:block;width:100%;min-height:50px;margin-top:5px;padding:7px 8px;resize:vertical;border:1px solid rgba(110,91,55,.14);border-radius:9px;background:#fffdf7;color:var(--ink);font:inherit;font-size:.7rem;line-height:1.3}
.notebook-note>div{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-top:5px}
.notebook-note small{color:var(--mint-deep);font-size:.62rem;font-weight:800}
.notebook-note button{border:0;border-radius:8px;background:#e8e0c8;color:#685f4f;padding:5px 8px;font-size:.62rem;font-weight:850;cursor:pointer}
.notebook-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.notebook-actions button{min-height:35px;padding:0 5px;font-size:.66rem}
.saved-copy{background:#e7e9f5;color:#626d91}
.saved-rename{background:#eee8d9;color:#786c54}
@media(max-width:560px){
 .notebook-card{padding:11px}
 .saved-machine-preview{height:105px}
 .notebook-title-row{align-items:flex-start}
 .notebook-title-row small{font-size:.56rem}
 .notebook-facts{gap:4px}
 .notebook-facts span{font-size:.6rem;padding:3px 6px}
 .notebook-actions{grid-template-columns:1fr 1fr}
 .notebook-actions button{min-height:38px}
}


/* Pass 9: final Machine Bench */
.machine-divider{background:linear-gradient(135deg,#f5efe0,#edf3ec);border-color:rgba(111,105,71,.20)}
.machine-divider span{color:#756e49}
.machine-divider strong{color:#514d3b}
.machine-bench-mission .mission-spec{border-color:rgba(127,118,72,.24);background:rgba(248,246,232,.95)}
.machine-bench-mission .spec-heading span{color:#776f49}

/* Pass 9 usability fix: experiment copy must not block machine controls beneath it. */
.experiment-panel{pointer-events:none}
.experiment-panel button{pointer-events:auto}


/* Pass 10: discovery-first content and lower workbench density */
.mission-learn{
  display:block;
  padding:0;
  overflow:hidden;
}
.mission-learn > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:9px 14px;
  cursor:pointer;
  user-select:none;
}
.mission-learn > summary::-webkit-details-marker{display:none}
.mission-learn > summary::after{
  content:"+";
  margin-left:auto;
  font-size:22px;
  font-weight:800;
  line-height:1;
}
.mission-learn[open] > summary::after{content:"−"}
.mission-learn > summary span:last-child{display:grid;gap:1px}
.mission-learn > summary b{font-size:14px}
.mission-learn > summary small{font-size:11px;font-weight:600;opacity:.68}
.mission-learn .learn-icon{font-size:20px}
.learn-answer{
  display:grid;
  gap:3px;
  padding:0 14px 12px 44px;
}
.learn-answer strong{font-size:14px}
.learn-answer p{margin:0;font-size:13px;line-height:1.35}

.mission-experiment{
  padding:0;
  overflow:hidden;
  pointer-events:auto;
}
.mission-experiment > summary{
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:9px 13px;
  cursor:pointer;
  user-select:none;
}
.mission-experiment > summary::-webkit-details-marker{display:none}
.mission-experiment > summary span{font-size:10px;font-weight:900;letter-spacing:.08em}
.mission-experiment > summary strong{font-size:13px}
.mission-experiment > summary small{margin-left:auto;font-size:10px;opacity:.65}
.mission-experiment > summary::after{content:"+";font-size:18px;font-weight:900}
.mission-experiment[open] > summary::after{content:"−"}
.mission-experiment[open] > .experiment-head{border-top:1px solid rgba(70,64,49,.10)}
.mission-experiment .experiment-head{padding-top:8px}
.mission-experiment:not([open]) > :not(summary){display:none}

@media (max-width:520px){
  .mission-learn > summary{min-height:42px;padding:7px 10px}
  .learn-answer{padding:0 10px 10px 38px}
  .mission-experiment > summary{padding:7px 10px}
  .mission-experiment > summary small{display:none}
}

/* Collapsed clues are compact enough to remain available on advanced benches. */
.engineering-mission .mission-learn{display:block}

/* Creekside workshop visitors complement Elle's mission brief. */
.mission-brief-copy{min-width:0}
.creekside-machine-brief{float:right;width:50px;height:58px;margin:-8px 0 -3px 8px}
.creekside-machine-success{float:right;width:48px;height:54px;margin:-5px 0 -4px 10px}
.creekside-machine-brief img,.creekside-machine-success img{width:100%;height:100%;object-fit:contain;object-position:bottom}
@media(max-width:560px){.creekside-machine-brief{display:none!important}}