:root{--ink:#222641;--muted:#747a91;--line:#e5e8f2;--purple:#4757db;--bg:#f6f7fb;--soft:#edf0ff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.55}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:11px 16px;background:white;color:var(--ink);min-height:44px}button:hover{border-color:var(--purple);background:var(--soft)}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--purple);color:white;border-color:var(--purple)}.primary:hover{background:#3545c7;color:white}input,select,textarea{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fafbfe;color:var(--ink);width:100%}textarea{resize:vertical}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #bdc5ff;outline-offset:2px}label{display:block;font-size:13px;font-weight:600;margin:15px 0 7px}small,.muted{color:var(--muted);font-size:12px}small{display:block;margin-top:12px}a{color:var(--purple);text-decoration:none}h1{font-size:42px;letter-spacing:-1.4px;line-height:1.18;margin:14px 0 18px}h2{font-size:21px;line-height:1.4;margin:0 0 10px}h3{font-size:16px}em{font-style:normal;color:var(--purple)}header{height:84px;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 38px;gap:15px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:19px}.brand small{font-size:9px;letter-spacing:2px;margin-top:0}.logo{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--purple);color:white;font-weight:bold;font-size:28px}.header-actions{display:flex;align-items:center;gap:12px}.badge{display:inline-block;border-radius:20px;padding:5px 11px;background:var(--soft);color:var(--purple);font-size:11px;font-weight:600}.layout{display:grid;grid-template-columns:220px 1fr;max-width:1600px;margin:auto}nav{border-right:1px solid var(--line);padding:32px 20px;min-height:calc(100vh - 84px);background:white}nav a{display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;color:var(--muted);border-radius:10px;font-size:16px}nav a.active{background:var(--soft);color:var(--purple);font-weight:600}.nav-note{font-size:12px;color:var(--muted);margin:70px 15px}main{padding:40px 50px;max-width:1280px;width:100%;min-width:0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--purple)}.lead{color:var(--muted);margin-bottom:28px}.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:22px;box-shadow:0 4px 16px #23264c03}.panel-head,.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.page-head{margin-bottom:20px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:16px 0 22px;padding-bottom:12px;overflow:auto}.tabs button{white-space:nowrap;border:0;background:transparent;color:var(--muted)}.tabs button.active{color:var(--purple);background:var(--soft);font-weight:600}.input-row{display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}.input-row input{flex:1;min-width:160px}.input-row select{width:auto;max-width:200px}.input-row button{white-space:nowrap}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.demo{background:linear-gradient(120deg,#f0f1ff,#fff)}#notice{padding:14px 18px;border:1px solid #c6ccf6;background:var(--soft);border-radius:12px;margin-bottom:20px;overflow-wrap:anywhere}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.lesson-grid .panel{margin:0}.practice-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr);gap:22px}.practice-grid>div{min-width:0}#video-wrap{padding:0;overflow:hidden}#yt-player{aspect-ratio:16/9;width:100%}.practice-card h2{font-size:28px;line-height:1.5;overflow-wrap:anywhere}.card-meta{display:flex;justify-content:space-between;color:var(--muted);align-items:center;font-size:12px}.translation{padding:16px;border-radius:12px;background:var(--soft);margin:18px 0}.translation span{font-size:10px;letter-spacing:1px;color:var(--purple)}.translation p{margin:7px 0 0}.speech-box{padding:18px;background:#f7f8fc;border:1px solid var(--line);border-radius:14px;margin:20px 0}.mic{width:100%;background:var(--purple);color:white;padding:16px;font-weight:600}.mic.recording{background:#d24f60}.word{padding:2px 5px;display:inline-block;border-radius:5px;margin:2px}.word.ok{background:#e1f5e9;color:#257344}.word.miss{background:#ffe6e9;color:#a43c50}#card-list{max-height:320px;overflow:auto}#card-list button{width:100%;text-align:left;margin-bottom:6px;display:flex;gap:12px;border-color:transparent}#card-list button.active{background:var(--soft);color:var(--purple)}#card-list button span{font-size:11px;color:var(--muted)}#text-area p{padding:12px;border-bottom:1px solid var(--line)}#chat-log{min-height:180px;max-height:450px;overflow:auto;padding:18px 0}.message{max-width:85%;padding:14px 18px;border-radius:14px;margin:12px 0;white-space:pre-wrap}.message.user{margin-left:auto;background:var(--purple);color:white}.message.assistant{background:var(--soft)}.message button{padding:3px 9px;margin-left:8px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats .panel strong{display:block;font-size:32px;color:var(--purple)}.stats .panel span{font-size:12px;color:var(--muted)}progress{width:100%;height:10px;accent-color:var(--purple)}dialog{border:1px solid var(--line);border-radius:20px;padding:30px;max-width:430px;width:calc(100% - 30px)}dialog::backdrop{background:#171d4166}#auth-error{color:#b2344b}.check{display:flex;align-items:center;gap:10px}.check input{width:auto}#profile .panel{max-width:620px}#profile button{margin:18px 5px 0 0}#profile select,#profile input[type=number]{max-width:200px}audio{width:100%}[hidden]{display:none!important}#work-status{margin-top:20px}.empty{padding:40px;text-align:center;color:var(--muted)}
@media(max-width:1100px){main{padding:30px}.layout{grid-template-columns:180px 1fr}.practice-grid{grid-template-columns:1fr}.practice-grid>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:14px}#video-wrap{grid-column:1/-1}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:700px){header{height:70px;padding:0 16px}.brand{font-size:15px}.brand small{font-size:7px}.logo{width:36px;height:36px;font-size:24px}.header-actions{gap:5px}.header-actions .badge{display:none}.header-actions button{font-size:11px;padding:8px;min-height:38px}#install{display:none}.layout{display:block}nav{position:fixed;z-index:10;bottom:0;left:0;right:0;min-height:0;border-top:1px solid var(--line);border-right:0;display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}nav a{display:flex;flex-direction:column;gap:0;font-size:19px;padding:4px 8px;margin:0}nav a span{font-size:9px}.nav-note{display:none}main{padding:26px 16px 100px}h1{font-size:34px}.panel{padding:18px;border-radius:14px}.quick-grid{grid-template-columns:1fr;gap:0}.tabs{gap:0}.tabs button{padding:10px;font-size:12px}.source .input-row{display:grid;grid-template-columns:1fr auto}.source .input-row input{grid-column:1/-1}.source .input-row select{max-width:none;width:100%}.practice-grid>div:first-child{display:block}.practice-card h2{font-size:25px}.stats .panel{padding:16px}.stats .panel strong{font-size:26px}.page-head h1{font-size:30px}.panel-head .badge{display:none}.message{max-width:95%}}

/* Keep the source visible while practice content scrolls below. */
#source-link{display:block;margin:0 0 12px;overflow-wrap:anywhere}
#video-wrap{position:sticky;top:8px;z-index:20;width:min(100%,560px);margin:0 auto 22px;background:#111;box-shadow:0 8px 24px #0003}
#video-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media(max-width:700px){#video-wrap{top:0;border-radius:0;max-width:100%;max-height:32vh}#video-wrap iframe,#video-wrap #yt-player{max-height:32vh}}

#native-player{display:block;width:100%;aspect-ratio:16/9;background:#111;max-height:40vh}
@media(max-width:700px){#native-player{max-height:32vh}}