/* "Watch animation" button and the full-screen stage it opens. */
.walkthrough{margin-top:18px}
.walkthrough-open{position:relative;width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:0;border-radius:14px;padding:14px 18px;color:#fffefb;background:#141c17;background-image:radial-gradient(260px circle at 100% 0%,#ed572a66,transparent 70%);box-shadow:0 18px 30px -20px #141c17;transition:transform .18s,box-shadow .18s}
.walkthrough-open:hover{transform:translateY(-2px);box-shadow:0 24px 34px -20px #141c17}
.walkthrough-open:active{transform:translateY(1px)}
.walkthrough-open>span:last-child{display:none}
.walkthrough-open strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em}
.walkthrough-open small{display:block;font-size:13px;color:#cfd5c7;margin-top:2px;line-height:1.4}
.walkthrough-play-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;background:var(--orange);color:var(--ink);border-radius:50%;font-size:17px;padding-left:3px;animation:walkthrough-ring 1.8s ease-out infinite}
@keyframes walkthrough-ring{0%{box-shadow:0 0 0 0 #ed572a99}70%,100%{box-shadow:0 0 0 12px #ed572a00}}

html.walkthrough-locked{overflow:hidden}
.walkthrough-panel{position:fixed;inset:0;z-index:100;overflow-y:auto;overscroll-behavior:contain;display:flex;justify-content:center;background:#141c17;background-image:radial-gradient(520px circle at 95% 0%,#ed572a4d,transparent 62%),radial-gradient(520px circle at 0% 100%,#275d4099,transparent 65%),linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:auto,auto,34px 34px,34px 34px;color:#f4f1e9;border-left:5px solid var(--orange)}
.walkthrough-panel[hidden]{display:none}
.walkthrough-stage{width:min(100%,470px);min-height:100%;display:flex;flex-direction:column;padding:14px 18px calc(16px + env(safe-area-inset-bottom));animation:walkthrough-in .35s cubic-bezier(.22,.8,.3,1) both}
@keyframes walkthrough-in{from{transform:translateY(18px) scale(.98)}to{transform:none}}
.walkthrough-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#aab3a2}
.walkthrough-close{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff14;color:#fffefb;font-size:16px;line-height:1}
.walkthrough-close:hover{background:#ffffff29}
.walkthrough-step{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.walkthrough-chip{background:var(--orange);color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.05em;padding:5px 13px;border-radius:20px}
.walkthrough-dots{display:flex;gap:7px;align-items:center}
.walkthrough-dots i{display:block;width:8px;height:8px;border-radius:5px;background:#3d4a40;transition:width .3s,background .3s}
.walkthrough-dots i.is-done{background:#9fd3a4}
.walkthrough-dots i.is-current{width:28px;background:var(--orange)}
.walkthrough-scene{flex:1;display:flex;flex-direction:column;margin-top:10px;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.walkthrough-step-heading h4{font-size:clamp(23px,6.6vw,30px);font-weight:700;text-transform:uppercase;line-height:1.1;letter-spacing:-.02em;color:#f4f1e9;margin:0 0 14px}
.walkthrough-card{position:relative;flex:1 1 auto;min-height:230px;display:flex;flex-direction:column;justify-content:center;background:#f4f1e9;color:var(--ink);border-radius:22px;padding:20px 16px;box-shadow:0 34px 60px -34px #000}
.walkthrough-diagram{min-width:0}
.walkthrough-equation{display:grid;justify-content:center;margin-top:18px;padding-top:18px;border-top:2px solid #dcd9cc;font-size:clamp(24px,7.4vw,34px);line-height:1.25;font-weight:700;text-align:center;max-width:100%;overflow-x:auto;overflow-y:hidden}
.walkthrough-equation .katex{font-size:1em}
.walkthrough-equation .wv-equation-expression{justify-content:center}
.wv-underline{display:block;height:5px;margin-top:6px;border-radius:4px;background:var(--orange);transform-origin:left center}
.walkthrough-note{font-size:15px;line-height:1.5;margin-top:12px;color:#aab3a2}
.walkthrough-caption{display:grid;place-items:center;min-height:62px;margin-top:14px;padding:10px 14px;border-radius:14px;background:#0d1310d9}
.walkthrough-caption p{font-size:clamp(18px,5.2vw,22px);line-height:1.4;font-weight:700;text-align:center;color:#fffefb}
.walkthrough-caption span.is-spoken{background:var(--orange);color:var(--ink);border-radius:7px;padding:1px 6px;margin:0 -3px}
.walkthrough-track{height:4px;background:#3d4a40;border-radius:6px;overflow:hidden;margin-top:12px}
.walkthrough-track>span{display:block;height:100%;width:0;background:var(--orange)}
.walkthrough-message{font-size:13px;line-height:1.5;margin-top:10px;color:#ffc9a8}.walkthrough-message:empty{display:none}
.walkthrough-controls{display:flex;gap:10px;margin-top:14px}
.walkthrough-controls button{min-height:54px;border-radius:12px;font-size:16px;font-weight:700;padding:10px 16px}
.walkthrough-primary{flex:1;border:1px solid #ffffff40;background:#ffffff1a;color:#fffefb}
.walkthrough-primary:hover{background:#ffffff2e}
.walkthrough-done{flex:1.5;border:0;background:var(--orange);color:var(--ink);box-shadow:0 12px 24px -12px #ed572a}
.walkthrough-loading{margin:auto 0;font-size:16px;line-height:1.6;color:#f4f1e9;text-align:center;padding:40px 10px}
.wv-spark{position:absolute;left:50%;top:46%;width:9px;height:9px;margin:-4px;border-radius:50%;background:var(--orange);pointer-events:none}
.wv-spark-green{background:#5fae6c}
@media(min-height:900px){.walkthrough-stage{justify-content:center}.walkthrough-scene{flex:0 1 auto}}
@media(prefers-reduced-motion:reduce){.walkthrough *,.walkthrough-play-icon{animation:none!important;transition:none!important}}
/* Film mode: the canvas draws the step header, picture, caption and progress itself. */
.walkthrough-canvas{display:block;flex:none;margin:auto;width:min(100%,calc((100dvh - 150px) * 854 / 1190));aspect-ratio:854/1190;cursor:pointer;-webkit-tap-highlight-color:transparent}
.walkthrough-film .walkthrough-step,.walkthrough-film .walkthrough-scene,.walkthrough-film .walkthrough-caption,.walkthrough-film .walkthrough-track{display:none}
.walkthrough-film .walkthrough-stage{justify-content:flex-start;padding-inline:10px}
.walkthrough-film .walkthrough-controls{margin-top:0;padding-top:10px}
/* The background light never stands still. */
.walkthrough-panel{animation:walkthrough-drift 40s linear infinite}
@keyframes walkthrough-drift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,0 340px,0 0}}