@charset "UTF-8";

@font-face { font-family: 'Cormorant Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-italic.woff2') format('woff2'); }

/* 雾光共振：色彩在背景流动，前景文字与玻璃边缘保持清楚。 */
:root {
  --paper: #f5f6f0;
  --ink: #253c36;
  --muted: #5e766c;
  --sage: #5f9d86;
  --line: rgba(58, 104, 87, .19);
  --mint: #a3d9ba;
  --ice: #acd4e8;
  --violet: #c6b9de;
}

html { scrollbar-gutter: stable; }
body { background: #f5f6f0; }
::selection { background: #a8d7c6; color: #183d34; }
.ambient::before { background: radial-gradient(ellipse at 74% 30%, #c0e0d87a 0%, transparent 47%), radial-gradient(ellipse at 20% 92%, #c4d8ed66, transparent 42%), radial-gradient(ellipse at 95% 65%, #d7c8e34f, transparent 30%); }
.ambient::after { opacity: .23; }
.light-field { position: absolute; inset: -12%; overflow: hidden; }
.light-ribbon { position: absolute; width: 73%; height: 39%; border-radius: 50%; filter: blur(68px); transform-origin: center; opacity: .7; will-change: transform; }
.light-ribbon--mint { left: 39%; top: 15%; background: radial-gradient(ellipse, #8dd9b77a, #b0e3cb36 58%, transparent 75%); animation: ribbon-mint 18s var(--ease) infinite alternate; }
.light-ribbon--blue { left: 25%; top: 50%; background: radial-gradient(ellipse, #99cee86b, #c1dbe82b 58%, transparent 75%); animation: ribbon-blue 23s var(--ease) infinite alternate; }
.light-ribbon--violet { left: 65%; top: 41%; width: 46%; background: radial-gradient(ellipse, #ba9ed059, #d8c1e52c 54%, transparent 75%); animation: ribbon-violet 20s var(--ease) infinite alternate; }
.ambient-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(#74a89724 1px, transparent 1px), linear-gradient(90deg, #79aa9a24 1px, transparent 1px); background-size: 86px 86px; mask-image: radial-gradient(ellipse at 84% 49%, #000 4%, transparent 64%); -webkit-mask-image: radial-gradient(ellipse at 84% 49%, #000 4%, transparent 64%); transform: skewY(-8deg); }
.dock-light { position: absolute; left: 15%; right: 8%; bottom: -4%; height: 28%; background: radial-gradient(ellipse at 26% 65%, #73c9ad66, transparent 37%), radial-gradient(ellipse at 66% 78%, #b0a0e05c, transparent 33%), radial-gradient(ellipse at 85% 60%, #88c8e85c, transparent 40%); filter: blur(25px); animation: dock-drift 15s var(--ease) infinite alternate; }
#ambient-canvas { opacity: .9; }
#interaction-canvas, .interaction-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; }
.site-header { gap: 24px; }
.brand-symbol { color: #3f8973; filter: drop-shadow(0 0 7px #87cab63b); }
.brand-name { color: #2e5147; }
.header-note { gap: 12px; }
.status-dot { background: #79b99b; box-shadow: 0 0 0 5px #a0cfaf20, 0 0 11px #7cae8c55; }
.header-index { color: #64857a; margin-left: 18px; }
.intro-replay { flex-shrink: 0; display: inline-flex; align-items: center; padding: 0; min-height: 38px; border: 1px solid #ffffffbd; border-radius: 99px; background: linear-gradient(145deg, #ffffff6e, #e1eeeb3d); box-shadow: inset 0 1px 1px #fff, 0 4px 15px #32604c0a; color: #446d60; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.intro-replay .magnetic-inner { gap: 10px; padding: 7px 14px; font-size: 10px; letter-spacing: .06em; }
.intro-replay:hover { background: #ffffffb0; box-shadow: inset 0 1px 1px #fff, 0 5px 20px #6fbca124; }
.hero { padding-top: 18px; grid-template-columns: .95fr 1.05fr; overflow: clip; }
.hero::before { content: ''; position: absolute; width: 58%; height: 72%; right: -3%; top: 4%; border-radius: 50%; background: radial-gradient(ellipse, #b9e1d34f, #c7e4e822 52%, transparent 72%); pointer-events: none; }
.hero-copy { z-index: 3; }
.hero-heading { color: #263e36; text-shadow: 0 4px 30px #e4eee5b3; }
.hero-heading .second-line { color: #5f9b82; }
.hero-heading .second-line .char { background: linear-gradient(135deg, #417f6b 14%, #7cbea0 48%, #638fa0 85%); background-clip: text; -webkit-background-clip: text; color: transparent; padding: .14em .16em .16em .08em; margin: -.14em -.16em -.16em -.08em; }
.heading-dot { color: #8dbfaf; }
.hero-tagline { color: #3b594e; }
.hero-description { color: #647d70; }
.eyebrow { color: #637e72; }
.pill { background: radial-gradient(ellipse at var(--pointer-x, 20%) var(--pointer-y, 0%), #ffffffb3, transparent 65%), linear-gradient(150deg, #ffffffa3, #e1efdf4d 62%, #e6e4f450); border-color: #ffffffed; box-shadow: inset 0 1px 2px #fff, inset 0 -1px 2px #83a89542, 0 8px 25px #66867413; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
.pill:active, .intro-replay:active { box-shadow: inset 0 2px 7px #769a8040; }
.hero-object { width: min(117%, 850px); max-height: calc(100svh - 180px); margin-left: -8%; isolation: isolate; }
.object-coordinate { top: 6%; left: 12%; font-size: 8px; color: #5b8979; }
.object-axis { color: #618b7d; right: 2%; }
.seed-button { width: 96%; height: 96%; z-index: 2; overflow: visible; }
.seed-button::before { inset: 17%; background: radial-gradient(ellipse at 40% 46%, #b9f1d7b3, #b5d9e766 44%, #d1b9e240 66%, transparent 75%); filter: blur(26px); animation: seed-light-breathe 7s var(--ease) infinite alternate; }
.seed-response::after { content: ''; position: absolute; inset: 22%; border-radius: 49% 51% 48% 52% / 57% 44% 56% 43%; border: 1px solid #ffffff9c; background: radial-gradient(ellipse at var(--seed-x, 35%) var(--seed-y, 27%), #ffffffe6 0%, #ffffff29 14%, transparent 48%), linear-gradient(138deg, #e0fff326, transparent 43%, #c6b1df3b); box-shadow: inset 8px 8px 29px #f8fffb80, inset -5px -5px 16px #8ab7bf1c; pointer-events: none; transform: rotate(-18deg); }
.seed-parallax { position: relative; isolation: isolate; }
.seed-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; animation: none; filter: saturate(1.8) contrast(1.45); }
.seed-layer--one { animation: seed-turn 45s linear infinite; filter: saturate(1.4) contrast(1.7) drop-shadow(0 0 1px #a0d6c87a); }
.seed-layer--two { scale: .9; opacity: .57; animation: seed-turn-reverse 59s linear infinite; filter: hue-rotate(74deg) saturate(2) contrast(1.6); }
.seed-layer--three { scale: 1.09; opacity: .39; animation: seed-turn 77s linear infinite; filter: hue-rotate(180deg) saturate(1.9) contrast(1.4); }
.seed-membrane { position: absolute; inset: 20%; border-radius: 44% 56% 62% 38% / 47% 44% 56% 53%; background: radial-gradient(ellipse at 31% 27%, #fafff1a8 0%, #ccf2da7a 26%, #a9cfdb70 58%, #c9b1dc4d 81%, #e1e9e236); box-shadow: inset 1px 4px 16px #ffffffd6, inset -10px -18px 35px #91babd36, 0 0 45px #99d9c33b; transform: rotate(12deg); animation: membrane-breathe 11s var(--ease) infinite alternate; }
.seed-core { width: 13px; height: 13px; left: calc(50% - 6.5px); top: calc(48% - 6.5px); z-index: 4; background: #fffef4; box-shadow: 0 0 9px 5px #ffffffeb, 0 0 26px 14px #a9f3d2b3, 0 0 70px 30px #7dcfc14d; animation: core-breathe 4s var(--ease) infinite alternate; }
.seed-dust { position: absolute; inset: 14%; border-radius: 50%; pointer-events: none; z-index: 3; animation: dust-turn 34s linear infinite; }
.seed-dust i { position: absolute; width: 5px; height: 5px; background: #effff2; border-radius: 50%; box-shadow: 0 0 8px 3px #9ddbbfb8; }
.seed-dust i:nth-child(1) { top: 4%; left: 29%; }
.seed-dust i:nth-child(2) { top: 37%; right: 0; width: 4px; height: 4px; background: #eff8ff; box-shadow: 0 0 9px 3px #8dc3e1a8; }
.seed-dust i:nth-child(3) { bottom: 8%; right: 22%; width: 6px; height: 6px; }
.seed-dust i:nth-child(4) { bottom: 30%; left: 2%; width: 3px; height: 3px; background: #f8edff; box-shadow: 0 0 8px 3px #c1a5d88f; }
.seed-tag { position: absolute; z-index: 4; padding: 8px 13px; border-radius: 99px; font-size: 9px; letter-spacing: .14em; color: #4b7567; border: 1px solid #ffffffdb; background: linear-gradient(145deg, #ffffff8c, #e3f2eb40); box-shadow: 0 8px 30px #395c5212, inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; white-space: nowrap; }
.seed-tag--art { left: 3%; top: 31%; transform: rotate(-7deg); animation: tag-art-float 8s var(--ease) infinite alternate; }
.seed-tag--code { right: 1%; bottom: 27%; transform: rotate(6deg); animation: tag-code-float 9s var(--ease) infinite alternate; }
.object-label { color: #537e6c; bottom: 7%; font-size: 18px; }
.object-hint { font-size: 7px; letter-spacing: .15em; color: #6a8b7b; opacity: 1; }
.hero-side-note { color: #698777; bottom: 119px; }

/* 玻璃的厚度来自亮暗双边、底部色散、透底颜色和随鼠标游动的表面高光。 */
.nav-shell { bottom: max(24px, env(safe-area-inset-bottom)); width: min(712px, calc(100% - 44px)); }
.nav-shell::before { content: ''; position: absolute; inset: -37px -40px -22px; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at 20% 68%, #7ec8ac8f, transparent 48%), radial-gradient(ellipse at 72% 35%, #b8a4de80, transparent 43%), radial-gradient(ellipse at 94% 70%, #85c6e080, transparent 40%); filter: blur(28px); opacity: .58; animation: dock-drift 15s var(--ease) infinite alternate; }
.site-nav { padding: 9px; gap: 3px; border-radius: 26px; border: 1px solid #ffffffed; background: linear-gradient(148deg, #ffffff7a, #edf6ef45 40%, #dcebf02e 72%, #e1d6ee52); box-shadow: inset 0 1.5px 1.5px #fff, inset 1px 0 1px #ffffffbc, inset -1px -2px 2px #6989856b, inset 0 -5px 8px #83b7b51f, 0 13px 33px #3e6c612b, 0 2px 5px #4d7d6d0f; -webkit-backdrop-filter: blur(20px) saturate(1.75); backdrop-filter: blur(20px) saturate(1.75); }
.site-nav::before { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: 25px; pointer-events: none; background: radial-gradient(ellipse at var(--glass-x, var(--pointer-x, 29%)) var(--glass-y, var(--pointer-y, 5%)), #ffffffb8, transparent 45%), linear-gradient(110deg, transparent 20%, #f7fffc38 45%, transparent 63%); opacity: .85; }
.site-nav::after { content: ''; position: absolute; z-index: 3; inset: 3px; border-radius: 23px; border: 1px solid; border-color: #ffffffb3 #ffffff26 #78a0ae4d #ceffe959; pointer-events: none; box-shadow: inset 0 -1px 0 #d4d4ff73; }
.nav-link { border-radius: 18px; min-height: 51px; color: #3d6256; }
.nav-link__inner { min-height: 51px; gap: 12px; }
.nav-label { font-size: 12px; letter-spacing: .11em; }
.nav-number { color: #638e7e; }
.nav-link[aria-current], .nav-link.is-preview { color: #1c5342; }
.nav-link[aria-current] .nav-label, .nav-link.is-preview .nav-label { font-weight: 600; }
.nav-current { background: radial-gradient(ellipse at 33% 0, #ffffffed, #ffffffe8 7%, #ffffff61 46%, #d9f5e854 73%, #c5e5f065); border-color: #ffffffed; box-shadow: inset 0 1px 2px #fff, inset 0 -1.5px 2px #6fa49c70, 0 3px 9px #557f6c17, 0 0 18px #e4fff62b; -webkit-backdrop-filter: blur(4px) saturate(1.8); backdrop-filter: blur(4px) saturate(1.8); }
.site-nav.is-dragging .nav-current { transition: none; animation: none; }
.site-nav.is-dragging .nav-link { user-select: none; }
.nav-link:active .nav-link__inner { scale: .95; }
.nav-arrow { color: #38866d; }
.section { position: relative; background: linear-gradient(140deg, #ffffff12, #e0f0e81a 60%, #e5e2f31a); }
.section-heading { color: #365849; }
.section-heading em { color: #66a184; }
.interest { border-top-color: #79a68e4d; }
.interest h3 { color: #3b6851; }
.sample-label { background: #e3f0df55; color: #587563; border-color: #8cb19b55; }
.creation-slices { padding-top: 70px; padding-bottom: 110px; }
.slice-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 34px; }
.slice-heading h2 { font: 400 clamp(31px, 4vw, 57px)/1.3 var(--serif); letter-spacing: .08em; margin: 10px 0 0; color: #3a5d4e; }
.slice-heading p { color: #5f7c6c; font-size: 11px; }
.slice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.creation-slice { display: block; padding: 9px 9px 17px; border: 1px solid #ffffffeb; border-radius: 19px; background: linear-gradient(140deg, #ffffff80, #f1f8ed40); box-shadow: inset 0 1px 0 #fff, 0 14px 45px #5675630d; transition: transform 850ms var(--ease), box-shadow 850ms var(--ease); }
.creation-slice:nth-child(2) { margin-top: 35px; margin-bottom: -35px; }
.creation-slice img { width: 100%; height: auto; aspect-ratio: 1.25; object-fit: cover; border-radius: 11px; }
.slice-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 7px 0; font-family: var(--serif); font-size: 19px; letter-spacing: .06em; color: #3f6454; }
.slice-title em { font: 8px var(--sans); color: #789280; letter-spacing: .08em; }
.creation-slice:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: inset 0 1px 0 #fff, 0 20px 50px #5b8b7221; }
.page-title { color: #2d4d40; }
.page-title em { display: inline-block; white-space: nowrap; color: #619f89; }
.page-intro { position: relative; }
.page-intro::after { content: ''; position: absolute; z-index: -1; right: -4%; top: -20%; width: 55%; height: 130%; border-radius: 50%; background: radial-gradient(ellipse, #b9dfcf59, #c9d9e733 45%, transparent 70%); filter: blur(25px); pointer-events: none; }
.project { border-color: #7ca99142; }
.project-thumb { border-radius: 8px; border: 1px solid #ffffffad; box-shadow: 0 8px 20px #5a816616; }
.project-details { background: linear-gradient(135deg, #e0eee652, #e5e7f037); border-radius: 14px; padding-top: 17px; padding-bottom: 25px; margin-bottom: 16px; }
.project-toggle { background: #f9fff85c; border-color: #96b8a570; box-shadow: inset 0 1px 0 #fff; }
.artwork-visual { border-radius: 11px; border: 1px solid #ffffffc7; box-shadow: 0 16px 45px #6a7d6914; }
.has-js .artwork .artwork-visual { clip-path: inset(0 0 10% 0 round 11px); transition: clip-path 1200ms var(--ease); }
.has-js .artwork.is-revealed .artwork-visual { clip-path: inset(0 round 11px); }
.artwork-open { background: #f7fff69c; box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #71977e5c, 0 4px 14px #507e631a; }
.timeline::before { background: linear-gradient(#79b6a0, #a5cddd88 64%, transparent); }
.timeline::after { content: ''; position: absolute; top: 24px; bottom: 50px; left: 5px; width: 1px; background: linear-gradient(#5eaa8e, #7bbfc2 72%, #e8ffe7); box-shadow: 0 0 9px #80c7aa70; transform: scaleY(var(--timeline-progress, 0)); transform-origin: top; transition: transform 500ms var(--ease); pointer-events: none; }
.timeline-item::before { background: #e2f6de; border-color: #6ba58b; transition: box-shadow 850ms var(--ease), background 850ms var(--ease); }
.timeline-item.is-revealed::before { background: #ecffe4; box-shadow: 0 0 0 6px #daeadc75, 0 0 20px #80c59b8f; }
.timeline-item.is-active::before { background: #f8fff1; border-color: #529b7c; box-shadow: 0 0 0 7px #d3eadc94, 0 0 22px #68b88cba; }
.timeline-tag { color: #5e957b; }
.letter { background: linear-gradient(155deg, #fffef5ba, #f3f8eda3); border-color: #fffffff0; box-shadow: 0 18px 70px #5b815b14, inset 0 1px 0 #fff; }
.letter-body .letter-emphasis { color: #659b7b; }




/* 彩蛋画布与玻璃留言卡一起进入顶层，粒子不会被弹窗遮罩压在下面。 */
.inspiration-dialog { position: fixed; inset: 0; width: 100%; height: 100svh; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; overflow: hidden; background: transparent; color: #2c5447; }
.inspiration-dialog::backdrop { background: #dceae54d; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.inspiration-stage { position: relative; isolation: isolate; width: 100%; height: 100%; display: grid; place-items: center; }
#celebration-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.inspiration-wave { position: absolute; z-index: 0; left: var(--burst-x, 50%); top: var(--burst-y, 50%); width: 90px; height: 90px; border: 1px solid #f3fff9; border-radius: 50%; background: radial-gradient(ellipse, #e0ffe22b 40%, #b8efdc38 62%, #ffffffb3 66%, transparent 70%); box-shadow: 0 0 28px #b0eadf99, inset 0 0 22px #c1e4ed99; translate: -50% -50%; pointer-events: none; opacity: 0; }
.inspiration-card { position: relative; z-index: 2; width: min(480px, calc(100% - 44px)); padding: 43px 45px 36px; border: 1px solid #ffffffed; border-radius: 29px; background: radial-gradient(ellipse at 15% 0, #ffffffc7, transparent 58%), linear-gradient(145deg, #f5fff0b8, #e0eff08c 55%, #e9e0f1a8); box-shadow: inset 0 2px 2px #fff, inset 0 -2px 2px #729b9f6b, 0 25px 100px #37645133, 0 1px 4px #ffffffbf; -webkit-backdrop-filter: blur(25px) saturate(1.7); backdrop-filter: blur(25px) saturate(1.7); overflow: hidden; text-align: center; }
.inspiration-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid; border-color: #ffffffb3 #ffffff33 #bdd8e6b3 #eaffda99; border-radius: 23px; pointer-events: none; }
.inspiration-card::after { content: ''; position: absolute; width: 170px; height: 170px; right: -85px; top: -75px; border-radius: 50%; background: #e3c9f15e; filter: blur(17px); pointer-events: none; }
.inspiration-eyebrow { font-size: 9px; letter-spacing: .24em; color: #52866f; margin: 0 0 24px; }
.inspiration-title { font: 400 clamp(25px, 3.3vw, 35px)/1.5 var(--serif); color: #2e6450; letter-spacing: .12em; margin: 0 0 23px; }
.inspiration-copy { font-family: var(--serif); font-size: 16px; line-height: 2.3; letter-spacing: .08em; color: #4c7564; margin: 0; }
.inspiration-copy span { display: block; }
.inspiration-signoff { font: italic 26px var(--latin); color: #709d84; margin: 25px 0 27px; }
#inspiration-close { border: 1px solid #ffffffdf; border-radius: 99px; padding: 0; background: #ffffff7d; color: #416b59; box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #82ab9663, 0 5px 18px #5e9b7f0d; }
#inspiration-close .magnetic-inner { font-size: 11px; padding: 9px 20px; gap: 20px; }
.inspiration-dialog.is-celebrating .inspiration-wave { animation: inspiration-wave 2300ms var(--ease) both; }
.inspiration-dialog.is-celebrating .inspiration-card { animation: inspiration-card 900ms 450ms var(--ease) both; }
.inspiration-dialog.is-celebrating .inspiration-copy span { animation: letter-line 850ms var(--ease) both; }
.inspiration-dialog.is-celebrating .inspiration-copy span:nth-child(1) { animation-delay: 850ms; }
.inspiration-dialog.is-celebrating .inspiration-copy span:nth-child(2) { animation-delay: 1030ms; }
.inspiration-dialog.is-celebrating .inspiration-copy span:nth-child(3) { animation-delay: 1210ms; }

@keyframes ribbon-mint { from { transform: translate(-4%, -8%) rotate(-24deg) scale(1); } to { transform: translate(5%, 10%) rotate(-8deg) scale(1.13); } }
@keyframes ribbon-blue { from { transform: translate(8%, 1%) rotate(18deg); } to { transform: translate(-9%, -15%) rotate(-8deg) scale(1.12); } }
@keyframes ribbon-violet { from { transform: translate(-9%, -10%) rotate(-20deg); } to { transform: translate(-25%, 11%) rotate(22deg); } }
@keyframes dock-drift { from { transform: translateX(-4%) scaleX(.95); } to { transform: translateX(6%) scaleX(1.09); } }
@keyframes seed-turn { from { transform: rotate(-10deg); } to { transform: rotate(350deg); } }
@keyframes seed-turn-reverse { from { transform: rotate(35deg); } to { transform: rotate(-325deg); } }
@keyframes dust-turn { to { transform: rotate(360deg); } }
@keyframes membrane-breathe { from { transform: rotate(4deg) scale(.97); border-radius: 44% 56% 62% 38% / 47% 44% 56% 53%; } to { transform: rotate(20deg) scale(1.025); border-radius: 54% 46% 43% 57% / 51% 62% 38% 49%; } }
@keyframes seed-light-breathe { from { opacity: .65; transform: scale(.95); } to { opacity: 1; transform: scale(1.08); } }
@keyframes core-breathe { from { opacity: .8; scale: .85; } to { opacity: 1; scale: 1.2; } }
@keyframes tag-art-float { from { translate: 0 -5px; rotate: -2deg; } to { translate: 0 7px; rotate: 1deg; } }
@keyframes tag-code-float { from { translate: 0 7px; rotate: 2deg; } to { translate: 0 -5px; rotate: -1deg; } }
@keyframes inspiration-wave { 0% { opacity: 0; transform: scale(.2); } 10% { opacity: 1; } 60% { opacity: .7; } 100% { opacity: 0; transform: scale(13); } }
@keyframes inspiration-card { from { opacity: 0; transform: translateY(30px) scale(.8) rotateX(18deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes letter-line { from { opacity: 0; transform: translateY(13px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 1100px) {
  .header-note .status-text, .header-note .status-dot { display: none; }
  .hero-object { width: 119%; max-height: calc(100svh - 170px); margin-left: -14%; }
  .seed-tag { font-size: 8px; padding: 7px 10px; }
  .seed-tag--art { left: 1%; }
  .seed-tag--code { right: 0; }
  .slice-grid { gap: 18px; }
  .slice-title { display: block; font-size: 18px; }
  .slice-title em { display: block; margin-top: 7px; }
}

@media (max-width: 760px) {
  :root { --gutter: 23px; --dock-space: 55px; --rail-clearance: 102px; }
  .site-header { min-height: 83px; padding-top: 19px; padding-bottom: 17px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-name { font-size: 16px; letter-spacing: .14em; }
  .brand-sub { font-size: 6px; letter-spacing: .09em; }
  .brand-symbol { width: 26px; height: 33px; }
  .header-note { gap: 0; }
  .intro-replay { min-height: 36px; }
  .intro-replay .magnetic-inner { padding: 6px 11px; gap: 7px; font-size: 10px; }
  .hero { grid-template-columns: 1fr; min-height: min(650px, calc(100svh - 83px)); padding-top: 26px; padding-bottom: 58px; align-content: start; }
  .hero-copy { padding-bottom: 0; pointer-events: none; }
  .hero-copy > * { pointer-events: auto; }
  .hero-copy .hero-heading { width: max-content; max-width: 100%; }
  .hero-heading { font-size: clamp(98px, 25vw, 143px); line-height: .85; margin: 30px 0 28px; }
  .hero-heading .second-line { margin-left: .71em; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .14em; }
  .hero .eyebrow .dash { width: 20px; margin: 0 8px; }
  .hero-tagline { font-size: 22px; line-height: 1.6; letter-spacing: .1em; margin: 21px 0 14px; max-width: calc(100% - 83px); }
  .hero-description { max-width: calc(100% - 93px); font-size: 9px; line-height: 1.9; margin: 0 0 25px; }
  .hero .pill { min-height: 42px; font-size: 11px; }
  .hero .magnetic-inner { padding: 8px 16px; gap: 25px; }
  .hero-object { position: absolute; width: 345px; height: 345px; max-height: none; margin: 0; right: -85px; top: 145px; opacity: .94; z-index: 1; }
  .seed-button { width: 96%; height: 96%; }
  .seed-button::before { filter: blur(16px); }
  .seed-core { width: 10px; height: 10px; left: calc(50% - 5px); top: calc(48% - 5px); }
  .seed-tag { display: block; font-size: 7px; padding: 6px 9px; }
  .seed-tag--art { top: 14%; left: 44%; }
  .seed-tag--code { top: 65%; bottom: auto; right: 30%; }
  .object-label { font-size: 13px; bottom: 11%; left: 0; right: 20%; }
  .object-coordinate, .object-axis, .object-hint { display: none; }
  .light-ribbon { filter: blur(37px); opacity: .85; }
  .light-ribbon--mint { left: 20%; top: 9%; width: 110%; }
  .light-ribbon--blue { left: -30%; top: 40%; width: 135%; }
  .light-ribbon--violet { left: 49%; top: 20%; width: 95%; }
  .dock-light { left: 40%; right: -30%; height: 47%; bottom: -6%; opacity: .7; }
  .nav-shell { left: auto; right: max(13px, env(safe-area-inset-right)); bottom: max(21px, env(safe-area-inset-bottom)); transform: none; width: 76px; max-width: none; }
  .nav-shell::before { inset: -35px -14px -18px -30px; opacity: .66; }
  .site-nav { grid-template-columns: 1fr; gap: 4px; padding: 7px 5px; border-radius: 26px; touch-action: none; }
  .site-nav::before { border-radius: 25px; }
  .site-nav::after { border-radius: 22px; }
  .nav-link { min-height: 49px; border-radius: 18px; touch-action: none; }
  .nav-link__inner { min-height: 49px; gap: 0; flex-direction: column; justify-content: center; }
  .nav-number { font-size: 8px; line-height: 1.1; margin-bottom: 3px; opacity: .8; }
  .nav-label { font-size: 10px; line-height: 1.4; letter-spacing: .03em; white-space: nowrap; }
  .nav-arrow { display: none; }
  .nav-current { border-radius: 18px; }
  .site-nav.is-dragging { box-shadow: inset 0 1.5px 2px #fff, inset 0 -2px 3px #719da494, 0 10px 35px #5c988b42; }
  .section { padding: 58px var(--rail-clearance) 62px var(--gutter); }
  .section-heading { font-size: clamp(29px, 8vw, 43px); line-height: 1.65; letter-spacing: .04em; }
  .about-grid { gap: 14px; }
  .about-copy { padding-top: 7px; }
  .about-copy .introduction { font-size: 19px; }
  .about-copy p { font-size: 12px; line-height: 2.2; }
  .interest-list { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .interest { padding-top: 15px; }
  .interest h3 { margin: 10px 0; font-size: 22px; }
  .interest p { max-width: none; font-size: 11px; }
  .creation-slices { padding-top: 50px; padding-bottom: 65px; }
  .slice-heading { display: block; margin-bottom: 23px; }
  .slice-heading h2 { font-size: 30px; line-height: 1.5; }
  .slice-heading p { font-size: 10px; }
  .slice-grid { grid-template-columns: 1fr; gap: 23px; }
  .creation-slice { padding: 7px 7px 14px; border-radius: 15px; }
  .creation-slice:nth-child(2) { margin: 0; }
  .creation-slice img { border-radius: 9px; aspect-ratio: 1.15; }
  .slice-title { font-size: 19px; padding: 13px 5px 0; }
  .site-footer { margin-right: var(--rail-clearance); padding-bottom: 45px; gap: 14px; flex-direction: column; }
  .page-main { padding-left: var(--gutter); padding-right: var(--rail-clearance); padding-top: 5px; min-height: calc(100svh - 83px); }
  .page-topline { gap: 12px; align-items: start; }
  .page-topline .eyebrow { font-size: 6px; letter-spacing: .09em; max-width: 44%; }
  .page-topline .eyebrow .dash { display: none; }
  .page-topline .back-link { font-size: 8px; gap: 7px; }
  .page-intro { padding-top: 27px; padding-bottom: 35px; gap: 17px; }
  .page-title { font-size: clamp(43px, 12vw, 76px); line-height: 1.06; margin-top: 10px; margin-bottom: 16px; }
  .page-chinese-title { font-size: 17px; letter-spacing: .15em; }
  .page-description { font-size: 11px; line-height: 2.15; }
  .project summary { grid-template-columns: 19px 1fr 29px; grid-template-areas: 'index info toggle' 'index thumb thumb'; gap: 14px 8px; padding: 25px 0; }
  .project-index { grid-area: index; font-size: 12px; }
  .project summary > span:not(.project-index):not(.project-toggle) { grid-area: info; min-width: 0; }
  .project-thumb { display: block; grid-area: thumb; width: 100%; height: 110px; aspect-ratio: 1.6; object-fit: cover; }
  .project-toggle { grid-area: toggle; width: 29px; height: 29px; font-size: 20px; }
  .project h2 { font-size: 21px; line-height: 1.5; letter-spacing: .04em; margin-bottom: 9px; }
  .project-meta { font-size: 7px; letter-spacing: .07em; }
  .project-teaser { font-size: 10px; line-height: 1.9; }
  .project-details { padding: 15px; margin-bottom: 15px; }
  .project-details h3 { font-size: 10px; }
  .project-details p { font-size: 11px; }
  .gallery { grid-template-columns: 1fr; gap: 34px; }
  .artwork:nth-child(even) { margin-top: 0; }
  .artwork-title { font-size: 21px; }
  .artwork-category { font-size: 8px; }
  .artwork-note { font-size: 9px; }
  .future-aside { grid-template-columns: 1fr; gap: 12px; padding-bottom: 15px; }
  .future-aside .small-seed { width: 100%; max-width: 220px; margin-left: -10px; }
  .future-quote { font-size: 22px; line-height: 1.8; }
  .timeline { padding-left: 24px; }
  .timeline-item::before { left: -23px; }
  .timeline-item h2 { font-size: 24px; line-height: 1.55; letter-spacing: .05em; }
  .timeline-item .eyebrow { font-size: 7px; letter-spacing: .12em; }
  .timeline-item p { font-size: 12px; line-height: 2.15; }
  .timeline-tag { font-size: 9px; }
  .letter { padding: 29px 19px 35px; margin-bottom: 30px; }
  .letter-top { flex-direction: column; gap: 8px; font-size: 6px; line-height: 1.7; }
  .letter h2 { font-size: 20px; line-height: 1.8; margin: 24px 0; letter-spacing: .06em; }
  .letter-body { font-size: 13px; letter-spacing: .03em; line-height: 2.5; }
  .letter-body .letter-emphasis { font-size: 18px; line-height: 2; }
  .letter-signature { font-size: 23px; }
  .letter-signature small { font-size: 7px; line-height: 1.9; }
  .notes-afterword { font-size: 18px; }
  .inspiration-card { width: calc(100% - 40px); max-width: 390px; padding: 34px 25px 29px; border-radius: 25px; }
  .inspiration-card::before { border-radius: 20px; }
  .inspiration-title { font-size: 27px; margin-bottom: 20px; letter-spacing: .08em; }
  .inspiration-copy { font-size: 15px; line-height: 2.4; letter-spacing: .04em; }
  .inspiration-eyebrow { font-size: 8px; margin-bottom: 20px; letter-spacing: .18em; }
  .inspiration-signoff { font-size: 25px; margin: 23px 0; }
}

@media (max-width: 380px) {
  :root { --gutter: 20px; --rail-clearance: 98px; }
  .site-header { padding-top: 16px; padding-bottom: 15px; min-height: 77px; }
  .brand-name { font-size: 15px; }
  .brand-symbol { width: 24px; }
  .brand-sub { font-size: 5.5px; }
  .intro-replay .magnetic-inner { font-size: 9px; padding: 6px 9px; gap: 5px; }
  .hero { min-height: calc(100svh - 77px); padding-top: 22px; }
  .hero-heading { font-size: 90px; margin: 27px 0 24px; }
  .hero-tagline { font-size: 20px; margin-top: 18px; margin-bottom: 11px; max-width: calc(100% - 75px); }
  .hero-description { max-width: calc(100% - 75px); margin-bottom: 20px; font-size: 8px; }
  .hero-object { top: 143px; right: -99px; width: 315px; height: 315px; }
  .seed-tag { display: none; }
  .object-label { bottom: 10%; right: 18%; font-size: 12px; }
  .nav-shell { right: max(11px, env(safe-area-inset-right)); width: 76px; }
  .section-heading { font-size: 28px; }
  .interest { display: block; }
  .interest h3 { margin-top: 10px; }
  .interest p { margin-top: 0; }
  .slice-heading h2 { font-size: 28px; }
  .page-title { font-size: 43px; }
  .page-topline .back-link { font-size: 7px; gap: 6px; }
  .page-topline .eyebrow { font-size: 5.5px; }
  .inspiration-card { padding-left: 23px; padding-right: 23px; }
  .inspiration-title { font-size: 24px; }
  .inspiration-copy { font-size: 13px; }
}

@media (max-height: 730px) and (min-width: 761px) {
  .hero { padding-top: 4px; padding-bottom: 100px; }
  .hero-heading { font-size: clamp(95px, 10.5vw, 145px); margin-top: 22px; margin-bottom: 22px; }
  .hero-object { max-height: calc(100svh - 170px); }
}

@media (max-height: 730px) and (max-width: 760px) {
  .hero { padding-top: 13px; padding-bottom: 38px; }
  .hero-heading { font-size: clamp(85px, 23vw, 110px); margin-top: 22px; margin-bottom: 20px; }
  .hero-tagline { font-size: 19px; margin-top: 15px; margin-bottom: 10px; }
  .hero-description { margin-bottom: 17px; }
  .hero-object { top: 128px; width: 305px; height: 305px; right: -91px; }
  .seed-tag { display: none; }
  .nav-link, .nav-link__inner { min-height: 47px; }
}

@media (max-height: 730px) and (max-width: 380px) {
  .hero-object { top: 102px; right: -65px; width: 285px; height: 285px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root { --dock-space: 90px; --rail-clearance: var(--gutter); }
  .site-header { min-height: 58px; padding-top: 10px; padding-bottom: 8px; }
  .brand-sub { margin-top: 3px; }
  .brand-symbol { height: 28px; }
  .intro-replay { min-height: 31px; }
  .intro-replay .magnetic-inner { padding: 4px 11px; }
  .hero { min-height: calc(100svh - 58px); grid-template-columns: 1.1fr .9fr; padding-top: 7px; padding-bottom: 85px; }
  .hero-copy { pointer-events: auto; }
  .hero-heading { display: flex; gap: .14em; font-size: 69px; margin: 12px 0 13px; line-height: .9; }
  .hero-heading .second-line { margin-left: 0; }
  .hero-tagline { font-size: 15px; line-height: 1.5; margin: 0 0 8px; max-width: none; }
  .hero-tagline br { display: none; }
  .hero-description { font-size: 8px; margin-bottom: 10px; max-width: none; }
  .hero .pill { min-height: 32px; }
  .hero .magnetic-inner { padding: 5px 13px; font-size: 9px; }
  .hero-object { position: relative; width: 100%; height: auto; max-height: 230px; top: auto; right: auto; margin: 0; grid-column: 2; opacity: 1; }
  .seed-tag { display: none; }
  .object-label { display: none; }
  .nav-shell { left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); width: min(600px, calc(100% - 40px)); }
  .site-nav { grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 23px; gap: 2px; }
  .site-nav::before { border-radius: 21px; }
  .site-nav::after { border-radius: 19px; }
  .nav-link, .nav-link__inner { min-height: 40px; }
  .nav-link__inner { flex-direction: row; gap: 10px; }
  .nav-number { font-size: 9px; margin: 0; }
  .nav-label { font-size: 10px; }
  .nav-arrow { display: inline; font-size: 10px; }
  .section { padding-right: var(--gutter); }
  .site-footer { margin-right: var(--gutter); padding-bottom: 100px; flex-direction: row; }
  .page-main { padding-right: var(--gutter); }
  .page-intro { grid-template-columns: 1.2fr 1fr; gap: 25px; }
  .page-title { font-size: 57px; }
  .page-topline .eyebrow { font-size: 7px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 30px; }
  .slice-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .slice-title { font-size: 17px; }
  .slice-title em { font-size: 7px; }
  .inspiration-card { width: min(480px, calc(100% - 50px)); padding: 22px 35px 20px; }
  .inspiration-eyebrow { font-size: 7px; margin-bottom: 9px; }
  .inspiration-title { font-size: 24px; margin-bottom: 9px; }
  .inspiration-copy { font-size: 12px; line-height: 2; }
  .inspiration-signoff { font-size: 21px; margin: 13px 0; }
  #inspiration-close .magnetic-inner { font-size: 10px; padding-top: 6px; padding-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after { animation: none !important; }
  html:not([data-motion="full"]) .inspiration-dialog.is-celebrating .inspiration-wave { display: none; }
  html:not([data-motion="full"]) .inspiration-dialog.is-celebrating .inspiration-card, html:not([data-motion="full"]) .inspiration-dialog.is-celebrating .inspiration-copy span { opacity: 1; transform: none; filter: none; }
  html:not([data-motion="full"]).has-js .artwork .artwork-visual { clip-path: none; }
}

/* 网站内的明确选择优先于系统偏好；轻柔模式在任何系统设置下都能独立启用。 */
html[data-motion="gentle"] *, html[data-motion="gentle"] *::before, html[data-motion="gentle"] *::after { animation: none !important; }
html[data-motion="gentle"] .inspiration-dialog.is-celebrating .inspiration-wave { display: none; }
html[data-motion="gentle"] .inspiration-dialog.is-celebrating .inspiration-card, html[data-motion="gentle"] .inspiration-dialog.is-celebrating .inspiration-copy span { opacity: 1; transform: none; filter: none; }
html[data-motion="gentle"].has-js .artwork .artwork-visual { clip-path: none; }

@media (max-width: 760px) {
  .site-header { gap: 10px; }
  .header-note { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 170px; }
  .intro-replay .magnetic-inner { font-size: 9px; gap: 6px; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 380px) {
  .site-header { gap: 8px; }
  .header-note { max-width: 145px; gap: 5px; }
  .intro-replay { min-height: 33px; }
  .intro-replay .magnetic-inner { font-size: 8px; padding: 5px 8px; gap: 4px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .header-note { max-width: none; }
}


/* 字形精修：斜体墨迹有外伸量，绘制留白与布局留白分开，避免逐字渐变裁切。 */
.hero-heading { font-family: 'Cormorant Display', Georgia, var(--latin); font-synthesis: none; font-weight: 400; letter-spacing: -.035em; line-height: .94; }
.hero-heading .display-line { width: max-content; max-width: none; overflow: visible; padding: .12em .18em .12em .06em; margin: -.12em -.18em -.12em -.06em; }
.hero-heading .char { overflow: visible; }
.hero-heading .second-line { margin-left: .72em; }
.hero-heading .heading-dot { margin-left: .025em; }
.hero { overflow: clip; }

/* 双主题各自携带三块有限纹理；只做图层位移与透明度交接，不逐帧模糊。 */
.ambient-theme { position: absolute; inset: 0; pointer-events: none; --field-mint: #92d4b8ad; --field-blue: #9dc9e694; --field-violet: #b9acd57a; }
.ambient-theme[data-theme='projects'] { --field-mint: #a4cda3ad; --field-blue: #b6cfb37d; --field-violet: #d7c2927d; }
.ambient-theme[data-theme='artworks'] { --field-mint: #a9cddd8c; --field-blue: #9fc6e7a3; --field-violet: #b6a4d9a3; }
.ambient-theme[data-theme='future'] { --field-mint: #8bd2bfad; --field-blue: #90cbdca3; --field-violet: #adc1d87d; }
.ambient-theme[data-theme='notes'] { --field-mint: #bdcea785; --field-blue: #d6d3b169; --field-violet: #bbccaf69; }
.pearl-field { position: absolute; display: block; width: min(76vw, 960px); height: min(70svh, 680px); border-radius: 48% 52% 58% 42%; animation: pearl-field-drift 24s ease-in-out infinite alternate; animation-play-state: paused; }
.ambient-theme.is-active .pearl-field { animation-play-state: running; }
.pearl-field--mint { left: 45%; top: 1%; background: radial-gradient(ellipse, var(--field-mint), transparent 71%); }
.pearl-field--blue { left: -13%; top: 42%; width: min(73vw, 900px); height: min(67svh, 640px); background: radial-gradient(ellipse, var(--field-blue), transparent 72%); animation-duration: 28s; animation-direction: alternate-reverse; }
.pearl-field--violet { right: -8%; top: 42%; width: min(53vw, 640px); height: min(59svh, 570px); background: radial-gradient(ellipse, var(--field-violet), transparent 70%); animation-duration: 31s; }
@keyframes pearl-field-drift { from { translate: -9px -7px; } to { translate: 11px 9px; } }
@media (max-width: 760px) {
  .pearl-field { animation: none; translate: none; width: min(110vw, 560px); height: min(64svh, 520px); }
  .pearl-field--mint { left: 20%; top: 8%; }
  .pearl-field--blue { left: -44%; top: 41%; width: min(113vw, 560px); height: min(62svh, 510px); }
  .pearl-field--violet { right: -46%; top: 43%; width: min(97vw, 500px); height: min(55svh, 460px); opacity: .75; }
}
.scene-hint { position: absolute; width: 32vw; height: 35vh; top: 27%; right: 4%; border-radius: 50%; filter: blur(40px); opacity: 0; pointer-events: none; transition: background-color 350ms var(--ease), opacity 350ms var(--ease); }
.route-light { position: fixed; left: -5px; top: -5px; z-index: 18; width: 10px; height: 10px; border-radius: 50%; opacity: 0; pointer-events: none; box-shadow: 0 0 14px 5px #dcfff1b0, 0 0 35px 12px #a2d3cf50; }
.page-outgoing { position: fixed !important; z-index: 11; margin: 0 !important; pointer-events: none; overflow: clip; }
.is-changing-page .has-js [data-reveal], .has-js.is-changing-page [data-reveal] { transition-duration: 600ms; transition-delay: 60ms; }
.page-chinese-title::before { content: ''; display: inline-block; vertical-align: middle; width: 5px; height: 5px; margin-right: 12px; border-radius: 50%; background: #91bca7; box-shadow: 0 0 12px #b1e1cd; }
body[data-page='projects'] .page-chinese-title::before { background: #a8b480; }
body[data-page='artworks'] .page-chinese-title::before { background: #aba1ce; }
body[data-page='future'] .page-chinese-title::before { background: #7dbbc0; }
body[data-page='notes'] .page-chinese-title::before { background: #a5b48a; }
.project-details { position: relative; }
.project-details > div { position: relative; padding-top: 10px; }
.project-details > div::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #9bb38a; box-shadow: 0 0 12px #b8d1ab; }
.project-details > div::after { content: ''; position: absolute; left: 7px; right: -35px; top: 3px; height: 1px; background: linear-gradient(90deg, #94b69e80, #b9cfba30); transform-origin: left; }
.project-details > div:last-child::after { display: none; }
.project[open] .project-details > div { animation: process-light 650ms var(--ease) both; }
.project[open] .project-details > div:nth-child(2) { animation-delay: 100ms; }
.project[open] .project-details > div:nth-child(3) { animation-delay: 200ms; }
.artwork:hover .artwork-category, .artwork:focus-visible .artwork-category { color: #8077af; }
.artwork:hover .artwork-visual { box-shadow: 0 13px 40px #9792c730, inset 0 0 0 1px #ffffffc9; }
.artwork-visual, .artwork-category { transition: box-shadow 650ms var(--ease), color 450ms var(--ease); }
.letter::after { content: ''; position: absolute; right: 32px; top: -1px; width: 18px; height: 52px; background: linear-gradient(145deg, #a9bea6aa, #d7dfc8b3); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); opacity: .75; }
.letter-signature { position: relative; }
.letter-signature::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; margin: 14px 0 0 auto; background: #a6b999; box-shadow: 0 0 10px #c8d9ae; }
@keyframes process-light { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .hero-heading { line-height: .94; }
  .project-details > div::after { display: none; }
  .scene-hint { display: none; }
  .letter::after { right: 24px; width: 13px; height: 40px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero-heading .display-line { padding-block: .12em; margin-block: -.12em; }
  .hero-heading .second-line { margin-left: 0; }
}

.has-js [data-split]:not(.is-revealed) { visibility: hidden; }
.is-opening [data-reveal] { transition-duration: 600ms; transition-delay: 0ms; }
.is-changing-page .site-footer { visibility: hidden; }
.seed-core::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; background-color: var(--preview-accent, transparent); opacity: .26; transition: background-color 350ms var(--ease); pointer-events: none; }

/* 页面苏醒：仅真实元素参与；预置状态与控制器第一帧一致，字体和核心不会闪现换位。 */
.intro-status { display: none !important; }
html.is-opening { overflow: hidden; }
.intro-paused { animation-play-state: paused !important; }
.has-js .intro-owned[data-reveal] { opacity: 1; transform: none; transition: none; }
.has-js .intro-owned[data-split] { visibility: visible; }
html.intro-pending .site-header, html.intro-pending .site-nav,
html.intro-pending #main .page-topline, html.intro-pending #main .scroll-cue,
html.intro-pending #main .hero-side-note { opacity: 0; }
html.intro-pending .light-field { opacity: .62; }
html.intro-pending #main .hero-object[data-reveal] { opacity: 1; transform: none; transition: none; }
html.intro-pending #main .seed-art { opacity: .04; }
html.intro-pending #main .seed-membrane { opacity: .08; }
html.intro-pending #main .seed-core { opacity: .45; }
.site-nav { overflow: hidden; }
.nav-awakening-sheen { position: absolute; inset: 1px; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 25%, #ffffff08 36%, #ffffffe0 49%, #d8f5ea4d 53%, #ffffff05 64%, transparent 76%); }
.intro-replay.is-floating { position: fixed; z-index: 30; top: max(18px, env(safe-area-inset-top)); right: max(var(--gutter), env(safe-area-inset-right)); background: linear-gradient(145deg, #f6fff1d9, #dcebe3c9); box-shadow: inset 0 1px 1px #fff, 0 5px 20px #477c6321; }