.mml-learn{flex-direction:column;align-items:center;gap:.7rem;display:flex}.mml-learn-head{text-align:center}.mml-learn-title{color:var(--ff-anvil,#2d2d2d);margin:0 0 .25rem;font-size:1.85rem;font-weight:800}.mml-learn .ff-meta{max-width:42ch;font-size:1.05rem;line-height:1.55}.mml-mnem{text-align:center;color:var(--ff-anvil,#2d2d2d);opacity:.9;font-size:1.15rem;font-style:italic;font-weight:700}.mml-mnem:empty{display:none}.mml-track{flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem;display:flex}.mml-dot{background:var(--ff-warm,#f3ede3);border:2px solid var(--ff-outline,#2a1f1a);opacity:.5;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.2rem;display:inline-flex}.mml-dot.is-done{opacity:1;background:color-mix(in oklab, var(--pc-correct,#2e7d32) 22%, var(--ff-warm,#f3ede3))}.mml-dot.is-now{opacity:1;background:var(--pc-select,#2f7d78);color:#fff;box-shadow:0 0 0 3px color-mix(in oklab, var(--pc-select,#2f7d78) 35%, transparent)}.mml-prompt{text-align:center;max-width:36ch;font-size:1.3rem;font-weight:700;line-height:1.5}.mml-say{justify-content:center;display:flex}.mml-fb{font-size:1.15rem}.mml-fb:empty{display:none}.mml-fb.is-discover,.mml-fb.is-try{color:var(--ff-anvil,#2d2d2d)}.mml-fb.is-try{font-weight:600}.mml-fb-icon{margin-right:.35rem;font-weight:800}.mml-fb-word{font-weight:800}.mml-fb-why{font-weight:600}.mml-choices{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.mml-choices:empty{display:none}.mml-choice{cursor:pointer;background:var(--ff-warm,#f3ede3);min-width:120px;min-height:60px;color:var(--ff-anvil,#2d2d2d);border:2px solid var(--ff-outline,#2a1f1a);border-radius:1.1rem;justify-content:center;align-items:center;padding:.6rem 1.6rem;font-size:1.15rem;font-weight:700;display:inline-flex}.mml-choice:focus-visible{outline:3px solid var(--pc-select,#2f7d78);outline-offset:2px}.mml-continue{background:var(--pc-select,#2f7d78);color:#fff}.mml-say-btn{background:color-mix(in oklab, var(--pc-select,#2f7d78) 16%, var(--ff-warm,#f3ede3))}.mml-stage{justify-content:center;width:100%;padding:.6rem;display:flex}.mml-board{aspect-ratio:1;width:min(90vw,24rem);position:relative}.mml-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.mml-line{stroke:var(--ff-outline,#2a1f1a);stroke-width:1.4px;opacity:.5}.mml-line--mill{stroke:var(--pc-select,#2f7d78);stroke-width:3.4px;opacity:1}.mml-points{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}.mml-cell{justify-content:center;align-items:center;display:flex}.mml-spot{aspect-ratio:1;background:var(--ff-paper,#fbf7f0);border:3px solid var(--ff-outline,#2a1f1a);border-radius:50%;justify-content:center;align-items:center;width:clamp(48px,22%,78px);padding:0;display:flex}button.mml-spot{cursor:pointer}button.mml-spot:hover,button.mml-spot:focus-visible{outline:3px solid var(--pc-select,#2f7d78);outline-offset:2px}.mml-spot.is-hint{box-shadow:0 0 0 5px #f4d03f}.mml-piece{border:2px solid var(--ff-outline,#2a1f1a);border-radius:50%;width:74%;height:74%}.mml-piece--me{background:var(--pc-select,#2f7d78)}.mml-piece--you{background:#c0392b}.mml-story{text-align:center;padding:1rem}.mml-story-emoji{font-size:3.4rem;line-height:1}.mml-story-title{color:var(--ff-anvil,#2d2d2d);margin:.4rem 0 .5rem;font-size:1.5rem;font-weight:800}.mml-story-body{max-width:46ch;color:var(--ff-anvil,#2d2d2d);margin:0 auto;font-size:1.2rem;line-height:1.6}.mml-handoff{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin:.3rem 0 .2rem;display:grid}.mml-handoff-card{border:2px solid var(--ff-outline,#2a1f1a);background:var(--ff-warm,#f3ede3);min-height:68px;color:var(--ff-anvil,#2d2d2d);border-radius:.6rem;flex-direction:column;gap:.15rem;padding:.8rem 1rem;text-decoration:none;display:flex}.mml-handoff-card:hover,.mml-handoff-card:focus-visible{outline:3px solid var(--pc-select,#2f7d78);outline-offset:2px}.mml-handoff-label{font-size:1.05rem;font-weight:800}.mml-handoff-why{opacity:.8;font-size:.85rem}.mml-learn-foot{text-align:center}@media (prefers-reduced-motion:no-preference){.mml-spot,.mml-dot,.mml-line{transition:box-shadow .12s,stroke .12s}}
