:root{color-scheme:dark;--bg:#100b20;--panel:#171128;--panel2:#211735;--line:#33264b;--text:#f8f5ff;--muted:#b3a8c9;--purple:#a78bfa;--pink:#e879f9;--deep:#7c3aed;--radius:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 50% -20%,#30204c 0%,transparent 52%),var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.stars{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.tiny-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#e9ddff;box-shadow:0 0 8px #c4b5fd;animation:twinkle 3.5s ease-in-out infinite alternate}
@keyframes twinkle{from{transform:scale(.7);opacity:.15}to{transform:scale(1.6);opacity:.8}}
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d}
.brand{display:flex;gap:10px;align-items:center;font:700 18px "Space Grotesk",sans-serif;letter-spacing:2px}
.brand-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #a78bfa77;border-radius:12px;background:#a78bfa17;color:#c4b5fd;font-size:22px;box-shadow:0 0 24px #8b5cf622}
.nav nav{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:13px}
.nav nav a:hover,.text-link:hover{color:white}
.nav .nav-cta{padding:10px 16px;border:1px solid #a78bfa55;border-radius:12px;color:#e9ddff;background:#a78bfa12}
.nav-cta span{margin-left:8px}
.main-content{min-height:60vh}
.hero{position:relative;text-align:center;padding:100px 0 94px;overflow:hidden}
.eyebrow,.section-kicker,.feature-tag{font-size:10px;letter-spacing:2px;font-weight:700;color:#c4b5fd}
.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid #a78bfa33;background:#a78bfa0d;padding:9px 14px;border-radius:999px}
.pulse-dot{width:6px;height:6px;background:#c4b5fd;border-radius:50%;box-shadow:0 0 12px #c4b5fd;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35;box-shadow:0 0 2px #c4b5fd}}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;line-height:1.13;letter-spacing:-.035em}
.hero h1{font-size:clamp(42px,7vw,76px);margin:27px 0 22px;font-weight:600}
.gradient-text{background:linear-gradient(100deg,#c4b5fd 10%,#e879f9 58%,#a5b4fc 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{max-width:610px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.9}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.button{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 18px;border-radius:13px;cursor:pointer;font-size:13px;font-weight:700;transition:transform .2s,box-shadow .2s,border-color .2s}
.button:hover{transform:translateY(-2px)}
.button.primary{background:linear-gradient(110deg,#8b5cf6,#a855f7 55%,#c084fc);color:white;box-shadow:0 8px 28px #8b5cf633}
.button.primary:hover{box-shadow:0 12px 34px #8b5cf655}
.button.ghost{background:#ffffff05;border-color:#ffffff20;color:#e9ddff}
.button.danger{background:#ef444414;border-color:#ef444455;color:#fca5a5}
.hero-orbit{position:absolute;border:1px solid #a78bfa12;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-35%);pointer-events:none}
.orbit-one{width:570px;height:570px}.orbit-two{width:760px;height:760px}
.floating-star{position:absolute;color:#c4b5fd;text-shadow:0 0 18px #a78bfa;animation:float 4s ease-in-out infinite}
.star-a{top:23%;left:16%;font-size:22px}.star-b{top:37%;right:14%;font-size:32px;animation-delay:-1s}.star-c{bottom:16%;left:24%;font-size:16px;animation-delay:-2s}
@keyframes float{50%{transform:translateY(-12px) rotate(12deg)}}
.hero-note{position:relative;z-index:1;margin:64px auto 0;width:min(370px,100%);display:flex;align-items:center;text-align:left;gap:12px;padding:14px 16px;border:1px solid #ffffff15;border-radius:17px;background:#171128d9;box-shadow:0 16px 50px #0003;backdrop-filter:blur(14px)}
.note-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#8b5cf633,#e879f933);font-size:23px;color:#e9d5ff}
.hero-note b,.hero-note small{display:block}.hero-note b{font-size:12px}.hero-note small{font-size:10px;color:var(--muted);margin-top:3px}
.sound-bars{display:flex;align-items:center;gap:3px;margin-left:auto;height:25px}.sound-bars i{width:3px;border-radius:4px;background:#c4b5fd;animation:bars .8s ease-in-out infinite alternate}.sound-bars i:nth-child(1){height:8px}.sound-bars i:nth-child(2){height:17px;animation-delay:-.4s}.sound-bars i:nth-child(3){height:23px;animation-delay:-.2s}.sound-bars i:nth-child(4){height:12px;animation-delay:-.6s}.sound-bars i:nth-child(5){height:19px;animation-delay:-.1s}
@keyframes bars{to{transform:scaleY(.4);opacity:.5}}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px 0 80px}
.feature-card{position:relative;padding:25px 24px 27px;border:1px solid #ffffff12;background:linear-gradient(145deg,#ffffff08,#ffffff02);border-radius:20px;transition:.25s;overflow:hidden}
.feature-card:hover{transform:translateY(-5px);border-color:#a78bfa55;background:#a78bfa0b}
.feature-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#a78bfa17;border:1px solid #a78bfa2b;color:#d8b4fe;font-size:23px;margin-bottom:26px}
.feature-tag{font-size:9px;color:#9e8bbf}
.feature-card h2{font-size:22px;margin:12px 0}.feature-card p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:0;max-width:260px}.feature-arrow{position:absolute;right:23px;top:25px;color:#c4b5fd}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:10px 0 24px}
.section-kicker{font-size:9px;color:#9e8bbf}.section-head h2{font-size:clamp(24px,4vw,34px);margin:9px 0 0}
.text-link{font-size:12px;color:#c4b5fd;white-space:nowrap}.text-link span{margin-left:8px}
.message-grid,.wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:65px}
.message-card{min-width:0;padding:20px;border:1px solid #ffffff13;border-radius:19px;background:linear-gradient(145deg,#1c1530ed,#151023ed);box-shadow:0 12px 36px #00000012}
.message-top{display:flex;align-items:center;gap:9px;font-size:11px;color:#c7bdd9}
.anonymous-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#a78bfa1b;border:1px solid #a78bfa2c;color:#c4b5fd}
.message-dot{margin-left:auto;font-size:8px;color:#a78bfa}
.recipient{font-size:9px;letter-spacing:1.5px;color:#c4b5fd;margin-top:20px}
.message-body{font-size:13px;color:#eee8fa;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin:17px 0}
.song-link{display:inline-flex;max-width:100%;margin:3px 6px 3px 0;padding:7px 10px;border:1px solid #a78bfa2c;border-radius:9px;background:#a78bfa0d;color:#d8b4fe;font-size:10px;overflow-wrap:anywhere}
.message-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff0d;margin-top:20px;padding-top:13px;color:#9e8bbf;font-size:10px}
.empty-state{grid-column:1/-1;text-align:center;padding:52px 20px;border:1px dashed #a78bfa40;border-radius:20px;background:#a78bfa07}
.empty-state>span{font-size:30px;color:#c4b5fd}.empty-state h3{margin:12px 0;font-size:23px}.empty-state p{font-size:13px;color:var(--muted);max-width:420px;margin:0 auto 20px}
.footer{text-align:center;padding:35px 0 42px;border-top:1px solid #ffffff0d;color:#9286aa}
.footer-mark{font-size:22px;color:#c4b5fd}.footer p{font-size:11px;margin:7px 0}.footer small{font-size:8px;letter-spacing:2px}
.form-shell{max-width:650px;margin:45px auto 80px}.back-link{display:inline-block;font-size:12px;color:#b3a8c9;margin-bottom:30px}.back-link:hover{color:white}
.form-heading{text-align:center;margin-bottom:28px}.form-symbol{display:grid;place-items:center;margin:0 auto 18px;width:52px;height:52px;border-radius:17px;border:1px solid #a78bfa4a;background:#a78bfa13;color:#d8b4fe;font-size:27px;box-shadow:0 0 35px #8b5cf622}
.form-heading h1{font-size:clamp(38px,6vw,53px);margin:15px 0}.form-heading p{font-size:13px;color:var(--muted);max-width:440px;margin:0 auto;line-height:1.8}
.glass-form{padding:clamp(20px,5vw,34px);border:1px solid #ffffff17;background:linear-gradient(145deg,#1c1530f5,#151023f5);border-radius:23px;box-shadow:0 22px 80px #0003}
.glass-form label{display:block;font-size:12px;font-weight:600;color:#e8e0f6;margin:0 0 9px}
.glass-form input:not([type=file]),.glass-form textarea{display:block;width:100%;border:1px solid #ffffff1b;background:#100b20;color:#f8f5ff;border-radius:12px;padding:13px 14px;outline:none;margin-bottom:21px;font-size:13px;transition:border-color .2s,box-shadow .2s}
.glass-form textarea{resize:vertical;min-height:135px;line-height:1.8}
.glass-form input:focus,.glass-form textarea:focus{border-color:#a78bfa99;box-shadow:0 0 0 3px #a78bfa12}
.glass-form input::placeholder,.glass-form textarea::placeholder{color:#776b8e}
.optional{color:#887b9e;font-weight:400;font-size:10px;margin-left:5px}.required{color:#e879f9}
.char-count{text-align:right;margin-top:-15px;margin-bottom:18px;font-size:10px;color:#8d81a5}
.form-divider{display:flex;align-items:center;gap:12px;margin:26px 0;color:#8d81a5;font-size:9px;letter-spacing:2px}.form-divider:before,.form-divider:after{content:"";height:1px;background:#ffffff12;flex:1}
.input-with-icon{position:relative}.input-with-icon>span{position:absolute;top:10px;left:13px;font-size:20px;color:#c4b5fd}.input-with-icon input{padding-left:43px!important}
.upload-zone{position:relative;display:flex!important;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:24px 12px;border:1px dashed #a78bfa55;border-radius:14px;background:#a78bfa08;cursor:pointer;gap:6px}
.upload-zone:hover{background:#a78bfa12;border-color:#c4b5fd}.upload-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#a78bfa1c;color:#d8b4fe;font-size:24px}.upload-zone strong{font-size:12px}.upload-zone small{font-size:10px;color:#9e91b5;font-weight:400}.upload-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.privacy-note{display:flex;gap:9px;font-size:10px;line-height:1.7;color:#b2a4ca;margin:20px 0}.privacy-note span{color:#c4b5fd;font-size:16px}
.submit-button{width:100%;margin-top:5px}.form-footnote{text-align:center;font-size:9px;color:#827695;line-height:1.7;margin:15px 0 0}
.flash{padding:13px 16px;border-radius:12px;margin:20px 0;font-size:12px}.flash.success{background:#34d39912;border:1px solid #34d39944;color:#a7f3d0}.flash.error{background:#f8717112;border:1px solid #f8717144;color:#fecaca}.flash ul{margin:7px 0 0;padding-left:18px}
.wall-heading{text-align:center;padding:68px 0 44px}.wall-heading h1{font-size:clamp(39px,6vw,62px);margin:20px 0}.wall-heading p{color:var(--muted);font-size:13px;margin-bottom:23px}.wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.media-preview{display:block;width:100%;max-height:340px;object-fit:contain;border-radius:12px;background:#0b0712;margin:10px 0}
.report-form{display:flex;gap:5px;align-items:center}.report-form select{max-width:95px;background:#171128;color:#b3a8c9;border:1px solid #ffffff16;border-radius:6px;font-size:9px;padding:5px}.report-button{background:transparent;border:0;color:#b3a8c9;font-size:9px;cursor:pointer}.report-button:hover{color:#fca5a5}
.pagination{display:flex;justify-content:center;gap:6px;margin:25px 0 60px;font-size:12px}.pagination nav{width:100%}.pagination nav>div:first-child{display:none}.pagination nav>div:last-child{display:flex;justify-content:space-between;align-items:center;gap:12px}.pagination a,.pagination span[aria-current]{padding:7px 11px;border:1px solid #ffffff1a;border-radius:8px}.pagination a{color:#d8b4fe}.pagination span[aria-current]{background:#8b5cf6;color:white}
.admin-login{max-width:460px;margin:75px auto}.admin-page{padding:55px 0 75px}.admin-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:27px}.admin-title h1,.admin-section-head h2,.section-head h1{font-size:clamp(28px,4vw,40px);margin:10px 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px}.stat-card{padding:20px;border:1px solid #ffffff15;border-radius:16px;background:#1b1430}.stat-card small{display:block;color:#a99bbf;font-size:10px}.stat-card strong{display:block;font:600 32px "Space Grotesk",sans-serif;margin-top:10px}
.admin-section-head{margin-top:10px}.admin-message{display:flex;justify-content:space-between;gap:25px;padding:22px;margin:15px 0;border:1px solid #ffffff15;background:#1a132b;border-radius:17px}.admin-message-content{min-width:0;flex:1}.status-pill{margin-left:auto;font-size:9px;color:#fcd34d;background:#f59e0b14;border:1px solid #f59e0b30;padding:4px 8px;border-radius:999px}.admin-actions{display:flex;flex-direction:column;gap:8px;min-width:115px}.admin-actions .button{width:100%;padding:9px 10px;font-size:11px}
@media(max-width:760px){.wrap{width:min(100% - 28px,600px)}.nav{height:72px}.brand{font-size:15px;letter-spacing:1px}.nav nav{gap:12px;font-size:11px}.nav .nav-cta{padding:9px 10px}.hero{padding:76px 0 70px}.hero h1{font-size:clamp(39px,10vw,62px)}.hero-copy{font-size:13px;padding:0 7px}.hero-note{margin-top:46px}.orbit-one{width:380px;height:380px}.orbit-two{width:510px;height:510px}.star-a{left:5%}.star-b{right:5%}.feature-grid{grid-template-columns:1fr;gap:11px;padding-bottom:55px}.feature-card{padding:20px}.feature-icon{margin-bottom:17px}.feature-card h2{font-size:20px}.feature-card p{max-width:100%}.message-grid{grid-template-columns:1fr}.wall-grid{grid-template-columns:1fr}.section-head{align-items:start}.section-head h2{font-size:25px}.form-shell{margin-top:28px}.wall-heading{padding:50px 0 32px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card{padding:15px}.stat-card strong{font-size:27px}.admin-message{flex-direction:column;gap:15px}.admin-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.admin-actions .button{font-size:10px;padding:9px 5px}.admin-title h1{font-size:27px}}
@media(max-width:390px){.nav nav>a:first-child{display:none}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.admin-actions{grid-template-columns:1fr}.message-bottom{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}