/* Learn: lesson player (stage, captions, progress) and lesson visuals. Tokens from coaching.css. */
.player{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.phead h2{margin:0;font:700 24px var(--display)}
.phead p{margin:2px 0 0;color:var(--muted)}
#voice[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.screen{position:relative}
.stage{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse at 50% 40%,#16342A 0%,#0B1512 75%);color:#EEF2EF;display:flex;align-items:center;justify-content:center}
.scene{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:4%;animation:sIn .5s ease both}
@keyframes sIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ended{position:absolute;inset:0;border-radius:16px;background:rgba(6,10,9,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff}
.ended b{font:700 24px var(--display)}
.cap{margin:0;font:600 clamp(17px,2.2vw,21px)/1.45 var(--body);min-height:3em;text-wrap:pretty}
.prog{display:flex;gap:4px}
.prog i{flex:1;height:5px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.prog i.done b,.prog i.cur b{display:block;height:100%;background:var(--accent)}
.prog i.cur b{width:0}
.prog.run i.cur b{animation:fill linear forwards}
.prog:not(.run) i.cur b{width:100%;opacity:.45}
@keyframes fill{to{width:100%}}
.pctl{display:flex;align-items:center;gap:10px;justify-content:center}
.pctl .count{font:600 13px var(--mono);color:var(--muted);min-width:44px;text-align:center}
.playb{all:unset;cursor:pointer;width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.playb svg{width:22px;height:22px}
.playb:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.lessons{display:flex;flex-direction:column;gap:6px}
.lgroup{margin:12px 0 4px;font:700 13px var(--body);letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:14px}
.lcard:hover{border-color:var(--accent)}
.lcard.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.lcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lcard .ln{flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font:700 15px var(--display);display:flex;align-items:center;justify-content:center}
.lcard b{display:block;font:700 16px var(--display)}
.lcard span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.lcard em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:6px;font-weight:600}
.cta2{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.cta2 b{display:block;font:700 18px var(--display)}
.cta2 span{color:var(--muted);font-size:14.5px}

/* visuals (always on the dark stage) */
.pc{flex:none;width:clamp(44px,7vw,74px);height:clamp(62px,9.8vw,104px);border-radius:8px;background:#FDFDFB;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:var(--display);box-shadow:0 6px 16px rgba(0,0,0,.45);color:#1B1B1B}
.pc .r{font-size:clamp(18px,3vw,32px);font-weight:700}.pc .su{font-size:clamp(14px,2.3vw,24px)}
.pc.h{color:#C62F2E}.pc.d{color:#2A68C6}.pc.c{color:#2C8A4C}
.pc.back{background:repeating-linear-gradient(45deg,#8C2A2A 0 6px,#A83A3A 6px 12px);border:3px solid #FDFDFB}
.hand{display:flex;gap:6px}
.hand.big .pc{width:clamp(70px,11vw,120px);height:clamp(98px,15.4vw,168px)}
.duo{display:flex;flex-direction:column;align-items:center;gap:14px}
.fan{display:flex;gap:clamp(8px,2vw,22px);flex-wrap:wrap;justify-content:center}
.fan .hand{animation:sIn .5s ease both}.fan .hand:nth-child(2){animation-delay:.12s}.fan .hand:nth-child(3){animation-delay:.24s}.fan .hand:nth-child(4){animation-delay:.36s}.fan .hand:nth-child(5){animation-delay:.48s}
.grid13{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;height:100%;aspect-ratio:1}
.grid13 i{font:600 clamp(6px,1.05vw,11px)/1 var(--mono);font-style:normal;display:flex;align-items:center;justify-content:center;border-radius:3px;background:#24302B;color:#B7C2BC;animation:sIn .4s ease both;animation-delay:var(--d)}
.grid13 i.dim{opacity:.35}
.grid13 i.on{background:#D9A445;color:#1A1408;opacity:1}
.grid13 i.pair.on{background:#E8701A;color:#fff}
.tbl{position:relative;width:min(100%,560px);aspect-ratio:2/1}
.tbl .felt{position:absolute;inset:14% 10%;border-radius:999px;background:radial-gradient(ellipse at 50% 40%,#24855A,#114A31);box-shadow:0 0 0 8px #15191B}
.tbl .seat{position:absolute;transform:translate(-50%,-50%);font:700 clamp(10px,1.5vw,14px) var(--mono);padding:5px 9px;border-radius:9px;background:#0E1311;border:1px solid #2A3330;color:#C9D2CD}
.tbl .seat.hl{background:#D9A445;color:#1A1408;border-color:#D9A445;box-shadow:0 0 0 4px rgba(217,164,69,.25)}
.tnote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(12px,1.8vw,17px) var(--display);color:#fff;text-align:center}
.bars{width:min(100%,680px);display:flex;flex-direction:column;gap:10px}
.brow{display:grid;grid-template-columns:minmax(64px,auto) 1fr 52px;gap:10px;align-items:center;font:700 clamp(12px,1.6vw,15px) var(--mono)}
.brow div{height:clamp(14px,2.4vw,24px);background:#1F2A26;border-radius:6px;overflow:hidden}
.brow i{display:block;height:100%;background:#D9A445;border-radius:6px;transform-origin:left;animation:grow .7s ease both;animation-delay:var(--d)}
@keyframes grow{from{transform:scaleX(0)}}
.bigt{text-align:center;display:flex;flex-direction:column;gap:8px}
.bigt b{font:800 clamp(28px,6vw,64px)/1.05 "Syne",var(--display);letter-spacing:-1px}
.bigt span{font:600 clamp(16px,2.6vw,26px) var(--display);color:#D9A445}
.rps{display:flex;gap:clamp(12px,4vw,40px)}
.rps div{display:flex;flex-direction:column;align-items:center;gap:6px;animation:sIn .5s ease both}
.rps div:nth-child(2){animation-delay:.15s}.rps div:nth-child(3){animation-delay:.3s}
.rps span{font-size:clamp(40px,8vw,84px)}
.rps b{font:700 clamp(13px,1.8vw,18px) var(--display)}
.rps em{font:700 clamp(16px,2.4vw,24px) var(--mono);color:#D9A445;font-style:normal}
.mix{width:min(100%,560px);display:flex;flex-direction:column;align-items:center;gap:18px}
.mixbar{display:flex;width:100%;height:clamp(40px,7vw,64px);border-radius:12px;overflow:hidden;font:700 clamp(13px,2vw,18px) var(--mono)}
.mixbar i{font-style:normal;display:flex;align-items:center;justify-content:center;animation:grow .8s ease both;transform-origin:left}
.mixbar .ra{background:#E8701A;color:#fff}.mixbar .rb{background:#2F9E6A;color:#fff;animation-delay:.4s}
.tl{display:flex;width:100%;align-items:flex-start;position:relative;padding-top:10px}
.tl::before{content:"";position:absolute;left:4%;right:4%;top:19px;height:3px;background:#2A3330}
.tl .ev{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative;opacity:.4}
.tl .ev i{width:20px;height:20px;border-radius:50%;background:#2A3330;border:3px solid #0B1512}
.tl .ev b{font:700 clamp(10px,1.6vw,16px) var(--mono)}
.tl .ev span{font:600 clamp(9px,1.3vw,13px) var(--body);color:#B7C2BC;max-width:90px}
.tl .ev.past{opacity:.75}.tl .ev.past i{background:#7A6A45}
.tl .ev.now{opacity:1;animation:sIn .5s ease both}.tl .ev.now i{background:#D9A445;box-shadow:0 0 0 6px rgba(217,164,69,.25);transform:scale(1.25)}
.tl .ev.now b{color:#D9A445;font-size:clamp(14px,2.4vw,24px)}
.tl .ev.now span{color:#fff}
@media (max-width:640px){.player{padding:12px}.phead h2{font-size:20px}#voice span{display:none}.tl .ev span{display:none}.tl .ev.now span{display:block;position:absolute;top:100%;margin-top:4px;white-space:nowrap}}
.tlwrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,5vw,48px)}
.tlbig{text-align:center;display:flex;flex-direction:column;gap:6px;animation:sIn .5s ease both}
.tlbig b{font:800 clamp(40px,9vw,96px)/1 "Syne",var(--display);color:#D9A445;letter-spacing:-2px}
.tlbig span{font:700 clamp(16px,2.8vw,28px) var(--display)}

.bd{display:flex;flex-direction:column;align-items:center;gap:18px}
.bdc{display:flex;gap:clamp(6px,1.2vw,12px)}
.bdc .pc{animation:sIn .45s ease both}.bdc .pc:nth-child(2){animation-delay:.12s}.bdc .pc:nth-child(3){animation-delay:.24s}.bdc .pc:nth-child(4){animation-delay:.4s}
.bd>span{font:700 clamp(13px,2vw,19px) var(--display);color:#D9A445}
.calc{width:min(100%,640px);display:flex;flex-direction:column;gap:8px}
.cr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(8px,1.4vw,14px) clamp(12px,2vw,20px);border-radius:12px;background:rgba(255,255,255,.06);font:600 clamp(13px,2vw,20px) var(--body);animation:sIn .45s ease both}
.cr:nth-child(2){animation-delay:.15s}.cr:nth-child(3){animation-delay:.3s}.cr:nth-child(4){animation-delay:.45s}
.cr b{font:700 clamp(15px,2.4vw,24px) var(--mono)}
.cr.pos b{color:#5BD394}.cr.neg b{color:#FF7D70}
.cr.tot{background:rgba(217,164,69,.16);border:1.5px solid #D9A445}.cr.tot b{color:#D9A445}
.vs{width:min(100%,780px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,2vw,16px)}
.vcol{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:clamp(10px,2vw,18px);animation:sIn .45s ease both}
.vcol:nth-child(2){animation-delay:.2s}
.vcol.win{border-color:#D9A445;background:rgba(217,164,69,.12)}
.vcol b{display:block;font:700 clamp(14px,2.4vw,24px) var(--display);margin-bottom:8px}
.vcol.win b{color:#D9A445}
.vcol ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font:500 clamp(12px,2vw,19px)/1.35 var(--body);color:#D6DDD9}
.bars2{width:min(100%,720px);display:flex;flex-direction:column;gap:12px}
.bars2 .leg{display:flex;gap:8px;align-items:center;font:600 clamp(11px,1.5vw,14px) var(--body);color:#B7C2BC;flex-wrap:wrap}
.bars2 .leg i{width:12px;height:12px;border-radius:3px;margin-left:8px}
.bars2 .leg i:first-child{margin-left:0}
.bars2 i.a{background:#2F9E6A}.bars2 i.b{background:#D9A445}
.b2row{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;font:700 clamp(11px,1.5vw,14px) var(--mono)}
.b2row>div{display:flex;flex-direction:column;gap:4px}
.b2row i{display:block;height:clamp(16px,2.6vw,24px);border-radius:5px;font-style:normal;font-size:clamp(10px,1.4vw,13px);color:#0B1512;padding-left:8px;display:flex;align-items:center;transform-origin:left;animation:grow .7s ease both;animation-delay:var(--d)}