#app{width:min(100% - 40px,1240px);min-height:calc(100vh - 76px)}
.hero{padding-bottom:24px}
.hero,.memory-section{max-width:930px;margin-left:auto;margin-right:auto}
.hero{position:relative;z-index:1}
.memory-section{position:relative;isolation:isolate}
.year-label{position:relative;z-index:0}
.memory-grid,.empty-state{position:relative;z-index:2}
.header-counter{display:none;align-items:center;justify-content:center;min-width:76px;color:rgba(246,240,250,.42);font:700 clamp(42px,5vw,58px)/.8 var(--serif);letter-spacing:-.12em;pointer-events:none;user-select:none}
.home-view .header-counter{display:inline-flex}
.topbar{height:auto;min-height:76px;padding:8px 0}
.header-memory{display:none}
.home-view .header-memory{position:relative;display:flex;align-items:center;gap:14px}
.home-view .header-memory-quote{display:block;max-width:min(48vw,580px);margin:0;padding-right:12px;border-right:1px solid rgba(255,117,148,.18);color:rgba(242,235,243,.66);font:400 11px/1.45 var(--sans);text-align:right}
.home-view .header-memory-quote cite{display:block;margin-top:4px;color:rgba(213,203,216,.43);font:400 9px/1.2 var(--sans);font-style:normal;letter-spacing:.04em}
.home-view .header-memory-quote{transition:opacity .26s ease,transform .26s ease}
.home-view .header-memory-quote.is-changing{opacity:0;transform:translateY(-8px)}
.detail-wrap{max-width:1140px}
.letter-layout{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,690px);justify-content:center;align-items:start;gap:26px}
.music-box.visible{position:sticky;top:20px;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 40px);padding:20px 18px 16px;border-color:rgba(255,117,148,.17);background:linear-gradient(155deg,rgba(30,27,39,.98),rgba(19,19,29,.98));box-shadow:0 18px 60px #0003}
.music-kicker{color:#d17b91;font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.music-title{margin:7px 0 0;color:#f7eff4;font:500 23px/1.15 var(--serif)}
.music-title span{display:block;margin-top:5px;color:#a89fab;font:400 11px var(--sans)}
.music-controls{display:flex;align-items:center;gap:10px;margin:15px 0;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.025)}
.music-bars{display:flex;align-items:center;justify-content:center;gap:2px;width:17px;height:17px}
.music-bars i{display:block;width:3px;height:5px;border-radius:3px;background:var(--pink);opacity:.8}
.music-bars i:nth-child(2){height:10px}.music-bars i:nth-child(3){height:7px}.music-bars i:nth-child(4){height:12px}
.music-bars.is-playing i{animation:equalize .72s ease-in-out infinite alternate}
.music-bars.is-playing i:nth-child(2){animation-delay:-.42s}.music-bars.is-playing i:nth-child(3){animation-delay:-.18s}.music-bars.is-playing i:nth-child(4){animation-delay:-.55s}
@keyframes equalize{to{transform:scaleY(.35);opacity:.5}}
.music-time{flex:1;color:#a99fab;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.music-toggle{padding:7px 11px;border:1px solid rgba(255,117,148,.23);border-radius:20px;background:#382430;color:#ffd8e1;font-size:10px;font-weight:600;cursor:pointer}
.music-toggle:disabled{opacity:.5;cursor:wait}
.audio-source{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.audio-source iframe{width:1px;height:1px;border:0}
.lyrics-label{margin:7px 0 3px;color:#8f8793;font-size:8px}
.lyrics{display:flex;flex-direction:column;gap:2px;min-height:135px;height:min(58vh,530px);margin:0 -4px;padding:calc(min(29vh,265px) - 19px) 5px;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;mask-image:linear-gradient(transparent 0%,#000 16%,#000 84%,transparent 100%);scroll-behavior:smooth}
.lyrics::-webkit-scrollbar{display:none}
.lyrics:empty{display:none}
.lyric-line{flex:none;padding:4px 0;color:#a59eaa;opacity:.54;font:600 clamp(17px,1.65vw,23px)/1.28 var(--sans);text-align:left;transition:color .35s,opacity .35s,transform .35s,text-shadow .35s}
.lyric-line.static{color:#d0c8d2;opacity:.86}
.lyric-line.active{color:#fff;opacity:1;transform:translateX(3px);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px;text-shadow:0 0 22px #ff759433}
.letter{min-width:0}
.letter-layout.is-favorite .music-box.visible{border-color:rgba(169,119,255,.52);background:radial-gradient(ellipse at 50% 0%,rgba(119,75,183,.24),transparent 62%),linear-gradient(155deg,rgba(37,29,52,.99),rgba(20,19,31,.99));box-shadow:0 18px 60px rgba(93,57,155,.24),inset 0 0 0 1px rgba(190,153,255,.06)}
.letter-layout.is-favorite .music-kicker{color:#c19aff}
.letter-layout.is-favorite .music-title{color:#f3eaff}
.letter-layout.is-favorite .music-title span,.letter-layout.is-favorite .music-time{color:#b9a8d0}
.letter-layout.is-favorite .music-controls{border-color:rgba(183,137,255,.28);background:rgba(126,79,196,.11)}
.letter-layout.is-favorite .music-bars i{background:#bd91ff}
.letter-layout.is-favorite .music-toggle{border-color:rgba(183,137,255,.48);background:rgba(111,69,170,.36);color:#f0e3ff}
.letter-layout.is-favorite .lyric-line{color:#b4a7c2}
.letter-layout.is-favorite .lyric-line.active{color:#f3e8ff;text-decoration-color:#c39aff;text-shadow:0 0 24px rgba(174,126,255,.45)}
body.favorite-letter-view{background:radial-gradient(ellipse at 22% 8%,rgba(108,68,166,.24),transparent 42%),radial-gradient(ellipse at 80% 60%,rgba(81,53,134,.12),transparent 48%),radial-gradient(ellipse at 50% 0%,#282034 0,#14131e 42%,var(--bg) 78%)}
.letter-art{container-type:inline-size;font-size:clamp(76px,34cqi,185px)}
@media(max-width:1095px){.detail-wrap{max-width:690px}.letter-layout{grid-template-columns:minmax(0,1fr);gap:14px}.music-box.visible{position:relative;top:auto;order:2;max-height:none}.letter{order:1}}
@media(max-width:780px){#app{width:calc(100% - 30px)}.header-counter{min-width:60px;font-size:45px;-webkit-text-stroke-width:1.2px}.detail-wrap{max-width:690px}.letter-layout{grid-template-columns:minmax(0,1fr);gap:14px}.music-box.visible{position:relative;top:auto;order:2;max-height:none}.letter{order:1}.lyrics{height:230px;min-height:180px;padding:90px 5px}.lyric-line{font-size:18px}.hero,.memory-section{max-width:100%}}
@media(max-width:620px){.brand{min-height:44px}.header-counter{min-width:52px;font-size:40px}.field input,.field textarea{font-size:16px}.music-toggle{min-height:42px}.row-actions .button{min-height:42px}}
@media(max-width:620px){.home-view .topbar{position:relative;min-height:106px;padding:9px 0 42px;align-items:flex-start}.home-view .header-memory{position:static;margin-left:auto}.home-view .header-memory-quote{position:absolute;top:56px;right:0;width:min(310px,100%);max-width:none;padding-right:0;border:0;font-size:9.5px;line-height:1.3;text-align:right}.home-view .header-memory-quote cite{margin-top:3px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.music-bars.is-playing i{animation:none}}
@media(prefers-reduced-motion:reduce){.home-view .header-memory-quote{transition:none}}