*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f7f5ff;color:#272331;font:16px/1.5 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;border:1px solid #d9d0ee;background:white;color:#5835d8;border-radius:12px;min-height:44px;padding:9px 15px}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #b8a6ff;outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right));font-size:13px}header a{color:#5835d8;text-decoration:none}main{max-width:880px;margin:auto;padding:12px 22px max(24px,env(safe-area-inset-bottom))}.heading{display:flex;justify-content:space-between;gap:16px;align-items:center}h1{font-size:clamp(21px,3vw,28px);margin:3px 0 12px}small,#progress{font-size:12px;color:#766886}.nova{display:flex;gap:14px;align-items:center;margin:10px 0 18px}.nova img{width:65px;height:80px;object-fit:contain}.nova>div{flex:1;border:2px solid #7047ff;border-radius:18px;background:white;padding:10px 15px}.nova strong{font-size:11px;color:#7047ff}.nova p{margin:3px 0 0;font-size:14px}article{background:white;border:1px solid #e5dff0;border-radius:20px;padding:22px}h2{font-size:21px;margin:0 0 10px}.context{color:#706579;font-size:14px;margin:0 0 18px}.turn{max-width:90%;margin:14px 0}.turn.you{margin-left:auto}.speaker{font-size:12px;color:#786a88;margin:0 8px 4px}.you .speaker{text-align:right}.bubble{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:17px 17px 17px 4px;background:#f7f5ff}.you .bubble{background:#f7f5ff;border:1px solid #ded5ff;border-radius:17px 17px 4px 17px}.korean{font-size:25px;line-height:1.7;word-break:keep-all}.word{font:inherit;color:inherit;background:none;border:0;border-radius:6px;padding:2px 1px;min-height:44px}.word[aria-expanded=true]{color:#7047ff;background:#f7f5ff}.listen{flex:none;padding:8px 11px;min-width:44px}.listen svg{width:20px;height:20px;vertical-align:middle}footer{display:flex;gap:10px;justify-content:space-between;margin-top:16px}.primary{background:#7047ff;color:white;border-color:#7047ff;margin-left:auto}#gloss{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(590px,calc(100% - 24px));z-index:5;max-height:45dvh;overflow:auto;background:white;box-shadow:0 6px 40px #35235c30;border:2px solid #b8a6ff;border-radius:18px;padding:16px}#gloss>div{display:flex;justify-content:space-between;align-items:center}#gloss-word{font-size:23px}#meaning{font-weight:650;margin:4px 0}#explanation{font-size:14px;color:#6c6077;margin:8px 0}.choices{display:grid;gap:10px;margin-top:20px}.choices button{text-align:left;color:#30263e}.choices button.selected{background:#f7f5ff;border-color:#7047ff}.choices button.correct{background:#eaf8ef;border-color:#319361}.choices button.wrong{background:#fff0f0;border-color:#d66666}.summary{padding-left:20px} [hidden]{display:none!important}@media(max-width:600px){header span{display:none}main{padding:8px 12px 28px}article{padding:16px}.nova img{width:48px;height:64px}.turn{max-width:100%}.korean{font-size:23px}.bubble{padding:10px 12px}}
@media(min-width:700px) and (max-height:850px){header{padding-top:7px;padding-bottom:7px}main{padding-top:4px}.nova{margin:6px 0 12px}.nova img{height:64px;width:52px}article{padding:18px}.turn{margin:10px 0}.context{margin-bottom:12px}footer{margin-top:12px}}
/* Paint the glyphs themselves; word buttons retain their translation action. */
.karaoke-word .word-ink{background:linear-gradient(to right,#7047ff 0%,#7047ff var(--word-fill,0%),#91869e var(--word-fill,0%),#91869e 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.karaoke-word.speaking .word-ink{filter:drop-shadow(0 0 5px #7047ff20)}