/*
Theme Name: Editorial WP-Style
Theme URI: https://rosetta.dev/themes/editorial-wp-style
Author: Rosetta Themes
Author URI: https://rosetta.dev
Description: Classic Editorial magazine layout for Rosetta. Full customizer support.
Version: 1.1.3
Requires Rosetta: >=1.0.0
Tags: color:sky, layout:magazine, custom-header, customizer
Text Domain: editorial-wp-style
*/

/* ========================================================================
   Editorial WP-Style 主题样式（完整自包含皮肤）
   ------------------------------------------------------------------------
   作用域：仅前台 [data-layout-scope="frontend"] 与认证页 [data-layout-scope="public-auth"]。
   本主题自带完整装饰层（card-surface 渐变/圆角、glow-ring 彗星环、lift-hover、
   hero-gradient、gradient-text 等）——与其它主题平级，不依赖 main.css 的皮肤。
   main.css 仅提供 Tailwind 基础设施 + 中性 .card-surface 基底；
   Admin 装饰冻结在 assets/css/admin-ui.css（选择器锁 html[data-layout-scope="admin"]），本文件不触及。
   ======================================================================== */

/* 语义色令牌（背景/前景/主色/状态色/sidebar）单一来源在 assets/css/main.css 的 :root/.dark，
   本主题不重复声明：重复一份副本会让前台与基座对比度审计脱钩（历史上就是这里落后了一次 AA 修正）。
   主题只声明自己的皮肤层装饰（见下方卡片 tokens 与各选择器）。 */

/* ========================================================================
   Editorial Magazine 装饰层（2026-09 主题解耦架构：自 main.css 完整下沉）
   ------------------------------------------------------------------------
   渐变玻璃卡 .card-surface / 彗星发光描边 .glow-ring / 抬升 .lift-hover /
   Hero 渐变底 .hero-gradient / 渐变文字 .gradient-text + 卡片 tokens。
   作用域 = 本主题激活 + 前台(frontend)或认证页(public-auth)布局；
   Admin 永不命中（其同款观感已冻结在 assets/css/admin-ui.css，双方零依赖）。
   ======================================================================== */

/* ---- 彗星动画：可动画属性与关键帧（与 admin-ui.css 定义一致，重复注册幂等） ---- */
@supports (background: conic-gradient(from 0deg, #000, #fff)) {
  @property --gr-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
  @property --gr-bright {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
  }
}
@keyframes gr-spin {
  to { --gr-angle: 360deg; }
}
@keyframes gr-pulse {
  0%, 100% { --gr-bright: 1.00; }
  50%      { --gr-bright: 1.14; }
}

/* ---- 卡片 tokens（亮 / 暗） ---- */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) {
  --theme-accent-hue: 201;
  --theme-accent-sat: 96%;
  --theme-accent-light: 52%;
  --card-ambient: 0 1px 0 hsl(0 0% 100% / 0.6) inset,
                  0 -1px 0 hsl(224 71% 4% / 0.06) inset;
  --card-shadow-sm:
    0 1px 2px hsl(222 47% 11% / 0.04),
    0 8px 24px -12px hsl(222 47% 11% / 0.08),
    0 1px 0 hsl(222 47% 11% / 0.02);
  --card-shadow-lg:
    0 2px 6px hsl(222 47% 11% / 0.05),
    0 32px 60px -28px hsl(222 47% 11% / 0.15),
    0 2px 0 hsl(222 47% 11% / 0.02);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) {
  --card-shadow-sm:
    0 1px 0 hsl(0 0% 100% / 0.04),
    0 12px 36px -16px hsl(0 0% 0% / 0.55);
  --card-shadow-lg:
    0 2px 0 hsl(0 0% 100% / 0.03),
    0 40px 80px -32px hsl(0 0% 0% / 0.7);
  --card-ambient: 0 1px 0 hsl(0 0% 100% / 0.06) inset,
                  0 -1px 0 hsl(0 0% 0% / 0.4) inset;
}

/* ---- 装饰版 .card-surface：渐变玻璃面 + 内发光 ---- */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface {
  border: none;
  border-radius: 14px;
  background:
    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.55) 120%),
    hsl(var(--card));
  box-shadow: var(--card-shadow-sm);
  backdrop-filter: saturate(1.05) blur(4px);
  -webkit-backdrop-filter: saturate(1.05) blur(4px);
  isolation: isolate;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--card-ambient);
  mix-blend-mode: soft-light;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface {
  background:
    linear-gradient(180deg, hsl(var(--background) / 0.78), hsl(var(--muted) / 0.35) 120%),
    hsl(var(--card));
}

/* ---- lift-hover：抬升 + 顶部 accent 高光条 ---- */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .lift-hover {
  position: relative;
  transition:
    transform var(--motion-duration-slow) var(--motion-ease-standard),
    box-shadow var(--motion-duration-slow) var(--motion-ease-standard),
    border-color var(--motion-duration-slow) var(--motion-ease-standard),
    filter var(--motion-duration-slow) var(--motion-ease-standard);
  will-change: transform, box-shadow, filter;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .lift-hover::before {
  content: "";
  position: absolute;
  inset: -1px 30% auto 30%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    hsl(var(--theme-accent-hue) var(--theme-accent-sat) var(--theme-accent-light) / 0),
    hsl(var(--theme-accent-hue) var(--theme-accent-sat) var(--theme-accent-light) / 1) 50%,
    hsl(var(--theme-accent-hue) var(--theme-accent-sat) var(--theme-accent-light) / 0)
  );
  opacity: 0;
  transform: translateY(1px);
  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
              transform var(--motion-duration-base) var(--motion-ease-standard);
  pointer-events: none;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .lift-hover:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow: var(--card-shadow-lg) !important;
  filter: saturate(1.04);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .lift-hover:hover::before {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  :is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .lift-hover,
  :is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .lift-hover::before {
    transform: none !important;
    will-change: auto;
  }
}

/* ---- Glow Ring · 天青彗星发光描边 ---- */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring {
  position: relative;
  isolation: isolate;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring::after {
  padding: 2.5px;
  box-sizing: border-box;
  background:
    conic-gradient(
      from var(--gr-angle, 0deg),
      #a5f3fc 0%,
      #67e8f9 1.5%,
      #22d3ee 3.5%,
      #06b6d4 6%,
      #0ea5e9 9%,
      hsl(199 95% 60% / 0.85) 12%,
      hsl(var(--ring) / 0.72) 16%,
      hsl(var(--ring) / 0.48) 20%,
      hsl(var(--ring) / 0.22) 25%,
      transparent 30%,
      transparent 178%,
      hsl(var(--ring) / 0.38) 180%,
      hsl(var(--ring) / 0.18) 182.5%,
      transparent 185%,
      transparent 360%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mix-blend-mode: normal !important;
  opacity: 0;
  transition:
    opacity var(--motion-duration-base) var(--motion-ease-standard),
    filter  var(--motion-duration-base) var(--motion-ease-standard);
  filter:
    brightness(var(--gr-bright, 1))
    drop-shadow(0 0 0 hsl(199 89% 55% / 0));
  z-index: 5;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:hover::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:focus-within::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:hover::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:focus-within::after {
  opacity: 1;
  animation:
    gr-spin  2.2s linear infinite,
    gr-pulse 1.8s ease-in-out infinite;
  filter:
    brightness(var(--gr-bright, 1))
    drop-shadow(0 0 1.5px hsl(199 98% 72% / 0.92))
    drop-shadow(0 0 5px   hsl(197 96% 62% / 0.62))
    drop-shadow(0 0 12px  hsl(198 95% 58% / 0.34))
    drop-shadow(0 0 24px  hsl(200 95% 55% / 0.14));
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:hover::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:focus-within::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:hover::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:focus-within::after {
  filter:
    brightness(calc(var(--gr-bright, 1) * 1.05))
    drop-shadow(0 0 1.5px hsl(190 100% 85% / 0.95))
    drop-shadow(0 0 5px   hsl(194 100% 76% / 0.72))
    drop-shadow(0 0 13px  hsl(199 100% 66% / 0.46))
    drop-shadow(0 0 26px  hsl(202 100% 62% / 0.26));
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .no-glow::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .no-glow > *::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .no-glow:hover::after,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .no-glow:focus-within::after {
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
  padding: 0 !important;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:hover,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:focus-within,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:hover,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:focus-within {
  box-shadow:
    var(--card-shadow-lg),
    0 0 0 1px hsl(var(--ring) / 0.18),
    0 10px 40px -18px hsl(199 95% 55% / 0.28) !important;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:hover,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .card-surface.lift-hover:focus-within,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:hover,
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .glow-ring:focus-within {
  box-shadow:
    var(--card-shadow-lg),
    0 0 0 1px hsl(var(--ring) / 0.28),
    0 18px 60px -22px hsl(200 100% 62% / 0.32) !important;
}

/* ---- Hero 渐变底 / 渐变文字（editorial 视觉签名，供页面模板消费） ---- */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .hero-gradient {
  background:
    radial-gradient(1200px 600px at 10% -10%, hsl(var(--primary) / 0.08), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, hsl(var(--ring) / 0.06), transparent 60%),
    linear-gradient(180deg, transparent, hsl(var(--background)) 80%);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]).dark:is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .hero-gradient {
  background:
    radial-gradient(1200px 600px at 10% -10%, hsl(var(--primary) / 0.22), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, hsl(var(--ring) / 0.14), transparent 60%);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"]):is([data-layout-scope="frontend"],[data-layout-scope="public-auth"]) .gradient-text {
  background-image: linear-gradient(90deg, hsl(var(--foreground)), hsl(var(--foreground) / 0.7), hsl(var(--foreground)));
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---- 登录 / 注册（public-auth 骨架变体）覆盖层玻璃皮肤 ----
   这两页是骨架层变体（结构写死在 pages/login.vue / pages/register.vue），
   但皮肤不该留在模板里：壁纸渐变、玻璃卡、错误条、分隔线、主按钮高光，
   以及输入框的常态 / 聚焦 / 键盘焦点环，全部收进本文件的 .ed-auth-* 家族。
   此前这些值以内联 style + JS focusin/focusout 改写实现，既绕过令牌，
   又让键盘焦点只有一条 1px 内描边（WCAG 2.4.7 不足）。 */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-shade {
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.2) 55%, rgb(0 0 0 / 0.1));
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-brand-glow {
  background: rgb(255 255 255 / 0.10);
  opacity: 0.7;
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-card-shadow {
  background: rgb(0 0 0 / 0.5);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-card-shadow-far {
  background: rgb(2 6 23 / 0.45);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-card-halo {
  background: linear-gradient(135deg,
    rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.16) 22%, rgb(255 255 255 / 0.08) 42%,
    rgb(255 255 255 / 0.04) 60%, rgb(255 255 255 / 0.08) 80%, rgb(255 255 255 / 0.20) 100%);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-card {
  background: linear-gradient(155deg, rgb(255 255 255 / 0.095) 0%, rgb(255 255 255 / 0.055) 45%, rgb(255 255 255 / 0.08) 100%);
  backdrop-filter: blur(42px) saturate(240%);
  -webkit-backdrop-filter: blur(42px) saturate(240%);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.18),
    inset 0 0 40px 0 rgb(255 255 255 / 0.025),
    0 1px 2px 0 rgb(0 0 0 / 0.30),
    0 30px 70px -22px rgb(0 0 0 / 0.85),
    0 22px 45px -18px rgb(0 0 0 / 0.65);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-alert {
  background: linear-gradient(135deg, rgb(239 68 68 / 0.18) 0%, rgb(220 38 38 / 0.12) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 0 0 1px rgb(248 113 113 / 0.22),
    0 8px 22px -10px rgb(220 38 38 / 0.55);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-divider {
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 0.22) 50%, transparent 100%);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-submit {
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.8),
    inset 0 -2px 0 0 rgb(0 0 0 / 0.06),
    0 1px 2px 0 rgb(0 0 0 / 0.18),
    0 12px 28px -14px rgb(255 255 255 / 0.55),
    0 8px 20px -12px rgb(0 0 0 / 0.55);
}
/* 玻璃输入框 / 勾选框：常态底与内描边由 CSS 提供（原内联 style），
   聚焦改由 :focus 承担（原 JS focusin/focusout），键盘焦点走 --ring 令牌。 */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-glass {
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 0 0 1px rgb(255 255 255 / 0.09),
    inset 0 2px 6px rgb(0 0 0 / 0.14);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-glass:focus {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0.09) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 2px 6px rgb(0 0 0 / 0.14);
}
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-glass:focus-visible {
  border-color: hsl(var(--ring));
  outline: 2px solid hsl(var(--ring) / 0.55);
  outline-offset: 2px;
}
/* 记住我 / 同意条款勾选框的「已选中」态：主色实底 + 顶部高光 + 主色投影。 */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="public-auth"] .ed-auth-check-checked {
  background: linear-gradient(135deg, hsl(var(--primary) / 0.9) 0%, hsl(var(--primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 6px 14px -8px hsl(var(--primary) / 0.8);
}

/* ============================================================
   首页 hero 兜底渐变（无壁纸时）
   ------------------------------------------------------------
   原先写成 pages/index.vue 的行内 style，属于把主题皮肤塞进模板；
   现在模板只挂 .ed-hero-fallback 类，颜色与角度由本主题决定。
   三个停点由原行内的 #0f172a / #1e3a5f / #0c4a6e 等值换算为 HSL，观感不变。
   ============================================================ */
:is(html[data-theme="editorial-wp-style"],html[data-rosetta-theme="editorial-wp-style"])[data-layout-scope="frontend"] .ed-hero-fallback {
  background-image: linear-gradient(135deg, hsl(222.2 47.4% 11.2%) 0%, hsl(214.2 52% 24.5%) 50%, hsl(202 80.3% 23.9%) 100%);
}