/* FXpips — the narrated walkthrough player (static/js/walkthrough.js) and the scenes the Academy and Tools
   pages give it. Sizes inside the screen are in cqw, so a scene scales with it from a phone to a desktop. */
.walkthrough{position:relative;margin:0;width:100%;min-width:0;display:grid;gap:10px}
.editorial-intro > .walkthrough{max-width:600px;justify-self:end}
@media(max-width:780px){.editorial-intro > .walkthrough{max-width:none}}
.walkthrough.is-ready > .editorial-art{display:none}   /* the picture, until the script takes over */
.walkthrough:not(.is-ready):not(:has(> img)){display:none}   /* nothing to fall back on: nothing until it runs */
/* Beside a page's headline (the Tools intro): copy on the left, the walkthrough on the right. */
.page-intro.has-walkthrough{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:44px;align-items:center}
@media(max-width:980px){.page-intro.has-walkthrough{grid-template-columns:minmax(0,1fr);gap:28px}}

.tour-stage{position:relative}
.tour-screen{position:relative;container-type:inline-size;aspect-ratio:3/2;overflow:hidden;border-radius:20px;border:1px solid var(--p-border,#1b3444);cursor:pointer;color:var(--p-strong,#eef5f2);
  background:radial-gradient(90% 80% at 88% 0%,#0f3b47 0,transparent 60%),radial-gradient(70% 60% at 0% 100%,#0c2f28 0,transparent 62%),linear-gradient(160deg,#07161f,#030a10);box-shadow:0 22px 50px #0006}
:root:not([data-theme="dark"]) .tour-screen{background:radial-gradient(90% 80% at 88% 0%,#d3f1f6 0,transparent 60%),radial-gradient(70% 60% at 0% 100%,#d9f2e7 0,transparent 62%),linear-gradient(160deg,#f8feff,#e9f6fb);box-shadow:0 18px 40px #1c5e8a24}
.tour-chrome{position:absolute;top:0;left:0;right:0;height:7.5cqw;display:flex;align-items:center;gap:1.2cqw;padding:0 3cqw;border-bottom:1px solid var(--p-border,#1b3444);font-size:max(10px,1.9cqw);letter-spacing:.04em;color:var(--p-soft,#7c909a)}
.tour-chrome i{width:1.6cqw;height:1.6cqw;min-width:6px;min-height:6px;border-radius:50%;background:#ff5f57}
.tour-chrome i:nth-child(2){background:#febc2e}
.tour-chrome i:nth-child(3){background:#28c840}
.tour-chrome span{margin-left:1.4cqw}
.tour-scene{position:absolute;inset:10cqw 5cqw 14cqw;display:grid;place-items:center;align-content:center;opacity:0;transform:translateY(2cqw) scale(.98);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.tour-scene.is-active{opacity:1;transform:none}
/* The slow camera push runs only while it plays: an idle page has nothing moving. */
.walkthrough.is-started .tour-scene.is-active{animation:ts-camera 9s ease-out both}
@keyframes ts-camera{from{scale:1}to{scale:1.035}}
.tour-caption{position:absolute;left:3cqw;right:3cqw;bottom:2.6cqw;margin:0;padding:1.3cqw 2.2cqw;border-radius:1.8cqw;background:#020a10d1;color:#f2f8fb;font-size:max(12px,2.35cqw);line-height:1.4;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tour-caption:empty{display:none}
.tour-caption span{color:#f2f8fb8c;transition:color .15s ease}
.tour-caption span.is-said{color:#fff}

/* Before it starts: the first scene, dimmed, behind a play button. */
.walkthrough:not(.is-started) .tour-scene.is-active{opacity:.3}
.walkthrough:not(.is-started) .tour-caption{display:none}
/* The poster's buttons: watch (in the remembered language), or straight into Hindi. */
.tour-starts{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.tour-start{display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 10px;border-radius:999px;border:1px solid #3fcf9766;background:#03141be6;color:#eafff6;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 10px 30px #0008;animation:tour-beckon 2.4s ease-in-out 3}
.tour-start .ic{width:34px;height:34px;padding:9px;border-radius:50%;background:var(--p-green,#4aeb9f);color:#032737}
.tour-start:hover{background:#062129}
.walkthrough.is-started .tour-starts{display:none}
.tour-start-hi{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 7px;border-radius:999px;border:1px solid #ffffff2e;background:#03141bcc;color:#eafff6;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.tour-start-hi .ic{width:24px;height:24px;padding:6px;border-radius:50%;background:#ffffff1f;color:#eafff6}
.tour-start-hi:hover{background:#062129}
.tour-start-hi:focus-visible{outline:2px solid #35d4ff;outline-offset:3px}
@keyframes tour-beckon{50%{box-shadow:0 10px 30px #0008,0 0 0 10px #33ed9814}}

/* The real link at the end, laid over the last scene where its button is drawn. */
.tour-cta{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;background:var(--gradient,linear-gradient(90deg,#18c7c7,#bd48b9));color:#fff;font-size:clamp(14px,3.4cqw,21px);font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 10px 28px #18c7c744;animation:ts-beckon 1.8s ease-in-out .4s infinite}
.tour-cta[hidden]{display:none}
.tour-cta:hover{filter:brightness(1.08)}
.tour-cta:focus-visible{outline:2px solid #35d4ff;outline-offset:3px}

/* The timeline: one segment per chapter, as long as the chapter, filling as it plays. */
.tour-timeline{display:flex;gap:3px;height:14px;align-items:center}
.tour-chapter{position:relative;flex:1;height:5px;padding:0;border:0;border-radius:99px;background:var(--p-surface-3,#0f212c);cursor:pointer;overflow:visible;transition:height .15s ease}
:root:not([data-theme="dark"]) .tour-chapter{background:#d6e8f1}
.tour-chapter::before{content:"";position:absolute;inset:-6px 0}    /* a finger-sized target */
.tour-chapter i{position:absolute;inset:0;border-radius:inherit;width:var(--fill,0%);background:var(--gradient,linear-gradient(90deg,#18c7c7,#bd48b9))}
.tour-chapter:hover,.tour-chapter.is-current{height:8px}
.tour-chapter:focus-visible{outline:2px solid #35d4ff;outline-offset:3px}

/* The controls, under the timeline. */
.tour-controls{display:flex;align-items:center;gap:10px}
.tour-play{flex:none;width:42px;height:42px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--p-green,#4aeb9f);color:#032737;cursor:pointer}
.tour-play .ic{width:18px;height:18px}
.tour-skip{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--p-strong,#eef5f2);cursor:pointer}
.tour-skip:hover{background:var(--p-surface-3,#0f212c)}
.tour-skip .ic{width:16px;height:16px}
.tour-prev .ic{transform:scaleX(-1)}
.tour-time{flex:none;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--p-strong,#eef5f2)}
.tour-label{flex:1;min-width:0;font-size:12.5px;color:var(--p-text-2,#9aaeb8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour-label::before{content:"· "}
.tour-speed,.tour-voice{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--p-border-2,#24475a);background:var(--p-surface-3,#0f212c);color:var(--p-strong,#eef5f2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.tour-speed{min-width:44px;justify-content:center;font-variant-numeric:tabular-nums}
.tour-lang{flex:none;min-width:52px;min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--p-border-2,#24475a);background:var(--p-surface-3,#0f212c);color:var(--p-strong,#eef5f2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.tour-lang[aria-pressed="true"]{border-color:var(--p-green,#4aeb9f);color:var(--p-green,#4aeb9f)}
.tour-voice .ic{width:16px;height:16px}
.tour-voice .tour-mute{display:none}
.tour-voice.is-muted{color:var(--p-soft,#7c909a)}
.tour-voice.is-muted .tour-waves{display:none}
.tour-voice.is-muted .tour-mute{display:inline}
.tour-voice:disabled{cursor:default;opacity:.75}
.tour-controls button:focus-visible,.tour-start:focus-visible{outline:2px solid #35d4ff;outline-offset:3px}
.tour-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:520px){.tour-label{display:none}.tour-voice span{display:none}.tour-voice{padding:0 9px}.tour-controls{gap:6px}.tour-time{margin-right:auto}}
/* Phones: a taller screen, so each scene and its caption have room. */
@media(max-width:520px){.tour-screen{aspect-ratio:4/3}.tour-scene{inset:9cqw 4cqw 15cqw}}

/* Paused, everything holds still. */
.walkthrough.is-started.is-paused .tour-screen *{animation-play-state:paused!important}

/* ---- the scenes */
.ts-card{width:min(100%,64cqw);display:grid;gap:1.4cqw;padding:3.2cqw 3.6cqw;border-radius:2.6cqw;background:var(--p-surface-2,#081722);border:1px solid var(--p-border-2,#24475a);box-shadow:0 2cqw 5cqw #0005;text-align:left}
:root:not([data-theme="dark"]) .ts-card{background:#fff;box-shadow:0 2cqw 5cqw #1c5e8a1f}
.ts-kicker{display:flex;align-items:center;gap:1cqw;font-size:max(8px,1.7cqw);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p-green,#4aeb9f)}
.ts-kicker .ic{width:2.3cqw;height:2.3cqw}
.ts-title{font-size:max(13px,4.8cqw);line-height:1.1;font-weight:800;color:var(--p-strong,#eef5f2)}
.ts-pills{display:flex;flex-wrap:wrap;gap:1.4cqw}
.ts-pills span{padding:1cqw 2.2cqw;border-radius:99px;background:var(--p-green-bg,#0b3a30);color:var(--p-green-2,#72e7b7);font-size:max(8px,2cqw);font-weight:700;opacity:0;transform:translateY(1.5cqw)}
.is-active .ts-pills span{animation:ts-rise .5s ease forwards}
.is-active .ts-pills span:nth-child(2){animation-delay:.3s}
.is-active .ts-pills span:nth-child(3){animation-delay:.6s}

.ts-list{width:min(100%,70cqw);display:grid;gap:1.1cqw;margin:0;padding:0;list-style:none}
.ts-list li{display:grid;grid-template-columns:4.4cqw minmax(0,1fr) auto;align-items:center;gap:1.8cqw;padding:1.3cqw 2cqw;border-radius:1.8cqw;background:var(--p-surface-2,#081722);border:1px solid var(--p-border,#1b3444);font-size:max(8px,2.1cqw);opacity:0;transform:translateX(-2cqw)}
:root:not([data-theme="dark"]) .ts-list li{background:#fff}
.ts-list b{display:grid;place-items:center;width:4.4cqw;height:4.4cqw;border-radius:50%;background:var(--p-surface-3,#0f212c);color:var(--p-strong,#eef5f2);font-size:max(8px,2cqw)}
.ts-list li span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--p-strong,#eef5f2)}
.ts-list small{font-size:max(8px,1.7cqw);color:var(--p-soft,#7c909a)}
.is-active .ts-list li{animation:ts-rise .45s ease forwards}
.is-active .ts-list li:nth-child(2){animation-delay:.12s}
.is-active .ts-list li:nth-child(3){animation-delay:.24s}
.is-active .ts-list li:nth-child(4){animation-delay:.36s}
.is-active .ts-list li:nth-child(5){animation-delay:.48s}
.is-active .ts-list li.is-pick{animation:ts-rise .45s ease forwards,ts-pick .5s ease 2.2s forwards}

.ts-pointer{position:absolute;left:80%;top:92%;width:4.2cqw;height:4.2cqw;min-width:16px;min-height:16px;opacity:0;filter:drop-shadow(0 .4cqw .6cqw #0009);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1-4 7z' fill='%23fff' stroke='%23061018' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.ts-pointer::after{content:"";position:absolute;left:-40%;top:-40%;width:90%;height:90%;border-radius:50%;border:2px solid var(--p-green,#4aeb9f);opacity:0}
.is-active .ts-pointer{animation:ts-point 2.4s ease forwards}
.is-active .ts-pointer::after{animation:ts-ripple .6s ease-out 2.1s}
@keyframes ts-ripple{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(2.2)}}
@keyframes ts-point{0%{opacity:0}20%{opacity:1;left:80%;top:92%}80%{left:var(--tx);top:var(--ty);transform:none}88%{left:var(--tx);top:var(--ty);transform:scale(.8)}100%{opacity:1;left:var(--tx);top:var(--ty);transform:none}}
.ts-point-first{--tx:34%;--ty:15%}      /* Academy: the first module */
.ts-point-answer{--tx:44%;--ty:50%}     /* Academy: the quiz's right answer */
.ts-point-option{--tx:42%;--ty:36%}     /* Tools: the service finder's first option */
.ts-point-option2{--tx:46%;--ty:47%}    /* Tools: the style quiz's second option */

.ts-reader strong{font-size:max(10px,2.8cqw);color:var(--p-strong,#eef5f2)}
.ts-lessons{display:grid;gap:1cqw;margin:0;padding:0;list-style:none}
.ts-lessons li{display:flex;align-items:center;gap:1.4cqw;font-size:max(8px,2cqw);color:var(--p-text,#b6c5cc)}
.ts-tick{flex:none;display:grid;place-items:center;width:3cqw;height:3cqw;min-width:12px;min-height:12px;border-radius:50%;border:1px solid var(--p-border-2,#24475a);color:transparent}
.ts-tick .ic{width:2cqw;height:2cqw}
.is-active .ts-tick{animation:ts-tick .35s ease forwards;animation-delay:calc(1s + var(--i) * 1.1s)}
.ts-bar{height:1.2cqw;min-height:5px;border-radius:99px;background:var(--p-surface-3,#0f212c);overflow:hidden}
.ts-bar i{display:block;width:0;height:100%;background:var(--gradient,linear-gradient(90deg,#18c7c7,#bd48b9))}
.is-active .ts-reader .ts-bar i{animation:ts-fill 3.3s ease 1s forwards}

.ts-quiz{position:relative}
.ts-q{display:grid;gap:.9cqw}
.ts-q i{display:block;height:1.4cqw;min-height:5px;border-radius:99px;background:var(--p-border-2,#24475a)}
.ts-q i:nth-child(2){width:68%}
.ts-opt{display:flex;align-items:center;gap:1.4cqw;padding:1.1cqw 1.6cqw;border-radius:1.6cqw;border:1px solid var(--p-border,#1b3444)}
.ts-opt b{flex:none;display:grid;place-items:center;width:2.8cqw;height:2.8cqw;min-width:11px;min-height:11px;border-radius:50%;border:1px solid var(--p-border-2,#24475a);color:transparent}
.ts-opt b .ic{width:1.8cqw;height:1.8cqw}
.ts-opt i{display:block;flex:1;height:1.2cqw;min-height:4px;border-radius:99px;background:var(--p-surface-3,#0f212c)}
:root:not([data-theme="dark"]) .ts-opt i{background:#e3eff5}
.is-active .ts-opt.is-right{animation:ts-pick .4s ease 2.2s forwards}
.is-active .ts-opt.is-right b{animation:ts-tick .4s ease 2.2s forwards}
.ts-explain{display:flex;align-items:center;gap:1cqw;margin:0;font-size:max(8px,1.8cqw);color:var(--p-green-2,#72e7b7);opacity:0}
.ts-explain .ic{width:2cqw;height:2cqw}
.is-active .ts-explain{animation:ts-rise .4s ease 2.9s forwards}
.ts-badge{position:absolute;top:2.6cqw;right:3cqw;padding:.8cqw 1.8cqw;border-radius:99px;background:var(--p-green,#4aeb9f);color:#032737;font-size:max(8px,1.9cqw);font-weight:800;opacity:0;transform:scale(.6)}
.is-active .ts-badge{animation:ts-pop .45s cubic-bezier(.3,1.6,.5,1) 3.6s forwards}

.ts-cert{position:relative;overflow:hidden;width:min(100%,60cqw);aspect-ratio:1.414/1;display:grid;align-content:center;justify-items:center;gap:1.2cqw;padding:3.4cqw 4cqw;border-radius:2cqw;border:.5cqw double #c9a95a66;background:radial-gradient(ellipse at 12% 8%,#d6f7ea 0,transparent 42%),radial-gradient(ellipse at 92% 96%,#d5f1fb 0,transparent 42%),#fffefb;color:#26363d;text-align:center;box-shadow:0 3cqw 6cqw #0007;opacity:0;transform:translateY(4cqw) rotate(-2deg)}
.is-active .ts-cert{animation:ts-cert .8s cubic-bezier(.2,.9,.3,1.1) .3s forwards}
.ts-cert::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffffb3 45%,transparent 60%);transform:translateX(-120%)}
.is-active .ts-cert::after{animation:ts-shine 1.4s ease 1.1s forwards}
.ts-cert .ts-kicker{color:#0b7a55}
.ts-cert em{font:italic 700 max(12px,4.2cqw)/1.1 Georgia,"Times New Roman",serif;color:#1b2a30}
.ts-cert small{font-size:max(8px,1.8cqw);color:#4b5d63}
.ts-seal{position:absolute;top:2.4cqw;right:2.8cqw;width:6cqw;height:6cqw;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#f7d786,#c9a14a);color:#5a4210}
.ts-seal .ic{width:3.4cqw;height:3.4cqw}
.ts-cert-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.4cqw;margin-top:.6cqw;font-size:max(8px,1.5cqw);color:#4b5d63}
.ts-verify{display:inline-flex;align-items:center;gap:.6cqw;font-weight:700;color:#0b7a55;opacity:0}
.ts-verify .ic{width:1.8cqw;height:1.8cqw}
.is-active .ts-verify{animation:ts-rise .4s ease 1.7s forwards}
.ts-pdf{padding:.4cqw 1.2cqw;border-radius:.8cqw;background:#e9eef0;font-weight:700;opacity:0}
.is-active .ts-pdf{animation:ts-rise .4s ease 2.3s forwards}

.ts-devices{display:flex;align-items:center;gap:3cqw}
.ts-device{display:grid;align-content:end;gap:1.4cqw;padding:2.4cqw;border:1px solid var(--p-border-2,#24475a);background:var(--p-surface-2,#081722);font-size:max(8px,1.8cqw);color:var(--p-text,#b6c5cc)}
:root:not([data-theme="dark"]) .ts-device{background:#fff}
.ts-device span{display:flex;align-items:center;gap:.8cqw}
.ts-device .ic{flex:none;width:2.2cqw;height:2.2cqw}
.ts-laptop{width:32cqw;aspect-ratio:16/10;border-radius:1.6cqw}
.ts-phone{width:19cqw;aspect-ratio:9/15;border-radius:2.8cqw}
.ts-sync{display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:50%;background:var(--p-green-bg,#0b3a30);color:var(--p-green,#4aeb9f);opacity:0;transform:scale(.6)}
.ts-sync .ic{width:3cqw;height:3cqw}
.is-active .ts-laptop .ts-bar i{animation:ts-fill 1.6s ease .6s forwards}
.is-active .ts-sync{animation:ts-pop .45s ease 2.6s forwards}
.is-active .ts-phone{animation:ts-pick .6s ease 3.4s forwards}
.is-active .ts-phone .ts-bar i{animation:ts-fill 1.4s ease 3.4s forwards}

.ts-tiles{width:min(100%,76cqw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw}
.ts-tiles div{display:grid;justify-items:center;gap:1.2cqw;padding:3cqw 1.4cqw;border-radius:2cqw;background:var(--p-surface-2,#081722);border:1px solid var(--p-border-2,#24475a);font-size:max(8px,1.9cqw);font-weight:700;color:var(--p-strong,#eef5f2);text-align:center;opacity:0;transform:translateY(2cqw)}
:root:not([data-theme="dark"]) .ts-tiles div{background:#fff}
.ts-tiles .ic{width:5cqw;height:5cqw;color:var(--p-green,#4aeb9f)}
.is-active .ts-tiles div{animation:ts-rise .5s ease forwards;animation-delay:calc(.4s + var(--i) * .35s)}
.ts-ribbon{margin-top:2.6cqw;display:inline-flex;align-items:center;gap:1cqw;padding:1.2cqw 2.4cqw;border-radius:99px;background:linear-gradient(90deg,#f7d786,#c9a14a);color:#3d2d08;font-size:max(8px,1.9cqw);font-weight:800;opacity:0;transform:scale(.6)}
.ts-ribbon .ic{width:2.4cqw;height:2.4cqw}
.is-active .ts-ribbon{animation:ts-pop .5s ease 3.4s forwards}

.ts-cta-space{display:block;height:16cqw}
.ts-cta{display:inline-flex;align-items:center;gap:1.4cqw;padding:2.4cqw 4.4cqw;border-radius:99px;background:var(--gradient,linear-gradient(90deg,#18c7c7,#bd48b9));color:#fff;font-size:max(12px,3.6cqw);font-weight:800;box-shadow:0 1.6cqw 4cqw #18c7c744}
.is-active .ts-cta{animation:ts-beckon 1.8s ease-in-out .4s infinite}
.ts-note{margin-top:2cqw;font-size:max(8px,1.9cqw);color:var(--p-soft,#7c909a);text-align:center}

/* ---- Tools: five tiles, question cards, the calculator, the projector's curve, the simulator's candles */
.ts-tiles.is-five{width:min(100%,88cqw);grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6cqw}
.ts-tiles.is-five div{padding:2.6cqw 1cqw;font-size:max(8px,1.7cqw)}
.ts-tiles.is-five .ic{width:4.4cqw;height:4.4cqw}
.ts-ribbon-soft{background:var(--p-green-bg,#0b3a30);color:var(--p-green-2,#72e7b7)}
.ts-ask{width:min(100%,72cqw);gap:1cqw}
.ts-question{font-size:max(10px,2.5cqw);line-height:1.3;color:var(--p-strong,#eef5f2)}
.ts-ask .ts-opt{padding:.9cqw 1.6cqw;font-size:max(8px,1.85cqw);color:var(--p-text,#b6c5cc)}
.ts-ask .ts-opt span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ts-match{display:grid;gap:.2cqw;padding:1.2cqw 1.8cqw;border-radius:1.6cqw;border:1px solid var(--p-green,#4aeb9f);background:var(--p-green-bg,#0b3a30);opacity:0;transform:translateY(1.5cqw)}
.ts-match span{font-size:max(7px,1.5cqw);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p-green-2,#72e7b7)}
.ts-match strong{font-size:max(11px,2.8cqw);color:var(--p-strong,#eef5f2)}
.ts-match small{font-size:max(7px,1.5cqw);color:var(--p-text-2,#9aaeb8)}
.is-active .ts-match{animation:ts-rise .45s ease 2.9s forwards}
.ts-styles{display:grid;gap:.7cqw;opacity:0}
.ts-styles span{display:grid;grid-template-columns:9cqw minmax(0,1fr);align-items:center;gap:1.2cqw;font-size:max(8px,1.7cqw);color:var(--p-text-2,#9aaeb8)}
.ts-styles span::after{content:"";width:var(--v);height:1.3cqw;min-height:5px;border-radius:99px;background:var(--p-border-2,#24475a)}
.ts-styles .is-top{font-weight:800;color:var(--p-strong,#eef5f2)}
.ts-styles .is-top::after{background:var(--gradient,linear-gradient(90deg,#18c7c7,#bd48b9))}
.is-active .ts-styles{animation:ts-rise .45s ease 2.9s forwards}
.ts-calc,.ts-chart,.ts-sim{width:min(100%,68cqw);gap:1.2cqw}
.ts-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1cqw}
.ts-fields div{display:grid;gap:.3cqw;padding:1.1cqw 1.5cqw;border-radius:1.4cqw;border:1px solid var(--p-border,#1b3444);background:var(--p-surface-3,#0f212c);opacity:0;transform:translateY(1cqw)}
:root:not([data-theme="dark"]) .ts-fields div{background:#f3f9fc}
.is-active .ts-fields div{animation:ts-rise .4s ease forwards;animation-delay:calc(.4s + var(--i) * .5s)}
.ts-fields span{font-size:max(7px,1.45cqw);letter-spacing:.06em;text-transform:uppercase;color:var(--p-soft,#7c909a)}
.ts-fields b{font-size:max(9px,2.2cqw);color:var(--p-strong,#eef5f2)}
.ts-result{display:grid;gap:.2cqw;padding:1.4cqw 2cqw;border-radius:1.6cqw;border:1px solid var(--p-green-line,#286c50);background:var(--p-green-bg,#0b3a30);opacity:0;transform:scale(.92)}
.is-active .ts-result{animation:ts-pop .5s cubic-bezier(.3,1.5,.5,1) 2.8s forwards}
.ts-result span{font-size:max(7px,1.45cqw);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p-green-2,#72e7b7)}
.ts-result strong{font-size:max(14px,4.2cqw);line-height:1.1;color:var(--p-strong,#eef5f2)}
.ts-result small{font-size:max(7px,1.55cqw);color:var(--p-text-2,#9aaeb8)}
.ts-fine{font-size:max(7px,1.4cqw);color:var(--p-soft,#7c909a)}
.ts-chart{position:relative}
.ts-chart-meta{display:flex;flex-wrap:wrap;gap:1cqw}
.ts-chart-meta span{padding:.5cqw 1.4cqw;border-radius:99px;background:var(--p-surface-3,#0f212c);font-size:max(7px,1.5cqw);color:var(--p-text,#b6c5cc)}
:root:not([data-theme="dark"]) .ts-chart-meta span{background:#eaf4f9}
.ts-chart svg{display:block;width:100%;height:17cqw}
.ts-grid{fill:none;stroke:var(--p-border,#1b3444);stroke-width:1;vector-effect:non-scaling-stroke}
.ts-curve{fill:none;stroke:var(--p-green,#4aeb9f);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.is-active .ts-curve{animation:ts-draw 2.6s ease .5s forwards}
.ts-plotline{position:relative}
.ts-end{position:absolute;width:1.8cqw;height:1.8cqw;min-width:7px;min-height:7px;border-radius:50%;background:var(--p-green,#4aeb9f);box-shadow:0 0 0 .6cqw #33ed9833;transform:translate(-50%,-50%);opacity:0}
.is-active .ts-end{animation:ts-show .3s ease 3.1s forwards}
.ts-chart-end{display:flex;align-items:baseline;gap:1cqw;opacity:0}
.ts-chart-end strong{font-size:max(13px,3.8cqw);color:var(--p-strong,#eef5f2)}
.ts-chart-end span{font-size:max(8px,1.6cqw);color:var(--p-text-2,#9aaeb8)}
.is-active .ts-chart-end{animation:ts-rise .4s ease 3.1s forwards}
.ts-badge-soft{background:var(--p-surface-3,#0f212c);color:var(--p-text-2,#9aaeb8);border:1px dashed var(--p-border-2,#24475a)}
.is-active .ts-badge-soft{animation-delay:.6s}
.ts-sim{position:relative}
.ts-plot{position:relative;height:25cqw;border-radius:1.4cqw;background:var(--p-surface-3,#0f212c);overflow:hidden}
:root:not([data-theme="dark"]) .ts-plot{background:#eef6fa}
.ts-level{position:absolute;left:0;right:0;bottom:var(--y);border-top:1.5px dashed}
.ts-level em{position:absolute;right:1cqw;bottom:.3cqw;font-style:normal;font-size:max(7px,1.4cqw);font-weight:700}
.ts-level.is-tp{border-color:var(--p-green,#4aeb9f)}
.ts-level.is-tp em{color:var(--p-green,#4aeb9f)}
.ts-level.is-entry{border-top-style:solid;border-color:var(--p-strong,#eef5f2)}
.ts-level.is-entry em{color:var(--p-strong,#eef5f2)}
.ts-level.is-sl{border-color:var(--p-red,#eb8d92)}
.ts-level.is-sl em{color:var(--p-red,#eb8d92)}
.is-active .ts-level.is-tp{animation:ts-glow-tp .5s ease 3.3s 2 alternate}
.ts-candle{position:absolute;top:0;bottom:0;width:3.8cqw;opacity:0;transform:translateY(1cqw)}
.ts-candle i{position:absolute;left:calc(50% - 1px);width:2px}
.ts-candle b{position:absolute;left:0;right:0;border-radius:.4cqw}
.ts-candle.is-up i,.ts-candle.is-up b{background:var(--p-green,#4aeb9f)}
.ts-candle.is-down i,.ts-candle.is-down b{background:var(--p-red,#eb8d92)}
.is-active .ts-candle{animation:ts-rise .3s ease forwards;animation-delay:calc(.5s + var(--i) * .22s)}
@keyframes ts-draw{to{stroke-dashoffset:0}}
@keyframes ts-show{to{opacity:1}}
@keyframes ts-glow-tp{to{border-top-width:3px;box-shadow:0 0 12px var(--p-green,#4aeb9f)}}

@keyframes ts-rise{to{opacity:1;transform:none}}
@keyframes ts-pop{to{opacity:1;transform:none}}
@keyframes ts-fill{to{width:100%}}
@keyframes ts-tick{to{background:var(--p-green,#4aeb9f);border-color:var(--p-green,#4aeb9f);color:#032737}}
@keyframes ts-pick{to{border-color:var(--p-green,#4aeb9f);background:var(--p-green-bg,#0b3a30);box-shadow:0 0 0 .6cqw #33ed981f}}
@keyframes ts-cert{to{opacity:1;transform:none}}
@keyframes ts-shine{to{transform:translateX(120%)}}
@keyframes ts-beckon{50%{transform:scale(1.04)}}

/* Less motion: each scene appears in its finished state; the words and the voice still play. */
@media (prefers-reduced-motion:reduce){
  .walkthrough *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
}