:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f7fb;background:#070a12;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#151c35 0,#070a12 42%,#05060b 100%);color:#f5f7fb}.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:rgba(5,7,13,.76);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.02em;font-size:16px}.brand span{display:block;font-size:9px;letter-spacing:.25em;opacity:.45;margin-top:3px}.ghost{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:8px 13px}.hero{position:relative;overflow:hidden;padding:72px 20px 48px;max-width:850px;margin:auto}.orb{position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(117,139,255,.13);filter:blur(45px);top:15px;right:10%;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin:0 0 12px}.hero h1{font-size:clamp(38px,10vw,70px);line-height:1.02;max-width:760px;margin:0 0 20px}.lead{font-size:17px;line-height:1.9;color:#b8bfd0;max-width:650px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:13px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.btn.primary{background:#fff;color:#070a12}.btn.secondary{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.12)}.btn:disabled{opacity:.55;cursor:wait}.quote,.section,.closing{max-width:850px;margin:0 auto;padding:40px 20px}.quote{position:relative;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);display:flex;gap:16px;align-items:flex-start}.quote>span{font-size:42px;line-height:1;opacity:.3}.quote p{font-size:19px;line-height:1.9;margin:0;flex:1}.quote button{border:0;background:transparent;color:#fff;font-size:24px;opacity:.6;cursor:pointer}.section-head{margin-bottom:20px}.section h2,.closing h2{font-size:28px;margin:0 0 10px}.letters{display:grid;gap:12px}.letter{padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.035);box-shadow:0 10px 30px rgba(0,0,0,.12)}.letter p{line-height:1.9;margin:0 0 12px}.letter small{opacity:.45}.letter.empty{opacity:.65}.write{margin-top:10px}.write>p:not(.eyebrow),.closing p{color:#aeb6c8;line-height:1.9}form{margin-top:22px}textarea{display:block;width:100%;min-height:170px;resize:vertical;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);color:#fff;padding:16px;font:inherit;line-height:1.8;outline:none}textarea:focus,select:focus{border-color:rgba(255,255,255,.35)}.form-row{display:flex;gap:10px;margin-top:10px}select{min-width:120px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#111625;color:#fff;padding:0 12px;font:inherit}form small{display:block;margin-top:12px;opacity:.45}footer{max-width:850px;margin:auto;padding:30px 20px 50px;display:flex;justify-content:space-between;opacity:.45}footer a{color:#fff;text-decoration:none}@media(max-width:520px){.form-row{flex-direction:column}.form-row select,.form-row .btn{min-height:48px}.hero{padding-top:58px}}
#username{display:block;width:100%;margin-bottom:10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);color:#fff;padding:14px 16px;font:inherit;outline:none}#username:focus{border-color:rgba(255,255,255,.35)}.rules{font-size:13px;line-height:1.8;color:#aeb6c8;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);padding:13px 15px;border-radius:14px}.letter-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}.heart{opacity:.7}.stats{display:flex;gap:12px}.stats>div{flex:1;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035);text-align:center}.stats strong{display:block;font-size:28px;margin-bottom:5px}.stats span{opacity:.55;font-size:12px}

/* Ocean world */
.ocean-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,rgba(14,64,92,.34),rgba(2,22,39,.16) 45%,rgba(0,4,10,.86));opacity:.9}.water-light{position:absolute;inset:-15%;background:radial-gradient(ellipse at 50% -5%,rgba(188,239,255,.28),transparent 35%),repeating-linear-gradient(165deg,transparent 0 34px,rgba(120,221,255,.025) 36px 39px);filter:blur(2px);animation:waterMove 14s ease-in-out infinite alternate}.depth-glow{position:absolute;width:70vw;height:70vw;left:15%;top:35%;background:radial-gradient(circle,rgba(0,137,180,.13),transparent 65%);filter:blur(25px)}.bubble{position:absolute;border:1px solid rgba(190,245,255,.35);border-radius:50%;box-shadow:0 0 15px rgba(92,218,255,.12);animation:rise 12s linear infinite}.b1{width:8px;height:8px;left:18%;bottom:-20px}.b2{width:14px;height:14px;left:76%;bottom:-30px;animation-delay:4s}.b3{width:5px;height:5px;left:58%;bottom:-10px;animation-delay:7s}.whale{position:absolute;font-size:64px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35));opacity:.18;animation:swim 30s linear infinite}.whale-a{top:28%;left:-100px}.whale-b{top:62%;left:-140px;font-size:42px;animation-delay:10s;opacity:.12}@keyframes rise{to{transform:translateY(-110vh) translateX(35px);opacity:0}}@keyframes swim{0%{transform:translateX(-120px) translateY(0) scaleX(1)}45%{transform:translateX(55vw) translateY(-25px) scaleX(1)}50%{transform:translateX(58vw) translateY(-25px) scaleX(-1)}100%{transform:translateX(110vw) translateY(15px) scaleX(-1)}}@keyframes waterMove{to{transform:translate3d(-2%,2%,0) rotate(-1deg)}}
.psych-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.psych-grid article{padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(4,16,25,.48);backdrop-filter:blur(10px)}.psych-grid b{font-size:13px}.psych-grid p{color:#aeb6c8;line-height:1.85;margin:10px 0 0}.universe{padding-top:28px}.universe-shell{position:relative;height:min(70vh,680px);min-height:430px;border-radius:28px;overflow:hidden;border:1px solid rgba(170,220,255,.14);background:#01040a;box-shadow:0 25px 80px rgba(0,0,0,.45)}#universeCanvas{position:absolute;inset:0;touch-action:none}#universeCanvas canvas{display:block;width:100%;height:100%}.universe-info{position:absolute;top:16px;right:16px;width:min(330px,calc(100% - 32px));padding:16px;border-radius:18px;background:rgba(2,7,15,.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.11);pointer-events:none}.universe-info strong{display:block;font-size:20px}.universe-info span{display:block;opacity:.55;font-size:11px;letter-spacing:.08em;margin-top:4px}.universe-info p{font-size:13px;line-height:1.7;color:#b9c6d8;margin:9px 0}.universe-info small{opacity:.5}.universe-reset{position:absolute;bottom:16px;right:16px;border:1px solid rgba(255,255,255,.13);background:rgba(2,7,15,.72);color:#fff;border-radius:999px;padding:10px 14px;backdrop-filter:blur(12px);cursor:pointer}.audio-player{display:flex;align-items:center;justify-content:space-between;gap:20px}.audio-player>div:first-child{max-width:600px}.player{display:flex;align-items:center;gap:12px;min-width:min(100%,360px);padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,10,17,.55)}.player .play{width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#061019;font-size:18px;cursor:pointer}.player strong,.player small{display:block}.player small{opacity:.5;margin-top:3px}.player input{max-width:90px;margin-inline-start:auto}.admin-actions{display:flex;gap:10px;margin:20px 0}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.admin-stat-grid div{padding:15px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.admin-stat-grid strong{font-size:25px;display:block}.music-admin{margin-top:24px;padding:18px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}.music-admin input[type=file]{margin-top:10px}.music-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}@media(max-width:700px){.psych-grid{grid-template-columns:1fr}.audio-player{display:block}.player{margin-top:15px;min-width:0}.universe-shell{min-height:520px}.universe-info{left:12px;right:12px;width:auto}.stats{display:grid;grid-template-columns:1fr 1fr}}

/* Final visual pass */
.main-nav{display:flex;align-items:center;gap:18px;margin-inline:auto;font-size:13px}
.main-nav a{color:#c9d2df;text-decoration:none;opacity:.78;transition:opacity .2s,transform .2s}
.main-nav a:hover{opacity:1;transform:translateY(-1px)}
.info-section,.help-section{scroll-margin-top:90px}
.info-section .section-head,.help-section .section-head{max-width:780px}
.help-card{max-width:780px;padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(4,16,25,.5);backdrop-filter:blur(12px)}
.help-card p{color:#b9c6d8;line-height:1.9;margin:9px 0 0}
.audio-player{position:fixed;left:18px;bottom:18px;z-index:50;padding:0!important;background:transparent!important;border:0!important}
.audio-player .player{min-width:0;width:auto;padding:8px 10px;border-radius:999px;background:rgba(3,9,16,.78);backdrop-filter:blur(16px);box-shadow:0 12px 35px rgba(0,0,0,.35)}
.icon-play,.icon-audio{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.icon-play{background:#fff;color:#061019;border:0}
.audio-player input{width:82px;accent-color:#fff}
.whale{position:absolute;width:190px;height:92px;background-image:url('https://commons.wikimedia.org/wiki/Special:FilePath/Humpback_whale_in_ocean.jpg?width=700');background-size:cover;background-position:center;border-radius:55% 48% 48% 55%;filter:saturate(.7) contrast(1.02) brightness(.72);opacity:.28;mix-blend-mode:screen;box-shadow:0 0 30px rgba(85,170,210,.12);overflow:hidden}
.whale:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 55%,rgba(0,0,0,.25));border-radius:inherit}
.whale-a{top:34%;left:-25px;transform:rotate(-5deg) scaleX(-1);animation:whaleSwimA 24s linear infinite}
.whale-b{top:64%;right:-40px;transform:rotate(8deg);animation:whaleSwimB 30s linear infinite;opacity:.18}
@keyframes whaleSwimA{0%{translate:-10px 0}50%{translate:55vw 12px}100%{translate:115vw -4px}}
@keyframes whaleSwimB{0%{translate:10px 0}50%{translate:-50vw -14px}100%{translate:-110vw 4px}}
.reactions{display:flex;align-items:center;gap:14px}
.reaction-btn{appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;padding:4px!important;color:#858e9b;display:inline-flex;align-items:center;gap:5px;font-size:17px;cursor:pointer;transition:color .18s,transform .18s,filter .18s}
.reaction-btn span{font-size:12px;color:#7f8998}
.reaction-btn:hover{color:#fff;transform:translateY(-1px)}
.reaction-btn[data-reaction="heart"]{font-size:21px}
.reaction-btn.active-heart,.reaction-btn[data-reaction="heart"]:focus-visible{color:#ff3b57}
.reaction-btn.active-like,.reaction-btn.active-dislike{color:#fff}
.reaction-btn:disabled{opacity:.65}
@media(max-width:800px){.main-nav{gap:10px;font-size:11px}.main-nav a:nth-child(3){display:none}.top{gap:8px}.brand{font-size:14px}.brand span{font-size:8px}.audio-player{left:12px;bottom:12px}.whale{width:150px;height:74px}}