body:has(.atelier-world) .site-header {
  background: #080810de;
  border-bottom-color: #a99cff29;
}
body:has(.atelier-world) .brand-mark {
  border-radius: 50%;
  background: radial-gradient(circle, #59449785, #0e0b17 72%);
  border-color: #b19beb78;
  color: #efe2ff;
}
#marketing.atelier-world {
  --story-ink: #faf4ff;
  --story-secondary: #cfc5dc;
  --story-gold: #ded0f7;
  --story-line: #b0a1cf3d;
  --atelier-violet: #beabff;
  --atelier-cream: #fff0da;
  background: #080711;
}
.atelier-world .world-stage {
  background: radial-gradient(ellipse at 67% 37%, #180e38 0%, #100d25 32%, #080610 70%, #05040a);
}
.atelier-world .world-stage::before {
  background:
    radial-gradient(1px 1px at 39px 82px, #cdb9fa75 25%, transparent 80%) 0 0 / 179px 193px,
    radial-gradient(1px 1px at 105px 28px, #fbceb57d 30%, transparent 74%) 0 0 / 223px 151px,
    radial-gradient(ellipse at 75% 37%, #8145bb1f, transparent 70%);
}
.atelier-world .world-stage::after { display: none; }
.atelier-world .world-vignette {
  background: linear-gradient(0deg, #080711d6, transparent 30% 75%, #08071183),
    radial-gradient(ellipse at 65% 50%, transparent 35%, #08071160 78%);
}
.atelier-world[data-active-chapter="experiment"] .world-vignette {
  background: linear-gradient(0deg, #080711 0, #08071123 27%, transparent 58%, #08071180);
}
.atelier-world[data-active-chapter="lab"] .world-vignette {
  background: linear-gradient(90deg, #07060fec 0, #0807107d 38%, transparent 61%),
    linear-gradient(0deg, #080711e0, transparent 24% 82%, #08071153);
}
.atelier-world .story-chapter { border-color: #b697ed28; }
.atelier-world h1,
.atelier-world .story-chapter h2 { font-weight: 780; letter-spacing: -.063em; }
.atelier-world :is(h1, h2) em { color: #c4b1fe; font-style: normal; }
.atelier-world .button.primary {
  color: #1d131f;
  border-color: #f8e3f0;
  background: linear-gradient(105deg, #ffece0, #d5bff6 95%);
}
.atelier-world .button.primary:hover { background: #fff1f6; }
.atelier-world .button.outline { border-color: #ac93db73; background: #151022ba; }
.atelier-world .button.outline:hover { background: #2b2145; }
.atelier-world .story-next { color: #eddef7; font-size: 13px; }
.atelier-world button:focus-visible, .atelier-world a:focus-visible { outline-color: #fee0ad; }
#world-motion {
  display: inline-grid;
  width: 40px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d4c4e7;
  font-size: 14px;
}
#world-motion:hover { color: #fff; background: #a592ca1c; }
.site-header .header-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.atelier-world #curriculum { min-height: min(740px, calc(100svh - var(--story-top))); }
.lesson-frame { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 8vw, 145px); align-items: center; }
.lesson-intro p { max-width: 390px; margin: 17px 0 23px; color: #e1d1ef; }
.atelier-world .lesson-list { padding: 12px 23px; border: 1px solid #b6a6df62; border-radius: 7px; background: #100b20dc; }
.atelier-world .lesson-list details:last-child { border-bottom: 0; }
.atelier-world .story-end { background: linear-gradient(180deg,#1009203b,#0b0715db 55%,#090611); }
.atelier-world .story-end .price-card { background: #130d23ed; border-color: #9d80cf6b; }
.atelier-world .story-end .price-card.premium { background: linear-gradient(150deg,#291a42f3,#130b20f6); }

@media (max-width: 810px) {
  .atelier-world[data-active-chapter="lab"] .world-vignette {
    background: linear-gradient(0deg,#080711aa,transparent 24% 59%,#08071155 78%,#080711ad);
  }
  .lesson-frame { grid-template-columns: 1fr; gap: 18px; }
  .atelier-world .lesson-list { padding-inline: 12px; }
}
/* The first scene is an exhibition: choosing a work starts its complete sequence. */
.atelier-world #lab.story-chapter {
  height: auto;
  min-height: max(660px,calc(100svh - var(--story-top)));
  overflow: visible;
  display: grid;
  align-items: center;
  padding-block: 48px 65px;
}
.world-frame { width: min(1240px,calc(100% - 84px)); }
.world-intro { padding-block: 75px; max-width: 650px; }
.atelier-world .world-intro h1 {
  font-size: clamp(52px,7vw,100px);
  letter-spacing: -.072em;
  line-height: 1.09;
}
.atelier-world .world-intro h1 em {
  color: #d9bbff;
  text-shadow: 0 0 42px #9c68ff65;
}
.world-intro > p {
  max-width: 340px;
  margin-top: 18px;
  color: #dacfec;
  font-size: clamp(14px,1.28vw,18px);
  text-wrap: pretty;
}
.world-choices {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  max-width: 575px;
  gap: clamp(11px,2vw,27px);
  margin-top: 42px;
}
.world-choices button {
  --idea: #a4d6ff;
  position: relative;
  display: grid;
  justify-items: start;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #bbacf144;
  background: transparent;
  color: #f4ebff;
  padding: 0 0 12px;
  min-width: 0;
  text-align: left;
  font-size: clamp(15px,1.38vw,21px);
  font-weight: 710;
}
.world-choices button[data-make="castle"] { --idea: #f0cef8; }
.world-choices button[data-make="fairytale"] { --idea: #a6efdc; }
.world-choices button:is(:hover,:focus-visible) { border-color: var(--idea); color: var(--idea); }
.idea-sketch {
  position: relative;
  display: block;
  height: 61px;
  width: 100%;
  max-width: 130px;
  color: var(--idea);
  filter: drop-shadow(0 0 8px currentColor);
  transition: transform .25s ease;
}
.world-choices button:is(:hover,:focus-visible) .idea-sketch { transform: translateY(-3px); }
.idea-sketch i {
  position: absolute;
  bottom: 0;
  display: block;
  border: 1px solid currentColor;
  background: linear-gradient(165deg,color-mix(in srgb,currentColor 23%,transparent),transparent 76%);
}
[data-make="city"] .idea-sketch i { width: 21%; height: 62%; left: 4%; }
[data-make="city"] .idea-sketch i:nth-child(2) { left: 27%; height: 90%; width: 18%; }
[data-make="city"] .idea-sketch i:nth-child(3) { left: 48%; height: 48%; width: 24%; }
[data-make="city"] .idea-sketch i::before {
  content: "";
  position: absolute;
  inset: 17% 19%;
  background: repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 5px);
  opacity: .49;
}
[data-make="castle"] .idea-sketch i { width: 17%; height: 47%; left: 3%; }
[data-make="castle"] .idea-sketch i:nth-child(2) { left: 19%; height: 68%; width: 28%; }
[data-make="castle"] .idea-sketch i:nth-child(3) { left: 47%; }
[data-make="castle"] .idea-sketch i::before {
  position: absolute;
  content: "";
  left: -1px;
  right: -1px;
  bottom: 100%;
  height: 16px;
  background: linear-gradient(95deg,currentColor,transparent 145%);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  opacity: .8;
}
[data-make="fairytale"] .idea-sketch i:first-child {
  left: 0; bottom: 1%; width: 76%; height: 37%; border-radius: 48% 48% 10% 10%;
  transform: skewX(-14deg); clip-path: polygon(0 0,100% 0,87% 53%,49% 100%,17% 60%);
}
[data-make="fairytale"] .idea-sketch i:nth-child(2),
[data-make="fairytale"] .idea-sketch i:nth-child(3) {
  left: 13%; bottom: 43%; width: 24%; height: 27%; border-radius: 100% 100% 20% 20%;
}
[data-make="fairytale"] .idea-sketch i:nth-child(3) { left: 42%; bottom: 43%; width: 30%; height: 37%; }
[data-make="fairytale"] .idea-sketch i:nth-child(n+2)::after {
  position: absolute; content: ""; top: 100%; left: 45%; width: 1px; height: 9px; background: currentColor;
}
.world-experience { display: grid; gap: 12px; }
.experience-header, .experience-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.atelier-world .experience-header h2 { font-size: clamp(33px,5vw,73px); line-height: 1.08; }
.experience-header a, .experience-course {
  flex: none;
  color: #e3cdfc;
  padding-block: 10px;
  font-size: 14px;
}
.experience-header a:hover, .experience-course:hover { color: white; text-decoration: underline; text-underline-offset: 5px; }
.world-experience .creation-view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(290px,62vh,540px);
  border-radius: 0;
  border-block: 1px solid #bfa9f330;
  background: radial-gradient(ellipse at 50% 47%, transparent 43%, #0905127a);
}
.creation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: pan-y;
}
.atelier-world[data-assembly="done"] .creation-canvas { cursor: grab; }
.atelier-world[data-motion="paused"] .creation-canvas { cursor: default; }
.cursor-fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.atelier-world[data-motion="running"]:not([data-live-stage]) .cursor-fallback { display: block; }
.cursor-flight { display: none; }
.atelier-world[data-assembly="read"] [data-flight="read"],
.atelier-world[data-assembly="shape"] [data-flight="shape"],
.atelier-world[data-assembly="test"] [data-flight="test"] { display: block; }
.cursor-worker {
  --cursor-ink: #cbb4ff;
  --arrow: 15px;
  --wait: 0s;
  --time: 1.28s;
  --start: 15%;
  --rise: 23%;
  --via-x: 30%;
  --via-y: 35%;
  --dock-x: 43%;
  --dock-y: 54%;
  position: absolute;
  left: var(--start);
  top: var(--rise);
  width: var(--arrow);
  height: var(--arrow);
  color: var(--cursor-ink);
  opacity: 0;
  animation: cursor-flight var(--time) var(--wait) both;
}
.cursor-worker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 69%, 57% 70%, 29% 100%);
}
.cursor-worker::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: cursor-contact var(--time) var(--wait) both;
}
.cursor-worker span {
  position: absolute;
  left: calc(100% + 3px);
  top: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--cursor-ink);
  color: #130d20;
  font-size: 11px;
  font-weight: 740;
  line-height: 1.45;
  white-space: nowrap;
}
.cursor-worker:first-child { --arrow: 22px; }
.cursor-worker:nth-child(2) {
  --cursor-ink: #94e8d7; --wait: .10s;
  --start: 12%; --rise: 57%; --via-x: 23%; --via-y: 68%; --dock-x: 34%; --dock-y: 62%;
}
.cursor-worker:nth-child(3) {
  --cursor-ink: #a5d4ff; --wait: .23s;
  --start: 79%; --rise: 20%; --via-x: 68%; --via-y: 26%; --dock-x: 56%; --dock-y: 37%;
}
.cursor-worker:nth-child(4) {
  --cursor-ink: #eab5eb; --wait: .36s;
  --start: 85%; --rise: 48%; --via-x: 76%; --via-y: 60%; --dock-x: 64%; --dock-y: 54%;
}
.cursor-worker:nth-child(5) {
  --cursor-ink: #c1b1ff; --wait: .40s;
  --start: 25%; --rise: 17%; --via-x: 37%; --via-y: 22%; --dock-x: 43%; --dock-y: 40%;
}
.cursor-worker:nth-child(6) {
  --cursor-ink: #ffcfa3; --wait: .58s;
  --start: 81%; --rise: 69%; --via-x: 71%; --via-y: 71%; --dock-x: 58%; --dock-y: 62%;
}
.cursor-worker:nth-child(7) {
  --cursor-ink: #a5d4ff; --wait: .65s;
  --start: 53%; --rise: 12%; --via-x: 44%; --via-y: 27%; --dock-x: 45%; --dock-y: 56%;
}
[data-flight="shape"] .cursor-worker:first-child {
  --cursor-ink: #9fd6ff; --time: 2.15s;
  --start: 68%; --rise: 16%; --via-x: 38%; --via-y: 19%; --dock-x: 52%; --dock-y: 45%;
}
[data-flight="shape"] .cursor-worker:nth-child(n+2) { --time: 1.85s; }
[data-flight="test"] .cursor-worker:first-child {
  --cursor-ink: #ffd6a3; --time: 1.52s;
  --start: 71%; --rise: 61%; --via-x: 62%; --via-y: 44%; --dock-x: 49%; --dock-y: 53%;
}
[data-flight="test"] .cursor-worker:nth-child(even) { --cursor-ink: #ffdcaf; }
@keyframes cursor-flight {
  0% { left: var(--start); top: var(--rise); opacity: 0; }
  12% { opacity: 1; }
  39% { left: var(--via-x); top: var(--via-y); }
  70%, 100% { left: var(--dock-x); top: var(--dock-y); }
  87% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cursor-contact {
  0%, 69% { opacity: 0; transform: scale(.2); }
  71% { opacity: .8; }
  93%, 100% { opacity: 0; transform: scale(1.45); }
}
@media (max-width: 480px) {
  .cursor-worker { --arrow: 12px; }
  .cursor-worker:first-child { --arrow: 18px; }
  .cursor-worker span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-world .cursor-fallback { display: none !important; }
}
.creation-status { color: #ddd0ed; }
#world-motion { width: auto; padding: 0 8px; font-size: 12px; }
@media (max-width: 810px) {
  .atelier-world #lab.story-chapter {
    min-height: calc(100svh - var(--story-top));
    align-items: start;
    padding-block: 40px 51px;
  }
  .world-frame { width: calc(100% - 36px); }
  .world-intro { padding: clamp(11px,5vh,49px) 0 0; }
  .atelier-world .world-intro h1 { font-size: clamp(40px,11.35vw,72px); }
  .world-intro > p { margin-top: 13px; }
  .world-choices { margin-top: clamp(193px,35vh,290px); gap: 9px; }
  .world-choices button { font-size: clamp(12px,3.6vw,19px); gap: 6px; padding-bottom: 9px; min-height: 63px; }
  .idea-sketch { height: 36px; }
  .world-experience .creation-view { height: clamp(290px,55svh,390px); }
  .experience-footer { flex-wrap: wrap; gap: 1px 10px; font-size: 14px; }
  .experience-course { padding-top: 2px; }
}

.build-code {
  position: absolute;
  z-index: 3;
  inset: auto auto 15px 15px;
  color: #bbd8ff;
  pointer-events: none;
  opacity: 0;
  font: 12px/1.62 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-shadow: 0 0 8px #7288fa86;
}
.build-code code { display: grid; gap: 4px; }
.build-code span {
  display: block;
  width: max-content;
  padding-inline: 6px;
  border-left: 1px solid #98c9f39c;
  background: #100d20e5;
  opacity: 0;
}
.atelier-world:is([data-assembly="read"], [data-assembly="shape"], [data-assembly="test"]) .build-code { opacity: 1; }
.atelier-world[data-assembly="read"] .build-code span:first-child,
.atelier-world[data-assembly="shape"] .build-code span:nth-child(2),
.atelier-world[data-assembly="test"] .build-code span:nth-child(3) {
  animation: write-world-code .52s steps(18, end) both;
}
.atelier-world[data-assembly="shape"] .build-code span:first-child,
.atelier-world[data-assembly="test"] .build-code span:nth-child(-n+2) { opacity: .56; }
@keyframes write-world-code {
  from { clip-path: inset(0 100% 0 0); opacity: 1; }
  to { clip-path: inset(0); opacity: 1; }
}

@media (max-width: 810px) {
  .build-code { bottom: 9px; left: 9px; font-size: 10px; }
}