.card-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.card-tools button,.embed-dialog button,.exit-reel{border:1px solid currentColor;background:transparent;color:inherit;font:600 14px/1.3 system-ui;border-radius:5px;padding:8px 12px;cursor:pointer}
.embed-dialog{background:white;color:#18262e;border:0;border-radius:12px;padding:25px;width:min(430px,90vw)}.embed-dialog textarea{display:block;width:100%;height:6em;margin:12px 0}.embed-dialog button{margin-right:8px}
.reel-dialog{background:#101c24;color:#fff;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;overflow:auto}.reel-dialog[open]{display:grid;justify-items:center;align-content:safe center}.exit-reel{margin:8px auto 16px}.clock-frame{box-sizing:border-box;display:flex;flex-direction:column;gap:10px;background:#142630;color:#fff;padding:18px;font:15px/1.4 system-ui;min-width:0;width:100%;text-align:left}.clock-frame>img{background:white;padding:8px;box-sizing:content-box;width:150px;align-self:flex-start}.clock-frame.portrait{width:min(100%,48vh,510px);min-height:min(85dvh,750px);justify-content:center}.clock-frame>a{color:white;text-decoration:underline}.frame-credit{font-size:13px;color:#c7d3da;margin:0}.frame-title{font:600 22px/1.2 Georgia,serif}.clock-frame .card-tools,.clock-frame details,.clock-frame .card-body h2,.clock-frame .dayhead,.clock-frame .clock p,.clock-frame .clock .status,.clock-frame .metrics>div:last-child{display:none}.clock-frame [data-clock-title]{margin:0;width:100%;box-sizing:border-box}.clock-frame .clock-card{padding:12px;grid-template-columns:minmax(0,1fr) auto;gap:8px}.clock-frame .clock-card .stats{margin:0}.clock-frame .clock-card .countdown{width:90px}.clock-frame .number{font-size:clamp(30px,8vw,56px)}.clock-frame .day,.clock-frame .type-counter{background:#fff;color:#222;padding:14px}.clock-frame #milestone{display:block;background:white;color:#222;padding:12px}.clock-frame #milestone .countdown{display:flex;flex-wrap:wrap}.single-clock{margin:0;background:#142630}.single-clock> :not(.clock-frame){display:none!important}.single-clock .clock-frame{max-width:800px;margin:0 auto}.portrait .clock{padding:12px}

.clock-frame .card-body .eyebrow{display:none}.clock-frame.portrait{width:min(100%,48dvh,510px);aspect-ratio:9/16}.frame-title{overflow-wrap:anywhere}

.frame-pause{align-self:start;color:white;background:transparent;border:1px solid #9fafb8;border-radius:5px;padding:6px 14px;cursor:pointer}
.embed-dialog input{width:100%;padding:8px;margin:8px 0 12px}

#clocks{display:block}#clocks>h2,#clocks>h3{margin:24px 0 10px}#clocks>.separate-survey{border-top:2px solid #a4afb4;padding-top:24px;margin-top:32px}
.clock-card .measure-name{font-weight:650;margin:8px 0}.clock-card .card-body .rate-headline{display:block;font:500 clamp(1.55rem,3vw,2.35rem)/1.13 Georgia,serif;margin:6px 0 12px}.rate-headline b{color:var(--amber)}
.clock-card{grid-template-columns:minmax(0,1fr);gap:12px}.clock-card .countdown{width:96px;justify-self:start}.clock-card .countdown small{text-align:center}
.clock-card .annual{color:#cad8dd}.clock-card .stats,.clock-grid .clock-card .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.estimate-period{grid-column:1/-1;color:#d7e1e5;font-size:.82rem}
.clock-card .stats .balance{display:block;grid-column:auto;border:0;padding:0}.clock-card .stats .balance-number,.clock-card .stats .counter{font-size:1.45rem}.clock-card .card-tools .reset-note{flex-basis:100%}
.clock-frame .clock-card{grid-template-columns:minmax(0,1fr);gap:6px}.clock-frame .card-body .measure-name,.clock-frame .card-body>p{display:none}.clock-frame .card-body .rate-headline{font-size:1.55rem}

.card-tools {
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.card-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.clock-card { container-type: inline-size; }
.clock-readout {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-block: 1px solid #40515b;
}
.timer-block { display: grid; justify-items: center; gap: 5px; }
.clock-card .timer-block .countdown { width: 76px; justify-self: center; }
.clock-card .timer-block .remaining { font: 650 20px/1 ui-monospace,monospace; letter-spacing: -0.04em; }
.timer-caption { color: #dbe5e8; font: 500 12px/1.25 system-ui; text-align: center; }
.clock-card .clock-readout .stats {
  grid-column: auto; align-items: start; padding: 0; border: 0;
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; max-width: 510px;
}
.clock-readout .reset-note { grid-column: 1/-1; font: 12px/1.4 system-ui; }
.clock-card .perspective {border: 0; margin: 0; padding: 0;}
.clock-card .perspective summary {padding: 6px 0;}
.clock-card .card-tools {border-top: 1px solid #40515b; justify-content:center; padding: 12px 0;}
@container (max-width: 390px) {
  .clock-readout { grid-template-columns: minmax(0,1fr); gap:12px; }
  .timer-block { display:flex; align-items:center; justify-content:flex-start; gap:12px; }
  .clock-card .timer-block .countdown {width:64px;}
  .clock-card .card-tools button { flex:1 1 auto; padding-inline:8px; }
}