*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0; background-color: #0f172a; color: #f1f5f9; 
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden;
    }
.container { max-width: 600px; width: 100%; padding: 40px 20px; text-align: center; }
.graphic-container { position: relative; width: 300px; height: 300px; margin: 0 auto 30px; }
/* Synoptic Map Circle */
.chart-display {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%; border: 1px solid #334155;
    background: radial-gradient(circle, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden;
    }
.chart-grid {
    position: absolute; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    }
.crosshair {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; opacity: 0.2;
    }
.crosshair::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #94a3b8; }
.crosshair::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #94a3b8; }
.error-code { font-size: 48px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #38bdf8; margin-bottom: 10px; }
h1 { font-size: 32px; font-weight: 600; margin: 0 0 15px 0; color: #ffffff; letter-spacing: -0.5px; }
p { font-size: 16px; line-height: 1.6; color: #94a3b8; margin: 0 0 35px 0; }
.button-group { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; }
@media(min-width: 480px) { .button-group { flex-direction: row; } }
.btn {
    display: inline-block; padding: 5px 5px; font-size: 14px; font-weight: 600; width: 150px; height: 50px;
    border-radius: 4px; text-decoration: none; transition: all 0.2s ease; text-align: center;
	display: flex; align-items: center; justify-content:center;
    }
.btn-primary { background-color: #38bdf8; color: #0f172a; border: 1px solid #38bdf8; }
.btn-primary:hover { background-color: #0ea5e9; border-color: #0ea5e9; }
.btn-secondary { background-color: transparent; color: #94a3b8; border: 1px solid #334155; }
.btn-secondary:hover { background-color: rgba(51, 65, 85, 0.4); color: #ffffff; border-color: #38bdf8; }
.table1 {  margin: 0px auto; }
.logo { width:127px; height:100px; margin:0; padding:0; background-color: #7f7f7f; }
/* SVG Container Positioning */
.weather-chart {
    position: relative;
    z-index: 2;
}

/* Typography Defaults for SVG Text */
.weather-chart text {
    font-family: monospace;
}

/* Isobars (Pressure rings) */
.isobar {
    fill: none;
    stroke-width: 1;
}
.isobar-outer { stroke: #334155; }
.isobar-mid   { stroke: #475569; }
.isobar-inner { 
    stroke: #64748b; 
    stroke-dasharray: 4 4; 
}

/* Isobar Labels */
.label { font-size: 8px; }
.label-outer { fill: #475569; }
.label-mid   { fill: #475569; }
.label-inner { fill: #64748b; }

/* Cold Front elements */
.cold-front {
    stroke: #38bdf8;
    stroke-width: 2;
    fill: none;
}
.cold-front-marker {
    fill: #38bdf8;
}

/* Warm Front elements */
.warm-front {
    stroke: #f43f5e;
    stroke-width: 2;
    fill: none;
}
.warm-front-marker {
    fill: #f43f5e;
}

/* Station Plot Error Graphics */
.station-center {
    fill: #f43f5e;
}
.station-line {
    stroke: #f43f5e;
    stroke-width: 2;
}
.error-query {
    fill: #f43f5e;
    font-size: 24px;
    font-weight: bold;
}