.htp-ex{--htp-ex-h:11.5rem;position:relative;width:100%;height:var(--htp-ex-h);max-width:22rem;margin:0 auto;border-radius:var(--radius-card,.85rem);background:var(--color-surface-sunken);border:1px solid var(--color-border);overflow:hidden}@media (max-width:479px){.htp-ex{--htp-ex-h:9.75rem}}.htp-ex-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.htp-ex-ori{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;height:100%;padding:1rem 1.1rem}.htp-ex-ori-compass{position:relative;width:6.5rem;height:6.5rem;border-radius:50%;background:var(--color-surface);border:2px solid var(--color-border);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-ink) 4%,transparent)}.htp-ex-ori-n{position:absolute;top:.3rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.7rem;color:var(--color-muted)}.htp-ex-ori-tol{position:absolute;inset:.55rem;border-radius:50%;background:conic-gradient(from 200deg,transparent 0deg,color-mix(in srgb,var(--color-primary) 22%,transparent) 0deg 30deg,transparent 30deg)}.htp-ex-ori-needle{position:absolute;left:50%;top:50%;width:.18rem;height:2.4rem;margin-left:-.09rem;margin-top:-2.4rem;background:var(--color-primary);border-radius:999px;transform-origin:bottom center;animation:htp-ex-needle 6.5s ease-in-out infinite}.htp-ex-ori-meta{display:flex;flex-direction:column;gap:.45rem;font-family:var(--font-mono);font-size:.85rem}.htp-ex-ori-km{color:var(--color-ink);animation:htp-ex-fade 6.5s ease-in-out infinite}.htp-ex-ori-pts{color:var(--color-primary);font-weight:600;animation:htp-ex-pts 6.5s ease-in-out infinite}@keyframes htp-ex-needle{0%,12%{transform:rotate(-40deg)}45%,70%{transform:rotate(18deg)}to{transform:rotate(-40deg)}}@keyframes htp-ex-pts{0%,40%{opacity:.35}55%,80%{opacity:1}to{opacity:.35}}@keyframes htp-ex-fade{0%,20%{opacity:.4}45%,80%{opacity:1}to{opacity:.4}}.htp-ex-pie{width:4.5rem;height:4.5rem;border-radius:50%;flex-shrink:0;border:1px solid var(--color-border)}.htp-ex-pie--3{background:conic-gradient(#ed2939 0 33%,#fff 33% 66%,#ed2939 66% 100%)}.htp-ex-pie--de{background:conic-gradient(#000 0 33%,#dd0000 33% 66%,#ffce00 66% 100%)}.htp-ex-sig{justify-content:center;gap:.55rem;height:100%;padding:.85rem}.htp-ex--signature .htp-ex-chips,.htp-ex-sig{display:flex;flex-direction:column;align-items:center}.htp-ex--signature .htp-ex-chips{gap:.35rem}.htp-ex-chip{font-size:.72rem;padding:.2rem .5rem;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-ink);opacity:0;animation:htp-ex-chip-in 7s ease-in-out infinite}.htp-ex-chip--1{animation-delay:0s}.htp-ex-chip--2{animation-delay:.9s}.htp-ex-chip--3{animation-delay:1.8s}.htp-ex-pick{font-family:var(--font-ui);font-size:.85rem;font-weight:600;color:var(--color-primary);background:var(--color-success-bg);border-radius:.5rem;padding:.3rem .7rem;opacity:0;animation:htp-ex-pick-in 7s ease-in-out infinite}@keyframes htp-ex-chip-in{0%,5%{opacity:0;transform:translateY(4px)}15%,75%{opacity:1;transform:none}90%,to{opacity:0}}@keyframes htp-ex-pick-in{0%,40%{opacity:0;transform:translateY(4px)}52%,78%{opacity:1;transform:none}92%,to{opacity:0}}.htp-ex-fc{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;height:100%;padding:1rem 1.1rem}.htp-ex-guesses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.htp-ex-guess{font-size:.8rem;padding:.25rem .55rem;border-radius:.4rem;opacity:0;animation:htp-ex-guess-in 7.5s ease-in-out infinite}.htp-ex-guess--wrong{background:var(--color-error-bg);color:var(--color-error)}.htp-ex-guess--ok{background:var(--color-success-bg);color:var(--color-primary);font-weight:600}.htp-ex-guesses .htp-ex-guess:first-child{animation-delay:.4s}.htp-ex-guesses .htp-ex-guess:nth-child(2){animation-delay:1.8s}.htp-ex-guesses .htp-ex-guess:nth-child(3){animation-delay:3.2s}@keyframes htp-ex-guess-in{0%,8%{opacity:0;transform:translateX(-6px)}18%,78%{opacity:1;transform:none}92%,to{opacity:0}}.htp-ex-map{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;height:100%;padding:.75rem}.htp-ex-map-svg{width:min(100%,14rem);height:auto}.htp-ex-map-land{fill:color-mix(in srgb,var(--color-primary) 18%,var(--color-surface));stroke:var(--color-border);stroke-width:1}.htp-ex-map-tap{fill:var(--color-ink);opacity:0;animation:htp-ex-tap 6s ease-in-out infinite}.htp-ex-map-hit{fill:none;stroke:var(--color-primary);stroke-width:2;opacity:0;animation:htp-ex-hit 6s ease-in-out infinite}.htp-ex-map-label{font-size:.78rem;color:var(--color-muted);font-family:var(--font-ui)}@keyframes htp-ex-tap{0%,25%{opacity:0;r:2}40%{opacity:1;r:4}55%,80%{opacity:.85;r:3.5}to{opacity:0}}@keyframes htp-ex-hit{0%,40%{opacity:0}50%,80%{opacity:1}to{opacity:0}}.htp-ex-nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;height:100%;padding:.85rem}.htp-ex-nb-count{font-family:var(--font-mono);font-size:.85rem;color:var(--color-primary);font-weight:600;animation:htp-ex-count 7s step-end infinite}.htp-ex-nb-grid{display:grid;grid-template-columns:repeat(3,2.6rem);gap:.35rem}.htp-ex-nb-cell,.htp-ex-nb-core{display:inline-flex;align-items:center;justify-content:center;height:2.2rem;border-radius:.45rem;font-family:var(--font-mono);font-size:.75rem;font-weight:600}.htp-ex-nb-core{background:var(--color-primary);color:var(--color-surface);grid-column:2;grid-row:1}.htp-ex-nb-cell{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-ink);opacity:.35}.htp-ex-nb-cell--1{grid-column:1;grid-row:1;animation:htp-ex-nb-fill 7s ease-in-out infinite;animation-delay:.6s}.htp-ex-nb-cell--2{grid-column:3;grid-row:1;animation:htp-ex-nb-fill 7s ease-in-out infinite;animation-delay:1.8s}.htp-ex-nb-cell--3{grid-column:1;grid-row:2;animation:htp-ex-nb-fill 7s ease-in-out infinite;animation-delay:3s}.htp-ex-nb-cell--empty{opacity:.25;color:var(--color-muted)}@keyframes htp-ex-nb-fill{0%,10%{opacity:.35;background:var(--color-surface);color:var(--color-ink)}20%,78%{opacity:1;background:var(--color-success-bg);color:var(--color-primary)}92%,to{opacity:.35;background:var(--color-surface);color:var(--color-ink)}}@keyframes htp-ex-count{0%,14%{content:"0/5"}}@media (prefers-reduced-motion:reduce){.htp-ex-chip,.htp-ex-guess,.htp-ex-map-hit,.htp-ex-map-tap,.htp-ex-nb-cell--1,.htp-ex-nb-cell--2,.htp-ex-nb-cell--3,.htp-ex-ori-km,.htp-ex-ori-needle,.htp-ex-ori-pts,.htp-ex-pick{animation:none!important}.htp-ex-ori-needle{transform:rotate(18deg)}.htp-ex-chip,.htp-ex-guess,.htp-ex-map-hit,.htp-ex-map-tap,.htp-ex-ori-km,.htp-ex-ori-pts,.htp-ex-pick{opacity:1!important}.htp-ex-nb-cell--1,.htp-ex-nb-cell--2,.htp-ex-nb-cell--3{opacity:1;background:var(--color-success-bg);color:var(--color-primary)}}.htp-screen{--htp-pad-x:1.25rem;--htp-gap:1.1rem;box-sizing:border-box;min-height:100dvh;height:100dvh;max-width:min(var(--max-width),100%);margin:0 auto;padding:calc(1.25rem + var(--safe-top-inset, env(safe-area-inset-top, 0px))) var(--htp-pad-x) calc(1.5rem + var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));flex-direction:column;overflow:hidden;background:var(--color-bg);color:var(--color-ink)}.htp-body,.htp-screen{display:flex;gap:var(--htp-gap)}.htp-body{flex:1 1 auto;min-height:0;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.htp-kicker{margin:0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}.htp-hero{display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center}@media (min-width:480px){.htp-hero{flex-direction:row;align-items:center;text-align:left;gap:1.25rem}}.htp-mascot{flex-shrink:0;width:clamp(7rem,28vw,10rem);height:clamp(7rem,28vw,10rem)}@media (max-width:479px){.htp-mascot{width:clamp(5.25rem,24vw,6.75rem);height:clamp(5.25rem,24vw,6.75rem)}.htp-hero{gap:.65rem}}.htp-hero-copy{display:flex;flex-direction:column;gap:.45rem;min-width:0}.htp-title{margin:0;font-family:var(--font-display);font-size:clamp(1.55rem,4vw,1.9rem);font-weight:650;letter-spacing:-.02em;line-height:1.15}.htp-goal{margin:0;font-size:1.05rem;line-height:1.45;color:var(--color-ink)}.htp-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem;flex-shrink:0}.htp-step{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.55rem;align-items:start;font-size:.92rem;line-height:1.45;color:var(--color-ink)}.htp-step-text{min-width:0;overflow-wrap:break-word}.htp-step-num{padding-top:.15rem}.htp-length,.htp-step-num{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--color-primary)}.htp-length{margin:0;display:inline-flex;align-self:flex-start;gap:.4rem;align-items:center;padding:.35rem .7rem;border-radius:999px;background:var(--color-accent-light)}.htp-example-wrap{margin-top:.15rem}.htp-actions{flex-shrink:0;display:flex;flex-direction:column;gap:.55rem;padding-top:.25rem}.htp-start{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min,2.75rem);width:100%;border:none;border-radius:var(--radius-button,.75rem);background:var(--color-primary);color:#fff;font-family:var(--font-ui);font-size:1rem;font-weight:650;cursor:pointer;-webkit-tap-highlight-color:transparent}.htp-start:hover{background:var(--color-accent-hover)}.htp-start:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.htp-back{display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem;border:none;background:transparent;color:var(--color-muted);font-size:.9rem;font-weight:550;cursor:pointer;text-decoration:none}.htp-back:hover{color:var(--color-ink)}