/* ============================================ Az-chain-labs 全站共享样式 跟 azi36.com 主站同一套设计语言：品牌青、同样的中性色阶、 同样的圆角/阴影/缓动，以及同一套「深色成对写」的规则。 课程之间只靠 --accent 点缀色区分，品牌色全站统一。 ============================================ */ :root { /* —— 与主站逐值一致 —— */ --bg: #ffffff; --bg-soft: #fafafa; --bg-hover: #f4f4f5; --text: #18181b; --text-2: #52525b; --text-3: #a1a1aa; --border: #e4e4e7; --border-light: #f0f0f2; --brand: #016c73; --brand-hover: #0b5459; --brand-light: #e1f4f5; --accent: var(--brand); --radius: 8px; --radius-lg: 12px; --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05); --shadow-float: 0 8px 30px rgba(0,0,0,.12); --header-bg: rgba(255,255,255,.82); --ease: cubic-bezier(.2,.8,.2,1); --maxw: 1080px; /* —— 本仓库自己的补充 —— */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; --ok: #337c42; /* 语义色：好 / 通过 / 安全 */ --ok-soft: #eaf4ec; --warn: #8a6410; /* 语义色：注意 */ --warn-soft: #f8f0dc; --danger: #b3312b; /* 语义色：危险 / 失效 / 被清算 */ --danger-soft: #fbeceb; /* 图表分类色板：色觉障碍分离度已校验（见 README） */ --s1: #1f6fb2; --s2: #c2621a; --s3: #8e4fa8; --s4: #5e8a17; --grid: #ececef; } /* ---------- 深色色板 ---------- ⚠ 下面两处映射必须逐行一致（一个走属性、一个走媒体查询，CSS 没法合成一条）。 tools/check.mjs 会比对它们，只改一处会被拦下。 本仓库的策略是：所有组件一律只读 var()，不写任何 .foo 级别的深色规则， 所以需要成对维护的只有下面这一对映射。 */ :root[data-theme="dark"], :root:not([data-theme="light"]) { --dark-bg: #101116; --dark-bg-soft: #1e212a; --dark-bg-hover: #272b36; --dark-text: #e9eaf0; --dark-text-2: #a9adbb; --dark-text-3: #868b9a; --dark-border: #313543; --dark-border-light: #262a34; --dark-brand: #a1dadf; --dark-brand-hover: #c5e9ec; --dark-brand-light: #063235; --dark-header-bg: rgba(16,17,22,.82); --dark-ok: #94de9e; --dark-ok-soft: #16301c; --dark-warn: #d6ae5c; --dark-warn-soft: #2c2413; --dark-danger: #ff9d92; --dark-danger-soft: #331a18; --dark-s1: #6bb6ea; --dark-s2: #e2985b; --dark-s3: #c69ade; --dark-s4: #9dc94f; --dark-grid: #262a34; } :root[data-theme="dark"] { --bg: var(--dark-bg); --bg-soft: var(--dark-bg-soft); --bg-hover: var(--dark-bg-hover); --text: var(--dark-text); --text-2: var(--dark-text-2); --text-3: var(--dark-text-3); --border: var(--dark-border); --border-light: var(--dark-border-light); --brand: var(--dark-brand); --brand-hover: var(--dark-brand-hover); --brand-light: var(--dark-brand-light); --header-bg: var(--dark-header-bg); --ok: var(--dark-ok); --ok-soft: var(--dark-ok-soft); --warn: var(--dark-warn); --warn-soft: var(--dark-warn-soft); --danger: var(--dark-danger); --danger-soft: var(--dark-danger-soft); --s1: var(--dark-s1); --s2: var(--dark-s2); --s3: var(--dark-s3); --s4: var(--dark-s4); --grid: var(--dark-grid); --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4); --shadow-float: 0 8px 30px rgba(0,0,0,.55); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--dark-bg); --bg-soft: var(--dark-bg-soft); --bg-hover: var(--dark-bg-hover); --text: var(--dark-text); --text-2: var(--dark-text-2); --text-3: var(--dark-text-3); --border: var(--dark-border); --border-light: var(--dark-border-light); --brand: var(--dark-brand); --brand-hover: var(--dark-brand-hover); --brand-light: var(--dark-brand-light); --header-bg: var(--dark-header-bg); --ok: var(--dark-ok); --ok-soft: var(--dark-ok-soft); --warn: var(--dark-warn); --warn-soft: var(--dark-warn-soft); --danger: var(--dark-danger); --danger-soft: var(--dark-danger-soft); --s1: var(--dark-s1); --s2: var(--dark-s2); --s3: var(--dark-s3); --s4: var(--dark-s4); --grid: var(--dark-grid); --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4); --shadow-float: 0 8px 30px rgba(0,0,0,.55); color-scheme: dark; } } /* 课程点缀色：给 加类。品牌青全站统一，这里只换小面积着色。 取值直接沿用主站四个频道的点缀色（都已过对比度校验），加课程一课只改这一处。 ⚠ 同样必须成对。 */ :root[data-theme="dark"] body { --accent: var(--dk-accent, var(--dark-brand)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --accent: var(--dk-accent, var(--dark-brand)); } } body.ch-l1 { --accent: #337c42; --dk-accent: #94de9e; } /* 第一课 · 青绿 */ body.ch-l2 { --accent: #016c73; --dk-accent: #a1dadf; } /* 第二课 · 品牌青 */ body.ch-l3 { --accent: #a5592d; --dk-accent: #ffbf9d; } /* 第三课 · 暖橙 */ body.ch-lab { --accent: #6e64af; --dk-accent: #cbc6ff; } /* 看板 · 紫 */ /* 导航里四个单元的标识色。同样成对：亮色用深版，深色用浅版， 这样顶栏的圆点和当前页高亮在两套主题下对比度都够。 */ :root { --u-L1: #337c42; --u-L2: #016c73; --u-L3: #a5592d; --u-LAB: #6e64af; } :root[data-theme="dark"] { --u-L1: #94de9e; --u-L2: #a1dadf; --u-L3: #ffbf9d; --u-LAB: #cbc6ff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --u-L1: #94de9e; --u-L2: #a1dadf; --u-L3: #ffbf9d; --u-LAB: #cbc6ff; } } /* ============================================ 基础 ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { overflow-x: hidden; transition: background .3s var(--ease); } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16.5px; line-height: 1.85; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { line-height: 1.35; text-wrap: balance; font-weight: 700; } a { color: var(--brand); text-underline-offset: .22em; text-decoration-thickness: 1px; } a:hover { color: var(--brand-hover); } code, .mono { font-family: var(--font-mono); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--brand-light); color: var(--text); } sup, sub { font-size: .7em; } canvas { display: block; width: 100%; touch-action: pan-y; } img { max-width: 100%; } /* ============================================ 顶部全站导航（所有页面共用，由 shell.js 注入） ============================================ */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .site-header .bar { max-width: var(--maxw); margin: 0 auto; padding: .5rem 1.2rem; display: flex; align-items: center; gap: .8rem; } .site-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); flex: none; } .logo-mark { width: 1.7rem; height: 1.7rem; border-radius: 6px; flex: none; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; } .wordmark { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } .wordmark b { color: var(--brand); font-weight: 600; } .unit-nav { display: flex; gap: .15rem; margin-left: .4rem; overflow-x: auto; scrollbar-width: none; } .unit-nav::-webkit-scrollbar { display: none; } .unit-nav a { display: flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 6px; font-size: .84rem; text-decoration: none; color: var(--text-2); white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease); } .unit-nav a:hover { background: var(--bg-hover); color: var(--text); } .unit-nav a[aria-current="page"] { background: color-mix(in srgb, var(--u) 14%, transparent); color: var(--u); font-weight: 600; } .unit-nav a .dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--u); } .unit-nav a .kb { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); } /* 窄屏顶栏放不下四个课名，收成四个色点；点本身仍是完整的可点区域， 课名留在 aria-label 里，读屏和 hover 都还能拿到。 */ @media (max-width: 700px) { .unit-nav a span:not(.dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .unit-nav a { padding: .42rem; } .unit-nav a .dot { width: .62rem; height: .62rem; } .unit-nav a[aria-current="page"] .dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--u); } } .hdr-actions { margin-left: auto; display: flex; align-items: center; gap: .3rem; flex: none; } .icon-btn { width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; font-size: .95rem; line-height: 1; transition: background .15s var(--ease), color .15s var(--ease); } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .icon-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .search-hint { display: none; align-items: center; gap: .4rem; padding: .28rem .55rem .28rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); color: var(--text-3); font-size: .78rem; cursor: pointer; white-space: nowrap; } .search-hint:hover { border-color: var(--brand); color: var(--text-2); } .search-hint kbd { font-family: var(--font-mono); font-size: .68rem; padding: .05rem .3rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); } @media (min-width: 900px) { .search-hint { display: flex; } .icon-btn.only-narrow { display: none; } } /* 顶部阅读进度条 */ .read-bar { height: 2px; background: transparent; } .read-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; } /* ============================================ 搜索面板（⌘K / Ctrl-K） ============================================ */ .search-mask { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1.2rem 2rem; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease); } .search-mask.open { opacity: 1; pointer-events: auto; } .search-box { width: min(100%, 40rem); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden; transform: translateY(-6px); transition: transform .16s var(--ease); } .search-mask.open .search-box { transform: none; } .search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 1rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--border-light); } .search-box input::placeholder { color: var(--text-3); } .search-results { max-height: min(58vh, 30rem); overflow-y: auto; padding: .35rem; } .search-results .sr { display: flex; align-items: baseline; gap: .6rem; width: 100%; padding: .5rem .7rem; border-radius: 6px; text-decoration: none; color: var(--text); border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: .9rem; text-align: left; } .search-results .sr:hover, .search-results .sr.on { background: var(--bg-hover); } .search-results .sr .u { font-family: var(--font-mono); font-size: .66rem; flex: none; padding: .08rem .34rem; border-radius: 4px; background: var(--bg-soft); border: 1px solid var(--border-light); color: var(--text-3); } .search-results .sr .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-results .sr .k { font-size: .72rem; color: var(--text-3); flex: none; } .search-results mark { background: var(--brand-light); color: var(--brand); border-radius: 3px; padding: 0 .1em; } .search-empty { padding: 1.6rem 1.1rem; text-align: center; color: var(--text-3); font-size: .88rem; } .search-foot { display: flex; gap: .9rem; padding: .5rem 1.1rem; border-top: 1px solid var(--border-light); font-size: .72rem; color: var(--text-3); } .search-foot kbd { font-family: var(--font-mono); border: 1px solid var(--border); border-radius: 4px; padding: 0 .28rem; } /* ============================================ 页面骨架：左侧目录 + 正文 ============================================ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; } .layout { display: block; } @media (min-width: 1000px) { .layout { display: grid; grid-template-columns: 13.5rem 1fr; gap: 3rem; align-items: start; } } .rail { display: none; } @media (min-width: 1000px) { .rail { display: block; position: sticky; top: 3.4rem; max-height: calc(100vh - 4.2rem); overflow-y: auto; padding: 2.4rem 0 2rem; scrollbar-width: thin; } } .rail-title { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: .7rem; } .rail ol { list-style: none; display: flex; flex-direction: column; gap: .05rem; } .rail a { display: flex; gap: .5rem; align-items: baseline; padding: .3rem .5rem; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: .82rem; line-height: 1.55; border-left: 2px solid transparent; } .rail a:hover { background: var(--bg-hover); color: var(--text); } .rail a .n { font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; } .rail a.on { background: var(--brand-light); color: var(--brand); font-weight: 600; border-left-color: var(--accent); } .rail a.on .n { color: var(--accent); } .rail a.done .n::after { content: "✓"; color: var(--ok); margin-left: .2rem; } .rail-part { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: .9rem 0 .3rem .5rem; padding-top: .6rem; border-top: 1px solid var(--border-light); } .rail-part:first-of-type { border-top: 0; padding-top: 0; margin-top: .1rem; } .rail-foot { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--border-light); font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); } .rail-bar { height: 3px; background: var(--border-light); border-radius: 2px; margin-top: .45rem; overflow: hidden; } .rail-bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .35s var(--ease); } .rail-meta { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border-light); font-family: var(--font-mono); font-size: .64rem; color: var(--text-3); line-height: 1.9; } .rail-meta b { color: var(--text-2); font-weight: 600; } /* ============================================ 头图与分部 ============================================ */ .hero { padding: 3.4rem 0 2.2rem; border-bottom: 1px solid var(--border); } .eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .hero h1 { font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin: .55rem 0 0; } .hero .sub { margin-top: 1rem; max-width: 40rem; font-size: 1.02rem; color: var(--text-2); } .hero .sub b { font-weight: 600; color: var(--text); } .hero-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; } .tag { font-family: var(--font-mono); font-size: .7rem; border: 1px solid var(--border); color: var(--text-3); padding: .18rem .5rem; border-radius: 5px; background: var(--bg-soft); } .part { margin: 3rem 0 0; padding: 1rem 0 .2rem; border-top: 2px solid var(--text); display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; } .part .pn { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; color: var(--bg); background: var(--text); padding: .12rem .45rem; border-radius: 4px; } .part h2 { font-size: clamp(1.3rem, 3.6vw, 1.7rem); font-weight: 800; } .part .pd { font-size: .87rem; color: var(--text-3); flex-basis: 100%; max-width: 44rem; } /* ============================================ 章节与正文 ============================================ */ .chap { padding: 2.4rem 0 .5rem; scroll-margin-top: 4rem; } .chap-head { display: flex; gap: .85rem; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: .45rem; margin-bottom: 1.4rem; } .chap-num { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--accent); letter-spacing: .08em; flex: none; font-variant-numeric: tabular-nums; } .chap-head h2, .chap-head h3 { font-size: clamp(1.2rem, 3.4vw, 1.55rem); font-weight: 700; } .prose { display: flex; flex-direction: column; gap: 1rem; max-width: 42rem; } .prose h3, .prose h4 { font-size: 1.04rem; font-weight: 700; margin-top: .8rem; } .prose ul, .prose ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .45rem; } .prose li::marker { color: var(--accent); } .lead { font-size: 1.02rem; color: var(--text-2); } .kw { background: var(--brand-light); color: var(--brand); padding: 0 .22em; border-radius: 3px; font-weight: 600; } .note { font-size: .84rem; color: var(--text-3); line-height: 1.75; } .tip, .warn, .good { border-left: 3px solid; padding: .8rem 1rem; font-size: .92rem; border-radius: 0 var(--radius) var(--radius) 0; } .tip { border-color: var(--brand); background: var(--brand-light); } .warn { border-color: var(--danger); background: var(--danger-soft); } .good { border-color: var(--ok); background: var(--ok-soft); } .fml { font-family: var(--font-mono); font-size: .87rem; background: var(--bg-soft); border: 1px solid var(--border-light); padding: .65rem .8rem; border-radius: var(--radius); overflow-x: auto; white-space: pre; line-height: 1.85; } /* 跨章 / 跨课引用 —— 由 shell.js 把正文里的「第 05 章」变成这个 */ a.xref { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); padding-bottom: .05em; font-weight: 500; } a.xref:hover { color: var(--accent); background: var(--brand-light); border-radius: 3px; } a.xref::after { content: "↗"; font-size: .8em; margin-left: .12em; opacity: .65; } /* 术语：正文里悬停出解释 */ .term { border-bottom: 1px dotted var(--text-3); cursor: help; text-underline-offset: .2em; } .term:hover { border-bottom-color: var(--accent); color: var(--accent); } .term-pop { position: fixed; z-index: 95; max-width: min(22rem, calc(100vw - 2rem)); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: .6rem .75rem; font-size: .84rem; line-height: 1.7; color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity .12s var(--ease); } .term-pop.show { opacity: 1; } .term-pop b { color: var(--text); display: block; margin-bottom: .15rem; font-size: .88rem; } .term-pop em { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); } /* ============================================ 实验面板（三课通用） ============================================ */ .lab { margin: 1.8rem 0; border: 1px solid var(--border); background: var(--bg-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; scroll-margin-top: 4rem; } .lab-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .9rem; border-bottom: 1px solid var(--border); background: var(--bg); } .lab-id { font-family: var(--font-mono); font-size: .65rem; font-weight: 600; letter-spacing: .1em; color: #fff; background: var(--accent); padding: .16rem .45rem; border-radius: 5px; flex: none; } .lab-title { font-weight: 700; font-size: .95rem; } .lab-done { margin-left: auto; font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); display: flex; align-items: center; gap: .3rem; cursor: pointer; border: 1px solid var(--border); border-radius: 5px; padding: .12rem .45rem; background: transparent; } .lab-done:hover { border-color: var(--ok); color: var(--ok); } .lab-done[data-done="1"] { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); } .lab-body { padding: .95rem .9rem 1.05rem; display: flex; flex-direction: column; gap: .75rem; } .lab-note { font-size: .8rem; color: var(--text-3); line-height: 1.7; } .field { display: flex; flex-direction: column; gap: .25rem; } .field label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } input[type=text], input[type=number], select, textarea { font-family: var(--font-mono); font-size: .87rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: .42rem .55rem; width: 100%; line-height: 1.6; } input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; } textarea { resize: vertical; min-height: 3.2rem; font-family: var(--font-sans); } input[type=range] { width: 100%; accent-color: var(--accent); } input[type=checkbox] { accent-color: var(--accent); } button { font-family: var(--font-mono); font-size: .76rem; background: var(--text); color: var(--bg); border: 1px solid var(--text); padding: .4rem .72rem; border-radius: 6px; cursor: pointer; transition: opacity .15s var(--ease); } button:hover { opacity: .85; } button.ghost { background: transparent; color: var(--text-2); border-color: var(--border); } button.ghost:hover { background: var(--bg-hover); color: var(--text); opacity: 1; } button.ghost.on { border-color: var(--accent); color: var(--accent); background: var(--brand-light); } button.danger { background: var(--danger); border-color: var(--danger); color: #fff; } button[disabled] { opacity: .4; cursor: not-allowed; } .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .grid2, .grid3, .grid4 { display: grid; grid-template-columns: 1fr; gap: .7rem; } @media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: repeat(3, 1fr); } .grid4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .grid4 { grid-template-columns: repeat(4, 1fr); } } .hexout { font-family: var(--font-mono); font-size: .79rem; line-height: 1.75; word-break: break-all; background: var(--bg); border: 1px solid var(--border-light); padding: .5rem .6rem; border-radius: 6px; } .readout { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 600; color: var(--accent); line-height: 1.3; } .readout small { font-size: .68rem; font-weight: 400; color: var(--text-3); } .readout.bad { color: var(--danger); } .readout.good { color: var(--ok); } /* ============================================ 表格 ============================================ */ .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.t { border-collapse: collapse; width: 100%; font-size: .85rem; min-width: 32rem; } table.t.narrow { min-width: 0; } table.t th { font-family: var(--font-mono); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: left; font-weight: 600; padding: .42rem .55rem; border-bottom: 1px solid var(--border); white-space: nowrap; } table.t td { padding: .5rem .55rem; border-bottom: 1px solid var(--border-light); vertical-align: top; line-height: 1.65; } table.t tbody tr:nth-child(odd) { background: var(--bg-soft); } table.t td.m { font-family: var(--font-mono); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============================================ 图表 ============================================ */ .fig { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); padding: .65rem .65rem .45rem; } .fig-t { font-size: .82rem; font-weight: 600; } .fig-s { font-size: .72rem; color: var(--text-3); margin-bottom: .45rem; } .legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .72rem; color: var(--text-2); margin-top: .4rem; } .legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; margin-right: .28rem; vertical-align: -1px; } .chartwrap { position: relative; } .ctip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; font-family: var(--font-mono); font-size: .69rem; line-height: 1.6; box-shadow: var(--shadow-float); white-space: nowrap; opacity: 0; transition: opacity .1s var(--ease); z-index: 4; } .ctip.show { opacity: 1; } /* ============================================ 看板专用 ============================================ */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .7rem; } .tile { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .72rem .82rem; display: flex; flex-direction: column; gap: .12rem; box-shadow: var(--shadow-card); } .tile-k { font-size: .76rem; color: var(--text-3); display: flex; justify-content: space-between; gap: .4rem; align-items: center; } .tile-k em { font-style: normal; font-family: var(--font-mono); font-size: .58rem; border: 1px solid var(--border-light); padding: .04rem .3rem; border-radius: 4px; } .tile-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.45rem; font-weight: 600; line-height: 1.25; } .tile-v small { font-size: .62rem; color: var(--text-3); font-weight: 400; margin-left: .25rem; } .tile-d { font-size: .74rem; color: var(--text-3); line-height: 1.6; margin-top: .12rem; } .up { color: var(--ok); } .down { color: var(--danger); } .chip { display: inline-block; font-family: var(--font-mono); font-size: .6rem; padding: .06rem .36rem; border-radius: 4px; background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--border-light); } .chip.f { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .chip.g { background: var(--brand-light); color: var(--brand); border-color: transparent; } .panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .panel-h { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .55rem .8rem; border-bottom: 1px solid var(--border-light); } .panel-t { font-size: .88rem; font-weight: 600; } .panel-s { font-size: .74rem; color: var(--text-3); flex-basis: 100%; } .panel-b { padding: .7rem .8rem .8rem; } .ctrls { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; } .tg { font-family: var(--font-mono); font-size: .69rem; background: transparent; color: var(--text-2); border: 1px solid var(--border); padding: .2rem .5rem; border-radius: 5px; cursor: pointer; } .tg:hover { background: var(--bg-hover); color: var(--text); } .tg.on { background: var(--brand-light); color: var(--brand); border-color: var(--brand); } .sec { margin-top: 2rem; scroll-margin-top: 4rem; } .sec-h { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: .42rem; margin-bottom: .9rem; } .sec-h .sn { font-family: var(--font-mono); font-size: .68rem; color: var(--accent); letter-spacing: .1em; flex: none; } .sec-h h2 { font-size: 1.12rem; font-weight: 700; } .sec-h .badge { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; color: var(--text-3); border: 1px solid var(--border); padding: .08rem .4rem; border-radius: 4px; } .sec-d { font-size: .87rem; color: var(--text-2); max-width: 46rem; margin-bottom: .9rem; } .banner { margin: 1rem 0 0; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--radius); padding: .72rem .9rem; font-size: .86rem; line-height: 1.75; display: flex; gap: .7rem; align-items: flex-start; } .banner .bi { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; background: var(--warn); color: var(--bg); padding: .1rem .38rem; border-radius: 4px; flex: none; margin-top: .3rem; } .disc { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: 0 var(--radius) var(--radius) 0; padding: .8rem 1rem; font-size: .86rem; line-height: 1.8; } .disc h3 { font-size: .95rem; margin-bottom: .35rem; } .pill { font-family: var(--font-mono); font-size: .68rem; border: 1px solid var(--border); background: var(--bg); padding: .28rem .58rem; border-radius: 999px; color: var(--text-2); white-space: nowrap; } .pill b { color: var(--accent); } .sig-no { color: var(--danger); font-weight: 600; } .sig-yes { color: var(--ok); font-weight: 600; } .fv { font-family: var(--font-mono); font-size: .74rem; color: var(--text-2); } /* ============================================ 各课的专用组件 ============================================ */ /* 第一课：区块链篡改演示 */ .blocks { display: grid; grid-template-columns: 1fr; gap: .65rem; } @media (min-width: 760px) { .blocks { grid-template-columns: repeat(2, 1fr); } } .block { border: 1px solid var(--border); border-top: 3px solid var(--ok); background: var(--bg); border-radius: var(--radius); padding: .65rem .7rem; display: flex; flex-direction: column; gap: .4rem; } .block.bad { border-top-color: var(--danger); background: var(--danger-soft); } .block-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .block-n { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--text-3); } .block-state { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; padding: .08rem .38rem; border-radius: 4px; background: var(--ok-soft); color: var(--ok); } .block.bad .block-state { background: var(--danger); color: #fff; } .block .kv { display: flex; flex-direction: column; gap: .1rem; } .block .kv span { font-family: var(--font-mono); font-size: .59rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .block .kv code { font-size: .72rem; word-break: break-all; color: var(--text-2); } .block input[type=text] { font-size: .79rem; padding: .32rem .42rem; } /* 第一课 / 第三课：字段解剖（区块浏览器、EIP-712 签名、事件日志） */ .exp, .sig { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; } .exp-row, .sig-row { display: grid; grid-template-columns: 8rem 1fr; gap: .55rem; padding: .45rem .7rem; border-bottom: 1px solid var(--border-light); cursor: pointer; align-items: baseline; } .exp-row:last-child, .sig-row:last-child { border-bottom: 0; } .exp-row:hover, .exp-row.on, .sig-row:hover, .sig-row.on { background: var(--brand-light); } .exp-k, .sig-k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .exp-v, .sig-v { font-family: var(--font-mono); font-size: .78rem; word-break: break-all; line-height: 1.6; } .sig-v.danger { color: var(--danger); font-weight: 600; } .exp-why, .sig-why { margin-top: .6rem; border-left: 3px solid var(--brand); background: var(--brand-light); padding: .65rem .85rem; font-size: .88rem; border-radius: 0 var(--radius) var(--radius) 0; min-height: 3.2rem; } .badge-ok { color: var(--ok); font-weight: 600; } /* 第一课：防骗自测 */ .q { border-top: 1px solid var(--border-light); padding-top: .85rem; display: flex; flex-direction: column; gap: .5rem; } .q:first-child { border-top: 0; padding-top: 0; } .q-t { font-size: .94rem; font-weight: 500; line-height: 1.7; } .q-opts { display: flex; flex-direction: column; gap: .32rem; } .opt { text-align: left; font-family: var(--font-sans); font-size: .9rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: .48rem .68rem; border-radius: 6px; line-height: 1.6; } .opt:hover { background: var(--brand-light); opacity: 1; } .opt.right { border-color: var(--ok); background: var(--ok-soft); } .opt.wrong { border-color: var(--danger); background: var(--danger-soft); } .opt[disabled] { opacity: 1; cursor: default; } .opt[disabled]:not(.right):not(.wrong) { color: var(--text-3); border-color: var(--border-light); } .q-fb { font-size: .86rem; color: var(--text-2); line-height: 1.75; display: none; } .q-fb.show { display: block; } /* 第一课：术语表 */ .gl { display: flex; flex-direction: column; } .gl-item { display: grid; grid-template-columns: 1fr; gap: .12rem; padding: .55rem 0; border-bottom: 1px solid var(--border-light); } @media (min-width: 620px) { .gl-item { grid-template-columns: 11rem 1fr; gap: .9rem; align-items: baseline; } } .gl-t { font-weight: 700; font-size: .94rem; } .gl-t em { display: block; font-style: normal; font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); } .gl-d { font-size: .89rem; color: var(--text-2); line-height: 1.75; } /* 第二课：默克尔树 */ .mk { display: flex; flex-direction: column; gap: .35rem; align-items: center; } .mk-row { display: flex; gap: .3rem; justify-content: center; width: 100%; } .mk-n { flex: 1 1 0; min-width: 0; font-family: var(--font-mono); font-size: .6rem; text-align: center; border: 1px solid var(--border); background: var(--bg); border-radius: 5px; padding: .24rem .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .mk-n.path { border-color: var(--s2); background: var(--bg-soft); color: var(--s2); font-weight: 600; } .mk-n.sel { border-color: var(--accent); background: var(--brand-light); color: var(--accent); font-weight: 600; } .mk-n.root { border-color: var(--text); font-weight: 600; } .mk-lbl { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; } /* 第二课：EVM 栈机 */ .vm { display: grid; grid-template-columns: 1fr; gap: .6rem; } @media (min-width: 640px) { .vm { grid-template-columns: 1.1fr 1fr; } } .vm-code { font-family: var(--font-mono); font-size: .76rem; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; } .vm-code div { padding: .2rem .6rem; display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--border-light); } .vm-code div:last-child { border-bottom: 0; } .vm-code div.cur { background: var(--brand-light); color: var(--brand); font-weight: 600; } .vm-code span.g { color: var(--text-3); font-size: .68rem; } .vm-stack { display: flex; flex-direction: column-reverse; gap: .2rem; min-height: 6rem; justify-content: flex-end; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); padding: .5rem; } .vm-stack b { font-family: var(--font-mono); font-size: .76rem; font-weight: 500; background: var(--brand-light); color: var(--brand); border-radius: 4px; padding: .12rem .45rem; text-align: center; } /* 第二课：地址投毒演练 */ .addr-pair { display: grid; grid-template-columns: 1fr; gap: .4rem; } .addrbtn { font-family: var(--font-mono); font-size: .78rem; text-align: left; background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: .48rem .6rem; border-radius: 6px; word-break: break-all; line-height: 1.6; } .addrbtn:hover { background: var(--brand-light); opacity: 1; } .addrbtn.right { border-color: var(--ok); background: var(--ok-soft); } .addrbtn.wrong { border-color: var(--danger); background: var(--danger-soft); } .addrbtn em { font-style: normal; background: var(--warn-soft); color: var(--warn); border-radius: 3px; padding: 0 .1em; } /* 第二课：跟做清单 */ .ck { display: flex; flex-direction: column; } .ck-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--border-light); } .ck-item:last-child { border-bottom: 0; } .ck-item input { width: 1.05rem; height: 1.05rem; margin-top: .4rem; flex: none; } .ck-b { display: flex; flex-direction: column; gap: .12rem; } .ck-t { font-size: .93rem; font-weight: 500; line-height: 1.65; } .ck-d { font-size: .82rem; color: var(--text-3); line-height: 1.7; } .ck-d code { font-size: .76rem; background: var(--bg-soft); border: 1px solid var(--border-light); padding: 0 .25em; border-radius: 4px; } .ck-item.done .ck-t { color: var(--text-3); text-decoration: line-through; } /* 第三课：存储槽 */ .slotbox { display: flex; flex-direction: column; gap: .32rem; } .slot { display: flex; align-items: stretch; gap: .4rem; } .slot-n { font-family: var(--font-mono); font-size: .63rem; color: var(--text-3); width: 3.3rem; flex: none; padding-top: .32rem; } .slot-bar { flex: 1; display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; background: var(--bg); min-height: 1.8rem; } .slot-seg { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .62rem; color: #fff; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--bg); } .slot-seg:last-child { border-right: 0; } .slot-seg.empty { background: var(--border-light); color: var(--text-3); } .varlist { display: flex; flex-direction: column; gap: .28rem; } .varrow { display: flex; gap: .4rem; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .28rem .45rem; font-family: var(--font-mono); font-size: .78rem; } .varrow .sw { width: .7rem; height: .7rem; border-radius: 3px; flex: none; } .varrow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .varrow button { padding: .08rem .36rem; font-size: .68rem; } /* 第三课：攻击日志 */ .log { font-family: var(--font-mono); font-size: .75rem; line-height: 1.85; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); padding: .55rem .65rem; max-height: 15rem; overflow-y: auto; } .log div { padding: .04rem 0; border-bottom: 1px dashed var(--border-light); } .log div:last-child { border-bottom: 0; } .log .d { color: var(--text-3); } .log .a { color: var(--danger); font-weight: 600; } .log .o { color: var(--ok); font-weight: 600; } .log .i { color: var(--accent); } /* 第三课：订单簿深度 */ .depth { display: flex; flex-direction: column; gap: 2px; } .dl { display: grid; grid-template-columns: 5.2rem 1fr 4.6rem; gap: .4rem; align-items: center; font-family: var(--font-mono); font-size: .72rem; } .dl .b { height: 1.05rem; border-radius: 4px; background: var(--border-light); position: relative; overflow: hidden; } .dl .b i { display: block; height: 100%; border-radius: 4px; } .dl .b em { position: absolute; right: 4px; top: 0; font-style: normal; font-size: .62rem; color: var(--text-2); line-height: 1.05rem; } .dl.eaten .b i { opacity: .5; } .dl.eaten { color: var(--danger); } /* ============================================ 「深入」弹窗（shell.js 注入） 正文里放