---
title: "Stride Live Run Session"
platform: ios
slug: stride-live-run-session
screens: ["workout"]
domains: ["fitness"]
style: "skeuomorphic"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider", "segmented-control", "toolbar"]
score: {clean: 98, consistent: 69, accessible: 65, comprehensible: 24}
url: https://gui.farm/ios/stride-live-run-session
raw: https://gui.farm/ios/stride-live-run-session/design.guix
download: https://gui.farm/ios/stride-live-run-session.gui
---

# Stride Live Run Session

A skeuomorphic dark iOS live-run session screen: elapsed time on an instrument gauge with a distance-goal progress ring, pace and heart-rate-zone readouts, secondary metrics, an elevation profile, and kilometre splits for a runner mid-tempo-run.

- **Live preview:** https://gui.farm/ios/stride-live-run-session
- **Raw source:** https://gui.farm/ios/stride-live-run-session/design.guix
- **Download (.gui):** https://gui.farm/ios/stride-live-run-session.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Stride Live Run Session">
  <mode name="theme" values="light dark" default="dark" />

  <tokens>
    <color name="bg"      value="#0E1114" />
    <color name="panel"   value="#171B20" />
    <color name="panel2"  value="#1F252C" />
    <color name="ink"     value="#EEF2F6" />
    <color name="ink-2"   value="#99A4B0" />
    <color name="ink-3"   value="#6B7784" />
    <color name="hair"    value="#262D35" />
    <color name="az"      value="#3A86FF" />
    <color name="az-t"    value="#6FB0FF" />
    <color name="tick"    value="#2A323B" />
    <color name="z1"      value="#24303F" />
    <color name="z2"      value="#2C4A6E" />
    <color name="z3"      value="#2E6ACB" />
    <color name="z4"      value="#3A86FF" />
    <color name="z5"      value="#7FB2FF" />

    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
    <number name="r-tile" value="16" />
  </tokens>

  <styles>
    <text-style name="Eyebrow"  font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" letter-spacing="1.6" />
    <text-style name="NavTitle" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="20" />
    <text-style name="Dial"     font-family="SF Pro Display" font-size="76" font-weight="300" line-height="78" letter-spacing="-1" />
    <text-style name="H2"       font-family="SF Pro Display" font-size="17" font-weight="700" line-height="21" />
    <text-style name="Metric"   font-family="SF Pro Display" font-size="24" font-weight="700" line-height="27" />
    <text-style name="MetricSm" font-family="SF Pro Display" font-size="20" font-weight="700" line-height="24" />
    <text-style name="Body"     font-family="SF Pro Display" font-size="14" font-weight="500" line-height="19" />
    <text-style name="Caption"  font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="SplitPace" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="15" />
    <text-style name="Tiny"     font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.7" />
  </styles>

  <fonts>
    <font family="SF Pro Display" source="system" weights="300 400 500 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="$bg" pb="30" gap="14" align="top-center">

    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="15 22 0" align="middle-center" gap="auto">
      <text value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23EEF2F6" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23EEF2F6" w="17" h="17" />
        <row w="24" h="12" radius="3" border="1 $ink-2" p="2" align="middle-left">
          <rect w="16" h="6" radius="1" fill="$ink" />
        </row>
      </row>
    </row>

    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="4 18 0" align="middle-center" gap="auto">
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center" fill="$panel">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #232A32 0%, #12161A 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#00000066" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF1A" />
        </appearance>
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23EEF2F6" w="22" h="22" />
      </col>
      <col gap="2" align="middle-center">
        <text text-style="Eyebrow" text-case="uppercase" value="Tempo Run" color="$az-t" align="center" />
        <text text-style="NavTitle" value="Riverside Loop" color="$ink" align="center" />
      </col>
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center" fill="$panel">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #232A32 0%, #12161A 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#00000066" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF1A" />
        </appearance>
        <img src="https://api.iconify.design/lucide/map.svg?color=%23EEF2F6" w="20" h="20" />
      </col>
    </row>

    <!-- Gauge -->
    <col w="393" p="6 0 0" align="middle-center">
      <frame w="344" h="344">
        <!-- Brushed-metal bezel -->
        <col x="12" y="12" w="320" h="320" radius="$r-pill" align="middle-center" fill="$panel">
          <appearance>
            <fill type="radial-gradient" value="radial-gradient(circle at 50% 26%, #2E363F 0%, #161B20 60%, #0A0D10 100%)" />
            <fill type="linear-gradient" value="linear-gradient(160deg, #FFFFFF1A 0%, #FFFFFF00 30%, #FFFFFF00 70%, #FFFFFF12 100%)" />
            <effect type="drop-shadow" x="0" y="18" radius="40" spread="-8" color="#00000080" />
            <effect type="inner-shadow" x="0" y="2" radius="0" spread="0" color="#FFFFFF26" />
            <effect type="inner-shadow" x="0" y="-3" radius="5" spread="0" color="#00000073" />
          </appearance>
          <!-- Recessed face with azure glow -->
          <col w="244" h="244" radius="$r-pill" align="middle-center" gap="6" fill="$bg">
            <appearance>
              <fill type="radial-gradient" value="radial-gradient(circle at 50% 30%, #12161B 0%, #07090B 74%)" />
              <fill type="radial-gradient" value="radial-gradient(circle at 50% 46%, #3A86FF33 0%, #3A86FF0F 34%, #3A86FF00 54%)" />
              <effect type="inner-shadow" x="0" y="2" radius="7" spread="0" color="#000000A6" />
              <effect type="inner-shadow" x="0" y="-1" radius="0" spread="0" color="#FFFFFF12" />
            </appearance>
            <text text-style="Eyebrow" text-case="uppercase" value="Elapsed" color="$az-t" align="center" />
            <text text-style="Dial" value="32:47" color="$ink" align="center" />
            <row gap="8" align="middle-center">
              <text text-style="Body" value="6.42 km" color="$ink" />
              <rect w="3" h="3" radius="$r-pill" fill="$ink-3" />
              <text text-style="Body" value="goal 8.0 km" color="$ink-2" />
            </row>
            <row role="badge" h="22" radius="$r-pill" fill="#12233F" p="0 10" gap="6" align="middle-center">
              <rect w="6" h="6" radius="$r-pill" fill="$az" />
              <text text-style="Tiny" value="80% TO GOAL" color="$az-t" />
            </row>
          </col>
        </col>
        <!-- Gauge progress ticks -->
        <rect x="317.6" y="184.6" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="314.1" y="204.4" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="308.0" y="223.6" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="299.4" y="241.7" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="288.4" y="258.6" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="275.3" y="273.9" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="260.2" y="287.2" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <rect x="243.5" y="298.4" w="7" h="7" radius="$r-pill" fill="$tick"/>
        <col x="93.5" y="298.4" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="76.8" y="287.2" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="61.7" y="273.9" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="48.6" y="258.6" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="37.6" y="241.7" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="29.0" y="223.6" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="22.9" y="204.4" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="19.4" y="184.6" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="18.6" y="164.5" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="20.4" y="144.4" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="25.0" y="124.8" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="32.1" y="106.0" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="41.7" y="88.3" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="53.6" y="72.1" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="67.5" y="57.6" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="83.3" y="45.1" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="100.6" y="34.8" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="119.1" y="26.9" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="138.5" y="21.5" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="158.4" y="18.8" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="178.6" y="18.8" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="198.5" y="21.5" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="217.9" y="26.9" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="236.4" y="34.8" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="253.7" y="45.1" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="269.5" y="57.6" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="283.4" y="72.1" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="295.3" y="88.3" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="304.9" y="106.0" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="312.0" y="124.8" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="316.6" y="144.4" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
        <col x="318.4" y="164.5" w="7" h="7" radius="$r-pill" fill="$az"><appearance><fill type="color" value="#3A86FF"/><effect type="drop-shadow" x="0" y="0" radius="7" spread="0" color="#3A86FFA6"/></appearance></col>
      </frame>
    </col>

    <!-- Pace & effort card -->
    <col role="card" w="353" fill="$panel" radius="$r-card" p="18" gap="16" border="1 $hair">
      <row w="317" align="top-left" gap="8">
        <col w="fill" gap="4" align="middle-left">
          <text text-style="Tiny" text-case="uppercase" value="Pace" color="$ink-2" />
          <row gap="3" align="bottom-left"><text text-style="Metric" value="5:07" color="$ink" /><text text-style="Caption" value="/km" color="$ink-2" pb="4" /></row>
        </col>
        <col w="fill" gap="4" align="middle-left">
          <text text-style="Tiny" text-case="uppercase" value="Avg pace" color="$ink-2" />
          <row gap="3" align="bottom-left"><text text-style="Metric" value="5:06" color="$ink" /><text text-style="Caption" value="/km" color="$ink-2" pb="4" /></row>
        </col>
        <col w="fill" gap="4" align="middle-left">
          <text text-style="Tiny" text-case="uppercase" value="Calories" color="$ink-2" />
          <row gap="3" align="bottom-left"><text text-style="Metric" value="428" color="$ink" /><text text-style="Caption" value="kcal" color="$ink-2" pb="4" /></row>
        </col>
      </row>
      <line w="317" fill="$hair" role="divider" />
      <col w="317" gap="9">
        <row w="fill" align="middle-left" gap="auto">
          <row gap="7" align="middle-center">
            <img src="https://api.iconify.design/lucide/heart-pulse.svg?color=%233A86FF" w="18" h="18" />
            <text text-style="H2" value="156" color="$ink" />
            <text text-style="Caption" value="bpm" color="$ink-2" />
          </row>
          <text text-style="SplitPace" value="Z4 · Threshold" color="$az-t" />
        </row>
        <!-- HR zone bar: 5 equal zones (95-190 bpm), marker at 156 -->
        <frame w="317" h="16">
          <rect x="0"     y="4" w="62.6" h="8" radius="4" fill="$z1" />
          <rect x="64.6"  y="4" w="60.6" h="8" fill="$z2" />
          <rect x="127.2" y="4" w="60.6" h="8" fill="$z3" />
          <rect x="189.8" y="4" w="60.6" h="8" fill="$z4" />
          <rect x="252.4" y="4" w="60.6" h="8" radius="4" fill="$z5" />
          <rect x="199.5" y="0" w="4" h="16" radius="2" fill="$ink" />
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Tiny" value="Z1" color="$ink-3" /><text text-style="Tiny" value="Z2" color="$ink-3" />
          <text text-style="Tiny" value="Z3" color="$ink-3" /><text text-style="Tiny" value="Z4" color="$az-t" />
          <text text-style="Tiny" value="Z5" color="$ink-3" />
        </row>
      </col>
    </col>

    <!-- Secondary metric grid 2x2 -->
    <col w="353" gap="13">
      <row w="353" gap="13" align="top-left">
        <col role="card" w="170" fill="$panel" radius="$r-tile" p="14" gap="10" border="1 $hair" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <img src="https://api.iconify.design/lucide/footprints.svg?color=%236FB0FF" w="18" h="18" />
            <text text-style="Tiny" text-case="uppercase" value="Cadence" color="$ink-2" />
          </row>
          <row gap="4" align="bottom-left"><text text-style="MetricSm" value="172" color="$ink" /><text text-style="Caption" value="spm" color="$ink-2" pb="3" /></row>
        </col>
        <col role="card" w="170" fill="$panel" radius="$r-tile" p="14" gap="10" border="1 $hair" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <img src="https://api.iconify.design/lucide/mountain.svg?color=%236FB0FF" w="18" h="18" />
            <text text-style="Tiny" text-case="uppercase" value="Elev gain" color="$ink-2" />
          </row>
          <row gap="4" align="bottom-left"><text text-style="MetricSm" value="63" color="$ink" /><text text-style="Caption" value="m" color="$ink-2" pb="3" /></row>
        </col>
      </row>
      <row w="353" gap="13" align="top-left">
        <col role="card" w="170" fill="$panel" radius="$r-tile" p="14" gap="10" border="1 $hair" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <img src="https://api.iconify.design/lucide/activity.svg?color=%236FB0FF" w="18" h="18" />
            <text text-style="Tiny" text-case="uppercase" value="Avg HR" color="$ink-2" />
          </row>
          <row gap="4" align="bottom-left"><text text-style="MetricSm" value="149" color="$ink" /><text text-style="Caption" value="bpm" color="$ink-2" pb="3" /></row>
        </col>
        <col role="card" w="170" fill="$panel" radius="$r-tile" p="14" gap="10" border="1 $hair" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <img src="https://api.iconify.design/lucide/shoe-prints.svg?color=%236FB0FF" w="18" h="18" />
            <text text-style="Tiny" text-case="uppercase" value="Steps" color="$ink-2" />
          </row>
          <row gap="4" align="bottom-left"><text text-style="MetricSm" value="5,636" color="$ink" /></row>
        </col>
      </row>
    </col>

    <!-- Elevation card -->
    <col role="card" w="353" fill="$panel" radius="$r-card" p="18" gap="14" border="1 $hair">
      <row w="fill" align="middle-left" gap="auto">
        <col gap="2">
          <text text-style="H2" value="Elevation" color="$ink" />
          <text text-style="Caption" value="Peak 96 m · +63 m gain" color="$ink-2" />
        </col>
        <row role="segmented-control" h="30" radius="$r-pill" fill="$panel2" p="3" gap="0" align="middle-center">
          <col h="24" radius="$r-pill" p="0 12" align="middle-center"><text text-style="SplitPace" value="Splits" color="$ink-2" /></col>
          <col h="24" radius="$r-pill" p="0 12" align="middle-center" fill="$az"><text text-style="SplitPace" value="Elev" color="#0A1220" /></col>
          <col h="24" radius="$r-pill" p="0 12" align="middle-center"><text text-style="SplitPace" value="Laps" color="$ink-2" /></col>
        </row>
      </row>
      <img src="https://gui.farm/tools/charts/line-chart.svg?data=0:40,1:52,2:68,3:61,4:79,5:96,6.4:91&amp;line=%233A86FF&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;xlabels=hide&amp;ylabels=show&amp;width=642&amp;height=200" w="317" h="99" fit="contain" />
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="Caption" value="Start" color="$ink-3" />
        <text text-style="Caption" value="6.4 km" color="$ink-3" />
      </row>
    </col>

    <!-- Splits card -->
    <col role="card" w="353" fill="$panel" radius="$r-card" p="18" gap="14" border="1 $hair">
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Kilometre splits" color="$ink" />
        <text text-style="Caption" value="Best 5:03" color="$az-t" />
      </row>
      <row w="fill" align="bottom-center" gap="auto">
        <col w="46" gap="7" align="middle-center">
          <frame w="26" h="48">
            <rect x="0" y="40.00" w="26" h="8.00" radius="6" fill="$panel2"/>
          </frame>
          <text text-style="SplitPace" value="5:12" color="$ink-2" align="center"/>
          <text text-style="Tiny" value="KM 1" color="$ink-3" align="center"/>
        </col>
        <col w="46" gap="7" align="middle-center">
          <frame w="26" h="48">
            <rect x="0" y="29.33" w="26" h="18.67" radius="6" fill="$panel2"/>
          </frame>
          <text text-style="SplitPace" value="5:09" color="$ink-2" align="center"/>
          <text text-style="Tiny" value="KM 2" color="$ink-3" align="center"/>
        </col>
        <col w="46" gap="7" align="middle-center">
          <frame w="26" h="48">
            <rect x="0" y="11.56" w="26" h="36.44" radius="6" fill="$panel2"/>
          </frame>
          <text text-style="SplitPace" value="5:04" color="$ink-2" align="center"/>
          <text text-style="Tiny" value="KM 3" color="$ink-3" align="center"/>
        </col>
        <col w="46" gap="7" align="middle-center">
          <frame w="26" h="48">
            <rect x="0" y="36.44" w="26" h="11.56" radius="6" fill="$panel2"/>
          </frame>
          <text text-style="SplitPace" value="5:11" color="$ink-2" align="center"/>
          <text text-style="Tiny" value="KM 4" color="$ink-3" align="center"/>
        </col>
        <col w="46" gap="7" align="middle-center">
          <frame w="26" h="48">
            <rect x="0" y="8.00" w="26" h="40.00" radius="6" fill="$az"/>
          </frame>
          <text text-style="SplitPace" value="5:03" color="$az-t" align="center"/>
          <text text-style="Tiny" value="KM 5" color="$ink-3" align="center"/>
        </col>
        <col w="46" gap="7" align="middle-center">
          <frame w="26" h="48">
            <rect x="0" y="22.22" w="26" h="25.78" radius="6" fill="$panel2"/>
          </frame>
          <text text-style="SplitPace" value="5:07" color="$ink-2" align="center"/>
          <text text-style="Tiny" value="KM 6" color="$ink-3" align="center"/>
        </col>
      </row>
    </col>

    <!-- Control cluster (viewport-fixed, last flow child) -->
    <row role="toolbar" w="fill" h="96" fill="#12161A" border="1 $hair" p="14 40 26" align="top-center" gap="auto">
      <col role="button" w="60" h="60" radius="$r-pill" align="middle-center" fill="$panel2" border="1 $hair">
        <img src="https://api.iconify.design/lucide/flag.svg?color=%23EEF2F6" w="22" h="22" />
      </col>
      <col role="button" w="76" h="76" radius="$r-pill" align="middle-center" fill="$az">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #5A9CFF 0%, #2E6BE0 100%)" />
          <effect type="drop-shadow" x="0" y="4" radius="16" spread="-2" color="#3A86FF80" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF4D" />
        </appearance>
        <img src="https://api.iconify.design/lucide/pause.svg?color=%230A1220" w="30" h="30" />
      </col>
      <col role="button" w="60" h="60" radius="$r-pill" align="middle-center" fill="$panel2" border="1 $hair">
        <img src="https://api.iconify.design/lucide/square.svg?color=%23EEF2F6" w="20" h="20" />
      </col>
    </row>

  </col>
</gui>
```