/* 0813 拆分：这份是 css/option-c1-lumi.css 的逐字复制，现在**只给 option-c2-creator.html 用**。
   option-c1-lumi.html 和 option-c1-lumi-ears.html 继续用 css/option-c1-lumi.css。
   所以 C2 这边随便改，C1 那两版不会受影响；文件里旧注释写的"C1/C2 共用"已经作废。 */
/* ============================================================
   OPTION C — novra design language, Narya content
   White ground, vw scale, 1vw radii, corner tags,
   sticky product slider, black showcase card, avatar wall.
   All classes prefixed nc1- so Option A styles are untouched.

   字体：主字体 Proxima Nova（本机已装全套字重）。
   想一键切回 Inter 方案：只改下面 --nc1-font 一行，换成
   --nc1-font: "Inter", -apple-system, sans-serif;
   ============================================================ */

:root {
  --nc1-white: #fff;
  --nc1-black: #000;
  --nc1-almost-black: #030306;
  --nc1-dark-grey: #5d5d5d;
  --nc1-grey: #9c9c9c;
  --nc1-light-grey: #d1d1d1;
  --nc1-smoke: #f5f5f5;
  --nc1-font: "Proxima Nova", "proxima-nova", "Inter", -apple-system, sans-serif;
  --nc1-pad: 2vw;
  --nc1-radius: 1vw;
  --nc1-radius-lg: 1.5vw;
  --nc1-h1: 4.68vw;
  --nc1-xl: 7vw;
  --nc1-xxl: 10vw;
  --nc1-base: 1.11vw;
  --nc1-base-lh: 1.78vw;
  --nc1-s: 1.2vw;
  --nc1-xs: 1vw;
  --nc1-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.nc1 {
  margin: 0;
  background: var(--nc1-white);
  color: var(--nc1-black);
  font-family: var(--nc1-font);
  font-size: var(--nc1-base);
  line-height: var(--nc1-base-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nc1 ::selection { background: var(--nc1-black); color: var(--nc1-white); }
body.nc1 a { text-decoration: none; }
a { color: inherit; }
body.nc1.nc1-lock { overflow: hidden; }

/* ---------- preloader bits ---------- */
.nc1-preloader { position: fixed; inset: 0; z-index: 300; display: flex; pointer-events: none; }
.nc1-preloader i {
  flex: 1; background: var(--nc1-almost-black);
  transform: scaleY(1); transform-origin: top;
  transition: transform 0.8s var(--nc1-ease);
}
body.nc1.is-ready .nc1-preloader i { transform: scaleY(0); }
body.nc1.is-ready .nc1-preloader i:nth-child(1) { transition-delay: 0s; }
body.nc1.is-ready .nc1-preloader i:nth-child(2) { transition-delay: 0.05s; }
body.nc1.is-ready .nc1-preloader i:nth-child(3) { transition-delay: 0.1s; }
body.nc1.is-ready .nc1-preloader i:nth-child(4) { transition-delay: 0.15s; }
body.nc1.is-ready .nc1-preloader i:nth-child(5) { transition-delay: 0.2s; }
body.nc1.is-ready .nc1-preloader i:nth-child(6) { transition-delay: 0.25s; }
body.nc1.is-ready .nc1-preloader i:nth-child(7) { transition-delay: 0.3s; }
body.nc1.is-ready .nc1-preloader i:nth-child(8) { transition-delay: 0.35s; }

/* Narya head boot, ported from Option A's loader, plays before the bars */
.nc1-boot {
  position: fixed; inset: 0; z-index: 320; background: var(--nc1-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.nc1-boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.nc1-boot img { width: 40px; animation: nc1-boot-pulse 1.2s ease infinite; }
@keyframes nc1-boot-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } }
.nc1-boot-bar { width: 100px; height: 2px; background: var(--nc1-light-grey); border-radius: 2px; overflow: hidden; }
.nc1-boot-bar i { display: block; height: 100%; width: 0; background: var(--nc1-almost-black); border-radius: 2px; animation: nc1-boot-fill 1.2s var(--nc1-ease) forwards; }
@keyframes nc1-boot-fill { to { width: 100%; } }

/* ---------- corner tags (took over from the old cursor labels) ----------
   flat white pills parked in a corner of the card; SOON sits there quietly,
   TALK fades in on hover in idle mode; nothing follows the mouse or inverts */
.nc1-wtile[data-tag]::after {
  content: attr(data-tag);
  position: absolute; top: 1.1vw; right: 1.2vw; z-index: 5;
  background: var(--nc1-white); color: var(--nc1-black);
  font-size: max(10px, 0.7vw); font-weight: 600; letter-spacing: 0.12em;
  line-height: 1; padding: 0.35vw 0.9vw; border-radius: 100vw;
  pointer-events: none;
}

/* ---------- nav ---------- */
.nc1-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1vw var(--nc1-pad);
  mix-blend-mode: difference; color: #fff;
}
.nc1-nav-logo { display: flex; align-items: center; gap: 0.5vw; font-weight: 600; font-size: 1.2vw; }
.nc1-nav-logo img { width: 1.9vw; height: 1.9vw; filter: invert(1); }
.nc1-nav-links { display: flex; gap: 2.2vw; font-size: var(--nc1-xs); }
.nc1-nav-links a { opacity: 0.75; transition: opacity 0.2s ease; }
.nc1-nav-links a:hover { opacity: 1; }
.nc1-nav-cta {
  font-size: var(--nc1-xs); border: 1px solid #fff; border-radius: 100vw;
  padding: 0.45vw 1.3vw; transition: background 0.2s ease, color 0.2s ease;
}
.nc1-nav-cta:hover { background: #fff; color: #000; }

/* ---------- hero ---------- */
.nc1-hero {
  min-height: 100vh; padding: 0 var(--nc1-pad);
  display: flex; flex-direction: column; justify-content: center; position: relative;
}
.nc1-hero-title {
  margin: 0; font-weight: 500; letter-spacing: -0.05em;
  font-size: var(--nc1-xxl); line-height: 0.95;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5vw;
}
.nc1-hero-title .nc1-line { display: inline-block; overflow: hidden; }
.nc1-hero-title .nc1-line > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--nc1-ease) 0.45s; }
.nc1-hero-title .nc1-line:last-child > span { transition-delay: 0.55s; }
body.nc1.is-ready .nc1-hero-title .nc1-line > span { transform: translateY(0); }
.nc1-hero-chip {
  position: relative; width: 16vw; height: 7.6vw; flex: none;
  background: var(--nc1-almost-black); border-radius: 100vw; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  transform: scaleX(0); transition: transform 0.9s var(--nc1-ease) 0.7s;
}
body.nc1.is-ready .nc1-hero-chip { transform: scaleX(1); }
.nc1-hero-chip img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
}
/* hidden at rest so Lumi keeps her face, floats up on hover */
.nc1-hero-chip-cta {
  position: absolute; left: 50%; bottom: 0.7vw; transform: translateX(-50%) translateY(0.5vw);
  background: var(--nc1-white); color: var(--nc1-black);
  font-size: 0.75vw; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; border-radius: 100vw; padding: 0.5vw 1vw;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.3s var(--nc1-ease);
}
.nc1-hero-chip:hover .nc1-hero-chip-cta { opacity: 1; transform: translateX(-50%) translateY(0); }
.nc1-hero-bottom {
  position: absolute; left: var(--nc1-pad); right: var(--nc1-pad); bottom: 3vw;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.nc1-hero-tag { max-width: 30vw; margin: 0; color: var(--nc1-dark-grey); font-size: var(--nc1-s); line-height: 1.5; }
.nc1-hero-actions { display: flex; gap: 0.8vw; }
.nc1-btn {
  font-family: var(--nc1-font); font-size: var(--nc1-xs); font-weight: 500;
  border-radius: 100vw; padding: 0.75vw 1.8vw; cursor: pointer;
  border: 1px solid var(--nc1-black); background: var(--nc1-black); color: var(--nc1-white);
  display: inline-block; transition: transform 0.25s var(--nc1-ease), background 0.2s ease, color 0.2s ease;
}
.nc1-btn:hover { transform: translateY(-2px); }
.nc1-btn.ghost { background: transparent; color: var(--nc1-black); }
.nc1-btn.ghost:hover { background: var(--nc1-black); color: var(--nc1-white); }

/* ---------- backed by: single sponsor marquee, drag + inertia ---------- */
.nc1-backed { padding: 2.2vw 0; border-top: 1px solid var(--nc1-light-grey); border-bottom: 1px solid var(--nc1-light-grey); overflow: hidden; }
.nc1-backed-track { display: flex; gap: 3vw; width: max-content; padding-right: 3vw; will-change: transform; }
.nc1-backed-unit { display: flex; align-items: center; gap: 1.4vw; flex: none; }
.nc1-backed-unit span { font-size: var(--nc1-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--nc1-grey); white-space: nowrap; user-select: none; }
.nc1-backed-unit b { color: var(--nc1-light-grey); font-weight: 400; font-size: 0.8vw; margin-left: 1.6vw; user-select: none; }
.nc1-backed img { height: 1.5vw; display: block; user-select: none; -webkit-user-drag: none; }

/* ---------- eyebrow ---------- */
.nc1-eyebrow { display: flex; align-items: center; gap: 0.7vw; font-size: var(--nc1-xs); color: var(--nc1-dark-grey); }
.nc1-eyebrow i { width: 0.55vw; height: 0.55vw; background: var(--nc1-black); flex: none; }

/* ---------- about ---------- */
.nc1-about { padding: 10vw var(--nc1-pad); display: grid; grid-template-columns: 1.1fr 1fr; gap: 4vw; align-items: start; }
.nc1-about h2 { margin: 1.5vw 0 2vw; font-size: 3.4vw; line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; }
.nc1-about-card {
  background: var(--nc1-smoke); border-radius: var(--nc1-radius);
  padding: 2.5vw; display: flex; flex-direction: column; gap: 1.2vw;
}
.nc1-about-card p { margin: 0; color: var(--nc1-dark-grey); }
.nc1-about-card .row { display: flex; justify-content: space-between; border-top: 1px solid var(--nc1-light-grey); padding-top: 1vw; font-size: var(--nc1-xs); }
.nc1-about-card .row b { font-weight: 500; }

/* ---------- product slider (tracks) ---------- */
.nc1-tracks { position: relative; height: 420vh; }
.nc1-tracks-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding: 0 var(--nc1-pad); box-sizing: border-box; }
.nc1-tracks-eyebrow { position: absolute; top: 4.2vw; left: var(--nc1-pad); }
.nc1-tracks-num { width: 20vw; align-self: stretch; padding-top: 8vw; font-weight: 600; }
.nc1-num-roll { height: 6vw; overflow: hidden; font-size: 6vw; line-height: 1; letter-spacing: -0.03em; }
.nc1-num-roll-strip { display: flex; flex-direction: column; transition: transform 0.8s var(--nc1-ease); }
.nc1-num-roll-strip span { height: 6vw; }
.nc1-tracks-num .nc1-of { display: block; margin-top: 0.6vw; color: var(--nc1-grey); font-size: 1.4vw; font-weight: 500; }
.nc1-tracks-center { flex: 1; display: flex; justify-content: center; align-items: center; perspective: 1600px; position: relative; height: 100%; }
.nc1-tcard {
  position: absolute; width: 36vw; height: 26vw;
  background: var(--nc1-almost-black); color: var(--nc1-white);
  border-radius: var(--nc1-radius);
  padding: 2.4vw; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(120%) rotateX(-12deg); opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 0.9s var(--nc1-ease), opacity 0.5s ease;
}
.nc1-tcard.is-active { transform: translateY(0) rotateX(0); opacity: 1; }
.nc1-tcard.is-passed { transform: translateY(-120%) rotateX(12deg); opacity: 0; }
.nc1-tcard-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--nc1-xs); color: var(--nc1-grey); }
.nc1-tcard h3 { margin: 0; font-size: 2.6vw; font-weight: 500; letter-spacing: -0.02em; }
.nc1-tcard p { margin: 0.8vw 0 0; color: var(--nc1-light-grey); font-size: var(--nc1-xs); line-height: 1.55; max-width: 28vw; }
.nc1-tcard-foot { display: flex; justify-content: space-between; align-items: center; }
.nc1-tcard-foot a {
  font-size: var(--nc1-xs); border: 1px solid rgba(255,255,255,0.4); border-radius: 100vw; padding: 0.5vw 1.3vw;
  transition: background 0.2s ease, color 0.2s ease;
}
.nc1-tcard-foot a:hover { background: var(--nc1-white); color: var(--nc1-black); }
.nc1-tcard-foot .nc1-tcard-meta { font-size: var(--nc1-xs); color: var(--nc1-grey); }
.nc1-tracks-list { width: 20vw; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 0.6vw; padding-bottom: 8vw; }
.nc1-tracks-list button {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: right;
  font-family: var(--nc1-font); font-size: 1.7vw; font-weight: 500; letter-spacing: -0.02em;
  color: var(--nc1-light-grey); transition: color 0.3s ease, transform 0.3s var(--nc1-ease);
}
.nc1-tracks-list button:hover { transform: translateX(-0.4vw); }
.nc1-tracks-list button.is-on { color: var(--nc1-black); }

/* ---------- avatar showcase (filler) ---------- */
/* status lives with the titles now, keeps the card top clear of the fixed nav */
@keyframes nc1-blink { to { visibility: hidden; } }
/* two ways in: personal chat or live room */

/* live room state: Lumi shifts left, chat column slides in */
.nc1-live-badge {
  background: var(--nc1-almost-black); color: var(--nc1-white);
  font-size: 0.75vw; font-weight: 600; letter-spacing: 0.16em;
  padding: 0.3vw 0.8vw; border-radius: 100vw;
  display: flex; align-items: center; gap: 0.45vw;
}
.nc1-live-badge i { width: 0.4vw; height: 0.4vw; background: var(--nc1-white); animation: nc1-blink 1.2s steps(2, start) infinite; }
.nc1-live-count { flex: 1; color: var(--nc1-grey); font-size: 0.85vw; font-variant-numeric: tabular-nums; }
.nc1-live-leave {
  background: none; border: 1px solid var(--nc1-light-grey); border-radius: 100vw;
  font-family: var(--nc1-font); font-size: 0.72vw; font-weight: 600; letter-spacing: 0.12em;
  color: var(--nc1-dark-grey); padding: 0.32vw 0.9vw; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nc1-live-leave:hover { background: var(--nc1-black); color: var(--nc1-white); border-color: var(--nc1-black); }
.nc1-chat-line { margin: 0; }
.nc1-chat-line b {
  color: var(--nc1-grey); font-weight: 600; font-size: 0.72vw;
  letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.4vw;
}
.nc1-chat-line.you b { color: var(--nc1-black); }
.nc1-chat-line.lumi {
  background: var(--nc1-almost-black); color: var(--nc1-white);
  padding: 0.6vw 0.9vw; border-radius: 0.6vw; align-self: flex-start;
}
.nc1-chat-line.lumi b { color: var(--nc1-light-grey); }

/* personal chat: small history panel, deliberately smaller than the live room */

/* ---------- avatar wall ---------- */
.nc1-wtile {
  position: relative; background: var(--nc1-smoke); border-radius: var(--nc1-radius);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.nc1-wtile.t1 { height: 34vw; }
.nc1-wtile.t2 { height: 26vw; }
.nc1-wtile.t3 { height: 30vw; }
/* 角色图：contain 保证全身可见，图的实底 #f5f5f5 和 tile 底色无缝；
   场景横图（is-scene，约 4:3）和宽 tile 比例接近，用 cover */
.nc1-wtile-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%;
  transition: transform 0.8s var(--nc1-ease);
  user-select: none; -webkit-user-drag: none;
}
.nc1-wtile-img.is-scene { object-fit: cover; object-position: 50% 40%; }
.nc1-wtile:hover .nc1-wtile-img { transform: scale(1.04); }
.nc1-wtile .nc1-wtile-cap {
  position: absolute; left: 1.2vw; bottom: 1.1vw; color: var(--nc1-black);
  font-size: var(--nc1-xs); font-weight: 500; letter-spacing: 0;
  background: var(--nc1-white); border-radius: 100vw; padding: 0.35vw 0.95vw;
}

/* ---------- split sections: API for dev, Monitoring, Studio ---------- */
.nc1-sec { padding: 8vw var(--nc1-pad); display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; }
.nc1-sec h2 { margin: 1.2vw 0 1.4vw; font-size: var(--nc1-h1); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
.nc1-sec-copy p { margin: 0 0 2vw; color: var(--nc1-dark-grey); max-width: 32vw; font-size: var(--nc1-base); line-height: var(--nc1-base-lh); }
.nc1-sec-btn { margin-top: 1.6vw; }
.nc1-api-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1vw;
  border-top: 1px solid var(--nc1-light-grey); padding: 1vw 0;
}
.nc1-api-row b { font-size: 1.25vw; font-weight: 500; letter-spacing: -0.01em; }
.nc1-api-row span { color: var(--nc1-grey); font-size: var(--nc1-xs); text-align: right; }

/* ---------- for developers: two separate products ---------- */
.nc1-dev { padding: 8vw var(--nc1-pad); }
.nc1-dev-head { max-width: 44vw; margin-bottom: 3.5vw; }
.nc1-dev-head h2 { margin: 1.2vw 0 1.4vw; font-size: var(--nc1-h1); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
.nc1-dev-head p { margin: 0; color: var(--nc1-dark-grey); max-width: 36vw; font-size: var(--nc1-base); line-height: var(--nc1-base-lh); }
.nc1-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; align-items: stretch; }
.nc1-dev-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--nc1-light-grey); border-radius: var(--nc1-radius-lg);
  padding: 2.2vw 2.4vw 2.4vw;
}
.nc1-dev-tag {
  display: flex; justify-content: space-between;
  color: var(--nc1-grey); font-size: 0.78vw; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 1.8vw;
}
/* service pair on shared row lines (Larissa: 两张图一样高, 下面也一样高).
   Both cards carry the same 9 children (tag, h3, sub, visual, intro,
   3 point rows, button), subgrid pins every horizontal seam. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .nc1-svc .nc1-dev-card { display: grid; grid-template-rows: subgrid; grid-row: span 9; align-content: start; }
    /* the shorter visual keeps its natural height and breathes, never stretches */
    .nc1-svc .nc1-dev-card .nc1-mon, .nc1-svc .nc1-dev-card .nc1-play { align-self: start; }
    .nc1-svc .nc1-dev-card .nc1-dev-btn { align-self: end; justify-self: start; }
  }
}
.nc1-dev-card h3 { margin: 0 0 1vw; font-size: 2.4vw; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
.nc1-dev-card > p { margin: 0 0 1.8vw; color: var(--nc1-dark-grey); font-size: var(--nc1-base); line-height: var(--nc1-base-lh); }
.nc1-dev-code { margin-top: 0.6vw; }
.nc1-dev-code pre { font-size: 0.85vw; line-height: 1.9; }
.nc1-dev-inner { margin-top: 0.6vw; margin-bottom: 1.8vw; }

/* studio builder toy: three panes, characters left, the star in the middle, wardrobe right */
.nc1-play { display: grid; grid-template-columns: 0.62fr 1.35fr 1fr; gap: 1vw; margin: 0.6vw 0 1.8vw; align-items: start; }
.nc1-play-col { min-width: 0; display: flex; flex-direction: column; gap: 1vw; }
.nc1-play-chars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4vw; }
.nc1-play-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--nc1-light-grey); border-radius: calc(var(--nc1-radius) * 0.75);
  aspect-ratio: 3 / 4; background: var(--nc1-smoke);
  transition: background 0.3s ease;
}
.nc1-play-scenefull { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.nc1-play-char { position: absolute; z-index: 2; }
.nc1-play-char.is-sticker { left: 50%; bottom: -4%; transform: translateX(-50%); height: 84%; width: auto; }
.nc1-play-char.is-card {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 0.6vw; border: 2px solid var(--nc1-white);
}
.nc1-play-char.is-swap, .nc1-play-scenefull.is-swap { animation: nc1-play-pop 0.35s var(--nc1-ease); }
@keyframes nc1-play-pop { from { opacity: 0; transform-origin: 50% 100%; } }
.nc1-play-cap {
  position: absolute; z-index: 3; left: 0.7vw; top: 0.7vw; max-width: calc(100% - 1.4vw);
  background: var(--nc1-white); color: var(--nc1-black); border-radius: 100vw;
  font-size: 0.62vw; font-weight: 600; letter-spacing: 0.12em; line-height: 1;
  padding: 0.4vw 0.75vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc1-play-group { min-width: 0; }
.nc1-play-label { display: block; font-size: 0.68vw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nc1-grey); margin-bottom: 0.5vw; }
.nc1-play-label em { font-style: normal; letter-spacing: 0.06em; color: var(--nc1-light-grey); }
.nc1-play-chars button, .nc1-play-outfits button {
  position: relative; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--nc1-smoke); border: 1px solid var(--nc1-light-grey); border-radius: 0.5vw;
  aspect-ratio: 1; transition: transform 0.2s var(--nc1-ease), border-color 0.15s ease;
}
.nc1-play-chars button img, .nc1-play-outfits button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.nc1-play-chars button:hover, .nc1-play-outfits button:hover { transform: translateY(-2px); }
.nc1-play-chars button.is-on, .nc1-play-outfits button.is-on { border-color: var(--nc1-black); outline: 1px solid var(--nc1-black); outline-offset: -2px; }
.nc1-play-outfits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4vw; }
.nc1-play-outfits button span {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--nc1-white); color: var(--nc1-black);
  font-family: var(--nc1-font); font-size: 0.55vw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2vw 0; text-align: center;
}
/* outfit art not on disk yet: grey tile, label says soon */
.nc1-play-outfits button.is-wait img { visibility: hidden; }
.nc1-play-outfits button.is-wait span { background: none; color: var(--nc1-grey); top: 0; display: flex; align-items: center; justify-content: center; }
.nc1-play-outfits button.is-wait span::after { content: " soon"; }
/* outfits belong to Lumi for now, lock the group for the rest of the cast */
.nc1-play-group.is-locked .nc1-play-outfits { opacity: 0.35; pointer-events: none; }
.nc1-play-scenes { display: flex; flex-direction: column; gap: 0.3vw; }
.nc1-play-scenes button, .nc1-play-voices button {
  font-family: var(--nc1-font); font-size: 0.75vw; font-weight: 500; letter-spacing: 0.02em;
  color: var(--nc1-black); background: none; border: 1px solid var(--nc1-light-grey); border-radius: 100vw;
  padding: 0.34vw 0.9vw; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 0.5vw;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.2s var(--nc1-ease);
}
.nc1-play-scenes button i { width: 0.55vw; height: 0.55vw; border-radius: 50%; flex: none; }
.nc1-play-scenes button:hover, .nc1-play-voices button:hover { transform: translateY(-2px); }
.nc1-play-scenes button.is-on, .nc1-play-voices button.is-on { background: var(--nc1-black); color: var(--nc1-white); border-color: var(--nc1-black); }
.nc1-play-voices { display: flex; gap: 0.5vw; flex-wrap: wrap; }
.nc1-dev-btn { margin-top: auto; align-self: flex-start; }
.nc1-dev-card .nc1-dev-code:not(.nc1-dev-inner) { margin-bottom: 1.8vw; }
.nc1-dev-card .nc1-report { background: var(--nc1-smoke); }
.nc1-dev-card .nc1-report-row b { font-size: 1.9vw; }
.nc1-code {
  background: var(--nc1-almost-black); color: var(--nc1-white);
  border-radius: var(--nc1-radius); padding: 2vw 2.4vw;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.nc1-code-head {
  display: flex; justify-content: space-between;
  color: var(--nc1-grey); font-size: 0.78vw; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid #26262b; padding-bottom: 1vw; margin-bottom: 1.4vw;
}
.nc1-code pre { margin: 0; font-size: 0.95vw; line-height: 2; white-space: pre-wrap; word-break: break-word; }
/* ---------- Monitoring platform mock (.nc1-mon), shared by C and D ----------
   A SaaS dashboard window embedded like a product screenshot: chrome bar with
   tabs, sessions table, a pure CSS bar chart, alerts feed. Flat, hairlines,
   no gradients, no shadows. Yellow #E8C765 is status punctuation only. */
.nc1-mon {
  --mon-y: #E8C765; --mon-line: #E6E3DC; --mon-grey: #9c9c9c; --mon-dim: #5d5d5d;
  background: #fff; border: 1px solid var(--mon-line); border-radius: var(--nc1-radius);
  overflow: hidden; color: #111;
}
.nc1-mon-top {
  display: flex; align-items: center; gap: 1.2vw;
  padding: 0.75vw 1vw; border-bottom: 1px solid var(--mon-line);
}
.nc1-mon-brand { display: flex; align-items: center; gap: 0.45vw; font-size: max(10px, 0.72vw); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.nc1-mon-brand img { width: 1vw; height: 1vw; min-width: 12px; min-height: 12px; display: block; }
.nc1-mon-tabs { display: flex; gap: 0.25vw; margin: 0 auto; }
.nc1-mon-tabs button {
  background: none; border: 0; cursor: pointer; font-family: var(--nc1-font);
  font-size: max(9px, 0.62vw); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mon-grey); border-radius: 100vw; padding: 0.32vw 0.85vw; line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.nc1-mon-tabs button:hover { color: #111; }
.nc1-mon-tabs button.is-on { background: #111; color: #fff; }
.nc1-mon-env {
  font-size: max(8px, 0.56vw); font-weight: 700; letter-spacing: 0.14em;
  color: var(--mon-dim); border: 1px solid var(--mon-line); border-radius: 100vw;
  padding: 0.26vw 0.7vw; line-height: 1; white-space: nowrap;
}
.nc1-mon-live { display: flex; align-items: center; gap: 0.4vw; font-size: max(9px, 0.62vw); font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; }
.nc1-mon-live i { width: 0.42vw; height: 0.42vw; min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--mon-y); animation: nc1-blink 1.2s steps(2, start) infinite; }
.nc1-mon-body { display: flex; align-items: stretch; }
.nc1-mon-main { flex: 1; min-width: 0; }
.nc1-mon-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--mon-line); }
.nc1-mon-stats > div { padding: 1vw 1.1vw; display: flex; flex-direction: column; gap: 0.3vw; }
.nc1-mon-stats > div + div { border-left: 1px solid var(--mon-line); }
.nc1-mon-stats b { font-size: max(15px, 1.5vw); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.nc1-mon-stats b sub { font-size: 0.6em; vertical-align: baseline; margin-left: 0.1em; color: var(--mon-grey); }
.nc1-mon-stats b span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
.nc1-mon-stats > div > span { font-size: max(8px, 0.56vw); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mon-grey); }
.nc1-mon-chart { padding: 1vw 1.1vw 1.1vw; border-bottom: 1px solid var(--mon-line); }
.nc1-mon-chart-head {
  display: flex; justify-content: space-between; gap: 1vw; margin-bottom: 0.8vw;
  font-size: max(8px, 0.56vw); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mon-grey);
}
.nc1-mon-bars { display: flex; align-items: flex-end; gap: 0.22vw; height: 5.2vw; min-height: 56px; }
.nc1-mon-bars i { flex: 1; background: #ECEAE4; border-radius: 2px 2px 0 0; height: calc(var(--h, 0.4) * 100%); transition: height 0.5s var(--nc1-ease); }
.nc1-mon-bars i.hi { background: var(--mon-y); }
.nc1-mon-row {
  display: grid; grid-template-columns: 1fr 6.5vw 4.5vw 5.5vw; align-items: center; gap: 0.8vw;
  padding: 0.62vw 1.1vw; border-bottom: 1px solid var(--mon-line);
  font-size: max(10px, 0.68vw); transition: background 0.15s ease;
}
.nc1-mon-row:last-child { border-bottom: 0; }
.nc1-mon-row:hover { background: var(--nc1-smoke); }
.nc1-mon-row.head {
  font-size: max(8px, 0.54vw); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mon-grey); background: none;
}
.nc1-mon-who { display: flex; align-items: center; gap: 0.55vw; min-width: 0; font-weight: 600; }
.nc1-mon-who img {
  width: 1.5vw; height: 1.5vw; min-width: 18px; min-height: 18px; border-radius: 50%;
  object-fit: cover; object-position: 50% 12%; background: var(--pc, #f0efeb); flex: none;
}
.nc1-mon-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc1-mon-chan, .nc1-mon-ms { color: var(--mon-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc1-mon-state { display: flex; align-items: center; gap: 0.4vw; font-size: max(8px, 0.56vw); font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; }
.nc1-mon-state i { width: 0.4vw; height: 0.4vw; min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--mon-grey); flex: none; }
.nc1-mon-state.live i { background: var(--mon-y); }
.nc1-mon-side { width: 30%; min-width: 0; border-left: 1px solid var(--mon-line); display: flex; flex-direction: column; }
.nc1-mon-side-head {
  padding: 0.75vw 1vw; border-bottom: 1px solid var(--mon-line);
  font-size: max(8px, 0.56vw); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mon-grey);
  display: flex; justify-content: space-between; gap: 0.6vw;
}
.nc1-mon-alert { display: flex; align-items: baseline; gap: 0.55vw; padding: 0.7vw 1vw; border-bottom: 1px solid var(--mon-line); font-size: max(9px, 0.62vw); line-height: 1.45; }
.nc1-mon-alert:last-child { border-bottom: 0; }
.nc1-mon-alert i { width: 0.4vw; height: 0.4vw; min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--mon-grey); flex: none; transform: translateY(-0.08vw); }
.nc1-mon-alert.warn i { background: var(--mon-y); }
.nc1-mon-alert.hard i { background: #111; }
.nc1-mon-alert time { color: var(--mon-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc1-mon-alert p { margin: 0; color: var(--mon-dim); }
.nc1-mon-alert b { font-weight: 600; color: #111; }
/* fake but honest tab switching: Overview / Sessions / Alerts re-cut the window */
.nc1-mon-row.is-extra { display: none; }
.nc1-mon[data-view="sessions"] .nc1-mon-stats,
.nc1-mon[data-view="sessions"] .nc1-mon-chart,
.nc1-mon[data-view="sessions"] .nc1-mon-side { display: none; }
.nc1-mon[data-view="sessions"] .nc1-mon-row.is-extra { display: grid; }
.nc1-mon[data-view="alerts"] .nc1-mon-main { display: none; }
.nc1-mon[data-view="alerts"] .nc1-mon-side { width: 100%; border-left: 0; }
/* narrow host (the C service card): stack the alerts feed under the table */
.nc1-dev-card .nc1-mon-body { flex-direction: column; }
.nc1-dev-card .nc1-mon-side { width: auto; border-left: 0; border-top: 1px solid var(--mon-line); }
.nc1-dev-card .nc1-mon[data-view="alerts"] .nc1-mon-side { border-top: 0; }
.nc1-dev-card .nc1-mon-row { grid-template-columns: 1fr 5vw 4vw 5vw; padding: 0.62vw 0.9vw; }
.nc1-dev-card .nc1-mon-tabs { margin: 0 0 0 auto; }
.nc1-dev-card .nc1-mon-env { display: none; }

.nc1-report { background: var(--nc1-smoke); border-radius: var(--nc1-radius); padding: 2vw 2.4vw; }
.nc1-report-head {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--nc1-grey); font-size: 0.78vw; letter-spacing: 0.14em;
  padding-bottom: 1.2vw;
}
.nc1-report-live { display: flex; align-items: center; gap: 0.45vw; color: var(--nc1-black); font-weight: 600; }
.nc1-report-live i { width: 0.4vw; height: 0.4vw; background: var(--nc1-black); animation: nc1-blink 1.2s steps(2, start) infinite; }
.nc1-report-row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--nc1-light-grey); padding: 1.2vw 0;
}
.nc1-report-row span { color: var(--nc1-dark-grey); font-size: var(--nc1-xs); }
.nc1-report-row b span { font-size: inherit; color: inherit; }
.nc1-report-row b {
  font-size: 2.4vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nc1-report-row b sub { font-size: 0.95vw; vertical-align: baseline; margin-left: 0.15vw; }
.nc1-step { display: flex; gap: 1.2vw; border-top: 1px solid var(--nc1-light-grey); padding: 1.1vw 0; }
.nc1-step i { font-style: normal; color: var(--nc1-grey); font-size: var(--nc1-xs); padding-top: 0.25vw; }
.nc1-step b { display: block; font-size: 1.3vw; font-weight: 500; letter-spacing: -0.01em; }
.nc1-step p { margin: 0.25vw 0 0; color: var(--nc1-dark-grey); font-size: var(--nc1-xs); line-height: 1.5; }

/* ---------- faq ---------- */
.nc1-faq { padding: 0 var(--nc1-pad) 10vw; display: grid; grid-template-columns: 1fr 1.4fr; gap: 4vw; }
.nc1-faq h2 { margin: 1.2vw 0 0; font-size: var(--nc1-h1); font-weight: 500; letter-spacing: -0.02em; }
.nc1-faq details { border-top: 1px solid var(--nc1-light-grey); }
.nc1-faq details:last-child { border-bottom: 1px solid var(--nc1-light-grey); }
.nc1-faq summary {
  list-style: none; cursor: pointer; padding: 1.4vw 0;
  font-size: 1.5vw; font-weight: 500; letter-spacing: -0.01em;
  display: flex; justify-content: space-between; align-items: center;
}
.nc1-faq summary::-webkit-details-marker { display: none; }
.nc1-faq summary::after { content: "+"; font-weight: 400; color: var(--nc1-grey); transition: transform 0.3s var(--nc1-ease); }
.nc1-faq details[open] summary::after { transform: rotate(45deg); }
.nc1-faq details p { margin: 0 0 1.6vw; max-width: 34vw; color: var(--nc1-dark-grey); font-size: var(--nc1-xs); line-height: 1.6; }

/* ---------- cta ---------- */
.nc1-cta { position: relative; padding: 12vw var(--nc1-pad); overflow: hidden; }
.nc1-cta-text { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2vw; }
.nc1-cta-text h2 { margin: 0; font-size: var(--nc1-xl); line-height: 1; font-weight: 500; letter-spacing: -0.04em; }
/* 漂浮 chip 里放角色小头，保持 novra 视差 */
.nc1-cta-icon {
  position: absolute; width: 4.6vw; height: 4.6vw; border-radius: var(--nc1-radius);
  background: var(--nc1-smoke); border: 1px solid var(--nc1-light-grey);
  overflow: hidden;
  will-change: transform, filter; user-select: none;
}
.nc1-cta-icon img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%;
  display: block; -webkit-user-drag: none;
}

/* ---------- footer ---------- */
.nc1-footer { background: var(--nc1-almost-black); color: var(--nc1-white); padding: 5vw var(--nc1-pad) 2vw; border-radius: var(--nc1-radius-lg) var(--nc1-radius-lg) 0 0; }
.nc1-footer-top { display: flex; justify-content: space-between; margin-bottom: 5vw; }
.nc1-footer-col { display: flex; flex-direction: column; gap: 0.6vw; font-size: var(--nc1-xs); }
.nc1-footer-col b { font-weight: 500; margin-bottom: 0.4vw; color: var(--nc1-grey); }
.nc1-footer-col a { color: var(--nc1-light-grey); }
.nc1-footer-col a:hover { color: var(--nc1-white); }
.nc1-footer-bottom { display: flex; justify-content: space-between; color: var(--nc1-grey); font-size: var(--nc1-xs); border-top: 1px solid #26262b; padding-top: 1.4vw; }

/* ---------- reveal + scramble ---------- */
.nc1-reveal { opacity: 0; transform: translateY(2.5vw); transition: opacity 0.8s ease, transform 0.9s var(--nc1-ease); }
.nc1-reveal.on { opacity: 1; transform: translateY(0); }
.nc1-scramble { font-variant-ligatures: none; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  :root { --nc1-pad: 5vw; --nc1-base: 4vw; --nc1-base-lh: 5.6vw; --nc1-xs: 3.4vw; --nc1-s: 3.8vw; --nc1-radius: 3vw; --nc1-radius-lg: 4vw; }
  .nc1-nav-links { display: none; }
  .nc1-nav-logo { font-size: 4.5vw; }
  .nc1-nav-logo img { width: 6.4vw; height: 6.4vw; }
  .nc1-backed { padding: 6vw 0; }
  .nc1-backed-track { gap: 8vw; padding-right: 8vw; }
  .nc1-backed-unit { gap: 3.5vw; }
  .nc1-backed-unit b { font-size: 2.4vw; margin-left: 4vw; }
  .nc1-backed img { height: 4.2vw; }
  /* no hover on touch, the chip itself is the tap target and the hero buttons sit right below */
  .nc1-hero-chip-cta { display: none; }
  .nc1-nav-cta { font-size: 3.4vw; padding: 1.6vw 4vw; }
  .nc1-hero-title { font-size: 15vw; }
  .nc1-hero-chip { width: 30vw; height: 12vw; }
  .nc1-hero-bottom { position: relative; left: auto; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; gap: 5vw; margin-top: 10vw; }
  .nc1-hero-tag { max-width: none; }
  .nc1-btn { padding: 2.6vw 6vw; font-size: 3.4vw; }
  .nc1-eyebrow i { width: 1.6vw; height: 1.6vw; }
  .nc1-about { grid-template-columns: 1fr; padding: 16vw var(--nc1-pad); }
  .nc1-about h2 { font-size: 8vw; }
  .nc1-about-card { padding: 6vw; gap: 4vw; }
  .nc1-tracks { height: auto; }
  .nc1-tracks-pin { position: static; height: auto; flex-direction: column; align-items: stretch; gap: 5vw; padding: 10vw var(--nc1-pad); overflow: visible; }
  .nc1-tracks-num, .nc1-tracks-list { display: none; }
  .nc1-tracks-center { flex-direction: column; gap: 5vw; height: auto; }
  .nc1-tcard { position: relative; width: 100%; height: auto; min-height: 60vw; transform: none !important; opacity: 1 !important; padding: 6vw; gap: 6vw; }
  .nc1-tcard h3 { font-size: 7vw; }
  .nc1-tcard p { max-width: none; }
  .nc1-tcard-foot a { padding: 2vw 5vw; }
                    .nc1-live-badge { font-size: 2.6vw; padding: 1vw 2.6vw; }
  .nc1-live-badge i { width: 1.4vw; height: 1.4vw; }
  .nc1-live-count { font-size: 2.8vw; }
  .nc1-live-leave { font-size: 2.5vw; padding: 1vw 3vw; }
    .nc1-chat-line b { font-size: 2.5vw; }
  .nc1-chat-line.lumi { padding: 2vw 3vw; border-radius: 2vw; }
                                .nc1-wtile.t1 { height: 70vw; } .nc1-wtile.t2 { height: 46vw; } .nc1-wtile.t3 { height: 55vw; }
  .nc1-wtile b { font-size: 3.4vw; padding: 1.6vw 3vw; }
  .nc1-sec { grid-template-columns: 1fr; padding: 14vw var(--nc1-pad); gap: 8vw; }
  .nc1-sec h2 { font-size: 9vw; }
  .nc1-sec-copy p { max-width: none; }
  .nc1-api-row b { font-size: 4.4vw; }
  .nc1-dev { padding: 14vw var(--nc1-pad); }
  .nc1-dev-head { max-width: none; margin-bottom: 8vw; }
  .nc1-dev-head h2 { font-size: 9vw; }
  .nc1-dev-head p { max-width: none; }
  .nc1-dev-grid { grid-template-columns: 1fr; gap: 5vw; }
  .nc1-dev-card { padding: 6vw 5vw; border-radius: 4vw; }
  .nc1-dev-tag { font-size: 2.6vw; margin-bottom: 4vw; }
  .nc1-dev-card h3 { font-size: 7vw; margin-bottom: 3vw; }
  .nc1-dev-card > p { margin-bottom: 4vw; }
  .nc1-dev-code { margin-top: 2vw; }
  .nc1-dev-code pre { font-size: 2.9vw; }
  .nc1-dev-inner { margin-top: 2vw; margin-bottom: 5vw; }
  .nc1-dev-card .nc1-report-row b { font-size: 6.4vw; }
  .nc1-play { grid-template-columns: 1fr; gap: 4vw; margin: 2vw 0 5vw; }
  .nc1-play-stage { order: -1; border-radius: 3vw; }
  .nc1-play-chars { grid-template-columns: repeat(5, 1fr); gap: 1.6vw; }
  .nc1-play-char.is-card { border-radius: 2vw; }
  .nc1-play-cap { left: 2.4vw; top: 2.4vw; font-size: 2.4vw; padding: 1.4vw 2.6vw; max-width: calc(100% - 4.8vw); }
  .nc1-play-col { gap: 4vw; }
  .nc1-play-label { font-size: 2.6vw; margin-bottom: 1.8vw; }
  .nc1-play-chars button, .nc1-play-outfits button { border-radius: 1.6vw; }
  .nc1-play-outfits { gap: 1.6vw; }
  .nc1-play-outfits button span { font-size: 2vw; padding: 0.8vw 0; }
  .nc1-play-scenes { flex-direction: row; flex-wrap: wrap; gap: 1.8vw; }
  .nc1-play-scenes button i { width: 2vw; height: 2vw; }
  .nc1-play-scenes button, .nc1-play-voices button { font-size: 3vw; padding: 1.4vw 3.6vw; gap: 1.6vw; }
  .nc1-play-voices { gap: 1.8vw; }
  .nc1-code { padding: 5vw; border-radius: 3vw; }
  .nc1-code-head { font-size: 2.6vw; padding-bottom: 3vw; margin-bottom: 4vw; }
  .nc1-code pre { font-size: 3vw; }
  .nc1-mon-top { flex-wrap: wrap; gap: 2vw; padding: 3vw; }
  .nc1-mon-tabs { order: 3; width: 100%; margin: 0; }
  .nc1-mon-tabs button { font-size: 2.6vw; padding: 1.2vw 3vw; }
  .nc1-mon-body { flex-direction: column; }
  .nc1-mon-side { width: auto; border-left: 0; border-top: 1px solid var(--mon-line); }
  .nc1-mon[data-view="alerts"] .nc1-mon-side { border-top: 0; }
  .nc1-mon-row, .nc1-dev-card .nc1-mon-row { grid-template-columns: 1fr 13vw 13vw; gap: 2vw; padding: 2.6vw 3vw; }
  .nc1-mon-chan { display: none; }
  .nc1-mon-stats > div { padding: 3vw; }
  .nc1-mon-bars { height: 18vw; }
  .nc1-mon-chart { padding: 3vw; }
  .nc1-mon-side-head, .nc1-mon-alert { padding: 2.6vw 3vw; }
  .nc1-report { padding: 5vw; border-radius: 3vw; }
  .nc1-report-head { font-size: 2.6vw; }
  .nc1-report-live i { width: 1.4vw; height: 1.4vw; }
  .nc1-report-row { padding: 3.4vw 0; }
  .nc1-report-row b { font-size: 8vw; }
  .nc1-report-row b sub { font-size: 3.2vw; }
  .nc1-step { gap: 3vw; padding: 3vw 0; }
  .nc1-step b { font-size: 4.6vw; }
  .nc1-tracks-eyebrow { display: none; }
  .nc1-cta-icon { display: none; }
  .nc1-faq { grid-template-columns: 1fr; }
  .nc1-faq h2 { font-size: 9vw; }
  .nc1-faq summary { font-size: 4.5vw; padding: 4vw 0; }
  .nc1-faq details p { max-width: none; }
  .nc1-cta { padding: 20vw var(--nc1-pad); }
  .nc1-cta-text h2 { font-size: 11vw; }
  .nc1-cta-icon { display: none; }
  .nc1-footer-top { flex-wrap: wrap; gap: 8vw; }
  .nc1-footer-lockup { gap: 4vw; }
  .nc1-footer-lockup .awm { width: 16vw; }
  .nc1-footer-lockup-txt b { font-size: 11vw; }
  .nc1-footer-lockup-txt em { font-size: 3vw; }
  .nc1-footer-bottom { flex-direction: column; gap: 2vw; }
}


/* ============================================================
   OPTION C 差异层
   上面 1..839 行是 option-a.css 逐字复制的骨架（只把 oc- 前缀换成 nc1-），
   版式、栅格、字号层级、留白节奏一处没动，跟 Option B 用的是同一份骨架。
   C 和 B 只差两件：主视觉换成 lumi-pose-03（半身，没有纸箱），
   主色对调（B 紫场领着，C 粉场领着）。
   禁令自查：无渐变、无 drop shadow、卡片无外框、图标无色底砖、无红点。
   ============================================================ */

:root {
  --nc1-violet: #7180FF;
  --nc1-pink: #FF9AD4;
  --nc1-pink-soft: #FFE2F1;

  /* A 的六个中性变量整体重定义。底比 B 更暖一点，带一点粉，
     跟 hero 那块粉是同一个色相家族。 */
  --nc1-white: #FFFAFD;
  --nc1-black: #2B1B3D;
  --nc1-almost-black: #2B1B3D;
  --nc1-dark-grey: #6A5372;
  --nc1-grey: #A695AE;
  --nc1-light-grey: #EBDCE6;
  --nc1-smoke: #FDF0F7;
}
body.nc1 { background: var(--nc1-white); }
body.nc1 ::selection { background: var(--nc1-pink); color: var(--nc1-black); }
:lang(ja) { font-family: "Noto Sans JP", var(--nc1-font); }

.nc1-boot { background: var(--nc1-white); }
.nc1-boot img { width: 44px; }
.nc1-preloader i { background: var(--nc1-pink); }

/* ---------------------------------------------------------------- nav
   跟 B 一模一样的一条：A 的位置，Animated Waffle 单色 lockup，右边加 EN / JA。
   斜切那块粉的上顶点压在 6%，所以整条 nav 永远落在浅底上，不用为它反白。 */
.nc1-nav {
  mix-blend-mode: normal;
  color: var(--nc1-black);
  gap: 2vw;
  transition: background 0.22s ease, border-color 0.22s ease;
  border-bottom: 1px solid transparent;
}
.nc1-nav.is-stuck { background: var(--nc1-white); border-bottom-color: var(--nc1-light-grey); }
.nc1-nav-logo {
  display: flex; align-items: center; gap: 9px; flex: none;
  color: var(--nc1-violet); font-size: inherit;
}
.nc1-nav-logo .awm { position: relative; flex: none; width: clamp(22px, 2.1vw, 30px); aspect-ratio: 1; }
.nc1-nav-logo .awm i {
  position: absolute; inset: 0; display: block; background: currentColor;
  -webkit-mask-image: url(../assets/logos/animated-waffle-mark.svg);
  mask-image: url(../assets/logos/animated-waffle-mark.svg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.nc1-nav-logo .wm {
  display: grid; gap: 0;
  font-weight: 900; font-size: clamp(9.5px, 0.8vw, 12px);
  line-height: 0.88; letter-spacing: -0.03em; text-transform: uppercase;
  white-space: nowrap;
}
.nc1-nav-logo .wm b { display: block; font-weight: inherit; }
/* 0808 nav 分两头：导航跟着字标靠左，Log in 和 EN/JA 靠右，中间整段让开。
   原来 links 是 margin-left:auto 顶到右边，四条链接正好压在她伸出来的手指上。 */
.nc1-nav-links { margin-left: 2.6vw; margin-right: auto; }
.nc1-nav-links a { opacity: 0.62; }
.nc1-nav-right { display: flex; align-items: center; gap: 1vw; flex: none; }
.nc1-lang { display: flex; gap: 2px; background: var(--nc1-smoke); border-radius: 100vw; padding: 3px; }
.nc1-lang button {
  border: 0; background: none; cursor: pointer; font-family: var(--nc1-font);
  font-size: max(10px, 0.72vw); font-weight: 700; letter-spacing: 0.1em; line-height: 1;
  color: var(--nc1-dark-grey); padding: 0.42vw 0.8vw; border-radius: 100vw;
  transition: background 0.15s ease, color 0.15s ease;
}
.nc1-lang button:hover { color: var(--nc1-black); }
.nc1-lang button.is-on { background: var(--nc1-black); color: #fff; }
.nc1-nav-cta { border-color: var(--nc1-black); }
.nc1-nav-cta:hover { background: var(--nc1-black); color: #fff; }

/* nav 压在 hero 那片饱和实底上：字标原来是薰衣草紫，落在紫场上直接看不见了。
   0808 改成**白色**（她定的），并且放大一档 —— 深墨压在饱和紫上偏闷，
   白的才立得住。滚出 hero 落白底之后再还原成品牌紫、尺寸收回去。
   导航链接跟着一起转白：字标白、链接深墨会打架。 */
.nc1-nav:not(.is-stuck) .nc1-nav-logo { color: #fff; }
.nc1-nav:not(.is-stuck) .nc1-nav-logo .awm { width: clamp(30px, 2.9vw, 42px); }
.nc1-nav:not(.is-stuck) .nc1-nav-logo .wm { font-size: clamp(12px, 1.06vw, 16px); }
.nc1-nav:not(.is-stuck) .nc1-nav-links a { color: #fff; opacity: 0.82; }
.nc1-nav:not(.is-stuck) .nc1-nav-links a:hover { opacity: 1; }

/* ================================================================= hero
   0806 改版：hero 这一段照 Wonder Egg Priority 那张概念稿的 bento 结构重做。
   一片饱和实底 + 一组大圆角卡片 + 卡片之间清楚的沟。
   底色上三道淡圆弧是**硬边实色**（比底色亮一档的实心圆 / 实心圆环），
   不是径向渐变，也不算装饰件 —— 它们只是底色的第二层调子。
   卡片一律无描边、无投影、无渐变，靠实底色差和圆角分区。

   两个当场比的开关（js/option-c-lumi.js 里读的 URL query）：
     ?pose=02      主视觉换 lumi-pose-02
     ?field=yellow 底色换成参考图那种饱和黄
   ================================================================= */
.nc1-hero {
  --nc1-field: #7180FF;          /* 底色：默认我们的薰衣草紫 */
  --nc1-field-hi: #8390FF;       /* 底色上那几道淡圆弧，比底色亮一档，实色 */
  --nc1-card: #FFFFFF;
  --nc1-card-2: #F3F0FF;         /* 次一级的卡（浅紫白） */
  --nc1-ink: #1B1633;
  --bt-gap: 0.86vw;
  --bt-r: 1.6vw;                /* 卡片外圆角，里面的元件用更小的圆角 */
  position: relative; overflow: hidden;
  box-sizing: border-box;
  background: var(--nc1-field);
  min-height: 100vh;
  display: block;
  padding: 5.6vw var(--nc1-pad) var(--nc1-pad);
}
/* 黄场：她说「直接抄」，所以留一个开关当场比 */
body.nc1[data-field="yellow"] .nc1-hero { --nc1-field: #F5C63C; --nc1-field-hi: #FAD25C; }

/* 底色上的圆弧：两个实心圆环 + 一个实心圆，硬边、实色、无渐变 */
.nc1-field-arc { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.nc1-field-arc.a1 {
  width: 46vw; height: 46vw; left: -13vw; top: 30vh;
  border: 1.5vw solid var(--nc1-field-hi);
}
.nc1-field-arc.a2 {
  width: 30vw; height: 30vw; right: -9vw; top: -6vw;
  background: var(--nc1-field-hi);
}
.nc1-field-arc.a3 {
  width: 62vw; height: 62vw; right: -18vw; bottom: -30vw;
  border: 1.2vw solid var(--nc1-field-hi);
}

/* ---------------------------------------------------------- bento 栅格
   12 列。行：顶栏 / 大面板 / 长条 A / 长条 B / 底部药丸。
   行高用 fr，窗口再矮 bento 也整幅占满首屏，不会把底部那颗药丸挤出去。 */
.nc1-bento {
  position: relative; z-index: 2;
  height: calc(100vh - 5.6vw - var(--nc1-pad));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* 0807 hero 清干净了：只剩字标 / Lumi / Try Lumi 三样。
     搜索条、Color Palette、The cast、Narya.ai 行、两条产品长条全部从 hero 拿掉，
     它们在页面下面本来就有自己的板块，下面那些一个都没动。 */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--bt-gap);
}
.nc1-bento > * { min-width: 0; }

/* 0807：白色的那几个框全部拿掉 —— 内容直接落在紫场上，靠留白、字号和字重分组，
   不靠白卡。深色件（药丸 / 圆按钮 / 色块）留着，它们不是白框。
   卡片位置和栅格一格都没动，只是没有底了。 */
.nc1-bt-panel, .nc1-bt-card, .nc1-bt-bar, .nc1-bt-mini, .nc1-bt-search, .nc1-bt-mark {
  background: transparent; border-radius: var(--bt-r); border: 0;
}

/* 横贯全宽的巨型 ANIMATED WAFFLE，在她后面。跟 B 同一套：
   一层实色、比底色亮一档、两端裁出画面、中间被身体挡掉。 */
/* 0818 改名 Aniwaffle：字数从 15 个掉到 9 个，原来的 15vw 排出来两端到不了
   画面外，「两端裁出去」这个效果就散了。字号按字数比抬到 26vw，其余（挤压
   scaleX、行高、颜色、位置）一个数没动，读起来还是同一层暗纹。 */
/* 0818 她：「暗纹的字再细一个字号」。字高 26vw → 23.5vw（-9.6%），
   但纯缩字号会让这行 9 个字母的总宽从 113vw 掉到 102vw，两端就贴着画面边
   收住了、"裁出画面外"那口气会散。所以挤压同步松一档 0.78 → 0.84，
   总宽 109vw：字明显小了一号，两端还是各裁掉 4.5vw。
   JA 是居中小水印（本来就不裁），按同比例 11.6vw → 10.5vw。 */
.nc1-bg-mark {
  position: absolute; left: 50%; top: 58%; z-index: 1;
  margin: 0; width: max-content; pointer-events: none;
  font-size: 23.5vw; font-weight: 900; line-height: 0.78;
  letter-spacing: -0.015em; text-transform: uppercase; white-space: nowrap;
  color: var(--nc1-field-hi);
  transform: translate(-50%, -50%) scaleX(0.84);
}
:lang(ja) .nc1-bg-mark { font-size: 10.5vw; letter-spacing: 0; }

/* hero 主字标：mark + ANIMATED WAFFLE 一行 */
.nc1-bt-title .awm { position: relative; flex: none; width: 4.6vw; aspect-ratio: 1; min-width: 34px; }
.nc1-bt-title .awm i {
  position: absolute; inset: 0; display: block; background: currentColor;
  -webkit-mask-image: url(../assets/logos/animated-waffle-mark.svg);
  mask-image: url(../assets/logos/animated-waffle-mark.svg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ---- 顶栏：搜索药丸 + 右边工具组 ---- */
.nc1-bt-search {
  grid-column: 4 / 9; grid-row: 1;
  display: flex; align-items: center; gap: 0.6vw;
  padding: 0.85vw 1.4vw; border-radius: 100vw;
  color: var(--nc1-grey); font-size: max(11px, 0.86vw);
  transition: color 0.15s ease, transform 0.18s var(--nc1-ease);
}
.nc1-bt-search svg { width: 1.05vw; height: 1.05vw; min-width: 13px; min-height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nc1-bt-search:hover { color: var(--nc1-ink); transform: translateY(-1px); }
.nc1-bt-tools {
  grid-column: 9 / 13; grid-row: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--bt-gap);
}
/* 虚线框：她主动点名批过 dashed，实线描边仍然禁 */
.nc1-bt-name {
  flex: 0 1 auto; min-width: 0; text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.72); border-radius: 100vw;
  padding: 0.8vw 1vw; color: #fff; font-size: max(10px, 0.8vw);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.18s ease;
}
.nc1-bt-name:hover { background: rgba(255, 255, 255, 0.14); }
.nc1-bt-mark { flex: none; width: 3.1vw; height: 3.1vw; display: grid; place-items: center; border-radius: 1vw; }
.nc1-bt-mark img { width: 56%; height: 56%; object-fit: contain; display: block; }
.nc1-bt-icon {
  flex: none; width: 3.1vw; height: 3.1vw; border-radius: 50%;
  background: var(--nc1-ink); color: #fff; display: grid; place-items: center;
  transition: transform 0.18s var(--nc1-ease);
}
.nc1-bt-icon:hover { transform: translateY(-2px); }
.nc1-bt-icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 大面板：通栏。字标 + 正文靠左，右边整片让给她 ---- */
.nc1-bt-panel {
  grid-column: 1 / 13; grid-row: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2vw 2.2vw;
}
/* 0807：字标放大 + 纯白（颜色在下面那组层级里定）。
   mark 去掉了 —— 顶栏 lockup 上已经有一个，同一屏出两次会打架（mira 在 8 上定的）。
   字重 900、断成 ANIMATED / WAFFLE 两行，跟顶栏和落款同一个断法。 */
.nc1-bt-title {
  margin: 0; font-weight: 900; letter-spacing: -0.035em; line-height: 0.88;
  font-size: 6vw; text-transform: uppercase;
  display: flex; flex-direction: row; align-items: center;
}
.nc1-bt-title .awm { display: none; }
.nc1-bt-title .nc1-line { width: min-content; }
:lang(ja) .nc1-bt-title { font-size: 4.2vw; letter-spacing: 0; }
:lang(ja) .nc1-bt-title .nc1-line { width: auto; white-space: nowrap; }
.nc1-bt-title .nc1-line { display: inline-block; overflow: hidden; }
.nc1-bt-title .nc1-line > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--nc1-ease) 0.45s; }
.nc1-bt-title .nc1-line:last-child > span { transition-delay: 0.55s; }
body.nc1.is-ready .nc1-bt-title .nc1-line > span { transform: translateY(0); }
.nc1-bt-body {
  margin: 1vw 0 0; max-width: 20vw;
  color: var(--nc1-dark-grey); font-size: max(12px, 0.86vw); line-height: 1.5;
}

/* ---- 左列两张小卡 ---- */
.nc1-bt-card { padding: 1vw 1.1vw; display: flex; flex-direction: column; }
.nc1-bt-who {
  grid-column: 1 / 4; grid-row: 3;
  flex-direction: row; align-items: center; gap: 0.8vw;
}
.nc1-bt-ava { flex: none; width: 3.4vw; height: 3.4vw; border-radius: 50%; overflow: hidden; background: var(--nc1-card-2); }
.nc1-bt-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.nc1-bt-who-name { flex: 1 1 auto; min-width: 0; font-size: max(12px, 0.95vw); font-weight: 600; color: var(--nc1-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc1-bt-pill {
  flex: none; background: var(--nc1-ink); color: #fff; border-radius: 100vw;
  padding: 0.5vw 1vw; font-size: max(10px, 0.72vw); font-weight: 600; white-space: nowrap;
  transition: transform 0.18s var(--nc1-ease);
}
.nc1-bt-pill:hover { transform: translateY(-2px); }
.nc1-bt-palette { grid-column: 1 / 3; grid-row: 4; }
.nc1-bt-cap { font-size: max(10px, 0.78vw); font-weight: 600; letter-spacing: 0.04em; color: var(--nc1-dark-grey); }
.nc1-bt-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4vw; margin-top: 0.7vw; flex: 1 1 auto; min-height: 0; }
.nc1-bt-swatches i { display: block; height: 100%; border-radius: 0.5vw; }

/* ---- 两条长条：一条右对齐、一条左对齐 ---- */
.nc1-bt-bar { display: flex; align-items: center; padding: 0 1.6vw; gap: 0.9vw; }
.nc1-bt-bar.bar-a { grid-column: 4 / 13; grid-row: 3; flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.nc1-bt-bar.bar-b { grid-column: 3 / 11; grid-row: 4; }
.nc1-bt-idx { font-size: max(10px, 0.78vw); font-weight: 700; letter-spacing: 0.14em; color: var(--nc1-grey); }
.nc1-bt-bar-txt { display: flex; flex-direction: column; gap: 0.15vw; min-width: 0; }
.nc1-bt-bar-txt b { font-size: max(13px, 1.1vw); font-weight: 600; color: var(--nc1-ink); white-space: nowrap; }
.nc1-bt-bar-txt em { font-style: normal; font-size: max(10px, 0.78vw); color: var(--nc1-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc1-bt-bar { transition: transform 0.18s var(--nc1-ease); }
.nc1-bt-bar:hover { transform: translateY(-2px); }

/* ---- 右下角小角色卡 ---- */
.nc1-bt-mini {
  grid-column: 11 / 13; grid-row: 4;
  position: relative; overflow: hidden; display: block;
  background: var(--nc1-card-2);
}
.nc1-bt-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.nc1-bt-mini span {
  position: absolute; left: 0.7vw; bottom: 0.6vw; z-index: 2;
  background: var(--nc1-card); border-radius: 100vw; padding: 0.3vw 0.7vw;
  font-size: max(9px, 0.68vw); color: var(--nc1-dark-grey); white-space: nowrap;
}

/* ---- 最底那颗深色药丸：Try Lumi ---- */
.nc1-bt-cta {
  grid-column: 1 / 13; grid-row: 2;
  justify-self: center; align-self: center;
  background: var(--nc1-ink); color: #fff; border-radius: 100vw;
  padding: 0.95vw 3.4vw; font-size: max(11px, 0.86vw); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transform: scaleX(0.86); opacity: 0;
  transition: transform 0.9s var(--nc1-ease) 0.7s, opacity 0.5s ease 0.7s, background 0.2s ease;
}
body.nc1.is-ready .nc1-bt-cta { transform: scaleX(1); opacity: 1; }
.nc1-bt-cta { position: relative; z-index: 6; }
.nc1-bt-cta:hover { background: #000; }

/* 白框拿掉之后整套文字翻到浅色，层级重定：
   字标最重（纯白）→ 长条标题（白）→ 正文和注（白压到 76% / 62%） */
.nc1-bt-title { color: #fff; }
.nc1-bt-body { color: rgba(255, 255, 255, 0.78); }
.nc1-bt-who-name { color: #fff; }
.nc1-bt-cap { color: rgba(255, 255, 255, 0.7); }
.nc1-bt-bar-txt b { color: #fff; }
.nc1-bt-bar-txt em { color: rgba(255, 255, 255, 0.66); }
.nc1-bt-idx { color: rgba(255, 255, 255, 0.5); }
.nc1-bt-search { color: rgba(255, 255, 255, 0.78); border: 1px dashed rgba(255, 255, 255, 0.5); }
.nc1-bt-search:hover { color: #fff; }
/* mark 原来是白色方卡，现在只剩 mark 本身 */
.nc1-bt-mark { color: #fff; }
.nc1-bt-mark img { filter: brightness(0) invert(1); }
/* 小角色卡：白底没了，图自己带圆角，标题从白药丸变成一行白字 */
/* 小角色卡也不要那块浅底了：换成透明底的切图，人直接落在紫场上 */
.nc1-bt-mini { background: transparent; border-radius: 0; overflow: visible; }
.nc1-bt-mini img { object-fit: contain; object-position: 50% 100%; }
.nc1-bt-mini span {
  background: transparent; color: #fff; padding: 0;
  left: 0.6vw; bottom: 0.5vw; text-shadow: none;
}
.nc1-bt-ava { background: rgba(255, 255, 255, 0.18); }
/* 长条之间没有白底分界了，用一条发丝线把两条分开（她说细线可以） */
.nc1-bt-bar.bar-b { border-top: 1px solid rgba(255, 255, 255, 0.22); }

/* ---------------------------------------------- 主视觉：纵向贯穿卡片
   她是 grid 里的一个 item，占 2~4 行、整幅 12 列，
   justify-self: center 把画幅居中、align-self: end 把下沿压到第 4 行的下边线，
   所以整个人从大面板一路压到两条长条上，中间跨过两条沟。

   锚脸不锚盒子：--face-cx 是脸在图自身的横向百分比（03 = 46%，02 = 49%），
   translateX(50% - face) 把脸推到正中。
   --fig-max-w 是横向上限：46vw 是算过的 —— 左边那两张卡到 25vw 为止，中间留得下。
   两只手都不许裁，所以这一层永远不许 overflow: hidden。 */
/* 0808：这几个几何量从 .nc1-hstage 抬到 body 上 —— 因为现在有两层要吃它们：
   hero 里的衣服层 .nc1-hstage，和挂在壳上、越过下沿的人物层 .nc1-hperson。
   一处改，两层一起动，不会有一层忘了跟。 */
body.nc1 {
  --fig-ar: 1.0477;            /* 2900 / 2768 = lumi-pose-03 */
  /* 0807：整体放大。这张本来就是胯部裁切、没有腿脚，
     所以下沿被容器吃掉是可以的（她要的就是「裙子藏进画布里」）。
     **两只手仍然不许裁** —— 右上那只指尖在 y 1%、左下那只在 x 3% / y 93%，
     所以放开的是高度，横向上限还是按手的极值留的。 */
  --fig-max-w: 62vw;
  --fig-h: min(80vh, calc(var(--fig-max-w) / var(--fig-ar)));
  /* 0808 修：这个值一直是拍脑袋的 46%，量下来脸的中线（鼻尖那个白点 48.31%、
     嘴的中心 48.25%）在 48.3%。差的这 66px 让脸整个偏在版面中线右边，
     TRY LUMI 那颗药丸居中之后就显得人是歪的。锚点校到真实中线上。 */
  --face-cx: 48.3%;
  /* --fig-drop 只在下面「③ Lumi」那一段定义一次（按 --spill-overhang 算），
     这里不再给初值 —— 一个量两个出处，改的时候一定会漏掉一个。 */
}
.nc1-hstage {
  grid-column: 1 / 13; grid-row: 1;
  justify-self: center; align-self: end;
  transform: translateX(calc(50% - var(--face-cx))) translateY(var(--fig-drop));
  width: calc(var(--fig-h) * var(--fig-ar)); height: var(--fig-h);
  margin: 0; z-index: 5; pointer-events: none;
}
/* ?pose=02：lumi-pose-02，2900 × 2283，脸在 49% / 28%，构图更紧凑 */
body.nc1[data-pose="02"] { --fig-ar: 1.2703; --face-cx: 49%; }
/* 0808 拆图层：素材分成「人物层」（脸 / 头发 / 两只手和手臂）和
   「衣服层」（裙子 / 蝴蝶结 / 领子 / 袖口荷叶边），两张全画布透明底、
   同一个 rect 叠起来就还原原图，所以这两条规则完全一样。
   人物层永远不裁，衣服层被 hero 下沿吃掉 —— 唯一的边界是「衣服 / 非衣服」
   这个内容边界，不是画出来的线，所以任何断点都成立。 */
.nc1-hfig, .nc1-hdress {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-drag: none;
}
.nc1-hstage { position: relative; }

/* 卡片入场：boot 结束之后一张一张升起来，跟标题那两行同一条缓动 */
body.nc1.is-ready .nc1-bt-search { transition-delay: 0.42s; }
body.nc1.is-ready .nc1-bt-tools { transition-delay: 0.46s; }
body.nc1.is-ready .nc1-bt-panel { transition-delay: 0.5s; }
body.nc1.is-ready .nc1-bt-who { transition-delay: 0.56s; }
body.nc1.is-ready .nc1-bt-palette { transition-delay: 0.6s; }
body.nc1.is-ready .nc1-bt-bar.bar-a { transition-delay: 0.58s; }
body.nc1.is-ready .nc1-bt-bar.bar-b { transition-delay: 0.62s; }
body.nc1.is-ready .nc1-bt-mini { transition-delay: 0.66s; }
body.nc1.is-ready .nc1-bt-cta { opacity: 1; }
.nc1-hstage { opacity: 0; transition: opacity 0.5s ease 0.5s; }
body.nc1.is-ready .nc1-hstage { opacity: 1; }

/* nav 右上那颗 Try Lumi：首屏收起来，滚出 hero 才出现。
   首屏的主 CTA 是 bento 最底下那颗，两颗不在同一屏打架。 */
.nc1-nav-cta { opacity: 0; pointer-events: none; transition: opacity 0.24s ease; }
.nc1-nav.is-stuck .nc1-nav-cta { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------ backed */
.nc1-backed { border-top: 0; }

/* -------------------------------------------------- Lumi 试玩
   板块的版式、内容、交互全部是 A 的，一处没动。
   卡保持深墨（这一段是整页信息密度最高的地方，对比度优先），
   外面那圈换成浅粉，跟 hero 那块粉是同一家族。 */
.nc1-chat-line.lumi { background: var(--nc1-pink); color: var(--nc1-black); }
.nc1-chat-line.lumi b { color: rgba(43, 27, 61, 0.55); }
.nc1-live-badge { background: var(--nc1-pink); color: var(--nc1-black); }
.nc1-live-badge i { background: var(--nc1-black); }

/* -------------------------------------------------- CTA：紫场
   B 是粉场，C 是紫场，两个 option 在这里对调。 */
.nc1-cta { background: var(--nc1-violet); }
.nc1-cta-text h2 { color: #fff; }
.nc1-cta-icon { background: rgba(255, 255, 255, 0.16); border: 0; }
.nc1-cta .nc1-btn { background: #fff; border-color: #fff; color: var(--nc1-violet); }
.nc1-cta .nc1-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.nc1-cta .nc1-btn.ghost:hover { background: #fff; color: var(--nc1-violet); }

/* ------------------------------- 卡片一律不加外框，改实底 + 圆角 */
.nc1-dev-card { border: 0; background: var(--nc1-smoke); }
.nc1-dev-card .nc1-code { background: var(--nc1-black); }
.nc1-play-stage { border: 0; }
.nc1-play-chars button, .nc1-play-outfits button { border: 0; }
.nc1-play-chars button.is-on, .nc1-play-outfits button.is-on { outline: 2px solid var(--nc1-pink); outline-offset: -2px; }
.nc1-play-scenes button, .nc1-play-voices button { border: 0; background: #fff; }
.nc1-play-scenes button.is-on, .nc1-play-voices button.is-on { background: var(--nc1-black); color: #fff; }
.nc1-live-leave { border: 0; background: var(--nc1-smoke); }
.nc1-live-leave:hover { background: var(--nc1-black); color: #fff; }
.nc1-tcard-foot a { border-color: rgba(255, 255, 255, 0.35); }
.nc1-mon { border: 0; --mon-y: var(--nc1-pink); --mon-line: #F2E5EE; --mon-grey: #A695AE; --mon-dim: #6A5372; color: var(--nc1-black); background: #fff; }
.nc1-mon-bars i { background: #F2E5EE; }
.nc1-mon-alert.hard i { background: var(--nc1-black); }
.nc1-mon-tabs button.is-on { background: var(--nc1-black); }
.nc1-mon-env { border-color: var(--mon-line); }
.nc1-mon-row:hover { background: var(--nc1-smoke); }

/* cast 的格子底色不能跟着 --smoke 走。
   char-01..08 那批图自己烘了一层 #F5F5F5 实底，A 就是靠 tile 底色跟它一模一样
   才看不见接缝的。底色一改成粉/紫，图里那块灰就露出来了，所以这里钉死。 */
.nc1-wtile { background: #F5F5F5; }

/* ------------------------------------------------------------ 收尾 */
.nc1-footer { background: var(--nc1-black); }
.nc1-footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); }
.nc1-code-head { border-bottom-color: rgba(255, 255, 255, 0.14); }

/* ---------------------------------------------------------- 窄窗口
   她是拖窄桌面窗口看断点的，所以这一段按宽度走，不按触摸设备判断。 */
@media (max-width: 1100px) {
  /* bento 收一档：沟和圆角小一点，字标小一点，人像跟着收 */
  .nc1-hero { --bt-gap: 1vw; --bt-r: 1.8vw; }
  .nc1-bt-title { font-size: 6.4vw; }
  .nc1-bt-body { max-width: 26vw; }
  .nc1-bt-search { grid-column: 3 / 8; }
  .nc1-bt-tools { grid-column: 8 / 13; }
  body.nc1 { --fig-max-w: 66vw; --fig-h: min(80vh, calc(var(--fig-max-w) / var(--fig-ar))); }
}
@media (max-width: 767px) {
  /* 窄窗口 bento 拆成一列：顶栏 → 面板 → 人 → 两张小卡 → 两条长条 → 药丸。
     人不再压在卡片上（这么窄压上去只会糊成一团），改成单独一格居中。 */
  .nc1-hero { padding: 22vw var(--nc1-pad) 8vw; --bt-gap: 3vw; --bt-r: 4vw; }
  .nc1-bento { height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  .nc1-bt-search { grid-column: 1 / 3; grid-row: auto; padding: 3vw 4vw; font-size: 3.4vw; }
  .nc1-bt-search svg { width: 4vw; height: 4vw; }
  .nc1-bt-tools { grid-column: 1 / 3; grid-row: auto; }
  .nc1-bt-name { padding: 2.6vw 3vw; font-size: 3vw; }
  .nc1-bt-mark, .nc1-bt-icon { width: 10vw; height: 10vw; }
  .nc1-bt-panel { grid-column: 1 / 3; grid-row: auto; padding: 6vw 5vw; }
  .nc1-bt-title { font-size: 15vw; }
  .nc1-bt-body { max-width: none; font-size: 3.6vw; margin-top: 3vw; }
  .nc1-bt-who { grid-column: 1 / 3; grid-row: auto; padding: 3.4vw 4vw; }
  .nc1-bt-ava { width: 11vw; height: 11vw; }
  .nc1-bt-who-name { font-size: 4vw; }
  .nc1-bt-pill { padding: 2vw 4vw; font-size: 3vw; }
  .nc1-bt-palette { grid-column: 1 / 2; grid-row: auto; padding: 3.4vw 4vw; }
  .nc1-bt-cap { font-size: 3vw; }
  .nc1-bt-swatches { gap: 1.4vw; }
  .nc1-bt-swatches i { border-radius: 1.6vw; }
  .nc1-bt-mini { grid-column: 2 / 3; grid-row: auto; min-height: 26vw; }
  .nc1-bt-mini span { left: 2.4vw; bottom: 2.4vw; padding: 1.2vw 2.4vw; font-size: 2.6vw; }
  .nc1-bt-bar { grid-column: 1 / 3 !important; grid-row: auto !important; padding: 4vw 5vw; min-height: 16vw; }
  .nc1-bt-idx { font-size: 3vw; }
  .nc1-bt-bar-txt b { font-size: 4.4vw; }
  .nc1-bt-bar-txt em { font-size: 3vw; }
  .nc1-bt-cta { grid-column: 1 / 3; grid-row: auto; padding: 4vw 10vw; font-size: 3.4vw; }
  /* 窄窗口人像单独占一格居中，不再跨卡片 */
  body.nc1 {
    --fig-max-w: 88vw;
    --fig-h: calc(var(--fig-max-w) / var(--fig-ar));
  }
  .nc1-hstage {
    grid-column: 1 / 3; grid-row: auto;
    justify-self: center; align-self: auto;
  }
  .nc1-field-arc.a1 { top: 60vh; }
}

/* ------------------------------------------------------- 0807 hero 清理
   nav 里的 Log in：跟现有 nav 链接同一套字号字重，实底无框，
   放在 EN / JA 和 Try Lumi 中间。 */
.nc1-nav-login {
  font-size: var(--nc1-xs); font-weight: 500; white-space: nowrap;
  color: inherit; opacity: 0.78; transition: opacity 0.15s ease;
}
.nc1-nav-login:hover { opacity: 1; }
.nc1-nav:not(.is-stuck) .nc1-nav-login { color: #1B1633; }

/* 字标面板：卡片清空之后只剩这一行字标，垂直居中在 hero 中段 */
/* 字标钉在 hero 顶上那一段，她整个人在下面，字标永远不被挡 */
.nc1-bt-panel { justify-content: flex-start; padding: 0.4vw 0 0; }

/* Try Lumi 就地打开的框：实底 + 圆角，无描边无阴影。
   里面装的是下面试玩板块那个 PERSONAL CHAT 面板本体，JS 只是把节点搬进来。 */
/* 面板搬进来之后从绝对定位切回填满这个框，其它样式一条没改 */
/* 框开着的时候她往后让一点，别挡住框 */
body.nc1.is-trying .nc1-hstage { opacity: 0.35; transition: opacity 0.24s ease; }

/* ==============================================================
   0807 收尾层 —— 只做四件事，版式一格没动：
     ① nav：整块右移，Login 从纯文字变成次级按钮
     ② hero 字标：mark 已从 HTML 删掉，字号收一档
     ③ Lumi：再放开一档（她第三次说「要大」）
     ④ 圆角阶 + 卡片 hover 规则扫全部板块
   禁令自查：无渐变、无 drop shadow、卡片无 solid 外框、无装饰件。
   ============================================================== */

/* ---------------------------------------------------------- ① nav
   「这块往右边」：右边距从 2vw 收到 1vw，链接之间和右侧组的沟同时收紧，
   整个 About…Try Lumi 那一串往右挪，跟右边缘的关系更紧。 */
/* 0808：右边这组要真正靠到右边。两件事一起改 ——
   ① 右内边距原来是 1vw，只有左边（2vw）的一半，两头不对称；
      改成跟左边同一个值，而且用 clamp 卡住上下限，
      纯 vw 在超宽屏上会拉出很大的空、在窄屏上又贴到边。
   ② nav 里那颗 Try Lumi 在 hero 上是 opacity:0（滚动后才出现），
      但它一直占着 ~108px 的位置，把 EN/JA + Log in 整组往左顶。
      hero 上直接从流里拿掉，滚出去落白底再回来。 */
body.nc1 .nc1-nav {
  padding-left: clamp(20px, 2vw, 40px);
  padding-right: clamp(20px, 2vw, 40px);
  gap: 1.4vw;
}
.nc1-nav:not(.is-stuck) .nc1-nav-cta { display: none; }
body.nc1 .nc1-nav-links { gap: 1.7vw; }
body.nc1 .nc1-nav-right { gap: 0.6vw; }

/* 0808：EN/JA 和 Log in 原来一个 28.5px 高、一个 41.8px 高，差了 13px，
   并排放就是两个大小不一样的东西。改成共用同一个高度变量，各自的内边距
   只管左右，高度由变量定，以后加第三颗也不会再跑偏。 */
body.nc1 .nc1-nav-right { --nav-pill-h: clamp(32px, 2.6vw, 40px); }
body.nc1 .nc1-lang {
  height: var(--nav-pill-h); box-sizing: border-box;
  padding: 3px; align-items: stretch;
}
body.nc1 .nc1-lang button {
  display: flex; align-items: center; padding: 0 1.05vw; height: 100%;
}
body.nc1 .nc1-nav-login,
body.nc1 .nc1-nav.is-stuck .nc1-nav-cta {
  height: var(--nav-pill-h); box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
}

/* Login 是**次级** CTA：跟 Try Lumi 同一颗药丸的尺寸和圆角，
   但一个是实底描边的主 CTA，一个是安静的浅底按钮（无描边）。 */
body.nc1 .nc1-nav-login {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); border: 0;
  padding: 0.56vw 1.35vw; font-size: var(--nc1-xs); font-weight: 600;
  color: var(--nc1-black); background: rgba(27, 22, 51, 0.08);
  transition: background 0.18s ease, transform 0.18s var(--nc1-ease);
}
body.nc1 .nc1-nav-login:hover { background: rgba(27, 22, 51, 0.14); transform: translateY(-1px); }
/* Try Lumi 是主 CTA：实底，跟 Login 那颗安静按钮拉开一档。
   （首屏它本来就是收起来的，滚出 hero 才出现，跟 bento 里那颗不打架。） */
body.nc1 .nc1-nav-cta {
  padding: 0.56vw 1.35vw; font-weight: 600;
  background: var(--nc1-black); border-color: var(--nc1-black); color: #fff;
  transition: opacity 0.24s ease, transform 0.18s var(--nc1-ease), background 0.18s ease;
}
body.nc1 .nc1-nav-cta:hover { background: var(--nc1-black); color: #fff; transform: translateY(-1px); }
/* nav 压在紫场上那一段：安静按钮换成白色叠透明，实底紫上才读得出来 */
body.nc1 .nc1-nav:not(.is-stuck) .nc1-nav-login { color: #1B1633; background: rgba(255, 255, 255, 0.34); }
body.nc1 .nc1-nav:not(.is-stuck) .nc1-nav-login:hover { background: rgba(255, 255, 255, 0.52); }

/* ------------------------------------------------------- ② hero 字标
   mark 去掉之后整组收一档，别顶死 nav 也别跟 Lumi 抢。 */
/* 0808 她：「这个字可以小一点」。原来是 5vw，slogan 换成长句之后
   占了 6 行、吃掉 hero 一半高。收到 3.3vw，跟着屏幕比例走。
   0809f 她：「日语版本的这个设计 title 要大一点的，英文也是。」
   EN 3.3 → 3.9vw（上一档），行宽同步 40 → 45vw，行数不变还是三行。
   JA 单独多加一档，见下面 :lang(ja) 那几条 —— 假名和汉字的字面比拉丁字母
   小一圈（Noto Sans JP 的字面率 ≈ 0.88），同一个 px 值日文永远看着轻，
   所以两种语言各调各的，不共用一个数。 */
body.nc1 .nc1-bt-title { font-size: 3.9vw; }

/* 0808 她：「字是小了，但要稍微宽一点，不能一个词一句」。
   原因是 .nc1-line 是个 flex item，宽度被算成了 **min-content**
   —— 容器明明有 1382px 可用，它却按最长那个单词（274px）换行。
   给它一个明确的宽度，换行才由版面说了算，不由最长单词说了算。 */
body.nc1 .nc1-bt-title .nc1-line { width: 45vw; }
body.nc1 .nc1-bt-title .nc1-line > span { display: block; width: 100%; }

/* 日文：.nc1-line 是 overflow:hidden（入场动画要它裁），
   配上 line-height 0.88 会把假名和汉字的下半截切掉 —— 她看到的
   「下面还有一条线把字砍了」就是这个。日文单独放开行高。 */
:lang(ja) body.nc1 .nc1-bt-title { line-height: 1.18; }
:lang(ja) body.nc1 .nc1-bt-title .nc1-line {
  /* 上面 1074 行有一条老规则把日文标题锁成 white-space: nowrap，
     那是给原来那句短字标（ANIMATED WAFFLE）写的。换成长 slogan 之后
     它不换行、直接被 overflow:hidden 切掉 —— 她看到的「下面有条线把字砍了」。
     这里放开换行，并给行高留出假名和汉字的下半截。 */
  width: 38vw; white-space: normal; padding-bottom: 0.14em;
  line-break: strict; overflow-wrap: anywhere;
}
/* 0809f 日文比英文再多加一档：EN 是 ×1.18（3.3 → 3.9），JA 是 ×1.29
   （2.6 → 3.35）。这多出来的一档是**视觉等重**的差价，不是拍脑袋 ——
   日文字面小一圈，跟 EN 用同一个比例放大之后还是比 EN 轻。
   放大后 JA / EN 的字号比从 0.79 抬到 0.86，两版在版面上的分量才对齐。 */
:lang(ja) body.nc1 .nc1-bt-title { font-size: 3.35vw; }

/* --------------------------------------------------------- ③ Lumi
   0808 第四次「还是不够大」。这一档是「两只手都不裁」能到的几何上限：
   右上那只指尖在图的 y 1%、左下那只在 y 93%，两点之间是图高的 92%，
   要它们都留在画面里，图高最多 ≈ 视口 / 0.92 → 所以 107vh 就是天花板。
   顶边不再给 nav 留白（nav 是透在场里的，指尖顶到画面最上沿）。

   0808 追加：她说「指尖可以出画」，那条 0.93 的底线就作废了，
   于是直接冲到 122vh —— 上面那只手整只留在画里（指尖压着最上沿），
   下面那只手保住手腕和手掌，只有向下伸的那几根指尖被下沿吃掉。
   横向上限提到 96vw 只是为了让高度当唯一的闸，脸锚在 46% 不变，
   左手最外侧在图的 x 3%，这个宽度下离左边还有余量，横向一格不裁。 */
body.nc1 {
  --fig-max-w: 96vw;
  --fig-h: min(122vh, calc(var(--fig-max-w) / var(--fig-ar)));

  /* 0808 换写法：探出 hero 下沿的量，从**跟视口走**改成**跟人像自己走**。
     原来 --fig-drop 是一个 vh 值，各个断点各写一份（桌面 33.5vh、
     ≤1100 是 20vh），结果同一只手在 1024 宽只探出 87px、在 1440 探出 215px，
     下沿落在人像身上的位置从 80.4% 跳到 89.3% —— 断点之间不是同一个设计。

     现在直接按人像高度的一个比例来定：下沿永远落在人像的同一处，
     不管视口多大多小、也不管高度是被 vh 还是被 vw 卡住的。

     0808 再修：光换公式还不够 —— 本体当时还是个 grid item，align-self: end
     贴的是 bento **第一行**的下沿，不是 hero 下沿，中间还隔着「药丸那一行 + 一条沟」，
     而那两截是 vw 量、--fig-h 是 vh 量，窗口比例一变它们的比就变，
     实测下沿还是在 79.3%~81.0% 之间飘。现在本体也按 hero 下沿反算
     （见下面 ③b 里的 body.nc1 .nc1-hstage），这条公式才真的说了算。

     ★ --spill-overhang 是这套几何**唯一**的入口：
       下沿落在人像的 (1 − overhang) 处 = 80.25%，跟改之前桌面上量到的
       80.26% 是同一处，所以桌面看不出变化，窄窗口才被拉回来对齐。
       **任何断点都不许再单独覆盖 --fig-drop**，要动就动这一个数。 */
  --spill-overhang: 0.1975;
  --fig-drop: calc(var(--nc1-pad) + var(--fig-h) * var(--spill-overhang));
}
/* 窄窗口把上面这几档接回去 —— 这一层带 body.nc，权重比上面那两个
   媒体查询高，不在这里重写的话窄窗口会被桌面档盖掉。 */
@media (max-width: 1100px) {
  /* 0809f 跟着桌面档一起上一档：EN ×1.18、JA ×1.29，两版比例跟桌面一致 */
  body.nc1 .nc1-bt-title { font-size: 5.2vw; }
  :lang(ja) body.nc1 .nc1-bt-title { font-size: 4.4vw; }
  body.nc1 .nc1-bt-title .nc1-line { width: 52vw; }
  :lang(ja) body.nc1 .nc1-bt-title .nc1-line { width: 46vw; }
  body.nc1 {
    /* 窄窗口横向才是闸：脸锚在 46%，右手最外侧要到图宽的 100%，
       所以窗口一窄，先出画的是右手而不是裙摆。放到 100vw 为止 ——
       右手只掉几个指尖，再宽就整只手都出去了。 */
    --fig-max-w: 100vw;
    --fig-h: min(106vh, calc(var(--fig-max-w) / var(--fig-ar)));
    /* --fig-drop 不在这里重写：它按 --spill-overhang 跟着人像高度算，
       所以这一档的下沿位置跟桌面档完全一致。 */
  }
  body.nc1 .nc1-nav { gap: 1.6vw; }   /* 内边距走上面那条 clamp，两头始终对称 */
}
@media (max-width: 767px) {
  /* ≤767 这一档 hero 是竖排的，字标上面就是 nav、下面才是人，
     加大不会压到 Lumi，所以照桌面同一个比例往上抬一档。 */
  body.nc1 .nc1-bt-title { font-size: 10.4vw; }
  :lang(ja) body.nc1 .nc1-bt-title { font-size: 8.2vw; }
  body.nc1 .nc1-bt-title .nc1-line,
  :lang(ja) body.nc1 .nc1-bt-title .nc1-line { width: 100%; }
  body.nc1 {
    --fig-max-w: 88vw;
    --fig-h: calc(var(--fig-max-w) / var(--fig-ar));
    /* --fig-drop 这里也不重写：这一档人像是静态定位的，压根不吃它。 */
  }
  body.nc1 .nc1-nav-login, body.nc1 .nc1-nav-cta { padding: 2.2vw 3.6vw; font-size: 2.5vw; line-height: 1; }
}

/* ------------------------------------------------------- ③a 眨眼
   0808 她说「你眨眼，我们那块是可以动的」。
   不换整张图 —— 只把闭眼那一版的**两只眼睛**切出来当贴片
   （lumi-pose-03-blink，羽化边 + 按原图的肤色校过色），
   盖在本体眼睛上，用 opacity 一闪一闪。贴片只有眼睛那一小块，
   所以脸、头发、手一个像素都不会跟着抖。

   位置是按图自身的百分比写死的（原图 x1020-1820 / y800-1600），
   所以人不管放多大、往哪挪，眼睛永远对得上，不用 JS 跟。
   节奏（0808 她说「眨的速度太快了」，整体放慢）：
   7.6 秒一轮，闭眼约 200ms，前后各 38ms 过渡。原来是 6.4 秒一轮、
   闭眼 100ms 还带一次补眨，太急了，现在是一次慢眨，安静很多。 */
.nc1-hblink {
  position: absolute;
  left: 35.1724%; top: 28.9017%;
  width: 27.5862%; height: 28.9017%;
  opacity: 0; pointer-events: none;
  user-select: none; -webkit-user-drag: none;
  animation: nc1-blink 7.6s linear infinite;
}
@keyframes nc1-blink {
  0%, 95.4%    { opacity: 0; }
  95.9%, 97.6% { opacity: 1; }
  98.1%, 100%  { opacity: 0; }
}
/* 02 是另一张图，眼睛不在这个位置 */
body.nc1[data-pose="02"] .nc1-hblink { display: none; }
@media (prefers-reduced-motion: reduce) { .nc1-hblink { animation: none; } }

/* --------------------------------------------- ③b 越过 hero 下沿的人
   她要的是：人（手、头发）越过 hero 下沿伸到下一屏上去，衣服还是卡在页面里。

   0808 重做：**不再用遮罩、不再拿一条线去裁**。
   之前是同一张整图画两遍，外面那遍用 `lumi-pose-03-hand-mask.png` 只留左下角那只手，
   于是下沿以下右边一整片头发被整个丢掉 —— 看着就是头发被水平砍断，
   而且那条线是逐行量出来的，换个断点就不成立。

   现在素材按**内容**拆成两层（两张全画布透明底、叠起来还原原图）：
     · 人物层 …-body.webp   脸 / 头发 / 两只手和手臂 → 完整画，永不裁
     · 衣服层 …-dress.webp  裙子 / 蝴蝶结 / 领子 / 袖口 → 只画在 hero 里，被下沿吃掉
   衣服层只挂在 hero 里的 .nc1-hstage 上，hero 自己的 overflow: hidden 就是那一刀，
   所以「衣服卡在页面内」是白拿的，没有第二条裁切线。

   人物层挂在 hero 外面（hero 必须留着 overflow: hidden，裙摆、三道圆弧靠它收边），
   所以它一处都不被裁 —— **没有裁切就不可能有接缝**，这是整套做法的全部保证。
   两层的 alpha 实测零重叠、叠回去跟原图逐像素一致，所以谁在上面都不影响画面。

   人物层的位置由 js/option-c1-lumi.js 的 sync() 实测衣服层 .nc1-hstage 的 rect
   照抄，下面这几行只是 JS 没跑起来时的兜底，公式跟衣服层那条一模一样。 */
.nc1-herowrap {
  position: relative;
  /* 0819 r12 顺手修：768–1024 档 .nc1-hperson 右缘超出视口 13–15px，
     整页多出一条横向滚动。只裁横向；人物越过 hero 下沿的竖向出血
     （overflow-y visible）不受影响。 */
  overflow-x: clip;
}
.nc1-hperson {
  position: absolute; z-index: 6; pointer-events: none;
  left: 50%; bottom: calc(var(--nc1-pad) - var(--fig-drop));
  width: calc(var(--fig-h) * var(--fig-ar)); height: var(--fig-h);
  transform: translateX(calc(-1 * var(--face-cx)));
  /* 没有 clip-path、没有 mask、没有 overflow —— 这一层永远完整 */
  user-select: none; -webkit-user-drag: none;
  opacity: 0; transition: opacity 0.5s ease 0.5s;
}
body.nc1.is-ready .nc1-hperson { opacity: 1; }
/* Try Lumi 打开时：面板在 bento 里（z-index 8，压在 bento 的 2 上），
   人物层挂在壳上，不落回 bento 下面的话会盖住面板。
   所以这一刻把人物层压到 bento 底下去，透明度跟衣服层一样压到 0.35。 */
body.nc1.is-trying .nc1-hperson {
  z-index: 1; opacity: 0.35; transition: opacity 0.24s ease;
}
/* pose-02 还没拆图层，那一档只有整图这一层：衣服层不出，
   人物层照旧切在 hero 下沿上（--person-cut 由 js 量出来）。 */
body.nc1[data-pose="02"] .nc1-hdress { display: none; }
body.nc1[data-pose="02"] .nc1-hperson {
  clip-path: inset(0 0 var(--person-cut, 0px) 0);
}

/* --------------------------------------------- ③c 人像本体的定位
   ★ 这一段和上面那段是同一套几何，唯一的入口是 --spill-overhang。

   0808 修（她说「探出去的量各个断点不一样」）：
   本体原来是 grid item，align-self: end 贴的是 bento **第一行**的下沿，
   而第一行下沿 = hero 下沿 − 内边距 − 药丸那行的高 − 一条沟；
   后面那两截是 vw 量、--fig-h 是 vh 量，窗口比例一变两者的比就变，
   实测下沿落在人像身上的位置在 79.31% ~ 80.98% 之间飘（差 1.68 个百分点）。

   现在衣服层也按 hero 下沿反算，跟 .nc1-hperson 用同一条公式：
     下沿 = hero 下沿 + --fig-h × --spill-overhang
   grid-area 写死成整幅，是为了让绝对定位的包含块 = 整个 bento 盒子
   （不写的话包含块会退回「第一行」那个格子，等于把上面那个 bug 又装回来）。
   绝对定位不参与轨道计算，所以 bento 的行高、其它卡片一个像素都没动。

   **任何断点都不许再单独覆盖 --fig-drop / 这里的 bottom**，要调就调 --spill-overhang。 */
body.nc1 .nc1-hstage {
  position: absolute; grid-area: 1 / 1 / -1 / -1;
  left: 50%; bottom: calc(-1 * var(--fig-drop));
  width: calc(var(--fig-h) * var(--fig-ar)); height: var(--fig-h);
  transform: translateX(calc(-1 * var(--face-cx)));
  margin: 0; z-index: 5; pointer-events: none;
}
/* ≤767 人像是流里的一格（bento 拆成一列、也没有伸出去那一层），
   所以这一档把它放回静态定位，横向锚点换回 grid item 的写法。 */
@media (max-width: 767px) {
  body.nc1 .nc1-hstage {
    position: static; grid-area: auto; grid-column: 1 / 3;
    justify-self: center; align-self: auto;
    transform: translateX(calc(50% - var(--face-cx)));
  }
}

/* ------------------------------------------------------- ④ 圆角阶
   五档，嵌套永远外大内小（卡 40 里放代码块 24、面板 56 里放 chat 24）。 */
:root {
  --r-pill: 100px;
  --r-row: clamp(10px, 1vw, 14px);
  --r-inset: clamp(16px, 1.7vw, 24px);
  --r-card: clamp(24px, 2.9vw, 40px);
  --r-panel: clamp(30px, 4vw, 56px);
}

/* pill —— 按钮 / chip / 贴纸 / SOON / 状态药丸 / 语言键 */
body.nc1 .nc1-btn,
body.nc1 .nc1-nav-cta,
body.nc1 .nc1-nav-login,
body.nc1 .nc1-lang,
body.nc1 .nc1-lang button,
body.nc1 .nc1-live-badge,
body.nc1 .nc1-live-leave,
body.nc1 .nc1-tcard-foot a,
body.nc1 .nc1-wtile[data-tag]::after,
body.nc1 .nc1-wtile .nc1-wtile-cap,
body.nc1 .nc1-play-cap,
body.nc1 .nc1-play-scenes button,
body.nc1 .nc1-play-voices button,
body.nc1 .nc1-mon-tabs button,
body.nc1 .nc1-mon-env,
body.nc1 .nc1-mon-live,
body.nc1 .nc1-bt-cta,
body.nc1 .nc1-bt-pill,
body.nc1 .nc1-bt-search,
body.nc1 .nc1-bt-name,
body.nc1 .nc1-eyebrow i { border-radius: var(--r-pill); }
body.nc1 .nc1-eyebrow i { border-radius: 50%; }

/* 行 —— 列表行、选择格 */
body.nc1 .nc1-api-row,
body.nc1 .nc1-mon-row,
body.nc1 .nc1-mon-alert,
body.nc1 .nc1-play-chars button,
body.nc1 .nc1-play-outfits button,
body.nc1 .nc1-bt-swatches i,
body.nc1 .nc1-chat-line.lumi { border-radius: var(--r-row); }

/* 内嵌 —— 代码块 / monitoring / chat / play-stage */
body.nc1 .nc1-code,
body.nc1 .nc1-mon,
body.nc1 .nc1-report,
body.nc1 .nc1-play-stage{ border-radius: var(--r-inset); }
body.nc1 .nc1-play-char.is-card { border-radius: calc(var(--r-inset) * 0.7); }

/* 卡片 —— 产品卡 / 服务卡 / 名册卡 */
body.nc1 .nc1-dev-card,
body.nc1 .nc1-tcard,
body.nc1 .nc1-wtile,
body.nc1 .nc1-about-card,
body.nc1 .nc1-cta-icon { border-radius: var(--r-card); }

/* 面板 —— 大白面板 / 整块底 */
body.nc1 .nc1-footer { border-radius: var(--r-panel) var(--r-panel) 0 0; }

/* 卡片 hover：只用位移，不用阴影。180ms + 入场同一条缓动。
   .nc1-tcard 不进来 —— 那张卡的 transform 是滑轨在驱动的，碰了会打架。 */
body.nc1 .nc1-dev-card,
body.nc1 .nc1-wtile,
body.nc1 .nc1-about-card {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
body.nc1 .nc1-dev-card:hover,
body.nc1 .nc1-wtile:hover,
body.nc1 .nc1-about-card:hover { transform: translateY(-4px); }

/* 焦点环：全站走品牌紫，footer 那块深底上换白（紫压深紫等于看不见）。
   选择器带 body.nc1 才压得过上面同名的同权重规则。 */
body.nc1 :focus-visible {
  outline: 2px solid var(--nc1-violet);
  outline-offset: 2px; border-radius: 2px;
}
body.nc1 .nc1-footer :focus-visible { outline-color: #FFFFFF; }

/* ==============================================================
   OPTION C1 差异层 —— 0807
   C1 = C 的骨架，把下面这几块换成 **Option 8** 的做法。
   8 的文件（option-a-c8-violet.html / css/option-a-c8.css）是只读参考，
   一个字节都没动，这里是照着它的色板和版式在 C 的 markup 上重新落的。

   逐块：
     About              → 换 8 的版本（整片 #7180FF 实底 + 白字 + 白药丸行）
     产品卡（滑轨）     → **滚动动效一行没动**，只把卡从深藏青换成 8 那套
                          #7180FF 实底紫 + 白字 + 反相白药丸 Explore
     For developers     → 换 8 的版本（淡底 + 白卡 + 紫标题 + 淡紫行）
     Lumi 试玩          → 保持 C 的，一处没动
     For everyone       → 换 8 的**颜色和排版**；Monitoring / Studio 两张大卡
                          里的功能、内容、mock 全部还是 C 的
     Monitoring + Studio→ 保持 C 的设计
     CTA                → 保持 C 的
     FAQ                → 换成 8 那一屏「人 + 问题」：Lumi 压在 CTA / FAQ 的
                          分界线上，问题在她旁边展开
   禁令自查：无渐变、无 drop shadow、卡片无 solid 外框、无装饰件、无新增文案。
   ============================================================== */

body.nc1 {
  --c8-violet: #7180FF;
  --c8-lav: #E3E0FF;          /* 比品牌紫淡一档的那支，8 的 products / faq 底 */
  --c8-cream: #FAF9FF;        /* 8 的 dev / services 底 */
  --c8-ink: #241C4E;
}

/* ---------------------------------------------------------- About
   8 的做法：整片 #7180FF 实底、白字、左边巨号标题 + 白药丸按钮，
   右边正文 + 三条半透明白的信息行（行不是描边表格，是实底行）。 */
body.nc1 .nc1-about {
  background: var(--c8-violet); color: #fff;
  /* 0808 她：WHO WE ARE 整块往下一点 —— 只加上方留白，下边不动，
     顺带给越过 hero 下沿那截头发和手多留出一段干净的空场。 */
  padding: clamp(120px, 14vw, 240px) var(--nc1-pad) clamp(72px, 9vw, 150px);
  grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 96px);
}
body.nc1 .nc1-about .nc1-eyebrow { color: rgba(255, 255, 255, 0.78); }
body.nc1 .nc1-about .nc1-eyebrow i { background: #fff; }
body.nc1 .nc1-about h2 {
  margin: 24px 0 48px; max-width: 13ch;
  font-size: clamp(36px, 6.2vw, 100px); font-weight: 900;
  line-height: 0.98; letter-spacing: -0.03em; color: #fff;
}
body.nc1 .nc1-about .nc1-btn.ghost {
  background: #fff; border: 0; color: var(--c8-violet); font-weight: 600;
}
body.nc1 .nc1-about .nc1-btn.ghost:hover { background: #fff; color: var(--c8-violet); transform: translateY(-2px); }
/* 右边那张卡的白底拿掉：8 这一屏是「紫上直接放行」，不是卡里放行 */
body.nc1 .nc1-about-card { background: transparent; padding: 0; gap: 6px; }
body.nc1 .nc1-about-card p {
  color: #fff; margin: 0 0 48px;
  font-size: clamp(16px, 1.28vw, 23px); line-height: 1.62;
}
body.nc1 .nc1-about-card .row {
  display: grid; grid-template-columns: 13ch 1fr; gap: 24px;
  border: 0; border-radius: var(--r-row);
  background: rgba(255, 255, 255, 0.15); color: #fff;
  padding: 14px 18px; margin-bottom: 6px;
}
body.nc1 .nc1-about-card .row b {
  font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: clamp(10px, 0.68vw, 12px); opacity: 0.72;
}

/* ------------------------------------------------- 产品卡（滑轨）
   **滚动动效一行没动** —— .nc1-tcard 的 transform / opacity / 时序
   还是 C 那套 sticky 3D 滑轨，这里只换颜色。
   卡：深藏青 → #7180FF 实底 + 白字。
   Explore：描边 → 反相白实底 + 紫字（跟 8 一样，也跟 CTA 那屏一致）。 */
body.nc1 .nc1-tcard { background: var(--c8-violet); color: #fff; }
body.nc1 .nc1-tcard h3 { color: #fff; }
body.nc1 .nc1-tcard p { color: rgba(255, 255, 255, 0.9); }
body.nc1 .nc1-tcard-top { color: rgba(255, 255, 255, 0.62); }
body.nc1 .nc1-tcard-foot .nc1-tcard-meta { color: rgba(255, 255, 255, 0.6); }
body.nc1 .nc1-tcard-foot a {
  border: 0; background: #fff; color: var(--c8-violet); font-weight: 600;
  transition: transform 0.16s var(--nc1-ease);
}
body.nc1 .nc1-tcard-foot a:hover { background: #fff; color: var(--c8-violet); transform: translateX(3px); }

/* --------------------------------- For developers / For everyone
   8 的版本：整屏换成淡底 #FAF9FF，section head 是「小 eyebrow + 巨号 900 标题
   + 一段 ≤62ch 的正文」，卡是白实底大圆角、标题走品牌紫、
   信息行是淡紫实底行。
   **只换颜色和排版** —— 卡里的功能、内容、代码块、monitoring 面板、
   studio 试玩全部还是 C 的，一个节点都没换。 */
body.nc1 .nc1-dev { background: var(--c8-cream); padding: clamp(72px, 9vw, 150px) var(--nc1-pad); }
body.nc1 .nc1-dev-head { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 96px); }
body.nc1 .nc1-dev-head h2 {
  margin: 24px 0 24px;
  font-size: clamp(36px, 6.2vw, 100px); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.035em; color: var(--c8-ink);
}
body.nc1 .nc1-dev-head p {
  max-width: none; font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.62; color: rgba(36, 28, 78, 0.82);
}
body.nc1 .nc1-dev-grid { gap: clamp(20px, 3vw, 56px); }
body.nc1 .nc1-dev-card {
  background: #fff; border: 0;
  padding: clamp(20px, 2.4vw, 40px);
}
body.nc1 .nc1-dev-card h3 {
  color: var(--c8-violet); font-weight: 900;
  font-size: clamp(26px, 3.5vw, 58px); line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 20px;
}
body.nc1 .nc1-dev-tag { color: rgba(36, 28, 78, 0.6); }
body.nc1 .nc1-dev-card > p { color: rgba(36, 28, 78, 0.86); }
body.nc1 .nc1-dev-sub { color: rgba(36, 28, 78, 0.66); }
body.nc1 .nc1-dev-below { color: rgba(36, 28, 78, 0.86); }
/* 信息行：描边表格 → 淡紫实底行 */
body.nc1 .nc1-api-row {
  border: 0; background: var(--c8-lav); color: var(--c8-ink);
  padding: 14px 18px; margin-bottom: 6px;
}
body.nc1 .nc1-api-row b { font-weight: 600; }
body.nc1 .nc1-api-row span { color: rgba(36, 28, 78, 0.66); }
/* 卡底的按钮：主的走品牌紫实底，次的走安静淡紫 */
body.nc1 .nc1-dev-btn { border: 0; background: var(--c8-violet); color: #fff; font-weight: 600; }
body.nc1 .nc1-dev-btn:hover { background: var(--c8-violet); color: #fff; }
body.nc1 .nc1-dev-btn.ghost { background: var(--c8-lav); color: var(--c8-ink); }
body.nc1 .nc1-dev-btn.ghost:hover { background: #D6D1FF; color: var(--c8-ink); }

/* ------------------------------------------------------------ FAQ
   8 那一屏搬过来：CTA（#7180FF）和 FAQ（#E3E0FF）之间那条真实分界线
   由 Lumi 自己承担 —— 她的水平下缘就是那条线，问题在她旁边展开。
   人是 FAQ 的孩子，bottom: 100% 顶上去压在 CTA 的紫上，
   所以 CTA 那一段的 markup 和视差 chip 全都没动。 */
body.nc1 .nc1-faq {
  position: relative; background: var(--c8-lav); color: var(--c8-ink);
  padding: clamp(72px, 9vw, 150px) var(--nc1-pad) clamp(72px, 9vw, 150px);
  grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 5vw, 96px);
  align-items: start;
}
body.nc1 .nc1-lean {
  position: absolute; z-index: 3; pointer-events: none; display: block;
  right: clamp(6px, 3vw, 60px); bottom: 100%; margin-bottom: -1px;
  width: clamp(220px, 28vw, 410px); height: auto;
}
body.nc1 .nc1-faq .nc1-eyebrow { color: rgba(36, 28, 78, 0.66); }
body.nc1 .nc1-faq .nc1-eyebrow i { background: var(--c8-violet); }
body.nc1 .nc1-faq h2 {
  margin: 24px 0 0; font-size: clamp(36px, 6.2vw, 100px); font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.92; color: var(--c8-ink);
}
body.nc1 .nc1-faq details { border-top: 1px solid rgba(36, 28, 78, 0.22); }
body.nc1 .nc1-faq details:last-child { border-bottom: 1px solid rgba(36, 28, 78, 0.22); }
body.nc1 .nc1-faq summary {
  padding: 24px 0; font-size: clamp(19px, 1.85vw, 30px);
  font-weight: 600; letter-spacing: -0.015em; color: var(--c8-ink);
}
body.nc1 .nc1-faq summary::after { color: rgba(36, 28, 78, 0.6); }
body.nc1 .nc1-faq details p {
  max-width: 56ch; margin: 0 0 32px;
  font-size: clamp(15px, 1.05vw, 19px); line-height: 1.68;
  color: rgba(36, 28, 78, 0.94);
}

/* CTA 那一屏留出人趴的位置：她压在下沿，中间的按钮别被盖住 */
body.nc1 .nc1-cta { padding-bottom: clamp(120px, 15vw, 240px); }
/* 右半边那四颗视差 chip 收起来：Lumi 现在占着 CTA 的右下角，
   chip 飘到她身上就是两件东西打架。左半边那四颗留着，视差逻辑没动。
   （按 nth-child 认，不按 inline style 认 —— 视差脚本会重写 style 属性。） */
body.nc1 .nc1-cta > .nc1-cta-icon:nth-child(3),
body.nc1 .nc1-cta > .nc1-cta-icon:nth-child(4),
body.nc1 .nc1-cta > .nc1-cta-icon:nth-child(7),
body.nc1 .nc1-cta > .nc1-cta-icon:nth-child(8) { visibility: hidden; }

/* 卡片 hover：产品滑轨那张不碰（transform 是滑轨在驱动的） */
body.nc1 .nc1-dev-card { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
body.nc1 .nc1-dev-card:hover { transform: translateY(-4px); }

/* 窄窗口：8 在 1080 就把这三块拆成一列，C1 跟上 */
@media (max-width: 1080px) {
  body.nc1 .nc1-about,
  body.nc1 .nc1-dev-grid,
  body.nc1 .nc1-faq { grid-template-columns: 1fr; }
  body.nc1 .nc1-lean { width: clamp(200px, 40vw, 340px); right: 2vw; }
}

/* 换过来这三块的 eyebrow 跟 8 一致：全大写 + 字距，小点是圆的 */
body.nc1 .nc1-about .nc1-eyebrow,
body.nc1 .nc1-dev .nc1-eyebrow,
body.nc1 .nc1-faq .nc1-eyebrow {
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: clamp(10px, 0.68vw, 12px);
}

/* 日文：假名比拉丁宽，13ch / 62ch 那两个上限在日文下会把标题撑成四行。
   只收字号和行宽，版式一格没动。 */
:lang(ja) body.nc1 .nc1-about h2 { font-size: clamp(28px, 4.4vw, 70px); max-width: 15ch; }
:lang(ja) body.nc1 .nc1-dev-head h2,
:lang(ja) body.nc1 .nc1-faq h2 { font-size: clamp(28px, 4.4vw, 70px); }
:lang(ja) body.nc1 .nc1-dev-card h3 { font-size: clamp(22px, 2.6vw, 42px); }
:lang(ja) body.nc1 .nc1-about-card .row b,
:lang(ja) body.nc1 .nc1-about .nc1-eyebrow,
:lang(ja) body.nc1 .nc1-dev .nc1-eyebrow,
:lang(ja) body.nc1 .nc1-faq .nc1-eyebrow { letter-spacing: 0.06em; }


/* ============================================================ footer 统一
   0807：老的深藏青底 + 巨号 NARYA.AI 下线，换成跟 Option B / Option 8 一样的收尾。
   底色 #7180FF（hero 那支紫），落款 = Animated Waffle 的 lockup（mark + 两行字标）
   + 下面一行 Narya AI。品牌层级是全站定的：Animated Waffle 是产品，Narya AI 是公司。

   层级照 mira 在 #7180FF 上量完的准数，逐字跟 B 一致：
     字标 lockup   #FFFFFF                3.37:1（这块底上白字的天花板）
     字标 hover    #E3E0FF                2.63:1  ← 退一档色温，不是往深走
     链接          #FFFFFF · opacity .92  3.10:1
     链接 hover                opacity 1  3.37:1
     署名          #FFFFFF · opacity .80  2.72:1
     版权          #FFFFFF · opacity .68  2.38:1
     栏目标题      #FFFFFF · opacity .58  2.12:1
     分隔线        rgba(255,255,255,.22)  1.35:1
     焦点环        #FFFFFF 2px            3.37:1

   接缝：footer 上面那屏量过了，是 .nc1-faq 那块 #E3E0FF，跟 #7180FF 正好是 2.63:1，就是 mira 定「不加硬边」时的那个前提，
   所以跟 B 一样不加硬边，块对比本身够读。

   选择器一律带 body.nc1 —— 文件上面 `.nc1-footer { background: var(--nc1-black); }`
   是同权重的，不加 body 压不过去。 */
body.nc1 .nc1-footer {
  --fm-bg: #7180FF;             /* = hero 那支紫 */
  background: var(--fm-bg); color: #fff;
  padding-bottom: 1.6vw;
}
body.nc1 .nc1-footer-col b { color: #FFFFFF; opacity: 0.58; }                     /* 栏目标题 */
body.nc1 .nc1-footer-col a { color: #FFFFFF; opacity: 0.92; transition: opacity 0.15s ease; }
body.nc1 .nc1-footer-col a:hover { opacity: 1; }                                  /* 链接 → 100% */
/* 版权那行：opacity 挂在两个 span 上，不挂容器 —— 挂容器会把分隔线一起乘掉。 */
body.nc1 .nc1-footer-bottom { color: #FFFFFF; opacity: 1; border-top-color: rgba(255, 255, 255, 0.22); }
body.nc1 .nc1-footer-bottom > span { color: #FFFFFF; opacity: 0.68; }

/* lockup 的比例和对齐规则跟 B 逐字一致：
     mark = 两行字标块的 1.22 倍、间距 = mark 的 0.26、
     line-height 0.88、letter-spacing -0.035em、
     Narya AI 对齐**字标**左沿再补 0.06em 抵掉负字距。
   一个 --fm-size 驱动整组，换尺寸比例不漂。 */
.nc1-footer-lockup {
  --fm-size: 5.4vw;
  display: flex; align-items: center; gap: calc(var(--fm-size) * 1.76 * 0.26);
  margin: 0 0 2.6vw;
}
body.nc1 .nc1-footer-lockup { color: #FFFFFF; transition: color 0.18s ease; }
body.nc1 .nc1-footer-lockup:hover { color: #E3E0FF; }
.nc1-footer-lockup .awm {
  position: relative; flex: none;
  width: calc(var(--fm-size) * 1.76 * 1.22); aspect-ratio: 1;
  min-width: 54px;
}
.nc1-footer-lockup .awm i {
  position: absolute; inset: 0; display: block; background: currentColor;
  -webkit-mask-image: url(../assets/logos/animated-waffle-mark.svg);
  mask-image: url(../assets/logos/animated-waffle-mark.svg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.nc1-footer-lockup-txt { display: grid; gap: 0.5vw; min-width: 0; }
.nc1-footer-lockup-txt b {
  font-size: var(--fm-size); font-weight: 900; line-height: 0.88;
  letter-spacing: -0.035em; text-transform: uppercase;
  width: min-content;           /* 断成 ANIMATED / WAFFLE 两行，跟顶栏同一个断法 */
}
:lang(ja) .nc1-footer-lockup-txt b { width: auto; letter-spacing: 0; font-size: calc(var(--fm-size) * 0.72); }
.nc1-footer-lockup-txt em {
  font-style: normal; font-size: max(11px, 1vw); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-left: 0.06em;         /* 抵掉字标那 -0.035em，视觉上跟字标左沿齐 */
}
body.nc1 .nc1-footer-lockup-txt em { color: #FFFFFF; opacity: 0.80; }             /* 署名 */

/* 焦点环：全站那圈是 var(--nc1-violet)，压在新底上跟底同色等于看不见，
   footer 内换白 2px。选择器带 body.nc1 才压得过文件末尾同权重的规则。 */
body.nc1 .nc1-footer :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }


/* ------------------------------------------------- 0808 赞助商挪位
   跑马灯**留着**（滚动、拖拽、惯性都照旧），只是里面不再放 Lightspeed ——
   0809 起这条带子跑的是 Lumi 的搭档吉祥物（见文件末尾「吉祥物滚动带」一段）。
   赞助商挪进 About 那张卡，跟 Based in / Focus / Status 同一套行样式。 */
body.nc1 .nc1-about-backed span { display: flex; align-items: center; }
body.nc1 .nc1-about-backed img {
  height: 1.15em; width: auto; display: block;
  filter: brightness(0) invert(1); opacity: 0.9;
}


/* ======================================================= 吉祥物滚动带
   0809。hero 下面这条带子从「赞助商跑马灯」改成「吉祥物游行」。

   ① 底色永远是紫，不是「空着的时候才紫」。
      这条带子自己没有底色，露出的是 body 的近白 #FFFAFD；
      夹在两块同色紫场中间就成了一条把 Lumi 拦腰截断的白横条
      （vera 逮到的阻断级问题）。所以紫是常驻的，不跟内容走 ——
      Lumi 探出 hero 下沿的手和头发正好落在这条带子上，
      带子一旦变白，那一刀又回来了。上下两条发丝线也一起取消。
   ② 吉祥物走在 Lumi 身后：.nc1-hperson 是 z-index 6，这条带子是静态流，
      所以手和头发天然盖在吉祥物前面，不用任何额外的层级处理。
   ③ 尺寸只有 --mascot-h 一个入口，带子的高度由它撑出来。 */
body.nc1 .nc1-backed {
  background: var(--c8-violet);
  border-top: 0; border-bottom: 0;
  /* 0809e 按 Puff 的真实比例重算（原来这两个数是按正常身材的角色估的）：
       --mascot-h    一只 Puff **含耳尖、到脚掌落地**的完整高度。
                     Puff 是两头身，头占这个高度的 39%，耳朵还要往上占 30%，
                     所以同样一个数字，脸比正常比例的角色小一大截 ——
                     旧的 104px 上限折下来头只有 40px，五官在横条上糊成一团。
                     抬到 152px，头 ≈ 59px，才是能读出表情的一档。
       --mascot-w    = --mascot-h × 0.56。v3 那批素材的 alpha 外框实测
                     414 × 734（W:H = 0.564），所以格子按这个长宽比开，
                     不再是正方形 —— 方格子会在每只两边各留 22% 的空，
                     排出来的间距就不是 --mascot-gap 而是它加一截。
       --mascot-gap  收到 0.36 × h：格子变窄之后，旧的 78px 会把六只拉散。 */
  --mascot-h: clamp(84px, 9.4vw, 152px);
  --mascot-w: calc(var(--mascot-h) * 0.56);
  --mascot-gap: clamp(28px, 3.4vw, 58px);
  padding: clamp(16px, 1.7vw, 28px) 0;
}
body.nc1 .nc1-backed-track { gap: var(--mascot-gap); padding-right: var(--mascot-gap); }
body.nc1 .nc1-backed-unit {
  gap: var(--mascot-gap);
  align-items: flex-end;          /* 站在同一条地平线上，不是各自居中 */
}

/* 一只吉祥物。真图进来 = 里面塞一个 <img>，别的都不用改。 */
body.nc1 .nc1-mascot {
  margin: 0; flex: none;
  width: var(--mascot-w); height: var(--mascot-h);
  display: flex; align-items: flex-end; justify-content: center;
  animation: nc1-mascot-bob 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
body.nc1 .nc1-mascot img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: bottom center;
  user-select: none; -webkit-user-drag: none;
}
/* 一只一只错开起伏，整排不许同手同脚 */
body.nc1 .nc1-mascot:nth-child(6n+1) { animation-delay: 0s; }
body.nc1 .nc1-mascot:nth-child(6n+2) { animation-delay: -0.52s; }
body.nc1 .nc1-mascot:nth-child(6n+3) { animation-delay: -1.06s; }
body.nc1 .nc1-mascot:nth-child(6n+4) { animation-delay: -1.60s; }
body.nc1 .nc1-mascot:nth-child(6n+5) { animation-delay: -2.14s; }
body.nc1 .nc1-mascot:nth-child(6n+6) { animation-delay: -2.66s; }
/* 起伏从 6% 收到 4%：两头身的大头浮太高会飘，看着像被提着而不是自己在弹 */
@keyframes nc1-mascot-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-4%); }
}
@media (prefers-reduced-motion: reduce) {
  body.nc1 .nc1-mascot { animation: none; }
}

/* 图还没到时的占位：**只有虚线**（她自己点名的那套），
   不填底、不描实线、不打阴影、不写字。塞进 <img> 后这条自动失效。 */
body.nc1 .nc1-mascot:empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.42);
  border-radius: clamp(12px, 1.3vw, 20px);
}
/* 占位阶段用高度差替一点节奏，免得像六个一模一样的框；
   真图进来是同一个基线同一个尺寸，所以这条只挂在 :empty 上。
   0809e：真图是六张同一只兔子只换脸，落地时高度必须完全一致，
   所以这几条到时候会自动失效，不用记得回来删。 */
body.nc1 .nc1-mascot:empty:nth-child(6n+2),
body.nc1 .nc1-mascot:empty:nth-child(6n+5) { height: calc(var(--mascot-h) * 0.9); }
body.nc1 .nc1-mascot:empty:nth-child(6n+4) { height: calc(var(--mascot-h) * 0.95); }

@media (max-width: 767px) {
  body.nc1 .nc1-backed {
    --mascot-h: clamp(72px, 22vw, 116px);
    --mascot-gap: clamp(20px, 6vw, 40px);
    padding: 5vw 0;
  }
}


/* ==================================================== 0809e · 从 8 搬过来的两段
   Larissa：「8 里面的这些 搬到 C1 耳，C1 耳的 spacing 不要变」。
   搬的是 option-a-c8-violet.html 的 **about 水印** 和 **products 卡阵**
   这两段的视觉处理和结构，不是 8 的整套节奏 —— C1 自己的段间距、内边距、
   断点全部照旧，新的一段直接抄 C1 的 .nc1-dev 那一档内边距。
   css/option-a-c8.css 一个字节都没引进来，下面全是照 C1 的 token 重写的。

   这一层只挂在 C1耳 上：.nc1-prods 这个类只有 option-c1-lumi-ears.html 有，
   option-c1-lumi.html 还是老的 .nc1-tracks 滑轨，两边互不影响。
   ============================================================ */

/* 0814 八条③：about 的巨号日文水印下线（图形暗纹在 option-c2-creator.html
   的 .c2g-wm 一族里），这里只留定位壳。 */
body.nc1 .nc1-about { position: relative; overflow: hidden; }
/* 正文得在水印上面 */
body.nc1 .nc1-about > .nc1-reveal,
body.nc1 .nc1-about > .nc1-about-card { position: relative; z-index: 1; }


/* ============================================================ products
   横向 pin 滑轨 → 8 那一屏的 2×2 卡阵。
   底 = #E3E0FF（--c8-lav，页面上已经有的第二支紫），卡 = #7180FF 实底 + 白字。
   无渐变、无阴影、卡不加外框，全部平涂。 */
body.nc1 .nc1-prods {
  position: relative; z-index: 2;
  /* 0809f 她：「连接不太自然。背后还有个白色，这整个应该稍微往上一些。」
     那条白**不是** about 没铺满，是这一段左上角那个大圆角**背后没人**：
     圆角把这块淡紫剪掉一角，露出来的是 body 的近白 #FFFAFD，
     而设计意图是「上一段 about 的紫从缺口里露出来」。
     修法不加节点：整段的底色改成**紫**（= about 那支），淡紫改由下面
     .nc1-prods::before 那一层画，圆角也挪到那一层上。
     于是圆角剪掉的一角露出的是自己身下的紫，跟 about 连成一整片。 */
  background: var(--c8-violet); color: var(--c8-ink);
  /* 「整个往上一些」：往上骑一档，让淡紫的圆角切进 about 的紫里，
     衔接才读得出是同一件事的两层，不是上下两块拼在一起。
     about 的下内边距是 clamp(72px,9vw,150px)，这里吃掉它的三分之一左右。 */
  margin-top: calc(-1 * clamp(28px, 3.4vw, 56px));
  /* ★ spacing：抄的是 C1 自己 .nc1-dev 那一档，不是 8 的 --s8。
     右边多留一条 --vert-lane：C1 的 --nc1-pad 只有 2vw，卡阵会一路铺到
     版心边上，把竖排标签压在下面（8 那边的 --pad 宽得多，标签本来就站在页边距里）。
     只加右边，左沿还是 --nc1-pad，所以跟上下几段的左对齐线一格没错。 */
  --vert-lane: clamp(22px, 2.6vw, 46px);
  padding: clamp(72px, 9vw, 150px) calc(var(--nc1-pad) + var(--vert-lane)) clamp(72px, 9vw, 150px) var(--nc1-pad);
  border-radius: 0;
}
/* 淡紫那一层。整段的底是紫（见上面），这一层把淡紫盖上去、左上角开大圆角，
   所以圆角剪掉的一角露出的是紫不是页面底色 —— 那条白就是这么没的。
   内容全部是 z-index 2 / 3（head / grid / vert / count 上早就写好了），
   所以这一层永远在内容下面。 */
body.nc1 .nc1-prods::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--c8-lav);
  border-radius: clamp(40px, 6vw, 92px) 0 0 0;
  pointer-events: none;
}

/* 右边缘的竖排标签。纯装置，跟 eyebrow 同一个 i18n key，所以日文下自己会换，
   没有新增任何一句文案。 */
body.nc1 .nc1-prods .nc1-vert {
  position: absolute; z-index: 2;
  top: clamp(72px, 9vw, 150px); right: clamp(10px, 1.4vw, 26px);
  writing-mode: vertical-rl;
  font-size: clamp(10px, 0.68vw, 12px);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--c8-violet); opacity: 0.5;
  pointer-events: none; user-select: none;
}

/* 白色计数药丸，骑在 products 的上沿：一半在 about 的紫上、一半在淡紫上 */
body.nc1 .nc1-prods-count {
  position: absolute; z-index: 3;
  right: var(--nc1-pad); top: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; padding: 12px 18px;
  background: #FFFFFF; color: var(--c8-ink);
  border-radius: var(--r-pill);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.22em;
  user-select: none;
}

body.nc1 .nc1-prods-head { margin-bottom: clamp(24px, 3vw, 48px); position: relative; z-index: 2; }
body.nc1 .nc1-prods .nc1-eyebrow {
  gap: max(6px, 0.7vw);           /* C1 的 0.7vw 到窄窗口只剩 3px，点会贴到字上 */
  color: rgba(36, 28, 78, 0.66);
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: clamp(10px, 0.68vw, 12px);
}
body.nc1 .nc1-prods .nc1-eyebrow i { background: var(--c8-violet); }

/* 2×2。行内自动等高，日文长出来的那一截由整行一起长。 */
body.nc1 .nc1-prods-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
}

body.nc1 .nc1-pcard {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0; padding: clamp(24px, 2.5vw, 40px);
  background: var(--c8-violet); color: #FFFFFF;
  border: 0; border-radius: var(--r-card);
  /* hover 只用位移，180ms + 入场同一条缓动。
     入场那一下挂在外面的 .nc1-prods-grid 上，不挂在卡上 ——
     两个都写 transform 会打架（reveal 还没跑完就 hover，卡会直接跳到位）。 */
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 编号钉在卡的右上角当索引，四张卡的编号在版面上排成一个方阵。
   右上角的内边距和左上角用同一个值，四角是同心的。 */
body.nc1 .nc1-pcard-num {
  position: absolute; margin: 0;
  top: clamp(24px, 2.5vw, 40px); right: clamp(24px, 2.5vw, 40px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.22em;
  opacity: 0.52;
}
body.nc1 .nc1-pcard-head { margin-bottom: clamp(14px, 1.4vw, 22px); }
body.nc1 .nc1-pcard-kicker {
  display: block; margin-bottom: 10px;
  font-size: clamp(10px, 0.68vw, 12px);
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.74;
}
body.nc1 .nc1-pcard h3 {
  margin: 0; color: #FFFFFF; font-weight: 900;
  font-size: clamp(28px, 2.6vw, 42px); line-height: 0.98; letter-spacing: -0.025em;
}
body.nc1 .nc1-pcard-body { margin-bottom: clamp(22px, 2.4vw, 34px); }
body.nc1 .nc1-pcard p {
  margin: 0 0 clamp(12px, 1.2vw, 18px); max-width: 36ch;
  font-size: clamp(14px, 1.02vw, 17px); line-height: 1.62;
  color: #FFFFFF; opacity: 0.92;
}
body.nc1 .nc1-pcard-meta {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(10px, 0.72vw, 13px); letter-spacing: 0.12em;
  opacity: 0.72;
}
/* 药丸永远钉在卡的底边，一行四张的按钮就在同一条线上（日文长短都不影响） */
body.nc1 .nc1-pcard-go {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 13px 26px; border: 0; border-radius: var(--r-pill);
  background: #FFFFFF; color: var(--c8-violet);
  font-size: clamp(10px, 0.68vw, 12px); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: transform 0.16s var(--nc1-ease);
}
body.nc1 .nc1-pcard-go:hover { background: #FFFFFF; color: var(--c8-violet); transform: translateX(3px); }
/* 卡的 hover：只用位移，不用阴影不用描边 */
body.nc1 .nc1-pcard:hover { transform: translateY(-3px); }
body.nc1 .nc1-pcard:active { transform: translateY(-1px); }
body.nc1 .nc1-pcard a:focus-visible { outline-color: #FFFFFF; }


/* 日文：假名比拉丁宽，标题和行宽收一档，版式一格没动 */
:lang(ja) body.nc1 .nc1-pcard h3 { font-size: clamp(22px, 2.1vw, 34px); }
:lang(ja) body.nc1 .nc1-pcard p { max-width: 32em; }
:lang(ja) body.nc1 .nc1-pcard-kicker,
:lang(ja) body.nc1 .nc1-pcard-meta,
:lang(ja) body.nc1 .nc1-prods .nc1-eyebrow,
:lang(ja) body.nc1 .nc1-prods .nc1-vert { letter-spacing: 0.06em; }

/* 窄窗口：跟 C1 其余几块同一个断点（1080 拆一列），竖排标签这一档收掉 */
@media (max-width: 1080px) {
  /* 竖排标签这一档收掉，它让出来的那条 lane 也一起归零，
     不然一列的卡阵右边会平白多出一条谁也不占的边距。 */
  body.nc1 .nc1-prods { --vert-lane: 0px; }
  body.nc1 .nc1-prods-grid { grid-template-columns: minmax(0, 1fr); }
  body.nc1 .nc1-prods .nc1-vert { display: none; }
  /* 一列之后卡有整幅宽，36ch 会在卡的右半边留一大片空 —— 行宽放到 60ch */
  body.nc1 .nc1-pcard p { max-width: 60ch; }
}
@media (max-width: 767px) {
  /* 内边距不另写：clamp(72px, 9vw, 150px) 在窄窗口自己落到 72px 的下限，
     跟 .nc1-dev 在同一档，多写一条 16vw 反而会跟它错开。只收圆角和药丸。 */
  body.nc1 .nc1-prods { border-radius: 0; }
  body.nc1 .nc1-prods::before { border-radius: clamp(28px, 9vw, 60px) 0 0 0; }
  body.nc1 .nc1-prods-count { min-width: 48px; padding: 10px 14px; }
}


/* ============================================ 0809f · 滚动带 = 那把刀
   她：「这滚动条是左右边都要打满的，而且不能在这。它主要的目的是为了切这个衣服，
         拦下来的地方，所以这要再往上一些。」

   0809e 的白托盘（左右各留 --nc1-pad、四角大圆角）**作废**。原因就是她说的这句：
   托盘是一件「浮在紫场上的东西」，它不承担任何功能；可这条带子在版面上的
   真正职责是**当那把刀** —— 裙子被拦下来的那条线就应该是它的上沿。
   托盘留边 + 圆角 + 上面还垫着一截紫，等于裙子先被一条看不见的线裁了、
   带子再飘在下面 12px 处，两件事对不上。

   现在的做法：
     ① 通栏打满 —— 左右不留边距，两端顶到视口边缘，圆角全部归零。
        底色直接给到 .nc1-backed-tray 本身，.nc1-backed-plate 退化成
        一个透明的拖拽热区（JS 取的 wrap 还是 track.parentNode，一行没改）。
     ② 上沿贴死 hero 的裁切线 —— 带子的上边 = hero 下沿 = 衣服被吃掉的那条线。
        tray 的上内边距归零，另外往上压 1px 吃掉亚像素，
        任何断点都不会在两者之间漏出一条紫缝。
     ③ 白底。hero 紫 → 白带 → about 紫，这一刀是实的、看得见的。
        上一轮担心的「白横条把 Lumi 拦腰截断」不再成立 —— 那正是她要的效果：
        Lumi 的手和头发（人物层 z-index 6）压在白带前面继续往下伸，
        裙子在白带后面被吃掉，所以读起来是「她趴在这条架子上」。
     ④ 高度：一只吉祥物 + 上下各一档内边距 ≈ 170px（1440 宽），
        够厚才像一条架子，不像一条缝。

   吉祥物占位、自动漂移、拖拽甩惯性一行没重写。 */
/* .nc1-backed-tray 这个修饰类只有 C1耳 有 —— 这份 css 是和 option-c1-lumi.html
   共用的，那边的带子还是老结构，加类名限定就不会被这几条波及。 */
body.nc1 .nc1-backed-tray {
  position: relative;
  margin-top: -1px;               /* 吃掉亚像素，上沿和 hero 裁切线严丝合缝 */
  background: #FFFFFF;
  padding: clamp(14px, 1.5vw, 24px) 0 clamp(12px, 1.4vw, 22px);
}
/* 托盘退化成透明的拖拽热区：不再有自己的底色、边距和圆角 */
body.nc1 .nc1-backed-plate {
  position: relative; overflow: hidden;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
/* 白底上虚线占位框翻成紫虚线 */
body.nc1 .nc1-backed-tray .nc1-mascot:empty {
  border-color: rgba(113, 128, 255, 0.42);
}
@media (max-width: 767px) {
  body.nc1 .nc1-backed-tray { padding: 4vw 0 3.5vw; }
}


/* ================================================================
   0809f · Hire Lumi 打开的游戏化场景（.nc1-gs）
   ================================================================
   她：「hire lumi 这边 打开是个游戏化场景」「就在首页打开」
       「旁边要有能互动的框」「lumi 是要有点表情的 …… 打开之后还要能说话」

   这一整段只挂在 .nc1-gs 底下 —— 这个类只有 option-c1-lumi-ears.html 有，
   跟它共用这份 css 的 option-c1-lumi.html 一条都吃不到。

   禁令自查：无渐变、无 drop shadow、卡 / 药丸 / chip 一律不加外描边、
   图标全是裸线条走 currentColor（没有一块彩色圆角砖）、
   色只用 VI 那四支 —— 参考图那种粉色少女风的配色和质感一点没抄，
   抄的只有「有哪些框、框里放什么」。
   ================================================================ */

.nc1-gs {
  --gs-violet: #7180FF;
  --gs-pink: #FF9AD4;
  --gs-lav: #E3E0FF;
  --gs-ink: #241C4E;
  --gs-muted: rgba(36, 28, 78, 0.56);
  --gs-line: rgba(36, 28, 78, 0.09);

  --gs-gap: clamp(14px, 2vw, 34px);
  --gs-panel-w: clamp(300px, 30vw, 460px);
  --gs-card-w: clamp(210px, 20vw, 292px);

  /* ★ 换场景的唯一入口。data-scene 换一个 key，下面加一条同名规则就行。 */
  --gs-bg: url("../assets/scenes/office-morning.webp");
  /* 对白气泡挂在人物盒子上的位置（百分比按人物盒子算，所以人放大缩小它跟着走）。
     0810a 换半身图之后重量的：挂在她画面右侧、跟脸齐高的那条空当上，
     左边让开头发的最外沿（那一档大约 88%），右边让开大面板。 */
  --gs-say-x: 94%;
  --gs-say-y: 18%;
  /* 圆形展开的原点，js 按 Hire Lumi 那颗药丸的中心实测填进来 */
  --gs-ox: 50%;
  --gs-oy: 88%;

  /* 200：压在 nav（100）上面，但让开 preloader / boot（300 / 320） */
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden; opacity: 0;
  transition: opacity 0.22s ease, visibility 0s linear 0.42s;
  font-family: var(--nc1-font);
  color: var(--gs-ink);
}
.nc1-gs.is-on {
  visibility: visible; opacity: 1;
  transition: opacity 0.18s ease, visibility 0s;
}
/* 场景表。以后 bedroom / cafe / park / street 每加一支就在这里加一行。 */
.nc1-gs[data-scene="office-morning"] { --gs-bg: url("../assets/scenes/office-morning.webp"); }

/* 展开的第一拍：一层紫先铺满，页面不会在圆形张开的缝里闪出来 */
.nc1-gs-veil {
  position: absolute; inset: 0; background: var(--gs-violet);
  opacity: 0; transition: opacity 0.2s ease;
}
.nc1-gs.is-on .nc1-gs-veil { opacity: 1; }

/* 第二拍：整个场景从那颗药丸的位置圆形张开 */
.nc1-gs-stage {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: circle(0% at var(--gs-ox) var(--gs-oy));
  transition: clip-path 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs.is-on .nc1-gs-stage { clip-path: circle(150% at var(--gs-ox) var(--gs-oy)); }

.nc1-gs-room {
  position: absolute; inset: 0;
  background-image: var(--gs-bg);
  background-size: cover; background-position: 50% 46%;
}

/* ---------------------------------------------------------- Leave */
.nc1-gs-leave {
  position: absolute; z-index: 4; left: var(--gs-gap); top: var(--gs-gap);
  display: inline-flex; align-items: center; gap: 6px;
  height: clamp(34px, 3vw, 42px); padding: 0 clamp(14px, 1.3vw, 20px);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: #FFFFFF; color: var(--gs-ink);
  font-family: inherit; font-size: clamp(11px, 0.82vw, 13px); font-weight: 600;
  letter-spacing: 0.06em;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s ease;
}
.nc1-gs-leave svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nc1-gs-leave:hover { transform: translateX(-2px); color: var(--gs-violet); }

/* ------------------------------------------------------- 人物 + 对白
   .nc1-gs-cast 是人物的定位盒子，对白按它的百分比走，
   所以换成 iris 的半身图之后两者的关系不会散。 */
.nc1-gs-cast {
  position: absolute; z-index: 3;
  /* 0810a：半身图是腰以上的竖幅，下沿必须出血到屏幕外 ——
     bottom:0 让腰的切口正好落在画面底边，再被 dock 压掉一截，
     读起来就是「她站在前景、下半身在画外」，不是一张浮着的贴纸。 */
  left: clamp(4px, 2.4vw, 52px); bottom: 0;
  height: 68%; aspect-ratio: 1609 / 2000;
  pointer-events: none;
  opacity: 0; transform: translateY(26px) scale(0.965);
  transition: opacity 0.38s ease 0.24s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
}
.nc1-gs.is-on .nc1-gs-cast { opacity: 1; transform: none; }

/* idle 呼吸：只上下浮，**不缩放** —— 一缩放描边跟着呼吸就成果冻了。
   挂在 .nc1-gs-lumi 上（不是 cast），免得跟入场那条 transform 打架。 */
.nc1-gs-lumi { position: absolute; inset: 0; }
.nc1-gs.is-on .nc1-gs-lumi { animation: nc1-gs-breathe 6s ease-in-out infinite; }
@keyframes nc1-gs-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.6%); }
}
/* 六张同画布 1609×2000，inset:0 摞上去就对齐，一个百分比都不用算 */
.nc1-gs-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  user-select: none; -webkit-user-drag: none;
}
/* 贴片切换**不加 transition** —— 淡入淡出会看到两张嘴叠在一起 */
.nc1-gs-layer.is-patch { opacity: 0; }
.nc1-gs-layer.is-patch.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nc1-gs.is-on .nc1-gs-lumi { animation: none; }
}

/* 对白气泡：白实底，左下角收成小圆角当嘴，没有描边也没有三角贴片 */
.nc1-gs-say {
  position: absolute; z-index: 2; pointer-events: none;
  left: var(--gs-say-x); top: var(--gs-say-y);
  width: min(300px, 24vw); min-height: 62px;
  box-sizing: border-box;
  padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.3vw, 19px);
  background: #FFFFFF;
  border-radius: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) 5px;
  opacity: 0; transform: translateY(8px) scale(0.97);
  transform-origin: 0 100%;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs-say.is-on { opacity: 1; transform: none; }
.nc1-gs-say-who {
  display: block; margin-bottom: 4px;
  font-size: clamp(9px, 0.62vw, 11px); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gs-violet);
}
.nc1-gs-say p {
  margin: 0; font-size: clamp(12px, 0.92vw, 15px); line-height: 1.5; color: var(--gs-ink);
}
/* 打字光标：说话时跟在最后一个字后面 */
.nc1-gs-say p::after {
  content: ''; display: inline-block; vertical-align: -1px;
  width: 2px; height: 1em; margin-left: 2px;
  background: var(--gs-violet); opacity: 0;
}
.nc1-gs-say.is-typing p::after { opacity: 1; animation: nc1-gs-caret 0.6s steps(1) infinite; }
@keyframes nc1-gs-caret { 0%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }

/* -------------------------------------------------------- 状态卡 */
.nc1-gs-card {
  position: absolute; z-index: 4;
  left: var(--gs-gap); bottom: var(--gs-gap); width: var(--gs-card-w);
  box-sizing: border-box;
  padding: clamp(12px, 1.1vw, 18px);
  background: #FFFFFF; border-radius: var(--r-inset);
  display: flex; flex-direction: column; gap: clamp(9px, 0.9vw, 13px);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s ease 0.4s, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.nc1-gs.is-on .nc1-gs-card { opacity: 1; transform: none; }
.nc1-gs-card-top { display: flex; align-items: center; gap: 10px; }
.nc1-gs-face {
  flex: none; width: clamp(34px, 3vw, 44px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--gs-lav);
}
/* 0810a：头像也换成台上那张半身图，两处是同一张脸。
   缩放和位移是按 iris 给的定位点算的（两眼中点 51% / 34.1%）：
   宽 175% → 图高 217.5%，脸落在圆的正中偏上一点，头顶到下巴约占 78%。 */
.nc1-gs-face img {
  width: 175%; height: auto; display: block;
  margin: -28% 0 0 -39%;
}
.nc1-gs-card-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nc1-gs-card-id b { font-size: clamp(14px, 1.1vw, 18px); font-weight: 700; letter-spacing: -0.01em; }
.nc1-gs-card-id em {
  font-style: normal; font-size: clamp(9px, 0.64vw, 11px);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc1-gs-heart { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--gs-pink); }
.nc1-gs-heart svg { width: 17px; height: 17px; fill: currentColor; }
.nc1-gs-heart i { font-style: normal; font-size: clamp(11px, 0.82vw, 13px); font-weight: 700; }

.nc1-gs-lv { display: flex; align-items: center; gap: 8px; }
.nc1-gs-lv-tag {
  flex: none; font-size: clamp(9px, 0.64vw, 11px); font-weight: 700;
  letter-spacing: 0.1em; color: var(--gs-violet);
}
.nc1-gs-lv-bar { flex: 1 1 auto; height: 6px; border-radius: 100vw; background: var(--gs-lav); overflow: hidden; }
.nc1-gs-lv-bar i { display: block; height: 100%; width: var(--p); border-radius: 100vw; background: var(--gs-violet); }
.nc1-gs-lv-num {
  flex: none; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(9px, 0.62vw, 11px); color: var(--gs-muted);
}

.nc1-gs-mood { display: flex; align-items: center; gap: 10px; }
.nc1-gs-mood-tag {
  font-size: clamp(9px, 0.64vw, 11px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gs-muted);
}
.nc1-gs-mood-set { display: inline-flex; gap: 4px; }
.nc1-gs-mood-set button {
  border: 0; background: none; padding: 2px; cursor: pointer; line-height: 0;
  color: var(--gs-lav);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s ease;
}
.nc1-gs-mood-set button svg { width: clamp(18px, 1.5vw, 22px); height: clamp(18px, 1.5vw, 22px); fill: currentColor; }
.nc1-gs-mood-set button:hover { transform: translateY(-2px); }
.nc1-gs-mood-set button.is-on { color: var(--gs-pink); }

/* ------------------------------------------------------ 右边大面板 */
.nc1-gs-panel {
  position: absolute; z-index: 4;
  right: var(--gs-gap); top: var(--gs-gap); bottom: var(--gs-gap);
  width: var(--gs-panel-w); box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #FFFFFF; border-radius: var(--r-card);
  padding: clamp(16px, 1.5vw, 26px) 0 clamp(12px, 1.1vw, 18px);
  overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.32s ease 0.3s, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.nc1-gs.is-on .nc1-gs-panel { opacity: 1; transform: none; }
.nc1-gs-panel-head {
  flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 clamp(16px, 1.5vw, 26px) clamp(12px, 1.1vw, 18px);
}
.nc1-gs-panel-head h3 {
  margin: 0; color: var(--gs-violet); font-weight: 900;
  font-size: clamp(19px, 1.7vw, 27px); letter-spacing: -0.02em;
}
.nc1-gs-panel-head span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(9px, 0.66vw, 12px); color: var(--gs-muted); white-space: nowrap;
}
.nc1-gs-panel-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 clamp(16px, 1.5vw, 26px);
  scrollbar-width: thin; scrollbar-color: var(--gs-lav) transparent;
}
.nc1-gs-panel-body::-webkit-scrollbar { width: 3px; }
.nc1-gs-panel-body::-webkit-scrollbar-thumb { background: var(--gs-lav); border-radius: 100vw; }
.nc1-gs-panel-body::-webkit-scrollbar-track { background: transparent; }

/* 底下那张 Today's focus 便条：淡紫实底，无描边无阴影 */
.nc1-gs-focus {
  flex: none; margin: clamp(10px, 1vw, 16px) clamp(16px, 1.5vw, 26px) 0;
  padding: clamp(10px, 1vw, 15px) clamp(12px, 1.1vw, 17px);
  background: var(--gs-lav); border-radius: var(--r-row);
  display: flex; flex-direction: column; gap: 3px;
}
.nc1-gs-focus b {
  font-size: clamp(9px, 0.64vw, 11px); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gs-violet);
}
.nc1-gs-focus span { font-size: clamp(11px, 0.86vw, 14px); line-height: 1.45; color: var(--gs-ink); }

/* ---- 行 ---- */
.nc1-gs-rows { display: block; position: relative; }
.nc1-gs-row {
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: 20px 1fr auto;
  gap: clamp(8px, 0.9vw, 13px);
  padding: clamp(10px, 0.95vw, 14px) 0;
}
.nc1-gs-row + .nc1-gs-row { box-shadow: none; }
.nc1-gs-row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gs-line);
}
.nc1-gs-rows .nc1-gs-row:last-child::after { display: none; }

/* 时间轴那一档（Schedule）：多一列时刻 + 一条发丝竖线 + 一颗点 */
.nc1-gs-rows.is-time .nc1-gs-row { grid-template-columns: 40px 22px 20px 1fr auto; }
.nc1-gs-rows.is-time::before {
  content: ''; position: absolute; z-index: 0;
  left: 50px; top: 16px; bottom: 16px; width: 1px;
  background: rgba(113, 128, 255, 0.26);
}
.nc1-gs-dot {
  position: relative; z-index: 1; justify-self: center;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gs-lav);
  transition: background 0.18s ease;
}
.nc1-gs-row.is-done .nc1-gs-dot { background: var(--gs-violet); }
.nc1-gs-time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(10px, 0.72vw, 12px); color: var(--gs-muted);
}
.nc1-gs-ico { line-height: 0; color: var(--gs-violet); }
.nc1-gs-ico svg {
  width: clamp(17px, 1.4vw, 20px); height: clamp(17px, 1.4vw, 20px);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nc1-gs-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc1-gs-txt b {
  font-size: clamp(12px, 0.96vw, 15px); font-weight: 600; color: var(--gs-ink);
  letter-spacing: -0.005em;
}
.nc1-gs-txt span {
  font-size: clamp(10px, 0.76vw, 12.5px); line-height: 1.4; color: var(--gs-muted);
}
.nc1-gs-row.is-done .nc1-gs-txt b { color: var(--gs-muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* 勾选圈：实底淡紫 → 实底紫 + 白勾。无描边。 */
.nc1-gs-check {
  justify-self: end; flex: none; cursor: pointer; border: 0; padding: 0;
  width: clamp(21px, 1.7vw, 25px); height: clamp(21px, 1.7vw, 25px);
  border-radius: 50%; background: var(--gs-lav);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs-check svg {
  width: 62%; height: 62%; fill: none; stroke: #FFFFFF;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs-check:hover { transform: scale(1.08); }
.nc1-gs-check[aria-pressed="true"] { background: var(--gs-violet); }
.nc1-gs-check[aria-pressed="true"] svg { opacity: 1; transform: none; }

/* 开关（Settings）：药丸 + 圆钮，实底，无描边 */
.nc1-gs-toggle {
  justify-self: end; flex: none; cursor: pointer; border: 0; padding: 3px;
  width: 40px; height: 22px; border-radius: 100vw; background: var(--gs-lav);
  display: inline-flex; align-items: center;
  transition: background 0.2s ease;
}
.nc1-gs-toggle i {
  display: block; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs-toggle[aria-pressed="true"] { background: var(--gs-violet); }
.nc1-gs-toggle[aria-pressed="true"] i { transform: translateX(18px); }

/* 三块小数据（Home） */
.nc1-gs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 0.7vw, 10px); margin-bottom: clamp(10px, 1vw, 16px); }
.nc1-gs-stat {
  padding: clamp(10px, 1vw, 15px) clamp(9px, 0.9vw, 13px);
  background: var(--gs-lav); border-radius: var(--r-row);
  display: flex; flex-direction: column; gap: 3px;
}
.nc1-gs-stat b { font-size: clamp(18px, 1.6vw, 26px); font-weight: 900; color: var(--gs-violet); line-height: 1; letter-spacing: -0.03em; }
.nc1-gs-stat span { font-size: clamp(9px, 0.64vw, 11px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-muted); }

/* 便条（Notes）：白底上淡紫块，无描边 */
.nc1-gs-note {
  padding: clamp(11px, 1vw, 15px) clamp(12px, 1.1vw, 16px);
  background: var(--gs-lav); border-radius: var(--r-row);
  margin-bottom: clamp(7px, 0.7vw, 10px);
  display: flex; flex-direction: column; gap: 4px;
}
.nc1-gs-note b { font-size: clamp(10px, 0.7vw, 12px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-violet); }
.nc1-gs-note span { font-size: clamp(11px, 0.88vw, 14px); line-height: 1.5; color: var(--gs-ink); }

/* 人（Contacts）：首字母圆点，实底淡紫，无描边 */
.nc1-gs-ini {
  width: clamp(28px, 2.3vw, 34px); height: clamp(28px, 2.3vw, 34px);
  border-radius: 50%; background: var(--gs-lav); color: var(--gs-violet);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(11px, 0.82vw, 13px); font-weight: 700;
}
.nc1-gs-rows.is-people .nc1-gs-row { grid-template-columns: auto 1fr auto; }
.nc1-gs-ping {
  border: 0; cursor: pointer; background: var(--gs-lav); color: var(--gs-violet);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-family: inherit; font-size: clamp(9px, 0.64vw, 11px); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs-ping:hover { background: var(--gs-violet); color: #FFFFFF; transform: translateY(-1px); }
.nc1-gs-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(9px, 0.66vw, 11px); color: var(--gs-muted); white-space: nowrap;
}

/* ------------------------------------------------------------ dock
   左右两边分别让开状态卡和大面板，中间自己居中
   （abspos + left/right 都给 + width:fit-content + margin-inline:auto）。 */
.nc1-gs-dock {
  position: absolute; z-index: 5; bottom: var(--gs-gap);
  left: calc(var(--gs-card-w) + var(--gs-gap) * 2);
  right: calc(var(--gs-panel-w) + var(--gs-gap) * 2);
  width: fit-content; max-width: 100%; margin-inline: auto;
  display: flex; align-items: stretch; gap: 2px;
  padding: clamp(6px, 0.6vw, 9px);
  background: #FFFFFF; border-radius: var(--r-pill);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.3s ease 0.46s, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.46s;
}
.nc1-gs.is-on .nc1-gs-dock { opacity: 1; transform: none; }
.nc1-gs-dock button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: clamp(7px, 0.7vw, 10px) clamp(9px, 0.95vw, 15px);
  border-radius: var(--r-row); color: var(--gs-muted);
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc1-gs-dock button svg {
  width: clamp(18px, 1.5vw, 22px); height: clamp(18px, 1.5vw, 22px);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nc1-gs-dock button i {
  font-style: normal; font-size: clamp(9px, 0.64vw, 11px); font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
}
.nc1-gs-dock button:hover { color: var(--gs-ink); transform: translateY(-2px); }
.nc1-gs-dock button.is-on { color: var(--gs-violet); background: var(--gs-lav); }

/* ---------------------------------------------------------- 窄窗口
   她是拖窄桌面窗口看的。

   1081–1280 这一档还是横排，人和大面板之间的空当只剩两百出头，
   气泡收窄一档就够，站位不用动。 */
@media (max-width: 1280px) and (min-width: 1081px) {
  .nc1-gs-say { width: min(250px, 23vw); }
}

/* ≤1080 换成「上面是场景、下面是面板」的竖排：
   面板落到下半屏、dock 钉在最底、状态卡挪到右上角，Lumi 站在左边。
   0810a：半身图的腰在画布下沿，所以这一档她的下沿要**压进面板底下**
   （面板 z-4 在人 z-3 上面），切口被面板挡住，不会在半空断一截。 */
@media (max-width: 1080px) {
  .nc1-gs { --gs-card-w: clamp(180px, 34vw, 250px); }
  .nc1-gs-panel {
    left: var(--gs-gap); right: var(--gs-gap); width: auto;
    top: 42%; bottom: calc(var(--gs-gap) * 2 + 60px);
  }
  .nc1-gs-card { left: auto; right: var(--gs-gap); top: var(--gs-gap); bottom: auto; }
  .nc1-gs-dock {
    left: var(--gs-gap); right: var(--gs-gap);
    max-width: calc(100% - var(--gs-gap) * 2);
    overflow-x: auto; scrollbar-width: none;
  }
  .nc1-gs-dock::-webkit-scrollbar { display: none; }
  /* 上沿让开 Leave（38% + 51% = 顶在 11%），下沿 49% 压到面板（42%）底下 7% */
  .nc1-gs-cast { height: 38%; bottom: 51%; left: clamp(6px, 2vw, 24px); }
  .nc1-gs { --gs-say-x: 84%; --gs-say-y: 8%; }
  .nc1-gs-say { width: min(260px, 34vw); }
}
@media (max-width: 767px) {
  .nc1-gs { --gs-card-w: clamp(160px, 46vw, 220px); }
  .nc1-gs-panel { top: 38%; }
  /* 面板上移到 38%，人跟着上去：36% + 55% = 顶在 9%，下沿 45% 压面板底下 7% */
  .nc1-gs-cast { height: 36%; bottom: 55%; }
  /* 这一档人物盒子只有 ~250px 宽，右边只剩一条窄空当，
     气泡贴着她的头右侧起、一路铺到屏幕右沿；
     纵向压到 30% 是为了让开挪到右上角的状态卡。
     宽度是算出来的不是拍的：100vw 减掉「人物盒子左沿 + 88% 那段 + 右边留白」，
     所以再窄也不会像上一版那样把右半截推出画外。 */
  .nc1-gs { --gs-say-x: 88%; --gs-say-y: 30%; }
  .nc1-gs-say {
    width: min(240px, calc(100vw - 100% * 0.88 - clamp(6px, 2vw, 24px) - 14px));
  }
  .nc1-gs-dock button { padding: 8px 10px; }
  .nc1-gs-rows.is-time .nc1-gs-row { grid-template-columns: 38px 20px 18px 1fr auto; }
  .nc1-gs-rows.is-time::before { left: 46px; }
}
/* 手机宽度：人再收一档给气泡让出位置，下沿照旧压在面板底下（38% vs 42%） */
@media (max-width: 480px) {
  .nc1-gs-cast { height: 30%; bottom: 58%; }
  .nc1-gs { --gs-say-x: 90%; --gs-say-y: 26%; }
  .nc1-gs-say {
    width: min(230px, calc(100vw - 100% * 0.9 - clamp(6px, 2vw, 24px) - 14px));
  }
}

/* 场景开着的时候页面不跟着滚。用的是 nc1-lock 同一条 overflow: hidden，
   顺带让 hero 那个惯性滚动器（它就是查 nc1-lock）在这段时间里闲着。
   关掉时 js 把滚动位置还原回原处，所以「就地打开」前后一格没动。 */
body.nc1.nc1-gs-open { overflow: hidden; }
/* 场景开着的时候站点 nav 收起来 —— 这是一个场景，不是一个盖在网页上的弹窗，
   顶上再挂一条 About / Products / Log in 就把「进到房间里」这件事读散了。 */
body.nc1.nc1-gs-open .nc1-nav { opacity: 0; pointer-events: none; }
body.nc1 .nc1-nav { transition: opacity 0.22s ease, background 0.24s ease, box-shadow 0.24s ease; }