:root{
  --navy:#103d73; --navy2:#174f8c; --ink:#102f59; --muted:#5b6f88;
  --line:#d8e3ef; --soft:#eef5fb; --soft2:#f7fafc; --success:#2f7a58;
  --successbg:#eef8f2; --warn:#9a6514; --warnbg:#fff7e8; --error:#9a3d43;
  --errorbg:#fff0f1; --shadow:0 18px 45px rgba(16,47,89,.08);
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
button{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}.topbar{min-height:86px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(320px,.9fr) minmax(360px,1fr);align-items:center;padding:0 32px;background:#fff;position:sticky;top:0;z-index:10}.brand-block{display:flex;align-items:center;gap:18px}.brand-mark{width:56px;height:56px;display:flex;align-items:center;justify-content:center;flex:0 0 56px}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}.brand-block h1{font-size:22px;margin:0 0 2px}.brand-block p{margin:0;color:var(--muted);font-size:14px}.course-progress{max-width:520px;width:100%;justify-self:center}.progress-track{height:10px;border-radius:999px;background:#e6edf4;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--navy2),#2b6ca8);border-radius:inherit;transition:width .35s ease}.progress-meta{display:flex;justify-content:center;gap:10px;margin-top:8px;color:var(--muted);font-size:14px}.top-actions{justify-self:end;display:flex;align-items:stretch}.icon-button{border:0;border-left:1px solid var(--line);background:#fff;color:var(--ink);padding:14px 12px;min-width:90px;cursor:pointer}.icon-button:hover{background:var(--soft2)}.icon-button span{display:block;font-size:22px;line-height:1}.icon-button small{display:block;margin-top:6px;font-size:12px}.scene-root{padding:32px 36px 24px;outline:none}.scene-layout{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:44px;align-items:stretch}.scene-layout.centered{grid-template-columns:1fr;max-width:1120px}.scene-image{min-height:560px;background:var(--soft)}.scene-image img{width:100%;height:100%;object-fit:cover;display:block}.scene-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;overflow:hidden;border-radius:12px}.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--navy2);margin-bottom:14px}.scene-copy h2{font-size:42px;line-height:1.08;margin:0 0 20px;letter-spacing:-.025em}.scene-copy p{font-size:19px;line-height:1.55;color:var(--muted);margin:0 0 18px}.lead{font-size:21px!important;color:var(--ink)!important}.learning-list{list-style:none;padding:0;margin:20px 0 28px}.learning-list li{padding:10px 0 10px 30px;position:relative;font-size:18px}.learning-list li:before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:800}.inline-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.action-btn,.transcript-btn{border:0;border-radius:8px;padding:14px 22px;font-weight:700;cursor:pointer}.action-btn{background:var(--navy);color:#fff}.action-btn[disabled]{opacity:.35;cursor:not-allowed}.transcript-btn{background:var(--soft);color:var(--navy)}.transcript-overlay{position:absolute;inset:0;z-index:6;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}.transcript-overlay[hidden]{display:none}.transcript-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px 28px 18px;border-bottom:1px solid var(--line);background:var(--soft2)}.transcript-head .eyebrow{margin-bottom:6px}.transcript-head h3{margin:0;font-size:26px;color:var(--ink)}.transcript-close{border:0;background:transparent;color:var(--navy);font-size:30px;line-height:1;cursor:pointer;padding:0 2px}.transcript-body{padding:26px 28px 30px;overflow:auto;color:#405875;font-size:18px;line-height:1.65}.summary-card{position:relative;overflow:hidden}.answer-list{display:grid;gap:12px;margin:18px 0}.answer-option{display:flex;gap:14px;align-items:flex-start;border:1px solid #cfdbea;border-radius:8px;padding:16px 18px;cursor:pointer;background:#fff;transition:.2s}.answer-option:hover{border-color:#8fb0d0;background:#fafdff}.answer-option input{margin-top:3px;width:20px;height:20px;accent-color:var(--navy)}.answer-option.selected{border-color:#6c99c2;background:#f4f9fd}.answer-option.correct{border-color:#7bb797;background:var(--successbg)}.answer-option.incorrect{border-color:#d39a9e;background:var(--errorbg)}.feedback{margin-top:16px;border-radius:8px;padding:16px 18px}.feedback.success{background:var(--successbg);border:1px solid #b9d8c6}.feedback.warn{background:var(--warnbg);border:1px solid #ead2a7}.feedback h3{margin:0 0 6px;font-size:18px}.feedback p{margin:0;font-size:16px}.summary-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:42px}.summary-card h2{font-size:38px;margin:0 0 12px}.takeaways{display:grid;gap:16px;margin:28px 0}.takeaway{display:flex;gap:14px;align-items:flex-start;font-size:19px}.takeaway b{color:var(--success)}.memory-line{margin-top:32px;padding:22px 24px;background:var(--soft);border-radius:10px;font-size:24px;font-weight:750;color:var(--navy)}.bottom-nav{border-top:1px solid var(--line);min-height:86px;padding:14px 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);z-index:9}.nav-btn{border-radius:8px;padding:14px 24px;font-weight:700;cursor:pointer;min-width:142px}.nav-btn.primary{justify-self:end;border:0;background:var(--navy);color:#fff}.nav-btn.secondary{justify-self:start;background:#fff;border:1px solid var(--navy);color:var(--navy)}.nav-btn:disabled{opacity:.35;cursor:not-allowed}.scene-dots{display:flex;gap:10px;align-items:center}.dot{width:13px;height:13px;border-radius:50%;background:#c9d6e4}.dot.done{background:#2a68a1}.dot.current{background:var(--navy);box-shadow:0 0 0 4px #e8f1f9}.side-panel{position:fixed;right:-460px;top:0;width:min(440px,92vw);height:100vh;background:#fff;z-index:30;box-shadow:-18px 0 40px rgba(16,47,89,.18);transition:right .28s ease;display:flex;flex-direction:column}.side-panel.open{right:0}.panel-head{padding:24px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2{margin:0}.panel-close{border:0;background:transparent;font-size:28px;color:var(--ink);cursor:pointer}.panel-body{padding:24px 26px;overflow:auto}.panel-body h3{margin:24px 0 8px}.chapter-list{padding-left:24px;margin:0}.chapter-list li{padding:10px 8px;color:var(--muted)}.chapter-list li.active{color:var(--ink);font-weight:800;background:var(--soft);border-radius:6px}.overview-progress{margin-top:28px;padding:16px;background:var(--soft);border-radius:8px}.overlay{position:fixed;inset:0;background:rgba(8,28,50,.34);z-index:20}.overlay.visible{display:block}dialog{border:0;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.24);max-width:560px;padding:30px;color:var(--ink)}dialog::backdrop{background:rgba(8,28,50,.42)}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:26px}.dialog-actions .nav-btn{justify-self:auto}.micro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.micro-card{padding:16px;background:var(--soft2);border:1px solid var(--line);border-radius:8px;font-weight:650}.scene-kicker{font-size:16px;font-weight:800;margin-bottom:4px;color:var(--ink)}
@media(max-width:1050px){.topbar{grid-template-columns:1fr auto;padding:0 18px}.course-progress{grid-column:1/-1;grid-row:2;padding:8px 0 10px}.top-actions{grid-column:2}.brand-block{grid-row:1}.topbar{padding-top:10px}.scene-layout{grid-template-columns:1fr}.scene-image{min-height:380px}.scene-copy{padding:0 4px}.top-actions .icon-button{min-width:auto;padding:12px}.icon-button small{display:none}.scene-copy h2{font-size:34px}}
@media(max-width:680px){.brand-block h1{font-size:17px}.brand-block p{font-size:12px}.brand-mark{width:44px;height:44px;flex-basis:44px}.scene-root{padding:18px 16px 12px}.scene-image{min-height:290px}.scene-copy h2{font-size:30px}.scene-copy p{font-size:17px}.bottom-nav{padding:10px 14px;grid-template-columns:auto 1fr auto}.nav-btn{min-width:auto;padding:12px 14px}.nav-btn span{display:none}.scene-dots{justify-content:center;gap:7px}.dot{width:10px;height:10px}.micro-grid{grid-template-columns:1fr}.summary-card{padding:26px 22px}.summary-card h2{font-size:30px}}

/* Navigation & progress logic v2 */
.progress-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em}.progress-heading strong{color:var(--navy);font-size:14px}.chapter-list{display:grid;gap:10px;padding:0;margin:0}.chapter-item{width:100%;display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px;color:var(--ink)}.chapter-item.current{border-color:#8fb0d0;background:var(--soft)}.chapter-item.completed{border-color:#b9d8c6;background:var(--successbg);cursor:pointer}.chapter-item.locked{opacity:.62;cursor:not-allowed}.chapter-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e8f1f9;color:var(--navy);font-weight:800}.chapter-item.completed .chapter-icon{background:#dcefe4;color:var(--success)}.chapter-copy{display:grid;gap:2px}.chapter-copy strong{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy2)}.chapter-copy span{font-size:15px;font-weight:700;line-height:1.3}.chapter-copy small{font-size:12px;color:var(--muted)}.lock-icon{font-size:13px;filter:grayscale(1)}.overview-progress{display:flex;align-items:center;justify-content:space-between}.overview-progress span{color:var(--muted);font-size:14px}.overview-progress strong{font-size:20px;color:var(--navy)}.dot.visited{background:#8faac3}.nav-btn.danger{border:0;background:#8d3138;color:#fff;justify-self:auto}.welcome-dialog{max-width:620px}.welcome-badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:var(--soft);color:var(--navy);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}.resume-card{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--soft2);margin-top:22px}.resume-card span,.resume-card small{color:var(--muted)}.resume-card strong{font-size:20px;color:var(--ink)}.resume-card.compact{margin:26px 0}.paused-screen{min-height:calc(100vh - 174px);display:grid;place-items:center;padding:28px}.paused-card{max-width:680px;text-align:center;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);padding:48px}.paused-card h2{font-size:36px;margin:10px 0 14px}.paused-card p{font-size:18px;color:var(--muted);line-height:1.5}.paused-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--successbg);color:var(--success);font-size:26px;font-weight:900;margin:0 auto 18px}.paused-continue{justify-self:auto}.app-shell.is-paused .bottom-nav{visibility:hidden}.app-shell.is-paused .top-actions button:not(#exitBtn){pointer-events:none;opacity:.45}.app-shell.is-paused #exitBtn{pointer-events:none;opacity:.45}
@media(max-width:680px){.progress-heading{margin-top:2px}.dialog-actions.stacked-mobile{flex-direction:column-reverse}.dialog-actions.stacked-mobile .nav-btn{width:100%}.paused-card{padding:32px 22px}.paused-card h2{font-size:29px}.chapter-item{padding:12px}}

/* Quality pass v3: stable layout, readability, focus and responsive behavior */
:root{--focus:#0b65b1}
button,input{touch-action:manipulation}
button:focus-visible,input:focus-visible,.answer-option:has(input:focus-visible){outline:3px solid rgba(11,101,177,.28);outline-offset:3px}
.icon-button,.nav-btn,.action-btn,.transcript-btn,.panel-close,.transcript-close{transition:background-color .16s ease,border-color .16s ease,transform .16s ease,opacity .16s ease}
@media(hover:hover){.nav-btn.primary:hover,.action-btn:hover{background:#0b3566}.nav-btn.secondary:hover,.transcript-btn:hover{background:#e7f1f9}.panel-close:hover,.transcript-close:hover{background:var(--soft);border-radius:6px}}
.scene-layout:not(.centered){min-height:min(620px,calc(100vh - 228px))}
.scene-image{height:clamp(440px,58vh,650px);min-height:0;align-self:center}
.scene-copy{align-self:stretch;min-height:0;padding:18px 0}
.scene-copy>h2{max-width:16ch}
.scene-copy>p,.learning-list,.answer-list,.feedback,.inline-actions,.micro-grid{max-width:660px}
.answer-option{min-height:56px;line-height:1.42}
.feedback{scroll-margin-block:130px 110px}
.transcript-overlay{min-height:100%}
.transcript-body{overscroll-behavior:contain}
.bottom-nav{padding-bottom:max(14px,env(safe-area-inset-bottom))}
.side-panel{padding-bottom:env(safe-area-inset-bottom)}
dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}

@media(min-width:1051px) and (max-height:800px){
  .topbar{min-height:76px}.scene-root{padding-top:22px;padding-bottom:18px}.bottom-nav{min-height:76px}
  .scene-layout:not(.centered){min-height:500px}.scene-image{height:clamp(420px,56vh,560px)}
  .scene-copy h2{font-size:36px;margin-bottom:14px}.scene-copy p{font-size:17px;line-height:1.48;margin-bottom:14px}.lead{font-size:19px!important}
  .learning-list{margin:12px 0 18px}.learning-list li{padding-top:7px;padding-bottom:7px;font-size:17px}.answer-list{gap:9px;margin:12px 0}.answer-option{padding:12px 15px}
}

@media(max-width:1050px){
  .topbar{position:relative}.bottom-nav{position:sticky}
  .scene-layout{gap:28px}.scene-layout:not(.centered){min-height:0}
  .scene-image{height:auto;aspect-ratio:16/9;min-height:0;width:100%}
  .scene-copy{padding:0;overflow:visible}.scene-copy>h2{max-width:none}
  .transcript-overlay{position:fixed;inset:auto 18px 96px 18px;max-height:min(62dvh,620px);min-height:0;z-index:18}
  .transcript-body{min-height:0}
}

@media(max-width:680px){
  .topbar{gap:4px;padding:8px 12px 0}.brand-block{gap:10px;min-width:0}.brand-block>div:last-child{min-width:0}.brand-block h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions{gap:2px}.icon-button{border-left:0;border-radius:7px;padding:10px;min-width:42px}.icon-button span{font-size:20px}
  .course-progress{padding-top:4px}.progress-meta{font-size:12px;gap:7px}.progress-track{height:8px}
  .scene-root{padding:18px 14px 18px}.scene-layout{gap:20px}
  .scene-copy h2{font-size:clamp(28px,8vw,34px);line-height:1.1;margin-bottom:14px}.scene-copy p{line-height:1.48;margin-bottom:14px}.lead{font-size:18px!important}
  .eyebrow{margin-bottom:9px}.learning-list{margin:12px 0 18px}.learning-list li{font-size:16px;padding-top:7px;padding-bottom:7px}
  .answer-list{gap:9px;margin:12px 0}.answer-option{padding:13px 14px;min-height:52px}.answer-option input{width:19px;height:19px}
  .action-btn,.transcript-btn{width:100%;padding:13px 16px}.inline-actions{width:100%;margin-top:12px}
  .feedback{padding:14px;margin-top:12px}.feedback p{font-size:15px}.micro-card{padding:13px}
  .bottom-nav{min-height:70px;padding-left:12px;padding-right:12px}.nav-btn{min-height:44px}.scene-dots{max-width:130px;overflow:hidden}
  .transcript-overlay{inset:auto 10px calc(78px + env(safe-area-inset-bottom)) 10px;max-height:68dvh;border-radius:10px}.transcript-head{padding:18px 18px 13px}.transcript-head h3{font-size:22px}.transcript-body{padding:18px;font-size:16px;line-height:1.6}
  dialog{padding:24px 20px;width:calc(100vw - 24px)}.dialog-actions{flex-direction:column-reverse}.dialog-actions .nav-btn{width:100%;justify-self:auto}
  .memory-line{font-size:20px;padding:18px}.takeaway{font-size:17px}
}

@media(max-width:390px){
  .brand-mark{display:none}.top-actions .icon-button{padding-inline:8px}.progress-meta .sep{display:none}.progress-meta{flex-wrap:wrap;row-gap:2px}
  .scene-root{padding-inline:12px}.dot{width:9px;height:9px}.scene-dots{gap:6px}.nav-btn{padding-inline:12px}
}

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

/* === UI consistency pass: fixed scene media + unified answer controls === */
.scene-layout:not(.centered){align-items:start}
.scene-image{
  height:560px;
  min-height:560px;
  align-self:start;
  margin-top:0;
}
.scene-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.scene-copy{
  align-self:start;
  padding-top:18px;
}

/* Single- and multiple-choice questions deliberately share one visual control. */
.answer-option input[type="radio"],
.answer-option input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin:1px 0 0;
  border:2px solid #7f99b3;
  border-radius:4px;
  background:#fff;
  background-position:center;
  background-repeat:no-repeat;
  background-size:14px 14px;
  cursor:pointer;
}
.answer-option input[type="radio"]:checked,
.answer-option input[type="checkbox"]:checked{
  border-color:var(--navy);
  background-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l3.4 3.4L16 5.8'/%3E%3C/svg%3E");
}
.answer-option input[type="radio"]:disabled,
.answer-option input[type="checkbox"]:disabled{cursor:default}
.answer-option span{padding-top:1px}

@media(max-width:1050px){
  .scene-image{height:420px;min-height:420px}
  .scene-copy{padding-top:0}
}
@media(max-width:680px){
  .scene-image{height:300px;min-height:300px}
  .answer-option input[type="radio"],
  .answer-option input[type="checkbox"]{flex-basis:22px;width:22px;height:22px}
}


/* === Tablet/iPad navigation: touch-friendly course menu === */
.tablet-menu-button{
  display:none;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  font-weight:750;
  cursor:pointer;
  white-space:nowrap;
}
.tablet-menu-icon{font-size:21px;line-height:1}
.tablet-menu-body{padding:18px 20px 24px;display:grid;gap:8px;overflow:auto}
.tablet-menu-action{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid transparent;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  font-weight:750;
  cursor:pointer;
}
.tablet-menu-action-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--soft);
  color:var(--navy);
  font-size:20px;
  font-weight:800;
}
.tablet-menu-separator{height:1px;background:var(--line);margin:10px 0}
.tablet-menu-exit{color:#7e3036}
.tablet-menu-exit .tablet-menu-action-icon{background:var(--errorbg);color:#8d3138}
@media(hover:hover){
  .tablet-menu-button:hover,.tablet-menu-action:hover{background:var(--soft2)}
  .tablet-menu-exit:hover{background:var(--errorbg)}
}

/* Use the compact menu on narrow layouts and on touch-first devices such as iPad. */
@media(max-width:1050px), (hover:none) and (pointer:coarse){
  .top-actions{display:none}
  .tablet-menu-button{display:inline-flex;justify-self:end}
  .app-shell.is-paused .tablet-menu-button{pointer-events:none;opacity:.45}
}

@media(max-width:1050px){
  .tablet-menu-button{grid-column:2;grid-row:1}
}

@media(max-width:680px){
  .tablet-menu-button{min-height:44px;padding:9px 12px;gap:7px}
  .tablet-menu-button span:last-child{font-size:14px}
  .tablet-menu-panel{width:min(400px,94vw)}
  .tablet-menu-body{padding:14px 14px 20px}
}

/* === iPad/tablet viewport stability: fixed app frame + internal scrolling === */
/*
   On touch-first/tablet layouts the course behaves like an app:
   header and bottom navigation stay in place while only the learning area scrolls.
   Side panels use the dynamic viewport height so their final items remain reachable
   when Safari's browser chrome changes height.
*/
@media (max-width:1050px), (hover:none) and (pointer:coarse){
  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }

  body{
    min-height:100dvh;
    height:100dvh;
  }

  .app-shell{
    width:100%;
    min-height:100dvh;
    height:100dvh;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden;
  }

  .topbar{
    position:relative;
    top:auto;
    flex:0 0 auto;
    z-index:10;
    padding-top:max(10px,env(safe-area-inset-top));
  }

  .scene-root{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }

  .bottom-nav{
    position:relative;
    bottom:auto;
    flex:0 0 auto;
    z-index:9;
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }

  .side-panel{
    height:100dvh;
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
    padding-bottom:0;
  }

  .panel-head{
    flex:0 0 auto;
    padding-top:max(24px,env(safe-area-inset-top));
  }

  .panel-body,
  .tablet-menu-body{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));
  }

  .overview-progress{
    margin-bottom:4px;
  }
}

/* === iPad compact presentation: less vertical scrolling === */
/*
   Keep desktop unchanged. On tablet-sized layouts and touch-first iPads,
   reduce media/typography/spacing slightly so more of each learning scene
   fits between the fixed header and footer.
*/
@media (min-width:681px) and (max-width:1050px),
       (min-width:681px) and (hover:none) and (pointer:coarse){
  .topbar{
    min-height:70px;
    padding-left:16px;
    padding-right:16px;
    padding-bottom:8px;
    row-gap:2px;
  }

  .brand-block{gap:12px}
  .brand-mark{width:48px;height:48px;flex-basis:48px}
  .brand-block h1{font-size:19px}
  .brand-block p{font-size:12px}

  .course-progress{padding:4px 0 4px}
  .progress-heading{margin-bottom:5px;font-size:11px}
  .progress-heading strong{font-size:13px}
  .progress-track{height:8px}
  .progress-meta{
    margin-top:5px;
    font-size:12px;
    gap:8px;
    padding-inline:10px;
    box-sizing:border-box;
    overflow:visible;
  }
  .progress-meta #chapterMeta{padding-left:2px}

  .scene-root{padding:16px 20px 14px}
  .scene-layout{gap:18px}
  .scene-image{
    /* Stable, larger iPad image. The height depends only on the viewport,
       never on the current scene or question. */
    height:clamp(440px,calc(100dvh - 280px),490px);
    min-height:clamp(440px,calc(100dvh - 280px),490px);
  }
  .scene-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  /* Safari/iPad: do not clip the first glyph of KAPITEL / SZENE. */
  .scene-copy{padding-top:0;overflow:visible}
  .eyebrow{font-size:12px;margin-bottom:8px;padding-left:3px}
  .scene-kicker{font-size:15px}
  .scene-copy h2{font-size:30px;line-height:1.1;margin-bottom:12px}
  .scene-copy p{font-size:17px;line-height:1.45;margin-bottom:12px}
  .lead{font-size:18px!important}

  .learning-list{margin:10px 0 14px}
  .learning-list li{font-size:16px;padding-top:6px;padding-bottom:6px}
  .answer-list{gap:8px;margin:10px 0}
  .answer-option{min-height:50px;padding:11px 13px;gap:12px;line-height:1.38}
  .feedback{margin-top:10px;padding:13px 15px}
  .feedback h3{font-size:17px}
  .feedback p{font-size:15px}
  .inline-actions{margin-top:10px;gap:10px}
  .action-btn,.transcript-btn{padding:12px 18px}

  .summary-card{padding:30px}
  .summary-card h2{font-size:32px}
  .takeaways{gap:12px;margin:20px 0}
  .takeaway{font-size:17px}
  .memory-line{margin-top:22px;padding:17px 20px;font-size:20px}
  .micro-grid{gap:10px;margin-top:18px}
  .micro-card{padding:13px}

  .bottom-nav{min-height:70px;padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:20px;padding-right:20px}
  .nav-btn{min-height:44px;padding:11px 18px}

  /* Menu items stay grouped at the top instead of stretching over the panel height. */
  .tablet-menu-body{
    align-content:start;
    grid-auto-rows:max-content;
    gap:6px;
  }
  .tablet-menu-action{min-height:54px;padding:11px 13px}
  .tablet-menu-separator{margin:7px 0}
}

/* Landscape iPads use the same viewport-based image rule.
   On shorter screens the image can shrink slightly, but it stays stable
   across all scenes and keeps a safety zone above the fixed footer. */
@media (min-width:681px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .scene-image{
    height:clamp(440px,calc(100dvh - 280px),490px);
    min-height:clamp(440px,calc(100dvh - 280px),490px);
  }
  .scene-image img{
    object-fit:cover;
    object-position:center center;
  }
  .scene-root{padding-top:12px;padding-bottom:10px}
  .scene-layout{gap:14px}
}


/* === Unified scene-image geometry on all devices ===
   One radius, one clipping surface, no image-level clipping and no asymmetric shadow. */
.scene-image{
  border-radius:20px;
  overflow:hidden;
  box-shadow:none;
}
.scene-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  -webkit-clip-path:none;
  clip-path:none;
}


/* === Fassung 8: help, cheat sheet, keyboard controls, responsive cards & certificate === */
.dot:is(button){border:0;padding:0;appearance:none;cursor:pointer}
.dot:is(button):focus-visible{outline:3px solid rgba(11,101,177,.28);outline-offset:4px}

.help-content>h3:first-child,.cheat-sheet-content>h3:first-child{margin-top:0}
.keyboard-help{display:grid;gap:12px;margin:14px 0 28px}
.keyboard-row{display:grid;grid-template-columns:126px minmax(0,1fr);align-items:center;gap:20px;color:#506984;font-size:18px;line-height:1.35}
.key-range{display:flex;align-items:center;gap:4px}
.key-dash{font-weight:700;color:var(--muted)}
.keycap{min-width:52px;height:52px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cbd8e5;border-bottom-width:4px;border-radius:8px;background:#f8fafc;color:#14283e;font-weight:750;font-size:22px;line-height:1;box-shadow:0 1px 0 rgba(16,47,89,.04)}
.keycap-wide{min-width:74px;font-size:18px}

.core-messages{display:grid;gap:9px;margin:16px 0 30px}
.core-message{display:grid;grid-template-columns:28px minmax(0,1fr) 24px;gap:8px;align-items:start;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;line-height:1.42}
.core-message.unlocked{background:var(--successbg);border-color:#c7dfd1;color:#284f3c}
.core-message.locked{background:var(--soft2);color:var(--muted)}
.core-number{font-weight:800;color:var(--navy)}
.core-status{justify-self:end;font-size:14px}
.legal-reference-list{display:grid;gap:12px;margin-top:16px}
.legal-reference{border:1px solid var(--line);border-radius:10px;padding:14px 15px;background:var(--soft2)}
.legal-reference strong{display:block;color:var(--navy);font-size:14px;letter-spacing:.02em}
.legal-reference>span{display:block;font-weight:800;margin:3px 0 7px;color:var(--ink)}
.legal-reference p{margin:0!important;font-size:15px!important;line-height:1.48!important}

.certificate-active .bottom-nav{display:none}
.certificate-flow{padding-bottom:22px}
.certificate-card{max-width:980px;margin:0 auto}
.certificate-privacy-note{margin:18px 0 24px;padding:14px 16px;border:1px solid #cbddea;border-radius:9px;background:#f4f9fd;color:#435f79;font-size:15px;line-height:1.5}
.certificate-form{display:grid;gap:22px}
.certificate-form fieldset{margin:0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--soft2)}
.certificate-form legend{padding:0 9px;font-weight:800;color:var(--navy)}
.certificate-form-grid{display:grid;gap:16px}
.certificate-form-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.certificate-form label{display:grid;gap:7px;font-weight:700;color:var(--ink)}
.certificate-form label>span{font-size:14px}
.certificate-form label small{font-weight:500;color:var(--muted)}
.certificate-form input{width:100%;min-height:48px;border:1px solid #bdccdb;border-radius:8px;background:#fff;color:var(--ink);padding:11px 12px;font:inherit;outline:none}
.certificate-form input:focus{border-color:#5f91bf;box-shadow:0 0 0 3px rgba(43,108,168,.13)}
.certificate-form .span-two{grid-column:1/-1}
.certificate-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:6px}
.certificate-status{min-height:24px;margin-top:14px;color:var(--success);font-weight:700}
.certificate-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
.certificate-review-box{border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--soft2)}
.certificate-review-box.span-two{grid-column:1/-1}
.certificate-review-box h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy2)}
.certificate-review-box>strong{display:block;font-size:20px;margin-bottom:8px;color:var(--ink)}
.certificate-review-box p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}

/* iPad/tablet: long card sets get room instead of being squeezed into three columns. */
@media (min-width:681px) and (max-width:1050px),
       (min-width:681px) and (hover:none) and (pointer:coarse){
  .micro-grid-featured-middle,
  .micro-grid-featured-last,
  .micro-grid-long,
  .micro-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .micro-grid-featured-middle .micro-card:nth-child(3),
  .micro-grid-featured-last .micro-card:last-child,
  .micro-grid-long .micro-card:last-child{grid-column:1/-1}
  .micro-grid-featured-middle .micro-card:nth-child(4){grid-column:1}
  .micro-grid-featured-middle .micro-card:nth-child(5){grid-column:2}
  .micro-card{overflow-wrap:anywhere;word-break:normal}
}

@media(max-width:680px){
  .keyboard-row{grid-template-columns:108px minmax(0,1fr);gap:12px;font-size:16px}
  .keycap{min-width:46px;height:46px;font-size:20px;padding-inline:10px}
  .keycap-wide{min-width:66px;font-size:16px}
  .certificate-form-grid.two-col,.certificate-review-grid{grid-template-columns:1fr}
  .certificate-form .span-two,.certificate-review-box.span-two{grid-column:auto}
  .certificate-actions{display:grid;grid-template-columns:1fr;width:100%}
  .certificate-actions .action-btn,.certificate-actions .transcript-btn{width:100%}
}