@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#172124;--muted:#778185;--paper:#f7f8f5;--line:#e4e9e5;--accent:#32b9a8;--orange:#ef9b62;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:13px}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:#fff;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px;min-width:220px}.brand-icon{width:35px;height:35px;border-radius:11px;background:#152326;color:#7bdfcd;display:grid;place-items:center;font:800 19px Manrope;letter-spacing:-2px}.brand strong{font:800 13px Manrope;letter-spacing:1.15px;display:block}.brand strong i{font-style:normal;color:#43ad9f}.brand small{display:block;color:#96a09f;font:700 8px 'DM Sans';letter-spacing:1.45px;margin-top:2px}.project-name{display:flex;align-items:center;gap:8px;font-size:12px;color:#454f51}.project-name button{border:0;background:none;color:#899294;cursor:pointer}.saved-status{color:#99a2a2;font-size:10px;margin-left:8px}.live-dot{width:7px;height:7px;background:#6dcc9b;border-radius:50%}.top-actions{display:flex;align-items:center;gap:9px}.icon-button{width:35px;height:35px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#596467;font-size:17px;cursor:pointer}.share-button{border:0;background:#162426;color:#fff;border-radius:9px;padding:11px 15px;font-weight:700;font-size:11px;cursor:pointer}.share-button span{color:#8ce3d2;margin-left:6px;font-size:15px}.workspace{height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(450px,1fr) 390px;min-height:580px}.map-wrap{position:relative;overflow:hidden;background:#d4e1dd}#map{height:100%;width:100%;z-index:0}.maplibregl-map{font-family:'DM Sans',sans-serif}.maplibregl-canvas{outline:0}.map-toolbar{position:absolute;top:16px;left:17px;z-index:500;display:flex;gap:6px}.map-toolbar>button,.map-style-control{height:37px;border:1px solid #fff;background:rgba(255,255,255,.94);box-shadow:0 3px 13px #192c2c14;border-radius:9px;color:#596568}.map-toolbar>button{width:37px;font-size:18px;cursor:pointer}.tilt-control{height:37px;display:flex;align-items:center;gap:2px;padding:0 4px;border:1px solid #fff;background:rgba(255,255,255,.94);box-shadow:0 3px 13px #192c2c14;border-radius:9px;color:#596568}.tilt-control button{width:27px;height:29px;border:0;border-radius:6px;background:transparent;color:#43514f;font-size:17px;cursor:pointer}.tilt-control button:hover{background:#e8f7f3;color:#279c8e}.tilt-control span{min-width:35px;text-align:center;color:#566462;font:700 9px Manrope}.map-style-control{display:flex;align-items:center;gap:7px;padding:0 10px}.map-style-control span{font-size:8px;color:#919a98;font-weight:700;letter-spacing:.8px}.map-style-control select{border:0;background:transparent;color:#303c3c;font:700 10px 'DM Sans';outline:0}.map-instruction{position:absolute;top:17px;left:50%;transform:translateX(-50%);z-index:450;white-space:nowrap;background:#fff;border-radius:20px;padding:10px 14px;color:#667271;box-shadow:0 3px 18px #17232616;font-size:10px}.map-instruction span{color:#35ae9d;font-size:15px;vertical-align:-1px;margin-right:5px}.map-instruction button{border:0;background:none;color:#9ba4a3;margin-left:12px;cursor:pointer}.map-credit{position:absolute;bottom:8px;right:12px;z-index:400;background:#ffffffa8;padding:3px 6px;border-radius:4px;color:#576362;font-size:8px;pointer-events:none}.map-controls{position:absolute;bottom:26px;left:17px;z-index:450;display:grid;border-radius:9px;overflow:hidden;box-shadow:0 3px 12px #17232620}.map-controls button{height:34px;width:35px;border:0;border-bottom:1px solid #e8edeb;background:#fff;color:#4b5858;font-size:19px;cursor:pointer}.map-empty{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);text-align:center;display:grid;justify-items:center;gap:5px;color:#697675;pointer-events:none;transition:opacity .2s}.map-empty.hidden{opacity:0}.empty-mark{font:400 57px Manrope;color:#fff;text-shadow:0 2px 9px #53696846}.map-empty strong{font:700 14px Manrope;color:#364241}.map-empty span{font-size:10px;color:#788382}.editor{background:#fff;border-left:1px solid #e9eeea;overflow:auto;display:flex;flex-direction:column}.editor-heading{padding:24px 23px 16px;display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{color:#4ba99b;font:700 8px 'DM Sans';letter-spacing:1.2px}.editor h1{font:800 19px Manrope;letter-spacing:-.65px;margin:5px 0 0}.text-button{border:0;background:transparent;color:#929b9a;font-size:10px;cursor:pointer}.section{padding:15px 22px;border-top:1px solid #eef1ee}.section-title{display:flex;align-items:center;gap:10px}.step{font:700 9px Manrope;color:#46ad9e;background:#e8f7f3;width:24px;height:24px;display:grid;place-items:center;border-radius:7px}.section-title strong{font:700 11px Manrope;display:block}.section-title small{display:block;color:#97a09f;font-size:9px;margin-top:2px}.small-action{margin-left:auto;border:1px solid #dfe8e4;background:#fff;border-radius:7px;padding:7px 9px;font-size:9px;color:#53615e;cursor:pointer}.route-list{padding:13px 0 1px}.route-stop{position:relative;display:grid;grid-template-columns:23px 1fr 28px;gap:9px;align-items:center;padding:7px 2px;min-height:41px}.route-stop:not(:last-child):before{content:'';position:absolute;left:12px;top:29px;height:27px;border-left:1px dashed #b8c5c0}.stop-bullet{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid #dfe8e3;color:#71817c;background:#fff;font:700 8px Manrope;z-index:1}.route-stop:first-child .stop-bullet{background:#35b9a5;color:white;border-color:#35b9a5}.route-stop:last-child .stop-bullet{background:#ed9c64;color:white;border-color:#ed9c64}.stop-input{width:100%;border:0!important;outline:0!important;background:transparent!important;padding:3px 0!important;margin:0!important;color:#3e4947!important;font:600 10px 'DM Sans'!important}.stop-input::placeholder{color:#a8b0ad}.stop-actions{display:flex;gap:1px;justify-content:flex-end}.stop-actions button{border:0;background:none;color:#a0aaa6;padding:3px;cursor:pointer;font-size:11px}.add-stop{border:1px dashed #dbe5e0;border-radius:8px;width:100%;padding:8px;background:#fbfcfb;color:#73817e;font-size:9px;cursor:pointer;text-align:left}.add-stop span{color:#43ad9d;font-size:15px;vertical-align:-1px;margin-right:5px}.route-stats{display:flex;align-items:center;gap:9px;padding:12px 1px 0;color:#84908c;font-size:9px}.route-stats span:first-child{font-weight:700;color:#53605d}.stat-divider{height:12px;border-left:1px solid #e1e7e3}.route-stats button{margin-left:auto;border:0;background:none;color:#8b9792;font-size:16px;cursor:pointer}.vehicle-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding-top:13px}.vehicle-choice{height:52px;border:1px solid #e9eeeb;border-radius:9px;background:#fff;display:grid;align-content:center;justify-items:center;gap:3px;cursor:pointer;color:#73807c}.vehicle-choice .emoji{font-size:17px;line-height:19px;filter:saturate(.78)}.vehicle-choice span:last-child{font-size:8px}.vehicle-choice.active{border-color:#83d4c5;background:#edfaf7;color:#279c8e;box-shadow:0 0 0 1px #d8f3ed}.style-row,.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:13px}.style-row label,.settings-row label,.export-options label{display:block;color:#7a8582;font-size:9px}.style-row label b{float:right;font-weight:500;color:#788480}.style-row input[type=color]{display:block;width:100%;height:29px;border:1px solid #e5ebe7;border-radius:7px;margin-top:6px;padding:3px;background:white;cursor:pointer}.style-row input[type=range]{display:block;width:100%;height:17px;accent-color:#42b9a7;margin-top:6px}.settings-row select,.export-options select{width:100%;margin-top:6px;border:1px solid #e5ebe7;border-radius:7px;background:#fff;padding:8px;color:#4d5956;font:600 9px 'DM Sans'}.toggle-row{position:relative;display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:11px;border-top:1px solid #f0f2f0;cursor:pointer}.toggle-row b{display:block;font-size:9px;color:#5e6966}.toggle-row small{display:block;font-size:8px;color:#a0a9a5;margin-top:2px}.toggle-row input{position:absolute;opacity:0}.toggle-row i{width:32px;height:18px;border-radius:12px;background:#dce3df;position:relative;transition:.2s}.toggle-row i:after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px #0002}.toggle-row input:checked+i{background:#43bba8}.toggle-row input:checked+i:after{left:16px}.bottom-player{margin-top:auto;padding:14px 22px 17px;border-top:1px solid #edf0ed;background:#fcfdfb}.player-buttons{display:flex;align-items:center;gap:12px}.player-icon{border:0;background:none;color:#89938f;font-size:18px;cursor:pointer}.play-button{width:34px;height:34px;border:0;border-radius:50%;background:#1b2a2a;color:#fff;font-size:12px;cursor:pointer;padding-left:3px}.timecode{margin-left:auto;font:700 10px Manrope;color:#54605c}.timecode span{color:#a4aca8;font-weight:500}.bottom-player>input{width:100%;margin:11px 0 6px;accent-color:#41b8a6;height:14px}.player-footer{display:flex;justify-content:space-between;color:#a0aaa5;font:700 7px 'DM Sans';letter-spacing:.85px}.export-modal{position:fixed;inset:0;background:#111b1bd1;z-index:1200;display:none;place-items:center;padding:18px}.export-modal.open{display:grid}.modal-card{background:#fff;border-radius:17px;width:min(420px,100%);padding:27px;position:relative;box-shadow:0 20px 90px #0003}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:22px;color:#99a29e;cursor:pointer}.modal-card h2{font:800 21px Manrope;margin:8px 0}.modal-card p{color:#89938f;font-size:11px;margin:0 0 18px}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.export-resolution{background:#f4f8f5;border-radius:10px;padding:13px;margin:16px 0;display:grid;gap:4px}.export-resolution span,.export-resolution small{font-size:9px;color:#84908a}.export-resolution strong{font:700 12px Manrope;color:#44524c}.share-button.full,.quiet-button.full{width:100%;margin-top:7px}.quiet-button{border:1px solid #e1e8e3;background:#fff;color:#5b6963;border-radius:9px;padding:10px;font-size:10px;cursor:pointer}.export-note{display:block;color:#a0a8a3;font-size:8px;line-height:1.45;margin-top:14px}.export-progress{display:none;margin-top:13px;height:29px;background:#eff7f4;border-radius:8px;align-items:center;gap:8px;padding:0 10px;color:#638078;font-size:9px}.export-progress.show{display:flex}.export-progress span{height:8px;width:8px;background:#3db9a4;border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}#toast{position:fixed;z-index:1500;left:50%;bottom:24px;transform:translate(-50%,20px);background:#192726;color:#fff;padding:11px 16px;border-radius:9px;font-size:10px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 7px 25px #0002}#toast.show{opacity:1;transform:translate(-50%,0)}.route-point-icon{background:none;border:0;cursor:grab!important;touch-action:none}.route-point-icon:active{cursor:grabbing!important}.route-point-icon div{transition:box-shadow .15s}.route-point-icon:hover div{box-shadow:0 0 0 5px #ffffff99,0 2px 7px #10242144!important}.route-add-handle{background:none;border:0;display:grid;place-items:center}.route-add-handle span{display:grid;place-items:center;width:30px;height:30px;border:2px solid #fff;border-radius:50%;background:#162a29;color:#8ce3d2;font:700 22px/1 Manrope;box-shadow:0 3px 12px #10242166;cursor:pointer;transition:transform .14s,background .14s}.route-add-handle span:hover{background:#35b9a5;transform:scale(1.12)}.vehicle-marker{background:none;border:0}.maplibregl-marker.route-point-icon{cursor:grab!important}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 350px}.topbar{padding:0 15px}}@media(max-width:700px){.topbar{height:58px;padding:0 12px}.brand{min-width:0}.project-name{font-size:0}.saved-status{display:none}.top-actions{gap:5px}.share-button{padding:10px;font-size:9px}.workspace{height:calc(100dvh - 58px);min-height:0;display:flex;flex-direction:column}.map-wrap{height:42dvh;min-height:260px;flex:none}.editor{flex:1;border-left:0;border-top:1px solid var(--line)}.editor-heading{padding:14px 16px 10px}.editor h1{font-size:17px}.section{padding:12px 16px}.bottom-player{padding:10px 16px}.map-instruction{top:57px;max-width:88vw;overflow:hidden;text-overflow:ellipsis}.vehicle-grid{grid-template-columns:repeat(6,1fr)}.vehicle-choice{height:46px}.route-stop{min-height:36px}.route-stop:not(:last-child):before{height:22px}.map-toolbar{top:10px;left:10px}}