:root{--paper:#f5f2eb;--ink:#292b35;--muted:#65656d;--line:#d9d6cf;--plum:#574269;--green:#245d50;--amber:#a95226;--mono:Consolas,'Cascadia Code',monospace;--shadow:0 14px 35px #35303d10}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 'Segoe UI',Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button,a,summary,input,textarea{outline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #9454b7}[hidden]{display:none!important}button{border:0}a{color:inherit}.skip{position:fixed;top:-100px;left:12px;background:white;padding:14px;z-index:30}.skip:focus{top:12px}.topbar{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:10px;letter-spacing:1.8px}.brand strong{display:block;font-family:Georgia,serif;font-size:25px;letter-spacing:-.6px;font-weight:400;line-height:1.25}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:var(--plum);color:#f6d498;font-size:34px}.top-actions{display:flex;align-items:center;gap:26px}.world-label{font-size:10px;letter-spacing:2px;color:var(--muted)}.quiet{background:transparent;color:var(--plum);font-size:13px;min-height:40px;padding:8px 10px;text-decoration:underline;text-underline-offset:4px}.top-actions .quiet{text-decoration:none}#spark-count{display:inline-block;border-radius:30px;padding:3px 10px;margin-left:9px;background:#e7dfed;color:var(--plum);font:12px var(--mono)}main{max-width:1280px;margin:auto;padding:0 40px}#path{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:22px 0 25px}.area-title{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:10px}.area-title strong{font-weight:600}.area.active .area-title{color:var(--plum)}.spark-track{display:flex;gap:6px}.spark-track button{height:7px;min-height:26px;position:relative;flex:1;background:transparent;border-radius:8px;padding:0}.spark-track button:before{content:'';position:absolute;left:0;right:0;top:10px;height:5px;border-radius:8px;background:#d8d3d8}.spark-track button.earned:before{background:var(--green)}.spark-track button[aria-current]:before{background:#a977b1;box-shadow:0 0 0 3px #a977b120}.spark-track button:disabled{opacity:.7}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:start;padding:8px 0 35px}.eyebrow{color:var(--plum);font-size:10px;letter-spacing:1.6px;font-weight:700;display:flex;justify-content:space-between;margin:0 0 12px}.eyebrow span+span{color:var(--muted);letter-spacing:.4px}h1{font:400 clamp(30px,3vw,42px)/1.12 Georgia,serif;letter-spacing:-1.2px;margin:0 0 20px;max-width:490px}.goal{font-size:18px;font-weight:600;margin:0 0 9px}.cue{font-size:14px;color:var(--muted);margin:0 0 22px;min-height:42px;max-width:490px}.editor-card{background:#fffefa;border:1px solid #d7d0df;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}.editor-toolbar{padding:9px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e0eb;color:var(--plum);font-size:10px;letter-spacing:1.2px;background:#efebf2}.editor-toolbar button{background:transparent;color:var(--plum);font-size:12px;min-height:32px;padding:4px 6px}#editor{display:block;width:100%;height:156px;min-height:156px;padding:21px 20px;border:0;resize:none;overflow:auto;font:18px/1.8 var(--mono);color:#493252;background:#fffefa;tab-size:4;white-space:pre;caret-color:#9828a1}#editor.expanded{height:310px}#editor:focus{outline:none;box-shadow:inset 3px 0 #9369a7}#editor[readonly]{background:#f6f3f7}.editor-footer{display:flex;justify-content:space-between;gap:12px;padding:8px 16px;border-top:1px solid #eee8e4;color:#77707c;font-size:10px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:17px}.primary,.secondary{border-radius:8px;min-height:44px;padding:10px 19px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary{background:var(--plum);color:#fff;box-shadow:0 3px 0 #35243f}.primary:hover{background:#6a507c}.secondary{background:#ece7ef;color:var(--plum);border:1px solid #d7c9df}.shortcut{color:var(--muted);font-size:10px;margin-left:auto}.feedback{padding:14px 16px;margin-top:18px;border-radius:9px;background:#e5eee7;border:1px solid #b9d1c2;font-size:14px}.feedback strong{display:block;margin-bottom:4px;color:var(--green)}.feedback.error{background:#fcf0e3;border-color:#dec9ae}.feedback.error strong{color:#864c22}.feedback p{margin:3px 0}.feedback ul{margin:8px 0;padding-left:20px;overflow-wrap:anywhere}.scene{min-width:0;border-radius:15px;background:#eae6df;border:1px solid #d8d2c9;overflow:hidden;box-shadow:var(--shadow)}.scene-heading{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:15px 20px;background:#efebe5;border-bottom:1px solid #d7d1c8}.scene-heading h2{font:600 10px 'Segoe UI',sans-serif;letter-spacing:1.2px;margin:0}.scene-heading>span{font-size:10px;color:var(--muted)}.workshop{position:relative;isolation:isolate;padding:27px 31px 0;overflow:hidden}.back-grid{z-index:-1;position:absolute;inset:0;background-image:radial-gradient(#b5ada355 .8px,transparent .8px);background-size:18px 18px}.device{border:1px solid #a49d99;border-radius:15px;padding:15px;background:linear-gradient(135deg,#ede8df,#cfc7bd);box-shadow:0 12px 0 -4px #a3988d,0 18px 22px #544b4033;position:relative}.device-label{font:10px var(--mono);color:#5c5655;display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}#power-led{display:inline-block;width:7px;height:7px;background:#8d8d84;border:1px solid #76796d;border-radius:50%;margin-right:7px}#power-led.on{background:#8cca92;box-shadow:0 0 9px #65b587}.screws{color:#8e857d;font-size:16px}.screen{border-radius:8px;background:#263b37;border:4px solid #b1a69a;min-height:174px;color:#d5e7d3;position:relative;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 2px 12px #0003}.screen.awake{background:#25423b}#idle{text-align:center;padding:20px 10px}.idle-symbol{font-size:30px;letter-spacing:8px;line-height:1}#idle p{margin:12px 0 4px;font-size:16px}#idle span{font-size:11px;color:#a7bcb1}#message{background:#faf7ee;color:#323a36;border-radius:4px;margin:10px;box-shadow:0 6px 12px #0003;animation:wake .25s ease-out}.message-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;border-bottom:1px solid #e4dfd2;padding:9px 12px;color:#74766b}#message-text{font-size:21px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:230px;overflow:auto;margin:0;padding:20px 14px;min-height:70px}.message-bottom{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid #eee6da}.message-bottom span{font-size:10px;color:#727168}.message-bottom button{min-height:34px;padding:6px 22px;font-size:12px;background:var(--green);box-shadow:none}.device-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 0;color:#6a625b;font-size:8px;letter-spacing:.7px}.vents{font-size:10px;color:#989087;letter-spacing:2px}.flow{margin:21px 0 12px;min-height:24px;text-align:center;color:#55534f;font-size:12px;overflow-wrap:anywhere}.flow.pulse #flow-label{animation:travel .5s ease-out}#flow-label code{font-family:var(--mono)}.storage{margin:14px 0 18px}.storage-label{font-size:9px;letter-spacing:1.2px;display:flex;justify-content:space-between;color:#68685e;margin-bottom:9px}.storage-label span{letter-spacing:0}#boxes,.demo-boxes{display:flex;flex-wrap:wrap;gap:10px}.storage-box{flex:1;min-width:90px;border:1px solid #a9bca8;background:#ecf0df;border-radius:5px 5px 9px 9px;box-shadow:0 4px 0 #bcc7ae;overflow:hidden}.storage-box strong{display:block;background:#d7e2c8;border-bottom:1px solid #b5c5a7;padding:5px 10px;color:#3c5947;font:12px var(--mono)}.storage-box span{display:block;padding:12px 10px;white-space:pre-wrap;overflow-wrap:anywhere;color:#2f4f3c;font:17px var(--mono);max-height:130px;overflow:auto}.storage-box.changed{animation:box-arrive .5s ease-out;border-color:#638767}.storage-box.read{box-shadow:0 0 0 3px #b4cba4}.storage-empty{padding:12px;border:1px dashed #bbb7a8;color:#767264;font-size:12px;width:100%;border-radius:7px}.bench{height:11px;background:#b9a18b;margin:0 -32px;border-top:3px solid #ccb8a4;box-shadow:0 4px 0 #95806e}.components{display:flex;justify-content:space-between;gap:8px;padding:18px 0 14px}.component{color:#6d6860;font-size:9px;display:flex;align-items:center;gap:5px}.component i{font-style:normal;color:#9d9489;font-size:17px;line-height:1}.component.restored i{color:var(--green);text-shadow:0 0 9px #b0cdab}.workshop.complete .device{background:linear-gradient(130deg,#eee4cd,#b7c6a6)}.workshop.complete .back-grid{background-color:#e1e8d6}.workshop.celebrate .device{animation:box-arrive .5s ease-out}.execution{background:#f6f3ec;border-top:1px solid #d5cfc3;padding:14px 20px}.execution-top{display:flex;align-items:center;justify-content:space-between;min-height:23px;color:#77706c;font-size:9px;letter-spacing:1px}.execution-top button{font-size:11px;min-height:25px;padding:2px 4px}.trace{display:grid;gap:5px;margin-top:9px;max-height:200px;overflow:auto}.trace-line{display:flex;align-items:flex-start;gap:9px;border-radius:5px;padding:5px 8px;font:13px/1.6 var(--mono);color:#827a86;background:transparent;text-align:left;width:100%;min-width:0}.trace-line code{white-space:pre-wrap;overflow-wrap:anywhere}.trace-line .line-num{min-width:18px;font-size:10px;color:#8c8293;line-height:2}.trace-line.current{background:#e8deef;color:#543467;box-shadow:inset 3px 0 #9c70b2}.trace-line.finished{color:#476b56}.trace-line.error-line{background:#fae4cc;color:#884923}.execution>p{margin:9px 0 0}.execution>.primary{margin-top:12px;width:100%}.simulation-note{background:#f6f3ec;color:#777168;font-size:10px;margin:0;padding:0 20px 15px;line-height:1.6}#message-history{font-size:12px;padding-left:22px;max-height:140px;overflow:auto;overflow-wrap:anywhere}#history{border-top:1px solid #ddd6ce;margin-top:13px;padding-top:9px}.small{font-size:12px;color:var(--muted);line-height:1.6}.muted{color:var(--muted);font-weight:400}details{border-top:1px solid var(--line);margin-top:18px;padding-top:12px;font-size:13px}summary{cursor:pointer;color:#54485b;font-weight:600;padding:4px 0;min-height:28px}.code-parts{display:grid;gap:7px;margin:13px 0}.code-part-line{display:flex;flex-wrap:wrap;gap:3px;align-items:center}.code-part-line>span{font:10px var(--mono);color:var(--muted);margin-right:4px}.token{background:#ebe5ef;padding:6px 5px;border-radius:4px;font:14px var(--mono);color:#4e3f59;overflow-wrap:anywhere;max-width:100%;white-space:pre-wrap}.token.string{background:#e4ecd9;color:#3c664a}.token.assign{background:#f2dfc6;color:#895d30}.token.selected{box-shadow:0 0 0 2px #836496}#part-explanation{border-left:3px solid #9874a7;padding:9px 12px;background:#efeaf1;font-size:13px}label{font-size:13px}input[type=text],input:not([type]){display:block;width:100%;margin:7px 0 10px;border:1px solid #c5bacb;background:#fffefa;border-radius:7px;padding:10px 12px;color:var(--ink);min-width:0}#notice-setting{margin:0 0 18px}.button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.button-row button{max-width:100%}#piece-buttons button{font:12px var(--mono);white-space:pre-wrap;text-align:left}.warning{background:#ffecd5;border:1px solid #d4b98e;border-radius:8px;padding:12px 16px;font-size:13px}.world-complete{display:flex;gap:24px;padding:30px;margin:0 0 30px;border:1px solid #bccbb2;border-radius:16px;background:#e9eedf}.world-complete h2{font:30px/1.2 Georgia,serif;margin:0 0 14px;letter-spacing:-.5px}.world-complete p{max-width:650px}.completion-mark{font-size:64px;color:#54704f;line-height:1}.world-complete .eyebrow{justify-content:flex-start}footer{border-top:1px solid var(--line);padding:16px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}footer .quiet{font-size:11px}dialog{width:min(610px,calc(100% - 28px));max-height:87vh;overflow:auto;border:1px solid #bdb1c4;border-radius:16px;background:var(--paper);color:var(--ink);padding:32px;box-shadow:0 30px 80px #1d182740}dialog::backdrop{background:#28223088;backdrop-filter:blur(3px)}dialog h2{font:30px/1.2 Georgia,serif;letter-spacing:-.6px;margin:0 25px 20px 0}dialog .eyebrow{justify-content:flex-start}dialog p{font-size:14px}.close{position:absolute;right:10px;top:10px;min-width:36px;min-height:36px;font-size:25px;background:transparent;color:var(--plum)}.help-tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}.help-tabs button{padding:9px 12px;background:#e8e1ed;border:1px solid #d7cbdc;border-radius:6px;color:var(--plum);font-size:12px}.help-tabs button.active{background:var(--plum);color:white}.demo-lines{display:grid;gap:5px;margin-bottom:16px}.demo-lines code{font:15px/1.8 var(--mono);padding:6px 10px;overflow-wrap:anywhere;white-space:pre-wrap}.demo-lines code.active{background:#e5d8ee;border-radius:5px}.demo-message{padding:20px;border:1px solid #bbc9b1;background:#e6eddc;margin-top:14px;white-space:pre-wrap;overflow-wrap:anywhere}pre{font:15px/1.8 var(--mono);background:#ebe5ef;padding:17px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}#progress-list{display:grid;gap:0;margin-bottom:18px}.progress-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:10px 0;font-size:12px}.progress-row button{background:transparent;color:var(--plum);text-align:left;font-size:12px;padding:3px 0}.progress-row span{font-size:10px;color:var(--green);text-align:right}.file-button{position:relative;cursor:pointer;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within{outline:3px solid #9454b7;outline-offset:3px}.sound-setting{display:flex;align-items:center;gap:9px;margin-top:22px}.sound-setting input{accent-color:var(--plum);width:18px;height:18px}#import-confirm{background:#e8e1ed;padding:15px;border-radius:8px}#help-text{font-size:16px;line-height:1.7}.shake{animation:wake .3s ease-out}@keyframes wake{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes travel{from{opacity:.2;transform:translateY(-9px)}to{opacity:1;transform:none}}@keyframes box-arrive{50%{transform:translateY(-3px);filter:brightness(1.06)}}
@media(max-width:1050px){.workspace{gap:30px}.topbar{padding:20px 28px}main{padding:0 28px}.workshop{padding:24px 20px 0}.shortcut{display:none}.scene-heading{padding:14px}.device{padding:12px}.device-bottom{font-size:7px}.component{font-size:8px}.cue{min-height:0}.area-title{font-size:11px}}
@media(max-width:780px){.workspace{grid-template-columns:1fr;gap:26px;max-width:580px;margin:auto}.topbar{padding:18px 20px}main{padding:0 20px}.world-label{display:none}.brand{font-size:8px}.brand strong{font-size:23px}.top-actions{gap:0}.top-actions .quiet{font-size:11px}#spark-count{margin-left:3px;padding:3px 6px}#path{gap:10px;padding:18px 0}.area-title{font-size:10px}.area-title span{display:none}h1{font-size:35px}#editor{font-size:17px;height:156px}#editor.expanded{height:310px}.scene{margin-top:0}.world-complete{padding:23px;gap:14px}.completion-mark{display:none}footer{align-items:flex-start;flex-direction:column;gap:0}.scene-heading{padding:15px 20px}.workshop{padding:25px 28px 0}.component{font-size:9px}.device-bottom{font-size:8px}.actions{gap:8px}.actions>.primary{min-width:120px}dialog{padding:28px 22px}.goal{font-size:17px}}
@media(max-width:400px){main{padding:0 14px}.topbar{padding:16px 14px}.brand-icon{width:35px;height:35px;font-size:28px}.brand{gap:8px}.brand strong{font-size:20px}#spark-count{display:none}.workshop{padding:20px 15px 0}.component{font-size:8px}.scene-heading>span{max-width:90px;text-align:right}.area-title strong{font-size:9px}h1{font-size:31px}.world-complete .button-row>*{width:100%}}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
dialog .close{position:sticky;top:0;float:right;margin:-15px -12px 0 0;background:var(--paper);z-index:3;border-radius:7px}
#idle-message{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.components{gap:7px;padding-top:19px;padding-bottom:17px}.component{flex:1;position:relative;padding:11px 5px 8px;border:1px solid #c6bdb2;border-top:4px solid #b7aba0;border-radius:4px;background:#ded7cc;box-shadow:0 3px 0 #c1b4a5;justify-content:center;transition:background .3s,border-color .3s}.component.restored{background:#e1ead8;border-color:#a2b396;border-top-color:#668968;box-shadow:0 3px 0 #a5b598}.area-1-restored .bench{border-top-color:#8da77d}.area-2-restored .storage{border-radius:8px;box-shadow:0 0 0 5px #cedcc240}.complete .device-label{color:#365b45}.complete .device-bottom{color:#3c5e46}
.editor-layout{display:grid;grid-template-columns:38px minmax(0,1fr);background:#fffefa;position:relative}.editor-content{position:relative;min-width:0}#line-gutter{position:relative;overflow:hidden;border-right:1px solid #e7e0eb;background:#f5f1f7;color:#93859b;user-select:none}#line-numbers{position:absolute;top:0;left:0;right:0;padding:21px 7px 21px 0;text-align:right;font:18px/1.8 var(--mono)}#line-numbers>div{height:1.8em;font-size:inherit}#line-numbers>div.active{color:#614074;font-weight:700;background:#e7d9ee}
#editor-overlay{position:absolute;inset:0;overflow:hidden;pointer-events:none}#editor-lines{padding:21px 20px;font:18px/1.8 var(--mono);color:transparent;min-width:100%;width:max-content}.editor-line{height:1.8em;white-space:pre;min-width:100%}.editor-line.active{background:#eee4f3;box-shadow:-4px 0 #9671a6}.matching-brace{background:#dfc8ec;border-radius:3px;outline:1px solid #b49ac2;color:transparent}#editor,#editor[readonly]{position:relative;background:transparent}.editor-line.active .matching-brace{background:#d4b4e5}.line-cue{font-size:12px;line-height:1.5;margin:9px 1px 0;color:#66536f;overflow-wrap:anywhere}.practice-tools{border-top:1px solid var(--line);margin-top:20px;padding-top:8px}.practice-tools .secondary{font-size:12px;padding:8px 12px;min-height:38px}.in-group{border-left:3px solid #ac93ba!important;border-right:1px solid #d8cbdf;background:#f1eaf4}.trace-line.in-group{margin-left:5px;width:calc(100% - 10px);border-radius:0}.trace-line.group-edge{background:#e7ddea;color:#624474}.trace-line.group-edge:first-child{border-radius:7px 7px 0 0}.trace-line.group-edge:last-child{border-radius:0 0 7px 7px}.token.paired{background:#d8c2e6;outline:1px solid #ac8bbf}.help-options{margin:18px 0}#hint-fragment{display:inline-block;font:18px/1.8 var(--mono);padding:6px 14px;background:#ebe1f0;border-radius:6px}.demo-lines code{display:block}.earned-evidence{font-size:12px;color:#345c43}.evidence-list{font-size:12px;padding-left:20px;max-height:240px;overflow:auto}.evidence-list li{margin-bottom:8px}
@media(max-width:780px){#editor-lines,#line-numbers{font-size:17px}.editor-layout{grid-template-columns:34px minmax(0,1fr)}}
#hint-fragment{white-space:pre}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* World 2 keeps the bench materials and adds a tactile, programmable key station. */
.world-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 8px;border-bottom:1px solid var(--line,#d8d4cb);padding-bottom:12px}
.world-nav [aria-current="page"]{color:#245c50;background:#e4ebdf;border-radius:6px}
.world-nav .small{flex:1;min-width:180px;margin:0}
.switchboard{position:relative;z-index:1;margin:0 0 22px;padding:20px;border:1px solid #a9afa1;border-radius:12px;background:linear-gradient(125deg,#e0e5d8,#c5ccba);box-shadow:inset 0 2px 0 #f8f9ef,0 8px 0 -4px #a7ae9c,0 12px 22px #35493218;color:#263c35}
.board-label{display:flex;justify-content:space-between;gap:12px;font:10px monospace;letter-spacing:1.2px}
.board-lights{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin:16px 0}
.board-lights span{text-align:center;border-radius:3px;border:1px solid #a3aa9c;background:#b8bfae;font:10px monospace;padding:6px 0;color:#4c5849}
.board-lights .lit{background:#2c6153;border-color:#285748;color:#f7f2cb;box-shadow:0 0 7px #d9eea755}
#board-status{font-size:14px;line-height:1.5;margin:14px 0;min-height:42px}
.held-keys,.board-keys{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0}
.held-keys button,.board-key{padding:11px 18px;background:#faf8ef;color:#364138;border:1px solid #939b88;border-bottom:4px solid #8f9884;border-radius:7px;min-width:56px;font-size:15px;box-shadow:0 2px 3px #30433118}
.held-keys small{margin-left:8px;color:#6e607e}
.held-keys button[aria-pressed="true"]{background:#dcd1e6;border-color:#715883;border-bottom-width:2px;transform:translateY(2px)}
.board-key.connected{border-top:3px solid #2f7661}
.board-key:active{transform:translateY(2px);border-bottom-width:2px}
.board-key:disabled{opacity:.65}
.connections{border-top:1px solid #9ca98f;padding-top:10px;margin-top:10px}
.connection{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12px;flex-wrap:wrap}
.connection kbd{background:#f7f6ed;border:1px solid #a3ad97;border-radius:4px;padding:5px 8px}
.connection.active kbd{background:#dacbea;color:#453356}
.signal-wire{display:flex;align-items:center;gap:8px;margin-top:15px;font:8px monospace;letter-spacing:.7px}
.signal-wire i{position:relative;height:3px;flex:1;background:#8b9b80;overflow:hidden}
.signal-wire.travel i::after{content:'';position:absolute;width:18px;height:100%;opacity:0;background:#faf3a3;box-shadow:0 0 5px #fff4a0;animation:signal-travel .7s ease-out}
.signal-wire.travel i:nth-of-type(2)::after{animation-delay:.2s}
@keyframes signal-travel{from{left:-20px;opacity:1}90%{opacity:1}to{left:100%;opacity:0}}
.keyboard-note{margin-bottom:0;font-size:10px;color:#4f604b}
.switch-world .device{margin-top:8px}
.switch-world .components{margin-top:22px}
#reminder-setting{margin:0 0 18px}
#switch-experiments p{font-size:13px;line-height:1.6}
.next-world{border-top:1px solid #bfc4af;padding-top:18px;color:#4b6357}
#switch-complete .button-row{flex-wrap:wrap}
@media(max-width:600px){.switchboard{padding:15px}.board-label{font-size:9px}.board-lights{gap:3px}.board-lights span{font-size:9px}.held-keys button,.board-key{padding:10px 14px}.world-nav{gap:6px}.signal-wire{font-size:7px;gap:4px}}
@media(prefers-reduced-motion:reduce){.signal-wire.travel i::after{animation:none;left:50%;opacity:1}}
/* Sorting Bay uses the same workshop materials, panels and motion vocabulary. */
/* Dispatch Desk adds receiving fields using the existing bench materials. */
.dispatch-desk{position:relative;margin:0 0 22px;padding:18px;border:1px solid #a9afa1;border-radius:12px;background:linear-gradient(125deg,#e6e5d7,#d2d9c8);box-shadow:inset 0 2px #faf8ef,0 6px 0 -3px #a8af9d}.dispatch-terminals{display:grid;grid-template-columns:1fr;gap:12px}.terminal-card{padding:12px;border:1px solid #b5b6a7;border-radius:7px;background:#e8e7dc;min-width:0}.terminal-card label{display:block;font-size:11px;margin:10px 0 7px}.terminal-card textarea{display:block;width:100%;resize:vertical;min-height:90px;max-height:240px;background:#fffdf4;border:1px solid #b6b49f;border-radius:5px;padding:10px;font:14px/1.5 var(--mono);color:#263c35;white-space:pre-wrap;overflow-wrap:anywhere}.terminal-card .active-destination{display:none;font-size:10px;color:#315c48;margin-top:8px}.terminal-card.active{border-color:#547f67;box-shadow:inset 4px 0 #547f67}.terminal-card.active .active-destination{display:block}.terminal-card [aria-pressed="true"]{background:#dce8d5;border-color:#547f67;color:#315c48}.terminal-card.delivered textarea{animation:dispatch-arrival .65s ease-out}#dispatch-status{font-size:13px;line-height:1.5}#dispatch-deliveries{max-height:100px;overflow:auto;padding-left:20px}.dispatch-note{font-size:10px;color:#65715c}#dispatch-message-setting{margin-bottom:18px}.demo-typed{padding:12px;border:1px solid #9eae8f;background:#f8faec;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono)}#dispatch-guidance{font-size:12px;line-height:1.5;color:#53465e;margin:-4px 0 20px}#dispatch-guide-action{margin:0 0 7px}#dispatch-guide-meaning{font-size:11px;color:#716775;margin:0}#dispatch-guide-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px 8px;padding:0;margin:0 0 9px;font-size:11px}#dispatch-guide-steps li{border-bottom:2px solid #d8d2dc;padding:3px 0;color:#756c7b}#dispatch-guide-steps .done{border-color:#698774;color:#315c48}#dispatch-guide-steps .current{border-color:#76558b;color:#4a315e;font-weight:700}.dispatch-guide-next{outline:3px solid #9875ab!important;outline-offset:4px}#dispatch-guide-steps[hidden]{display:none}@keyframes dispatch-arrival{50%{background:#e1edcf}}
#sort-guidance{margin:-4px 0 20px;font-size:12px;line-height:1.5;color:#53465e}#sort-guide-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px 8px;padding:0;margin:0 0 9px;font-size:11px}#sort-guide-steps li{border-bottom:2px solid #d8d2dc;padding:3px 0;color:#756c7b}#sort-guide-steps li.done{border-color:#698774;color:#315c48}#sort-guide-steps li.current{border-color:#76558b;color:#4a315e;font-weight:700}#sort-guide-action{margin:0 0 7px}#sort-guide-meaning{margin:0;font-size:11px;color:#716775}.sort-guide-next{outline:3px solid #9875ab!important;outline-offset:4px}#sort-guide-steps[hidden]{display:none}@media(max-width:440px){#sort-guide-steps{font-size:10px;gap:4px}}
.sorting-bay{margin:0 0 22px;padding:18px;border:1px solid #b1ac98;border-radius:12px;background:linear-gradient(125deg,#ece6d8,#d7d9c6);box-shadow:inset 0 2px #fff9e8,0 6px 0 -3px #b1ad9e;position:relative}
.sort-infeed{display:flex;flex-direction:column;align-items:center;margin:18px 0 14px;gap:6px}
.sort-package{border:1px solid #bba581;background:linear-gradient(90deg,#dfc69e 45%,#eee0be 45%,#eee0be 55%,#dfc69e 55%);border-radius:5px;padding:12px 20px;max-width:100%;text-align:center;box-shadow:0 4px 0 #b6a183}
.sort-package span,.sort-gate>span{display:block;font:9px var(--mono);letter-spacing:1px;color:#6e6054}
.sort-package strong{display:block;margin-top:7px;background:#faf5e8;border:1px solid #c9b997;border-radius:3px;padding:5px 10px;font:16px var(--mono);overflow-wrap:anywhere}
.sort-arrow{color:#908f7f;font-size:22px}.sort-gate{width:100%;border:1px solid #a6a695;border-radius:7px;text-align:center;padding:10px;background:#f3f1e4}.sort-gate p{margin:5px 0;font:13px/1.5 var(--mono);overflow-wrap:anywhere}
.sort-roads{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sort-road{border:1px solid #bcb7a7;border-top:5px solid #aba998;border-radius:5px;padding:12px 10px;background:#e4e1d7;font-size:12px}.sort-road p{font-size:11px;margin:5px 0 0}.road-light{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9e9e91;margin-right:7px}.sort-road.selected{background:#e2eadb;border-color:#72947b;border-top-color:var(--green)}.sort-road.selected .road-light{background:#74b589;box-shadow:0 0 8px #74b589}.sort-road.skipped{opacity:.6}.sorting-bay.route-if .sort-package{animation:sort-left .6s ease-out}.sorting-bay.route-else .sort-package{animation:sort-right .6s ease-out}.sort-note{font-size:10px;color:#777465;margin-bottom:0}#sort-scenarios{margin-top:14px;flex-wrap:wrap}#sort-scenarios .small{flex-basis:100%}#sort-messages{margin-bottom:20px}#sort-messages label{margin-top:8px}.trace-line.skipped,.demo-lines .skipped{opacity:.55;border-left:3px dashed #9a958c!important}.trace-line.selected-branch{border-left-color:var(--green)!important}.skip-label{font:9px var(--mono);margin-left:auto;color:#70675d}.sorting-bay.waiting .sort-package{animation:none}@keyframes sort-left{50%{transform:translateX(-25px)}}@keyframes sort-right{50%{transform:translateX(25px)}}