@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Serif+Display:ital@0;1&display=swap");
/* Learn Brands course kit, styles v1. Shared by every course built from course.json.
   Layout: single column, max 1100px. Each lesson stacks its media (video or animated scenes), then "Put it to work"
   (activity + role line side by side at 860px and up). Lesson colors mark the lessons; the accent is reserved for actions.
   Colors come from the course theme (kit.js sets the variables on :root); the defaults are the navy Learn Brands theme. */
:root{
  color-scheme:dark;
  --bg:#0A0147;
  --bg-deep:#06002f;
  --panel:#130a5a;
  --panel-2:#1c1468;
  --violet:#272075;
  --line:#2f2884;
  --cream:#F5EEDC;
  --muted:#bdb6d3;
  --dim:#8e87ad;
  --mint:#20C9A0;
  --mint-ink:#04261e;
  --tagline:#F2A3B1; --note-line:#E66C8B; --note-bg:rgba(130,21,59,.18);
  --glow-1:rgba(39,32,117,.9); --glow-2:rgba(130,21,59,.35);
  --good:#7fe3b8; --good-bg:#103f3d;
  --bad:#ffb27a; --bad-bg:#3b2246;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --f-head:var(--f-body);
  --paper:var(--cream); --paper-ink:var(--bg);   /* the bold look's light cards: the text color as paper, the page color as ink */
  --r:18px; --r-sm:12px;
  --shadow:0 24px 50px -28px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);background-image:radial-gradient(80% 50% at 85% -10%,var(--glow-1),transparent 70%),radial-gradient(60% 40% at -10% 110%,var(--glow-2),transparent 70%);background-attachment:fixed;color:var(--cream);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}
button{font:inherit;color:inherit}
p,h1,h2,h3,h4,ol,ul{margin:0}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:8px}
a{color:var(--mint)}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:14px;padding-block:12px}
.top .mark{width:26px;flex:none}
.top-title{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.top-title b{font-weight:700;font-size:1rem;white-space:nowrap}
.top-title > span{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;background:none;border:0;padding:8px 6px;margin-block:-8px;margin-right:-6px;border-radius:10px;cursor:pointer}
/* the progress bar opens the course map */
.steps:hover{background:color-mix(in srgb,var(--cream) 7%,transparent)}
@media (max-width:1140px){.lb-player-fs .steps{margin-right:44px}} /* room for the Learn Brands player's full screen button */
.step{width:30px;height:8px;border-radius:4px;background:var(--line);position:relative}
.step.done{background:var(--tone)}
.step.now{background:var(--tone);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--tone)}
.step.qstep{width:18px;background:var(--line)}
.step.qstep.done,.step.qstep.now{background:var(--mint)}
@media (max-width:520px){.step{width:18px}.top-title > span{display:none}}
/* a course with many lessons: on a phone the steps narrow so the title keeps room for a word or two */
@media (max-width:520px){.steps{flex:0 1 auto;min-width:0}.step{flex:0 1 auto;min-width:5px}.top-title{min-width:88px}}
/* a long course title gives way to the progress steps instead of running under them */
.top-title b{overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.top-title b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15;text-wrap:balance}}
/* the kit moves focus to each new screen's heading for screen readers; a heading isn't a control, so no focus ring */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}

/* Stage */
main{padding-block:22px 10px}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--tone,var(--mint));color:var(--tone-ink,var(--mint-ink));font-weight:700;letter-spacing:.08em}
h1,h2{font-family:var(--f-head);font-weight:800;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.sc-big,.sc-head,.sc-num,.sc-cap{font-family:var(--f-head)}
/* theme.flow: the page's color glows drift slowly behind everything (off for reduced motion) */
.bg-flow body{background-image:none;background-color:transparent}
.bg-flow body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(48% 44% at 72% 22%,var(--glow-1),transparent 72%),radial-gradient(46% 50% at 22% 78%,var(--glow-2),transparent 72%),radial-gradient(36% 36% at 88% 88%,var(--glow-1),transparent 74%),radial-gradient(34% 34% at 12% 14%,var(--glow-2),transparent 74%);animation:bgFlow 40s ease-in-out infinite alternate;will-change:transform}
@keyframes bgFlow{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}33%{transform:translate3d(-7%,5%,0) rotate(9deg) scale(1.06)}66%{transform:translate3d(6%,-4%,0) rotate(-7deg) scale(.97)}100%{transform:translate3d(-3%,-6%,0) rotate(4deg) scale(1.04)}}
.head-upper h1,.head-upper h2,.head-upper .sc-big,.head-upper .sc-head,.head-upper .sc-cap{text-transform:uppercase;letter-spacing:0}
.head-lower h1,.head-lower h2,.head-lower .sc-big,.head-lower .sc-head,.head-lower .sc-cap{text-transform:lowercase}
h2{font-size:clamp(2.3rem,1.5rem + 3.6vw,4rem);margin-top:12px}
h2:focus{outline:none}
.lede{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);color:var(--muted);max-width:56ch;margin-top:10px}
.serif{font-family:var(--f-serif);font-weight:400;letter-spacing:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fine{font-size:.88rem;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;border:1.5px solid var(--line);background:transparent;cursor:pointer;font-weight:700;font-size:1rem;transition:transform .12s,filter .2s,border-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover:not(:disabled):not(.waiting){border-color:var(--cream)}
.btn:active:not(:disabled):not(.waiting){transform:translateY(1px)}
.btn.go{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.btn.go:hover:not(:disabled):not(.waiting){filter:brightness(1.08);border-color:var(--mint)}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* waiting on something: looks off, but pressing it shows what's left */
.btn.waiting{opacity:.35}
.look-bold .btn.waiting{opacity:.62}
.btn.sm{min-height:40px;padding:0 16px;font-size:.92rem}

/* Glass mark */
.mark .glass-line{fill:none;stroke:var(--cream);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* Cover */
.cover{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(10px,3vw,30px)}
@media (min-width:860px){.cover{grid-template-columns:7fr 4fr}}
.cover h1{font-size:clamp(3rem,1.8rem + 6vw,6rem);margin-top:14px;overflow-wrap:break-word;hyphens:manual}
.cover > *{min-width:0}   /* a long word in the title can't push the page wider than a phone */
@media (max-width:520px){.look-bold .cover h1{font-size:clamp(2.2rem,9.5vw,3.2rem)}}
.cover h1.t-l{font-size:clamp(2.6rem,1.6rem + 4.4vw,4.6rem)}
.cover h1.t-xl{font-size:clamp(2.3rem,1.4rem + 3.4vw,3.8rem)}
@media (max-height:820px){.cover h1.t-l{font-size:clamp(2.2rem,1.4rem + 2.8vw,3.4rem)}.cover h1.t-xl{font-size:clamp(2rem,1.3rem + 2.2vw,3rem)}}
@media (max-width:520px){.look-bold .cover h1.t-l{font-size:clamp(2rem,8.5vw,2.8rem)}.look-bold .cover h1.t-xl{font-size:clamp(1.9rem,7.5vw,2.5rem)}}
.tagline{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);color:var(--tagline);margin-top:10px}
.cover .lede{margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.84rem;color:var(--muted);font-weight:600}
.roles{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.role-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.role{text-align:left;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--panel);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.role b{font-weight:700}
.role span{font-size:.86rem;color:var(--muted)}
.role[aria-pressed="true"]{border-color:var(--mint);background:var(--panel-2)}
/* bold look: the picked role fills like a picked rating, with a check */
.look-bold .role{position:relative;transition:background-color .15s,border-color .15s,color .15s}
.look-bold .role:hover:not([aria-pressed="true"]){border-color:var(--cream)}
.look-bold .role[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);padding-right:40px}
.look-bold .role[aria-pressed="true"] span{color:var(--mint-ink);opacity:.82}
.look-bold .role[aria-pressed="true"]::after{content:"";position:absolute;top:12px;right:12px;width:20px;height:20px;background:var(--mint-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:600px){.role-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.look-bold .tagline{font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem)}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.start-hint{flex-basis:100%;margin:0}
.who-card{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:30;width:min(560px,calc(100% - 24px));padding:18px 20px 16px;transform:translate(-50%,24px);opacity:0;transition:transform .3s ease,opacity .3s ease;box-shadow:0 18px 50px rgb(0 0 0/.28)}
.who-card.in{transform:translate(-50%,0);opacity:1}
.who-card p,.who-inline p{margin:4px 0 12px;font-size:.9rem;line-height:1.45;color:var(--muted);padding-right:28px}
.who-h{display:block;font-size:1.02rem}
.who-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.who-x:hover{background:color-mix(in srgb,var(--muted) 14%,transparent)}
.who-row{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.who-row input{min-width:0;font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:inherit}
.who-row input:focus{outline:2px solid var(--mint);outline-offset:1px}
.who-roles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:.85rem}
.who-roles>span{color:var(--muted);margin-right:2px}
.who-chip{font:inherit;font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:none;color:inherit;cursor:pointer}
.who-chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--bg)}
.who-go{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.who-go .btn{padding-block:9px}
.who-msg{font-size:.85rem;color:var(--bad,#c0392b)}
.who-inline{margin-top:18px;padding:16px 18px}
.who-done{margin:0;font-weight:600}
@media (max-width:560px){.who-row{grid-template-columns:1fr 1fr}.who-row input[name=email]{grid-column:1/-1}.who-card{bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:16px}}
@media (prefers-reduced-motion:reduce){.who-card{transition:none}}
.optin{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;cursor:pointer;font-size:.92rem;line-height:1.45}
.optin input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--mint)}
.optin b{display:block;margin-bottom:2px}
.optin span span{color:var(--muted)}
.roleline.veiled{position:relative}
.roleline.veiled > :not(.veil-note){filter:blur(7px);opacity:.55;user-select:none;pointer-events:none}
.roleline .veil-note{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;padding:18px;font-weight:700;font-size:.95rem}
.cover-cta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.glass-wrap{justify-self:center;width:min(300px,70vw);position:relative}
.glass-wrap svg{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.legend{list-style:none;padding:0;margin-top:18px;display:grid;gap:6px}
.legend li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;font-size:.92rem}
.legend i{width:14px;height:14px;border-radius:4px;background:var(--tone)}
.legend span:last-child{color:var(--dim);font-variant-numeric:tabular-nums;font-size:.84rem}
@media (max-width:859px){.glass-wrap{order:-1;width:min(180px,50vw)}.legend{display:none}}
/* lessons with pictures show one beside their name; a photo cover runs full width on narrow screens */
.legend.has-th li{grid-template-columns:52px 1fr auto}
.legend.has-th i{width:52px;height:34px;border-radius:7px;background:var(--panel);border-left:4px solid var(--tone)}
.legend.has-th i.th{background:var(--panel) center/cover no-repeat}
.legend.has-th li:not(.tot) i:not(.th){background:var(--tone);opacity:.85}
.legend.has-th li.tot i{border:0;background:none}
@media (max-width:859px){.glass-wrap.photo{width:100%}.glass-wrap.photo .cover-art{aspect-ratio:16/9;object-fit:cover;max-height:300px}}

/* Lesson */
.lesson-head{display:grid;gap:6px}
.player{margin-top:clamp(20px,3vw,30px);position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;width:min(100%,max(320px,calc((100vh - 370px) * 16 / 9)));max-width:100%;box-shadow:var(--shadow);border:1px solid var(--line)}
.player video{width:100%;height:100%;display:block;background:#000}
.poster{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:#000 center/cover no-repeat;display:grid;place-items:center}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent) 40%,color-mix(in srgb,var(--bg) 70%,transparent))}
.play{position:relative;z-index:1;width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);border-radius:50%;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.poster:hover .play{transform:scale(1.06)}
.play svg{width:40%;height:40%;margin-left:6%}
.poster .dur{position:absolute;z-index:1;left:16px;bottom:14px;font-weight:700;font-size:.9rem;background:color-mix(in srgb,var(--bg) 75%,transparent);padding:4px 10px;border-radius:999px}
.vid-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:var(--bg-deep)}
.watch{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
.meter{flex:1;min-width:140px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--tone);transition:width .4s}
.watch b{color:var(--cream);font-variant-numeric:tabular-nums}
.watch .ok{color:var(--good);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.watch .ok svg{width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);width:max-content;background:var(--paper);color:var(--paper-ink);padding:10px 16px;border-radius:999px;font-weight:600;font-size:.92rem;z-index:20;box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center}
.toast.has-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;border-radius:18px;padding:10px 10px 10px 16px;text-align:left;bottom:120px;max-width:min(560px,calc(100% - 32px))}
.toast-act{font:inherit;font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:999px;border:0;background:var(--bg);color:var(--cream);cursor:pointer;white-space:nowrap}
.toast-act:hover{filter:brightness(1.25)}
.toast span{text-wrap:balance}
/* what's left, outlined for a moment when Continue is pressed too soon */
.lb-here{outline:3px solid var(--mint);outline-offset:4px}

/* Put it to work */
.ptw{margin-top:clamp(28px,4vw,44px);position:relative}
.ptw-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ptw-head h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.01em}
.three{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));counter-reset:t}
.three li{counter-increment:t;padding:16px 18px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--tone);font-weight:600;line-height:1.4;display:flex;gap:10px}
.three li::before{content:counter(t);font-family:var(--f-serif);font-size:1.5rem;line-height:1;color:var(--tone)}
.three .tk{display:grid;gap:4px;align-content:start}
.three .tk span{font-weight:500;color:var(--muted)}
.work{display:grid;gap:16px;margin-top:16px;align-items:start}
@media (min-width:860px){.work{grid-template-columns:7fr 5fr}}
/* a game gets the whole row (the role line goes under it), so the stage has room on computers */
@media (min-width:860px){.work:has(> .act.is-game),.work:has(> .act.is-exam){grid-template-columns:1fr;width:100%;max-width:900px;margin-inline:auto}}
.work>*{min-width:0}
.act{padding:clamp(18px,2.6vw,26px)}
.act h4{font-size:1.25rem;font-weight:800;margin-top:6px}
.act .q{color:var(--muted);margin-top:6px}
.locked{position:relative}
.locked .work,.locked .three,.locked .fbl{filter:blur(6px);opacity:.35;pointer-events:none;user-select:none}
.lock-note{position:absolute;inset:60px 0 auto;display:flex;justify-content:center;z-index:2}
.lock-note span{display:inline-flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);padding:12px 18px;border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
.lock-note svg{width:18px;height:18px}

/* Sort rows */
.sort{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.srow{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:grid;gap:10px;background:var(--bg-deep)}
@media (min-width:600px){.srow{grid-template-columns:1fr auto;align-items:center}}
.srow .st{font-weight:600}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;justify-self:start}
.seg button{border:0;background:transparent;padding:0 16px;min-height:40px;font-weight:700;font-size:.9rem;cursor:pointer;min-width:84px}
.seg button+button{border-left:1.5px solid var(--line)}
.seg button:hover:not(:disabled){background:var(--panel-2)}
.seg button:disabled{cursor:default;color:var(--dim)}
.seg button.right{background:var(--good);color:var(--mint-ink)}
.seg button.wrong{background:var(--bad);color:#2a1300}
.srow .why{grid-column:1/-1;font-size:.92rem;color:var(--muted)}
.srow.ok{border-color:rgba(127,227,184,.55)}
.srow.miss{border-color:rgba(255,178,122,.55)}
/* Sort, bold look: a tap picks (changeable), Check my answers grades every row. Phones get full-width answer buttons. */
.seg button.on{background:var(--cream);color:var(--bg)}
.seg button.on:hover{background:var(--cream)}
.sort-pick .srow.picked{border-color:var(--cream)}
.sort-check{margin-top:14px}
.sort-check + .tally{margin-top:8px}
@media (max-width:599px){
  .look-bold .sort .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;justify-self:stretch}
  .look-bold .sort .seg button{min-height:48px;font-size:1rem;padding:0 10px;min-width:0}
  .look-bold .sort-check{width:100%}
}
.tally{font-size:.86rem;color:var(--muted);margin-top:12px;font-weight:600}
/* a scenario picture with a question: beside it on wide screens, above it on phones, a strip on short windows */
.act-pic{display:block;aspect-ratio:16/8;border-radius:12px;background:var(--panel-2) center/cover no-repeat;margin:-4px 0 14px}
@media (min-width:760px) and (min-height:501px){
  .act.has-pic{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:26px;align-content:start}
  .act.has-pic > *{grid-column:2}
  .act.has-pic > .act-pic{grid-column:1;grid-row:1 / span 12;aspect-ratio:auto;min-height:260px;height:100%;margin:0}
}
@media (max-height:500px){.act-pic{aspect-ratio:auto;height:84px;margin-bottom:10px}}
.chipgrid .sort{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* Bottles */
.bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.rk-how{margin-top:6px;font-size:.88rem;font-weight:600;color:var(--muted)}
.rank{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.rk{position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg-deep);padding:10px 10px 10px 4px;transition:transform .18s ease,border-color .2s,box-shadow .2s;user-select:none;-webkit-user-select:none}
.rank.done .rk{padding-left:12px}
.rk-grip{flex:none;width:28px;align-self:stretch;margin:-10px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:grab;touch-action:none;color:var(--muted);opacity:.8}
.rk-grip i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:6px 0 0 currentColor;margin-right:6px}
.rk-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--mint-ink);font-weight:800;font-size:.9rem;display:grid;place-items:center}
.rk-n svg{width:16px;height:16px}
.rk.wrong .rk-n{background:var(--bad);color:#fff}.rk.right .rk-n{background:var(--good);color:#fff}
.rk-ic{flex:none;display:grid;place-items:center}.rk-ic svg{width:26px;height:auto;max-height:34px}
.rk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rk-t b{font-weight:700;line-height:1.25}.rk-t small{color:var(--muted);font-size:.86rem;line-height:1.3}
.rk-mv{flex:none;display:flex;gap:6px}
.rk-mv button{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.rk-mv button svg{width:18px;height:18px}
.rk-mv button:hover:not(:disabled){border-color:var(--mint)}
.rk-mv button:disabled{opacity:.25;cursor:default}
.rk.drag{z-index:3;transition:border-color .2s,box-shadow .2s;border-color:var(--mint);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.rk.drag .rk-grip{cursor:grabbing}
.rk.right{border-color:var(--good)}.rk.wrong{border-color:var(--bad)}
.rk-fix{flex:none;font-size:.8rem;font-weight:800;color:var(--bad);white-space:nowrap}
.rk.moved{animation:rkflash .6s ease}
@keyframes rkflash{from{border-color:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 35%,transparent)}}
.rk-check{margin-top:14px}
@media (max-width:520px){.rk{gap:10px}.rk-ic{display:none}.rk-mv button{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.rk,.rk.moved{transition:none;animation:none}}
.bottle{position:relative;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg-deep);padding:14px 8px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.bottle svg{width:42px;height:auto}
.bottle .bn{font-weight:700;font-size:.92rem;line-height:1.2}
.bottle .abv{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bottle .ord{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--mint);color:var(--mint-ink);font-weight:800;font-size:.85rem;display:grid;place-items:center}
.bottle[aria-pressed="true"]{border-color:var(--mint)}
.bottle:disabled{cursor:default}
.bottle.right{border-color:var(--good)}
.bottle.wrong{border-color:var(--bad)}
.fb{margin-top:14px;border-radius:var(--r-sm);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.fb svg{width:22px;height:22px;flex:none;margin-top:1px}
.fb.good{background:var(--good-bg)}
.fb.good svg{color:var(--good)}
.fb.bad{background:var(--bad-bg)}
.fb.bad svg{color:var(--bad)}
.fb b{font-weight:700}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:13px 15px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg-deep);cursor:pointer;font-size:1rem;line-height:1.4}
.opt:hover:not(:disabled){border-color:var(--cream)}
.opt:disabled{cursor:default}
.opt .k{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.84rem;background:var(--panel-2);color:var(--muted)}
.opt.is-right{border-color:var(--good);background:var(--good-bg)}
.opt.is-right .k{background:var(--good);color:var(--mint-ink)}
.opt.is-wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.is-wrong .k{background:var(--bad);color:#2a1300}
.opt.is-dim{opacity:.5}

/* Role line */
.roleline{padding:clamp(18px,2.6vw,26px);background:linear-gradient(160deg,var(--panel-2),var(--panel));display:flex;flex-direction:column;gap:14px}
.rtabs{display:flex;flex-wrap:wrap;gap:6px}
.rtab{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:.82rem;font-weight:700;color:var(--muted)}
.rtab[aria-selected="true"]{background:var(--paper);color:var(--paper-ink);border-color:var(--paper)}
.quote{font-family:var(--f-serif);font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);line-height:1.3}
.quote.plain{font-family:var(--f-body);font-size:1.08rem;line-height:1.5}
.limits{margin-top:16px;padding:18px 20px;border-radius:var(--r-sm);border:1.5px dashed var(--note-line);background:var(--note-bg)}
.limits h4{font-size:1.1rem;font-weight:800;margin-bottom:8px}
.limits p+p{margin-top:8px}

/* Quiz */
.quiz{margin-top:clamp(20px,3vw,32px);padding:clamp(20px,3vw,34px)}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.qdots{display:flex;gap:6px;min-width:0;max-width:100%}
.qdots i{width:26px;flex:0 1 26px;min-width:4px;height:6px;border-radius:3px;background:var(--line)}
.qdots i.on{background:var(--cream)}
.qdots i.r{background:var(--good)}
.qdots i.w{background:var(--bad)}
.qtext{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);font-weight:800;line-height:1.2;margin-top:16px;max-width:36ch;text-wrap:balance}
.score{display:grid;gap:24px;align-items:center}
@media (min-width:720px){.score{grid-template-columns:auto 1fr}}
.ring{width:160px;height:160px}
.ring .bg{fill:none;stroke:var(--line);stroke-width:14}
.ring .fg{fill:none;stroke-width:14;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.ring .pass{stroke:var(--good)}
.ring .fail{stroke:var(--bad)}
.ring text{fill:var(--cream);font-family:var(--f-body);font-weight:800;font-size:34px}
.ring .sub{font-size:12px;font-weight:600;fill:var(--muted);letter-spacing:.1em}
/* Skip-ahead check: the lessons it covers, then which ones the learner can skip */
.ring .pre-n{stroke:var(--mint)}
/* practice exams (type "exam"): a drawn set graded at the end, with a clock, results by topic and answers to review */
.ex-facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ex-facts li{padding:5px 12px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:.88rem;color:var(--muted)}
.ex-mode{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:16px;padding:4px;border-radius:12px;background:var(--bg-deep);border:1.5px solid var(--line)}
.ex-mode button{padding:9px 14px;border-radius:9px;font-weight:700;font-size:.92rem;color:var(--muted);background:none;border:0;cursor:pointer}
.ex-mode button.on{background:var(--cream);color:var(--bg)}
.ex-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ex-resume{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);background:var(--bg-deep);border:1.5px solid var(--line)}
.ex-resume .ex-btns{margin-top:10px}
.ex-hist{margin-top:20px}
.ex-hist ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ex-hist li{display:grid;grid-template-columns:70px 56px 1fr;gap:10px;align-items:baseline;font-size:.94rem;color:var(--muted)}
.ex-hist b{font-weight:800;color:var(--cream)}
.ex-hist b.ok{color:var(--good)}
.ex-top{margin-top:14px}
.ex-clock{font-weight:800;font-variant-numeric:tabular-nums;padding:4px 12px;border-radius:999px;background:var(--bg-deep);border:1.5px solid var(--line)}
.ex-clock.low{border-color:var(--bad);color:var(--bad)}
.ex-grid{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.ex-grid button{min-width:30px;height:30px;padding:0 4px;border-radius:7px;border:1.5px solid var(--line);background:none;color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.ex-grid button.a{background:var(--panel-2);color:var(--cream)}
.ex-grid button.r{background:var(--good-bg);border-color:var(--good);color:var(--cream)}
.ex-grid button.w{background:var(--bad-bg);border-color:var(--bad);color:var(--cream)}
.ex-grid button.on{border-color:var(--cream);color:var(--cream);box-shadow:0 0 0 2px var(--cream) inset}
.opt.is-picked{border-color:var(--cream);background:var(--panel-2)}
.opt.is-picked .k{background:var(--cream);color:var(--bg)}
.ex-nav{justify-content:flex-end}
.ex-nav [data-ex=prev]{margin-right:auto}
.ex-nav .btn svg{width:18px;height:18px}
.ex-count{text-align:right;margin-top:8px}
.ex-score{margin-top:16px}
@media (min-width:640px){.ex-score{grid-template-columns:auto 1fr}}
.ex-topics{margin-top:22px;display:grid;gap:9px}
.ex-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto;gap:12px;align-items:center;font-size:.95rem}
.ex-tn{font-weight:700;min-width:0;overflow-wrap:anywhere}
.ex-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.ex-bar i{display:block;height:100%;border-radius:4px;background:var(--good)}
.ex-row.low .ex-bar i{background:var(--bad)}
.ex-tv{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.ex-next{margin-top:20px}
.ex-next .ex-btns{margin-top:8px}
.ex-review{margin-top:20px;border-top:1.5px solid var(--line);padding-top:14px}
.ex-review summary{cursor:pointer;font-weight:800}
.ex-review ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:16px}
.ex-rq{font-weight:600}
.ex-ra{display:flex;gap:8px;align-items:flex-start;margin-top:6px;font-size:.94rem}
.ex-ra svg{width:18px;height:18px;flex:none;margin-top:2px}
.ex-ra.ok svg{color:var(--good)}
.ex-ra.no svg{color:var(--bad)}
.ex-why{margin-top:6px;color:var(--muted);font-size:.94rem}
@media (max-width:600px){.ex-row{grid-template-columns:1fr auto}.ex-bar{grid-column:1 / -1;grid-row:2}.ex-grid button{min-width:28px;height:28px}}
.pre-note{flex-basis:100%;margin:0;color:var(--muted)}
.pre-ls{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.pre-ls li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-sm);background:var(--panel-2);border-left:5px solid var(--tone)}
.pre-ls li > i{display:none}
.pre-ls li > span{flex:1 1 220px;font-weight:700}
.pre-ls li > b{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;color:var(--muted)}
.pre-ls li > b.ok{color:var(--good)}
.pre-ls li > b svg{width:16px;height:16px}
.pre-res{margin-top:22px}
.pre-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.pre-cta .pre-back{margin:0 0 0 auto}
.look-bold .pre-ls li{background:var(--paper);color:var(--paper-ink);box-shadow:0 16px 30px -22px rgba(0,0,0,.8)}
.look-bold .pre-ls li > b{color:color-mix(in srgb,var(--paper-ink) 72%,transparent)}
.look-bold .pre-ls li > b.ok{color:var(--paper-ink);font-weight:800}

/* Finish */
.finish{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:860px){.finish{grid-template-columns:4fr 7fr}}
.recap{list-style:none;padding:0;display:grid;gap:8px;margin-top:20px}
.recap li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:12px 16px;border-radius:var(--r-sm);background:var(--panel);border-left:5px solid var(--tone)}
.recap b{font-weight:800}
.recap span{color:var(--muted)}
.recap.has-th li{grid-template-columns:64px 1fr;grid-template-areas:"th b" "th s";gap:2px 14px;align-items:start}
.recap.has-th i{grid-area:th;width:64px;height:44px;border-radius:8px;background:var(--bg-deep) center/cover no-repeat}
.recap.has-th b{grid-area:b}
.recap.has-th span{grid-area:s}
.next{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Controls */
.controls{position:sticky;bottom:0;z-index:9;padding-block:10px calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.controls-in{display:flex;align-items:center;gap:12px}
.controls .hint{flex:1;min-width:0;font-size:.9rem;color:var(--muted);text-align:right}
@media (max-width:560px){.controls .hint{display:none}.controls .btn.go{flex:1}}
.btn.back .lbl{display:none}
@media (min-width:640px){.btn.back .lbl{display:inline}}
footer{padding-block:18px 28px;font-size:.8rem;color:var(--dim)}
/* Short boxes, such as a course embedded in a Learn Brands page: tighter headings, and on lesson
   steps the video sits beside the title, sized to the box, so the whole video and Continue stay in view.
   Taller boxes keep the video under the title, capped so it still fits above Continue. */
@media (max-height:820px){
  main{padding-block:16px 10px}
  h2{font-size:clamp(1.9rem,1.2rem + 2vw,2.8rem);margin-top:8px}
  .lede{font-size:1.02rem;margin-top:6px}
  .cover{padding-block:4px}
  .cover h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem)}
  .quiz{margin-top:16px}
  .opts{gap:6px;margin-top:10px}
  .opt{padding:10px 14px}
}
@media (min-width:900px) and (max-height:820px){
  .lesson{display:grid;grid-template-columns:minmax(240px,1fr) auto;grid-template-areas:"head player" "watch player" "ptw ptw";column-gap:clamp(20px,2.6vw,32px)}
  .lesson-head{grid-area:head;align-self:end}
  .lesson-head h2{font-size:clamp(1.9rem,1.1rem + 1.8vw,2.6rem)}
  .lesson .watch{grid-area:watch;align-self:start;margin-top:14px}
  .lesson .player{grid-area:player;margin-top:0;width:auto;height:min(calc(100vh - 170px),calc((min(100vw,1100px) - 56px - 340px) * 9 / 16))}
  .lesson .ptw{grid-area:ptw}
}
.ptw{scroll-margin-top:76px}
#qnext{scroll-margin-bottom:96px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* ---------- Kit additions (not in the original hand-built course) ---------- */
.top .mark.logo{width:auto;height:30px;max-width:120px;object-fit:contain}
.cover-art{width:100%;height:auto;border-radius:var(--r);display:block}
@media (min-width:860px){.work.single{grid-template-columns:1fr}}
.bottle.noicon{padding-top:18px}
.lesson.textonly .ptw{margin-top:clamp(20px,3vw,30px)}
.kit-msg{padding-block:80px}
.kit-msg h2{font-size:clamp(2rem,1.4rem + 2vw,3rem)}
video::cue{background:rgba(0,0,0,.72);color:#fff;font-family:var(--f-body)}

/* Animated scenes: a 16:9 stage that scales with its own width (container units), elements fade and rise in on cue */
.player.scenes{background:var(--bg-deep);container-type:inline-size}
.sc-stage{position:absolute;inset:0;display:grid;place-items:center;padding:6cqw 7cqw 12cqw;overflow:hidden;
  background:radial-gradient(70% 60% at 85% 0%,color-mix(in srgb,var(--tone) 24%,transparent),transparent 70%),radial-gradient(60% 55% at 0% 100%,color-mix(in srgb,var(--tone) 14%,transparent),transparent 70%)}
.sc{width:100%}
.sc-in{opacity:0;transform:translateY(3cqw);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.sc-in.on{opacity:1;transform:none}
.sc-in.still{transition:none}
.calm .sc-in{transform:none}
.sc-big{font-size:7cqw;font-weight:800;letter-spacing:-.02em;line-height:1.03;text-wrap:balance;max-width:22ch}
.sc-sub{font-family:var(--f-serif);font-style:italic;font-size:3.4cqw;line-height:1.25;color:var(--tone);margin-top:2.2cqw;max-width:40ch}
.sc-head{font-size:4.4cqw;font-weight:800;letter-spacing:-.01em;line-height:1.1;margin-bottom:2.6cqw;text-wrap:balance}
.sc-points ul{list-style:none;padding:0;margin:0;display:grid;gap:1.8cqw}
.sc-points li{font-size:3cqw;font-weight:600;line-height:1.3;padding-left:4.4cqw;position:relative;max-width:46ch}
.sc-points li::before{content:"";position:absolute;left:0;top:.42em;width:1.9cqw;height:1.9cqw;border-radius:50%;background:var(--tone)}
.sc-steps ol{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2.4cqw}
.sc-steps li{display:flex;flex-direction:column;gap:1.2cqw;font-size:2.5cqw;font-weight:600;line-height:1.3;border-top:.5cqw solid var(--tone);padding-top:1.8cqw}
.sc-steps .n{font-family:var(--f-serif);font-size:4.8cqw;line-height:1;color:var(--tone)}
.sc-stat{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 1.2cqw;text-align:center}
.sc-num{font-size:17cqw;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--tone)}
.sc-unit{font-size:7cqw;font-weight:800;color:var(--tone)}
.sc-label{flex-basis:100%;font-size:3.2cqw;font-weight:600;color:var(--cream);margin-top:1.4cqw}
.sc-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:3cqw;align-items:start}
.sc-col{background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);border-top:.6cqw solid var(--tone);border-radius:1.6cqw;padding:2.4cqw 2.6cqw}
.sc-col h4{font-size:3.2cqw;font-weight:800;margin:0 0 1.4cqw}
.sc-col ul{list-style:none;padding:0;margin:0;display:grid;gap:1.1cqw;font-size:2.5cqw;line-height:1.3;color:var(--muted)}
.sc-vs{align-self:center;font-family:var(--f-serif);font-style:italic;font-size:4.4cqw;color:var(--muted)}
.lay-image .sc-stage,.sc-stage.lay-image{padding:0}
.sc-image{position:absolute;inset:0}
.sc-img{position:absolute;inset:0;background:var(--bg-deep) center/cover no-repeat;transform:scale(var(--kp,1.1));transform-origin:var(--ox,50%) var(--oy,50%)}
.sc-img.on{transform:scale(1);transition:opacity .9s ease,transform 14s linear}
.calm .sc-img,.sc-img.still{transform:none}
.sc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--bg-deep) 72%,transparent))}
.sc-cap{position:absolute;left:6cqw;right:6cqw;bottom:max(12cqw,64px);font-size:max(3.4cqw,15px);font-weight:800;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.6);max-width:30ch}
.sc-quote blockquote{font-family:var(--f-serif);font-size:5.2cqw;line-height:1.2;margin:0;max-width:30ch;text-wrap:balance}
/* icons on scene items (scIco): an SVG is a mask filled with the scene color, other pictures show as they are */
.sc-ico{display:inline-block;flex:none;width:1.6em;height:1.6em;background-color:var(--tone);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sc-ico.full{background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat}
.sc-points li.has-ico{display:flex;align-items:center;gap:1.6cqw;padding-left:0}
.sc-points li.has-ico::before{content:none}
.sc-steps .sc-sh{display:flex;align-items:center;gap:1.2cqw}
.sc-steps .sc-sh .sc-ico{width:5.4cqw;height:5.4cqw}
.sc-col h4.has-ico{display:flex;align-items:center;gap:1.2cqw}
.sc-col .sc-ico{width:1.3em;height:1.3em}
.fw-n.has-ico .sc-ico{width:68%;height:68%;background-color:var(--tone-ink)}
.sc-ico.sc-lead{display:block;width:9cqw;height:9cqw;margin:0 0 2.2cqw}
.sc-stat .sc-ico.sc-lead{flex:0 0 100%;margin:0 0 1.6cqw;-webkit-mask-position:center;mask-position:center}
.sc-start{background:transparent}
.sc-start .dur{display:none} /* the lesson length is in the eyebrow; here it sat under the play button */
.sc-start::after{background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--bg) 75%,transparent))}
.sc-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(transparent,color-mix(in srgb,var(--bg-deep) 88%,transparent))}
.sc-btn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;cursor:pointer}
.sc-btn svg{width:18px;height:18px}
#scCCBtn{background:transparent;color:var(--cream);border:1.5px solid var(--line)}
#scCCBtn[aria-pressed="true"]{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.sc-dots{display:flex;gap:6px;flex:1;min-width:0}
.sc-dot{flex:1;height:26px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center}
.sc-dot i{display:block;width:100%;height:5px;border-radius:3px;background:var(--line);transition:background-color .3s}
.sc-dot.seen i{background:color-mix(in srgb,var(--tone) 50%,var(--line))}
.sc-dot.on i{background:var(--tone)}
.sc-cc{white-space:pre-line;margin:10px 0 0;padding:10px 14px;border-radius:var(--r-sm);background:var(--panel);border-left:4px solid var(--tone);font-size:1rem;line-height:1.45;color:var(--cream);max-width:min(100%,900px)}
@media (min-width:900px) and (max-height:820px){.lesson.has-cc{grid-template-areas:"head player" "watch player" "cc player" "ptw ptw"}.lesson .sc-cc{grid-area:cc;align-self:start}}
@media (min-width:900px) and (max-height:820px){.lesson.has-more{grid-template-areas:"head player" "watch player" "more more" "ptw ptw"}.lesson.has-cc.has-more{grid-template-areas:"head player" "watch player" "cc player" "more more" "ptw ptw"}.lesson .more{grid-area:more}}

/* Animated lessons on wide screens: the script sits beside the player, where it reads like the slide's text. */
@media (min-width:1000px){
  .lesson.has-cc,.lesson.has-cc.has-more{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);grid-template-areas:"head head" "player cc" "watch cc" "more more" "ptw ptw";column-gap:clamp(20px,2.4vw,32px);align-items:start}
  .lesson.has-cc .lesson-head{grid-area:head}
  .lesson.has-cc .player{grid-area:player;width:100%;height:auto;aspect-ratio:16/9;margin-top:clamp(16px,2vw,24px)}
  .lesson.has-cc .watch{grid-area:watch;margin-top:12px}
  .lesson.has-cc .sc-cc{grid-area:cc;margin-top:clamp(16px,2vw,24px);max-width:none;max-height:min(70vh,640px);overflow:auto;font-size:1.02rem;line-height:1.55}
  .lesson.has-cc .more{grid-area:more}
  .lesson.has-cc .ptw{grid-area:ptw}
}

/* The lesson's parts with their pictures. Narrow screens: a strip under the player. */
.sc-rail{margin-top:16px;min-width:0}
.sc-rail .label{display:flex;justify-content:space-between;gap:10px}
.sc-rail .label span{color:var(--dim)}
.sc-rail ol{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;position:relative;scrollbar-width:thin}
.sc-rail li{flex:0 0 152px;scroll-snap-align:start}
.ch{display:grid;grid-template-columns:1fr;grid-template-areas:"th" "t";gap:6px;width:100%;padding:6px;border-radius:12px;border:1.5px solid transparent;background:none;color:var(--cream);font:inherit;text-align:left;cursor:pointer;align-items:start}
.ch:hover{background:var(--panel)}
.ch.on{background:var(--panel-2);border-color:var(--tone)}
.ch.lock{opacity:.45;cursor:not-allowed}
.ch.lock:hover{background:none}
.ch-th{grid-area:th;position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--bg-deep);border:1px solid var(--line)}
.ch-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ch-th.tile{display:grid;place-items:center;background:radial-gradient(90% 90% at 80% 0%,color-mix(in srgb,var(--tone) 38%,transparent),transparent 70%),var(--panel)}
.ch-th.tile b{font-family:var(--f-serif);font-size:1.5rem;line-height:1;color:var(--tone)}
.ch-lines{display:flex;flex-direction:column;gap:4px;width:44%}
.ch-lines i{display:block;height:4px;border-radius:2px;background:var(--tone);opacity:.85}
.ch-lines i:nth-child(2){width:80%}.ch-lines i:nth-child(3){width:55%;opacity:.5}
.ch.seen .ch-th::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tone)}
.ch-t{grid-area:t;font-size:.86rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ch-d{grid-area:th;align-self:end;justify-self:end;margin:5px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;position:relative}
.ch.on .ch-t{color:var(--cream)}
/* Animated lessons: the player takes the full width of the column at every size, with the script, the Watched line
   and the lesson's parts under it. Full screen is one tap away in the player's controls. */
.lesson.has-rail,.lesson.has-cc.has-rail,.lesson.has-cc.has-rail.has-more{display:block}
.lesson.has-rail .player{width:100%;height:auto;margin-top:clamp(16px,2vw,24px)}
.lesson.has-rail .sc-cc{max-width:none;max-height:none;overflow:visible}
.lesson.has-rail .watch{margin-top:12px}
@media (min-width:1000px){.sc-rail li{flex-basis:178px}}
#scFull,#scVol{background:transparent;color:var(--cream);border:1.5px solid var(--line)}
#scVol[aria-pressed="true"]{color:var(--muted)}
#scVol:hover{border-color:var(--cream)}
/* volume: the button turns the sound off and on; on computers the slider opens beside it */
.sc-vol{display:flex;align-items:center;gap:8px;flex:none}
.sc-vol input{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:5px;margin:0;border-radius:3px;cursor:pointer;background:linear-gradient(90deg,var(--cream) var(--v,100%),var(--line) var(--v,100%));transition:width .2s ease,opacity .2s ease}
.sc-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cream);border:0}
.sc-vol input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cream);border:0}
.sc-vol:hover input,.sc-vol:focus-within input{width:86px;opacity:1}
@media (hover:none){.sc-vol input{display:none}}
@media (max-width:520px){.sc-vol:hover input,.sc-vol:focus-within input{width:64px}}
#scFull:hover,#scCCBtn:hover{border-color:var(--cream)}
.player.scenes.is-fs{border-radius:0;border:0;box-shadow:none;margin:0}
.player.scenes:fullscreen{width:100%!important;height:100%;max-width:none;aspect-ratio:auto}
.player.scenes:-webkit-full-screen{width:100%!important;height:100%;max-width:none;aspect-ratio:auto}
.player.scenes.fs-fake{position:fixed;inset:0;z-index:1000;width:100vw!important;height:100vh;height:100dvh;max-width:none;aspect-ratio:auto;margin:0!important}
html.sc-fs-lock,html.sc-fs-lock body{overflow:hidden}
.sc-ccov{display:none}
.player.is-fs.cc-on .sc-ccov:not(:empty){display:block;position:absolute;left:4%;right:4%;bottom:78px;z-index:3;margin:0;color:#fff;font-size:clamp(17px,2vw,30px);line-height:1.6;text-align:center;text-wrap:balance;pointer-events:none}
.sc-ccov span{background:rgba(0,0,0,.76);padding:3px 12px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* More to watch (YouTube, loaded on play) */
.more{margin-top:clamp(22px,3vw,32px)}
.more-list{display:grid;gap:14px;margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.yt{margin:0}
.yt-box{position:relative;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-deep);border:1px solid var(--line)}
.yt-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-go{position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;background:var(--bg-deep) center/cover no-repeat;display:grid;place-items:center}
.yt-go .play{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--mint-ink);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.yt-go .play svg{width:26px;height:26px}
.yt-go:hover .play,.yt-go:focus-visible .play{transform:scale(1.06)}
.yt figcaption{margin-top:8px;font-weight:700;line-height:1.3}

/* Flip cards */
.cards{display:grid;gap:10px;margin-top:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.cards{grid-auto-rows:1fr}
.fcard{display:block;width:100%;min-height:172px;padding:0;border:0;background:none;color:var(--cream);font:inherit;text-align:left;cursor:pointer;perspective:1000px;border-radius:var(--r-sm)}
.fc-in{display:grid;height:100%;transition:transform .55s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.fcard.up .fc-in{transform:rotateY(180deg)}
.fface{grid-area:1/1;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg-deep);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;transition:border-color .2s}
.fface.back{transform:rotateY(180deg);background:var(--panel-2);border-color:var(--tone)}
.fcard:hover .fface.front,.fcard:focus-visible .fface.front{border-color:var(--cream)}
.fcard .fside{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fcard .ftext{font-size:1rem;font-weight:600;line-height:1.4;text-wrap:pretty}
.fface.back .fside{color:var(--tone)}
.fface.back .ftext{font-weight:500;font-size:.96rem}
.fturn{position:absolute;right:12px;bottom:10px;width:18px;height:18px;opacity:.45}
.fturn svg{width:100%;height:100%}
@media (prefers-reduced-motion: reduce){.fc-in{transition:none}}
.cards-count{margin-top:12px;display:flex;align-items:center;gap:6px}
.cards-count svg{width:16px;height:16px;color:var(--good)}
@container (max-width:520px){.sc-stage{padding:5cqw 6cqw 16cqw}.sc-points li{font-size:4cqw}.sc-head{font-size:5.4cqw}.sc-steps ol{grid-auto-flow:row;gap:2cqw}.sc-steps li{font-size:3.6cqw;flex-direction:row;align-items:baseline;border-top:0;padding-top:0}.sc-col ul{font-size:3.4cqw}.sc-col h4{font-size:4cqw}}

/* Learner feedback */
.fbq{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fbl-q{font-weight:700;font-size:1.02rem;line-height:1.35;color:var(--cream)}
.fbq .label+.fbl-q{margin-top:-4px}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:420px}
.scale.nps{grid-template-columns:repeat(11,minmax(0,1fr));max-width:560px}
.scale button{min-height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg-deep);font-weight:700;cursor:pointer;padding:0;font-variant-numeric:tabular-nums}
.scale button:hover{border-color:var(--cream)}
.scale button[aria-checked="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.scale-ends{display:flex;justify-content:space-between;max-width:420px;font-size:.8rem;color:var(--dim)}
.conf-opts{display:flex;flex-direction:column;gap:8px;max-width:520px;margin-top:4px}
.conf-opts button{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg-deep);color:inherit;font:inherit;text-align:left;cursor:pointer}
.conf-opts button:hover{border-color:var(--cream)}
.conf-opts button i{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);font-style:normal;font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--dim)}
.conf-opts button span{flex:1 1 auto;font-weight:600}
.conf-opts button em{flex:0 0 auto;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--cream) 12%,transparent);color:var(--muted)}
.conf-opts button[aria-checked="true"]{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 16%,var(--bg-deep))}
.conf-opts button[aria-checked="true"] i{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.conf-was{margin:2px 0 6px;color:var(--muted)}.conf-was b{color:var(--cream)}
.conf-note{margin-top:8px}
.ba-next{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.conf-drop{max-width:520px;margin-top:10px;padding:12px 14px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--mint) 45%,transparent);background:color-mix(in srgb,var(--mint) 8%,transparent)}
.conf-drop p{margin:0 0 10px;font-weight:600}.conf-drop-b{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:600px){.conf-opts button{flex-wrap:wrap;row-gap:4px}.conf-opts button span{flex:1 1 calc(100% - 44px)}.conf-opts button em{margin-left:38px}}
.conf-kept{display:flex;align-items:center;gap:8px;max-width:520px;margin:10px 0 0;color:var(--muted)}.conf-kept svg{width:16px;height:16px;color:var(--mint)}
.nps+.scale-ends{max-width:560px}
.stars{display:flex;gap:4px}
.stars button{width:44px;height:44px;border:0;background:none;padding:4px;cursor:pointer;color:var(--line)}
.stars button svg{width:100%;height:100%}
.stars button.on{color:#F2B544}
.stars button:hover{transform:scale(1.08)}
.thumbs{display:inline-flex;flex-wrap:wrap;gap:8px}
.thumbs .btn svg{width:18px;height:18px}
.fbl{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fbdone{display:inline-flex;align-items:center;gap:8px;color:var(--good);font-weight:600}
.fbdone svg{width:18px;height:18px}
.linkish{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.88rem}
.fbcard{margin-top:24px;padding:clamp(18px,2.6vw,26px)}
.fbcard h3{font-size:1.35rem;font-weight:800}
.fbcard textarea{width:100%;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg-deep);color:var(--cream);font:inherit;padding:10px 12px;resize:vertical}
.fbcard textarea:focus{border-color:var(--mint);outline:none}
.fbcard textarea::placeholder{color:var(--dim);opacity:1}
.fb-note{margin-top:8px;font-size:.9rem;color:var(--muted)}
.checkin{margin:0 0 22px}
/* survey questions (course.json feedback.questions) */
.sq-opts{display:flex;flex-wrap:wrap;gap:8px}
.sq-opts button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg-deep);color:var(--cream);font:inherit;font-size:.95rem;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.sq-opts button:hover{border-color:var(--cream)}
.sq-opts button i{display:none;width:16px;height:16px;flex:none}
.sq-opts button i svg{width:100%;height:100%}
.sq-opts button[aria-checked="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.sq-opts button[aria-checked="true"] i{display:block}
.sq-req{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.02em;vertical-align:2px}
.sq-hint{font-weight:500;font-size:.85rem;color:var(--dim)}
.fbcard .sq-in{width:100%;max-width:560px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg-deep);color:var(--cream);font:inherit;padding:10px 12px}
.fbcard .sq-in:focus{border-color:var(--mint);outline:none}
.fbq.missing .fbl-q{color:var(--bad)}
.fbq.missing .sq-req{background:var(--bad);color:#2a1300}
.fb-miss{margin-top:14px;color:var(--bad);font-weight:600}
.fbq.sq-follow{padding-left:14px;border-left:2px solid var(--mint)}
.fbq.sq-new{animation:sqIn .35s ease-out}
@keyframes sqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fbq.sq-new{animation:none}}
/* 0 to 10 always stays on one row: wrapped onto two rows, 5 sat at the top right on phones and read as the best answer
   (both of Cannabis Cultivation's first "0 to 6" answers were a 5 from phones, beside a 4 and a 5 star rating) */
.rec-pick{margin:0;min-height:1.2em;color:var(--muted)}.rec-pick:empty{display:none}
@media (max-width:520px){.scale.nps{gap:3px}.scale.nps button{min-height:44px;border-radius:8px;font-size:.88rem}.scale button{min-height:38px}}
@media (max-width:360px){.scale.nps{gap:2px;margin:0 -6px}.nps+.scale-ends{margin:0 -6px}.scale.nps button{border-radius:6px;font-size:.8rem;border-width:1px}}

/* ---------- Bold contrast (theme.look "bold") ----------
   Light cards on the dark page and color-blocked text slides, so each lesson alternates photos, color and light
   surfaces instead of one dark tone. "Paper" is the theme's text color; text on it is the background color. */
.look-bold .three li{background:var(--paper);color:var(--paper-ink);border:0;border-top:6px solid var(--tone);box-shadow:0 16px 30px -20px rgba(0,0,0,.8);align-items:flex-start}
.look-bold .three li::before{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--tone);color:var(--tone-ink);font-size:1.15rem;margin-top:-2px}
.look-bold .three .tk span{color:color-mix(in srgb,var(--paper-ink) 80%,transparent)}
.look-bold .fface.front{background:var(--paper);color:var(--paper-ink);border-color:var(--paper);box-shadow:0 14px 28px -18px rgba(0,0,0,.8)}
.look-bold .fface.front .fside{color:color-mix(in srgb,var(--paper-ink) 60%,transparent)}
.look-bold .fcard:hover .fface.front,.look-bold .fcard:focus-visible .fface.front{border-color:var(--tone)}
/* the back is the dark side of the light front (ink as paper), with the lesson color as a band, so a turned card reads
   as turned on any screen color and with any lesson color, light ones included */
.look-bold .fface.back{background:var(--paper-ink);border-color:var(--tone);color:var(--paper);box-shadow:inset 0 6px 0 var(--tone),0 14px 28px -18px rgba(0,0,0,.8);padding-top:20px}
.look-bold .fface.back .fside{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.look-bold .fface.back .fside.fq{text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.look-bold .opt{background:var(--paper);color:var(--paper-ink);border-color:var(--paper)}
.look-bold .opt:hover:not(:disabled){border-color:var(--mint);box-shadow:0 0 0 2px var(--mint)}
.look-bold .opt .k{background:color-mix(in srgb,var(--paper-ink) 12%,var(--paper));color:var(--paper-ink)}
.look-bold .opt.is-right{background:color-mix(in srgb,var(--good) 32%,var(--paper));border-color:var(--good)}
.look-bold .opt.is-right .k{background:var(--good);color:var(--mint-ink)}
.look-bold .opt.is-wrong{background:color-mix(in srgb,var(--bad) 30%,var(--paper));border-color:var(--bad)}
.look-bold .opt.is-wrong .k{background:var(--bad);color:#2a1300}
.look-bold .opt.is-dim{opacity:.55}
.look-bold .sc-stage.lay-points,.look-bold .sc-stage.lay-title,.look-bold .sc-stage.lay-steps,.look-bold .sc-stage.lay-stat,.look-bold .sc-stage.lay-quote,.look-bold .sc-stage.lay-timeline,.look-bold .sc-stage.lay-flow{background:radial-gradient(75% 75% at 92% 0%,rgba(255,255,255,.3),transparent 70%),radial-gradient(60% 60% at 0% 100%,rgba(0,0,0,.12),transparent 70%),var(--tone);color:var(--tone-ink)}
.look-bold .lay-points .sc-points li::before{background:var(--tone-ink)}
.look-bold .sc-ico:not(.full){background-color:var(--tone-ink)}
.look-bold .sc-col .sc-ico:not(.full){background-color:var(--tone)}
.look-bold .lay-flow .fw-n.has-ico .sc-ico{background-color:var(--tone)}
.look-bold .lay-steps .sc-steps li{border-top-color:var(--tone-ink)}
.look-bold .lay-steps .sc-steps .n,.look-bold .lay-title .sc-sub,.look-bold .lay-quote .sc-sub,.look-bold .lay-stat .sc-num,.look-bold .lay-stat .sc-unit,.look-bold .lay-stat .sc-label{color:var(--tone-ink)}
.look-bold .ch-th.tile{background:radial-gradient(90% 90% at 85% 0%,rgba(255,255,255,.3),transparent 70%),var(--tone)}
.look-bold .ch-th.tile b{color:var(--tone-ink)}
.look-bold .ch-lines i{background:var(--tone-ink);opacity:.6}.look-bold .ch-lines i:nth-child(3){opacity:.35}
.look-bold .ch.on{background:var(--paper);border-color:var(--paper);color:var(--paper-ink)}
.look-bold .ch.on .ch-t{color:var(--paper-ink)}
@media (min-width:1000px){.look-bold .ch.on .ch-d{color:color-mix(in srgb,var(--bg) 70%,transparent)}}

/* Phones: animated lessons get a taller stage so list slides fit, and long lists set a little smaller */
@media (max-width:640px){.player.scenes{aspect-ratio:4/3}}
@container (max-width:520px){.sc-points ul:has(li:nth-child(4)){gap:1.4cqw}.sc-points ul:has(li:nth-child(4)) li{font-size:3.6cqw}}
.player.scenes .sc-stage{cursor:pointer}
/* animated lessons keep the header compact so the full-width player and its controls fit on a laptop screen */
.lesson.has-rail .lesson-head h2{font-size:clamp(2rem,1.2rem + 2vw,2.9rem);margin-top:8px}
.lesson.has-rail .lesson-head .lede{margin-top:4px}
/* phones held upright in full screen: the picture keeps its shape in the middle, like a video */
@media (max-aspect-ratio:1/1){.player.scenes.is-fs:not(.tall){background:#000}.player.scenes.is-fs:not(.tall) .sc-stage{inset:auto 0;top:50%;aspect-ratio:4/3;transform:translateY(-58%)}}
.player.is-fs.cc-on .sc-cap{bottom:calc(max(12cqw,64px) + 64px)}
/* Bold look quiz: more room, a smaller intro, wider question text and a two-by-two answer grid on wide screens */
.look-bold .quiz{padding:clamp(22px,3.4vw,44px)}
.look-bold .quiz-top{margin-bottom:6px}
.look-bold .qtext{max-width:52ch;margin-top:22px;line-height:1.25}
.look-bold .opts{gap:12px;margin-top:24px}
.look-bold .opt{padding:16px 18px;font-size:1.05rem;align-items:center;min-height:64px}
.look-bold .opt .k{width:32px;height:32px}
@media (min-width:760px){.look-bold .opts.opts-grid{display:grid;grid-template-columns:1fr 1fr}}
.look-bold .opt.is-dim{opacity:1;background:color-mix(in srgb,var(--cream) 14%,transparent);border-color:transparent;color:var(--muted)}
.look-bold .opt.is-dim .k{background:color-mix(in srgb,var(--cream) 12%,transparent);color:var(--muted)}
.look-bold .opt.is-picked{border-color:var(--tone,var(--mint));box-shadow:0 0 0 3px var(--tone,var(--mint));background:color-mix(in srgb,var(--tone,var(--mint)) 16%,var(--paper))}
.look-bold .opt.is-picked .k{background:var(--tone,var(--mint));color:var(--tone-ink,var(--mint-ink))}
.look-bold .ex-grid button.a{background:color-mix(in srgb,var(--cream) 22%,transparent)}
.look-bold .fb{margin-top:18px;padding:16px 18px}
.look-bold #qnext{margin-top:6px}
.look-bold .quiz-head .lede{font-size:1.02rem;max-width:62ch}

/* solid bars: screens passing under them don't show through */
.look-bold .top,.look-bold .controls{background:var(--bg)}
/* short windows (phones on their side): slimmer bars so the lesson gets the height */
@media (max-height:500px){
  .look-bold .top-in{padding-block:7px}
  .look-bold .top-title > span{display:none}
  .look-bold .controls{padding-block:7px calc(7px + env(safe-area-inset-bottom,0px))}
  .look-bold .controls .btn{min-height:42px}
}
/* ---------- Takeaways explorer (bold look) ---------- */
.look-bold .ptw-head h3::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--tone);margin-top:10px}
.tkx{margin-top:18px;display:grid;gap:18px;grid-template-columns:minmax(230px,.85fr) 1.6fr;align-items:start}
.tkx-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tkx-item{display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);color:var(--cream);font:inherit;font-weight:700;line-height:1.3;cursor:pointer;transition:transform .18s ease,background-color .2s,border-color .2s,box-shadow .2s,color .2s}
.tkx-item:hover{transform:translateX(4px);border-color:var(--tone);box-shadow:0 12px 26px -18px rgba(0,0,0,.9)}
.tkx-item .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tone) 22%,transparent);color:var(--tone);font-family:var(--f-serif);font-size:1.1rem;transition:background-color .2s,color .2s,transform .2s}
.tkx-item:hover .n,.tkx-item.on .n{background:var(--tone);color:var(--tone-ink)}
.tkx-item:hover .n{transform:scale(1.08)}
.tkx-item.on{background:var(--paper);color:var(--paper-ink);border-color:var(--paper);transform:translateX(6px)}
.tkx-item .ok{width:20px;height:20px;color:var(--good);opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.tkx-item .ok svg{width:100%;height:100%}
.tkx-item.seen .ok{opacity:1;transform:none}
.tkx-item.on .ok{color:#14895c}
.tkx-body{display:none}
.tkx-panel{position:sticky;top:84px}
.tkx-card{border-radius:var(--r);overflow:hidden;background:var(--paper);color:var(--paper-ink);border-top:6px solid var(--tone);box-shadow:0 26px 50px -30px rgba(0,0,0,.95)}
.tkx-pic{display:block;aspect-ratio:16/6;max-height:230px;width:100%;background:var(--bg-deep) center/cover no-repeat}
.tkx-copy{padding:20px 24px 22px}
.tkx-copy .label{color:color-mix(in srgb,var(--paper-ink) 58%,transparent)}
.tkx-copy h4{font-size:1.45rem;font-weight:800;line-height:1.2;margin-top:6px}
.tkx-copy > p:not(.label){margin-top:10px;font-size:1.05rem;line-height:1.6;color:color-mix(in srgb,var(--paper-ink) 86%,transparent)}
.tkx-nav{display:flex;gap:8px;margin-top:18px}
.tkx-card .btn{color:var(--paper-ink);background:transparent;border-color:color-mix(in srgb,var(--paper-ink) 22%,transparent)}
.tkx-card .btn:hover:not(:disabled){border-color:var(--paper-ink)}
.tkx-card .btn.go{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.tkx-card .btn svg{width:18px;height:18px}
.tkx-card .btn:disabled{opacity:.35}
.tkx-panel.swap .tkx-card{animation:tkin .35s ease}
.tkx-panel.swap .tkx-pic{animation:tkpic .6s ease}
@keyframes tkin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tkpic{from{opacity:.4;transform:scale(1.04)}to{opacity:1;transform:none}}
.tkx-count{margin-top:12px;display:flex;align-items:center;gap:6px}
.tkx-count svg{width:16px;height:16px;color:var(--good)}
.locked .tkx,.locked .tkx-count{filter:blur(6px);opacity:.35;pointer-events:none;user-select:none}
/* a takeaway with no picture of its own: its term on a block of the lesson color */
.tkx-pic.ph{display:flex;align-items:flex-end;padding:16px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 30%,var(--paper-ink)),var(--paper-ink) 70%);color:var(--tone);overflow:hidden;position:relative}
.tkx-pic.ph::after{content:"";position:absolute;right:-30px;top:-40px;width:180px;height:180px;border-radius:50%;border:26px solid color-mix(in srgb,var(--tone) 18%,transparent)}
.tkx-pic.ph b{font-family:var(--f-head);font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;position:relative;z-index:1}
/* Match it: a clue card, the terms to tap, a shake on a miss and a reveal on a hit */
.tkm .tkx-item:hover{transform:translateX(4px)}
.tkm .tkx-item.seen{opacity:.6}
.tkm .tkx-item.seen:hover{transform:none;border-color:var(--line);box-shadow:none}
.tkm .tkx-item.hit{opacity:1;border-color:#1fa774;animation:tkhit .5s ease}
.tkm .tkx-item.no{border-color:#E8590C;animation:tkno .4s ease;cursor:default}
.tkm .tkx-item.no .n{background:#C2410C!important;color:#fff!important}
.tkx-copy > p.tkm-q{margin-top:12px;font-family:var(--f-head);font-size:1.5rem;font-weight:800;line-height:1.3;color:var(--paper-ink)}
/* a clue is the takeaway after its colon, usually written in lower case; it stands alone here, so it starts with a capital */
.tkx-copy > p.tkm-q::first-letter{text-transform:uppercase}
.tkx-copy > p.tkm-say{margin-top:14px;font-size:.95rem;font-weight:600;color:color-mix(in srgb,var(--paper-ink) 66%,transparent)}
.tkm-card .label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tkm-right{color:#0f6e49!important}
.tkm-right svg{width:16px;height:16px}
.tkm-streak{margin-left:auto;padding:3px 10px;border-radius:99px;background:var(--tone);color:var(--tone-ink);letter-spacing:.04em}
.tkx-count .tkm-done{display:inline-flex;align-items:center;gap:6px}
.tkx-count .tkm-again{margin-left:10px;color:inherit;background:transparent;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.tkx-count .tkm-again svg{width:16px;height:16px}
.tkx-count.tkm-pop{animation:tkin .4s ease}
@keyframes tkno{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes tkhit{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.tkm .tkx-item.no,.tkm .tkx-item.hit,.tkx-count.tkm-pop{animation:none}}
/* Match it on wide screens: the clue across the top and the terms to tap under it, so it reads in order (Mathew, Oct
   2026: with the terms on the left it read backwards). --tkc is how many terms sit in a row. */
@media (min-width:760px) and (min-height:501px){
  .tkx.tkm{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .tkx.tkm .tkx-panel{order:-1;position:static}
  .tkm .tkx-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .tkm .tkx-list li{flex:0 0 calc((100% - (var(--tkc,3) - 1) * 10px) / var(--tkc,3));display:flex}
  .tkm .tkx-item{min-height:64px}
  .tkm .tkx-item:hover{transform:translateY(-2px)}
  .tkm-card{min-height:156px}
  .tkm .tkx-copy > p.tkm-q{font-size:1.4rem}
  .tkm-card.yes{display:grid;grid-template-columns:32% 1fr}
  .tkm-card.yes .tkx-pic{aspect-ratio:auto;height:100%;min-height:156px;max-height:none}
  .tkm-card.yes .tkx-pic.ph b{font-size:1.4rem}
  /* the explorer after Match it keeps the same order: the open term's card on top, the terms in rows under it */
  .tkx.tkx-top{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .tkx-top .tkx-panel{order:-1;position:static}
  .tkx-top .tkx-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .tkx-top .tkx-list li{flex:0 0 calc((100% - (var(--tkc,3) - 1) * 10px) / var(--tkc,3));display:flex}
  .tkx-top .tkx-item:hover{transform:translateY(-2px)}
  .tkx-top .tkx-item.on{transform:none}
  .tkx-top .tkx-card{display:grid;grid-template-columns:36% 1fr}
  .tkx-top .tkx-pic{aspect-ratio:auto;height:100%;min-height:210px;max-height:none}
}
@media (max-width:759px),(max-height:500px){
  .tkx{display:block}
  .tkx-panel{display:none}
  .tkx-item:hover,.tkx-item.on{transform:none}
  .tkx-item.on{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
  .tkx-item.on + .tkx-body{display:block;margin:2px 0 6px;border-radius:4px 4px 14px 14px;overflow:hidden;background:var(--paper);color:var(--paper-ink);border-left:5px solid var(--tone);animation:tkin .3s ease}
  .tkx-body .tkx-pic{aspect-ratio:16/8}
  .tkx-body p{padding:14px 16px 16px;font-size:1rem;line-height:1.55}
  /* Match it on phones: the clue sits above the terms */
  .tkx.tkm{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .tkx.tkm .tkx-panel{display:block;order:-1;position:static}
  .tkx.tkm .tkx-body{display:none!important}
  .tkm .tkx-item:hover{transform:none}
  .tkx-copy > p.tkm-q{font-size:1.2rem}
  .tkm-card .tkx-copy{padding:16px 18px 18px}
  /* terms two across (short terms) so the clue and every term fit on one phone screen */
  .tkm .tkx-list{gap:6px}
  .tkm-2 .tkx-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tkm .tkx-item{grid-template-columns:24px 1fr 16px;gap:8px;min-height:50px;padding:8px 10px;font-size:.94rem;line-height:1.25}
  .tkm .tkx-item .n{width:24px;height:24px;font-size:.85rem}
  .tkm .tkx-item .ok{width:16px;height:16px}
  .tkm-2 .tkx-list li:last-child:nth-child(odd){grid-column:1 / -1}
  /* a right match: the picture beside the words instead of over them */
  .tkx.tkm .tkx-panel{scroll-margin-top:84px}
  .tkm-card.yes{display:grid;grid-template-columns:31% 1fr}
  .tkm-card.yes .tkx-pic{aspect-ratio:auto;height:100%;min-height:128px;max-height:none}
  .tkm-card.yes .tkx-pic.ph{padding:10px}
  .tkm-card.yes .tkx-pic.ph b{font-size:1rem}
  .tkm-card.yes .tkx-copy{padding:12px 14px 14px}
  .tkm-card.yes .tkx-copy h4{font-size:1.15rem;margin-top:4px}
  .tkm-card.yes .tkx-copy > p:not(.label){margin-top:4px;font-size:.95rem;line-height:1.45}
  .tkm-card.yes .tkx-nav{margin-top:10px}
}
/* flip cards lift a little under the pointer */
.look-bold .fcard{transition:transform .2s ease}
.look-bold .fcard:hover{transform:translateY(-3px)}

/* ---------- Screens (bold look lessons) ----------
   Each part of a lesson is a screen. On computers and tablets in landscape each screen fills the window and the page
   snaps from one to the next; on phones and short windows screens keep their natural height and scroll freely. Screens rise into
   place as they arrive. The screens after the lesson stay hidden until it has been watched. */
html.snap{scroll-snap-type:y proximity;scroll-padding-top:var(--top-h,68px);scroll-padding-bottom:var(--nav-h,0px)}
/* phones and short windows scroll freely: gentle snapping there pulls short scrolls back to the nearest screen */
@media (max-width:759px),(max-height:560px){html.snap{scroll-snap-type:none}}
.lesson.screens .screen{scroll-snap-align:start;padding-block:clamp(18px,3.4vh,40px)}
.lesson.screens .s-watch{padding-top:14px}
/* a lesson that's only activities: its first activity's picture beside the heading */
.intro-pic{display:block;aspect-ratio:16/10;border-radius:var(--r);background:var(--panel-2) center/cover no-repeat;margin-top:22px;box-shadow:var(--shadow)}
@media (min-width:760px){
  .lesson.screens .s-watch.has-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head pic" "gate pic";column-gap:clamp(22px,3vw,44px);align-content:center}
  .lesson.screens .s-watch.has-intro .lesson-head{grid-area:head;align-self:end}
  .lesson.screens .s-watch.has-intro .gate{grid-area:gate;align-self:start}
  .lesson.screens .s-watch.has-intro .intro-pic{grid-area:pic;margin:0;aspect-ratio:4/3}
}
.s-act.pic-up .act-pic{display:none}
@media (min-width:760px) and (min-height:561px){
  .lesson.screens .screen{min-height:calc(100vh - var(--top-h,68px) - var(--nav-h,0px));min-height:calc(100svh - var(--top-h,68px) - var(--nav-h,0px));display:flex;flex-direction:column;justify-content:center}
}
@media (max-width:759px){.lesson.screens .ptw .screen{border-top:1px solid var(--line)}}
.lesson.screens .ptw{margin-top:0;scroll-margin-top:0}
.lesson.screens .ptw.locked{display:none}
.lesson.screens .sc-cc{display:none}
.lesson.screens .player{margin-inline:auto}
.lesson.screens .player:not(.is-fs){width:100%;height:auto}
/* the head keeps to the left inside a screen (the short-laptop grid's alignment doesn't apply here) */
.lesson.screens .lesson-head{align-self:stretch}
/* Short wide windows (laptops, the Learn Brands frame, phones on their side): the title sits beside the player so the
   player can be as tall as the window. fitPlayer turns this on when it gives a bigger picture. */
.lesson.screens .s-watch.side{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head player" "row player";column-gap:clamp(18px,2.4vw,32px);align-content:center}
.lesson.screens .s-watch.side .lesson-head{grid-area:head;align-self:end}
.lesson.screens .s-watch.side .lesson-head h2{font-size:clamp(1.55rem,.9rem + 1.5vw,2.3rem);line-height:1.08}
.lesson.screens .s-watch.side .lesson-head .lede{font-size:.98rem;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.lesson.screens .s-watch.side .player:not(.is-fs){grid-area:player;margin:0}
.lesson.screens .s-watch.side .watch-row{grid-area:row;align-self:start;flex-direction:column;align-items:flex-start;gap:12px;margin-top:14px}
.lesson.screens .s-watch.side .sc-rail{display:none}
.lesson.screens .ptw-head{margin-bottom:4px}
.lesson.screens .s-act .work{margin-top:0}
.lesson.screens .s-end > :first-child{margin-top:0}
/* captions sit over the picture, the sentence being spoken */
.screens .player.cc-on .sc-ccov:not(:empty){display:block;position:absolute;left:5%;right:5%;bottom:62px;z-index:3;margin:0;color:#fff;font-size:clamp(14px,1.45vw,20px);line-height:1.6;text-align:center;text-wrap:balance;pointer-events:none}
.screens .player.is-fs.cc-on .sc-ccov:not(:empty){bottom:78px;font-size:clamp(17px,2vw,30px)}
.screens .player.cc-on .sc-cap{bottom:calc(max(12cqw,64px) + 46px)}
/* arrival */
.lesson.screens .screen > *{transition:opacity .6s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.lesson.screens .screen:not(.in) > *{opacity:0;transform:translateY(26px)}
.lesson.screens .screen > *:nth-child(2){transition-delay:.07s}
.lesson.screens .screen > *:nth-child(3){transition-delay:.14s}
.lesson.screens .screen > *:nth-child(4){transition-delay:.21s}
.lesson.screens .screen > *:nth-child(n+5){transition-delay:.28s}
/* the gate under the lesson */
.gate{display:flex;justify-content:center;margin-top:14px;min-height:40px}
.gate-lock{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:inherit;line-height:inherit;font-weight:600;font-size:.92rem;cursor:pointer;text-align:left}
.gate-lock:hover{border-color:var(--muted);color:var(--cream)}
.gate-lock svg{width:16px;height:16px}
.gate-go{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--tone);background:color-mix(in srgb,var(--tone) 16%,transparent);color:var(--cream);font:inherit;font-weight:700;cursor:pointer;transition:background-color .2s,transform .2s}
.gate-go:hover{background:var(--tone);color:var(--tone-ink);transform:translateY(-2px)}
.gate-go .down{display:grid;place-items:center;width:22px;height:22px;transform:rotate(90deg);animation:nudge 1.6s ease-in-out infinite}
.gate-go .down svg{width:18px;height:18px}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 4px}}
/* up next */
.upnext{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:22px;padding:16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--tone);transition:transform .2s,box-shadow .2s}
.upnext:hover{transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(0,0,0,.9)}
.un-pic{width:150px;aspect-ratio:16/10;border-radius:12px;background:var(--bg-deep) center/cover no-repeat;display:grid;place-items:center;font-family:var(--f-serif);font-size:2rem;color:var(--tone)}
.un-pic svg{width:30px;height:30px}
.un-copy h4{font-size:1.2rem;font-weight:800;margin-top:4px;line-height:1.25}
.un-copy p:not(.label){color:var(--muted);margin-top:4px;font-size:.95rem}
@media (max-width:640px){.upnext{grid-template-columns:96px 1fr}.un-pic{width:96px}.un-go{grid-column:1/-1;justify-content:center}}
/* where you are: dots on the right edge */
.scr-dots{position:fixed;right:clamp(10px,1.6vw,22px);top:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;gap:12px}
.scr-dots:empty{display:none}
.scr-dots button{position:relative;width:12px;height:12px;border-radius:50%;border:2px solid var(--muted);background:transparent;padding:0;cursor:pointer;transition:transform .2s,background-color .2s,border-color .2s}
.scr-dots button:hover{transform:scale(1.25);border-color:var(--cream)}
.scr-dots button[aria-current="true"]{background:var(--cream);border-color:var(--cream);transform:scale(1.15)}
.scr-dots span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.78rem;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--panel-2);color:var(--cream);opacity:0;pointer-events:none;transition:opacity .2s}
.scr-dots button:hover span,.scr-dots button:focus-visible span{opacity:1}
@media (max-width:1180px){.scr-dots{display:none}}
.watch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.watch-row .watch{margin-top:0}
.screens .watch-row{margin-top:12px}
.screens .watch-row .gate{margin-top:0;min-height:0}
@media (min-width:760px) and (min-height:561px){.screens .s-watch .sc-rail{display:none}}
.gate.shake,.step-gate.shake{animation:shake .45s ease}
/* each screen opens once the one above it is done; its foot says what's left, then offers the next one */
.lesson.screens .screen.held{display:none}
.step-gate{display:flex;justify-content:center;margin-top:clamp(16px,2.4vh,26px);min-height:40px}
.step-gate:empty{display:none}
/* takeaways: what's left sits on the same line as the count */
.tk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:12px}
.tk-foot .tkx-count{margin-top:0}
.tk-foot .step-gate{margin-top:0;min-height:0}
.scr-dots button.shut{opacity:.4;border-style:dashed;cursor:not-allowed}
.scr-dots button.shut:hover{transform:none;border-color:var(--muted)}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:4px 0}}
/* hovering a step on the player's bar shows that part's picture and name */
.sc-dot{position:relative}
.sc-prev{display:none;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:168px;flex-direction:column;gap:6px;padding:6px;border-radius:10px;background:var(--bg-deep);border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.8);color:var(--cream);text-align:left;z-index:4;pointer-events:none}
.sc-prev .pv{display:block;aspect-ratio:16/9;border-radius:6px;background:var(--panel) var(--img) center/cover no-repeat}
.sc-prev .pv.tile{display:grid;place-items:center;font-family:var(--f-serif);font-size:1.4rem;color:var(--tone);background:radial-gradient(90% 90% at 85% 0%,color-mix(in srgb,var(--tone) 38%,transparent),transparent 70%),var(--panel)}
.sc-prev b{font-size:.78rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (hover:hover){.sc-dot:hover .sc-prev{display:flex;animation:tkin .18s ease}}
.sc-dot:first-child .sc-prev{left:0;transform:none}
.sc-dot:last-child .sc-prev{left:auto;right:0;transform:none}
/* the last screen: the lesson is done and the course bar fills in */
.end-hero{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.end-badge{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--tone);color:var(--tone-ink);box-shadow:0 0 0 8px color-mix(in srgb,var(--tone) 22%,transparent)}
.end-badge svg{width:32px;height:32px}
.end-hero h3{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.1rem);font-weight:800;line-height:1.15;margin-top:4px}
.end-bar{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.end-bar i{width:30px;height:8px;border-radius:4px;background:var(--line)}
.end-bar i.on{background:var(--tone)}
.end-bar span{margin-left:6px;font-size:.88rem;color:var(--muted);font-weight:600}
.screen.in .end-badge{animation:pop .6s cubic-bezier(.3,1.6,.5,1) .15s both}
.screen.in .end-bar i.now{animation:fillin .7s ease .35s both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes fillin{from{background:var(--line)}to{background:var(--tone)}}
@media (max-width:640px){.end-badge{width:48px;height:48px;box-shadow:0 0 0 6px color-mix(in srgb,var(--tone) 22%,transparent)}.end-badge svg{width:24px;height:24px}}
/* flip cards: full rows on wide screens; on phones a row to swipe through, every card the same height */
@media (min-width:860px){.look-bold .cards{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
@media (max-width:640px){
  .look-bold .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-18px;padding:4px 18px 10px;scroll-padding-inline:18px;scrollbar-width:none}
  .look-bold .cards::-webkit-scrollbar{display:none}
  .look-bold .fcard{flex:0 0 84%;scroll-snap-align:start}
}
/* shorter windows: a smaller picture and tighter list in the takeaways explorer */
.tkx-pic{max-height:min(230px,24vh)}
@media (max-height:700px){.tkx-item{padding:9px 12px}.tkx-list{gap:6px}.tkx-copy{padding:16px 20px 18px}.tkx-copy > p:not(.label){font-size:1rem}}
@media (max-width:640px){.end-bar span{flex-basis:100%;margin:4px 0 0}}
/* the Learn Brands frame and other short windows: tighter screens so each part fits between the bars */
@media (min-width:760px) and (max-height:640px){
  .lesson.screens .screen{padding-block:12px}
  .lesson.screens .ptw-head h3{font-size:1.5rem}
  .look-bold .ptw-head h3::after{margin-top:7px}
  .tkx{margin-top:12px}
  .tkx-pic{max-height:17vh}
  .tkx-nav{margin-top:12px}
  .look-bold .cards .fcard{min-height:140px}
}
@media (max-height:500px){
  .lesson.screens .s-watch.side .watch-row{margin-top:8px;gap:8px}
  .lesson.screens .s-watch.side .lesson-head .lede{-webkit-line-clamp:3}
}
/* a cover photo gets the whole side column in the bold look */
@media (min-width:860px){.look-bold .glass-wrap.photo{width:100%}.look-bold .glass-wrap.photo .cover-art{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}}
/* A long finish screen (feedback card, share, certificate) keeps its picture at the top beside the heading, not halfway down */
@media (min-width:860px){.look-bold .finish{align-items:start}.look-bold .finish>.glass-wrap{position:sticky;top:96px}}
/* the Up next card waits for the lesson's activities too, and says what's left */
.un-left{grid-column:1/-1;margin:0;font-size:.88rem;color:var(--muted);text-align:right}
@media (max-width:640px){.un-left{text-align:center}}
.upnext:has(.un-go.waiting):hover{transform:none;box-shadow:none}
/* phones: what Continue is waiting for shows as a strip just above the bar */
@media (max-width:560px){.look-bold .controls .hint:not(:empty){display:block;position:absolute;left:0;right:0;bottom:100%;padding:7px 16px;background:var(--bg);border-top:1px solid var(--line);text-align:center;font-size:.82rem}}
/* until the activities are done the badge waits, then pops in the lesson color */
.end-hero.pending .end-badge{background:var(--panel);color:var(--dim);box-shadow:0 0 0 8px color-mix(in srgb,var(--tone) 10%,transparent)}
.screen.in .end-hero.pending .end-badge{animation:none}
.end-bar i.now:not(.on){background:color-mix(in srgb,var(--tone) 30%,var(--line))}
/* ---------- Explainer animation ----------
   Picture scenes can hold more pictures (shots) that come in on their phrases with a slow push or pan, a caption that
   changes with them, and key words (callouts) that pop over the picture. Timeline and flow scenes draw as they're told. */
.sc-shot{opacity:0;transform:scale(1.02);transition:opacity .9s ease}
.sc-shot.on{opacity:1;transition:opacity .9s ease,transform 11s linear}
/* The push and pan center on the picture's focus point (--ox, --oy, set by kit.js from the faces in it), zoom no further
   than keeps the faces in frame (--kz) and drift toward the middle (--kx, --ky), so a face never slides out of view. */
.sc-shot.kb0{transform:scale(1)}.sc-shot.kb0.on{transform:scale(var(--kz,1.12))}
.sc-shot.kb1{transform:scale(var(--kz,1.12))}.sc-shot.kb1.on{transform:scale(1.02)}
.sc-shot.kb2{transform:translate(var(--kx,3%),0) scale(var(--kp,1.1))}.sc-shot.kb2.on{transform:translate(0,0) scale(var(--kp,1.1))}
.sc-shot.kb3{transform:translate(0,var(--ky,3%)) scale(var(--kp,1.1))}.sc-shot.kb3.on{transform:translate(0,0) scale(1.03)}
.calm .sc-img.sc-shot,.calm .sc-img.sc-shot.on,.sc-img.sc-shot.still{transform:none!important}
.sc-stage .sc-in.still,.sc-stage .still i::after,.sc-stage .still::before,.sc-stage .still::after{transition:none!important}
.sc-image .sc-cap.on:has(~ .sc-cap.on){opacity:0;transform:translateY(-1.5cqw)}
.sc-calls{position:absolute;left:5cqw;top:5cqw;right:30%;display:flex;flex-direction:column;align-items:flex-start;gap:1.2cqw;z-index:2;pointer-events:none}
.sc-call{display:inline-block;padding:.9cqw 2cqw;border-radius:999px;background:var(--panel-2);color:var(--cream);font-weight:800;font-size:max(2.4cqw,13px);line-height:1.2;box-shadow:0 1cqw 3cqw -1cqw rgba(0,0,0,.6);transform:translateY(2cqw) scale(.85);transform-origin:left center}
.sc-call.on{transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.sc-call.on:has(~ .sc-call.on ~ .sc-call.on ~ .sc-call.on){display:none}
.look-bold .sc-call{background:var(--tone);color:var(--tone-ink)}
/* key words and captions keep off faces: kit.js (foCalls) picks the corner that covers the least of them */
.sc-image.calls-r .sc-calls{left:30%;right:5cqw;align-items:flex-end}
.sc-image.calls-r .sc-call{transform-origin:right center}
.sc-image.calls-low .sc-calls{top:auto;bottom:var(--calls-b,40%)}
.sc-image .sc-cap.cap-r{left:auto;right:6cqw;text-align:right;margin-left:auto}
/* small players with captions on: the spoken line takes the caption's place instead of stacking on it */
@container (max-width:520px){.cc-on .sc-image .sc-cap{display:none}}
.sc-tl,.sc-flow{display:flex;flex-direction:column;gap:4cqw;width:100%}
.sc-tl ol,.sc-flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.tl-it{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.4cqw;padding-right:2cqw}
.tl-it b{font-family:var(--f-serif);font-size:max(min(4.2cqw,calc(146cqw / var(--n) / var(--lw,5))),14px);line-height:1;color:var(--tone);white-space:nowrap}
.tl-it i{position:relative;display:block;width:100%;height:.5cqw;min-height:3px;border-radius:2px;background:color-mix(in srgb,currentColor 18%,transparent)}
.tl-it i::before{content:"";position:absolute;left:0;top:50%;width:2.2cqw;height:2.2cqw;min-width:12px;min-height:12px;border-radius:50%;background:var(--tone);transform:translate(0,-50%)}
.tl-it i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--tone);transform:scaleX(0);transform-origin:left}
.tl-it.on i::after{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .2s}
.tl-it span{font-size:max(2.3cqw,13px);font-weight:600;line-height:1.3}
.look-bold .lay-timeline .tl-it b{color:var(--tone-ink)}
.look-bold .lay-timeline .tl-it i::before,.look-bold .lay-timeline .tl-it i::after{background:var(--tone-ink)}
.sc-flow ol{gap:3.2cqw}
.fw-it{position:relative;display:flex;flex-direction:column;gap:1cqw;padding:2.4cqw;border-radius:2cqw;background:color-mix(in srgb,currentColor 10%,transparent);border:2px solid color-mix(in srgb,currentColor 22%,transparent)}
.fw-it + .fw-it::before{content:"";position:absolute;left:-3.2cqw;top:50%;width:3.2cqw;height:2px;background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:left}
.fw-it + .fw-it::after{content:"";position:absolute;left:-1.4cqw;top:50%;border:1cqw solid transparent;border-left-color:currentColor;opacity:0;transform:translateY(-50%)}
.fw-it.on + .fw-it.on::before{transform:scaleX(1);transition:transform .5s ease}
.fw-it.on + .fw-it.on::after{opacity:.5;transition:opacity .3s ease .4s}
.fw-n{display:grid;place-items:center;width:4.4cqw;height:4.4cqw;min-width:22px;min-height:22px;border-radius:50%;background:var(--tone);color:var(--tone-ink);font-weight:800;font-size:max(2.2cqw,12px)}
.look-bold .lay-flow .fw-n{background:var(--tone-ink);color:var(--tone)}
.fw-it b{font-size:max(2.5cqw,14px);line-height:1.2}
.fw-it small{font-size:max(1.9cqw,12px);line-height:1.3;opacity:.8}
@container (max-width:520px){
  .sc-tl ol,.sc-flow ol{grid-template-columns:1fr;gap:2.4cqw}
  .tl-it{flex-direction:row;align-items:baseline;gap:3cqw}
  .tl-it b{font-size:5.2cqw;min-width:18cqw}
  .tl-it i{display:none}
  .tl-it span,.fw-it b{font-size:3.8cqw}
  .fw-it{flex-direction:row;align-items:center;padding:2cqw 3cqw}
  .fw-it small{display:none}
  .fw-it + .fw-it::before,.fw-it + .fw-it::after{display:none}
  .sc-call{font-size:3.6cqw}
  .sc-flow ol.many{grid-template-columns:1fr 1fr}
  .sc-flow{gap:3cqw}
}
/* ---------- Hotspots ----------
   A picture (a sample ID, a label) shown whole at its own shape, with markers at x%/y% of it. The details open beside
   the picture on wide cards and under it on narrow ones, so a marker is never covered. --ar (set by kit.js once the
   picture loads) is its width over height; --hs-maxh keeps the whole picture in view between the bars. */
.act.is-hs{padding:clamp(16px,2.4vw,26px)}
.hs-wrap{container:hs / inline-size}
/* stacked (phones): a tall picture leaves room under it for the details */
.hs{--hs-maxh:max(220px,calc(100vh - var(--top-h,68px) - var(--nav-h,72px) - 340px));display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "panel";gap:14px}
@supports (height:100svh){.hs{--hs-maxh:max(220px,calc(100svh - var(--top-h,68px) - var(--nav-h,72px) - 340px))}}
.hs-head{grid-area:head;min-width:0}
.hs-fig{grid-area:fig;margin:0;min-width:0}
.hs-frame{display:flex;flex-direction:column;align-items:center;gap:8px}
.hs-pic{position:relative;container-type:inline-size;width:min(100%,calc(var(--hs-maxh) * var(--ar,1.586)));aspect-ratio:var(--ar,1.586);border-radius:12px;background:var(--bg-deep);box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.hs-pic img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;border-radius:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hs-blank{position:absolute;inset:0;border:1.5px dashed var(--line);border-radius:12px}
.hs-fig figcaption{align-self:stretch;text-align:center;font-size:.8rem;line-height:1.4}
.hs-panel{grid-area:panel;min-width:0}
@container hs (min-width:600px){
  .hs{--hs-maxh:max(200px,calc(100svh - var(--top-h,68px) - var(--nav-h,72px) - 110px))}
  .hs{grid-template-columns:min(calc(100% - 324px),calc(var(--hs-maxh) * var(--ar,1.586))) minmax(300px,420px);grid-template-areas:"fig head" "fig panel";grid-template-rows:auto 1fr;column-gap:24px;row-gap:14px;justify-content:center;align-items:start}
  .hs-pic{width:100%}
}
@media (max-height:560px){@container hs (min-width:600px){.hs{--hs-maxh:max(180px,calc(100svh - var(--top-h,52px) - var(--nav-h,58px) - 36px))}}}
/* markers: a 44px button around a smaller dot, light with a dark ring so it shows on any photo. The buttons make no
   stacking context of their own (no z-index or transform), so every dot paints above every button's wider tap area:
   with two spots close together, tapping a dot always opens that one. */
.hs-mk{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hs-dot{position:relative;z-index:2;display:grid;place-items:center;width:30px;height:30px;width:clamp(25px,4.3cqw,32px);height:clamp(25px,4.3cqw,32px);border-radius:50%;background:#fff;color:#14112a;border:2px solid #fff;box-shadow:0 0 0 2px rgba(10,8,30,.85),0 4px 14px rgba(0,0,0,.5);transition:transform .2s cubic-bezier(.3,1.5,.5,1),background-color .2s,color .2s}
.hs-dot .i-plus,.hs-dot .i-check{width:56%;height:56%;display:grid;place-items:center}
.hs-dot .i-plus svg,.hs-dot .i-check svg{width:100%;height:100%;display:block}
.hs-dot b{font-weight:800;font-size:.88rem;line-height:1;font-variant-numeric:tabular-nums}
/* a plus until opened, then a check (numbered markers keep the number and get a small check badge) */
.hs-dot .i-check,.hs-mk.seen .i-plus{display:none}
.hs-mk.seen .i-check{display:grid}
.hs-mk.seen .hs-dot{background:var(--tone);color:var(--tone-ink)}
.hs-mk[aria-expanded="true"] .hs-dot{z-index:3;background:var(--mint);color:var(--mint-ink);transform:scale(1.18);box-shadow:0 0 0 2px rgba(10,8,30,.85),0 0 0 7px color-mix(in srgb,var(--mint) 45%,transparent),0 6px 16px rgba(0,0,0,.55)}
.hs-ok{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:#14895c;color:#fff;display:none;place-items:center;box-shadow:0 0 0 2px #fff}
.hs-ok svg{width:10px;height:10px}
.hs-mk.seen .hs-ok{display:grid}
@media (hover:hover){.hs-mk:hover .hs-dot{transform:scale(1.1)}.hs-mk[aria-expanded="true"]:hover .hs-dot{transform:scale(1.18)}}
.hs-mk:focus-visible{outline:none}
.hs-mk:focus-visible::before{content:"";position:absolute;inset:2px;border-radius:50%;border:3px solid var(--mint);box-shadow:0 0 0 2px rgba(10,8,30,.85),inset 0 0 0 2px rgba(10,8,30,.85)}
/* a gentle pulse until a spot is opened, staggered across the markers */
.hs-mk:not(.seen) .hs-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 2px var(--tone);opacity:0;pointer-events:none;animation:hspulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--d,0s)}
@keyframes hspulse{0%{transform:scale(.8);opacity:.95}70%,100%{transform:scale(1.75);opacity:0}}
@media (prefers-reduced-motion: reduce){.hs-dot::after{display:none!important}.hs-dot{transition:none}}
@container (max-width:420px){.hs-dot b{font-size:.8rem}}
/* the details: a dark card in the classic look, a light one in the bold look */
.hs-card{border-radius:var(--r-sm);padding:16px 18px;background:var(--bg-deep);border:1.5px solid var(--line);border-left:4px solid var(--tone)}
.hs-card.idle{border-left-color:var(--line)}
.hs-card h5{margin:6px 0 0;font-size:1.2rem;font-weight:800;line-height:1.25;display:flex;align-items:flex-start;gap:10px}
.hs-n{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:-1px;border-radius:50%;background:var(--tone);color:var(--tone-ink);font-size:.86rem;font-weight:800}
.hs-text{margin-top:8px;font-size:1rem;line-height:1.55;color:var(--muted);text-wrap:pretty}
.hs-idle{color:var(--muted);font-weight:600}
.hs-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px}
.hs-prog{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--muted)}
.hs-prog svg{width:16px;height:16px;color:var(--good)}
.hs-foot .btn{margin-left:auto}
.hs-panel.swap .hs-card{animation:tkin .3s ease}
.look-bold .hs-card{background:var(--paper);color:var(--paper-ink);border:0;border-top:6px solid var(--tone);box-shadow:0 18px 36px -24px rgba(0,0,0,.9)}
.look-bold .hs-card.idle{border-top-color:color-mix(in srgb,var(--paper-ink) 18%,transparent)}
.look-bold .hs-card .label,.look-bold .hs-prog,.look-bold .hs-idle{color:color-mix(in srgb,var(--paper-ink) 62%,transparent)}
.look-bold .hs-text{color:color-mix(in srgb,var(--paper-ink) 86%,transparent)}
.look-bold .hs-prog svg{color:#14895c}
.look-bold .hs-card .btn.go{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.look-bold .hs-card .btn.go:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--paper-ink) 85%,var(--tone))}
@media (max-width:520px){.hs-card{padding:14px 15px}.hs-card h5{font-size:1.1rem}}

/* ---------- Animated lessons on phones ----------
   The words on a slide shrink to fit above the spoken line when they'd run under it (kit.js sets --tz). */
.sc-stage:not(.lay-image) > .sc{transform:translateY(var(--ty,0px)) scale(var(--tz,1))}
/* with less motion asked for, nothing in the player eases at all (the page-wide rule would ease every change over a
   hundredth of a millisecond, long enough to measure a slide at its old size) */
@media (prefers-reduced-motion: reduce){.player.scenes,.player.scenes *{transition:none!important}}
/* before it plays, the picture and the play button: the key words come in with the lesson */
.player.scenes:has(> .sc-start:not([hidden])) .sc-calls{visibility:hidden}
/* captions on: text slides leave room for two lines of the spoken line above the controls (in the page on computers
   and tablets, and in full screen) */
@container (min-width:521px){.screens .player.scenes.cc-on:not(.is-fs):not(.tall) .sc-stage:not(.lay-image){padding-bottom:max(12cqw,calc(72px + 3.2 * clamp(14px,1.45vw,20px)))}}
.player.scenes.is-fs.cc-on:not(.tall) .sc-stage:not(.lay-image){padding-bottom:max(12cqw,calc(88px + 3.2 * clamp(17px,2vw,30px)))}
@media (max-height:500px){
  .player.scenes.is-fs:not(.tall) .sc-stage:not(.lay-image){padding-top:4cqw}
  .screens .player.scenes.is-fs.cc-on:not(.tall) .sc-ccov:not(:empty),.player.scenes.is-fs.cc-on:not(.tall) .sc-ccov:not(:empty){bottom:68px;font-size:16px;line-height:1.5}
  .player.scenes.is-fs.cc-on:not(.tall) .sc-stage:not(.lay-image){padding-bottom:126px}
  .player.scenes.is-fs.cc-on:not(.tall) .sc-image .sc-cap{bottom:124px}
}
/* Phones held upright: kit.js (fitTall) makes the player phone shaped, as tall as fits between the bars (up to 9:16),
   and adds .tall; full screen takes the same shape. Pictures fill it, their crops kept on the faces in them. The words
   on a slide get bigger, and the spoken line has a band of its own above the controls so it never covers them. */
.player.scenes.tall{container-type:size;aspect-ratio:auto;--bar:60px;--ccb:0px}
.screens .player.scenes.tall.cc-on,.player.scenes.tall.is-fs.cc-on{--ccb:calc(3.1 * clamp(14px,4.4cqw,18px) + 14px)}
.player.scenes.tall .sc-stage{padding:10cqw 8cqw calc(var(--bar) + var(--ccb) + 6cqw)}
.player.scenes.tall .sc-stage.lay-image{padding:0}
@container (max-height:460px){.player.scenes.tall .sc-stage{padding-top:6cqw;padding-bottom:calc(var(--bar) + var(--ccb) + 3cqw)}}
.player.scenes.tall .sc-big{font-size:calc(10.4cqw * var(--tf,1));max-width:none}
.player.scenes.tall .sc-sub{font-size:calc(5.4cqw * var(--tf,1));margin-top:calc(4cqw * var(--tf,1))}
.player.scenes.tall .sc-head{font-size:calc(7.2cqw * var(--tf,1));margin-bottom:calc(5cqw * var(--tf,1))}
.player.scenes.tall .sc-points ul,.player.scenes.tall .sc-points ul:has(li:nth-child(4)){gap:calc(3.6cqw * var(--tf,1))}
.player.scenes.tall .sc-points li,.player.scenes.tall .sc-points ul:has(li:nth-child(4)) li{font-size:calc(5.2cqw * var(--tf,1));padding-left:calc(6.4cqw * var(--tf,1))}
.player.scenes.tall .sc-points li.has-ico{padding-left:0}
.player.scenes.tall .sc-ico.sc-lead{width:calc(14cqw * var(--tf,1));height:calc(14cqw * var(--tf,1))}
.player.scenes.tall .sc-points li::before{width:calc(2.8cqw * var(--tf,1));height:calc(2.8cqw * var(--tf,1))}
.player.scenes.tall .sc-steps ol{gap:calc(4cqw * var(--tf,1))}
.player.scenes.tall .sc-steps li{font-size:calc(5.2cqw * var(--tf,1));gap:calc(3.4cqw * var(--tf,1))}
.player.scenes.tall .sc-steps .n{font-size:calc(7.4cqw * var(--tf,1));min-width:calc(5cqw * var(--tf,1))}
.player.scenes.tall .sc-quote blockquote{font-size:calc(8.6cqw * var(--tf,1))}
.player.scenes.tall .sc-num{font-size:calc(30cqw * var(--tf,1))}
.player.scenes.tall .sc-unit{font-size:calc(12cqw * var(--tf,1))}
.player.scenes.tall .sc-label{font-size:calc(5.6cqw * var(--tf,1));margin-top:calc(3cqw * var(--tf,1))}
.player.scenes.tall .sc-cols{grid-template-columns:1fr;gap:calc(3.4cqw * var(--tf,1))}
.player.scenes.tall .sc-col{padding:calc(4cqw * var(--tf,1)) calc(4.6cqw * var(--tf,1));border-radius:3cqw;border-top-width:calc(1.2cqw * var(--tf,1))}
.player.scenes.tall .sc-col h4{font-size:calc(5.6cqw * var(--tf,1));margin-bottom:calc(2.4cqw * var(--tf,1))}
.player.scenes.tall .sc-col ul{font-size:calc(4.6cqw * var(--tf,1));gap:calc(1.8cqw * var(--tf,1))}
.player.scenes.tall .sc-vs{font-size:calc(6.4cqw * var(--tf,1));justify-self:center}
.player.scenes.tall .sc-tl ol,.player.scenes.tall .sc-flow ol,.player.scenes.tall .sc-flow ol.many{grid-template-columns:1fr;gap:calc(4.4cqw * var(--tf,1))}
.player.scenes.tall .tl-it b{font-size:calc(7.4cqw * var(--tf,1));min-width:calc(24cqw * var(--tf,1))}
.player.scenes.tall .tl-it span,.player.scenes.tall .fw-it b{font-size:calc(5cqw * var(--tf,1))}
.player.scenes.tall .fw-it{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(3.4cqw * var(--tf,1));row-gap:calc(1cqw * var(--tf,1));align-items:center;padding:calc(3.4cqw * var(--tf,1)) calc(4cqw * var(--tf,1));border-radius:3cqw}
.player.scenes.tall .fw-it small{display:block;grid-column:2;font-size:calc(3.9cqw * var(--tf,1))}
.player.scenes.tall .tight .fw-it small{display:none}
.player.scenes.tall .fw-n{grid-row:span 2;width:calc(8cqw * var(--tf,1));height:calc(8cqw * var(--tf,1));font-size:calc(4cqw * var(--tf,1))}
/* pictures: the darkening at the foot holds the caption, the spoken line and the controls */
.player.scenes.tall .sc-img::after{background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 86%)}
/* light pages (theme.scheme light): photos keep a dark scrim and white captions */
.scheme-light .sc-img::after{background:linear-gradient(180deg,transparent 45%,rgba(18,10,4,.7))}
.scheme-light .player.scenes.tall .sc-img::after{background:linear-gradient(180deg,transparent 42%,rgba(18,10,4,.82) 86%)}
.scheme-light .sc-image .sc-cap{color:#fff}
.scheme-light{--paper:#fff;--paper-ink:var(--cream);--good:#17784F;--good-bg:#E3F4EA;--bad:#B4461C;--bad-bg:#FBE6DA}
.scheme-light .opt.is-right .k,.scheme-light .opt.is-wrong .k{color:#fff}
.scheme-light .tkx-item:not(.on):not(:hover) .n{background:rgba(0,0,0,.07);color:var(--cream)}
.scheme-light .tkx-item.on .ok{color:var(--good)}
.scheme-light .fbcard .sq-in,.scheme-light .sq-opts button:not([aria-checked="true"]){background:#fff;color:var(--cream);border-color:var(--line)}
.scheme-light .fbcard textarea{background:#fff;color:var(--cream);border-color:var(--line)}
.player.scenes.tall .sc-image .sc-cap,.player.scenes.tall.cc-on .sc-image .sc-cap{display:block;left:7cqw;right:7cqw;bottom:calc(var(--bar) + var(--ccb) + 5cqw);font-size:7.4cqw;max-width:none}
.player.scenes.tall .sc-image .sc-cap.cap-r{left:auto;right:7cqw}
.player.scenes.tall .sc-calls,.player.scenes.tall .sc-image.calls-r .sc-calls{top:7cqw;left:6cqw;right:6cqw;gap:2.4cqw}
.player.scenes.tall .sc-image.calls-low .sc-calls{top:auto;bottom:var(--calls-b,40%)}
.player.scenes.tall .sc-call{font-size:4.6cqw;padding:1.8cqw 3.8cqw}
.screens .player.scenes.tall.cc-on .sc-ccov:not(:empty),.player.scenes.tall.is-fs.cc-on .sc-ccov:not(:empty){left:5cqw;right:5cqw;bottom:calc(var(--bar) + 8px);font-size:clamp(14px,4.4cqw,18px);line-height:1.55}
/* the play button: kit.js (posterSpot) puts it where it shows above the bars and keeps it off faces */
.player.scenes.tall .sc-start{place-items:start center;padding-top:calc(var(--playY,50cqh) - 38px)}
.player.scenes.tall .sc-start .play{width:76px;height:76px}
/* a lesson opening on a slide with no picture: posterSpot (textSpot) puts the button where it covers none of the words */
.player.scenes .sc-start.spot{place-items:start start;padding:0}
.player.scenes .sc-start.spot .play{position:absolute;left:var(--playX);top:var(--playY);transform:translate(-50%,-50%)}
.player.scenes .sc-start.spot:hover .play{transform:translate(-50%,-50%) scale(1.06)}

/* ---------- Typography: no lone word on a last line ----------
   Headings and short lines balance their lines; paragraphs and list items avoid ending on a single word (browsers
   without text-wrap: pretty get a no-break space before a short last word from kit.js). */
h1,h2,h3,h4,h5,blockquote,.label,.sc-cap,.sc-call,.fbl-q,.un-copy h4,.tkx-copy h4,.hs-card h5{text-wrap:balance}
p,li,figcaption,.ftext,.hs-text,.why,.q,.opt span,.tkx-copy p,.lede{text-wrap:pretty}

/* Downloads: handouts and job aids from the Course Manager's Downloads library, shown as resource cards with a cover */
.dls{margin-top:clamp(18px,2.6vw,28px)}
.cover .dls{margin-top:28px}
.dl-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
.cover .dl-list,.finish .dl-list{grid-template-columns:minmax(0,600px)}
.dl{position:relative;display:flex;align-items:center;gap:clamp(16px,2.4vw,24px);padding:clamp(16px,2.2vw,22px) clamp(16px,2.4vw,24px) clamp(16px,2.2vw,22px) clamp(18px,2.6vw,28px);border-radius:var(--r);border:1.5px solid var(--line);background:linear-gradient(135deg,var(--panel-2),var(--panel));color:var(--cream);text-decoration:none;overflow:hidden;box-shadow:0 22px 40px -28px rgba(0,0,0,.9);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.dl::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:var(--tone,var(--mint));opacity:.08;pointer-events:none}
.dl:hover{border-color:var(--tone,var(--mint));transform:translateY(-3px);box-shadow:0 30px 48px -28px rgba(0,0,0,.95)}
.dl-doc{position:relative;flex:none;width:clamp(78px,11vw,104px);margin:4px 6px 4px 0;transform:rotate(-4deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dl-doc::before,.dl-doc::after{content:"";position:absolute;inset:0;border-radius:4px;background:#f4f1ea;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.dl-doc::before{transform:translate(9px,5px) rotate(6deg);background:#ddd8cc}
.dl-doc::after{transform:translate(5px,2px) rotate(3deg)}
.dl:hover .dl-doc{transform:rotate(0deg) translateY(-4px) scale(1.04)}
.dl-pg{position:relative;z-index:1;display:flex;flex-direction:column;aspect-ratio:8.5/11;border-radius:4px;background:#fff;overflow:hidden;box-shadow:0 10px 22px -8px rgba(0,0,0,.6)}
.dl-band{position:relative;flex:none;height:40%;display:grid;place-items:center;background:var(--bg);border-bottom:4px solid var(--tone,var(--mint))}
.dl-band img{position:absolute;left:18%;top:16%;width:64%;height:68%;object-fit:contain}
.dl-band b{color:var(--cream);font-size:.8rem;letter-spacing:.06em}
.dl-pt{margin:9% 10% 6%;color:var(--bg);font-size:clamp(.42rem,.62vw,.52rem);font-weight:800;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-pg i{display:block;height:3px;margin:0 10% 6%;border-radius:2px;background:#e3e0d8}
.dl-pg i:nth-of-type(2n){margin-right:26%}
.dl-pg em{position:absolute;right:6%;bottom:5%;padding:2px 5px;border-radius:3px;background:var(--tone,var(--mint));color:var(--tone-ink,var(--mint-ink));font-style:normal;font-weight:800;font-size:.5rem;letter-spacing:.06em}
.dl-cov{width:100%;height:100%;object-fit:cover;object-position:top}
.dl-t{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:5px;flex:1}
.dl-k{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tone,var(--mint))}
.dl-t b{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.25;overflow-wrap:break-word}
.dl-n{font-size:.92rem;line-height:1.45;color:var(--muted);text-wrap:pretty}
.dl-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px}
.dl-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 18px;border-radius:999px;background:var(--mint);color:var(--mint-ink);font-weight:800;font-size:.9rem;transition:filter .2s ease}
.dl-btn svg{width:17px;height:17px}
.dl:hover .dl-btn{filter:brightness(1.08)}
.dl-f small{color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.02em}
.look-bold .dl{background:var(--paper);border-color:var(--paper);color:var(--paper-ink)}
.look-bold .dl::after{opacity:.12}
.look-bold .dl:hover{border-color:var(--tone,var(--mint))}
.look-bold .dl-k{color:color-mix(in srgb,var(--paper-ink) 70%,var(--tone,var(--mint)))}
.look-bold .dl-n,.look-bold .dl-f small{color:color-mix(in srgb,var(--paper-ink) 68%,transparent)}
.look-bold .dl-btn{background:var(--bg);color:var(--cream)}
@media (max-width:480px){.dl{align-items:flex-start}.dl-doc{width:70px}}
@media (prefers-reduced-motion:reduce){.dl,.dl-doc{transition:none}.dl:hover,.dl:hover .dl-doc{transform:none}.dl-doc{transform:rotate(-4deg)}}

/* Pictures shown whole (course.json "whole", and every hotspots picture): fitted inside the frame on the backdrop, never
   cropped. The inset leaves room for the gentle push (--kp 1.025 from kit.js) so the edges stay in view, and in scenes
   it keeps the picture above the controls (and the caption line when captions are on). */
[data-whole]{background-size:contain!important;background-origin:content-box!important;background-position:50% 50%!important;background-repeat:no-repeat!important;padding:var(--wpad,3%);box-sizing:border-box}
img[data-whole]{object-fit:contain!important;object-position:50% 50%!important}
.sc-img[data-whole]{--wpad:4%;padding-bottom:58px}
.player.cc-on .sc-img[data-whole]{padding-bottom:88px}
.sc-img[data-whole]::after,.player.scenes.tall .sc-img[data-whole]::after{background:linear-gradient(180deg,transparent 74%,color-mix(in srgb,var(--bg-deep) 62%,transparent))}
.tkx-pic[data-whole]{--wpad:2.5%}
.act-pic[data-whole]{aspect-ratio:var(--ar,16/8);max-height:min(62vh,440px);margin-left:auto;margin-right:auto;--wpad:2%}
@media (max-height:500px){.act-pic[data-whole]{aspect-ratio:auto;height:150px}}
.sc-prev .pv[data-whole],.un-pic[data-whole]{--wpad:5%}

/* ---------- Course map ----------
   Every lesson with its parts and the final quiz in one list: what's done, where you are, what's locked. Opened from the
   progress bar, the Course map button (bold look) and Review a lesson on the last screen. */
html.map-on{overflow:hidden}
.map{position:fixed;inset:0;z-index:15;display:flex;justify-content:center;align-items:flex-start;padding:clamp(12px,4vh,44px) 16px;overflow-y:auto;overscroll-behavior:contain;background:color-mix(in srgb,var(--bg-deep) 74%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.map-in{width:100%;max-width:760px;background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px clamp(16px,3vw,28px) 18px;animation:mapin .22s ease-out}
@keyframes mapin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.map-in{animation:none}}
.map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.map-head h2{margin-top:4px;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);line-height:1.1;text-wrap:balance}
.map-sub{margin-top:8px;color:var(--muted);font-size:.93rem;text-wrap:pretty}
.map-x{flex:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--cream);display:grid;place-items:center;cursor:pointer}
.map-x svg{width:18px;height:18px}
.map-x:hover{border-color:var(--cream)}
.map-list{list-style:none;padding:0;display:grid;gap:8px}
.map-row{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.map-row.now{border-color:var(--tone,var(--mint));box-shadow:0 0 0 1px var(--tone,var(--mint))}
.map-go{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:10px 14px;background:none;border:0;text-align:left;cursor:pointer}
.map-go:hover{background:var(--panel-2)}
.map-th{width:64px;height:44px;border-radius:9px;background:var(--line) center/cover no-repeat;display:grid;place-items:center;font-weight:800;font-size:1.05rem;color:var(--cream);box-shadow:inset 0 -3px 0 var(--tone,var(--mint))}
.map-th.none{background:color-mix(in srgb,var(--tone,var(--mint)) 26%,var(--panel))}
.map-th svg{width:20px;height:20px}
.map-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.map-k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.map-copy b{font-size:1rem;line-height:1.25;text-wrap:balance}
.map-st{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap}
.map-st svg{width:16px;height:16px}
.map-row.now .map-st{color:var(--cream)}
.map-go:has(.map-st svg) .map-st{color:var(--mint)}
.map-row.locked .map-go{opacity:.55}
.map-row.locked .map-st{color:var(--muted)}
.map-row.mini .map-th{width:44px;height:34px}
.map-parts{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px 92px}
.map-part{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:.84rem;font-weight:600;cursor:pointer}
.map-part:hover{border-color:var(--cream)}
.map-part svg{width:14px;height:14px;flex:none}
.map-part.done svg{color:var(--mint)}
.map-part[aria-disabled="true"]{opacity:.5}
.map-part[aria-disabled="true"] svg{color:var(--muted)}
.map-foot{margin:14px 2px 0;font-size:.82rem;color:var(--dim)}
@media (max-width:560px){
  .map{padding:0}
  .map-in{border-radius:0;border:0;min-height:100%;padding-top:18px}
  .map-parts{padding-left:14px}
  .map-th{width:52px;height:38px}
}
/* room for the Learn Brands player's full screen button in the top right corner */
@media (max-width:880px){.lb-player-fs .map-head{padding-right:44px}}
/* Course map button next to Back (bold look) */
.btn.map-btn svg{width:18px;height:18px}
.btn.map-btn .lbl{display:none}
@media (min-width:900px){.btn.map-btn .lbl{display:inline}}
@media (max-width:899px){.btn.map-btn{padding:0 16px}}
/* the map's title and Close stay in view while the list scrolls; focus rings stay inside the rounded rows */
.map-head{position:sticky;top:calc(-1 * clamp(12px,4vh,44px));z-index:1;background:var(--bg);margin:-22px calc(-1 * clamp(16px,3vw,28px)) 16px;padding:22px clamp(16px,3vw,28px) 12px;border-radius:20px 20px 0 0}
.map-go:focus-visible{outline-offset:-3px;border-radius:13px}
@media (max-width:560px){.map-head{top:0;margin-top:-18px;padding-top:18px;border-radius:0}}
/* short windows (the course inside a Learn Brands page): a smaller map title leaves room for the list */
@media (max-height:620px){.map-head .label{display:none}.map-head h2{font-size:1.4rem;margin-top:0}.map-sub{margin-top:4px;font-size:.86rem}.map-head{padding-bottom:8px}}
/* ---------- Next step after the course ----------
   On the last screen: what comes next in Learn Brands (the feedback, the certificate, or back to the course page),
   so nobody has to find Learn Brands' own Next Activity button. Phones also keep the button at the bottom. */
.next-step{margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);background:color-mix(in srgb,var(--mint) 14%,var(--panel));border:1.5px solid var(--mint);box-shadow:var(--shadow)}
.ns-badge{width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;flex:none}
.ns-badge svg{width:24px;height:24px}
.ns-copy{min-width:0}
.ns-copy h3{font-size:1.2rem;line-height:1.25;margin-top:3px;text-wrap:balance}
.ns-copy p:not(.label){color:var(--muted);font-size:.92rem;margin-top:4px;text-wrap:pretty}
.ns-go{white-space:nowrap;text-decoration:none}
.ns-bar{display:none}
/* Certificate (last screen) */
.cert-card{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px 20px;border-radius:var(--r);background:color-mix(in srgb,#C9A55B 10%,var(--panel));border:1.5px solid color-mix(in srgb,#C9A55B 55%,transparent);box-shadow:var(--shadow)}
.cc-badge{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#C9A55B;background:color-mix(in srgb,#C9A55B 16%,transparent)}
.cc-badge svg{width:30px;height:30px}
.cc-copy{min-width:0}
.cc-copy h3{font-size:1.2rem;line-height:1.25;margin-top:3px;text-wrap:balance}
.cc-copy>p:not(.label):not(.fine):not(.cc-err){color:var(--muted);font-size:.92rem;margin-top:4px;text-wrap:pretty}
.cc-make{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cc-make input{flex:1 1 220px;min-width:0;min-height:46px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.cc-make input:focus{outline:2px solid var(--mint);outline-offset:1px}
.cc-make .btn{white-space:nowrap}
.cc-err{color:var(--bad,#e5484d);font-size:.9rem;margin-top:8px}
.cert-card .fine{margin-top:10px}
.cert-card .cc-lms{margin-top:8px;font-size:.9em;opacity:.8}
.sh-b.sh-li{background:#0A66C2;border-color:#0A66C2;color:#fff}
.sh-b.sh-li:hover{background:#004182;border-color:#004182}
.linkish{margin-top:10px;background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:.86rem;text-decoration:underline;cursor:pointer}
@media (max-width:640px){.cert-card{grid-template-columns:1fr}.cc-make .btn{width:100%}}
/* finish.offer: a program to take next (the Retail Sales Academy on free retail courses). Its own navy and gold, like the
   program's pages, on every course theme; whole rows are links. */
.offer-card{--of-gold:#E3CFA6;--of-gold-2:#C9A96E;--of-ink:#F4F1FF;--of-dim:#C9C4EA;margin-top:22px;display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;border-radius:var(--r);color:var(--of-ink);background:radial-gradient(90% 120% at 100% 0%,rgba(201,169,110,.20),rgba(201,169,110,0) 55%),radial-gradient(70% 90% at 0% 100%,#2a2178 0%,#160d5e 45%,#0a0045 100%);box-shadow:0 14px 34px rgba(10,0,71,.28);border:1px solid rgba(227,207,166,.28)}
.of-head{display:flex;gap:16px;align-items:center}
.of-logo{width:56px;height:auto;flex:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.of-copy{min-width:0}
.offer-card .label{color:var(--of-gold);opacity:1}
.offer-card h3{color:#fff;font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.15;margin-top:4px;text-wrap:balance;font-family:var(--f-head)}
.of-copy>p:not(.label){color:var(--of-dim);font-size:.96rem;line-height:1.5;margin-top:6px;text-wrap:pretty}
.of-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.of-row,.of-more{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:14px;text-decoration:none;color:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .15s,border-color .15s,transform .15s}
.of-row:hover,.of-more:hover{background:rgba(255,255,255,.11);border-color:rgba(227,207,166,.5)}
.of-row:focus-visible,.of-more:focus-visible,.of-chip:focus-visible{outline:3px solid var(--of-gold);outline-offset:2px}
.of-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(227,207,166,.16);color:var(--of-gold);font-weight:800;font-size:.95rem}
.of-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.of-t b{color:#fff;font-size:1.02rem;line-height:1.3;text-wrap:balance}
.of-t span{color:var(--of-dim);font-size:.9rem;line-height:1.45;text-wrap:pretty}
.of-tag{align-self:flex-start;font-style:normal;margin-bottom:3px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0A0047;background:var(--of-gold);padding:4px 9px;border-radius:999px;white-space:nowrap}
.of-ar{flex:none;display:grid;place-items:center;color:var(--of-gold)}
.of-ar svg{width:20px;height:20px}
.of-more{background:linear-gradient(90deg,rgba(201,169,110,.20),rgba(201,169,110,.06));border-color:rgba(227,207,166,.45)}
.offer-card .of-go{flex:none;white-space:nowrap;background:linear-gradient(90deg,#B49A6C,#E3CFA6);color:#0A0047;border:0}
.offer-card .of-go svg{color:#0A0047}
.offer-card.more-first .of-more{order:-1}
.offer-card.more-first .of-head{order:-2}
.of-code{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;padding-top:4px}
.of-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:12px;border:1.5px dashed var(--of-gold-2);background:rgba(227,207,166,.08);color:#fff;font:inherit;cursor:pointer}
.of-chip b{font-size:1.05rem;letter-spacing:.08em}
.of-chip span{font-size:.82rem;font-weight:700;color:var(--of-gold)}
.of-chip.on{border-style:solid;background:rgba(227,207,166,.18)}
.of-code p{flex:1 1 220px;margin:0;color:var(--of-dim);font-size:.92rem;line-height:1.45;text-wrap:pretty}
@media (max-width:640px){
  .offer-card{padding:18px 16px 16px}
  .of-logo{width:44px}
  .of-row{align-items:flex-start;padding:12px}
  .of-n{width:28px;height:28px;font-size:.88rem;margin-top:1px}
  .of-ar{align-self:center}
  .of-more{flex-wrap:wrap}
  .of-more .of-go{width:100%;justify-content:center}
  .of-chip{flex:1 1 100%;justify-content:space-between}
}
.rf-card{margin-top:22px;padding:18px 20px;border-radius:var(--r);background:var(--panel);border:1.5px solid color-mix(in srgb,var(--mint) 45%,var(--line));box-shadow:var(--shadow)}
.rf-card h3{font-size:1.2rem;line-height:1.25;margin-top:3px;text-wrap:balance}
.rf-card p:not(.label):not(.fine){color:var(--muted);font-size:.92rem;margin-top:4px;text-wrap:pretty}
.rf-card .fine{margin-top:8px}
.rf-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rf-card.done{display:flex;gap:12px;align-items:center}
.rf-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint)}
.rf-ic svg{width:18px;height:18px}
.rf-card .rf-done{color:var(--ink);font-weight:600;margin-top:2px}
@media (max-width:640px){.rf-b .btn{flex:1 1 auto}}
.cc-open{margin-top:14px}.cc-open .btn{gap:8px}.cc-open .btn svg{width:18px;height:18px}
/* the certificate's own screen */
html.sheet-open,html.sheet-open body{overflow:hidden}
.cert-sheet{position:fixed;inset:0;z-index:300;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);background:color-mix(in srgb,var(--bg) 96%,#000);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));animation:csIn .22s ease-out}
@keyframes csIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cert-sheet{animation:none}}
.cs-in{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.cs-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cs-top h2{font-size:clamp(1.4rem,4vw,2rem);line-height:1.15;margin-top:2px;text-wrap:balance}
.cs-x{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.cs-x:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.cs-fig{margin:0}.cs-fig img{display:block;width:100%;max-width:100%;aspect-ratio:1200/630;border-radius:14px;background:color-mix(in srgb,var(--ink) 8%,var(--panel));box-shadow:var(--shadow);opacity:.55;transition:opacity .2s}
.cs-fig img.ready{opacity:1}
.cs-fig figcaption{margin-top:8px}
.cs-l{font-weight:700;font-size:.92rem;margin-top:4px}
#certBody{display:flex;flex-direction:column;gap:10px}
#certBody .cc-make{margin-top:0}
.cs-acts{display:flex;flex-wrap:wrap;gap:8px}
#certBody .cc-lms{color:var(--muted);font-size:.88rem}
@media (max-width:640px){.cs-acts .sh-b{flex:1 1 100%;justify-content:center}}
/* Share this course (last screen) */
.bref-card{margin-top:16px;padding:18px 20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.bref-card h3{margin:4px 0 0;font-size:1.05rem;line-height:1.3;text-wrap:balance}
.share-card{margin-top:22px;padding:18px 20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.share-mid{margin:0 0 18px}
.sh-copy p:not(.label){color:var(--muted);font-size:.92rem;margin-top:4px;text-wrap:pretty}
.sh-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sh-b{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:.92rem;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s}
.sh-b svg{width:18px;height:18px;flex:none}
.sh-b:hover{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 10%,transparent)}
.sh-b:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sh-b.sh-main{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
@media (max-width:640px){.sh-row{display:grid;grid-template-columns:1fr 1fr}.sh-b{justify-content:center}.sh-b.sh-main{grid-column:1/-1}}
@media (max-width:640px){
  .next-step{grid-template-columns:auto 1fr}
  .next-step .ns-go{display:none}   /* the bar at the bottom carries the button */
  .ns-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
  .ns-bar .ns-go{width:100%}
  .finish.has-ns{padding-bottom:84px}
}
/* ---------- Scenario: choose your path ----------
   A chat-style thread: the other person on the left, the learner's picks on the right in the lesson color, a coach's
   note under each pick, and an ending card. Colors come from currentColor so it reads on dark and light cards. */
.br-thread{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.br-msg{max-width:min(560px,88%);padding:11px 15px;border-radius:16px;line-height:1.45;animation:tkin .3s ease}
.br-msg p{margin:0;text-wrap:pretty}
.br-who{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:3px}
.br-msg.them{align-self:flex-start;background:color-mix(in srgb,currentColor 9%,transparent);border-bottom-left-radius:5px}
.br-msg.you{align-self:flex-end;background:var(--tone,var(--mint));color:var(--tone-ink,var(--mint-ink));border-bottom-right-radius:5px}
.br-note{align-self:flex-end;max-width:min(560px,88%);display:flex;gap:8px;align-items:flex-start;font-size:.9rem;padding:8px 12px;border-radius:10px;border-left:4px solid var(--note-c,var(--mint));background:color-mix(in srgb,var(--note-c,var(--mint)) 12%,transparent)}
.br-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--note-c,var(--mint))}
.br-note p{margin:0;text-wrap:pretty}
.br-note.good{--note-c:#1f9e7a}.br-note.ok{--note-c:#c98a12}.br-note.poor{--note-c:#d0533f}
.br-ask{margin-top:18px;font-weight:700}
.br-opts{margin-top:10px}
.br-end{margin-top:18px;padding:18px 20px;border-radius:var(--r-sm);border:2px solid var(--end-c,var(--mint));background:color-mix(in srgb,var(--end-c,var(--mint)) 10%,transparent);animation:tkin .35s ease}
.br-end.good{--end-c:#1f9e7a}.br-end.ok{--end-c:#c98a12}.br-end.poor{--end-c:#d0533f}
.br-end h4{margin-top:4px}
.br-end > p:not(.label){margin-top:8px;text-wrap:pretty}
.br-score{font-weight:700}
.br-again{margin-top:12px}
.br-ends,.gm-ends{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.br-ends .scr-next{margin-top:12px}
.gm-ends{justify-content:center}
/* the way on from inside a screen (scrNextHTML); the guide's bar does this when it's on */
html.guided .scr-next{display:none!important}
/* except when a game or scenario is over: the guide's bar is out of sight there (a game in full screen covers it, and
   on a computer it sits far below the card), so the card keeps its own Next beside Play again (Mathew, Oct 30 2026) */
html.guided .gm-ends .scr-next,html.guided .br-ends .scr-next{display:inline-flex!important}
/* one Next per screen: while the card offers it, the foot's copy steps aside */
.screen:has(.scr-next) .step-gate .gate-go{display:none}
@media (prefers-reduced-motion:reduce){.br-msg,.br-end{animation:none}}
.br-skill{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.75;margin-left:2px}
.br-skills{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.br-skills li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.92rem}
.br-skills svg{width:16px;height:16px}
.br-skills li.good svg{color:#1f9e7a}.br-skills li.ok svg{color:#c98a12}.br-skills li.poor svg{color:#d0533f}
.br-skills b{font-size:.8rem}
.br-msg.has-audio{position:relative;padding-right:46px}
.br-play{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:999px;border:0;background:color-mix(in srgb,currentColor 12%,transparent);display:grid;place-items:center;cursor:pointer}
.br-play svg{width:16px;height:16px}
.br-play.on{background:var(--mint);color:var(--mint-ink)}

/* practice scenario: who it's for, the Begin card and points on each coach note */
.br-for{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--tone,var(--mint));color:var(--tone-ink,var(--mint-ink));letter-spacing:.02em;text-transform:none;font-weight:700}
.br-intro{margin:14px 0 16px;max-width:60ch;line-height:1.55}
.br-pts{display:inline-block;margin:0 4px;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-size:.82em;font-weight:700;opacity:.85}

/* Review links only: a lesson with practice for each role says so and offers See it as (rvRolesHTML) */
.rv-roles{margin:16px 0 0;padding:12px 14px;border:1.5px dashed currentColor;border-radius:12px;font-size:14px;line-height:1.45;max-width:64ch;text-align:left}
.rv-roles p{margin:0 0 9px;font-weight:600;font-size:14px}
.rv-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rv-btns span{font-size:13px;opacity:.8;margin-right:2px}
.rv-chip{font:inherit;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer;line-height:1.2}
.rv-chip:hover{background:rgba(127,127,127,.16)}
.rv-chip:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* narrow top bar: show the course name before its colon (titleParts), on up to two lines, never cut off */
@media (max-width:640px){
  .top-title .tt-rest{display:none}
  /* a line clamp collapses to nothing around the split name in Chrome, so cap the height instead */
  .top-title b:has(.tt-main){display:block;white-space:normal;max-height:2.3em;overflow:hidden;line-height:1.15;font-size:.95rem;-webkit-line-clamp:unset}
}
/* the In this lesson strip scrolls sideways without a bright scrollbar track under the pictures */
.sc-rail,.sc-rail *{scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.45) transparent}
.sc-rail ::-webkit-scrollbar,.sc-rail::-webkit-scrollbar{height:6px;background:transparent}
.sc-rail ::-webkit-scrollbar-thumb,.sc-rail::-webkit-scrollbar-thumb{background:rgba(127,127,127,.45);border-radius:3px}

/* short phones (and phones inside a review link): a tighter lesson heading so the player shows whole under it */
@media (max-width:520px) and (max-height:780px){
  .look-bold .lesson.screens .s-watch .lesson-head .eyebrow{margin-bottom:6px}
  .look-bold .lesson.screens .s-watch .lesson-head h2{font-size:clamp(1.5rem,7.4vw,1.9rem);margin:4px 0 4px}
  .look-bold .lesson.screens .s-watch .lesson-head .lede{font-size:.95rem;line-height:1.4;margin-top:2px}
  .look-bold .lesson.screens .s-watch .player{margin-top:12px}
}
/* ---------- Guide (bold look lessons): one button that always shows the next move ----------
   The bottom bar's main button plays the lesson, takes you to the next part, points to what's left or continues to
   the next lesson (guide() in kit.js). The parts' own foot buttons step aside so there's one strong button at a time.
   Wide screens get the lesson's parts down the left; phones keep the bar under the thumb with a progress line. */
html.guided .step-gate,html.guided #gate,html.guided .un-go,html.guided .un-left,html.guided .scr-dots{display:none!important}
.gprog{position:absolute;left:0;top:-1px;height:3px;width:var(--p,0%);background:var(--tone-bar,var(--mint));border-radius:0 3px 3px 0;transition:width .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
html:not(.guided) .gprog{display:none}
html.guided .controls .hint{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.3}
.g-k{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g-msg{display:inline-flex;align-items:center;gap:6px;font-size:.93rem;font-weight:600;color:var(--cream)}
.g-msg svg{width:17px;height:17px;flex:none;color:var(--mint);animation:gpop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes gpop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
html.guided #nextBtn{min-width:0;max-width:min(420px,48vw);gap:8px}
html.guided #nextBtn .g-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html.guided #nextBtn svg{width:19px;height:19px}
html.guided #nextBtn.waiting{opacity:1;background:transparent;color:var(--cream);border:1.5px dashed color-mix(in srgb,var(--cream) 42%,transparent);filter:none}
html.guided #nextBtn.waiting:hover{border-color:var(--cream)}
html.guided #nextBtn.g-strong svg:last-child{animation:gnudge 1.8s ease-in-out infinite}
@keyframes gnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
#nextBtn.shake{animation:shake .45s ease}
@media (prefers-reduced-motion:reduce){html.guided #nextBtn.g-strong svg:last-child,.g-msg svg{animation:none}}
@media (max-width:560px){
  html.guided #nextBtn{max-width:none;flex:1}
  html.guided .controls .hint:not(:empty){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}
  html.guided .g-k{display:none}
  .g-msg{font-size:.86rem}
}
/* wide screens: the lesson's parts down the left */
.lrail{display:none}
@media (min-width:1180px){
  html.guided .wrap{max-width:1360px}
  html.guided #stage{padding-left:calc(clamp(16px,3vw,28px) + 236px)}
  html.guided .lrail:not([hidden]){display:block;position:fixed;z-index:7;top:calc(var(--top-h,68px) + 28px);left:calc(max(0px,(100vw - 1360px) / 2) + clamp(16px,3vw,28px));width:212px;max-height:calc(100vh - var(--top-h,68px) - var(--nav-h,72px) - 56px);overflow:auto;scrollbar-width:none}
}
.lr-k{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lr-t{margin:4px 0 16px;font-weight:800;font-size:1.02rem;line-height:1.25;color:var(--cream)}
.lr-list{list-style:none;margin:0;padding:0}
.lr-i{position:relative}
.lr-i:not(:last-child)::after{content:"";position:absolute;left:17px;top:36px;bottom:-2px;width:2px;border-radius:2px;background:var(--line)}
.lr-i.done:not(:last-child)::after{background:var(--mint)}
.lr-i button{display:flex;align-items:center;gap:11px;width:100%;margin:0 0 6px;padding:5px 10px 5px 3px;border:0;border-radius:14px;background:none;color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.lr-i button:hover{color:var(--cream)}
.lr-i button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.lr-dot{flex:none;width:28px;height:28px;margin-left:3px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:var(--bg);color:var(--muted);font-size:.78rem;font-weight:800;transition:all .25s}
.lr-dot svg{width:15px;height:15px}
.lr-n{display:flex;flex-direction:column;min-width:0}
.lr-n small{font-size:.74rem;font-weight:500;color:var(--muted)}
.lr-i.done .lr-dot{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.lr-i.now button{background:color-mix(in srgb,var(--tone,var(--mint)) 16%,transparent);color:var(--cream)}
.lr-i.now .lr-dot{border-color:var(--tone,var(--mint));color:var(--cream);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone,var(--mint)) 24%,transparent)}
.lr-i.now.done .lr-dot{color:var(--mint-ink)}
.lr-i.held button{opacity:.48;cursor:not-allowed}
.lr-i.pop .lr-dot{animation:lrpop .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes lrpop{0%{transform:scale(.55)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.lr-next{display:flex;flex-direction:column;gap:3px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lr-next b{font-size:.86rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cream)}
.lrail.on-light :is(.lr-list,.lr-next){--cream:var(--rl-ink);--muted:color-mix(in srgb,var(--rl-ink) 70%,transparent);--line:color-mix(in srgb,var(--rl-ink) 22%,transparent)}
.lrail.on-light .lr-i:not(.done) .lr-dot{background:transparent;border-color:color-mix(in srgb,var(--rl-ink) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.lr-i.pop .lr-dot{animation:none}}
@media (max-width:560px){
  html.guided .controls .btn.back,html.guided .controls .btn.map-btn{width:46px;min-width:46px;padding:0;flex:none}
  html.guided .controls-in{gap:8px}
  html.guided #nextBtn{font-size:.95rem;padding:0 16px}
  html.guided #nextBtn .g-lbl{white-space:normal;line-height:1.15;text-align:center;overflow:visible;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
html.guided .upnext{cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
html.guided .upnext:hover{transform:translateY(-2px);border-color:var(--tone,var(--mint))}
html.guided .upnext:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* End of an animated lesson (bold look): a card over the player with the next step and Watch again */
.sc-end{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:scEndIn .35s ease both}
.sc-end-in{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#fff}
.sc-end-badge{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--mint-ink)}
.sc-end-badge svg{width:26px;height:26px}
.sc-end-k{margin:4px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.sc-end-t{margin:0 0 6px;font-family:var(--f-head,inherit);font-size:clamp(20px,2.4vw,28px);font-weight:800;line-height:1.2;text-wrap:balance}
.sc-end .sc-end-go{min-height:48px;padding:12px 22px;font-size:16px;max-width:100%;white-space:normal;text-wrap:balance}
.sc-end .sc-end-go svg{width:18px;height:18px;margin-left:6px;flex:none}
.sc-end-again{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:8px 12px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:600;opacity:.88;cursor:pointer}
.sc-end-again:hover,.sc-end-again:focus-visible{opacity:1;background:rgba(255,255,255,.12)}
.sc-end-again svg{width:16px;height:16px}
.player.tall .sc-end-t,.player.is-fs .sc-end-t{font-size:clamp(20px,6cqw,30px)}
@keyframes scEndIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sc-end{animation:none}}

/* Light-scheme player controls read like a video player's: a dark fade with solid dark buttons and white icons,
   so they stay clear over busy photos instead of thin rings on a pale wash (Orchard review, Oct 2026) */
.scheme-light .sc-bar{background:linear-gradient(transparent,rgba(12,10,8,.62))}
.scheme-light #scCCBtn,.scheme-light #scFull,.scheme-light #scVol{background:rgba(12,10,8,.5);color:#fff;border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.scheme-light #scCCBtn:hover,.scheme-light #scFull:hover,.scheme-light #scVol:hover{background:rgba(12,10,8,.72)}
.scheme-light #scCCBtn[aria-pressed="true"]{background:#fff;color:#14110e}
.scheme-light #scVol[aria-pressed="true"]{color:rgba(255,255,255,.6)}
.scheme-light .sc-bar .sc-dot i{background:rgba(255,255,255,.35)}
.scheme-light .sc-bar .sc-dot.seen i{background:rgba(255,255,255,.7)}
.scheme-light .sc-bar .sc-dot.on i{background:#fff}
.scheme-light .sc-vol input{background:linear-gradient(90deg,#fff var(--v,100%),rgba(255,255,255,.35) var(--v,100%))}
.scheme-light .sc-vol input::-webkit-slider-thumb{background:#fff}
.scheme-light .sc-vol input::-moz-range-thumb{background:#fff}

/* Games (type "game": pour, rush, match, build). A dark stage on every screen, light or dark, so the games read the
   same everywhere; its own colors are set on the stage. The hidden switch is the iPhone haptic tick. */
.hap{position:fixed;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.act.is-game{--g-bg:var(--bg-deep)}
.scheme-light .act.is-game{--g-bg:var(--cream)}
.gm-stage{--g-ink:#F7F2E6;--g-mut:#c9c3e0;--g-acc:var(--tagline,#F2CC8F);--g-ok:#3ddcb0;--g-bad:#ff8f73;--g-btl:#F2CC8F;--g-line:rgba(255,255,255,.16);--g-pan:rgba(255,255,255,.07);
  position:relative;margin-top:14px;padding:clamp(16px,3vw,26px);border-radius:var(--r);color:var(--g-ink);overflow:hidden;
  background:radial-gradient(120% 70% at 85% -10%,color-mix(in srgb,var(--g-acc) 22%,transparent),transparent 60%),radial-gradient(90% 60% at -10% 110%,rgba(61,220,176,.16),transparent 60%),var(--g-bg);
  box-shadow:inset 0 0 0 1px var(--g-line),0 18px 40px -26px rgba(0,0,0,.7);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gm-stage .btn{border-color:var(--g-line);color:var(--g-ink)}
.gm-stage .btn.go{background:var(--g-ok);border-color:var(--g-ok);color:#04261e}
.gm-stage .btn:hover:not(:disabled){border-color:var(--g-ink)}
.gm-stage .btn.go:hover{border-color:var(--g-ok);filter:brightness(1.06)}
.gm-intro,.gm-result{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-block:8px}
.gm-art{width:120px;height:90px;color:var(--g-ink)}
.gm-how{max-width:40ch;color:var(--g-mut);font-size:1.02rem;line-height:1.45}
.gm-best{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--g-acc)}
.gm-best svg{width:18px;height:18px}
.gm-note{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--g-ok)}
.gm-note svg{width:18px;height:18px}
.gm-play{min-width:180px}
.gm-k{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--g-acc)}
.gm-head{font-family:var(--f-head);font-size:clamp(1.5rem,4vw,2rem);font-weight:800;line-height:1.1}
.gm-sub{color:var(--g-mut)}
.gm-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:2px 0 4px}
.gm-stats div{min-width:92px;padding:10px 14px;border-radius:12px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line)}
.gm-stats dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mut);font-weight:700}
.gm-stats dd{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.gm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.85rem;font-weight:700;color:var(--g-mut);font-variant-numeric:tabular-nums}
.gm-bar b{color:var(--g-ink)}
.gm-dots{display:inline-flex;gap:6px}
.gm-dots i{width:9px;height:9px;border-radius:50%;background:var(--g-line)}
.gm-dots i.on{background:var(--g-ok)}
.gm-dots i.now{background:var(--g-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-acc) 30%,transparent)}
.gm-ask{margin-top:12px;font-size:clamp(1.15rem,3.4vw,1.4rem);font-weight:800;text-align:center;text-wrap:balance}
.gm-why{margin:12px auto 0;max-width:620px;padding:10px 14px;border-radius:12px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line);line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.gm-why svg{width:18px;height:18px;flex:none}
.gm-why.bad{box-shadow:inset 0 0 0 1.5px var(--g-bad)}.gm-why.bad svg{color:var(--g-bad)}
.gm-why.good{box-shadow:inset 0 0 0 1.5px var(--g-ok)}.gm-why.good svg{color:var(--g-ok)}
.gm-why.go{box-shadow:inset 0 0 0 1.5px var(--g-acc)}
.gm-stage > .gm-next{display:flex;margin:14px auto 0}
/* pour */
.gm-pour-wrap{position:relative;display:grid;place-items:center;margin-top:6px}
.gm-jig{width:min(260px,70%);height:auto;touch-action:none;cursor:pointer;overflow:visible}
.gm-cup{fill:none;stroke:var(--g-ink);stroke-width:4;stroke-linejoin:round}
.gm-liq{fill:#EDB04F;opacity:.95}
.gm-foam{fill:#fff;opacity:0;transition:opacity .2s}
.gm-mark{stroke:var(--g-mut);stroke-width:2.5;stroke-linecap:round}
.gm-ml{fill:var(--g-mut);font:700 13px var(--f-body)}
.gm-target{stroke:var(--g-acc);stroke-width:4;stroke-dasharray:9 6;stroke-linecap:round}
.gm-tl{fill:var(--g-acc);font:800 16px var(--f-body)}
.gm-stream{fill:#EDB04F;opacity:0;transform-origin:50% 0;transform:scaleY(0);transition:transform .12s ease,opacity .12s}
.pouring .gm-stream{opacity:.85;transform:scaleY(1)}
.gm-spill{fill:#EDB04F;opacity:0}
.spilled .gm-spill{animation:gmSpill .7s ease forwards}
@keyframes gmSpill{0%{opacity:0;transform:translateY(-6px)}30%{opacity:1}100%{opacity:0;transform:translateY(26px)}}
.gm-hold{display:flex;margin:14px auto 0;min-width:min(260px,100%);min-height:58px;font-size:1.08rem;touch-action:none;-webkit-tap-highlight-color:transparent}
.pouring .gm-hold{transform:scale(.97);filter:brightness(1.1)}
.gm-verdict{display:flex;flex-direction:column;align-items:center;margin-top:10px;padding:8px 18px;border-radius:14px;background:var(--g-pan);box-shadow:0 0 0 2px var(--g-line);animation:gmPop .35s ease;white-space:nowrap}
.gm-verdict b{font-size:1.15rem}.gm-verdict span{font-size:.85rem;color:var(--g-mut)}
.gm-verdict.perfect{box-shadow:0 0 0 2.5px var(--g-acc),0 0 30px -4px var(--g-acc)}.gm-verdict.perfect b{color:var(--g-acc)}
.gm-verdict.ok b{color:var(--g-ok)}.gm-verdict.bad b{color:var(--g-bad)}
@keyframes gmPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:none}}
/* rush */
.gm-streak{padding:3px 10px;border-radius:999px;background:var(--g-acc);color:var(--g-bg)}
.gm-streak.pop{animation:gmBump .35s ease}
@keyframes gmBump{50%{transform:scale(1.18)}}
.gm-rail{position:relative;min-height:150px;display:grid;place-items:center;margin-top:12px;perspective:600px}
@media (min-width:860px){.gm-rail{min-height:190px}.gm-ticket{width:min(400px,80%);padding:20px 22px 26px}.gm-ticket b{font-size:2.1rem}}
.gm-ticket{position:relative;width:min(300px,86%);padding:16px 18px 22px;border-radius:6px 6px 2px 2px;background:#FBF6EA;color:#1d1640;text-align:center;box-shadow:0 14px 28px -14px rgba(0,0,0,.6);font-family:ui-monospace,"SF Mono",Menlo,monospace}
.gm-ticket b{display:block;font-family:var(--f-head);font-size:clamp(1.4rem,5vw,1.9rem);font-weight:800;line-height:1.1;margin-top:6px;text-wrap:balance}
.gm-tno{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.gm-tear{position:absolute;left:0;right:0;bottom:-6px;height:8px;background:linear-gradient(-45deg,transparent 4px,#FBF6EA 0) 0 0/10px 8px,linear-gradient(45deg,transparent 4px,#FBF6EA 0) 0 0/10px 8px}
.gm-ticket.in{animation:gmPrint .32s ease-out}
.gm-ticket.out{animation:gmFly .26s ease-in forwards}
.gm-ticket.shake{animation:gmShake .4s ease}
@keyframes gmPrint{0%{transform:translateY(-40px);clip-path:inset(0 0 100% 0)}100%{transform:none;clip-path:inset(0 0 -10px 0)}}
@keyframes gmFly{to{transform:translateX(120%) rotate(12deg);opacity:0}}
@keyframes gmShake{20%,60%{transform:translateX(-9px) rotate(-2deg)}40%,80%{transform:translateX(9px) rotate(2deg)}}
.gm-opts{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;margin:14px auto 0;max-width:620px}
.gm-opt{min-height:64px;border-radius:14px;border:1.5px solid var(--g-line);background:var(--g-pan);color:var(--g-ink);font:800 1.05rem var(--f-body);cursor:pointer;touch-action:manipulation;transition:transform .08s,background .2s,border-color .2s}
.gm-opt:hover{border-color:var(--g-ink)}
.gm-opt:active{transform:scale(.96);background:color-mix(in srgb,var(--g-acc) 22%,transparent)}
.gm-opt.no{border-color:var(--g-bad);background:color-mix(in srgb,var(--g-bad) 18%,transparent)}
.gm-opt.yes{border-color:var(--g-ok);background:color-mix(in srgb,var(--g-ok) 30%,transparent);animation:gmBump .3s ease}
.gm-ticket.ok{box-shadow:0 0 0 3px var(--g-ok),0 0 40px -6px var(--g-ok),0 14px 28px -14px rgba(0,0,0,.6)}
.gm-stamp{position:absolute;right:-16px;top:-16px;display:inline-flex;align-items:center;gap:6px;padding:5px 14px 5px 10px;border:3px solid #17784F;border-radius:10px;background:rgba(251,246,234,.9);color:#17784F;font:800 clamp(1.05rem,2.6vw,1.35rem) var(--f-head);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transform:rotate(8deg);animation:gmStamp .2s ease-out both;pointer-events:none}
.gm-stamp svg{width:1.1em;height:1.1em;flex:none}
@keyframes gmStamp{0%{opacity:0;transform:rotate(8deg) scale(2)}100%{opacity:1;transform:rotate(8deg) scale(1)}}
.gm-got{margin-left:auto;padding:6px 12px;border-radius:999px;border:1.5px solid var(--g-line);background:transparent;color:var(--g-ink);font-weight:700;cursor:pointer}
/* match */
.gm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px auto 0;max-width:540px}
@media (max-width:520px){.gm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
/* a short last row sits in the middle: one card under three, two under four */
@media (min-width:521px){.gm-grid.odd4:not(.many) > .gm-card:nth-last-child(2){grid-column:2}}
@media (max-width:520px){.gm-grid.odd3:not(.many) > .gm-card:last-child{grid-column:2}}
@media (max-width:520px){.gm-grid.many{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.gm-grid.many .gm-face{padding:5px;font-size:clamp(.66rem,2.4vw,.8rem)}}
.gm-card{position:relative;aspect-ratio:4/4.5;border:0;padding:0;background:none;cursor:pointer;perspective:700px;touch-action:manipulation;color:inherit;font:inherit}
.gm-cin{position:absolute;inset:0;transition:transform .35s ease;transform-style:preserve-3d}
.gm-card.up .gm-cin,.gm-card.got .gm-cin{transform:rotateY(180deg)}
.gm-back,.gm-face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center}
.gm-back{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--g-acc) 30%,transparent) 0 6px,transparent 6px 14px),var(--g-pan);box-shadow:inset 0 0 0 1.5px var(--g-line)}
.gm-face{transform:rotateY(180deg);background:#FBF6EA;color:#1d1640;font-weight:800;line-height:1.15;font-size:clamp(.78rem,2.6vw,.95rem)}
.gm-face b{font-family:var(--f-head);font-size:clamp(.9rem,3vw,1.08rem)}
.gm-face span{font-size:.8em;font-weight:700}
/* the two kinds of card look clearly different: words on gold, meanings (with their icon) on white */
.side-a .gm-face{background:#F3C969;color:#1d1640}
.side-b .gm-face{background:#FFFFFF}
.gm-glass{flex:none;width:clamp(30px,46%,58px);height:auto;color:#1d1640}
.gm-card.got .gm-face{box-shadow:0 0 0 3px var(--g-ok)}
.gm-card.got{animation:gmBump .4s ease}
.gm-card:disabled{cursor:default}
.gm-got-line{display:block}.gm-got-line svg{color:var(--g-ok);display:inline-block;vertical-align:-4px;margin-right:6px}
/* build */
.gm-bench{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin:10px auto 0;max-width:520px}
.gm-tin{width:clamp(96px,22vw,130px);border:0;padding:0;background:none;cursor:default;color:inherit;touch-action:manipulation;transition:transform .08s}
.gm-tin svg{width:100%;height:auto;overflow:visible}
.gm-tin .gm-cap{fill:var(--g-pan);stroke:var(--g-ink);stroke-width:3.5;stroke-linejoin:round}
.gm-frost{fill:#fff;opacity:calc(var(--frost,0) * .55);transition:opacity .2s}
.gm-tin.ready{cursor:pointer;animation:gmWig 1.4s ease-in-out infinite}
.gm-tin.tl{transform:rotate(-14deg) translateY(-4px)}.gm-tin.tr{transform:rotate(14deg) translateY(-4px)}
.gm-tin.frosty .gm-frost{opacity:.6}
.gm-tin.stir.tl,.gm-tin.stir.tr{transform:none}
.gm-spoon{stroke:var(--g-ink);stroke-width:3.5;stroke-linecap:round;fill:var(--g-ink);transform-origin:56px 6px;transition:transform .1s}
.gm-tin.stir.tl .gm-spoon{transform:rotate(-7deg)}.gm-tin.stir.tr .gm-spoon{transform:rotate(7deg)}
@keyframes gmWig{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
.gm-layer{animation:gmFill .4s ease}
@keyframes gmFill{from{opacity:0}}
.gm-slots{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gm-slots li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--g-pan);box-shadow:inset 0 0 0 1.5px var(--g-line);font-weight:700;color:var(--g-mut)}
.gm-slots li i{width:14px;height:14px;border-radius:50%;flex:none;opacity:.35}
.gm-slots li.on{color:var(--g-ink);box-shadow:inset 0 0 0 1.5px var(--g-ok)}
.gm-slots li.on i{opacity:1}
.gm-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px auto 0;max-width:520px}
.gm-btl{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;border:1.5px solid var(--g-line);background:var(--g-pan);color:var(--g-ink);font:700 .85rem/1.2 var(--f-body);cursor:pointer;touch-action:manipulation;text-align:center}
.gm-btl svg{width:20px;height:auto}
.gm-btl svg path{stroke:var(--g-ink)}
.gm-btl.sel{border-color:var(--g-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-acc) 30%,transparent)}
.gm-btl.no{border-color:var(--g-bad);opacity:.5;animation:gmShake .4s ease}
.gm-btl.in{border-color:var(--g-ok);opacity:.5}
.gm-btl:disabled{cursor:default}
.gm-amts{margin-top:12px;text-align:center}
.gm-amts p{font-weight:800}
.gm-amts div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.gm-amts button{min-width:72px;min-height:48px;border-radius:999px;border:1.5px solid var(--g-line);background:var(--g-pan);color:var(--g-ink);font:800 1rem var(--f-body);cursor:pointer;touch-action:manipulation}
.gm-amts button.no{border-color:var(--g-bad);opacity:.5}
@media (max-width:420px){.gm-bench{gap:10px}.gm-slots li{padding:8px 10px;font-size:.88rem}}
/* sales games: pause (Wait for It), probe (Find the Need), heat (Cool Down) share a chat */
.gm-chat{display:flex;flex-direction:column;gap:8px;margin:14px auto 0;max-width:620px;max-height:min(46vh,340px);overflow-y:auto;scroll-behavior:smooth;padding:2px}
.gm-b{max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#FBF6EA;color:#1d1640;line-height:1.4;animation:gmIn .25s ease-out;box-shadow:0 8px 20px -14px rgba(0,0,0,.6)}
.gm-b p{margin:0;font-weight:600;font-size:1.02rem;min-height:1.4em}
.gm-who{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;opacity:.6}
.gm-b.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--g-ok) 26%,var(--g-bg));color:var(--g-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-ok) 50%,transparent)}
.gm-b.me .gm-who{opacity:.75}
.gm-b.nudge{opacity:.85;font-style:italic}
.gm-b.boil{box-shadow:0 0 0 2.5px var(--g-bad),0 8px 20px -14px rgba(0,0,0,.6);animation:gmIn .25s ease-out,gmShake .4s .25s ease}
.gm-b.flag{align-self:center;max-width:100%;border-radius:999px;padding:6px 14px;background:var(--g-pan);color:var(--g-ink);box-shadow:inset 0 0 0 1.5px var(--g-bad);font-size:.9rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px;text-align:center}
.gm-b.flag.ok,.gm-b.flag.open{box-shadow:inset 0 0 0 1.5px var(--g-ok)}
.gm-b.flag svg{width:16px;height:16px;color:var(--g-ok);flex:none}
@keyframes gmIn{from{opacity:0;transform:translateY(8px)}}
.gm-beats{display:flex;justify-content:center;gap:10px;margin:12px 0 0;transition:opacity .3s}
.gm-beats i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font:800 .9rem var(--f-body);font-style:normal;color:var(--g-mut);box-shadow:inset 0 0 0 1.5px var(--g-line);transition:background .2s,color .2s,box-shadow .2s}
.gm-beats i.on{background:var(--g-acc);color:var(--g-bg);box-shadow:0 0 18px -4px var(--g-acc)}
.gm-beats.off{opacity:.35}
.gm-respond{display:flex;margin:14px auto 0;min-width:min(240px,100%);min-height:56px;font-size:1.08rem}
.gm-replies,.gm-picks{display:grid;gap:8px;margin:14px auto 0;max-width:620px}
.gm-q{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--g-mut);display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0}
.gm-reply,.gm-qbtn,.gm-pick{min-height:52px;padding:10px 14px;text-align:left;font-weight:700;font-size:.98rem;line-height:1.3}
.gm-reply.yes,.gm-pick.yes{border-color:var(--g-ok);background:color-mix(in srgb,var(--g-ok) 18%,transparent)}
.gm-reply.picked{border-color:var(--g-acc);background:color-mix(in srgb,var(--g-acc) 18%,transparent)}
.gm-reply:disabled:not(.yes):not(.no):not(.picked),.gm-pick:disabled:not(.yes):not(.no){opacity:.5}
.gm-reply:disabled,.gm-pick:disabled,.gm-qbtn:disabled{cursor:default}
@media (max-width:480px){.gm-need{padding:7px 9px}.gm-need span{font-size:.62rem}.gm-need b{font-size:.86rem}}
:is(.gm-chat,.gm-timer,.gm-meter,.gm-needs,.gm-deck,.gm-replies,.gm-picks,.gm-setup,.gm-order,.gm-mixer,.gm-droppers,.gm-shelfscene,.gm-fmeters,.gm-hz,.gm-front,.gm-rack,.gm-cmp){width:100%;box-sizing:border-box}
/* probe */
.gm-needs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;margin:12px auto 0;max-width:620px}
.gm-need{padding:8px 12px;border-radius:12px;background:var(--g-pan);box-shadow:inset 0 0 0 1.5px var(--g-line);min-width:0}
.gm-need span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.gm-need b{display:block;font-weight:800;font-size:.98rem;line-height:1.25;color:var(--g-mut)}
.gm-need.on{box-shadow:inset 0 0 0 1.5px var(--g-ok);animation:gmBump .4s ease}
.gm-need.on b{color:var(--g-ink)}
.gm-need.missed{box-shadow:inset 0 0 0 1.5px var(--g-bad)}
.gm-need.missed b{color:var(--g-bad)}
.gm-deck{display:grid;gap:8px;margin:14px auto 0;max-width:620px}
.gm-deck[hidden],.gm-replies[hidden],.gm-picks[hidden]{display:none}
.gm-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){.gm-qs{grid-template-columns:1fr}}
.gm-qbtn.used{opacity:.4;text-decoration:line-through}
.gm-asks{display:inline-flex;align-items:center;gap:5px;letter-spacing:0;text-transform:none}
.gm-asks i{width:10px;height:10px;border-radius:50%;background:var(--g-line)}
.gm-asks i.on{background:var(--g-acc)}
.gm-asks b{margin-left:4px;color:var(--g-ink)}
.gm-recnow{justify-self:center;margin-top:4px}
.gm-pick b{display:block;font-size:1.02rem}
.gm-pick span{display:block;font-weight:600;font-size:.88rem;color:var(--g-mut);margin-top:2px}
/* heat */
.gm-setup{margin:10px auto 0;max-width:620px;text-align:center;line-height:1.4}
.gm-meter{display:flex;align-items:center;gap:14px;margin:12px auto 0;max-width:620px;padding:10px 14px;border-radius:14px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line)}
.gm-mood{flex:none;width:48px;height:48px}
.gm-mface{width:100%;height:100%;fill:none;stroke:#1d1640;stroke-width:3.5;stroke-linecap:round;transition:transform .3s}
.gm-mface circle:first-child{fill:color-mix(in srgb,#3ddcb0 calc((1 - var(--heat,.7)) * 100%),#ff8f73);stroke:none;transition:fill .4s}
.gm-mface .e{fill:#1d1640;stroke:none}
.gm-meter.boil .gm-mface{animation:gmShake .5s ease}
.gm-temp{flex:1;min-width:0}
.gm-temp p{display:flex;justify-content:space-between;margin:0 0 6px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.gm-temp p b{color:var(--g-ink)}
.gm-tbar{height:12px;border-radius:999px;background:linear-gradient(90deg,rgba(61,220,176,.18),rgba(242,204,143,.18),rgba(255,143,115,.22));overflow:hidden}
.gm-tbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3ddcb0,#F2CC8F 50%,#ff8f73);background-size:calc(100% / max(var(--heat,.7),.04)) 100%;transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.gm-meter.boil .gm-temp p b,.gm-meter.hot .gm-temp p b{color:var(--g-bad)}
.gm-meter.cool .gm-temp p b{color:var(--g-ok)}
.gm-timer{height:6px;margin:10px auto 0;max-width:620px;border-radius:999px;background:var(--g-line);overflow:hidden}
.gm-timer i{display:block;height:100%;width:100%;background:var(--g-acc);border-radius:999px}
.gm-timer.low i{background:var(--g-bad)}
.gm-timer.low{animation:gmBump .5s ease infinite}
.gm-delta{flex:none}
.gm-why > span{flex:1 1 0;min-width:min(100%,220px)}
.gm-why > svg + span{margin-top:1px}
.gm-why.good .gm-delta{color:var(--g-ok)}.gm-why.bad .gm-delta{color:var(--g-bad)}
.act.is-game.gm-full :is(.gm-pause,.gm-probe,.gm-heat):not(.gm-intro):not(.gm-over) > .gm-bar + *{margin-top:12px}
.act.is-game.gm-full :is(.gm-pause,.gm-probe,.gm-heat):not(.gm-intro):not(.gm-over) > :last-child{margin-bottom:0}
:is(.gm-pause,.gm-probe,.gm-heat) .gm-why{align-items:flex-start}
:is(.gm-pause,.gm-probe,.gm-heat) .gm-why > svg{margin-top:2px}
@media (prefers-reduced-motion:reduce){.gm-b,.gm-b.boil,.gm-need.on,.gm-timer.low,.gm-meter.boil .gm-mface{animation:none}.gm-tbar i{transition:none}}
/* aroma games: blend (Bouquet Builder) and fresh (Keep the Terps) */
.gm-puffs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gm-puff{position:absolute;bottom:38%;width:10px;height:10px;border-radius:50%;opacity:0;animation:gmPuff 1.6s ease-out forwards;filter:blur(.5px)}
.gm-puff.big{width:20px;height:20px;animation-name:gmPuffBig}
@keyframes gmPuff{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),-120px) scale(1.15)}}
@keyframes gmPuffBig{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-70px) scale(1)}}
.gm-order{position:relative;margin:12px auto 0;max-width:520px;padding:12px 16px 14px;border-radius:14px;background:#FBF6EA;color:#1d1640;text-align:center;box-shadow:0 12px 26px -16px rgba(0,0,0,.6)}
.gm-order .gm-who{opacity:.65}
.gm-order > b{display:block;font-family:var(--f-head);font-size:clamp(1.12rem,4vw,1.4rem);font-weight:800;line-height:1.2;text-wrap:balance;margin-top:2px}
.gm-lab{margin:10px auto 0;max-width:300px;padding:8px 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px #d8d0bd;font-family:ui-monospace,"SF Mono",Menlo,monospace;text-align:left}
.gm-lab p{margin:0 0 4px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;opacity:.6}
.gm-lab div{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;padding:2px 0;border-top:1px dashed #d8d0bd}
.gm-mixer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;margin:10px auto 0;max-width:460px}
.gm-jarwrap{position:relative;display:grid;justify-items:center}
.gm-jar{width:min(130px,100%);height:auto;overflow:visible}
.gm-jglass{fill:rgba(255,255,255,.07);stroke:var(--g-ink);stroke-width:3.5;stroke-linejoin:round}
.gm-jshine{stroke:rgba(255,255,255,.35);stroke-width:4;stroke-linecap:round;fill:none}
.gm-jlid,.gm-flid{fill:var(--g-acc)}
.gm-jliq{transition:y .25s ease,height .25s ease,fill .3s}
.gm-count{margin:4px 0 0;font-size:.82rem;font-weight:700;color:var(--g-mut);font-variant-numeric:tabular-nums}
.gm-wheel{width:min(170px,100%);height:auto;display:block;margin:0 auto;overflow:visible}
.gm-wb{fill:var(--g-pan);stroke:var(--g-line);stroke-width:1.5}
.gm-wf{opacity:.92;transition:d .3s ease}
.gm-wc{fill:var(--g-ink)}
.gm-wl{fill:var(--g-mut);font:700 11px var(--f-body)}
.gm-wl.on{fill:var(--g-ink)}
.gm-droppers{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;margin:12px auto 0;max-width:640px}
@media (max-width:600px){.gm-droppers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gm-dr{position:relative}
.gm-dadd{width:100%;min-height:96px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:14px;border:1.5px solid var(--g-line);background:var(--g-pan);color:var(--g-ink);font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .08s,border-color .2s}
.gm-dadd:active{transform:scale(.96)}
.gm-dr.on .gm-dadd{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.gm-dadd svg{width:16px;height:28px}
.gm-dadd .bulb{fill:var(--c)}.gm-dadd .neck{fill:var(--g-mut)}.gm-dadd .tube{fill:rgba(255,255,255,.18);stroke:var(--g-ink);stroke-width:1.2}
.gm-dr.drip .gm-dadd svg{animation:gmSqueeze .3s ease}
@keyframes gmSqueeze{40%{transform:scaleY(.86) translateY(2px)}}
.gm-dadd .nm{font-weight:800;font-size:.9rem;line-height:1.15;text-align:center;max-width:100%}
.gm-dadd .nm.long{font-size:clamp(.66rem,2.9vw,.84rem);letter-spacing:-.01em}
.gm-dadd .nt{font-size:.72rem;font-weight:700;color:var(--g-mut);text-transform:uppercase;letter-spacing:.06em}
.gm-dadd .ct{min-height:1.2em;font-size:.8rem;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums}
.gm-dless{position:absolute;top:-8px;right:-6px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--g-bg);background:var(--g-ink);color:var(--g-bg);cursor:pointer;padding:0;touch-action:manipulation}
.gm-dless svg{width:15px;height:15px}
.gm-dless[hidden]{display:none}
.gm-smell{display:flex;margin:14px auto 0;min-width:min(240px,100%);min-height:54px;font-size:1.05rem}
.gm-stage .gm-smell:not(.go){background:transparent}
.gm-sniff{flex-direction:column;align-items:center;text-align:center;gap:6px}
.gm-why.gm-sniff > span{flex:none;min-width:0}
.gm-read i{font-style:normal;color:var(--g-mut);font-weight:700}
.gm-read b{font-family:var(--f-head);font-size:1.12rem}
.gm-stars{display:inline-flex;gap:2px}
.gm-stars i{display:block;width:26px;height:26px;color:var(--g-line)}
.gm-stars i.on{color:var(--g-acc);animation:gmBump .4s ease}
.gm-stars svg{width:100%;height:100%}
.gm-why.gm-sniff svg{width:100%;height:100%}
.gm-react{color:var(--g-mut)}.gm-react b{color:var(--g-ink)}
.gm-stage > .gm-smell + .gm-next{margin-top:10px}
/* fresh */
.gm-cal{position:relative;flex:1;max-width:260px;height:8px;border-radius:999px;background:var(--g-line);margin-bottom:14px}
.gm-cal i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--g-acc)}
.gm-cal b{position:absolute;top:11px;transform:translateX(-50%);font-size:.66rem;color:var(--g-mut);font-weight:800;letter-spacing:.04em}
.gm-cal b:last-child{transform:translateX(-90%)}
.gm-day{min-width:4.6em}
.gm-fview{width:100%;max-width:460px;margin:0 auto}
.gm-shelfscene{position:relative;margin:6px auto 0;max-width:min(460px,62vh)}
@media (min-width:700px){.gm-fview{max-width:720px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:16px}.gm-fview .gm-fmeters{margin:0}}
.gm-scene{display:block;width:100%;height:auto;overflow:visible}
.gm-win{fill:rgba(160,200,255,.12);stroke:var(--g-line);stroke-width:3}
.gm-winx{stroke:var(--g-line);stroke-width:3}
.gm-beam{fill:#FFE38A;opacity:0;transition:opacity .4s}
.gm-lamp{fill:none;stroke:var(--g-mut);stroke-width:3.5;stroke-linejoin:round}
.gm-glow{fill:#FF9A4D;opacity:0;transition:opacity .4s;filter:blur(8px)}
.gm-shelf{fill:var(--g-mut);opacity:.6}
.gm-bud{fill:#6FBF73}
.gm-flid{transition:transform .35s ease;transform-origin:192px 78px}
.gm-hands path{fill:none;stroke:#F2CC8F;stroke-width:9;stroke-linecap:round;opacity:0;transition:opacity .3s}
.gm-fjar{transform-origin:165px 150px}
.hz-lid .gm-flid{transform:translate(18px,-22px) rotate(28deg)}
.hz-sun .gm-beam{opacity:.32}
.hz-heat .gm-glow{opacity:.7}
.hz-hands .gm-hands path{opacity:.9}.hz-hands .gm-fjar{animation:gmWig .9s ease-in-out infinite}
.hz-any .gm-jglass{stroke:var(--g-bad)}
.gm-fpuffs .gm-puff{bottom:22%}
.gm-fmeters{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:center;margin:8px auto 0;max-width:460px;padding:10px 14px;border-radius:14px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line)}
.gm-ftot{grid-row:span 4;display:flex;flex-direction:column;align-items:flex-start;padding-right:12px;border-right:1px solid var(--g-line)}
.gm-ftot span{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--g-mut);max-width:7em;line-height:1.2}
.gm-fnum{font-size:clamp(1.5rem,6vw,1.9rem);font-weight:800;font-variant-numeric:tabular-nums}
.gm-fnote{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:center;gap:8px}
.gm-fnote span{font-size:.82rem;font-weight:800;line-height:1.1}
.gm-fnote em{display:block;font-style:normal;font-size:.66rem;font-weight:700;color:var(--g-mut);text-transform:uppercase;letter-spacing:.06em}
.gm-fbar{height:10px;border-radius:999px;background:var(--g-line);overflow:hidden}
.gm-fbar i{display:block;height:100%;width:100%;border-radius:999px;background:var(--c);transition:width .2s linear}
.gm-hz{margin:10px auto 0;max-width:520px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--g-bad) 14%,var(--g-bg));box-shadow:inset 0 0 0 2px var(--g-bad);animation:gmIn .2s ease-out}
.gm-hz[hidden]{display:none}
.gm-hzt{margin:0;font-weight:800;font-size:1.05rem;text-align:center;text-wrap:balance}
.gm-hz .gm-timer{margin:8px 0}
.gm-hzo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gm-hzb{min-height:54px;font-size:.95rem;padding:8px 10px;line-height:1.2}
.gm-fwhy{max-width:520px}
.gm-front{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px;margin:6px auto 0;max-width:520px}
.gm-front li{min-height:94px;border-radius:12px;border:1.5px dashed var(--g-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;font-size:.78rem;font-weight:700;text-align:center;color:var(--g-mut)}
.gm-front li > span:first-child{font-weight:800}
.gm-front li.on{border-style:solid;border-color:var(--g-ok);color:var(--g-ink);animation:gmBump .35s ease}
.gm-front li.on > span:first-child{display:none}
.gm-front li.auto{border-color:var(--g-bad)}
.gm-front svg,.gm-sj svg{width:26px;height:30px}
.gm-front svg rect,.gm-sj svg rect{fill:var(--g-acc)}
.gm-front svg path,.gm-sj svg path{fill:rgba(255,255,255,.08);stroke:var(--g-ink);stroke-width:2.5}
.gm-front b,.gm-sj b{font-size:.78rem;line-height:1.1}
.gm-frontl{justify-content:center;margin-top:12px}
.gm-rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px;margin:12px auto 0;max-width:520px;padding-top:12px;border-top:6px solid color-mix(in srgb,var(--g-mut) 50%,transparent)}
.gm-sj{min-height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;border-radius:12px;border:1.5px solid var(--g-line);background:var(--g-pan);color:var(--g-ink);font:700 .78rem/1.15 var(--f-body);cursor:pointer;touch-action:manipulation}
.gm-sj span{font-variant-numeric:tabular-nums;color:var(--g-acc);font-weight:800}
.gm-sj.gone{visibility:hidden}
.gm-sj.no{border-color:var(--g-bad);animation:gmShake .4s ease}
.gm-fres{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-block:6px}
.gm-cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:420px}
.gm-cp p{margin:6px 0 0;font-size:.8rem;font-weight:800;color:var(--g-mut)}
.gm-cp{display:flex;flex-direction:column-reverse}
.gm-cb{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:130px;border-bottom:1.5px solid var(--g-line)}
.gm-cb span{position:relative;width:34%;height:var(--h);min-height:4px;border-radius:6px 6px 0 0;animation:gmGrow .7s ease}
.gm-cb .me{background:var(--g-ok)}.gm-cb .them{background:var(--g-bad)}
.gm-cb b{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:3px;font-size:.78rem;white-space:nowrap}
@keyframes gmGrow{from{height:0}}
.gm-key{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin:0;font-size:.8rem;font-weight:700;color:var(--g-mut)}
.gm-key i{width:12px;height:12px;border-radius:3px;margin-left:6px}.gm-key i.me{background:var(--g-ok)}.gm-key i.them{background:var(--g-bad)}
.act.is-game.gm-full :is(.gm-blend,.gm-fresh):not(.gm-intro):not(.gm-over) > .gm-bar + *{margin-top:12px}
.act.is-game.gm-full :is(.gm-blend,.gm-fresh):not(.gm-intro):not(.gm-over) > :last-child{margin-bottom:0}
@media (max-height:760px) and (max-width:600px){.gm-jar{width:min(104px,100%)}.gm-wheel{width:min(150px,100%)}.gm-dadd{min-height:78px;padding:7px 4px 6px}.gm-dadd svg{height:22px}.gm-order{padding:9px 12px 10px}.gm-lab{margin-top:6px}.gm-lab div{font-size:.84rem;padding:1px 0}.gm-shelfscene{max-width:min(340px,48vh)}}
@media (max-width:420px){.gm-mixer{gap:4px}.gm-hzo{grid-template-columns:1fr}.gm-fmeters{padding:8px 10px;gap:4px 10px}}
@media (prefers-reduced-motion:reduce){.gm-puff,.gm-stars i.on,.gm-dr.drip .gm-dadd svg,.hz-hands .gm-fjar,.gm-sj.no,.gm-front li.on,.gm-cb span,.gm-hz{animation:none}.gm-jliq,.gm-flid{transition:none}}
/* confetti on a finish */
.gm-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* rush keeps still (Mathew, Oct 31 2026: a right answer pushed the game down): the streak pill holds its place in the bar,
   confetti stays out of the centering, and a miss's explanation covers the ticket instead of opening between it and the buttons */
.gm-rush .gm-bar{min-height:calc(1.6em + 6px)}
.gm-rush .gm-rail > .gm-why{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94%);max-height:100%;overflow:auto;box-sizing:border-box;margin:0;z-index:2;justify-content:center;text-align:center;background:color-mix(in srgb,#fff 8%,var(--g-bg));box-shadow:inset 0 0 0 1.5px var(--g-bad),0 14px 28px -14px rgba(0,0,0,.6);animation:gmWhyIn .2s ease-out}
.gm-rush .gm-rail:has(> .gm-why:not([hidden])) > .gm-ticket{opacity:0}
.gm-rush .gm-rail > .gm-why .gm-got{margin:4px auto 0}
@keyframes gmWhyIn{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.gm-rush .gm-rail > .gm-why{animation:none}}
.gm-confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:gmConf 1.6s ease-in forwards}
@keyframes gmConf{to{transform:translate(var(--dx),420px) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){.gm-ticket.in,.gm-ticket.out,.gm-ticket.shake,.gm-opt.yes,.gm-stamp,.gm-card.got,.gm-tin.ready,.gm-btl.no,.gm-verdict,.gm-streak.pop{animation:none}.gm-cin{transition:none}}

/* a game in full screen: the title and stage fill the screen on the game's own dark color */
.gm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gm-fs{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:inherit;cursor:pointer}
.gm-fs svg{width:20px;height:20px}
.gm-fs:hover{border-color:var(--cream)}
.act.is-game.gm-full{position:fixed;inset:0;z-index:1000;margin:0;max-width:none;width:100vw;height:100vh;height:100dvh;border-radius:0;overflow:auto;display:flex;flex-direction:column;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:var(--g-bg);color:#F7F2E6;--cream:#F7F2E6;--line:rgba(255,255,255,.18)}
.act.is-game:fullscreen{background:var(--g-bg)}
.act.is-game.gm-full .gm-top{width:100%;max-width:760px;margin:0 auto}
.act.is-game.gm-full .gm-stage{flex:1 0 auto;width:100%;max-width:760px;margin:12px auto 0;display:flex;flex-direction:column;justify-content:center;box-shadow:none}
.act.is-game.gm-full .gm-jig{width:min(300px,62vw,38vh)}
.act.is-game.gm-full .gm-grid{width:min(100%,62vh)}
.act.is-game.gm-full .gm-grid.many{width:min(100%,56vh)}
.act.is-game.gm-full .gm-stage > .gm-grid{margin-bottom:auto}
.act.is-game.gm-full .gm-rail{min-height:min(220px,26vh)}
.act.is-game.gm-full .label{color:#c9c3e0}
html.gm-fs-lock,html.gm-fs-lock body{overflow:hidden}
html.gm-fs-lock .ptw > .screen,html.gm-fs-lock .ptw,html.gm-fs-lock .screens{clip-path:none!important;transform:none!important;filter:none!important;contain:none!important}
.act.is-game.gm-full .gm-stage:not(.gm-intro):not(.gm-over){justify-content:flex-start}
.act.is-game.gm-full .gm-stage > .gm-bar + *{margin-top:auto}
.act.is-game.gm-full .gm-stage:not(.gm-intro):not(.gm-over) > :last-child{margin-bottom:auto}

/* icons in games (game icons { name: file }): line icons in the game's colors, beside a pour, option, answer or bottle */
.gm-ico{width:28px;height:28px}
.gm-stage .gm-ico:not(.full){background-color:var(--gi,currentColor)}
.gm-ask.has-ico{display:flex;align-items:center;justify-content:center;gap:12px;--gi:var(--g-acc)}
.gm-ask.has-ico .gm-ico{width:1.7em;height:1.7em}
.gm-opt.has-ico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px;--gi:var(--g-acc)}
.gm-opt .gm-ico{width:30px;height:30px}
.gm-opt.yes,.gm-opt.no{--gi:currentColor}
.gm-btl{--gi:var(--g-btl)}
.gm-btl .gm-ico{width:34px;height:34px}
.gm-face{--gi:#1d1640}
.gm-face .gm-ico{width:clamp(30px,46%,58px);height:clamp(30px,46%,58px)}
@media (max-width:520px){.gm-opt .gm-ico{width:24px;height:24px}.gm-btl .gm-ico{width:28px;height:28px}}

/* in a column stage (full screen, and on computers) auto side margins would shrink these to their content */
:is(.gm-opts,.gm-bench,.gm-tray,.gm-rail,.gm-amts,.gm-pour-wrap){width:100%;box-sizing:border-box}

/* Games on computers (Mathew found them small, Oct 26 2026): the game takes the whole content column, the stage is
   as tall as most of the screen with the play centered in it, and boards, tickets, jiggers, bottles and buttons
   grow to match. Phones and tablets held upright keep the sizes above. */
@media (min-width:1024px) and (min-height:640px){
  .work:has(> .act.is-game){max-width:1120px}
  .act.is-game .gm-stage{padding:28px 32px}
  .act.is-game .gm-stage.gm-intro,.act.is-game .gm-stage.gm-over{min-height:clamp(380px,52vh,560px);justify-content:center}
  .act.is-game:not(.gm-full) :is(.gm-pour,.gm-rush,.gm-match,.gm-build):not(.gm-intro):not(.gm-over){min-height:clamp(400px,calc(100vh - 380px),600px);display:flex;flex-direction:column}
  .act.is-game:not(.gm-full) :is(.gm-pour,.gm-rush,.gm-match,.gm-build):not(.gm-intro):not(.gm-over) > .gm-bar + *{margin-top:auto}
  /* the space left over goes above and below the play (hidden parts at the end can't take it, so a spacer does) */
  .act.is-game:not(.gm-full) :is(.gm-pour,.gm-rush,.gm-match,.gm-build):not(.gm-intro):not(.gm-over)::after{content:"";margin-top:auto}
  .gm-art{width:156px;height:117px}
  .gm-how{font-size:1.18rem;max-width:46ch}
  .gm-play{min-width:220px;min-height:56px;font-size:1.1rem}
  .gm-bar{font-size:.95rem;margin-bottom:12px}
  .gm-ask{font-size:1.7rem}
  .gm-why{max-width:820px;font-size:1.06rem;padding:12px 16px}
  .gm-stage > .gm-next{min-height:52px;font-size:1.05rem}
  .gm-stats div{min-width:120px;padding:12px 18px}
  .gm-stats dd{font-size:1.8rem}
  /* pour */
  .gm-jig{width:min(340px,38vh)}
  .gm-ml{font-size:12px}
  .gm-hold{min-width:320px;min-height:64px;font-size:1.15rem}
  .gm-verdict b{font-size:1.35rem}
  /* rush */
  .gm-rail{min-height:250px}
  .gm-ticket{width:min(580px,82%);padding:26px 30px 34px}
  .gm-ticket b{font-size:2.6rem}
  .gm-tno{font-size:.85rem}
  .gm-opts{max-width:880px;gap:14px;margin-top:22px}
  .gm-opt{min-height:84px;font-size:1.2rem;border-radius:16px}
  .gm-opt.has-ico{min-height:112px;gap:8px}
  .gm-opt .gm-ico{width:42px;height:42px}
  /* match: two rows across the stage (the columns and height cap come from the game, --gc and --gw) */
  .act.is-game .gm-grid,.act.is-game .gm-grid.many,.act.is-game.gm-full .gm-grid,.act.is-game.gm-full .gm-grid.many{grid-template-columns:repeat(var(--gc,4),minmax(0,1fr));gap:14px;width:100%;max-width:min(1000px,var(--gw,100vh))}
  .act.is-game .gm-grid > .gm-card:is(:last-child,:nth-last-child(2)){grid-column:auto}
  .gm-face{font-size:1.08rem;padding:10px;gap:8px}
  .gm-face b{font-size:1.3rem}
  .gm-glass,.gm-face .gm-ico{width:clamp(40px,52%,84px);height:auto}
  .gm-face .gm-ico{aspect-ratio:1}
  /* build: the bottles stand in one row under the tin */
  .gm-bench{max-width:780px;gap:32px}
  .gm-tin{width:min(150px,17vh)}
  .gm-slots{gap:10px}
  .gm-slots li{padding:14px 16px;font-size:1.1rem}
  .gm-tray{max-width:1000px;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin-top:20px}
  .gm-btl{padding:16px 8px 14px;gap:8px;font-size:1rem}
  .gm-btl svg{width:28px}
  .gm-btl .gm-ico{width:50px;height:50px}
  .gm-amts p{font-size:1.15rem}
  .gm-amts button{min-width:92px;min-height:56px;font-size:1.1rem}
  /* the sales games: wider chat and choices */
  :is(.gm-chat,.gm-replies,.gm-picks,.gm-needs,.gm-deck,.gm-setup,.gm-meter,.gm-timer){max-width:780px}
  .gm-chat{max-height:min(50vh,420px)}
  .gm-b p{font-size:1.1rem}
  .gm-reply,.gm-qbtn,.gm-pick{min-height:58px;font-size:1.05rem}
  /* full screen on a computer uses the width too */
  .act.is-game.gm-full .gm-top,.act.is-game.gm-full .gm-stage{max-width:1080px}
  .act.is-game.gm-full .gm-jig{width:min(380px,42vh)}
}

/* XP and the leaderboard (free gen ed courses): a chip in the top bar, a card on the last screen, a sheet with the board */
.xp-chip{position:relative;display:inline-flex;align-items:center;gap:5px;margin-left:auto;margin-right:10px;padding:6px 11px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--tagline,#F2CC8F) 55%,transparent);background:color-mix(in srgb,var(--tagline,#F2CC8F) 14%,transparent);color:inherit;font:800 .85rem var(--f-body);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.xp-chip svg{width:15px;height:15px;color:var(--tagline,#F2CC8F)}
.xp-chip .lbl{font-weight:700;opacity:.8}
.xp-chip.bump{animation:gmBump .45s ease}
.xp-gain{position:absolute;right:4px;top:100%;margin-top:4px;padding:3px 9px;border-radius:999px;background:var(--tagline,#F2CC8F);color:#170B4F;font:800 .8rem var(--f-body);pointer-events:none;animation:xpGain 1.5s ease forwards}
@keyframes xpGain{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
@media (max-width:520px){.xp-chip{padding:5px 9px;margin-right:6px}.xp-chip .lbl{display:none}}
@media (prefers-reduced-motion:reduce){.xp-chip.bump,.xp-gain{animation:none}}
.xp-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line)}
.xp-card-l{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tagline,#F2CC8F) 20%,transparent);color:var(--tagline,#F2CC8F)}
.xp-card-l svg{width:22px;height:22px}
.xp-card h3{font-size:1.15rem;font-weight:800;margin-top:2px}
@media (max-width:560px){.xp-card{grid-template-columns:auto minmax(0,1fr)}.xp-card .btn{grid-column:1/-1;width:100%}}
.xp-sheet .cs-in{max-width:620px}
.xp-total{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:800;color:var(--tagline,#F2CC8F)}
.xp-total svg{width:18px;height:18px}
.xp-tabs{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.xp-tabs button{padding:8px 16px;border-radius:999px;border:0;background:transparent;color:inherit;font:700 .92rem var(--f-body);cursor:pointer}
.xp-tabs button[aria-selected="true"]{background:var(--tagline,#F2CC8F);color:#170B4F}
.xp-body{margin-top:14px}
.xp-me{font-weight:800;margin-bottom:10px}
.xp-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.xp-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.xp-list li.me{border-color:var(--tagline,#F2CC8F);box-shadow:0 0 0 1.5px var(--tagline,#F2CC8F)}
.xp-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:var(--panel-2)}
.xp-list li.top1 .xp-rank{background:#F2CC8F;color:#170B4F}.xp-list li.top2 .xp-rank{background:#D7DAE6;color:#170B4F}.xp-list li.top3 .xp-rank{background:#E3A774;color:#170B4F}
.xp-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-pts{font-variant-numeric:tabular-nums}
.xp-anon{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:.95rem;cursor:pointer}
.xp-anon input{margin-top:4px;flex:none}.xp-anon small{display:block;font-size:.84rem;color:var(--muted);margin-top:2px;text-wrap:pretty}
.xp-scope{display:flex;gap:4px;margin-top:18px;padding:4px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.xp-scope button{flex:1 1 0;min-width:0;padding:9px 12px;border-radius:10px;border:0;background:transparent;color:inherit;font:700 .92rem var(--f-body);cursor:pointer;text-wrap:balance}
.xp-scope button[aria-selected="true"]{background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:inset 0 -3px 0 var(--tagline,#F2CC8F)}
.xp-scope + .xp-tabs{margin-top:10px}
.xp-ind{margin:0 0 10px}
.xp-pub{margin-top:12px;font-size:.92rem}.xp-pub a{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:inherit}.xp-pub a svg{width:14px;height:14px}
.xp-who{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.xp-show{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:.95rem;font-weight:700}
.xp-show select{font:600 .95rem var(--f-body);padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:inherit;max-width:100%}
.sh-ref{display:flex;align-items:flex-start;gap:6px;margin-top:8px!important;font-size:.9rem!important}
.sh-ref svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--tagline,#F2CC8F)}.sh-ref b{color:inherit}
.xp-how{margin-top:14px;font-size:.92rem;color:var(--muted)}
.xp-how summary{cursor:pointer;font-weight:700;color:inherit}
.xp-how ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.xp-fb{display:flex;align-items:flex-start;gap:6px;margin-top:6px}
.xp-fb svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--tagline,#F2CC8F)}

/* ---------- Leaderboard in Learn Brands colors (the user asked, Oct 23 2026: "more Learn Brands branded, dark blue
   gradient, lights, dynamic"). The sheet and the finish card look the same in every course, whatever its theme:
   navy gradient, teal and blue lights drifting slowly behind, white type, teal for you, gold, silver and bronze for the top three. */
.xp-sheet{--lb-navy:#06002E;--lb-navy2:#0A0147;--lb-navy3:#171066;--lb-teal:#1CC296;--lb-blue:#3B47BC;--lb-gold:#F2CC8F;
  color:#fff;background:linear-gradient(160deg,var(--lb-navy) 0%,var(--lb-navy2) 55%,var(--lb-navy3) 100%);isolation:isolate}
.xp-sheet::before,.xp-sheet::after{content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(10px)}
.xp-sheet::before{width:70vmax;height:70vmax;right:-22vmax;top:-30vmax;background:radial-gradient(circle,rgba(28,194,150,.34),transparent 62%);animation:lbGlowA 22s ease-in-out infinite alternate}
.xp-sheet::after{width:80vmax;height:80vmax;left:-30vmax;bottom:-38vmax;background:radial-gradient(circle,rgba(59,71,188,.6),transparent 64%);animation:lbGlowB 28s ease-in-out infinite alternate}
@keyframes lbGlowA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vmax,10vmax) scale(1.12)}100%{transform:translate(-4vmax,22vmax) scale(.94)}}
@keyframes lbGlowB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(14vmax,-8vmax) scale(1.08)}100%{transform:translate(24vmax,-18vmax) scale(1)}}
.xp-sheet .cs-in{position:relative}
.xp-sheet .cs-top .label{color:rgba(255,255,255,.6);letter-spacing:.1em}
.xp-sheet .cs-top h2{color:#fff;text-transform:none;font-family:var(--f-body);font-weight:800;letter-spacing:-.01em}
.xp-sheet .xp-total{color:var(--lb-teal)}
.xp-sheet .cs-x{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.xp-sheet .cs-x:hover{background:rgba(255,255,255,.16)}
.xp-sheet .cs-x:focus-visible{outline-color:var(--lb-teal)}
.xp-sheet .fine,.xp-sheet .xp-ind{color:rgba(255,255,255,.72)}
.xp-sheet .xp-scope,.xp-sheet .xp-tabs{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.xp-sheet .xp-scope button,.xp-sheet .xp-tabs button{color:rgba(255,255,255,.8)}
.xp-sheet .xp-scope button[aria-selected="true"]{background:#fff;color:var(--lb-navy2);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.xp-sheet .xp-tabs button[aria-selected="true"]{background:var(--lb-teal);color:var(--lb-navy)}
.xp-sheet .xp-scope button:focus-visible,.xp-sheet .xp-tabs button:focus-visible{outline:2px solid var(--lb-teal);outline-offset:2px}
.xp-sheet .xp-me{color:#fff}
.xp-guest{font-weight:600;line-height:1.45}.xp-guest-a{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}.xp-guest-a a{font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:3px}.xp-sheet .xp-guest-a a{color:#1CC296}
.xp-sheet .xp-list li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);backdrop-filter:blur(6px);animation:lbRow .45s cubic-bezier(.2,.8,.2,1) both}
.xp-sheet .xp-list li:nth-child(2){animation-delay:.04s}.xp-sheet .xp-list li:nth-child(3){animation-delay:.08s}.xp-sheet .xp-list li:nth-child(4){animation-delay:.12s}.xp-sheet .xp-list li:nth-child(5){animation-delay:.16s}
.xp-sheet .xp-list li:nth-child(6){animation-delay:.2s}.xp-sheet .xp-list li:nth-child(7){animation-delay:.24s}.xp-sheet .xp-list li:nth-child(8){animation-delay:.28s}.xp-sheet .xp-list li:nth-child(9){animation-delay:.32s}.xp-sheet .xp-list li:nth-child(10){animation-delay:.36s}
@keyframes lbRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xp-sheet .xp-list li.top1{background:linear-gradient(90deg,rgba(242,204,143,.2),rgba(255,255,255,.06) 70%);border-color:rgba(242,204,143,.45);box-shadow:0 0 28px rgba(242,204,143,.16)}
.xp-sheet .xp-list li.me{background:linear-gradient(90deg,rgba(28,194,150,.24),rgba(28,194,150,.08));border-color:var(--lb-teal);box-shadow:0 0 0 1.5px var(--lb-teal),0 0 26px rgba(28,194,150,.25)}
.xp-sheet .xp-rank{background:rgba(255,255,255,.12);color:#fff}
.xp-sheet .xp-list li.top1 .xp-rank{background:var(--lb-gold);color:var(--lb-navy)}.xp-sheet .xp-list li.top2 .xp-rank{background:#D7DAE6;color:var(--lb-navy)}.xp-sheet .xp-list li.top3 .xp-rank{background:#E3A774;color:var(--lb-navy)}
.xp-sheet .xp-name{color:#fff}.xp-sheet .xp-pts{color:#fff}
.xp-sheet .xp-pub a{color:#7FE3C4}
.xp-sheet .xp-who{border-top-color:rgba(255,255,255,.14)}
.xp-sheet .xp-show{color:#fff}
.xp-sheet .xp-show select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.xp-sheet .xp-show select option{color:#0A0147;background:#fff}
.xp-sheet .xp-anon{color:#fff}.xp-sheet .xp-anon small{color:rgba(255,255,255,.65)}
.xp-sheet input[type=checkbox]{accent-color:var(--lb-teal);width:18px;height:18px}
.xp-sheet .xp-how{color:rgba(255,255,255,.72)}.xp-sheet .xp-how summary{color:#fff}
/* the card on the last screen, in the same colors */
.xp-card{position:relative;overflow:hidden;isolation:isolate;color:#fff;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,#06002E 0%,#0A0147 55%,#171066 100%)}
.xp-card::before{content:"";position:absolute;z-index:-1;width:320px;height:320px;right:-110px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(28,194,150,.4),transparent 65%);animation:lbGlowA 18s ease-in-out infinite alternate}
.xp-card::after{content:"";position:absolute;z-index:-1;width:360px;height:360px;left:-160px;bottom:-230px;border-radius:50%;background:radial-gradient(circle,rgba(59,71,188,.65),transparent 65%)}
.xp-card .label{color:rgba(255,255,255,.65)}.xp-card h3{color:#fff;text-transform:none}.xp-card .fine{color:rgba(255,255,255,.75)}
.xp-card .xp-card-l{background:rgba(28,194,150,.18);color:#1CC296}
.xp-card .btn{background:#1CC296;border-color:#1CC296;color:#06002E}
.xp-card .btn:hover{background:#17ad85;border-color:#17ad85}
@media (prefers-reduced-motion:reduce){.xp-sheet::before,.xp-sheet::after,.xp-card::before,.xp-sheet .xp-list li{animation:none}}
/* save your spot: the sign-up step inside the guest card */
.who-go a.btn{text-decoration:none}
.who-go .linkish{margin:0 0 0 14px}
.who-card.spot .who-done,.who-inline.spot .who-done{margin:6px 0 12px;font-size:.92rem;line-height:1.45;padding-right:28px}

/* top 10 this month: the one-tap ask to show on the public leaderboard (on the navy XP card) */
.xp-card .xp-pubask{grid-column:1/-1;margin-top:4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.xp-card .xp-pubask p{margin:0 0 10px;color:#fff;font-weight:700;text-wrap:pretty}
.xp-card .xp-pubask .fine{margin:8px 0 0;font-weight:400;color:rgba(255,255,255,.7)}
.xp-card .xp-pubask-b{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.xp-card .xp-pubask .linkish{color:rgba(255,255,255,.8);margin:0}

/* State versions (Oct 29 2026): the cover's state picker and, for guests, the log in card */
.st-pick{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.st-pick .st-why{margin:0;color:var(--muted)}
.st-pick .st-now{margin:0;font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.st-pick .st-now b{color:var(--cream);font-weight:700}
.st-pick .st-now .linkish{margin:0}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);color:inherit;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.st-chip:hover:not([aria-pressed="true"]){border-color:var(--cream)}
.st-chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.st-other{display:flex;flex-direction:column;gap:6px;max-width:340px}
.st-other[hidden]{display:none}
.st-other select{font:inherit;font-size:16px;min-height:46px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:inherit}
.st-pick.guest{padding:16px 18px;border:1.5px solid var(--mint);border-radius:var(--r-sm);background:var(--panel)}
.st-pick.guest .label{color:var(--cream)}
.lg-card{margin-top:22px;padding:16px 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);display:grid;gap:12px}
.lg-card .lg-t{margin:0 0 4px;font-weight:800;font-size:1.02rem}
.lg-card .fine{margin:0;color:var(--muted)}
.lg-acts{display:flex;flex-wrap:wrap;gap:8px}
.lg-acts .btn{text-decoration:none}
.lg-acts .btn:not(.go){color:inherit}
.lg-card .lg-guest{font-size:.84rem}
@media (max-width:560px){.st-chip{flex:1 1 calc(50% - 8px)}.lg-acts .btn{flex:1 1 auto}}
.map-stv{margin:6px 0 0;font-size:.9rem;color:var(--muted)}
.map-stv .linkish{margin:0 0 0 6px}

/* Mastery retake (Oct 31 2026): the sheet reuses the certificate sheet; the XP card lists ways to earn more */
.mx-intro{max-width:62ch;color:var(--muted);text-wrap:pretty}
.mx-q{padding:clamp(16px,3vw,28px)}
.mx-q .opts{display:grid;gap:10px;margin-top:14px}
.mx-go{margin-top:14px}
.mx-end{text-align:center;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.mx-end h3{font-size:clamp(1.2rem,3.4vw,1.6rem);line-height:1.2;text-wrap:balance}
.mx-ic svg{width:44px;height:44px;color:var(--gold,#f2c94c)}
.xp-more{grid-column:1/-1;margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.xp-more ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.xp-more li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.95rem;line-height:1.4}
.xp-more a.btn{text-decoration:none}
.xp-more li > span{flex:1 1 240px;text-wrap:pretty}
.xp-more li.done > span::before{content:"\2713";margin-right:6px;color:var(--good,#4ade80);font-weight:700}

/* Language picker (Nov 2026): course.json languages, on the cover and in the course map */
.lg-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px}
.lg-pick > svg{width:20px;height:20px;flex:none;color:var(--muted);margin-right:2px}
.lg-chip{min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:inherit;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.lg-chip:hover:not([aria-pressed="true"]){border-color:var(--cream)}
.lg-chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.lg-chip:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.lg-pick.in-map{margin:12px 0 0}
@media (max-width:600px){.lg-chip{min-height:40px;padding:0 13px}}

/* ---------- Run the Store (game "store") ---------- */
.gm-store{text-align:left}
.gm-store .gm-k{margin:0}
.st-hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 14px;margin:-4px -4px 14px;border-radius:14px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line);font-variant-numeric:tabular-nums}
.st-hud > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-hud small{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.st-hud b{font-size:1.02rem;font-weight:800}
.st-wk{flex-direction:row!important;align-items:center;gap:10px!important;margin-right:auto}
.st-trust i{display:block;width:96px;height:8px;margin-top:5px;border-radius:99px;background:var(--g-line);position:relative;overflow:hidden}
.st-trust i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,var(--g-acc),var(--g-ok));transition:width .5s ease}
.st-strikes{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:5px!important;max-width:84px}
.st-strikes small{flex-basis:100%}
.st-strikes i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--g-line)}
.st-strikes i.on{background:var(--g-bad);box-shadow:none}
.st-body{display:flex;flex-direction:column;gap:12px}
.st-h{margin:0;font-family:var(--f-head);font-size:clamp(1.35rem,4.2vw,1.8rem);font-weight:800;line-height:1.12;text-wrap:balance}
.st-text{margin:0;color:var(--g-mut);line-height:1.45;max-width:62ch}
.st-go{display:flex;justify-content:flex-end;margin-top:4px}
.st-go .btn{min-height:50px;padding-inline:22px}
.st-ico{width:30px;height:30px;flex:none;color:var(--g-acc)}
.st-cat{display:flex;align-items:center;gap:10px;min-width:0}
.st-cat b{font-weight:800;font-size:1.02rem}
.st-warn{color:var(--g-acc);font-size:.86rem;font-weight:700;margin:0}
.st-note{margin:0;font-size:.92rem;color:var(--g-mut)}
.st-note.bad{color:var(--g-bad);font-weight:700}
/* start */
.st-start{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-block:6px}
.st-names{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.st-chip{min-height:42px;padding:0 16px;border-radius:99px;border:1.5px solid var(--g-line);background:var(--g-pan);color:var(--g-ink);font:700 .95rem var(--f-body);cursor:pointer;touch-action:manipulation}
.st-chip:hover{border-color:var(--g-ink)}
.st-chip.on{background:var(--g-acc);border-color:var(--g-acc);color:#1a1236}
.st-own{display:flex;flex-direction:column;gap:6px;width:min(100%,360px);text-align:left;font-size:.8rem;font-weight:700;color:var(--g-mut)}
.st-own input{min-height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--g-line);background:rgba(0,0,0,.18);color:var(--g-ink);font:600 1rem var(--f-body)}
.st-own input:focus{outline:none;border-color:var(--g-acc)}
.st-rules{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:48ch;color:var(--g-mut);font-size:.95rem;line-height:1.4}
.st-rules li{padding-left:22px;position:relative}
.st-rules li::before{content:"";position:absolute;left:4px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--g-acc)}
.st-start .st-open{min-width:220px;min-height:54px}
/* the assistant manager */
.st-mentor{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--g-acc) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-acc) 40%,transparent)}
.st-mentor p{margin:0;line-height:1.45}
.st-mentor small{color:var(--g-mut);font-weight:700}
.st-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--g-acc);color:#1a1236;font-weight:800;font-size:1.1rem}
/* Monday */
.st-shelf,.st-week{display:grid;gap:8px}
.st-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr)) minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--g-pan)}
.st-row > span:not(.st-cat){display:flex;flex-direction:column;font-weight:800;font-variant-numeric:tabular-nums}
.st-row small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mut);font-weight:800}
.st-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st-kpi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line);min-width:0}
.st-kpi small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mut);font-weight:800}
.st-kpi b{font-size:clamp(1.1rem,3.4vw,1.45rem);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-kpi b.bad{color:var(--g-bad)}
.st-kpi em{font-style:normal;font-size:.78rem;font-weight:700;color:var(--g-mut)}
.st-kpi em.up{color:var(--g-ok)}.st-kpi em.down{color:var(--g-bad)}
.st-wrow{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:4px 12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--g-pan)}
.st-bar{position:relative;height:14px;border-radius:99px;background:var(--g-line)}
.st-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--g-ok),color-mix(in srgb,var(--g-ok) 60%,var(--g-acc)))}
.st-bar em{position:absolute;top:-24px;left:calc(var(--d) * 100%);transform:translateX(-50%);font-style:normal;font-size:.72rem;font-weight:800;white-space:nowrap;padding:2px 7px;border-radius:99px;background:var(--g-bad);color:#2a0d05}
.st-wrow:has(.st-bar em){padding-top:26px}
.st-nums{grid-column:2;font-size:.86rem;color:var(--g-mut);font-variant-numeric:tabular-nums}
.st-nums b{color:var(--g-ink)}.st-nums b.bad{color:var(--g-bad)}
.st-week.anim .st-bar i{animation:stFill 1.4s cubic-bezier(.3,.7,.3,1) both}
.st-week.anim .st-bar em{animation:stTag .3s ease both;animation-delay:calc(var(--d) * 1.2s + .2s)}
.st-week.anim .st-wrow:nth-child(2) .st-bar i{animation-delay:.12s}.st-week.anim .st-wrow:nth-child(3) .st-bar i{animation-delay:.24s}.st-week.anim .st-wrow:nth-child(4) .st-bar i{animation-delay:.36s}
@keyframes stFill{from{width:0}}
@keyframes stTag{from{opacity:0;transform:translate(-50%,6px)}}
.st-pl{border-radius:12px;background:var(--g-pan);padding:0 14px}
.st-pl summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--g-mut)}
.st-pl dl{margin:0 0 12px;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.st-pl dl div{display:flex;justify-content:space-between;gap:12px}
.st-pl dt{color:var(--g-mut)}.st-pl dd{margin:0;font-weight:700}.st-pl dd.neg{color:var(--g-mut)}
.st-pl .tot{border-top:1px solid var(--g-line);padding-top:6px;margin-top:2px}.st-pl .tot dt,.st-pl .tot dd{color:var(--g-ink);font-weight:800}
/* events */
.st-due{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:12px;background:var(--g-pan);box-shadow:inset 0 0 0 1.5px var(--g-ok)}
.st-due.bad{box-shadow:inset 0 0 0 1.5px var(--g-bad)}
.st-due svg{width:20px;height:20px;flex:none;color:var(--g-ok);margin-top:2px}.st-due.bad svg{color:var(--g-bad)}
.st-due p{margin:0;line-height:1.4}
.st-choices,.st-replies{display:grid;gap:10px}
.gm-store .gm-opt{min-height:58px;padding:12px 16px;text-align:left;font-weight:700;font-size:1rem;line-height:1.35}
.gm-store .gm-opt:disabled{cursor:default;opacity:.55}
.gm-store .gm-opt.yes,.gm-store .gm-opt.no,.gm-store .gm-opt.meh{opacity:1}
.gm-opt.meh{border-color:var(--g-acc);background:color-mix(in srgb,var(--g-acc) 16%,transparent)}
.st-after{display:flex;flex-direction:column;gap:10px}
.st-after .gm-why{margin:0;max-width:none}
.st-after .gm-why em{font-style:normal;color:var(--g-acc);font-weight:700}
/* stock and prices */
.st-cards{display:grid;gap:10px}
.st-card{padding:14px;border-radius:14px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line);display:flex;flex-direction:column;gap:8px}
.st-ch-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.st-meta{font-size:.84rem;color:var(--g-mut);font-variant-numeric:tabular-nums}
.st-q{margin:2px 0 0;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.st-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.st-seg.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.st-seg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 4px;border-radius:11px;border:1.5px solid var(--g-line);background:rgba(0,0,0,.14);color:var(--g-ink);font:inherit;cursor:pointer;touch-action:manipulation}
.st-seg button b{font-size:.92rem;font-weight:800}
.st-seg button small{font-size:.74rem;color:var(--g-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.st-seg button:hover:not(:disabled){border-color:var(--g-ink)}
.st-seg button.on{background:var(--g-acc);border-color:var(--g-acc);color:#1a1236}
.st-seg button.on small{color:#3a2e5c}
.st-seg button:disabled:not(.on){opacity:.4;cursor:default}
.st-line{margin:0;font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums}
.st-sum{display:flex;flex-wrap:wrap;gap:8px 22px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.2);font-variant-numeric:tabular-nums}
.st-sum span{display:flex;flex-direction:column}
.st-sum small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.st-sum b{font-size:1.15rem;font-weight:800}.st-sum b.warn{color:var(--g-bad)}
/* the counter */
.st-chat{margin:0;max-width:none;max-height:none}
.st-chat .gm-b{max-width:min(92%,560px)}
/* final */
.st-final{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;text-align:left}
.st-score{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.st-score small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.st-score b{font-size:clamp(2.6rem,9vw,3.6rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--g-acc)}
.st-score span{color:var(--g-mut);font-weight:700}
.st-math{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px}
.st-math span{display:flex;flex-direction:column;align-items:center;padding:8px 12px;border-radius:12px;background:var(--g-pan);min-width:96px}
.st-math small{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--g-mut);white-space:nowrap}
.st-math b{font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums}
.st-math i{font-style:normal;font-weight:800;color:var(--g-mut)}
.st-cw{padding:12px 16px;border-radius:14px;background:var(--g-pan);box-shadow:inset 0 0 0 1.5px var(--g-bad)}
.st-cw.good{box-shadow:inset 0 0 0 1.5px var(--g-ok)}
.st-cw h6{margin:0 0 6px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--g-mut)}
.st-cw ul{margin:0;padding-left:18px;display:grid;gap:4px;line-height:1.4}
.st-cw em{font-style:normal;color:var(--g-mut)}
.st-fb{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:760px;padding:16px;border-radius:14px;background:var(--g-pan);box-shadow:inset 0 0 0 1px var(--g-line)}
.st-fb h6{margin:0;font-size:1.05rem;font-weight:800}
.st-fb .st-own{width:min(100%,460px)}
.st-fb .stuck{animation:gmShake .4s}
.gm-result:has(.st-final){gap:14px}
.act.is-game.gm-full .gm-stage.gm-store{justify-content:flex-start}
/* the 3D store floor (src/kit/store3d): a band between the numbers and the cards; hidden, it's just its button */
.st-3d{position:relative;margin:-4px -4px 16px;border-radius:14px;overflow:hidden;background:#0d0a3a;box-shadow:inset 0 0 0 1px var(--g-line);height:clamp(240px,46vh,460px)}
.st-3d-host{position:absolute;inset:0}
.st-3d-host canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .5s}
.st-3d.on .st-3d-host canvas{opacity:1}
.st-3d:not(.on):not(.off)::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;border:3px solid var(--g-line);border-top-color:var(--g-ok);animation:st3dSpin .9s linear infinite}
@keyframes st3dSpin{to{transform:rotate(360deg)}}
.st-3d.off{height:auto;background:none;box-shadow:none;margin-bottom:10px}
.st-3d.off .st-3d-host{display:none}
.st-3d-tog{position:absolute;right:10px;bottom:10px;z-index:2;font:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid var(--g-line);background:rgba(10,1,71,.78);color:var(--g-ink);cursor:pointer}
.st-3d-tog:hover{border-color:var(--g-ink)}
.st-3d.off .st-3d-tog{position:static;background:transparent;color:var(--g-mut)}
.s3-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.s3-tag{position:absolute;left:0;top:0;background:rgba(10,1,71,.86);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:5px 8px 6px;font-size:12px;line-height:1.2;white-space:nowrap;color:#F5EEDC;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.s3-tag b{display:block;font-weight:700;margin-bottom:4px}
.s3-tag i{display:block;width:84px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.s3-tag span{display:block;height:100%;background:#20C9A0;border-radius:3px;transition:width .4s}
.s3-labels.sm .s3-tag{font-size:10px;padding:3px 6px 4px;border-radius:7px}.s3-labels.sm .s3-tag i{width:46px;height:4px}.s3-labels.sm .s3-tag b{margin-bottom:3px}
.s3-tag.low span{background:#F2CC8F}.s3-tag.out{border-color:#ff7a8a}.s3-tag.out span{background:#ff7a8a}
@media (prefers-reduced-motion:reduce){.st-3d-host canvas{transition:none}.st-3d:not(.on):not(.off)::after{animation:none}}
@media (max-width:600px){
  .st-hud{gap:6px 14px;padding:10px 12px}
  .st-3d{height:clamp(190px,34vh,300px);margin-bottom:12px}
  .st-wk{flex-basis:100%}
  .st-trust i{width:72px}
  .st-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:4px}
  .st-row .st-warn{grid-column:1 / -1}
  .st-row > span:empty{display:none}
  .st-wrow{grid-template-columns:1fr}
  .st-nums{grid-column:1}
  .st-seg button{min-height:56px}
  .st-seg.four button b{font-size:.84rem}
  .st-go .btn{width:100%;justify-content:center}
  .st-math span{min-width:0;flex:1 1 40%}
  .st-math i{display:none}
}
@media (min-width:760px){.st-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px) and (min-height:640px){
  .st-h{font-size:2rem}
  .st-hud b{font-size:1.12rem}
  .gm-store .gm-opt{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){.st-week.anim .st-bar i,.st-week.anim .st-bar em{animation:none}}