@font-face{font-family:Manrope;src:url('../van-baar-tv/assets/Manrope.ttf')}*{box-sizing:border-box}:root{font:16px/1.6 Manrope,system-ui,sans-serif;color-scheme:dark;background:#111318;color:#f7f8fa}body{margin:0}button,select,input{font:inherit}button{border:0;border-radius:7px;min-height:44px;padding:8px 14px;color:#14171b;background:#ff9d43;font-weight:650;cursor:pointer}button:hover{background:#ffb266}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffb565;outline-offset:4px}[hidden]{display:none!important}h1,h2,h3{text-wrap:balance}h1{font-size:clamp(34px,4vw,60px);font-weight:550;line-height:1.1;letter-spacing:-.035em;margin:0 0 20px}h2{font-size:21px;font-weight:550;line-height:1.3}p{max-width:70ch}a{color:inherit}.demo-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 5vw;font-size:12px}.demo-header a{min-height:44px;display:flex;align-items:center;text-decoration:none}.npo-main{max-width:1600px;padding:20px 5vw 60px;margin:auto}.npo-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}.npo-heading p{font-size:15px;color:#c2cad6;max-width:37ch;line-height:1.8;margin:0 0 6px}.learning-layout{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(270px,1fr);gap:28px;align-items:start}.video-frame{aspect-ratio:16/9;position:relative;overflow:hidden;background:#263343;border-radius:8px}.video-frame video{width:100%;height:100%;object-fit:cover;display:block}.video-frame:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#05101caa);pointer-events:none}.clip-label{position:absolute;left:16px;top:16px;background:#0a1623b3;padding:5px 10px;border-radius:4px;font-size:11px}.captions{position:absolute;bottom:8%;left:12px;right:12px;z-index:1;text-align:center;font-size:clamp(13px,1.5vw,23px);line-height:1.65}.captions>div{width:fit-content;max-width:100%;margin:4px auto;background:#090f17e8;padding:4px 10px;border-radius:4px}.captions button{font:inherit;color:white;min-height:44px;background:none;border:0;border-radius:3px;padding:0 2px}.captions button:hover,.captions button.spoken{background:#ff9d43;color:#151515}.captions #english{color:#ffd3a3;font-size:.85em}.captions.large{font-size:clamp(15px,2vw,30px)}.playback{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:16px 0}.playback button{font-size:12px}.playback>span{font-size:11px;color:#c2cad6}.timeline-label{flex:1;min-width:120px;font-size:0}.timeline-label input{width:100%;accent-color:#ff9d43;min-height:44px}#replay{background:#272c35;color:white}.caption-controls{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:#191d25;padding:16px;border-radius:8px}.caption-controls label{font-size:12px;display:flex;align-items:center;gap:8px}.caption-controls select{background:#252b36;border:1px solid #555f6e;color:white;border-radius:6px;padding:8px;min-height:44px;max-width:100%}.caption-controls input[type=checkbox]{width:20px;height:20px;accent-color:#ff9d43}.toggle{min-height:44px}.sample-note{font-size:11px;line-height:1.8;color:#c2cad6;margin-top:20px}.learning-panel{background:#191d25;border-radius:10px;padding:24px}.word-symbol{font-size:50px;color:#ffb565;font-weight:400}.learning-panel p{font-size:13px;line-height:1.7;color:#c6cedb}.learning-panel h2{margin:6px 0 12px}.learning-panel button{font-size:12px}.panel-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c2cad6}.panel-title button{background:#2b3442;color:white;font-size:20px;min-width:44px}#word-title{font-size:38px;margin:15px 0 5px}#word-meaning{color:#ffb565;font-size:20px;margin:0 0 24px}#word-context{color:white}#word-translation{color:#c2cad6;margin-bottom:22px}#word-replay{background:#303a47;color:white;margin-top:8px}#word-status{font-size:11px}.vocabulary{border-top:1px solid #4b5361;padding-top:24px;margin-top:28px}.vocabulary-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.vocabulary-heading h2{font-size:17px}.vocabulary-heading span{font-size:11px;color:#c2cad6;white-space:nowrap}.vocabulary label{display:grid;gap:6px;font-size:11px;color:#c2cad6}.vocabulary input{width:100%;min-height:44px;background:#11151b;border:1px solid #677180;border-radius:6px;padding:8px 10px;color:white;font-size:13px}.vocabulary input::placeholder{color:#b8c2d0}.saved-word{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #444c58}.saved-word span{display:block;color:#ffb565;font-size:13px}.saved-word button{background:#2d3746;color:white;font-size:20px}.secondary{background:#2d3746;color:white;margin-top:12px;font-size:11px}.vocabulary>p{font-size:11px;margin-bottom:0}
@media(max-width:800px){.learning-layout{grid-template-columns:minmax(0,1fr)}.npo-heading{display:block}.npo-heading p{max-width:54ch}.learning-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px}.vocabulary{border-top:0;margin:0;padding:0}.npo-main{padding:12px 20px 40px}.demo-header{padding:12px 20px;font-size:11px}.demo-header span{text-align:right;max-width:19ch}.npo-heading{margin-bottom:24px}.npo-heading h1{font-size:36px;margin-bottom:16px}.npo-heading p{font-size:13px}.captions{font-size:16px}}
@media(max-width:500px){.npo-main{padding:12px 14px 30px}.demo-header{padding:10px 14px}.npo-heading h1{font-size:32px}.learning-panel{display:block;padding:20px}.vocabulary{border-top:1px solid #4b5361;margin-top:24px;padding-top:20px}.video-frame{aspect-ratio:4/3}.captions{font-size:12px;left:6px;right:6px;bottom:8%}.captions>div{padding:0 6px;line-height:1.5}.captions button{min-height:44px}.captions.large{font-size:15px}.clip-label{left:10px;top:10px;font-size:9px}.playback{gap:10px}.playback button{font-size:11px;padding:8px 10px}.playback>span{font-size:10px}.timeline-label{min-width:90px}.caption-controls{padding:12px;gap:10px}.caption-controls label{font-size:11px;max-width:100%}.caption-controls>label:first-child{width:100%;justify-content:space-between}.sample-note{font-size:10px}.learning-layout{gap:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.panel-title button{font-size:12px;min-height:44px;padding:8px 12px}