/* wild-meme / shitpost-wall
   A panic-dialog desktop. The page is a desktop wallpapered in the brand colour; every
   section is a bevelled window (or a pile of them), the hero is one absurdly large
   system alert beside the logo in a cracked window, dialogs pile up and leave a trail,
   slogan dialogs and scene crops rain behind it, hazard-tape marquees scream the slogans. Loud on purpose,
   but on a strict grid: one bevel system, one title-bar system, Impact for the shouting
   and Tahoma for everything that has to be read. */

:root {
  /* the desktop */
  --sw-desk: var(--wl-accent);
  --sw-desk-dot: color-mix(in oklab, var(--wl-accent) 62%, #000);
  /* window chrome */
  --sw-face: #d4d0c8;
  --sw-hi: #ffffff;
  --sw-lt: #e8e5de;
  --sw-lo: #808080;
  --sw-dk: #0a0a0a;
  --sw-ink: #0b0b0b;
  --sw-title-a: color-mix(in oklab, var(--wl-accent) 22%, #07071c);
  --sw-title-b: color-mix(in oklab, var(--wl-accent) 86%, #07071c);
  --sw-title-off-a: #7c7a76;
  --sw-title-off-b: #b8b5ae;
  --sw-hazard: color-mix(in oklab, #ffd21a 82%, var(--wl-secondary));
  --sw-bevel: inset -1px -1px 0 var(--sw-dk), inset 1px 1px 0 var(--sw-lt), inset -2px -2px 0 var(--sw-lo), inset 2px 2px 0 var(--sw-hi);
  --sw-sunk: inset 1px 1px 0 var(--sw-lo), inset -1px -1px 0 var(--sw-hi), inset 2px 2px 0 var(--sw-dk), inset -2px -2px 0 var(--sw-lt);
  --sw-press: inset 1px 1px 0 var(--sw-dk), inset -1px -1px 0 var(--sw-hi), inset 2px 2px 0 var(--sw-lo), inset -2px -2px 0 var(--sw-lt);
  --sw-drop: 9px 11px 0 rgb(0 0 0 / 0.34);
  --sw-titlebar: linear-gradient(90deg, var(--sw-title-a), var(--sw-title-b));
  --sw-titlebar-off: linear-gradient(90deg, var(--sw-title-off-a), var(--sw-title-off-b));
  --sw-outline: -4px -4px 0 #000, 0 -4px 0 #000, 4px -4px 0 #000, 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, -4px 4px 0 #000, -4px 0 0 #000, -2px -4px 0 #000, 2px -4px 0 #000, 4px -2px 0 #000, 4px 2px 0 #000, 2px 4px 0 #000, -2px 4px 0 #000, -4px 2px 0 #000, -4px -2px 0 #000;

  /* engine vocabulary: the ground of every engine component is a window face */
  --v-bg: var(--sw-face);
  --v-fg: var(--sw-ink);
  --v-soft: #2d2b28;
  --v-faint: #5b5853;
  --v-line: var(--sw-lo);
  --v-line-strong: var(--sw-dk);
  --v-surface: #ffffff;
  --v-surface-2: #ebe8e1;
  --v-card-bg: var(--sw-face);
  --v-accent: var(--wl-accent);
  --v-accent-text: var(--wl-accent-on-light);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary);
  --v-seg-1: var(--wl-accent);
  --v-seg-2: #1f5fe0;
  --v-seg-3: var(--sw-hazard);
  --v-seg-4: #2f9e44;
  --v-seg-5: #7d2ae8;
  --v-seg-6: #5b5853;
  --v-font-body: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, Geneva, "Segoe UI", sans-serif;
  --v-font-display: Impact, Haettenschweiler, "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, "Arial Black", sans-serif;
  --v-font-mono: "Lucida Console", "Fixedsys", Consolas, "Courier New", monospace;
  --v-display-weight: 900;
  --v-display-tracking: 0.012em;
  --v-display-case: uppercase;
  --v-display-lh: 0.9;
  --v-title-size: clamp(2.3rem, 4.6vw, 4.1rem);
  --v-body-size: 1rem;
  --v-radius: 0px;
  --v-radius-sm: 0px;
  --v-radius-lg: 0px;
  --v-border: 0;
  --v-shadow: var(--sw-drop);
  --v-card-pad: 20px;
  --v-maxw: 1120px;
  --v-pad-x: clamp(16px, 4vw, 56px);
  --v-sec-gap: clamp(64px, 8vw, 116px);
  --v-spring: cubic-bezier(0.3, 1.55, 0.5, 1);

  --wl-label-lore: "README.TXT";
  --wl-label-features: "FEATURES.EXE";
  --wl-label-supply: "DISK USAGE";
  --wl-label-flow: "PROCESS.EXE";
  --wl-label-timeline: "EVENT LOG";
  --wl-label-comparison: "BENCHMARK.EXE";
  --wl-label-stats: "PROPERTIES";
  --wl-label-tweet: "NEW MESSAGE";
  --wl-label-gallery: "EVIDENCE";
  --wl-label-facts: "SYSTEM CHECK";
  --wl-label-quotes: "USER REPORTS";
  --wl-label-faq: "HELP.HLP";
  --wl-label-access: "SETUP.EXE";

  /* app.js flourishes this skin wants */
  --wm-skin: shitpost-wall;
  --wm-js-rain: 1;
  --wm-js-trail: 5;

  /* skeleton knobs */
  --wm-top-h: 40px;
  --wm-stage-cols: 112px minmax(0, 1.1fr) minmax(0, 0.9fr);
  --wm-stage-rows: minmax(0, 1fr);
  --wm-stage-areas: "desk copy screen";
  --wm-stage-pad: 24px 46px 30px 10px;
  --wm-stage-gap: 20px 40px;
  --wm-desk-display: block;
  --wm-screen-align: start;
  --wm-screen-justify: end;
  --wm-screen-w: min(100%, clamp(380px, 35vw, 580px));
  --wm-glass-ar: 1;
  --wm-copy-align: center;
  --wm-stack-area: screen;
  --wm-stack-align: end;
  --wm-stack-justify: start;
  --wm-stack-maxw: 400px;
  --wm-stack-margin: 0 -30px -8px 104px;
  --wm-stack-gap: 0px;
  /* the trail smears left, toward the alert */
  --wm-trail-dx: -24px;
  --wm-trail-dy: -7px;
}

/* ================================================================ the desktop */

html { background: var(--sw-desk); }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgb(255 255 255 / 0.14), transparent 70%),
    radial-gradient(circle, var(--sw-desk-dot) 1.3px, transparent 1.8px) 0 0 / 22px 22px,
    var(--sw-desk);
  color: var(--sw-ink);
  line-height: 1.5;
}
::selection { background: var(--sw-title-a); color: #fff; }

/* ================================================================ taskbar */

.wm-top {
  --wm-top-pad: 5px;
  gap: 5px;
  background: var(--sw-face);
  box-shadow: inset 0 1px 0 var(--sw-hi), inset 0 -1px 0 var(--sw-lo), 0 1px 0 var(--sw-dk), 0 6px 0 rgb(0 0 0 / 0.12);
  font-size: 13px;
}
.wm-brand {
  height: 30px; padding: 0 12px 0 5px; gap: 7px;
  background: var(--sw-face); box-shadow: var(--sw-bevel);
  color: var(--sw-ink);
}
.wm-brand:active { box-shadow: var(--sw-press); }
.wm-brand__mark { width: 22px; height: 22px; box-shadow: 0 0 0 1px var(--sw-dk); }
.wm-brand__name { font-weight: 700; font-size: 14px; }
.wm-brand__tick { font-family: var(--v-font-mono); font-size: 12px; color: #3d3b38; }
.wm-top__nav {
  height: 30px; align-items: center; gap: 4px; overflow: hidden;
  margin-left: 3px; padding-left: 7px;
  border-left: 1px solid var(--sw-lo); box-shadow: inset 1px 0 0 var(--sw-hi);
}
.wm-top__nav .wl-nav__link {
  flex: 0 1 158px; min-width: 64px;
  display: block; height: 30px; line-height: 30px;
  padding: 0 10px 0 6px;
  overflow: hidden; text-overflow: ellipsis;
  background: var(--sw-face); box-shadow: var(--sw-bevel);
  color: var(--sw-ink); font-size: 12px;
}
.wm-top__nav .wl-nav__link::before {
  content: ""; display: inline-block; vertical-align: -3px;
  width: 16px; height: 16px; margin-right: 6px;
  background: var(--sw-ico, url("../art/ico-folder.svg")) center / contain no-repeat;
}
.wm-top__nav .wl-nav__link.is-active, .wm-top__nav .wl-nav__link:active {
  font-weight: 700; box-shadow: var(--sw-press);
  background: repeating-conic-gradient(#ffffff 0 25%, var(--sw-face) 0 50%) 0 0 / 2px 2px;
}
.wm-top__status {
  height: 30px; padding: 0 12px 0 10px; gap: 8px;
  box-shadow: inset 1px 1px 0 var(--sw-lo), inset -1px -1px 0 var(--sw-hi);
  font-size: 12px;
}
.wm-led { background: #1fcc54; box-shadow: 0 0 0 1px #0b5a24, 0 0 6px #1fcc54; animation: sw-blink 1.4s steps(2, jump-none) infinite; }
@keyframes sw-blink { 50% { background: #0b7a2e; box-shadow: 0 0 0 1px #0b5a24; } }

/* per-kind icons, shared by the taskbar buttons and the window title bars */
.wl-nav__link--lore, .wl-sec--lore { --sw-ico: url("../art/ico-doc.svg"); }
.wl-nav__link--gallery, .wl-sec--gallery { --sw-ico: url("../art/ico-picture.svg"); }
.wl-nav__link--tweet, .wl-sec--tweet { --sw-ico: url("../art/ico-mail.svg"); }
.wl-nav__link--quotes, .wl-sec--quotes { --sw-ico: url("../art/ico-chat.svg"); }
.wl-nav__link--infographic, .wl-sec--infographic { --sw-ico: url("../art/ico-pie.svg"); }
.wl-nav__link--facts, .wl-sec--facts { --sw-ico: url("../art/ico-check.svg"); }
.wl-nav__link--faq, .wl-sec--faq { --sw-ico: url("../art/ico-question.svg"); }
.wl-nav__link--access, .wl-sec--access { --sw-ico: url("../art/ico-disk.svg"); }
.wl-nav__link--features, .wl-sec--features { --sw-ico: url("../art/ico-gear.svg"); }
.wl-nav__link--timeline, .wl-sec--timeline { --sw-ico: url("../art/ico-clock.svg"); }
.wl-link--chart { --sw-ico: url("../art/ico-chart.svg"); }
.wl-link--explorer { --sw-ico: url("../art/ico-explorer.svg"); }
.wl-link--x { --sw-ico: url("../art/ico-x.svg"); }
.wl-link--telegram { --sw-ico: url("../art/ico-telegram.svg"); }

/* ================================================================ hero */

.wm-hero__bg {
  background:
    radial-gradient(ellipse 60% 55% at 62% 48%, rgb(255 255 255 / 0.2), transparent 70%),
    linear-gradient(180deg, rgb(0 0 0 / 0.06), transparent 30%, rgb(0 0 0 / 0.12));
}

/* alarm: hazard tape with the slogans */
.wm-alarm {
  display: flex; align-items: center;
  height: 50px; padding-block: 9px;
  background: var(--sw-hazard);
  color: var(--sw-ink);
  font: 400 25px/1 var(--v-font-display); font-synthesis: none;
  text-transform: uppercase; letter-spacing: 0.035em;
  box-shadow: 0 3px 0 var(--sw-dk), 0 9px 0 rgb(0 0 0 / 0.18);
}
.wm-alarm::before, .wm-alarm::after, .wm-crawl::before {
  content: ""; position: absolute; left: 0; right: 0; height: 8px; z-index: 1;
  background: linear-gradient(45deg, var(--sw-ink) 25%, transparent 25% 50%, var(--sw-ink) 50% 75%, transparent 75%) 0 0 / 18px 18px;
  animation: sw-tape 0.9s linear infinite;
}
.wm-alarm::before { top: 0; }
.wm-alarm::after { bottom: 0; animation-direction: reverse; }
@keyframes sw-tape { to { background-position: 18px 0; } }
.wm-alarm .wl-marquee__track { animation-duration: calc(var(--wl-marquee-s, 40s) * 0.62); }
.wm-alarm .wl-marquee__item { display: inline-flex; align-items: center; gap: 0.5em; padding: 0 1.05em; }
.wm-alarm .wl-marquee__item::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em;
  background: url("../art/ico-warn.svg") center / contain no-repeat;
}

/* crawl: black tape with the facts, running the other way */
.wm-crawl {
  height: 48px;
  background: var(--sw-ink);
  color: var(--sw-hazard);
  font: 400 21px/1 var(--v-font-display); font-synthesis: none;
  text-transform: uppercase; letter-spacing: 0.04em;
  box-shadow: 0 -3px 0 var(--sw-dk);
}
.wm-crawl::before {
  top: -11px; height: 8px;
  background-color: var(--sw-hazard);
}
.wm-crawl__label {
  gap: 9px; padding: 0 18px 0 14px;
  background: var(--sw-hazard); color: var(--sw-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding-right: 26px;
}
.wm-crawl__label::before { content: ""; width: 22px; height: 22px; background: url("../art/ico-check.svg") center / contain no-repeat; }
.wm-crawl__label::after { content: "Verified"; }
.wm-crawl .wl-marquee__track { animation-direction: reverse; }
.wm-crawl .wl-marquee__item { display: inline-flex; align-items: center; gap: 0.7em; padding: 0 0.9em; }
.wm-crawl .wl-marquee__item::before { content: ""; width: 0.42em; height: 0.42em; background: var(--wl-accent); rotate: 45deg; }

/* desk: the project links as desktop shortcuts */
.wm-desk .wl-links { gap: 16px; align-items: center; padding-top: 4px; }
.wm-desk .wl-link {
  flex-direction: column; gap: 5px;
  width: 110px; padding: 4px 2px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: #fff; font: 400 11px/1.25 var(--v-font-body);
  text-align: center; text-shadow: 1px 1px 0 #000, 0 0 3px rgb(0 0 0 / 0.9);
}
.wm-desk .wl-link:hover { transform: none; border: 0; }
.wm-desk .wl-link .wl-glyph { display: none; }
.wm-desk .wl-link::before {
  content: ""; width: 46px; height: 46px;
  background: var(--sw-ico, url("../art/ico-folder.svg")) center / contain no-repeat;
  filter: drop-shadow(2px 3px 0 rgb(0 0 0 / 0.35));
}
.wm-desk .wl-link span { max-width: 100%; padding: 1px 4px; overflow-wrap: anywhere; }
.wm-desk .wl-link:hover span, .wm-desk .wl-link:focus-visible span { background: var(--sw-title-a); outline: 1px dotted #fff; text-shadow: none; }
.wm-desk .wl-link:focus-visible { outline: 0; }

/* the alert: kicker in the title bar, a warning glyph, the headline, the buttons */
.wm-copy {
  background: var(--sw-face);
  box-shadow: var(--sw-bevel), var(--sw-drop);
  padding: 3px;
  rotate: -0.7deg;
}
.wm-copy__bar {
  height: 32px; padding: 0 5px 0 8px; gap: 10px;
  background: var(--sw-titlebar);
  color: #fff;
}
.wm-kicker {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--v-font-body);
  white-space: nowrap; overflow: hidden;
}
.wm-kicker::before { content: ""; flex: none; width: 18px; height: 18px; background: url("../art/ico-warn.svg") center / contain no-repeat; }
.wm-kicker span { overflow: hidden; text-overflow: ellipsis; }
.wm-winbtns { width: 50px; height: 14px; margin-left: auto; background: url("../art/winbtns.svg") 0 0 / 50px 14px no-repeat; }
.wm-winbtns--x { width: 16px; background-image: url("../art/winbtn-x.svg"); background-size: 16px 14px; }
.wm-copy__body { padding: clamp(18px, 2.3vw, 30px) clamp(18px, 2.4vw, 32px) clamp(16px, 1.8vw, 22px); }
.wm-copy__icon {
  width: clamp(46px, 5.2vw, 76px); aspect-ratio: 1;
  margin: 0.2em clamp(14px, 1.8vw, 24px) 0 0;
  background: url("../art/ico-warn.svg") center / contain no-repeat;
  filter: drop-shadow(3px 4px 0 rgb(0 0 0 / 0.22));
}
.wm-headline {
  font-size: clamp(2.7rem, 6.05vw, 6rem);
  color: var(--sw-ink);
  font-synthesis: none;
}
/* the alert never outgrows the first screen: longer headlines set smaller (app.js measures) */
.wm-copy[data-wm-len="s"] .wm-headline { font-size: clamp(3rem, 7vw, 7rem); }
.wm-copy[data-wm-len="l"] .wm-headline { font-size: clamp(2.3rem, 4.4vw, 4.4rem); }
.wm-copy[data-wm-len="xl"] .wm-headline { font-size: clamp(2rem, 3.5vw, 3.5rem); }
/* no kicker: the alert still gets a title */
.wm-copy__bar:not(:has(.wm-kicker))::before {
  content: "System alert"; flex: 1 1 auto;
  padding-left: 26px;
  background: url("../art/ico-warn.svg") 0 50% / 18px 18px no-repeat;
  font: 700 14px/32px var(--v-font-body);
}
.wm-headline .wl-w { margin-right: 0.04em; }
.wm-headline .wl-w:last-child {
  padding: 0.02em 0.1em 0;
  background: var(--wl-accent); color: var(--wl-on-accent);
  box-shadow: 0.06em 0.07em 0 var(--sw-ink);
  rotate: -2.5deg;
}
.wm-subhead {
  margin-top: clamp(14px, 1.6vw, 22px);
  max-width: 34em;
  font-size: clamp(1rem, 1.2vw, 1.13rem); line-height: 1.5;
  color: #2d2b28;
}
.wm-cta {
  justify-content: flex-end;
  margin-top: clamp(16px, 2vw, 24px); padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--sw-lo); box-shadow: inset 0 1px 0 var(--sw-hi);
}

/* buttons, everywhere: bevelled; the first is the default (black ring + focus dots) */
.wl-btn {
  position: relative;
  min-height: 40px; padding: 0 18px; gap: 8px;
  border: 0; border-radius: 0;
  background: var(--sw-face); color: var(--sw-ink);
  box-shadow: var(--sw-bevel);
  font: 700 14px/1 var(--v-font-body); letter-spacing: 0;
  transition: none;
}
.wl-btn:hover { transform: none; filter: brightness(1.05); }
.wl-btn:active { box-shadow: var(--sw-press); }
.wl-btn .wl-glyph { width: 16px; height: 16px; stroke-width: 2.2; }
.wl-btn--primary, .wl-btn--primary:hover {
  background: var(--wl-accent); color: var(--wl-on-accent);
  box-shadow: 0 0 0 2px var(--sw-dk), inset -2px -2px 0 rgb(0 0 0 / 0.42), inset 2px 2px 0 rgb(255 255 255 / 0.5);
}
.wl-btn--primary::after { content: ""; position: absolute; inset: 5px; border: 1px dotted currentColor; opacity: 0.75; pointer-events: none; }
/* somebody is about to press it */
.wm-cta .wl-btn--primary::before {
  content: ""; position: absolute; z-index: 2; right: 14%; bottom: -22px;
  width: 24px; height: 36px;
  background: url("../art/cursor.svg") 0 0 / contain no-repeat;
  filter: drop-shadow(2px 3px 0 rgb(0 0 0 / 0.3));
  pointer-events: none;
}
.wl-btn__ca { font-family: var(--v-font-mono); font-size: 12px; font-weight: 400; opacity: 0.85; }
.wl-btn:focus-visible, .wl-link:focus-visible, .wl-copy:focus-visible { outline: 2px dotted var(--sw-ink); outline-offset: 2px; }

/* the cracked window */
.wm-screen {
  background: var(--sw-face);
  box-shadow: var(--sw-bevel), var(--sw-drop);
  padding: 3px;
  rotate: 2.4deg;
}
.wm-screen__bar { height: 30px; padding: 0 5px 0 8px; background: var(--sw-titlebar); color: #fff; }
.wm-screen__title { display: block; font: 700 13px/30px var(--v-font-body); }
.wm-screen__title::before {
  content: ""; display: inline-block; vertical-align: -3px;
  width: 16px; height: 16px; margin-right: 7px;
  background: url("../art/ico-picture.svg") center / contain no-repeat;
}
.wm-screen:has(.wl-media--pfp-animated) .wm-screen__title::after { content: ".gif"; }
/* wide art gets a landscape window */
.wm-screen:has(.wl-media--hero, .wl-media--banner, .wl-media--og, [class*="wl-media--scene"]),
.wm-screen[data-wm-shape="wide"] { --wm-glass-ar: 16 / 10; --wm-glass-ar-phone: 16 / 10; --wm-screen-w: 100%; }
.wm-screen[data-wm-shape="square"], .wm-screen[data-wm-shape="tall"] { --wm-glass-ar: 1; --wm-glass-ar-phone: 1; }
.wm-screen__glass {
  margin-top: 3px;
  border: 2px solid; border-color: var(--sw-lo) var(--sw-hi) var(--sw-hi) var(--sw-lo);
  background: #000;
}
.wm-screen__glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgb(255 255 255 / 0.2), transparent 32%, transparent 70%, rgb(255 255 255 / 0.08));
}
.wm-fx, .wm-osd, .wm-screen__blur, .wm-feed { display: none; }
/* the mascot once, as a desktop shortcut in the corner of the cracked window */
.wm-bug { z-index: 4; right: 12px; bottom: 12px; display: grid; justify-items: center; gap: 3px; width: 76px; }
.wm-bug__img { width: 46px; height: 46px; object-fit: cover; box-shadow: 0 0 0 2px #fff, 3px 4px 0 rgb(0 0 0 / 0.35); }
.wm-bug__tick { padding: 1px 4px; background: #000080; color: #fff; font: 700 11px/1.3 var(--v-font-body); outline: 1px dotted #fff; outline-offset: -1px; }
.wm-crack__lines path { fill: none; stroke: rgb(255 255 255 / 0.9); stroke-width: 0.36; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wm-crack__lines { filter: drop-shadow(0.6px 0.8px 0 rgb(0 0 0 / 0.6)); }
.wm-crack__shards path { fill: rgb(255 255 255 / 0.3); stroke: rgb(255 255 255 / 0.85); stroke-width: 0.25; }
.wm-crack__hit { fill: #fff; }

/* the dialog pile */
.wm-dialog {
  width: 318px; max-width: 100%;
  background: var(--sw-face);
  box-shadow: var(--sw-bevel), 6px 8px 0 rgb(0 0 0 / 0.3);
  padding: 3px;
  font-size: 13px;
}
/* each dialog in the pile leaves its title and first line showing */
.wm-dialog--1 + .wm-dialog { margin-top: -56px; margin-left: 38px; }
.wm-dialog--2 + .wm-dialog { margin-top: -26px; margin-left: 38px; }
.wm-dialog__bar { height: 24px; padding: 0 4px 0 7px; background: var(--sw-titlebar-off); color: #eceae5; font: 700 12px/24px var(--v-font-body); }
.wm-dialog--3 .wm-dialog__bar { background: var(--sw-titlebar); color: #fff; }
.wm-dialog--1 .wm-dialog__title::before { content: "Error"; }
.wm-dialog--2 .wm-dialog__title::before { content: "Contract address"; }
.wm-dialog--3 .wm-dialog__title::before { content: "Warning"; }
.wm-dialog__body { padding: 14px 14px 12px; align-items: center; }
.wm-dialog__icon { width: 34px; height: 34px; background: url("../art/ico-error.svg") center / contain no-repeat; }
.wm-dialog--2 .wm-dialog__icon { background-image: url("../art/ico-info.svg"); }
.wm-dialog--3 .wm-dialog__icon { background-image: url("../art/ico-warn.svg"); }
.wm-dialog__text { font-size: 14px; line-height: 1.35; }
.wm-dialog__ca { display: block; padding: 5px 8px; background: #fff; box-shadow: var(--sw-sunk); font: 13px/1.3 var(--v-font-mono); white-space: nowrap; }
.wm-dialog__foot { padding: 0 0 12px; }
.wm-fakebtn { min-width: 78px; padding: 5px 12px; background: var(--sw-face); box-shadow: var(--sw-bevel); font-size: 12px; text-align: center; }
.wm-dialog__foot .wm-fakebtn:first-child { box-shadow: 0 0 0 1px var(--sw-dk), var(--sw-bevel); }
/* the trail an unresponsive dialog leaves when it is dragged (clones added by app.js) */
.wm-trail {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  translate: calc(var(--k, 1) * var(--wm-trail-dx)) calc(var(--k, 1) * var(--wm-trail-dy));
  box-shadow: var(--sw-bevel); background: var(--sw-face); padding: 3px;
}
.wm-trail::before { content: ""; display: block; height: 24px; background: var(--sw-titlebar-off); }


/* no picture at all: the viewer shows its placeholder */
.wm-screen:has(.wl-media--none) .wm-screen__glass { background: url("../art/ico-picture.svg") center / 30% no-repeat, #fff; }
.wm-screen:has(.wl-media--none) .wm-screen__glass::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 0.55); }

/* float bobs the picture; here the picture stays put in its frame */
.wl-motion-float .wm-media .wl-hero-img { animation: none; }

/* ================================================================ sections: windows */

.wl-sec { padding: var(--v-sec-gap) var(--v-pad-x) 0; }
.wl-flow > .wl-sec:first-child { padding-top: clamp(60px, 7vw, 100px); }

.wl-sec:where(:not(.wl-sec--gallery, .wl-sec--quotes)) > .wl-sec__inner {
  position: relative;
  max-width: var(--sw-win-w, 940px);
  background: var(--sw-face);
  box-shadow: var(--sw-bevel), var(--sw-drop);
  padding: 3px;
  rotate: var(--sw-tilt, 0deg);
  translate: var(--sw-shift, 0px) 0;
}
.wl-flow > .wl-sec:nth-child(odd) { --sw-tilt: -0.5deg; --sw-shift: -3%; }
.wl-flow > .wl-sec:nth-child(even) { --sw-tilt: 0.45deg; --sw-shift: 3%; }
.wl-sec--lore { --sw-win-w: 900px; }
.wl-sec--tweet { --sw-win-w: 780px; }
.wl-sec--infographic { --sw-win-w: 1040px; }
.wl-sec--facts { --sw-win-w: 860px; }
.wl-sec--faq { --sw-win-w: 900px; }
.wl-sec--access { --sw-win-w: 920px; }
.wl-sec--features { --sw-win-w: 1100px; }
.wl-sec--timeline { --sw-win-w: 860px; }

.wl-sec:where(:not(.wl-sec--gallery, .wl-sec--quotes)) .wl-sec__head { margin: 0; max-width: none; }
.wl-sec:where(:not(.wl-sec--gallery, .wl-sec--quotes)) .wl-kicker {
  margin: 0; height: 30px; padding: 0 5px 0 8px; gap: 7px;
  background: var(--sw-titlebar);
  color: #fff; font: 700 13px/1 var(--v-font-body);
  letter-spacing: 0.02em; text-transform: none;
}
.wl-kicker::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: var(--sw-ico, url("../art/ico-folder.svg")) center / contain no-repeat;
}
.wl-kicker .wl-ord { opacity: 1; padding: 2px 5px; background: rgb(0 0 0 / 0.35); font: 400 11px/1.2 var(--v-font-mono); }
.wl-sec:where(:not(.wl-sec--gallery, .wl-sec--quotes)) .wl-kicker::after {
  content: ""; margin-left: auto; flex: none; width: 50px; height: 14px;
  background: url("../art/winbtns.svg") 0 0 / 50px 14px no-repeat;
}
.wl-sec:where(:not(.wl-sec--gallery, .wl-sec--quotes)) .wl-sec__title {
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.8vw, 36px) 0;
  color: var(--sw-ink); font-synthesis: none;
}
.wl-sec:where(:not(.wl-sec--gallery, .wl-sec--quotes)) .wl-sec__body {
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.8vw, 36px) clamp(22px, 2.8vw, 36px);
}

/* loose sections: straight on the wallpaper, a meme caption for a title */
.wl-sec--gallery > .wl-sec__inner, .wl-sec--quotes > .wl-sec__inner { max-width: 1160px; position: relative; }
.wl-sec--gallery .wl-sec__head, .wl-sec--quotes .wl-sec__head { max-width: none; margin-bottom: clamp(28px, 3.6vw, 48px); }
.wl-sec--gallery .wl-kicker, .wl-sec--quotes .wl-kicker {
  display: inline-flex; gap: 8px;
  margin: 0 0 18px; padding: 8px 14px 8px 10px;
  background: var(--sw-ink); color: var(--sw-hazard);
  font: 700 13px/1 var(--v-font-body); letter-spacing: 0.12em;
  rotate: -2deg; box-shadow: 5px 5px 0 rgb(0 0 0 / 0.28);
}
.wl-sec--gallery .wl-kicker::before, .wl-sec--quotes .wl-kicker::before { width: 20px; height: 20px; }
.wl-sec--gallery .wl-sec__title, .wl-sec--quotes .wl-sec__title {
  font-size: clamp(3rem, 8.4vw, 7.6rem); line-height: 0.88;
  color: #fff; font-synthesis: none;
  text-shadow: var(--sw-outline), 9px 10px 0 #000;
  rotate: -1.2deg;
}

/* lore: a README in Notepad */
.wl-sec--lore > .wl-sec__inner::before {
  content: ""; position: absolute; inset: 60px 3px 3px 3px;
  background: #fff; box-shadow: var(--sw-sunk);
}
.wl-sec--lore .wl-sec__title { position: relative; padding-top: 0; }
.wl-sec--lore .wl-sec__title::before {
  content: "File\2003 Edit\2003 Format\2003 View\2003 Help";
  display: block; height: 27px; margin: 0 calc(-1 * clamp(20px, 2.8vw, 36px)) clamp(20px, 2.6vw, 30px);
  padding: 0 11px;
  font: 400 13px/27px var(--v-font-body); letter-spacing: 0; text-transform: none; color: var(--sw-ink);
}
.wl-sec--lore .wl-sec__body { position: relative; }
.wl-lore { max-width: 44rem; font-family: var(--v-font-mono); }
.wl-lore__lead { font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.65; font-weight: 400; color: var(--sw-ink); }
.wl-lore__p { font-size: 0.98rem; line-height: 1.75; color: #34322e; }
.wl-lore > p:last-child { margin-bottom: 0; }
.wl-lore > p:last-child::after {
  content: ""; display: inline-block; width: 0.6em; height: 1.15em; margin-left: 3px; vertical-align: -0.22em;
  background: var(--sw-ink); animation: sw-caret 1.06s steps(2, jump-none) infinite;
}
@keyframes sw-caret { 50% { opacity: 0; } }

/* gallery: image viewer windows thrown on the desk */
.wl-gallery { gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.wl-shot {
  overflow: visible; border-radius: 0;
  padding: 33px 3px 3px;
  background: var(--sw-face);
  box-shadow: var(--sw-bevel), var(--sw-drop);
  rotate: -1deg;
}
.wl-shot:nth-child(even) { rotate: 1.2deg; }
.wl-shot::before {
  content: ""; position: absolute; top: 3px; left: 3px; right: 3px; height: 27px;
  background: url("../art/ico-picture.svg") 7px 50% / 16px 16px no-repeat, var(--sw-titlebar);
}
.wl-shot::after {
  content: ""; position: absolute; top: 9px; right: 8px; width: 50px; height: 14px;
  background: url("../art/winbtns.svg") 0 0 / 50px 14px no-repeat;
}
.wl-shot img {
  aspect-ratio: 16 / 9;
  border: 2px solid; border-color: var(--sw-lo) var(--sw-hi) var(--sw-hi) var(--sw-lo);
}
.wl-shot:hover img { transform: none; }
.wl-shot__caption {
  top: 3px; left: 3px; right: 64px; bottom: auto;
  display: block; height: 27px; padding: 0 6px 0 30px;
  background: none; backdrop-filter: none; border-radius: 0;
  color: #fff; font: 700 13px/27px var(--v-font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-gallery[data-count="3"] { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 20px; }
.wl-gallery[data-count="3"] .wl-shot:nth-child(1) { grid-column: 1 / span 7; grid-row: 1; rotate: -1.6deg; z-index: 1; }
.wl-gallery[data-count="3"] .wl-shot:nth-child(2) { grid-column: 7 / span 6; grid-row: 1; margin-top: 118px; rotate: 1.9deg; z-index: 2; }
.wl-gallery[data-count="3"] .wl-shot:nth-child(3) { grid-column: 2 / span 6; grid-row: 2; margin-top: -54px; rotate: -0.7deg; z-index: 3; }

/* quotes: every witness gets a message box */
.wl-quotes { gap: 26px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.wl-quote {
  border: 0; border-radius: 0;
  padding: 30px 3px 3px;
  background: var(--sw-face);
  box-shadow: var(--sw-bevel), var(--sw-drop);
  rotate: -1.8deg;
}
.wl-quote:nth-child(3n + 2) { rotate: 1.4deg; margin-top: 54px; }
.wl-quote:nth-child(3n) { rotate: -0.6deg; margin-top: 16px; }
.wl-quote::before {
  content: ""; position: absolute; top: 3px; left: 3px; right: 3px; height: 24px;
  font-size: 0; line-height: 0; color: transparent;
  background: url("../art/ico-chat.svg") 6px 50% / 16px 16px no-repeat, var(--sw-titlebar);
}
.wl-quote::after {
  content: ""; position: absolute; top: 8px; right: 7px; width: 16px; height: 14px;
  background: url("../art/winbtn-x.svg") 0 0 / 16px 14px no-repeat;
}
.wl-quote__text {
  margin: 0; padding: 18px 18px 16px 66px;
  background: url("../art/ico-info.svg") 18px 18px / 34px 34px no-repeat;
  font: 400 1.06rem/1.45 var(--v-font-body); color: var(--sw-ink);
}
.wl-quote__text::after {
  content: "OK"; display: block; width: 80px; margin: 16px 0 0 auto; padding: 5px 0;
  background: var(--sw-face); box-shadow: 0 0 0 1px var(--sw-dk), var(--sw-bevel);
  font-size: 12px; text-align: center;
}
.wl-quote__who {
  position: absolute; top: 3px; left: 28px; right: 28px; height: 24px;
  color: #fff; font: 700 12px/24px var(--v-font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-quote__who::before { content: "Message from "; font-weight: 400; opacity: 0.85; }
.wl-quote__who a { color: #fff; }

/* tweet: a new message */
.wl-sec--tweet .wl-post {
  max-width: none;
  padding: clamp(18px, 2.4vw, 28px);
  background: #fff; border: 0; border-radius: 0; box-shadow: var(--sw-sunk);
}
.wl-post__avatar { border-radius: 0; box-shadow: 0 0 0 1px var(--sw-dk), 3px 3px 0 rgb(0 0 0 / 0.2); }
.wl-post__author { font-weight: 700; }
.wl-post__handle { color: #5b5853; }
.wl-post__brand { color: var(--sw-ink); }
.wl-post__text { font: 400 clamp(1.15rem, 1.9vw, 1.5rem)/1.45 var(--v-font-body); color: var(--sw-ink); }
.wl-post__meta { border-top: 1px dotted #9a968f; color: #5b5853; }
.wl-post__meta:empty { display: none; }
.wl-post__media { border-radius: 0; }
.wl-post--giant .wl-post__text { font-family: var(--v-font-display); font-weight: 400; text-transform: uppercase; }

/* supply: the disk properties pie */
.wl-infographic { gap: clamp(22px, 3vw, 34px); }
.wl-graphic--supply { gap: clamp(22px, 3.4vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.wl-donut { gap: 18px 36px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: center; justify-items: center; }
.wl-donut__chart { width: min(100%, 420px); aspect-ratio: 16 / 10; perspective: 900px; }
.wl-donut__svg {
  position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1;
  translate: 0 -50%;
  transform: rotateX(57deg);
  filter: drop-shadow(0 2px 0 #2a2a2a) drop-shadow(0 2px 0 #2a2a2a) drop-shadow(0 2px 0 #2a2a2a) drop-shadow(0 2px 0 #2a2a2a) drop-shadow(0 2px 0 #2a2a2a) drop-shadow(0 2px 0 #2a2a2a);
}
.wl-donut__ticks { display: none; }
.wl-donut__track { stroke: #ffffff; stroke-width: 56; }
.wl-donut__seg { stroke-width: 56; }
.wl-donut__center { inset: 30% 18%; }
.wl-donut__value {
  padding: 4px 10px;
  background: #fff; box-shadow: var(--sw-sunk);
  font: 400 clamp(1.15rem, 2.2vw, 1.6rem)/1.1 var(--v-font-display); font-synthesis: none; letter-spacing: 0.02em;
}
.wl-donut__label { margin-top: 6px; font: 700 10px/1 var(--v-font-body); letter-spacing: 0.14em; color: var(--sw-ink); }
.wl-legend { width: 100%; gap: 0; padding: 4px 14px; background: #fff; box-shadow: var(--sw-sunk); }
.wl-legend__item { grid-template-columns: 18px 1fr auto; padding: 12px 0; border-bottom: 1px dotted #9a968f; }
.wl-legend__item:last-child { border-bottom: 0; }
.wl-legend__swatch { width: 18px; height: 18px; border-radius: 0; box-shadow: 0 0 0 1px var(--sw-dk), inset -2px -2px 0 rgb(0 0 0 / 0.25), inset 2px 2px 0 rgb(255 255 255 / 0.4); }
.wl-legend__label { font-weight: 700; }
.wl-legend__value { font: 400 1.5rem/1 var(--v-font-display); font-synthesis: none; }
.wl-rings { gap: 18px; }
.wl-ring__track { stroke: #fff; }
.wl-ring__fill { stroke-linecap: butt; }
.wl-ring__value, .wl-stat__value { font-family: var(--v-font-display); font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; }
.wl-ring__label, .wl-stat__label { color: #3d3b38; font-family: var(--v-font-body); font-weight: 700; }
.wl-stats { gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.wl-stat { padding: 16px 18px; background: #fff; box-shadow: var(--sw-sunk); }
.wl-stat__label { font-size: 11px; letter-spacing: 0.12em; }
.wl-stat__value { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.wl-caption { display: flex; align-items: center; gap: 10px; color: #3d3b38; font-size: 13px; }
.wl-caption::before { content: ""; flex: none; width: 20px; height: 20px; background: url("../art/ico-info.svg") center / contain no-repeat; }

/* flow: process boxes */
.wl-node__card { border: 0; border-radius: 0; background: #fff; box-shadow: var(--sw-sunk); }
.wl-node__card .wl-ord { border-radius: 0; background: var(--sw-face); color: var(--sw-ink); box-shadow: var(--sw-bevel); }
.wl-node__title { font: 700 1.15rem/1.2 var(--v-font-body); }
.wl-edge__line, .wl-edge__head { stroke: var(--sw-ink); }

/* timeline: an event log */
.wl-milestones { gap: 0; max-width: none; padding: 6px 18px; background: #fff; box-shadow: var(--sw-sunk); }
.wl-milestones::before { display: none; }
.wl-ms { grid-template-columns: 24px 1fr; gap: 14px; padding: 14px 0; }
.wl-ms + .wl-ms { border-top: 1px dotted #9a968f; }
.wl-ms__dot { background: none; width: 24px; height: 24px; }
.wl-ms__ring { fill: #fff; stroke: var(--sw-ink); stroke-width: 2; }
.wl-ms__core { fill: var(--wl-accent); }
.wl-ms--done .wl-ms__ring { fill: #1f9d48; }
.wl-ms__when { font: 400 11px/1.3 var(--v-font-mono); letter-spacing: 0.04em; color: #5b5853; }
.wl-ms__title { font: 700 1.12rem/1.25 var(--v-font-body); }

/* comparison */
.wl-bar__track { height: 22px; border-radius: 0; background: #fff; box-shadow: var(--sw-sunk); }
.wl-bar__bg { fill: #fff; }
.wl-bar__value { font-family: var(--v-font-display); font-weight: 400; font-synthesis: none; }
.wl-table-wrap { border: 0; border-radius: 0; background: #fff; box-shadow: var(--sw-sunk); }
.wl-table thead th { background: var(--sw-face); box-shadow: var(--sw-bevel); color: var(--sw-ink); font: 700 12px var(--v-font-body); letter-spacing: 0.04em; }
.wl-table th, .wl-table td { border-bottom: 1px dotted #9a968f; }

/* features: a control panel */
.wl-features { gap: 14px; }
.wl-feature { border: 0; border-radius: 0; padding: 20px; background: #fff; box-shadow: var(--sw-sunk); }
.wl-feature:hover { transform: none; }
.wl-feature__icon { border-radius: 0; background: var(--sw-face); box-shadow: var(--sw-bevel); color: var(--sw-ink); }
.wl-feature__title { font: 700 1.1rem/1.2 var(--v-font-body); }
.wl-feature .wl-ord { font: 400 11px var(--v-font-mono); color: #6d6a64; }

/* facts: a system check */
.wl-facts { gap: 0; max-width: none; padding: 6px 0; background: #fff; box-shadow: var(--sw-sunk); }
.wl-fact { grid-template-columns: 24px 1fr; gap: 14px; padding: 13px 20px; border: 0; border-radius: 0; background: none; font-size: 1.04rem; }
.wl-fact + .wl-fact { border-top: 1px dotted #b3afa8; }
.wl-fact__mark { width: 22px; height: 22px; margin-top: 1px; border-radius: 0; background: #fff; box-shadow: var(--sw-sunk); color: #0e7f35; }
.wl-fact__mark .wl-glyph { width: 15px; height: 15px; stroke-width: 3.6; }

/* faq: help topics with tree expanders */
.wl-faq { gap: 0; max-width: none; padding: 6px; background: #fff; box-shadow: var(--sw-sunk); }
.wl-qa { border: 0; border-radius: 0; background: none; }
.wl-qa + .wl-qa { border-top: 1px dotted #b3afa8; }
.wl-qa__q { justify-content: flex-start; gap: 12px; padding: 12px 12px; font-size: 1.04rem; }
.wl-qa__q::before { content: ""; order: 1; flex: none; width: 22px; height: 22px; background: url("../art/ico-question.svg") center / contain no-repeat; }
.wl-qa__q > span:first-child { order: 2; }
.wl-qa__sign { order: 0; width: 13px; height: 13px; background: #fff; border: 1px solid var(--sw-lo); }
.wl-qa__sign::before, .wl-qa__sign::after { left: 2px; right: 2px; height: 1px; margin-top: -0.5px; background: var(--sw-ink); transition: none; }
.wl-qa[open] .wl-qa__q > span:first-child { background: var(--sw-title-a); color: #fff; outline: 1px dotted var(--sw-hazard); padding: 1px 4px; margin: -1px -4px; }
.wl-qa__a { padding: 0 18px 16px 71px; color: #2d2b28; }

/* access: an installer */
.wl-access { max-width: none; gap: 18px; }
.wl-access__net { font: 700 12px/1.2 var(--v-font-body); letter-spacing: 0.1em; color: #3d3b38; }
.wl-ca { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; }
.wl-ca__label { font: 700 13px var(--v-font-body); letter-spacing: 0; text-transform: none; color: var(--sw-ink); }
.wl-ca__label::after { content: ":"; }
.wl-ca__value { padding: 12px 14px; background: #fff; box-shadow: var(--sw-sunk); font-size: clamp(0.8rem, 1.4vw, 1rem); }
.wl-ca .wl-copy {
  position: relative; min-height: 44px; padding: 0 22px;
  border-radius: 0; background: var(--sw-face); color: var(--sw-ink);
  box-shadow: 0 0 0 1px var(--sw-dk), var(--sw-bevel);
  font: 700 14px/1 var(--v-font-body);
}
.wl-ca .wl-copy::after { content: ""; position: absolute; inset: 5px; border: 1px dotted var(--sw-ink); pointer-events: none; }
.wl-ca .wl-copy:active { box-shadow: 0 0 0 1px var(--sw-dk), var(--sw-press); }
.wl-links { gap: 10px; }
.wl-link {
  gap: 9px; padding: 9px 16px 9px 12px;
  border: 0; border-radius: 0;
  background: var(--sw-face); box-shadow: var(--sw-bevel);
  font: 700 14px/1.2 var(--v-font-body); color: var(--sw-ink);
  transition: none;
}
.wl-link:hover { transform: none; border: 0; filter: brightness(1.05); }
.wl-link:active { box-shadow: var(--sw-press); }
.wl-link .wl-glyph { display: none; }
.wl-link::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--sw-ico, url("../art/ico-folder.svg")) center / contain no-repeat; }
.wl-access::after {
  content: ""; display: block; height: 28px;
  background:
    repeating-linear-gradient(90deg, var(--sw-title-b) 0 13px, transparent 13px 16px) 5px 5px / calc(100% - 10px) 18px no-repeat,
    #fff;
  box-shadow: var(--sw-sunk);
}

/* ================================================================ footer: a second taskbar */

.wm-footer {
  margin-top: var(--v-sec-gap);
  background: var(--sw-face);
  box-shadow: inset 0 1px 0 var(--sw-hi), 0 -1px 0 var(--sw-lo), 0 -2px 0 var(--sw-dk);
}
.wm-footer__bars { display: none; }
.wm-footer__inner { padding: 14px var(--v-pad-x) 18px; font-size: 13px; }
.wl-foot__name { font: 700 15px var(--v-font-body); }
.wl-foot__net, .wl-foot__nfa { color: #3d3b38; font-size: 12px; }
.wl-foot .wl-link { padding: 6px 12px 6px 9px; font-size: 12px; }
.wl-foot .wl-link::before { width: 16px; height: 16px; }


/* ================================================================ motion */

.wm-screen { animation: sw-pop 0.5s var(--v-spring) 0.1s both; }
.wm-copy { animation: sw-pop 0.5s var(--v-spring) 0.25s both; }
.wm-dialog--1 { animation: sw-pop 0.4s var(--v-spring) 0.75s both; }
.wm-dialog--2 { animation: sw-pop 0.4s var(--v-spring) 0.9s both; }
.wm-dialog--3 { animation: sw-pop 0.4s var(--v-spring) 1.05s both; }
.wm-trail { animation: sw-pop 0.18s steps(2, jump-none) both; animation-delay: calc(0.6s + var(--k, 0) * 70ms); }
@keyframes sw-pop { from { opacity: 0; scale: 0.55; } }
.wm-headline .wl-w { animation: sw-word 0.55s var(--v-spring) both; animation-delay: calc(0.45s + var(--i, 0) * 85ms); }
@keyframes sw-word { from { opacity: 0; translate: 0 0.35em; scale: 0.4; } }
.wm-crack__lines path { animation: sw-crack 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 1.05s both; }
.wm-crack__shards, .wm-crack__hit { animation: sw-fade 0.2s linear 1.05s both; }
@keyframes sw-crack { from { stroke-dashoffset: 1; } }
@keyframes sw-fade { from { opacity: 0; } }
/* the rain (app.js): slogan dialogs and scene crops falling behind the stage */
.wm-rain__drop {
  position: absolute; top: 0; left: var(--x); width: var(--w);
  padding: 3px; background: var(--sw-face);
  box-shadow: var(--sw-bevel), 4px 5px 0 rgb(0 0 0 / 0.22);
  rotate: var(--spin, 0deg); opacity: 0.94;
  animation: sw-fall var(--d) cubic-bezier(0.4, 0, 0.9, 0.7) var(--delay) infinite;
}
.wm-rain__bar { display: block; height: 15px; background: var(--sw-titlebar); }
.wm-rain__txt { display: block; padding: 9px 10px 10px 34px; background: url("../art/ico-error.svg") 8px 8px / 18px no-repeat; color: var(--sw-ink); font: 700 12px/1.3 var(--v-font-body); }
.wm-rain__drop--pic .wm-rain__bar { background: var(--sw-titlebar-off); }
.wm-rain__img { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: 3px; object-fit: cover; object-position: var(--pos, 50% 50%); }
@keyframes sw-fall { from { translate: 0 -40vh; } to { translate: var(--dx, 0px) 125vh; } }

/* wild: dialogs shake, the tape runs hot */
.wl-motion-wild .wm-dialog--3 { animation: sw-pop 0.4s var(--v-spring) 1.05s both, sw-shake 4.2s ease-in-out 2.6s infinite; }
@keyframes sw-shake { 0%, 88%, 100% { translate: 0 0; } 90% { translate: -7px 0; } 92% { translate: 7px 0; } 94% { translate: -5px 0; } 96% { translate: 4px 0; } 98% { translate: -2px 0; } }
.wl-motion-calm .wm-rain__drop, .wl-motion-float .wm-rain__drop { animation-duration: calc(var(--d) * 1.8); }

/* the cursor drifts in and clicks the default button every few seconds */
.wm-cta .wl-btn--primary::before { animation: sw-cursor 4.8s ease-in-out 1.4s infinite; }
@keyframes sw-cursor {
  0% { translate: 70px 46px; opacity: 0; }
  12% { opacity: 1; }
  38%, 100% { translate: 0 0; }
  44% { scale: 0.86; }
  50% { scale: 1; }
}
.wm-cta .wl-btn--primary { animation: sw-press 4.8s steps(1, end) 1.4s infinite; }
@keyframes sw-press {
  0%, 43%, 51%, 100% { box-shadow: 0 0 0 2px var(--sw-dk), inset -2px -2px 0 rgb(0 0 0 / 0.42), inset 2px 2px 0 rgb(255 255 255 / 0.5); }
  44% { box-shadow: 0 0 0 2px var(--sw-dk), inset 2px 2px 0 rgb(0 0 0 / 0.45), inset -2px -2px 0 rgb(255 255 255 / 0.35); }
}

/* hero motion: the whole window wobbles, not the picture inside it */
.wl-hero-wobble [data-wl="hero-media"] { animation: none; }
.wl-hero-wobble .wm-screen { animation: sw-pop 0.5s var(--v-spring) 0.1s both, sw-wobble 3.4s ease-in-out 1.6s infinite; }
@keyframes sw-wobble { 0%, 100% { rotate: 2.4deg; } 50% { rotate: 0.2deg; } }

/* ================================================================ tablet */

@media (min-width: 861px) and (max-width: 1100px) {
  :root { --wm-stage-cols: 104px minmax(0, 1.1fr) minmax(0, 0.9fr); --wm-stack-margin: 0 0 -8px 0; --wm-stage-gap: 20px 32px; }
  .wm-dialog { width: 270px; }
  .wm-dialog--1 + .wm-dialog, .wm-dialog--2 + .wm-dialog { margin-left: 26px; }
}

/* ================================================================ phone */

@media (max-width: 860px) {
  .wm-copy[data-wm-len] .wm-headline { font-size: clamp(2.5rem, 12.4vw, 4rem); }
  .wm-copy[data-wm-len="s"] .wm-headline { font-size: clamp(2.8rem, 14.5vw, 4.6rem); }
  .wm-copy[data-wm-len="l"] .wm-headline { font-size: clamp(2.1rem, 9.4vw, 3.2rem); }
  .wm-copy[data-wm-len="xl"] .wm-headline { font-size: clamp(1.8rem, 7.8vw, 2.7rem); }
  .wm-bug { right: 8px; bottom: 8px; width: 64px; }
  .wm-bug__img { width: 38px; height: 38px; }
  .wl-flow > .wl-sec:nth-child(n) { --sw-tilt: 0deg; --sw-shift: 0px; }
  .wm-copy, .wm-screen { rotate: 0deg; }
  .wm-alarm { height: 44px; font-size: 20px; }
  .wm-crawl { height: 42px; font-size: 17px; }
  .wm-crawl__label { padding-left: 10px; padding-right: 20px; }
  .wm-crawl__label::after { display: none; }
  .wm-dialog { width: calc(100% - 44px); }
  .wm-dialog + .wm-dialog { margin-top: -14px; margin-left: 22px; }
  .wm-trail { display: none; }
  .wm-headline { font-size: clamp(2.5rem, 12.4vw, 4rem); }
  .wm-copy__icon { width: 44px; }
  .wm-cta { justify-content: stretch; }
  .wm-cta .wl-btn { flex: 1 1 auto; justify-content: center; }
  .wl-gallery[data-count="3"] { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .wl-gallery[data-count="3"] .wl-shot:nth-child(n) { grid-column: auto; grid-row: auto; margin-top: 0; }
  .wl-quote:nth-child(n) { margin-top: 0; }
  .wl-sec--gallery .wl-sec__title, .wl-sec--quotes .wl-sec__title { text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000, 0 -3px 0 #000, 3px 0 0 #000, 0 3px 0 #000, -3px 0 0 #000, 6px 7px 0 #000; }
  .wl-ca { grid-template-columns: minmax(0, 1fr) auto; }
  .wl-qa__a { padding-left: 18px; }
  .wl-sec--lore .wl-sec__title::before { word-spacing: 0; }
  .wl-access::after { display: none; }
}