/* Official ZEAT brand: Charte Canva v3, pp. 11–15; zeatapp.com. */
@font-face{font-family:Poppins;src:url('vendor/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('vendor/Poppins-ExtraBold.ttf') format('truetype');font-weight:800 900;font-display:swap}
:root{color-scheme:light;--ink:#1a3062;--navy-deep:#0f234a;--paper:#f7f8fc;--muted:#697a93;--line:#e2e7f0;--orange:#f23c0a;--red:#ee0f35;--mint:#1a3062}
body{background:#eef1f7;color:var(--ink)}
.topbar{background:var(--paper);border-color:var(--line);padding-left:24px;padding-right:24px}
.brand{display:inline-flex;align-items:center;flex-shrink:0;letter-spacing:normal}
.brand img{display:block;width:88px;height:auto;min-height:24px;object-fit:contain}
.top-divider{background:#1a306226}.top-label,.top-right{color:#697a93}.top-label{letter-spacing:1.4px}
.layout{border-color:var(--line)}.workspace{background:var(--paper)}.lesson-heading{color:#697a93;letter-spacing:.7px}
.stage{background:var(--navy-deep);border-radius:24px;box-shadow:0 6px 24px #1a306210}.swiper-slide video{background:var(--navy-deep)}
.welcome{background:#fff;isolation:isolate;border:1px solid var(--line);border-radius:24px;overflow:auto}
.welcome::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#1a306205 1px,transparent 1px),linear-gradient(90deg,#1a306205 1px,transparent 1px);background-size:24px 24px}
.welcome-card{text-align:left;max-width:310px;width:100%}.welcome-mark{display:block;width:126px;height:40px;margin:0 0 28px;letter-spacing:normal}.welcome-mark img{display:block;width:100%;height:100%;object-fit:contain}
.welcome-card .eyebrow{color:#697a93;letter-spacing:1.6px;font-size:10px}.welcome-card .eyebrow::before{content:'';display:inline-block;width:24px;height:3px;background:linear-gradient(90deg,var(--orange),var(--red));border-radius:8px;vertical-align:middle;margin-right:8px}
h1,.welcome-card h2,dialog h2,.end-card h2{font-family:Poppins,Inter,sans-serif;font-weight:800;letter-spacing:-.7px}
.welcome-card h2{font-size:28px;line-height:1.22;color:var(--ink);margin:16px 0}
.welcome-card p:not(.eyebrow){color:#697a93;font-size:14px;line-height:1.55}.welcome-hint{color:#697a93;font-size:11px;line-height:1.5}
.primary,.chapter-trigger{background:var(--ink);color:#fff;border-radius:999px;box-shadow:0 4px 12px #1a306215;font-family:Poppins,Inter,sans-serif;font-weight:700}
.primary:hover,.chapter-trigger:hover{background:var(--navy-deep)}.welcome-card .primary{width:100%;margin-top:14px;min-height:48px;font-size:13px}
.caption-heading h2{color:var(--ink);font-size:14px;line-height:1.45;font-weight:600}.caption-heading .icon-btn{color:var(--ink)}
.scrub-row #time{color:#697a93}.scrub-row input{accent-color:var(--ink)}
.icon-btn{color:var(--ink)}.icon-btn:hover{background:#1a30620a}.play-btn{background:var(--ink);color:white;border-color:transparent}.play-btn:hover{background:var(--navy-deep)}
select{color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px}
.mobile-navigation{border-color:var(--line)}.chapter-trigger{font-size:12px;padding:0 16px}.mobile-navigation .swipe-hint{color:#697a93}
.sidebar{background:#fff;box-shadow:0 -16px 60px #0f234a26}.sidebar::before{background:#a2adbc}.sidebar h1{font-size:25px;line-height:1.25}.sidebar-intro{color:#697a93;line-height:1.55}.course-progress{color:#697a93}
progress{accent-color:var(--ink)}progress::-webkit-progress-bar{background:#e8edf5}progress::-webkit-progress-value{background:var(--ink)}
.chapter-number{color:#697a93}.chapter summary{color:var(--ink);font-weight:700}.chapter summary:after{color:#697a93}.chapter summary:hover,.lesson-link:hover{background:#f7f8fc}
.lesson-link{color:#697a93}.lesson-link[aria-current=true]{background:#edf1f9;color:var(--ink)}.lesson-link[aria-current=true] .lesson-indicator{color:var(--orange)}.lesson-link .duration{color:#697a93}
.sidebar-bottom,.restart-course{color:#697a93}.save-dot{background:var(--ink)}.sidebar-backdrop{background:#0f234a66}
dialog{background:#fff;color:var(--ink)}dialog::backdrop{background:#0f234a66}#transcript-context{color:#697a93;border-color:var(--orange)}#transcript-body p{color:#1a3062;line-height:1.6}.dialog-header .eyebrow{color:#697a93}
.end-card,.video-error{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 32px #0f234a20}.end-card .eyebrow{color:#697a93}.text-button{color:var(--ink)}.notice{background:var(--ink);color:white;border-radius:16px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--orange)}
@media(max-height:720px){.welcome-mark{display:none}.welcome-card h2{font-size:23px;margin:12px 0}.welcome-card p:not(.eyebrow){font-size:12px}.welcome-card .primary{margin-top:6px}.welcome{padding:20px}.welcome-hint{display:none}}
@media(max-width:350px){.topbar{padding-left:20px;padding-right:20px}.caption-heading h2{font-size:13px}.chapter-trigger{padding:0 12px}}

/* Clear separation: chapter context, video controls, lesson navigation. */
.topbar{gap:12px;padding-left:20px;padding-right:20px}.top-label{font-size:12px;letter-spacing:0;text-transform:none}.top-right{margin-left:auto}.topbar .chapter-trigger{min-height:44px;padding:0 14px;font:600 12px Inter,sans-serif;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.workspace{padding-top:12px}.lesson-heading{display:block;margin-bottom:12px;padding:0 4px;letter-spacing:0}.chapter-context{display:flex;flex-direction:column;gap:5px}#chapter-label{font-size:12px;line-height:1.4;font-weight:650;color:var(--ink)}#lesson-count{font-size:11px;color:var(--muted)}#lesson-title{font:700 18px/1.35 Inter,sans-serif;letter-spacing:-.3px;color:var(--ink);margin:9px 0 0}.view-layout{height:auto}.stage{border-radius:18px}
.controls{display:grid;grid-template-columns:1fr 1fr 44px;gap:8px;padding-top:4px}.controls .play-btn{width:100%;height:44px;gap:8px;border-radius:12px;font-size:13px;font-weight:650}.explain-btn{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:13px;font-weight:600}.settings-btn{width:44px;height:44px;border-radius:12px;background:transparent;color:var(--ink);font-weight:700;letter-spacing:2px}.settings-btn:hover,.explain-btn:hover{background:#edf1f9}
.mobile-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:10px;margin-top:10px}.step-btn{min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font-size:13px;font-weight:650}.step-next{background:#edf1f9;border-color:#edf1f9}.step-btn:hover:not(:disabled){background:#e1e8f4}
.welcome-card h2{font-size:27px}.welcome-card .eyebrow{font-size:9px;letter-spacing:1px}.welcome-card p:not(.eyebrow){line-height:1.6}.welcome-hint{margin-top:14px}.welcome-card .primary{min-width:0;font:650 13px Inter,sans-serif}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0;font-size:14px}.setting-row select{width:100px}#settings-dialog h2{font-size:21px}#settings-dialog #rewind{font:600 13px Inter,sans-serif;padding:0 12px;margin-bottom:8px}.sidebar-intro{margin-top:8px;margin-bottom:16px}.sidebar h1{font-size:25px}
@media(max-height:720px){.workspace{padding-top:4px}.lesson-heading{margin-bottom:8px}#lesson-title{font-size:15px;margin-top:5px}.chapter-context{gap:2px}.mobile-navigation{margin-top:6px;padding-top:6px}.welcome{padding:16px}.welcome-card h2{font-size:21px;margin:8px 0}.welcome-card p:not(.eyebrow){margin:8px 0;font-size:12px}.welcome-card .eyebrow{display:none}.welcome-card .primary{min-height:44px;margin-top:4px}}
@media(max-width:350px){.top-label{display:none}.topbar{padding-left:16px;padding-right:16px}#chapter-label{font-size:11px}.controls{grid-template-columns:1fr 1fr 40px;gap:5px}.settings-btn{width:40px}.explain-btn{padding:0 8px;font-size:12px}}

.fullscreen-btn{position:absolute;top:10px;right:10px;z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid #d8e0ed;border-radius:999px;background:#fffffff5;color:var(--ink);box-shadow:0 2px 10px #0f234a16;font-size:12px;font-weight:650;padding:0 12px}.fullscreen-btn svg{width:18px;height:18px;flex-shrink:0}.fullscreen-btn:hover{background:#edf1f9}
.expanded-player .topbar,.expanded-player .lesson-heading,.expanded-player .mobile-navigation{display:none}
.expanded-player .layout{max-width:none;width:100%;height:100dvh;border:0}.expanded-player .workspace{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.expanded-player .player-footer{width:min(100%,480px);align-self:center}.expanded-player .stage{border-radius:12px}
@media(max-width:350px){.fullscreen-btn{font-size:12px;gap:5px}}

/* Refined hierarchy, with an unobstructed video and the familiar control row. */
.topbar{border-bottom:1px solid var(--line)}.topbar .chapter-trigger{border-color:#d8e0ed}.workspace{padding:14px 16px max(10px,env(safe-area-inset-bottom))}.lesson-heading{padding:0;margin:0 0 6px}
.chapter-context{flex-direction:row;align-items:center;gap:9px}.chapter-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;background:#fff0e9;color:#c52f08;font-size:11px;font-weight:750;letter-spacing:.4px}#chapter-label{font-size:12px;font-weight:600;line-height:1.4;color:#526580}#lesson-title{font-size:20px;line-height:1.25;font-weight:700;margin-top:9px;letter-spacing:-.5px}
.video-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:44px;margin-bottom:6px}#lesson-count{font-size:12px;line-height:1.4;font-weight:500;color:#697a93}.fullscreen-btn{position:static;z-index:auto;min-height:44px;border:0;border-radius:10px;padding:0 8px;background:transparent;box-shadow:none;font-size:12px;gap:7px;color:var(--ink)}.fullscreen-btn:hover{background:#e8edf6}
.stage{border:1px solid #dce3ef;background:#eef2f8;border-radius:18px;box-shadow:0 4px 14px #1a306208}.swiper-slide video{background:#eef2f8}.player-footer{padding:6px 0 0}.scrub-row{gap:10px}.scrub-row input{appearance:none;-webkit-appearance:none;background:transparent;margin:0;height:30px;cursor:pointer}.scrub-row input::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,#1a3062 var(--played,0%),#dce3ed var(--played,0%))}.scrub-row input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border:2px solid white;border-radius:50%;background:#1a3062;margin-top:-5px;box-shadow:0 0 0 1px #1a30621a}.scrub-row input::-moz-range-track{height:4px;border-radius:99px;background:#dce3ed}.scrub-row input::-moz-range-progress{height:4px;background:#1a3062;border-radius:99px}.scrub-row input::-moz-range-thumb{width:12px;height:12px;border:2px solid white;border-radius:50%;background:#1a3062}
.controls .play-btn{box-shadow:0 3px 8px #1a306212}.controls .explain-btn{border-color:#dce3ed}.mobile-navigation{margin-top:12px;padding-top:10px}.step-btn{border:0;background:transparent;font-size:12px}.step-next{background:#e9eef7}.step-btn:hover:not(:disabled){background:#e1e8f4}
.chapter-name{flex:1;min-width:0}.chapter-size{font-size:10px;color:#697a93;white-space:nowrap;font-weight:450}.chapter summary{gap:9px}.chapter summary:after{margin-left:0}.chapter-number{display:inline-flex;align-items:center;justify-content:center;background:#f0f3f8;border-radius:7px;width:26px;height:26px;padding:0;align-self:center;flex-shrink:0;color:#526580}.chapter[open] .chapter-number{background:#fff0e9;color:#c52f08}.lesson-copy{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px}.lesson-state{font-size:10px;font-weight:600;color:#526580}.lesson-link[aria-current=true]{box-shadow:inset 3px 0 #f23c0a;background:#f0f3fa}.lesson-link[aria-current=true] .lesson-state{color:#c52f08}.lesson-link{padding-left:16px}.chapter{margin-bottom:7px}
.expanded-player .video-toolbar{margin-bottom:4px;min-height:44px}.expanded-player .video-toolbar #lesson-count{color:#526580}.expanded-player .stage{border:0}
@media(max-height:720px){.workspace{padding-top:7px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.chapter-badge{width:24px;height:24px}#lesson-title{font-size:17px;margin-top:6px}.lesson-heading{margin-bottom:0}.video-toolbar{margin-bottom:4px}.mobile-navigation{margin-top:6px;padding-top:6px}.stage{border-radius:14px}}
@media(max-width:350px){.workspace{padding-left:12px;padding-right:12px}#chapter-label{font-size:11px}.chapter-size{font-size:9px}.chapter summary{font-size:13px}}

.swipe-coach{position:absolute;z-index:2;left:50%;bottom:52px;transform:translateX(-50%);display:flex;align-items:center;gap:11px;width:max-content;max-width:calc(100% - 28px);padding:12px 17px;border:1px solid #ffffff24;border-radius:18px;background:#1a3062f2;color:#fff;box-shadow:0 6px 24px #0f234a26;pointer-events:none;animation:swipe-coach-presence 8s ease both}
.swipe-coach>svg{width:29px;height:38px;flex-shrink:0;overflow:visible}.swipe-coach>span{display:flex;flex-direction:column;gap:4px}.swipe-coach strong{font-size:12px;font-weight:650;line-height:1.3}.swipe-coach span span{font-size:11px;line-height:1.3;color:#d8e1f3}.swipe-hand{animation:swipe-gesture 1.5s ease-in-out 5}.swipe-arrow{color:#ffb8a7;animation:swipe-arrow 1.5s ease-in-out 5}
@keyframes swipe-gesture{0%,12%,100%{transform:translateY(var(--swipe-start,4px));opacity:.6}45%,65%{transform:translateY(var(--swipe-end,-5px));opacity:1}85%{opacity:.4}}
@keyframes swipe-arrow{0%,100%{opacity:.4}45%,65%{opacity:1}}
@keyframes swipe-coach-presence{0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.swipe-coach,.swipe-hand,.swipe-arrow{animation:none!important}}
@media(max-height:640px){.swipe-coach{bottom:42px;padding:9px 13px;border-radius:14px}}
.swipe-backwards{--swipe-start:-4px;--swipe-end:5px}.swipe-backwards .swipe-arrow{transform:rotate(180deg);transform-origin:16px 7px}#replay-swipe{display:block;width:100%;margin-top:10px}

