/* s4.107 - the tutorial pages (/tutorials/) and their player (core/aiox-tutorials.php, assets/js/aiox-tutorial-player.js). */
:root{--vt-bg:#020617;--vt-s1:#0b1222;--vt-s2:#0f172a;--vt-line:rgba(226,232,240,.08);--vt-line2:rgba(226,232,240,.16);--vt-text:#f1f5f9;--vt-text2:#94a3b8;--vt-text3:#64748b;--vt-acc:#38bdf8;--vt-ink:#020617;}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--vt-bg);color:var(--vt-text);font:15px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
.vt-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px 28px;background:rgba(2,6,23,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--vt-line);}
.vt-logo img{display:block;height:30px;width:auto;}
.vt-nav a{font-size:14px;font-weight:600;color:var(--vt-text2);text-decoration:none;padding:6px 10px;border-radius:8px;}
.vt-nav a.is-on,.vt-nav a:hover{color:var(--vt-text);background:rgba(148,163,184,.1);}
.vt-sp{flex:1;}
.vt-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--vt-acc);color:var(--vt-ink);font-weight:700;font-size:14px;text-decoration:none;}
.vt-main{max-width:1180px;margin:0 auto;padding:40px 28px 64px;}
.vt-h h1,.vt-title{font-family:"Montserrat","Inter",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 10px;}
.vt-h h1{font-size:44px;text-transform:uppercase;}
.vt-h p{margin:0 0 28px;color:var(--vt-text2);max-width:640px;}
.vt-note{color:#fbbf24 !important;}
/* s4.108 - a tutorial switched off for the public, open to administrators only */
.vt-hidden{display:inline-block;align-self:flex-start;margin:0 0 10px;padding:4px 10px;border-radius:999px;font-size:12px;font-style:normal;font-weight:600;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);}
.vt-card__b .vt-hidden{margin:0;}
.vt-empty{color:var(--vt-text2);}
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;}
.vt-card{display:flex;flex-direction:column;border:1px solid var(--vt-line2);border-radius:18px;overflow:hidden;background:var(--vt-s1);text-decoration:none;transition:border-color .15s,transform .15s;}
.vt-card:hover{border-color:rgba(56,189,248,.45);transform:translateY(-2px);}
.vt-card__mini{position:relative;display:block;aspect-ratio:calc(var(--vt-w) / var(--vt-h));overflow:hidden;background:#050a18;border-bottom:1px solid var(--vt-line);}
.vt-card__mini iframe{position:absolute;top:0;left:0;width:calc(var(--vt-w) * 1px);height:calc(var(--vt-h) * 1px);border:0;transform-origin:0 0;pointer-events:none;}
.vt-card__play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(2,6,23,.72);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:20px;color:#fff;}
.vt-card__b{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;}
.vt-card__b b{font-size:17px;color:var(--vt-text);}
.vt-card__b span{font-size:14px;color:var(--vt-text2);}
.vt-card__b small{font-size:12.5px;color:var(--vt-text3);}
.vt-crumbs{font-size:13px;color:var(--vt-text3);margin:0 0 10px;}
.vt-crumbs a{color:var(--vt-text2);text-decoration:none;}
.vt-title{font-size:32px;}
.vt-desc{margin:0 0 22px;color:var(--vt-text2);max-width:760px;}
/* the player */
.vt-player{display:flex;flex-direction:column;gap:12px;}
.vt-player:fullscreen{background:#000;padding:16px;justify-content:center;}
.vt-player:fullscreen .vt-steps{display:none;}
.vt-player:fullscreen .vt-stage{width:min(100%,calc((100vh - 90px) * 1.6));margin:0 auto;}
.vt-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--vt-line2);background:#000;outline:none;cursor:pointer;}
.vt-stage:focus-visible{box-shadow:0 0 0 2px var(--vt-acc);}
.vt-view{position:relative;width:100%;aspect-ratio:1440 / 900;overflow:hidden;}
.vt-layer{position:absolute;top:0;left:0;transform-origin:0 0;}
.vt-frame{position:absolute;top:0;left:0;border:0;background:#020617;pointer-events:none;visibility:hidden;}
.vt-spot{position:absolute;display:none;z-index:5;border:2px solid var(--vt-acc);box-shadow:0 0 0 99999px rgba(2,6,23,.5);pointer-events:none;}
.vt-ripple{position:absolute;display:none;z-index:6;border:3px solid var(--vt-acc);border-radius:50%;pointer-events:none;}
.vt-pointer{position:absolute;top:0;left:0;z-index:7;transform-origin:16% 8%;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.vt-cap{position:absolute;left:0;right:0;bottom:18px;z-index:8;display:flex;justify-content:center;padding:0 24px;pointer-events:none;}
.vt-cap span{max-width:900px;padding:10px 16px;border-radius:10px;background:rgba(2,6,23,.84);color:#fff;font-size:18px;line-height:1.45;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.4);}
.vt-bigplay{position:absolute;z-index:9;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(2,6,23,.75);color:#fff;font-size:30px;cursor:pointer;}
.vt-bigplay:hover{background:var(--vt-acc);color:var(--vt-ink);}
.vt-bigplay[hidden]{display:none;}
.vt-end{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(2,6,23,.82);cursor:default;}
.vt-end[hidden]{display:none;}
.vt-end p{margin:0;font-size:20px;font-weight:700;}
.vt-end div{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.vt-end button,.vt-end a{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--vt-line2);background:var(--vt-s2);color:var(--vt-text);font:600 14px "Inter",sans-serif;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;}
.vt-end .vt-studio{background:var(--vt-acc);color:var(--vt-ink);border-color:var(--vt-acc);}
.vt-load{position:absolute;right:14px;top:14px;z-index:9;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--vt-acc);opacity:0;animation:vt-spin 1s linear infinite;}
.vt-load.is-on{opacity:1;}
@keyframes vt-spin{to{transform:rotate(360deg);}}
.vt-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--vt-line2);border-radius:12px;background:var(--vt-s1);}
.vt-b{width:36px;height:36px;border-radius:9px;border:0;background:transparent;color:var(--vt-text);font-size:15px;cursor:pointer;}
.vt-b:hover{background:rgba(148,163,184,.12);}
.vt-time{font-size:13px;color:var(--vt-text2);font-variant-numeric:tabular-nums;min-width:86px;}
.vt-bar2{position:relative;flex:1;min-width:120px;height:8px;border-radius:99px;background:rgba(148,163,184,.18);cursor:pointer;touch-action:none;}
.vt-bar2:focus-visible{outline:2px solid var(--vt-acc);outline-offset:3px;}
.vt-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--vt-acc);}
.vt-ticks span{position:absolute;top:-3px;width:2px;height:14px;background:#e2e8f0;border-radius:2px;opacity:.7;}
.vt-sel{height:32px;border-radius:8px;border:1px solid var(--vt-line2);background:var(--vt-s2);color:var(--vt-text);font:13px "Inter",sans-serif;padding:0 6px;}
.vt-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:4px 18px;}
.vt-steps .vt-ch{grid-column:1 / -1;margin:14px 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vt-text3);}
.vt-steps button{display:flex;gap:10px;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--vt-text2);font:14px/1.45 "Inter",sans-serif;cursor:pointer;}
.vt-steps button span{flex:none;width:36px;color:var(--vt-text3);font-variant-numeric:tabular-nums;}
.vt-steps button:hover{background:rgba(148,163,184,.08);color:var(--vt-text);}
.vt-steps button.is-on{background:rgba(56,189,248,.12);color:var(--vt-text);}
.vt-foot{margin-top:24px;padding:0 28px;}
@media (max-width:760px){
  .vt-bar{padding:10px 16px;gap:10px;}
  .vt-main{padding:24px 16px 48px;}
  .vt-h h1{font-size:30px;}
  .vt-title{font-size:24px;}
  .vt-grid{grid-template-columns:1fr;}
  .vt-cap{position:static;padding:0;}
  .vt-cap span{display:block;max-width:none;width:100%;border-radius:0;font-size:15px;background:#0b1222;box-shadow:none;}
  .vt-bigplay{width:60px;height:60px;margin:-30px 0 0 -30px;font-size:22px;}
  .vt-steps{grid-template-columns:1fr;}
  .vt-time{min-width:0;}
  .vt-foot{padding:0 16px;}
}
.vt-foot .aiox-cookie-settings{display:none !important;}   /* these pages set no cookies and load no consent script */
/* s4.113 - the narration switch: speaker with waves (on) or crossed (off) */
.vt-voice:not([hidden]){display:inline-grid;place-items:center}   /* centred - and [hidden] still hides it */
.vt-voice svg{display:block}
.vt-voice .vt-mute{display:none}
.vt-voice.is-off .vt-wave{display:none}
.vt-voice.is-off .vt-mute{display:inline}
.vt-voice.is-off{opacity:.7}
/* s4.116 - the narrated video under the player */
.vt-video{margin:34px 0 0;padding:22px;border:1px solid var(--vt-line2);border-radius:18px;background:var(--vt-s1)}
.vt-video h2{margin:0 0 4px;font-size:20px;color:var(--vt-text)}
.vt-video__lead{margin:0 0 14px;color:var(--vt-text2);font-size:14.5px}
.vt-video__v{display:block;width:100%;max-width:960px;aspect-ratio:16/9;border-radius:12px;background:#000}
.vt-video__links{margin:12px 0 0;font-size:14px;color:var(--vt-text2)}
.vt-video__links a{color:var(--vt-acc,#38bdf8);font-weight:600;text-decoration:none}
.vt-video__links a:hover{text-decoration:underline}
@media (max-width:640px){.vt-video{padding:16px;border-radius:14px}}