:root{--bg: oklch(97.4% .014 236);--bg-wash: oklch(95.6% .022 240);--card: oklch(99.5% .006 236 / .7);--ink: oklch(26% .036 248);--ink-soft: oklch(42% .028 240);--muted: oklch(54% .022 236);--line: oklch(88% .02 236);--primary: oklch(53% .16 248);--primary-strong: oklch(46% .17 248);--primary-soft: oklch(95.5% .028 240);--glow: oklch(53% .16 248 / .18);--glass: oklch(100% .004 236 / .58);--shadow: 0 0 0 1px oklch(53% .12 248 / .08), 0 18px 48px oklch(40% .04 248 / .08);--radius: 24px;--serif: "Noto Serif SC", "Songti SC", serif;--sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(920px 420px at 50% -8%,oklch(93% .04 232),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg-wash));overflow:hidden}button,input{font:inherit}button{cursor:pointer}.app-shell{position:relative;height:100dvh;display:flex;flex-direction:column;isolation:isolate}.optics{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.optics .orb{position:absolute;border-radius:50%;filter:blur(48px)}.optics .orb.a{width:280px;height:280px;left:8%;top:18%;background:#aad9f28c;animation:drift 16s var(--ease) infinite alternate}.optics .orb.b{width:340px;height:340px;right:6%;bottom:8%;background:#bfdbf86b;animation:drift 20s var(--ease) infinite alternate-reverse}.optics .ring{position:absolute;left:50%;top:42%;width:520px;height:520px;margin:-260px 0 0 -260px;border:1px solid oklch(53% .12 248 / .1);border-radius:50%;animation:spin 80s linear infinite}.optics .ring.late{width:720px;height:720px;margin:-360px 0 0 -360px;border-color:#22749e12;animation-duration:110s;animation-direction:reverse}.topbar,.hero,.stage,.foot{position:relative;z-index:2}.deco-frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.deco-v,.deco-h{position:absolute;container-type:size}.deco-v{top:34%;width:1px;height:40%;background:linear-gradient(180deg,#006fb9bf,#2770ad00);background:linear-gradient(180deg,color(xyz 0.148 0.149 0.533 / 0.749),#2770ad00);animation:deco-in 1s var(--ease-out) both}.deco-v.left{left:28px;transform-origin:top}.deco-v.right{right:28px;top:36%;height:34%;background:linear-gradient(0deg,#006fb9bf,#2770ad00);background:linear-gradient(0deg,color(xyz 0.148 0.149 0.533 / 0.749),#2770ad00)}.deco-h{bottom:46px;height:1px;width:132px;animation:deco-in-x 1s var(--ease-out) .12s both}.deco-h.bot-l{left:28px;transform-origin:left;background:linear-gradient(90deg,#006fb9b3,#2770ad00);background:linear-gradient(90deg,color(xyz 0.148 0.149 0.533 / 0.702),#2770ad00)}.deco-h.bot-r{right:28px;transform-origin:right;background:linear-gradient(270deg,#006fb9b3,#2770ad00);background:linear-gradient(270deg,color(xyz 0.148 0.149 0.533 / 0.702),#2770ad00)}.deco-v .node{position:absolute;left:50%;width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px #006fb91f,0 0 14px var(--glow);box-shadow:0 0 0 4px oklch(53% .16 248 / .12),0 0 14px var(--glow);animation:deco-pulse 2.6s var(--ease) .4s infinite}.deco-v.left .node{top:0;transform:translate(-50%,-50%)}.deco-v.right .node{bottom:0;transform:translate(-50%,50%)}.deco-v .spark{position:absolute;left:50%;top:0;width:5px;height:5px;border-radius:50%;background:#cbeafb;box-shadow:0 0 12px var(--primary);transform:translate(-50%);animation:spark-y 5.2s var(--ease) .6s infinite}.deco-v.right .spark{top:auto;bottom:0;animation-name:spark-y-rev;animation-delay:1.4s}@keyframes deco-in{0%{opacity:0;transform:scaleY(.72)}to{opacity:1;transform:none}}@keyframes deco-in-x{0%{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:none}}@keyframes deco-pulse{0%,to{opacity:.7;box-shadow:0 0 0 4px #006fb91a,0 0 10px var(--glow);box-shadow:0 0 0 4px oklch(53% .16 248 / .1),0 0 10px var(--glow)}50%{opacity:1;box-shadow:0 0 0 6px #006fb929,0 0 16px var(--glow);box-shadow:0 0 0 6px oklch(53% .16 248 / .16),0 0 16px var(--glow)}}@keyframes spark-y{0%{transform:translate(-50%);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translate(-50%,100cqh);opacity:0}}@keyframes spark-y-rev{0%{transform:translate(-50%);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translate(-50%,-100cqh);opacity:0}}.topbar{flex:none;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 48px}.brand{display:flex;align-items:center;gap:12px;font-size:18px;color:var(--ink);font-weight:600;letter-spacing:.03em;animation:rise .7s var(--ease-out) both}.brand-mark{width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,oklch(62% .16 236),var(--primary));color:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px #ffffff59,0 10px 22px var(--glow)}.step-chip{font-size:14px;font-weight:600;color:var(--primary);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid oklch(100% 0 0 / .72);box-shadow:0 0 0 1px #2770ad14,inset 0 1px #ffffffd9;border-radius:999px;padding:7px 16px;animation:rise .7s var(--ease-out) .06s both}.hero{flex:none;text-align:center;padding:0 32px 10px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--primary);animation:rise .7s var(--ease-out) .08s both}.eyebrow .rule{width:42px;height:1px;background:#006fb959;background:oklch(53% .16 248 / .35);transform-origin:center;animation:draw .8s var(--ease-out) .2s both}.hero h1{margin:0;font-family:var(--serif);font-size:clamp(36px,4vw,54px);letter-spacing:.12em;font-weight:700;line-height:1.18;text-shadow:0 1px 0 oklch(100% 0 0 / .7);animation:rise .8s var(--ease-out) .12s both}.hero-ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0;animation:rise .7s var(--ease-out) .18s both}.hero-ornament i{width:46px;height:1px;background:#006fb961;background:oklch(53% .16 248 / .38)}.hero-ornament b{width:7px;height:7px;border:1.5px solid var(--primary);border-radius:50%;box-shadow:0 0 0 3px #006fb914;box-shadow:0 0 0 3px oklch(53% .16 248 / .08)}.hero .sub{margin:8px 0 0;font-size:18px;font-weight:600;color:var(--ink-soft);letter-spacing:.18em;animation:rise .7s var(--ease-out) .2s both}.hero .tag{margin:6px 0 0;font-size:13px;color:var(--muted);letter-spacing:.2em;animation:rise .7s var(--ease-out) .24s both}.stage{width:min(1280px,calc(100% - 72px));margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column}.stage>*{flex:1;min-height:0;display:flex;flex-direction:column}.card{background:var(--card);-webkit-backdrop-filter:blur(22px) saturate(1.18);backdrop-filter:blur(22px) saturate(1.18);border-radius:var(--radius);border:1px solid oklch(100% 0 0 / .78);box-shadow:var(--shadow),inset 0 1px #ffffffeb;animation:rise .75s var(--ease-out) .22s both}.video-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 14px 10px}.foot{flex:none;display:flex;justify-content:space-between;padding:8px 48px 12px;color:var(--muted);font-size:13px;letter-spacing:.08em}.btn-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;flex:none}.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:168px;height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-size:16px;font-weight:600;transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.btn-primary{background:linear-gradient(180deg,oklch(58% .16 244),var(--primary));color:#fff;box-shadow:0 0 0 1px #ffffff2e inset,0 12px 24px var(--glow)}.btn-primary:after{content:"";position:absolute;inset:0 auto 0 -40%;width:36%;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / .28),transparent);transform:translate(-120%)}.btn-primary:hover{background:linear-gradient(180deg,oklch(52% .17 244),var(--primary-strong))}.btn-primary:hover:after{animation:sheen .7s var(--ease-out)}.btn-ghost{background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink-soft);border-color:#ffffffb3;box-shadow:0 0 0 1px #2770ad0f}.player{position:relative;overflow:hidden;border-radius:18px;background:#07090d;flex:1;min-height:0;box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 1px #0a172347}.player video{width:100%;height:100%;object-fit:contain;background:#000}.player video::-webkit-media-controls,.player video::-webkit-media-controls-enclosure{display:none!important}.player:fullscreen,.player:-webkit-full-screen,.player.is-full{width:100vw;height:100vh;border-radius:0;background:#000}.player.is-full{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;min-height:100vh}body.video-fs{overflow:hidden}.fs-btn{position:absolute;top:14px;right:14px;height:40px;padding:0 12px 0 10px;border:0;border-radius:12px;display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:600;background:#02060d7a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .24s var(--ease),background .24s var(--ease);z-index:3}.fs-btn:hover{transform:scale(1.04);background:#02060db3}.fs-btn-inline{position:static;width:28px;height:28px;padding:0;border-radius:8px;background:transparent}.fs-btn-inline span{display:none}.play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#01040829;border:0;color:#fff}.play-disc{width:84px;height:84px;border-radius:50%;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--primary);display:grid;place-items:center;box-shadow:0 0 0 1px #ffffff80,0 14px 36px #00000047;transition:transform .28s var(--ease)}.play-overlay:hover .play-disc{transform:scale(1.06)}.timeline{position:absolute;left:20px;right:20px;bottom:14px;display:flex;align-items:center;gap:12px;color:#edf2f8;font-size:14px}.bar{flex:1;height:4px;border-radius:99px;background:#ffffff38;overflow:hidden}.bar>i{display:block;height:100%;width:0;background:#fff;transition:width .12s linear}.captions{display:flex;justify-content:space-around;padding:14px 28px 6px;color:var(--ink-soft);font-size:16px;font-weight:600}.captions-overlay{display:none;position:absolute;left:0;right:0;bottom:52px;padding:0 28px;color:#f4f9ffe6;pointer-events:none}.player:fullscreen .captions-overlay,.player:-webkit-full-screen .captions-overlay,.player.is-full .captions-overlay{display:flex}.hint{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 0;max-width:820px;padding:8px 16px;color:var(--ink-soft);font-size:15px;line-height:1.6;flex:none;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid oklch(100% 0 0 / .7);box-shadow:0 0 0 1px #2770ad0f;border-radius:999px}.quiz-head{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:12px;padding:6px 12px;border-radius:999px;color:var(--primary);background:var(--primary-soft);border:1px solid oklch(53% .12 248 / .1)}.stem{margin:0 0 16px;font-size:16px;line-height:1.75;color:var(--ink)}.options{display:flex;flex-direction:column;gap:12px}.option{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:16px;border:1px solid oklch(100% 0 0 / .8);background:#ffffff9e;background:oklch(100% .004 236 / .62);box-shadow:0 0 0 1px #3770a30d;color:inherit;transition:border-color .24s var(--ease),background .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease)}.option:hover{border-color:#a5c1dd;transform:translateY(-1px);box-shadow:0 8px 20px #364a5c14}.option.is-on,.option.is-right{border-color:#006fb973;border-color:oklch(53% .16 248 / .45);background:var(--primary-soft);box-shadow:0 0 0 1px #006fb91f,0 10px 22px var(--glow);box-shadow:0 0 0 1px oklch(53% .16 248 / .12),0 10px 22px var(--glow)}.dot{width:20px;height:20px;margin-top:4px;border-radius:50%;border:1.6px solid oklch(78% .02 250);flex:none;display:grid;place-items:center}.option.is-on .dot,.option.is-right .dot{border-color:var(--primary)}.option.is-on .dot:after,.option.is-right .dot:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary)}.opt-label{font-size:17px;line-height:1.7}.badge-right{margin-left:auto;color:var(--primary);font-size:15px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.feedback{margin-top:16px;padding:16px 18px;border-radius:16px;background:#fff4e1;background:oklch(97% .03 80);color:#5a3a1f;font-size:16px;line-height:1.75}.result-page{align-items:center;justify-content:center}.result-page .btn-row{margin-top:16px}.result-wrap{flex:none;width:min(820px,100%);max-height:none;overflow:visible;padding:26px 36px 22px;display:flex;flex-direction:column;align-items:stretch}.result-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}.result-wrap .voice-btn{height:32px;font-size:13px}.result-options{display:flex;flex-direction:column;gap:8px;margin-top:16px}.result-wrap .option{align-items:flex-start;padding:11px 16px;border-radius:14px;cursor:default}.result-wrap .option:hover{transform:none}.result-wrap .opt-label{font-size:16px;line-height:1.55}.result-wrap .dot{margin-top:3px}.result-wrap .badge-right{font-size:13px;font-weight:600}.opt-body{flex:1;min-width:0}.opt-row{display:flex;align-items:center;gap:12px}.opt-note{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}.end-page{justify-content:stretch;align-items:center}.end-wrap{flex:1;width:min(920px,100%);min-height:0;overflow:hidden;padding:40px 56px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.end-ornament{margin:14px 0 0}.end-point{margin:18px 0 0;padding:10px 18px;max-width:36em;color:var(--primary);font-size:17px;font-weight:600;line-height:1.6;background:var(--primary-soft);border:1px solid oklch(53% .12 248 / .12);border-radius:999px}.end-actions{margin-top:28px}.status-icon{position:relative;width:40px;height:40px;margin:0;border-radius:50%;background:linear-gradient(160deg,oklch(62% .16 236),var(--primary));color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px #ffffff4d,0 8px 18px var(--glow)}.status-icon:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:1px solid oklch(53% .16 248 / .28);animation:pulse-ring 2.4s var(--ease) infinite}.end-wrap .status-icon{width:72px;height:72px;margin:0 auto 18px}.result-wrap h2,.end-wrap h2{margin:0;font-size:32px;font-family:var(--serif);font-weight:700;line-height:1.2}.end-wrap h2{font-size:42px;letter-spacing:.08em}.explain{margin:0 auto;max-width:38em;text-align:center;color:var(--ink-soft);font-size:17px;line-height:1.75}.end-wrap .explain{margin:18px auto 0;max-width:34em;text-align:center;font-size:19px;line-height:1.85}.voice-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;color:var(--primary);font-size:14px}.voice-btn{border:1px solid oklch(53% .12 248 / .14);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--primary);border-radius:999px;height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;box-shadow:inset 0 1px #fffc}.waves{display:inline-flex;align-items:flex-end;gap:2px;height:14px}.waves span{width:2px;background:currentColor;border-radius:2px;animation:pulse .9s ease-in-out infinite}.waves span:nth-child(2){animation-delay:.15s}.waves span:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,to{height:4px}50%{height:12px}}@keyframes enter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes draw{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@keyframes draw-y{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes drift{0%{transform:translateZ(0)}to{transform:translate3d(18px,-22px,0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes sheen{to{transform:translate(420%)}}@keyframes pulse-ring{0%{transform:scale(.92);opacity:.7}70%{transform:scale(1.18);opacity:0}to{transform:scale(1.18);opacity:0}}.step-enter-active,.step-leave-active{transition:opacity .38s var(--ease),transform .38s var(--ease)}.step-enter-from{opacity:0;transform:translateY(18px)}.step-leave-to{opacity:0;transform:translateY(-12px)}.pad{padding:26px 32px 22px;overflow:hidden}.notice{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c172352;display:grid;place-items:center;z-index:20;animation:enter .28s var(--ease)}.notice-card{width:min(460px,calc(100% - 40px));background:#fcfeffd1;background:oklch(99.5% .006 236 / .82);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);border:1px solid oklch(100% 0 0 / .78);border-radius:22px;padding:32px 28px 24px;text-align:center;box-shadow:var(--shadow),inset 0 1px #ffffffe6}.notice-card h3{margin:0;font-family:var(--serif);font-size:28px}.notice-card p{margin:12px 0 24px;color:var(--ink-soft);font-size:16px;line-height:1.75}@media(prefers-reduced-motion:reduce){.app-shell,.btn,.play-disc,.option,.waves span,.step-enter-active,.step-leave-active,.notice,.optics .orb,.optics .ring,.brand,.step-chip,.hero h1,.eyebrow,.hero-ornament,.hero .sub,.hero .tag,.card,.status-icon:after,.btn-primary:after,.deco-v,.deco-h,.deco-v .node,.deco-v .spark{animation:none!important;transition:none!important}}@media(max-height:820px){.result-wrap{padding:16px 32px 14px}.result-head{margin-bottom:8px}.result-options{gap:6px;margin-top:10px}.result-wrap .option{padding:8px 14px}.result-page .btn-row{margin-top:10px}.end-wrap{padding:28px 40px 24px}.end-wrap h2{font-size:36px}.end-wrap .explain{font-size:18px}.end-wrap .status-icon{width:60px;height:60px;margin-bottom:12px}.end-point{margin-top:14px;font-size:16px}.end-actions{margin-top:20px}}@media(max-width:767px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh}.topbar,.foot{padding-left:16px;padding-right:16px}.stage{width:calc(100% - 24px)}.player{min-height:200px}.pad,.result-wrap,.end-wrap{padding:20px 16px 18px}.result-wrap{display:flex}.hero h1{font-size:32px}.btn-row{flex-direction:column}.btn{width:100%}.deco-frame{display:none}}