
/* Original shadow-page reset, scoped only to this section. */
#shartor-scroll-section-01,
#shartor-scroll-section-01 *,
#shartor-scroll-section-01 *::before,
#shartor-scroll-section-01 *::after {box-sizing:border-box;margin:0;padding:0;}
#shartor-scroll-section-01 h1,
#shartor-scroll-section-01 h2,
#shartor-scroll-section-01 p,
#shartor-scroll-section-01 strong,
#shartor-scroll-section-01 b,
#shartor-scroll-section-01 small,
#shartor-scroll-section-01 button {font-family:inherit;}
#shartor-scroll-section-01 h1,
#shartor-scroll-section-01 h2 {text-transform:none;}
#shartor-scroll-section-01 a {text-decoration:none;color:inherit;}
#shartor-scroll-section-01 button {
  appearance:none;margin:0;min-width:0;border-radius:0;box-shadow:none;
  line-height:1.2;letter-spacing:inherit;text-transform:none;text-shadow:none;
}

#shartor-scroll-section-01{margin-left:0!important;width:100%!important;}

#shartor-scroll-section-01 .sc-sticky{
  height:100vh!important;
  height:100dvh!important;
  min-height:560px;
}

@media (max-width:700px){
#shartor-scroll-section-01 .sc-sticky{min-height:520px;}
}

#shartor-scroll-section-01,
#shartor-scroll-section-01 * {
  box-sizing: border-box;
}

#shartor-scroll-section-01 {
  --sc-red: #e30613;
  --sc-red-dark: #b9000b;
  --sc-soft: #f6f6f6;
  --sc-black: #050505;
  --sc-white: #ffffff;
  --sc-muted: #89898D;
  position: relative;
  width: 100vw;
  max-width: none !important;
  height: 920vh;
  margin-left: calc(50% - 50vw);
  overflow: visible;
  background: #020202;
  color: var(--sc-white);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.2;
}

#shartor-scroll-section-01 .sc-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,6,19,.075), transparent 29%),
    linear-gradient(180deg, #030303, #010101);
}

#shartor-scroll-section-01 .sc-space,
#shartor-scroll-section-01 .sc-noise,
#shartor-scroll-section-01 .sc-orbit,
#shartor-scroll-section-01 .sc-halo,
#shartor-scroll-section-01 .sc-light-plane,
#shartor-scroll-section-01 .sc-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#shartor-scroll-section-01 .sc-space-a {
  opacity: .33;
  background-image:
    radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 17% 71%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 26% 37%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 83%, var(--sc-red) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% 14%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 67% 72%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 81% 27%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 93% 67%, var(--sc-red) 0 1px, transparent 1.7px);
}

#shartor-scroll-section-01 .sc-space-b {
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.4px);
  background-size: 92px 92px, 92px 92px, 277px 239px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

#shartor-scroll-section-01 .sc-noise {
  z-index: 20;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#shartor-scroll-section-01 .sc-orbit {
  inset: auto;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
}

#shartor-scroll-section-01 .sc-orbit::before,
#shartor-scroll-section-01 .sc-orbit::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

#shartor-scroll-section-01 .sc-orbit::before {
  inset: 9%;
  border: 1px dashed rgba(227,6,19,.11);
}

#shartor-scroll-section-01 .sc-orbit::after {
  inset: 31%;
  border: 1px solid rgba(255,255,255,.04);
}

#shartor-scroll-section-01 .sc-orbit-a {
  width: 58vw;
  height: 58vw;
  left: -34vw;
  top: 5vh;
}

#shartor-scroll-section-01 .sc-orbit-b {
  width: 52vw;
  height: 52vw;
  right: -32vw;
  bottom: -17vw;
}

#shartor-scroll-section-01 .sc-halo {
  left: 50%;
  top: 52%;
  width: min(76vw, 1120px);
  height: min(76vw, 1120px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(227,6,19,.065);
  border-radius: 50%;
  box-shadow:
    inset 0 0 180px rgba(227,6,19,.025),
    0 0 160px rgba(227,6,19,.025);
}

#shartor-scroll-section-01 .sc-halo::before,
#shartor-scroll-section-01 .sc-halo::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

#shartor-scroll-section-01 .sc-halo::before {
  inset: 13%;
  border: 1px solid rgba(255,255,255,.032);
}

#shartor-scroll-section-01 .sc-halo::after {
  inset: 33%;
  border: 1px solid rgba(227,6,19,.07);
}

#shartor-scroll-section-01 .sc-light-plane {
  z-index: 1;
  left: 50%;
  right: auto;
  width: 50%;
  opacity: 0;
  transform: translateX(0);
  transition: opacity .9s cubic-bezier(.22,1,.36,1);
  background:
    linear-gradient(106deg, rgba(227,6,19,.13), rgba(227,6,19,.025) 42%, transparent 72%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 21%, #000 71%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 21%, #000 71%, transparent);
}

#shartor-scroll-section-01 .sc-light-plane::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(227,6,19,.7), transparent);
  box-shadow: 0 0 30px rgba(227,6,19,.55);
}

#shartor-scroll-section-01 .sc-light-plane.is-left {
  left: 0;
  transform: scaleX(-1);
}

#shartor-scroll-section-01 .sc-vignette {
  z-index: 18;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.6), transparent 15%, transparent 83%, rgba(0,0,0,.74)),
    radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,.58) 100%);
}

#shartor-scroll-section-01 .sc-intro {
  position: absolute;
  z-index: 15;
  inset: 0;
  text-align: center;
  will-change: opacity, filter;
}

#shartor-scroll-section-01 .sc-intro-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1220px, 92vw);
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
}

#shartor-scroll-section-01 .sc-intro-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 53%;
  width: min(760px, 72vw);
  height: 370px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(227,6,19,.105), rgba(227,6,19,.025) 42%, transparent 73%);
  filter: blur(20px);
}

#shartor-scroll-section-01 .sc-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-bottom: 28px;
  color: #85858B;
  font-size: 8px;
  font-weight: 520;
  letter-spacing: .35em;
}

#shartor-scroll-section-01 .sc-kicker i {
  display: block;
  width: 47px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-red));
  box-shadow: 0 0 10px rgba(227,6,19,.42);
}

#shartor-scroll-section-01 .sc-kicker i:last-child {
  transform: scaleX(-1);
}

#shartor-scroll-section-01 .sc-intro h1 {
  margin: 0;
  color: #F7F6F3;
  font-size: clamp(76px, 7.65vw, 135px);
  font-weight: 425;
  line-height: .87;
  letter-spacing: -.076em;
}

#shartor-scroll-section-01 .sc-intro h1 span {
  display: block;
  will-change: transform;
}

#shartor-scroll-section-01 .sc-intro h1 em {
  color: var(--sc-red);
  font-style: normal;
  text-shadow: 0 0 46px rgba(227,6,19,.2);
}

#shartor-scroll-section-01 .sc-intro-detail {
  margin-top: 34px;
  will-change: opacity, transform;
}

#shartor-scroll-section-01 .sc-intro-detail p {
  margin: 0;
  color: #8D8D93;
  font-size: clamp(12px, .92vw, 15px);
  line-height: 1.75;
}

#shartor-scroll-section-01 .sc-scroll-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-top: 35px;
  color: #57575D;
  font-size: 7px;
  letter-spacing: .27em;
}

#shartor-scroll-section-01 .sc-scroll-prompt > i {
  position: relative;
  width: 1px;
  height: 37px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

#shartor-scroll-section-01 .sc-scroll-prompt > i b {
  position: absolute;
  left: 0;
  top: -45%;
  width: 1px;
  height: 45%;
  background: var(--sc-red);
  box-shadow: 0 0 9px var(--sc-red);
  animation: scScrollLineV12Section01Original 1.7s ease-in-out infinite;
}

@keyframes scScrollLineV12Section01Original {
  to { transform: translateY(320%); }
}

#shartor-scroll-section-01 .sc-energy-core {
  position: absolute;
  z-index: 19;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 320px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleY(.16) scaleX(.42);
  will-change: opacity, transform;
}

#shartor-scroll-section-01 .sc-energy-core::before {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  content: "";
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.8) 43%, #fff 50%, rgba(227,6,19,.75) 57%, transparent);
  box-shadow:
    0 0 8px #fff,
    0 0 28px rgba(227,6,19,.75),
    0 0 70px rgba(227,6,19,.45);
}

#shartor-scroll-section-01 .sc-energy-core span {
  position: absolute;
  left: 50%;
  top: calc(50% + 48px);
  color: #77777D;
  font-size: 7px;
  letter-spacing: .33em;
  transform: translateX(-50%);
  white-space: nowrap;
}

#shartor-scroll-section-01 .sc-energy-core i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(227,6,19,.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#shartor-scroll-section-01 .sc-energy-core i:last-child {
  width: 44px;
  height: 44px;
  border-color: rgba(255,255,255,.15);
}

#shartor-scroll-section-01 .sc-energy-core b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 20px #fff, 0 0 50px var(--sc-red);
}

#shartor-scroll-section-01 .sc-journey {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: 0;
  transform: scale(1.025);
  filter: blur(8px);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

#shartor-scroll-section-01 .sc-ghost-wrap {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#shartor-scroll-section-01 .sc-ghost {
  position: relative;
  width: max-content;
  max-width: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.067);
  font-size: 280px;
  line-height: .8;
  font-weight: 720;
  letter-spacing: -.075em;
  white-space: nowrap;
  user-select: none;
  opacity: .74;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity .25s ease,
    transform .55s cubic-bezier(.22,1,.36,1),
    filter .35s ease;
}

#shartor-scroll-section-01 .sc-ghost.is-changing {
  opacity: 0;
  transform: scale(1.025);
  filter: blur(12px);
}

#shartor-scroll-section-01 .sc-chapter-no {
  position: absolute;
  z-index: 0;
  right: 3vw;
  bottom: -4vh;
  color: transparent;
  -webkit-text-stroke: 1px rgba(227,6,19,.095);
  font-size: clamp(210px, 31vw, 590px);
  line-height: .76;
  font-weight: 700;
  letter-spacing: -.09em;
  opacity: .75;
  transition: opacity .3s ease, filter .3s ease;
}

#shartor-scroll-section-01 .sc-chapter-no.is-left {
  right: auto;
  left: 2vw;
}

#shartor-scroll-section-01 .sc-journey-label {
  position: absolute;
  z-index: 8;
  left: 3.4vw;
  top: 126px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #626267;
  font-size: 7px;
  letter-spacing: .26em;
}

#shartor-scroll-section-01 .sc-journey-label i {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--sc-red);
  box-shadow: 0 0 10px rgba(227,6,19,.45);
}

#shartor-scroll-section-01 .sc-journey-label b {
  color: #505055;
  font-weight: 500;
}

#shartor-scroll-section-01 .sc-ascent-status {
  position: absolute;
  z-index: 8;
  left: 3.4vw;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #5D5D62;
  font-size: 7px;
  letter-spacing: .24em;
}

#shartor-scroll-section-01 .sc-ascent-status i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-red);
  box-shadow: 0 0 14px var(--sc-red);
  animation: scBlinkV40Section01Original 1.55s ease-in-out infinite;
}

@keyframes scBlinkV40Section01Original {
  50% { opacity: .25; }
}

#shartor-scroll-section-01 .sc-lane {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 16%;
  bottom: 10%;
  width: 170px;
  transform: translateX(-50%);
}

#shartor-scroll-section-01 .sc-axis,
#shartor-scroll-section-01 .sc-axis-live {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}

#shartor-scroll-section-01 .sc-axis {
  background: linear-gradient(to top, rgba(227,6,19,.48), rgba(255,255,255,.12) 56%, rgba(255,255,255,.025));
}

#shartor-scroll-section-01 .sc-axis::before {
  content: "";
  position: absolute;
  inset: 0 -13px;
  background: linear-gradient(to top, rgba(227,6,19,.19), transparent 72%);
  filter: blur(10px);
}

#shartor-scroll-section-01 .sc-axis::after {
  content: "";
  position: absolute;
  left: -270px;
  top: 50%;
  width: 540px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.075), transparent);
}

#shartor-scroll-section-01 .sc-axis-live {
  transform-origin: bottom;
  transform: translateX(-50%) scaleY(0);
  background: linear-gradient(to top, #b9000b, var(--sc-red) 55%, #FF7B7B);
  box-shadow:
    0 0 7px var(--sc-red),
    0 0 24px rgba(227,6,19,.65),
    0 0 58px rgba(227,6,19,.26);
  will-change: transform;
}

#shartor-scroll-section-01 .sc-axis-flare {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 100%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,61,61,.28), rgba(227,6,19,.1) 24%, transparent 68%);
  filter: blur(5px);
  will-change: transform, top;
}

#shartor-scroll-section-01 .sc-station {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(100% - (var(--station) * 16.666%));
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

#shartor-scroll-section-01 .sc-station > i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
}

#shartor-scroll-section-01 .sc-station > i::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 50%;
}

#shartor-scroll-section-01 .sc-station > b {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3B3B3F;
  transition: background .3s ease, box-shadow .3s ease;
}

#shartor-scroll-section-01 .sc-station.passed > b,
#shartor-scroll-section-01 .sc-station.active > b {
  background: var(--sc-red);
  box-shadow: 0 0 15px var(--sc-red);
}

#shartor-scroll-section-01 .sc-station.active > i {
  border-color: rgba(227,6,19,.72);
  animation: scStationV40Section01Original 1.8s ease-out infinite;
}

@keyframes scStationV40Section01Original {
  0% { transform: scale(.7); opacity: 1; }
  80%, 100% { transform: scale(2.45); opacity: 0; }
}

#shartor-scroll-section-01 .sc-rocket {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 0;
  width: 96px;
  height: 142px;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}

#shartor-scroll-section-01 .sc-rocket svg {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: -9px;
  width: 80px;
  height: 137px;
  overflow: visible;
}

#shartor-scroll-section-01 .sc-flame {
  transform-origin: 60px 156px;
  animation: scFlameV40Section01Original .18s ease-in-out infinite alternate;
}

@keyframes scFlameV40Section01Original {
  to { transform: scaleY(.88); opacity: .82; }
}

#shartor-scroll-section-01 .sc-rocket-aura {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,6,19,.23), rgba(227,6,19,.055) 32%, transparent 69%);
  filter: blur(4px);
}

#shartor-scroll-section-01 .sc-target-ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 148px;
  height: 148px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(227,6,19,.17);
  border-radius: 50%;
}

#shartor-scroll-section-01 .sc-target-ring::before,
#shartor-scroll-section-01 .sc-target-ring::after {
  content: "";
  position: absolute;
}

#shartor-scroll-section-01 .sc-target-ring::before {
  left: -25%;
  top: 50%;
  width: 150%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,6,19,.15), transparent);
}

#shartor-scroll-section-01 .sc-target-ring::after {
  left: 50%;
  top: -25%;
  width: 1px;
  height: 150%;
  background: linear-gradient(to bottom, transparent, rgba(227,6,19,.15), transparent);
}

#shartor-scroll-section-01 .sc-copy {
  position: absolute;
  z-index: 12;
  top: 64%;
  width: min(38vw, 610px);
  transform: translateY(-50%);
  opacity: 0;
  filter: blur(8px);
  transition:
    left .8s cubic-bezier(.22,1,.36,1),
    right .8s cubic-bezier(.22,1,.36,1),
    top .55s cubic-bezier(.22,1,.36,1),
    opacity .45s ease,
    filter .45s ease,
    transform .65s cubic-bezier(.22,1,.36,1);
  will-change: top, opacity, transform, filter;
}

#shartor-scroll-section-01 .sc-copy-right {
  left: calc(50% + 128px);
  right: auto;
}

#shartor-scroll-section-01 .sc-copy-left {
  right: calc(50% + 128px);
  left: auto;
  text-align: right;
}

#shartor-scroll-section-01 .sc-copy.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%);
}

#shartor-scroll-section-01 .sc-copy.is-changing {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(calc(-50% + 22px));
}

#shartor-scroll-section-01 .sc-copy-rule {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 1px;
  margin-bottom: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.035));
}

#shartor-scroll-section-01 .sc-copy-left .sc-copy-rule {
  transform: scaleX(-1);
}

#shartor-scroll-section-01 .sc-copy-rule i {
  display: block;
  width: 96px;
  height: 1px;
  background: var(--sc-red);
  box-shadow: 0 0 15px rgba(227,6,19,.75);
}

#shartor-scroll-section-01 .sc-copy-rule span {
  display: block;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--sc-red);
  box-shadow: 0 0 10px var(--sc-red);
}

#shartor-scroll-section-01 .sc-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}

#shartor-scroll-section-01 .sc-copy-left .sc-meta,
#shartor-scroll-section-01 .sc-copy-left .sc-tags {
  justify-content: flex-end;
}

#shartor-scroll-section-01 .sc-meta b {
  color: var(--sc-red);
  font-size: 17px;
  font-weight: 560;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(227,6,19,.35);
}

#shartor-scroll-section-01 .sc-meta small {
  color: #747479;
  font-size: 8px;
  letter-spacing: .27em;
}

#shartor-scroll-section-01 .sc-copy h2 {
  max-width: 100%;
  margin: 29px 0 18px;
  color: #F7F5F2;
  font-size: clamp(40px, 4vw, 76px);
  line-height: .94;
  font-weight: 440;
  letter-spacing: -.062em;
  text-wrap: balance;
}

#shartor-scroll-section-01 .sc-copy p {
  width: min(100%, 590px);
  margin: 0;
  color: #939398;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.75;
  font-weight: 400;
}

#shartor-scroll-section-01 .sc-copy-left p {
  margin-left: auto;
}

#shartor-scroll-section-01 .sc-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}

#shartor-scroll-section-01 .sc-tags span {
  color: #77777C;
  font-size: 7px;
  letter-spacing: .2em;
}

#shartor-scroll-section-01 .sc-tags i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sc-red);
  box-shadow: 0 0 8px rgba(227,6,19,.65);
}

#shartor-scroll-section-01 .sc-index {
  position: absolute;
  z-index: 14;
  right: 3.4vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}

#shartor-scroll-section-01 .sc-index button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #444449;
  cursor: pointer;
}

#shartor-scroll-section-01 .sc-index span {
  font-size: 7px;
  letter-spacing: .14em;
}

#shartor-scroll-section-01 .sc-index i {
  display: block;
  width: 18px;
  height: 1px;
  background: #3B3B40;
  transition: width .38s ease, background .38s ease, box-shadow .38s ease;
}

#shartor-scroll-section-01 .sc-index button.active {
  color: var(--sc-red);
}

#shartor-scroll-section-01 .sc-index button.active i {
  width: 40px;
  background: var(--sc-red);
  box-shadow: 0 0 10px rgba(227,6,19,.7);
}

#shartor-scroll-section-01 .sc-coordinate {
  position: absolute;
  z-index: 8;
  right: 3.4vw;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

#shartor-scroll-section-01 .sc-coordinate small {
  color: #4F4F54;
  font-size: 7px;
  letter-spacing: .23em;
}

#shartor-scroll-section-01 .sc-coordinate b {
  color: #85858A;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}

#shartor-scroll-section-01 .sc-finish {
  position: absolute;
  z-index: 16;
  left: 50%;
  top: 50%;
  width: min(960px, 88vw);
  transform: translate(-50%, -45%) scale(.96);
  text-align: center;
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

#shartor-scroll-section-01 .sc-finish small {
  display: block;
  margin-bottom: 24px;
  color: #69696E;
  font-size: 8px;
  letter-spacing: .34em;
}

#shartor-scroll-section-01 .sc-finish strong {
  display: block;
  color: #F5F3F0;
  font-size: clamp(58px, 7.3vw, 124px);
  line-height: .88;
  font-weight: 430;
  letter-spacing: -.07em;
}

#shartor-scroll-section-01 .sc-finish em {
  color: var(--sc-red);
  font-style: normal;
}

#shartor-scroll-section-01 .sc-finish a {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 42px;
  padding: 17px 23px;
  border: 1px solid rgba(227,6,19,.65);
  color: #EFEDE9;
  background: rgba(227,6,19,.07);
  text-decoration: none;
  font-size: 8px;
  letter-spacing: .23em;
  pointer-events: auto;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

#shartor-scroll-section-01 .sc-finish a:hover {
  background: var(--sc-red);
  box-shadow: 0 0 34px rgba(227,6,19,.28);
  transform: translateY(-2px);
}

#shartor-scroll-section-01 .sc-finish a i {
  font-size: 15px;
  font-style: normal;
  line-height: 0;
}

@media (max-width: 1050px) {
#shartor-scroll-section-01 .sc-lane {
    left: 27%;
  }

#shartor-scroll-section-01 .sc-copy-right,
  #shartor-scroll-section-01 .sc-copy-left {
    left: calc(27% + 110px);
    right: 28px;
    width: auto;
    text-align: left;
  }

#shartor-scroll-section-01 .sc-copy-left .sc-copy-rule {
    transform: none;
  }

#shartor-scroll-section-01 .sc-copy-left .sc-meta,
  #shartor-scroll-section-01 .sc-copy-left .sc-tags {
    justify-content: flex-start;
  }

#shartor-scroll-section-01 .sc-copy-left p {
    margin-left: 0;
  }

#shartor-scroll-section-01 .sc-light-plane,
  #shartor-scroll-section-01 .sc-light-plane.is-left {
    left: 27%;
    right: auto;
    width: 73%;
    transform: none;
  }

#shartor-scroll-section-01 .sc-index {
    right: 14px;
  }
}

@media (max-width: 700px) {
#shartor-scroll-section-01 {
    height: 840vh;
  }

#shartor-scroll-section-01 .sc-sticky {
    min-height: 610px;
  }

#shartor-scroll-section-01 .sc-intro-copy {
    width: calc(100vw - 34px);
  }

#shartor-scroll-section-01 .sc-kicker {
    gap: 10px;
    margin-bottom: 22px;
    font-size: 6px;
    letter-spacing: .26em;
  }

#shartor-scroll-section-01 .sc-kicker i {
    width: 23px;
  }

#shartor-scroll-section-01 .sc-intro h1 {
    font-size: clamp(48px, 14vw, 72px);
    line-height: .91;
  }

#shartor-scroll-section-01 .sc-intro-detail {
    margin-top: 26px;
  }

#shartor-scroll-section-01 .sc-intro-detail p {
    font-size: 11px;
  }

#shartor-scroll-section-01 .sc-scroll-prompt {
    margin-top: 26px;
  }

#shartor-scroll-section-01 .sc-journey-label {
    left: 18px;
    top: 91px;
  }

#shartor-scroll-section-01 .sc-journey-label b,
  #shartor-scroll-section-01 .sc-ascent-status,
  #shartor-scroll-section-01 .sc-coordinate,
  #shartor-scroll-section-01 .sc-chapter-no {
    display: none;
  }

#shartor-scroll-section-01 .sc-lane {
    left: 38px;
    top: 14%;
    bottom: 35%;
    width: 76px;
  }

#shartor-scroll-section-01 .sc-rocket {
    width: 62px;
    height: 92px;
  }

#shartor-scroll-section-01 .sc-rocket svg {
    left: 5px;
    width: 52px;
    height: 90px;
  }

#shartor-scroll-section-01 .sc-rocket-aura {
    width: 130px;
    height: 130px;
  }

#shartor-scroll-section-01 .sc-target-ring {
    width: 88px;
    height: 88px;
  }

#shartor-scroll-section-01 .sc-copy,
  #shartor-scroll-section-01 .sc-copy-right,
  #shartor-scroll-section-01 .sc-copy-left {
    left: 92px;
    right: 20px;
    top: auto !important;
    bottom: 40px;
    width: auto;
    transform: translateY(18px);
    text-align: left;
  }

#shartor-scroll-section-01 .sc-copy.is-visible {
    transform: translateY(0);
  }

#shartor-scroll-section-01 .sc-copy.is-changing {
    transform: translateY(18px);
  }

#shartor-scroll-section-01 .sc-copy-left .sc-copy-rule {
    transform: none;
  }

#shartor-scroll-section-01 .sc-copy-left .sc-meta,
  #shartor-scroll-section-01 .sc-copy-left .sc-tags {
    justify-content: flex-start;
  }

#shartor-scroll-section-01 .sc-copy-rule {
    margin-bottom: 20px;
  }

#shartor-scroll-section-01 .sc-copy-rule i {
    width: 58px;
  }

#shartor-scroll-section-01 .sc-copy h2 {
    margin: 20px 0 13px;
    font-size: clamp(30px, 9vw, 46px);
  }

#shartor-scroll-section-01 .sc-copy p {
    font-size: 11px;
    line-height: 1.62;
  }

#shartor-scroll-section-01 .sc-tags {
    gap: 7px;
    margin-top: 18px;
  }

#shartor-scroll-section-01 .sc-tags span {
    font-size: 6px;
  }

#shartor-scroll-section-01 .sc-index {
    right: 8px;
    top: 20%;
    gap: 8px;
  }

#shartor-scroll-section-01 .sc-index span {
    display: none;
  }

#shartor-scroll-section-01 .sc-index i {
    width: 10px;
  }

#shartor-scroll-section-01 .sc-index button.active i {
    width: 22px;
  }

#shartor-scroll-section-01 .sc-ghost-wrap {
    align-items: flex-start;
    padding-top: 22vh;
  }

#shartor-scroll-section-01 .sc-light-plane,
  #shartor-scroll-section-01 .sc-light-plane.is-left {
    left: 38px;
    width: calc(100% - 38px);
  }

#shartor-scroll-section-01 .sc-finish strong {
    font-size: 14vw;
  }
}

@media (prefers-reduced-motion: reduce) {
#shartor-scroll-section-01 .sc-flame,
  #shartor-scroll-section-01 .sc-station.active > i,
  #shartor-scroll-section-01 .sc-ascent-status i,
  #shartor-scroll-section-01 .sc-scroll-prompt > i b {
    animation: none;
  }
}

#shartor-scroll-section-01 {
  --sc-red: #e30613;
  --sc-red-dark: #b9000b;
  --sc-soft: #f6f6f6;
  --sc-black: #050505;
  --sc-white: #FFFFFF;
  --sc-muted: #A0A0A0;
  background: #050505;
}

#shartor-scroll-section-01 .sc-sticky {
  background:
    radial-gradient(circle at 50% 53%, rgba(227,6,19,.105), transparent 27%),
    #050505;
}

#shartor-scroll-section-01 .sc-space-b {
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 78px 78px;
}

#shartor-scroll-section-01 .sc-orbit {
  border-color: rgba(255,255,255,.11);
}

#shartor-scroll-section-01 .sc-orbit::before {
  border-color: rgba(227,6,19,.2);
}

#shartor-scroll-section-01 .sc-halo {
  border-color: rgba(227,6,19,.16);
  box-shadow:
    inset 0 0 190px rgba(227,6,19,.045),
    0 0 170px rgba(227,6,19,.05);
}

#shartor-scroll-section-01 .sc-halo::before {
  border-color: rgba(255,255,255,.07);
}

#shartor-scroll-section-01 .sc-halo::after {
  border-color: rgba(227,6,19,.14);
}

#shartor-scroll-section-01 .sc-intro {
  color: #050505;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(227,6,19,.08) 47% 48%, transparent 48%),
    linear-gradient(90deg, #FFFFFF 0 72%, #050505 72% 100%);
}

#shartor-scroll-section-01 .sc-intro::after {
  content: "01";
  position: absolute;
  right: 3.4vw;
  top: 50%;
  color: transparent;
  font-size: clamp(120px, 16vw, 300px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.1em;
  -webkit-text-stroke: 1px rgba(255,255,255,.24);
  transform: translateY(-50%);
  pointer-events: none;
}

#shartor-scroll-section-01 .sc-intro-copy {
  left: 43%;
  width: min(1080px, 82vw);
  padding: clamp(38px, 5vw, 74px);
  border: 2px solid #050505;
  background: #FFFFFF;
  box-shadow: 16px 16px 0 #e30613;
  text-align: left;
}

#shartor-scroll-section-01 .sc-intro-copy::before {
  display: none;
}

#shartor-scroll-section-01 .sc-kicker {
  justify-content: flex-start;
  gap: 13px;
  margin-bottom: 25px;
  color: #e30613;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .21em;
}

#shartor-scroll-section-01 .sc-kicker i {
  width: 42px;
  height: 3px;
  background: #e30613;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-kicker i:last-child {
  display: none;
}

#shartor-scroll-section-01 .sc-intro h1 {
  color: #050505;
  font-size: clamp(68px, 7vw, 118px);
  font-weight: 850;
  line-height: .86;
  letter-spacing: -.075em;
}

#shartor-scroll-section-01 .sc-intro h1 em {
  display: inline-block;
  padding: 0 .09em .07em;
  color: #FFFFFF;
  background: #e30613;
  box-shadow: 8px 8px 0 #050505;
  text-shadow: none;
  transform: rotate(-1deg);
}

#shartor-scroll-section-01 .sc-intro-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-top: 31px;
  padding-top: 23px;
  border-top: 1px solid rgba(0,0,0,.2);
}

#shartor-scroll-section-01 .sc-intro-detail p {
  color: #242424;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 540;
}

#shartor-scroll-section-01 .sc-scroll-prompt {
  align-items: flex-end;
  gap: 8px;
  margin-top: 0;
  color: #050505;
  font-size: 7px;
  font-weight: 850;
}

#shartor-scroll-section-01 .sc-scroll-prompt > i {
  width: 54px;
  height: 3px;
  background: #050505;
}

#shartor-scroll-section-01 .sc-scroll-prompt > i b {
  left: -45%;
  top: 0;
  width: 45%;
  height: 3px;
  background: #e30613;
  box-shadow: none;
  animation-name: scScrollAcrossV40Section01Original;
}

@keyframes scScrollAcrossV40Section01Original {
  to { transform: translateX(320%); }
}

#shartor-scroll-section-01 .sc-vignette {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.52), transparent 13%, transparent 86%, rgba(0,0,0,.72));
}

#shartor-scroll-section-01 .sc-ghost {
  -webkit-text-stroke-color: rgba(255,255,255,.105);
  opacity: .88;
  font-weight: 800;
}

#shartor-scroll-section-01 .sc-chapter-no {
  -webkit-text-stroke-color: rgba(227,6,19,.18);
}

#shartor-scroll-section-01 .sc-journey-label {
  color: rgba(255,255,255,.68);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
}

#shartor-scroll-section-01 .sc-journey-label i {
  width: 52px;
  height: 3px;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-journey-label b {
  color: rgba(255,255,255,.38);
  font-weight: 750;
}

#shartor-scroll-section-01 .sc-ascent-status,
#shartor-scroll-section-01 .sc-coordinate small {
  color: rgba(255,255,255,.46);
  font-weight: 700;
}

#shartor-scroll-section-01 .sc-coordinate b {
  color: rgba(255,255,255,.74);
  font-weight: 700;
}

#shartor-scroll-section-01 .sc-axis {
  width: 2px;
  background: linear-gradient(to top, #e30613, rgba(255,255,255,.42) 58%, rgba(255,255,255,.08));
}

#shartor-scroll-section-01 .sc-axis-live {
  width: 3px;
  background: linear-gradient(to top, #b9000b, #e30613 52%, #FFFFFF);
}

#shartor-scroll-section-01 .sc-station > i {
  border-color: rgba(255,255,255,.26);
}

#shartor-scroll-section-01 .sc-station > b {
  background: #FFFFFF;
  box-shadow: 0 0 0 4px #050505;
}

#shartor-scroll-section-01 .sc-station.passed > b,
#shartor-scroll-section-01 .sc-station.active > b {
  background: #e30613;
  box-shadow: 0 0 0 4px #050505, 0 0 18px #e30613;
}

#shartor-scroll-section-01 .sc-copy {
  width: min(36vw, 585px);
  padding: clamp(25px, 2.1vw, 36px);
  border: 2px solid #050505;
  background: #FFFFFF;
  box-shadow: 12px 12px 0 #e30613;
}

#shartor-scroll-section-01 .sc-copy-rule {
  height: 2px;
  margin-bottom: 23px;
  background: rgba(0,0,0,.16);
}

#shartor-scroll-section-01 .sc-copy-rule i {
  width: 92px;
  height: 3px;
  background: #e30613;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-copy-rule span {
  width: 7px;
  height: 7px;
  margin-left: -3px;
  background: #050505;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-meta b {
  color: #e30613;
  font-size: 18px;
  font-weight: 950;
  text-shadow: none;
}

#shartor-scroll-section-01 .sc-meta small {
  color: #5F5F5F;
  font-weight: 850;
  letter-spacing: .2em;
}

#shartor-scroll-section-01 .sc-copy h2 {
  margin: 23px 0 15px;
  color: #050505;
  font-size: clamp(36px, 3.3vw, 62px);
  font-weight: 820;
  line-height: .92;
  letter-spacing: -.065em;
}

#shartor-scroll-section-01 .sc-copy p {
  color: #303030;
  font-size: clamp(12px, .9vw, 14px);
  font-weight: 520;
  line-height: 1.68;
}

#shartor-scroll-section-01 .sc-tags {
  margin-top: 21px;
}

#shartor-scroll-section-01 .sc-tags span {
  color: #252525;
  font-weight: 820;
  letter-spacing: .16em;
}

#shartor-scroll-section-01 .sc-tags i {
  background: #e30613;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-index button {
  color: rgba(255,255,255,.38);
}

#shartor-scroll-section-01 .sc-index i {
  height: 2px;
  background: rgba(255,255,255,.25);
}

#shartor-scroll-section-01 .sc-index button.active {
  color: #FFFFFF;
  font-weight: 900;
}

#shartor-scroll-section-01 .sc-index button.active i {
  width: 44px;
  height: 3px;
  background: #e30613;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-finish small {
  color: rgba(255,255,255,.58);
  font-weight: 800;
}

#shartor-scroll-section-01 .sc-finish strong {
  color: #FFFFFF;
  font-weight: 820;
}

#shartor-scroll-section-01 .sc-finish em {
  display: inline-block;
  padding: 0 .08em .07em;
  color: #FFFFFF;
  background: #e30613;
  font-style: normal;
  box-shadow: 9px 9px 0 #FFFFFF;
  transform: rotate(-1deg);
}

#shartor-scroll-section-01 .sc-finish a {
  padding: 18px 24px;
  border: 2px solid #e30613;
  color: #FFFFFF;
  background: #e30613;
  font-weight: 900;
  box-shadow: 8px 8px 0 #FFFFFF;
}

#shartor-scroll-section-01 .sc-finish a:hover {
  color: #050505;
  background: #FFFFFF;
  box-shadow: 12px 12px 0 #e30613;
  transform: translate(-3px,-3px);
}

@media (max-width: 1050px) {
#shartor-scroll-section-01 .sc-intro-copy {
    left: 50%;
    width: min(880px, 86vw);
  }

#shartor-scroll-section-01 .sc-intro {
    background:
      linear-gradient(135deg, transparent 0 47%, rgba(227,6,19,.07) 47% 48%, transparent 48%),
      #FFFFFF;
  }

#shartor-scroll-section-01 .sc-intro::after {
    display: none;
  }

#shartor-scroll-section-01 .sc-copy {
    width: auto;
  }
}

@media (max-width: 700px) {
#shartor-scroll-section-01 .sc-intro-copy {
    left: 50%;
    width: calc(100vw - 32px);
    padding: 28px 24px 30px;
    box-shadow: 9px 9px 0 #e30613;
  }

#shartor-scroll-section-01 .sc-kicker {
    font-size: 6px;
  }

#shartor-scroll-section-01 .sc-kicker i {
    width: 24px;
    height: 2px;
  }

#shartor-scroll-section-01 .sc-intro h1 {
    font-size: clamp(43px, 13vw, 66px);
    line-height: .91;
  }

#shartor-scroll-section-01 .sc-intro h1 em {
    box-shadow: 5px 5px 0 #050505;
  }

#shartor-scroll-section-01 .sc-intro-detail {
    grid-template-columns: 1fr;
    gap: 18px;
  }

#shartor-scroll-section-01 .sc-scroll-prompt {
    align-items: flex-start;
  }

#shartor-scroll-section-01 .sc-copy {
    left: 89px;
    right: 15px;
    bottom: 26px;
    padding: 19px 18px 17px;
    border-width: 1px;
    box-shadow: 7px 7px 0 #e30613;
  }

#shartor-scroll-section-01 .sc-copy-rule {
    margin-bottom: 14px;
  }

#shartor-scroll-section-01 .sc-copy h2 {
    margin: 13px 0 9px;
    font-size: clamp(26px, 7.7vw, 38px);
  }

#shartor-scroll-section-01 .sc-copy p {
    font-size: 10.5px;
  }

#shartor-scroll-section-01 .sc-tags {
    margin-top: 12px;
  }

#shartor-scroll-section-01 .sc-finish em {
    box-shadow: 5px 5px 0 #FFFFFF;
  }
}

#shartor-scroll-section-01 .sc-journey {
  z-index: 20;
  color: #050505;
  background:
    linear-gradient(rgba(5,5,5,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,5,5,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 52%, rgba(227,6,19,.12), transparent 29%),
    #f6f6f6;
  background-size: 78px 78px, 78px 78px, auto, auto;
}

#shartor-scroll-section-01 .sc-ghost {
  -webkit-text-stroke-color: rgba(5,5,5,.13);
  opacity: 1;
}

#shartor-scroll-section-01 .sc-chapter-no {
  -webkit-text-stroke-color: rgba(227,6,19,.22);
  opacity: .9;
}

#shartor-scroll-section-01 .sc-journey-label {
  color: rgba(5,5,5,.7);
}

#shartor-scroll-section-01 .sc-journey-label i {
  background: #e30613;
  box-shadow: none;
}

#shartor-scroll-section-01 .sc-journey-label b {
  color: rgba(5,5,5,.44);
}

#shartor-scroll-section-01 .sc-ascent-status,
#shartor-scroll-section-01 .sc-coordinate small {
  color: rgba(5,5,5,.48);
}

#shartor-scroll-section-01 .sc-coordinate b {
  color: #050505;
}

#shartor-scroll-section-01 .sc-axis {
  background: linear-gradient(to top,
    rgba(5,5,5,.8),
    rgba(5,5,5,.36) 58%,
    rgba(5,5,5,.1));
}

#shartor-scroll-section-01 .sc-axis-live {
  background: linear-gradient(to top, #b9000b, #e30613 58%, #050505);
}

#shartor-scroll-section-01 .sc-axis-flare {
  background: linear-gradient(to top, rgba(227,6,19,.32), transparent 74%);
}

#shartor-scroll-section-01 .sc-station > i {
  border-color: rgba(5,5,5,.24);
}

#shartor-scroll-section-01 .sc-station > b {
  background: #050505;
  box-shadow: 0 0 0 4px #f6f6f6;
}

#shartor-scroll-section-01 .sc-station.passed > b,
#shartor-scroll-section-01 .sc-station.active > b {
  background: #e30613;
  box-shadow:
    0 0 0 4px #f6f6f6,
    0 0 0 6px #050505;
}

#shartor-scroll-section-01 .sc-target-ring {
  border-color: rgba(227,6,19,.3);
}

#shartor-scroll-section-01 .sc-target-ring::before {
  border-color: rgba(5,5,5,.2);
}

#shartor-scroll-section-01 .sc-target-ring::after {
  background: linear-gradient(to bottom, transparent, rgba(5,5,5,.24), transparent);
}

#shartor-scroll-section-01 .sc-rocket-aura {
  background: radial-gradient(circle,
    rgba(227,6,19,.3),
    rgba(227,6,19,.08) 44%,
    transparent 72%);
}

#shartor-scroll-section-01 .sc-copy {
  border-color: #050505;
  color: #ffffff;
  background: #050505;
  box-shadow: 12px 12px 0 #e30613;
}

#shartor-scroll-section-01 .sc-copy-rule {
  background: rgba(255,255,255,.16);
}

#shartor-scroll-section-01 .sc-copy-rule i {
  background: #e30613;
}

#shartor-scroll-section-01 .sc-copy-rule span {
  background: #ffffff;
}

#shartor-scroll-section-01 .sc-meta b {
  color: #e30613;
}

#shartor-scroll-section-01 .sc-meta small {
  color: rgba(255,255,255,.52);
}

#shartor-scroll-section-01 .sc-copy h2 {
  color: #ffffff;
}

#shartor-scroll-section-01 .sc-copy p {
  color: rgba(255,255,255,.66);
}

#shartor-scroll-section-01 .sc-tags span {
  color: rgba(255,255,255,.72);
}

#shartor-scroll-section-01 .sc-tags i {
  background: #e30613;
}

#shartor-scroll-section-01 .sc-index button {
  color: rgba(5,5,5,.42);
}

#shartor-scroll-section-01 .sc-index i {
  background: rgba(5,5,5,.28);
}

#shartor-scroll-section-01 .sc-index button.active {
  color: #050505;
}

#shartor-scroll-section-01 .sc-index button.active i {
  background: #e30613;
  box-shadow: none;
}

@media (max-width: 700px) {
#shartor-scroll-section-01 .sc-journey {
    background:
      linear-gradient(rgba(5,5,5,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(5,5,5,.04) 1px, transparent 1px),
      radial-gradient(circle at 45% 48%, rgba(227,6,19,.11), transparent 35%),
      #f6f6f6;
    background-size: 48px 48px, 48px 48px, auto, auto;
  }
}

@media (min-width: 1600px) {
#shartor-scroll-section-01 .sc-intro-copy {
    left: 43%;
    width: 71vw;
    max-width: none;
    padding: clamp(74px, min(4.82vw, 8.2vh), 190px);
    box-shadow:
      clamp(16px, 1.05vw, 40px)
      clamp(16px, 1.05vw, 40px)
      0 #e30613;
  }

#shartor-scroll-section-01 .sc-intro::after {
    font-size: 16vw;
  }

#shartor-scroll-section-01 .sc-kicker {
    gap: clamp(13px, .85vw, 32px);
    margin-bottom: clamp(25px, 1.63vw, 63px);
    font-size: clamp(10px, min(.65vw, 1.2vh), 24px);
  }

#shartor-scroll-section-01 .sc-kicker i {
    width: clamp(42px, 2.75vw, 106px);
    height: clamp(3px, .16vw, 6px);
  }

#shartor-scroll-section-01 .sc-intro h1 {
    font-size: clamp(112px, min(7vw, 13vh), 300px);
  }

#shartor-scroll-section-01 .sc-intro h1 em {
    box-shadow:
      clamp(8px, .52vw, 20px)
      clamp(8px, .52vw, 20px)
      0 #050505;
  }

#shartor-scroll-section-01 .sc-intro-detail {
    gap: clamp(30px, 1.95vw, 75px);
    margin-top: clamp(31px, 2.02vw, 78px);
    padding-top: clamp(23px, 1.5vw, 58px);
  }

#shartor-scroll-section-01 .sc-intro-detail p {
    font-size: clamp(16px, min(1vw, 1.75vh), 34px);
  }

#shartor-scroll-section-01 .sc-scroll-prompt {
    gap: clamp(8px, .52vw, 20px);
    font-size: clamp(7px, .46vw, 18px);
  }

#shartor-scroll-section-01 .sc-scroll-prompt > i {
    width: clamp(54px, 3.52vw, 135px);
    height: clamp(3px, .2vw, 8px);
  }

#shartor-scroll-section-01 .sc-scroll-prompt > i b {
    height: 100%;
  }
}

@media (max-width: 700px) {
#shartor-scroll-section-01 .sc-sticky{
    min-height: 610px;
  }

#shartor-scroll-section-01 .sc-journey-label{
    left: 18px;
    top: 74px;
    gap: 10px;
    max-width: calc(100% - 74px);
  }

#shartor-scroll-section-01 .sc-journey-label span{
    white-space: nowrap;
    font-size: 6.5px;
    letter-spacing: .20em;
  }

#shartor-scroll-section-01 .sc-journey-label i{
    width: 34px;
    height: 2px;
    flex: 0 0 34px;
  }

#shartor-scroll-section-01 .sc-ghost-wrap{
    align-items: flex-start;
    justify-content: flex-start;
    padding: 128px 14px 0 94px;
  }

#shartor-scroll-section-01 .sc-ghost{
    width: calc(100vw - 108px);
    max-width: calc(100vw - 108px);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(54px, 15vw, 76px);
    line-height: .84;
    letter-spacing: -.065em;
    opacity: .48;
  }

#shartor-scroll-section-01 .sc-lane{
    left: 42px;
    top: 17%;
    bottom: 15%;
    width: 72px;
  }

#shartor-scroll-section-01 .sc-station{
    width: 24px;
    height: 24px;
  }

#shartor-scroll-section-01 .sc-station > b{
    left: 9px;
    top: 9px;
  }

#shartor-scroll-section-01 .sc-rocket{
    width: 60px;
    height: 90px;
  }

#shartor-scroll-section-01 .sc-rocket svg{
    left: 5px;
    top: -6px;
    width: 50px;
    height: 86px;
  }

#shartor-scroll-section-01 .sc-rocket-aura{
    width: 112px;
    height: 112px;
  }

#shartor-scroll-section-01 .sc-target-ring{
    width: 78px;
    height: 78px;
  }

#shartor-scroll-section-01 .sc-copy,
  #shartor-scroll-section-01 .sc-copy-right,
  #shartor-scroll-section-01 .sc-copy-left{
    left: 92px !important;
    right: 14px !important;
    top: 54% !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 17px 16px 15px;
    border-width: 1px;
    box-shadow: 6px 6px 0 #e30613;
    text-align: left !important;
    transform: translateY(-50%) !important;
  }

#shartor-scroll-section-01 .sc-copy.is-visible{
    transform: translateY(-50%) !important;
  }

#shartor-scroll-section-01 .sc-copy.is-changing{
    transform: translateY(calc(-50% + 10px)) !important;
  }

#shartor-scroll-section-01 .sc-copy-rule{
    margin-bottom: 12px;
  }

#shartor-scroll-section-01 .sc-copy-rule i{
    width: 54px;
  }

#shartor-scroll-section-01 .sc-meta{
    gap: 11px;
  }

#shartor-scroll-section-01 .sc-meta b{
    font-size: 16px;
  }

#shartor-scroll-section-01 .sc-meta small{
    font-size: 6.5px;
    letter-spacing: .17em;
    line-height: 1.25;
  }

#shartor-scroll-section-01 .sc-copy h2{
    margin: 12px 0 8px;
    font-size: clamp(27px, 7.5vw, 35px);
    line-height: .92;
    letter-spacing: -.055em;
  }

#shartor-scroll-section-01 .sc-copy p{
    font-size: 10.5px;
    line-height: 1.52;
  }

#shartor-scroll-section-01 .sc-tags{
    gap: 6px;
    margin-top: 11px;
  }

#shartor-scroll-section-01 .sc-tags span{
    font-size: 5.8px;
    letter-spacing: .13em;
  }

#shartor-scroll-section-01 .sc-tags i{
    width: 3px;
    height: 3px;
  }

#shartor-scroll-section-01 .sc-index{
    right: 7px;
    top: 108px;
    gap: 7px;
    transform: none;
  }

#shartor-scroll-section-01 .sc-index button{
    min-height: 10px;
  }

#shartor-scroll-section-01 .sc-index i{
    width: 10px;
  }

#shartor-scroll-section-01 .sc-index button.active i{
    width: 24px;
  }

@media (max-width: 390px){
#shartor-scroll-section-01 .sc-lane{
      left: 36px;
      width: 64px;
    }

#shartor-scroll-section-01 .sc-copy,
    #shartor-scroll-section-01 .sc-copy-right,
    #shartor-scroll-section-01 .sc-copy-left{
      left: 82px !important;
      right: 10px !important;
      padding: 15px 13px 13px;
    }

#shartor-scroll-section-01 .sc-copy h2{
      font-size: clamp(25px, 7.4vw, 31px);
    }

#shartor-scroll-section-01 .sc-copy p{
      font-size: 9.8px;
    }

#shartor-scroll-section-01 .sc-ghost-wrap{
      padding-left: 82px;
    }

#shartor-scroll-section-01 .sc-ghost{
      width: calc(100vw - 94px);
      max-width: calc(100vw - 94px);
      font-size: clamp(49px, 14.5vw, 66px);
    }
}
}

/* =========================================================
   SECTION EXTRACTION — POSITIONING ONLY, NOT A COMPACT REDESIGN.
   Original title sizes, panel widths/padding, rocket dimensions,
   large-screen rules, mobile rules and scroll length remain above.
   ========================================================= */
#shartor-scroll-section-01 {
  --sc-viewport-width:100%;
  display:block;
  width:var(--sc-viewport-width)!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0 calc((100% - var(--sc-viewport-width))/2)!important;
  padding:0!important;
  border:0;
  overflow:visible!important;
  isolation:isolate;
}
#shartor-scroll-section-01.is-ready {height:920vh!important;}
#shartor-scroll-section-01 .sc-sticky {
  position:sticky!important;
  top:0!important;
  width:100%;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
}
/* Full-screen stage: the header changes safe positions, NEVER font or box sizes. */
#shartor-scroll-section-01 .sc-intro-copy {top:var(--sc-intro-y,50%);}
#shartor-scroll-section-01 .sc-finish {top:var(--sc-finish-y,50%);z-index:40;}
#shartor-scroll-section-01 .sc-energy-core {z-index:30;}
#shartor-scroll-section-01 .sc-copy {
  top:var(--sc-copy-top,54%)!important;
  bottom:auto!important;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(calc(-50% + 10px))!important;
  transition:opacity .35s ease,filter .35s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
#shartor-scroll-section-01 .sc-copy.is-visible {
  visibility:visible;
  opacity:1;
  filter:none;
  transform:translateY(-50%)!important;
}
#shartor-scroll-section-01 .sc-index {right:clamp(6px,.7vw,26px);}
#shartor-scroll-section-01 .sc-index button {min-height:18px;}
#shartor-scroll-section-01 .sc-scroll-prompt {
  border:0;background:transparent;cursor:pointer;line-height:1.2;
}
#shartor-scroll-section-01 button:focus-visible,
#shartor-scroll-section-01 a:focus-visible {outline:3px solid #e30613;outline-offset:5px;}
#shartor-scroll-section-01 [aria-hidden="true"] a {pointer-events:none;}

/* Keep the ORIGINAL panel width on small desktops/tablets.
   Move only the navigation, instead of making the panel narrower. */
@media (min-width:701px) and (max-width:1440px) {
  #shartor-scroll-section-01 .sc-index {
    top:var(--sc-nav-y,40px);right:24px;transform:none;
    flex-direction:row;align-items:center;gap:12px;
  }
  #shartor-scroll-section-01 .sc-index button {min-height:26px;gap:5px;}
  #shartor-scroll-section-01 .sc-index i {width:12px;}
  #shartor-scroll-section-01 .sc-index button.active i {width:24px;}
}
@media (max-width:700px) {
  #shartor-scroll-section-01.is-ready {height:840vh!important;}
  #shartor-scroll-section-01 .sc-copy,
  #shartor-scroll-section-01 .sc-copy-left,
  #shartor-scroll-section-01 .sc-copy-right {top:var(--sc-copy-top,54%)!important;}
  #shartor-scroll-section-01 .sc-index {right:7px;}
}

/* On short phones, reserve a row above the panel for chapter navigation.
   Card width, typography and rocket size are deliberately unchanged. */
@media (max-width:700px) and (max-height:740px) {
  #shartor-scroll-section-01 .sc-index {
    left:82px;right:14px;top:var(--sc-nav-y,110px);
    flex-direction:row;justify-content:space-between;align-items:center;gap:4px;
  }
  #shartor-scroll-section-01 .sc-index button {width:26px;min-height:26px;justify-content:center;}
}

/* Native-flow fallback for disabled JS, reduced motion, or very short landscapes.
   Content stays full size and readable; it is never miniaturised to fit. */
#shartor-scroll-section-01:not(.is-ready) .sc-sticky {
  position:relative!important;top:0!important;height:auto!important;
}
#shartor-scroll-section-01:not(.is-ready) .sc-intro {
  position:relative;padding:48px 0;opacity:1!important;filter:none!important;
}
#shartor-scroll-section-01:not(.is-ready) .sc-intro-copy {
  position:relative;top:auto;left:auto;margin:0 auto;transform:none!important;
}
#shartor-scroll-section-01:not(.is-ready) .sc-intro-detail,
#shartor-scroll-section-01:not(.is-ready) .sc-intro h1 span {opacity:1!important;transform:none!important;}
#shartor-scroll-section-01:not(.is-ready) .sc-scroll-prompt,
#shartor-scroll-section-01:not(.is-ready) .sc-energy-core,
#shartor-scroll-section-01:not(.is-ready) .sc-ghost-wrap,
#shartor-scroll-section-01:not(.is-ready) .sc-chapter-no,
#shartor-scroll-section-01:not(.is-ready) .sc-journey-label,
#shartor-scroll-section-01:not(.is-ready) .sc-lane,
#shartor-scroll-section-01:not(.is-ready) .sc-index,
#shartor-scroll-section-01:not(.is-ready) .sc-ascent-status,
#shartor-scroll-section-01:not(.is-ready) .sc-coordinate {display:none;}
#shartor-scroll-section-01:not(.is-ready) .sc-journey {
  position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  padding:40px max(22px,calc((100% - 1320px)/2));gap:36px;
  opacity:1!important;filter:none!important;transform:none!important;
}
#shartor-scroll-section-01:not(.is-ready) .sc-copy {
  position:relative;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;max-width:none!important;visibility:visible!important;
  opacity:1!important;filter:none!important;transform:none!important;text-align:left!important;
}
#shartor-scroll-section-01:not(.is-ready) .sc-meta,
#shartor-scroll-section-01:not(.is-ready) .sc-tags {justify-content:flex-start;}
#shartor-scroll-section-01:not(.is-ready) .sc-finish {
  position:relative;left:auto;top:auto;width:100%;padding:54px 24px;
  opacity:1!important;filter:none!important;transform:none!important;pointer-events:auto;
}
@media (max-width:700px) {
  #shartor-scroll-section-01:not(.is-ready) .sc-journey {grid-template-columns:1fr;padding:32px 20px;gap:30px;}
}
@media (prefers-reduced-motion:reduce) {
  #shartor-scroll-section-01 *,#shartor-scroll-section-01 *::before,#shartor-scroll-section-01 *::after {
    animation:none!important;transition:none!important;scroll-behavior:auto!important;
  }
}


/* WordPress runtime: positioning only. Original font sizes, cards and rocket retained. */
#shartor-scroll-section-01.is-ready.sc-wp-managed > .sc-sticky {
  height: var(--sc-stage-height,100dvh) !important;
}
#shartor-scroll-section-01:not(.is-ready) .sc-wp-motion-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; position: relative; z-index: 50; width: 100%;
  padding: 14px 20px; background: #050505; color: #fff;
  font: 14px/1.5 Inter,Arial,Helvetica,sans-serif; text-align: center;
}
#shartor-scroll-section-01.is-ready .sc-wp-motion-note {display:none;}
#shartor-scroll-section-01 .sc-wp-motion-note button {
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 16px;border:1px solid #fff;background:#fff;color:#050505;
  font:700 13px/1.4 Inter,Arial,Helvetica,sans-serif;cursor:pointer;
}
#shartor-scroll-section-01 .sc-wp-motion-note button:hover,
#shartor-scroll-section-01 .sc-wp-motion-note button:focus-visible {
  color:#fff;background:#DC0000;outline:2px solid #fff;outline-offset:3px;
}
#shartor-scroll-section-01 .sc-wp-debug {
  display:block; position:fixed; z-index:999999; bottom:12px; left:12px;
  max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid #e30613;
  background:#050505; color:#fff; font:12px/1.5 monospace;
  white-space:pre-wrap; pointer-events:none;
}
/* On a short viewport reduce whitespace, never typography, instead of silently
   disabling the entire animation at the old 480px threshold. */
#shartor-scroll-section-01.is-ready.sc-low-height .sc-intro-copy {padding:20px 26px;}
#shartor-scroll-section-01.is-ready.sc-low-height .sc-kicker {margin-bottom:12px;}
#shartor-scroll-section-01.is-ready.sc-low-height .sc-intro-detail {margin-top:14px;padding-top:12px;gap:14px;}
#shartor-scroll-section-01.is-ready.sc-low-height .sc-copy {padding:16px 20px;}
#shartor-scroll-section-01.is-ready.sc-low-height .sc-copy-rule {margin-bottom:12px;}
#shartor-scroll-section-01.is-ready.sc-low-height .sc-copy h2 {margin-top:12px;margin-bottom:10px;}
#shartor-scroll-section-01.is-ready.sc-low-height .sc-tags {margin-top:10px;}
