.kss-tool{--kss-accent:#7c3aed;--kss-accent2:#a78bfa;--kss-bg:#f5f3ff;--kss-card:#fff;--kss-text:#4c1d95;--kss-muted:#64748b;--kss-border:#ddd6fe;position:relative;padding:1.25rem;border-radius:16px;background:linear-gradient(180deg,var(--kss-bg),#fff);overflow:hidden}
.kss-hero{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.kss-hero-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--kss-accent2),var(--kss-accent));font-size:1.75rem;flex-shrink:0;box-shadow:0 4px 12px rgba(124,58,237,.25)}
.kss-hero-body{flex:1;min-width:200px}
.kss-kicker{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kss-accent)}
.kss-subject{display:inline-block;margin-left:.5rem;padding:.15rem .45rem;border-radius:999px;background:#ede9fe;font-size:.65rem;color:var(--kss-accent)}
.kss-hero h2{margin:.25rem 0;color:var(--kss-text)}
.kss-hero p{margin:0;color:var(--kss-muted);max-width:36rem;font-size:.95rem}
.kss-stats{display:flex;gap:.65rem;margin-left:auto}
.kss-stat{text-align:center;padding:.55rem .85rem;border-radius:12px;background:var(--kss-card);border:2px solid var(--kss-border);min-width:72px}
.kss-stat strong{display:block;font-size:1.5rem;color:var(--kss-accent);line-height:1.1}
.kss-stat span{font-size:.7rem;color:var(--kss-muted);text-transform:uppercase;letter-spacing:.04em}
.kss-toolbar{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:1rem;padding:.65rem .75rem;border-radius:12px;background:var(--kss-card);border:1px solid var(--kss-border)}
.kss-toolbar-label{font-size:.75rem;font-weight:700;color:var(--kss-muted);text-transform:uppercase;letter-spacing:.06em}
.kss-pills{display:flex;gap:.35rem;flex-wrap:wrap}
.kss-pill{padding:.35rem .75rem;border:2px solid var(--kss-border);border-radius:999px;background:#fff;font-size:.78rem;font-weight:700;color:var(--kss-text);cursor:pointer;transition:all .15s}
.kss-pill.is-active{background:var(--kss-accent);border-color:var(--kss-accent);color:#fff}
.kss-sound{margin-left:auto;padding:.4rem .75rem;border:2px solid var(--kss-border);border-radius:999px;background:#fff;font-size:.78rem;font-weight:700;cursor:pointer;opacity:.65;transition:all .15s}
.kss-sound.is-on{opacity:1;border-color:var(--kss-accent);background:#ede9fe}
.kss-tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.kss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem}
.kss-tile{min-height:64px;border:2px solid #e2e8f0;border-radius:12px;background:var(--kss-card);font-size:.82rem;font-weight:700;color:var(--kss-text);cursor:pointer;transition:transform .15s,border-color .15s}
.kss-tile:hover,.kss-tile:focus-visible{transform:translateY(-2px);border-color:var(--kss-accent);outline:none}
.kss-tile.is-active{background:#ede9fe;border-color:var(--kss-accent)}
.kss-detail{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;margin-top:1rem;padding:1rem;border-radius:14px;background:var(--kss-card);border:2px solid var(--kss-border)}
.kss-planet{width:80px;height:80px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#c4b5fd,var(--kss-accent));font-size:2.25rem}
.kss-detail h3{margin:0 0 .35rem;color:var(--kss-text)}
.kss-detail p{margin:0;color:var(--kss-muted)}
.kss-quiz{padding:1rem;border-radius:14px;background:var(--kss-card);border:2px solid var(--kss-border)}
.kss-prompt{margin:0 0 .5rem;color:var(--kss-muted);font-size:.95rem}
.kss-target{font-size:3rem;text-align:center;margin-bottom:1rem}
.kss-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}
.kss-choice{padding:.65rem;border:2px solid #e2e8f0;border-radius:12px;background:#fff;font-weight:700;cursor:pointer;transition:all .15s}
.kss-choice:hover{border-color:var(--kss-accent)}
.kss-choice.is-correct{background:#dcfce7;border-color:#22c55e;animation:kss-pop .35s ease}
.kss-choice.is-wrong{background:#fee2e2;border-color:#ef4444;animation:kss-shake .4s ease}
.kss-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.kss-celebrate{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.kss-particle{position:absolute;font-size:1.25rem;animation:kss-float 1.4s ease forwards;opacity:0}
@keyframes kss-pop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes kss-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes kss-float{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120px)}}
@media(max-width:640px){.kss-stats{width:100%;margin-left:0;justify-content:center}.kss-detail{grid-template-columns:1fr;text-align:center}.kss-planet{margin:0 auto}.kss-sound{margin-left:0}}