:root{font-family:Inter,"Segoe UI",system-ui,sans-serif;color:#25282c;background:#eceef0;font-synthesis:none;--accent:#d6182b;--line:#d7dade}*{box-sizing:border-box}body{margin:0;height:100dvh;display:grid;grid-template-rows:76px minmax(0,1fr) auto 30px;overflow:hidden}button,select,input{font:inherit}button,select{cursor:pointer}button{background:none;border:1px solid var(--line);color:inherit;border-radius:5px;padding:9px 13px;font-size:12px;font-weight:600}button:hover{background:#e4e6e8}button:disabled{opacity:.4;cursor:wait}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.masthead{display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);background:#fafaf9;gap:24px;z-index:2}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:1.8px;white-space:nowrap}.mark{font-size:24px;letter-spacing:-3px;font-weight:850}.mark span{color:var(--accent);margin:0 3px}.brand small{display:block;font-size:7px;font-weight:500;letter-spacing:1.1px;margin-top:5px;color:#80858c}nav{display:flex;gap:6px}nav button{font-size:10px;font-weight:500;border-color:transparent;color:#8a8f97;padding:11px 15px;border-radius:0}nav button span{margin-left:8px;font-size:12px;font-weight:600;color:#656b73}nav button.active{border-bottom:2px solid var(--accent);color:var(--accent);background:#f1f2f2}nav button.active span{color:#25282c}.head-actions{display:flex;align-items:center;gap:8px}.head-actions button{font-size:19px;padding:3px 11px}.local{font-size:9px;font-weight:600;letter-spacing:1px;margin-right:12px;display:flex;align-items:center;gap:7px}.local i{width:5px;height:5px;border-radius:50%;background:#5a9670}main{position:relative;min-height:0;background:#eceef0}iframe{width:100%;height:100%;border:0;display:block}#loading{position:absolute;inset:0;background:#eceef0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}#loading[hidden]{display:none}#loading strong{font-weight:600;font-size:18px}#loading span{font-size:12px;color:#7d838c;text-align:center;padding:0 24px}.loader{width:30px;height:30px;border:2px solid #d9dcdf;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#controls{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:10px 24px;border-top:1px solid var(--line);background:#fafaf9;z-index:2}.transport{display:flex;gap:5px}#pause{color:var(--accent);border-color:#e8bfc4;min-width:85px}.choice{display:flex;gap:8px;align-items:center}label{font-size:10px;color:#777e86}select{background:#fff;border:1px solid var(--line);color:#333940;font-size:11px;padding:7px 10px;border-radius:4px}.speed{width:145px}.speed label{display:block}output{color:var(--accent);font-variant-numeric:tabular-nums;margin-left:4px}input[type=range]{width:100%;accent-color:var(--accent);height:14px;margin:4px 0 0}footer{padding:0 26px;display:flex;justify-content:space-between;align-items:center;color:#848a93;font-size:8px;letter-spacing:.5px;background:#f5f5f4;border-top:1px solid #e4e6e8}footer b{margin:0 8px;color:#b2b6bc}footer a{color:#626a74;text-decoration:none;font-size:10px}#liveState{color:#606974;font-variant-numeric:tabular-nums}.hide{display:none!important}dialog{border:1px solid var(--line);padding:30px 36px;max-width:750px;width:calc(100% - 36px);max-height:90dvh;overflow:auto;background:#fafaf9;color:#25282c;border-radius:12px;box-shadow:0 30px 120px #1113}dialog::backdrop{background:#25283066;backdrop-filter:blur(4px)}.dialog-title{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:8px;letter-spacing:1.6px;color:var(--accent)}#closeHelp{font-size:22px;border:0;padding:0 5px}h1{font-size:32px;letter-spacing:-1.3px;margin:18px 0 10px}dialog p{font-size:13px;line-height:1.7;color:#6d747d}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 28px;margin:25px 0}.guide-grid article>span{font-size:9px;color:var(--accent);letter-spacing:1px}h2{font-size:17px;letter-spacing:-.3px;margin:10px 0 4px}.guide-grid p{font-size:12px;margin-top:4px}.note{border-top:1px solid var(--line);padding-top:16px}.credits{font-size:10px;color:#8b9199;line-height:1.8}.credits a{color:#646c77}body.focus .masthead,body.focus #controls,body.focus footer{display:none}body.focus{grid-template-rows:1fr}body.focus main{grid-row:1}@media(max-width:1050px){.masthead{padding:0 16px;gap:10px}.brand small{display:none}nav button{padding:11px 8px}#controls{gap:12px;padding:8px 12px}.speed{width:110px}.local{display:none}footer{padding:0 12px}}@media(max-width:700px){body{grid-template-rows:105px minmax(0,1fr) auto 29px}.masthead{flex-wrap:wrap;gap:4px;padding:10px 12px}.brand{font-size:10px}nav{order:3;width:100%;justify-content:center}.head-actions{margin-left:auto}nav button{padding:7px 12px}.engine-only.speed{display:none}#controls{gap:8px}button{padding:8px 10px}.choice label{display:none}footer #hint{display:none}footer{font-size:9px}.guide-grid{grid-template-columns:1fr}h1{font-size:26px}dialog{padding:20px}.choice select{max-width:120px}}@media(prefers-reduced-motion:reduce){.loader{animation:none}}

/* Eleven machines stay visible in the catalogue at every viewport size. */
body{grid-template-rows:104px minmax(0,1fr) auto 30px}
.masthead{gap:18px}nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;max-width:1100px;flex:1;min-width:0}nav button{padding:9px 7px;text-align:left;white-space:nowrap}nav button span{font-size:10px;margin-left:5px}.brand{font-size:10px;letter-spacing:1.2px}.brand small{font-size:6px}.head-actions{gap:5px}.local{margin-right:4px;font-size:8px}
@media(max-width:1050px){.masthead{gap:10px;padding:0 14px}.brand>span:last-child{display:none}nav{max-width:none}nav button{padding:9px 5px}nav button span{font-size:9px}.head-actions button{padding:3px 8px}}
@media(max-width:700px){body{grid-template-rows:144px minmax(0,1fr) auto 29px}.masthead{padding:8px 12px;gap:7px}.brand>span:last-child{display:block}.head-actions{margin-left:auto}nav{order:3;flex-basis:100%;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:3px}nav button{padding:6px 2px;text-align:center;font-size:7px}nav button span{display:block;margin:3px 0 0;font-size:8px}#controls{gap:6px}}

@media(max-width:1350px) and (min-width:701px){body{grid-template-rows:126px minmax(0,1fr) auto 30px}nav{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){body{grid-template-rows:180px minmax(0,1fr) auto 29px}}
/* Readable launcher labels; phones use a scrollable machine catalogue. */
nav button{font-size:11px;line-height:1.3}nav button span{font-size:12px;margin-left:5px}.brand{font-size:12px}.brand small{font-size:8px}.local{font-size:10px}#controls{font-size:12px}#controls button,#controls select{font-size:13px}#controls label{font-size:11px}footer{font-size:10px;letter-spacing:0}footer a{font-size:12px}dialog p,.guide-grid p{font-size:14px}dialog .eyebrow{font-size:10px}
@media(min-width:701px) and (max-width:1350px){nav button span{font-size:12px}nav button{padding:8px 6px}.brand small{display:none}}
@media(max-width:700px){body{grid-template-rows:124px minmax(0,1fr) auto 32px}.masthead{padding:9px 12px;gap:8px}.brand{font-size:12px}nav{display:flex;overflow-x:auto;scroll-snap-type:x proximity;justify-content:flex-start;gap:6px;scrollbar-width:thin;padding-bottom:4px}nav button{flex:0 0 126px;scroll-snap-align:center;white-space:normal;font-size:10px;min-height:47px;padding:6px}nav button span{font-size:12px;line-height:1.3;margin:3px 0 0}.head-actions button{font-size:16px;min-height:30px;min-width:32px}#controls{gap:6px;padding:8px}#controls button{font-size:12px;padding:7px 9px}footer #liveState{font-size:10px;max-width:61%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}footer a{font-size:11px;white-space:nowrap}.guide-grid article>span{font-size:11px}}
body{grid-template-columns:minmax(0,1fr);width:100%;min-width:0}body>header,body>main,body>section,body>footer{min-width:0;max-width:100%}.masthead,nav{min-width:0}footer>*{min-width:0}

#credit{color:#626a74;white-space:nowrap}#credit:hover,#credit:focus-visible{color:var(--accent)}@media(max-width:700px){#credit .credit-long{display:none}}