/* ============================================================
   design.css — 新站点设计令牌 + 基础样式
   ------------------------------------------------------------
   来源：bmscriptsbox-site/src/styles.css（Tailwind v4 @theme/:root）
   此处转成纯 CSS，供 Jinja2 模板使用。
   工具类现由 src/input.css 经 Tailwind CLI 构建到 style.css，
   本文件只放设计令牌与手写基础样式，不再依赖任何 CDN。
   字体栈必须直接设在 body 上，避免被 style.css 的工具类覆盖。
   ============================================================ */

:root {
  /* 深墨锚点色（开发者专区 / 最终 CTA 底色） */
  --color-ink: #0B0D12;
  --color-ink-soft: #1B1F27;

  /* 底色 */
  --color-canvas: #FFFFFF;
  --color-surface-alt: #F7F7F9;

  /* 文字 */
  --color-text-primary: #0F1419;
  --color-text-secondary: #6B7280;
  --color-on-ink: #FFFFFF;
  --color-on-ink-muted: #99A0B0;

  /* 描边 */
  --color-border-subtle: #E7E7EA;

  /* 强调色（全站唯一） */
  --color-accent: #5046E5;
  --color-accent-soft: #EEF0FF;
  /* 深色区上的强调色文字：#5046E5 on #0B0D12 只有 3.10:1，不达标 */
  --color-accent-on-ink: #A5A0FF;

  /* 语义色：浅底 + 达标文字色 */
  --color-success: #10B981;
  --color-success-soft: #ECFDF5;
  --color-success-ink: #047857;
  --color-amber: #F59E0B;
  --color-amber-soft: #FFF7ED;
  --color-amber-ink: #B45309;

  /* 中性辅助 */
  --color-muted: #6B7280;
  --color-chip: #F3F4F6;
  --color-chip-ink: #4B5563;

  /* 界面装饰色 */
  --color-shot-bg: #1A1D24;
  --color-traffic: #3A3D45;
}

/* ============================================================
   布局规范 · Layout Spec
   ------------------------------------------------------------
   全站栅格与垂直节奏的唯一来源。页面里不要再各写
   px-5 md:px-10 xl:px-20 / py-[56px] md:py-[64px] xl:py-[72px]
   这类散落的数值——改这里一处，11 个模板同时生效。

   内容区宽度只允许三档：
     · 标准内容区  1280px —— 首页 / 社区 / 需求 / 下载 / 捐赠 / 详情
     · 长文内容区   820px —— 法务条款，受可读行宽限制
     · 表单内容区   448px —— 登录 / 注册

   关键类：
     .page-x            横向页边距（给每个 <section> 用，背景色仍铺满整宽）
     .page-hero         页头区上下留白
     .page-hero-stack   页头区内部排版（徽标 / 标题 / 说明 的竖向堆叠）
     .page-block        常规区块上下留白
     .page-block-lead   紧跟在页头区之后的第一个区块（上方留白收窄）
     .page-title        页头标题字号阶梯
     .page-lede         页头说明文字字号阶梯

   为什么不用工具类而用语义类：
   本站 Tailwind 走 CDN，一旦 CDN 被墙，全部布局工具类会同时失效；
   写进本文件的语义类不依赖 CDN，是布局的兜底。
   ============================================================ */
:root {
  /* 栅格 */
  --page-max: 1440px;         /* 页头 / 页脚 / 内容共同的宽屏外框 */
  --content-max: 1280px;      /* 标准内容区 = 1440 - 2 × 80 */
  --content-narrow: 820px;    /* 长文阅读栏宽 */
  --content-form: 448px;      /* 表单栏宽 */

  /* 横向页边距 */
  --page-x: 20px;

  /* 垂直节奏 */
  --hero-pt: 40px;            /* 页头区 上留白 */
  --hero-pb: 40px;            /* 页头区 下留白 */
  --lead-pt: 40px;            /* 页头区之后第一个区块 上留白 */
  --block-py: 56px;           /* 常规区块 上下留白 */
  --hero-gap: 20px;           /* 页头区内部行距 */
}

@media (min-width: 768px) {
  :root {
    --page-x: 40px;
    --hero-pt: 56px;
    --hero-pb: 48px;
    --lead-pt: 40px;
    --block-py: 64px;
    --hero-gap: 20px;
  }
}

@media (min-width: 1280px) {
  :root {
    --page-x: 80px;
    --hero-pt: 72px;
    --hero-pb: 48px;
    --lead-pt: 40px;
    --block-py: 72px;
    --hero-gap: 24px;
  }
}

/* 横向页边距：所有 section / 面包屑 / 页脚内层统一用它 */
.page-x {
  padding-left: var(--page-x);
  padding-right: var(--page-x);
}

/* 页头区：统一上下留白（唯一决定 hero 高度的来源） */
.page-hero {
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
}

/* 只取页头区的上留白：用于「面包屑 + 头部信息」这类拆成两段、
   但仍应与其它页面顶端对齐的页头（详情页）。 */
.page-hero-top {
  padding-top: var(--hero-pt);
}

/* 页头区内部排版：徽标 → 标题 → 说明 → 附加内容 */
.page-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-gap);
}

/* 常规区块 */
.page-block {
  padding-top: var(--block-py);
  padding-bottom: var(--block-py);
}

/* 紧跟页头区的第一个区块：上方留白由页头区的下留白承担，避免叠加成双倍空白 */
.page-block-lead {
  padding-top: var(--lead-pt);
  padding-bottom: var(--block-py);
}

/* 首页例外：营销首页允许比子页面更疏朗。
   增量集中写在这里，而不是散落回模板的 py-[88px] 里。 */
.page-block-airy {
  padding-top: calc(var(--block-py) + 16px);
  padding-bottom: calc(var(--block-py) + 16px);
}

/* 页头徽标（pill）：只定尺寸与字重，底色 / 文字色由页面按 hero 底色配 */
.page-eyebrow {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.page-eyebrow-dot {
  height: 6px;
  width: 6px;
  border-radius: 999px;
  background-color: currentColor;
}

/* 页头标题 / 说明：只定字号阶梯，颜色由页面按 hero 底色给（深色页头用 on-ink） */
.page-title {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
}
.page-lede {
  font-size: 15px;
  line-height: 30px;
}
@media (min-width: 768px) {
  .page-title {
    font-size: 36px;
  }
  .page-lede {
    font-size: 16px;
  }
}
@media (min-width: 1280px) {
  .page-title {
    font-size: 40px;
  }
}

/* 长文 / 表单栏宽 */
.content-narrow {
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
}
.content-form {
  max-width: var(--content-form);
  margin-left: auto;
  margin-right: auto;
}

/* 长文正文里的加粗项用主文字色，避免在灰色正文中发虚 */
.content-narrow strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ------------------------------------------------------------
     夹住横向溢出。
     页内全出血区块（首页 3 处 + scripts/feedback/donate 的 hero）
     用 w-screen(100vw) + left-1/2 -translate-x-1/2 跳出
     max-w-[var(--page-max)] 容器铺满整屏背景。但 100vw 是「视口宽度
     含垂直滚动条」，而内容区只有 「视口宽度 - 滚动条」，
     于是在 Windows / Linux 的实体滚动条下会被撑出约 8px 横向滚动条。
     用 clip 而不是 hidden：clip 不生成滚动容器，
     不会让 base.html 里 sticky top-0 的顶栏失效。
     ------------------------------------------------------------ */
  overflow-x: clip;
}

/* Safari < 16 与旧内核不支持 overflow-x: clip，退回 hidden */
@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
}

/* 直接给 body 设字体，不再依赖每个页面的 <body class="font-sans"> */
body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
}

.font-mono {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* 焦点可见性（WCAG 2.4.7） */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 表单控件的焦点由外层容器的圆角边框（focus-within）体现，
   去掉控件自身无法圆角的直角轮廓，避免出现「蓝框 + 圆角框」双层。 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 隐藏 <details> 默认三角 */
summary::-webkit-details-marker {
  display: none;
}

/* ============================================================
   详情页标签栏：选中态由 aria-selected 驱动，
   保证视觉状态与无障碍语义永远一致。
   ============================================================ */
[role="tab"] {
  color: var(--color-text-secondary);
}
[role="tab"]:hover {
  color: var(--color-text-primary);
}
[role="tab"][aria-selected="true"] {
  color: var(--color-text-primary);
  font-weight: 500;
}
[role="tab"] .tab-underline {
  display: none;
}
[role="tab"][aria-selected="true"] .tab-underline {
  display: block;
}

/* ============================================================
   需求页「免费 / 付费」发布方式切换
   选中态由 :has(input:checked) 驱动，纯 CSS，视觉状态与单选框不失同步。
   未选中态显式给 border: 1.5px solid transparent，消除切换时的 1.5px 抖动。
   ============================================================ */
.path-option {
  border: 1.5px solid transparent;
  background-color: var(--color-surface-alt);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.path-option:hover {
  background-color: var(--color-chip);
}
.path-option:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-canvas);
}
.path-option-title {
  color: var(--color-text-primary);
}
.path-option:has(input:checked) .path-option-title {
  color: var(--color-accent);
}

/* FAQ 折叠 + 号旋转 */
details[open] .group-open\:rotate-45,
.group[open] .group-open\:rotate-45 {
  transform: rotate(45deg);
}

/* ============================================================
   设计令牌工具类兜底
   （Tailwind CDN 被墙时的降级；正常情况由 CDN JIT 生成）
   ============================================================ */.bg-\[var\(--color-success-ink\)\]{background-color:#047857}
.text-\[var\(--color-success-ink\)\]{color:#047857}
.border-\[var\(--color-success-ink\)\]{border-color:#047857}
.ring-\[var\(--color-success-ink\)\]{--tw-ring-color:#047857}
.hover\:bg-\[var\(--color-success-ink\)\]:hover{background-color:#047857}
.hover\:text-\[var\(--color-success-ink\)\]:hover{color:#047857}
.hover\:border-\[var\(--color-success-ink\)\]:hover{border-color:#047857}
.group:hover .group-hover\:text-\[var\(--color-success-ink\)\]{color:#047857}
.focus\:bg-\[var\(--color-success-ink\)\]:focus{background-color:#047857}
.focus-within\:border-\[var\(--color-success-ink\)\]:focus-within{border-color:#047857}
.focus-within\:ring-\[var\(--color-success-ink\)\]:focus-within{--tw-ring-color:#047857}
.bg-\[var\(--color-muted\)\]{background-color:#6B7280}
.text-\[var\(--color-muted\)\]{color:#6B7280}
.border-\[var\(--color-muted\)\]{border-color:#6B7280}
.ring-\[var\(--color-muted\)\]{--tw-ring-color:#6B7280}
.hover\:bg-\[var\(--color-muted\)\]:hover{background-color:#6B7280}
.hover\:text-\[var\(--color-muted\)\]:hover{color:#6B7280}
.hover\:border-\[var\(--color-muted\)\]:hover{border-color:#6B7280}
.group:hover .group-hover\:text-\[var\(--color-muted\)\]{color:#6B7280}
.focus\:bg-\[var\(--color-muted\)\]:focus{background-color:#6B7280}
.focus-within\:border-\[var\(--color-muted\)\]:focus-within{border-color:#6B7280}
.focus-within\:ring-\[var\(--color-muted\)\]:focus-within{--tw-ring-color:#6B7280}
.bg-\[var\(--color-success-soft\)\]{background-color:#ECFDF5}
.text-\[var\(--color-success-soft\)\]{color:#ECFDF5}
.border-\[var\(--color-success-soft\)\]{border-color:#ECFDF5}
.ring-\[var\(--color-success-soft\)\]{--tw-ring-color:#ECFDF5}
.hover\:bg-\[var\(--color-success-soft\)\]:hover{background-color:#ECFDF5}
.hover\:text-\[var\(--color-success-soft\)\]:hover{color:#ECFDF5}
.hover\:border-\[var\(--color-success-soft\)\]:hover{border-color:#ECFDF5}
.group:hover .group-hover\:text-\[var\(--color-success-soft\)\]{color:#ECFDF5}
.focus\:bg-\[var\(--color-success-soft\)\]:focus{background-color:#ECFDF5}
.focus-within\:border-\[var\(--color-success-soft\)\]:focus-within{border-color:#ECFDF5}
.focus-within\:ring-\[var\(--color-success-soft\)\]:focus-within{--tw-ring-color:#ECFDF5}
.bg-\[var\(--color-on-ink\)\]{background-color:#FFFFFF}
.text-\[var\(--color-on-ink\)\]{color:#FFFFFF}
.border-\[var\(--color-on-ink\)\]{border-color:#FFFFFF}
.ring-\[var\(--color-on-ink\)\]{--tw-ring-color:#FFFFFF}
.hover\:bg-\[var\(--color-on-ink\)\]:hover{background-color:#FFFFFF}
.hover\:text-\[var\(--color-on-ink\)\]:hover{color:#FFFFFF}
.hover\:border-\[var\(--color-on-ink\)\]:hover{border-color:#FFFFFF}
.group:hover .group-hover\:text-\[var\(--color-on-ink\)\]{color:#FFFFFF}
.focus\:bg-\[var\(--color-on-ink\)\]:focus{background-color:#FFFFFF}
.focus-within\:border-\[var\(--color-on-ink\)\]:focus-within{border-color:#FFFFFF}
.focus-within\:ring-\[var\(--color-on-ink\)\]:focus-within{--tw-ring-color:#FFFFFF}
.bg-\[var\(--color-text-secondary\)\]{background-color:#6B7280}
.text-\[var\(--color-text-secondary\)\]{color:#6B7280}
.border-\[var\(--color-text-secondary\)\]{border-color:#6B7280}
.ring-\[var\(--color-text-secondary\)\]{--tw-ring-color:#6B7280}
.hover\:bg-\[var\(--color-text-secondary\)\]:hover{background-color:#6B7280}
.hover\:text-\[var\(--color-text-secondary\)\]:hover{color:#6B7280}
.hover\:border-\[var\(--color-text-secondary\)\]:hover{border-color:#6B7280}
.group:hover .group-hover\:text-\[var\(--color-text-secondary\)\]{color:#6B7280}
.focus\:bg-\[var\(--color-text-secondary\)\]:focus{background-color:#6B7280}
.focus-within\:border-\[var\(--color-text-secondary\)\]:focus-within{border-color:#6B7280}
.focus-within\:ring-\[var\(--color-text-secondary\)\]:focus-within{--tw-ring-color:#6B7280}
.bg-\[var\(--color-amber\)\]{background-color:#F59E0B}
.text-\[var\(--color-amber\)\]{color:#F59E0B}
.border-\[var\(--color-amber\)\]{border-color:#F59E0B}
.ring-\[var\(--color-amber\)\]{--tw-ring-color:#F59E0B}
.hover\:bg-\[var\(--color-amber\)\]:hover{background-color:#F59E0B}
.hover\:text-\[var\(--color-amber\)\]:hover{color:#F59E0B}
.hover\:border-\[var\(--color-amber\)\]:hover{border-color:#F59E0B}
.group:hover .group-hover\:text-\[var\(--color-amber\)\]{color:#F59E0B}
.focus\:bg-\[var\(--color-amber\)\]:focus{background-color:#F59E0B}
.focus-within\:border-\[var\(--color-amber\)\]:focus-within{border-color:#F59E0B}
.focus-within\:ring-\[var\(--color-amber\)\]:focus-within{--tw-ring-color:#F59E0B}
.bg-\[var\(--color-accent-on-ink\)\]{background-color:#A5A0FF}
.text-\[var\(--color-accent-on-ink\)\]{color:#A5A0FF}
.border-\[var\(--color-accent-on-ink\)\]{border-color:#A5A0FF}
.ring-\[var\(--color-accent-on-ink\)\]{--tw-ring-color:#A5A0FF}
.hover\:bg-\[var\(--color-accent-on-ink\)\]:hover{background-color:#A5A0FF}
.hover\:text-\[var\(--color-accent-on-ink\)\]:hover{color:#A5A0FF}
.hover\:border-\[var\(--color-accent-on-ink\)\]:hover{border-color:#A5A0FF}
.group:hover .group-hover\:text-\[var\(--color-accent-on-ink\)\]{color:#A5A0FF}
.focus\:bg-\[var\(--color-accent-on-ink\)\]:focus{background-color:#A5A0FF}
.focus-within\:border-\[var\(--color-accent-on-ink\)\]:focus-within{border-color:#A5A0FF}
.focus-within\:ring-\[var\(--color-accent-on-ink\)\]:focus-within{--tw-ring-color:#A5A0FF}
.bg-\[var\(--color-ink-soft\)\]{background-color:#1B1F27}
.text-\[var\(--color-ink-soft\)\]{color:#1B1F27}
.border-\[var\(--color-ink-soft\)\]{border-color:#1B1F27}
.ring-\[var\(--color-ink-soft\)\]{--tw-ring-color:#1B1F27}
.hover\:bg-\[var\(--color-ink-soft\)\]:hover{background-color:#1B1F27}
.hover\:text-\[var\(--color-ink-soft\)\]:hover{color:#1B1F27}
.hover\:border-\[var\(--color-ink-soft\)\]:hover{border-color:#1B1F27}
.group:hover .group-hover\:text-\[var\(--color-ink-soft\)\]{color:#1B1F27}
.focus\:bg-\[var\(--color-ink-soft\)\]:focus{background-color:#1B1F27}
.focus-within\:border-\[var\(--color-ink-soft\)\]:focus-within{border-color:#1B1F27}
.focus-within\:ring-\[var\(--color-ink-soft\)\]:focus-within{--tw-ring-color:#1B1F27}
.bg-\[var\(--color-ink\)\]{background-color:#0B0D12}
.text-\[var\(--color-ink\)\]{color:#0B0D12}
.border-\[var\(--color-ink\)\]{border-color:#0B0D12}
.ring-\[var\(--color-ink\)\]{--tw-ring-color:#0B0D12}
.hover\:bg-\[var\(--color-ink\)\]:hover{background-color:#0B0D12}
.hover\:text-\[var\(--color-ink\)\]:hover{color:#0B0D12}
.hover\:border-\[var\(--color-ink\)\]:hover{border-color:#0B0D12}
.group:hover .group-hover\:text-\[var\(--color-ink\)\]{color:#0B0D12}
.focus\:bg-\[var\(--color-ink\)\]:focus{background-color:#0B0D12}
.focus-within\:border-\[var\(--color-ink\)\]:focus-within{border-color:#0B0D12}
.focus-within\:ring-\[var\(--color-ink\)\]:focus-within{--tw-ring-color:#0B0D12}
.bg-\[var\(--color-success\)\]{background-color:#10B981}
.text-\[var\(--color-success\)\]{color:#10B981}
.border-\[var\(--color-success\)\]{border-color:#10B981}
.ring-\[var\(--color-success\)\]{--tw-ring-color:#10B981}
.hover\:bg-\[var\(--color-success\)\]:hover{background-color:#10B981}
.hover\:text-\[var\(--color-success\)\]:hover{color:#10B981}
.hover\:border-\[var\(--color-success\)\]:hover{border-color:#10B981}
.group:hover .group-hover\:text-\[var\(--color-success\)\]{color:#10B981}
.focus\:bg-\[var\(--color-success\)\]:focus{background-color:#10B981}
.focus-within\:border-\[var\(--color-success\)\]:focus-within{border-color:#10B981}
.focus-within\:ring-\[var\(--color-success\)\]:focus-within{--tw-ring-color:#10B981}
.bg-\[var\(--color-border-subtle\)\]{background-color:#E7E7EA}
.text-\[var\(--color-border-subtle\)\]{color:#E7E7EA}
.border-\[var\(--color-border-subtle\)\]{border-color:#E7E7EA}
.ring-\[var\(--color-border-subtle\)\]{--tw-ring-color:#E7E7EA}
.hover\:bg-\[var\(--color-border-subtle\)\]:hover{background-color:#E7E7EA}
.hover\:text-\[var\(--color-border-subtle\)\]:hover{color:#E7E7EA}
.hover\:border-\[var\(--color-border-subtle\)\]:hover{border-color:#E7E7EA}
.group:hover .group-hover\:text-\[var\(--color-border-subtle\)\]{color:#E7E7EA}
.focus\:bg-\[var\(--color-border-subtle\)\]:focus{background-color:#E7E7EA}
.focus-within\:border-\[var\(--color-border-subtle\)\]:focus-within{border-color:#E7E7EA}
.focus-within\:ring-\[var\(--color-border-subtle\)\]:focus-within{--tw-ring-color:#E7E7EA}
.bg-\[var\(--color-chip-ink\)\]{background-color:#4B5563}
.text-\[var\(--color-chip-ink\)\]{color:#4B5563}
.border-\[var\(--color-chip-ink\)\]{border-color:#4B5563}
.ring-\[var\(--color-chip-ink\)\]{--tw-ring-color:#4B5563}
.hover\:bg-\[var\(--color-chip-ink\)\]:hover{background-color:#4B5563}
.hover\:text-\[var\(--color-chip-ink\)\]:hover{color:#4B5563}
.hover\:border-\[var\(--color-chip-ink\)\]:hover{border-color:#4B5563}
.group:hover .group-hover\:text-\[var\(--color-chip-ink\)\]{color:#4B5563}
.focus\:bg-\[var\(--color-chip-ink\)\]:focus{background-color:#4B5563}
.focus-within\:border-\[var\(--color-chip-ink\)\]:focus-within{border-color:#4B5563}
.focus-within\:ring-\[var\(--color-chip-ink\)\]:focus-within{--tw-ring-color:#4B5563}
.bg-\[var\(--color-on-ink-muted\)\]{background-color:#99A0B0}
.text-\[var\(--color-on-ink-muted\)\]{color:#99A0B0}
.border-\[var\(--color-on-ink-muted\)\]{border-color:#99A0B0}
.ring-\[var\(--color-on-ink-muted\)\]{--tw-ring-color:#99A0B0}
.hover\:bg-\[var\(--color-on-ink-muted\)\]:hover{background-color:#99A0B0}
.hover\:text-\[var\(--color-on-ink-muted\)\]:hover{color:#99A0B0}
.hover\:border-\[var\(--color-on-ink-muted\)\]:hover{border-color:#99A0B0}
.group:hover .group-hover\:text-\[var\(--color-on-ink-muted\)\]{color:#99A0B0}
.focus\:bg-\[var\(--color-on-ink-muted\)\]:focus{background-color:#99A0B0}
.focus-within\:border-\[var\(--color-on-ink-muted\)\]:focus-within{border-color:#99A0B0}
.focus-within\:ring-\[var\(--color-on-ink-muted\)\]:focus-within{--tw-ring-color:#99A0B0}
.bg-\[var\(--color-accent-soft\)\]{background-color:#EEF0FF}
.text-\[var\(--color-accent-soft\)\]{color:#EEF0FF}
.border-\[var\(--color-accent-soft\)\]{border-color:#EEF0FF}
.ring-\[var\(--color-accent-soft\)\]{--tw-ring-color:#EEF0FF}
.hover\:bg-\[var\(--color-accent-soft\)\]:hover{background-color:#EEF0FF}
.hover\:text-\[var\(--color-accent-soft\)\]:hover{color:#EEF0FF}
.hover\:border-\[var\(--color-accent-soft\)\]:hover{border-color:#EEF0FF}
.group:hover .group-hover\:text-\[var\(--color-accent-soft\)\]{color:#EEF0FF}
.focus\:bg-\[var\(--color-accent-soft\)\]:focus{background-color:#EEF0FF}
.focus-within\:border-\[var\(--color-accent-soft\)\]:focus-within{border-color:#EEF0FF}
.focus-within\:ring-\[var\(--color-accent-soft\)\]:focus-within{--tw-ring-color:#EEF0FF}
.bg-\[var\(--color-traffic\)\]{background-color:#3A3D45}
.text-\[var\(--color-traffic\)\]{color:#3A3D45}
.border-\[var\(--color-traffic\)\]{border-color:#3A3D45}
.ring-\[var\(--color-traffic\)\]{--tw-ring-color:#3A3D45}
.hover\:bg-\[var\(--color-traffic\)\]:hover{background-color:#3A3D45}
.hover\:text-\[var\(--color-traffic\)\]:hover{color:#3A3D45}
.hover\:border-\[var\(--color-traffic\)\]:hover{border-color:#3A3D45}
.group:hover .group-hover\:text-\[var\(--color-traffic\)\]{color:#3A3D45}
.focus\:bg-\[var\(--color-traffic\)\]:focus{background-color:#3A3D45}
.focus-within\:border-\[var\(--color-traffic\)\]:focus-within{border-color:#3A3D45}
.focus-within\:ring-\[var\(--color-traffic\)\]:focus-within{--tw-ring-color:#3A3D45}
.bg-\[var\(--color-shot-bg\)\]{background-color:#1A1D24}
.text-\[var\(--color-shot-bg\)\]{color:#1A1D24}
.border-\[var\(--color-shot-bg\)\]{border-color:#1A1D24}
.ring-\[var\(--color-shot-bg\)\]{--tw-ring-color:#1A1D24}
.hover\:bg-\[var\(--color-shot-bg\)\]:hover{background-color:#1A1D24}
.hover\:text-\[var\(--color-shot-bg\)\]:hover{color:#1A1D24}
.hover\:border-\[var\(--color-shot-bg\)\]:hover{border-color:#1A1D24}
.group:hover .group-hover\:text-\[var\(--color-shot-bg\)\]{color:#1A1D24}
.focus\:bg-\[var\(--color-shot-bg\)\]:focus{background-color:#1A1D24}
.focus-within\:border-\[var\(--color-shot-bg\)\]:focus-within{border-color:#1A1D24}
.focus-within\:ring-\[var\(--color-shot-bg\)\]:focus-within{--tw-ring-color:#1A1D24}
.bg-\[var\(--color-canvas\)\]{background-color:#FFFFFF}
.text-\[var\(--color-canvas\)\]{color:#FFFFFF}
.border-\[var\(--color-canvas\)\]{border-color:#FFFFFF}
.ring-\[var\(--color-canvas\)\]{--tw-ring-color:#FFFFFF}
.hover\:bg-\[var\(--color-canvas\)\]:hover{background-color:#FFFFFF}
.hover\:text-\[var\(--color-canvas\)\]:hover{color:#FFFFFF}
.hover\:border-\[var\(--color-canvas\)\]:hover{border-color:#FFFFFF}
.group:hover .group-hover\:text-\[var\(--color-canvas\)\]{color:#FFFFFF}
.focus\:bg-\[var\(--color-canvas\)\]:focus{background-color:#FFFFFF}
.focus-within\:border-\[var\(--color-canvas\)\]:focus-within{border-color:#FFFFFF}
.focus-within\:ring-\[var\(--color-canvas\)\]:focus-within{--tw-ring-color:#FFFFFF}
.bg-\[var\(--color-surface-alt\)\]{background-color:#F7F7F9}
.text-\[var\(--color-surface-alt\)\]{color:#F7F7F9}
.border-\[var\(--color-surface-alt\)\]{border-color:#F7F7F9}
.ring-\[var\(--color-surface-alt\)\]{--tw-ring-color:#F7F7F9}
.hover\:bg-\[var\(--color-surface-alt\)\]:hover{background-color:#F7F7F9}
.hover\:text-\[var\(--color-surface-alt\)\]:hover{color:#F7F7F9}
.hover\:border-\[var\(--color-surface-alt\)\]:hover{border-color:#F7F7F9}
.group:hover .group-hover\:text-\[var\(--color-surface-alt\)\]{color:#F7F7F9}
.focus\:bg-\[var\(--color-surface-alt\)\]:focus{background-color:#F7F7F9}
.focus-within\:border-\[var\(--color-surface-alt\)\]:focus-within{border-color:#F7F7F9}
.focus-within\:ring-\[var\(--color-surface-alt\)\]:focus-within{--tw-ring-color:#F7F7F9}
.bg-\[var\(--color-accent\)\]{background-color:#5046E5}
.text-\[var\(--color-accent\)\]{color:#5046E5}
.border-\[var\(--color-accent\)\]{border-color:#5046E5}
.ring-\[var\(--color-accent\)\]{--tw-ring-color:#5046E5}
.hover\:bg-\[var\(--color-accent\)\]:hover{background-color:#5046E5}
.hover\:text-\[var\(--color-accent\)\]:hover{color:#5046E5}
.hover\:border-\[var\(--color-accent\)\]:hover{border-color:#5046E5}
.group:hover .group-hover\:text-\[var\(--color-accent\)\]{color:#5046E5}
.focus\:bg-\[var\(--color-accent\)\]:focus{background-color:#5046E5}
.focus-within\:border-\[var\(--color-accent\)\]:focus-within{border-color:#5046E5}
.focus-within\:ring-\[var\(--color-accent\)\]:focus-within{--tw-ring-color:#5046E5}
.bg-\[var\(--color-amber-soft\)\]{background-color:#FFF7ED}
.text-\[var\(--color-amber-soft\)\]{color:#FFF7ED}
.border-\[var\(--color-amber-soft\)\]{border-color:#FFF7ED}
.ring-\[var\(--color-amber-soft\)\]{--tw-ring-color:#FFF7ED}
.hover\:bg-\[var\(--color-amber-soft\)\]:hover{background-color:#FFF7ED}
.hover\:text-\[var\(--color-amber-soft\)\]:hover{color:#FFF7ED}
.hover\:border-\[var\(--color-amber-soft\)\]:hover{border-color:#FFF7ED}
.group:hover .group-hover\:text-\[var\(--color-amber-soft\)\]{color:#FFF7ED}
.focus\:bg-\[var\(--color-amber-soft\)\]:focus{background-color:#FFF7ED}
.focus-within\:border-\[var\(--color-amber-soft\)\]:focus-within{border-color:#FFF7ED}
.focus-within\:ring-\[var\(--color-amber-soft\)\]:focus-within{--tw-ring-color:#FFF7ED}
.bg-\[var\(--color-amber-ink\)\]{background-color:#B45309}
.text-\[var\(--color-amber-ink\)\]{color:#B45309}
.border-\[var\(--color-amber-ink\)\]{border-color:#B45309}
.ring-\[var\(--color-amber-ink\)\]{--tw-ring-color:#B45309}
.hover\:bg-\[var\(--color-amber-ink\)\]:hover{background-color:#B45309}
.hover\:text-\[var\(--color-amber-ink\)\]:hover{color:#B45309}
.hover\:border-\[var\(--color-amber-ink\)\]:hover{border-color:#B45309}
.group:hover .group-hover\:text-\[var\(--color-amber-ink\)\]{color:#B45309}
.focus\:bg-\[var\(--color-amber-ink\)\]:focus{background-color:#B45309}
.focus-within\:border-\[var\(--color-amber-ink\)\]:focus-within{border-color:#B45309}
.focus-within\:ring-\[var\(--color-amber-ink\)\]:focus-within{--tw-ring-color:#B45309}
.bg-\[var\(--color-chip\)\]{background-color:#F3F4F6}
.text-\[var\(--color-chip\)\]{color:#F3F4F6}
.border-\[var\(--color-chip\)\]{border-color:#F3F4F6}
.ring-\[var\(--color-chip\)\]{--tw-ring-color:#F3F4F6}
.hover\:bg-\[var\(--color-chip\)\]:hover{background-color:#F3F4F6}
.hover\:text-\[var\(--color-chip\)\]:hover{color:#F3F4F6}
.hover\:border-\[var\(--color-chip\)\]:hover{border-color:#F3F4F6}
.group:hover .group-hover\:text-\[var\(--color-chip\)\]{color:#F3F4F6}
.focus\:bg-\[var\(--color-chip\)\]:focus{background-color:#F3F4F6}
.focus-within\:border-\[var\(--color-chip\)\]:focus-within{border-color:#F3F4F6}
.focus-within\:ring-\[var\(--color-chip\)\]:focus-within{--tw-ring-color:#F3F4F6}
.bg-\[var\(--color-text-primary\)\]{background-color:#0F1419}
.text-\[var\(--color-text-primary\)\]{color:#0F1419}
.border-\[var\(--color-text-primary\)\]{border-color:#0F1419}
.ring-\[var\(--color-text-primary\)\]{--tw-ring-color:#0F1419}
.hover\:bg-\[var\(--color-text-primary\)\]:hover{background-color:#0F1419}
.hover\:text-\[var\(--color-text-primary\)\]:hover{color:#0F1419}
.hover\:border-\[var\(--color-text-primary\)\]:hover{border-color:#0F1419}
.group:hover .group-hover\:text-\[var\(--color-text-primary\)\]{color:#0F1419}
.focus\:bg-\[var\(--color-text-primary\)\]:focus{background-color:#0F1419}
.focus-within\:border-\[var\(--color-text-primary\)\]:focus-within{border-color:#0F1419}
.focus-within\:ring-\[var\(--color-text-primary\)\]:focus-within{--tw-ring-color:#0F1419}
.focus-within\:ring-\[rgba\(80,70,229,0\.18\)\]:focus-within{--tw-ring-color:rgba(80,70,229,0.18)}