@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --pink:#ff3cac;
    --pink2:#ff67c5;
    --purple:#8b5cf6;
    --purple2:#b35cff;
    --ink:#171326;
    --muted:#746e87;
    --bg:#fffaff;
    --card:#ffffff;
    --line:#eee5f5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;color:var(--ink);background:var(--bg);
    font-family:Inter,Arial,sans-serif;overflow-x:hidden;
}
.glow{position:fixed;border-radius:50%;filter:blur(90px);opacity:.25;pointer-events:none;z-index:-1}
.glow-one{width:420px;height:420px;background:var(--pink);top:-140px;left:-150px}
.glow-two{width:500px;height:500px;background:var(--purple);right:-200px;top:300px}
.topbar{height:82px;max-width:1180px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:Fredoka,sans-serif;font-size:26px;font-weight:700}
.brand img{width:42px;height:42px;object-fit:contain}
.brand span span{color:var(--pink)}
nav{display:flex;align-items:center;gap:26px}
nav a{text-decoration:none;color:#514b61;font-weight:600;font-size:14px}
.theme-toggle{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;display:grid;place-items:center;font-size:19px;transition:.2s background,.2s border-color}
.theme-toggle:hover{border-color:var(--pink2)}.theme-toggle .toggle-moon{display:none}
.nav-github{padding:10px 16px;background:#f6effb;border-radius:12px}
.hero{max-width:1180px;margin:0 auto;padding:80px 24px 110px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;min-height:650px}
.eyebrow{display:inline-flex;padding:8px 13px;border-radius:999px;background:#fff0fa;color:#c72f85;font-size:13px;font-weight:800;letter-spacing:.2px}
h1,h2,h3{font-family:Fredoka,sans-serif;margin:0}
h1{font-size:clamp(55px,7vw,88px);line-height:.95;letter-spacing:-2px}
h1 span{background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text{font-size:18px;line-height:1.7;color:var(--muted);max-width:560px;margin:25px 0}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap}
.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;text-decoration:none;border-radius:14px;padding:15px 20px;font-weight:800;transition:.2s transform,.2s box-shadow}
.button:hover{transform:translateY(-2px)}
.primary{color:white;background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 12px 28px rgba(139,92,246,.22)}
.secondary{color:#3e3650;background:white;border:1px solid var(--line)}
.platforms{display:flex;gap:17px;flex-wrap:wrap;margin-top:22px;color:#7b7488;font-size:12px;font-weight:700}
.hero-art{position:relative}
.window-card{background:white;border:1px solid #eadff1;border-radius:24px;box-shadow:0 30px 80px rgba(74,37,96,.18);overflow:hidden;transform:rotate(2deg)}
.window-titlebar{height:46px;background:#fff9fd;border-bottom:1px solid #f0e8f3;display:flex;align-items:center;justify-content:center;position:relative;font-size:13px;font-weight:700}
.traffic{position:absolute;left:17px;display:flex;gap:6px}.traffic i{width:9px;height:9px;border-radius:50%;background:#ff8dbd}.traffic i:nth-child(2){background:#b695ff}.traffic i:nth-child(3){background:#ffc4df}
.picker-preview{display:flex;gap:18px;padding:32px;align-items:center;background:linear-gradient(145deg,#fff,#fcf6ff)}
.picker-preview>img{width:165px;height:165px;object-fit:contain}
.fake-ui{display:flex;flex-direction:column;gap:8px;min-width:210px}.fake-ui small,.fake-ui span{color:#827a8e;font-size:11px}.fake-ui strong{font-size:24px;font-family:Fredoka}.color-chip{height:46px;border-radius:11px;background:#d59930}
.fake-ui button{border:0;border-radius:10px;padding:10px;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-weight:700;cursor:default}.fake-ui .outline{background:#fff;color:#6c4aa0;border:1px solid #dcccf4}
.floating-hex{position:absolute;background:white;border:1px solid var(--line);box-shadow:0 12px 30px rgba(50,25,70,.1);padding:9px 13px;border-radius:12px;font-family:monospace;font-weight:800}.one{left:-25px;top:35px;color:var(--pink)}.two{right:-22px;bottom:50px;color:var(--purple)}.three{left:25px;bottom:-28px;color:#b06f00}
.section{max-width:1180px;margin:0 auto;padding:100px 24px}.section-heading{max-width:620px}.section-heading h2{font-size:50px;line-height:1;margin-top:15px}.section-heading p{color:var(--muted);font-size:17px;line-height:1.7}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:48px}.feature-card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;padding:25px;min-height:220px}.feature-icon{font-size:31px}.feature-card h3{font-size:22px;margin:18px 0 8px}.feature-card p{color:var(--muted);line-height:1.6;font-size:14px}
.compatibility-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}.compatibility-list span{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:14px;box-shadow:0 4px 14px rgba(50,25,70,.06)}
.how{max-width:1180px;margin:auto;padding:20px 24px 100px}.how-card{background:linear-gradient(120deg,#2a1937,#44245c 55%,#6a2f75);color:#fff;border-radius:32px;padding:58px 65px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative}.how-card .eyebrow{background:rgba(255,255,255,.12);color:#ffd4ee}.how-card h2{font-size:48px;margin:14px 0 30px}.steps{display:grid;gap:13px}.steps div{display:flex;align-items:center;gap:12px;font-size:15px}.steps b{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple))}.how-mascot{width:230px;height:230px;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.center{text-align:center;margin:auto}.download{padding-top:80px}.download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,390px));justify-content:center;gap:22px;margin-top:42px}.download-card{background:white;border:1px solid var(--line);border-radius:24px;padding:34px;text-align:center;position:relative}.download-card.featured{border:2px solid #d9b8ff;box-shadow:0 20px 50px rgba(139,92,246,.12)}.best{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;border-radius:999px;padding:6px 13px;font-size:11px;font-weight:900}.os-icon{font-size:46px}.download-card h3{font-size:30px;margin:12px}.download-card p{color:var(--muted);line-height:1.6;font-size:14px;min-height:50px}.full{width:100%;margin:10px 0 12px}.download-card small{color:#938c9e}
.download-card.disabled{opacity:.62;filter:saturate(.6);cursor:not-allowed}
.download-card.disabled .button{border-style:dashed;pointer-events:none;box-shadow:none}
.source-strip{max-width:1100px;margin:20px auto 100px;padding:28px 34px;border:1px solid var(--line);border-radius:24px;background:white;display:flex;align-items:center;gap:18px}.source-strip img{width:72px;height:72px;object-fit:contain}.source-strip h2{font-size:26px}.source-strip p{margin:4px 0;color:var(--muted)}.source-strip .button{margin-left:auto}
footer{border-top:1px solid var(--line);padding:35px 24px;max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8d8598;font-size:12px}footer .brand{font-size:20px}footer .brand img{width:34px;height:34px}
@media(max-width:850px){nav a:not(.nav-github){display:none}.hero{grid-template-columns:1fr;padding-top:45px;gap:45px}.hero-art{max-width:600px;margin:auto}.features-grid{grid-template-columns:repeat(2,1fr)}.how-card{padding:40px;flex-direction:column;align-items:flex-start}.how-mascot{align-self:center}.source-strip{margin:20px 24px 70px;flex-wrap:wrap}.source-strip .button{margin-left:0}.picker-preview>img{width:130px;height:130px}}
@media(max-width:560px){.topbar{padding:0 16px}.hero,.section{padding-left:16px;padding-right:16px}h1{font-size:58px}.section-heading h2,.how-card h2{font-size:40px}.features-grid,.download-grid{grid-template-columns:1fr}.picker-preview{padding:20px}.picker-preview>img{width:105px;height:105px}.fake-ui{min-width:0}.floating-hex{display:none}.how{padding-left:16px;padding-right:16px}.how-card{padding:32px 24px}footer{flex-direction:column;align-items:flex-start}}
[data-theme="dark"]{--ink:#f3eefc;--muted:#a89fbe;--bg:#151020;--card:#1e1730;--line:#2d2342}
[data-theme="dark"] body{color:var(--ink);background:var(--bg)}
[data-theme="dark"] .brand{color:var(--ink)}
[data-theme="dark"] nav a{color:#c4bcd6}
[data-theme="dark"] .nav-github{background:#2a2140;color:#e6dff7}
[data-theme="dark"] .eyebrow{background:#341f4d;color:#ff9fd8}
[data-theme="dark"] .secondary{color:#e6dff7;background:var(--card);border-color:var(--line)}
[data-theme="dark"] .platforms{color:#a89fbe}
[data-theme="dark"] .feature-card,.window-card,.download-card,.source-strip,.compatibility-list span{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .window-card{box-shadow:0 30px 80px rgba(0,0,0,.35)}
[data-theme="dark"] .window-titlebar{background:#241a3a;border-bottom-color:var(--line)}
[data-theme="dark"] .picker-preview{background:linear-gradient(145deg,#1e1730,#221a38)}
[data-theme="dark"] .fake-ui small,.fake-ui span{color:#a89fbe}
[data-theme="dark"] .fake-ui .outline{background:#1e1730;color:#cbb8ff;border-color:#3b2b63}
[data-theme="dark"] .floating-hex{background:var(--card);border-color:var(--line)}
[data-theme="dark"] footer{color:#8d85a3}
[data-theme="dark"] .theme-toggle .toggle-sun{display:none}
[data-theme="dark"] .theme-toggle .toggle-moon{display:inline}
[data-theme="dark"] .download-card.featured{border-color:#5b3f8f}


/* =========================
   PIXELSMOO LAYOUT FIXES
   ========================= */

/* Keep the logo on the left and the toggle/nav together on the right */
.topbar {
    justify-content: flex-start;
}

.topbar .brand {
    margin-right: auto;
}

/* Theme toggle polish */
.theme-toggle {
    color: var(--ink);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.theme-toggle:hover {
    border-color: var(--pink2);
    transform: translateY(-2px);
}

[data-theme="dark"] .theme-toggle {
    background: var(--card);
    color: var(--ink);
}

/* Download heading spacing/alignment */
.download {
    padding-top: 90px;
    padding-bottom: 100px;
}

.download .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.download .section-heading .eyebrow {
    margin-bottom: 8px;
}

.download .section-heading h2 {
    margin-top: 8px;
    margin-bottom: 10px;
    line-height: 1.1;
}

.download .section-heading p {
    margin: 0;
    line-height: 1.6;
}

.download-grid {
    margin-top: 42px;
}

/* Make dark mode consistently apply to all major cards */
[data-theme="dark"] .window-card,
[data-theme="dark"] .download-card,
[data-theme="dark"] .source-strip,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .compatibility-list span {
    background: var(--card);
    border-color: var(--line);
}

[data-theme="dark"] .download-card.disabled {
    opacity: .55;
}

@media (max-width: 560px) {
    .topbar {
        gap: 10px;
    }

    .theme-toggle {
        width: 42px;
        height: 42px;
    }
}