*{box-sizing:border-box}
:root{
  --ink:#100f0b;
  --paper:#f7eedb;
  --muted:#d7c7ab;
  --gold:#d7aa58;
  --soft-gold:#f2d89b;
  --jade:#8cc9a6;
  --cyan:#9ddbd2;
  --line:rgba(255,238,199,.18);
  --panel:rgba(22,18,12,.58);
  --panel2:rgba(255,245,220,.075);
  --radius:28px;
}
html{scroll-behavior:smooth;background:var(--ink);color:var(--paper)}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#100f0b;color:var(--paper);line-height:1.72;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.hero-bg{position:fixed;inset:0;z-index:-4;background-image:linear-gradient(90deg,rgba(16,15,11,.76),rgba(16,15,11,.42) 42%,rgba(16,15,11,.18)),linear-gradient(180deg,rgba(16,15,11,.25),rgba(16,15,11,.78) 78%,#100f0b),url("../hero/taiyue-universe-hero-landscape.webp");background-size:cover;background-position:center top;transform:translateZ(0)}
#mistCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-3;opacity:.72;mix-blend-mode:screen}
.paper-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1px);background-size:4px 4px;mix-blend-mode:overlay}
.topbar{position:fixed;z-index:30;top:16px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(16,15,11,.52);backdrop-filter:blur(18px);box-shadow:0 18px 58px rgba(0,0,0,.26)}
.brand img{width:clamp(150px,14vw,218px);height:auto;max-height:42px;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.topbar nav{display:flex;gap:4px}
.topbar nav a{padding:8px 12px;border-radius:999px;color:#e2d4b9;font-size:13px}
.topbar nav a:hover{background:rgba(255,255,255,.08);color:white}
.section{position:relative;padding:clamp(76px,9vw,128px) 0}
.hero{min-height:100svh;display:grid;align-items:center;padding-top:132px}
.hero-inner{max-width:850px;margin-left:max(0px,calc((100vw - 1160px)/2));margin-right:auto}
.hero-logo{width:min(410px,78vw);height:auto;margin:0 0 24px;filter:drop-shadow(0 20px 38px rgba(0,0,0,.42))}
.eyebrow{margin:0 0 16px;color:var(--soft-gold);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
h1{font-size:clamp(34px,5.2vw,70px);line-height:1.06;letter-spacing:-.055em;margin:0;max-width:780px;font-weight:800}
h2{font-size:clamp(28px,4vw,52px);line-height:1.12;letter-spacing:-.045em;margin:0;font-weight:800}
.lead{font-size:clamp(16px,1.65vw,20px);color:#efe0c4;max-width:760px;margin:24px 0 0;text-shadow:0 2px 14px rgba(0,0,0,.36)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font-weight:800;background:rgba(16,15,11,.48);backdrop-filter:blur(12px)}
.btn.primary{background:linear-gradient(135deg,#d7aa58,#ffe7a9);color:#17120b;box-shadow:0 16px 48px rgba(215,170,88,.24)}
.btn.ghost{color:#f7eedb}
.split{display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,6vw,82px);align-items:start}
.copy{font-size:18px;color:#e0d2b8}
.copy p{margin:0 0 18px}
.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.matrix-grid article,.six-grid article,.character-card,.timeline article,.business-box{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,245,220,.105),rgba(22,18,12,.52));box-shadow:0 24px 90px rgba(0,0,0,.34);backdrop-filter:blur(18px)}
.matrix-grid article{position:relative;min-height:224px;padding:25px;border-radius:var(--radius);overflow:hidden}
.matrix-grid article:after{content:"";position:absolute;inset:auto -30% -42% 30%;height:140px;background:radial-gradient(circle,rgba(215,170,88,.18),transparent 68%)}
.matrix-grid span{color:var(--gold);font-weight:900;letter-spacing:.1em}
.matrix-grid h3,.timeline h3{font-size:23px;margin:36px 0 12px}
.matrix-grid p,.timeline p,.business-box p{color:#dacaae;margin:0}
.six-grid{display:grid;grid-template-columns:repeat(6,minmax(160px,1fr));gap:14px;overflow-x:auto;margin-top:34px;padding-bottom:18px}
.six-grid article{min-height:210px;border-radius:24px;padding:22px;background:linear-gradient(180deg,rgba(255,245,220,.09),rgba(22,18,12,.50))}
.six-grid b{font-size:23px}
.six-grid span{display:inline-block;margin:18px 0 10px;color:#17120b;background:linear-gradient(135deg,#d7aa58,#ffe8ab);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:900}
.six-grid p{margin:0;color:#dacaae;font-size:15px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.section-head p{max-width:440px;color:#dacaae;margin:0}
.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.character-card{border-radius:26px;padding:18px;display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:center;min-height:150px}
.character-card .avatar{width:86px;height:86px;border-radius:26px;background:radial-gradient(circle at 50% 25%,rgba(255,232,171,.26),rgba(255,255,255,.05));overflow:hidden;border:1px solid var(--line)}
.character-card img{width:100%;height:100%;object-fit:cover}
.character-card span{color:var(--gold);font-size:12px;font-weight:900}
.character-card h3{font-size:22px;line-height:1.1;margin:4px 0 6px}
.character-card p{margin:0;color:#dacaae;font-size:14px;line-height:1.45}
.character-card b{display:block;margin-top:8px;color:#f5dfaa;font-size:13px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.timeline article{border-radius:26px;padding:25px;min-height:230px}
.timeline span{color:var(--gold);font-weight:900;font-size:13px}
.business-box{border-radius:34px;padding:clamp(30px,5vw,60px)}
.business-box h2{max-width:930px}
.business-box>p{max-width:860px;margin:20px 0 0;font-size:18px}
.business-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.business-grid div{padding:18px;border-radius:20px;background:rgba(255,245,220,.07);border:1px solid var(--line)}
.business-grid span{display:block;color:#dacaae;font-size:13px;margin-bottom:8px}
.business-grid b{font-size:15px}
footer{padding:32px 0 46px;border-top:1px solid var(--line);color:#dacaae;background:rgba(16,15,11,.5)}
footer .wrap{display:flex;justify-content:space-between;gap:20px}
.reveal{opacity:1;transform:none}
@media(max-width:1000px){
  .matrix-grid,.character-grid,.timeline,.business-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .hero-inner{margin-left:auto}
}
@media(max-width:760px){
  .hero-bg{background-image:linear-gradient(180deg,rgba(16,15,11,.36),rgba(16,15,11,.78) 76%,#100f0b),url("../hero/taiyue-universe-hero-portrait.webp");background-position:center top}
  .topbar{top:10px;border-radius:24px}
  .topbar nav{display:none}
  .brand img{width:178px;max-height:38px}
  .hero{min-height:92svh;padding-top:116px;align-items:end;padding-bottom:62px}
  .hero-logo{width:min(310px,82vw);margin-bottom:20px}
  h1{font-size:clamp(32px,10vw,46px);line-height:1.08}
  .lead{font-size:16px}
  .hero-actions .btn{width:100%}
  .matrix-grid,.character-grid,.timeline,.business-grid{grid-template-columns:1fr}
  .six-grid{grid-template-columns:repeat(6,76vw)}
  .character-card{grid-template-columns:78px 1fr}
  .character-card .avatar{width:78px;height:78px;border-radius:22px}
  .section-head{display:block}
  footer .wrap{display:block}
}
@media(max-width:420px){
  .wrap{width:calc(100% - 28px)}
  .section{padding:68px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #mistCanvas{display:none}
}


/* v2.1.0 formal typography: reduce oversized headings */
h1{font-size:clamp(28px,3.35vw,46px)!important;line-height:1.14!important;letter-spacing:-.035em!important;max-width:620px!important}
h2{font-size:clamp(20px,2.05vw,30px)!important;line-height:1.22!important;letter-spacing:-.025em!important;max-width:620px!important}
.section-head h2{font-size:clamp(20px,2vw,28px)!important;max-width:520px!important}
.hero-logo{width:min(330px,70vw)!important;margin-bottom:18px!important}
.lead{font-size:clamp(14px,1.25vw,17px)!important;max-width:660px!important;line-height:1.82!important}
.eyebrow{font-size:10.5px!important;letter-spacing:.18em!important}
.section{padding:clamp(58px,7vw,96px) 0!important}
.hero{padding-top:110px!important}
.topbar{padding:8px 12px!important}
.brand img{width:clamp(135px,12vw,188px)!important;max-height:36px!important}

/* stronger non-particle cloud and mist flow */
#mistCanvas{opacity:.98!important;mix-blend-mode:screen!important}
.hero-bg{filter:saturate(1.04) contrast(.98)!important}
.hero-bg::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 52% 42%,rgba(255,226,156,.20),transparent 18rem),
    radial-gradient(circle at 66% 46%,rgba(139,215,210,.13),transparent 20rem),
    linear-gradient(180deg,rgba(16,15,11,.12),rgba(16,15,11,.72) 86%);
}

/* compact cards */
.matrix-grid h3,.timeline h3{font-size:19px!important;margin:24px 0 10px!important}
.matrix-grid article{min-height:190px!important}
.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.character-card{
  width:100%;appearance:none;text-align:left;color:inherit;cursor:pointer;
  border-radius:24px!important;grid-template-columns:72px 1fr!important;min-height:126px!important;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.character-card:hover{transform:translateY(-3px);border-color:rgba(242,216,157,.42);background:linear-gradient(180deg,rgba(255,245,220,.14),rgba(22,18,12,.58))}
.character-card .avatar{width:72px!important;height:72px!important;border-radius:22px!important}
.character-card h3{font-size:18px!important;margin:2px 0 4px!important}
.character-card p{font-size:13px!important;line-height:1.45!important}
.character-card b{font-size:12px!important;margin-top:5px!important}
.character-card span{font-size:11px!important}
.character-card--hidden .avatar{filter:drop-shadow(0 0 18px rgba(215,170,88,.28))}
.character-card--hidden h3{color:#f2d89b}

/* full-body role modal */
.role-modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:22px;background:rgba(7,6,4,.82);backdrop-filter:blur(18px)}
.role-modal.show{display:grid}
.role-modal__panel{
  width:min(920px,96vw);max-height:90vh;border:1px solid rgba(242,216,157,.24);border-radius:30px;
  background:linear-gradient(135deg,rgba(30,23,15,.92),rgba(15,12,8,.92));box-shadow:0 30px 110px rgba(0,0,0,.55);
  display:grid;grid-template-columns:minmax(260px,.95fr) 1fr;overflow:hidden;
}
.role-modal__image{display:grid;place-items:end center;min-height:520px;background:radial-gradient(circle at 50% 35%,rgba(215,170,88,.20),transparent 18rem),linear-gradient(180deg,rgba(255,245,220,.08),rgba(0,0,0,.10))}
.role-modal__image img{max-height:78vh;width:auto;object-fit:contain;filter:drop-shadow(0 22px 52px rgba(0,0,0,.44))}
.role-modal__copy{padding:clamp(28px,5vw,56px);align-self:center}
.role-modal__copy span{display:block;color:#d7aa58;font-size:12px;font-weight:900;letter-spacing:.16em;margin-bottom:12px}
.role-modal__copy h3{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0 0 14px}
.role-modal__copy p{color:#e0d2b8;margin:0 0 18px;font-size:17px}
.role-modal__copy b{color:#f2d89b}
.role-modal__close{position:fixed;z-index:82;top:18px;right:20px;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.10);color:#fff;font-size:30px;cursor:pointer}
@media(max-width:900px){.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){
  h1{font-size:clamp(27px,8.2vw,36px)!important;max-width:92vw!important}
  h2,.section-head h2{font-size:clamp(20px,6vw,26px)!important}
  .lead{font-size:14.5px!important}
  .hero-logo{width:min(268px,76vw)!important}
  .character-grid{grid-template-columns:1fr!important}
  .role-modal__panel{grid-template-columns:1fr;overflow:auto}
  .role-modal__image{min-height:420px}
  .role-modal__copy{padding:24px}
}


/* v2.1.1 visible fluid layer and business title fix */
body{isolation:isolate}
.hero-bg{z-index:0!important}
#mistCanvas{z-index:1!important;opacity:.88!important;mix-blend-mode:screen!important}
.flow-veil{position:fixed;inset:-18vh -14vw;z-index:2;pointer-events:none;overflow:hidden;opacity:.95;mix-blend-mode:screen}
.topbar,main,footer{position:relative;z-index:5}
.paper-grain{z-index:4!important;opacity:.08!important}
.flow-ribbon{position:absolute;display:block;width:78vw;height:26vh;min-width:760px;min-height:220px;border-radius:999px;filter:blur(30px);opacity:.52;transform-origin:center;will-change:transform,opacity}
.flow-ribbon-a{left:-12vw;top:28vh;background:radial-gradient(closest-side at 28% 50%,rgba(145,216,172,.42),transparent 72%),radial-gradient(closest-side at 58% 52%,rgba(255,224,145,.34),transparent 70%),linear-gradient(90deg,transparent,rgba(137,211,196,.34),rgba(255,229,166,.24),transparent);animation:taiyueFlowA 16s ease-in-out infinite alternate}
.flow-ribbon-b{right:-18vw;top:42vh;height:30vh;background:radial-gradient(closest-side at 36% 42%,rgba(138,220,214,.40),transparent 72%),radial-gradient(closest-side at 68% 52%,rgba(255,239,193,.30),transparent 70%),linear-gradient(90deg,transparent,rgba(128,212,205,.28),rgba(255,237,196,.22),transparent);animation:taiyueFlowB 19s ease-in-out infinite alternate}
.flow-ribbon-c{left:12vw;bottom:9vh;width:90vw;height:24vh;background:radial-gradient(closest-side at 26% 55%,rgba(215,170,88,.30),transparent 72%),radial-gradient(closest-side at 70% 48%,rgba(144,211,170,.26),transparent 74%),linear-gradient(90deg,transparent,rgba(255,218,145,.22),rgba(139,215,210,.22),transparent);animation:taiyueFlowC 22s ease-in-out infinite alternate}
@keyframes taiyueFlowA{from{transform:translate3d(-4vw,0,0) rotate(-8deg) scale(1);opacity:.42}50%{transform:translate3d(10vw,-3vh,0) rotate(3deg) scale(1.08);opacity:.72}to{transform:translate3d(22vw,2vh,0) rotate(9deg) scale(1.02);opacity:.52}}
@keyframes taiyueFlowB{from{transform:translate3d(8vw,1vh,0) rotate(10deg) scale(1.02);opacity:.38}50%{transform:translate3d(-8vw,-4vh,0) rotate(-2deg) scale(1.1);opacity:.66}to{transform:translate3d(-22vw,2vh,0) rotate(-10deg) scale(1);opacity:.50}}
@keyframes taiyueFlowC{from{transform:translate3d(-12vw,2vh,0) rotate(4deg) scale(1);opacity:.34}50%{transform:translate3d(2vw,-5vh,0) rotate(-4deg) scale(1.12);opacity:.62}to{transform:translate3d(16vw,1vh,0) rotate(3deg) scale(1.04);opacity:.44}}
.business-box h2{max-width:980px!important;font-size:clamp(20px,1.86vw,26px)!important;line-height:1.32!important;letter-spacing:-.018em!important;text-wrap:balance;word-break:keep-all}
.business-box>p{max-width:980px!important}
.business-grid{margin-top:28px!important}
@media(max-width:760px){.flow-veil{inset:-12vh -34vw;opacity:.72}.flow-ribbon{min-width:520px;width:105vw;height:20vh;filter:blur(26px)}.flow-ribbon-a{top:24vh}.flow-ribbon-b{top:42vh}.flow-ribbon-c{bottom:12vh}.business-box h2{font-size:clamp(20px,5.2vw,25px)!important;word-break:normal}}
@media(prefers-reduced-motion:reduce){.flow-ribbon{animation:none!important}}


/* v2.1.2: image-based ancient title and wider letter spacing */
.seo-title{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.hero-title-img{
  display:block;
  width:min(590px,86vw);
  height:auto;
  margin:24px 0 0;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.36));
}
.lead{
  letter-spacing:.055em!important;
  word-spacing:.08em!important;
}
.hero .eyebrow{
  letter-spacing:.22em!important;
}
.btn{
  letter-spacing:.045em!important;
}
.topbar nav a{
  letter-spacing:.04em!important;
}

/* v2.1.2: obvious SVG spirit streams, visible even if canvas feels static */
.energy-streams{
  position:fixed;
  inset:0;
  z-index:3;
  width:100vw;
  height:100vh;
  pointer-events:none;
  opacity:.88;
  mix-blend-mode:screen;
}
.stream{
  fill:none;
  stroke-width:7.5;
  stroke-linecap:round;
  stroke-dasharray:180 920;
  filter:url(#streamGlow);
}
.stream-a{
  stroke:url(#streamGold);
  animation:streamDashA 7.5s linear infinite, streamFloatA 11s ease-in-out infinite alternate;
}
.stream-b{
  stroke:url(#streamJade);
  stroke-width:6.5;
  animation:streamDashB 9s linear infinite, streamFloatB 13s ease-in-out infinite alternate;
  opacity:.78;
}
.stream-c{
  stroke:url(#streamGold);
  stroke-width:5.8;
  animation:streamDashC 10.5s linear infinite, streamFloatC 15s ease-in-out infinite alternate;
  opacity:.62;
}
@keyframes streamDashA{
  from{stroke-dashoffset:1100}
  to{stroke-dashoffset:0}
}
@keyframes streamDashB{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-1100}
}
@keyframes streamDashC{
  from{stroke-dashoffset:980}
  to{stroke-dashoffset:-120}
}
@keyframes streamFloatA{
  from{transform:translate3d(-1vw,1vh,0)}
  to{transform:translate3d(1vw,-2vh,0)}
}
@keyframes streamFloatB{
  from{transform:translate3d(1vw,-1vh,0)}
  to{transform:translate3d(-1vw,2vh,0)}
}
@keyframes streamFloatC{
  from{transform:translate3d(-1.5vw,0,0)}
  to{transform:translate3d(1.5vw,-1vh,0)}
}
.topbar,main,footer{
  z-index:8!important;
}
.flow-veil{
  z-index:2!important;
}
#mistCanvas{
  z-index:1!important;
}
.paper-grain{
  z-index:7!important;
  pointer-events:none;
}

@media(max-width:760px){
  .hero-title-img{
    width:min(360px,90vw);
    margin-top:18px;
  }
  .energy-streams{
    opacity:.70;
  }
  .stream{
    stroke-width:5.8;
  }
}
@media(prefers-reduced-motion:reduce){
  .stream{
    animation:none!important;
  }
}


/* v2.1.3: six-rhythm fairy light streams
   六韵色：林青、文金、藏紫、音蓝、石白、金曜。
   Each stream is mist + halo + core + spark, staggered instead of solid always-on lines. */
.energy-streams--six{
  position:fixed;
  inset:0;
  z-index:3;
  width:100vw;
  height:100vh;
  pointer-events:none;
  opacity:.96;
  mix-blend-mode:screen;
}
.rhythm-stream{
  opacity:0;
  transform-origin:center;
  animation:
    rhythmAppear var(--dur) ease-in-out infinite,
    rhythmDrift calc(var(--dur) * 1.35) ease-in-out infinite alternate;
  animation-delay:var(--delay);
  will-change:opacity,transform,filter;
}
.stream-mist,
.stream-halo,
.stream-core,
.stream-spark{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.stream-mist{
  stroke-width:28;
  stroke-dasharray:260 1180;
  stroke-dashoffset:1300;
  opacity:.34;
  filter:url(#sixStreamMist);
  animation:rhythmDash calc(var(--dur) * .92) linear infinite;
  animation-delay:var(--delay);
}
.stream-halo{
  stroke-width:12;
  stroke-dasharray:210 960;
  stroke-dashoffset:1080;
  opacity:.56;
  filter:url(#sixStreamGlow);
  animation:rhythmDash calc(var(--dur) * .86) linear infinite;
  animation-delay:var(--delay);
}
.stream-core{
  stroke-width:3.2;
  stroke-dasharray:92 118 38 420;
  stroke-dashoffset:780;
  opacity:.92;
  filter:url(#sixStreamGlow);
  animation:rhythmDash calc(var(--dur) * .72) linear infinite;
  animation-delay:var(--delay);
}
.stream-spark{
  stroke-width:1.4;
  stroke-dasharray:8 70 4 120;
  stroke-dashoffset:620;
  opacity:.95;
  filter:url(#sixStreamGlow);
  animation:rhythmDash calc(var(--dur) * .56) linear infinite, sparkPulse 2.8s ease-in-out infinite;
  animation-delay:var(--delay);
}
@keyframes rhythmDash{
  from{stroke-dashoffset:1250}
  to{stroke-dashoffset:-260}
}
@keyframes rhythmAppear{
  0%,8%{opacity:0;filter:saturate(.8) brightness(.85)}
  14%,42%{opacity:.90;filter:saturate(1.08) brightness(1.08)}
  56%{opacity:.48}
  70%,100%{opacity:0}
}
@keyframes rhythmDrift{
  from{transform:translate3d(-1.1vw,.8vh,0) rotate(-.8deg) scale(1)}
  50%{transform:translate3d(.8vw,-1.2vh,0) rotate(.6deg) scale(1.012)}
  to{transform:translate3d(1.3vw,.4vh,0) rotate(1deg) scale(1.02)}
}
@keyframes sparkPulse{
  0%,100%{opacity:.38}
  35%{opacity:1}
  70%{opacity:.56}
}
.stream{
  opacity:0!important;
}
@media(max-width:760px){
  .energy-streams--six{opacity:.76}
  .stream-mist{stroke-width:20}
  .stream-halo{stroke-width:8.5}
  .stream-core{stroke-width:2.6}
}
@media(prefers-reduced-motion:reduce){
  .rhythm-stream,
  .stream-mist,
  .stream-halo,
  .stream-core,
  .stream-spark{
    animation:none!important;
    opacity:.28;
  }
}


/* v2.1.4: formal display domain and six-rhythm spacing */
.six-grid b{
  display:inline-block!important;
  margin-right:12px!important;
}
.six-grid span{
  margin-left:0!important;
  vertical-align:middle;
}
.six-grid article{
  padding-top:24px!important;
}

/* v2.1.4: character full-body modal with spirit-flow border and story elements */
.role-modal__panel{
  position:relative;
  overflow:hidden!important;
  border:0!important;
  background:
    linear-gradient(135deg,rgba(29,22,14,.94),rgba(12,9,6,.94)) padding-box,
    linear-gradient(125deg,rgba(139,222,205,.58),rgba(255,220,138,.72),rgba(190,150,255,.44),rgba(255,255,255,.22)) border-box!important;
  border:1px solid transparent!important;
}
.role-modal__panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:30px;
  padding:1px;
  background:conic-gradient(from 120deg,
    rgba(153,231,176,.08),
    rgba(255,226,155,.52),
    rgba(198,164,255,.26),
    rgba(139,222,255,.34),
    rgba(239,248,235,.30),
    rgba(255,216,105,.50),
    rgba(153,231,176,.08));
  filter:blur(10px);
  opacity:.62;
  animation:roleBorderFlow 9s linear infinite;
  pointer-events:none;
}
@keyframes roleBorderFlow{
  from{transform:rotate(0deg) scale(1.02)}
  to{transform:rotate(360deg) scale(1.02)}
}
.role-modal__image{
  position:relative;
  overflow:hidden;
  border-right:1px solid rgba(242,216,157,.14);
}
.role-modal__image::before{
  content:"";
  position:absolute;
  inset:7% 5%;
  border-radius:42px;
  border:1px solid rgba(255,226,155,.20);
  background:
    radial-gradient(circle at 50% 45%,rgba(255,230,170,.18),transparent 24%),
    radial-gradient(circle at 38% 28%,rgba(139,222,205,.16),transparent 22%),
    radial-gradient(circle at 70% 70%,rgba(198,164,255,.12),transparent 24%);
  filter:blur(.2px);
  animation:roleAuraBreath 5.8s ease-in-out infinite alternate;
}
.role-modal__image::after{
  content:"";
  position:absolute;
  inset:12% 9%;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,226,155,.24) 0 8deg,
      transparent 8deg 20deg);
  opacity:.20;
  mask:radial-gradient(circle,transparent 42%,#000 43%,transparent 65%);
  animation:roleRuneRotate 18s linear infinite;
}
@keyframes roleAuraBreath{
  from{opacity:.58;transform:scale(.985)}
  to{opacity:.92;transform:scale(1.015)}
}
@keyframes roleRuneRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.role-modal__rune{
  position:absolute;
  z-index:1;
  width:180px;
  height:180px;
  border-radius:50%;
  pointer-events:none;
  opacity:.36;
  background:
    radial-gradient(circle,rgba(255,226,155,.35),transparent 58%),
    conic-gradient(transparent,rgba(139,222,205,.28),transparent,rgba(255,226,155,.22),transparent);
  filter:blur(10px);
}
.role-modal__rune-a{
  left:7%;
  top:9%;
  animation:roleRuneFloatA 7s ease-in-out infinite alternate;
}
.role-modal__rune-b{
  right:8%;
  bottom:12%;
  animation:roleRuneFloatB 8s ease-in-out infinite alternate;
}
@keyframes roleRuneFloatA{
  from{transform:translate3d(-8px,10px,0) scale(.94)}
  to{transform:translate3d(12px,-8px,0) scale(1.08)}
}
@keyframes roleRuneFloatB{
  from{transform:translate3d(8px,-6px,0) scale(.9)}
  to{transform:translate3d(-10px,9px,0) scale(1.05)}
}
.role-modal__image img{
  position:relative;
  z-index:2;
}
.role-modal__copy{
  position:relative;
  z-index:2;
}
.role-modal__summary{
  margin:0 0 14px!important;
}
.role-modal__key{
  display:inline-block;
  margin-bottom:20px;
}
.role-modal__bio{
  padding:18px 0 18px;
  border-top:1px solid rgba(242,216,157,.14);
  border-bottom:1px solid rgba(242,216,157,.14);
}
.role-modal__bio h4,
.role-modal__miniapp h4{
  margin:0 0 8px;
  color:#f2d89b;
  font-size:14px;
  letter-spacing:.08em;
}
.role-modal__bio p{
  margin:0!important;
  color:#e3d4ba;
  font-size:15px;
  line-height:1.82;
}
.role-modal__miniapp{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:16px;
  align-items:center;
  margin-top:20px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,245,220,.07);
  border:1px solid rgba(242,216,157,.15);
}
.role-modal__miniapp img{
  width:112px;
  height:112px;
  border-radius:14px;
  background:#f6e8c4;
  padding:6px;
}
.role-modal__miniapp p{
  margin:0!important;
  color:#cdbd9e;
  font-size:13px;
  line-height:1.62;
}
footer .wrap span{
  letter-spacing:.035em;
}

@media(max-width:760px){
  .six-grid b{
    margin-right:10px!important;
  }
  .role-modal__miniapp{
    grid-template-columns:92px 1fr;
  }
  .role-modal__miniapp img{
    width:92px;
    height:92px;
  }
}


/* v2.1.5: add inner frame around the full-body character artwork */
.role-modal__image{
  padding:14px!important;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,231,173,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,240,204,.04), rgba(0,0,0,0));
}
.role-modal__image-frame{
  position:relative;
  z-index:2;
  height:100%;
  min-height:520px;
  border-radius:28px;
  overflow:hidden;
  padding:12px;
  background:
    linear-gradient(135deg, rgba(255,226,155,.40), rgba(116,206,189,.24), rgba(198,164,255,.18), rgba(255,226,155,.30));
  box-shadow:
    inset 0 0 0 1px rgba(255,239,204,.18),
    0 18px 42px rgba(0,0,0,.18);
}
.role-modal__image-frame::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:28px;
  padding:1px;
  background:linear-gradient(180deg,
    rgba(255,241,218,.78),
    rgba(210,173,96,.42),
    rgba(255,241,218,.16));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.85;
}
.role-modal__image-frame::after{
  content:"";
  position:absolute;
  inset:11px;
  border-radius:22px;
  pointer-events:none;
  border:1px solid rgba(242,216,157,.30);
  box-shadow:
    inset 0 0 28px rgba(255,231,173,.08),
    inset 0 0 0 1px rgba(255,250,236,.08);
}
.role-modal__image-paper{
  position:absolute;
  inset:12px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,249,239,.76), rgba(238,229,209,.64)),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.78), transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(130,90,40,.08),
    inset 0 0 46px rgba(255,246,224,.34);
}
.role-modal__image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  object-position:center top;
  position:relative;
  z-index:2;
  display:block;
  border-radius:18px;
  box-shadow:
    0 16px 30px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,245,225,.18);
}
.role-modal__image::before{
  inset:5% 4%!important;
}
.role-modal__image::after{
  inset:9% 7%!important;
  opacity:.16!important;
}
.role-modal__rune{
  z-index:1!important;
}
@media(max-width:760px){
  .role-modal__image{
    padding:10px!important;
  }
  .role-modal__image-frame{
    min-height:420px;
    padding:9px;
    border-radius:22px;
  }
  .role-modal__image-frame::after{
    inset:8px;
    border-radius:16px;
  }
  .role-modal__image-paper{
    inset:9px;
    border-radius:15px;
  }
  .role-modal__image img{
    border-radius:13px;
  }
}


/* v2.1.6: background clarity and mobile safe crop fix
   Goal: keep current visual direction, but reduce over-dark / over-blurred bottom area,
   and prevent mobile top-left visual clipping. */
.hero-bg{
  background-position:center 38%!important;
  filter:saturate(1.06) contrast(1.02) brightness(1.04)!important;
}
.hero-bg::after{
  background:
    radial-gradient(circle at 52% 42%,rgba(255,226,156,.14),transparent 18rem),
    radial-gradient(circle at 66% 48%,rgba(139,215,210,.08),transparent 22rem),
    linear-gradient(180deg,
      rgba(16,15,11,.03) 0%,
      rgba(16,15,11,.12) 48%,
      rgba(16,15,11,.36) 100%)!important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(16,15,11,.64) 0%,
      rgba(16,15,11,.42) 32%,
      rgba(16,15,11,.14) 72%,
      rgba(16,15,11,.22) 100%),
    linear-gradient(180deg,
      rgba(16,15,11,.22) 0%,
      rgba(16,15,11,.08) 54%,
      rgba(16,15,11,.24) 100%);
}
.flow-veil{
  opacity:.76!important;
}
.flow-ribbon{
  filter:blur(24px)!important;
}
.energy-streams--six{
  opacity:.88!important;
}

/* The page used to feel like the lower part was smeared into black mist.
   This keeps text readable but gives the scenery back more detail. */
.hero .wrap,
.hero-inner{
  position:relative;
  z-index:9;
}
.hero{
  overflow:hidden;
}

@media(max-width:760px){
  .hero-bg{
    background-size:cover!important;
    background-position:54% 22%!important;
    filter:saturate(1.08) contrast(1.04) brightness(1.08)!important;
  }
  .hero-bg::after{
    background:
      radial-gradient(circle at 56% 38%,rgba(255,226,156,.16),transparent 14rem),
      radial-gradient(circle at 70% 48%,rgba(139,215,210,.08),transparent 15rem),
      linear-gradient(180deg,
        rgba(16,15,11,.02) 0%,
        rgba(16,15,11,.08) 42%,
        rgba(16,15,11,.26) 100%)!important;
  }
  .hero::before{
    background:
      linear-gradient(90deg,
        rgba(16,15,11,.54) 0%,
        rgba(16,15,11,.32) 45%,
        rgba(16,15,11,.14) 100%),
      linear-gradient(180deg,
        rgba(16,15,11,.10) 0%,
        rgba(16,15,11,.06) 54%,
        rgba(16,15,11,.18) 100%);
  }
  .hero{
    min-height:92svh!important;
    padding-top:104px!important;
    padding-bottom:48px!important;
  }
  .topbar{
    left:50%!important;
    right:auto!important;
    width:calc(100% - 20px)!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    top:10px!important;
    overflow:hidden;
  }
  .brand img{
    transform:translateX(0)!important;
  }
  .flow-veil{
    opacity:.48!important;
    inset:-10vh -28vw!important;
  }
  .flow-ribbon{
    filter:blur(20px)!important;
  }
  .energy-streams--six{
    opacity:.62!important;
  }
  .paper-grain{
    opacity:.055!important;
  }
}

@media(max-width:420px){
  .hero-bg{
    background-position:56% 20%!important;
  }
  .topbar{
    width:calc(100% - 16px)!important;
  }
}


/* v2.1.7: scroll painting frame for full-body character artwork */
.role-modal__image-frame--scroll{
  --scroll-gold: rgba(230,188,104,.92);
  --scroll-dark: rgba(86,56,25,.88);
  --scroll-wood: rgba(122,78,36,.92);
  padding:44px 22px 48px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,240,192,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,226,155,.42), rgba(116,206,189,.22), rgba(198,164,255,.16), rgba(255,226,155,.32))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,239,204,.18),
    inset 0 0 44px rgba(255,226,155,.08),
    0 20px 48px rgba(0,0,0,.22)!important;
}
.role-modal__image-frame--scroll::before{
  content:"";
  position:absolute;
  inset:28px 16px 30px;
  border-radius:24px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,247,225,.72) 0 2px,
      transparent 2px calc(100% - 2px),
      rgba(255,247,225,.50) calc(100% - 2px) 100%),
    linear-gradient(180deg,
      rgba(255,247,225,.42) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(255,247,225,.30) calc(100% - 1px) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(151,103,45,.22),
    inset 0 0 36px rgba(255,238,194,.10);
  opacity:.88;
  z-index:3;
}
.role-modal__image-frame--scroll::after{
  content:"";
  position:absolute;
  inset:40px 22px 44px;
  border-radius:19px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle at 78% 84%, rgba(255,226,155,.10), transparent 24%);
  border:1px solid rgba(242,216,157,.25);
  box-shadow:
    inset 0 0 22px rgba(255,250,236,.10),
    inset 0 0 0 1px rgba(90,58,26,.10);
  opacity:.9;
  z-index:4;
}
.role-modal__image-frame--scroll .role-modal__image-paper{
  inset:42px 24px 46px!important;
  border-radius:18px!important;
  background:
    linear-gradient(90deg,
      rgba(236,216,176,.60) 0 10px,
      rgba(255,250,238,.78) 10px calc(100% - 10px),
      rgba(229,207,164,.62) calc(100% - 10px) 100%),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.70), transparent 42%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(106,70,31,.10),
    inset 0 0 54px rgba(255,246,224,.22)!important;
  z-index:1;
}
.role-modal__image-frame--scroll img{
  position:relative;
  z-index:2!important;
  border-radius:14px!important;
  box-shadow:
    0 18px 32px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,245,225,.20),
    inset 0 0 0 1px rgba(255,255,255,.12)!important;
}

/* Scroll rods */
.scroll-rod{
  position:absolute;
  left:7%;
  right:7%;
  height:22px;
  z-index:6;
  pointer-events:none;
  border-radius:999px;
  background:
    linear-gradient(180deg,
      rgba(255,238,176,.92),
      rgba(156,96,42,.95) 42%,
      rgba(75,46,22,.98) 52%,
      rgba(230,180,86,.88));
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -3px 6px rgba(0,0,0,.28),
    0 8px 20px rgba(0,0,0,.20);
}
.scroll-rod::before,
.scroll-rod::after{
  content:"";
  position:absolute;
  top:50%;
  width:38px;
  height:38px;
  border-radius:50%;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,239,177,.96), rgba(166,103,45,.94) 48%, rgba(74,45,22,.98) 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.22),
    inset 0 -4px 6px rgba(0,0,0,.30),
    0 4px 12px rgba(0,0,0,.25);
}
.scroll-rod::before{left:-20px}
.scroll-rod::after{right:-20px}
.scroll-rod--top{top:15px}
.scroll-rod--bottom{bottom:17px}

/* Hanging cords and tassels */
.scroll-cord{
  position:absolute;
  top:27px;
  bottom:31px;
  width:1px;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      transparent,
      rgba(255,226,155,.38) 10%,
      rgba(255,226,155,.18) 50%,
      rgba(255,226,155,.34) 90%,
      transparent);
  box-shadow:0 0 7px rgba(255,226,155,.24);
}
.scroll-cord--left{left:26px}
.scroll-cord--right{right:26px}
.scroll-tassel{
  position:absolute;
  bottom:23px;
  width:28px;
  height:50px;
  z-index:7;
  pointer-events:none;
  border-radius:14px 14px 20px 20px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,226,155,.58) 0 2px,
      rgba(117,75,35,.38) 2px 4px),
    linear-gradient(180deg, rgba(255,239,182,.84), rgba(107,66,31,.60));
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.20));
  opacity:.82;
}
.scroll-tassel::before{
  content:"";
  position:absolute;
  left:50%;
  top:-10px;
  width:14px;
  height:14px;
  border-radius:50%;
  transform:translateX(-50%);
  background:rgba(230,188,104,.92);
  box-shadow:0 0 10px rgba(255,226,155,.28);
}
.scroll-tassel--left{left:12px}
.scroll-tassel--right{right:12px}

/* Four subtle ornamental corners */
.scroll-corner{
  position:absolute;
  width:34px;
  height:34px;
  z-index:7;
  pointer-events:none;
  opacity:.72;
}
.scroll-corner::before,
.scroll-corner::after{
  content:"";
  position:absolute;
  background:rgba(255,226,155,.52);
  box-shadow:0 0 10px rgba(255,226,155,.18);
}
.scroll-corner::before{width:28px;height:1px}
.scroll-corner::after{width:1px;height:28px}
.scroll-corner--tl{left:24px;top:34px}
.scroll-corner--tr{right:24px;top:34px;transform:scaleX(-1)}
.scroll-corner--bl{left:24px;bottom:38px;transform:scaleY(-1)}
.scroll-corner--br{right:24px;bottom:38px;transform:scale(-1,-1)}

@media(max-width:760px){
  .role-modal__image-frame--scroll{
    min-height:420px!important;
    padding:34px 14px 38px!important;
    border-radius:24px!important;
  }
  .role-modal__image-frame--scroll .role-modal__image-paper{
    inset:34px 15px 38px!important;
    border-radius:14px!important;
  }
  .role-modal__image-frame--scroll::before{
    inset:23px 10px 25px;
    border-radius:19px;
  }
  .role-modal__image-frame--scroll::after{
    inset:33px 15px 38px;
    border-radius:14px;
  }
  .scroll-rod{
    left:11%;
    right:11%;
    height:17px;
  }
  .scroll-rod::before,
  .scroll-rod::after{
    width:28px;
    height:28px;
  }
  .scroll-rod::before{left:-15px}
  .scroll-rod::after{right:-15px}
  .scroll-rod--top{top:10px}
  .scroll-rod--bottom{bottom:12px}
  .scroll-cord--left{left:17px}
  .scroll-cord--right{right:17px}
  .scroll-tassel{
    width:20px;
    height:36px;
    bottom:16px;
  }
  .scroll-tassel--left{left:8px}
  .scroll-tassel--right{right:8px}
  .scroll-corner{
    width:26px;
    height:26px;
  }
  .scroll-corner--tl{left:16px;top:27px}
  .scroll-corner--tr{right:16px;top:27px}
  .scroll-corner--bl{left:16px;bottom:31px}
  .scroll-corner--br{right:16px;bottom:31px}
}


/* v2.1.8: limit light/mist animations to hero only
   Previous version used fixed global layers; after scrolling, the streams crossed lower sections.
   Now all animated atmosphere layers are anchored to the first screen. */
body{
  position:relative;
}
#mistCanvas,
.flow-veil,
.energy-streams,
.energy-streams--six{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100svh!important;
  max-height:980px!important;
  pointer-events:none!important;
}
#mistCanvas{
  z-index:1!important;
}
.flow-veil{
  z-index:2!important;
  inset:auto!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:100svh!important;
  max-height:980px!important;
  overflow:hidden!important;
}
.energy-streams,
.energy-streams--six{
  z-index:3!important;
}
.world,
.matrix,
.six,
.roles,
.journey,
.business,
footer{
  isolation:isolate;
}
.world::before,
.matrix::before,
.six::before,
.roles::before,
.journey::before,
.business::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(16,15,11,.62),rgba(16,15,11,.72));
}
.world .wrap,
.matrix .wrap,
.six .wrap,
.roles .wrap,
.journey .wrap,
.business .wrap{
  position:relative;
  z-index:2;
}

/* v2.1.8: replace scroll frame with restrained four-corner ornament frame */
.role-modal__image-frame--scroll .scroll-rod,
.role-modal__image-frame--scroll .scroll-cord,
.role-modal__image-frame--scroll .scroll-tassel{
  display:none!important;
}
.role-modal__image-frame--corner{
  position:relative;
  z-index:2;
  height:100%;
  min-height:520px;
  border-radius:30px!important;
  overflow:hidden;
  padding:16px!important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,239,196,.18), transparent 34%),
    linear-gradient(135deg,
      rgba(255,226,155,.36),
      rgba(132,214,190,.22),
      rgba(198,164,255,.15),
      rgba(255,226,155,.28))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,239,204,.18),
    inset 0 0 40px rgba(255,226,155,.08),
    0 20px 48px rgba(0,0,0,.20)!important;
}
.role-modal__image-frame--corner::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  pointer-events:none;
  z-index:4;
  background:
    linear-gradient(90deg,
      rgba(255,247,225,.68) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(255,247,225,.46) calc(100% - 1px) 100%),
    linear-gradient(180deg,
      rgba(255,247,225,.44) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(255,247,225,.30) calc(100% - 1px) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(151,103,45,.20),
    inset 0 0 34px rgba(255,238,194,.08);
  opacity:.88;
}
.role-modal__image-frame--corner::after{
  content:"";
  position:absolute;
  inset:17px;
  border-radius:19px;
  pointer-events:none;
  z-index:4;
  border:1px solid rgba(242,216,157,.24);
  box-shadow:
    inset 0 0 22px rgba(255,250,236,.09),
    inset 0 0 0 1px rgba(90,58,26,.10);
}
.role-modal__image-frame--corner .role-modal__image-paper{
  inset:16px!important;
  border-radius:18px!important;
  background:
    linear-gradient(180deg, rgba(255,250,239,.78), rgba(238,229,209,.62)),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.72), transparent 42%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(106,70,31,.09),
    inset 0 0 50px rgba(255,246,224,.23)!important;
}
.role-modal__image-frame--corner img{
  position:relative;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  object-position:center top;
  display:block;
  border-radius:16px!important;
  box-shadow:
    0 16px 30px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,245,225,.18)!important;
}
.corner-ornament{
  position:absolute;
  z-index:8;
  width:54px;
  height:54px;
  pointer-events:none;
  opacity:.86;
  filter:drop-shadow(0 0 8px rgba(255,226,155,.18));
}
.corner-ornament::before,
.corner-ornament::after{
  content:"";
  position:absolute;
  border-color:rgba(255,226,155,.72);
  border-style:solid;
}
.corner-ornament::before{
  inset:0;
  border-width:2px 0 0 2px;
  border-radius:12px 0 0 0;
}
.corner-ornament::after{
  left:10px;
  top:10px;
  width:28px;
  height:28px;
  border-width:1px 0 0 1px;
  border-radius:9px 0 0 0;
  box-shadow:
    -6px -6px 0 -5px rgba(255,226,155,.62),
    7px 7px 0 -6px rgba(139,222,205,.50);
}
.corner-ornament--tl{left:22px;top:22px}
.corner-ornament--tr{right:22px;top:22px;transform:scaleX(-1)}
.corner-ornament--bl{left:22px;bottom:22px;transform:scaleY(-1)}
.corner-ornament--br{right:22px;bottom:22px;transform:scale(-1,-1)}

@media(max-width:760px){
  #mistCanvas,
  .flow-veil,
  .energy-streams,
  .energy-streams--six{
    height:92svh!important;
    max-height:760px!important;
  }
  .role-modal__image-frame--corner{
    min-height:420px;
    padding:11px!important;
    border-radius:23px!important;
  }
  .role-modal__image-frame--corner::before{
    inset:8px;
    border-radius:18px;
  }
  .role-modal__image-frame--corner::after{
    inset:13px;
    border-radius:14px;
  }
  .role-modal__image-frame--corner .role-modal__image-paper{
    inset:11px!important;
    border-radius:14px!important;
  }
  .role-modal__image-frame--corner img{
    border-radius:12px!important;
  }
  .corner-ornament{
    width:38px;
    height:38px;
  }
  .corner-ornament--tl{left:15px;top:15px}
  .corner-ornament--tr{right:15px;top:15px}
  .corner-ornament--bl{left:15px;bottom:15px}
  .corner-ornament--br{right:15px;bottom:15px}
}


/* v2.1.9: remove segmented section masks and restore smooth continuous page background
   v2.1.8 added per-section dark ::before overlays. They fixed stream bleed but created visible block cuts.
   This version disables those block overlays and uses one continuous lighter atmosphere instead. */

/* 1) Disable v2.1.8 per-section panels that caused horizontal segmentation */
.world::before,
.matrix::before,
.six::before,
.roles::before,
.journey::before,
.business::before{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* 2) Keep sections clear and continuous */
.world,
.matrix,
.six,
.roles,
.journey,
.business{
  position:relative;
  background:transparent!important;
  isolation:auto!important;
}
.world .wrap,
.matrix .wrap,
.six .wrap,
.roles .wrap,
.journey .wrap,
.business .wrap{
  position:relative;
  z-index:2;
}

/* 3) Rebuild lower-page atmosphere as a single soft continuous layer rather than per-section blocks */
main{
  position:relative;
  z-index:2;
  background:
    linear-gradient(180deg,
      rgba(16,15,11,.00) 0,
      rgba(16,15,11,.12) 560px,
      rgba(16,15,11,.32) 980px,
      rgba(16,15,11,.46) 1600px,
      rgba(16,15,11,.54) 100%)!important;
}
main::before{
  content:"";
  position:absolute;
  inset:88svh 0 0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 8%,rgba(139,222,205,.10),transparent 28rem),
    radial-gradient(circle at 82% 18%,rgba(255,226,155,.08),transparent 30rem),
    linear-gradient(180deg,rgba(16,15,11,.08),rgba(16,15,11,.22) 46%,rgba(16,15,11,.34));
}
main > *{
  position:relative;
  z-index:1;
}

/* 4) Make background image clearer globally; avoid over-black lower image */
.hero-bg{
  filter:saturate(1.08) contrast(1.03) brightness(1.08)!important;
}
.hero-bg::after{
  background:
    radial-gradient(circle at 52% 42%,rgba(255,226,156,.10),transparent 18rem),
    radial-gradient(circle at 66% 48%,rgba(139,215,210,.06),transparent 22rem),
    linear-gradient(180deg,
      rgba(16,15,11,.02) 0%,
      rgba(16,15,11,.07) 42%,
      rgba(16,15,11,.22) 100%)!important;
}
.hero::before{
  background:
    linear-gradient(90deg,
      rgba(16,15,11,.52) 0%,
      rgba(16,15,11,.34) 34%,
      rgba(16,15,11,.10) 72%,
      rgba(16,15,11,.16) 100%),
    linear-gradient(180deg,
      rgba(16,15,11,.14) 0%,
      rgba(16,15,11,.05) 54%,
      rgba(16,15,11,.12) 100%)!important;
}

/* 5) Keep hero-only streams, but reduce their footprint at the exact handoff area */
#mistCanvas,
.flow-veil,
.energy-streams,
.energy-streams--six{
  height:88svh!important;
  max-height:900px!important;
  overflow:hidden!important;
}
.flow-veil{
  opacity:.54!important;
}
.energy-streams--six{
  opacity:.72!important;
}
.paper-grain{
  opacity:.052!important;
}

/* 6) Make the first content section blend into the hero rather than starting as a block */
.world{
  margin-top:0!important;
  padding-top:clamp(46px,6vw,78px)!important;
}
.world::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-90px;
  height:140px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(16,15,11,0),
    rgba(16,15,11,.16) 60%,
    rgba(16,15,11,0));
}

/* 7) Cards keep readability without needing heavy full-width masks */
.matrix-grid article,
.six-grid article,
.character-card,
.business-card,
.timeline article{
  background:linear-gradient(180deg,rgba(255,245,220,.095),rgba(22,18,12,.48))!important;
  backdrop-filter:blur(8px);
}

@media(max-width:760px){
  main{
    background:
      linear-gradient(180deg,
        rgba(16,15,11,.00) 0,
        rgba(16,15,11,.10) 480px,
        rgba(16,15,11,.26) 840px,
        rgba(16,15,11,.42) 100%)!important;
  }
  main::before{
    inset:82svh 0 0;
    background:
      radial-gradient(circle at 30% 4%,rgba(139,222,205,.08),transparent 18rem),
      linear-gradient(180deg,rgba(16,15,11,.04),rgba(16,15,11,.22) 56%,rgba(16,15,11,.32));
  }
  .hero-bg{
    filter:saturate(1.10) contrast(1.04) brightness(1.10)!important;
  }
  .hero-bg::after{
    background:
      radial-gradient(circle at 56% 38%,rgba(255,226,156,.12),transparent 14rem),
      radial-gradient(circle at 70% 48%,rgba(139,215,210,.05),transparent 15rem),
      linear-gradient(180deg,
        rgba(16,15,11,.01) 0%,
        rgba(16,15,11,.05) 44%,
        rgba(16,15,11,.17) 100%)!important;
  }
  .hero::before{
    background:
      linear-gradient(90deg,
        rgba(16,15,11,.44) 0%,
        rgba(16,15,11,.26) 45%,
        rgba(16,15,11,.10) 100%),
      linear-gradient(180deg,
        rgba(16,15,11,.08) 0%,
        rgba(16,15,11,.04) 54%,
        rgba(16,15,11,.12) 100%)!important;
  }
  #mistCanvas,
  .flow-veil,
  .energy-streams,
  .energy-streams--six{
    height:82svh!important;
    max-height:720px!important;
  }
  .energy-streams--six{
    opacity:.50!important;
  }
  .flow-veil{
    opacity:.34!important;
  }
  .world{
    padding-top:46px!important;
  }
}


/* v2.1.10: remove transition seam, restore global fluid motion, lighten veil
   User wants global fluid animation again, but without segmented section masks or a horizontal seam. */

/* 1) Eliminate any horizontal seam introduced by previous hero/world transition helpers */
.world::after,
main::before{
  content:none!important;
  display:none!important;
  background:none!important;
}
.world,
.matrix,
.six,
.roles,
.journey,
.business{
  background:transparent!important;
  box-shadow:none!important;
  border-top:0!important;
}
.world{
  margin-top:0!important;
  padding-top:clamp(44px,5.6vw,72px)!important;
}

/* 2) Use one continuous light veil instead of dark block overlays */
main{
  position:relative;
  z-index:2;
  background:
    linear-gradient(180deg,
      rgba(16,15,11,0) 0%,
      rgba(16,15,11,.06) 18%,
      rgba(16,15,11,.16) 42%,
      rgba(16,15,11,.24) 72%,
      rgba(16,15,11,.30) 100%)!important;
}
main > *{
  position:relative;
  z-index:2;
}

/* 3) Make the original background clearer by reducing dark front masks */
.hero-bg{
  filter:saturate(1.10) contrast(1.04) brightness(1.12)!important;
}
.hero-bg::after{
  background:
    radial-gradient(circle at 52% 42%,rgba(255,226,156,.07),transparent 18rem),
    radial-gradient(circle at 66% 48%,rgba(139,215,210,.045),transparent 22rem),
    linear-gradient(180deg,
      rgba(16,15,11,.00) 0%,
      rgba(16,15,11,.035) 46%,
      rgba(16,15,11,.12) 100%)!important;
}
.hero::before{
  background:
    linear-gradient(90deg,
      rgba(16,15,11,.42) 0%,
      rgba(16,15,11,.25) 34%,
      rgba(16,15,11,.07) 72%,
      rgba(16,15,11,.10) 100%),
    linear-gradient(180deg,
      rgba(16,15,11,.08) 0%,
      rgba(16,15,11,.025) 56%,
      rgba(16,15,11,.08) 100%)!important;
}

/* 4) Restore global fluid animation, but keep it soft enough not to cut sections */
#mistCanvas,
.flow-veil,
.energy-streams,
.energy-streams--six{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  max-height:none!important;
  pointer-events:none!important;
}
#mistCanvas{
  z-index:1!important;
  opacity:.36!important;
  mix-blend-mode:screen!important;
}
.flow-veil{
  z-index:2!important;
  opacity:.30!important;
  overflow:hidden!important;
  mix-blend-mode:screen!important;
}
.flow-ribbon{
  filter:blur(26px)!important;
  opacity:.36!important;
}
.energy-streams,
.energy-streams--six{
  z-index:3!important;
  opacity:.46!important;
  mix-blend-mode:screen!important;
}

/* 5) Ensure content remains above global atmosphere */
.topbar,
main,
footer{
  position:relative;
  z-index:8!important;
}
.paper-grain{
  z-index:7!important;
  opacity:.042!important;
}

/* 6) Reduce card darkness, keep readability locally rather than darkening whole page */
.matrix-grid article,
.six-grid article,
.character-card,
.business-card,
.timeline article{
  background:linear-gradient(180deg,rgba(255,245,220,.085),rgba(22,18,12,.36))!important;
  backdrop-filter:blur(7px)!important;
}
.section-head p,
.world p,
.matrix p,
.six p,
.roles p,
.journey p,
.business p{
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* 7) Remove any inherited explicit separator-like top shadows */
.section{
  border-top:0!important;
}
.section + .section{
  border-top:0!important;
}
.world,
.matrix{
  box-shadow:none!important;
}

@media(max-width:760px){
  main{
    background:
      linear-gradient(180deg,
        rgba(16,15,11,0) 0%,
        rgba(16,15,11,.045) 20%,
        rgba(16,15,11,.13) 48%,
        rgba(16,15,11,.24) 100%)!important;
  }
  .hero-bg{
    filter:saturate(1.12) contrast(1.05) brightness(1.14)!important;
  }
  .hero-bg::after{
    background:
      radial-gradient(circle at 56% 38%,rgba(255,226,156,.08),transparent 14rem),
      radial-gradient(circle at 70% 48%,rgba(139,215,210,.035),transparent 15rem),
      linear-gradient(180deg,
        rgba(16,15,11,.00) 0%,
        rgba(16,15,11,.025) 48%,
        rgba(16,15,11,.10) 100%)!important;
  }
  .hero::before{
    background:
      linear-gradient(90deg,
        rgba(16,15,11,.34) 0%,
        rgba(16,15,11,.20) 45%,
        rgba(16,15,11,.06) 100%),
      linear-gradient(180deg,
        rgba(16,15,11,.05) 0%,
        rgba(16,15,11,.02) 54%,
        rgba(16,15,11,.07) 100%)!important;
  }
  #mistCanvas{
    opacity:.24!important;
  }
  .flow-veil{
    opacity:.20!important;
  }
  .energy-streams,
  .energy-streams--six{
    opacity:.34!important;
  }
  .paper-grain{
    opacity:.035!important;
  }
  .world{
    padding-top:42px!important;
  }
}


/* v2.1.11: hard seam fix
   Root cause: hero and following sections used separate dark/background layers.
   Fix: one unified full-page fixed background; hero no longer owns a bottom edge. */

html,
body{
  background:#100f0b!important;
}
body{
  position:relative;
  overflow-x:hidden;
}

/* 1) One continuous background across the entire website */
.site-bg-unified{
  position:fixed;
  inset:-2px;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,
      rgba(16,15,11,.05) 0%,
      rgba(16,15,11,.10) 34%,
      rgba(16,15,11,.18) 68%,
      rgba(16,15,11,.26) 100%),
    url("../hero/taiyue-universe-hero-landscape.webp");
  background-size:cover;
  background-position:center 34%;
  background-repeat:no-repeat;
  filter:saturate(1.12) contrast(1.04) brightness(1.13);
}

/* 2) Existing hero background becomes only a subtle extra glow, not a separate panel */
.hero-bg{
  background-image:none!important;
  background:transparent!important;
  opacity:1!important;
  filter:none!important;
}
.hero-bg::after{
  content:""!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,226,156,.08),transparent 20rem),
    radial-gradient(circle at 68% 48%,rgba(139,215,210,.045),transparent 24rem)!important;
}

/* 3) Remove all transition helpers that can create a horizontal edge */
.hero::after,
.world::after,
main::before,
.world::before,
.matrix::before,
.six::before,
.roles::before,
.journey::before,
.business::before{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}
.hero,
.world,
.matrix,
.six,
.roles,
.journey,
.business,
.section,
main{
  background:transparent!important;
  border-top:0!important;
  box-shadow:none!important;
}
.section + .section{
  border-top:0!important;
  box-shadow:none!important;
}

/* 4) One very light global veil only, no sectional cuts */
main{
  position:relative;
  z-index:2;
}
main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(16,15,11,.00) 0%,
      rgba(16,15,11,.04) 20%,
      rgba(16,15,11,.10) 48%,
      rgba(16,15,11,.16) 100%);
}
main > *{
  position:relative;
  z-index:2;
}

/* 5) Hero readability becomes local, not a bottom-cutting block */
.hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,
      rgba(16,15,11,.38) 0%,
      rgba(16,15,11,.22) 35%,
      rgba(16,15,11,.05) 72%,
      rgba(16,15,11,.08) 100%),
    linear-gradient(180deg,
      rgba(16,15,11,.08) 0%,
      rgba(16,15,11,.02) 56%,
      rgba(16,15,11,.00) 100%)!important;
}
.hero .wrap,
.hero-inner{
  position:relative;
  z-index:9;
}

/* 6) Restore global fluid, but make it ethereal and non-panel-like */
#mistCanvas,
.flow-veil,
.energy-streams,
.energy-streams--six{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  max-height:none!important;
  pointer-events:none!important;
}
#mistCanvas{
  z-index:1!important;
  opacity:.24!important;
  mix-blend-mode:screen!important;
}
.flow-veil{
  z-index:2!important;
  opacity:.18!important;
  mix-blend-mode:screen!important;
  overflow:hidden!important;
}
.flow-ribbon{
  opacity:.26!important;
  filter:blur(30px)!important;
}
.energy-streams,
.energy-streams--six{
  z-index:3!important;
  opacity:.32!important;
  mix-blend-mode:screen!important;
}

/* 7) Content stays above atmosphere */
.topbar,
main,
footer{
  position:relative;
  z-index:8!important;
}
.paper-grain{
  z-index:7!important;
  opacity:.032!important;
}

/* 8) Restore readability locally through cards/text only */
.matrix-grid article,
.six-grid article,
.character-card,
.business-card,
.timeline article{
  background:linear-gradient(180deg,rgba(255,245,220,.078),rgba(22,18,12,.32))!important;
  backdrop-filter:blur(6px)!important;
}
.world p,
.matrix p,
.six p,
.roles p,
.journey p,
.business p,
.section-head p{
  text-shadow:0 2px 12px rgba(0,0,0,.34);
}
.world{
  padding-top:clamp(44px,5.4vw,72px)!important;
}

/* 9) Debug-style hard prevention: no visual separator at first section top */
.world{
  outline:0!important;
}
.world > .wrap{
  border-top:0!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .site-bg-unified{
    background-position:55% 22%;
    filter:saturate(1.14) contrast(1.05) brightness(1.15);
  }
  main::after{
    background:
      linear-gradient(180deg,
        rgba(16,15,11,.00) 0%,
        rgba(16,15,11,.035) 22%,
        rgba(16,15,11,.09) 54%,
        rgba(16,15,11,.15) 100%);
  }
  .hero::before{
    background:
      linear-gradient(90deg,
        rgba(16,15,11,.30) 0%,
        rgba(16,15,11,.16) 46%,
        rgba(16,15,11,.04) 100%),
      linear-gradient(180deg,
        rgba(16,15,11,.05) 0%,
        rgba(16,15,11,.015) 56%,
        rgba(16,15,11,.00) 100%)!important;
  }
  #mistCanvas{
    opacity:.18!important;
  }
  .flow-veil{
    opacity:.13!important;
  }
  .energy-streams,
  .energy-streams--six{
    opacity:.24!important;
  }
  .world{
    padding-top:40px!important;
  }
}


/* v2.1.12: single-background / single-veil seam fix
   The remaining horizontal line came from separate overlay systems meeting at Hero/World.
   This patch makes the background and veil truly global and disables local transition layers. */

html,
body{
  background:#100f0b!important;
}
body{
  position:relative;
  overflow-x:hidden;
}

/* One continuous image layer */
.site-bg-unified{
  position:fixed!important;
  inset:-2px!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:url("../hero/taiyue-universe-hero-landscape.webp")!important;
  background-size:cover!important;
  background-position:center 34%!important;
  background-repeat:no-repeat!important;
  filter:saturate(1.08) contrast(1.04) brightness(1.03)!important;
}

/* One continuous veil layer: medium depth, no section edge */
.site-bg-unified::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 54% 24%,rgba(255,226,156,.08),transparent 24rem),
    radial-gradient(circle at 70% 42%,rgba(139,215,210,.055),transparent 26rem),
    linear-gradient(90deg,
      rgba(8,7,5,.48) 0%,
      rgba(8,7,5,.34) 34%,
      rgba(8,7,5,.24) 68%,
      rgba(8,7,5,.30) 100%),
    linear-gradient(180deg,
      rgba(8,7,5,.20) 0%,
      rgba(8,7,5,.26) 38%,
      rgba(8,7,5,.34) 100%);
}
.site-bg-unified::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 64%,rgba(0,0,0,.20),transparent 34rem),
    radial-gradient(circle at 84% 80%,rgba(0,0,0,.24),transparent 38rem);
}

/* Disable every local layer that can create a horizontal cut */
.hero-bg,
.hero-bg::before,
.hero-bg::after,
.hero::before,
.hero::after,
main::before,
main::after,
.world::before,
.world::after,
.matrix::before,
.matrix::after,
.six::before,
.six::after,
.roles::before,
.roles::after,
.journey::before,
.journey::after,
.business::before,
.business::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  opacity:0!important;
}

/* Sections must be transparent; no block background, no separator */
main,
.hero,
.world,
.matrix,
.six,
.roles,
.journey,
.business,
.section{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.section + .section{
  border-top:0!important;
  box-shadow:none!important;
}

/* Put content above unified background/animations */
.topbar,
main,
footer{
  position:relative!important;
  z-index:8!important;
}
main > *,
.hero .wrap,
.hero-inner,
.world .wrap,
.matrix .wrap,
.six .wrap,
.roles .wrap,
.journey .wrap,
.business .wrap{
  position:relative;
  z-index:9;
}

/* Restore global fluid animation, soft and continuous */
#mistCanvas,
.flow-veil,
.energy-streams,
.energy-streams--six{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  max-height:none!important;
  pointer-events:none!important;
}
#mistCanvas{
  z-index:1!important;
  opacity:.28!important;
  mix-blend-mode:screen!important;
}
.flow-veil{
  z-index:2!important;
  opacity:.22!important;
  overflow:hidden!important;
  mix-blend-mode:screen!important;
}
.flow-ribbon{
  opacity:.30!important;
  filter:blur(30px)!important;
}
.energy-streams,
.energy-streams--six{
  z-index:3!important;
  opacity:.36!important;
  mix-blend-mode:screen!important;
}
.paper-grain{
  z-index:7!important;
  opacity:.038!important;
}

/* Local readability only, without darkening whole panels */
.hero-title-img,
.hero .eyebrow,
.hero .lead,
.hero .actions{
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.34));
}
.world p,
.matrix p,
.six p,
.roles p,
.journey p,
.business p,
.section-head p{
  text-shadow:0 2px 14px rgba(0,0,0,.42);
}
.matrix-grid article,
.six-grid article,
.character-card,
.business-card,
.timeline article{
  background:linear-gradient(180deg,rgba(255,245,220,.088),rgba(22,18,12,.42))!important;
  backdrop-filter:blur(7px)!important;
}

/* Exact seam area safety: no top edge at first lower section */
.world{
  margin-top:0!important;
  padding-top:clamp(44px,5.4vw,72px)!important;
  transform:translateZ(0);
}
.world,
.world > .wrap{
  border-top:0!important;
  box-shadow:none!important;
  outline:0!important;
}

@media(max-width:760px){
  .site-bg-unified{
    background-position:55% 22%!important;
    filter:saturate(1.10) contrast(1.05) brightness(1.05)!important;
  }
  .site-bg-unified::before{
    background:
      radial-gradient(circle at 56% 24%,rgba(255,226,156,.07),transparent 16rem),
      radial-gradient(circle at 72% 46%,rgba(139,215,210,.045),transparent 17rem),
      linear-gradient(90deg,
        rgba(8,7,5,.42) 0%,
        rgba(8,7,5,.30) 46%,
        rgba(8,7,5,.24) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.18) 0%,
        rgba(8,7,5,.24) 42%,
        rgba(8,7,5,.32) 100%);
  }
  #mistCanvas{
    opacity:.20!important;
  }
  .flow-veil{
    opacity:.16!important;
  }
  .energy-streams,
  .energy-streams--six{
    opacity:.27!important;
  }
  .paper-grain{
    opacity:.030!important;
  }
  .world{
    padding-top:40px!important;
  }
}


/* v2.1.13: mobile compatibility and performance for character full-body modal
   Fixes: slow mobile loading, heavy filters, and incomplete bottom frame display. */

/* Desktop keeps visual direction, with safer frame sizing */
.role-modal__image-frame--corner{
  box-sizing:border-box!important;
}
.role-modal__image-frame--corner img{
  min-height:0!important;
}

/* Give the image its own stable paint boundary */
.role-modal__image-frame,
.role-modal__image-frame--corner{
  contain:paint;
}

/* Mobile: reduce heavy effects that are expensive on mobile browsers */
@media(max-width:760px){
  .role-modal{
    align-items:flex-start!important;
    padding:12px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .role-modal__panel{
    width:min(100%, 460px)!important;
    max-height:none!important;
    min-height:0!important;
    margin:0 auto 18px!important;
    overflow:visible!important;
    display:block!important;
    border-radius:24px!important;
  }
  .role-modal__panel::before{
    animation:none!important;
    filter:blur(5px)!important;
    opacity:.36!important;
  }
  .role-modal__image{
    padding:12px 12px 0!important;
    min-height:0!important;
    overflow:visible!important;
    border-right:0!important;
  }
  .role-modal__image::before,
  .role-modal__image::after,
  .role-modal__rune{
    animation:none!important;
    filter:blur(6px)!important;
    opacity:.20!important;
  }

  /* Key fix: use aspect-ratio instead of a hard min-height so the bottom border has room */
  .role-modal__image-frame--corner{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3 / 4.45!important;
    padding:12px!important;
    border-radius:22px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    contain:layout paint;
  }
  .role-modal__image-frame--corner::before{
    inset:8px!important;
    border-radius:18px!important;
  }
  .role-modal__image-frame--corner::after{
    inset:13px!important;
    border-radius:14px!important;
  }
  .role-modal__image-frame--corner .role-modal__image-paper{
    inset:12px!important;
    border-radius:14px!important;
  }
  .role-modal__image-frame--corner img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    object-position:center top!important;
    border-radius:12px!important;
    transform:translateZ(0);
  }

  /* Keep ornaments visible but not clipped */
  .corner-ornament{
    width:36px!important;
    height:36px!important;
    z-index:12!important;
  }
  .corner-ornament--tl{left:18px!important;top:18px!important}
  .corner-ornament--tr{right:18px!important;top:18px!important}
  .corner-ornament--bl{left:18px!important;bottom:18px!important}
  .corner-ornament--br{right:18px!important;bottom:18px!important}

  .role-modal__copy{
    padding:22px 18px 20px!important;
  }
  .role-modal__miniapp{
    grid-template-columns:82px 1fr!important;
    gap:12px!important;
  }
  .role-modal__miniapp img{
    width:82px!important;
    height:82px!important;
  }

  /* Avoid mobile browser jank from excessive blending while modal is open */
  .role-modal[aria-hidden="false"] ~ *,
  body:has(.role-modal[aria-hidden="false"]) .energy-streams--six,
  body:has(.role-modal[aria-hidden="false"]) .flow-veil,
  body:has(.role-modal[aria-hidden="false"]) #mistCanvas{
    animation-play-state:paused;
  }

  .matrix-grid article,
  .six-grid article,
  .character-card,
  .business-card,
  .timeline article{
    backdrop-filter:none!important;
  }
}

/* Small screens: slightly shorter frame to show full bottom border above fold */
@media(max-width:420px){
  .role-modal{
    padding:10px!important;
  }
  .role-modal__image{
    padding:10px 10px 0!important;
  }
  .role-modal__image-frame--corner{
    aspect-ratio:3 / 4.25!important;
    padding:10px!important;
  }
  .role-modal__image-frame--corner .role-modal__image-paper{
    inset:10px!important;
  }
  .role-modal__image-frame--corner::before{
    inset:7px!important;
  }
  .role-modal__image-frame--corner::after{
    inset:11px!important;
  }
  .corner-ornament--tl{left:15px!important;top:15px!important}
  .corner-ornament--tr{right:15px!important;top:15px!important}
  .corner-ornament--bl{left:15px!important;bottom:15px!important}
  .corner-ornament--br{right:15px!important;bottom:15px!important}
}


/* v2.1.14: mobile background full-image fit
   Desktop keeps the current visual. Mobile switches from cover/crop to contain/full image.
   This prevents the phone from showing only the center stone / middle crop. */

@media(max-width:760px){
  .site-bg-unified{
    background-size:contain!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-color:#100f0b!important;
    filter:saturate(1.08) contrast(1.03) brightness(1.02)!important;
  }

  /* Because contain may leave calm space below/around the image, use a continuous base tone
     instead of zooming/cropping the picture. */
  .site-bg-unified::before{
    background:
      radial-gradient(circle at 50% 24%,rgba(255,226,156,.06),transparent 16rem),
      radial-gradient(circle at 70% 42%,rgba(139,215,210,.04),transparent 18rem),
      linear-gradient(90deg,
        rgba(8,7,5,.42) 0%,
        rgba(8,7,5,.30) 48%,
        rgba(8,7,5,.26) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.12) 0%,
        rgba(8,7,5,.20) 42%,
        rgba(8,7,5,.34) 100%)!important;
  }

  .site-bg-unified::after{
    background:
      linear-gradient(180deg,
        rgba(16,15,11,0) 0%,
        rgba(16,15,11,.08) 46%,
        rgba(16,15,11,.24) 100%)!important;
  }
}

/* Very narrow phones: keep the whole image visible and centered, never crop. */
@media(max-width:420px){
  .site-bg-unified{
    background-size:contain!important;
    background-position:center top!important;
  }
}


/* v2.1.15: replace background with the uploaded full artwork, PC + mobile both show whole image.
   Previous package was using an internal background/crop, not the new full artwork.
   This version uses the uploaded full image as the official site background. */

.site-bg-unified{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-color:#100f0b!important;
  background-image:url("../hero/taiyue-official-full-bg-v2-1-15.webp")!important;
  background-size:contain!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  filter:saturate(1.05) contrast(1.02) brightness(.98)!important;
}

/* One continuous medium veil over the full image; no local section masks. */
.site-bg-unified::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,226,156,.045),transparent 24rem),
    linear-gradient(90deg,
      rgba(8,7,5,.42) 0%,
      rgba(8,7,5,.30) 36%,
      rgba(8,7,5,.23) 66%,
      rgba(8,7,5,.28) 100%),
    linear-gradient(180deg,
      rgba(8,7,5,.12) 0%,
      rgba(8,7,5,.22) 44%,
      rgba(8,7,5,.34) 100%)!important;
}

/* Low-fill base below the contained image; it should not look like a second/cropped background. */
.site-bg-unified::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    linear-gradient(180deg,
      rgba(16,15,11,0) 0%,
      rgba(16,15,11,.08) 52%,
      rgba(16,15,11,.28) 100%)!important;
}

/* Disable old hero-specific background surfaces so the uploaded full image is the only artwork. */
.hero-bg,
.hero-bg::before,
.hero-bg::after,
.hero::before,
.hero::after,
main::before,
main::after,
.world::before,
.world::after,
.matrix::before,
.matrix::after,
.six::before,
.six::after,
.roles::before,
.roles::after,
.journey::before,
.journey::after,
.business::before,
.business::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  opacity:0!important;
}

main,
.hero,
.world,
.matrix,
.six,
.roles,
.journey,
.business,
.section{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Keep global fluid but subtle, so it does not cover the newly corrected full image. */
#mistCanvas{
  opacity:.23!important;
}
.flow-veil{
  opacity:.16!important;
}
.flow-ribbon{
  opacity:.24!important;
  filter:blur(30px)!important;
}
.energy-streams,
.energy-streams--six{
  opacity:.30!important;
}

.topbar,
main,
footer{
  position:relative!important;
  z-index:8!important;
}
main > *,
.hero .wrap,
.hero-inner{
  position:relative;
  z-index:9;
}

/* PC: whole uploaded portrait artwork visible; side blank is intentional, not crop. */
@media(min-width:761px){
  .site-bg-unified{
    background-size:contain!important;
    background-position:center top!important;
  }
}

/* Mobile: same full-image rule, no cropping. */
@media(max-width:760px){
  .site-bg-unified{
    background-size:contain!important;
    background-position:center top!important;
    filter:saturate(1.06) contrast(1.02) brightness(1.00)!important;
  }
  .site-bg-unified::before{
    background:
      radial-gradient(circle at 50% 22%,rgba(255,226,156,.04),transparent 16rem),
      linear-gradient(90deg,
        rgba(8,7,5,.38) 0%,
        rgba(8,7,5,.28) 48%,
        rgba(8,7,5,.25) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.10) 0%,
        rgba(8,7,5,.20) 42%,
        rgba(8,7,5,.33) 100%)!important;
  }
  .site-bg-unified::after{
    background:
      linear-gradient(180deg,
        rgba(16,15,11,0) 0%,
        rgba(16,15,11,.10) 50%,
        rgba(16,15,11,.30) 100%)!important;
  }
}


/* v2.1.16: adaptive living background
   Fixes v2.1.15's static contain-only background and black side bars.
   Same uploaded full artwork is used twice:
   1) cover layer fills the expanded screen,
   2) complete layer keeps the main artwork readable.
*/
.site-bg-unified{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-color:#100f0b!important;
  background-image:url("../hero/taiyue-official-full-bg-v2-1-15.webp")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:saturate(1.06) contrast(1.03) brightness(.96)!important;
}
.site-bg-unified::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:.82!important;
  background-image:url("../hero/taiyue-official-full-bg-v2-1-15.webp")!important;
  background-size:auto 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
.site-bg-unified::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,226,156,.045),transparent 24rem),
    radial-gradient(circle at 74% 38%,rgba(139,215,210,.045),transparent 28rem),
    linear-gradient(90deg,
      rgba(8,7,5,.52) 0%,
      rgba(8,7,5,.38) 26%,
      rgba(8,7,5,.26) 50%,
      rgba(8,7,5,.32) 74%,
      rgba(8,7,5,.50) 100%),
    linear-gradient(180deg,
      rgba(8,7,5,.12) 0%,
      rgba(8,7,5,.22) 44%,
      rgba(8,7,5,.36) 100%)!important;
}
.hero-bg,.hero-bg::before,.hero-bg::after,
.hero::before,.hero::after,
main::before,main::after,
.world::before,.world::after,
.matrix::before,.matrix::after,
.six::before,.six::after,
.roles::before,.roles::after,
.journey::before,.journey::after,
.business::before,.business::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  opacity:0!important;
}
main,.hero,.world,.matrix,.six,.roles,.journey,.business,.section{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
#mistCanvas{opacity:.22!important}
.flow-veil{opacity:.15!important}
.flow-ribbon{opacity:.22!important;filter:blur(30px)!important}
.energy-streams,.energy-streams--six{opacity:.28!important}
.topbar,main,footer{position:relative!important;z-index:8!important}
main > *,.hero .wrap,.hero-inner{position:relative;z-index:9}

@media(min-width:761px){
  .site-bg-unified{background-size:cover!important;background-position:center center!important}
  .site-bg-unified::before{background-size:auto 100%!important;background-position:center top!important;opacity:.80!important}
}
@media(max-width:760px){
  .site-bg-unified{
    background-size:cover!important;
    background-position:center center!important;
    filter:saturate(1.08) contrast(1.03) brightness(.98)!important;
  }
  .site-bg-unified::before{
    background-size:contain!important;
    background-position:center top!important;
    opacity:.86!important;
  }
  .site-bg-unified::after{
    background:
      radial-gradient(circle at 50% 22%,rgba(255,226,156,.04),transparent 16rem),
      linear-gradient(90deg,
        rgba(8,7,5,.44) 0%,
        rgba(8,7,5,.32) 48%,
        rgba(8,7,5,.38) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.10) 0%,
        rgba(8,7,5,.20) 42%,
        rgba(8,7,5,.34) 100%)!important;
  }
}


/* v2.1.17: single-image adaptive background
   Reverts the failed v2.1.16 two-layer background.
   Uses ONE uploaded full background image only, with responsive scale/position rules.
   Goal: no stitched side boundary, no dead black side bars, no hero/world seam.
*/

.site-bg-unified{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-color:#100f0b!important;
  background-image:url("../hero/taiyue-official-full-bg-v2-1-15.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:100% auto!important;
  filter:saturate(1.06) contrast(1.03) brightness(.95)!important;
}

/* Keep only one global veil. No second image layer. */
.site-bg-unified::before{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  opacity:0!important;
}

/* A single continuous veil, medium depth. */
.site-bg-unified::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 21%,rgba(255,226,156,.04),transparent 24rem),
    radial-gradient(circle at 76% 40%,rgba(139,215,210,.035),transparent 28rem),
    linear-gradient(90deg,
      rgba(8,7,5,.48) 0%,
      rgba(8,7,5,.34) 32%,
      rgba(8,7,5,.26) 58%,
      rgba(8,7,5,.36) 100%),
    linear-gradient(180deg,
      rgba(8,7,5,.10) 0%,
      rgba(8,7,5,.20) 44%,
      rgba(8,7,5,.36) 100%)!important;
}

/* Disable local/old background layers. */
.hero-bg,
.hero-bg::before,
.hero-bg::after,
.hero::before,
.hero::after,
main::before,
main::after,
.world::before,
.world::after,
.matrix::before,
.matrix::after,
.six::before,
.six::after,
.roles::before,
.roles::after,
.journey::before,
.journey::after,
.business::before,
.business::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  opacity:0!important;
}

main,
.hero,
.world,
.matrix,
.six,
.roles,
.journey,
.business,
.section{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Global fluid remains, but gentle. */
#mistCanvas{opacity:.23!important}
.flow-veil{opacity:.16!important}
.flow-ribbon{opacity:.23!important;filter:blur(30px)!important}
.energy-streams,.energy-streams--six{opacity:.30!important}

.topbar,
main,
footer{
  position:relative!important;
  z-index:8!important;
}
main > *,
.hero .wrap,
.hero-inner{
  position:relative;
  z-index:9;
}

/* Wide desktop: stretch one image to full width. This avoids black sides and no stitching occurs. */
@media(min-width:1200px){
  .site-bg-unified{
    background-size:100% auto!important;
    background-position:center top!important;
  }
}

/* Medium desktop / tablet landscape: allow slightly larger scale to avoid empty feeling. */
@media(min-width:761px) and (max-width:1199px){
  .site-bg-unified{
    background-size:112% auto!important;
    background-position:center top!important;
  }
}

/* Mobile: one image, slightly enlarged and shifted to preserve the main composition.
   Not contain-only, not double-layer, not extreme crop. */
@media(max-width:760px){
  .site-bg-unified{
    background-size:auto 100svh!important;
    background-position:center top!important;
    filter:saturate(1.07) contrast(1.03) brightness(.97)!important;
  }
  .site-bg-unified::after{
    background:
      radial-gradient(circle at 50% 22%,rgba(255,226,156,.035),transparent 16rem),
      linear-gradient(90deg,
        rgba(8,7,5,.42) 0%,
        rgba(8,7,5,.30) 50%,
        rgba(8,7,5,.40) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.08) 0%,
        rgba(8,7,5,.19) 42%,
        rgba(8,7,5,.34) 100%)!important;
  }
}

/* Small phones: reduce zoom a little so it does not feel like the center crop only. */
@media(max-width:420px){
  .site-bg-unified{
    background-size:auto 92svh!important;
    background-position:center top!important;
  }
}


/* v2.1.18: veil depth + six-rhythm section bottom seam cleanup + mobile bottom fill
   Based on v2.1.17 single-image adaptive background.
   This patch does NOT change the approved PC background structure.
*/

/* 1) Slightly deeper global veil, without returning to a muddy black mask. */
.site-bg-unified::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 21%,rgba(255,226,156,.035),transparent 24rem),
    radial-gradient(circle at 76% 40%,rgba(139,215,210,.030),transparent 28rem),
    linear-gradient(90deg,
      rgba(8,7,5,.56) 0%,
      rgba(8,7,5,.40) 32%,
      rgba(8,7,5,.32) 58%,
      rgba(8,7,5,.44) 100%),
    linear-gradient(180deg,
      rgba(8,7,5,.14) 0%,
      rgba(8,7,5,.26) 44%,
      rgba(8,7,5,.42) 100%)!important;
}

/* 2) six-rhythm section bottom seam cleanup.
   The screenshot shows a shadow-like divider under the six cards only.
   Keep cards readable, but remove section-level / container-level edges. */
.six,
.six.section,
section.six,
.six .wrap,
.six .section-head,
.six .six-grid{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.six::before,
.six::after,
.six .wrap::before,
.six .wrap::after,
.six .six-grid::before,
.six .six-grid::after,
.six .section-head::before,
.six .section-head::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  opacity:0!important;
}

/* Remove any inherited full-width divider around the six-rhythm block only. */
.six + *,
.section.six + *,
.six + .roles,
.six + .journey,
.six + .business{
  border-top:0!important;
  box-shadow:none!important;
}

/* The cards keep their own depth, but no heavy lower cast shadow that looks like a divider. */
.six-grid article{
  box-shadow:
    inset 0 0 0 1px rgba(255,232,178,.10),
    0 14px 32px rgba(0,0,0,.14)!important;
}

/* 3) Global fluid can stay visible, but slightly calmer under the deeper veil. */
#mistCanvas{opacity:.22!important}
.flow-veil{opacity:.15!important}
.flow-ribbon{opacity:.21!important;filter:blur(30px)!important}
.energy-streams,.energy-streams--six{opacity:.27!important}

/* 4) Mobile background bottom fill:
   v2.1.17 can still leave black at the bottom on some mobile ratios.
   Use a ratio-based single-image scale: no double layer, no contain-only black edge.
*/
@media(max-width:760px){
  .site-bg-unified{
    background-size:auto 112svh!important;
    background-position:center top!important;
    filter:saturate(1.07) contrast(1.03) brightness(.96)!important;
  }
  .site-bg-unified::after{
    background:
      radial-gradient(circle at 50% 22%,rgba(255,226,156,.030),transparent 16rem),
      linear-gradient(90deg,
        rgba(8,7,5,.48) 0%,
        rgba(8,7,5,.35) 50%,
        rgba(8,7,5,.46) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.12) 0%,
        rgba(8,7,5,.24) 42%,
        rgba(8,7,5,.42) 100%)!important;
  }
}

/* Tall/narrow phones: slightly larger than 112svh to prevent bottom black. */
@media(max-width:430px) and (min-height:760px){
  .site-bg-unified{
    background-size:auto 118svh!important;
    background-position:center top!important;
  }
}

/* Shorter mobile browsers: avoid over-zooming and keep composition from feeling too cropped. */
@media(max-width:430px) and (max-height:720px){
  .site-bg-unified{
    background-size:auto 108svh!important;
    background-position:center top!important;
  }
}

/* Landscape phones / small tablets: width-based is more stable. */
@media(max-width:900px) and (orientation:landscape){
  .site-bg-unified{
    background-size:112% auto!important;
    background-position:center top!important;
  }
}

/* PC and tablets keep the v2.1.17 single-image stretch algorithm. */
@media(min-width:1200px){
  .site-bg-unified{
    background-size:100% auto!important;
    background-position:center top!important;
  }
}
@media(min-width:761px) and (max-width:1199px){
  .site-bg-unified{
    background-size:112% auto!important;
    background-position:center top!important;
  }
}


/* v2.1.19: root fix for six-rhythm seam + deeper cinematic veil
   The remaining line below the Six Rhythms cards is caused by row-level compositing:
   card backdrop-filter + aligned bottom shadows can render as a horizontal boundary.
   This version removes the six-card GPU/backdrop compositing source instead of hiding it.
*/

/* 1) Darker global veil, while keeping image details readable. */
.site-bg-unified::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 21%,rgba(255,226,156,.030),transparent 24rem),
    radial-gradient(circle at 76% 40%,rgba(139,215,210,.026),transparent 28rem),
    linear-gradient(90deg,
      rgba(8,7,5,.64) 0%,
      rgba(8,7,5,.47) 32%,
      rgba(8,7,5,.38) 58%,
      rgba(8,7,5,.52) 100%),
    linear-gradient(180deg,
      rgba(8,7,5,.18) 0%,
      rgba(8,7,5,.32) 44%,
      rgba(8,7,5,.52) 100%)!important;
}

/* 2) Bring fluid halos back after darkening the veil. */
#mistCanvas{opacity:.25!important}
.flow-veil{opacity:.18!important}
.flow-ribbon{opacity:.29!important;filter:blur(28px)!important}
.energy-streams,
.energy-streams--six{opacity:.40!important}

/* 3) Fundamental six-rhythm seam fix:
   Disable backdrop-filter and outer cast shadows on six cards only.
   This avoids the browser creating a shared horizontal compositing boundary. */
.six-grid,
.six-grid article,
.six-grid article::before,
.six-grid article::after{
  isolation:auto!important;
  transform:none!important;
  will-change:auto!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.six-grid{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  contain:none!important;
}

.six-grid article{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,238,190,.13),transparent 42%),
    linear-gradient(180deg,rgba(255,245,220,.135),rgba(28,22,14,.62))!important;
  border:1px solid rgba(236,204,139,.22)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,246,218,.055),
    inset 0 -26px 42px rgba(0,0,0,.18)!important;
}

/* Subtle internal card glow without casting a row-wide outside shadow. */
.six-grid article::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 36%),
    radial-gradient(circle at 72% 18%,rgba(255,226,156,.10),transparent 46%)!important;
  opacity:1!important;
  box-shadow:none!important;
}

/* Remove any possible section-level edge around Six Rhythms. */
.six,
.six.section,
section.six,
.six .wrap,
.six .section-head{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}

.six::before,
.six::after,
.six .wrap::before,
.six .wrap::after,
.six .section-head::before,
.six .section-head::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}

/* Expand transparent breathing room below six cards so no aligned card edge reads as a divider. */
.six{
  padding-bottom:clamp(72px,7vw,118px)!important;
}
.six + *{
  margin-top:0!important;
  border-top:0!important;
  box-shadow:none!important;
}

/* 4) Keep mobile bottom-fill improvements from v2.1.18, with the deeper veil. */
@media(max-width:760px){
  .site-bg-unified{
    background-size:auto 112svh!important;
    background-position:center top!important;
    filter:saturate(1.07) contrast(1.03) brightness(.94)!important;
  }
  .site-bg-unified::after{
    background:
      radial-gradient(circle at 50% 22%,rgba(255,226,156,.026),transparent 16rem),
      linear-gradient(90deg,
        rgba(8,7,5,.54) 0%,
        rgba(8,7,5,.40) 50%,
        rgba(8,7,5,.52) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.16) 0%,
        rgba(8,7,5,.30) 42%,
        rgba(8,7,5,.52) 100%)!important;
  }
  #mistCanvas{opacity:.20!important}
  .flow-veil{opacity:.14!important}
  .flow-ribbon{opacity:.22!important}
  .energy-streams,
  .energy-streams--six{opacity:.30!important}
  .six{
    padding-bottom:64px!important;
  }
}

@media(max-width:430px) and (min-height:760px){
  .site-bg-unified{
    background-size:auto 118svh!important;
    background-position:center top!important;
  }
}

@media(max-width:430px) and (max-height:720px){
  .site-bg-unified{
    background-size:auto 108svh!important;
    background-position:center top!important;
  }
}

@media(max-width:900px) and (orientation:landscape){
  .site-bg-unified{
    background-size:112% auto!important;
    background-position:center top!important;
  }
}


/* v2.1.20: mobile horizontal-overflow and background layer fix
   The phone screenshot shows the page is wider than the viewport. When zoomed out,
   the fixed background only covers the visual viewport, so the overflow area becomes black.
   Root fix: remove mobile horizontal overflow and make mobile sections/cards wrap properly.
*/

/* 1) Global mobile width guard. */
html,
body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
body{
  min-width:0!important;
}

/* Media and containers must never create a wider layout than the screen. */
img,
svg,
canvas,
video{
  max-width:100%!important;
}
main,
section,
footer,
.topbar,
.wrap,
.hero,
.hero-inner,
.world,
.matrix,
.six,
.roles,
.journey,
.business{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* 2) Mobile: hard stop for all horizontal layout overflow. */
@media(max-width:760px){
  html,
  body{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }

  body,
  main{
    position:relative;
  }

  .topbar,
  .wrap,
  .hero .wrap,
  .world .wrap,
  .matrix .wrap,
  .six .wrap,
  .roles .wrap,
  .journey .wrap,
  .business .wrap{
    width:100%!important;
    max-width:100vw!important;
    padding-left:clamp(16px,4.6vw,22px)!important;
    padding-right:clamp(16px,4.6vw,22px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* The screenshot shows Six Rhythms still behaving like a wide row.
     Force it into a phone grid and remove any row overflow. */
  .six-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    overflow:visible!important;
  }

  .six-grid article{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Project matrix and other card rows must also wrap on phone. */
  .matrix-grid,
  .business-grid,
  .timeline,
  .character-grid,
  .roles-grid,
  .journey-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    overflow:visible!important;
  }

  .matrix-grid article,
  .business-card,
  .timeline article,
  .character-card,
  .roles-grid > *,
  .journey-grid > *{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Hero should not keep desktop two-column width on phone. */
  .hero,
  .hero-inner{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .hero-inner{
    display:block!important;
  }

  .hero-copy,
  .hero-visual,
  .hero-art,
  .hero-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Long English eyebrow text must wrap instead of widening the viewport. */
  .eyebrow,
  .kicker,
  .section-kicker,
  .hero .eyebrow{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  .hero-title-img{
    max-width:min(84vw,340px)!important;
    height:auto!important;
  }

  .hero h1,
  .section-head h2,
  .world h2,
  .matrix h2,
  .six h2,
  .roles h2{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  /* Background layer: still fixed, but now sized against the real viewport and not a wider document.
     Also deepen mobile background enough to avoid the black-area illusion when scrolling. */
  .site-bg-unified{
    left:0!important;
    right:auto!important;
    top:0!important;
    bottom:auto!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-width:100vw!important;
    overflow:hidden!important;
    background-size:auto 116dvh!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-color:#100f0b!important;
    filter:saturate(1.07) contrast(1.03) brightness(.93)!important;
  }

  .site-bg-unified::after{
    background:
      radial-gradient(circle at 50% 22%,rgba(255,226,156,.026),transparent 16rem),
      linear-gradient(90deg,
        rgba(8,7,5,.58) 0%,
        rgba(8,7,5,.43) 50%,
        rgba(8,7,5,.56) 100%),
      linear-gradient(180deg,
        rgba(8,7,5,.18) 0%,
        rgba(8,7,5,.34) 42%,
        rgba(8,7,5,.58) 100%)!important;
  }
}

/* 3) Very narrow phones: single-column Six Rhythms reads cleaner and cannot overflow. */
@media(max-width:390px){
  .six-grid{
    grid-template-columns:1fr!important;
  }
}

/* 4) Tall Android browsers: fill lower background more aggressively without creating horizontal overflow. */
@media(max-width:430px) and (min-height:760px){
  .site-bg-unified{
    background-size:auto 122dvh!important;
    background-position:center top!important;
  }
}

/* 5) Short phones: reduce zoom a touch to avoid over-cropping. */
@media(max-width:430px) and (max-height:720px){
  .site-bg-unified{
    background-size:auto 112dvh!important;
    background-position:center top!important;
  }
}

/* 6) Landscape phones: use width-based scaling to avoid vertical squeeze. */
@media(max-width:900px) and (orientation:landscape){
  .site-bg-unified{
    width:100vw!important;
    height:100dvh!important;
    background-size:112% auto!important;
    background-position:center top!important;
  }
}