/* ============ Rano 全站设计系统（以官网首页为基准，index/chat/changelog 共用） ============ */
:root{
  --bg0:#03070e; --bg1:#071019; --bg2:#0b1826; --bg3:#0f2130;
  --line:rgba(94,179,191,.14); --line-strong:rgba(94,179,191,.3);
  --cyan:#5eb3bf; --cyan-strong:#7fc7d3; --cyan-dim:rgba(94,179,191,.35);
  --fg1:#e8ecec; --fg2:#9aa8ab; --fg3:#5f6f72;
}

/* FOUC 防护（各页 <head> 内联脚本在 DOMContentLoaded/50ms/3s 时加 tw-ready） */
body{visibility:hidden}
body.tw-ready{visibility:visible}

html{scroll-behavior:smooth}
::selection{background:rgba(94,179,191,.28);color:#fff}
/* Firefox 滚动条（scrollbar-width/scrollbar-color，隐藏箭头按钮，统一为简洁样式） */
*{scrollbar-width:thin;scrollbar-color:#1e2c31 transparent}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:#1e2c31;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#274046}

/* 导航 */
.nav-blur{background:rgba(7,11,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-link{color:var(--fg2);transition:color .18s,background .18s}
.nav-link:hover{color:var(--cyan-strong);background:rgba(94,179,191,.08)}
.nav-link.active{color:var(--cyan-strong);background:rgba(94,179,191,.16);font-weight:600}

/* 按钮 */
.btn-primary{background:var(--cyan);color:#03070e;font-weight:600;transition:transform .18s,box-shadow .25s,background .18s}
.btn-primary:hover{background:var(--cyan-strong);box-shadow:0 0 24px rgba(94,179,191,.35)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--fg1);transition:transform .18s,border-color .18s,background .18s}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(94,179,191,.08)}
.magnetic{will-change:transform}

/* 断环点 logo 动画（环呼吸 + 点辉光 + hover 整组转一圈；环点同组，构图不被破坏） */
@keyframes markSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes dotGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(94,179,191,.75))}50%{filter:drop-shadow(0 0 16px rgba(127,199,211,.95))}}
@keyframes ringBreath{0%,100%{stroke-opacity:.82}50%{stroke-opacity:1}}
.logo-mark{transform-box:fill-box;transform-origin:center}
.logo-ring{animation:ringBreath 4.2s ease-in-out infinite}
.logo-dot{animation:dotGlow 3.6s ease-in-out infinite}
.nav-logo:hover .logo-mark{animation:markSpin 1.1s cubic-bezier(.4,.1,.2,1)}

/* 页脚链接 */
.foot-link{color:var(--fg3);transition:color .18s}
.foot-link:hover{color:var(--cyan-strong)}