@font-face{font-family:Breathing;src:url("/fonts/Breathing Personal Use Only.ttf")format("truetype");font-weight:400;font-style:normal}@font-face{font-family:OrdinaryLetter;src:url("/ordinary_letter/Ordinary Letter.otf")format("opentype");font-weight:400;font-style:normal}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff0f5;--bg2:#ffd6e7;--card:#fff8fb;--card2:#ffe8f0;--accent:#ff6b8a;--accent2:#ff4d6d;--accent3:#ffb3c6;--accent4:#ffd6e7;--text:#3d0015;--text2:#8b2a40;--shadow:#c35;--pixel:4px}html,body{background-color:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:none;image-rendering:pixelated;font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.8}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--accent3);border:2px solid var(--bg2)}.pixel-card{background:var(--card);border:var(--pixel) solid var(--text);box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);padding:20px;position:relative}.pixel-btn{color:var(--card);background:var(--accent);border:var(--pixel) solid var(--text);box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-family:"Press Start 2P",monospace;font-size:9px;line-height:1;transition:none;display:inline-flex}.pixel-btn:hover{background:var(--accent2);box-shadow:calc(var(--pixel) - 1px) calc(var(--pixel) - 1px) 0 0 var(--shadow);transform:translate(1px,1px)}.pixel-btn:active{transform:translate(var(--pixel), var(--pixel));box-shadow:none}.pixel-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);transform:none}.pixel-btn.ghost{color:var(--text);background:0 0}.pixel-btn.ghost:hover{background:var(--card2)}.pixel-input{color:var(--text);background:var(--card);border:var(--pixel) solid var(--text);box-shadow:inset 2px 2px 0 0 var(--bg2);outline:none;width:100%;padding:10px 12px;font-family:"Press Start 2P",monospace;font-size:9px;line-height:1.6}.pixel-input:focus{border-color:var(--accent);box-shadow:inset 2px 2px 0 0 var(--accent4)}.pixel-input::placeholder{color:var(--accent3)}.pixel-label{color:var(--text2);letter-spacing:1px;margin-bottom:6px;font-size:8px;display:block}.song-row{background:var(--card2);border:2px solid #0000;align-items:center;gap:10px;padding:8px;display:flex}.song-row:hover{border-color:var(--accent3)}.hearts-bg{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.heart-particle{opacity:.5;font-size:16px;animation:linear infinite floatUp;position:absolute;bottom:-40px}@keyframes floatUp{0%{opacity:.5;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(-110vh)rotate(20deg)}}.app-wrapper{z-index:0;min-height:100vh;position:relative}.page-content{max-width:640px;margin:0 auto;padding:24px 16px 48px}.app-header{text-align:center;padding:28px 16px 12px}.app-title{color:var(--accent2);text-shadow:3px 3px 0 var(--text);font-size:18px;display:block}.app-subtitle{color:var(--text2);margin-top:8px;font-size:8px;display:block}.loading-dots:after{content:"";animation:1.5s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}.share-header{text-align:center;padding:32px 16px 24px}.share-to{color:var(--accent2);text-shadow:2px 2px 0 var(--text);font-size:14px}.share-message{color:var(--text2);margin-top:10px;font-size:8px;font-style:italic;line-height:2.2}.share-from{color:var(--text2);margin-top:8px;font-size:8px}.yt-thumb{cursor:pointer;flex-shrink:0;position:relative}.yt-thumb img{border:2px solid var(--text);image-rendering:pixelated;display:block}.yt-play-btn{color:#fff;background:#3d001559;justify-content:center;align-items:center;font-size:20px;transition:background .1s;display:flex;position:absolute;inset:0}.yt-thumb:hover .yt-play-btn{background:#3d00158c}.yt-embed-wrapper{border:var(--pixel) solid var(--text);width:100%;box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);padding-top:56.25%;position:relative;overflow:hidden}.yt-embed-wrapper iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.music-bars{align-items:flex-end;gap:3px;height:22px;display:flex}.music-bar{width:5px;height:var(--bh,8px);background:var(--accent3);transform-origin:bottom;transform:scaleY(.3)}.music-bars.playing .music-bar{background:var(--accent);animation:.55s infinite alternate bar-bounce}@keyframes bar-bounce{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}.modal-backdrop{z-index:100;background:#3d001599;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-content{background:var(--card);border:var(--pixel) solid var(--text);box-shadow:var(--pixel) var(--pixel) 0 0 var(--shadow);text-align:center;width:100%;max-width:400px;padding:24px}.pixel-divider{border:none;border-top:4px solid var(--accent3);margin:20px 0}@keyframes cd-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cd-spin-reverse{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.letter-card{color:#3a2010;background-color:#fdf6e3;background-image:repeating-linear-gradient(#0000 0 34px,#dc8c8c2e 34px 35px);border:none;padding:40px 36px 48px;font-family:Dancing Script,cursive;position:relative;transform:rotate(-1.2deg);box-shadow:0 1px 1px #0000001f,0 2px 2px #0000001a,0 4px 4px #00000014,0 8px 24px #00000024}.letter-card:before{content:"";background:#dc8c8c47;width:1.5px;position:absolute;top:0;bottom:0;left:52px}.letter-salutation{color:#7a1530;margin-bottom:20px;font-size:28px;font-weight:700;line-height:1.2}.letter-body{color:#3a2010;white-space:pre-wrap;font-size:22px;font-weight:400;line-height:1.95}.letter-closing{color:#7a1530;text-align:right;margin-top:28px;font-size:22px;font-weight:600;line-height:1.8}.letter-seal{color:#fff;background:radial-gradient(circle,#e63c5e 0%,#9b1535 100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin:28px auto 0;font-size:24px;display:flex;position:relative;box-shadow:0 2px 8px #9b153573}.letter-seal:after{content:"";border:1.5px solid #ffffff4d;border-radius:50%;position:absolute;inset:4px}