/* NUO NOTES — isolated animated homepage demo */
:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-tint: #f4f7ff;
  --ink: #12161a;
  --ink-soft: #354047;
  --secondary: #66727a;
  --accent: #2457d6;
  --accent-soft: #e7edff;
  --divider: #dfe3e8;
  --night: #111820;
  --night-surface: #18232e;
  --night-text: #eaecea;
  --night-muted: #aab5bd;
  --shadow: 0 24px 80px rgba(26, 34, 42, .12);
  --header-h: 70px;
  --chapter-h: 0px;
  --max: 1440px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #0d1318;
  --surface: #141c22;
  --surface-tint: #17233a;
  --ink: #f1f3f2;
  --ink-soft: #d1d8da;
  --secondary: #a7b1b6;
  --accent: #9cbaff;
  --accent-soft: #1b2b4d;
  --divider: #344049;
  --night: #080d11;
  --night-surface: #111a21;
  --night-text: #f3f5f3;
  --night-muted: #b5c0c5;
  --shadow: 0 28px 90px rgba(0, 0, 0, .46);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--chapter-h) + 18px); }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
html.intro-pending,
html.intro-pending body { overflow: hidden; }
html.intro-pending .site-header,
html.intro-pending main,
html.intro-pending .demo-footer { visibility: hidden; }

.opening-intro { position: fixed; z-index: 200; inset: 0; overflow: hidden; min-height: 100svh; background: #76c9f3; color: #fff; opacity: 1; visibility: visible; transition: opacity .65s var(--ease), visibility 0s linear .65s; isolation: isolate; }
.opening-intro::before { position: absolute; z-index: 4; inset: 18px; content: ""; border: 1px solid rgba(255,255,255,.5); pointer-events: none; }
.opening-intro__video,
.opening-intro__poster { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: 50% 46%; transform: scale(1.055); }
.opening-intro__poster { z-index: 0; }
.opening-intro__video { z-index: 1; opacity: 0; transition: opacity .35s; }
.opening-intro__video.is-playing { opacity: 1; }
.opening-intro__veil { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(8,39,67,.03) 0%, rgba(8,39,67,.02) 48%, rgba(8,39,67,.44) 100%); }
.opening-intro__brand { position: absolute; z-index: 5; right: clamp(25px, 6vw, 90px); bottom: clamp(68px, 10vh, 120px); left: clamp(25px, 6vw, 90px); display: grid; gap: 10px; text-shadow: 0 4px 24px rgba(8,44,74,.28); }
.opening-intro__brand p { margin: 0; font: 9px "IBM Plex Mono", monospace; letter-spacing: .15em; }
.opening-intro__brand h1 { margin: 0; font: 600 clamp(38px, 6vw, 88px)/1.25 "Noto Serif SC", serif; letter-spacing: -.045em; }
.opening-intro__brand span { font: 400 clamp(14px, 1.6vw, 20px)/1.7 "LXGW WenKai", "Noto Serif SC", serif; }
.opening-intro__status { position: absolute; z-index: 5; top: clamp(34px, 6vw, 78px); left: clamp(36px, 7vw, 105px); display: flex; align-items: center; gap: 12px; font: 8px "IBM Plex Mono", monospace; letter-spacing: .14em; }
.opening-intro__status span { display: block; width: 48px; height: 1px; background: rgba(255,255,255,.85); transform-origin: left; animation: intro-line 1.4s var(--ease) both; }
.opening-intro__status b { font-weight: 400; }
.opening-intro__skip { position: absolute; z-index: 6; top: clamp(32px, 5vw, 65px); right: clamp(34px, 6vw, 88px); min-width: 72px; min-height: 44px; border: 1px solid rgba(255,255,255,.62); background: rgba(10,51,82,.12); color: #fff; cursor: pointer; backdrop-filter: blur(8px); font-size: 12px; transition: background .2s, transform .15s; }
.opening-intro__skip:hover { background: rgba(10,51,82,.3); }
.opening-intro__skip:active { transform: scale(.98); }
.opening-intro.is-leaving { opacity: 0; pointer-events: none; transition-duration: .48s; }
.opening-intro.is-finished { display: none; }
.opening-intro.is-leaving .opening-intro__video,
.opening-intro.is-leaving .opening-intro__poster { transform: scale(1.075); transition: transform .75s var(--ease); }
@keyframes intro-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img, video { max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 10px 14px; background: var(--ink); color: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.reading-progress { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; will-change: transform; }

.site-header { position: fixed; z-index: 60; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); padding: 0 clamp(20px, 4.4vw, 68px); border-bottom: 1px solid transparent; background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px) saturate(1.15); transition: border-color .2s, background .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color: var(--divider); background: rgba(255, 255, 255, .97); box-shadow: 0 8px 30px rgba(25, 43, 66, .055); }
[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 90%, transparent); }
[data-theme="dark"] .site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 97%, transparent); }
.brand { display: inline-flex; justify-self: start; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--ink); color: var(--accent); font: italic 600 24px/1 "Cormorant Garamond", serif; transform: rotate(-4deg); }
.brand > span:last-child { display: grid; gap: 1px; }
.brand strong { font-family: "Noto Serif SC", serif; font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.brand small { color: var(--secondary); font: 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .15em; }
.desktop-nav { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.desktop-nav a { position: relative; padding: 10px 2px; color: var(--ink-soft); font-size: 13px; text-decoration: none; transition: color .2s; }
.desktop-nav a::after { position: absolute; bottom: 4px; left: 0; width: 100%; height: 2px; content: ""; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.desktop-nav a.is-active { color: var(--accent); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-button, .menu-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.icon-button svg { position: absolute; width: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s, transform .3s var(--ease); }
.icon-button .moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
[data-theme="dark"] .icon-button .sun { opacity: 0; transform: rotate(40deg) scale(.6); }
[data-theme="dark"] .icon-button .moon { opacity: 1; transform: none; }
.menu-button { display: none; position: relative; }
.menu-button span { position: absolute; width: 20px; height: 1px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.menu-button span:nth-child(1) { transform: translateY(-6px); }
.menu-button span:nth-child(3) { transform: translateY(6px); }
.menu-button b { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
.mobile-nav { position: fixed; inset: var(--header-h) 0 0; padding: 40px 24px; background: var(--paper); }
.mobile-nav a { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 19px 4px; border-bottom: 1px solid var(--divider); font: 600 26px/1.2 "Noto Serif SC", serif; text-decoration: none; }
.mobile-nav a span { color: var(--accent); font: 10px "IBM Plex Mono", monospace; }

.hero { position: relative; width: min(100%, var(--max)); min-height: 100svh; margin: 0 auto; padding: calc(var(--header-h) + clamp(30px, 5vw, 72px)) clamp(20px, 5vw, 72px) 108px; background:
    linear-gradient(90deg, transparent 0 4.8%, color-mix(in srgb, var(--accent) 7%, transparent) 4.8% 4.9%, transparent 4.9% 100%),
    radial-gradient(circle at 17% 22%, color-mix(in srgb, var(--accent) 7%, transparent) 0 2px, transparent 2.5px);
  background-size: auto, 32px 32px;
  background-repeat: no-repeat;
}
.hero-grid { display: grid; grid-template-columns: minmax(390px, .83fr) minmax(540px, 1.17fr); align-items: center; gap: clamp(28px, 5vw, 76px); min-height: calc(100svh - var(--header-h) - 220px); }
.hero-copy { position: relative; z-index: 3; max-width: 590px; padding: 40px 0 72px; }
.identity { display: flex; align-items: center; gap: 10px; margin: 0 0 48px; color: var(--ink-soft); font-size: 13px; }
.identity-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent); }
.hero-kicker { margin-bottom: 17px; color: var(--secondary); font: 10px/1.5 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.hero h1 { position: relative; z-index: 2; margin: 0; font-family: "Noto Serif SC", serif; font-size: clamp(48px, 5.15vw, 78px); font-weight: 700; letter-spacing: -.065em; line-height: 1.18; text-wrap: balance; }
.hero h1 span, .hero h1 em { display: block; width: fit-content; padding: .04em .12em .12em; font-style: normal; }
.hero h1 span { background: var(--surface); box-shadow: 15px 0 var(--surface), -4px 0 var(--surface); transform: rotate(-.55deg); }
.hero h1 em { margin-top: -2px; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 83%, var(--ink)); box-shadow: 14px 0 var(--accent-soft), -3px 0 var(--accent-soft); transform: rotate(.5deg); }
.hero-lead { max-width: 510px; margin: 30px 0 0; color: var(--ink-soft); font: 400 17px/2 "LXGW WenKai", "Noto Serif SC", serif; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 31px; }
.paper-link { --link-bg: var(--surface); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 34px; min-height: 52px; padding: 13px 19px; background: var(--link-bg); filter: drop-shadow(2px 4px 0 color-mix(in srgb, var(--divider) 65%, transparent)); clip-path: polygon(0 2px, 9% 0, 22% 3px, 38% 0, 58% 2px, 77% 0, 100% 3px, calc(100% - 2px) 45%, 100% 100%, 79% calc(100% - 2px), 61% 100%, 39% calc(100% - 3px), 19% 100%, 0 calc(100% - 2px)); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transform: rotate(1deg); transition: transform .2s var(--ease), filter .2s; }
.paper-link--primary { --link-bg: var(--accent); color: #fff; transform: rotate(-1deg); filter: drop-shadow(2px 4px 0 color-mix(in srgb, var(--accent) 22%, transparent)); }
.paper-link:hover, .paper-link:focus-visible { transform: translateY(-3px) rotate(0); filter: drop-shadow(3px 7px 0 color-mix(in srgb, var(--divider) 70%, transparent)); }
.paper-link:active { transform: translateY(1px) rotate(0); }
.hero-stroke { display: block; width: 210px; margin: 15px 0 -30px 150px; fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; opacity: .65; }

.hero-visual { position: relative; z-index: 1; width: min(100%, 750px); margin: 0; justify-self: end; isolation: isolate; }
.hero-word { position: absolute; z-index: -1; top: -111px; left: -90px; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 65%, transparent); font: 600 clamp(140px, 17vw, 265px)/.8 "Cormorant Garamond", serif; letter-spacing: -.075em; opacity: .72; transform: rotate(-4deg); white-space: nowrap; }
.sky-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1.18; background: #9fd7f1; clip-path: polygon(3% 3%, 18% 1%, 34% 3%, 52% 1%, 71% 4%, 88% 1%, 98% 4%, 100% 18%, 97% 36%, 100% 55%, 98% 73%, 100% 95%, 82% 98%, 64% 96%, 45% 100%, 25% 97%, 4% 100%, 1% 78%, 3% 58%, 0 37%); box-shadow: var(--shadow); transform: rotate(1.5deg); }
.sky-frame::after { position: absolute; inset: 0; z-index: 4; content: ""; background: linear-gradient(180deg, transparent 60%, rgba(18, 53, 78, .2)); pointer-events: none; }
.sky-poster, .sky-video { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 69% 48%; transform: scale(1.09); }
.sky-video { z-index: 1; opacity: 0; transition: opacity .7s; }
.sky-video.is-playing { opacity: 1; }
.sky-poster { z-index: 0; }
.bridge-layer { position: absolute; z-index: 3; right: -15%; bottom: -17%; width: 125%; max-width: none; filter: drop-shadow(0 -20px 30px rgba(9, 45, 70, .17)); transform: translate3d(var(--bridge-x, 0), var(--bridge-y, 0), 0) scale(1.03); transition: transform .2s linear; }
.sky-glint { position: absolute; z-index: 2; inset: 0; background: radial-gradient(circle at var(--glint-x, 66%) var(--glint-y, 24%), rgba(255,255,255,.5), transparent 18%); mix-blend-mode: screen; }
.hero-visual figcaption { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 20px 7% 0 10%; }
.hero-visual figcaption span { grid-row: 1 / 3; color: var(--accent); font: 9px/1.7 "IBM Plex Mono", monospace; letter-spacing: .08em; writing-mode: vertical-rl; }
.hero-visual figcaption strong { font-family: "Noto Serif SC", serif; font-size: 17px; font-weight: 500; }
.visual-stamp { position: absolute; z-index: 7; top: 1%; right: -1%; padding: 11px 15px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--accent); font: 8px/1.65 "IBM Plex Mono", monospace; letter-spacing: .13em; transform: rotate(7deg); }
.hero-latest { position: absolute; right: clamp(20px, 5vw, 72px); bottom: 40px; left: clamp(20px, 5vw, 72px); display: grid; grid-template-columns: 160px 100px 1fr; align-items: center; gap: 18px; min-height: 58px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--divider); }
.latest-label, .hero-latest time { color: var(--secondary); font: 10px "IBM Plex Mono", monospace; letter-spacing: .06em; }
.latest-label { color: var(--accent); }
.hero-latest a { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-family: "Noto Serif SC", serif; font-size: 15px; font-weight: 600; text-decoration: none; }
.hero-latest a span { color: var(--accent); font-family: sans-serif; font-size: 12px; font-weight: 400; white-space: nowrap; transition: transform .2s; }
.hero-latest a:hover span { transform: translate(3px, -2px); }
.scroll-hint { position: absolute; bottom: 118px; left: 50%; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--secondary); font: 9px "IBM Plex Mono", monospace; letter-spacing: .08em; transform: translateX(-50%) rotate(-90deg); transform-origin: left center; }
.scroll-hint span { display: block; width: 34px; height: 1px; background: currentColor; animation: hint 2s ease-in-out infinite; transform-origin: left; }
@keyframes hint { 0%, 100% { transform: scaleX(.4); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

.js .hero [data-arrive] { opacity: 0; transform: translateY(14px); }
.js .hero.is-ready [data-arrive] { animation: arrive .7s var(--ease) both; }
.js .hero.is-ready [data-arrive]:nth-child(2) { animation-delay: .09s; }
.js .hero.is-ready .hero-latest { animation-delay: .2s; }
.js .hero.is-ready .sky-frame { animation: frame-open .72s var(--ease) both; }
@keyframes arrive { to { opacity: 1; transform: none; } }
@keyframes frame-open { from { clip-path: polygon(17% 3%, 28% 1%, 40% 3%, 52% 1%, 65% 4%, 75% 1%, 86% 4%, 88% 18%, 86% 36%, 88% 55%, 86% 73%, 88% 95%, 75% 98%, 63% 96%, 51% 100%, 39% 97%, 25% 100%, 16% 78%, 18% 58%, 15% 37%); transform: rotate(3deg) scale(.98); } }

.chapter-nav { position: sticky; z-index: 30; top: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--chapter-h); padding: 6px clamp(20px, 5vw, 72px); border-block: 1px solid var(--divider); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(14px); }
.chapter-caption { display: flex; align-items: center; gap: 10px; color: var(--secondary); font: 9px "IBM Plex Mono", monospace; letter-spacing: .13em; }
.chapter-caption i { position: relative; width: 20px; height: 15px; border: 1px solid currentColor; transform: rotate(-7deg); }
.chapter-caption i::before { position: absolute; top: -5px; left: -1px; width: 20px; height: 3px; content: ""; border: 1px solid currentColor; transform: rotate(-9deg); transform-origin: left; }
.chapter-links { display: flex; gap: 7px; }
.chapter-links a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-width: 80px; padding: 9px 11px; color: var(--secondary); font-size: 12px; text-decoration: none; transition: color .2s, background .2s; }
.chapter-links b { font: 9px "IBM Plex Mono", monospace; font-weight: 400; }
.chapter-links a.is-active { background: var(--accent-soft); color: var(--accent); }
.archive-link { justify-self: end; color: var(--ink-soft); font-size: 11px; text-decoration: none; }

.story { width: min(100%, var(--max)); margin: 0 auto; background: var(--paper); }
.chapter { --scene-size: min(42vw, 620px); position: relative; display: grid; grid-template-columns: minmax(420px, var(--scene-size)) minmax(0, 1fr); gap: clamp(36px, 5.3vw, 82px); min-height: 940px; padding: clamp(100px, 9vw, 140px) clamp(20px, 5vw, 72px); background: var(--paper); isolation: isolate; }
.chapter::after { position: absolute; z-index: -1; top: clamp(72px, 7vw, 112px); right: clamp(20px, 5vw, 72px); content: attr(data-index); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 16%, transparent); font: 600 clamp(128px, 15vw, 230px)/.8 "Cormorant Garamond", serif; letter-spacing: -.06em; opacity: .7; pointer-events: none; }
.chapter::before { position: absolute; top: 0; right: clamp(20px, 5vw, 72px); left: clamp(20px, 5vw, 72px); height: 1px; content: ""; background: var(--divider); transform: rotate(-.25deg); }
.chapter--right { grid-template-columns: minmax(0, 1fr) minmax(420px, var(--scene-size)); }
.chapter--right .scene { grid-column: 2; grid-row: 1; }
.chapter--right .chapter-copy { grid-column: 1; grid-row: 1; }
.scene { position: sticky; top: calc(var(--header-h) + var(--chapter-h) + max(24px, (100vh - var(--header-h) - var(--chapter-h) - var(--scene-size)) / 2)); align-self: start; min-width: 0; }
.chapter-copy { min-width: 0; padding-top: 12px; }
.section-heading { margin-bottom: 49px; }
.section-heading > p:first-child { margin: 0 0 20px; color: var(--accent); font: 10px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.section-heading h2 { margin: 0; font-family: "Noto Serif SC", serif; font-size: clamp(37px, 4vw, 58px); font-weight: 600; letter-spacing: -.05em; line-height: 1.45; text-wrap: balance; }
.section-rule { display: flex; align-items: center; width: min(100%, 520px); height: 17px; margin: 27px 0 18px; }
.section-rule::before, .section-rule::after { content: ""; height: 1px; background: var(--divider); }
.section-rule::before { width: 50px; background: var(--accent); }
.section-rule::after { flex: 1; }
.section-rule span { width: 5px; height: 5px; margin: 0 9px; border: 1px solid var(--accent); transform: rotate(45deg); }
.section-intro { max-width: 560px; margin: 0; color: var(--secondary); font: 400 17px/2 "LXGW WenKai", "Noto Serif SC", serif; }

.scene-frame { position: relative; overflow: hidden; aspect-ratio: 5 / 6; background: #172330; box-shadow: var(--shadow); clip-path: polygon(1% 1%, 17% 0, 36% 2%, 55% 0, 73% 2%, 99% 0, 100% 21%, 98% 42%, 100% 64%, 99% 100%, 76% 98%, 54% 100%, 31% 98%, 1% 100%, 2% 73%, 0 48%); transform: rotate(-1deg); }
.scene-frame__label { position: absolute; z-index: 4; top: 19px; left: 20px; display: grid; gap: 4px; padding: 9px 11px; border-left: 2px solid #fff; background: rgba(10,17,26,.34); color: #fff; backdrop-filter: blur(6px); }
.scene-frame__label span,.scene-frame__label b { font: 8px "IBM Plex Mono",monospace; font-weight: 400; letter-spacing: .12em; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .23s ease, transform .65s var(--ease); }
.scene-image.is-active { opacity: 1; transform: scale(1); }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(8, 18, 28, .66)); pointer-events: none; }
.scene-counter { position: absolute; right: 20px; bottom: 20px; left: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font: 9px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.scene-counter i { width: 48px; height: 1px; background: rgba(255,255,255,.55); }
.scene-caption { display: grid; gap: 7px; margin: 21px 6% 0; }
.scene-caption p { margin: 0; color: var(--accent); font: 9px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.scene-caption strong { font: 500 17px/1.6 "Noto Serif SC", serif; }
.scene-caption span { color: var(--secondary); font-size: 12px; line-height: 1.6; }

.featured-note { position: relative; margin-bottom: 35px; padding-top: 27px; border-block: 1px solid var(--ink); }
.featured-note__label { position: absolute; top: -10px; left: 0; margin: 0; padding-right: 12px; background: var(--paper); color: var(--accent); font: 9px "IBM Plex Mono",monospace; letter-spacing: .1em; }
.featured-note a { display: block; padding: 20px 0 31px; text-decoration: none; }
.featured-demo-link { display: inline-flex !important; width: auto; margin: -14px 0 26px; padding: 7px 0 !important; border-bottom: 1px solid var(--accent); color: var(--accent); font-size: 12px; }
.featured-index { position: absolute; top: 10px; right: 0; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 40%, transparent); font: 600 88px/1 "Cormorant Garamond", serif; opacity: .65; }
.note-meta { display: flex; flex-wrap: wrap; gap: 9px 15px; margin-bottom: 19px; color: var(--secondary); font: 9px "IBM Plex Mono", monospace; }
.note-meta span { padding-left: 15px; border-left: 1px solid var(--divider); }
.featured-note h3 { position: relative; z-index: 1; max-width: 620px; margin: 0; font: 600 clamp(27px, 2.75vw, 39px)/1.5 "Noto Serif SC", serif; letter-spacing: -.04em; text-wrap: pretty; }
.featured-note p { max-width: 610px; margin: 18px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.85; }
.read-link { display: inline-flex; gap: 14px; margin-top: 22px; color: var(--accent); font-size: 13px; }
.read-link i { font-style: normal; transition: transform .2s; }
.featured-note a:hover .read-link i { transform: translate(3px, -2px); }
.note-index { border-top: 1px solid var(--divider); }
.note-index a { position: relative; display: grid; grid-template-columns: 55px minmax(0, 1fr) 48px 20px; align-items: center; gap: 12px; min-height: 92px; padding-left: 0; border-bottom: 1px solid var(--divider); text-decoration: none; transition: color .2s, padding .25s var(--ease), background .2s; }
.note-index a::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ""; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ease); }
.note-index time { color: var(--secondary); font: 9px "IBM Plex Mono", monospace; }
.note-index strong { font: 500 17px/1.55 "Noto Serif SC", serif; }
.note-index span { color: var(--secondary); font-size: 11px; }
.note-index i { color: var(--accent); font-style: normal; }
.note-index a:hover, .note-index a:focus-visible { padding-inline: 12px 8px; background: linear-gradient(90deg,var(--accent-soft),transparent); color: var(--accent); }
.note-index a:hover::before,.note-index a:focus-visible::before { transform: scaleY(1); }
.text-arrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 64px; margin-top: 34px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.text-arrow span { color: var(--secondary); font-size: 11px; font-weight: 400; }
.text-arrow i { color: var(--accent); font-size: 20px; font-style: normal; transition: transform .2s; }
.text-arrow:hover i { transform: translateX(5px); }

.chapter--night { max-width: none; background: var(--paper); color: var(--ink); }
.chapter--night::before { background: var(--divider); }
.chapter--night .section-intro, .chapter--night .section-caption, .chapter--night .scene-caption span { color: var(--secondary); }
.chapter--night .section-rule::after { background: var(--divider); }
[data-theme="dark"] .hero {
  background:
    linear-gradient(90deg, transparent 0 4.8%, rgba(156,186,255,.12) 4.8% 4.9%, transparent 4.9% 100%),
    radial-gradient(circle at 17% 22%, rgba(156,186,255,.12) 0 2px, transparent 2.5px);
  background-size: auto, 32px 32px;
  background-repeat: no-repeat;
}
[data-theme="dark"] .hero h1 span { background: #141c22; box-shadow: 15px 0 #141c22, -4px 0 #141c22; }
[data-theme="dark"] .hero h1 em { background: #1b2b4d; box-shadow: 14px 0 #1b2b4d, -3px 0 #1b2b4d; color: #b5caff; }
[data-theme="dark"] .paper-link:not(.paper-link--primary) { --link-bg: #141c22; }
[data-theme="dark"] .visual-stamp { background: rgba(13,19,24,.72); }
[data-theme="dark"] .scene-frame,
[data-theme="dark"] .project-screen,
[data-theme="dark"] .journey-sky,
[data-theme="dark"] .contact-sky { box-shadow: 0 30px 90px rgba(0,0,0,.52); }
[data-theme="dark"] .project-screen { background: #26313a; }
[data-theme="dark"] .screen-bar { border-bottom-color: #46535e; color: #c5ced3; }
[data-theme="dark"] .screen-images { background: #dfe4e8; }
[data-theme="dark"] .timeline li::before { background: var(--paper); }
[data-theme="dark"] .project-entry.is-active { background: linear-gradient(90deg, rgba(156,186,255,.13), transparent); }
.project-screen { padding: 12px; background: #dfe4e8; box-shadow: 0 30px 90px rgba(0,0,0,.4); clip-path: polygon(1% 0, 25% 1%, 49% 0, 71% 1%, 99% 0, 100% 25%, 99% 49%, 100% 75%, 99% 100%, 71% 99%, 51% 100%, 24% 99%, 0 100%, 1% 72%, 0 48%, 1% 23%); transform: rotate(1deg); }
.screen-bar { display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 8px; border-bottom: 1px solid #c5ccd2; color: #48545e; }
.screen-bar span { width: 8px; height: 8px; border-radius: 50%; background: #9ca7af; }
.screen-bar span:first-child { background: #e66b62; }
.screen-bar span:nth-child(2) { background: #e5b14d; }
.screen-bar span:nth-child(3) { background: #60ad73; }
.screen-bar b { margin-left: auto; font: 8px "IBM Plex Mono", monospace; font-weight: 400; }
.screen-images { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #eef1f4; }
.screen-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transform: scale(1.018); transition: opacity .25s, transform .55s var(--ease); }
.screen-images img.is-active { opacity: 1; transform: scale(1); }
.chapter--night .scene-caption p { color: var(--accent); }
.project-entry { border-top: 1px solid var(--divider); }
.project-entry:last-of-type { border-bottom: 1px solid var(--divider); }
.project-entry a { display: grid; grid-template-columns: 58px 1fr 28px; gap: 20px; padding: 31px 0; text-decoration: none; }
.project-number { color: var(--accent); font: 600 34px "Cormorant Garamond", serif; }
.project-entry div > p:first-child { margin: 0 0 9px; color: var(--secondary); font: 9px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.project-entry h3 { margin: 0; font: 600 26px/1.5 "Noto Serif SC", serif; }
.project-entry div > p:not(:first-child) { margin: 14px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.8; }
.project-entry ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.project-entry li { padding: 5px 8px; border: 1px solid var(--divider); color: var(--secondary); font: 9px "IBM Plex Mono", monospace; }
.project-entry > a > i { color: var(--accent); font-size: 20px; font-style: normal; transition: transform .22s; }
.project-entry:hover a > i { transform: translate(3px, -3px); }
.project-entry.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 74%, transparent), transparent); }

.journey-sky { position: relative; overflow: hidden; min-height: 520px; background: #9bd3ee; clip-path: polygon(1% 1%, 20% 0, 39% 2%, 61% 0, 80% 2%, 100% 0, 99% 25%, 100% 50%, 99% 75%, 100% 100%, 76% 98%, 52% 100%, 26% 98%, 0 100%); box-shadow: var(--shadow); }
.journey-sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 36% 76%; filter: saturate(.62) contrast(.92) brightness(1.08); transform: scale(1.18); }
.journey-sky::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(242,240,233,.04), rgba(17,29,39,.62)); }
.horizon-line { position: absolute; z-index: 2; right: 9%; bottom: 27%; left: 9%; height: 1px; background: rgba(255,255,255,.7); }
.horizon-line::before { position: absolute; left: var(--year-pos, 0%); width: 42px; height: 5px; content: ""; background: #fff; transform: translateY(-2px); transition: left .45s var(--ease); }
.journey-sky strong { position: absolute; z-index: 2; right: 8%; bottom: 8%; color: rgba(255,255,255,.93); font: 600 clamp(85px, 11vw, 160px)/1 "Cormorant Garamond", serif; letter-spacing: -.045em; }
.journey-sky p { position: absolute; z-index: 2; bottom: 30%; left: 9%; margin: 0; color: #fff; font: 9px "IBM Plex Mono", monospace; letter-spacing: .13em; }
.ability-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 22px; border-top: 1px solid var(--ink); border-left: 1px solid var(--divider); }
.ability-list span { padding: 14px 12px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); font-size: 12px; }
.timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.timeline li { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 27px; padding: 32px 0 36px; border-bottom: 1px solid var(--divider); }
.timeline time { color: var(--accent); font: 10px "IBM Plex Mono", monospace; }
.timeline h3 { margin: 0; font: 600 22px/1.5 "Noto Serif SC", serif; }
.timeline p { margin: 12px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.8; }
.timeline li::before { position: absolute; top: 37px; left: 64px; width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--paper); content: ""; transition: background .2s, transform .2s; }
.timeline li.is-active::before { background: var(--accent); transform: scale(1.45); }

.chapter--contact { min-height: 900px; }
.contact-sky { position: relative; overflow: hidden; aspect-ratio: 1; background: #91cfea; border-radius: 50%; box-shadow: var(--shadow); }
.contact-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 79% 48%; transform: scale(1.2); filter: saturate(.82) brightness(.92); transition: transform 1.2s var(--ease), filter 1.2s; }
.contact-sky::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at center, transparent 40%, rgba(15, 50, 75, .18)); }
.contact-word { position: absolute; z-index: 2; top: 44%; left: 50%; color: rgba(255,255,255,.9); font: 600 clamp(95px, 12vw, 180px)/1 "Cormorant Garamond", serif; letter-spacing: -.055em; transform: translate(-50%, -50%); }
.easter-egg { position: absolute; z-index: 4; bottom: 10%; left: 50%; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.65); background: rgba(15,54,80,.22); color: #fff; font-size: 10px; cursor: pointer; backdrop-filter: blur(8px); transform: translateX(-50%); }
.easter-egg span { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.contact-sky.is-awake img { transform: scale(1.25) translate(-1%, -1%); filter: saturate(1.08) brightness(1.02); }
.contact-sky.is-awake .contact-word { animation: word-glint 1.1s var(--ease); }
@keyframes word-glint { 50% { letter-spacing: -.02em; text-shadow: 0 0 30px #fff; } }
.contact-lead { max-width: 590px; color: var(--secondary); font-size: 17px; line-height: 2; }
.email-link { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 17px; margin-top: 55px; padding: 22px 0; border-block: 1px solid var(--ink); text-decoration: none; }
.email-link span { color: var(--accent); font: 9px "IBM Plex Mono", monospace; }
.email-link strong { overflow-wrap: anywhere; font: 600 clamp(24px, 2.8vw, 38px) "Cormorant Garamond", serif; }
.email-link i { color: var(--accent); font-size: 20px; font-style: normal; transition: transform .2s; }
.email-link:hover i { transform: translate(3px, -3px); }
.contact-copy .social-link { margin-top: 0; border-top: 0; }
.social-link strong { font: 500 clamp(19px, 1.8vw, 24px)/1.6 "Noto Serif SC", serif; }
.footer-links { display: flex; flex-wrap: wrap; gap: 19px 28px; margin-top: 28px; }
.footer-links a { color: var(--ink-soft); font-size: 12px; text-underline-offset: 5px; }
.contact-copy blockquote { margin: 85px 0 0; padding: 0; border: 0; font: 500 clamp(30px, 3.3vw, 49px)/1.65 "Noto Serif SC", serif; letter-spacing: -.04em; }
.contact-copy blockquote::before { display: block; margin-bottom: 14px; color: var(--accent); content: "NUO NOTES /"; font: 9px "IBM Plex Mono", monospace; letter-spacing: .11em; }

.js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity .65s var(--ease), transform .65s var(--ease); }
.demo-footer { display: flex; justify-content: space-between; gap: 24px; padding: 42px clamp(20px, 5vw, 72px); border-top: 1px solid var(--divider); background: var(--ink); color: var(--paper); }
.demo-footer div { display: grid; gap: 7px; }
.demo-footer strong { font: 600 27px "Cormorant Garamond", serif; letter-spacing: .04em; }
.demo-footer span, .demo-footer p { margin: 0; color: color-mix(in srgb, var(--paper) 58%, transparent); font: 9px/1.6 "IBM Plex Mono", monospace; }

@media (min-width: 860px) and (max-height: 780px) {
  .hero { min-height: 650px; height: 100svh; padding-top: calc(var(--header-h) + 14px); padding-bottom: 66px; }
  .hero-grid { min-height: 0; height: calc(100svh - var(--header-h) - 82px); }
  .hero-copy { padding-block: 6px 24px; }
  .identity { margin-bottom: 18px; }
  .hero-kicker { margin-bottom: 9px; }
  .hero h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.13; }
  .hero-lead { max-width: 470px; margin-top: 15px; font-size: 14px; line-height: 1.7; }
  .hero-actions { margin-top: 17px; }
  .paper-link { min-height: 46px; padding-block: 10px; }
  .hero-stroke { width: 145px; height: 30px; margin-top: 7px; margin-left: 105px; }
  .hero-visual { width: min(100%, 500px); }
  .hero-word { top: -58px; font-size: clamp(105px, 12vw, 175px); }
  .hero-visual figcaption { margin-top: 8px; }
  .visual-stamp { padding: 8px 11px; }
  .hero-latest { bottom: 18px; min-height: 48px; }
  .hero-latest a { padding-block: 12px; }
  .scroll-hint { display: none; }
}

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: minmax(350px, .9fr) minmax(430px, 1.1fr); }
  .hero-word { left: -45px; }
  .chapter { --scene-size: min(43vw, 520px); grid-template-columns: minmax(360px, var(--scene-size)) minmax(0, 1fr); gap: 42px; }
  .chapter--right { grid-template-columns: minmax(0, 1fr) minmax(360px, var(--scene-size)); }
}

@media (max-width: 859px) {
  :root { --header-h: 64px; --chapter-h: 0px; }
  .opening-intro::before { inset: 10px; }
  .opening-intro__video,
  .opening-intro__poster { object-position: 60% 48%; }
  .opening-intro__brand { right: 22px; bottom: max(56px, calc(env(safe-area-inset-bottom) + 38px)); left: 22px; }
  .opening-intro__brand h1 { font-size: clamp(32px, 10vw, 48px); }
  .opening-intro__status { top: 25px; left: 22px; }
  .opening-intro__skip { top: 18px; right: 18px; }
  .site-header { grid-template-columns: 1fr auto; padding-inline: 18px; }
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .brand strong { font-size: 14px; }
  .hero { min-height: auto; padding: calc(var(--header-h) + 42px) 20px 112px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .hero-copy { max-width: none; padding: 0; }
  .identity { margin-bottom: 28px; font-size: 12px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 57px); }
  .hero-lead { max-width: 620px; font-size: 15px; }
  .hero-stroke { margin-left: 95px; }
  .hero-visual { width: min(100%, 640px); justify-self: center; margin-top: 24px; }
  .hero-word { top: -43px; left: -3px; font-size: clamp(78px, 23vw, 160px); }
  .sky-frame { aspect-ratio: 1.42; }
  .hero-latest { bottom: 25px; grid-template-columns: 120px 1fr; gap: 6px 18px; }
  .hero-latest time { grid-column: 1; }
  .hero-latest a { grid-column: 2; grid-row: 1 / 3; font-size: 13px; }
  .scroll-hint { display: none; }
  .chapter-nav { grid-template-columns: 1fr auto; padding-inline: 12px; }
  .chapter-caption, .archive-link { display: none; }
  .chapter-links { justify-content: space-between; width: 100%; }
  .chapter-links a { min-width: 0; padding: 8px; }
  .chapter-links b { display: none; }
  .chapter { display: flex; flex-direction: column; min-height: 0; gap: 52px; padding: 90px 20px; }
  .chapter--right .scene, .chapter--right .chapter-copy { grid-column: auto; grid-row: auto; }
  .chapter-copy { order: 1; }
  .scene { position: relative; top: auto; order: 2; width: min(100%, 620px); margin-inline: auto; }
  .scene--articles { display: none; }
  .section-heading h2 { font-size: clamp(33px, 7.5vw, 46px); }
  .section-intro { font-size: 16px; }
  .featured-index { font-size: 68px; }
  .note-index a { min-height: 78px; }
  .project-entry h3 { font-size: 23px; }
  .chapter--night .scene { margin-top: 8px; }
  .journey-sky { min-height: 420px; }
  .chapter--contact .scene { order: 1; }
  .chapter--contact .chapter-copy { order: 2; }
}

@media (max-width: 560px) {
  .brand small { display: none; }
  .brand-mark { width: 28px; height: 28px; font-size: 20px; }
  .hero { padding-inline: 17px; }
  .hero-kicker { font-size: 8px; }
  .hero h1 { font-size: clamp(34px, 11vw, 48px); letter-spacing: -.055em; }
  .hero-lead { line-height: 1.85; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .paper-link { gap: 10px; min-width: 0; padding-inline: 13px; font-size: 12px; }
  .hero-stroke { width: 155px; margin-left: 80px; }
  .hero-visual { margin-top: 14px; }
  .sky-frame { aspect-ratio: 1.18; }
  .sky-poster, .sky-video { object-position: 76% 48%; transform: scale(1.13); }
  .bridge-layer { right: -30%; bottom: -8%; width: 155%; }
  .visual-stamp { display: none; }
  .hero-visual figcaption { margin-inline: 2% 4%; }
  .hero-latest { grid-template-columns: 1fr; align-items: start; padding: 12px 0; }
  .hero-latest time { grid-column: 1; }
  .hero-latest a { grid-column: 1; grid-row: auto; padding: 0; line-height: 1.6; }
  .hero-latest a span { display: none; }
  .chapter-links a { font-size: 11px; }
  .chapter { padding-inline: 17px; }
  .section-heading h2 { font-size: 31px; line-height: 1.5; }
  .featured-note h3 { font-size: 23px; }
  .note-index a { grid-template-columns: 46px 1fr 20px; gap: 8px; }
  .note-index span { display: none; }
  .project-entry a { grid-template-columns: 38px 1fr 20px; gap: 12px; }
  .project-number { font-size: 24px; }
  .project-entry h3 { font-size: 20px; }
  .timeline li { grid-template-columns: 62px 1fr; gap: 18px; }
  .timeline li::before { left: 52px; }
  .journey-sky { min-height: 340px; }
  .journey-sky strong { font-size: 75px; }
  .email-link { grid-template-columns: 1fr auto; }
  .email-link span { grid-column: 1 / 3; }
  .email-link strong { font-size: 22px; }
  .demo-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .opening-intro__video { display: none; }
  .opening-intro { transition-duration: .18s; }
  .opening-intro.is-leaving .opening-intro__poster { transform: none; }
  .js .hero [data-arrive], .js [data-reveal] { opacity: 1; transform: none; }
  .sky-video { display: none; }
}