html[data-platform="ios"] {
  --ios-blue: #006fc9;
  --ios-glass: rgba(255, 255, 255, .72);
  --ios-glass-border: rgba(255, 255, 255, .75);
  --ios-surface: #ffffff;
  --ios-separator: rgba(60, 60, 67, .18);
  --ios-card-radius: 20px;
  --ios-group-radius: 16px;
  --ios-glass-radius: 24px;
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
  min-height: 100%;
  background:
    radial-gradient(circle at 16% 0%, rgba(78, 174, 255, .28) 0, rgba(78, 174, 255, .18) 28%, rgba(78, 174, 255, .06) 55%, transparent 82%),
    radial-gradient(circle at 90% 14%, rgba(118, 236, 202, .2) 0, rgba(118, 236, 202, .13) 28%, rgba(118, 236, 202, .04) 55%, transparent 82%),
    #edf4ff;
}

html[data-platform="ios"] body {
  min-height: 100dvh;
  background: transparent;
}

html[data-platform="ios"] .viewing-area::before { display: none; }

html[data-platform="ios"] h1 {
  font-size: clamp(2.125rem, 8vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
}

html[data-platform="ios"] .subtitle {
  font-size: 1.0625rem;
  line-height: 1.4;
}

html[data-platform="ios"] .label,
html[data-platform="ios"] .eyebrow {
  font-size: .9375rem;
  font-weight: 600;
}

html[data-platform="ios"] .value {
  margin-top: 32px;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  letter-spacing: -.045em;
}

html[data-platform="ios"] .unit {
  font-size: .42em;
  font-weight: 500;
}

html[data-platform="ios"] .widget,
html[data-platform="ios"] .chart-card,
html[data-platform="ios"] .panel,
html[data-platform="ios"] .meta {
  border-color: var(--ios-separator);
  border-radius: var(--ios-card-radius);
  background: var(--ios-surface);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-platform="ios"] .widget,
html[data-platform="ios"] .chart-card,
html[data-platform="ios"] .panel {
  border-top-color: var(--ios-separator);
  border-top-width: 1px;
  background: var(--ios-surface);
}

html[data-platform="ios"] .widget::before,
html[data-platform="ios"] .panel::before { display: none; }

@media (max-width: 599px) {
  html[data-platform="ios"] .widget,
  html[data-platform="ios"] .chart-card,
  html[data-platform="ios"] .panel { border-radius: var(--ios-group-radius); }
}

html[data-platform="ios"] .meta-item {
  background: transparent;
  border-color: var(--ios-separator);
  box-shadow: none;
}

html[data-platform="ios"] .one-nav {
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--ios-glass-border);
  border-radius: var(--ios-glass-radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .2)),
    var(--ios-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(31, 77, 133, .08),
    0 12px 30px rgba(31, 77, 133, .16);
}

html[data-platform="ios"] .one-nav a {
  min-height: 44px;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

html[data-platform="ios"] .one-nav a[aria-current="page"] {
  border-color: transparent;
  background: linear-gradient(135deg, #1686e8, var(--ios-blue));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 76, 145, .22);
}

html[data-platform="ios"] .status {
  border: 1px solid var(--ios-glass-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 58%, rgba(255, 255, 255, .18)),
    var(--ios-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .56),
    inset 0 -1px 0 rgba(31, 77, 133, .06),
    0 8px 20px rgba(31, 77, 133, .1);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-platform="ios"] .one-nav,
  html[data-platform="ios"] .status {
    -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.04);
    backdrop-filter: blur(28px) saturate(1.5) brightness(1.04);
  }
}

@media (max-width: 599px) {
  html[data-platform="ios"] .page {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  html[data-platform="ios"] .one-nav {
    position: fixed;
    z-index: 10;
    right: 16px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    margin: 0;
    overflow: visible;
    border-radius: var(--ios-glass-radius);
  }

  html[data-platform="ios"] .one-nav a {
    min-width: 0;
    min-height: 48px;
    padding: 10px 6px;
    font-size: .8125rem;
  }

  html[data-platform="ios"] .widget { padding: 20px; }
  html[data-platform="ios"] .value { font-size: clamp(2.125rem, 9vw, 2.75rem); }
  html[data-platform="ios"] .value:has(#pressure) { font-size: clamp(1.875rem, 8vw, 2.25rem); }
}

@media (prefers-color-scheme: dark) {
  html[data-platform="ios"] {
    --one-bg: #10131a;
    --one-surface: #1c2029;
    --one-surface-alt: #2a303b;
    --one-text: #f3f5f9;
    --one-muted: #c3c7d0;
    --one-outline: #4a515e;
    --ios-glass: rgba(35, 41, 52, .7);
    --ios-glass-border: rgba(255, 255, 255, .18);
    --ios-surface: #1c1c1e;
    --ios-separator: rgba(84, 84, 88, .65);
  }

  html[data-platform="ios"] {
    background:
      radial-gradient(circle at 16% 0%, rgba(37, 116, 199, .34) 0, rgba(37, 116, 199, .22) 28%, rgba(37, 116, 199, .07) 55%, transparent 82%),
      radial-gradient(circle at 90% 14%, rgba(36, 141, 116, .24) 0, rgba(36, 141, 116, .15) 28%, rgba(36, 141, 116, .05) 55%, transparent 82%),
      var(--one-bg);
  }

  html[data-platform="ios"] .one-nav,
  html[data-platform="ios"] .status {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .025) 52%, rgba(147, 198, 255, .1)),
      var(--ios-glass);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      inset 0 -1px 0 rgba(0, 0, 0, .2),
      0 12px 30px rgba(0, 0, 0, .24);
  }
}

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  html[data-platform="ios"] {
    --ios-glass: #ffffff;
    --ios-glass-border: #000000;
    --ios-surface: #ffffff;
  }

  html[data-platform="ios"] .one-nav,
  html[data-platform="ios"] .status {
    border-width: 2px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  html[data-platform="ios"] {
    --ios-glass: #1c2029;
    --ios-glass-border: #ffffff;
    --ios-surface: #1c2029;
  }
}