/* Acads homepage kit: brand marks + the 17 animated feature scenes shared by the four variants.
   Every colour, font and radius comes from variables, so each variant themes the same scenes its own way.
   A variant sets these on :root (or any ancestor):
     --k-font, --k-num        body font, number font
     --k-ink, --k-text, --k-muted, --k-faint, --k-hair
     --k-bg                   scene background
     --k-card                 cards inside a scene
     --k-soft                 quiet grey fill
     --k-r                    corner radius of cards inside a scene
     --k-ring                 card outline (a box-shadow)
     --k-lift                 floating element shadow
   and per vertical (on .v-ias etc.): --c (colour), --s (tint), --t (text on the tint). */

.kw { position:absolute; inset:0; container-type:inline-size; }
.ks { position:relative; height:100%; min-height:300px; overflow:hidden; background:var(--k-bg); font-family:var(--k-font); color:var(--k-text); font-size:14px; line-height:20px; padding:20px; }
.ks * { box-sizing:border-box; }
.ks .cap { font-size:12px; font-weight:600; color:var(--k-muted); letter-spacing:.01em; display:flex; align-items:center; gap:6px; }
.ks .cap i { width:6px; height:6px; border-radius:50%; background:var(--c); }
.ks .ttl { margin-top:4px; font-size:19px; line-height:24px; font-weight:700; letter-spacing:-.02em; color:var(--k-ink); }
.ks .note { position:absolute; right:12px; top:10px; font-size:10.5px; color:var(--k-faint); }
.ks .num { font-family:var(--k-num); font-variant-numeric:tabular-nums; }
.ks .chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; line-height:20px; padding:0 8px; border-radius:6px; background:var(--k-soft); color:var(--k-text); white-space:nowrap; }
.ks .chip.c { background:var(--s); color:var(--t); }
.ks .card { background:var(--k-card); border-radius:var(--k-r); box-shadow:var(--k-ring); }
.ks .fade { opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease, cubic-bezier(.2,.8,.2,1)), transform .4s var(--ease, cubic-bezier(.2,.8,.2,1)); }
.ks .fade.on { opacity:1; transform:none; }
.ks .row { display:flex; align-items:center; gap:8px; }
.ks .grow { flex:1; min-width:0; }

/* ---------- brand marks ---------- */
.amk { display:inline-block; flex:none; color:var(--k-ink, #191918); }
.amk svg { width:100%; height:100%; display:block; overflow:visible; }
.amk.tile { border-radius:28%; background:var(--s); display:grid; place-items:center; }
.amk.tile svg { width:70%; height:70%; }
.amk.disc { border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 2px var(--k-ink, #191918); display:grid; place-items:center; }
.amk.disc svg { width:64%; height:64%; }

/* ---------- IAS · memory trick ---------- */
.s-mnemo .letters { display:flex; gap:10px; margin:14px 0 10px; }
.s-mnemo .letters b { width:44px; height:52px; border-radius:10px; display:grid; place-items:center; font:700 28px/1 var(--k-num); color:var(--k-ink); background:var(--k-card); box-shadow:var(--k-ring); transition:all .35s; }
.s-mnemo .letters b.on { background:var(--s); color:var(--t); box-shadow:inset 0 0 0 1.5px var(--c); transform:translateY(-3px); }
.s-mnemo .words { display:grid; gap:2px; }
.s-mnemo .w { display:flex; align-items:baseline; font-size:17px; font-weight:700; color:var(--k-ink); letter-spacing:-.01em; }
.s-mnemo .w b { width:22px; color:var(--c); font-family:var(--k-num); }
.s-mnemo .w span { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; transition:max-width .6s cubic-bezier(.2,.8,.2,1); }
.s-mnemo .w.on span { max-width:10em; }
.s-mnemo .tip { position:absolute; left:20px; right:20px; bottom:16px; }

/* ---------- IAS · high-yield table ---------- */
.s-hy .tbl { margin-top:12px; }
.s-hy .tr { display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--k-hair); transition:opacity .4s; }
.s-hy .tr .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-hy .tr.th { font-size:12px; color:var(--k-muted); padding-top:0; }
.s-hy .tr.low.on { opacity:.3; text-decoration:line-through; }
.s-hy .tr .chip.c { opacity:0; transform:scale(.8); transition:all .3s; }
.s-hy .tr.hy.on .chip.c { opacity:1; transform:none; }
.s-hy .bar { width:56px; height:6px; border-radius:3px; background:var(--k-soft); overflow:hidden; }
.s-hy .bar i { display:block; height:100%; width:0; background:var(--c); border-radius:3px; transition:width .6s; }
.s-hy .tr.on .bar i { width:var(--w); }

/* ---------- IAS · Mains template + AI evaluation ---------- */
.s-eval { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; }
.s-eval .sheet { position:relative; padding:14px; }
.s-eval .q { font-size:13px; line-height:18px; font-weight:600; color:var(--k-ink); padding-right:54px; }
.s-eval .q small { display:block; font-weight:500; color:var(--k-muted); font-size:11.5px; margin-top:2px; }
.s-eval .ln { height:7px; border-radius:4px; background:var(--k-soft); margin-top:9px; width:0; transition:width .5s, background .3s; position:relative; }
.s-eval .ln.on { width:var(--w); }
.s-eval .ln.hit { background:var(--s); }
.s-eval .ln .fb { position:absolute; left:calc(100% + 6px); top:-7px; font-size:10.5px; font-weight:700; color:#b8441c; white-space:nowrap; opacity:0; transition:opacity .3s; }
.s-eval.done .ln .fb { opacity:1; }
.s-eval .score { position:absolute; right:12px; top:12px; width:46px; height:46px; opacity:0; transform:scale(.6) rotate(-12deg); transition:all .45s cubic-bezier(.3,1.5,.5,1); }
.s-eval.done .score { opacity:1; transform:none; }
.s-eval .score circle { fill:var(--k-card); stroke:#d9731a; stroke-width:2.5; }
.s-eval .score text { font:700 15px var(--k-num); fill:#b8441c; text-anchor:middle; }
.s-eval .tpl { display:grid; gap:6px; align-content:start; }
.s-eval .tpl .k { font-size:11.5px; font-weight:700; color:var(--k-muted); }
.s-eval .blk { padding:7px 9px; border-radius:8px; background:var(--k-card); box-shadow:var(--k-ring); font-size:12px; font-weight:600; color:var(--k-ink); line-height:16px; transition:all .3s; }
.s-eval .blk small { display:block; font-weight:500; color:var(--k-muted); font-size:11px; }
.s-eval .blk.ind { margin-left:12px; }
.s-eval .blk.lit { background:var(--s); box-shadow:inset 0 0 0 1.5px var(--c); }
.s-eval .ai { display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }

/* ---------- MarksUp · finance chain ---------- */
.s-flow .chain { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:22px; position:relative; }
.s-flow .node { padding:10px; min-height:84px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; line-height:16px; font-weight:600; color:var(--k-ink); transition:all .35s; position:relative; }
.s-flow .node svg { width:22px; height:22px; stroke:var(--k-muted); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s; }
.s-flow .node.on { background:var(--s); box-shadow:inset 0 0 0 1.5px var(--c); }
.s-flow .node.on svg { stroke:var(--t); }
.s-flow .node::after { content:""; position:absolute; right:-17px; top:50%; width:14px; height:2px; background:var(--k-hair); }
.s-flow .node:last-child::after { display:none; }
.s-flow .node.on::after { background:var(--c); }
.s-flow .spark { position:absolute; left:20px; right:20px; bottom:16px; height:70px; }
.s-flow .spark .ln { fill:none; stroke:var(--c); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.s-flow .spark.on .ln { stroke-dashoffset:0; transition:stroke-dashoffset 1.6s ease; }
.s-flow .spark text { font:600 11px var(--k-font); fill:var(--k-muted); }
@container (max-width:540px) { .s-flow .chain { grid-template-columns:1fr 1fr; gap:10px 20px; } .s-flow .node:nth-child(2)::after { display:none; } .s-flow .spark { display:none; } }

/* ---------- MarksUp · where the marks are ---------- */
.s-ga .bars { position:absolute; left:24px; right:24px; bottom:60px; height:118px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:end; border-bottom:1px solid var(--k-hair); }
.s-ga .bar { position:relative; height:var(--h); transform-origin:50% 100%; transform:scaleY(0); background:var(--k-soft); border-radius:8px 8px 0 0; transition:transform .7s cubic-bezier(.2,.8,.2,1), background .4s; }
.s-ga.go .bar { transform:none; transition-delay:var(--d); }
.s-ga .bar.hot { background:var(--c); }
.s-ga .bar b { position:absolute; left:0; right:0; top:-22px; text-align:center; font:700 14px var(--k-num); color:var(--k-ink); }
.s-ga .bar small { position:absolute; left:-6px; right:-6px; top:calc(100% + 6px); text-align:center; font-size:11.5px; line-height:13px; color:var(--k-muted); }
.s-ga .call { position:absolute; right:20px; top:20px; max-width:46%; font-size:12.5px; line-height:17px; padding:8px 10px; }
.s-ga .call b { color:var(--t); }

/* ---------- MarksUp · compact study ---------- */
.s-compact { display:grid; grid-template-columns:1fr 1.1fr; gap:14px; }
.s-compact .stacks { display:flex; gap:18px; align-items:flex-end; height:104px; padding:0 6px; margin-top:12px; }
.s-compact .stack { position:relative; width:64px; display:flex; flex-direction:column-reverse; gap:3px; }
.s-compact .stack i { height:7px; border-radius:2px; background:var(--k-card); box-shadow:var(--k-ring); transition:all .45s; }
.s-compact .stack.cmp i { background:var(--s); box-shadow:inset 0 0 0 1px var(--c); }
.s-compact.go .stack.cmp i:nth-child(n+4) { opacity:0; transform:translateY(-12px); }
.s-compact .stack span { position:absolute; left:-10px; right:-10px; top:calc(100% + 6px); text-align:center; font-size:11.5px; color:var(--k-muted); }
.s-compact .flip { position:relative; height:116px; perspective:800px; margin-top:12px; }
.s-compact .fc { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,.9,.3,1); }
.s-compact .fc.on { transform:rotateY(180deg); }
.s-compact .face { position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--k-r); display:grid; place-content:center; text-align:center; padding:12px; }
.s-compact .front { background:var(--k-card); box-shadow:var(--k-ring); font:700 26px/1 var(--k-num); color:var(--k-ink); }
.s-compact .front small { display:block; font:600 11px var(--k-font); color:var(--k-muted); margin-top:8px; }
.s-compact .back { transform:rotateY(180deg); background:var(--s); color:var(--t); font-size:13px; line-height:18px; font-weight:600; }
.s-compact .ex { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }

/* ---------- IFoS · compact Forestry ---------- */
.s-forest .topics { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.s-forest .books { position:absolute; right:20px; bottom:18px; width:150px; display:flex; flex-direction:column-reverse; gap:3px; }
.s-forest .book { height:22px; border-radius:4px; background:var(--k-card); box-shadow:var(--k-ring); font-size:11px; font-weight:700; color:var(--k-muted); display:flex; align-items:center; padding:0 9px; }
.s-forest .book:nth-child(2) { margin-left:8px; } .s-forest .book:nth-child(3) { margin-right:6px; } .s-forest .book:nth-child(4) { margin-left:4px; }
.s-forest .book.c { background:var(--s); color:var(--t); box-shadow:inset 0 0 0 1px var(--c); }
.s-forest .grove { position:absolute; left:20px; bottom:14px; display:flex; align-items:flex-end; gap:4px; }
.s-forest .tree { transform-origin:50% 100%; transform:scaleY(0); transition:transform .7s cubic-bezier(.3,1.4,.5,1); }
.s-forest .tree.on { transform:none; }
.s-forest .tree svg { display:block; }

/* ---------- IFoS · General Knowledge ---------- */
.s-gk .tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.s-gk .tile { padding:10px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--k-ink); transition:all .3s; }
.s-gk .tile .ck { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--k-faint); flex:none; display:grid; place-items:center; transition:all .3s; }
.s-gk .tile .ck svg { width:10px; height:10px; stroke:#fff; stroke-width:3; fill:none; opacity:0; }
.s-gk .tile.on { background:var(--s); box-shadow:inset 0 0 0 1.5px var(--c); }
.s-gk .tile.on .ck { background:var(--c); box-shadow:none; }
.s-gk .tile.on .ck svg { opacity:1; }
.s-gk .meter { position:absolute; left:20px; right:20px; bottom:18px; }
.s-gk .meter .tr { height:8px; border-radius:4px; background:var(--k-soft); overflow:hidden; margin-top:6px; }
.s-gk .meter .tr i { display:block; height:100%; width:var(--p,0%); background:var(--c); border-radius:4px; transition:width .5s; }
@container (max-width:540px) { .s-gk .tiles { grid-template-columns:1fr 1fr; } }

/* ---------- IFoS · English and Essay (the Lego Method) ---------- */
.s-essay { display:grid; grid-template-columns:150px 1fr; gap:16px; }
.s-essay .lego { display:flex; flex-direction:column-reverse; gap:4px; margin-top:12px; }
.s-essay .brick { position:relative; height:26px; border-radius:6px; font-size:11.5px; font-weight:700; display:flex; align-items:center; padding-left:10px; color:var(--t); background:var(--s); box-shadow:inset 0 0 0 1.5px var(--c); opacity:0; transform:translateY(-30px); transition:all .45s cubic-bezier(.3,1.3,.5,1); }
.s-essay .brick::before, .s-essay .brick::after { content:""; position:absolute; top:-5px; width:14px; height:5px; border-radius:3px 3px 0 0; background:var(--c); opacity:.6; }
.s-essay .brick::before { left:18px; } .s-essay .brick::after { right:18px; }
.s-essay .brick.on { opacity:1; transform:none; }
.s-essay .page { padding:14px; margin-top:12px; }
.s-essay .page .h { font-size:13px; font-weight:700; color:var(--k-ink); }
.s-essay .pl { height:6px; border-radius:3px; background:var(--k-soft); margin-top:8px; width:0; transition:width .5s; }
.s-essay .pl.on { width:var(--w); }
.s-essay .wc { margin-top:12px; font-size:12px; color:var(--k-muted); }
@container (max-width:540px) { .s-essay { grid-template-columns:1fr; } .s-essay .page { display:none; } }

/* ---------- Micros · the 25-minute ring (from the acads7 homepage) ---------- */
.s-ring { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; }
.s-ring .ring { position:relative; width:150px; height:150px; }
.s-ring .ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.s-ring .ring circle { fill:none; stroke-width:11; }
.s-ring .ring .bg { stroke:var(--k-soft); }
.s-ring .ring .sg { stroke-dasharray:0 400; transition:stroke-dasharray 1.1s linear; }
.s-ring .ring .sg.on { stroke-dasharray:var(--len) 400; }
.s-ring .clock { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.s-ring .clock b { font:700 30px/1 var(--k-num); color:var(--k-ink); }
.s-ring .clock span { font-size:10.5px; font-weight:600; color:var(--k-muted); margin-top:4px; }
.s-ring .crumb { font-size:12px; font-weight:600; color:var(--k-muted); }
.s-ring h5 { margin:2px 0 10px; font-size:17px; line-height:22px; font-weight:700; color:var(--k-ink); letter-spacing:-.01em; }
.s-ring .part { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; margin-top:5px; font-size:12.5px; font-weight:600; background:var(--k-card); box-shadow:var(--k-ring); transition:all .3s; }
.s-ring .part .bx { width:14px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1.5px var(--k-faint); flex:none; display:grid; place-items:center; }
.s-ring .part .bx svg { width:9px; height:9px; stroke:#fff; stroke-width:3.2; fill:none; opacity:0; }
.s-ring .part .m { margin-left:auto; font-size:11.5px; color:var(--k-muted); font-weight:500; }
.s-ring .part.now { box-shadow:inset 0 0 0 1.5px var(--pc); }
.s-ring .part.done { color:var(--k-faint); text-decoration:line-through; }
.s-ring .part.done .bx { background:var(--pc); box-shadow:none; }
.s-ring .part.done .bx svg { opacity:1; }
@container (max-width:540px) { .s-ring { grid-template-columns:1fr; justify-items:start; gap:10px; } .s-ring .ring { width:104px; height:104px; } .s-ring .clock b { font-size:22px; } }

/* ---------- Micros · recall test ---------- */
.s-recall .qq { margin-top:12px; font-size:15px; line-height:21px; font-weight:700; color:var(--k-ink); }
.s-recall .opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.s-recall .opt { padding:10px 12px; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; transition:all .3s; }
.s-recall .opt .r { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--k-faint); flex:none; transition:all .3s; }
.s-recall .opt.pick { box-shadow:inset 0 0 0 1.5px var(--k-ink); }
.s-recall .opt.right { background:#e3f3e6; box-shadow:inset 0 0 0 1.5px #2f9e44; color:#1d6b31; }
.s-recall .opt.right .r { background:#2f9e44; box-shadow:none; }
.s-recall .streak { position:absolute; left:20px; right:20px; bottom:16px; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--k-muted); }
.s-recall .streak i { width:22px; height:6px; border-radius:3px; background:var(--k-soft); transition:background .3s; }
.s-recall .streak i.on { background:var(--c); }

/* ---------- AI · QCAB Generator ---------- */
.s-qcab { display:grid; grid-template-columns:1fr 1.15fr; gap:14px; }
.s-qcab .form { display:grid; gap:7px; margin-top:12px; align-content:start; }
.s-qcab .fld { padding:8px 10px; font-size:12.5px; display:flex; justify-content:space-between; gap:8px; color:var(--k-muted); transition:all .3s; }
.s-qcab .fld b { color:var(--k-faint); font-weight:600; transition:color .3s; }
.s-qcab .fld.on { box-shadow:inset 0 0 0 1.5px var(--c); }
.s-qcab .fld.on b { color:var(--k-ink); }
.s-qcab .gen { margin-top:2px; height:34px; border-radius:8px; background:var(--k-ink); color:var(--k-card); font-size:13px; font-weight:700; display:grid; place-items:center; transition:transform .15s, background .3s; }
.s-qcab .gen.on { transform:scale(.96); background:var(--c); }
.s-qcab .book { position:relative; margin-top:12px; height:220px; }
.s-qcab .pg { position:absolute; inset:0; padding:12px; background:var(--k-card); border-radius:var(--k-r); box-shadow:var(--k-ring); }
.s-qcab .pg.b1 { transform:translate(8px,8px) rotate(2deg); opacity:.6; }
.s-qcab .pg.top { opacity:0; transform:translateY(16px); transition:all .5s cubic-bezier(.2,.8,.2,1); }
.s-qcab .pg.top.on { opacity:1; transform:none; }
.s-qcab .pg .qh { font-size:12px; font-weight:700; color:var(--k-ink); line-height:16px; }
.s-qcab .pg .qh small { display:block; font-weight:500; color:var(--k-muted); }
.s-qcab .pg .box { margin-top:10px; height:118px; border-radius:6px; border:1.5px dashed var(--k-hair); background:repeating-linear-gradient(transparent 0 17px, var(--k-hair) 17px 18px); }
.s-qcab .pg .ft { margin-top:8px; display:flex; justify-content:space-between; font-size:11px; color:var(--k-muted); }

/* ---------- AI · Smart Scheduler ---------- */
.s-sched .wk { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-top:14px; }
.s-sched .day { min-height:108px; padding:6px; display:flex; flex-direction:column; gap:5px; transition:all .3s; }
.s-sched .day > b { font-size:11px; font-weight:700; color:var(--k-muted); }
.s-sched .day.miss { background:#fdecea; box-shadow:inset 0 0 0 1.5px #e36a5c; }
.s-sched .day.miss > b { color:#b8321f; }
.s-sched .day.exam { background:var(--k-ink); }
.s-sched .day.exam > b, .s-sched .day.exam span { color:var(--k-card); }
.s-sched .tk { font-size:10.5px; line-height:13px; font-weight:600; padding:5px 6px; border-radius:6px; background:var(--s); color:var(--t); transition:all .45s cubic-bezier(.2,.8,.2,1); }
.s-sched .tk.mv { opacity:0; transform:translateY(-6px); max-height:0; padding:0 6px; margin:-2.5px 0; }
.s-sched .tk.nw { opacity:0; transform:translateX(-14px); }
.s-sched .tk.nw.on { opacity:1; transform:none; }
.s-sched .tk.gone.on { opacity:.25; text-decoration:line-through; }
.s-sched .msg { position:absolute; left:20px; right:20px; bottom:14px; font-size:12.5px; padding:8px 10px; }

/* ---------- AI · Smart CA ---------- */
.s-ca { display:grid; grid-template-columns:1fr 34px 1.15fr; gap:8px; align-items:center; }
.s-ca .news { padding:12px; font-size:13px; line-height:18px; }
.s-ca .news .src { font-size:11px; color:var(--k-muted); font-weight:600; margin-bottom:4px; }
.s-ca .news .hl2 { font-weight:700; color:var(--k-ink); }
.s-ca .news .gl { height:6px; border-radius:3px; background:var(--k-soft); margin-top:7px; }
.s-ca .arrow2 { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--k-soft); transition:all .3s; }
.s-ca .arrow2 svg { width:16px; height:16px; stroke:var(--k-muted); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.s-ca .arrow2.on { background:var(--c); }
.s-ca .arrow2.on svg { stroke:#fff; }
.s-ca .notec { padding:12px; display:grid; gap:7px; font-size:12.5px; line-height:17px; }
.s-ca .notec .nr { display:flex; gap:8px; align-items:flex-start; }
.s-ca .notec .nr .chip { flex:none; }
@container (max-width:540px) { .s-ca { grid-template-columns:1fr; } .s-ca .arrow2 { transform:rotate(90deg); justify-self:center; } }

/* ---------- Access · only the top 50: 1,000 selected as 20 rows of 50; the top row lights up ---------- */
.s-top .dots { display:grid; grid-template-columns:repeat(50,1fr); gap:2px; margin-top:14px; }
.s-top .dots i { aspect-ratio:1; border-radius:50%; background:var(--k-soft); transition:background .25s, transform .25s; }
.s-top .dots i.lit { background:var(--c); transform:scale(1.2); }
.s-top .legend { position:absolute; left:20px; right:20px; bottom:14px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; color:var(--k-muted); }
.s-top .legend b { color:var(--k-ink); font-family:var(--k-num); }
.s-top .legend .chip.c b { color:var(--t); }

/* ---------- Access · talk directly ---------- */
.s-chat .head { display:flex; align-items:center; gap:10px; margin-top:10px; padding-bottom:10px; border-bottom:1px solid var(--k-hair); }
.s-chat .av { width:34px; height:34px; border-radius:50%; background:var(--s); display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--t); box-shadow:0 0 0 2px var(--k-card), 0 0 0 3.5px var(--c); }
.s-chat .head b { font-size:13.5px; color:var(--k-ink); display:block; line-height:16px; }
.s-chat .head span { font-size:11.5px; color:var(--k-muted); }
.s-chat .live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:#1d6b31; }
.s-chat .live i { width:7px; height:7px; border-radius:50%; background:#2f9e44; }
.s-chat .th { display:flex; flex-direction:column; gap:8px; margin-top:12px; font-size:13px; line-height:18px; }
.s-chat .me { align-self:flex-end; max-width:80%; background:var(--k-ink); color:var(--k-card); padding:8px 11px; border-radius:12px 12px 4px 12px; }
.s-chat .them { align-self:flex-start; max-width:88%; padding:8px 11px; border-radius:12px 12px 12px 4px; }
.s-chat .typing { display:inline-flex; gap:3px; }
.s-chat .typing i { width:5px; height:5px; border-radius:50%; background:var(--k-faint); animation:kblink 1s infinite; }
.s-chat .typing i:nth-child(2) { animation-delay:.15s; } .s-chat .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes kblink { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }
.s-chat .tp:not(.on) { display:none; }

/* ---------- Access · learn from the best ---------- */
.s-best .mentors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.s-best .m { padding:14px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.s-best .m .av { width:42px; height:42px; border-radius:50%; background:var(--s); display:grid; place-items:center; }
.s-best .m .av svg { width:22px; height:22px; fill:var(--t); }
.s-best .m b { font-size:13px; color:var(--k-ink); line-height:16px; }
.s-best .m span { font-size:11.5px; color:var(--k-muted); line-height:15px; }
.s-best .m .badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--s); color:var(--t); }
.s-best .foot { position:absolute; left:20px; right:20px; bottom:16px; font-size:12px; color:var(--k-muted); }
@container (max-width:540px) { .s-best .mentors { grid-template-columns:1fr 1fr; } .s-best .m:nth-child(3) { display:none; } }

@media (prefers-reduced-motion: reduce) { .ks *, .ks *::before, .ks *::after { transition:none !important; animation:none !important; } }

/* grid scenes keep their rows at natural height when a variant stretches the scene to fill a tall panel */
.s-eval, .s-compact, .s-essay, .s-qcab, .s-ring { align-content:start; }
.s-ca { align-content:center; }
.s-compact .ex { align-self:end; }

/* narrow scenes (a third of a wide grid, or a phone): each scene rearranges for its own width */
@container (max-width:540px) {
  .s-eval { grid-template-columns:1fr; gap:8px; }
  .s-eval .tpl { grid-template-columns:1fr 1fr; gap:5px; }
  .s-eval .tpl .k, .s-eval .blk small { display:none; }
  .s-eval .blk.ind { margin-left:0; }
  .s-eval .ai { grid-column:1 / -1; }
  .s-qcab { grid-template-columns:1fr; gap:8px; }
  .s-qcab .form { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .s-qcab .fld { flex-direction:column; gap:0; font-size:11px; line-height:15px; padding:6px 8px; }
  .s-qcab .gen { grid-column:1 / -1; height:30px; }
  .s-qcab .book { height:118px; margin-top:0; }
  .s-qcab .pg .box { height:40px; }
  .s-ring { grid-template-columns:auto minmax(0,1fr); gap:12px; justify-items:stretch; }
  .s-ring .ring { width:96px; height:96px; }
  .s-ring .clock b { font-size:19px; }
  .s-ring .clock span { font-size:9px; }
  .s-ring h5 { font-size:14.5px; line-height:19px; margin-bottom:6px; }
  .s-ring .part { font-size:11.5px; padding:5px 7px; margin-top:4px; }
  .s-ring .part .m { font-size:10.5px; }
  .s-sched .wk { gap:4px; }
  .s-sched .tk { font-size:9.5px; line-height:12px; padding:4px; }
  .s-sched .day { padding:5px 4px; }
  .s-essay { grid-template-columns:132px minmax(0,1fr); gap:10px; }
  .s-essay .page { display:block; padding:10px; }
  .s-essay .brick { font-size:10.5px; padding-left:8px; }
  .s-compact .stacks { gap:12px; }
  .s-compact .stack { width:52px; }
  .s-compact .front { font-size:22px; }
  .s-compact .back { font-size:12px; line-height:16px; }
  .s-forest .books { width:128px; }
  .s-top .legend { font-size:11.5px; gap:4px 8px; }
}
@container (max-width:300px) {
  .s-essay { grid-template-columns:1fr; } .s-essay .page { display:none; }
  .s-ring { grid-template-columns:1fr; } .s-ring .ring { display:none; }
}
@container (max-width:380px) {
  .s-ring .ring { width:84px; height:84px; } .s-ring { gap:10px; }
  .s-sched .day:nth-child(5) { display:none; } .s-sched .wk { grid-template-columns:repeat(5,minmax(0,1fr)); }
}