/* The other pages (WM-0204): How to play, Levels, Playing tips, Support,
   Press, About and the posts, as the PO approved WM-0207 rounds 5 and 7b
   (PROJECT.md §10 09f4851; WM-0206 SITE_UX.md r5 §13–§21). The values are the
   plates' (round 5b's sources at 1440, 768 and 390), with the PO's typography
   rule (round 6b PATTERN_SCAN F08–F17): reading body 17/28, 16/26 on phones,
   in Ink; lists with a hanging en dash.
   Apple's watches (stage B) and the bare screens (stage A) stand still: no
   transform, filter, shadow, opacity or animation on them or any ancestor;
   only our art moves (the hero's pieces rise in, the rail's ball rolls). */

.inner {
  --pad: #ead7bd99;        /* the soft pad behind a watch: the page's material */
  --route: #8a7c6f;
  --goal: #437a63;
  --gap-sec: 200px;        /* between reading sections */
  --read-x: 352px;         /* where the reading column starts on the page */
  flex: 1 0 auto;
  width: 100%;
  background: radial-gradient(ellipse at 75% 8%, var(--light) 0, transparent 45%) no-repeat;
  font-size: 17px;
  line-height: 28px;
}
.inner.art-tips { --pad: #d4e2d699; }
.inner.art-support { --pad: #d7dfe399; }
.inner.art-press { --pad: #e2cdb399; }
.inner.art-news { --pad: #dcd6ee99; }

/* The words and "On this page" stand in the grid on their own; only on phones
   do they make one box (below). */
.inner-lead { display: contents; }
.inner-grid {
  position: relative;
  display: grid;
  grid-template-columns: 220px 68px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 32px 64px 0;
}

/* The hero: the breadcrumb, the H1 and the answer on the left (600 px), the
   page's art on the right (600 px), 80 px apart; about 472 px tall. */
.inner-copy {
  grid-row: 1;
  grid-column: 1 / -1;
  width: min(600px, 50% - 40px);
  min-height: 440px;
}
.inner .crumbs ol { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.inner .crumbs a { color: var(--link); text-underline-offset: 3px; }
.inner h1 {
  margin: 24px 0 0;
  font-size: 48px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: -1px;
  text-wrap: balance;
}
.answer { margin-top: 24px; }
.answer p { margin: 0 0 16px; }
.answer p:last-child { margin-bottom: 0; }

.inner-art {
  position: relative;
  container-type: inline-size;
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: start;
  width: min(600px, 50% - 40px);
  height: 440px;
  margin-left: calc(min(600px, 50% - 40px) + 80px);
}
.inner-art .island {
  position: absolute;
  z-index: 10;
  left: 3.333%;
  top: 36px;
  width: 93.333%;
  height: auto;
  max-width: none;
}
.inner-art .fig { position: absolute; inset: 0; width: auto; margin: 0; z-index: 40; }
.inner-art .fig .pad { display: none; }
.inner-art .device { position: absolute; left: calc(50% - 80px); top: 0; margin: 0; }
.inner-art .fig figcaption { position: absolute; left: calc(50% - 120px); top: 414px; width: 300px; margin: 0; }

/* Levels: the five chapters' tokens on their fanned islands (R7), each at
   its island's place on the canvas (--fx, --fy: its share of the canvas at
   1440). Smaller, the plates keep each token's centre at its share, so the
   32 px token moves by 16 px × (1 − the canvas's width / 560). */
.fan-token {
  position: absolute;
  z-index: 20;
  left: calc(3.333cqw + var(--fx) * 93.333cqw);
  top: calc(36px + var(--fy) * 62.222cqw);
}
.fan-token .token { width: 32px; height: 32px; font-size: 14px; background: radial-gradient(circle at 50% 50%, #29221c 0, #29221c 70%, #9c8774 74%, #e2d7ce 100%); }
.fan-1 { --fx: 0.1667; --fy: 0.7186; }
.fan-2 { --fx: 0.4207; --fy: 0.5724; }
.fan-3 { --fx: 0.538; --fy: 0.4553; }
.fan-4 { --fx: 0.655; --fy: 0.338; }
.fan-5 { --fx: 0.7787; --fy: 0.2013; }
.token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: #fff8ef;
  font: 800 16px/20px var(--font-numeral);
  background: radial-gradient(circle at 48% 64%, #29221c 0, #29221c 57%, #665447 62%, #c8b8a7 67%, #e2d7ce 100%);
  box-shadow: inset 0 2px 3px #22170e38;
}

/* Our art rises in once, on load (M18): never the text, a screen or a watch. */
@media (prefers-reduced-motion: no-preference) {
  [data-wm-rise] { animation: wm-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .fan-token[data-wm-rise] { animation-delay: 120ms; }
}
@keyframes wm-rise {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

/* "On this page": at 1200 px and wider a sticky rail left of the reading
   column, each link beside a hole on a dashed line, the steel ball in the
   hole of the section in view and a goal ring after the last (M14, M15).
   Narrower, the same list under the answer, 44 px rows, no ball. */
.toc {
  position: sticky;
  top: 32px;
  z-index: 60;
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  margin-top: 180px;
  font-size: 14px;
  line-height: 22px;
}
.toc-route {
  position: absolute;
  left: 0;
  top: -260px;
  overflow: visible;
  pointer-events: none;
}
.toc-route path, .route-line {
  fill: none;
  stroke: var(--route);
  stroke-width: 1.7;
  stroke-dasharray: 6 12;
}
.toc-label { margin: 0 0 20px; font-size: 14px; line-height: 20px; font-weight: 650; }
.toc ul { position: relative; margin: 0; padding: 0; list-style: none; }
.toc li { position: relative; }
.toc li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 21px;
  bottom: 0;
  border-left: 1px dashed var(--route);
}
.toc a {
  display: flex;
  align-items: flex-start;
  min-height: 62px;
  padding: 5px 0 16px 32px;
  color: var(--ink-2);
  text-decoration: none;
}
.toc li:last-child a { padding-bottom: 0; }
.toc a:hover .toc-text { text-decoration: underline; }
.toc a[aria-current="location"] { color: var(--ink); font-weight: 700; }
.hole {
  position: absolute;
  left: 4px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, #28221c 0, #28221c 53%, #9c8a77 65%, #e2d5c6 85%);
}
.toc-goal {
  position: relative;
  display: block;
  height: 44px;
}
.toc-goal::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  height: 7px;
  border-left: 1px dashed var(--route);
}
.toc-goal::after, .spine-goal {
  content: "";
  position: absolute;
  left: 1px;
  top: 10px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--goal);
  border-radius: 50%;
  background: var(--ground);
}
/* The ring is 18 px inside its 3 px border, the ball's size, so it sits 3 px further up and left
   than the ball's place: its centre is the ball's and the holes' (10 px across, 19 px down). */
.toc-goal::after { left: -2px; top: 7px; }
.toc-ball {
  position: absolute;
  z-index: 5;
  left: 1px;
  top: 0;
  width: 18px;
  height: 18px;
  translate: 0 var(--ball-y, 0px);
  rotate: var(--ball-turn, 0deg);
  pointer-events: none;
}
.toc-ball.is-rolling { transition: translate 300ms cubic-bezier(0.4, 0, 0.2, 1), rotate 300ms linear; }
.toc-ball.is-dropping { transition: translate 1.2s cubic-bezier(0.5, 0, 0.75, 0); }
@media (prefers-reduced-motion: reduce) {
  .toc-ball.is-rolling, .toc-ball.is-dropping { transition: none; }
}

/* The reading column: 640 px of text and a 260 px figure column, 40 px apart. */
.reading {
  position: relative;
  grid-row: 2;
  grid-column: 3;
  width: min(940px, 100% - 64px);
  margin-top: 180px;
}
.rsec { position: relative; }
.rsec + .rsec { margin-top: var(--gap-sec); }
.inner h2 {
  margin: 0 0 24px;
  font-size: 28px;
  line-height: 34px;
  font-weight: 750;
  letter-spacing: -0.35px;
  scroll-margin-top: 32px;
}
.inner h3 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.2px;
  scroll-margin-top: 32px;
}
.prose { max-width: 640px; }
.prose p { margin: 0 0 24px; }
.prose > :last-child, .prose li > :last-child { margin-bottom: 0; }
.prose a, .answer a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose strong { font-weight: 700; }
/* Lists: a hanging en dash (PATTERN_SCAN F13–F16); numbered steps keep their
   numerals, set in type (Albert Sans 650), never hole tokens. */
.prose ul { margin: 0 0 24px; padding: 0 0 0 22px; list-style: none; }
.prose ul > li { position: relative; margin-bottom: 16px; }
.prose ul > li::before { content: "–"; content: "–" / ""; position: absolute; left: -22px; }
.prose ul + p { margin-top: 24px; }
.prose ol { position: relative; margin: 0 0 24px; padding: 0 0 0 28px; }
.prose ol > li { position: relative; padding-left: 8px; margin-bottom: 24px; }
.prose ol > li::marker { font-weight: 650; }
.prose ol > li > strong:first-child { display: block; margin-bottom: 8px; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 640px) 260px;
  column-gap: 40px;
  align-items: start;
}

/* A figure: the watch at .36 (201.6 × 316.8) on a soft pad of the page's
   material, the caption (one line of data) 24 px under it. Stage A: the bare
   screen, 194 × 231.31, in its rounded shape. */
.fig { position: relative; width: 260px; margin: 0; }
.fig .pad {
  position: absolute;
  left: -4px;
  top: -24px;
  width: 268px;
  height: 365px;
  background: radial-gradient(ellipse at 50% 48%, var(--pad) 0, transparent 72%);
}
.device { position: relative; z-index: 40; width: 201.6px; height: 316.8px; margin: 0 auto; }
.device .watch, .device .screen { position: absolute; display: block; max-width: none; margin: 0; }
.device .watch { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.device .screen {
  left: 50%;
  top: 50%;
  width: 194px;
  height: 231.31px;
  margin: -115.655px 0 0 -97px;
  border-radius: 22px;
  object-fit: cover;
  background: #000;
}
.fig figcaption, .station-meta, .slab-captions {
  position: relative;
  z-index: 60;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 22px;
}
.fig figcaption { margin-top: 24px; text-align: center; }
/* Stage A: no hardware for the Crown's arrow to point at (round 5b). A
   figure's bare screen in a box of its own size, its top where the watch's
   would be, the caption 24 px under it (round 7b's A plates; wux1 r5b P3-4:
   not the watch's caption place, 70 px down). The hero and the stations keep
   the watch's box (round 5b's A plates). */
.stage-a .crown-arrow { display: none; }
.stage-a .reading .fig .device, .stage-a .post-lead .fig .device { width: 194px; height: 231.31px; }
.stage-a .reading .fig .device .screen, .stage-a .post-lead .fig .device .screen { left: 0; top: 0; margin: 0; }
.stage-a .post-lead .island { top: 66px; }
.stage-a .post-lead figcaption { margin-top: 86px; }
@media (max-width: 1199.98px) {
  .stage-a .reading .fig .device, .stage-a .post-lead .fig .device { width: 161.67px; height: 192.76px; }
  /* The lead's caption clears the island by 11 px, as at 1440. */
  .stage-a .post-lead figcaption { margin-top: 124px; }
}
.video-button {
  position: relative;
  z-index: 60;
  display: block;
  min-width: 132px;
  min-height: 44px;
  margin: 16px auto 0;
  padding: 9px 15px;
  border: 1px solid #85766a;
  border-radius: 24px;
  background: var(--card);
  color: #33271e;
  font: 600 14px/24px var(--font-text);
  cursor: pointer;
}
/* A play's control keeps its place from the first paint (wrev7 #6): unseen
   and out of reach until its video takes the still's place, so nothing
   below it moves then; without JavaScript, or a play no source serves, the
   place stays empty. */
.video-button[data-wm-waiting] { visibility: hidden; }
.video-button::before { content: "Ⅱ\a0"; content: "Ⅱ\a0" / ""; }
.video-button.is-paused::before { content: "▶\a0"; content: "▶\a0" / ""; }
/* The Digital Crown's caption and our curved arrow, outside the watch. */
.crown-cap {
  position: absolute;
  z-index: 60;
  left: 278px;
  top: 20px;
  width: 72px;
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 22px;
}
.crown-arrow {
  position: absolute;
  z-index: 60;
  left: 252px;
  top: 91.34px;
  width: 85px;
  height: 45px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
/* A step's figure stands in the figure column, top-aligned with its step: the
   list's text takes the row's text column (640 px, less where the reading
   column narrows, 1200–1419 px), so the figure ends at the column's edge,
   never past the window's. */
.prose ol > li > .fig { position: absolute; left: calc(100% + 40px); top: 0; }
@media (min-width: 1200px) {
  .prose:has(> ol > li > .fig) { max-width: min(640px, 100% - 300px); }
}
.fig-pair {
  display: flex;
  justify-content: center;
  gap: 80px;
  width: 100%;
  margin-top: 32px;
}
.fig-pair .pad { display: none; }

/* The page's end: its last words beside our goal piece (R5). */
.end .goal-art { display: block; width: 200px; height: auto; margin: 0 auto; }
.rsec-last > .end:not(:first-child) { margin-top: 40px; }
.rsec-last > h2 + .end:not(:first-child) { margin-top: 0; }
.rsec-last > .end.end-own { margin-top: var(--gap-sec); }
.store-link { margin: 24px 0 0; font-weight: 550; }
.store-link a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* A link that leaves the site carries "↗" (round 5; SITE_UX §19.1): the App
   Store's and every outside address in the words, the legal pages' sources
   included. The site's own files (the press kit) carry none. */
.store-link a::after, .prose a[href^="http"]::after { content: "\a0↗"; content: "\a0↗" / ""; }
/* A link standing on its own gets a 44 px target (wrev7 #7): padding above
   and below the inline link widens what a finger hits, not what is drawn or
   where anything stands, and keeps it above the words that follow. The
   press kit's whole button is its link. */
.crumbs a, .store-link a, .feed-link a, .post-back a, .post-near a, .simple-back a, .simple-guides a { position: relative; z-index: 1; padding-block: 13px; }
.crumbs a { padding-block: 14px; }
.prose p:has(> a[href$=".zip"]) > a::before { content: ""; position: absolute; inset: 0; }

/* The spine (narrower than 1200 px): a dashed line in the page's margin with
   a hole at each H2, ending in the goal ring by the last section. */
.spine-hole, .spine-goal { display: none; }

.inner ~ .foot { margin-top: 200px; }

/* 768–1199: the hero in two columns, "On this page" under the answer; the
   reading column 560 px at x 104; figures under their text at .30. */
@media (max-width: 1199.98px) {
  .inner { --gap-sec: 160px; --read-x: 104px; }
  .inner-grid {
    grid-template-columns: minmax(0, 1fr) 262px;
    grid-template-rows: auto auto 1fr;
    column-gap: 32px;
    padding: 32px var(--gutter) 0;
  }
  .inner-copy { grid-column: 1; width: auto; min-height: 0; }
  .inner h1 { font-size: 40px; line-height: 48px; letter-spacing: -0.65px; }
  .inner-art { grid-column: 2; grid-row: 1 / span 2; width: 262px; height: 350px; margin: 0; }
  .inner-art .island { left: -34px; top: 90px; width: 330px; }
  .inner-art .device { left: 47px; top: 40px; }
  .inner-art .fig figcaption { left: 0; top: 334px; width: 262px; }
  .fan-token { left: calc(-34px + var(--fx) * 330px - 6.571px); top: calc(90px + var(--fy) * 220px - 6.571px); }
  .toc { position: relative; top: auto; grid-column: 1; grid-row: 2; margin-top: 32px; }
  .toc-route, .toc-goal, .toc-ball { display: none; }
  .toc-label { margin-bottom: 16px; }
  .toc a { align-items: center; min-height: 44px; padding: 0 0 0 32px; font-size: 15px; }
  .toc .hole { top: 16px; }
  .toc li::before { top: 27px; }
  .toc li:last-child::before { display: none; }
  .reading { grid-column: 1 / -1; grid-row: 3; width: min(560px, 100%); margin: 140px 0 0 72px; }
  .row { display: block; }
  .prose { max-width: 560px; }
  .fig { margin: 32px auto 0; }
  .device { width: 168px; height: 264px; }
  .device .screen { width: 161.67px; height: 192.76px; margin: -96.38px 0 0 -80.83px; border-radius: 18.33px; }
  .fig .pad { left: 21px; width: 218px; height: 312px; }
  .crown-cap { left: 244px; top: 0; width: 72px; }
  .crown-arrow { left: 236px; top: 71.45px; }
  .prose ol > li > .fig { position: relative; left: auto; top: auto; }
  .fig-pair { gap: 22px; }
  .fig-pair .fig { width: 168px; margin: 0; }
  .end .goal-art { margin: 32px 0 0 auto; }
  /* The spine: x 16 on the page, whatever the reading column's place. */
  .reading::before {
    content: "";
    position: absolute;
    left: calc(16px - var(--read-x) + 5px);
    top: 12px;
    bottom: 22px;
    width: 1.7px;
    background: repeating-linear-gradient(to bottom, var(--route) 0 6px, transparent 6px 18px);
  }
  .spine-hole, .spine-goal { display: block; }
  .spine-hole {
    position: absolute;
    left: calc(16px - var(--read-x));
    top: 11px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 70%, #28221c 0, #28221c 53%, #9c8a77 65%, #e2d5c6 85%);
  }
  .spine-goal { top: auto; bottom: 0; left: calc(16px - var(--read-x) - 3px); }
  .inner ~ .foot { margin-top: 160px; }
}

/* The guides' island reaches 34 px past the art: with the 32 px gutter
   (768–1023) its box stops at the window, and its picture, at its own scale,
   loses those 2 px, so the page never scrolls sideways. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .inner:not(.no-toc) .inner-art .island { width: calc(330px - max(0px, 34px - var(--gutter))); height: 220px; object-fit: cover; object-position: 0 0; }
}

/* Phones (below 768 px): stacked; the art follows "On this page"; the
   reading column 342 px at x 32; figures 358 px wide, centred on the page. */
@media (max-width: 767.98px) {
  .inner { --gap-sec: 140px; --read-x: 32px; font-size: 16px; line-height: 26px; }
  .inner-grid { display: flex; flex-direction: column; padding: 32px 16px 0; }
  .inner h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.55px; }
  .toc { align-self: stretch; margin-top: 32px; }
  .toc a { font-size: 14px; }
  /* A hero with Apple's watch, on a first visit (the cookie sheet asks): the
     watch starts 24 px below the first screen (round 5b's 390 plates: y 868
     on an 844 px phone), clear of the sheet: the words and the list hold at
     least the view's height less the header (88), the grid's top (32), the
     art's gap (32) and the watch's top in it (16), plus 24. Otherwise the art
     follows "On this page". */
  :root.wm-consent-first .inner-grid:has(.inner-art.with-watch) .inner-lead { display: flex; flex-direction: column; min-height: calc(100svh - 144px); }
  .inner-art { width: 100%; height: 280px; margin: 32px 0 0; }
  .inner-art.with-watch { height: 410px; }
  .inner-art .island { left: -16px; top: 0; width: calc(100% + 32px); }
  .inner-art.with-watch .island { top: 80px; }
  .inner-art .device { left: calc(50% - 84px); top: 16px; }
  .inner-art .fig figcaption { left: 0; top: 380px; width: 100%; }
  .fan-token { left: calc(-32px + (var(--fx) + 0.028571) * (100cqw + 32px)); top: calc((var(--fy) + 0.042857) * (100cqw + 32px) * 0.6667 - 16px); }
  .reading { width: auto; margin: 140px 0 0 16px; }
  .prose { max-width: 342px; }
  .inner h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.25px; }
  .fig { width: calc(100% + 16px); margin-left: -16px; }
  .fig .pad { left: calc(50% - 109px); }
  .crown-cap { left: calc(50% + 115px); width: 64px; }
  /* Below 380 px the arrow keeps inside the figure (its right at the
     window's edge), its tip still clear of the Crown. */
  .crown-arrow { left: min(calc(50% + 105px), calc(100% - 69px)); }
  .prose ol { padding-left: 26px; }
  .prose ol > li > .fig { width: calc(100% + 50px); margin-left: -50px; }
  .fig-pair { width: calc(100% + 16px); margin-left: -16px; }
  .end .goal-art { width: 150px; }
  .inner ~ .foot { margin-top: 140px; }
}

@media print {
  .toc-route, .toc-ball, .toc-goal, .spine-hole, .spine-goal, .video-button, .fig .pad { display: none !important; }
  .toc { position: static; }
}

/* ---- Levels: the stations, the slab, the look chooser ------------------- */
/* A chapter's station (round 5b): its island (460 px) with the watch at .36
   standing on it, the token and the station's line under it, the chapter's
   text beside it; the stations zig-zag, 1 left, 2 right … */
.station {
  display: grid;
  grid-template-columns: 460px minmax(0, 400px);
  column-gap: 80px;
  align-items: center;
  min-height: 452px;
  margin-top: 48px;
}
.station.reverse { grid-template-columns: minmax(0, 400px) 460px; }
.station.reverse .station-art { order: 2; }
.station-art { position: relative; height: 452px; margin: 0; }
.station-art .island { position: absolute; z-index: 10; left: 0; top: 76px; width: 460px; height: auto; max-width: none; }
.station-art .device { position: absolute; left: 129.2px; top: 0; margin: 0; }
.station-meta {
  position: absolute;
  left: 70px;
  top: 410px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}
.station-copy { max-width: 400px; }
.station-art > .video-button { position: absolute; right: 0; bottom: 0; margin: 0; }
.station-copy p { margin: 0 0 24px; }
.station-copy > :last-child { margin-bottom: 0; }
.slab { margin: 32px 0 0; max-width: 640px; }
.slab img { display: block; width: 100%; height: auto; }
.slab-captions { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 0; padding: 0; list-style: none; text-align: center; }
.row > .prose, .row > .slab { grid-column: 1; }
.row > .fig, .row > .chooser { grid-column: 2; grid-row: 1 / span 4; }

/* A chooser (round 5b): real radio chips (≥ 44 px) in a fieldset; the
   checked chip's screen shows in the one watch, swapped at once (an Apple
   image never fades). Works without JavaScript. Three chips stand above the
   watch in the figure column (Tips' zoom); more stand under the text, the
   watch beside them (Levels' looks). */
.choices-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.choices-set legend { margin: 0 0 16px; padding: 0; font-size: 16px; line-height: 24px; font-weight: 650; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choice {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #a18e7e;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
}
.choice:has(input:checked) { padding: 9px; border: 2px solid var(--link); background: #eaf0e7; color: #213b2f; font-weight: 650; }
.choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.choice input {
  appearance: none;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid #77695e;
  border-radius: 50%;
  background: var(--card);
}
.choice input:checked { border-color: var(--link); background: radial-gradient(circle, var(--link) 0 3.5px, transparent 4px); }
.choice input:focus-visible { outline: none; }
.choice .puck { display: block; width: 20px; height: auto; }
.chooser .fig { margin-top: 32px; }
.chooser-note { margin: 24px 0 0; }
.choice-screen, .choice-cap, .device .choice-screen { display: none; }
.chooser:has(input[value="0"]:checked) [data-choice="0"],
.chooser:has(input[value="1"]:checked) [data-choice="1"],
.chooser:has(input[value="2"]:checked) [data-choice="2"],
.chooser:has(input[value="3"]:checked) [data-choice="3"],
.chooser:has(input[value="4"]:checked) [data-choice="4"],
.chooser:has(input[value="5"]:checked) [data-choice="5"] { display: block; }
.chooser-wide { display: contents; }
.row-chooser .chooser-wide .choices-set { grid-column: 1; margin-top: 32px; }
.row-chooser .chooser-wide .chooser-note { grid-column: 1; margin-top: 24px; }
.row-chooser .chooser-wide .choices { gap: 8px; }
.chooser-wide .choice { gap: 6px; }
.row-chooser .chooser-wide .fig { grid-column: 2; grid-row: 2 / span 3; margin-top: 72px; }

/* ---- Support: the questions, always open --------------------------------- */
.qa { position: relative; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.rsec > h2 + .qa, .rsec > h2 + .first-clear + .qa { margin-top: 0; }
.qa h3 { margin-bottom: 14px; }
.qa > .fig { margin-top: 0; }
@media (max-width: 1199.98px) { .qa > .fig { margin-top: 32px; } }

@media (max-width: 1199.98px) {
  .station, .station.reverse { display: flex; flex-direction: column; gap: 32px; align-items: center; margin-top: 48px; }
  .station.reverse .station-art { order: 0; }
  .station-art { width: 460px; max-width: 100%; height: 420px; }
  .station-art .island { top: 64px; }
  .station-art .device { left: 146px; }
  .station-meta { top: 370px; }
  .station-copy { max-width: 560px; align-self: stretch; }
  .chooser-wide { display: block; }
  .chooser { max-width: 560px; }
  .chooser .fig, .row-chooser .chooser-wide .fig { margin: 32px auto 0; }
}
@media (max-width: 767.98px) {
  .station, .station.reverse { gap: 24px; margin-top: 40px; }
  .station-art { width: calc(100% + 16px); max-width: none; height: 410px; margin-left: -16px; align-self: flex-start; }
  .station-art .island { left: -16px; top: 70px; width: calc(100% + 32px); }
  .station-art .device { left: calc(50% - 84px); top: 0; }
  .station-meta { left: 16px; top: 366px; }
  .station-copy { max-width: 342px; }
  .slab { width: calc(100% + 16px); max-width: none; margin-left: -16px; }
  .choices { gap: 8px; }
  .chooser .fig, .row-chooser .chooser-wide .fig { width: calc(100% + 16px); margin: 32px 0 0 -16px; }
}

/* ---- Support: the contact, at the route's goal --------------------------- */
.contact-head { display: flex; gap: 24px; align-items: center; margin-bottom: 32px; }
.contact-head h2 { margin: 0; }
.contact-goal { display: block; width: 100px; height: auto; }
.contact-body { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 300px); column-gap: 80px; align-items: start; }
.contact-body.no-form { grid-template-columns: minmax(0, 640px); }
.form-lead { margin: 0 0 20px; }
.contact-more { margin-top: 40px; }
/* The form (WM-0206 §17.3; round 5b): labels 16/24, light fields 48 px tall,
   a 170 px message box, the dark Send; the note and the status in reading
   body (PATTERN_SCAN F10, F11). */
.contact .wm-form { width: 100%; margin: 0; gap: 0; }
.contact .wm-form label { display: block; margin: 24px 0 10px; font-size: 16px; line-height: 24px; font-weight: 650; }
.contact .wm-form label:first-of-type { margin-top: 0; }
.contact .wm-optional { font-weight: 450; }
.contact .wm-form input, .contact .wm-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--field-edge);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: 450 16px/26px var(--font-text);
}
.contact .wm-form textarea { height: 170px; resize: vertical; }
/* A field's error (§17.4): a 2 px Ink underline and our mark, never colour
   alone; the status in the plates' red, a sent one in their green beside
   our goal piece. */
.contact .wm-form [aria-invalid="true"] { padding-right: 40px; border-bottom: 2px solid var(--ink); background: var(--card) url("/assets/img/field-mark.11311fe805.svg") right 16px top 14px / 6px 18px no-repeat; }
.contact .wm-form button {
  width: 150px;
  min-height: 48px;
  margin-top: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--light);
  font: 650 15px/24px var(--font-text);
  cursor: pointer;
}
.contact .wm-form button.is-sending { background: #63584e; }
.contact .wm-note, .contact .wm-status { margin: 20px 0 0; font-size: 17px; line-height: 28px; }
.contact .wm-note a { color: var(--link); }
.contact .wm-status:empty { display: none; }
.contact .wm-status { font-weight: inherit; }
.contact .wm-status:focus { outline: none; }
.contact .wm-status.is-error { padding: 0; border: 0; color: #933225; }
.contact .wm-status.is-sent { display: flex; align-items: center; min-height: 54px; padding-left: 96px; color: #285d40; background: url("/assets/img/art-goal-600.0f70034148.avif") left center / 80px auto no-repeat; }

/* ---- Press: the facts, the kit, the download ----------------------------- */
/* A table (the facts, the policies' data) in its scroll region: wider than
   its column, it scrolls inside, with a soft shadow at the cut edge. */
.table-region {
  margin: 24px 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #cbbbad;
  border-radius: 14px;
  background: var(--card);
}
.table-region:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 26px;
}
.prose th, .prose td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #d9cec2; overflow-wrap: break-word; }
.prose thead th { background: #f0e8dd; font-weight: 700; }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose td:first-child { width: 28%; font-weight: 650; }
.kit-grid, .prose .kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.prose .kit-grid > li { margin: 0; }
.prose .kit-grid > li::before { content: none; }
.kit-tile { padding: 24px; border: 1px solid var(--card-edge); border-radius: 18px; background: var(--card); }
.kit-preview { display: flex; align-items: center; justify-content: center; height: 240px; margin-bottom: 24px; border-radius: 10px; background: #f3ece3; }
.kit-1 img { width: 160px; height: auto; border-radius: 18px; }
.kit-2 img { width: 144px; height: 144px; }
.kit-3 img { width: 280px; max-width: 100%; height: auto; }
.sheet { display: grid; gap: 10px; width: 180px; padding: 24px; border: 1px solid #d2c6b9; background: var(--card); box-shadow: 0 4px 9px #43301d10; }
.sheet span { display: block; height: 8px; border-radius: 4px; background: #d9cec2; }
.sheet span:first-child { width: 40%; background: #8a7c6f; }
.sheet span:last-child { width: 70%; }
.kit-words { font-size: 14px; line-height: 22px; color: var(--ink-2); }
.kit-words strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 20px; line-height: 28px; font-weight: 700; }
/* The kit's one download, the page's one button (no ↗: it is a file). */
.prose p:has(> a[href$=".zip"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 32px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--light);
  font-size: 16px;
  line-height: 24px;
  font-weight: 650;
}
.prose p > a[href$=".zip"] { color: inherit; text-decoration: none; }
.prose p > a[href$=".zip"]::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.prose p > a[href$=".zip"]:focus-visible { outline: none; }
.prose p:has(> a[href$=".zip"]:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1199.98px) {
  .contact-body { display: block; }
  .contact-body > .prose { margin-top: 32px; }
  .row > .chooser { margin-top: 32px; }
  .chooser:not(.chooser-wide) .choices-set { text-align: center; }
  .chooser:not(.chooser-wide) .choices { justify-content: center; }
}
@media (max-width: 767.98px) {
  .contact-head { gap: 16px; }
  .contact-goal { width: 80px; }
  .contact .wm-form button { width: 100%; }
  .contact .wm-note, .contact .wm-status { font-size: 16px; line-height: 26px; }
  .prose th, .prose td { padding: 12px; font-size: 14px; line-height: 23px; }
  .kit-grid, .prose .kit-grid { grid-template-columns: 1fr; }
  .kit-tile { padding: 20px; }
  .kit-preview { height: 220px; }
  .kit-3 img { width: 240px; }
}

/* ---- Not found and the form result (round 5b) ---------------------------- */
.simple-page { flex: 1 0 auto; width: 100%; font-size: 17px; line-height: 28px; }
.simple {
  display: grid;
  grid-template-columns: 440px minmax(0, 480px);
  column-gap: 80px;
  align-items: center;
  width: min(1000px, 100% - 2 * var(--gutter));
  min-height: 500px;
  margin: 64px auto 0;
}
.simple-art img { display: block; width: 440px; max-width: 100%; height: auto; }
.simple.result .simple-art img { width: 200px; margin: 0 auto; }
.simple h1 { margin: 0; font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -1px; }
.simple-copy > p { margin: 24px 0 0; }
.simple-copy a { color: var(--link); text-underline-offset: 4px; }
.simple-back { margin-top: 32px; }
.simple-back a::after, .simple-guides a::after { content: "\a0→"; content: "\a0→" / ""; }
.simple-guides { margin-top: 40px; }
.simple-guides p { margin: 0; }
/* The guides 16 px apart (18 on phones), so each link's 44 px target stands
   clear of the next (webco item 31). */
.simple-guides ul { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.simple-page ~ .foot { margin-top: 200px; }
@media (max-width: 1199.98px) {
  .simple { grid-template-columns: 280px minmax(0, 392px); column-gap: 32px; }
  .simple-art img { width: 280px; }
  .simple-page ~ .foot { margin-top: 160px; }
}
@media (max-width: 767.98px) {
  .simple { display: flex; flex-direction: column; align-items: stretch; gap: 32px; min-height: 0; margin-top: 48px; }
  .simple-art img { width: 300px; margin: 0 auto; }
  .simple.result .simple-art img { width: 160px; }
  .simple h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.55px; }
  .simple-page { font-size: 16px; line-height: 26px; }
  .simple-back { margin-top: 24px; }
  .simple-guides ul { gap: 18px; }
  .simple-page ~ .foot { margin-top: 140px; }
}

/* ---- The legal pages: the quiet template (§19.1) -------------------------- */
.legal { flex: 1 0 auto; width: 100%; font-size: 17px; line-height: 28px; }
.legal-intro { position: relative; width: min(680px, 100% - 2 * var(--gutter)); margin: 48px auto 0; }
.legal .crumbs ol { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.legal .crumbs a { color: var(--link); text-underline-offset: 3px; }
.legal h1 { position: relative; margin: 24px 0 0; font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -1px; }
.legal-hole {
  position: absolute;
  left: -32px;
  top: 17px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, #28221c 0, #28221c 53%, #9c8a77 65%, #e2d5c6 85%);
}
.legal-date { margin: 16px 0 0; }
.legal-body { width: min(680px, 100% - 2 * var(--gutter)); max-width: none; margin: 40px auto 0; }
.legal-body h2 { margin: 140px 0 24px; font-size: 24px; line-height: 30px; font-weight: 750; letter-spacing: -0.25px; }
.legal-body h3 { margin: 32px 0 14px; font-size: 20px; line-height: 28px; font-weight: 700; }
.legal-body .table-region { box-shadow: inset -10px 0 10px -10px #3f302d66; }
.legal-body .table-region table { min-width: 680px; }
.legal-body td, .legal-body th { font-size: 17px; line-height: 28px; }
.legal-body thead th { font-size: 14px; line-height: 23px; }
.legal-body td:first-child { width: auto; }
.legal ~ .foot { margin-top: 200px; }
@media (max-width: 1199.98px) {
  .legal ~ .foot { margin-top: 160px; }
}
@media (max-width: 767.98px) {
  .legal { font-size: 16px; line-height: 26px; }
  .legal-intro, .legal-body { width: auto; margin-left: 32px; margin-right: 16px; }
  .legal-intro { margin-top: 32px; }
  .legal h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.55px; }
  .legal-hole { left: -22px; top: 5px; }
  .legal-body { margin-top: 32px; }
  .legal-body .table-region { width: calc(100% + 16px); max-width: none; margin-left: -16px; margin-right: 0; }
  .legal-body td, .legal-body th { font-size: 16px; line-height: 26px; }
  .legal ~ .foot { margin-top: 140px; }
}

/* ---- Without "On this page": About, News and a post (round 7b) ---------- */
/* The route runs in the page's margin at every width (centred on x 224 on
   About and a post, x 208 on News; x 16 below 1200), from hole to hole: a
   hole by each section's first line, the goal ring at the end (About: in
   Contact's place). At 1200 px and wider it comes down from the hero's art
   (News, About). The reading column starts at x 280 (News 250); 140 px
   between sections, 100 on phones. */
.inner.no-toc { --spine-x: 224px; --read-x: 280px; --spine-off: -56px; --gap-sec: 140px; --panel-pad: 40px; }
.inner.news { --spine-x: 208px; --read-x: 250px; --spine-off: -42px; }
.inner.art-about { --pad: #ead7bd99; }
.no-toc .reading::before { display: none; }
.no-toc .spine-hole, .no-toc .spine-goal { display: block; position: absolute; }
.no-toc .spine-hole {
  left: calc(var(--spine-off) - 7px);
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, #28221c 0, #28221c 53%, #9c8a77 65%, #e2d5c6 85%);
}
.no-toc .spine-goal, .art-about .rsec-last > .spine-hole {
  left: calc(var(--spine-off) - 11px);
  top: 3px;
  width: 22px;
  height: 22px;
  border: 3px solid var(--goal);
  border-radius: 50%;
  background: var(--ground);
}
.art-about .reading > .spine-goal { display: none; }
.no-toc .rsec-panel > .spine-hole { top: calc(var(--panel-pad) + 8px); }
.no-toc .rsec:not(:last-child):not(.rsec-last)::before {
  content: "";
  position: absolute;
  left: calc(var(--spine-off) - 0.85px);
  top: 14px;
  bottom: calc(-1 * var(--gap-sec) - 14px);
  width: 1.7px;
  background: repeating-linear-gradient(to bottom, var(--route) 0 6px, transparent 6px 18px);
}
/* Who's panel: its hole inside the panel's padding, the line hole to hole;
   on phones 120 px around it (SITE_UX §8.1's floor at 390; wux1 r7b P3-1). */
.no-toc .rsec + .rsec-panel, .no-toc .rsec-panel + .rsec { margin-top: var(--gap-panel, var(--gap-sec)); }
.no-toc .rsec:not(:last-child):not(.rsec-last):has(+ .rsec-panel)::before { bottom: calc(-1 * var(--gap-panel, var(--gap-sec)) - var(--panel-pad) - 15px); }
.no-toc .rsec-panel:not(:last-child):not(.rsec-last)::before { top: calc(var(--panel-pad) + 15px); bottom: calc(-1 * var(--gap-panel, var(--gap-sec)) - 14px); }
/* From the art's foot down to the first hole, an S as the plates draw it:
   from 60 % across R11/R12, 20 px above its foot, the control points 80 px
   above the hole. Each box spans both ends, placed from the art column (1cqw
   is 1 % of its width) and, at 768–1199, the grid's width (--grid-w). */
@property --grid-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
.no-toc .inner-grid { container-type: inline-size; }
.no-toc .inner-art { --grid-w: 100cqw; }
.hero-route { display: none; position: absolute; z-index: 2; overflow: visible; pointer-events: none; }
.hero-route path { fill: none; stroke: var(--route); stroke-width: 1.7; stroke-dasharray: 6 12; vector-effect: non-scaling-stroke; }
@media (min-width: 1200px) {
  .no-toc .inner-grid { grid-template-columns: calc(var(--read-x) - 64px) minmax(0, 1fr); }
  .no-toc .reading { grid-column: 2; width: min(1000px, 100%); margin-top: 140px; }
  /* The hero: 440 px with its 32 px top (About; News 360). */
  .no-toc .inner-copy { min-height: 408px; }
  .no-toc .inner-art { height: 408px; }
  .art-about .inner-art .island { top: 16px; }
  /* The art column starts 144 px + its width from the grid's edge. */
  .hero-route.wide { display: block; left: calc(var(--spine-x) - 144px - 100cqw); }
  .art-about .hero-route.wide { top: calc(62.222cqw - 4px); width: calc(59.333cqw + 144px + 100cqw - var(--spine-x)); height: calc(566px - 62.222cqw); }
  .news .hero-route.wide { top: 260px; width: calc(362px + 144px + 100cqw - var(--spine-x)); height: 160px; }
}
.no-toc ~ .foot { margin-top: 160px; }
.news ~ .foot { margin-top: 202px; }

/* A first visit (the banner asks at load, :root.wm-consent-first; set before
   the page paints): no watch of the first screen meets the bar or sheet
   (SITE_UX.md §4.1, §13.5), and the first screen stays a page (wux1 r2 P1).
   The reading's first three watch blocks are numbered in reading order
   (inner.html: .first-clear.fc-N before the block, or .rsec.clear-N when the
   block is its section's first, so its heading goes with it). Block N moves
   only at the view heights where the blocks before it stand clear of the bar
   and its own watch would meet it, and then just so far that its watch starts
   24 px below the first screen: --cN, set below by width band and height
   band from each block's natural top and foot (the highest and the lowest in
   the band, both engines, the web font or its fallback) and the band's
   tallest bar (tools/first-screen: run.sh measure writes them, run.sh check
   proves them; measure again when a page's words or layout above its watches
   change, ops/SERVER.md "Before a release"). About moves
   the figure, not the words. Nothing moves on a choice, and nothing waits
   for a script. */
.first-clear { height: 0; }
:root.wm-consent-first .first-clear.fc-1 { height: var(--c1, 0px); }
:root.wm-consent-first .first-clear.fc-2 { height: var(--c2, 0px); }
:root.wm-consent-first .first-clear.fc-3 { height: var(--c3, 0px); }
:root.wm-consent-first .inner:not(.art-about) .rsec.clear-1:first-child { margin-top: var(--c1, 0px); }
:root.wm-consent-first .inner:not(.art-about) .rsec + .rsec.clear-1 { margin-top: calc(var(--gap-sec) + var(--c1, 0px)); }
:root.wm-consent-first .inner:not(.art-about) .rsec + .rsec.clear-2 { margin-top: calc(var(--gap-sec) + var(--c2, 0px)); }
:root.wm-consent-first .inner:not(.art-about) .rsec + .rsec.clear-3 { margin-top: calc(var(--gap-sec) + var(--c3, 0px)); }
:root.wm-consent-first .art-about .rsec.clear-1 .row > .fig { margin-top: calc(-58px + var(--c1, 0px)); }
:root.wm-consent-first .art-about .rsec.clear-2 .row > .fig { margin-top: calc(-58px + var(--c2, 0px)); }
@media (max-width: 767.98px) {
  :root.wm-consent-first .art-about .rsec.clear-1 .row > .fig { margin-top: calc(40px + var(--c1, 0px)); }
  :root.wm-consent-first .art-about .rsec.clear-2 .row > .fig { margin-top: calc(40px + var(--c2, 0px)); }
}
/* @generated by clearcss.py: start (do not edit by hand) */
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 1448.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 989px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (min-height: 1449px) and (max-height: 2191.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1731px)); } }
@media (min-width: 364px) and (max-width: 371.98px) and (max-height: 1428.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 991px)); } }
@media (min-width: 364px) and (max-width: 371.98px) and (min-height: 1429px) and (max-height: 2171.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1734px)); } }
@media (min-width: 372px) and (max-width: 375.98px) and (max-height: 1430.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 971px)); } }
@media (min-width: 372px) and (max-width: 375.98px) and (min-height: 1431px) and (max-height: 2173.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1687px)); } }
@media (min-width: 376px) and (max-width: 379.98px) and (max-height: 1407.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 973px)); } }
@media (min-width: 376px) and (max-width: 379.98px) and (min-height: 1408px) and (max-height: 2124.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1690px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 1388.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 950px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (min-height: 1389px) and (max-height: 2105.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1641px)); } }
@media (min-width: 384px) and (max-width: 411.98px) and (max-height: 1380.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 953px)); } }
@media (min-width: 384px) and (max-width: 411.98px) and (min-height: 1381px) and (max-height: 2071.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1643px)); } }
@media (min-width: 412px) and (max-width: 439.98px) and (max-height: 1399.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 971px)); } }
@media (min-width: 412px) and (max-width: 439.98px) and (min-height: 1400px) and (max-height: 2090.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 440px) and (max-width: 467.98px) and (max-height: 1418.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 990px)); } }
@media (min-width: 440px) and (max-width: 467.98px) and (min-height: 1419px) and (max-height: 2109.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1681px)); } }
@media (min-width: 468px) and (max-width: 495.98px) and (max-height: 1412.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1009px)); } }
@media (min-width: 468px) and (max-width: 495.98px) and (min-height: 1413px) and (max-height: 2103.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1699px)); } }
@media (min-width: 496px) and (max-width: 523.98px) and (max-height: 1431.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1027px)); } }
@media (min-width: 496px) and (max-width: 523.98px) and (min-height: 1432px) and (max-height: 2122.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1718px)); } }
@media (min-width: 524px) and (max-width: 551.98px) and (max-height: 1450.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1046px)); } }
@media (min-width: 524px) and (max-width: 551.98px) and (min-height: 1451px) and (max-height: 2141.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1737px)); } }
@media (min-width: 552px) and (max-width: 579.98px) and (max-height: 1468.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1065px)); } }
@media (min-width: 552px) and (max-width: 579.98px) and (min-height: 1469px) and (max-height: 2159.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1755px)); } }
@media (min-width: 580px) and (max-width: 599.98px) and (max-height: 1482.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1083px)); } }
@media (min-width: 580px) and (max-width: 599.98px) and (min-height: 1483px) and (max-height: 2173.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1774px)); } }
@media (min-width: 600px) and (max-width: 627.98px) and (max-height: 1510.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1107px)); } }
@media (min-width: 600px) and (max-width: 627.98px) and (min-height: 1511px) and (max-height: 2201.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1797px)); } }
@media (min-width: 628px) and (max-width: 655.98px) and (max-height: 1529.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1125px)); } }
@media (min-width: 628px) and (max-width: 655.98px) and (min-height: 1530px) and (max-height: 2220.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1816px)); } }
@media (min-width: 656px) and (max-width: 683.98px) and (max-height: 1548.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1144px)); } }
@media (min-width: 656px) and (max-width: 683.98px) and (min-height: 1549px) and (max-height: 2239.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1835px)); } }
@media (min-width: 684px) and (max-width: 687.98px) and (max-height: 1550.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1137px)); } }
@media (min-width: 684px) and (max-width: 687.98px) and (min-height: 1551px) and (max-height: 2241.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1827px)); } }
@media (min-width: 688px) and (max-width: 691.98px) and (max-height: 1529.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1139px)); } }
@media (min-width: 688px) and (max-width: 691.98px) and (min-height: 1530px) and (max-height: 2220.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1830px)); } }
@media (min-width: 692px) and (max-width: 719.98px) and (max-height: 1522.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1142px)); } }
@media (min-width: 692px) and (max-width: 719.98px) and (min-height: 1523px) and (max-height: 2213.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1833px)); } }
@media (min-width: 720px) and (max-width: 747.98px) and (max-height: 1540.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1161px)); } }
@media (min-width: 720px) and (max-width: 747.98px) and (min-height: 1541px) and (max-height: 2231.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1851px)); } }
@media (min-width: 748px) and (max-width: 767.98px) and (max-height: 1554.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 1179px)); } }
@media (min-width: 748px) and (max-width: 767.98px) and (min-height: 1555px) and (max-height: 2245.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1870px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 989.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (min-height: 990px) and (max-height: 1463.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 965.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 966px) and (max-height: 1439.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 941.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (min-height: 942px) and (max-height: 1415.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 884px) and (max-width: 975.98px) and (max-height: 917.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 884px) and (max-width: 975.98px) and (min-height: 918px) and (max-height: 1391.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 893.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 894px) and (max-height: 1367.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 917.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 918px) and (max-height: 1391.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 893.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 894px) and (max-height: 1367.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1055.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 678px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1056px) and (max-height: 1473.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1095px)); } }
@media (min-width: 1224px) and (max-height: 1031.98px) { .inner.art-about.stage-a { --c1: max(0px, calc(100svh + 24px - 678px)); } }
@media (min-width: 1224px) and (min-height: 1032px) and (max-height: 1449.98px) { .inner.art-about.stage-a { --c2: max(0px, calc(100svh + 24px - 1095px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 1520.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 989px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (min-height: 1521px) and (max-height: 2334.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1803px)); } }
@media (min-width: 364px) and (max-width: 371.98px) and (max-height: 1499.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 991px)); } }
@media (min-width: 364px) and (max-width: 371.98px) and (min-height: 1500px) and (max-height: 2313.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1805px)); } }
@media (min-width: 372px) and (max-width: 375.98px) and (max-height: 1502.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 971px)); } }
@media (min-width: 372px) and (max-width: 375.98px) and (min-height: 1503px) and (max-height: 2316.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1759px)); } }
@media (min-width: 376px) and (max-width: 379.98px) and (max-height: 1478.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 973px)); } }
@media (min-width: 376px) and (max-width: 379.98px) and (min-height: 1479px) and (max-height: 2266.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1761px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 1459.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 950px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (min-height: 1460px) and (max-height: 2247.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1712px)); } }
@media (min-width: 384px) and (max-width: 411.98px) and (max-height: 1452.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 953px)); } }
@media (min-width: 384px) and (max-width: 411.98px) and (min-height: 1453px) and (max-height: 2214.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1715px)); } }
@media (min-width: 412px) and (max-width: 439.98px) and (max-height: 1470.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 971px)); } }
@media (min-width: 412px) and (max-width: 439.98px) and (min-height: 1471px) and (max-height: 2232.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1733px)); } }
@media (min-width: 440px) and (max-width: 467.98px) and (max-height: 1489.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 990px)); } }
@media (min-width: 440px) and (max-width: 467.98px) and (min-height: 1490px) and (max-height: 2251.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1752px)); } }
@media (min-width: 468px) and (max-width: 495.98px) and (max-height: 1484.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1009px)); } }
@media (min-width: 468px) and (max-width: 495.98px) and (min-height: 1485px) and (max-height: 2246.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1771px)); } }
@media (min-width: 496px) and (max-width: 523.98px) and (max-height: 1502.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1027px)); } }
@media (min-width: 496px) and (max-width: 523.98px) and (min-height: 1503px) and (max-height: 2264.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1789px)); } }
@media (min-width: 524px) and (max-width: 551.98px) and (max-height: 1521.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1046px)); } }
@media (min-width: 524px) and (max-width: 551.98px) and (min-height: 1522px) and (max-height: 2283.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1808px)); } }
@media (min-width: 552px) and (max-width: 579.98px) and (max-height: 1540.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1065px)); } }
@media (min-width: 552px) and (max-width: 579.98px) and (min-height: 1541px) and (max-height: 2302.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1827px)); } }
@media (min-width: 580px) and (max-width: 599.98px) and (max-height: 1553.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1083px)); } }
@media (min-width: 580px) and (max-width: 599.98px) and (min-height: 1554px) and (max-height: 2315.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1845px)); } }
@media (min-width: 600px) and (max-width: 627.98px) and (max-height: 1582.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1107px)); } }
@media (min-width: 600px) and (max-width: 627.98px) and (min-height: 1583px) and (max-height: 2344.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1869px)); } }
@media (min-width: 628px) and (max-width: 655.98px) and (max-height: 1600.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1125px)); } }
@media (min-width: 628px) and (max-width: 655.98px) and (min-height: 1601px) and (max-height: 2362.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1887px)); } }
@media (min-width: 656px) and (max-width: 683.98px) and (max-height: 1619.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1144px)); } }
@media (min-width: 656px) and (max-width: 683.98px) and (min-height: 1620px) and (max-height: 2381.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1906px)); } }
@media (min-width: 684px) and (max-width: 687.98px) and (max-height: 1622.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1137px)); } }
@media (min-width: 684px) and (max-width: 687.98px) and (min-height: 1623px) and (max-height: 2384.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1899px)); } }
@media (min-width: 688px) and (max-width: 691.98px) and (max-height: 1600.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1139px)); } }
@media (min-width: 688px) and (max-width: 691.98px) and (min-height: 1601px) and (max-height: 2362.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1901px)); } }
@media (min-width: 692px) and (max-width: 719.98px) and (max-height: 1593.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1142px)); } }
@media (min-width: 692px) and (max-width: 719.98px) and (min-height: 1594px) and (max-height: 2355.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1904px)); } }
@media (min-width: 720px) and (max-width: 747.98px) and (max-height: 1612.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1161px)); } }
@media (min-width: 720px) and (max-width: 747.98px) and (min-height: 1613px) and (max-height: 2374.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1923px)); } }
@media (min-width: 748px) and (max-width: 767.98px) and (max-height: 1625.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 1179px)); } }
@media (min-width: 748px) and (max-width: 767.98px) and (min-height: 1626px) and (max-height: 2387.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1941px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 1060.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (min-height: 1061px) and (max-height: 1534.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 1036.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 1037px) and (max-height: 1510.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 1012.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (min-height: 1013px) and (max-height: 1486.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 884px) and (max-width: 975.98px) and (max-height: 988.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 884px) and (max-width: 975.98px) and (min-height: 989px) and (max-height: 1462.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 964.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 965px) and (max-height: 1438.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 988.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 989px) and (max-height: 1462.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 964.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 554px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 965px) and (max-height: 1438.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1028px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1141.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 678px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1142px) and (max-height: 1644.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1181px)); } }
@media (min-width: 1224px) and (max-height: 1117.98px) { .inner.art-about.stage-b { --c1: max(0px, calc(100svh + 24px - 678px)); } }
@media (min-width: 1224px) and (min-height: 1118px) and (max-height: 1620.98px) { .inner.art-about.stage-b { --c2: max(0px, calc(100svh + 24px - 1181px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 2704.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2270px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (max-height: 2704.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2270px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (max-height: 2678.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2244px)); } }
@media (min-width: 372px) and (max-width: 375.98px) and (max-height: 2678.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2244px)); } }
@media (min-width: 376px) and (max-width: 379.98px) and (max-height: 2678.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2244px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 2656.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2218px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (max-height: 2656.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2218px)); } }
@media (min-width: 388px) and (max-width: 407.98px) and (max-height: 2630.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2192px)); } }
@media (min-width: 408px) and (max-width: 467.98px) and (max-height: 2604.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2166px)); } }
@media (min-width: 468px) and (max-width: 471.98px) and (max-height: 2580.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2166px)); } }
@media (min-width: 468px) and (max-width: 471.98px) and (min-height: 2581px) and (max-height: 4005.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 3565px)); } }
@media (min-width: 472px) and (max-width: 527.98px) and (max-height: 2540.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2126px)); } }
@media (min-width: 472px) and (max-width: 527.98px) and (min-height: 2541px) and (max-height: 3965.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 3525px)); } }
@media (min-width: 528px) and (max-width: 687.98px) and (max-height: 2524.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2100px)); } }
@media (min-width: 528px) and (max-width: 687.98px) and (min-height: 2525px) and (max-height: 3949.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 3499px)); } }
@media (min-width: 688px) and (max-width: 763.98px) and (max-height: 2500.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2110px)); } }
@media (min-width: 688px) and (max-width: 763.98px) and (min-height: 2501px) and (max-height: 3925.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 3509px)); } }
@media (min-width: 764px) and (max-width: 767.98px) and (max-height: 2474.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 2110px)); } }
@media (min-width: 764px) and (max-width: 767.98px) and (min-height: 2475px) and (max-height: 3899.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 3509px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 2097.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (min-height: 2098px) and (max-height: 3354.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2919px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 2073.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 2074px) and (max-height: 3330.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2919px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (max-height: 2049.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (min-height: 2050px) and (max-height: 3306.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2919px)); } }
@media (min-width: 840px) and (max-width: 871.98px) and (max-height: 2049.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 840px) and (max-width: 871.98px) and (min-height: 2050px) and (max-height: 3306.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2843px)); } }
@media (min-width: 872px) and (max-width: 883.98px) and (max-height: 2001.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 872px) and (max-width: 883.98px) and (min-height: 2002px) and (max-height: 3258.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2843px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (max-height: 1977.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (min-height: 1978px) and (max-height: 3234.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2843px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (max-height: 1949.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (min-height: 1950px) and (max-height: 3206.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2843px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 1925.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 1926px) and (max-height: 3182.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2843px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1949.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1950px) and (max-height: 3206.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2843px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 1925.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1558px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 1926px) and (max-height: 3182.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2815px)); } }
@media (min-width: 1200px) and (max-width: 1211.98px) and (max-height: 1843.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1200px) and (max-width: 1211.98px) and (min-height: 1844px) and (max-height: 2957.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2552px)); } }
@media (min-width: 1212px) and (max-width: 1219.98px) and (max-height: 1843.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1212px) and (max-width: 1219.98px) and (min-height: 1844px) and (max-height: 2929.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2524px)); } }
@media (min-width: 1220px) and (max-width: 1223.98px) and (max-height: 1843.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1220px) and (max-width: 1223.98px) and (min-height: 1844px) and (max-height: 2901.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2496px)); } }
@media (min-width: 1224px) and (max-width: 1267.98px) and (max-height: 1819.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1224px) and (max-width: 1267.98px) and (min-height: 1820px) and (max-height: 2849.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2468px)); } }
@media (min-width: 1268px) and (max-width: 1275.98px) and (max-height: 1819.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1268px) and (max-width: 1275.98px) and (min-height: 1820px) and (max-height: 2821.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2440px)); } }
@media (min-width: 1276px) and (max-width: 1287.98px) and (max-height: 1819.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1276px) and (max-width: 1287.98px) and (min-height: 1820px) and (max-height: 2793.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2412px)); } }
@media (min-width: 1288px) and (max-width: 1383.98px) and (max-height: 1819.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1438px)); } }
@media (min-width: 1288px) and (max-width: 1383.98px) and (min-height: 1820px) and (max-height: 2765.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2384px)); } }
@media (min-width: 1384px) and (max-width: 1403.98px) and (max-height: 1791.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1438px)); } }
@media (min-width: 1384px) and (max-width: 1403.98px) and (min-height: 1792px) and (max-height: 2737.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2384px)); } }
@media (min-width: 1404px) and (max-width: 1415.98px) and (max-height: 1791.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1410px)); } }
@media (min-width: 1404px) and (max-width: 1415.98px) and (min-height: 1792px) and (max-height: 2737.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2272px)); } }
@media (min-width: 1416px) and (max-width: 1419.98px) and (max-height: 1791.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1410px)); } }
@media (min-width: 1416px) and (max-width: 1419.98px) and (min-height: 1792px) and (max-height: 2653.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2272px)); } }
@media (min-width: 1420px) and (max-height: 1763.98px) { .inner.art-how.stage-a { --c1: max(0px, calc(100svh + 24px - 1410px)); } }
@media (min-width: 1420px) and (min-height: 1764px) and (max-height: 2625.98px) { .inner.art-how.stage-a { --c2: max(0px, calc(100svh + 24px - 2272px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 2775.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2270px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (max-height: 2775.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2270px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (max-height: 2749.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2244px)); } }
@media (min-width: 372px) and (max-width: 375.98px) and (max-height: 2749.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2244px)); } }
@media (min-width: 376px) and (max-width: 379.98px) and (max-height: 2749.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2244px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 2727.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2218px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (max-height: 2727.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2218px)); } }
@media (min-width: 388px) and (max-width: 407.98px) and (max-height: 2701.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2192px)); } }
@media (min-width: 408px) and (max-width: 467.98px) and (max-height: 2675.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2166px)); } }
@media (min-width: 468px) and (max-width: 471.98px) and (max-height: 2651.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2166px)); } }
@media (min-width: 472px) and (max-width: 527.98px) and (max-height: 2611.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2126px)); } }
@media (min-width: 528px) and (max-width: 687.98px) and (max-height: 2595.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2100px)); } }
@media (min-width: 528px) and (max-width: 687.98px) and (min-height: 2596px) and (max-height: 4031.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 3510px)); } }
@media (min-width: 688px) and (max-width: 763.98px) and (max-height: 2571.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2110px)); } }
@media (min-width: 688px) and (max-width: 763.98px) and (min-height: 2572px) and (max-height: 4007.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 3520px)); } }
@media (min-width: 764px) and (max-width: 767.98px) and (max-height: 2545.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 2110px)); } }
@media (min-width: 764px) and (max-width: 767.98px) and (min-height: 2546px) and (max-height: 3981.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 3520px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 2168.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (min-height: 2169px) and (max-height: 3436.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2930px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 2144.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 2145px) and (max-height: 3412.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2930px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (max-height: 2120.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1662px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (min-height: 2121px) and (max-height: 3388.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2930px)); } }
@media (min-width: 840px) and (max-width: 871.98px) and (max-height: 2120.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 840px) and (max-width: 871.98px) and (min-height: 2121px) and (max-height: 3388.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2854px)); } }
@media (min-width: 872px) and (max-width: 883.98px) and (max-height: 2072.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 872px) and (max-width: 883.98px) and (min-height: 2073px) and (max-height: 3340.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2854px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (max-height: 2048.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (min-height: 2049px) and (max-height: 3316.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2854px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (max-height: 2020.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (min-height: 2021px) and (max-height: 3288.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2854px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 1996.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 1997px) and (max-height: 3264.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2854px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 2020.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1586px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 2021px) and (max-height: 3288.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2854px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 1996.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1558px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 1997px) and (max-height: 3264.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2826px)); } }
@media (min-width: 1200px) and (max-width: 1211.98px) and (max-height: 1929.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1200px) and (max-width: 1211.98px) and (min-height: 1930px) and (max-height: 3043.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2552px)); } }
@media (min-width: 1212px) and (max-width: 1219.98px) and (max-height: 1929.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1212px) and (max-width: 1219.98px) and (min-height: 1930px) and (max-height: 3015.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2524px)); } }
@media (min-width: 1220px) and (max-width: 1223.98px) and (max-height: 1929.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1220px) and (max-width: 1223.98px) and (min-height: 1930px) and (max-height: 2987.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2496px)); } }
@media (min-width: 1224px) and (max-width: 1267.98px) and (max-height: 1905.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1224px) and (max-width: 1267.98px) and (min-height: 1906px) and (max-height: 2935.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2468px)); } }
@media (min-width: 1268px) and (max-width: 1275.98px) and (max-height: 1905.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1268px) and (max-width: 1275.98px) and (min-height: 1906px) and (max-height: 2907.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2440px)); } }
@media (min-width: 1276px) and (max-width: 1287.98px) and (max-height: 1905.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1466px)); } }
@media (min-width: 1276px) and (max-width: 1287.98px) and (min-height: 1906px) and (max-height: 2879.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2412px)); } }
@media (min-width: 1288px) and (max-width: 1383.98px) and (max-height: 1905.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1438px)); } }
@media (min-width: 1288px) and (max-width: 1383.98px) and (min-height: 1906px) and (max-height: 2851.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2384px)); } }
@media (min-width: 1384px) and (max-width: 1403.98px) and (max-height: 1877.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1438px)); } }
@media (min-width: 1384px) and (max-width: 1403.98px) and (min-height: 1878px) and (max-height: 2823.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2384px)); } }
@media (min-width: 1404px) and (max-width: 1415.98px) and (max-height: 1877.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1410px)); } }
@media (min-width: 1404px) and (max-width: 1415.98px) and (min-height: 1878px) and (max-height: 2823.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2272px)); } }
@media (min-width: 1416px) and (max-width: 1419.98px) and (max-height: 1877.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1410px)); } }
@media (min-width: 1416px) and (max-width: 1419.98px) and (min-height: 1878px) and (max-height: 2739.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2272px)); } }
@media (min-width: 1420px) and (max-height: 1849.98px) { .inner.art-how.stage-b { --c1: max(0px, calc(100svh + 24px - 1410px)); } }
@media (min-width: 1420px) and (min-height: 1850px) and (max-height: 2711.98px) { .inner.art-how.stage-b { --c2: max(0px, calc(100svh + 24px - 2272px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 1967.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1462px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (min-height: 1968px) and (max-height: 2707.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 364px) and (max-width: 379.98px) and (max-height: 1967.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1436px)); } }
@media (min-width: 364px) and (max-width: 379.98px) and (min-height: 1968px) and (max-height: 2681.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2150px)); } }
@media (min-width: 380px) and (max-width: 387.98px) and (max-height: 1919.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1436px)); } }
@media (min-width: 380px) and (max-width: 387.98px) and (min-height: 1920px) and (max-height: 2633.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2150px)); } }
@media (min-width: 388px) and (max-width: 431.98px) and (max-height: 1889.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1380px)); } }
@media (min-width: 388px) and (max-width: 431.98px) and (min-height: 1890px) and (max-height: 2603.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2094px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (max-height: 1863.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1380px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (min-height: 1864px) and (max-height: 2577.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2094px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (min-height: 2578px) and (max-height: 3249.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2766px)); } }
@media (min-width: 468px) and (max-width: 475.98px) and (max-height: 1839.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1380px)); } }
@media (min-width: 468px) and (max-width: 475.98px) and (min-height: 1840px) and (max-height: 2553.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2094px)); } }
@media (min-width: 468px) and (max-width: 475.98px) and (min-height: 2554px) and (max-height: 3225.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2766px)); } }
@media (min-width: 476px) and (max-width: 483.98px) and (max-height: 1839.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1340px)); } }
@media (min-width: 476px) and (max-width: 483.98px) and (min-height: 1840px) and (max-height: 2553.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2054px)); } }
@media (min-width: 476px) and (max-width: 483.98px) and (min-height: 2554px) and (max-height: 3225.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2726px)); } }
@media (min-width: 484px) and (max-width: 519.98px) and (max-height: 1799.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1340px)); } }
@media (min-width: 484px) and (max-width: 519.98px) and (min-height: 1800px) and (max-height: 2513.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2054px)); } }
@media (min-width: 484px) and (max-width: 519.98px) and (min-height: 2514px) and (max-height: 3185.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2726px)); } }
@media (min-width: 520px) and (max-width: 619.98px) and (max-height: 1783.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1298px)); } }
@media (min-width: 520px) and (max-width: 619.98px) and (min-height: 1784px) and (max-height: 2497.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2012px)); } }
@media (min-width: 520px) and (max-width: 619.98px) and (min-height: 2498px) and (max-height: 3169.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2684px)); } }
@media (min-width: 620px) and (max-width: 687.98px) and (max-height: 1757.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1298px)); } }
@media (min-width: 620px) and (max-width: 687.98px) and (min-height: 1758px) and (max-height: 2471.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2012px)); } }
@media (min-width: 620px) and (max-width: 687.98px) and (min-height: 2472px) and (max-height: 3143.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2684px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 1733.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1298px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 1734px) and (max-height: 2447.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 2012px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 2448px) and (max-height: 3119.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2684px)); } }
@media (min-width: 768px) and (max-width: 779.98px) and (max-height: 1630.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 768px) and (max-width: 779.98px) and (min-height: 1631px) and (max-height: 2352.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 768px) and (max-width: 779.98px) and (min-height: 2353px) and (max-height: 3006.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 780px) and (max-width: 783.98px) and (max-height: 1602.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 780px) and (max-width: 783.98px) and (min-height: 1603px) and (max-height: 2324.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 780px) and (max-width: 783.98px) and (min-height: 2325px) and (max-height: 2978.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 1578.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 1579px) and (max-height: 2300.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 2301px) and (max-height: 2954.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (max-height: 1554.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (min-height: 1555px) and (max-height: 2276.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (min-height: 2277px) and (max-height: 2930.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 840px) and (max-width: 875.98px) and (max-height: 1554.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 840px) and (max-width: 875.98px) and (min-height: 1555px) and (max-height: 2276.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 840px) and (max-width: 875.98px) and (min-height: 2277px) and (max-height: 2930.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 876px) and (max-width: 879.98px) and (max-height: 1526.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 876px) and (max-width: 879.98px) and (min-height: 1527px) and (max-height: 2248.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 876px) and (max-width: 879.98px) and (min-height: 2249px) and (max-height: 2902.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 880px) and (max-width: 883.98px) and (max-height: 1526.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 880px) and (max-width: 883.98px) and (min-height: 1527px) and (max-height: 2220.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 880px) and (max-width: 883.98px) and (min-height: 2221px) and (max-height: 2874.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (max-height: 1502.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (min-height: 1503px) and (max-height: 2196.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (min-height: 2197px) and (max-height: 2850.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (max-height: 1454.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (min-height: 1455px) and (max-height: 2176.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (min-height: 2177px) and (max-height: 2830.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 976px) and (max-width: 983.98px) and (max-height: 1430.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 976px) and (max-width: 983.98px) and (min-height: 1431px) and (max-height: 2152.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 976px) and (max-width: 983.98px) and (min-height: 2153px) and (max-height: 2806.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 984px) and (max-width: 1023.98px) and (max-height: 1402.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 984px) and (max-width: 1023.98px) and (min-height: 1403px) and (max-height: 2124.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 984px) and (max-width: 1023.98px) and (min-height: 2125px) and (max-height: 2778.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1454.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1455px) and (max-height: 2176.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 2177px) and (max-height: 2830.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1040px) and (max-width: 1047.98px) and (max-height: 1430.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 1040px) and (max-width: 1047.98px) and (min-height: 1431px) and (max-height: 2152.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 1040px) and (max-width: 1047.98px) and (min-height: 2153px) and (max-height: 2806.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1048px) and (max-width: 1199.98px) and (max-height: 1402.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 1048px) and (max-width: 1199.98px) and (min-height: 1403px) and (max-height: 2124.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 1048px) and (max-width: 1199.98px) and (min-height: 2125px) and (max-height: 2778.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1375.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 912px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1376px) and (max-height: 1875.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1412px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1876px) and (max-height: 2375.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 1912px)); } }
@media (min-width: 1224px) and (max-height: 1351.98px) { .inner.art-levels.stage-a { --c1: max(0px, calc(100svh + 24px - 912px)); } }
@media (min-width: 1224px) and (min-height: 1352px) and (max-height: 1851.98px) { .inner.art-levels.stage-a { --c2: max(0px, calc(100svh + 24px - 1412px)); } }
@media (min-width: 1224px) and (min-height: 1852px) and (max-height: 2351.98px) { .inner.art-levels.stage-a { --c3: max(0px, calc(100svh + 24px - 1912px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 1967.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1462px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (min-height: 1968px) and (max-height: 2707.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 364px) and (max-width: 379.98px) and (max-height: 1967.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1436px)); } }
@media (min-width: 364px) and (max-width: 379.98px) and (min-height: 1968px) and (max-height: 2681.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2150px)); } }
@media (min-width: 380px) and (max-width: 387.98px) and (max-height: 1919.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1436px)); } }
@media (min-width: 380px) and (max-width: 387.98px) and (min-height: 1920px) and (max-height: 2633.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2150px)); } }
@media (min-width: 388px) and (max-width: 431.98px) and (max-height: 1889.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1380px)); } }
@media (min-width: 388px) and (max-width: 431.98px) and (min-height: 1890px) and (max-height: 2603.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2094px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (max-height: 1863.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1380px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (min-height: 1864px) and (max-height: 2577.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2094px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (min-height: 2578px) and (max-height: 3249.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2766px)); } }
@media (min-width: 468px) and (max-width: 475.98px) and (max-height: 1839.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1380px)); } }
@media (min-width: 468px) and (max-width: 475.98px) and (min-height: 1840px) and (max-height: 2553.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2094px)); } }
@media (min-width: 468px) and (max-width: 475.98px) and (min-height: 2554px) and (max-height: 3225.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2766px)); } }
@media (min-width: 476px) and (max-width: 483.98px) and (max-height: 1839.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1340px)); } }
@media (min-width: 476px) and (max-width: 483.98px) and (min-height: 1840px) and (max-height: 2553.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2054px)); } }
@media (min-width: 476px) and (max-width: 483.98px) and (min-height: 2554px) and (max-height: 3225.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2726px)); } }
@media (min-width: 484px) and (max-width: 519.98px) and (max-height: 1799.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1340px)); } }
@media (min-width: 484px) and (max-width: 519.98px) and (min-height: 1800px) and (max-height: 2513.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2054px)); } }
@media (min-width: 484px) and (max-width: 519.98px) and (min-height: 2514px) and (max-height: 3185.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2726px)); } }
@media (min-width: 520px) and (max-width: 619.98px) and (max-height: 1783.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1298px)); } }
@media (min-width: 520px) and (max-width: 619.98px) and (min-height: 1784px) and (max-height: 2497.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2012px)); } }
@media (min-width: 520px) and (max-width: 619.98px) and (min-height: 2498px) and (max-height: 3169.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2684px)); } }
@media (min-width: 620px) and (max-width: 687.98px) and (max-height: 1757.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1298px)); } }
@media (min-width: 620px) and (max-width: 687.98px) and (min-height: 1758px) and (max-height: 2471.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2012px)); } }
@media (min-width: 620px) and (max-width: 687.98px) and (min-height: 2472px) and (max-height: 3143.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2684px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 1733.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1298px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 1734px) and (max-height: 2447.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 2012px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 2448px) and (max-height: 3119.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2684px)); } }
@media (min-width: 768px) and (max-width: 779.98px) and (max-height: 1630.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 768px) and (max-width: 779.98px) and (min-height: 1631px) and (max-height: 2352.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 768px) and (max-width: 779.98px) and (min-height: 2353px) and (max-height: 3006.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 780px) and (max-width: 783.98px) and (max-height: 1602.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 780px) and (max-width: 783.98px) and (min-height: 1603px) and (max-height: 2324.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 780px) and (max-width: 783.98px) and (min-height: 2325px) and (max-height: 2978.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 1578.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 1579px) and (max-height: 2300.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 2301px) and (max-height: 2954.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (max-height: 1554.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1096px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (min-height: 1555px) and (max-height: 2276.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1790px)); } }
@media (min-width: 816px) and (max-width: 839.98px) and (min-height: 2277px) and (max-height: 2930.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 840px) and (max-width: 875.98px) and (max-height: 1554.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 840px) and (max-width: 875.98px) and (min-height: 1555px) and (max-height: 2276.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 840px) and (max-width: 875.98px) and (min-height: 2277px) and (max-height: 2930.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 876px) and (max-width: 879.98px) and (max-height: 1526.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 876px) and (max-width: 879.98px) and (min-height: 1527px) and (max-height: 2248.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 876px) and (max-width: 879.98px) and (min-height: 2249px) and (max-height: 2902.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 880px) and (max-width: 883.98px) and (max-height: 1526.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 880px) and (max-width: 883.98px) and (min-height: 1527px) and (max-height: 2220.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 880px) and (max-width: 883.98px) and (min-height: 2221px) and (max-height: 2874.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (max-height: 1502.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 1020px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (min-height: 1503px) and (max-height: 2196.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1714px)); } }
@media (min-width: 884px) and (max-width: 887.98px) and (min-height: 2197px) and (max-height: 2850.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2368px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (max-height: 1454.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (min-height: 1455px) and (max-height: 2176.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 888px) and (max-width: 975.98px) and (min-height: 2177px) and (max-height: 2830.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 976px) and (max-width: 983.98px) and (max-height: 1430.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 976px) and (max-width: 983.98px) and (min-height: 1431px) and (max-height: 2152.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 976px) and (max-width: 983.98px) and (min-height: 2153px) and (max-height: 2806.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 984px) and (max-width: 1023.98px) and (max-height: 1402.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 984px) and (max-width: 1023.98px) and (min-height: 1403px) and (max-height: 2124.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 984px) and (max-width: 1023.98px) and (min-height: 2125px) and (max-height: 2778.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1454.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1455px) and (max-height: 2176.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 2177px) and (max-height: 2830.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1040px) and (max-width: 1047.98px) and (max-height: 1430.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 1040px) and (max-width: 1047.98px) and (min-height: 1431px) and (max-height: 2152.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 1040px) and (max-width: 1047.98px) and (min-height: 2153px) and (max-height: 2806.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1048px) and (max-width: 1199.98px) and (max-height: 1402.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 992px)); } }
@media (min-width: 1048px) and (max-width: 1199.98px) and (min-height: 1403px) and (max-height: 2124.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1686px)); } }
@media (min-width: 1048px) and (max-width: 1199.98px) and (min-height: 2125px) and (max-height: 2778.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 2340px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1375.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 912px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1376px) and (max-height: 1875.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1412px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1876px) and (max-height: 2375.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 1912px)); } }
@media (min-width: 1224px) and (max-height: 1351.98px) { .inner.art-levels.stage-b { --c1: max(0px, calc(100svh + 24px - 912px)); } }
@media (min-width: 1224px) and (min-height: 1352px) and (max-height: 1851.98px) { .inner.art-levels.stage-b { --c2: max(0px, calc(100svh + 24px - 1412px)); } }
@media (min-width: 1224px) and (min-height: 1852px) and (max-height: 2351.98px) { .inner.art-levels.stage-b { --c3: max(0px, calc(100svh + 24px - 1912px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 2602.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2142px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (max-height: 2602.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2142px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (max-height: 2576.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2086px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (min-height: 2577px) and (max-height: 3305.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2815px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (max-height: 2546.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2060px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (min-height: 2547px) and (max-height: 3275.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2789px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 2524.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2034px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (min-height: 2525px) and (max-height: 3253.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2763px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (max-height: 2472.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2034px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (min-height: 2473px) and (max-height: 3201.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2763px)); } }
@media (min-width: 388px) and (max-width: 463.98px) and (max-height: 2472.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2034px)); } }
@media (min-width: 388px) and (max-width: 463.98px) and (min-height: 2473px) and (max-height: 3175.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2733px)); } }
@media (min-width: 464px) and (max-width: 467.98px) and (max-height: 2446.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2008px)); } }
@media (min-width: 464px) and (max-width: 467.98px) and (min-height: 2447px) and (max-height: 3145.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2707px)); } }
@media (min-width: 468px) and (max-width: 535.98px) and (max-height: 2422.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 2008px)); } }
@media (min-width: 468px) and (max-width: 535.98px) and (min-height: 2423px) and (max-height: 3121.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2707px)); } }
@media (min-width: 536px) and (max-width: 595.98px) and (max-height: 2396.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1942px)); } }
@media (min-width: 536px) and (max-width: 595.98px) and (min-height: 2397px) and (max-height: 3095.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2641px)); } }
@media (min-width: 596px) and (max-width: 687.98px) and (max-height: 2366.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1942px)); } }
@media (min-width: 596px) and (max-width: 687.98px) and (min-height: 2367px) and (max-height: 3065.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2641px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 2342.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1952px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 2343px) and (max-height: 3041.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2651px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 2041.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1606px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (min-height: 2042px) and (max-height: 2698.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2235px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 2017.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 2018px) and (max-height: 2674.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2207px)); } }
@media (min-width: 816px) and (max-width: 819.98px) and (max-height: 1993.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 816px) and (max-width: 819.98px) and (min-height: 1994px) and (max-height: 2650.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2207px)); } }
@media (min-width: 820px) and (max-width: 883.98px) and (max-height: 1965.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 820px) and (max-width: 883.98px) and (min-height: 1966px) and (max-height: 2622.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2207px)); } }
@media (min-width: 884px) and (max-width: 895.98px) and (max-height: 1941.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 884px) and (max-width: 895.98px) and (min-height: 1942px) and (max-height: 2598.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2207px)); } }
@media (min-width: 884px) and (max-width: 895.98px) and (min-height: 2599px) and (max-height: 3254.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2836px)); } }
@media (min-width: 896px) and (max-width: 951.98px) and (max-height: 1941.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 896px) and (max-width: 951.98px) and (min-height: 1942px) and (max-height: 2598.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2131px)); } }
@media (min-width: 896px) and (max-width: 951.98px) and (min-height: 2599px) and (max-height: 3254.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2760px)); } }
@media (min-width: 952px) and (max-width: 955.98px) and (max-height: 1893.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 952px) and (max-width: 955.98px) and (min-height: 1894px) and (max-height: 2550.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2131px)); } }
@media (min-width: 952px) and (max-width: 955.98px) and (min-height: 2551px) and (max-height: 3206.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2760px)); } }
@media (min-width: 956px) and (max-width: 975.98px) and (max-height: 1865.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 956px) and (max-width: 975.98px) and (min-height: 1866px) and (max-height: 2522.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2131px)); } }
@media (min-width: 956px) and (max-width: 975.98px) and (min-height: 2523px) and (max-height: 3178.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2760px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 1841.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 1842px) and (max-height: 2498.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2131px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 2499px) and (max-height: 3154.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2760px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1865.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1866px) and (max-height: 2522.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2131px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 2523px) and (max-height: 3178.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2760px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 1841.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 1842px) and (max-height: 2498.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 2131px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 2499px) and (max-height: 3154.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2760px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1611.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1234px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1612px) and (max-height: 2321.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 1941px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 2322px) and (max-height: 2857.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2477px)); } }
@media (min-width: 1224px) and (max-height: 1587.98px) { .inner.art-tips.stage-a { --c1: max(0px, calc(100svh + 24px - 1234px)); } }
@media (min-width: 1224px) and (min-height: 1588px) and (max-height: 2295.98px) { .inner.art-tips.stage-a { --c2: max(0px, calc(100svh + 24px - 1941px)); } }
@media (min-width: 1224px) and (min-height: 2296px) and (max-height: 2830.98px) { .inner.art-tips.stage-a { --c3: max(0px, calc(100svh + 24px - 2477px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 2673.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2142px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (max-height: 2673.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2142px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (max-height: 2647.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2086px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (max-height: 2617.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2060px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 2595.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2034px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (min-height: 2596px) and (max-height: 3395.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2834px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (max-height: 2543.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2034px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (min-height: 2544px) and (max-height: 3343.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2834px)); } }
@media (min-width: 388px) and (max-width: 463.98px) and (max-height: 2543.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2034px)); } }
@media (min-width: 388px) and (max-width: 463.98px) and (min-height: 2544px) and (max-height: 3317.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2804px)); } }
@media (min-width: 464px) and (max-width: 467.98px) and (max-height: 2517.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2008px)); } }
@media (min-width: 464px) and (max-width: 467.98px) and (min-height: 2518px) and (max-height: 3287.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2778px)); } }
@media (min-width: 468px) and (max-width: 535.98px) and (max-height: 2493.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 2008px)); } }
@media (min-width: 468px) and (max-width: 535.98px) and (min-height: 2494px) and (max-height: 3263.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2778px)); } }
@media (min-width: 536px) and (max-width: 595.98px) and (max-height: 2467.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1942px)); } }
@media (min-width: 536px) and (max-width: 595.98px) and (min-height: 2468px) and (max-height: 3237.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2712px)); } }
@media (min-width: 596px) and (max-width: 687.98px) and (max-height: 2437.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1942px)); } }
@media (min-width: 596px) and (max-width: 687.98px) and (min-height: 2438px) and (max-height: 3207.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2712px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 2413.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1952px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 2414px) and (max-height: 3183.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2722px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 2112.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1606px)); } }
@media (min-width: 768px) and (max-width: 783.98px) and (min-height: 2113px) and (max-height: 2840.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2306px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 2088.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 784px) and (max-width: 815.98px) and (min-height: 2089px) and (max-height: 2816.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2278px)); } }
@media (min-width: 816px) and (max-width: 819.98px) and (max-height: 2064.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 816px) and (max-width: 819.98px) and (min-height: 2065px) and (max-height: 2792.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2278px)); } }
@media (min-width: 820px) and (max-width: 883.98px) and (max-height: 2036.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 820px) and (max-width: 883.98px) and (min-height: 2037px) and (max-height: 2764.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2278px)); } }
@media (min-width: 884px) and (max-width: 895.98px) and (max-height: 2012.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1578px)); } }
@media (min-width: 884px) and (max-width: 895.98px) and (min-height: 2013px) and (max-height: 2740.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2278px)); } }
@media (min-width: 896px) and (max-width: 951.98px) and (max-height: 2012.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 896px) and (max-width: 951.98px) and (min-height: 2013px) and (max-height: 2740.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 952px) and (max-width: 955.98px) and (max-height: 1964.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 952px) and (max-width: 955.98px) and (min-height: 1965px) and (max-height: 2692.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 956px) and (max-width: 975.98px) and (max-height: 1936.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 956px) and (max-width: 975.98px) and (min-height: 1937px) and (max-height: 2664.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 1912.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 1913px) and (max-height: 2640.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1936.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1937px) and (max-height: 2664.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 1912.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1502px)); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (min-height: 1913px) and (max-height: 2640.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2202px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1697.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1234px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1698px) and (max-height: 2490.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2027px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 2491px) and (max-height: 3110.98px) { .inner.art-tips.stage-b { --c3: max(0px, calc(100svh + 24px - 2648px)); } }
@media (min-width: 1224px) and (max-height: 1673.98px) { .inner.art-tips.stage-b { --c1: max(0px, calc(100svh + 24px - 1234px)); } }
@media (min-width: 1224px) and (min-height: 1674px) and (max-height: 2466.98px) { .inner.art-tips.stage-b { --c2: max(0px, calc(100svh + 24px - 2027px)); } }
@media (min-width: 1224px) and (min-height: 2467px) and (max-height: 3086.98px) { .inner.art-tips.stage-b { --c3: max(0px, calc(100svh + 24px - 2648px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 2367.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (min-height: 2368px) and (max-height: 2925.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2491px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (max-height: 2367.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (min-height: 2368px) and (max-height: 2925.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2491px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (max-height: 2367.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (min-height: 2368px) and (max-height: 2925.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2491px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (max-height: 2367.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (min-height: 2368px) and (max-height: 2899.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2465px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 2345.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1907px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (min-height: 2346px) and (max-height: 2877.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2439px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (max-height: 2319.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1867px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (min-height: 2320px) and (max-height: 2851.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2399px)); } }
@media (min-width: 388px) and (max-width: 399.98px) and (max-height: 2319.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1867px)); } }
@media (min-width: 388px) and (max-width: 399.98px) and (min-height: 2320px) and (max-height: 2851.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2399px)); } }
@media (min-width: 400px) and (max-width: 431.98px) and (max-height: 2279.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1867px)); } }
@media (min-width: 400px) and (max-width: 431.98px) and (min-height: 2280px) and (max-height: 2811.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2399px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (max-height: 2253.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1841px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (min-height: 2254px) and (max-height: 2785.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2373px)); } }
@media (min-width: 468px) and (max-width: 583.98px) and (max-height: 2229.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1815px)); } }
@media (min-width: 468px) and (max-width: 583.98px) and (min-height: 2230px) and (max-height: 2761.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2347px)); } }
@media (min-width: 584px) and (max-width: 639.98px) and (max-height: 2213.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1815px)); } }
@media (min-width: 584px) and (max-width: 639.98px) and (min-height: 2214px) and (max-height: 2745.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2347px)); } }
@media (min-width: 640px) and (max-width: 663.98px) and (max-height: 2213.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1785px)); } }
@media (min-width: 640px) and (max-width: 663.98px) and (min-height: 2214px) and (max-height: 2745.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2317px)); } }
@media (min-width: 664px) and (max-width: 687.98px) and (max-height: 2173.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1785px)); } }
@media (min-width: 664px) and (max-width: 687.98px) and (min-height: 2174px) and (max-height: 2705.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2317px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 2149.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1785px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 2150px) and (max-height: 2681.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2317px)); } }
@media (min-width: 768px) and (max-width: 775.98px) and (max-height: 2012.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1577px)); } }
@media (min-width: 768px) and (max-width: 775.98px) and (min-height: 2013px) and (max-height: 2470.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 2035px)); } }
@media (min-width: 768px) and (max-width: 775.98px) and (min-height: 2471px) and (max-height: 4399.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3937px)); } }
@media (min-width: 776px) and (max-width: 783.98px) and (max-height: 1984.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 776px) and (max-width: 783.98px) and (min-height: 1985px) and (max-height: 2442.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1959px)); } }
@media (min-width: 776px) and (max-width: 783.98px) and (min-height: 2443px) and (max-height: 4351.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3861px)); } }
@media (min-width: 784px) and (max-width: 787.98px) and (max-height: 1960.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 784px) and (max-width: 787.98px) and (min-height: 1961px) and (max-height: 2418.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1959px)); } }
@media (min-width: 784px) and (max-width: 787.98px) and (min-height: 2419px) and (max-height: 4319.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3861px)); } }
@media (min-width: 788px) and (max-width: 815.98px) and (max-height: 1912.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 788px) and (max-width: 815.98px) and (min-height: 1913px) and (max-height: 2370.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1959px)); } }
@media (min-width: 788px) and (max-width: 815.98px) and (min-height: 2371px) and (max-height: 4299.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3861px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 1888.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (min-height: 1889px) and (max-height: 2346.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1959px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (min-height: 2347px) and (max-height: 4275.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3861px)); } }
@media (min-width: 884px) and (max-width: 943.98px) and (max-height: 1864.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 884px) and (max-width: 943.98px) and (min-height: 1865px) and (max-height: 2322.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1931px)); } }
@media (min-width: 884px) and (max-width: 943.98px) and (min-height: 2323px) and (max-height: 4251.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3833px)); } }
@media (min-width: 944px) and (max-width: 975.98px) and (max-height: 1836.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 944px) and (max-width: 975.98px) and (min-height: 1837px) and (max-height: 2294.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1931px)); } }
@media (min-width: 944px) and (max-width: 975.98px) and (min-height: 2295px) and (max-height: 4223.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3833px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 1812.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 1813px) and (max-height: 2270.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1931px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 2271px) and (max-height: 4199.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3833px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1836.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1837px) and (max-height: 2294.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1931px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 2295px) and (max-height: 4223.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3833px)); } }
@media (min-width: 1040px) and (max-width: 1055.98px) and (max-height: 1812.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 1040px) and (max-width: 1055.98px) and (min-height: 1813px) and (max-height: 2270.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1931px)); } }
@media (min-width: 1040px) and (max-width: 1055.98px) and (min-height: 2271px) and (max-height: 4199.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3833px)); } }
@media (min-width: 1056px) and (max-width: 1139.98px) and (max-height: 1812.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1425px)); } }
@media (min-width: 1056px) and (max-width: 1139.98px) and (min-height: 1813px) and (max-height: 2270.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1883px)); } }
@media (min-width: 1056px) and (max-width: 1139.98px) and (min-height: 2271px) and (max-height: 4199.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3785px)); } }
@media (min-width: 1140px) and (max-width: 1159.98px) and (max-height: 1812.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1425px)); } }
@media (min-width: 1140px) and (max-width: 1159.98px) and (min-height: 1813px) and (max-height: 2270.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1883px)); } }
@media (min-width: 1140px) and (max-width: 1159.98px) and (min-height: 2271px) and (max-height: 4171.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3785px)); } }
@media (min-width: 1160px) and (max-width: 1199.98px) and (max-height: 1764.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1425px)); } }
@media (min-width: 1160px) and (max-width: 1199.98px) and (min-height: 1765px) and (max-height: 2222.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1883px)); } }
@media (min-width: 1160px) and (max-width: 1199.98px) and (min-height: 2223px) and (max-height: 4151.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3785px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1632.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1255px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1633px) and (max-height: 1971.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1593px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1972px) and (max-height: 3737.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3332px)); } }
@media (min-width: 1224px) and (max-height: 1608.98px) { .inner.art-support.stage-a { --c1: max(0px, calc(100svh + 24px - 1255px)); } }
@media (min-width: 1224px) and (min-height: 1609px) and (max-height: 1947.98px) { .inner.art-support.stage-a { --c2: max(0px, calc(100svh + 24px - 1593px)); } }
@media (min-width: 1224px) and (min-height: 1948px) and (max-height: 3713.98px) { .inner.art-support.stage-a { --c3: max(0px, calc(100svh + 24px - 3332px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (max-height: 2438.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 360px) and (max-width: 363.98px) and (min-height: 2439px) and (max-height: 3067.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2562px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (max-height: 2438.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 364px) and (max-width: 367.98px) and (min-height: 2439px) and (max-height: 3067.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2562px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (max-height: 2438.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 368px) and (max-width: 371.98px) and (min-height: 2439px) and (max-height: 3067.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2562px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (max-height: 2438.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1933px)); } }
@media (min-width: 372px) and (max-width: 379.98px) and (min-height: 2439px) and (max-height: 3041.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2536px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (max-height: 2416.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1907px)); } }
@media (min-width: 380px) and (max-width: 383.98px) and (min-height: 2417px) and (max-height: 3019.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2510px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (max-height: 2390.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1867px)); } }
@media (min-width: 384px) and (max-width: 387.98px) and (min-height: 2391px) and (max-height: 2993.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2470px)); } }
@media (min-width: 388px) and (max-width: 399.98px) and (max-height: 2390.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1867px)); } }
@media (min-width: 388px) and (max-width: 399.98px) and (min-height: 2391px) and (max-height: 2993.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2470px)); } }
@media (min-width: 400px) and (max-width: 431.98px) and (max-height: 2350.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1867px)); } }
@media (min-width: 400px) and (max-width: 431.98px) and (min-height: 2351px) and (max-height: 2953.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2470px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (max-height: 2324.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1841px)); } }
@media (min-width: 432px) and (max-width: 467.98px) and (min-height: 2325px) and (max-height: 2927.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2444px)); } }
@media (min-width: 468px) and (max-width: 583.98px) and (max-height: 2300.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1815px)); } }
@media (min-width: 468px) and (max-width: 583.98px) and (min-height: 2301px) and (max-height: 2903.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2418px)); } }
@media (min-width: 584px) and (max-width: 639.98px) and (max-height: 2284.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1815px)); } }
@media (min-width: 584px) and (max-width: 639.98px) and (min-height: 2285px) and (max-height: 2887.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2418px)); } }
@media (min-width: 640px) and (max-width: 663.98px) and (max-height: 2284.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1785px)); } }
@media (min-width: 640px) and (max-width: 663.98px) and (min-height: 2285px) and (max-height: 2887.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2388px)); } }
@media (min-width: 664px) and (max-width: 687.98px) and (max-height: 2244.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1785px)); } }
@media (min-width: 664px) and (max-width: 687.98px) and (min-height: 2245px) and (max-height: 2847.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2388px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 2220.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1785px)); } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 2221px) and (max-height: 2823.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2388px)); } }
@media (min-width: 768px) and (max-width: 775.98px) and (max-height: 2083.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1577px)); } }
@media (min-width: 768px) and (max-width: 775.98px) and (min-height: 2084px) and (max-height: 2612.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2106px)); } }
@media (min-width: 776px) and (max-width: 783.98px) and (max-height: 2055.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 776px) and (max-width: 783.98px) and (min-height: 2056px) and (max-height: 2584.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2030px)); } }
@media (min-width: 776px) and (max-width: 783.98px) and (min-height: 2585px) and (max-height: 4565.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 4003px)); } }
@media (min-width: 784px) and (max-width: 787.98px) and (max-height: 2031.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 784px) and (max-width: 787.98px) and (min-height: 2032px) and (max-height: 2560.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2030px)); } }
@media (min-width: 784px) and (max-width: 787.98px) and (min-height: 2561px) and (max-height: 4533.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 4003px)); } }
@media (min-width: 788px) and (max-width: 815.98px) and (max-height: 1983.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 788px) and (max-width: 815.98px) and (min-height: 1984px) and (max-height: 2512.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2030px)); } }
@media (min-width: 788px) and (max-width: 815.98px) and (min-height: 2513px) and (max-height: 4513.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 4003px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 1959.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1501px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (min-height: 1960px) and (max-height: 2488.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2030px)); } }
@media (min-width: 816px) and (max-width: 883.98px) and (min-height: 2489px) and (max-height: 4489.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 4003px)); } }
@media (min-width: 884px) and (max-width: 943.98px) and (max-height: 1935.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 884px) and (max-width: 943.98px) and (min-height: 1936px) and (max-height: 2464.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2002px)); } }
@media (min-width: 884px) and (max-width: 943.98px) and (min-height: 2465px) and (max-height: 4465.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3975px)); } }
@media (min-width: 944px) and (max-width: 975.98px) and (max-height: 1907.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 944px) and (max-width: 975.98px) and (min-height: 1908px) and (max-height: 2436.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2002px)); } }
@media (min-width: 944px) and (max-width: 975.98px) and (min-height: 2437px) and (max-height: 4437.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3975px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 1883.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 1884px) and (max-height: 2412.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2002px)); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (min-height: 2413px) and (max-height: 4413.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3975px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 1907.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 1908px) and (max-height: 2436.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2002px)); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (min-height: 2437px) and (max-height: 4437.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3975px)); } }
@media (min-width: 1040px) and (max-width: 1055.98px) and (max-height: 1883.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1473px)); } }
@media (min-width: 1040px) and (max-width: 1055.98px) and (min-height: 1884px) and (max-height: 2412.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 2002px)); } }
@media (min-width: 1040px) and (max-width: 1055.98px) and (min-height: 2413px) and (max-height: 4413.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3975px)); } }
@media (min-width: 1056px) and (max-width: 1139.98px) and (max-height: 1883.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1425px)); } }
@media (min-width: 1056px) and (max-width: 1139.98px) and (min-height: 1884px) and (max-height: 2412.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 1954px)); } }
@media (min-width: 1056px) and (max-width: 1139.98px) and (min-height: 2413px) and (max-height: 4413.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3927px)); } }
@media (min-width: 1140px) and (max-width: 1159.98px) and (max-height: 1883.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1425px)); } }
@media (min-width: 1140px) and (max-width: 1159.98px) and (min-height: 1884px) and (max-height: 2412.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 1954px)); } }
@media (min-width: 1140px) and (max-width: 1159.98px) and (min-height: 2413px) and (max-height: 4385.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3927px)); } }
@media (min-width: 1160px) and (max-width: 1199.98px) and (max-height: 1835.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1425px)); } }
@media (min-width: 1160px) and (max-width: 1199.98px) and (min-height: 1836px) and (max-height: 2364.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 1954px)); } }
@media (min-width: 1160px) and (max-width: 1199.98px) and (min-height: 2365px) and (max-height: 4365.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3927px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 1718.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1255px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 1719px) and (max-height: 2142.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 1679px)); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (min-height: 2143px) and (max-height: 3993.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3503px)); } }
@media (min-width: 1224px) and (max-height: 1694.98px) { .inner.art-support.stage-b { --c1: max(0px, calc(100svh + 24px - 1255px)); } }
@media (min-width: 1224px) and (min-height: 1695px) and (max-height: 2118.98px) { .inner.art-support.stage-b { --c2: max(0px, calc(100svh + 24px - 1679px)); } }
@media (min-width: 1224px) and (min-height: 2119px) and (max-height: 3969.98px) { .inner.art-support.stage-b { --c3: max(0px, calc(100svh + 24px - 3503px)); } }
@media (min-width: 360px) and (max-width: 379.98px) and (max-height: 832.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 380px) and (max-width: 391.98px) and (max-height: 810.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 392px) and (max-width: 395.98px) and (max-height: 810.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 396px) and (max-width: 427.98px) and (max-height: 770.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 428px) and (max-width: 467.98px) and (max-height: 746.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 468px) and (max-width: 663.98px) and (max-height: 732.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 664px) and (max-width: 687.98px) and (max-height: 692.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 668.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 789.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 765.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 741.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 884px) and (max-width: 975.98px) and (max-height: 717.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 693.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 717.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 693.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 763.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 154px); } }
@media (min-width: 1224px) and (max-height: 739.98px) { :root.wm-consent-first .stage-a .post-head { min-height: calc(100svh - 154px); } }
@media (min-width: 360px) and (max-width: 379.98px) and (max-height: 903.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 380px) and (max-width: 391.98px) and (max-height: 881.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 392px) and (max-width: 395.98px) and (max-height: 881.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 396px) and (max-width: 427.98px) and (max-height: 841.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 428px) and (max-width: 467.98px) and (max-height: 817.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 468px) and (max-width: 663.98px) and (max-height: 803.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 664px) and (max-width: 687.98px) and (max-height: 763.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 688px) and (max-width: 767.98px) and (max-height: 739.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 136px); } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 860.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 836.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 812.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 884px) and (max-width: 975.98px) and (max-height: 788.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 764.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 788.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 764.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 138px); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 849.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 154px); } }
@media (min-width: 1224px) and (max-height: 825.98px) { :root.wm-consent-first .stage-b .post-head { min-height: calc(100svh - 154px); } }
@media (min-width: 360px) and (max-width: 379.98px) and (min-height: 1240px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 380px) and (max-width: 411.98px) and (min-height: 1218px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 412px) and (max-width: 467.98px) and (min-height: 1192px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 468px) and (max-width: 471.98px) and (min-height: 1168px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 472px) and (max-width: 527.98px) and (min-height: 1128px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 528px) and (max-width: 687.98px) and (min-height: 1112px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 688px) and (max-width: 767.98px) and (min-height: 1088px) { :root.wm-consent-first .art-how .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 676.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 652.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 628.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 884px) and (max-width: 975.98px) and (max-height: 604.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 580.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 604.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 580.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 593.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 130px); } }
@media (min-width: 1224px) and (max-height: 569.98px) { :root.wm-consent-first .art-how .inner-art.with-watch { margin-top: calc(100svh + 24px - 130px); } }
@media (min-width: 360px) and (max-width: 379.98px) and (min-height: 1292px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 380px) and (max-width: 395.98px) and (min-height: 1270px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 396px) and (max-width: 411.98px) and (min-height: 1244px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 412px) and (max-width: 415.98px) and (min-height: 1244px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 416px) and (max-width: 455.98px) and (min-height: 1204px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 456px) and (max-width: 467.98px) and (min-height: 1178px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 468px) and (max-width: 559.98px) and (min-height: 1154px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 560px) and (max-width: 687.98px) and (min-height: 1138px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 688px) and (max-width: 731.98px) and (min-height: 1114px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 732px) and (max-width: 767.98px) and (min-height: 1088px) { :root.wm-consent-first .art-press .inner-grid:has(.inner-art.with-watch) .inner-lead { min-height: 0; } }
@media (min-width: 768px) and (max-width: 783.98px) and (max-height: 676.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 784px) and (max-width: 815.98px) and (max-height: 652.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 816px) and (max-width: 883.98px) and (max-height: 628.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 884px) and (max-width: 975.98px) and (max-height: 604.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 976px) and (max-width: 1023.98px) and (max-height: 580.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 1024px) and (max-width: 1039.98px) and (max-height: 604.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 1040px) and (max-width: 1199.98px) and (max-height: 580.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 170px); } }
@media (min-width: 1200px) and (max-width: 1223.98px) and (max-height: 593.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 130px); } }
@media (min-width: 1224px) and (max-height: 569.98px) { :root.wm-consent-first .art-press .inner-art.with-watch { margin-top: calc(100svh + 24px - 130px); } }
/* @generated: end */
/* The hero's watch (How to play, Press; wrev7 #2c): from 768 px, where the
   view is too short for it to end 24 px above the bar, the art starts it 24 px
   below the first screen (the words stay); on phones the words and the list
   keep it below the first screen only up to the height where it would stand
   clear of the sheet (the generated rules below). */
/* A post's lead moves with the head above it, by width and height band as
   the generated rules above set it (.post-head's min-height). */

/* About (round 7b): Why and What as rows of 640 px prose, 80 px apart from a
   280 px figure column, each figure top-aligned with its H2; Who on the soft
   Birch panel, its creator line set large; Contact's two whole cards, then
   the address. */
.art-about .row { grid-template-columns: minmax(0, 640px) 280px; column-gap: 80px; }
.art-about .row > .fig { width: 280px; margin-top: -58px; }
.panel {
  padding: var(--panel-pad, 40px);
  border: 1px solid #e1d3c1;
  border-radius: 32px;
  background: linear-gradient(120deg, #f1e5d4 0%, #f4ece0 55%, #f6efe5 100%);
}
.panel .prose { max-width: 900px; }
.panel .prose p:last-child { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.2px; }
.link-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.link-cards-after { margin-top: 32px; }

/* Our whole-card links (News' posts, About's Contact): S1's lift (round 6b),
   our own surface with a soft shadow of its own; nothing of Apple's in one.
   One tab stop each; the arrow is decorative. The edge is drawn on the face,
   as the plates draw it: it never moves the content. */
.post-card, .link-card {
  --face: #fffdf9;
  --edge: 1px solid #d4c4b3;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 24px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease;
}
.post-card::before, .link-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border: var(--edge); border-radius: inherit; background: var(--face); }
.post-card::after, .link-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 5%;
  right: 5%;
  top: 12%;
  bottom: -4%;
  border-radius: inherit;
  background: rgb(87 65 43 / 0.2);
  filter: blur(20px);
  transform: translateY(12px);
  pointer-events: none;
  transition: transform 140ms ease, background-color 140ms ease;
}
.post-card:hover, .link-card:hover { --face: #fffefa; --edge: 1px solid var(--link); transform: translateY(-4px); }
.post-card:hover::after, .link-card:hover::after { background: rgb(87 65 43 / 0.27); transform: translateY(16px); }
.post-card:hover .post-card-title, .link-card:hover .link-card-title { color: var(--link); }
.post-card:hover .card-arrow, .link-card:hover .card-arrow { border-color: var(--link); background: #e4eddf; }
.post-card:active, .link-card:active { --face: #eee8dc; --edge: 2px solid var(--link); transform: translateY(1px) scale(0.99); transition-duration: 0s; }
.post-card:active::after, .link-card:active::after { background: rgb(87 65 43 / 0.14); transform: translateY(4px); }
.post-card:active .card-arrow, .link-card:active .card-arrow { border-color: var(--link); background: var(--link); color: #fffaf5; }
.post-card:focus-visible, .link-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .post-card, .link-card, .post-card::after, .link-card::after { transition: none; }
  .post-card:hover, .link-card:hover, .post-card:active, .link-card:active { transform: none; }
  .post-card:hover::after, .link-card:hover::after, .post-card:active::after, .link-card:active::after { transform: translateY(12px); }
}
.card-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #c3b09a;
  border-radius: 50%;
  background: #f8f5ef;
  color: var(--link);
  font-size: 28px;
  line-height: 1;
}
.link-card { --art-h: 164px; min-height: 324px; }
.link-card .card-arrow { top: calc(48px + var(--art-h)); bottom: auto; }
.link-card-art { position: relative; display: block; height: var(--art-h); border-radius: 16px; background: linear-gradient(140deg, #e8e7e3, #f4efe7); overflow: hidden; }
.link-card-art:has(img[src*="/art-walnut"]) { background: linear-gradient(140deg, #eee1cf, #f7eee3); }
.link-card-art img { position: absolute; left: 50%; top: -20px; width: 320px; height: auto; max-width: none; margin-left: -160px; }
.link-card-art img[src*="/art-walnut"] { top: -34px; width: 360px; margin-left: -180px; }
.link-card-title { display: block; margin-top: 16px; padding-right: 64px; font-size: 24px; line-height: 30px; font-weight: 750; letter-spacing: -0.25px; }
.link-card-text { display: block; margin-top: 8px; padding-right: 64px; font-size: 17px; line-height: 28px; }

/* News (round 7b): the compact hero, about 360 px, with R12 at right; one
   wide card per post (940 px: the 16:10 picture 423 px, inset 24 px, the
   text 445 px), the others two by two (458 px). */
.news .inner-copy { min-height: 0; }
.news .inner-art { height: 300px; }
.news .inner-art .island { left: auto; right: 0; top: 0; width: 420px; }
@media (min-width: 1200px) {
  .news .inner-copy, .news .inner-art { min-height: 0; height: 328px; }
  .news .inner-art .island { left: 110px; right: auto; }
  .news .reading { margin-top: 64px; }
}
.feed-link { margin: 24px 0 0; }
.feed-link a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.news-list .rsec + .rsec { margin-top: 48px; }
.news-list .rsec.news-end { margin-top: 34px; height: 28px; }
.news .spine-hole { top: 21px; }
/* From each card's hole to the next card's (48 px apart, the hole's centre
   28 px down), the last to the goal ring's centre (the end 34 px down, the
   ring's centre 14 px into it), which covers the line's end. */
.news .rsec:not(:last-child):not(.rsec-last)::before { top: 28px; bottom: -76px; }
.news .rsec:not(:last-child):not(.rsec-last):has(+ .news-end)::before { bottom: -48px; }
.news-wide .post-card { display: grid; grid-template-columns: 423px minmax(0, 445px); column-gap: 24px; align-items: center; width: min(940px, 100%); }
.news-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.post-card-art { display: block; }
.post-card-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.post-card-text { display: flex; flex-direction: column; }
.news-rest .post-card-text { padding-top: 24px; }
.post-card-date { display: block; font-size: 18px; line-height: 28px; font-weight: 650; }
.news .post-card-title { margin: 12px 0 0; font-size: 28px; line-height: 34px; font-weight: 750; letter-spacing: -0.35px; }
.post-card-sum { display: block; margin-top: 12px; font-size: 17px; line-height: 28px; }
.post-card-text .card-arrow { position: static; margin: 16px 0 0 auto; }

/* A post (round 7b): the head and the reading column (680 px, 18/28) at
   x 280; the lead figure centred in a 600 px zone, the watch on our Birch
   cut; internal links with "→", the App Store's with "↗", "←" only back up
   to News; the five chapters with their tokens. */
.post-in { width: min(1440px, 100%); margin: 0 auto; padding: 32px 64px 0 var(--read-x); }
.post-head h1 { max-width: 800px; }
.post-date { margin: 24px 0 0; font-size: 18px; line-height: 28px; font-weight: 650; color: var(--ink); }
.post-date + .post-date { margin-top: 0; }
.post-lead { position: relative; width: 600px; margin: 48px 0 0 200px; }
.post-lead .island { position: absolute; z-index: 10; left: 120px; top: 134px; width: 360px; height: auto; max-width: none; }
.post-lead .fig { width: 600px; }
.post-lead .fig .pad { display: none; }
.post-lead figcaption { margin-top: 68px; }
.post .reading { width: min(680px, 100%); margin-top: 100px; font-size: 18px; line-height: 28px; }
.post .prose { max-width: 680px; }
.post .prose a[href^="/"]:not([href^="/media/"])::after { content: "\a0→"; content: "\a0→" / ""; }
.post .rsec.post-end { margin-top: 96px; }
/* The route ends at the goal ring's centre (the end 96 px down, the ring's
   centre 14 px into it), under the ring. */
.post .rsec:not(:last-child):not(.rsec-last):has(+ .post-end)::before { bottom: -110px; }
.post .store-link { margin-top: 32px; font-weight: inherit; }
.post-back { margin: 0; }
.post-back a, .post-near a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-back a::before { content: "←\a0"; content: "←\a0" / ""; }
.post-near { margin: 16px 0 0; padding: 0; list-style: none; }
.post-near li + li { margin-top: 8px; }
.prose ul.chapters { display: grid; gap: 20px; margin: 0 0 32px; padding: 0; }
.prose ul.chapters > li { display: flex; align-items: center; gap: 16px; min-height: 44px; margin: 0; }
.prose ul.chapters > li::before { content: none; }
/* A chapter's token: its look's puck (ours) under a dark disc with the number. */
.chapters .token {
  position: relative;
  isolation: isolate;
  width: 40px;
  height: 40px;
  font-size: 16px;
  font-weight: 850;
  background: none;
  box-shadow: none;
}
.chapters .token::before, .chapters .token::after { content: ""; position: absolute; z-index: -1; }
.chapters .token::before { inset: -5px; background: center / 100% 100% no-repeat; }
.chapters .token::after { inset: 5px; border-radius: 50%; background: radial-gradient(ellipse, #29221c 0, #29221c 55%, #84715f 70%, #cbbbad 78%, #29221c 87%); }
.chapters .chapter-1::before { background-image: url("/assets/img/puck-birch-128.8e4583b02e.avif"); }
.chapters .chapter-2::before { background-image: url("/assets/img/puck-enamel-128.3192c01e79.avif"); }
.chapters .chapter-3::before { background-image: url("/assets/img/puck-neon-128.836fad301c.avif"); }
.chapters .chapter-4::before { background-image: url("/assets/img/puck-graphite-128.e32d145062.avif"); }
.chapters .chapter-5::before { background-image: url("/assets/img/puck-walnut-128.a651324899.avif"); }

/* 768–1199 (round 7b's 768 plates): the hero 394 | 24 | 286 from 24 px down,
   about 360 px; the reading column 560 px centred (a post's 680), the route
   88 px left of it (a post's 28: x 16 at 768); About's rows 336 | 24 | 200. */
@media (max-width: 1199.98px) {
  .inner.no-toc { --spine-off: -88px; --gap-sec: 140px; --panel-pad: 32px; }
  .inner.post { --spine-off: -28px; }
  .no-toc .inner-grid { grid-template-columns: minmax(0, 1fr) 286px; column-gap: 24px; padding-top: 24px; }
  .no-toc .inner-art { grid-row: 1; width: 286px; height: 336px; }
  .no-toc .reading { width: min(560px, 100%); margin: 96px auto 0; }
  .art-about .inner-art .island { left: -16px; top: 32px; width: 320px; }
  .art-about .row { display: grid; grid-template-columns: 336px 200px; column-gap: 24px; }
  .art-about .row > .fig { width: 200px; margin: -58px 0 0; }
  .art-about .row > .fig .pad { width: 208px; height: 312px; }
  .panel .prose p:last-child { font-size: 22px; line-height: 30px; }
  .link-cards, .news-rest { grid-template-columns: minmax(0, 1fr); }
  .link-card { --art-h: 180px; }
  .link-card-art img { top: -25px; width: 380px; margin-left: -190px; }
  .link-card-art img[src*="/art-walnut"] { top: -36px; width: 400px; margin-left: -200px; }
  .news .inner-art .island { left: 0; right: auto; top: 24px; width: 286px; }
  .news .reading { margin-top: 56px; }
  /* One column: the art takes the card's width, its 16:10 box held before
     its picture arrives (the wide grid's centring would shrink it to 0). */
  .news-wide .post-card { display: flex; align-items: stretch; }
  .news-wide .post-card-text { padding-top: 24px; }
  .post-in { width: min(680px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 0; }
  .post-lead { width: min(600px, 100%); margin: 40px auto 0; }
  .post-lead .fig { width: 100%; }
  .post-lead .island { left: calc(50% - 180px); top: 104px; width: 360px; }
  .post-lead figcaption { margin-top: 104px; }
  .post .reading { width: min(640px, 100%); margin: 80px 0 0; font-size: 18px; line-height: 28px; }
  .no-toc ~ .foot { margin-top: 120px; }
  .news ~ .foot { margin-top: 162px; }
  /* The hole: 88 px left of the centred column, (grid − 560) / 2 + 32 − 88
     from the grid's edge; the art column: 32 + grid − 286. */
  .hero-route.mid { display: block; left: calc(-82px - var(--grid-w) / 2); }
  .news .hero-route.mid { top: 194.67px; width: calc(253.6px + var(--grid-w) / 2); height: 225.33px; }
  .art-about .hero-route.mid { top: 225.33px; width: calc(258px + var(--grid-w) / 2); height: 220.67px; }
}
/* Phones (the 390 plates): the hero stacked from 24 px down, our art inside
   the margins (News 326 px, About 358); the reading column 342 px at x 32,
   the route at x 16; 100 px between sections; the footer 100 px below. */
@media (max-width: 767.98px) {
  .inner.no-toc { --spine-off: -16px; --gap-sec: 100px; --panel-pad: 24px; --gap-panel: 120px; }
  .inner.post { --spine-off: -16px; }
  .no-toc .inner-grid { padding-top: 24px; }
  .no-toc .inner-art { width: 100%; }
  .no-toc .reading { width: auto; margin: 88px 0 0 16px; }
  .art-about .inner-art { height: auto; aspect-ratio: 3 / 2; }
  .art-about .inner-art .island { left: 0; top: 0; width: 100%; }
  .art-about .row { display: block; }
  .art-about .row > .fig { width: 100%; margin: 40px 0 0; }
  .art-about .row > .fig .pad { left: calc(50% - 109px); width: 218px; }
  .panel { border-radius: 24px; }
  .panel .prose p:last-child { font-size: 20px; line-height: 28px; }
  .link-card { --art-h: 148px; min-height: 300px; }
  .link-card-art img { top: -20px; width: 290px; margin-left: -145px; }
  .link-card-art img[src*="/art-walnut"] { top: -32px; width: 320px; margin-left: -160px; }
  .link-card-text { font-size: 16px; line-height: 26px; }
  .news .inner-art { width: calc(100% - 32px); height: auto; margin: 32px 16px 0; aspect-ratio: 3 / 2; }
  .news .inner-art .island { left: 0; right: auto; top: 0; width: 100%; }
  .hero-route.mid { display: none; }
  .hero-route.narrow { display: block; top: calc(66.667cqw - 20px); }
  .news .hero-route.narrow { left: -16px; width: calc(60cqw + 16px); height: 104px; }
  .art-about .hero-route.narrow { left: 0; width: 60cqw; height: 122px; }
  .news .reading { margin-top: 56px; }
  .news .post-card-title { margin-top: 16px; font-size: 24px; line-height: 30px; }
  .post-card-date { font-size: 17px; line-height: 26px; }
  .post-card-sum { margin-top: 16px; font-size: 17px; line-height: 26px; }
  .post-card-text .card-arrow { margin-top: 24px; }
  .post-in { width: auto; padding: 24px 16px 0 32px; }
  .post-date { font-size: 17px; line-height: 26px; }
  .post-lead { width: 100%; margin: 48px 0 0; }
  .post-lead .fig { width: 100%; margin-left: 0; }
  .post-lead .island { left: -8px; top: 100px; width: calc(100% + 16px); }
  .post .reading { width: auto; margin: 72px 0 0; font-size: 16px; line-height: 26px; }
  .post .rsec.post-end { margin-top: 88px; }
  .post .rsec:not(:last-child):not(.rsec-last):has(+ .post-end)::before { bottom: -102px; }
  .no-toc ~ .foot { margin-top: 100px; }
  .news ~ .foot { margin-top: 122px; }
}