:root {
  --night: #0b1020;
  --night-soft: #121a30;
  --ink: #edf0fb;
  --muted: #a7b0ca;
  --faint: #737e9e;
  --line: rgba(191, 181, 255, .18);
  --violet: #9f88f4;
  --violet-hi: #d8ceff;
  --blue: #6fbed4;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { position: relative; margin: 0; min-width: 320px; color: var(--ink); background: #0b1020; font-family: var(--serif); line-height: 1.75; }
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.background-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .9; background-image: linear-gradient(rgba(11, 16, 32, .76), rgba(11, 16, 32, .76)), url("/assets/images/hexi-night.jpg"); background-position: center 36%; background-size: cover; filter: blur(2px) contrast(1.04) saturate(.9); transform: scale(1.02); }
.site-header, .page-wrap, .site-footer, .mobile-nav { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
.ambient { position: fixed; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .12; z-index: 1; }
.ambient-one { top: 12rem; left: -16rem; background: var(--blue); }.ambient-two { right: -14rem; bottom: 8rem; background: var(--violet); }
.site-header { width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-brand { display: inline-flex; align-items: center; gap: .8rem; }.site-brand strong, .site-brand small { display: block; line-height: 1.2; }.site-brand strong { font-size: 1rem; letter-spacing: .15em; }.site-brand small { margin-top: .3rem; color: var(--faint); font: .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; }.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--violet-hi); font-size: 1.1rem; }
.desktop-nav { display: flex; gap: 1.6rem; color: var(--muted); font: .76rem var(--sans); }.desktop-nav a:hover, .header-note:hover, .text-link:hover { color: var(--violet-hi); }.header-note { color: var(--muted); font-size: .78rem; }.header-note span { color: var(--violet); margin-left: .35rem; }
.page-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }.site-shell { padding: 4.4rem 0 7rem; }
.hero-panel { min-height: 510px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; overflow: hidden; border: 1px solid rgba(200,194,255,.2); border-radius: 30px; background: linear-gradient(120deg, rgba(18,26,48,.84), rgba(22,30,57,.43)); box-shadow: 0 30px 90px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04); }
.hero-copy { padding: clamp(2rem, 6vw, 5.5rem); }.eyebrow { margin: 0 0 1rem; color: var(--blue); font: .68rem var(--sans); letter-spacing: .24em; text-transform: uppercase; }.hero-copy h1 { margin: 0; white-space: nowrap; font-size: clamp(3.6rem, 9vw, 7.2rem); font-weight: 400; letter-spacing: .12em; line-height: 1.1; text-shadow: 0 0 36px rgba(216,206,255,.18); }.hero-name { margin: .8rem 0 1.6rem; color: var(--violet-hi); font: .8rem var(--sans); letter-spacing: .18em; text-transform: none; }.hero-intro { max-width: 27rem; margin: 0; color: var(--muted); font-size: 1rem; }.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }
.button { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1.15rem; border-radius: 999px; font: .76rem var(--sans); transition: .25s ease; }.button-primary { color: #0f1120; background: linear-gradient(135deg, var(--violet-hi), var(--violet)); box-shadow: 0 10px 28px rgba(159,136,244,.22); }.button-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(159,136,244,.34); }.button-quiet { color: var(--muted); border: 1px solid var(--line); }.button-quiet:hover { border-color: var(--violet); color: var(--ink); }
.hero-orbit { position: relative; min-height: 370px; display: grid; place-items: center; isolation: isolate; }.hero-orbit::before { content: ""; position: absolute; width: 20rem; height: 20rem; border-radius: 50%; background: radial-gradient(circle, rgba(159,136,244,.35), rgba(111,190,212,.08) 44%, transparent 70%); filter: blur(4px); }.orbit-ring { position: absolute; border: 1px solid rgba(216,206,255,.28); border-radius: 50%; transform: rotate(-22deg); }.orbit-ring-one { width: 19rem; height: 7rem; }.orbit-ring-two { width: 14rem; height: 21rem; transform: rotate(35deg); border-color: rgba(111,190,212,.2); }.orbit-moon { position: relative; z-index: 1; color: var(--violet-hi); font-size: 7rem; line-height: 1; text-shadow: 0 0 45px rgba(216,206,255,.5); }.hero-orbit small { position: absolute; right: 13%; bottom: 16%; color: var(--muted); font-size: .72rem; letter-spacing: .15em; line-height: 1.8; text-align: center; }
.signal-strip { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; color: var(--faint); font: .68rem var(--sans); letter-spacing: .1em; border-bottom: 1px solid rgba(255,255,255,.08); }.status-dot { display: inline-block; width: .42rem; height: .42rem; margin-right: .45rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.section-block { padding: 6.5rem 0 1rem; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }.section-heading h2, .memory-feature h2, .page-intro h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 400; line-height: 1.3; }.text-link { color: var(--muted); font: .75rem var(--sans); }.text-link span { color: var(--violet); margin-left: .3rem; }.trace-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }.entry-card { min-height: 250px; padding: 1.25rem; display: flex; flex-direction: column; border: 1px solid rgba(200,194,255,.14); border-radius: 18px; background: rgba(17,25,48,.56); transition: .25s ease; }.entry-card:hover { transform: translateY(-4px); border-color: rgba(216,206,255,.4); background: rgba(24,33,62,.75); }.entry-topline, .entry-footer, .gallery-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--faint); font: .64rem var(--sans); letter-spacing: .04em; }.entry-topline span { color: var(--blue); }.entry-card h3 { margin: 2.2rem 0 .8rem; font-size: 1.2rem; font-weight: 400; line-height: 1.5; }.entry-card p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.9; }.entry-footer { margin-top: auto; padding-top: 1.8rem; }.entry-footer a { color: var(--violet-hi); font-size: 1.1rem; }
.memory-feature { margin-top: 6rem; padding: clamp(1.4rem, 4vw, 3rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; border: 1px solid rgba(111,190,212,.18); border-radius: 24px; background: linear-gradient(125deg, rgba(12,22,43,.84), rgba(30,39,71,.36)); }.memory-feature p { max-width: 28rem; color: var(--muted); }.memory-feature .text-link { display: inline-block; margin-top: 1rem; }.memory-placeholder { min-height: 290px; display: flex; flex-direction: column; justify-content: end; padding: 1.5rem; border-radius: 18px; background: radial-gradient(circle at 70% 25%, rgba(159,136,244,.35), transparent 24%), linear-gradient(145deg, rgba(54,71,102,.8), rgba(11,17,34,.9)); color: rgba(232,223,255,.62); }.memory-placeholder span { font: .62rem var(--sans); letter-spacing: .18em; }.memory-placeholder b { margin-top: .5rem; color: var(--ink); font-weight: 400; }
.compact-block { padding-top: 5.5rem; }.compact-block .section-heading { align-items: flex-start; }.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }.route-grid a { position: relative; padding: 1.35rem; display: flex; flex-direction: column; gap: .45rem; min-height: 170px; border: 1px solid rgba(200,194,255,.13); border-radius: 18px; background: linear-gradient(145deg, rgba(25,34,62,.54), rgba(17,25,48,.28)); transition: .25s ease; }.route-grid a:hover { transform: translateY(-4px); border-color: var(--violet); background: rgba(29,39,72,.7); }.route-grid span { color: var(--violet); font: .66rem var(--sans); letter-spacing: .08em; }.route-grid strong { font-size: 1.3rem; font-weight: 400; }.route-grid small { max-width: 14rem; color: var(--muted); font-size: .76rem; }.route-grid b { position: absolute; right: 1.3rem; bottom: 1.1rem; color: var(--violet-hi); font: 1.2rem var(--sans); font-weight: 400; }
.site-footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 2rem 0 2.5rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--faint); font: .67rem var(--sans); }.icp-link { margin-left: auto; color: var(--faint); }.icp-link:hover { color: var(--violet-hi); }.mobile-nav { display: none; }
.page-intro { max-width: 46rem; padding-bottom: 3rem; }.page-intro p:last-child { margin: 1rem 0 0; color: var(--muted); }.trace-list { max-width: 780px; display: grid; gap: .8rem; }.trace-list .entry-card { min-height: auto; }.trace-list .entry-card h3 { margin-top: 1.2rem; }.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.gallery-card { overflow: hidden; border: 1px solid rgba(200,194,255,.15); border-radius: 20px; background: rgba(17,25,48,.55); }.gallery-image { position: relative; overflow: hidden; min-height: 250px; display: flex; align-items: end; padding: 1rem; color: rgba(241,237,255,.75); font: .6rem var(--sans); letter-spacing: .13em; }.gallery-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.gallery-desert { background: radial-gradient(circle at 72% 28%, rgba(224,170,119,.55), transparent 17%), linear-gradient(160deg, #45506c, #a07864 58%, #211d31); }.gallery-studio { background: radial-gradient(circle at 66% 26%, rgba(216,206,255,.35), transparent 14%), linear-gradient(145deg, #343c66, #111a33 70%); }.gallery-moon { background: radial-gradient(circle at 62% 24%, rgba(216,206,255,.62), transparent 12%), linear-gradient(145deg, #273e63, #090e20 74%); }.gallery-meta { align-items: end; padding: 1.1rem 1.1rem 0; }.gallery-meta small { color: var(--blue); }.gallery-meta h2 { margin: .3rem 0 0; font-size: 1.1rem; font-weight: 400; }.gallery-card > p { margin: .8rem 1.1rem 1.2rem; color: var(--muted); font-size: .8rem; }.music-note { max-width: 700px; display: flex; gap: 2rem; align-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(17,25,48,.55); }.music-note > span { color: var(--violet-hi); font-size: 3rem; }.music-note small { color: var(--blue); font: .65rem var(--sans); letter-spacing: .12em; }.music-note h2 { margin: .6rem 0 .2rem; font-weight: 400; }.music-note p { margin: 0; color: var(--muted); }
.codex-intro { max-width: 52rem; }.codex-body { max-width: 900px; border-top: 1px solid var(--line); }.codex-section { display: grid; grid-template-columns: 9rem 1fr; gap: 2rem; padding: 2.3rem 0; border-bottom: 1px solid rgba(191,181,255,.12); }.codex-index { color: var(--blue); font: .68rem var(--sans); letter-spacing: .14em; }.codex-section h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 400; }.codex-section p { max-width: 38rem; margin: 0 0 1rem; color: var(--muted); }.codex-section p:last-child { margin-bottom: 0; }.codex-signature { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; color: var(--violet-hi); font: .66rem var(--sans); letter-spacing: .12em; }.codex-signature small { color: var(--faint); }
.back-link { color: var(--muted); font: .75rem var(--sans); }.entry-detail { max-width: 760px; margin: 3rem 0 0; }.entry-detail h1 { margin: 1rem 0; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; }.entry-lead { color: var(--violet-hi); font-size: 1.1rem; }.entry-prose { margin-top: 3rem; color: var(--muted); font-size: 1rem; }.entry-prose p { margin: 0 0 1.6rem; }.entry-detail footer { margin-top: 4rem; padding-top: 1rem; display: flex; justify-content: space-between; color: var(--faint); font: .7rem var(--sans); border-top: 1px solid var(--line); }.entry-detail footer a { color: var(--violet-hi); }
@media (max-width: 800px) { .background-wash { background-position: 38% 34%; filter: blur(1.5px) contrast(1.04) saturate(.9); }.site-header, .page-wrap, .site-footer { width: min(100% - 28px, 680px); }.desktop-nav { display: none; }.header-note { margin-left: auto; }.site-shell { padding-top: 2.4rem; }.hero-panel { min-height: auto; grid-template-columns: 1fr; }.hero-copy { padding: 2.3rem 1.5rem 1.4rem; }.hero-copy h1 { font-size: clamp(2.8rem, 14vw, 5rem); }.hero-orbit { min-height: 210px; }.hero-orbit::before { width: 14rem; height: 14rem; }.orbit-ring-one { width: 14rem; height: 5rem; }.orbit-ring-two { width: 10rem; height: 15rem; }.orbit-moon { font-size: 5rem; }.signal-strip { flex-wrap: wrap; padding: 1rem .2rem; font-size: .6rem; }.signal-strip span:last-child { width: 100%; }.section-block { padding-top: 4.4rem; }.section-heading { align-items: start; flex-direction: column; gap: .9rem; }.trace-grid, .gallery-grid { grid-template-columns: 1fr; }.entry-card { min-height: 210px; }.memory-feature { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 4rem; }.memory-placeholder { min-height: 230px; }.route-grid { grid-template-columns: 1fr; }.site-footer { padding-bottom: 6rem; flex-direction: row; flex-wrap: wrap; align-items: center; }.icp-link { margin-left: auto; }.mobile-nav { position: fixed; z-index: 20; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(5, 1fr); padding: .45rem; border: 1px solid rgba(216,206,255,.2); border-radius: 20px; background: rgba(10,16,34,.84); backdrop-filter: blur(18px); box-shadow: 0 12px 30px rgba(0,0,0,.35); }.mobile-nav a { padding: .4rem .1rem; display: grid; justify-items: center; gap: .12rem; color: var(--muted); font-size: .68rem; }.mobile-nav a:hover { color: var(--violet-hi); }.mobile-nav a span { color: var(--violet); font: .55rem var(--sans); }.page-intro { padding-bottom: 2rem; }.entry-detail { margin-top: 2rem; }.entry-prose { margin-top: 2rem; }.codex-section { grid-template-columns: 1fr; gap: .7rem; padding: 1.8rem 0; }.codex-signature { flex-direction: column; gap: .5rem; } }