:root{--bg:#0b0b0e;--panel:#16161b;--ink:#f3f2f4;--gold:#ff334d;--muted:#9d9ca8;--line:#ffffff1c}
body{background:var(--bg)}.preview{background:#1e1017;color:#bf9ca4}header{background:#0b0b0ef5}.hero{background:radial-gradient(ellipse at 77% 47%,#57101e66,transparent 55%),#09090c;min-height:625px;height:calc(100svh - 115px);max-height:850px;isolation:isolate}.hero-art.ip-hero{position:absolute;inset:auto;top:50%;right:-1.5%;transform:translateY(-52%);width:72%;height:auto;aspect-ratio:1.59;background-image:url('assets/whatmelon-ip.jpeg');background-size:220% auto;background-position:39.2% top;background-repeat:no-repeat;mask-image:linear-gradient(0deg,transparent,black 9%,black 91%,transparent),linear-gradient(90deg,transparent,black 10%,black 98%,transparent);mask-composite:intersect;z-index:0}.hero-shade{background:linear-gradient(90deg,#09090c 0%,#09090cf5 15%,#09090c98 31%,transparent 56%),linear-gradient(0deg,#09090c 0%,transparent 20%);z-index:1;pointer-events:none}.hero-copy{z-index:2;max-width:690px}.hero h1{font-weight:900;letter-spacing:-5px;text-transform:uppercase;font-size:clamp(66px,7.8vw,118px);line-height:.94}.hero h1 em{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-style:italic;color:var(--gold);padding-inline-end:12px}.hero .eyebrow{display:flex;align-items:center;gap:10px;letter-spacing:2px}.hero .eyebrow:before{content:'';width:22px;height:3px;background:var(--gold);display:block}.intro{color:#b8b6c1;max-width:310px}.gold{background:#f32644;color:white;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}.gold:hover{background:#ff4b64}.button{letter-spacing:.3px}.hero-bottom{z-index:2;color:#c0b8be}.hero-bottom>span:first-child{color:#ff7c8c}.claws{position:absolute;left:39%;top:8%;height:90%;width:35%;transform:rotate(27deg);display:flex;gap:30px;z-index:-1;opacity:.14}.claws i{height:100%;width:7%;background:linear-gradient(0deg,transparent,#ff183c,transparent);clip-path:polygon(80% 0,100% 0,20% 100%,0 100%)}.ribbon{background:#141116;color:#c4bdc7}.ribbon span:nth-child(even){color:#ff3b56}.collection{background:linear-gradient(180deg,#0b0b0e,#111015)}.filters button{border-radius:2px}.filters button.active{background:#e92945;border-color:#e92945;color:#fff}.product-image{border:1px solid #ffffff12}.product-info h3{font-weight:700}.round:hover{color:white}.category-tile{background:linear-gradient(120deg,#211018,#15151a);overflow:hidden}.category-tile.alternate{background:linear-gradient(120deg,#191922,#101015)}.category-tile:after{content:'';position:absolute;width:90px;height:230px;right:18%;top:25%;transform:skew(-24deg);border-left:6px solid #ff23462e;border-right:2px solid #ff23462e;pointer-events:none}.category-tile h3{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-1.2px}.story{background:#18171e;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.story .eyebrow{color:#ff697e}.story h2{font-weight:700}.story-copy .muted{color:#aaa5b3}.story-visual{padding:12px;border:1px solid #ff334d44;background:#100c12;box-shadow:18px 18px 0 #0c0b10}.ip-portrait{aspect-ratio:1.16;width:100%;background-image:url('assets/whatmelon-ip.jpeg');background-size:303% auto;background-position:right top;background-repeat:no-repeat}.seal{background:#a50f2ee8;border:1px solid #ff4866;color:white;bottom:28px;right:28px;padding:14px 18px;font-size:40px}.values{border-color:#ffffff20;color:#ddd7e1}.partners{background:radial-gradient(ellipse at 5% 35%,#4a102130,transparent 65%),#0b0b0e}form{background:#15141a}input,textarea,form select{background:#0c0b10}.support{background:#101014}footer{background:#07070a}.faqs summary:hover{color:#ff697e}nav a:hover,.text-link:hover,.channels button:hover{color:#ff697e}.footer-bottom{color:#96929e}dialog{border-color:#ff334d66}.close{background:#101014}h2{letter-spacing:-1.5px}html[dir=rtl] .hero-art.ip-hero{right:auto;left:-1.5%}html[dir=rtl] .hero-shade{background:linear-gradient(270deg,#09090c 0%,#09090cf5 15%,#09090c98 31%,transparent 56%),linear-gradient(0deg,#09090c,transparent 20%)}html[dir=rtl] .hero h1{font-style:normal;line-height:1.2}html[dir=rtl] .hero h1 em{font-style:normal}html[lang=de] .hero h1{font-size:clamp(60px,6.7vw,100px)}html[lang=fr] .hero h1{font-size:clamp(60px,6.3vw,96px)}
@media(min-width:1600px){.hero-art.ip-hero{width:65%;right:0}}
.hero-art.ip-hero:after{content:'';position:absolute;left:0;top:0;width:28%;height:53%;background:linear-gradient(90deg,#09090c 80%,transparent);pointer-events:none}.ip-portrait{position:relative}.ip-portrait:after{content:'';position:absolute;left:0;bottom:0;width:54%;height:43%;background:linear-gradient(90deg,#100c12 25%,#100c12dc 60%,transparent);pointer-events:none}
@media(max-width:1050px){.hero-art.ip-hero{width:78%;right:-7%}.hero-copy{max-width:560px}.hero h1{font-size:84px}}
@media(max-width:420px){.hero h1 em{letter-spacing:-3px}}
@media(max-width:760px){.hero{height:790px;min-height:790px;align-items:end;background:radial-gradient(ellipse at 50% 20%,#5c102c44,transparent 55%),#09090c}.hero-art.ip-hero{width:112%;top:0;right:-6%;transform:none;aspect-ratio:1.59;mask-image:linear-gradient(0deg,transparent,black 13%,black 97%,transparent)}.hero-shade,html[dir=rtl] .hero-shade{background:linear-gradient(0deg,#09090c 0%,#09090c 43%,transparent 78%)}.hero-copy{padding:0 7% 90px;max-width:none}.hero h1{font-size:76px;letter-spacing:-3px;margin-bottom:24px}.hero .eyebrow{font-size:9px;margin-bottom:23px}.intro{max-width:315px;font-size:14px}.hero-bottom{font-size:8px}.claws{left:65%;opacity:.2;top:20%}.story-visual{margin-bottom:12px}.story h2{font-size:39px}.ribbon{font-size:8px;letter-spacing:1px}.hero-art.ip-hero{margin-top:22px}html[dir=rtl] .hero-art.ip-hero{left:-6%;right:auto}html[dir=rtl] .hero h1{font-size:64px}html[lang=de] .hero h1{font-size:65px}html[lang=fr] .hero h1{font-size:55px}html[lang=ja] .hero h1,html[lang=ko] .hero h1{font-size:57px}html[lang=ja] .hero,html[lang=ko] .hero{height:820px}}
@media(max-width:760px){.hero h1{font-size:clamp(54px,17.4vw,68px)}html[lang=es] .hero h1{font-size:56px}html[lang=fr] .hero h1{font-size:48px}html[lang=de] .hero h1{font-size:60px}.values{gap:12px;flex-wrap:wrap}}