.story-world #particle-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.story-world .world-stage:has(#particle-canvas[data-particles-active], #particle-fallback:not([hidden])[data-particles-active]) .world-fallback { display: none; }
.story-world .world-stage {
  background:
    radial-gradient(ellipse at 70% 34%, #26204baf, transparent 57%),
    radial-gradient(ellipse at 64% 70%, #11274572, transparent 52%),
    #080914;
}
.story-world .world-stage::before {
  animation: none;
  background:
    radial-gradient(ellipse at 63% 46%, #998afd16, transparent 62%),
    radial-gradient(1px 1px at 32px 41px, #c6d3ff7c 45%, transparent 75%),
    radial-gradient(1px 1px at 112px 83px, #dabdef67 50%, transparent 76%);
  background-size: auto, 157px 179px, 221px 251px;
}
.story-world .world-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 1px), #c4c2ff24 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), #c4c2ff24 50%, transparent calc(50% + 1px));
  mask-image: radial-gradient(ellipse at 67% 45%, #000 10%, transparent 70%);
}
.story-world .world-vignette { z-index: 1; }
.story-world .chapter-opening .world-readout { color: #ede3fa; }
.story-world .chapter-opening .world-readout:hover { border-color: #ffdda9; text-decoration: underline; }
.story-world #experiment .build-console {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: linear-gradient(158deg, #121328f0, #0a0b19e8);
  border-color: #b4acf95d;
  box-shadow: 0 0 52px #8075ff15, inset 0 0 1px #b8a9ff;
}
.build-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #b6abf136;
  font-weight: 740;
}
.build-heading .quiet { font-size: 11px; }
.build-wish { margin: 14px 0; color: #e4dcf4; font-size: 15px; overflow-wrap: anywhere; }
.build-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.build-steps li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  font-size: 12px;
  border-bottom: 1px solid #605984;
  color: #b9b0d1;
}
.build-steps li span { color: #c7aef1; font-size: 10px; font-family: ui-monospace, monospace; }
.build-steps li[aria-current] { color: #fff3cc; border-color: #e4c28d; background: #c89aff21; }
.build-steps li[data-complete] { color: #f4e8ff; border-color: #a599f1; }
.build-result {
  display: grid;
  grid-template-columns: 65px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 13px;
  min-height: 80px;
  border: 1px solid #c7b6e24f;
  background: #251e3fa1;
  border-radius: 9px;
}
.build-result h3 { margin: 0 !important; font-size: clamp(17px,2vw,25px); }
.build-result p { color: #d9ccf1; font-size: 13px; margin-top: 4px; }
.result-symbol {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 57px;
  color: #e6c8ff;
}
.result-symbol i { position: absolute; display: block; }
.story-world[data-wish=lantern] .result-symbol i:first-child {
  width: 29px; height: 34px; border: 1px solid currentColor; border-radius: 44%;
  box-shadow: 0 0 20px #a793fd55, inset 0 0 13px #e9c8ff30;
}
.story-world[data-wish=lantern] .result-symbol i:nth-child(2) { width: 17px; height: 6px; top: 6px; border: 1px solid currentColor; border-radius: 70% 70% 0 0; }
.story-world[data-wish=lantern] .result-symbol i:nth-child(3) { height: 7px; width: 1px; bottom: 4px; background: currentColor; }
.story-world[data-wish=bridge] .result-symbol i:first-child { width: 55px; height: 24px; border: 2px solid currentColor; border-radius: 55px 55px 0 0; border-bottom: 0; bottom: 12px; }
.story-world[data-wish=bridge] .result-symbol i:nth-child(2) { width: 55px; height: 1px; background: currentColor; bottom: 35px; }
.story-world[data-wish=bridge] .result-symbol i:nth-child(3) { width: 5px; height: 5px; left: 9%; bottom: 34px; border-radius: 50%; background: #fff4d6; box-shadow: 0 0 12px #ffd290; }
.story-world[data-wish=tree] .result-symbol i:first-child { height: 32px; width: 2px; bottom: 5px; background: currentColor; }
.story-world[data-wish=tree] .result-symbol i:nth-child(2) { width: 34px; height: 29px; top: 5px; border: 1px solid currentColor; border-radius: 50% 47% 44% 44%; }
.story-world[data-wish=tree] .result-symbol i:nth-child(3) { width: 45px; height: 23px; top: 15px; border: 1px solid currentColor; border-radius: 49%; }
.build-console[data-tested] .result-symbol { color: #ffe0a0; filter: drop-shadow(0 0 7px #ffc77e); }
.story-world[data-wish=lantern] .build-console[data-tested] .result-symbol i:first-child { background: radial-gradient(#fff1bf, #e7a95170 48%, transparent 75%); }
.story-world[data-wish=bridge] .build-console[data-tested] .result-symbol i:nth-child(3) { left: 88%; }
.story-world[data-wish=tree] .build-console[data-tested] .result-symbol { color: #a6ffd4; filter: drop-shadow(0 0 8px #70e7ad); }
.story-world[data-wish=tree] .build-console[data-tested] .result-symbol i:nth-child(2) { scale: 1.28; background: #a6ffd445; }
.result-symbol i { transition: left .75s ease-out, scale .55s, background .45s; }
.cursor-swarm { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.swarm-cursor {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  top: 0;
  left: 0;
  color: #dec2ff;
  opacity: 0;
  filter: drop-shadow(0 2px 8px #a976feaa);
}
.swarm-cursor i { background: currentColor; width: 19px; height: 22px; clip-path: polygon(0 0,100% 68%,51% 67%,29% 100%); }
.swarm-cursor span { align-self: flex-end; padding: 2px 7px; margin-bottom: -8px; border: 1px solid currentColor; border-radius: 4px; background: #140e28; font-size: 11px; white-space: nowrap; }
.cursor-builder { color: #a4dcff; }
.cursor-tester { color: #ffe2a7; }
.build-console[data-build=read] .cursor-reader { animation: cursor-path .76s both; --sx: 7cqw; --sy: 54px; --ex: 34cqw; --ey: 83px; }
.build-console[data-build=shape] .cursor-builder { animation: cursor-path .92s both; --sx: 66cqw; --sy: 37px; --ex: 47cqw; --ey: 123px; }
.build-console[data-build=test] .cursor-tester { animation: cursor-path .83s both; --sx: 70cqw; --sy: 75px; --ex: 28cqw; --ey: 186px; }
.build-console[data-build=read] .cursor-builder,
.build-console[data-build=shape] .cursor-reader,
.build-console[data-build=test] .cursor-builder { animation: cursor-path 1s both; --sx: 47cqw; --sy: 24px; --ex: 69cqw; --ey: 91px; }
@keyframes cursor-path {
  0% { transform: translate(var(--sx),var(--sy)); opacity: 0; }
  15%, 76% { opacity: 1; }
  70% { transform: translate(var(--ex),var(--ey)); }
  100% { transform: translate(var(--ex),var(--ey)); opacity: 0; }
}
.build-console { container-type: inline-size; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:810px) {
  .story-world #experiment .build-console { min-height: 275px; margin-top: 32px; }
  .story-world .chapter-opening .world-readout { bottom: 83px; }
}
@media(prefers-reduced-motion:reduce) {
  .story-world .result-symbol i, .story-world .swarm-cursor { animation: none !important; transition: none !important; }
}

.build-blueprint {
  display: grid;
  gap: 6px;
  min-height: 99px;
  margin-top: 12px;
  padding: 8px;
  border: 1px dashed #a799e364;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #9c94f014 0 1px, transparent 1px 18px), #13132b;
}
.blueprint-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid transparent;
  font-size: 12px;
  visibility: hidden;
}
.blueprint-row[data-placed] {
  visibility: visible;
  border-color: #8797ee8c;
  background: #7474c22a;
  animation: blueprint-place .55s ease-out both;
}
.blueprint-row span { color: #e7c5a1; }
.blueprint-row strong { color: #fff6ee; font-weight: 620; }
@keyframes blueprint-place {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
.build-console[data-build=shape] .cursor-builder { --ex: 37cqw; --ey: 181px; }
.build-console[data-build=test] .cursor-tester { --ex: 48cqw; --ey: 216px; }
.build-console[data-build=read] .cursor-tester,
.build-console[data-build=shape] .cursor-tester,
.build-console[data-build=test] .cursor-reader { animation: cursor-path 1s both; --sx: 61cqw; --sy: 144px; --ex: 69cqw; --ey: 196px; }
@media (prefers-reduced-motion: reduce) {
  .blueprint-row[data-placed] { animation: none; }
}