:root{--ink:#3A3550;--coral:#FF6B8A;--mint:#38D6B0;--butter:#FFD36E;--paper:#FFFDF8;--cream:#FFF6EC;--grape:#8B6CE6}
*{box-sizing:border-box}html{background:#241d2e}body{margin:0;font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff7ed,#f6e9dc);line-height:1.65}
a{color:#5d4fc0;text-underline-offset:3px}header{background:var(--paper);border-bottom:4px solid var(--ink)}.bar{max-width:980px;margin:auto;padding:18px 22px;display:flex;align-items:center;gap:18px}.brand{font-size:25px;font-weight:900;color:var(--ink);text-decoration:none}.brand span{color:var(--coral)}nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}nav a{font-weight:900;font-size:14px;text-decoration:none}.play{background:var(--coral);color:#fff!important;border:3px solid var(--ink);padding:7px 13px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}main{max-width:900px;margin:auto;padding:44px 22px 64px}.hero{background:rgba(255,253,248,.94);border:4px solid var(--ink);border-radius:26px;padding:30px;box-shadow:0 9px 0 rgba(58,53,80,.15);margin-bottom:28px}.kicker{font-weight:900;color:var(--coral);letter-spacing:.14em;text-transform:uppercase;font-size:13px}h1{font-size:clamp(36px,7vw,62px);line-height:1.02;margin:.18em 0 .3em}h2{font-size:28px;margin-top:1.5em}h3{font-size:21px}p,li{font-size:17px}.cta{display:inline-block;margin-top:8px;background:var(--butter);border:3px solid var(--ink);border-radius:14px;padding:10px 16px;color:var(--ink);font-weight:900;text-decoration:none;box-shadow:0 4px 0 var(--ink)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.card{background:var(--paper);border:3px solid var(--ink);border-radius:20px;padding:20px}.card h2,.card h3{margin-top:0}.traits{font-size:14px;color:#746b83;font-weight:800}.crumbs{font-size:13px;font-weight:800;margin-bottom:18px}.note{background:#fff1b8;border-left:6px solid var(--butter);padding:13px 16px;border-radius:10px}footer{background:var(--ink);color:#fff;padding:28px 22px}footer .inner{max-width:900px;margin:auto}footer a{color:#fff}@media(max-width:620px){.bar{align-items:flex-start;flex-direction:column}.bar nav{margin-left:0}.hero{padding:22px}main{padding-top:28px}}
