*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#e7dfcd;color:#3f3533;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #c25d42;outline-offset:4px}button:disabled{cursor:default}a{text-decoration:none;color:inherit}#scene{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.shade{pointer-events:none;position:fixed;inset:0;background:linear-gradient(90deg,#e8dfcda6,transparent 45%),linear-gradient(180deg,#f4ecdb66,transparent 35%)}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;z-index:4}header>a{font-size:24px;display:flex;gap:14px;align-items:center;min-height:44px}header>a span{font-weight:800;font-size:11px;letter-spacing:3px}.tools{display:flex;gap:7px}.tools button{height:44px;min-width:44px;padding:0 12px;background:#f7f1e5b3;border:1px solid #a6967d44;border-radius:4px;font-size:22px;color:#615147}.tools small{font:700 8px Arial;letter-spacing:1px}.identity{position:absolute;left:4%;top:100px;pointer-events:none}.eyebrow{font:700 9px Arial;letter-spacing:2.3px;color:#8c715e}h1{font-size:clamp(40px,5.7vw,83px);letter-spacing:-4px;line-height:.86;font-weight:900;margin:22px 0 17px}h1 span{font-size:40px;color:#ad6a47;padding-left:14px;vertical-align:middle}.tagline{font-size:12px;color:#887969}.chamber{position:absolute;top:340px;left:4%;width:295px}.label,.paddle-label{display:flex;justify-content:space-between;font:8px Arial;letter-spacing:1.4px;color:#85715f}.label b{color:#ba6545}#chambers{display:flex;gap:6px;margin:15px 0 19px}#chambers button{width:44px;height:44px;background:transparent;border:1px solid #ac967540;color:#877662;font-size:11px;border-radius:50%;position:relative}#chambers button.selected{background:#61594b;color:#fff6df;border-color:#61594b}#chambers button.solved:after{content:'';position:absolute;bottom:4px;left:calc(50% - 2px);width:4px;height:4px;background:#d78861;border-radius:50%}.chamber h2{font-size:23px;letter-spacing:-.5px;margin:0 0 9px}.chamber p{font-size:12px;line-height:1.7;color:#92806d;max-width:260px;margin:0}.console{position:absolute;left:4%;bottom:64px;width:330px;z-index:3}.paddle-label{font-size:8px;margin-bottom:10px}#paddles{display:flex;gap:6px;margin-bottom:16px}#paddles button{min-width:48px;min-height:48px;flex:1;background:#f6eedcce;border:1px solid #b8946e77;color:#755743;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:8px}#paddles button small{font-size:10px;color:#a08565}#paddles button span{font-size:25px}#paddles button:disabled{opacity:.45}.actions{display:flex;gap:7px}.actions button{height:56px;background:#a9563d;border:0;color:#fff4df;box-shadow:0 3px 0 #84442f;border-radius:3px}#launch{flex:1;text-align:left;padding:0 19px;letter-spacing:1.4px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:space-between}#launch span{font-size:28px;font-weight:400}#launch:disabled{background:#c49a79;box-shadow:0 3px 0 #b68c69}#reset{width:50px;font-size:26px;background:#776958;box-shadow:0 3px 0 #5b5145}.control-hint{font-size:7px;letter-spacing:1.1px;color:#9f8d72;text-align:center;margin-top:14px}#status{position:absolute;bottom:17px;left:54%;max-width:460px;text-align:center;pointer-events:none}#status-title{font:700 11px Arial;letter-spacing:2px;color:#8c5e42}#status-copy{font-size:12px;line-height:1.6;color:#9e8267;margin:12px 0 0}footer{position:absolute;bottom:20px;left:4%;right:4%;display:flex;justify-content:space-between;color:#a89277;font:8px Arial;letter-spacing:1.7px;pointer-events:none}#paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(350px,90%);padding:35px;background:#f5ebdbeF;border:1px solid #fff5e9;box-shadow:0 20px 80px #6f4e3d44;z-index:10;border-radius:5px}#paused h2{font-size:40px;line-height:1.05;margin:18px 0 25px}#resume{width:100%;background:#a9563d;border:0;padding:18px;color:#fff1db;font-size:11px;letter-spacing:2px}#error{position:absolute;inset:35% 10%;padding:30px;background:#fff5ea;z-index:20}[hidden]{display:none!important}@media(max-width:700px){header{top:max(17px,env(safe-area-inset-top));left:5%;right:5%}.identity{top:79px;left:5%}.eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:37px;letter-spacing:-2px;line-height:.94;margin:12px 0}h1 br{display:none}h1 span{font-size:22px;padding-left:7px}.tagline{display:none}.chamber{left:5%;right:5%;top:150px;width:auto;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}.chamber .label{font-size:7px;grid-column:1}.label>span:last-child{display:none}#chambers{margin:0;gap:4px;grid-column:2;grid-row:1 / span 2}#chambers button{width:34px;height:44px;font-size:9px;border-radius:3px}.chamber h2{font-size:18px;margin-top:5px;grid-column:1}.chamber p{display:none}.console{left:5%;bottom:max(28px,env(safe-area-inset-bottom));width:90%}#paddles{margin-bottom:12px;gap:6px}#paddles button{min-height:45px;min-width:44px}.paddle-label{font-size:7px;margin-bottom:8px}.actions button{height:52px}#status{left:5%;right:5%;bottom:185px;max-width:none}#status-title{font-size:9px;letter-spacing:1.3px}#status-copy{display:none}.control-hint{margin-top:11px;font-size:6px}footer{display:none}.shade{background:linear-gradient(180deg,#f5eddc88,transparent 30%,transparent 75%,#e8dfcd88)}}@media(max-height:700px) and (max-width:700px){.identity{top:68px}h1{font-size:29px}.chamber{top:124px}#status{bottom:180px}#status-copy{display:none}.console{bottom:20px}#paddles{margin-bottom:8px}#paddles button{min-height:44px}.actions button{height:48px}.control-hint{display:none}}@media(max-height:680px) and (min-width:701px){.identity{top:85px}h1{font-size:52px}.chamber{top:265px}.console{bottom:50px}.chamber p{display:none}.chamber h2{font-size:18px}#chambers{margin:10px 0}.tagline{font-size:10px}}

#paddles button{position:relative}#paddles button.spring{border-color:#4c8995;background:#c4dedbd9;color:#276172}#paddles button sup{position:absolute;right:3px;top:2px;font-size:9px;color:#287386}
@media(max-width:700px){#paddles{gap:3px}#paddles button{gap:3px}#status-copy{display:block;font-size:10px;line-height:1.4;margin:6px auto 0;max-width:330px}#status{bottom:188px}.paddle-label{letter-spacing:.7px}}
@media(max-width:700px){h1{font-size:clamp(24px,6.7vw,37px);letter-spacing:-1.4px;white-space:nowrap}h1 span{font-size:20px}.identity{right:5%}}

/* Later machines need two comfortable rows, not smaller targets. */
footer span:last-child{display:none}
#paddles{display:grid;grid-template-columns:repeat(var(--paddle-columns,3),minmax(0,1fr))}
#paddles button{min-width:44px;min-height:48px}
#charge-readout{font-size:9px;letter-spacing:.7px;color:#a54f2e;white-space:nowrap}
#charge-readout.negative{color:#286c83}
#chambers button{flex:none;min-width:44px;min-height:44px}
@media(max-width:700px){
 .chamber{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:6px;top:145px}
 .chamber .label{grid-column:2;grid-row:1;white-space:nowrap}
 .chamber h2{grid-column:1;grid-row:1;font-size:16px;margin:0;line-height:1.2}
 #chambers{grid-column:1 / -1;grid-row:2;justify-content:space-between;gap:4px}
 #chambers button{width:44px;height:44px}
 #paddles button{min-height:46px}
 .dense-paddles #status{bottom:237px}
 .dense-paddles #status-copy{font-size:10px;line-height:1.35}
 #charge-readout{font-size:8px}
 .paddle-label{gap:7px;font-size:7px}
}
@media(max-width:700px) and (max-height:700px){.chamber{top:122px}.dense-paddles #status{bottom:229px}}
@media(min-width:701px) and (max-height:900px){
 .dense-paddles .console{bottom:42px}
 .chamber{top:305px}
 .dense-paddles .chamber p{display:none}
}
@media(min-width:701px) and (max-height:680px){.chamber{top:255px}.dense-paddles .console{bottom:32px}.dense-paddles #chambers{margin:8px 0}}

/* A native selector keeps every chamber reachable in one 44px row. */
.chamber-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;margin:15px 0 19px;width:100%;min-width:0}
.chamber-navigation button,#chambers{height:44px;min-height:44px;min-width:0;border:1px solid #ac967577;border-radius:4px;color:#615345;background:#f5eddbdc;font:11px Arial}
.chamber-navigation button{min-width:44px;font-size:20px}
.chamber-navigation button:disabled{opacity:.35}
#chambers{display:block;width:100%;padding:0 5px;margin:0;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
#chambers:focus-visible{outline:3px solid #c25d42;outline-offset:3px}
#machine-controls{margin-bottom:9px}
#mechanisms{display:flex;gap:6px}
#mechanisms button{min-width:44px;min-height:44px;flex:1;display:flex;gap:6px;align-items:center;padding:6px 9px;border:1px solid #4f85848c;border-radius:5px;background:#d8e6dec9;color:#326665}
#mechanisms button.turn-switch{background:#eadcd6c9;border-color:#a3646677;color:#925752}
#mechanisms button[aria-pressed=true],#mechanisms button.fired{box-shadow:inset 0 0 0 2px currentColor}
#mechanisms button strong{font-size:17px}
#mechanisms button span{font-size:8px;font-weight:700;white-space:nowrap}
#mechanisms button small{font-size:7px;margin-left:auto;opacity:.75}
#machine-hint{font-size:8px;letter-spacing:.2px;text-align:center;color:#8b7763;margin:5px 0 0}
@media(max-width:700px){
 .chamber{grid-template-columns:minmax(0,1fr) auto}
 .chamber-navigation{grid-column:1 / -1;grid-row:2;margin:0;gap:5px}
 #chambers{grid-column:auto;grid-row:auto;font-size:10px}
 #mechanisms button{padding:5px 7px;gap:4px}
 #mechanisms button span{font-size:7px}
 #mechanisms button small{font-size:6px}
}

@media(max-width:700px){
 .transforming-machine .chamber{top:128px}
 .transforming-machine #status{min-height:59px}
 .transforming-machine #status-copy{max-width:330px}
}
@media(max-width:700px) and (max-height:700px){.transforming-machine .chamber{top:122px}}

/* The selector already names the machine; leave room for its switch controls. */
@media(min-width:701px){.transforming-machine .chamber h2,.transforming-machine .chamber p{display:none}}