/* Landing page (index.html). Same look as the app: black header, white panel with a rounded top.
   The pictures are a few flat shapes; the work is in the motion (springs, a small move back before a
   big move, squash on landing, arcs). Each picture waits on its first frame until it is on screen. */
:root{--ink:#1d1d1f;--muted:#6e6e73;--bg:#fff;--soft:#f5f5f7;--hair:#e8e8ee;--purple:#7532d6;--lav:#efe8fc;--green:#2fbf71;--green-d:#1f9a58;
 --spring:linear(0,.093,.307,.561,.795,.977,1.095,1.152,1.162,1.14,1.102,1.061,1.025,.998,.981,.974,.974,.979,.985,.992,.997,1.001,1.003,1.004,1.004,1.003,1.002,1.001,1,1,.999,.999,1);
 --spring-soft:linear(0,.068,.224,.411,.592,.747,.868,.954,1.01,1.04,1.053,1.053,1.047,1.038,1.027,1.018,1.011,1.005,1.001,.999,.997,.997,.997,.998,.998,.999,.999,1,1,1,1,1,1);
 --out:cubic-bezier(.22,1,.36,1);--in-out:cubic-bezier(.65,0,.35,1);--rise:cubic-bezier(.2,.75,.45,1);--fall:cubic-bezier(.55,0,1,.45);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body.lv{margin:0;background:#000;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
.lv :where(h1,h2,h3,p,ul,ol,figure){margin:0}
.lv-skip{position:absolute;left:-999px;top:8px;z-index:10;padding:8px 14px;border-radius:10px;background:#fff;color:#000}
.lv-skip:focus{left:8px}

/* Buttons */
.lv-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;background:#000;color:#fff;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:opacity .15s ease,transform .3s var(--spring-soft)}
.lv-btn:hover{opacity:.86}
.lv-btn:active{transform:scale(.97);transition-duration:.1s}
.lv-btn.is-light{background:#fff;color:#000}
.lv-btn.is-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)}
.lv-btn:focus-visible,.lv-tabs button:focus-visible,.lv-qs summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* Header */
.lv-top{position:sticky;top:0;z-index:5;background:#000;color:#fff}
.lv-top-in{display:flex;align-items:center;gap:24px;max-width:1200px;height:72px;margin:0 auto;padding:0 24px}
.lv-logo{display:inline-flex;font-size:22px;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:#fff}
.lv-nav{display:flex;gap:4px;margin-left:auto}
.lv-nav a{padding:8px 12px;border-radius:999px;font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s ease,background-color .15s ease}
.lv-nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.lv-top-act{display:flex;align-items:center;gap:8px}
.lv-top .lv-btn{height:40px;padding:0 18px;font-size:14px}
/* 登录 is a quiet word, 注册 a hairline pill; 免费开始 stays the one solid button. */
.lv-login,.lv-reg{display:inline-flex;align-items:center;height:40px;border-radius:999px;font-size:14px;font-weight:500;color:rgba(255,255,255,.85);text-decoration:none;white-space:nowrap;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}
.lv-login{padding:0 12px}
.lv-reg{padding:0 16px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.lv-login:hover{color:#fff;background:rgba(255,255,255,.1)}
.lv-reg:hover{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.lv-login:focus-visible,.lv-reg:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* The white panel */
.lv-page{display:block;outline:0}
.lv-sec{max-width:1200px;margin:0 auto;padding:110px 24px 0}
.lv-head{max-width:720px;margin:0 auto 48px;text-align:center}
.lv-head h2{font-size:clamp(30px,4.4vw,46px);font-weight:700;line-height:1.15;letter-spacing:-.03em}
.lv-head p{margin-top:14px;font-size:clamp(16px,1.6vw,19px);color:var(--muted)}
.lv-head b{color:var(--ink)}

/* 1. The film (landing-film.js): a full-bleed stage pinned under the header. The words and the button sit
   on the page itself, over the bottom of the film, and leave with the white sheet: two layers, not three. */
.lv-film{display:contents;--film-h:clamp(560px,calc(100svh - 72px),980px);color:#fff}
.lv-film-pin{position:sticky;top:72px;z-index:0;height:var(--film-h);overflow:hidden;background:#0b1124}
.lv-film-stage{position:absolute;inset:0}
.lv-film-stage .film{display:block;width:100%;height:100%}
.lv-film-stage .f-tw{animation:f-twinkle 2.8s ease-in-out infinite alternate}
.lv-film-stage .f-tw:nth-child(3n){animation-duration:3.7s;animation-delay:-1.2s}
@keyframes f-twinkle{to{opacity:.12}}
.lv-film-copy{position:relative;z-index:1;height:var(--film-h);margin-top:calc(-1 * var(--film-h));display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:120px 24px 60px;text-align:center;pointer-events:none}
.lv-film-copy h1{font-size:clamp(34px,4.6vw,64px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.lv-film-copy p{margin-top:12px;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.88)}
.lv-film-copy .lv-btn{margin-top:28px;pointer-events:auto}
.lv-film-copy>*{animation:film-copy 1s var(--out) both}
.lv-film-copy>p{animation-delay:.12s}
.lv-film-copy>.lv-btn{animation-delay:.24s}
@keyframes film-copy{from{opacity:0;transform:translateY(18px)}}
.lv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lv-sheet{position:relative;z-index:1;margin-top:-28px;background:var(--bg);border-radius:28px 28px 0 0;overflow:hidden}
/* Scrolling: the film stays pinned while the page (words, button, white sheet) scrolls over it at the
   finger's speed. The film drifts up slowly; that drift is drawn inside the film (landing-film.js), because
   moving its layer would make the browser show blurry low-resolution tiles while the picture changes every
   frame. The film also frosts over gradually (blur plus a faint milky layer): tied to scrolling in CSS where
   the browser can, elsewhere set by landing-v2.js. */
.lv-film-frost{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:rgba(214,222,255,.1)}
@supports (animation-timeline:scroll()){
 .lv-film-frost{animation:lv-frost linear both;animation-timeline:scroll(root);animation-range:0 70vh}
 .lv-film-stage{animation:lv-blur linear both;animation-timeline:scroll(root);animation-range:0 70vh}
}
@keyframes lv-frost{from{opacity:0}to{opacity:1}}
@keyframes lv-blur{from{filter:blur(0)}to{filter:blur(14px)}}

/* ---- Shared picture parts ---- */
.ls{display:block;width:100%;height:auto;overflow:visible;stroke:none}
.ls g,.ls .l-prog{transform-box:fill-box;transform-origin:center}
.c-paper{fill:#fff}.c-edge{stroke:var(--hair);stroke-width:2}.c-ink{fill:var(--ink)}.c-line{fill:#e3e3ea}.c-soft{fill:var(--soft)}
.c-lav{fill:var(--lav)}.c-purple{fill:var(--purple)}.c-purple-d{fill:#5b22b3}.c-purple-l{fill:#a688ee}
.c-yellow{fill:#ffc93c}.c-yellow-d{fill:#f0a500}.c-green{fill:var(--green)}.c-green-d{fill:var(--green-d)}.c-green-l{fill:#dcf5e7}
.c-coral{fill:#ff7a59}.c-coral-l{fill:#ffe3d9}.c-blue{fill:#3d7bfd}.c-blue-d{fill:#2a5fd6}.c-blue-l{fill:#e2ecff}
.c-brown{fill:#e3a868}.c-brown-d{fill:#c9894a}.c-brown-l{fill:#f6dcb6}.c-glass{fill:rgba(255,255,255,.55)}
.ls :is(.s-white,.s-coral,.s-yellow,.s-yellow-d,.s-ink,.s-ring){fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-white{stroke:#fff;stroke-width:3}.s-coral{stroke:#ff7a59;stroke-width:6}.s-yellow{stroke:#c98600;stroke-width:2.4}.s-yellow-d{stroke:#f0a500;stroke-width:4}
.s-ink{stroke:var(--ink);stroke-width:4}.s-thick{stroke-width:5}.s-ring{stroke:#a688ee;stroke-width:4}
.s-cursor{stroke:#fff;stroke-width:2.5;stroke-linejoin:round}
.t-tag{fill:#fff;font-size:14px;font-weight:700;text-anchor:middle}
.t-left{fill:var(--green-d);font-size:12px;font-weight:700;text-anchor:middle}
.t-row{fill:var(--ink);font-size:14px;font-weight:600}
.t-small{fill:var(--muted);font-size:11px;font-weight:500}
.t-say{fill:var(--ink);font-size:15px;font-weight:700}
.t-ok{fill:var(--green-d);font-size:13px;font-weight:700;text-anchor:middle}
.t-big{fill:var(--green-d);font-size:30px;font-weight:750;letter-spacing:-.5px}
.h-ground{fill:#f0f0f4}
/* Waiting on the first frame until on screen. */
[data-play]:not(.is-play) .ls *{animation-play-state:paused!important}

/* ---- 2. Three walls ---- */
.lv-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lv-pain{padding:28px 28px 32px;border-radius:28px;background:var(--soft)}
.lv-pain .ls{margin:0 auto 18px;max-width:300px}
.lv-pain h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
.lv-pain p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--muted)}
.ls-pick *,.ls-bite *,.ls-build *{animation-duration:5s;animation-iteration-count:infinite;animation-fill-mode:both}
/* 不知道卖什么: the magnifier looks around on arcs, settles on one; it rises and gets a tick. */
.ls-pick .p-glass-x{animation-name:p-gx}
@keyframes p-gx{0%,8%{transform:none;animation-timing-function:var(--in-out)}22%,30%{transform:translateX(138px);animation-timing-function:var(--in-out)}44%,100%{transform:translateX(69px)}}
.ls-pick .p-glass-y{animation-name:p-gy}
@keyframes p-gy{0%,8%{transform:none;animation-timing-function:var(--rise)}15%{transform:translateY(-24px);animation-timing-function:var(--fall)}22%,30%{transform:none;animation-timing-function:var(--rise)}37%{transform:translateY(-18px);animation-timing-function:var(--fall)}44%,100%{transform:none}}
.ls-pick .p-glass{animation-name:p-glass}
@keyframes p-glass{0%{opacity:0;transform:scale(.6)}6%{opacity:1;transform:none}44%{transform:none}46%{transform:scale(1.1)}49%{transform:none}88%{opacity:1}94%,100%{opacity:0}}
.ls-pick .p-t2{transform-origin:50% 100%;animation-name:p-up}
@keyframes p-up{0%,48%{transform:none;animation-timing-function:var(--spring)}57%,88%{transform:translateY(-12px)}95%,100%{transform:none}}
.ls-pick .p-check{animation-name:p-check}
@keyframes p-check{0%,55%{transform:scale(0)}55.5%{transform:scale(0);animation-timing-function:var(--spring)}63%,88%{transform:none;opacity:1}93%,100%{transform:scale(0);opacity:0}}
.ls-pick .p-t1,.ls-pick .p-t3{animation-name:p-dim}
@keyframes p-dim{0%,50%{opacity:1}57%,88%{opacity:.4}95%,100%{opacity:1}}
/* 算不清能不能赚: costs bite off the price one by one; what is left gives a little bounce. */
.ls-bite :is(.b-c1,.b-c2,.b-c3){transform-origin:0 100%;animation-name:b-bite1}
.ls-bite .b-c2{animation-name:b-bite2}
.ls-bite .b-c3{animation-name:b-bite3}
@keyframes b-bite1{0%,10%{transform:none;opacity:1}12%{transform:translate(5px,-9px) rotate(10deg);animation-timing-function:var(--fall)}22%,93%{transform:translate(20px,46px) rotate(40deg);opacity:0}94%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@keyframes b-bite2{0%,26%{transform:none;opacity:1}28%{transform:translate(5px,-9px) rotate(10deg);animation-timing-function:var(--fall)}38%,93%{transform:translate(20px,46px) rotate(40deg);opacity:0}94%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@keyframes b-bite3{0%,42%{transform:none;opacity:1}44%{transform:translate(5px,-9px) rotate(10deg);animation-timing-function:var(--fall)}54%,93%{transform:translate(20px,46px) rotate(40deg);opacity:0}94%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.ls-bite .b-bar{transform-origin:0 50%;animation-name:b-bar}
@keyframes b-bar{0%,56%{transform:none}58%{transform:scale(1.08,1.16);animation-timing-function:var(--spring)}68%,100%{transform:none}}
.ls-bite .b-left{transform-origin:0 50%;animation-name:b-left}
@keyframes b-left{0%,58%{transform:scale(0);opacity:0}59%{transform:scale(0);opacity:1;animation-timing-function:var(--spring)}68%,88%{transform:none;opacity:1}93%,100%{transform:scale(.8);opacity:0}}
.ls-bite .b-tag{transform-origin:0 100%;animation-name:b-tag}
@keyframes b-tag{0%,9%,25%,41%,100%{transform:none}11%,27%,43%{transform:rotate(-6deg)}14%,30%,46%{transform:none}}
/* 不会开店: the page drops together piece by piece, then the buy button gets a tap. */
.ls-build :is(.k-1,.k-2,.k-3,.k-4){transform-origin:50% 100%;animation-name:k-1}
.ls-build .k-2{animation-name:k-2}
.ls-build .k-3{animation-name:k-3}
.ls-build .k-4{animation-name:k-4}
@keyframes k-1{0%,4%{transform:translateY(-46px);opacity:0;animation-timing-function:var(--fall)}5%{opacity:1}12%{transform:scale(1.05,.8);opacity:1;animation-timing-function:var(--spring)}21%,82%{transform:none;opacity:1}90%,100%{transform:translateY(-6px);opacity:0}}
@keyframes k-2{0%,13%{transform:translateY(-46px);opacity:0;animation-timing-function:var(--fall)}14%{opacity:1}21%{transform:scale(1.05,.8);opacity:1;animation-timing-function:var(--spring)}30%,82%{transform:none;opacity:1}90%,100%{transform:translateY(-6px);opacity:0}}
@keyframes k-3{0%,22%{transform:translateY(-46px);opacity:0;animation-timing-function:var(--fall)}23%{opacity:1}30%{transform:scale(1.05,.8);opacity:1;animation-timing-function:var(--spring)}39%,82%{transform:none;opacity:1}90%,100%{transform:translateY(-6px);opacity:0}}
@keyframes k-4{0%,31%{transform:translateY(-46px);opacity:0;animation-timing-function:var(--fall)}32%{opacity:1}39%{transform:scale(1.05,.8);opacity:1;animation-timing-function:var(--spring)}48%,60%{transform:none}62%{transform:scale(.9);animation-timing-function:var(--spring)}71%,82%{transform:none;opacity:1}90%,100%{transform:translateY(-6px);opacity:0}}

/* ---- 3. How a lesson works (7s) ---- */
.lv-how-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:48px}
.lv-demo{border-radius:30px}
.lv-points{display:flex;flex-direction:column;gap:28px;padding:0;list-style:none}
.lv-points li{display:flex;gap:16px}
.lv-dot{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--lav);color:var(--purple);font-size:15px;font-weight:700}
.lv-points h3{font-size:19px;font-weight:700}
.lv-points p{margin-top:4px;font-size:15px;line-height:1.65;color:var(--muted)}
.ls-learn *{animation-duration:7s;animation-iteration-count:infinite;animation-fill-mode:both}
.ls-learn .l-say{animation-name:l-say}
@keyframes l-say{0%,2%{transform:translateY(5px);opacity:0;animation-timing-function:var(--out)}8%,90%{transform:none;opacity:1}95%,100%{opacity:0}}
.ls-learn .l-ring{animation-name:l-ring}
@keyframes l-ring{0%,10%{transform:scale(1.3);opacity:0;animation-timing-function:var(--spring)}17%{transform:none;opacity:1}23%{transform:scale(1.05)}28%{transform:none;opacity:1}38%{opacity:1}43%,100%{transform:none;opacity:0}}
.ls-learn .l-cur-x{animation-name:l-cx}
@keyframes l-cx{0%,16%{transform:none;animation-timing-function:var(--in-out)}30%,57%{transform:translateX(-466px)}58%,100%{transform:none}}
.ls-learn .l-cur-y{animation-name:l-cy}
@keyframes l-cy{0%,16%{transform:none;animation-timing-function:var(--rise)}23%{transform:translateY(-92px);animation-timing-function:var(--fall)}30%,57%{transform:translateY(-36px)}58%,100%{transform:none}}
.ls-learn .l-cur{transform-origin:0 0;animation-name:l-cur}
@keyframes l-cur{0%,12%{opacity:0;transform:none}16%{opacity:1}31%{transform:none}32.5%{transform:scale(.8)}35%{transform:none}50%{opacity:1}55%,100%{opacity:0}}
.ls-learn .l-target{animation-name:l-press}
@keyframes l-press{0%,32%{transform:none}33.5%{transform:scale(.94);animation-timing-function:var(--spring)}40%,100%{transform:none}}
.ls-learn .l-target-bg{animation-name:l-fill}
@keyframes l-fill{0%,33%{fill:#fff}34%,90%{fill:#1d1d1f}95%,100%{fill:#fff}}
.ls-learn .l-target-t{animation-name:l-fill-t}
@keyframes l-fill-t{0%,33%{fill:#1d1d1f}34%,90%{fill:#fff}95%,100%{fill:#1d1d1f}}
.ls-learn .l-old{animation-name:l-old}
@keyframes l-old{0%,35%{transform:none;opacity:1;animation-timing-function:var(--out)}39%,92%{transform:translateY(8px);opacity:0}98%,100%{transform:none;opacity:1}}
.ls-learn :is(.l-n1,.l-n2,.l-n3){animation-name:l-in}
.ls-learn .l-n2{animation-delay:.2s}
.ls-learn .l-n3{animation-delay:.4s}
@keyframes l-in{0%,37%{transform:translateY(16px);opacity:0;animation-timing-function:var(--spring)}46%,88%{transform:none;opacity:1}93%,100%{transform:none;opacity:0}}
.ls-learn .l-ok{animation-name:l-ok}
@keyframes l-ok{0%,52%{transform:scale(0)}52.5%{transform:scale(0);animation-timing-function:var(--spring)}61%,89%{transform:none;opacity:1}94%,100%{transform:scale(.6);opacity:0}}
.ls-learn .l-ok-t{animation-name:l-ok-t}
@keyframes l-ok-t{0%,55%{opacity:0}60%,89%{opacity:1}94%,100%{opacity:0}}
.ls-learn .l-prog{fill:var(--purple);transform-origin:0 50%;animation-name:l-prog}
@keyframes l-prog{0%,54%{transform:scaleX(0);animation-timing-function:var(--out)}62%,89%{transform:none;opacity:1}94%,100%{transform:none;opacity:0}}

/* ---- 4. Tour over real screenshots ---- */
.lv-tour-grid{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;gap:36px}
.lv-tabs{display:flex;flex-direction:column;gap:6px}
.lv-tabs button{position:relative;display:flex;flex-direction:column;gap:3px;margin:0;padding:16px 18px 18px;overflow:hidden;border:0;border-radius:18px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .25s ease}
.lv-tabs button:hover{background:var(--soft)}
.lv-tabs button strong{font-size:17px;font-weight:700}
.lv-tabs button span{font-size:14px;line-height:1.55;color:var(--muted)}
.lv-tabs button[aria-selected=true]{background:var(--soft)}
.lv-tabs button[aria-selected=true] strong{color:var(--purple)}
.lv-tabs button i{position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:2px;background:transparent;overflow:hidden}
.lv-tabs button.is-run i{background:#e4e4ea}
.lv-tabs button.is-run i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--purple);transform-origin:0 50%;animation:tour-run 6.5s linear both}
@keyframes tour-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lv-stage{min-width:0}
.lv-frame{position:relative;aspect-ratio:1280/800;overflow:hidden;border-radius:22px;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 80px -40px rgba(20,10,40,.35)}
.lv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .9s var(--out)}
.lv-frame img.is-on{opacity:1;transform:none}
.lv-spot{position:absolute;border-radius:16px;box-shadow:0 0 0 3px var(--purple),0 0 0 9999px rgba(12,6,24,.38);opacity:0;pointer-events:none;transition:opacity .35s ease,left .8s var(--spring-soft),top .8s var(--spring-soft),width .8s var(--spring-soft),height .8s var(--spring-soft)}
.lv-spot.is-on{opacity:1}
.lv-cap{display:flex;align-items:center;gap:10px;min-height:28px;margin-top:16px;font-size:15px;font-weight:500}
.lv-cap::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--purple)}
.lv-cap span{transition:opacity .25s ease}
.lv-cap.is-swap span{opacity:0}

/* ---- 5. Course ---- */
.lv-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0;list-style:none}
.lv-levels li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border-radius:22px;background:var(--soft)}
.lv-lv-art{display:block;width:56px;height:56px}
.lv-lv-art svg{width:56px;height:56px}
.lv-levels li div{display:flex;flex-direction:column;gap:2px}
.lv-levels li div>b{font-size:16px;font-weight:700}
.lv-levels li div>span{font-size:13px;color:var(--muted)}
.lv-levels li div>span b{font-weight:600;color:var(--ink)}
.lv-levels em{margin-top:auto;padding:3px 10px;border-radius:999px;background:var(--lav);font-size:12px;font-style:normal;font-weight:700;color:var(--purple)}
.lv-levels em.is-open{background:#dcf5e7;color:var(--green-d)}
.lv-levels em.is-soon{background:#ececf1;color:var(--muted)}
.lv-fine{margin:20px auto 0;max-width:880px;font-size:13px;color:var(--muted);text-align:center}

/* ---- 7. Questions ---- */
.lv-qs{max-width:760px;margin:0 auto}
.lv-qs details{border-bottom:1px solid var(--hair)}
.lv-qs summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;font-size:17px;font-weight:600;list-style:none;cursor:pointer}
.lv-qs summary::-webkit-details-marker{display:none}
.lv-qs summary::after{content:"";flex:none;width:22px;height:22px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .45s var(--spring)}
.lv-qs details[open] summary::after{transform:rotate(45deg)}
.lv-qs details p{padding:0 4px 22px;font-size:16px;line-height:1.7;color:var(--muted)}
.lv-qs details[open] p{animation:q-in .4s var(--out) both}
@keyframes q-in{from{opacity:0;transform:translateY(-6px)}}

/* ---- 8. End + footer ---- */
.lv-end{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:1152px;margin:110px auto 24px;padding:72px 24px;border-radius:32px;background:#000;color:#fff;text-align:center}
.lv-end h2{font-size:clamp(28px,4vw,44px);font-weight:750;letter-spacing:-.03em}
.lv-end p{font-size:17px;color:rgba(255,255,255,.7)}
.lv-end .lv-btn{margin-top:10px}
.lv-sheet>.lv-end{margin-left:24px;margin-right:24px}
@media(min-width:1200px){.lv-sheet>.lv-end{margin-left:auto;margin-right:auto}}
.lv-foot{max-width:1200px;margin:0 auto;padding:36px 24px 48px;color:rgba(255,255,255,.6);font-size:13px}
.lv-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.lv-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.lv-foot nav a{color:rgba(255,255,255,.75);text-decoration:none;font-size:14px}
.lv-foot nav a:hover{color:#fff}

/* ---- Phones and tablets ---- */
@media(max-width:960px){
 .lv-nav{display:none}
 .lv-top-act{margin-left:auto}
 .lv-pains{grid-template-columns:1fr;max-width:520px;margin:0 auto}
 .lv-how-grid{grid-template-columns:1fr;gap:32px}
 .lv-tour-grid{grid-template-columns:1fr;gap:16px}
 .lv-tabs{flex-direction:row;gap:6px;margin:0 -24px;padding:0 24px 4px;overflow-x:auto;scrollbar-width:none}
 .lv-tabs::-webkit-scrollbar{display:none}
 .lv-tabs button{flex:none;padding:10px 16px 14px;border-radius:999px}
 .lv-tabs button span{display:none}
 .lv-tabs button strong{font-size:15px}
 .lv-tabs button i{left:16px;right:16px;bottom:6px}
 .lv-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
 .lv-top-in{gap:12px;height:64px;padding:0 16px}
 .lv-top-act{gap:6px}
 .lv-login{padding:0 8px}
 .lv-reg{padding:0 12px}
 .lv-top .lv-btn{padding:0 14px}
 .lv-logo{font-size:19px}
 .lv-sec{padding:84px 16px 0}
 .lv-head{margin-bottom:32px}
 .lv-pain{padding:22px 20px 26px;border-radius:24px}
 .lv-tabs{margin:0 -16px;padding:0 16px 4px}
 .lv-frame{border-radius:14px}
 .lv-levels{gap:10px}
 .lv-levels li{padding:16px;border-radius:20px}
 .lv-sheet>.lv-end{margin:84px 16px 16px;padding:56px 20px;border-radius:26px}
 .lv-foot{padding:28px 16px 40px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .lv *,.lv .ls *{animation:none!important;transition:none!important}
 .ls-learn .l-cur,.ls-pick .p-glass{display:none}
 .ls-learn .l-new{display:none}
}
@media(max-width:640px){.lv-film{--film-h:clamp(520px,calc(100svh - 64px),900px)}.lv-film-pin{top:64px}.lv-film-copy{padding:110px 20px 52px}.lv-film-copy p{margin-top:10px}.lv-film-copy .lv-btn{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.lv-film-copy>*{animation:none}}
.lv-film-copy h1 span{display:inline-block;white-space:nowrap}
@media(min-width:901px){.lv-film-copy{padding-bottom:56px}.lv-film-copy h1 span{display:block}.lv-film-copy .lv-btn{margin-top:24px}}
/* Narrow phones: the logo, 登录 and 注册 fill the bar; 免费开始 is the big button on the first screen. */
@media(max-width:480px){.lv-top .lv-btn{display:none}}

/* 7. Membership: the free plan beside the member plan. Lines are plain, no ticks. */
.lv-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:880px;margin:0 auto}
.lv-plan{display:flex;flex-direction:column;align-items:flex-start;padding:32px;border-radius:28px;background:var(--soft)}
.lv-plan h3{font-size:18px;font-weight:700;color:var(--muted)}
.lv-plan-price{margin:6px 0 20px;font-size:40px;font-weight:750;letter-spacing:-.03em}
.lv-plan.is-member .lv-plan-price{font-size:30px;line-height:1.35}
.lv-plan-price small{margin-left:6px;font-size:16px;font-weight:500;color:var(--muted);letter-spacing:0}
.lv-plan-lines{display:flex;flex-direction:column;gap:10px;margin:0 0 28px;font-size:15px;line-height:1.5}
.lv-plan-tbd{color:var(--muted)}
.lv-plan .lv-btn{margin-top:auto}
.lv-plan-note{margin-top:12px;font-size:13px;color:var(--muted)}
.lv-fine{margin:20px auto 0;max-width:880px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:640px){.lv-plans{grid-template-columns:1fr}.lv-plan{padding:26px 22px}}

/* Saved dark theme. The film remains on its own palette. */
:root[data-theme=dark]{--bg:#000;--ink:#fff;--muted:#a3a3a3;--line:#292929;--hair:var(--line);--soft:color-mix(in srgb,var(--ink) 8%,var(--bg));--purple:color-mix(in srgb,#7532d6 50%,var(--ink));--lav:color-mix(in srgb,var(--purple) 16%,var(--bg));--green:var(--accent);--accent:#6bd957;--green-d:var(--accent);color-scheme:dark}
:root[data-theme=dark] .lv-sheet{background:var(--bg)}
:root[data-theme=dark] .lv-sheet .lv-btn:not(.is-ghost){background:var(--ink);color:var(--bg)}
:root[data-theme=dark] .lv-btn.is-ghost{box-shadow:none;border:1px solid var(--muted)}
:root[data-theme=dark] .lv-frame{box-shadow:none;border:1px solid var(--line)}
:root[data-theme=dark] .lv-levels em.is-open{background:color-mix(in srgb,var(--accent) 14%,var(--bg));color:var(--accent)}
:root[data-theme=dark] .lv-levels em.is-soon{background:var(--soft);color:var(--muted)}
:root[data-theme=dark] .lv-sheet .c-paper{fill:var(--bg)}
:root[data-theme=dark] .lv-sheet .c-line{fill:var(--line)}
:root[data-theme=dark] .lv-sheet .t-tag{fill:var(--bg)}
:root[data-theme=dark] .lv-sheet .c-green-l{fill:color-mix(in srgb,var(--accent) 14%,var(--bg))}
:root[data-theme=dark] .lv-sheet .h-ground{fill:var(--soft)}
:root[data-theme=dark] .lv-tabs button.is-run i{background:var(--line)}
:root[data-theme=dark] .lv :focus-visible{outline:2px solid var(--ink);outline-offset:4px}


:root[data-theme=dark] .lv-sheet .ls-learn .l-target-bg{fill:var(--soft)}
:root[data-theme=dark] .lv-sheet .ls-learn .l-target-t{fill:var(--ink)}

/* A quiet plate keeps small film captions readable over every scene color. */
:root[data-theme=dark] .lv-film-copy p{display:table;max-width:680px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--ink)}
@media(max-width:640px){:root[data-theme=dark] .lv-film-copy p{margin-inline:auto}}

:root[data-theme=dark] .lv-sheet .ls-learn>rect:first-of-type{fill:var(--line)}
:root[data-theme=dark] .lv-sheet .ls-learn>:is(circle,rect[y="16"]){fill:var(--muted)}