:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#29233b;background:#f7f5ff;--purple:#7047ff;--line:#e5dff3}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:12px;background:white;color:inherit;padding:10px 16px}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #a88aff;outline-offset:3px}button:hover:not(:disabled){background:#f2edff}header{display:flex;gap:18px;align-items:center;padding:18px 4vw;font-size:13px}header a{color:#594775;text-decoration:none}header span{color:#80738f}header button{margin-left:auto}main{max-width:780px;margin:10px auto;padding:0 24px 28px}.title>p:first-child{font-size:11px;letter-spacing:.09em;color:#796792;font-weight:700}h1{font-size:clamp(26px,4vw,36px);margin:8px 0}#progress{font-size:13px;color:#766c83;margin:10px 0}progress{display:block;width:100%;height:5px;border:0;border-radius:10px;overflow:hidden;accent-color:var(--purple)}progress::-webkit-progress-bar{background:#e8e0fa}progress::-webkit-progress-value{background:var(--purple)}.nova{display:flex;align-items:center;gap:14px;margin:22px 0}.nova img{width:75px;height:100px;object-fit:contain}.nova>div{position:relative;flex:1;border:2px solid #9776ff;border-radius:19px;background:#fff;padding:14px 20px}.nova span{font-size:10px;letter-spacing:.08em;font-weight:800;color:var(--purple)}#feedback{font-size:15px;line-height:1.5;margin:5px 0 0}.nova>div:before{content:'';position:absolute;left:-8px;top:30px;width:12px;height:12px;background:#fff;border-left:2px solid #9776ff;border-bottom:2px solid #9776ff;transform:rotate(45deg)}article{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 10px 36px #35205706}h2{font-size:22px;line-height:1.35;margin:0 0 16px}p{line-height:1.6}.setting{font-size:14px;color:#72657d;margin:0 0 22px}.speaker{font-size:11px;font-weight:700;color:#7f718e;margin:16px 0 6px}.bubble{background:#f3efff;border:1px solid #e4d9fc;border-radius:17px 17px 17px 4px;padding:16px 20px}.bubble.you{background:#faf9fc;border-color:#ece8f1;margin-left:36px;border-radius:17px 17px 4px 17px}.korean{font-size:clamp(22px,3.5vw,29px);line-height:1.7;margin:0}.word{font-size:inherit;padding:0 2px;border:0;border-radius:4px;background:none;min-height:44px;text-decoration:underline;text-decoration-color:#d6c7ee;text-underline-offset:6px}.word:hover:not(:disabled){background:#e9defd}.choices{display:grid;gap:10px;margin-top:18px}.choice{text-align:left;padding:15px 18px;line-height:1.4}.choice.selected{border-color:var(--purple);background:#f4efff}.choice.correct,.choice.correct:hover{background:#edf9f1;border:2px solid #269b59;opacity:1}.choice.incorrect,.choice.incorrect:hover{background:#fff1f1;border:2px solid #db5151;opacity:1}.prompt{font-size:17px;font-weight:650;margin:24px 0 0}footer{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}.primary{background:var(--purple);color:white;border-color:var(--purple);font-weight:650;min-width:140px}.primary:hover:not(:disabled){background:#5d35dc}#help{margin-right:auto;border:0;background:transparent;color:#79678f}.prototype-note{font-size:11px;text-align:center;color:#94899e;margin-top:20px}.vocab{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}.vocab span{background:#f5f1ff;border-radius:12px;padding:12px 18px}.vocab strong{font-size:22px;margin-right:12px}.quiet{color:#7b6d87;font-size:13px}details{margin-top:20px;color:#72647e;font-size:13px}summary{cursor:pointer;min-height:35px}.summary-row{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}.summary-row span{font-size:13px;color:#766585}dialog{width:min(440px,90vw);border:1px solid var(--line);border-radius:22px;padding:24px;color:inherit}dialog::backdrop{background:#20103255}dialog form{text-align:right}dialog h2{margin-top:15px}#gloss-detail{color:#746780;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){header{padding:12px;gap:8px}header span{display:none}main{padding:0 14px 24px}article{padding:20px}.nova{gap:8px;margin:14px 0}.nova img{width:55px;height:85px}.nova>div{padding:12px 15px}.bubble{padding:12px}.bubble.you{margin-left:18px}}@media(max-height:800px) and (min-width:700px){main{max-width:850px}.nova{margin:12px 0}.nova img{height:76px}article{padding:22px}.speaker{margin-top:8px}.bubble{padding:10px 18px}}
:root .bubble{display:flex;align-items:center;gap:12px}.bubble .korean{flex:1;min-width:0}.listen{flex:0 0 auto;font-size:12px;padding:8px 12px;min-height:44px;background:#fff9}.listen[aria-pressed=true]{color:#7047ff;border-color:#a28ae4}.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)}
:root .chat-thread{display:flex;flex-direction:column;gap:12px;padding:4px 0 8px}:root .message{width:fit-content;max-width:85%;min-width:145px;align-self:flex-start}:root .message.you{align-self:flex-end}:root .message .speaker{margin:0 8px 5px}:root .message.you .speaker{text-align:right}:root .message .bubble{position:relative;background:#f5f3f8;border-color:#e5dfea;border-radius:16px 16px 16px 3px;padding:10px 14px;gap:12px}:root .message.you .bubble{background:#ede5ff;border-color:#dacbf8;border-radius:16px 16px 3px 16px}:root .message .bubble:after{content:'';position:absolute;bottom:-1px;left:-7px;width:9px;height:12px;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}:root .message.you .bubble:after{left:auto;right:-7px;transform:scaleX(-1)}:root .listen{border:0;background:transparent;width:44px;height:44px;padding:11px;display:grid;place-items:center;color:#8066a7}:root .listen svg{width:22px;height:22px}:root .listen:hover{background:#ded3f5}:root .message .korean{font-size:clamp(21px,3vw,27px)}:root .message .word{text-decoration:none}:root .message .word:hover{text-decoration:underline}:root .message .word:focus-visible{outline-offset:1px}@media(max-width:500px){:root .message{max-width:95%}:root .message .bubble{padding:8px 10px;gap:4px}}