:root { --navy:#002b67; --yellow:#ffcc00; --ink:#14213d; --paper:#f5f7fa; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.5rem clamp(1rem,5vw,4rem); background:var(--navy); color:white; border-bottom:10px solid var(--yellow); }
.site-header h1 { margin:.2rem 0; font-size:clamp(1.35rem,3vw,2.25rem); text-transform:uppercase; }
.site-header p { margin:.2rem 0; }
.eyebrow { color:var(--yellow); font-weight:800; letter-spacing:.06em; font-size:clamp(1.4rem,3vw,2.4rem); }
.brand-mark { display:grid; place-items:center; width:78px; height:78px; border-radius:50%; background:var(--yellow); color:var(--navy); font-weight:900; font-size:1.5rem; flex:0 0 auto; }
main { width:min(1500px,100%); margin:auto; }
.hero { padding:2rem clamp(1rem,4vw,3rem); background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)); }
.hero h2 { text-align:center; margin:.2rem 0; color:var(--navy); font-size:clamp(2rem,5vw,3.2rem); }
.hero>p { text-align:center; margin:.5rem 0 2rem; color:#5f6672; }
.section-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.route-card { background:white; border-left:10px solid var(--navy); border-radius:14px; padding:1.2rem; box-shadow:0 8px 28px rgba(0,43,103,.09); }
.route-card h3 { color:var(--navy); text-transform:uppercase; margin:0 0 .45rem; font-size:1.5rem; }
.route-card p { min-height:2.5rem; color:#5f6672; }
.actions { display:flex; flex-wrap:wrap; gap:.7rem; }
button,.download { appearance:none; border:0; border-radius:999px; padding:.75rem 1rem; font-weight:800; cursor:pointer; text-decoration:none; background:var(--yellow); color:var(--navy); }
button.secondary,.download { background:var(--navy); color:white; }
button:hover,.download:hover { filter:brightness(.94); }
.viewer { margin:1rem; background:white; border-radius:14px; overflow:hidden; box-shadow:0 10px 35px rgba(0,0,0,.12); }
.toolbar { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.55rem; padding:.8rem; background:#eef2f7; border-bottom:1px solid #d9e0e8; }
.toolbar input { width:4.2rem; padding:.45rem; border:1px solid #bac5d1; border-radius:7px; }
.canvas-wrap { overflow:auto; min-height:55vh; padding:1rem; background:#6f7782; text-align:center; }
canvas { background:white; box-shadow:0 4px 20px rgba(0,0,0,.35); max-width:none; }
.status { text-align:center; min-height:1.2rem; margin:.65rem; color:#5f6672; }
footer { padding:1.5rem; text-align:center; background:var(--navy); color:white; border-top:6px solid var(--yellow); }
@media (max-width:700px) { .site-header { align-items:flex-start; } .brand-mark { width:58px; height:58px; } .toolbar { justify-content:flex-start; } }