/* TickSpec story: a dark slate top with a five-box field strip, a reference table, a worked-example timeline, then three phone pictures in a row. Chromium 67 safe: no flex gap, clamp, min, max, inset, padding-inline, aspect-ratio or gradient text. */
body.page-tickspec {
  --bg: #f4f1ea; --surface: #fffdf8; --raised: #e9e4d8;
  --text: #14211f; --text-2: #3b4946; --muted: #3b4946;
  --accent: #0f6b66; --accent-ink: #ffffff; --accent-soft: rgba(15,107,102,.12);
  --hair: rgba(20,33,31,.16); --hair-2: rgba(20,33,31,.36);
  --bar: #f4f1ea; --head: 'Inter', 'Segoe UI', Arial, sans-serif; --body: 'Inter', 'Segoe UI', Arial, sans-serif;
}
.page-tickspec .wrap { max-width: 1040px; }
.page-tickspec p { line-height: 1.7; }
.page-tickspec h1, .page-tickspec h2, .page-tickspec h3 { font-weight: 700; letter-spacing: -.01em; }
.page-tickspec h2 { font-size: 28px; line-height: 1.22; }
.page-tickspec h3 { font-size: 19px; line-height: 1.3; }
.page-tickspec a { text-underline-offset: 3px; }
.page-tickspec .btn { line-height: 1.35; }
.page-tickspec code, .tk-mono { font-family: Consolas, 'Courier New', monospace; font-size: .95em; }

/* Top: dark slate band, the title, and the five fields as five boxes */
.tk-top { padding: 34px 0 44px; background: #14211f; color: #f4f1ea; border-bottom: 4px solid #c8923a; }
.tk-top .crumb, .tk-top .crumb a { color: #d9d3c4; font-size: 14px; }
.tk-top .crumb { margin-bottom: 24px; }
.tk-top .story-app { margin-bottom: 20px; color: #f4f1ea; }
.tk-top .live-mini { color: #8fd6c8; }
.tk-top h1 { font-size: 40px; line-height: 1.14; max-width: 800px; color: #ffffff; }
.tk-lead { margin-top: 16px; max-width: 760px; font-size: 18px; color: #e6e1d4; }
.tk-strip { list-style: none; margin: 30px -6px 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.tk-strip li { width: 20%; padding: 0 6px 12px; box-sizing: border-box; }
.tk-box { height: 100%; box-sizing: border-box; padding: 14px 12px 12px; background: #1f332f; border: 1px solid #3f5a54; border-top: 3px solid #c8923a; border-radius: 3px; text-align: center; }
.tk-box .tk-star { display: block; font: 700 30px/1 Consolas, 'Courier New', monospace; color: #f0c779; }
.tk-box .tk-name { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: #ffffff; }
.tk-box .tk-range { display: block; margin-top: 2px; font-size: 13px; color: #cfc9ba; }
.tk-strip-note { margin-top: 4px; font-size: 14px; color: #cfc9ba; }

/* Reference table of the fields */
.tk-fields { padding: 50px 0 20px; }
.tk-head { max-width: 760px; margin-bottom: 24px; }
.tk-head p { margin-top: 12px; color: var(--text-2); }
.tk-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--hair-2); }
.tk-table th, .tk-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.5; }
.tk-table th { background: var(--raised); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.tk-table tr:last-child td { border-bottom: 0; }
.tk-table-note { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.tk-syntax { list-style: none; margin: 26px -10px 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.tk-syntax li { width: 50%; padding: 0 10px 18px; box-sizing: border-box; }
.tk-syn { height: 100%; box-sizing: border-box; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hair); border-left: 5px solid var(--accent); }
.tk-syn h3 { margin-bottom: 6px; font-size: 17px; }
.tk-syn p { margin: 0; font-size: 16px; color: var(--text-2); }
.tk-src { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* The day rule and the worked example */
.tk-rule { padding: 34px 0 40px; background: var(--raised); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.tk-rule-cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -14px; }
.tk-rule-a { width: 50%; padding: 0 14px; box-sizing: border-box; }
.tk-rule-b { width: 50%; padding: 0 14px; box-sizing: border-box; }
.tk-quote { margin: 18px 0 0; padding: 18px 20px; background: var(--surface); border-left: 6px solid #c8923a; }
.tk-quote p { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.tk-quote .tk-src { margin: 0; }
.tk-ex { padding: 20px 20px 16px; background: var(--surface); border: 2px dashed var(--hair-2); }
.tk-ex-label { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #7a5410; }
.tk-ex-expr { margin: 0 0 8px; font: 700 24px/1.3 Consolas, 'Courier New', monospace; }
.tk-runs { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.tk-runs li { display: -webkit-flex; display: flex; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
.tk-runs .tk-n { width: 34px; font: 700 15px/1.6 Consolas, 'Courier New', monospace; color: var(--accent); }
.tk-runs .tk-why { margin-left: auto; padding-left: 12px; font-size: 14px; color: var(--text-2); text-align: right; }

/* Time zone block */
.tk-zone { padding: 40px 0 10px; }
.tk-zone-box { max-width: 800px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--hair-2); border-top: 5px solid var(--accent); }
.tk-zone-box p { margin: 10px 0 0; }

/* The app: three phones in a row, then a ledger of limits */
.tk-app { padding: 48px 0 30px; }
.tk-app-intro { max-width: 780px; margin-top: 12px; color: var(--text-2); }
.tk-phones { list-style: none; margin: 28px -12px 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.tk-phones li { width: 33.3333%; padding: 0 12px 24px; box-sizing: border-box; }
.tk-phone img { display: block; width: 100%; height: auto; border: 1px solid var(--hair-2); border-radius: 14px; background: #fff; }
.tk-phone h3 { margin-top: 14px; }
.tk-phone p { margin: 8px 0 0; font-size: 16px; }
.tk-cap { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tk-ledger { margin: 8px 0 0; padding: 0; border-top: 2px solid var(--text); }
.tk-row { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--hair-2); }
.tk-row dt { width: 24%; padding-right: 16px; box-sizing: border-box; font-weight: 700; }
.tk-row dd { width: 76%; margin: 0; box-sizing: border-box; }
.tk-row dd p { margin: 0 0 8px; }
.tk-row dd p:last-child { margin-bottom: 0; }
.tk-cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 34px -14px 0; }
.tk-cols > div { width: 50%; padding: 0 14px; box-sizing: border-box; }
.tk-cols ul { margin: 10px 0 0; padding-left: 20px; }
.tk-cols li { margin-bottom: 8px; line-height: 1.6; }

/* Sources and the close */
.tk-srcs { padding: 20px 0 30px; }
.tk-src-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
.tk-src-grid > div { width: 50%; padding: 0 10px; box-sizing: border-box; }
.tk-src-card { height: 100%; box-sizing: border-box; padding: 20px; background: var(--surface); border: 1px solid var(--hair-2); }
.tk-src-card h3 { margin-bottom: 8px; }
.tk-src-card p { margin: 0 0 10px; font-size: 16px; }
.tk-end { padding: 10px 0 56px; }
.tk-end-box { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 26px 28px; background: #14211f; color: #f4f1ea; border-bottom: 4px solid #c8923a; }
.tk-end-box > div:first-child { width: 62%; }
.tk-end-box h2 { color: #ffffff; font-size: 26px; }
.tk-end-box p { margin: 8px 0 0; color: #e6e1d4; }
.tk-end-box a { color: #f0c779; }
.tk-end-actions { width: 38%; text-align: right; }
.tk-end-actions .btn { color: #ffffff; }
.tk-all { display: block; margin-top: 12px; font-size: 15px; }

@media (max-width: 860px) {
  .tk-top h1 { font-size: 31px; }
  .tk-strip li { width: 33.3333%; }
  .tk-syntax li, .tk-rule-a, .tk-rule-b, .tk-cols > div, .tk-src-grid > div { width: 100%; }
  .tk-rule-a { margin-bottom: 24px; }
  .tk-phones li { width: 100%; max-width: 360px; }
  .tk-row dt, .tk-row dd { width: 100%; padding-right: 0; }
  .tk-row dt { margin-bottom: 4px; }
  .tk-cols > div { margin-bottom: 22px; }
  .tk-src-grid > div { margin-bottom: 16px; }
  .tk-end-box > div:first-child, .tk-end-actions { width: 100%; text-align: left; }
  .tk-end-actions { margin-top: 16px; }
  .tk-table th, .tk-table td { padding: 10px 9px; font-size: 15px; }
  .page-tickspec h2 { font-size: 24px; }
}
@media (max-width: 520px) {
  .tk-strip li { width: 50%; }
  .tk-runs li { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .tk-runs .tk-why { width: 100%; margin-left: 34px; padding-left: 0; text-align: left; }
}