/* Evia7 UI refresh: calm, light surfaces tinted by the learner's Evia colour (theme.js sets --yellow, --soft,
   --yellow-line, --yellow-ink and --bg). No dark fills: buttons use the accent, cards stay white. */
:root{--ui-on-accent:#172033;--ui-ink:#172033;--ui-text:#344054;--ui-muted:#667085;--ui-faint:#98a2b3;--ui-line:#e9edf2;--ui-card:#fff;--ui-radius:22px;--ui-shadow:0 6px 22px rgba(16,24,40,.05)}

/* ---- Buttons: accent primary, white secondary ---- */
/* Darker Evia colours need white text to stay readable. */
html[data-evia-theme="blue"],html[data-evia-theme="purple"],html[data-evia-theme="red"]{--ui-on-accent:#fff}
html body .primary{background:var(--yellow)!important;color:var(--ui-on-accent)!important;border:0!important;box-shadow:0 6px 16px rgba(16,24,40,.08)!important;font-weight:700}
html body .secondary{background:#fff!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;box-shadow:none!important;font-weight:700}
html body .primary:disabled{opacity:.45;box-shadow:none!important}
html body .evia-guide-actions button{background:var(--yellow)!important;color:var(--ui-on-accent)!important}
html body .profile-upload{background:var(--soft)!important;color:var(--yellow-ink)!important}
html body .portfolio-app-count{background:var(--soft)!important;color:var(--yellow-ink)!important}
html body .evidence-toast{background:#fff!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line);box-shadow:0 14px 34px rgba(16,24,40,.14)!important}
html body .evidence-toast .evidence-toast-check{background:var(--yellow)!important;color:var(--ui-on-accent)!important}
html body .bubble.user{background:#fff!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)}
.ui-pill-primary{background:var(--yellow)!important;border-color:var(--yellow)!important;color:var(--ui-on-accent)!important}

/* ---- Page scaffolding ---- */
.ui-page{display:flex;flex-direction:column;gap:16px;padding-bottom:12px}
/* No page titles or header bar: leave room for the floating profile button instead. */
html body .topbar{display:none!important}
#screen.ui-top{padding-top:68px}
.ui-card{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.ui-accent-text{font-size:12.5px;font-weight:700;color:var(--yellow-ink);line-height:1.4}
.ui-section{display:flex;flex-direction:column;gap:10px}
.ui-section-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px}
.ui-section-head h2{margin:0;font-size:18px;letter-spacing:-.01em;color:var(--ui-ink)}
.ui-link{border:0;background:none;padding:6px 2px;font:inherit;font-size:13px;font-weight:700;color:var(--yellow-ink);cursor:pointer}
.ui-help{margin:4px 2px 0;font-size:12px;color:var(--ui-muted)}
.ui-divider{height:1px;background:var(--ui-line);margin:2px 0}
.ui-back{align-self:flex-start;margin-bottom:12px}
.ui-icon-chip{width:38px;height:38px;flex:0 0 38px;border-radius:13px;background:var(--soft);color:var(--yellow-ink);display:grid;place-items:center}
.ui-icon-chip svg,.ui-photo svg,.ui-tile-photo svg,.ui-chev svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}


/* ---- Rings and bars ---- */
.ui-ring{position:relative;display:inline-block;flex:0 0 auto}
.ui-ring svg{display:block}
.ui-ring-track{fill:none;stroke:var(--soft)}
.ui-ring-fill{fill:none;stroke:var(--yellow);stroke-linecap:round}
.ui-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ui-ring-label strong{font-size:24px;letter-spacing:-.02em;color:var(--ui-ink)}
.ui-ring-label small{font-size:10.5px;font-weight:600;color:var(--ui-muted)}
.ui-track{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.ui-track span{display:block;height:100%;border-radius:3px;background:var(--yellow)}

/* ---- Home ---- */
.ui-progress-card{display:flex;align-items:center;gap:18px;padding:18px;cursor:pointer}
.ui-progress-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px}
.ui-line{display:flex;flex-direction:column;gap:5px}
.ui-line-head{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.ui-line-head span:first-child{font-weight:700;color:var(--ui-ink)}
.ui-line-head span:last-child{color:var(--ui-muted);text-align:right}
.ui-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ui-quick-btn{min-height:64px;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;color:var(--ui-ink);text-align:left}
.ui-recent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ui-recent-item{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;font:inherit;color:var(--ui-ink)}
.ui-photo{height:104px;border-radius:18px;background:var(--soft);color:var(--yellow-ink);display:grid;place-items:center;overflow:hidden}
.ui-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ui-recent-item strong{font-size:13.5px;line-height:1.2}
.ui-recent-item small{font-size:11.5px;color:var(--ui-muted)}
.ui-empty{display:flex;align-items:center;gap:12px;padding:16px}
.ui-empty p{margin:0;font-size:13px;line-height:1.45;color:var(--ui-muted)}

/* ---- Progress ---- */
.ui-groups{padding:14px;display:flex;flex-direction:column;gap:12px}
.ui-group-head{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:2px;cursor:pointer;font:inherit;color:var(--ui-ink);text-align:left}
.ui-group-copy{flex:1;display:flex;flex-direction:column;gap:2px}
.ui-group-copy strong{font-size:15px}
.ui-group-copy small{font-size:12px;color:var(--ui-muted)}
.ui-group-pct{font-size:17px;font-weight:750}
.ui-chev{color:var(--ui-faint);display:grid;transition:transform .2s ease}
.ui-chev.open{transform:rotate(90deg)}
.ui-ksb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ui-ksb{position:relative;height:42px;border-radius:12px;border:1px solid var(--ui-line);background:#fff;font:inherit;font-size:12px;font-weight:650;color:var(--ui-faint);display:flex;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:0}
.ui-ksb.met{background:var(--soft);border-color:var(--yellow-line);color:var(--yellow-ink);font-weight:750}
.ui-ksb svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ui-ksb-dot{position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--yellow)}

/* ---- Portfolio ---- */
.ui-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tabs button{flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--ui-line);background:#fff;font:inherit;font-size:13px;font-weight:650;color:var(--ui-text);cursor:pointer;display:flex;align-items:center;gap:6px}
.ui-tabs button span{font-size:11px;font-weight:700;color:var(--ui-muted)}
.ui-tabs button.on{background:var(--soft);border-color:var(--yellow-line);color:var(--yellow-ink)}
.ui-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ui-tile{position:relative;height:178px;border-radius:22px;overflow:hidden;padding:0;border:1px solid var(--ui-line);background:var(--soft);cursor:pointer;font:inherit;text-align:left;color:var(--ui-ink)}
.ui-tile-photo{position:absolute;inset:0;display:grid;place-items:center;color:var(--yellow-ink);opacity:.7}
.ui-tile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ui-tile-photo:has(img){opacity:1}
.ui-tile-scrim{position:absolute;left:8px;right:8px;bottom:8px;padding:10px 11px;border-radius:15px;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:5px}
.ui-tile-scrim strong{font-size:13.5px;line-height:1.2}
.ui-tile-meta{display:flex;align-items:center;justify-content:space-between}
.ui-tile-meta small{font-size:11px;color:var(--ui-muted)}
.ui-bars{display:flex;align-items:flex-end;gap:2px}
.ui-bars i{display:block;width:4px;border-radius:2px;background:var(--ui-line)}
.ui-bars i.on{background:var(--yellow)}
.ui-tile.empty{background:transparent;border:1.5px dashed #d8dde5;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.ui-tile.empty .ui-icon-chip{background:#fff;border:1px solid var(--ui-line);color:var(--ui-faint)}
.ui-tile-copy{display:flex;flex-direction:column;gap:4px}
.ui-tile-copy strong{font-size:13.5px;line-height:1.2}
.ui-tile-copy small{font-size:11px;color:var(--ui-faint)}

/* ---- Chat ---- */
.ui-replies{margin:10px 0 4px}
.ui-replies .chat-pill{min-height:46px}

@media(max-width:360px){.ui-ksb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.ui-chev{transition:none}}

/* ---- Evia speaks from her own button (one Evia on screen) ---- */
.ui-evia-bubble{position:fixed;z-index:30;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 86px);width:min(420px,calc(100% - 32px));box-sizing:border-box;background:#fff;border:1px solid var(--ui-line);border-radius:22px;padding:14px 16px;box-shadow:0 16px 40px rgba(16,24,40,.16);opacity:0;transform:translate(-50%,12px) scale(.96);transform-origin:50% 100%;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1.25)}
.ui-evia-bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}
.ui-evia-bubble:after{content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:16px;background:#fff;border-right:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);border-radius:3px;transform:translateX(-50%) rotate(45deg)}
.ui-evia-bubble p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ui-ink)}
.ui-evia-bubble-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ui-evia-bubble-actions button{min-height:42px;padding:8px 16px;border-radius:13px;font-size:13px}

/* ---- Evia, alive (evia-alive.js drives the variables) ---- */
/* Glances (translate) glide slowly while blinks (scale) snap shut; separate properties keep separate timings. */
.evia-face i{transform:none!important;translate:var(--evia-lx,0) var(--evia-ly,0);scale:1 var(--evia-sy,1);transition:translate .6s cubic-bezier(.33,.9,.35,1),scale .09s ease-in-out,border-color .25s ease}
html.evia-happy .evia-face i{border-bottom-color:transparent!important;translate:0 -8%;scale:1}
/* Sleepy after a while with no taps: relaxed, closed eyes. */
html.evia-sleepy .evia-face i{border-top-color:transparent!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:var(--yellow)!important;translate:0 -10%;scale:1}
/* Her body: the button is centred with translateX(-50%), so scale and lean around the visual centre (its left edge before that shift). */
html body .evia-fab{transform-origin:0 50%!important;rotate:var(--evia-tilt,0deg);transition:rotate .7s cubic-bezier(.33,.9,.35,1);animation:eviaBreathe 4.8s ease-in-out infinite!important}
html body .evia-fab.evia-hop{animation:eviaHop .85s ease-out!important}
html body .evia-fab.evia-squish{animation:eviaSquish 1.15s ease-out!important}
html.evia-sleepy body .evia-fab{animation-duration:7s!important}
@keyframes eviaBreathe{0%,100%{scale:1 1}50%{scale:1.02 1.035}}
@keyframes eviaHop{0%{translate:0 0;scale:1 1}18%{translate:0 0;scale:1.09 .9}42%{translate:0 -11px;scale:.93 1.08}66%{translate:0 0;scale:1.08 .92}82%{scale:.98 1.03}100%{translate:0 0;scale:1 1}}
@keyframes eviaSquish{0%{scale:1 1}12%{scale:1.08 .92}26%{scale:.94 1.07}40%{scale:1.04 .96}55%{scale:.98 1.025}72%{scale:1.01 .99}100%{scale:1 1}}
@media(prefers-reduced-motion:reduce){html body .evia-fab,html body .evia-fab.evia-hop,html body .evia-fab.evia-squish{animation:none!important;rotate:none}.evia-face i{transition:none}.ui-evia-bubble{transition:opacity .2s ease}}

.ui-quick-btn{position:relative}
.ui-due{position:absolute;top:8px;right:10px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--yellow);color:var(--ui-on-accent)}

/* ---- Practice: tests hub and confidence self-assessment ---- */
.pr-body{display:flex;flex-direction:column;gap:10px}
.pr-h{margin:8px 2px 0;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}
.pr-note,.pr-intro{margin:0 2px;font-size:13px;line-height:1.5;color:var(--ui-muted)}
.pr-intro{color:var(--ui-text)}
.pr-banner{background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);border-radius:16px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.pr-banner strong{color:var(--ui-ink)}
.pr-banner.good{background:var(--soft);border-color:var(--yellow-line)}
.pr-list{display:flex;flex-direction:column;gap:8px}
.pr-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:18px;border:1px solid var(--ui-line);background:#fff;font:inherit;text-align:left;cursor:pointer;color:var(--ui-ink)}
.pr-icon{flex:0 0 auto;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.pr-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pr-copy strong{font-size:14.5px}
.pr-copy small{font-size:12px;line-height:1.4;color:var(--ui-muted)}
.pr-copy .pr-sum{color:var(--ui-text);font-weight:600}
.pr-due{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--yellow);color:var(--ui-on-accent);vertical-align:2px;margin-left:4px}
.pr-skills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pr-skill{border:1px solid var(--ui-line);border-radius:18px;padding:13px;background:#fff;scroll-margin:12px}
.pr-skill.done{border-color:var(--yellow-line,#f1d878)}
.pr-skill-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.pr-skill-head strong{font-size:15px;color:var(--ui-ink)}
.pr-skill-head small{font-size:11.5px;color:var(--ui-muted)}
.pr-skill p{margin:4px 0 10px;font-size:12.5px;line-height:1.45;color:var(--ui-muted)}
.pr-scale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pr-scale button{min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--ui-line);background:#fff;font:inherit;font-size:12.5px;font-weight:650;color:var(--ui-text);text-align:left;cursor:pointer}
.pr-dots{display:flex;gap:2px;flex:0 0 auto}
.pr-dots i{width:5px;height:14px;border-radius:3px;background:#e4e7ec}
.pr-scale .lvl1 .pr-dots i.on,.pr-scale .lvl2 .pr-dots i.on{background:#f5a45d}
.pr-scale .lvl3 .pr-dots i.on,.pr-scale .lvl4 .pr-dots i.on{background:var(--yellow)}
.pr-scale button[aria-checked="true"]{border-color:var(--yellow);background:var(--soft,#fff7d6);color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--yellow)}
.pr-save{position:sticky;bottom:-20px;margin:4px -20px -20px;padding:12px 20px max(14px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--ui-line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.pr-save span{font-size:12.5px;font-weight:700;color:var(--ui-muted)}
.pr-save button{min-height:46px;padding:10px 18px;border-radius:14px}
.pr-save button:disabled{opacity:.45}
.pr-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-plan li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid}
.pr-plan.low li{background:#fff4ed;border-color:#f9dbc5}
.pr-plan.high li{background:var(--soft);border-color:var(--yellow-line)}
.pr-plan strong{font-size:14px;color:var(--ui-ink)}
.pr-plan small{font-size:12px;color:var(--ui-text);text-align:right}
.pr-change{font-weight:800}.pr-change.up{color:var(--yellow-ink)}.pr-change.down{color:#93370d}
.pr-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.pr-actions button{min-height:46px;padding:10px 16px;border-radius:14px}
.pr-task{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:13px 14px;border-radius:18px;border:1px solid var(--yellow-line,#f1d878);background:var(--soft,#fff7d6);font:inherit;text-align:left;cursor:pointer;color:var(--ui-ink)}
.pr-task-kicker{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-ink)}
.pr-task strong{font-size:15px}
.pr-task small{font-size:12.5px;line-height:1.4;color:var(--ui-text)}
.pr-chips{display:flex;flex-wrap:wrap;gap:6px}
.pr-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.pr-actions{flex-wrap:wrap}

/* ---- Real-life scenarios ---- */
.sc-value{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.sc-story{background:#f8fafc;border:1px solid var(--ui-line);border-radius:18px;padding:14px 16px}
.sc-story p{margin:0;font-size:15px;line-height:1.6;color:var(--ui-ink)}
.sc-options{display:flex;flex-direction:column;gap:8px}
.sc-option{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--ui-line);background:#fff;font:inherit;text-align:left;cursor:pointer;color:var(--ui-ink)}
.sc-option:disabled{cursor:default;opacity:1}
.sc-letter{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f2f4f7;font-size:13px;font-weight:800;color:var(--ui-text)}
.sc-text{font-size:14px;line-height:1.45;font-weight:600;padding-top:4px}
.sc-why{grid-column:2;font-size:12.5px;line-height:1.5;color:var(--ui-text)}
.sc-option.best{background:var(--soft);border-color:var(--yellow-line)}
.sc-option.best .sc-letter{background:var(--yellow);color:#fff}
.sc-option.other.picked{background:#fff4ed;border-color:#f9dbc5}
.sc-option.other.picked .sc-letter{background:#f5a45d;color:#fff}
.sc-option.other:not(.picked){opacity:.8}
.sc-tick{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--soft);color:var(--yellow-ink);vertical-align:2px;margin-left:4px}
.sc-remember{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.sc-contacts ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sc-contacts li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;border:1px solid var(--ui-line);background:#fff}
.sc-contacts strong{font-size:13.5px;color:var(--ui-ink)}
.sc-contacts span{font-size:12.5px;line-height:1.45;color:var(--ui-text)}
.sc-contacts a{color:var(--yellow-ink);font-weight:700}

/* ---- OTJ screen: compact PDF row ---- */
html body .otj-compact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
html body .otj-compact p{margin:0;font-size:14px;color:var(--ui-text)}
html body .otj-compact .row{display:flex;gap:8px;margin:0}
html body .otj-compact button{min-height:42px;padding:8px 14px;border-radius:12px;font-size:13.5px}

/* ---- Decluttered Progress and Portfolio ---- */
.ui-more-units{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:16px;font:inherit;cursor:pointer;text-align:left}
.ui-more-units span{font-size:14px;color:var(--ui-text)}
.ui-more-units strong{display:flex;align-items:center;gap:2px;font-size:13.5px;color:var(--yellow-ink)}
.ui-more-units svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-sheet .chat-options .chat-pill:last-child:nth-child(odd){grid-column:1/-1}

/* ---- Evia outline shapes (cloud, splat, gear, oval): theme.js draws an SVG behind the eyes ---- */
html[data-evia-shape] body .evia-svg-shape[data-evia-outline]{background:transparent!important;border-color:transparent!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;overflow:visible!important}
html[data-evia-shape] body .evia-svg-shape[data-evia-outline]:before{display:none!important}
html body .evia-svg-shape>.evia-face{position:relative;z-index:1}
.evia-outline{position:absolute;inset:-14%;width:128%;height:128%;overflow:visible;pointer-events:none;z-index:0}
.evia-outline-body{fill:#fff;stroke:var(--evia-shape-stroke,var(--yellow));stroke-width:var(--evia-shape-width,3px);vector-effect:non-scaling-stroke;stroke-linejoin:round}
html body .evia-fab.evia-svg-shape .evia-outline{filter:drop-shadow(0 6px 8px rgba(16,24,40,.12))}
.evia-theme-avatar.evia-svg-shape{--evia-shape-stroke:var(--opt-accent)}
.evia-shape-avatar.evia-svg-shape,.evia-theme-avatar.evia-svg-shape,.evia-welcome-face.evia-svg-shape{--evia-shape-width:3.5px}
.evia-outline-oval .evia-outline{inset:-8%;width:116%;height:116%}

/* ---- Chat: nothing after a "thinking" message shows until Evia's text does, then it fades in ---- */
#chat .evia-thinking ~ *{display:none!important}
#chat > *{animation:uiChatIn .28s ease-out both}
@keyframes uiChatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Page transitions: the old page fades out, the new one fades in ---- */
#screen{transition:opacity .14s ease}
#screen.ui-leaving{opacity:0}
#screen.ui-entering{animation:uiPageIn .24s ease-out both}
@keyframes uiPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html[data-a11y-motion="reduce"] #screen,html[data-a11y-motion="reduce"] #chat > *{transition:none!important;animation:none!important}
.eport-note{background:#fff8ec!important;border-color:#f6d9a8!important}.eport-note p{margin:0;font-size:13.5px;line-height:1.5;color:#7a4a00}


/* ---- Progress page: one card style, animated bars, counting numbers, popping badges ---- */
.pg-stats{display:flex;flex-direction:column;gap:14px;scroll-margin-top:72px}
.pg-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.pg-head{display:flex;align-items:center;gap:10px}
.pg-head h3{margin:0;font-size:16px;letter-spacing:-.01em;color:var(--ui-ink);flex:1}
.pg-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink);flex:0 0 auto}
.pg-icon svg,.pg-tile-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pg-meta{font-size:12px;font-weight:650;color:var(--ui-muted)}
.pg-meta .pg-num{font-size:12px}
.pg-note{margin:0;font-size:13px;line-height:1.5;color:var(--ui-muted)}
.pg-action{align-self:flex-start;min-height:40px;padding:8px 14px;border-radius:12px;border:1px solid var(--yellow-line,#f1d878);background:var(--soft,#fff7d6);font:inherit;font-size:13px;font-weight:700;color:var(--yellow-ink);cursor:pointer}
.pg-row{display:flex;flex-direction:column;gap:6px}
.pg-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--ui-text)}
.pg-row-top strong{font-size:13px;color:var(--ui-ink);white-space:nowrap}
.pg-row-top small{font-weight:600;color:var(--ui-muted);margin-left:4px}
.pg-bar{position:relative;display:block;height:10px;border-radius:999px;background:#eef1f5;overflow:visible}
.pg-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--to);border-radius:inherit;background:var(--yellow);transition:width 1.1s cubic-bezier(.3,.8,.3,1) var(--d,0ms)}
.pg-bar.muted i{background:#b8c0cc}
.pg-bar.good i{background:var(--yellow-ink)}
.pg-bar.low i{background:#f29a4a}
.pg-bar em{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ui-ink);opacity:.55}
.pg-animate .pg-card:not(.pg-in) .pg-bar i{width:0}
.pg-num{font-variant-numeric:tabular-nums}

/* Hero */
.pg-hero{flex-direction:row;align-items:center;gap:16px;background:linear-gradient(135deg,var(--soft,#fff7d6),#fff 70%)}
.pg-hero-ring{position:relative;width:118px;height:118px;flex:0 0 118px}
.pg-hero-ring svg{width:100%;height:100%}
.pg-ring-track{fill:none;stroke:rgba(16,24,40,.07);stroke-width:12}
.pg-ring-fill{fill:none;stroke:var(--yellow);stroke-width:12;stroke-linecap:round;stroke-dasharray:var(--v) var(--c);transition:stroke-dasharray 1.3s cubic-bezier(.3,.8,.3,1)}
.pg-animate .pg-card:not(.pg-in) .pg-ring-fill{stroke-dasharray:0 var(--c)}
.pg-hero-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.pg-hero-label .pg-num{font-size:30px;font-weight:800;color:var(--ui-ink);letter-spacing:-.02em}
.pg-hero-num{display:flex;align-items:baseline}
.pg-hero-label small{font-size:15px;font-weight:800;color:var(--ui-ink);margin-left:1px}
.pg-hero-label em{font-style:normal;font-size:11px;font-weight:650;color:var(--ui-muted);margin-top:4px}
.pg-hero-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.pg-hero-lead{margin:0;font-size:13.5px;color:var(--ui-text)}
.pg-hero-lead strong{color:var(--ui-ink)}
.pg-verdict{align-self:flex-start;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.pg-verdict.ontrack,.pg-verdict.ahead{background:var(--soft);color:var(--yellow-ink)}
.pg-verdict.behind{background:#fff1e3;color:#93370d}
.pg-animate .pg-card:not(.pg-in) .pg-verdict{opacity:0;transform:scale(.8)}
.pg-verdict{transition:opacity .4s ease 1s,transform .4s cubic-bezier(.3,1.6,.5,1) 1s}
@media (max-width:360px){.pg-hero{flex-direction:column;align-items:stretch}.pg-hero-ring{align-self:center}}

/* Activity tiles */
.pg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 10px;border-radius:16px;background:#f8fafc;border:1px solid var(--ui-line);min-width:0}
.pg-tile .pg-num{font-size:24px;font-weight:800;color:var(--ui-ink);line-height:1.1}
.pg-tile small{font-size:11px;line-height:1.3;color:var(--ui-muted)}
.pg-tile-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#fff;color:var(--yellow-ink);border:1px solid var(--ui-line)}
.pg-tile.hot{background:var(--soft,#fff7d6);border-color:var(--yellow-line,#f1d878)}
.pg-tile.hot .pg-tile-icon{background:var(--yellow);color:var(--ui-on-accent);border-color:transparent}
.pg-animate .pg-in .pg-tile.hot .flame svg{animation:pgFlicker 1.6s ease-in-out 1s 3}
@keyframes pgFlicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.15) rotate(-6deg)}60%{transform:scale(.95) rotate(5deg)}}
.pg-animate .pg-card:not(.pg-in) .pg-tile{opacity:0;transform:translateY(8px)}
.pg-tile{transition:opacity .45s ease,transform .45s ease}
.pg-tile:nth-child(2){transition-delay:.08s}.pg-tile:nth-child(3){transition-delay:.16s}

/* Achievements */
.pg-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pg-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:16px;background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);text-align:center}
.pg-badge strong{font-size:11.5px;line-height:1.25;color:var(--ui-ink)}
.pg-badge-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ui-on-accent)}
.pg-badge-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.pg-animate .pg-card:not(.pg-in) .pg-badge{opacity:0}
.pg-animate .pg-in .pg-badge{animation:pgPop .55s cubic-bezier(.3,1.6,.5,1) calc(var(--i)*90ms + 250ms) both}
.pg-animate .pg-in .pg-badge.new .pg-badge-icon{animation:pgGlow 1.4s ease-in-out calc(var(--i)*90ms + 800ms) 2}
@keyframes pgPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes pgGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--yellow) 0%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--yellow) 25%,transparent)}}
.pg-all summary{cursor:pointer;min-height:40px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--yellow-ink);list-style:none}
.pg-all summary::-webkit-details-marker{display:none}
.pg-all summary::after{content:"";width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.pg-all[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pg-locked{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pg-locked li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px dashed var(--ui-line);opacity:.6}
.pg-locked li.on{opacity:1;border-style:solid;border-color:var(--yellow-line,#f1d878)}
.pg-locked li:not(.on) .pg-badge-icon{background:#eef1f5;color:var(--ui-faint)}
.pg-locked .pg-badge-icon{width:30px;height:30px;flex:0 0 auto}
.pg-locked .pg-badge-icon svg{width:16px;height:16px}
.pg-locked span:last-child{display:flex;flex-direction:column}
.pg-locked strong{font-size:12.5px;color:var(--ui-ink)}
.pg-locked small{font-size:11.5px;color:var(--ui-muted)}

/* KSB group rings join in when the page opens */
.pg-animate .ui-groups{transition:opacity .4s ease}
html[data-a11y-motion="reduce"] .pg-bar i,html[data-a11y-motion="reduce"] .pg-ring-fill,html[data-a11y-motion="reduce"] .pg-tile,html[data-a11y-motion="reduce"] .pg-verdict{transition:none!important}
.pr-chip{font-size:12px;font-weight:650;padding:5px 10px;border-radius:999px;border:1px solid var(--ui-line);color:var(--ui-ink);background:#fff}
.pr-chip.low{background:#fff4ed;border-color:#f9dbc5;color:#93370d}

/* ---- Confidence check: sliders ---- */
.cf-sheet .pr-body{gap:8px}
.cf-overall{position:sticky;top:-20px;z-index:2;margin:-4px -4px 2px;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,var(--soft,#fff7d6),#fff 80%);border:1px solid var(--yellow-line,#f1d878);box-shadow:0 6px 16px rgba(16,24,40,.06);display:flex;flex-direction:column;gap:7px}
.cf-overall-top{display:flex;justify-content:space-between;align-items:baseline}
.cf-overall-top span{font-size:13px;font-weight:750;color:var(--ui-ink)}
.cf-overall-top strong{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ui-ink);font-variant-numeric:tabular-nums}
.cf-overall-bar{display:block;height:8px;border-radius:999px;background:rgba(16,24,40,.08);overflow:hidden}
.cf-overall-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--yellow);transition:width .5s cubic-bezier(.3,.8,.3,1)}
.cf-overall small{font-size:12px;color:var(--ui-muted)}
.cf-overall b.up{color:var(--yellow-ink)}.cf-overall b.down{color:#93370d}
.cf-intro{font-size:12.5px}
.cf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cf-row{--t:26px;padding:10px 12px 8px;border-radius:16px;border:1px solid var(--ui-line);background:#fff}
.cf-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cf-row-top strong{font-size:14px;color:var(--ui-ink)}
.cf-level{font-size:12px;font-weight:750;white-space:nowrap;color:var(--ui-faint)}
.cf-row[data-level="low"] .cf-level{color:#b54708}
.cf-row[data-level="high"] .cf-level{color:var(--yellow-ink)}
.cf-desc{margin:1px 0 6px;font-size:11.5px;line-height:1.35;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-track{position:relative;height:30px;--pos:calc(var(--t)/2 + (100% - var(--t)) * (var(--v) - 1) / 3)}
.cf-track::before{content:"";position:absolute;left:calc(var(--t)/2);right:calc(var(--t)/2);top:12px;height:6px;border-radius:999px;background:#eef1f5}
.cf-track::after{content:"";position:absolute;left:calc(var(--t)/2);top:12px;height:6px;width:calc(var(--pos) - var(--t)/2);border-radius:999px;background:#d0d5dd;transition:width .2s ease,background .2s ease}
.cf-row[data-level="low"] .cf-track::after{background:#f29a4a}
.cf-row[data-level="high"] .cf-track::after{background:var(--yellow)}
.cf-stops{position:absolute;left:calc(var(--t)/2);right:calc(var(--t)/2);top:12px;height:6px;pointer-events:none;z-index:0}
.cf-stops i{position:absolute;top:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#c4cbd5}
.cf-stops i:nth-child(1){left:0}.cf-stops i:nth-child(2){left:33.333%}.cf-stops i:nth-child(3){left:66.667%}.cf-stops i:nth-child(4){left:100%}
.cf-last{position:absolute;top:6px;left:calc(var(--t)/2 + (100% - var(--t)) * (var(--l) - 1) / 3);width:18px;height:18px;margin-left:-9px;border-radius:50%;background:rgba(152,162,179,.28);border:1.5px dashed #98a2b3;pointer-events:none;z-index:0}
.cf-track input{position:absolute;inset:0;width:100%;height:30px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:1}
.cf-track input:focus-visible{outline:none}
.cf-track input::-webkit-slider-runnable-track{height:30px;background:transparent}
.cf-track input::-moz-range-track{height:30px;background:transparent}
.cf-track input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--t);height:var(--t);margin-top:2px;border-radius:50%;background:#fff;border:2px solid #98a2b3;box-shadow:0 2px 6px rgba(16,24,40,.18);transition:border-color .2s ease,transform .15s ease}
.cf-track input::-moz-range-thumb{width:var(--t);height:var(--t);border-radius:50%;background:#fff;border:2px solid #98a2b3;box-shadow:0 2px 6px rgba(16,24,40,.18)}
.cf-track input:active::-webkit-slider-thumb{transform:scale(1.12)}
.cf-track input:focus-visible::-webkit-slider-thumb{outline:3px solid var(--yellow-ink);outline-offset:2px}
.cf-row[data-level="low"] input::-webkit-slider-thumb{border-color:#f29a4a}
.cf-row[data-level="high"] input::-webkit-slider-thumb{border-color:var(--yellow)}
.cf-row[data-level="low"] input::-moz-range-thumb{border-color:#f29a4a}
.cf-row[data-level="high"] input::-moz-range-thumb{border-color:var(--yellow)}
.cf-row.unset input::-webkit-slider-thumb{border-style:dashed;box-shadow:none}
.cf-row.unset .cf-track::after{width:0}
.cf-legend{position:relative;height:14px;margin:0 12px -2px;--t:26px}
.cf-legend span{position:absolute;top:0;font-size:10px;font-weight:700;color:var(--ui-faint);white-space:nowrap;transform:translateX(-50%)}
.cf-legend span:nth-child(1){left:0;transform:none}
.cf-legend span:nth-child(2){left:calc(var(--t)/2 + (100% - var(--t)) / 3)}
.cf-legend span:nth-child(3){left:calc(var(--t)/2 + (100% - var(--t)) * 2 / 3)}
.cf-legend span:nth-child(4){right:0;left:auto;transform:none}
.cf-level small{font-size:11px;font-weight:600;color:var(--ui-faint)}
.cf-row{padding:9px 12px 6px}
.cf-desc{margin:1px 0 2px}
.pr-sheet h2[tabindex="-1"]:focus{outline:none}

/* ---- Targets (Progress page and chat) ---- */
.tg-from{margin-top:-6px;font-size:12px;color:var(--ui-muted)}
.tg-row{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--ui-line)}
.tg-row:first-of-type{border-top:0;padding-top:0}
.tg-row .pg-row-top strong{font-size:13.5px;white-space:normal;color:var(--ui-ink)}
.tg-chip{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:750;padding:2px 8px;border-radius:999px;background:#f2f4f7;color:var(--ui-muted);white-space:nowrap}
.tg-chip.done{background:var(--soft);color:var(--yellow-ink)}
.tg-chip.overdue{background:#fff1e3;color:#93370d}
.tg-why{font-size:12px;line-height:1.4;color:var(--ui-muted)}
.tg-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tg-foot small{font-size:11.5px;color:var(--ui-text)}
.tg-acts{display:flex;gap:6px}
.tg-btn{min-height:34px;padding:5px 11px;border-radius:10px;border:1px solid var(--ui-line);background:#fff;font:inherit;font-size:12px;font-weight:700;color:var(--ui-ink);cursor:pointer}
.tg-btn.primary-lite{border-color:var(--yellow-line,#f1d878);background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.tg-row.done .tg-why{display:none}
.chat-targets{margin:8px 0}
.chat-targets .pg-card{box-shadow:none}

/* ---- Click-through progress review ---- */
.rv-sheet{display:flex;flex-direction:column}
.rv-dots{display:flex;gap:6px;justify-content:center;margin:-4px 0 12px}
.rv-dots button{width:8px;height:8px;padding:0;border-radius:999px;border:0;background:#d0d5dd;cursor:pointer;transition:width .25s ease,background .25s ease}
.rv-dots button.on{width:22px;background:var(--yellow)}
.rv-body{min-height:300px}
.rv-slide{padding:4px 2px 8px;display:flex;flex-direction:column;gap:14px;animation:rvIn .3s ease-out both}
@keyframes rvIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.rv-hero{display:flex;align-items:center;gap:16px}
.rv-ring{--p:0;width:108px;height:108px;flex:0 0 108px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,#fff 79%,transparent 80% 100%),conic-gradient(var(--yellow) calc(var(--p)*1%),#eef1f5 0)}
.rv-ring b{font-size:26px;font-weight:800;color:var(--ui-ink);line-height:1}
.rv-ring small{font-size:11px;color:var(--ui-muted)}
.rv-hero-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.rv-bigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.rv-big{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;background:#f8fafc;border:1px solid var(--ui-line)}
.rv-big b{font-size:24px;font-weight:800;color:var(--ui-ink);line-height:1.1}
.rv-big small{font-size:11.5px;color:var(--ui-muted)}
.pg-animate .pg-card:not(.pg-in) .rv-big{opacity:0;transform:translateY(8px)}
.rv-big{transition:opacity .4s ease,transform .4s ease}.rv-big:nth-child(2){transition-delay:.08s}.rv-big:nth-child(3){transition-delay:.16s}
.rv-evia{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:16px;background:var(--soft,#fff7d6);font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.rv-evia strong{color:var(--ui-ink)}
.rv-evia-face{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--yellow);display:flex;align-items:center;justify-content:center;gap:4px}
.rv-evia-face i{width:6px;height:9px;border-radius:50%;background:#fff}
.rv-label{margin:0;font-size:12px;font-weight:750;color:var(--ui-text)}
.rv-chips{display:flex;flex-wrap:wrap;gap:6px}
.rv-q{display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.45;color:var(--ui-ink)}
.rv-q small{font-weight:600;color:var(--ui-faint)}
.rv-q textarea{min-height:76px;border:1px solid var(--ui-line);border-radius:14px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
.rv-a{margin:0;padding:10px 12px;border-radius:12px;background:#f8fafc;color:var(--ui-text)}
.rv-targets{margin:0;padding:0;list-style:none;counter-reset:rv;display:flex;flex-direction:column;gap:8px}
.rv-targets li{counter-increment:rv;position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 12px 10px 42px;border-radius:14px;border:1px solid var(--ui-line);background:#fff}
.rv-targets li::before{content:counter(rv);position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--ui-on-accent);font-size:12px;font-weight:800;display:grid;place-items:center}
.rv-targets strong{font-size:13.5px;color:var(--ui-ink)}
.rv-targets small{font-size:12px;line-height:1.4;color:var(--ui-muted)}
.rv-targets em{font-style:normal;font-size:11px;font-weight:700;color:var(--yellow-ink)}
.rv-nav{position:sticky;bottom:-20px;margin:8px -20px -20px;padding:12px 20px max(14px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--ui-line);display:flex;justify-content:space-between;gap:10px}
.rv-nav button{min-height:46px;padding:10px 20px;border-radius:14px}

/* ---- Camera and recorder (camera.js) ---- */
body.cam-open{overflow:hidden}
.cam{position:fixed;inset:0;z-index:10060;display:flex;flex-direction:column;background:#0c0f14;color:#fff;opacity:0;transition:opacity .2s ease;padding:max(10px,env(safe-area-inset-top)) 0 max(14px,env(safe-area-inset-bottom))}
.cam.show{opacity:1}
.cam-top{display:flex;align-items:center;gap:12px;padding:4px 14px 10px}
.cam-top strong{flex:1;min-width:0;font-size:15px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-icon{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.cam-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cam-count{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap}
.cam-prompts{padding:12px 18px 0;text-align:center}
.cam-prompts-h{display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cam-prompts p{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88)}
.cam-dot{color:rgba(255,255,255,.4)}
.cam-stage{position:relative;width:min(100vw,calc(100vh - 330px),640px);aspect-ratio:1/1;margin:0 auto;background:#000;overflow:hidden;border-radius:6px}
.cam-stage video{width:100%;height:100%;object-fit:cover;display:block}
.cam-frame{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 33.33% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 66.66% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 0 33.33%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 0 66.66%/100% 1px no-repeat}
.cam-denied{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.cam-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 14px 4px;min-height:74px;scrollbar-width:none}
.cam-strip::-webkit-scrollbar{display:none}
.cam-thumb{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:10px;overflow:hidden;animation:camIn .25s ease-out}
.cam-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cam-thumb button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.cam-thumb button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@keyframes camIn{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.cam-bottom{margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:8px 18px 0}
.cam-bottom>:first-child{justify-self:start}.cam-bottom>:last-child{justify-self:end}
.cam-shutter{width:78px;height:78px;border-radius:50%;border:4px solid #fff;background:transparent;padding:5px;cursor:pointer}
.cam-shutter i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .12s ease}
.cam-shutter.snap i,.cam-shutter:active i{transform:scale(.86)}
.cam-shutter:disabled{opacity:.35}
.cam-done{min-height:46px;padding:10px 18px;border-radius:999px;border:0;background:var(--yellow);color:var(--ui-on-accent,#172033);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.cam-done:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.cam-alt{min-height:46px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
/* recorder */
.cam-rec-badge{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.12);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.cam-rec-badge i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5)}
.cam-rec[data-state="recording"] .cam-rec-badge{background:#e2483d}
.cam-rec[data-state="recording"] .cam-rec-badge i{background:#fff;animation:camPulse 1s ease-in-out infinite}
.cam-rec[data-state="recording"] .cam-rec-badge::before{content:"REC";font-size:11px;letter-spacing:.08em}
@keyframes camPulse{50%{opacity:.25}}
.cam-rec[data-state="recording"] .cam-stage{box-shadow:0 0 0 4px #e2483d,0 0 38px rgba(226,72,61,.55)}
.cam-rec .cam-stage{transition:box-shadow .3s ease}
.cam-hint{margin:14px 20px 0;text-align:center;font-size:14px;color:rgba(255,255,255,.8)}
.cam-record{position:relative;width:80px;height:80px;border-radius:50%;border:4px solid #fff;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.cam-record i{width:60px;height:60px;border-radius:50%;background:#e2483d;transition:all .2s ease}
.cam-rec[data-state="recording"] .cam-record i{width:30px;height:30px;border-radius:7px}
.cam-rec[data-state="review"] .cam-record{display:none}
.cam-ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg);pointer-events:none;opacity:0}
.cam-ring circle{fill:none;stroke:#e2483d;stroke-width:5;stroke-dasharray:289;stroke-dashoffset:0;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.cam-ending .cam-ring{opacity:1}
.cam-review{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000}
.cam-rec[data-state="review"] .cam-review{display:flex}
.cam-review video{width:100%;height:100%;object-fit:contain}
.cam-review audio{width:88%}
.cam-audio .cam-stage{background:radial-gradient(circle at 50% 50%,#1b2230,#0c0f14 70%);border-radius:28px}
.cam-meter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 10%}
.cam-meter i{flex:1;max-width:9px;height:55%;border-radius:6px;background:rgba(255,255,255,.35);transform:scaleY(.08);transition:transform .08s linear}
.cam-rec[data-state="recording"] .cam-meter i{background:#e2483d}
html[data-a11y-motion="reduce"] .cam-rec-badge i{animation:none!important}
.cam-bottom>[hidden]{display:block;visibility:hidden}
/* Writing check (writing.js) */
.wc-bar{display:flex;justify-content:flex-end;margin-top:8px}
html body .wc-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid var(--ui-line);background:#fff;color:var(--ui-ink);font-size:13px;font-weight:700;cursor:pointer}
html body .wc-btn svg{color:var(--yellow-ink,#6e5c00)}
.wc-btn:active{transform:scale(.97)}
.wc-panel{margin-top:8px;padding:12px;border-radius:16px;border:1px solid var(--yellow-line,#f1d878);background:#fffcf0;animation:wcIn .18s ease-out}
@keyframes wcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wc-panel{animation:none}}
.wc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.wc-head strong{font-size:14px;color:var(--ui-ink)}
html body .wc-all{min-height:34px;padding:6px 12px;border-radius:12px;background:var(--yellow);color:var(--ui-on-accent);font-size:13px;font-weight:750;cursor:pointer}
.wc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:12px;background:#fff;border:1px solid var(--ui-line)}
.wc-change{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px;color:var(--ui-ink);overflow-wrap:anywhere}
.wc-change small{font-size:12px;color:var(--ui-muted)}
.wc-change del{color:#b42318;text-decoration-thickness:1.5px}
.wc-change ins{text-decoration:none;font-weight:700;color:var(--yellow-ink);background:color-mix(in srgb,var(--yellow) 10%,transparent);border-radius:5px;padding:0 3px}
.wc-arrow{color:var(--ui-faint)}
.wc-tip .wc-change span{font-size:13px;color:var(--ui-text)}
.wc-acts{display:flex;gap:6px;flex-shrink:0}
html body .wc-ok,html body .wc-no{min-height:34px;padding:6px 11px;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer}
html body .wc-ok{background:var(--yellow);color:var(--ui-on-accent)}
html body .wc-no{background:#fff;color:var(--ui-muted);border:1px solid var(--ui-line)}
.wc-note,.wc-empty{margin:8px 2px 0;font-size:12px;color:var(--ui-muted)}
.wc-empty{margin:0}
.wc-good{margin:0;font-size:13.5px;font-weight:700;color:var(--yellow-ink)}
/* NVQ courses (nvq.js) */
.nvq-unit-block{margin:18px 0 6px}
.nvq-unit-head{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
.nvq-unit-head strong{display:block;font-size:15.5px;color:var(--ui-ink)}
.nvq-unit-head small{display:block;font-size:12.5px;color:var(--ui-muted);margin-top:1px}
.nvq-unit-num{display:inline-block;font-size:11.5px;font-weight:800;color:var(--yellow-ink,#6e5c00);background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);border-radius:8px;padding:1px 6px;margin-right:4px;vertical-align:2px}
.nvq-ring{flex:0 0 auto}
.nvq-min{margin:0 2px 10px;font-size:13px;color:var(--ui-text)}
.nvq-ok{color:var(--yellow-ink);font-weight:800}
html body .nvq-link-card{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.nvq-link-card small{display:block;margin-top:3px;font-size:12.5px;color:var(--ui-muted)}
.nvq-link-card .supporting-course-arrow{position:static;flex:0 0 auto}
.nvq-soon small{font-size:13px;color:var(--ui-muted);line-height:1.5}
.nvq-units-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.nvq-units-head strong{font-size:15px;color:var(--ui-ink)}
.nvq-units-head small{font-size:12.5px;color:var(--ui-muted)}
.nvq-outcomes{display:flex;flex-direction:column;gap:12px;padding:4px 2px 12px}
.nvq-outcome-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.nvq-outcome-head span{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--soft,#fff7d6);color:var(--yellow-ink,#6e5c00)}
.nvq-outcome-head p{flex:1;margin:1px 0 0;font-size:13px;line-height:1.4;color:var(--ui-text)}
.nvq-outcome-head small{flex:0 0 auto;font-size:12px;font-weight:750;color:var(--ui-muted);margin-top:2px}
.nvq-grid .ui-ksb{font-size:12px}
.nvq-question{margin:0;font-size:15.5px;line-height:1.5;font-weight:650;color:var(--ui-ink)}
.nvq-think{padding:10px 12px;border-radius:14px;background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);font-size:13px;color:var(--ui-text)}
.nvq-think span{font-weight:750;color:var(--yellow-ink,#6e5c00)}
.nvq-think ul{margin:6px 0 0;padding-left:18px;line-height:1.5}
.nvq-sheet textarea{min-height:150px;margin:0}
.nvq-count{margin:-2px 2px 0;font-size:12.5px;color:var(--ui-muted)}
.nvq-count.ok{color:var(--yellow-ink);font-weight:700}
.nvq-counts-for{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--ui-muted)}
.nvq-q-row{align-items:flex-start}
.nvq-q-row strong{font-size:13.5px;font-weight:650;line-height:1.4}
.nvq-q-tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--ui-line);display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;margin-top:1px}
.nvq-q-row.done .nvq-q-tick{background:var(--yellow);border-color:var(--yellow)}
.nvq-subs{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55;color:var(--ui-text)}
.nvq-subs.min{list-style:none;padding-left:2px}
.nvq-subs.min li.got{color:var(--yellow-ink);font-weight:700}
.nvq-opt{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--ui-line);border-radius:16px;background:#fff;cursor:pointer}
.nvq-opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--yellow)}
.nvq-opt strong{display:block;font-size:14px;color:var(--ui-ink)}
.nvq-opt small{display:block;font-size:12px;color:var(--ui-muted);line-height:1.4;margin-top:2px}
.nvq-opts{display:flex;flex-direction:column;gap:8px}
#evia-onboard-course .nvq-opts{text-align:left}
html body .evia-onboard-go{width:100%;margin-top:18px;min-height:52px;font-size:16px}
.evia-onboard-go:disabled{opacity:.45}
/* Supporting evidence details (witness testimony, unit links) */
.sd-field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--ui-ink)}
.sd-field input,.sd-field select{font:inherit;font-weight:500;font-size:15px;padding:11px 12px;border:1px solid var(--ui-line);border-radius:12px;background:#fff;color:var(--ui-ink);min-height:44px}
.sd-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sd-pair[hidden]{display:none}
@media(max-width:380px){.sd-pair{grid-template-columns:1fr}}
.sd-toggle,.sd-crit{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--ui-line);border-radius:14px;background:#fff;cursor:pointer}
.sd-toggle input,.sd-crit input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--yellow)}
.sd-toggle strong{display:block;font-size:14px;color:var(--ui-ink)}
.sd-toggle small{display:block;font-size:12.5px;color:var(--ui-muted);margin-top:2px}
.sd-crit{font-size:13px;line-height:1.45;color:var(--ui-text);padding:9px 11px;margin-bottom:6px}
.sd-crit strong{color:var(--ui-ink)}
.sd-crit-head{font-size:12.5px;color:var(--ui-muted);margin:2px 2px 8px}
html body button.supporting-portfolio-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.supporting-portfolio-item .supporting-course-arrow{position:static}
.nvq-pdf-btn{margin-top:10px;min-height:46px}
.sd-field{min-width:0}
.sd-field input,.sd-field select{width:100%;box-sizing:border-box;min-width:0}
.nvq-opt input,.sd-toggle input,.sd-crit input{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;padding:0}
.nvq-section{margin:22px 4px 10px}
.nvq-job-unit{display:block;margin-top:3px;font-size:12px;font-weight:650;color:var(--ui-muted)}
html body .nvq-knowledge{justify-content:flex-start;gap:12px}
.nvq-knowledge-copy{flex:1;min-width:0}
.nvq-chev{flex:0 0 auto;font-size:22px;color:var(--ui-faint)}
.nvq-topic .pr-copy strong{font-size:14.5px}
.nvq-q-unit{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow-ink,#6e5c00);margin-bottom:2px}
.nvq-q-for{margin:0 0 -4px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow-ink,#6e5c00)}
html body .nvq-hub-knowledge{display:block;width:100%;text-align:left;font:inherit;cursor:pointer}
.nvq-units{padding:14px;display:flex;flex-direction:column;gap:12px}
.nvq-units .ui-divider{margin:0}
.nvq-units-head{margin:2px 2px 0;gap:10px;flex-wrap:wrap}
/* Page headings (Course, Progress, Portfolio) sit beside the profile button */
.ui-page-head{margin:-56px 62px 16px 4px;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.ui-page-head h1{margin:0;font-size:24px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--ui-ink)}
.ui-page-head span{font-size:12.5px;font-weight:650;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:has(#a11y-speak) .ui-page-head{margin-left:56px}
.draft-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;vertical-align:3px;background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);color:var(--yellow-ink,#6e5c00)}
/* Key for the evidence strength bars on the Course page */
.ui-bars-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 4px 12px;font-size:12px;color:var(--ui-muted)}
.ui-bars-key>span:first-child{font-weight:750;color:var(--ui-text)}
.ui-bars-key-item{display:inline-flex;align-items:center;gap:6px}
.ui-bars-key .unit-strength-bars{transform:scale(.8);transform-origin:left center}
/* Small Evia (review tips and elsewhere): the learner's shape and colour */
.evia-mini{flex:0 0 auto;position:relative;width:34px;height:34px;display:grid;place-items:center;background:#fff;border:2.5px solid var(--yellow);border-radius:50%}
html[data-evia-shape="squircle"] .evia-mini{border-radius:30%}
.evia-mini .evia-face{position:relative;inset:auto;z-index:1;display:flex;gap:4px}
.evia-mini .evia-face i{width:7px!important;height:9px!important;border-width:2px!important;border-color:var(--yellow)!important}
.evia-mini .evia-face i:after{display:none}
.evia-mini.evia-svg-shape .evia-outline{inset:-18%;width:136%;height:136%}
.evia-mini.evia-svg-shape{--evia-shape-width:2.5px}
/* The review's buttons sit over the bottom of the sheet: leave room so the last question and Evia's tip can scroll clear of them */
.rv-body{padding-bottom:88px}
/* Review: "You" vs "Where you should be" */
.rv-goals{display:flex;flex-direction:column;border:1px solid var(--ui-line);border-radius:16px;overflow:hidden;background:#fff}
.rv-goals-head,.rv-goal{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);gap:8px;align-items:center;padding:9px 12px}
.rv-goals-head{background:#f8fafc;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}
.rv-goal{border-top:1px solid var(--ui-line);font-size:13px;color:var(--ui-text)}
.rv-goal b{font-size:14px;font-weight:800;color:var(--ui-ink)}
.rv-goal em{font-style:normal;font-size:12.5px;color:var(--ui-muted)}
.rv-goal>span{position:relative;padding-left:20px}
.rv-goal>span::before{content:"";position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-7px;border-radius:50%}
.rv-goal.ok>span::before{background:var(--yellow);box-shadow:inset 0 0 0 3px var(--soft)}
.rv-goal.under>span::before{background:#f79009;box-shadow:inset 0 0 0 3px #fef0c7}
.rv-goal.ok b{color:var(--yellow-ink)}
/* Review: quick things to do now */
.rv-quick{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;border:1px dashed var(--yellow-line,#f1d878);background:#fff}
.rv-quick>span{font-size:12.5px;font-weight:650;color:var(--ui-muted)}
.rv-quick>div{display:flex;flex-wrap:wrap;gap:8px}
html body .rv-quick button{min-height:40px;padding:8px 14px;border-radius:12px;font-size:13.5px}
/* Back to your review */
.rv-resume{position:fixed;z-index:200;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--ui-ink,#172033);box-shadow:0 10px 26px rgba(16,24,40,.25);animation:rvResume .3s ease-out}
@keyframes rvResume{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.rv-resume button{border:0;background:none;color:#fff;font:inherit;font-weight:750;cursor:pointer}
.rv-resume-go{padding:9px 14px;font-size:14px;white-space:nowrap}
.rv-resume-x{width:34px;height:34px;border-radius:50%;font-size:20px;opacity:.7}
@media(prefers-reduced-motion:reduce){.rv-resume{animation:none}}
/* ---------- Profile: minimal, grouped ---------- */
html body .pf-sheet{position:relative;padding:22px 18px 0;background:#f7f8fa!important}
.pf-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.08);font-size:22px;color:var(--ui-muted);cursor:pointer;z-index:2}
.pf-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 18px;text-align:center}
.pf-avatar{position:relative;cursor:pointer}
.pf-avatar .profile-photo{width:84px!important;height:84px!important;flex:none!important;border-radius:50%!important;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 14px rgba(16,24,40,.1)}
.pf-avatar-edit{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--ui-on-accent);display:grid;place-items:center;font-size:13px;border:2px solid #fff}
html body .pf-name{width:100%;max-width:300px;border:0!important;background:transparent!important;text-align:center;font-size:22px;font-weight:800;color:var(--ui-ink);padding:4px 8px;border-radius:12px;box-shadow:none!important}
.pf-name:focus{background:#fff!important;outline:2px solid var(--yellow-line)}
.pf-course{font-size:13px;font-weight:650;color:var(--ui-muted)}
.pf-group{margin:0 0 16px}
.pf-group h3{margin:0 4px 7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted)}
.pf-card{background:#fff;border:1px solid var(--ui-line);border-radius:18px;overflow:hidden}
.pf-card>*+*{border-top:1px solid var(--ui-line)}
html body .pf-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:10px 14px;background:#fff;border:0;border-radius:0;font:inherit;text-align:left;color:var(--ui-ink);cursor:pointer;box-shadow:none}
.pf-row-icon{flex:0 0 30px;height:30px;border-radius:9px;background:var(--soft);color:var(--yellow-ink);display:grid;place-items:center;font-size:12px;font-weight:800}
.pf-row-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pf-row-copy strong{font-size:14.5px;font-weight:700}
.pf-row-copy small{font-size:12px;color:var(--ui-muted)}
.pf-chev{font-size:20px;color:var(--ui-faint)}
.pf-switch input{position:absolute;opacity:0;width:1px;height:1px}
.pf-switch i{flex:0 0 46px;height:28px;border-radius:999px;background:#d0d5dd;position:relative;transition:background .2s}
.pf-switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.25);transition:transform .2s}
.pf-switch input:checked+i{background:var(--yellow)}
.pf-switch input:checked+i::after{transform:translateX(18px)}
.pf-switch input:focus-visible+i{outline:3px solid var(--yellow-ink);outline-offset:2px}
.pf-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px}
.pf-dates label,.pf-fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--ui-muted);min-width:0}
.pf-dates input,.pf-fields input{width:100%;box-sizing:border-box;min-height:42px;padding:8px 10px;border:1px solid var(--ui-line);border-radius:11px;font:inherit;font-size:14.5px;color:var(--ui-ink);background:#fff}
.pf-more>summary{list-style:none;display:flex;flex-direction:column;gap:1px;padding:12px 40px 12px 14px;cursor:pointer;position:relative;font-size:14.5px;font-weight:700;color:var(--ui-ink)}
.pf-more>summary::-webkit-details-marker{display:none}
.pf-more>summary::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--ui-faint);transition:transform .2s}
.pf-more[open]>summary::after{transform:translateY(-50%) rotate(90deg)}
.pf-more>summary span{font-size:12px;font-weight:500;color:var(--ui-muted)}
.pf-more>:not(summary){padding:0 14px 14px}
.pf-change>summary{font-size:13px;font-weight:650;color:var(--ui-muted)}
.pf-fields{display:flex;flex-direction:column;gap:10px}
.pf-more .course-options{display:flex;flex-direction:column;gap:6px}
.pf-sign{padding:12px 14px 0;border:0!important}
.pf-sign canvas{width:100%;height:auto;aspect-ratio:900/260;border:1px dashed var(--ui-line);border-radius:12px;background:#fafbfc;touch-action:none}
.pf-note{margin:0;padding:6px 14px 12px;border:0!important;font-size:12px;color:var(--ui-muted)}
.pf-data{padding:12px 14px 4px}
.pf-data p{margin:0 0 4px;font-size:12.5px;line-height:1.45;color:var(--ui-muted)}
.pf-data-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 14px;border:0!important}
html body .pf-data-actions>*{flex:1 1 auto;min-height:42px;padding:9px 12px;border-radius:12px;font-size:13.5px;text-align:center;display:flex;align-items:center;justify-content:center}
.pf-save{position:sticky;bottom:0;margin:4px -18px 0;padding:12px 18px max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#f7f8fa 30%)}
html body .pf-save button{width:100%;min-height:50px;border-radius:14px;font-size:16px}
.pf-row-icon .evia-mini{width:24px;height:24px;border-width:2px}
.pf-row-icon .evia-mini .evia-face{gap:3px}
.pf-row-icon .evia-mini .evia-face i{width:5px!important;height:7px!important;border-width:1.5px!important}
.pf-dot{width:16px;height:16px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--yellow-line)}
.rv-ahead{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--yellow-ink);font-style:normal;font-size:10.5px;font-weight:800;vertical-align:2px}
.rv-last{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rv-last li{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--ui-line);border-radius:14px;background:#fff;font-size:13.5px}
.rv-last li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--ui-faint);border:2px solid var(--ui-line)}
.rv-last li.done span{background:var(--yellow);border-color:var(--yellow);color:#fff}
.rv-last li em{font-style:normal;font-size:12px;font-weight:750;color:#b54708}
.rv-last li.done em{color:var(--yellow-ink)}
html body .ui-review-due{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 12px;padding:12px 16px;font:inherit;text-align:left;cursor:pointer;color:var(--ui-ink)}
.ui-review-due span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-review-due small{font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}
.ui-review-due strong{font-size:15px}
.ui-review-due em{flex:0 0 auto;font-style:normal;font-size:13px;font-weight:750;color:var(--yellow-ink)}
html body .ui-review-due.soon{border-color:var(--yellow-line);background:var(--soft)}
/* Review sign-off */
.rv-sign{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--ui-line);border-radius:16px;background:#fff;min-width:0}
.rv-sign-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.rv-sign-top strong{font-size:14px;color:var(--ui-ink)}
.rv-sign-top small{font-size:12px;color:var(--ui-muted)}
.rv-signed{font-size:12px;font-weight:800;color:var(--yellow-ink)}
.rv-sign-me img{display:block;width:100%;max-width:260px;height:auto;max-height:64px;object-fit:contain;object-position:left}
html body .rv-sign-name{width:100%;box-sizing:border-box;min-height:42px;padding:8px 11px;border:1px solid var(--ui-line);border-radius:11px;font:inherit;font-size:14.5px;color:var(--ui-ink);background:#fff}
.rv-sign-pad{position:relative}
.rv-sign-pad canvas{display:block;width:100%;height:auto;aspect-ratio:600/170;border:1px dashed #cfd5dd;border-radius:12px;background:#fafbfc;touch-action:none}
html body .rv-sign-clear{position:absolute;top:6px;right:6px;min-height:30px;padding:4px 10px;border-radius:9px;border:1px solid var(--ui-line);background:#fff;font-size:12px;font-weight:700;color:var(--ui-muted)}
/* Review sheet: header and buttons stay put, only the middle scrolls, so nothing can end up under the buttons */
html body .rv-sheet{display:flex;flex-direction:column;overflow:hidden;max-height:92vh;max-height:92dvh;padding-bottom:0}
.rv-sheet>.sheet-head,.rv-sheet>.rv-dots{flex:0 0 auto}
html body .rv-sheet .rv-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:16px;margin:0 -20px;padding-left:20px;padding-right:20px}
html body .rv-sheet .rv-nav{position:static;flex:0 0 auto;margin:0 -20px}
@media(max-width:520px){html body .rv-sheet .rv-body{margin:0 -17px;padding-left:17px;padding-right:17px}html body .rv-sheet .rv-nav{margin:0 -17px}}
/* ---------- Small phones (up to 380px wide) ---------- */
@media (max-width:380px){
  /* Portfolio tabs: share the width instead of running off the edge */
  .ui-tabs{overflow:visible;gap:4px}
  .ui-tabs button{flex:1 1 0;min-width:0;padding:8px 6px;font-size:12px;gap:3px;justify-content:center}
  .ui-tabs button span{font-size:10px}
  /* Portfolio sub-page headers stack instead of squeezing into three columns */
  html body .portfolio-intro{flex-direction:column;align-items:flex-start;gap:4px}
  html body .portfolio-intro h2{margin:0}
  html body .portfolio-intro p{max-width:none!important;text-align:left!important}
  /* "N units not started yet  Go to Course" wraps onto two tidy lines */
  .ui-more-units{flex-wrap:wrap;row-gap:4px}
}
/* OTJ hours: the Add button stays inside the card at any width */
.learning-input{min-width:0}
.learning-input input{min-width:0;width:100%}
.learning-input button{flex:0 0 auto}

/* Course page: each type of work is a dropdown */
.nvq-group{margin:0 0 10px;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.nvq-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;border-radius:var(--ui-radius)}
.nvq-group>summary::-webkit-details-marker{display:none}
.nvq-group>summary:focus-visible{outline:3px solid var(--yellow-line,#f1d878);outline-offset:2px}
.nvq-group-copy{flex:1;min-width:0}
.nvq-group-copy strong{display:block;font-size:15.5px;color:var(--ui-ink)}
.nvq-group-copy small{display:block;margin-top:3px;font-size:12.5px;color:var(--ui-muted)}
.nvq-group-chev{flex:0 0 auto;font-size:22px;line-height:1;color:var(--ui-faint);transition:transform .2s}
.nvq-group[open]>.nvq-group-chev,.nvq-group[open]>summary .nvq-group-chev{transform:rotate(90deg)}
.nvq-group-body{padding:0 10px 10px}
.nvq-group-body .nvq-min{margin:0 6px 10px}
.nvq-group-body .unit-card{box-shadow:none}
@media (prefers-reduced-motion:reduce){.nvq-group-chev{transition:none}}

/* ---------- Simpler navigation: Course · Hours · Evia · Portfolio · Progress ---------- */
/* Course: Evia's card */
.ui-next{padding:6px 6px 14px;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
.ui-next-status{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:16px;text-align:left;cursor:pointer}
.ui-next-status .ui-ring-label strong{font-size:12px}
.ui-next-status>span:nth-child(2){flex:1;min-width:0}
.ui-next-status strong{display:block;font-size:15px;color:var(--ui-ink)}
.ui-next-status small{display:block;font-size:12.5px;color:var(--ui-muted);margin-top:1px}
.ui-next-chev,.pg-x-chev{flex:0 0 auto;font-size:22px;line-height:1;color:var(--ui-faint)}
.ui-next-evia{display:flex;gap:10px;align-items:flex-start;margin:0 10px;padding:12px;border-radius:16px;background:var(--soft,#fff7d6)}
.ui-next-evia p{margin:0;font-size:14px;line-height:1.45;color:var(--ui-text)}
.ui-next-go{margin:0 10px;width:calc(100% - 20px);background:var(--yellow);color:var(--ui-on-accent)}
/* Hours */
.ui-hours-sum{display:grid;grid-template-columns:1fr 1fr;padding:16px 8px}
.ui-hours-sum>div{text-align:center}
.ui-hours-sum>div+div{border-left:1px solid var(--ui-line)}
.ui-hours-sum strong{display:block;font-size:28px;letter-spacing:-.02em;color:var(--ui-ink)}
.ui-hours-sum small{font-size:12.5px;color:var(--ui-muted)}
.ui-hours-log{padding:18px;display:flex;flex-direction:column;gap:12px}
.ui-hours-log h2{margin:0;font-size:17px;color:var(--ui-ink)}
.ui-hours-chips{display:flex;flex-wrap:wrap;gap:8px}
.ui-hours-chip{min-width:48px;height:44px;padding:0 12px;border-radius:14px;border:1.5px solid var(--ui-line);background:#fff;font-weight:700;color:var(--ui-ink);cursor:pointer}
.ui-hours-chip.on{background:var(--soft,#fff7d6);border-color:var(--yellow);color:var(--yellow-ink)}
.ui-hours-chips input{flex:1 1 70px;min-width:70px;height:44px;border:1.5px solid var(--ui-line);border-radius:14px;padding:0 12px}
.ui-hours-log textarea{min-height:0;height:auto;margin:0}
.ui-hours-log .primary{width:100%;background:var(--yellow);color:var(--ui-on-accent)}
.ui-hours-hint{margin:0;font-size:12.5px;color:var(--ui-muted);text-align:center}
.ui-hours-pdf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;font-size:13.5px;color:var(--ui-text)}
.ui-hours-pdf .secondary{flex:0 0 auto;padding:10px 14px}
.ui-hours-h,.pg-x-h{margin:8px 4px -6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
.ui-hours-list{padding:4px 16px}
.ui-hours-item{display:flex;gap:14px;align-items:flex-start;padding:13px 0}
.ui-hours-item+.ui-hours-item{border-top:1px solid var(--ui-line)}
.ui-hours-n{flex:0 0 52px;font-size:19px;font-weight:800;color:var(--ui-ink);line-height:1.1}
.ui-hours-n small{display:block;font-size:11px;font-weight:600;color:var(--ui-muted)}
.ui-hours-copy{flex:1;min-width:0}
.ui-hours-copy strong{display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--ui-text);overflow-wrap:anywhere}
.ui-hours-copy small{display:block;margin-top:3px;font-size:12px;color:var(--ui-muted)}
.ui-hours-copy em{font-style:normal;font-weight:700;color:var(--yellow-ink)}
/* Progress: extras as one short list */
.pg-x{padding:4px 14px}
.pg-x-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;text-align:left;cursor:pointer;font:inherit;color:inherit}
details.pg-x-row{display:block;cursor:default}
details.pg-x-row>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer}
details.pg-x-row>summary::-webkit-details-marker{display:none}
details.pg-x-row[open]>summary .pg-x-chev{transform:rotate(90deg)}
details.pg-x-row .pg-badges{margin-top:12px}
.pg-x>*+*{border-top:1px solid var(--ui-line)}
.pg-x-copy{flex:1;min-width:0}
.pg-x-copy strong{display:block;font-size:15px;color:var(--ui-ink)}
.pg-x-copy small{display:block;margin-top:2px;font-size:12.5px;color:var(--ui-muted)}
.pg-x-new{font-style:normal;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--yellow);color:var(--ui-on-accent);margin-left:4px}
.pg-x-chev{transition:transform .2s}

/* ---------- Three-item navigation: Course · Evia · Learning ---------- */
html body .bottom-nav{grid-template-columns:1fr 104px 1fr}
/* Course: All units / My evidence */
.ui-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 14px;border-radius:16px;background:#eef1f5}
.ui-seg button{height:40px;border-radius:12px;font-weight:700;font-size:14px;color:var(--ui-muted);cursor:pointer}
.ui-seg button.on{background:#fff;color:var(--ui-ink);box-shadow:0 1px 4px rgba(16,24,40,.08)}
.ui-seg button span{font-size:12px;font-weight:800;color:var(--yellow-ink);margin-left:2px}
.ui-unit-strip{display:flex;align-items:center;gap:5px;margin-top:8px}
.ui-unit-strip img{width:30px;height:30px;border-radius:8px;object-fit:cover;border:1px solid var(--ui-line)}
.ui-unit-strip small{font-size:12px;font-weight:600;color:var(--ui-muted);margin-left:2px}
.ui-unit-sum{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:14px;color:var(--ui-text)}
.ui-unit-packs{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ui-unit-pack{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--ui-line);border-radius:14px}
.ui-unit-thumb{flex:0 0 auto;width:48px;height:48px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.ui-unit-thumb img{width:100%;height:100%;object-fit:cover}
.ui-unit-pack strong{display:block;font-size:14px;color:var(--ui-ink)}
.ui-unit-pack small{display:block;font-size:12.5px;color:var(--ui-muted)}
/* Learning: Evia's tip and the tiles */
.ui-tip{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--soft,#fff7d6);border-color:var(--yellow-line,#f1d878)}
.ui-tip p{margin:0;font-size:14px;line-height:1.45;color:var(--ui-text)}
.ui-tip-go{margin-top:8px;padding:0;font-weight:800;font-size:14px;color:var(--yellow-ink);cursor:pointer}
.ui-tiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ui-tile-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;text-align:left;cursor:pointer;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:18px;box-shadow:var(--ui-shadow);font:inherit;color:inherit;min-width:0}
.ui-tile-stat .pg-icon{margin-bottom:8px}
.ui-tile-stat>strong{font-size:24px;letter-spacing:-.02em;color:var(--ui-ink);line-height:1.1}
.ui-tile-stat>strong small{font-size:13px;font-weight:700;color:var(--ui-muted);letter-spacing:0}
.ui-tile-stat>span:not(.pg-icon){font-size:13.5px;font-weight:700;color:var(--ui-ink)}
.ui-tile-stat>small{font-size:12px;color:var(--ui-muted)}
@media (max-width:360px){.ui-tiles-grid{gap:8px}.ui-tile-stat{padding:12px}.ui-tile-stat>strong{font-size:21px}}
.ui-sub-title{margin:14px 4px 14px;font-size:24px;letter-spacing:-.02em;color:var(--ui-ink)}
.ui-hours-chips{flex-wrap:nowrap;gap:6px}
.ui-hours-chip{flex:1 1 0;min-width:0;padding:0}
.ui-hours-chips input{flex:1.5 1 0;min-width:0;padding:0 8px}
/* Tiles: icon and number on one line */
.ui-tile-stat{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:center;padding:12px 14px}
.ui-tile-stat .pg-icon{margin:0;grid-row:1}
.ui-tile-stat>strong{grid-row:1;grid-column:2}
.ui-tile-stat>span:not(.pg-icon),.ui-tile-stat>small{grid-column:1/-1}
.ui-tile-stat>span:not(.pg-icon){margin-top:6px}
.ui-tiles-grid>.ui-tile-stat:last-child:nth-child(odd){grid-column:1/-1}

/* ---------- My course: saved evidence under the capture page ---------- */
.ev-saved-line{height:1px;background:var(--ui-line);margin:26px 2px 18px}
.ev-saved{display:flex;flex-direction:column;gap:10px}
.ev-saved h3{margin:0 2px 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
.ev-tile{display:flex;align-items:stretch;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:16px;overflow:hidden;box-shadow:var(--ui-shadow)}
.ev-tile-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ev-tile-img{flex:0 0 auto;width:64px;height:48px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.ev-tile-img img{width:100%;height:100%;object-fit:cover}
.ev-tile-img svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ev-tile-copy{min-width:0}
.ev-tile-copy strong{display:block;font-size:14.5px;color:var(--ui-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-tile-copy small{display:block;margin-top:2px;font-size:12.5px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-tile-share{flex:0 0 52px;display:grid;place-items:center;border-left:1px solid var(--ui-line);color:var(--ui-muted);cursor:pointer}
.ev-tile-share svg,#ev-view-share svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#ev-view-share{display:inline-flex;align-items:center;gap:8px}
.ev-view-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:14px}
.ev-view-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.ev-view-text{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ui-text);white-space:pre-wrap}

/* ---------- My progress: animated charts ---------- */
.pv-review-line{margin:-4px 4px 14px;font-size:14px;color:var(--ui-muted)}
.pv-review-line.soon{color:var(--yellow-ink);font-weight:700}
.pv-grid{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.pv-card{display:flex;flex-direction:column;width:100%;padding:16px 18px 18px;text-align:left;cursor:pointer;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:22px;box-shadow:var(--ui-shadow);font:inherit;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.pv-card:active{transform:scale(.985)}
.pv-head{display:flex;align-items:center;justify-content:space-between}
.pv-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
.pv-chev svg{width:18px;height:18px;fill:none;stroke:var(--ui-faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-big{margin-top:6px;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ui-ink);line-height:1.05}
.pv-big small,.pv-deep-hero small{font-size:16px;font-weight:700;color:var(--ui-muted);letter-spacing:0}
.pv-sub{margin-top:3px;font-size:13.5px;color:var(--ui-muted)}
.pv-chart{display:block;margin-top:14px}
.pv-empty{display:block;padding:14px;border-radius:14px;background:#f6f7f9;font-size:13px;color:var(--ui-muted);text-align:center}
.pv-verdict{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-weight:700}
.pv-verdict i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:11px;font-style:normal;color:#fff}
.pv-verdict.behind{color:#b54708}.pv-verdict.behind i{background:#f79009}
.pv-verdict.ontrack{color:var(--yellow-ink)}.pv-verdict.ontrack i{background:var(--yellow)}
.pv-verdict.ahead{color:var(--yellow-ink)}.pv-verdict.ahead i{background:var(--yellow)}
/* timeline */
.pv-timeline{position:relative;padding-top:26px}
.pv-tl-track{position:relative;border-radius:999px;background:#eef1f5;overflow:hidden}
.pv-tl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--yellow)}
.pv-tl-mark{position:absolute;top:0;bottom:18px;width:0;border-left:2px solid var(--ui-ink)}
.pv-tl-mark span{position:absolute;top:0;left:0;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:800;color:var(--ui-ink);background:var(--ui-card);padding:0 4px}
.pv-tl-mark::after{content:"";position:absolute;bottom:-5px;left:-6px;width:10px;height:10px;border-radius:50%;background:var(--ui-ink);border:2px solid var(--ui-card)}
.pv-tl-ends{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--ui-faint)}
.pv-timeline.big{padding-top:30px;margin:6px 0 14px}
/* rings */
.pv-rings{display:flex;justify-content:space-around;gap:8px}
.pv-ring-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.pv-ring-item small{font-size:12.5px;font-weight:700;color:var(--ui-text)}
.pv-ring{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
.pv-ring svg{position:absolute;inset:0;width:100%;height:100%}
.pv-ring-track{fill:none;stroke:#eef1f5}
.pv-ring-fill{fill:none;stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:var(--v) var(--len)}
.pv-ring-label{position:relative;font-size:15px;font-weight:800;color:var(--ui-ink)}
/* columns and lines */
.pv-cols,.pv-line{display:block;width:100%;height:auto;overflow:visible}
.pv-base{stroke:#dfe3e8;stroke-width:1}
.pv-grid{stroke:#eef1f5;stroke-width:1}
.pv-col{fill:var(--yellow);opacity:.55}
.pv-col[data-hi]{opacity:1}
.pv-goal{stroke:var(--ui-muted);stroke-width:1;opacity:.6}
.pv-goal-label{font-size:10px;font-weight:700;fill:var(--ui-muted)}
.pv-axis{font-size:10px;fill:var(--ui-faint);font-family:inherit}
.pv-stroke{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pv-dot{fill:var(--yellow);stroke:var(--ui-card);stroke-width:2}
.pv-end-label{font-size:12px;font-weight:800;fill:var(--ui-ink)}
/* radar */
.pv-radar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.pv-radar{width:170px;height:170px;overflow:visible}
.pv-radar-big .pv-radar{width:100%;height:auto;max-width:320px;display:block;margin:0 auto}
.pv-radar-grid{fill:none;stroke:#eef1f5;stroke-width:1}
.pv-radar-prev{fill:none;stroke:#b8c0cc;stroke-width:1.5;stroke-dasharray:0}
.pv-radar-now polygon{fill:color-mix(in srgb,var(--yellow) 18%,transparent);stroke:var(--yellow);stroke-width:2.5;stroke-linejoin:round}
.pv-radar-now circle{fill:var(--yellow);stroke:var(--ui-card);stroke-width:2}
.pv-legend{display:flex;gap:14px;font-size:12px;color:var(--ui-muted)}
.pv-legend.center{justify-content:center;margin:6px 0 12px}
.pv-legend span{display:inline-flex;align-items:center;gap:6px}
.pv-legend i{width:14px;height:3px;border-radius:2px}
.pv-legend i.now{background:var(--yellow)}.pv-legend i.prev{background:#b8c0cc}
/* calendar */
.pv-cal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px}
.pv-cal-cell{display:block;aspect-ratio:1;border-radius:3px;background:#eef1f5}
.pv-cal-cell.future{background:transparent}
.pv-cal-cell.l1{background:color-mix(in srgb,var(--yellow) 35%,#fff)}
.pv-cal-cell.l2{background:color-mix(in srgb,var(--yellow) 65%,#fff)}
.pv-cal-cell.l3{background:var(--yellow)}
.pv-cal-key{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:8px;font-size:11px;color:var(--ui-faint)}
.pv-cal-key .pv-cal-cell{width:11px}
.pv-cal-key span{margin:0 3px}
/* dial */
.pv-dial{display:block;width:180px;max-width:100%;margin:0 auto;overflow:visible}
.pv-dial-track{fill:none;stroke:#eef1f5;stroke-width:14;stroke-linecap:round}
.pv-dial-fill{fill:none;stroke:var(--yellow);stroke-width:14;stroke-linecap:round;stroke-dasharray:var(--v) var(--len)}
.pv-dial-big{position:relative;margin:4px 0 16px}
.pv-dial-big .pv-dial{width:240px}
.pv-dial-num{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:34px;font-weight:800;color:var(--ui-ink)}
.pv-dial-num span{display:block;font-size:12.5px;font-weight:600;color:var(--ui-muted)}
/* rows, bars, segments, badges */
.pv-rows{display:flex;flex-direction:column;gap:12px}
.pv-row{display:block}
.pv-row-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:13.5px;color:var(--ui-text)}
.pv-row-top strong{flex:0 0 auto;color:var(--ui-ink)}
.pv-row-note{display:block;margin-top:5px;font-size:12px;color:var(--ui-muted)}
.pv-bar{display:block;height:8px;border-radius:999px;background:#eef1f5;overflow:hidden}
.pv-bar i{display:block;height:100%;border-radius:999px;background:var(--yellow)}
.pv-bar.good i{background:var(--yellow-ink)}.pv-bar.low i{background:#f79009}
.pv-up{font-style:normal;color:var(--yellow-ink)}.pv-down{font-style:normal;color:#b54708}
.pv-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.pv-seg>span{display:block;height:10px;border-radius:999px;background:#eef1f5;overflow:hidden}
.pv-seg>span i{display:block;height:100%;background:var(--yellow);border-radius:999px}
.pv-seg-labels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:6px;font-size:11px;color:var(--ui-muted)}
.pv-badges{display:flex;gap:8px;flex-wrap:wrap}
.pv-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink);font-size:12px;font-weight:800}
.pv-badge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* deep dive */
.pv-sheet{max-height:90vh}
.pv-deep-hero{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--ui-ink);margin-bottom:4px}
.pv-deep-hero span{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ui-muted)}
.pv-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.pv-stat{padding:12px;border-radius:14px;background:#f6f7f9}
.pv-stat span{display:block;font-size:12px;color:var(--ui-muted)}
.pv-stat strong{display:block;margin-top:2px;font-size:15px;color:var(--ui-ink)}
.pv-h{margin:18px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
.pv-list{display:flex;flex-direction:column;border:1px solid var(--ui-line);border-radius:16px;overflow:hidden}
.pv-li{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:none}
.pv-li+.pv-li{border-top:1px solid var(--ui-line)}
.pv-li.static{cursor:default;align-items:flex-start}
.pv-li>span:first-child:not(.pv-li-n){flex:1;font-weight:700;color:var(--ui-ink)}
.pv-li small{color:var(--ui-muted);font-size:12.5px}
.pv-li svg{width:16px;height:16px;fill:none;stroke:var(--ui-faint);stroke-width:2}
.pv-li-n{flex:0 0 74px;font-weight:800;font-size:14px;color:var(--ui-ink)}
.pv-li-copy{flex:1;min-width:0}
.pv-li-copy strong{display:block;font-size:14px;font-weight:600;color:var(--ui-text);overflow-wrap:anywhere}
.pv-link{margin-top:10px;padding:6px 2px;font-weight:700;font-size:14px;color:var(--yellow-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pv-note{display:flex;gap:10px;margin:18px 0 4px;padding:12px 14px;border-radius:14px;background:var(--soft,#fff7d6);font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.pv-test{padding:12px 0}.pv-test+.pv-test{border-top:1px solid var(--ui-line)}
.pv-ksb-group{margin-bottom:16px}
.pv-ksb-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pv-ksb-head strong{display:block;color:var(--ui-ink)}.pv-ksb-head small{color:var(--ui-muted);font-size:12.5px}
.pv-ksb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.pv-ksb{height:36px;border-radius:10px;background:#f2f4f7;font-size:12.5px;font-weight:700;color:var(--ui-muted);cursor:pointer}
.pv-ksb.met{background:var(--yellow);color:var(--ui-on-accent)}

/* Animations: set up once a card is .pv-anim, played when it becomes .pv-in */
.pv-anim .pv-grow-x{transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.3,.8,.3,1) var(--d,0ms)}
.pv-anim.pv-in .pv-grow-x{transform:scaleX(1)}
.pv-anim .pv-grow-y{transform:scaleY(0);transition:transform .7s cubic-bezier(.3,.8,.3,1) var(--d,0ms)}
.pv-anim.pv-in .pv-grow-y{transform:scaleY(1)}
.pv-anim .pv-draw{stroke-dasharray:0 var(--len);transition:stroke-dasharray 1.1s cubic-bezier(.3,.8,.3,1) .1s}
.pv-anim.pv-in .pv-draw{stroke-dasharray:var(--v) var(--len)}
.pv-anim .pv-draw-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease .1s}
.pv-anim.pv-in .pv-draw-line{stroke-dashoffset:0}
.pv-anim .pv-fade{opacity:0;transition:opacity .5s ease calc(var(--d,0ms) + .35s)}
.pv-anim.pv-in .pv-fade{opacity:1}
.pv-anim .pv-pop{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0ms) + .5s)}
.pv-anim.pv-in .pv-pop{transform:scale(1)}
.pv-anim .pv-scale{transform:scale(.2);opacity:0;transition:transform .9s cubic-bezier(.3,.8,.3,1),opacity .4s ease}
.pv-anim.pv-in .pv-scale{transform:scale(1);opacity:1}
.pv-anim.pv-card{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.pv-anim.pv-card.pv-in{opacity:1;transform:none}
.pv-overlay{animation:pvFadeIn .2s ease}
.pv-overlay .pv-sheet{animation:pvUp .28s cubic-bezier(.3,.8,.3,1)}
.pv-overlay.pv-closing{opacity:0;transition:opacity .18s ease}
@keyframes pvFadeIn{from{opacity:0}to{opacity:1}}
@keyframes pvUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pv-anim *,.pv-anim.pv-card,.pv-overlay,.pv-overlay .pv-sheet{transition:none!important;animation:none!important}}
html[data-a11y-motion="reduce"] .pv-anim *,html[data-a11y-motion="reduce"] .pv-anim.pv-card{transition:none!important}

/* ---------- Evia's chat: a bigger speech bubble above her, alive and interactive ---------- */
html body .chat-sheet{height:min(calc(100dvh - 190px),780px);max-height:none;display:flex;flex-direction:column;transform-origin:50% 100%;animation:ecOpen .32s cubic-bezier(.3,1.25,.4,1)}
html body .chat-sheet .sheet-head{flex:0 0 auto}
html body .chat-sheet .chat{flex:1 1 auto;height:auto!important;min-height:0;background:#fafbfc;scroll-behavior:smooth}
@keyframes ecOpen{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
#chat .bubble{animation:ecIn .32s cubic-bezier(.3,.9,.4,1) both;font-size:15px}
#chat .bubble.user{animation-name:ecInRight}
@keyframes ecIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ecInRight{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
#chat .chat-options .chat-pill,#chat .ui-widget{animation:ecIn .34s cubic-bezier(.3,.9,.4,1) both}
#chat .chat-options .chat-pill:nth-child(2){animation-delay:.05s}#chat .chat-options .chat-pill:nth-child(3){animation-delay:.1s}#chat .chat-options .chat-pill:nth-child(4){animation-delay:.15s}#chat .chat-options .chat-pill:nth-child(5){animation-delay:.2s}#chat .chat-options .chat-pill:nth-child(6){animation-delay:.25s}
.chat-pill{transition:transform .12s ease,background .15s ease}
.chat-pill:active{transform:scale(.96)}
/* the six actions */
#chat .ui-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#chat .ui-action{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;padding:12px;min-height:56px;border-radius:16px;background:#fff}
#chat .ui-action strong{font-size:14px;line-height:1.2}
.ui-action-icon{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.ui-action-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-sheet .chat-options .ui-action:last-child:nth-child(odd){grid-column:auto}
/* the message box */
.ui-ask{flex:0 0 auto;display:flex;gap:8px;margin-top:10px}
.ui-ask input{flex:1;min-width:0;height:46px;border:1.5px solid var(--ui-line);border-radius:23px;padding:0 16px;font-size:15px;background:#fff;transition:border-color .15s ease}
.ui-ask input:focus{outline:none;border-color:var(--yellow)}
.ui-ask button{flex:0 0 46px;height:46px;border-radius:50%;background:#eef1f5;color:var(--ui-muted);display:grid;place-items:center;transition:background .15s ease,transform .15s ease}
.ui-ask.has-text button{background:var(--yellow);color:var(--ui-on-accent);transform:scale(1.05)}
.ui-ask button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* test answers stay, marked */
#chat .rating-options.answered .rating-pill{opacity:.55}
#chat .rating-options.answered .rating-pill.correct{opacity:1;background:var(--soft);border-color:var(--yellow);animation:ecFlash .5s ease}
#chat .rating-options.answered .rating-pill.wrong{opacity:1;background:#fff4e5;border-color:#f79009;animation:ecShake .4s ease}
@keyframes ecFlash{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes ecShake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* score ring */
.ui-score{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px auto;width:140px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--ui-line)}
.ui-score svg{width:90px;height:90px}
.ui-score-track{fill:none;stroke:#eef1f5;stroke-width:7}
.ui-score-fill{fill:none;stroke:var(--yellow);stroke-width:7;stroke-linecap:round;stroke-dasharray:0 var(--len);transition:stroke-dasharray 1.1s cubic-bezier(.3,.8,.3,1)}
.ui-score.in .ui-score-fill{stroke-dasharray:var(--v) var(--len)}
.ui-score strong{position:absolute;top:47px;font-size:22px;color:var(--ui-ink)}
.ui-score span{font-size:13px;font-weight:700;color:var(--ui-muted)}
/* hours wheel */
.hw{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:120px;margin:4px 0 8px;padding:0 10px;border-radius:18px;background:#fff;border:1px solid var(--ui-line);overflow:hidden}
.hw-band{position:absolute;left:10px;right:10px;top:40px;height:40px;border-radius:12px;background:var(--soft,#fff7d6);pointer-events:none}
.hw-col{position:relative;width:64px;height:120px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.hw-col::-webkit-scrollbar{display:none}
.hw-col:focus{outline:none}
.hw-pad{height:40px}
.hw-item{height:40px;display:grid;place-items:center;scroll-snap-align:center;font-size:20px;font-weight:700;color:var(--ui-faint);cursor:pointer;transition:color .15s ease,transform .15s ease}
.hw-item.on{color:var(--ui-ink);transform:scale(1.12)}
.hw-unit{position:relative;font-size:14px;font-weight:700;color:var(--ui-muted);margin-right:8px}
.hw-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.hw-preset{flex:1 1 auto;padding:8px 10px;border-radius:12px;border:1px solid var(--ui-line);background:#fff;font-weight:700;font-size:13px;color:var(--ui-text)}
.hw-readout{margin:4px 0 8px;text-align:center;font-size:14px;font-weight:700;color:var(--yellow-ink)}
.hw-ok{width:100%}
.hw.done,.ui-widget .done{opacity:.6;pointer-events:none}
.hw-note textarea{width:100%;min-height:0;border-radius:14px;padding:10px 12px;font-size:15px;margin-bottom:8px}
.hw-note-actions{display:flex;gap:8px;justify-content:flex-end}
/* confidence check in the chat: one skill at a time, with the slider and last time's dot */
.cfc{padding:14px;border-radius:18px;background:#fff;border:1px solid var(--ui-line);min-width:0}
.cfc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ui-muted);margin-bottom:8px}
.cfc-dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end}.cfc-dots i{width:6px;height:6px;border-radius:50%;background:#e4e7ec}.cfc-dots i.done{background:var(--yellow)}.cfc-dots i.now{background:var(--ui-ink)}
.cfc .cf-row{border:0;padding:0;margin:0;background:none;box-shadow:none}
.cfc .cf-row-top strong{font-size:16px}
.cfc .cf-desc{margin:4px 0 12px}
.cfc-legend{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--ui-faint)}
.cfc-was{display:block;margin-top:8px;font-size:12.5px;color:var(--ui-muted)}
.cfc-next{width:100%;margin-top:12px}
.cfc.done .cfc-next{display:none}
/* college task and evidence cards */
.ut,.ec-item{padding:14px;border-radius:18px;background:#fff;border:1px solid var(--ui-line)}
.ut-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--yellow-ink)}
.ut>strong{display:block;margin-top:4px;font-size:16px;color:var(--ui-ink)}
.ut p{margin:6px 0;font-size:13.5px;line-height:1.45;color:var(--ui-text)}
.ut ol{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.ut-more,.ec-open{margin-top:8px;padding:0;font-weight:800;font-size:13.5px;color:var(--yellow-ink);cursor:pointer}
.ec{display:flex;flex-direction:column;gap:8px}
.ec-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ec-head strong{color:var(--ui-ink)}.ec-head span{font-size:12px;color:var(--ui-muted);flex:0 0 auto}
.ec ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ui-text)}
@media (prefers-reduced-motion:reduce){html body .chat-sheet,#chat .bubble,#chat .chat-pill,#chat .ui-widget,#chat .rating-pill{animation:none!important}.ui-score-fill{transition:none}}
html[data-a11y-motion="reduce"] body .chat-sheet,html[data-a11y-motion="reduce"] #chat *{animation:none!important;transition:none!important}
#chat .ui-action .ui-action-icon{display:grid}

/* ---------- Smooth everywhere: panels fade out, buttons press softly ---------- */
#modal-root .overlay{animation:uiOverlayIn .2s ease both}
#modal-root .overlay.ui-closing{opacity:0!important;transition:opacity .17s ease!important}
#modal-root .overlay.ui-closing .sheet{transform:translateY(10px);transition:transform .17s ease}
@keyframes uiOverlayIn{from{opacity:0}to{opacity:1}}
button.primary,button.secondary,.pv-card,.ev-tile-main,.ev-tile-share,.unit-card,.hw-preset,.bottom-nav button,.ui-tile,.pr-row,.pr-task{transition:transform .12s ease,opacity .15s ease,background .15s ease,box-shadow .15s ease}
button.primary:active,button.secondary:active,.pv-card:active,.ev-tile-main:active,.ev-tile-share:active,.unit-card:active,.hw-preset:active,.bottom-nav button:active,.ui-tile:active,.pr-row:active,.pr-task:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){#modal-root .overlay{animation:none}button,.pv-card,.unit-card{transition:none!important}}
html[data-a11y-motion="reduce"] #modal-root .overlay{animation:none}
#chat .ui-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#chat .ui-action{min-width:0}
@media (max-width:380px){#chat .ui-action{padding:10px 8px;gap:8px;min-height:52px}#chat .ui-action strong{font-size:13px}.ui-action-icon{width:28px;height:28px}}
.cfc .cf-desc{white-space:normal;overflow:visible;font-size:13px;line-height:1.45;margin:4px 0 14px}
.pv-radar-label{font-size:11px}
.pv-radar-big .pv-radar{max-width:100%}
.pv-axis.on{fill:var(--ui-ink);font-weight:800}
.pv-axis.future{opacity:.45}
.pv-year{display:block;margin-bottom:2px;font-size:12px;font-weight:800;color:var(--ui-muted)}
.pv-caption{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--ui-muted)}

/* Things to mention: pills that turn green as the write-up covers them */
.mention-pills{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.mention-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:#f2f4f7;border:1px solid transparent;font-size:13px;font-weight:600;color:var(--ui-muted);transition:background .25s ease,color .25s ease,border-color .25s ease}
.mention-pill.met{background:var(--soft);border-color:var(--yellow-line);color:var(--yellow-ink)}
.mention-pill.met::before{content:"✓";font-weight:800}
.mention-pill.pop{animation:mentionPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes mentionPop{0%{transform:scale(.85)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.mention-count{margin:2px 2px 10px;font-size:12.5px;font-weight:600;color:var(--ui-muted);min-height:1em}
@media (prefers-reduced-motion:reduce){.mention-pill.pop{animation:none}}
html[data-a11y-motion="reduce"] .mention-pill.pop{animation:none}

/* Chat bubble sits just above Evia: more room to talk */
html body .chat-sheet{bottom:128px;height:min(calc(100dvh - 146px),820px)}
@media (max-width:520px){html body .chat-sheet{bottom:114px;height:calc(100dvh - 128px)}}
/* Evia steps aside (slides down) while another panel is open, and pops back when it closes */
html body .evia-fab{transition:translate .32s cubic-bezier(.3,.9,.4,1),opacity .25s ease}
body.ui-panel-open .evia-fab{translate:0 160%;opacity:0;pointer-events:none}
/* Scenario cards in the chat */
.scc{display:flex;flex-direction:column;gap:8px}
.scc-kicker{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ui-muted);margin:0 2px}
.scc-opt{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;width:100%;padding:12px;text-align:left;border-radius:16px;border:1.5px solid var(--ui-line);background:#fff;font:inherit;color:var(--ui-ink);cursor:pointer;transition:transform .12s ease,background .2s ease,border-color .2s ease}
.scc-opt:active{transform:scale(.98)}
.scc-letter{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f2f4f7;font-weight:800;font-size:13px}
.scc-text{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.4}
.scc-why{flex:1 1 100%;padding-left:38px;font-size:13px;line-height:1.45;color:var(--ui-text)}
.scc-opt.best{background:var(--soft);border-color:var(--yellow)}.scc-opt.best .scc-letter{background:var(--yellow);color:#fff}
.scc-opt.other{opacity:.75}.scc-opt.other.picked{opacity:1;background:#fff4e5;border-color:#f79009}
#chat .sc-contacts{padding:14px;border-radius:18px;background:#fff;border:1px solid var(--ui-line)}
#chat .sc-contacts .pr-h{margin-top:0}
/* Review sections in the chat */
.rvc{border-radius:20px;background:#fff;border:1px solid var(--ui-line);overflow:hidden}
.rvc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 14px 0}
.rvc-top strong{font-size:16px;color:var(--ui-ink)}
.rvc-top span{font-size:12px;font-weight:700;color:var(--ui-muted)}
.rvc .rv-slide{border:0;box-shadow:none;margin:0;padding:10px 14px 14px;background:none}
.rvc textarea{width:100%;min-height:0}
@media (prefers-reduced-motion:reduce){html body .evia-fab{transition:none}}
.scc-opt:disabled{opacity:1;cursor:default;color:var(--ui-ink)}.scc-opt.other:not(.picked){opacity:.7}

/* Check my writing: a small A✓ in the text box's top-right corner */
.wc-field{position:relative;display:block}
.wc-field>textarea{padding-right:46px!important}
html body .wc-field>.wc-btn{position:absolute;top:8px;right:8px;width:34px;height:34px;min-height:0;padding:0;justify-content:center;border-radius:10px;background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);color:var(--yellow-ink);z-index:1}
html body .wc-field>.wc-btn svg{width:18px;height:18px}

/* Evidence pack: slimmer Camera/Gallery buttons (same icons), and one Submit button now work saves itself */
html body .evidence-photo-button{aspect-ratio:2/1;gap:6px;padding:8px}
html body .pack-actions{grid-template-columns:1fr}

/* Already shared: greyed out, with the date */
.ev-tile.ev-shared{opacity:.55;box-shadow:none;background:#f8f9fb}
.ev-shared-tag{font-weight:700;color:var(--ui-muted)}
/* Video tiles show a frame with a play mark */
.ev-tile-img{position:relative}
.ev-tile-img video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ev-play{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.45)}
.ev-play::after{content:"";position:absolute;left:8px;top:6px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
/* Preview before sharing */
.sp-preview{display:grid;place-items:center;min-height:120px;margin-bottom:12px;border-radius:16px;background:#f2f4f7;overflow:hidden}
.sp-preview img,.sp-preview video{display:block;width:100%;max-height:52vh;object-fit:contain;background:#000}
.sp-preview iframe{width:100%;height:52vh;border:0;background:#fff}
.sp-audio{width:100%;padding:24px 16px}
.sp-audio audio{width:100%}
.sp-loading{padding:30px;font-size:13.5px;color:var(--ui-muted)}
.sp-open{display:block;padding:12px;font-weight:800;color:var(--yellow-ink);text-align:center}
.sp-open.big{padding:34px 16px;font-size:15px}
.sp-meta{margin:0 2px 8px;font-size:13px;color:var(--ui-muted)}

/* My course: learning logs and progress reviews, side by side under the units */
.ui-logs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 8px}
.ui-log-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:16px;border-radius:20px;text-align:left;cursor:pointer;background:var(--yellow);color:var(--ui-on-accent);box-shadow:0 6px 18px rgba(16,24,40,.08);font:inherit;transition:transform .12s ease}
.ui-log-tile:active{transform:scale(.97)}
.ui-log-tile.alt{background:var(--ui-ink);color:#fff}
.ui-log-tile strong{font-size:15.5px;line-height:1.2;margin-top:6px}
.ui-log-tile small{font-size:12.5px;opacity:.8}
.ui-log-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.3)}
.ui-log-tile.alt .ui-log-icon{background:rgba(255,255,255,.14)}
.ui-log-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Learning logs page */
.ui-logs-dl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px}
.ui-logs-dl strong{display:block;font-size:15px;color:var(--ui-ink)}
.ui-logs-dl small{display:block;margin-top:2px;font-size:12.5px;color:var(--ui-muted)}
.ui-logs-dl .primary{flex:0 0 auto;background:var(--yellow);color:var(--ui-on-accent);padding:11px 16px}
.ui-hours-item.done{opacity:.6}
.ui-hours-n{flex-basis:74px}
.ui-batch{align-items:center}
.ui-batch .secondary{flex:0 0 auto;padding:9px 14px;font-size:13.5px}
.ui-hours-n{flex:0 0 92px;font-size:16px;white-space:nowrap}

/* Profile: the name is a clear box to type in */
html body .pf-name{border:1.5px solid var(--ui-line)!important;background:#fff!important;border-radius:14px;padding:10px 14px;font-size:19px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
html body .pf-name::placeholder{color:var(--ui-faint);font-weight:600}
html body .pf-name:focus{border-color:var(--yellow)!important;outline:none}
.profile-sheet .evia-guide-inline{margin:10px 0 12px}

/* You are here: a line and label, no dot; the label stays on screen at either end */
.pv-tl-mark::after{display:none}
.pv-tl-mark.at-start span{transform:none;left:-2px}
.pv-tl-mark.at-end span{transform:translateX(-100%);left:2px}
/* Date wheel */
.dw-field{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:46px;margin-top:6px;padding:0 12px 0 14px;border:1.5px solid var(--ui-line);border-radius:14px;background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ui-ink);text-align:left;cursor:pointer}
.dw-field em{font-style:normal;font-weight:500;color:var(--ui-faint)}
.dw-field svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--yellow-ink);stroke-width:1.8;stroke-linecap:round}
.dw-overlay{z-index:120}
.dw .hw-col{width:auto;flex:1}
.dw .hw-col[data-col="Month"]{flex:1.2}
.hw-item.off{opacity:.25}
.dw-readout{font-weight:700}
.ui-sub-lead{margin:-6px 4px 16px;font-size:14px;line-height:1.5;color:var(--ui-muted)}
.ui-review-row{width:100%;align-items:center;text-align:left;font:inherit;color:inherit;cursor:pointer;background:none}
.ui-review-icon{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.ui-review-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ui-review-chev{font-size:22px;color:var(--ui-faint)}
@media (max-width:380px){.ui-hours-sum strong{font-size:22px}.ui-logs-dl{flex-wrap:wrap}.ui-logs-dl .primary{width:100%}
  .wc-row{flex-wrap:wrap}.wc-row>div:last-child,.wc-row .wc-acts{width:100%;display:flex;gap:8px;justify-content:flex-end}}

/* ---------- Evidence strength (strength.js) ---------- */
html body .st-how{display:block;margin:14px auto 0;padding:6px 4px;font-size:13.5px;font-weight:700;color:var(--yellow-ink);cursor:pointer}
.st-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.st-tip{display:flex;gap:12px;align-items:flex-start}
.st-tip-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink);font-size:13px;font-weight:800}
.st-tip>span:last-child{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.45;color:var(--ui-text)}
.st-tip strong{font-size:14.5px;color:var(--ui-ink)}

html body .pv-guide{grid-column:1/-1;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px;border-radius:var(--pm-radius,20px);background:var(--pm-card,#fff);border:1px solid var(--pm-hair,rgba(16,24,40,.07));box-shadow:var(--pm-shadow);text-align:left;cursor:pointer;color:var(--ui-ink)}
.pv-guide-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink)}
.pv-guide>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pv-guide strong{font-size:15px;font-weight:700}
.pv-guide small{font-size:12.5px;color:var(--ui-muted)}
.pv-guide-chev{font-size:22px;color:var(--ui-faint)}

/* ---------- Guided evidence (guide.js) ---------- */
.eg-start{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 14px;padding:10px 14px 10px 10px;border-radius:18px;background:var(--soft,#fff7d6);border:1px solid var(--yellow-line,#f1d878);text-align:left;cursor:pointer;color:var(--ui-ink)}
.eg-start:active{transform:scale(.99)}
.eg-start>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.eg-start strong{font-size:15px;font-weight:700}
.eg-start small{font-size:12.5px;color:var(--yellow-ink)}
.eg-start-chev{font-size:22px;color:var(--yellow-ink)}
.eg-head{display:flex;align-items:center;gap:12px;min-width:0}
.eg-head h2{overflow-wrap:anywhere}
.eg-say{margin:0;padding:14px 16px;border-radius:4px 18px 18px 18px;background:var(--soft,#fff7d6);font-size:15px;line-height:1.5;color:var(--ui-ink)}
.eg-q{font-size:17px;font-weight:650;line-height:1.4}
.eg-small{margin:2px 2px 0;font-size:13px;color:var(--ui-muted)}
.eg-progress{height:5px;border-radius:999px;background:#f0efeb;overflow:hidden}
.eg-progress i{display:block;height:100%;border-radius:inherit;background:var(--yellow);transition:width .3s ease}
html body .eg-text{width:100%;min-height:150px;box-sizing:border-box;padding:14px;border:1px solid var(--pm-hair,rgba(16,24,40,.1));border-radius:16px;background:#fff;font-size:15.5px;line-height:1.5;resize:vertical;box-shadow:inset 0 1px 2px rgba(16,24,40,.04)}
html body .eg-final{min-height:260px}
.eg-actions{align-items:center}
.eg-back{margin-right:auto;padding:10px 4px;font-weight:700;color:var(--ui-muted);cursor:pointer}
.cam-guide{display:flex;align-items:flex-start;gap:12px;margin:12px 16px 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.cam-guide .evia-mini{background:#fff}
.cam-guide>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cam-guide-n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cam-guide-say{margin:0;font-size:17px;font-weight:700;line-height:1.35;color:#fff}
.cam-guide-hint{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:reduce){.eg-progress i{transition:none}}
.cam-gallery{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;padding:6px 8px;border-radius:14px;color:#fff;font-size:12px;font-weight:650;cursor:pointer}
.cam-gallery svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cam-gallery:active{background:rgba(255,255,255,.12)}
.eg-think{padding:12px 14px;border-radius:14px;background:#f6f5f1;font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.eg-think p{margin:0}.eg-think p+p{margin-top:8px}
.eg-think strong{color:var(--ui-ink)}
.eg-think ul{margin:4px 0 0;padding-left:18px}
.eg-think li+li{margin-top:2px}
.eg-stages{margin:0;padding:0 0 0 4px;list-style:none;counter-reset:eg;display:flex;flex-direction:column;gap:6px}
.eg-stages li{counter-increment:eg;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:650;color:var(--ui-ink)}
.eg-stages li::before{content:counter(eg);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--soft,#fff7d6);color:var(--yellow-ink);font-size:12px;font-weight:800}
.cam-progress{height:4px;margin:0 16px 10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.cam-progress i{display:block;height:100%;width:0;border-radius:inherit;background:var(--yellow);transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.cam-progress i{transition:none}}
/* Guided writing screens: pinned to the top and sized to the space above the keyboard (guide.js sets --eg-vh). */
html body .eg-overlay.eg-full{align-items:flex-start;background:rgba(20,28,42,.3)}
html body .eg-full .eg-sheet{position:fixed;left:0;right:0;top:var(--eg-top,0px);width:100%;height:var(--eg-vh,100dvh);max-height:none;border-radius:0;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 16px 12px;overflow:hidden;box-sizing:border-box}
html body .eg-full .sheet-head{flex:none;margin-bottom:8px}
html body .eg-full .sheet-head h2{font-size:20px}
html body .eg-full .evia-mini{width:30px;height:30px}
html body .eg-full .pr-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
html body .eg-full .eg-q{flex:none;padding:10px 14px;font-size:16px}
html body .eg-full .eg-think{flex:none;padding:8px 12px;font-size:13px}
html body .eg-full .wc-field{flex:1;min-height:96px;display:flex}
html body .eg-full .wc-field>.eg-text,html body .eg-full .eg-text{flex:1;min-height:96px;height:auto;resize:none}
html body .eg-full .wc{flex:none}
html body .eg-full .wc-panel{max-height:40vh;overflow:auto}
html body .eg-full .eg-actions{flex:none;margin-top:0;padding-top:4px;flex-wrap:nowrap}
html body .eg-full .eg-actions button{min-height:44px;white-space:nowrap}
.eg-think details{margin-top:6px}
.eg-think summary{cursor:pointer;font-weight:700;color:var(--yellow-ink);list-style:none}
.eg-think summary::-webkit-details-marker{display:none}
.eg-think summary::after{content:" ›";display:inline-block;transition:transform .2s ease}
.eg-think details[open] summary::after{transform:rotate(90deg)}
html body .eg-full .eg-sheet>.eg-actions{padding-top:8px}
html body .eg-tight .chat-kicker{display:none}
html body .eg-tight .sheet-head{margin-bottom:4px}
html body .eg-tight .eg-think details{display:none}
html body .eg-tight .pr-body{gap:6px}
html body .eg-tight .eg-q{padding:8px 12px;font-size:15px}
html body .eg-full .eg-actions{gap:8px}
@media (max-width:380px){html body .eg-full .eg-actions button{padding:10px 12px;font-size:14px}html body .eg-full .eg-back{padding:10px 2px}}

/* ---------- Teach me (teach.js) ---------- */
.tm-tile{grid-column:1/-1;display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:var(--pm-radius,20px);background:linear-gradient(135deg,var(--soft,#fff7d6),#fff 75%);border:1px solid var(--yellow-line,#f1d878);box-shadow:var(--pm-shadow);text-align:left;cursor:pointer;color:var(--ui-ink)}
.tm-tile:active{transform:scale(.99)}
html body .tm-tile-evia.evia-mini{width:48px;height:48px;flex:none;animation:tmBob 3.2s ease-in-out infinite}
html body .tm-tile-evia.evia-mini .evia-face{gap:5px}
html body .tm-tile-evia.evia-mini .evia-face i{width:10px!important;height:13px!important;border-width:2.5px!important}
.tm-tile-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tm-tile-copy strong{font-size:17px;font-weight:800;letter-spacing:-.02em}
.tm-tile-copy small{font-size:13px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-tile-bar{display:block;height:6px;margin-top:6px;border-radius:999px;background:rgba(16,24,40,.08);overflow:hidden}
.tm-tile-bar i{display:block;height:100%;border-radius:inherit;background:var(--yellow)}
.tm-tile-n{font-size:15px;font-weight:800;color:var(--yellow-ink);font-variant-numeric:tabular-nums}
@keyframes tmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.tm{position:fixed;inset:0;z-index:10030;display:flex;flex-direction:column;background:var(--bg,#fffdfa);animation:tmFade .2s ease both}
@keyframes tmFade{from{opacity:0}to{opacity:1}}
.tm.tm-out{opacity:0;pointer-events:none;transition:opacity .2s ease}
.tm-bar{flex:none;display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--pm-hair,rgba(16,24,40,.07))}
.tm-bar strong{flex:1;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ui-ink)}
.tm-x{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--pm-hair,rgba(16,24,40,.08));font-size:24px;line-height:1;color:var(--ui-muted);cursor:pointer}
.tm-count{font-size:14px;font-weight:800;color:var(--yellow-ink);font-variant-numeric:tabular-nums}
.tm-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 18px 28px}

.tm-hero{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 6px 18px;text-align:center}
html body .tm-evia.evia-mini{width:92px;height:92px;border-width:4px;background:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--yellow) 25%,transparent);animation:tmBob 3.2s ease-in-out infinite}
html body .tm-evia.evia-mini .evia-face{gap:10px}
html body .tm-evia.evia-mini .evia-face i{width:18px!important;height:24px!important;border-width:3.5px!important;animation:tmBlink 5s infinite}
html body .tm-evia.evia-mini.sm{width:34px;height:34px;border-width:2.5px;box-shadow:none;animation:none}
html body .tm-evia.evia-mini.sm .evia-face{gap:4px}
html body .tm-evia.evia-mini.sm .evia-face i{width:7px!important;height:9px!important;border-width:2px!important}
html body .tm-evia.evia-mini.xl{width:120px;height:120px;border-width:5px;animation:tmJump .9s cubic-bezier(.3,1.6,.5,1) both}
html body .tm-evia.evia-mini.xl .evia-face i{width:24px!important;height:30px!important;border-width:4px!important;border-radius:50% 50% 45% 45%/60% 60% 40% 40%}
@keyframes tmBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes tmJump{0%{transform:translateY(30px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.tm-say{position:relative;margin:0;max-width:340px;padding:12px 16px;border-radius:18px;background:#fff;border:1px solid var(--pm-hair,rgba(16,24,40,.08));box-shadow:var(--pm-shadow);font-size:15px;line-height:1.5;color:var(--ui-ink)}
.tm-say::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;margin-left:-6px;background:#fff;border-left:1px solid var(--pm-hair,rgba(16,24,40,.08));border-top:1px solid var(--pm-hair,rgba(16,24,40,.08));transform:rotate(45deg)}

.tm-unit{margin-top:6px}
.tm-unit-head{padding:16px;border-radius:20px;background:var(--yellow);color:var(--ui-on-accent,#172033)}
.tm-unit-k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.tm-unit-head h2{margin:2px 0 2px;font-size:22px;letter-spacing:-.02em}
.tm-unit-head small{font-size:13px;opacity:.85}
.tm-unit-bar{display:block;height:6px;margin-top:10px;border-radius:999px;background:rgba(255,255,255,.4);overflow:hidden}
.tm-unit-bar i{display:block;height:100%;background:#fff;border-radius:inherit}
.tm-path{list-style:none;margin:10px 0 0;padding:6px 0;display:flex;flex-direction:column;gap:6px}
.tm-node{--x:calc((var(--i) - 1.5) * 34px);display:flex;justify-content:center}
.tm-node:nth-child(4n+3){--x:34px}.tm-node:nth-child(4n+4){--x:0px}
.tm-node button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;background:none;border:0;cursor:pointer;transform:translateX(var(--x));color:var(--ui-ink)}
.tm-node button:disabled{cursor:default}
.tm-dot{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ui-on-accent,#172033);box-shadow:0 6px 0 var(--yellow-ink);transition:transform .12s ease,box-shadow .12s ease}
.tm-dot b{font-size:26px;font-weight:800}
.tm-dot svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tm-node button:active .tm-dot{transform:translateY(4px);box-shadow:0 2px 0 var(--yellow-ink)}
.tm-node.done .tm-dot{background:var(--yellow-ink);color:#fff;box-shadow:0 6px 0 color-mix(in srgb,var(--yellow-ink) 70%,#000)}
.tm-node.locked .tm-dot{background:#e9e8e3;color:#a3a9b3;box-shadow:0 6px 0 #d5d3cc}
.tm-node.next .tm-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--yellow);animation:tmPulse 1.6s ease-out infinite}
@keyframes tmPulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}}
.tm-start{margin-top:-2px;padding:3px 10px;border-radius:999px;background:var(--ui-ink,#172033);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}
.tm-label{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.tm-label strong{font-size:15px;font-weight:750}
.tm-label small{font-size:12.5px;color:var(--ui-muted)}
.tm-node.locked .tm-label{opacity:.55}
.tm-soon{margin-top:18px;padding:14px 16px;border-radius:18px;border:1px dashed #d5d3cc}
.tm-soon h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-muted)}
.tm-soon-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14.5px;font-weight:600;color:var(--ui-muted)}
.tm-dot.sm{width:30px;height:30px;box-shadow:none;background:#e9e8e3;color:#a3a9b3}
.tm-dot.sm svg{width:15px;height:15px}

.tm-lbar{gap:14px}
.tm-prog{flex:1;height:12px;border-radius:999px;background:#ebeae5;overflow:hidden}
.tm-prog i{display:block;height:100%;width:0;border-radius:inherit;background:var(--yellow);transition:width .35s cubic-bezier(.3,.9,.3,1)}
.tm-step{padding-top:22px}
.tm-card{display:flex;flex-direction:column;gap:12px;animation:tmIn .3s ease both}
.tm-kicker{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-ink)}
.tm-card h2,.tm-q{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--ui-ink)}
.tm-q{margin-bottom:18px;animation:tmIn .3s ease both}
.tm-card p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ui-text)}
@keyframes tmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tm-pic{padding:12px;border-radius:18px;background:#fbf8f2;border:1px solid #ebe3d2}
.tp{display:block;width:100%;height:auto;max-height:180px}
html body .tp text{font-size:11px;font-weight:650;fill:var(--ui-text,#344054);text-anchor:middle}
html body .tp .tp-on{fill:#fff;font-size:10px;font-weight:800;letter-spacing:.05em}
html body .tp .tp-big{font-size:34px;font-weight:800;fill:var(--ui-ink)}
.tp-line{fill:none;stroke:var(--ui-ink,#172033);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tp-thin{fill:none;stroke:rgba(16,24,40,.25);stroke-width:1.4}
.tp-accent{fill:none;stroke:var(--yellow);stroke-width:3.5;stroke-linecap:round}
.tp-cross{fill:none;stroke:#e2483d;stroke-width:4;stroke-linecap:round}
.tp-bag{fill:#8b939e}.tp-bottle{fill:var(--yellow)}.tp-drumlip{fill:#5b6572}.tp-wheel{fill:#2b3240}
.tp-silo{fill:#cfd5dc;stroke:var(--ui-ink);stroke-width:2}.tp-tub{fill:var(--yellow);stroke:var(--ui-ink);stroke-width:2}
.tp-sign-blue{fill:#1f5fbf}.tp-sign-yellow{fill:#f5c400;stroke:#172033;stroke-width:3;stroke-linejoin:round}.tp-sign-white{fill:#fff}.tp-sign-red{fill:#fff;stroke:#d92d20;stroke-width:6}.tp-sign-redline{stroke:#d92d20;stroke-width:6}.tp-sign-green{fill:#16834a}.tp-sign-cross{stroke:#fff;stroke-width:8}
html body .tp .tp-sign-t{fill:#fff;font-size:11px;font-weight:800}html body .tp .tp-sign-k{fill:#172033;font-size:30px;font-weight:900}.tp-body{fill:var(--yellow);stroke:var(--ui-ink);stroke-width:2}
html body .tp .tp-bubble+text{font-size:10.5px}

.tm-opts{display:flex;flex-direction:column;gap:10px}
.tm-opts.tf,.tm-opts.pics{display:grid;grid-template-columns:1fr 1fr}
.tm-opt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;min-height:56px;padding:14px 16px;border-radius:16px;background:#fff;border:2px solid #e6e4de;box-shadow:0 3px 0 #e6e4de;text-align:left;font-size:16px;font-weight:600;color:var(--ui-ink);cursor:pointer;transition:transform .1s ease,border-color .15s ease,background .15s ease;animation:tmIn .3s ease both}
.tm-opts.tf .tm-opt,.tm-opts.pics .tm-opt{align-items:center;text-align:center;justify-content:center}
.tm-opt .tm-pic{padding:4px;border:0;width:100%}
.tm-opt:active{transform:translateY(2px);box-shadow:0 1px 0 #e6e4de}
.tm-opt.on{border-color:var(--yellow);background:var(--soft,#fff7d6);box-shadow:0 3px 0 var(--yellow)}
.tm-opt.right{border-color:var(--yellow-ink);background:var(--soft,#fff7d6);box-shadow:0 3px 0 var(--yellow-ink)}
.tm-opt.wrong{border-color:#f79009;background:#fff4e5;box-shadow:0 3px 0 #f79009;animation:tmShake .4s ease}
@keyframes tmShake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.tm-slots{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.tm-slot{min-height:52px;display:flex;align-items:stretch;border-radius:14px;border:2px dashed #dcdad3}
.tm-slot>span{display:flex;align-items:center;padding:0 16px;font-weight:800;color:#c3c1ba}
.tm-slot.filled{border-style:solid;border-color:transparent}
.tm-slot.right .tm-chip{border-color:var(--yellow-ink);background:var(--soft,#fff7d6)}
.tm-slot.wrong .tm-chip{border-color:#f79009;background:#fff4e5}
.tm-pool{display:flex;flex-direction:column;gap:8px}
.tm-chip{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:10px 14px;border-radius:14px;background:#fff;border:2px solid #e6e4de;box-shadow:0 3px 0 #e6e4de;text-align:left;font-size:15px;font-weight:600;color:var(--ui-ink);cursor:pointer;animation:tmIn .25s ease both}
.tm-chip b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ui-on-accent,#172033);font-size:12px}
.tm-chip.in{box-shadow:none}
.tm-match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tm-match>div{display:flex;flex-direction:column;gap:10px}
.tm-m{min-height:64px;padding:10px 12px;border-radius:14px;background:#fff;border:2px solid #e6e4de;box-shadow:0 3px 0 #e6e4de;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ui-ink);cursor:pointer;transition:opacity .25s ease,transform .1s ease}
.tm-m.on{border-color:var(--yellow);background:var(--soft,#fff7d6);box-shadow:0 3px 0 var(--yellow)}
.tm-m.got{opacity:.4;border-color:var(--yellow-ink);background:var(--soft,#fff7d6);box-shadow:none;cursor:default}
.tm-m.wrong{border-color:#f79009;background:#fff4e5;animation:tmShake .4s ease}

.tm-foot{flex:none;position:relative;padding:12px 18px max(14px,env(safe-area-inset-bottom));background:var(--bg,#fffdfa);border-top:1px solid var(--pm-hair,rgba(16,24,40,.06));display:flex;flex-direction:column;gap:10px}
html body .tm-go{width:100%;min-height:54px;border-radius:16px;font-size:17px;font-weight:800}
html body .tm-go:disabled{opacity:.4}
.tm-fb{margin:-12px -18px 0;padding:14px 18px 4px;animation:tmUp .25s ease both}
.tm-fb.ok{background:var(--soft,#fff7d6)}
.tm-fb.no{background:#fff4e5}
.tm-fb-top{display:flex;align-items:center;gap:10px}
.tm-fb-top strong{font-size:19px;font-weight:800;color:var(--yellow-ink)}
.tm-fb.no .tm-fb-top strong{color:#b54708}
.tm-fb p{margin:6px 0 4px;font-size:15px;line-height:1.5;color:var(--ui-text)}
@keyframes tmUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.tm-happy .tm-fb .tm-evia{animation:tmHop .5s ease}
@keyframes tmHop{0%,100%{transform:none}40%{transform:translateY(-8px) rotate(-6deg)}}

.tm-end{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:48px;text-align:center;position:relative;overflow:hidden}
.tm-end h2{margin:10px 0 0;font-size:28px;letter-spacing:-.03em;color:var(--ui-ink)}
.tm-end-sub{margin:0;font-size:15px;color:var(--ui-muted)}
.tm-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px;margin-top:16px}
.tm-stats div{padding:14px;border-radius:18px;background:#fff;border:2px solid var(--yellow-line,#f1d878);display:flex;flex-direction:column;gap:2px}
.tm-stats b{font-size:26px;font-weight:800;color:var(--yellow-ink);font-variant-numeric:tabular-nums}
.tm-stats span{font-size:12.5px;color:var(--ui-muted)}
.tm-view{max-width:340px;margin:10px 0 0;padding:12px 14px;border-radius:16px;background:var(--soft,#fff7d6);font-size:14px;line-height:1.5;color:var(--ui-text)}
.tm-confetti{position:absolute;inset:0;pointer-events:none}
.tm-confetti i{position:absolute;top:-12px;left:calc(var(--k) * 5.5% + 2%);width:8px;height:14px;border-radius:2px;background:var(--yellow);opacity:0;animation:tmFall 2.2s ease-in calc(var(--k) * 60ms) forwards}
.tm-confetti i:nth-child(3n){background:var(--yellow-ink)}.tm-confetti i:nth-child(3n+1){background:var(--yellow-line);width:6px}
@keyframes tmFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(420px) rotate(540deg)}}

.cf-evia{display:flex;align-items:center;gap:8px;margin:6px 0 2px;font-size:12.5px;color:var(--ui-text)}
.cf-evia .evia-mini{width:22px;height:22px;border-width:2px}
.cf-evia .evia-mini .evia-face{gap:2px}
html body .cf-evia .evia-mini .evia-face i{width:4px!important;height:6px!important;border-width:1.5px!important}
.cf-evia strong{color:var(--yellow-ink)}

@media (prefers-reduced-motion:reduce){.tm,.tm-card,.tm-q,.tm-opt,.tm-chip,.tm-fb,.tm-evia,.tm-tile-evia,.tm-confetti i,.tm-node.next .tm-dot::after{animation:none!important}.tm-confetti{display:none}}
html[data-a11y-motion="reduce"] .tm *{animation:none!important;transition:none!important}
html[data-a11y-motion="reduce"] .tm-confetti{display:none}
.tm-node.done,.tm-node.done button{background:none}
.ui-auto-tag{color:var(--yellow-ink);font-weight:700}
.ui-hours-item{position:relative}
.ui-auto-x{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;background:#f4f3ef;color:var(--ui-muted);font-size:18px;line-height:1;cursor:pointer}
.ui-auto-note{margin:10px 4px 0;font-size:12.5px;line-height:1.5;color:var(--ui-muted)}

/* Teach me: maths and English, extra pictures */
.tm-fs-h{margin:28px 4px 4px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ui-ink)}
.tm-fs-note{margin:0 4px 12px;font-size:13px;line-height:1.5;color:var(--ui-muted)}
.tm-unit.fs .tm-unit-head{background:var(--soft,#fff7d6);border:2px solid var(--yellow-line,#f1d878);color:var(--yellow-ink)}
.tm-unit.fs .tm-unit-bar{background:color-mix(in srgb,var(--yellow) 18%,transparent)}.tm-unit.fs .tm-unit-bar i{background:var(--yellow)}.tp-tick{stroke:var(--ui-ink);stroke-width:1.2}
.tp-wall{fill:#d98d6a;stroke:var(--ui-ink);stroke-width:2}.tp-dim{fill:none;stroke:var(--yellow-ink);stroke-width:2}
html body .tp .tp-hand{font-size:10.5px;font-style:italic;fill:var(--ui-ink)}
.tm-foot.tm-row{flex-direction:row}
.tm-foot.tm-row:empty{display:none}

/* Confidence check in the Teach me style */
.cf-area{margin-bottom:10px}
.cf-ask{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;border-radius:4px 18px 18px 18px;background:var(--soft,#fff7d6)}
.cf-ask p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ui-ink)}
.cf-opts{display:flex;flex-direction:column;gap:10px}
.tm-opt.cf-opt{flex-direction:row;align-items:center;gap:14px;position:relative}
.cf-bars{flex:none;display:inline-flex;align-items:flex-end;gap:3px;height:26px}
.cf-bars i{width:6px;border-radius:2px;background:#e4e2dc}
.cf-bars i:nth-child(1){height:8px}.cf-bars i:nth-child(2){height:14px}.cf-bars i:nth-child(3){height:20px}.cf-bars i:nth-child(4){height:26px}
.cf-bars i.on{background:var(--yellow)}
.cf-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-txt strong{font-size:16px}
.cf-txt small{font-size:13px;font-weight:500;color:var(--ui-muted);line-height:1.35}
.cf-tags{position:absolute;top:-10px;right:10px;display:flex;gap:6px}
.cf-tag{padding:2px 8px;border-radius:999px;background:#fff;border:1px solid #dcdad3;font-size:11px;font-style:normal;font-weight:700;color:var(--ui-muted)}
.cf-tag.evia{background:var(--yellow);border-color:var(--yellow);color:var(--ui-on-accent,#172033)}
.cf-h{margin:22px 4px 8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-muted)}
.cf-sum{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cf-sum li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--pm-hair,rgba(16,24,40,.08))}
.cf-sum li>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.cf-sum strong{font-size:15px}.cf-sum small{font-size:12.5px;color:var(--ui-muted)}
.cf-up,.cf-down{font-style:normal;font-size:12.5px;font-weight:800}.cf-up{color:var(--yellow-ink)}.cf-down{color:#b54708}
.tm-hero+.tm-stats{margin:0 auto 6px}

/* Tests in exam style (exam.js): plain, calm and serious */
.ex{position:fixed;inset:0;z-index:10030;display:flex;flex-direction:column;background:#fff;color:#101828;animation:tmFade .15s ease both}
.ex.ex-out{opacity:0;pointer-events:none;transition:opacity .18s ease}
.ex-bar{flex:none;display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid #eaecf0}
.ex-x{flex:none;width:38px;height:38px;border-radius:8px;border:1px solid #d0d5dd;background:#fff;font-size:22px;line-height:1;color:#475467;cursor:pointer}
.ex-title{flex:1;font-size:15px;font-weight:700}
.ex-time{font-size:14px;font-weight:600;color:#475467;font-variant-numeric:tabular-nums}
.ex-nav{flex:none;display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid #eaecf0;scrollbar-width:none}
.ex-nav::-webkit-scrollbar{display:none}
.ex-n{flex:none;width:34px;height:34px;border-radius:6px;border:1px solid #d0d5dd;background:#fff;font-size:13px;font-weight:600;color:#475467;cursor:pointer}
.ex-n.done{background:#f2f4f7;color:#101828}
.ex-n.now{border:2px solid #101828;color:#101828}
.ex-body{flex:1;overflow-y:auto;padding:24px 18px}
.ex-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#667085}
.ex-intro h1{margin:6px 0 18px;font-size:26px;letter-spacing:-.02em}
.ex-rules{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.5;color:#344054}
.ex-note{margin:18px 0 0;font-size:14px;color:#667085;line-height:1.5}
.ex-q{margin:0 0 20px;font-size:19px;line-height:1.45;font-weight:650}
.ex-opts{display:flex;flex-direction:column;gap:10px}
.ex-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px;border-radius:8px;border:1px solid #d0d5dd;background:#fff;text-align:left;font-size:15.5px;line-height:1.45;color:#101828;cursor:pointer}
.ex-l{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #98a2b3;display:grid;place-items:center;font-size:13px;font-weight:700;color:#475467}
.ex-opt.on{border:2px solid #101828;padding:13px;background:#f9fafb}
.ex-opt.on .ex-l{background:#101828;border-color:#101828;color:#fff}
.ex-foot{flex:none;display:flex;flex-direction:column;gap:10px;padding:12px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid #eaecf0}
.ex-foot.ex-row{flex-direction:row}
.ex-btn{flex:1;min-height:50px;border-radius:8px;border:1px solid #d0d5dd;background:#fff;font-size:16px;font-weight:700;color:#101828;cursor:pointer}
.ex-btn:disabled{opacity:.4}
.ex-primary{background:#101828;border-color:#101828;color:#fff}
.ex-score{padding:22px;border-radius:10px;border:1px solid #eaecf0;text-align:center;display:flex;flex-direction:column;gap:4px}
.ex-score b{font-size:44px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ex-score span:last-child{font-size:14px;color:#475467}
.ex-revise{margin-top:14px;padding:14px;border-radius:8px;background:#fffaeb;border:1px solid #fedf89}
.ex-revise p{margin:4px 0 0;font-size:14px;color:#344054}
.ex-h{margin:24px 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#667085}
.ex-review{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ex-review li{padding:14px;border-radius:8px;border:1px solid #eaecf0}
.ex-review li.no{border-left:4px solid #d92d20}.ex-review li.ok{border-left:4px solid #101828}
.ex-rq{margin:0 0 6px;font-weight:650;line-height:1.45;display:flex;gap:8px}
.ex-mark{flex:none;font-weight:800}.ex-review li.no .ex-mark{color:#d92d20}
.ex-ra{margin:2px 0;font-size:14px;color:#344054}
.ex-ex{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#475467}
.ex-revise ul{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:#344054}
@media (max-width:380px){html body .ui-hours-item .ui-auto-x{width:26px;height:26px;font-size:16px}html body .ui-hours-item .ui-hours-n{flex-basis:64px}}.tp-tie{fill:none;stroke:#4b5563;stroke-width:3;stroke-linecap:round}.tp-dpc{fill:none;stroke:#111;stroke-width:3}
.tp-face{fill:none;stroke:var(--yellow-ink);stroke-width:2;stroke-dasharray:3 3}

/* Teach me pictures: real materials, kit and sign colours (teach-pics.js). The Evia colour only where colour means nothing. */
.tp-crk{fill:none;stroke:#1d2330;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.tp-bktl{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round}
.tp-rim{fill:none;stroke:#0d0f12;stroke-width:1.8}.tp-wire{fill:none;stroke:#98a1ab;stroke-width:1.3}.tp-edge{stroke:rgba(0,0,0,.22);stroke-width:1}.tp-shank{fill:none;stroke:#4b5563;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.tp-sheen{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.2;stroke-linecap:round}.tp-pour{fill:none;stroke:#7fb6e6;stroke-width:4;stroke-linecap:round}
.tp-arrow,.tp-arrowh{fill:none;stroke:var(--yellow-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tp-chev{fill:none;stroke:#98a2b3;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tp-num{fill:var(--yellow)}html body .tp .tp-numt{fill:var(--ui-on-accent);font-size:11px;font-weight:800}
.tp-okm{fill:none;stroke:var(--yellow-ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.tp-frame{fill:none;stroke:#3a4250;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.tp-frame2{fill:none;stroke:#8792a2;stroke-width:3;stroke-linecap:round}
.tp-shaft{fill:none;stroke:#3a4250;stroke-width:3;stroke-linecap:round}.tp-wheel3{fill:none;stroke:#2b3240;stroke-width:3.2}.tp-vent{fill:none;stroke:#aeb6c0;stroke-width:1.6;stroke-linecap:round}.tp-teeth{stroke:#9aa3ad;stroke-width:1.2}.tp-lip{fill:none;stroke:#1f2530;stroke-width:1.8}
.tp-go{fill:#1fae5c;stroke:#0f5f33;stroke-width:1}.tp-lead{fill:none;stroke:#2b3240;stroke-width:2.4;stroke-linecap:round}
.tp-pipe{fill:none;stroke:#8792a2;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.tp-hose{fill:none;stroke:#2f7fd1;stroke-width:3.4;stroke-linecap:round}.tp-toe{fill:none;stroke:#5b6370;stroke-width:1.4}.tp-strap{fill:none;stroke:#23303f;stroke-width:2.4}.tp-strap2{fill:none;stroke:#8a939e;stroke-width:1.2}
.tp-sb{fill:#1c5ea8}.tp-sr{fill:#d52b1e}.tp-sy{fill:#f9b800}.tp-sg{fill:#0f8a4a}.tp-sw{fill:#fff}.tp-sk{fill:#111}
.tp-syl{stroke:#111;stroke-width:6;stroke-linejoin:round}.tp-srl{fill:none;stroke:#d52b1e;stroke-width:10}
.tp-skl{fill:none;stroke:#111;stroke-width:3.4;stroke-linecap:round}.tp-swl{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round}.tp-sbl{fill:none;stroke:#1c5ea8;stroke-width:2}
html body .tp .tp-xs{font-size:9.5px;font-weight:600;fill:var(--ui-muted)}html body .tp .tp-sm{font-size:10px;font-weight:700;fill:var(--ui-ink)}
html body .tp .tp-mid{font-size:24px;font-weight:800;fill:var(--ui-ink)}html body .tp .tp-ok{fill:var(--yellow-ink);font-weight:800}
.tp-pop{animation:tpPop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--d) * 140ms + 150ms);transform-box:fill-box;transform-origin:50% 100%}
@keyframes tpPop{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:1;transform:none}}
.tp-slide{animation:tpSlide 2.4s ease-in-out infinite}
@keyframes tpSlide{0%,100%{transform:translateX(-10px)}50%{transform:translateX(12px)}}
.tp-fall circle,.tp-drop circle{animation:tpFall 1.5s ease-in infinite}.tp-fall circle:nth-child(2),.tp-drop circle:nth-child(2){animation-delay:.5s}.tp-fall circle:nth-child(3){animation-delay:1s}
@keyframes tpFall{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(26px);opacity:0}}
.tp-dig{animation:tpDig 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%}
@keyframes tpDig{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.tp-pop,.tp-slide,.tp-fall circle,.tp-drop circle,.tp-dig{animation:none!important}}
.tp-rain path{stroke:#7fb6e6;stroke-width:2;stroke-linecap:round}.tp-fold{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2;stroke-linecap:round}
.tp-face2{fill:#fff;stroke:var(--ui-ink);stroke-width:2.2}.tp-arc{fill:var(--soft);stroke:var(--yellow);stroke-width:2}.tp-tickc{stroke:var(--ui-ink);stroke-width:2;stroke-linecap:round}
.tp-hand2{fill:none;stroke:var(--ui-ink);stroke-width:3;stroke-linecap:round}.tp-hub2{fill:var(--ui-ink)}

/* Teach me games (teach-play.js): teach, try, feedback, challenge, review. Colours follow Evia's; right is her
   colour, wrong is orange, and every result also has a tick or a cross so colour is never the only clue. */
.tm-is{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tm-if{fill:currentColor}
.tm-pill{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px 0 8px;border-radius:999px;background:#fff;border:1px solid var(--pm-hair,rgba(16,24,40,.08));font-size:14px;font-weight:800;color:var(--ui-ink);font-variant-numeric:tabular-nums}
.tm-pill svg{width:18px;height:18px}.tm-pill.fire svg{color:#c9c6bd}.tm-pill.fire.lit svg,.tm-pill.xp svg{color:var(--yellow)}
/* The lesson bar: progress, a flame for answers in a row, sounds on or off, and XP */
.tm-lbar{gap:10px}
.tm-prog i{position:relative}.tm-prog i::before{content:"";position:absolute;left:8px;right:8px;top:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.tm-prog.rev i{background:repeating-linear-gradient(45deg,var(--yellow) 0 10px,color-mix(in srgb,var(--yellow) 65%,#fff) 10px 20px)}
.tm-combo{flex:none;display:inline-flex;align-items:center;gap:1px;font-size:15px;font-weight:800;color:var(--yellow-ink);font-variant-numeric:tabular-nums}
.tm-combo[hidden]{display:none}.tm-combo svg{width:20px;height:20px;color:var(--yellow)}
.tm-snd{flex:none;width:36px;height:36px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--pm-hair,rgba(16,24,40,.08));display:grid;place-items:center;color:var(--ui-muted);cursor:pointer}
.tm-snd svg{width:19px;height:19px}
.tm-xp{flex:none;display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 10px 0 6px;border-radius:999px;background:var(--soft);color:var(--yellow-ink);font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums}
.tm-xp svg{width:18px;height:18px;color:var(--yellow)}
.tm-xp.bump,.tm-combo.bump{animation:tmBump .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes tmBump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.tm-toast{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 58px);z-index:6;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--ui-ink);color:#fff;font-size:15px;white-space:nowrap;box-shadow:0 10px 30px rgba(16,24,40,.25);transform:translate(-50%,-16px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.tm-toast.on{transform:translate(-50%,0);opacity:1}.tm-toast svg{width:20px;height:20px;color:var(--yellow)}.tm-toast span{color:var(--yellow);font-weight:800}
.tm-pop{position:fixed;z-index:20;font-size:15px;font-weight:900;color:var(--yellow-ink);text-shadow:0 1px 0 #fff,0 0 8px #fff,0 0 12px #fff;pointer-events:none;white-space:nowrap;animation:tmPopUp .9s ease-out forwards}
@keyframes tmPopUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}20%{opacity:1;transform:translate(-50%,-90%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-280%) scale(1)}}
.tm-burst{position:fixed;z-index:19;width:0;height:0;pointer-events:none}
.tm-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:tmRay .6s ease-out forwards}
.tm-burst i:nth-child(odd){background:var(--yellow-ink);width:6px;height:6px}
@keyframes tmRay{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-48px) scale(.4)}}
.tm-shake{animation:tmShake .4s ease}
.tm-step.tm-enter>*{animation:tmIn .32s ease both}.tm-step.tm-enter>*:nth-child(2){animation-delay:.05s}.tm-step.tm-enter>*:nth-child(3){animation-delay:.1s}.tm-step.tm-enter>*:nth-child(4){animation-delay:.15s}
/* The footer: feedback slides up with a tick or a cross */
.tm-foot.empty{display:none}
.tm-btns{display:flex;gap:10px}.tm-btns .tm-go{flex:1}
.tm-btns:empty{display:none}
.tm-fb-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ui-on-accent)}
.tm-fb.no .tm-fb-ic{background:#f79009;color:#fff}.tm-fb-ic svg{width:18px;height:18px;stroke-width:3}
.tm-fb-top .tm-evia{margin-left:auto}
.tm-happy .tm-fb-ic{animation:tmBump .45s cubic-bezier(.3,1.8,.5,1)}
/* Teaching screens */
.tm-says{display:flex;align-items:flex-start;gap:10px}
.tm-says .tm-evia{flex:none;margin-top:4px}
.tm-card .tm-says p,.tm-says p{flex:1;margin:0;padding:12px 14px;border-radius:4px 18px 18px 18px;background:var(--soft);font-size:16px;line-height:1.5;color:var(--ui-ink)}
.tm-k{color:var(--yellow-ink);font-weight:800}
.tm-new{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--yellow);color:var(--ui-on-accent);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tm-new svg{width:14px;height:14px}
.tm-art{position:relative;margin:0 auto;width:100%}
.tm-art>.tp{width:100%;height:100%;max-height:none}
.tm-pic.bare{padding:0;border:0;background:none}
.tm-spot{position:absolute;z-index:1;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;border-radius:50%;border:2px solid #fff;background:var(--yellow);color:var(--ui-on-accent);font-size:11px;font-weight:900;line-height:1;display:grid;place-items:center;box-shadow:0 2px 6px rgba(16,24,40,.3);cursor:pointer;transition:transform .15s ease,opacity .2s ease}
/* Small pins so the drawing shows through: a bigger invisible area takes the tap, and a thin ring pulses round the ones not seen yet. */
.tm-spot::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.tm-spot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--yellow);animation:tmPulse 1.6s ease-out infinite;pointer-events:none}
.tm-spot.seen{background:var(--yellow-ink);color:#fff;opacity:.55;transform:scale(.85)}.tm-spot.seen::after{display:none}
.tm-spot.on{opacity:1;transform:scale(1.1);z-index:2}.tm-spot.on::after{display:block;animation:none;inset:-9px;border:2px solid var(--yellow-ink);background:transparent}
/* In explore mode the drawing's own labels are what the learner finds by tapping, so they're hidden here. */
.tm-art.explore .tp-lead,.tm-art.explore .tp-leaddot,.tm-art.explore .tp-cl{display:none}
.tm-reveal{min-height:78px}
.tm-hint{display:flex;align-items:center;gap:8px;margin:0;padding:12px 2px;color:var(--ui-muted);font-size:14.5px}.tm-hint svg{width:22px;height:22px;flex:none}
.tm-reveal-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:#fff;border:2px solid var(--yellow-line);animation:tmIn .25s ease both}
.tm-reveal-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--yellow-ink);color:#fff;font-size:13px}
.tm-reveal-card strong{display:block;font-size:16px;color:var(--ui-ink)}
.tm-card .tm-reveal-card p{margin:2px 0 0;font-size:15px;line-height:1.45;color:var(--ui-text)}
.tm-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.tm-dots i{width:8px;height:8px;border-radius:999px;background:#dcdad3;transition:width .25s ease,background .25s ease}
.tm-dots i.on{background:var(--yellow-ink)}.tm-dots i.now{width:22px;background:var(--yellow)}
.tm-flip{position:relative;display:block;width:100%;min-height:220px;padding:0;border:0;background:none;perspective:900px;cursor:pointer}
.tm-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,1.2,.4,1);text-align:center}
.tm-face.front{background:#fff;border:2px solid #e6e4de;box-shadow:0 6px 0 #e6e4de}
.tm-face.back{background:var(--soft);border:2px solid var(--yellow-line);box-shadow:0 6px 0 var(--yellow-line);transform:rotateY(180deg)}
.tm-flip.on .tm-face.front{transform:rotateY(-180deg)}.tm-flip.on .tm-face.back{transform:rotateY(0)}
.tm-face strong{font-size:24px;letter-spacing:-.01em;color:var(--ui-ink)}.tm-face.back strong{font-size:18px;color:var(--yellow-ink)}
.tm-card .tm-face p{margin:0;font-size:16px;line-height:1.5;color:var(--ui-ink)}
.tm-face small{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ui-muted)}.tm-face small svg{width:15px;height:15px}
.tm-face .tm-pic.bare{width:52%}
/* Pick an answer */
.tm-opt.tried{opacity:.45}
.tm-opt.show,.tm-lopt.show,.tm-tok.show{animation:tmGlow 1s ease 2}
@keyframes tmGlow{0%,100%{box-shadow:0 3px 0 var(--yellow-ink)}50%{box-shadow:0 3px 0 var(--yellow-ink),0 0 0 6px color-mix(in srgb,var(--yellow) 35%,transparent)}}
.tm-opts.pics.three{grid-template-columns:repeat(3,1fr)}
.tm-opts.pics .tm-opt{padding:10px 8px;gap:4px}.tm-opts.pics .tm-opt span{font-size:15px;font-weight:800}
.tm-opt .tm-pic.bare,.tm-opt .tm-art{width:100%}
.tm-seq{list-style:none;margin:10px 0 16px;padding:0}
.tm-seq li{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;border:1.5px solid var(--pm-hair,rgba(16,24,40,.1));font-size:15px;font-weight:600;color:var(--ui-text)}
.tm-seq li+li{margin-top:14px}.tm-seq li+li::before{content:"";position:absolute;left:23px;top:-14px;width:2px;height:13px;background:#d5d3cc}
.tm-seq b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#efeee9;color:var(--ui-muted);font-size:12px}
.tm-seq li.q{border:2px dashed var(--yellow);background:var(--soft);color:var(--yellow-ink);font-size:17px;font-weight:900}.tm-seq li.q b{background:var(--yellow);color:var(--ui-on-accent)}
.tm-scene{margin-bottom:16px}.tm-scene .tm-pic{margin-bottom:12px}
.tm-who{display:flex;align-items:flex-start;gap:10px}
.tm-av{flex:none;width:44px;height:44px}.tm-av svg{display:block;width:100%;height:100%}
.tm-av-bg{fill:var(--soft)}.tm-av-vest{fill:#f47c20}.tm-av-head{fill:#e8c4a0}.tm-av-hat{fill:#fff;stroke:#1f2530;stroke-width:1.2}
.tm-bub{flex:1;padding:10px 14px;border-radius:4px 18px 18px 18px;background:#fff;border:1.5px solid var(--pm-hair,rgba(16,24,40,.1));box-shadow:var(--pm-shadow)}
.tm-bub small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow-ink)}
.tm-bub p{margin:3px 0 0;font-size:16px;line-height:1.45;color:var(--ui-ink)}
.tm-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tm-lopt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border-radius:14px;background:#fff;border:2px solid #e6e4de;box-shadow:0 3px 0 #e6e4de;text-align:left;font-size:15.5px;line-height:1.4;font-weight:600;color:var(--ui-ink);cursor:pointer}
.tm-lopt b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#efeee9;color:var(--ui-muted);font-size:12px}
.tm-lopt.right{border-color:var(--yellow-ink);background:var(--soft);box-shadow:0 3px 0 var(--yellow-ink)}.tm-lopt.right b{background:var(--yellow);color:var(--ui-on-accent)}
.tm-lopt.wrong{border-color:#f79009;background:#fff4e5;animation:tmShake .4s ease}
.tm-lopt.fine{opacity:.5}
.tm-tapline{margin:10px 0 0;font-size:24px;line-height:2.1;text-align:center;font-weight:700;color:var(--ui-ink)}
.tm-tapline.long{font-size:18px;text-align:left}
.tm-tok{display:inline-block;min-width:48px;min-height:46px;margin:2px;padding:2px 14px;border-radius:12px;border:2px solid #e6e4de;background:#fff;box-shadow:0 3px 0 #e6e4de;font:inherit;font-weight:800;color:var(--ui-ink);cursor:pointer}
.tm-tok.right{border-color:var(--yellow-ink);background:var(--soft);color:var(--yellow-ink);box-shadow:0 3px 0 var(--yellow-ink)}
.tm-tok.wrong{border-color:#f79009;background:#fff4e5;color:#b54708;animation:tmShake .4s ease}.tm-tok.tried{opacity:.4}
.tm-punct{font-weight:800;color:var(--ui-muted);margin:0 2px}
/* Tiles: fill the gap, build it, label it */
.tm-drag{touch-action:none;user-select:none;-webkit-user-select:none}
.tm-ghost{position:fixed;z-index:30;margin:0!important;pointer-events:none;box-shadow:0 14px 30px rgba(16,24,40,.25)!important;opacity:.96;transition:none!important;animation:none!important}
.tm-lifted{opacity:.3}
.tm-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.tm-wt{min-height:44px;padding:8px 14px;border-radius:12px;background:#fff;border:2px solid #e6e4de;box-shadow:0 3px 0 #e6e4de;font-size:16px;font-weight:700;color:var(--ui-ink);cursor:pointer;animation:tmIn .25s ease both}
.tm-wt.used{background:#efeee9;border-color:#efeee9;box-shadow:none;color:transparent;animation:none}
.tm-wt.on{border-color:var(--yellow);background:var(--soft);box-shadow:0 3px 0 var(--yellow)}
.tm-wt.right{border-color:var(--yellow-ink);background:var(--soft);box-shadow:0 3px 0 var(--yellow-ink)}
.tm-wt.wrong{border-color:#f79009;background:#fff4e5;box-shadow:0 3px 0 #f79009}
.tm-gapline{margin:6px 0 0;font-size:19px;line-height:2.5;font-weight:600;color:var(--ui-ink)}
.tm-gap{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-width:88px;min-height:42px;margin:0 3px;padding:4px 12px;border-radius:10px;border:2px solid transparent;border-bottom:3px solid #c9c6bd;background:#f1f0ec;font:inherit;font-size:17px;font-weight:800;color:var(--ui-ink);cursor:pointer}
.tm-gap i{display:block;width:40px}
.tm-gap.filled{background:#fff;border-color:var(--yellow)}.tm-gap.tm-over{background:var(--soft);border-color:var(--yellow)}
.tm-gap.right{border-color:var(--yellow-ink);background:var(--soft);color:var(--yellow-ink)}
.tm-gap.wrong{border-color:#f79009;background:#fff4e5;color:#b54708;animation:tmShake .4s ease}
.tm-built{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;min-height:112px;padding:8px 2px;border-top:2px solid #e9e7e1;border-bottom:2px solid #e9e7e1;background:repeating-linear-gradient(transparent 0 53px,#e9e7e1 53px 55px)}
.tm-built.tm-over{background-color:var(--soft)}
.tm-built-hint{margin:auto;align-self:center;color:var(--ui-faint,#98a2b3);font-size:14.5px}
.tm-slot.tm-over{border-color:var(--yellow);background:var(--soft)}
.tm-leads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tm-leads path{fill:none;stroke:var(--ui-ink);stroke-width:1.3;vector-effect:non-scaling-stroke}.tm-leads circle{fill:var(--ui-ink)}
.tm-drop{position:absolute;z-index:1;translate:-50% -50%;min-width:40px;max-width:32%;min-height:28px;padding:3px 7px;border-radius:9px;border:2px dashed #b9b6ad;background:rgba(255,255,255,.96);font-size:11.5px;font-weight:800;line-height:1.15;color:var(--ui-muted);cursor:pointer;display:grid;place-items:center;text-align:center}
.tm-drop.filled{border-style:solid;border-color:var(--yellow);color:var(--ui-ink)}
.tm-drop.on,.tm-drop.tm-over{border-style:solid;border-color:var(--yellow);background:var(--soft);scale:1.08}
.tm-drop.right{border-style:solid;border-color:var(--yellow-ink);background:var(--soft);color:var(--yellow-ink)}
.tm-drop.wrong{border-style:solid;border-color:#f79009;background:#fff4e5;color:#b54708;animation:tmShake .4s ease}
/* Tap the picture */
.tm-art.hot{cursor:pointer}
/* In tap and label questions, a picture's own callouts would give the answer away: hide them. */
.tm-art.hot .tp-lead,.tm-art.hot .tp-leaddot,.tm-art.label .tp-lead,.tm-art.label .tp-leaddot,.tm-art.label .tp-cl{display:none}
.tm-hit{position:absolute;z-index:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.tm-hit:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.tm-mark{position:absolute;z-index:2;width:0;height:0;pointer-events:none}
.tm-mark.x::before{content:"✕";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#f79009;color:#fff;font-size:14px;font-weight:900;animation:tmPopIn .3s cubic-bezier(.3,1.6,.5,1) both}
.tm-mark.ring::before{content:"";position:absolute;left:-30px;top:-30px;width:60px;height:60px;box-sizing:border-box;border-radius:50%;border:4px solid var(--yellow);box-shadow:0 0 0 3px rgba(255,255,255,.8),inset 0 0 0 3px rgba(255,255,255,.8);animation:tmPopIn .35s cubic-bezier(.3,1.6,.5,1) both}
.tm-mark.ring.show::before{animation:tmPopIn .35s cubic-bezier(.3,1.6,.5,1) both,tmBump .8s ease .4s 2}
@keyframes tmPopIn{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
/* Drag the right amounts in */
.tm-load{position:relative;min-height:132px;margin:6px 0 14px;padding:14px 12px 30px;border-radius:18px;background:linear-gradient(#e7cfa6,#d8b98b);border:2px solid #b99468;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s ease}
.tm-load.tm-over,.tm-load.show{box-shadow:0 0 0 4px var(--yellow)}
.tm-load-l{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6d5234}
.tm-load-in{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.tm-load-g{display:flex;flex-direction:column;align-items:center;gap:4px}
.tm-load-row{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:200px}
.tm-load-b{width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer}
.tm-load-b.pop{animation:tmPopIn .35s cubic-bezier(.3,1.6,.5,1) both}
.tm-load-g em{font-style:normal;font-size:13px;font-weight:800;color:#4a3a26;background:rgba(255,255,255,.75);padding:1px 9px;border-radius:999px}
.tm-load-hint{font-size:14px;font-weight:700;color:#6d5234}
.tm-srcs{display:flex;justify-content:center;gap:12px}
.tm-src{display:flex;flex-direction:column;align-items:center;gap:2px;width:108px;padding:10px 8px;border-radius:16px;background:#fff;border:2px solid #e6e4de;box-shadow:0 4px 0 #e6e4de;font-size:14px;font-weight:800;color:var(--ui-ink);cursor:grab}
.tm-src .tm-pic.bare{width:56px}.tm-src:active{transform:translateY(2px);box-shadow:0 2px 0 #e6e4de}
.tm-undo{display:flex;align-items:center;gap:6px;margin:12px auto 0;padding:6px 12px;border-radius:999px;background:none;border:0;color:var(--ui-muted);font-size:13.5px;font-weight:700;cursor:pointer}
.tm-undo svg{width:16px;height:16px}
/* Match with pictures */
.tm-m.pic{display:grid;place-items:center;padding:6px}.tm-m .tm-pic.bare{width:62px}
/* Sort it, and good or bad */
.tm-sort{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:200px}
.tm-sort-n{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
.tm-sort-slot{width:100%;display:flex;justify-content:center}
.tm-sortcard{width:min(100%,300px);min-height:124px;padding:16px 18px;border-radius:20px;background:#fff;border:2px solid #e6e4de;box-shadow:0 6px 0 #e6e4de,0 12px 24px rgba(16,24,40,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;cursor:grab;animation:tmCardIn .35s cubic-bezier(.3,1.4,.5,1) both}
.tm-sortcard p{margin:0;font-size:17px;line-height:1.4;font-weight:700;color:var(--ui-ink)}
.tm-sortcard .tm-pic.bare{width:112px}
.tm-sortcard.gone{animation:tmCardOut .3s ease forwards}.tm-sortcard.wrong{border-color:#f79009;animation:tmShake .4s ease}
@keyframes tmCardIn{from{opacity:0;transform:translateY(24px) scale(.92) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes tmCardOut{to{opacity:0;transform:translateY(70px) scale(.6)}}
.tm-sort-why{min-height:20px;margin:0;font-size:14px;line-height:1.4;color:var(--ui-text);text-align:center}
.tm-sort-why b{color:var(--yellow-ink)}.tm-sort-why svg{width:15px;height:15px;vertical-align:-2px;margin-right:3px}
.tm-bins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tm-bins.two{grid-template-columns:1fr 1fr}
.tm-bins.five{grid-template-columns:repeat(6,1fr)}.tm-bins.five .tm-bin{grid-column:span 2}.tm-bins.five .tm-bin:nth-child(4){grid-column:2/span 2}.tm-bins.five .tm-bin:nth-child(5){grid-column:4/span 2}
.tm-bin{position:relative;min-height:60px;padding:10px 6px;border-radius:16px;background:#fff;border:2px dashed #cfccc3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:800;line-height:1.2;color:var(--ui-ink);cursor:pointer;transition:transform .1s ease}
.tm-bins.two .tm-bin{min-height:76px;font-size:16px;border-style:solid}
.tm-bin svg{width:28px;height:28px}.tm-bin.good svg{color:var(--yellow-ink)}.tm-bin.bad svg{color:#b54708}
.tm-bin em{position:absolute;top:-9px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--yellow);color:var(--ui-on-accent);font-style:normal;font-size:12px;display:none;place-items:center}
.tm-bin.has em{display:grid}
.tm-bin.got{animation:tmBump .4s cubic-bezier(.3,1.8,.5,1);border-style:solid;border-color:var(--yellow)}
.tm-bin.hint{border-style:solid;border-color:var(--yellow-ink);background:var(--soft);animation:tmGlow 1s ease 2}
.tm-bin.tm-over{border-color:var(--yellow);background:var(--soft)}.tm-bin:active{transform:scale(.97)}
/* Quick fire */
.tm-qf-intro,.tm-banner{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:36px;text-align:center}
.tm-qf-ic,.tm-banner-ic{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ui-on-accent);box-shadow:0 12px 34px color-mix(in srgb,var(--yellow) 45%,transparent);animation:tmJump .8s cubic-bezier(.3,1.6,.5,1) both}
.tm-qf-ic svg,.tm-banner-ic svg{position:relative;width:50px;height:50px}
.tm-qf-intro h2,.tm-banner h2{margin:14px 0 0;font-size:28px;letter-spacing:-.02em;color:var(--ui-ink)}
.tm-qf-intro p,.tm-banner p{margin:0;max-width:320px;font-size:16px;line-height:1.5;color:var(--ui-text)}
.tm-qf{display:flex;flex-direction:column;gap:14px}
.tm-timer{height:10px;border-radius:999px;background:#ebeae5;overflow:hidden}
.tm-timer i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--yellow);transition:width linear}
.tm-timer.late i{background:#d5d3cc}
.tm-qf-top{display:flex;justify-content:space-between;align-items:center;min-height:20px;font-size:13px;font-weight:800;color:var(--ui-muted)}
.tm-qf-s{display:inline-flex;align-items:center;gap:3px;color:var(--yellow-ink)}.tm-qf-s svg{width:16px;height:16px;color:var(--yellow)}
.tm-qf-card{min-height:136px;padding:22px 18px;border-radius:22px;background:#fff;border:2px solid #e6e4de;box-shadow:0 6px 0 #e6e4de;display:grid;place-items:center;text-align:center}
.tm-qf-card p{margin:0;font-size:19px;line-height:1.4;font-weight:700;color:var(--ui-ink);animation:tmIn .2s ease both}
.tm-qf-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tm-qbtn{min-height:64px;border-radius:18px;background:#fff;border:2px solid #e6e4de;box-shadow:0 4px 0 #e6e4de;font-size:18px;font-weight:800;color:var(--ui-ink);cursor:pointer}
.tm-qbtn:active{transform:translateY(2px)}
.tm-qbtn.right{border-color:var(--yellow-ink);background:var(--soft);box-shadow:0 4px 0 var(--yellow-ink)}
.tm-qbtn.wrong{border-color:#f79009;background:#fff4e5;box-shadow:0 4px 0 #f79009;animation:tmShake .4s ease}
/* Splashes: quick challenge, surprise, fix your mistakes, unit challenge */
.tm-rays{position:absolute;inset:-28px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--yellow) 35%,transparent) 0 10deg,transparent 10deg 30deg);-webkit-mask:radial-gradient(circle,transparent 50px,#000 51px);mask:radial-gradient(circle,transparent 50px,#000 51px);animation:tmSpin 9s linear infinite}
@keyframes tmSpin{to{transform:rotate(1turn)}}
.tm-banner.review .tm-banner-ic{background:#fff;color:var(--yellow-ink);border:3px solid var(--yellow)}
.tm-banner.trophy .tm-banner-ic{width:112px;height:112px}
.tm-banner-xp{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--yellow-ink);font-size:14px;font-weight:800}
.tm-banner-xp svg{width:16px;height:16px;color:var(--yellow)}
/* The end of a lesson: XP, accuracy, time, the streak and this week, badges */
.tm-stats.three{grid-template-columns:repeat(3,1fr);max-width:360px}
.tm-stats.three div{align-items:center;padding:12px 8px}
.tm-stats.three svg{width:20px;height:20px;color:var(--yellow-ink)}.tm-stats.three .xp svg{color:var(--yellow)}
.tm-stats.three b{font-size:23px}
.tm-streak{width:100%;max-width:360px;margin-top:12px;padding:14px;border-radius:18px;background:#fff;border:2px solid var(--yellow-line)}
.tm-streak-top{display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:700;color:var(--ui-text)}
.tm-streak-top svg{width:26px;height:26px;color:var(--yellow)}.tm-streak-top b{font-size:24px;color:var(--ui-ink)}
.tm-streak.up .tm-streak-top svg{animation:tmFlame 1s ease-in-out .5s 2}
@keyframes tmFlame{0%,100%{transform:scale(1)}50%{transform:scale(1.35) rotate(-8deg)}}
.tm-week{display:flex;justify-content:space-between;margin-top:10px}
.tm-day{display:flex;flex-direction:column;align-items:center;gap:4px}
.tm-day i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#efeee9;color:var(--ui-on-accent)}
.tm-day.on i{background:var(--yellow)}.tm-day i svg{width:16px;height:16px;stroke-width:3}
.tm-day small{font-size:11px;font-weight:800;color:var(--ui-muted)}.tm-day.today small{color:var(--yellow-ink)}
.tm-day.today i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--yellow)}
.tm-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:360px;margin-top:12px}
.tm-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--soft);border:1.5px solid var(--yellow-line);font-size:13.5px;font-weight:800;color:var(--yellow-ink);animation:tmPopIn .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.6s + var(--k) * .15s)}
.tm-badge svg{width:17px;height:17px}.tm-badge .tm-if{color:var(--yellow)}
.tm-node.trophy .tm-dot svg{width:34px;height:34px}
.tm-node.trophy.done .tm-dot{background:var(--yellow);color:var(--ui-on-accent);box-shadow:0 6px 0 var(--yellow-ink)}
@media (prefers-reduced-motion:reduce){.tm-step.tm-enter>*,.tm-spot::after,.tm-rays,.tm-banner-ic,.tm-qf-ic,.tm-sortcard,.tm-badge,.tm-xp.bump,.tm-combo.bump,.tm-load-b.pop,.tm-mark::before,.tm-wt,.tm-pop,.tm-burst{animation:none!important}.tm-face,.tm-toast{transition:none!important}.tm-pop,.tm-burst{display:none}}
.tm-load.mixer{background:linear-gradient(color-mix(in srgb,var(--yellow) 22%,#fff),color-mix(in srgb,var(--yellow) 40%,#fff));border-color:var(--yellow-ink)}
.tm-load.mixer .tm-load-l,.tm-load.mixer .tm-load-hint{color:var(--yellow-ink)}
.tm-node button{max-width:min(300px,82vw)}.tm-label small{white-space:normal}
.tp-spall{fill:#e2a585;stroke:#9c4f35;stroke-width:.8}.tp-salt ellipse{fill:rgba(255,255,255,.78)}.tp-erode{fill:none;stroke:#5e4a3e;stroke-width:2.6}
.tp-string{fill:none;stroke:#e2483d;stroke-width:1.4}.tp-string2{fill:none;stroke:#e2483d;stroke-width:1.6;stroke-dasharray:4 3}.tp-dripg{fill:#fff;stroke:#1f2530;stroke-width:1}.tp-drop2 circle{fill:#7fb6e6}
.tp-tri{fill:color-mix(in srgb,var(--yellow) 14%,transparent);stroke:var(--yellow-ink);stroke-width:2}.tp-ground{fill:none;stroke:#6b4f2a;stroke-width:3}
.tp-mark{fill:none;stroke:var(--yellow-ink);stroke-width:2.2;stroke-dasharray:4 2}.tp-exw{fill:#d52b1e;stroke:#fff;stroke-width:1.5}.tp-exf{fill:#f3e3b3}.tp-exc{fill:#111}.tp-exp{fill:#1c5ea8}
.tp-horn{fill:none;stroke:#111;stroke-width:3;stroke-linejoin:round}.tp-hosex{fill:none;stroke:#111;stroke-width:2.4}.tp-weep{fill:#111}
.tp-filler{fill:#f3d36b}.tp-seal{fill:#2b3240}.tp-rake{fill:none;stroke:var(--ui-ink);stroke-width:1.2}
.tp-jointer{fill:none;stroke:#6b7280;stroke-width:4;stroke-linecap:round}.tp-pitch{fill:none;stroke:var(--yellow-ink);stroke-width:1.4;stroke-dasharray:5 3}.tp-brace{fill:none;stroke:#b07c43;stroke-width:9;stroke-linecap:square}
.tp-arch{fill:none;stroke:#fff;stroke-width:8}.tp-arch{stroke:#e9e4d8}
.tp-spindle{stroke:#cf9b5f;stroke-width:5}.tp-rail{stroke:#b07c43;stroke-width:9;stroke-linecap:round}.tp-sphere{fill:color-mix(in srgb,var(--yellow) 35%,transparent);stroke:var(--yellow-ink);stroke-width:1.5}.tp-blade2{stroke:#6b7280;stroke-width:2}.tp-zone1{fill:var(--yellow)}.tp-zone2{fill:color-mix(in srgb,var(--yellow) 45%,transparent)}.tp-holec{fill:#fff;stroke:#1f2530}.tp-cent{fill:none;stroke:#1f2530;stroke-width:.8;stroke-dasharray:4 3}.tp-valve{fill:#d52b1e}.tp-memb{fill:#2f6db5}.tp-memb2{fill:#2b3038}
.tp-airflow{fill:none;stroke:#7fb6e6;stroke-width:2;stroke-dasharray:4 3}.tp-scribe{fill:none;stroke:#7a5230;stroke-width:1.5}
.tp-vcl{fill:#e2483d}.tp-chamf{fill:rgba(255,255,255,.55);stroke:rgba(0,0,0,.25);stroke-width:.8}.tp-shadow2{fill:rgba(0,0,0,.28)}.tp-pipe3{fill:none;stroke:#c8642c;stroke-width:9;stroke-linecap:butt}.tp-bm{fill:var(--ui-ink);stroke:var(--ui-ink);stroke-width:1.6}.tp-teeth2{fill:none;stroke:#4b5563;stroke-width:1.4;stroke-linejoin:round}
.tp-rod{fill:none;stroke:#c8935a;stroke-width:4;stroke-linecap:round}.tp-gridl{stroke:rgba(16,24,40,.12);stroke-width:1}
.tp-floor{fill:#efe6d4}.tp-wallo{fill:none;stroke:var(--ui-ink);stroke-width:4}.tp-barx{fill:none;stroke:var(--yellow-ink);stroke-width:1.5}
.tp-pie1{fill:#c8935a}.tp-pie2{fill:#b85a3c}.tp-pie3{fill:#dfe3e8;stroke:#9aa1ab}.tp-pie4{fill:#8b939e}.tp-rail2{fill:none;stroke:#cf9b5f;stroke-width:6}
/* ---------- Teach me pictures: the Evia illustration style ----------
   Flat colour with soft shading, a thin outline in a deeper shade of each material (the same weight at any size),
   and a soft shadow under things that stand on the ground. The shading gradients are added to the page once by
   teach-pics.js (tpg-*); each fill also names a flat colour, used if a gradient can't be found. Line work (arrows,
   dimensions, strings) keeps its own weights further up. */
.tp-o,.tp-sand,.tp-dry2,.tp-bkt,.tp-steel,.tp-wood,.tp-tim,.tp-tim2,.tp-panel,.tp-door2,.tp-door3,.tp-string3,.tp-lint,.tp-deck,.tp-peg,.tp-board,.tp-ply,
.tp-brick,.tp-plan,.tp-block,.tp-conc,.tp-wallb,.tp-insul,.tp-glass,.tp-hole2,.tp-can,.tp-tape,.tp-lvl,.tp-glove,.tp-goggle,.tp-mask,.tp-drum,.tp-drum2,
.tp-barrow,.tp-pen,.tp-tub,.tp-guard,.tp-plug,.tp-hub,.tp-blade,.tp-motor,.tp-mach,.tp-table,.tp-metal,.tp-metal2,.tp-hang,.tp-hinge,.tp-silo2,
.tp-lintel,.tp-leadf,.tp-roof,.tp-scoop,.tp-navy,.tp-hivis,.tp-hat,.tp-head,.tp-trou,.tp-nitrile,.tp-lens,.tp-maskw,.tp-exbody,.tp-page,.tp-paper,
.tp-bubble,.tp-tubk,.tp-lid,.tp-tarp,.tp-gravel,.tp-trench,.tp-wallp2,.tp-mould,.tp-box,.tp-access,.tp-coping,.tp-sill,.tp-pot,.tp-pipe2,.tp-grey,
.tp-vial,.tp-grip2,.tp-spall,.tp-aircrete,.tp-frame3,.tp-sandwet,.tp-dry,.tp-wet,.tp-mix{stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-o,.tp-bkt,.tp-steel,.tp-can,.tp-tape,.tp-lvl,.tp-glove,.tp-goggle,.tp-mask,.tp-drum,.tp-drum2,.tp-barrow,.tp-pen,.tp-tub,.tp-guard,.tp-plug,.tp-hub,
.tp-blade,.tp-motor,.tp-mach,.tp-table,.tp-metal,.tp-metal2,.tp-hang,.tp-hinge,.tp-silo2,.tp-lintel,.tp-scoop,.tp-hat,.tp-exbody,.tp-page,.tp-bubble,
.tp-tubk,.tp-lid,.tp-coping,.tp-vial,.tp-grip2,.tp-wood,.tp-tim,.tp-tim2,.tp-panel,.tp-door2,.tp-door3,.tp-string3,.tp-lint,.tp-deck,.tp-peg,.tp-board,
.tp-brick,.tp-plan,.tp-block,.tp-conc,.tp-wallb,.tp-glass,.tp-navy,.tp-hivis,.tp-trou,.tp-nitrile,.tp-lens{stroke-width:1.25}
.tp-o{fill:none;stroke:#3b3630}

/* Mortar mixing */
.tp-sand{fill:url(#tpg-sand) #e6c07a;stroke:#b3873f;stroke-width:1}.tp-grain{fill:#b88d45}
.tp-cement{fill:#aeb4bc}.tp-lime{fill:#f3f0e8}.tp-water{fill:#86bde9}.tp-mix{fill:#b9ac93;stroke:#8c806a;stroke-width:1}
.tp-wet{fill:url(#tpg-wet) #8e887c;stroke:#5f5a50;stroke-width:1}.tp-dry{fill:url(#tpg-dry) #d0c29d;stroke:#9b8d6b;stroke-width:1}
.tp-dry2{fill:url(#tpg-dry) #cbbd98;stroke:#8f815f;stroke-width:1}.tp-sandwet{fill:#c29858;stroke:#8f6a33;stroke-width:1}
.tp-bin{fill:#15181d}.tp-bkt{fill:url(#tpg-bkt) #30353d;stroke:#101216}
.tp-tubk{fill:url(#tpg-tubk) #2b3038;stroke:#0f1114}.tp-lid{fill:#454c57;stroke:#0f1114}
.tp-board{fill:url(#tpg-wood2) #b98a55;stroke:#6e4726}.tp-ply{fill:#ead3aa;stroke:#a57e4a;stroke-width:1}.tp-ply2{fill:#c49d6c}
.tp-grey{fill:#e4ddcd;stroke:#8f8672;stroke-width:1.25}.tp-grey2{fill:#8b939e}
.tp-can{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}.tp-canh{fill:none;stroke:#3b3630;stroke-width:2.6;stroke-linejoin:round}
.tp-paper{fill:#fff;stroke:#a7afbb;stroke-width:1}
.tp-drum,.tp-drum2{fill:url(#tpg-yel) var(--yellow);stroke:#262b33}.tp-band{fill:rgba(0,0,0,.14)}
.tp-motor{fill:#5b6572;stroke:#262b33}.tp-ring{fill:#3a4250}.tp-hole{fill:#1b1f25}
.tp-silo2{fill:url(#tpg-mach) #e2e6eb;stroke:#3b3630}
.tp-barrow{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}.tp-tyre{fill:#262a30}
.tp-tarp{fill:url(#tpg-tarp) #2f6db5;stroke:#1d4a80;stroke-width:1.25}

/* Tools and kit */
.tp-steel{fill:url(#tpg-steel) #b9c0c8;stroke:#454d57}.tp-honed{fill:var(--yellow)}
.tp-wood{fill:url(#tpg-handle) #cf9356;stroke:#6e4726}.tp-grip{fill:none;stroke:#6e4726;stroke-width:3;stroke-linecap:round}
.tp-grip2{fill:#e2483d;stroke:#8f231b}
.tp-lvl{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}.tp-vial{fill:#c9f0a8;stroke:#3b3630;stroke-width:1}.tp-bub{fill:#fff}
.tp-tape{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}.tp-hub{fill:#fff;stroke:#3b3630}.tp-blade{fill:#f7e48a;stroke:#3b3630}
.tp-pen{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}
.tp-glove{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}
.tp-goggle{fill:url(#tpg-glass) #bfe0f5;stroke:#3b3630}.tp-mask{fill:url(#tpg-white) #f4f5f6;stroke:#3b3630}
.tp-scoop{fill:url(#tpg-steel) #c5ccd4;stroke:#454d57}
.tp-exbody{fill:url(#tpg-red) #d52b1e;stroke:#6e150e}.tp-exhead{fill:#2b3240}
.tp-plug{fill:#f5c518;stroke:#3b3630}.tp-cable{fill:none;stroke:#f5c518;stroke-width:3.2;stroke-linecap:round}
.tp-mach{fill:url(#tpg-mach) #dfe3e8;stroke:#3b3630}.tp-table{fill:url(#tpg-steeld) #8a929c;stroke:#3b3630}.tp-guard{fill:url(#tpg-yel) var(--yellow);stroke:#3b3630}
.tp-hinge{fill:url(#tpg-steel) #a3abb5;stroke:#3a4250}.tp-knob{fill:#5b6572}.tp-nail{fill:#2b3240}
.tp-metal{fill:url(#tpg-steel) #c5ccd4;stroke:#4b5563}.tp-metal2{fill:#e3e8ee;stroke:#4b5563}.tp-hang{fill:url(#tpg-steel) #b8c0c9;stroke:#3a4250}

/* People in PPE */
.tp-navy{fill:url(#tpg-navy) #344158;stroke:#1c2333}.tp-hivis{fill:url(#tpg-hivis) #f47c20;stroke:#a84c0b}.tp-refl{fill:#e6eaef}
.tp-hat{fill:url(#tpg-hatb) #2f6fcf;stroke:#173f73}.tp-head{fill:#efc9a4;stroke:#8a5a3c;stroke-width:1}
.tp-trou{fill:url(#tpg-trou) #3b4252;stroke:#1c2029}.tp-boot{fill:#22262c}
.tp-nitrile{fill:#4f79b3;stroke:#2d4a72}.tp-lens{fill:url(#tpg-glass) #cfe8f7;stroke:#23303f}.tp-maskw{fill:#fbfbfb;stroke:#8a939e;stroke-width:1.1}
.tp-bubble{fill:#fff;stroke:#3b3630}

/* Brick, block and concrete */
.tp-mortar{fill:#e2d9c7}.tp-mortar2{fill:#9d9786}.tp-mortar3{fill:#efe9dd}
.tp-b1{fill:#c0553a}.tp-b2{fill:#cd6645}.tp-b3{fill:#b04a33}
.tp-b1.tp-hd,.tp-b2.tp-hd,.tp-b3.tp-hd{fill:#963f28}.tp-b1.tp-cl,.tp-b2.tp-cl,.tp-b3.tp-cl{fill:#e0a283}
.tp-bw .tp-b1,.tp-bw .tp-b2,.tp-bw .tp-b3,.tp-bw .tp-rec{stroke:#7c311f}.tp-bw .tp-bf{stroke:#a07c45}
.tp-brick{fill:#c8603f;stroke:#7c311f}.tp-plan{fill:#d47f5c;stroke:#7c311f}.tp-sill{fill:#b35a3c;stroke:#6e2e1c;stroke-width:1.25}
.tp-bf{fill:#dcbc85}.tp-rec{fill:#7a3524}
.tp-block{fill:url(#tpg-block) #bcc2ca;stroke:#59616c}.tp-wallb{fill:url(#tpg-block) #b9bec6;stroke:#6b7280}
.tp-conc{fill:url(#tpg-conc) #c6cacf;stroke:#7d848d}.tp-aircrete{fill:#eeece6;stroke:#8a8f97;stroke-width:.8}
.tp-coping{fill:url(#tpg-conc) #c8c3b8;stroke:#3b3630}.tp-lintel{fill:url(#tpg-steeld) #7c8591;stroke:#2f353e;stroke-width:1.1}
.tp-insul{fill:url(#tpg-insul) #f3d36b;stroke:#a88520;stroke-width:1}
.tp-hole2{fill:#dfeaf3;stroke:#5b636e;stroke-width:1}
.tp-pot{fill:#b5653d;stroke:#6e3822;stroke-width:1.2}.tp-leadf{fill:#9aa3ad;stroke:#4b5563;stroke-width:1.1}
.tp-roof{fill:url(#tpg-roof) #7b8490;stroke:#2b3240;stroke-width:1.2}

/* Timber */
.tp-tim{fill:url(#tpg-wood) #e6b373;stroke:#7a5230}.tp-tim2{fill:url(#tpg-wood2) #d49d5c;stroke:#7a5230}
.tp-panel{fill:url(#tpg-wood2) #d9a46a;stroke:#7a5230}.tp-door3{fill:url(#tpg-wood) #e3b57c;stroke:#7a5230}
.tp-door2{fill:#f3e6cd;stroke:#7a5230}.tp-string3{fill:url(#tpg-wood2) #cf9b5f;stroke:#7a5230}
.tp-lint{fill:url(#tpg-wood2) #b07c43;stroke:#6b4524}.tp-deck{fill:#caa36b;stroke:#7a5230}.tp-peg{fill:url(#tpg-handle) #c8935a;stroke:#6e4726}
.tp-slot{fill:#5e3f22;stroke:#3f2a16;stroke-width:1;vector-effect:non-scaling-stroke}.tp-glass{fill:url(#tpg-glass) #d6ecf7;stroke:#7a5230}

/* Walls, ground and services */
.tp-wallp{fill:#f4efe5}.tp-wallp2{fill:#ebe5d8;stroke:#b0a795;stroke-width:1}.tp-mould{fill:#fff;stroke:#b3aa96;stroke-width:1}
.tp-box{fill:#f8f6f0;stroke:#a39a87;stroke-width:1.2}.tp-access{fill:#fff;stroke:#4b5563;stroke-width:1.2}.tp-frame3{fill:#f2f2ef;stroke:#a39a87;stroke-width:1}
.tp-soil{fill:#a98460}.tp-backfill{fill:#c2a47c}.tp-gravel{fill:#d6cdb8;stroke:#9b927c;stroke-width:1}.tp-trench{fill:#cdb18a;stroke:#8a6d45;stroke-width:1}
.tp-pipe2{fill:url(#tpg-copper) #c8793c;stroke:#7e4420;stroke-width:1}
.tp-page{fill:#fff;stroke:#3b3630}
.tp-shadow{fill:rgba(59,52,40,.13)}
.tp-bar{fill:url(#tpg-yel) var(--yellow);stroke:var(--yellow-ink);stroke-width:1}
.tp-pie1,.tp-pie2,.tp-pie3,.tp-pie4{stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
/* Tools and kit (teach-pics.js: trowelTop, levelTool, bolsterTool, clubHammer, gloveKit, maskKit and the rest) */
.tp-shine{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.5;stroke-linecap:round}.tp-shade{fill:rgba(40,30,18,.12)}.tp-lit{fill:rgba(255,255,255,.4)}
.tp-steeld,.tp-cap,.tp-vialw,.tp-cuff,.tp-valve2,.tp-sack,.tp-sackt,.tp-capk,.tp-hubw,.tp-rubber,.tp-hubm,.tp-gauge,.tp-lever{stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-steeld{fill:url(#tpg-steeld) #7c8591;stroke:#2f353e;stroke-width:1.25}.tp-cap{fill:#3a3f47;stroke:#1f2328;stroke-width:1.25}
.tp-vialw{fill:#2b3038;stroke:#1a1d22;stroke-width:1}.tp-vialx{fill:none;stroke:#2b3038;stroke-width:.8}
.tp-edgel{fill:none;stroke:rgba(30,26,20,.35);stroke-width:.9}
.tp-olk{fill:none;stroke:#3b3630;stroke-linecap:round;stroke-linejoin:round}.tp-stl{fill:none;stroke:#b9c0c9;stroke-linecap:round;stroke-linejoin:round}
.tp-seam{fill:none;stroke:rgba(30,26,20,.28);stroke-width:1;stroke-linecap:round}
.tp-cuff{fill:#8d96a3;stroke:#3b3630;stroke-width:1.25}.tp-rib{fill:none;stroke:rgba(20,24,30,.28);stroke-width:1}
.tp-arm{fill:none;stroke:#2f3540;stroke-width:3;stroke-linecap:round}.tp-brow{fill:none;stroke:#2f3540;stroke-width:3.6;stroke-linecap:round}
.tp-glint{fill:none;stroke:rgba(255,255,255,.95);stroke-width:2;stroke-linecap:round}
.tp-strapw{fill:none;stroke:#7f8a97;stroke-width:1.8;stroke-linecap:round}.tp-clip{fill:none;stroke:#9aa3ad;stroke-width:2.6;stroke-linecap:round}
.tp-valve2{fill:url(#tpg-steeld) #6d7682;stroke:#2f353e;stroke-width:1.25}.tp-slots{fill:none;stroke:#1f2328;stroke-width:1.2;stroke-linecap:round}
.tp-sack{fill:url(#tpg-sack) #e8e0cf;stroke:#7d7461;stroke-width:1.25}.tp-sackt{fill:#cfc4ad;stroke:#7d7461;stroke-width:1.25}.tp-stitch{fill:none;stroke:#8a806b;stroke-width:.8}
.tp-capk{fill:#2f343c;stroke:#15181c;stroke-width:1.25}
.tp-leg{fill:none;stroke:#3b3630;stroke-width:2.4;stroke-linecap:round}.tp-gripk{fill:#2b3038}.tp-hubw{fill:#c3cad2;stroke:#3b3630;stroke-width:1}
.tp-rimb{fill:none;stroke:#3b3630;stroke-width:2.6;stroke-linecap:round}
.tp-exbase{fill:#2b3240}.tp-lever{fill:#2b3240;stroke:#15181c;stroke-width:.8}.tp-gauge{fill:#fff;stroke:#2b3240;stroke-width:1.2}
.tp-rubber{fill:#3a3f47;stroke:#1f2328;stroke-width:1.25}.tp-hubm{fill:url(#tpg-steel) #c9ced6;stroke:#3b3630;stroke-width:1.25}.tp-screw{fill:#6d7682}
.tp-wrap{fill:none;stroke:#e2483d;stroke-width:1.5;stroke-linecap:round}
/* Realistic tools (drawn in millimetres and scaled down, so every outline keeps one screen weight) */
.tp-tool,.tp-brass,.tp-slotd,.tp-guard2,.tp-hhead{stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:1.25}
.tp-tool{fill:url(#tpg-tool) #f2c12e;stroke:#3b3630}.tp-brass{fill:url(#tpg-brass) #d9b458;stroke:#6e5418}
.tp-slotd{fill:#3a3f47;stroke:#1f2328;stroke-width:1}.tp-guard2{fill:url(#tpg-rubr) #d64533;stroke:#5c1a12}
.tp-hhead{fill:url(#tpg-hhead) #3d434b;stroke:#15181c}
.tp-shine,.tp-edgel,.tp-facet,.tp-ribw,.tp-vialx,.tp-lead{vector-effect:non-scaling-stroke}
.tp-facet{fill:none;stroke:rgba(20,24,30,.16);stroke-width:1}.tp-ribw{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2}
.tp-pencil{fill:none;stroke:#26303c;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 1.6}
/* Walls in section (teach-pics.js: leaf, pir, wallTie, dpcIn) */
.tp-bu,.tp-pir,.tp-clip2{stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-bu{fill:#c95f3f;stroke:#7c311f;stroke-width:.9}.tp-pir{fill:#f4e3a3;stroke:#b8942b;stroke-width:1}
.tp-foil{fill:none;stroke:#aeb7c1;stroke-width:1.8;vector-effect:non-scaling-stroke}
.tp-tie2{fill:none;stroke:#4b5563;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-clip2{fill:#eef1f4;stroke:#4b5563;stroke-width:1}.tp-dpc2{fill:#1f2328}
.tp-bplan{fill:#d67a55;stroke:#7c311f;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-peg2{fill:url(#tpg-wood2) #c8935a;stroke:#6e4726;stroke-width:1.1;vector-effect:non-scaling-stroke}
.tp-board2{fill:url(#tpg-wood) #e3b57c;stroke:#7a5230;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-batten{fill:#ecd2a8;fill-opacity:.8;stroke:#9c7a4d;stroke-width:1;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.tp-endg{fill:#d39a5e;stroke:#7a5230;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-slot2{fill:#b98552;stroke:#7a5230;stroke-width:1;vector-effect:non-scaling-stroke}.tp-slotin{fill:#8a5a2e;stroke:#5e3f22;stroke-width:1;vector-effect:non-scaling-stroke}
.tp-string4{fill:url(#tpg-wood2) #d7a768;fill-opacity:.55;stroke:#9c7a4d;stroke-width:1;vector-effect:non-scaling-stroke}
.tp-machd,.tp-machl,.tp-knobk,.tp-stop{vector-effect:non-scaling-stroke}.tp-machd{fill:#5b6572;stroke:#262b33;stroke-width:1.25}.tp-machl{fill:none;stroke:rgba(40,46,56,.3);stroke-width:1.2}
.tp-knobk{fill:#2b3038}.tp-blade3{stroke:#7b8591;stroke-width:1.6}.tp-stop{fill:#d52b1e;stroke:#7d1a12;stroke-width:1}
/* Callouts: a thin leader line ending in a dot on the thing it names */
.tp-lead{fill:none;stroke:#5b6472;stroke-width:.9}.tp-leaddot{fill:#3b3630}
html body .tp .tp-view{font-size:8.5px;font-weight:800;letter-spacing:.09em;fill:#8a93a1;text-anchor:start;text-transform:uppercase}
/* Textures laid over materials */
.tp-x-conc,.tp-x-block,.tp-x-soil,.tp-x-grainh,.tp-x-grainv{stroke:none;pointer-events:none}
.tp-x-conc{fill:url(#tpp-conc)}.tp-x-block{fill:url(#tpp-block)}.tp-x-soil{fill:url(#tpp-soil)}.tp-x-grainh{fill:url(#tpp-grainh)}.tp-x-grainv{fill:url(#tpp-grainv)}
.tp-olw{fill:none;stroke:#6e4726}.tp-olw.rc{stroke-linecap:round}.tp-olw.sq{stroke-linecap:square}.tp-olw.pipe{stroke:#7a3412}
.tp-eraser,.tp-woodtip{stroke:#3b3630;stroke-width:1.25;stroke-linejoin:round;vector-effect:non-scaling-stroke}.tp-eraser{fill:#ef9a9a}.tp-woodtip{fill:#f0d3a2}.tp-lead2{fill:#3b3630}

/* ---------- Five tabs: Course · Progress · Evia · Teach me · Rewards ---------- */
html body .bottom-nav{grid-template-columns:1fr 1fr 96px 1fr 1fr}
html body .bottom-nav .nav-icon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body .bottom-nav button{min-width:0}
@media(max-width:380px){html body .bottom-nav{grid-template-columns:1fr 1fr 84px 1fr 1fr}}
/* Teach me page: the course, maths and English */
.tt-list{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--ui-line,#e8ebef);overflow:hidden;margin-bottom:16px}
.tt-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 14px;cursor:pointer}.tt-card+.tt-card{border-top:1px solid var(--ui-line,#e8ebef)}
.tt-ic{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--yellow-ink)}
.tt-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tt-copy{flex:1;min-width:0}.tt-copy strong{display:block;font-size:16px;color:var(--ui-ink,#172033)}.tt-copy small{display:block;font-size:12.5px;color:var(--ui-muted,#667085);margin-top:2px}
.tt-bar{display:block;height:6px;margin-top:8px;border-radius:3px;background:#eef1f5;overflow:hidden}.tt-bar>i{display:block;height:100%;border-radius:3px;background:var(--yellow)}
.tt-chev{font-size:22px;color:#b5becb}
/* My progress: each section's ways in, under its card; the review card at the top. */
.pv-cell{display:flex;flex-direction:column;gap:8px}
.pv-acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px}
.pv-act{height:38px;padding:0 15px;border-radius:13px;font-weight:750;font-size:14px;background:#fff;border:1px solid var(--ui-line);color:var(--ui-ink);cursor:pointer;transition:transform .15s}
.pv-act.on{background:var(--ui-ink);border-color:var(--ui-ink);color:#fff}
.pv-act:active{transform:scale(.96)}
.pv-due{font-size:26px;font-weight:800;letter-spacing:-.02em}.pv-due.late{color:#c4320a}.pv-due.soon{color:var(--yellow-ink)}
.pv-card.pv-alert{border-color:var(--yellow-line);background:linear-gradient(180deg,#fff,var(--soft))}
.pv-rev-meta{font-size:13px;color:var(--ui-muted)}
/* ---------- Evia's four things ---------- */
@keyframes evFlash{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--yellow) 55%,transparent)}}
.ev-flash{animation:evFlash 1.6s ease 2;border-radius:14px}
.ev-check .ec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ev-lv{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px}.ev-lv.l0{background:#fde7e4;color:#b42318}.ev-lv.l1{background:var(--soft);color:var(--yellow-ink)}.ev-lv.l2{background:#dcf5e6;color:#0f6b3a}
.ev-sub{margin:10px 0 4px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted)}
.ev-check ul{margin:0;padding-left:18px;font-size:14px;line-height:1.45}.ev-good li::marker{content:"✓  ";color:#0f8a4a}.ev-miss li::marker{content:"○  ";color:var(--yellow-ink)}
.qr{display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid var(--ui-line);overflow:hidden}
.qr-row{display:flex;align-items:center;gap:12px;padding:11px 14px}.qr-row+.qr-row{border-top:1px solid var(--ui-line)}
.qr-row strong{display:block;font-size:14.5px;color:var(--ui-ink)}.qr-row small{display:block;font-size:12.5px;color:var(--ui-muted);margin-top:1px}
.qr-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}
.qr-row.ok .qr-ic{background:#dcf5e6;color:#0f6b3a}.qr-row.no .qr-ic{background:var(--soft);color:var(--yellow-ink)}
/* The discussion guide */
.dg-q{padding:14px;border-radius:16px;background:var(--ui-ink,#172033);color:#fff}.dg-q p{margin:6px 0 0;font-size:15px;line-height:1.45;font-weight:600}
.dg-stage{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.dg-model{margin-top:8px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--ui-line)}.dg-model p{margin:0;font-size:14.5px;line-height:1.6}
.dg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.dg-chips span{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:#dcf5e6;color:#0f6b3a}
.dg-chips span.no{background:#fde7e4;color:#b42318}
.dg-prompts{margin:8px 0 0;padding:12px 12px 12px 30px;border-radius:14px;background:var(--soft);font-size:14px;line-height:1.5;color:var(--yellow-ink)}
.dg-answer{width:100%;margin-top:8px;min-height:130px}.dg-check{margin-top:8px}
.dg-adv{margin:0;padding:12px 12px 12px 30px;border-radius:16px;background:#fff;border:1px solid var(--ui-line)}.dg-adv li+li{margin-top:8px}.dg-adv strong{display:block;font-size:14.5px}.dg-adv span{font-size:13.5px;color:var(--ui-muted);line-height:1.45}
/* EPA mode: the chat fades to dark grey, like an exam room. */
html body .chat-sheet,html body .chat-sheet #chat{transition:background-color .6s ease,color .6s ease}
html body #modal-root .overlay{transition:background-color .6s ease}
body.evia-epa #modal-root .overlay{background:rgba(12,14,18,.62)}
body.evia-epa .chat-sheet{background:#2b2f36!important;color:#eef0f3}
body.evia-epa .chat-sheet #chat{background:transparent!important}
body.evia-epa .chat-sheet .sheet-head h2,body.evia-epa .chat-sheet .chat-kicker{color:#eef0f3}
body.evia-epa .chat-sheet .close{color:#aab1bd}
body.evia-epa #chat .bubble.evia{background:#3a3f48!important;color:#eef0f3}
body.evia-epa #chat .bubble.user{background:var(--yellow)!important;color:#1a1d22}
body.evia-epa #chat .chat-pill{background:#3a3f48!important;color:#eef0f3!important;border-color:#4a505a!important}
body.evia-epa #chat .chat-pill.ui-pill-primary{background:var(--yellow)!important;color:#1a1d22!important}
body.evia-epa .dg-model,body.evia-epa .dg-adv,body.evia-epa .qr{background:#343941;border-color:#4a505a;color:#eef0f3}
body.evia-epa .dg-q{background:#1d2026}
body.evia-epa .test-response{background:#1f2227;color:#eef0f3;border-color:#4a505a}
body.evia-epa .dg-adv span{color:#b7bdc8}
body.evia-epa .chat-sheet::after{background:#2b2f36!important;border-color:#2b2f36!important;transition:background-color .6s ease}
.ui-logs-grid{grid-template-columns:1fr!important}
.ui-log-add{width:100%;margin:0 0 12px;height:48px;border-radius:16px}
/* ---------- Recorded professional discussion (discussion.js): a dark, quiet room ---------- */
.dr{position:fixed;inset:0;z-index:10030;display:flex;flex-direction:column;background:#23262c;color:#eef0f3;animation:tmFade .25s ease both}
.dr.dr-out{opacity:0;pointer-events:none;transition:opacity .2s ease}
.dr-bar{flex:none;display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid #353a42}
.dr-x,.dr-voice{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid #454b55;background:#2d3138;color:#cfd4dc;font-size:20px;line-height:1;cursor:pointer}
.dr-title{flex:1;font-size:15px;font-weight:700}
.dr-body{flex:1;overflow:auto;padding:20px 18px 24px;max-width:680px;width:100%;margin:0 auto}
.dr-foot{flex:none;display:flex;justify-content:center;gap:10px;padding:12px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid #353a42}
.dr-btn{flex:1;max-width:320px;height:50px;border-radius:14px;font-weight:800;font-size:15px;background:#353a42;color:#eef0f3;cursor:pointer}
.dr-primary{background:var(--yellow);color:#1a1d22}
.dr-kicker{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow)}
.dr-intro{text-align:center}.dr-intro h1{margin:6px 0 14px;font-size:24px;letter-spacing:-.02em}
.dr-rules{text-align:left;margin:0 auto 14px;padding:14px 14px 14px 32px;border-radius:16px;background:#2d3138;line-height:1.5;font-size:15px}.dr-rules li+li{margin-top:6px}
.dr-note{font-size:13px;color:#aab1bd;line-height:1.5}
html body .dr-evia{width:52px;height:52px;border-width:3px;background:#2d3138;margin-bottom:8px}
html body .dr-evia .evia-face{gap:6px}html body .dr-evia .evia-face i{width:11px!important;height:14px!important;border-width:2.5px!important}
.dr-ask{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.dr-q{margin:0;padding:14px 16px;border-radius:4px 18px 18px 18px;background:#2f343c;font-size:17px;line-height:1.45;font-weight:600}
.dr-live{min-height:160px;max-height:42vh;overflow:auto;padding:14px 16px;border-radius:16px;background:#1b1d22;border:1px solid #353a42;font-size:16px;line-height:1.55;white-space:pre-wrap}
.dr-ph,.dr-listen{color:#8b929e}.dr-interim{color:#8b929e}
.dr-type{width:100%;min-height:170px;padding:14px;border-radius:16px;background:#1b1d22;border:1px solid #454b55;color:#eef0f3;font:inherit;font-size:16px;line-height:1.5}
.dr-lab{display:block;margin:0 0 6px;font-size:13px;color:#aab1bd}
.dr-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:#aab1bd;font-variant-numeric:tabular-nums}
.dr-mic{width:74px;height:74px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 6px rgba(231,185,0,.18)}
.dr-mic span{width:20px;height:30px;border-radius:10px;background:#1a1d22;position:relative}
.dr-mic span:after{content:"";position:absolute;left:-6px;right:-6px;bottom:-9px;height:14px;border:3px solid #1a1d22;border-top:0;border-radius:0 0 16px 16px}
.dr-mic.on{background:#e2483d;animation:drPulse 1.4s ease-in-out infinite}
.dr-mic.on span{width:24px;height:24px;border-radius:5px;background:#fff}.dr-mic.on span:after{display:none}
@keyframes drPulse{0%,100%{box-shadow:0 0 0 6px rgba(226,72,61,.25)}50%{box-shadow:0 0 0 14px rgba(226,72,61,.08)}}
@media (prefers-reduced-motion:reduce){.dr-mic.on{animation:none}}
.dr-score{text-align:center;padding:18px;border-radius:20px;background:#2d3138}.dr-score b{display:block;font-size:52px;line-height:1.1;letter-spacing:-.03em}
.dr-band{display:inline-block;margin-top:4px;padding:4px 12px;border-radius:999px;font-weight:800;font-size:13px;font-style:normal}
.dr-band.d{background:#1f6f45;color:#dcf5e6}.dr-band.p{background:var(--yellow);color:#1a1d22}.dr-band.n{background:#7a2e27;color:#fde7e4}
.dr-parts{margin:14px 0;display:flex;flex-direction:column;gap:8px}
.dr-part{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;font-size:13.5px;color:#cfd4dc}
.dr-part>i{height:8px;border-radius:4px;background:#353a42;overflow:hidden}.dr-part>i>i{display:block;height:100%;border-radius:4px;background:var(--yellow)}
.dr-tips{padding:14px 14px 14px 16px;border-radius:16px;background:#2d3138}.dr-tips ul,.dr-tip{margin:6px 0 0;padding-left:20px;line-height:1.5;font-size:14.5px}
.dr-h{margin:18px 0 8px;font-size:15px}
.dr-ans{margin-bottom:10px;border-radius:16px;background:#2d3138;padding:12px 14px}
.dr-ans summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none}.dr-ans summary::-webkit-details-marker{display:none}
.dr-ans summary span{flex:1}
.dr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.dr-chips span{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.dr-chips .ok{background:#1f6f45;color:#dcf5e6}.dr-chips .half{background:#6b5a14;color:#fff3c4}.dr-chips .no{background:#7a2e27;color:#fde7e4}
.dr-tr{margin:6px 0;padding:10px 12px;border-radius:12px;background:#1b1d22;font-size:14.5px;line-height:1.55}.dr-tr mark{background:rgba(231,185,0,.28);color:inherit;border-radius:3px;padding:0 2px}
.dr-fq{margin:10px 0 0;font-size:13px;color:#aab1bd;font-style:italic}.dr-stat{font-size:12.5px;color:#8b929e;margin:6px 0}
.dr-good{color:#8fd9ae;font-weight:700;margin:6px 0 0}
.dr-intro .dr-evia{display:grid;margin:0 auto 10px}.dr-intro .dr-kicker{display:block}
/* Answering out loud: a listening wave and a timer, the words stay hidden */
.vc{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 16px;border-radius:18px;background:#1b1d22;border:1px solid #353a42;text-align:center;min-height:170px;justify-content:center}
.vc-wave{display:flex;align-items:center;gap:6px;height:44px}
.vc-wave i{width:7px;height:10px;border-radius:4px;background:#4a505a;transition:background .3s}
.vc-on .vc-wave i{background:var(--yellow);animation:vcWave 1s ease-in-out infinite}
.vc-on .vc-wave i:nth-child(2){animation-delay:.15s}.vc-on .vc-wave i:nth-child(3){animation-delay:.3s}.vc-on .vc-wave i:nth-child(4){animation-delay:.45s}.vc-on .vc-wave i:nth-child(5){animation-delay:.6s}
.vc-done .vc-wave i{background:#3fb877;height:10px}
@keyframes vcWave{0%,100%{height:10px}50%{height:40px}}
@media (prefers-reduced-motion:reduce){.vc-on .vc-wave i{animation:none;height:26px}}
.vc-msg{margin:0;font-size:16px;font-weight:600;color:#eef0f3;line-height:1.4}
.vc-time{font-size:14px;color:#aab1bd;font-variant-numeric:tabular-nums;min-height:18px}
.vc-chat{margin-top:8px}.vc-chat .vc{min-height:130px;padding:18px 14px}
.vc-foot{display:flex;justify-content:center;gap:8px;margin-top:10px}.vc-foot:empty{display:none}
.vc-foot .dr-mic{width:64px;height:64px}.vc-foot .dr-btn{height:46px;font-size:14px}
.dr-lead{font-size:15px;line-height:1.5;color:#cfd4dc;margin:0 0 14px}
.dr-used{margin:10px 0 4px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#aab1bd}
.dr-words-used{display:flex;flex-wrap:wrap;gap:5px}.dr-words-used span{font-size:12.5px;padding:3px 9px;border-radius:999px;background:rgba(231,185,0,.2);color:#f5dc7a}
.pv-deep-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ui-line)}
.pv-deep-acts .pv-act{flex:1 1 auto;height:46px;font-size:15px;border-radius:14px}
/* ---------- Rewards (rewards.js) ---------- */
.evia-kit{position:absolute;inset:0;pointer-events:none;z-index:3}
.evia-kit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eh-dome,.eh-brim{stroke-width:1.6;stroke-linejoin:round}.eh-ridge{fill:none;stroke-width:2.6;stroke-linecap:round;opacity:.9}.eh-shine{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.4;stroke-linecap:round}
.evia-hat.hat-glow{filter:drop-shadow(0 0 3px #ffd84a) drop-shadow(0 0 7px rgba(255,170,0,.7));animation:ehGlow 2.4s ease-in-out infinite}
@keyframes ehGlow{0%,100%{filter:drop-shadow(0 0 3px #ffd84a) drop-shadow(0 0 6px rgba(255,170,0,.6))}50%{filter:drop-shadow(0 0 5px #fff3b0) drop-shadow(0 0 12px rgba(255,190,0,.9))}}
@media (prefers-reduced-motion:reduce){.evia-hat.hat-glow{animation:none}}
.rw-coin{width:18px;height:18px;flex:0 0 auto;fill:var(--yellow);stroke:color-mix(in srgb,var(--yellow) 70%,#000);stroke-width:1.2}.rw-coin .rw-star{fill:#fff;stroke:none}
.rw-bal{text-align:center;padding:20px 18px 16px;margin:0 0 14px;border-radius:24px;background:linear-gradient(180deg,#fff,var(--soft));border:1px solid var(--yellow-line)}
.rw-bal div{display:flex;align-items:center;justify-content:center;gap:10px}.rw-bal .rw-coin{width:36px;height:36px}
.rw-bal>div b{font-size:42px;line-height:1;font-weight:800;color:var(--ui-ink);letter-spacing:-.03em}
.rw-bal p{margin:6px 0 2px;font-weight:800;color:var(--yellow-ink)}.rw-bal small{color:var(--ui-muted);font-size:13px}
.rw-box{display:flex;gap:14px;align-items:center;padding:16px;margin:0 0 18px;border-radius:22px;background:linear-gradient(135deg,#2a1f4a,#17122b);color:#fff;box-shadow:0 10px 26px rgba(40,20,90,.25)}
.rw-box-art svg,.rw-shake svg{width:84px;height:84px}
.g-box{fill:#8b5cf6}.g-lid{fill:#a78bfa}.g-rib{fill:#f5c542}.g-bow{fill:#f5c542}
.rw-box-copy{flex:1;min-width:0}.rw-box-copy strong{font-size:17px}.rw-box-copy small{display:block;margin:3px 0 8px;font-size:12.5px;color:#cfc6ee;line-height:1.4}
.rw-odds{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.rw-odds span{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;color:#fff}
.r-common.rw-tag,.rw-odds .r-common,.rw-tag.r-common{background:#8792a2}.rw-odds .r-rare,.rw-tag.r-rare{background:#2f6fed}.rw-odds .r-epic,.rw-tag.r-epic{background:#8b5cf6}.rw-odds .r-legendary,.rw-tag.r-legendary{background:linear-gradient(90deg,#e0a800,#f5c542);color:#3b2a00}
.rw-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.02em}
.rw-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:0 0 12px;border-radius:16px;background:#eef1f5}
.rw-tabs button{height:40px;border-radius:12px;font-weight:750;font-size:14px;color:var(--ui-muted);cursor:pointer}.rw-tabs button.on{background:#fff;color:var(--ui-ink);box-shadow:0 1px 4px rgba(16,24,40,.08)}
.rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.rw-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 10px;border-radius:20px;background:#fff;border:2px solid var(--ui-line)}
.rw-item.r-rare{border-color:#c9d9fb}.rw-item.r-epic{border-color:#ddd0fc}.rw-item.r-legendary{border-color:#f3dc8a;background:linear-gradient(180deg,#fffdf4,#fff)}
.rw-item.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 35%,transparent)}
.rw-item strong{font-size:14px;color:var(--ui-ink);margin-top:4px}.rw-item small{font-size:12px;color:var(--ui-muted);min-height:30px;line-height:1.3}
.rw-item:not(.own) .rw-evia{opacity:.8}
.rw-flash{animation:evFlash 1.6s ease 2}
.rw-evia{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:22px 0 4px;background:var(--yellow);flex:none}
.rw-evia:before{content:"";position:absolute;inset:4px;background:#fffdfa;z-index:0}
.rw-evia.shape-circle,.rw-evia.shape-circle:before{border-radius:50%}.rw-evia.shape-squircle,.rw-evia.shape-squircle:before{border-radius:30%}
.rw-evia .evia-face{position:relative;z-index:1;gap:7px}.rw-evia .evia-face i{width:14px;height:14px;border-width:2.5px;border-color:var(--yellow)!important;background:transparent!important}.rw-evia .evia-face i:after{width:4px;height:4px;left:3.5px;top:3.5px;background:var(--yellow)!important}
.rw-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:100px;height:38px;margin-top:6px;padding:0 14px;border-radius:13px;font-weight:800;font-size:14px;background:#f1f3f6;color:var(--ui-ink);cursor:pointer}
.rw-btn.buy{background:var(--ui-ink);color:#fff}.rw-btn.on{background:var(--soft);color:var(--yellow-ink)}.rw-btn:disabled{opacity:.4;cursor:not-allowed}
.rw-box .rw-btn.buy{background:#f5c542;color:#2a1f00}
.rw-only{margin-top:10px;font-size:12px;font-weight:800;color:#a07a00}
.rw-note{font-size:13px;color:var(--ui-muted);text-align:center;margin:0 0 20px}
.bottom-nav button.rw-dot:after{content:"";position:absolute;top:10px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 0 2px #fff}
/* Opening and the reveal */
.rw-over{position:fixed;inset:0;z-index:10060;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(14,10,30,.82);animation:tmFade .2s ease both;padding:24px}
.rw-over.out{opacity:0;transition:opacity .2s}
.rw-shake{animation:rwShake .5s ease-in-out infinite}.rw-shake svg{width:130px;height:130px}
@keyframes rwShake{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.04)}75%{transform:rotate(8deg) scale(1.04)}}
.rw-over-t{color:#fff;font-weight:800;margin-top:14px}
.rw-reveal{position:relative;width:min(340px,100%);padding:26px 20px 20px;border-radius:26px;background:#fff;text-align:center;animation:rwPop .5s cubic-bezier(.2,1.4,.4,1) both;overflow:hidden}
.rw-reveal h2{margin:8px 0 4px;font-size:22px;color:var(--ui-ink)}.rw-reveal p{margin:0 0 14px;color:var(--ui-muted)}
.rw-reveal.r-rare{box-shadow:0 0 0 3px #2f6fed,0 0 40px rgba(47,111,237,.6)}.rw-reveal.r-epic{box-shadow:0 0 0 3px #8b5cf6,0 0 50px rgba(139,92,246,.7)}.rw-reveal.r-legendary{box-shadow:0 0 0 3px #f5c542,0 0 70px rgba(245,197,66,.9)}
.rw-burst{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 10deg,rgba(245,197,66,.14) 10deg 20deg,transparent 20deg 40deg,rgba(245,197,66,.14) 40deg 50deg,transparent 50deg 70deg,rgba(245,197,66,.14) 70deg 80deg,transparent 80deg);animation:rwSpin 9s linear infinite;z-index:0;pointer-events:none}
.rw-reveal.r-common .rw-burst{display:none}
.rw-reveal>*:not(.rw-burst){position:relative;z-index:1}
.rw-big .rw-evia{width:110px;height:110px;margin:30px auto 8px}.rw-big .rw-evia .evia-face{gap:12px}.rw-big .rw-evia .evia-face i{width:22px;height:22px;border-width:3.5px}.rw-big .rw-evia .evia-face i:after{width:6px;height:6px;left:5px;top:5px}
.rw-dup .rw-coin{width:80px;height:80px;margin:14px 0 6px}
.rw-reveal-btns{display:flex;gap:8px;justify-content:center}
@keyframes rwPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rwSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rw-reveal,.rw-burst,.rw-shake{animation:none}}
html body .evia-fab:has(> .evia-kit){overflow:visible!important}
html body .bottom-nav button[data-nav]{position:relative}

/* ---------- Evia's expressions (rewards.js puts the one in use on <html>; previews use data-x) ---------- */
html[data-evia-expr="wink"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:nth-child(2),html body .evia-face[data-x="wink"] i:nth-child(2){border-top-color:transparent!important;border-left-color:transparent!important;border-right-color:transparent!important;translate:0 -22%!important;scale:1.15 1!important}
html[data-evia-expr="surprised"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="surprised"] i{scale:1.25 1.25;border-radius:50%!important;aspect-ratio:1;height:auto!important}
html[data-evia-expr="surprised"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:after,html body .evia-face[data-x="surprised"] i:after{content:""!important;display:block!important;position:absolute;left:32%!important;top:32%!important;width:36%!important;height:36%!important;translate:none!important;transform:none!important;animation:none!important;border-radius:50%;background:var(--yellow)!important}
html[data-evia-expr="happy"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="happy"] i{border-bottom-color:transparent!important;translate:0 -8%!important}
html[data-evia-expr="sleepy"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="sleepy"] i{clip-path:inset(42% -20% -20% -20%);translate:0 -6%!important}
html[data-evia-expr="sleepy"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:before,html body .evia-face[data-x="sleepy"] i:before{content:"";position:absolute;left:-18%;right:-18%;top:40%;height:max(1.5px,14%);border-radius:2px;background:var(--yellow)}
html[data-evia-expr="focused"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="focused"] i{scale:1 .72;overflow:visible}
html[data-evia-expr="focused"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:before,html body .evia-face[data-x="focused"] i:before{content:"";position:absolute;left:-20%;right:-20%;top:-70%;height:max(2px,20%);border-radius:2px;background:var(--yellow)}
html[data-evia-expr="focused"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:first-child:before,html body .evia-face[data-x="focused"] i:first-child:before{rotate:22deg}
html[data-evia-expr="focused"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:nth-child(2):before,html body .evia-face[data-x="focused"] i:nth-child(2):before{rotate:-22deg}
html[data-evia-expr="stars"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="stars"] i{border-color:transparent!important;background:var(--yellow)!important;clip-path:polygon(50% 0%,61.8% 34.5%,98% 35%,69% 57%,79.4% 92%,50% 71%,20.6% 92%,31% 57%,2% 35%,38.2% 34.5%);border-radius:0!important;scale:1.35 1.2}
html[data-evia-expr="stars"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:after,html body .evia-face[data-x="stars"] i:after{display:none!important}
html[data-evia-expr="hearts"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="hearts"] i{border-color:transparent!important;background:#f0445f!important;clip-path:polygon(50% 96%,14% 60%,4% 44%,2% 28%,8% 13%,21% 4%,35% 5%,45% 13%,50% 22%,55% 13%,65% 5%,79% 4%,92% 13%,98% 28%,96% 44%,86% 60%);border-radius:0!important;scale:1.35 1.15;animation:eviaHeart 1.2s ease-in-out infinite!important}
html[data-evia-expr="hearts"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i:after,html body .evia-face[data-x="hearts"] i:after{display:none!important}
@keyframes eviaHeart{0%,100%{scale:1.3 1.1}40%{scale:1.5 1.3}60%{scale:1.35 1.15}}
@media (prefers-reduced-motion:reduce){html[data-evia-expr="hearts"]:not(.evia-happy):not(.evia-sleepy) body .evia-face:not([data-x]) i,html body .evia-face[data-x="hearts"] i{animation:none!important}}
.evia-face i{position:relative}
.rw-tabs{grid-template-columns:repeat(4,1fr)!important}.rw-tabs button{font-size:13.5px}
/* ---------- PPE (rewards.js) ---------- */
.evia-kit .evia-ppe{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ek-band{fill:none;stroke:#2b3240;stroke-width:4.5;stroke-linecap:round}
.ek-cup{stroke-width:1.6}
.ek-hv{fill:#d4ee2a}.ek-neck{fill:#fffdfa}.ek-strip{fill:#c9d0d8}
.ek-vest .ek-line>*{fill:none;stroke:var(--evia-shape-stroke,var(--yellow));stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ek-vest.glow .ek-strip{fill:#fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #d4ee2a);animation:ekShine 2.2s ease-in-out infinite}
@keyframes ekShine{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ek-vest.glow .ek-strip{animation:none}}
.evia-face{position:relative}
.ek-eyes{position:absolute;inset:0;pointer-events:none;z-index:2}
.ek-eyes b{position:absolute;display:block;box-sizing:border-box}
.ek-lens{border:var(--bw) solid #2b3240;border-radius:32%;background:rgba(191,224,245,.28)}
.ek-bridge,.ek-arm{background:#2b3240;border-radius:2px}
.ek-gog{border:calc(var(--bw)*1.4) solid #2b3240;border-radius:40%/50%;background:rgba(191,224,245,.3)}
.ek-strap{background:#3a4250;border-radius:3px;z-index:-1}
/* ---------- Advanced Evias: orbs (theme.js draws, orbs.js animates) ---------- */
html body .evia-orb-host{--yellow:var(--orb);--evia-accent:var(--orb)}
html body .evia-orb-host>.evia-orb{position:absolute;inset:-3%;width:106%;height:106%;display:block;z-index:0}
.evia-orb svg,.evia-orb .orb-cv{position:absolute;inset:0;width:100%;height:100%}
.evia-orb.orb-live svg ellipse{display:none}
html body .evia-fab.evia-orb-host .evia-orb{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--orb) 45%,transparent)) drop-shadow(0 6px 10px rgba(0,0,0,.25))}
html body .evia-orb-host .evia-face i{filter:drop-shadow(0 0 2px var(--orb)) drop-shadow(0 0 5px color-mix(in srgb,var(--orb) 60%,transparent))}
html body .evia-orb-host:has(> .orb-glass) .evia-face{translate:0 -9%}
html body .evia-orb-host .ek-lens,html body .evia-orb-host .ek-gog{border-color:#e6ebf2}html body .evia-orb-host .ek-bridge,html body .evia-orb-host .ek-arm{background:#e6ebf2}
/* Coins in Teach me (the XP pills became coins) */
.rw-coin.tm-coin{fill:#f5b800;stroke:#b07f00}
.tm-pop.coin{display:inline-flex;align-items:center;gap:3px;color:#8a6400}.tm-pop.coin svg{width:16px;height:16px}
.tm-stats .xp .rw-coin{width:24px;height:24px}
/* A small note when real work pays coins */
.rw-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:10px 16px 10px 12px;border-radius:999px;background:var(--ui-ink,#172033);color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.22);animation:rwToastIn .3s ease-out;transition:opacity .35s,transform .35s}
.rw-toast .rw-coin{width:20px;height:20px;fill:#f5b800;stroke:#b07f00}.rw-toast b{color:#ffd84a}.rw-toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-toast.out{opacity:0;transform:translate(-50%,8px)}
@keyframes rwToastIn{from{opacity:0;transform:translate(-50%,10px)}}
@media (prefers-reduced-motion:reduce){.rw-toast{animation:none;transition:none}}
/* How to earn coins, on Rewards */
.rw-earn{margin:12px auto 0;max-width:360px;text-align:left}
.rw-earn summary{cursor:pointer;text-align:center;color:var(--yellow-ink);font-weight:700;font-size:14px;list-style:none}.rw-earn summary::-webkit-details-marker{display:none}
.rw-earn summary::after{content:" ›";display:inline-block;transition:transform .2s}.rw-earn[open] summary::after{transform:rotate(90deg)}
.rw-earn ul{list-style:none;margin:10px 0 6px;padding:0;display:grid;gap:6px}
.rw-earn li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ui-ink);padding:7px 10px;border-radius:10px;background:#fff}
.rw-earn li b{white-space:nowrap;color:var(--yellow-ink);font-size:13.5px;font-weight:800;text-align:right}.rw-earn p{margin:4px 0 0;font-size:12.5px;color:var(--ui-muted);text-align:center}
/* Mini games: the Teach me list */
.tt-games-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 4px 10px}
.tt-games-head h2{margin:0;font-size:19px;color:var(--ui-ink)}.tt-games-head span{font-size:12.5px;color:var(--ui-muted);font-weight:650}
.tt-play{flex:none;height:34px;padding:0 16px;border-radius:12px;display:inline-grid;place-items:center;background:var(--ui-ink);color:#fff;font-weight:800;font-size:14px}
.tt-lock{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--ui-muted);font-weight:800;font-size:13px}
.tt-lock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.tt-game.locked .tt-ic{background:#f1f3f6;color:#98a2b3}
.rw-game{display:grid;place-items:center;width:64px;height:64px;margin:6px auto 4px;border-radius:20px;background:var(--soft);color:var(--yellow-ink)}
.rw-game svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rw-big .rw-game{width:110px;height:110px;border-radius:32px}.rw-big .rw-game svg{width:60px;height:60px}
/* Mini games: the game screen */
html.gm-open,html.gm-open body{overflow:hidden}
.gm{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;background:#fbfaf7;animation:gmIn .25s ease-out}
@keyframes gmIn{from{opacity:0;transform:translateY(12px)}}
.gm-bar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--ui-line,#e8ebef);background:#fff}
.gm-bar strong{flex:1;font-size:17px;color:var(--ui-ink)}
.gm-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--ui-line,#e8ebef);background:#fff;font-size:24px;line-height:1;color:var(--ui-ink);cursor:pointer}
.gm-coins{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px 0 8px;border-radius:999px;background:var(--soft);font-weight:800;font-size:13.5px;color:var(--yellow-ink)}
.gm-coins .rw-coin{width:18px;height:18px;fill:#f5b800;stroke:#b07f00}
.gm-body{flex:1;min-height:0;position:relative;overflow:auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
.gm-end{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,.45);animation:gmIn .25s ease-out;overflow:auto}
.gm-end-card{width:100%;max-width:400px;max-height:100%;overflow:auto;background:#fff;border-radius:24px;padding:22px 18px 18px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.gm-end-card h2{margin:0 0 4px;font-size:22px;color:var(--ui-ink)}.gm-end-sub{margin:0 0 12px;color:var(--ui-muted);font-size:14.5px}
.gm-end-coins{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 12px;font-weight:700;color:var(--ui-muted);font-size:14px}
.gm-end-coins .rw-coin{width:26px;height:26px;fill:#f5b800;stroke:#b07f00}.gm-end-coins b{font-size:24px;color:#8a6400}
.gm-learn{text-align:left;background:var(--soft);border-radius:16px;padding:12px 14px;margin:0 0 14px}.gm-learn strong{letter-spacing:.12em;color:var(--yellow-ink)}.gm-learn p{margin:4px 0 0;color:var(--ui-ink);font-size:14.5px;line-height:1.45}
.gm-list{text-align:left;margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px}
.gm-list li{padding:9px 12px 9px 34px;border-radius:14px;background:#f6f7f9;position:relative;font-size:13.5px;line-height:1.4}
.gm-list li::before{content:"✓";position:absolute;left:12px;top:9px;font-weight:900;color:#16a34a}.gm-list li.no::before{content:"!";color:#dc2626;left:15px}
.gm-list strong{display:block;color:var(--ui-ink)}.gm-list span{color:var(--ui-muted)}
.gm-end-btns{display:grid;gap:8px}.gm-end-btns button{height:48px;border-radius:14px;font-weight:800;font-size:16px}
/* Brickle */
.bk{max-width:420px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.bk-say{margin:0;color:var(--ui-muted);font-weight:650;font-size:14.5px}
.bk-grid{display:grid;gap:6px}.bk-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bk-t{width:min(13vw,54px);height:min(13vw,54px);display:inline-grid;place-items:center;border-radius:10px;border:2px solid #dde2e8;background:#fff;font-size:min(7vw,26px);font-weight:900;color:var(--ui-ink);text-transform:uppercase}
.bk-t.full{border-color:#98a2b3;animation:bkPop .12s ease-out}
.bk-t.hit{background:#16a34a;border-color:#16a34a;color:#fff}.bk-t.near{background:#e7a500;border-color:#e7a500;color:#fff}.bk-t.no{background:#8a94a3;border-color:#8a94a3;color:#fff}
.bk-t.flip{animation:bkFlip .45s ease-in-out}
@keyframes bkPop{50%{transform:scale(1.08)}}@keyframes bkFlip{50%{transform:rotateX(90deg)}}
.bk-row.shake{animation:bkShake .35s}@keyframes bkShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.bk-clue{margin:2px 0 0;padding:9px 12px;border-radius:12px;background:var(--soft);color:var(--ui-ink);font-size:14px;line-height:1.4;max-width:100%}
.bk-msg{margin:0;min-height:18px;font-size:13.5px;font-weight:700;color:#b42318}
.bk-kb{width:100%;display:grid;gap:6px}.bk-kb>div{display:flex;gap:5px;justify-content:center}
.bk-kb button{flex:1;max-width:40px;height:50px;border-radius:9px;border:0;background:#e6e9ee;font-weight:800;font-size:15px;color:var(--ui-ink);cursor:pointer;padding:0;touch-action:manipulation}
.bk-kb button.wide{max-width:62px;flex:1.5;font-size:13px}
.bk-kb button.hit{background:#16a34a;color:#fff}.bk-kb button.near{background:#e7a500;color:#fff}.bk-kb button.no{background:#9aa3af;color:#fff}
.bk-how{font-size:13px;color:var(--ui-muted);text-align:center}.bk-how summary{cursor:pointer;font-weight:700}
.bk-how .bk-t{width:24px;height:24px;font-size:13px;border-radius:6px;vertical-align:middle;margin:0 2px}
/* Crossword */
.cw{max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.cw-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2px;width:min(100%,calc(var(--cols) * 40px));padding:2px}
.cw-x{aspect-ratio:1}
.cw-c{position:relative;aspect-ratio:1;padding:0;border:1.5px solid #c9d0d9;border-radius:5px;background:#fff;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}
.cw-c i{position:absolute;top:1px;left:3px;font-style:normal;font-size:9px;font-weight:800;color:var(--ui-muted);line-height:1}
.cw-c b{font-size:clamp(13px,4.6vw,19px);font-weight:900;color:var(--ui-ink)}
.cw-c.in{background:#fff6cf;border-color:#e2c65a}.cw-c.on{background:var(--yellow);border-color:#a88400}
.cw-c.bad b{color:#dc2626}.cw-c.bad{border-color:#f0a3a3}
.cw-c.ok{background:#dcfce7;border-color:#16a34a;transition:background .3s}
.cw-clue{width:100%;display:flex;align-items:center;gap:6px;min-height:58px;padding:6px;border-radius:14px;background:#fff;border:1px solid var(--ui-line,#e8ebef)}
.cw-clue p{flex:1;margin:0;font-size:14.5px;line-height:1.35;color:var(--ui-ink)}.cw-clue p span{color:var(--ui-muted)}
.cw-nav{flex:none;width:36px;height:44px;border:0;border-radius:10px;background:#f1f3f6;font-size:24px;color:var(--ui-ink);cursor:pointer}
.cw-tools{width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cw-tools button{height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--ui-line,#e8ebef);background:#fff;font-weight:750;font-size:13.5px;color:var(--ui-ink);cursor:pointer}
.cw-msg{font-size:13px;font-weight:700;color:var(--ui-muted)}
/* Flappy Evia */
.gm-flappy .gm-body{padding:0;overflow:hidden}
.fl{position:absolute;inset:0;user-select:none;-webkit-user-select:none;touch-action:none}.fl canvas{display:block}
.fl-hud{position:absolute;top:12px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.fl-score{font-size:44px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(15,23,42,.35),0 0 12px rgba(15,23,42,.25)}
.fl-shield{padding:3px 10px;border-radius:999px;background:#2f6fcf;color:#fff;font-size:12px;font-weight:800}
.fl-tip{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);width:min(88%,340px);padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.94);text-align:center;box-shadow:0 10px 30px rgba(15,23,42,.15);cursor:pointer}
.fl-tip strong{display:block;font-size:18px;color:var(--ui-ink)}.fl-tip span{display:block;margin-top:4px;font-size:13.5px;color:var(--ui-muted);line-height:1.4}
.fl-q{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,.35)}
.fl-q-card{width:min(100%,380px);background:#fff;border-radius:22px;padding:18px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);border-top:6px solid #16a34a}
.fl-q-card.no{border-top-color:#dc2626}.fl-q-tag{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#16a34a}.fl-q-card.no .fl-q-tag{color:#dc2626}
.fl-q-card p{margin:8px 0 14px;font-size:16px;line-height:1.45;color:var(--ui-ink)}
.fl-q-btns{display:flex;gap:10px}.fl-q-btns button{flex:1;height:50px;border-radius:14px;border:0;font-weight:800;font-size:16px;background:var(--ui-ink);color:#fff;cursor:pointer}
.fl-q-btns button[data-a="0"]{background:#fff;color:var(--ui-ink);border:2px solid var(--ui-line,#e8ebef)}
@media (prefers-reduced-motion:reduce){.gm,.gm-end,.bk-t.full,.bk-t.flip,.bk-row.shake{animation:none!important}.cw-c.ok{transition:none!important}}
html.gm-open #profile-btn,html.gm-open .evia-fab,html.gm-open #evia-fab,html.gm-open .rw-toast{visibility:hidden}
/* Guided evidence: topics as pills, a roomy box for one topic, and small buttons that leave room for the writing. */
.eg-pills{display:flex;flex-wrap:wrap;gap:8px}
.eg-pill{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:100%;padding:10px 14px;border-radius:16px;border:1.5px solid var(--yellow-line,#f1d878);background:#fff;color:var(--ui-ink);font:inherit;text-align:left;cursor:pointer;transition:transform .12s ease}
.eg-pill:active{transform:scale(.97)}
.eg-pill-t{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700}
.eg-pill-t svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.eg-pill small{font-size:12px;line-height:1.35;color:var(--ui-muted);max-width:260px}
.eg-pill.done{background:var(--soft,#fff7d6);border-color:var(--yellow);color:var(--yellow-ink)}
.eg-pill.other{border-style:dashed}
.eg-good{font-size:13.5px;color:var(--ui-text)}.eg-good summary{font-weight:700;color:var(--yellow-ink);cursor:pointer}.eg-good ul{margin:6px 0 0;padding-left:18px}
.eg-ctx{margin:0;font-size:13.5px;line-height:1.45;color:var(--ui-muted)}
html body .eg-actions.eg-compact{justify-content:flex-end;gap:8px}
html body .eg-actions.eg-compact button{flex:0 0 auto;min-height:40px!important;padding:0 18px;font-size:14.5px;border-radius:12px}
html body .eg-actions.eg-compact .eg-back{margin-right:auto;padding:0 4px}