.site-v2 { background:radial-gradient(ellipse 65% 25% at 50% 12%,#3e121416,transparent),#090909!important; }
.site-nav { height:88px; border:0; }.site-nav .nav-actions>.v-button { background:#ef334017; border-color:#ef334055; color:#ff646d!important; border-radius:30px; }.nav-links { gap:25px; }
.reference-hero { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:55px 0 28px; min-height:740px; }
.announcement { display:inline-flex; align-items:center; gap:9px; padding:4px 11px 4px 4px; border:1px solid #ffffff12; border-radius:30px; color:#a4a4a4!important; font-size:11px; background:#15151590; }
.announcement>span { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; background:#ef334017; border-radius:30px; color:#ff646d; }.announcement>i { font-size:13px; }
.reference-hero h1 { margin:28px 0 22px; font:600 clamp(43px,5.6vw,76px)/1.08 var(--v-display); letter-spacing:-3.6px; }.reference-hero h1 em { color:#ef3340; font-style:normal; text-shadow:0 0 35px #ef334025; }
.hero-composition { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,410px) minmax(0,1fr); gap:30px; align-items:start; margin-top:12px; }
.hero-center { position:relative; z-index:4; }.hero-center>p { color:#999; font-size:15px; line-height:1.8; margin:0 0 24px; }.claim-form { max-width:350px; margin:auto; }.claim-form>label { display:block; font-size:11px; color:#777; margin-bottom:9px; text-align:left; }.claim-input { display:flex; align-items:center; gap:1px; height:50px; padding:0 17px; border:1px solid #ffffff20; background:#151515; border-radius:30px; }.claim-input:focus-within { border-color:#ef334090; box-shadow:0 0 0 3px #ef334012; }.claim-input>span { color:#747474; font-size:13px; white-space:nowrap; }.claim-input input { background:none; border:0; color:#fff; min-width:0; width:100%; outline:none!important; padding:8px 0; font-size:13px; }.claim-input input::placeholder { color:#a0a0a0; }.claim-form .v-button { width:100%; border-radius:30px; margin-top:10px; height:46px; background:#ef334015; color:#ff636c!important; border-color:#ef33405c; font-size:13px; }.claim-form .v-button:hover { background:#ef3340; color:#fff!important; }.hero-center>p.claim-note { margin:12px 0 0; font-size:10px; color:#666; }
.hero-community { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; text-align:left; color:#717171; font-size:10px; line-height:1.5; }.hero-community strong { color:#b7b7b7; font-weight:500; }.community-avatars { display:flex; padding-left:6px; }.community-avatars b { display:grid; place-items:center; width:29px; height:29px; margin-left:-6px; border:2px solid #090909; border-radius:50%; font-weight:400; background:linear-gradient(135deg,#494949,#151515); color:#ddd; }.community-avatars b:nth-child(2) { background:linear-gradient(135deg,#80353a,#211314); }.community-avatars b:nth-child(4) { background:linear-gradient(135deg,#777,#242424); }
.profile-stack { position:relative; height:260px; margin-top:56px; perspective:1000px; }.showcase-card { display:flex; position:absolute; inset:0; width:100%; height:225px; align-items:center; flex-direction:column; padding:14px; border:1px solid #ffffff25; border-radius:20px; background:#161616; color:white; box-shadow:0 15px 40px #0008; transition:transform .5s,opacity .5s; cursor:pointer; overflow:hidden; }.showcase-card[data-depth="0"] { z-index:3; transform:rotate(-4deg); }.showcase-card[data-depth="1"] { z-index:2; transform:translate(-16px,10px) rotate(-10deg) scale(.96); }.showcase-card[data-depth="2"] { z-index:1; transform:translate(-30px,21px) rotate(-16deg) scale(.92); }.right .showcase-card[data-depth="0"] { transform:rotate(4deg); }.right .showcase-card[data-depth="1"] { transform:translate(16px,10px) rotate(10deg) scale(.96); }.right .showcase-card[data-depth="2"] { transform:translate(30px,21px) rotate(16deg) scale(.92); }.showcase-card:hover[data-depth="0"] { transform:rotate(0) translateY(-5px); }.showcase-card:focus-visible { outline:2px solid #ef3340; outline-offset:5px; }
.showcase-card.sample-noir { background:radial-gradient(ellipse at 40% 50%,#ffffff10,transparent 60%),linear-gradient(135deg,#252525,#090909 65%); }.showcase-card.sample-red { background:radial-gradient(ellipse at 70% 20%,#e72b3340,transparent 65%),repeating-linear-gradient(120deg,transparent 0 30px,#ffffff03 30px 31px),#1a0c0e; }.showcase-card.sample-silver { background:radial-gradient(ellipse at 70% 20%,#88888840,transparent 65%),linear-gradient(135deg,#313131,#101010); }
.sample-top { display:flex; justify-content:space-between; width:100%; color:#ffffff45; font-size:7px; }.sample-top i { color:#ddd; font-size:12px; }.sample-avatar { display:grid; place-items:center; flex-shrink:0; margin:8px 0 6px; width:48px; height:48px; border:1px solid #ffffff40; border-radius:50%; background:radial-gradient(circle at 30% 20%,#ffffff36,#ffffff05); box-shadow:0 0 25px #ffffff08; font-size:26px; }.sample-red .sample-avatar { border-color:#ef334070; background:#ef334018; }.showcase-card>strong { font:600 18px var(--v-display); letter-spacing:-.5px; text-shadow:0 0 12px #ffffff50; }.sample-badges { display:flex; gap:5px; padding:3px 7px; margin-top:5px; border-radius:20px; border:1px solid #ffffff25; font-size:10px; filter:drop-shadow(0 0 2px #ffffff70); }.sample-tag { margin-top:6px; font-size:8px; color:#bbb; }.sample-social { display:flex; gap:12px; margin-top:9px; font-size:17px; }.sample-footer { display:flex; justify-content:space-between; width:100%; margin-top:auto; padding-top:10px; font-size:8px; color:#aaa; }.sample-footer>span:first-child { background:#09090999; padding:3px 6px; border:1px solid #ffffff20; border-radius:30px; }
.stack-pagination { position:absolute; top:255px; left:50%; transform:translateX(-50%); display:flex; gap:5px; }.stack-pagination button { width:6px; height:6px; padding:0; border:0; border-radius:20px; background:#ffffff25; cursor:pointer; position:relative; transition:width .2s; }.stack-pagination button[aria-pressed="true"] { width:20px; background:#ef3340; }.stack-pagination button::after { content:''; position:absolute; inset:-8px; }.hero-scroll { display:flex; align-items:center; gap:9px; margin-top:47px; color:#555!important; font-size:10px; }.hero-scroll i { color:#b0b0b0; }
.stats-strip { margin-top:10px; }.section-heading-v2 h2 em,.connection-copy em { font-style:normal; color:#ef3340; }.connection-section,.soundtrack-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:105px; padding:70px 35px 95px; }.connection-art { padding:35px 0; position:relative; }.connection-art::before { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(#ef33400c,transparent 65%); z-index:-1; }.connection-tile { display:flex; gap:15px; align-items:center; border:1px solid #ffffff17; background:linear-gradient(120deg,#1d1d1d,#111); border-radius:17px; padding:20px; margin:0 0 13px; box-shadow:0 12px 25px #0004; }.connection-tile>i { display:grid; place-items:center; width:44px; height:44px; background:#ffffff08; border:1px solid #ffffff10; border-radius:12px; font-size:25px; }.connection-tile strong { display:block; font-size:12px; font-weight:500; }.connection-tile small { display:block; color:#777; font-size:10px; margin-top:4px; }.connection-tile b { color:#777; margin-left:auto; font-size:16px; font-weight:400; }.tile-discord { transform:rotate(-5deg) translateX(-9px); }.tile-spotify { position:relative; z-index:2; transform:rotate(2deg) translateX(15px); }.tile-spotify>i { color:#ef3340; background:#ef33400a; border-color:#ef334025; }.tile-game { transform:rotate(-3deg) translateX(-5px); }.art-caption { display:block; text-align:center; margin-top:30px; font-size:8px; letter-spacing:2px; color:#555; }
.connection-copy h2 { font:600 clamp(34px,4vw,51px)/1.12 var(--v-display); letter-spacing:-2px; margin:19px 0; }.connection-copy p { color:#909090; font-size:13px; line-height:1.9; margin-bottom:24px; max-width:390px; }.connection-copy .v-button { border-radius:30px; font-size:12px; }.soundtrack-section { padding-top:35px; }.soundtrack-note { display:block; color:#5d5d5d; margin-top:15px; font-size:10px; }.sound-player { padding:25px; max-width:355px; width:100%; margin:auto; border:1px solid #ffffff18; background:radial-gradient(ellipse at 90% 0%,#7b272a19,transparent 65%),#141414; border-radius:23px; transform:rotate(5deg); box-shadow:0 35px 65px #0005; }.player-overline { font-size:8px; letter-spacing:2px; color:#777; }.record-art { display:grid; place-items:center; padding:25px; }.record { display:grid; place-items:center; width:173px; height:173px; background:repeating-radial-gradient(circle,#181818 0 2px,#262626 3px 4px); border:1px solid #444; border-radius:50%; box-shadow:0 12px 25px #0007; }.record>span { display:grid; place-items:center; width:58px; height:58px; background:#bc2430; color:#fff; border:3px solid #ef334050; border-radius:50%; font-size:26px; }.track-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; }.track-copy strong { font-size:12px; font-weight:500; }.track-copy small { display:block; color:#777; font-size:10px; margin-top:4px; }.track-copy>i { color:#ef3340; }.player-timeline { margin-top:22px; height:3px; border-radius:10px; background:#ffffff13; }.player-timeline span { display:block; width:38%; height:100%; background:#ef3340; border-radius:10px; }.player-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:17px; color:#aaa; }.player-bottom>span { color:#555; font-size:7px; letter-spacing:1px; }.player-bottom>div { display:flex; align-items:center; gap:18px; font-size:13px; }.player-bottom>div .ti-player-play-filled { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#ef3340; color:#fff; font-size:13px; }.player-bottom>i { font-size:12px; }
@media(min-width:1400px) { .reference-hero { padding-top:75px; }.hero-composition { gap:55px; }.profile-stack { margin-top:65px; } }
@media(max-width:1000px) { .hero-composition { grid-template-columns:minmax(0,1fr) minmax(260px,360px) minmax(0,1fr); gap:20px; }.showcase-card { padding:12px 8px; }.sample-top { font-size:6px; }.sample-tag { font-size:7px; }.sample-footer { font-size:6px; }.reference-hero h1 { font-size:64px; }.connection-section,.soundtrack-section { gap:50px; padding-left:10px; padding-right:10px; }.nav-links { gap:17px; } }
@media(max-width:760px) { .hero-composition { grid-template-columns:1fr 1fr; gap:30px; max-width:540px; }.hero-center { grid-column:1/-1; grid-row:1; }.profile-stack { margin-top:25px; height:230px; }.showcase-card { height:210px; }.stack-pagination { top:235px; }.reference-hero { padding-top:30px; }.reference-hero h1 { font-size:53px; letter-spacing:-2.7px; margin-bottom:25px; }.hero-center>p { font-size:14px; }.hero-scroll { margin-top:45px; }.connection-section,.soundtrack-section { grid-template-columns:1fr; gap:30px; padding:35px 10px 60px; }.connection-copy h2 { font-size:42px; }.connection-section .connection-copy { grid-row:1; }.sound-player { max-width:320px; }.connection-art { max-width:450px; width:100%; margin:auto; }.connection-copy { max-width:450px; width:100%; margin:auto; }.announcement { font-size:9px; gap:6px; } }
@media(max-width:400px) { .reference-hero h1 { font-size:44px; }.sample-tag { max-width:130px; }.sample-footer>span:last-child { display:none; }.hero-composition { gap:15px; }.announcement { font-size:8px; }.claim-form { max-width:300px; }.nav-actions { font-size:12px; gap:10px; } }
@media(prefers-reduced-motion:reduce) { .showcase-card { transition:none; } }
.real-profile-card{padding:0!important;text-decoration:none}.showcase-window{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;pointer-events:none}.showcase-window iframe{width:1440px;height:810px;border:0;transform-origin:top left;pointer-events:none}.real-profile-caption{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:13px 15px;background:linear-gradient(transparent,#050505ed);color:#eee;font-size:11px;text-align:left}.real-profile-caption strong{font-size:12px}.real-profile-caption>span{font-size:10px;color:#bbb}
.profile-stack .showcase-card{touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .55s cubic-bezier(.22,.8,.25,1),opacity .4s,box-shadow .3s}.profile-stack .showcase-card.is-dragging{transition:none!important;cursor:grabbing}.profile-stack .showcase-card[data-depth="0"]{cursor:grab}.profile-stack .showcase-card[data-depth="0"]:active{cursor:grabbing}@media(prefers-reduced-motion:reduce){.profile-stack .showcase-card{transition:none}}
/* Reference-style card deck: square front, stepped cards and a directional fling. */
.profile-stack{--side:-1;--pull:0;height:auto;aspect-ratio:16/10;max-width:480px}.profile-stack.right{--side:1}.profile-stack .showcase-card{height:100%;border-radius:24px;border-color:#ffffff20;box-shadow:0 18px 45px #0006;will-change:transform;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s}.profile-stack .showcase-card[data-depth="0"],.profile-stack .showcase-card:hover[data-depth="0"]{transform:none;z-index:3}.profile-stack .showcase-card[data-depth="1"]{transform:translate(calc(var(--side)*20px*(1 - var(--pull))),calc(12px*(1 - var(--pull)))) rotate(calc(var(--side)*5deg*(1 - var(--pull)))) scale(calc(.94 + .06*var(--pull)));z-index:2}.profile-stack .showcase-card[data-depth="2"]{transform:translate(calc(var(--side)*40px),24px) rotate(calc(var(--side)*10deg)) scale(.88);z-index:1}.profile-stack .showcase-card[data-fling]{z-index:5;transition:transform .35s ease-out,opacity .35s;pointer-events:none;opacity:0}.profile-stack .showcase-card[data-fling="left"]{transform:translate(-130%,-24px) rotate(-18deg)}.profile-stack .showcase-card[data-fling="right"]{transform:translate(130%,-24px) rotate(18deg)}.profile-stack .real-profile-caption{left:12px;bottom:12px;right:auto;max-width:calc(100% - 24px);gap:9px;padding:7px 12px;border:1px solid #ffffff25;border-radius:30px;background:#0b0b0be6;backdrop-filter:blur(10px);font-size:11px;transition:color .2s,border-color .2s}.real-profile-caption:hover{color:#ff7b85;border-color:#ef334060}.profile-stack .real-profile-caption strong{font-size:11px;font-weight:550}.profile-stack .stack-pagination{top:calc(100% + 34px)}.profile-stack .stack-pagination button{transition:width .25s,background .25s}@media(max-width:760px){.profile-stack{height:auto;aspect-ratio:16/10}.profile-stack .showcase-card{height:100%;border-radius:18px}.profile-stack .real-profile-caption{padding:5px 8px;left:8px;bottom:8px}.profile-stack .real-profile-caption strong{font-size:9px}.profile-stack .sample-tag{max-width:90%}}
@media(prefers-reduced-motion:reduce){.profile-stack .showcase-card{transition:none!important}}
/* Spacious, widget-led landing layout. */
@font-face{font-family:ColdshotLanding;src:url('/assets/fonts/customize-satoshi.woff2') format('woff2');font-weight:300 900;font-display:swap}.site-v2{font-family:ColdshotLanding,system-ui,sans-serif!important;background:#090909!important}.site-nav{max-width:1280px;margin:auto}.reference-hero{padding-top:64px;min-height:720px}.reference-hero h1{font-weight:650;letter-spacing:-2.8px;line-height:1.08}.reference-hero h1 em{filter:drop-shadow(0 0 26px #ef334028)}.hero-composition{gap:40px;max-width:1280px}.hero-center>p{font-size:16px;line-height:1.8;color:#929297}.stats-strip{margin-top:30px!important;border-top:1px solid #ffffff0c;border-bottom:1px solid #ffffff0c;padding:28px 0!important}.landing-widgets{padding:100px 24px 90px;overflow:hidden}.widget-stage{position:relative;height:340px;max-width:980px;margin:0 auto 20px;isolation:isolate}.widget-stage:before{content:'';position:absolute;inset:40px 100px;background:radial-gradient(ellipse,#ef334010,transparent 65%);z-index:-1}.widget-demo{position:absolute;display:flex;gap:14px;align-items:center;padding:19px 22px;border:1px solid #ffffff16;border-radius:22px;background:linear-gradient(130deg,#181819,#0e0e0f);box-shadow:0 20px 45px #0005;min-width:280px}.widget-demo>div{display:grid;gap:5px}.widget-demo strong{font-size:15px;font-weight:600;color:#eee}.widget-demo small{font-size:11px;color:#939399}.widget-logo{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#ffffff07;font-size:29px;color:#b5b5ba;flex-shrink:0}.discord-logo{background:#5865f2;color:white;border-radius:50%}.discord-logo b{position:absolute;bottom:0;right:0;width:12px;height:12px;border:3px solid #151515;background:#51bc84;border-radius:50%}.music-logo{background:#163124;color:#53c689}.widget-live{margin-left:auto;font-size:10px;color:#75bd93;border:1px solid #75bd9325;border-radius:20px;padding:4px 8px}.discord-demo{top:70px;left:4%;width:390px;transform:rotate(-7deg)}.music-demo{top:25px;right:7%;width:310px;transform:rotate(8deg)}.time-demo{top:190px;right:0;width:340px;transform:rotate(-5deg)}.time-demo strong>small{font-size:9px;margin-left:7px}.links-demo{top:224px;left:5%;min-width:300px;transform:rotate(5deg);gap:16px}.links-demo>i{font-size:23px;color:#c6c6cb}.links-demo>span,.badges-demo>span{font-size:11px;color:#919198}.badges-demo{top:125px;left:43%;transform:rotate(3deg);min-width:0;gap:13px;padding:15px 18px}.badges-demo>i{font-size:22px;color:#b7b7bc}.widget-meter{display:flex;align-items:center;gap:3px;height:16px}.widget-meter b{width:3px;height:10px;border-radius:3px;background:#6cb58b}.widget-meter b:nth-child(2n){height:16px}.widget-meter b:nth-child(3n){height:6px}.landing-section-title{text-align:center;max-width:780px;margin:0 auto}.landing-section-title .eyebrow,.landing-music .eyebrow{font-size:10px;letter-spacing:3px}.landing-section-title h2,.landing-music h2,.faq-wrap h2{font-size:clamp(29px,3.5vw,42px);font-weight:500;letter-spacing:-1.1px;line-height:1.2;margin:16px 0}.landing-section-title em,.landing-music em,.faq-wrap em{font-style:normal;color:#ef3340}.landing-section-title p{font-size:16px;line-height:1.8;color:#8e8e95}.landing-music{max-width:1152px;margin:auto;padding:100px 24px 110px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.landing-music-copy>p{color:#99999f;font-size:15px;line-height:1.8;margin:24px 0}.landing-feature-list{padding:0;margin:32px 0 0;list-style:none;border-top:1px solid #ffffff12}.landing-feature-list li{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid #ffffff12}.landing-feature-list li>span{font-size:11px;color:#666;font-variant-numeric:tabular-nums}.landing-feature-list li>div{display:grid;gap:5px;flex:1}.landing-feature-list strong{font-size:13px;font-weight:600}.landing-feature-list small{font-size:12px;color:#85858e}.landing-feature-list i{color:#ef3340;font-size:19px}.landing-player-demo{border:1px solid #ffffff18;border-radius:26px;padding:25px;background:radial-gradient(ellipse at 90% 10%,#ef334012,transparent 70%),#121213;box-shadow:0 28px 70px #0005;transform:rotate(2deg)}.demo-player-heading{display:flex;align-items:center;gap:13px}.demo-album{display:grid;place-items:center;width:66px;height:66px;border-radius:13px;background:linear-gradient(135deg,#6f3039,#15171e);font-size:25px;color:#e2a2ab}.demo-player-heading>div{flex:1;display:grid;gap:6px}.demo-player-heading strong{font-size:12px}.demo-player-heading small{color:#999;font-size:11px}.demo-player-heading>i{color:#777}.demo-transport{display:flex;align-items:center;gap:13px;margin:24px 0;color:#ddd}.demo-transport span{font-size:9px;color:#999}.demo-transport>b{flex:1;height:4px;background:linear-gradient(to right,#ddd 25%,#ffffff20 25%);border-radius:8px}.demo-lyric-lines{display:grid;gap:20px;padding:30px 0 45px;font-size:clamp(18px,2vw,25px);font-weight:600;letter-spacing:-.5px}.demo-lyric-lines span{color:#ffffff25}.demo-lyric-lines strong{font-weight:600;color:#eee}.demo-label{font-size:8px;letter-spacing:2px;color:#59595e}.landing-start{padding:70px 24px 100px;max-width:1000px;margin:auto}.landing-start-card{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #ffffff15;background:#111112;border-radius:26px;padding:32px;margin-top:35px}.start-label{font-size:9px;color:#777;letter-spacing:2px}.landing-start-card h3{font-size:21px;font-weight:600;margin:15px 0}.landing-start-card p{color:#8d8d94;font-size:13px;line-height:1.8;margin:0}.landing-start-card .v-button{white-space:nowrap;border-radius:30px}.faq-wrap{max-width:760px!important;margin:auto!important;padding:70px 24px 100px!important;display:block!important}.faq-wrap>div:first-child{text-align:center;margin-bottom:36px}.faq-list details{border-bottom:1px solid #ffffff12!important;background:transparent!important;border-radius:0!important;margin:0!important;padding:20px 0!important}.faq-list summary{font-size:15px;font-weight:550}.faq-list p{font-size:13px;line-height:1.8;color:#92929b}.final-cta{border:0!important;background:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;gap:25px;padding:60px 24px 100px!important}.final-cta h2{font-size:34px;font-weight:550;letter-spacing:-1px}.final-cta p{font-size:14px;color:#85858b}.site-footer{border-top:1px solid #ffffff0e;padding-top:30px;padding-bottom:35px}@media(max-width:760px){.landing-widgets{padding:70px 10px}.widget-stage{height:300px;transform:scale(.76);transform-origin:center center;margin-left:-14%;margin-right:-14%}.discord-demo{width:320px;left:0}.music-demo{right:0;width:270px;top:0}.badges-demo{left:33%;top:130px}.time-demo{top:225px;width:290px}.links-demo{top:220px;left:-10%;min-width:260px}.landing-music{grid-template-columns:1fr;gap:45px;padding:50px 24px 75px}.landing-player-demo{transform:none}.landing-start-card{flex-direction:column;align-items:start;padding:25px}.landing-start-card p br{display:none}.reference-hero{padding-top:35px}.landing-section-title p br{display:none}.landing-start{padding-top:40px}}
/* Plain section labels instead of spaced uppercase kickers. */
.site-v2 .eyebrow{font-family:inherit!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:#9a9aa1!important}.site-v2 .eyebrow::before,.site-v2 .eyebrow::after{display:none!important;content:none!important}