.hh-system-preview{position:relative;background:#f8faf8;color:var(--hh-ink);padding:26px;border-radius:22px;box-shadow:0 30px 70px #0006;transform:rotate(1deg);border:1px solid #ffffff24}.hh-system-head{display:flex;justify-content:space-between;align-items:center;font-size:.86rem}.hh-system-head strong{font-size:.82rem}.hh-system-progress{height:7px;background:#dfe7e2;border-radius:8px;margin:20px 0}.hh-system-progress span{display:block;width:68%;height:100%;border-radius:8px;background:var(--hh-gold)}.hh-system-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hh-system-grid article{padding:20px;background:#fff;border:1px solid var(--hh-line);border-radius:13px}.hh-system-grid article.active{background:var(--hh-green);color:#fff}.hh-system-grid i{display:block;color:#d49f47;font-size:1.35rem;margin-bottom:12px}.hh-system-grid strong,.hh-system-grid span{display:block}.hh-system-grid strong{font-size:.95rem}.hh-system-grid span{margin-top:7px;color:#78857f;font-size:.78rem}.hh-system-grid article.active span{color:#bcd0c7}@media(max-width:960px){.hh-system-preview{max-width:620px}}@media(max-width:680px){.hh-system-preview{transform:none;padding:20px}.hh-system-grid{grid-template-columns:1fr 1fr}.hh-system-grid article{padding:16px 14px}}@media(max-width:420px){.hh-system-grid{grid-template-columns:1fr}}