/* 阅读优先的极简主题。无框架、无字体文件、无 JS 依赖，首屏最快。 */
:root{
  --bg:#fbfaf8; --fg:#1b1a18; --muted:#6b6862; --line:#e6e2db;
  --accent:#8a4b2a; --accent-soft:#f3ece6; --card:#fff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#141311;--fg:#e8e4dd;--muted:#9a948a;--line:#2c2a26;
        --accent:#d99a6c;--accent-soft:#241f1a;--card:#1b1a17;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
     font-size:17px;line-height:1.75;text-rendering:optimizeLegibility}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.15rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

header.site{border-bottom:1px solid var(--line);padding:1.1rem 0;margin-bottom:2rem}
header.site .row{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
header.site .brand{font-family:var(--serif);font-size:1.32rem;font-weight:700;color:var(--fg)}
header.site .tag{color:var(--muted);font-size:.83rem}
nav.site{margin-left:auto;display:flex;gap:1rem;font-size:.9rem}
nav.site a{color:var(--muted)}

h1{font-family:var(--serif);font-size:1.72rem;line-height:1.4;margin:.2rem 0 .6rem}
h2{font-family:var(--serif);font-size:1.24rem;margin:2.3rem 0 .7rem;padding-top:.2rem}
h3{font-size:1.05rem;margin:1.6rem 0 .5rem}
p{margin:0 0 1.05rem}
ul,ol{padding-left:1.3rem}
li{margin:.32rem 0}
blockquote{margin:1.2rem 0;padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--line);color:var(--muted)}
code{font-family:var(--mono);font-size:.88em;background:var(--accent-soft);padding:.1em .35em;border-radius:3px}
pre{background:var(--accent-soft);padding:.9rem 1rem;border-radius:8px;overflow-x:auto}
pre code{background:none;padding:0}
table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left}
th{background:var(--accent-soft)}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

.meta{color:var(--muted);font-size:.85rem;margin-bottom:1.6rem}
.meta .dot{margin:0 .45rem}
.tags a{display:inline-block;font-size:.78rem;color:var(--muted);background:var(--accent-soft);
        padding:.12rem .5rem;border-radius:999px;margin:0 .3rem .3rem 0}

.list{list-style:none;padding:0;margin:0}
.list li{padding:1.15rem 0;border-bottom:1px solid var(--line);margin:0}
.list h2{font-size:1.13rem;margin:0 0 .3rem;padding:0}
.list .sub{color:var(--muted);font-size:.9rem;margin:0}
.list .when{color:var(--muted);font-size:.78rem;font-family:var(--mono)}

.takeaway{background:var(--accent-soft);border-radius:10px;padding:.85rem 1.05rem;
          margin:1.4rem 0;font-size:.95rem}
.takeaway b{color:var(--accent)}
.srcbox{font-size:.85rem;color:var(--muted);border:1px solid var(--line);
        border-radius:10px;padding:.85rem 1.05rem;margin:2rem 0}
.srcbox ol{margin:.4rem 0 0;padding-left:1.2rem}
.support{border:1px dashed var(--line);border-radius:10px;padding:1rem 1.1rem;margin:2.4rem 0;
         font-size:.9rem;color:var(--muted)}
.support .btn{display:inline-block;margin-top:.55rem;background:var(--accent);color:#fff;
              padding:.42rem .95rem;border-radius:999px;font-size:.86rem}
.support .btn:hover{text-decoration:none;opacity:.9}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem;margin:1.4rem 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.95rem 1.05rem}
.card h3{margin:0 0 .3rem;font-size:1rem}
.card p{margin:0;color:var(--muted);font-size:.87rem}

footer.site{border-top:1px solid var(--line);margin-top:3.5rem;padding:1.6rem 0 3rem;
            color:var(--muted);font-size:.83rem}
footer.site a{color:var(--muted)}

.tool label{display:block;font-size:.86rem;color:var(--muted);margin:.9rem 0 .3rem}
.tool textarea,.tool input,.tool select{width:100%;font-family:var(--mono);font-size:.9rem;
  padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.tool textarea{min-height:8rem;resize:vertical}
.tool button{margin-top:.9rem;background:var(--accent);color:#fff;border:0;padding:.55rem 1.1rem;
  border-radius:999px;font-size:.92rem;cursor:pointer}
.tool .out{margin-top:1rem;white-space:pre-wrap;font-family:var(--mono);font-size:.86rem;
  background:var(--accent-soft);padding:.85rem 1rem;border-radius:8px;min-height:2.5rem;overflow-x:auto}
/* 空结果区给一句提示，别让人对着一条空灰条发呆。
   文案放在这里而不是每个工具的 HTML 里：工具定义不该携带界面文案。 */
.tool .out:empty::before{content:"结果会显示在这里";color:var(--muted);font-family:var(--sans)}
html[lang="en"] .tool .out:empty::before{content:"Results will appear here"}
.tool .row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.tool .row>div{flex:1 1 12rem}

/* 页面顶部的示意图。工具站全是文字太单调，而限制酶的错位切割、
   密码子的简并规律这类概念本身就是图。只用 currentColor 与主题变量上色，
   暗色模式下自动跟随，不写死颜色。 */
.fig{margin:1.4rem 0 1.6rem;padding:1.1rem 1rem;background:var(--accent-soft);
     border-radius:10px;overflow-x:auto}
.fig svg{display:block;margin:0 auto;max-width:100%;height:auto}
.fig figcaption{margin-top:.7rem;color:var(--muted);font-size:.82rem;text-align:center}
.fig .lbl{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.fig .seq{font-family:var(--mono);font-size:15px;fill:var(--fg);letter-spacing:.06em}
.fig .hi{fill:var(--accent)}
.fig .ln{stroke:var(--fg);stroke-width:1.6;fill:none}
.fig .cut{stroke:var(--accent);stroke-width:2;fill:none}
.fig .bar{fill:var(--accent)}
.fig .bar.neg{fill:var(--muted)}
.fig .axis{stroke:var(--line);stroke-width:1}

/* 工具卡片的分组图标：给同质的卡片一点视觉区分 */
.card{position:relative}
.card .ico{width:22px;height:22px;display:block;margin-bottom:.5rem;color:var(--accent);opacity:.85}

/* 首页的「站内有什么」。四个真实数字，同时是四条入口——
   原来首页从标题直接掉进文章流，没有任何东西告诉人这站还有别的。 */
.stats{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 2rem}
.stats a{flex:1 1 7rem;background:var(--card);border:1px solid var(--line);
         border-radius:10px;padding:.75rem .5rem;text-align:center;color:var(--fg);
         text-decoration:none}
.stats a:hover{border-color:var(--accent);text-decoration:none}
.stats strong{display:block;font-size:1.5rem;line-height:1.15;color:var(--accent);
              font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* 首页文章条目的主题标记。混主题的信息流里，一眼分不出哪条属于哪个方向；
   加一个小标签既帮扫读，也让整片文字有了节奏。 */
.list .when .chip{margin-left:.55rem;padding:.05rem .45rem;border:1px solid var(--line);
  border-radius:999px;color:var(--muted);font-size:.72rem;text-decoration:none}
.list .when .chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}