/* Lesson kit and widgets. Shared by the app and the public lesson pages.
   Brand: IBM Plex Mono, ink borders, paper/cream/yellow/orange, flat blocks. */
.lk-dia,.lk-dia *,.lw,.lw *,.lk-summary,.lk-summary *,.lk-bar,.lk-bar *,.lk-call,.lk-runner,.lk-runner *{box-sizing:border-box}
:root{--lk-paper:#E9D9C6;--lk-cream:#F8E8D0;--lk-reading:#FFF0D8;--lk-yellow:#F8D838;--lk-orange:#F87028;--lk-otext:#A63E0A;--lk-ink:#11100D;--lk-muted:#504F40;--lk-ok:#2E6B34;--lk-b:1.5px solid var(--lk-ink);--lk-ease:cubic-bezier(.2,.7,.2,1)}
.lk-summary svg,.lk-call svg,.lk-pitfalls svg,.lk-loop svg,.lk-compare svg{width:20px;height:20px;flex:0 0 20px}

/* summary card */
.lk-summary{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px 22px;align-items:start;border:var(--lk-b);background:var(--lk-cream);padding:18px 20px;margin:4px 0 18px}
.lk-sum-icon{width:56px;height:56px;border:var(--lk-b);background:var(--lk-yellow);display:flex;align-items:center;justify-content:center}
.lk-sum-icon svg{width:30px;height:30px}
.lk-sum-h{display:block;font-size:14px;font-weight:700;margin-bottom:6px;cursor:pointer;list-style:none}
.lk-sum-h::-webkit-details-marker{display:none}
.lk-sum-main:not([open]) .lk-sum-h::after{content:' +';color:var(--lk-otext)}
.lk-sum-learn{margin:0;padding:0;list-style:none}
.lk-sum-learn li{font-size:13.5px;line-height:1.5;padding:3px 0 3px 18px;position:relative;color:var(--lk-ink);margin:0}
.lk-sum-learn li::before{content:'';position:absolute;left:0;top:.75em;width:8px;height:8px;background:var(--lk-orange);border:1px solid var(--lk-ink)}
.lk-sum-learn .lk-more{color:var(--lk-muted)}.lk-sum-learn .lk-more::before{background:var(--lk-reading)}
.lk-sum-stats{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:10px 18px;margin:0}
.lk-sum-stats div{border-left:3px solid var(--lk-yellow);padding-left:10px}
.lk-sum-stats dt{font-weight:700;font-size:14px}
.lk-sum-stats dd{margin:0;font-size:12px;color:var(--lk-muted);line-height:1.4}

/* toolbar */
.lk-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--lk-reading);border:var(--lk-b);padding:8px 10px;margin:0 0 20px}
.lk-modes{display:flex;border:var(--lk-b)}
.lk-modes button{font:inherit;font-size:13px;font-weight:700;background:var(--lk-reading);color:var(--lk-ink);border:0;border-right:1px solid var(--lk-ink);padding:8px 12px;min-height:40px;cursor:pointer;transition:background-color .2s}
.lk-modes button:last-child{border-right:0}
.lk-modes button[aria-pressed="true"]{background:var(--lk-ink);color:var(--lk-reading)}
.lk-listen{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;border:var(--lk-b);background:var(--lk-cream);color:var(--lk-ink);padding:6px 12px;min-height:40px;cursor:pointer}
.lk-listen[aria-pressed="true"]{background:var(--lk-yellow)}
.lk-listen svg{width:18px;height:18px;flex:0 0 18px}
.lk-prog{flex:1 1 220px;display:flex;flex-direction:column;gap:5px;min-width:0}
.lk-prog-txt{font-size:12.5px;color:var(--lk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-prog-bar{height:6px;border:1px solid var(--lk-ink);background:var(--lk-cream);overflow:hidden}
.lk-prog-bar i{display:block;height:100%;background:var(--lk-orange);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--lk-ease)}
.lk-resume{font-size:13px;color:var(--lk-muted);margin:-8px 0 16px}
.lk-resume button{font:inherit;font-size:13px;background:none;border:0;color:var(--lk-otext);font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 2px}

/* step mode */
.lk-unit-k{display:none;font-size:12px;font-weight:700;color:var(--lk-muted);margin-bottom:8px}
.lk-steps .lk-unit{display:none}
.lk-steps .lk-unit.lk-cur{display:block}
.lk-steps .lk-unit-k{display:block}
.lk-steps .ls-why.lk-cur .lk-unit-k{color:var(--lk-ink)}
.lk-steps .ls-card.lk-cur,.lk-steps .ls-ai.lk-cur{border-top:0;margin-top:0;padding-top:0}
.lk-steps .lk-step .ls-h:first-of-type{margin-top:4px}
.lk-enter{animation:lkIn .45s var(--lk-ease) both}
@keyframes lkIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.lk-stepnav{display:none;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 6px;border-top:1px solid var(--lk-ink);padding-top:16px}
.lk-steps .lk-stepnav{display:flex}
.lk-stepnav>button{font:inherit;font-size:14px;font-weight:700;border:var(--lk-b);min-height:46px;padding:10px 16px;cursor:pointer;color:var(--lk-ink);transition:transform .16s var(--lk-ease),box-shadow .16s var(--lk-ease)}
.lk-prev{background:var(--lk-cream);white-space:nowrap}
.lk-next{background:var(--lk-orange);max-width:60%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-stepnav>button:disabled{opacity:.45;cursor:default}
@media (hover:hover){.lk-stepnav>button:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--lk-ink)}}
.lk-stepnav>button:not(:disabled):active{transform:translate(1px,1px);box-shadow:none}
.lk-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;list-style:none;margin:0;padding:0;flex:1 1 auto}
.lk-dots li{margin:0}
.lk-dots button{display:block;width:14px;height:14px;border:1px solid var(--lk-ink);background:var(--lk-reading);padding:0;cursor:pointer;transition:transform .2s var(--lk-ease),background-color .2s}
.lk-dots li.seen button{background:var(--lk-yellow)}
.lk-dots li.cur button{background:var(--lk-orange);transform:scale(1.25)}
.lk-steps .lk-end{display:none}
.lk-steps.lk-at-end .lk-end{display:block}

/* skim mode: headings, the first paragraph of each step, callouts, pictures and code */
.lk-skim .lk-step>p:not(.lk-lead),.lk-skim .lk-step>ul,.lk-skim .lk-step>ol,.lk-skim .lk-step>blockquote,.lk-skim .ls-ai>p,.lk-skim .ls-prompt-note{display:none}
.lk-skim .lk-lead{background:var(--lk-cream);border-left:4px solid var(--lk-yellow);padding:8px 12px}

/* point cards: paragraphs that open with a bold lead-in */
.lk-point{border-left:4px solid var(--lk-yellow);background:var(--lk-cream);padding:10px 14px}
.lk-point>strong:first-child{display:block;margin-bottom:2px}

/* callouts */
.lk-call{border:var(--lk-b);margin:0 0 18px;padding:12px 16px 2px;background:var(--lk-reading)}
.lk-call-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:6px}
.lk-call-key{background:var(--lk-yellow)}
.lk-call-job{background:var(--lk-cream);border-left:6px solid var(--lk-ink)}
.lk-call-trap{background:var(--lk-reading);border-left:6px solid var(--lk-orange)}.lk-call-trap .lk-call-h{color:var(--lk-otext)}
.lk-call-try{background:var(--lk-cream);border-style:dashed}
.lk-call-rule{background:var(--lk-cream)}
.lk-call p{margin:0 0 12px}

/* pitfalls and practice */
.lk-pitfalls{list-style:none;padding:0 !important;margin:0 0 14px}
.lk-pitfalls li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid rgba(17,16,13,.15);margin:0}
.lk-pitfalls li:last-child{border-bottom:0}
.lk-pitfalls svg{color:var(--lk-otext);margin-top:3px}
.lk-practice{list-style:none;padding:0 !important;counter-reset:pr;margin:0 0 14px}
.lk-practice li{counter-increment:pr;margin:0 0 8px}
.lk-practice label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--lk-ink);background:var(--lk-cream);padding:12px 14px;cursor:pointer}
.lk-practice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--lk-orange)}
.lk-practice input:checked+span{color:var(--lk-muted);text-decoration:line-through;text-decoration-thickness:1px}

/* self-check grading */
.lk-grade{display:none;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px dashed rgba(17,16,13,.35);padding:10px 0 8px;margin-top:6px;font-size:13px}
.lk-js .lk-grade{display:flex}
.lk-grade span{color:var(--lk-muted);margin-right:4px}
.lk-grade button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;border:1px solid var(--lk-ink);background:var(--lk-reading);color:var(--lk-ink);padding:6px 12px;min-height:38px;cursor:pointer}
.lk-grade button svg{width:16px;height:16px;flex:0 0 16px}
.lk-got>summary{background:#dcecd5}.lk-got .lk-grade [data-g=got]{background:var(--lk-ok);color:#fff}
.lk-notyet>summary{background:#f7dfcb}.lk-notyet .lk-grade [data-g=notyet]{background:var(--lk-orange)}
.lk-tally{display:none;font-size:13.5px;border:var(--lk-b);background:var(--lk-cream);padding:10px 14px;margin-top:10px}
.lk-js .lk-tally{display:block}

/* code: predict the output, edit and run */
.lk-code-act{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lk-edit{display:inline-flex;align-items:center;gap:5px}.lk-edit svg{width:14px;height:14px;flex:0 0 14px}
.lk-out{border-top:1px solid var(--lk-ink)}
.lk-out summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 12px;font-size:13px;background:var(--lk-reading)}
.lk-out summary::-webkit-details-marker{display:none}
.lk-out-q{color:var(--lk-muted)}
.lk-out-btn{flex:0 0 auto;font-weight:700;border:1px solid var(--lk-ink);background:var(--lk-yellow);padding:6px 12px;min-height:34px;display:inline-flex;align-items:center}
.lk-out[open] .lk-out-btn{background:var(--lk-reading)}.lk-out[open] .lk-out-btn::after{content:' (shown)';font-weight:400}
.lk-out-pre{margin:0;background:var(--lk-ink);color:var(--lk-reading);padding:12px 14px;overflow-x:auto;font-size:12.5px;line-height:1.55}
.lk-out-pre code{background:none!important;border:0!important;color:inherit;padding:0}
.lk-out[open] .lk-out-pre{animation:lkDrop .3s var(--lk-ease)}
@keyframes lkDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lk-runner{border-top:1px solid var(--lk-ink);padding:10px 12px 12px;background:var(--lk-reading)}
.lk-runner-l{display:block;font-size:12.5px;color:var(--lk-muted)}
.lk-runner textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:13px;line-height:1.55;border:1px solid var(--lk-ink);background:#fffaf1;padding:10px;resize:vertical;tab-size:4;white-space:pre;overflow:auto}
.lk-runner-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.lk-run,.lk-reset{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;border:var(--lk-b);padding:6px 14px;min-height:40px;cursor:pointer;color:var(--lk-ink)}
.lk-run{background:var(--lk-orange)}.lk-reset{background:var(--lk-cream)}
.lk-run svg{width:14px;height:14px;flex:0 0 14px}
.lk-runner-st{font-size:12.5px;color:var(--lk-muted)}
.lk-runner-out{margin:8px 0 0;background:var(--lk-ink);color:var(--lk-reading);padding:12px;font-size:12.5px;overflow-x:auto;white-space:pre-wrap}
.lk-runner-out.lk-err{color:#ffc9a8}

/* diagrams */
.lk-dia{margin:6px 0 22px;border:var(--lk-b);background:var(--lk-cream);padding:16px 18px 14px;background-image:radial-gradient(rgba(17,16,13,.13) 1px,transparent 1px);background-size:14px 14px}
.lk-dia-title{font-weight:700;font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.lk-dia-title::before{content:'';width:10px;height:10px;background:var(--lk-orange);border:1px solid var(--lk-ink);flex:0 0 10px}
.lk-dia-cap{font-size:13px;color:var(--lk-muted);margin:12px 0 0 !important}
.lk-node b{display:block;font-size:13.5px;line-height:1.35}
.lk-node span{display:block;font-size:12px;color:var(--lk-muted);line-height:1.45;margin-top:3px}
.lk-flow{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:26px;counter-reset:fl}
.lk-flow .lk-node{position:relative;flex:1 1 0;min-width:0;border:var(--lk-b);background:var(--lk-reading);padding:10px 12px;margin:0;box-shadow:3px 3px 0 var(--lk-ink)}
.lk-flow .lk-node:first-child{background:var(--lk-yellow)}
.lk-flow .lk-node:last-child{background:#fbd6bd}
.lk-flow .lk-node:not(:last-child)::after{content:'';position:absolute;right:-21px;top:50%;width:14px;height:14px;border-top:2px solid var(--lk-ink);border-right:2px solid var(--lk-ink);transform:translateY(-50%) rotate(45deg)}
.lk-flow .lk-node:not(:last-child)::before{content:'';position:absolute;right:-24px;top:50%;width:20px;border-top:2px solid var(--lk-ink)}
.lk-loop{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:700;border-top:2px dashed var(--lk-ink);padding-top:10px}
.lk-loop svg{color:var(--lk-otext)}
.lk-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.lk-layers .lk-node{width:calc(100% - var(--w,0) * 9%);border:var(--lk-b);background:var(--lk-reading);padding:10px 14px;margin:0;text-align:center}
.lk-layers .lk-node:nth-child(1){background:#fbd6bd}.lk-layers .lk-node:nth-child(2){background:var(--lk-yellow)}
.lk-compare{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px}
.lk-col{border:var(--lk-b);background:var(--lk-reading);padding:12px 14px}
.lk-col-h{display:block;font-size:14px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--lk-ink)}
.lk-col ul{list-style:none;margin:0;padding:0 !important}
.lk-col li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.5;margin:0 0 7px}
.lk-col li svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px}
.lk-mark-x svg{color:var(--lk-otext)}.lk-mark-v svg{color:var(--lk-ok)}
.lk-col li small{display:block;color:var(--lk-muted);font-size:12px}
/* diagrams draw in, node by node, the first time they scroll into view */
.lk-anim .lk-dia:not(.lk-in) .lk-node,.lk-anim .lk-dia:not(.lk-in) .lk-col,.lk-anim .lk-dia:not(.lk-in) .lk-loop{opacity:0;transform:translateY(10px)}
.lk-anim .lk-dia.lk-in .lk-node,.lk-anim .lk-dia.lk-in .lk-col,.lk-anim .lk-dia.lk-in .lk-loop{transition:opacity .5s var(--lk-ease),transform .5s var(--lk-ease);transition-delay:calc(var(--n,0) * 140ms)}
.lk-anim .lk-dia.lk-in .lk-loop{transition-delay:.7s}
@media (max-width:700px){
  .lk-summary{grid-template-columns:44px minmax(0,1fr);padding:14px}
  .lk-sum-icon{width:44px;height:44px}.lk-sum-icon svg{width:24px;height:24px}
  .lk-sum-stats{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lk-bar{position:static;padding:8px;gap:8px}
  .lk-modes{flex:1 1 auto}.lk-modes button{flex:1 1 auto;padding:8px 6px;font-size:12.5px}
  .lk-listen{padding:6px 10px}.lk-listen span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lk-prog{flex:1 1 100%}
  .lk-sum-main{grid-column:2}
  .lk-next{max-width:66%}
  .lk-dots{display:none}
  .lk-flow,.lk-flow-long{flex-direction:column;gap:22px}
  .lk-flow .lk-node:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-19px;transform:rotate(135deg)}
  .lk-flow .lk-node:not(:last-child)::before{right:auto;left:28px;top:auto;bottom:-22px;width:0;height:20px;border-top:0;border-left:2px solid var(--lk-ink)}
  .lk-compare{grid-template-columns:1fr}
  .lk-layers .lk-node{width:calc(100% - var(--w,0) * 6%)}
  .lk-dia{padding:14px 12px}
}
@media (min-width:701px){
  .lk-flow-long{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
  .lk-flow-long .lk-node:nth-child(3n)::after,.lk-flow-long .lk-node:nth-child(3n)::before{display:none}
}

/* ---------------------------------------------------------------- widgets */
.lk-widget{margin:6px 0 22px}
.lk-widget-fallback{font-size:13px;color:var(--lk-muted);border:1px dashed var(--lk-ink);padding:10px 12px}
.lw{border:var(--lk-b);background:var(--lk-reading);box-shadow:5px 5px 0 var(--lk-orange)}
.lw-head{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--lk-ink);color:var(--lk-reading)}
.lw-head b{font-size:14px}.lw-head span{font-size:12.5px;color:#d9ccb6;line-height:1.45}
.lw-body{padding:14px}
.lw-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.lw-btn{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--lk-ink);background:var(--lk-cream);color:var(--lk-ink);padding:6px 11px;min-height:40px;cursor:pointer;transition:transform .14s var(--lk-ease),background-color .15s}
.lw-btn:active{transform:translate(1px,1px)}
.lw-btn[aria-pressed="true"]{background:var(--lk-ink);color:var(--lk-reading)}
.lw-btn:disabled{opacity:.4;cursor:default}
.lw-pri{background:var(--lk-orange)}.lw-ghost{background:transparent;border-style:dashed}
.lw-mono{font-weight:600}
.lw-cap{display:block;font-size:12px;font-weight:700;color:var(--lk-muted);margin:0 0 6px}
.lw-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.lw-tw{overflow-x:auto}
.lw-t{border-collapse:collapse;width:100%;font-size:13px;margin:0;background:var(--lk-reading)}
.lw-t th,.lw-t td{border:1px solid var(--lk-ink);padding:6px 8px;text-align:left}
.lw-t th{background:var(--lk-yellow);font-size:12px}
.lw-t tr{transition:background-color .3s,opacity .3s}
.lw-hit td{background:#dcecd5}.lw-miss td{background:#f7dfcb}.lw-gone td{opacity:.45;text-decoration:line-through}
.lw-nullrow td{background:#f7dfcb}.lw-bad td{background:#f4b8a0;font-weight:700}
.lw-null{color:var(--lk-otext);font-style:normal;font-weight:700}
.lw-empty{color:var(--lk-muted);text-align:center}
.lw-sql,.lw-term{margin:0 0 12px;background:var(--lk-ink);color:var(--lk-reading);padding:10px 12px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;overflow-x:auto;min-height:44px}
.lw-note{font-size:13.5px;line-height:1.6;margin:10px 0 0 !important;border-left:4px solid var(--lk-yellow);padding-left:10px}
.lw-note:empty{display:none}
.lw-svgwrap{overflow-x:auto;border:1px solid var(--lk-ink);background:var(--lk-cream);margin-bottom:12px}
.lw-git{display:block}
.lw-git path{fill:none;stroke-width:3}.lw-g-m{stroke:var(--lk-ink)}.lw-g-f{stroke:var(--lk-orange)}
.lw-dot circle{stroke:var(--lk-ink);stroke-width:2;fill:var(--lk-yellow)}.lw-dot-1 circle{fill:var(--lk-orange)}.lw-merge circle{fill:var(--lk-ink)}
.lw-dot:last-of-type circle{animation:lwPop .35s var(--lk-ease)}
@keyframes lwPop{from{transform:scale(.3);transform-origin:center;transform-box:fill-box}to{transform:scale(1);transform-origin:center;transform-box:fill-box}}
.lw-tag{font-size:11px;font-weight:700;fill:var(--lk-ink);font-family:inherit}
.lw-lane{font-size:11px;fill:var(--lk-muted);font-family:inherit}
.lw-resp.lw-s2{border-left:6px solid #7fbf6a}.lw-resp.lw-s4{border-left:6px solid var(--lk-orange)}
.lw-flash{animation:lkDrop .3s var(--lk-ease)}
.lw-stages{display:flex;flex-direction:column;gap:8px}
.lw-stage{border:1px solid var(--lk-ink);background:var(--lk-cream)}
.lw-stage .lw-cap{margin:0;padding:6px 10px;border-bottom:1px solid var(--lk-ink);color:var(--lk-ink);background:var(--lk-reading)}
.lw-stage pre{margin:0;padding:8px 10px;font-size:12.5px;line-height:1.5;overflow-x:auto;max-height:180px}
.lw-stage.lw-new:last-child{animation:lkDrop .3s var(--lk-ease)}
.lw-in{display:block;width:100%;font:inherit;font-size:15px;border:var(--lk-b);background:#fffaf1;padding:10px 12px;margin:0 0 12px}
.lw-tokens{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:12px;min-height:34px}
.lw-tok{font-size:13.5px;padding:3px 4px;border:1px solid var(--lk-ink);white-space:pre}
.lw-tok0{background:var(--lk-yellow)}.lw-tok1{background:#fbd6bd}.lw-tok2{background:#dcecd5}.lw-tok3{background:var(--lk-cream)}
.lw-meter{display:flex;flex-direction:column;gap:6px;font-size:13px}
.lw-meter-bar{height:12px;border:1px solid var(--lk-ink);background:var(--lk-cream);overflow:hidden}
.lw-meter-bar i{display:block;height:100%;background:var(--lk-ink);transform-origin:left;transition:transform .3s var(--lk-ease)}
.lw-full .lw-meter-bar i{background:var(--lk-orange)}
.lw-bars{display:flex;flex-direction:column;gap:8px}
.lw-chunk{border:1px solid var(--lk-ink);background:var(--lk-cream);padding:8px 10px;transition:background-color .3s}
.lw-chunk.lw-top{background:var(--lk-yellow);box-shadow:3px 3px 0 var(--lk-ink)}
.lw-chunk-h{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.lw-chunk p{font-size:13px;margin:6px 0 0 !important;color:var(--lk-muted);line-height:1.5}
.lw-score{display:block;height:6px;background:var(--lk-reading);border:1px solid var(--lk-ink);margin-top:6px;overflow:hidden}
.lw-score i{display:block;height:100%;background:var(--lk-orange);transform-origin:left;transition:transform .4s var(--lk-ease)}
.lw-phases{display:flex;list-style:none;margin:0 0 12px;padding:0;border:var(--lk-b)}
.lw-phases li{flex:1 1 0;text-align:center;font-size:12.5px;font-weight:700;padding:8px 4px;margin:0;border-right:1px solid var(--lk-ink);transition:background-color .25s}
.lw-phases li:last-child{border-right:0}.lw-phases li.on{background:var(--lk-yellow)}
.lw-count{align-self:center;font-size:12.5px;color:var(--lk-muted)}
.lw-msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lw-msg{border:1px solid var(--lk-ink);padding:8px 10px;margin:0;font-size:13px;line-height:1.5;background:var(--lk-cream)}
.lw-msg b{display:block;font-size:11.5px;margin-bottom:2px}
.lw-user{background:var(--lk-reading)}.lw-model{background:var(--lk-yellow)}.lw-tool{background:var(--lk-ink);color:var(--lk-reading);font-family:inherit}.lw-answer{background:#dcecd5}
.lw-msg.lw-new{animation:lkDrop .3s var(--lk-ease)}
@media (max-width:700px){.lw-grid2{grid-template-columns:1fr}.lw-body{padding:12px}.lw{box-shadow:4px 4px 0 var(--lk-orange)}}
@media (prefers-reduced-motion:reduce){.lk-enter,.lk-out[open] .lk-out-pre,.lw-flash,.lw-msg.lw-new,.lw-stage.lw-new:last-child,.lw-dot:last-of-type circle{animation:none!important}.lk-anim .lk-dia .lk-node,.lk-anim .lk-dia .lk-col,.lk-anim .lk-dia .lk-loop{opacity:1!important;transform:none!important}}

/* narration */
.lk-rate{font:inherit;font-size:13px;font-weight:700;border:var(--lk-b);background:var(--lk-yellow);color:var(--lk-ink);min-width:48px;min-height:40px;padding:6px 8px;cursor:pointer}
.lk-rate[hidden]{display:none}
.lk-reading{position:relative}
.lk-reading::before{content:'';position:absolute;left:-14px;top:4px;bottom:4px;width:4px;background:var(--lk-orange);animation:lkPulse 1.6s ease-in-out infinite}
@keyframes lkPulse{50%{opacity:.35}}
@media (max-width:700px){.lk-reading::before{left:-10px}}
@media (prefers-reduced-motion:reduce){.lk-reading::before{animation:none}}
.lk-ask{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;border:var(--lk-b);background:var(--lk-cream);color:var(--lk-ink);padding:6px 12px;min-height:40px;cursor:pointer}
.lk-ask svg{width:18px;height:18px;flex:0 0 18px}
@media (max-width:700px){.lk-ask span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.lk-ask{padding:6px 10px}}
.lk-s{display:none}
@media (max-width:700px){.lk-l{display:none}.lk-s{display:inline}.lk-bar{flex-wrap:wrap}.lk-modes{flex:1 1 0;min-width:0}}