*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background-color:var(--bg, #f5f0e8);color:var(--text, #2c1a0e);font-family:var(--font-mono, "Courier Prime", monospace);min-height:100vh;display:flex;flex-direction:column;transition:background-color .4s ease,color .3s ease}.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px}.container{max-width:640px;margin:0 auto;padding:2rem 1.5rem;flex:1}.site-header{text-align:center;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:2px solid var(--header-border, #8b5e3c);position:relative}.site-header:after{content:"";display:block;height:1px;background:var(--accent, #c8860a);margin-top:4px;opacity:.4}.logo-mark{font-size:2rem;color:var(--accent, #c8860a);display:block;margin-bottom:.25rem;animation:pulse-glow 3s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:1;text-shadow:0 0 8px rgba(200,134,10,.4)}50%{opacity:.7;text-shadow:0 0 20px rgba(200,134,10,.8)}}.site-title{font-family:var(--font-display, "Playfair Display", serif);font-size:2.4rem;font-weight:700;color:var(--text, #2c1a0e);letter-spacing:.02em;line-height:1}.site-tagline{font-family:var(--font-display, "Playfair Display", serif);font-style:italic;color:var(--text2, #5c3a1e);font-size:.95rem;margin-top:.4rem}.turntable{display:flex;justify-content:center;margin-bottom:2rem;min-height:300px}.record-section{display:flex;flex-direction:column;align-items:center}.controls-panel{text-align:center;width:100%}.timer-display{font-family:var(--font-mono, monospace);font-size:2.5rem;color:var(--timer-color, #c8860a);letter-spacing:.1em;text-shadow:0 0 20px rgba(200,134,10,.4);margin-bottom:.75rem;font-weight:700;transition:color .3s}.timer-display.recording{color:#e05050!important;text-shadow:0 0 20px rgba(220,80,80,.5);animation:blink-timer 1s step-end infinite}@keyframes blink-timer{0%,to{opacity:1}50%{opacity:.6}}.level-meter{width:220px;height:8px;background:#2c1a0e33;border-radius:4px;margin:0 auto 1.5rem;overflow:hidden;border:1px solid rgba(139,94,60,.3)}.level-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent, #c8860a),#e05050);border-radius:4px;transition:width .08s ease}.progress-container{margin-bottom:1.5rem}.progress-track{width:220px;height:6px;background:#2c1a0e33;border-radius:3px;margin:0 auto;overflow:hidden;border:1px solid rgba(139,94,60,.3);cursor:pointer}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--text2, #5c3a1e),var(--accent, #c8860a));border-radius:3px;transition:width .1s linear}.btn-group{display:flex;gap:.75rem;justify-content:center;margin-bottom:1rem}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-family:var(--font-mono, monospace);font-size:.9rem;letter-spacing:.05em;transition:all .2s ease;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;inset:0;background:#ffffff1a;opacity:0;transition:opacity .2s}.btn:hover:not(:disabled):before{opacity:1}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-icon{font-size:1rem}.btn-record{background:var(--btn-rec);color:#fff;box-shadow:0 3px 12px var(--shadow, rgba(0, 0, 0, .3))}.btn-stop{background:var(--btn-stop);color:var(--bg, #f5f0e8);box-shadow:0 3px 12px var(--shadow, rgba(0, 0, 0, .3))}.btn-play{background:var(--btn-play);color:var(--bg, #f5f0e8);box-shadow:0 3px 12px var(--shadow, rgba(0, 0, 0, .3));padding:.9rem 2rem;font-weight:700}.btn-upload{background:var(--btn-upload, linear-gradient(135deg, #2e7d32, #1b5e20));color:#fff;box-shadow:0 3px 12px var(--shadow, rgba(0, 0, 0, .3))}.btn-redo{background:linear-gradient(135deg,var(--text2, #5c3a1e),var(--text, #2c1a0e));color:var(--bg, #f5f0e8);box-shadow:0 3px 12px var(--shadow, rgba(0, 0, 0, .3))}.btn-copy{background:var(--text2, #5c3a1e);color:var(--bg, #f5f0e8);padding:.5rem 1rem;font-size:.8rem}.status-text{font-family:var(--font-display, serif);font-style:italic;color:var(--text2, #5c3a1e);font-size:.9rem;min-height:1.4em;transition:color .3s}.upload-panel{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.upload-panel audio{width:100%;max-width:280px}.share-panel{margin-top:1.5rem;text-align:center}.share-label{font-family:var(--font-display, serif);font-style:italic;color:var(--text2, #5c3a1e);margin-bottom:.75rem;font-size:1rem}.share-link-box{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap}.share-link-box input{flex:1;min-width:200px;max-width:340px;padding:.5rem .75rem;background:var(--bg2, #ede4d0);border:1px solid var(--header-border, #8b5e3c);border-radius:4px;font-family:var(--font-mono, monospace);font-size:.8rem;color:var(--text, #2c1a0e);outline:none}.share-note{margin-top:.5rem;font-size:.8rem;color:var(--text2, #5c3a1e);opacity:.7;font-family:var(--font-display, serif)}.listen-page .player-section{min-height:200px;display:flex;justify-content:center;align-items:center;flex-direction:column}.loading-state{text-align:center;color:var(--text2, #5c3a1e);font-family:var(--font-display, serif);font-style:italic}.loading-spinner{width:40px;height:40px;border:3px solid rgba(139,94,60,.2);border-top-color:var(--accent, #c8860a);border-radius:50%;margin:0 auto 1rem;animation:spin .8s linear infinite}.error-state{text-align:center;padding:2rem}.error-icon{font-size:3rem;color:var(--text2, #5c3a1e);opacity:.5;margin-bottom:1rem}.error-state h2{font-family:var(--font-display, serif);font-size:1.5rem;margin-bottom:.5rem}.error-state p{color:var(--text2, #5c3a1e);margin-bottom:1.5rem;font-family:var(--font-display, serif);font-style:italic}.player-ready{width:100%}.upload-progress{width:100%;max-width:280px;margin-top:.5rem}.upload-progress-bar{height:4px;background:linear-gradient(90deg,var(--accent, #c8860a),var(--accent2, #e8a020));border-radius:2px;width:0%;transition:width .3s ease;animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:1}50%{opacity:.6}}.site-footer{text-align:center;padding:1.5rem;font-size:.8rem;color:var(--text2, #5c3a1e);opacity:.6;border-top:1px solid var(--header-border, rgba(139, 94, 60, .2));font-family:var(--font-mono, monospace)}.site-footer a{color:var(--accent, #c8860a);text-decoration:none}.waveform-container{width:100%;max-width:320px;height:40px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center}.waveform-vis{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:3px;opacity:.85}.wv-bar{flex:1;width:4px;height:15%;background:var(--accent, #c8860a);border-radius:2px;transition:height .3s ease,background .3s ease;animation:wv-idle 2s ease-in-out infinite;animation-delay:calc(var(--i) * .1s)}.waveform-vis.playing .wv-bar{animation:wv-play .6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * .05s);height:30%}@keyframes wv-idle{0%,to{height:15%;opacity:.4}50%{height:25%;opacity:.7}}@keyframes wv-play{0%{height:20%}to{height:80%}}.tw-cursor{display:inline-block;font-family:var(--font-display, serif);font-style:normal;color:#5c3a1e;margin-left:1px;animation:tw-blink .65s step-end infinite}@keyframes tw-blink{0%,to{opacity:1}50%{opacity:0}}.note-field{width:100%;max-width:320px;display:flex;flex-direction:column;gap:.35rem;text-align:left}.note-label{font-family:var(--font-mono, monospace);font-size:.78rem;letter-spacing:.05em;color:var(--text2, #5c3a1e)}.note-optional{opacity:.55;font-size:.72rem}.note-textarea{width:100%;resize:vertical;padding:.6rem .75rem;background:var(--bg2, #ede4d0);border:1.5px solid var(--header-border, #8b5e3c);border-radius:6px;font-family:var(--font-display, serif);font-size:.9rem;line-height:1.5;color:var(--text, #2c1a0e);outline:none;transition:border-color .2s,box-shadow .2s}.note-textarea:focus{border-color:var(--accent, #c8860a);box-shadow:0 0 0 3px #c8860a1f}.note-textarea::placeholder{color:var(--text2, #5c3a1e);opacity:.5}.note-char-count{text-align:right;font-family:var(--font-mono, monospace);font-size:.68rem;color:var(--text2, #5c3a1e);opacity:.55}.letter-btn-wrap{margin-top:1.25rem}.btn-letter{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.3rem;background:none;border:1.5px solid var(--accent, #c8860a);border-radius:999px;color:var(--accent, #c8860a);font-family:var(--font-mono, monospace);font-size:.82rem;letter-spacing:.06em;cursor:pointer;animation:letter-btn-float 3s ease-in-out infinite;transition:background .2s,color .2s,box-shadow .2s}@keyframes letter-btn-float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.btn-letter:active{transform:scale(.96)!important}.letter-overlay{position:fixed;inset:0;z-index:500;background:#080400d1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s ease}.letter-env-stage{display:flex;flex-direction:column;align-items:center;position:relative;padding:4rem 2rem}.letter-particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;color:#d4af37;opacity:0;font-size:1rem;animation:particle-drift 4s ease-in-out infinite}.p1{top:12%;left:12%;animation-delay:0s}.p2{top:28%;right:8%;animation-delay:.7s;font-size:.5rem}.p3{bottom:15%;left:18%;animation-delay:1.4s}.p4{top:10%;right:22%;animation-delay:2.1s;font-size:.65rem}.p5{bottom:22%;right:12%;animation-delay:2.8s}.p6{top:52%;left:4%;animation-delay:3.5s;font-size:.4rem}@keyframes particle-drift{0%{opacity:0;transform:translate(0) scale(.4)}30%{opacity:1;transform:translate(8px,-18px) scale(1.1)}60%{opacity:.7;transform:translate(4px,-30px) scale(.85)}80%{opacity:.9;transform:translate(-6px,-12px) scale(1.05)}to{opacity:0;transform:translateY(4px) scale(.4)}}.letter-envelope{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1.1rem;animation:env-enter .7s cubic-bezier(.34,1.56,.64,1) both,env-float 3.2s ease-in-out .7s infinite}@keyframes env-enter{0%{opacity:0;transform:translateY(70px) scale(.65) rotate(-4deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes env-float{0%,to{transform:translateY(0) rotate(-.8deg)}35%{transform:translateY(-14px) rotate(.5deg)}68%{transform:translateY(-6px) rotate(-.4deg)}}.letter-envelope:hover .env-body{transform:scale(1.06);box-shadow:0 16px 50px #0000008c,0 0 40px #d4af374d}.env-body{width:180px;height:120px;background:linear-gradient(175deg,#c9974c,#a87030 60%,#8a5820);border-radius:3px;position:relative;box-shadow:0 8px 32px #00000080,0 2px 6px #0000004d;transition:transform .3s ease,box-shadow .3s ease;overflow:visible}.env-flap{position:absolute;top:-1px;left:0;right:0;height:72px;z-index:2;background:linear-gradient(165deg,#ddb06a 35%,#c9974c);clip-path:polygon(0 0,100% 0,50% 68%);border-bottom:1px solid rgba(0,0,0,.1)}.env-body:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.2%,rgba(0,0,0,.14) 49.2%,rgba(0,0,0,.14) 50.8%,transparent 50.8%),linear-gradient(225deg,transparent 49.2%,rgba(0,0,0,.14) 49.2%,rgba(0,0,0,.14) 50.8%,transparent 50.8%);pointer-events:none}.env-seal{position:absolute;width:52px;height:52px;background:radial-gradient(circle at 40% 35%,#e05050,#a01818);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-15%);display:flex;align-items:center;justify-content:center;color:#f5e6c8;font-size:1.35rem;z-index:3;box-shadow:0 3px 14px #00000073,0 0 0 3px #c0392b40,0 0 0 6px #c0392b1a;animation:seal-pulse 2.2s ease-in-out infinite}@keyframes seal-pulse{0%,to{box-shadow:0 3px 14px #00000073,0 0 0 3px #c0392b40,0 0 0 6px #c0392b1a}50%{box-shadow:0 4px 20px #00000080,0 0 0 5px #c0392b33,0 0 30px #c0392b40}}.env-from{font-family:var(--font-display, serif);font-style:italic;font-size:1.15rem;color:#ffffffeb;text-shadow:0 2px 10px rgba(0,0,0,.6);margin:0}.env-cta{font-family:var(--font-mono, monospace);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#d4af37;margin:0;animation:cta-blink 2s ease-in-out infinite}@keyframes cta-blink{0%,to{opacity:.65}50%{opacity:1}}.letter-paper-stage{display:flex;align-items:center;justify-content:center;width:100%;padding:1.5rem}.letter-paper{width:100%;max-width:500px;max-height:85vh;overflow-y:auto;position:relative;background:radial-gradient(ellipse at 6% 7%,rgba(130,85,20,.22) 0%,transparent 42%),radial-gradient(ellipse at 94% 91%,rgba(130,85,20,.18) 0%,transparent 42%),radial-gradient(ellipse at 88% 6%,rgba(110,65,10,.12) 0%,transparent 32%),radial-gradient(ellipse at 14% 88%,rgba(120,75,15,.13) 0%,transparent 36%),#f4e3b2;border-radius:2px 2px 3px 3px;padding:2.5rem 2.75rem 2rem;box-shadow:0 3px 6px #0000001a,0 12px 30px #00000038,0 30px 70px #00000061,inset 0 0 100px #8b5a1912;animation:paper-unfold .55s cubic-bezier(.34,1.4,.64,1) both}@keyframes paper-unfold{0%{opacity:0;transform:rotate(-2.5deg) scale(.82) translateY(30px)}to{opacity:1;transform:rotate(0) scale(1) translateY(0)}}.letter-paper:after{content:"";position:absolute;top:0;bottom:0;left:3.5rem;width:1px;background:#c0392b66;pointer-events:none}.letter-paper:before{content:"";position:absolute;top:-5px;left:0;right:0;height:10px;background:radial-gradient(circle at 8% 50%,#f4e3b2 4.5px,transparent 4.5px),radial-gradient(circle at 20% 50%,#f4e3b2 3px,transparent 3px),radial-gradient(circle at 33% 50%,#f4e3b2 5px,transparent 5px),radial-gradient(circle at 47% 50%,#f4e3b2 3.5px,transparent 3.5px),radial-gradient(circle at 60% 50%,#f4e3b2 4px,transparent 4px),radial-gradient(circle at 73% 50%,#f4e3b2 3px,transparent 3px),radial-gradient(circle at 86% 50%,#f4e3b2 4.5px,transparent 4.5px),radial-gradient(circle at 95% 50%,#f4e3b2 3px,transparent 3px)}.letter-paper-body{position:relative;z-index:2;padding-left:1.25rem}.letter-salutation{display:block;font-family:"Playfair Display",var(--font-display, serif);font-style:italic;font-size:1.05rem;color:#5c3a1e;margin-bottom:.9rem}.letter-message{font-family:"Playfair Display",var(--font-display, serif);font-size:1rem;line-height:1.82em;color:#2e1a08;min-height:3em;word-break:break-word;overflow-wrap:break-word}.letter-sign{font-family:"Playfair Display",var(--font-display, serif);font-style:italic;font-size:.95rem;color:#7a4a1e;margin-top:1.5rem;text-align:right;padding-right:.5rem}.letter-paper-footer{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:1.75rem;padding-top:1rem;border-top:1px solid rgba(155,110,50,.3);position:relative;z-index:2}.btn-letter-dismiss{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 2rem;background:linear-gradient(135deg,#5c3a1e,#3a2010);color:#f5e3c0;border:none;border-radius:2px;font-family:var(--font-mono, monospace);font-size:.85rem;letter-spacing:.1em;cursor:pointer;box-shadow:0 3px 12px #0000004d;transition:background .2s,transform .15s,box-shadow .2s}.btn-letter-dismiss:hover{background:linear-gradient(135deg,#7a4a1e,#5c3a1e);transform:translateY(-1px);box-shadow:0 5px 18px #0006}.btn-letter-dismiss:active{transform:scale(.97)}.btn-letter-reopen{background:none;border:none;font-family:var(--font-mono, monospace);font-size:.7rem;letter-spacing:.06em;color:#5c3a1e8c;cursor:pointer;transition:color .2s}.btn-letter-reopen:hover{color:#5c3a1ed9}@media(max-width:480px){.site-title{font-size:1.8rem}.timer-display{font-size:2rem}.env-body{width:150px;height:100px}.letter-paper{padding:2rem 1.75rem 1.5rem}.letter-paper-body{padding-left:1.5rem}.letter-paper:after{left:2.75rem}}@keyframes letter-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.btn-letter{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.4rem;background:none;border:2px solid var(--accent, #c8860a);border-radius:999px;color:var(--accent, #c8860a);font-family:var(--font-mono, monospace);font-size:.85rem;letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s,transform .15s,box-shadow .2s}.btn-letter:hover{background:var(--accent, #c8860a);color:var(--bg, #f5f0e8);box-shadow:0 4px 14px var(--shadow, rgba(200, 134, 10, .35))}.btn-letter:active{transform:scale(.96)}.letter-btn-icon{font-size:1rem}.letter-btn-label{font-size:.82rem}.letter-overlay{position:fixed;inset:0;z-index:500;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s ease}.letter-overlay.open{opacity:1;pointer-events:all}.letter-card{width:100%;max-width:480px;background:var(--bg, #f5f0e8);border:2px solid var(--header-border, #8b5e3c);border-radius:4px;box-shadow:0 20px 60px #0006,0 0 0 1px var(--accent, #c8860a) inset;transform:scale(.88) translateY(20px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.letter-card:before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--accent, #c8860a),var(--accent2, #e8a020))}.letter-overlay.open .letter-card{transform:scale(1) translateY(0)}.letter-card-inner{padding:2rem 2rem 1.5rem}.letter-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--header-border, #8b5e3c)}.letter-wax-seal{font-size:1.8rem;color:var(--accent, #c8860a);text-shadow:0 0 12px rgba(200,134,10,.5);animation:pulse-glow 3s ease-in-out infinite}.letter-heading{font-family:var(--font-display, serif);font-size:1.3rem;font-weight:700;font-style:italic;color:var(--text, #2c1a0e)}.letter-body{font-family:var(--font-display, serif);font-size:1rem;line-height:1.75;color:var(--text, #2c1a0e);white-space:pre-wrap;min-height:3em}.letter-footer{margin-top:1.5rem;display:flex;justify-content:flex-end}.btn-letter-close{background:none;border:1.5px solid var(--header-border, #8b5e3c);border-radius:999px;padding:.4rem 1rem;font-family:var(--font-mono, monospace);font-size:.78rem;letter-spacing:.05em;color:var(--text2, #5c3a1e);cursor:pointer;transition:background .18s,color .18s,border-color .18s}.btn-letter-close:hover{background:var(--text2, #5c3a1e);color:var(--bg, #f5f0e8);border-color:var(--text2, #5c3a1e)}@media(max-width:480px){.site-title{font-size:1.8rem}.timer-display{font-size:2rem}}#aboutScrollBtn{position:fixed;bottom:78px;right:24px;z-index:998;width:54px;height:54px;border-radius:50%;border:2px solid rgba(200,134,10,.55);background:#1e0c02d1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #00000059;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:scroll-float 3.2s ease-in-out infinite;padding:0}#aboutScrollBtn img{width:28px;height:28px;opacity:.88;filter:sepia(.4) saturate(1.4) brightness(1.1);pointer-events:none;transition:opacity .2s ease,filter .2s ease}#aboutScrollBtn:hover{transform:translateY(-3px) scale(1.06)!important;border-color:#c8860ae6;box-shadow:0 6px 24px #00000073,0 0 16px #c8860a33;animation-play-state:paused}#aboutScrollBtn:hover img{opacity:1;filter:sepia(.2) saturate(1.8) brightness(1.2)}@keyframes scroll-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.about-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:#0a0400b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s ease}.about-overlay.open{opacity:1;pointer-events:all}.about-paper{position:relative;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;background:radial-gradient(ellipse at 8% 8%,rgba(130,85,20,.18) 0%,transparent 44%),radial-gradient(ellipse at 92% 90%,rgba(130,85,20,.14) 0%,transparent 42%),#f4e3b2;border-radius:3px;padding:2.5rem 2.75rem 2rem;box-shadow:0 4px 8px #0000001f,0 16px 40px #00000047,0 40px 80px #0006;border-left:3px solid rgba(192,57,43,.35);transform:translateY(20px) scale(.97);transition:transform .3s cubic-bezier(.34,1.4,.64,1)}.about-overlay.open .about-paper{transform:translateY(0) scale(1)}.about-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#7a4a1e;font-size:1.1rem;cursor:pointer;opacity:.65;transition:opacity .2s;padding:4px 8px}.about-close:hover{opacity:1}.about-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}.about-logo{font-size:1.6rem;color:#c8860a;line-height:1}.about-title{font-family:Playfair Display,serif;font-size:1.4rem;font-weight:700;color:#3a1a00;margin:0;line-height:1.2}.about-desc{font-family:Playfair Display,serif;text-align:justify;font-size:.92rem;line-height:1.75;color:#4a2a0a;margin:0 0 .5rem}.about-divider{height:1px;background:#64320a33;margin:1.2rem 0}.about-section-title{font-family:Playfair Display,serif;font-size:.82rem;font-weight:700;color:#c8860a;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .75rem}.about-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}.about-list li{font-family:Courier Prime,monospace;font-size:.81rem;line-height:1.6;color:#3a200a;padding-left:1rem;position:relative}.about-list li:before{content:"·";position:absolute;left:0;color:#c8860a;font-weight:700}.about-list li strong{color:#5c3210}@media(max-width:480px){#aboutScrollBtn{bottom:76px;right:16px}.about-paper{padding:2rem 1.5rem 1.5rem}.about-title{font-size:1.2rem}}:root{--bg: #f5f0e8;--bg2: #ede4d0;--body-top: #4a2c0f;--body-bot: #2c1608;--body-accent: #7a4a1e;--vinyl-bg: #111010;--label-bg: #c0392b;--label-text: #f0e8d0;--needle: #c8a060;--accent: #c8860a;--accent2: #e8a020;--text: #2c1a0e;--text2: #5c3a1e;--shadow: rgba(44,26,14,.45);--timer-color: #c8860a;--btn-rec: linear-gradient(135deg,#c0392b,#a02020);--btn-stop: linear-gradient(135deg,#5c3a1e,#2c1a0e);--btn-play: linear-gradient(135deg,#c8860a,#a86c08);--btn-upload: linear-gradient(135deg,#2e7d32,#1b5e20);--header-border: #8b5e3c;--font-display: "Playfair Display", Georgia, serif;--font-mono: "Courier Prime", monospace}body{background-color:var(--bg);color:var(--text);font-family:var(--font-mono);transition:background-color .4s ease,color .3s ease}.site-title,.site-tagline,.share-label,.error-state h2,.share-note,.loading-state p{font-family:var(--font-display)}.site-header{border-bottom-color:var(--header-border)}.site-header:after{background:var(--accent)}.logo-mark{color:var(--accent)}.site-tagline{color:var(--text2)}.timer-display{color:var(--timer-color)}.timer-display.recording{color:#e05050}.btn-record{background:var(--btn-rec)}.btn-stop{background:var(--btn-stop)}.btn-play{background:var(--btn-play)}.btn-upload{background:var(--btn-upload)}.share-link-box input{background:var(--bg2);border-color:var(--header-border);color:var(--text)}.status-text{color:var(--text2);font-family:var(--font-display)}.turntable-base{width:300px;height:300px;background:linear-gradient(145deg,var(--body-top),var(--body-bot));border-radius:var(--body-radius, 12px);box-shadow:0 8px 32px var(--shadow),inset 0 1px #ffdc6414,inset 0 -1px #0000004d;position:relative;padding:20px;transition:all .4s ease}.platter{width:200px;height:200px;background:radial-gradient(circle,#2a2828,#1a1818);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-60%,-50%);box-shadow:0 4px 20px #0009,inset 0 2px 4px #ffffff0d;display:flex;align-items:center;justify-content:center}.vinyl{width:190px;height:190px;background:var(--vinyl-bg);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}.vinyl.spinning{animation:spin 2.2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wobble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.01)}50%{transform:rotate(180deg) scale(1)}75%{transform:rotate(270deg) scale(1.01)}to{transform:rotate(360deg) scale(1)}}.groove{position:absolute;border-radius:50%;border:1px solid var(--groove-color, rgba(255,255,255,.06));top:50%;left:50%;transform:translate(-50%,-50%)}.g1{width:180px;height:180px}.g2{width:160px;height:160px}.g3{width:140px;height:140px}.g4{width:120px;height:120px}.g5{width:100px;height:100px}.vinyl-label{width:70px;height:70px;background:var(--label-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 2px 8px #0006;transition:background .4s ease}.label-inner{text-align:center;color:var(--label-text);line-height:1.2}.label-title{display:block;font-family:var(--font-display);font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.label-sub{display:block;font-size:.44rem;opacity:.85}.spindle{position:absolute;width:8px;height:8px;background:radial-gradient(circle,#aaa,#666);border-radius:50%;z-index:3}.tonearm{position:absolute;top:22px;right:22px;z-index:10}.tonearm-left{right:auto;left:22px}.tonearm-base{width:22px;height:22px;background:radial-gradient(circle,var(--needle),color-mix(in srgb,var(--needle) 60%,black));border-radius:50%;border:2px solid rgba(255,220,100,.2);box-shadow:0 2px 6px #0006}.tonearm-arm{position:absolute;top:10px;left:10px;width:80px;height:6px;background:var(--needle-arm, linear-gradient(90deg,#b08040,#c8a060));transform-origin:left center;transform:rotate(-30deg);border-radius:3px;box-shadow:0 1px 4px #0006;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}.tonearm-arm.playing{transform:rotate(-50deg)}.tonearm-left .tonearm-arm{left:auto;right:10px;transform-origin:right center;transform:rotate(30deg)}.tonearm-left .tonearm-arm.playing{transform:rotate(50deg)}.tonearm-head{position:absolute;right:-6px;top:-4px;width:12px;height:14px;background:linear-gradient(135deg,#888,#555);border-radius:2px;box-shadow:0 1px 3px #00000080}.tonearm-left .tonearm-head{right:auto;left:-6px}.label-heart{background:transparent!important;box-shadow:none!important}.heart-shape{width:68px;height:65px;background:var(--label-bg);position:relative;display:flex;align-items:center;justify-content:center;clip-path:path("M34,60 C34,60 4,42 4,22 A14,14 0 0,1 34,16 A14,14 0 0,1 64,22 C64,42 34,60 34,60Z")}[data-theme=classic] .turntable-base{--body-radius: 12px;background:linear-gradient(145deg,#4a2c0f,#2c1608)}[data-theme=classic] .deco-woodgrain{position:absolute;inset:0;border-radius:12px;background-image:repeating-linear-gradient(92deg,transparent,transparent 12px,rgba(255,200,100,.04) 12px,rgba(255,200,100,.04) 13px);pointer-events:none}[data-theme=radio] .turntable-base{border:2px solid #5a3800;box-shadow:0 8px 32px #000000b3,inset 0 0 30px #00000080}[data-theme=radio] .platter{left:40%}[data-theme=radio] .deco-knobs{position:absolute;bottom:16px;right:16px;display:flex;gap:8px;align-items:center;z-index:20}.knob{width:28px;height:28px;background:radial-gradient(circle at 35% 30%,#c8a060,#5a3800);border-radius:50%;border:2px solid #7a5020;position:relative;box-shadow:0 2px 6px #00000080,inset 0 1px #ffdc6433;cursor:pointer;transition:transform .3s}.knob:hover{transform:rotate(30deg)}.knob.small{width:20px;height:20px}.knob-mark{position:absolute;top:3px;left:50%;width:2px;height:8px;background:#ffdc64cc;transform:translate(-50%);border-radius:1px}.knob.small .knob-mark{height:5px;top:2px}[data-theme=radio] .deco-freq{position:absolute;top:18px;left:50%;transform:translate(-10%);display:flex;gap:3px;align-items:flex-end;height:30px;z-index:20}.freq-bar{width:4px;background:linear-gradient(180deg,#d4af37,#7a5020);border-radius:2px;animation:freq-anim .8s ease-in-out infinite alternate}.freq-bar:nth-child(1){height:60%;animation-delay:0s}.freq-bar:nth-child(2){height:80%;animation-delay:.1s}.freq-bar:nth-child(3){height:100%;animation-delay:.15s}.freq-bar:nth-child(4){height:70%;animation-delay:.05s}.freq-bar:nth-child(5){height:90%;animation-delay:.2s}.freq-bar:nth-child(6){height:55%;animation-delay:.12s}.freq-bar:nth-child(7){height:75%;animation-delay:.08s}.freq-bar:nth-child(8){height:85%;animation-delay:.18s}.freq-bar:nth-child(9){height:65%;animation-delay:.03s}@keyframes freq-anim{0%{transform:scaleY(.3);opacity:.6}to{transform:scaleY(1);opacity:1}}[data-theme=boombox] .turntable-base{border:2px solid #333;box-shadow:0 0 0 1px #222,0 8px 40px #ff202033,inset 0 0 20px #000c;width:340px}[data-theme=boombox] .deco-leds{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;gap:4px;z-index:20}.led{width:10px;height:10px;border-radius:2px;background:#111;border:1px solid #333;transition:background .1s,box-shadow .1s}.led.active{background:#ff2020;box-shadow:0 0 6px #ff2020,0 0 12px #ff202080}.led:nth-child(n+9).active{background:#ffea00;box-shadow:0 0 6px #ffea00}.led:nth-child(12).active{background:#0fc;box-shadow:0 0 6px #0fc}[data-theme=boombox] .deco-brand{position:absolute;bottom:14px;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:.55rem;letter-spacing:.3em;color:#444;z-index:20}[data-theme=boombox] .deco-speaker{position:absolute;top:50%;transform:translateY(-50%);width:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:4px;z-index:20}[data-theme=boombox] .deco-speaker.left{left:8px}[data-theme=boombox] .deco-speaker.right{right:8px}[data-theme=boombox] .deco-speaker span{width:6px;height:6px;background:#222;border-radius:50%;border:1px solid #333}[data-theme=boombox] .vinyl-label{box-shadow:0 0 15px #ff202099}[data-theme=valentine] body{background-image:radial-gradient(ellipse at 20% 20%,rgba(233,30,99,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(255,128,171,.12) 0%,transparent 50%)}[data-theme=valentine] .turntable-base{background:linear-gradient(145deg,#e91e63,#c2185b);border-radius:20px;box-shadow:0 8px 40px #e91e6366,inset 0 1px #fff3}[data-theme=valentine] .deco-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px;z-index:30}.sparkle{position:absolute;animation:sparkle-anim 2.5s ease-in-out infinite;color:var(--accent2);text-shadow:0 0 6px rgba(255,128,171,.8)}@keyframes sparkle-anim{0%,to{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}}[data-theme=valentine] .deco-hearts{position:absolute;bottom:0;left:0;right:0;height:60px;pointer-events:none;overflow:hidden;z-index:5}.float-heart{position:absolute;bottom:-20px;font-size:14px;color:#fff9;animation:float-up 3s ease-in-out infinite}@keyframes float-up{0%{transform:translateY(0) rotate(0);opacity:.8}to{transform:translateY(-80px) rotate(20deg);opacity:0}}[data-theme=valentine] .logo-mark:after{content:" ♥";font-size:.8em}[data-theme=minimal] body{background-image:none}[data-theme=minimal] .grain{display:none}[data-theme=minimal] .turntable-base{background:linear-gradient(145deg,#1a1a1a,#0a0a0a);border-radius:50%;width:280px;height:280px;box-shadow:0 12px 50px #00000040,0 2px 4px #0000001a;border:1px solid #222}[data-theme=minimal] .platter{transform:translate(-50%,-50%);left:50%;top:50%}[data-theme=minimal] .tonearm{top:10px;right:-10px}[data-theme=minimal] .site-header{border-bottom:1px solid #e0e0e0}[data-theme=minimal] .site-title{font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:1.6rem}[data-theme=cartoon] body{background-image:radial-gradient(ellipse at 10% 10%,rgba(124,77,255,.15) 0%,transparent 40%),radial-gradient(ellipse at 90% 90%,rgba(255,109,0,.15) 0%,transparent 40%)}[data-theme=cartoon] .turntable-base{border:4px solid #1a0066;border-radius:24px;box-shadow:6px 6px #1a0066,0 0 0 2px #7c4dff}[data-theme=cartoon] .vinyl-label{border:3px solid #1a0066;box-shadow:3px 3px #1a0066}[data-theme=cartoon] .deco-funky-knobs{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:20}.funky-knob{width:36px;height:36px;background:radial-gradient(circle at 30% 30%,#ffea00,#ff6d00);border-radius:50%;border:3px solid #1a0066;box-shadow:3px 3px #1a0066;position:relative;cursor:pointer;transition:transform .3s}.funky-knob:hover{transform:rotate(45deg)}.funky-knob .knob-mark{position:absolute;top:3px;left:50%;width:3px;height:10px;background:#1a0066;transform:translate(-50%);border-radius:2px}.funky-knob.k1{background:radial-gradient(circle at 30% 30%,#ff6d00,#c40)}[data-theme=cartoon] .deco-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px}.cartoon-star{position:absolute;font-size:14px;color:#ffea00;text-shadow:1px 1px 0 #1a0066;animation:star-pulse 1.5s ease-in-out infinite alternate}@keyframes star-pulse{0%{opacity:.6;transform:scale(.8) rotate(0)}to{opacity:1;transform:scale(1.1) rotate(20deg)}}[data-theme=cartoon] .site-title{text-shadow:3px 3px 0 rgba(124,77,255,.3)}[data-theme=cartoon] .btn{border:3px solid #1a0066;box-shadow:3px 3px #1a0066;font-weight:900}[data-theme=cartoon] .btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px #1a0066}[data-theme=steampunk] body{background-image:radial-gradient(ellipse at 30% 20%,rgba(184,115,51,.1) 0%,transparent 50%),repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(184,115,51,.02) 20px,rgba(184,115,51,.02) 21px)}[data-theme=steampunk] .turntable-base{border:3px solid #7a5020;box-shadow:0 8px 32px #000000b3,inset 0 0 20px #00000080,0 0 0 1px #4a3000;background:linear-gradient(145deg,#3d2800,#2a1800,#1a0e00)}[data-theme=steampunk] .deco-gears{position:absolute;z-index:5;pointer-events:none}.gear{position:absolute;color:#b87333;text-shadow:0 0 8px rgba(184,115,51,.5),1px 1px 2px rgba(0,0,0,.8);line-height:1;-webkit-user-select:none;user-select:none}.gear-lg{font-size:3rem;top:8px;right:8px}.gear-sm{font-size:1.4rem;top:48px;right:6px;color:#cd8b3a}.gear-md{font-size:2rem;bottom:8px;left:8px}[data-theme=steampunk] .deco-gauges{position:absolute;bottom:12px;right:12px;display:flex;gap:8px;z-index:20}.gauge{width:44px;height:44px}.gauge-face{width:100%;height:100%;background:radial-gradient(circle,#1a1000,#0f0800);border-radius:50%;border:2px solid #b87333;box-shadow:0 0 8px #b873334d,inset 0 0 6px #00000080;position:relative;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding-bottom:4px;overflow:hidden}.gauge-needle{position:absolute;width:2px;height:16px;background:linear-gradient(180deg,#e05020,#c84010);bottom:50%;left:50%;transform-origin:bottom center;transform:translate(-50%) rotate(-40deg);border-radius:1px;box-shadow:0 0 4px #dc501499}.gauge-label{font-size:.35rem;color:#b87333;letter-spacing:.1em;font-family:var(--font-mono);z-index:2}[data-theme=steampunk] .deco-rivets{position:absolute;inset:0;pointer-events:none}.rivet{position:absolute;width:10px;height:10px;background:radial-gradient(circle at 35% 30%,#cd8b3a,#7a5020);border-radius:50%;box-shadow:0 1px 3px #00000080,inset 0 1px #ffdc6433}.r1{top:8px;left:8px}.r2{top:8px;right:8px}.r3{bottom:8px;left:8px}.r4{bottom:8px;right:8px}[data-theme=steampunk] .vinyl-label{border:2px solid #7a5020;box-shadow:0 0 10px #b8733366,inset 0 0 8px #0006}#theme-picker-btn{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;align-items:center;gap:6px;padding:10px 18px;background:var(--body-top, #2c1a0e);color:var(--accent2, #e8a020);border:2px solid var(--accent, #c8860a);border-radius:100px;font-family:var(--font-mono);font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:0 4px 20px var(--shadow, rgba(0,0,0,.3));transition:all .25s ease;letter-spacing:.04em}#theme-picker-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--shadow, rgba(0,0,0,.4))}#theme-picker-btn.active{background:var(--accent, #c8860a);color:var(--body-top, #2c1a0e)}.tp-icon{font-size:1.1rem}.tp-label{font-size:.8rem}#theme-picker{position:fixed;bottom:80px;right:24px;z-index:999;width:340px;background:var(--bg, #f5f0e8);border:2px solid var(--header-border, #8b5e3c);border-radius:16px;box-shadow:0 16px 60px #0000004d;overflow:hidden;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:all .25s cubic-bezier(.34,1.56,.64,1)}#theme-picker.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}.tp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--header-border, #8b5e3c);background:linear-gradient(135deg,var(--body-top, #4a2c0f),var(--body-bot, #2c1608))}.tp-title{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--accent2, #e8a020);letter-spacing:.05em}.tp-close{width:24px;height:24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--accent2, #e8a020);font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.tp-close:hover{background:#fff3}.tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;max-height:360px;overflow-y:auto;scrollbar-width:thin}.tp-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:var(--bg2, #ede4d0);border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s ease;text-align:center;position:relative;font-family:var(--font-mono)}.tp-card:hover{border-color:var(--accent, #c8860a);transform:translateY(-2px);box-shadow:0 4px 16px var(--shadow, rgba(0,0,0,.2))}.tp-card.active{border-color:var(--accent, #c8860a);background:linear-gradient(135deg,var(--bg2, #ede4d0),var(--bg, #f5f0e8));box-shadow:0 0 0 1px var(--accent, #c8860a)}.tp-card-emoji{font-size:1.6rem;line-height:1}.tp-card-name{font-size:.72rem;font-weight:700;color:var(--text, #2c1a0e);line-height:1.2}.tp-card-desc{font-size:.6rem;color:var(--text2, #5c3a1e);opacity:.75}.tp-active-badge{position:absolute;top:6px;right:6px;background:var(--accent, #c8860a);color:#fff;font-size:.5rem;padding:2px 5px;border-radius:4px;font-weight:700;letter-spacing:.05em}@media(max-width:480px){[data-theme=boombox] .turntable-base{width:300px}[data-theme=minimal] .turntable-base{width:240px;height:240px}#theme-picker{width:calc(100vw - 48px);right:24px}#theme-picker-btn{bottom:16px;right:16px}}