:root{color:#ececee;background:#15161a;font-family:Noto Sans,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}.shell{max-width:850px;margin:auto;min-height:100vh;padding:24px}h1{margin:8px 0}.library{display:grid;gap:12px;margin-top:24px}.lesson,.line{border:0;text-align:left;border-radius:12px;background:#23252b;color:#ececee;padding:16px}.lesson{display:grid;gap:4px}.lesson span,.pinyin{color:#a7a9b3}.controls,.views{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}.controls button,select{border:0;border-radius:8px;padding:9px 12px;background:#35373f;color:inherit}.controls button:nth-of-type(2){background:#f2b155;color:#2a1800}.transcript{display:grid;gap:8px;padding:0;list-style:none}.line{width:100%}.line.active{background:#4a350f;color:#ffe2b0}.hanzi,.pinyin,.meaning{display:block}.hanzi{font-size:22px;line-height:1.55}.pinyin{font-size:13px;line-height:1.4}.meaning{color:#9fb4d6;font-size:14px;margin-top:4px}.placeholder{color:#a7a9b3}.character{cursor:pointer}.character:hover,.character:focus{color:#f2b155;outline:none}.character-card{position:fixed;z-index:3;right:18px;bottom:18px;width:min(300px,calc(100vw - 36px));background:#23252b;border:1px solid #535661;border-radius:12px;padding:14px;box-shadow:0 8px 24px #0008}.character-card h2{margin:0;font-size:28px}.character-card p{margin:6px 0}.components{display:flex;gap:6px;flex-wrap:wrap}.pip-shell{padding:12px;min-height:100vh}.pip-shell .controls{margin:8px 0}.pip-shell .transcript{gap:5px}.pip-shell .line{padding:8px}.pip-shell .hanzi{font-size:17px}.pip-shell .line.active .hanzi{font-size:25px}.pip-shell .meaning{display:none}