/* ============================================================
   Graphite — 博客主主题 (2026-11-08)
   只作用于 html[data-scene="graphite"]; 旧场景 (deepsea/daylight/rain/lain) 不受影响。
   形状规则: 代码窗口 8px; 其余容器/按钮直角 0; 行内代码 2px。
   ============================================================ */

html[data-scene="graphite"]{
  color-scheme: dark;
  --g-bg:#161917;
  --g-raised:#1d201e;
  --g-hover:#252e28;
  --g-rule:#3b453e;
  --g-control-rule:#68776b;
  --g-rule-soft:#242a26;
  --g-ink:#dde1db;
  --g-ink-2:#a8b1aa;
  --g-ink-3:#848e87;
  --g-accent:#9cc5a8;
  --g-meta:#c2a878;
  --g-accent-dim:rgba(156,197,168,.3);
  --g-code-bg:#111413;
  --g-tk-key:#7cb7f0;
  --g-tk-str:#d69a7a;
  --g-tk-com:#93aa8b;
  --g-tk-num:#a9c98f;
  --g-tk-fn:#dcc98a;
  --g-font-display:'Noto Serif SC','Source Han Serif SC','Songti SC',SimSun,Georgia,serif;
  --g-font-body:'Segoe UI Variable Text','Segoe UI',system-ui,'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --g-font-mono:'Fira Code','Cascadia Mono','SFMono-Regular',Consolas,'Courier New',monospace;
  --g-wrap:1200px;
  --g-measure:820px;
  --g-dur:160ms;
  --g-ease:cubic-bezier(.2,0,0,1);
}

html[data-scene="graphite"][data-g="light"]{
  color-scheme: light;
  --g-bg:#f7f5ef;
  --g-raised:#fcfaf5;
  --g-hover:#e9eee5;
  --g-rule:#d6dbd1;
  --g-control-rule:#858f80;
  --g-rule-soft:#ebeee7;
  --g-ink:#2c322e;
  --g-ink-2:#545e57;
  --g-ink-3:#65706a;
  --g-accent:#3f6d55;
  --g-meta:#8a6537;
  --g-accent-dim:rgba(63,109,85,.2);
  --g-code-bg:#efeee7;
  --g-tk-key:#2f5fa8;
  --g-tk-str:#a14f38;
  --g-tk-com:#46683e;
  --g-tk-num:#3c753c;
  --g-tk-fn:#7a5c26;
}

/* ---------- 旧场景 chrome 在石墨页面上全部让位 ---------- */
html[data-scene="graphite"] body.g-page .preloader,
html[data-scene="graphite"] body.g-page .bg-layers,
html[data-scene="graphite"] body.g-page .particle-ocean,
html[data-scene="graphite"] body.g-page .sparkle-layer,
html[data-scene="graphite"] body.g-page .navbar,
html[data-scene="graphite"] body.g-page .site-footer,
html[data-scene="graphite"] body.g-page .back-to-top,
html[data-scene="graphite"] body.g-page .legacy-home,
html[data-scene="graphite"] body.g-page .legacy-post,
html[data-scene="graphite"] body.g-page .lain-atmo,
html[data-scene="graphite"] body.g-page .lain-wires,
html[data-scene="graphite"] body.g-page .lain-rain,
html[data-scene="graphite"] body.g-page .lain-crt,
html[data-scene="graphite"] body.g-page .lain-hud,
html[data-scene="graphite"] body.g-page .reading-progress,
html[data-scene="graphite"] body.g-page .article-back { display:none !important; }

.g-home, .g-post { display:none; }
html[data-scene="graphite"] .g-home,
html[data-scene="graphite"] .g-post { display:block; }

html[data-scene="graphite"] body.g-page{
  margin:0;
  background:var(--g-bg);
  color:var(--g-ink);
  font:400 15.5px/1.75 var(--g-font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[data-scene="graphite"] .g-home a,
html[data-scene="graphite"] .g-post a{ color:inherit; text-decoration:none; }
html[data-scene="graphite"] .g-home a:focus-visible,
html[data-scene="graphite"] .g-post a:focus-visible,
html[data-scene="graphite"] .g-home button:focus-visible,
html[data-scene="graphite"] .g-post button:focus-visible{ outline:1px solid var(--g-accent); outline-offset:3px; }
html[data-scene="graphite"] ::selection{ background:var(--g-accent-dim); color:var(--g-ink); }

/* 旧版顶部「新版」入口 */
.nav-new-theme{
  display:inline-flex; align-items:center; height:30px; padding:0 13px;
  border:1px solid rgba(142,208,232,.35); border-radius:50px;
  color:var(--accent); font-family:var(--font-display); font-size:.7rem;
  letter-spacing:.08em; text-decoration:none; white-space:nowrap;
}
.nav-new-theme:hover{ background:rgba(142,208,232,.1); border-color:var(--accent); }
@media (max-width:768px){
  .nav-auth .nav-new-theme{ display:none; }
}

/* 旧版首页里的「新版主题」入口 (只在 legacy-home 内) */
.legacy-home .legacy-switch,
.legacy-post .legacy-switch{
  appearance:none; background:transparent; border:0; cursor:pointer;
  display:inline-block; margin-top:22px; padding:0 0 2px;
  font:500 11px/1.6 'Cascadia Mono',Consolas,monospace; letter-spacing:.06em;
  color:rgba(216,234,248,.75); border-bottom:1px solid rgba(142,208,232,.3);
}
.legacy-home .legacy-switch:hover,
.legacy-post .legacy-switch:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- 顶栏 ---------- */
html[data-scene="graphite"] .g-bar{
  position:sticky; top:0; z-index:20;
  background:var(--g-bg); border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-bar-in{
  max-width:var(--g-wrap); margin:0 auto; padding:0 28px; height:58px;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
html[data-scene="graphite"] .g-mark{ display:flex; align-items:baseline; gap:9px; flex:none; }
html[data-scene="graphite"] .g-mark b{ font:600 .82rem/1 var(--g-font-mono); letter-spacing:.02em; color:var(--g-ink); }
html[data-scene="graphite"] .g-mark i{ font-style:normal; font:400 .8rem/1 var(--g-font-mono); color:var(--g-accent); }
html[data-scene="graphite"] .g-mark span{ font-family:var(--g-font-display); font-size:.98rem; color:var(--g-ink-2); }
html[data-scene="graphite"] .g-nav{ display:flex; gap:22px; margin-left:auto; }
html[data-scene="graphite"] .g-nav a{ font-size:.82rem; color:var(--g-ink-2); padding:4px 0; border-bottom:1px solid transparent; }
html[data-scene="graphite"] .g-nav a:hover{ color:var(--g-ink); border-bottom-color:var(--g-accent-dim); }
html[data-scene="graphite"] .g-actions{ display:flex; align-items:center; gap:12px; flex:none; }
html[data-scene="graphite"] .g-menu-btn{
  display:none; appearance:none; background:transparent;
  border:1px solid var(--g-control-rule); color:var(--g-ink-2);
  padding:6px 9px; font:500 9.5px/1.2 var(--g-font-mono); letter-spacing:.08em; cursor:pointer;
}
/* 无 JS 时下拉打不开，不留一个点不动的按钮 */
html:not(.js)[data-scene="graphite"] .g-menu-btn{ display:none; }
html[data-scene="graphite"] .g-old{
  appearance:none; border:0; background:transparent; padding:0; cursor:pointer;
  font:500 10.5px/1.4 var(--g-font-mono); letter-spacing:.04em; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-old:hover{ color:var(--g-accent); }
html[data-scene="graphite"] .g-mode{ display:flex; gap:1px; border:1px solid var(--g-control-rule); padding:2px; }
html[data-scene="graphite"] .g-mode button{
  appearance:none; border:0; background:transparent; color:var(--g-ink-3);
  padding:5px 9px; font:500 9.5px/1.2 var(--g-font-mono); letter-spacing:.08em; cursor:pointer;
}
html[data-scene="graphite"] .g-mode button[aria-pressed="true"]{ background:var(--g-accent); color:var(--g-bg); }
html[data-scene="graphite"] .g-login{ font:500 10.5px/1.4 var(--g-font-mono); color:var(--g-ink-2); }
html[data-scene="graphite"] .g-login:hover{ color:var(--g-accent); }

/* 搜索 */
html[data-scene="graphite"] .g-search{ position:relative; }
html[data-scene="graphite"] .g-search input{
  width:150px; height:28px; padding:0 9px;
  background:transparent; color:var(--g-ink); border:1px solid var(--g-control-rule);
  border-radius:2px; font:400 11.5px/1.2 var(--g-font-body);
}
html[data-scene="graphite"] .g-search input::placeholder{ color:var(--g-ink-3); }
html[data-scene="graphite"] .g-search input:focus{ outline:1px solid var(--g-accent); outline-offset:0; border-color:transparent; }
html[data-scene="graphite"] .g-search-results{
  display:none; position:absolute; right:0; top:34px; width:320px; max-height:360px; overflow-y:auto;
  background:var(--g-raised); border:1px solid var(--g-control-rule); z-index:30;
}
html[data-scene="graphite"] .g-search-results.is-open{ display:block; }
html[data-scene="graphite"] .g-sr-item{ display:block; padding:10px 12px; border-bottom:1px solid var(--g-rule-soft); }
html[data-scene="graphite"] .g-sr-item:last-child{ border-bottom:0; }
html[data-scene="graphite"] .g-sr-item:hover{ background:var(--g-hover); }
html[data-scene="graphite"] .g-sr-title{ font-size:.86rem; color:var(--g-ink); }
html[data-scene="graphite"] .g-sr-meta{ margin-top:3px; font:500 10px/1.5 var(--g-font-mono); letter-spacing:.04em; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-sr-empty{ margin:0; padding:12px; font-size:.8rem; color:var(--g-ink-3); }

/* ---------- 页面骨架 ---------- */
html[data-scene="graphite"] .g-main{ max-width:var(--g-wrap); margin:0 auto; padding:0 28px 24px; }

/* 锚点避开 58px 粘性顶栏 */
html[data-scene="graphite"] .g-masthead,
html[data-scene="graphite"] .g-sec,
html[data-scene="graphite"] .g-article h2,
html[data-scene="graphite"] .g-article h3{ scroll-margin-top:76px; }

/* ---------- 首页报头 ---------- */
html[data-scene="graphite"] .g-masthead{
  display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:60px; align-items:start;
  padding:72px 0 54px; border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-masthead h1{
  margin:0 0 22px; max-width:20ch;
  font-family:var(--g-font-display); font-weight:600;
  font-size:clamp(2.3rem,5.2vw,3.3rem); line-height:1.18; letter-spacing:.005em; text-wrap:balance;
}
html[data-scene="graphite"] .g-lede{
  margin:0; max-width:24em; color:var(--g-ink-2);
  font-family:var(--g-font-display); font-size:1.08rem; line-height:1.9; letter-spacing:.005em;
}
html[data-scene="graphite"] .g-lede + .g-lede{ margin-top:14px; }
html[data-scene="graphite"] .g-attr{
  margin:10px 0 0; font:500 10.5px/1.6 var(--g-font-mono);
  letter-spacing:.06em; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-lede em{ font-style:normal; color:var(--g-ink); }
html[data-scene="graphite"] .g-links{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px;
  font:500 11.5px/1.6 var(--g-font-mono); color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-links a:hover{ color:var(--g-accent); }
html[data-scene="graphite"] .g-links a::after{ content:" ↗"; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-links a.mail::after{ content:""; }

html[data-scene="graphite"] .g-spotlight{ padding-left:32px; border-left:1px solid var(--g-rule-soft); }
html[data-scene="graphite"] .g-spotlight .label{
  margin:0 0 16px; padding-bottom:9px; border-bottom:1px solid var(--g-rule-soft);
  font:500 10.5px/1.5 var(--g-font-mono); letter-spacing:.06em; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-spotlight h2{
  margin:0 0 12px; font-family:var(--g-font-display); font-size:1.68rem; font-weight:600;
  line-height:1.42; letter-spacing:.005em;
}
html[data-scene="graphite"] .g-spotlight:hover h2{ color:var(--g-accent); }
html[data-scene="graphite"] .g-spotlight p{ margin:0 0 14px; font-size:.9rem; line-height:1.9; color:var(--g-ink-2); }
html[data-scene="graphite"] .g-spotlight .g-spot-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0; }
html[data-scene="graphite"] .g-spotlight .g-meta{ font:500 10.5px/1.6 var(--g-font-mono); color:var(--g-meta); }
html[data-scene="graphite"] .g-spotlight .g-more{ font:500 10.5px/1.6 var(--g-font-mono); color:var(--g-ink-3); }
html[data-scene="graphite"] .g-spotlight:hover .g-more{ color:var(--g-accent); }

/* 报头：暖灰纸面与灰绿分区；深浅档共用字阶与留白。 */
html[data-scene="graphite"] .g-home .g-masthead{
  --g-mast-paper:#1e2320;
  --g-mast-panel:#28322b;
  --g-mast-meta:var(--g-meta);
  gap:48px;
  padding:80px 32px 64px;
  background:var(--g-mast-paper);
  border-bottom:0;
}
html[data-scene="graphite"][data-g="light"] .g-home .g-masthead{
  --g-mast-paper:#f4efe4;
  --g-mast-panel:#e6ebdf;
  --g-mast-meta:#7a5b30;
}
html[data-scene="graphite"] .g-home .g-masthead h1{
  margin-bottom:32px;
  font-size:clamp(2.5rem,4.2vw,3.5rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
}
html[data-scene="graphite"] .g-home .g-masthead .g-lede{
  max-width:28em;
  font-size:1.25rem;
  line-height:1.8;
  letter-spacing:0;
}
html[data-scene="graphite"] .g-home .g-masthead .g-lede em{ color:inherit; }
html[data-scene="graphite"] .g-home .g-masthead .g-attr{
  margin-top:16px;
  font-size:11px;
  line-height:1.8;
  letter-spacing:.03em;
  color:var(--g-meta);
}
html[data-scene="graphite"] .g-home .g-masthead .g-links{
  margin-top:32px;
  gap:8px 24px;
  line-height:1.8;
}
html[data-scene="graphite"] .g-home .g-masthead .g-links a:is(:hover,:focus-visible){
  color:var(--g-accent);
  text-decoration:underline;
  text-underline-offset:4px;
}
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight{
  position:relative;
  padding:24px;
  background:var(--g-mast-panel);
  border:0;
}
/* 仅在选中主推文章入口时描亮顶边；减少动态效果时沿用静态终点。 */
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:var(--g-accent); pointer-events:none;
  transform:scaleX(0); transform-origin:left center;
}
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight:focus-visible::before{ transform:scaleX(1); }
@media (hover:hover){
  html[data-scene="graphite"] .g-home .g-masthead .g-spotlight:hover::before{ transform:scaleX(1); }
}
@media (prefers-reduced-motion:no-preference){
  html[data-scene="graphite"] .g-home .g-masthead .g-spotlight:is(:hover,:focus-visible)::before{
    transition:transform 440ms var(--g-ease);
  }
}
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight .g-more{ color:var(--g-ink-2); }
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight .g-meta{ color:var(--g-mast-meta); }
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight .label{
  margin-bottom:24px;
  padding-bottom:0;
  border-bottom:0;
  letter-spacing:.08em;
  color:var(--g-mast-meta);
}
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight h2{
  margin-bottom:16px;
  font-size:1.75rem;
  line-height:1.5;
  font-weight:500;
}
html[data-scene="graphite"] .g-home .g-masthead .g-spotlight:is(:hover,:focus-visible) h2{
  color:var(--g-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}

/* ---------- 区块 ---------- */
html[data-scene="graphite"] .g-sec{ padding-top:54px; }
html[data-scene="graphite"] .g-sec-head{ display:flex; align-items:baseline; gap:14px; }
html[data-scene="graphite"] .g-sec-head h2{
  margin:0; font:600 11px/1 var(--g-font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--g-ink-2);
}
html[data-scene="graphite"] .g-sec-head .g-rule{ flex:1; height:1px; background:var(--g-rule-soft); }
html[data-scene="graphite"] .g-sec-head .g-count{ font:500 11px/1 var(--g-font-mono); color:var(--g-meta); letter-spacing:.04em; }

/* ---------- 记录账本 ---------- */
html[data-scene="graphite"] .g-ledger{ margin-top:12px; border-top:1px solid var(--g-rule-soft); }
html[data-scene="graphite"] .g-row{
  display:grid; align-items:baseline; column-gap:20px;
  grid-template-columns:58px 92px minmax(0,1fr) auto;
  grid-template-areas:"no date title cat";
  padding:16px 10px; border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-row:hover{ background:var(--g-hover); }
html[data-scene="graphite"] .g-row .g-no{ grid-area:no; font:500 11px/1.6 var(--g-font-mono); color:var(--g-accent); opacity:.85; letter-spacing:.03em; }
html[data-scene="graphite"] .g-row time{ grid-area:date; font:500 11.5px/1.6 var(--g-font-mono); color:var(--g-ink-3); }
html[data-scene="graphite"] .g-row h3{ grid-area:title; margin:0; font:500 1rem/1.55 var(--g-font-body); color:var(--g-ink); }
html[data-scene="graphite"] .g-row:hover h3{ color:var(--g-accent); }
html[data-scene="graphite"] .g-row .g-cat{ grid-area:cat; font:500 10.5px/1.6 var(--g-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--g-meta); }

/* ---------- 荣誉账本 ---------- */
html[data-scene="graphite"] .g-home .g-honors{ margin:12px 0 0; padding:0; list-style:none; }
html[data-scene="graphite"] .g-home .g-honor-row{
  display:grid; grid-template-columns:92px minmax(0,1fr) auto;
  grid-template-areas:"date title rank"; align-items:baseline; column-gap:20px;
  margin:0; padding:16px 10px; border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-home .g-honor-row time{ grid-area:date; font:500 11.5px/1.6 var(--g-font-mono); color:var(--g-ink-3); }
html[data-scene="graphite"] .g-home .g-honor-body{ grid-area:title; min-width:0; overflow-wrap:anywhere; }
html[data-scene="graphite"] .g-home .g-honor-body h3{ margin:0; font:500 1rem/1.55 var(--g-font-body); color:var(--g-ink); }
html[data-scene="graphite"] .g-home .g-honor-note{ margin:4px 0 0; font-size:.86rem; line-height:1.8; color:var(--g-ink-2); }
html[data-scene="graphite"] .g-home .g-honor-rank{ grid-area:rank; font:500 .82rem/1.6 var(--g-font-body); color:var(--g-meta); }

/* ---------- 专题 / 项目 / 关于 ---------- */
html[data-scene="graphite"] .g-topic{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px;
  padding:24px 10px; border-top:1px solid var(--g-rule-soft); border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-topic h3{ margin:0; font-family:var(--g-font-display); font-size:1.22rem; font-weight:600; line-height:1.4; }
html[data-scene="graphite"] .g-topic:hover h3{ color:var(--g-accent); }
html[data-scene="graphite"] .g-topic p{ margin:7px 0 0; max-width:58ch; color:var(--g-ink-2); font-size:.88rem; line-height:1.8; }
html[data-scene="graphite"] .g-topic .g-meta{ align-self:center; text-align:right; font:500 11px/1.9 var(--g-font-mono); color:var(--g-ink-3); white-space:nowrap; }

html[data-scene="graphite"] .g-work{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px;
  padding:18px 10px; border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-work:hover{ background:var(--g-hover); }
html[data-scene="graphite"] .g-work h3{ margin:0; font:500 .97rem/1.6 var(--g-font-body); }
html[data-scene="graphite"] .g-work:hover h3{ color:var(--g-accent); }
html[data-scene="graphite"] .g-work p{ margin:4px 0 0; max-width:62ch; color:var(--g-ink-2); font-size:.86rem; line-height:1.8; }
html[data-scene="graphite"] .g-work .g-meta{ align-self:center; text-align:right; font:500 10.5px/1.9 var(--g-font-mono); color:var(--g-ink-3); white-space:nowrap; }
html[data-scene="graphite"] .g-home .g-work-illustrated{
  grid-template-columns:7rem minmax(0,1fr) auto;
  grid-template-areas:"drawing copy meta";
  align-items:center; column-gap:clamp(1rem,2.5vw,2rem);
}
html[data-scene="graphite"] .g-home .g-work-illustrated .g-work-copy{ grid-area:copy; }
html[data-scene="graphite"] .g-home .g-work-illustrated .g-meta{ grid-area:meta; }
html[data-scene="graphite"] .g-home .g-work-drawing{
  grid-area:drawing; display:block; border:1px solid var(--g-rule); background:var(--g-raised);
}
html[data-scene="graphite"][data-g="light"] .g-home .g-work-drawing img{ filter:brightness(.57); }
html[data-scene="graphite"] .g-home :is(.g-work-drawing,.g-about-portrait) img{
  display:block; width:100%; height:auto;
}

html[data-scene="graphite"] .g-about-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:52px; padding-top:22px; }
html[data-scene="graphite"] .g-about-grid p{ margin:0 0 14px; color:var(--g-ink-2); font-size:.9rem; line-height:1.95; max-width:52ch; }
html[data-scene="graphite"] .g-about-grid p strong{ color:var(--g-ink); font-weight:500; }
html[data-scene="graphite"] .g-contact dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:.85rem; }
html[data-scene="graphite"] .g-contact dt{ font:500 10.5px/1.9 var(--g-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-contact dd{ margin:0; color:var(--g-ink-2); }
html[data-scene="graphite"] .g-contact dd a:hover{ color:var(--g-accent); }
html[data-scene="graphite"] .g-home .g-about-portrait{ width:min(100%,15.5rem); margin:1.25rem 0 0; }
html[data-scene="graphite"] .g-home .g-about-portrait figcaption{
  margin-top:.4rem; font:400 .72rem/1.5 var(--g-font-mono);
  text-align:center; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-home .g-about-portrait a:is(:hover,:focus-visible){
  color:var(--g-accent); text-decoration:underline;
}
html[data-scene="graphite"] .g-focus{ margin-top:22px; font:500 11px/2 var(--g-font-mono); color:var(--g-ink-3); }
html[data-scene="graphite"] .g-focus b{ display:block; font-weight:500; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; color:var(--g-ink-3); }

/* ---------- 友链 ---------- */
html[data-scene="graphite"] .g-home .g-friends{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; margin:12px 0 0; padding:0; list-style:none; border-top:1px solid var(--g-rule-soft); }
html[data-scene="graphite"] .g-home .g-friends > li{ margin:0; }
html[data-scene="graphite"] .g-home .g-friend{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
  grid-template-areas:"name detail arrow"; align-items:baseline; column-gap:20px;
  padding:12px 10px; border-bottom:1px solid var(--g-rule-soft);
}
html[data-scene="graphite"] .g-home .g-friend-name{
  grid-area:name; min-width:0; overflow-wrap:anywhere;
  font:500 .97rem/1.6 var(--g-font-body); color:var(--g-ink);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
}
html[data-scene="graphite"] .g-home .g-friend-detail{ grid-area:detail; min-width:0; overflow-wrap:anywhere; font-size:.82rem; line-height:1.8; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-home .g-friend-arrow{ grid-area:arrow; font-size:.9rem; line-height:1.6; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-home .g-friend:is(:hover,:focus-visible){ background:var(--g-hover); }
html[data-scene="graphite"] .g-home .g-friend:is(:hover,:focus-visible) .g-friend-name{ color:var(--g-accent); text-decoration-color:var(--g-accent); }
html[data-scene="graphite"] .g-home .g-friend:is(:hover,:focus-visible) .g-friend-arrow{ color:var(--g-accent); }

/* ---------- 页脚 ---------- */
html[data-scene="graphite"] .g-foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  margin-top:72px; padding:24px 0 30px; border-top:1px solid var(--g-rule-soft);
  font-size:12px; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-foot a:hover{ color:var(--g-accent); }
html[data-scene="graphite"] .g-foot .beian{ font-family:var(--g-font-mono); font-size:11px; }

/* ---------- 阅读页 ---------- */
/* 阅读进度：纯 CSS 滚动驱动；不支持 animation-timeline 的浏览器不显示 */
@supports (animation-timeline: scroll(root block)){
  html[data-scene="graphite"] .g-post .g-progress{
    position:fixed; top:0; left:0; width:100%; height:2px; z-index:40;
    background:var(--g-accent); transform-origin:0 50%; transform:scaleX(0);
    animation:g-progress-grow linear both;
    animation-timeline:scroll(root block);
    pointer-events:none;
  }
  @keyframes g-progress-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}
html[data-scene="graphite"] .g-post .g-art-layout{
  display:grid; grid-template-columns:minmax(0,var(--g-measure)) 240px; gap:80px;
  justify-content:center; align-items:start; max-width:1140px; margin:0 auto;
}
html[data-scene="graphite"] .g-art-main{ min-width:0; }
html[data-scene="graphite"] .g-post .g-art-layout.no-toc{
  grid-template-columns:minmax(0,var(--g-measure)); justify-content:center;
}
html[data-scene="graphite"] .g-post .g-toc{
  position:sticky; top:84px; padding-top:64px;
  display:flex; flex-direction:column;
  max-height:calc(100vh - 124px); max-height:calc(100dvh - 124px);
}
html[data-scene="graphite"] .g-post .g-toc-title{ flex:none; margin:0 0 20px; font:500 10.5px/1.5 var(--g-font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-post .g-toc nav{
  display:flex; flex-direction:column; gap:4px; padding:0 0 28px 20px;
  min-height:0; overflow-y:auto; scrollbar-width:none;
  border-left:1px solid var(--g-rule-soft);
  /* 底部 26px 渐隐提示可滚动；28px 底距保证滚到末端时末项不被遮 */
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
}
/* 仅隐藏目录内部滚动条，保留滚轮、触控与键盘滚动。 */
html[data-scene="graphite"] .g-post .g-toc nav::-webkit-scrollbar{ display:none; width:0; height:0; }
html[data-scene="graphite"] .g-post .g-toc a{ position:relative; display:block; min-height:28px; margin-left:-12px; padding-left:12px; font-size:.84rem; line-height:1.9; color:var(--g-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 短线位于预留槽内；负外边距抵消内边距，文字位置保持不变。 */
html[data-scene="graphite"] .g-post .g-toc a::before{
  content:""; position:absolute; left:0; top:.45em; width:2px; height:1em;
  background:var(--g-accent); opacity:0; pointer-events:none;
  transition:opacity 100ms var(--g-ease);
}
html[data-scene="graphite"] .g-post .g-toc a.is-active::before{ opacity:1; }
html[data-scene="graphite"] .g-post .g-toc a:not(.sub):not(:first-child){ margin-top:8px; }
html[data-scene="graphite"] .g-post .g-toc a:hover{ color:var(--g-accent); }
html[data-scene="graphite"] .g-post .g-toc a.is-active{ color:var(--g-accent); }
html[data-scene="graphite"] .g-post .g-toc a.sub{ min-height:24px; padding-left:24px; font-family:var(--g-font-mono); font-size:11px; color:var(--g-ink-3); }
html[data-scene="graphite"] .g-post .g-toc a.sub.is-active{ color:var(--g-accent); }

html[data-scene="graphite"] .g-art-head{ max-width:var(--g-measure); margin:0 auto; padding:60px 0 24px; border-bottom:1px solid var(--g-rule-soft); }
html[data-scene="graphite"] .g-art-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px;
  margin:0 0 18px; font:500 11px/1.7 var(--g-font-mono); letter-spacing:.08em; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-art-meta .by{ color:var(--g-ink-2); letter-spacing:.06em; }
html[data-scene="graphite"] .g-art-meta .folio{ margin-left:auto; color:var(--g-accent); opacity:.85; letter-spacing:.1em; }
html[data-scene="graphite"] .g-art-head h1{
  margin:0 0 14px; font-family:var(--g-font-display); font-weight:600;
  font-size:clamp(1.95rem,4vw,2.6rem); line-height:1.32; letter-spacing:.005em; text-wrap:balance;
}
html[data-scene="graphite"] .g-art-summary{
  margin:0 0 20px; max-width:30em; font-family:var(--g-font-display); font-size:1.18rem;
  line-height:1.75; letter-spacing:.005em; color:var(--g-ink-2); text-wrap:pretty;
}
html[data-scene="graphite"] .g-art-tags{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin:0; padding:0; list-style:none;
  font:500 10.5px/1.6 var(--g-font-mono); letter-spacing:.06em; color:var(--g-meta);
}
html[data-scene="graphite"] .g-art-tags li::before{ content:"#"; color:var(--g-accent); margin-right:2px; }

/* ---------- 正文 ---------- */
html[data-scene="graphite"] .g-article{
  max-width:var(--g-measure); margin:0 auto; padding:28px 0 8px;
  font-size:17px; line-height:1.9; color:var(--g-ink);
}
html[data-scene="graphite"] .g-post .g-article p,
html[data-scene="graphite"] .g-post .g-article ul,
html[data-scene="graphite"] .g-post .g-article ol{ margin:0 0 1.3em; }
html[data-scene="graphite"] .g-post .g-article p{ text-wrap:pretty; }
html[data-scene="graphite"] .g-article h2{
  font-family:var(--g-font-display); font-weight:600; font-size:1.65rem; line-height:1.5;
  margin:2.4em 0 .75em; padding-top:.7em; border-top:1px solid var(--g-rule); letter-spacing:.005em;
}
html[data-scene="graphite"] .g-article h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
html[data-scene="graphite"] .g-post .g-article h3{
  font-family:var(--g-font-display); font-weight:600; font-size:1.25rem; line-height:1.6; margin:1.8em 0 .5em;
}
html[data-scene="graphite"] .g-post .g-article h2 + h3{ margin-top:.75em; }
html[data-scene="graphite"] .g-article h4{ font-size:1rem; font-weight:600; margin:1.5em 0 .4em; }
html[data-scene="graphite"] .g-post .g-article ul,
html[data-scene="graphite"] .g-post .g-article ol{ padding-left:1.35em; }
html[data-scene="graphite"] .g-post .g-article li{ margin:.35em 0; }
html[data-scene="graphite"] .g-post .g-article li:first-child{ margin-top:0; }
html[data-scene="graphite"] .g-post .g-article li:last-child{ margin-bottom:0; }
html[data-scene="graphite"] .g-post .g-article li > ul,
html[data-scene="graphite"] .g-post .g-article li > ol{ margin:.35em 0; line-height:inherit; }
html[data-scene="graphite"] .g-post .g-article li > :is(p,ul,ol):last-child{ margin-bottom:0; }
html[data-scene="graphite"] .g-article li::marker{ color:var(--g-accent); }
html[data-scene="graphite"] .g-post .g-article blockquote{
  margin:1.3em 0; padding:0; border:0; max-width:34em;
  font-family:var(--g-font-display); font-size:1.08em; line-height:1.8; color:var(--g-ink-2);
}
html[data-scene="graphite"] .g-article blockquote::before{
  content:""; display:block; width:32px; height:1px; background:var(--g-accent); opacity:.8; margin:0 0 14px;
}
html[data-scene="graphite"] .g-post .g-article blockquote > :last-child{ margin-bottom:0; }
html[data-scene="graphite"] .g-article a{
  text-decoration:underline; text-decoration-color:var(--g-accent-dim); text-underline-offset:3px;
}
html[data-scene="graphite"] .g-article a:hover{ color:var(--g-accent); text-decoration-color:var(--g-accent); }
html[data-scene="graphite"] .g-article strong{ font-weight:600; }
html[data-scene="graphite"] .g-article img{ max-width:100%; height:auto; border:1px solid var(--g-rule); margin:1.4em 0; }
/* 长串（PATH 值、长行内代码）在窄屏必须可断，否则会把整页撑宽 */
html[data-scene="graphite"] .g-article > :not(pre):not(.g-table-wrap){ overflow-wrap:anywhere; }
html[data-scene="graphite"] .g-article hr{ border:0; border-top:1px solid var(--g-rule-soft); margin:2.4em 0; }

/* 行内代码 */
html[data-scene="graphite"] .g-article p code,
html[data-scene="graphite"] .g-article li code,
html[data-scene="graphite"] .g-article td code,
html[data-scene="graphite"] .g-article blockquote code{
  font-family:var(--g-font-mono); font-size:.85em; color:var(--g-ink);
  background:var(--g-code-bg); border:1px solid var(--g-rule-soft); padding:1px 5px; border-radius:2px;
}

/* 代码窗口 (markdown.php 输出 <pre data-lang><code>) */
html[data-scene="graphite"] .g-article pre[data-lang]{
  position:relative; margin:1.6em 0; padding:46px 16px 14px;
  background:var(--g-code-bg); border:1px solid var(--g-rule); border-radius:8px;
  overflow-x:auto; font:400 13.5px/1.8 var(--g-font-mono); color:var(--g-ink);
  scrollbar-width:thin;
}
html[data-scene="graphite"] .g-article pre[data-lang]::before{
  content:""; position:absolute; left:0; right:0; top:0; height:34px;
  border-bottom:1px solid var(--g-rule-soft);
  background:
    radial-gradient(circle at 16px 17px, #ff5f57 0 4px, transparent 4.5px),
    radial-gradient(circle at 30px 17px, #febc2e 0 4px, transparent 4.5px),
    radial-gradient(circle at 44px 17px, #28c840 0 4px, transparent 4.5px);
  opacity:.88;
}
html[data-scene="graphite"] .g-article pre[data-lang]::after{
  content:attr(data-lang); position:absolute; top:10px; right:14px;
  font:500 10px/1.4 var(--g-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-article pre code{
  display:block; border:0; background:none; padding:0; font:inherit; color:inherit; white-space:pre;
}
/* 代码块复制：包一层定位容器，按钮不随代码横向滚动 */
html[data-scene="graphite"] .g-article .g-codewrap{ position:relative; margin:1.6em 0; }
html[data-scene="graphite"] .g-article .g-codewrap > pre[data-lang]{ margin:0; }
html[data-scene="graphite"] .g-article .g-codewrap > pre[data-lang]::after{ right:68px; }
html[data-scene="graphite"] .g-article .g-copy{
  position:absolute; top:7px; right:10px; z-index:2;
  appearance:none; background:transparent; border:1px solid var(--g-control-rule);
  color:var(--g-ink-3); padding:3px 7px; cursor:pointer;
  font:500 9.5px/1.2 var(--g-font-mono); letter-spacing:.08em; opacity:.55;
  transition:opacity var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease);
}
html[data-scene="graphite"] .g-article .g-codewrap:is(:hover,:focus-within) .g-copy{ opacity:1; }
html[data-scene="graphite"] .g-article .g-copy:is(:hover,:focus-visible){ color:var(--g-accent); border-color:var(--g-accent); opacity:1; }
html[data-scene="graphite"] .g-article .hl-kw{ color:var(--g-tk-key); }
html[data-scene="graphite"] .g-article .hl-str{ color:var(--g-tk-str); }
html[data-scene="graphite"] .g-article .hl-com{ color:var(--g-tk-com); }
html[data-scene="graphite"] .g-article .hl-num{ color:var(--g-tk-num); }
html[data-scene="graphite"] .g-article .hl-fn{ color:var(--g-tk-fn); }
html[data-scene="graphite"] .g-article .hl-var{ color:var(--g-ink); }

/* 表格 */
html[data-scene="graphite"] .g-post .g-article .g-table-wrap{ margin:1.3em 0; overflow-x:auto; border-top:1px solid var(--g-rule); }
html[data-scene="graphite"] .g-article table{ border-collapse:collapse; width:100%; font-size:.87rem; line-height:1.75; }
html[data-scene="graphite"] .g-article caption{
  caption-side:top; text-align:left; padding:10px 12px 8px;
  font:500 10px/1.5 var(--g-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-article th{
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--g-rule);
  font:500 10px/1.5 var(--g-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-article td{ padding:10px 12px; border-bottom:1px solid var(--g-rule-soft); color:var(--g-ink-2); vertical-align:top; }
html[data-scene="graphite"] .g-article td code{ font-size:.82em; }

/* 文末 */
html[data-scene="graphite"] .g-art-foot{ max-width:var(--g-measure); margin:0 auto; padding-top:0; border-top:0; }
html[data-scene="graphite"] .g-art-end{ width:6px; height:6px; margin:40px auto 0; background:var(--g-accent); opacity:.8; }
html[data-scene="graphite"] .g-art-colophon{
  margin:14px 0 34px; text-align:center;
  font:500 10.5px/1.8 var(--g-font-mono); letter-spacing:.06em; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-art-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0;
  border-top:1px solid var(--g-rule); border-bottom:1px solid var(--g-rule);
}
html[data-scene="graphite"] .g-art-nav a{ display:block; padding:18px 0; }
html[data-scene="graphite"] .g-art-nav a:hover b{ color:var(--g-accent); }
html[data-scene="graphite"] .g-art-nav a + a{ border-left:1px solid var(--g-rule-soft); padding-left:26px; }
html[data-scene="graphite"] .g-art-nav span{
  display:block; margin-bottom:3px; font:500 10px/1.6 var(--g-font-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-art-nav b{ display:block; font-weight:500; font-size:.92rem; line-height:1.6; }
html[data-scene="graphite"] .g-art-nav .next{ text-align:right; }
html[data-scene="graphite"] .g-art-back{
  display:block; margin-top:16px; font:500 11px/1.6 var(--g-font-mono); letter-spacing:.06em; color:var(--g-ink-3);
}
html[data-scene="graphite"] .g-art-back:hover{ color:var(--g-accent); }

/* ---------- 交互微过渡：只反馈状态，不移动布局 ---------- */
html[data-scene="graphite"] :is(.g-home,.g-post) :is(
  .g-nav a,.g-actions button,.g-login,.g-old,.g-search input,.g-sr-item,
  .g-links a,.g-spotlight,.g-row,.g-topic,.g-work,.g-contact a,.g-foot a,
  .g-friend,.g-friend-name,.g-friend-arrow,
  .g-toc a,.g-article a,.g-art-nav a,.g-art-back,
  .g-spotlight h2,.g-spotlight .g-more,.g-row h3,.g-topic h3,.g-work h3,.g-art-nav b
){
  transition-property:color,background-color,border-color,text-decoration-color,opacity;
  transition-duration:var(--g-dur);
  transition-timing-function:var(--g-ease);
}
/* 报头一次入场：.js 由 head 内联脚本在 CSS 之前挂上；无 JS 不触发，默认可见。 */
html.js[data-scene="graphite"] .g-home .g-masthead > .g-mast-copy,
html.js[data-scene="graphite"] .g-home .g-masthead > .g-spotlight{
  animation:g-mast-in 440ms var(--g-ease) both;
}
html.js[data-scene="graphite"] .g-home .g-masthead > .g-spotlight{ animation-delay:60ms; }
@keyframes g-mast-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
/* 只移动下划线与独立箭头，交互区域及文字位置不变。 */
html[data-scene="graphite"] :is(.g-home,.g-post) .g-nav a{ position:relative; }
html[data-scene="graphite"] :is(.g-home,.g-post) .g-nav a:hover{ border-bottom-color:transparent; }
html[data-scene="graphite"] :is(.g-home,.g-post) .g-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--g-accent); transform:scaleX(0); transform-origin:left center;
  transition:transform var(--g-dur) var(--g-ease);
}
html[data-scene="graphite"] :is(.g-home,.g-post) .g-nav a:is(:hover,:focus-visible)::after{ transform:scaleX(1); }
html[data-scene="graphite"] .g-home .g-friend .g-friend-arrow{
  transform:translateX(0);
  transition-property:color,transform;
}
html[data-scene="graphite"] .g-home .g-friend:is(:hover,:focus-visible) .g-friend-arrow{ transform:translateX(2px); }

/* 根节点与页面不继承旧世界的主题过渡；不影响没有 g-page 的旧页面。 */
html[data-scene="graphite"]:has(> body.g-page),
html[data-scene="graphite"] body.g-page{ transition:none !important; }
/* 主题按钮操作期间瞬时换色；离开按钮后恢复普通交互反馈。 */
html[data-scene="graphite"]:has(.g-mode button:is(:hover,:active,:focus-visible)) :is(.g-home,.g-post),
html[data-scene="graphite"]:has(.g-mode button:is(:hover,:active,:focus-visible)) :is(.g-home,.g-post) *{
  transition:none !important;
}

/* ---------- 响应式 ---------- */
@media (max-width:899px){
  html[data-scene="graphite"] .g-home .g-masthead{
    grid-template-columns:1fr;
    gap:32px;
  }
}
@media (max-width:760px){
  html[data-scene="graphite"] .g-home .g-masthead{
    margin:0 -18px;
    padding:48px 24px 40px;
  }
  html[data-scene="graphite"] .g-home .g-masthead h1{ font-size:2.5rem; }
  html[data-scene="graphite"] .g-home .g-masthead .g-lede{ font-size:1.125rem; }
}
/* 阅读栏保持 820px；空间不足时目录按原有方式收起。 */
@media (max-width:1215px){
  html[data-scene="graphite"] .g-post .g-art-layout{ grid-template-columns:minmax(0,var(--g-measure)); justify-content:center; }
  html[data-scene="graphite"] .g-post .g-toc{ display:none; }
}
/* 中宽：品牌收短 + 导航收进 MENU 下拉；手机保持紧凑顶栏 */
@media (max-width:1120px){
  html[data-scene="graphite"] .g-mark i,
  html[data-scene="graphite"] .g-mark span{ display:none; }
  html[data-scene="graphite"] .g-nav{
    position:absolute; top:100%; left:0; right:0; z-index:35;
    display:none; flex-direction:column; gap:0; margin:0;
    background:var(--g-raised); border-bottom:1px solid var(--g-control-rule);
    padding:6px 18px;
  }
  html[data-scene="graphite"] .g-nav.is-open{ display:flex; }
  html[data-scene="graphite"] .g-nav a{ padding:11px 0; border-bottom:1px solid var(--g-rule-soft); }
  html[data-scene="graphite"] .g-nav a:last-child{ border-bottom:0; }
  html[data-scene="graphite"] .g-nav a::after{ display:none; }
  html[data-scene="graphite"] .g-nav a:hover{ border-bottom-color:var(--g-rule-soft); }
}
@media (min-width:761px) and (max-width:1120px){
  html[data-scene="graphite"] .g-menu-btn{ display:inline-flex; align-items:center; }
}
/* 中宽含管理员 EDIT/ACCOUNT 时避免顶栏挤出；文章页仍有 EDIT 入口 */
@media (max-width:1200px){
  html[data-scene="graphite"] .g-actions a.g-login[href$="/admin/editor.php"]{ display:none; }
}
@media (max-width:760px){
  html[data-scene="graphite"] .g-bar-in{ padding:0 14px; height:52px; gap:10px; }
  html[data-scene="graphite"] .g-mark i,
  html[data-scene="graphite"] .g-mark span{ display:none; }
  html[data-scene="graphite"] .g-actions{ gap:7px; }
  html[data-scene="graphite"] .g-search input{ width:88px; padding:0 6px; font-size:10.5px; }
  html[data-scene="graphite"] .g-search input::placeholder{ font-size:10px; }
  html[data-scene="graphite"] .g-search-results{ width:250px; }
  html[data-scene="graphite"] .g-mode button{ padding:5px 7px; }
  html[data-scene="graphite"] .g-bar .g-old{ display:none; }
  html[data-scene="graphite"] .g-main{ padding:0 18px 20px; }
  html[data-scene="graphite"] .g-masthead{ grid-template-columns:1fr; gap:28px; padding:48px 0 38px; }
  html[data-scene="graphite"] .g-spotlight{ padding:24px 0 0; border-left:0; border-top:1px solid var(--g-rule-soft); }
  html[data-scene="graphite"] .g-sec{ padding-top:44px; }
  html[data-scene="graphite"] .g-row{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"no date cat" "title title title";
    row-gap:6px; column-gap:14px; padding:14px 4px;
  }
  html[data-scene="graphite"] .g-row .g-cat{ justify-self:end; }
  html[data-scene="graphite"] .g-home .g-honor-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"date rank" "title title";
    row-gap:6px; column-gap:14px; padding:14px 4px;
  }
  html[data-scene="graphite"] .g-home .g-honor-rank{ text-align:right; }
  html[data-scene="graphite"] .g-topic{ grid-template-columns:1fr; row-gap:10px; padding:20px 4px; }
  html[data-scene="graphite"] .g-topic .g-meta{ text-align:left; }
  html[data-scene="graphite"] .g-work{ grid-template-columns:1fr; row-gap:6px; padding:16px 4px; }
  html[data-scene="graphite"] .g-work .g-meta{ text-align:left; }
  html[data-scene="graphite"] .g-home .g-work-illustrated{
    grid-template-columns:4.5rem minmax(0,1fr);
    grid-template-areas:"drawing copy" "drawing meta";
    align-items:start; gap:.4rem .9rem;
  }
  html[data-scene="graphite"] .g-about-grid{ grid-template-columns:1fr; gap:30px; }
  html[data-scene="graphite"] .g-home .g-about-portrait{ width:min(100%,13rem); }
  html[data-scene="graphite"] .g-home .g-friends{ grid-template-columns:1fr; }
  html[data-scene="graphite"] .g-home .g-friend{
    grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name arrow" "detail detail";
    row-gap:2px; column-gap:14px; padding:10px 4px;
  }
  html[data-scene="graphite"] .g-art-head{ padding:42px 0 20px; }
  html[data-scene="graphite"] .g-art-head h1{ font-size:1.85rem; }
  html[data-scene="graphite"] .g-article{ font-size:15.5px; line-height:1.9; padding-top:22px; }
  html[data-scene="graphite"] .g-article h2{ font-size:1.38rem; }
  html[data-scene="graphite"] .g-post .g-article h3{ font-size:1.15rem; }
  html[data-scene="graphite"] .g-article pre[data-lang]{ font-size:12.5px; }
  html[data-scene="graphite"] .g-art-nav{ grid-template-columns:1fr; }
  html[data-scene="graphite"] .g-art-nav .next{ text-align:left; }
  html[data-scene="graphite"] .g-art-nav a + a{ border-left:0; border-top:1px solid var(--g-rule-soft); padding-left:0; padding-top:16px; }
  html[data-scene="graphite"] .g-foot{ padding-bottom:52px; }
}
@media (prefers-reduced-motion:reduce){
  html[data-scene="graphite"] *{ scroll-behavior:auto !important; }
  html[data-scene="graphite"] body.g-page,
  html[data-scene="graphite"] body.g-page *,
  html[data-scene="graphite"] body.g-page *::before,
  html[data-scene="graphite"] body.g-page *::after{ transition:none !important; animation:none !important; }
  html[data-scene="graphite"] .g-home .g-friend .g-friend-arrow{ transform:none !important; }
  html[data-scene="graphite"] :is(.g-home,.g-post) .g-nav a::after{ transform:scaleX(0) !important; }
  html[data-scene="graphite"] :is(.g-home,.g-post) .g-nav a:is(:hover,:focus-visible)::after{ transform:scaleX(1) !important; }
}