:root{--bg:#120a1f;--fg:#fff;--mut:#ffffffb3;--c:#ffd166;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:'Helvetica Neue',Arial,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}
#app{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden}
.bars{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:4px;z-index:5}
.bars i{flex:1;height:3px;border-radius:2px;background:#ffffff40}
.bars i.on{background:#fff}
#music{position:absolute;top:24px;right:12px;z-index:6;background:#ffffff26;border:0;color:#fff;border-radius:20px;padding:6px 12px;font-size:14px}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:70px 28px 40px;opacity:0;pointer-events:none;transform:scale(.97);transition:opacity .5s,transform .5s}
.slide.on{opacity:1;pointer-events:auto;transform:none}
.g1{background:linear-gradient(160deg,#ff4d8d,#7b5cff)}
.g2{background:linear-gradient(160deg,#1db98a,#0b3d5c)}
.g3{background:linear-gradient(160deg,#ffb347,#ff4d6d)}
.g4{background:linear-gradient(160deg,#7b5cff,#1a1040)}
.g5{background:linear-gradient(160deg,#ff6b9d,#c44569)}
h1{font-size:44px;line-height:1.05;font-weight:900;letter-spacing:-1px}
h2{font-size:22px;font-weight:700;margin-bottom:10px}
p{font-size:17px;color:var(--mut);line-height:1.4;margin-top:10px}
.big{font-size:96px;font-weight:900;line-height:1;letter-spacing:-3px;color:var(--c)}
.row{display:flex;gap:14px;margin-top:26px}
.box{background:#00000033;border-radius:16px;padding:14px 12px;min-width:84px}
.box b{display:block;font-size:34px;font-weight:800}
.box span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:1px}
.photo{width:100%;max-width:260px;aspect-ratio:4/5;border-radius:20px;background:#ffffff1f center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:48px;box-shadow:0 12px 40px #0006;transform:rotate(-2deg);margin-bottom:16px;flex-shrink:0}
.memory{justify-content:flex-start;overflow-y:auto;padding-top:70px}
.memory h2{font-size:20px}
.memory p{font-size:15px}
.stat{background:#00000033;border-radius:16px;padding:14px 20px;margin:7px 0;width:100%;display:flex;justify-content:space-between;align-items:center}
.stat b{font-size:26px;color:var(--c)}
.letter{align-items:stretch;justify-content:flex-start;text-align:left;overflow-y:auto;padding-top:70px;padding-bottom:28px}
.letter .paper{background:#fff1;border-radius:18px;padding:22px;font-size:17px;line-height:1.6;white-space:pre-wrap;margin-top:12px}