:root {
  /* Reference colors */
  --ref-orange-50: #fff4ee;
  --ref-orange-100: #ffe2d6;
  --ref-orange-500: #f26322;
  --ref-orange-600: #ee4f0a;
  --ref-orange-700: #d54008;
  --ref-orange-800: #b9360a;
  --ref-green-50: #e9f8ee;
  --ref-green-500: #22c55e;
  --ref-green-700: #14863f;
  --ref-amber-50: #fff4d6;
  --ref-amber-500: #f5b72e;
  --ref-amber-800: #9b6700;
  --ref-red-50: #fdecec;
  --ref-red-600: #dc3838;
  --ref-blue-50: #eaf2fc;
  --ref-blue-700: #1466c8;
  --ref-neutral-950: #1f1f1f;
  --ref-neutral-900: #171717;
  --ref-neutral-850: #111111;
  --ref-neutral-700: #5f6267;
  --ref-neutral-500: #777b80;
  --ref-neutral-400: #96999f;
  --ref-neutral-200: #d7d8da;
  --ref-neutral-175: #d0d1d3;
  --ref-neutral-150: #dddddd;
  --ref-neutral-125: #e4e4e6;
  --ref-neutral-100: #e8e8ea;
  --ref-neutral-75: #ededee;
  --ref-neutral-50: #f2f2f3;
  --ref-neutral-canvas: #efede9;
  --ref-neutral-page: #f7f7f8;
  --ref-control-handle: #c9cbce;
  --ref-white: #ffffff;
  --ref-map-canvas: #f3f5ee;
  --ref-warm-canvas: #fbfaf8;

  /* Semantic colors */
  --color-brand: var(--ref-orange-500);
  --color-brand-emphasis: var(--ref-orange-600);
  --color-action-primary: var(--ref-orange-700);
  --color-action-primary-text: var(--ref-white);
  --color-link-brand: var(--ref-orange-800);
  --color-selection-soft: var(--ref-orange-50);
  --color-focus: var(--ref-orange-100);
  --color-badge-neutral-bg: var(--ref-neutral-75);
  --color-badge-neutral-fg: var(--ref-neutral-700);
  --color-badge-brand-bg: var(--ref-orange-50);
  --color-badge-brand-fg: var(--ref-orange-600);
  --color-subscription-inactive-bg: var(--ref-orange-50);
  --color-subscription-inactive-fg: var(--ref-orange-600);
  --color-subscription-active-bg: var(--ref-orange-700);
  --color-subscription-active-fg: var(--ref-white);
  --color-icon-identity-bg: var(--ref-blue-50);
  --color-icon-identity-fg: var(--ref-blue-700);
  --color-pet-safe: var(--ref-green-700);
  --color-device-online: var(--ref-green-700);
  --color-success: var(--ref-green-700);
  --color-success-indicator: var(--ref-green-500);
  --color-success-soft: var(--ref-green-50);
  --color-warning: var(--ref-amber-800);
  --color-warning-indicator: var(--ref-amber-500);
  --color-warning-soft: var(--ref-amber-50);
  --color-danger: var(--ref-red-600);
  --color-danger-soft: var(--ref-red-50);
  --color-info: var(--ref-blue-700);
  --color-info-soft: var(--ref-blue-50);
  --color-device-offline: var(--ref-neutral-500);
  --color-bg-canvas: var(--ref-neutral-canvas);
  --color-bg-page: var(--ref-neutral-page);
  --color-bg-surface: var(--ref-white);
  --color-bg-subtle: var(--ref-neutral-50);
  --color-text-primary: var(--ref-neutral-950);
  --color-text-secondary: var(--ref-neutral-700);
  --color-text-muted: var(--ref-neutral-500);
  --color-text-disabled: var(--ref-neutral-400);
  --color-text-inverse: var(--ref-white);
  --color-border-subtle: rgba(31, 31, 31, 0.1);
  --color-border-default: rgba(31, 31, 31, 0.16);
  --color-border-muted: var(--ref-neutral-100);
  --color-overlay-media: rgba(0, 0, 0, 0.6);
  --color-overlay-scrim: rgba(17, 17, 17, 0.54);
  --color-overlay-control: rgba(31, 31, 31, 0.72);
  --color-overlay-control-muted: rgba(31, 31, 31, 0.62);
  --color-overlay-control-strong: rgba(31, 31, 31, 0.94);
  --color-overlay-media-soft: rgba(17, 17, 17, 0.52);
  --color-overlay-media-medium: rgba(17, 17, 17, 0.62);
  --color-overlay-media-strong: rgba(17, 17, 17, 0.72);
  --color-overlay-subtle: rgba(23, 23, 23, 0.26);
  --color-media-stage: var(--ref-neutral-900);
  --color-device-shell: var(--ref-neutral-850);
  --color-map-canvas: var(--ref-map-canvas);
  --color-surface-warm: var(--ref-warm-canvas);
  --color-surface-translucent: rgba(255, 255, 255, 0.92);
  --color-surface-translucent-strong: rgba(255, 255, 255, 0.98);
  --color-surface-translucent-medium: rgba(255, 255, 255, 0.96);
  --color-surface-translucent-soft: rgba(255, 255, 255, 0.88);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.86);
  --color-overlay-inverse-subtle: rgba(255, 255, 255, 0.14);
  --color-border-inverse: rgba(255, 255, 255, 0.42);
  --color-border-inverse-soft: rgba(255, 255, 255, 0.32);
  --color-border-inverse-muted: rgba(255, 255, 255, 0.16);
  --color-focus-inverse: rgba(255, 255, 255, 0.72);
  --color-focus-inverse-strong: rgba(255, 255, 255, 0.82);
  --color-brand-border: rgba(242, 99, 34, 0.24);
  --color-brand-border-strong: rgba(242, 99, 34, 0.36);
  --color-brand-border-soft: rgba(242, 99, 34, 0.18);
  --color-brand-border-muted: rgba(242, 99, 34, 0.22);
  --color-brand-emphasis-border: rgba(238, 79, 10, 0.34);
  --color-brand-deep-border: rgba(185, 54, 10, 0.13);
  --color-brand-shadow: rgba(213, 64, 8, 0.2);
  --color-brand-deep-wash: #f2ebe7;
  --color-brand-deep-surface: rgba(185, 54, 10, 0.04);
  --color-brand-overlay: rgba(238, 79, 10, 0.82);
  --color-brand-pulse: rgba(238, 79, 10, 0.24);
  --color-brand-pulse-clear: rgba(238, 79, 10, 0);
  --color-focus-ring: rgba(242, 99, 34, 0.28);
  --color-brand-map-fill: rgba(242, 99, 34, 0.12);
  --color-brand-zone-fill: rgba(242, 99, 34, 0.09);
  --color-brand-zone-wash: rgba(242, 99, 34, 0.055);
  --color-danger-border: rgba(239, 68, 68, 0.32);
  --color-danger-wash: rgba(239, 68, 68, 0.12);
  --color-danger-selection: #fff0ed;
  --color-border-hairline: rgba(31, 31, 31, 0.05);
  --color-border-faint: rgba(31, 31, 31, 0.06);
  --color-border-map: rgba(31, 31, 31, 0.08);
  --color-surface-hover: rgba(31, 31, 31, 0.06);
  --color-overlay-detail: rgba(18, 18, 18, 0.54);
  --color-overlay-card: rgba(31, 31, 31, 0.76);
  --color-success-inverse: #78df9e;
  --color-control-track: var(--ref-neutral-125);
  --color-control-handle: var(--ref-control-handle);
  --color-control-handle-muted: var(--ref-neutral-175);
  --color-media-placeholder: var(--ref-neutral-150);
  --color-chart-grid: rgba(31, 31, 31, 0.1);
  --color-chart-fill: rgba(242, 99, 34, 0.12);
  --color-nav-page: rgba(247, 247, 248, 0.96);
  --color-nav-surface: rgba(255, 255, 255, 0.95);

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
  --font-size-screen-title: 26px;
  --line-height-screen-title: 31px;
  --font-size-display: 30px;
  --line-height-display: 36px;
  --font-size-section-title: 20px;
  --line-height-section-title: 25px;
  --font-size-title: 22px;
  --line-height-title: 27px;
  --font-size-metric: 22px;
  --line-height-metric: 26px;
  --font-size-card-title: 17px;
  --line-height-card-title: 22px;
  --font-size-body: 15px;
  --line-height-body: 21px;
  --font-size-label: 13px;
  --line-height-label: 17px;
  --font-size-caption: 12px;
  --line-height-caption: 16px;
  --font-size-micro: 11px;
  --line-height-micro: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  /* Spacing */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --page-gutter: var(--space-4);

  /* Shape and elevation */
  --radius-compact: 8px;
  --radius-micro: 4px;
  --radius-small: 6px;
  --radius-media-label: 5px;
  --radius-control: 12px;
  --radius-card: 14px;
  --radius-media: 16px;
  --radius-large: 20px;
  --radius-map-panel: 18px;
  --radius-sheet: 24px;
  --radius-device-shell: 42px;
  --radius-device-screen: 33px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --elevation-card: 0 2px 10px rgba(23, 23, 23, 0.06);
  --elevation-raised: 0 8px 24px rgba(23, 23, 23, 0.12);
  --elevation-sheet: 0 -16px 44px rgba(23, 23, 23, 0.18);
  --elevation-action: 0 7px 18px rgba(213, 64, 8, 0.2);
  --elevation-control: 0 2px 8px rgba(31, 31, 31, 0.16);
  --elevation-avatar: 0 5px 16px rgba(31, 31, 31, 0.12);
  --elevation-active-card: 0 8px 20px rgba(31, 31, 31, 0.08);
  --elevation-sheet-compact: 0 -8px 24px rgba(31, 31, 31, 0.09);
  --elevation-map-control: 0 8px 24px rgba(31, 31, 31, 0.14);
  --elevation-map-panel: 0 10px 28px rgba(31, 31, 31, 0.16);
  --elevation-map-point: 0 6px 18px rgba(31, 31, 31, 0.22);
  --elevation-marker: 0 2px 8px rgba(31, 31, 31, 0.2);
  --elevation-control-subtle: 0 2px 7px rgba(31, 31, 31, 0.09);
  --elevation-control-strong: 0 1px 4px rgba(31, 31, 31, 0.22);
  --elevation-dialog: 0 12px 32px rgba(23, 23, 23, 0.16);
  --elevation-pressed: 0 1px 3px rgba(23, 23, 23, 0.2);
  --elevation-adventure-sheet: 0 -10px 28px rgba(31, 31, 31, 0.12);
  --elevation-floating-control: 0 4px 13px rgba(31, 31, 31, 0.12);
  --elevation-zone-selected: 0 4px 12px rgba(238, 79, 10, 0.2);
  --elevation-danger: 0 3px 10px rgba(239, 68, 68, 0.28);
  --elevation-device: 0 30px 76px rgba(23, 23, 23, 0.28);
  --elevation-input-focus: 0 0 0 3px var(--color-focus);
  --elevation-brand-compact: 0 2px 8px var(--color-brand-shadow);
  --elevation-text-outline: 0 0 0 1px var(--color-text-primary);
  --elevation-inverse-ring: 0 0 0 2px var(--color-focus-inverse-strong);
  --elevation-focus-inverse-border: 0 0 0 1px var(--color-focus-inverse);
  --elevation-library-selected: 0 0 0 1px var(--color-action-primary);
  --elevation-subtle-inset: inset 0 0 0 1px var(--color-border-subtle);
  --elevation-safe-zone-handle: 0 2px 7px rgba(31, 31, 31, 0.18);
  --elevation-avatar-strong: 0 5px 16px rgba(31, 31, 31, 0.22);
  --elevation-safe-zone-pulse-start: 0 0 0 0 var(--color-brand-pulse);
  --elevation-safe-zone-pulse-end: 0 0 0 18px var(--color-brand-pulse-clear);

  /* Motion */
  --motion-fast: 160ms;
  --motion-none: 0ms;
  --motion-instant: 140ms;
  --motion-control: 180ms;
  --motion-exit: 200ms;
  --motion-base: 220ms;
  --motion-transition: 240ms;
  --motion-content: 260ms;
  --motion-panel: 280ms;
  --motion-enter: 300ms;
  --motion-sheet: 320ms;
  --motion-accordion: 360ms;
  --motion-media: 420ms;
  --motion-confirm: 620ms;
  --motion-progress: 700ms;
  --motion-spinner: 780ms;
  --motion-status-pulse: 1.4s;
  --motion-loading-spin: 1s;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

  /* Component dimensions */
  --control-min-size: 44px;
  --button-height: 48px;
  --nav-height: 68px;
  --header-height: 64px;
  --device-list-media-min: 80px;
  --device-list-media-max: 116px;
  --inset-safe-top: max(10px, env(safe-area-inset-top));
  --inset-safe-bottom: max(8px, env(safe-area-inset-bottom));

  /* Component tokens */
  --component-button-primary-bg: var(--color-action-primary);
  --component-button-primary-fg: var(--color-action-primary-text);
  --component-button-primary-height: var(--button-height);
  --component-button-primary-radius: var(--radius-control);
  --component-button-primary-shadow: var(--elevation-action);
  --component-card-bg: var(--color-bg-surface);
  --component-card-border: var(--color-border-subtle);
  --component-card-radius: var(--radius-card);
  --component-card-shadow: var(--elevation-card);
  --component-tab-selected-bg: var(--color-action-primary);
  --component-tab-selected-fg: var(--color-action-primary-text);
  --component-badge-neutral-bg: var(--color-badge-neutral-bg);
  --component-badge-neutral-fg: var(--color-badge-neutral-fg);
  --component-badge-brand-bg: var(--color-badge-brand-bg);
  --component-badge-brand-fg: var(--color-badge-brand-fg);
  --component-subscription-inactive-bg: var(--color-subscription-inactive-bg);
  --component-subscription-inactive-fg: var(--color-subscription-inactive-fg);
  --component-subscription-active-bg: var(--color-subscription-active-bg);
  --component-subscription-active-fg: var(--color-subscription-active-fg);
  --component-sheet-radius: var(--radius-sheet);
  --component-sheet-shadow: var(--elevation-sheet);
  --component-nav-height: var(--nav-height);
  --component-nav-active: var(--color-brand-emphasis);

  color-scheme: light;
  font-family: var(--font-family-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
p,
figure {
  margin: 0;
}

svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}