:root { --ink:#1d1d1f; --ink2:#5b5752; --ink3:#86868b; --jade:#21594a; --cream:#faf8f3; --card:#ffffff; --rule:rgba(0,0,0,0.08); }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap { max-width:760px; margin:0 auto; padding:0 22px; }
nav.top { position:sticky; top:0; z-index:10; background:rgba(250,248,243,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); }
nav.top .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; }
.brand img { border-radius:7px; }
nav.top .links { display:flex; gap:16px; align-items:center; }
nav.top .links a { font-size:14px; color:var(--ink); text-decoration:none; }
nav.top .pill, .button { background:var(--ink); color:#fff !important; padding:8px 16px; border-radius:980px; font-weight:500; text-decoration:none; display:inline-block; }
.crumbs { font-size:13px; color:var(--ink3); margin:22px 0 10px; }
.crumbs a { color:var(--ink3); text-decoration:none; }
h1 { font-family:Georgia,"Times New Roman",serif; font-size:40px; line-height:1.1; letter-spacing:-0.5px; margin-bottom:12px; }
h2 { font-family:Georgia,"Times New Roman",serif; font-size:26px; margin:40px 0 10px; line-height:1.2; }
h3 { font-size:18px; margin:24px 0 6px; }
p, li { font-size:17px; color:var(--ink); }
p { margin-bottom:14px; }
ul, ol { margin:0 0 16px 22px; }
li { margin-bottom:6px; }
.lead { font-size:19px; color:var(--ink2); margin-bottom:22px; }
.note { background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:14px 16px; margin:16px 0; font-size:15px; color:var(--ink2); }
.note strong { color:var(--ink); }
.rack { display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 16px; }
.tile { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:34px; height:46px; border-radius:6px; background:#fffdf7; border:1px solid #d9d3c5; box-shadow:0 1px 0 #c9c2b2; font-weight:700; font-size:16px; line-height:1; }
.tile small { font-size:8px; font-weight:600; letter-spacing:0.5px; margin-top:3px; opacity:0.7; }
.tile.crak { color:#b4322c; } .tile.bam { color:#2f7a4a; } .tile.dot { color:#2a56a8; }
.tile.dragon.red { color:#b4322c; } .tile.dragon.green { color:#2f7a4a; } .tile.dragon.soap { color:#2a56a8; }
.tile.wind { color:#1d1d1f; } .tile.flower { color:#8a4b8f; } .tile.joker { color:#c4802a; }
.section-card { background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:18px 20px; margin:18px 0; }
.section-card h2 { margin-top:0; font-size:24px; }
.section-card p { font-size:16px; }
.term { padding:12px 0; border-bottom:1px solid var(--rule); }
.term h3 { margin:0 0 4px; font-size:17px; }
.term p { font-size:15px; color:var(--ink2); margin:0; }
.term .aka { font-size:13px; color:var(--ink3); }
.faq details { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:12px 16px; margin-bottom:8px; }
.faq summary { font-weight:600; cursor:pointer; font-size:16px; }
.faq details p { margin:10px 0 0; font-size:15px; color:var(--ink2); }
.cta { background:var(--jade); color:#fff; border-radius:18px; padding:24px; margin:40px 0 24px; }
.cta h2 { color:#fff; margin-top:0; font-size:24px; }
.cta p { color:rgba(255,255,255,0.85); font-size:16px; }
.cta .button { background:#fff; color:var(--jade) !important; }
.related ul { list-style:none; margin:0; }
.related li { margin-bottom:8px; }
.related a { color:var(--jade); font-weight:500; text-decoration:none; font-size:16px; }
.hub { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
.hub a { display:block; background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:18px; text-decoration:none; color:var(--ink); }
.hub a strong { display:block; font-size:18px; margin-bottom:4px; }
.hub a span { font-size:14px; color:var(--ink2); }
footer { padding:30px 22px 40px; font-size:12px; color:var(--ink3); text-align:center; }
footer p { font-size:12px; color:var(--ink3); margin-bottom:8px; }
footer a { color:var(--ink3); }
@media (max-width:600px) { h1 { font-size:32px; } .hub { grid-template-columns:1fr; } }