/* HiitDuo — hiitduo.com. Colours, type and spacing come from tokens.css (generated from tokens.json). */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--hd-bg);color:var(--hd-text);font:17px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  min-height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
main{display:flex;flex-direction:column;gap:12px;flex:1;padding-top:8px}
footer{display:flex;flex-direction:column;gap:8px;padding-top:16px}
.head{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.glyph{width:48px;height:48px;border-radius:50%;background:var(--hd-surfaceAlt);display:flex;align-items:center;justify-content:center;flex:none}
h1{font-size:22px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h2{font-size:17px;font-weight:600;margin-top:12px}
.ft{font-size:13px}
.muted{color:var(--hd-textMuted)}
.center{text-align:center}
.strip{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center}
.strip b{display:block;font:700 28px/1.1 ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.lbl{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--hd-textMuted)}
.stripe{display:flex;gap:2px;height:16px}
.stripe span{border-radius:4px;min-width:2px}
.card{background:var(--hd-surface);border:1px solid var(--hd-ruleSoft);border-radius:20px;padding:4px 16px}
.card:empty{display:none}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;font-size:15px}
.row + .row{border-top:1px solid var(--hd-ruleSoft)}
.row span{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row b{font-weight:600;font-variant-numeric:tabular-nums}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.rounds{font-size:12px;font-weight:500;color:var(--hd-textMuted);padding:8px 0}
.btn{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;font-size:17px;font-weight:600;text-decoration:none}
.primary{background:var(--hd-accent);color:var(--hd-onAccent)}
.secondary{background:var(--hd-surfaceAlt);color:var(--hd-text)}
.prose{gap:8px} .prose p{color:var(--hd-textMuted)} .prose a{color:var(--hd-text)}
code{font-size:15px}
/* Share look's landing (LS2): the timer standing at Work in the look, then its six fills. Text on a fill is white. */
.timer{border-radius:20px;padding:24px 16px;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.timer .now{font-size:20px;font-weight:600}
.timer .num{font:800 88px/1 ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;letter-spacing:-2.5px;font-variant-numeric:tabular-nums}
.timer .next{font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22)}
.swatches{display:flex;gap:2px;height:12px}
.swatches span{flex:1;border-radius:6px}