:root { color-scheme:light; --ink:#112532; --muted:#60717a; --mint:#bce8da; --lime:#dcff6b; --coral:#ff715f; --cream:#fbfaf3; --line:#d7ded9; --location:#52636a; --coral-halo:#ffded8; --player:#112532; }
:root.dark-mode { color-scheme:dark; --ink:#edf5f0; --muted:#a8bab4; --mint:#3e8375; --lime:#dcff6b; --coral:#ff8d80; --cream:#14211f; --line:#38504a; --location:#bdd0c9; --coral-halo:#613d3a; --player:#091315; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Manrope,Arial,sans-serif; }
.page-shell { width:min(1180px, calc(100% - 48px)); margin:auto; }
.site-header { height:112px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-size:25px; font-weight:800; letter-spacing:-1.5px; }
.brand span span { color:#f05c4e; }.brand-mark { width:31px; height:31px; fill:var(--coral); }.brand-mark circle { fill:var(--cream); }
.location,.eyebrow,.track-category,.signal-row,.service-number,footer,.theme-toggle { font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.075em; font-size:11px; font-weight:500; }
.header-actions { display:flex; align-items:center; gap:18px; }.location { display:flex; align-items:center; gap:8px; color:var(--location); }.location span { width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px var(--coral-halo); }
.theme-toggle { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:8px 11px; color:var(--ink); background:transparent; cursor:pointer; transition:background .2s, border-color .2s, transform .2s; }.theme-toggle:hover { background:var(--mint); border-color:var(--mint); transform:translateY(-1px); }.theme-toggle svg { width:14px; height:14px; fill:currentColor; }.moon-icon { display:none; }:root.dark-mode .sun-icon { display:none; }:root.dark-mode .moon-icon { display:block; }
.hero { min-height:515px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; padding:55px 0; }
.eyebrow { color:#e45c4f; margin:0 0 13px; }.hero h1 { font-size:clamp(52px, 6vw, 83px); line-height:.99; letter-spacing:-.075em; margin:0; font-weight:800; }.hero h1 em { color:#e85d4f; font-style:normal; }.hero-copy { max-width:410px; color:var(--muted); font-size:17px; line-height:1.6; margin:27px 0 0; }
.player-card { background:var(--player); color:white; padding:26px; border-radius:3px; box-shadow:10px 10px 0 var(--mint); }.signal-row,.player-bottom { display:flex; justify-content:space-between; align-items:center; }.live-indicator { color:#ddfa75; }.live-indicator i { display:inline-block;width:7px;height:7px;border-radius:50%;background:#ddfa75;margin-right:6px;animation:pulse 1.4s infinite; }.signal-bars { display:flex;align-items:center;gap:3px;height:16px; }.signal-bars b { width:2px;background:#8fb4ae; }.signal-bars b:nth-child(1){height:5px}.signal-bars b:nth-child(2){height:12px}.signal-bars b:nth-child(3){height:8px}.signal-bars b:nth-child(4){height:16px}.signal-bars b:nth-child(5){height:6px}
.player-main { display:flex; gap:22px; align-items:flex-start; padding:38px 0 33px; }.play-button { flex:none;width:72px;height:72px;border:none;border-radius:50%;background:var(--lime);color:#112532;display:grid;place-items:center;cursor:pointer;transition:transform .2s, background .2s; }.play-button:hover { transform:scale(1.06);background:#e7ff94; }.play-button svg { width:29px; fill:currentColor; }.pause-icon { display:none; }.is-playing .play-icon { display:none; }.is-playing .pause-icon { display:block; }.track-category { margin:3px 0 9px;color:#a6c4be; }.track-info h2 { font-size:21px; line-height:1.25; letter-spacing:-.04em; margin:0 0 10px; max-width:360px; }.track-info p:last-child { color:#adc0c1;font-size:13px;line-height:1.5;margin:0;max-width:360px; }.player-bottom { border-top:1px solid #36505b;padding-top:19px;color:#b4c6c5; }.volume-control { display:flex;gap:9px;align-items:center; }.volume-control svg { width:17px;fill:#b4c6c5; }.volume-slider { width:76px;accent-color:var(--lime); }
.services { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line); }.service { min-height:250px;padding:29px 30px 30px 0;display:flex;gap:22px;border-right:1px solid var(--line); }.service:not(:first-child){padding-left:29px}.service:last-child{border-right:0}.service-number { color:#7a8a8e; }.service-icon { display:block;font-family:Arial,sans-serif;font-size:34px;line-height:1;color:var(--coral);margin-bottom:21px; }.traffic-icon { color:#289b87; }.weather-icon { color:#e89e2d; }.service h2 { font-size:22px;letter-spacing:-.05em;margin:0 0 10px; }.service p { font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:230px; }
footer { padding:22px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#78868a; }
@keyframes pulse { 50% { opacity:.35; } }
@media (max-width: 760px) { .page-shell{width:min(100% - 32px,600px)}.site-header{height:88px}.header-actions{gap:10px}.location{font-size:9px}.theme-toggle{padding:7px}.theme-label{display:none}.hero{grid-template-columns:1fr;gap:42px;padding:57px 0}.hero h1{font-size:clamp(38px, 11vw, 60px)}.player-card{box-shadow:7px 7px 0 var(--mint)}.services{grid-template-columns:1fr}.service,.service:not(:first-child){min-height:0;padding:27px 0;border-right:0;border-bottom:1px solid var(--line)}footer{font-size:9px;gap:20px}.track-info h2{font-size:18px} }