.last-post-clock {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 88px 18px 32px;
  border-bottom: 1px solid #285537;
  background: radial-gradient(ellipse at 78% 50%, #13341b70, transparent 65%), #070d08;
  box-shadow: inset 0 1px #86de980a;
}
.clock-intro {min-width:0}
.clock-title-short {display:none}
.clock-eyebrow {display:flex;align-items:center;gap:7px;margin:0 0 7px;color:var(--punk-green-ink);font-size:9px;letter-spacing:1.7px;font-weight:500}
.clock-live-dot {width:6px;height:6px;border-radius:50%;background:var(--punk-green);box-shadow:0 0 9px #28b14366;flex:none}
.clock-intro h2 {margin:0;color:#e6edcd;font-size:18px;font-weight:500;line-height:1.45;letter-spacing:-.7px;text-wrap:pretty}
.clock-source {display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:1px 0 -7px;font-size:10px;color:#abc4a7;text-decoration:underline;text-decoration-color:#abc4a74d;text-underline-offset:4px;border-radius:3px}
.clock-source:hover {color:var(--lime);text-decoration-color:currentColor}
.clock-source:focus-visible {outline:2px solid var(--lime);outline-offset:4px}
.clock-source[hidden] {display:none}
.clock-note {margin:8px 0 0;font-size:8px;line-height:1.6;color:#8aab88;max-width:45ch}
.clock-display {display:flex;align-items:start;gap:12px;flex:none;font-variant-numeric:tabular-nums}
.clock-unit {display:flex;flex-direction:column;align-items:center;gap:8px;min-width:80px}
.clock-digits {display:flex;justify-content:center;gap:1px;height:58px;min-width:80px;color:#86de98;filter:drop-shadow(0 0 7px #28b14324)}
.clock-digit {width:38px;height:58px;flex:none;fill:#173220}
.clock-digit .is-lit {fill:currentColor}
.clock-unit[data-clock-unit="seconds"] .clock-digits {color:var(--lime);filter:drop-shadow(0 0 7px #c3ff0024)}
.clock-unit--milliseconds {min-width:66px;padding-top:24px}
.clock-unit--milliseconds .clock-digits {min-width:66px;height:34px;color:#b5d976;filter:none}
.clock-unit--milliseconds .clock-digit {width:22px;height:34px}
.clock-unit--milliseconds .clock-placeholder {font-size:24px;line-height:34px}
.clock-decimal {width:4px;height:4px;margin-top:51px;background:#7d9e50;border-radius:1px;flex:none}
.clock-unit-label {color:#8aab88;font-size:8px;letter-spacing:1.5px;text-transform:uppercase}
.clock-colon {display:grid;gap:10px;padding-top:18px;color:#4d8258;flex:none}
.clock-colon::before,.clock-colon::after {content:'';display:block;width:4px;height:4px;border-radius:1px;background:currentColor}
.clock-value {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.clock-placeholder {font-size:40px;line-height:58px;color:#4d8258}
.last-post-clock[data-state="unavailable"] .clock-live-dot {background:#8aab88;box-shadow:none}
.clock-toggle {position:absolute;top:12px;right:24px;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;border:1px solid #31563c;border-radius:8px;background:#122017;color:#b7d7b6;cursor:pointer;transition:background-color 160ms,border-color 160ms,scale 160ms}
.clock-toggle:hover {background:#1b3523;border-color:#6b9b74;color:var(--lime)}
.clock-toggle:active {scale:.96}
.clock-toggle:focus-visible {outline:2px solid var(--lime);outline-offset:3px}
.clock-toggle svg {position:absolute;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:opacity 180ms cubic-bezier(.2,0,0,1),scale 180ms cubic-bezier(.2,0,0,1),filter 180ms cubic-bezier(.2,0,0,1)}
.clock-toggle .clock-expand-icon {opacity:0;scale:.25;filter:blur(4px)}
.last-post-clock[data-compact="true"] .clock-minimize-icon {opacity:0;scale:.25;filter:blur(4px)}
.last-post-clock[data-compact="true"] .clock-expand-icon {opacity:1;scale:1;filter:blur(0)}
@media(max-width:900px) {
  .last-post-clock {padding:16px 76px 16px 22px;gap:20px}
  .clock-toggle {right:18px}
  .clock-intro h2 {font-size:15px}
  .clock-display {gap:7px}
  .clock-unit {min-width:66px}
  .clock-digits {min-width:66px;height:48px}
  .clock-digit {width:31px;height:48px}
  .clock-colon {padding-top:14px;gap:9px}
  .clock-unit--milliseconds {min-width:54px;padding-top:20px}
  .clock-unit--milliseconds .clock-digits {min-width:54px;height:28px}
  .clock-unit--milliseconds .clock-digit {width:18px;height:28px}
  .clock-decimal {margin-top:41px}
}
@media(max-width:700px) {
  .last-post-clock {flex-direction:column;align-items:center;gap:14px;padding:14px 12px 16px;text-align:center}
  .clock-intro {width:100%;box-sizing:border-box;padding-inline:40px}
  .clock-toggle {top:8px;right:8px}
  .clock-eyebrow {justify-content:center;margin-bottom:5px;font-size:8px}
  .clock-intro h2 {font-size:14px}
  .clock-source {min-height:40px;font-size:9px;margin:0 0 -6px}
  .clock-note {display:none}
  .clock-display {width:100%;max-width:390px;justify-content:space-between;gap:4px}
  .clock-unit {min-width:0;gap:6px;flex:1}
  .clock-digits {min-width:0;width:100%;height:44px;gap:0}
  .clock-digit {width:28px;min-width:0;max-width:28px;height:44px;flex:0 1 28px}
  .clock-unit-label {font-size:7px;letter-spacing:1px}
  .clock-colon {gap:8px;padding-top:13px}
  .clock-colon::before,.clock-colon::after {width:3px;height:3px}
  .clock-unit--milliseconds {min-width:0;flex:.85;padding-top:18px}
  .clock-unit--milliseconds .clock-digits {min-width:0;height:26px}
  .clock-unit--milliseconds .clock-digit {width:17px;max-width:17px;height:26px;flex:0 1 17px}
  .clock-unit--milliseconds .clock-placeholder {font-size:18px;line-height:26px}
  .clock-decimal {width:3px;height:3px;margin-top:38px}
}
@media(max-height:620px) and (min-width:701px) {
  .last-post-clock {padding-block:10px}
  .clock-note {display:none}
}

/* The same running timer becomes a quiet, single-line readout. */
.last-post-clock[data-compact="true"] {display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:18px;min-height:49px;padding:4px 24px 4px 32px;background:#09110b;box-shadow:none;text-align:left}
.last-post-clock[data-compact="true"] .clock-intro {display:flex;align-items:center;gap:9px;padding:0}
.last-post-clock[data-compact="true"] .clock-intro::before {content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--punk-green)}
.last-post-clock[data-compact="true"] .clock-intro h2 {font-size:11px;line-height:1.4;letter-spacing:0;color:#a8bda7}
.last-post-clock[data-compact="true"] :is(.clock-eyebrow,.clock-source,.clock-note,.clock-digits,.clock-unit-label) {display:none}
.last-post-clock[data-compact="true"] .clock-display {width:auto;max-width:none;align-items:baseline;justify-content:flex-end;gap:4px}
.last-post-clock[data-compact="true"] .clock-unit {flex:none;flex-direction:row;align-items:baseline;gap:3px;min-width:0;padding:0}
.last-post-clock[data-compact="true"] .clock-value {position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;font-size:18px;line-height:1.25;font-weight:400;color:#86de98}
.last-post-clock[data-compact="true"] [data-clock-unit="days"] {margin-right:9px}
.last-post-clock[data-compact="true"] [data-clock-unit="days"]::after {content:'d';font-size:10px;color:#8aab88}
.last-post-clock[data-compact="true"] [data-clock-unit="days"] + .clock-colon {display:none}
.last-post-clock[data-compact="true"] [data-clock-unit="seconds"] .clock-value {color:var(--lime)}
.last-post-clock[data-compact="true"] .clock-colon {align-self:center;gap:4px;padding:0;color:#58705b}
.last-post-clock[data-compact="true"] .clock-colon::before,.last-post-clock[data-compact="true"] .clock-colon::after {width:2px;height:2px}
.last-post-clock[data-compact="true"] .clock-decimal {align-self:baseline;width:2px;height:2px;margin:0;background:#819956}
.last-post-clock[data-compact="true"] .clock-unit--milliseconds .clock-value {font-size:12px;color:#b5d976}
.last-post-clock[data-compact="true"] .clock-toggle {position:relative;inset:auto;background:transparent;border-color:transparent}
.last-post-clock[data-compact="true"] .clock-toggle:hover {background:#1b3523;border-color:#31563c}
@media(max-width:700px) {
  .last-post-clock[data-compact="true"] {grid-template-columns:minmax(0,1fr) 40px;gap:5px 8px;padding:9px 12px;min-height:67px}
  .last-post-clock[data-compact="true"] .clock-intro {gap:6px}
  .last-post-clock[data-compact="true"] .clock-intro h2 {font-size:9px}
  .last-post-clock[data-compact="true"] .clock-display {justify-content:flex-start;gap:3px}
  .last-post-clock[data-compact="true"] .clock-toggle {grid-column:2;grid-row:1 / 3;align-self:center}
}
@media(prefers-reduced-motion:reduce) {
  .clock-toggle,.clock-toggle svg {transition:none}
}