*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#35362f;color:#eeeee2;font-family:Arial,"Malgun Gothic",sans-serif}canvas{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 36px;background:linear-gradient(#141713b3,transparent);pointer-events:none}a{color:inherit;text-decoration:none;pointer-events:auto}.brand{font-size:38px;font-weight:900;letter-spacing:-3px}.brand span{font-size:12px;letter-spacing:2px;margin-left:15px;color:#cccdbe}.play{font-size:13px;padding:12px 16px;border:1px solid #e1e4c955;background:#1b201bb3}main{position:absolute;bottom:30px;left:36px;max-width:470px;padding:24px 28px;background:#171c17e8;border:1px solid #9b9e7b66;backdrop-filter:blur(12px)}.eyebrow{font-size:10px;letter-spacing:2px;color:#ccd792;margin:0 0 12px}h1{font-size:34px;letter-spacing:-2px;margin:0 0 9px}#description{font-size:12px;color:#aeb3a3;margin:0 0 22px}.maps,.views{display:flex;gap:5px;margin-top:7px}button{font:inherit;font-size:12px;white-space:nowrap;border:1px solid #5a634f;background:#2a3028;color:#dadecd;padding:11px 13px;cursor:pointer}button:hover{border-color:#d3dea0}button[aria-pressed=true]{color:#1b2215;background:#d4df9b;border-color:#d4df9b}.views button{font-size:11px;padding:9px 11px}small{display:block;font-size:10px;line-height:1.8;color:#9ba590;margin-top:18px}output{position:absolute;right:36px;bottom:30px;font-size:11px;letter-spacing:1px;color:#dedfc7;background:#171c17d9;border:1px solid #67715266;padding:12px 16px}output.error{color:#ffb5a5}@media(max-width:640px){header{padding:18px}.brand{font-size:30px}main{left:15px;bottom:15px;padding:18px;max-width:calc(100% - 30px)}h1{font-size:25px}output{top:80px;right:15px;bottom:auto}.views button{padding:9px}}
body[data-view=plan] main{bottom:16px;left:50%;transform:translateX(-50%);max-width:none;padding:13px 20px;display:flex;align-items:center;gap:18px;white-space:nowrap}body[data-view=plan] main .eyebrow,body[data-view=plan] main #description,body[data-view=plan] main small{display:none}body[data-view=plan] h1{font-size:18px;letter-spacing:-1px;margin:0}body[data-view=plan] .maps,body[data-view=plan] .views{margin:0}body[data-view=plan] output{display:none}@media(max-width:900px){body[data-view=plan] main{gap:8px;flex-wrap:wrap;width:calc(100% - 30px)}body[data-view=plan] h1{display:none}}
canvas:focus{outline:none}.views{flex-wrap:wrap}body[data-map=supply] main{max-width:510px}body[data-map=supply][data-view=plan] main{max-width:calc(100% - 30px)}body[data-view=plan] .views{flex-wrap:nowrap}@media(max-width:1100px){body[data-map=supply][data-view=plan] main{flex-wrap:wrap;gap:8px}body[data-map=supply][data-view=plan] main h1{display:none}}@media(max-width:640px){.views button{flex:1 0 28%}body[data-view=plan] .views{flex-wrap:wrap;width:100%}body[data-view=plan] main{padding:10px 14px}body[data-map=supply] main{max-width:calc(100% - 30px)}}