.hp-hero{background:radial-gradient(circle at 85% 15%,rgba(37,99,235,.13),transparent 34%),linear-gradient(180deg,#fff,#f8fbff)}
.hp-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.hp-stat-grid article{border:1px solid #e1e7ef;border-radius:17px;padding:20px;background:#fff}.hp-stat-grid strong{display:block;font-size:30px;line-height:1;font-weight:950;color:#172033;margin-bottom:8px}.hp-stat-grid span{font-size:12px;line-height:1.45;color:#697586;font-weight:750}.hp-example{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}.hp-example-stage{display:flex;gap:13px;align-items:flex-start;border:1px solid #e1e7ef;border-radius:17px;padding:18px;background:#fff}.hp-example-stage>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf2f7;font-weight:950;color:#334155;flex:0 0 auto}.hp-example-stage b{display:block;font-size:15px;margin-bottom:5px}.hp-example-stage p{margin:0;color:#697586;font-size:12px;line-height:1.5}.hp-example-stage.active{border-color:#bfdbfe;background:#f8fbff}.hp-example-stage.active>span{background:#2563eb;color:#fff}.hp-example-stage.danger{border-color:#fed7aa;background:#fffaf4}.hp-example-stage.danger>span{background:#f97316;color:#fff}.hp-example-arrow{font-size:22px;font-weight:950;color:#94a3b8}
.hp-app{overflow:hidden}.hp-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.hp-topbar>div:first-child{min-width:0}.hp-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#64748b;font-weight:950;margin-bottom:3px}.hp-topbar strong{font-size:18px;color:#172033}.hp-scorebox{text-align:right;flex:0 0 auto}.hp-scorebox span{display:block;font-size:10px;color:#64748b;text-transform:uppercase;font-weight:900}.hp-scorebox strong{font-size:24px;color:#2563eb}.hp-stage-wrap{max-width:960px;margin:0 auto}.hp-stage{position:relative;border-radius:20px;overflow:hidden;background:#0f172a;box-shadow:0 18px 45px rgba(15,23,42,.18);cursor:crosshair;outline:none}.hp-stage:focus-visible{box-shadow:0 0 0 4px rgba(37,99,235,.25),0 18px 45px rgba(15,23,42,.18)}.hp-stage svg{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#dceeff}.hp-overlay{position:absolute;inset:0;background:rgba(10,18,32,.78);display:grid;place-items:center;padding:24px;color:#fff;text-align:center}.hp-overlay[hidden]{display:none}.hp-overlay>div{max-width:570px}.hp-overlay b{font-size:25px;display:block;margin-bottom:8px}.hp-overlay p{font-size:14px;line-height:1.6;color:#dbe5f1}.hp-countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:60px;font-weight:950;color:#fff;background:rgba(15,23,42,.65)}.hp-flash{position:absolute;left:50%;bottom:18px;transform:translate(-50%,12px);opacity:0;background:#0f172a;color:#fff;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:900;transition:.18s;pointer-events:none}.hp-flash.show{opacity:1;transform:translate(-50%,0)}.hp-progress{height:7px;background:#e8edf3;border-radius:999px;margin-top:12px;overflow:hidden}.hp-progress i{display:block;height:100%;width:0;background:#2563eb;transition:width .05s linear}.hp-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}.hp-hazard-btn{appearance:none;border:0;border-radius:14px;background:#e11d48;color:#fff;padding:14px 22px;font-size:15px;font-weight:950;box-shadow:0 8px 22px rgba(225,29,72,.18);cursor:pointer}.hp-hazard-btn:disabled{opacity:.45;cursor:not-allowed}.hp-hazard-btn:not(:disabled):active{transform:translateY(1px)}.hp-clicks{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:#697586;font-size:11px;font-weight:800}.hp-feedback{margin-top:22px;border-top:1px solid #e1e7ef;padding-top:20px}.hp-feedback-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:13px}.hp-feedback-head span{display:block;text-transform:uppercase;font-size:10px;letter-spacing:.07em;color:#64748b;font-weight:900}.hp-feedback-head strong{font-size:30px}.hp-zero{font-size:11px;color:#b42318;background:#fef3f2;padding:8px 10px;border-radius:10px}.hp-feedback article{border:1px solid #e1e7ef;border-radius:15px;padding:16px;margin-top:10px;background:#fff}.hp-feedback article h3{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:15px}.hp-feedback article h3 span{color:#2563eb}.hp-feedback article p{margin:5px 0;color:#596578;font-size:12px;line-height:1.55}.hp-feedback article small{display:block;margin-top:8px;color:#64748b;font-weight:800}.hp-final{margin-top:22px;border-top:1px solid #e1e7ef;padding-top:22px}.hp-final-score{border-radius:19px;padding:26px;background:#f8fafc;border:1px solid #e1e7ef}.hp-final-score.pass{background:#f1faf5;border-color:#cdebd9}.hp-final-score.fail{background:#fff8f1;border-color:#fed7aa}.hp-final-score span{font-size:10px;font-weight:900;text-transform:uppercase;color:#64748b}.hp-final-score strong{display:block;font-size:52px;line-height:1.05;margin:6px 0}.hp-final-score b{font-size:17px}.hp-final-score p{max-width:680px;color:#596578;line-height:1.55;font-size:13px}.hp-weak{margin-top:16px}.hp-weak h2{font-size:18px;margin:0 0 10px}.hp-weak div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e7ebf0;padding:9px 0;font-size:12px}.hp-weak span{font-weight:950}.hp-guide-sections{display:grid;gap:13px}.hp-guide-sections article{border:1px solid #e1e7ef;background:#fff;border-radius:17px;padding:21px}.hp-guide-sections h2{margin:0 0 7px;font-size:19px}.hp-guide-sections p{margin:0;color:#657185;line-height:1.65;font-size:13px}
@media(max-width:800px){.hp-stat-grid{grid-template-columns:repeat(2,1fr)}.hp-example{grid-template-columns:1fr}.hp-example-arrow{transform:rotate(90deg);text-align:center}.hp-topbar{align-items:flex-start}.hp-stage{border-radius:14px}.hp-overlay b{font-size:21px}.hp-final-score strong{font-size:42px}}
@media(max-width:480px){.hp-stat-grid{grid-template-columns:1fr 1fr}.hp-stat-grid article{padding:16px}.hp-stat-grid strong{font-size:25px}.hp-hazard-btn{width:100%}.hp-controls .dt-btn{flex:1}.hp-feedback-head{align-items:flex-start;flex-direction:column}.hp-clicks{font-size:10px}}