/* The older illustrated art is retained at ?art=illustration. */
body[data-art=realism] .door-art {
  background-image: url('/assets/doors-v28.webp');
  background-size: 300% 100%;
  translate: var(--door-art-shift, 0%) 0;
  mask-image: none;
}
body[data-art=realism] .forest .door { transform: translateX(-50%); transition: none; }
body[data-art=realism] .forest .door:not(.is-current) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
body[data-art=realism] .door-self .portal { --door-art-shift: -11.083%; }
body[data-art=realism] .door-marketing .portal { --door-art-shift: 0%; }
body[data-art=realism] .door-ai .portal { --door-art-shift: 10.914%; }
body[data-art=realism] .door-self .door-art { background-position: 0 0; }
body[data-art=realism] .door-ai .door-art { background-position: 100% 0; }
body[data-art=realism] .ds-outline { translate: var(--door-art-shift, 0%) 0; }
body[data-art=realism] .ds-outline.ds-simplified { translate: none; }
body[data-art=realism] .doors { --door-height: 42dvh; }
body[data-art=realism] .forest { --doors-bottom: 17dvh; --caption-height: 88px; }
body[data-art=realism] .invitation { top: clamp(44px, 5.8dvh, 66px); }
body[data-art=realism] .scene-header { bottom: max(30px, 3.6dvh); }
body[data-art=realism] .forest-actions { bottom: 10dvh; }
body[data-art=realism] .portal { aspect-ratio: 2/3; --sketch-left: 13.4%; --sketch-top: 1%; --sketch-width: 73.2%; --sketch-height: 95.8%; }
body[data-art=realism] .door-caption { margin-top: 20px; }
body[data-art=realism] .portal::before { left: 18%; right: 18%; bottom: 1.5%; height: 1.8%; background: #061008e6; filter: blur(1.1px); z-index: 1; }
body[data-art=realism] .portal::after { left: 2%; width: 104%; bottom: -2%; height: 11%; background: radial-gradient(ellipse at 50% 42%, #0914079c, #09140738 42%, transparent 72%); transform: skewX(-17deg); }
body[data-art=realism] .dm-spill { top: 96%; left: -18%; width: 136%; height: 23%; clip-path: none; background: radial-gradient(ellipse at 50% 0, #ffdf9c9c, #ffe5ad38 35%, transparent 72%); filter: blur(5px); }
body[data-art=realism] .dm-ajar > .dm-spill { opacity: .68; }
body[data-art=realism] .portal:is(.ds-queued, .ds-drawing, .ds-drawn, .ds-revealing) .dm-leaf { transform: rotateY(0deg) !important; }
body[data-art=realism] .portal:is(.ds-queued, .ds-drawing, .ds-drawn, .ds-revealing) .dm-spill { opacity: 0 !important; }
body[data-art=realism] .sunbeams { display: none; }
body[data-art=realism] .scene-shade { background: linear-gradient(180deg, #061914b0 0, #06191438 21%, transparent 37%, transparent 57%, #04151182 77%, #041511ae 100%); }
body[data-art=realism] .forest-background { transform: none; object-position: 50% 50%; filter: none; }
.door-base-mist { display: none; }
body[data-art=realism] .door-base-mist { display: block; position: absolute; z-index: 5; pointer-events: none; left: -28%; width: 156%; top: 82%; height: 29%; opacity: .55; filter: blur(7px); background: radial-gradient(ellipse at 12% 48%, #e7eee17a 0, #e7eee12d 29%, transparent 55%), radial-gradient(ellipse at 89% 52%, #edf0e578 0, #edf0e52b 30%, transparent 55%); }
body[data-art=realism] .door-base-mist::after { content: none; }
body[data-art=realism][data-time=night] .door-base-mist { opacity: .45; background: radial-gradient(ellipse at 12% 48%, #b6d7d260, #9abfc124 29%, transparent 55%), radial-gradient(ellipse at 89% 52%, #b5d3d160, #abc9cf20 30%, transparent 55%); }
body[data-art=realism] .portal:is(.ds-queued,.ds-drawing,.ds-drawn) .door-base-mist { opacity: 0; transition: none; }
body[data-art=realism] .portal.ds-revealing .door-base-mist { transition: opacity 1400ms cubic-bezier(.4,0,.2,1); }
#next-step.step-forward { width: 52px; min-width: 52px; min-height: 46px; padding: 0; font-size: 24px; line-height: 1; }
#next-step.step-forward > span { font-size: 26px; }
@media(max-width:650px) { body[data-art=realism][data-world=marketing] .world-background { object-position: 0% 50%; } }
@media (max-width: 650px) {
  body[data-art=realism] .forest { --doors-bottom: 17.5dvh; --caption-height: 94px; }
  body[data-art=realism] .doors { --door-height: 42dvh; }
  body[data-art=realism] .forest-background { object-position: 50% 50%; }
}
@media (max-width: 650px) and (max-height: 700px) {
  body[data-art=realism] .forest { --doors-bottom: 19.5dvh; --caption-height: 84px; }
  body[data-art=realism] .doors { --door-height: 34dvh; }
  body[data-art=realism] .invitation { top: 36px; }
  body[data-art=realism] .scene-header { bottom: 30px; }
  body[data-art=realism] .forest-actions { bottom: 84px; }
  body[data-art=realism] .forest-actions > #help-request { font-size: 12px; min-height: 44px; padding: 10px 12px; }
  body[data-art=realism] .door-description { font-size: 13px; line-height: 1.35; }
}