@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/be-vietnam-pro-regular.ttf") format("truetype")}@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/be-vietnam-pro-semibold.ttf") format("truetype")}
:root{--ink:#293e36;--muted:#7d8979;--green:#365b45;--cream:#fbf9f1;--line:#e5e7da;--peach:#f2b98c;font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:1px solid var(--line);border-radius:10px;background:var(--cream)}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #db9957;outline-offset:3px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.topbar{height:88px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:19px;letter-spacing:2px;font-weight:800}.brand b{font-weight:400}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:5px}.brand-icon{display:grid;place-items:center;background:var(--green);color:#f7d58e;border-radius:14px 14px 14px 3px;font-size:33px;width:46px;height:46px}.world-state{display:flex;align-items:center;gap:13px;font-size:12px}.sun{color:#cc9a46;font-size:24px}.world-state i{height:15px;border-left:1px solid #d8ddcd}.live-dot{height:6px;width:6px;background:#79a16b;border-radius:50%;margin-left:16px}.quiet{padding:9px 13px;background:transparent}.topbar .quiet{font-size:12px}.topbar .quiet span{margin-left:6px}main{display:grid;grid-template-columns:310px minmax(0,1fr);height:calc(100dvh - 124px);min-height:670px}.sidebar{padding:27px 24px 14px;overflow:auto;border-right:1px solid var(--line);background:#fbfaf5;scrollbar-width:thin}.section-heading,.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-heading>span:last-child,.journey-heading>span{font-size:10px;color:var(--muted)}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#7d8b75}h1{font-family:"Be Vietnam Pro","Segoe UI",sans-serif;font-size:31px;font-weight:600;letter-spacing:normal;line-height:1.4;margin:16px 0 13px}h1>span{color:#bc8452}.intro{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:23px}h2{font-size:13px;margin:0;font-weight:600}.scenario-list{display:grid;gap:8px;margin:13px 0 24px}.scenario{display:flex;align-items:center;text-align:left;padding:12px;gap:11px;border:1px solid #e4e5da;background:transparent;border-radius:12px}.scenario.active{border-color:#82977d;background:#edf1e6;box-shadow:0 2px 0 #dbe2d3}.scenario-icon{width:34px;height:34px;display:grid;place-items:center;background:#eee8d9;border-radius:9px;font-size:19px}.scenario.active .scenario-icon{background:var(--green);color:#fbf6dd}.scenario strong{display:block;font-size:12px}.scenario small{font-size:10px;color:#89917f;display:block;margin-top:4px}.scenario .arrow{margin-left:auto;color:#7a8e73}.small-copy{font-size:11px;line-height:1.6;color:var(--muted);margin:10px 0}.route{list-style:none;margin:12px 0 0;padding:0}.route li{position:relative;padding:0 0 13px 28px;font-size:11px;line-height:18px;color:#84907e}.route li:before{content:attr(data-number);position:absolute;left:0;top:0;width:18px;height:18px;border:1px solid #d9decd;border-radius:50%;text-align:center;background:#fbfaf5;font-size:9px;z-index:1}.route li:not(:last-child):after{content:"";position:absolute;left:9px;top:18px;height:14px;border-left:1px dashed #ced6c2}.route li.current{color:#34563b;font-weight:700}.route li.current:before{background:#365b45;color:#fff;border-color:#365b45}.route li.done:before{content:"✓";background:#e7eedd;color:#658452}.route button{border:0;background:none;padding:0;text-align:left;font-size:inherit;color:inherit}.sidebar-note{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);margin-top:9px;padding-top:10px}.sidebar-note>span{font-size:25px;color:#98a98b}.sidebar-note p{font-size:10px;color:#96a08c;line-height:1.6}.world{position:relative;overflow:hidden;background:#dfead5;min-width:0}#village{position:absolute;inset:0}#village canvas{width:100%;height:100%;display:block;touch-action:none}.world-title{position:absolute;top:28px;left:30px;pointer-events:none}.world-title h2{font-family:"Be Vietnam Pro","Segoe UI",sans-serif;font-size:27px;font-weight:600;line-height:1.4;letter-spacing:normal;margin:8px 0}.world-title h2 span{color:#b28c53}.world-title p{font-size:10px;color:#6f826b}.world-title i{margin:0 8px;font-style:normal}.view-controls{position:absolute;right:22px;top:30px;display:grid;gap:7px}.view-controls button{height:36px;width:36px;font-size:19px;box-shadow:0 2px 8px #40563b0d;background:#faf9eeeb}.view-controls button:last-child{font-size:12px}.compass{position:absolute;bottom:232px;right:28px;display:grid;text-align:center;opacity:.6}.compass span{font-size:9px}.compass b{font-size:32px;font-weight:400}.map-hint{max-width:calc(100% - 50px);line-height:1.7;position:absolute;left:30px;bottom:221px;font-size:10px;color:#587355;pointer-events:none}.map-hint span{margin:0 8px}.building-label{position:absolute;transform:translate(-50%,-50%);font-size:9px;border:1px solid #ffffffab;background:#fffdf0e0;box-shadow:0 2px 4px #2d49391a;padding:4px 7px;border-radius:6px;white-space:nowrap;color:#465c41;pointer-events:auto}.building-label.active,.building-label[data-active="true"]{background:#34583f;color:white}.labels-hidden .building-label{display:none}.simulation-panel{position:absolute;bottom:22px;left:26px;right:26px;background:#fffdf5f5;border:1px solid #fff;border-radius:17px;box-shadow:0 8px 35px #405b3c15;padding:15px 19px;backdrop-filter:blur(12px)}.simulation-top{display:flex;align-items:center;gap:7px;font-size:10px;color:#7a8772}.status-dot{height:6px;width:6px;border-radius:50%;background:#80a374}#progress-text{margin-left:auto;font-variant-numeric:tabular-nums}.progress-track{height:3px;background:#e7eadf;margin-top:10px;border-radius:5px;overflow:hidden}#progress-bar{height:100%;width:0;background:#85a372;transition:width .15s}.simulation-body{display:flex;gap:14px;justify-content:space-between;align-items:center;padding-top:15px}.current-task{display:flex;align-items:center;gap:12px;min-width:0}#current-icon{width:40px;height:40px;flex-shrink:0;background:#f2e7ce;color:#a9894e;display:grid;place-items:center;border-radius:12px;font-size:22px}.current-task small{font-size:8px;letter-spacing:1.3px;color:#94a086}.current-task h3{font-size:14px;margin:4px 0}.current-task p{font-size:10px;line-height:1.5;color:#8a9481;margin:3px 0;max-width:460px}.play-controls{display:flex;gap:7px;align-items:center;flex-shrink:0}.icon-button,.speed-button{height:35px;min-width:32px;background:transparent;border:0}.icon-button{font-size:21px}.speed-button{font-size:11px}.primary{background:var(--green);border:1px solid var(--green);color:#fffcef;padding:11px 19px;font-size:12px;border-radius:9px;white-space:nowrap}.log{border-top:1px solid #e7e9df;margin-top:12px;padding-top:9px;font-size:10px;color:#7e8b72}.log summary{cursor:pointer}.log summary span{float:right;font-size:9px;color:#9aab8e}#event-log{max-height:115px;overflow:auto;line-height:1.7;padding-top:6px}#event-log p{margin:4px 0}#event-log b{color:#536d46}.approval{display:flex;align-items:center;gap:8px;background:#f8edcf;padding:10px;margin-top:12px;border-radius:9px}.approval p{font-size:11px;flex:1}.approval button{font-size:10px;padding:8px}.building-card{position:absolute;right:72px;top:26px;width:300px;background:#fffdf4f5;border:1px solid white;border-radius:15px;box-shadow:0 10px 40px #33472824;padding:22px;backdrop-filter:blur(12px)}.close{position:absolute;right:10px;top:9px;border:0;background:none;font-size:23px}.building-card h2{font-family:"Be Vietnam Pro","Segoe UI",sans-serif;font-size:23px;font-weight:600;line-height:1.4;letter-spacing:normal;margin:10px 0}.building-card p{font-size:11px;line-height:1.7;color:#7b8771}.io{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-top:1px solid var(--line);padding-top:12px}.io small{font-size:8px;letter-spacing:1px;color:#a18f64}.actor-caption{font-size:10px;border-top:1px solid var(--line);padding-top:10px;color:#536f43}footer{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;color:#8e9883;font-size:9px;gap:10px}footer span:first-child,footer span:last-child{font-size:8px;letter-spacing:1.3px}footer b{color:#b29e70;margin-right:5px}footer i{font-style:normal;padding:0 10px}dialog{border:1px solid #e8e8d8;background:#fffdf4;border-radius:20px;max-width:470px;width:calc(100% - 32px);padding:35px;color:var(--ink);box-shadow:0 30px 100px #1c342a40}dialog::backdrop{background:#1e382757;backdrop-filter:blur(5px)}dialog h2{font:600 30px/1.4 "Be Vietnam Pro","Segoe UI",sans-serif;letter-spacing:normal;margin:17px 0}dialog p{font-size:13px;line-height:1.8;color:#748269}.guide-note{padding:13px;background:#eef1e4;border-radius:10px;font-size:11px!important}.fallback{position:absolute;top:35%;left:10%;right:10%;padding:25px;background:#fff9df;border-radius:12px;text-align:center;font-size:14px}
@media(min-width:1550px){main{grid-template-columns:340px 1fr}.sidebar{padding:32px}.world-title{top:34px;left:38px}}
@media(max-width:1100px){.world-state{display:none}main{grid-template-columns:270px 1fr}.sidebar{padding:24px 18px}.simulation-body{align-items:flex-start;flex-direction:column}.play-controls{align-self:flex-end}.map-hint{bottom:260px;font-size:9px}.compass{bottom:270px}.current-task p{max-width:100%}.world-title h2{font-size:24px}footer span:last-child{display:none}}
@media(max-width:700px){.topbar{height:70px;padding:0 15px}.brand{font-size:15px;letter-spacing:1px}.brand small{font-size:6px;letter-spacing:1px}.brand-icon{height:38px;width:38px;font-size:27px}.topbar .quiet span{display:none}main{height:auto;min-height:0;display:flex;flex-direction:column}.sidebar{order:2;padding:22px;border:0;overflow:visible}.sidebar h1{font-size:29px}.sidebar .intro{margin-bottom:15px}.scenario-list{grid-template-columns:1fr 1fr}.scenario{padding:10px;gap:8px}.scenario-icon{width:28px;height:28px}.scenario strong{font-size:11px}.scenario small{font-size:9px}.scenario .arrow{display:none}.world{height:720px;order:1}.world-title{top:20px;left:18px}.world-title h2{font-size:23px}.world-title .eyebrow{font-size:8px}.view-controls{top:20px;right:14px}.view-controls button{width:30px;height:30px}.simulation-panel{left:12px;right:12px;bottom:13px;padding:13px}.simulation-body{gap:8px}.current-task h3{font-size:13px}.current-task p{font-size:10px}.play-controls{width:100%;justify-content:flex-end}.play-controls .primary{flex:1}.map-hint{left:18px;bottom:248px;font-size:8px}.compass{display:none}.building-label{font-size:8px;padding:3px 5px}.building-card{top:90px;right:14px;max-width:calc(100% - 28px)}footer{height:auto;min-height:42px;justify-content:center;text-align:center;padding:12px;font-size:8px}footer span:first-child{display:none}.approval{flex-wrap:wrap}.approval p{flex-basis:100%;margin:0}.route{columns:2;column-gap:20px}.route li{break-inside:avoid}.sidebar-note{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.building-label.is-active{background:#34583f;color:#fff}
.courier-label{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;border-radius:7px;background:#fff0c9ed;color:#805c2e;border:1px solid #d7b77a;font-size:9px;padding:3px 7px;box-shadow:0 2px 5px #5a43251a}.courier-label[data-moving="true"]{background:#ffe3a4}
@media(max-width:700px){.courier-label{font-size:0;width:14px;height:14px;padding:0;border-radius:50%;text-align:center}.courier-label::after{content:"✦";font-size:9px;line-height:12px}}
.view-controls button#camera-pan[aria-pressed="true"]{background:var(--green);color:var(--cream)}#village[data-camera-mode="pan"] canvas{cursor:grab}#village[data-camera-mode="pan"] canvas:active{cursor:grabbing}