:root{
  --bg:#0a0a0a; --fg:#ededed; --dim:#8a8a8a; --grid:#1e1e1e;
  --tile:13px; --pitch:14px; --th:23px; --fs:19px; --gap:16px;
  --mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--mono);-webkit-font-smoothing:antialiased;
  padding:clamp(14px,3vw,32px);
}

header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--grid)}
.brand{font-size:clamp(18px,4vw,26px);font-weight:700;letter-spacing:.32em}
.clock{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;background:none;border:0;padding:2px 0;cursor:pointer;
  -webkit-user-select:none;user-select:none}
.clock:hover,.clock:focus-visible{color:var(--fg);outline:none}

.wrap{overflow-x:auto;max-width:100%}
.head,.row{display:flex;gap:var(--gap);align-items:center;width:max-content}
.head{margin-bottom:8px;padding-bottom:6px}
.h{width:calc(var(--w) * var(--pitch));font-size:10px;letter-spacing:.22em;color:var(--dim)}

.row{padding:5px 0;text-decoration:none;color:inherit}
.f{display:inline-flex;gap:calc(var(--pitch) - var(--tile));width:calc(var(--w) * var(--pitch))}

/* split-flap character tile — monochrome */
.fc{
  flex:none;position:relative;width:var(--tile);height:var(--th);line-height:var(--th);
  text-align:center;font-size:var(--fs);font-weight:600;color:var(--fg);
  background:linear-gradient(180deg,#2c2c2f 0 50%,#161618 50% 100%);
  border-radius:2px;box-shadow:inset 0 0 0 1px #000;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.fc::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;
  background:rgba(0,0,0,.55);z-index:1}

@media(max-width:820px){ :root{--tile:10px;--pitch:11px;--th:18px;--fs:15px;--gap:12px} }
@media(max-width:480px){ :root{--tile:8px;--pitch:8.5px;--th:14px;--fs:12px;--gap:7px} .brand{letter-spacing:.2em} }