#fp-penalty-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:15;visibility:hidden;pointer-events:none;background:#041a30}
#fp-penalty-frame.show{visibility:visible;pointer-events:auto}html.fp-rejoin-required #fp-penalty-frame{visibility:hidden!important;pointer-events:none!important}
.hp-page{margin:0;min-width:300px;background:radial-gradient(ellipse at 10% 0%,#125079,transparent 60%),#041a30;color:#f4fbff;font:16px/1.45 Arial,Helvetica,sans-serif;color-scheme:dark}
.hp-view,.hp-view *{box-sizing:border-box}.hp-view{max-width:640px;margin:auto;padding:24px 20px 36px;color:#f4fbff;font-family:Arial,Helvetica,sans-serif}.hp-brand{font-size:22px;font-weight:900;letter-spacing:.07em;margin-bottom:28px}.hp-brand span{font-size:11px;color:#7ddfff;margin-left:12px}.hp-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#91bed7}.hp-badge{border:1px solid #70d9ff50;border-radius:30px;padding:6px 12px;color:#8ce5ff}.hp-view h1{font-size:clamp(35px,8vw,55px);line-height:1.05;letter-spacing:-.045em;margin:24px 0 14px}.hp-lead{color:#a8c5d7;margin-bottom:24px}.hp-timer{display:flex;align-items:center;gap:20px;background:#0e3852;border:1px solid #7cddff30;padding:18px;border-radius:20px}.hp-clock{font-size:54px;line-height:1;color:#83e1ff;min-width:65px;text-align:center;font-variant-numeric:tabular-nums}.hp-timer-title{font-size:16px}.hp-timer-copy{font-size:13px;color:#afc9d8;margin:5px 0 0}.hp-progress{height:5px;border-radius:10px;background:#17415a;margin:14px 0 24px;overflow:hidden}.hp-progress i{display:block;height:100%;background:#75ddff;width:100%}.hp-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hp-choices button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;border:1px solid #79d9ff48;border-radius:18px;background:#0b2d46;color:#fff;font:700 16px Arial;min-height:104px;cursor:pointer;touch-action:manipulation}.hp-choices button span{font-size:34px}.hp-choices button:disabled{cursor:default;opacity:.65}.hp-choices button[aria-pressed=true]{background:#0d678a;border-color:#91eaff;box-shadow:inset 0 0 0 2px #91eaff}.hp-choices button:focus-visible{outline:3px solid #fff;outline-offset:3px}.hp-choices .hp-correct{opacity:1!important;background:#145943;border-color:#8df2c0}.hp-perspective{font-size:12px;color:#a3bece;text-align:center;margin:15px 0}.hp-feedback{font-size:14px;color:#b9e8ff;min-height:20px}.hp-personal{border:1px solid #ffffff30;border-radius:18px;padding:20px;margin-top:20px;background:#12334c}.hp-personal strong{font-size:22px}.hp-personal p{margin-bottom:0;color:#c3d6e3}.hp-personal.hp-win{background:#104a3b;border-color:#81e5b4}.hp-results{margin-top:24px}.hp-bar{margin:17px 0}.hp-bar>div{display:flex;justify-content:space-between;margin-bottom:8px}.hp-bar>i{display:block;background:#21445a;height:12px;border-radius:20px;overflow:hidden}.hp-bar i b{display:block;height:100%;background:#69d3f5}.hp-bar.hp-correct{color:#91f0c0}.hp-bar.hp-correct i b{background:#91f0c0}.hp-view [hidden],.hp-screen[hidden]{display:none!important}
.hp-screen{position:fixed;inset:0;z-index:2147482000;background:radial-gradient(ellipse at 10% 0%,#125079,transparent 60%),#041a30;overflow:auto;max-width:none;padding:4vh 8vw}.hp-cube .hp-brand{font-size:2.4vw;margin-bottom:2vh}.hp-cube .hp-brand span{font-size:1.1vw}.hp-cube .hp-top{font-size:1.3vw}.hp-cube h1{font-size:5.2vw;margin:2vh 0;line-height:1}.hp-cube h1 br{display:none}.hp-cube .hp-lead{font-size:1.7vw;margin:2vh 0}.hp-cube .hp-timer{padding:2vh 2vw;gap:2vw}.hp-cube .hp-clock{font-size:7vw;min-width:9vw}.hp-cube .hp-timer-title{font-size:2.2vw}.hp-cube .hp-timer-copy{font-size:1.5vw}.hp-cube .hp-choices button{min-height:12vh;font-size:2vw;opacity:1}.hp-cube .hp-choices button span{font-size:3vw}.hp-cube .hp-perspective{font-size:1.2vw;margin:1.5vh 0}.hp-cube .hp-feedback{font-size:1.3vw;min-height:0;margin:0}.hp-cube .hp-feedback:empty{display:none}.hp-cube:has(.hp-results:not([hidden])) .hp-lead,.hp-cube:has(.hp-results:not([hidden])) .hp-progress,.hp-cube:has(.hp-results:not([hidden])) .hp-choices{display:none}.hp-cube .hp-results{margin-top:2vh}.hp-cube .hp-bar{font-size:2.1vw;margin:2vh 0}.hp-cube .hp-bar>i{height:1.6vh}.hp-cube .hp-results p{font-size:1.5vw}
@media(max-width:360px){.hp-view{padding:18px 14px}.hp-choices{gap:7px}.hp-choices button{font-size:14px}.hp-timer{padding:14px;gap:12px}}