@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root { --ink:#202820; --muted:#697168; --paper:#f7f6f0; --lime:#d6ff59; --line:#d9ddd2; --card:#fffefa; --serif:'Noto Serif SC', Georgia, serif; --sans:Outfit, 'PingFang SC', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } .grain { position:fixed; inset:0; opacity:.035; pointer-events:none; z-index:3; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.site-header, main, .site-footer { width:min(1120px, calc(100% - 48px)); margin:auto; }.site-header { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; text-decoration:none; letter-spacing:-.02em; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--lime); font:500 13px var(--mono); } nav { display:flex; gap:27px; } nav a, .text-link { color:var(--ink); text-decoration:none; font-size:14px; transition:opacity .2s; } nav a:hover, .text-link:hover { opacity:.55; }
.language-picker select { max-width:132px; padding:5px 22px 5px 7px; border:1px solid var(--line); border-radius:4px; color:var(--muted); background:var(--paper); font:12px var(--sans); cursor:pointer; }
.hero { padding:132px 0 125px; max-width:850px; }.eyebrow { margin:0 0 16px; font:500 11px var(--mono); letter-spacing:.12em; color:var(--muted); }.hero h1, .page-intro h1, .tool-page h1 { margin:0; font:600 clamp(44px, 7vw, 82px)/1.14 var(--serif); letter-spacing:-.065em; }.hero em, .page-intro em, .tool-page em { color:#638034; font-style:normal; }.hero-copy { max-width:470px; margin:28px 0 31px; color:var(--muted); line-height:1.8; font-size:17px; }.hero-actions { display:flex; gap:24px; align-items:center; }.button { border:0; border-radius:2px; padding:13px 18px; font:500 14px var(--sans); text-decoration:none; cursor:pointer; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--ink); color:white; }.button-primary span { padding-left:12px; color:var(--lime); }.button-secondary { background:transparent; color:var(--ink); border:1px solid #bbc2b7; }
.section { padding:70px 0 116px; border-top:1px solid var(--line); }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:34px; }.section-heading h2, .tool-feature h2 { margin:0; font:600 36px/1.2 var(--serif); letter-spacing:-.05em; }.post-list { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); }.post-card { min-height:205px; padding:24px 25px 20px 0; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; border-right:1px solid var(--line); }.post-card:not(:first-child) { padding-left:25px; }.post-card:last-child { border:0; }.post-card p, .post-card span { margin:0; color:var(--muted); font:11px var(--mono); }.post-card h3 { margin:27px 0 auto; font:600 22px/1.45 var(--serif); }.post-card span { color:#55712b; }.empty-state { padding:34px; display:flex; gap:18px; border:1px dashed #c6ccc0; color:var(--muted); }.empty-state span { color:#77954a; }.empty-state p { margin:0; }
.tool-feature { margin:0 -999px; padding:84px max(24px, calc((100vw - 1120px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:80px; background:var(--ink); color:#fff; }.tool-feature h2 { font-size:48px; }.tool-feature .eyebrow { color:#a6b0a0; }.tool-feature-copy { align-self:end; }.tool-feature-copy > p { margin:0 0 24px; max-width:350px; line-height:1.75; color:#c6cec0; }.tool-spotlight { display:flex; align-items:center; gap:14px; padding:18px; color:var(--ink); text-decoration:none; background:var(--lime); }.tool-spotlight strong, .tool-spotlight small { display:block; }.tool-spotlight strong { font-size:16px; }.tool-spotlight small { margin-top:4px; font-size:12px; opacity:.7; }.tool-spotlight b { margin-left:auto; }.tool-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; font:500 12px var(--mono); color:var(--lime); background:var(--ink); }
.page-intro { padding:115px 0 88px; border-bottom:1px solid var(--line); }.page-intro > p:last-child, .tool-lead { max-width:480px; color:var(--muted); font-size:17px; line-height:1.8; }.about { max-width:780px; }.about > p { margin-top:28px; }.tool-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; padding:40px 0 112px; }.tool-card { min-height:176px; display:flex; align-items:flex-start; gap:18px; padding:27px; background:var(--card); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .2s, border-color .2s; }.tool-card:hover { transform:translateY(-4px); border-color:#7e9366; }.tool-card h2 { margin:1px 0 8px; font:600 22px var(--serif); }.tool-card p { margin:0; line-height:1.6; color:var(--muted); font-size:14px; }.tool-card b { margin-left:auto; }.tool-page { padding:94px 0 110px; }.tool-lead { margin:21px 0 36px; }.formatter { background:var(--card); border:1px solid var(--line); box-shadow:10px 10px 0 #e9ecdf; }.formatter-bar { height:53px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; border-bottom:1px solid var(--line); color:var(--muted); font:11px var(--mono); }.formatter-bar i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#8ead58; }.formatter-actions { display:flex; gap:14px; }.formatter-actions button { padding:0; border:0; color:var(--muted); background:transparent; font:11px var(--mono); cursor:pointer; }.formatter textarea { display:block; width:100%; min-height:360px; padding:24px; resize:vertical; border:0; outline:0; background:#fcfcf8; color:#2d392d; font:14px/1.75 var(--mono); }.formatter textarea::placeholder { color:#abb2a8; }.formatter-controls { min-height:75px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:15px; border-top:1px solid var(--line); }.status { margin:0 0 0 auto; color:#66813d; font-size:13px; }.status.is-error { color:#b85442; }.tool-notes { display:grid; grid-template-columns:repeat(3, 1fr); gap:25px; margin-top:75px; }.tool-notes div { border-top:1px solid var(--line); padding-top:16px; }.tool-notes span { color:#6a883d; font:11px var(--mono); }.tool-notes h2 { margin:18px 0 8px; font:600 20px var(--serif); }.tool-notes p { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }.site-footer { display:flex; justify-content:space-between; padding:32px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.site-footer p { margin:0; }.site-footer a { color:inherit; text-decoration:none; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.article { max-width:760px; padding:105px 0 118px; }.article h1 { margin:0; font:600 clamp(42px, 6vw, 68px)/1.2 var(--serif); letter-spacing:-.06em; }.article-lead { margin:22px 0 48px; color:var(--muted); font-size:18px; }.article-content { font-size:17px; line-height:2; }.article-content p { margin:0 0 24px; }.post-list-all { grid-template-columns:1fr; }.post-list-all .post-card { min-height:150px; border-right:0; border-bottom:1px solid var(--line); }
.policy h2 { margin:42px 0 12px; font-size:21px; line-height:1.4; }.policy h2:first-child { margin-top:0; }
.typora-article { max-width:900px; margin:46px auto 80px; padding:54px 76px 78px; background:#fff; border:1px solid #e7e7e7; box-shadow:0 12px 36px rgba(24, 39, 63, .06); color:#333; }.typora-article h1 { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-size:38px; font-weight:650; line-height:1.25; letter-spacing:-.035em; }.typora-article .eyebrow { margin-bottom:20px; color:#8a8a8a; }.typora-article .article-lead { margin:17px 0 45px; padding-bottom:25px; border-bottom:1px solid #eee; color:#777; font-size:16px; line-height:1.75; }.typora-article .article-content { max-width:748px; color:#333; font:16px/1.85 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }.typora-article .article-content p { margin:0 0 1.25em; }.typora-article .article-content h2, .typora-article .article-content h3, .typora-article .article-content h4 { margin:1.8em 0 .78em; color:#222; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight:650; line-height:1.35; }.typora-article .article-content h2 { padding-bottom:.38em; border-bottom:1px solid #eaecef; font-size:1.55em; }.typora-article .article-content h3 { font-size:1.25em; }.typora-article .article-content h4 { font-size:1.06em; }.typora-article .article-content ul, .typora-article .article-content ol { margin:0 0 1.25em; padding-left:1.75em; }.typora-article .article-content li { margin:.38em 0; }.typora-article .article-content a { color:#376fb3; text-decoration:none; border-bottom:1px solid #b8d0eb; }.typora-article .article-content a:hover { color:#194f90; }.typora-article .article-content blockquote { margin:1.45em 0; padding:.65em 1em; border-left:4px solid #d0d7de; background:#f6f8fa; color:#57606a; }.typora-article .article-content blockquote p:last-child { margin-bottom:0; }.typora-article .article-content :not(pre) > code { padding:.15em .38em; border-radius:3px; background:#f1f3f5; color:#c7254e; font:85% "SFMono-Regular", Consolas, "Liberation Mono", monospace; }.typora-article .article-content pre { margin:1.35em 0; padding:17px 19px; overflow:auto; border-radius:6px; background:#282c34; color:#d7dae0; font:13px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", monospace; tab-size:2; }.typora-article .article-content pre code { padding:0; background:transparent; color:inherit; font:inherit; }.typora-article .article-content table { display:block; width:100%; overflow:auto; margin:1.4em 0; border-spacing:0; border-collapse:collapse; }.typora-article .article-content th, .typora-article .article-content td { padding:8px 13px; border:1px solid #dfe2e5; text-align:left; }.typora-article .article-content th { background:#f6f8fa; font-weight:600; }.typora-article .article-content img { display:block; max-width:100%; height:auto; margin:1.5em auto; }.typora-article .article-content hr { height:1px; margin:2.2em 0; border:0; background:#eaecef; }.typora-article .article-ad { margin:0 0 42px; border-color:#e5e7eb; background:#fafafa; box-shadow:none; }
@media (max-width:700px) { .typora-article { margin:0 -16px 42px; padding:35px 24px 54px; border-right:0; border-left:0; box-shadow:none; }.typora-article h1 { font-size:30px; }.typora-article .article-content { font-size:16px; }.typora-article .article-content pre { margin-right:-8px; margin-left:-8px; padding:14px; border-radius:4px; font-size:12px; } }
.article-ad { position:relative; min-height:108px; margin:0 0 40px; padding:20px 12px 12px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#fafbfc; }.article-ad .ad-label { position:absolute; top:6px; left:10px; color:#9aa3b2; font-size:10px; letter-spacing:.08em; }
@media (max-width:700px) { .site-header, main, .site-footer { width:min(100% - 32px, 1120px); }.site-header { height:72px; } nav { gap:15px; } nav a { font-size:13px; }.hero { padding:88px 0 80px; }.hero h1, .page-intro h1, .tool-page h1 { font-size:45px; }.hero-copy { font-size:15px; }.section { padding:56px 0 78px; }.section-heading h2 { font-size:29px; }.post-list, .tool-feature, .tool-notes { grid-template-columns:1fr; }.post-card, .post-card:not(:first-child) { min-height:150px; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }.tool-feature { gap:44px; padding-top:62px; padding-bottom:62px; }.tool-feature h2 { font-size:40px; }.page-intro { padding:76px 0 65px; }.tool-grid { grid-template-columns:1fr; padding:28px 0 74px; }.tool-page { padding:68px 0 72px; }.formatter textarea { min-height:300px; padding:17px; font-size:12px; }.status { width:100%; margin-left:0; order:2; }.site-footer { gap:18px; align-items:flex-start; flex-direction:column; } }

/* 首页改为信息优先的紧凑布局 */
:root { --ink:#172033; --muted:#687386; --paper:#ffffff; --line:#e4e8ee; --card:#ffffff; --serif:Outfit, 'PingFang SC', sans-serif; --sans:Outfit, 'PingFang SC', sans-serif; }
.site-header { height:68px; }.brand-mark { width:25px; height:25px; border-radius:5px; background:#2563eb; color:#fff; }.site-footer { padding:24px 0; }.page-intro, .tool-page { padding-top:72px; }.page-intro h1, .tool-page h1, .article h1 { letter-spacing:-.04em; }.page-intro em, .tool-page em, .hero em { color:#2563eb; }.tool-feature { background:#f8fafc; color:var(--ink); }.tool-feature .eyebrow, .tool-feature-copy > p { color:var(--muted); }.tool-spotlight { border:1px solid var(--line); background:#fff; }.tool-icon { border-radius:5px; background:#eff6ff; color:#2563eb; }.button-primary { background:#2563eb; }.button-primary span { color:#dbeafe; }
.home-overview { display:grid; grid-template-columns:minmax(280px, .82fr) minmax(480px, 1.18fr); gap:64px; padding:56px 0 82px; }.intro-inline { padding-top:7px; }.intro-inline h1 { margin:0; font-size:clamp(28px, 3.4vw, 44px); line-height:1.3; letter-spacing:-.045em; }.intro-inline em { color:#2563eb; font-style:normal; }.intro-inline > p:last-child { max-width:360px; margin:20px 0 0; color:var(--muted); font-size:15px; line-height:1.85; }.home-highlights { display:grid; gap:20px; }.home-panel { border:1px solid var(--line); border-radius:8px; overflow:hidden; }.panel-heading { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); background:#fafbfc; }.panel-heading h2 { margin:0; font-size:15px; letter-spacing:0; }.panel-heading a { color:#2563eb; text-decoration:none; font-size:13px; }.home-post, .home-tool { display:flex; align-items:center; gap:16px; padding:15px 18px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }.home-post:last-child { border-bottom:0; }.home-post:hover, .home-tool:hover { background:#f8fafc; }.home-post span { width:82px; color:var(--muted); font:11px var(--mono); }.home-post strong, .home-tool strong { font-size:15px; }.home-post b, .home-tool b { margin-left:auto; font-weight:400; color:#2563eb; }.home-tool { border-bottom:0; }.home-tool > span { display:grid; place-items:center; width:34px; height:34px; border-radius:5px; color:#2563eb; background:#eff6ff; font:12px var(--mono); }.home-tool small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.muted { margin:16px 18px; color:var(--muted); font-size:14px; }
.editor { display:grid; grid-template-columns:52px minmax(0,1fr); min-height:360px; background:#fcfcf8; }.line-numbers { margin:0; padding:24px 10px; overflow:hidden; border-right:1px solid #edf0e9; color:#a5ada1; background:#f5f6f1; text-align:right; white-space:pre; font:14px/1.75 var(--mono); user-select:none; }.formatter .editor textarea { min-width:0; min-height:360px; padding-left:18px; background:transparent; }.formatter .editor textarea:focus { box-shadow:inset 2px 0 #b7d87e; }
@media (max-width:700px) { .home-overview { grid-template-columns:1fr; gap:34px; padding:42px 0 60px; }.intro-inline h1 { font-size:30px; }.home-post span { width:75px; }.home-panel { border-radius:6px; } }