:root{--ink:#1c1c1c;--muted:#6a6a6a;--red:#db3439;--line:#dedede;--paper:#fff}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}main{max-width:1320px;margin:auto;padding:32px 32px 20px}header{display:flex;gap:24px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:24px}.brand{color:var(--ink);font-weight:800;text-decoration:none;font-size:24px;letter-spacing:-1px}.brand span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}.draft{font-size:13px;color:var(--muted);margin:0;text-align:right}.intro{display:flex;gap:64px;align-items:center;justify-content:space-between;margin:36px 0 26px}.intro>p{max-width:440px;font-size:15px;line-height:1.55;color:var(--muted);margin:0}.eyebrow{font-size:11px;letter-spacing:1.5px;margin:0 0 12px;color:var(--muted)}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-1.5px;margin:0;line-height:1.05}.viewer{height:min(68vh,680px);min-height:460px;position:relative;background:#e9edf0;overflow:hidden;border:1px solid var(--line)}#canvas{width:100%;height:100%;outline:none;touch-action:none;cursor:grab}#canvas:focus-visible{outline:3px solid var(--red);outline-offset:-4px}canvas{display:block}button{font:inherit;font-size:13px;line-height:1.2;min-height:44px;padding:12px 17px;border:1px solid #d2d5d6;background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}button:hover{background:#f1f1f1}button:active{background:#e1e1e1}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:3px}button:disabled{cursor:default;opacity:.4}button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}.modes{display:flex;gap:0;position:absolute;z-index:2;left:20px;top:20px}.modes button+button{border-left:0}.view-actions{position:absolute;z-index:2;right:20px;top:20px;display:flex;gap:8px}.view-actions button{font-size:12px;padding:10px 13px}.hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);margin:0;font-size:12px;line-height:1.4;padding:9px 14px;color:#333;background:rgba(255,255,255,.94);width:max-content;max-width:calc(100% - 32px);text-align:center;pointer-events:none}.loading{position:absolute;inset:0;z-index:4;background:#edf0f2;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:16px}.loading[hidden]{display:none}.loading-title{font-size:22px;font-weight:700}.loading p{margin:0;font-size:14px;color:var(--muted);max-width:340px;text-align:center;line-height:1.5}.loading progress{width:220px;height:6px;accent-color:var(--red)}.walk{position:absolute;bottom:80px;left:20px;display:flex;align-items:center;flex-direction:column;gap:5px}.walk>div{display:flex;gap:5px}.walk button{width:45px;min-height:45px;font-size:20px;padding:8px;touch-action:none;user-select:none}.route{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:#fff;padding:10px 14px;border:1px solid #ddd;min-width:290px}.route>div{display:flex;flex:1;flex-direction:column;gap:4px}.route span{font-size:10px;letter-spacing:1px;color:var(--muted)}.route strong{font-size:14px;white-space:nowrap}.route button{width:44px;padding:8px;font-size:18px}.footnote{font-size:12px;color:var(--muted);margin:14px 0}.viewer:fullscreen{height:100%;width:100%;border:0;background:#e9edf0}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px 16px}.brand{font-size:22px}.brand span{font-size:11px}header{align-items:flex-start;gap:16px;padding-bottom:18px}.draft{font-size:11px;max-width:135px;line-height:1.4}.intro{display:block;margin:24px 0 20px}.intro>p{font-size:13px;line-height:1.5;margin-top:16px}h1{font-size:36px}.eyebrow{font-size:10px}.viewer{height:65svh;min-height:470px}.modes{top:12px;left:12px;right:12px}.modes button{flex:1;padding:12px 10px}.view-actions{top:68px;right:12px;left:12px;justify-content:space-between}.view-actions button{min-height:44px;font-size:11px;padding:8px 11px}.hint{font-size:11px;bottom:10px;width:calc(100% - 24px);padding:8px}.walk{left:12px;bottom:90px}.route{bottom:85px;width:calc(100% - 24px);min-width:0;gap:10px;padding:9px}.footnote{font-size:11px}}@media(prefers-reduced-motion:reduce){button{transition:none}}
.car-picker{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;font-size:13px}.car-picker label{font-weight:700}.car-picker select{min-height:44px;max-width:100%;border:1px solid #d2d5d6;background:#fff;color:var(--ink);padding:10px 36px 10px 14px;font:inherit}.car-picker select:focus-visible{outline:3px solid var(--red);outline-offset:3px}.car-picker span{color:var(--muted);margin-left:auto}@media(max-width:720px){.car-picker{gap:8px 12px}.car-picker span{width:100%;margin:0;font-size:11px}.intro{margin-bottom:16px}}

.embedded main{padding:0;max-width:none}.embedded header,.embedded .intro,.embedded .footnote{display:none}.embedded body{overflow:hidden}.embedded .car-picker{height:64px;margin:0;padding:8px 12px;gap:10px}.embedded .viewer{height:calc(100dvh - 64px);min-height:0}.embedded .car-picker span{font-size:11px}@media(max-width:720px){.embedded .car-picker{height:88px}.embedded .car-picker span{width:100%}.embedded .viewer{height:calc(100dvh - 88px)}}