/* English listening practice: the page (hero tool, levels, test, clip cards)
   and the practice session (scene, player, questions, dictation, result).
   On top of /english/tools.css. Solid colours only; sentence case; no inline
   styles (the CSP refuses them). */

/* ── Level colours: one solid pair per level ─────────────────────────── */
[data-lv="a2"]{--lv-bg:#bcf7db;--lv-soft:#e8fbf2;--lv-ink:#065f46;--lv-btn:#047857}
[data-lv="b1"]{--lv-bg:#d4ddff;--lv-soft:#eef1ff;--lv-ink:#3730a3;--lv-btn:#3730a3}
[data-lv="b2"]{--lv-bg:#ffe2b8;--lv-soft:#fff3e1;--lv-ink:#7c4300;--lv-btn:#9a5200}
[data-lv="c1"]{--lv-bg:#fed6d6;--lv-soft:#fff0f0;--lv-ink:#991b1b;--lv-btn:#991b1b}

.ls-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ls-i{display:block;flex:none;width:24px;height:24px;fill:currentColor}
.ls-i-sm{width:18px;height:18px}
.ls-i-xs{width:14px;height:14px}
.tt-pill .ls-i{margin-left:-4px}
.ls-fine{margin-top:14px!important;color:var(--muted);font-size:14px}
.ls-fine a{color:var(--purple)}

/* ── Hero ───────────────────────────────────────────────────────────── */
.ls-hero .tt-hero2-grid{align-items:start}
.ls-hero .tt-hero2-copy{padding-top:clamp(8px,3vw,40px)}

/* The tool on the right: level cards and one clip ready to play */
.ls-launch{padding:clamp(16px,2.4vw,24px);border:1px solid var(--line-strong);border-radius:28px;background:#fff}
.ls-launch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ls-launch-h{color:var(--ink);font:700 17px/1.2 var(--font-display);letter-spacing:-.01em}
.ls-launch-test{color:var(--purple);font-size:14px;font-weight:600;text-decoration:none}
.ls-launch-test:hover{text-decoration:underline}
.ls-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ls-lvcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:12px 12px 14px;border:0;border-radius:18px;background:var(--lv-bg);color:var(--lv-ink);text-align:left;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease-out)}
.ls-lvcard img{width:40px;height:40px;margin-bottom:6px;padding:4px;border-radius:12px;background:#fff}
.ls-lvcard b{font:800 22px/1 var(--font-display);letter-spacing:-.02em}
.ls-lvcard span{font-size:13px;font-weight:600;line-height:1.25}
.ls-lvcard small{margin-top:auto;padding-top:4px;font-size:12px;opacity:.85}
.ls-lvcard[aria-checked="true"],.ls-lvcard[aria-current="page"]{background:var(--lv-ink);color:#fff}
@media (hover:hover) and (pointer:fine){.ls-lvcard:hover{transform:translateY(-2px)}}
.ls-lvcard:focus-visible{outline-offset:2px}

.ls-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;margin-top:14px;padding:16px;border-radius:22px;background:var(--lv-bg);color:var(--ink)}
.ls-feature-pic{min-width:0}
.ls-feature-art{display:block;width:100%;height:100%;min-height:220px;max-height:300px;object-fit:cover;border-radius:16px;background:#fff}
.ls-feature-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding:4px 4px 2px 0}
.ls-feature-kind{color:var(--lv-ink);font-size:14px;font-weight:600}
.ls-feature-title{font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.12;font-weight:750;letter-spacing:-.03em}
.ls-feature-scene{color:var(--ink-soft);font-size:15px}
.ls-feature-meta{color:var(--lv-ink);font-size:14px;font-weight:600}
.ls-feature-go{align-self:flex-start;margin-top:auto}

/* speakers */
.ls-people{display:flex;flex-wrap:wrap;gap:6px}
.ls-people li{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:#fff;color:var(--ink-soft);font-size:13px;line-height:1.2}
.ls-people b{color:var(--ink);font-weight:600}
.ls-av{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--lv-ink);color:#fff;font:700 13px/1 var(--font-display)}
.ls-av[data-who="B"]{background:var(--lv-bg);color:var(--lv-ink);box-shadow:inset 0 0 0 2px var(--lv-ink)}
.ls-av[data-who="C"]{background:var(--ink);color:#fff}
.ls-av-sm{width:26px;height:26px;font-size:12px}

/* all clips of the level */
.ls-more{margin-top:10px}
.ls-more summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 6px;border-radius:12px;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.ls-more summary::-webkit-details-marker{display:none}
.ls-more summary .tt-i{width:20px;height:20px;transition:transform .2s}
.ls-more[open] summary .tt-i{transform:rotate(180deg)}
.ls-pick-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:4px}
.ls-pick{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:6px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.ls-pick[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover) and (pointer:fine){.ls-pick:hover{border-color:var(--line-strong);background:var(--surface)}}
.ls-pick-art{width:44px;height:44px;border-radius:10px;object-fit:cover}
.ls-pick b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.ls-pick small{display:block;color:var(--muted);font-size:12px}
.ls-done{padding:3px 8px;border-radius:999px;background:var(--ok);color:#fff;font:600 12px/1.2 var(--font-body);font-style:normal;white-space:nowrap}

@media (max-width:1023px){
  .ls-launch{border-radius:24px}
}
@media (max-width:640px){
  .ls-launch{padding:14px;margin-inline:-4px}
  .ls-levels{gap:6px}
  .ls-lvcard{padding:10px 8px 10px;border-radius:14px}
  .ls-lvcard img{width:30px;height:30px;margin-bottom:4px;padding:3px;border-radius:9px}
  .ls-lvcard b{font-size:19px}
  .ls-lvcard span{display:none}
  .ls-lvcard small{margin-top:2px;font-size:11px}
  .ls-feature{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px;border-radius:18px}
  .ls-feature-art{min-height:0;height:96px;max-height:none;border-radius:12px}
  .ls-feature-body{display:contents}
  .ls-feature-kind,.ls-feature-title{grid-column:2}
  .ls-feature-kind{align-self:end;font-size:13px}
  .ls-feature-title{align-self:start;font-size:1.25rem}
  .ls-feature-pic{grid-row:1/span 2}
  .ls-feature-scene,.ls-feature [data-f="people"],.ls-feature-meta,.ls-feature-go{grid-column:1/-1}
  .ls-feature-go{width:100%}
  .ls-pick-list{grid-template-columns:1fr}
  .ls-hero .tt-facts-row{gap:14px 18px;margin-top:24px!important}
  .ls-hero .tt-fact .tt-i{width:30px;height:30px}
}

/* ── Sections ───────────────────────────────────────────────────────── */
.ls-sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 32px;margin-bottom:32px}
.ls-sec-head .tt-sub{margin:0!important}

/* levels on the hub */
.ls-lvrows{display:grid;gap:16px}
.ls-lvrow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 22px;padding:24px;border-radius:24px;background:var(--lv-bg);color:var(--ink)}
.ls-lvrow img{width:64px;height:64px;padding:6px;border-radius:18px;background:#fff}
.ls-lvrow h3{font-size:1.35rem;letter-spacing:-.02em}
.ls-lvrow h3 span{margin-left:6px;color:var(--lv-ink);font:600 15px/1 var(--font-body)}
.ls-lvrow-main p{margin-top:6px!important;color:var(--ink-soft)}
.ls-lvrow-clips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px!important}
.ls-lvrow-clips a{display:inline-block;padding:5px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;text-decoration:none}
.ls-lvrow-clips a:hover{box-shadow:inset 0 0 0 1px var(--lv-ink)}
.ls-lvrow-go{grid-column:2;display:inline-flex;align-items:center;gap:6px;justify-self:start;color:var(--lv-ink);font-weight:700;text-decoration:none}
.ls-lvrow-go .tt-i{width:18px;height:18px}
.ls-lvrow-go:hover{text-decoration:underline}
@media (max-width:640px){
  .ls-lvrow{grid-template-columns:48px minmax(0,1fr);padding:18px;gap:6px 14px}
  .ls-lvrow img{width:48px;height:48px;border-radius:14px}
  .ls-lvrow-clips,.ls-lvrow-go{grid-column:1/-1}
}

/* the listening test band */
.ls-test-steps{display:grid;gap:10px;counter-reset:none}
.ls-test-steps li{display:grid;grid-template-columns:36px 56px minmax(0,1fr);align-items:center;gap:16px;padding:14px 18px;border-radius:20px;background:#fff;color:var(--ink-soft)}
.ls-test-steps li b{display:block;color:var(--ink);font:700 17px/1.25 var(--font-display)}
.ls-test-steps li span:not(.ls-test-n){display:block;font-size:14px;line-height:1.45}
.ls-test-steps img{width:56px;height:56px}
.ls-test-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lv-bg,var(--cat-bg));color:var(--lv-ink,var(--cat-ink));font:800 15px/1 var(--font-display)}
.ls-test-end{grid-template-columns:36px minmax(0,1fr)!important;background:var(--cat-ink)!important;color:rgba(255,255,255,.88)!important}
.ls-test-end b{color:#fff!important}
.ls-test-end .ls-test-n{background:#fff;color:var(--cat-ink)}
.ls-test-end .ls-test-n .tt-i{width:20px;height:20px}
@media (max-width:640px){
  .ls-test-steps li{grid-template-columns:32px 40px minmax(0,1fr);gap:12px;padding:12px 14px}
  .ls-test-steps img{width:40px;height:40px}
  .ls-test-n{width:32px;height:32px}
}

/* how it works, tips */
.ls-how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ls-how li{display:grid;gap:14px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.ls-how-i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--cat-bg);color:var(--cat-ink)}
.ls-how h3{font-size:1.15rem;margin-bottom:6px}
.ls-tips{display:grid;gap:12px}
.ls-tips li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ls-tip-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--cat-ink);color:#fff;font:800 16px/1 var(--font-display)}
.ls-tips h3{font-size:1.05rem;margin-bottom:4px}
@media (max-width:640px){.ls-how{grid-template-columns:1fr}.ls-how li{padding:20px}}

/* clip cards on a level page */
.ls-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ls-clip{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;scroll-margin-top:calc(var(--top-h) + 24px)}
.ls-clip:target{box-shadow:0 0 0 3px var(--lv-ink)}
.ls-clip-pic{position:relative;background:var(--lv-bg)}
.ls-clip-art{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.ls-clip-len{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:var(--lv-ink);color:#fff;font-size:13px;font-weight:600}
.ls-clip-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:18px 20px 20px}
.ls-clip-kind{color:var(--lv-ink);font-size:13px;font-weight:700}
.ls-clip h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.02em}
.ls-clip-scene{color:var(--ink-soft);font-size:15px}
.ls-clip-meta{color:var(--muted);font-size:13px}
.ls-clip-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
@media (max-width:1023px){.ls-clips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .ls-clips{grid-template-columns:1fr;gap:12px}
  .ls-clip{display:grid;grid-template-columns:104px minmax(0,1fr);border-radius:18px}
  .ls-clip-art{height:100%;aspect-ratio:auto;min-height:150px}
  .ls-clip-len{left:8px;bottom:8px;padding:3px 8px;font-size:12px}
  .ls-clip-body{padding:14px 14px 14px 16px}
  .ls-clip-scene{font-size:14px}
}

/* about the level */
.ls-about{background:var(--surface)}
.ls-about-art{width:96px;height:96px;margin-top:24px}
.ls-prose{display:grid;gap:16px;max-width:66ch;color:var(--ink-soft);font-size:17px}
.ls-prose h3{margin-top:12px;font-size:1.35rem}
.ls-lvnav{padding-top:8px;font-size:15px}
.ls-lvnav a{color:var(--purple);font-weight:600}

/* ── The session ────────────────────────────────────────────────────── */
.ls-screen{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#fff;color:var(--ink-soft)}
.ls-screen:focus{outline:none}
.ls-s-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:10px max(20px,calc((100% - 1240px) / 2 + 20px));border-bottom:1px solid var(--line);background:#fff}
.ls-s-back{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--field);color:var(--ink);cursor:pointer}
.ls-s-back:hover{background:var(--line)}
.ls-s-title{color:var(--ink);font:700 17px/1.25 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-s-sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-s-steps{display:flex;gap:6px}
.ls-s-steps li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--field);color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.ls-s-step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink-soft);font:700 13px/1 var(--font-display)}
.ls-s-steps li.is-now{background:var(--lv-ink);color:#fff}
.ls-s-steps li.is-now .ls-s-step-n{color:var(--lv-ink)}
.ls-s-steps li.is-done{background:var(--field);color:var(--ink)}
.ls-s-steps li.is-done .ls-s-step-n{background:var(--ok);color:#fff}
.ls-s-steps .tt-i{width:15px;height:15px;stroke-width:2.6}

.ls-s-body{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ls-s-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"scene work" "tr work";gap:clamp(16px,2vw,24px) clamp(20px,3vw,40px);align-items:start;width:min(1240px,100%);margin:0 auto;padding:clamp(20px,3vw,32px) max(20px,env(safe-area-inset-left,0px)) 40px}
.ls-s-grid-test{grid-template-areas:"scene work"}
.ls-s-grid>.ls-scene{grid-area:scene}
.ls-s-grid>.ls-work{grid-area:work}
.ls-s-grid>.ls-tr{grid-area:tr}

/* the scene */
.ls-scene{display:grid;gap:16px;padding:18px;border-radius:26px;background:var(--lv-bg);color:var(--ink)}
.ls-scene-top{display:grid;gap:16px}
.ls-scene-art{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:18px;background:#fff}
.ls-scene-kind{color:var(--lv-ink);font-size:14px;font-weight:700}
.ls-scene-title{margin-top:4px!important;font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.03em}
.ls-scene-text{margin-top:6px!important;color:var(--ink-soft)}
.ls-tr{position:sticky;top:16px;max-height:calc(100dvh - 180px);overflow:auto;padding:18px;border-radius:24px;background:var(--lv-soft);color:var(--ink)}
.ls-tr h3{margin-bottom:10px;font-size:1rem}
.ls-tr-locked{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.ls-tr-locked .tt-i{color:var(--lv-ink)}
.ls-tr-lines{display:grid;gap:4px}
.ls-tr-lines li{display:grid;grid-template-columns:26px minmax(0,1fr) 32px;align-items:start;gap:10px;padding:8px;border-radius:12px;transition:background .2s}
.ls-tr-lines p{color:var(--ink);font-size:15px;line-height:1.5}
.ls-tr-lines li.is-evidence{background:#fff;box-shadow:inset 3px 0 0 var(--lv-ink)}
.ls-line-say{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:#fff;color:var(--lv-ink);cursor:pointer}
.ls-line-say:hover,.ls-line-say[data-state]{background:var(--lv-ink);color:#fff}

/* the work column */
.ls-work{display:grid;gap:20px;min-width:0}
.ls-test-note{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--lv-soft);color:var(--lv-ink);font-weight:600;font-size:15px}

/* the player */
.ls-player{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;padding:20px;border:1px solid var(--line);border-radius:24px;background:#fff}
.ls-play{display:grid;place-items:center;width:76px;height:76px;border:0;border-radius:50%;background:var(--lv-btn);color:#fff;cursor:pointer;transition:transform .15s var(--ease-out)}
.ls-play .ls-i{width:34px;height:34px}
.ls-play:hover:not([disabled]){transform:scale(1.04)}
.ls-play:active:not([disabled]){transform:scale(.97)}
.ls-play[disabled]{background:var(--line-strong);cursor:not-allowed}
.ls-play-sm{width:56px;height:56px}
.ls-play-sm .ls-i{width:26px;height:26px}
.ls-play[data-state="playing"],.ls-play[data-state="loading"]{background:var(--lv-ink)}
.ls-player-main{display:grid;gap:10px;min-width:0}
.ls-player-status{color:var(--ink);font-weight:600;font-size:15px}
.ls-segs{display:flex;gap:4px}
.ls-segs li{flex:1;height:8px;border-radius:4px;background:var(--line)}
.ls-segs li.is-done{background:var(--lv-btn)}
.ls-segs li.is-now{background:var(--lv-btn);animation:ls-pulse 1.1s ease-in-out infinite}
@keyframes ls-pulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.ls-segs li.is-now{animation:none}}
.ls-player-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ls-ctl{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.ls-ctl:hover:not([disabled]){border-color:var(--lv-ink);color:var(--lv-ink)}
.ls-ctl[aria-pressed="true"],.ls-ctl[data-state]{border-color:var(--lv-ink);background:var(--lv-ink);color:#fff}
.ls-ctl[disabled]{opacity:.4;cursor:not-allowed}
.ls-ctl .tt-i{width:16px;height:16px}
.ls-plays{margin-left:auto;color:var(--muted);font-size:13px}

/* questions */
.ls-qs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ls-qs-head h3{font-size:1.3rem;letter-spacing:-.02em}
.ls-qs-count{color:var(--lv-ink);font-weight:700;font-size:14px;white-space:nowrap}
.ls-qs-lede{margin-top:4px!important;color:var(--muted);font-size:14px}
.ls-qs{display:grid;gap:14px;margin-top:14px!important}
.ls-q{padding:18px 20px 20px;border:1px solid var(--line);border-radius:22px;background:#fff}
.ls-q.is-answered{border-color:transparent;background:var(--surface)}
.ls-q-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ls-q-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lv-bg);color:var(--lv-ink);font:800 13px/1 var(--font-display)}
.ls-q-type{color:var(--lv-ink);font-size:13px;font-weight:700}
.ls-q-text{color:var(--ink);font:600 17px/1.4 var(--font-display);letter-spacing:-.005em}
.ls-opts{display:grid;gap:8px;margin-top:14px}
.ls-opts-tf{grid-template-columns:repeat(2,minmax(0,1fr))}
.ls-opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:16px;background:#fff;color:var(--ink);font-size:15px;font-weight:500;line-height:1.35;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.ls-opts-tf .ls-opt{justify-content:center;font-weight:700}
.ls-opt-l{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:var(--field);color:var(--ink-soft);font:700 13px/1 var(--font-display)}
@media (hover:hover) and (pointer:fine){.ls-opt:not([disabled]):hover{border-color:var(--lv-ink);background:var(--lv-soft)}}
.ls-opt.is-chosen{border-color:var(--lv-ink);background:var(--lv-ink);color:#fff}
.ls-opt.is-chosen .ls-opt-l{background:#fff;color:var(--lv-ink)}
.ls-opt[disabled]{cursor:default;opacity:.55}
.ls-opt.is-answer,.ls-opt.is-right{border-color:var(--ok);background:var(--ok);color:#fff;opacity:1}
.ls-opt.is-wrong{border-color:var(--bad);background:var(--bad);color:#fff;opacity:1}
.ls-opt.is-answer .ls-opt-l,.ls-opt.is-right .ls-opt-l,.ls-opt.is-wrong .ls-opt-l{background:#fff;color:var(--ink)}

/* feedback */
.ls-fb{display:grid;gap:6px;margin-top:12px;padding:14px 16px;border-radius:16px;color:#fff}
.ls-fb.is-right{background:var(--ok)}
.ls-fb.is-wrong{background:var(--bad)}
.ls-fb-h{display:flex;align-items:center;gap:8px;color:inherit;font:700 16px/1.3 var(--font-display)}
.ls-fb-h .tt-i{stroke-width:2.6}
.ls-fb-why{color:rgba(255,255,255,.94);font-size:15px}
.ls-fb-say{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:4px;padding:6px 12px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer}
.ls-fb.is-right .ls-fb-say{color:var(--ok)}
.ls-fb.is-wrong .ls-fb-say{color:var(--bad)}
.ls-fb-say[data-state]{box-shadow:inset 0 0 0 2px currentColor}

/* the dock */
.ls-s-dock{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:12px max(20px,calc((100% - 1240px) / 2 + 20px)) calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.ls-s-hint{margin-right:auto;color:var(--ink-soft);font-size:14px}
.ls-s-next{min-width:220px}

/* dictation */
.ls-dots{display:flex;gap:6px;margin-top:10px}
.ls-dots li{width:36px;height:8px;border-radius:4px;background:var(--line)}
.ls-dots li.is-done,.ls-dots li.is-now{background:var(--lv-btn)}
.ls-dcard{display:grid;gap:14px;margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:24px;background:#fff}
.ls-d-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ls-mask{display:flex;flex-wrap:wrap;gap:4px 12px;padding:12px 14px;border-radius:14px;background:var(--lv-soft);color:var(--lv-ink);font:600 18px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.ls-d-input{width:100%;min-height:96px;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:16px;background:#fff;color:var(--ink);font-size:18px;line-height:1.45;resize:vertical}
.ls-d-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-14)}
.ls-d-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.ls-link-btn{border:0;background:none;color:var(--purple);font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ls-d-res{overflow:hidden;border-radius:18px}
.ls-d-res .ls-fb-h{padding:12px 16px;color:#fff}
.ls-d-res.is-right{background:var(--ok)}
.ls-d-res.is-right .ls-d-score{padding:0 16px 14px;color:#fff}
.ls-d-res.is-wrong{box-shadow:inset 0 0 0 2px var(--bad)}
.ls-d-res.is-wrong .ls-fb-h{background:var(--bad)}
.ls-d-res.is-shown{box-shadow:inset 0 0 0 2px var(--lv-ink)}
.ls-d-res.is-shown .ls-fb-h{background:var(--lv-ink)}
.ls-diff{display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px 4px;font-size:17px;line-height:1.3}
.ls-w{display:inline-flex;flex-direction:column;align-items:flex-start;padding:4px 9px;border-radius:9px;font-weight:600}
.ls-w small{font-size:12px;font-weight:500;text-decoration:line-through;opacity:.85}
.ls-w.ok{background:var(--ok-bg);color:var(--ok)}
.ls-w.near{background:#fef3c7;color:#854d0e}
.ls-w.wrong{background:var(--bad-bg);color:var(--bad)}
.ls-w.miss{background:#fff;color:var(--bad);box-shadow:inset 0 0 0 2px var(--bad)}
.ls-w.extra{background:var(--field);color:var(--muted);text-decoration:line-through}
.ls-legend{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 0;font-size:12px}
.ls-legend .ls-w{padding:2px 8px;font-size:12px}
.ls-d-ref{padding:10px 16px 0;color:var(--ink);font-size:16px}
.ls-d-score{padding:8px 16px 14px;color:var(--ink-soft);font-size:14px}

/* the result */
.ls-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;padding:clamp(20px,3vw,28px);border-radius:26px;background:var(--lv-bg);color:var(--ink)}
.ls-res-k{color:var(--lv-ink);font-weight:700;font-size:15px}
.ls-res-big{margin:2px 0 6px!important;color:var(--ink);font:800 clamp(3.2rem,7vw,4.6rem)/1 var(--font-display);letter-spacing:-.04em}
.ls-res-verdict{color:var(--ink);font-weight:600}
.ls-res-parts{display:grid;gap:14px;margin:0}
.ls-res-parts div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 16px;border-radius:16px;background:#fff}
.ls-res-parts dt{color:var(--ink);font-weight:700}
.ls-res-parts dd{margin:0;color:var(--ink-soft);font-weight:600}
.ls-res-parts progress{grid-column:1/-1;width:100%;height:10px;border:0;border-radius:5px;background:var(--line);appearance:none;-webkit-appearance:none;overflow:hidden}
.ls-res-parts progress::-webkit-progress-bar{background:var(--line);border-radius:5px}
.ls-res-parts progress::-webkit-progress-value{background:var(--lv-btn);border-radius:5px}
.ls-res-parts progress::-moz-progress-bar{background:var(--lv-btn);border-radius:5px}
.ls-res-levels div{background:#fff}
.ls-next{display:grid;gap:14px;padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff}
.ls-next h3,.ls-phrases h3,.ls-review h3{font-size:1.25rem;letter-spacing:-.02em}
.ls-next-list{display:grid;gap:10px}
.ls-next-list li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--lv-soft);box-shadow:inset 3px 0 0 var(--lv-ink)}
.ls-next-list b{color:var(--ink)}
.ls-next-p{color:var(--ink)}
.ls-next-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:4px}
.ls-phrases ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px!important}
.ls-phrases li{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:16px}
.ls-phrases b{color:var(--ink)}
.ls-phrases span{font-size:14px}
.ls-review{display:grid;gap:10px}
.ls-rev{border:1px solid var(--line);border-radius:18px;background:#fff}
.ls-rev summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;color:var(--ink)}
.ls-rev summary::-webkit-details-marker{display:none}
.ls-rev summary .tt-i{width:18px;height:18px;transition:transform .2s}
.ls-rev[open] summary .tt-i{transform:rotate(180deg)}
.ls-rev-lv{padding:3px 10px;border-radius:999px;background:var(--lv-bg);color:var(--lv-ink);font-weight:800;font-size:13px}
.ls-rev ol{display:grid;gap:8px;padding:0 16px 16px}
.ls-rev li{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--ok-bg)}
.ls-rev li.is-wrong{background:var(--bad-bg)}
.ls-rev-q{color:var(--ink);font-weight:600}
.ls-rev-a{display:flex;align-items:flex-start;gap:6px;font-weight:600}
.ls-rev li.is-right .ls-rev-a{color:var(--ok)}
.ls-rev li.is-wrong .ls-rev-a{color:var(--bad)}
.ls-rev-a .tt-i{margin-top:2px;stroke-width:2.6}
.ls-rev-why{font-size:14px}
.ls-rev .ls-fb-say{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ls-scene-test .ls-scene-art{aspect-ratio:4/3}

/* session on tablets and phones */
@media (max-width:1023px){
  .ls-s-steps .ls-s-step-t{display:none}
  .ls-s-steps li{padding:4px}
  .ls-s-steps li.is-now .ls-s-step-t{display:inline;padding-right:8px}
  .ls-s-grid{grid-template-columns:1fr;gap:16px;padding-top:16px}
  .ls-scene{padding:14px;border-radius:22px;gap:12px}
  .ls-scene-top{grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px}
  .ls-scene-art{aspect-ratio:1;border-radius:14px}
  .ls-scene-title{font-size:1.25rem}
  .ls-scene-text{font-size:14px}
  .ls-scene-test .ls-scene-art{aspect-ratio:1}
  /* on a phone the transcript comes after the questions */
  .ls-s-grid{grid-template-rows:none;grid-template-areas:"scene" "work" "tr"}
  .ls-s-grid-test{grid-template-areas:"scene" "work"}
  .ls-tr{position:static;max-height:none}
  .ls-player{position:sticky;top:0;z-index:2;padding:14px;gap:14px;border-radius:20px;border-color:var(--line-strong)}
  .ls-play{width:60px;height:60px}
  .ls-play .ls-i{width:28px;height:28px}
}
@media (max-width:640px){
  .ls-s-bar{gap:10px;padding:8px 12px}
  .ls-s-back{width:40px;height:40px}
  .ls-s-title{font-size:16px}
  .ls-s-steps{gap:4px}
  .ls-s-steps li.is-now .ls-s-step-t{display:none}
  .ls-s-step-n{width:24px;height:24px;font-size:12px}
  .ls-s-grid{padding:12px 12px 24px}
  .ls-people li{font-size:12px}
  .ls-tr{padding:12px}
  .ls-q{padding:16px}
  .ls-q-text{font-size:16px}
  .ls-opt{min-height:48px;padding:8px 12px}
  .ls-ctl{min-height:36px;padding:0 12px;font-size:13px}
  .ls-plays{display:none}
  .ls-s-dock{flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .ls-s-hint{margin:0;font-size:13px;text-align:center}
  .ls-s-next{min-width:0;width:100%}
  .ls-res{grid-template-columns:1fr;gap:16px}
  .ls-phrases ul{grid-template-columns:1fr}
  .ls-dcard{padding:16px}
  .ls-d-input{font-size:17px}
  .ls-rev summary{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .ls-rev summary>span:nth-of-type(2){display:none}
}

/* Narrower, quieter hero tool (owner review, 22 Oct) */
.ls-hero .tt-hero2-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ls-lvcard span{display:none}
.ls-feature{grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.ls-feature-art{min-height:0;height:150px;max-height:none}
.ls-feature-title{font-size:1.35rem}
.ls-more summary{justify-content:center;gap:8px;margin-top:4px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);font-weight:700}
.ls-more summary:hover{border-color:var(--ink)}
.ls-pick-list{grid-template-columns:1fr}
@media (max-width:1023px){.ls-hero .tt-hero2-grid{grid-template-columns:1fr}}
@media (max-width:640px){.ls-feature{grid-template-columns:96px minmax(0,1fr)}.ls-feature-art{height:96px}}

/* Minimal scene card: the whole picture, title, who speaks; stays in view (owner review, 23 Oct) */
.ls-s-grid-min,.ls-s-grid-test{grid-template-rows:auto;grid-template-areas:"scene work"}
.ls-scene-min{position:sticky;top:clamp(20px,3vw,32px);align-self:start;gap:14px;padding:14px;border-radius:24px}
.ls-scene-min .ls-scene-art{width:100%;height:auto;aspect-ratio:auto;max-height:calc(100dvh - 330px);object-fit:contain;border-radius:16px;background:#fff}
.ls-scene-min .ls-scene-head{padding:0 6px 6px}
.ls-scene-min .ls-scene-title{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.ls-scene-who{margin-top:6px!important;color:var(--lv-ink);font-size:14px;font-weight:600}
.ls-scene-test .ls-scene-top{display:contents}
@media (max-width:1023px){
  .ls-s-grid-min,.ls-s-grid-test{grid-template-areas:"scene" "work"}
  .ls-scene-min{position:static;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;padding:10px}
  .ls-scene-min .ls-scene-art{max-height:120px;border-radius:12px}
  .ls-scene-min .ls-scene-head{padding:0}
}
/* The picture fills the card at its own shape: no white bars (owner review, 23 Oct) */
@media (min-width:1024px){
  .ls-s-grid-min,.ls-s-grid-test{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .ls-scene-min .ls-scene-art{max-height:none;object-fit:cover;background:none}
}

/* Result: one calm card with a score ring, then the Slova card (owner review, 23 Oct) */
.ls-res2{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;padding:24px 28px;border-radius:26px;background:var(--lv-bg);color:var(--ink)}
.ls-ring{position:relative;display:grid;place-items:center;width:132px;height:132px}
.ls-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ls-ring-track{fill:none;stroke:#fff;stroke-width:12}
.ls-ring-bar{fill:none;stroke:var(--lv-btn);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.ls-ring-bar{transition:none}}
.ls-ring-label{position:absolute;color:var(--ink);font:800 1.9rem/1 var(--font-display);letter-spacing:-.03em}
.ls-res2-verdict{margin-top:4px!important;color:var(--ink);font:700 1.25rem/1.3 var(--font-display);letter-spacing:-.01em}
.ls-res2-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px!important}
.ls-res2-stats li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink-soft);font-size:14px}
.ls-res2-stats b{color:var(--ink)}
.ls-res2-stats .tt-i{color:var(--lv-ink)}
@media (max-width:640px){.ls-res2{grid-template-columns:1fr;justify-items:center;text-align:center;padding:20px}.ls-res2-stats{justify-content:center}}

/* Sticky Slova bar across a result, the blog promo style (owner review, 23 Oct) */
.ls-top-bar{position:sticky;top:0;z-index:20;isolation:isolate;overflow:hidden;border-bottom:1px solid #e6dcfb;background:var(--tint)}
.ls-top-rays{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.ls-top-in{display:flex;align-items:center;gap:12px 24px;width:min(1240px,100%);margin:0 auto;padding:14px max(20px,env(safe-area-inset-left,0px))}
.ls-top-fan{position:relative;flex:none;width:118px;height:76px}
.ls-top-fan img{position:absolute;top:8px;width:44px;height:60px;border:3px solid #fff;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px var(--line);transform:rotate(-9deg)}
.ls-top-fan img:nth-child(1){left:0}
.ls-top-fan img:nth-child(2){left:36px;top:2px;z-index:2;width:48px;height:66px;transform:none}
.ls-top-fan img:nth-child(3){left:74px;transform:rotate(9deg)}
.ls-top-in p{flex:1;min-width:0;display:grid;gap:3px}
.ls-top-brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font:700 13.5px/1 var(--font-display)}
.ls-top-brand img{border-radius:5px;background:#fff}
.ls-top-in b{color:var(--ink);font:750 clamp(18px,1.8vw,22px)/1.2 var(--font-display);letter-spacing:-.025em}
.ls-top-note{color:var(--ink-soft);font-size:13.5px}
.ls-top-go{flex:none}
@media (max-width:640px){
  .ls-top-in{padding:10px 16px;gap:12px}
  .ls-top-in p{display:none}
  .ls-top-fan{width:78px;height:50px}
  .ls-top-fan img{top:6px;width:30px;height:40px;border-width:2px;border-radius:7px}
  .ls-top-fan img:nth-child(2){left:24px;top:2px;width:32px;height:44px}
  .ls-top-fan img:nth-child(3){left:48px}
  .ls-top-go{flex:1;min-height:44px;padding:0 16px;font-size:15px}
}
/* Calmer result colours: warm grey cards, ink text, one purple accent */
.ls-s-body:has(.ls-top-bar) .ls-scene-min{background:#f4f2ee}
.ls-s-body:has(.ls-top-bar) .ls-scene-kind,.ls-s-body:has(.ls-top-bar) .ls-scene-who{color:var(--ink-soft)}
.ls-res2{background:#f4f2ee}
.ls-ring-bar{stroke:var(--purple)}
.ls-res-k{color:var(--ink-soft)}
.ls-res2-stats .tt-i{color:var(--purple)}
.ls-next-list li{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ls-next-list li b{color:var(--ink)}
.ls-screen:has(.ls-top-bar) .ls-s-steps li.is-now{background:var(--ink)}.ls-screen:has(.ls-top-bar) .ls-s-steps li.is-now .ls-s-step-n{color:var(--ink)}