:root{--bg:#fdf8ee;--ink:#23213a;--a:#6c5ce7;--b:#00b894;--c:#fdcb6e;--d:#ff7675;--card:#fff;--line:#e6dfcc}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
header.site{background:var(--ink);color:#fff}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;text-decoration:none}
.logo i{width:22px;height:22px;border-radius:50%;background:var(--c);display:inline-block;position:relative}
.logo i::after{content:"";position:absolute;right:-8px;top:4px;width:12px;height:12px;background:var(--b);transform:rotate(45deg)}
nav{display:flex;flex-wrap:wrap;gap:4px 16px}
nav a{color:#fff;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--c)}
main{padding:32px 0 48px}
h1{font-size:2rem;margin:0 0 12px}
a{color:var(--a)}
.hero{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.hero>div{flex:1 1 280px}
.art{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--a),var(--b));border-radius:16px;overflow:hidden}
.art .s1{position:absolute;width:40%;aspect-ratio:1;border-radius:50%;background:var(--c);left:12%;top:18%}
.art .s2{position:absolute;width:30%;aspect-ratio:1;background:var(--d);right:14%;bottom:14%;transform:rotate(20deg);border-radius:6px}
.art .s3{position:absolute;left:0;bottom:0;width:0;height:0;border-left:90px solid transparent;border-right:90px solid transparent;border-bottom:90px solid rgba(255,255,255,.5)}
.links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.links a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 16px;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:block}
.card .art{border-radius:0}
.card .body{padding:12px 16px}
.badge{display:inline-block;background:var(--c);border-radius:999px;padding:2px 12px;font-size:.85rem;font-weight:600}
section.blk{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 18px;margin:14px 0}
section.blk h2{margin:0 0 4px;font-size:1.15rem}
.buy{font:inherit;font-weight:700;border:0;border-radius:10px;padding:12px 28px;background:var(--a);color:#fff}
.buy:disabled{background:#c9c5d8;color:#6b6880;cursor:not-allowed}
.note{color:#6b6880;margin-left:10px}
footer{border-top:1px solid var(--line);padding:16px 0;color:#6b6880;font-size:.9rem}
@media(max-width:480px){h1{font-size:1.6rem}}