:root{color-scheme:dark;--night:#091329;--cream:#f6ead2;--gold:#f1c574;--muted:#a9adc6}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--cream);font-family:Georgia,'Times New Roman',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ffe0a0;outline-offset:6px}button{color:inherit}button:hover{filter:brightness(1.1)}.page{position:relative;isolation:isolate;width:min(100%,724px);margin:auto;overflow:hidden;container-type:inline-size;background:radial-gradient(ellipse at 20% 32%,#11203b55,transparent 35%),radial-gradient(ellipse at 80% 67%,#11203b55,transparent 35%),#091329;min-height:100vh}.page:before{content:'';position:absolute;z-index:-1;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236f7c91' opacity='.12' filter='url(%23n)' d='M0 0h180v210H0z'/%3E%3C/svg%3E")}.header{height:17cqw;display:flex;align-items:flex-start;justify-content:space-between;padding:1.6cqw 8.5cqw 0 16cqw;gap:10cqw}.brand{width:40cqw;flex-shrink:0}.brand img{display:block;width:100%;height:auto;mix-blend-mode:lighten}.account{padding:1.1cqw 0 0;display:flex;align-items:center;gap:3.5cqw;background:none;border:0;font-size:3.2cqw;white-space:nowrap}.avatar{display:grid;place-items:center;width:9cqw;height:9cqw;border:2px solid #2a385e;border-radius:50%}.avatar svg{width:5cqw;fill:#f8e7c8}.pine{position:absolute;pointer-events:none;z-index:2;mix-blend-mode:lighten}.pine-top{top:0;left:0;width:14cqw}.pine-bottom{bottom:0;right:0;width:20cqw}.welcome{text-align:center;padding:0 6.2cqw}h1{font-size:6cqw;line-height:1.15;margin:1cqw 0 1.2cqw;font-weight:700;color:#f3f0e9}.progress-copy{font-size:3.9cqw;margin:0}.progress{height:3cqw;background:#233151;border-radius:20px;margin:3cqw 7cqw 3.6cqw;overflow:hidden}.progress span{display:block;width:69.2308%;height:100%;border-radius:inherit;background:linear-gradient(#f9d990,#d6a052);box-shadow:inset 0 0 0 1px #ffe0a044;transition:width .4s}.notification{display:flex;text-align:left;align-items:center;gap:3.5cqw;background:#1b2743b0;border:2px solid #2a3659;border-radius:2.4cqw;padding:2.5cqw 3.7cqw;margin:0 0 3.5cqw;font-family:'Segoe UI',Arial,sans-serif;min-height:16.5cqw}.notification svg{width:6.3cqw;flex-shrink:0;fill:#8d96bd}.notification h2{font-size:3.2cqw;color:#f3f0f2;margin:0 0 .4cqw;line-height:1.2}.notification p{font-size:3cqw;color:var(--muted);margin:0;line-height:1.25}.gold-button{background:linear-gradient(110deg,#e5ae53,#ffe49c 45%,#f2ca7b 72%,#cb8b36);border:1px solid #f8d992;box-shadow:inset 0 1px 2px #fff4c8a0,inset 0 -5px 10px #ad6c2544;border-radius:100px;color:#17130b;font-weight:bold}.today{display:block;width:95%;margin:0 auto;padding:2.1cqw 1cqw 2.5cqw;font-size:4.3cqw;line-height:1.25}.section-heading{margin:3.7cqw 8.5cqw 3.5cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw}.section-heading h2{font-size:7.4cqw;line-height:.82;font-style:italic;font-weight:400;white-space:nowrap;text-align:center;margin:0;color:#f1d49b}.section-heading h2 span{display:inline-block;font-size:6.4cqw;font-style:normal;margin:0 2.3cqw}.line{width:13cqw;height:1px;background:#cbbba289;flex-shrink:0}.gift-list{position:relative;padding-top:1.8cqw}.gift-row{position:relative;height:29.5cqw}.gift-row:nth-child(odd){padding-left:8.5cqw}.gift-row:nth-child(even){padding-left:50cqw}.gift{position:relative;z-index:1;display:block;width:38cqw;height:35cqw;border:0;background:none;padding:0;transition:transform .25s;filter:drop-shadow(0 6px 12px #0003)}.gift:hover{transform:translateY(-5px) rotate(-2deg);filter:drop-shadow(0 0 18px #efbb5f30)}.gift img{width:100%;height:100%;object-fit:contain;display:block}.gift-row:nth-child(3) .gift{transform:rotate(6deg)}.gift-row:nth-child(6) .gift{width:44cqw;margin-left:-4cqw;transform:rotate(5deg)}.gift-check{display:grid;place-items:center;position:absolute;right:-.4cqw;top:1cqw;width:7cqw;height:7cqw;border-radius:50%;background:linear-gradient(125deg,#ffdf8c,#e7ac43);color:#101b2b;box-shadow:0 1px 3px #0004;font:bold 5cqw/1 Arial,sans-serif;border:1px solid #f5d08a}.is-locked img{opacity:1}.lock{font:2.6cqw 'Segoe UI',sans-serif;position:absolute;bottom:0;left:10%;right:10%;padding:.8cqw;border-radius:12px;background:#14213ae8;color:#e5d3af}.thread{position:absolute;top:0;left:0;width:100%;height:59cqw;overflow:visible;pointer-events:none}.thread path{fill:none;stroke-linecap:round}.thread .glow{stroke:#eaa644;stroke-width:8;filter:blur(5px);opacity:.65}.thread .gold{stroke:#f9b95c;stroke-width:4.5}.thread .core{stroke:#fff9d7;stroke-width:1.8}.sparkle{position:absolute;color:#f5c877;text-shadow:0 0 12px #f6bb5d88;pointer-events:none}.sparkle.large{font-size:4.5cqw}.sparkle.small{font-size:1.4cqw}.more{position:relative;display:block;border:0;background:none;margin:18cqw auto 0;padding:5cqw 0 7.2cqw;font-size:4.3cqw;color:#e9d5af;z-index:3}.more span{margin-left:1cqw}.gift-row:last-child:after{content:'';position:absolute;left:28%;top:30cqw;width:26cqw;height:20cqw;border-left:3px solid #ffdda0;border-top:3px solid #ffdda0;border-radius:60% 0 0 50%;transform:rotate(12deg);filter:drop-shadow(0 0 6px #ffb74d)}dialog{width:min(90vw,470px);padding:32px;background:#14203a;color:var(--cream);border:1px solid #435070;border-radius:22px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#020817ce;backdrop-filter:blur(7px)}dialog h2{font-size:32px;font-weight:400;line-height:1.1;margin:16px 0}.dialog-date{color:var(--gold);margin:0}.task-copy{font:16px/1.6 'Segoe UI',sans-serif}.demo-label{font:12px/1.5 'Segoe UI',sans-serif;color:#a9adc6}.complete{width:100%;padding:14px 10px;font-size:16px;margin-top:12px}.close{position:absolute;right:16px;top:12px;background:none;border:0;font:28px Arial;color:var(--cream)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;background:#263451;color:var(--cream);border:1px solid #58617b;padding:16px 22px;border-radius:12px;font:14px/1.5 'Segoe UI',sans-serif;z-index:5;visibility:hidden}.toast.visible{visibility:visible}[hidden]{display:none!important}@media(min-width:1000px){body{background:radial-gradient(ellipse at 50% 25%,#172640,#060d1c 70%)}.page{box-shadow:0 0 110px #02071577}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Scattered stars brighten independently, with a short luminous peak. */
.sparkle {
  animation: star-twinkle var(--twinkle-duration, 4s) ease-in-out var(--twinkle-delay, 0s) infinite;
  transform-origin: center;
}
@keyframes star-twinkle {
  0%, 100% { opacity: .12; transform: rotate(var(--star-angle, 0deg)) scale(.65); text-shadow: 0 0 2px #f6bb5d33; }
  36% { opacity: .45; transform: rotate(var(--star-angle, 0deg)) scale(.9); text-shadow: 0 0 6px #f6bb5d66; }
  52% { opacity: 1; transform: rotate(var(--star-angle, 0deg)) scale(1.3); text-shadow: 0 0 7px #fff0c9, 0 0 18px #ffc45c, 0 0 30px #eaa64499; }
  70% { opacity: .5; transform: rotate(var(--star-angle, 0deg)) scale(.95); text-shadow: 0 0 8px #f6bb5d88; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
}

/* One continuous thread behind the entire calendar. */
.gift-list > .thread { top: 1.8cqw; height: calc(100% - 1.8cqw); }
.gift-row:last-child:after { content: none; }
/* The SVG is decorative and must not affect alternating gift positions. */
.gift-row:nth-of-type(odd) { padding-left: 8.5cqw; }
.gift-row:nth-of-type(even) { padding-left: 50cqw; }
.gift-row:nth-child(3) .gift { transform: none; }
.gift-row:nth-child(6) .gift { width: 38cqw; margin-left: 0; transform: none; }
.gift-row:nth-of-type(3) .gift { transform: rotate(6deg); }
.gift-row:nth-of-type(6) .gift { width: 44cqw; margin-left: -4cqw; transform: rotate(5deg); }

/* Original lettering, curved underline and subtitle from the supplied logo. */
.header { position:relative; height:25cqw; padding: .8cqw 0 0; display:flex; justify-content:center; }
.brand { display:block; width:44cqw; flex-shrink:0; text-decoration:none; }
.brand img { display:block; width:100%; height:auto; mix-blend-mode:lighten; }
.header-actions { position:absolute; right:3cqw; top:3cqw; display:flex; gap:1.5cqw; }
.header-icon { display:grid; place-items:center; width:7cqw; height:7cqw; min-width:40px; min-height:40px; padding:0; border:1px solid #354363; border-radius:50%; background:#101c33aa; color:var(--cream); transition:background .2s,border-color .2s; }
.header-icon svg { width:55%; height:55%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.header-icon:hover { background:#263451; border-color:var(--gold); }
@media (max-width:480px) { .header-actions { top:1.5cqw; flex-direction:column; gap:1cqw; } .header-icon { width:10cqw; height:10cqw; min-width:36px; min-height:36px; } }

/* Natural proportions for the new kraft, blue and botanical packages. */
.gift-list .gift-row .gift {
  width: var(--gift-width, 36cqw);
  height: var(--gift-height, 34cqw);
  margin-left: 0;
  transform: rotate(var(--gift-tilt, 0deg));
}
.gift-list .gift-row .gift:hover { transform: translateY(-5px) rotate(0deg); }
.day-tag {
  position: absolute; right: 8%; bottom: 7%;
  display: grid; place-items: center;
  width: 6.8cqw; height: 8cqw;
  border-radius: .5cqw .5cqw 1cqw .5cqw;
  background: linear-gradient(120deg, #fff1d3, #e8cfa6);
  color: #31251d; font: 4.8cqw/1 Georgia, serif;
  box-shadow: 0 .4cqw 1cqw #0005;
  transform: rotate(12deg);
}
.day-tag:before { content: ''; position: absolute; top: .7cqw; left: 1cqw; width: .5cqw; height: .5cqw; border-radius: 50%; background: #795733; }
.gift .gift-check { top: 0; right: -1cqw; width: 6cqw; height: 6cqw; font-size: 4.3cqw; }
@media (prefers-reduced-motion: reduce) { .gift-list .gift-row .gift:hover { transform: rotate(var(--gift-tilt, 0deg)); } }

/* Leave room below the last gift for the end of the golden thread. */
.calendar { padding-bottom:36cqw; }

/* Decorative still lifes in the open spaces opposite each gift. */
.gift-decoration { position:absolute; object-fit:contain; pointer-events:none; user-select:none; transform:rotate(var(--decoration-angle,0deg)); filter:drop-shadow(0 .7cqw 1cqw #0006); }

/* More breathing room between the introductory blocks. */
.header { height:31cqw; padding-top:2.5cqw; }
.welcome h1 { margin:0 0 3cqw; line-height:1.2; }
.progress-copy { line-height:1.4; }
.progress { margin-top:4cqw; margin-bottom:6cqw; }
.notification { padding:3.6cqw 3.7cqw; margin-bottom:5cqw; }
.notification h2 { margin-bottom:1.2cqw; }
.notification p { line-height:1.45; }
.today { padding-top:2.8cqw; padding-bottom:3cqw; }
.section-heading { margin-top:7cqw; margin-bottom:5cqw; }

.gift, .today { text-decoration:none; }

.gift.is-open img { animation:box-reveal .4s ease-out; }
@keyframes box-reveal { from { opacity:.3; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .gift.is-open img { animation:none; } }
