.fl-tiles{
  display:grid;gap:2px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--line);border:2px solid var(--iron);
  margin-top:clamp(1rem,3vw,1.75rem);
}
.fl-tile{
  display:flex;flex-direction:column;gap:.35rem;
  padding:clamp(.85rem,2.5vw,1.1rem) clamp(.8rem,2.5vw,1.2rem) clamp(.9rem,2.5vw,1.2rem);background:var(--paper);min-width:0;
}
.fl-k{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mono-label);
}
.fl-v{
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(1.55rem,6.4vw,2.6rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:.55rem;
}
.fl-s{font-size:.8125rem;color:var(--steel-light);line-height:1.4}

.fl-now{background:var(--iron);color:var(--on-iron);justify-content:center;grid-column:1 / -1}
@media (min-width:60rem){
  .fl-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fl-now{grid-row:span 2;grid-column:auto}
  .fl-now .fl-v{font-size:clamp(2.6rem,5vw,3.6rem)}
}
.fl-now .fl-k,.fl-now .fl-s{color:var(--on-iron);opacity:.78}
.fl-dot{
  width:.7rem;height:.7rem;border-radius:50%;flex:none;
  background:var(--steel-light);
}
.fl-now.is-live .fl-dot{background:#2FD16B;box-shadow:0 0 0 0 rgba(47,209,107,.6)}
@media (prefers-reduced-motion:no-preference){
  .fl-now.is-live .fl-dot{animation:fl-pulse 1.8s ease-out infinite}
}
@keyframes fl-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,209,107,.55)}
  70%{box-shadow:0 0 0 .7rem rgba(47,209,107,0)}
  100%{box-shadow:0 0 0 0 rgba(47,209,107,0)}
}

.fl-toggle{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--iron)}
.fl-toggle button{
  font:inherit;font-size:.8125rem;font-variation-settings:"wdth" 104,"wght" 600;
  padding:.4rem .75rem;border:0;background:transparent;color:var(--iron);cursor:pointer;
}
.fl-toggle button + button{border-left:2px solid var(--iron)}
.fl-toggle button[aria-pressed="true"]{background:var(--iron);color:var(--on-iron)}
.fl-toggle button:focus-visible{outline:2px solid var(--hazard);outline-offset:2px}

.fl-heat-scroll{overflow-x:auto;padding-bottom:.4rem;-webkit-overflow-scrolling:touch}
.fl-heat-scroll:focus-visible{outline:2px solid var(--hazard);outline-offset:4px}

.fl-heat{
  display:grid;grid-auto-flow:column;
  grid-template-columns:repeat(53,minmax(9px,1fr));grid-template-rows:repeat(7,auto);
  gap:3px;min-width:calc(53 * 9px + 52 * 3px);
}
.fl-heat i{display:block;aspect-ratio:1;background:var(--chip-bg);outline:1px solid var(--line);outline-offset:-1px}
.fl-heat i.pad{background:transparent;outline:0}
.fl-heat i.l1,.fl-legend .l1{background:color-mix(in srgb,var(--hazard) 28%,var(--chip-bg))}
.fl-heat i.l2,.fl-legend .l2{background:color-mix(in srgb,var(--hazard) 52%,var(--chip-bg))}
.fl-heat i.l3,.fl-legend .l3{background:color-mix(in srgb,var(--hazard) 76%,var(--chip-bg))}
.fl-heat i.l4,.fl-legend .l4{background:var(--hazard)}
.fl-heat i.l1,.fl-heat i.l2,.fl-heat i.l3,.fl-heat i.l4{outline:0}
.fl-heat-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  margin-top:.6rem;font-size:.8125rem;color:var(--steel);
}
.fl-legend{display:inline-flex;align-items:center;gap:3px}
.fl-legend i{display:inline-block;width:.75rem;height:.75rem;background:var(--chip-bg);outline:1px solid var(--line);outline-offset:-1px}
.fl-legend i:first-child{margin-left:.3rem}
.fl-legend i:last-child{margin-right:.3rem}

.fl-split{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:56rem){.fl-split{grid-template-columns:1fr 1fr}}
.fl-split .section-head{margin-bottom:1.25rem}

.fl-bars{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.fl-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .75rem;align-items:baseline}
.fl-bars .n{font-variation-settings:"wdth" 100,"wght" 600;font-size:.9375rem}
.fl-bars .c{font-variant-numeric:tabular-nums;font-size:.875rem;color:var(--steel)}
.fl-bars .bar{grid-column:1 / -1;height:.55rem;background:var(--chip-bg);outline:1px solid var(--line);outline-offset:-1px}
.fl-bars .bar span{display:block;height:100%;background:var(--iron);width:0}
.fl-bars li:first-child .bar span{background:var(--hazard)}
@media (prefers-reduced-motion:no-preference){
  .fl-bars .bar span{transition:width .7s cubic-bezier(.2,.7,.2,1)}
}

.fl-stack{display:flex;height:1.6rem;border:2px solid var(--iron);background:var(--chip-bg)}
.fl-stack span{display:block;height:100%;min-width:2px}
.fl-stack span + span{border-left:2px solid var(--ground)}
.fl-stack-key{
  list-style:none;margin:.9rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.875rem;color:var(--steel);
}
.fl-stack-key li{display:inline-flex;align-items:center;gap:.45rem}
.fl-stack-key i{width:.8rem;height:.8rem;display:inline-block;flex:none}
.fl-stack-key b{color:var(--iron);font-variation-settings:"wdth" 100,"wght" 600;font-weight:normal}

.fl-m0{background:var(--hazard)}
.fl-m1{background:var(--iron)}
.fl-m2{background:var(--steel)}
.fl-m3{background:var(--rust)}
.fl-m4{background:var(--line-strong)}

code{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}