:root{--bg:#101215;--panel:#171b1f;--line:#2b3035;--text:#eff2f0;--muted:#a2a9ac;--accent:#3fd99b;--font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55}a{color:inherit;text-decoration:none}button,input{font:inherit}.wrap{width:min(1140px,calc(100% - 56px));margin:auto}.nav{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1140px)/2));gap:32px;background:#101215ed;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:700;white-space:nowrap}.brand b{font-weight:450;color:var(--muted)}.mark{font-size:28px;line-height:1;font-weight:850;letter-spacing:-3px}.mark span,.gui-logo span{color:var(--accent)}.nav nav{display:flex;gap:28px}.nav nav a{font-size:13px;color:#bdc4c6;transition:color .2s}.nav nav a:hover,.footer-inner a:hover{color:var(--accent)}.nav-discord{font-size:13px;font-weight:700;border:1px solid #526a60;border-radius:8px;padding:10px 16px;white-space:nowrap}.nav-discord span{color:var(--accent)}.menu{display:none}.hero{min-height:620px;display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center;padding-top:80px;padding-bottom:92px}.eyebrow,.kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:8px}.hero h1{font-size:clamp(56px,6vw,86px);line-height:1.02;letter-spacing:-5px;margin:25px 0}.hero h1 em{font-style:normal;color:var(--accent)}.hero-copy>p{font-size:17px;line-height:1.8;max-width:490px;color:#aeb6b8}.hero-actions{display:flex;gap:10px;margin-top:30px}.btn{padding:13px 20px;border-radius:8px;font-size:13px;font-weight:750;display:inline-flex;gap:22px;align-items:center;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--accent);color:#092318}.primary:hover{background:#72edbc}.subtle{border:1px solid #42494c;color:#d5dcda}.hero-foot{display:flex;gap:20px;flex-wrap:wrap;margin-top:52px;color:#8f9b9b;font-size:11px}.hero-foot code,.split code{color:var(--accent)}.gui{border:1px solid #39443e;background:#121715;border-radius:14px;box-shadow:0 24px 70px #0006;overflow:hidden;transform:rotate(-1deg)}.gui-top{height:52px;background:#151c18;border-bottom:1px solid #303e36;display:flex;justify-content:space-between;align-items:center;padding:0 20px}.gui-logo{font-weight:850;font-size:20px;letter-spacing:-2px}.gui-logo small{font-size:9px;font-weight:750;letter-spacing:1.2px;color:#c8d4cc;margin-left:8px}.gui-dots{display:flex;gap:5px}.gui-dots i{width:6px;height:6px;background:#667d6f;border-radius:50%}.gui-body{display:grid;grid-template-columns:145px 1fr;min-height:340px}.gui-side{background:#19231e;border-right:1px solid #334038;padding:20px 10px;position:relative}.side-label,.gui-main-top small{font-size:9px;letter-spacing:1.6px;color:#7e9c8a}.side-label{margin:0 10px 16px}.side-item{font-size:11px;padding:10px 12px;color:#afc2b6;border-radius:7px;margin-bottom:3px}.side-item.active{background:#28503e;color:#80e7b4;font-weight:700}.gui-side-foot{position:absolute;bottom:16px;font-size:8px;letter-spacing:1px;color:#719682;padding-left:12px}.gui-main{padding:22px 18px}.gui-main-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.gui-main-top strong{display:block;font-size:18px}.gui-count{font-size:9px;color:#8db19b;letter-spacing:1px}.gui-module{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#1c2520;border:1px solid #334138;border-radius:9px;margin-bottom:8px}.gui-module b{display:block;font-size:11px}.gui-module small{display:block;font-size:9px;color:#91a799}.toggle{width:28px;height:16px;background:#515f56;border-radius:20px;position:relative;flex-shrink:0}.toggle:after{content:'';position:absolute;top:3px;left:3px;background:white;border-radius:50%;width:10px;height:10px}.toggle.on{background:var(--accent)}.toggle.on:after{left:15px}.gui-note{font-size:9px;color:#72917e;text-align:right;margin:13px 0 0}.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#15191b}.band-inner{padding:20px 0;display:flex;justify-content:space-between;gap:15px;color:#a7b2b0;font-size:10px;font-weight:700;letter-spacing:1.6px}.band b{color:var(--accent);padding:0 9px}.section{padding-top:105px;padding-bottom:110px;scroll-margin-top:70px}.section-head{display:flex;justify-content:space-between;gap:25px;align-items:end}.section h2{font-size:clamp(32px,4vw,48px);letter-spacing:-2px;line-height:1.13;margin:14px 0 16px}.section-head p,.section-intro,.split>div>p,.about p,.last-cta p{color:var(--muted);max-width:570px}.count{text-align:right;min-width:90px}.count strong{font-size:36px;color:var(--accent);display:block;line-height:1}.count span{font-size:11px;color:var(--muted)}.feature-controls{display:flex;justify-content:space-between;gap:18px;margin:37px 0 32px;align-items:center}.filters{display:flex;gap:7px;flex-wrap:wrap}.filters button{cursor:pointer;border:1px solid #343d3b;border-radius:6px;background:transparent;color:#b6c1bb;font-size:11px;padding:9px 12px}.filters button.selected,.filters button:hover{background:#284d3b;border-color:#3f8765;color:#9af2c5}input[type=search]{background:#1b2022;border:1px solid #3a4341;color:white;border-radius:7px;padding:10px 12px;min-width:180px;outline:none}input:focus{border-color:var(--accent)}.feature-group{margin-bottom:36px}.group-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px}.group-title h3{font-size:18px;margin:0}.group-title span{font-size:10px;letter-spacing:1.5px;color:#83928a}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr)}.feature-item{padding:20px 18px 19px 0;border-bottom:1px solid #292f31;margin-right:18px;transition:background .2s}.feature-item h4{font-size:13px;margin:0 0 6px;font-weight:700}.feature-item p{font-size:12px;line-height:1.65;color:#9daaa7;margin:0}.feature-item:hover h4{color:var(--accent)}#empty{color:var(--muted);padding:40px 0}.cosmetics-section{background:#171c1c;border-block:1px solid #29312e}.cosmetics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:35px 0}.cosmetics-grid article{background:#101515;border:1px solid #344139;border-radius:10px;overflow:hidden}.cosmetic-art{height:190px;display:grid;place-items:center;background:radial-gradient(circle at 50% 80%,#254438,#131c19 65%);position:relative}.cape-shape{height:116px;width:78px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:linear-gradient(130deg,#77f0b4,#24543f);border:2px solid #b1ffd8;box-shadow:0 0 25px #3fd99b55}.wing{position:absolute;width:78px;height:106px;background:linear-gradient(145deg,#a5f9cc,#347657);clip-path:polygon(100% 0,55% 12%,0 44%,15% 75%,54% 100%,75% 62%)}.wing.left{transform:translateX(-35px) rotate(-17deg)}.wing.right{transform:translateX(35px) scaleX(-1) rotate(-17deg)}.halo-ring{width:128px;height:42px;border:10px solid #83f2b8;border-radius:50%;transform:rotate(-12deg);box-shadow:0 0 23px #3fd99b75,inset 0 0 12px #3fd99b80}.cosmetic-text{padding:22px}.cosmetic-text span{font-size:9px;letter-spacing:1.5px;color:var(--accent);font-weight:800}.cosmetic-text h3{font-size:21px;margin:8px 0}.cosmetic-text p{font-size:13px;color:var(--muted);line-height:1.7;margin:0}.theme-panel{border:1px solid #3b4841;border-radius:10px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:32px;background:#131a17}.theme-panel h3{margin:8px 0;font-size:22px}.theme-panel p{font-size:13px;color:var(--muted);margin:0}.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 25px}.swatch{display:flex;align-items:center;gap:8px;font-size:11px;color:#c1cbc5}.swatch i{height:13px;width:13px;border-radius:4px}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.detail-lines{margin-top:35px}.detail-lines div{border-top:1px solid var(--line);padding:14px 0;display:flex;gap:20px;font-size:13px}.detail-lines b{color:var(--accent);font-size:11px}.info-panel{background:#1b2320;border:1px solid #3b4a41;padding:30px;border-radius:10px}.info-panel>span{font-size:10px;color:var(--accent);letter-spacing:1.5px}.info-panel h3{font-size:24px;margin:10px 0 25px}.hud-preview{height:200px;border:1px dashed #43564a;background:#111815;position:relative;border-radius:6px;padding:15px;display:flex;align-items:start;gap:7px;flex-wrap:wrap;align-content:start}.hud-tag{border:1px solid #446a55;background:#1d3428;border-radius:4px;font-size:10px;color:#b8e6cd;padding:7px 10px}.hud-tag b{color:var(--accent)}.hud-tag:last-child{position:absolute;bottom:12px;right:12px}.info-panel small{color:#8ba496;font-size:10px;display:block;margin-top:13px}.about-section{background:#151a1a;border-block:1px solid var(--line)}.about{display:grid;grid-template-columns:1.3fr .7fr;gap:90px}.about p{line-height:1.8}.warning{font-size:12px!important;border-left:2px solid #a8a44b;padding-left:15px;margin-top:25px}.about-box{border:1px solid #36433b;border-radius:10px;padding:22px}.about-box>div{border-bottom:1px solid #36413b;padding:15px 0;display:flex;justify-content:space-between;gap:12px}.about-box>div:last-child{border:0}.about-box small{font-size:10px;letter-spacing:1px;color:#91a99a}.about-box strong,.about-box a{font-size:12px}.about-box a{color:var(--accent)}.last-cta{padding:70px 0;display:flex;align-items:center;justify-content:space-between;gap:25px}.last-cta h2{font-size:40px;letter-spacing:-2px;margin:8px 0}.last-cta p{margin:0}footer{border-top:1px solid var(--line)}.footer-inner{padding:27px 0;display:flex;justify-content:space-between;gap:20px;color:#84938a;font-size:11px}.footer-inner b{color:white}@media(max-width:1000px){.hero{gap:28px}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-controls{align-items:start;flex-direction:column}.split{gap:30px}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}.nav{padding:0 18px;height:64px}.nav nav{display:none;position:absolute;top:64px;left:0;right:0;background:#171e1a;border-bottom:1px solid #39473e;padding:22px;flex-direction:column}.nav nav.open{display:flex}.nav-discord{margin-left:auto}.menu{display:block;background:none;border:0;color:white;font-size:22px}.hero{grid-template-columns:1fr;padding:65px 0;min-height:0}.hero h1{letter-spacing:-3px}.gui{max-width:520px;width:100%;margin:auto}.hero-foot{margin-top:28px}.band-inner{flex-direction:column}.section{padding:65px 0}.section-head{align-items:start}.count{display:none}.feature-grid{grid-template-columns:1fr}.cosmetics-grid{grid-template-columns:1fr}.theme-panel,.split,.about{display:block}.swatches{margin-top:25px}.info-panel,.about-box{margin-top:35px}.last-cta{align-items:start;flex-direction:column}.footer-inner{flex-wrap:wrap}.gui-body{grid-template-columns:115px 1fr}.gui-main{padding:12px}.gui-side{padding:14px 6px}.side-item{font-size:9px;padding:9px 6px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Interactive ClickGUI theme picker */
:root {
  --theme-shell:#101215; --theme-sidebar:#19231e;
  --theme-card:#1c2520; --theme-selected:#28503e;
  --theme-border:#39443e; --theme-foreground:#eff2f0;
  --theme-contrast:#092318;
}
body { background:var(--bg); color:var(--text); transition:background .25s,color .25s; }
.nav {background:var(--nav-bg);border-color:var(--line)}
.cosmetics-section,.about-section {background:var(--section-bg);border-color:var(--line)}
.theme-panel,.cosmetics-grid article,.info-panel,.about-box {background:var(--panel);border-color:var(--line)}
.gui {background:var(--theme-shell);border-color:var(--theme-border)}
.gui-top {background:var(--theme-shell);border-color:var(--theme-border)}
.gui-side {background:var(--theme-sidebar);border-color:var(--theme-border)}
.gui-module {background:var(--theme-card);border-color:var(--theme-border)}
.side-item.active {background:var(--theme-selected);color:var(--accent)}
.gui-side-foot,.gui-note,.gui-count {color:var(--accent)}
.primary {color:var(--theme-contrast)}
.primary:hover {background:var(--accent);filter:brightness(1.12)}
.swatch {cursor:pointer;padding:7px 9px;margin:-7px -9px;border:1px solid transparent;border-radius:7px;background:transparent;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.swatch:hover {background:var(--theme-card);transform:translateY(-1px)}
.swatch[aria-pressed="true"] {background:var(--theme-selected);border-color:var(--accent);color:var(--text)}
.swatch:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.swatch i {flex:none}

/* Refined typography and spacing */
:root{--font:'DM Sans',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-weight:450;letter-spacing:-.012em}
h1,h2,h3,h4{font-family:var(--font);font-weight:750;text-wrap:balance}
.hero h1{font-size:clamp(52px,5.5vw,78px);line-height:1.075;letter-spacing:-.055em;font-weight:750}
.section h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.045em;line-height:1.18}
.brand,.feature-item h4,.group-title h3{font-weight:700;letter-spacing:-.025em}
.hero-copy>p{font-size:16px;line-height:1.75}
.feature-item h4{font-size:14px}
.feature-item p{font-size:13px;line-height:1.7}
.feature-item{padding:23px 22px 23px 0}
.btn,.filters button,.nav nav a{font-weight:650}
.eyebrow,.kicker{letter-spacing:.13em;font-weight:750}
.swatch{font-size:12px;font-weight:550}

/* In-game-style cosmetics previews: simple flat-world background, no selectors. */
.cosmetic-photo{height:245px;display:block;overflow:hidden;background:#3c612a;cursor:grab;touch-action:pan-y}
.cosmetic-photo:active{cursor:grabbing}
.cosmetic-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;pointer-events:none;transition:transform .18s ease-out}
.cosmetic-photo:hover img{transform:scale(1.045)}
@media(max-width:700px){.cosmetic-photo{height:260px}}

/* SkyBlock-inspired preview gallery, using the approved three renders */
.cosmetics-section{position:relative;isolation:isolate;overflow:hidden;background:#101615}
.cosmetics-section::before{content:"";position:absolute;inset:0;z-index:-2;background:url("assets/skyblock-bg.webp") center top/cover no-repeat;opacity:.42;filter:blur(9px);transform:scale(1.06)}
.cosmetics-section::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,19,18,.35),rgba(12,19,18,.88) 60%,#101615)}
.cosmetics-grid article{overflow:hidden;backdrop-filter:blur(9px);background:rgba(13,20,19,.91)}
.cosmetic-photo{height:260px;background:#253d2c}
.cosmetic-photo img{object-fit:cover;object-position:center;transition:transform .2s ease}
@media(max-width:700px){.cosmetic-photo{height:240px}}

/* More understated SkyBlock atmosphere: no blurred section-wide illustration. */
.cosmetics-section{background:var(--section-bg);isolation:auto}
.cosmetics-section::before,.cosmetics-section::after{content:none;display:none}
.cosmetics-grid article{background:var(--panel);backdrop-filter:none;box-shadow:none}
.cosmetic-photo{background:#233b2b}
.cosmetic-photo img{filter:saturate(.76) contrast(.95) brightness(.94)}
.cosmetic-photo:hover img{filter:saturate(.84) contrast(.97) brightness(.98)}

/* Plain Minecraft-style cosmetics, without cinematic background or blur. */
.cosmetics-section{background:var(--section-bg);isolation:auto;overflow:visible}
.cosmetics-section::before,.cosmetics-section::after{content:none!important;display:none!important}
.cosmetics-grid article{background:var(--panel);backdrop-filter:none;box-shadow:none;border:1px solid var(--line)}
.cosmetic-photo{background:#547a3b;height:260px}
.cosmetic-photo img,.cosmetic-photo:hover img{filter:none;object-fit:cover;object-position:center}

/* Interactive HUD preview */
.hud-preview{display:block;overflow:hidden;touch-action:none;user-select:none}
.hud-preview .hud-tag{position:absolute;left:var(--hud-x,12px);top:var(--hud-y,12px);bottom:auto;right:auto;cursor:grab;touch-action:none;white-space:nowrap;z-index:1}
.hud-preview .hud-tag:active{cursor:grabbing;z-index:2}
.hud-preview .hud-tag:nth-child(1){--hud-x:14px;--hud-y:14px}
.hud-preview .hud-tag:nth-child(2){--hud-x:88px;--hud-y:14px}
.hud-preview .hud-tag:nth-child(3){--hud-x:181px;--hud-y:14px}
.hud-preview .hud-tag:nth-child(4){--hud-x:calc(100% - 145px);--hud-y:calc(100% - 44px)}
.hud-preview .hud-tag:focus-visible{outline:2px solid var(--accent);outline-offset:3px}