/* 栗谱研究所 · Lipu Labs — hand-built visual system */
:root {
  --bg: #0a1120;
  --bg-soft: #10192a;
  --surface: #131e32;
  --surface-2: #18243a;
  --text: #eef5f1;
  --heading: #f6faf4;
  --muted: #a1b0bd;
  --soft-muted: #79889c;
  --accent: #c8fa7d;
  --accent-deep: #9ad655;
  --purple: #b6a6ff;
  --orange: #ffb394;
  --line: rgba(230, 245, 247, .12);
  --line-strong: rgba(230, 245, 247, .21);
  --shadow: 0 24px 90px rgba(0, 0, 0, .25);
  --radius: 22px;
}
html[data-theme="light"] {
  --bg: #f5f6ed;
  --bg-soft: #edf0e7;
  --surface: #fffefa;
  --surface-2: #e9eddf;
  --text: #1a2a32;
  --heading: #10212a;
  --muted: #556571;
  --soft-muted: #71818a;
  --accent: #b0e76a;
  --accent-deep: #417b2a;
  --purple: #8977d6;
  --orange: #d9785a;
  --line: rgba(23, 47, 56, .13);
  --line-strong: rgba(23, 47, 56, .23);
  --shadow: 0 24px 90px rgba(54, 71, 49, .11);
}
html[data-theme="light"] .accent-word { color: #467d2c; }
html[data-theme="light"] .accent-word::after { background: #9d84ed; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
img { display: block; }
::selection { background: var(--accent); color: #112019; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) { 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:focus { position: fixed; z-index: 900; top: 12px; left: 12px; background: var(--accent); color: #111; padding: 10px 15px; border-radius: 7px; }
.container { width: min(1260px, calc(100% - 88px)); margin-inline: auto; }
.site-texture { pointer-events: none; position: fixed; inset: 0; z-index: 100; opacity: .19; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; z-index: 0; pointer-events: none; top: 0; left: 0; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(190,250,127,.042), transparent 65%); opacity: 0; transform: translate(-50%,-50%); transition: opacity .4s; }
.read-progress { position: fixed; inset: 0 auto auto 0; width: 0; height: 3px; background: var(--accent); z-index: 220; box-shadow: 0 0 20px rgba(200,250,125,.5); }
.site-header { height: 88px; position: sticky; top: 0; z-index: 130; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 11px; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; transition: transform .45s cubic-bezier(.2,1.5,.5,1); }
.brand:hover .brand-mark { transform: rotate(-13deg) scale(1.08); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; gap: 4px; }
.brand-text strong { font-size: 19px; font-weight: 780; letter-spacing: -.6px; }
.brand-text small { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 2.7px; }
.desktop-nav { display: flex; align-items: center; gap: 9px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 68%, transparent); }
.desktop-nav a { color: var(--muted); font-size: 13px; font-weight: 620; padding: 9px 18px; border-radius: 99px; transition: background .25s, color .25s; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: var(--surface-2); color: var(--heading); }
.desktop-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--line); }
.header-actions { display: flex; gap: 9px; align-items: center; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); transition: transform .2s, border-color .2s, background .2s; }
.icon-btn:hover { transform: translateY(-2px); border-color: var(--accent-deep); }
.icon-btn svg, .archive-search svg, .search-input-wrap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .icon-sun { display: none; }
html[data-theme="light"] .icon-btn .icon-sun { display: block; }
html[data-theme="light"] .icon-btn .icon-moon { display: none; }
.menu-toggle, .mobile-nav { display: none; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--accent); box-shadow: 0 0 0 5px rgba(200,250,125,.11); animation: pulsing 2s ease-in-out infinite; }
@keyframes pulsing { 50% { box-shadow: 0 0 0 9px rgba(200,250,125,0); opacity:.7; } }
.section-kicker { margin: 0 0 16px; font-size: 11px; letter-spacing: 2.2px; font-weight: 800; color: var(--accent-deep); text-transform: uppercase; }
.accent-text { color: var(--accent-deep); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; border: 1px solid transparent; padding: 16px 23px; border-radius: 11px; line-height: 1.2; font-weight: 760; font-size: 14px; transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; }
.button span:last-child { font-size: 20px; font-weight: 400; line-height: .6; transition: transform .25s; }
.button:hover { transform: translateY(-4px); }
.button:hover span:last-child { transform: translate(3px, -2px); }
.button-primary { background: var(--accent); color: #16251d; box-shadow: 0 8px 35px rgba(190,250,100,.16); }
.button-primary:hover { background: #d8ff9e; box-shadow: 0 15px 42px rgba(190,250,100,.21); }
.button-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.button-secondary:hover { border-color: var(--accent-deep); }
.button-dark { background: #111a24; color: #ebffdc; border-color: #111a24; }
.text-link { display: inline-flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 770; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); transition: color .2s, gap .2s; }
.text-link:hover { color: var(--accent-deep); gap: 25px; }
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero-section { position: relative; overflow: hidden; padding-top: 74px; background: radial-gradient(ellipse 60% 70% at 79% 34%, rgba(117,126,210,.15), transparent 73%), radial-gradient(ellipse 50% 68% at -4% 88%, rgba(123,214,120,.075), transparent 75%); }
.hero-section::before { content: ""; position: absolute; width: 800px; height: 800px; right: -190px; top: -300px; border: 1px solid rgba(200,240,255,.08); border-radius: 50%; transform: rotate(-30deg); pointer-events: none; }
.hero-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.01fr) minmax(0, .99fr); gap: 34px; align-items: center; position: relative; z-index: 2; min-height: 630px; }
.hero-content { padding-bottom: 50px; position: relative; z-index: 3; }
.eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 13px; color: var(--accent-deep); font-weight: 800; font-size: 10px; letter-spacing: 1.7px; margin-bottom: 29px; }
.eyebrow-end { color: var(--soft-muted); margin-left: 2px; }
.hero-title { margin: 0; color: var(--heading); font-weight: 900; letter-spacing: -5.8px; line-height: 1.2; font-size: clamp(50px, 5.35vw, 82px); white-space: nowrap; }
.accent-word { color: var(--accent); position: relative; }
.accent-word::after { content: ""; position: absolute; left: 1%; right: 3%; bottom: -.045em; height: 8px; border-radius: 50%; background: var(--purple); opacity: .86; transform: rotate(-3deg); }
.hero-period { color: var(--orange); }
.hero-desc { margin: 33px 0 30px; max-width: 510px; font-size: 16px; color: var(--muted); line-height: 2.1; }
.hero-desc strong { color: var(--heading); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-footnote { display: flex; align-items: center; gap: 11px; margin-top: 51px; color: var(--soft-muted); font-size: 11px; font-weight: 580; white-space: nowrap; }
.hero-footnote b { color: var(--accent-deep); }
.mini-avatar { width: 34px; height: 34px; border-radius: 50%; background: #f5c892; color: #663b3c; display: grid; place-items: center; font-weight: 850; font-size: 15px; }
.tiny-divider { width: 1px; height: 20px; background: var(--line-strong); }
.hero-visual { width: 100%; position: relative; padding: 26px 23px 33px; max-width: 570px; justify-self: end; }
.lab-viewport { position: relative; background: #101a2d; border: 1px solid rgba(223,240,255,.19); border-radius: 19px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.33), 0 0 85px rgba(181,166,255,.09); transform: perspective(1100px) rotateY(-3deg) rotateX(1deg); transition: transform .28s ease; }
.lab-viewport::after { content:""; position: absolute; z-index: 0; inset:0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.11); }
.viewport-header { height: 48px; background: #17243a; border-bottom: 1px solid rgba(255,255,255,.075); display: flex; justify-content: space-between; align-items: center; padding: 0 18px; color: #9ba9c2; font: 12px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 9px; height: 9px; background: #e38c85; border-radius: 50%; }
.window-dots i:nth-child(2){ background:#e6c076; }.window-dots i:nth-child(3){ background:#7fbd88; }
.viewport-plus { color: var(--accent); font-size: 18px; }
.code-surface { height: 214px; padding: 21px 26px 11px; }
.code-lines { font: 12px/1.95 ui-monospace, "SFMono-Regular", Consolas, monospace; color: #e1eaf1; white-space: nowrap; }
.code-lines div { display: block; min-height: 23px; white-space: pre; }
.code-lines b { color: #51607d; font-weight: 400; display: inline-block; width: 42px; flex: 0 0 42px; }
.code-purple { color: #cdbbff; }.code-blue { color: #90c8ff; }.code-lime { color: #bbf679; }.code-orange { color: #ffbb98; }.code-muted { color: #8392b1; }
.typing-caret { display: inline-block; animation: cursorblink 1.2s step-end infinite; color: #c8fa7d; }
@keyframes cursorblink { 50% { opacity:0; } }
.viewport-divider { height: 1px; background: rgba(255,255,255,.075); }
.lab-display { height: 253px; overflow: hidden; position: relative; background: radial-gradient(ellipse 40% 50% at 52% 49%, rgba(200,250,125,.26), transparent 91%), linear-gradient(180deg,#152339,#162137); display: grid; place-items: center; }
.lab-display::before { content:""; position:absolute; inset: 0; opacity:.12; background-image: linear-gradient(#c4ffdd 1px, transparent 1px), linear-gradient(90deg,#c4ffdd 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, transparent, black 25%, transparent); }
.chestnut-mascot { width: 210px; height: 210px; z-index: 4; animation: floaty 5s ease-in-out infinite; filter: drop-shadow(0 16px 22px rgba(0,0,0,.22)); }
.orbit { position: absolute; border: 1px dashed rgba(204,244,194,.4); border-radius: 50%; aspect-ratio: 1; z-index: 1; }
.orbit-one { width: 250px; animation: spinner 30s linear infinite; }
.orbit-two { width: 360px; border-style: solid; border-color: rgba(214,207,255,.13); animation: spinner 36s linear infinite reverse; }
.orbit-two::after { content:""; position: absolute; width: 9px; height: 9px; background: #b7a8ff; border-radius: 50%; left: 7%; top: 17%; box-shadow: 0 0 17px #b7a8ff; }
.orbit-star { position: absolute; color: var(--accent); font-size: 16px; z-index: 3; }
.star-a { top: 30px; right: 100px; animation: twinkle 3s ease-in-out infinite; }.star-b { left: 80px; bottom: 35px; color: #beaeff; }.star-c { right: 52px; bottom: 48px; }
.orbit-label { position: absolute; color: #d0e5e2; font: 10px ui-monospace, Consolas, monospace; letter-spacing: 1px; z-index: 6; }
.orbit-label-left { bottom: 25px; left: 25px; }.orbit-label-right { right: 24px; top: 32px; font-size: 30px; }
.viewport-status { height: 48px; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 0 18px; font: 10px ui-monospace,Consolas,monospace; background: #152035; color: #a6b5c5; }
.viewport-status >span:first-child { display:flex; align-items:center; gap:12px; }
.viewport-status .pulse-dot { width: 6px; height: 6px; }
.terminal-prompt { color: #8291aa; }.terminal-prompt em { color: #c8fa7d; font-style: normal; }
.floating-chip { position:absolute; z-index:6; display: flex; align-items: center; border: 1px solid rgba(235,245,255,.26); background: #25374b; box-shadow: 0 16px 37px rgba(0,0,0,.2); color: #f4faff; font: 10px ui-monospace, Consolas, monospace; letter-spacing: 1px; padding: 13px 15px; border-radius: 9px; }
.chip-top { top: 0; right: -12px; transform: rotate(4deg); gap: 13px; }
.status-ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 11px rgba(200,250,125,.65); }
.chip-bottom { bottom: 10px; left: -3px; gap: 13px; transform: rotate(-5deg); line-height: 1.7; }
.chip-bottom strong { font-weight: 850; color: var(--accent); }
.chip-symbol { color: #0f2130; background: var(--accent); border-radius: 8px; width: 31px; height: 31px; display:grid; place-items:center; font: 18px sans-serif; }
@keyframes floaty { 50% { transform:translateY(-10px) rotate(-2deg); } }
@keyframes spinner { to { transform:rotate(360deg); } }
@keyframes twinkle { 50% { opacity:.35; transform:scale(.65); } }
.hero-bottom { display: flex; position: relative; z-index: 2; align-items: center; gap: 22px; padding: 18px 0 31px; font: 10px ui-monospace,Consolas,monospace; color: var(--soft-muted); letter-spacing: 1.3px; }
.scroll-line { width: 85px; height: 1px; background: var(--line-strong); }
.hero-bottom span:last-child { margin-left: auto; }
.marquee-band { height: 61px; overflow: hidden; display: flex; align-items: center; background: var(--accent); color: #17231d; border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(0,0,0,.08); }
.marquee-track { display:flex; width: max-content; gap: 27px; align-items:center; white-space:nowrap; font-size: 13px; font-weight: 900; letter-spacing: 2.1px; animation: marquee 33s linear infinite; }
.marquee-track i { font-style:normal; font-size:19px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.section { padding: 128px 0 26px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom: 42px; }
.section-heading h2 { font-size: clamp(33px,3.4vw,52px); font-weight: 850; line-height: 1.28; margin:0; letter-spacing:-2px; color:var(--heading); }
.section-heading >p { margin:0 0 6px; color:var(--muted); font-size: 14px; line-height:1.8; }
.fields-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.field-card { overflow:hidden; position:relative; padding: 25px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); transition: transform .35s, border-color .35s, box-shadow .35s; }
.field-card:hover { transform:translateY(-9px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.field-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font: 10px ui-monospace,Consolas,monospace; letter-spacing:.4px; }
.round-arrow { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; font:17px sans-serif; color: var(--text); transition: transform .3s, background .3s; }
.field-card:hover .round-arrow { transform: rotate(45deg); background:var(--accent); color:#19251d; }
.field-art { margin:25px 0 22px; height:154px; border-radius:15px; position:relative; overflow:hidden; display:grid; place-items:center; }
.ai-art { background: radial-gradient(circle at 50% 60%,rgba(192,159,255,.32),transparent 66%), #20273f; }
.ai-ring { position:absolute; width:138px; height:138px; border-radius:50%; border:1px dashed rgba(205,189,255,.65); transform:rotate(-28deg) scaleX(.65); }
.ai-ring.ring-b { transform:rotate(50deg) scaleX(.65); border-color:rgba(203,250,125,.55); }
.art-center { position:relative; font: 900 62px/1 sans-serif; letter-spacing:-5px; color:#efeafe; }
.art-center span { font-size:15px; position:absolute; top:-8px; right:-22px; color:#c8fa7d; }
.agent-art { background:radial-gradient(circle at center,rgba(200,250,125,.24),transparent 70%),#18343b; }
.agent-path { width:230px; height:1px; border-top:2px dashed rgba(194,248,155,.48); transform:rotate(-19deg); }
.agent-node { position:absolute; z-index:2; width:57px; height:57px; border-radius:17px; background:#d5fa9a; color:#172b28; display:grid; place-items:center; font:900 27px/1 sans-serif; box-shadow:0 12px 30px #0c1c2880; }
.agent-node.n1 { transform:translate(-79px,25px) rotate(-10deg); }.agent-node.n2 { transform:translate(5px,-30px) rotate(7deg); background:#f6dfb5; }.agent-node.n3 { transform:translate(88px,14px) rotate(14deg); background:#adccff; }
.code-art { background:radial-gradient(circle at 20% 20%,rgba(170,146,251,.33),transparent 70%),#1c253d; font: 650 clamp(17px,2vw,29px) ui-monospace,Consolas,monospace; color:#fff; }
.code-art em { font-style:normal; color:#c8fa7d; }.code-art-cursor { position:absolute; bottom:24px; left:30px; font-size:30px; color:#f5ad98; animation:cursorblink 1s step-end infinite; }
.field-card h3 { font-size:25px; letter-spacing:-.7px; line-height:1.3; margin:0 0 10px; color:var(--heading); }
.field-card p { min-height: 66px; margin:0 0 28px; color:var(--muted); font-size:14px; line-height:1.9; }
.field-tag { font:700 10px ui-monospace,Consolas,monospace; color:var(--soft-muted); letter-spacing:1.2px; }
.section-featured { padding-top:133px; }
.featured-story { display:grid; grid-template-columns: 1fr 1fr; min-height:475px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:transform .35s, border-color .35s; }
.featured-story:hover { transform:translateY(-7px); border-color:var(--accent-deep); }
.featured-copy { padding:42px 48px; display:flex; flex-direction:column; align-items:flex-start; position:relative; z-index:2; }
.pill { display:inline-flex; align-items:center; gap:9px; padding:7px 13px; border:1px solid var(--line-strong); border-radius:99px; font-size:11px; font-weight:750; color:var(--accent-deep); }
.light-pill { background:rgba(200,250,125,.09); }
.featured-no { color:var(--soft-muted); font: 10px ui-monospace,Consolas,monospace; letter-spacing:1px; margin-top:44px; }
.featured-copy h3 { max-width:440px; font-size:clamp(28px,3vw,41px); color:var(--heading); font-weight:850; letter-spacing:-1.4px; line-height:1.45; margin:15px 0 14px; }
.featured-copy p { max-width:460px; color:var(--muted); font-size:14px; line-height:2; margin:0 0 20px; }
.story-meta { display:flex; gap:13px; align-items:center; color:var(--soft-muted); font:11px ui-monospace,Consolas,monospace; }
.meta-dot { width:4px;height:4px;border-radius:50%;background:var(--soft-muted); }
.featured-go { display:flex; width:100%; justify-content:space-between; align-items:center; margin-top:auto; font-size:14px; font-weight:850; color:var(--accent-deep); padding-top:27px; }
.featured-go span { font-size:28px; }
.featured-art { background:radial-gradient(circle at 53% 46%,rgba(188,234,122,.2),transparent 49%),linear-gradient(135deg,#192c3b,#1c2a3e); position:relative; overflow:hidden; display:grid; place-items:center; }
.featured-grid, .portrait-grid, .banner-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(218,248,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(218,248,212,.07) 1px,transparent 1px); background-size:31px 31px; mask-image:radial-gradient(circle,black,transparent 83%); }
.feature-orbit { border-radius:50%; border:1px solid rgba(197,251,122,.3); position:absolute; aspect-ratio:1; }
.feature-orbit.o1 { width:320px; border-style:dashed; animation:spinner 35s linear infinite; }.feature-orbit.o2 { width:470px; border-color:rgba(204,186,255,.2); }
.feature-center { position:relative; z-index:2; width:178px; height:178px; border:1px solid #d9ff9f; border-radius:27px; background:linear-gradient(145deg,#cffa8a,#a8da67); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:20px; color:#1b352b; transform:rotate(-8deg); box-shadow:0 20px 55px #0006; font:800 14px ui-monospace,Consolas,monospace; }
.feature-center .feature-symbol { font-size:69px; line-height:1; }
.feature-line { width:110px; height:2px; position:absolute; background:#bdffa4; box-shadow:0 0 21px #c3ffa9; }
.feature-line-a { transform:translate(-150px,-89px) rotate(45deg); }.feature-line-b { transform:translate(150px,89px) rotate(45deg); }
.feature-chip { position:absolute; bottom:22px; right:21px; border:1px solid #bfdca8; background:#172c32; color:#d2f1c9; padding:8px 11px; border-radius:4px; font:10px ui-monospace,monospace; }
.section-latest { padding-top:130px; padding-bottom:110px; }
.articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.article-card { min-height:265px; padding:27px; border-radius:18px; border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; transition:transform .3s,border-color .3s,background .3s; }
.article-card:hover { border-color:var(--accent-deep); transform:translateY(-7px); background:var(--surface-2); }
.article-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.article-category { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:700; }
.cat-dot { width:7px;height:7px;border-radius:50%; background:#ac9bff; }
.cat-dot.cat-agent { background:#c8fa7d; }.cat-dot.cat-code { background:#ffba9b; }.cat-dot.cat-notes { background:#9cc9e7; }
.article-card-arrow { font-size:21px; line-height:1; transition:transform .2s; }
.article-card:hover .article-card-arrow { transform:translate(3px,-3px);color:var(--accent-deep); }
.article-card h3 { color:var(--heading); font-size:20px; font-weight:780; line-height:1.5; letter-spacing:-.3px; margin:26px 0 10px; }
.article-card p { color:var(--muted); font-size:13px; line-height:1.9; margin:0 0 30px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:19px; border-top:1px solid var(--line); color:var(--soft-muted); font:11px ui-monospace,Consolas,monospace; }
.more-center { display:flex; justify-content:center; margin:43px 0 0; }
.closing-section { padding:0 0 125px; }
.closing-card { padding:76px 80px; position:relative; isolation:isolate; overflow:hidden; background:var(--accent); color:#1a2e23; border-radius:24px; }
.closing-card .section-kicker { color:#41632f; }
.closing-card h2 { position:relative; z-index:2; font-size:clamp(34px,4.2vw,61px); letter-spacing:-2.5px; font-weight:900; line-height:1.34; margin:0 0 19px; }
.closing-card h2 span { color:#537a43; }
.closing-card >p:not(.section-kicker) { position:relative; z-index:2; font-size:14px; margin:0 0 28px; color:#435a46; }
.closing-card .button { position:relative;z-index:2; }
.closing-orbits { position:absolute; width:480px;height:480px; right:-100px; top:-140px; z-index:-1; transform:rotate(-25deg); }
.closing-orbits i { position:absolute; display:block; border:1px solid rgba(25,55,30,.17); border-radius:50%; inset:0; }.closing-orbits i:nth-child(2) { inset:45px; }.closing-orbits i:nth-child(3) { inset:90px; border-style:dashed; }
.closing-stamp { position:absolute; right:95px; bottom:35px; font:900 58px/.86 ui-monospace,Consolas,monospace; letter-spacing:-6px; transform:rotate(-9deg); opacity:.14; }
.closing-stamp span { font-size:52px; margin-left:17px; }
/* Archives / inner pages */
.page-hero { padding-top: 117px; padding-bottom: 37px; position:relative; }
.page-title { margin:0; color:var(--heading); font-size:clamp(57px,8.2vw,116px); letter-spacing:-6px; font-weight:900; line-height:1.25; }
.title-asterisk { vertical-align:top; font-size:clamp(24px,3.3vw,42px); letter-spacing:0; color:var(--purple); margin-left:20px; display:inline-block; animation:wiggle 10s linear infinite; }
@keyframes wiggle { 50% { transform:rotate(160deg); } }
.page-desc { margin:18px 0 0; line-height:2; color:var(--muted); font-size:16px; }
.archive-tools { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:58px 0 0; padding-bottom:35px; border-bottom:1px solid var(--line); }
.archive-filters { display:flex; flex-wrap:wrap; gap:7px; }
.filter-btn { background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:9px; padding:10px 14px; font-size:12px; font-weight:730; transition:background .2s,color .2s,border-color .2s; }
.filter-btn:hover { color:var(--heading); border-color:var(--accent-deep); }
.filter-btn.is-active { color:#14211a; background:var(--accent); border-color:var(--accent); }
.filter-btn span { font:11px ui-monospace,monospace; margin-left:5px; opacity:.62; }
.archive-search { display:flex; gap:11px; align-items:center; color:var(--muted); border:1px solid var(--line-strong); border-radius:9px; padding:10px 13px; min-width:220px; background:var(--surface); }
.archive-search input { border:0; background:transparent; outline:0; color:var(--heading); width:100%; min-width:0; font-size:12px; }
.archive-search input::placeholder { color:var(--soft-muted); }
.archive-section { padding-bottom:140px; }
.archive-count { display:flex; justify-content:space-between; margin:7px 0 0; padding:0 0 14px; color:var(--soft-muted); font:11px ui-monospace,Consolas,monospace; letter-spacing:1px; }
.archive-count strong { color:var(--accent-deep); }
.archive-row { display:grid; grid-template-columns:64px minmax(0,1fr) 114px 35px; gap:16px; align-items:center; border-bottom:1px solid var(--line); padding:31px 4px; transition:background .2s,padding .3s; }
.archive-row:hover { background:color-mix(in srgb,var(--accent) 4%,transparent); padding-left:12px; }
.archive-index { color:var(--soft-muted); align-self:start; padding-top:33px; font:12px ui-monospace,Consolas,monospace; }
.archive-category { color:var(--accent-deep); font:750 11px ui-monospace,Consolas,monospace; }
.archive-row h2 { color:var(--heading); font-size:clamp(19px,2.15vw,26px); line-height:1.5; font-weight:780; letter-spacing:-.5px; margin:9px 0 6px; }
.archive-row p { margin:0; max-width:780px; color:var(--muted); font-size:13px; line-height:1.8; }
.archive-aside { display:flex; flex-direction:column; gap:8px; color:var(--soft-muted); font:11px ui-monospace,Consolas,monospace; white-space:nowrap; }
.archive-arrow { justify-self:end; font-size:23px; transition:transform .25s; }
.archive-row:hover .archive-arrow { transform:translate(5px,-5px); color:var(--accent-deep); }
.archive-empty { text-align:center; padding:90px 20px; }
.archive-empty >span { color:var(--purple); font:50px ui-monospace,monospace; }
.archive-empty h3 { font-size:28px; color:var(--heading); margin:16px 0 6px; }
.archive-empty p { color:var(--muted); margin:0 0 23px; }
/* Articles */
.article-hero { padding-top:67px; }
.back-link { display:inline-flex; color:var(--muted); font-size:13px; font-weight:650; margin-bottom:66px; transition:color .2s; }
.back-link:hover { color:var(--accent-deep); }
.article-hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:17px; color:var(--soft-muted); font:12px ui-monospace,Consolas,monospace; }
.sample-tag { color:var(--soft-muted); font:11px sans-serif; }
.article-hero-meta>span:last-child { margin-left:auto; }
.article-heading { max-width:920px; color:var(--heading); font-size:clamp(37px,5.4vw,72px); letter-spacing:-3px; font-weight:860; line-height:1.32; margin:27px 0 18px; }
.article-intro { color:var(--muted); font-size:19px; line-height:1.9; max-width:780px; margin:0; }
.article-byline { display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin:34px 0 50px; color:var(--soft-muted); font-size:12px; }
.article-byline img { border-radius:12px; }
.article-byline div { display:flex; flex-direction:column; line-height:1.5; margin-right:5px; }
.article-byline div strong { color:var(--heading); font-size:13px; }
.article-byline div span { font-size:11px; }
.byline-divider { height:23px; width:1px; background:var(--line-strong); margin:0 9px; }
.article-banner { height:248px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:40px 60px; border-radius:21px; background:linear-gradient(115deg,#1c3540,#222d4e); color:#e6fae8; }
.article-banner.banner-智能体 { background:linear-gradient(115deg,#193d32,#203653); }
.article-banner.banner-代码实验 { background:linear-gradient(115deg,#45313e,#212d43); }
.article-banner.banner-开发手记 { background:linear-gradient(115deg,#2b3b4c,#24384a); }
.banner-text { position:relative; z-index:2; font:750 20px ui-monospace,Consolas,monospace; letter-spacing:3px; }
.banner-text i { color:#c8fa7d; font-style:normal; }
.banner-big { position:relative; z-index:2; font:900 75px ui-monospace,Consolas,monospace; color:#d1ffa7; letter-spacing:-7px; }
.banner-orbit { width:360px; height:360px; border:1px dashed rgba(220,250,185,.4); border-radius:50%; position:absolute; right:70px; top:-70px; animation:spinner 35s linear infinite; }
.article-layout { display:grid; grid-template-columns:minmax(0,760px) minmax(200px,1fr); align-items:start; gap:90px; padding-top:76px; }
.article-main { min-width:0; }
.post-content { color:var(--text); font-size:16px; line-height:2.05; overflow-wrap:break-word; }
.post-content > :first-child { margin-top:0; }
.post-content h2 { scroll-margin-top:120px; margin:64px 0 21px; padding-bottom:13px; color:var(--heading); font-size:29px; line-height:1.45; font-weight:830; letter-spacing:-.7px; border-bottom:1px solid var(--line); }
.post-content h3 { scroll-margin-top:120px; margin:38px 0 15px; color:var(--heading); font-size:21px; font-weight:800; }
.post-content p { margin:0 0 25px; }
.post-content strong { color:var(--heading); font-weight:770; }
.post-content a { color:var(--accent-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.post-content blockquote { margin:37px 0; padding:23px 29px; border-left:3px solid var(--accent); border-radius:0 11px 11px 0; background:var(--surface); color:var(--text); }
.post-content blockquote p:last-child { margin:0; }
.post-content ul, .post-content ol { padding-left:25px; margin:0 0 24px; }
.post-content li { padding-left:4px; margin:6px 0; }
.post-content li::marker { color:var(--accent-deep); }
.post-content pre { margin:34px 0; border:1px solid var(--line); padding:48px 22px 23px; background:#0c1424; color:#e4edf9; border-radius:13px; position:relative; overflow:auto; tab-size:4; line-height:1.8; font:13px/1.8 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.post-content pre::before { content:"CODE / LIPULABS"; position:absolute; top:14px; left:21px; color:#91a3be; font:10px ui-monospace,Consolas,monospace; letter-spacing:1px; }
.post-content pre code { background:none; padding:0; border:0; color:inherit; white-space:pre; font-size:inherit; }
.post-content :not(pre)>code { background:var(--surface-2); border:1px solid var(--line); border-radius:5px; color:var(--accent-deep); padding:3px 6px; font:13px ui-monospace,Consolas,monospace; }
.code-copy { position:absolute; top:9px; right:10px; background:#1f3047; color:#dbeac9; border:1px solid #435067; border-radius:6px; font:10px ui-monospace,Consolas,monospace; padding:5px 10px; transition:background .2s; }
.code-copy:hover { background:#35536a; }
.post-content table { width:100%; border-collapse:collapse; font-size:14px; margin:28px 0 34px; }
.post-content table th, .post-content table td { text-align:left; padding:14px 17px; border:1px solid var(--line-strong); vertical-align:top; }
.post-content table th { color:var(--heading); background:var(--surface); }
.post-content table tr:nth-child(even) td { background:color-mix(in srgb,var(--surface) 45%,transparent); }
.article-tags { display:flex; gap:10px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); margin-top:55px; padding-top:29px; }
.article-tags>span:first-child { font:11px ui-monospace,Consolas,monospace; color:var(--soft-muted); margin-right:6px; }
.tag { background:var(--surface); border-radius:7px; border:1px solid var(--line); padding:7px 11px; color:var(--muted); font-size:12px; }
.article-ending { background:var(--surface); border:1px solid var(--line); border-radius:17px; text-align:center; margin-top:73px; padding:45px 25px; }
.article-ending>span { color:var(--accent-deep); font-size:40px; }
.article-ending h3 { font-size:25px; color:var(--heading); letter-spacing:-.7px; margin:9px 0 4px; }
.article-ending p { color:var(--muted); font-size:13px; margin:0 0 24px; }
.toc-panel { position:relative; }
.toc-inner { position:sticky; top:126px; margin-bottom:80px; }
.toc-inner>p { display:flex; justify-content:space-between; font:700 11px ui-monospace,Consolas,monospace; color:var(--soft-muted); letter-spacing:1px; margin:0 0 24px; }
.toc-nav { display:flex; flex-direction:column; gap:3px; border-left:1px solid var(--line-strong); }
.toc-item { padding:9px 0 9px 17px; font-size:12px; line-height:1.7; color:var(--muted); border-left:2px solid transparent; margin-left:-1px; transition:color .2s,border-color .2s; }
.toc-item:hover, .toc-item.is-active { color:var(--accent-deep); border-color:var(--accent); }
.toc-item.toc-nested { padding-left:31px; }
.toc-note { display:flex; gap:13px; align-items:center; font-size:11px; color:var(--soft-muted); margin-top:42px; padding-top:18px; border-top:1px solid var(--line); }
.toc-note .pulse-dot { width:6px; height:6px; }
.article-pagination { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding-top:85px; padding-bottom:115px; }
.article-pagination a { border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:24px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s,transform .2s; }
.article-pagination a:hover { border-color:var(--accent-deep); transform:translateY(-4px); }
.article-pagination a:last-child { text-align:right; }
.article-pagination small { color:var(--accent-deep); font-size:11px; }
.article-pagination strong { color:var(--heading); font-size:16px; line-height:1.5; }
/* Projects */
.project-hero { padding-bottom:55px; }
.notice-card { display:flex; gap:16px; align-items:flex-start; max-width:770px; border:1px solid var(--line-strong); background:var(--surface); border-radius:11px; padding:12px 17px; margin-top:34px; }
.notice-card>span { color:var(--accent-deep); font-size:20px; }
.notice-card p { color:var(--muted); font-size:12px; line-height:1.75; margin:0; }
.notice-card strong { color:var(--heading); }
.notice-card code { font:11px ui-monospace,Consolas,monospace; color:var(--accent-deep); }
.projects-showcase { padding:15px 0 95px; }
.project-card { background:var(--surface); border:1px solid var(--line); border-radius:21px; overflow:hidden; transition:border-color .3s,transform .3s; }
.project-card:hover { border-color:var(--accent-deep); transform:translateY(-6px); }
.project-large { display:grid; grid-template-columns:1.15fr .85fr; }
.project-graphic { position:relative; min-height:285px; display:grid; place-items:center; overflow:hidden; }
.project-large .project-graphic { min-height:450px; }
.project-graphic-agent { background:radial-gradient(ellipse at 55% 45%,rgba(198,250,125,.18),transparent 65%),#1a303a; }
.project-ui { width:min(430px,82%); background:#101d2f; border:1px solid #4d6670; border-radius:14px; padding:18px; box-shadow:0 32px 50px #0005; transform:rotate(-4deg); }
.project-ui-head { font:10px ui-monospace,monospace; color:#9bb6af; display:flex;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid #405260; }
.project-ui-head span:last-child { color:#b8f18c; }
.project-flow { display:flex;align-items:center;justify-content:center;gap:9px;padding:24px 0;font:800 12px ui-monospace,monospace; }
.project-flow span { background:#b6f188; border-radius:6px;padding:10px;color:#213b32; }
.project-flow i { color:#b6f188;font-style:normal; }
.project-ui-code { display:grid;gap:9px;border-radius:7px;background:#0b1525;padding:18px;font:11px ui-monospace,monospace;color:#9dacc7; }
.project-ui-code b { color:#c8fa7d; }
.project-detail { padding:43px; display:flex;flex-direction:column;align-items:flex-start; }
.project-label { display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;font:10px ui-monospace,monospace;color:var(--soft-muted); }
.project-detail h2 { font-size:clamp(25px,2.65vw,38px);letter-spacing:-1px;color:var(--heading);margin:47px 0 15px;line-height:1.4; }
.project-detail p { color:var(--muted);font-size:14px;line-height:2;margin:0 0 21px; }
.project-stacks { display:flex;flex-wrap:wrap;gap:8px; margin:0 0 31px; }
.project-stacks span { background:var(--surface-2);border:1px solid var(--line);padding:6px 10px;border-radius:5px;font:10px ui-monospace,monospace;color:var(--muted); }
.project-detail .text-link { margin-top:auto; }
.project-duo { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px; }
.project-duo .project-detail h2 { margin-top:27px;font-size:27px; }
.project-duo .project-detail { padding:31px;min-height:340px; }
.project-graphic-rag { background:radial-gradient(ellipse at 58% 43%,rgba(192,163,255,.3),transparent 66%),#252944; }
.rag-search { z-index:3;position:absolute;top:45px;left:18%;right:18%;background:#f3eefc;color:#4f5266;border-radius:9px;padding:12px 16px;font:12px ui-monospace,monospace;box-shadow:0 12px 28px #0003; }
.rag-search span { padding-left:9px;opacity:.6; }
.rag-paper { width:163px;height:118px;border-radius:9px;position:absolute;top:117px;padding:19px;color:#263547;background:#dce8ee;box-shadow:0 13px 35px #0004; }
.rag-paper span { font:800 11px ui-monospace,monospace; }
.rag-paper i { display:block;height:5px;border-radius:10px;background:#b4c5d1;margin-top:10px; }
.rag-paper i:last-child { width:65%; }
.paper-one { transform:translateX(-66px) rotate(-12deg); }.paper-two { transform:translateX(71px) rotate(8deg);background:#e1f5d0; }
.rag-connected { position:absolute;bottom:18px;right:24px;font-size:30px;color:#bff47b; }
.project-graphic-python { background:radial-gradient(ellipse at center,rgba(236,177,124,.22),transparent 62%),#352a35; }
.terminal-sample { width:76%;border-radius:9px;background:#0f1a2c;color:#b6f0a3;display:grid;gap:12px;padding:23px;box-shadow:0 24px 40px #0005;transform:rotate(3deg);font:12px ui-monospace,Consolas,monospace; }
.terminal-sample em { color:#ffd09f;font-style:normal; }.terminal-sample .terminal-success { color:#ffcfa3;margin-top:4px;font-weight:800; }
.projects-bottom { padding-bottom:130px; }
.loop-grid { display:flex; align-items:center; gap:25px; border-top:1px solid var(--line);padding-top:30px; }
.loop-grid span { display:flex;gap:16px; align-items:center;font:11px ui-monospace,Consolas,monospace;color:var(--soft-muted); }
.loop-grid strong {font:750 20px sans-serif;color:var(--heading);}.loop-grid i { color:var(--accent-deep);font-style:normal; }
/* About */
.about-hero { padding-bottom:60px; }
.about-hero .page-title { font-size:clamp(60px,7.7vw,106px);line-height:1.23; }
.about-layout { display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center; }
.about-portrait { height:580px; background:radial-gradient(circle at center,rgba(196,250,124,.2),transparent 64%),#1c3340; border-radius:23px;overflow:hidden;position:relative;display:grid;place-items:center; }
.about-portrait>img { width:min(360px,78%);position:relative;z-index:2;animation:floaty 5s ease-in-out infinite; }
.portrait-orbit { width:460px;height:460px;border:1px dashed rgba(199,251,139,.5);position:absolute;border-radius:50%;animation:spinner 30s linear infinite; }
.portrait-label { position:absolute;bottom:20px;left:24px;right:24px;z-index:3;display:flex;justify-content:space-between;color:#d9e8d6;font:11px ui-monospace,monospace; }
.portrait-emoji { position:absolute;top:18px;right:26px;color:#c8fa7d;font-size:36px; }
.about-copy .section-kicker { margin-bottom:30px; }
.about-copy h2 { color:var(--heading);font-size:clamp(37px,4vw,56px);letter-spacing:-2px;line-height:1.4;margin:0 0 25px; }
.about-copy p:not(.section-kicker) { font-size:15px;color:var(--muted);line-height:2.25;margin:0 0 18px; }
.about-copy strong { color:var(--heading); }
.dotted-underline { text-decoration:underline dotted var(--accent-deep);text-underline-offset:6px; }
.about-quote { border-top:1px solid var(--line);margin-top:28px;padding-top:15px;color:var(--heading);font-size:18px;font-weight:800; }
.about-quote>span { color:var(--accent-deep);font-size:55px;display:block;height:45px; }
.about-quote small { display:block;color:var(--soft-muted);font-size:11px;font-weight:400;margin-top:11px; }
.principles-section { padding-top:135px;padding-bottom:105px; }
.principles-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px; }
.principle { border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:27px; }
.principle-no { color:var(--soft-muted);font:11px ui-monospace,monospace; }
.principle-icon { width:55px;height:55px;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent-deep);font-size:28px;margin:37px 0 24px; }
.principle h3 { color:var(--heading);font-size:22px;margin:0 0 8px; }
.principle p { color:var(--muted);font-size:14px;margin:0;line-height:1.95; }
.about-contact { display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:42px;padding-bottom:120px;border-top:1px solid var(--line); }
.about-contact h2 { font-size:clamp(26px,3vw,43px);color:var(--heading);letter-spacing:-1px;margin:0 0 5px; }
.about-contact p:not(.section-kicker) {color:var(--muted);font-size:13px;margin:0; }
/* Misc / Footer */
.not-found { min-height:640px;padding-top:95px;padding-bottom:120px;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center; }
.not-found-code { font-size:clamp(120px,18vw,240px);font-weight:950;line-height:1;color:var(--heading);letter-spacing:-15px; }
.not-found-code span { color:var(--accent-deep);font-size:.72em;animation:spinner 10s linear infinite;display:inline-block; }
.not-found h1 {font-size:32px;color:var(--heading);margin:0;}
.not-found>p:not(.section-kicker) {color:var(--muted);margin:10px 0 25px;}
.site-footer { border-top:1px solid var(--line);background:var(--bg-soft); position:relative;z-index:1; }
.footer-top { display:flex;justify-content:space-between;gap:30px;padding:71px 0 87px; }
.footer-brand p { color:var(--muted);font-size:13px;line-height:2;margin:24px 0 0; }
.footer-links {display:flex;gap:110px;padding-top:5px; }
.footer-links>div { display:flex;flex-direction:column;align-items:flex-start;gap:15px; }
.footer-heading {color:var(--accent-deep);font:750 10px ui-monospace,Consolas,monospace;letter-spacing:2px;margin-bottom:12px; }
.footer-links a, .plain-button { padding:0;background:transparent;border:0;color:var(--muted);font-size:13px;line-height:1.5;transition:color .2s; }
.footer-links a:hover,.plain-button:hover { color:var(--accent-deep); }
.footer-bottom {border-top:1px solid var(--line);padding:24px 0 28px;display:flex;justify-content:space-between;gap:16px;color:var(--soft-muted);font:10px ui-monospace,Consolas,monospace;letter-spacing:.4px; }
.heart-symbol { color:var(--accent-deep); }
/* Quick search */
.search-dialog { width:min(680px,calc(100% - 32px));max-width:none;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);padding:0;border-radius:17px;box-shadow:0 50px 150px #0009;top:13vh;margin-inline:auto;overflow:visible; }
.search-dialog::backdrop {background:rgba(2,8,17,.78);backdrop-filter:blur(9px);}
.search-panel {overflow:hidden;border-radius:17px;}
.search-input-wrap {display:flex;align-items:center;gap:17px;padding:20px 23px;border-bottom:1px solid var(--line); }
.search-input-wrap>svg {color:var(--accent-deep);width:22px;height:22px;flex:0 0 22px; }
.search-input-wrap input {flex:1;width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--heading);font-size:17px; }
.search-input-wrap input::placeholder {color:var(--soft-muted); }
.search-close {background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--soft-muted);font:11px ui-monospace,monospace;padding:5px 8px;}
.search-results {padding:16px;max-height:min(430px,60vh);overflow:auto; }
.search-item {display:block;padding:13px 15px;border-radius:9px;transition:background .2s;}
.search-item:hover,.search-item:focus-visible,.search-item.is-selected {background:var(--surface-2);outline:0;}
.search-item-title {display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--heading);font-size:14px;font-weight:800;}
.search-item-title small {font-size:11px;color:var(--accent-deep);white-space:nowrap;font-weight:600;}
.search-item p {margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.7;}
.search-empty {text-align:center;color:var(--muted);padding:34px;font-size:13px;}
.search-results-label {margin:0 0 7px 15px;color:var(--soft-muted);font:10px ui-monospace,monospace;letter-spacing:1px;}
.search-foot {display:flex;justify-content:space-between;gap:8px;padding:10px 23px;border-top:1px solid var(--line);color:var(--soft-muted);font:10px ui-monospace,monospace;}
.toast {position:fixed;left:50%;bottom:30px;z-index:250;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#c8fa7d;color:#13221b;padding:10px 19px;border-radius:999px;font-weight:800;font-size:12px;box-shadow:var(--shadow);transition:transform .25s,opacity .25s;}
.toast.show {opacity:1;transform:translate(-50%,0);}
/* responsive */
@media (max-width:1180px) {
  .container {width:min(1140px,calc(100% - 64px));}
  .hero-grid {gap:18px;}
  .hero-title {font-size:clamp(46px,5.15vw,69px);letter-spacing:-4px;}
  .hero-visual {padding-inline:10px;}
  .floating-chip.chip-top {right:-4px;}
  .article-layout {gap:50px;}
  .footer-links {gap:65px;}
}
@media (max-width:930px) {
  .desktop-nav {display:none;}
  .menu-toggle {display:inline-grid;}
  .mobile-nav {position:absolute;left:0;right:0;top:88px;z-index:15;display:flex;flex-direction:column;gap:0;background:var(--bg-soft);border-bottom:1px solid var(--line);padding:12px 32px 21px;box-shadow:0 35px 60px #0003;}
  .mobile-nav a {display:flex;justify-content:space-between;padding:15px 4px;font-weight:760;border-bottom:1px solid var(--line);}
  .mobile-nav a span {color:var(--soft-muted);font:11px ui-monospace,monospace;}
  .hero-grid {grid-template-columns:1fr;gap:0;}
  .hero-section {padding-top:73px;}
  .hero-content {padding-bottom:15px;}
  .hero-title {font-size:clamp(54px,8vw,85px);}
  .hero-desc {max-width:630px;}
  .hero-visual {max-width:590px;justify-self:center;margin-top:30px;}
  .hero-bottom {padding-top:5px;}
  .fields-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .field-card:last-child {grid-column:span 2;}
  .featured-story {grid-template-columns:1fr;}
  .featured-art {min-height:340px;grid-row:1;}
  .featured-copy {padding:35px;}
  .featured-no {margin-top:24px;}
  .featured-copy h3 {max-width:750px;}
  .articles-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .article-layout {grid-template-columns:minmax(0,1fr);}
  .toc-panel {display:none;}
  .project-large {grid-template-columns:1fr;}
  .project-large .project-graphic {min-height:370px;}
  .about-layout {gap:6%;}.about-portrait {height:500px;}
}
@media (max-width:660px) {
  .container {width:calc(100% - 38px);}
  .site-header {height:72px;}
  .brand-mark {width:39px;height:39px;}
  .brand-text strong {font-size:16px;}
  .brand-text small {font-size:8px;letter-spacing:2px;}
  .header-inner {gap:10px;}
  .header-actions {gap:5px;}
  .icon-btn {width:36px;height:36px;}
  .mobile-nav {top:72px;padding-inline:20px;}
  .hero-section {padding-top:54px;}
  .hero-title {font-size:clamp(40px,9.35vw,61px);letter-spacing:-3px;}
  .eyebrow {font-size:9px;gap:10px;letter-spacing:1px;margin-bottom:23px;}
  .eyebrow-end {display:none;}
  .hero-desc {margin-top:24px;font-size:14px;line-height:2;}
  .hero-cta {gap:9px;}
  .button {font-size:13px;padding:14px 17px;gap:15px;}
  .hero-footnote {flex-wrap:wrap;gap:9px;margin-top:33px;font-size:10px;white-space:normal;}
  .hero-footnote .tiny-divider,.hero-footnote>span:last-child {display:none;}
  .hero-visual {width:100%;padding:18px 5px 27px;margin-top:30px;}
  .lab-viewport {transform:none;}
  .chip-top {font-size:9px;right:0;}
  .chip-bottom {font-size:9px;}
  .viewport-header {height:42px;padding-inline:12px;font-size:10px;}
  .code-surface {padding:17px 16px;height:193px;}
  .code-lines {font-size:10.5px;line-height:1.9;}
  .code-lines b {width:29px;flex-basis:29px;}
  .lab-display {height:211px;}
  .chestnut-mascot {width:185px;height:185px;}
  .orbit-one {width:211px;}
  .orbit-two {width:300px;}
  .viewport-status {font-size:8px;padding:0 11px;}
  .hero-bottom {font-size:9px;}
  .hero-bottom span:last-child {display:none;}
  .marquee-band {height:52px;}
  .section {padding-top:90px;}
  .section-heading {align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:26px;}
  .section-heading h2 {font-size:35px;letter-spacing:-1.5px;}
  .section-heading>p {font-size:12px;}
  .fields-grid,.articles-grid {grid-template-columns:1fr;}
  .field-card:last-child {grid-column:auto;}
  .field-card {padding:21px;}
  .field-card p {min-height:0;margin-bottom:20px;}
  .field-art {height:155px;}
  .section-featured {padding-top:93px;}
  .featured-art {min-height:260px;}
  .feature-center {width:135px;height:135px;}
  .feature-center .feature-symbol {font-size:48px;}
  .featured-copy {padding:25px;}
  .featured-copy h3 {font-size:27px;}
  .section-latest {padding-top:96px;padding-bottom:80px;}
  .article-card {min-height:230px;}
  .closing-section {padding-bottom:85px;}
  .closing-card {padding:42px 28px;}
  .closing-card h2 {font-size:clamp(30px,7vw,42px);letter-spacing:-1.5px;}
  .closing-stamp {right:18px;font-size:40px;opacity:.09;}
  .page-hero {padding-top:79px;}
  .page-title {font-size:clamp(55px,11vw,76px);letter-spacing:-3px;}
  .page-desc {font-size:14px;}
  .title-asterisk {margin-left:7px;font-size:25px;}
  .archive-tools {flex-direction:column;align-items:stretch;margin-top:35px;}
  .archive-filters {gap:5px;}
  .filter-btn {font-size:11px;padding:9px 10px;}
  .archive-search {min-width:0;}
  .archive-row {grid-template-columns:27px minmax(0,1fr) 18px;gap:10px;padding:23px 1px;}
  .archive-index {font-size:10px;padding-top:25px;}
  .archive-row h2 {font-size:19px;}
  .archive-row p {font-size:12px;}
  .archive-aside {display:none;}
  .archive-arrow {font-size:18px;}
  .archive-section {padding-bottom:80px;}
  .article-hero {padding-top:38px;}
  .back-link {margin-bottom:47px;}
  .article-hero-meta>span:last-child {display:none;}
  .article-heading {font-size:clamp(34px,8vw,50px);letter-spacing:-1.5px;}
  .article-intro {font-size:15px;}
  .article-byline {gap:9px;margin:27px 0 30px;}
  .article-banner {height:155px;padding:20px 26px;border-radius:13px;}
  .banner-text {font-size:13px;letter-spacing:1px;}
  .banner-big {font-size:39px;letter-spacing:-4px;}
  .banner-orbit {width:260px;height:260px;right:-14px;top:-52px;}
  .article-layout {padding-top:40px;}
  .post-content {font-size:15px;}
  .post-content h2 {font-size:24px;margin-top:46px;}
  .post-content h3 {font-size:19px;}
  .post-content table {display:block;overflow-x:auto;white-space:nowrap;}
  .post-content pre {font-size:11px;padding-inline:16px;}
  .post-content blockquote {padding:17px 19px;}
  .article-pagination {gap:9px;padding-top:70px;padding-bottom:80px;}
  .article-pagination a {padding:16px;}
  .article-pagination strong {font-size:13px;}
  .article-pagination small {font-size:10px;}
  .project-large .project-graphic {min-height:290px;}
  .project-detail {padding:25px;}
  .project-detail h2 {margin-top:25px;}
  .project-duo {grid-template-columns:1fr;}
  .project-duo .project-detail {min-height:auto;}
  .project-duo .project-detail h2 {margin-top:24px;}
  .projects-showcase {padding-bottom:65px;}
  .loop-grid {flex-wrap:wrap;gap:12px;}
  .loop-grid span {gap:5px;}.loop-grid strong {font-size:15px;}
  .projects-bottom {padding-bottom:85px;}
  .about-layout {grid-template-columns:1fr;gap:45px;}
  .about-portrait {height:410px;}
  .about-portrait>img {width:260px;}
  .portrait-orbit {height:350px;width:350px;}
  .about-copy h2 {font-size:39px;}
  .principles-section {padding-top:90px;padding-bottom:75px;}
  .principles-grid {grid-template-columns:1fr;}
  .principle-icon {margin:18px 0;}
  .about-contact {flex-direction:column;align-items:flex-start;padding-bottom:90px;}
  .footer-top {flex-direction:column;gap:45px;padding:49px 0;}
  .footer-links {gap:55px;justify-content:space-between;padding:0;}
  .footer-bottom {flex-wrap:wrap;font-size:9px;line-height:1.8;}
  .search-input-wrap {padding:15px;}
  .search-input-wrap input {font-size:14px;}
  .search-foot {font-size:9px;padding:10px 14px;}
}
@media (max-width:380px) {
  .brand-text small {letter-spacing:1px;}
  .brand-text strong {font-size:14px;}
  .hero-title {font-size:39px;}
  .hero-footnote {font-size:9px;}
  .footer-links {gap:32px;}
  .code-lines {font-size:9px;}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important;}
  html.js .reveal {opacity:1 !important;transform:none !important;}
  .cursor-glow {display:none;}
}