/* ============================================================
   CopyWake · 币安跟单学院  设计系统
   深 hero + 亮正文 · 币安官方黄黑 · 航道母题
   ============================================================ */

/* ---------- 自托管字体 ---------- */
@font-face{font-family:'Archivo Black';src:url('/assets/fonts/archivo-black-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:'Sometype Mono';src:url('/assets/fonts/sometype-mono-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sometype Mono';src:url('/assets/fonts/sometype-mono-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
/* CJK 标题字体（打包阶段按用字子集化；换 distinctive 字体只需替换此文件） */
@font-face{font-family:'CopyTitle';src:url('/assets/fonts/cjk-title-900.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+4E00-9FFF,U+3000-303F,U+FF00-FFEF}

/* ---------- 设计 token ---------- */
:root{
  /* 深色（hero / CTA / footer） */
  --d-bg:#0E1116; --d-bg2:#0A0C0F; --d-panel:#15181E; --d-panel2:#1E2329;
  --d-border:#2B3139; --d-border2:#1c2027;
  --d-ink:#EAECEF; --d-mut:#B7BDC6; --d-mut2:#848E9C; --d-mut3:#5e6673;
  /* 亮色（正文） */
  --p-bg:#FBFBF9; --p-bg2:#F7F8F5; --card:#FFFFFF;
  --p-border:#ECEDEA; --p-border2:#E2E6E0;
  --ink:#181A20; --mut:#5c6470; --mut2:#8a8f98; --mut3:#9aa0ab;
  /* 品牌 */
  --y:#F0B90B; --y-2:#FFD34D; --y-tint:#FEF6DE; --y-band:#FDF6E3; --y-ink:#8a6d00; --y-ink2:#3a2f05;
  --red:#F6465D; --green:#0f7a5c; --green-tint:#e6f2ec;
  /* 排版 */
  --f-title:'CopyTitle','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --f-body:'Manrope',-apple-system,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  --f-display:'Archivo Black',var(--f-body);
  --f-mono:'Sometype Mono',ui-monospace,'Cascadia Mono',monospace;
  /* 尺度 */
  --r-sm:8px; --r:9px; --r-lg:12px; --r-xl:14px;
  --sh-card:0 20px 44px rgba(0,0,0,.5);
  --sh-y:0 8px 22px rgba(240,185,11,.30);
  --wrap:1080px;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--p-bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-title);font-weight:900;line-height:1.28;letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
:lang(zh) h1,h2,h3{word-break:normal;overflow-wrap:break-word}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--f-mono)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* ---------- 顶栏 ---------- */
.top{background:var(--d-bg);border-bottom:0.5px solid var(--d-border)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:15px;padding-bottom:15px}
.brand{display:flex;align-items:baseline;gap:9px}
.brand .wm{font-family:var(--f-display);font-size:20px;color:var(--d-ink);letter-spacing:-.02em}
.brand .sub{font-size:11px;color:var(--y);font-weight:700}
.nav{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--d-mut)}
.nav a:hover{color:var(--d-ink)}
.partner{display:inline-flex;align-items:center;gap:6px;background:var(--y);border-radius:var(--r-sm);padding:5px 9px}
.partner .wm{font-family:var(--f-body);font-weight:800;font-size:11px;color:var(--ink)}
.partner .op{font-size:10px;color:var(--y-ink2);border-left:1px solid rgba(24,26,32,.35);padding-left:6px}
.menu-btn{display:none;background:none;border:0;color:var(--d-ink);font-size:24px;cursor:pointer;padding:4px;min-width:44px;min-height:44px}
/* 导航下拉 */
.dd{position:relative}
.dd-t{display:inline-flex;align-items:center;cursor:pointer}
.dd-t::after{content:"";display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;margin-left:5px;opacity:.6}
.dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:196px;background:var(--d-panel);border:0.5px solid var(--d-border);border-radius:var(--r);padding:6px 0;box-shadow:0 16px 38px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s;z-index:40}
.dd::before{content:"";position:absolute;top:100%;left:0;right:-20px;height:14px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-menu a{display:block;padding:9px 18px;font-size:12.5px;color:var(--d-mut);white-space:nowrap}
.dd-menu a:hover{color:var(--d-ink);background:rgba(255,255,255,.05)}
.dd-menu a.all{color:var(--y);border-top:0.5px solid var(--d-border);margin-top:5px;padding-top:11px}
/* 首页工具卡网格（旗舰跨2列·其余带图标·非对称避免等宽卡雷同） */
.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-top:18px}
.tcard{display:flex;flex-direction:column;background:var(--card);border:0.5px solid var(--p-border2);border-radius:12px;padding:16px 18px;transition:transform .14s,border-color .14s,box-shadow .14s}
.tcard:hover{border-color:var(--y);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
.tcard .ic{width:40px;height:40px;border-radius:11px;background:var(--y-tint);display:flex;align-items:center;justify-content:center;margin-bottom:11px;color:#a5730a}
.tcard .ic svg{width:22px;height:22px}
.tcard .tt{font-family:var(--f-title);font-weight:700;font-size:14.5px;color:var(--ink)}
.tcard .td{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.5}
.tcard.feat{grid-column:span 2;background:var(--d-panel2);border-color:var(--d-border);flex-direction:row;align-items:center;gap:16px}
.tcard.feat .ic{background:rgba(240,185,11,.14);color:var(--y);width:50px;height:50px;margin:0;flex:none}
.tcard.feat .ic svg{width:28px;height:28px}
.tcard.feat .fb{flex:1;min-width:0}
.tcard.feat .tt{color:var(--d-ink);font-size:16.5px}
.tcard.feat .td{color:var(--d-mut);font-size:12.5px}
.tcard.feat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
@media(max-width:640px){.tcard.feat{grid-column:1/-1;flex-direction:row}}

/* ---------- 通用 CTA / 元件 ---------- */
.copychip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:700;font-size:14px;padding:10px 13px;border-radius:var(--r);background:var(--d-bg);border:1.5px solid var(--y);color:var(--y);cursor:pointer}
.copychip:hover{background:#12161c}
.copychip.on{color:var(--green);border-color:var(--green)}
.btn-reg{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:800;font-size:14.5px;padding:12px 18px;border-radius:var(--r);background:var(--y);color:var(--ink);box-shadow:var(--sh-y);transition:transform .12s,filter .12s}
.btn-reg:hover{filter:brightness(1.04)} .btn-reg:active{transform:scale(.98)}
.disc-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(240,185,11,.14);border:1px solid rgba(240,185,11,.42);padding:5px 12px;border-radius:var(--r)}
.disc-pill .n{font-family:var(--f-body);font-weight:800;font-size:20px;color:var(--y);line-height:1}
.disc-pill .t{font-weight:600;font-size:10.5px;color:var(--d-ink);line-height:1.15}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--y);background:rgba(240,185,11,.10);border:0.5px solid rgba(240,185,11,.3);padding:5px 11px;border-radius:20px}
.kick{font-size:12px;color:var(--green);font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.morelink{font-size:13px;font-weight:700;color:var(--green)}
.morelink:hover{text-decoration:underline}
.foot-star{font-size:11px;color:var(--d-mut2)}

/* ---------- HERO（SVG 收进 wrap·两套坐标统一） ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(680px 460px at 78% 26%,rgba(240,185,11,.10),transparent 66%),radial-gradient(520px 520px at 10% 82%,rgba(240,185,11,.04),transparent 70%),var(--d-bg)}
.hero .wrap{position:relative;min-height:562px}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.hero-copy{position:relative;z-index:2;max-width:400px;padding-top:42px}
.hero h1{font-size:32px;color:var(--d-ink);margin-top:13px}
.hero h1 .hl{color:var(--y)}
.hero h1 .ul{border-bottom:2px solid rgba(240,185,11,.55)}
.hero-sub{font-size:13.5px;line-height:1.62;color:var(--d-mut);max-width:340px;margin-top:12px}
.dest{position:absolute;z-index:3;right:10.5%;top:240px}
/* hero 轻量动效（GPU·prefers-reduced-motion 兜底见文末） */
.flowline,.flowglow{animation:cw-flow 1.9s linear infinite}
@keyframes cw-flow{to{stroke-dashoffset:-100}}
.logo-pulse,.logo-pulse2{transform-box:fill-box;transform-origin:center;animation:cw-pulse 2.6s ease-out infinite}
.logo-pulse2{animation-delay:1.3s}
@keyframes cw-pulse{0%{transform:scale(.42);opacity:.8}70%{opacity:.06}100%{transform:scale(1.55);opacity:0}}
.hero-logo{transform-box:fill-box;transform-origin:center;animation:cw-breathe 3.4s ease-in-out infinite}
@keyframes cw-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.dest .disc-pill{animation:cw-bob 3s ease-in-out infinite}
@keyframes cw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cw-particle{transform-box:fill-box;animation:cw-drift 9s ease-in-out infinite}
.cw-particle.p2{animation-duration:12s;animation-delay:-4s}
.cw-particle.p3{animation-duration:14s;animation-delay:-8s}
@keyframes cw-drift{0%,100%{transform:translate(0,0);opacity:.35}50%{transform:translate(16px,-22px);opacity:.85}}
/* 体检卡：放大拉长·挂在「领航带单员」节点下方·完全收进 hero */
.health{position:absolute;z-index:3;left:37%;top:406px;width:min(492px,58%);background:var(--card);border-radius:16px;padding:18px 24px;box-shadow:var(--sh-card)}
.health-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.health-h b{font-family:var(--f-title);font-weight:700;font-size:15px;color:var(--ink)}
.health-h .note{font-weight:500;color:var(--mut2);font-size:12px}
.health-tag{font-weight:600;font-size:11px;color:var(--y-ink);background:var(--y-tint);padding:3px 9px;border-radius:6px}
.health-row{display:flex;gap:18px}
.hcol{display:flex;flex-direction:column;flex:1;min-width:0}
.hcol .l{font-size:12px;color:var(--mut);margin-bottom:8px;white-space:nowrap}
.hcol .tk{height:7px;border-radius:4px;background:#EEEFF2;overflow:hidden}
.hcol .tk i{display:block;height:100%;background:var(--y);border-radius:3px}
.hcol .tk i.risk{background:var(--red)}

/* ---------- 发射台（转化条） ---------- */
.launch{background:var(--d-panel);border-top:1px solid var(--d-border)}
.launch .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 24px}
.launch .foot-note{font-size:10.5px;color:var(--d-mut2);display:inline-flex;align-items:center;gap:6px}
.grow{flex:1}

/* ---------- 信任条 ---------- */
.trust{background:var(--y-band);border-bottom:0.5px solid #F0E4BE}
.trust .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 24px;font-size:11.5px;color:#5b5330}
.trust .c{display:inline-flex;align-items:center;gap:6px}
.trust .c .ti{color:var(--y-ink)}

/* ---------- 课程线 ---------- */
.courseline{display:flex;background:var(--card)}
.courseline a{flex:1;padding:11px 4px;text-align:center;font-size:11px;color:var(--mut);border-right:0.5px solid #f0f0ee;line-height:1.35}
.courseline a:last-child{border-right:none}
.courseline a b{display:block;font-family:var(--f-mono);font-weight:700;font-size:12px;color:var(--y-ink)}
.courseline a.on{background:var(--y-tint)} .courseline a.on b{color:var(--ink)} .courseline a.on{color:var(--ink)}

/* ---------- 版块通用 ---------- */
.sec{padding:38px 0;position:relative}
.sec.paper{background:var(--p-bg)} .sec.paper2{background:var(--p-bg2)} .sec.white{background:var(--card);border-top:0.5px solid var(--p-border)}
.sec.paper2{border-top:0.5px solid var(--p-border)}
.h2{font-size:23px;color:var(--ink);line-height:1.3}
.sec-lead{font-size:13.5px;color:var(--mut);line-height:1.7;max-width:560px;margin-top:10px}
.route-div{position:absolute;left:0;top:0;width:100%;height:14px}

/* 6 站错落 */
.stations{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin-top:20px}
.st{display:flex;gap:12px}
.st .no{font-family:var(--f-mono);font-weight:700;font-size:21px;color:var(--y);flex:none;line-height:1}
.st h3{font-family:var(--f-body);font-weight:700;font-size:14.5px;color:var(--ink)}
.st .tag{font-size:10px;color:var(--green);font-weight:700;background:var(--green-tint);padding:1px 6px;border-radius:10px;margin-left:6px}
.st p{font-size:12px;color:var(--mut);line-height:1.55;margin:2px 0 0}

/* cornerstone */
.flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.chip{display:inline-block;font-size:11.5px;color:var(--y-ink);background:var(--y-tint);border:0.5px solid #F0E1B0;border-radius:20px;padding:4px 11px}
.flow .ti{color:#c9ccce;font-size:14px}

/* 工具区 */
.tools-grid{display:flex;gap:24px;margin-top:18px}
.tool-hero{flex:1.5;min-width:0;background:var(--d-panel2);border-radius:var(--r-xl);padding:18px;color:var(--d-ink)}
.tool-hero .th{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tool-hero .th .ti{color:var(--y);font-size:20px}
.tool-hero .th b{font-family:var(--f-title);font-weight:800;font-size:16px}
.tool-hero p{font-size:12px;color:var(--d-mut);line-height:1.6;margin:0 0 12px}
.tool-hero .demo{display:flex;gap:10px;flex-wrap:wrap}
.tool-hero .demo span{font-family:var(--f-mono);font-weight:700;font-size:12px;background:var(--d-panel);border:1px solid var(--d-border);color:var(--y);padding:7px 10px;border-radius:var(--r-sm)}
.tool-hero .demo span.n{color:var(--d-ink)}
.tool-list{flex:1;min-width:0}
.tool-list .lbl{font-size:12px;color:var(--mut2);font-weight:700;margin-bottom:8px}
.tool-list a{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#2f3c37;padding:7px 0;border-bottom:0.5px solid var(--p-border)}
.tool-list a:last-of-type{border-bottom:none}
.tool-list a .ti{color:#c9ccce;font-size:13px}
.tool-list a:hover{color:var(--green)}
.tool-list .cnt{font-size:11px;color:var(--mut3);margin-top:6px}

/* 文章流 */
.zine a{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:0.5px solid var(--p-border)}
.zine a:last-child{border-bottom:none}
.zine .no{font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--y-ink);flex:none}
.zine .ti-t{color:var(--ink);font-weight:600;flex:1;font-size:14px}
.zine a:hover .ti-t{color:var(--green)}
.zine .meta{font-size:11px;color:var(--mut3);flex:none}

/* EEAT */
.eeat{display:flex;gap:20px;align-items:flex-start}
.eeat .av{width:46px;height:46px;border-radius:50%;background:var(--d-bg);display:flex;align-items:center;justify-content:center;flex:none}
.eeat .av .ti{color:var(--y);font-size:20px}
.eeat b{font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--ink)}
.eeat p{font-size:12.5px;color:var(--mut);line-height:1.7;margin:6px 0 0;max-width:560px}
.eeat a{color:var(--green)}

/* 二次转化（深色） */
.cta2{background:var(--d-bg);padding:38px 0;text-align:center}
.cta2 h2{font-size:21px;color:var(--d-ink)}
.cta2 p{font-size:12.5px;color:var(--d-mut);margin:8px 0 16px}
.cta2 .row{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}

/* 页脚 */
.foot{background:var(--d-bg2);border-top:1px solid var(--d-border);padding:28px 0 22px}
.foot-cols{display:flex;flex-wrap:wrap;gap:24px 40px}
.foot-brand{flex:2;min-width:200px}
.foot-brand .b{display:flex;align-items:center;gap:8px}
.foot-brand .b .wm{font-family:var(--f-display);font-size:17px;color:var(--d-ink)}
.foot-brand p{font-size:11px;color:var(--d-mut3);line-height:1.7;margin:8px 0 0;max-width:300px}
.foot-col{font-size:12px;color:var(--d-mut2);line-height:2}
.foot-col .h{color:var(--d-ink);font-weight:700;margin-bottom:4px}
.foot-col a:hover{color:var(--d-ink)}
.foot-bar{border-top:1px solid var(--d-border2);margin-top:18px;padding-top:12px;font-size:10.5px;color:var(--d-mut3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- 文章 / 工具 / 合规 页 ---------- */
.page{background:var(--card)}
.crumb{font-size:12px;color:var(--mut2);padding:16px 0 0}
.crumb a:hover{color:var(--green)} .crumb .sep{margin:0 6px;color:var(--mut3)}
.article{max-width:748px;margin:0 auto;padding:8px 24px 20px}
.article h1{font-size:32px;color:var(--ink);line-height:1.24;margin:10px 0 12px}
.article .lede{font-size:16px;color:var(--mut);line-height:1.75;margin-bottom:18px}
.article .ameta{font-size:12px;color:var(--mut2);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:0.5px solid var(--p-border)}
.article-cover{border-radius:var(--r-lg);overflow:hidden;margin:0 0 22px;aspect-ratio:1200/630;background:var(--p-bg2)}
.article h2{font-size:22px;color:var(--ink);margin:30px 0 10px}
.article h3{font-size:17px;color:var(--ink);margin:22px 0 8px}
.article p{font-size:16px;line-height:1.8;color:#2a2e35;margin:0 0 15px}
.article ul,.article ol{padding-left:22px;margin:0 0 15px} .article li{font-size:16px;line-height:1.8;margin:5px 0;color:#2a2e35}
.article a.ref{color:var(--green);border-bottom:1px solid #bfe0d3}
.toc{background:var(--p-bg2);border:0.5px solid var(--p-border);border-radius:var(--r-lg);padding:14px 18px;margin:0 0 22px}
.toc .h{font-size:12px;font-weight:700;color:var(--mut2);margin-bottom:6px}
.toc ol{margin:0;padding-left:20px} .toc li{font-size:13.5px;line-height:1.9} .toc a{color:var(--ink)} .toc a:hover{color:var(--green)}
.callout{background:var(--y-band);border:1px solid #F0E4BE;border-radius:var(--r-lg);padding:14px 18px;margin:18px 0;font-size:14.5px;color:#5b4a1a}
.callout.risk{background:#FEECEE;border-color:#F7C9CE;color:#8a2733}
.tbl-wrap{overflow-x:auto;margin:16px 0}
table.data{border-collapse:collapse;width:100%;font-size:14px;min-width:440px}
table.data th,table.data td{border:0.5px solid var(--p-border2);padding:8px 12px;text-align:left}
table.data th{background:var(--p-bg2);font-weight:700;color:var(--ink)}
.faq{margin:18px 0}
.faq details{border-bottom:0.5px solid var(--p-border)}
.faq summary{font-family:var(--f-title);font-weight:700;font-size:15.5px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;min-height:44px;box-sizing:border-box}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--y-ink);font-family:var(--f-mono)}
.faq details[open] summary::after{content:'–'}
.faq .a{font-size:15px;line-height:1.8;color:#2a2e35;margin-top:8px}
/* 文章内转化条 */
.art-cta{background:var(--d-bg);border-radius:var(--r-lg);padding:16px 18px;margin:22px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.art-cta .t{font-size:13px;color:var(--d-ink);font-weight:700;flex:1;min-width:150px}
.art-cta .t span{color:var(--y)}
.author-box{display:flex;gap:14px;align-items:flex-start;background:var(--p-bg2);border-radius:var(--r-lg);padding:16px 18px;margin:26px 0 0}

/* 工具页 */
.tool-app{max-width:720px;margin:0 auto;padding:8px 24px 24px}
.tool-app h1{font-size:28px;color:var(--ink);margin:10px 0 8px}
.tool-ui{background:var(--card);border:0.5px solid var(--p-border2);border-radius:var(--r-lg);padding:20px;margin:18px 0}
.field{margin:0 0 14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;height:44px;border:1px solid var(--p-border2);border-radius:var(--r-sm);padding:0 12px;font-size:15px;font-family:var(--f-body);background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--y);border-color:var(--y)}
.field .hint{font-size:11.5px;color:var(--mut2);margin-top:4px}
.tool-out{background:var(--d-bg);border-radius:var(--r-lg);padding:18px;color:var(--d-ink);margin-top:6px}
.tool-out .big{font-family:var(--f-mono);font-weight:700;font-size:26px;color:var(--y)}
.tool-out .lbl{font-size:12px;color:var(--d-mut2)}
.range{width:100%}

/* ---------- 响应式 ---------- */
@media(max-width:820px){
  .nav .lk-txt{display:none} .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .nav.nav-open{position:relative}
  .nav.nav-open .lk-txt{display:block;position:absolute;right:0;top:44px;background:var(--d-panel);border:0.5px solid var(--d-border);border-radius:var(--r);padding:2px 14px;z-index:20;min-width:150px}
  .nav.nav-open .lk-txt a{display:flex;align-items:center;min-height:44px;color:var(--d-mut);border-bottom:0.5px solid var(--d-border2)}
  .nav.nav-open .lk-txt:last-of-type a{border-bottom:none}
  .nav.nav-open .dd{position:static}
  .nav.nav-open .dd-menu{display:none}
  .nav.nav-open .dd-t::after{display:none}
  .tools-grid{flex-direction:column} .stations{grid-template-columns:1fr}
  .health{position:static;transform:none;left:auto;top:auto;width:auto;margin:18px 0 0;box-shadow:0 8px 20px rgba(0,0,0,.4)}
  .dest{position:static;margin-top:16px}
  .hero .wrap{min-height:auto;padding-top:8px;padding-bottom:22px} .hero-copy{max-width:none;padding-top:20px}
  .hero-svg{opacity:.42}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .hero h1{font-size:25px} .article h1{font-size:26px} .h2{font-size:20px}
  .courseline{flex-wrap:wrap} .courseline a{flex:1 0 33.33%;border-bottom:0.5px solid #f0f0ee}
  .foot-cols{gap:18px 28px}
  .launch .wrap{gap:10px}
}
/* 触摸目标 ≥44px（导航型链接·句内正文内联按 WCAG2.5.8 例外不动） */
@media(hover:none){
  .nav a,.courseline a,.tool-list a,.zine a,.foot-col a{min-height:44px;display:flex;align-items:center}
  .morelink,.crumb a,.toc a,.foot-bar a{display:inline-flex;align-items:center;min-height:44px}
  .brand{min-height:44px;align-items:center}
  .crumb{flex-wrap:wrap;align-items:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}