@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded-variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ===================================================================================
   Tokens. Every colour is light-dark(light, dark): the page follows color-scheme, which the
   theme switch sets (System leaves it to the device). Monday is the default look; each
   [data-day] block below swaps the tokens, and a few rules after it add what tokens cannot.
   =================================================================================== */

:root {
  color-scheme: light dark;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Monday: disco */
  --bg: light-dark(#f6efff, #1a0731);
  --paint:
    radial-gradient(120% 60% at 70% 0%, light-dark(rgba(255, 196, 80, 0.32), rgba(255, 196, 80, 0.2)), transparent 60%),
    linear-gradient(172deg, light-dark(#fcf8ff, #34105c), light-dark(#efe2ff, #150526) 72%);
  --ink: light-dark(#2a0b4a, #fff4dc);
  --muted: light-dark(#55306f, #e8d6f6);
  --accent: light-dark(#8a2bb8, #ffc94a);
  --dl-ink: light-dark(#7a2a9e, #ffc94a);
  --hl-1: light-dark(#5b1a96, #fff3c4);
  --hl-2: light-dark(#9a1f86, #ffc94a);
  --hl-3: light-dark(#b8451f, #ff9a3d);
  --hl-paint: linear-gradient(180deg, var(--hl-1) 8%, var(--hl-2) 56%, var(--hl-3) 96%);
  --hl-ink: transparent;
  --hl-2-ink: transparent;
  --hl-weight: 800;
  --hl-track: -0.025em;
  --hl-shadow: none;
  --hl-filter: drop-shadow(0 0 0.32em light-dark(rgba(255, 180, 60, 0.32), rgba(255, 190, 80, 0.4)));
  --hl-skew: 0deg;
  --cd-ink: light-dark(#4a1679, #ffd66b);
  --cd-shadow: 0 0 0.5em light-dark(rgba(255, 190, 60, 0.35), rgba(255, 200, 90, 0.45));
  --line: light-dark(rgba(122, 42, 158, 0.28), rgba(255, 201, 74, 0.4));
  --seg-on-bg: light-dark(#2a0b4a, #ffc94a);
  --seg-on-ink: light-dark(#fff4dc, #2a0b4a);
  --seg-radius: 999px;
  --focus: light-dark(#a3237a, #ffc94a);
  --m-1: light-dark(#ffffff, #3d1468);
  --m-2: light-dark(#f1e6ff, #210a3b);
  --machine-bg: linear-gradient(170deg, var(--m-1), var(--m-2));
  --machine-ink: var(--ink);
  --machine-muted: light-dark(#6a3b88, #f0d58a);
  --machine-edge: light-dark(rgba(122, 42, 158, 0.3), rgba(255, 201, 74, 0.55));
  --machine-shadow: 0 26px 60px -24px light-dark(rgba(90, 20, 140, 0.45), rgba(0, 0, 0, 0.8)), inset 0 1px 0 light-dark(#fff, rgba(255, 230, 160, 0.25));
  --machine-radius: 26px;
  --reel-bg: light-dark(#fffaf0, #12041f);
  --reel-ink: light-dark(#2a0b4a, #ffe7a0);
  --reel-shade: light-dark(rgba(86, 30, 128, 0.32), rgba(0, 0, 0, 0.72));
  --reel-edge: inset 0 0 0 1.5px light-dark(rgba(176, 120, 20, 0.55), rgba(255, 201, 74, 0.55));
  --reel-radius: 14px;
  --b-1: #ffe9a8;
  --b-2: #ffc94a;
  --b-3: #f0a92a;
  --btn-bg: linear-gradient(180deg, var(--b-1), var(--b-2) 52%, var(--b-3));
  --btn-ink: #2a0b4a;
  --btn-edge: inset 0 0 0 1px rgba(150, 90, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  --btn-shadow: 0 10px 28px -8px light-dark(rgba(220, 150, 20, 0.7), rgba(255, 190, 60, 0.6));
  --btn-radius: 999px;
  --fr-1: light-dark(#ffffff, #5a2596);
  --fr-2: light-dark(#f6ecff, #2a0b4a);
  --frame-bg: linear-gradient(180deg, var(--fr-1), var(--fr-2));
  --frame-ink: light-dark(#2a0b4a, #ffeec0);
  --frame-muted: light-dark(#7a2a9e, #ffc94a);
  --frame-icon: light-dark(#a3237a, #ffc94a);
  --frame-edge: inset 0 0 0 1px light-dark(rgba(122, 42, 158, 0.22), rgba(255, 201, 74, 0.45));
  --frame-radius: 16px;
  --ground-h: 64px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Tuesday: cottagecore */
:root[data-day="tue"] {
  --bg: light-dark(#f4ecdb, #1d2014);
  --paint:
    repeating-linear-gradient(0deg, light-dark(rgba(120, 96, 50, 0.055), rgba(240, 228, 196, 0.04)) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, light-dark(rgba(120, 96, 50, 0.05), rgba(240, 228, 196, 0.035)) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, light-dark(rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.12)) 0 2px, transparent 2px 7px),
    radial-gradient(110% 70% at 20% 0%, light-dark(#fbf6ea, rgba(255, 190, 110, 0.1)), transparent 70%),
    linear-gradient(180deg, light-dark(#f6efe0, #20241a), light-dark(#efe4cc, #191c12));
  --ink: light-dark(#363d1f, #f1e9d2);
  --muted: light-dark(#585c37, #d3caac);
  --accent: light-dark(#94384e, #eba7b7);
  --dl-ink: light-dark(#56652a, #c3d293);
  --hl-paint: none;
  --hl-ink: light-dark(#3a4520, #efe7cd);
  --hl-2-ink: light-dark(#94384e, #eba7b7);
  --hl-weight: 650;
  --hl-track: -0.01em;
  --hl-shadow: 0 1px 0 light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.4));
  --hl-filter: none;
  --cd-ink: light-dark(#3a4520, #efe7cd);
  --cd-shadow: none;
  --line: light-dark(rgba(86, 101, 42, 0.35), rgba(195, 210, 147, 0.35));
  --seg-on-bg: light-dark(#4f5d24, #dfe8b8);
  --seg-on-ink: light-dark(#fbf6e6, #1d2014);
  --focus: light-dark(#94384e, #eba7b7);
  --m-1: light-dark(#fdf9ef, #282c1c);
  --m-2: light-dark(#f8f1e1, #23271a);
  --machine-muted: light-dark(#6a5a2e, #d8c99a);
  --machine-edge: light-dark(rgba(86, 101, 42, 0.32), rgba(220, 210, 170, 0.25));
  --machine-shadow: 0 2px 0 light-dark(rgba(120, 96, 50, 0.12), rgba(0, 0, 0, 0.3)), 0 18px 34px -18px light-dark(rgba(90, 70, 30, 0.45), rgba(0, 0, 0, 0.7));
  --machine-radius: 6px;
  --reel-bg: light-dark(#fffdf7, #191c12);
  --reel-ink: light-dark(#363d1f, #f1e9d2);
  --reel-shade: light-dark(rgba(120, 96, 50, 0.26), rgba(0, 0, 0, 0.6));
  --reel-edge: inset 0 0 0 1.5px light-dark(rgba(86, 101, 42, 0.45), rgba(195, 210, 147, 0.4));
  --reel-radius: 10px;
  --b-1: light-dark(#5b6a2b, #e7dfc0);
  --b-2: light-dark(#4f5d24, #ddd3ae);
  --b-3: light-dark(#465320, #d2c79e);
  --btn-ink: light-dark(#fbf6e6, #262a18);
  --btn-edge: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.15));
  --btn-shadow: 0 3px 0 light-dark(#3a451a, #a99f78);
  --btn-radius: 12px;
  --fr-1: light-dark(#fffdf7, #2a2e1e);
  --fr-2: light-dark(#fffdf7, #2a2e1e);
  --frame-ink: light-dark(#363d1f, #f1e9d2);
  --frame-muted: light-dark(#8a3d50, #eba7b7);
  --frame-icon: light-dark(#56652a, #c3d293);
  --frame-edge: 0 1px 2px light-dark(rgba(90, 70, 30, 0.2), rgba(0, 0, 0, 0.5)), 0 8px 18px -10px light-dark(rgba(90, 70, 30, 0.45), rgba(0, 0, 0, 0.7));
  --frame-radius: 3px;
  --ground-h: 74px;
}

/* Wednesday: vaporwave */
:root[data-day="wed"] {
  --bg: light-dark(#fde8f5, #120726);
  --paint: linear-gradient(180deg, light-dark(#fde9f5, #0c0522) 0%, light-dark(#f5ddff, #26094f) 34%, light-dark(#e0e4ff, #4a1170) 62%, light-dark(#cdf3f8, #7a1d7a) 100%);
  --ink: light-dark(#2b0f57, #fdeaff);
  --muted: light-dark(#4b2a7a, #ecd4fb);
  --accent: light-dark(#a1157a, #7ff0ff);
  --dl-ink: light-dark(#a1157a, #7ff0ff);
  --hl-1: light-dark(#b0157e, #ff71ce);
  --hl-2: light-dark(#6a2bd1, #c98bff);
  --hl-3: light-dark(#0a6a86, #01cdfe);
  --hl-paint: linear-gradient(100deg, var(--hl-1) 10%, var(--hl-2) 50%, var(--hl-3) 90%);
  --hl-ink: transparent;
  --hl-2-ink: transparent;
  --hl-weight: 750;
  --hl-track: 0.01em;
  --hl-filter: drop-shadow(0.06em 0.06em 0 light-dark(rgba(1, 205, 254, 0.55), rgba(255, 64, 200, 0.75)));
  --hl-skew: -7deg;
  --cd-ink: light-dark(#6a2bd1, #ff9be0);
  --cd-shadow: 0.05em 0.05em 0 light-dark(rgba(1, 205, 254, 0.6), rgba(1, 205, 254, 0.6));
  --line: light-dark(rgba(106, 43, 209, 0.35), rgba(127, 240, 255, 0.35));
  --seg-on-bg: light-dark(#2b0f57, #7ff0ff);
  --seg-on-ink: light-dark(#fdeaff, #120726);
  --seg-radius: 3px;
  --focus: light-dark(#a1157a, #7ff0ff);
  --m-1: light-dark(#f7f3ff, #1f0c40);
  --m-2: light-dark(#ece6fa, #170932);
  --machine-muted: light-dark(#5b2fa6, #d6b8ff);
  --machine-edge: light-dark(#2b0f57, #c98bff);
  --machine-shadow: 6px 6px 0 light-dark(rgba(1, 205, 254, 0.55), rgba(255, 64, 200, 0.55)), inset 2px 2px 0 light-dark(#ffffff, rgba(255, 255, 255, 0.12)), inset -2px -2px 0 light-dark(rgba(43, 15, 87, 0.25), rgba(0, 0, 0, 0.45));
  --machine-radius: 4px;
  --reel-bg: light-dark(#ffffff, #0b0420);
  --reel-ink: light-dark(#2b0f57, #8ff3ff);
  --reel-shade: light-dark(rgba(106, 43, 209, 0.24), rgba(0, 0, 0, 0.7));
  --reel-edge: inset 2px 2px 0 light-dark(rgba(43, 15, 87, 0.45), rgba(0, 0, 0, 0.6)), inset -2px -2px 0 light-dark(#ffffff, rgba(201, 139, 255, 0.35));
  --reel-radius: 2px;
  --b-1: #ff71ce;
  --b-2: #b967ff;
  --b-3: #01cdfe;
  --btn-bg: linear-gradient(100deg, var(--b-1), var(--b-2) 50%, var(--b-3));
  --btn-ink: #1c0640;
  --btn-edge: inset 2px 2px 0 rgba(255, 255, 255, 0.55), inset -2px -2px 0 rgba(40, 0, 80, 0.35);
  --btn-shadow: 4px 4px 0 light-dark(#2b0f57, #000);
  --btn-radius: 3px;
  --fr-1: light-dark(#ffffff, #1f0c40);
  --fr-2: light-dark(#f4eeff, #170932);
  --frame-ink: light-dark(#2b0f57, #fdeaff);
  --frame-muted: light-dark(#a1157a, #7ff0ff);
  --frame-icon: light-dark(#6a2bd1, #ff9be0);
  --frame-edge: inset 0 0 0 2px light-dark(#2b0f57, #c98bff), 4px 4px 0 light-dark(rgba(1, 205, 254, 0.5), rgba(255, 64, 200, 0.45));
  --frame-radius: 3px;
  --ground-h: 230px;
}

/* Thursday: Y2K chrome */
:root[data-day="thu"] {
  --bg: light-dark(#eef1f7, #0b0e1c);
  --paint:
    radial-gradient(42% 30% at 12% 10%, light-dark(rgba(255, 170, 225, 0.7), rgba(255, 80, 200, 0.26)), transparent 70%),
    radial-gradient(46% 34% at 92% 30%, light-dark(rgba(160, 222, 255, 0.75), rgba(70, 170, 255, 0.28)), transparent 70%),
    radial-gradient(50% 30% at 24% 70%, light-dark(rgba(205, 188, 255, 0.6), rgba(150, 110, 255, 0.22)), transparent 70%),
    radial-gradient(40% 26% at 85% 92%, light-dark(rgba(255, 196, 236, 0.55), rgba(255, 110, 210, 0.18)), transparent 70%),
    linear-gradient(170deg, light-dark(#f7f9fd, #131838), light-dark(#e1e7f1, #070913));
  --ink: light-dark(#1d2340, #eef2fb);
  --muted: light-dark(#3e4766, #c6cee2);
  --accent: light-dark(#b0177a, #ff8fd3);
  --dl-ink: light-dark(#5a3fbf, #b3bfff);
  --hl-1: light-dark(#3a4566, #ffffff);
  --hl-2: light-dark(#5d6987, #c9d2e3);
  --hl-3: light-dark(#1d2340, #8d9ab6);
  --hl-4: light-dark(#56627f, #eef2f9);
  --hl-paint: linear-gradient(180deg, var(--hl-1) 0%, var(--hl-2) 36%, var(--hl-3) 51%, var(--hl-4) 60%, var(--hl-1) 100%);
  --hl-ink: transparent;
  --hl-2-ink: transparent;
  --hl-weight: 800;
  --hl-track: -0.035em;
  --hl-filter: drop-shadow(0 1.5px 0 light-dark(#ffffff, #3b4466)) drop-shadow(0 2.5px 0 light-dark(#aab4c8, #1d2340)) drop-shadow(0 10px 14px light-dark(rgba(110, 90, 210, 0.28), rgba(150, 120, 255, 0.35)));
  --cd-ink: light-dark(#1d2340, #eef2fb);
  --cd-shadow: 0 1px 0 light-dark(#ffffff, #3b4466);
  --line: light-dark(rgba(29, 35, 64, 0.25), rgba(200, 210, 240, 0.3));
  --seg-on-bg: light-dark(#1d2340, #eef2fb);
  --seg-on-ink: light-dark(#eef2f8, #0b0e1c);
  --focus: light-dark(#b0177a, #ff8fd3);
  --m-1: light-dark(#ffffff, #2a3150);
  --m-2: light-dark(#dbe2ee, #11152b);
  --machine-bg: linear-gradient(180deg, var(--m-1) 0%, light-dark(#eef2f8, #1f2542) 46%, var(--m-2) 54%, light-dark(#eef2f8, #161b34) 100%);
  --machine-muted: light-dark(#4a4f8a, #c4ccf5);
  --machine-edge: light-dark(#9aa7bd, rgba(200, 210, 240, 0.4));
  --machine-shadow: inset 0 2px 0 light-dark(#ffffff, rgba(255, 255, 255, 0.18)), 0 0 0 5px light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)), 0 24px 50px -22px light-dark(rgba(60, 70, 140, 0.5), rgba(0, 0, 0, 0.8));
  --machine-radius: 34px;
  --reel-bg: light-dark(#ffffff, #0c1022);
  --reel-ink: light-dark(#1d2340, #eef2fb);
  --reel-shade: light-dark(rgba(110, 120, 170, 0.32), rgba(0, 0, 0, 0.7));
  --reel-edge: inset 0 0 0 1.5px light-dark(#9aa7bd, rgba(200, 210, 240, 0.4)), inset 0 3px 6px light-dark(rgba(60, 70, 120, 0.18), rgba(0, 0, 0, 0.5));
  --reel-radius: 20px;
  --b-1: #ffffff;
  --b-2: #dfe6f1;
  --b-3: #b9c4d6;
  --btn-bg: linear-gradient(180deg, var(--b-1) 0%, var(--b-2) 46%, var(--b-3) 54%, #eef2f8 100%);
  --btn-ink: #1d2340;
  --btn-edge: inset 0 0 0 1px #6d7a92, inset 0 2px 0 #ffffff;
  --btn-shadow: 0 0 0 4px light-dark(rgba(255, 110, 199, 0.28), rgba(255, 140, 215, 0.3)), 0 10px 20px -8px light-dark(rgba(60, 70, 140, 0.45), rgba(0, 0, 0, 0.6));
  --btn-radius: 999px;
  --fr-1: light-dark(#e6f6ff, #1b2850);
  --fr-2: light-dark(#ffe3f4, #3a1a46);
  --frame-bg: linear-gradient(160deg, var(--fr-1), var(--fr-2));
  --frame-ink: light-dark(#1d2340, #eef2fb);
  --frame-muted: light-dark(#5a3fbf, #b3bfff);
  --frame-icon: light-dark(#b0177a, #ff8fd3);
  --frame-edge: inset 0 0 0 1px light-dark(#9aa7bd, rgba(200, 210, 240, 0.35)), inset 0 2px 0 light-dark(#ffffff, rgba(255, 255, 255, 0.15));
  --frame-radius: 22px;
  --ground-h: 96px;
}

/* Friday: arcade */
:root[data-day="fri"] {
  --bg: light-dark(#f2efe4, #07060d);
  --paint:
    repeating-linear-gradient(0deg, light-dark(rgba(20, 18, 40, 0.06), rgba(61, 255, 122, 0.05)) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, light-dark(rgba(20, 18, 40, 0.06), rgba(61, 255, 122, 0.05)) 0 1px, transparent 1px 8px),
    radial-gradient(120% 70% at 50% 0%, light-dark(#fbf9f2, #1b1033), transparent 70%),
    linear-gradient(180deg, light-dark(#f2efe4, #0b0816), light-dark(#e9e5d6, #050409));
  --ink: light-dark(#13111c, #eafff0);
  --muted: light-dark(#3a374c, #b9f3cb);
  --accent: light-dark(#a3128a, #ff5ce0);
  --dl-ink: light-dark(#a3128a, #ff5ce0);
  --hl-paint: none;
  --hl-ink: light-dark(#0b5e29, #3dff7a);
  --hl-2-ink: light-dark(#a3128a, #ff5ce0);
  --hl-weight: 800;
  --hl-track: 0.01em;
  --hl-shadow: 0.055em 0.055em 0 light-dark(#3dff7a, #6b0a5c), 0 0 0.4em light-dark(rgba(61, 255, 122, 0), rgba(61, 255, 122, 0.35));
  --hl-filter: none;
  --cd-ink: light-dark(#0b5e29, #3dff7a);
  --cd-shadow: 0 0 0.45em light-dark(rgba(61, 255, 122, 0), rgba(61, 255, 122, 0.55));
  --line: light-dark(#13111c, #3dff7a);
  --seg-on-bg: light-dark(#13111c, #3dff7a);
  --seg-on-ink: light-dark(#3dff7a, #07060d);
  --seg-radius: 0;
  --focus: light-dark(#a3128a, #ff5ce0);
  --m-1: #0f0c1c;
  --m-2: #0a0814;
  --machine-ink: #eafff0;
  --machine-muted: #ff8ae9;
  --machine-edge: #ff2bd6;
  --machine-shadow: 0 0 0 3px #ff2bd6, 0 0 0 6px light-dark(#13111c, #07060d), 0 0 34px light-dark(rgba(255, 43, 214, 0.25), rgba(255, 43, 214, 0.4));
  --machine-radius: 0;
  --reel-bg: #000000;
  --reel-ink: #3dff7a;
  --reel-shade: rgba(0, 0, 0, 0.75);
  --reel-edge: inset 0 0 0 2px #2a2440, inset 0 0 18px rgba(61, 255, 122, 0.18);
  --reel-radius: 0;
  --b-1: #ff5ce0;
  --b-2: #ff2bd6;
  --b-3: #e01dbb;
  --btn-ink: #12001a;
  --btn-edge: inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.4);
  --btn-shadow: 0 6px 0 #7a0a66;
  --btn-radius: 0;
  --fr-1: #0f0c1c;
  --fr-2: #0a0814;
  --frame-ink: #eafff0;
  --frame-muted: #ff8ae9;
  --frame-icon: #3dff7a;
  --frame-edge: 0 0 0 2px #3dff7a, 0 0 18px rgba(61, 255, 122, 0.25);
  --frame-radius: 0;
  --ground-h: 92px;
}

/* Saturday: 90s Memphis */
:root[data-day="sat"] {
  --mx-ink: light-dark(#161616, #fff3d6);
  --bg: light-dark(#fff6df, #1a1633);
  --paint:
    radial-gradient(circle, light-dark(rgba(22, 22, 22, 0.07), rgba(255, 243, 214, 0.06)) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, light-dark(#fff8e6, #1d1838), light-dark(#fff1d0, #161229));
  --ink: light-dark(#161616, #fff3d6);
  --muted: light-dark(#3a3a3a, #e6dbf2);
  --accent: light-dark(#c2185b, #ff8ab2);
  --dl-ink: light-dark(#0b6f6a, #4fe0d6);
  --hl-paint: none;
  --hl-ink: light-dark(#161616, #fff3d6);
  --hl-2-ink: light-dark(#161616, #fff3d6);
  --hl-weight: 800;
  --hl-track: -0.015em;
  --hl-shadow: 0.045em 0.045em 0 #19c2b8, 0.09em 0.09em 0 #ff4f8b;
  --hl-filter: none;
  --cd-ink: light-dark(#161616, #fff3d6);
  --cd-shadow: 0.06em 0.06em 0 #ffd23f;
  --line: var(--mx-ink);
  --seg-on-bg: light-dark(#161616, #ffd23f);
  --seg-on-ink: light-dark(#ffd23f, #161616);
  --focus: light-dark(#c2185b, #ffd23f);
  --m-1: light-dark(#ffffff, #262047);
  --m-2: light-dark(#ffffff, #262047);
  --machine-muted: light-dark(#3a3a3a, #e6dbf2);
  --machine-edge: var(--mx-ink);
  --machine-shadow: 0 0 0 3px var(--mx-ink), 9px 9px 0 light-dark(#161616, #ff4f8b);
  --machine-radius: 20px;
  --reel-bg: #ffd23f;
  --reel-ink: #161616;
  --reel-shade: rgba(120, 70, 0, 0.3);
  --reel-edge: inset 0 0 0 3px #161616;
  --reel-radius: 12px;
  --b-1: #19c2b8;
  --b-2: #19c2b8;
  --b-3: #19c2b8;
  --btn-ink: #161616;
  --btn-edge: inset 0 0 0 3px #161616;
  --btn-shadow: 5px 5px 0 light-dark(#161616, #fff3d6);
  --btn-radius: 14px;
  --fr-1: #ffffff;
  --fr-2: #ffffff;
  --frame-ink: #161616;
  --frame-muted: #3a3a3a;
  --frame-icon: #161616;
  --frame-edge: inset 0 0 0 3px #161616, 5px 5px 0 light-dark(#161616, #fff3d6);
  --frame-radius: 12px;
  --ground-h: 110px;
}

/* Sunday: touch grass */
:root[data-day="sun"] {
  --bg: light-dark(#eef3e8, #0d1712);
  --paint:
    radial-gradient(60% 40% at 80% 0%, light-dark(rgba(255, 236, 170, 0.55), rgba(220, 235, 200, 0.07)), transparent 70%),
    linear-gradient(180deg, light-dark(#f3f7ee, #0a1410) 0%, light-dark(#e8efdf, #0f1d16) 60%, light-dark(#dbe7cd, #13261b) 100%);
  --ink: light-dark(#24361f, #e6f0dc);
  --muted: light-dark(#475a40, #bccbb0);
  --accent: light-dark(#2f6b2a, #a6d991);
  --dl-ink: light-dark(#3a6630, #a6d991);
  --hl-paint: none;
  --hl-ink: light-dark(#2a4625, #dcebd0);
  --hl-2-ink: light-dark(#33692b, #a6d991);
  --hl-weight: 560;
  --hl-track: 0;
  --hl-shadow: none;
  --hl-filter: none;
  --cd-ink: light-dark(#2a4625, #dcebd0);
  --cd-shadow: none;
  --line: light-dark(rgba(47, 107, 42, 0.3), rgba(166, 217, 145, 0.3));
  --seg-on-bg: light-dark(#2a4625, #dcebd0);
  --seg-on-ink: light-dark(#f3f7ee, #0d1712);
  --focus: light-dark(#2f6b2a, #a6d991);
  --m-1: light-dark(#f9fbf5, #13231a);
  --m-2: light-dark(#f4f8ee, #112019);
  --machine-edge: light-dark(rgba(47, 107, 42, 0.22), rgba(166, 217, 145, 0.2));
  --machine-shadow: 0 20px 40px -26px light-dark(rgba(40, 80, 30, 0.45), rgba(0, 0, 0, 0.7));
  --machine-radius: 30px;
  --ground-h: 120px;
}

/* ===================================================================================
   Page
   =================================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  --sig-x: calc(50% - 42px);
  --sig-top: 4px;
  --sig-w: 70px;
  --sig-h: 66px;
}

.wrap {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}

.deco {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--paint);
}

.deco svg,
.sig svg,
.ground svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pin {
  --gut: calc((100% - min(100% - 40px, 1180px)) / 2);
  --sz: min(var(--s), calc(var(--gut) - 4px));
  position: absolute;
  top: var(--y);
  width: var(--sz);
  height: var(--sz);
  margin-left: calc(var(--sz) / -2);
}

.pin.l {
  left: calc(var(--gut) * var(--m));
}

.pin.r {
  left: calc(100% - var(--gut) * var(--m));
}

.pin.g {
  --sz: var(--s);
  left: var(--x);
}

.machine-art {
  position: absolute;
  right: -16px;
  top: -26px;
  width: 64px;
  height: 56px;
  pointer-events: none;
  z-index: 2;
}

.machine-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

:root[data-day="tue"] .machine-art {
  right: -22px;
  top: -50px;
  width: 84px;
  height: 74px;
}

:root[data-day="fri"] .machine-art {
  right: -12px;
  top: -14px;
  width: 26px;
  height: 26px;
}

.pin.wide {
  display: none;
}

.sig {
  position: absolute;
  z-index: -1;
  top: var(--sig-top);
  left: var(--sig-x);
  width: var(--sig-w);
  height: var(--sig-h);
  transform: translateX(-50%);
  pointer-events: none;
}

.ground {
  position: relative;
  z-index: -1;
  height: var(--ground-h);
  margin-top: -8px;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- top bar ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
}

.wordmark {
  color: var(--ink);
  text-decoration: none;
  font: 800 18px/1 var(--display);
  letter-spacing: -0.02em;
  padding: 6px 0;
}

.theme {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: var(--seg-radius);
  min-width: 0;
}

.theme label {
  position: relative;
  cursor: pointer;
}

.theme span {
  display: block;
  padding: 7px 9px;
  border-radius: var(--seg-radius);
  font: 650 12px/1 var(--text);
  letter-spacing: 0.02em;
  color: var(--muted);
}

.theme input:checked + span {
  background: var(--seg-on-bg);
  color: var(--seg-on-ink);
}

.theme input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- hero ---------- */

.hero {
  padding-top: 14px;
}

.dayline {
  margin: 0 0 12px;
  font: 700 12px/1.3 var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dl-ink);
}

.headline {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--hl-weight);
  font-size: clamp(36px, 10.2vw, 86px);
  line-height: 1.04;
  letter-spacing: var(--hl-track);
  color: var(--hl-ink);
  text-shadow: var(--hl-shadow);
  filter: var(--hl-filter);
}

.headline span {
  display: block;
  width: fit-content;
  padding-right: 0.08em;
  background-image: var(--hl-paint);
  -webkit-background-clip: text;
  background-clip: text;
  transform: skewX(var(--hl-skew));
  transform-origin: 0 100%;
}

.headline .hl-2 {
  color: var(--hl-2-ink, var(--hl-ink));
}

.lede {
  margin: 14px 0 0;
  max-width: 30em;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
}

.clock {
  margin-top: 18px;
}

.countdown {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cd-label,
.cd-expired {
  font: 700 11.5px/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.cd-expired {
  margin: 0;
  font-size: 14px;
  min-height: 52px;
  display: flex;
  align-items: center;
  color: var(--accent);
}

.cd-time {
  display: flex;
  align-items: baseline;
  font: 750 34px/1 var(--display);
  color: var(--cd-ink);
  text-shadow: var(--cd-shadow);
}

.cd-d {
  display: inline-block;
  width: 0.84em;
  text-align: center;
}

.cd-c {
  display: inline-block;
  width: 0.42em;
  text-align: center;
  transform: translateY(-0.06em);
}

.peek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 14px;
  min-height: 30px;
}

.dots {
  display: flex;
  gap: 2px;
  margin-left: -6px;
}

.dot {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent);
}

.dot[data-day="mon"]::before { background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffc94a 45%, #5a1a8a 46%, #2a0b4a); }
.dot[data-day="tue"]::before { background: radial-gradient(circle at 50% 50%, #e3a3b0 0 30%, #f4ecdb 32% 58%, #7d8f4e 60%); }
.dot[data-day="wed"]::before { background: linear-gradient(180deg, #ff71ce, #b967ff 50%, #01cdfe); }
.dot[data-day="thu"]::before { background: linear-gradient(180deg, #ffffff, #b9c4d6 48%, #5d6987 52%, #e9eef6); }
.dot[data-day="fri"]::before { background: conic-gradient(#3dff7a 0 25%, #07060d 0 50%, #ff2bd6 0 75%, #07060d 0); border-radius: 1px; }
.dot[data-day="sat"]::before { background: conic-gradient(#19c2b8 0 33%, #ff4f8b 0 66%, #ffd23f 0); }
.dot[data-day="sun"]::before { background: linear-gradient(180deg, #cfe5b8, #6f9f4f); }

.dot.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ink);
}

.dot[aria-pressed="true"]::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink);
}

.peek-status {
  font-size: 14px;
  color: var(--muted);
}

.peek-day {
  color: var(--ink);
}

.peek-back {
  margin-left: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* ---------- the slot machine ---------- */

.play {
  margin-top: 22px;
}

.machine {
  position: relative;
  padding: 14px 14px 16px;
  color: var(--machine-ink, var(--ink));
  background: var(--machine-bg);
  border: 1.5px solid var(--machine-edge);
  border-radius: var(--machine-radius);
  box-shadow: var(--machine-shadow);
}

.reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  --item-h: 54px;
}

.reel-label {
  display: block;
  margin-bottom: 6px;
  text-align: center;
  font: 700 10.5px/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--machine-muted);
}

.reel-window {
  position: relative;
  height: calc(var(--item-h) * 1.86);
  overflow: hidden;
  background: var(--reel-bg);
  border-radius: var(--reel-radius);
  box-shadow: var(--reel-edge);
}

.reel-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--reel-shade), transparent 31%, transparent 69%, var(--reel-shade));
}

.reel-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1.5 * var(--item-h));
  will-change: transform;
}

.reel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--item-h);
  padding: 0 6px;
  text-align: center;
  font: 700 13px/1.16 var(--text);
  color: var(--reel-ink);
  overflow-wrap: break-word;
}

.reel.is-blur .reel-strip {
  filter: url(#vblur);
}

/* the payline: two small markers at the centre row */
.reels::before,
.reels::after {
  content: "";
  position: absolute;
  top: calc(16.5px + var(--item-h) * 0.93);
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  transform: translateY(-50%);
  z-index: 1;
}

.reels::before {
  left: -14px;
  border-left: 8px solid var(--accent);
}

.reels::after {
  right: -14px;
  border-right: 8px solid var(--accent);
}

.spin {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 15px 18px 14px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--btn-edge), var(--btn-shadow);
  font: 800 15.5px/1.1 var(--display);
  letter-spacing: 0.01em;
  cursor: pointer;
}

.spin:active,
.spin[aria-busy="true"] {
  transform: translateY(2px);
}

.lever {
  display: none;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 168px;
  padding: 10px 9px 12px;
  background: var(--frame-bg);
  color: var(--frame-ink);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-edge);
}

.frame-no {
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frame-muted);
}

.frame-icon {
  width: 38px;
  height: 38px;
  margin: 2px auto;
  color: var(--frame-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.frame-text {
  font: 650 12.5px/1.32 var(--text);
}

.soon {
  margin: 16px 0 0;
  text-align: center;
  font: 700 11.5px/1.45 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Sunday's day off ---------- */

.sunday {
  display: none;
  margin-top: 26px;
  padding: 26px 24px 28px;
  text-align: center;
  background: var(--machine-bg);
  border: 1.5px solid var(--machine-edge);
  border-radius: var(--machine-radius);
  box-shadow: var(--machine-shadow);
}

:root[data-day="sun"] .play {
  display: none;
}

:root[data-day="sun"] .sunday {
  display: block;
}

.sunday-art {
  width: 120px;
  height: 60px;
  margin: 0 auto 10px;
  display: block;
}

.sunday-art .g1 { fill: light-dark(#7aa95a, #3f6e3a); }
.sunday-art .g2 { fill: light-dark(#4f8040, #5d8c4c); }
.sunday-art .g3 { fill: light-dark(#9cc27a, #2d5634); }
.sunday-art .fl { fill: light-dark(#ffffff, #e9f0dd); }
.sunday-art .flc { fill: #f0c94a; }

.sunday h2 {
  margin: 0;
  font: 560 26px/1.15 var(--display);
  color: var(--hl-ink);
}

.sunday p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 17px;
}

/* ---------- Daftik, footer ---------- */

.daftik {
  margin: 44px auto 0;
  max-width: 34em;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.daftik a {
  font-weight: 700;
}

.foot {
  margin-top: auto;
  padding: 30px 0 24px;
}

.foot-line {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- 404 ---------- */

.nf {
  padding-top: 14px;
  padding-bottom: 40px;
}

.nf .headline {
  font-size: clamp(34px, 9.6vw, 84px);
  max-width: 11em;
}

.nf .lede {
  margin-top: 18px;
}

.nf-back {
  display: inline-block;
  width: auto;
  margin-top: 26px;
  padding-inline: 26px;
  text-decoration: none;
}

/* ---------- the midnight moment ---------- */

.is-expiring .main {
  filter: grayscale(1);
  opacity: 0.55;
}

/* ===================================================================================
   Desktop
   =================================================================================== */

@media (min-width: 900px) {
  .page {
    --sig-x: calc(50% + min(590px, 50vw - 20px) - 250px);
    --sig-top: 64px;
    --sig-w: 260px;
    --sig-h: 190px;
  }

  .pin.wide {
    display: block;
  }

  .bar {
    padding-block: 22px;
  }

  .wordmark {
    font-size: 21px;
  }

  .main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    column-gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }

  .hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 48px;
  }

  .play,
  .sunday {
    grid-column: 2;
    grid-row: 1;
    margin-top: 200px;
  }

  .daftik {
    grid-column: 1 / -1;
    margin-top: 52px;
  }

  .dayline {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .lede {
    font-size: 19px;
    margin-top: 22px;
  }

  .clock {
    margin-top: 30px;
  }

  .cd-time {
    font-size: 46px;
  }

  .cd-label {
    font-size: 12.5px;
  }

  .machine {
    padding: 20px 22px 22px;
  }

  .reels {
    gap: 12px;
    --item-h: 58px;
  }

  .reel-item {
    font-size: 15px;
    padding: 0 10px;
  }

  .reels::before {
    left: -21px;
  }

  .reels::after {
    right: -21px;
  }

  .spin {
    margin-top: 18px;
    font-size: 17px;
    padding-block: 18px 17px;
  }

  .lever {
    display: block;
    position: absolute;
    right: -30px;
    top: 34px;
    width: 18px;
    height: 120px;
  }

  .lever::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50px;
    width: 14px;
    height: 34px;
    border-radius: 0 6px 6px 0;
    background: var(--machine-bg);
    box-shadow: inset 0 0 0 1.5px var(--machine-edge);
  }

  .lever-arm {
    position: absolute;
    left: 3px;
    top: 0;
    width: 8px;
    height: 68px;
    border-radius: 4px;
    background: linear-gradient(90deg, #8d97ac, #f2f5fa 45%, #7a8499);
    transform-origin: 50% 100%;
  }

  .lever-arm::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, var(--accent) 45%, color-mix(in srgb, var(--accent) 60%, #000));
  }

  .is-pulled .lever-arm {
    transform: scaleY(-0.85);
  }

  .frame {
    min-height: 196px;
    padding: 14px 13px 16px;
    gap: 10px;
  }

  .frame-icon {
    width: 48px;
    height: 48px;
  }

  .frame-text {
    font-size: 14px;
  }

  .sunday {
    padding: 40px 34px;
  }

  .sunday h2 {
    font-size: 32px;
  }
}

/* ===================================================================================
   Each day's decoration
   =================================================================================== */

/* ---------- Monday: mirror ball, beams, spots, glints, dance floor ---------- */

:root:not([data-day]) .page,
:root[data-day="mon"] .page {
  --sig-top: 0px;
  --sig-h: 76px;
  --sig-w: 64px;
}

@media (min-width: 900px) {
  :root:not([data-day]) .page,
  :root[data-day="mon"] .page {
    --sig-top: 0px;
    --sig-h: 250px;
    --sig-w: 210px;
  }
}

.ball .ft0 { fill: #f7f3ff; }
.ball .ft1 { fill: #dcd5ee; }
.ball .ft2 { fill: #b6abd2; }
.ball .ft3 { fill: #8a7eb2; }
.ball .ft4 { fill: #ffd977; }
.ball .ft5 { fill: #ff9ad5; }
.ball .ball-base { fill: #4b3a6e; }
.ball .ball-rim { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.ball .ball-string { stroke: light-dark(#7a6a92, #c9b8e8); stroke-width: 2; }
.ball .ball-cap { fill: light-dark(#7a6a92, #c9b8e8); }
.ball .ball-sparkle { fill: #ffffff; }
.ball .ball-glow-in { stop-color: #ffc94a; stop-opacity: 0.35; }
.ball .ball-glow-out { stop-color: #ffc94a; stop-opacity: 0; }

.beams {
  position: absolute;
  left: var(--sig-x);
  top: calc(var(--sig-top) + var(--sig-h) * 0.62);
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  background: repeating-conic-gradient(from 0deg, light-dark(rgba(190, 120, 0, 0.07), rgba(255, 214, 120, 0.075)) 0deg 2.5deg, transparent 2.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.5) 14%, transparent 34%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.5) 14%, transparent 34%);
}

.spots {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 4.5px 2.8px at 23px 17px, light-dark(rgba(200, 130, 0, 0.28), rgba(255, 224, 150, 0.34)) 40%, transparent 100%),
    radial-gradient(ellipse 3.5px 2.2px at 71px 52px, light-dark(rgba(190, 40, 140, 0.2), rgba(255, 150, 225, 0.28)) 40%, transparent 100%),
    radial-gradient(ellipse 7px 4px at 140px 26px, light-dark(rgba(200, 130, 0, 0.16), rgba(255, 224, 150, 0.2)) 40%, transparent 100%),
    radial-gradient(ellipse 3px 2px at 40px 120px, light-dark(rgba(110, 70, 220, 0.2), rgba(190, 170, 255, 0.3)) 40%, transparent 100%);
  background-size: 131px 89px, 197px 143px, 263px 181px, 157px 211px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 70%, #000);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 70%, #000);
}

.glint {
  fill: light-dark(#d39a1a, #ffd66b);
}

.dancefloor {
  position: absolute;
  inset: 0;
  perspective: 260px;
  perspective-origin: 50% 0;
}

.tiles {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  transform: rotateX(58deg);
  transform-origin: 50% 100%;
}

.tile {
  background: light-dark(rgba(122, 42, 158, 0.14), rgba(255, 255, 255, 0.05));
  border-radius: 2px;
}

.tile.t0 { background: light-dark(rgba(255, 190, 60, 0.5), rgba(255, 201, 74, 0.45)); }
.tile.t1 { background: light-dark(rgba(220, 70, 170, 0.32), rgba(255, 110, 210, 0.32)); }
.tile.t3 { background: light-dark(rgba(110, 70, 220, 0.3), rgba(150, 110, 255, 0.35)); }

/* ---------- Tuesday: pressed flowers, linen, petals, a hedge of sprigs ---------- */

:root[data-day="tue"] .page {
  --sig-w: 86px;
  --sig-h: 66px;
}

@media (min-width: 900px) {
  :root[data-day="tue"] .page {
    --sig-w: 270px;
    --sig-h: 200px;
    --sig-top: 54px;
  }
}

.bouquet {
  filter: drop-shadow(0 1px 1px light-dark(rgba(90, 70, 30, 0.22), rgba(0, 0, 0, 0.45)));
}

.leaf { fill: light-dark(#93a463, #7e8f55); stroke: light-dark(#6f7d45, #5f6d3c); stroke-width: 0.8; }
.fern { fill: light-dark(#8a9c5c, #6f8250); }
.vein { stroke: light-dark(rgba(80, 90, 40, 0.45), rgba(30, 40, 20, 0.5)); stroke-width: 0.7; fill: none; }
.stem { stroke: light-dark(#7a8550, #8f9a64); stroke-width: 2; fill: none; stroke-linecap: round; }
.dz-p { fill: light-dark(#fffaf0, #ebe4d0); stroke: light-dark(#d5caac, #b3a98c); stroke-width: 0.8; }
.dz-c { fill: #e2ae3c; }
.dz-d { fill: #f3d47e; }
.fm-p { fill: light-dark(#8fb3d9, #87a6c9); }
.fm-r { fill: light-dark(#dc9fad, #c98e9c); }
.fm-c { fill: #f2d36b; }
.lav { fill: light-dark(#9d89c6, #9483bd); }
.tape { fill: light-dark(rgba(220, 150, 160, 0.6), rgba(200, 130, 145, 0.5)); }
.tape-line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; stroke-dasharray: 3 3; }
.petal-r { fill: light-dark(#e3a3b0, #c98e9c); }

.petal {
  opacity: 0.85;
}

.sprig-corner {
  filter: drop-shadow(0 1px 1px light-dark(rgba(90, 70, 30, 0.25), rgba(0, 0, 0, 0.5)));
}

.hedge .sprig {
  position: absolute;
  left: var(--x);
  bottom: -4px;
  width: var(--s);
  height: calc(var(--s) * 1.16);
  margin-left: calc(var(--s) / -2);
}

/* the card gets a gingham band and a stitched edge */
:root[data-day="tue"] .machine::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(90deg, light-dark(rgba(176, 72, 96, 0.45), rgba(235, 167, 183, 0.4)) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, light-dark(rgba(176, 72, 96, 0.45), rgba(235, 167, 183, 0.4)) 0 3px, transparent 3px 6px),
    light-dark(#fbeef0, #3a2a2e);
}

:root[data-day="tue"] .machine {
  padding-top: 22px;
  outline: 1.5px dashed light-dark(rgba(86, 101, 42, 0.4), rgba(195, 210, 147, 0.3));
  outline-offset: -7px;
}

:root[data-day="tue"] .spin {
  outline: 1.5px dashed light-dark(rgba(251, 246, 230, 0.75), rgba(38, 42, 24, 0.5));
  outline-offset: -6px;
}

:root[data-day="tue"] .spin:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

:root[data-day="tue"] .frame:nth-child(1) { transform: rotate(-1.6deg); }
:root[data-day="tue"] .frame:nth-child(2) { transform: rotate(1.1deg); }
:root[data-day="tue"] .frame:nth-child(3) { transform: rotate(-0.7deg); }

:root[data-day="tue"] .frame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 46px;
  height: 15px;
  margin-left: -23px;
  background: light-dark(rgba(220, 150, 160, 0.6), rgba(200, 130, 145, 0.5));
  transform: rotate(-4deg);
}

:root[data-day="tue"] .frame:nth-child(2)::before {
  background: light-dark(rgba(143, 179, 217, 0.6), rgba(135, 166, 201, 0.45));
  transform: rotate(3deg);
}

/* ---------- Wednesday: a striped sun, wire mountains, a moving grid ---------- */

:root[data-day="wed"] .page {
  --sig-w: 80px;
  --sig-h: 66px;
}

@media (min-width: 900px) {
  :root[data-day="wed"] .page {
    --sig-w: 330px;
    --sig-h: 236px;
    --sig-top: 30px;
  }
}

.sun .sun-a { stop-color: light-dark(#ffd36e, #ffe66d); }
.sun .sun-b { stop-color: light-dark(#ff8ccb, #ff6ec7); }
.sun .sun-c { stop-color: light-dark(#c79bff, #b967ff); }
.sun .glow-in { stop-color: light-dark(#ff8ccd, #ff5ac0); stop-opacity: 0.35; }
.sun .glow-out { stop-color: light-dark(#ff8ccd, #ff5ac0); stop-opacity: 0; }
.sun .ridge-a { stop-color: light-dark(#cdb5ff, #3a0f6e); }
.sun .ridge-b { stop-color: light-dark(#f3e9ff, #14062c); }
.sun .ridge-line { fill: none; stroke: light-dark(#a35ad6, #01cdfe); stroke-width: 1.5; stroke-linejoin: round; }
.sun .ridge-line.faint { stroke-width: 0.8; opacity: 0.55; }
.star { fill: light-dark(#e36fb8, #ffffff); }

.horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, light-dark(#ff71ce, #ff71ce), light-dark(#01cdfe, #01cdfe), transparent);
  box-shadow: 0 0 22px 6px light-dark(rgba(255, 113, 206, 0.35), rgba(255, 64, 200, 0.5));
  z-index: 1;
}

.floor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 220px;
  perspective-origin: 50% 0;
  background: linear-gradient(180deg, light-dark(#f1e3ff, #2a0b4f), light-dark(#e3d3ff, #12052a) 60%);
}

.grid {
  position: absolute;
  left: -60%;
  right: -60%;
  top: 0;
  height: 420%;
  transform: rotateX(70deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(light-dark(rgba(176, 106, 217, 0.75), rgba(255, 80, 214, 0.8)) 2px, transparent 2px),
    linear-gradient(90deg, light-dark(rgba(176, 106, 217, 0.75), rgba(1, 205, 254, 0.7)) 2px, transparent 2px);
  background-size: 54px 54px;
  background-position: 50% 0;
}

:root[data-day="wed"] .foot-line {
  color: var(--ink);
}

/* the machine is a little window from 1995, with a title bar */
:root[data-day="wed"] .machine {
  padding-top: 40px;
}

:root[data-day="wed"] .machine::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 22px;
  background: linear-gradient(90deg, #ff71ce, #b967ff 55%, #01cdfe);
}

:root[data-day="wed"] .machine::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 9px;
  width: 12px;
  height: 12px;
  background: light-dark(#f7f3ff, #1f0c40);
  box-shadow: -16px 0 0 light-dark(#f7f3ff, #1f0c40), -32px 0 0 light-dark(#f7f3ff, #1f0c40), inset 0 0 0 1.5px light-dark(#2b0f57, #c98bff);
}

:root[data-day="wed"] .frame {
  padding-top: 24px;
}

:root[data-day="wed"] .frame::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: 12px;
  background: linear-gradient(90deg, #ff71ce, #01cdfe);
}

/* ---------- Thursday: chrome star, sparkles, bubbles ---------- */

:root[data-day="thu"] .page {
  --sig-w: 78px;
  --sig-h: 64px;
}

@media (min-width: 900px) {
  :root[data-day="thu"] .page {
    --sig-w: 270px;
    --sig-h: 210px;
    --sig-top: 44px;
  }
}

.chrome-star { fill: url(#thu-chrome); }
.chrome-edge { fill: none; stroke: light-dark(#6d7a92, #c9d2e3); stroke-width: 1.4; }
.chrome { filter: drop-shadow(0 6px 10px light-dark(rgba(90, 100, 160, 0.35), rgba(150, 120, 255, 0.4))); }
.spark-p { fill: light-dark(#ff4fb8, #ff8fd3); }
.spark-b { fill: light-dark(#3aa0ff, #8fd0ff); }
.bub-a { stop-color: light-dark(#ffd6f2, #ff9be0); stop-opacity: 0.6; }
.bub-b { stop-color: light-dark(#c9f1ff, #7fd0ff); stop-opacity: 0.4; }
.bub-c { stop-color: light-dark(#b8a6ff, #8f7bff); stop-opacity: 0.75; }
.bub-rim { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.8; }

/* a holographic rim behind the card and the button */
:root[data-day="thu"] .machine::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: calc(var(--machine-radius) + 4px);
  background: conic-gradient(from 200deg, #ffb8e8, #b8e4ff, #d9c8ff, #fff2b8, #b8ffe8, #ffb8e8);
}

:root[data-day="thu"] .spin {
  border: 2.5px solid transparent;
  background:
    var(--btn-bg) padding-box,
    conic-gradient(from 20deg, #ff8fd3, #8fd0ff, #c3a8ff, #ffe68f, #8fffd8, #ff8fd3) border-box;
}

.foam .pin {
  top: auto;
  bottom: calc(var(--y) - 20px);
}

/* ---------- Friday: pixel critters, a scanline, bricks ---------- */

:root[data-day="fri"] .page {
  --sig-w: 84px;
  --sig-h: 54px;
  --sig-top: 10px;
}

@media (min-width: 900px) {
  :root[data-day="fri"] .page {
    --sig-w: 280px;
    --sig-h: 168px;
    --sig-top: 64px;
  }
}

:root[data-day="fri"] svg {
  shape-rendering: crispEdges;
}

.px-a { fill: light-dark(#13a84a, #3dff7a); }
.px-w { fill: #ffffff; }
.px-k { fill: #13111c; }
.px-m { fill: #ff2bd6; }
.px-h { fill: light-dark(#e0189f, #ff2bd6); }
.px-y { fill: #ffd23f; }
.px-o { fill: #d98a00; }
.px-s { fill: light-dark(#c218a8, #ff5ce0); }
.px-c { fill: light-dark(#0aa6c9, #3de7ff); }

.scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, light-dark(rgba(255, 43, 214, 0.07), rgba(61, 255, 122, 0.08)), transparent) no-repeat;
  background-size: 100% 160px;
  background-position: 0 -160px;
}

.bricks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background:
    linear-gradient(180deg, light-dark(#13a84a, #3dff7a) 0 6px, light-dark(#0b5e29, #13a84a) 6px 9px, transparent 9px),
    repeating-linear-gradient(90deg, light-dark(#13111c, #07060d) 0 3px, transparent 3px 36px),
    repeating-linear-gradient(0deg, light-dark(#13111c, #07060d) 0 3px, transparent 3px 17px),
    light-dark(#b0129f, #7a0a66);
}

.walker {
  position: absolute;
  left: 0;
  bottom: 44px;
  width: 24px;
  height: 32px;
}

:root[data-day="fri"] .ground .pin {
  top: 8px;
}

/* the machine is an arcade screen: scanlines and stepped corners */
:root[data-day="fri"] .reel-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}

:root[data-day="fri"] .reel-item {
  font: 700 12px/1.25 var(--mono);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(61, 255, 122, 0.55);
}

@media (min-width: 900px) {
  :root[data-day="fri"] .reel-item {
    font-size: 13.5px;
  }
}

:root[data-day="fri"] .spin {
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  box-shadow: var(--btn-edge);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

:root[data-day="fri"] .cd-c {
  color: light-dark(#a3128a, #ff5ce0);
}

/* ---------- Saturday: squiggles, confetti, a band of shapes ---------- */

:root[data-day="sat"] .page {
  --sig-w: 86px;
  --sig-h: 64px;
}

@media (min-width: 900px) {
  :root[data-day="sat"] .page {
    --sig-w: 290px;
    --sig-h: 212px;
    --sig-top: 52px;
  }
}

.mx-t { fill: #19c2b8; }
.mx-p { fill: #ff4f8b; }
.mx-y { fill: #ffd23f; }
.mx-v { fill: #7b5cff; }
.mx-k { fill: var(--mx-ink); }
.mx-shadow { fill: var(--mx-ink); }
.mx-edge { stroke: var(--mx-ink); stroke-width: 3; stroke-linejoin: round; }
.mx-stroke { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mx-stroke.mx-t { stroke: #19c2b8; }
.mx-stroke.mx-p { stroke: #ff4f8b; }
.mx-stroke.mx-v { stroke: #7b5cff; }
.mx-stroke.mx-kk { stroke: var(--mx-ink); stroke-width: 5; }
.mx-ring { fill: none; stroke-width: 8; }
.mx-ring.mx-p { stroke: #ff4f8b; }

:root[data-day="sat"] .machine::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -3px;
  height: 18px;
  border-radius: 20px 20px 0 0;
  background: radial-gradient(circle, #161616 1.6px, transparent 2.2px) 0 0 / 9px 9px, #ff4f8b;
  box-shadow: inset 0 0 0 3px var(--mx-ink);
}

:root[data-day="sat"] .machine {
  padding-top: 28px;
}

:root[data-day="sat"] .frame:nth-child(1) { background: #7fe3dc; }
:root[data-day="sat"] .frame:nth-child(2) { background: #ffd23f; }
:root[data-day="sat"] .frame:nth-child(3) { background: #ffb8d0; }

:root[data-day="sat"] .spin:active {
  transform: translate(3px, 3px);
  box-shadow: var(--btn-edge), 2px 2px 0 light-dark(#161616, #fff3d6);
}

/* ---------- Sunday: the sun or the moon, clouds, fireflies, grass ---------- */

:root[data-day="sun"] .page {
  --sig-w: 84px;
  --sig-h: 64px;
}

@media (min-width: 900px) {
  :root[data-day="sun"] .page {
    --sig-w: 280px;
    --sig-h: 210px;
    --sig-top: 40px;
  }
}

.orb { fill: light-dark(#ffe28a, #eef0dc); }
.orb-svg .glow-in { stop-color: light-dark(rgba(255, 216, 110, 0.6), rgba(230, 240, 210, 0.2)); }
.orb-svg .glow-out { stop-color: light-dark(rgba(255, 216, 110, 0), rgba(230, 240, 210, 0)); }
.crater { fill: light-dark(transparent, rgba(150, 160, 130, 0.45)); }
.cloud { fill: light-dark(rgba(255, 255, 255, 0.95), rgba(190, 215, 200, 0.08)); }
.night-star { fill: light-dark(transparent, #f1f6e3); }

.fly {
  fill: light-dark(transparent, #e9ff9c);
}

.pin.glow svg {
  filter: drop-shadow(0 0 4px light-dark(transparent, rgba(220, 255, 140, 0.9)));
}

.blade.b0 { fill: light-dark(#a9cd88, #1d3a24); }
.blade.b1 { fill: light-dark(#79a85a, #24472c); }
.blade.b2 { fill: light-dark(#548843, #2f5a35); }

.meadow .stem {
  stroke: light-dark(#6f9a4f, #3f6e3a);
  stroke-width: 1.6;
}

/* ===================================================================================
   Motion: only when the visitor has not asked for less. Calm mode runs none of this.
   =================================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .ball-row {
    animation: turn 16s linear infinite;
  }

  .ft-flash {
    animation: flash 2.8s ease-in-out infinite;
  }

  .beams {
    animation: rotate 90s linear infinite;
  }

  .spots {
    animation: spots 26s linear infinite;
  }

  .tw {
    transform-box: fill-box;
    transform-origin: center;
    animation: twinkle 3.2s ease-in-out infinite var(--d, 0s);
  }

  .tw.d2 { animation-delay: -0.8s; }
  .tw.d3 { animation-delay: -1.6s; }
  .tw.d4 { animation-delay: -2.4s; }

  .tile.t0 { animation: tile 2.4s steps(1) infinite; }
  .tile.t1 { animation: tile 2.4s steps(1) infinite -0.8s; }
  .tile.t3 { animation: tile 2.4s steps(1) infinite -1.6s; }

  .petal {
    animation: fall 24s linear infinite var(--d, 0s);
  }

  .grid {
    animation: grid 2.2s linear infinite;
  }

  .spin-slow {
    transform-box: fill-box;
    transform-origin: center;
    animation: rotate 40s linear infinite;
  }

  .spin-slower {
    animation: rotate 60s linear infinite var(--d, 0s);
  }

  .float {
    animation: float 7s ease-in-out infinite var(--d, 0s);
  }

  .hop {
    animation: hop 1.2s steps(2) infinite var(--d, 0s);
  }

  .hop.d2 {
    animation-delay: -0.6s;
  }

  .blink {
    animation: blink 1.6s steps(1) infinite var(--d, 0s);
  }

  .scan {
    animation: scan 7s linear infinite;
  }

  .walker {
    animation: walk 30s steps(150) infinite;
  }

  .bob {
    animation: bob 5s ease-in-out infinite var(--d, 0s);
  }

  .bob.d2 {
    animation-delay: -2.5s;
  }

  .drift {
    animation: drift 28s ease-in-out infinite alternate var(--d, 0s);
  }

  .pin.glow {
    animation: fly 9s ease-in-out infinite alternate var(--d, 0s);
  }

  .sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sway 6s ease-in-out infinite alternate;
  }

  .sway.s1 { animation-duration: 7.5s; animation-delay: -2s; }
  .sway.s2 { animation-duration: 5.2s; animation-delay: -4s; }

  .reel.is-landed .reel-window {
    animation: landed 0.5s ease-out;
  }

  .board.is-new .frame {
    animation: pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards;
  }

  .board.is-new .frame:nth-child(2) { animation-delay: 0.14s; }
  .board.is-new .frame:nth-child(3) { animation-delay: 0.28s; }

  .is-expiring .main {
    transition: filter 0.6s, opacity 0.6s;
  }

  .dot::before {
    transition: transform 0.2s;
  }

  .spin {
    transition: transform 0.12s, box-shadow 0.12s;
  }

  .lever-arm {
    transition: transform 0.18s ease-in;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.45s;
  }
}

@keyframes turn {
  to { transform: translateX(var(--cycle)); }
}

@keyframes flash {
  0%, 70%, 100% { fill: #f7f3ff; }
  80% { fill: #ffffff; }
  85% { fill: #fff3c4; }
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes spots {
  to { background-position: 131px 0, -197px 0, 263px 0, -157px 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.55) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes tile {
  0% { opacity: 1; }
  33% { opacity: 0.25; }
  66% { opacity: 0.6; }
}

@keyframes fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(40px, 320px) rotate(120deg); }
  50% { transform: translate(-10px, 640px) rotate(240deg); }
  75% { transform: translate(50px, 960px) rotate(380deg); }
  100% { transform: translate(10px, 1300px) rotate(520deg); }
}

@keyframes grid {
  to { background-position: 50% 54px; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes hop {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8%); }
}

@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.2; }
}

@keyframes scan {
  to { background-position: 0 calc(100% + 160px); }
}

@keyframes walk {
  from { transform: translateX(-40px); }
  to { transform: translateX(100vw); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

@keyframes drift {
  from { transform: translateX(-20px); }
  to { transform: translateX(30px); }
}

@keyframes fly {
  0% { transform: translate(0, 0); opacity: 0.2; }
  40% { opacity: 1; }
  100% { transform: translate(30px, -40px); opacity: 0.4; }
}

@keyframes sway {
  from { transform: skewX(-4deg); }
  to { transform: skewX(4deg); }
}

@keyframes landed {
  0% { box-shadow: var(--reel-edge), 0 0 0 0 var(--accent); }
  40% { box-shadow: var(--reel-edge), 0 0 0 3px var(--accent); }
  100% { box-shadow: var(--reel-edge), 0 0 0 0 transparent; }
}

@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
}