:root{
  --paper:#fdfcf8;
  --dot:#c9c4b448;
  --ink:#2b2a26;
  --ink-soft:#4a4842;
  --accent:#8a6f4e;
  --accent-deep:#5e4a32;
  --player-body:#2a2522;
  --player-body-2:#3a332d;
  --player-gold:#c9a35e;
  --player-cream:#e8e0cf;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:#e9e6dc;min-height:100%;-webkit-font-smoothing:antialiased;}
body{
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--ink);
  display:flex;justify-content:center;
  padding:24px 14px 48px;
  background:radial-gradient(ellipse at top,#efece2,#e3dfd2);
  min-height:100vh;
}
.device{width:100%;max-width:540px;display:flex;flex-direction:column;gap:18px;}

.nav{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;}
.arrow-btn{background:none;border:none;cursor:pointer;padding:10px;color:var(--ink-soft);
  transition:transform .25s ease,opacity .25s ease;line-height:0;}
.arrow-btn:hover{transform:scale(1.12);color:var(--accent-deep);}
.arrow-btn:active{transform:scale(.94);}
.arrow-btn:disabled{opacity:.22;cursor:default;transform:none;}
.arrow-btn svg{width:46px;height:30px;display:block;}
.month{text-align:center;user-select:none;}
.month .m{font-family:'Caveat',cursive;font-size:2.5rem;font-weight:700;color:var(--accent-deep);
  line-height:1;text-transform:lowercase;letter-spacing:.5px;}
.month .sub{font-size:.78rem;letter-spacing:3px;text-transform:uppercase;color:var(--ink-soft);
  opacity:.65;margin-top:4px;}

.paper{position:relative;background:var(--paper);border-radius:4px;padding:38px 30px 44px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -16px rgba(60,50,35,.35),0 2px 6px rgba(60,50,35,.12);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);
  background-size:26px 26px;background-position:13px 13px;overflow:hidden;min-height:60vh;}
.paper::before{content:"";position:absolute;inset:0;border-radius:4px;
  box-shadow:inset 0 0 70px rgba(120,100,70,.07);pointer-events:none;}
.paper::after{content:"";position:absolute;inset:0;border-radius:4px;
  border:1px solid rgba(140,120,90,.12);pointer-events:none;}

.page{display:none;animation:fade .6s ease both;}
.page.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.letter-head{text-align:center;margin-bottom:26px;}
.letter-head .deco{font-family:'Caveat',cursive;font-size:1.15rem;color:var(--accent);opacity:.8;}
.letter-head .title{font-family:'Caveat',cursive;font-size:1.7rem;font-weight:700;
  color:var(--accent-deep);margin-top:6px;line-height:1.25;}
.rule{width:54px;height:2px;background:var(--accent);opacity:.5;margin:14px auto 0;border-radius:2px;}

.letter-body p{font-size:1.22rem;line-height:1.95;color:var(--ink-soft);
  margin-bottom:1.05em;text-align:justify;hyphens:auto;}
.letter-body p.body-first::first-letter{font-family:'Caveat',cursive;font-size:3.2rem;
  line-height:1;float:left;margin:6px 12px -2px 0;color:var(--accent-deep);}
.letter-body p.opening{font-style:italic;font-size:1.3rem;color:var(--accent-deep);
  text-align:center;margin-bottom:1.6em;}
.letter-body p.closing{font-family:'Caveat',cursive;font-size:1.9rem;color:var(--accent-deep);
  text-align:center;margin-top:1.2em;line-height:1.4;}

.page-num{text-align:center;margin-top:30px;font-family:'Caveat',cursive;
  font-size:1.1rem;color:var(--ink-soft);opacity:.5;}

.empty-state{text-align:center;padding:80px 20px;}
.empty-state .star{font-size:2rem;color:var(--accent);margin-bottom:18px;}
.empty-state h2{font-family:'Caveat',cursive;font-size:2rem;color:var(--accent-deep);margin-bottom:10px;}
.empty-state p{font-style:italic;color:var(--ink-soft);}

.player{position:relative;background:linear-gradient(160deg,var(--player-body-2),var(--player-body));
  border-radius:18px;padding:22px 22px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 -2px 8px rgba(0,0,0,.4) inset,0 16px 30px -12px rgba(0,0,0,.55);
  color:var(--player-cream);overflow:hidden;}
.player::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px);
  pointer-events:none;}
.player-top{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.reel{width:64px;height:64px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#1c1a18 0 18%,#2c2824 18% 22%,#1c1a18 22% 100%);
  border:2px solid rgba(201,163,94,.4);position:relative;
  box-shadow:0 0 0 4px rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.4);
  animation:spin 4s linear infinite;animation-play-state:paused;}
.reel.playing{animation-play-state:running;}
.reel::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;
  border-radius:50%;background:var(--player-gold);box-shadow:0 0 0 3px rgba(0,0,0,.5);}
.reel-grooves{position:absolute;inset:6px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,.04) 2px 3px);}
@keyframes spin{to{transform:rotate(360deg);}}
.track-meta{flex:1;min-width:0;}
.track-meta .label{font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--player-gold);opacity:.8;margin-bottom:3px;}
.track-meta .name{font-family:'Cormorant Garamond',serif;font-size:1.32rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--player-cream);}
.track-meta .artist{font-size:.92rem;opacity:.6;font-style:italic;}
.progress-wrap{display:flex;align-items:center;gap:10px;font-size:.74rem;
  color:rgba(232,224,207,.55);font-variant-numeric:tabular-nums;margin-bottom:18px;}
.bar{flex:1;height:5px;border-radius:5px;background:rgba(0,0,0,.4);position:relative;
  cursor:pointer;box-shadow:0 1px 1px rgba(255,255,255,.04);}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:5px;
  background:linear-gradient(90deg,var(--player-gold),#e6c889);}
.bar-knob{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:var(--player-cream);transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.6);left:0%;}
.controls{display:flex;align-items:center;justify-content:center;gap:26px;}
.ctrl{background:none;border:none;cursor:pointer;color:var(--player-cream);line-height:0;
  transition:transform .2s ease,color .2s ease;opacity:.85;}
.ctrl:hover{transform:scale(1.12);color:var(--player-gold);opacity:1;}
.ctrl:active{transform:scale(.92);}
.ctrl svg{width:24px;height:24px;display:block;}
.play-btn{width:62px;height:62px;border-radius:50%;
  background:linear-gradient(160deg,#3f3830,#272320);
  border:1px solid rgba(201,163,94,.45);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 14px -4px rgba(0,0,0,.6);
  transition:transform .2s ease;}
.play-btn:hover{transform:scale(1.06);}
.play-btn:active{transform:scale(.95);}
.play-btn svg{width:26px;height:26px;color:var(--player-gold);}
.footer-note{text-align:center;font-family:'Caveat',cursive;font-size:1rem;
  color:var(--ink-soft);opacity:.45;margin-top:2px;}

@media (max-width:420px){
  .paper{padding:30px 22px 36px;}
  .letter-body p{font-size:1.12rem;line-height:1.85;}
  .month .m{font-size:2.1rem;}
  .arrow-btn svg{width:40px;height:26px;}
}