:root{--ink:#2c2140;--muted:#5f5873;--paper:#faf9f5;--card:#fff;--line:#ece7dd;
--green:#4C7A11;--green-b:#7CB518;--purple:#6a4cf0;--purple-ink:#3b2d63;--wash:#eef5e2;}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:18px 20px 80px}
.brand{display:inline-flex;gap:7px;align-items:center;text-decoration:none;color:var(--purple-ink);font-weight:800;font-size:1.02rem}
.hero{text-align:center;padding:26px 0 8px}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
h1{font-size:clamp(1.9rem,5.4vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin:.25em 0 .2em;text-wrap:balance}
.sub{font-size:clamp(1.02rem,2.3vw,1.2rem);color:var(--muted);max-width:32em;margin:0 auto 20px}
.art{font-size:3.4rem;line-height:1}
.play{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#7CB518,#A2D149);color:#fff;
text-decoration:none;font-weight:800;font-size:1.12rem;border-radius:16px;padding:15px 26px;min-height:56px;
box-shadow:0 10px 24px rgba(70,110,20,.28)}
.play:active{transform:scale(.98)}
.micro{margin:12px 0 0;font-size:.9rem;color:var(--muted)}
h2{font-size:1.35rem;letter-spacing:-.01em;margin:2.2em 0 .4em;text-wrap:balance}
p{margin:.7em 0}
.skills{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px}
.skills li{position:relative;padding:12px 14px 12px 42px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.skills li::before{content:"🌱";position:absolute;left:14px;top:12px}
.skills b{color:var(--ink)}
.moat{background:var(--wash);border:1px solid #d9e8c2;border-radius:16px;padding:16px 18px;margin:20px 0}
.moat a{color:var(--green);font-weight:700}
.faq{margin:8px 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin:8px 0}
.faq summary{font-weight:700;cursor:pointer;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋ ";color:var(--green);font-weight:800}
.faq details[open] summary::before{content:"− "}
.faq p{margin:0 0 12px;color:var(--muted)}
.related{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.related a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;text-decoration:none;color:var(--purple-ink);font-weight:700;font-size:.92rem}
.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
.foot a{color:var(--purple)}
@media (prefers-reduced-motion:reduce){.play:active{transform:none}}