/* Follow the supplied longge-web section layout. Keep the selected black/white brand palette. */
:root {
  --font:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;
  --bg:#fff; --ink:#111214; --muted:#676a70; --accent:#ce4513;
  --surface:#f3f4f5; --on-accent:#fff; --outline:#d9dbdd;
  --bg-soft:var(--surface); --surface-2:var(--bg);
  --ink-2:var(--muted); --ink-3:var(--muted);
  --clay:var(--accent); --clay-deep:var(--accent); --clay-lt:var(--accent);
  --moss:var(--accent); --moss-lt:var(--accent);
  --line:var(--outline); --line-2:var(--outline);
  --sh-1:none; --sh-2:none;
}
[data-theme="dark"] {
  color-scheme:dark; --bg:#080808; --ink:#f7f7f5; --muted:#b4b4b3;
  --accent:#ff9a48; --on-accent:#111; --surface:#202020; --outline:#4c4c4c;
}
body { background:var(--bg); color:var(--ink); }
html { scroll-padding-top:90px; }
.nav { background:var(--bg); border:0; }
.nav-inner { gap:30px; }
.brand { gap:8px; }
.brand-name { font-size:16px; letter-spacing:0; }
.brand-sub { color:var(--muted); background:none; border:0; font-size:13px; letter-spacing:0; padding:0 0 0 4px; }
.brand-mark { width:28px; height:40px; background-size:951.6px 595.2px; background-position:-39px -11px; }
.brand-mark { mix-blend-mode:multiply; }
[data-theme="dark"] .brand-mark { background-position:-35px -11px; mix-blend-mode:screen; }
.nav-links { margin-left:auto; }
.nav-links a { min-height:44px; display:flex; align-items:center; font-size:14px; }
.nav-actions { gap:12px; }
.theme-toggle { min-height:38px; background:var(--surface); }
.btn { box-shadow:none; }
.btn::after { display:none; }
.btn-solid { background:var(--accent); color:var(--on-accent); }
.btn-solid:hover { background:var(--accent); box-shadow:none; transform:translateY(-2px); }
.btn-line { background:var(--surface); border-color:var(--outline); }
.btn-line:hover { border-color:var(--accent); box-shadow:none; }
.reveal { opacity:1; transform:none; }
.hero { padding:calc(var(--nav-h) + 40px) 0 80px; min-height:100svh; }
.hero-inner { grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); }
.hero-copy { max-width:520px; }
.hero h1 { font-size:clamp(2.9rem,6.2vw,5.4rem); line-height:1.06; font-weight:600; letter-spacing:-.018em; margin:0; color:var(--ink); background:none; white-space:nowrap; }
.hero .eyebrow { font-family:var(--font); font-size:13px; letter-spacing:0; line-height:1.6; margin:0 0 26px; }
.pulse { background:var(--accent); box-shadow:none; animation:none; }
.hero .hero-sub { margin:15px 0 0; font-size:15px; line-height:1.6; color:var(--accent); letter-spacing:.18em; }
.hero .hero-desc { font-size:16px; line-height:1.95; margin:26px 0 0; color:var(--muted); }
.hero .hero-meta { font-family:var(--font); font-size:13px; letter-spacing:.02em; margin:34px 0 0; }
.hero .scene-note { position:static; font-size:13px; color:var(--muted); margin:12px 0 0; }
.hero-visual { width:100%; height:clamp(460px,44vw,680px); overflow:visible; }
.art { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.art canvas,.art-fallback { position:absolute; width:100%; height:100%; inset:0; }
.art-fallback { mask:none; -webkit-mask:none; }
.art-fallback { /* taste-skill-ignore: fade the visible stage edge after image enlargement. */ mask-image:linear-gradient(to bottom,#000 74%,transparent 98%); -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 98%); }
.art-fallback img { object-fit:fill; max-width:none; inset:auto; }
.art-fallback .light-image,.art-fallback .dark-image { /* taste-skill-ignore: feather mask required by user, not a decorative fill. */ mask-image:linear-gradient(to right,transparent 37.5%,#000 45%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 19%,#000 64%,transparent 82%),url(#referenceUi); mask-composite:intersect; -webkit-mask-image:linear-gradient(to right,transparent 37.5%,#000 45%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 19%,#000 64%,transparent 82%),url(#referenceUi); -webkit-mask-composite:source-in; }
.art-fallback .dark-image { /* taste-skill-ignore: retain original image edge feathering. */ mask-image:linear-gradient(to right,transparent 37.5%,#000 45%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 67%,transparent),url(#referenceUi); -webkit-mask-image:linear-gradient(to right,transparent 37.5%,#000 45%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 67%,transparent),url(#referenceUi); }
.scroll-hint span { border-color:var(--outline); }
.section { background:var(--bg); }
.section-head p,.tool-card p,.rule p { color:var(--muted); font-size:16px; }
.index,.card-tag { font-family:var(--font); font-size:13px; color:var(--muted); }
.tool-card { border:0; background:var(--surface); box-shadow:none; }
.tool-card:hover { box-shadow:none; transform:translateY(-4px); }
.card-glow,.card-state { display:none; }
.tool-card h3 { color:var(--ink); }
.card-specs li { color:var(--muted); border-color:var(--outline); }
.link-arrow { color:var(--ink); min-height:44px; }
.try-panel { background:var(--surface); border:0; box-shadow:none; }
.try-mock { transform:none; border:0; background:var(--bg); border-radius:12px; box-shadow:none; padding:0; }
.preview-header { display:flex; justify-content:space-between; padding:18px 22px; color:var(--muted); background:var(--surface); font-size:13px; }
.preview-content { display:grid; grid-template-columns:120px 1fr; min-height:310px; }
.preview-content aside { display:flex; flex-direction:column; gap:18px; padding:22px 16px; background:var(--surface); font-size:13px; }
.preview-content aside span { color:var(--muted); }
.preview-main { padding:25px; }
.preview-main h3 { font-size:20px; margin:0 0 8px; }
.preview-main p { font-size:13px; color:var(--muted); margin:0 0 22px; }
.preview-task { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:12px 0; }
.preview-task small { color:var(--muted); white-space:nowrap; font-size:13px; }
.preview-main a { display:inline-block; color:var(--accent); padding:14px 0; font-size:13px; }
.rule { border-color:var(--outline); }
.rule-no { font-family:var(--font); color:var(--accent); }
.footer { display:block; text-align:left; padding:60px 0 26px; font-size:13px; background:var(--surface); color:var(--ink); }
.foot-col a,.foot-col button { color:var(--muted); font-size:13px; text-align:left; min-height:30px; padding:0; }
.foot-col button:hover { color:var(--accent); }
.foot-note { color:var(--muted); }
dialog { line-height:1.6; }
@media(max-width:1100px) {
  .brand-sub { display:none; }
  .nav-inner { gap:18px; }
  .nav-links { gap:20px; }
  .hero-visual { height:500px; }
  .hero-inner { grid-template-columns:1fr; }
}
@media(max-width:860px) {
  .hero-inner { grid-template-columns:1fr; gap:24px; }
  .hero { min-height:100svh; padding-top:calc(var(--nav-h) + 55px); padding-bottom:65px; }
  .hero-copy { max-width:600px; }
  .hero-visual { height:clamp(340px,67vw,540px); max-width:780px; margin:auto; }
  .hero h1 { font-size:clamp(46px,8vw,68px); }
  .nav-links { display:none; }
  .nav-actions { margin-left:auto; }
}
@media(max-width:640px) {
  .nav-inner { gap:8px; }
  .brand-name { font-size:15px; }
  .brand-mark { width:25px; height:37px; }
  .nav-actions { gap:6px; }
  .nav-actions .btn-sm { padding:0 10px; font-size:13px; }
  .theme-toggle { width:36px; min-height:36px; padding:0; }
  .hero-inner { gap:8px; }
  .hero h1 { font-size:clamp(42px,10.8vw,60px); }
  .hero .hero-desc { font-size:15px; }
  .hero .hero-meta { margin-top:24px; }
  .hero-visual { height:330px; width:calc(100% + 20px); margin-left:-10px; }
  .hero-cta { flex-wrap:wrap; gap:10px; }
  .hero-cta .btn-lg { padding:0 18px; font-size:14px; }
  .preview-content { grid-template-columns:90px 1fr; }
  .preview-content aside { padding:18px 10px; }
  .preview-main { padding:20px 14px; }
  .preview-task { font-size:13px; }
  .foot-base { gap:12px; }
}

/* Keep reference structure, with readable labels and native text typography. */
.brand-sub,.foot-col h4{font-family:var(--font);font-size:13px;letter-spacing:0}
.index,.card-tag,.foot-base,.foot-say,.card-specs li,.rule-no{font-size:13px;letter-spacing:0}
.try-hint{font-size:13px!important}
.card-top{font-family:var(--font)}

/* The supplied logo stays intact; rounded corners are a display treatment. */
.brand-logo{display:block;width:40px;height:40px;object-fit:contain;border-radius:10px;flex:0 0 auto}
.foot-brand .brand-logo{width:46px;height:46px;border-radius:12px}
.brand{gap:12px}
.foot-brand{gap:14px}
@font-face{font-family:"Ma Shan Zheng Title";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ma-shan-zheng-title.ttf") format("truetype")}
.hero h1{font-family:"Ma Shan Zheng Title","KaiTi","STKaiti",serif;font-weight:400;font-size:clamp(64px,6.2vw,88px);line-height:1.17;letter-spacing:-.025em;white-space:normal}
.hero h1 span{display:block;white-space:nowrap}
.hero .hero-desc{font-size:20px;line-height:1.75;margin-top:26px}
@media(max-width:1100px){.hero h1{font-size:80px}.hero .hero-desc{font-size:20px}}
@media(max-width:640px){.brand-logo{width:34px;height:34px;border-radius:9px}.brand{gap:8px}.hero h1{font-size:clamp(54px,15vw,68px)}.hero .hero-desc{font-size:17px;line-height:1.8}}