:root{--bg:#f4f1ea;--paper:#fffdf8;--ink:#23211d;--muted:#8a857a;--accent:#2f6f5e;--accent2:#e0a43a;--line:#e3ded2;--danger:#b8483c}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hidden{display:none!important}.muted{color:var(--muted)}.err{color:var(--danger);min-height:1.4em;margin-top:8px}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:20;padding:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;max-width:460px;width:100%;box-shadow:0 8px 30px #0001}
.card h1{margin:0 0 8px;font-size:26px}.card input{width:100%;font-size:20px;padding:12px;border:1px solid var(--line);border-radius:12px;margin:12px 0;text-transform:uppercase;letter-spacing:2px;text-align:center}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 16px;color:var(--ink)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.big{width:100%;font-size:19px;padding:16px;margin-top:8px}
button.danger{color:var(--danger);border-color:#e6c4bf}button.mini{padding:5px 10px;font-size:14px}
#app{height:100%;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.brand{font-weight:650;flex:1}.status{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;background:#bbb}.dot.live{background:#3aa66b;box-shadow:0 0 0 4px #3aa66b33}.dot.bad{background:var(--danger)}
main{flex:1;min-height:0;display:grid;grid-template-columns:300px 1fr;gap:14px;padding:14px}
#tutor{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:auto}
#avatar{position:relative;width:120px;height:120px;margin-top:6px}
#avatar .face{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(135deg,#2f6f5e,#6fb39d);color:#fff;font-size:44px;display:flex;align-items:center;justify-content:center;font-weight:600}
#avatar .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent2);opacity:0;transform:scale(.9);transition:.2s}
#avatar.speaking .ring{opacity:1;animation:pulse 1.1s infinite}
@keyframes pulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.12);opacity:.15}100%{transform:scale(1.12);opacity:0}}
.who{text-align:center;font-weight:600}.cap{width:100%;font-size:15px;min-height:3.2em;max-height:9em;overflow:auto;background:#f7f4ec;border-radius:12px;padding:10px;color:#3a372f}
.cap.student{min-height:0;font-style:italic;color:var(--muted);background:none;padding:0 4px;font-size:14px}
.controls{display:flex;gap:10px;margin-top:4px}.round{width:52px;height:52px;border-radius:50%;font-size:22px;padding:0}.round.on{background:var(--accent);border-color:var(--accent)}.round.off{background:#f0d7d3}
#sayForm{display:flex;gap:6px;width:100%;margin-top:auto}#sayForm input{flex:1;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:12px;min-width:0}
#boardWrap{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:auto;padding:20px;background-image:linear-gradient(#0000000a 1px,transparent 1px),linear-gradient(90deg,#0000000a 1px,transparent 1px);background-size:28px 28px}
.empty{color:var(--muted);text-align:center;margin-top:18vh}
.blk{margin:0 0 18px;animation:rise .35s ease both;border-radius:12px;padding:4px 8px;transition:background .3s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.blk.hl-yellow{background:#fff1b8}.blk.hl-green{background:#d7f0d9}.blk.hl-red{background:#f9d6d1}
.blk.title{font-size:22px;font-weight:650}.blk.note{color:#4b473d}.blk.task{font-size:19px}.blk.result{font-weight:650;color:var(--accent);font-size:19px}
.blk .lbl{color:var(--muted);font-size:14px;margin-bottom:2px}
.problem{border:2px solid var(--accent2);border-radius:16px;padding:14px 16px;background:#fffaf0}.problem .badge{display:inline-block;background:var(--accent2);color:#fff;border-radius:99px;padding:1px 10px;font-size:13px;margin-bottom:6px}
.steps{counter-reset:s}.step{display:flex;gap:12px;align-items:flex-start;margin:12px 0;animation:rise .4s both}.step .n{color:#fff;background:var(--accent);border-radius:50%;width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px}
.step .sbody{flex:1;min-width:0}.step .sf{font-size:19px}.step .note{color:#4b473d;font-size:15.5px;line-height:1.45;margin-top:3px;padding-left:10px;border-left:3px solid var(--accent2)}.fig svg{max-width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:12px}.fig .cap2{color:var(--muted);font-size:14px;text-align:center}
.cue{background:#fff4d6;border:1px solid #f0d58a;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-weight:600}
.sheet{position:fixed;left:14px;right:14px;bottom:14px;height:46vh;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 -8px 30px #0002;display:flex;flex-direction:column;z-index:10}
.sheetBar{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}.sheetBar #pens{display:flex;gap:6px;flex:1}
.pen{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);padding:0}.pen.sel{box-shadow:0 0 0 2px var(--ink)}
#canvas{flex:1;width:100%;touch-action:none;background:#fff;border-radius:0 0 18px 18px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#23211d;color:#fff;padding:10px 18px;border-radius:99px;z-index:30;font-size:15px}
@media(max-width:820px){main{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:8px;gap:8px}#tutor{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px}
#avatar{width:64px;height:64px;margin:0}#avatar .face{inset:8px;font-size:26px}.who{text-align:left}.cap{order:5;min-height:2.4em;max-height:6em}#sayForm{order:6;margin-top:0}.sheet{height:52vh}}