/* Love counter (/love/): builds on the countdown stage (.cd-stage, .cd-head, .cd-panel in rail.css). */
/* In Love layout: portraits, total days and six calendar units. */
html body .tool-hero>.tool-card.love-stage:has(>output.tool-display){min-height:calc(100dvh - 70px);padding-block:38px;justify-content:center}
html body .tool-hero>.tool-card.love-stage>output.tool-display,
html body .tool-hero>.tool-card.love-stage>.flip-board{display:none!important}
html body .tool-hero>.tool-card.love-stage>.love-head{width:min(640px,100%);margin-bottom:18px}
.love-caption{margin:0 0 26px;font-size:clamp(22px,3vw,32px);font-weight:700;line-height:1.3;overflow-wrap:anywhere;color:var(--lv-text)}
.love-couple{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);align-items:center;gap:18px;width:min(440px,100%)}
.love-person{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;font-size:18px;font-weight:700;text-align:center}
.love-person>span{max-width:100%;overflow-wrap:anywhere}
.love-couple .love-heart{font-size:42px;margin-top:-28px}
html body .love-couple .love-avatar{display:grid;place-items:center;width:clamp(88px,13vw,120px);margin:0;aspect-ratio:1}
.love-avatar-placeholder{position:absolute;font-size:44px;color:var(--lv-heart);background:var(--lv-base);border-radius:50%;inset:4px;display:grid;place-items:center}
.love-avatar.has-photo .love-avatar-placeholder{display:none}
html body .love-couple .love-avatar img[hidden]{display:none}
.love-memory{order:2;width:min(580px,100%);text-align:center}
.love-day-total{display:flex;flex-direction:column;align-items:center;gap:0;width:fit-content;min-width:200px;max-width:100%;margin:auto;padding:12px 36px 18px;border:1px solid var(--lv-line);border-radius:24px;background:var(--lv-surface);box-shadow:var(--lv-shadow)}
.love-day-total strong{max-width:100%;font-size:clamp(64px,10vw,96px);line-height:1.1;letter-spacing:-.05em;font-weight:800;overflow-wrap:anywhere;color:var(--lv-accent-text)}
.love-day-total span{font-size:15px;color:var(--lv-muted)}
.love-memory-tagline{margin:22px 0 16px;font-size:15px;color:var(--lv-muted)}
.love-time-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.love-time-cell{display:flex;flex-direction:column;gap:5px;padding:15px 4px 12px;border:1px solid var(--lv-line);border-radius:14px;background:var(--lv-surface);box-shadow:0 4px 16px color-mix(in srgb,var(--lv-accent) 5%,transparent)}
.love-time-cell strong{font-size:28px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--lv-text)}
.love-time-cell span{font-size:12px;color:var(--lv-muted)}
.love-quote{margin:22px 0 0;padding:16px 20px;border-inline-start:3px solid var(--lv-accent);border-radius:0 12px 12px 0;background:var(--lv-surface);color:var(--lv-muted);font-size:14px;line-height:1.6;font-style:italic}
html body .love-panel .love-caption-field{margin-bottom:18px}
html body .love-panel .love-photos{margin-top:20px}
html body .love-panel .love-row{grid-template-columns:1fr}
html body .love-panel .controls{gap:12px;flex-wrap:wrap}
.love-photo-row:focus-within{outline:2px solid var(--love);outline-offset:4px;border-radius:8px}
@media(max-width:620px){
  html body .tool-hero>.tool-card.love-stage:has(>output.tool-display){padding-block:28px;min-height:calc(100dvh - 64px)}
  .love-couple{gap:10px;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}
  .love-couple .love-heart{font-size:32px}
  .love-person{font-size:16px}
  .love-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .love-time-cell{padding:12px 4px 10px}
  .love-time-cell strong{font-size:24px}
  .love-caption{margin-bottom:22px}
}
.love-stage{--love:#ff4d6d;--love-2:#ff8fab;--love-soft:color-mix(in srgb,var(--love) 14%,transparent)}

/* Heading: optional round photo, "Name ❤ Name", "Together since ..." */
html body .tool-hero>.tool-card.love-stage>.cd-head{display:flex;flex-direction:column;align-items:center}
.love-avatar{position:relative;width:clamp(76px,10vh,104px);aspect-ratio:1;margin:0 0 14px;padding:4px;border-radius:50%;background:linear-gradient(135deg,var(--love),var(--love-2));box-shadow:0 10px 30px color-mix(in srgb,var(--love) 30%,transparent)}
.love-avatar img{display:block;width:100%;height:100%;border:3px solid var(--lv-base,var(--surface));border-radius:50%;object-fit:cover}
.love-avatar[hidden]{display:none}
.love-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 .38em}
.love-heart{display:inline-block;color:var(--love);font-size:.82em;line-height:1;animation:love-beat 1.6s ease-in-out infinite}
@keyframes love-beat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.18)}28%{transform:scale(1.06)}}
.love-party{margin:12px 0 0;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,var(--love),var(--love-2));color:var(--lv-accent-ink,#fff);font-size:15px;font-weight:800;box-shadow:0 8px 24px color-mix(in srgb,var(--love) 35%,transparent);animation:love-pop .5s cubic-bezier(.2,1.6,.4,1)}
.love-party[hidden]{display:none}
@keyframes love-pop{from{opacity:0;transform:scale(.7)}}

/* Next milestone */
html body .tool-hero>.tool-card.love-stage>.love-next{order:3;width:min(460px,100%);margin:clamp(34px,5vh,52px) auto 0;padding:14px 18px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:start}
.love-next-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.love-next-label{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.love-next-when{color:var(--muted);font-size:13px;font-weight:600}
.love-next-name{display:block;margin:4px 0 10px;color:var(--text);font-size:20px;font-weight:800;letter-spacing:-.01em}
.love-progress{height:6px;overflow:hidden;border-radius:999px;background:var(--surface-2)}
.love-progress span{display:block;width:2%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--love),var(--love-2));transition:width .6s ease}

/* Action buttons, styled like the countdown's "Create a countdown timer" button */
html body .tool-hero>.tool-card.love-stage>.love-actions{order:4;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(18px,3vh,28px)}
.love-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .18s,transform .18s}
.love-action:hover,.love-action[aria-expanded=true]{border-color:var(--love);transform:translateY(-1px)}
.love-action:disabled{opacity:.6;cursor:progress}
.love-action[hidden]{display:none}
.love-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.love-edit{border-color:color-mix(in srgb,var(--love) 45%,var(--line))}

/* Form panel */
html body .tool-hero>.tool-card.love-stage>.cd-panel{order:5}
html body .love-panel .love-row{margin-top:20px}
html body .love-panel .field{display:flex;flex-direction:column}
.love-photo-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.love-field-label{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.love-photo-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:38px;padding-top:4px}
.love-thumb{flex:0 0 auto;width:34px;height:34px;border:1px dashed var(--line);border-radius:50%;background:var(--surface-2) center/cover no-repeat}
.love-thumb.has-photo{border:2px solid var(--love)}
.love-chip{display:inline-flex;align-items:center;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .18s}
.love-chip:hover,.love-file:focus-visible+.love-chip{border-color:var(--love)}
.love-remove{color:var(--muted)}
.love-remove[hidden]{display:none}
.love-file{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.love-privacy{display:flex;align-items:center;gap:8px;margin:18px 0 0;padding:10px 12px;border-radius:12px;background:var(--love-soft);color:var(--text);font-size:12px;line-height:1.45}
.love-privacy::before{content:"";flex:0 0 auto;width:14px;height:14px;background:var(--love);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E") center/contain no-repeat}
html body .love-panel .controls{margin-top:18px}
html body .love-panel .button.primary{background:var(--love);border-color:var(--love);color:var(--lv-accent-ink,#fff)}

/* Status line under everything */
html body .tool-hero>.tool-card.love-stage>.love-note{order:6;min-height:1.5em;margin:14px auto 0;font-size:12px}

/* Celebration */
.love-burst{position:fixed;inset:0;z-index:80;width:100vw;height:100vh;pointer-events:none}
.is-celebrating .flip-board{filter:drop-shadow(0 0 28px color-mix(in srgb,var(--love) 35%,transparent))}

@media(max-width:620px){
  html body .tool-hero>.tool-card.love-stage>.love-next{margin-top:28px}
  .love-action{flex:1 1 calc(50% - 10px);padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){
  .love-heart,.love-party{animation:none}
  .love-action,.love-progress span{transition:none}
}

/* ==== Love themes ========================================================================
   love.js sets html[data-love-theme="<id>"] (an inline script in <head> sets it first, so there is no
   flash). A theme is a set of --lv-* custom properties declared on [data-love-theme="<id>"], so the same
   variables also paint the picker tiles (each tile carries its own data-love-theme). A runtime theme
   (e.g. "from photo") sets the same --lv-* properties inline on <html> and on its tile; anything it
   leaves out falls back to the sakura values below. The variables are mapped onto the site's own
   --surface/--text/... only inside <main> and the footer, so the rail, the top bar and the site-wide
   light/dark setting stay untouched. (Fonts are not themed: the site sets Times New Roman everywhere, see settings.css/site-language.js.)
     Page:  --lv-scheme --lv-base --lv-bg --lv-bg-size --lv-bg-anim --lv-grain --lv-vignette
     UI:    --lv-text --lv-muted --lv-line --lv-surface --lv-surface-2 --lv-glass --lv-shadow
            --lv-accent --lv-accent-2 --lv-accent-ink --lv-accent-text --lv-heart
     Flip:  --lv-flip-card --lv-flip-top --lv-flip-edge --lv-flip-ink --lv-flip-glow --lv-flip-split
            --lv-flip-outline --lv-flip-shadow --lv-half --lv-half-top --lv-flap --lv-flap-top
     Title: --lv-head-style --lv-head-weight --lv-head-spacing --lv-head-fill --lv-head-filter
   ========================================================================================= */

/* sakura (default, also the fallback for unknown ids): pastel pink glass */
[data-love-theme]{
  --lv-scheme:light;--lv-base:#fdeef3;
  --lv-bg:radial-gradient(ellipse 60% 50% at 12% 8%,#ffd3e3 0,transparent 70%),radial-gradient(ellipse 50% 45% at 88% 18%,#ffe8d9 0,transparent 70%),radial-gradient(ellipse 60% 55% at 78% 92%,#f6c3d9 0,transparent 70%),radial-gradient(ellipse 50% 50% at 8% 88%,#fde0ec 0,transparent 70%),linear-gradient(165deg,#fff6f9 0%,#fde6ef 55%,#f9d6e4 100%);
  --lv-bg-size:cover;--lv-bg-anim:none;--lv-grain:0;--lv-vignette:none;
  --lv-text:#4b1d33;--lv-muted:#8e5871;--lv-line:rgba(206,104,148,.26);
  --lv-surface:rgba(255,255,255,.5);--lv-surface-2:rgba(255,255,255,.62);--lv-glass:blur(18px) saturate(1.5);
  --lv-shadow:0 18px 50px rgba(196,72,124,.14);
  --lv-accent:#e6457b;--lv-accent-2:#ff9dbf;--lv-accent-ink:#fff;--lv-accent-text:#c42f63;--lv-heart:#ec4b80;
  --lv-flip-card:rgba(255,255,255,.4);--lv-flip-top:rgba(255,255,255,.58);--lv-flip-edge:rgba(214,132,168,.35);
  --lv-flip-ink:#8c2a57;--lv-flip-glow:0 .03em .12em rgba(230,69,123,.16);--lv-flip-split:rgba(214,104,150,.22);
  --lv-flip-outline:1px solid rgba(255,255,255,.85);--lv-flip-shadow:0 .1em .4em rgba(198,80,132,.16),inset 0 1px 0 #fff;
  --lv-half:transparent;--lv-half-top:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  --lv-flap:#fdeef4;--lv-flap-top:#fef4f8;
  --lv-head-style:normal;--lv-head-weight:800;--lv-head-spacing:-.02em;--lv-head-fill:none;--lv-head-filter:none
}

/* sunset: slow aurora orange -> magenta -> violet, glowing glass */
[data-love-theme=sunset]{
  --lv-scheme:dark;--lv-base:#3a0f45;
  --lv-bg:radial-gradient(ellipse 120% 70% at 50% 115%,rgba(36,6,52,.7) 0,transparent 70%),linear-gradient(125deg,#ff9a3c 0%,#ff5e62 18%,#e83e8c 36%,#a03bd8 54%,#5b3be0 70%,#e8508a 86%,#ff9a3c 100%);
  --lv-bg-size:100% 100%,320% 320%;--lv-bg-anim:love-aurora 38s ease-in-out infinite alternate;
  --lv-text:#fff;--lv-muted:rgba(255,236,244,.82);--lv-line:rgba(255,255,255,.26);
  --lv-surface:rgba(46,10,58,.3);--lv-surface-2:rgba(255,255,255,.14);--lv-glass:blur(20px) saturate(1.3);
  --lv-shadow:0 20px 60px rgba(60,6,60,.3);
  --lv-accent:#ffb36b;--lv-accent-2:#ff5fa2;--lv-accent-ink:#3d0b2c;--lv-accent-text:#ffd0a3;--lv-heart:#ffe3ec;
  --lv-flip-card:linear-gradient(180deg,#3a1046,#2c0a3a);--lv-flip-top:linear-gradient(180deg,#4a1653,#3d1048);--lv-flip-edge:#1c0626;
  --lv-flip-ink:#fff;--lv-flip-glow:0 0 .14em rgba(255,186,140,.65),0 0 .45em rgba(255,94,160,.35);--lv-flip-split:#1c0626;
  --lv-flip-outline:1px solid rgba(255,190,220,.22);--lv-flip-shadow:0 .14em .5em rgba(60,0,50,.35),0 0 .7em rgba(255,120,140,.25);
  --lv-half:var(--lv-flip-card);--lv-half-top:var(--lv-flip-top);--lv-flap:var(--lv-flip-card);--lv-flap-top:var(--lv-flip-top);
  --lv-head-filter:drop-shadow(0 2px 18px rgba(255,120,120,.45))
}

/* starry: deep navy night, glowing ink */
[data-love-theme=starry]{
  --lv-scheme:dark;--lv-base:#060a1d;
  --lv-bg:radial-gradient(ellipse 80% 55% at 50% -5%,#1e2c66 0,transparent 70%),radial-gradient(ellipse 60% 45% at 90% 100%,#2b1c5c 0,transparent 70%),radial-gradient(ellipse 50% 40% at 0% 70%,#10224e 0,transparent 70%),linear-gradient(180deg,#0a1132 0%,#050817 100%);
  --lv-text:#ecf1ff;--lv-muted:#a3b2d9;--lv-line:rgba(150,172,255,.18);
  --lv-surface:rgba(14,22,56,.66);--lv-surface-2:rgba(255,255,255,.06);--lv-glass:blur(14px);
  --lv-shadow:0 20px 60px rgba(0,0,0,.45);
  --lv-accent:#ffd27d;--lv-accent-2:#ff9ec4;--lv-accent-ink:#1a1430;--lv-accent-text:#ffd27d;--lv-heart:#ff8fb8;
  --lv-flip-card:#0d1538;--lv-flip-top:#111b45;--lv-flip-edge:#03051a;
  --lv-flip-ink:#f5f8ff;--lv-flip-glow:0 0 .04em #fff,0 0 .16em rgba(150,190,255,.6),0 0 .45em rgba(120,150,255,.25);--lv-flip-split:#050a22;
  --lv-flip-outline:1px solid rgba(150,175,255,.2);--lv-flip-shadow:0 .14em .5em rgba(0,0,0,.5),0 0 .5em rgba(110,140,255,.14);
  --lv-half:var(--lv-flip-card);--lv-half-top:var(--lv-flip-top);--lv-flap:var(--lv-flip-card);--lv-flap-top:var(--lv-flip-top);
  --lv-head-filter:drop-shadow(0 0 14px rgba(150,190,255,.45))
}

/* film: vintage cream, grain, Polaroid photo, serif italic title */
[data-love-theme=film]{
  --lv-scheme:light;--lv-base:#eee4cf;
  --lv-bg:radial-gradient(ellipse 75% 65% at 50% 38%,#f9f2e3 0,#eee3cc 62%,#dccdae 100%);
  --lv-grain:.5;--lv-vignette:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 55%,rgba(92,64,30,.22) 100%);
  --lv-text:#3a2b1c;--lv-muted:#7b6650;--lv-line:#d6c6a6;
  --lv-surface:#faf4e6;--lv-surface-2:#f1e7d2;--lv-glass:none;
  --lv-shadow:0 14px 34px rgba(92,64,30,.14);
  --lv-accent:#a84a35;--lv-accent-2:#d48b55;--lv-accent-ink:#fff8ec;--lv-accent-text:#8e3a27;--lv-heart:#b2452f;
  --lv-flip-card:#f8f1e1;--lv-flip-top:#fdf8ee;--lv-flip-edge:#c9b68f;
  --lv-flip-ink:#2f2215;--lv-flip-glow:none;--lv-flip-split:rgba(110,80,40,.28);
  --lv-flip-outline:1px solid rgba(160,130,85,.25);--lv-flip-shadow:0 .1em .32em rgba(92,64,30,.18);
  --lv-half:var(--lv-flip-card);--lv-half-top:var(--lv-flip-top);--lv-flap:var(--lv-flip-card);--lv-flap-top:var(--lv-flip-top);
  --lv-head-style:italic;--lv-head-weight:400;--lv-head-spacing:0
}

/* y2k: hot pink neon, chrome cards, sparkle hearts */
[data-love-theme=y2k]{
  --lv-scheme:dark;--lv-base:#2a0638;
  --lv-bg:radial-gradient(circle at 18% 18%,rgba(255,79,216,.75) 0,transparent 38%),radial-gradient(circle at 84% 26%,rgba(122,92,255,.7) 0,transparent 42%),radial-gradient(ellipse 70% 50% at 50% 105%,rgba(255,46,147,.75) 0,transparent 70%),linear-gradient(140deg,#3a0750 0%,#5c0c6e 48%,#22093f 100%);
  --lv-text:#fff;--lv-muted:#ffc9ef;--lv-line:rgba(255,160,232,.38);
  --lv-surface:rgba(48,6,66,.5);--lv-surface-2:rgba(255,255,255,.12);--lv-glass:blur(16px) saturate(1.4);
  --lv-shadow:0 0 0 1px rgba(255,120,220,.12),0 18px 50px rgba(255,46,170,.22);
  --lv-accent:#ff3ea5;--lv-accent-2:#c77dff;--lv-accent-ink:#fff;--lv-accent-text:#ff9bd6;--lv-heart:#ff5cb8;
  --lv-flip-card:linear-gradient(180deg,#b8bdcc 0%,#e9ecf3 45%,#ffffff 100%);--lv-flip-top:linear-gradient(180deg,#ffffff 0%,#eef0f6 55%,#c9cede 100%);--lv-flip-edge:#8f879f;
  --lv-flip-ink:#6d0f6a;--lv-flip-glow:0 .02em 0 #fff,0 -.01em 0 rgba(80,0,80,.25);--lv-flip-split:#7e6f8f;
  --lv-flip-outline:1px solid rgba(255,255,255,.9);--lv-flip-shadow:0 0 .25em rgba(255,62,165,.7),0 0 .7em rgba(199,125,255,.35),0 .1em .3em rgba(0,0,0,.35);
  --lv-half:var(--lv-flip-card);--lv-half-top:var(--lv-flip-top);--lv-flap:var(--lv-flip-card);--lv-flap-top:var(--lv-flip-top);
  --lv-head-style:italic;--lv-head-weight:900;--lv-head-spacing:-.01em;
  --lv-head-fill:linear-gradient(180deg,#fff 0%,#ffe1f4 42%,#ff8ad3 52%,#ffffff 78%,#ffd6f1 100%);
  --lv-head-filter:drop-shadow(0 0 10px rgba(255,62,165,.85)) drop-shadow(0 2px 0 rgba(90,0,90,.5))
}

/* minimal: monochrome, follows the site's light/dark mode */
[data-love-theme=minimal]{
  --lv-scheme:dark;--lv-base:#0b0b0b;
  --lv-bg:radial-gradient(ellipse 70% 50% at 50% 0%,#1a1a1a 0,transparent 70%),linear-gradient(#0b0b0b,#0b0b0b);
  --lv-text:#f4f4f4;--lv-muted:#9b9b9b;--lv-line:#2a2a2a;
  --lv-surface:#121212;--lv-surface-2:#1b1b1b;--lv-glass:none;
  --lv-shadow:0 18px 50px rgba(0,0,0,.4);
  --lv-accent:#f4f4f4;--lv-accent-2:#9b9b9b;--lv-accent-ink:#0b0b0b;--lv-accent-text:#f4f4f4;--lv-heart:#f4f4f4;
  --lv-flip-card:#151515;--lv-flip-top:#1a1a1a;--lv-flip-edge:#000;
  --lv-flip-ink:#fafafa;--lv-flip-glow:none;--lv-flip-split:#0b0b0b;
  --lv-flip-outline:1px solid #262626;--lv-flip-shadow:0 .1em .3em rgba(0,0,0,.5);
  --lv-half:var(--lv-flip-card);--lv-half-top:var(--lv-flip-top);--lv-flap:var(--lv-flip-card);--lv-flap-top:var(--lv-flip-top);
  --lv-head-weight:400;--lv-head-spacing:.01em
}
/* Personalize palettes are fixed: Settings' light/dark classes must not recolor
   the active love theme or its preview (including Minimal's black palette). */

/* ---- Mapping: theme variables -> page (love page content only) ---- */
html[data-love-theme]{
  background:var(--lv-base);color-scheme:var(--lv-scheme);
  --lv-banner:var(--lv-accent-text);--lv-ornament:var(--lv-accent-2);
  --lv-caption:var(--lv-accent-text);--lv-person-2:var(--lv-accent-2);
  --lv-total-border:var(--lv-line);--lv-total-label:var(--lv-muted);
  --lv-time-bg:var(--lv-surface);--lv-time-bg-secondary:var(--lv-surface-2)
}
/* Outrank Settings' html.palette-alt:root body background without changing
   the shared navigation or Settings palette. The fixed love-bg paints the page. */
html[data-love-theme] body[data-tool=love]{background:transparent}
html[data-love-theme] body :is(main,.site-footer){--bg:var(--lv-base);--surface:var(--lv-surface);--surface-2:var(--lv-surface-2);--text:var(--lv-text);--muted:var(--lv-muted);--line:var(--lv-line);--accent:var(--lv-accent);--accent-ink:var(--lv-accent-ink);--accent-text:var(--lv-accent-text);--shadow:var(--lv-shadow);--card:var(--lv-surface);--glow:transparent;color:var(--text);color-scheme:var(--lv-scheme)}
html[data-love-theme] body .love-stage{--love:var(--lv-accent);--love-2:var(--lv-accent-2);--love-soft:color-mix(in srgb,var(--lv-accent) 14%,transparent)}

/* Fixed background layer (gradient + particle canvas) and the film grain overlay; neither catches clicks */
.love-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--lv-bg);background-size:var(--lv-bg-size,cover);animation:var(--lv-bg-anim,none)}
.love-bg::after{content:"";position:absolute;inset:0;background:var(--lv-vignette,none)}
.love-particles{position:absolute;inset:0;width:100%;height:100%}
.love-grain{position:fixed;inset:-50%;z-index:45;width:200%;height:200%;pointer-events:none;opacity:var(--lv-grain,0);mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:love-grain 1.2s steps(5) infinite}
html:not([data-love-theme=film]) .love-grain{display:none}
@keyframes love-aurora{0%{background-position:0 0,0% 30%}50%{background-position:0 0,70% 60%}100%{background-position:0 0,100% 40%}}
@keyframes love-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Title */
html[data-love-theme] body .love-title{color:var(--lv-text);font-weight:var(--lv-head-weight);letter-spacing:var(--lv-head-spacing);filter:var(--lv-head-filter)}
html[data-love-theme] body .love-title>span:not(.love-heart){font-style:var(--lv-head-style);background:var(--lv-head-fill);-webkit-background-clip:text;background-clip:text}
html[data-love-theme=y2k] body .love-title>span:not(.love-heart){-webkit-text-fill-color:transparent;padding:0 .06em}
html[data-love-theme] body .love-heart{color:var(--lv-heart)}
html[data-love-theme=starry] body .love-heart{text-shadow:0 0 12px rgba(255,143,184,.8)}
html[data-love-theme=y2k] body .love-heart{text-shadow:0 0 14px #ff3ea5,0 0 2px #fff}
html[data-love-theme=film] body #love-since{font-style:italic}

/* Flip cards */
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-board{--flip-card:var(--lv-flip-card);--flip-card-top:var(--lv-flip-top);--flip-edge:var(--lv-flip-edge);color:var(--flip-ink,var(--lv-flip-ink));text-shadow:var(--lv-flip-glow)}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-card{outline:var(--lv-flip-outline);outline-offset:-1px;box-shadow:var(--lv-flip-shadow);backdrop-filter:var(--lv-glass);-webkit-backdrop-filter:var(--lv-glass)}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-half{background:var(--lv-half)}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-half.top{background:var(--lv-half-top)}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-half.flap{background:var(--lv-flap)}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-half.flap.top{background:var(--lv-flap-top)}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-card::after{background:var(--lv-flip-split);opacity:1}
html[data-love-theme] body .tool-hero>.tool-card.love-stage .flip-label{text-shadow:none}
html[data-love-theme] body .tool-hero>.tool-card.love-stage>output.tool-display{color:var(--flip-ink,var(--lv-flip-ink));text-shadow:var(--lv-flip-glow)}

/* Surfaces */
html[data-love-theme] body .tool-hero>.tool-card.love-stage>:is(.love-next,.cd-panel),html[data-love-theme] body .love-stage .love-action{backdrop-filter:var(--lv-glass);-webkit-backdrop-filter:var(--lv-glass)}
html[data-love-theme] body .love-panel .field input::placeholder{color:var(--muted);opacity:.8}
html[data-love-theme=film] body .tool-hero>.tool-card.love-stage>:is(.love-next,.cd-panel){border-radius:6px;box-shadow:0 1px 0 #fff inset,var(--lv-shadow)}
html[data-love-theme=film] body .love-next-name{font-style:italic;font-weight:400}
html[data-love-theme=y2k] body .tool-hero>.tool-card.love-stage>.love-next{border-color:rgba(255,140,220,.5)}
html[data-love-theme=y2k] body .love-progress span{box-shadow:0 0 10px #ff3ea5}
html[data-love-theme=starry] body .love-progress span{box-shadow:0 0 10px rgba(255,210,125,.7)}
html[data-love-theme=minimal] body .tool-hero>.tool-card.love-stage>:is(.love-next,.cd-panel){box-shadow:none}

/* Photo frames */
html[data-love-theme=sunset] .love-avatar{background:linear-gradient(135deg,#ffb36b,#ff5fa2,#a855f7);box-shadow:0 0 34px rgba(255,120,140,.55)}
html[data-love-theme=starry] .love-avatar{padding:3px;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(150,180,255,.5));box-shadow:0 0 24px rgba(140,175,255,.6),0 0 70px rgba(110,140,255,.25)}
html[data-love-theme=y2k] .love-avatar{background:conic-gradient(from 30deg,#fff,#c9cede,#ff8ad3,#fff,#b8bdcc,#c77dff,#fff);box-shadow:0 0 22px rgba(255,62,165,.75)}
html[data-love-theme=minimal] .love-avatar{padding:3px;background:var(--lv-text);box-shadow:none}
html[data-love-theme=film] .love-avatar{width:clamp(96px,12.5vh,124px);aspect-ratio:auto;padding:7px 7px 24px;border-radius:2px;background:#fffdf6;box-shadow:0 1px 2px rgba(60,40,10,.2),0 12px 28px rgba(92,64,30,.22);transform:rotate(-3deg)}
html[data-love-theme=film] .love-avatar img{aspect-ratio:1;height:auto;border:0;border-radius:0;filter:sepia(.25) contrast(1.05) saturate(.9)}

/* ---- Theme picker (built by love.js inside the Personalize panel) ---- */
.love-themes{margin:0 0 20px;min-width:0}
.love-theme-row{display:flex;gap:12px;margin:4px -7px 0;padding:8px 7px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 7px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.love-theme{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:78px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.love-theme-preview{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:72px;height:100px;overflow:hidden;border-radius:16px;background:var(--lv-bg);background-color:var(--lv-base);background-size:var(--lv-bg-size,cover);box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(0,0,0,.12);transition:transform .18s,box-shadow .18s}
.love-theme-heart{color:var(--lv-heart);font-size:13px;line-height:1}
.love-theme-card{position:relative;padding:3px 6px;border-radius:5px;background:var(--lv-flip-card);color:var(--lv-flip-ink);font-size:22px;font-weight:700;line-height:1.15;text-shadow:var(--lv-flip-glow);outline:var(--lv-flip-outline);outline-offset:-1px;box-shadow:var(--lv-flip-shadow);overflow:hidden}
.love-theme-card::before{content:"";position:absolute;inset:0 0 50%;background:var(--lv-flip-top)}
.love-theme-card::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--lv-flip-split)}
.love-theme-card>span{position:relative;z-index:1}
.love-theme-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.love-theme:hover .love-theme-preview{transform:translateY(-2px)}
.love-theme[aria-checked=true]{color:var(--text)}
.love-theme[aria-checked=true] .love-theme-preview{outline:2.5px solid var(--love);outline-offset:3px}
.love-theme:focus-visible{outline:none}
.love-theme:focus-visible .love-theme-preview{outline:2.5px dashed var(--text);outline-offset:3px}
html body .love-stage .love-action.love-theme-quick{flex:0 0 auto;width:44px;padding:0}
.love-theme-quick svg{width:18px;height:18px}

/* "From photo" tile: tiny round photo above the sample digits */
.love-theme-photo{width:24px;height:24px;border:2px solid var(--lv-flip-card,#fff);border-radius:50%;background:center/cover no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* Photo as background (opt-in): blurred photo under a theme-tinted veil, particles stay on top */
.love-photo-bg{position:absolute;inset:0;overflow:hidden;display:none}
html.love-photo-bg-on .love-photo-bg{display:block}
.love-photo-bg::before{content:"";position:absolute;inset:0;background:var(--lv-photo) center/cover no-repeat;filter:blur(40px) saturate(1.2);transform:scale(1.25)}
.love-photo-bg::after{content:"";position:absolute;inset:0;background:var(--lv-bg);background-color:var(--lv-base);background-size:var(--lv-bg-size,cover);animation:var(--lv-bg-anim,none);opacity:var(--lv-photo-veil,.7)}
html[data-love-theme=starry],html[data-love-theme=minimal],html[data-love-theme=y2k]{--lv-photo-veil:.74}

/* Switch row in the Personalize panel */
.love-switch{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:10px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;user-select:none}
.love-switch[hidden]{display:none}
.love-switch input{position:absolute;width:1px;height:1px;opacity:0}
.love-switch-track{position:relative;flex:0 0 auto;width:36px;height:20px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .18s}
.love-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.love-switch input:checked+.love-switch-track{background:var(--love);box-shadow:none}
.love-switch input:checked+.love-switch-track::after{background:var(--lv-accent-ink,#fff);transform:translateX(16px)}
.love-switch input:focus-visible+.love-switch-track{outline:2px solid var(--love);outline-offset:2px}
[dir=rtl] .love-switch input:checked+.love-switch-track::after{transform:translateX(-16px)}
[dir=rtl] .love-switch-track::after{left:auto;right:3px}

/* Download image + 1:1 / 9:16 choice, one pill */
.love-download{display:inline-flex;align-items:center;gap:2px;padding:0 5px 0 0;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);transition:border-color .18s;backdrop-filter:var(--lv-glass);-webkit-backdrop-filter:var(--lv-glass)}
[dir=rtl] .love-download{padding:0 0 0 5px}
.love-download:hover,.love-download:focus-within{border-color:var(--love)}
html body .love-stage .love-download .love-action{border:0;background:none;padding-inline-end:12px;backdrop-filter:none;-webkit-backdrop-filter:none}
html body .love-stage .love-download .love-action:hover{transform:none}
.love-format{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.love-format button{min-width:40px;padding:5px 8px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:background .18s,color .18s}
.love-format button[aria-checked=true]{background:var(--love);color:var(--lv-accent-ink,#fff)}
.love-format button:focus-visible{outline:2px solid var(--love);outline-offset:1px}

@media(max-width:620px){
  .love-download{flex:1 1 100%;justify-content:space-between}
  html body .love-stage .love-download .love-action{flex:1 1 auto}
  .love-theme{width:70px}
  .love-theme-preview{width:64px;height:90px}
}
@media(prefers-reduced-motion:reduce){
  .love-bg,.love-grain{animation:none}
  .love-theme-preview,.love-switch-track,.love-switch-track::after,.love-format button{transition:none}
}

/* Layout and palette matched to the supplied In Love reference. */
html[data-love-theme=sakura]{
  --lv-base:#fdeef3;
  --lv-bg:radial-gradient(ellipse 60% 50% at 12% 8%,#ffd3e3 0,transparent 70%),radial-gradient(ellipse 50% 45% at 88% 18%,#ffe8d9 0,transparent 70%),radial-gradient(ellipse 60% 55% at 78% 92%,#f6c3d9 0,transparent 70%),radial-gradient(ellipse 50% 50% at 8% 88%,#fde0ec 0,transparent 70%),linear-gradient(165deg,#fff6f9 0%,#fde6ef 55%,#f9d6e4 100%);
  --lv-text:#243746;--lv-muted:#674267;--lv-accent:#ff4081;--lv-accent-2:#42a5f5;
  --lv-accent-text:#7616aa;--lv-heart:#e8233d;--lv-line:#ebcfe4;
  --lv-surface:#fff9fc;--lv-surface-2:#fceaf5;
  --lv-banner:#ff0864;--lv-ornament:green;--lv-caption:#c51bea;
  --lv-person-2:#2196f3;--lv-total-border:#26d5ec;--lv-total-label:#008b95;
  --lv-time-bg:linear-gradient(145deg,#fff,#f9eef9);
  --lv-time-bg-secondary:linear-gradient(145deg,#fff,#e1f5fe);
}
html body .love-stage,html body .love-stage *{font-family:Arial,"Segoe UI",sans-serif!important}
html body .tool-hero>.tool-card.love-stage:has(>output.tool-display){justify-content:flex-start;padding-top:14px}
html body .tool-hero>.tool-card.love-stage>.love-head{max-width:700px;margin-bottom:12px}
.love-banner{margin:0 0 12px;color:var(--lv-banner);font-size:clamp(18px,3.8vw,28px);font-weight:400;line-height:1.35;text-align:center}
html body .love-stage #love-since{margin:0;color:var(--lv-text);font-size:16px;line-height:1.5;font-style:normal}
.love-ornament{margin:18px 0 24px;color:var(--lv-ornament);font-size:24px;line-height:1.2;white-space:nowrap}
html body .love-stage .love-caption{margin:0 0 14px;color:var(--lv-caption);font-size:28px;font-weight:700;line-height:1.25}
html body .love-stage .love-couple{width:320px;max-width:100%;grid-template-columns:minmax(0,100px) 80px minmax(0,100px);justify-content:center;gap:20px}
html body .love-stage .love-person{gap:12px;font-size:14px;font-weight:400}
html body .love-stage .love-person:first-child>span{color:var(--lv-accent)}
html body .love-stage .love-person:last-child>span{color:var(--lv-person-2)}
html body .love-couple .love-avatar{width:100px;max-width:100%;padding:0;border:3px solid var(--lv-accent);background:transparent;border-radius:50%;box-shadow:none;transform:none}
html body .love-couple .love-person:last-child .love-avatar{border-color:var(--lv-accent-2)}
html body .love-couple .love-avatar img{border:0;border-radius:50%;aspect-ratio:1;filter:none}
.love-avatar-placeholder{inset:0;background:var(--lv-surface-2)}
html body .love-couple .love-heart{width:80px;margin-top:-28px;animation:none;line-height:0}
.love-heart-image{display:block;width:80px;height:80px;object-fit:contain}
html body .tool-hero>.tool-card.love-stage>.love-memory{width:100%;max-width:640px}
html body .love-stage .love-day-total{width:400px;min-width:0;max-width:100%;box-sizing:border-box;min-height:150px;justify-content:center;gap:16px;padding:25px 16px 16px;border:2px solid var(--lv-total-border);border-radius:16px;background:transparent;box-shadow:0 6px 12px #00000026}
html body .love-stage .love-day-total strong{color:var(--lv-accent-text);font-size:48px;font-weight:700;letter-spacing:0;line-height:1.2}
html body .love-stage .love-day-total span{color:var(--lv-total-label);font-size:18px;line-height:1.5}
.love-heartbeat{margin:16px 0 18px;color:var(--lv-caption);font-size:20px;white-space:nowrap}
html body .love-stage .love-memory-tagline{margin:0 0 10px;color:var(--lv-accent-text);font-size:18px;font-weight:500;line-height:1.5}
html body .love-stage .love-time-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
html body .love-stage .love-time-cell{min-height:94px;justify-content:center;gap:10px;box-sizing:border-box;padding:12px 4px;border:0;border-radius:12px;background:var(--lv-time-bg);box-shadow:0 4px 8px #0000001a}
html body .love-stage .love-time-cell:nth-child(n+4){background:var(--lv-time-bg-secondary)}
html body .love-stage .love-time-cell strong{color:var(--lv-accent-text);font-size:24px;font-weight:700}
html body .love-stage .love-time-cell span{color:var(--lv-text);font-size:20px;font-weight:700}
.love-quote{display:none}
@media(max-width:480px){
  html body .love-stage .love-banner{font-size:18px}
  html body .love-stage #love-since{font-size:14px}
  html body .love-stage .love-couple{gap:12px;grid-template-columns:minmax(0,90px) 72px minmax(0,90px)}
  html body .love-couple .love-avatar{width:90px}
  html body .love-couple .love-heart,.love-heart-image{width:72px;height:72px}
  html body .love-stage .love-time-grid{gap:5px}
  html body .love-stage .love-time-cell{min-height:78px;padding:10px 2px;gap:8px}
  html body .love-stage .love-time-cell strong{font-size:20px}
  html body .love-stage .love-time-cell span{font-size:12px}
  html body .love-stage .love-memory-tagline{font-size:15px}
  .love-heartbeat{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.love-heart-image{display:none}.love-couple .love-heart::after{content:'❤️';font-size:60px;line-height:80px}}
html body[data-tool=love] .top-popout{display:none!important}
html body.love-fullscreen{padding:0}
html body.love-fullscreen .site-header,html body.love-fullscreen .tool-guide,
html body.love-fullscreen .tool-content,html body.love-fullscreen .site-footer{display:none!important}
html body.love-fullscreen main{padding-top:0}
html body.love-fullscreen .tool-hero{padding-top:58px}