:root{color-scheme:dark;--bg:#101611;--panel:#1a241d;--stroke:#304136;--muted:#a8b9ad;--accent:#b0f764;--text:#f4fff3;font-family:'Malgun Gothic',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 22% 0%,#264b32 0%,var(--bg) 63%);color:var(--text);min-height:100vh}main{max-width:1120px;margin:auto;padding:22px}header,.brand,.sectionhead,.controls,.inputrow{display:flex;align-items:center;gap:12px}header,.sectionhead{justify-content:space-between}header{margin-bottom:20px}.brand{font-size:1.2rem;font-weight:800}.brand small{display:block;color:var(--muted);font-size:.7rem;font-weight:500}.mark{display:grid;place-items:center;background:var(--accent);color:#142015;width:42px;height:42px;border-radius:13px}.badge{padding:6px 10px;background:#27392b;border-radius:20px;font-size:.75rem;color:var(--accent)}.layout{display:grid;grid-template-columns:minmax(250px, .95fr) minmax(270px,1.2fr);gap:16px}.panel{border:1px solid var(--stroke);border-radius:20px;background:var(--panel);padding:19px;min-width:0}.cover{aspect-ratio:1.35;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:radial-gradient(circle at 28% 28%,#65964e,#273a2e 48%,#121d15);font-size:5rem;color:#cbffae}.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.eyebrow{color:var(--accent);font-size:.65rem;font-weight:800;letter-spacing:.13em}.player>.eyebrow{margin-top:18px}h1,h2,p{margin:6px 0}h1{font-size:clamp(1.2rem,3.7vw,1.8rem);overflow-wrap:anywhere}h2{font-size:1.15rem}.muted,.notice{color:var(--muted);font-size:.83rem}.controls{justify-content:center;margin:18px 0}button,input,select{font:inherit}button{padding:9px 12px;border:1px solid #496452;background:#2a3f30;color:var(--text);border-radius:10px;cursor:pointer}button:hover:not(:disabled){background:#385943}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.play{width:58px;height:58px;border-radius:100%;background:var(--accent);color:#10200e;font-weight:800;font-size:1.3rem}.play:hover:not(:disabled){background:#c9ff93}label{display:block;margin-bottom:6px;font-size:.8rem}input,select{min-width:0;color:var(--text);background:#111b14;border:1px solid var(--stroke);border-radius:9px;padding:10px}input{flex:1}select{width:100%;margin-top:10px}.side{display:grid;grid-template-rows:minmax(270px,1.5fr) minmax(150px,1fr);gap:16px}.words{white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere;line-height:1.7;max-height:270px;margin:10px 0;color:#d9e8da}ol{max-height:180px;overflow:auto;padding-left:26px;margin:8px 0}li{padding:6px 0;overflow-wrap:anywhere}li::marker{color:var(--accent)}.notice{min-height:1.2em}[hidden]{display:none!important}@media(max-width:630px){main{padding:12px}.layout{grid-template-columns:1fr}.side{grid-template-rows:auto}.cover{max-height:235px}.panel{padding:14px}}
