/*
  [INPUT]: 无依赖。色值照 cc-board ui.html 的深色 token（#000 底、#f5f5f7 字、#a1a1a6 次要字），强调色只用在「复制」按下之后
  [OUTPUT]: index.html 的全部样式：顶行、开头一段、安装命令、通栏截图和图注、正文段、三张卡、列表、问答、页脚
  [POS]: cc-board-site 唯一的样式表。极简：左对齐一栏文字（≤ 620px）配通栏截图（≤ 1080px）；没有渐变、发光、渐入和卡片阵列。
         窄屏（≤ 720px）三张卡竖排，16px 边距，不横向滚动
  [PROTOCOL]: Update this header on change, then check CLAUDE.md
*/
:root{
  color-scheme: dark;
  --bg:#000; --raise:#0f0f10; --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#6e6e73;
  --hair:rgba(255,255,255,.12); --accent:#5bd6d6; --on-accent:#002524;
  --font:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --gutter:clamp(16px, 5vw, 56px); --wide:1080px; --col:620px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
img{display:block;max-width:100%;height:auto}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--text-2)}
code,kbd,pre{font-family:var(--mono);font-size:.86em}
code{color:var(--text)}
kbd{padding:1px 6px;border-radius:5px;border:1px solid var(--hair);color:var(--text)}
em{font-style:normal;color:var(--text)}
h1,h2{margin:0;font-weight:600;letter-spacing:-.015em}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── 顶行：名字和一个链接，不吸顶 ── */
.top{display:flex;align-items:center;justify-content:space-between;max-width:var(--wide);margin:0 auto;padding:28px var(--gutter);font-size:15px}
.top a{text-decoration:none;color:var(--text-2)}
.top a:hover{color:var(--text)}
.top .name{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600}
.top .name img{border-radius:5px}

main{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}

/* ── 开头：名字、一句话、安装命令 ── */
.intro{max-width:var(--col);padding-top:clamp(48px, 12vh, 128px)}
.intro h1{font-size:28px}
.intro > p:first-of-type{margin-top:14px;font-size:21px;line-height:1.5;color:var(--text-2)}
.cmd{display:flex;align-items:center;gap:10px;margin-top:32px;padding:6px 6px 6px 16px;border:1px solid var(--hair);border-radius:10px;background:var(--raise)}
.cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.copy{flex:none;height:30px;padding:0 12px;border:0;border-radius:7px;background:#232325;color:var(--text);font:500 13px var(--font);cursor:pointer;transition:background .2s}
.copy:hover{background:#2e2e30}
.copy.done{background:var(--accent);color:var(--on-accent)}
.meta{margin-top:14px;font-size:14px;color:var(--text-3)}
.meta a{color:var(--text-3)}

/* ── 截图：细边框，红绿灯落在 App 顶栏左边让出来的那块（位置按底片的 CSS 像素换算） ── */
.shot{margin:clamp(56px, 9vw, 96px) 0 0}
.shot .frame{position:relative;border:1px solid var(--hair);border-radius:10px;overflow:hidden;container-type:inline-size}
.shot.wide .frame{--cw:2560}
.shot:not(.wide) .frame{--cw:1728}
.lights{position:absolute;left:calc(100cqw * 20 / var(--cw));top:calc(100cqw * 20 / var(--cw));display:flex;gap:calc(100cqw * 8 / var(--cw))}
.lights i{display:block;width:calc(100cqw * 12 / var(--cw));aspect-ratio:1;border-radius:50%;background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
figcaption{margin-top:12px;font-size:14px;color:var(--text-3)}

/* ── 正文段 ── */
.text{max-width:var(--col);margin-top:clamp(88px, 13vw, 140px)}
.text h2{font-size:17px}
.text p,.text li,.text dd{color:var(--text-2)}
.text h2 + p,.text h2 + ul,.text h2 + dl{margin-top:10px}
.text p + p,.text p + .cmd + p,.text .cmd{margin-top:18px}
.text ul{margin:0;padding:0;list-style:none}
.text li{position:relative;padding-left:18px;margin-top:12px}
.text li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:1px;background:var(--text-3)}
.text pre{margin:18px 0 0;padding:14px 16px;border:1px solid var(--hair);border-radius:10px;background:var(--raise);overflow-x:auto;line-height:1.7}
.text dl{margin:10px 0 0}
.text dt{margin-top:18px;color:var(--text)}
.text dd{margin:2px 0 0}

/* ── 三张卡：真卡片的截图，图注在下面 ── */
.cards{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px;margin-top:40px}
.cards figure{margin:0}

/* ── 页脚 ── */
.foot{max-width:var(--wide);margin:clamp(110px, 15vw, 170px) auto 0;padding:24px var(--gutter) 56px;font-size:13px;color:var(--text-3)}
.foot p + p{margin-top:6px}
.foot a{color:var(--text-3)}

@media (max-width:720px){
  body{font-size:16px}
  .intro > p:first-of-type{font-size:19px}
  .cards{grid-template-columns:minmax(0, 1fr);max-width:400px}
  .cmd code{font-size:12.5px}
}