.experience{
  padding-top:calc(26 * var(--design-unit));
  color:#1d2634;
  scroll-margin-top:calc(90 * var(--design-unit));
}

.e-index{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(9 * var(--design-unit));
  color:#697789;
  font-size:calc(13 * var(--design-unit));
  line-height:1.35;
  font-weight:400;
  letter-spacing:0;
  text-transform:uppercase;
}
.e-index i{width:calc(24 * var(--design-unit));height:1px;background:#cbd8e5}
.e-heading{
  width:min(100%,calc(1066 * var(--design-unit)));
  margin:0 auto calc(32 * var(--design-unit));
  padding:0;
  text-align:center;
}
.e-heading .e-index{display:none}
.experience-title-svg{width:calc(295 * var(--design-unit));margin:0 auto}
.remix-title-svg{width:calc(295 * var(--design-unit));margin:calc(12 * var(--design-unit)) auto 0}
.origin-title-svg{width:calc(295 * var(--design-unit));margin:calc(12 * var(--design-unit)) 0 0}
.partners-title-svg{width:calc(131 * var(--design-unit));margin:calc(8 * var(--design-unit)) auto 0}
.finale-title-svg{width:calc(361 * var(--design-unit));margin:0 auto}
.e-heading h2{
  margin:0;
  color:#222b38;
  font-size:calc(33 * var(--design-unit));
  line-height:1.38;
  font-weight:800;
  letter-spacing:0;
}
.e-heading p{
  margin:calc(12 * var(--design-unit)) auto 0;
  color:#6d7a8a;
  font-size:calc(13 * var(--design-unit));
  line-height:1.8;
  max-width:calc(476 * var(--design-unit));
}

.e-worlds{
  width:min(100%,calc(1066 * var(--design-unit)));
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:2.15fr 1fr 1fr;
  gap:calc(16 * var(--design-unit));
}
.e-world{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:calc(341 * var(--design-unit));
  padding:calc(13 * var(--design-unit)) calc(13 * var(--design-unit)) 0;
  border-radius:calc(8 * var(--design-unit));
  background:#fff;
  overflow:hidden;
  color:#1f2937;
  box-shadow:0 calc(10 * var(--design-unit)) calc(24 * var(--design-unit)) rgba(63,112,164,.11);
  transition:transform .18s ease,box-shadow .18s ease;
}
.e-world:hover{transform:translateY(-3px);box-shadow:0 calc(16 * var(--design-unit)) calc(32 * var(--design-unit)) rgba(63,112,164,.15)}
.e-world-art{
  display:block;
  width:100%;
  height:calc(264 * var(--design-unit));
  border-radius:calc(7 * var(--design-unit));
  object-fit:cover;
  background:#edf3f8;
}
.e-sound .e-world-art{object-position:center 42%}
.e-motion .e-world-art{object-position:center}
.e-ideas .e-world-art{object-fit:contain;padding:calc(26 * var(--design-unit));background:#f4f8fb}
.e-world-bottom{
  min-height:calc(64 * var(--design-unit));
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(32 * var(--design-unit));
  align-items:center;
  gap:calc(12 * var(--design-unit));
  padding:calc(10 * var(--design-unit)) 0 calc(12 * var(--design-unit));
  background:#fff;
}
.e-world-bottom h3{
  margin:0;
  color:#222b38;
  font-size:calc(16 * var(--design-unit));
  line-height:1.38;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  grid-column:1;
  grid-row:1;
}
.e-world-bottom p{
  margin:calc(3 * var(--design-unit)) 0 0;
  color:#788697;
  font-size:calc(12 * var(--design-unit));
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  grid-column:1;
  grid-row:2;
}
.e-world-bottom>span{
  width:calc(32 * var(--design-unit));
  height:calc(32 * var(--design-unit));
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dde8f2;
  border-radius:50%;
  color:#8fa0b2;
  font-size:calc(20 * var(--design-unit));
  grid-column:2;
  grid-row:1 / 3;
}

.e-remix{
  margin-top:calc(67 * var(--design-unit));
  padding:calc(40 * var(--design-unit)) 0;
  background:linear-gradient(180deg,#f7fbff,#fbfdff 72%,#fff);
}
.e-remix-copy{
  width:min(100%,calc(1066 * var(--design-unit)));
  margin:0 auto;
  padding:0;
  text-align:center;
}
.e-remix-copy h2{
  margin:calc(12 * var(--design-unit)) 0 0;
  color:#222b38;
  font-size:calc(33 * var(--design-unit));
  line-height:1.38;
  font-weight:800;
  letter-spacing:0;
}
.e-remix-copy h2 span,.e-origin-copy h2 span,.e-finale h2 span{color:#1788ef}
.e-remix-copy>p{
  margin:calc(11 * var(--design-unit)) auto 0;
  max-width:calc(450 * var(--design-unit));
  color:#6d7a8a;
  font-size:calc(13 * var(--design-unit));
  line-height:1.8;
}
.e-prompt{
  position:relative;
  width:calc(221 * var(--design-unit));
  min-height:calc(53 * var(--design-unit));
  margin:calc(16 * var(--design-unit)) auto 0;
  padding:calc(8 * var(--design-unit)) calc(26 * var(--design-unit)) calc(8 * var(--design-unit)) calc(14 * var(--design-unit));
  border:1px solid #dce9f5;
  border-radius:calc(6 * var(--design-unit));
  background:rgba(255,255,255,.78);
  color:#657589;
}
.e-prompt-label{display:block;color:#8f9cad;font-size:calc(11 * var(--design-unit));line-height:1.35}
.e-prompt p{margin:calc(3 * var(--design-unit)) 0 0;font-size:calc(12 * var(--design-unit));line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-prompt-mark{position:absolute;right:calc(10 * var(--design-unit));bottom:calc(8 * var(--design-unit));color:#a0afbf}
.e-palette{
  display:flex;
  justify-content:center;
  gap:calc(9 * var(--design-unit));
  margin-top:calc(13 * var(--design-unit));
}
.e-palette button{
  min-width:calc(61 * var(--design-unit));
  min-height:calc(28 * var(--design-unit));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(6 * var(--design-unit));
  padding:0 calc(12 * var(--design-unit));
  border:1px solid #dce8f5;
  border-radius:calc(999 * var(--design-unit));
  background:#fff;
  color:#6d7d90;
  font-size:calc(12 * var(--design-unit));
  cursor:pointer;
}
.e-palette button[aria-pressed=true]{border-color:#97c9f6;background:#e9f5ff;color:#147dde}
.e-palette i{width:calc(9 * var(--design-unit));height:calc(9 * var(--design-unit));border-radius:50%;display:block}
.swatch-ocean{background:#32768f}.swatch-sunset{background:#d08352}.swatch-mono{background:#737985}
.e-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(18 * var(--design-unit));
  min-height:calc(43 * var(--design-unit));
  padding:0 calc(22 * var(--design-unit));
  border:0;
  border-radius:calc(999 * var(--design-unit));
  background:#1788ef;
  color:#fff;
  font-size:calc(15 * var(--design-unit));
  line-height:1;
  font-weight:700;
  box-shadow:0 calc(8 * var(--design-unit)) calc(18 * var(--design-unit)) rgba(23,136,239,.18);
}
.e-primary:hover{background:#0b76d9}
.e-remix-copy .e-primary{margin-top:calc(15 * var(--design-unit))}

.e-remix-demo{
  width:min(100%,calc(1066 * var(--design-unit)));
  margin:calc(25 * var(--design-unit)) auto 0;
  overflow:hidden;
  border-radius:calc(8 * var(--design-unit));
  background:#fff;
  box-shadow:0 calc(12 * var(--design-unit)) calc(30 * var(--design-unit)) rgba(65,111,160,.10);
}
.e-demo-top{
  min-height:calc(50 * var(--design-unit));
  padding:calc(16 * var(--design-unit));
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#677689;
  font-size:calc(13 * var(--design-unit));
}
.e-comparison{
  position:relative;
  height:calc(533 * var(--design-unit));
  overflow:hidden;
  background:#101722;
}
.e-original,.e-changed img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.e-changed{
  position:absolute;
  inset:0;
  clip-path:inset(0 0 0 var(--split));
  overflow:hidden;
}
.e-changed img{filter:hue-rotate(110deg) saturate(.75) brightness(.86);transition:filter .2s}
.e-original-tag,.e-remix-tag{
  position:absolute;
  z-index:3;
  top:calc(14 * var(--design-unit));
  padding:calc(4 * var(--design-unit)) calc(9 * var(--design-unit));
  border-radius:calc(999 * var(--design-unit));
  background:rgba(255,255,255,.78);
  color:#223045;
  font-size:calc(11 * var(--design-unit));
}
.e-original-tag{left:calc(14 * var(--design-unit))}.e-remix-tag{right:calc(14 * var(--design-unit))}
.e-compare-line{
  position:absolute;
  left:var(--split);
  top:0;
  bottom:0;
  z-index:4;
  border-left:1px solid rgba(255,255,255,.95);
  pointer-events:none;
}
.e-compare-line>span{
  position:absolute;
  left:-31px;
  top:50%;
  width:calc(62 * var(--design-unit));
  height:calc(62 * var(--design-unit));
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:#1f2c3c;
  font-size:calc(19 * var(--design-unit));
  box-shadow:0 calc(8 * var(--design-unit)) calc(24 * var(--design-unit)) rgba(18,39,63,.16);
}
.e-demo-control{
  min-height:calc(43 * var(--design-unit));
  padding:calc(7 * var(--design-unit)) calc(16 * var(--design-unit)) 0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:calc(14 * var(--design-unit));
  color:#223045;
  font-size:calc(15 * var(--design-unit));
}
.e-demo-control input{width:100%;accent-color:#1788ef;cursor:ew-resize}
.e-demo-bottom{
  min-height:calc(38 * var(--design-unit));
  padding:calc(6 * var(--design-unit)) calc(16 * var(--design-unit)) calc(11 * var(--design-unit));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(16 * var(--design-unit));
  color:#6c7a8c;
  font-size:calc(13 * var(--design-unit));
}
.e-demo-bottom b{font-weight:400;color:#8b98a8}

.e-origin{
  width:min(100%,calc(1066 * var(--design-unit)));
  margin:calc(66 * var(--design-unit)) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:calc(280 * var(--design-unit)) calc(245 * var(--design-unit)) calc(40 * var(--design-unit)) calc(245 * var(--design-unit)) calc(192 * var(--design-unit));
  gap:calc(16 * var(--design-unit));
  align-items:center;
}
.e-origin-copy{text-align:left}
.e-origin-copy .e-index{justify-content:flex-start}
.e-origin-copy h2{
  margin:calc(12 * var(--design-unit)) 0 0;
  color:#222b38;
  font-size:calc(33 * var(--design-unit));
  line-height:1.38;
  font-weight:800;
  letter-spacing:0;
}
.e-origin-copy p{
  margin:calc(13 * var(--design-unit)) 0 0;
  color:#6d7a8a;
  font-size:calc(13 * var(--design-unit));
  line-height:1.8;
}
.e-lineage{display:contents}
.e-origin-work{
  display:block;
  min-width:0;
  height:calc(300 * var(--design-unit));
  overflow:hidden;
  border:1px solid #e3edf7;
  border-radius:calc(8 * var(--design-unit));
  background:#fff;
  box-shadow:0 calc(8 * var(--design-unit)) calc(20 * var(--design-unit)) rgba(63,112,164,.08);
}
.e-origin-art{
  height:calc(211 * var(--design-unit));
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border-bottom:1px solid #edf3f8;
}
.e-origin-art img{width:80%;height:66%;object-fit:contain}
.e-origin-work>div:last-child{padding:calc(13 * var(--design-unit))}
.e-work-type{display:block;color:#8b98a9;font-size:calc(11 * var(--design-unit))}
.e-origin-work h3{
  margin:calc(5 * var(--design-unit)) 0 0;
  color:#263344;
  font-size:calc(16 * var(--design-unit));
  line-height:1.35;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.e-origin-work p{margin:calc(4 * var(--design-unit)) 0 0;color:#7f8d9e;font-size:calc(12 * var(--design-unit));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-lineage-connector{
  text-align:center;
  color:#6f7d8d;
  font-size:calc(9 * var(--design-unit));
  white-space:nowrap;
}
.e-lineage-connector i{display:block;width:100%;height:1px;margin-top:calc(9 * var(--design-unit));background:#bfcede}
.e-lineage-connector b{display:block;margin-top:-9px;color:#8fa2b7;font-size:calc(16 * var(--design-unit));font-weight:400;text-align:right}
.e-lineage-next{
  height:calc(300 * var(--design-unit));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:calc(8 * var(--design-unit));
  background:linear-gradient(180deg,#f3f9ff,#fff);
  border:1px solid #e3edf7;
  color:#6c7d91;
  text-align:center;
  box-shadow:0 calc(8 * var(--design-unit)) calc(20 * var(--design-unit)) rgba(63,112,164,.08);
}
.e-lineage-next>span{font-size:calc(56 * var(--design-unit));line-height:1;color:#1f2d3d;font-weight:300}
.e-lineage-next p{margin:calc(26 * var(--design-unit)) 0 0;font-size:calc(13 * var(--design-unit))}
.e-lineage-next a{margin-top:calc(12 * var(--design-unit));display:inline-flex;align-items:center;justify-content:center;min-height:calc(43 * var(--design-unit));padding:0 calc(20 * var(--design-unit));border-radius:calc(999 * var(--design-unit));background:#1788ef;color:#fff;font-size:calc(15 * var(--design-unit));font-weight:700}

.e-finale{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(267 * var(--design-unit));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:calc(14 * var(--design-unit));
}
.e-finale>span{color:#697789;font-size:calc(13 * var(--design-unit))}
.e-finale:before{content:"";position:absolute;z-index:-1;top:calc(212 * var(--design-unit));left:50%;width:calc(921.33 * var(--design-unit));height:calc(442.67 * var(--design-unit));border-radius:50%;transform:translateX(-50%);background:linear-gradient(90deg,#256af2,#29aafe);opacity:.8;filter:blur(calc(151.33 * var(--design-unit)))}
.e-finale h2{margin:0;color:#222b38;font-size:calc(33 * var(--design-unit));line-height:1.38;font-weight:800}

@media(max-width:900px){
  .e-heading,.e-worlds,.e-remix-copy,.e-origin{width:100%;padding-left:calc(20 * var(--design-unit));padding-right:calc(20 * var(--design-unit))}
  .e-worlds{grid-template-columns:1fr 1fr}
  .e-sound{grid-column:1/-1}
  .e-world{height:calc(320 * var(--design-unit))}
  .e-world-art{height:calc(243 * var(--design-unit))}
  .e-comparison{height:calc(420 * var(--design-unit))}
  .e-origin{grid-template-columns:1fr 1fr;align-items:start}
  .e-origin-copy{grid-column:1/-1;text-align:center}
  .e-origin-copy .e-index{justify-content:center}
  .origin-title-svg{margin-left:auto;margin-right:auto}
  .e-lineage-connector{display:none}
  .e-lineage-next{height:calc(180 * var(--design-unit))}
}

@media(max-width:560px){
  .experience{padding-top:calc(50 * var(--design-unit))}
  .e-heading{margin-bottom:calc(28 * var(--design-unit))}
  .experience-title-svg,.remix-title-svg,.origin-title-svg,.finale-title-svg{width:min(100%,calc(295 * var(--design-unit)))}
  .e-heading p,.e-remix-copy>p,.e-origin-copy p{font-size:calc(12 * var(--design-unit))}
  .e-heading,.e-worlds,.e-remix-copy,.e-origin{padding-left:calc(18 * var(--design-unit));padding-right:calc(18 * var(--design-unit))}
  .e-worlds{grid-template-columns:1fr}
  .e-world{height:calc(302 * var(--design-unit))}
  .e-world-art{height:calc(225 * var(--design-unit))}
  .e-remix{margin-top:calc(48 * var(--design-unit));padding:calc(34 * var(--design-unit)) 0 calc(46 * var(--design-unit))}
  .e-prompt{width:100%;max-width:calc(320 * var(--design-unit))}
  .e-palette{gap:calc(7 * var(--design-unit))}
  .e-palette button{min-height:calc(44 * var(--design-unit));flex:1}
  .e-remix-copy .e-primary{min-height:calc(44 * var(--design-unit));font-size:calc(13 * var(--design-unit))}
  .e-remix-demo{width:calc(100% - calc(36 * var(--design-unit)))}
  .e-demo-top{font-size:calc(10 * var(--design-unit));min-height:calc(42 * var(--design-unit));padding:calc(12 * var(--design-unit))}
  .e-comparison{height:calc(270 * var(--design-unit))}
  .e-compare-line>span{width:calc(42 * var(--design-unit));height:calc(42 * var(--design-unit));left:-21px;font-size:calc(15 * var(--design-unit))}
  .e-demo-control{font-size:calc(12 * var(--design-unit));padding:calc(8 * var(--design-unit)) calc(12 * var(--design-unit)) 0}
  .e-demo-bottom{display:block;font-size:calc(11 * var(--design-unit));padding:calc(6 * var(--design-unit)) calc(12 * var(--design-unit)) calc(12 * var(--design-unit))}
  .e-demo-bottom span:last-child{display:block;margin-top:calc(5 * var(--design-unit))}
  .e-origin{margin-top:calc(46 * var(--design-unit));grid-template-columns:1fr;gap:calc(14 * var(--design-unit))}
  .e-origin-work,.e-lineage-next{height:auto;min-height:calc(230 * var(--design-unit))}
  .e-origin-art{height:calc(160 * var(--design-unit))}
  .e-lineage-next>span{font-size:calc(42 * var(--design-unit))}
  .e-finale{min-height:calc(220 * var(--design-unit));padding:0 calc(18 * var(--design-unit))}
}

@media(prefers-reduced-motion:reduce){
  .experience *{transition:none!important}
}