/* =============================== Variables ===============================
   Native CSS over the preserved framework. Scale: controls 6px, cards 12px.
   Layers: sticky header 20, toast 30, keyboard skip link 40. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --bg-secondary: #f1f3f6; --surface: #fefefe; --surface-hover: #f5f7fc;
  --text: #20232b; --text-secondary: #555d6c; --text-muted: #656d7c;
  --border: #e0e4eb; --border-hover: #aabce9; --accent: #3964e8; --accent-hover: #2c52c7; --accent-soft: #edf2fd; --on-accent: #ffffff;
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px;
  --fs-caption: 16px; --fs-body: 18px; --fs-subhead: 20px; --fs-h3: 24px; --fs-h2: 30px; --fs-h1: 40px; --fs-display: 52px;
  --shadow-sm: 0 3px 10px rgb(40 54 85 / .035); --shadow-md: 0 12px 32px rgb(40 54 85 / .07);
  --header-bg: rgb(250 250 250 / .86); --grid-line: rgb(60 82 128 / .035);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --ifm-font-family-base: var(--font-sans); --ifm-heading-font-family: var(--font-sans);
  --ifm-color-primary: var(--accent); --ifm-font-color-base: var(--text); --ifm-heading-color: var(--text);
  --ifm-link-color: var(--accent); --ifm-link-hover-color: var(--accent-hover);
  --ifm-background-color: var(--bg); --ifm-background-surface-color: var(--surface);
  --ifm-line-height-base: 1.75; --ifm-font-size-base: 18px;
  --ifm-table-border-color: var(--border); --ifm-table-stripe-background: var(--bg-secondary);
  --ifm-code-background: var(--bg-secondary); --ifm-code-color: var(--text); --ifm-pre-background: var(--bg-secondary);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15171c; --bg-secondary: #20242c; --surface: #1b1e25; --surface-hover: #222733;
  --text: #e8ebf1; --text-secondary: #b6bdcb; --text-muted: #9aa4b6;
  --border: #323947; --border-hover: #667ea9; --accent: #9ab5ff; --accent-hover: #bad0ff; --accent-soft: #252f48; --on-accent: #16213c;
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
  --shadow-sm: 0 3px 10px rgb(5 9 18 / .12); --shadow-md: 0 12px 32px rgb(5 9 18 / .24);
  --header-bg: rgb(21 23 28 / .88); --grid-line: rgb(180 200 240 / .035);
}
/* =============================== Base =============================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.8; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--text); font-family: var(--font-sans); font-weight: 650; line-height: 1.4; letter-spacing: -.035em; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1rem; } a { color: var(--accent); text-decoration: none; text-underline-offset: 5px; }
a:hover { color: var(--accent-hover); text-decoration: none; }
button, input, summary { font: inherit; } button, summary { cursor: pointer; }
button { color: inherit; } img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
body a:focus-visible, body button:focus-visible, body summary:focus-visible, body input:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 4px; }
::selection { background: var(--accent-soft); color: var(--text); }
section[id], [id].case-original, .project-entry, .anchor-alias { scroll-margin-top: 100px; }
.anchor-alias { position: absolute; width: 0; height: 0; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 40; padding: 10px 16px; background: var(--surface); border: 2px solid var(--accent); }
.skip-link:focus { top: 12px; }
/* =============================== Layout =============================== */
.site-container { width: 100%; max-width: 1264px; padding-inline: 32px; margin-inline: auto; }
.page-main { min-width: 0; }
.page-layout { padding-bottom: 112px; }
.page-hero { padding: 76px 0 48px; }
.page-hero h1 { margin: 10px 0 20px; line-height: 1.25; }
.page-lead, .doc-lead, .lead { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.8; max-width: 760px; }
.doc-kicker { display: block; margin: 0 0 12px; color: var(--text-muted); font: 16px/1.6 var(--font-mono); letter-spacing: .12em; }
.section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: var(--fs-h2); }
.section-heading h2 span { display: inline-block; margin-left: 15px; color: var(--text-muted); font: 16px/1.6 var(--font-mono); letter-spacing: 0; }
.section-bottom { margin-top: 24px; text-align: right; }
.site-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid var(--border); }
.site-footer p { margin: 8px 0 16px; color: var(--text-muted); font-size: 16px; }
.copyright { font: 16px/1.6 var(--font-mono); color: var(--text-muted); }
.site-footer nav { display: flex; gap: 26px; padding-top: 8px; }
.site-footer nav a { color: var(--text-secondary); font-size: 16px; }
/* =============================== Navbar =============================== */
.scroll-sentinel { position: absolute; top: 0; height: 24px; width: 1px; pointer-events: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: background 200ms,  box-shadow 200ms; }
.site-header.is-scrolled { background: var(--surface);  box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; height: 76px; gap: 36px; position: relative; }
.site-brand { flex-shrink: 0; font-size: 20px; font-weight: 700; letter-spacing: -.04em; color: var(--text); white-space: nowrap; }
.brand-suffix { color: var(--accent); font: 16px var(--font-mono); letter-spacing: -.06em; margin-left: 2px; }
.desktop-nav { display: flex; height: 100%; align-items: center; gap: 28px; }
.desktop-nav a { height: 100%; display: flex; align-items: center; position: relative; color: var(--text-secondary); font-size: 16px; transition: color 180ms; }
.desktop-nav a::after { content: ""; position: absolute; height: 2px; left: 4px; right: 4px; bottom: 15px; background: var(--accent); transform: scaleX(0); transition: transform 180ms; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--text); }
.desktop-nav a[aria-current]::after, .desktop-nav a:hover::after { transform: scaleX(1); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-actions a { color: var(--text-secondary); white-space: nowrap; font-size: 16px; }
.nav-actions .nav-download { border-left: 1px solid var(--border); padding-left: 20px; }
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); background: transparent; border-radius: var(--radius-sm); font-size: 20px; }
.theme-toggle:hover { background: var(--bg-secondary); }
.mobile-menu { display: none; }
/* =============================== Hero =============================== */
.home-hero { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 52px; padding: 88px 0 96px; }
.home-hero h1 { margin: 16px 0 19px; font-size: clamp(40px, 4vw, var(--fs-display)); line-height: 1.22; font-weight: 650; letter-spacing: -.055em; }
.home-hero h1 span { white-space: nowrap; }


.hero-visual { min-width: 0; position: relative; padding: 20px 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size: 24px 24px; }
.code-window { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);  box-shadow: var(--shadow-md); overflow: hidden; animation: window-float 8s ease-in-out infinite; }
.code-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text-muted); font: 16px var(--font-mono); }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-hover); }
.code-body { padding: 24px; font: 16px/1.8 var(--font-mono); }
.code-body p { margin: 0 0 10px; }.code-prompt { color: var(--accent); }
.code-fields { margin: 24px 0; }.code-fields p { display: flex; align-items: center; gap: 18px; font-size: 16px; margin-bottom: 15px; }.code-fields p:last-child { margin-bottom: 0; }
.code-cursor { color: var(--accent); animation: cursor-blink 1.5s step-end infinite; }
.home-section + .home-section { margin-top: 112px; }
/* Original NEC Mate-style solid: six independent surfaces in a 3D coordinate system. */
.server-showcase { margin:0; padding:24px 0 0; background:none; }



.server-stage { position:relative; height:300px; perspective:950px; cursor:grab; touch-action:pan-y; outline-offset:4px; isolation:isolate; }
.server-stage.is-dragging { cursor:grabbing; }
.server-halo { position:absolute; inset:15px -12px 0; border-radius:50%; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%); pointer-events:none; }
.server-shadow { position:absolute; left:50%; top:65%; width:260px; height:50px; border-radius:50%; transform:translateX(-50%) rotate(-9deg); background:radial-gradient(ellipse,rgb(26 35 54 / .22),transparent 70%); filter:blur(9px); pointer-events:none; }
.server-anchor { position:absolute; top:48%; left:50%; width:272px; height:54px; margin-left:-136px; margin-top:-27px; transform-style:preserve-3d; }
.server-model { position:relative; width:272px; height:54px; transform-style:preserve-3d; transform:rotateX(var(--server-pitch,-24deg)) rotateY(var(--server-yaw,-32deg)); transition:transform .65s cubic-bezier(.2,.75,.2,1); }
.server-model.is-dragging,.server-model.is-spinning { transition:none; }
.server-face { position:absolute; left:50%; top:50%; border:1px solid #c1c6cc; backface-visibility:hidden; border-radius:3px; }
.server-top,.server-bottom { width:272px; height:278px; }
.server-top { transform:translate(-50%,-50%) rotateX(90deg) translateZ(27px); background:linear-gradient(145deg,#f7f7f4 10%,#e5e7e6 65%,#d2d7d8);  box-shadow:inset 0 0 0 2px #f8f8f4,inset 0 0 18px rgb(95 110 126 / .07); }
.server-bottom { transform:translate(-50%,-50%) rotateX(-90deg) translateZ(27px); background:linear-gradient(130deg,#b7bec4,#dee1e1); }
.server-front,.server-back { width:272px; height:54px; }
.server-front { transform:translate(-50%,-50%) translateZ(139px); display:flex; background:#dce1df;  box-shadow:inset 0 -3px 2px #aeb8bb; overflow:hidden; }
.server-back { transform:translate(-50%,-50%) rotateY(180deg) translateZ(139px); background:linear-gradient(#dce0e0,#b9c1c6); padding:5px 10px; }
.server-left,.server-right { width:278px; height:54px; background:linear-gradient(#e9ebea,#c4cbcd); }
.server-left { transform:translate(-50%,-50%) rotateY(-90deg) translateZ(136px); }
.server-right { transform:translate(-50%,-50%) rotateY(90deg) translateZ(136px); }
.server-top-logo { position:absolute; left:20px; top:22px; color:#7f8990; font:italic 650 20px/1 var(--font-sans); letter-spacing:-.07em; opacity:.65; }
.server-top-seam { position:absolute; left:0; right:0; bottom:16px; height:1px; background:#b5bec2;  box-shadow:0 1px #fafaf7; }
.server-top-vents { position:absolute; right:18px; top:20px; width:68px; height:108px; border-radius:5px; background:repeating-linear-gradient(0deg,#a9b2b6 0 2px,transparent 2px 7px); opacity:.48; }
.server-screw { position:absolute; width:5px; height:5px; border:1px solid #b1b9bd; border-radius:50%; background:linear-gradient(45deg,transparent 40%,#99a4aa 40% 60%,transparent 60%); }
.server-screw--a { left:10px; top:10px; }.server-screw--b { right:10px; bottom:22px; }
.server-front-controls { width:174px; padding:0 9px; display:flex; gap:8px; align-items:center; background:linear-gradient(135deg,#243d67,#142c53);  box-shadow:inset 0 1px #4b6185,inset 0 -3px #14213b; flex-shrink:0; }
.server-logo { color:#e4eaf2; font:italic 650 17px/1 var(--font-sans); letter-spacing:-.08em; }
.server-power { width:17px; height:19px; border:1px solid #65748c; border-radius:3px; display:grid; place-items:center; background:#293e5d; color:#d1d8e2; font:13px/1 var(--font-sans); }
.server-led { width:3px; height:3px; border-radius:50%; background:#b6d59a;  box-shadow:0 0 4px #b2d795; flex-shrink:0; }
.server-jack { width:8px; height:8px; border:2px solid #919ba7; background:#090f19; border-radius:50%; flex-shrink:0; }
.server-usb { display:block; position:relative; width:17px; height:9px; border:1px solid #96a2b0; background:#070f18; border-radius:1px; flex-shrink:0; }
.server-usb::after { content:''; position:absolute; left:2px; right:2px; top:2px; height:3px; background:#4283ad; }
.server-front-grille { flex:1; margin:6px; background:radial-gradient(circle,#5b6870 1.35px,transparent 1.7px) 0 0/5px 5px; border-radius:2px; opacity:.9; }
.server-side-seam { position:absolute; left:0; right:0; top:10px; border-top:1px solid #b5bfc3;  box-shadow:0 1px #f4f5f0; }
.server-side-vents { position:absolute; left:20px; right:20px; top:23px; height:20px; background:repeating-linear-gradient(90deg,#7d8c94 0 2px,transparent 2px 6px); opacity:.5; }
.server-back-grille { display:block; height:8px; width:160px; margin:0 auto 7px; background:repeating-linear-gradient(90deg,#65747e 0 2px,transparent 2px 5px); }
.server-back-ports { display:flex; align-items:center; justify-content:space-around; gap:8px; }
.server-dc { width:12px; height:12px; border:3px solid #5d6c77; border-radius:50%; background:#121b23; }
.server-displayport { width:24px; height:10px; background:#17212a; border:2px solid #687781; border-radius:2px; }
.server-usb--back { width:18px; height:10px; }.server-usb--back::after { background:#496470; }
.server-lan { width:19px; height:15px; border:2px solid #647783; border-radius:2px; background:linear-gradient(0deg,#142632 65%,#b1a779 65% 80%,#142632 80%); }
.server-foot { position:absolute; width:23px; height:23px; border-radius:50%; background:#414a51; border:3px solid #626c73; }
.server-foot--a { top:20px; left:20px; }.server-foot--b { top:20px; right:20px; }.server-foot--c { bottom:20px; left:20px; }.server-foot--d { bottom:20px; right:20px; }
.server-bottom-label { position:absolute; left:85px; top:105px; width:100px; height:56px; background:#e4e6e2; border:1px solid #9aa5ac; padding:14px; font:12px var(--font-mono); color:#414d54; }
.server-controls { display:flex; justify-content:center; gap:4px; margin:2px auto 24px; padding:4px; width:fit-content; border:1px solid var(--border); border-radius:99px; background:var(--surface); }
.server-controls button { min-height:36px; padding:7px 13px; border:0; border-radius:99px; background:transparent; color:var(--text-secondary); font:500 13px/1.4 var(--font-sans); cursor:pointer; transition:background .2s,color .2s; }
.server-controls button:hover { background:var(--bg-secondary); color:var(--text); }
.server-controls button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }



@media (max-width:1100px) and (min-width:768px) { .server-anchor { transform:scale(.83); }.server-stage { height:260px; } }
@media (max-width:767px) { .hero-visual.server-showcase { padding-top:12px; max-width:430px; }.server-stage { height:280px; } }
@media (max-width:390px) { .server-anchor { transform:scale(.83); }.server-stage { height:250px; } }
@media (prefers-reduced-motion:reduce) { .server-model,.server-controls button { transition:none; } }
@media print { .server-controls { display:none; } }

/* GPU model progressively replaces the CSS fallback. */
.server-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.server-stage.has-webgl .server-anchor { visibility:hidden; }
.server-stage.has-webgl .server-shadow { top:73%; width:285px; opacity:.7; }
.server-stage.has-webgl { height:340px; }
.server-stage.is-detail .server-anchor { scale:1.15; }
.server-controls button:disabled { opacity:.45; cursor:default; }
@media (max-width:1100px) and (min-width:768px) { .server-stage.has-webgl { height:300px; } }
@media (max-width:767px) { .server-stage.has-webgl { height:300px; } }
@media (max-width:390px) { .server-controls button { padding-inline:10px; }.server-stage.has-webgl { height:280px; } }
/* =============================== Blog =============================== */
.posts-empty { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); display: flex; align-items: center; gap: 38px; padding: 44px 52px; min-height: 226px; }
.posts-empty h3 { font-size: var(--fs-h3); margin: 0 0 12px; }.posts-empty p { color: var(--text-secondary); font-size: 18px; margin-bottom: 16px; }
.empty-symbol { width: 94px; flex-shrink: 0; text-align: center; color: var(--accent); font: 38px/1 var(--font-mono); letter-spacing: -.13em; }
.post-list { display: grid; gap: 20px; }.post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.post-list:empty { display: none; }
.post-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 30px; transition: transform 220ms, border-color 220ms,  box-shadow 220ms; }
.post-category { font-size: 16px; color: var(--accent); margin-bottom: 16px; }.post-card h3 { margin: 0 0 12px; font-size: var(--fs-h3); }.post-card h3 a { color: var(--text); }
.post-description { color: var(--text-secondary); margin: 0 0 26px; }.post-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 16px; margin: 0; }.post-tags { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; color: var(--text-muted); font-size: 16px; }
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border-block: 1px solid var(--border); }
.search-field { flex: 0 1 290px; }.listing-status { margin: 22px 0; color: var(--text-muted); font-size: 16px; }
.posts-index { max-width: 1000px; }.posts-index .post-card { padding: 32px 36px; }.posts-index .posts-empty { min-height: 320px; }
.article-header h1 { margin: 16px 0 24px; }.article-meta { color: var(--accent); font-size: 16px; }.article-body { font-size: var(--fs-body); line-height: 1.85; }.article-body h2 { margin-top: 48px; }.article-body h3 { margin-top: 32px; }.article-body figure { margin: 32px 0; }.article-body figcaption { font-size: 16px; color: var(--text-muted); }.article-body blockquote { border-left-color: var(--accent); color: var(--text-secondary); }.article-cover { margin: 32px 0; }.article-end { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 20px; font-size: 16px; color: var(--text-muted); }
 .page-article .page-layout { display:grid; grid-template-columns:200px minmax(0,820px); gap:48px; max-width:1180px; align-items:start; padding-top:44px; }
.page-article .page-main { min-width:0; width:100%; max-width:820px; margin:0; }
.article-toc { position:sticky; top:108px; max-height:calc(100dvh - 136px); overflow-y:auto; scrollbar-width:thin; padding:12px 0; }
.article-toc summary { color:var(--text-muted); font-size:14px; font-weight:500; margin-bottom:16px; list-style:none; cursor:default; pointer-events:none; }
.article-toc summary::-webkit-details-marker { display:none; }
.article-toc nav { display:flex; flex-direction:column; gap:4px; border-left:1px solid var(--border); }
.article-toc nav a { display:block; margin-left:-1px; padding:9px 14px; border-left:2px solid transparent; color:var(--text-secondary); font-size:15px; line-height:1.65; transition:color .18s,border-color .18s; }
.article-toc nav a:hover,.article-toc nav a[aria-current] { color:var(--accent); border-left-color:var(--accent); }
.page-article .breadcrumb { padding-top:0; }
@media (min-width:768px) and (max-width:1000px) { .page-article .page-layout { grid-template-columns:165px minmax(0,1fr); gap:28px; } }
@media (max-width:767px) { .page-article .page-layout { display:block; padding-top:24px; }.article-toc { position:static; max-height:none; border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin-bottom:24px; }.article-toc summary { pointer-events:auto; cursor:pointer; margin:0; color:var(--text-secondary); }.article-toc summary::after { content:'＋'; float:right; }.article-toc details[open] summary::after { content:'−'; }.article-toc details[open] nav { margin-top:12px; } }
@media print { .page-article .page-layout { display:block; padding:0; }.article-toc { display:none; } }
.article-body pre { overflow-x: auto; max-width: 100%; }.article-category:empty { display: none; }
/* =============================== Projects =============================== */
.selected-projects, .project-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.project-card, .project-entry { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: transform 220ms, border-color 220ms,  box-shadow 220ms; }
.project-card h3, .project-entry h3 { font-size: var(--fs-h3); margin: 0 0 16px; }.project-card h3 a, .project-entry h3 a { color: var(--text); }
.project-card > p, .project-entry > p:not(.doc-meta) { color: var(--text-secondary); font-size: 18px; }.project-card .project-tech { color: var(--text-muted); font: 16px/1.8 var(--font-mono); margin-top: 10px; margin-bottom: 26px; }.project-card > .text-link { margin-top: auto; }
.project-toolbar { display: flex; flex-direction: column; gap: 22px; padding: 0 0 24px; border-bottom: 1px solid var(--border); }.project-toolbar > div:first-child { width: min(460px,100%); }.project-toolbar label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 16px; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }.filter-bar button { min-height: 40px; padding: 6px 15px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 16px; transition: background 180ms, color 180ms; }.filter-bar button:hover { background: var(--bg-secondary); }.filter-bar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
input[type="search"] { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); padding: 9px 14px; font-size: 16px; }input::placeholder { color: var(--text-muted); }
.project-entry .tags { margin-bottom: 20px; }.project-entry-links { margin-top: auto; }.project-entry .doc-disclosure { font-size: 16px; }.project-entry .doc-disclosure summary { font-size: 16px; font-weight: 400; }
.breadcrumb { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 38px; color: var(--text-muted); font-size: 16px; }.breadcrumb a { color: var(--text-secondary); }
.case-hero { padding-top: 40px; max-width: 900px; }.case-hero h1 { font-size: var(--fs-h1); }.case-meta { margin-top: 24px; color: var(--text-muted); font-size: 16px; }
.case-body { max-width: 820px; margin-inline: auto; }.case-section { margin-top: 64px; }.case-section h2 { font-size: var(--fs-h2); margin-bottom: 28px; }.case-original h3 { font-size: var(--fs-subhead); margin: 28px 0 16px; }.case-original { margin-bottom: 24px; }.case-body p, .case-body li { color: var(--text-secondary); }.process { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0; }.process > div { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }.process strong, .process span { display: block; }.process span { color: var(--text-secondary); font-size: 16px; margin-top: 6px; }
/* Three-column project reader: project list / content / active outline. */
.project-workspace .page-layout { max-width: 1600px; display: grid; grid-template-columns: 230px minmax(0,1fr) 180px; gap: 36px; align-items: start; padding-top: 42px; }
.project-menu, .project-toc { position: sticky; top: 106px; min-width: 0; max-height: calc(100dvh - 130px); overflow-y: auto; scrollbar-width: thin; }
.project-menu { padding-right: 22px; border-right: 1px solid var(--border); }
.project-toc { padding-left: 22px; border-left: 1px solid var(--border); }
.project-menu summary, .project-toc summary { list-style: none; font-weight: 650; margin-bottom: 20px; font-size: 18px; cursor: default; pointer-events: none; }
.project-menu summary::-webkit-details-marker, .project-toc summary::-webkit-details-marker { display: none; }
.project-menu nav, .project-toc nav { display: flex; flex-direction: column; gap: 6px; }
.project-menu nav a { display: block; padding: 10px 12px; color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 16px; line-height: 1.65; }
.project-menu nav a:hover { background: var(--bg-secondary); color: var(--text); }
.project-menu nav a[aria-current] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.project-toc nav a { padding: 8px 0; color: var(--text-secondary); font-size: 16px; }
.project-toc nav a[aria-current] { color: var(--accent); font-weight: 600; }
.project-reader-heading h1 { font-size: var(--fs-h1); margin: 0 0 22px; }
.project-workspace .project-entry { display: block; padding: 0; border: 0; background: transparent;  box-shadow: none; transform: none; border-radius: 0; }
.project-workspace .project-entry + .project-entry { margin-top: 80px; }
.project-reader.is-enhanced .project-entry { margin-top: 0; }
.project-workspace .case-hero { padding: 0 0 24px; }
.project-workspace .project-title, .project-workspace .case-hero h1 { font-size: var(--fs-h1); line-height: 1.4; margin: 0 0 24px; }
.project-workspace .case-meta { font-size: 16px; line-height: 1.8; }
.project-workspace .case-body { max-width: none; }
.project-workspace .case-section, .project-section { margin-top: 48px; }
.project-workspace .case-section h2, .project-section > h3 { font-size: var(--fs-h2); margin: 0 0 24px; }
.project-workspace .case-original h3 { font-size: var(--fs-h3); }
.project-workspace .case-body p, .project-workspace .case-body li, .project-section p, .project-section li { font-size: 18px; line-height: 1.9; }
.project-workspace .case-body .quiet { font-size: 16px; }
.project-workspace .case-section > h3, .project-section h4 { font-size: var(--fs-h3); line-height: 1.5; margin: 32px 0 16px; }
.project-workspace .page-main { overflow-wrap: anywhere; }
.about-interests h2 { font-size: var(--fs-h3); }

/* =============================== About =============================== */
.now-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; }.now-grid article { padding: 8px 0 0 24px; border-left: 1px solid var(--border); }.now-grid h3 { font-size: var(--fs-subhead); margin: 14px 0; }.now-grid p { color: var(--text-secondary); font-size: 18px; }.now-grid .now-tech { font: 16px/1.7 var(--font-mono); color: var(--text-muted); }
.about-layout { display: grid; grid-template-columns: minmax(0,740px) 1fr; gap: 84px; }.about-story section { margin-bottom: 56px; }.about-story h2 { font-size: var(--fs-h3); margin-bottom: 24px; }.about-story p { color: var(--text-secondary); font-size: 18px; }.about-interests { border-left: 1px solid var(--border); padding-left: 30px; align-self: start; }.about-interests ul { list-style: none; padding: 0; margin: 24px 0 36px; }.about-interests li { margin: 14px 0; color: var(--text-secondary); font-size: 16px; }.about-interests > p:last-child { color: var(--text-muted); font-size: 16px; }
/* =============================== Resume =============================== */
.page-resume .page-layout { max-width: 1440px; display: grid; grid-template-columns: 180px minmax(0,820px) 220px; gap: 32px; padding-top: 54px; }
.resume-toc, .resume-rail { position: sticky; top: 104px; align-self: start; font-size: 16px; }.resume-toc > p { font-size: 16px; color: var(--text-muted); margin-bottom: 20px; }.resume-toc nav { display: flex; flex-direction: column; gap: 14px; }.resume-toc a { color: var(--text-secondary); }.resume-toc a:hover { color: var(--accent); }
.resume-rail { border-left: 1px solid var(--border); padding-left: 24px; color: var(--text-muted); }.resume-rail h2 { font-size: 18px; letter-spacing: 0; }.resume-rail a { display: block; margin-top: 14px; }.resume-rail .rail-note { margin-top: 32px; font-size: 16px; }
.doc-hero { padding: 0 0 32px; border-bottom: 1px solid var(--border); }.doc-hero h1 { font-size: var(--fs-h1); margin: 12px 0 20px; }.doc-section { margin-top: 48px; }.doc-section h2 { font-size: var(--fs-h2); margin: 0 0 24px; }.doc-section h3 { font-size: var(--fs-subhead); margin: 24px 0 12px; }.doc-section p, .detail-list { color: var(--text-secondary); }.detail-list { padding-left: 24px; }.detail-list li { margin-bottom: 12px; }.doc-meta, .doc-caption, .eyeline, .quiet { font-size: 16px; color: var(--text-muted); }
.doc-note { padding: 24px; margin: 24px 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }.doc-note > :last-child { margin-bottom: 0; }.doc-note strong { color: var(--text); }
.doc-link-list { list-style: none; padding: 0; margin: 0; }.doc-link-list li { padding: 20px 0; border-bottom: 1px solid var(--border); }.doc-link-list a { display: grid; gap: 8px; }.doc-link-list strong { color: var(--text); }.doc-link-list span { color: var(--text-secondary); }
/* =============================== Usage =============================== */
.usage-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:32px; }
.usage-hero h1 { font-size:clamp(30px, 3.5vw, 46px); margin:10px 0 12px; letter-spacing:-.05em; }
.usage-hero .page-lead { margin:0; }
.usage-updated { margin:0 0 4px; color:var(--text-muted); font-size:14px; white-space:nowrap; }
.usage-updated time { display:block; font-variant-numeric:tabular-nums; }
.usage-grid { display:grid; gap:28px; }
.usage-card { min-width:0; padding:32px; border:1px solid var(--border); border-radius:24px; background:var(--surface);  box-shadow:var(--shadow-sm); animation:usage-enter .55s ease both; }
.usage-card:nth-child(2) { animation-delay:80ms; }
.usage-card-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }
.usage-brand { display:flex; align-items:center; gap:14px; }
.usage-brand-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border-radius:15px; background:var(--text); color:var(--surface); font:650 26px/1 var(--font-sans); }
.usage-brand-icon--deepseek { background:var(--accent); color:var(--on-accent); }
.usage-brand h2 { font-size:25px; margin:0; letter-spacing:-.03em; }
.usage-scope { font-size:14px; color:var(--text-muted); }
.usage-head-meta { display:flex; align-items:center; gap:12px; }
.usage-plan { padding:4px 12px; border:1px solid var(--border); border-radius:999px; font-size:14px; }
.usage-state { margin:0; font-size:14px; color:var(--text-muted); }
.usage-codex-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:32px; }
.usage-token-panel { min-width:0; }
.usage-top-stats { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:end; margin-bottom:30px; }
.stat-tile { min-width:0; }
.stat-label { color:var(--text-secondary); font-size:15px; margin:0 0 8px; }
.stat-value { font-size:30px; line-height:1.2; font-weight:650; letter-spacing:-.045em; margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stat-tile--hero .stat-value { font-size:clamp(36px,4vw,52px); }
.usage-quota-panel { background:var(--bg-secondary); border-radius:18px; padding:22px; align-self:start; min-width:0; }
.usage-quota-panel h3 { font-size:17px; margin:0 0 24px; }
.usage-quota-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.usage-quota-row strong { font-size:32px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.usage-quota-row .stat-label { margin:0; }
.usage-meter { margin:14px 0 30px; }
.usage-meter-track { height:7px; border-radius:99px; background:color-mix(in srgb,var(--text-muted) 16%,transparent); overflow:hidden; }
.usage-meter-fill { height:100%; width:0; border-radius:99px; background:var(--chart-1); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.usage-meter.is-warn .usage-meter-fill { background:var(--chart-4); }
.usage-meter.is-critical .usage-meter-fill { background:#d03b3b; }
.usage-meter-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; color:var(--text-muted); font-size:12px; margin-top:10px; }
.usage-quota-details summary { font-size:14px; color:var(--text-secondary); cursor:pointer; }
.usage-quota-details .usage-chart-caption { flex-direction:column; align-items:flex-start; }
.usage-quota-details .usage-legend { font-size:12px; gap:8px; }
.usage-quota-details .usage-chart { margin-top:20px; }
.usage-chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px; color:var(--text-muted); font-size:14px; }
.usage-segment { display:inline-flex; padding:4px; gap:3px; border-radius:10px; background:var(--bg-secondary); }
.usage-segment button { padding:7px 12px; min-height:36px; border:0; border-radius:7px; font:500 13px/1.4 var(--font-sans); color:var(--text-secondary); background:transparent; cursor:pointer; transition:background .2s,color .2s, box-shadow .2s; }
.usage-segment button:hover { color:var(--text); }
.usage-segment button[aria-pressed="true"] { background:var(--surface); color:var(--text);  box-shadow:var(--shadow-sm); }
.usage-chart { margin:0; min-width:0; }
.usage-chart-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.usage-chart-caption h3 { font-size:17px; margin:0; }
.usage-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--text-secondary); }
.usage-legend span { display:inline-flex; align-items:center; gap:6px; }
.usage-key { display:inline-block; width:14px; height:3px; border-radius:3px; }
.usage-key--rect { width:8px; height:8px; border-radius:3px; }
.key-1 { background:var(--chart-1); }.key-2 { background:var(--chart-2); }.key-3 { background:var(--chart-3); }.key-4 { background:var(--chart-4); }
.usage-plot { position:relative; outline-offset:6px; }
.usage-plot svg { display:block; width:100%; height:auto; overflow:visible; }
.usage-grid-line { stroke:var(--border); stroke-width:1; stroke-dasharray:3 5; opacity:.65; }
.usage-tick { fill:var(--text-muted); font:12px var(--font-sans); }
.usage-label { fill:var(--text-secondary); font:12px var(--font-sans); }
.usage-line { stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.usage-line.is-animated { stroke-dasharray:1; animation:usage-line-draw .9s ease both; }
.line-1 { stroke:var(--chart-1); }.line-2 { stroke:var(--chart-2); }
.fill-1 { fill:var(--chart-1); }.fill-2 { fill:var(--chart-2); }.fill-3 { fill:var(--chart-3); }.fill-4 { fill:var(--chart-4); }
.usage-column { transform- :view- ; }
.usage-column.is-animated { animation:usage-bar-rise .65s cubic-bezier(.2,.7,.2,1) both; }
.usage-end-ring { stroke:var(--surface); stroke-width:2; }
.usage-crosshair { stroke:var(--text-muted); stroke-width:1; stroke-dasharray:3 3; }
.usage-band { fill:var(--accent); opacity:.07; rx:5; }
.usage-tooltip { position:absolute; z-index:2; min-width:176px; max-width:calc(100% - 16px); padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--surface);  box-shadow:var(--shadow-md); font-size:13px; pointer-events:none; animation:usage-tip-in .12s ease; }
.usage-tooltip p { margin:0; display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
.usage-tooltip .tt-time { color:var(--text-muted); margin-bottom:8px; }
.usage-tooltip .tt-name { color:var(--text-secondary); }
.usage-tooltip .tt-value { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.usage-tt-key { display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:6px; }
.usage-tooltip p:last-child:not(:first-child) { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.usage-chart-empty,.usage-empty { padding:32px 20px; margin:0; border-radius:12px; background:var(--bg-secondary); color:var(--text-muted); text-align:center; font-size:14px; }
.usage-empty p { margin:0; }
.usage-sync { border-left:3px solid var(--chart-4); padding:10px 14px; margin:0 0 20px; background:var(--bg-secondary); font-size:14px; color:var(--text-secondary); }
.usage-table { margin-top:16px; }
.usage-table summary { font-size:14px; color:var(--text-muted); cursor:pointer; }
.usage-table [data-table] { overflow-x:auto; }
.usage-table table { font-size:14px; margin-top:14px; }
.usage-table td,.usage-models td { font-variant-numeric:tabular-nums; }
.usage-table .doc-caption { font-size:14px; }
.usage-month { display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:14px; }
.usage-month select { max-width:190px; padding:9px 32px 9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font:500 14px var(--font-sans); cursor:pointer; }
.usage-top-stats--deepseek { padding-bottom:26px; border-bottom:1px solid var(--border); grid-template-columns:1fr 1fr; }
.usage-breakdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-bottom:30px; }
.usage-breakdown .stat-value { font-size:26px; }
.usage-models { margin-top:26px; padding-top:24px; border-top:1px solid var(--border); overflow-x:auto; }
.usage-models h3 { font-size:17px; margin:0 0 16px; }
.usage-models table { font-size:14px; width:100%; }
.usage-models th,.usage-models td { padding:12px 16px; }
.usage-models th:first-child,.usage-models td:first-child { padding-left:0; }
.usage-detail-row { display:flex; flex-wrap:wrap; gap:16px 32px; }
.usage-detail-row details[open] { flex-basis:100%; }
@keyframes usage-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes usage-bar-rise { from { opacity:.3; transform:scaleY(.03); } to { opacity:1; transform:scaleY(1); } }
@keyframes usage-line-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes usage-tip-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:1000px) { .usage-codex-layout { grid-template-columns:minmax(0,1fr); }.usage-quota-panel { padding:24px; }.usage-quota-panel [data-codex-body] { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }.usage-quota-panel [data-codex-body][hidden] { display:none; }.usage-quota-row:nth-of-type(1) { grid-column:1; grid-row:1; }.usage-quota-row:nth-of-type(3) { grid-column:2; grid-row:1; }.usage-meter { margin-bottom:20px; }.usage-quota-details { grid-column:1/-1; }.usage-quota-details .usage-chart-caption { flex-direction:row; } }
@media (max-width:600px) { .usage-hero { align-items:flex-start; flex-direction:column; gap:16px; }.usage-updated time { display:inline; margin-left:6px; }.usage-card { padding:22px 18px; border-radius:18px; }.usage-card-head { flex-wrap:wrap; margin-bottom:24px; }.usage-head-meta { gap:8px; }.usage-brand-icon { width:40px; height:40px; border-radius:12px; font-size:22px; }.usage-brand h2 { font-size:22px; }.usage-top-stats { gap:16px; grid-template-columns:1fr; }.usage-top-stats--deepseek { grid-template-columns:1fr 1fr; }.usage-top-stats .stat-value { font-size:32px; }.usage-top-stats--deepseek .stat-value { font-size:34px; }.usage-breakdown { grid-template-columns:1fr 1fr; gap:20px; }.usage-breakdown .stat-value { font-size:24px; }.usage-quota-panel { padding:20px 16px; }.usage-quota-panel [data-codex-body] { gap:0 16px; }.usage-quota-row strong { font-size:28px; }.usage-meter-head { font-size:12px; }.usage-chart-toolbar { gap:10px; }.usage-scope { font-size:13px; }.usage-month { width:100%; justify-content:space-between; }.usage-month select { max-width:220px; }.usage-plot svg { overflow:hidden; } }
@media (prefers-reduced-motion:reduce) { .usage-card,.usage-column.is-animated,.usage-line.is-animated,.usage-tooltip { animation:none; }.usage-meter-fill,.usage-segment button { transition:none; } }
/* =============================== Components =============================== */
.doc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }.button { display: inline-flex; gap: 20px; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; font: 500 16px/1.5 var(--font-sans); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);  box-shadow: none; white-space: nowrap; transition: transform 200ms, background 200ms, border-color 200ms; }
.button--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }.button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }.button.button--secondary, .button--outline { background: var(--surface); color: var(--text); }.button.button--secondary:hover { background: var(--bg-secondary); color: var(--text); }.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(0); }.button--sm { min-height: 36px; padding: 6px 12px; }
.text-link { font-size: 16px; display: inline-flex; align-items: center; gap: 10px; }.arrow { display: inline-block; transition: transform 200ms; }a:hover .arrow { transform: translateX(3px); }
.tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0; }.tag { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 16px; color: var(--text-secondary); background: var(--bg); }
.doc-disclosure { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }.doc-disclosure summary { color: var(--text-secondary); font-size: 16px; font-weight: 600; }.doc-disclosure table { margin-top: 20px; }.doc-disclosure ul { padding-left: 20px; margin-top: 16px; color: var(--text-secondary); }
table { width: 100%; display: table; table-layout: fixed; border-collapse: collapse; margin: 24px 0; font-size: 16px; }table th, table td { padding: 14px 16px; border: 1px solid var(--border); vertical-align: top; text-align: left; overflow-wrap: anywhere; }table th { background: var(--bg-secondary); font-weight: 600; color: var(--text); }table td { color: var(--text-secondary); }table tr { border: 0; }table tr:nth-child(2n) { background: transparent; }.page-resume table th { width: 25%; }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 30; max-width: calc(100vw - 48px); padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);  box-shadow: var(--shadow-md); }
/* =============================== Animation =============================== */
@media (hover:hover) { .project-card:hover, .project-entry:hover, .post-card:hover { transform: translateY(-3px); border-color: var(--border-hover);  box-shadow: var(--shadow-md); } }
.hero-enter { animation: fade-up 600ms both; }.hero-copy .doc-actions { animation-delay: 240ms; }.hero-visual { animation-delay: 320ms; }
[data-reveal].reveal-ready { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }[data-reveal].reveal-ready.is-visible { opacity: 1; transform: none; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }@keyframes window-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }@keyframes cursor-blink { 50% { opacity: 0; } }
/* =============================== Responsive =============================== */
@media (max-width:1199px) {
  .project-workspace .page-layout { grid-template-columns: 190px minmax(0,1fr); gap: 28px; }
  .project-menu { grid-column: 1; grid-row: 1 / span 2; }
  .project-toc { grid-column: 2; grid-row: 1; position: static; max-height: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; }
  .project-workspace .page-main { grid-column: 2; grid-row: 2; }
  .project-toc summary { pointer-events: auto; cursor: pointer; margin: 0; }
  .project-toc summary::after { content: ' ＋'; float: right; }
  .project-toc details[open] nav { padding-top: 12px; }

  .nav-inner { gap: 30px; }.desktop-nav { gap: 18px; }.nav-actions { gap: 14px; }.nav-actions .nav-download { padding-left: 14px; }
  .home-hero { gap: 28px; padding-block: 84px; }.code-body { padding: 20px 16px; font-size: 16px; }.code-fields p { font-size: 16px; gap: 10px; }
  .page-resume .page-layout { grid-template-columns: 170px minmax(0,1fr); max-width: 1150px; }.resume-rail { display: none; }.about-layout { gap: 48px; }
}
@media (min-width:768px) and (max-width:1023px) {
  .site-container { padding-inline: 24px; }.nav-inner { gap: 26px; }.desktop-nav { gap: 18px; }.nav-github { display: none; }.nav-actions .nav-download { border: 0; padding-left: 0; }
  .home-hero { gap: 24px; grid-template-columns: 1.15fr 1fr; }.desktop-break { display: none; }.code-title { padding-inline: 12px; }
  .now-grid { gap: 22px; }.now-grid article { padding-left: 16px; }.about-layout { grid-template-columns: 1fr 220px; gap: 36px; }
}
@media (max-width:767px) {
  .project-workspace .page-layout { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
  .project-menu, .project-toc { position: static; max-height: none; width: 100%; }
  .project-toc { order: 1; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .project-menu { order: 0; padding-right: 0; border-right: 0; }
  .project-workspace .page-main { order: 2; width: 100%; padding-top: 16px; }
  .project-menu summary { pointer-events: auto; cursor: pointer; margin: 0 0 10px; font-size: 16px; font-weight: 400; color: var(--text-secondary); }
  .project-menu summary::after { content: ' ＋'; float: right; }
  .project-menu nav { flex-direction: row; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
  .project-menu nav::-webkit-scrollbar { display: none; }
  .project-menu nav a { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
  .project-menu nav a[aria-current] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
  .project-workspace .project-title, .project-workspace .case-hero h1 { font-size: 30px; }
  .project-workspace .case-section h2, .project-section > h3 { font-size: 24px; }
  .project-workspace .case-original h3 { font-size: var(--fs-subhead); }
  .project-workspace .case-section, .project-section { margin-top: 36px; }

  .site-container { padding-inline: 18px; }.nav-inner { height: 64px; gap: 16px; }.desktop-nav, .nav-actions > a { display: none; }.nav-actions { margin-left: auto; }.mobile-menu { display: block; }.mobile-menu summary { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; list-style: none; }.mobile-menu summary::-webkit-details-marker { display: none; }.mobile-menu summary > span { font-size: 20px; }.mobile-menu[open] summary > span { transform: rotate(45deg); }
  .mobile-menu nav { position: absolute; top: 64px; left: 0; right: 0; background: var(--surface); padding: 14px 18px 20px; border-bottom: 1px solid var(--border);  box-shadow: var(--shadow-md); display: grid; gap: 2px; max-height: calc(100dvh - 64px); overflow-y: auto; }.mobile-menu nav a { padding: 8px 12px; color: var(--text-secondary); font-size: 16px; }.mobile-menu nav a[aria-current] { color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); }.mobile-menu nav .nav-download { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
  .page-layout { padding-bottom: 72px; }.home-hero { grid-template-columns: minmax(0,1fr); gap: 38px; padding: 56px 0 70px; }.home-hero h1 { font-size: clamp(30px,9.4vw,40px); margin: 14px 0 20px; letter-spacing: -.06em; }.desktop-break { display: none; }.hero-visual { width: 100%; max-width: 430px; margin-inline: auto; padding: 0; }.code-body { padding: 20px 24px; font-size: 16px; }.code-fields { margin-block: 20px; }.code-fields p { font-size: 16px; margin-bottom: 12px; }.code-title { padding-block: 12px; }
  .home-section + .home-section { margin-top: 76px; }.section-heading { gap: 12px; margin-bottom: 24px; }.section-heading h2 { font-size: 24px; }.section-heading h2 span { display: block; margin: 5px 0 0; font-size: 16px; }.section-heading > a { font-size: 16px; }
  .posts-empty { padding: 28px 24px; gap: 20px; align-items: flex-start; flex-direction: column; }.empty-symbol { width: auto; font-size: 30px; }.posts-empty h3 { font-size: 20px; }.posts-empty p { font-size: 18px; }.section-bottom { text-align: left; }
  .now-grid, .selected-projects, .project-list, .post-grid { grid-template-columns: minmax(0,1fr); }.now-grid { gap: 28px; }.now-grid article { padding-left: 22px; }.now-grid h3 { font-size: 20px; }
  .project-card, .project-entry, .post-card, .posts-index .post-card { padding: 26px; }.project-card h3, .project-entry h3, .post-card h3 { font-size: 20px; }
  .site-footer { flex-direction: column; padding-top: 28px; padding-bottom: 28px; gap: 18px; }.site-footer nav { padding: 0; gap: 28px; }.site-footer p { max-width: 270px; line-height: 1.8; }
  .page-hero { padding: 48px 0 32px; }.page-hero h1 { font-size: 30px; }.page-lead, .doc-lead, .lead { font-size: 18px; }.listing-toolbar { flex-direction: column; gap: 20px; align-items: stretch; }.search-field { flex-basis: auto; }.filter-bar { gap: 4px; }.filter-bar button { padding: 6px 12px; }.posts-index .posts-empty { min-height: 280px; }
  .about-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }.about-story section { margin-bottom: 42px; }.about-story p { font-size: 18px; }.about-interests { padding-left: 24px; }
  .breadcrumb { padding-top: 26px; font-size: 16px; }.case-hero { padding-top: 32px; }.case-hero h1 { font-size: 30px; }.case-section { margin-top: 44px; }.case-section h2 { font-size: 24px; }.process { grid-template-columns: minmax(0,1fr); }.case-meta { font-size: 16px; }
  .usage-grid { gap: 18px; }
  .page-resume .page-layout { display: block; padding-top: 40px; }.resume-toc, .resume-rail { display: none; }.doc-hero h1 { font-size: 30px; }.doc-section h2 { font-size: 24px; }.doc-section h3 { font-size: 20px; }.doc-actions { gap: 10px; }.button { padding: 11px 18px; gap: 14px; }.doc-note { padding: 20px; }table { font-size: 16px; }table th, table td { padding: 10px; }.page-resume table th { width: 28%; }.article-header h1 { font-size: 30px; }.article-end { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal].reveal-ready, .hero-enter { opacity: 1 !important; transform: none !important; }
  .project-card:hover, .project-entry:hover, .post-card:hover, .button:hover, a:hover .arrow { transform: none !important; }
}
@media (prefers-reduced-transparency:reduce) { .site-header { background: var(--surface); backdrop-filter: none; } }
/* =============================== Print =============================== */
@media print {
  @page { size: A4; margin: 14mm; }
  :root, html[data-theme] { color-scheme: light; --bg: #fff; --surface: #fff; --text: #20232b; --text-secondary: #333; --text-muted: #555; --border: #ccc; --bg-secondary: #f5f5f5; --accent: #333; }
  html { scroll-behavior: auto; }body { background: var(--bg); font-size: 10pt; }
  .site-header, .site-footer, .resume-toc, .resume-rail, .project-menu, .project-toc, .doc-actions, .toast, .skip-link, .copy-button, .usage-tooltip { display: none !important; }
  .site-container, .page-resume .page-layout, .project-workspace .page-layout { display: block; max-width: none; width: 100%; padding: 0; margin: 0; }.page-main { width: 100%; }
  .doc-hero { padding-bottom: 14px; }.doc-hero h1 { font-size: 25pt; }.doc-lead { font-size: 11pt; }.doc-section { margin-top: 22px; }.doc-section h2 { font-size: 16pt; margin-bottom: 10px; }.doc-section h3 { font-size: 12pt; }.doc-kicker, .doc-meta, .doc-caption { font-size: 9pt; }
  .doc-note { padding: 12px; margin: 12px 0; }table { font-size: 9pt; }table th, table td { padding: 6px 8px; }tr { break-inside: avoid; }
  h1,h2,h3,summary { break-after: avoid; }.doc-section { break-inside: auto; }p,li { orphans: 3; widows: 3; }.doc-link-list li { padding: 10px 0; }
  details::details-content { display: block !important; content-visibility: visible !important; height: auto !important; }details > * { display: block; }details > table { display: table; }details > summary { list-style: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }* { animation: none !important; transition: none !important;  box-shadow: none !important; }a { color: inherit; }
}

/* The native title link covers the complete card, including whitespace. */
.post-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.post-card:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.post-meta [data-article-reads]:not([hidden])::before { content: "·"; margin-right: 8px; }
.site-stats { display: block; color: var(--text-secondary); font-size: 16px; margin-top: 10px; }
/* Comments use an open list; only the writing field has a surface. */
.article-comments { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 32px; }
.comments-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.comments-heading h2 { margin: 0; font-size: 24px; }
.comments-heading [data-comment-count], [data-comment-counter] { color: var(--text-secondary); font-size: 16px; }
.comment-composer { margin: 0 0 28px; padding: 0; border: 0; background: transparent; }
.comment-composer-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; }
.comment-avatar { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: var(--text-secondary); background: var(--bg-secondary); overflow: hidden; }
.comment-avatar svg { width: 18px; height: 18px; fill: currentColor; }
.article-comments textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 112px; font: inherit; font-size: 16px; line-height: 1.75; padding: 14px 16px; color: var(--text); background: var(--bg-secondary); border: 1px solid transparent; border-radius: 8px; resize: vertical; }
.article-comments textarea::placeholder { color: var(--text-secondary); opacity: .8; }
.article-comments textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.comment-composer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.comment-composer-actions .button { min-height: 38px; padding: 7px 16px; font-size: 16px; border-radius: 6px; }
.article-comments button:disabled { opacity: .5; cursor: not-allowed; }
.comment-item { display: flex; align-items: flex-start; gap: 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 24px 0; margin: 0; }
.comment-item:last-child { border-bottom: 0; }
.comment-content { flex: 1; min-width: 0; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; line-height: 1.5; }
.comment-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comment-meta strong { color: var(--text); font-size: 16px; font-weight: 600; }
.comment-meta time, .comment-reference { color: var(--text-secondary); font-size: 16px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; line-height: 1.8; font-size: 17px; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.comment-reply-button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 16px; padding: 4px 0; cursor: pointer; }
.comment-reply-button:hover { color: var(--accent); }
.comment-reply-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.comment-replies { margin-top: 16px; padding: 0; border: 0; }
.comment-reply { border: 0; padding: 14px 0; margin: 0; gap: 10px; }
.comment-reply + .comment-reply { border: 0; }
.comment-reply .comment-avatar { flex-basis: 24px; width: 24px; height: 24px; }
.comment-reply .comment-avatar svg { width: 16px; height: 16px; }
.comment-reply-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--text-secondary); font-size: 16px; }
.comment-composer.is-replying { margin: 16px 0 8px; }
.comment-composer.is-replying .comment-composer-heading { display: none; }
.comment-composer.is-replying textarea { min-height: 88px; }
.article-comments [data-comment-status], .comment-thread-status { margin: 16px 0; color: var(--text-secondary); font-size: 16px; }
.article-comments [data-comment-status]:empty, .comment-thread-status:empty { display: none; }
.article-comments [data-comment-more] { margin-top: 16px; }
@media (max-width: 540px) {
  .article-comments { padding-top: 24px; }
  .comment-item { gap: 10px; padding: 20px 0; }
  .comment-meta { align-items: flex-start; flex-direction: column; gap: 2px; }
  .comment-reply { padding: 12px 0; gap: 8px; }
  .comment-composer-actions { gap: 8px; }
}

.comment-body.is-deleted { color: var(--text-secondary); font-style: italic; }
.comment-manager { width: min(560px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface); }
.comment-manager::backdrop { background: rgb(0 0 0 / .4); }
.comment-manager h2 { font-size: 22px; margin: 0 0 20px; }
.comment-manager textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--bg-secondary); padding: 12px; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
.comment-manager textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comment-manager-actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 20px; }
.comment-manager [data-manager-status] { color: var(--text-secondary); }