:root { --paper: #f5fbfe; }
body { background: #f5fbfe; }
main { position: relative; }
.atelier-room { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; background: #f5fbfe; }
.atelier-paper { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .38; }
.room-layer { position: absolute; inset: -24px; transform: translate3d(0,0,0); }
.room-far { transform: translate3d(var(--far-x,0px),var(--far-y,0px),0); }
.room-near { transform: translate3d(var(--near-x,0px),var(--near-y,0px),0); }
.room-window,.room-tracery,.room-charm,.room-floor { position: absolute; fill: none; stroke: #87bed8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.room-window { width: 330px; height: 680px; left: -116px; top: 12%; opacity: .48; }
.window-glass { fill: #e3f3fb; stroke: none; opacity: .65; }
.window-blush { fill: #f7e5f1; stroke: none; opacity: .65; }
.room-window .iron-fine { stroke-width: .75; }
.room-window .iron-pink,.room-charm .iron-pink,.room-tracery .iron-pink { stroke: #dc9bc0; }
.room-tracery { right: -102px; bottom: 4%; width: 290px; height: 530px; opacity: .48; }
.room-charm { width: 160px; height: 290px; right: 6.5%; top: 112px; opacity: .55; }
.room-charm .charm-pendant { transform-origin: 80px 172px; animation: charm-sway 9s ease-in-out infinite; }
.room-charm .charm-jewel { fill: #fff4fa; }
.room-floor { width: 410px; height: 180px; bottom: -27px; left: -18px; opacity: .28; }
.room-spark { position: absolute; width: 7px; height: 7px; color: #da9bbf; opacity: .4; }
.room-spark::before,.room-spark::after { content: ""; position: absolute; background: currentColor; border-radius: 50%; }
.room-spark::before { width: 1px; height: 7px; left: 3px; }
.room-spark::after { width: 7px; height: 1px; top: 3px; }
.room-spark:nth-of-type(2n) { color: #86bbd6; }
.atelier-room[data-room="book"] .room-window { opacity: .32; }
.atelier-room[data-room="book"] .room-charm { opacity: .36; }
.atelier-room[data-room="lab"] .room-window { opacity: .52; }
.atelier-room[data-room="lab"] .room-charm { opacity: .6; }
.atelier-room[data-room^="works-"] .room-window { left: -180px; opacity: .27; }
.atelier-room[data-room^="works-"] .room-tracery { right: -170px; opacity: .26; }
.atelier-room[data-room^="works-"] .room-charm { right: -45px; opacity: .24; }
.atelier-room[data-room^="works-"] .room-floor { opacity: .15; }
.atelier-room[data-room="works-events"] .room-tracery { stroke: #ce9cbd; }
.atelier-room[data-room="works-brand"] .room-window .iron-pink { stroke: #78b7d4; }
.page-frame i { background: #f5fbfe; }
.gate-art,.cauldron,.bottle-float { isolation: auto; }
.lab-stage { isolation: auto; }
.potion { mix-blend-mode: multiply; }
.cauldron>img,.bottle-float { mix-blend-mode: multiply; }
body[data-scene="works"] .site-header::before { background: #f5fbfef5; }
.chapter-stamp img { mix-blend-mode: multiply; }
.works-heading { background: #f5fbfeaa; }
.message-content,.brand-chapters,.graphic-gallery,.event-archive { position: relative; }
.archive-spread { background: linear-gradient(90deg,#fffafd 0%,#fffafd 40%,#f0f9fe 40%); }
@keyframes charm-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media(max-width:820px) {
  .room-window { width: 235px; height: 485px; left: -140px; top: 18%; opacity: .32; }
  .room-tracery { width: 200px; height: 365px; right: -148px; bottom: 6%; opacity: .3; }
  .room-charm { width: 110px; height: 200px; right: -30px; top: 60px; opacity: .35; }
  .room-floor { width: 230px; height: 101px; left: -80px; }
  .atelier-room[data-room="lab"] .room-window { opacity: .32; }
  .atelier-room[data-room="lab"] .room-charm { opacity: .3; }
  .atelier-room[data-room^="works-"] .room-window { left: -165px; opacity: .2; }
  .atelier-room[data-room^="works-"] .room-tracery { right: -168px; opacity: .2; }
  .atelier-room[data-room^="works-"] .room-charm { right: -70px; }
}
@media(prefers-reduced-motion:reduce) {
  .room-layer { transform: none !important; }
  .room-charm .charm-pendant { animation: none; }
}