*{box-sizing:border-box}
:root{--bg:#070807;--panel:#101310;--line:#242a25;--muted:#747e76;--green:#83ff2d;--white:#eef1ed}
html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,system-ui,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:20}
.bg{position:fixed;inset:0;background:radial-gradient(circle at 73% 28%,rgba(67,130,50,.12),transparent 32%),radial-gradient(circle at 20% 85%,rgba(40,80,44,.08),transparent 30%);pointer-events:none}
.topbar{height:74px;max-width:1180px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}
.logo{color:var(--white);font-size:11px;font-weight:900;letter-spacing:.13em;text-decoration:none}.logo span{color:var(--green)}
nav{display:flex;gap:32px}nav a,.join{color:#69736b;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.12em}nav a:hover,.join:hover{color:var(--green)}.join{color:var(--green)}
.hero{max-width:1180px;min-height:700px;height:calc(100vh - 74px);margin:auto;padding:0 24px;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-copy{position:relative;z-index:2;width:52%;padding-bottom:40px}.tiny{font-size:8px;letter-spacing:.19em;font-weight:900;color:var(--green);margin-bottom:16px}
.hero h1{font-size:clamp(66px,8vw,108px);line-height:.84;letter-spacing:-.085em;margin:0}.hero h1 em,.section-heading h2 em,.playlist-intro h2 em,.ottrbot h2 em{color:var(--green);font-style:normal}
.hero-copy>p{max-width:450px;color:var(--muted);line-height:1.8;font-size:14px;margin:28px 0}
.hero-actions{display:flex;gap:12px}.hero-actions a,.hero-actions button{border:1px solid var(--line);background:transparent;color:var(--white);padding:13px 16px;border-radius:8px;font:800 9px Inter;text-decoration:none;letter-spacing:.05em;cursor:pointer}.hero-actions a{background:var(--green);color:#071006;border-color:var(--green)}
.hero-art{position:absolute;right:-55px;bottom:-5px;width:57%;height:94%;display:flex;justify-content:center;align-items:end}.hero-art img{height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}.glow{position:absolute;width:480px;height:480px;border-radius:50%;background:rgba(83,255,39,.08);filter:blur(70px);right:12%;bottom:10%}

.music-section,.playlists,.ottrbot,.socials{max-width:1180px;margin:auto;padding:115px 24px;border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;gap:70px;align-items:end}.section-heading h2,.playlist-intro h2{font-size:58px;line-height:.88;letter-spacing:-.07em;margin:0}.section-heading>p{max-width:390px;color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 5px}
.music-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;margin-top:65px}
.discord-player-wrap{background:#0c0e0c;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.25)}
.discord-player{max-width:560px}.player-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}.bot-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid #3b403b}.bot-avatar img{width:100%;height:100%;object-fit:cover}.bot-name{font-size:13px;font-weight:800}.bot-name span{background:#5d9eff;color:white;font-size:8px;border-radius:3px;padding:2px 4px;margin-left:3px}.timestamp{font-size:8px;color:#69716b;margin-top:2px}
.player-card{background:linear-gradient(135deg,#111411,#0b0d0b);border-left:4px solid #5865f2;padding:14px 14px 15px;border-radius:3px}.player-title{font-size:14px;font-weight:800;margin-bottom:10px}.player-card p{font-size:11px;color:#d0d4d0;line-height:1.55;margin:0 0 12px}.player-grid{display:grid;gap:9px}.player-grid div,.player-stats div{display:flex;flex-direction:column;gap:3px}.player-grid b,.player-stats b{font-size:11px}.player-grid span,.player-stats span{font-size:11px;color:#c0c5c0}.player-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:11px}.command-hint{font-size:10px;margin-top:14px;color:#d0d4d0}
.discord-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.discord-buttons button{border:0;background:#5865f2;color:white;border-radius:4px;padding:8px 13px;font:700 10px Inter;cursor:pointer}.discord-buttons button:hover{filter:brightness(1.1)}.discord-buttons .danger{background:#bd3d3d}.discord-buttons .like{background:#1fbd7a}
.track-panel{border:1px solid var(--line);border-radius:16px;padding:20px;background:#0b0d0b}.panel-head{display:flex;justify-content:space-between;color:#59635b;font-size:8px;font-weight:900;letter-spacing:.15em;margin-bottom:8px}.track{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:13px 9px;border-radius:10px;border-bottom:1px solid #1b211c;cursor:pointer}.track:hover,.track.active{background:#121612}.track.active{outline:1px solid #283329}.cover{width:46px;height:46px;border-radius:7px;display:grid;place-items:center;font-size:13px;font-weight:900;color:#071006}.cover.green{background:var(--green)}.cover.gray{background:#555c55;color:#fff}.cover.black{background:#1e251f;color:var(--green)}.track strong{display:block;font-size:12px}.track small{display:block;color:#667068;font-size:8px;margin-top:4px}.track .play-mini{color:var(--green);font-size:14px}.progress{height:2px;background:#252c26;margin-top:7px}.progress b{display:block;height:100%;background:var(--green);width:0}
.playlist-intro{display:flex;align-items:end;justify-content:space-between;gap:60px}.playlist-intro p{max-width:420px;color:var(--muted);line-height:1.8;font-size:13px;margin:0}.playlist-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:55px}.playlist-card{display:flex;align-items:center;text-align:left;gap:15px;padding:14px;background:#0c0f0c;border:1px solid var(--line);border-radius:12px;color:var(--white);cursor:pointer}.playlist-card:hover{border-color:#3a463c;transform:translateY(-2px)}.playlist-card .cover{flex:none;width:65px;height:65px}.playlist-card small,.playlist-card i{display:block;font-size:8px;color:#59635b;font-style:normal}.playlist-card strong{display:block;font-size:13px;margin:7px 0}.playlist-card i{color:#748078}
.ottrbot{display:grid;grid-template-columns:180px 1fr;gap:55px;align-items:center}.otter-image img{width:165px;height:165px;object-fit:cover;border-radius:50%;filter:drop-shadow(0 20px 35px rgba(0,0,0,.4))}.ottrbot h2{font-size:52px;line-height:.9;letter-spacing:-.07em;margin:0}.ottrbot p{max-width:600px;color:var(--muted);font-size:13px;line-height:1.85;margin-top:24px}
.socials{padding-top:145px;padding-bottom:145px}
.socials>.tiny{margin-bottom:24px}
.socials:after{content:"find me wherever you hang out";display:block;color:#303730;font-size:clamp(34px,5vw,64px);font-weight:900;letter-spacing:-.07em;line-height:.9;margin-top:28px;max-width:700px}
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:55px;border:0}
.social-grid a{min-height:92px;padding:22px 23px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--white);font-size:15px;font-weight:800;background:#0b0e0b;display:flex;flex-direction:column;justify-content:space-between;transition:.2s ease}
.social-grid a:hover{border-color:#445045;background:#101510;transform:translateY(-2px)}
.social-grid span{color:#5c675e;font-size:9px;font-weight:600;margin-top:18px}
footer{max-width:1180px;margin:auto;padding:28px 24px 50px;border-top:1px solid var(--line);color:#414a43;font-size:8px;font-weight:900;letter-spacing:.14em;display:flex;justify-content:space-between}
@media(max-width:850px){nav{display:none}.hero{height:auto;min-height:720px}.hero-copy{width:100%;align-self:flex-start;padding-top:120px}.hero-art{width:100%;right:-150px;height:70%;opacity:.48}.section-heading,.playlist-intro{display:block}.section-heading>p,.playlist-intro p{margin-top:25px}.music-layout{grid-template-columns:1fr}.playlist-row{grid-template-columns:1fr}.ottrbot{grid-template-columns:1fr;gap:25px}.player-stats{grid-template-columns:1fr 1fr}.social-grid{grid-template-columns:1fr}.socials{padding-top:105px;padding-bottom:105px}}
@media(max-width:500px){.topbar{padding:0 16px}.join{display:none}.hero,.music-section,.playlists,.ottrbot,.socials{padding-left:16px;padding-right:16px}.hero h1{font-size:61px}.hero-art{right:-190px}.section-heading h2,.playlist-intro h2{font-size:47px}.discord-player-wrap{padding:12px}.discord-buttons button{padding:8px 10px}.player-stats{grid-template-columns:1fr 1fr}.social-grid span{display:block;float:none;margin-top:6px}}

.discord-section{max-width:1180px;margin:auto;padding:145px 24px;min-height:520px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;overflow:hidden;position:relative}
.discord-copy h2{font-size:clamp(65px,7vw,100px);line-height:.84;letter-spacing:-.08em;margin:0}
.discord-copy h2 em{font-style:normal;color:var(--green)}
.discord-copy p{max-width:440px;color:var(--muted);font-size:13px;line-height:1.85;margin:28px 0}
.discord-join{display:inline-block;padding:14px 18px;background:var(--green);border:1px solid var(--green);border-radius:8px;color:#071006;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.06em}
.discord-mark{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
.discord-mark:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(131,255,45,.06);filter:blur(45px)}
.discord-mark img{position:relative;width:min(310px,70%);height:min(310px,70%);object-fit:contain;filter:drop-shadow(0 30px 45px rgba(0,0,0,.5))}
.discord-mark span{position:absolute;right:5%;bottom:8%;font-size:9px;font-weight:800;letter-spacing:.12em;color:#485149;transform:rotate(-5deg)}
@media(max-width:850px){.discord-section{grid-template-columns:1fr;gap:40px;padding-top:105px;padding-bottom:105px}.discord-mark{min-height:260px}.discord-mark img{width:230px;height:230px}}

.track-panel{max-height:610px;overflow:auto;scrollbar-width:thin}
.track-panel::-webkit-scrollbar{width:5px}.track-panel::-webkit-scrollbar-thumb{background:#293029;border-radius:10px}