.sw2-screen {
  --sw2-cream: #fff6d8;
  --sw2-ink: #2e1b0c;
  --sw2-green: #16733b;
  --sw2-blue: #0a6db5;
  width: min(100vw, calc(100svh * 1.5));
  height: min(100svh, calc(100vw / 1.5));
  aspect-ratio: 3 / 2;
  color: var(--sw2-ink);
  background-color: #062c24;
  background-image:
    linear-gradient(180deg, rgba(0, 20, 15, .04) 0 46%, rgba(0, 18, 12, .55) 76%, rgba(0, 12, 8, .82) 100%),
    url("../assets/forest-v09/scene-clearing.webp");
  background-size: cover;
  isolation: isolate;
}

.sw2-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 242, 162, .2), transparent 24%),
    linear-gradient(90deg, rgba(0, 21, 13, .38), transparent 17% 83%, rgba(0, 21, 13, .38));
}

.sw2-home.welcome-screen::after {
  display: none;
}

.sw2-mobile-vignette {
  display: none;
}

.sw2-screen button {
  -webkit-tap-highlight-color: transparent;
}

.sw2-language-switch {
  position: absolute;
  z-index: 10;
  top: 2.2%;
  left: 3.2%;
  right: 3.2%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.sw2-language-button {
  min-width: clamp(112px, 14vw, 200px);
  min-height: clamp(45px, 5.5vw, 72px);
  padding: .38em .8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border: clamp(2px, .25vw, 4px) solid #d99543;
  border-radius: 999px;
  color: #fff8e5;
  background: linear-gradient(180deg, #9a591f, #502807 66%, #341604);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 5px 0 #251004, 0 10px 25px rgba(0,0,0,.35);
  font-size: clamp(.82rem, 1.55vw, 1.35rem);
  text-shadow: 0 2px 2px rgba(0,0,0,.55);
  cursor: pointer;
  pointer-events: auto;
}

.sw2-language-button > span {
  font-size: 1.35em;
  line-height: 1;
}

.sw2-language-button[aria-pressed="true"] {
  border-color: #ffe58f;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.32), 0 5px 0 #251004, 0 0 24px rgba(255, 230, 138, .4);
}

.sw2-language-button:hover,
.sw2-language-button:focus-visible,
.sw2-home-card:hover,
.sw2-home-card:focus-visible,
.sw2-back:hover,
.sw2-back:focus-visible,
.sw2-workshop-activity:not(:disabled):hover,
.sw2-workshop-activity:not(:disabled):focus-visible,
.sw2-library-experience:hover,
.sw2-library-experience:focus-visible {
  filter: brightness(1.1) saturate(1.06);
  outline: clamp(3px, .25vw, 5px) solid #fff29c;
  outline-offset: 3px;
}

.sw2-language-button:active,
.sw2-home-card:active,
.sw2-back:active,
.sw2-workshop-activity:not(:disabled):active,
.sw2-library-experience:active {
  transform: translateY(3px);
}

.sw2-home-hero {
  position: absolute;
  z-index: 4;
  top: 2.3%;
  left: 50%;
  width: min(44%, 680px);
  min-width: 390px;
  padding: clamp(11px, 1.35vw, 22px) clamp(22px, 2.7vw, 44px) clamp(13px, 1.55vw, 25px);
  border: clamp(4px, .45vw, 7px) solid #7c3e0c;
  border-radius: 50% 44% 48% 46% / 16% 18% 16% 19%;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(102, 53, 14, .14) 7.2% 7.7%, transparent 8% 91%, rgba(102, 53, 14, .14) 91.3% 91.8%, transparent 92%),
    linear-gradient(180deg, #f7bf65, #dc8c32 52%, #bd6821);
  box-shadow: inset 0 0 0 3px rgba(255, 223, 139, .68), inset 0 -7px 16px rgba(91, 38, 4, .2), 0 11px 30px rgba(0,0,0,.36);
  text-align: center;
  transform: translateX(-50%) rotate(-.35deg);
}

.sw2-home-hero p,
.sw2-home-hero h1,
.sw2-home-hero div,
.sw2-home-values,
.sw2-home-footer {
  margin: 0;
}

.sw2-home-hero p {
  font-size: clamp(.75rem, 1.55vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .025em;
}

.sw2-home-hero h1 {
  display: grid;
  margin: -.06em 0 .12em;
  font-size: clamp(1.9rem, 4.7vw, 4.7rem);
  line-height: .83;
  letter-spacing: -.045em;
}

.sw2-home-hero h1 span,
.sw2-home-hero h1 strong {
  -webkit-text-stroke: clamp(1px, .13vw, 2px) #fff5cf;
  paint-order: stroke fill;
  text-shadow: 0 .055em 0 rgba(48, 31, 11, .35), 0 .09em .12em rgba(0,0,0,.25);
}

.sw2-home-hero h1 span { color: #138341; }
.sw2-home-hero h1 strong { color: #0876c9; }
.sw2-home-hero div {
  font-size: clamp(.58rem, 1.08vw, 1.05rem);
  font-weight: 800;
  line-height: 1.22;
}

.sw2-home-values {
  position: absolute;
  z-index: 3;
  top: 31.5%;
  left: 50%;
  max-width: 70%;
  padding: .42em 1.15em;
  border: 2px solid rgba(255, 220, 135, .56);
  border-radius: 999px;
  color: #fff8df;
  background: rgba(19, 69, 47, .78);
  box-shadow: 0 7px 22px rgba(0,0,0,.28);
  font-size: clamp(.58rem, 1.05vw, 1rem);
  font-weight: 900;
  letter-spacing: .035em;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.68);
  transform: translateX(-50%);
}

.sw2-home-navigation {
  position: absolute;
  z-index: 5;
  left: 2.1%;
  right: 2.1%;
  bottom: 6.2%;
  height: 27.5%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, .75vw, 14px);
  align-items: stretch;
}

.sw2-home-card {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 36% .55em .72em;
  display: grid;
  align-content: end;
  border: clamp(3px, .3vw, 5px) solid #82430f;
  border-radius: 48% 48% 16% 16% / 25% 25% 12% 12%;
  color: #2d1808;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(96, 45, 9, .12) 12.5% 13.5%, transparent 14% 86%, rgba(96, 45, 9, .12) 86.5% 87.5%, transparent 88%),
    linear-gradient(180deg, #f8c772, #de923c 58%, #bd6823);
  box-shadow: inset 0 0 0 2px rgba(255, 226, 151, .75), 0 7px 0 #4b2408, 0 13px 20px rgba(0,0,0,.36);
  text-align: center;
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease;
}

.sw2-home-card-icon {
  position: absolute;
  top: -16%;
  left: 50%;
  width: clamp(48px, 7.5vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: clamp(3px, .32vw, 5px) solid #a76022;
  border-radius: 50%;
  color: #fff8ce;
  background: radial-gradient(circle at 34% 27%, #6ac070, #1d6d3b 72%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), 0 6px 12px rgba(0,0,0,.42);
  transform: translateX(-50%);
}

.sw2-home-card-library .sw2-home-card-icon { background: radial-gradient(circle at 34% 27%, #65aee7, #145c8d 72%); }
.sw2-home-card-workshop .sw2-home-card-icon { background: radial-gradient(circle at 34% 27%, #e98cc1, #9b3f80 72%); }
.sw2-home-card-music .sw2-home-card-icon { background: radial-gradient(circle at 34% 27%, #a38bef, #4b3ca4 72%); }
.sw2-home-card-friends .sw2-home-card-icon { background: radial-gradient(circle at 34% 27%, #72caaa, #22745a 72%); }
.sw2-home-card-member .sw2-home-card-icon { background: radial-gradient(circle at 34% 27%, #ff8f9b, #c9314f 72%); }
.sw2-home-card-parents .sw2-home-card-icon { background: radial-gradient(circle at 34% 27%, #ffc363, #bb6718 72%); }

.sw2-home-card-icon svg,
.sw2-workshop-activity-icon svg,
.sw2-library-placeholder svg,
.sw2-library-experience-icon svg,
.sw2-back svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sw2-home-card-member .sw2-home-card-icon svg {
  fill: rgba(255, 248, 206, .32);
}

.sw2-home-card-copy {
  display: grid;
  gap: .22em;
}

.sw2-home-card-copy strong {
  font-size: clamp(.7rem, 1.28vw, 1.18rem);
  line-height: .98;
}

.sw2-home-card-copy small {
  display: block;
  font-size: clamp(.46rem, .76vw, .75rem);
  font-weight: 700;
  line-height: 1.12;
}

.sw2-home-footer {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.1%;
  min-width: 34%;
  padding: .34em 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  border: 2px solid rgba(92, 42, 8, .7);
  border-radius: 9px;
  color: #351b08;
  background: linear-gradient(#efb35c, #cb7729);
  box-shadow: 0 5px 13px rgba(0,0,0,.38);
  font-size: clamp(.54rem, .95vw, .9rem);
  font-weight: 800;
  transform: translateX(-50%);
}

.sw2-home-footer span:last-child {
  font-size: 1.45em;
  font-weight: 1000;
}

.sw2-workshop {
  display: grid;
  place-items: center;
}

.sw2-workshop-heading {
  position: absolute;
  top: 7%;
  left: 50%;
  width: min(690px, 58%);
  padding: clamp(14px, 1.8vw, 26px) clamp(22px, 3vw, 44px);
  border: clamp(4px, .45vw, 7px) solid #743706;
  border-radius: 24px 15px 25px 17px;
  background: linear-gradient(180deg, #f8c977, #dc8c37);
  box-shadow: inset 0 0 0 3px rgba(255, 232, 169, .72), 0 12px 30px rgba(0,0,0,.4);
  text-align: center;
  transform: translateX(-50%);
}

.sw2-workshop-heading p,
.sw2-workshop-heading h1,
.sw2-workshop-heading > span {
  margin: 0;
}

.sw2-workshop-heading p {
  color: #8f3f72;
  font-size: clamp(.56rem, .8vw, .75rem);
  font-weight: 1000;
  letter-spacing: .17em;
}

.sw2-workshop-heading h1 {
  color: #8d3d79;
  font-size: clamp(1.75rem, 4.2vw, 4rem);
  line-height: 1;
  text-shadow: 0 2px 0 #fff0ba;
}

.sw2-workshop-heading > span {
  display: block;
  margin-top: .45em;
  font-size: clamp(.7rem, 1.05vw, .98rem);
  font-weight: 800;
}

.sw2-workshop-navigation {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(9px, 1.15vw, 20px);
}

.sw2-workshop-activity {
  position: relative;
  min-width: 0;
  min-height: clamp(190px, 27vw, 330px);
  padding: 45% .75em 1em;
  display: grid;
  align-content: end;
  border: clamp(3px, .32vw, 5px) solid #7d3d0d;
  border-radius: 32px 19px 34px 21px;
  color: #2d1808;
  background: linear-gradient(150deg, #f7ca79, #df913b 62%, #bd6723);
  box-shadow: inset 0 0 0 2px rgba(255, 234, 175, .72), 0 7px 0 #4b2408, 0 15px 24px rgba(0,0,0,.36);
  text-align: center;
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease;
}

.sw2-workshop-activity-icon {
  position: absolute;
  top: 10%;
  left: 50%;
  width: clamp(65px, 9vw, 132px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: clamp(3px, .3vw, 5px) solid #a76022;
  border-radius: 50%;
  color: #fff8ce;
  background: radial-gradient(circle at 34% 27%, #e98cc1, #8e3b79 72%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), 0 7px 15px rgba(0,0,0,.38);
  transform: translateX(-50%);
}

.sw2-workshop-activity-make-book .sw2-workshop-activity-icon { background: radial-gradient(circle at 34% 27%, #65aee7, #145c8d 72%); }
.sw2-workshop-activity-record-voice .sw2-workshop-activity-icon { background: radial-gradient(circle at 34% 27%, #a38bef, #4b3ca4 72%); }
.sw2-workshop-activity-puzzle .sw2-workshop-activity-icon { background: radial-gradient(circle at 34% 27%, #72caaa, #22745a 72%); }
.sw2-workshop-activity-memory .sw2-workshop-activity-icon { background: radial-gradient(circle at 34% 27%, #ffc363, #bb6718 72%); }

.sw2-workshop-activity-copy {
  display: grid;
  gap: .42em;
}

.sw2-workshop-activity-copy strong {
  font-size: clamp(.78rem, 1.5vw, 1.35rem);
  line-height: 1.04;
}

.sw2-workshop-activity-copy small {
  font-size: clamp(.55rem, .88vw, .82rem);
  font-weight: 800;
  line-height: 1.15;
}

.sw2-workshop-activity:disabled {
  color: rgba(53, 31, 13, .74);
  cursor: not-allowed;
  filter: saturate(.55) brightness(.92);
}

.sw2-workshop-activity:disabled .sw2-workshop-activity-icon {
  color: rgba(255, 248, 206, .76);
  filter: grayscale(.3);
}

.sw2-library {
  display: grid;
  place-items: center;
}

.sw2-back {
  position: absolute;
  z-index: 8;
  top: 3%;
  left: 3%;
  min-height: 52px;
  padding: .65em 1.05em .65em .75em;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border: 3px solid #dc9846;
  border-radius: 999px;
  color: #fff9e5;
  background: linear-gradient(#8c4f1b, #422006);
  box-shadow: 0 5px 0 #261003, 0 9px 20px rgba(0,0,0,.35);
  font-size: clamp(.72rem, 1.18vw, 1.05rem);
  font-weight: 900;
  cursor: pointer;
}

.sw2-back svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.5;
}

.sw2-library-heading {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(620px, 54%);
  padding: clamp(14px, 1.8vw, 26px) clamp(22px, 3vw, 44px);
  border: clamp(4px, .45vw, 7px) solid #743706;
  border-radius: 24px 15px 25px 17px;
  background: linear-gradient(180deg, #f8c977, #dc8c37);
  box-shadow: inset 0 0 0 3px rgba(255, 232, 169, .72), 0 12px 30px rgba(0,0,0,.4);
  text-align: center;
  transform: translateX(-50%);
}

.sw2-library-heading p,
.sw2-library-heading h1,
.sw2-library-heading > span {
  margin: 0;
}

.sw2-library-heading p {
  color: #1e6d3a;
  font-size: clamp(.56rem, .8vw, .75rem);
  font-weight: 1000;
  letter-spacing: .17em;
}

.sw2-library-heading h1 {
  color: #146f3c;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 1;
  text-shadow: 0 2px 0 #fff0ba;
}

.sw2-library-heading > span {
  display: block;
  margin-top: .45em;
  font-size: clamp(.72rem, 1.1vw, 1rem);
  font-weight: 800;
}

.sw2-library-navigation {
  width: min(1120px, 88%);
  margin-top: 17%;
  display: grid;
  grid-template-columns: 1.5fr repeat(2, minmax(0, .75fr));
  gap: clamp(14px, 2vw, 28px);
}

.sw2-library-book {
  min-width: 0;
  min-height: clamp(220px, 30vw, 350px);
  padding: clamp(14px, 2vw, 28px);
  display: grid;
  align-content: center;
  gap: clamp(8px, 1.1vw, 16px);
  border: clamp(4px, .45vw, 7px) solid #7e3e0b;
  border-radius: 28px 17px 30px 19px;
  color: #2e1908;
  background: linear-gradient(145deg, #f7c976, #d98331);
  box-shadow: inset 0 0 0 3px rgba(255, 235, 176, .72), 0 10px 0 #4a2207, 0 20px 36px rgba(0,0,0,.42);
  text-align: center;
}

.sw2-library-book-available {
  grid-template-columns: minmax(105px, .82fr) 1.18fr;
  grid-template-rows: auto 1fr;
  text-align: left;
}

.sw2-library-cover {
  grid-row: 1 / 3;
  align-self: center;
  width: 100%;
  max-height: clamp(185px, 25vw, 302px);
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(52, 22, 4, .36));
}

.sw2-library-book h2 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.8rem);
  line-height: 1;
}

.sw2-library-experiences {
  display: grid;
  gap: clamp(8px, 1vw, 13px);
  align-content: center;
}

.sw2-library-experience {
  min-width: 0;
  min-height: clamp(58px, 7vw, 82px);
  padding: .55em .7em;
  display: grid;
  grid-template-columns: clamp(34px, 4vw, 52px) minmax(0, 1fr);
  align-items: center;
  gap: .6em;
  border: clamp(2px, .22vw, 4px) solid #e9b659;
  border-radius: 16px 10px 18px 12px;
  color: #fff9dc;
  background: linear-gradient(180deg, #247d4b, #105631);
  box-shadow: 0 4px 0 #293b1a, 0 7px 12px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.2);
  text-align: left;
  text-shadow: 0 2px 2px rgba(0,0,0,.46);
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease;
}

.sw2-library-experience-bedtime {
  background: linear-gradient(180deg, #6754a8, #3b2d78);
}

.sw2-library-experience-icon {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.sw2-library-experience-icon svg {
  width: 90%;
  height: 90%;
}

.sw2-library-experience strong,
.sw2-library-experience small {
  display: block;
}

.sw2-library-experience strong {
  font-size: clamp(.73rem, 1.13vw, 1rem);
  line-height: 1.05;
}

.sw2-library-experience small {
  margin-top: .2em;
  font-size: clamp(.52rem, .76vw, .72rem);
  font-weight: 700;
  line-height: 1.16;
}

.sw2-library-book-coming-soon {
  color: rgba(57, 31, 10, .78);
  background: linear-gradient(145deg, #e7b96d, #b66f2d);
  filter: saturate(.62);
}

.sw2-library-placeholder {
  width: min(76%, 170px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 4px solid rgba(116, 58, 11, .55);
  border-radius: 50%;
  color: rgba(73, 37, 10, .7);
  background: rgba(255, 233, 174, .42);
}

.sw2-library-placeholder svg {
  width: 55%;
  height: 55%;
}

.sw2-library-status {
  margin: 0;
  padding: .38em .75em;
  border-radius: 999px;
  color: #fff5d2;
  background: rgba(70, 35, 8, .72);
  font-size: clamp(.62rem, 1vw, .86rem);
  font-weight: 900;
}

.sw2-library-shortcuts {
  display: none;
}

/*
 * StoryWorld 2.0 supplied artboards are 1536 × 1024. On landscape screens and
 * larger tablets the artwork is rendered without cropping and the real DOM
 * controls use the same percentage coordinate system. Smaller screens keep the
 * semantic reflow below, where the artboard text would otherwise be too small.
 */
@media (min-width: 900px) and (min-height: 521px), (min-width: 1200px), (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .sw2-home-da { background-image: url("screens/da/home.webp"); }
  .sw2-home-en { background-image: url("screens/en/home.webp"); }
  .sw2-library-da { background-image: url("screens/da/library.webp"); }
  .sw2-library-en { background-image: url("screens/en/library.webp"); }
  .sw2-workshop-da { background-image: url("screens/da/workshop.webp"); }
  .sw2-workshop-en { background-image: url("screens/en/workshop.webp"); }

  .sw2-screen {
    background-color: #123a24;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .sw2-screen::before {
    display: none;
  }

  .sw2-home-hero,
  .sw2-home-values,
  .sw2-home-footer,
  .sw2-workshop-heading,
  .sw2-library-heading,
  .sw2-library-cover,
  .sw2-library-book h2,
  .sw2-library-placeholder,
  .sw2-library-status,
  .sw2-home-card-icon,
  .sw2-home-card-copy,
  .sw2-workshop-activity-icon,
  .sw2-workshop-activity-copy,
  .sw2-library-experience-icon,
  .sw2-library-experience > span,
  .sw2-back > * {
    display: none;
  }

  .sw2-language-switch,
  .sw2-home-navigation,
  .sw2-workshop-navigation,
  .sw2-library-navigation,
  .sw2-library-shortcuts {
    position: absolute;
    z-index: 10;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    pointer-events: none;
  }

  .sw2-language-button,
  .sw2-home-card,
  .sw2-workshop-activity,
  .sw2-library-experience,
  .sw2-library-shortcut,
  .sw2-back {
    position: absolute;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: block;
    border: 0;
    border-radius: 16px;
    color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    pointer-events: auto;
    transition: background-color 120ms ease, box-shadow 120ms ease;
  }

  .sw2-language-button:hover,
  .sw2-home-card:hover,
  .sw2-workshop-activity:not(:disabled):hover,
  .sw2-library-experience:hover,
  .sw2-library-shortcut:not(:disabled):hover,
  .sw2-back:hover {
    outline: 0;
    background: rgba(255, 255, 255, .08);
    filter: none;
  }

  .sw2-language-button:focus-visible,
  .sw2-home-card:focus-visible,
  .sw2-workshop-activity:not(:disabled):focus-visible,
  .sw2-library-experience:focus-visible,
  .sw2-library-shortcut:not(:disabled):focus-visible,
  .sw2-back:focus-visible {
    outline: 0;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 clamp(3px, .35vw, 6px) #fff28b, 0 0 clamp(10px, 1.4vw, 24px) rgba(255, 237, 115, .9);
    filter: none;
  }

  .sw2-language-button:active,
  .sw2-home-card:active,
  .sw2-workshop-activity:not(:disabled):active,
  .sw2-library-experience:active,
  .sw2-library-shortcut:not(:disabled):active,
  .sw2-back:active {
    transform: none;
    background: rgba(255, 244, 153, .13);
  }

  /* Home: language plaques and the six approved destinations. */
  .sw2-language-button[data-sw2-language="da"] { left: 8.464%; top: 2.051%; width: 13.672%; height: 7.52%; }
  .sw2-language-button[data-sw2-language="en"] { left: 75.195%; top: 2.051%; width: 13.346%; height: 7.52%; }
  .sw2-home-card-library { left: 3.125%; top: 64.941%; width: 15.299%; height: 25.586%; }
  .sw2-home-card-workshop { left: 18.424%; top: 64.941%; width: 15.234%; height: 25.586%; }
  .sw2-home-card-music { left: 33.659%; top: 64.941%; width: 15.69%; height: 25.586%; }
  .sw2-home-card-friends { left: 49.349%; top: 64.941%; width: 16.146%; height: 25.586%; }
  .sw2-home-card-member { left: 65.495%; top: 64.941%; width: 16.211%; height: 25.586%; }
  .sw2-home-card-parents { left: 81.706%; top: 64.941%; width: 16.797%; height: 25.586%; }

  /* Workshop: use the full visible cards so mouse and touch targets stay large. */
  .sw2-workshop-activity-make-book { left: 19.271%; top: 18.848%; width: 22.721%; height: 29.59%; }
  .sw2-workshop-activity-record-voice { left: 43.229%; top: 18.848%; width: 25.13%; height: 29.59%; }
  .sw2-workshop-activity-colouring { left: 69.922%; top: 18.848%; width: 24.74%; height: 29.59%; }
  .sw2-workshop-activity-memory { left: 43.229%; top: 49.805%; width: 25.195%; height: 28.906%; }
  .sw2-workshop-activity-puzzle { left: 69.922%; top: 49.805%; width: 24.74%; height: 28.906%; }
  .sw2-workshop .sw2-back { left: .977%; top: 89.648%; width: 13.672%; height: 7.715%; }

  /* Library: the cover and sidebar controls lead to the same nested routes. */
  .sw2-library-book,
  .sw2-library-book-available,
  .sw2-library-experiences {
    display: contents;
  }
  .sw2-library .sw2-back { left: 1.172%; top: 2.637%; width: 17.383%; height: 11.23%; }
  .sw2-library-experience-ebook { left: 22.461%; top: 26.172%; width: 18.359%; height: 35.254%; }
  .sw2-library-experience-bedtime { left: 41.341%; top: 26.172%; width: 17.578%; height: 35.254%; }
  .sw2-library-shortcut-ebook { left: 1.367%; top: 14.746%; width: 17.188%; height: 7.812%; }
  .sw2-library-shortcut-bedtime { left: 1.367%; top: 22.754%; width: 17.188%; height: 7.715%; }
  .sw2-library-shortcut-adventure { left: 1.367%; top: 30.762%; width: 17.188%; height: 7.031%; }
  .sw2-library-shortcut-favourites { left: 1.367%; top: 37.793%; width: 17.188%; height: 7.227%; }
  .sw2-library-shortcut-friends { left: 1.302%; top: 45.117%; width: 17.318%; height: 7.52%; }
  .sw2-library-shortcut:disabled {
    cursor: default;
    filter: none;
    pointer-events: none;
  }

  .sw2-library-shortcut:disabled::after {
    content: attr(data-unavailable-label);
    position: absolute;
    inset: 12% 7%;
    display: grid;
    place-items: center;
    border: clamp(1px, .12vw, 2px) solid rgba(91, 49, 14, .72);
    border-radius: 999px;
    color: #4b280e;
    background: rgba(255, 225, 157, .92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    font-size: clamp(.42rem, .82vw, .78rem);
    font-weight: 900;
    line-height: 1;
    text-align: center;
  }
}

@media (max-width: 899px), screen and (min-width: 900px) and (max-width: 1199px) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  .sw2-screen {
    width: 100vw;
    min-height: 0;
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    aspect-ratio: auto;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: start;
    overscroll-behavior: contain;
    background-attachment: fixed;
    background-position: center top;
    box-shadow: none;
  }

  .sw2-home {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 82px 14px calc(22px + env(safe-area-inset-bottom));
  }

  .sw2-language-switch {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .sw2-language-button {
    min-width: 0;
    min-height: 48px;
    padding: .4em .72em;
    font-size: .83rem;
  }

  .sw2-home-hero,
  .sw2-home-values,
  .sw2-home-navigation,
  .sw2-home-footer {
    position: relative;
    inset: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    transform: none;
  }

  .sw2-home-hero {
    padding: 18px 22px;
    border-radius: 26px 18px 27px 20px;
  }

  .sw2-home-hero h1 {
    font-size: clamp(2.3rem, 12.5vw, 4rem);
  }

  .sw2-home-values {
    align-self: center;
    width: auto;
    max-width: 100%;
  }

  .sw2-home-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    margin-top: 30px;
  }

  .sw2-home-card {
    min-height: 148px;
    padding-top: 56px;
  }

  .sw2-home-card-icon {
    top: -24px;
    width: 76px;
  }

  .sw2-home-card-copy strong { font-size: clamp(.88rem, 4vw, 1.12rem); }
  .sw2-home-card-copy small { font-size: clamp(.62rem, 2.9vw, .78rem); }
  .sw2-home-footer { min-width: 0; }

  .sw2-workshop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 82px 14px calc(28px + env(safe-area-inset-bottom));
  }

  .sw2-workshop-heading,
  .sw2-workshop-navigation {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }

  .sw2-workshop-heading {
    padding: 22px 18px;
  }

  .sw2-workshop-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .sw2-workshop-activity {
    min-height: 190px;
    padding-top: 82px;
  }

  .sw2-workshop-activity-icon {
    top: 16px;
    width: 72px;
  }

  .sw2-workshop-activity:last-child {
    grid-column: 1 / -1;
  }

  .sw2-library {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 82px 14px calc(28px + env(safe-area-inset-bottom));
  }

  .sw2-back {
    position: absolute;
    top: 12px;
    left: 12px;
    min-height: 50px;
  }

  .sw2-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sw2-library-heading,
  .sw2-library-navigation {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }

  .sw2-library-heading { padding: 22px 18px; }
  .sw2-library-navigation { grid-template-columns: 1fr; gap: 22px; }
  .sw2-library-book { min-height: 170px; }
  .sw2-library-book-available { grid-template-columns: minmax(112px, .72fr) 1.28fr; }
}

/*
 * v22 private staging — compact semantic layout for phones and portrait
 * tablets. Narrow screens use one live UI layer, a cropped character vignette
 * and compact 44px+ touch targets; v25 adds the separate first-visit artboard
 * showcase below without turning the artwork into a second interface layer.
 */
@media screen and (max-width: 899px), screen and (min-width: 900px) and (max-width: 1199px) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  .sw2-screen {
    min-height: 100svh;
    height: auto;
    max-height: none;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
    background-attachment: scroll;
    background-image:
      linear-gradient(180deg, rgba(3, 36, 26, .08), rgba(3, 31, 23, .76)),
      url("../assets/forest-v09/scene-clearing.webp");
  }

  .sw2-home,
  .sw2-workshop,
  .sw2-library {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sw2-home {
    padding-top: calc(66px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .sw2-language-switch {
    z-index: 30;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
  }

  .sw2-language-button {
    min-height: 44px;
    padding: .32em .66em;
    border-width: 2px;
    font-size: .76rem;
  }

  .sw2-home-hero {
    order: 1;
    padding: 11px 14px 12px;
    border-width: 3px;
    border-radius: 20px 14px 21px 15px;
  }

  .sw2-home-hero p { font-size: .72rem; }
  .sw2-home-hero h1 {
    margin-top: 0;
    font-size: clamp(1.9rem, 10vw, 3rem);
    line-height: .88;
  }
  .sw2-home-hero div { font-size: .7rem; }

  .sw2-home-values {
    order: 2;
    align-self: center;
    max-width: 100%;
    padding: .35em .8em;
    font-size: .67rem;
    line-height: 1.15;
  }

  .sw2-home.welcome-screen::after,
  .sw2-workshop::after,
  .sw2-library::after {
    content: none;
    display: none;
  }

  .sw2-mobile-vignette {
    position: relative;
    z-index: 1;
    flex: 0 0 clamp(104px, 31vw, 136px);
    width: 100%;
    height: clamp(104px, 31vw, 136px);
    display: block;
    overflow: hidden;
    border: 3px solid rgba(231, 181, 88, .92);
    border-radius: 22px 14px 24px 16px;
    background-repeat: no-repeat;
    box-shadow: 0 7px 0 rgba(64, 31, 7, .8), 0 12px 24px rgba(0, 0, 0, .32);
    pointer-events: none;
  }

  .sw2-home .sw2-mobile-vignette { order: 3; }
  .sw2-mobile-vignette-friends {
    background-image: url("workshop/assets/puzzle/meet-friends.jpg");
    background-position: center 43%;
    background-size: cover;
  }

  .sw2-home-navigation {
    order: 4;
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .sw2-home-card {
    min-height: 68px;
    max-height: 82px;
    padding: 7px 8px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 7px;
    border-width: 2px;
    border-radius: 16px 10px 17px 11px;
    text-align: left;
  }

  .sw2-home-card-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 42px;
    border-width: 2px;
    transform: none;
  }

  .sw2-home-card-copy { gap: 2px; }
  .sw2-home-card-copy strong { font-size: clamp(.78rem, 3.6vw, 1rem); line-height: 1.02; }
  .sw2-home-card-copy small { font-size: clamp(.59rem, 2.7vw, .72rem); line-height: 1.08; }
  .sw2-home-footer { display: none; }

  .sw2-workshop,
  .sw2-library {
    padding-top: calc(64px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .sw2-back {
    top: max(8px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    min-width: 48px;
    width: 48px;
    min-height: 44px;
    height: 44px;
    padding: 7px;
    justify-content: center;
  }

  .sw2-back svg { width: 25px; height: 25px; }

  .sw2-workshop-heading,
  .sw2-library-heading {
    order: 1;
    padding: 12px 14px;
    border-width: 3px;
    border-radius: 20px 14px 21px 15px;
  }

  .sw2-workshop-heading h1,
  .sw2-library-heading h1 { font-size: clamp(1.65rem, 8vw, 2.35rem); }
  .sw2-workshop-heading > span,
  .sw2-library-heading > span { margin-top: .25em; font-size: .72rem; }

  .sw2-workshop .sw2-mobile-vignette,
  .sw2-library .sw2-mobile-vignette { order: 2; }
  .sw2-mobile-vignette-book {
    background-image: url("workshop/assets/puzzle/book.jpg");
    background-position: center 58%;
    background-size: cover;
  }

  .sw2-workshop-navigation {
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .sw2-workshop-activity {
    min-height: 74px;
    max-height: 88px;
    padding: 8px;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 8px;
    border-width: 2px;
    border-radius: 16px 10px 17px 11px;
    text-align: left;
  }

  .sw2-workshop-activity-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 44px;
    border-width: 2px;
    transform: none;
  }

  .sw2-workshop-activity-copy { gap: 2px; }
  .sw2-workshop-activity-copy strong { font-size: clamp(.75rem, 3.4vw, .98rem); }
  .sw2-workshop-activity-copy small { font-size: clamp(.58rem, 2.6vw, .7rem); }
  .sw2-workshop-activity:last-child { grid-column: 1 / -1; }

  .sw2-library-navigation {
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sw2-library-book {
    min-height: 76px;
    padding: 10px;
    gap: 7px;
    border-width: 3px;
    border-radius: 18px 12px 19px 13px;
  }

  .sw2-library-book-available {
    grid-column: 1 / -1;
    min-height: 142px;
    grid-template-columns: minmax(78px, .42fr) 1.58fr;
    grid-template-rows: auto 1fr;
  }

  .sw2-library-cover {
    max-height: 126px;
  }

  .sw2-library-book h2 { font-size: clamp(.9rem, 4vw, 1.1rem); }
  .sw2-library-experiences { gap: 7px; }
  .sw2-library-experience {
    min-height: 48px;
    padding: 5px 7px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
  }
  .sw2-library-experience strong { font-size: .75rem; }
  .sw2-library-experience small { font-size: .61rem; }
  .sw2-library-book-coming-soon .sw2-library-placeholder {
    width: 38px;
    border-width: 2px;
  }
  .sw2-library-book-coming-soon .sw2-library-status { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sw2-language-button,
  .sw2-home-card,
  .sw2-back,
  .sw2-workshop-activity,
  .sw2-library-experience {
    transition-duration: .001ms !important;
  }
}

/*
 * v24 private staging — Welcome-only guidance for touch tablets held in
 * portrait. The phone-first experience is isolated below; landscape tablets
 * and desktop keep the exact supplied 3:2 artboard.
 */
.sw2-tablet-orientation-gate {
  display: none;
}

.sw2-mobile-experience-gate,
.sw2-mobile-experience-restore {
  display: none;
}

@media screen and (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) and (any-pointer: coarse) {
  .sw2-home:not([data-sw2-tablet-gate="dismissed"]) {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .sw2-home:not([data-sw2-tablet-gate="dismissed"]) > :not(.sw2-tablet-orientation-gate) {
    visibility: hidden;
    pointer-events: none;
  }

  .sw2-home:not([data-sw2-tablet-gate="dismissed"]) > .sw2-tablet-orientation-gate {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: 100%;
    min-height: 100svh;
    padding:
      max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: clamp(18px, 3svh, 34px);
    overflow: auto;
    overscroll-behavior: contain;
    color: #fff6d8;
    background:
      linear-gradient(180deg, rgba(3, 35, 25, .2), rgba(2, 24, 18, .88)),
      url("../assets/forest-v09/scene-clearing.webp") center / cover no-repeat;
  }

  .sw2-tablet-orientation-artwork {
    width: min(calc(100vw - 48px), 920px);
    max-width: 100%;
    max-height: 56svh;
    aspect-ratio: 3 / 2;
    display: block;
    align-self: end;
    object-fit: contain;
    border: clamp(3px, .5vw, 6px) solid #e9bd67;
    border-radius: clamp(18px, 2.4vw, 30px);
    background: #0b3328;
    box-shadow:
      inset 0 0 0 2px rgba(255, 244, 194, .42),
      0 8px 0 rgba(68, 34, 8, .78),
      0 18px 42px rgba(0, 0, 0, .46);
  }

  .sw2-tablet-orientation-panel {
    width: min(100%, 720px);
    padding: clamp(18px, 2.5vw, 28px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 18px;
    border: 3px solid #dda552;
    border-radius: 24px 16px 25px 17px;
    color: #2e1b0c;
    background:
      linear-gradient(90deg, transparent 0 8%, rgba(104, 53, 13, .1) 8.2% 8.7%, transparent 9% 91%, rgba(104, 53, 13, .1) 91.3% 91.8%, transparent 92%),
      linear-gradient(180deg, #ffd98e, #e99b42);
    box-shadow: inset 0 0 0 2px rgba(255, 242, 196, .72), 0 7px 0 #5b2c09, 0 15px 34px rgba(0, 0, 0, .38);
    text-align: left;
  }

  .sw2-tablet-orientation-cue {
    grid-row: 1 / span 2;
    width: clamp(56px, 9vw, 78px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 3px solid #9d5b20;
    border-radius: 50%;
    color: #fff8dc;
    background: linear-gradient(180deg, #299265, #12613f);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 5px 0 #542805;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1;
  }

  .sw2-tablet-orientation-panel h2,
  .sw2-tablet-orientation-panel p {
    margin: 0;
  }

  .sw2-tablet-orientation-panel h2 {
    align-self: end;
    font-size: clamp(1.45rem, 3.5vw, 2rem);
    line-height: 1.05;
  }

  .sw2-tablet-orientation-panel p {
    align-self: start;
    font-size: clamp(.92rem, 2.1vw, 1.15rem);
    font-weight: 700;
    line-height: 1.3;
  }

  .sw2-tablet-orientation-continue {
    grid-column: 1 / -1;
    min-height: 48px;
    margin-top: 12px;
    padding: .7em 1.2em;
    border: 3px solid #ffe08a;
    border-radius: 999px;
    color: #fff8e5;
    background: linear-gradient(180deg, #278653, #125c38);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 5px 0 #4d2507;
    font-weight: 900;
    cursor: pointer;
  }

  .sw2-tablet-orientation-continue:hover,
  .sw2-tablet-orientation-continue:focus-visible {
    outline: 4px solid #fff29c;
    outline-offset: 3px;
    filter: brightness(1.08);
  }

  .sw2-tablet-orientation-continue:active {
    transform: translateY(3px);
  }

  .sw2-home[data-sw2-tablet-gate="dismissed"] > .sw2-tablet-orientation-gate,
  .sw2-tablet-orientation-gate[hidden] {
    display: none;
  }
}

/*
 * v25 private staging — a first phone visit presents the exact 3:2 home
 * artboard before the user enters the compact mobile interface. The choice is
 * stored by the live module; CSS only controls the two orientations.
 */
@media screen and (max-width: 599px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .sw2-home[data-sw2-mobile-experience="showcase"] {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .sw2-home[data-sw2-mobile-experience="showcase"] > :not(.sw2-mobile-experience-gate) {
    visibility: hidden;
    pointer-events: none;
  }

  .sw2-home[data-sw2-mobile-experience="showcase"] > .sw2-mobile-experience-gate {
    position: fixed;
    z-index: 200;
    inset: 0;
    width: 100%;
    min-height: 100svh;
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    display: grid;
    grid-template-rows: auto auto;
    place-content: center;
    place-items: center;
    gap: clamp(12px, 2.5svh, 22px);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #fff6d8;
    background:
      linear-gradient(180deg, rgba(3, 35, 25, .18), rgba(2, 24, 18, .9)),
      url("../assets/forest-v09/scene-clearing.webp") center / cover no-repeat;
  }

  .sw2-mobile-experience-artwork {
    width: min(100%, 480px);
    max-height: 43svh;
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: contain;
    border: 3px solid #e9bd67;
    border-radius: 18px;
    background: #0b3328;
    box-shadow: inset 0 0 0 2px rgba(255, 244, 194, .38), 0 7px 0 rgba(68, 34, 8, .78), 0 16px 34px rgba(0, 0, 0, .44);
  }

  .sw2-mobile-experience-panel {
    width: min(100%, 480px);
    padding: 14px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 7px 12px;
    border: 3px solid #dda552;
    border-radius: 21px 14px 22px 15px;
    color: #2e1b0c;
    background: linear-gradient(180deg, #ffd98e, #e99b42);
    box-shadow: inset 0 0 0 2px rgba(255, 242, 196, .72), 0 6px 0 #5b2c09, 0 13px 28px rgba(0, 0, 0, .38);
  }

  .sw2-mobile-experience-cue {
    grid-row: 1;
    width: 54px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 3px solid #9d5b20;
    border-radius: 50%;
    color: #fff8dc;
    background: linear-gradient(180deg, #299265, #12613f);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 #542805;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
  }

  .sw2-mobile-experience-message h2,
  .sw2-mobile-experience-message p {
    margin: 0;
  }

  .sw2-mobile-experience-message h2 {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
    line-height: 1.04;
  }

  .sw2-mobile-experience-message p {
    margin-top: 4px;
    font-size: clamp(.86rem, 4vw, 1rem);
    font-weight: 700;
    line-height: 1.25;
  }

  .sw2-mobile-experience-open {
    grid-column: 1 / -1;
    min-height: 48px;
    margin-top: 5px;
    padding: .68em 1em;
    border: 3px solid #ffe08a;
    border-radius: 999px;
    color: #fff8e5;
    background: linear-gradient(180deg, #7736b4, #4d207f);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 5px 0 #4d2507;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
  }
}

@media screen and (max-width: 1199px) and (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .sw2-home[data-sw2-mobile-experience="showcase"] {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    aspect-ratio: auto;
    overflow: hidden;
    background: #061a16;
  }

  .sw2-home[data-sw2-mobile-experience="showcase"] > :not(.sw2-mobile-experience-gate) {
    visibility: hidden;
    pointer-events: none;
  }

  .sw2-home[data-sw2-mobile-experience="showcase"] > .sw2-mobile-experience-gate {
    position: fixed;
    z-index: 200;
    inset: 0;
    width: 100%;
    height: 100svh;
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 7px;
    overflow: hidden;
    background: radial-gradient(circle at center, #163d2f, #020b09 80%);
  }

  .sw2-mobile-experience-artwork {
    grid-row: 1;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - 62px);
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: contain;
    background: #0b3328;
    box-shadow: 0 0 40px rgba(0, 0, 0, .62);
  }

  .sw2-mobile-experience-panel {
    grid-row: 2;
    z-index: 2;
    display: block;
  }

  .sw2-mobile-experience-cue,
  .sw2-mobile-experience-message {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sw2-mobile-experience-open {
    min-width: min(245px, 42vw);
    min-height: 48px;
    padding: .62em 1.15em;
    border: 3px solid #ffe08a;
    border-radius: 999px;
    color: #fff8e5;
    background: linear-gradient(180deg, #7736b4, #4d207f);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 5px 0 #3a1705, 0 10px 24px rgba(0,0,0,.45);
    font-size: clamp(.82rem, 2.4vw, 1rem);
    font-weight: 900;
    cursor: pointer;
  }
}

/*
 * v26 private staging — compact Welcome owns the vertical scroll. The
 * earlier semantic reflow deliberately grows taller than a phone in
 * landscape, while the legacy document root remains fixed for artboards.
 */
@media screen and (max-width: 599px) and (hover: none) and (pointer: coarse), screen and (max-width: 1199px) and (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .sw2-home[data-sw2-mobile-experience="compact"] {
    min-height: 0;
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .sw2-home[data-sw2-mobile-experience="compact"] > .sw2-mobile-experience-restore {
    order: 5;
    align-self: center;
    min-height: 48px;
    padding: .65em 1.15em;
    display: block;
    border: 3px solid #e2ad58;
    border-radius: 999px;
    color: #fff8df;
    background: rgba(20, 91, 59, .94);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 5px 0 rgba(65, 31, 7, .88);
    font-size: .88rem;
    font-weight: 900;
    cursor: pointer;
  }

  .sw2-mobile-experience-open:hover,
  .sw2-mobile-experience-open:focus-visible,
  .sw2-mobile-experience-restore:hover,
  .sw2-mobile-experience-restore:focus-visible {
    outline: 4px solid #fff29c;
    outline-offset: 3px;
    filter: brightness(1.08);
  }

  .sw2-mobile-experience-open:active,
  .sw2-mobile-experience-restore:active {
    transform: translateY(3px);
  }

  .sw2-mobile-experience-gate[hidden],
  .sw2-mobile-experience-restore[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw2-mobile-experience-open,
  .sw2-mobile-experience-restore {
    transition-duration: .001ms !important;
  }
}