:root[data-theme="space"] { color-scheme:dark; --page:#003d52; --card:#0a3b4d; --ink:#fff5ce; --muted:#a6c8d0; --border:#315b69; --accent:#f4cb72; --accent-strong:#f6cc73; --scene:#033d4f; --soft:#174b5c; --button:#f4cb72; --button-text:#193e48; --glow:#3b9eaf; }
:root[data-theme="tea"] { --page:#f7ead8; --card:#fff8ed; --ink:#713d35; --muted:#8a6555; --border:#e1cbb5; --accent:#e5c092; --accent-strong:#bc8667; --scene:#f7ead8; --soft:#f0dbc0; --button:#986251; --button-text:#fff9ef; --glow:#edd2ab; }
:root[data-theme="onsen"] { --page:#fff; --card:#f4f8f4; --ink:#59383f; --muted:#687570; --border:#d9e4dd; --accent:#d3e6db; --accent-strong:#9ab8a4; --scene:#fff; --soft:#edf5ef; --button:#537569; --button-text:#fff; --glow:#d3e6db; }
:root[data-theme="sushi"] { --page:#6dac8f; --card:#82b99f; --ink:#17372b; --muted:#20372d; --border:#568b73; --accent:#d8e5b9; --accent-strong:#84ac85; --scene:#70ac91; --soft:#80b89d; --button:#244d3b; --button-text:#fff9df; --glow:#b6d6b0; }
:root[data-theme="pillow"] { --page:#d3d5ec; --card:#fcfaff; --ink:#574966; --muted:#685674; --border:#b9bbd4; --accent:#e2d1eb; --accent-strong:#ae8ec6; --scene:#d8d7eb; --soft:#eee5f6; --button:#806496; --button-text:#fff8ec; --glow:#d4c4ed; }
:root[data-theme="studio"] { --page:#c7e8fb; --card:#fffef9; --ink:#4b5e68; --muted:#526873; --border:#a7cbdc; --accent:#bce3ee; --accent-strong:#74b6cc; --scene:#c6e9f7; --soft:#eaf4ee; --button:#48717b; --button-text:#fffcef; --glow:#d8edf0; }

:root { --art-ratio:1; --art-shift:0%; }
[data-collection="adventures"] { --art-ratio:0.7352941176; }
/* These wallpaper viewports trim empty margins while keeping the full illustrations. */
:root[data-theme="pillow"] { --art-ratio:1.0536585366; --art-shift:-20.0520833333%; }
:root[data-theme="studio"] { --art-ratio:1.3670886076; --art-shift:-26.8229166667%; }
:root[data-theme="tea"] { --art-ratio:1.02734375; --art-max-width:500px; }
:root[data-theme="onsen"] { --art-ratio:1.7777777778; }

/* Let the artwork use the quiet space beside the clock and the outer page margin. */
[data-collection="adventures"] .scene {
  width:calc(100% + min(11vw,140px));
  margin-left:calc(-1 * min(7.5vw,96px));
}
/* Gallery scenes grow into the gutter only, keeping their frames clear of the page edge. */
[data-collection="gallery"] .scene { width:calc(100% + min(7.5vw,96px)); margin-left:calc(-1 * min(7.5vw,96px)); }
[data-collection="adventures"] .scene-art-window { max-width:var(--art-max-width,none); }
:root[data-theme="space"] { --art-ratio:0.8823529412; --art-shift:-7.3529411765%; }
:root[data-theme="sushi"] { --art-ratio:1.2; --art-shift:-19.1993464052%; }
@media(max-width:1100px) and (min-width:761px) {
 [data-collection="adventures"] .scene { width:calc(100% + 50px); margin-left:-30px; }
 [data-collection="gallery"] .scene { width:calc(100% + 30px); margin-left:-30px; }
}
@media(max-width:760px) {
 [data-collection="adventures"] .scene { width:calc(100% + 32px); margin-left:-16px; }
 [data-collection="gallery"] .scene { width:100%; margin-left:0; }
}

/* ============================================================================
   The anniversary gallery. Twelve official Pompompurin prints from Sanrio's 30th
   anniversary site, each shown whole on a page art-directed to match it: the page
   color continues the print's own background, and the typography, backdrop
   patterns, and frames echo its style. The faint repeating outlines behind some
   themes are Sanrio's own white line art of Purin (bg-pompompurin*.png on the
   official character page), tinted or faded with CSS filters only.
   ============================================================================ */
[data-collection="gallery"] { --art-ratio:0.7352941176; }
[data-collection="gallery"] .scene-art-window { max-width:calc(660px * var(--art-ratio)); }
:root { --purin-outline-1:url("https://www.sanrio.co.jp/wp-content/uploads/2022/06/bg-pompompurin1.png"); --purin-outline-2:url("https://www.sanrio.co.jp/wp-content/uploads/2022/06/bg-pompompurin2.png"); --purin-outline-3:url("https://www.sanrio.co.jp/wp-content/uploads/2022/06/bg-pompompurin3.png"); --purin-outline-4:url("https://www.sanrio.co.jp/wp-content/uploads/2022/06/bg-pompompurin4.png"); }

/* Comic Hero: Ben-Day dots, hard shadows, and speed lines bursting behind the print. */
:root[data-theme="hero"] {
  --page:#6fc2ee; --card:#eaf7ff; --ink:#1d2a3a; --muted:#345170; --border:#1d2a3a; --accent:#e23c2f; --accent-strong:#f6c744; --scene:#6fc2ee; --soft:#a9ddf8; --button:#e23c2f; --button-text:#fff; --glow:#fff;
  --font-clock:'Bebas Neue',var(--font-body); --clock-weight:400; --clock-tracking:.02em;
  --backdrop:radial-gradient(circle,#ffffff66 1.6px,transparent 2.2px) 0 0/17px 17px;
}
:root[data-theme="hero"] .time-display { text-shadow:.04em .04em 0 var(--accent); }
:root[data-theme="hero"] .scene { position:relative; }
:root[data-theme="hero"] .scene::before { content:''; position:absolute; inset:-10% -14%; z-index:-1; pointer-events:none; background:repeating-conic-gradient(from 0deg,#ffffff5c 0 3deg,transparent 3deg 10deg); -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%); mask-image:radial-gradient(circle,#000 30%,transparent 72%); }
:root[data-theme="hero"] .scene-caption { color:var(--ink); font-weight:600; }
:root[data-theme="hero"] .presets { border-width:2px; background:var(--card); }
:root[data-theme="hero"] .primary-button,:root[data-theme="hero"] .reset-button,:root[data-theme="hero"] .icon-button { border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background-color:var(--card); }
:root[data-theme="hero"] .reset-button:hover,:root[data-theme="hero"] .icon-button:hover { background-color:var(--soft); }
:root[data-theme="hero"] .primary-button { background-color:var(--button); }
:root[data-theme="hero"] .primary-button:hover { filter:none; background-color:#ef4d40; }
:root[data-theme="hero"] .progress-track { height:5px; background:var(--ink); border-radius:0; }
:root[data-theme="hero"] #progress-fill { background:var(--accent-strong); }
:root[data-theme="hero"] .status-dot { background:var(--accent); }

/* Night Geek: neon riso print. Purple and yellow misregistration, halftone, a checker strip. */
:root[data-theme="geek"] { color-scheme:dark;
  --page:#231816; --card:#2e2220; --ink:#fff6e8; --muted:#c9b3a6; --border:#4a3a35; --accent:#a66cff; --accent-strong:#ffd23f; --scene:#231816; --soft:#3a2c28; --button:#a66cff; --button-text:#1a1210; --glow:#5a3a9a;
  --font-clock:'Bebas Neue',var(--font-body); --clock-weight:400; --clock-tracking:.01em;
  --backdrop:
    radial-gradient(circle at 86% 10%,#a66cff52,#a66cff00 36%),
    radial-gradient(circle at 8% 92%,#ffd23f3d,#ffd23f00 40%),
    radial-gradient(circle,#a66cff2e 1.1px,transparent 1.7px) 0 0/13px 13px;
  --motif:var(--purin-outline-1),var(--purin-outline-2); --motif-size:300px 300px; --motif-position:0 0,150px 150px; --motif-opacity:.06;
}
:root[data-theme="geek"] .time-display { text-shadow:5px 4px 0 #a66cff99,-4px -3px 0 #ffd23f80; }
:root[data-theme="geek"] .timer-card::before { content:''; position:absolute; top:0; left:0; right:0; height:10px; background:repeating-conic-gradient(#a66cff 0 25%,transparent 0 50%) 0 0/20px 20px; opacity:.85; }
:root[data-theme="geek"] .scene-art { filter:drop-shadow(0 0 28px #a66cff66); }
:root[data-theme="geek"] .scene-caption { color:var(--accent-strong); }
:root[data-theme="geek"] .progress-track { height:6px; background:repeating-linear-gradient(-45deg,#4a3a35 0 6px,#231816 6px 12px); }
:root[data-theme="geek"] #progress-fill { background:var(--accent-strong); }
:root[data-theme="geek"] .presets,:root[data-theme="geek"] .reset-button,:root[data-theme="geek"] .icon-button { border-style:dashed; border-color:#a66cff80; }

/* Skate Park: hazard stripes, halftone, and the print slapped on like a sticker. */
:root[data-theme="skate"] {
  --page:#018bd6; --card:#e6f4ff; --ink:#0b2340; --muted:#143a63; --border:#0b2340; --accent:#7ed957; --accent-strong:#ff7a1a; --scene:#018bd6; --soft:#4fb0ea; --button:#0b2340; --button-text:#7ed957; --glow:#fff;
  --font-clock:'Bebas Neue',var(--font-body); --clock-weight:400; --clock-tracking:.03em;
  --backdrop:
    repeating-linear-gradient(-45deg,#0b2340 0 18px,#7ed957 18px 36px) 0 100%/100% 14px no-repeat,
    radial-gradient(circle,#ffffff2b 1.4px,transparent 2px) 0 0/15px 15px;
  --motif:var(--purin-outline-3); --motif-size:340px 340px; --motif-opacity:.08;
}
:root[data-theme="skate"] .time-display { text-shadow:4px 4px 0 var(--accent); }
:root[data-theme="skate"] .scene-art-window { transform:rotate(-3deg); border:10px solid #fff; border-radius:8px; box-shadow:10px 10px 0 var(--ink); }
:root[data-theme="skate"] .scene-caption { margin-top:34px; color:var(--card); }
:root[data-theme="skate"] .presets,:root[data-theme="skate"] .reset-button,:root[data-theme="skate"] .icon-button { border-style:dashed; border-width:2px; }
:root[data-theme="skate"] .presets button[aria-pressed="true"] { background:var(--accent); color:var(--ink); }
:root[data-theme="skate"] .progress-track { height:6px; background:repeating-linear-gradient(90deg,#0b2340 0 10px,transparent 10px 16px); }
:root[data-theme="skate"] #progress-fill { background:var(--accent); }
@media(max-width:760px) { :root[data-theme="skate"] .scene-art-window { transform:rotate(-2deg); box-shadow:8px 8px 0 var(--ink); } }

/* Diner Nights: a Showa-era noodle shop. Green lattice, red menu board, chunky cream serif. */
:root[data-theme="diner"] { color-scheme:dark;
  --page:#07ac70; --card:#fff6dc; --ink:#fff8e6; --muted:#d7f3e4; --border:#f6c744; --accent:#f6c744; --accent-strong:#ffd95a; --scene:#07ac70; --soft:#0a9463; --button:#d8262c; --button-text:#fff8e6; --glow:#ffd95a;
  --font-clock:'Fraunces',Georgia,serif; --clock-weight:800; --clock-tracking:-.05em; --font-serif:'Fraunces',Georgia,serif;
  --backdrop:
    linear-gradient(#d8262c 0 10px,#f6c744 10px 14px,transparent 14px) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(45deg,#ffffff14 0 2px,transparent 2px 28px),
    repeating-linear-gradient(-45deg,#ffffff14 0 2px,transparent 2px 28px);
}
:root[data-theme="diner"] .time-display { font-variation-settings:'opsz' 144; text-shadow:.03em .03em 0 #d8262c; }
:root[data-theme="diner"] .site-header { border-bottom:3px double #f6c744aa; }
:root[data-theme="diner"] .presets { border-width:2px; }
:root[data-theme="diner"] .presets button[aria-pressed="true"] { background:#d8262c; color:var(--ink); }
:root[data-theme="diner"] .reset-button,:root[data-theme="diner"] .icon-button { border-width:2px; }
:root[data-theme="diner"] .progress-track { height:4px; background:#0a9463; }
:root[data-theme="diner"] #progress-fill { background:#d8262c; }
:root[data-theme="diner"] .status-dot { background:#d8262c; border-radius:2px; }
:root[data-theme="diner"] .scene-caption { color:var(--accent); }
:root[data-theme="diner"] .intention::placeholder { color:var(--card); }

/* Ink Sketchbook: white paper with a dot grid, typewriter labels, and a light ink clock. */
:root[data-theme="sketch"] {
  --page:#fff; --card:#fff; --ink:#1a1a1a; --muted:#6b6b6b; --border:#1a1a1a; --accent:#ffe27a; --accent-strong:#1a1a1a; --scene:#fff; --soft:#f2f2f2; --button:#1a1a1a; --button-text:#fff; --glow:#ffe27a;
  --font-body:'Courier Prime',Courier,monospace; --font-serif:'Fraunces',Georgia,serif; --font-clock:'Fraunces',Georgia,serif; --clock-weight:300; --clock-tracking:-.05em;
  --backdrop:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/220px 220px,
    radial-gradient(circle,#0000001f 1px,transparent 1.5px) 12px 12px/24px 24px;
  --motif:var(--purin-outline-2),var(--purin-outline-4); --motif-size:440px 440px; --motif-position:0 0,220px 220px; --motif-opacity:.05; --motif-filter:invert(1);
}
:root[data-theme="sketch"] .time-display { font-variation-settings:'opsz' 144; }
:root[data-theme="sketch"] .timer-card { border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); }
:root[data-theme="sketch"] .presets { border-radius:6px; }
:root[data-theme="sketch"] .presets button,:root[data-theme="sketch"] .primary-button { border-radius:4px; }
:root[data-theme="sketch"] .reset-button,:root[data-theme="sketch"] .icon-button { border-radius:6px; }
:root[data-theme="sketch"] .progress-track { height:2px; background:var(--ink); }
:root[data-theme="sketch"] #progress-fill { background:var(--accent); }
:root[data-theme="sketch"] .status-dot { border-radius:1px; background:var(--ink); }
:root[data-theme="sketch"] .scene-caption { font-family:var(--font-body); font-style:normal; font-size:13px; }

/* Mid-Century Lounge: cream, mustard, and terracotta geometry behind a quiet serif. */
:root[data-theme="lounge"] {
  --page:#fff; --card:#fbf7ef; --ink:#2d3b35; --muted:#6c7a72; --border:#d9d2c3; --accent:#e2b33b; --accent-strong:#e2714a; --scene:#fff; --soft:#f1ebdd; --button:#2d3b35; --button-text:#fff6e0; --glow:#f5dca0;
  --font-serif:'Fraunces',Georgia,serif; --font-clock:'Fraunces',Georgia,serif; --clock-weight:600; --clock-tracking:-.06em;
  --backdrop:
    radial-gradient(circle at 9% 18%,#e2b33b4d 0 170px,transparent 171px),
    radial-gradient(circle at 92% 14%,transparent 0 110px,#e2714a66 111px 124px,transparent 125px),
    radial-gradient(circle at 84% 92%,#7bb3e04d 0 230px,transparent 231px),
    radial-gradient(circle at 18% 96%,#4f8a3e33 0 90px,transparent 91px);
}
:root[data-theme="lounge"] .time-display { font-variation-settings:'opsz' 144; }
:root[data-theme="lounge"] .presets { border-color:var(--ink); }
:root[data-theme="lounge"] .presets button[aria-pressed="true"] { background:var(--accent-strong); color:#fff; }
:root[data-theme="lounge"] #progress-fill { background:var(--accent); }
:root[data-theme="lounge"] .status-dot { background:var(--accent-strong); }

/* Seventies Groove: rainbow arcs in the corners and a soft, bubbly serif clock. */
:root[data-theme="groovy"] {
  --page:#7dccf3; --card:#fff8e1; --ink:#3d2a4f; --muted:#56456b; --border:#3d2a4f; --accent:#f2994a; --accent-strong:#e868a0; --scene:#7dccf3; --soft:#a9e0f8; --button:#e868a0; --button-text:#fff; --glow:#ffe66d;
  --font-serif:'Fraunces',Georgia,serif; --font-clock:'Fraunces',Georgia,serif; --clock-weight:900; --clock-tracking:-.04em;
  --backdrop:
    radial-gradient(circle at 0% 100%,transparent 0 200px,#e868a0d9 200px 232px,#f2994ad9 232px 264px,#ffe66dd9 264px 296px,#7ed957d9 296px 328px,transparent 329px),
    radial-gradient(circle at 100% 0%,transparent 0 120px,#e868a0d9 120px 146px,#f2994ad9 146px 172px,#ffe66dd9 172px 198px,#7ed957d9 198px 224px,transparent 225px);
}
:root[data-theme="groovy"] .time-display { font-variation-settings:'opsz' 144,'SOFT' 100; }
:root[data-theme="groovy"] .intention,:root[data-theme="groovy"] .scene-caption { font-variation-settings:'SOFT' 100; }
:root[data-theme="groovy"] .presets { border-width:2px; background:#ffffff66; }
:root[data-theme="groovy"] .presets button[aria-pressed="true"] { background:var(--accent-strong); color:#fff; }
:root[data-theme="groovy"] .progress-track { height:6px; background:#ffffff80; }
:root[data-theme="groovy"] #progress-fill { background:linear-gradient(90deg,#e868a0,#f2994a,#ffe66d,#7ed957); }
:root[data-theme="groovy"] .status-dot { background:var(--accent); }

/* Pastel Vibes: aurora gradients, twinkling stars, and the collage in a soft rounded frame. */
:root[data-theme="pastel"] {
  --page:#d9c5e3; --card:#f6effa; --ink:#4a3560; --muted:#74608c; --border:#c7b2d6; --accent:#f3b7d1; --accent-strong:#9b7bc7; --scene:#d9c5e3; --soft:#e9dcf0; --button:#7b5ea7; --button-text:#fff; --glow:#f3d6e8;
  --font-serif:'Fraunces',Georgia,serif; --font-clock:'Fraunces',Georgia,serif; --clock-weight:300; --clock-tracking:-.05em;
  --backdrop:
    radial-gradient(circle at 18% 12%,#f8cfe3,#f8cfe300 42%),
    radial-gradient(circle at 88% 82%,#cfeef0,#cfeef000 46%),
    radial-gradient(circle at 72% 18%,#c9b6f0,#c9b6f000 40%),
    linear-gradient(160deg,#d9c5e3,#ead6ec 50%,#cfdff0);
}
:root[data-theme="pastel"] .time-display { font-variation-settings:'opsz' 144; }
:root[data-theme="pastel"] .timer-card::before,:root[data-theme="pastel"] .timer-card::after { content:''; position:absolute; inset:-40px -60px; z-index:-1; pointer-events:none; background-image:radial-gradient(circle,#fff 0 1.9px,#fff0 3px),radial-gradient(circle,#fff 0 1.2px,#fff0 2.1px),radial-gradient(circle,#ffe39a 0 1.7px,#ffe39a00 2.6px); background-size:150px 150px,95px 95px,230px 230px; background-position:17px 29px,61px 7px,100px 140px; animation:twinkle 3.2s ease-in-out infinite alternate; }
:root[data-theme="pastel"] .timer-card::after { background-position:70px 90px,20px 50px,180px 40px; animation-delay:-1.6s; }
:root[data-theme="pastel"] .scene-art-window { border-radius:22px; box-shadow:0 0 0 6px #fff,0 30px 60px -22px #4a356066; }
:root[data-theme="pastel"] .scene-caption { margin-top:28px; }
@keyframes twinkle { from { opacity:.2; } to { opacity:1; } }

/* Aurora Parlor: pale drifting clouds and aurora ribbons on white, with a floating print. */
:root[data-theme="aurora"] {
  --page:#fff; --card:#fff; --ink:#4a4f7a; --muted:#7c80a6; --border:#d8dcf0; --accent:#cfd8ff; --accent-strong:#8fa3e6; --scene:#fff; --soft:#eef1fb; --button:#6f7fd1; --button-text:#fff; --glow:#e6ecff;
  --font-clock:'Nunito',var(--font-body); --clock-weight:800; --clock-tracking:-.045em;
  --backdrop:
    radial-gradient(230px 140px at 13% 26%,#e6e9ff 38%,#e6e9ff00 100%),
    radial-gradient(190px 130px at 21% 19%,#f3e6f9 38%,#f3e6f900 100%),
    radial-gradient(320px 160px at 64% 90%,#dff1fb 38%,#dff1fb00 100%),
    radial-gradient(230px 150px at 75% 84%,#e6e9ff 38%,#e6e9ff00 100%),
    linear-gradient(100deg,transparent 30%,#cfe3ff59 45%,#f0d6ff59 55%,transparent 70%);
  --motif:var(--purin-outline-4),var(--purin-outline-1); --motif-size:300px 300px; --motif-position:0 0,150px 150px; --motif-opacity:.5; --motif-filter:brightness(.9) sepia(1) saturate(2) hue-rotate(205deg);
}
:root[data-theme="aurora"] body::before { inset:-6%; animation:drift 48s ease-in-out infinite alternate; }
:root[data-theme="aurora"] .scene-art-window { animation:float 6s ease-in-out infinite alternate; }
:root[data-theme="aurora"] .scene-art { filter:drop-shadow(0 22px 26px #4a4f7a24); }
@keyframes drift { to { transform:translateX(4%); } }
@keyframes float { to { transform:translateY(-12px); } }

/* Royal Pudding Court: rose and gold, a deco sunburst, and gilded rings around the print. */
:root[data-theme="royal"] {
  --page:#fae5ee; --card:#fff6f9; --ink:#6b2d4e; --muted:#9a5f7d; --border:#ecc9d8; --accent:#d4af37; --accent-strong:#e9c860; --scene:#fae5ee; --soft:#f8dce8; --button:#c2457a; --button-text:#fff; --glow:#ffd9ea;
  --font-serif:'Fraunces',Georgia,serif; --font-clock:'Fraunces',Georgia,serif; --clock-weight:400; --clock-tracking:-.03em;
  --backdrop:
    repeating-conic-gradient(from 0deg at 50% 118%,#d4af3719 0 3deg,transparent 3deg 10deg),
    radial-gradient(circle at 50% 0%,#fff0f6,#fae5ee 60%);
  --motif:var(--purin-outline-1); --motif-size:360px 360px; --motif-opacity:.16; --motif-filter:sepia(1) saturate(6) brightness(.85);
}
:root[data-theme="royal"] .time-display { font-variation-settings:'opsz' 144; }
:root[data-theme="royal"] .site-header { border-bottom:3px double #d4af3780; }
:root[data-theme="royal"] .intention-label,:root[data-theme="royal"] .status-pill,:root[data-theme="royal"] #progress-caption { letter-spacing:.22em; text-transform:uppercase; font-size:10px; }
:root[data-theme="royal"] .scene-art-window { border-radius:16px; box-shadow:0 0 0 2px var(--accent),0 0 0 10px var(--page),0 0 0 11px var(--accent),0 0 0 22px var(--page),0 0 0 23px #d4af3766; }
:root[data-theme="royal"] .scene-caption { margin-top:46px; font-style:normal; text-transform:uppercase; letter-spacing:.3em; font-size:11px; color:#b08d2a; }
:root[data-theme="royal"] .progress-track { height:1px; background:#d4af3780; }
:root[data-theme="royal"] #progress-fill { background:var(--accent); }
:root[data-theme="royal"] .presets,:root[data-theme="royal"] .reset-button,:root[data-theme="royal"] .icon-button { border-color:#d4af3780; }

/* Kitchen Wallpaper: blue gingham, a white tile frame, and a plump rounded clock. */
:root[data-theme="kitchen"] {
  --page:#82c9e1; --card:#f7fbfd; --ink:#244b5e; --muted:#355f74; --border:#fff; --accent:#f8d880; --accent-strong:#e6b53a; --scene:#82c9e1; --soft:#a9dbeb; --button:#244b5e; --button-text:#fff6d6; --glow:#fff;
  --font-clock:'Nunito',var(--font-body); --clock-weight:900; --clock-tracking:-.05em;
  --backdrop:
    linear-gradient(90deg,#ffffff33 0 50%,transparent 50%) 0 0/40px 40px,
    linear-gradient(#ffffff33 0 50%,transparent 50%) 0 0/40px 40px;
  --motif:var(--purin-outline-3),var(--purin-outline-2); --motif-size:280px 280px; --motif-position:0 0,140px 140px; --motif-opacity:.22;
}
:root[data-theme="kitchen"] .scene-art-window { border:12px solid #fff; border-radius:12px; box-shadow:0 18px 40px -18px #244b5e66; }
:root[data-theme="kitchen"] .scene-caption { margin-top:26px; color:var(--card); }
:root[data-theme="kitchen"] .presets { background:#ffffffb3; }
:root[data-theme="kitchen"] .presets button[aria-pressed="true"] { background:var(--ink); color:var(--card); }
:root[data-theme="kitchen"] .reset-button,:root[data-theme="kitchen"] .icon-button { background:#ffffff80; }
:root[data-theme="kitchen"] .progress-track { height:5px; background:#ffffff99; }
:root[data-theme="kitchen"] #progress-fill { background:var(--accent-strong); }

/* Fruit Stand: teal polka dots, lemon-yellow blobs, and cherry-red type shadows. */
:root[data-theme="fruit"] {
  --page:#72c6d0; --card:#fdfdf5; --ink:#103b45; --muted:#1f5660; --border:#103b45; --accent:#e8485a; --accent-strong:#ffe36e; --scene:#72c6d0; --soft:#98d8de; --button:#e8485a; --button-text:#fff; --glow:#fff;
  --font-clock:'Nunito',var(--font-body); --clock-weight:900; --clock-tracking:-.05em;
  --backdrop:
    radial-gradient(circle at 12% 20%,#ffe36e8c 0 120px,transparent 121px),
    radial-gradient(circle at 90% 85%,#ffe36e8c 0 150px,transparent 151px),
    radial-gradient(circle,#ffffff59 3px,transparent 3.6px) 0 0/36px 36px;
}
:root[data-theme="fruit"] .time-display { text-shadow:3px 3px 0 var(--accent-strong),6px 6px 0 var(--accent); }
:root[data-theme="fruit"] .presets { border-width:2px; background:#ffffff80; }
:root[data-theme="fruit"] .presets button[aria-pressed="true"] { background:var(--accent); color:#fff; }
:root[data-theme="fruit"] .reset-button,:root[data-theme="fruit"] .icon-button { border-width:2px; }
:root[data-theme="fruit"] .progress-track { height:5px; background:#ffffff80; }
:root[data-theme="fruit"] #progress-fill { background:var(--accent); }
:root[data-theme="fruit"] .status-dot { background:var(--accent); }

/* Picker swatches: a compact preview of each gallery palette behind the print. */
.hero-preview { --swatch:radial-gradient(circle,#ffffff80 1px,transparent 1.5px) 0 0/7px 7px,#6fc2ee; }
.geek-preview { --swatch:radial-gradient(circle at 80% 15%,#a66cff66,#a66cff00 45%),#231816; }
.skate-preview { --swatch:linear-gradient(0deg,transparent 0 calc(100% - 5px),#7ed957 calc(100% - 5px)),#018bd6; }
.diner-preview { --swatch:linear-gradient(#d8262c 0 4px,#f6c744 4px 6px,transparent 6px) no-repeat,#07ac70; }
.sketch-preview { --swatch:radial-gradient(circle,#0000002e 1px,transparent 1.4px) 0 0/8px 8px,#fff; }
.lounge-preview { --swatch:radial-gradient(circle at 20% 25%,#e2b33b 0 12px,transparent 13px),radial-gradient(circle at 80% 80%,#7bb3e0 0 14px,transparent 15px),#fbf7ef; }
.groovy-preview { --swatch:radial-gradient(circle at 0% 100%,transparent 0 16px,#e868a0 16px 22px,#f2994a 22px 28px,#ffe66d 28px 34px,#7ed957 34px 40px,transparent 41px),#7dccf3; }
.pastel-preview { --swatch:linear-gradient(160deg,#d9c5e3,#f0d9ec 50%,#cfdff0); }
.aurora-preview { --swatch:linear-gradient(135deg,#fff,#e6e9ff 55%,#f3e6f9); }
.royal-preview { --swatch:#fae5ee; }
.kitchen-preview { --swatch:linear-gradient(90deg,#ffffff33 0 50%,transparent 50%) 0 0/12px 12px,linear-gradient(#ffffff33 0 50%,transparent 50%) 0 0/12px 12px,#82c9e1; }
.fruit-preview { --swatch:radial-gradient(circle,#ffffff66 1.3px,transparent 1.8px) 0 0/10px 10px,#72c6d0; }