/* "Rekord och kilometertider" – race film on an editing table. Warm grey-white page, midnight-blue film strips,
   cyan times, coral for gallop/deviations, muted yellow for split times, light lavender for historic records. */
.rk {
  --rk-page: #f2efe9; --rk-paper: #faf8f4; --rk-card: #fff; --rk-line: #ddd7cc; --rk-ink: #262b33; --rk-ink-2: #4c5563;
  --rk-film: #14254a; --rk-film-2: #1f3563; --rk-film-3: #2c4677; --rk-hole: #f2efe9;
  --rk-cyan: #0a6f8c; --rk-cyan-lt: #64d8f0; --rk-cyan-bg: #e2f5fa;
  --rk-coral: #b8432d; --rk-coral-lt: #ff8a73; --rk-coral-bg: #fde9e4;
  --rk-yellow: #e4c15a; --rk-yellow-bg: #faf0cf; --rk-yellow-ink: #6b5410;
  --rk-lav: #ece8f7; --rk-lav-2: #9a8cc6; --rk-lav-ink: #4a3d7a;
  --rk-cond: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", sans-serif;
  background: var(--rk-page);
  color: var(--rk-ink);
  font-variant-numeric: tabular-nums;
}
.rk h1, .rk h2, .rk h3 { color: var(--rk-ink); }
.rk a { color: var(--link); }
.rk .num { text-align: right; }
.rk-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Codes, formulas, labels */
.rk-code { font-family: var(--rk-cond); font-stretch: condensed; font-weight: 700; font-size: 1.02em; letter-spacing: .01em; color: var(--rk-cyan); background: var(--rk-cyan-bg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-formula { margin: 10px 0 14px; }
.rk-formula code { display: inline-block; font-family: var(--rk-cond); font-weight: 700; font-size: clamp(17px, 1.8vw, 21px); color: var(--rk-film); background: var(--rk-card); border: 1px solid var(--rk-line); border-left: 5px solid var(--rk-cyan); padding: 8px 14px; border-radius: 6px; max-width: 100%; overflow-wrap: anywhere; }
.rk-cap { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rk-ink-2); margin: 0 0 6px; }
.rk-fiction { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--rk-ink-2); color: var(--rk-ink-2); background: var(--rk-card); }
.rk-fiction::before { content: "Fiktivt"; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--rk-ink-2); color: #fff; border-radius: 999px; padding: 1px 7px; }
.rk-note { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--rk-ink-2); margin: 12px 0 0; }
.rk-note.is-warn { color: var(--rk-coral); }
.rk-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0; font-weight: 600; color: var(--rk-ink-2); }
.rk-rel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.rk-rel .rk-ico { color: var(--rk-film-3); }

/* Hero */
.rk-hero { background: linear-gradient(180deg, #e9e5dd, var(--rk-page)); border-bottom: 1px solid var(--rk-line); }
.rk-hero-in { padding-bottom: 28px; }
.rk-hero h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.02em; max-width: 22ch; margin: 6px 0 20px; font-stretch: expanded; }
.rk-hero-desk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; }
.rk-hero-fig { margin: 0; min-width: 0; background: var(--rk-film); border-radius: 10px; padding: 14px 14px 16px; }
.rk-hero-cap { color: #fff; font-weight: 800; font-size: clamp(16px, 1.6vw, 20px); margin: 0 0 12px; }
.rk-hero-code { background: var(--rk-film); color: #fff; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.rk-slate-lbl { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c9d4ea; }

/* Film strip */
.rk-strip { list-style: none; margin: 0; padding: 12px 0; display: grid; gap: 6px 10px; align-items: start; position: relative;
  background-image: radial-gradient(circle, var(--rk-hole) 3.5px, transparent 4px), radial-gradient(circle, var(--rk-hole) 3.5px, transparent 4px);
  background-size: 18px 10px, 18px 10px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.rk-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rk-strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rk-film .rk-strip, .rk-gallop .rk-strip { background-color: var(--rk-film); border-radius: 10px; padding: 14px 12px; }
.rk-frame { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 6px; color: #fff; transition: opacity .2s; }
.rk-frame-img { position: relative; border: 2px solid var(--rk-film-3); border-radius: 6px; overflow: hidden; background: var(--rk-film-2); }
.rk-frame-n { position: absolute; top: 4px; left: 4px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: rgba(0, 0, 0, .35); color: #fff; font: 800 12px/1 var(--font); }
.rk-frame-title { font-size: 14px; line-height: 1.25; }
.rk-frame-body { display: grid; gap: 4px; }
.rk-frame-text { margin: 0; font-size: 13px; line-height: 1.4; color: #d4ddef; }
.rk-mark { margin-top: 6px; padding-top: 10px; border-top: 3px solid var(--rk-film-3); display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; position: relative; align-items: flex-start; align-content: flex-start; }
.rk-mark::before { content: ""; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--rk-film-3); }
.rk-mark.is-empty::before { background: transparent; border: 2px solid var(--rk-film-3); width: 9px; height: 9px; }
.rk-tok { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 4px; background: var(--rk-film-2); border: 1px solid var(--rk-film-3); font-size: 12px; color: #e6ecf7; transition: opacity .2s, background .2s; }
.rk-tok-v { font-family: var(--rk-cond); font-weight: 800; font-size: 16px; color: var(--rk-cyan-lt); }
.rk-tok.is-split { background: var(--rk-yellow-bg); border-color: var(--rk-yellow); color: var(--rk-yellow-ink); }
.rk-tok.is-split .rk-tok-v { color: var(--rk-yellow-ink); }
.rk-mark.is-split { border-top-color: var(--rk-yellow); }
.rk-mark.is-split::before { background: var(--rk-yellow); }
.rk-tok.is-g { background: var(--rk-coral-bg); border-color: var(--rk-coral-lt); color: var(--rk-coral); }
.rk-tok.is-g .rk-tok-v { color: var(--rk-coral); }
.rk-mark.is-g { border-top-color: var(--rk-coral-lt); }
.rk-mark.is-g::before { background: var(--rk-coral-lt); }

/* Scenes */
.rk-sc, .rk-pf-svg { display: block; width: 100%; height: auto; }
.rk-sc-bg { fill: var(--rk-film-2); }
.rk-sc-lane { stroke: #3d5a8f; stroke-width: 1; stroke-dasharray: 4 4; }
.rk-sc-rail { stroke: #9fb2d6; stroke-width: 3; }
.rk-sc-field { fill: #8fa3c7; }
.rk-sc-me { fill: var(--rk-cyan-lt); stroke: #fff; stroke-width: 2; }
.rk-sc-wing { stroke: #cfd8ea; stroke-width: 3; fill: none; }
.rk-sc-car { fill: #cfd8ea; }
.rk-sc-split { stroke: var(--rk-yellow); stroke-width: 2; stroke-dasharray: 3 3; }
.rk-sc-txt { fill: var(--rk-yellow); font: 700 10px/1 var(--font); }
.rk-sc-bend { fill: none; stroke: #9fb2d6; stroke-width: 3; }
.rk-sc-bend.is-thin { stroke: #3d5a8f; stroke-width: 1; stroke-dasharray: 4 4; }
.rk-sc-arrow { fill: none; stroke: var(--rk-cyan-lt); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rk-sc-arrow.is-back { stroke: var(--rk-coral-lt); }
.rk-sc-chk { fill: #fff; }
.rk-sc-chk.is-alt { fill: #0b1734; }
.rk-sc-zig { fill: none; stroke: var(--rk-coral-lt); stroke-width: 3; stroke-linejoin: round; }
.rk-sc-g { fill: var(--rk-coral-lt); stroke: #fff; stroke-width: 2; }
.rk-sc-gtxt { fill: #3a0f06; font: 800 14px/1 var(--font); }
.rk-sc-path { stroke: var(--rk-cyan-lt); stroke-width: 2; stroke-dasharray: 5 4; }

/* Record code buttons (hero + clapperboard) */
.rk-code-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-part { min-height: 44px; min-width: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--rk-film-3); background: var(--rk-film-2); color: #fff; font: 600 12px/1.2 var(--font); cursor: pointer; transition: opacity .2s, background .2s, border-color .2s; }
.rk-part-tok { font-family: var(--rk-cond); font-weight: 800; font-size: 30px; line-height: 1; color: var(--rk-cyan-lt); }
.rk-part.is-star .rk-part-tok { color: #ffe08a; }
.rk-part:hover { border-color: var(--rk-cyan-lt); }
.rk-part[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--rk-film); box-shadow: 0 0 0 3px var(--rk-cyan-lt); }
.rk-part[aria-pressed="true"] .rk-part-tok { color: var(--rk-film); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.rk-part:focus-visible, .rk-reset:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.rk-hero-code .rk-code-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rk-code-status { margin: 0; min-height: 1.5em; font-size: 14px; font-weight: 600; color: #e6ecf7; }
.rk-reset { align-self: flex-start; min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid #8fa3c7; background: transparent; color: #fff; font: 700 14px/1.2 var(--font); cursor: pointer; }
.rk-reset:hover { background: var(--rk-film-2); }
.is-dim { opacity: .38; }
.rk-frame.is-on .rk-frame-img { border-color: var(--rk-cyan-lt); box-shadow: 0 0 0 2px var(--rk-cyan-lt); }
.rk-tok.is-on { background: #fff; color: var(--rk-film); border-color: #fff; outline: 2px solid var(--rk-cyan-lt); }
.rk-tok.is-on .rk-tok-v { color: var(--rk-film); }

/* Clapperboard */
.rk-slate { margin: 22px 0; max-width: 620px; }
.rk-slate-top { height: 34px; border-radius: 10px 10px 0 0; background: repeating-linear-gradient(-45deg, var(--rk-film) 0 18px, #f5f3ee 18px 36px); border: 3px solid var(--rk-film); border-bottom: 0; }
.rk-slate-body { background: var(--rk-film); color: #fff; padding: 18px; border-radius: 0 0 10px 10px; display: grid; gap: 12px; }
.rk-code-row.is-slate .rk-part { flex: 1 1 110px; padding: 10px; }
.rk-code-row.is-slate .rk-part-tok { font-size: clamp(34px, 5vw, 48px); }
.rk-code-row.is-slate .rk-part-lbl { font-size: 13px; }
.rk-slate .rk-cap { margin-top: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Paper */
.rk-layout { padding-block: 24px 48px; }
.rk-paper { background: var(--rk-paper); border: 1px solid var(--rk-line); border-radius: 10px; padding: clamp(18px, 3vw, 40px); max-width: none; }
.rk-paper p, .rk-paper li { max-width: 72ch; }
.rk-paper h2 { margin-top: 52px; padding-top: 14px; border-top: 3px solid var(--rk-film); position: relative; }
.rk-paper h2::before { content: ""; position: absolute; top: -3px; left: 0; width: 64px; height: 3px; background: var(--rk-cyan-lt); }
.rk-card h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.rk-card h2::before { display: none; }
.rk-ingress { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; }
.rk-list { padding-left: 22px; }
.rk-list li { margin: 3px 0; }
.rk-codes { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.rk-splits li::marker { color: var(--rk-yellow-ink); }
.rk-split { font-family: var(--rk-cond); font-weight: 800; background: var(--rk-yellow-bg); color: var(--rk-yellow-ink); border-bottom: 2px solid var(--rk-yellow); padding: 0 6px; border-radius: 3px; }
.rk-fig { margin: 24px 0; min-width: 0; }
.rk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.rk-card { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.rk-card h3 { margin-top: 0; }
.rk-card.is-old { background: var(--rk-lav); border-color: var(--rk-lav-2); }
.rk-card.is-now { border-top: 4px solid var(--rk-cyan); }
.rk-card.is-old { border-top: 4px solid var(--rk-lav-2); }
.rk-card.is-dev { border-left: 5px solid var(--rk-coral); }
.rk-lap-h { font-weight: 800; margin: 0 0 4px; }

/* Tables */
.rk-table-wrap { margin: 12px 0; border: 1px solid var(--rk-line); border-radius: 8px; background: var(--rk-card); }
.rk-table th { background: #ebe7f0; color: var(--rk-ink); }
.rk-t-hist tbody tr:first-child td { background: var(--rk-lav); }
.rk-tc { font-family: var(--rk-cond); font-weight: 800; color: var(--rk-cyan); width: 90px; }

/* Distance tracks */
.rk-track-list { list-style: none; margin: 0; padding: 14px; display: grid; gap: 12px; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 10px; }
.rk-track { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.rk-track-name { font-weight: 800; }
.rk-track-lane { border-left: 4px solid var(--rk-ink); padding-left: 0; }
.rk-track-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 6px 10px; color: #fff; border-radius: 0 6px 6px 0;
  background-color: var(--rk-film); background-image: radial-gradient(circle, var(--rk-hole) 2.5px, transparent 3px), radial-gradient(circle, var(--rk-hole) 2.5px, transparent 3px);
  background-size: 14px 8px, 14px 8px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.rk-track.is-k .rk-track-bar { width: 62%; }
.rk-track.is-m .rk-track-bar { width: 81%; }
.rk-track.is-l .rk-track-bar { width: 100%; }
.rk-track-start { font-size: 12px; font-weight: 700; color: #c9d4ea; }
.rk-track-bar .rk-code { background: transparent; color: var(--rk-cyan-lt); font-size: 20px; }
.rk-track-flag { color: #fff; }
.rk-track-dist { grid-column: 2; font-size: 14px; color: var(--rk-ink-2); }

/* Archive split */
.rk-archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 10px; overflow: hidden; border: 3px solid var(--rk-film); }
.rk-archive-card { padding: 18px; min-width: 0; }
.rk-archive-card.is-old { background: var(--rk-lav); color: var(--rk-lav-ink); border-right: 3px dashed var(--rk-film); }
.rk-archive-card.is-old .rk-code { background: #fff; color: var(--rk-lav-ink); }
.rk-archive-card.is-now { background: var(--rk-card); }
.rk-archive-h { margin: 6px 0; font-size: 22px; }
.rk-archive-card.is-old .rk-archive-h { color: var(--rk-lav-ink); }
.rk-stamp { display: inline-block; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border: 2px solid currentColor; border-radius: 4px; }
.rk-archive-card.is-old .rk-stamp { transform: rotate(-2deg); }
.rk-archive-card.is-now .rk-stamp { color: var(--rk-cyan); }
.rk-archive-v { font-size: 18px; margin: 4px 0 0; }
.rk-archive-v .rk-code { font-size: 24px; }
.rk-archive-q { margin: 12px 0 0; font-weight: 800; font-size: 18px; text-align: center; max-width: none; }

/* Converter */
.rk-conv { margin: 24px 0; background: var(--rk-card); border: 1px solid var(--rk-line); border-top: 6px solid var(--rk-film); border-radius: 10px; padding: clamp(14px, 2.4vw, 24px); }
.rk-conv-head { display: flex; gap: 8px; align-items: center; color: var(--rk-film); }
.rk-conv-head h3 { margin: 0; }
.rk-conv-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 12px; }
.rk-conv-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.rk-conv-fs legend { font-weight: 800; font-size: 14px; margin-bottom: 4px; padding: 0; }
.rk-conv-fields { display: flex; gap: 8px; }
.rk-field { display: grid; gap: 4px; }
.rk-field label { font-size: 13px; font-weight: 700; color: var(--rk-ink-2); }
.rk-field input { width: 84px; min-height: 48px; padding: 8px 10px; border: 2px solid var(--rk-line); border-radius: 8px; font: 700 20px/1 var(--rk-cond); font-variant-numeric: tabular-nums; color: var(--rk-ink); background: #fff; }
.rk-field-dist input { width: 120px; }
.rk-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--rk-film); }
.rk-field input[aria-invalid="true"] { border-color: var(--rk-coral); background: var(--rk-coral-bg); }
.rk-conv-btn { min-height: 48px; }
.rk-hint { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--rk-ink-2); }
.rk-conv-out { margin-top: 16px; padding: 14px; border-radius: 8px; background: var(--rk-film); color: #fff; }
.rk-conv-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.rk-conv-dl > div { min-width: 0; padding: 8px 10px; border-left: 3px solid var(--rk-cyan-lt); }
.rk-conv-dl dt { font-size: 13px; color: #c9d4ea; font-weight: 600; }
.rk-conv-dl dd { margin: 2px 0 0; font: 800 26px/1.15 var(--rk-cond); color: var(--rk-cyan-lt); }
.rk-conv-dl dd.rk-conv-sub { font-size: 18px; color: #fff; }
.rk-conv-out .rk-formula code { background: var(--rk-film-2); color: #fff; border-color: var(--rk-film-3); border-left-color: var(--rk-cyan-lt); }
.rk-conv-words { margin: 0; font-weight: 700; }
.rk-conv-err { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--rk-coral-bg); color: var(--rk-coral); font-weight: 700; }

/* Tenths zoom */
.rk-zoom { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 10px; padding: 16px; }
.rk-zoom-ruler { padding: 8px 6px 0; }
.rk-zoom-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 0; border-top: 6px solid var(--rk-film); }
.rk-zoom-tick { position: relative; height: 44px; border-left: 2px solid var(--rk-film); }
.rk-zoom-tick span { position: absolute; top: 12px; left: 0; transform: translateX(-50%); font: 800 17px/1 var(--rk-cond); color: var(--rk-cyan); background: var(--rk-card); padding: 0 2px; }
.rk-zoom-tick:first-child span { transform: none; }
.rk-zoom-tick:last-child span { transform: translateX(-100%); }
.rk-zoom-span { margin-top: 8px; border: 2px solid var(--rk-yellow); border-top: 0; height: 14px; border-radius: 0 0 8px 8px; position: relative; }
.rk-zoom-span span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--rk-yellow-ink); background: var(--rk-yellow-bg); padding: 2px 8px; border-radius: 4px; }
.rk-zoom-meta { margin: 42px 0 0; font-weight: 600; }

/* Tempo curve */
.rk-curve { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 10px; padding: 16px; }
.rk-curve-svg { display: block; width: 100%; height: auto; }
.rk-cv-grid { stroke: #ece8e0; stroke-width: 1; }
.rk-cv-yax { fill: none; stroke: var(--rk-ink-2); stroke-width: 2; }
.rk-cv-ax { fill: var(--rk-ink-2); font: 600 15px/1 var(--font); }
.rk-cv-a { fill: none; stroke: var(--rk-cyan); stroke-width: 4; stroke-linejoin: round; }
.rk-cv-b { fill: none; stroke: var(--rk-film); stroke-width: 4; stroke-dasharray: 10 7; stroke-linejoin: round; }
.rk-cv-pa { fill: var(--rk-cyan); stroke: #fff; stroke-width: 2; }
.rk-cv-pb { fill: var(--rk-film); stroke: #fff; stroke-width: 2; }
.rk-cv-lbl { font: 800 16px/1 var(--font); }
.rk-cv-lbl.is-a { fill: var(--rk-cyan); }
.rk-cv-lbl.is-b { fill: var(--rk-film); }
.rk-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin: 8px 0; }
.rk-key { display: inline-flex; align-items: center; gap: 8px; }
.rk-key::before { content: ""; width: 28px; border-top: 4px solid var(--rk-cyan); }
.rk-key.is-b::before { border-top: 4px dashed var(--rk-film); }
.rk-curve-msg { font-weight: 800; font-size: 18px; margin: 10px 0; color: var(--rk-film); }

/* Position film */
.rk-pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rk-pf-item { background: var(--rk-film); color: #fff; border-radius: 10px; padding: 10px 12px 12px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.rk-pf-head { display: grid; gap: 6px; justify-items: start; }
.rk-pf-head .rk-code { background: var(--rk-film-2); color: var(--rk-cyan-lt); font-size: 22px; }
.rk-pf-path { fill: none; stroke: var(--rk-cyan-lt); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; }
.rk-pf-meta { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: #d4ddef; max-width: none; }

/* Conditions */
.rk-conds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rk-cond { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.rk-cond-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--rk-film); color: #fff; border-bottom: 4px solid var(--rk-cyan-lt); }
.rk-cond.is-rain .rk-cond-top, .rk-cond.is-snow .rk-cond-top { border-bottom-color: #9fb2d6; }
.rk-cond.is-wind .rk-cond-top { border-bottom-color: var(--rk-yellow); }
.rk-cond-n { font: 800 20px/1 var(--rk-cond); }
.rk-cond-ico { width: 30px; height: 30px; }
.rk-cond-h { font-size: 17px; margin: 10px 12px 4px; }
.rk-cond-q { margin: 0 12px 12px; font-size: 14px; color: var(--rk-ink-2); }

/* Gallop results */
.rk-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.rk-result { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 8px; padding: 12px 14px; }
.rk-result.is-time { border-left: 6px solid var(--rk-coral); }
.rk-result.is-place { border-left: 6px solid var(--rk-film); }
.rk-result-k { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rk-ink-2); }
.rk-result-v { margin: 4px 0 0; font-weight: 700; font-size: 18px; }
.rk-result.is-time .rk-code { color: var(--rk-coral); background: var(--rk-coral-bg); font-size: 22px; }
.rk-results-note { display: flex; gap: 8px; align-items: center; font-weight: 700; margin: 10px 0 0; }

/* Time profile */
.rk-lower { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--rk-film); margin: 0 0 12px; }
.rk-prof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rk-prof { background: var(--rk-card); border: 1px solid var(--rk-line); border-top: 6px solid var(--rk-film); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.rk-prof-h { margin: 0 0 8px; }
.rk-prof-times, .rk-prof-meta { margin: 0; display: grid; }
.rk-prof-times > div, .rk-prof-meta > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #efebe4; }
.rk-prof-times dt, .rk-prof-meta dt { font-weight: 600; }
.rk-prof-times dd, .rk-prof-meta dd { margin: 0; text-align: right; font-weight: 700; }
.rk-prof-times > div:first-child { background: var(--rk-lav); margin: 0 -8px; padding: 6px 8px; border-radius: 4px; }
.rk-prof-meta { margin-top: 10px; font-size: 14px; color: var(--rk-ink-2); }
.rk-prof-spark { margin-top: 12px; }
.rk-prof-k { margin: 0; font-size: 13px; font-weight: 800; color: var(--rk-ink-2); }
.rk-spark { display: block; width: 100%; max-width: 320px; height: auto; }
.rk-sp-axis { stroke: #e3ded4; stroke-width: 1; }
.rk-sp-lbl { fill: var(--rk-ink-2); font: 700 12px/1 var(--font); }
.rk-sp-line { fill: none; stroke: var(--rk-cyan); stroke-width: 3; stroke-linejoin: round; }
.rk-sp-dot { fill: var(--rk-cyan); stroke: #fff; stroke-width: 2; }
.rk-prof-vals { margin: 2px 0 0; font: 700 15px/1.3 var(--rk-cond); color: var(--rk-ink-2); }

/* Comparison clips */
.rk-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.rk-clip { display: flex; flex-direction: column; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 10px; overflow: hidden; min-width: 0; }
.rk-clip-bar { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px 12px; color: #fff; background-color: var(--rk-film);
  background-image: radial-gradient(circle, var(--rk-hole) 2.5px, transparent 3px); background-size: 14px 8px; background-position: 0 100%; background-repeat: repeat-x; }
.rk-clip-n { font: 800 13px/1 var(--rk-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-cyan-lt); }
.rk-clip-name { font-weight: 800; }
.rk-clip-body { padding: 4px 14px; flex: 1; }
.rk-clip-body h3 { font-size: 18px; margin-top: 10px; }
.rk-clip-body .rk-formula code { font-size: 16px; }
.rk-clip-lbl { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px; font-weight: 800; border-top: 1px solid var(--rk-line); }
.rk-clip.is-direct .rk-clip-lbl { background: var(--rk-cyan-bg); color: var(--rk-cyan); }
.rk-clip.is-careful .rk-clip-lbl { background: var(--rk-coral-bg); color: var(--rk-coral); }
.rk-clip.is-events .rk-clip-lbl { background: var(--rk-yellow-bg); color: var(--rk-yellow-ink); }
.rk-weigh { margin-top: 44px; }

/* Mistakes */
.rk-mistakes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rk-mistake { background: var(--rk-card); border: 1px solid var(--rk-line); border-left: 5px solid var(--rk-coral); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.rk-mistake h3 { font-size: 16px; margin: 0 0 4px; }
.rk-mistake p { margin: 0; }

/* Summary */
.rk-summary { border-left: 6px solid var(--rk-cyan); padding: 4px 0 4px 16px; background: var(--rk-card); border-radius: 0 8px 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .rk-frame, .rk-tok, .rk-part { transition: none; }
}
@media (max-width: 1000px) {
  .rk-hero-desk { grid-template-columns: 1fr; }
  .rk-clips, .rk-mistakes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-conv-dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .rk-hero h1 { font-size: clamp(26px, 8vw, 36px); }
  .rk-hero-fig, .rk-hero-code { padding: 12px; }
  .rk-strip, .rk-strip-4, .rk-strip-5 { grid-template-columns: 1fr; background-image: none; gap: 0; padding: 4px 0; }
  .rk-film .rk-strip, .rk-gallop .rk-strip { padding: 10px; }
  .rk-frame { grid-row: auto; grid-template-rows: auto 1fr; display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "mark img" "mark body"; gap: 6px 10px; padding-bottom: 14px; }
  .rk-frame-img { grid-area: img; max-width: 220px; }
  .rk-frame-body { grid-area: body; }
  .rk-mark { grid-area: mark; margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 3px solid var(--rk-film-3); flex-direction: column; align-items: flex-start; min-height: 0; }
  .rk-mark::before { top: 0; left: -8px; }
  .rk-mark.is-empty::before { left: -7px; }
  .rk-mark.is-split, .rk-mark.is-g { border-left-color: var(--rk-film-3); }
  .rk-tok { flex-direction: column; gap: 0; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .rk-tok-v { font-size: 14px; overflow-wrap: normal; word-break: normal; }
  .rk-two, .rk-results, .rk-prof-list, .rk-clips, .rk-mistakes, .rk-conds, .rk-conv-dl { grid-template-columns: 1fr; }
  .rk-archive-grid { grid-template-columns: 1fr; }
  .rk-archive-card.is-old { border-right: 0; border-bottom: 3px dashed var(--rk-film); }
  .rk-track { grid-template-columns: 1fr; }
  .rk-track-dist { grid-column: 1; }
  .rk-pf-item { grid-template-columns: 1fr; }
  .rk-pf-head { grid-auto-flow: column; justify-content: space-between; align-items: center; width: 100%; }
  .rk-zoom-tick span { font-size: 14px; }
  .rk-zoom-span span { white-space: normal; text-align: center; width: 90%; }
  .rk-zoom-meta { margin-top: 58px; }
  .rk-formula code { font-size: 16px; }
  /* tables to cards */
  .rk-table-wrap { border: 0; background: transparent; overflow: visible; }
  .rk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rk-table, .rk-table tbody, .rk-table tr, .rk-table td { display: block; width: 100%; }
  .rk-table tr { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 8px; margin-bottom: 8px; padding: 6px 0; }
  .rk-table td, .rk-table td:first-child, .rk-table td:last-child { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; padding: 6px 12px; border: 0; text-align: left; }
  .rk-table td::before { content: attr(data-label); font-weight: 700; color: var(--rk-ink-2); font-size: 14px; }
  .rk-table tbody tr:last-child td { border-bottom: 0; }
  .rk-tc { width: auto; }
}