:root{
  --ink:#08201C;
  --panel:#0E2B26;
  --panel-2:#123630;
  --line:#1D4A41;
  --line-soft:#16403A;
  --paper:#E7EFEA;
  --paper-dim:#8FAAA2;
  --signal:#FFC72C;
  --alert:#FF6B3D;
  --calm:#4FB09A;
  --row-h:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* scrollbars, tinted to the panel palette */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:5px;
  border:2px solid var(--panel);background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--calm);border:2px solid var(--panel);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1400px;margin:0 auto;padding:18px 20px 40px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:26px;
}
.topbar .brand{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--paper);
}
.topbar .brand span{color:var(--signal)}
.topbar .links a{
  color:var(--paper-dim);text-decoration:none;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 0 8px 18px;
}
.topbar .links a:hover,.topbar .links a[aria-current]{color:var(--signal)}

footer.site{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
  margin-top:34px;border-top:1px solid var(--line);padding-top:14px;
  color:var(--paper-dim);font-size:12.5px;
}
footer.site a{color:var(--paper-dim)}
footer.site a:hover{color:var(--signal)}

header.top{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 32px;
  padding-bottom:20px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
h1{
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-weight:600;font-size:38px;letter-spacing:.02em;
  text-transform:uppercase;margin:0;line-height:1;
}
h1 .code{color:var(--signal)}
.sub{color:var(--paper-dim);font-size:13px;margin-top:6px;max-width:52ch}

.pick label{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:6px;
}
.pick select{min-width:220px}
.pick .status{margin-top:6px}

.peak{
  margin-left:auto;text-align:right;
  border-left:2px solid var(--signal);padding-left:16px;
}
.peak .label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.peak .big{
  font-family:"Barlow Condensed",sans-serif;font-size:42px;font-weight:600;
  line-height:1;color:var(--signal);
}
.peak .meta{font-size:12px;color:var(--paper-dim)}
.peak .security{color:var(--calm)}

.controls{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px 22px;margin-bottom:20px;
}
.ctrl label{
  display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:6px;
}
.ctrl .val{color:var(--paper);font-family:"Barlow Condensed",sans-serif;font-size:17px}
input[type=range]{width:100%;accent-color:var(--signal);margin:0}
select,input[type=number]{
  width:100%;background:var(--panel);color:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:7px 8px;font:inherit;
}
select:focus-visible,input:focus-visible,button:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px;
}

/* timeline */
.board{
  border:1px solid var(--line);border-radius:4px;background:var(--panel);
  overflow:auto;max-height:66vh;position:relative;
}
.inner{position:relative}
.axis{
  position:sticky;top:0;z-index:6;height:30px;
  background:var(--panel-2);border-bottom:1px solid var(--line);
}
.axis .hr{
  position:absolute;top:0;height:30px;padding-left:6px;
  font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.06em;
  color:var(--paper-dim);border-left:1px solid var(--line);
  line-height:30px;
}
.grid{position:absolute;top:30px;bottom:0;width:1px;background:var(--line-soft)}
.rows{position:relative}
.row{position:relative;height:var(--row-h)}
.row:nth-child(even){background:rgba(255,255,255,.022)}

.bar{
  position:absolute;top:4px;height:20px;border-radius:2px;
  display:flex;align-items:center;overflow:hidden;
  background:var(--calm);cursor:default;
}
.bar .txt{
  padding:0 8px;font-size:12px;white-space:nowrap;color:#04201B;font-weight:500;
}
.bar.delayed{outline:1px solid var(--alert)}
.board-tail{
  position:absolute;top:12px;height:2px;
  background:repeating-linear-gradient(90deg,var(--signal) 0 4px,transparent 4px 8px);
}
.dep{
  position:absolute;top:5px;height:18px;width:2px;background:var(--signal);
}
.outlabel{
  position:absolute;top:5px;font-size:12px;color:var(--paper-dim);
  white-space:nowrap;padding-left:8px;line-height:18px;
}

.nowline{position:absolute;top:30px;bottom:0;width:1px;background:var(--alert);z-index:5}
.nowline::after{
  content:"now";position:absolute;top:2px;left:4px;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--alert);
}
.peakline{position:absolute;top:30px;bottom:0;width:1px;background:var(--signal);opacity:.55;z-index:4}

.probeline{position:absolute;top:30px;bottom:0;width:1px;background:var(--paper);opacity:.9;z-index:8;pointer-events:none}
.probelabel{
  position:absolute;top:34px;z-index:9;cursor:pointer;
  background:var(--ink);border:1px solid var(--paper-dim);border-radius:3px;
  padding:3px 8px;font-size:12px;white-space:nowrap;color:var(--paper);
}
.probelabel .x{color:var(--paper-dim);margin-left:6px}
.probelabel:hover .x{color:var(--alert)}

.load{
  position:sticky;bottom:0;z-index:7;
  background:var(--panel-2);border-top:1px solid var(--line);
}
.load svg{display:block}
.load .cap{
  position:absolute;left:8px;top:6px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-dim);
}

.status{font-size:12.5px;color:var(--calm)}
.status.bad{color:var(--alert)}
.footnote{color:var(--paper-dim);font-size:12px;margin-top:22px;max-width:70ch}
.empty{padding:34px 18px;color:var(--paper-dim)}

.about{margin-top:36px;border-top:1px solid var(--line);padding-top:18px;max-width:78ch}
.about h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--paper-dim);margin:18px 0 8px;
}
.about p{color:var(--paper-dim);font-size:13px}
.airportlinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.airportlinks a{color:var(--signal);text-decoration:none;font-size:13px}
.airportlinks a:hover{text-decoration:underline}
.airportlinks .cc{color:var(--paper-dim)}

@media (prefers-reduced-motion:no-preference){
  .bar{transition:width .18s ease,left .18s ease}
}
@media (max-width:640px){
  .wrap{padding:12px 12px 32px}
  .topbar{margin-bottom:16px}
  h1{font-size:26px}
  .sub{font-size:12.5px}
  header.top{gap:14px 20px;padding-bottom:14px;margin-bottom:16px}
  .peak{margin-left:0;text-align:left;border-left:0;padding-left:0}
  .peak .big{font-size:34px}
  .pick select{min-width:150px}
  .controls{gap:12px 14px}
  input[type=range]{height:28px}
  .board{max-height:70vh}
  footer.site{flex-direction:column}
}