@layer legacy {
/* ============================================================
   REVDEV 智能鱼缸管家 · 站点设计系统（方案 B「亮色清透水感」）
   assets/site.css
   —— 浅底流体渐变团 / 白玻璃卡片 / 顶部导航 / 按钮 / 页脚
   —— 动画只使用 transform / opacity
   —— 适配 360px ~ 1200px+
   ============================================================ */

/* ---------------- 设计令牌 ---------------- */
:root{
  /* 文字色 */
  --ink:#1d2733;          /* 大标题 */
  --ink-2:#22303d;        /* 卡片标题 */
  --text:#28323e;         /* 正文 */
  --muted:#54626f;        /* 主要副文 */
  --muted-2:#5c6a77;      /* 卡片副文 */
  --soft:#616e7a;         /* 次要说明 */
  --faint:#606e7c;        /* 弱说明 */
  --ghost:#a3b0bc;        /* 版权行 */

  /* 组件专用色：原有硬编码值令牌化 */
  --nav-link:#4d5b69;
  --promise-text:#4d5b69;
  --nav-lang-text:#5b6b7a;
  --ghost-button-text:#3c4a58;
  --footer-link:#3c4a58;
  --footer-text:#616e7a;
  --lang-active-bg:#fff;

  /* 中性面：亮色字面量保留在 :root，暗色块里翻成近黑/低亮叠层 */
  --blob-pink-stop:#ffc7dd;
  --blob-pink-clear:rgba(255,199,221,0);
  --blob-aqua-stop:#aeeaec;
  --blob-aqua-clear:rgba(174,234,236,0);
  --blob-lav-stop:#d7cffc;
  --blob-lav-clear:rgba(215,207,252,0);
  --blob-peach-stop:#ffe3c9;
  --blob-peach-clear:rgba(255,227,201,0);
  --nav-bg:rgba(255,255,255,.62);
  --nav-border:rgba(255,255,255,.75);
  --thin-glass-bg:rgba(255,255,255,.5);
  --strong-surface-border:rgba(255,255,255,.85);
  --badge-bg:rgba(255,255,255,.6);
  --badge-border:rgba(255,255,255,.8);
  --soft-glass-bg:rgba(255,255,255,.42);
  --chart-border:rgba(255,255,255,.7);
  --chip-bg:rgba(255,255,255,.72);
  --release-dot-bg:#fff;
  --disabled-bg-start:#b8c4cf;
  --disabled-bg-end:#a4b1bd;
  --disabled-text:#28323e;

  /* 品牌色 */
  --aqua:#09767d;
  --aqua-bright:#13b9c5;
  --teal:#12c2a6;
  --lav:#604fde;
  --lav-bright:#7c6cf0;
  --pink:#c4275e;
  --pink-bright:#f06ab0;
  --peach:#aa510c;

  /* 暗色背景上的固定组件色 */
  --dash-dot-alert:#ffb3c1;
  --dash-dot-warn:#ffd9a0;
  --dash-dot-ok:#a7e8cf;
  --code-bg:#102437;
  --code-text:#d7e6f2;

  /* 渐变 */
  --grad-brand:linear-gradient(92deg,#0fb5bb 5%,#7c6cf0 55%,#f06ab0 100%);
  --grad-duo:linear-gradient(92deg,#0fb5bb,#7c6cf0);
  --grad-cta:linear-gradient(135deg,#0e838c 0%,#7260ef 100%);

  /* 玻璃与阴影 */
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.78);
  --shadow-card:0 8px 32px rgba(41,72,106,.08),inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-float:0 10px 26px rgba(41,72,106,.12);
  --shadow-hover:0 18px 44px rgba(41,72,106,.13);

  /* 圆角与版心 */
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:14px;
  --container:1120px;
  --pad-x:clamp(18px,4.5vw,44px);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,Menlo,monospace;
}

/* ---------------- 基础重置 ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:var(--font);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,214,233,.35), transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, rgba(186,235,238,.4), transparent 60%),
    linear-gradient(180deg,#fbfdff 0%,#f6f9fc 55%,#f3f7fb 100%);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%}
a{color:var(--aqua)}
::selection{background:rgba(124,108,240,.22)}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid rgba(19,185,197,.55);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------------- 漂浮渐变团（背景层） ---------------- */
.ocean-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform;opacity:.55}
.blob--pink{width:620px;height:620px;top:-180px;right:-140px;
  background:radial-gradient(circle at 32% 32%,var(--blob-pink-stop) 0%,var(--blob-pink-clear) 70%);
  animation:drift-a 26s ease-in-out infinite alternate}
.blob--aqua{width:680px;height:680px;top:280px;left:-220px;
  background:radial-gradient(circle at 60% 40%,var(--blob-aqua-stop) 0%,var(--blob-aqua-clear) 70%);
  animation:drift-b 34s ease-in-out infinite alternate}
.blob--lav{width:560px;height:560px;bottom:12%;right:-120px;
  background:radial-gradient(circle at 40% 60%,var(--blob-lav-stop) 0%,var(--blob-lav-clear) 70%);
  animation:drift-c 30s ease-in-out infinite alternate}
.blob--peach{width:420px;height:420px;bottom:-140px;left:22%;
  background:radial-gradient(circle at 50% 40%,var(--blob-peach-stop) 0%,var(--blob-peach-clear) 70%);
  opacity:.45;animation:drift-a 38s ease-in-out infinite alternate-reverse}
@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,60px) scale(1.12)}}
@keyframes drift-b{from{transform:translate(0,0) rotate(0deg) scale(1)}to{transform:translate(90px,-50px) rotate(18deg) scale(1.08)}}
@keyframes drift-c{from{transform:translate(0,0) scale(1);opacity:.55}to{transform:translate(-60px,-80px) scale(1.15);opacity:.4}}

/* ---------------- 版心与内容层 ---------------- */
.container{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}

/* ---------------- 白玻璃卡片基底 ---------------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card);
  border-radius:var(--radius-xl);
}

/* ---------------- 顶部导航 ---------------- */
.site-nav{
  position:sticky;top:0;z-index:60;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--nav-border);
  box-shadow:0 2px 16px rgba(41,72,106,.06);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:10px var(--pad-x);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink);font-weight:900;font-size:1.02rem;letter-spacing:.02em;
}
.brand svg{width:28px;height:28px;flex:none}
.brand-sub{font-weight:600;font-size:.8rem;color:var(--soft);letter-spacing:0}
.nav-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px clamp(8px,2.4vw,24px)}
.nav-links a{
  font-size:.92rem;font-weight:600;color:var(--nav-link);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.nav-links a:hover{color:var(--aqua)}
.nav-links a[aria-current="page"]{color:var(--aqua);border-color:rgba(19,185,197,.6)}
/* 右上角专属入口：我的鱼缸（云账号门户 my.smartreefs.com）——品牌渐变胶囊，一眼可见 */
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 17px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:.9rem;color:#fff;background:var(--grad-cta);
  box-shadow:0 8px 20px rgba(110,104,240,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(110,104,240,.42)}
.nav-cta svg{width:16px;height:16px;flex:none}

/* 语言切换（简/繁/EN）：低调分段胶囊，当前项高亮 */
.nav-lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--thin-glass-bg);border:1px solid var(--glass-border)}
.nav-lang button{
  border:none;background:transparent;cursor:pointer;
  padding:4px 10px;border-radius:999px;font-family:inherit;
  font-size:.82rem;font-weight:700;color:var(--nav-lang-text);line-height:1;
  min-height:24px;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.nav-lang button:hover{color:var(--aqua)}
.nav-lang button.on{background:var(--lang-active-bg);color:var(--ink);box-shadow:0 1px 4px rgba(41,72,106,.12)}
@media (max-width:420px){ .nav-lang button{padding:4px 7px;font-size:.78rem} }

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;font-weight:700;font-size:1.02rem;padding:15px 34px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.btn svg{flex:none}
.btn--primary{color:#fff;background:var(--grad-cta);box-shadow:0 12px 30px rgba(110,104,240,.32)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(110,104,240,.4)}
.btn--ghost{
  color:var(--ghost-button-text);background:var(--glass-bg);border:1px solid var(--strong-surface-border);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(41,72,106,.1)}
.btn--sm{padding:10px 22px;font-size:.92rem}

/* ---------------- 徽标 / 标签 / 小字 ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--aqua);
  background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:999px;
  padding:7px 16px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(41,72,106,.06);
}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(18,194,166,.18);flex:none}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 13px}
.tag--aqua{color:var(--aqua);background:rgba(34,184,207,.13)}
.tag--lav{color:var(--lav);background:rgba(124,108,240,.13)}
.tag--pink{color:var(--pink);background:rgba(240,101,149,.13)}
.tag--peach{color:var(--peach);background:rgba(255,169,110,.2)}
.fineprint{margin-top:14px;font-size:.84rem;color:var(--faint)}

/* ---------------- 区块与标题 ---------------- */
.section{padding:clamp(40px,6vw,72px) 0}
.section-title{
  text-align:center;font-size:clamp(1.55rem,3.6vw,2.35rem);
  font-weight:850;color:var(--ink);line-height:1.3;
}
.section-title em,.hero-title em,.page-head h1 em{
  font-style:normal;background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-sub{
  text-align:center;color:var(--soft);margin:12px auto 0;max-width:36em;
  font-size:clamp(.94rem,1.4vw,1.05rem);
}

/* 内页页头（download / changelog / connect 共用） */
.page-head{padding:clamp(52px,8vw,88px) 0 clamp(8px,2vw,16px);text-align:center}
.page-head h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:900;color:var(--ink);line-height:1.22}
.page-head p{margin:14px auto 0;max-width:38em;color:var(--muted);font-size:clamp(.96rem,1.5vw,1.1rem)}

/* ---------------- Hero ---------------- */
.hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,56px);
  padding:clamp(64px,9vw,110px) 0 clamp(44px,6vw,80px);
}
.hero-copy{flex:1 1 400px;min-width:0}
.hero-title{
  margin-top:22px;font-size:clamp(2.15rem,5.6vw,3.85rem);
  font-weight:900;line-height:1.18;letter-spacing:.005em;color:var(--ink);
}
.hero-lead{
  margin-top:18px;font-size:clamp(1rem,1.6vw,1.18rem);color:var(--muted);max-width:34em;
}
.cta-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---- 毛玻璃仪表盘意象 ---- */
.hero-visual{flex:1 1 380px;min-width:0;position:relative;padding:26px 6px 34px}
.dash{position:relative;padding:clamp(18px,2.6vw,26px)}
.dash-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dash-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dash-dot:nth-child(1){background:var(--dash-dot-alert)}
.dash-dot:nth-child(2){background:var(--dash-dot-warn)}
.dash-dot:nth-child(3){background:var(--dash-dot-ok)}
.dash-title{margin-left:6px;font-size:.86rem;font-weight:600;color:var(--soft)}
.dash-live{
  margin-left:auto;font-size:.74rem;font-weight:700;color:var(--aqua);
  background:rgba(18,194,166,.12);border-radius:999px;padding:3px 10px;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.dash-chart{
  display:block;width:100%;height:auto;border-radius:var(--radius-md);
  background:var(--soft-glass-bg);border:1px solid var(--chart-border);
}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.stat{
  background:var(--glass-bg);border:1px solid var(--nav-border);
  border-radius:var(--radius-sm);padding:10px 8px;text-align:center;
}
.stat b{display:block;font-size:clamp(.92rem,1.4vw,1.08rem);font-weight:800;color:var(--ink-2);letter-spacing:.01em}
.stat span{display:block;font-size:.7rem;color:var(--faint);margin-top:2px}
.stat--ok b{color:var(--aqua)}

/* ---- 漂浮信息片 ---- */
.chip{
  position:absolute;display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:18px;
  font-size:.82rem;font-weight:700;white-space:nowrap;
  background:var(--chip-bg);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--strong-surface-border);box-shadow:var(--shadow-float);
}
.chip small{display:block;font-weight:500;font-size:.72rem;color:var(--faint)}
.chip--alert{top:-10px;right:clamp(4px,2vw,18px);color:var(--pink);animation:bob 6s ease-in-out infinite alternate}
.chip--cam{bottom:0;left:clamp(2px,1.5vw,14px);color:var(--aqua);animation:bob 7s .8s ease-in-out infinite alternate-reverse}
.chip-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.chip--alert .chip-icon{background:linear-gradient(135deg,#ff5882,#f06494)}
.chip--cam .chip-icon{background:linear-gradient(135deg,#38d9c3,#22b8cf)}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-9px)}}

/* ---------------- 三档接入 ---------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;margin-top:38px}
.tier{padding:26px 24px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.tier:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.tier-no{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.05rem}
.tier:nth-child(1) .tier-no{background:linear-gradient(135deg,#188293,#108293)}
.tier:nth-child(2) .tier-no{background:linear-gradient(135deg,#8157f9,#7260ef)}
.tier:nth-child(3) .tier-no{background:linear-gradient(135deg,#e80f5c,#e6165e)}
.tier h3{font-size:1.18rem;font-weight:800;color:var(--ink-2)}
.tier p{font-size:.92rem;color:var(--muted-2);flex:1}
.tier-tag{align-self:flex-start;font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 13px}
.tier:nth-child(1) .tier-tag{color:var(--aqua);background:rgba(34,184,207,.13)}
.tier:nth-child(2) .tier-tag{color:var(--lav);background:rgba(124,108,240,.13)}
.tier:nth-child(3) .tier-tag{color:var(--pink);background:rgba(240,101,149,.13)}

/* ---- 同等待遇承诺条 ---- */
.promise-bar{
  margin-top:20px;padding:18px 26px;border-radius:var(--radius-lg);
  display:flex;flex-wrap:wrap;gap:8px 22px;
  align-items:center;justify-content:center;text-align:center;
  background:var(--thin-glass-bg);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);box-shadow:0 6px 24px rgba(41,72,106,.07);
}
.promise-bar b{
  font-size:.98rem;font-weight:850;background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.promise-bar span{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--promise-text);font-weight:600}
.promise-bar svg{color:var(--teal);flex:none}

/* ---------------- 功能卡片 ---------------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:38px}
.feature{padding:24px 22px;transition:transform .25s ease,box-shadow .25s ease}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.feature-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px}
.feature-icon svg{width:24px;height:24px}
.icon-aqua{background:linear-gradient(135deg,rgba(34,184,207,.16),rgba(56,217,195,.22));color:var(--aqua)}
.icon-lav{background:linear-gradient(135deg,rgba(151,117,250,.15),rgba(124,108,240,.22));color:var(--lav)}
.icon-pink{background:linear-gradient(135deg,rgba(247,131,172,.15),rgba(240,101,149,.2));color:var(--pink)}
.icon-peach{background:linear-gradient(135deg,rgba(255,169,110,.18),rgba(255,146,90,.22));color:var(--peach)}
.feature h3{font-size:1.08rem;font-weight:800;color:var(--ink-2);margin-bottom:6px}
.feature p{font-size:.9rem;color:var(--muted-2)}

/* 真实产品截图 —— CONTROL 会话提供的实拍
   overview（#features）· board（#access，裁掉尾部 390px 空白）
   ★ 2026-08-25 更正：这里原先写着「顶栏是英文，是它仓的 i18n 真 bug，已裁掉」——
     **那个 bug 不存在，两句话都过期了**。英文只是当时界面语言就是英文；
     现在这批源图整屏中文，overview 一刀没裁。
     留这段是因为它记着一个反复出现的错：**「没量出来」和「有缺陷」是两句话**。 */
.realshot{margin:34px 0 0}
.realshot img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid rgba(41,72,106,.12);box-shadow:var(--shadow-hover)}
.realshot figcaption{margin-top:10px;font-size:.82rem;color:var(--muted-2);text-align:center}

/* ---------------- 代码与行内代码（开放接入页用） ---------------- */
code{
  font-family:var(--font-mono);font-size:.88em;
  color:var(--aqua);background:rgba(34,184,207,.12);
  border-radius:6px;padding:2px 7px;
}
.codeblock{
  background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-md);
  padding:18px 20px;overflow-x:auto;
  font-family:var(--font-mono);font-size:.86rem;line-height:1.6;
  box-shadow:0 12px 30px rgba(16,42,64,.22);
}
.codeblock code{background:none;color:inherit;padding:0;font-size:1em}

/* ---------------- 页脚 ---------------- */
.site-footer{
  position:relative;z-index:1;
  margin-top:clamp(30px,5vw,54px);
  border-top:1px solid rgba(120,140,160,.16);
  padding:32px 0 46px;font-size:.85rem;color:var(--footer-text);
}
.footer-inner{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-bottom:16px}
.footer-links a{
  color:var(--footer-link);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;
  min-height:24px;display:inline-flex;align-items:center;
  transition:border-color .2s ease,color .2s ease;
}
.footer-links a:hover{color:var(--aqua);border-color:rgba(11,143,150,.5)}
.footer-note{text-align:center;max-width:46em;margin:0 auto 10px;line-height:1.7}
.footer-copyright{text-align:center;color:var(--ghost)}

/* ---------------- 响应式 ---------------- */
@media (max-width:760px){
  .hero{padding-top:52px}
  .hero-visual{padding:20px 0 30px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .chip{position:static;animation:none}
  .hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  /* 移动端导航可能换行到两行，实际高度超过桌面版 80px 的锚点偏移量——先备好，
     等日后加锚点跳转时不会被吸顶导航遮住标题 */
  html{scroll-padding-top:140px}
}
@media (max-width:560px){
  .brand-sub{display:none}
  .btn{padding:14px 26px;font-size:.98rem}
}
@media (max-width:420px){
  .nav-inner{padding:10px 14px;gap:8px}
  .brand{font-size:.95rem;gap:7px}
  .brand svg{width:24px;height:24px}
  .nav-links a{font-size:.84rem;padding:6px 0}
  .nav-links{gap:2px 10px}
  .chip{white-space:normal}
}

/* ---------------- 动画偏好 ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:100;
  padding:10px 16px;border-radius:var(--radius-sm);
  color:#fff;background:var(--aqua);
  font-weight:700;text-decoration:none;
  box-shadow:var(--shadow-float);
}
.skip-link:focus,.skip-link:focus-visible{
  left:16px;
}

/* dark token overrides: HSL inversion + contrast floor */
@media (prefers-color-scheme: dark){
  :root{
    --ink:rgb(204,214,226);
    --ink-2:rgb(194,208,221);
    --text:rgb(193,203,215);
    --muted:rgb(144,158,171);
    --muted-2:rgb(136,150,163);
    --soft:rgb(119,133,147);
    --faint:rgb(111,127,144);
    --ghost:rgb(102,122,140);

    --nav-link:rgb(204,214,226);
    --promise-text:rgb(193,203,215);
    --nav-lang-text:rgb(144,158,171);
    --ghost-button-text:rgb(193,203,215);
    --footer-link:rgb(167,181,195);
    --footer-text:rgb(107,122,135);
    --lang-active-bg:rgba(255,255,255,.14);

    --blob-pink-stop:rgb(67,30,50);
    --blob-pink-clear:rgba(67,30,50,0);
    --blob-aqua-stop:rgb(19,70,74);
    --blob-aqua-clear:rgba(19,70,74,0);
    --blob-lav-stop:rgb(48,38,84);
    --blob-lav-clear:rgba(48,38,84,0);
    --blob-peach-stop:rgb(72,45,24);
    --blob-peach-clear:rgba(72,45,24,0);
    --nav-bg:rgba(3,6,9,.88);
    --nav-border:rgba(255,255,255,.16);
    --thin-glass-bg:rgba(3,6,9,.50);
    --strong-surface-border:rgba(255,255,255,.20);
    --badge-bg:rgba(3,6,9,.60);
    --badge-border:rgba(255,255,255,.18);
    --soft-glass-bg:rgba(3,6,9,.42);
    --chart-border:rgba(255,255,255,.14);
    --chip-bg:rgba(3,6,9,.72);
    --release-dot-bg:rgba(255,255,255,.12);
    --disabled-bg-start:rgb(53,67,81);
    --disabled-bg-end:rgb(40,53,67);
    --disabled-text:#fff;

    --aqua:rgb(25,227,238);
    --aqua-bright:rgb(80,227,238);
    --teal:rgb(76,237,212);
    --lav:rgb(170,161,237);
    --lav-bright:rgb(164,153,245);
    --pink:rgb(231,136,169);
    --pink-bright:rgb(245,153,201);
    --peach:rgb(244,156,90);

    --dash-dot-alert:rgb(255,179,193);
    --dash-dot-warn:rgb(255,217,160);
    --dash-dot-ok:rgb(167,232,207);
    --code-bg:rgb(16,36,55);
    --code-text:rgb(215,230,242);

    --grad-brand:linear-gradient(92deg,rgb(64,234,240) 5%,rgb(164,153,245) 55%,rgb(245,153,201) 100%);
    --grad-duo:linear-gradient(92deg,rgb(64,234,240),rgb(164,153,245));
    --grad-cta:linear-gradient(135deg,rgb(80,227,238) 0%,rgb(164,153,245) 100%);

    --glass-bg:rgba(3,6,9,.55);
    --glass-border:rgba(255,255,255,.22);
    --shadow-card:0 8px 32px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.08);
    --shadow-float:0 10px 26px rgba(0,0,0,.06);
    --shadow-hover:0 18px 44px rgba(0,0,0,.07);

    /* page background stops are HSL inversions of the light gradient */
    --page-bg-1:rgb(0,2,4);
    --page-bg-2:rgb(3,6,9);
    --page-bg-3:rgb(4,8,12);
  }
  body{
    background:linear-gradient(180deg,var(--page-bg-1) 0%,var(--page-bg-2) 55%,var(--page-bg-3) 100%);
  }
  .skip-link,.nav-cta,.btn--primary{color:var(--page-bg-2)}
}

@media print{
  *,*::before,*::after{
    background:none !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }
  .ocean-bg,.blob,.site-nav,.skip-link,.nav-lang,
  svg[aria-hidden="true"],
  .site-footer::before,.site-footer::after,
  .site-footer .footer-decor,.site-footer .footer-decoration{
    display:none !important;
  }
  a[href^="http"]::after{
    content:" (" attr(href) ")";
  }
  h1,h2,h3{
    break-after:avoid;
    page-break-after:avoid;
  }
  .glass{
    break-inside:avoid;
    page-break-inside:avoid;
  }
}

}