/* ZALIZE Design System v4 · "Arc-aligned" — 实测 arc.net 2026-09:
   blue rgb(49,57,251) / deep rgb(39,2,194) / cream rgb(255,252,236) / ink rgba(0,0,0,.85)
   display serif (Exposure) → Fraunces 700 · 粗圆体 (Marlin Soft SQ 700, ls -1.6px) → Nunito 800
   UI Inter 500/600 · 等宽标签 (ABC Favorit Mono / Space Mono) → Space Mono
   小圆角 8/10px · 胶囊按钮 22px · 波浪/锯齿分隔边 · 蓝底噪点 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Nunito:wght@700;800;900&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@600;700&display=swap');
:root{
  --blue:#3139fb; --blue-d:#2702c2; --blue-l:#dfe1ff;
  --cream:#fffcec; --cream-2:#fff6d6; --white:#fff;
  --ink:rgba(0,0,0,.85); --ink-2:#4a4a4a; --ink-3:#7a7a78;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
  --accent:#3139fb;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:22px;
  --sh:0 2px 8px rgba(0,0,0,.25); --sh-card:0 5px 5px rgba(0,0,0,.1), 0 24px 60px -30px rgba(39,2,194,.35);
  --ease:cubic-bezier(.2,.8,.2,1); --t:180ms;
  --f-serif:Fraunces,'Noto Serif SC',Georgia,serif;
  --f-round:Nunito,'Noto Sans SC',system-ui,sans-serif;
  --f-ui:Inter,'Noto Sans SC',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--f-ui);color:var(--ink);background:var(--white);line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}

/* 蓝底 + 噪点 */
.blue{background:var(--blue);color:var(--cream);position:relative;isolation:isolate}
.blue::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;z-index:-1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
/* 奶油底 + 柔和彩虹晕（Arc hero） */
.cream{background:var(--cream)}
/* Arc 实测：彩虹晕只在 Header 下方 ~220px 一条带内（粉/黄/薰衣草），很快过渡到纯白；窗口背后再一层淡蓝紫光 */
.wash{background:
  radial-gradient(38% 240px at 12% 0,rgba(255,190,232,.62),transparent 100%),
  radial-gradient(34% 220px at 42% 0,rgba(255,236,168,.70),transparent 100%),
  radial-gradient(34% 220px at 66% 0,rgba(255,228,190,.55),transparent 100%),
  radial-gradient(38% 240px at 92% 0,rgba(214,196,255,.65),transparent 100%),
  radial-gradient(70% 320px at 50% 100%,rgba(196,204,255,.55),transparent 100%),
  #fff}

/* ===== Arc 式真实窗口（aw = arc window）：灰白 chrome、真实交通灯、URL 药丸、app 图标格、文件夹行、底部 “+” ===== */
.aw{display:grid;grid-template-columns:230px 1fr;background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 30px 80px -30px rgba(20,20,60,.35),0 12px 30px -20px rgba(0,0,0,.25);overflow:hidden;text-align:left;
  --sb-bg:#f3f3f5;--sb-ink:#2b2b30;--sb-mute:rgba(43,43,48,.55);--sb-pill:#fff;--sb-pill2:rgba(255,255,255,.7);--sb-line:rgba(0,0,0,.08)}
.aw>*{min-width:0}
.aw-sb{background:var(--sb-bg);color:var(--sb-ink);padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--sb-line);font-family:var(--f-ui)}
.aw-top{display:flex;align-items:center;gap:7px;height:20px;margin-bottom:6px}
.aw-top i{width:11px;height:11px;border-radius:50%;background:#c9c9cd}
.aw.lit .aw-top i:nth-child(1){background:#ff5f57}.aw.lit .aw-top i:nth-child(2){background:#febc2e}.aw.lit .aw-top i:nth-child(3){background:#28c840}
.aw-top .sbtn{margin-left:8px;width:16px;height:12px;border:1.5px solid var(--sb-mute);border-radius:3px;position:relative;opacity:.8}
.aw-top .sbtn::after{content:'';position:absolute;left:4px;top:0;bottom:0;border-left:1.5px solid var(--sb-mute)}
.aw-top .nav{margin-left:auto;display:flex;gap:10px;color:var(--sb-mute);font-size:13px}
.aw-url{height:32px;border-radius:8px;background:var(--sb-pill2);display:flex;align-items:center;padding:0 10px;font:600 12px var(--f-ui);color:var(--sb-ink);gap:6px}
.aw-url .ico{margin-left:auto;display:flex;gap:6px;opacity:.55;font-size:12px}
.aw-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.aw-apps b{aspect-ratio:1;border-radius:9px;background:var(--sb-pill2);display:grid;place-items:center;position:relative;overflow:hidden}
.aw-apps b img{width:60%;height:60%;object-fit:cover;border-radius:6px}
.aw-apps b small{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:600 8px var(--f-ui);color:var(--sb-mute)}
.aw-lbl{font:600 11px var(--f-ui);color:var(--sb-mute);margin:10px 0 -2px;padding-left:4px}
.aw-row{display:flex;align-items:center;gap:9px;height:34px;padding:0 9px;border-radius:8px;font:600 13px var(--f-ui);color:var(--sb-ink)}
.aw-row img,.aw-row .fd{width:18px;height:18px;border-radius:5px;object-fit:cover;flex:none}
.aw-row .fd{border:1.5px solid var(--sb-mute);border-radius:4px;height:14px;width:17px;position:relative;opacity:.9}
.aw-row .fd::before{content:'';position:absolute;left:-1.5px;top:-4px;width:7px;height:3px;border:1.5px solid var(--sb-mute);border-bottom:0;border-radius:2px 2px 0 0}
.aw-row small{margin-left:auto;font:600 11px var(--f-ui);color:var(--sb-mute)}
.aw-row.on{background:var(--sb-pill);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.aw-row.in{padding-left:22px}
.aw-sep{border-top:1px solid var(--sb-line);margin:6px 4px}
.aw-new{display:flex;align-items:center;gap:9px;height:34px;padding:0 9px;font:600 13px var(--f-ui);color:var(--sb-mute)}
.aw-new::before{content:'+';font-size:16px;line-height:1}
.aw-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:6px 4px 0;color:var(--sb-mute);font-size:18px}
.aw-foot .mark{width:18px;height:18px;border-radius:5px}
.aw-foot .dots{display:flex;gap:6px}.aw-foot .dots i{width:5px;height:5px;border-radius:50%;background:var(--sb-mute);opacity:.5}.aw-foot .dots i:first-child{opacity:1}
.aw-main{position:relative;background:#fff}
.aw-nav{height:40px;display:flex;align-items:center;gap:14px;padding:0 16px;font:600 12.5px var(--f-ui);color:#7a7a80;border-bottom:1px solid rgba(0,0,0,.05)}
.aw-nav .crumb{margin-left:4px;color:#2b2b30}.aw-nav .crumb em{font-style:normal;color:#9a9aa0;margin-left:6px}
.aw-nav .arr{font-size:15px;color:#9a9aa0}
/* 侧栏主题（Arc Spaces 渐变：浅色文字改为深色，药丸半透白） */
.aw.peach{--sb-bg:linear-gradient(175deg,#ffd18a 0%,#ff9e77 55%,#ff7a6e 100%);--sb-ink:#3a1d12;--sb-mute:rgba(58,29,18,.6);--sb-pill:rgba(255,255,255,.92);--sb-pill2:rgba(255,255,255,.55);--sb-line:rgba(255,255,255,.35)}
.aw.rose{--sb-bg:linear-gradient(175deg,#ffc7d6 0%,#f08fb6 50%,#a56ad9 100%);--sb-ink:#3b1030;--sb-mute:rgba(59,16,48,.6);--sb-pill:rgba(255,255,255,.92);--sb-pill2:rgba(255,255,255,.55);--sb-line:rgba(255,255,255,.35)}
.aw.mint{--sb-bg:linear-gradient(175deg,#d9f3e6 0%,#a9e3c7 55%,#7fd1b0 100%);--sb-ink:#0f3a2a;--sb-mute:rgba(15,58,42,.6);--sb-pill:rgba(255,255,255,.92);--sb-pill2:rgba(255,255,255,.55);--sb-line:rgba(255,255,255,.35)}
.aw.lilac{--sb-bg:linear-gradient(175deg,#ece8ff 0%,#d6cdff 60%,#c2b4ff 100%);--sb-ink:#251a4d;--sb-mute:rgba(37,26,77,.6);--sb-pill:rgba(255,255,255,.92);--sb-pill2:rgba(255,255,255,.55);--sb-line:rgba(255,255,255,.35)}
@media(max-width:860px){.aw{grid-template-columns:1fr}.aw-sb{display:none}.aw.keep-sb .aw-sb{display:flex}}
/* 锯齿边（邮票边）：Arc 实测为细密半圆扇贝，周期 ~14px、高 ~7px */
.zig-b{position:relative}
.zig-b::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:7px;z-index:1;
  background:radial-gradient(circle at 7px 0,var(--blue) 6px,transparent 6.6px) repeat-x;background-size:14px 7px}
.zig-t{position:relative}
.zig-t::before{content:'';position:absolute;left:0;right:0;top:-6px;height:7px;z-index:1;
  background:radial-gradient(circle at 7px 7px,var(--blue) 6px,transparent 6.6px) repeat-x;background-size:14px 7px}
/* 波浪细线 */
.wave{height:8px;background:radial-gradient(circle at 6px 8px,transparent 5px,currentColor 5.5px,currentColor 6.5px,transparent 7px) repeat-x;background-size:12px 8px;opacity:.9}

/* 字体角色 */
.serif{font-family:var(--f-serif);font-variation-settings:'opsz' 144;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.round{font-family:var(--f-round);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* Header：Arc 实测 = 蓝底 84px、小 logo(28px 无描边) + 左对齐小导航(13px 粗)，右侧几乎为空 */
.hdr{height:84px;display:flex;align-items:center;gap:36px;padding:0 clamp(16px,5vw,80px);position:relative;z-index:50}
.hdr .logo{display:flex;align-items:center;gap:9px;font:800 15px/1 var(--f-round);letter-spacing:-.03em;color:var(--cream)}
.hdr .logo i{width:28px;height:28px;border-radius:8px;background:url(art/mark.webp) center/cover}
.hdr .logo i b{display:none}
.mark{display:inline-block;width:28px;height:28px;border-radius:8px;background:url(art/mark.webp) center/cover;vertical-align:middle}
.hdr nav{display:flex;gap:28px;font:800 13px var(--f-round);letter-spacing:-.01em}
.hdr nav a{opacity:.95;padding:8px 0;position:relative}
.hdr nav a:hover{opacity:.75}
.hdr .r{display:flex;gap:8px;margin-left:auto}
.ib{height:44px;padding:0 4px;color:var(--cream);font:800 13px var(--f-round);display:inline-flex;align-items:center;gap:6px;opacity:.95}
.ib:hover{opacity:.75}

/* 按钮：Arc 的 Try Dia 胶囊（近黑 + 左侧图标 + 右箭头） */
.btn{height:44px;padding:0 20px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:10px;font:600 15px var(--f-ui);border:1px solid var(--line-2);background:var(--white);color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t);white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.dark{background:#1c1c1e;color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.45)}
.btn.dark .ic{width:36px;height:36px;border-radius:10px;margin-left:-12px;background:#fff url(art/mark.webp) center/70% no-repeat;display:grid;place-items:center;font-size:0;color:#fff}
/* Arc “Try Dia”：近黑圆角矩形(非胶囊) 66px 高，左白底 app 图标，Inter 500 22px */
.btn.big{height:66px;padding:0 26px 0 10px;font:500 22px 'Inter',var(--f-ui);border-radius:16px;gap:14px}
.btn.big .ic{width:46px;height:46px;border-radius:12px;margin-left:0}
.btn.big .arrow{font-size:20px;opacity:.9}
.btn.blue{background:var(--blue);color:#fff;border-color:transparent;box-shadow:0 5px 5px rgba(0,0,0,.1)}
.btn.onblue{background:var(--white);color:var(--blue-d);border-color:transparent;box-shadow:0 5px 5px rgba(0,0,0,.1);border-radius:var(--r-md);font-weight:700;font-size:14px}
.btn.ghostblue{background:rgba(255,252,236,.14);color:var(--cream);border:1px solid rgba(255,252,236,.3);border-radius:var(--r-md);font-weight:700;font-size:14px}
.arrow{font-size:18px;line-height:1}

/* 标签 chip（@handle 风格：等宽 + 蓝描边） */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-sm);border:1.5px solid var(--blue);color:var(--blue);font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:transparent}
.chip.fill{background:var(--blue);color:var(--cream)}

/* Arc 式“浏览器窗口”卡：白色主体 + 彩色侧栏，厚圆角，浅阴影 */
.win{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-card);overflow:hidden;border:1px solid rgba(0,0,0,.06);min-width:0}
.win>*{min-width:0}
.win .bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line)}
.win .bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.win .bar i:nth-child(2){background:#febc2e}.win .bar i:nth-child(3){background:#28c840}
.win .bar span{margin-left:8px;font:500 12px var(--f-ui);color:var(--ink-3)}

/* 游戏卡：Arc space 风格的彩色渐变侧条 */
.gcard{display:grid;grid-template-columns:8px 1fr;background:var(--white);border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t)}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.gcard .bar{background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#fff))}
.gcard .body{padding:10px 12px 12px}
.gcard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);background:var(--cream);display:block}
.gcard .n{font:800 16px var(--f-round);letter-spacing:-.025em;margin-top:12px}
.gcard .s{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.gcard .m{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.gcard .m .dot{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--f-ui);color:var(--ink-2)}
.gcard .m .dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--acc)}
.gcard .m .go{width:28px;height:28px;border-radius:var(--r-sm);background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px}

/* 章节标题：Arc = 居中蓝色粗圆体 + 灰副标 */
.sec{padding:80px 0 32px;text-align:center}
.sec.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;text-align:left;padding-bottom:40px}
.sec.split img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-card);display:block}
.sec.split p{max-width:520px}
@media(max-width:860px){.sec.split{grid-template-columns:1fr;gap:20px;text-align:center}.sec.split p{margin:8px auto 0}}
.sec h2{font:800 clamp(28px,3.4vw,40px)/1.08 var(--f-round);letter-spacing:-.04em;color:var(--blue)}
.sec p{color:var(--ink-3);font-size:16px;margin-top:8px}
.sec p b{color:var(--ink-2);font-weight:600}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.anno{position:absolute;width:22px;height:22px;border-radius:50%;background:#e11d48;color:#fff;font:700 12px/22px var(--f-ui);text-align:center;z-index:9}
@media(max-width:860px){.hdr nav{display:none}.hdr{height:64px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}