:root{--bg: #fff0f7;--card: #fffaff;--ink: #4a2540;--muted: #8d5d7d;--accent: #ff6fb4;--ok: #32b67a;--bad: #d7557c;--line: #ffd1e6}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:PingFang SC,Microsoft YaHei,sans-serif;line-height:1.7;background:radial-gradient(circle at 8% 8%,#ffd6ea 0%,transparent 45%),radial-gradient(circle at 88% 92%,#ffc6df 0%,transparent 40%),radial-gradient(circle at 50% 40%,#ffe2f1 0%,transparent 52%),var(--bg)}.wrap{max-width:980px;margin:0 auto;padding:24px 16px 48px}.card{background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:0 10px 30px #bc4d881f;padding:20px;margin-bottom:16px}h1,h2,h3{margin:0 0 10px;line-height:1.3}h1{font-size:clamp(1.5rem,2.8vw,2.2rem)}h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-top:14px}p{margin:8px 0}.muted{color:var(--muted)}.boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.box{border:2px solid var(--line);background:#fff4fa;border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;min-height:98px;display:flex;flex-direction:column;justify-content:center;gap:6px}.box:hover{transform:translateY(-3px)}.box.selected{border-color:var(--accent);box-shadow:0 8px 18px #ff6fb43d}.box.opened{border-style:dashed;opacity:.75;cursor:default;background:#fff}.box.revealed-egg{border-color:var(--ok);background:#f0fff6}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}button{border:0;border-radius:999px;padding:10px 14px;font-size:14px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff8dc5,#ff5da9);transition:transform .15s ease}button.alt{background:linear-gradient(135deg,#ff9bcf,#f568b5)}button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}button:hover{transform:translateY(-1px)}.result.ok{color:var(--ok);font-weight:700}.result.bad{color:var(--bad);font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.stat-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff6fb}.chart-wrap{margin-top:12px;background:#fff9fd;border:1px solid var(--line);border-radius:12px;padding:12px;height:300px}.pill{display:inline-block;background:#ffe2f1;border:1px solid #ffbfdc;border-radius:999px;padding:3px 10px;margin-right:6px;font-size:12px}pre{margin:10px 0 0;background:#3a2232;color:#ffeef8;border-radius:12px;padding:12px;overflow:auto;font-size:13px;line-height:1.45}.step-header{margin-bottom:14px}.step-header p{margin-top:0}.step-progress{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.step-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.hero-cat{display:block;width:min(100%,320px);margin:0 auto 14px;border-radius:16px;border:2px solid var(--line);box-shadow:0 8px 18px #bc4d8824}.glasses-cat{display:flex;align-items:center;gap:8px;margin-top:10px}.github-icon{width:20px;height:20px;color:#8d5d7d;flex:0 0 auto}.glasses-cat p{margin:0}.hell-explain{margin-top:16px;padding-top:10px;border-top:1px dashed var(--line)}.embrassed-cat{display:block;width:min(100%,280px);margin:8px auto 6px;border-radius:14px;border:2px solid var(--line)}.dots{display:flex;gap:8px}button.dot{width:11px;height:11px;border-radius:50%;padding:0;min-width:11px;background:#f8bfdc;border:1px solid #f6abd3}button.dot.active{background:#ff4fa4;border-color:#ff4fa4}@media (max-width: 720px){.boxes,.stat-grid{grid-template-columns:1fr}.step-nav{flex-direction:column;align-items:stretch}.dots{justify-content:center}}