/* finesse · master · 龙蜕馆 · restrained editorial instrument */
:root {
  --lt-ink: #203129;
  --lt-rust: #9b4a32;
  --lt-bronze: #b86f45;
  --lt-paper: #f8f7f1;
  --lt-line: rgba(47, 61, 52, .18);
  --lt-ease: 160ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: clip; }
img, svg, canvas { max-width: 100%; }
body main h1,
body main h2,
body main h3 { letter-spacing: .04em !important; text-wrap: balance; }
body main p,
body main li { text-wrap: pretty; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--lt-rust);
  outline-offset: 3px;
}
button, a, input, textarea, select { transition-duration: 160ms !important; }
body * { transition-property: color, background-color, border-color, opacity, transform, max-height !important; }

/* Shared anti-template corrections */
body .glass-card,
body [class*="-card"] { box-shadow: none; }
body .hero-title,
body .page-header h1 {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
body .section-title::before,
body .section-title::after,
body .sec-title::before,
body .sec-title::after { display: none; }
body .btn-primary,
body .primary-btn,
body .submit-btn,
body .hero-btn.primary,
body .dp-btn {
  border-radius: 2px;
  box-shadow: none;
  background-image: none;
}

/* Header becomes a quiet piece of architecture, not a neon banner. */
body .site-header {
  background: color-mix(in srgb, var(--surface, #101714) 92%, transparent);
  border-bottom: 1px solid var(--line, rgba(255,255,255,.12));
  backdrop-filter: blur(12px);
}
body .sh-inner { max-width: 1240px; padding: 12px 28px; gap: 26px; }
body .sh-logo { color: var(--accent, var(--lt-bronze)); font-size: 22px; letter-spacing: .32em; }
body .sh-nav { gap: clamp(18px, 2.3vw, 32px); }
body .sh-link { color: var(--muted, #9da49c); font-size: 14px; letter-spacing: .06em; }
body .sh-link:hover, body .sh-link.active { color: var(--text, #eee9dc); }
body .sh-link.active::after { height: 1px; bottom: -8px; background: var(--accent, var(--lt-bronze)); box-shadow: none; }
body .sh-account { color: var(--muted, #9da49c); }
body .sh-btn { border-radius: 2px; padding: 8px 14px; }
body .sh-btn-gold { background: var(--accent, var(--lt-bronze)); color: var(--surface, #101714); box-shadow: none; }
body .sh-btn-ghost { color: var(--accent, var(--lt-bronze)); border-color: color-mix(in srgb, var(--accent, #b86f45) 45%, transparent); }
body .sh-path { max-width: 1240px; padding: 1px 28px 9px; }
body .sh-path { display: none; }
body .sh-path-node { color: var(--muted, #9da49c); text-shadow: none; }
body .sh-path-node.done,
body .sh-path-node.active { color: var(--accent, var(--lt-bronze)); text-shadow: none; }
body .sh-path-node::before { border-radius: 0; width: 6px; height: 6px; }
body .sh-path-node.done::before,
body .sh-path-node.active::before { box-shadow: none; }
body .sh-path-sep { background: var(--line, rgba(255,255,255,.12)); }
body .site-footer {
  color: var(--text, #eee9dc);
  background: var(--surface-2, #111a17);
  border-color: var(--line, rgba(255,255,255,.12));
}
body .sf-brand .sf-logo,
body .sf-col-title { color: var(--accent, var(--lt-bronze)); }
body .sf-brand .sf-slogan,
body .sf-col a,
body .sf-copy { color: var(--muted, #9da49c); }

/* Brand: the only cinematic room. */
body[data-surface="brand"] {
  --surface: #0b1110; --surface-2: #111a17; --text: #eee9dc; --muted: #a5aba3;
  --accent: #b86f45; --line: rgba(205, 194, 170, .18);
  background: var(--surface); color: var(--text);
}
body[data-surface="brand"] .section-hero { min-height: min(790px, 88vh); }
body[data-surface="brand"] .hero-content { text-align: left; max-width: 1180px; width: calc(100% - 56px); margin: 0 auto; }
body[data-surface="brand"] .hero-title { color: var(--text); font-size: clamp(64px, 9vw, 118px); letter-spacing: .16em; line-height: .96; }
body[data-surface="brand"] .hero-subtitle { max-width: 520px; font-size: clamp(19px, 2.2vw, 30px); color: var(--text); }
body[data-surface="brand"] .hero-cta { justify-content: flex-start; }
body[data-surface="brand"] .hero-quote {
  left: max(50px, calc((100vw - 1180px)/2)); right: auto; transform: none;
  width: min(520px, calc(100vw - 100px)); margin-left: 0; padding: 0 0 0 18px;
  border: 0; border-left: 1px solid var(--accent); border-radius: 0;
  background: transparent; backdrop-filter: none; box-shadow: none; text-align: left;
}
body[data-surface="brand"] .btn-primary { color: #fff9f2; background: var(--accent); border-color: var(--accent); }
body[data-surface="brand"] .btn-secondary { color: #c7d8d3; border-color: rgba(199,216,211,.55); border-radius: 2px; }
body[data-surface="brand"] .glass-card { background: transparent; backdrop-filter: none; border-color: var(--line); }
body[data-surface="brand"] .fade-in-up { transform: translateY(12px); transition-duration: .35s; }
body[data-surface="brand"] .fade-in-up.visible { transform: translateY(0); }
body[data-surface="brand"] .section-paths { max-width: 1180px; padding-top: 92px; padding-bottom: 92px; }
body[data-surface="brand"] .paths-header { max-width: 680px; margin: 0 0 42px; text-align: left; }
body[data-surface="brand"] .paths-header h2 { color: var(--text); }
body[data-surface="brand"] .paths-grid { display: block; gap: 0; border-top: 1px solid var(--line); }
body[data-surface="brand"] .path-card {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 30px 8px;
  display: grid; grid-template-columns: 120px 210px minmax(0,1fr) 110px;
  grid-template-rows: auto auto; gap: 5px 28px; align-items: center;
}
body[data-surface="brand"] .path-card:hover { transform: none; background: rgba(255,255,255,.025); }
body[data-surface="brand"] .path-step { grid-column: 1; grid-row: 1 / span 2; }
body[data-surface="brand"] .path-card h3 { grid-column: 2; grid-row: 1; }
body[data-surface="brand"] .path-role { grid-column: 2; grid-row: 2; }
body[data-surface="brand"] .path-desc { grid-column: 3; grid-row: 1 / span 2; max-width: 62ch; }
body[data-surface="brand"] .path-go { grid-column: 4; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
body[data-surface="brand"] .path-card h3,
body[data-surface="brand"] .path-role,
body[data-surface="brand"] .path-desc { margin: 0; }
body[data-surface="brand"] .path-card h3,
body[data-surface="brand"] .path-role,
body[data-surface="brand"] .path-step { writing-mode: horizontal-tb; word-break: keep-all; }
body[data-surface="brand"] .path-step { color: var(--accent); }
body[data-surface="brand"] .boundary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); }
body[data-surface="brand"] .boundary-card { border: 0; border-radius: 0; background: var(--surface-2); }

/* Observatory: compact, evidence-led, bronze instrument surfaces. */
body[data-surface="observatory"] {
  --surface: #111613; --surface-2: #171e1a; --text: #e8e4da; --muted: #9da49c;
  --accent: #bd754a; --line: rgba(205, 194, 170, .16);
  --gold: var(--accent); --gold-light: #d39a72; --gold-deep: #7f4932;
  --text-main: var(--text); --text-sub: var(--muted); --bg: var(--surface); --bg-card: var(--surface-2);
  background: var(--surface); color: var(--text);
}
body[data-surface="observatory"] .wrap,
body[data-surface="observatory"] .container { max-width: 1240px; }
body[data-surface="observatory"] .page-header,
body[data-surface="observatory"] .overview-hero { text-align: left; padding-top: 42px; padding-bottom: 32px; }
body[data-surface="observatory"] .page-header h1 { font-size: clamp(32px,5vw,58px); letter-spacing: .08em; }
body[data-surface="observatory"] .dingpan,
body[data-surface="observatory"] .overview-hero,
body[data-surface="observatory"] .glass-card,
body[data-surface="observatory"] [class*="-card"] { border-radius: 3px; border-color: var(--line); background-color: var(--surface-2); }
body[data-surface="observatory"] .dim-grid,
body[data-surface="observatory"] .senior-grid { gap: 1px; background: var(--line); }
body[data-surface="observatory"] .dim-card,
body[data-surface="observatory"] .senior-card { border: 0; border-radius: 0; }
body[data-surface="observatory"] input,
body[data-surface="observatory"] select,
body[data-surface="observatory"] textarea { border-radius: 2px; background: #0d120f; color: var(--text); }
body[data-surface="observatory"] table,
body[data-surface="observatory"] .bazi-table { font-variant-numeric: tabular-nums; }

/* Workbench: paper, annotations and choices. No spectacle. */
body[data-surface="workbench"] {
  --surface: #eef0ea; --surface-2: #f8f7f1; --text: #203129; --muted: #66736b;
  --accent: #9b4a32; --line: rgba(47,61,52,.18);
  --gold: var(--accent); --gold-light: #ad6249; --gold-deep: #783724;
  --text-main: var(--text); --text-sub: var(--muted); --bg: var(--surface); --bg-card: var(--surface-2);
  background: var(--surface); color: var(--text);
}
body[data-surface="workbench"] .site-header { background: rgba(238,240,234,.94); }
body[data-surface="workbench"] .wrap { max-width: 980px; }
body[data-surface="workbench"] .hero {
  text-align: left; padding: clamp(54px,8vw,84px) 0 44px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
}
body[data-surface="workbench"] .hero::before { display: none; }
body[data-surface="workbench"] .hero-title { color: var(--text); max-width: 940px; font-size: clamp(32px,3.8vw,46px); line-height: 1.42; }
body[data-surface="workbench"] .hero-desc { margin-left: 0; color: var(--muted); }
body[data-surface="workbench"] .hero-actions { justify-content: flex-start; }
body[data-surface="workbench"] .stage,
body[data-surface="workbench"] .section-head { border-color: var(--line); }
body[data-surface="workbench"] .seeing,
body[data-surface="workbench"] .evidence,
body[data-surface="workbench"] .guide,
body[data-surface="workbench"] .verify,
body[data-surface="workbench"] .action,
body[data-surface="workbench"] .deep,
body[data-surface="workbench"] .form-card,
body[data-surface="workbench"] .xin-card,
body[data-surface="workbench"] .chg-card,
body[data-surface="workbench"] .cmp-col,
body[data-surface="workbench"] .dual .d-col,
body[data-surface="workbench"] .rec-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; box-shadow: none; }
body[data-surface="workbench"] .seeing::before { background: var(--accent); box-shadow: none; }
body[data-surface="workbench"] .ev-row { border-color: var(--line); }
body[data-surface="workbench"] input,
body[data-surface="workbench"] textarea,
body[data-surface="workbench"] select { background: #fbfaf5; color: var(--text); border-color: var(--line); border-radius: 2px; }
body[data-surface="workbench"] .primary-btn,
body[data-surface="workbench"] .submit-btn,
body[data-surface="workbench"] .hero-btn.primary { color: #fff9f2; background: var(--accent); border-color: var(--accent); }
body[data-surface="workbench"] .ghost-btn,
body[data-surface="workbench"] .hero-btn.ghost { color: var(--text); border-color: var(--line); background: transparent; border-radius: 2px; }
body[data-surface="workbench"] button.hero-btn { font: inherit; cursor: pointer; }
body[data-surface="workbench"] .vq-opt.sel { border-color: var(--accent); background: rgba(155,74,50,.08); }
body[data-surface="workbench"] .section-head .sh-line,
body[data-surface="workbench"] .stage .st-line { background: var(--line); }
body[data-surface="workbench"][data-page="jianxing"] .empty {
  max-width: 700px; margin: 0; padding: 84px 0 110px; text-align: left;
}
body[data-surface="workbench"][data-page="jianxing"] .empty h3 {
  color: var(--text); font-size: 34px; line-height: 1.45; letter-spacing: .04em; margin-bottom: 16px;
}
body[data-surface="workbench"][data-page="jianxing"] .empty p {
  color: var(--muted); font-size: 16px; line-height: 1.9; margin-bottom: 26px;
}
body[data-surface="workbench"][data-page="jianxing"] .empty a {
  color: #fff9f2; background: var(--accent); border-radius: 2px; padding: 12px 20px;
}

/* Atelier: objects in daylight, not mystical product cards. */
body[data-surface="atelier"] {
  --surface: #ecece7; --surface-2: #f7f6f0; --text: #28322d; --muted: #68716c;
  --accent: #a85236; --line: rgba(49,58,53,.18);
  --gold: var(--accent); --gold-light: #bd6f54; --gold-deep: #773925;
  --text-main: var(--text); --text-sub: var(--muted); --bg: var(--surface); --bg-card: var(--surface-2);
  background: var(--surface); color: var(--text);
}
body[data-surface="atelier"] .site-header { background: rgba(236,236,231,.94); }
body[data-surface="atelier"] .wrap,
body[data-surface="atelier"] .container { max-width: 1240px; }
body[data-surface="atelier"] .hero,
body[data-surface="atelier"] .page-header { text-align: left; padding-top: clamp(56px,8vw,96px); padding-bottom: 46px; }
body[data-surface="atelier"] .hero { background: transparent; border: 0; border-radius: 0; }
body[data-surface="atelier"] .hero::before { display: none; }
body[data-surface="atelier"] .hero-title,
body[data-surface="atelier"] .page-header h1 { color: var(--text); max-width: 920px; font-size: clamp(38px,4.8vw,62px); line-height: 1.2; }
body[data-surface="atelier"] .hero-desc,
body[data-surface="atelier"] .page-header p { margin-left: 0; color: var(--muted); }
body[data-surface="atelier"] .hero-actions { justify-content: flex-start; }
body[data-surface="atelier"] .ware-grid,
body[data-surface="atelier"] .goods-grid { gap: 1px; background: var(--line); }
body[data-surface="atelier"] .ware-card,
body[data-surface="atelier"] .goods-card,
body[data-surface="atelier"] .package-card,
body[data-surface="atelier"] .zhao-card,
body[data-surface="atelier"] .glass-card { background: var(--surface-2); border-color: var(--line); border-radius: 2px; box-shadow: none; }
body[data-surface="atelier"] .ware-card:hover,
body[data-surface="atelier"] .goods-card:hover,
body[data-surface="atelier"] .package-card:hover { transform: none; border-color: var(--accent); }
body[data-surface="atelier"] .ware-img { background: #dedfd8; border-radius: 0; }
body[data-surface="atelier"] .ware-img .symbol,
body[data-surface="atelier"] .goods-creature { color: var(--accent); text-shadow: none; }
body[data-surface="atelier"] .hero-btn.primary,
body[data-surface="atelier"] .btn-primary { color: #fff9f2; background: var(--accent); border-color: var(--accent); }
body[data-surface="atelier"] .ware-cta,
body[data-surface="atelier"] .zhao-link,
body[data-surface="atelier"] .merge-btn { color: #fff9f2; background: var(--accent); background-image: none; box-shadow: none; border-radius: 2px; }

/* Account and legal surfaces use standard, readable product UI. */
body[data-surface="account"], body[data-surface="legal"] {
  --surface: #edf0ec; --surface-2: #f8f9f5; --text: #23322a; --muted: #64716a;
  --accent: #9b4a32; --line: rgba(47,61,52,.18);
  --gold: var(--accent); --gold-light: #ad6249; --gold-deep: #783724;
  --text-main: var(--text); --text-sub: var(--muted); --bg: var(--surface); --bg-card: var(--surface-2);
  background: var(--surface); color: var(--text);
}
body[data-surface="account"] .site-header, body[data-surface="legal"] .site-header { background: rgba(237,240,236,.94); }
body[data-surface="account"] .glass-card,
body[data-surface="account"] [class*="-card"],
body[data-surface="legal"] [class*="-card"] { background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; }
body[data-surface="account"] input,
body[data-surface="account"] textarea,
body[data-surface="account"] select { background: #fff; color: var(--text); border-color: var(--line); }
body[data-surface="account"] .btn-primary { background: var(--accent); color: #fff9f2; }

@media (min-width: 761px) and (max-width: 980px) {
  body[data-surface="brand"] .path-card {
    grid-template-columns: 96px 160px minmax(0,1fr) 92px;
    gap: 5px 18px;
  }
  body[data-surface="brand"] .path-desc { font-size: 13px; }
}

@media (max-width: 760px) {
  body .sh-inner { padding: 11px 16px; }
  body .sh-path { display: none; }
  body .sh-nav { background: var(--surface, #101714); border-color: var(--line, rgba(255,255,255,.12)); }
  body .sh-link { min-height: 44px; display: flex; align-items: center; }
  body[data-surface="brand"] .section-hero {
    min-height: 720px;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0 20px 174px;
  }
  body[data-surface="brand"] .hero-bg::after {
    background: linear-gradient(180deg, rgba(7,8,13,.22), rgba(7,8,13,.12) 42%, rgba(7,8,13,.82) 100%);
  }
  body[data-surface="brand"] .hero-content { width: 100%; margin: 0; }
  body[data-surface="brand"] .hero-title { font-size: 56px; line-height: 1; letter-spacing: .12em !important; margin-bottom: 18px; }
  body[data-surface="brand"] .hero-subtitle { font-size: 18px; line-height: 1.65; letter-spacing: .04em; margin-bottom: 24px; }
  body[data-surface="brand"] .hero-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  body[data-surface="brand"] .hero-cta a { width: auto; min-width: 180px; padding: 11px 18px; text-align: center; font-size: 14px; }
  body[data-surface="brand"] .hero-quote {
    left: 20px; right: 20px; bottom: 26px; transform: none;
    width: auto; padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--accent);
    border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none;
    font-size: 13px; line-height: 1.75; letter-spacing: .02em; text-align: left;
  }
  body[data-surface="brand"] .hero-quote p { width: auto; max-width: none; }
  body[data-surface="brand"] .section-paths,
  body[data-surface="brand"] .section-products,
  body[data-surface="brand"] .section-boundary,
  body[data-surface="brand"] .section-continue,
  body[data-surface="brand"] .section-final-cta { padding: 72px 20px; }
  body[data-surface="brand"] .paths-header,
  body[data-surface="brand"] .products-header,
  body[data-surface="brand"] .boundary-header,
  body[data-surface="brand"] .continue-header { text-align: left; margin-bottom: 34px; }
  body[data-surface="brand"] .paths-header h2,
  body[data-surface="brand"] .products-header h2,
  body[data-surface="brand"] .boundary-header h2,
  body[data-surface="brand"] .continue-header h2 { color: var(--text); font-size: 28px; line-height: 1.35; margin-bottom: 8px; }
  body[data-surface="brand"] .paths-header p,
  body[data-surface="brand"] .products-header p,
  body[data-surface="brand"] .boundary-header p { font-size: 14px; line-height: 1.75; }
  body[data-surface="brand"] .path-card { display: block; padding: 26px 0; }
  body[data-surface="brand"] .path-step { font-size: 14px; letter-spacing: .08em; margin-bottom: 8px; }
  body[data-surface="brand"] .path-card h3 { color: var(--text); font-size: 21px; line-height: 1.4; margin-bottom: 4px; }
  body[data-surface="brand"] .path-role { color: var(--accent); font-size: 13px; line-height: 1.7; letter-spacing: .04em; margin-bottom: 12px; }
  body[data-surface="brand"] .path-desc { font-size: 14px; line-height: 1.85; margin-bottom: 12px; }
  body[data-surface="brand"] .path-go { font-size: 13px; }
  body[data-surface="brand"] .boundary-grid { grid-template-columns: 1fr; }
  body[data-surface="brand"] .boundary-card { padding: 24px 0; background: transparent; border-bottom: 1px solid var(--line); }
  body[data-surface="brand"] .boundary-card h3 { color: var(--text); font-size: 18px; line-height: 1.45; }
  body[data-surface="brand"] .boundary-card p { font-size: 14px; line-height: 1.85; }
  body[data-surface="brand"] .product-card { padding: 26px 22px; }
  body[data-surface="brand"] .cta-content h2 { color: var(--text); font-size: 30px; line-height: 1.5; letter-spacing: .06em !important; }
  body[data-surface="workbench"] .wrap,
  body[data-surface="atelier"] .wrap { width: min(100% - 28px, 980px); }
  body[data-surface="workbench"] .hero-title,
  body[data-surface="atelier"] .hero-title,
  body[data-surface="observatory"] .page-header h1 { letter-spacing: .04em !important; }
  body[data-surface="workbench"][data-page="jianxing"] .empty { padding: 58px 0 80px; }
  body[data-surface="workbench"][data-page="jianxing"] .empty h3 { font-size: 27px; }
  body[data-surface="workbench"][data-page="jianxing"] .empty p { font-size: 15px; }
  body[data-surface="workbench"][data-page="jianxing"] .empty br { display: none; }
  body h1, body h2, body h3 { overflow-wrap: anywhere; }
  body button, body [role="button"], body input, body select { min-height: 44px; }
}

@media (max-width: 390px) {
  body[data-surface="brand"] .hero-title { font-size: 50px; }
  body[data-surface="workbench"] .hero-title,
  body[data-surface="atelier"] .hero-title { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}