/* Slide Studio: the original lesson builder, restyled to the neumorphic surface.
   The slides themselves stay white with the pencil-box colours, matching the PowerPoint download. */
.sl,.spresent{
  --ink:#1B2440; --ink-soft:#4A5468; --ink-faint:#7A849A;
  --blue:#3E7CC7; --blue-d:#2C5E9E; --blue-t:#EAF1FA;
  --red:#E35D5B; --red-d:#B8403E; --red-t:#FCECEC;
  --green:#4FA36B; --green-d:#357A4D; --green-t:#EAF5EE;
  --teal:#2D9C9C; --teal-d:#1F7676; --teal-t:#E6F4F4;
  --violet:#8466C4; --violet-d:#6648A8; --violet-t:#F1EDFA;
  --orange:#F28C38; --orange-d:#B9621C; --orange-t:#FDF0E4;
  --pink:#D9628F; --pink-d:#A8436C; --pink-t:#FBEAF1;
  --indigo:#4C5FD5; --indigo-d:#3445A8; --indigo-t:#ECEFFC;
  --gold:#E0A526; --gold-d:#8F6A12; --gold-t:#FBF3DD; --yellow:#F2C14E;
  --sf-display:"Adventor","Century Gothic","Avenir Next",Futura,"Trebuchet MS",sans-serif;
}
.ss{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:30px;align-items:start;margin-top:32px}
.ss .rail{display:grid;gap:26px;min-width:0}
.ss .card-h{margin:0;font-size:max(9px,calc(19px * var(--m,1)));font-weight:800;display:flex;align-items:center;gap:10px}
.ss .card-h i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;box-shadow:var(--in-sm);color:var(--accent)}
.ss .card-h .i{width:19px;height:19px}
.ss .card-sub{margin:8px 0 18px;font-size:max(9px,calc(14.5px * var(--m,1)));color:var(--muted);line-height:1.5}
.ss form,.ss .form{display:grid;gap:16px}
.ss .unit-list,.ss .recent-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.ss .unit-list li{border-radius:18px;padding:14px 16px;display:grid;gap:8px;box-shadow:var(--in-sm)}
.ss .unit-list b{font-family:var(--f-display);font-size:max(9px,calc(14.5px * var(--m,1)))}
.ss .unit-list p{margin:0;font-size:max(9px,calc(13.5px * var(--m,1)));color:var(--muted)}
.ss .unit-list .btn{justify-self:start}
.ss .recent-list li{display:flex;align-items:center;gap:10px;min-width:0}
.ss .recent-open{flex:1;min-width:0;display:grid;gap:2px;text-align:left;border:0;background:var(--surface);border-radius:16px;padding:11px 14px;cursor:pointer;box-shadow:var(--ex-sm);transition:box-shadow .3s}
.ss .recent-open b{font-family:var(--f-display);font-size:max(9px,calc(14px * var(--m,1)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss .recent-open span{font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--muted)}
.ss .recent-open[aria-current="true"]{box-shadow:var(--in-sm)}
.ss .recent-open[aria-current="true"] b{color:var(--accent)}
.ss .icon-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface);color:var(--muted);cursor:pointer;box-shadow:var(--ex-sm)}
.ss .icon-btn .i{width:16px;height:16px}
.ss .icon-btn:active{box-shadow:var(--in-sm)}
.ss .empty{margin:12px 0 0;font-size:max(9px,calc(14px * var(--m,1)));color:var(--muted)}
.ss .lesson{min-width:0;display:grid;gap:20px}
.ss .busy{display:grid;gap:12px}
.ss .busy-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ss .busy-top b{font-family:var(--f-display);font-size:max(9px,calc(17px * var(--m,1)))}
.ss .busy p{margin:0;font-size:max(9px,calc(14.5px * var(--m,1)));color:var(--muted)}
.ss .lhead{display:grid;gap:10px}
.ss .ltitle{margin:0;font-size:max(9px,calc(clamp(1.7rem,3vw,2.3rem) * var(--m,1)));font-weight:800;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.ss .lobj{margin:0;font-size:max(9px,calc(15.5px * var(--m,1)));color:var(--muted);max-width:70ch}
.ss .chips{display:flex;flex-wrap:wrap;gap:8px}
.ss .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ss .menu{position:relative}
.ss .menu > summary{list-style:none}
.ss .menu > summary::-webkit-details-marker{display:none}
.ss .menu-pop{position:absolute;z-index:25;top:calc(100% + 10px);left:0;width:min(300px,calc(100vw - 32px));border-radius:22px;padding:8px;display:grid;background:var(--surface);box-shadow:var(--ex)}
.ss .menu-pop button{text-align:left;background:transparent;border:0;border-radius:14px;padding:11px 13px;cursor:pointer;display:grid;gap:3px}
.ss .menu-pop button:hover{box-shadow:var(--in-sm)}
.ss .menu-pop b{font-family:var(--f-display);font-size:max(9px,calc(14px * var(--m,1)))}
.ss .menu-pop span{font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--muted);line-height:1.35}
.ss .menu-pop button[disabled]{opacity:.45;cursor:default;box-shadow:none}
.ss .menu-note{margin:4px 6px 6px;padding:9px 12px;border-radius:13px;box-shadow:var(--in-sm);font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--accent);font-weight:600;line-height:1.4}
.ss .unit-list .btn[disabled]{opacity:.45}
.ss .sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
.ss .scard{display:grid;gap:10px;min-width:0;align-content:start}
.ss .sthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:transparent;cursor:pointer;border-radius:14px;text-align:left;line-height:normal}
.ss .sthumb .sl{position:absolute;inset:0;height:100%;box-shadow:var(--ex-sm);transition:box-shadow .3s,transform .3s var(--ease)}
.ss .sthumb:hover .sl{box-shadow:var(--ex-hover);transform:translateY(-2px)}
.ss .smeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ss .sno{font-family:var(--f-display);font-size:max(9px,calc(12.5px * var(--m,1)));font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.ss .skind{font-family:var(--f-display);font-size:max(9px,calc(10.5px * var(--m,1)));font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--kd);padding:5px 9px;border-radius:999px;box-shadow:var(--in-sm)}
.ss .smin{font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--muted);margin-left:auto}
.ss .ssay,.ss .sans{margin:0;font-size:max(9px,calc(14px * var(--m,1)));line-height:1.5;color:var(--muted)}
.ss .ssay b,.ss .sans b{font-family:var(--f-display);color:var(--fg)}
.ss .sans,.ss .sans b{color:#2E8B57}
.ss .plan{display:grid;gap:22px}
.ss .psec{border-radius:24px;padding:22px 24px;box-shadow:var(--ex-sm);min-width:0}
.ss .psec h3{margin:0 0 8px;font-size:max(9px,calc(16.5px * var(--m,1)));font-weight:800}
.ss .psec h4{margin:14px 0 6px;font-family:var(--f-display);font-size:max(9px,calc(12px * var(--m,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ss .psec p,.ss .psec li,.ss .psec dd{font-size:max(9px,calc(15px * var(--m,1)));line-height:1.55}
.ss .psec p{margin:0}
.ss .psec ul{margin:0;padding-left:20px;display:grid;gap:4px}
.ss .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.ss .tbl-wrap{overflow-x:auto}
.ss table{border-collapse:collapse;width:100%;font-size:max(9px,calc(14px * var(--m,1)))}
.ss th,.ss td{text-align:left;padding:10px;vertical-align:top}
.ss tr+tr td,.ss tbody tr:first-child td{box-shadow:inset 0 1px 0 rgb(163 177 198 / .35)}
.ss th{font-family:var(--f-display);font-size:max(9px,calc(11px * var(--m,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ss td.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.ss tfoot td{font-family:var(--f-display);font-weight:800}
.ss dl.kw{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0}
.ss dl.kw dt{font-family:var(--f-display);font-weight:800}
.ss dl.kw dd{margin:0;color:var(--muted)}

/* ---------- slides (16:9, container query units) ---------- */
.sl{--fs:1;position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;background:#FFFFFF;color:var(--ink);font-family:var(--sf-display);
  display:flex;flex-direction:column;overflow:hidden;border-radius:1.1cqw;line-height:normal}
.sl .i{width:1em;height:1em}
.sl-edge{display:flex;gap:.35cqw;height:.85cqw;flex:none}
.sl-edge i{flex:var(--w) 1 0;background:var(--c)}
.sl-head{display:flex;align-items:center;justify-content:space-between;gap:1.6cqw;padding:2.1cqw 4cqw 0;flex:none}
.sl-kind{display:inline-flex;align-items:center;gap:.8cqw;font-weight:700;font-size:1.4cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--kd);background:var(--kt);padding:.75cqw 1.5cqw;border-radius:99cqw;white-space:nowrap}
.sl-kind .i{width:1.9cqw;height:1.9cqw}
.sl-respond{display:inline-flex;align-items:center;gap:.8cqw;font-weight:700;font-size:1.4cqw;line-height:1.25;color:#FFFFFF;background:var(--kd);padding:.75cqw 1.5cqw;border-radius:99cqw;max-width:58%}
.sl-respond .i{width:2cqw;height:2cqw}
.sl-title{margin:1.7cqw 4cqw 0;font-family:var(--sf-display);font-size:3.8cqw;line-height:1.1;font-weight:700;letter-spacing:-.01em;text-wrap:balance;flex:none;color:var(--ink)}
.sl-body{flex:1;min-height:0;padding:2cqw 4cqw 1cqw;font-size:calc(2.3cqw * var(--fs));line-height:1.35;overflow:hidden}
.sl-foot{display:flex;justify-content:space-between;gap:2cqw;padding:0 4cqw 1.5cqw;font-size:1.2cqw;color:var(--ink-faint);flex:none}
.sl-foot span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl .t-wrap{display:flex;flex-direction:column;justify-content:center;gap:1.3cqw;height:100%}
.sl .t-eyebrow{margin:0;font-weight:700;font-size:1.6cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d)}
.sl .t-title{margin:0;font-family:var(--sf-display);font-size:calc(6cqw * var(--fs));line-height:1.02;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.sl .t-obj{margin:0;font-size:calc(2.4cqw * var(--fs));color:var(--ink-soft)}
.sl .t-obj b{color:var(--ink)}
.sl .t-sc{background:var(--blue-t);border-radius:1.4cqw;padding:1.6cqw 2.2cqw;margin-top:.5cqw}
.sl .t-sc > span{display:block;font-weight:700;font-size:1.35cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d);margin-bottom:.9cqw}
.sl .t-sc ul{list-style:none;margin:0;padding:0;display:grid;gap:.8cqw}
.sl .t-sc li{display:flex;gap:1.2cqw;align-items:flex-start;font-size:calc(2.15cqw * var(--fs))}
.sl .box{flex:none;width:2.1cqw;height:2.1cqw;border:.28cqw solid var(--blue-d);border-radius:.45cqw;margin-top:.15cqw}
.sl .qs{list-style:none;margin:0;padding:0;display:grid;gap:1.7cqw 3.2cqw}
.sl .qs.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sl .qs li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5cqw 1.4cqw;align-items:start}
.sl .qn{grid-row:span 2;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--k);color:#FFFFFF;display:grid;place-items:center;font-weight:700;font-size:1.8cqw}
.sl .qt{font-weight:700;padding-top:.45cqw}
.sl .qa{color:var(--green-d);font-weight:700;visibility:hidden}
.sl .qa::before{content:"Answer: ";font-weight:400;color:var(--ink-soft)}
.sl .qa.on{visibility:visible}
.sl .hook-p{margin:0;font-size:calc(3.4cqw * var(--fs));font-weight:700;line-height:1.22;padding:2.6cqw 3cqw;background:var(--kt);border-radius:1.6cqw;text-wrap:balance}
.sl .hook-d{margin:1.6cqw 0 0;color:var(--ink-soft)}
.sl .vocab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4cqw}
.sl .vw{background:var(--kt);border-radius:1.2cqw;padding:1.3cqw 1.7cqw;display:grid;gap:.45cqw;align-content:start}
.sl .vw b{color:var(--kd);font-size:calc(2.6cqw * var(--fs))}
.sl .vw span{font-size:calc(1.95cqw * var(--fs));color:var(--ink-soft)}
.sl .teach{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.6cqw;align-items:start}
.sl .teach.solo{grid-template-columns:minmax(0,1fr)}
.sl .pts{margin:0;padding:0;list-style:none;display:grid;gap:1.3cqw}
.sl .pts li{position:relative;padding-left:2.8cqw}
.sl .pts li::before{content:"";position:absolute;left:0;top:.7cqw;width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--k)}
.sl .ex-box{background:var(--kt);border-radius:1.4cqw;padding:1.6cqw 2cqw}
.sl .ex-box span{display:block;font-weight:700;font-size:1.35cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--kd);margin-bottom:.6cqw}
.sl .ex-box p{margin:0;font-weight:700}
.sl .prob{background:var(--kt);border-radius:1.4cqw;padding:1.4cqw 2cqw;font-weight:700;font-size:calc(2.5cqw * var(--fs))}
.sl .steps{margin:1.6cqw 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:1cqw}
.sl .steps li{counter-increment:st;display:flex;gap:1.4cqw;align-items:flex-start;visibility:hidden}
.sl .steps li.on{visibility:visible}
.sl .steps li::before{content:counter(st);flex:none;width:3cqw;height:3cqw;border-radius:50%;border:.3cqw solid var(--k);color:var(--kd);display:grid;place-items:center;font-weight:700;font-size:1.6cqw}
.sl .wans{margin-top:1.6cqw;font-weight:700;color:var(--green-d);visibility:hidden}
.sl .wans.on{visibility:visible}
.sl .hq{margin:0 0 1.8cqw;font-size:calc(3cqw * var(--fs));font-weight:700;line-height:1.2;text-wrap:balance}
.sl .opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4cqw}
.sl .opt{display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 1.8cqw;border-radius:1.4cqw;background:var(--kt);border:.3cqw solid transparent;font-weight:700;min-width:0}
.sl .opt b{flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--k);color:#FFFFFF;display:grid;place-items:center;font-size:1.9cqw}
.sl .opt.right{background:var(--green-t);border-color:var(--green)}
.sl .opt.right b{background:var(--green-d)}
.sl .opt.dim{opacity:.38}
.sl .why{margin:1.6cqw 0 0;color:var(--ink-soft)}
.sl .why b{color:var(--green-d)}
.sl .talk-p{margin:0;font-size:calc(3.1cqw * var(--fs));font-weight:700;line-height:1.22;text-wrap:balance}
.sl .sbub{position:relative;display:inline-block;margin-top:2.4cqw;background:var(--kt);color:var(--kd);font-weight:700;padding:1.4cqw 2.2cqw;border-radius:2cqw;font-size:calc(2.5cqw * var(--fs))}
.sl .sbub::after{content:"";position:absolute;left:3cqw;bottom:-1.3cqw;border:1.4cqw solid transparent;border-top-color:var(--kt);border-bottom:0}
.sl .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw;height:100%}
.sl .tier{background:var(--kt);border-radius:1.4cqw;padding:1.4cqw 1.6cqw;min-width:0}
.sl .tier-h{display:flex;align-items:center;gap:.5cqw;font-weight:700;color:var(--kd);font-size:1.8cqw;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1cqw}
.sl .tier-h .i{width:1.9cqw;height:1.9cqw}
.sl .tier ul{margin:0;padding:0 0 0 2cqw;display:grid;gap:.9cqw;font-size:calc(1.9cqw * var(--fs))}
.sl .refl{list-style:none;margin:0;padding:0;display:grid;gap:2.3cqw}
.sl .refl li{display:flex;align-items:flex-end;gap:1.4cqw;font-size:calc(3cqw * var(--fs));font-weight:700}
.sl .refl li i{flex:1;border-bottom:.3cqw dashed var(--k);margin-bottom:.8cqw;min-width:8cqw}

/* ---------- slide presenter (light stage) ---------- */
.spresent{position:fixed;inset:0;z-index:70;background:var(--bg);display:grid;grid-template-rows:minmax(0,1fr) auto}
.spr-stage{position:relative;display:grid;place-items:center;padding:20px;min-height:0}
.spr-frame{width:min(calc(100vw - 40px),calc((100vh - 120px) * 1.7778));cursor:pointer}
.spr-frame .sl{border-radius:12px;box-shadow:var(--ex-hover)}
.spr-timer{position:absolute;top:24px;right:24px;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(28px * var(--m,1)));font-variant-numeric:tabular-nums;padding:8px 20px;border-radius:999px;background:var(--surface);box-shadow:var(--ex-sm)}
.spr-timer.done{background:#E2574C;color:#fff}
.spr-notes{position:absolute;left:16px;right:16px;bottom:16px;max-width:820px;margin:0 auto;border-radius:22px;padding:16px 20px;font-size:max(9px,calc(15.5px * var(--m,1)));line-height:1.55;background:var(--surface);box-shadow:var(--ex);max-height:40vh;overflow:auto}
.spr-notes b{font-family:var(--f-display)}
.spr-bar{position:relative;z-index:73;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.spr-count{font-family:var(--f-display);font-weight:800;min-width:74px;text-align:center;font-variant-numeric:tabular-nums}

@media (max-width:1060px){ .ss{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .ss .sgrid,.ss .two{grid-template-columns:minmax(0,1fr)} }