@charset "UTF-8";

/* The light theme follows the teal and deep blue of the supplied Nanyin logo. */
:root {
  color-scheme:light;
  --ink:#173f49;
  --ink-soft:#285761;
  --paper:#fbfdfc;
  --white:#fff;
  --muted:#526f75;
  --line:#d7e8e3;
  --dark-line:#d3e6e0;
  --lime:#d6f1e8;
  --accent:#087d80;
  --accent-strong:#086a70;
  --accent-soft:#e7f5f0;
  --surface:#f1f8f5;
  --surface-strong:#e4f2ed;
  --shadow:0 18px 50px #244f4410;
}

::selection { background:#c8eae0; color:var(--ink); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
.model-technical-details>summary:focus-visible {
  outline-color:var(--accent);
}

/* Brand, navigation and primary actions. */
.site-header {
  background:#ffffffed;
  color:var(--ink);
  border-bottom-color:#dbeae6;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.brand { gap:11px; letter-spacing:.04em; }
.brand small { color:#536f76; letter-spacing:.19em; }
.brand-logo-frame {
  width:52px;
  aspect-ratio:922 / 742;
  position:relative;
  display:block;
  overflow:hidden;
  flex-shrink:0;
  transform:none;
  mix-blend-mode:multiply;
}
/* Display crop: source pixels stay unchanged, including the white facial details. */
.brand-logo-frame .brand-logo {
  position:absolute;
  left:-10.1952%;
  top:-19.1375%;
  width:111.0629%;
  max-width:none;
  height:auto;
  margin:0;
}
.desktop-nav { color:#506e75; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color:var(--accent-strong); }
.nav-cta {
  border-color:#b8d9d0;
  background:#edf7f3;
  color:var(--accent-strong);
  border-radius:8px;
}
.nav-cta:hover { background:#dcefe8; border-color:#94c9bb; color:var(--ink); }
.mobile-nav { background:#fff; border-bottom-color:var(--line); box-shadow:0 18px 25px #254a4010; }
.mobile-nav a { border-color:var(--line); }
.menu-toggle span { background:var(--ink); }
.button-lime, .button-dark {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  border-radius:9px;
  box-shadow:0 7px 18px #087d8014;
}
.button-lime:hover, .button-dark:hover {
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  box-shadow:0 10px 22px #087d8020;
}
.circle-arrow { border-color:#b7d4cc; color:var(--accent); background:#fff9; }
.text-link:hover .circle-arrow { border-color:var(--accent); color:var(--accent-strong); }
.text-link { color:#3e626a; }

/* A bright first viewport with a white product card and teal voice signature. */
.hero {
  background:linear-gradient(115deg,#fff 2%,#f4faf7 60%,#edf7f4 100%);
  color:var(--ink);
}
.eyebrow, .dark-eyebrow { color:#547278; }
.status-dot { background:var(--accent); box-shadow:0 0 0 4px #087d800b; }
.hero-accent, .mini-wave, .lime-text { color:var(--accent); }
.hero-description { color:#4e6d73; }
.hero-note { color:#557478; }
.hero-visual {
  background:radial-gradient(ellipse at 50% 38%,#cfebe0a8 0,#e2f2eb60 35%,transparent 70%);
}
.visual-topline, .visual-bottomline, .vertical-caption { color:#54746f; }
.sound-orbit span { border-color:#72b5a52c; }
.voice-character { color:#12858a; text-shadow:0 12px 35px #087d800c; }
.phonetic-tag { color:#367c7b; }
.signal { opacity:.28; }
.signal i { background:#269997; }
.analysis-card {
  background:#fff;
  border:1px solid #dbece4;
  box-shadow:0 22px 55px #285f4d16,0 2px 6px #285f4d05;
}
.analysis-icon { background:#e0f3ed; color:var(--accent); }
.analysis-card-top div>span, .score-label, .score-message>span,
.analysis-bottom { color:#557477; }
.analysis-done { background:#eff9f5; border-color:#c4e5d8; color:#277065; }
.score-number { color:var(--accent-strong); }
.score-bars i { background:#72bdb0; }
.score-bars i:nth-child(n+14) { background:#d4e9e1; }
.analysis-bottom { border-color:var(--line); }
.analysis-bottom i { background:#bad2c8; }
.analysis-bottom>span:last-child { color:var(--accent); }
.hero-footer { color:#567470; border-color:#d9e9e2; }
.hero-footer a span { color:var(--accent); }
.platform-strip { background:#fff; border-color:var(--line); }
.platform-inner>p, .platform-inner .platform-note { color:#567177; }
.platform-inner b { color:var(--accent); }
.muted { color:#628780; }

/* Learning demonstration. */
.learning-step, .feature-notes { border-color:var(--line); }
.learning-step::before { background:var(--accent); }
.step-index, .step-content>span { color:#567174; }
.step-content strong { color:#577277; }
.step-arrow { color:#6c938d; }
.learning-step[aria-selected="true"] .step-content strong,
.learning-step:hover .step-content strong { color:var(--ink); }
.learning-step[aria-selected="true"] .step-content>span { color:#526f75; }
.learning-step[aria-selected="true"] .step-index,
.learning-step[aria-selected="true"] .step-arrow,
.learning-link { color:var(--accent-strong); }
.learning-link:hover { color:var(--ink); }
.learning-preview { background:#edf7f2; border-color:#d3e8df; box-shadow:var(--shadow); }
.preview-top { color:#55756d; }
.preview-top i { background:#bdd6cc; }
.learning-panel { border-color:#e1eee7; }
.panel-kicker { color:#567174; }
.panel-kicker>span:first-child { color:var(--accent-strong); }
.lyric-tokens small { color:#507f7b; }
.listen-wave, .practice-demo { border-color:var(--line); }
.listen-wave i { background:#7bbbb0; }
.round-icon, .mic-symbol { background:#dff3eb; color:var(--accent); }
.mic-symbol { box-shadow:0 0 0 10px #f0f9f5; }
.preview-caption p { color:#617a7a; }
.progress-summary strong { color:var(--accent-strong); }
.progress-summary div>span { color:#567174; }
.learning-calendar i { background:#edf5f1; }
.learning-calendar i[data-level="1"] { background:#cce8dc; }
.learning-calendar i[data-level="2"] { background:#9fd1bf; }
.learning-calendar i[data-level="3"] { background:#5ea98f; }
.feature-notes article>span { color:var(--accent); }

/* Assessment: white surfaces and readable feedback colors. */
.intelligence { background:#f0f8f5; color:var(--ink); border-block:1px solid #e1eee7; }
.intelligence .section-intro { color:var(--muted); }
.phoneme-console { background:#fff; border-color:#cee5da; box-shadow:var(--shadow); }
.console-header { color:#386d66; }
.example-label { color:#4e756c; background:#eaf6ef; }
.console-title strong { color:var(--accent); }
.comparison-row>span, .comparison-legend { color:#607b7b; }
.comparison-row>div>span { background:#e5f4ec; color:#23735f; }
.comparison-row>div>.needs-work { background:#fff0e9; color:#994e35; border-bottom-color:#d19376; }
.comparison-legend i { background:#5b9f83; }
.comparison-legend>span:nth-child(2) i { background:#bd775a; }
.console-insight { border-color:var(--line); }
.console-insight>span { color:var(--accent); }
.console-insight p { color:#325c60; }
.console-insight p>span, .console-disclaimer { color:#5d797d; }
.engine-number { color:var(--accent-strong); }
.engine-details p { color:var(--muted); }
.engine-footer { color:#607c7a; }
.engine-footer>div>span { color:#416e69; }
.engine-footer b { color:#7b9f94; }

/* Model metrics remain the visual focus, now on a pale aqua surface. */
.model-section { background:#fff; border-bottom-color:var(--line); }
.model-title-accent { color:var(--accent); }
.performance-context { color:#557675; }
.performance-context .status-dot { background:var(--accent); }
.performance-context a { color:var(--accent-strong); }
.performance-metric { background:#f8fcfa; border-color:#d4e8df; }
.performance-metric-heading>span, .performance-metric>p { color:#587a75; }
.performance-value { color:#1b6770; }
.performance-direction { color:#317a62; background:#e9f7ee; border-color:#cfe7d8; }
.performance-primary {
  color:var(--ink);
  background:linear-gradient(130deg,#e1f3ec,#eff9f5);
  border-color:#b9ded1;
  box-shadow:0 12px 30px #2f8e6a09;
}
.performance-primary .performance-metric-heading>span { color:#4c776f; }
.performance-primary .performance-value { color:var(--accent-strong); }
.performance-primary-track { background:#c5e1d7; }
.performance-primary-track>span { background:#288f83; }
.performance-primary>p { color:#527a71; }
.performance-primary>p>span { color:var(--accent-strong); }
.performance-comparison { background:#fff; border-color:#d4e8df; box-shadow:0 10px 35px #2a5e4706; }
.performance-chart-kicker { color:#5b7d74; }
.performance-gain { color:#237d69; background:#eaf7ef; border-color:#cce7d8; }
.performance-chart-label { color:#3f6f6d; }
.performance-chart-label>strong { color:#20545c; }
.performance-series-dot { background:#9ebeb4; }
.performance-series-nanyin { background:#269c8a; }
.performance-chart-track { background:#edf5f0; }
.performance-chart-fill { background:linear-gradient(90deg,#1a8685,#69b79c); }
.performance-baseline { background:#b5ccc3; }
.performance-chart-axis, .performance-note { color:#567770; }
.performance-sample-summary { border-color:var(--line); }
.performance-sample-summary strong { color:var(--accent-strong); }
.performance-sample-summary strong>span, .performance-sample-summary p { color:#52796f; }
.model-technical-details { border-color:#cfe5dc; }
.model-technical-details>summary>span:first-child>span { color:#597b72; }
.model-details-icon { border-color:#bad7cb; color:var(--accent); background:#f4faf7; }
.model-principle { border-color:#d4e8df; }
.model-principle-index { color:var(--accent); }
.model-principle p { color:var(--muted); }
.model-feedback-link { color:var(--accent-strong); border-color:#a9cec2; }
.model-blueprint { background:#f0f8f4; border-color:#cfe5da; }
.model-blueprint-header, .model-node-label { color:#4b756c; }
.model-blueprint-header .status-dot { background:var(--accent); }
.model-input { background:#fff; border-color:#d2e6dc; }
.model-input-wave, .model-connector { color:#438d7d; }
.model-core { background:#fff; color:var(--ink); border-color:#b7dcd0; box-shadow:0 8px 20px #226c5010; }
.model-core-label, .model-core>p { color:#567c72; }
.model-core>strong>span { color:var(--accent); }
.model-core-tags>span { color:#337565; background:#eaf6ef; border-color:#cce6d7; }
.model-output { background:#e5f4ea; border-color:#c5e1cc; }
.model-output>div { color:#4a7658; }
.model-output>p { color:#266d52; }
.model-output>p>span { color:#4f7960; }
.model-blueprint>figcaption { color:#4d7869; }
.model-foundations { border-color:var(--line); }
.model-foundations>p, .model-foundations dd { color:#5a7a72; }
.model-foundations dt { color:var(--accent-strong); }

/* Repertoire, product imagery and cultural content. */
.song-explorer { border-color:#d4e7de; }
.song-option { border-color:#e1eee7; }
.song-option>span:first-child, .song-subtitle { color:#66817b; }
.song-arrow { color:#749b8e; }
.song-option[aria-selected="true"] strong,
.song-option[aria-selected="true"] .song-arrow,
.song-option[aria-selected="true"]>span:first-child,
.song-option:hover strong { color:var(--accent); }
.song-details { background:#e4f2ea; }
.song-detail::before, .song-detail::after { border-color:#8abb9e45; }
.song-detail-index, .song-detail-copy>span { color:#537d65; }
.song-glyph { color:#48936f; opacity:.8; }
.song-detail p { color:#517c62; }
.song-detail-footer { background:#dbede1; border-color:#b8d9c5; }
.song-detail-footer>span { color:#557b61; }
.song-detail-footer button { color:#256546; }
.app-section { background:#eef8f4; border-color:#e1eee7; }
.app-image { background:#fff; border-color:#d9ece2; box-shadow:0 18px 40px #325d4210; }
.app-image-label, .app-image figcaption { color:#5a7a71; }
.app-image-label .status-dot { background:var(--accent); }
.app-points { color:#487567; }
.app-points i { background:#daeee2; color:#267d64; }
.app-link { color:var(--accent-strong); border-color:#91bcae; }
.app-link:hover { color:#1b6554; }
.heritage-image { background:#fff; border:1px solid #d9e9e1; }
.heritage-image img { filter:saturate(.85); }
.heritage-image figcaption { color:#56736e; }
.heritage-image figcaption>span:last-child { color:var(--accent); }
.heritage-mark { color:#70ac97; }
.heritage-copy em { color:#4d8874; }
.heritage-sign { color:#5c7d74; }
.heritage-sign .brand-logo-frame { width:44px; opacity:.9; }

/* Closing and footer: preserve a gentle, continuous light canvas. */
.start-section { background:linear-gradient(110deg,#e0f2e9,#edf8ef); border-top:1px solid #d0e9db; }
.start-section h2 span { color:var(--accent); }
.start-section p:not(.eyebrow) { color:#4f7667; }
.start-qr { background:#fff; box-shadow:10px 14px 0 #bddbca70,0 10px 40px #42724b0c; border:1px solid #d2e8d8; }
.site-footer { background:#f6faf8; color:var(--ink); border-top:1px solid #dcebe2; }
.footer-top p, .footer-top>a:last-child, .footer-bottom { color:#5b7973; }
.footer-top>a:last-child span { color:var(--accent); }
.footer-bottom a:hover { color:var(--accent-strong); }
.footer-top .brand-logo-frame { width:54px; }
.experience-dialog { background:#fff; border-color:#d0e8dc; box-shadow:0 24px 100px #214d3f26; }
.experience-dialog::backdrop { background:#21433c80; }
.dialog-close:hover { background:#edf7f1; }
.dialog-eyebrow { color:#517e6b; }
.qr-save { color:var(--accent-strong); border-color:#83b4a2; }

@media(max-width:1100px) {
  .header-inner { gap:22px; }
  .desktop-nav { gap:25px; }
}
@media(min-width:801px) and (max-width:960px) {
  .header-inner { gap:17px; }
  .brand { font-size:20px; gap:9px; }
  .brand-logo-frame { width:46px; }
  .desktop-nav { gap:17px; }
}
@media(max-width:800px) {
  .brand-logo-frame { width:43px; }
  .mobile-nav { background:#fff; }
  .brand small { font-size:10px; }
}
@media(max-width:480px) {
  .brand { gap:8px; }
  .brand-logo-frame { width:41px; }
  .footer-top .brand-logo-frame { width:46px; }
  .hero-visual { background:radial-gradient(ellipse at 50% 38%,#d1eee2b0 0,transparent 68%); }
}
@media(max-width:360px) {
  .header-inner { gap:10px; }
  .brand { gap:7px; font-size:17px; }
  .brand-logo-frame { width:36px; }
}