/* A quiet toy landscape: all decoration stays behind the learning surface. */
@media screen {
  :root {
    --world-sky: color-mix(in srgb, var(--block-1) 22%, #edfaff);
    --world-horizon: #fffdf0;
    --world-ground: color-mix(in srgb, var(--block-6) 21%, #f4fae9);
    --world-hill-back: color-mix(in srgb, var(--block-3) 32%, #edf7e4);
    --world-hill-front: color-mix(in srgb, var(--block-6) 34%, #eaf6de);
    --world-cloud: #fffffff0;
    --world-trunk: #ddc0a0;
    --rainbow-arc: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 55%, #954cb0 55.5% 61%, #5355aa 61.5% 67%, #4bbfe4 67.5% 73%, #81c84c 73.5% 79%, #ffe34d 79.5% 85%, #f5a43b 85.5% 91%, #ef4242 91.5% 97%, transparent 97.5%);
  }
  body { min-height: 100dvh; isolation: isolate; background: var(--world-ground); }
  .world-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .world-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--world-sky), var(--world-horizon) 60%, var(--world-ground)); }
  .world-sky::before {
    content: ""; position: absolute; width: 86px; aspect-ratio: 1; right: 6%; top: 42px; border-radius: 50%;
    background: #ffe7a0; box-shadow: 0 0 0 14px #ffe7a021, 0 0 0 29px #ffe7a013;
  }
  .world-cloud { position: absolute; width: 136px; height: 36px; border-radius: 40px; background: var(--world-cloud); }
  .world-cloud::before, .world-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
  .world-cloud::before { width: 59px; height: 59px; left: 19px; bottom: 8px; }
  .world-cloud::after { width: 78px; height: 78px; right: 13px; bottom: 1px; }
  .cloud-one { left: 35%; top: 111px; transform: rotate(-3deg); }
  .cloud-two { right: -28px; top: 226px; transform: scale(1.35); opacity: .85; }
  .world-rainbow {
    position: absolute; width: 140px; height: 80px; right: 16%; top: 17px;
    transform: rotate(9deg);
  }
  #large-stage { isolation: isolate; }
  #hero-stage::after, #large-stage::before {
    content: ""; position: absolute; z-index: -1; right: 2%; top: 0;
    width: min(22%, 140px); aspect-ratio: 2 / 1; max-height: 14%; pointer-events: none;
  }
  .world-rainbow, #hero-stage::after, #large-stage::before {
    background: var(--rainbow-arc); opacity: var(--rainbow-opacity, 0); transition: opacity .65s ease;
  }
  :root[data-rainbow="true"] { --rainbow-opacity: .38; }
  .world-hill { position: absolute; width: 110%; height: clamp(110px, 19vh, 240px); border-radius: 50% 50% 0 0; }
  .hill-back { left: -37%; bottom: -27px; background: var(--world-hill-back); transform: rotate(3deg); }
  .hill-front { right: -43%; bottom: -70px; background: var(--world-hill-front); transform: rotate(-6deg); }
  .world-tree { position: absolute; width: 17px; height: 79px; bottom: 59px; background: var(--world-trunk); border-radius: 4px; }
  .world-tree::before {
    content: ""; position: absolute; width: 66px; height: 76px; left: -25px; top: -57px; border-radius: 20px 20px 16px 16px;
    background: color-mix(in srgb, var(--block-3) 62%, #e7f7c8);
    box-shadow: inset -8px -6px 0 #406b6810, inset 3px 3px 0 #ffffff40;
    transform: rotate(-5deg);
  }
  .world-tree::after { content: ""; position: absolute; width: 25px; height: 4px; top: 17px; left: 7px; border-radius: 3px; background: inherit; transform: rotate(-40deg); }
  .tree-one { left: 17px; transform: scale(.85); transform-origin: bottom; }
  .tree-two { right: 25px; bottom: 31px; transform: scale(1.1); transform-origin: bottom; }
  .tree-two::before { background: color-mix(in srgb, var(--block-6) 68%, #e5f3d2); transform: rotate(6deg); }
  .world-blocks {
    position: absolute; left: 13%; bottom: 19px; width: 36px; height: 36px; border-radius: 7px;
    background: var(--block-2); opacity: .63; transform: rotate(-9deg);
    box-shadow: inset -4px -4px 0 #534b6314, inset 2px 2px 0 #ffffff66;
  }
  .world-blocks::before, .world-blocks::after { content: ""; position: absolute; width: 36px; height: 36px; border-radius: inherit; box-shadow: inherit; }
  .world-blocks::before { left: 38px; top: 6px; background: var(--block-7); transform: rotate(17deg); }
  .world-blocks::after { left: 24px; top: -33px; background: var(--block-1); transform: rotate(6deg); }
  .page-footer { text-shadow: 0 1px var(--world-horizon); }
  :root[data-mode="dark"] {
    --world-sky: color-mix(in srgb, var(--theme-accent) 12%, #151c31);
    --world-horizon: #1c2030;
    --world-ground: #1b2c2b;
    --world-hill-back: color-mix(in srgb, var(--block-3) 13%, #20312e);
    --world-hill-front: color-mix(in srgb, var(--block-6) 14%, #263b36);
    --world-cloud: #aab8d510;
    --world-trunk: #524b50;
  }
  :root[data-mode="dark"] .world-sky::before { background: #f2e7b8; box-shadow: 0 0 24px #f2e7b815; width: 58px; }
  :root[data-mode="dark"] .world-sky::after {
    content: ""; position: absolute; inset: 0 0 48%; opacity: .6;
    background-image: radial-gradient(circle at 13% 13%, #fff2c9 1px, transparent 2px), radial-gradient(circle at 27% 23%, #d4e9ff 1px, transparent 2px), radial-gradient(circle at 47% 9%, #fff2c9 1.5px, transparent 2.5px), radial-gradient(circle at 61% 29%, #d4e9ff 1px, transparent 2px), radial-gradient(circle at 76% 7%, #fff2c9 1px, transparent 2px), radial-gradient(circle at 89% 34%, #d4e9ff 1.5px, transparent 2.5px), radial-gradient(circle at 5% 48%, #d4e9ff 1px, transparent 2px);
  }
  :root[data-mode="dark"] .world-tree::before { background: color-mix(in srgb, var(--block-3) 24%, #294139); }
  :root[data-mode="dark"] .tree-two::before { background: color-mix(in srgb, var(--block-6) 25%, #294139); }
  :root[data-mode="dark"] .world-blocks { opacity: .2; }
  @media (max-width: 740px) {
    .world-sky::before { right: -16px; top: 109px; width: 68px; }
    .cloud-one { left: 39%; top: 41px; transform: scale(.65); opacity: .6; }
    .cloud-two { top: 228px; transform: scale(.8); }
    .world-rainbow { width: 110px; height: 63px; right: 8%; top: 49px; }
    .world-tree { bottom: 12px; }
    .tree-one { left: 1px; transform: scale(.55); }
    .tree-two { right: -2px; bottom: 2px; transform: scale(.65); }
    .world-blocks { left: 12%; bottom: -6px; transform: scale(.65) rotate(-9deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .world-rainbow, #hero-stage::after, #large-stage::before { transition: none; }
  }
}
@media print { .world-backdrop { display: none !important; } }