:root{font-family:system-ui,-apple-system,sans-serif;color:#282234;background:#f7f5ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh}header{display:flex;justify-content:space-between;align-items:center;padding:20px max(20px,env(safe-area-inset-left));font-size:13px;color:#79669c}a{color:#7047ff;text-decoration:none}main{max-width:900px;margin:24px auto;padding:0 24px max(28px,env(safe-area-inset-bottom))}h1{font-size:clamp(24px,4vw,34px);margin:0 0 20px}.nova{display:flex;align-items:center;gap:16px;margin-bottom:24px}.nova img{width:76px;height:96px;object-fit:contain}.nova p{padding:16px 20px;border:2px solid #7047ff;border-radius:20px;background:white;font-size:16px;line-height:1.5;max-width:650px}article{background:white;border:1px solid #ded5ff;border-radius:24px;padding:clamp(20px,4vw,36px);box-shadow:0 12px 40px #34226a08}.caption{display:flex;justify-content:space-between;color:#806c9b;font-size:12px;letter-spacing:.04em}#sentence{display:flex;flex-wrap:wrap;align-content:center;gap:8px 4px;margin:28px 0;min-height:140px}button,select{font:inherit;min-height:44px;border:1px solid #ded5ff;border-radius:10px;background:white;color:#7047ff;padding:8px 12px;cursor:pointer}#sentence button{font-size:clamp(25px,4vw,38px);line-height:1.55;color:#392e4c;border:2px solid transparent;padding:4px 8px;background:transparent;transition:background-color 70ms,color 70ms}#sentence button.active{background:#7047ff;color:white;border-color:#7047ff;box-shadow:0 4px 12px #7047ff25}#sentence button:hover:not(.active){background:#f7f5ff}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #7047ff;outline-offset:3px}audio{width:100%;display:block;margin:8px 0 18px}.tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.tools label{display:flex;align-items:center;gap:10px;font-size:14px;color:#736580}#translation{color:#5d506e;line-height:1.7;margin:20px 0 0}#status{font-size:13px;color:#76658e;margin:14px 0 0;min-height:18px}.note{font-size:12px;line-height:1.5;color:#857493;margin-top:20px}[hidden]{display:none!important}@media(max-height:650px){main{margin-top:0}.nova{margin-bottom:12px}.nova img{width:48px;height:60px}.nova p{margin:0;padding:10px 14px}h1{margin-bottom:12px}#sentence{margin:16px 0;min-height:90px}}@media(max-width:480px){main{padding-left:16px;padding-right:16px}.nova{gap:8px}.nova p{font-size:14px}#sentence button{padding:4px;font-size:27px}article{padding:18px}}@media(prefers-reduced-motion:reduce){#sentence button{transition:none}}
:root{--karaoke-ink:#7047ff;--karaoke-unspoken:#91869e}
#sentence button{transition:none;color:var(--karaoke-unspoken)}
#sentence button.active{background:transparent;color:var(--karaoke-ink);border-color:transparent;box-shadow:none}
#sentence .word-ink{display:inline-block;color:var(--karaoke-unspoken);background:linear-gradient(to right,var(--karaoke-ink) 0%,var(--karaoke-ink) var(--word-fill,0%),var(--karaoke-unspoken) var(--word-fill,0%),var(--karaoke-unspoken) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#sentence button.active .word-ink{filter:drop-shadow(0 0 6px #7047ff20)}
@media(prefers-reduced-motion:reduce){#sentence .word-ink{background:none;color:inherit;-webkit-text-fill-color:currentColor}#sentence button.spoken{color:var(--karaoke-ink)}#sentence button.active .word-ink{filter:none}}
@media(forced-colors:active){#sentence .word-ink{background:none;-webkit-text-fill-color:currentColor}#sentence button.active{outline:2px solid Highlight}}