html.pcm-spiral-experience{
  --spiral-stage-x:0px;
  --spiral-card-width:clamp(300px,28vw,540px);
  --spiral-proof-width:clamp(310px,30vw,620px);
  scroll-behavior:auto!important;
  min-height:100%;
  background:var(--void,#020407)!important;
  color-scheme:dark;
  overscroll-behavior-y:none;
}

html.pcm-spiral-experience,
body.pcm-spiral-experience{
  background:
    radial-gradient(circle at 50% -16%,color-mix(in srgb,var(--accent,#9b6cff) 12%,transparent),transparent 34svh),
    radial-gradient(circle at 50% 116%,rgba(0,229,255,.08),transparent 32svh),
    var(--void,#020407)!important;
}

body.pcm-spiral-experience{
  min-height:100dvh;
  overscroll-behavior-y:none;
}

/* PCM SYSTEM AWAKENING START */
html.pcm-spiral-experience:not(.pcm-awakening-decided) body{
  visibility:hidden!important;
}

body.pcm-awakening-active,
body.pcm-spiral-ready[data-scene="awakening"],
body:has(#pcmSystemAwakening){
  overflow:hidden!important;
  touch-action:none;
}

body.pcm-awakening-active .rail,
body.pcm-awakening-active .phinix-bot,
body.pcm-awakening-active .pcm-store-launcher,
body.pcm-awakening-active .stage-metrics,
body.pcm-awakening-active .building-caption,
body.pcm-awakening-active .scrollhint,
body.pcm-awakening-active .buildbar,
body.pcm-awakening-active .foot,
body.pcm-awakening-active .scene > .panel,
body.pcm-awakening-active .scene > .hero-proof,
body.pcm-awakening-active .scene > .open-landing-wrap,
body.pcm-awakening-active .scene > .open-twins-wrap,
body.pcm-awakening-active #main .pcm-spiral-card,
body.pcm-spiral-ready[data-scene="awakening"] .rail,
body.pcm-spiral-ready[data-scene="awakening"] .phinix-bot,
body.pcm-spiral-ready[data-scene="awakening"] .pcm-store-launcher,
body.pcm-spiral-ready[data-scene="awakening"] .stage-metrics,
body.pcm-spiral-ready[data-scene="awakening"] .building-caption,
body.pcm-spiral-ready[data-scene="awakening"] .scrollhint,
body.pcm-spiral-ready[data-scene="awakening"] .buildbar,
body.pcm-spiral-ready[data-scene="awakening"] .foot,
body.pcm-spiral-ready[data-scene="awakening"] .scene > .panel,
body.pcm-spiral-ready[data-scene="awakening"] .scene > .hero-proof,
body.pcm-spiral-ready[data-scene="awakening"] .scene > .open-landing-wrap,
body.pcm-spiral-ready[data-scene="awakening"] .scene > .open-twins-wrap,
body.pcm-spiral-ready[data-scene="awakening"] #main .pcm-spiral-card{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body:has(#pcmSystemAwakening) :is(.rail,.phinix-bot,.pcm-store-launcher,.stage-metrics,.building-caption,.scrollhint,.buildbar,.foot),
body:has(#pcmSystemAwakening) #main .pcm-spiral-card,
#main > .pcm-awakening ~ .scene > :is(.panel,.hero-proof,.open-landing-wrap,.open-twins-wrap){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.pcm-awakening{
  --awake-progress:0;
  --awake-scan-y:34svh;
  --awake-core:0;
  position:fixed;
  inset:0;
  z-index:9000;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:100%;
  min-height:100dvh;
  height:calc(100dvh + 1px);
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  overflow:hidden;
  isolation:isolate;
  background:rgba(2,4,7,.18);
  color:var(--soft,#dfe7f2);
  font-family:var(--display,'Space Grotesk',sans-serif);
  pointer-events:auto;
  touch-action:manipulation;
  transition:opacity .22s ease;
}

.pcm-awakening-building-fallback{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:min(54vw,440px);
  height:min(68svh,620px);
  opacity:0;
  visibility:hidden;
  transform:translate3d(-50%,-48%,0);
  pointer-events:none;
}

.pcm-awakening-building-fallback i{
  position:absolute;
  left:14%;
  right:14%;
  bottom:9%;
  height:82%;
  border:1px solid color-mix(in srgb,var(--cyan,#00e5ff) 54%,transparent);
  background:
    repeating-linear-gradient(0deg,transparent 0 6.2%,color-mix(in srgb,var(--cyan,#00e5ff) 34%,transparent) 6.3% 6.7%),
    repeating-linear-gradient(90deg,transparent 0 19.5%,color-mix(in srgb,var(--soft,#dfe7f2) 18%,transparent) 20% 20.4%);
  box-shadow:0 0 42px color-mix(in srgb,var(--phinix,#9b6cff) 18%,transparent),inset 0 0 34px rgba(2,4,7,.72);
  clip-path:polygon(42% 0,58% 0,58% 7%,76% 7%,76% 15%,91% 15%,91% 25%,100% 25%,100% 100%,0 100%,0 25%,9% 25%,9% 15%,24% 15%,24% 7%,42% 7%);
}

.pcm-awakening-building-fallback i::before{
  content:"";
  position:absolute;
  left:42%;
  top:0;
  bottom:0;
  width:16%;
  border-inline:1px solid color-mix(in srgb,var(--phinix,#9b6cff) 48%,transparent);
  background:color-mix(in srgb,var(--phinix,#9b6cff) 8%,transparent);
}

.pcm-awakening-building-fallback::after{
  content:"";
  position:absolute;
  left:3%;
  right:3%;
  bottom:5%;
  height:1px;
  background:var(--cyan,#00e5ff);
  box-shadow:0 0 22px var(--cyan,#00e5ff),0 18px 0 color-mix(in srgb,var(--soft,#dfe7f2) 22%,transparent);
}

html.pcm-building-webgl-failed .pcm-awakening-building-fallback{
  opacity:.58;
  visibility:visible;
}

html.pcm-building-webgl-failed body.pcm-spiral-ready #scene{
  display:none!important;
}

.pcm-awakening-lockup{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:min(100%,540px);
  max-width:100%;
  margin:0;
  text-align:center;
}

.pcm-awakening-mark{
  display:block;
  width:96px;
  height:96px;
  margin:0 0 16px;
  object-fit:contain;
  opacity:0;
  transform:translate3d(0,0,0) scale(4.8);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

.pcm-awakening h1,
.pcm-awakening p,
.pcm-awakening strong,
.pcm-awakening small,
.pcm-awakening b{
  position:relative;
  margin:0;
  max-width:100%;
  color:inherit;
  letter-spacing:0;
  text-wrap:balance;
}

.pcm-awakening h1{
  font-family:var(--display,'Space Grotesk',sans-serif);
  font-size:44px;
  font-weight:520;
  line-height:1;
}

.pcm-awakening p{
  color:color-mix(in srgb,var(--soft,#dfe7f2) 72%,transparent);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  text-transform:uppercase;
}

.pcm-awakening strong{
  color:var(--soft,#dfe7f2);
  font-family:var(--display,'Space Grotesk',sans-serif);
  font-size:20px;
  font-weight:620;
  line-height:1.2;
}

.pcm-awakening small{
  margin-top:12px;
  color:color-mix(in srgb,var(--soft,#dfe7f2) 52%,transparent);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:10px;
  font-weight:400;
  line-height:1.4;
  text-transform:uppercase;
}

.pcm-awakening b{
  z-index:0;
  color:var(--phinix,#9b6cff);
  font-family:var(--display,'Space Grotesk',sans-serif);
  font-size:24px;
  font-weight:650;
  line-height:1.15;
}

.pcm-awakening b::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  margin:-12px 0 0 -12px;
  border:1px solid color-mix(in srgb,var(--cyan,#00e5ff) 76%,transparent);
  border-radius:50%;
  opacity:0;
  transform:translate3d(0,0,0) scale(.35);
  pointer-events:none;
}

.pcm-awakening [data-awakening-copy]{
  opacity:0;
  transform:translate3d(0,12px,0);
  -webkit-clip-path:inset(0 100% 0 0);
  clip-path:inset(0 100% 0 0);
  will-change:transform,opacity,clip-path;
}

.pcm-awakening-scan{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:min(620px,78vw);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan,#00e5ff) 24%,var(--soft,#dfe7f2) 50%,var(--cyan,#00e5ff) 76%,transparent);
  opacity:0;
  transform:translate3d(-50%,var(--awake-scan-y),0);
  pointer-events:none;
  will-change:transform,opacity;
}

.pcm-awakening .pcm-bootbox{
  box-sizing:border-box;
  width:min(100%,560px);
  max-width:100%;
  margin-top:18px;
  padding:14px 16px 15px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--phinix,#9b6cff) 42%,transparent);
  border-radius:16px;
  background:color-mix(in srgb,var(--void,#020407) 76%,transparent);
  box-shadow:0 20px 64px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  text-align:left;
}

.pcm-awakening .pcm-boot-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  color:color-mix(in srgb,var(--soft,#dfe7f2) 68%,transparent);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:10px;
  line-height:1.3;
  text-transform:uppercase;
}

.pcm-awakening .pcm-boot-live{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  color:var(--green,#39f5a6);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:10px;
  animation:pcmBootBlink 1.4s ease-in-out infinite;
}

.pcm-awakening .pcm-boot-live.is-ready{
  color:var(--gold,#d9c19f);
  animation:none;
}

.pcm-awakening .pcm-boot-log{
  min-height:1.7em;
  margin:0 0 7px;
  padding:0;
  overflow:hidden;
  color:color-mix(in srgb,var(--soft,#dfe7f2) 82%,transparent);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:clamp(10px,1.1vw,12px);
  line-height:1.7;
  list-style:none;
}

.pcm-awakening .pcm-boot-log li{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  opacity:0;
  transform:translate3d(-8px,0,0);
  transition:opacity .24s ease,transform .24s ease;
}

.pcm-awakening .pcm-boot-log li.in{
  opacity:1;
  transform:translate3d(0,0,0);
}

.pcm-awakening .pcm-boot-log .tag{
  flex:0 0 auto;
  color:var(--cyan,#00e5ff);
}

.pcm-awakening .pcm-boot-log li > span:nth-child(2){
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pcm-awakening .pcm-boot-log .ok{
  flex:0 0 auto;
  color:var(--green,#39f5a6);
}

.pcm-awakening .pcm-boot-bar{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.pcm-awakening .pcm-boot-bar i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--phinix,#9b6cff),var(--cyan,#00e5ff),var(--gold,#d9c19f));
  box-shadow:0 0 18px -2px var(--cyan,#00e5ff);
  transition:width .38s cubic-bezier(.4,0,.2,1);
}

.pcm-awakening .pcm-boot-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  color:color-mix(in srgb,var(--soft,#dfe7f2) 58%,transparent);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:9px;
  line-height:1.3;
}

.pcm-awakening .pcm-boot-foot #pcmBootStatus{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pcm-awakening .pcm-boot-foot #pcmBootPct{
  flex:0 0 auto;
  color:var(--gold,#d9c19f);
}

@keyframes pcmBootBlink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

.pcm-awakening button{
  box-sizing:border-box;
  min-height:48px;
  padding:12px 18px;
  border:1px solid color-mix(in srgb,var(--soft,#dfe7f2) 26%,transparent);
  border-radius:4px;
  background:color-mix(in srgb,var(--void,#020407) 72%,transparent);
  color:var(--soft,#dfe7f2);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:0;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.pcm-awakening button:hover{
  border-color:color-mix(in srgb,var(--soft,#dfe7f2) 58%,transparent);
  background:color-mix(in srgb,var(--soft,#dfe7f2) 10%,var(--void,#020407));
}

.pcm-awakening button:focus-visible{
  outline:2px solid var(--cyan,#00e5ff);
  outline-offset:3px;
}

.pcm-awakening-skip{
  position:absolute;
  z-index:3;
  top:max(16px,env(safe-area-inset-top));
  right:max(16px,env(safe-area-inset-right));
  min-width:48px;
  border-color:transparent!important;
  background:transparent!important;
  color:color-mix(in srgb,var(--soft,#dfe7f2) 62%,transparent)!important;
  font-size:10px!important;
}

.pcm-awakening-skip[hidden]{
  display:none!important;
}

.pcm-awakening-replay{
  display:block;
  min-height:48px;
  margin:18px auto 0;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:4px;
  background:rgba(2,4,7,.52);
  color:rgba(255,255,255,.72);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:10px;
  line-height:1.2;
  letter-spacing:0;
  cursor:pointer;
  touch-action:manipulation;
}

.pcm-awakening-replay:hover{
  border-color:color-mix(in srgb,var(--cyan,#00e5ff) 58%,transparent);
  color:var(--cyan,#00e5ff);
}

.pcm-awakening-replay:focus-visible{
  outline:2px solid var(--cyan,#00e5ff);
  outline-offset:3px;
}

.pcm-awakening[data-awakening-state="playing"] .pcm-awakening-mark{
  animation:pcmAwakeningMark 1.1s cubic-bezier(.16,1,.3,1) .25s both;
}

.pcm-awakening[data-awakening-state="playing"] [data-awakening-copy]{
  animation:pcmAwakeningLine .7s cubic-bezier(.16,1,.3,1) both;
}

.pcm-awakening[data-awakening-state="playing"] [data-awakening-copy]:nth-of-type(1){
  animation-delay:.65s;
}

.pcm-awakening[data-awakening-state="playing"] p[data-awakening-copy]{
  animation-delay:.95s;
}

.pcm-awakening[data-awakening-state="playing"] strong[data-awakening-copy]{
  animation-delay:1.25s;
}

.pcm-awakening[data-awakening-state="playing"] small[data-awakening-copy]{
  animation-delay:2.55s;
}

.pcm-awakening[data-awakening-state="playing"] b[data-awakening-copy]{
  animation-delay:2.78s;
}

.pcm-awakening[data-awakening-state="playing"] b::after{
  animation:pcmAwakeningCore 1s cubic-bezier(.2,.7,.2,1) 2.72s both;
}

.pcm-awakening[data-awakening-state="playing"] .pcm-awakening-scan{
  animation:pcmAwakeningScan 1.7s cubic-bezier(.2,.7,.2,1) 1.1s both;
}

.pcm-awakening[data-awakening-state="final"]{
  --awake-progress:1;
  --awake-scan-y:-34svh;
  --awake-core:1;
}

.pcm-awakening[data-awakening-state="final"] .pcm-awakening-mark,
.pcm-awakening[data-awakening-state="final"] [data-awakening-copy]{
  animation:none;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
}

.pcm-awakening[data-awakening-state="final"] .pcm-awakening-scan{
  animation:none;
  opacity:0;
  transform:translate3d(-50%,var(--awake-scan-y),0);
}

.pcm-awakening[data-awakening-state="final"] b::after{
  animation:none;
  opacity:0;
  transform:translate3d(0,0,0) scale(4.5);
}

.pcm-awakening.is-exiting,
body.pcm-awakening-exiting .pcm-awakening{
  opacity:0;
  pointer-events:none;
}

@keyframes pcmAwakeningMark{
  0%{opacity:0;transform:translate3d(0,0,0) scale(4.8)}
  18%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes pcmAwakeningLine{
  0%{opacity:0;transform:translate3d(0,12px,0);-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:translate3d(0,0,0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
}

@keyframes pcmAwakeningScan{
  0%{opacity:0;transform:translate3d(-50%,34svh,0)}
  12%{opacity:.92}
  82%{opacity:.72}
  100%{opacity:0;transform:translate3d(-50%,-34svh,0)}
}

@keyframes pcmAwakeningCore{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.35)}
  24%{opacity:.82}
  100%{opacity:0;transform:translate3d(0,0,0) scale(4.5)}
}

@media(max-width:820px){
  .pcm-topics-has-awakening-replay{
    align-items:flex-start;
    overflow-y:auto;
  }
  .pcm-topics-has-awakening-replay .pcm-topics-inner{
    margin:auto 0;
  }
  .pcm-awakening-replay{
    width:100%;
  }
  .pcm-awakening{
    min-height:100svh;
    height:calc(100dvh + 1px);
    padding:max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  }
  .pcm-awakening-lockup{
    width:min(100%,380px);
    gap:7px;
  }
  .pcm-awakening-mark{
    width:78px;
    height:78px;
    margin-bottom:12px;
  }
  .pcm-awakening-building-fallback{
    width:min(82vw,390px);
    height:min(64svh,560px);
  }
  .pcm-awakening h1{
    font-size:36px;
  }
  .pcm-awakening strong{
    font-size:18px;
  }
  .pcm-awakening b{
    font-size:22px;
  }
  .pcm-awakening .pcm-bootbox{
    width:100%;
    margin-top:14px;
  }
}

@media(max-height:700px){
  .pcm-awakening-lockup{
    gap:5px;
  }
  .pcm-awakening-mark{
    width:64px;
    height:64px;
    margin-bottom:6px;
  }
  .pcm-awakening h1{
    font-size:34px;
  }
  .pcm-awakening small{
    margin-top:6px;
  }
  .pcm-awakening .pcm-bootbox{
    margin-top:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .pcm-awakening,
  .pcm-awakening *,
  .pcm-awakening *::before,
  .pcm-awakening *::after{
    animation:none!important;
    transition:none!important;
  }
  .pcm-awakening{
    --awake-progress:1;
    --awake-scan-y:-34svh;
    --awake-core:1;
  }
  .pcm-awakening .pcm-awakening-mark,
  .pcm-awakening [data-awakening-copy]{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
  .pcm-awakening .pcm-awakening-scan,
  .pcm-awakening b::after{
    opacity:0;
  }
}

/* PCM SYSTEM AWAKENING END */

body.pcm-spiral-ready[data-scene="landing-b"] #landing-b > .open-twins-wrap.twin-architecture-card{
  width:min(620px,calc(100vw - 48px))!important;
  max-width:620px!important;
  max-height:none!important;
  padding:clamp(22px,2.4vw,34px)!important;
  gap:0!important;
  overflow:hidden!important;
  text-align:left!important;
}

@media(max-width:820px){
  body.pcm-spiral-ready[data-scene="landing-b"] #landing-b > .open-twins-wrap.twin-architecture-card{
    width:min(92vw,390px)!important;
    max-width:calc(100vw - 24px)!important;
    padding:18px 18px 16px!important;
  }
}

@media(max-width:420px) and (max-height:720px){
  body.pcm-spiral-ready[data-scene="landing-b"] #landing-b > .open-twins-wrap.twin-architecture-card{
    padding:14px 15px 12px!important;
  }
}

/* OPEN SYSTEM CARD: TWIN ARCHITECTURE */
body.pcm-spiral-ready[data-scene="landing-b"] .twin-architecture-card{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(620px,calc(100vw - 48px))!important;
  max-width:620px!important;
  max-height:none!important;
  padding:clamp(22px,2.4vw,34px)!important;
  gap:0!important;
  overflow:hidden!important;
  color:var(--soft,#dfe7f2);
  text-align:left!important;
  border:1px solid color-mix(in srgb,var(--cyan,#00e5ff) 38%,rgba(255,255,255,.16))!important;
  border-radius:26px!important;
  background:
    linear-gradient(180deg,rgba(5,11,17,.95),rgba(7,9,16,.92)),
    color-mix(in srgb,var(--cyan,#00e5ff) 3%,rgba(2,4,7,.96))!important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 54px -36px var(--cyan,#00e5ff)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.pcm-spiral-ready[data-scene="landing-b"] .twin-architecture-card::before{
  border-color:color-mix(in srgb,var(--cyan,#00e5ff) 42%,transparent)!important;
  opacity:.72!important;
}

.twin-architecture-header,
.twin-architecture-header p,
.twin-architecture-header h2,
.twin-source-row h3,
.twin-source-row p,
.twin-core h3,
.twin-core p,
.twin-architecture-foot{
  margin:0!important;
  letter-spacing:0!important;
}

.twin-architecture-mark{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
  color:rgba(255,255,255,.62);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
}

.twin-architecture-mark img{
  width:30px;
  height:30px;
  object-fit:contain;
}

.twin-architecture-kicker{
  color:var(--cyan,#00e5ff)!important;
  font-family:var(--mono,'Share Tech Mono',monospace)!important;
  font-size:9px!important;
  font-weight:600!important;
  line-height:1.2!important;
  text-transform:uppercase;
}

body.pcm-spiral-ready .twin-architecture-title{
  display:flex;
  flex-direction:column;
  margin:7px 0 9px!important;
  color:#fff!important;
  font-family:var(--display,'Space Grotesk',sans-serif)!important;
  font-size:clamp(29px,3vw,42px)!important;
  font-weight:580!important;
  line-height:1.02!important;
  letter-spacing:0!important;
  text-wrap:balance;
}

.twin-architecture-title span,
.twin-architecture-title strong{
  color:inherit;
  font:inherit;
  letter-spacing:0!important;
}

.twin-architecture-title strong{
  color:var(--gold,#f0dfc4);
}

body.pcm-spiral-ready .twin-architecture-lead{
  max-width:58ch;
  color:rgba(255,255,255,.74)!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:13px!important;
  line-height:1.45!important;
  text-align:left!important;
}

.twin-sources{
  margin-top:16px;
  border-top:1px solid rgba(255,255,255,.13);
}

.twin-source-row{
  --twin-color:var(--cyan,#00e5ff);
  position:relative;
  display:grid;
  grid-template-columns:minmax(118px,.8fr) minmax(0,1.65fr);
  align-items:center;
  gap:16px;
  min-height:64px;
  padding:11px 4px 11px 15px;
  border-bottom:1px solid rgba(255,255,255,.11);
}

.twin-source-row::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  bottom:15px;
  width:3px;
  background:var(--twin-color);
  box-shadow:0 0 13px color-mix(in srgb,var(--twin-color) 68%,transparent);
}

.twin-source-row.is-human{--twin-color:var(--green,#46e6a5)}
.twin-source-row.is-site{--twin-color:var(--gold,#f0dfc4)}

.twin-source-heading{
  min-width:0;
}

.twin-source-type,
.twin-core-heading > span{
  display:block;
  margin-bottom:3px;
  color:var(--twin-color,var(--phinix,#9b6cff));
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:8px;
  font-weight:600;
  line-height:1.15;
  text-transform:uppercase;
}

body.pcm-spiral-ready .twin-source-row h3,
body.pcm-spiral-ready .twin-core h3{
  color:#fff!important;
  font-family:var(--display,'Space Grotesk',sans-serif)!important;
  font-size:16px!important;
  font-weight:650!important;
  line-height:1.1!important;
}

body.pcm-spiral-ready .twin-source-row p{
  color:rgba(255,255,255,.70)!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:12px!important;
  line-height:1.35!important;
  text-align:left!important;
}

.twin-convergence{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:30px;
  color:rgba(255,255,255,.48);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:8px;
  line-height:1;
  text-transform:uppercase;
}

.twin-convergence::before,
.twin-convergence::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--phinix,#9b6cff) 72%,transparent));
}

.twin-convergence::after{
  transform:scaleX(-1);
}

.twin-convergence span{
  padding:0 10px;
  white-space:nowrap;
}

.twin-core{
  --twin-color:var(--phinix,#9b6cff);
  display:grid;
  grid-template-columns:minmax(118px,.8fr) minmax(0,1.65fr);
  align-items:center;
  gap:16px;
  padding:13px 15px;
  border-block:1px solid color-mix(in srgb,var(--phinix,#9b6cff) 38%,rgba(255,255,255,.10));
  background:color-mix(in srgb,var(--phinix,#9b6cff) 9%,rgba(255,255,255,.015));
}

body.pcm-spiral-ready .twin-core p{
  color:rgba(255,255,255,.76)!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
  text-align:left!important;
}

.twin-outcomes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0!important;
  padding:11px 0 0!important;
  list-style:none;
}

.twin-outcomes li{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  color:rgba(255,255,255,.82);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:9px;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}

.twin-outcomes li + li{
  border-left:1px solid rgba(255,255,255,.13);
}

body.pcm-spiral-ready .twin-architecture-foot{
  margin-top:7px!important;
  color:rgba(255,255,255,.38)!important;
  font-family:var(--mono,'Share Tech Mono',monospace)!important;
  font-size:8px!important;
  line-height:1.2!important;
  text-align:center!important;
  text-transform:uppercase;
}

@media(max-width:820px){
  body.pcm-spiral-ready[data-scene="landing-b"] .twin-architecture-card{
    width:min(92vw,390px)!important;
    max-width:calc(100vw - 24px)!important;
    padding:18px 18px 16px!important;
    border-radius:22px!important;
  }
  .twin-architecture-mark{
    margin-bottom:7px;
  }
  body.pcm-spiral-ready .twin-architecture-title{
    margin:5px 0 7px!important;
    font-size:clamp(24px,7vw,30px)!important;
    line-height:1.03!important;
  }
  body.pcm-spiral-ready .twin-architecture-lead{
    font-size:13px!important;
    line-height:1.38!important;
  }
  .twin-sources{
    margin-top:12px;
  }
  .twin-source-row,
  .twin-core{
    grid-template-columns:minmax(102px,.78fr) minmax(0,1.55fr);
    gap:11px;
  }
  .twin-source-row{
    min-height:57px;
    padding:8px 2px 8px 12px;
  }
  .twin-source-row::before{
    top:12px;
    bottom:12px;
  }
  body.pcm-spiral-ready .twin-source-row h3,
  body.pcm-spiral-ready .twin-core h3{
    font-size:14px!important;
  }
  body.pcm-spiral-ready .twin-source-row p{
    font-size:11px!important;
    line-height:1.28!important;
  }
  .twin-convergence{
    min-height:25px;
    font-size:7px;
  }
  .twin-core{
    padding:10px 12px;
  }
  body.pcm-spiral-ready .twin-core p{
    font-size:10.5px!important;
    line-height:1.32!important;
  }
  .twin-outcomes{
    padding-top:8px!important;
  }
  .twin-outcomes li{
    min-height:27px;
    padding:0 6px;
    font-size:7.5px;
  }
}

@media(max-width:420px) and (max-height:720px){
  body.pcm-spiral-ready[data-scene="landing-b"] .twin-architecture-card{
    padding:14px 15px 12px!important;
  }
  .twin-architecture-mark img{
    width:24px;
    height:24px;
  }
  .twin-architecture-mark,
  .twin-architecture-foot{
    font-size:7px!important;
  }
  body.pcm-spiral-ready .twin-architecture-title{
    font-size:22px!important;
  }
  .twin-sources{
    margin-top:9px;
  }
  .twin-source-row{
    min-height:49px;
    padding-block:6px;
  }
  .twin-convergence{
    min-height:20px;
  }
  .twin-core{
    padding-block:8px;
  }
  .twin-outcomes{
    padding-top:5px!important;
  }
  .twin-outcomes li{
    min-height:24px;
  }
}

/* PCM OPEN SOUL HANDOFF START */
body.pcm-spiral-ready #landing-a > .open-landing-wrap{
  box-sizing:border-box!important;
  width:min(600px,calc(100vw - 48px))!important;
  padding:clamp(22px,3vw,34px)!important;
  gap:clamp(9px,1.35svh,14px)!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--phinix,#9b6cff) 42%,rgba(255,255,255,.16))!important;
  border-radius:26px!important;
  background:
    linear-gradient(155deg,rgba(11,9,22,.91),rgba(4,7,13,.84) 58%,rgba(3,6,11,.78))!important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.52),
    0 0 54px -34px var(--phinix,#9b6cff),
    inset 0 0 0 1px rgba(255,255,255,.035)!important;
}

body.pcm-spiral-ready #landing-a > .open-landing-wrap::before{
  inset:0!important;
  border-color:color-mix(in srgb,var(--cyan,#00e5ff) 22%,transparent)!important;
  border-radius:inherit!important;
  opacity:.72!important;
}

body.pcm-spiral-ready #landing-a .open-landing-mark img{
  width:clamp(52px,5.5vw,68px)!important;
  height:clamp(52px,5.5vw,68px)!important;
}

body.pcm-spiral-ready #landing-a .open-kicker{
  font-size:clamp(9px,.75vw,11px)!important;
  line-height:1.35!important;
}

body.pcm-spiral-ready #landing-a .open-title{
  margin:0!important;
  font-size:clamp(38px,4.8vw,64px)!important;
  line-height:.94!important;
}

body.pcm-spiral-ready #landing-a .open-subcopy{
  width:min(100%,48ch)!important;
  margin:0 auto!important;
  color:rgba(238,241,247,.82)!important;
  font-size:clamp(13px,1.15vw,16px)!important;
  line-height:1.55!important;
}

body.pcm-spiral-ready #landing-a .center-metric-box{
  border-color:rgba(255,255,255,.15)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

.open-platform-availability{
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:2px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(239,243,250,.64);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:10px;
  font-style:normal;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  text-align:center;
  white-space:nowrap;
}

.open-platform-availability span{
  color:rgba(239,243,250,.48);
}

.open-platform-icons{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.open-platform-icon{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(255,255,255,.055);
  color:var(--gold,#d9c19f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.open-platform-icon svg{
  display:block;
  width:14px;
  height:14px;
  fill:currentColor;
  stroke:currentColor;
}

.open-platform-icon.is-android svg{
  fill:none;
  stroke-width:1.7;
}

@media(max-width:820px){
  body.pcm-spiral-ready #landing-a > .open-landing-wrap{
    width:min(92vw,360px)!important;
    padding:19px 17px 18px!important;
    gap:8px!important;
    border-radius:22px!important;
  }

  body.pcm-spiral-ready #landing-a .open-landing-mark{
    gap:6px!important;
  }

  body.pcm-spiral-ready #landing-a .open-landing-mark img{
    width:54px!important;
    height:54px!important;
  }

  body.pcm-spiral-ready #landing-a .open-kicker{
    font-size:8.5px!important;
    letter-spacing:.24em!important;
  }

  body.pcm-spiral-ready #landing-a .open-title{
    font-size:clamp(34px,9.4vw,42px)!important;
    line-height:.94!important;
  }

  body.pcm-spiral-ready #landing-a .open-subcopy{
    width:min(100%,34ch)!important;
    font-size:13px!important;
    line-height:1.5!important;
  }

  body.pcm-spiral-ready #landing-a .center-metric-box{
    padding:12px 12px 13px!important;
    border-radius:18px!important;
  }

  body.pcm-spiral-ready #landing-a .center-metric-box .metric-head{
    margin-bottom:7px!important;
    font-size:8.5px!important;
  }

  body.pcm-spiral-ready #landing-a .center-metric-box .metric-big{
    font-size:clamp(30px,8.7vw,40px)!important;
  }

  body.pcm-spiral-ready #landing-a .center-metric-box .metric-grid{
    margin-top:10px!important;
    gap:9px 12px!important;
  }

  body.pcm-spiral-ready #landing-a .center-metric-box .metric-grid b{
    font-size:clamp(21px,6.6vw,28px)!important;
  }

  .open-platform-availability{
    gap:8px;
    padding-top:10px;
    font-size:8.2px;
  }

  .open-platform-icons{
    gap:6px;
  }

  .open-platform-icon{
    width:26px;
    height:26px;
  }

  .open-platform-icon svg{
    width:13px;
    height:13px;
  }
}
/* PCM OPEN SOUL HANDOFF END */

/* PCM OPEN SOUL KENNZAHLENBAND START */
/* Der Live-Zaehler und die vier Kennzahlen darunter massen ihre Schrift am
   Fenster (clamp(40px,8vw,72px) und clamp(24px,4.8vw,38px)) und landeten auf
   jeder Desktop-Breite beim Hoechstwert. Die Kennzahlenbox haengt aber nicht am
   Fenster, sondern an der 600px breiten Landing-Karte: rund 492px innen, davon
   111px je Spalte des vierspaltigen Rasters. Bei 72px braucht "33'158'657 N"
   536px und brach um - das "N" stand allein auf der zweiten Zeile. Bei 38px
   braucht "225'720" 160px und schob sich ueber die Nachbarwerte, das Band las
   sich als eine einzige Ziffernkette. Beide messen jetzt ihren eigenen
   Container statt das Fenster.

   Ab 981px; darunter gelten die engeren Regeln aus index.html. */
@media(min-width:981px){
  .center-metric-box{
    container-type:inline-size;
  }

  .center-metric-box .metric-grid .open-stat{
    container-type:inline-size;
  }

  /* Share Tech Mono traegt 0.54em pro Zeichen. Dazu kommt die Laufweite der
     jeweiligen Zeile, und der laengste Stand des Zaehlers hat zwoelf Zeichen:
     100 / (12 x 0.62) = 13.4. 13cqw laesst Luft fuer Rundungen und fuer das
     Kartenpolster, das zwischen 981px und 1133px noch mitwaechst. */
  .center-metric-box .metric-big{
    font-size:64px; /* Rueckfall fuer Engines ohne Container-Einheiten */
    font-size:min(72px,13cqw);
  }

  /* Der laengste Wert hat sieben Zeichen: 100 / (7 x 0.6) = 23.8. Hier zaehlt
     die Spalte, nicht die ganze Box - deshalb sitzt der Container auf
     .open-stat. */
  .center-metric-box .metric-grid b{
    font-size:26px; /* Rueckfall fuer Engines ohne Container-Einheiten */
    font-size:min(38px,23cqw);
  }
}
/* PCM OPEN SOUL KENNZAHLENBAND END */

body.pcm-spiral-experience::before,
body.pcm-spiral-experience::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  height:max(56px,env(safe-area-inset-top));
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,var(--void,#020407),rgba(2,4,7,0));
}

body.pcm-spiral-experience::before{
  top:-1px;
}

body.pcm-spiral-experience::after{
  top:auto;
  bottom:-1px;
  height:max(64px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--void,#020407),rgba(2,4,7,0));
}

body.pcm-spiral-ready{
  overflow-x:hidden;
}

body.pcm-spiral-ready #scene{
  display:block!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none!important;
  inset:-1px 0!important;
  width:100vw!important;
  height:calc(100dvh + 2px)!important;
  background:var(--void,#020407)!important;
}

body.pcm-spiral-ready[data-scene="landing-a"] #scene,
body.pcm-spiral-ready[data-scene="landing-b"] #scene{
  display:block!important;
  opacity:1!important;
}

html.pcm-spiral-experience body.pcm-spiral-ready #scene,
html.pcm-spiral-experience body.pcm-spiral-ready.is-scrolling #scene,
html.pcm-spiral-experience body.pcm-spiral-ready:not(.is-scrolling):not([data-scene="intro"]) #scene{
  transform:none!important;
  filter:none!important;
}

body.pcm-spiral-ready #atomSoulCanvas{
  display:none!important;
  opacity:0!important;
  filter:none!important;
  mix-blend-mode:normal;
  pointer-events:none!important;
}

body.pcm-spiral-ready[data-scene="landing-a"] #atomSoulCanvas,
body.pcm-spiral-ready[data-scene="landing-b"] #atomSoulCanvas{
  display:none!important;
  opacity:0!important;
}

body.pcm-spiral-ready .stageframe,
body.pcm-spiral-ready .stage-metrics{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  opacity:.62!important;
}

body.pcm-spiral-ready .stageframe{
  width:clamp(420px,38vw,720px)!important;
  height:min(82vh,850px)!important;
  border-radius:32px!important;
  background:radial-gradient(circle at 50% 54%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 58%);
}

body.pcm-spiral-ready[data-scene="landing-a"] .stageframe,
body.pcm-spiral-ready[data-scene="landing-b"] .stageframe,
body.pcm-spiral-ready[data-scene="landing-a"] .stage-metrics,
body.pcm-spiral-ready[data-scene="landing-b"] .stage-metrics,
body.pcm-spiral-ready[data-scene="landing-a"] .data-lanes,
body.pcm-spiral-ready[data-scene="landing-b"] .data-lanes{
  display:block!important;
  opacity:.46!important;
}

body.pcm-spiral-ready .building-caption{
  left:50%!important;
  transform:translateX(-50%)!important;
}

body.pcm-spiral-ready .data-lanes{
  opacity:.24!important;
}

body.pcm-spiral-ready #main{
  position:relative;
  z-index:12;
}

body.pcm-spiral-ready .scene{
  min-height:128svh!important;
  display:block!important;
  padding:0!important;
  pointer-events:none;
}

body.pcm-spiral-ready .scene.hero,
body.pcm-spiral-ready .scene.center{
  min-height:132svh!important;
}

body.pcm-spiral-ready .scene:last-child{
  min-height:118svh!important;
}

body.pcm-spiral-ready .scene > .hero-proof.pcm-mobile-proof-slice{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

body.pcm-spiral-ready .scene > .panel,
body.pcm-spiral-ready .scene > .hero-proof,
body.pcm-spiral-ready .scene > .open-landing-wrap,
body.pcm-spiral-ready .scene > .open-twins-wrap{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  grid-column:auto!important;
  align-self:auto!important;
  margin:0!important;
  width:var(--spiral-card-width)!important;
  max-width:calc(100vw - 48px)!important;
  max-height:min(76svh,760px)!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
  touch-action:pan-y!important;
  opacity:var(--spiral-opacity,0)!important;
  transform:
    translate3d(
      calc(-50% + var(--spiral-x,0px)),
      calc(-50% + var(--spiral-y,0px)),
      0
    )
    scale(var(--spiral-scale,.82))
    rotate(var(--spiral-tilt,0deg))!important;
  transform-origin:50% 50%!important;
  filter:none!important;
  z-index:var(--spiral-z,14)!important;
  pointer-events:none!important;
  visibility:var(--spiral-vis,visible)!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  contain:layout paint style;
  transition:border-color .22s ease,box-shadow .22s ease;
  text-wrap:pretty;
}

body.pcm-spiral-ready .scene > .panel.is-spiral-dormant,
body.pcm-spiral-ready .scene > .hero-proof.is-spiral-dormant,
body.pcm-spiral-ready .scene > .open-landing-wrap.is-spiral-dormant,
body.pcm-spiral-ready .scene > .open-twins-wrap.is-spiral-dormant{
  opacity:0!important;
  visibility:hidden!important;
}

body.pcm-spiral-ready #main .scene > .pcm-spiral-card.is-spiral-dormant{
  opacity:0!important;
  visibility:hidden!important;
}

body.pcm-spiral-ready .scene > .hero-proof{
  width:var(--spiral-proof-width)!important;
}

body.pcm-spiral-ready .scene > .hero-proof.pcm-mobile-proof-slice .proof-card{
  margin:0!important;
}

body.pcm-spiral-ready .scene > .open-landing-wrap,
body.pcm-spiral-ready .scene > .open-twins-wrap{
  width:clamp(320px,34vw,660px)!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
  gap:clamp(8px,1.4svh,16px)!important;
  justify-content:flex-start!important;
  text-align:center!important;
}

body.pcm-spiral-ready .scene > .open-landing-wrap .open-data-stack,
body.pcm-spiral-ready .scene > .open-twins-wrap .open-twins-data-stack{
  margin-top:0!important;
  gap:clamp(7px,1.2svh,12px)!important;
}

body.pcm-spiral-ready .scene > .panel.is-spiral-front,
body.pcm-spiral-ready .scene > .hero-proof.is-spiral-front,
body.pcm-spiral-ready .scene > .open-landing-wrap.is-spiral-front,
body.pcm-spiral-ready .scene > .open-twins-wrap.is-spiral-front{
  pointer-events:auto!important;
}

body.pcm-spiral-ready .scene > .panel.is-spiral-front,
body.pcm-spiral-ready .scene > .hero-proof.is-spiral-front,
body.pcm-spiral-ready .scene > .open-landing-wrap.is-spiral-front,
body.pcm-spiral-ready .scene > .open-twins-wrap.is-spiral-front{
  border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.16))!important;
}

body.pcm-spiral-ready .scene > .panel::before,
body.pcm-spiral-ready .scene > .hero-proof::before,
body.pcm-spiral-ready .scene > .open-landing-wrap::before,
body.pcm-spiral-ready .scene > .open-twins-wrap::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  pointer-events:none;
  opacity:calc(var(--spiral-front,.4) * .44);
}

body.pcm-spiral-ready .scene > .hero-proof{
  display:block!important;
}

body.pcm-spiral-ready .scene > .hero-proof .proof-card{
  background:linear-gradient(145deg,rgba(7,11,17,.76),rgba(7,11,17,.38));
}

body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .proof-card,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .open-data-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .center-metric-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .os-mini-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .os-core-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .open-twins-data-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .metric-tile,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .fact-mini,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .twin,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .risk-card,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .license-tier{
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}

body.pcm-spiral-ready .scene .scrollhint{
  position:fixed;
  opacity:var(--spiral-hint-opacity,.72);
}

body.pcm-spiral-ready .rail{
  z-index:60;
}

body.pcm-spiral-ready .buildbar{
  z-index:70;
}

body.pcm-spiral-ready .phinix-bot,
body.pcm-spiral-ready .pcm-topics{
  z-index:90;
}

body.pcm-spiral-ready .foot{
  position:relative;
  z-index:20;
  margin-top:-4svh;
}

body.pcm-spiral-ready .panel,
body.pcm-spiral-ready .proof-card,
body.pcm-spiral-ready .open-data-box,
body.pcm-spiral-ready .center-metric-box,
body.pcm-spiral-ready .os-mini-box,
body.pcm-spiral-ready .os-core-box,
body.pcm-spiral-ready .open-twins-data-box{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.pcm-spiral-ready:not(.is-scrolling) .scene > .panel.is-spiral-front,
body.pcm-spiral-ready:not(.is-scrolling) .scene > .hero-proof.is-spiral-front,
body.pcm-spiral-ready:not(.is-scrolling) .scene > .open-landing-wrap.is-spiral-front,
body.pcm-spiral-ready:not(.is-scrolling) .scene > .open-twins-wrap.is-spiral-front{
  box-shadow:0 38px 120px rgba(0,0,0,.44),0 0 58px -30px var(--accent)!important;
}

body.pcm-spiral-ready .pcm-bootbox .line-head{
  margin-bottom:6px!important;
}

body.pcm-spiral-ready .pcm-boot-log{
  height:1.7em!important;
  min-height:0!important;
  margin:0 0 7px!important;
  overflow:hidden!important;
  font-size:clamp(10px,1.1vw,12px)!important;
  line-height:1.7!important;
}

body.pcm-spiral-ready .pcm-boot-log li{
  display:none!important;
  min-width:0;
  white-space:nowrap;
}

body.pcm-spiral-ready .pcm-boot-log li:last-child{
  display:flex!important;
}

body.pcm-spiral-ready .pcm-boot-log li > span:nth-child(2){
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.pcm-spiral-ready .pcm-boot-welcome{
  max-width:48ch!important;
  font-size:clamp(10px,1.15vw,12px)!important;
  line-height:1.38!important;
}

body.pcm-spiral-ready .pcm-boot-choice{
  gap:10px!important;
}

@media(max-width:1180px){
  html.pcm-spiral-experience{
    --spiral-card-width:clamp(300px,36vw,500px);
    --spiral-proof-width:clamp(310px,40vw,560px);
  }
  body.pcm-spiral-ready .stage-metrics{
    opacity:.28!important;
  }
}

@media(max-width:820px){
  html.pcm-spiral-experience{
    --spiral-card-width:min(82vw,400px);
    --spiral-proof-width:min(84vw,420px);
  }
  body.pcm-spiral-ready .scene{
    min-height:max(126svh,var(--pcm-mobile-section-height,126svh))!important;
  }
  body.pcm-spiral-ready .scene.hero,
  body.pcm-spiral-ready .scene.center{
    min-height:max(132svh,var(--pcm-mobile-section-height,132svh))!important;
  }
  body.pcm-spiral-ready .stageframe{
    width:min(78vw,380px)!important;
    height:min(66svh,580px)!important;
    opacity:.42!important;
  }
  body.pcm-spiral-ready .stage-metrics,
  body.pcm-spiral-ready .data-lanes,
  body.pcm-spiral-ready .building-caption{
    display:none!important;
  }
  body.pcm-spiral-ready .scene > .panel,
  body.pcm-spiral-ready .scene > .hero-proof,
  body.pcm-spiral-ready .scene > .open-landing-wrap,
  body.pcm-spiral-ready .scene > .open-twins-wrap{
    max-width:calc(100vw - 26px)!important;
    max-height:none!important;
    border-radius:18px!important;
    transition:opacity .2s ease,border-color .22s ease,box-shadow .22s ease!important;
  }
  body.pcm-spiral-ready .scene > .hero-proof.pcm-mobile-proof-source{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.pcm-spiral-ready .scene > .hero-proof.pcm-mobile-proof-slice{
    display:block!important;
    width:min(78vw,370px)!important;
    max-width:calc(100vw - 26px)!important;
  }
  body.pcm-spiral-ready .scene > .panel:not(.is-spiral-front),
  body.pcm-spiral-ready .scene > .hero-proof:not(.is-spiral-front),
  body.pcm-spiral-ready .scene > .open-landing-wrap:not(.is-spiral-front),
  body.pcm-spiral-ready .scene > .open-twins-wrap:not(.is-spiral-front){
    max-height:none!important;
    box-shadow:0 20px 58px rgba(0,0,0,.24)!important;
  }
  body.pcm-spiral-ready .scene > .open-landing-wrap,
  body.pcm-spiral-ready .scene > .open-twins-wrap{
    width:min(82vw,390px)!important;
    gap:clamp(6px,1svh,10px)!important;
    max-height:none!important;
  }
  body.pcm-spiral-ready .pcm-bootbox{
    padding:10px 12px 11px!important;
    border-radius:16px!important;
  }
  body.pcm-spiral-ready .pcm-bootbox .line-head{
    margin-bottom:4px!important;
  }
  body.pcm-spiral-ready .pcm-boot-log{
    height:1.55em!important;
    margin-bottom:5px!important;
    font-size:9.5px!important;
    line-height:1.55!important;
  }
  body.pcm-spiral-ready .pcm-boot-foot{
    margin-top:6px!important;
    font-size:8.5px!important;
    letter-spacing:.06em!important;
  }
  body.pcm-spiral-ready .pcm-boot-welcome{
    max-width:42ch!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  body.pcm-spiral-ready h1{
    font-size:clamp(34px,11vw,48px);
  }
  body.pcm-spiral-ready h2{
    font-size:clamp(27px,8.8vw,38px);
  }
  body.pcm-spiral-ready .lede,
  body.pcm-spiral-ready .copy{
    line-height:1.5;
  }
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .lede,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .copy,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front p,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front small{
    text-align:left;
    hyphens:auto;
  }
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .open-subcopy,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .open-twins-subcopy,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .pcm-boot-welcome{
    text-align:center;
  }
}

@media(max-width:480px){
  html.pcm-spiral-experience{
    --spiral-card-width:min(80vw,360px);
    --spiral-proof-width:min(82vw,370px);
  }
  body.pcm-spiral-ready .scene > .panel,
  body.pcm-spiral-ready .scene > .hero-proof,
  body.pcm-spiral-ready .scene > .open-landing-wrap,
  body.pcm-spiral-ready .scene > .open-twins-wrap{
    max-height:none!important;
  }
  body.pcm-spiral-ready .scene > .open-landing-wrap,
  body.pcm-spiral-ready .scene > .open-twins-wrap{
    width:min(78vw,350px)!important;
    max-height:none!important;
  }
  body.pcm-spiral-ready .scene > .hero-proof.pcm-mobile-proof-slice{
    width:min(76vw,350px)!important;
  }
  body.pcm-spiral-ready .scene > .panel:not(.is-spiral-front),
  body.pcm-spiral-ready .scene > .hero-proof:not(.is-spiral-front),
  body.pcm-spiral-ready .scene > .open-landing-wrap:not(.is-spiral-front),
  body.pcm-spiral-ready .scene > .open-twins-wrap:not(.is-spiral-front){
    max-height:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.pcm-spiral-ready .scene > .panel,
  body.pcm-spiral-ready .scene > .hero-proof,
  body.pcm-spiral-ready .scene > .open-landing-wrap,
  body.pcm-spiral-ready .scene > .open-twins-wrap{
    transition:opacity .2s ease,filter .2s ease!important;
    transform:
      translate3d(
        calc(-50% + var(--spiral-x,0px)),
        calc(-50% + var(--spiral-y,0px)),
        0
      )
      scale(var(--spiral-scale,1))!important;
  }
}

/* Fact-Boxen einer Kapitelszene und der Abschlussszene. Sie stehen fix im Bild, verstreut
   um die Kartenmitte, und duerfen an den Raendern angeschnitten sein - das
   nimmt der Szene die Strenge, ohne die Karte zu stoeren. */
.chapter-float{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease;
  /* Nicht nur unsichtbar, sondern ganz weg. Jede Ebene ist so gross wie der
     Bildschirm, und ihre Boxen driften endlos mit grossem Schatten. Unsichtbar
     liefen die Animationen weiter, und iPhone-Safari hielt fuer jede besuchte
     Ebene Grafikspeicher fest, bis es nach acht bis zehn Kapiteln die Seite
     neu lud (gemessen am 08.10.2026 mit dem Pruefstand: nur das Abschalten
     der Kennzahlen oder der fernen Karten hielt die Seite am Leben). */
  display:none;
}

body.pcm-spiral-ready[data-scene="k1"] #k1 > .chapter-float,
body.pcm-spiral-ready[data-scene="k2"] #k2 > .chapter-float,
body.pcm-spiral-ready[data-scene="k3"] #k3 > .chapter-float,
body.pcm-spiral-ready[data-scene="k4"] #k4 > .chapter-float,
body.pcm-spiral-ready[data-scene="k5"] #k5 > .chapter-float,
body.pcm-spiral-ready[data-scene="k6"] #k6 > .chapter-float,
body.pcm-spiral-ready[data-scene="k7"] #k7 > .chapter-float,
body.pcm-spiral-ready[data-scene="k8"] #k8 > .chapter-float,
body.pcm-spiral-ready[data-scene="k9"] #k9 > .chapter-float,
body.pcm-spiral-ready[data-scene="k10"] #k10 > .chapter-float,
body.pcm-spiral-ready[data-scene="cta"] #cta > .chapter-float{
  opacity:1;
  visibility:visible;
  display:block;
}

.chapter-float span{
  position:absolute;
  display:block;
  padding:9px 13px;
  border:1px solid color-mix(in srgb,var(--card-accent,var(--cyan,#00e5ff)) 38%,rgba(255,255,255,.16));
  border-radius:12px;
  background:linear-gradient(150deg,rgba(9,15,24,.90),rgba(5,8,14,.93));
  box-shadow:0 18px 46px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  animation:pcm-float-drift 13s ease-in-out infinite;
}

.chapter-float b{
  display:block;
  color:var(--gold,#f0dfc4);
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:0;
}

.chapter-float i{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.6);
  font-family:var(--body,'Inter',sans-serif);
  font-size:10px;
  font-style:normal;
  line-height:1.3;
  letter-spacing:0;
}

/* Verstreut, mit unterschiedlicher Drift und Phase - sonst wirkt es getaktet. */
/* Zuschlag fuer den Driftweg der oben verankerten Boxen.

   `pcm-float-drift` hebt sie bis 8px an. Ohne Zuschlag steht eine Box damit
   zeitweise unter der Kopfzeile: gemessen lag die Oberkante zwischen 61.0 und
   66.7, waehrend die Kopfzeile auf 64 endet - in 31 von 36 Proben darunter.
   Die Pruefung sah das nur, wenn sie zufaellig nach dem Hochzaehler mass, und
   war darum ein Muenzwurf. Der Zuschlag deckt den ganzen Hub ab. */
@media(min-width:821px){
  .chapter-float [data-float="1"],
  .chapter-float [data-float="2"]{ margin-top:14px; }
}


.chapter-float [data-float="1"]{ top:calc(var(--pcm-chrome-top,0px) + 9%); left:6%; animation-delay:-1.5s; }
.chapter-float [data-float="2"]{ top:calc(var(--pcm-chrome-top,0px) + 20%); right:4%; animation-delay:-6s; animation-duration:16s; }
.chapter-float [data-float="3"]{ bottom:calc(var(--pcm-chrome-bottom,0px) + 8%); left:9%; animation-delay:-9s; animation-duration:15s; }
/* Nicht tiefer nach rechts unten: dort sitzt der feste PHINIX-Orb. */
.chapter-float [data-float="4"]{ bottom:calc(var(--pcm-chrome-bottom,0px) + 24%); right:6%; animation-delay:-3.5s; animation-duration:17s; }

/* ===== Fakten am Datenstrom =====
   Sobald `pcm-fact-stream.js` uebernimmt, traegt die Ebene `pcm-stream-ready`.
   Dann bestimmt das Skript Ort und Groesse jeder Box aus der gemessenen Karte,
   und die festen Prozentwerte oben muessen zurueckstehen. Sie bleiben als
   Rueckfall: ohne Skript steht alles wie bisher im Bild.

   Die Strombahnen liegen unter den Boxen und damit auch unter der Karte. Dass
   der Strom hinter der Karte verschwindet, ist gewollt: dort laeuft er hinein. */
.pcm-fact-stream{
  position:fixed;
  inset:0;
  /* Unter #main (z-index 12). Dort drin liegt die Karte bei 96, aber die
     ganze Ebene komponiert nach aussen mit 12: eine Stromebene mit 69 malt
     sonst ueber die Karte statt hinter sie. */
  z-index:8;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

.chapter-float.pcm-stream-ready span{
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  /* Die Drift kommt jetzt aus dem Skript, sonst schieben zwei Quellen
     dieselbe Box. */
  animation:none;
  transition:none;
  /* Der Zuschlag fuer die CSS-Drift oben gilt nur ohne Skript. Das Skript
     packt die Boxen selbst; 14 px, von denen es nichts weiss, schoben am Rand
     zwei Kennzahlen uebereinander (gemessen am 09.10.2026 auf 1280 x 720). */
  margin-top:0;
  /* Eine Box mit left:x nahm sich nur den Platz bis zum Fensterrand. Schwebte
     sie nach rechts, brach ihre Beschriftung um, und sie sprang mitten im
     Schweben von 39 auf 51 px Hoehe (Kapitel 2, 390 px). Mit eigener Breite
     bleibt sie gleich gross, wo immer sie steht. */
  width:max-content;
  max-width:min(240px,calc(50vw - 24px));
}

@media(max-width:820px){
  .chapter-float.pcm-stream-ready span{
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
  }
}

/* Sehr feine Drift. Der Hub bestimmt, wie viel Abstand die Fact-Boxen zur
   Karte brauchen - mobil ist das Band neben der Karte nur rund 50px hoch. */
@keyframes pcm-float-drift{
  0%   { transform:translate3d(0,0,0) rotate(-.3deg); }
  25%  { transform:translate3d(4px,-5px,0) rotate(.25deg); }
  50%  { transform:translate3d(-3px,-8px,0) rotate(.4deg); }
  75%  { transform:translate3d(-5px,-3px,0) rotate(-.2deg); }
  100% { transform:translate3d(0,0,0) rotate(-.3deg); }
}

@media(max-width:820px){
  /* Mobil bleiben sie verstreut und duerfen an den Raendern angeschnitten sein. */
  .chapter-float span{
    padding:4px 9px;
    border-radius:10px;
  }

  .chapter-float b{ font-size:14px; }
  .chapter-float i{ font-size:9px; }

  /* Mobil bleibt neben der Karte nur ein schmales Band oben und unten. Die
     Werte gelten fuer die hoechste Kapitelkarte; unten rechts sitzt der feste
     PHINIX-Orb, unten links die Store-Schaltflaechen. */
  /* Die Boxen haengen an den festen Leisten statt an geratenen Prozenten. */
  .chapter-float [data-float="1"]{ top:calc(var(--pcm-chrome-top,0px) + 10px); left:-12px; }
  .chapter-float [data-float="2"]{ top:calc(var(--pcm-chrome-top,0px) + 10px); right:-16px; }
  .chapter-float [data-float="3"]{ bottom:calc(var(--pcm-chrome-bottom,0px) + 8px); left:-8px; }
  .chapter-float [data-float="4"]{ bottom:calc(var(--pcm-chrome-bottom,0px) + 8px); right:-14px; }
}

@media (prefers-reduced-motion:reduce){
  .chapter-float span{ animation:none; }
}

/* ===== Kapitelkarten im Blueprint der IFC-Karte =====

   Blueprint ist `.twin-generation-card` in tools/home_experience/ifc-twin-simulator.css.
   Aufbau, Groessen, Rahmen, Knopf und Abstaende werden von dort uebernommen; ein
   Kapitel darf nur Farben und eigene Zusatzbausteine beisteuern. Die QA vergleicht
   die fertigen Karten mit der IFC-Karte, damit beide nicht auseinanderlaufen. */
/* Einzige erlaubte Abweichung vom Blueprint: die Akzentfarbe. Sie steht an der
   Szene, damit Karte und Fact-Boxen dieselbe Farbe tragen. */
body.pcm-spiral-ready #main .scene{
  --card-accent:var(--ifc-cyan,#31dce8);
}

body.pcm-spiral-ready #main .scene > .chapter-card{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(620px,calc(100vw - 48px))!important;
  max-width:620px!important;
  max-height:none!important;
  margin:0!important;
  padding:clamp(22px,2.4vw,32px)!important;
  overflow:visible!important;
  color:var(--soft,#dfe7f2)!important;
  background:
    linear-gradient(180deg,rgba(5,11,17,.95),rgba(7,9,16,.92)),
    color-mix(in srgb,var(--card-accent) 3%,rgba(2,4,7,.96))!important;
  border:1px solid color-mix(in srgb,var(--card-accent) 38%,rgba(255,255,255,.16))!important;
  border-radius:22px!important;
  box-shadow:
    0 36px 100px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 54px -34px var(--card-accent)!important;
  text-align:left!important;
}

/* Das geerbte Panel-Overlay wird zum feinen Innenrahmen des Blueprints; sein
   Verlauf mit mix-blend-mode:screen wuerde die dunkle Karte sonst aufhellen. */
body.pcm-spiral-ready #main .scene > .chapter-card::before{
  inset:8px!important;
  width:auto!important;
  height:auto!important;
  border-color:color-mix(in srgb,var(--card-accent) 42%,transparent)!important;
  border-radius:16px!important;
  opacity:.72!important;
  transform:none!important;
  background:none!important;
  mix-blend-mode:normal!important;
}

body.pcm-spiral-ready #main .scene > .chapter-card::after{
  display:none!important;
  background:none!important;
  mix-blend-mode:normal!important;
}

.chapter-card-mark,
.chapter-card-kicker,
.chapter-card-title,
.chapter-card-lead,
.chapter-card-flow,
.chapter-card-label,
.chapter-card-chips,
.chapter-card-metrics,
.chapter-card-note,
.chapter-card-action-box,
.chapter-card-foot{
  position:relative;
  z-index:1;
}

.chapter-card-mark{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
  color:rgba(255,255,255,.65);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.chapter-card-mark img{
  display:block;
  flex:0 0 auto;
  width:30px;
  height:30px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(231,212,181,.2));
}

.chapter-card-kicker,
.chapter-card-label{
  margin:0!important;
  color:var(--card-accent)!important;
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}

.chapter-card-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  width:auto!important;
  max-width:none!important;
  margin:8px 0 10px!important;
  color:#fff!important;
  font-family:var(--display,inherit)!important;
  font-size:clamp(29px,3vw,42px)!important;
  font-weight:700!important;
  line-height:1.02!important;
  letter-spacing:0!important;
  text-wrap:balance;
}

.chapter-card-title strong{
  display:block;
  color:var(--ifc-gold,#e7d4b5)!important;
  font:inherit;
  letter-spacing:0!important;
}

.chapter-card-lead{
  max-width:58ch;
  margin:0!important;
  color:rgba(255,255,255,.74)!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:14px!important;
  line-height:1.52!important;
  letter-spacing:0!important;
  text-align:left!important;
}

/* Drei Schritte stehen wie im Blueprint nebeneinander, vier in zwei Reihen. */
.chapter-card-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:18px 0 16px;
  border-block:1px solid var(--ifc-line,rgba(255,255,255,.14));
}

.chapter-card-flow[data-cells="4"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.chapter-card-flow > div{
  min-width:0;
  padding:12px 13px;
}

.chapter-card-flow > div + div{
  border-left:1px solid var(--ifc-line,rgba(255,255,255,.14));
}

.chapter-card-flow[data-cells="4"] > div:nth-child(2n+1){
  border-left:0;
}

.chapter-card-flow[data-cells="4"] > div:nth-child(n+3){
  border-top:1px solid var(--ifc-line,rgba(255,255,255,.14));
}

.chapter-card-flow span,
.chapter-card-flow strong{
  display:block;
  margin:0!important;
  letter-spacing:0!important;
}

.chapter-card-flow span{
  margin-bottom:4px!important;
  color:var(--card-accent)!important;
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.3!important;
  text-transform:uppercase;
}

.chapter-card-flow strong{
  color:var(--ifc-ink,#f7f8fb)!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.38!important;
}

/* Kapitel-eigene Bausteine folgen der Bereichsliste des Blueprints. */
.chapter-card-chips{
  display:grid;
  grid-template-columns:repeat(var(--chips,6),minmax(0,1fr));
  gap:7px;
  margin:8px 0 17px!important;
  padding:0!important;
  list-style:none;
}

/* Spaltenzahl je Kette; ohne passenden Wert wuerden die Chips ihre Zelle
   ueberlaufen und sich ueberdecken. */
.chapter-card-chips[data-chips="3"]{ --chips:3; }
.chapter-card-chips[data-chips="4"]{ --chips:4; }
.chapter-card-chips[data-chips="5"]{ --chips:5; }

.chapter-card-chips li{
  min-width:0;
  padding:8px 5px;
  color:#e4e7ed!important;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-align:center;
}

.chapter-card-metrics{
  margin:8px 0 15px;
}

.chapter-card-metric{
  display:grid;
  grid-template-columns:minmax(58px,auto) minmax(0,1fr) minmax(84px,auto);
  align-items:center;
  gap:11px;
  padding:4px 0;
}

.chapter-card-metric b{
  color:rgba(255,255,255,.62)!important;
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-transform:uppercase;
}

.chapter-card-bar{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.09);
}

.chapter-card-bar i{
  display:block;
  width:var(--w,0%);
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--card-accent),var(--ifc-violet,#9273ff));
  box-shadow:0 0 12px color-mix(in srgb,var(--card-accent) 55%,transparent);
}

.chapter-card-metric span{
  color:var(--ifc-ink,#f7f8fb)!important;
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:11px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-align:right;
}

/* Zusatzbausteine duerfen nebeneinander stehen, statt die Karte zu verlaengern.
   Mobil klappt der Block auf eine Spalte - wie die Schrittzellen des Blueprints. */
.chapter-card-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
  margin:8px 0 15px;
}

.chapter-card-split > div{
  min-width:0;
}

.chapter-card-split .chapter-card-metrics,
.chapter-card-split .chapter-card-note{
  margin:8px 0 0!important;
}

/* Zwei Ketten unter einer Beschriftung: die zweite ruecht direkt nach. */
.chapter-card-chips + .chapter-card-chips{
  margin-top:-11px!important;
}

.chapter-card-note{
  margin:8px 0 15px;
  padding:12px 13px;
  border:1px solid var(--ifc-line,rgba(255,255,255,.14));
  border-radius:12px;
  background:rgba(255,255,255,.035);
}

.chapter-card-note b{
  display:block;
  margin-bottom:4px;
  color:var(--card-accent)!important;
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-transform:uppercase;
}

.chapter-card-note p{
  margin:0!important;
  color:var(--ifc-ink,#f7f8fb)!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.38!important;
  letter-spacing:0!important;
  text-align:left!important;
}

/* Knopf und Kasten kommen unveraendert vom Blueprint. */
.chapter-card-action-box{
  display:grid;
  place-items:stretch;
  margin:5px 0 10px;
  padding:10px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--card-accent) 62%,rgba(255,255,255,.28));
  background:
    linear-gradient(155deg,rgba(0,229,255,.18),rgba(255,255,255,.05)),
    rgba(11,10,18,.62);
  box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 22px -12px var(--card-accent);
}

.chapter-card-action{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:50px;
  padding:12px 18px;
  color:#101116!important;
  background:linear-gradient(130deg,#7af7ff,#c6a2ff);
  border:1px solid rgba(255,255,255,.95)!important;
  border-radius:9px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.26);
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:.05em!important;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
  animation:pcm-action-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}

.chapter-card-action i{
  font-style:normal;
  font-weight:800;
}

.chapter-card-action:hover{
  transform:translateY(-1px);
  background:linear-gradient(130deg,#95ffff,#e8c1ff);
}

.chapter-card-action:active{
  transform:translateY(1px);
}

.chapter-card-action:focus-visible{
  outline:3px solid rgba(49,220,232,.72);
  outline-offset:3px;
}

.chapter-card-action:hover,
.chapter-card-action:active,
.chapter-card-action:focus-visible{
  animation-play-state:paused;
}

.chapter-card-foot{
  margin:8px 0 0!important;
  color:#9099a6!important;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  /* Ohne !important - so greift mobil dieselbe geerbte Ausrichtung wie beim
     Blueprint, dessen Fusszeile dort links steht. */
  text-align:center;
}

/* Mobile Werte 1:1 wie beim Blueprint. */
@media(max-width:820px){
  body.pcm-spiral-ready #main .scene > .chapter-card{
    width:min(92vw,390px)!important;
    /* 88% ist die Breite, auf die die geerbte Regel `#main .scene .panel` die
       Blueprint-Karte mobil tatsaechlich deckelt. Ohne diese Zeile blieben die
       Kapitelkarten bei 92vw und waeren breiter als das Vorbild; die QA
       vergleicht die Breite deshalb direkt mit der IFC-Karte. */
    max-width:88%!important;
    padding:18px 18px 16px!important;
    border-radius:20px!important;
  }

  .chapter-card-mark{
    margin-bottom:7px;
  }

  .chapter-card-title{
    font-size:clamp(25px,7.2vw,30px)!important;
  }

  .chapter-card-lead{
    font-size:12px!important;
    line-height:1.43!important;
  }

  .chapter-card-flow,
  .chapter-card-flow[data-cells="4"]{
    grid-template-columns:1fr;
    margin:13px 0 12px;
  }

  .chapter-card-flow > div{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:10px;
    padding:7px 2px;
  }

  .chapter-card-flow > div + div,
  .chapter-card-flow[data-cells="4"] > div:nth-child(n+2){
    border-top:1px solid rgba(255,255,255,.08);
    border-left:0;
  }

  .chapter-card-flow span{
    margin:1px 0 0!important;
  }

  .chapter-card-flow strong{
    font-size:11px!important;
  }

  .chapter-card-chips,
  .chapter-card-chips[data-chips="5"]{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin:7px 0 12px!important;
  }

  .chapter-card-chips li{
    padding:6px 4px;
  }

  .chapter-card-metric{
    grid-template-columns:minmax(52px,auto) minmax(0,1fr) minmax(74px,auto);
    gap:9px;
  }

  .chapter-card-split{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    margin:7px 0 12px;
  }

  .chapter-card-action{
    min-height:48px;
    font-size:10px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .chapter-card-action{
    animation:none;
    transition:none;
  }

  .chapter-card-action:hover,
  .chapter-card-action:active{
    transform:none;
  }
}

/* Kapitel 04 spricht die PHINIX-Ebene an und traegt deren Farbe. */
body.pcm-spiral-ready #main #k4{
  --card-accent:var(--phinix,#9b6cff);
}

/* Kapitel 05 und 06 gehoeren zusammen: Datenhoheit und Schutz. Beide tragen
   deshalb dieselbe Warnfarbe. */
body.pcm-spiral-ready #main #k5,
body.pcm-spiral-ready #main #k6{
  --card-accent:var(--red,#ff3366);
}

/* Ab Kapitel 07 traegt jede Szene ihre eigene Farbe. Sie steht an der Szene und
   nicht an der Karte, weil die Fact-Boxen ein Geschwister der Karte sind und
   sonst nichts erben wuerden. */
body.pcm-spiral-ready #main #k7,
body.pcm-spiral-ready #main #cta{
  --card-accent:var(--gold,#f0dfc4);
}

body.pcm-spiral-ready #main #k8{
  --card-accent:var(--revit,#ff2a7a);
}

/* Kapitel 09 traegt Blau, damit sich das Violett von Kapitel 04 nicht
   wiederholt. */
body.pcm-spiral-ready #main #k9{
  --card-accent:var(--blue,#8dd9ff);
}

body.pcm-spiral-ready #main #k10{
  --card-accent:var(--green,#00ff87);
}

/* Die Abschlusskarte traegt den Aktionsknopf als Link statt als Knopf. */
body.pcm-spiral-ready #main .prelaunch-launch-button{
  text-decoration:none!important;
}

/* Der Hinweis auf die Founder-Seite steht als eigene Fusszeile und traegt die
   Akzentfarbe im Link: er ist der einzige Weg von der Startseite zu ihr. */
body.pcm-spiral-ready #main .prelaunch-investors{
  margin:10px 0 0!important;
}

body.pcm-spiral-ready #main .prelaunch-investors a,
body.pcm-spiral-ready #main .prelaunch-investor{
  color:var(--card-accent)!important;
  text-decoration:none!important;
}

body.pcm-spiral-ready #main .prelaunch-investors a{
  border-bottom:1px solid color-mix(in srgb,var(--card-accent) 55%,transparent);
}

/* Die zweite Reihe steht unter dem Aktionskasten und bleibt zurueckhaltend. */
body.pcm-spiral-ready #main .prelaunch-actions{
  margin:0 0 2px!important;
  gap:8px!important;
}

body.pcm-spiral-ready #main .prelaunch-actions .btn{
  flex:1 1 120px;
  min-height:38px;
  padding:9px 12px!important;
  font-size:9.5px!important;
}

/* "Partner werden": der Weg fuer Investoren, gold mit Schimmer wie der
   Knopf "IFC live testen" in der Kopfzeile (pcm-live-glanz und
   pcm-live-atem aus site-chrome.css). Er laeuft nur, solange die Karte
   lebt: ferne Kapitel ruhen ganz (pcm-szene-fern). */
body.pcm-spiral-ready #main .prelaunch-actions .prelaunch-partner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#f6e2bd!important;
  background:linear-gradient(135deg,#2b170e 0%,#22120c 48%,#3a2414 100%)!important;
  border:1px solid #c9a46e!important;
  box-shadow:0 0 0 1px rgba(239,208,163,.12),0 0 18px rgba(239,208,163,.28),inset 0 1px 0 rgba(255,236,204,.22);
  animation:pcm-live-atem 3.2s ease-in-out infinite;
}

body.pcm-spiral-ready #main .prelaunch-actions .prelaunch-partner::after{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:-60%;
  width:45%;
  z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,240,214,.08) 30%,rgba(255,240,214,.55) 50%,rgba(255,240,214,.08) 70%,transparent 100%);
  transform:skewX(-18deg);
  animation:pcm-live-glanz 3.6s ease-in-out infinite;
  pointer-events:none;
}

body.pcm-spiral-ready #main .prelaunch-actions .prelaunch-partner:hover{
  color:#fff7e8!important;
  border-color:#efd0a3!important;
}

body.pcm-spiral-ready #main .prelaunch-actions .prelaunch-partner:focus-visible{
  outline:2px solid #efd0a3;
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  body.pcm-spiral-ready #main .prelaunch-actions .prelaunch-partner,
  body.pcm-spiral-ready #main .prelaunch-actions .prelaunch-partner::after{ animation:none; }
}

/* Die Marke ist PCM VISION; PHINIX steht als Motor darunter. */
.open-powered{
  margin:6px 0 0!important;
  color:rgba(255,255,255,.52)!important;
  font-family:var(--mono,"Share Tech Mono",monospace)!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  text-align:center!important;
}

/* Abkuerzung aus dem Intro direkt in den Live-Test, in der PCM-Palette */
.pcm-awakening-live{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 20px;
  overflow:hidden;
  isolation:isolate;
  margin:16px auto 4px;
  border:1px solid #c9a46e;
  border-radius:999px;
  background:linear-gradient(135deg,#2b170e,#22120c 50%,#3a2414);
  color:#f6e2bd;
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 0 20px rgba(239,208,163,.3),inset 0 1px 0 rgba(255,236,204,.22);
}
.pcm-awakening-live i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#efd0a3;
  animation:pcm-awakening-live-punkt 1.6s ease-out infinite;
}
.pcm-awakening-live::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,240,214,.5),transparent);
  transform:skewX(-18deg);
  animation:pcm-awakening-live-glanz 3.6s ease-in-out infinite;
}
.pcm-awakening-live:hover{ border-color:#efd0a3; color:#fff7e8; }
.pcm-awakening-live:focus-visible{ outline:2px solid #efd0a3; outline-offset:3px; }
.pcm-awakening.is-exiting .pcm-awakening-live{ opacity:0; }

@keyframes pcm-awakening-live-punkt{
  0%{ box-shadow:0 0 0 0 rgba(239,208,163,.75); }
  100%{ box-shadow:0 0 0 8px rgba(239,208,163,0); }
}
@keyframes pcm-awakening-live-glanz{
  0%,55%{ left:-60%; }
  85%,100%{ left:120%; }
}
@media (prefers-reduced-motion:reduce){
  .pcm-awakening-live i,.pcm-awakening-live::after{ animation:none; }
}

/* ===== Belegleiste: echte Bilder aus dem System =====
   Nur im breiten Querformat. Rechts dreht sich eine Trommel mit Bildern, die
   direkt am Scrollweg haengt (pcm-fact-stream.js setzt die Lage je Bild als
   CSS-Variable). Unter #main (z-index 12): die schwebenden Kennzahlen liegen
   darueber. Unten bleibt Platz fuer den festen PHINIX-Orb. */
.pcm-belege,
.pcm-beleg-faden-ebene{ display:none; }

@media (orientation:landscape) and (min-width:1100px){
  .pcm-belege{
    position:fixed;
    z-index:11;
    right:max(28px,2.6vw);
    top:calc(var(--pcm-chrome-top,64px) + 18px);
    bottom:calc(var(--pcm-chrome-bottom,0px) + 132px);
    width:clamp(220px,19vw,330px);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    margin:0;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateX(36px);
    transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s;
  }
  .pcm-belege.ist-an{
    opacity:1;
    visibility:visible;
    transform:none;
    transition-delay:0s;
  }

  .pcm-beleg-band{
    position:relative;
    flex:1 1 auto;
    align-self:stretch;
    min-height:0;
    perspective:900px;
    perspective-origin:30% 50%;
    /* Oben und unten laufen die Bilder ins Dunkel, statt an einer Kante zu enden. */
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  }

  .pcm-beleg-faden-ebene{
    display:block;
    position:fixed;
    inset:0;
    z-index:9;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:visible;
  }
  .pcm-beleg-faden{
    stroke:#efd0a3;
    stroke-width:1.4;
    stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(239,208,163,.75));
  }
}

.pcm-beleg{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  aspect-ratio:3 / 2;
  margin:0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,rgba(239,208,163,.62) calc(var(--beleg-nah,0) * 100%),rgba(127,232,242,.2));
  border-radius:12px;
  background:#04070c;
  box-shadow:0 22px 50px rgba(0,0,0,.55),
    0 0 calc(var(--beleg-nah,0) * 28px) rgba(239,208,163,.16),
    inset 0 1px 0 rgba(255,255,255,.05);
  transform:translate3d(0,calc(-50% + var(--beleg-y,0px)),var(--beleg-z,0px)) rotateX(var(--beleg-kipp,0deg)) rotateY(var(--beleg-dreh,-7deg));
  transform-origin:100% 50%;
  filter:brightness(var(--beleg-licht,1));
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* Eckmarken wie ein Sucher, sie leuchten auf, wenn das Bild in der Mitte steht */
.pcm-beleg::before,
.pcm-beleg::after{
  content:"";
  position:absolute;
  z-index:3;
  width:14px;
  height:14px;
  border:solid rgba(239,208,163,.75);
  opacity:calc(.25 + var(--beleg-nah,0) * .75);
  pointer-events:none;
}
.pcm-beleg::before{ top:7px; left:7px; border-width:1px 0 0 1px; }
.pcm-beleg::after{ bottom:7px; right:7px; border-width:0 1px 1px 0; }

.pcm-beleg img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

.pcm-beleg figcaption{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  padding:22px 12px 9px 26px;
  background:linear-gradient(180deg,transparent,rgba(3,5,9,.94));
  color:rgba(240,232,220,.92);
  font:600 10px/1.3 var(--mono,"Share Tech Mono",monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:calc(.35 + var(--beleg-nah,0) * .65);
}

.pcm-beleg-marke{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid rgba(239,208,163,.55);
  border-radius:999px;
  background:rgba(20,11,6,.8);
  color:#efd0a3;
  font:600 9px/1 var(--mono,"Share Tech Mono",monospace);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pcm-beleg-marke::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#efd0a3;
  animation:pcm-beleg-punkt 1.6s ease-out infinite;
}

@keyframes pcm-beleg-punkt{
  0%{ box-shadow:0 0 0 0 rgba(239,208,163,.75); }
  100%{ box-shadow:0 0 0 7px rgba(239,208,163,0); }
}

@media (prefers-reduced-motion:reduce){
  .pcm-belege{ transition:opacity .3s ease; transform:none; }
  .pcm-beleg-marke::before{ animation:none; }
}

/* Ferne Kapitel ruhen ganz: kein Zeichnen, keine Ebene, keine Animation.
   spiral-home.js markiert alles ausser der Szene im Blick und ihren
   Nachbarn. Unsichtbar allein genuegte nicht, iPhone-Safari hielt fuer
   jedes Kapitel trotzdem Speicher fest und lud die Seite nach acht bis zehn
   Kapiteln neu (Pruefstand 08.10.2026). Die Szene selbst behaelt ihre Hoehe,
   der Scrollweg bleibt gleich. */
body.pcm-spiral-ready #main .scene.pcm-szene-fern{
  content-visibility:hidden!important;
  visibility:hidden!important;
}

/* Fuehrt der Faktenstrom (pcm-fact-stream.js), zeigt er die Ebene der Karte,
   die im Blick steht, und blendet die Boxen selbst mit ihrem Flug aus. Die
   Zuordnung ueber body[data-scene] oben bleibt der Rueckfall ohne Skript. */
body.pcm-stream-fuehrt #main .scene > .chapter-float{
  opacity:0;
  visibility:hidden;
  display:none;
}
body.pcm-stream-fuehrt #main .scene > .chapter-float.pcm-stream-aktiv{
  opacity:1;
  visibility:visible;
  display:block;
}

/* Telefon im Hochformat: die Trommel steht angeschnitten am rechten Rand,
   hinter der Karte (#main liegt darueber). Sie dreht wie im Querformat mit
   dem Scrollweg; Marke und Lichtfaden entfallen, dafuer ist kein Platz. */
@media (orientation:portrait) and (max-width:819px){
  .pcm-belege{
    display:flex;
    position:fixed;
    /* #main steht hier auf 10, das Gebaeude auf 1: dazwischen */
    z-index:9;
    right:-74px;
    top:calc(var(--pcm-chrome-top,64px) + 8px);
    bottom:calc(var(--pcm-chrome-bottom,0px) + 96px);
    width:168px;
    flex-direction:column;
    margin:0;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateX(30px);
    transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s;
  }
  .pcm-belege.ist-an{
    opacity:.82;
    visibility:visible;
    transform:none;
    transition-delay:0s;
  }
  .pcm-belege .pcm-beleg-marke{ display:none; }
  .pcm-beleg-band{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    perspective:700px;
    perspective-origin:0% 50%;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  }
  .pcm-beleg{ border-radius:9px; }
  .pcm-beleg figcaption{ display:none; }
}

/* ===== Leben in den Karten =====
   Die Karte im Fokus schwebt leicht, ihre Inhalte fliessen beim Ankommen der
   Reihe nach ein, der Hauptknopf traegt einen Glanz. Bewegt wird nur Lage und
   Deckkraft, und nur auf der Karte, die gerade vorne steht (is-spiral-front):
   ferne Szenen bleiben ruhig, sonst kaeme der Speicherabsturz auf dem iPhone
   zurueck. Die eigenen Eigenschaften translate und scale setzen sich auf das
   transform der Spirale, statt es zu ersetzen. */
@keyframes pcm-karte-schweben{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -8px; }
}
@keyframes pcm-karte-einfliessen{
  from{ opacity:.2; translate:0 10px; }
}
@keyframes pcm-karte-marke{
  0%,100%{ scale:1; }
  50%{ scale:1.07; }
}
@keyframes pcm-karte-glanz{
  0%,58%{ transform:translateX(-140%) skewX(-18deg); }
  90%,100%{ transform:translateX(340%) skewX(-18deg); }
}

body.pcm-spiral-ready #main .scene > .pcm-spiral-card.is-spiral-front{
  animation:pcm-karte-schweben 7s ease-in-out infinite;
}
/* Mobil stehen die Kennzahlen 2 px ueber und unter der Karte, eingeklemmt
   zwischen Karte und Leiste. Schwebte die Karte senkrecht, fuehre sie in sie
   hinein (09.10.2026, 390 px, in jedem Kapitel). Darum schwebt sie dort
   seitlich. Die Kapitelkarte traegt aus dem Export schon ein Atmen mit
   !important; das Schweben kommt dazu, statt es zu verdraengen. */
@keyframes pcm-karte-schweben-quer{
  0%,100%{ translate:0 0; }
  50%{ translate:-6px 0; }
}
@media(max-width:820px) and (prefers-reduced-motion:no-preference){
  body.pcm-spiral-ready #main .scene > .pcm-spiral-card.is-spiral-front{
    animation:pcm-karte-schweben-quer 7s ease-in-out infinite;
  }
  body.pcm-spiral-ready #main .scene.in > .panel.pcm-spiral-card.is-spiral-front{
    animation:v12PanelAlive 5.2s ease-in-out .24s infinite,pcm-karte-schweben-quer 7s ease-in-out infinite!important;
  }
}

body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-mark,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-kicker,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-title,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-lead,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-flow > div,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-label,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-chips,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-metrics,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-note,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-action-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .cta-actions,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .prelaunch-actions,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-foot{
  animation:pcm-karte-einfliessen .75s cubic-bezier(.2,.8,.2,1) backwards;
}
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-kicker{ animation-delay:.06s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-title{ animation-delay:.12s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-lead{ animation-delay:.2s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-flow > div:nth-child(1){ animation-delay:.28s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-flow > div:nth-child(2){ animation-delay:.35s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-flow > div:nth-child(3){ animation-delay:.42s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-flow > div:nth-child(4){ animation-delay:.49s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-label,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-chips,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-metrics,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-note{ animation-delay:.5s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-action-box,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .cta-actions,
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .prelaunch-actions{ animation-delay:.56s; }
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-foot{ animation-delay:.64s; }

/* Die Marke atmet, solange die Karte vorne steht. */
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-mark img{
  animation:pcm-karte-marke 4.6s ease-in-out .8s infinite;
}

/* Die Flusszellen heben sich unter dem Finger oder Zeiger. */
.chapter-card-flow > div{
  transition:translate .28s cubic-bezier(.2,.8,.2,1),background-color .28s ease;
}
.chapter-card-flow > div:hover{
  translate:0 -2px;
  background-color:rgba(255,255,255,.045);
}

/* Glanz ueber den Hauptknopf, nur auf der Karte vorne. */
.chapter-card-action{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.chapter-card-action::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:34%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:translateX(-140%) skewX(-18deg);
  pointer-events:none;
}
body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-action::after{
  animation:pcm-karte-glanz 4.2s ease-in-out 1.2s infinite;
}

@media (prefers-reduced-motion:reduce){
  body.pcm-spiral-ready #main .scene > .pcm-spiral-card.is-spiral-front,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front *,
  body.pcm-spiral-ready .pcm-spiral-card.is-spiral-front .chapter-card-action::after{
    animation:none;
  }
  .chapter-card-flow > div{ transition:none; }
}