:root{--ink:#193e35;--muted:#6b7b68;--paper:#f7f5e9;--green:#245b46;--gold:#e8b955;--line:#dbdfce}*{box-sizing:border-box}body{margin:0;background:#e8ecdf;color:var(--ink);font-family:ui-rounded,'Avenir Next',system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fffdf5;color:var(--ink);font-weight:700;padding:10px 15px}button:hover{background:#eef2df}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #c07626;outline-offset:3px}button.active{background:var(--green);color:white;border-color:var(--green)}main{max-width:1600px;margin:auto;padding:22px 28px 14px}header{display:flex;align-items:center;gap:22px;padding-bottom:20px}.brand{display:flex;align-items:center;gap:12px;flex:1}.brand-icon{background:var(--green);color:#f3d789;border-radius:14px;padding:7px 14px;font-size:32px}small{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--muted)}h1{font-family:Georgia,serif;font-size:28px;letter-spacing:-1px;margin:3px 0}nav{display:flex;background:#d9dfcf;border-radius:14px;padding:4px;gap:3px}nav button{border:0;background:transparent}nav span{color:#e8b955;margin-left:5px}.round{font-size:23px;padding:8px 14px}.conductor-bar{display:flex;gap:15px;align-items:center;background:var(--paper);padding:10px 18px 10px 10px;border-radius:18px 18px 0 0;border:1px solid var(--line)}.conductor{padding:0;flex-shrink:0;width:58px;height:62px;min-height:0;border-radius:13px;background:#dce7de;overflow:hidden}.conductor svg{width:100%;height:100%}.conductor-bar>div{flex:1}.conductor-bar p{font-size:16px;margin:5px 0;line-height:1.35}.hear{background:#efe8cf;border:0;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 235px;background:var(--paper);border:1px solid var(--line);border-top:0}.map-wrap{position:relative;overflow:hidden;min-height:440px;background:#b4cd91;aspect-ratio:1.55}#world{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.map-tag{position:absolute;top:16px;left:16px;background:#fff9e9e8;border:1px solid #fff;border-radius:10px;padding:10px 14px;pointer-events:none;font-family:Georgia,serif;font-size:17px;box-shadow:0 3px 10px #27432412}.map-tag i{display:inline-block;width:8px;height:8px;background:#5a8559;border-radius:50%;margin-right:7px}.map-tag span{display:block;font-family:system-ui;font-size:8px;letter-spacing:1.7px;margin-top:4px;color:var(--muted)}.map-button{position:absolute;left:16px;bottom:16px;background:#fff9e9ed}.map-button:disabled{opacity:.4}#toast{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:12px;padding:12px 18px;pointer-events:none;opacity:0;transition:opacity .2s;max-width:75%;text-align:center}aside{padding:22px 17px;border-left:1px solid var(--line)}h2{font-size:17px;margin:0}.tool-heading{display:flex;justify-content:space-between;align-items:center}.tool-heading span{color:#85916f;font-size:23px}.hint{font-size:12px;color:var(--muted);line-height:1.5;margin:7px 0 13px}.pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.pieces button{padding:3px;height:57px;touch-action:none}.pieces svg{width:100%;height:45px}.pieces button.active{background:#e3ebd5;border:2px solid #386645}.build-tools{display:flex;gap:7px;margin:12px 0 7px}.build-tools button{flex:1;font-size:12px;padding:9px 5px}#rotate,#whistle{width:100%;font-size:12px;background:transparent}.divider{height:1px;background:var(--line);margin:18px 0}.trains{display:flex;gap:7px;margin:10px 0}.trains button{flex:1;padding:4px;min-width:0}.trains svg{width:100%;height:30px}.trains span{font-size:9px;display:block}.tip{display:flex;gap:9px;color:var(--muted);font-size:11px;line-height:1.6;margin-top:12px}.tip span{font-size:25px;color:#bd943d}.tip p{margin:0}footer{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;padding:14px 18px}.go,.primary{background:var(--green);color:white;border:0}.go{min-width:158px;font-size:17px}.go.running{background:#ac633d}.secondary{background:#edeeda}.speed{display:flex;align-items:center;gap:12px;font-size:12px;flex:1;padding:0 14px}.speed input{width:100%;max-width:250px;accent-color:var(--green);height:40px}.saved{font-size:11px;color:var(--muted);white-space:nowrap}dialog{border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);padding:30px;max-width:620px;width:90%;max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #16382a55}dialog::backdrop{background:#153d3670}dialog h2{font-family:Georgia,serif;font-size:32px;margin:10px 35px 10px 0}dialog p{line-height:1.6}dialog .close{position:absolute;right:15px;top:15px;font-size:24px;border:0;background:transparent}#choices{display:flex;gap:15px;justify-content:center;margin:25px 0}#choices button{flex:1;font-size:23px;min-height:120px;background:#fffdf5;border:2px solid #dbe2c8}#choices button span{display:block;font-size:52px}#activityFeedback{min-height:28px;font-weight:700}#trace{width:100%;height:auto;background:#fffdf5;border-radius:16px;touch-action:none;margin-top:14px}.setting{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.setting input{width:25px;height:25px;accent-color:var(--green)}#options>button:not(.close){margin:5px}#options p{font-size:13px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:1050px){main{padding:12px}.workspace{grid-template-columns:minmax(0,1fr) 200px}aside{padding:16px 12px}h1{font-size:24px}.map-wrap{min-height:390px}.saved{display:none}.conductor-bar p{font-size:14px}.tip{margin-top:7px}}@media(max-width:700px){main{padding:7px}header{gap:8px;flex-wrap:wrap;padding:6px 0 10px}.brand-icon{display:none}h1{font-size:22px}header small{font-size:8px}nav{order:3;width:100%}nav button{flex:1}.workspace{grid-template-columns:1fr}.map-wrap{min-height:0;aspect-ratio:1.1}aside{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:9px}.tool-heading,.hint,.tip,.divider{display:none}.pieces{grid-column:1/-1;grid-template-columns:repeat(6,1fr)}.pieces button{height:50px}.build-tools{margin:0}#rotate{width:auto}aside h2{display:none}.trains{margin:0}#whistle{width:auto}footer{flex-wrap:wrap;padding:10px;gap:8px}.go{min-width:0;flex:1}.speed{flex-basis:100%;padding:0;justify-content:center}.speed input{max-width:none}.conductor-bar{padding:8px;gap:8px}.conductor{width:44px;height:50px}.hear span{display:none}.hear{padding:8px}.map-tag{top:8px;left:8px;font-size:13px;padding:7px}.map-tag span{font-size:6px}dialog{padding:24px}dialog h2{font-size:27px}}

@media(min-width:701px){aside{padding:15px 14px}.divider{margin:12px 0}.pieces button{height:52px}.hint{margin:6px 0 10px}.trains{margin:8px 0}.tip{margin-top:7px}.tip p{font-size:10px}.build-tools{margin:8px 0 6px}header{padding-bottom:13px}main{padding-top:14px}.map-wrap{min-height:490px}}
@media(min-width:701px){.map-wrap{aspect-ratio:auto;min-width:0;width:100%;min-height:490px}}
#choices:empty,#activityFeedback:empty{display:none}footer{position:sticky;bottom:0;z-index:2}dialog{z-index:10}
.camera{position:absolute;right:14px;top:14px;background:#244d48;color:#fff5db;border:1px solid #638177;box-shadow:0 3px 8px #17332a33;font-size:12px}footer{background:linear-gradient(#35474a,#223439);border-color:#1a3136}.speed,.saved{color:#e8e5d5}footer .secondary{background:#506264;color:#fff4d6;border-color:#647879}footer .go{background:#c39742;color:#172d2c;border:1px solid #e1c580}.go.running{background:#b65e42;color:white}.speed input{accent-color:#d8b462}.brand-icon{font-size:0}.brand-icon:after{content:'🚂';font-size:26px}.map-tag{font-family:system-ui;font-weight:700}
.camera:hover,.camera:focus{background:#376760;color:#fff5db}
:root{--ink:#1d3549;--muted:#607386;--paper:#f1f4f6;--green:#24465c;--line:#cad5de}body{background:radial-gradient(ellipse at top,#243f59,#0d1e32 85%)}header .brand{color:#f7f0dc}header small{color:#afc5d4}nav{background:#183044}nav button{color:#dfebf3}nav button.active{background:#42657b}.conductor-bar{padding:12px 18px 12px 12px;min-height:100px;background:linear-gradient(110deg,#e7edf1,#f8f4e9)}.conductor{width:78px;height:82px;background:radial-gradient(#cad7e0,#7994a7);border:2px solid #d0b66d}.conductor img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform:scale(1.17);transform-origin:50% 20%}.engine-art{width:100%;height:33px;object-fit:contain}.map-tag{background:#132b42db;color:#f9eac3;border-color:#6f8999}.map-tag span{color:#cadce7}.map-tag i{background:#ebc779}.camera{background:#24465cd9;color:#f6e6c0;border-color:#829bac}.map-wrap{background:#142b47}footer{background:linear-gradient(#233d51,#12283b)}.go{background:#d1ad57}aside .tip{color:#607386}dialog{background:#eef2f4}@media(max-width:700px){.conductor{width:62px;height:68px}.conductor-bar{min-height:86px}.conductor-bar p{font-size:12px}.map-tag span{max-width:130px;line-height:1.5}.camera{font-size:10px;right:8px;top:8px;padding:8px}}