/* ==========================================================================
   css/tokens.css  設計 token（只有變數，不含任何元件選擇器樣式）
   - 色彩依設計文件 v1.2 第 27 節（鼠尾草＋暖杏，無漸層、無玻璃）
   - 深色值寫兩份（prefers-color-scheme 與 [data-theme=dark]），內容必須完全一致
   - 對比值皆以 WCAG 2.x 相對亮度估算；文字色一律標註對 --surface 的對比
   - 技術識別碼與品牌名無關，本檔不出現品牌字樣
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------- 安全區 ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---------- 色彩：淺色（預設）---------- */
  /* 背景與表面 */
  --bg: #F7F8F4;
  --surface: #FFFFFF;
  --surface-2: #F0F2EC;
  --surface-3: #E5E9E1;
  --border: rgba(24, 61, 53, .10);
  --divider: rgba(24, 61, 53, .07);

  /* 文字（對比皆為對 --surface #FFFFFF） */
  --text: #183D35;          /* 對 surface 約 12:1 */
  --text-2: #52645C;        /* 對 surface 6.3:1 */
  --text-3: #5E6E66;        /* 對 surface 5.4:1，最淡的可讀文字 */
  --text-on-primary: #FFFFFF; /* 白字對 --primary #256B57 約 6.3:1 */

  /* 主色（鼠尾草） */
  --primary: #256B57;       /* 對 surface 6.3:1 */
  --primary-strong: #1C5444; /* 對 surface 約 8.9:1 */
  --primary-soft: #DCEBE4;  /* --primary 字落在其上約 5.1:1 */
  --primary-tint: #EEF5F1;

  /* 點綴暖杏 */
  --accent: #E8B98A;        /* 只用於圖形與底色，不放文字（對 surface 約 1.9:1） */
  --accent-ink: #8A5A2B;    /* 杏色文字用，對 surface 5.9:1 */
  --accent-soft: #FBEFE2;

  /* 語意色 */
  --down: #2E7650;          /* 下降，對 surface 約 5.5:1 */
  --up: #9A5B12;            /* 上升（琥珀），對 surface 約 5.4:1 */
  --flat: #5E6E66;          /* 持平，對 surface 約 5.4:1 */
  --warn-soft: #FBF1DF;
  --danger: #B42318;        /* 只用於紅旗與刪除，對 surface 約 6.5:1 */
  --danger-soft: #FDE8E6;

  /* 漸層（v1.2：不使用漸層，變數名保留以相容舊程式） */
  --grad-hero: var(--surface);
  --grad-ring: var(--primary);

  /* 圖表 */
  --chart-1: #256B57;
  --chart-ma: #4C9A82;      /* 圖形，對 surface 約 3.4:1 */
  --chart-target: #B97C43;  /* 目標虛線，圖形，對 surface 約 3.5:1 */
  --chart-grid: rgba(24, 61, 53, .08);
  --chart-marker: #8A6FD1;  /* 劑量變更標記，圖形，對 surface 約 4.0:1 */
  --chart-gap: #9AA7A0;     /* 「未記錄」斷線區間的虛線底（圖形） */

  /* 熱圖（舊版，保留以相容；c-heat 已改用 --heat-n-*） */
  --heat-0: #F0F2EC;
  --heat-1: #E1ECE4;
  --heat-2: #F3DCC3;
  --heat-3: #E8B98A;

  /* 熱圖（中性灰綠色階，不使用珊瑚、紅色，以免暗示臨床嚴重程度）
     對 surface 的對比：0 約 1.1:1、1 約 1.3:1、2 約 2.3:1、3 約 5.8:1
     格內文字：0、1、2 使用 --text（對 2 約 5.3:1）；3 使用 --text-on-primary（約 5.8:1）
     0 與 1 靠格線與格內數字辨識，不單靠顏色 */
  --heat-n-0: #EEF1EC;
  --heat-n-1: #D3E2D9;
  --heat-n-2: #8FB5A2;
  --heat-n-3: #3F6F5B;

  /* 紙張（報告用，不隨主題變化） */
  --paper-bg: #FFFFFF;
  --paper-text: #13201D;
  --paper-muted: #5F6E69;
  --paper-line: #D9E2DF;

  /* ---------- 字型與字級 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --num-feature: tabular-nums;

  --fs-display: clamp(2.125rem, 1.6rem + 2.2vw, 3rem);
  --fs-title1: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-title2: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --fs-title3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-callout: 0.9375rem;
  --fs-footnote: 0.8125rem;
  --fs-caption: 0.75rem;

  --lh-display: 1.1;
  --lh-title1: 1.21;
  --lh-title2: 1.27;
  --lh-title3: 1.33;
  --lh-body: 1.5;
  --lh-callout: 1.47;
  --lh-footnote: 1.38;
  --lh-caption: 1.33;

  --fw-display: 700;
  --fw-title1: 700;
  --fw-title2: 650;
  --fw-title3: 600;
  --fw-body: 400;
  --fw-callout: 400;
  --fw-footnote: 400;
  --fw-caption: 500;

  --ls-title: -0.01em;
  --ls-caption: 0.02em;

  /* 專用字級 */
  --memo-count-fs: calc(var(--fs-display) * 0.8);
  --present-fs: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  --present-gap: clamp(16px, 3vw, 32px);

  /* ---------- 間距（4 點網格） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---------- 圓角 ---------- */
  --r-card: 20px;
  --r-sheet: 28px;
  --r-input: 14px;
  --r-chip: 999px;
  --r-btn: 16px;
  --r-sm: 10px;

  /* ---------- 陰影（淺色減淡） ---------- */
  --shadow-1: 0 1px 2px rgba(24, 61, 53, .05);
  --shadow-2: 0 6px 20px rgba(24, 61, 53, .08);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);

  /* ---------- 動效 ---------- */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-ring: 900ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* 彩帶：16 片、1.0 秒，只在畫面上方中央小範圍；僅作註解用途，不影響動效時長 */
  --confetti-count-hint: 16;

  /* ---------- 尺寸 ---------- */
  --tap: 44px;
  --btn-h: 52px;
  --tabbar-h: calc(56px + var(--safe-bottom));
  --topbar-h: calc(52px + var(--safe-top));
  --rail-item-h: 56px;

  /* ---------- 響應式版面 ---------- */
  --nav-w: 0px;
  --content-max: 760px;
  --content-max-wide: 1200px;
  --content-max-form: 720px;
  --page-x: clamp(16px, 4vw, 24px);
  --split-master: clamp(320px, 32%, 400px);
}

:root[data-theme=light] {
  color-scheme: light;
}

:root[data-theme=dark] {
  color-scheme: dark;
}

/* ==========================================================================
   導覽寬度與矮螢幕
   ========================================================================== */
@media (min-width: 600px) {
  :root {
    --nav-w: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-w: 240px;
  }
}

/* 手機橫式與矮螢幕：一律使用 rail（即使寬度 ≥ 1024px） */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --nav-w: 72px;
    --topbar-h: calc(44px + var(--safe-top));
    --rail-item-h: 48px;
  }
}

/* ==========================================================================
   深色模式（跟隨系統；使用者明確選淺色時不套用）
   值必須與下方 :root[data-theme=dark] 完全一致
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    /* 背景與表面（越上層越亮） */
    --bg: #0F1513;
    --surface: #161E1B;
    --surface-2: #1C2622;
    --surface-3: #24302B;
    --border: rgba(255, 255, 255, .07);
    --divider: rgba(255, 255, 255, .05);

    /* 文字（對比皆為對 --surface #161E1B） */
    --text: #E6EEE9;         /* 對 surface 約 14.4:1 */
    --text-2: #A9B8B0;       /* 對 surface 約 8.2:1 */
    --text-3: #8D9C94;       /* 對 surface 約 5.9:1 */
    --text-on-primary: #0B2A21; /* 對 --primary #7CC4A9 約 8.2:1 */

    /* 主色 */
    --primary: #7CC4A9;      /* 對 surface 約 8.3:1 */
    --primary-strong: #9AD9C0; /* 對 surface 約 10.5:1 */
    --primary-soft: rgba(124, 196, 169, .16);
    --primary-tint: rgba(124, 196, 169, .08);

    /* 點綴 */
    --accent: #E7B486;
    --accent-ink: #F0C9A3;   /* 對 surface 約 11:1 */
    --accent-soft: rgba(231, 180, 134, .14);

    /* 語意色 */
    --down: #5BD98A;         /* 對 surface 約 9.5:1 */
    --up: #F5B547;           /* 對 surface 約 9.4:1 */
    --flat: #8D9C94;         /* 對 surface 約 5.9:1 */
    --warn-soft: rgba(245, 181, 71, .14);
    --danger: #FF8A80;       /* 對 surface 約 7.3:1 */
    --danger-soft: rgba(255, 138, 128, .14);

    /* 漸層 */
    --grad-hero: var(--surface);
    --grad-ring: var(--primary);

    /* 圖表 */
    --chart-1: #7CC4A9;
    --chart-ma: #A3D9C5;
    --chart-target: #E7B486;
    --chart-grid: rgba(255, 255, 255, .07);
    --chart-marker: #B7A3F0;
    --chart-gap: #5E6E66;

    /* 熱圖（舊版，保留以相容） */
    --heat-0: #1C2622;
    --heat-1: #24403A;
    --heat-2: #5A4636;
    --heat-3: #E7B486;

    /* 熱圖（中性灰綠）
       對 surface 的對比：0 約 1.1:1、1 約 1.5:1、2 約 2.9:1、3 約 8.5:1
       格內文字：0、1、2 使用 --text（對 2 約 5.0:1）；3 使用 --text-on-primary（約 7.6:1） */
    --heat-n-0: #1C2622;
    --heat-n-1: #2A3D35;
    --heat-n-2: #476B5B;
    --heat-n-3: #8FC2AA;

    /* 陰影：暗色加內側高光 */
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 8px rgba(0, 0, 0, .30);
    --shadow-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  }
}

:root[data-theme=dark] {
  /* 背景與表面（越上層越亮） */
  --bg: #0F1513;
  --surface: #161E1B;
  --surface-2: #1C2622;
  --surface-3: #24302B;
  --border: rgba(255, 255, 255, .07);
  --divider: rgba(255, 255, 255, .05);

  /* 文字（對比皆為對 --surface #161E1B） */
  --text: #E6EEE9;         /* 對 surface 約 14.4:1 */
  --text-2: #A9B8B0;       /* 對 surface 約 8.2:1 */
  --text-3: #8D9C94;       /* 對 surface 約 5.9:1 */
  --text-on-primary: #0B2A21; /* 對 --primary #7CC4A9 約 8.2:1 */

  /* 主色 */
  --primary: #7CC4A9;      /* 對 surface 約 8.3:1 */
  --primary-strong: #9AD9C0; /* 對 surface 約 10.5:1 */
  --primary-soft: rgba(124, 196, 169, .16);
  --primary-tint: rgba(124, 196, 169, .08);

  /* 點綴 */
  --accent: #E7B486;
  --accent-ink: #F0C9A3;   /* 對 surface 約 11:1 */
  --accent-soft: rgba(231, 180, 134, .14);

  /* 語意色 */
  --down: #5BD98A;         /* 對 surface 約 9.5:1 */
  --up: #F5B547;           /* 對 surface 約 9.4:1 */
  --flat: #8D9C94;         /* 對 surface 約 5.9:1 */
  --warn-soft: rgba(245, 181, 71, .14);
  --danger: #FF8A80;       /* 對 surface 約 7.3:1 */
  --danger-soft: rgba(255, 138, 128, .14);

  /* 漸層 */
  --grad-hero: var(--surface);
  --grad-ring: var(--primary);

  /* 圖表 */
  --chart-1: #7CC4A9;
  --chart-ma: #A3D9C5;
  --chart-target: #E7B486;
  --chart-grid: rgba(255, 255, 255, .07);
  --chart-marker: #B7A3F0;
  --chart-gap: #5E6E66;

  /* 熱圖（舊版，保留以相容） */
  --heat-0: #1C2622;
  --heat-1: #24403A;
  --heat-2: #5A4636;
  --heat-3: #E7B486;

  /* 熱圖（中性灰綠）
     對 surface 的對比：0 約 1.1:1、1 約 1.5:1、2 約 2.9:1、3 約 8.5:1
     格內文字：0、1、2 使用 --text（對 2 約 5.0:1）；3 使用 --text-on-primary（約 7.6:1） */
  --heat-n-0: #1C2622;
  --heat-n-1: #2A3D35;
  --heat-n-2: #476B5B;
  --heat-n-3: #8FC2AA;

  /* 陰影：暗色加內側高光 */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ==========================================================================
   主題色覆寫（Pro）：sage（預設）、teal、indigo、ocean、rose
   forest 已併入 sage（舊設定值由程式轉換）
   順序：先淺色，再深色（特異性較高），且必須置於上方深色基底之後
   覆寫項目：--primary、--primary-strong、--primary-soft、--primary-tint、
             --text-on-primary、--chart-1、--chart-ma、--grad-ring、--shadow-fab
   ========================================================================== */

/* ----- sage（預設）淺色：primary 對 surface 6.3:1；--primary 字落在 primary-soft 上約 5.1:1；白字對 primary 6.3:1 ----- */
:root[data-accent=sage] {
  --primary: #256B57;
  --primary-strong: #1C5444;
  --primary-soft: #DCEBE4;
  --primary-tint: #EEF5F1;
  --text-on-primary: #FFFFFF;
  --chart-1: #256B57;
  --chart-ma: #4C9A82;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ----- teal 淺色：primary 對 surface 5.6:1；--primary 字落在 primary-soft 上約 4.6:1；白字對 primary 5.6:1 ----- */
:root[data-accent=teal] {
  --primary: #0E7469;
  --primary-strong: #0A5B53;
  --primary-soft: #D3EFEA;
  --primary-tint: #EAF7F4;
  --text-on-primary: #FFFFFF;
  --chart-1: #0E7469;
  --chart-ma: #13A08F;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ----- indigo 淺色：primary 對 surface 7.5:1；--primary 字落在 primary-soft 上約 5.9:1；白字對 primary 7.5:1 ----- */
:root[data-accent=indigo] {
  --primary: #4B45B2;
  --primary-strong: #3A3594;
  --primary-soft: #E4E2F7;
  --primary-tint: #F1F0FB;
  --text-on-primary: #FFFFFF;
  --chart-1: #4B45B2;
  --chart-ma: #6C66D6;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ----- ocean 淺色：primary 對 surface 6.6:1；--primary 字落在 primary-soft 上約 5.2:1；白字對 primary 6.6:1 ----- */
:root[data-accent=ocean] {
  --primary: #1B5EA6;
  --primary-strong: #144A84;
  --primary-soft: #DCE9F8;
  --primary-tint: #EEF4FC;
  --text-on-primary: #FFFFFF;
  --chart-1: #1B5EA6;
  --chart-ma: #3D82CC;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ----- rose 淺色：primary 對 surface 6.0:1；--primary 字落在 primary-soft 上約 4.8:1；白字對 primary 6.0:1 ----- */
:root[data-accent=rose] {
  --primary: #AE3758;
  --primary-strong: #8C2A46;
  --primary-soft: #F8DDE5;
  --primary-tint: #FCEFF3;
  --text-on-primary: #FFFFFF;
  --chart-1: #AE3758;
  --chart-ma: #D05A7C;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ---------- 深色：跟隨系統 ---------- */
@media (prefers-color-scheme: dark) {
  /* sage 深色：primary 對 surface 8.3:1；on-primary 對 primary 約 8.2:1 */
  :root:not([data-theme=light])[data-accent=sage] {
    --primary: #7CC4A9;
    --primary-strong: #9AD9C0;
    --primary-soft: rgba(124, 196, 169, .16);
    --primary-tint: rgba(124, 196, 169, .08);
    --text-on-primary: #0B2A21;
    --chart-1: #7CC4A9;
    --chart-ma: #A3D9C5;
    --grad-ring: var(--primary);
    --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  }

  /* teal 深色：primary 對 surface 8.1:1；on-primary 對 primary 約 8.4:1 */
  :root:not([data-theme=light])[data-accent=teal] {
    --primary: #3FC7B5;
    --primary-strong: #6ADBCB;
    --primary-soft: rgba(63, 199, 181, .16);
    --primary-tint: rgba(63, 199, 181, .08);
    --text-on-primary: #04211D;
    --chart-1: #3FC7B5;
    --chart-ma: #6ADBCB;
    --grad-ring: var(--primary);
    --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  }

  /* indigo 深色：primary 對 surface 7.6:1；on-primary 對 primary 約 7.7:1 */
  :root:not([data-theme=light])[data-accent=indigo] {
    --primary: #A9A4FF;
    --primary-strong: #C6C2FF;
    --primary-soft: rgba(169, 164, 255, .16);
    --primary-tint: rgba(169, 164, 255, .08);
    --text-on-primary: #16124A;
    --chart-1: #A9A4FF;
    --chart-ma: #C6C2FF;
    --grad-ring: var(--primary);
    --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  }

  /* ocean 深色：primary 對 surface 8.0:1；on-primary 對 primary 約 8.3:1 */
  :root:not([data-theme=light])[data-accent=ocean] {
    --primary: #7DB4FF;
    --primary-strong: #A8CDFF;
    --primary-soft: rgba(125, 180, 255, .16);
    --primary-tint: rgba(125, 180, 255, .08);
    --text-on-primary: #061E3C;
    --chart-1: #7DB4FF;
    --chart-ma: #A8CDFF;
    --grad-ring: var(--primary);
    --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  }

  /* rose 深色：primary 對 surface 7.9:1；on-primary 對 primary 約 8.5:1 */
  :root:not([data-theme=light])[data-accent=rose] {
    --primary: #FF8FAD;
    --primary-strong: #FFB3C7;
    --primary-soft: rgba(255, 143, 173, .16);
    --primary-tint: rgba(255, 143, 173, .08);
    --text-on-primary: #3A0A18;
    --chart-1: #FF8FAD;
    --chart-ma: #FFB3C7;
    --grad-ring: var(--primary);
    --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  }
}

/* ---------- 深色：使用者明確選擇（內容與上方媒體查詢區塊一致） ---------- */

/* sage 深色：primary 對 surface 8.3:1；on-primary 對 primary 約 8.2:1 */
:root[data-theme=dark][data-accent=sage] {
  --primary: #7CC4A9;
  --primary-strong: #9AD9C0;
  --primary-soft: rgba(124, 196, 169, .16);
  --primary-tint: rgba(124, 196, 169, .08);
  --text-on-primary: #0B2A21;
  --chart-1: #7CC4A9;
  --chart-ma: #A3D9C5;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* teal 深色：primary 對 surface 8.1:1；on-primary 對 primary 約 8.4:1 */
:root[data-theme=dark][data-accent=teal] {
  --primary: #3FC7B5;
  --primary-strong: #6ADBCB;
  --primary-soft: rgba(63, 199, 181, .16);
  --primary-tint: rgba(63, 199, 181, .08);
  --text-on-primary: #04211D;
  --chart-1: #3FC7B5;
  --chart-ma: #6ADBCB;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* indigo 深色：primary 對 surface 7.6:1；on-primary 對 primary 約 7.7:1 */
:root[data-theme=dark][data-accent=indigo] {
  --primary: #A9A4FF;
  --primary-strong: #C6C2FF;
  --primary-soft: rgba(169, 164, 255, .16);
  --primary-tint: rgba(169, 164, 255, .08);
  --text-on-primary: #16124A;
  --chart-1: #A9A4FF;
  --chart-ma: #C6C2FF;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ocean 深色：primary 對 surface 8.0:1；on-primary 對 primary 約 8.3:1 */
:root[data-theme=dark][data-accent=ocean] {
  --primary: #7DB4FF;
  --primary-strong: #A8CDFF;
  --primary-soft: rgba(125, 180, 255, .16);
  --primary-tint: rgba(125, 180, 255, .08);
  --text-on-primary: #061E3C;
  --chart-1: #7DB4FF;
  --chart-ma: #A8CDFF;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* rose 深色：primary 對 surface 7.9:1；on-primary 對 primary 約 8.5:1 */
:root[data-theme=dark][data-accent=rose] {
  --primary: #FF8FAD;
  --primary-strong: #FFB3C7;
  --primary-soft: rgba(255, 143, 173, .16);
  --primary-tint: rgba(255, 143, 173, .08);
  --text-on-primary: #3A0A18;
  --chart-1: #FF8FAD;
  --chart-ma: #FFB3C7;
  --grad-ring: var(--primary);
  --shadow-fab: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ==========================================================================
   減少動態：所有動效時長歸零（彩帶另由程式略過）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-ring: 0.01ms;
  }
}