.odk{--k-ink:#1f2540;--k-bg:#fff8e1;--k-card:#ffffff;--k-line:#e6d9a8;--k-main:#5b3df5;--k-mainfg:#fff;--k-ok:#0f7b4a;--k-bad:#c0392b;--k-pink:#ffe0ec;--k-blue:#dff0ff;--k-green:#dcf7e3;--k-yellow:#fff0b3;max-width:900px;margin:16px auto;padding:16px;border-radius:20px;background:var(--k-bg);color:var(--k-ink);font:600 18px/1.5 ui-rounded,"Trebuchet MS","Segoe UI",system-ui,sans-serif;box-sizing:border-box;position:relative;overflow:hidden}
.odk *{box-sizing:border-box}
.odk button{font:inherit;color:inherit;cursor:pointer;min-height:48px}
.odk button:focus-visible,.odk input:focus-visible,.odk select:focus-visible,.odk textarea:focus-visible{outline:4px solid #ff9f1c;outline-offset:2px}
.odk button:disabled{opacity:.55;cursor:not-allowed}
.odk h2,.odk h3,.odk h4{margin:0}
.odk__top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:12px}
.odk__brand{display:flex;gap:12px;align-items:center}
.odk__brand p{margin:0;font-weight:500}
.odk__mascot{font-size:2.6rem}
.odk__tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.odk__btn{padding:8px 16px;border:3px solid var(--k-ink);background:var(--k-card);border-radius:14px;font-weight:700}
.odk__go{padding:10px 20px;border:3px solid var(--k-main);background:var(--k-main);color:var(--k-mainfg);border-radius:14px;font-weight:800}
.odk__pill{padding:6px 14px;background:var(--k-yellow);border-radius:999px;font-weight:800}
.odk__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.odk__topic{display:grid;gap:4px;justify-items:center;text-align:center;padding:16px 10px;border:3px solid var(--k-ink);border-radius:18px;background:var(--k-card);box-shadow:0 5px 0 var(--k-ink)}
.odk__topic:hover{transform:translateY(-2px)}
.odk__topic .em{font-size:2.6rem}
.odk__topic small{font-weight:600;opacity:.8}
.odk__bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.odk__pip{display:flex;gap:10px;align-items:center;background:var(--k-blue);border-radius:16px;padding:8px 14px;margin-bottom:12px}
.odk__pip .em{font-size:2rem}
.odk__pip p{margin:0}
.odk__card{background:var(--k-card);border:3px solid var(--k-ink);border-radius:18px;padding:16px;margin-bottom:12px}
.odk__rule{background:var(--k-green)}
.odk__games{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.odk__game{display:grid;gap:2px;justify-items:center;text-align:center;padding:14px 10px;border:3px solid var(--k-ink);border-radius:18px;background:var(--k-pink);box-shadow:0 5px 0 var(--k-ink)}
.odk__game .em{font-size:2.2rem}
.odk__big{font-size:3.4rem;text-align:center;line-height:1.1}
.odk__sent{font-size:1.6rem;text-align:center;margin:6px 0 14px}
.odk__blank{display:inline-block;min-width:3.5em;border-bottom:4px dashed var(--k-main);color:var(--k-main)}
.odk__filled{color:var(--k-ok);border-bottom:4px solid var(--k-ok)}
.odk__opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.odk__opt{min-width:110px;padding:12px 20px;border:3px solid var(--k-ink);border-radius:16px;background:var(--k-yellow);font-size:1.3rem;font-weight:800;box-shadow:0 4px 0 var(--k-ink)}
.odk__opt.is-ok{background:var(--k-green);border-color:var(--k-ok)}
.odk__opt.is-bad{background:#f7d6d2;border-color:var(--k-bad)}
.odk__sky{min-height:230px;align-items:center;padding:20px;border-radius:20px;background:linear-gradient(#bde6ff,#e8f7ff)}
.odk__bubble{width:128px;height:128px;border-radius:50%;padding:0;background:rgba(255,255,255,.9);border-color:#1b7fb5;box-shadow:inset -8px -8px 0 rgba(27,127,181,.15)}
.odk__tiles,.odk__ans{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:64px;padding:10px;border-radius:14px}
.odk__ans{background:var(--k-blue);border:3px dashed var(--k-main);margin-bottom:12px}
.odk__tile{padding:8px 16px;border:3px solid var(--k-ink);border-radius:12px;background:var(--k-yellow);font-size:1.25rem;font-weight:800;box-shadow:0 4px 0 var(--k-ink)}
.odk__memory{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.odk__mc{min-height:84px;border:3px solid var(--k-ink);border-radius:14px;background:var(--k-main);color:#fff;font-size:1.2rem;font-weight:800;padding:4px}
.odk__mc.is-up{background:var(--k-card);color:var(--k-ink)}
.odk__mc.is-done{background:var(--k-green);color:var(--k-ink);border-color:var(--k-ok)}
.odk__stars{font-size:2.4rem;text-align:center;letter-spacing:.2em}
.odk__res{text-align:center}
.odk__field{display:grid;gap:4px;margin:8px 0;font-size:.95rem}
.odk__field input,.odk__field select,.odk__field textarea{font:inherit;padding:10px 12px;border:3px solid var(--k-line);border-radius:12px;background:#fff;color:var(--k-ink)}
.odk__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.odk__err{color:var(--k-bad);font-weight:800}
.odk__priv{font-size:.8rem;font-weight:500;opacity:.75;margin-top:12px}
.odk__confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.odk__confetti span{position:absolute;top:-30px;font-size:1.8rem;animation:odk-fall 2.4s linear forwards}
@keyframes odk-fall{to{transform:translateY(700px) rotate(360deg);opacity:.2}}
@keyframes odk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes odk-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes odk-pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){.odk__bubble{animation:odk-bob 3s ease-in-out infinite;animation-delay:var(--d,0s)}.odk__opt.is-bad,.odk__tile.is-bad{animation:odk-shake .3s}.odk__opt.is-ok{animation:odk-pop .4s}}
@media (max-width:560px){.odk{font-size:16px;padding:12px}.odk__memory{grid-template-columns:repeat(3,1fr)}.odk__sent{font-size:1.3rem}}