:root{
  --bg:#11100d;
  --bg-soft:#1b1711;
  --paper:#efe2c2;
  --paper-deep:#d7bd86;
  --ink:#17130c;
  --muted:#b9a783;
  --gold:#c8a15b;
  --gold-bright:#e2c071;
  --line:rgba(226,192,113,.28);
  --white:#f8f0de;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  --radius:24px;
  --max:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--white);
  background:
    radial-gradient(circle at 50% -10%,rgba(194,151,79,.18),transparent 42%),
    radial-gradient(circle at 0% 10%,rgba(79,87,100,.24),transparent 30%),
    linear-gradient(180deg,#100f0c 0%,#17120d 45%,#0f0e0c 100%);
  font-family: ui-serif, "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
button,a{font:inherit}
a{color:inherit}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.12;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.topbar{
  position:fixed;z-index:40;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 max(18px,env(safe-area-inset-left)) 0 max(18px,env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(14,13,11,.82),rgba(14,13,11,.1));
  backdrop-filter:blur(12px);
  opacity:0;transform:translateY(-16px);transition:.5s ease;
}
.topbar.visible{opacity:1;transform:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;letter-spacing:.08em}
.brand-mark{border:1px solid var(--line);color:var(--gold-bright);padding:4px 7px;font-size:12px;border-radius:999px;background:rgba(0,0,0,.25)}
.brand-text{font-size:15px;color:rgba(248,240,222,.92)}
.music-button{
  border:1px solid var(--line);background:rgba(239,226,194,.08);color:rgba(248,240,222,.92);border-radius:999px;padding:8px 12px;cursor:pointer;
}
.music-button:active{transform:translateY(1px)}
.hero{min-height:100svh;position:relative;overflow:hidden;background:#0d0c0a;padding:84px 0 64px}
.hero-bg{position:absolute;inset:-3%;background-position:center;background-size:cover;filter:blur(12px) saturate(.78) brightness(.62);transform:scale(1.08);opacity:.52}
.hero-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,rgba(226,192,113,.12),transparent 28%),linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.78) 58%,rgba(0,0,0,.92))}
.hero-shell{position:relative;z-index:2;width:min(92vw,560px);margin:0 auto}
.hero-poster-frame{margin:0;border-radius:28px;overflow:hidden;border:1px solid rgba(226,192,113,.24);background:#0f0d09;box-shadow:0 24px 80px rgba(0,0,0,.42)}
.hero-poster{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#11100d}
.hero-content{position:relative;z-index:2;width:100%;text-align:center;padding:22px 0 12px}
.case-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--gold-bright);font-size:12px;letter-spacing:.24em;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:rgba(0,0,0,.32);backdrop-filter:blur(6px)}
h1{margin:0;font-size:clamp(34px,11vw,58px);line-height:1.02;letter-spacing:.12em;text-shadow:0 10px 32px rgba(0,0,0,.75);font-weight:900}
.hero-lines{margin:16px auto 26px;color:rgba(248,240,222,.92);font-size:clamp(16px,4.6vw,22px);line-height:1.75;letter-spacing:.08em;text-shadow:0 6px 24px rgba(0,0,0,.8);max-width:24em}
.hero-lines p{margin:0}
.primary-button,.secondary-button,.copy-button{
  border:1px solid rgba(226,192,113,.55);color:#140f08;background:linear-gradient(180deg,#efd389,#b7833e);border-radius:999px;padding:14px 24px;min-width:160px;box-shadow:0 12px 34px rgba(0,0,0,.35);cursor:pointer;letter-spacing:.08em;font-weight:700;
}
.secondary-button{background:rgba(239,226,194,.08);color:var(--white);box-shadow:none}
.copy-button{width:100%;margin-top:18px}
.primary-button:hover,.copy-button:hover{filter:brightness(1.05)}
.primary-button:active,.secondary-button:active,.copy-button:active{transform:translateY(1px)}
.hero-tip{margin:14px 0 0;color:rgba(248,240,222,.55);font-size:13px;letter-spacing:.06em}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.35em;color:rgba(248,240,222,.42);writing-mode:vertical-rl}
.section{width:min(calc(100vw - 32px),var(--max));margin:0 auto;padding:82px 0;border-bottom:1px solid rgba(226,192,113,.12)}
.section-title{font-size:clamp(31px,8vw,56px);line-height:1.06;margin:0 0 22px;letter-spacing:.08em}
.section-eyebrow{color:var(--gold-bright);letter-spacing:.22em;font-size:12px;margin-bottom:14px;text-transform:uppercase}
.lead{font-size:clamp(17px,4.8vw,22px);line-height:1.9;color:rgba(248,240,222,.82);margin:0}
.paper-section{position:relative;padding-top:98px}
.paper-card{
  color:var(--ink);background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0)),
    var(--paper);
  border:1px solid rgba(80,54,22,.18);border-radius:var(--radius);padding:34px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.paper-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 10%,rgba(77,43,11,.12),transparent 18%),radial-gradient(circle at 80% 70%,rgba(77,43,11,.08),transparent 26%);pointer-events:none}
.paper-card>*{position:relative}
.paper-card h2{margin:0 0 22px;font-size:clamp(32px,9vw,62px);letter-spacing:.08em;line-height:1.08}
.paper-card p{font-size:19px;line-height:2;margin:0 0 18px}
.paper-question{margin-top:28px;padding:18px 18px;border-left:4px solid #5d4320;background:rgba(255,255,255,.25);font-weight:700;font-size:20px;line-height:1.7}
.definition-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
.not-card,.keyword-card,.dark-card{
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(239,226,194,.08),rgba(239,226,194,.03));border-radius:20px;padding:22px;box-shadow:0 18px 48px rgba(0,0,0,.22)
}
.not-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.not-list li{font-size:22px;padding:18px 16px;border:1px solid rgba(226,192,113,.2);border-radius:16px;background:rgba(0,0,0,.18)}
.answer-line{font-size:24px;line-height:1.65;color:var(--paper);margin:0}
.keyword-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.keyword{border:1px solid rgba(226,192,113,.35);padding:16px 12px;border-radius:16px;text-align:center;color:var(--gold-bright);background:rgba(0,0,0,.2);letter-spacing:.06em}
.method-card{border:1px solid rgba(226,192,113,.35);border-radius:28px;padding:34px 26px;background:linear-gradient(145deg,rgba(239,226,194,.08),rgba(239,226,194,.025));box-shadow:0 18px 48px rgba(0,0,0,.24)}
.method-card .section-title{margin-bottom:24px;color:var(--paper)}
.method-body{border-top:1px solid rgba(226,192,113,.2);padding-top:22px;color:rgba(248,240,222,.86)}
.method-label{color:var(--gold-bright);font-size:22px;font-weight:700;margin:0 0 14px;letter-spacing:.08em}
.method-body p:not(.method-label){font-size:18px;line-height:1.95;margin:0 0 16px}
.role-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 0 22px;margin:24px -16px 0;padding-left:16px;padding-right:16px}
.role-strip::-webkit-scrollbar{height:8px}.role-strip::-webkit-scrollbar-thumb{background:rgba(226,192,113,.25);border-radius:999px}
.role-card{flex:0 0 210px;scroll-snap-align:center;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(239,226,194,.06);box-shadow:0 18px 46px rgba(0,0,0,.28)}
.role-card img{display:block;width:100%;height:294px;object-fit:cover;background:#eadbb6}
.role-caption{padding:14px 14px 16px;text-align:center}.role-caption strong{display:block;font-size:22px;letter-spacing:.12em}.role-caption span{display:block;margin-top:4px;color:var(--gold);font-size:11px;letter-spacing:.18em}
.experience-list{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none;counter-reset:step}
.experience-list li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(239,226,194,.06);font-size:18px;line-height:1.75;color:rgba(248,240,222,.86)}
.experience-list li:before{content:counter(step,decimal-leading-zero);color:var(--gold-bright);font-size:14px;letter-spacing:.1em;margin-top:4px}
.note{margin-top:20px;color:rgba(248,240,222,.6);font-size:14px;line-height:1.7}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
.gallery-item{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 20px 52px rgba(0,0,0,.3)}
.gallery-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;opacity:.92;transition:transform .7s ease, opacity .7s ease}
.gallery-item:hover img{transform:scale(1.04);opacity:1}
.gallery-item span{position:absolute;left:16px;bottom:16px;padding:7px 12px;border:1px solid rgba(226,192,113,.42);background:rgba(0,0,0,.48);backdrop-filter:blur(8px);border-radius:999px;font-size:13px;color:var(--paper)}
.testimonial-wrap{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
.quote-list{display:grid;gap:14px}
.quote{position:relative;border:1px solid var(--line);border-radius:20px;padding:22px 20px 22px 46px;background:rgba(239,226,194,.06);line-height:1.75;color:rgba(248,240,222,.88);font-size:17px}
.quote:before{content:"“";position:absolute;left:16px;top:10px;color:var(--gold-bright);font-size:44px;line-height:1}
.source-image{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.source-image img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;object-position:top}
.info-card{display:grid;gap:12px;margin-top:28px}
.info-row{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:start;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(239,226,194,.06)}
.info-row dt{margin:0;color:var(--gold-bright);letter-spacing:.12em}.info-row dd{margin:0;line-height:1.65;color:rgba(248,240,222,.9)}
.info-notes{margin:20px 0 0;padding-left:20px;color:rgba(248,240,222,.62);line-height:1.8}
.show-layout{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}.show-image{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.22)}.show-image img{display:block;width:100%;height:auto}.show-list{display:grid;gap:12px}.show-item{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:18px;background:rgba(239,226,194,.06);padding:18px}.show-time{color:var(--muted);font-size:14px}.show-status{color:var(--gold-bright);font-size:14px;border:1px solid rgba(226,192,113,.28);border-radius:999px;padding:6px 10px;white-space:nowrap}
.cta-card{position:relative;text-align:center;border:1px solid var(--line);border-radius:28px;padding:42px 24px;background:radial-gradient(circle at 50% 0%,rgba(226,192,113,.19),transparent 48%),rgba(239,226,194,.06);box-shadow:var(--shadow);overflow:hidden}.cta-card:before{content:"221B";position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:92px;font-weight:900;color:rgba(226,192,113,.06);letter-spacing:.18em}.cta-card>*{position:relative}.cta-card h2{font-size:clamp(34px,9vw,64px);line-height:1.08;margin:0 0 18px}.cta-card p{margin:0 auto 24px;color:rgba(248,240,222,.74);line-height:1.8;max-width:500px}.cta-actions{display:grid;gap:12px;max-width:380px;margin:0 auto}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:60;background:rgba(18,15,10,.9);border:1px solid var(--line);color:var(--paper);border-radius:999px;padding:12px 16px;opacity:0;pointer-events:none;transition:.28s ease;box-shadow:0 14px 44px rgba(0,0,0,.35);white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (min-width:760px){
  .section{padding:108px 0}.paper-card{padding:54px 56px}.definition-grid{grid-template-columns:1fr 1.1fr}.role-card{flex-basis:248px}.role-card img{height:347px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.testimonial-wrap{grid-template-columns:1.05fr .95fr;align-items:start}.show-layout{grid-template-columns:.86fr 1.14fr}.cta-actions{grid-template-columns:1fr 1fr;max-width:520px}.copy-button{margin-top:0}.hero-shell{width:min(82vw,720px)}.hero-content{max-width:600px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* === 2026-07 mobile portrait redesign override ===
   目标：H5按手机竖屏传播设计，桌面预览也保持手机页面比例；
   首屏海报完整显示，不再用横屏 cover 裁切。 */
:root{
  --max: 430px;
  --mobile-max: 430px;
}

html{
  background:#090807;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,161,91,.18), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(62,46,28,.28), transparent 44%),
    #090807;
}

#app{
  width:min(100vw, var(--mobile-max));
  min-height:100vh;
  margin:0 auto;
  background:
    radial-gradient(circle at 50% -4%, rgba(200,161,91,.13), transparent 34%),
    linear-gradient(180deg,#11100d 0%, #17120d 42%, #0f0e0c 100%);
  overflow:hidden;
}

.topbar{
  left:50%;
  right:auto;
  width:min(100vw, var(--mobile-max));
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  transform:translate(-50%,-16px);
}

.topbar.visible{
  transform:translate(-50%,0);
}

.hero{
  width:100%;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  isolation:isolate;
}

.hero-bg{
  inset:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center top;
  transform:none;
  opacity:.86;
  filter:saturate(.9) contrast(1.03) brightness(.82);
}

.hero-shade{
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.74) 68%, rgba(0,0,0,.96) 100%),
    radial-gradient(circle at 50% 22%, rgba(0,0,0,0), rgba(0,0,0,.72) 78%);
}

.hero-content{
  width:min(86vw, 360px);
  padding:0 0 max(56px, calc(env(safe-area-inset-bottom) + 46px));
  margin-top:auto;
}

.case-kicker{
  margin-bottom:12px;
  padding:7px 13px;
  font-size:10px;
  letter-spacing:.22em;
}

h1{
  font-size:clamp(44px, 16vw, 70px);
  letter-spacing:.08em;
  line-height:1;
}

.hero-lines{
  margin:18px auto 24px;
  font-size:clamp(15px, 4.1vw, 18px);
  line-height:1.7;
}

.primary-button,.secondary-button,.copy-button{
  min-width:148px;
  padding:13px 22px;
}

.hero-tip{
  margin-top:11px;
  font-size:12px;
}

.scroll-cue{
  bottom:18px;
  opacity:.55;
}

.section{
  width:min(calc(100% - 28px), var(--max));
  padding:72px 0;
}

.paper-section{
  padding-top:78px;
}

.paper-card{
  padding:30px 22px;
  border-radius:22px;
}

.paper-card p{
  font-size:17px;
  line-height:1.95;
}

.paper-question{
  font-size:18px;
}

.section-title{
  font-size:clamp(30px, 8vw, 42px);
}

.definition-grid,
.gallery-grid,
.testimonial-wrap,
.show-layout,
.cta-actions{
  grid-template-columns:1fr !important;
}

.not-list li{
  font-size:19px;
  padding:16px 14px;
}

.answer-line{
  font-size:21px;
}

.role-strip{
  margin-left:-14px;
  margin-right:-14px;
  padding-left:14px;
  padding-right:14px;
}

.role-card{
  flex-basis:200px;
}

.role-card img{
  height:280px;
}

.gallery-image img{
  height:auto;
  max-height:none;
  object-fit:contain;
}

.source-image img{
  max-height:none;
  object-fit:contain;
}

.info-row{
  grid-template-columns:76px 1fr;
  padding:16px;
}

.show-item{
  align-items:flex-start;
}

.cta-card{
  padding:38px 22px;
}

@media (min-width: 480px){
  #app{
    box-shadow:0 0 0 1px rgba(226,192,113,.12), 0 24px 120px rgba(0,0,0,.55);
  }
}

@media (min-width:760px){
  .section{padding:72px 0;width:min(calc(100% - 28px), var(--max));}
  .paper-card{padding:30px 22px;}
  .role-card{flex-basis:200px;}
  .role-card img{height:280px;}
  .hero-content{width:min(86vw,360px);}
}

/* === 2026-07 portrait layout fix v2 ===
   取消首屏海报双层显示；海报不加圆角；桌面预览放宽为公众号式阅读宽度。 */
:root{
  --max: 680px;
  --mobile-max: 720px;
}

#app{
  width:min(100vw, var(--mobile-max));
  max-width:var(--mobile-max);
}

.topbar{
  width:min(100vw, var(--mobile-max));
}

.hero{
  min-height:100svh;
  padding:clamp(18px, 4vw, 34px) 0 max(44px, env(safe-area-inset-bottom));
  align-items:flex-start;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,161,91,.12), transparent 34%),
    linear-gradient(180deg,#11100d 0%,#16120d 58%,#0d0c0a 100%);
}

.hero-bg{
  display:none !important;
}

.hero-shade{
  background:
    radial-gradient(circle at 50% 5%, rgba(226,192,113,.10), transparent 31%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18) 62%,rgba(0,0,0,.42));
}

.hero-shell{
  width:min(calc(100% - 32px), 680px) !important;
  margin:0 auto;
}

.hero-poster-frame{
  margin:0 auto 24px;
  border-radius:0 !important;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:0 18px 72px rgba(0,0,0,.38);
}

.hero-poster{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:transparent;
  border-radius:0 !important;
}

.hero-content{
  width:min(100%, 620px) !important;
  padding:0 0 12px;
  margin:0 auto;
}

.case-kicker{
  margin-bottom:13px;
}

h1{
  font-size:clamp(46px, 10vw, 82px);
}

.hero-lines{
  font-size:clamp(16px, 3.5vw, 22px);
}

.section{
  width:min(calc(100% - 36px), var(--max));
}

@media (min-width:760px){
  .section{width:min(calc(100% - 56px), var(--max));}
  .hero-shell{width:min(calc(100% - 56px), 680px) !important;}
  .hero-content{width:min(100%,620px) !important;}
}

@media (max-width:430px){
  .hero{padding-top:14px;}
  .hero-shell{width:min(calc(100% - 24px), 680px) !important;}
  .section{width:min(calc(100% - 28px), var(--max));}
  .hero-poster-frame{margin-bottom:20px;}
  h1{font-size:clamp(42px, 14vw, 62px);}
}