/* Personal stationery, a musical keepsake, and a midnight gift palette. */
:root{--paper:#f6efdf;--ink:#403329;--paper-muted:#76624d;--foil:#a78248;--paper-edge:#b8996470}
.masthead{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:0}
.masthead .back{position:static;grid-column:1;grid-row:1}
.masthead .wordmark{grid-column:2;grid-row:1;justify-self:center}
.header-controls{grid-column:3;grid-row:1;display:flex;align-items:center}
.header-controls .sound{position:static}
.is-next{outline:2px solid #ffe0a0;outline-offset:5px;box-shadow:0 0 0 6px #edbe633d,0 0 32px #edbe6390,0 0 60px #edbe6330;animation:next-action-glow 1.8s ease-in-out infinite!important}
.is-next:after{content:'';display:block;position:absolute;inset:-9px;border:2px solid #ffdfa0;border-radius:inherit;pointer-events:none;animation:next-action-ring 1.8s ease-out infinite}
.button.is-next{background:linear-gradient(120deg,#fff2d7,#efd09b);border-color:#fff1d4;color:#172133;font-weight:500}
.button.is-next:before{animation-duration:2.4s}
.slider-wrap.is-next{background:#efc77324;outline-offset:3px}
.slider-wrap.is-next input::-webkit-slider-thumb{border:2px solid #fff4d8;box-shadow:0 0 0 7px #e7c99266,0 0 24px #ffe0a0cc}
.slider-wrap.is-next input::-moz-range-thumb{border:2px solid #fff4d8;box-shadow:0 0 0 7px #e7c99266,0 0 24px #ffe0a0cc}
.wind-key.is-next{border:2px solid #fff0cd;background:radial-gradient(circle,#455669,#14253d)}
.letter-candle.is-next{background:#e5b96626}
.voice-play.is-next{border:2px solid #fff0cd;background:linear-gradient(135deg,#fff7e7,#edca88)}
.flame-guide.is-next{border:2px solid #fff0cd;background:#efc77315}
#detail .button.is-next{background:linear-gradient(120deg,#80602d,#674818);color:#fff9ed;border:1px solid #9d7138;outline:2px solid #a27c3b;animation:paper-action-glow 1.8s ease-in-out infinite!important}
#detail .button.is-next:after{border-color:#a27c3b}
@keyframes next-action-glow{0%,100%{outline-color:#ffdfa0;box-shadow:0 0 0 5px #edbe633d,0 0 24px #edbe6380,0 0 45px #edbe6326}50%{outline-color:#fff4d6;box-shadow:0 0 0 8px #edbe6360,0 0 42px #edbe63b0,0 0 65px #edbe6345}}
@keyframes next-action-ring{0%{transform:scale(1);opacity:.85}85%,100%{transform:scale(1.1,1.2);opacity:0}}
@keyframes paper-action-glow{0%,100%{box-shadow:0 0 0 5px #a27c3b25,0 5px 20px #85602235}50%{box-shadow:0 0 0 8px #a27c3b40,0 5px 28px #85602265}}
@media(prefers-reduced-motion:reduce){.is-next,#detail .button.is-next{animation:none!important;outline-width:3px;box-shadow:0 0 0 6px #edbe6355,0 0 32px #edbe6380}.is-next:after{animation:none!important;opacity:.65}.button.is-next:before{animation:none!important}#detail .button.is-next{box-shadow:0 0 0 6px #a27c3b35,0 5px 20px #85602245}}

/* A keepsake, rather than a software dialog. The reading area alone scrolls. */
#detail{--white:var(--ink);--silver:var(--paper-muted);--gold:var(--foil);color-scheme:light;color:var(--ink);background:var(--paper);background-image:radial-gradient(ellipse at 20% 0%,#fffdf8,transparent 65%),repeating-linear-gradient(87deg,#88663004 0 1px,transparent 1px 4px);border:1px solid var(--paper-edge);border-radius:3px 3px 12px 3px;padding:72px 38px 26px;box-shadow:0 32px 100px #0008,inset 0 0 50px #ac844014;gap:18px;isolation:isolate}
#detail::before{content:'';position:absolute;inset:12px;border:1px solid var(--paper-edge);pointer-events:none;z-index:-1}
#detail::after{content:'';position:absolute;inset:19px;border:1px solid #b8996426;pointer-events:none;z-index:-1}
#detail[open]{animation:keepsake-arrive .7s cubic-bezier(.16,.8,.24,1) both}
#detail::backdrop{background:#020610b5;backdrop-filter:blur(12px);animation:backdrop-arrive .45s both}
#detail .close{color:var(--paper-muted);right:14px;top:9px;z-index:3}
#detail .detail-scroll{padding:0 5px 0 0;scrollbar-width:thin;scrollbar-color:#b79861 transparent}
#detail .eyebrow{color:var(--paper-muted);font-size:9px;letter-spacing:.15em;margin-bottom:18px}
#detail h2{color:var(--ink);font-size:clamp(32px,7vw,43px);line-height:1.08;margin-bottom:21px;max-width:95%;text-wrap:balance}
#detail-text{color:var(--ink);font:23px/1.55 Cormorant,Georgia,serif}
#detail .button{background:#efe2ca;color:#4c3a25;border:1px solid #a8875555;border-radius:2px;min-height:44px;font-size:11px;box-shadow:0 5px 18px #9c743414}
.stationery-decoration{position:absolute;left:0;right:0;top:0;pointer-events:none}
.botanical-mark{position:absolute;right:28px;top:30px;width:115px;height:135px;fill:none;stroke:var(--foil);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.2;transform:rotate(18deg)}
.keepsake-seal{position:absolute;left:38px;top:23px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#d9bd82,#b6985e 55%,#8a6834);box-shadow:0 2px 5px #52391429,inset 0 0 0 3px #e4cf9c66,inset 0 0 0 4px #7253224d;color:#5a4220;font:italic 17px/1 Cormorant}
#detail[data-kind=promise] .detail-scroll{padding-top:12px}
#detail[data-kind=promise] .botanical-mark{width:155px;height:180px;top:2px;right:17px;opacity:.17}
#detail[data-kind=promise] .flower-line{stroke-dasharray:260;animation:flower-etch 1.8s ease-out both}
.detail-signoff{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font:italic 21px/1.3 Cormorant;color:var(--paper-muted)}
.detail-signoff strong{font:italic 30px/1.1 Cormorant;color:var(--ink)}
.signature-flourish{font-size:24px;color:var(--foil);margin-top:5px}
#detail[data-kind=letter]{background-color:#f7f0df;background-image:linear-gradient(0deg,transparent 48%,#a7894815 49.7%,#fff8eb99 50%,transparent 50.8%),repeating-linear-gradient(90deg,#88663004 0 1px,transparent 1px 3px);border-radius:2px;transform-origin:50% 85%}
#detail[data-kind=letter][open]{animation:letter-unfold .85s cubic-bezier(.16,.8,.24,1) both}
#detail[data-kind=letter]::before{border:0;border-left:1px solid #b8996440;left:22px;inset-block:25px}
#detail[data-kind=letter]::after{inset:auto 0 0;height:11px;border:0;background:linear-gradient(135deg,transparent 33%,#d7c7aa55 34%,transparent 35%)}
#detail[data-kind=letter] .botanical-mark{width:75px;height:87px;top:19px;right:24px;opacity:.32}
#detail[data-kind=letter] .detail-salutation{font:italic 29px/1.3 Cormorant;color:var(--ink);margin:2px 0 22px}
#detail[data-kind=letter] .eyebrow{display:none}
#detail[data-kind=letter] h2{font-size:29px;font-style:italic;line-height:1.22}
#detail[data-kind=letter] .detail-scroll{animation:ink-arrive .9s .1s both}
.letter-paper{background-color:var(--paper);color:var(--ink);border:1px solid #b8996438}
.letter-ink p{color:var(--ink)}.paper-top{border-color:#a78b5540}.paper-seal{color:#947341}
.letter-paper:before,.letter-paper:after{content:'';position:absolute;inset:0;pointer-events:none;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .75s}
.letter-paper:before{background:linear-gradient(155deg,#eadbc1,#f7f0e1);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top;z-index:2}
.letter-paper:after{background:linear-gradient(35deg,#e4d3b5,#fff5e3);clip-path:polygon(0 28%,50% 61%,100% 28%,100% 100%,0 100%);z-index:1}
.letter-paper:not(.illuminated) .paper-seal{inset:calc(50% - 21px) auto auto calc(50% - 21px);width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ddc189,#9b783f);box-shadow:inset 0 0 0 4px #ffffff20,0 4px 10px #755c4233;font-size:27px;z-index:3;color:#654f2c}
.letter-paper.illuminated:before{transform:perspective(600px) rotateX(165deg);opacity:0}
.letter-paper.illuminated:after{transform:translateY(100%);opacity:0}

/* A polished musical medallion; motion follows the real audio play/pause events. */
.voice-jewel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;pointer-events:none;container-type:size}
.musicbox-stage.opened .prop-image{opacity:.13;filter:blur(3px);transform:scale(.88);transition:opacity 1s,filter 1s,transform 1s}
.musicbox-stage.opened .voice-jewel{visibility:visible;opacity:1;animation:jewel-arrive 1.1s cubic-bezier(.2,.8,.2,1) both}
.voice-disc{position:relative;flex:none;width:min(65%,240px);width:min(65cqw,68cqh,260px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 40deg,#536478,#e7edf2 12%,#718398 21%,#263c50 30%,#c7d3dc 45%,#f5f0e2 50%,#7c91a3 64%,#27394b 76%,#c1cfd8 89%,#536478);box-shadow:0 22px 45px #0005,inset 0 0 0 2px #edf5ff80,inset 0 0 0 7px #101b2744,0 0 55px #c7d3dc15;animation:disc-turn 28s linear infinite;animation-play-state:paused}
.playing .voice-disc{animation-play-state:running}
.disc-grooves{position:absolute;inset:9px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 3px,#10223638 3.5px 4px,#ffffff22 4.5px 5px);border:1px solid #e0e9ef55}
.disc-label{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 30% 20%,#354f69,#102336 70%);box-shadow:0 2px 12px #07121c88,inset 0 0 0 2px #d7c6a680,inset 0 0 0 6px #22364b;display:grid;place-items:center}
.disc-label svg{width:60%;height:60%;fill:none;stroke:#e2d4b9;stroke-width:1.6;filter:drop-shadow(0 0 3px #e6d8b555)}
.disc-glint{position:absolute;inset:0;border-radius:50%;background:linear-gradient(125deg,transparent 20%,#fff5 42%,transparent 54%);mix-blend-mode:screen}
.jewel-caption{font:italic 20px/1.2 Cormorant;color:var(--gold);position:relative;text-align:center}
.voice-ripples{position:absolute;inset:0;display:grid;place-items:center;transform:translateY(-18px)}
.voice-ripples i{position:absolute;width:min(65cqw,68cqh,260px);aspect-ratio:1;border:1px solid var(--gold);border-radius:50%;opacity:0;animation:voice-ripple 4.5s ease-out infinite;animation-play-state:paused}
.voice-ripples i:nth-child(2){animation-delay:1.5s}.voice-ripples i:nth-child(3){animation-delay:3s}
.playing .voice-ripples i{animation-play-state:running}
#voice-panel{padding:12px 16px 5px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#b4c7d912,#b4c7d903);box-shadow:0 12px 35px #0002}
#waveform i{border-radius:3px;background:linear-gradient(var(--gold),var(--silver));transition:transform .4s}
.voice-main .voice-play{background:linear-gradient(135deg,#f8f0e1,#c6d2de);box-shadow:0 3px 15px #0002;border-color:#d7c6a666}
.voice-links .text-button{font-size:9px;min-height:32px}


@keyframes keepsake-arrive{from{opacity:0;transform:translateY(25px) rotate(-3deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes letter-unfold{from{opacity:0;transform:perspective(1000px) rotateX(-14deg) translateY(35px)}to{opacity:1;transform:none}}
@keyframes ink-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes flower-etch{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes jewel-arrive{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
@keyframes disc-turn{to{transform:rotate(360deg)}}
@keyframes voice-ripple{0%{opacity:0;transform:scale(.9)}20%{opacity:.28}100%{opacity:0;transform:scale(1.45)}}
@media(max-width:600px){.masthead{margin-inline:14px}.masthead .wordmark{font-size:23px}.wordmark>span{font-size:5px;letter-spacing:.14em}#detail{padding:68px 28px 22px;width:calc(100% - 30px)}#detail h2{font-size:34px}#detail-text{font-size:22px}.keepsake-seal{left:28px}.detail-signoff{margin-top:21px}.jewel-caption{font-size:19px}.voice-jewel{gap:12px}}
@media(max-height:650px){#detail{padding-top:57px;gap:14px}#detail h2{font-size:30px;margin-bottom:16px}#detail-text{font-size:21px;line-height:1.45}.keepsake-seal{top:18px;width:29px;height:29px;font-size:15px}.detail-signoff{margin-top:17px}.detail-signoff strong{font-size:26px}#detail[data-kind=letter] .detail-salutation{font-size:26px;margin-bottom:17px}#voice-panel{padding:8px 12px 3px}.voice-jewel{gap:8px}.jewel-caption{font-size:16px}.voice-disc,.voice-ripples i{width:min(60cqw,62cqh,220px)}}
@media(max-width:350px){.masthead{margin-inline:8px}.masthead .wordmark{font-size:21px}.wordmark>span{letter-spacing:.08em}.voice-links{gap:10px}.voice-links .text-button{font-size:8px}}
@media(prefers-reduced-motion:reduce){#detail[open],#detail[data-kind=letter][open],#detail[data-kind=letter] .detail-scroll,.flower-line,.voice-disc,.voice-ripples i,.musicbox-stage.opened .voice-jewel{animation:none!important}.voice-ripples i{display:none}.voice-jewel.playing .voice-disc{box-shadow:0 0 0 4px #b9a78244,0 0 35px #b9a78244}.letter-paper:before,.letter-paper:after{transition:none!important}}