/* Luma · 清屿 — Halo 2.x theme */
:root {
  color-scheme: light;
  --accent-light: #147b88;
  --accent-dark: #64d9e3;
  --accent: var(--accent-light);
  --accent-rgb: 47, 118, 109;
  --bg: #f6f7f2;
  --surface: #fcfcf8;
  --surface-soft: #eef1e9;
  --ink: #17201e;
  --ink-soft: #5e6a66;
  --ink-faint: #89938f;
  --line: rgba(31, 55, 49, 0.13);
  --line-strong: rgba(31, 55, 49, 0.24);
  --shadow: 0 24px 70px rgba(27, 50, 43, 0.08);
  --shadow-hover: 0 30px 80px rgba(27, 50, 43, 0.14);
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 36px;
  --font-sans: "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-silk: cubic-bezier(.16, 1, .3, 1);
  --header-height: 76px;
}

:root.radius-subtle { --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; }
:root.radius-round { --radius-sm: 18px; --radius-md: 30px; --radius-lg: 48px; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101614;
  --surface: #151d1a;
  --surface-soft: #1b2521;
  --ink: #eef3ef;
  --ink-soft: #abb8b2;
  --ink-faint: #77847e;
  --line: rgba(218, 237, 229, 0.12);
  --line-strong: rgba(218, 237, 229, 0.23);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.34);
  --accent: var(--accent-dark);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
::selection { background: rgba(var(--accent-rgb), .22); color: var(--ink); }
a { color: inherit; text-decoration: none; cursor: pointer; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; left: 20px; top: -70px; z-index: 9999; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); transition: top .2s ease; }
.skip-link:focus { top: 16px; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.shell-narrow { width: min(820px, calc(100% - 48px)); margin-inline: auto; }
.noise { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .022; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
#cursor-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9980; pointer-events: none; }

.eyebrow { margin: 0 0 18px; color: var(--accent); font-size: 12px; line-height: 1.4; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 18px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 620; cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s ease, background-color .25s ease; }
.button svg, .text-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:hover svg, .text-link:hover svg { transform: translateX(4px); }
.button--primary { background: var(--ink); color: var(--bg); box-shadow: 0 14px 34px rgba(18, 36, 31, .16); }
:root[data-theme="dark"] .button--primary { background: var(--accent); color: #07151a; }
.button--secondary, .button--ghost { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink); }
.button--secondary:hover, .button--ghost:hover { border-color: rgba(var(--accent-rgb), .48); background: rgba(var(--accent-rgb), .08); color: var(--accent); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; font-weight: 620; cursor: pointer; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-height); border-bottom: 1px solid transparent; transition: height .3s var(--ease-out), background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { height: 64px; border-color: var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); box-shadow: 0 8px 30px rgba(24, 45, 39, .04); backdrop-filter: blur(18px) saturate(1.2); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 720; letter-spacing: .2em; }
.brand-mark { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; }
.brand-mark::before { content: ""; width: 19px; height: 19px; border: 1px solid var(--accent); border-radius: 50%; }
.brand-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.brand-mark i:first-child { transform: translate(-6px, 5px); }.brand-mark i:last-child { transform: translate(6px, -5px); opacity: .46; }
.desktop-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.desktop-nav > a, .nav-group > a { position: relative; display: block; padding: 10px 14px; color: var(--ink-soft); font-size: 13px; font-weight: 560; cursor: pointer; transition: color .2s ease; }
.desktop-nav > a::after, .nav-group > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-out); }
.desktop-nav > a:hover, .nav-group > a:hover { color: var(--ink); }.desktop-nav > a:hover::after, .nav-group > a:hover::after { transform: scaleX(1); transform-origin: left; }
.desktop-nav a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: var(--accent); }.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-group { position: relative; }
.nav-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 160px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .2s ease, transform .25s var(--ease-out), visibility .2s; }
.nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown a { display: block; padding: 8px 11px; border-radius: 8px; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }.nav-dropdown a:hover { background: var(--surface-soft); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 5px; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.icon-button:hover { background: var(--surface-soft); }.icon-button:active { transform: scale(.94); }.icon-button svg { width: 19px; height: 19px; }
.menu-button { display: none; }

.mobile-menu { position: fixed; inset: 0 0 0 auto; z-index: 500; width: min(390px, 100%); padding: 22px 24px 36px; background: var(--surface); box-shadow: -20px 0 70px rgba(12, 28, 22, .16); transform: translateX(102%); visibility: hidden; transition: transform .45s var(--ease-silk), visibility .45s; }
.mobile-menu::before { content: ""; position: fixed; inset: 0 100% 0 auto; width: 100vw; background: rgba(10, 23, 19, .22); opacity: 0; pointer-events: none; transition: opacity .35s ease; backdrop-filter: blur(3px); }
.mobile-menu.is-open { transform: none; visibility: visible; }.mobile-menu.is-open::before { opacity: 1; pointer-events: auto; }
.mobile-menu__top { min-height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; letter-spacing: .2em; }
.mobile-menu nav { padding-top: 26px; }.mobile-menu nav > a:not(.mobile-menu__child) { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 560; }.mobile-menu nav > a svg { width: 20px; }
.mobile-menu__child { display: block; padding: 10px 0 10px 22px; color: var(--ink-soft); font-size: 14px; }

.page-transition { position: fixed; inset: 0; z-index: 9000; pointer-events: none; visibility: hidden; overflow: hidden; color: var(--transition-ink, #dff8fb); }
.page-transition__panel { position: absolute; inset-block: 0; width: 51%; overflow: hidden; background: radial-gradient(circle at 50% 46%, var(--transition-glow, rgba(59,210,225,.13)), transparent 30%), var(--transition-bg, #10272f); will-change: transform; }
.page-transition__panel::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(var(--transition-grid, rgba(54,183,197,.08)) 1px, transparent 1px), linear-gradient(90deg, var(--transition-grid, rgba(54,183,197,.08)) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, #000, transparent 72%); }
.page-transition__panel--left { left: 0; transform: translateX(-101%); }
.page-transition__panel--right { right: 0; transform: translateX(101%); }
.route-loader { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; justify-items: center; gap: 6px; opacity: 0; transform: translate(-50%, -46%) scale(.92); }
.route-loader__mark { position: relative; display: block; width: 48px; height: 48px; margin-bottom: 9px; border: 1px solid var(--transition-line, rgba(92,211,223,.34)); border-radius: 50%; background: var(--transition-surface, rgba(7,23,31,.7)); box-shadow: 0 0 36px var(--transition-glow, rgba(59,210,225,.14)); }
.route-loader__mark::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--transition-line, rgba(92,211,223,.34)); border-radius: 50%; animation: route-orbit 1.8s linear infinite; }
.route-loader__mark i, .route-loader__mark b { position: absolute; border-radius: 50%; background: var(--transition-accent, #65d8e2); box-shadow: 0 0 12px var(--transition-accent, #65d8e2); }
.route-loader__mark i { left: 7px; top: 9px; width: 6px; height: 6px; }
.route-loader__mark b { right: 9px; bottom: 8px; width: 4px; height: 4px; opacity: .6; }
.route-loader strong { font-family: var(--cyber-mono, monospace); font-size: 12px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; }
.route-loader small { color: var(--transition-muted, rgba(214,242,245,.55)); font-family: var(--cyber-mono, monospace); font-size: 7px; letter-spacing: .16em; white-space: nowrap; }
.route-loader__track { position: absolute; z-index: 2; left: 50%; top: calc(50% + 82px); width: min(220px, 48vw); height: 1px; overflow: hidden; background: var(--transition-line, rgba(92,211,223,.25)); opacity: 0; transform: translateX(-50%); }
.route-loader__track i { display: block; width: 46%; height: 100%; background: linear-gradient(90deg, transparent, var(--transition-accent, #65d8e2), transparent); transform: translateX(-110%); }
body.is-leaving .page-transition, body.is-entering .page-transition { visibility: visible; }
body.is-leaving .page-transition__panel { animation: route-panel-in .36s var(--ease-out) forwards; }
body.is-leaving .page-transition__panel--right { animation-delay: .035s; }
body.is-leaving .route-loader { animation: route-loader-in .24s .17s var(--ease-out) forwards; }
body.is-leaving .route-loader__track { animation: route-track-show .2s .2s ease-out forwards; }
body.is-leaving .route-loader__track i { animation: route-track 1s .18s ease-in-out infinite; }
body.is-entering .page-transition__panel { transform: translateX(0); animation: route-panel-out .48s var(--ease-silk) forwards; }
body.is-entering .page-transition__panel--right { --route-exit: 101%; animation-delay: .025s; }
body.is-entering .route-loader { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: route-loader-out .2s ease-in forwards; }
body.is-entering .route-loader__track { opacity: 1; animation: route-track-hide .18s ease-in forwards; }
@keyframes route-panel-in { to { transform: translateX(0); } }
@keyframes route-panel-out { to { transform: translateX(var(--route-exit, -101%)); } }
@keyframes route-loader-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes route-loader-out { to { opacity: 0; transform: translate(-50%, -54%) scale(.94); } }
@keyframes route-track-show { to { opacity: 1; } }
@keyframes route-track-hide { to { opacity: 0; } }
@keyframes route-track { to { transform: translateX(330%); } }
@keyframes route-orbit { to { transform: rotate(360deg); } }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; will-change: transform; }

.hero { position: relative; min-height: min(920px, 100svh); display: flex; align-items: center; overflow: hidden; background: #e9eee5; }
:root[data-theme="dark"] .hero { background: #121b18; }
.hero__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 72% 38%, rgba(91, 151, 139, .2), transparent 24%), radial-gradient(circle at 24% 70%, rgba(148, 179, 164, .25), transparent 28%), linear-gradient(125deg, transparent 0 48%, rgba(255,255,255,.18) 48% 49%, transparent 49% 100%); transform: scale(1.04); }
.hero__backdrop--image { background-position: center; background-size: cover; filter: saturate(.76) contrast(.94); }.hero__backdrop--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--bg) 18%, transparent)); }
.hero__glow { position: absolute; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 50%; pointer-events: none; }
.hero__glow--one { width: 46vw; aspect-ratio: 1; right: -10vw; top: 8%; animation: breathe 8s ease-in-out infinite; }.hero__glow--two { width: 28vw; aspect-ratio: 1; right: 12vw; top: 26%; opacity: .55; animation: breathe 9s 1.5s ease-in-out infinite reverse; }
@keyframes breathe { 50% { transform: scale(1.045) translateY(-8px); opacity: .72; } }
.hero__content { position: relative; z-index: 3; padding-top: 90px; }
.hero__content > * { opacity: 0; transform: translateY(24px); animation: hero-up .8s var(--ease-silk) .18s forwards; }.hero__content h1 { animation-delay: .28s }.hero__subtitle { animation-delay: .38s }.hero__actions { animation-delay: .48s }
@keyframes hero-up { to { opacity: 1; transform: none; } }
.hero h1 { max-width: 840px; margin: 0; font-size: clamp(42px, 6.2vw, 88px); line-height: 1.12; font-weight: 620; letter-spacing: -.055em; text-wrap: balance; }
.hero__subtitle { max-width: 610px; margin: 28px 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.85; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
.hero__stat { display: flex; align-items: center; gap: 9px; padding-left: 28px; border-left: 1px solid var(--line-strong); }.hero__stat strong { font-size: 22px; line-height: 1; }.hero__stat span { color: var(--ink-faint); font-size: 12px; }
.hero__quick-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 18px; }
.hero__quick-links a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--ink-faint); font-family: var(--cyber-mono, monospace); font-size: 9px; letter-spacing: .1em; transition: color .2s ease, transform .25s var(--ease-out); }
.hero__quick-links a i { width: 5px; height: 5px; border: 1px solid var(--accent); transform: rotate(45deg); transition: background .2s, box-shadow .2s; }
.hero__quick-links a:hover { color: var(--accent); transform: translateY(-1px); }
.hero__quick-links a:hover i { background: var(--accent); box-shadow: 0 0 11px rgba(var(--accent-rgb), .48); }
.hero__veil { position: absolute; inset: 0; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }.hero__veil i { background: var(--surface); transform: scaleX(1); animation: veil-open 1.15s var(--ease-silk) .08s forwards; }.hero__veil i:first-child { transform-origin: left; }.hero__veil i:last-child { transform-origin: right; animation-delay: .14s; }
@keyframes veil-open { to { transform: scaleX(0); } }
.scroll-cue { position: absolute; z-index: 4; right: max(24px, calc((100vw - 1180px) / 2)); bottom: 38px; display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 9px; letter-spacing: .2em; writing-mode: vertical-rl; }.scroll-cue > span { width: 1px; height: 38px; background: var(--line-strong); overflow: hidden; }.scroll-cue > span::after { content: ""; display: block; width: 100%; height: 45%; background: var(--accent); animation: scroll-line 2s ease-in-out infinite; }.scroll-cue b { font-weight: 500; }
@keyframes scroll-line { from { transform: translateY(-130%); } to { transform: translateY(260%); } }

.latest-section { padding-block: 120px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; }.section-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.15; font-weight: 590; letter-spacing: -.04em; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.post-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease; }
.post-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.post-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 470px; }
.post-card__media { display: block; min-height: 250px; overflow: hidden; background: var(--surface-soft); }.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-silk), filter .4s ease; }.post-card:hover .post-card__media img { transform: scale(1.035); }
.post-card__content { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 4vw, 48px); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--ink-faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.post-card__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--line-strong); }.post-card__meta a { color: var(--accent); }
.post-card h2 { margin: 20px 0 0; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.28; font-weight: 590; letter-spacing: -.04em; text-wrap: balance; }.post-card:not(.post-card--featured) h2 { font-size: clamp(22px, 2.1vw, 30px); }.post-card h2 a { background-image: linear-gradient(var(--accent), var(--accent)); background-position: 100% 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size .4s var(--ease-out); }.post-card h2 a:hover { background-position: 0 100%; background-size: 100% 1px; }
.post-card__content > p { display: -webkit-box; margin: 18px 0 28px; overflow: hidden; color: var(--ink-soft); font-size: 14px; line-height: 1.85; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.post-card .text-link { margin-top: auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 52px; }.pagination > span { color: var(--ink-faint); font-size: 12px; }.pagination > span b { color: var(--ink); }.pagination a { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 13px; font-weight: 560; }.pagination a svg { width: 16px; }.pagination__back { transform: rotate(180deg); }
.empty-state { grid-column: 1 / -1; padding: 100px 24px; text-align: center; }.empty-state h2 { margin: 22px 0 8px; font-size: 27px; }.empty-state p { color: var(--ink-soft); }.empty-state__orb { display: block; width: 54px; height: 54px; margin: auto; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 18px -8px 0 -12px var(--accent); }
.manifesto { display: grid; grid-template-columns: 120px 1.3fr .7fr; gap: 52px; align-items: center; margin-bottom: 120px; padding: 72px; border-radius: var(--radius-lg); background: var(--surface-soft); }.manifesto--standalone { margin-top: calc(var(--header-height) + 80px); }.manifesto__mark { width: 90px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }.manifesto__mark::before, .manifesto__mark::after { content: ""; position: absolute; width: 54px; height: 1px; background: var(--accent); transform: rotate(45deg); }.manifesto__mark::after { transform: rotate(-45deg); opacity: .45; }.manifesto h2 { margin: 0; white-space: pre-line; font-size: clamp(30px, 3.7vw, 50px); line-height: 1.28; font-weight: 570; letter-spacing: -.04em; }.manifesto > p, .manifesto__body > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 2; }.manifesto__body .text-link { margin-top: 20px; }

.collection-hero { padding-top: calc(var(--header-height) + 120px); padding-bottom: 74px; }.collection-hero h1 { margin: 0; font-size: clamp(46px, 7vw, 92px); line-height: 1.06; font-weight: 600; letter-spacing: -.06em; }.collection-hero h1 span:first-child { color: var(--accent); }.collection-hero > p:last-child { max-width: 600px; margin: 28px 0 0; color: var(--ink-soft); font-size: 16px; }.collection-page .latest-section { padding-top: 30px; }
.archive-list { padding-bottom: 120px; }.archive-year { display: grid; grid-template-columns: 150px 1fr; gap: 50px; padding: 55px 0; border-top: 1px solid var(--line); }.archive-year > h2 { margin: 0; color: var(--accent); font-size: clamp(38px, 5vw, 60px); line-height: 1; font-weight: 520; letter-spacing: -.05em; }.archive-month { display: grid; grid-template-columns: 66px 1fr; gap: 22px; margin-bottom: 38px; }.archive-month > span { padding-top: 12px; color: var(--ink-faint); font-size: 11px; letter-spacing: .1em; }.archive-month a { display: grid; grid-template-columns: 56px 1fr 20px; gap: 18px; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line); }.archive-month time { color: var(--ink-faint); font-size: 11px; }.archive-month strong { font-size: 15px; font-weight: 520; transition: color .2s ease; }.archive-month svg { width: 17px; opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .25s var(--ease-out); }.archive-month a:hover strong { color: var(--accent); }.archive-month a:hover svg { opacity: 1; transform: none; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 130px; }.tag-cloud > a { display: flex; min-height: 52px; align-items: center; gap: 14px; padding: 11px 17px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; transition: border-color .25s, transform .25s var(--ease-out), background-color .25s; }.tag-cloud > a:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface-soft); }.tag-cloud small { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--ink-faint); font-size: 10px; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 130px; }.taxonomy-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: transform .35s var(--ease-out), box-shadow .35s, border-color .25s; }.taxonomy-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }.taxonomy-card > a { display: grid; grid-template-columns: 42px 1fr 20px; gap: 18px; align-items: center; min-height: 72px; }.taxonomy-card__index { color: var(--accent); font-size: 11px; letter-spacing: .1em; }.taxonomy-card strong, .taxonomy-card small { display: block; }.taxonomy-card strong { font-size: 21px; font-weight: 570; }.taxonomy-card small { margin-top: 3px; color: var(--ink-faint); font-size: 11px; }.taxonomy-card svg { width: 19px; transition: transform .25s var(--ease-out); }.taxonomy-card:hover > a svg { transform: translateX(4px); }.category-children { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 60px; }.category-children a { padding: 4px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; }
.author-hero { display: flex; align-items: center; gap: 38px; }.author-hero > img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 10px var(--surface-soft); }.author-hero > div > p:last-child { max-width: 540px; color: var(--ink-soft); }

.article-shell { padding-top: calc(var(--header-height) + 92px); }.article-header { text-align: center; }.article-meta { display: flex; justify-content: center; gap: 10px; color: var(--ink-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.article-meta a { color: var(--accent); }.article-header h1 { margin: 26px 0 0; font-size: clamp(40px, 6.7vw, 78px); line-height: 1.16; font-weight: 610; letter-spacing: -.055em; text-wrap: balance; }.article-excerpt { max-width: 670px; margin: 28px auto 0; color: var(--ink-soft); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.85; text-wrap: balance; }.article-author { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }.article-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }.article-author span { text-align: left; }.article-author b, .article-author small { display: block; }.article-author b { font-size: 12px; font-weight: 620; }.article-author small { color: var(--ink-faint); font-size: 10px; }
.article-cover { width: min(1180px, calc(100% - 48px)); max-height: 680px; aspect-ratio: 16/9; margin: 74px auto 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-soft); box-shadow: var(--shadow); }.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: 200px minmax(0, 760px) 200px; justify-content: center; gap: 48px; padding-top: 90px; padding-bottom: 120px; }.article-main { grid-column: 2; min-width: 0; }.toc-panel { grid-column: 1; align-self: start; position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow-y: auto; padding-right: 16px; }.toc-panel > span { display: block; margin-bottom: 16px; color: var(--ink-faint); font-size: 9px; font-weight: 650; letter-spacing: .16em; }.toc-panel nav { display: grid; gap: 2px; }.toc-panel a { position: relative; padding: 5px 0 5px 14px; color: var(--ink-faint); font-size: 11px; line-height: 1.5; transition: color .2s ease; }.toc-panel a::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }.toc-panel a[data-depth="3"] { padding-left: 27px; }.toc-panel a.is-active, .toc-panel a:hover { color: var(--accent); }.toc-panel a.is-active::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1); }
.page-article .article-header .eyebrow { text-align: center; }.page-article .article-layout { padding-top: 70px; }

.markdown-body { color: var(--ink); font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 0 !important; }.markdown-body > :last-child { margin-bottom: 0 !important; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { position: relative; color: var(--ink); line-height: 1.35; font-weight: 620; letter-spacing: -.025em; scroll-margin-top: 100px; text-wrap: balance; }
.markdown-body h1 { margin: 2.2em 0 .85em; font-size: 2.15em; }.markdown-body h2 { margin: 2.4em 0 .8em; padding-bottom: .45em; border-bottom: 1px solid var(--line); font-size: 1.72em; }.markdown-body h3 { margin: 2em 0 .7em; font-size: 1.38em; }.markdown-body h4 { margin: 1.8em 0 .6em; font-size: 1.16em; }.markdown-body h5 { margin: 1.6em 0 .5em; font-size: 1em; }.markdown-body h6 { margin: 1.5em 0 .5em; color: var(--ink-soft); font-size: .9em; letter-spacing: .03em; }
.markdown-body p { margin: 1.35em 0; }.markdown-body strong { font-weight: 680; }.markdown-body em { color: var(--ink-soft); }.markdown-body del { color: var(--ink-faint); text-decoration-thickness: 1px; }.markdown-body mark { padding: .08em .25em; border-radius: 3px; background: rgba(var(--accent-rgb), .16); color: inherit; }
.markdown-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .35); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .2s; }.markdown-body a:hover { text-decoration-color: var(--accent); }
.markdown-body ul, .markdown-body ol { margin: 1.3em 0; padding-left: 1.55em; }.markdown-body li { margin: .45em 0; padding-left: .25em; }.markdown-body li::marker { color: var(--accent); }.markdown-body li > ul, .markdown-body li > ol { margin-block: .35em; }
.markdown-body .task-list-item { list-style: none; }.markdown-body input[type="checkbox"] { width: 16px; height: 16px; margin: 0 .55em 0 -1.55em; accent-color: var(--accent); vertical-align: -.15em; }
.markdown-body blockquote { position: relative; margin: 2em 0; padding: 22px 26px 22px 30px; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-soft); color: var(--ink-soft); }.markdown-body blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }.markdown-body blockquote > :first-child { margin-top: 0; }.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body hr { width: 90px; height: 1px; margin: 4em auto; border: 0; background: var(--line-strong); overflow: visible; }.markdown-body hr::after { content: ""; display: block; width: 5px; height: 5px; margin: -2px auto 0; border-radius: 50%; background: var(--accent); box-shadow: 14px 0 0 rgba(var(--accent-rgb), .35), -14px 0 0 rgba(var(--accent-rgb), .35); }
.markdown-body img { height: auto; margin: 2.4em auto; border-radius: var(--radius-md); background: var(--surface-soft); box-shadow: 0 12px 40px rgba(26, 47, 40, .08); }.markdown-body figure { margin: 2.4em 0; }.markdown-body figure img { margin-bottom: 0; }.markdown-body figcaption { margin-top: .8em; color: var(--ink-faint); font-size: 12px; text-align: center; }
.markdown-body table { width: 100%; margin: 2em 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }.markdown-body th, .markdown-body td { padding: 12px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }.markdown-body th { background: var(--surface-soft); font-weight: 650; }.markdown-body tr:last-child td { border-bottom: 0; }.markdown-body th:last-child, .markdown-body td:last-child { border-right: 0; }.markdown-body tr:hover td { background: color-mix(in srgb, var(--surface-soft) 55%, transparent); }
.markdown-body code { padding: .16em .38em; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); color: color-mix(in srgb, var(--accent) 76%, var(--ink)); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .84em; }
.markdown-body pre { position: relative; margin: 2em 0; padding: 22px 24px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: #17201e; color: #dce7e1; box-shadow: 0 16px 46px rgba(16, 31, 26, .13); tab-size: 2; }.markdown-body pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; line-height: 1.75; }.code-copy { position: absolute; top: 10px; right: 10px; min-width: 42px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.07); color: #c7d5ce; font-size: 10px; cursor: pointer; transition: background .2s, color .2s; }.code-copy:hover { background: rgba(255,255,255,.14); color: #fff; }
.markdown-body kbd { display: inline-block; padding: .1em .45em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font-family: inherit; font-size: .78em; }.markdown-body sub, .markdown-body sup { font-size: .72em; }.markdown-body details { margin: 1.6em 0; padding: 16px 19px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }.markdown-body summary { font-weight: 620; cursor: pointer; }.markdown-body details[open] summary { margin-bottom: 12px; }.markdown-body iframe, .markdown-body video { width: 100%; max-width: 100%; margin: 2em 0; border: 0; border-radius: var(--radius-md); }.markdown-body .footnotes { margin-top: 4em; padding-top: 1.5em; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.markdown-body .alert, .markdown-body [class*="alert-"] { margin: 1.8em 0; padding: 18px 20px; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .07); }
.article-footer { margin-top: 65px; }.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.tag-row > span { margin-right: 8px; color: var(--ink-faint); font-size: 10px; letter-spacing: .12em; }.tag-row a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 11px; transition: border-color .2s, color .2s; }.tag-row a:hover { border-color: var(--accent); color: var(--accent); }
.article-end { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 70px 0; }.article-end span { width: 42px; height: 1px; background: var(--line-strong); }.article-end i { width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; }
.comments { padding-top: 18px; }.comments .section-heading { margin-bottom: 28px; }.comments .section-heading h2 { font-size: 28px; }

.site-footer { display: flex; min-height: 120px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; }.site-footer > div:first-child { display: flex; align-items: center; gap: 9px; }.footer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .09); }
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 120; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); backdrop-filter: blur(12px); transition: opacity .25s, transform .3s var(--ease-out), visibility .25s, background .2s; }.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }.back-to-top:hover { background: var(--surface-soft); }.back-to-top svg { width: 18px; }
.error-view { min-height: calc(100svh - 120px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: var(--header-height); text-align: center; }.error-orbit { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; font-size: clamp(70px, 13vw, 150px); line-height: 1; font-weight: 560; letter-spacing: -.08em; }.error-orbit i { width: 72px; height: 72px; border: 1px solid var(--accent); border-radius: 50%; box-shadow: inset 20px -14px 0 rgba(var(--accent-rgb), .11); animation: orbit 6s linear infinite; }.error-code { color: var(--accent); font-size: clamp(88px, 16vw, 170px); line-height: 1; font-weight: 560; letter-spacing: -.08em; }.error-view h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.04em; }.error-view > p:not(.eyebrow) { max-width: 560px; margin: 18px auto 30px; color: var(--ink-soft); }.error-view .button { margin-top: 10px; } @keyframes orbit { to { transform: rotate(360deg); } }

.reveal { opacity: 1; transform: none; }.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-silk), transform .7s var(--ease-silk); }.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .desktop-nav { display: none; }.menu-button { display: inline-grid; }
  .manifesto { grid-template-columns: 90px 1fr; padding: 54px; }.manifesto > p, .manifesto__body { grid-column: 2; margin-top: -28px; }
  .article-layout { grid-template-columns: 160px minmax(0, 720px); gap: 34px; }.article-main { grid-column: 2; }.toc-panel { grid-column: 1; }
}
@media (max-width: 760px) {
  :root { --header-height: 66px; }
  .shell, .shell-narrow, .article-cover { width: min(1180px, calc(100% - 32px)); }.header-inner { width: calc(100% - 28px); }
  .brand { font-size: 12px; }.hero { min-height: 760px; }.hero__content { padding-top: 46px; }.hero h1 { font-size: clamp(40px, 12.5vw, 64px); }.hero__subtitle { margin-top: 22px; font-size: 15px; }.hero__actions { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 30px; }.hero__stat { padding-left: 0; border-left: 0; }.hero__glow--one { width: 95vw; right: -46vw; top: 15%; }.hero__glow--two { width: 70vw; right: -6vw; top: 38%; }.scroll-cue { display: none; }
  .latest-section { padding-block: 82px; }.section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 32px; }.section-heading h2 { font-size: 36px; }
  .post-grid { grid-template-columns: 1fr; gap: 18px; }.post-card--featured { grid-column: auto; display: block; min-height: 0; }.post-card__media { height: 230px; min-height: 0; }.post-card__content { padding: 25px; }.post-card h2, .post-card:not(.post-card--featured) h2 { font-size: 25px; }.post-card__content > p { margin-bottom: 22px; }
  .manifesto { grid-template-columns: 1fr; gap: 30px; margin-bottom: 82px; padding: 36px 28px; }.manifesto--standalone { margin-top: calc(var(--header-height) + 56px); }.manifesto__mark { width: 70px; }.manifesto > p, .manifesto__body { grid-column: auto; margin: 0; }.manifesto h2 { font-size: 34px; }
  .collection-hero { padding-top: calc(var(--header-height) + 82px); padding-bottom: 54px; }.collection-hero h1 { font-size: 52px; }
  .archive-year { grid-template-columns: 1fr; gap: 32px; padding: 42px 0; }.archive-month { grid-template-columns: 48px 1fr; gap: 12px; }.archive-month a { grid-template-columns: 46px 1fr; }.archive-month a svg { display: none; }
  .category-grid { grid-template-columns: 1fr; padding-bottom: 90px; }.tag-cloud { padding-bottom: 90px; }.author-hero { align-items: flex-start; flex-direction: column; }
  .article-shell { padding-top: calc(var(--header-height) + 58px); }.article-header { text-align: left; }.article-meta { justify-content: flex-start; }.article-header h1 { margin-top: 20px; font-size: clamp(38px, 11vw, 58px); }.article-excerpt { margin-left: 0; font-size: 16px; }.article-author { justify-content: flex-start; }.article-cover { margin-top: 46px; border-radius: var(--radius-md); }
  .article-layout { display: block; padding-top: 54px; padding-bottom: 85px; }.toc-panel { position: static; max-height: none; margin-bottom: 45px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }.toc-panel nav { max-height: 220px; overflow: auto; }.markdown-body { font-size: 16px; line-height: 1.88; }.markdown-body h2 { font-size: 1.55em; }.markdown-body pre { margin-inline: -8px; padding: 20px 18px; border-radius: var(--radius-sm); }.markdown-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 28px; }.back-to-top { right: 16px; bottom: 16px; }
}
@media (max-width: 420px) { .hero__actions .button { width: 100%; }.archive-month { grid-template-columns: 1fr; }.archive-month > span { padding-top: 0; }.taxonomy-card { padding: 18px; }.taxonomy-card > a { grid-template-columns: 32px 1fr 18px; }.category-children { margin-left: 50px; } }
@media (pointer: coarse), (hover: none) { #cursor-canvas { display: none !important; }.post-card:hover, .tag-cloud > a:hover, .taxonomy-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #cursor-canvas, .page-transition, .hero__veil { display: none !important; }.hero__content > *, .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* v1.1 — portrait hero, expressive typography, cursor and compliant footer */
:root {
  --font-body: "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-ui: Inter, "SF Pro Display", "Segoe UI", "PingFang SC", sans-serif;
  --font-display: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", STSong, serif;
}
body { font-family: var(--font-body); }
.site-header, .button, .text-link, .eyebrow, .post-card__meta, .pagination, .site-footer, .toc-panel, .article-meta { font-family: var(--font-ui); }
.section-heading h2, .collection-hero h1, .article-header h1, .manifesto h2 { font-family: var(--font-display); font-weight: 600; }

.ambient-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-orbs i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .34; will-change: transform; }
.ambient-orbs i:nth-child(1) { width: 28vw; aspect-ratio: 1; left: -12vw; top: 34vh; background: radial-gradient(circle, rgba(var(--accent-rgb), .1), transparent 68%); animation: ambient-drift 18s ease-in-out infinite; }
.ambient-orbs i:nth-child(2) { width: 34vw; aspect-ratio: 1; right: -18vw; top: 100vh; background: radial-gradient(circle, rgba(120, 169, 196, .1), transparent 68%); animation: ambient-drift 22s 3s ease-in-out infinite reverse; }
.ambient-orbs i:nth-child(3) { width: 18vw; aspect-ratio: 1; left: 42vw; top: 210vh; background: radial-gradient(circle, rgba(224, 158, 172, .08), transparent 68%); animation: ambient-drift 20s 5s ease-in-out infinite; }
@keyframes ambient-drift { 50% { transform: translate3d(4vw, -5vh, 0) scale(1.12); } }

.custom-cursor { position: fixed; inset: 0; z-index: 9998; pointer-events: none; display: none; }
.custom-cursor__ring, .custom-cursor__dot { position: fixed; left: 0; top: 0; display: block; border-radius: 50%; pointer-events: none; will-change: transform; }
.custom-cursor__ring { width: 34px; height: 34px; border: 1px solid rgba(var(--accent-rgb), .72); background: rgba(var(--accent-rgb), .025); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 24px rgba(var(--accent-rgb), .12); transition: width .24s var(--ease-out), height .24s var(--ease-out), background-color .24s, border-color .24s, opacity .2s; }
.custom-cursor__dot { width: 5px; height: 5px; background: var(--accent); box-shadow: 0 0 11px rgba(var(--accent-rgb), .65); transition: width .2s, height .2s, background-color .2s, opacity .2s; }
.custom-cursor.is-hover .custom-cursor__ring { width: 52px; height: 52px; border-color: rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .1); }
.custom-cursor.is-hover .custom-cursor__dot { width: 7px; height: 7px; }
.custom-cursor.is-pressed .custom-cursor__ring { width: 25px; height: 25px; background: rgba(var(--accent-rgb), .2); }
.custom-cursor.is-hidden { opacity: 0; }
.cursor-burst { position: fixed; z-index: 9997; width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: cursor-bloom .55s var(--ease-out) forwards; }
@keyframes cursor-bloom { to { width: 72px; height: 72px; opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor summary { cursor: none !important; }
  html.has-custom-cursor .custom-cursor { display: block; }
}

.hero__content { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr); align-items: center; gap: clamp(24px, 4vw, 74px); min-height: min(900px, 100svh); padding-top: var(--header-height); }
.hero__content > * { opacity: 1; transform: none; animation: none; }
.hero__copy { position: relative; z-index: 4; padding-block: 90px 60px; }
.hero__copy > * { opacity: 0; transform: translateY(24px); animation: hero-up .82s var(--ease-silk) .16s forwards; }
.hero__copy h1 { animation-delay: .26s; }.hero__copy .hero__subtitle { animation-delay: .38s; }.hero__copy .hero__actions { animation-delay: .5s; }
.hero h1 { max-width: 690px; margin: 0; font-size: inherit; line-height: 1; letter-spacing: 0; }
.hero__name { display: block; width: fit-content; margin: 0 0 22px; padding-right: .12em; background: linear-gradient(108deg, #226e75 0%, #60b8af 45%, #a4d5bd 76%, #397e83 100%); background-size: 220% 100%; color: transparent; font-family: var(--font-ui); font-size: clamp(68px, 8.2vw, 126px); font-style: italic; font-weight: 780; line-height: .82; letter-spacing: -.075em; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 14px 25px rgba(47, 118, 109, .1)); animation: title-sheen 9s ease-in-out infinite; }
.hero__headline { display: block; max-width: 620px; font-family: var(--font-display); font-size: clamp(28px, 3.25vw, 50px); font-weight: 620; line-height: 1.38; letter-spacing: -.045em; text-wrap: balance; }
@keyframes title-sheen { 50% { background-position: 100% 0; } }
.hero__subtitle { max-width: 570px; margin-top: 24px; font-size: clamp(15px, 1.25vw, 18px); }

.hero__portrait-stage { position: relative; z-index: 3; width: min(43vw, 610px); height: min(82vh, 790px); justify-self: end; align-self: end; opacity: 0; transform: translate3d(44px, 20px, 0) scale(.96); animation: portrait-arrive 1.15s var(--ease-silk) .28s forwards; perspective: 1100px; --portrait-x: 0deg; --portrait-y: 0deg; }
@keyframes portrait-arrive { to { opacity: 1; transform: none; } }
.hero__portrait { position: absolute; inset: 3% -4% -3% -10%; z-index: 3; margin: 0; transform: rotateX(var(--portrait-y)) rotateY(var(--portrait-x)); transform-style: preserve-3d; transition: transform .18s ease-out; animation: portrait-float 7s 1.5s ease-in-out infinite; }
.hero__portrait::after { content: ""; position: absolute; left: 19%; right: 4%; bottom: 2%; height: 9%; border-radius: 50%; background: rgba(29, 68, 59, .18); filter: blur(27px); transform: translateZ(-30px); }
.hero__portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: saturate(.9) contrast(.98); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 83%, transparent 100%), linear-gradient(to right, transparent 0%, #000 13%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 83%, transparent 100%), linear-gradient(to right, transparent 0%, #000 13%, #000 86%, transparent 100%); mask-composite: intersect; }
@keyframes portrait-float { 50% { translate: 0 -10px; } }
.portrait-aura { position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; right: 2%; top: 18%; border-radius: 44% 56% 57% 43% / 54% 42% 58% 46%; background: radial-gradient(circle at 42% 36%, rgba(255,255,255,.85), rgba(var(--accent-rgb), .13) 48%, rgba(123,183,209,.09) 68%, transparent 72%); filter: blur(2px); animation: aura-morph 11s ease-in-out infinite; }
@keyframes aura-morph { 50% { border-radius: 57% 43% 41% 59% / 45% 60% 40% 55%; transform: rotate(7deg) scale(1.05); } }
.portrait-orbit { position: absolute; z-index: 2; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 50%; pointer-events: none; animation: orbit-spin 22s linear infinite; }
.portrait-orbit--outer { width: 92%; aspect-ratio: 1; right: -6%; top: 11%; }.portrait-orbit--inner { width: 61%; aspect-ratio: 1; right: 11%; top: 25%; animation-direction: reverse; animation-duration: 17s; }
.portrait-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .07), 0 0 20px rgba(var(--accent-rgb), .24); }
.portrait-orbit i:nth-child(1) { left: 8%; top: 20%; }.portrait-orbit i:nth-child(2) { right: 3%; top: 52%; }.portrait-orbit i:nth-child(3) { left: 40%; bottom: -4px; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.portrait-note { position: absolute; z-index: 7; right: -3%; bottom: 13%; width: min(280px, 72%); padding: 17px 20px; border: 1px solid rgba(255,255,255,.74); border-radius: var(--radius-sm); background: rgba(252,252,248,.72); box-shadow: 0 18px 50px rgba(25, 55, 47, .12); backdrop-filter: blur(18px) saturate(1.25); animation: note-float 6s 1s ease-in-out infinite; }
.portrait-note > span { display: flex; align-items: center; gap: 7px; color: var(--accent); font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .17em; }.portrait-note > span i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .11); }.portrait-note p { margin: 9px 0 0; color: #36433f; font-size: 12px; line-height: 1.65; }
@keyframes note-float { 50% { transform: translate3d(-5px, -9px, 0); } }
.portrait-coordinate { position: absolute; z-index: 5; left: -2%; bottom: 9%; display: flex; align-items: center; gap: 9px; color: var(--ink-faint); font-family: var(--font-ui); font-size: 8px; letter-spacing: .16em; writing-mode: vertical-rl; }.portrait-coordinate i { width: 1px; height: 44px; background: linear-gradient(transparent, var(--accent), transparent); }
:root[data-theme="dark"] .hero__portrait img { opacity: .9; filter: brightness(.78) saturate(.78) contrast(1.02); }.portrait-note { color-scheme: light; }

.magnetic { will-change: transform; }.post-card.is-tilting { transition: transform .14s ease-out, box-shadow .3s ease; }

.site-footer { width: 100%; min-height: 0; display: block; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 48%, transparent); }
.site-footer > div.footer-inner { min-height: 136px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 28px; }
.footer-signature { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 11px; }
.footer-legal { text-align: center; color: var(--ink-faint); font-size: 11px; line-height: 1.7; }.footer-copyright a, .beian-link { transition: color .2s ease; }.footer-copyright a:hover, .beian-link:hover { color: var(--accent); }
.footer-beian { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; }.beian-link { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; }.beian-link--police img { width: 20px; height: 20px; object-fit: contain; }.footer-separator { color: var(--line-strong); }
.footer-status { justify-self: end; display: inline-flex; align-items: center; gap: 9px; color: var(--ink-faint); font-size: 9px; font-weight: 650; letter-spacing: .16em; }.footer-status i { width: 7px; height: 7px; border-radius: 50%; background: #5ba87e; box-shadow: 0 0 0 5px rgba(91,168,126,.11); animation: status-pulse 2.5s ease-in-out infinite; }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 8px rgba(91,168,126,0); } }

@media (max-width: 1000px) {
  .hero__content { grid-template-columns: minmax(0, 1fr) minmax(330px, .75fr); gap: 10px; }.hero__portrait-stage { width: 44vw; height: min(76vh, 700px); }.hero__name { font-size: clamp(62px, 9vw, 92px); }.hero__headline { font-size: clamp(27px, 4vw, 40px); }.portrait-note { right: 0; }
  .site-footer > div.footer-inner { grid-template-columns: 1fr auto; }.footer-signature { display: none; }.footer-legal { text-align: left; }.footer-beian { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .hero { min-height: 900px; }.hero__content { display: block; min-height: 900px; padding-top: calc(var(--header-height) + 44px); }.hero__copy { position: relative; z-index: 7; padding: 34px 0 0; }.hero__name { margin-bottom: 18px; font-size: clamp(58px, 20vw, 84px); }.hero__headline { max-width: 92%; font-size: clamp(29px, 8.6vw, 42px); line-height: 1.32; }.hero__subtitle { max-width: 90%; font-size: 14px; }.hero__actions { gap: 18px; }
  .hero__portrait-stage { position: absolute; z-index: 2; width: 95vw; height: 520px; right: -25vw; bottom: -18px; opacity: .6; }.hero__portrait { inset: 1% 0 -8% -5%; }.hero__portrait img { -webkit-mask-image: radial-gradient(ellipse 72% 75% at 60% 53%, #000 46%, rgba(0,0,0,.75) 67%, transparent 100%); mask-image: radial-gradient(ellipse 72% 75% at 60% 53%, #000 46%, rgba(0,0,0,.75) 67%, transparent 100%); }.portrait-note, .portrait-coordinate, .portrait-orbit--inner { display: none; }.portrait-orbit--outer { opacity: .6; }.hero__glow { opacity: .35; }
  .site-footer > div.footer-inner { min-height: 0; grid-template-columns: 1fr; justify-items: center; gap: 12px; padding-block: 30px; }.footer-signature { display: none; }.footer-legal { width: 100%; text-align: center; }.footer-beian { justify-content: center; }.footer-status { justify-self: center; }.beian-link { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .hero__portrait-stage { opacity: 1 !important; transform: none !important; animation: none !important; }.hero__portrait, .portrait-aura, .portrait-orbit, .portrait-note, .hero__name, .ambient-orbs i, .footer-status i { animation: none !important; }.custom-cursor, .cursor-burst { display: none !important; }
}

/* Luma 1.2 — bright cyber / animated identity system */
:root {
  --bg: #f6fbfc;
  --surface: #ffffff;
  --surface-soft: #edf7f8;
  --ink: #101b25;
  --ink-soft: #526572;
  --ink-faint: #7c929e;
  --line: rgba(23, 117, 136, .14);
  --line-strong: rgba(23, 117, 136, .28);
  --shadow: 0 24px 70px rgba(32, 105, 125, .09);
  --shadow-hover: 0 34px 88px rgba(55, 107, 139, .16);
  --cyber-cyan: #3cd9e8;
  --cyber-blue: #7198ff;
  --cyber-violet: #a889ef;
  --cyber-pink: #f08bb3;
  --cyber-mono: "Share Tech Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --z-base: 0;
  --z-field: 1;
  --z-content: 10;
  --z-header: 40;
  --z-overlay: 100;
  --z-cursor: 1000;
}
:root[data-theme="dark"] {
  --bg: #081118;
  --surface: #0e1a23;
  --surface-soft: #122631;
  --ink: #ecfbff;
  --ink-soft: #a7c1cb;
  --ink-faint: #6f909d;
  --line: rgba(94, 216, 232, .14);
  --line-strong: rgba(94, 216, 232, .3);
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --shadow-hover: 0 34px 88px rgba(0, 0, 0, .4);
}
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .026) 1px, transparent 1px);
  background-size: 64px 64px;
}
.noise { opacity: .015; }
.site-header { z-index: var(--z-header); }
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-color: rgba(var(--accent-rgb), .18);
  box-shadow: 0 10px 34px rgba(44, 115, 131, .06);
}
.brand { color: var(--ink); font-family: var(--cyber-mono); letter-spacing: .24em; }
.brand-mark::before { border-radius: 5px 50% 50% 50%; transform: rotate(45deg); box-shadow: 0 0 18px rgba(var(--accent-rgb), .22); }
.brand-mark i:first-child { animation: cyber-mark 2.8s ease-in-out infinite; }
@keyframes cyber-mark { 50% { transform: translate3d(7px, -5px, 0); box-shadow: 0 0 16px var(--cyber-pink); } }
.desktop-nav { font-family: var(--cyber-mono); font-size: 12px; letter-spacing: .08em; }
.desktop-nav a[aria-current="page"]::after { box-shadow: 0 0 11px rgba(var(--accent-rgb), .7); }
.icon-button { border-color: transparent; }
.icon-button:hover { border-color: var(--line-strong); background: rgba(var(--accent-rgb), .06); }

.hero--cyber {
  min-height: min(940px, 100svh);
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 48%, rgba(84, 217, 231, .14), transparent 24%),
    radial-gradient(circle at 89% 19%, rgba(178, 150, 241, .11), transparent 19%),
    radial-gradient(circle at 61% 82%, rgba(240, 139, 179, .09), transparent 23%),
    linear-gradient(135deg, #fafdfe 0%, #f4fbfc 48%, #f7f7ff 100%);
}
:root[data-theme="dark"] .hero--cyber {
  background:
    radial-gradient(circle at 76% 48%, rgba(60, 217, 232, .12), transparent 28%),
    radial-gradient(circle at 89% 19%, rgba(168, 137, 239, .1), transparent 22%),
    linear-gradient(135deg, #081118 0%, #0b1821 56%, #101525 100%);
}
.hero--cyber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(246,251,252,.95) 0%, rgba(246,251,252,.68) 36%, transparent 65%);
}
:root[data-theme="dark"] .hero--cyber::before { background: linear-gradient(90deg, rgba(8,17,24,.95), rgba(8,17,24,.64) 38%, transparent 68%); }
.hero-field-canvas { position: absolute; inset: 0; z-index: var(--z-field); width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.hero--intensity-quiet .hero-field-canvas { opacity: .3; }
.hero--intensity-quiet .cyber-grid { opacity: .24; }
.hero--intensity-quiet .cyber-scan { opacity: .16; }
.hero--intensity-quiet .hero__glow { opacity: .45; }
.hero--intensity-quiet .portrait-orbit { opacity: .48; }
.hero--intensity-vivid .hero-field-canvas { opacity: .9; }
.hero--intensity-vivid .cyber-grid { opacity: .62; }
.hero--intensity-vivid .cyber-scan { opacity: .52; }
.hero--intensity-vivid .hero__glow { opacity: .92; }
.hero--intensity-vivid .portrait-orbit { border-color: rgba(var(--accent-rgb), .32); }
.hero__backdrop { z-index: 0; background: radial-gradient(circle at 70% 55%, rgba(var(--accent-rgb), .1), transparent 34%); }
.hero__backdrop--image { opacity: .17; mix-blend-mode: multiply; }
:root[data-theme="dark"] .hero__backdrop--image { mix-blend-mode: screen; opacity: .12; }
.hero__glow { z-index: 3; border-color: rgba(var(--accent-rgb), .18); }
.hero__glow--one { width: 42vw; height: 42vw; right: -8vw; top: 7vh; }
.hero__glow--two { width: 20vw; height: 20vw; right: 27vw; bottom: -7vw; border-style: dashed; animation-duration: 28s; }
.hero__veil { z-index: 30; }
.hero__veil i:first-child { background: #f9fdfe; }
.hero__veil i:last-child { background: #f4f8ff; }
:root[data-theme="dark"] .hero__veil i { background: #081118; }
.cyber-grid {
  position: absolute;
  z-index: 1;
  left: 42%;
  right: -12%;
  bottom: -27%;
  height: 58%;
  opacity: .46;
  pointer-events: none;
  background-image: linear-gradient(rgba(var(--accent-rgb), .13) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .13) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(620px) rotateX(64deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 94%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 94%);
}
.cyber-scan { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; opacity: .34; }
.cyber-scan::before { content: ""; position: absolute; left: 48%; right: 2%; height: 1px; top: 12%; background: linear-gradient(90deg, transparent, var(--cyber-cyan), var(--cyber-pink), transparent); box-shadow: 0 0 16px rgba(60,217,232,.7); animation: hero-scan 5.6s ease-in-out infinite; }
@keyframes hero-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 24% { opacity: .9; } 72% { opacity: .45; } 88%, 100% { transform: translateY(68vh); opacity: 0; } }
.cyber-index { position: absolute; z-index: 8; left: max(24px, calc((100vw - 1180px) / 2)); bottom: 38px; display: flex; gap: 12px; align-items: center; font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .18em; color: var(--ink-faint); }
.cyber-index::before { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.cyber-index b { color: var(--accent); font-weight: 500; }

.hero--cyber .hero__content { z-index: var(--z-content); grid-template-columns: minmax(390px, .82fr) minmax(510px, 1.18fr); gap: clamp(12px, 2vw, 42px); min-height: min(940px, 100svh); }
.hero--cyber .hero__copy { padding-block: 112px 82px; }
.hero--cyber .hero__copy > * { animation-duration: .68s; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cyber-mono); letter-spacing: .16em; }
.hero__eyebrow::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); box-shadow: 0 0 11px rgba(var(--accent-rgb), .45); }
.hero--cyber .hero__name {
  margin-bottom: 24px;
  padding: 0 .08em .06em 0;
  background: linear-gradient(96deg, #167f91 0%, #35c8d4 36%, #878de9 68%, #e884b0 100%);
  background-size: 220% 100%;
  color: transparent;
  font-family: "Arial Narrow", "Aptos Display", var(--font-ui);
  font-size: clamp(78px, 8.8vw, 138px);
  font-style: italic;
  font-weight: 780;
  letter-spacing: -.09em;
  filter: drop-shadow(0 16px 28px rgba(72, 150, 175, .15));
  -webkit-background-clip: text;
  background-clip: text;
  animation: cyber-title 7s ease-in-out infinite;
}
@keyframes cyber-title { 0%,100% { background-position: 0 0; filter: drop-shadow(0 16px 28px rgba(72,150,175,.12)); } 50% { background-position: 100% 0; filter: drop-shadow(0 16px 34px rgba(168,137,239,.22)); } }
.hero--cyber .hero__headline { max-width: 570px; color: var(--ink); font-family: var(--font-body); font-size: clamp(31px, 3.1vw, 49px); font-weight: 690; line-height: 1.24; letter-spacing: -.05em; }
.hero--cyber .hero__subtitle { max-width: 520px; margin-top: 24px; color: var(--ink-soft); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.8; }
.hero--cyber .hero__actions { margin-top: 34px; }
.hero--cyber .button--primary {
  position: relative;
  min-width: 148px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 7px 18px 7px 7px;
  background: linear-gradient(120deg, #122731, #163b45);
  box-shadow: 0 14px 34px rgba(21, 111, 128, .18), 0 0 0 1px rgba(255,255,255,.08) inset;
  color: #effeff;
}
.hero--cyber .button--primary::before { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(105deg, transparent, rgba(111,237,244,.2), transparent); transition: transform .5s var(--ease-out); }
.hero--cyber .button--primary:hover::before { transform: translateX(110%); }
.hero--cyber .hero__stat strong { color: var(--accent); font-family: var(--cyber-mono); font-weight: 500; }
.hero__protocol { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .12em; }
.hero__protocol span { display: inline-flex; align-items: center; gap: 7px; }
.hero__protocol i { width: 5px; height: 5px; border-radius: 50%; background: #54c998; box-shadow: 0 0 0 4px rgba(84,201,152,.11), 0 0 10px rgba(84,201,152,.45); animation: protocol-pulse 2s ease-in-out infinite; }
@keyframes protocol-pulse { 50% { opacity: .35; transform: scale(.72); } }

.avatar-system {
  --avatar-x: 0px;
  --avatar-y: 0px;
  --avatar-rx: 0deg;
  --avatar-ry: 0deg;
  position: relative;
  z-index: 4;
  width: min(55vw, 710px);
  height: min(92svh, 850px);
  justify-self: end;
  perspective: 1100px;
  transform-style: preserve-3d;
  transform: translate3d(var(--avatar-x), var(--avatar-y), 0) rotateX(var(--avatar-rx)) rotateY(var(--avatar-ry));
  transition: opacity .3s ease;
  will-change: transform;
}
.avatar-system::before { content: ""; position: absolute; z-index: 0; width: 80%; aspect-ratio: 1; right: 2%; top: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.96) 0 30%, rgba(77,217,230,.14) 54%, rgba(168,137,239,.08) 68%, transparent 72%); filter: blur(2px); animation: cyber-breathe 5.4s ease-in-out infinite; }
.avatar-system::after { content: ""; position: absolute; z-index: 6; left: 10%; right: 0; bottom: 4%; height: 18%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 78%, transparent) 68%, var(--bg)); pointer-events: none; }
@keyframes cyber-breathe { 50% { transform: scale(1.045); opacity: .76; } }
.avatar-system [data-avatar-layer] { --layer-x: 0px; --layer-y: 0px; }
.avatar-system .hero__portrait { inset: -1% -7% -2% -4%; z-index: 4; transform: translate3d(var(--layer-x), var(--layer-y), 0); animation: avatar-float 6.8s ease-in-out infinite; transition: none; }
.avatar-system .hero__portrait::after { display: none; }
.avatar-system .hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-position, center center);
  opacity: .98;
  filter: saturate(1.06) contrast(.98);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0%, #000 18%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0%, #000 18%, #000 87%, transparent 100%);
  mask-composite: intersect;
}
:root[data-theme="dark"] .avatar-system .hero__portrait img { opacity: .88; filter: brightness(.78) saturate(.92) contrast(1.05); mix-blend-mode: screen; }
@keyframes avatar-float { 50% { translate: 0 -12px; rotate: .35deg; } }
.avatar-echo { position: absolute; inset: 3% -9% 4% 0; z-index: 3; margin: 0; opacity: .14; mix-blend-mode: multiply; clip-path: polygon(0 32%, 100% 25%, 100% 38%, 0 45%); transform: translate3d(14px, 2px, -20px); animation: echo-shift 4.8s steps(1,end) infinite; pointer-events: none; }
.avatar-echo img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: hue-rotate(32deg) saturate(1.7); }
:root[data-theme="dark"] .avatar-echo { mix-blend-mode: screen; }
@keyframes echo-shift { 0%, 87%, 100% { transform: translate3d(14px,2px,-20px); opacity: .08; } 89% { transform: translate3d(-9px,-2px,-20px); opacity: .25; } 92% { transform: translate3d(22px,4px,-20px); opacity: .16; } }
.avatar-beam { position: absolute; z-index: 7; left: 18%; right: 3%; top: 9%; height: 2px; background: linear-gradient(90deg, transparent, rgba(60,217,232,.88), rgba(240,139,179,.7), transparent); box-shadow: 0 0 20px rgba(60,217,232,.55); opacity: 0; animation: avatar-scan 5.4s 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes avatar-scan { 0%,12% { translate: 0 0; opacity: 0; } 22% { opacity: .8; } 75% { opacity: .35; } 88%,100% { translate: 0 620px; opacity: 0; } }
.avatar-system .portrait-aura { width: 82%; right: -1%; top: 12%; background: conic-gradient(from 130deg, rgba(60,217,232,.02), rgba(60,217,232,.14), rgba(168,137,239,.12), rgba(240,139,179,.09), transparent 70%); filter: blur(10px); animation-duration: 13s; }
.avatar-system .portrait-orbit { z-index: 2; border-color: rgba(var(--accent-rgb), .22); box-shadow: 0 0 34px rgba(60,217,232,.045) inset; }
.avatar-system .portrait-orbit--outer { width: 91%; right: -5%; top: 12%; border-style: solid dashed dashed solid; animation-duration: 28s; }
.avatar-system .portrait-orbit--middle { width: 73%; aspect-ratio: 1; right: 4%; top: 20%; border-style: dashed; animation-duration: 21s; animation-direction: reverse; }
.avatar-system .portrait-orbit--inner { width: 54%; right: 14%; top: 29%; border-color: rgba(168,137,239,.24); animation-duration: 16s; }
.avatar-system .portrait-orbit i { background: #f8feff; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .08), 0 0 18px rgba(60,217,232,.44); }
.avatar-system .portrait-orbit--middle i:nth-child(4) { right: 42%; top: -4px; }
.avatar-hud, .avatar-chip, .hologram-card { font-family: var(--cyber-mono); backdrop-filter: blur(16px) saturate(1.2); }
.avatar-hud { position: absolute; z-index: 8; display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 8px; letter-spacing: .14em; }
.avatar-hud::before { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.avatar-hud b { color: var(--accent); font-weight: 500; }
.avatar-hud--top { right: 6%; top: 11%; }
.avatar-hud--side { right: -1%; top: 46%; transform: rotate(90deg) translateX(50%); transform-origin: right center; }
.hologram-card { right: -1%; bottom: 15%; width: min(292px, 72%); transform: translate3d(var(--layer-x), var(--layer-y), 0); border: 1px solid rgba(var(--accent-rgb), .26); border-radius: 5px 18px 5px 5px; background: linear-gradient(130deg, rgba(255,255,255,.82), rgba(239,251,253,.6)); box-shadow: 0 18px 58px rgba(47,111,136,.14), 0 0 30px rgba(60,217,232,.08) inset; animation: holo-float 6s 1s ease-in-out infinite; }
@keyframes holo-float { 50% { translate: -5px -9px; } }
:root[data-theme="dark"] .hologram-card { background: linear-gradient(130deg, rgba(14,32,43,.86), rgba(20,31,50,.72)); }
.hologram-card::before { content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 2px; background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-pink)); box-shadow: 0 0 12px rgba(60,217,232,.55); }
.hologram-card p { color: var(--ink-soft); }
.avatar-chip { position: absolute; z-index: 8; display: grid; grid-template-columns: 7px auto; gap: 1px 8px; min-width: 118px; padding: 10px 13px; border: 1px solid rgba(var(--accent-rgb), .19); background: rgba(249,254,255,.62); color: var(--ink-faint); font-size: 8px; letter-spacing: .12em; box-shadow: 0 12px 32px rgba(70,127,150,.08); }
:root[data-theme="dark"] .avatar-chip { background: rgba(12,29,39,.72); }
.avatar-chip i { grid-row: 1 / 3; align-self: center; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); }
.avatar-chip b { color: var(--accent); font-weight: 500; }
.avatar-chip--one { left: 2%; top: 36%; transform: translate3d(var(--layer-x), var(--layer-y), 0); border-radius: 14px 4px 4px 4px; animation: chip-float 5.2s ease-in-out infinite; }
.avatar-chip--two { right: 6%; top: 24%; transform: translate3d(var(--layer-x), var(--layer-y), 0); border-radius: 4px 4px 14px 4px; animation: chip-float 6.2s 1s ease-in-out infinite reverse; }
@keyframes chip-float { 50% { translate: 0 -8px; } }
.avatar-system .portrait-coordinate { z-index: 8; left: 5%; bottom: 13%; }

.custom-cursor { z-index: var(--z-cursor); }
.custom-cursor__ring { width: 38px; height: 38px; border-color: rgba(var(--accent-rgb), .56); border-radius: 9px 50% 50% 50%; transform-origin: center; box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 26px rgba(60,217,232,.18); }
.custom-cursor__ring::before, .custom-cursor__ring::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(var(--accent-rgb), .46); transform: translate(-50%,-50%); }
.custom-cursor__ring::before { width: 52px; height: 1px; }
.custom-cursor__ring::after { width: 1px; height: 52px; }
.custom-cursor__dot { width: 6px; height: 6px; background: var(--cyber-pink); box-shadow: 0 0 14px rgba(240,139,179,.85); }
.custom-cursor.is-hover .custom-cursor__ring { width: 58px; height: 58px; border-radius: 50%; border-color: rgba(168,137,239,.5); background: rgba(60,217,232,.06); }
.cursor-burst { border-color: var(--cyber-pink); box-shadow: 0 0 22px rgba(240,139,179,.28); }

.latest-section { position: relative; }
.section-heading .eyebrow, .collection-hero .eyebrow { font-family: var(--cyber-mono); }
.section-heading h2, .collection-hero h1, .article-header h1, .manifesto h2 { font-family: var(--font-body); }
.post-card { position: relative; border-color: rgba(var(--accent-rgb), .16); background: color-mix(in srgb, var(--surface) 93%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 60px rgba(53,114,134,.06); }
.post-card::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 58px; height: 2px; background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-violet), transparent); transition: width .4s var(--ease-out); }
.post-card::after { content: ""; position: absolute; z-index: 2; right: 12px; top: 12px; width: 10px; height: 10px; border-top: 1px solid rgba(var(--accent-rgb), .46); border-right: 1px solid rgba(var(--accent-rgb), .46); }
.post-card:hover::before { width: 34%; }
.post-card__meta { font-family: var(--cyber-mono); }
.post-card__media img { filter: saturate(.82) contrast(.96); }
.post-card:hover .post-card__media img { filter: saturate(1.02) contrast(1); }
.manifesto { overflow: hidden; border-color: rgba(var(--accent-rgb), .18); background: linear-gradient(135deg, rgba(var(--accent-rgb),.08), rgba(168,137,239,.055), rgba(240,139,179,.045)); }
.site-footer { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.footer-status { font-family: var(--cyber-mono); }

@media (max-width: 1100px) {
  .hero--cyber .hero__content { grid-template-columns: minmax(340px, .86fr) minmax(420px, 1.14fr); }
  .avatar-system { width: 55vw; }
  .avatar-chip--one { left: 5%; }
  .avatar-hud--side { display: none; }
}
@media (max-width: 760px) {
  .hero--cyber { min-height: 940px; }
  .hero--cyber::before { background: linear-gradient(180deg, rgba(246,251,252,.96) 0 42%, rgba(246,251,252,.56) 63%, transparent 82%); }
  :root[data-theme="dark"] .hero--cyber::before { background: linear-gradient(180deg, rgba(8,17,24,.96) 0 42%, rgba(8,17,24,.66) 66%, transparent 88%); }
  .hero--cyber .hero__content { min-height: 940px; padding-top: calc(var(--header-height) + 30px); }
  .hero--cyber .hero__copy { padding-top: 34px; }
  .hero--cyber .hero__name { margin-bottom: 20px; font-size: clamp(66px, 21vw, 88px); }
  .hero--cyber .hero__headline { max-width: 96%; font-size: clamp(30px, 8.3vw, 40px); line-height: 1.25; }
  .hero--cyber .hero__subtitle { max-width: 92%; font-size: 15px; }
  .hero__protocol { display: none; }
  .avatar-system { width: 112vw; height: 570px; right: -12vw; bottom: -22px; opacity: .76; }
  .avatar-system .hero__portrait { inset: -2% -5% -4% 0; }
  .avatar-system .hero__portrait img { object-position: var(--portrait-position, center 45%); -webkit-mask-image: radial-gradient(ellipse 72% 78% at 57% 48%, #000 58%, rgba(0,0,0,.72) 78%, transparent 100%); -webkit-mask-composite: initial; mask-image: radial-gradient(ellipse 72% 78% at 57% 48%, #000 58%, rgba(0,0,0,.72) 78%, transparent 100%); mask-composite: initial; }
  .avatar-echo, .avatar-chip--one, .avatar-hud, .avatar-system .portrait-coordinate, .portrait-note, .cyber-index { display: none; }
  .avatar-chip--two { top: 31%; right: 19%; display: grid; transform: scale(.9); }
  .avatar-system .portrait-orbit--middle, .avatar-system .portrait-orbit--inner { display: block; opacity: .44; }
  .avatar-beam { left: 24%; right: 12%; }
  .cyber-grid { left: 10%; right: -45%; bottom: -15%; opacity: .34; }
  .cyber-scan::before { left: 18%; right: 2%; }
  .scroll-cue { display: none; }
}
@media (max-width: 420px) {
  .shell { width: min(100% - 32px, 1180px); }
  .hero--cyber .hero__eyebrow { font-size: 10px; }
  .hero--cyber .hero__actions { gap: 14px; }
  .hero--cyber .hero__stat { padding-left: 16px; }
  .avatar-system { width: 115vw; right: -18vw; }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-scan::before, .avatar-beam, .avatar-echo, .avatar-system::before, .avatar-chip, .hero__protocol i, .brand-mark i, .hero--cyber .hero__name { animation: none !important; }
  .hero-field-canvas, .cyber-scan { display: none; }
}

/* Progressive media loading and pagination */
.lazy-media { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-soft); }
.lazy-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 22%, rgba(var(--accent-rgb), .12) 46%, rgba(168, 137, 239, .11) 54%, transparent 78%);
  transform: translateX(-100%);
}
.lazy-media.is-loading::before { opacity: 1; animation: lazy-scan 1.35s ease-in-out infinite; }
.lazy-image { opacity: 0; transition: opacity .42s ease-out, filter .5s ease-out, transform .75s var(--ease-silk); }
.lazy-image.is-loaded { opacity: 1; }
.lazy-image.is-error { opacity: .38; filter: grayscale(1); }
@keyframes lazy-scan { to { transform: translateX(100%); } }

.pagination-wrap { margin-top: 52px; }
.pagination-wrap .pagination { margin-top: 0; }
.pagination-wrap.is-auto .pagination { display: none; }
.pagination-wrap.is-auto.is-error .pagination,
.pagination-wrap.is-manual .pagination { display: flex; margin-top: 20px; }
.infinite-loader {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--ink-faint);
  font-family: var(--cyber-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.infinite-loader[hidden] { display: none; }
.infinite-loader__orbit { display: flex; width: 34px; height: 28px; align-items: center; justify-content: center; gap: 4px; padding: 5px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 9px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.infinite-loader__orbit::before { display: none; }
.infinite-loader__orbit i { position: static; width: 3px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .38); animation: loader-signal .72s ease-in-out infinite alternate; }
.infinite-loader__orbit i:nth-child(2) { height: 14px; animation-delay: -.24s; }
.infinite-loader__orbit i:nth-child(3) { height: 10px; animation-delay: -.48s; }
.pagination-wrap[data-state="idle"] .infinite-loader__orbit,
.pagination-wrap[data-state="complete"] .infinite-loader__orbit,
.pagination-wrap[data-state="error"] .infinite-loader__orbit { animation-play-state: paused; opacity: .55; }
.pagination-wrap[data-state="idle"] .infinite-loader__orbit i,
.pagination-wrap[data-state="complete"] .infinite-loader__orbit i,
.pagination-wrap[data-state="error"] .infinite-loader__orbit i { animation-play-state: paused; }
.pagination-wrap.is-manual .infinite-loader { flex-wrap: wrap; }
.infinite-loader__button { min-height: 44px; margin-left: 8px; cursor: pointer; }
.infinite-loader__button:disabled { cursor: wait; opacity: .55; }
@keyframes loader-signal { to { height: 18px; opacity: .48; } }

/* Extension pages */
.extension-shell { padding-bottom: 120px; }
.page-intro { position: relative; }
.page-intro::after { content: ""; position: absolute; right: 2%; bottom: 66px; width: min(280px, 24vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .52)); box-shadow: 0 0 18px rgba(var(--accent-rgb), .2); }
.filter-pills { display: flex; gap: 9px; margin-bottom: 34px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: thin; }
.filter-pills a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 13px; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.filter-pills a:hover, .filter-pills a.is-active { border-color: rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .08); color: var(--accent); transform: translateY(-1px); }
.filter-pills b { color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 9px; font-weight: 500; }
.extension-empty { min-height: 340px; }

.link-directory { display: grid; gap: 68px; }
.link-group { content-visibility: auto; contain-intrinsic-size: 1px 380px; }
.link-group__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.link-group__header > div { display: flex; align-items: baseline; gap: 13px; }
.link-group__header h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); font-weight: 610; letter-spacing: -.04em; }
.link-group__index, .link-group__header > span { color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .14em; }
.link-group__header > span b { color: var(--accent); font-weight: 500; }
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.link-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 17px; align-items: center; min-height: 134px; padding: 22px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .14); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 15px 45px rgba(50, 111, 128, .05); transition: transform .3s var(--ease-out), border-color .25s, box-shadow .3s; }
.link-card::before { content: ""; position: absolute; left: 0; top: 0; width: 45px; height: 2px; background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-violet)); transition: width .35s var(--ease-out); }
.link-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 22px 54px rgba(50,111,128,.11); }
.link-card:hover::before { width: 42%; }
.link-card__logo { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 16px 5px 16px 16px; }
.link-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.link-card__logo--empty { display: grid; place-items: center; background: rgba(var(--accent-rgb), .06); }
.link-card__logo--empty i { width: 17px; height: 17px; border: 1px solid var(--accent); transform: rotate(45deg); box-shadow: 0 0 16px rgba(var(--accent-rgb), .28); }
.link-card__body { min-width: 0; }
.link-card h3 { margin: 0; overflow: hidden; font-size: 16px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.link-card p { display: -webkit-box; margin: 7px 0 8px; overflow: hidden; color: var(--ink-soft); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.link-card small { display: block; overflow: hidden; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.link-card__arrow { width: 18px; color: var(--accent); opacity: .45; transition: opacity .2s, transform .25s; }
.link-card:hover .link-card__arrow { opacity: 1; transform: translateX(3px); }

.moment-list { display: grid; gap: 18px; }
.moment-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 18px 54px rgba(47, 105, 124, .055); content-visibility: auto; contain-intrinsic-size: 1px 320px; }
.moment-card__author img, .moment-card__author > span { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--line); border-radius: 14px 5px 14px 14px; background: var(--surface-soft); object-fit: cover; }
.moment-card__author i { width: 15px; height: 15px; border: 1px solid var(--accent); transform: rotate(45deg); }
.moment-card__main > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.moment-card__main > header strong { display: block; font-size: 15px; }
.moment-card__main > header time { display: block; margin-top: 4px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .08em; }
.moment-card__main > header > span { color: rgba(var(--accent-rgb), .58); font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .16em; }
.moment-content.markdown-body { margin-top: 19px; font-size: 15px; line-height: 1.8; }
.moment-content.markdown-body > * { margin-block: .8em; }
.moment-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.moment-tags a { color: var(--accent); font-size: 12px; }
.moment-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.moment-media figure { min-height: 150px; aspect-ratio: 1; margin: 0; border-radius: var(--radius-sm); }
.moment-media img, .moment-media video { width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: cover; }
.moment-media video, .moment-media audio { max-width: 100%; }
.moment-media audio, .moment-attachment { grid-column: 1 / -1; }
.moment-attachment { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.moment-attachment svg { width: 18px; }
.moment-card__main > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; }
.moment-card__main > footer b { color: var(--accent); font-family: var(--cyber-mono); }
.moment-card__main > footer a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--ink-soft); }
.moment-card__main > footer svg { width: 16px; }

.photo-grid { columns: 3 300px; column-gap: 16px; }
.photo-card { position: relative; margin: 0 0 16px; break-inside: avoid; border: 1px solid rgba(var(--accent-rgb), .15); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 16px 48px rgba(43, 102, 122, .06); content-visibility: auto; contain-intrinsic-size: 1px 420px; }
.photo-card > a { display: block; }
.photo-card figure { position: relative; min-height: 220px; margin: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.photo-card img { width: 100%; min-height: 220px; object-fit: cover; transition: transform .75s var(--ease-silk), opacity .42s; }
.photo-card figcaption { position: absolute; inset: auto 0 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 60px 20px 18px; background: linear-gradient(to top, rgba(5, 18, 25, .78), transparent); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease-out); }
.photo-card:hover figcaption, .photo-card a:focus-visible figcaption { opacity: 1; transform: none; }
.photo-card figcaption h2 { margin: 0; font-size: 17px; }
.photo-card figcaption p { margin: 5px 0 0; color: rgba(255,255,255,.75); font-size: 11px; }
.photo-card figcaption svg { width: 18px; flex: 0 0 auto; }
.photo-card__meta { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .08em; }

.about-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.about-hero > div:first-child { max-width: 760px; }
.about-signal { display: grid; grid-template-columns: 8px auto; gap: 3px 10px; min-width: 180px; padding: 14px 17px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 5px 17px 5px 5px; background: rgba(var(--accent-rgb), .045); font-family: var(--cyber-mono); font-size: 8px; letter-spacing: .12em; }
.about-signal i { grid-row: 1 / 3; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #54c998; box-shadow: 0 0 10px rgba(84,201,152,.6); }
.about-signal b { color: var(--accent); font-weight: 500; }
.about-layout { display: grid; grid-template-columns: minmax(260px, .34fr) minmax(0, .66fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-bottom: 120px; }
.about-profile { position: sticky; top: calc(var(--header-height) + 28px); overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .17); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 22px 70px rgba(47,105,124,.07); }
.about-profile__visual { min-height: 300px; aspect-ratio: .94; border-bottom: 1px solid var(--line); }
.about-profile__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.about-profile__visual > span { position: absolute; inset: 0; z-index: 2; border: 1px solid transparent; background: linear-gradient(to top, rgba(var(--accent-rgb), .18), transparent 42%); pointer-events: none; }
.about-profile__visual--brand { display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent 48%), linear-gradient(135deg, var(--surface-soft), color-mix(in srgb, var(--surface-soft) 70%, rgba(168,137,239,.18))); }
.about-profile__visual--brand .brand-mark { transform: scale(2.4); }
.about-profile__copy { padding: 26px 26px 20px; }
.about-profile__copy h2 { margin: 7px 0 8px; font-size: 28px; letter-spacing: -.04em; }
.about-profile__copy > p:last-child { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.about-metrics { margin: 0; padding: 0 26px 24px; }
.about-metrics > div { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); font-family: var(--cyber-mono); font-size: 9px; letter-spacing: .08em; }
.about-metrics dt { color: var(--ink-faint); }
.about-metrics dd { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--accent); }
.about-metrics dd i { width: 5px; height: 5px; border-radius: 50%; background: #54c998; }
.about-content { min-width: 0; padding: clamp(26px, 5vw, 54px); border: 1px solid rgba(var(--accent-rgb), .14); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.about-content__top { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 8px; letter-spacing: .13em; }
.about-content__top i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--line), rgba(var(--accent-rgb),.36), var(--line)); }

.performance-lite .ambient-orbs,
.performance-lite .hero-field-canvas,
.performance-lite #cursor-canvas,
.performance-lite .custom-cursor,
.performance-lite .cyber-scan,
.performance-lite .avatar-echo,
.performance-lite .avatar-beam { display: none !important; }
.performance-lite .avatar-system,
.performance-lite [data-avatar-layer] { transform: none !important; }

@media (max-width: 900px) {
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-layout { grid-template-columns: 1fr; }
  .about-profile { position: relative; top: auto; display: grid; grid-template-columns: minmax(220px, .42fr) minmax(0, .58fr); }
  .about-profile__visual { grid-row: 1 / 3; min-height: 360px; border-right: 1px solid var(--line); border-bottom: 0; }
  .about-profile__copy { align-self: end; }
}
@media (max-width: 640px) {
  .extension-shell { padding-bottom: 88px; }
  .page-intro::after, .about-signal { display: none; }
  .link-grid { grid-template-columns: 1fr; }
  .link-card { min-height: 124px; padding: 18px; }
  .link-group__header { align-items: center; }
  .moment-card { grid-template-columns: 40px minmax(0, 1fr); gap: 13px; padding: 19px 16px; }
  .moment-card__author img, .moment-card__author > span { width: 40px; height: 40px; border-radius: 12px 4px 12px 12px; }
  .moment-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moment-media figure { min-height: 120px; }
  .photo-grid { columns: 1; }
  .photo-card figcaption { opacity: 1; transform: none; }
  .about-hero { display: block; }
  .about-profile { display: block; }
  .about-profile__visual { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
  .about-content { padding: 25px 20px; }
  .markdown-body table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lazy-media.is-loading::before, .infinite-loader__orbit { animation: none !important; }
  .lazy-image { transition: none; }
  .link-card:hover, .filter-pills a:hover { transform: none; }
}

/* Article motion system · layered, reading-safe and progressively enhanced */
.post-page { --article-progress: 0; }
.article-header__signal { display: inline-grid; grid-template-columns: 7px auto auto; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 10px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 999px; background: rgba(var(--accent-rgb), .035); color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .15em; }
.article-header__signal i { width: 5px; height: 5px; border-radius: 50%; background: #55c99a; box-shadow: 0 0 0 4px rgba(85,201,154,.1), 0 0 12px rgba(85,201,154,.45); }
.article-header__signal b { color: var(--accent); font-weight: 500; }
.article-cover { position: relative; isolation: isolate; --cover-shift-x: 0px; --cover-shift-y: 0px; --cover-scroll: 0px; --cover-light-x: 72%; --cover-light-y: 28%; }
.article-cover img { will-change: transform; }
.article-cover__scan { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.2) 48%, rgba(128,231,239,.12) 52%, transparent 65%); opacity: 0; transform: translateX(-62%); }
.article-cover__hud { position: absolute; z-index: 3; right: 22px; bottom: 20px; display: flex; min-width: 154px; align-items: center; justify-content: space-between; gap: 22px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.32); border-radius: 3px 13px 3px 3px; background: rgba(7,21,27,.34); color: rgba(255,255,255,.84); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .16em; backdrop-filter: blur(9px); }
.article-cover__hud b { color: #9bf1eb; font-size: 9px; font-weight: 500; }
.toc-panel__signal { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; color: rgba(var(--accent-rgb), .66); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .13em; }
.toc-panel__signal i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .42); }
.article-main { position: relative; }
.article-rail { position: absolute; top: 0; bottom: 0; left: -31px; width: 1px; overflow: hidden; background: linear-gradient(to bottom, transparent, var(--line-strong) 5%, var(--line-strong) 95%, transparent); pointer-events: none; }
.article-rail i { display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, var(--cyber-cyan), var(--cyber-violet), var(--cyber-pink)); transform: scaleY(var(--article-progress)); transform-origin: top; box-shadow: 0 0 10px rgba(var(--accent-rgb), .55); will-change: transform; }

.article-motion .article-header__signal { animation: article-header-in .65s .05s var(--ease-silk) both; }
.article-motion .article-meta { animation: article-header-in .7s .1s var(--ease-silk) both; }
.article-motion .article-header h1 { animation: article-header-in .82s .16s var(--ease-silk) both; }
.article-motion .article-excerpt { animation: article-header-in .78s .24s var(--ease-silk) both; }
.article-motion .article-author { animation: article-header-in .74s .3s var(--ease-silk) both; }
.article-motion .article-header h1::after { content: ""; display: block; width: clamp(44px, 8vw, 86px); height: 2px; margin: 24px auto 0; background: linear-gradient(90deg, transparent, var(--cyber-cyan), var(--cyber-violet), transparent); transform: scaleX(0); animation: article-line-in .9s .48s var(--ease-silk) forwards; }
@keyframes article-header-in { from { opacity: 0; transform: translateY(17px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes article-line-in { to { transform: scaleX(1); } }

.article-motion .article-author img { box-shadow: 0 0 0 1px var(--surface), 0 0 0 5px rgba(var(--accent-rgb), .09); transition: transform .45s var(--ease-silk), box-shadow .35s; }
.article-motion .article-author:hover img { transform: translateY(-2px) rotate(-3deg) scale(1.06); box-shadow: 0 0 0 1px var(--surface), 0 0 0 7px rgba(var(--accent-rgb), .13), 0 10px 22px rgba(var(--accent-rgb), .15); }
.article-motion .article-cover.has-cover-motion::before { content: ""; position: absolute; z-index: 2; inset: 0; background: radial-gradient(circle at var(--cover-light-x) var(--cover-light-y), rgba(255,255,255,.26), transparent 31%); opacity: .66; mix-blend-mode: soft-light; pointer-events: none; transition: opacity .3s; }
.article-motion .article-cover.has-cover-motion::after { content: ""; position: absolute; z-index: 2; inset: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius-lg) - 9px); clip-path: polygon(0 0, 11% 0, 11% 1px, 89% 1px, 89% 0, 100% 0, 100% 100%, 88% 100%, 88% calc(100% - 1px), 12% calc(100% - 1px), 12% 100%, 0 100%); pointer-events: none; }
.article-motion .article-cover.has-cover-motion img { transform: translate3d(var(--cover-shift-x), calc(var(--cover-shift-y) + var(--cover-scroll)), 0) scale(1.055); transition: transform .5s var(--ease-out), filter .4s; filter: saturate(.92) contrast(.98); }
.article-motion .article-cover.has-cover-motion:hover img { filter: saturate(1.04) contrast(1); }
.article-motion--rich .article-cover__scan { opacity: .7; animation: article-cover-scan 6.8s 1.1s ease-in-out infinite; }
@keyframes article-cover-scan { 0%, 32% { transform: translateX(-74%); opacity: 0; } 42% { opacity: .68; } 62% { transform: translateX(74%); opacity: .3; } 63%, 100% { transform: translateX(74%); opacity: 0; } }

.article-motion-ready .prose-motion-item { opacity: 0; transform: translate3d(0, 19px, 0); filter: blur(4px); transition: opacity .72s var(--ease-silk) var(--prose-delay), transform .82s var(--ease-silk) var(--prose-delay), filter .58s ease var(--prose-delay), color .28s, box-shadow .35s, background .35s; }
.article-motion-ready.article-motion--subtle .prose-motion-item { transform: translate3d(0, 8px, 0); filter: none; transition-duration: .5s; }
.article-motion-ready .prose-motion-item.is-prose-visible { opacity: 1; transform: none; filter: none; }
.article-motion .markdown-body > * { position: relative; }
.article-motion .markdown-body > p.is-reading-focus { color: color-mix(in srgb, var(--ink) 92%, var(--accent)); text-shadow: 0 0 20px rgba(var(--accent-rgb), .055); transform: translateX(3px); }
.article-motion .markdown-body > blockquote.is-reading-focus,
.article-motion .markdown-body > pre.is-reading-focus,
.article-motion .markdown-body > figure.is-reading-focus,
.article-motion .markdown-body > table.is-reading-focus,
.article-motion .markdown-body > details.is-reading-focus { box-shadow: 0 18px 54px rgba(var(--accent-rgb), .11), 0 0 0 1px rgba(var(--accent-rgb), .12); }
.article-motion .markdown-body h2::before,
.article-motion .markdown-body h3::before { content: ""; position: absolute; left: -22px; top: .68em; width: 6px; height: 6px; border: 1px solid rgba(var(--accent-rgb), .58); transform: rotate(45deg) scale(.75); transition: transform .35s var(--ease-out), background .25s, box-shadow .25s; }
.article-motion .markdown-body h3::before { left: -18px; width: 4px; height: 4px; }
.article-motion .markdown-body h2.is-reading-focus::before,
.article-motion .markdown-body h3.is-reading-focus::before,
.article-motion .markdown-body h2:hover::before,
.article-motion .markdown-body h3:hover::before { background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .5); transform: rotate(135deg) scale(1); }
.article-motion .markdown-body h2::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--cyber-violet), transparent); transition: right .75s var(--ease-silk); }
.article-motion .markdown-body h2.is-reading-focus::after,
.article-motion .markdown-body h2:hover::after { right: 24%; }
.article-motion .markdown-body h2.is-target-flash,
.article-motion .markdown-body h3.is-target-flash { animation: article-target-flash 1.05s var(--ease-out); }
@keyframes article-target-flash { 0% { color: var(--ink); } 28% { color: var(--accent); text-shadow: 0 0 20px rgba(var(--accent-rgb), .25); transform: translateX(5px); } 100% { color: var(--ink); text-shadow: none; transform: none; } }

.article-motion .markdown-body a { background-image: linear-gradient(90deg, rgba(var(--accent-rgb), .11), rgba(var(--accent-rgb), .11)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 42%; transition: background-size .34s var(--ease-out), color .2s, text-decoration-color .2s; }
.article-motion .markdown-body a:hover,
.article-motion .markdown-body a:focus-visible { background-size: 100% 42%; }
.article-motion .markdown-body li { transition: transform .25s var(--ease-out), color .2s; }
.article-motion .markdown-body li:hover { transform: translateX(3px); }
.article-motion .markdown-body li:hover::marker { color: var(--cyber-violet); }
.article-motion .markdown-body blockquote { overflow: hidden; transition: transform .4s var(--ease-out), box-shadow .4s; }
.article-motion .markdown-body blockquote::before { transform-origin: bottom; transition: transform .6s var(--ease-silk), box-shadow .35s; }
.article-motion .markdown-body blockquote::after { content: ""; position: absolute; top: -32px; right: -18px; width: 86px; height: 86px; border: 1px solid rgba(var(--accent-rgb), .09); border-radius: 50%; box-shadow: inset 0 0 0 15px rgba(var(--accent-rgb), .025); transition: transform .7s var(--ease-silk), border-color .3s; }
.article-motion .markdown-body blockquote:hover { transform: translateX(4px); box-shadow: 0 15px 42px rgba(var(--accent-rgb), .08); }
.article-motion .markdown-body blockquote:hover::before { box-shadow: 0 0 14px rgba(var(--accent-rgb), .44); transform: scaleY(.82); }
.article-motion .markdown-body blockquote:hover::after { border-color: rgba(var(--accent-rgb), .2); transform: translate(-7px, 8px) rotate(35deg); }
.article-motion .markdown-body hr::after { transition: transform .55s var(--ease-silk), box-shadow .45s; }
.article-motion .markdown-body hr:hover::after { transform: rotate(90deg) scale(1.25); box-shadow: 18px 0 0 rgba(var(--accent-rgb), .45), -18px 0 0 rgba(var(--accent-rgb), .45); }

.article-motion .prose-image-motion { transform: perspective(1000px) rotateX(var(--image-rx, 0deg)) rotateY(var(--image-ry, 0deg)); transform-origin: center; transition: transform .48s var(--ease-out), box-shadow .45s, filter .4s; will-change: transform; }
.article-motion .prose-image-motion:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--image-rx, 0deg)) rotateY(var(--image-ry, 0deg)) scale(1.008); box-shadow: 0 25px 70px rgba(var(--accent-rgb), .14), 0 0 0 1px rgba(var(--accent-rgb), .14); filter: saturate(1.03); }
.article-motion .markdown-body figure figcaption { transition: color .25s, letter-spacing .35s var(--ease-out); }
.article-motion .markdown-body figure:hover figcaption { color: var(--accent); letter-spacing: .02em; }

.article-motion .markdown-body pre.code-motion { isolation: isolate; padding-top: 50px; transition: transform .38s var(--ease-out), box-shadow .4s, border-color .3s; }
.article-motion .markdown-body pre.code-motion:hover { transform: translateY(-2px); border-color: rgba(116,222,219,.22); box-shadow: 0 24px 66px rgba(13,32,29,.21), 0 0 0 1px rgba(116,222,219,.06); }
.article-motion .markdown-body pre.code-motion::before { content: attr(data-language); position: absolute; z-index: 2; top: 17px; right: 69px; color: rgba(204,229,220,.5); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .15em; }
.article-motion .markdown-body pre.code-motion::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(111,226,218,.05), transparent 62%); transform: translateX(-80%); pointer-events: none; }
.article-motion--rich .markdown-body pre.code-motion:hover::after { animation: article-code-scan 1.25s var(--ease-out); }
@keyframes article-code-scan { to { transform: translateX(80%); } }
.code-chrome { position: absolute; z-index: 2; top: 18px; left: 19px; display: flex; gap: 6px; pointer-events: none; }
.code-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #68cfc4; box-shadow: 0 0 8px rgba(104,207,196,.35); }
.code-chrome i:nth-child(2) { background: #9e8edc; box-shadow: 0 0 8px rgba(158,142,220,.35); }
.code-chrome i:nth-child(3) { background: #db8fac; box-shadow: 0 0 8px rgba(219,143,172,.35); }
.article-motion .code-copy { overflow: hidden; transition: transform .25s var(--ease-out), background .2s, color .2s, border-color .2s; }
.article-motion .code-copy:hover { transform: translateY(-1px); border-color: rgba(122,231,222,.3); }
.article-motion .code-copy.is-copied { color: #9bf1c9; background: rgba(75,192,137,.16); }
.article-motion .markdown-body pre.is-copied { animation: article-code-copied .7s var(--ease-out); }
@keyframes article-code-copied { 35% { box-shadow: 0 0 0 2px rgba(83,211,154,.25), 0 24px 66px rgba(13,32,29,.2); } }

.article-motion .markdown-body table { transition: box-shadow .35s, border-color .3s; }
.article-motion .markdown-body table:hover { border-color: rgba(var(--accent-rgb), .23); box-shadow: 0 16px 44px rgba(var(--accent-rgb), .07); }
.article-motion .markdown-body tr { transition: transform .28s var(--ease-out); }
.article-motion .markdown-body tbody tr:hover { transform: translateX(3px); }
.article-motion .markdown-body details { overflow: clip; transition: border-color .3s, box-shadow .35s, transform .35s var(--ease-out); }
.article-motion .markdown-body details:hover { border-color: rgba(var(--accent-rgb), .3); transform: translateY(-1px); box-shadow: 0 12px 34px rgba(var(--accent-rgb), .07); }
.article-motion .markdown-body summary { transition: color .25s, letter-spacing .3s; }
.article-motion .markdown-body summary:hover { color: var(--accent); letter-spacing: .01em; }
.article-motion .markdown-body details[open] > :not(summary) { animation: article-detail-open .48s var(--ease-silk) both; }
@keyframes article-detail-open { from { opacity: 0; transform: translateY(-8px); } }

.article-motion .toc-panel a { overflow: hidden; transition: color .25s, transform .3s var(--ease-out); }
.article-motion .toc-panel a:hover { transform: translateX(3px); }
.article-motion .toc-panel a::after { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(to bottom, transparent, var(--accent), transparent); opacity: 0; transform: scaleY(.3); transition: opacity .25s, transform .35s var(--ease-out); }
.article-motion .toc-panel a.is-active::after { opacity: 1; transform: scaleY(1); }
.article-motion .toc-panel a.is-active::before { animation: article-toc-pulse 1.9s ease-in-out infinite; }
@keyframes article-toc-pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .04), 0 0 12px rgba(var(--accent-rgb), .45); } }
.article-motion .toc-panel__signal i { animation: article-signal 2.4s ease-in-out infinite; }
@keyframes article-signal { 50% { opacity: .45; transform: scale(.75); } }

.article-motion-ready .article-extra-motion { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease-silk), transform .8s var(--ease-silk); }
.article-motion-ready .article-extra-motion.is-extra-visible { opacity: 1; transform: none; }
.article-motion .tag-row a { position: relative; overflow: hidden; transition: color .25s, border-color .25s, transform .3s var(--ease-out), box-shadow .3s; }
.article-motion .tag-row a:hover { transform: translateY(-3px); box-shadow: 0 9px 24px rgba(var(--accent-rgb), .1); }
.article-motion .article-end i { position: relative; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .22); animation: article-end-pulse 2.8s ease-out infinite; }
.article-motion .article-end span { transform: scaleX(0); animation: article-end-line .9s var(--ease-silk) forwards; }
.article-motion .article-end span:first-child { transform-origin: right; }
.article-motion .article-end span:last-child { transform-origin: left; }
@keyframes article-end-line { to { transform: scaleX(1); } }
@keyframes article-end-pulse { 55%, 100% { box-shadow: 0 0 0 11px transparent; } }
.article-motion .comments { position: relative; }
.article-motion .comments::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--cyber-violet), transparent); transition: width 1s .2s var(--ease-silk); }
.article-motion .comments.is-extra-visible::before { width: 100%; }

.article-motion--subtle .article-cover__scan,
.article-motion--subtle .toc-panel a.is-active::before,
.article-motion--subtle .toc-panel__signal i,
.article-motion--subtle .article-end i { animation: none; }
.performance-lite .article-cover__scan,
.performance-lite .article-cover__hud,
.performance-lite .article-rail,
.article-motion-off .article-cover__scan,
.article-motion-off .article-rail { display: none !important; }

@media (max-width: 760px) {
  .article-header__signal { margin-bottom: 16px; }
  .article-motion .article-header h1::after { margin-left: 0; }
  .article-cover__hud { right: 12px; bottom: 12px; min-width: 136px; }
  .article-rail { display: none; }
  .article-motion .markdown-body h2::before, .article-motion .markdown-body h3::before { display: none; }
  .article-motion .markdown-body > p.is-reading-focus { transform: none; }
  .article-motion .markdown-body pre.code-motion { padding-top: 47px; }
}
@media (pointer: coarse), (hover: none) {
  .article-motion .prose-image-motion:hover,
  .article-motion .article-author:hover img,
  .article-motion .markdown-body blockquote:hover,
  .article-motion .markdown-body pre.code-motion:hover { transform: none; }
  .article-motion .markdown-body li:hover, .article-motion .markdown-body tbody tr:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .article-header__signal i, .toc-panel__signal i, .article-cover__scan, .article-end i,
  .article-motion .toc-panel a.is-active::before { animation: none !important; }
  .article-motion-ready .prose-motion-item, .article-motion-ready .article-extra-motion,
  .article-motion .article-cover.has-cover-motion img { opacity: 1 !important; transform: none !important; filter: none !important; }
  .article-rail { display: none; }
}

/* Luma 1.6 · Oldming field store, dark portrait and extension pages */
:root {
  --halo-search-widget-base-font-size: 14px;
  --halo-search-widget-base-font-family: var(--font-body);
  --halo-search-widget-base-rounded: 14px;
  --halo-search-widget-base-bg-color: var(--bg);
  --halo-search-widget-primary-color: var(--accent);
  --halo-search-widget-muted-color: var(--ink-soft);
  --halo-search-widget-content-color: var(--ink);
  --halo-search-widget-modal-bg-color: color-mix(in srgb, var(--surface) 96%, transparent);
  --halo-search-widget-modal-layer-color: rgba(7, 17, 23, .42);
  --halo-search-widget-hit-bg-color: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  --halo-search-widget-divider-color: var(--line);
  --halo-search-widget-kbd-border-color: var(--line-strong);
  --halo-search-widget-kbd-shadow: 0 2px 0 rgba(var(--accent-rgb), .08);
}

.search-button { width: auto; min-width: 44px; gap: 8px; padding-inline: 12px; border: 1px solid transparent; border-radius: 999px; color: var(--ink-soft); }
.search-button kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; font-weight: 500; letter-spacing: .06em; box-shadow: none; }
.search-button:hover { border-color: rgba(var(--accent-rgb), .2); color: var(--accent); }
.search-button.is-waiting { animation: search-waiting 1s ease-in-out infinite; }
@keyframes search-waiting { 50% { color: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .06); } }
.mobile-menu__search { display: grid; width: 100%; min-height: 52px; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; margin-top: 18px; padding: 0 14px; border: 1px solid rgba(var(--accent-rgb), .19); border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .045); color: var(--ink-soft); text-align: left; cursor: pointer; }
.mobile-menu__search svg { width: 18px; color: var(--accent); }
.mobile-menu__search kbd { color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; }

.hero--cyber .hero__name { display: block; margin-bottom: 7px; }
.hero__signature { display: block; margin-bottom: 17px; color: rgba(var(--accent-rgb), .68); font-family: var(--cyber-mono); font-size: clamp(8px, .72vw, 10px); font-weight: 500; letter-spacing: .28em; }
.avatar-system { --avatar-scroll-y: 0px; --avatar-scroll-tilt: 0deg; --avatar-scroll-fade: 1; }
.avatar-system [data-avatar-layer] { --scroll-shift: 0px; }
.avatar-system .hero__portrait {
  transform: translate3d(var(--layer-x), calc(var(--layer-y) + var(--scroll-shift) + var(--avatar-scroll-y)), 0) rotateZ(var(--avatar-scroll-tilt));
  opacity: var(--avatar-scroll-fade);
  contain: layout paint;
}
.hero__portrait-picture { display: block; width: 100%; height: 100%; opacity: 1; transition: opacity .65s var(--ease-silk), filter .65s ease; }
.avatar-system.is-image-loading .hero__portrait-picture { opacity: 0; filter: blur(10px); }
.avatar-system .hero__portrait::before { content: ""; position: absolute; inset: 16% 15% 13% 20%; z-index: -1; border-radius: 44% 44% 18% 18%; background: linear-gradient(105deg, rgba(var(--accent-rgb), .035) 36%, rgba(255,255,255,.48) 48%, rgba(var(--accent-rgb), .035) 62%); background-size: 220% 100%; opacity: 0; transition: opacity .4s ease; }
.avatar-system.is-image-loading .hero__portrait::before { opacity: 1; animation: portrait-loading 1.3s ease-in-out infinite; }
@keyframes portrait-loading { from { background-position: 150% 0; } to { background-position: -75% 0; } }
.avatar-system.is-image-error .hero__portrait-picture { opacity: .16; filter: grayscale(1); }
.avatar-system .hero__portrait img { transform: translateZ(0); }
:root[data-theme="dark"] .avatar-system::before { background: radial-gradient(circle, rgba(30,57,71,.6) 0 27%, rgba(69,215,231,.11) 50%, rgba(139,111,219,.09) 66%, transparent 73%); }
:root[data-theme="dark"] .avatar-system .hero__portrait img { opacity: .98; filter: saturate(.96) contrast(1.03); mix-blend-mode: normal; }
:root[data-theme="dark"] .hero--cyber::before { background: linear-gradient(90deg, #071017 0%, rgba(7,16,23,.97) 30%, rgba(7,16,23,.28) 66%, rgba(7,16,23,.06) 100%); }
:root[data-theme="dark"] .avatar-system::after { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 68%, transparent) 62%, var(--bg)); }
.avatar-echo { clip-path: none; background: none; }
.avatar-echo i { position: absolute; right: 5%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--cyber-cyan), var(--cyber-violet), transparent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .34); }
.avatar-echo i:nth-child(1) { top: 30%; width: 55%; }
.avatar-echo i:nth-child(2) { top: 48%; width: 36%; animation: echo-bar 3.8s .3s steps(2,end) infinite; }
.avatar-echo i:nth-child(3) { top: 67%; width: 62%; animation: echo-bar 4.4s .9s steps(2,end) infinite reverse; }
@keyframes echo-bar { 45%, 55% { translate: -17px 0; opacity: .25; } }

.home-moments { padding-top: clamp(82px, 10vw, 138px); overflow: hidden; }
.home-moment-loop { position: relative; overflow: hidden; padding-block: 7px 26px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.home-moment-loop::before { content: "SIGNAL BUFFER"; display: block; margin: 0 0 13px 4%; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .18em; }
.home-moment-track { display: flex; width: max-content; will-change: transform; animation: moment-loop var(--moment-duration, 34s) linear infinite; }
.home-moment-loop:hover .home-moment-track, .home-moment-loop:focus-within .home-moment-track { animation-play-state: paused; }
.home-moment-set { display: flex; gap: 14px; padding-right: 14px; }
.home-moment-card { position: relative; display: flex; width: min(380px, 78vw); min-height: 188px; flex: 0 0 auto; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 21px 22px 18px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 5px 22px 5px 5px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 14px 42px rgba(43,104,120,.055); content-visibility: auto; contain-intrinsic-size: 380px 188px; transition: transform .35s var(--ease-out), border-color .25s, box-shadow .35s; }
.home-moment-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(var(--accent-rgb),.04), transparent 68%); translate: -70% 0; transition: translate .65s var(--ease-silk); }
.home-moment-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .34); box-shadow: 0 21px 55px rgba(43,104,120,.1); }
.home-moment-card:hover::before { translate: 70% 0; }
.home-moment-card header, .home-moment-card footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .11em; }
.home-moment-card header span { display: inline-flex; align-items: center; gap: 7px; }
.home-moment-card header i { width: 5px; height: 5px; border-radius: 50%; background: #55c99a; box-shadow: 0 0 9px rgba(85,201,154,.6); }
.home-moment-card__content { display: -webkit-box; margin-block: 16px; overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.72; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-moment-card__content > * { margin: 0; }
.home-moment-card footer { padding-top: 13px; border-top: 1px solid var(--line); }
.home-moment-card footer > span { color: var(--accent); }
.home-moment-card footer a { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; }
.home-moment-card footer svg { width: 15px; }
@keyframes moment-loop { to { transform: translate3d(-50%, 0, 0); } }

.about-dossier { margin: 0 0 clamp(38px, 6vw, 64px); }
.about-dossier__lead { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.about-dossier__lead > span { color: var(--accent); font-family: var(--cyber-mono); font-size: 8px; letter-spacing: .16em; }
.about-dossier__lead h2 { max-width: 680px; margin: 13px 0 12px; font-family: var(--font-ui); font-size: clamp(25px, 3vw, 39px); line-height: 1.26; letter-spacing: -.045em; }
.about-dossier__lead p { max-width: 670px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.about-dossier__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; border: 1px solid var(--line); background: var(--line); }
.about-dossier__grid > div { position: relative; min-height: 130px; padding: 21px; overflow: hidden; background: var(--surface); transition: background .25s ease; }
.about-dossier__grid > div::after { content: ""; position: absolute; right: -17px; bottom: -17px; width: 52px; height: 52px; border: 1px solid rgba(var(--accent-rgb), .13); transform: rotate(45deg); transition: transform .45s var(--ease-out), border-color .25s; }
.about-dossier__grid > div:hover { background: color-mix(in srgb, var(--surface) 94%, rgba(var(--accent-rgb), .1)); }
.about-dossier__grid > div:hover::after { border-color: rgba(var(--accent-rgb), .35); transform: rotate(135deg); }
.about-dossier__grid dt { color: var(--ink-faint); font-size: 11px; }
.about-dossier__grid dd { margin: 8px 0 16px; color: var(--ink); font-size: 18px; font-weight: 650; }
.about-dossier__grid small { color: rgba(var(--accent-rgb), .68); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .13em; }
.about-profile__visual--brand { gap: 34px; }
.about-profile__visual--brand > b { color: var(--accent); font-family: var(--cyber-mono); font-size: 10px; font-weight: 500; letter-spacing: .3em; }

.links-hero, .moments-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(30px, 7vw, 100px); }
.links-console, .moments-console { position: relative; min-width: 210px; padding: 18px 20px; border: 1px solid rgba(var(--accent-rgb), .19); border-radius: 5px 21px 5px 5px; background: rgba(var(--accent-rgb), .04); box-shadow: 0 17px 52px rgba(40,100,118,.055); font-family: var(--cyber-mono); }
.links-console > span, .moments-console > span { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 7px; letter-spacing: .13em; }
.links-console i, .moments-console i { width: 5px; height: 5px; border-radius: 50%; background: #55c99a; box-shadow: 0 0 9px rgba(85,201,154,.55); }
.links-console strong { display: block; margin-top: 7px; color: var(--accent); font-size: 34px; font-weight: 500; line-height: 1; }
.links-console small, .moments-console small { color: var(--ink-faint); font-size: 7px; letter-spacing: .1em; }
.links-console b { position: absolute; right: 15px; bottom: 17px; color: rgba(var(--accent-rgb),.58); font-size: 7px; font-weight: 500; letter-spacing: .08em; }
.moments-console b { display: block; margin: 9px 0 4px; color: var(--accent); font-size: 22px; font-weight: 500; letter-spacing: .16em; }
.link-filters { margin-bottom: 18px; }
.link-network-map { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .14em; }
.link-network-map i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.32), transparent); }
.link-network-map b { color: rgba(var(--accent-rgb), .72); font-weight: 500; }
.link-exchange { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 72px; padding: clamp(28px,5vw,52px); border: 1px solid rgba(var(--accent-rgb), .16); border-radius: var(--radius-lg); background: radial-gradient(circle at 84% 30%, rgba(var(--accent-rgb),.11), transparent 26%), color-mix(in srgb, var(--surface) 96%, transparent); }
.link-exchange > div { max-width: 690px; }
.link-exchange h2 { margin: 0 0 12px; font-size: clamp(24px,3vw,38px); letter-spacing: -.04em; }
.link-exchange p:last-child { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }

.moment-stream__tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; }
.moment-stream__tools a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--accent); font-family: var(--cyber-mono); font-size: 8px; letter-spacing: .1em; }
.moment-stream__tools svg { width: 15px; }
.moment-card { position: relative; overflow: hidden; }
.moment-card__index { position: absolute; right: 23px; bottom: -13px; color: rgba(var(--accent-rgb), .045); font-family: var(--cyber-mono); font-size: 72px; line-height: 1; pointer-events: none; }
.moment-detail { padding-top: calc(var(--header-height) + clamp(65px,9vw,116px)); padding-bottom: 110px; }
.moment-detail__header { position: relative; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.moment-detail__back { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; margin-bottom: 32px; color: var(--ink-soft); font-size: 12px; }
.moment-detail__back svg { width: 16px; transform: rotate(180deg); }
.moment-detail__identity { display: flex; align-items: center; gap: 14px; }
.moment-detail__identity > img, .moment-detail__identity > span { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--line); border-radius: 15px 5px 15px 15px; background: var(--surface-soft); object-fit: cover; }
.moment-detail__identity > span i { width: 15px; height: 15px; border: 1px solid var(--accent); transform: rotate(45deg); }
.moment-detail__identity b, .moment-detail__identity time { display: block; }
.moment-detail__identity b { font-size: 15px; }
.moment-detail__identity time { margin-top: 3px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 8px; letter-spacing: .08em; }
.moment-detail__signal { position: absolute; right: 0; bottom: 28px; display: flex; align-items: center; gap: 8px; color: rgba(var(--accent-rgb), .65); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .13em; }
.moment-detail__signal i { width: 5px; height: 5px; border-radius: 50%; background: #55c99a; box-shadow: 0 0 9px rgba(85,201,154,.55); }
.moment-detail__card { position: relative; margin-top: 28px; padding: clamp(25px,5vw,52px); border: 1px solid rgba(var(--accent-rgb), .16); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 22px 70px rgba(42,101,119,.06); }
.moment-detail__card .moment-content { margin-top: 0; font-size: 16px; }
.moment-detail__media { margin-top: 30px; }
.moment-detail__footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; }
.moment-detail__footer .moment-tags { margin: 0; }
.moment-detail__footer b { color: var(--accent); font-family: var(--cyber-mono); }

/* Content below the first viewport is deferred by the browser until needed. */
.latest-section, .manifesto, .extension-shell, .about-layout, .moment-detail__card { content-visibility: auto; contain-intrinsic-size: 1px 760px; }
.performance-lite .home-moment-track { animation: none; transform: none !important; }
.performance-lite .home-moment-loop { overflow-x: auto; mask-image: none; }

@media (max-width: 1040px) {
  .search-button kbd { display: none; }
  .links-hero, .moments-hero { grid-template-columns: 1fr; }
  .links-console, .moments-console { max-width: 260px; }
}
@media (max-width: 760px) {
  .hero--cyber .hero__name { margin-bottom: 5px; }
  .hero__signature { margin-bottom: 13px; letter-spacing: .19em; }
  .home-moments { padding-top: 74px; }
  .home-moment-loop { margin-inline: -24px; mask-image: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .home-moment-loop::-webkit-scrollbar { display: none; }
  .home-moment-loop::before { margin-left: 24px; }
  .home-moment-track { padding-left: 24px; animation: none; transform: none !important; }
  .home-moment-card { scroll-snap-align: start; }
  .about-dossier__grid { grid-template-columns: 1fr; }
  .link-exchange { display: block; }
  .link-exchange .button { margin-top: 24px; }
  .moment-detail__signal { position: static; margin-top: 20px; }
  .moment-detail__card { padding: 23px 18px; }
  .hero--cyber .avatar-system { position: absolute; top: 600px; right: -12vw; bottom: auto; opacity: .58; }
  :root[data-theme="dark"] .hero--cyber .avatar-system { opacity: .72; }
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1000px) {
  .hero--cyber { min-height: 560px; }
  .hero--cyber .hero__content { display: block; min-height: 560px; padding-top: 54px; }
  .hero--cyber .hero__copy { width: 52%; padding: 34px 0 24px; }
  .hero--cyber .hero__eyebrow { margin-bottom: 9px; font-size: 8px; }
  .hero--cyber .hero__name { margin-bottom: 4px; font-size: clamp(54px, 9vw, 72px); }
  .hero__signature { margin-bottom: 8px; }
  .hero--cyber .hero__headline { font-size: clamp(22px, 3vw, 29px); }
  .hero--cyber .hero__subtitle { margin-top: 10px; font-size: 12px; line-height: 1.55; }
  .hero--cyber .hero__actions { margin-top: 15px; }
  .hero--cyber .button { min-height: 43px; padding: 9px 16px; }
  .hero--cyber .avatar-system { position: absolute; top: 22px; right: -4vw; bottom: auto; width: 56vw; height: 520px; opacity: .86; }
  .hero__quick-links, .hero__protocol, .hero--cyber .hero__stat, .cyber-index, .scroll-cue { display: none; }
}
@media (pointer: coarse), (hover: none) {
  .home-moment-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-system .hero__portrait, .avatar-echo i, .avatar-system .hero__portrait::before,
  .home-moment-track, .search-button.is-waiting { animation: none !important; transform: none !important; }
  .home-moment-loop { overflow-x: auto; mask-image: none; }
}

/* Luma 1.7 · theme morphing, fused hero and content cockpit */
:root {
  --transition-bg: #eaf5f6;
  --transition-surface: rgba(255,255,255,.72);
  --transition-ink: #14323a;
  --transition-muted: rgba(20,50,58,.5);
  --transition-line: rgba(25,139,153,.28);
  --transition-grid: rgba(25,139,153,.075);
  --transition-glow: rgba(48,195,208,.14);
  --transition-accent: #188a99;
}
:root[data-theme="dark"] {
  --transition-bg: #061017;
  --transition-surface: rgba(12,29,39,.78);
  --transition-ink: #dff8fb;
  --transition-muted: rgba(214,242,245,.55);
  --transition-line: rgba(92,211,223,.32);
  --transition-grid: rgba(92,211,223,.07);
  --transition-glow: rgba(59,210,225,.15);
  --transition-accent: #65d8e2;
}

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
.theme-transition { position: fixed; inset: 0; z-index: 8990; visibility: hidden; pointer-events: none; background: var(--theme-layer-color, var(--bg)); clip-path: circle(0 at var(--theme-x, calc(100% - 44px)) var(--theme-y, 38px)); }
.theme-transition.is-active { visibility: visible; animation: theme-circle-reveal .48s var(--ease-silk) both; }
@keyframes theme-circle-reveal { to { clip-path: circle(var(--theme-radius, 150vmax) at var(--theme-x, calc(100% - 44px)) var(--theme-y, 38px)); } }

#theme-toggle { position: relative; isolation: isolate; overflow: visible; }
#theme-toggle::before { content: ""; position: absolute; inset: 5px; z-index: -1; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 50%; background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); transition: border-color .3s ease, background-color .3s ease, box-shadow .35s ease, transform .55s var(--ease-silk); }
#theme-toggle:hover::before { border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .06), 0 0 22px rgba(var(--accent-rgb), .12); transform: rotate(24deg) scale(1.04); }
.theme-toggle__orbit { position: absolute; inset: 2px; border: 1px dashed rgba(var(--accent-rgb), .24); border-radius: 50%; opacity: 0; transform: rotate(-38deg) scale(.68); transition: opacity .25s ease, transform .55s var(--ease-silk); pointer-events: none; }
.theme-toggle__orbit i { position: absolute; left: 50%; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .72); }
.theme-toggle__orbit i:last-child { left: auto; right: -1px; top: 67%; opacity: .55; }
#theme-toggle:hover .theme-toggle__orbit, .theme-is-changing #theme-toggle .theme-toggle__orbit { opacity: 1; transform: rotate(142deg) scale(1); }
.theme-is-changing #theme-toggle::before { transform: rotate(180deg) scale(.82); box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .08); }
.theme-switch-svg { width: 19px; height: 19px; overflow: visible; }
.theme-switch-svg__sun, .theme-switch-svg__moon { transform-box: fill-box; transform-origin: center; transition: opacity .24s ease, transform .48s var(--ease-silk); }
:root[data-theme="light"] .theme-switch-svg__sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .theme-switch-svg__moon { opacity: 0; transform: rotate(-55deg) scale(.35); }
:root[data-theme="dark"] .theme-switch-svg__sun { opacity: 0; transform: rotate(55deg) scale(.35); }
:root[data-theme="dark"] .theme-switch-svg__moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-is-changing #theme-toggle .theme-switch-svg { animation: theme-icon-orbit .48s var(--ease-silk); }
@keyframes theme-icon-orbit { 45% { opacity: .15; transform: rotate(150deg) scale(.35); } 100% { transform: rotate(360deg) scale(1); } }

.hero--cyber .hero__content { position: relative; isolation: isolate; }
.hero--cyber .hero__copy { position: relative; z-index: 12; }
.hero--cyber .hero__copy::after { content: ""; position: absolute; z-index: -1; left: 38%; top: 25%; width: clamp(260px, 34vw, 520px); height: 58%; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--accent-rgb), .11), rgba(168,137,239,.045) 46%, transparent 72%); filter: blur(34px); pointer-events: none; }
.hero--cyber .hero__headline { position: relative; z-index: 2; text-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 70%, transparent); }
.hero--cyber .avatar-system { margin-left: clamp(-112px, -8vw, -62px); }
.hero__signal-bridge { position: absolute; z-index: 9; left: 34%; right: 10%; top: 48%; display: flex; align-items: center; gap: 10px; color: rgba(var(--accent-rgb), .58); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .15em; pointer-events: none; transform: rotate(-2deg); }
.hero__signal-bridge span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .38) 24%, rgba(168,137,239,.35) 72%, transparent); }
.hero__signal-bridge i { width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); box-shadow: 0 0 12px rgba(var(--accent-rgb), .48); animation: bridge-pulse 2.6s ease-in-out infinite; }
.hero__signal-bridge b { font-weight: 500; white-space: nowrap; }
@keyframes bridge-pulse { 50% { transform: rotate(225deg) scale(.72); opacity: .45; } }

.avatar-system { --avatar-scroll-x: 0px; --avatar-scroll-scale: 1; --avatar-scroll-progress: 0; }
.avatar-system .hero__portrait { transform: translate3d(calc(var(--layer-x) + var(--avatar-scroll-x)), calc(var(--layer-y) + var(--scroll-shift) + var(--avatar-scroll-y)), 0) rotateZ(var(--avatar-scroll-tilt)) scale(var(--avatar-scroll-scale)); transform-origin: 58% 68%; }
.avatar-system::after { left: 2%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 65%, transparent) 58%, var(--bg)), linear-gradient(90deg, var(--bg), transparent 20%); }
.avatar-system.is-scroll-moving .portrait-orbit--outer { animation-duration: 8s; border-color: rgba(var(--accent-rgb), .38); }
.avatar-system.is-scroll-moving .portrait-orbit--middle { animation-duration: 6s; }
.avatar-system.is-scroll-active .avatar-echo i { opacity: calc(.25 + var(--avatar-scroll-progress) * .5); }
.avatar-system.is-scroll-active .hologram-card { translate: calc(var(--avatar-scroll-progress) * -16px) calc(var(--avatar-scroll-progress) * -20px); }
.avatar-system.is-scroll-active .avatar-chip--one { translate: calc(var(--avatar-scroll-progress) * -18px) calc(var(--avatar-scroll-progress) * 22px); }
.avatar-system.is-scroll-active .avatar-chip--two { translate: calc(var(--avatar-scroll-progress) * 12px) calc(var(--avatar-scroll-progress) * -18px); }

.home-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 286px); align-items: start; gap: clamp(22px, 2.7vw, 34px); padding-block: clamp(78px, 8vw, 104px) 104px; }
.home-content-layout--single { grid-template-columns: 1fr; }
.home-content-layout .latest-section { min-width: 0; padding-block: 0; }
.home-content-layout .post-grid { grid-template-columns: 1fr; }
.home-content-layout .post-card:has(.post-card__media) { display: grid; grid-template-columns: minmax(210px, .82fr) minmax(0, 1.18fr); min-height: 260px; }
.home-content-layout .post-card__media { min-height: 100%; }
.home-content-layout .post-card__media img { height: 100%; }
.home-content-layout .post-card h2 { font-size: clamp(22px, 1.9vw, 31px); }
.home-content-layout .post-card:not(:has(.post-card__media)) .post-card__content { min-height: 0; padding: 32px 36px 30px; }
.home-content-layout .post-card:not(:has(.post-card__media)) .post-card__content > p { margin-block: 14px 20px; -webkit-line-clamp: 2; }
.home-content-layout .post-grid { gap: 18px; }
.home-content-layout .section-heading { position: relative; align-items: center; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.home-content-layout .section-heading::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.home-content-layout .section-heading h2 { font-size: clamp(34px, 3.4vw, 46px); }
.home-aside { position: sticky; top: calc(var(--header-height) + 22px); display: grid; gap: 14px; }
.home-aside-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid rgba(var(--accent-rgb), .14); border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 14px 42px rgba(44,102,118,.045); }
.home-aside-card::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 2px; background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-violet), transparent); transition: width .35s var(--ease-out); }
.home-aside-card:hover::before { width: 38%; }
.home-aside-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.home-aside-card > header span { font-size: 13px; font-weight: 650; }
.home-aside-card > header small { color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .1em; }
.home-author-card { background: radial-gradient(circle at 92% 4%, rgba(var(--accent-rgb),.13), transparent 35%), color-mix(in srgb, var(--surface) 96%, transparent); }
.home-author-card__top { display: flex; align-items: center; gap: 14px; }
.home-author-card__avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 18px 6px 18px 18px; background: var(--surface-soft); }
.home-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-author-card__avatar .brand-mark { transform: scale(1.2); }
.home-author-card__top small, .home-author-card__top strong { display: block; }
.home-author-card__top small { margin-bottom: 3px; color: rgba(var(--accent-rgb),.72); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .12em; }
.home-author-card__top strong { font-size: 19px; }
.home-author-card > p { margin: 17px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.home-author-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-block: 14px; border-block: 1px solid var(--line); }
.home-author-card dl div { text-align: center; }
.home-author-card dl div + div { border-left: 1px solid var(--line); }
.home-author-card dt { color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 6px; letter-spacing: .1em; }
.home-author-card dd { margin: 3px 0 0; color: var(--accent); font-family: var(--cyber-mono); font-size: 16px; }
.home-author-card dd.is-online { color: #3ea97d; font-size: 10px; letter-spacing: .1em; }
.home-aside-card__link { display: flex; min-height: 44px; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--ink-soft); font-size: 11px; }
.home-aside-card__link svg { width: 15px; transition: transform .25s var(--ease-out); }
.home-aside-card__link:hover { color: var(--accent); }
.home-aside-card__link:hover svg { transform: translateX(4px); }
.home-aside-categories { display: grid; gap: 2px; }
.home-aside-categories a { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 6px 9px; border-radius: 9px; color: var(--ink-soft); font-size: 12px; transition: color .2s, background-color .2s, padding .25s var(--ease-out); }
.home-aside-categories a:hover { padding-left: 13px; background: rgba(var(--accent-rgb),.07); color: var(--accent); }
.home-aside-categories b { color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 8px; font-weight: 500; }
.home-aside-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.home-aside-tags a { display: inline-flex; min-height: 44px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); font-size: 10px; transition: border-color .2s, color .2s, transform .25s var(--ease-out); }
.home-aside-tags a:hover { border-color: rgba(var(--accent-rgb),.36); color: var(--accent); transform: translateY(-2px); }
.home-discovery-card { padding-bottom: 10px; }
.home-discovery-card__section { padding-block: 14px 16px; border-top: 1px solid var(--line); }
.home-discovery-card__section > p { margin: 0 0 9px; color: var(--ink-faint); font-family: var(--cyber-mono); font-size: 7px; letter-spacing: .12em; }
.home-aside-routes { padding-top: 7px; border-top: 1px solid var(--line); }
.home-aside-routes > a { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 8px; color: var(--ink-soft); font-size: 12px; }
.home-aside-routes > a + a { border-top: 1px solid var(--line); }
.home-aside-routes > a span:first-child { display: flex; align-items: center; gap: 10px; }
.home-aside-routes small { color: rgba(var(--accent-rgb),.64); font-family: var(--cyber-mono); font-size: 7px; }
.home-aside-routes svg { width: 14px; }
.home-aside-routes a:hover { color: var(--accent); }
.has-js .avatar-system:not(.is-image-ready) .hero__portrait-picture { opacity: 0; }
.avatar-system.is-theme-swapping.is-image-ready .hero__portrait-picture { animation: portrait-theme-swap .42s var(--ease-silk); }
@keyframes portrait-theme-swap { 0% { opacity: .18; filter: blur(9px) saturate(.72); transform: scale(.985); } 100% { opacity: 1; filter: none; transform: none; } }
.hero--cyber.is-motion-paused .hero__glow, .hero--cyber.is-motion-paused .cyber-scan::before,
.hero--cyber.is-motion-paused .avatar-system::before, .hero--cyber.is-motion-paused .avatar-beam,
.hero--cyber.is-motion-paused .portrait-orbit, .hero--cyber.is-motion-paused .avatar-chip,
.hero--cyber.is-motion-paused .hologram-card, .hero--cyber.is-motion-paused .hero__protocol i,
.hero--cyber.is-motion-paused .hero__signal-bridge i { animation-play-state: paused !important; }

@media (max-width: 1000px) {
  .home-content-layout { grid-template-columns: 1fr; }
  .home-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero--cyber { min-height: 860px; }
  .hero--cyber .hero__content { min-height: 860px; padding-top: calc(var(--header-height) + 18px); }
  .hero--cyber .hero__copy { z-index: 14; width: 100%; padding-top: 24px; padding-bottom: 240px; }
  .hero--cyber .hero__copy::after { left: 10%; top: 38%; width: 100%; height: 52%; filter: blur(26px); }
  .hero--cyber .hero__name { font-size: clamp(62px, 20vw, 84px); }
  .hero--cyber .hero__headline { max-width: 94%; font-size: clamp(28px, 8vw, 38px); }
  .hero--cyber .hero__subtitle { max-width: 88%; text-shadow: 0 1px 8px var(--bg); }
  .hero--cyber .avatar-system { position: absolute; z-index: 7; top: 260px; right: -23vw; bottom: auto; width: 126vw; height: 650px; margin: 0; opacity: .48; }
  :root[data-theme="dark"] .hero--cyber .avatar-system { opacity: .58; }
  .avatar-system .hero__portrait { inset: 0 -3% -4% 4%; }
  .avatar-system .hero__portrait img { object-position: var(--portrait-position, center 45%); -webkit-mask-image: radial-gradient(ellipse 74% 74% at 61% 47%, #000 48%, rgba(0,0,0,.72) 68%, transparent 96%), linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 98%); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 74% 74% at 61% 47%, #000 48%, rgba(0,0,0,.72) 68%, transparent 96%), linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 98%); mask-composite: intersect; }
  .avatar-system::before { right: -2%; top: 13%; width: 76%; opacity: .65; }
  .avatar-system::after { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 76%, transparent) 47%, var(--bg)); }
  .hero__signal-bridge { left: 18%; right: -9%; top: 54%; opacity: .7; transform: rotate(-8deg); }
  .hero__signal-bridge b { display: none; }
  .avatar-chip--two, .avatar-chip--one, .avatar-hud, .avatar-system .portrait-coordinate, .portrait-note, .cyber-index { display: none; }
  .hero--cyber .hero__actions { max-width: 92%; }
  .home-content-layout { padding-block: 78px 88px; }
  .home-content-layout .post-card:has(.post-card__media) { display: block; min-height: 0; }
  .home-content-layout .post-card__media { min-height: 230px; }
  .home-aside { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .hero--cyber .hero__copy { padding-bottom: 220px; }
  .hero--cyber .hero__actions { flex-direction: row; align-items: center; gap: 13px; }
  .hero--cyber .hero__actions .button { width: auto; min-width: 164px; min-height: 50px; flex: 0 0 auto; padding: 11px 20px; }
  .hero--cyber .hero__stat { padding-left: 14px; border-left: 1px solid var(--line-strong); }
  .hero--cyber .avatar-system { top: 292px; right: -31vw; width: 138vw; height: 610px; opacity: .43; }
  :root[data-theme="dark"] .hero--cyber .avatar-system { opacity: .54; }
  .hero__quick-links { max-width: 76%; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-transition, .hero__signal-bridge i, .theme-is-changing #theme-toggle .theme-switch-svg { animation: none !important; }
  #theme-toggle .theme-toggle__orbit { display: none; }
  .avatar-system.is-scroll-active .hologram-card, .avatar-system.is-scroll-active .avatar-chip { translate: none; }
}