body{margin:0;background:#0E141B}
.f{width:1280px;height:720px;position:relative;overflow:hidden;background:#0E141B;color:#ECE5D3;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:15px}
.f.paused *,.f.paused *::before,.f.paused *::after{animation-play-state:paused !important}
.serif{font-family:'Source Serif 4',Georgia,serif}
.gold{color:#E8B04B}.mut{color:#9AA7B4}.dim{color:#6B7A89}
/* top and bottom bars */
.top{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:5px;padding:0 16px;box-sizing:border-box;background:#0B1016;border-bottom:1px solid #1C2733;z-index:20}
.logo{font:800 18px 'Barlow Condensed',sans-serif;letter-spacing:.32em;color:#E8B04B;margin-right:12px}
.chip{appearance:none;border:1px solid #2B3947;background:transparent;color:#9AA7B4;font:600 13px 'Barlow Condensed',sans-serif;letter-spacing:.04em;padding:5px 8px;border-radius:5px;cursor:pointer;white-space:nowrap}
.chip:hover{color:#ECE5D3;border-color:#4A5B6C}
.chip.cur{color:#1A1305;background:#E8B04B;border-color:#E8B04B}
.book{margin-left:auto;padding:7px 14px;border-radius:6px;background:#E8B04B;color:#1A1305;font-weight:700;font-size:14px;text-decoration:none;letter-spacing:.04em;white-space:nowrap}
.bar{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;box-sizing:border-box;background:#0B1016;border-top:1px solid #1C2733;z-index:20}
.ib{appearance:none;border:0;background:transparent;color:#ECE5D3;width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ib:hover{background:#1C2733}
.tm{font-size:14px;font-weight:600;color:#9AA7B4;min-width:90px;font-variant-numeric:tabular-nums}
.prog{flex:1;height:42px;position:relative;cursor:pointer;display:flex;align-items:center}
.prog .tr{position:absolute;left:0;right:0;height:4px;border-radius:2px;background:#2B3947}
.prog .fi{position:absolute;left:0;height:4px;border-radius:2px;background:#E8B04B}
.prog .tk{position:absolute;width:2px;height:10px;background:#4A5B6C;top:16px}
.lang{appearance:none;border:1px solid #2B3947;background:transparent;color:#9AA7B4;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.06em;width:34px;height:28px;border-radius:5px;cursor:pointer}
.lang.cur{background:#ECE5D3;color:#10161D;border-color:#ECE5D3}
.lang.off{opacity:.3;cursor:default}
.cc{appearance:none;border:1px solid #2B3947;background:transparent;color:#9AA7B4;font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:.08em;height:28px;padding:0 8px;border-radius:5px;cursor:pointer}
.cc.cur{border-color:#E8B04B;color:#E8B04B}
/* captions */
.capt{position:absolute;left:336px;right:36px;bottom:70px;display:flex;justify-content:center;z-index:15;pointer-events:none}
.capt>div{background:#0B1016E8;border:1px solid #2B3947;border-radius:8px;padding:9px 16px;display:flex;gap:12px;align-items:baseline;max-width:880px}
.capt .who{font-size:11px;font-weight:700;letter-spacing:.16em;flex:0 0 auto;text-transform:uppercase}
.capt .tx{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.35}
/* left rail: the wizard steps of the chapter */
.rail{position:absolute;left:0;top:52px;bottom:56px;width:312px;box-sizing:border-box;padding:22px 18px 0 24px;border-right:1px solid #1C2733;background:#0C1218;z-index:10;overflow:hidden}
.rail .no{font:800 52px/1 'Barlow Condensed',sans-serif;color:#E8B04B}
.rail h2{font:600 26px/1.1 'Source Serif 4',Georgia,serif;margin:6px 0 4px;white-space:nowrap;overflow:hidden}
.rail .sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#6B7A89;margin-bottom:14px}
.steps{position:absolute;left:24px;right:18px;top:170px;bottom:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.steps .in{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.st{display:flex;gap:10px;align-items:center;height:31px;box-sizing:border-box;padding:0 0 0 10px;white-space:nowrap;border-left:2px solid #1C2733;font-size:15px;line-height:1.25;color:#6B7A89;transition:color .3s,border-color .3s}
.st span{overflow:hidden;text-overflow:ellipsis}
.st i{flex:0 0 18px;height:18px;border-radius:50%;border:1.5px solid #2B3947;font:700 11px/16px 'Barlow Condensed';text-align:center;font-style:normal;color:#0E141B;margin-top:1px}
.st.done{color:#9AA7B4}.st.done i{background:#30C77B;border-color:#30C77B}
.st.done i::after{content:'✓'}
.st.now{color:#ECE5D3;border-left-color:#E8B04B}.st.now i{border-color:#E8B04B;background:#E8B04B33}
/* app window */
.win{position:absolute;left:330px;top:64px;transform:scale(.87);transform-origin:50% 0;width:932px;height:578px;border-radius:12px;background:#111922;border:1px solid #2B3947;box-shadow:0 30px 60px #0008;overflow:hidden}
.win .tb{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#0B1016;border-bottom:1px solid #1C2733}
.win .tb .d{width:10px;height:10px;border-radius:50%;background:#2B3947}
.win .tb .url{margin-left:14px;font-size:12px;color:#6B7A89;letter-spacing:.04em}
.tabs{display:flex;gap:2px;margin-left:auto}
.tabs span{font-size:13px;font-weight:600;letter-spacing:.04em;color:#6B7A89;padding:4px 10px;border-radius:5px}
.tabs span.on{color:#1A1305;background:#E8B04B}
.view{position:absolute;left:0;right:0;top:35px;bottom:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.view.vis{opacity:1;visibility:visible;transition:opacity .45s ease}
/* device frames */
.dev{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s;display:flex;align-items:center;justify-content:center}
.dev.vis{opacity:1;visibility:visible;transition:opacity .45s}
.phone{width:290px;height:560px;border-radius:36px;background:#0B1016;border:2px solid #2B3947;box-shadow:0 30px 60px #0009;position:relative;overflow:hidden}
.tablet{width:840px;height:526px;border-radius:26px;background:#0B1016;border:2px solid #2B3947;box-shadow:0 30px 60px #0009;position:relative;overflow:hidden}
/* generic UI */
.card{background:#151E28;border:1px solid #2B3947;border-radius:10px;box-sizing:border-box}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;border:1px solid #2B3947;background:#1C2733;color:#ECE5D3;font-weight:600;font-size:14px;letter-spacing:.03em;white-space:nowrap;transition:box-shadow .3s,background .3s}
.btn.pri{background:#E8B04B;border-color:#E8B04B;color:#1A1305}
.btn.ok{background:#30C77B;border-color:#30C77B;color:#0B1016}
.btn.red{background:#E5484D;border-color:#E5484D;color:#fff}
.btn.sm{padding:3px 8px;font-size:12px}
.inp{height:32px;border-radius:6px;border:1px solid #2B3947;background:#0E141B;display:flex;align-items:center;padding:0 10px;font-size:14px;color:#ECE5D3;box-sizing:border-box;overflow:hidden;white-space:nowrap}
.lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B7A89;margin:8px 0 4px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;background:#1C2733;color:#9AA7B4;white-space:nowrap}
.badge.g{background:#30C77B22;color:#30C77B}.badge.a{background:#E8B04B22;color:#E8B04B}.badge.r{background:#E5484D22;color:#FF8A8E}.badge.b{background:#5AA9FF22;color:#7FB8FF}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#30C77B}
.dot.a{background:#E8B04B}.dot.r{background:#E5484D}.dot.n{background:#4A5B6C}
.row{display:flex;align-items:center;gap:10px}
.ks{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:#10161D;font-weight:800;font-size:15px;flex:0 0 24px}
.k1{background:#5AA9FF}.k2{background:#FF8A5B}.k3{background:#7BD88F}.k4{background:#F5C451}.k5{background:#C792EA}.k6{background:#4FD1C5}.k7{background:#FF6B9A}.k8{background:#B8C4D6}.k9{background:#F6AD55}
.tg{width:34px;height:18px;border-radius:9px;background:#2B3947;position:relative;flex:0 0 34px;transition:background .3s}
.tg::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#9AA7B4;transition:left .3s,background .3s}
.tg.on{background:#30C77B}.tg.on::after{left:18px;background:#fff}
.seg{display:inline-flex;border:1px solid #2B3947;border-radius:6px;overflow:hidden}
.seg span{padding:5px 12px;font-size:13px;font-weight:600;color:#9AA7B4;border-right:1px solid #2B3947}
.seg span:last-child{border-right:0}
.seg span.on{background:#E8B04B;color:#1A1305}
.dlg{position:absolute;background:#151E28;border:1px solid #4A5B6C;border-radius:12px;box-shadow:0 24px 60px #000A;padding:16px 18px;box-sizing:border-box}
.scrim{position:absolute;inset:0;background:#0B1016AA}
/* highlight of the element being explained */
.hl{box-shadow:0 0 0 2px #E8B04B,0 0 0 7px #E8B04B33 !important;border-radius:6px;animation:hlp 1.6s ease-in-out infinite;position:relative;z-index:3}
@keyframes hlp{0%,100%{box-shadow:0 0 0 2px #E8B04B,0 0 0 7px #E8B04B33}50%{box-shadow:0 0 0 2px #E8B04B,0 0 0 12px #E8B04B11}}
/* elements that appear on a step */
.vx{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.vx.vis{opacity:1;transform:none}
.vf{opacity:0;transition:opacity .45s ease}
.vf.vis{opacity:1}
.vs{opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.9,.25,1.2)}
.vs.vis{opacity:1;transform:none}
/* typing effect */
.typ{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0}
.vis .typ,.typ.vis{animation:typ 1.6s steps(28) .2s forwards}
@keyframes typ{to{max-width:100%}}
/* cursor */
.mouse{position:absolute;width:22px;height:22px;z-index:30;pointer-events:none;transition:left .9s cubic-bezier(.45,.05,.25,1),top .9s cubic-bezier(.45,.05,.25,1),opacity .4s}
.mouse svg{filter:drop-shadow(0 2px 3px #000a)}
.mouse .rp{position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;border:2px solid #E8B04B;opacity:0}
.mouse.clkA .rp{animation:rpA .6s ease-out .85s}
.mouse.clkB .rp{animation:rpB .6s ease-out .85s}
@keyframes rpA{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.8)}}
@keyframes rpB{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.8)}}
/* misc animation */
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.blink{animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.rglow{animation:rglow 1.6s ease-in-out infinite}
@keyframes rglow{0%,100%{box-shadow:0 0 0 0 #E5484D88}50%{box-shadow:0 0 0 10px #E5484D00}}
.ggl{animation:ggl 1.6s ease-in-out infinite}
@keyframes ggl{0%,100%{box-shadow:0 0 0 0 #30C77B88}50%{box-shadow:0 0 0 10px #30C77B00}}
.grow{transform-origin:left;animation:grow 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sweep{animation:sweep 8s linear infinite}
@keyframes sweep{from{left:0%}to{left:100%}}
.kb{animation:kb 30s ease-out both}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-2%)}}
.wave span{display:inline-block;width:4px;margin:0 1.5px;border-radius:2px;background:#4FD1C5;animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{height:6px}50%{height:30px}}
.wave span:nth-child(3n+1){animation-delay:.15s}.wave span:nth-child(3n+2){animation-delay:.35s}.wave span:nth-child(4n){animation-delay:.55s}
.spin{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.start{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#0E141BE6}
.bigplay{appearance:none;border:0;width:104px;height:104px;border-radius:50%;background:#E8B04B;color:#1A1305;display:flex;align-items:center;justify-content:center;cursor:pointer;animation:bp 2.4s ease-in-out infinite}
@keyframes bp{0%,100%{box-shadow:0 0 0 0 #E8B04B55}50%{box-shadow:0 0 0 22px #E8B04B00}}
.st.on i{background:#30C77B;border-color:#30C77B}.st.on i::after{content:'✓'}
.modeb.on{background:#E8B04B;color:#1A1305;font-weight:700}
/* c5–c10 */
.abs{position:absolute}
.ph{padding:5px 12px;border-radius:6px;border:1px solid #2B3947;font-size:13px;font-weight:600;color:#9AA7B4;transition:background .3s,color .3s}
.ph.on{background:#E8B04B;color:#1A1305;border-color:#E8B04B}
.ph.live.on{background:#E5484D;color:#fff;border-color:#E5484D}
.tile{position:relative;border-radius:5px;overflow:hidden;border:2px solid #2B3947;background:#000;transition:border-color .3s}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile b{position:absolute;left:3px;top:2px;font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
.tile.pgm,.tile.on{border-color:#E5484D}
.tile.pvw{border-color:#30C77B}
.tile.nxt{border-style:dashed;border-color:#E8B04B}
.big{font:800 64px/1 'Barlow Condensed';color:#ECE5D3;font-variant-numeric:tabular-nums}
.edge{position:absolute;inset:0;border-radius:24px;pointer-events:none;border:8px solid transparent;transition:border-color .4s}
.edge.r.vis{border-color:#E5484D}.edge.g.vis{border-color:#30C77B}.edge.a.vis{border-color:#E8B04B;animation:blink .9s steps(1) infinite}
.draw path,.draw polyline{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.4s ease}
.draw.vis path,.draw.vis polyline{stroke-dashoffset:0}
.big3{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.lamp{width:9px;height:9px;border-radius:50%;display:inline-block}
.dia{display:inline-block;width:10px;height:10px;background:#F5C451;transform:rotate(45deg)}
.btn.on{background:#E8B04B;border-color:#E8B04B;color:#1A1305}
.badge.on{background:#E8B04B;color:#1A1305}
.seg span{white-space:nowrap}
/* fit 1280×720 into any screen */
:root{color-scheme:dark}
html,body{height:100%;margin:0;background:#0B1016;overflow:hidden}
.f{position:absolute;left:0;top:0;transform-origin:0 0}
.chip span{display:none}.chip.cur span{display:inline}
/* c11, c12: kino način (širše okno brez stolpca korakov) */
.win{transition:left .6s ease,width .6s ease}
.rail{transition:opacity .5s ease}
.f.kino .rail{opacity:0;pointer-events:none}
.f.kino .win{left:24px;width:1232px}
.lv{position:absolute;overflow:hidden;border-radius:8px;background:#000}
.lv video,.lv img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lv.pgm{box-shadow:0 0 0 3px #E5484D}
.ov{position:absolute;display:flex;align-items:center;gap:6px;font:600 14px/1.2 'Barlow Condensed';color:#ECE5D3}
.ovc{background:#0B1016D9;border:1px solid #2B394788;border-radius:8px;padding:6px 10px;backdrop-filter:blur(2px)}
.ovbar{font:800 40px/1 'Barlow Condensed';color:#E8B04B;font-variant-numeric:tabular-nums}
.cam{display:inline-block;padding:2px 8px;border-radius:6px;color:#0B1016;font-weight:800}
.cd{font:800 26px/1 'Barlow Condensed';color:#ECE5D3;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.cd.soon{color:#E5484D}
.trak{position:absolute;height:24px;border-radius:5px;overflow:hidden;background:#0B1016}
.trak span{position:absolute;top:0;bottom:0;border-right:1px solid #0B1016;font:700 12px/24px 'Barlow Condensed';color:#0B1016;text-align:center;overflow:hidden}
.trak .pz{position:absolute;top:-2px;bottom:-2px;width:2px;background:#ECE5D3;box-shadow:0 0 6px #ECE5D3}
.score{position:absolute;background:#F6F1E6;border-radius:6px;overflow:hidden}
.score img{display:block;width:100%}
.score .fr{position:absolute;border:3px solid #E8B04B;border-radius:4px;background:#E8B04B22;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.sek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.sek.on{opacity:1}
.tal{position:absolute;font:700 11px/1 'Barlow Condensed';padding:2px 5px;border-radius:4px;background:#0B1016CC;color:#9AA7B4;border:1px solid #2B3947}
.tal.on{background:#E5484D;color:#fff;border-color:#E5484D;box-shadow:0 0 10px #E5484D}
.tcbig{font:800 58px/1 'Barlow Condensed';color:#ECE5D3;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tclist{position:absolute;overflow:hidden}
.tclist .in{transition:transform .4s ease}
.tclist .r{display:grid;grid-template-columns:92px 74px 40px 1fr;gap:6px;align-items:center;height:27px;padding:0 8px;font-size:13px;color:#9AA7B4;border-bottom:1px solid #1C2733}
.tclist .r b{font:700 14px 'Barlow Condensed';color:#ECE5D3;font-variant-numeric:tabular-nums}
.tclist .r.done{opacity:.45}
.tclist .r.cur{background:#E5484D26;color:#ECE5D3;box-shadow:inset 3px 0 0 #E5484D}
.lxl .r{display:flex;gap:8px;align-items:center;font-size:13px;color:#9AA7B4;padding:3px 8px;border-radius:5px}
.lxl .r b{font:700 14px 'Barlow Condensed';color:#E8B04B}
.lxl .r.cur{background:#E8B04B26;color:#ECE5D3}
.lxl .r.done{opacity:.5}
.opw{border-radius:10px;border:2px solid #2B3947;background:#0E141B}
.opw.air{border-color:#E5484D;box-shadow:0 0 14px #E5484D66}
.lampa{display:inline-block;width:12px;height:12px;border-radius:50%;background:#30C77B;box-shadow:0 0 8px #30C77B}
.lampa.y{background:#E8B04B;box-shadow:0 0 8px #E8B04B}.lampa.r{background:#E5484D;box-shadow:0 0 8px #E5484D}
.lampa.on{background:#E8B04B;box-shadow:0 0 8px #E8B04B}
.f.kino .win{transform:scale(.9)}

.atem{display:grid;grid-template-columns:44px repeat(9,1fr) 92px;gap:3px;align-items:center;font:700 12px/1 'Barlow Condensed'}
.atem .lb{color:#6B7A89;font-size:11px;letter-spacing:.06em}
.atem .k{height:15px;border-radius:3px;background:#1C2733;color:#9AA7B4;display:flex;align-items:center;justify-content:center;border:1px solid #2B3947}
.atem .k.pg{background:#E5484D;color:#fff;border-color:#E5484D;box-shadow:0 0 8px #E5484D88}
.atem .k.pv{background:#30C77B;color:#0B1016;border-color:#30C77B;box-shadow:0 0 8px #30C77B88}
.atem .tr{grid-row:2/4;grid-column:11;height:34px;border-radius:5px;background:#0B1016;border:1px solid #2B3947;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
.atem .tr b{font-size:13px;color:#ECE5D3}.atem .tr b.on{color:#E8B04B}
.atem .tr i{position:absolute;left:0;bottom:0;height:4px;background:#E8B04B;width:0}
.atem .tr .au{font-size:10px;color:#30C77B}
.lxl .r{font-size:12px;white-space:nowrap;padding:2px 6px}.lxl .r span{overflow:hidden;text-overflow:ellipsis}
.f.kino .capt{left:36px}

.tali{position:absolute;right:8px;bottom:8px;width:150px;height:84px;object-fit:cover;opacity:0;border:2px solid #E5484D;border-radius:5px;box-shadow:0 0 12px #E5484D88;transition:opacity .25s}
.tali.on{opacity:1}

.langsel{appearance:none;-webkit-appearance:none;border:1px solid #2B3947;background:#141C24;color:#ECE5D3;font:700 13px 'Barlow Condensed',sans-serif;letter-spacing:.04em;height:30px;padding:0 26px 0 10px;border-radius:5px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#9AA7B4 50%),linear-gradient(135deg,#9AA7B4 50%,transparent 50%);background-position:calc(100% - 13px) 13px,calc(100% - 8px) 13px;background-size:5px 5px;background-repeat:no-repeat;max-width:150px}
.langsel option{background:#141C24;color:#ECE5D3}