.hd{margin:28px 0;padding:clamp(20px,3vw,36px);border:1px solid #c7d8e9;border-radius:22px;background:linear-gradient(120deg,#eff5fc,#fff);color:#132c49}.hd header>p:first-child{color:#2467ad;font-size:13px;font-weight:800;letter-spacing:.08em}.hd h2{font-size:clamp(24px,3vw,32px);line-height:1.4;margin:8px 0}.hd p{font-size:16px;line-height:1.7}.hd-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:center;margin:24px 0}.hd-machine{width:230px;margin:auto}.hd-drum{height:208px;border:5px solid #96b4cf;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#dbe8f6);position:relative;box-shadow:inset 0 0 22px #668caa33}.hd-drum span{position:absolute;left:calc(15% + mod(var(--i),3)*25%);top:35%;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#2769a5;color:white;font-weight:800;box-shadow:inset -3px -4px 5px #0003,0 3px 6px #16395833}.hd-drum span:nth-child(3n+1){background:#ffcd48;color:#17324f}.hd-drum span:nth-child(3n+2){background:#477e97}.hd-drum span:nth-child(1){left:15%;top:22%}.hd-drum span:nth-child(2){left:40%;top:14%}.hd-drum span:nth-child(3){left:64%;top:28%}.hd-drum span:nth-child(4){left:10%;top:47%}.hd-drum span:nth-child(5){left:36%;top:42%}.hd-drum span:nth-child(6){left:65%;top:51%}.hd-drum span:nth-child(7){left:22%;top:68%}.hd-drum span:nth-child(8){left:47%;top:70%}.hd-drum span:nth-child(9){left:45%;top:49%}.hd-base{position:relative;text-align:center;background:#163958;color:#fff;border-radius:12px;padding:12px;font-weight:800;letter-spacing:.12em;margin-top:-12px}.hd.is-drawing .hd-drum span{animation:hd-bounce .45s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-70ms)}@keyframes hd-bounce{to{transform:translate(8px,-20px) rotate(40deg)}}.hd button,.hd-actions a{font:inherit;font-size:16px;font-weight:700;border:1px solid #b3c7db;border-radius:9px;padding:12px 18px;min-height:48px;cursor:pointer;background:#fff;color:#17324f}.hd .hd-primary{background:#ffcf4b;border-color:#e6b12e;font-size:19px;min-width:180px}.hd button:disabled{opacity:.6;cursor:wait}.hd-actions{display:flex;gap:10px;flex-wrap:wrap}.hd-actions a{text-decoration:none}.hd button:focus-visible,.hd a:focus-visible,.hd summary:focus-visible{outline:3px solid #2678c9;outline-offset:3px}.hd [hidden]{display:none!important}#hdBalls{display:flex;gap:9px;list-style:none;padding:0;margin:20px 0}#hdBalls li{width:43px;height:43px;display:grid;place-items:center;background:#173e65;color:#fff;border-radius:50%;font-size:19px;font-weight:800}.hd-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;max-width:450px;margin:12px 0}.hd-grid span{display:grid;place-items:center;min-height:32px;border:1px solid #bccbda;border-radius:4px;font-size:14px;background:#fff}.hd-grid .selected{background:#173958;color:#fff;font-weight:800;outline:2px solid #173958}.hd small{font-size:14px}.hd details{border-top:1px solid #ccd8e4;padding-top:16px}.hd summary{cursor:pointer;font-size:16px;font-weight:700}.hd details p{max-width:850px}#hdMarking{margin-top:18px} @media(max-width:650px){.hd-layout{grid-template-columns:1fr;gap:18px}.hd-machine{width:170px}.hd-drum{height:154px}.hd-drum span{width:28px;height:28px;font-size:13px}.hd-base{padding:8px;font-size:12px}#hdBalls{gap:6px}#hdBalls li{width:34px;height:34px;font-size:16px}.hd-actions{flex-direction:column}.hd-grid{gap:4px}.hd-grid span{font-size:12px}.hd .hd-primary{width:100%}}@media(prefers-reduced-motion:reduce){.hd.is-drawing .hd-drum span{animation:none}}