*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}:root{--fs-xxl: clamp(56px, 10vw, 140px);--fs-xl: clamp(22px, 3.5vw, 48px);--fs-lg: clamp(16px, 2.6vw, 28px);--fs-md: clamp(14px, 2.1vw, 22px);--fs-sm: clamp(12px, 1.6vw, 18px);--card-bg: rgba(15,20,25,.35);--card-border: rgba(255,255,255,.25);--muted: rgba(255,255,255,.8);--accent: #8ad2ff;--accent2:#ffd166;--accent3:#7bd389}.app-bg{position:fixed;inset:0;background:#000 url("./media/bg-5U5WDV47.jpg") center/cover no-repeat;z-index:-2}.app-gradient:before,.app-gradient:after{content:"";position:fixed;left:0;right:0;height:20vh;pointer-events:none}.app-gradient:before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}.app-gradient:after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}.card{padding:14px 18px}.h-row{display:flex;align-items:center;gap:10px}.muted{color:var(--muted)}.dashboard{min-height:100vh;padding:18px;display:grid;gap:14px;grid-template-areas:"actions clock" "weather weather" "departures fuel" "fact fact";grid-template-columns:auto 1fr}.actions{grid-area:actions;align-self:start;justify-self:start}.clock{grid-area:clock;justify-self:end;text-align:right;padding-right:6px}.weather{grid-area:weather}.departures{grid-area:departures}.fuel{grid-area:fuel}.fact{grid-area:fact}