.sg{margin-block:2rem;padding:clamp(.9rem,3vw,1.6rem);min-width:0;max-width:100%;overflow-wrap:anywhere;color:var(--zg-ink,#1d2433);background:var(--zg-card,#fff);border:1px solid var(--zg-line,#e3e7ef);border-radius:14px;scroll-margin-top:5rem}
.sg *{box-sizing:border-box}.sg [hidden]{display:none!important}.sg h2{margin:.45rem 0 .55rem;font-size:clamp(1.35rem,4vw,1.8rem)}.sg p{line-height:1.6}.sg-intro{max-width:70ch;margin:.5rem 0}.sg-note{font-size:.85rem;color:var(--zg-muted,#5c6577);margin:.5rem 0 1.2rem}.sg-spectrum{display:flex;align-items:center;gap:5px;width:88px;height:26px}.sg-spectrum i{display:block;width:4px;border-radius:4px;height:50%;background:var(--zg-blue,#3e63dd)}.sg-spectrum i:nth-child(2){height:90%;background:var(--zg-cyan,#0894b3)}.sg-spectrum i:nth-child(3){height:65%;background:var(--zg-green,#30a46c)}.sg-spectrum i:nth-child(4){height:100%;background:var(--zg-violet,#8e4ec6)}.sg-spectrum i:nth-child(5){height:40%;background:var(--zg-orange,#f76b15)}.sg-spectrum i:nth-child(6){height:80%;background:var(--zg-red,#e5484d)}.sg-spectrum i:nth-child(7){height:55%;background:var(--zg-pink,#d6409f)}
.sg-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem .8rem;font-size:.85rem;margin-bottom:.4rem;font-variant-numeric:tabular-nums}.sg-status strong{font-weight:650}.sg-progress{display:block;width:100%;height:.45rem;border:0;border-radius:999px;background:var(--zg-soft,#f4f6fb);accent-color:var(--zg-blue,#3e63dd);margin-bottom:1rem}.sg-progress::-webkit-progress-bar{background:var(--zg-soft,#f4f6fb);border-radius:999px}.sg-progress::-webkit-progress-value{background:var(--zg-rainbow,linear-gradient(90deg,#0894b3,#8e4ec6));border-radius:999px}.sg-progress::-moz-progress-bar{background:var(--zg-blue,#3e63dd);border-radius:999px}
.sg-card{--sg-accent:var(--zg-blue,#3e63dd);padding:clamp(.8rem,2.5vw,1.2rem);border:1px solid var(--zg-line,#e3e7ef);border-top:3px solid var(--sg-accent);background:var(--zg-soft,#f4f6fb);border-radius:10px}.sg-card[data-family=hfs]{--sg-accent:var(--zg-violet,#8e4ec6)}.sg-card[data-family=shift]{--sg-accent:var(--zg-cyan,#0894b3)}.sg-card[data-family=gamma]{--sg-accent:var(--zg-orange,#f76b15)}.sg-card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.45rem;margin-bottom:.8rem}.sg-family{font-size:.82rem;font-weight:700}.sg-symbol{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8rem;line-height:1.5;border:1px solid var(--zg-line,#e3e7ef);background:var(--zg-card,#fff);padding:.25rem .55rem;border-radius:6px;max-width:100%}
.sg-question-set{border:0;margin:0;padding:0;min-width:0}.sg-question-set legend{float:none;display:block;width:100%;font-size:1.05rem;font-weight:650;line-height:1.6;margin-bottom:.9rem;padding:0}.sg-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.sg-choice{display:flex;align-items:center;gap:.55rem;text-align:left;min-width:0;min-height:3.4rem;border:1px solid var(--zg-line,#e3e7ef);border-radius:8px;background:var(--zg-card,#fff);color:inherit;padding:.7rem;font:inherit;font-size:.9rem;line-height:1.5;cursor:pointer}.sg-choice-key{display:inline-flex;flex:0 0 1.5rem;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border:1px solid var(--zg-line,#e3e7ef);border-radius:50%;font-size:.7rem;font-weight:700}.sg-choice:hover:not(:disabled){border-color:var(--sg-accent)}.sg-choice:disabled{opacity:1;cursor:default}.sg-choice[data-result=correct]{border:2px solid var(--zg-green,#30a46c);padding:calc(.7rem - 1px)}.sg-choice[data-result=wrong]{border:2px dashed var(--zg-red,#e5484d);padding:calc(.7rem - 1px)}.sg-choice[data-result=correct] .sg-choice-key{border-color:var(--zg-green,#30a46c)}.sg-feedback{margin-top:1rem;padding:.8rem .9rem;border-left:3px solid var(--sg-accent);border-radius:0 7px 7px 0;background:var(--zg-card,#fff);font-size:.9rem}.sg-feedback p{margin:.35rem 0}.sg-feedback strong{display:block;margin-bottom:.3rem}.sg-feedback a{display:inline-block;margin-top:.3rem;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}.sg-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}.sg-actions .zg-btn{min-height:2.75rem;white-space:normal}.sg-actions [data-sg-next]{border-color:var(--zg-blue,#3e63dd)}.sg-actions button:disabled{cursor:default;opacity:.55}.sg button:focus-visible,.sg a:focus-visible{outline:3px solid var(--zg-blue,#3e63dd);outline-offset:3px}.sg-question-set legend:focus,.sg-feedback:focus{outline:2px solid var(--zg-blue,#3e63dd);outline-offset:5px}
@media(max-width:620px){.sg-options{grid-template-columns:minmax(0,1fr)}.sg-choice{min-height:2.9rem}.sg-card-top{align-items:flex-start}.sg-symbol{font-size:.75rem}.sg-status{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.sg *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}