:root {
  --paper: #eef2eb;
  --ink: #172024;
  --muted: #5f6e6d;
  --sky: #b9e7f3;
  --coral: #ff6c5e;
  --mint: #51c6a4;
  --pad: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
.stage { position: relative; isolation: isolate; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; background: linear-gradient(112deg, var(--paper) 0%, var(--paper) 50%, #d8eff1 100%); }
.sky-glow { position: absolute; z-index: -1; top: -22%; right: -9%; width: min(64vw, 880px); aspect-ratio: 1; border: 1px solid rgba(23, 32, 36, .15); border-radius: 50%; box-shadow: 0 0 0 44px rgba(81, 198, 164, .08), 0 0 0 90px rgba(255, 108, 94, .04); }
.grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.topbar { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; padding: 20px var(--pad); }
.topbar { top: 0; border-bottom: 1px solid rgba(23, 32, 36, .17); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.brand-mark { display: grid; width: 26px; height: 26px; place-items: center; color: var(--paper); background: var(--ink); border-radius: 50%; font-size: 11px; }
.hero { position: relative; display: flex; width: 100%; height: 100%; align-items: center; padding: 80px var(--pad) 62px; }
.copy { position: relative; z-index: 2; width: min(620px, 56vw); }
.eyebrow { margin: 0 0 22px; color: var(--coral); font: 800 11px/1 monospace; letter-spacing: .15em; }
h1 { margin: 0; font: 400 clamp(86px, 15vw, 206px)/.76 Georgia, "Times New Roman", serif; letter-spacing: 0; }
h1 span { display: block; margin-left: .44em; color: var(--coral); font-size: .52em; }
.lead { margin: 40px 0 28px min(7vw, 100px); color: #354340; font: 400 clamp(17px, 1.8vw, 24px)/1.8 "Noto Serif SC", SimSun, serif; }
.hint { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 0 min(7vw, 100px); color: var(--muted); font-size: 11px; font-weight: 700; }
.hint::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(81, 198, 164, .14); }
.hint.is-playing::before { background: var(--coral); }
.portrait { position: absolute; top: 0; right: 0; width: min(61vw, 900px); height: 100%; margin: 0; overflow: hidden; clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%); background: var(--sky); }
.portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, var(--paper) 0%, rgba(238, 242, 235, .18) 33%, transparent 58%), linear-gradient(0deg, rgba(23, 32, 36, .28), transparent 33%); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.94) contrast(.98); }
@media (max-width: 760px) {
  .stage { min-height: 500px; }
  .topbar { padding-top: 16px; padding-bottom: 16px; }
  .hero { align-items: flex-end; padding-top: 64px; padding-bottom: 68px; }
  .portrait { top: 0; width: 100%; height: 57%; clip-path: none; opacity: .72; }
  .portrait::after { background: linear-gradient(180deg, rgba(238,242,235,.05) 15%, var(--paper) 98%); }
  .copy { width: 100%; margin-top: 25vh; }
  h1 { font-size: clamp(74px, 24vw, 126px); line-height: .8; }
  h1 span { margin-left: .2em; }
  .lead, .hint { margin-left: 0; }
  .lead { margin-top: 34px; margin-bottom: 22px; font-size: 17px; line-height: 1.75; }
}
@media (max-width: 380px) { .eyebrow { font-size: 10px; } .lead { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }