/* =============================================================================
   CAPTURE website: quiet and light.
   A grey ground, hairlines instead of fills, a regular-weight headline, and one
   accent: purple, used only for what is active or alive (a dot, a prompt, a play).
   ============================================================================= */
@font-face{font-family:'Alibaba';font-weight:400;font-display:swap;src:url(../fonts/alibaba-400.ttf) format('truetype')}
@font-face{font-family:'Alibaba';font-weight:700;font-display:swap;src:url(../fonts/alibaba-700.ttf) format('truetype')}
:root{--lw:250px;--lrow:68px;
  --bg:#ededee; --box:#f5f5f6; --white:#fff;
  --ink:#0c0c0e; --ink2:#55565c; --ink3:#8c8d93;
  --hair:#d6d6d9; --hair2:#c3c3c7;
  --violet:#4f1fff; --violet2:#6b45ff; --violet-soft:rgba(79,31,255,.08);
  --mono:ui-monospace,SFMono-Regular,'JetBrains Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hd:64px; --bar:60px; --pad:clamp(18px,4vw,48px); --r:8px; --side:250px; --top:42px;
  /* the little product pictures (they show the dark app) */
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --line3:rgba(255,255,255,.22);
  --bg2:#141418; --card:#141418;
  --amber:#8f72ff; --amber-ink:#8f72ff; --amber-soft:rgba(143,114,255,.18); --amber-line:rgba(143,114,255,.55);
  --violet-ink:#b7a8ff; --violet-line:rgba(143,114,255,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:'Alibaba',Tahoma,sans-serif;font-size:15px;line-height:1.85;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}
::selection{background:var(--violet);color:#fff}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.2}
p{margin:0}
code{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
/* scrollbars: a hairline rail with a thin purple slider that widens under the pointer */
/* (Firefox only: in Chrome these two would switch the custom bar below off) */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--violet) transparent}}
::-webkit-scrollbar{width:9px;height:9px;background:transparent}
::-webkit-scrollbar-track{background:linear-gradient(var(--hair2),var(--hair2)) 50% 0/1px 100% no-repeat}
::-webkit-scrollbar-track:horizontal{background-position:0 50%;background-size:100% 1px}
::-webkit-scrollbar-thumb{background:var(--violet);background-clip:padding-box;border:3.5px solid transparent;border-radius:0;min-height:28px}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{border-width:2.5px}
::-webkit-scrollbar-button,::-webkit-scrollbar-corner{display:none;width:0;height:0;background:transparent}

/* ---------------------------------------------------------------- small shared pieces */
/* a label with a purple dot */
.lbl{display:block;font-size:13px;color:var(--ink2);line-height:1.5}
.lbl::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:10px;border-radius:50%;background:var(--violet);vertical-align:1px}
.lead{color:var(--ink2);font-size:15.5px;line-height:1.9;max-width:34em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:0;background:var(--violet);color:#fff;
  font-size:14px;font-weight:700;white-space:nowrap;border:1px solid var(--violet);transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{background:var(--violet2);border-color:var(--violet2)}
.btn svg{flex:none;width:17px;height:17px}
.btn--line{background:transparent;color:var(--ink);border-color:var(--hair2)}
.btn--line:hover{background:var(--box);border-color:var(--ink3)}
.btn--full{display:flex;width:100%}
.ibtn{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:0;border:1px solid var(--hair2);color:var(--ink);transition:background-color .2s,border-color .2s}
.ibtn:hover{background:var(--box);border-color:var(--ink3)}
.ibtn svg{width:18px;height:18px}
.chip-s{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--hair2);border-radius:0;font-size:12px;color:var(--ink2);background:var(--box)}

/* ---------------------------------------------------------------- frame */
.app{position:fixed;inset:0;display:flex;flex-direction:column;padding-top:var(--top)}
.top{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--top);display:flex;align-items:stretch;background:var(--box);border-bottom:1px solid var(--hair)}
.top__brand{flex:none;width:var(--side);padding:0 10px 0 18px}
/* the name in the black corner (top right): the only black ground on the page */
.brand{display:flex;align-items:center;gap:7px;background:#000;color:#fff}
.brand img{flex:none;width:40px;height:40px;margin-inline-start:-4px}
.brand b{font-size:11.5px;letter-spacing:.14em;direction:ltr;font-weight:700;line-height:1}
.brand span{font-size:12px;font-weight:700;line-height:1;padding-inline-start:8px;margin-inline-start:1px;border-inline-start:1px solid rgba(255,255,255,.28)}
.top__say{flex:1;min-width:0;display:flex;align-items:center;padding:0 24px;font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__say::before{content:"";flex:none;width:5px;height:5px;margin-inline-end:12px;border-radius:50%;background:var(--violet)}
.top__buy{position:relative;flex:none;margin-inline-start:auto;display:flex;align-items:center;gap:9px;padding:0 18px 0 16px;background:var(--violet);color:#fff;font-size:14px;font-weight:700;overflow:hidden;transition:background-color .2s}
.top__buy:hover{background:var(--violet2)}
.top__buy svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.top__buy:hover svg{transform:translateY(-2px) rotate(-8deg)}
.top__buy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4.5s var(--ease) 1.2s infinite}
.top__buy .off span{margin-inline-start:4px}
.hd{flex:none;position:relative;z-index:30;height:var(--hd);display:flex;align-items:center;gap:12px;width:100%;padding:0 var(--pad)}
.hd__brand{position:relative;z-index:21;align-self:stretch;margin-inline-end:auto;margin-inline-start:calc(var(--pad) * -1);padding:0 10px 0 16px}
.hd__buy{position:relative;height:40px;padding:0 14px 0 16px;gap:9px;overflow:hidden}
.hd__buy svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.hd__buy:hover svg{transform:translateY(-2px) rotate(-8deg)}
.hd__buy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4.5s var(--ease) 1.2s infinite}
@media(min-width:980px){.hd{display:none}}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* the discount, a small white tag */
.off{display:inline-flex;align-items:center;height:20px;padding:0 6px;font-style:normal;font-size:11.5px;font-weight:700;line-height:1;background:#fff;color:var(--violet);white-space:nowrap}
.btn .off{margin-inline-start:2px}
.off span{margin-inline-start:4px}

/* tabs: a quiet sidebar on desktop (all four visible, hairlines between them); on phones a bar at the bottom */
.tabs{position:fixed;z-index:20;top:var(--top);right:0;bottom:42px;width:var(--side);display:flex;flex-direction:column;padding:0;
  background:#e5e5e8;border-left:1px solid var(--hair)}
.tabs__track{display:flex;flex-direction:column}
.tab{position:relative;display:flex;align-items:center;gap:14px;height:58px;padding:0 28px;border-bottom:1px solid var(--hair2);font-size:16px;color:var(--ink2);text-align:right;transition:background-color .25s,color .25s}
.tab .tn{font-family:var(--mono);font-size:11.5px;color:var(--ink3);transition:color .25s}
.tab::before{content:"";position:absolute;top:-1px;bottom:-1px;right:0;width:3px;background:var(--violet);transform:scaleY(0);transition:transform .35s var(--ease)}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.35)}
.tab.is-on{color:var(--ink);font-weight:700;background:var(--bg)}
.tab.is-on .tn{color:var(--violet)}
.tab.is-on::before{transform:scaleY(1)}
.tabs__more{margin-top:auto;display:flex;flex-direction:column;border-top:1px solid var(--hair2);overflow-y:auto}
.tabs__more>*,.tabs__links>a{flex:none;display:flex;align-items:center;gap:10px;height:46px;padding:0 28px;border-bottom:1px solid var(--hair2);font-size:13.5px;color:var(--ink2);transition:color .2s,background-color .2s}
.tabs__more>*:hover,.tabs__links>a:hover{color:var(--ink);background:rgba(255,255,255,.35)}
.tabs__more>.tabs__links{display:contents}
.tabs__more svg{width:17px;height:17px}

.views{position:relative;flex:1;min-height:0;margin-right:var(--side)}
.view{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.view::-webkit-scrollbar{display:none}
.view.is-on{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.view__in{flex:1 0 auto;width:100%;max-width:1320px;margin:0 auto;padding:16px var(--pad) 28px;display:flex;flex-direction:column;justify-content:center;gap:18px}
/* a short, quiet entrance each time a tab opens */
.view.is-on .rv{animation:in .6s var(--ease) both;animation-delay:calc(.04s + var(--i,0) * .06s)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================================================================ HOME */
.home{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:28px}
.home__t{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.home h1{font-size:clamp(36px,9.6vw,76px);line-height:1.14;letter-spacing:-.01em;text-wrap:balance;margin:2px 0 4px}
.home .lead+.lead{margin-top:-4px}
/* the buying box: price over one line, like a terminal */
.box{width:100%;max-width:490px;margin-top:8px;border:1px solid var(--hair);border-radius:10px;background:var(--box)}
.box__head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--hair)}
.box__k{font-size:13px;color:var(--ink2)}
.box__k::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:9px;border-radius:50%;background:var(--violet);vertical-align:1px}
.box__head .off{background:var(--violet-soft);color:var(--violet)}
.box__price{margin-inline-start:auto;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.box__price s{font-size:13px;color:var(--ink3);text-decoration-thickness:1px}
.box__price b{font-size:16px;font-weight:700;color:var(--ink)}
.box__line{display:flex;align-items:center;gap:6px;margin:12px;height:50px;padding:0 4px 0 14px;border:1px solid var(--hair2);border-radius:7px;background:var(--white)}
.box__btn{height:40px;padding:0 18px}
.box__go{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:100%;font-size:14.5px;color:var(--ink);text-align:start}
.box__go code{font-size:14px}
.box__go .p{flex:none;color:var(--violet);font-family:var(--mono);font-weight:700}
.box__go .p svg{width:15px;height:15px}
.box__line:not([dir]) {padding:0 14px}
.box__copy{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:5px;color:var(--ink3);transition:color .2s,background-color .2s}
.box__copy:hover{color:var(--ink);background:var(--box)}
.box__copy svg{width:17px;height:17px}
.box__copy.is-done{color:var(--violet)}
.more-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--hair2);padding-bottom:2px;transition:border-color .2s}
.more-link:hover{border-color:var(--violet)}
.more-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.more-link:hover svg{transform:translateX(-4px)}
/* the diagram */
.home__d{min-width:0}
.teaser{position:relative;aspect-ratio:16/9;border:1px solid var(--hair);border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--box) radial-gradient(circle,#c9c9ce 1px,transparent 1.3px) 0 0/14px 14px}
.teaser video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.teaser__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ink3)}
.teaser__empty .soon__ic{color:var(--violet)}
.teaser__tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:5px;font-size:12px;color:var(--ink2);background:rgba(245,245,246,.9)}
.teaser__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet)}
.teaser__snd{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(12,12,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.teaser__snd svg{width:14px;height:14px}
.teaser:hover .teaser__snd,.teaser:focus-visible .teaser__snd{opacity:1;transform:none}
.hrev{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px 16px;border:1px solid var(--hair);border-inline-start:2px solid var(--violet);border-radius:10px;background:var(--box);color:inherit}
.hrev[hidden]{display:none}
.hrev__q{display:block;quotes:none;font-size:14.5px;line-height:1.85;color:var(--ink);text-wrap:pretty}
.hrev__q::before{content:"«";color:var(--violet);margin-inline-end:4px}
.hrev__q::after{content:"»";color:var(--violet);margin-inline-start:4px}
.hrev__who{font-size:12.5px;color:var(--ink3);line-height:1.6}
.hrev__who b{color:var(--ink2);font-weight:700;margin-inline-end:8px}
.hrev.is-in{animation:in .5s var(--ease) both}
.hrev:hover{border-color:var(--hair2)}
@media(min-width:980px){
  .home{grid-template-columns:1fr 1.05fr;column-gap:56px}
  .home__t{align-self:center}
  .home__d{align-self:center}
  .lead{font-size:16.5px}
}

/* ================================================================ the news line at the bottom */
.ticker{position:fixed;z-index:24;left:0;right:0;bottom:0;height:42px;display:flex;align-items:stretch;background:var(--box);border-top:1px solid var(--hair)}
.ticker__lbl{flex:none;display:flex;align-items:center;gap:8px;padding:0 18px 0 16px;background:var(--violet);color:#fff;font-size:13px;font-weight:700;white-space:nowrap}
.ticker__win{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.ticker__track{display:flex;width:max-content;height:100%;animation:tick var(--dur,80s) linear infinite}
.ticker__run{display:flex;align-items:center;flex:none}
.tk{display:flex;align-items:center;gap:8px;padding:0 22px;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.tk b{color:var(--ink);font-weight:700}
.tk::after{content:"";width:5px;height:5px;margin-inline-start:22px;border-radius:50%;background:var(--violet);opacity:.6}
.ticker:hover .ticker__track{animation-play-state:paused}
/* Persian news lines run toward the right */
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
.view{padding-bottom:42px}

/* ================================================================ row lists (steps, categories, reviews) */
.rl{display:none}
@media(min-width:980px){
  .rl{display:flex;flex-direction:column;border-top:1px solid var(--hair2)}
  .ri{position:relative;display:flex;align-items:center;gap:12px;height:var(--lrow);padding:8px 16px;border-bottom:1px solid var(--hair2);font-size:15px;color:var(--ink2);text-align:right;transition:background-color .25s,color .25s}
  .ri .n{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink3);min-width:18px}
  .ri .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ri .m{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink3)}
  .ri .ic{flex:none;display:grid;place-items:center;width:18px;color:var(--ink3);transition:color .25s}
  .ri .ic svg{width:16px;height:16px}
  .ri.is-on .ic{color:var(--violet)}
  .ri::before{content:"";position:absolute;top:-1px;bottom:-1px;right:0;width:2px;background:var(--violet);transform:scaleY(0);transition:transform .35s var(--ease)}
  .ri:hover{color:var(--ink);background:rgba(255,255,255,.4)}
  .ri.is-on{color:var(--ink);font-weight:700;background:var(--box)}
  .ri.is-on .n,.ri.is-on .m{color:var(--violet)}
  .ri.is-on::before{transform:scaleY(1)}
}

/* ================================================================ FEATURES */
.feat{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:16px}
.feat__side{display:flex;flex-direction:column;gap:14px}
.feat__h{display:none}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--hair);border-radius:var(--r);background:var(--box);padding:4px;gap:4px}
.st{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:5px;color:var(--ink3);border:1px solid transparent;transition:all .2s}
.st .n{font-family:var(--mono);font-size:11px;line-height:1.4}
.st b{font-size:13px;font-weight:400;line-height:1.4}
.st__l{display:none}
.st:hover{color:var(--ink)}
.st.is-on{background:var(--white);border-color:var(--hair2);color:var(--ink)}
.st.is-on .n{color:var(--violet)}
.feat__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.stage{border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:#111114}
.stage .mini{border:0;border-radius:0;aspect-ratio:16/9;background:#111114}
.view.is-on .stage .mini{animation:in .5s var(--ease) both}
.fx{display:flex;flex-direction:column;gap:10px}
.fx__k{font-family:var(--mono);font-size:12px;color:var(--ink3);direction:ltr;text-align:right}
.fx__k span{color:var(--violet)}
.fx__t{display:flex;flex-direction:column;gap:8px}
.fx__t h2{font-size:clamp(25px,3.4vw,40px);line-height:1.25;text-wrap:balance}
.view.is-on .fx__t:not([hidden]){animation:in .45s var(--ease) both}
.fx__acts{display:flex;gap:8px;margin-top:6px}
.fx__acts>*{min-width:0}
.fx__acts .btn span{overflow:hidden;text-overflow:ellipsis}
.feat__det{display:none}
@media(min-width:980px){
  .feat{grid-template-columns:var(--lw) minmax(0,1fr);column-gap:44px;align-items:stretch;align-content:center}
  .feat__side{min-height:0;justify-content:space-between}
  .feat__side .steps{flex:none;grid-auto-rows:var(--lrow)}
  .feat__h{display:block;font-size:30px;line-height:1.35}
  /* the steps, as rows like the tabs */
  .steps{grid-template-columns:1fr;padding:0;gap:0;background:transparent;border:0;border-top:1px solid var(--hair2);border-radius:0}
  .st{position:relative;flex-direction:row;justify-content:flex-start;gap:12px;height:var(--lrow);padding:8px 16px;border:0;border-bottom:1px solid var(--hair2);border-radius:0;color:var(--ink2)}
  .st .n{font-size:11px;color:var(--ink3)}
  .st b{font-size:15px}
  .st__s{display:none}.st__l{display:inline}
  .st::before{content:"";position:absolute;top:-1px;bottom:-1px;right:0;width:2px;background:var(--violet);transform:scaleY(0);transition:transform .35s var(--ease)}
  .st:hover{background:rgba(255,255,255,.4)}
  .st.is-on{background:var(--box);border-color:var(--hair2);color:var(--ink)}
  .st.is-on b{font-weight:700}
  .st.is-on::before{transform:scaleY(1)}
  .feat__main{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
  .stage .mini{aspect-ratio:16/8.5}
  .fx__t h2{font-size:clamp(24px,2.3vw,34px)}
}
/* wide screens: details and shortcuts sit beside the step instead of in a window */
@media(min-width:1440px){
  :root{--lw:230px}
  .feat{grid-template-columns:var(--lw) minmax(0,1fr) 320px;column-gap:36px}
  .feat__det{display:flex;flex-direction:column;gap:12px;align-self:stretch;min-width:0}
  .feat__det{height:0;min-height:100%}
  .feat__det #fdet{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hair2) transparent}
  .feat__det #fdet .blocks{flex:1 0 auto;grid-auto-rows:minmax(min-content,1fr)}
  #fxMore{display:none}
  #fdet .blocks{grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair2);border-inline-start:1px solid var(--hair2)}
  #fdet .block{display:block;padding:9px 11px;border:0;border-radius:0;border-bottom:1px solid var(--hair2);border-inline-end:1px solid var(--hair2);background:transparent}
  #fdet .block .ic{display:none}
  #fdet .block h4{font-size:13px;margin-bottom:2px}
  #fdet .block p{font-size:11.5px;line-height:1.65;color:var(--ink3)}
  #fdet .sub{margin:14px 0 6px;font-size:12.5px}
  #fdet .keys{grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair2);border-inline-start:1px solid var(--hair2)}
  #fdet .key{padding:6px 10px;border:0;border-radius:0;border-bottom:1px solid var(--hair2);border-inline-end:1px solid var(--hair2);font-size:12px}
  #fdet .key kbd b{min-width:22px;height:20px;font-size:10.5px}
  .view.is-on #fdet.swap{animation:in .45s var(--ease) both}
}

/* ================================================================ TUTORIALS: the lessons
   Chapters are rows, like the steps of Features. The open lesson is a picture with numbered notes and its words;
   the chapter's other lessons run underneath as a strip of frames. */
.tv{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:16px}
.tv__head{display:flex;flex-direction:column;gap:12px;min-width:0}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--hair2);border-radius:0;font-size:13.5px;color:var(--ink2);white-space:nowrap;transition:all .2s}
.chip em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.chip:hover{color:var(--ink);border-color:var(--ink3)}
.chip.is-on{background:var(--white);border-color:var(--ink);color:var(--ink)}
.chip.is-on em{color:var(--violet)}
.soon{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink3);font-size:13px;cursor:default}
.soon__ic{width:52px;height:52px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--hair2);background:var(--box);color:var(--ink2)}
.soon__ic svg{width:22px;height:22px}
.tv__main{min-width:0}
/* about the chapter: one quiet row that opens */
.lz__about{margin-top:14px;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2)}
.lz__about summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:13.5px;color:var(--ink2);transition:color .2s}
.lz__about summary:hover{color:var(--ink)}
.lz__about summary::-webkit-details-marker{display:none}
.lz__about summary span{flex:1}
.lz__about summary span::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:10px;border-radius:50%;background:var(--violet);vertical-align:1px}
.lz__about summary::after{content:"+";font-family:var(--mono);font-size:18px;line-height:1;color:var(--ink3);transition:transform .3s var(--ease),color .2s}
.lz__about[open] summary::after{transform:rotate(45deg);color:var(--violet)}
.lz__about p{padding:0 16px 14px;font-size:13px;line-height:1.95;color:var(--ink3)}
/* the open lesson */
.lz{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.view.is-on .lz.swap{animation:in .45s var(--ease) both}
.lz__fig{min-width:0;display:flex;flex-direction:column;gap:8px}
.lz__stage{position:relative;border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:#111114}
.lz__shot{position:relative;display:block;direction:ltr}
.lz__shot img{display:block;width:100%;height:auto}
.lz__stage.is-art{background:var(--box) radial-gradient(circle,#c9c9ce 1px,transparent 1.3px) 0 0/14px 14px}
.lz__art{display:grid;place-items:center;aspect-ratio:16/10;padding:12px;overflow:hidden}
/* the notes: a thin box on the part, a fine curved line, its number in the margin beside the picture */
.lz__figwrap{position:relative}
.lz__figwrap.has-ann{padding:36px}
.lz__ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;direction:ltr}
.lz__g{pointer-events:auto;transition:opacity .2s}
.lz__box{fill:none;stroke:#9b84ff;stroke-width:1;opacity:0;animation:lzFade .42s var(--ease) forwards}
.lz__lead{fill:none;stroke:var(--violet2);stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lzDraw .62s cubic-bezier(.45,.05,.25,1) forwards}
.lz__dot{fill:#9b84ff;opacity:0;animation:lzFade .2s ease forwards}
.lz__num{opacity:0;animation:lzFade .32s var(--ease) forwards}
.lz__num circle{fill:var(--bg);stroke:var(--violet2);stroke-width:1}
.lz__num text{fill:var(--violet);font:400 10.5px var(--mono);text-anchor:middle;dominant-baseline:central}
.lz__ann .is-still{animation:none!important;opacity:1;stroke-dashoffset:0}
@keyframes lzFade{to{opacity:1}}
@keyframes lzDraw{to{stroke-dashoffset:0}}
.lz__figwrap.hl .lz__g:not(.is-hl){opacity:.25!important}
.lz__g.is-hl .lz__box{stroke-width:1.6}
.lz__leg{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair2)}
.lz__leg li{display:flex;align-items:center;gap:12px;padding:6px 4px;border-bottom:1px solid var(--hair2);font-size:13.5px;color:var(--ink2);transition:background-color .2s,color .2s;cursor:default}
.lz__leg li b{flex:none;width:22px;font:400 11.5px var(--mono);color:var(--violet);direction:ltr;text-align:center}
.lz__leg li:hover,.lz__leg li.is-hl{background:rgba(255,255,255,.5);color:var(--ink)}
/* playing: a hairline fills along the picture while a lesson is up */
.lz__bar{position:absolute;inset-inline:0;bottom:0;height:2px;background:rgba(255,255,255,.14);opacity:0;transition:opacity .3s}
.lz__bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--amber)}
.lz.is-auto .lz__bar{opacity:1}
.lz__txt{display:flex;flex-direction:column;gap:10px;min-width:0}
.lz__txt .fx__k{font-family:var(--mono);font-size:12px;color:var(--ink3);direction:ltr;text-align:right}
.lz__txt .fx__k span{color:var(--violet)}
.lz__txt h2{font-size:clamp(25px,3.4vw,40px);line-height:1.25;text-wrap:balance}
.lz__tabs{display:flex;gap:6px;margin-top:4px}
.lz__tabs .chip{flex:1 1 auto;justify-content:center;gap:5px;padding:0 8px;font-size:13px;min-width:0}
.lz__panel{border:1px solid var(--hair);border-radius:10px;background:var(--box);padding:12px 16px;max-height:min(280px,34vh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hair2) transparent;animation:in .4s var(--ease) both}
.lz__panel p{font-size:14.5px;line-height:1.95;color:var(--ink);text-wrap:pretty}
.lz__panel p+p{margin-top:8px}
.lz__panel b{font-weight:700}
.lz__ex{margin-top:12px;padding:10px 14px;border:1px solid var(--hair);border-inline-start:2px solid var(--violet);border-radius:8px;background:var(--white);font-size:14px;line-height:1.9;color:var(--ink)}
.lz__exk{display:block;font-size:12.5px;color:var(--ink3);line-height:1.6}
.lz__exk::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:8px;border-radius:50%;background:var(--violet);vertical-align:1px}
.lz__how{list-style:none;margin:0 -4px;padding:0}
.lz__how li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:38px;padding:6px 4px;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.7}
.lz__how li:last-child{border-bottom:0}
.lz__how .t{flex:1 1 150px;min-width:0;color:var(--ink)}
.lz__how .ks{flex:none;margin-inline-start:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;direction:ltr}
.lz__how .or{font-size:11px;color:var(--ink3);margin:0 3px}
.lz kbd{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border:1px solid var(--hair2);border-radius:4px;background:var(--white);font:400 11.5px/1 var(--mono);color:var(--ink);direction:ltr}
.lz .kplus{color:var(--ink3);font-size:10px;margin:0 1px}
.lz__note{font-size:13px;line-height:1.85;color:var(--ink3)}
.lz__note::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:8px;border-radius:50%;background:var(--violet);vertical-align:1px}
.lz .fx__acts{margin-top:4px;flex-wrap:wrap}
.lz .fx__acts .btn svg{width:17px;height:17px}
.lz .fx__acts .btn--line svg{width:13px;height:13px}
.lz .fx__acts .ibtn:disabled{opacity:.35;pointer-events:none}
/* the drawings for lessons with nothing to photograph */
.lg__card{width:min(250px,100%);border:1px solid var(--hair2);border-radius:10px;overflow:hidden;background:var(--white)}
.lg__off{height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:#111114;color:#ff6b6b;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lg__off span{display:block;color:#9a9aa3;font-weight:400;letter-spacing:0;text-transform:none;font-size:11px}
.lg__card p{padding:10px 12px;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.lg__tree{min-width:min(300px,100%);padding:14px 18px;border:1px solid var(--hair);border-radius:10px;background:var(--white);font-size:13px}
.lg__tree .r{display:flex;align-items:center;gap:10px;height:34px;color:var(--ink2)}
.lg__tree .r svg{flex:none;color:var(--violet)}
.lg__tree .r b{color:var(--ink);font-weight:700}
.lg__tree .r.k{padding-inline-start:26px;position:relative}
.lg__tree .r.k::before{content:"";position:absolute;inset-inline-start:7px;top:-8px;bottom:50%;width:12px;border-inline-start:1px solid var(--hair2);border-bottom:1px solid var(--hair2);border-end-start-radius:6px}
.lg__tree .r span{color:var(--ink)}
.lg__tree .r em{font-style:normal;margin-inline-start:auto;padding-inline-start:18px;font-size:12px;color:var(--ink3)}
.lg__flow{display:flex;align-items:center}
.lg__flow .n{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(170px,38vw);padding:16px 12px;border:1px solid var(--hair);border-radius:10px;text-align:center;background:var(--white)}
.lg__flow .n svg{width:22px;height:22px;color:var(--violet)}
.lg__flow .n b{font-size:13.5px;font-weight:700}
.lg__flow .n em{font-style:normal;font-size:12px;line-height:1.6;color:var(--ink3)}
.lg__flow>i{width:40px;height:1px;background:var(--violet);position:relative;flex:none}
.lg__flow>i::after{content:"";position:absolute;inset-inline-end:-1px;top:-3px;border:3.5px solid transparent;border-inline-start:6px solid var(--violet)}
.lg__devs{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap}
.lg__devs .g{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border:1px solid var(--hair);border-radius:10px;background:var(--white)}
.lg__devs .row{display:flex;gap:8px}
.lg__devs .d{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px}
.lg__devs .d svg{width:40px;height:30px;color:var(--violet)}
.lg__devs .d b{font-size:11.5px;font-weight:700;white-space:nowrap}
.lg__devs .g em{font-style:normal;font-size:11.5px;color:var(--ink3);text-align:center;max-width:150px;line-height:1.6}
.lg__learn{display:flex;align-items:center}
.lg__learn .pn,.lg__learn .pj{display:flex;flex-direction:column;gap:9px;width:min(190px,36vw);padding:12px;border:1px solid var(--hair);border-radius:10px;background:var(--white)}
.lg__learn .vid{height:84px;border-radius:6px;display:grid;place-items:center;background:#111114;color:#9b84ff}
.lg__learn .vid svg{width:24px;height:24px}
.lg__learn .marks{display:flex;justify-content:space-between;position:relative;padding:0 6px}
.lg__learn .marks::before{content:"";position:absolute;inset-inline:6px;top:50%;height:1px;background:var(--hair2)}
.lg__learn .st{position:relative;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1px solid var(--violet)}
.lg__learn .st b{font:700 10.5px var(--mono);color:var(--violet)}
.lg__learn .lay{display:flex;flex-direction:column;gap:7px;padding:10px 8px;border-radius:6px;background:var(--bg);min-height:84px;justify-content:center}
.lg__learn .lay span{display:block;height:12px;border-radius:2px;background:var(--hair2)}
.lg__learn .lay span.new{background:var(--violet)}
.lg__learn em{font-style:normal;font-size:11.5px;line-height:1.6;color:var(--ink3);text-align:center}
.lg__learn>i{width:36px;height:1px;background:var(--violet);position:relative;flex:none}
.lg__learn>i::after{content:"";position:absolute;inset-inline-end:-1px;top:-3px;border:3.5px solid transparent;border-inline-start:6px solid var(--violet)}
/* the lessons of the chapter: one hairline segment each, the open one violet */
.lz__steps{grid-column:1/-1;display:flex;gap:4px;margin-top:6px}
.lz__steps button{flex:1;height:20px;display:flex;align-items:center}
.lz__steps i{display:block;width:100%;height:2px;background:var(--hair2);transition:background-color .2s,height .2s}
.lz__steps button:hover i{background:var(--ink3);height:3px}
.lz__steps .is-seen i{background:rgba(79,31,255,.4)}
.lz__steps .is-on i{background:var(--violet);height:3px}
@media(max-width:979px){#about{display:none}}
@media(min-width:980px){
  .tv{grid-template-columns:var(--lw) minmax(0,1fr);gap:20px 44px;align-items:start;align-content:center}
  .tv__head{gap:14px}
  .tv__main{grid-column:2;grid-row:1}
  .chips{display:none}
  #cats .t{white-space:normal;line-height:1.5}
  .lz__txt h2{font-size:clamp(24px,2.3vw,34px)}
}
@media(min-width:1400px){
  .lz{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:24px}
}

/* ================================================================ REVIEWS */
.vo{width:100%;max-width:820px}
.vo__side{display:none}
.vo__main{display:flex;flex-direction:column;gap:18px;min-width:0}
.vo__head{display:flex;align-items:center;justify-content:space-between}
.said{margin:0}
.said q{display:block;quotes:none;font-size:clamp(21px,3vw,34px);line-height:1.6;text-wrap:pretty}
.said q::before,.said q::after{font-family:Georgia,"Times New Roman",serif;color:var(--violet)}
.said q::before{content:"«";margin-inline-end:6px}
.said q::after{content:"»";margin-inline-start:6px}
.vo.is-empty .said q{color:var(--ink2)}
.who{display:flex;align-items:center;gap:12px}
.who>span:last-child{font-size:13.5px;color:var(--ink3);line-height:1.6}
.who b{display:block;color:var(--ink);font-size:15px;font-weight:700}
.player{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;border:1px solid var(--hair);border-radius:10px;background:var(--box)}
.play{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--violet);color:#fff;transition:background-color .2s,transform .2s var(--ease)}
.play:hover{background:var(--violet2)}
.play:active{transform:scale(.95)}
.play svg{width:17px;height:17px}
.play .pa{display:none}.vo.is-playing .play .pl{display:none}.vo.is-playing .play .pa{display:block}
.play:disabled{background:#d5d5d9;color:#fff;cursor:default}
.wave{flex:1;min-width:0;height:38px;display:flex;align-items:center;gap:2px;direction:ltr;cursor:pointer}
.wave i{flex:1;height:calc(var(--h,.1) * 86% + 8%);border-radius:1px;background:#b5b5bb;transition:background-color .1s,height .5s var(--ease)}
.wave i.on{background:var(--violet)}
.vo.is-text .wave{cursor:default}.vo.is-text .wave i{background:#d2d2d6}
.ptime{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--ink3);direction:ltr;min-width:70px;text-align:center}
.vo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.faces{display:flex;gap:6px;flex-wrap:wrap}
.faces{align-items:center;gap:8px}
.face{position:relative;width:10px;height:10px;padding:0;border-radius:50%;background:#c4c4ca;transition:background-color .2s,transform .2s}
.face::after{content:"";position:absolute;inset:-10px}
.face.is-on{background:var(--violet);transform:scale(1.25)}
.vo.is-empty #voInvite{background:var(--violet);border-color:var(--violet);color:#fff}
@media(min-width:980px){
  .vo{max-width:1120px;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);column-gap:56px;align-items:center}
  .vo__side{display:flex;flex-direction:column;gap:14px;align-self:center}
  .vo.is-empty .vo__side{display:none}.vo.is-empty{grid-template-columns:minmax(0,1fr);max-width:820px}
  .vo__head .lbl{visibility:hidden}
  .vo__nav{display:none!important}
  #voList{max-height:min(470px,60vh);overflow-y:auto}
  #voList .m svg{width:14px;height:14px;display:block}
  #voList .t small{display:block;font-size:11.5px;font-weight:400;color:var(--ink3);overflow:hidden;text-overflow:ellipsis}
  .vo.is-playing #voList .ri.is-on .m{animation:pulse 1s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
}

/* ================================================================ contact links */
.sheet__links{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.links{display:flex;flex-wrap:wrap;gap:6px}
.links a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--hair2);font-size:13.5px;color:var(--ink2);transition:border-color .2s,color .2s}
.links a:hover{border-color:var(--violet);color:var(--violet)}
.links svg,.tabs__links svg{width:16px;height:16px}

/* ================================================================ sheets and the video room */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,20,24,.32);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.scrim.is-on{opacity:1;visibility:visible;transition:opacity .3s}
.sheet{position:fixed;z-index:61;left:0;right:0;bottom:0;max-height:88dvh;display:flex;flex-direction:column;background:var(--bg);border-top:1px solid var(--hair2);border-radius:14px 14px 0 0;
  transform:translateY(105%);transition:transform .45s var(--ease)}
.sheet.is-on{transform:none}
@media(min-width:760px){.sheet{left:50%;right:auto;bottom:50%;width:min(680px,calc(100% - 48px));max-height:84dvh;border:1px solid var(--hair2);border-radius:14px;
  transform:translate(-50%,calc(50% + 24px));opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .25s,visibility 0s .3s;box-shadow:0 30px 80px -30px rgba(0,0,0,.25)}
  .sheet.is-on{transform:translate(-50%,50%);opacity:1;visibility:visible;transition:transform .4s var(--ease),opacity .25s}}
.sheet__h{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hair)}
.sheet__h h3{flex:1;font-size:18px;font-weight:700}
.sheet__x{width:36px;height:36px}
.sheet__b{flex:1;min-height:0;overflow-y:auto;padding:16px 18px calc(24px + env(safe-area-inset-bottom))}
.blocks{display:grid;gap:8px}
@media(min-width:620px){.blocks{grid-template-columns:repeat(2,1fr)}}
.block{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:12px;border:1px solid var(--hair);border-radius:var(--r);background:var(--box)}
.block .ic{grid-row:span 2;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--hair2);background:var(--white);color:var(--ink)}
.block .ic svg{width:18px;height:18px}
.block h4{font-size:14.5px;font-weight:700}
.block p{font-size:13px;color:var(--ink2);line-height:1.8}
.sub{display:flex;align-items:center;gap:10px;margin:20px 0 8px;font-size:13px;color:var(--ink2)}
.sub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet)}
.keys{display:grid;gap:6px}
@media(min-width:620px){.keys{grid-template-columns:repeat(2,1fr)}}
.key{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid var(--hair);border-radius:6px;font-size:13.5px;color:var(--ink2)}
.key kbd{font-family:var(--mono);direction:ltr;display:inline-flex;gap:4px}
.key kbd b{min-width:26px;height:24px;padding:0 6px;border:1px solid var(--hair2);border-radius:4px;background:var(--white);display:grid;place-items:center;font-size:11.5px;color:var(--ink);font-weight:400}
.ticket{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--hair);border-radius:10px;background:var(--box)}
.ticket h4{font-size:26px;line-height:1.35}
.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.incl li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.incl li::before{content:"";flex:none;width:12px;height:7px;border-left:1.6px solid var(--violet);border-bottom:1.6px solid var(--violet);transform:rotate(-45deg) translateY(-2px)}
.incl li.v{grid-column:1/-1}
.price{padding-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.price b{font-size:24px;font-weight:700}
.price s{font-size:15px;color:var(--ink3)}
.price .off{background:var(--violet-soft);color:var(--violet)}
.price span{flex-basis:100%;color:var(--ink3);font-size:13px}
.ticket .btn{height:48px}
.lkey{font-size:12.5px;color:var(--ink3);text-align:center}
.flow{list-style:none;margin:14px 0 0;padding:0;counter-reset:s;border-top:1px solid var(--hair)}
.flow li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hair)}
.flow li::before{content:counter(s,decimal-leading-zero);flex:none;width:24px;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--violet)}
.flow b{display:block;font-size:14.5px}.flow span{font-size:13px;color:var(--ink2)}
.sheet .more{margin-top:14px;height:46px}
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 2px;font-size:15px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{flex:1}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:18px;color:var(--ink3);transition:transform .3s var(--ease),color .2s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--violet)}
.faq p{padding:0 2px 16px;font-size:13.5px;color:var(--ink2)}
.vbox{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(237,237,238,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.vbox.is-on{opacity:1;visibility:visible;transition:opacity .3s}
.vbox__in{width:min(1080px,100%);display:flex;flex-direction:column;gap:12px}
.vbox__bar{display:flex;align-items:center;gap:12px}
.vbox__bar b{flex:1;font-size:16px}
.vbox video{width:100%;max-height:78dvh;border-radius:10px;background:#000}
.vbox__soon{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1px solid var(--hair);border-radius:10px;
  background:var(--box) radial-gradient(circle,#c9c9ce 1px,transparent 1.3px) 0 0/14px 14px;color:var(--ink2)}
.vbox__soon .soon__ic{margin-bottom:6px;color:var(--violet)}
.vbox__soon b{font-size:18px;color:var(--ink)}.vbox__soon span{font-size:13.5px}

/* phones: tabs move to a bar at the bottom; the header keeps only the name and the buy button */
@media(max-width:979px){
  :root{--hd:58px}
  :root{--side:0px;--top:0px}
  .top{display:none}
  .tabs{top:auto;right:0;left:0;bottom:0;width:auto;z-index:30;height:calc(var(--bar) + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);
    background:rgba(237,237,238,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:0;border-top:1px solid var(--hair)}
  .tabs__more,.tab .tn{display:none}
  .tabs__track{display:grid;grid-template-columns:repeat(4,1fr);height:100%;border:0}
  .tab{justify-content:center;gap:0;height:100%;padding:0;border:0;font-size:13.5px;color:var(--ink3);background:none}
  .tab+.tab{border-inline-start:1px solid var(--hair)}
  .tab::before{top:0;bottom:auto;left:28%;right:28%;width:auto;height:2px;transform:scaleX(0)}
  .tab.is-on{color:var(--ink);background:none}
  .tab.is-on::before{transform:scaleX(1)}
  .hd__buy{height:38px}
  .hd__buy .off span{display:none}
  .box__k{display:none}
  .teaser{aspect-ratio:16/7.5}
  .view{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
  .view[data-view="home"]{padding-bottom:calc(var(--bar) + 38px + env(safe-area-inset-bottom))}
  .home{gap:22px}
  .view__in{padding:8px var(--pad) 16px}
  .ticker{display:none;bottom:calc(var(--bar) + env(safe-area-inset-bottom));height:38px;border-top:0;border-block:1px solid var(--hair)}
  body[data-tab="home"] .ticker{display:flex}
  .ticker__lbl{padding:0 12px;font-size:12px}
  .tk{font-size:12.5px;padding:0 16px}
  .tk::after{margin-inline-start:16px}
  .lead{font-size:14.5px;line-height:1.85}
  .fx__t .lead{font-size:14.5px}
  .fx__acts .btn{height:42px;padding:0 13px;font-size:13.5px}
}
@media(max-height:740px) and (max-width:979px){
  :root{--hd:52px;--bar:54px}
  .home{gap:18px}.home__t{gap:10px}.home h1{font-size:31px}.box__line{height:44px}.box__head{padding:8px 12px}.home__d{display:none}
  .stage .mini{aspect-ratio:16/8}.fx__t h2{font-size:22px}.fx{gap:6px}
  .track__pic{aspect-ratio:16/7}.said q{font-size:19px}.tv{gap:12px}
}
@media(min-width:980px) and (max-height:800px){:root{--lrow:60px}.home h1{font-size:clamp(44px,4.4vw,60px)}.home__t{gap:10px}.view__in{padding-top:6px;padding-bottom:16px}.box{margin-top:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.ticker__track{animation:none}}
.track__pic .play{width:56px;height:56px;box-shadow:0 8px 24px -8px rgba(79,31,255,.6)}
.track__pic .play svg{width:20px;height:20px}
.vbox.is-on .pop{animation:none}
/* moving between reviews: the new one rises in, the waveform reshapes */
.vo__nav{display:flex;align-items:center;gap:8px}
.vo__nav .ibtn{width:38px;height:38px}
.vo.swap .said,.vo.swap .who,.vo.swap .vo__head .chip-s{animation:in .5s var(--ease) both}
.vo.swap .who{animation-delay:.06s}
.box__k{white-space:nowrap}
@media(min-width:980px) and (max-width:1200px){.box__k{display:none}}

/* desktop: features, tutorials and reviews all start from the same point: same top, same right edge */
@media(min-width:980px){
  :root{--vtop:clamp(14px,7vh,90px)}
  .view__in.feat,.view__in.tv,.view__in.vo{align-content:start;padding-top:var(--vtop)}
  .view__in.vo{max-width:1320px;align-items:start}
  .vo__side{align-self:start}
}
@media(min-width:980px){.home h1{font-size:clamp(36px,4.3vw,64px);line-height:1.2}}

/* the feature pictures are real screenshots of the app */
.stage .mini--shot{display:block;position:relative;overflow:hidden}
.stage .mini--shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.stage .mini--shot[data-k="viewer"] img{object-fit:contain;object-position:50% 50%}
.stage .mini--shot[hidden]{display:none}

/* =============================================================================
   Little product pictures, drawn in CSS — they scale with their box
   ============================================================================= */
.mini{position:relative;aspect-ratio:16/10;border-radius:14px;border:1px solid var(--line2);background:#0e0e13;overflow:hidden;direction:ltr}
.mini--tall{aspect-ratio:4/3}
.f1{background:linear-gradient(160deg,#2b4c63,#0f1c27 70%)}
.f2{background:linear-gradient(170deg,#c47a3c,#3b1d10 75%)}
.f3{background:linear-gradient(150deg,#5b3d6f,#1b1224 70%)}
.f4{background:linear-gradient(160deg,#36695a,#0f201b 70%)}
.f5{background:linear-gradient(170deg,#b8a27c,#2a2418 75%)}
.f6{background:linear-gradient(160deg,#7a2f3a,#1e0d11 70%)}
.f7{background:linear-gradient(165deg,#2f3d6e,#0d1022 70%)}
.f8{background:linear-gradient(160deg,#8a6a34,#221a0c 72%)}
.sun{position:relative}
.sun::after{content:"";position:absolute;width:18%;aspect-ratio:1;border-radius:50%;right:18%;top:24%;background:rgba(255,226,180,.55)}
.hill{position:relative}
.hill::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:62%;border-radius:50%;background:rgba(0,0,0,.35)}

/* library */
.m-lib{display:grid;grid-template-columns:24% 1fr;height:100%}
.m-lib__side{border-right:1px solid var(--line);padding:9% 9%;display:flex;flex-direction:column;gap:7%}
.m-lib__side i{display:block;height:6%;min-height:5px;border-radius:4px;background:rgba(255,255,255,.08)}
.m-lib__side i.on{background:var(--amber-soft);outline:1px solid var(--amber-line)}
.m-lib__side i.imp{height:9%;background:var(--amber-soft);outline:1px solid var(--amber-line);margin-bottom:6%}
.m-lib__grid{padding:5%;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;align-content:start}
.m-lib__grid div{border-radius:6px;position:relative}
.m-lib__grid div:nth-child(3n+1){aspect-ratio:3/4}.m-lib__grid div:nth-child(3n+2){aspect-ratio:1}.m-lib__grid div:nth-child(3n){aspect-ratio:4/5}
.m-lib__grid div b{position:absolute;left:6%;bottom:7%;font-size:clamp(5px,.75vw,8px);letter-spacing:.06em;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.55);color:#ddd;font-weight:700}
.m-lib__grid div b.v{color:#8fb9ff}

/* capture */
.m-cap{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto auto;gap:4%;padding:5%}
.m-cap__frame{border-radius:8px;position:relative;overflow:hidden}
.m-cap__tl{position:relative;height:clamp(16px,3.2vw,26px);border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.m-cap__tl::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 8%)}
.m-cap__rng{position:absolute;top:0;bottom:0;left:26%;width:40%;background:var(--amber-soft);border-left:2px solid var(--amber);border-right:2px solid var(--amber)}
.m-cap__head{position:absolute;top:-2px;bottom:-2px;left:26%;width:2px;background:#fff;animation:head 5s linear infinite}
@keyframes head{0%{left:26%}100%{left:66%}}
.m-cap__strip{display:grid;grid-template-columns:repeat(6,1fr);gap:3%}
.m-cap__strip div{aspect-ratio:16/10;border-radius:5px;animation:pop 5s var(--ease) infinite}
.m-cap__strip div:nth-child(2){animation-delay:.8s}.m-cap__strip div:nth-child(3){animation-delay:1.6s}.m-cap__strip div:nth-child(4){animation-delay:2.4s}
.m-cap__strip div:nth-child(5){animation-delay:3.2s}.m-cap__strip div:nth-child(6){animation-delay:4s}
@keyframes pop{0%,8%{opacity:.25;transform:translateY(6px)}16%,100%{opacity:1;transform:none}}

/* board */
.m-board{position:absolute;inset:0}
.m-card{position:absolute;border-radius:7px;background:#17171e;border:1px solid rgba(255,255,255,.09);padding:3%;display:flex;flex-direction:column;gap:7%}
.m-card i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.m-card i.t{height:6px;width:55%;background:rgba(255,255,255,.4)}
.m-card .row{display:flex;align-items:center;gap:6%}
.m-card .row s{flex:none;width:9px;height:9px;border-radius:3px;border:1px solid rgba(255,255,255,.3)}
.m-card .row s.on{background:var(--amber);border-color:var(--amber)}
.m-card .row i{flex:1}
.m-clip{position:absolute;border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.m-clip .bar{position:absolute;left:5%;right:5%;bottom:7%;height:15%;border-radius:5px;background:rgba(0,0,0,.5);display:flex;align-items:center;gap:6%;padding:0 5%}
.m-clip .bar i{width:0;height:0;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.m-clip .bar u{flex:1;height:2px;background:rgba(255,255,255,.3);position:relative;text-decoration:none}
.m-clip .bar u::after{content:"";position:absolute;left:0;top:0;bottom:0;width:45%;background:var(--amber);animation:prog 6s linear infinite}
@keyframes prog{from{width:5%}to{width:95%}}
.m-voice{position:absolute;border-radius:7px;background:#17171e;border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:4%;padding:0 4%}
.m-voice s{flex:none;width:18%;aspect-ratio:1;border-radius:50%;background:var(--amber);position:relative}
.m-voice span{flex:1;display:flex;align-items:center;gap:6%;height:60%}
.m-voice span i{flex:1;border-radius:2px;background:rgba(255,255,255,.35);animation:wave 1.6s ease-in-out infinite}
@keyframes wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.m-sw{position:absolute;display:flex;gap:5%}
.m-sw i{flex:1;aspect-ratio:1;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.m-pin{position:absolute;width:5.5%;aspect-ratio:1;border-radius:50% 50% 50% 0;background:var(--amber);transform:rotate(-45deg)}
.m-board svg.m-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* export */
.m-exp{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;padding:9% 7%;align-items:center}
.m-file{aspect-ratio:3/4;border-radius:9px;border:1px solid var(--line2);background:#15151c;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:9%;gap:6%}
.m-file::before{content:"";position:absolute;inset:10% 12% 38%;border-radius:5px;background:linear-gradient(160deg,#2b4c63,#0f1c27)}
.m-file b{position:relative;font-size:clamp(9px,1.6vw,15px);letter-spacing:.06em}
.m-file small{position:relative;font-size:clamp(6px,1vw,10px);color:var(--ink3)}
.m-file.pdf b{color:#ff8a7a}.m-file.png b{color:#8fd0ff}.m-file.cb b{color:var(--violet-ink)}
.m-file.cb{border-color:var(--violet-line)}
.m-file.cb::before{background:linear-gradient(160deg,#4f1fff,#1a0b55)}

/* viewer home */
.m-view{position:absolute;inset:0;display:flex;flex-direction:column}
.m-view__bar{height:11%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:3%;padding:0 4%}
.m-view__bar img{height:58%;width:auto;border-radius:3px}
.m-view__bar i{display:block;height:20%;width:13%;border-radius:2px;background:rgba(255,255,255,.18)}
.m-view__grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;padding:6% 5%;align-content:start}
.m-view__grid div{display:flex;flex-direction:column;gap:12%}
.m-view__grid div s{aspect-ratio:16/9;border-radius:5px;border:1px solid rgba(255,255,255,.1);display:block}
.m-view__grid div i{height:4px;width:60%;margin-inline:auto;border-radius:2px;background:rgba(255,255,255,.2)}
.m-view__grid .new s{display:grid;place-items:center;background:rgba(255,255,255,.03)}
.m-view__grid .new s img{width:26%}


/* ---------------------------------------------------------------- download (assets/js/download.js) */
.top__dl{flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;margin-inline-start:auto;color:var(--ink);font-size:14px;font-weight:700;border-inline-start:1px solid var(--hair);transition:background-color .2s}
.top__dl:hover{background:var(--white)}
.top__dl svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.top__dl:hover svg{transform:translateY(2px)}
.top__dl + .top__buy{margin-inline-start:0}
.hd__dl{margin-inline-start:auto}
.hd__dl + .hd__buy{margin-inline-start:0}
.dlhome{display:flex;align-items:center;gap:10px;width:100%;max-width:490px;margin-top:10px;padding:12px 14px;border:1px solid var(--hair2);border-radius:10px;background:var(--white);color:var(--ink);font-size:14px;font-weight:700;text-align:start;transition:border-color .2s,transform .2s}
.dlhome:hover{border-color:var(--violet)}
.dlhome svg{flex:none;width:20px;height:20px;color:var(--violet)}
.dlhome small{margin-inline-start:auto;font-weight:400;font-size:12.5px;color:var(--ink3)}
.dl{display:flex;flex-direction:column;gap:14px}
.dl__list{display:flex;flex-direction:column;gap:8px}
.dl__os{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--hair2);border-radius:10px;background:var(--box);color:var(--ink);transition:border-color .2s,background-color .2s}
.dl__os:hover{border-color:var(--ink3);background:var(--white)}
.dl__os.is-main{background:var(--violet);border-color:var(--violet);color:#fff}
.dl__os.is-main:hover{background:var(--violet2);border-color:var(--violet2)}
.dl__os.is-off{opacity:.55}
.dl__ic svg{width:26px;height:26px;display:block}
.dl__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl__t b{font-size:15.5px}
.dl__t span{font-size:13px;opacity:.85}
.dl__t small{font-size:12px;opacity:.65}
.dl__go{margin-inline-start:auto}
.dl__go svg{width:22px;height:22px;display:block}
.dl__free,.dl__phone,.dl__safe{margin:0;font-size:13px;color:var(--ink2);line-height:1.9}
.dl__phone{padding:10px 12px;border:1px solid var(--hair2);border-radius:8px;background:var(--box)}
.dl__safe{font-size:12px;color:var(--ink3)}
.dl__notes,.dl__how{padding:14px 16px;border:1px solid var(--hair);border-radius:10px;background:var(--box)}
.dl__notes ul,.dl__how ol{margin:8px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink2);line-height:1.8}

/* ---------------------------------------------------------------- home: download box (replaces the buy box) */
.dlbox__b{display:flex;flex-direction:column;gap:10px;margin:12px}
.dlbox__btn{height:52px;font-size:15.5px;width:100%}
.dlbox__btn svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.dlbox__btn:hover svg{transform:translateY(2px)}
.dlbox__s{margin:0;font-size:13px;color:var(--ink2);line-height:1.8}
.dlbox .box__price{font-size:13px;font-weight:400;color:var(--ink3)}

/* ---------------------------------------------------------------- home: picture of the app while there is no teaser film */
.teaser:has(#teaserV[hidden]) .teaser__tag{display:none}
.show{background:radial-gradient(120% 90% at 85% 0%,rgba(79,31,255,.42),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(79,31,255,.18),transparent 60%),#0c0c11;color:#fff;overflow:hidden}
.show__glow{position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:rgba(107,69,255,.25);filter:blur(60px)}
.show__back,.show__win,.show__mini{position:absolute;margin:0;border-radius:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.show__back{left:3%;top:7%;width:55%;opacity:.5;transform:rotate(-6deg);animation:shF 9s var(--ease) infinite alternate}
.show__win{right:4%;top:11%;width:73%;overflow:hidden;background:#111116;animation:shF 7s var(--ease) infinite alternate-reverse}
.show__bar{display:flex;align-items:center;gap:5px;height:18px;padding:0 9px;background:#16161d;border-bottom:1px solid rgba(255,255,255,.06)}
.show__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.show__bar i:first-child{background:#ff5f57}.show__bar i:nth-child(2){background:#febc2e}.show__bar i:nth-child(3){background:#28c840}
.show__bar span{margin-inline-start:auto;font-size:8.5px;letter-spacing:.2em;color:rgba(255,255,255,.45);font-weight:700}
.show__win img,.show__back,.show__mini img{display:block;width:100%;height:auto}
.show__back{height:auto}
.show__mini{left:5%;bottom:10%;width:33%;overflow:hidden;transform:rotate(4deg);border:2px solid rgba(255,255,255,.9);animation:shF 8s var(--ease) infinite alternate}
.show__tags{position:absolute;right:4%;bottom:5%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:60%}
.show__tags span{padding:3px 10px;border-radius:999px;font-size:11.5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);color:rgba(255,255,255,.9)}
.show__tags span:first-child{background:var(--violet);border-color:var(--violet)}
@keyframes shF{from{translate:0 0}to{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.show__back,.show__win,.show__mini{animation:none}}

/* ---------- CAPTURE Viewer (a separate, free app) ---------- */
.tabs__vw small{display:block;font-size:11px;color:var(--ink3);margin-top:1px}
.fx__vw{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 12px;border:1px dashed var(--hair2);border-radius:8px;background:transparent;color:var(--ink2);font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .2s,color .2s}
.fx__vw:hover{border-color:var(--ink3);color:var(--ink)}
.fx__vw svg{width:18px;height:18px}
.vwcard{display:flex;align-items:center;gap:12px;width:100%;margin-top:4px;padding:14px 16px;border:1px dashed var(--hair2);border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .2s,background-color .2s}
.vwcard:hover{border-color:var(--ink3);background:var(--box)}
.vwcard__ic svg{width:24px;height:24px;display:block;color:var(--ink2)}
.vwcard__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.vwcard__t b{font-size:14px}
.vwcard__t span{font-size:12.5px;color:var(--ink2)}
.vwcard__go{margin-inline-start:auto;color:var(--ink3);font-size:18px}
.vw__cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vw__c{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--hair);border-radius:10px;font-size:12.5px;color:var(--ink3);line-height:1.8}
.vw__c b{font-size:14.5px;color:var(--ink2)}
.vw__c.is-on{border-color:var(--ink);background:var(--box);color:var(--ink2)}
.vw__c.is-on b{color:var(--ink)}
.vw__c strong{color:var(--ink)}
.vw__k{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.08em;direction:ltr;text-align:right}
.dl__os.is-vw{background:var(--ink);border-color:var(--ink);color:var(--white)}
.dl__os.is-vw:hover{background:var(--ink2);border-color:var(--ink2)}
.vwback{align-self:flex-start;background:none;border:0;padding:4px 0;color:var(--ink3);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vwback:hover{color:var(--ink)}
@media (max-width:520px){.vw__cmp{grid-template-columns:1fr}}