:root{
  --ink:#1B2233;--muted:#6B7280;--paper:#FBF7EF;--card:#FFFFFF;
  --navy:#182848;--navy2:#243B67;--gold:#F5B942;--gold2:#FFD77A;
  --coral:#F26B5E;--green:#2FA36B;--line:#E9E2D6;--soft:#F4EEE3;
  --num:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#EFE9DE;color:var(--ink);font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
body{min-height:100vh}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
input,select{outline:none}
#app{max-width:760px;margin:0 auto;min-height:100vh;background:var(--paper);box-shadow:0 0 60px rgba(24,40,72,.08)}
.hidden{display:none!important}
.spacer{flex:1}
.screen,.lesson-screen{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.scroll{flex:1;overflow:auto;padding:0 20px 90px}
.kick,.login-kicker{font-size:10px;letter-spacing:.22em;color:var(--gold);font-weight:800;text-transform:uppercase}

/* ---------- top bar ---------- */
.topbar{height:60px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(251,247,239,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em}
.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:.18em;font-weight:600}
.mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,var(--gold),#E09A20);color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:900;box-shadow:0 5px 14px rgba(224,154,32,.3)}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:#fff;border:1px solid var(--line)}
.bgm-toggle{color:var(--navy);font-size:17px;position:relative}
.bgm-toggle.on{background:var(--gold);border-color:var(--gold)}
.top-user{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:4px 6px 4px 12px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.avatar-dot{width:27px;height:27px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:11px;font-weight:800}

/* ---------- map ---------- */
.hero{margin-top:16px;padding:22px;border-radius:22px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;position:relative;overflow:hidden;box-shadow:0 16px 38px rgba(24,40,72,.18)}
.hero:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(245,185,66,.32),transparent 68%);right:-40px;top:-60px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;position:relative;z-index:1}
.hero h1{font-size:28px;line-height:1.15;margin:0;letter-spacing:-.03em}
.hero p{font-size:11px;color:#CBD5E1;margin:8px 0 0}
.big-num{font-family:var(--num);font-size:31px;font-weight:800;color:var(--gold)}
.big-num small{font-size:11px;color:#CBD5E1;font-weight:500}
.bar{height:5px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden;margin-top:18px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:99px;transition:width .4s}
.bar.mini{margin-top:7px;background:#E9E2D6;height:4px}
.bar.mini i{background:var(--coral)}
.tabs{display:flex;border-bottom:1px solid var(--line);margin:0 -20px;padding:0 20px;position:sticky;top:60px;background:rgba(251,247,239,.96);backdrop-filter:blur(10px);z-index:20}
.tabs button{flex:1;padding:15px 0 13px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.tabs button.on{color:var(--ink);border-color:var(--gold)}
.vol{margin-top:24px}
.vol-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.vol-head h3{font-size:10px;letter-spacing:.18em;color:var(--muted);margin:0;font-weight:800;text-transform:uppercase}
.vol-head span{font-size:10px;color:#A39A88;font-family:var(--num)}
.lesson{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.lesson:active{opacity:.65}
.lesson .no{font-family:var(--num);font-size:12px;color:var(--gold);font-weight:800}
.lesson .tt{display:block;font-size:14px;font-weight:700;line-height:1.3}
.lesson .tg{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.lesson .go{font-size:17px;color:var(--coral)}
.lesson.locked{opacity:.48}
.lock-ico{font-size:10px;padding:3px 7px;border-radius:99px;background:#EEE7DA;color:var(--muted)}
.sc{font-family:var(--num);font-size:12px;color:var(--green);font-weight:800}
.empty{padding:34px 10px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:760px;height:62px;display:flex;background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px);z-index:40}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:9px}
.bottom-nav button.on{color:var(--navy)}
.bottom-nav .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--soft);font-size:11px;font-weight:800}
.bottom-nav button.on .ico{background:var(--gold);color:var(--navy)}

/* ---------- login ---------- */
.login{min-height:100vh;padding:42px 28px 36px;background:linear-gradient(160deg,#101B33 0%,#1B2B50 55%,#233A64 100%);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}
.login-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.login-orb.a{width:240px;height:240px;right:-90px;top:-80px;background:radial-gradient(circle,rgba(245,185,66,.28),transparent 68%)}
.login-orb.b{width:280px;height:280px;left:-140px;bottom:-100px;background:radial-gradient(circle,rgba(242,107,94,.2),transparent 68%)}
.login-head{position:relative;z-index:1;margin-top:28px}
.login-title{font-size:52px;line-height:1.02;margin:16px 0 18px;letter-spacing:-.06em;font-weight:800}
.login-title em{font-style:normal;color:var(--gold)}
.login-sub{font-size:13px;line-height:1.9;color:#CBD5E1;margin:0}
.role-switch{display:flex;background:rgba(255,255,255,.09);border-radius:12px;padding:4px;margin:30px 0 18px;position:relative;z-index:1}
.role-switch button{flex:1;padding:10px;border-radius:9px;font-size:12px;color:#CBD5E1;font-weight:700}
.role-switch button.on{background:var(--gold);color:var(--navy)}
.login form{position:relative;z-index:1}
.field{margin-bottom:13px}
.field label{display:block;font-size:10px;letter-spacing:.08em;color:#AAB6CC;margin-bottom:6px;font-weight:700}
.field input,.field select{width:100%;height:46px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font-size:14px}
.field input::placeholder{color:#7E8DA8}
.field select option{color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:58px}
.pw-eye{position:absolute;right:8px;top:8px;height:30px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.12);color:#CBD5E1;font-size:10px}
.btn{min-height:48px;border-radius:12px;padding:0 18px;font-weight:800;font-size:14px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.accent{background:linear-gradient(135deg,var(--gold),#E9A32C);color:var(--navy);box-shadow:0 10px 24px rgba(233,163,44,.28);width:100%}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);width:100%}
.btn.small{min-height:38px;padding:0 12px;font-size:11px;border-radius:9px;width:auto}
.register-tip{text-align:center;font-size:11px;color:#AAB6CC;margin-top:18px;position:relative;z-index:1}
.link-btn{color:var(--gold);font-weight:800;font-size:11px;margin-left:4px}
.demo-box{margin-top:16px;padding:10px 12px;border-radius:10px;background:rgba(245,185,66,.1);border:1px solid rgba(245,185,66,.25);font-size:10px;color:#CBD5E1;text-align:center;position:relative;z-index:1}
.demo-box b{color:var(--gold)}
.login-foot{margin-top:auto;padding-top:26px;text-align:center;font-size:9px;color:#72819E;line-height:1.8;position:relative;z-index:1}
.rule{height:1px;background:rgba(255,255,255,.12);margin:24px 0 20px}
.register .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.register .login-sub{font-size:12px;margin-top:4px}
.register .btn.accent{margin-top:6px}
/* ---------- lesson shell ---------- */
.lesson-top{height:64px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(251,247,239,.95);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}
.lesson-top .mid{flex:1;min-width:0}
.lesson-top .k{font-size:9px;letter-spacing:.1em;color:var(--gold);font-weight:800;text-transform:uppercase}
.lesson-top .t{font-size:14px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{flex:1;padding:16px 16px 110px;display:flex;flex-direction:column}
.lesson-foot{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:760px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(251,247,239,.96);border-top:1px solid var(--line);backdrop-filter:blur(12px);z-index:35}
.lesson-foot .count{font-family:var(--num);font-size:11px;color:var(--muted)}
.lesson-foot .btn{min-height:44px;min-width:130px;width:auto;padding:0 22px}
.scene{flex:1;display:flex;flex-direction:column;animation:slideUp .32s ease both}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- cover / end ---------- */
.cover{background:linear-gradient(145deg,var(--navy),var(--navy2));border-radius:24px;padding:26px 24px 0;color:#fff;overflow:hidden;position:relative;min-height:500px;justify-content:flex-start}
.cover:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(245,185,66,.2),transparent 40%);pointer-events:none}
.cover .kick{position:relative;z-index:2}
.cover h2{font-size:34px;line-height:1.08;letter-spacing:-.04em;margin:14px 0 12px;position:relative;z-index:2}
.cover .sub{font-size:14px;color:#CBD5E1;position:relative;z-index:2}
.cover .meta{font-size:10px;color:#8FA0BE;margin-top:16px;position:relative;z-index:2}
.cover-cast{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;position:relative;z-index:2}
.cover-cast .char{position:relative;height:210px;width:auto;animation:float 3.8s ease-in-out infinite}
.cover-cast .char:nth-child(2){animation-delay:.5s}
.cover-cast .char img{height:100%;width:auto;display:block;filter:drop-shadow(0 14px 20px rgba(0,0,0,.3))}
.end-scene{align-items:center;justify-content:center;text-align:center;background:linear-gradient(150deg,var(--navy),#2A4476);border-radius:24px;color:#fff;padding:30px 22px;min-height:480px;position:relative;overflow:hidden}
.end-cast{display:flex;justify-content:center;gap:6px;height:190px;margin-bottom:10px}
.end-cast .char{width:auto;height:100%}
.end-cast img{height:100%;width:auto}
.end-scene .ring{width:66px;height:66px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-family:var(--num);font-size:22px;font-weight:800;margin:0 auto 12px}
.end-scene h2{font-size:24px;margin:4px 0 8px}
.end-scene p{font-size:12px;color:#CBD5E1;margin:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- dialogue ---------- */
.dialogue-scene{gap:10px}
.dlg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dlg-head h3{font-size:18px;margin:3px 0 0;letter-spacing:-.02em}
.ghost-pill{font-size:10px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.dlg-stage{position:relative;height:300px;margin-top:4px;border-radius:20px;background:linear-gradient(180deg,#F2EBDD,#FBF7EF);overflow:hidden;border:1px solid var(--line)}
.dlg-stage:before{content:"";position:absolute;left:50%;bottom:-80px;width:340px;height:180px;transform:translateX(-50%);border-radius:50%;background:rgba(245,185,66,.14);filter:blur(10px)}
.dlg-bubble{position:relative;z-index:5;margin:16px 14px 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 15px;box-shadow:0 10px 26px rgba(30,40,60,.09);min-height:96px;animation:bubbleIn .25s ease both}
.dlg-bubble.from-lily{margin-right:30%}
.dlg-bubble.from-trolli{margin-left:30%}
.dlg-bubble:after{content:"";position:absolute;bottom:-8px;width:16px;height:16px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.dlg-bubble.from-lily:after{left:44px}
.dlg-bubble.from-trolli:after{right:44px}
@keyframes bubbleIn{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
.bubble-name{display:inline-block;font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--navy);background:var(--gold);padding:3px 9px;border-radius:99px;margin-bottom:6px}
.bubble-en{font-size:16px;line-height:1.45;font-weight:800;letter-spacing:-.01em}
.bubble-zh{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
.char{position:absolute;bottom:-16px;height:170px;transition:transform .28s ease,opacity .28s ease,filter .28s ease;z-index:3}
.char img{height:100%;width:auto;display:block;filter:drop-shadow(0 10px 14px rgba(30,40,60,.18));transform-origin:bottom center}
.char-lily{left:2%}
.char-trolli{right:2%}
.char.active{transform:translateY(-8px) scale(1.05);filter:drop-shadow(0 0 14px rgba(245,185,66,.5));z-index:4}
.char:not(.active){opacity:.6;transform:translateY(8px) scale(.95)}
.dlg-lines{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;padding-right:3px}
.dlg-line{display:flex;align-items:flex-start;gap:9px;text-align:left;padding:10px 11px;border-radius:12px;border:1px solid transparent;background:transparent}
.dlg-line.on{background:#fff;border-color:var(--line);box-shadow:0 5px 14px rgba(30,40,60,.06)}
.dlg-who{flex:none;font-size:9.5px;font-weight:900;padding:4px 7px;border-radius:7px;margin-top:1px;line-height:1.2}
.dlg-who.lily{background:#FDE4C9;color:#A74B20}
.dlg-who.trolli{background:#FFF0BD;color:#7A5A00}
.dlg-text{font-size:14px;line-height:1.58;color:#3F4C5D;font-weight:500}
.dlg-play{flex:none;margin-left:auto;padding-top:2px;color:var(--gold);font-size:12px}
.dlg-controls{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding-top:2px}
.dlg-controls .btn{flex:1;min-width:88px;min-height:40px;font-size:10px;padding:0 8px}
.dlg-audio{display:none}
/* ---------- board ---------- */
.board-scene{justify-content:center}
.board-scene h2{font-size:29px;letter-spacing:-.03em;margin:8px 0 20px}
.board-list{display:flex;flex-direction:column;gap:12px}
.board-item{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:0 6px 18px rgba(30,40,60,.04)}
.bk{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,var(--gold),#E9A32C);color:var(--navy);display:grid;place-items:center;font-family:var(--num);font-size:13px;font-weight:900}
.board-item b{display:block;font-size:17px;line-height:1.38}
.board-item span{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.55}
@media(max-width:420px){.board-scene h2{font-size:27px}.board-list{gap:10px}.board-item{grid-template-columns:45px 1fr;gap:12px;padding:13px 14px}.bk{width:41px;height:41px;font-size:12px}.board-item b{font-size:16px}.board-item span{font-size:11.5px}}

/* ---------- shadow ---------- */
.shadow-scene{justify-content:flex-start}
.shadow-scene h2{font-size:25px;letter-spacing:-.03em;margin:8px 0 6px}
.shadow-tip{font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 14px}
.shadow-list{display:flex;flex-direction:column;gap:10px}
.shadow-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 14px;box-shadow:0 6px 18px rgba(30,40,60,.04)}
.shadow-en{font-size:15px;font-weight:800;line-height:1.4}
.shadow-cn{font-size:10px;color:var(--muted);margin-top:4px}
.shadow-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.shadow-actions .btn{min-height:34px;font-size:10px;padding:0 10px}
.shadow-result{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10px;color:var(--muted);flex-wrap:wrap}
.score{display:inline-block;font-family:var(--num);font-weight:900;font-size:11px;padding:3px 8px;border-radius:99px}
.score.good{background:#DDF5E8;color:#197A4A}
.score.mid{background:#FFF2CC;color:#8A6400}
.score.low{background:#FDE2DE;color:#B23A2E}

/* ---------- quote / recap ---------- */
.quote-scene,.recap-scene{justify-content:center;text-align:center;padding:20px}
.quote-mark{font-size:72px;line-height:.6;color:var(--gold);font-family:Georgia,serif}
.quote-scene blockquote{font-size:24px;line-height:1.4;font-weight:800;letter-spacing:-.03em;margin:18px 12px 14px}
.quote-scene .note{font-size:11px;color:var(--muted)}
.recap-card{background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff;border-radius:22px;padding:28px 22px;box-shadow:0 16px 36px rgba(24,40,72,.18)}
.recap-card h2{font-size:22px;margin:0 0 12px;color:var(--gold)}
.recap-card p{font-size:17px;line-height:1.6;font-weight:700;margin:0 0 12px}
.recap-card span{font-size:11px;color:#CBD5E1}
/* ---------- quiz ---------- */
.quiz{padding:22px 18px 120px;flex:1}
.q-kicker{font-size:9px;letter-spacing:.16em;color:var(--gold);font-weight:900;text-transform:uppercase}
.q-title{font-size:21px;line-height:1.45;font-weight:800;margin:10px 0 20px;letter-spacing:-.02em}
.q-options{display:flex;flex-direction:column;gap:9px}
.option{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 14px;font-size:13px;line-height:1.45;min-height:54px}
.option .l{flex:none;width:28px;height:28px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-family:var(--num);font-size:10px;font-weight:800;color:var(--muted)}
.option.correct{border-color:#75C79B;background:#F0FBF5}
.option.correct .l{background:var(--green);color:#fff}
.option.wrong{border-color:#F0A79F;background:#FFF5F3}
.option.wrong .l{background:var(--coral);color:#fff}
.option:disabled{opacity:1}
.feedback{margin-top:14px;padding:13px 15px;border-radius:12px;font-size:11px;line-height:1.65;background:#FFF5F3;border:1px solid #F3D3CD;color:#8F3A30}
.feedback.ok{background:#F0FBF5;border-color:#CBEBD9;color:#1E6F4B}
.feedback b{display:block;font-size:12px;margin-bottom:3px}
.dots{display:flex;gap:5px;margin-top:8px}
.dots i{height:3px;flex:1;border-radius:99px;background:#E5DDD0}
.dots i.done{background:var(--gold)}
.dots i.on{background:var(--coral)}

/* ---------- result ---------- */
.result{padding-top:18px}
.result-hero{display:flex;gap:16px;align-items:center;padding:20px;border-radius:20px;background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff}
.stamp{flex:none;width:82px;height:82px;border-radius:50%;border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold)}
.stamp b{font-family:var(--num);font-size:18px}
.stamp i{font-style:normal;font-size:8px;color:#CBD5E1;margin-top:2px}
.result-hero h2{font-size:23px;margin:0 0 6px}
.result-hero p{font-size:10px;line-height:1.7;color:#CBD5E1;margin:0}
.next-card{margin-top:14px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.next-card .k{font-size:9px;color:var(--gold);font-weight:900;letter-spacing:.1em}
.next-card .t{font-size:17px;font-weight:800;margin-top:4px}
.next-card .d{font-size:10px;color:var(--muted);margin-top:4px}

/* ---------- me / teacher ---------- */
.profile{display:flex;align-items:center;gap:14px;padding:20px 0}
.profile .pic{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,var(--gold),#E09A20);color:var(--navy);display:grid;place-items:center;font-size:22px;font-weight:900}
.profile h3{font-size:19px;margin:0}
.profile p{font-size:10px;color:var(--muted);margin:4px 0 0}
.section{margin-top:20px}
.section h2{font-size:14px;margin:0 0 10px;letter-spacing:.02em}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 8px;text-align:center}
.stat b{display:block;font-family:var(--num);font-size:18px}
.stat span{display:block;font-size:9px;color:var(--muted);margin-top:3px}
.notice{margin-top:16px;padding:12px 14px;border-radius:11px;background:var(--soft);font-size:10px;color:var(--muted);line-height:1.7}
.admin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:13px 0;border-bottom:1px solid var(--line)}
.admin-row .nm{font-size:14px;font-weight:800}
.admin-row .meta{font-size:9px;color:var(--muted);margin-top:3px}
.admin-row .right{font-family:var(--num);font-size:11px;text-align:right;color:var(--navy);font-weight:800}
.admin-row .right span{font-family:inherit;font-size:9px;color:var(--coral);font-weight:700}
.mini-bar{height:4px;background:#EEE7DA;border-radius:99px;margin-top:7px;overflow:hidden}
.mini-bar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.detail-list{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid .full{grid-column:1/-1}
.section .field label{color:var(--muted)}
.section .field input,.section .field select{background:#fff;border-color:var(--line);color:var(--ink);height:42px;font-size:13px}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:var(--navy);color:#fff;font-size:12px;padding:11px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:82vw;text-align:center;line-height:1.5}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:720px){
  .dlg-stage{height:340px}
  .char{height:205px}
  .cover{min-height:560px}
  .cover-cast .char{height:250px}
}
@media (max-width:420px){
  .login{padding:32px 20px 30px}
  .login-title{font-size:44px}
  .hero h1{font-size:24px}
  .cover h2{font-size:29px}
  .dlg-bubble.from-lily{margin-right:12%}
  .dlg-bubble.from-trolli{margin-left:12%}
  .char{height:150px}
  .dlg-stage{height:270px}
  .q-title{font-size:19px}
  .dlg-controls .btn{min-width:72px}
}
/* character size balance */
.char-lily{left:2%;height:188px}
.char-trolli{right:2%;height:166px}
.cover-cast .char-lily{height:228px}
.cover-cast .char-trolli{height:202px}
.end-cast .char-lily{height:210px}
.end-cast .char-trolli{height:188px}
@media (max-width:420px){
  .char-lily{height:170px}
  .char-trolli{height:150px}
  .cover-cast .char-lily{height:205px}
  .cover-cast .char-trolli{height:182px}
}
/* lesson page strip */
.page-strip{display:flex;gap:6px;overflow-x:auto;padding:9px 16px;background:rgba(251,247,239,.96);border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:29;scrollbar-width:none;backdrop-filter:blur(10px)}
.page-strip::-webkit-scrollbar{display:none}
.page-dot{flex:none;min-width:30px;height:25px;border-radius:8px;font-family:var(--num);font-size:9px;font-weight:800;color:var(--muted);background:#EFE8DC;border:1px solid transparent;transition:transform .2s,background .2s,color .2s}
.page-dot.done{color:var(--navy);background:#FFF3D5}
.page-dot.on{color:var(--navy);background:var(--gold);border-color:var(--gold);box-shadow:0 4px 10px rgba(245,185,66,.35);transform:translateY(-1px)}
/* end page + cover character positioning */
.end-scene{padding:34px 22px 48px;justify-content:center}
.end-cast{display:flex;justify-content:center;align-items:flex-end;gap:10px;height:220px;margin-bottom:18px;position:relative;z-index:2}
.end-cast .char{position:relative;bottom:auto;left:auto;right:auto;height:100%;width:auto;flex:none;transform:none;opacity:1}
.end-cast .char img{height:100%;width:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}
.cover-cast .char{position:relative;bottom:auto;left:auto;right:auto}
@media (max-width:420px){
  .end-cast{height:190px;margin-bottom:14px}
  .end-scene{padding:28px 18px 40px}
}
/* cover / end contrast: deep plum instead of navy */
.cover{background:linear-gradient(145deg,#241236 0%,#3B1F52 55%,#5A2E57 100%);border:1px solid rgba(245,185,66,.22);box-shadow:0 18px 42px rgba(36,18,54,.24)}
.cover:before{background:radial-gradient(circle at 82% 8%,rgba(245,185,66,.30),transparent 42%)}
.end-scene{background:linear-gradient(150deg,#241236 0%,#3B1F52 55%,#5A2E57 100%);border:1px solid rgba(245,185,66,.22);box-shadow:0 18px 42px rgba(36,18,54,.2)}
/* fit 12 page dots on a phone */
.page-strip{gap:5px;padding:9px 14px}
.page-dot{min-width:28px}
/* Trolli speaking close-up */
.char-trolli img.grin{height:100%;width:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 0 4px rgba(245,185,66,.18),0 12px 26px rgba(36,18,54,.3);background:#1c2638;filter:none;animation:talkBob .26s ease-in-out infinite alternate}
@keyframes talkBob{from{transform:scale(1) rotate(-1deg)}to{transform:scale(1.04) rotate(1deg)}}
/* ---------- 9:16 phone stage ---------- */
html,body{height:100%}
body{display:flex;align-items:center;justify-content:center;background:#0d0912;overflow:hidden}
#app{
  width:min(100vw, calc(100dvh * 9 / 16));
  height:min(100dvh, calc(100vw * 16 / 9));
  min-height:0;max-width:none;position:relative;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.45);border-radius:0;
}
.screen,.lesson-screen{min-height:100%;height:100%}
.scroll{height:100%;overflow-y:auto}
.login{min-height:100%;height:100%;overflow-y:auto}
.bottom-nav,.lesson-foot{position:absolute;left:0;right:0;bottom:0;transform:none;width:auto;max-width:none}
.lesson-screen{overflow:hidden}
.stage{min-height:0;overflow-y:auto}
.quiz{overflow-y:auto}
.page-strip{top:64px}
@media (min-width:720px){#app{border-radius:18px}}
/* 9:16 compact tweaks */
.page-strip{gap:4px;padding:9px 12px}
.page-dot{min-width:26px}
@media (max-height:760px){
  .dlg-stage{height:232px}
  .char-lily{height:150px}
  .char-trolli{height:132px}
  .dlg-lines{max-height:110px}
  .dlg-bubble{min-height:78px;padding:9px 12px}
  .bubble-en{font-size:14px}
  .bubble-zh{font-size:10px}
  .dlg-controls .btn{min-height:34px}
  .stage{padding-bottom:82px}
}

/* ---------- Physics characters ---------- */
.char-ali{left:1%;height:176px}
.char-xiaowu{right:1%;height:174px}
.char-niu{left:50%;bottom:-8px;height:126px;transform:translateX(-50%)}
.char-niu.active{transform:translateX(-50%) translateY(-8px) scale(1.05)}
.char-niu:not(.active){transform:translateX(-50%) translateY(8px) scale(.95)}
.char img{object-fit:contain}
.dlg-bubble.from-ali{margin-right:34%}
.dlg-bubble.from-xiaowu{margin-left:34%}
.dlg-bubble.from-niu{margin-left:12%;margin-right:12%}
.dlg-bubble.from-ali:after{left:34px}
.dlg-bubble.from-xiaowu:after{right:34px}
.dlg-bubble.from-niu:after{left:50%}
.dlg-who.ali{background:#FFE0BD;color:#8A4C00}
.dlg-who.xiaowu{background:#D7F5F2;color:#11615C}
.dlg-who.niu{background:#DCE9F7;color:#1C4269}
.cover-cast .char-ali{height:205px}.cover-cast .char-xiaowu{height:198px}.cover-cast .char-niu{height:150px}
.end-cast .char-ali{height:190px}.end-cast .char-xiaowu{height:184px}.end-cast .char-niu{height:140px}
@media (max-width:420px){.char-ali{height:160px}.char-xiaowu{height:158px}.char-niu{height:112px}.cover-cast .char-ali{height:185px}.cover-cast .char-xiaowu{height:178px}.cover-cast .char-niu{height:135px}.end-cast{height:180px}}

/* ---------- Physics animation scenes ---------- */
.physics-scene{justify-content:flex-start;gap:10px}
.physics-scene h2{font-size:23px;letter-spacing:-.03em;margin:6px 0 4px}
.physics-stage{height:320px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#EAF3FA,#F8FBFD);position:relative;box-shadow:inset 0 0 28px rgba(31,78,121,.06)}
.physics-explain{font-size:11px;line-height:1.65;color:#4D6273;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin:0}
.physics-scene>.btn{align-self:flex-start;margin-top:-1px}
.phys-sky{position:absolute;inset:0 0 82px;background:linear-gradient(180deg,#DBEEFF,#F5FAFF)}
.phys-ground{position:absolute;left:0;right:0;bottom:55px;height:24px;background:#C5D6E4;border-top:4px solid #71889B}
.phys-train{position:absolute;bottom:75px;left:-145px;width:160px;height:78px;border-radius:18px 24px 8px 8px;background:linear-gradient(180deg,#FF9D3D,#E46D20);border:3px solid #A84A15;box-shadow:0 9px 18px rgba(41,65,83,.22)}
.physics-stage.playing .phys-train{animation:trainAcross 4.5s ease-in-out infinite}
.phys-train:before{content:"";position:absolute;left:18px;right:18px;top:14px;height:27px;border-radius:10px;background:#DDF7FF;border:2px solid #315C7A}
.phys-train i{position:absolute;bottom:-10px;width:22px;height:22px;border-radius:50%;background:#30465A;border:5px solid #677E90}.phys-train i:nth-child(1){left:20px}.phys-train i:nth-child(2){left:67px}.phys-train i:nth-child(3){right:20px}
.phys-train b{position:absolute;right:-70px;top:20px;color:#1B557E;font-size:13px;background:#fff;padding:5px 8px;border-radius:9px;border:1px solid #B8D2E4}
.phys-platform{position:absolute;left:0;right:0;bottom:21px;height:36px;background:repeating-linear-gradient(90deg,#D9E4EC 0 40px,#C9D6DF 40px 42px);border-top:3px solid #7B93A6}.phys-platform span{position:absolute;top:-15px;width:3px;height:15px;background:#70889A}.phys-platform span:nth-child(1){left:20%}.phys-platform span:nth-child(2){left:50%}.phys-platform span:nth-child(3){left:80%}
.phys-observer{position:absolute;left:45px;bottom:57px;width:22px;height:44px;border-radius:10px 10px 4px 4px;background:#2F4960;color:#fff;font-size:9px;text-align:center;padding-top:2px}.phys-observer:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#F1C7A4;left:0;top:-23px;border:2px solid #985D3D}
.phys-motion-arrow{position:absolute;right:62px;top:92px;font-size:42px;color:#F28C28;animation:pulseArrow 1.1s ease-in-out infinite alternate}
.phys-frame-label{position:absolute;bottom:7px;font-size:10px;font-weight:800;padding:3px 7px;border-radius:99px;background:#fff;border:1px solid #B8D2E4;color:#275370}.phys-frame-label.left{left:14px}.phys-frame-label.right{right:14px}
@keyframes trainAcross{0%{transform:translateX(0)}45%,65%{transform:translateX(205px)}100%{transform:translateX(420px)}}
@keyframes pulseArrow{from{transform:translateX(0);opacity:.65}to{transform:translateX(10px);opacity:1}}
.phys-panels{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 12px}
.phys-panel{background:#fff;border:1px solid #C9DDEB;border-radius:16px;padding:12px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;position:relative;overflow:hidden}
.panel-tag{position:absolute;top:9px;left:9px;font-size:9px;font-weight:900;color:#2A638B;background:#E4F3FC;padding:3px 7px;border-radius:99px}
.phys-panel b{font-size:12px;color:#173D59}.phys-panel small{font-size:9px;line-height:1.45;color:#617789}
.train-dot-anim{height:75px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:30px;color:#F28C28}.train-dot-anim i{font-style:normal;color:#2B6F9C;animation:arrowSlide 1s ease-in-out infinite alternate}
.wheel-anim{height:75px;display:grid;place-items:center}.wheel-anim span{width:52px;height:52px;border-radius:50%;border:9px solid #33556C;position:relative;animation:wheelSpin 1.2s linear infinite}.wheel-anim span:before,.wheel-anim span:after{content:"";position:absolute;left:50%;top:50%;width:32px;height:4px;background:#F28C28;transform:translate(-50%,-50%)}.wheel-anim span:after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes arrowSlide{from{transform:translateX(-4px)}to{transform:translateX(7px)}}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
.displacement-play{background:linear-gradient(180deg,#DFF2F4,#F7FCFC)}
.oval-track{position:absolute;left:50%;top:39%;width:250px;height:145px;transform:translate(-50%,-50%);border:16px solid #E89C43;border-radius:50%;box-shadow:inset 0 0 0 3px #fff,0 10px 25px rgba(75,91,105,.14)}
.oval-track:before{content:"";position:absolute;inset:18px 38px;border-radius:50%;border:2px dashed #A7B8C5}
.oval-track .runner{position:absolute;width:18px;height:18px;border-radius:50%;background:#19A7A1;border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2);left:18%;top:69%}
.physics-stage.playing .runner{animation:lapRunner 4.2s linear infinite}
.start-dot{position:absolute;left:15%;top:66%;color:#165A75;font-weight:900;font-size:12px}
@keyframes lapRunner{0%{left:18%;top:69%}25%{left:48%;top:-8%}50%{left:80%;top:20%}75%{left:83%;top:74%}100%{left:18%;top:69%}}
.path-chip{position:absolute;font-size:10px;font-weight:800;padding:6px 10px;border-radius:99px;background:#fff;border:1px solid #B8CEDD;color:#244B65}.path-chip.path{left:13px;bottom:22px}.path-chip.disp{right:13px;bottom:22px;color:#B33D25}
.straight-arrow{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);font-size:11px;font-weight:900;color:#215B7D;white-space:nowrap}
.timeline-play{background:linear-gradient(180deg,#F0F6FB,#FFF)}
.timeline{position:absolute;left:9%;right:9%;top:42%;height:4px;background:#2C628A;border-radius:99px}
.tl-point{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;border:4px solid #2C628A;transform:translate(-50%,-50%);font-size:10px;font-weight:900;color:#244B65;display:grid;place-items:center;padding-top:23px}.tl-point.p0{left:0}.tl-point.p1{left:33%}.tl-point.p2{left:66%}.tl-point.p3{left:100%}
.tl-highlight{position:absolute;left:66%;top:-16px;width:34%;height:25px;border-radius:8px;background:rgba(242,140,40,.3);border:2px solid #E58124}.physics-stage.playing .tl-highlight{animation:highlightPulse 1.2s ease-in-out infinite alternate}
.tl-labels{position:absolute;left:12px;right:12px;bottom:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-size:9px;color:#3E6076;text-align:center}.tl-labels b{background:#fff;border:1px solid #C7DCEA;border-radius:9px;padding:6px 3px}
.time-point-vs-span{position:absolute;left:18px;right:18px;top:22px;display:flex;justify-content:space-between;font-size:10px;font-weight:900;color:#2D668D}.time-point-vs-span span{padding:5px 8px;border-radius:99px;background:#E3F1FA}.time-point-vs-span span:last-child{background:#FFF0D9;color:#9B5412}
@keyframes highlightPulse{from{opacity:.45}to{opacity:1}}
@media (max-width:420px){.physics-stage{height:300px}.physics-scene h2{font-size:21px}.dlg-bubble.from-ali{margin-right:31%}.dlg-bubble.from-xiaowu{margin-left:31%}}

.cover-spirit{position:absolute;right:18px;bottom:170px;height:78px;width:auto;filter:drop-shadow(0 8px 18px rgba(245,185,66,.35));animation:float 3.2s ease-in-out infinite;z-index:2}
.phys-spirit{position:absolute;right:10px;top:10px;height:66px;width:auto;z-index:8;filter:drop-shadow(0 5px 12px rgba(61,170,154,.25));animation:spiritFloat 2.4s ease-in-out infinite}
@keyframes spiritFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}

/* wl1-03 speed */
.speed-race{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:20px;background:linear-gradient(140deg,#f6fbff,#e8f4ff)}
.race-lane{position:relative;height:58px;border-radius:14px;background:#fff;border:1px solid rgba(32,76,120,.12);overflow:hidden}
.race-lane>span{position:absolute;left:10px;top:8px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e7f0fb;color:#1b5a94;font-size:12px;font-weight:900;z-index:2}
.race-lane>b{position:absolute;right:12px;top:19px;font-size:12px;color:#47627b}
.race-runner{position:absolute;left:17%;top:22px;color:#ff7a59;font-size:18px;line-height:1;z-index:1}
.race-runner.r2{color:#18a999}
.physics-stage.playing .race-runner.r1{animation:runA 3.2s ease-in-out infinite}
.physics-stage.playing .race-runner.r2{animation:runB 3.2s ease-in-out infinite}
@keyframes runA{0%{left:17%}55%{left:72%}100%{left:72%}}
@keyframes runB{0%{left:17%}38%{left:72%}100%{left:72%}}
.race-result{margin-top:2px;padding:12px 15px;border-radius:15px;background:#123b61;color:#fff;display:flex;flex-direction:column;gap:2px}
.race-result span{font-size:10px;letter-spacing:.14em;opacity:.7}.race-result b{font-size:18px}.race-result small{font-size:11px;opacity:.78}
.speedo-play{display:flex;align-items:center;justify-content:center;gap:20px;padding:18px;background:radial-gradient(circle at 30% 20%,#eef9ff,#dfeefb)}
.speedo-ring{position:relative;width:168px;height:168px;border-radius:50%;background:conic-gradient(from 220deg,#18a999 0 28%,#dbe8f3 28% 72%,#ffb347 72% 86%,#fff 86%);display:grid;place-items:center;box-shadow:inset 0 0 0 14px #fff,0 12px 35px rgba(18,59,97,.15)}
.speedo-ring:after{content:"";position:absolute;width:126px;height:126px;border-radius:50%;background:#fff}
.speedo-ring b{position:relative;z-index:2;margin-top:28px;font-size:35px;color:#123b61}.speedo-ring span{position:absolute;z-index:2;top:101px;font-size:11px;color:#71869a}
.speedo-needle{position:absolute;z-index:3;left:50%;top:50%;width:3px;height:62px;border-radius:3px;background:#ef5b5b;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(-55deg)}
.physics-stage.playing .speedo-needle{animation:needleSweep 3.8s ease-in-out infinite}
@keyframes needleSweep{0%{transform:translate(-50%,-100%) rotate(-55deg)}35%{transform:translate(-50%,-100%) rotate(5deg)}65%{transform:translate(-50%,-100%) rotate(34deg)}100%{transform:translate(-50%,-100%) rotate(-55deg)}}
.speedo-card{width:150px;padding:14px;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(18,59,97,.1);display:flex;flex-direction:column;gap:2px}
.speedo-card small{font-size:9px;letter-spacing:.12em;color:#7d90a2}.speedo-card b{font-size:14px;color:#123b61}.speedo-card span{font-size:10px;color:#60788e}.speedo-card hr{width:100%;border:0;border-top:1px solid #e3edf5;margin:7px 0}
@media(max-width:420px){.speedo-play{gap:10px;padding:10px}.speedo-ring{width:145px;height:145px}.speedo-ring:after{width:106px;height:106px}.speedo-card{width:130px}.race-lane>b{font-size:10px}}

/* wl1-04 acceleration */
.accel-compare{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:18px;background:linear-gradient(145deg,#f6fbff,#e9f2fb)}
.accel-row{position:relative;padding:11px 13px 24px;border-radius:15px;background:rgba(255,255,255,.95);border:1px solid rgba(32,76,120,.12)}
.accel-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.accel-meta span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e7f0fb;color:#1b5a94;font-size:12px;font-weight:900}.accel-meta b{font-size:13px;color:#263f57}
.accel-track{height:10px;margin-top:8px;border-radius:9px;background:#e5eef6;overflow:hidden}.accel-bar{display:block;width:0;height:100%;border-radius:9px}.accel-bar.a{background:linear-gradient(90deg,#1ca8a0,#41c6b5)}.accel-bar.b{background:linear-gradient(90deg,#f4a340,#ffc363)}
.physics-stage.playing .accel-bar.a{animation:accelBarA 3.2s ease-in-out infinite}.physics-stage.playing .accel-bar.b{animation:accelBarB 3.2s ease-in-out infinite}
@keyframes accelBarA{0%{width:4%}45%,100%{width:84%}}@keyframes accelBarB{0%{width:3%}60%,100%{width:58%}}
.accel-time{position:absolute;right:13px;bottom:7px;font-size:10px;color:#61798e}.accel-note{align-self:center;display:flex;gap:10px;align-items:baseline;padding:9px 14px;border-radius:13px;background:#123b61;color:#fff}.accel-note b{font-size:13px}.accel-note span{font-size:10px;opacity:.8}
.accel-direction{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:18px;background:radial-gradient(circle at 20% 15%,#f4fbff,#e4eff9)}
.accel-vector-card{width:calc(50% - 7px);min-height:167px;padding:15px 12px;border-radius:17px;background:rgba(255,255,255,.95);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:0 8px 22px rgba(18,59,97,.08)}
.accel-vector-card small{font-size:11px;font-weight:900;color:#526d84}.accel-mini-car{position:relative;width:58px;height:23px;margin-top:4px;border-radius:7px 9px 5px 5px;background:#2c6fa7;box-shadow:inset 0 5px 0 rgba(255,255,255,.13)}.accel-mini-car:before{content:"";position:absolute;left:12px;top:-10px;width:31px;height:13px;border-radius:8px 8px 0 0;background:#2c6fa7}.accel-mini-car i{position:absolute;bottom:-5px;width:11px;height:11px;border:3px solid #233d55;border-radius:50%;background:#bcd1e3}.accel-mini-car i:first-child{left:7px}.accel-mini-car i:last-child{right:7px}.vector-row{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:900}.v-label{color:#108b83}.a-label{color:#e45f50}.vector-row b{font-size:27px;line-height:1}.arrow-right{color:#108b83}.arrow-left{color:#e45f50}.opposite .arrow-left{color:#e45f50}
.physics-stage.playing .same .accel-mini-car{animation:carForward 2.4s ease-in-out infinite}.physics-stage.playing .opposite .accel-mini-car{animation:carBrake 2.4s ease-in-out infinite}
@keyframes carForward{0%{transform:translateX(-18px)}60%,100%{transform:translateX(20px)}}@keyframes carBrake{0%{transform:translateX(12px)}60%,100%{transform:translateX(0)}}
.accel-rule{width:100%;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 8px;align-items:center;padding:10px 13px;border-radius:13px;background:#123b61;color:#fff}.accel-rule b{font-size:10px;color:#8de1d5}.accel-rule span{font-size:10px;opacity:.8}
@media(max-width:420px){.accel-direction{gap:8px;padding:10px}.accel-vector-card{width:calc(50% - 4px);min-height:160px;padding:12px 8px}.accel-rule{grid-template-columns:auto 1fr}.accel-rule span{margin-right:5px}}
/* wl1-05 uniform acceleration */
.vt-chart{display:flex;flex-direction:column;justify-content:center;padding:12px 14px;background:linear-gradient(145deg,#f7fbff,#e9f3fb)}
.vt-chart svg{width:100%;height:205px;overflow:visible}.vt-grid line{stroke:#c8dbea;stroke-width:1;stroke-dasharray:4 5}.vt-grid line:first-child,.vt-grid line:nth-child(2){stroke:#6f8799;stroke-width:1.5;stroke-dasharray:none}.vt-line{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:0}.physics-stage.playing .vt-line{animation:drawVt 2.4s ease-out infinite}.vt-dot{fill:#fff;stroke:#159b91;stroke-width:3}.vt-text{font-size:11px;font-weight:800;fill:#35556f}.vt-text.slope{fill:#e06a4f}.vt-text.axis{font-size:13px}.vt-readout{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:-12px}.vt-readout span{display:flex;flex-direction:column;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.9);font-size:9px;color:#6a8093}.vt-readout b{font-size:11px;color:#173e61}
@keyframes drawVt{0%{stroke-dashoffset:300}55%,100%{stroke-dashoffset:0}}
.brake-model{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px;background:linear-gradient(145deg,#f8fbff,#eaf3fa)}
.brake-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding-right:24px}.brake-head span{font-size:10px;color:#5f778b;max-width:138px}.brake-head b{font-size:10px;line-height:1.35;color:#173e61;text-align:right;max-width:142px}
.brake-bars{display:flex;align-items:flex-end;gap:7px;height:126px;padding:9px 10px 2px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.1)}
.brake-step{flex:1;height:112px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}.brake-step i{display:block;width:100%;height:var(--h);min-height:2px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#f6b354,#ec7657);transform-origin:bottom}.brake-step.stop i{background:#9eb2c2}.brake-step b{font-size:10px;line-height:1;color:#38556e}.brake-step span{font-size:8px;line-height:1.1;color:#788da0}
.physics-stage.playing .brake-step i{animation:brakeDrop .55s ease-out both}.physics-stage.playing .brake-step:nth-child(2) i{animation-delay:.12s}.physics-stage.playing .brake-step:nth-child(3) i{animation-delay:.24s}.physics-stage.playing .brake-step:nth-child(4) i{animation-delay:.36s}.physics-stage.playing .brake-step:nth-child(5) i{animation-delay:.48s}.physics-stage.playing .brake-step:nth-child(6) i{animation-delay:.6s}
@keyframes brakeDrop{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}
.brake-stop{display:flex;align-items:baseline;justify-content:space-between;padding:8px 12px;border-radius:12px;background:#123b61;color:#fff}.brake-stop b{font-size:12px;color:#ffd08b}.brake-stop span{font-size:9px;opacity:.78}
@media(max-width:420px){.vt-chart svg{height:188px}.brake-model{padding:11px;gap:7px}.brake-bars{height:120px;gap:5px;padding:8px 6px 2px}.brake-step{height:106px}.brake-head{padding-right:18px}.brake-head span{max-width:112px}.brake-head b{max-width:122px}}
/* wl1-06 displacement */
.vt-area{display:flex;flex-direction:column;justify-content:center;padding:12px 14px;background:linear-gradient(145deg,#f7fbff,#eaf4fb)}
.vt-area svg{width:100%;height:205px;overflow:visible}.area-fill{fill:rgba(21,155,145,.2);stroke:none;transform-origin:55px 155px}.area-line{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round}.area-label{fill:#167e76;font-size:10px}.physics-stage.playing .area-fill{animation:areaGrow 2.2s ease-out infinite}.physics-stage.playing .area-line{animation:areaLine 2.2s ease-out infinite}
@keyframes areaGrow{0%{opacity:0;transform:scaleY(.05)}55%,100%{opacity:1;transform:scaleY(1)}}@keyframes areaLine{0%{opacity:.2}30%,100%{opacity:1}}
.area-result{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-8px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(18,59,97,.07)}.area-result span{display:flex;flex-direction:column;font-size:9px;color:#6a8093}.area-result b{font-size:11px;color:#173e61}.area-result strong{font-size:18px;color:#118d84}
.displacement-steps{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px;background:linear-gradient(145deg,#f8fbff,#e8f3fa)}
.disp-bars{display:flex;align-items:flex-end;gap:10px;height:132px;padding:10px 12px 4px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid rgba(32,76,120,.1)}.disp-step{flex:1;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}.disp-step b{font-size:10px;color:#30516b}.disp-step i{display:block;width:100%;height:var(--h);min-height:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#38bdb0,#158b84);transform-origin:bottom}.disp-step span{font-size:9px;color:#73899b}
.physics-stage.playing .disp-step i{animation:dispGrow .6s ease-out both}.physics-stage.playing .disp-step:nth-child(2) i{animation-delay:.12s}.physics-stage.playing .disp-step:nth-child(3) i{animation-delay:.24s}.physics-stage.playing .disp-step:nth-child(4) i{animation-delay:.36s}@keyframes dispGrow{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}
.disp-deltas{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.disp-deltas span{padding:6px 3px;border-radius:8px;text-align:center;font-size:8px;background:#e4f1f8;color:#315b76}.disp-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:11px;background:#123b61;color:#fff}.disp-note b{font-size:12px;color:#ffd08b}.disp-note span{font-size:8px;opacity:.8;text-align:right}
@media(max-width:420px){.vt-area svg{height:190px}.displacement-steps{gap:7px;padding:11px}.disp-bars{height:126px;gap:7px;padding:8px 8px 3px}.disp-step{height:106px}.disp-deltas span{font-size:7px}.disp-note span{font-size:7px}}
/* wl1-07 free fall */
.vacuum-drop{position:relative;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px;background:radial-gradient(circle at 50% 20%,#f7fdff,#e2eef8)}
.vacuum-badge{position:absolute;right:14px;top:13px;padding:4px 8px;border-radius:99px;background:#123b61;color:#8de1d5;font-size:8px;font-weight:900;letter-spacing:.12em}.drop-tube{position:relative;height:192px;margin-top:0;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(219,237,247,.8));border:2px solid rgba(64,124,166,.22);overflow:hidden}.drop-tube:before{content:"";position:absolute;inset:8px 9px 22px;border-left:1px dashed rgba(64,124,166,.16);border-right:1px dashed rgba(64,124,166,.16)}.drop-lane{position:absolute;top:18px;bottom:30px;width:50%;display:flex;justify-content:center;align-items:flex-start}.drop-lane:first-child{left:0}.drop-lane:nth-child(2){right:0}.drop-object{position:absolute;top:10px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-weight:900;box-shadow:0 7px 16px rgba(18,59,97,.15)}.drop-object.coin{background:#d9e5ef;color:#385b78;font-size:18px}.drop-object.feather{background:#fff2d7;color:#d89b35;font-size:29px;transform:rotate(-18deg)}.drop-lane b{position:absolute;bottom:0;font-size:10px;color:#47657c}.drop-floor{position:absolute;left:9px;right:9px;bottom:20px;height:8px;border-radius:8px;background:linear-gradient(90deg,#a7bfd2,#d9e8f2,#a7bfd2)}
.physics-stage.playing .drop-object.coin{animation:vacuumFall 2.7s cubic-bezier(.3,.05,.7,1) infinite}.physics-stage.playing .drop-object.feather{animation:vacuumFall 2.7s cubic-bezier(.3,.05,.7,1) infinite}
@keyframes vacuumFall{0%{top:8px;opacity:0}12%{opacity:1}72%,100%{top:132px;opacity:1}}
.drop-result{display:flex;align-items:baseline;justify-content:space-between;padding:8px 12px;border-radius:12px;background:#123b61;color:#fff}.drop-result b{font-size:14px;color:#ffd08b}.drop-result span{font-size:9px;opacity:.8}
.ff-table{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px;background:linear-gradient(145deg,#f8fbff,#e8f3fa)}.ff-head{display:flex;justify-content:space-between;align-items:baseline}.ff-head b{font-size:11px;color:#173e61}.ff-head span{font-size:9px;color:#6d8497}.ff-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;height:158px;padding:10px 11px 6px;border-radius:15px;background:rgba(255,255,255,.94);border:1px solid rgba(32,76,120,.1)}.ff-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.ff-col b{font-size:11px;color:#31536d}.ff-col i{display:block;width:80%;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#67c8e5,#3488c1);transform-origin:bottom}.ff-col span{font-size:9px;color:#526f86}.ff-col em{font-size:8px;color:#8a9dac;font-style:normal}
.physics-stage.playing .ff-col i{animation:ffGrow .7s ease-out both}.physics-stage.playing .ff-col:nth-child(2) i{animation-delay:.15s}.physics-stage.playing .ff-col:nth-child(3) i{animation-delay:.3s}@keyframes ffGrow{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}.ff-note{display:flex;align-items:baseline;justify-content:space-between;padding:8px 12px;border-radius:11px;background:#123b61;color:#fff}.ff-note b{font-size:12px;color:#9be3d7}.ff-note span{font-size:9px;opacity:.8}
@media(max-width:420px){.vacuum-drop{padding:11px}.drop-tube{height:184px}.ff-table{padding:11px;gap:7px}.ff-cols{height:152px;gap:6px;padding:8px}}
/* wl1-08 forces */
.book-forces{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;background:linear-gradient(145deg,#f8fbff,#e8f3fa)}.book-stage{position:relative;height:210px;border-radius:16px;background:rgba(255,255,255,.72);overflow:hidden}.book-shape{position:absolute;left:50%;top:76px;transform:translateX(-50%);width:124px;height:48px;border-radius:5px 8px 5px 5px;background:linear-gradient(145deg,#f6b354,#e88b4d);box-shadow:0 8px 18px rgba(18,59,97,.16);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}.book-shape:before{content:"";position:absolute;left:8px;top:-7px;width:108px;height:8px;border-radius:4px;background:#ffd08b}.force-arrow{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:9px;font-weight:900}.force-arrow i{font-size:40px;font-style:normal;line-height:.9}.arrow-g{left:22%;top:66px;color:#e45f50}.arrow-n{right:22%;top:72px;color:#159b91}.table-top{position:absolute;left:13%;right:13%;top:128px;height:13px;border-radius:8px;background:#8db7d1;box-shadow:0 5px 0 #709bb7}.table-top i{position:absolute;top:-4px;width:2px;height:7px;background:rgba(255,255,255,.5)}.table-top i:first-child{left:30%}.table-top i:nth-child(2){left:50%}.table-top i:nth-child(3){left:70%}.table-legs{position:absolute;left:22%;right:22%;top:146px;height:42px;display:flex;justify-content:space-between}.table-legs span{width:11px;height:42px;border-radius:0 0 6px 6px;background:#709bb7}.bend-tip{position:absolute;left:50%;top:158px;transform:translateX(-50%);font-size:9px;color:#59758b}.physics-stage.playing .table-top{animation:tableBend 2.4s ease-in-out infinite}@keyframes tableBend{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.98)}}
.force-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px}.force-legend span{padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.9);font-size:9px;color:#5f778b;text-align:center}.force-legend b{font-size:11px;color:#173e61}
.spring-hooke{display:flex;flex-direction:column;justify-content:center;padding:12px 14px;background:radial-gradient(circle at 50% 10%,#f8fdff,#e5f0f8)}.spring-hooke svg{width:100%;height:218px;overflow:visible}.spring-topline{stroke:#31536d;stroke-width:5;stroke-linecap:round}.spring-coil{fill:none;stroke:#2c6fa7;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transform-origin:110px 22px}.spring-string{stroke:#31536d;stroke-width:2}.spring-weight{fill:#123b61;filter:drop-shadow(0 5px 8px rgba(18,59,97,.2))}.weight-text{fill:#fff;font-size:11px;font-weight:900}.spring-label{fill:#61798e;font-size:9px}.physics-stage.playing .spring-coil{animation:springStretch 2.8s ease-in-out infinite}.physics-stage.playing .spring-string,.physics-stage.playing .spring-weight,.physics-stage.playing .weight-text{animation:weightDrop 2.8s ease-in-out infinite}@keyframes springStretch{0%,100%{transform:scaleY(1)}45%,70%{transform:scaleY(1.24)}}@keyframes weightDrop{0%,100%{transform:translateY(0)}45%,70%{transform:translateY(20px)}}.hooke-card{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.94);border:1px solid rgba(32,76,120,.1)}.hooke-card b{font-size:14px;color:#118d84}.hooke-card span{font-size:10px;color:#526f86}.hooke-card em{width:100%;font-size:8px;color:#8a9dac;font-style:normal}
@media(max-width:420px){.book-stage{height:204px}.spring-hooke{padding:8px}.spring-hooke svg{height:205px}.hooke-card{padding:7px 9px}}
/* wl1-09 friction */
.friction-push{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:linear-gradient(145deg,#f8fbff,#e8f2fa)}.friction-stage{position:relative;height:208px;border-radius:16px;background:rgba(255,255,255,.78);overflow:hidden}.push-force{position:absolute;right:18px;top:48px;color:#e45f50;font-size:11px;font-weight:900}.push-box{position:absolute;left:50%;top:77px;transform:translateX(-50%);width:86px;height:65px;border-radius:8px;background:linear-gradient(145deg,#e9a24c,#d67a42);box-shadow:0 9px 18px rgba(18,59,97,.13);display:grid;place-items:center;color:#fff;font-size:18px;font-weight:900}.push-box:before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:rgba(255,255,255,.45)}.static-friction{position:absolute;left:18px;top:48px;color:#159b91;font-size:11px;font-weight:900}.friction-floor{position:absolute;left:8%;right:8%;top:142px;height:9px;border-radius:9px;background:#9db6c8;box-shadow:0 7px 0 #819eb4}.friction-caption{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:5px 10px;border-radius:99px;background:#123b61;color:#fff;font-size:8px;white-space:nowrap}.physics-stage.playing .push-box{animation:boxPush 2.8s ease-in-out infinite}.physics-stage.playing .push-force{animation:forcePulse 1.2s ease-in-out infinite alternate}@keyframes boxPush{0%,30%{transform:translateX(-56px)}55%,100%{transform:translateX(-38px)}}@keyframes forcePulse{from{opacity:.55;transform:translateX(-3px)}to{opacity:1;transform:translateX(3px)}}
.friction-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px}.friction-legend span{padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.92);font-size:8px;text-align:center;color:#637c90}.friction-legend b{display:block;font-size:10px;color:#173e61}
.friction-walk{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:radial-gradient(circle at 50% 20%,#f9fdff,#e5f0f8)}.walk-stage{position:relative;height:205px;border-radius:16px;background:rgba(255,255,255,.78);overflow:hidden}.shoe-shape{position:absolute;left:50%;top:65px;transform:translateX(-50%);width:83px;height:42px;border-radius:24px 24px 9px 9px;background:#2c6fa7;box-shadow:0 8px 16px rgba(18,59,97,.16)}.shoe-shape:before{content:"";position:absolute;left:-5px;bottom:-5px;width:93px;height:14px;border-radius:9px;background:#123b61}.shoe-shape i{position:absolute;left:13px;top:9px;width:39px;height:4px;border-radius:3px;background:rgba(255,255,255,.6);transform:rotate(-20deg)}.walk-forward{position:absolute;right:13px;top:66px;color:#159b91;font-size:11px;font-weight:900}.walk-back{position:absolute;left:13px;top:112px;color:#e45f50;font-size:11px;font-weight:900}.walk-ground{position:absolute;left:5%;right:5%;top:145px;height:12px;border-radius:10px;background:#9db6c8;box-shadow:0 7px 0 #819eb4}.physics-stage.playing .shoe-shape{animation:stepForward 2.8s ease-in-out infinite}@keyframes stepForward{0%,35%{transform:translateX(-54px)}60%,100%{transform:translateX(-36px)}}.walk-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:11px;background:#123b61;color:#fff}.walk-note b{font-size:11px;color:#ffd08b}.walk-note span{font-size:8px;opacity:.8;text-align:right}
@media(max-width:420px){.friction-push,.friction-walk{padding:10px}.friction-stage,.walk-stage{height:198px}.walk-forward,.walk-back{font-size:9px}.walk-note b{font-size:10px}.walk-note span{font-size:7px}}
/* wl1-10 to wl1-12 */
.pair-scene{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:15px;background:radial-gradient(circle at 50% 20%,#f8fdff,#e5f0f8)}.pair-people{height:194px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:16px;background:rgba(255,255,255,.72)}.person{width:66px;height:118px;border-radius:34px 34px 18px 18px;background:linear-gradient(180deg,#3d86b6,#245f8e);color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 9px 20px rgba(18,59,97,.16)}.p-right{background:linear-gradient(180deg,#e5a54e,#ce7441)}.pair-gap{width:120px;display:flex;flex-direction:column;gap:20px;align-items:center}.pair-arrow{font-size:10px;font-weight:900;white-space:nowrap}.pair-arrow.right{color:#159b91}.pair-arrow.left{color:#e45f50}.physics-stage.playing .p-left{animation:pushLeft 2.4s ease-in-out infinite}.physics-stage.playing .p-right{animation:pushRight 2.4s ease-in-out infinite}@keyframes pushLeft{0%,45%{transform:translateX(0)}75%,100%{transform:translateX(-10px)}}@keyframes pushRight{0%,45%{transform:translateX(0)}75%,100%{transform:translateX(10px)}}.pair-note,.rocket-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:11px;background:#123b61;color:#fff}.pair-note b,.rocket-note b{font-size:11px;color:#ffd08b}.pair-note span,.rocket-note span{font-size:8px;opacity:.8}
.rocket-scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:radial-gradient(circle at 50% 35%,#f8fdff,#e3eef8);padding:12px}.rocket-shape{position:relative;width:58px;height:110px;border-radius:50% 50% 16% 16%;background:linear-gradient(180deg,#f5f7fa,#b9cedd);display:grid;place-items:center;margin-bottom:4px;box-shadow:0 8px 18px rgba(18,59,97,.16)}.rocket-shape:before{content:"";position:absolute;left:50%;top:12px;width:17px;height:17px;border-radius:50%;background:#5d9fc4;transform:translateX(-50%)}.rocket-shape:after{content:"";position:absolute;left:-13px;bottom:0;width:17px;height:35px;border-radius:8px 2px 2px 8px;background:#e87556;transform:rotate(15deg)}.rocket-shape i{position:absolute;right:-13px;bottom:0;width:17px;height:35px;border-radius:2px 8px 8px 2px;background:#e87556;transform:rotate(-15deg)}.rocket-shape b{font-size:9px;color:#31536d}.gas-flame{display:flex;gap:4px;margin-top:-2px}.gas-flame span{width:9px;height:16px;border-radius:50%;background:#f6b354;opacity:.85}.gas-flame span:nth-child(2){height:22px;background:#ef765d}.rocket-arrow{position:absolute;font-size:10px;font-weight:900;color:#159b91}.rocket-arrow.up{right:36px;top:82px}.rocket-arrow.down{left:22px;bottom:78px;color:#e45f50}.rocket-note{width:100%;margin-top:6px}
.vector-add,.vector-decompose,.two-balance,.three-balance{display:flex;flex-direction:column;justify-content:center;padding:10px 14px;background:linear-gradient(145deg,#f8fcff,#e6f1f8)}.vector-add svg,.vector-decompose svg,.two-balance svg,.three-balance svg{width:100%;height:218px;overflow:visible}.vec-axis{stroke:#a9bdcb;stroke-width:1.4;stroke-dasharray:4 4}.vec-f1,.vec-f2,.vec-force,.force-up{stroke:#159b91;stroke-width:3;stroke-linecap:round}.vec-result{stroke:#123b61;stroke-width:4;stroke-linecap:round}.vec-dash{stroke:#8ca5b7;stroke-width:1.4;stroke-dasharray:5 5}.vec-fx,.force-down{stroke:#e45f50;stroke-width:3;stroke-linecap:round}.vec-fy{stroke:#f0a337;stroke-width:3;stroke-linecap:round}.vec-label{font-size:10px;font-weight:900;fill:#31536d}.vec-label.result{fill:#123b61}.vec-label.up{fill:#159b91}.vec-label.down{fill:#e45f50}.angle-arc{fill:none;stroke:#8ca5b7;stroke-width:1.5}.physics-stage.playing .vec-result{animation:dashResult 2.5s ease-in-out infinite}.physics-stage.playing .vec-force{animation:decomposeGlow 2.5s ease-in-out infinite}@keyframes dashResult{0%{opacity:.2}40%,100%{opacity:1}}@keyframes decomposeGlow{0%,100%{opacity:.55}45%,70%{opacity:1}}.vector-note,.balance-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.vector-note b,.balance-note b{font-size:11px;color:#ffd08b}.vector-note span,.balance-note span{font-size:8px;opacity:.8;text-align:right}.ceiling{stroke:#55738b;stroke-width:5;stroke-linecap:round}.rope{stroke:#6c91aa;stroke-width:2}.lamp{fill:#f5b354;stroke:#d4813f;stroke-width:2}.physics-stage.playing .lamp{animation:lampFloat 2.7s ease-in-out infinite}@keyframes lampFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(max-width:420px){.pair-people{height:188px;gap:8px}.person{width:60px;height:110px}.pair-gap{width:112px}.vector-add svg,.vector-decompose svg,.two-balance svg,.three-balance svg{height:205px}.vector-add,.vector-decompose,.two-balance,.three-balance{padding:7px 10px}.pair-note span,.rocket-note span,.vector-note span,.balance-note span{font-size:7px}}
/* fill the 9:16 animation stage consistently */
.pair-scene,.rocket-scene,.vector-add,.vector-decompose,.two-balance,.three-balance{height:100%}
.rocket-scene{height:100%;padding-bottom:54px}.rocket-note{position:absolute;left:12px;right:12px;bottom:10px;width:auto;margin:0}.rocket-arrow.down{bottom:105px}
/* wl1-13 to wl1-15 */
.inertia-bus{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 20%,#f8fdff,#e5f0f8)}.bus-body{position:relative;width:230px;height:115px;border-radius:18px 18px 9px 9px;background:linear-gradient(180deg,#4b94bd,#2e6f9c);box-shadow:0 12px 24px rgba(18,59,97,.18)}.bus-window{position:absolute;left:18px;right:18px;top:18px;height:50px;border-radius:9px;background:#d8eef7;overflow:hidden}.bus-person{position:absolute;left:50%;bottom:0;width:22px;height:37px;transform:translateX(-50%);border-radius:12px 12px 3px 3px;background:#e7a34f;transform-origin:50% 100%}.bus-person:before{content:"";position:absolute;left:4px;top:-13px;width:14px;height:14px;border-radius:50%;background:#f4c38b}.bus-wheel{position:absolute;bottom:-10px;width:23px;height:23px;border:5px solid #263f55;border-radius:50%;background:#9db7c8}.bus-wheel.w1{left:30px}.bus-wheel.w2{right:30px}.physics-stage.playing .bus-person{animation:leanForward 2.7s ease-in-out infinite}@keyframes leanForward{0%,35%{transform:translateX(-50%) rotate(0)}65%,100%{transform:translateX(-50%) rotate(20deg)}}.inertia-arrow{position:absolute;right:28px;top:100px;font-size:10px;font-weight:900;color:#159b91}.bus-caption{position:absolute;left:28px;top:100px;font-size:10px;font-weight:900;color:#e45f50}
.galileo-ramps{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e6f1f8)}.ramp-card{width:50%;height:188px;padding:10px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.11);display:flex;flex-direction:column;align-items:center}.ramp-scene{position:relative;width:100%;height:115px}.ramp{position:absolute;bottom:13px;width:80px;height:4px;border-radius:4px;background:#6f98b3}.ramp.left{left:5px;transform:rotate(-25deg);transform-origin:left center}.ramp.right{right:5px;transform:rotate(25deg);transform-origin:right center}.ramp-ball{position:absolute;width:14px;height:14px;border-radius:50%;background:#e45f50;box-shadow:0 3px 6px rgba(18,59,97,.2)}.b1{left:43px;bottom:42px}.b2{right:37px;top:15px;background:#159b91}.ramp-card>span{font-size:11px;font-weight:900;color:#31536d}.ramp-card>small{font-size:8px;color:#7b91a3;margin-top:4px}.ideal{border-color:rgba(21,155,145,.3)}
.experiment-setup{height:100%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;background:linear-gradient(145deg,#f8fbff,#e8f3fa)}.exp-track{position:relative;height:190px;border-radius:15px;background:rgba(255,255,255,.8);overflow:hidden}.exp-track:before{content:"";position:absolute;left:18px;right:20px;top:128px;height:8px;border-radius:5px;background:#83a9c3}.exp-cart{position:absolute;left:42px;top:91px;width:72px;height:37px;border-radius:6px;background:#e3a14c;display:grid;place-items:center;font-size:10px;color:#fff;font-weight:900}.exp-cart:before,.exp-cart:after{content:"";position:absolute;bottom:-7px;width:13px;height:13px;border:4px solid #334f66;border-radius:50%;background:#c8d7e2}.exp-cart:before{left:9px}.exp-cart:after{right:9px}.exp-string{position:absolute;left:114px;top:108px;width:130px;height:1px;background:#345e78}.exp-pulley{position:absolute;right:28px;top:99px;width:20px;height:20px;border:4px solid #6c91aa;border-radius:50%}.exp-weight{position:absolute;right:24px;top:130px;width:29px;height:35px;border-radius:5px;background:#e45f50;color:#fff;font-size:7px;display:grid;place-items:center}.exp-timer{position:absolute;left:20px;top:32px;padding:5px 7px;border-radius:7px;background:#123b61;color:#fff;font-size:8px}.physics-stage.playing .exp-cart{animation:cartRun 2.6s ease-in-out infinite}@keyframes cartRun{0%,20%{transform:translateX(0)}70%,100%{transform:translateX(150px)}}.exp-labels{display:flex;justify-content:space-between;font-size:9px;color:#61798e}.exp-note{padding:7px 10px;border-radius:10px;background:#123b61;color:#fff;font-size:8px;text-align:center}
.af-graph{height:100%;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;background:linear-gradient(145deg,#f8fcff,#e7f2f9)}.af-graph svg{width:100%;height:214px}.graph-axis{stroke:#8ba8ba;stroke-width:1.5}.graph-line{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round}.graph-dot{fill:#fff;stroke:#159b91;stroke-width:3}.graph-label{fill:#526f86;font-size:10px;font-weight:800}.physics-stage.playing .graph-line{animation:graphDraw 2.4s ease-out infinite}@keyframes graphDraw{0%{stroke-dasharray:260;stroke-dashoffset:260}55%,100%{stroke-dasharray:260;stroke-dashoffset:0}}.graph-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.graph-note b{font-size:11px;color:#ffd08b}.graph-note span{font-size:9px;opacity:.8}
.law-compare{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px;background:linear-gradient(145deg,#f8fcff,#e7f2f9)}.law-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:13px;border-radius:14px;background:rgba(255,255,255,.93);border:1px solid rgba(32,76,120,.1)}.law-cart{position:relative;width:80px;height:38px;border-radius:6px;background:#e3a14c;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}.law-cart.heavy{background:#5a8fae}.law-cart:before,.law-cart:after{content:"";position:absolute;bottom:-6px;width:12px;height:12px;border:4px solid #334f66;border-radius:50%;background:#c8d7e2}.law-cart:before{left:9px}.law-cart:after{right:9px}.law-force{font-size:11px;font-weight:900;color:#e45f50}.law-result{grid-column:1/-1;padding:7px 10px;border-radius:8px;background:#e7f3f8;color:#31536d;font-size:10px;font-weight:900}.law-note{padding:8px 11px;border-radius:11px;background:#123b61;color:#dff8f3;font-size:9px;text-align:center}.physics-stage.playing .law-row:first-child .law-cart{animation:lawMove 2.4s ease-in-out infinite}.physics-stage.playing .law-row:nth-child(2) .law-cart{animation:lawMoveSlow 2.4s ease-in-out infinite}@keyframes lawMove{0%,20%{transform:translateX(0)}70%,100%{transform:translateX(95px)}}@keyframes lawMoveSlow{0%,20%{transform:translateX(0)}70%,100%{transform:translateX(48px)}}
.law-vector{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px;background:radial-gradient(circle at 50% 25%,#f8fdff,#e5f0f8)}.law-vector-stage{position:relative;height:180px;border-radius:15px;background:rgba(255,255,255,.8)}.law-object{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:65px;height:58px;border-radius:9px;background:#e3a14c;display:grid;place-items:center;color:#fff;font-weight:900}.law-arrow{position:absolute;font-size:11px;font-weight:900}.law-arrow.force{right:45px;top:52px;color:#159b91}.law-arrow.velocity{left:45px;bottom:45px;color:#e45f50}.law-vector-note{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:9px;color:#61798e;white-space:nowrap}.law-vector-bottom{padding:8px 11px;border-radius:11px;background:#123b61;color:#dff8f3;font-size:9px;text-align:center}
@media(max-width:420px){.inertia-bus .bus-body{width:215px}.galileo-ramps{gap:7px;padding:10px}.ramp-card{height:184px;padding:7px}.experiment-setup{padding:10px}.exp-track{height:184px}.law-compare{padding:12px}.law-vector{padding:11px}}
/* wl1-16 to wl1-18 */
.unit-breakdown,.unit-check{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px;background:linear-gradient(145deg,#f8fcff,#e7f2f9)}
.unit-formula{display:flex;align-items:center;justify-content:center;gap:7px;padding:16px 8px;border-radius:15px;background:rgba(255,255,255,.94);border:1px solid rgba(32,76,120,.1);font-size:15px;font-weight:900;color:#173e61;flex-wrap:wrap}.unit-formula b{color:#8ba8ba}.unit-formula span:nth-child(3),.unit-formula span:nth-child(5){color:#118d84}.unit-tree{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:#526f86}.unit-tree>div:nth-child(1),.unit-tree>div:nth-child(3){padding:8px 15px;border-radius:9px;background:#e6f2f8;font-weight:900}.unit-arrow{color:#159b91;font-size:17px}.unit-note,.check-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.unit-note b,.check-note b{font-size:11px;color:#ffd08b}.unit-note span,.check-note span{font-size:8px;opacity:.8}
.check-eq,.check-units{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;background:rgba(255,255,255,.94);font-size:16px;font-weight:900;color:#173e61}.check-eq b,.check-units b{color:#8ba8ba}.check-units{font-size:12px;color:#159b91}.check-ok{align-self:center;padding:7px 15px;border-radius:99px;background:#dff5ef;color:#118d84;font-size:11px;font-weight:900}
.force-motion,.motion-force{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e6f1f8)}.fm-scene{position:relative;height:182px;border-radius:15px;background:rgba(255,255,255,.8);overflow:hidden}.fm-box{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:88px;height:58px;border-radius:7px;background:#e3a14c;display:grid;place-items:center;color:#fff;font-weight:900}.fm-force{position:absolute;right:22px;top:55px;color:#159b91;font-size:11px;font-weight:900}.fm-friction{position:absolute;left:18px;top:55px;color:#e45f50;font-size:11px;font-weight:900}.fm-floor{position:absolute;left:9%;right:9%;top:124px;height:8px;border-radius:8px;background:#93afc2}.fm-net{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);padding:5px 11px;border-radius:99px;background:#123b61;color:#fff;font-size:9px}.physics-stage.playing .fm-box{animation:fmMove 2.6s ease-in-out infinite}@keyframes fmMove{0%,25%{transform:translateX(-56px)}70%,100%{transform:translateX(-18px)}}.fm-chain,.mf-chain{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border-radius:11px;background:#e5f2f8;color:#31536d;font-size:8px;font-weight:900;flex-wrap:wrap}.fm-chain b,.mf-chain b{color:#159b91;font-size:13px}
.mf-car{position:relative;width:105px;height:50px;border-radius:12px 18px 7px 7px;background:#4c8bb3;margin:0 auto;box-shadow:0 8px 16px rgba(18,59,97,.14)}.mf-car:before{content:"";position:absolute;left:20px;top:-13px;width:50px;height:18px;border-radius:12px 12px 0 0;background:#4c8bb3}.mf-car i{position:absolute;bottom:-8px;width:18px;height:18px;border:4px solid #263f55;border-radius:50%;background:#c8d7e2}.mf-car i:first-child{left:14px}.mf-car i:last-child{right:14px}.mf-caption{text-align:center;font-size:10px;color:#61798e}.mf-note{display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.mf-note b{font-size:11px;color:#ffd08b}.mf-note span{font-size:9px;opacity:.8}
.elevator-scene{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.elevator-card{width:50%;padding:10px;border-radius:15px;background:rgba(255,255,255,.93);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;gap:5px}.elevator-box{position:relative;width:105px;height:130px;border:4px solid #6c91aa;border-radius:8px;background:#eff8fc}.elevator-person{position:absolute;left:50%;top:25px;transform:translateX(-50%);width:25px;height:48px;border-radius:13px 13px 5px 5px;background:#e3a14c}.elevator-person:before{content:"";position:absolute;left:5px;top:-17px;width:15px;height:15px;border-radius:50%;background:#f0c18b}.elevator-scale{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);width:52px;height:19px;border-radius:4px;background:#123b61;color:#fff;font-size:9px;display:grid;place-items:center}.elevator-card b{font-size:9px;color:#31536d}.elevator-card span{font-size:11px;font-weight:900;color:#159b91}.elevator-card.down span{color:#e45f50}.physics-stage.playing .elevator-card.up .elevator-box{animation:elevatorUp 2.6s ease-in-out infinite}.physics-stage.playing .elevator-card.down .elevator-box{animation:elevatorDown 2.6s ease-in-out infinite}@keyframes elevatorUp{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}@keyframes elevatorDown{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.orbit-scene{position:relative;height:100%;background:radial-gradient(circle at 50% 50%,#eaf6ff,#dcebf7);overflow:hidden}.earth{position:absolute;left:50%;top:50%;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c5df,#2f7eab);transform:translate(-50%,-50%);box-shadow:0 0 0 12px rgba(64,145,184,.12)}.orbit{position:absolute;left:50%;top:50%;width:240px;height:150px;border:2px dashed #7ca6bc;border-radius:50%;transform:translate(-50%,-50%) rotate(-22deg)}.orbit-station,.orbit-person{position:absolute;display:grid;place-items:center;border-radius:9px;color:#fff;font-weight:900}.orbit-station{right:42px;top:55px;width:38px;height:26px;background:#123b61;font-size:9px}.orbit-person{right:74px;top:109px;width:20px;height:28px;border-radius:10px;background:#e3a14c;font-size:7px}.orbit-note{position:absolute;left:13px;bottom:13px;display:flex;flex-direction:column;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.orbit-note b{font-size:10px;color:#ffd08b}.orbit-note span{font-size:9px;opacity:.8}.physics-stage.playing .orbit-station,.physics-stage.playing .orbit-person{animation:orbitFloat 2.8s ease-in-out infinite}@keyframes orbitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:420px){.unit-breakdown,.unit-check,.force-motion,.motion-force,.elevator-scene{padding:10px}.elevator-box{width:95px;height:124px}.orbit{width:225px;height:140px}.orbit-station{right:35px}.orbit-person{right:63px}}
/* wl2-01 to wl2-03 */
.curve-velocity,.curve-force{height:100%;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;background:linear-gradient(145deg,#f8fcff,#e6f1f8)}.curve-velocity svg,.curve-force svg{width:100%;height:218px;overflow:visible}.curve-path{fill:none;stroke:#7ba6bd;stroke-width:3;stroke-dasharray:5 5}.curve-point{fill:#fff;stroke:#e45f50;stroke-width:4}.tangent-line{stroke:#159b91;stroke-width:4;stroke-linecap:round}.force-arrow{stroke:#e45f50;stroke-width:4;stroke-linecap:round}.velocity-arrow{stroke:#159b91;stroke-width:3;stroke-linecap:round}.curve-label{font-size:10px;font-weight:900;fill:#31536d}.curve-label.soft{fill:#7d91a2}.curve-label.force{fill:#e45f50}.curve-label.vel{fill:#159b91}.curve-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.curve-note b{font-size:11px;color:#ffd08b}.curve-note span{font-size:8px;opacity:.8;text-align:right}.physics-stage.playing .tangent-line,.physics-stage.playing .velocity-arrow{animation:vectorSlide 2.2s ease-in-out infinite}@keyframes vectorSlide{0%,100%{opacity:.55}50%{opacity:1}}
.motion-compose{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.river-scene{position:relative;height:205px;border-radius:15px;background:linear-gradient(180deg,#e4f3fb 0 18%,#cbe8f5 18% 82%,#e4f3fb 82%);overflow:hidden}.river-bank{position:absolute;left:0;right:0;height:19%;background:#dfe8de}.river-bank.top{top:0}.river-bank.bottom{bottom:0}.boat-shape{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:31px;border-radius:5px 18px 5px 18px;background:#e3a14c;display:grid;place-items:center;color:#fff;font-weight:900;font-size:10px}.compose-arrow{position:absolute;font-size:10px;font-weight:900}.boat-speed{left:45%;top:28px;color:#159b91}.water-speed{right:28px;bottom:42px;color:#4d89b1}.result-speed{right:38px;top:34px;color:#e45f50}.physics-stage.playing .boat-shape{animation:boatDrift 2.6s ease-in-out infinite}@keyframes boatDrift{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-8%,-58%)}}.compose-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.compose-note b{font-size:11px;color:#ffd08b}.compose-note span{font-size:8px;opacity:.8}
.boat-crossing{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e6f1f8)}.boat-card{width:50%;padding:9px;border-radius:15px;background:rgba(255,255,255,.93);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;gap:5px}.river-mini{position:relative;width:100%;height:165px;border-radius:11px;background:linear-gradient(180deg,#e1eff6 0 16%,#c9e6f3 16% 84%,#e1eff6 84%)}.mini-boat{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:43px;height:22px;border-radius:4px 13px 4px 13px;background:#e3a14c;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.mini-boat.angled{transform:translateX(-50%) rotate(-18deg)}.mini-arrow{position:absolute;font-size:19px;font-weight:900}.mini-arrow.up{left:50%;top:35px;transform:translateX(-50%);color:#159b91}.mini-arrow.right{right:20px;bottom:49px;color:#4d89b1}.mini-arrow.diag{left:50%;top:45px;transform:translateX(-50%);color:#e45f50}.boat-card b{font-size:10px;color:#31536d}.boat-card span{font-size:8px;color:#7c91a3;text-align:center}
.projectile-motion{height:100%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e6f1f8)}.projectile-stage{position:relative;height:205px;border-radius:15px;background:rgba(255,255,255,.78);overflow:hidden}.projectile-platform{position:absolute;left:28px;top:61px;width:46px;height:6px;border-radius:4px;background:#6c91aa}.trajectory-arc{position:absolute;left:70px;top:58px;width:235px;height:112px;border-top:3px dashed #159b91;border-radius:50%;transform:rotate(8deg);transform-origin:left center}.projectile-ball{position:absolute;left:75px;top:49px;width:16px;height:16px;border-radius:50%;background:#e45f50;box-shadow:0 4px 8px rgba(18,59,97,.2)}.ground-line{position:absolute;left:20px;right:18px;bottom:34px;height:5px;border-radius:4px;background:#8fa9bb}.projectile-axis{position:absolute;font-size:11px;font-weight:900;color:#526f86}.projectile-axis.x{right:30px;bottom:39px}.projectile-axis.y{left:34px;top:25px}.physics-stage.playing .projectile-ball{animation:projectileFly 2.7s ease-in-out infinite}@keyframes projectileFly{0%{left:75px;top:49px;opacity:.6}20%{opacity:1}70%,100%{left:285px;top:155px;opacity:1}}.projectile-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.projectile-note b{font-size:11px;color:#ffd08b}.projectile-note span{font-size:8px;opacity:.8}
.projectile-vectors{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:radial-gradient(circle at 50% 20%,#f8fdff,#e5f0f8)}.vector-landing{position:relative;height:205px;border-radius:15px;background:rgba(255,255,255,.78)}.landing-ball{position:absolute;left:110px;top:70px;width:38px;height:38px;border-radius:50%;background:#e45f50;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}.landing-arrow{position:absolute;font-size:11px;font-weight:900}.landing-arrow.vx{left:155px;top:88px;color:#159b91}.landing-arrow.vy{left:124px;top:116px;color:#f0a337}.landing-arrow.v{left:184px;top:129px;color:#123b61}.vector-formula{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:8px 11px;border-radius:11px;background:#123b61;color:#dff8f3;font-size:9px;font-weight:800}.vector-formula b{width:100%;text-align:center;color:#ffd08b;font-size:10px}
@media(max-width:420px){.curve-velocity svg,.curve-force svg{height:205px}.boat-crossing{gap:7px;padding:10px}.river-mini{height:160px}.projectile-motion,.projectile-vectors{padding:10px}.projectile-stage,.vector-landing{height:198px}}.trajectory-svg{position:absolute;inset:0;width:100%;height:100%}.trajectory-svg path{fill:none;stroke:#159b91;stroke-width:3;stroke-dasharray:6 5;stroke-linecap:round}
/* wl2-04 to wl2-06 */
.circular-scene,.centripetal-force,.centripetal-accel{position:relative;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#f8fdff,#e4eff8);overflow:hidden}.circle-orbit{position:relative;width:175px;height:175px;border:3px dashed #7fa7bd;border-radius:50%}.orbit-dot{position:absolute;right:-8px;top:50%;transform:translateY(-50%);color:#e45f50;font-size:17px}.orbit-radius{position:absolute;left:50%;top:50%;width:84px;height:2px;background:#b6cedd;transform-origin:left center}.physics-stage.playing .circle-orbit{animation:orbitSpin 4s linear infinite}@keyframes orbitSpin{to{transform:rotate(360deg)}}.circle-tangent{position:absolute;right:30px;top:72px;color:#159b91;font-size:11px;font-weight:900}.circle-omega{position:absolute;left:47%;top:35%;color:#e45f50;font-size:12px;font-weight:900}.circle-note,.cf-note,.ca-note,.source-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.circle-note b,.cf-note b,.ca-note b{font-size:11px;color:#ffd08b}.circle-note span,.cf-note span,.ca-note span{font-size:8px;opacity:.8}
.transmission{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.trans-card{position:relative;width:50%;height:205px;border-radius:15px;background:rgba(255,255,255,.9);border:1px solid rgba(32,76,120,.12);display:flex;align-items:center;justify-content:center;gap:12px}.pulley{border:5px solid #4c8bb3;border-radius:50%;background:radial-gradient(circle,#dff1f8 0 28%,#a8c8d9 29% 35%,#eaf5f9 36%)}.pulley.big{width:78px;height:78px}.pulley.small{width:50px;height:50px}.axis-line{position:absolute;left:50%;top:30px;bottom:30px;width:2px;background:#e45f50;transform:translateX(-50%)}.belt-line{position:absolute;left:16%;right:16%;top:40px;height:118px;border:3px solid #6c91aa;border-left-color:transparent;border-right-color:transparent;border-radius:50%}.trans-card b{position:absolute;bottom:13px;font-size:9px;color:#31536d}.physics-stage.playing .pulley.big{animation:gearSpin 3s linear infinite}.physics-stage.playing .pulley.small{animation:gearSpin 2s linear infinite}@keyframes gearSpin{to{transform:rotate(360deg)}}
.cf-orbit,.ca-orbit{position:relative;width:190px;height:190px;border:3px dashed #83a9be;border-radius:50%}.cf-ball,.ca-ball{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:#e45f50;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}.cf-center{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#123b61;transform:translate(-50%,-50%)}.cf-radius{position:absolute;left:50%;top:50%;width:87px;height:3px;background:#e45f50;transform-origin:left center}.cf-tangent{position:absolute;right:15px;top:61px;color:#159b91;font-size:10px;font-weight:900}.cf-force{position:absolute;left:50%;top:55%;transform:translateX(-50%);color:#e45f50;font-size:10px;font-weight:900}.physics-stage.playing .cf-radius{animation:radiusPulse 2.2s ease-in-out infinite}@keyframes radiusPulse{0%,100%{opacity:.45}50%{opacity:1}}.ca-radius{position:absolute;left:50%;top:50%;width:88px;height:3px;background:#e45f50;transform-origin:left center}.ca-velocity{position:absolute;right:8px;top:54px;color:#159b91;font-size:10px;font-weight:900}.ca-accel{position:absolute;left:50%;top:56%;transform:translateX(-50%);color:#e45f50;font-size:10px;font-weight:900}.physics-stage.playing .ca-radius{animation:accelPulse 2.2s ease-in-out infinite}@keyframes accelPulse{0%,100%{opacity:.45}50%{opacity:1}}
.centripetal-sources,.centripetal-compare{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.source-card{position:relative;width:50%;height:196px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.source-car{width:74px;height:40px;border-radius:8px 14px 5px 5px;background:#e3a14c;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}.source-arrow{font-size:9px;color:#e45f50;font-weight:900}.source-earth{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c5df,#2f7eab)}.source-sat{position:absolute;left:50%;top:34px;transform:translateX(55px);width:30px;height:20px;border-radius:5px;background:#123b61;color:#fff;font-size:7px;display:grid;place-items:center}.source-card b{position:absolute;bottom:14px;font-size:9px;color:#31536d}.compare-card{width:50%;height:196px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.compare-circle{border:3px dashed #159b91;border-radius:50%;position:relative}.compare-circle:after{content:"●";position:absolute;right:-6px;top:50%;transform:translateY(-50%);color:#e45f50}.compare-circle.small{width:74px;height:74px}.compare-circle.large{width:112px;height:112px}.compare-card b{font-size:9px;color:#31536d}.compare-card span{font-size:8px;color:#7c91a3}
@media(max-width:420px){.circle-orbit{width:160px;height:160px}.cf-orbit,.ca-orbit{width:170px;height:170px}.transmission,.centripetal-sources,.centripetal-compare{gap:7px;padding:10px}.trans-card,.source-card,.compare-card{height:190px}.pulley.big{width:68px;height:68px}.pulley.small{width:45px;height:45px}}
/* wl2-07 to wl2-08 */
.banked-curve{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.bank-stage{position:relative;height:205px;border-radius:15px;background:rgba(255,255,255,.8);overflow:hidden}.bank-road{position:absolute;left:8%;right:8%;top:111px;height:75px;background:linear-gradient(180deg,#b9cbd7,#8ea9bb);transform:skewY(-8deg);border-radius:6px}.bank-car{position:absolute;left:45%;top:78px;width:62px;height:32px;border-radius:6px 11px 4px 4px;background:#e3a14c;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:900;transform:rotate(-8deg)}.bank-arrow{position:absolute;font-size:10px;font-weight:900}.bank-arrow.weight{left:42%;top:128px;color:#e45f50}.bank-arrow.normal{right:37%;top:60px;color:#159b91}.bank-result{position:absolute;right:30px;top:41px;padding:5px 8px;border-radius:99px;background:#123b61;color:#fff;font-size:8px}.bank-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.bank-note b{font-size:11px;color:#ffd08b}.bank-note span{font-size:8px;opacity:.8}.physics-stage.playing .bank-car{animation:bankTurn 2.7s ease-in-out infinite}@keyframes bankTurn{0%,100%{transform:rotate(-8deg) translateX(0)}50%{transform:rotate(-8deg) translateX(15px)}}
.bridge-scene{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.bridge-card{position:relative;width:50%;height:203px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center}.bridge-shape{width:130px;height:54px;border:5px solid #6c91aa;border-bottom:0}.bridge-shape.convex{border-radius:80px 80px 0 0;transform:translateY(12px)}.bridge-shape.concave{border-bottom:5px solid #6c91aa;border-top:0;border-radius:0 0 80px 80px;transform:translateY(-12px)}.bridge-car{position:absolute;left:50%;width:53px;height:25px;border-radius:5px 9px 4px 4px;background:#e3a14c;transform:translateX(-50%);color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.bridge-car.top{top:53px}.bridge-car.bottom{top:111px}.bridge-card b{position:absolute;bottom:31px;font-size:9px;color:#31536d}.bridge-card span{position:absolute;bottom:13px;font-size:10px;font-weight:900;color:#159b91}.bridge-card:last-child span{color:#e45f50}
.kepler-orbit,.kepler-areas{height:100%;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;background:radial-gradient(circle at 50% 40%,#f9fdff,#e6eff8)}.kepler-orbit svg,.kepler-areas svg{width:100%;height:212px;overflow:visible}.kepler-ellipse{fill:none;stroke:#7ca6bc;stroke-width:2;stroke-dasharray:5 4}.kepler-sun{fill:#f5b354;stroke:#e08a32;stroke-width:3;filter:drop-shadow(0 0 8px rgba(245,179,84,.5))}.kepler-planet{fill:#4c8bb3;stroke:#fff;stroke-width:2}.kepler-radius-line{stroke:#159b91;stroke-width:1.5;stroke-dasharray:4 4}.kepler-label{font-size:9px;font-weight:900;fill:#31536d}.kepler-label.soft{fill:#7d91a2}.physics-stage.playing .kepler-planet{animation:planetOrbit 4s linear infinite}.area-sector{fill:rgba(21,155,145,.18);stroke:#159b91;stroke-width:1.5}.area-sector.far{fill:rgba(228,95,80,.13);stroke:#e45f50}.physics-stage.playing .area-sector{animation:areaBlink 2.4s ease-in-out infinite}@keyframes areaBlink{0%,100%{opacity:.5}50%{opacity:1}}@keyframes planetOrbit{0%{cx:286;cy:94}25%{cx:165;cy:163}50%{cx:34;cy:94}75%{cx:165;cy:27}100%{cx:286;cy:94}}.kepler-note{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.kepler-note b{font-size:11px;color:#ffd08b}.kepler-note span{font-size:8px;opacity:.8}
@media(max-width:420px){.bridge-scene{gap:7px;padding:10px}.bridge-card{height:196px}.bank-stage{height:198px}.kepler-orbit svg,.kepler-areas svg{height:202px}}
/* wl2-09 to wl2-11 */
.gravity-pair{height:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:radial-gradient(circle at 50% 45%,#f8fdff,#e4eff8);position:relative}.mass{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(18,59,97,.16)}.mass-a{background:#4c8bb3}.mass-b{background:#e3a14c}.gravity-arrows{display:flex;flex-direction:column;gap:20px;font-size:10px;font-weight:900;color:#e45f50}.gravity-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff}.gravity-note b{font-size:10px;color:#ffd08b}.gravity-note span{font-size:8px;opacity:.8;text-align:right}.physics-stage.playing .mass-a{animation:massPullA 2.6s ease-in-out infinite}.physics-stage.playing .mass-b{animation:massPullB 2.6s ease-in-out infinite}@keyframes massPullA{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}@keyframes massPullB{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
.inverse-square{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.inverse-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:13px;background:rgba(255,255,255,.9);border:1px solid rgba(32,76,120,.1)}.source-mass,.target-mass{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.source-mass{background:#4c8bb3}.target-mass{background:#e3a14c}.distance-line{height:2px;background:#8ba8ba;position:relative;text-align:center;font-size:8px;color:#61798e}.distance-line.one{width:78px}.distance-line.two{width:145px}.distance-line:after{content:"";position:absolute;left:0;right:0;bottom:4px;border-top:1px dashed #8ba8ba}.inverse-row b{font-size:11px;color:#e45f50}.inverse-note{display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:9px}.inverse-note b{color:#ffd08b}.physics-stage.playing .inverse-row.far .target-mass{animation:farWeak 2.4s ease-in-out infinite}@keyframes farWeak{0%,100%{opacity:.75;transform:translateX(0)}50%{opacity:1;transform:translateX(-3px)}}
.weigh-earth{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 45% 45%,#effaff,#dcebf7);overflow:hidden}.earth-globe{width:135px;height:135px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c5df,#2f7eab);display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;box-shadow:0 0 0 14px rgba(64,145,184,.12)}.earth-object{position:absolute;right:63px;top:66px;width:24px;height:24px;border-radius:50%;background:#e3a14c;display:grid;place-items:center;color:#fff;font-size:7px;font-weight:900}.earth-arrow{position:absolute;right:49px;top:97px;color:#e45f50;font-size:9px;font-weight:900}.weigh-formula{position:absolute;right:14px;top:16px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.9);display:flex;flex-direction:column;gap:3px;font-size:8px;color:#31536d}.weigh-formula b{color:#118d84}.weigh-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:9px}.weigh-note b{color:#ffd08b}
.satellite-orbit{height:100%;position:relative;background:radial-gradient(circle at 50% 50%,#effaff,#dcebf7);overflow:hidden}.orbit-earth{position:absolute;left:50%;top:50%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c5df,#2f7eab);transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}.orbit-ring{position:absolute;left:50%;top:50%;border:2px dashed #7ca6bc;border-radius:50%;transform:translate(-50%,-50%)}.orbit-ring.low{width:180px;height:125px}.orbit-ring.high{width:290px;height:195px}.sat{position:absolute;border-radius:5px;background:#123b61;color:#fff;font-size:7px;display:grid;place-items:center;font-weight:900}.sat.low{left:73px;top:87px;width:31px;height:18px}.sat.high{right:22px;top:100px;width:31px;height:18px}.satellite-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:9px}.satellite-note b{color:#ffd08b}.physics-stage.playing .sat.low{animation:satBob 2.2s ease-in-out infinite}.physics-stage.playing .sat.high{animation:satBob 3.2s ease-in-out infinite}
.escape-velocities{height:100%;position:relative;background:radial-gradient(circle at 50% 50%,#effaff,#dcebf7);overflow:hidden}.escape-earth{position:absolute;left:50%;top:50%;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c5df,#2f7eab);transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.escape-ring{position:absolute;left:50%;top:50%;border:2px dashed;border-radius:50%;transform:translate(-50%,-50%);font-size:8px;font-weight:900;padding:2px 4px;color:#31536d}.escape-ring.r1{width:145px;height:145px;border-color:#159b91}.escape-ring.r1:after{content:"7.9";position:absolute;right:6px;top:11px}.escape-ring.r2{width:220px;height:220px;border-color:#e3a14c}.escape-ring.r2:after{content:"11.2";position:absolute;right:10px;top:20px}.escape-ring.r3{width:300px;height:300px;border-color:#e45f50}.escape-ring.r3:after{content:"16.7";position:absolute;right:8px;top:25px}.escape-ring{text-indent:-9999px}.escape-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:9px}.escape-note b{color:#ffd08b}
.geostationary{height:100%;position:relative;background:radial-gradient(circle at 50% 50%,#effaff,#dcebf7);overflow:hidden}.geo-earth{position:absolute;left:50%;top:50%;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#76c5df,#2f7eab);transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900}.geo-equator{position:absolute;left:50%;top:50%;width:292px;height:2px;background:#e45f50;transform:translate(-50%,-50%)}.geo-orbit{position:absolute;left:50%;top:50%;width:275px;height:150px;border:2px dashed #7ca6bc;border-radius:50%;transform:translate(-50%,-50%)}.geo-sat{position:absolute;right:46px;top:71px;width:34px;height:20px;border-radius:5px;background:#123b61;color:#fff;font-size:7px;display:grid;place-items:center;font-weight:900}.geo-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:9px}.geo-note b{color:#ffd08b}.physics-stage.playing .geo-sat{animation:geoPulse 2.4s ease-in-out infinite}@keyframes satBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes geoPulse{0%,100%{opacity:.7}50%{opacity:1}}
@media(max-width:420px){.gravity-pair{gap:7px;padding:10px}.inverse-square,.weigh-earth{padding:10px}.earth-globe{width:125px;height:125px}.escape-ring.r3{width:280px;height:280px}.geo-orbit{width:255px;height:140px}.geo-sat{right:40px;top:74px}}.weigh-formula{right:auto;left:14px;top:16px}.escape-ring{text-indent:0}
/* wl2-12 to wl2-13 */
.light-clock,.length-contraction,.power-scene{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.clock-card{width:50%;height:200px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.clock-box{position:relative;width:105px;height:120px;border:4px solid #4c8bb3;border-radius:9px;background:#e8f5fa;overflow:hidden}.clock-box:before,.clock-box:after{content:"";position:absolute;left:8px;right:8px;height:3px;background:#7ca6bc}.clock-box:before{top:12px}.clock-box:after{bottom:12px}.light-pulse{position:absolute;left:50%;top:18px;width:10px;height:10px;border-radius:50%;background:#e45f50;box-shadow:0 0 10px rgba(228,95,80,.7);animation:pulseDown 1.8s ease-in-out infinite}.light-pulse.diagonal{animation:pulseDiagonal 2.2s ease-in-out infinite}.clock-card b{font-size:9px;color:#31536d}.clock-card span{font-size:8px;color:#7d91a2;text-align:center}.physics-stage.playing .clock-card.moving{animation:clockGlow 2.6s ease-in-out infinite}@keyframes pulseDown{0%,100%{top:18px}50%{top:88px}}@keyframes pulseDiagonal{0%{left:16px;top:18px}50%{left:78px;top:88px}100%{left:16px;top:18px}}@keyframes clockGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(21,155,145,.16)}}
.length-row{display:flex;flex-direction:column;gap:7px;align-items:flex-start;flex:1}.length-row>span{font-size:9px;color:#526f86}.ruler{height:22px;border-radius:5px;background:repeating-linear-gradient(90deg,#4c8bb3 0 2px,#d9ecf5 2px 12px)}.ruler.full{width:100%}.ruler.short{width:63%}.physics-stage.playing .ruler.short{animation:contract 2.6s ease-in-out infinite}@keyframes contract{0%,100%{width:100%}55%{width:63%}}.length-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.length-note b{color:#ffd08b}.length-contraction{position:relative;flex-direction:column;align-items:stretch}
.work-angle{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.work-stage{position:relative;height:198px;border-radius:15px;background:rgba(255,255,255,.8);overflow:hidden}.work-box{position:absolute;left:46%;top:63px;width:72px;height:56px;border-radius:7px;background:#e3a14c;color:#fff;font-size:16px;font-weight:900;display:grid;place-items:center}.work-force{position:absolute;right:37px;top:47px;color:#159b91;font-size:11px;font-weight:900}.work-displacement{position:absolute;left:13px;bottom:42px;color:#4c8bb3;font-size:10px;font-weight:900}.work-angle-mark{position:absolute;right:99px;top:73px;color:#e45f50;font-size:10px;font-weight:900}.work-floor{position:absolute;left:8%;right:8%;top:123px;height:7px;border-radius:7px;background:#8fa9bb}.physics-stage.playing .work-box{animation:workMove 2.6s ease-in-out infinite}@keyframes workMove{0%,30%{transform:translateX(-20px)}70%,100%{transform:translateX(40px)}}.work-formula{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:9px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:14px;font-weight:900}.work-formula small{font-size:8px;color:#ffd08b;font-weight:600}
.power-scene{position:relative;flex-direction:column;background:radial-gradient(circle at 50% 20%,#f8fdff,#e5f0f8)}.power-car{position:relative;width:118px;height:48px;border-radius:10px 18px 6px 6px;background:#4c8bb3}.power-car:before{content:"";position:absolute;left:24px;top:-14px;width:55px;height:19px;border-radius:12px 12px 0 0;background:#4c8bb3}.power-car:after{content:"车";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.power-arrows{display:flex;gap:10px;font-size:9px;color:#31536d}.power-arrows span{padding:5px 9px;border-radius:99px;background:#fff}.power-formula{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:9px}.power-formula b{font-size:13px;color:#ffd08b}.physics-stage.playing .power-car{animation:powerShift 2.6s ease-in-out infinite}@keyframes powerShift{0%,100%{transform:translateX(22px)}50%{transform:translateX(-16px)}}
@media(max-width:420px){.light-clock,.power-scene{gap:7px;padding:10px}.clock-card{height:194px}.clock-box{width:94px;height:112px}.work-angle{padding:10px}.work-stage{height:190px}}
/* wl2-14 to wl2-16 */
.potential-reference,.gravity-path,.kinetic-energy,.work-energy,.pendulum-energy,.energy-conservation{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.ref-card{width:50%;height:200px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px}.ref-ball{width:34px;height:34px;border-radius:50%;background:#e3a14c;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900;position:absolute;left:50%;transform:translateX(-50%)}.ref-ball.high{top:34px}.ref-ground{width:80%;height:7px;border-radius:6px;background:#7fa6bd;margin-bottom:24px}.ref-ground.table{background:#e3a14c}.ref-card b{font-size:8px;color:#31536d;text-align:center}.ref-card span{font-size:10px;font-weight:900;color:#159b91;margin-top:3px}
.gravity-path{position:relative;background:radial-gradient(circle at 50% 30%,#f8fdff,#e5f0f8)}.path-start,.path-end{position:absolute;font-size:9px;font-weight:900;color:#31536d}.path-start{left:38px;top:45px}.path-end{right:38px;bottom:58px}.path-line{position:absolute;border:3px dashed;border-radius:50%}.path-line.p1{left:52px;top:64px;width:235px;height:120px;border-color:#159b91;border-top-color:transparent;border-left-color:transparent;transform:rotate(-8deg)}.path-line.p2{left:58px;top:57px;width:235px;height:145px;border-color:#e3a14c;border-bottom-color:transparent;border-right-color:transparent;transform:rotate(8deg)}.path-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.path-note b{color:#ffd08b}
.kinetic-energy{flex-direction:column;align-items:stretch}.ke-row{display:grid;grid-template-columns:28px 1fr 46px;align-items:center;gap:8px;padding:11px;border-radius:12px;background:rgba(255,255,255,.92)}.ke-row span{font-size:11px;font-weight:900;color:#31536d}.ke-bar{height:16px;border-radius:9px;background:linear-gradient(90deg,#159b91,#53c9ba)}.ke-bar.one{width:35%}.ke-bar.four{width:90%}.ke-row b{font-size:10px;color:#e45f50}.ke-note{display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.ke-note b{color:#ffd08b}.physics-stage.playing .ke-bar.one{animation:barOne 2.4s ease-in-out infinite}.physics-stage.playing .ke-bar.four{animation:barFour 2.4s ease-in-out infinite}@keyframes barOne{0%,100%{width:10%}50%{width:35%}}@keyframes barFour{0%,100%{width:20%}50%{width:90%}}
.work-energy{position:relative;flex-direction:column}.we-object{width:62px;height:52px;border-radius:8px;background:#e3a14c;color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center}.we-force{position:absolute;right:70px;top:75px;font-size:10px;color:#159b91;font-weight:900}.we-bars{display:flex;align-items:center;gap:10px}.we-bar{padding:8px 11px;border-radius:8px;background:#dff5ef;color:#118d84;font-size:9px;font-weight:900}.we-bar.end{background:#ffeadc;color:#d06a45}.we-arrow{font-size:8px;color:#31536d}.we-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.we-note b{color:#ffd08b}
.pendulum-energy{position:relative;background:radial-gradient(circle at 50% 30%,#f8fdff,#e5f0f8)}.pendulum-pivot{position:absolute;left:50%;top:32px;width:10px;height:10px;border-radius:50%;background:#31536d;transform:translateX(-50%)}.pendulum-rope{position:absolute;left:50%;top:37px;width:2px;height:120px;background:#6c91aa;transform-origin:top center;transform:rotate(30deg)}.pendulum-ball{position:absolute;left:50%;top:145px;transform:translateX(-50%) rotate(30deg);width:38px;height:38px;border-radius:50%;background:#e3a14c;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.pendulum-high{position:absolute;left:52px;top:70px;font-size:8px;color:#159b91}.pendulum-low{position:absolute;right:38px;bottom:54px;font-size:8px;color:#e45f50}.pendulum-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.pendulum-note b{color:#ffd08b}.physics-stage.playing .pendulum-rope{animation:swingRope 2.8s ease-in-out infinite}.physics-stage.playing .pendulum-ball{animation:swingBall 2.8s ease-in-out infinite}@keyframes swingRope{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-30deg)}}@keyframes swingBall{0%,100%{transform:translateX(-50%) rotate(30deg)}50%{transform:translateX(-50%) rotate(-30deg)}}
.energy-conservation{position:relative;background:radial-gradient(circle at 50% 30%,#f8fdff,#e5f0f8)}.coaster-track{position:absolute;left:36px;right:36px;top:56px;height:125px;border-bottom:5px solid #6c91aa;border-radius:50%;transform:rotate(-7deg)}.coaster-ball{position:absolute;width:28px;height:28px;border-radius:50%;background:#e3a14c;color:#fff;font-size:7px;display:grid;place-items:center;font-weight:900}.coaster-ball.top{left:65px;top:48px}.coaster-ball.bottom{right:82px;bottom:56px;background:#159b91}.energy-labels{position:absolute;left:18px;right:18px;top:145px;display:flex;justify-content:space-between;font-size:8px;color:#61798e}.energy-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.energy-note b{color:#ffd08b}
@media(max-width:420px){.potential-reference,.gravity-path,.pendulum-energy,.energy-conservation{padding:10px}.ref-card{height:194px}.ke-row{padding:9px}.work-energy{padding:10px}.coaster-track{left:28px;right:28px}.energy-labels{top:142px}}
/* wl3-01 to wl3-02 */
.charge-interaction{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:radial-gradient(circle at 50% 30%,#f8fdff,#e5f0f8)}.charge-card{width:50%;height:200px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.charge-pair{display:flex;gap:28px}.charge{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;font-weight:900}.charge.positive{background:#e45f50}.charge.negative{background:#4c8bb3}.charge-arrows{display:flex;justify-content:space-between;width:135px;font-size:24px;color:#31536d}.charge-card b{font-size:9px;color:#31536d}.charge-card span{font-size:8px;color:#7d91a2}.physics-stage.playing .charge-card .charge-pair{animation:chargeFloat 2.6s ease-in-out infinite}@keyframes chargeFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.charge-transfer{height:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;background:radial-gradient(circle at 50% 30%,#f8fdff,#e5f0f8);position:relative}.charge-ball{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.charge-ball.neutral{background:#7fa6bd}.charge-ball.negative{background:#4c8bb3}.electron-flow{font-size:12px;font-weight:900;color:#e45f50}.transfer-labels{position:absolute;left:18px;right:18px;top:120px;display:flex;justify-content:space-between;font-size:8px;color:#61798e}.transfer-note{position:absolute;left:12px;right:12px;bottom:10px;padding:8px 11px;border-radius:11px;background:#123b61;color:#ffd08b;font-size:9px;text-align:center}.physics-stage.playing .electron-flow{animation:electronMove 2.4s ease-in-out infinite}@keyframes electronMove{0%,100%{transform:translateX(-8px);opacity:.5}50%{transform:translateX(8px);opacity:1}}
.coulomb-force{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.coulomb-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:13px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.1)}.point-charge{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:900}.point-charge.positive{background:#e45f50}.point-charge.negative{background:#4c8bb3}.coulomb-arrows{display:flex;flex-direction:column;gap:16px;width:75px;text-align:center;font-size:9px;color:#31536d}.coulomb-row b{font-size:8px;color:#31536d;max-width:75px;text-align:center}.physics-stage.playing .coulomb-row:first-child .point-charge:first-child{animation:pushLeftSmall 2.4s ease-in-out infinite}.physics-stage.playing .coulomb-row:first-child .point-charge:last-of-type{animation:pushRightSmall 2.4s ease-in-out infinite}@keyframes pushLeftSmall{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}@keyframes pushRightSmall{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.coulomb-distance{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px;background:linear-gradient(145deg,#f8fcff,#e5f0f8)}.coulomb-distance-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:13px;background:rgba(255,255,255,.92)}.distance-line{height:2px;background:#8ba8ba;font-size:8px;color:#61798e;text-align:center;position:relative}.distance-line.one{width:80px}.distance-line.two{width:145px}.distance-line:after{content:"";position:absolute;left:0;right:0;bottom:4px;border-top:1px dashed #8ba8ba}.coulomb-distance-row b{font-size:11px;color:#e45f50}.distance-note{display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.distance-note b{color:#ffd08b}
@media(max-width:420px){.charge-interaction{gap:7px;padding:10px}.charge-card{height:194px}.charge-ball{width:82px;height:82px}.coulomb-force,.coulomb-distance{padding:10px}.coulomb-arrows{width:60px}}
/* wl3-03 to wl3-05 */
.electric-field,.field-sum,.shielding,.potential-energy,.equipotential{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.field-source{position:absolute;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900}.positive-source{left:50%;top:50%;transform:translate(-50%,-50%);background:#e45f50}.negative-source{left:32%;top:40%;background:#4c8bb3}.field-lines{position:absolute;inset:28px 50px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px;color:#159b91;font-size:22px;font-weight:900}.field-lines span{width:30px;text-align:center}.field-note,.field-sum .field-note,.shield-note,.pe-note,.equip-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:2}.field-note b,.shield-note b,.pe-note b,.equip-note b{color:#ffd08b}.physics-stage.playing .field-lines{animation:fieldPulse 2.4s ease-in-out infinite}@keyframes fieldPulse{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}
.field-vector{position:absolute;font-size:10px;font-weight:900}.field-vector.e1{right:65px;top:82px;color:#159b91}.field-vector.e2{left:73px;top:110px;color:#f0a337}.field-vector.er{right:80px;bottom:65px;color:#e45f50}.field-sum .field-note{z-index:2}
.shield-shell{width:130px;height:130px;border:8px solid #6c91aa;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;color:#31536d;font-size:12px;font-weight:900;box-shadow:0 0 0 10px rgba(76,139,179,.08)}.shield-field{position:absolute;font-size:22px;font-weight:900;color:#159b91}.shield-field.left{left:40px;top:75px}.shield-field.right{right:35px;top:75px}.shield-inside{position:absolute;color:#159b91;font-size:15px;font-weight:900;z-index:2}
.electrostatic-applications{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:linear-gradient(145deg,#f8fcff,#e5f0f8);position:relative}.app-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);position:relative;display:flex;align-items:center;justify-content:center;gap:12px}.smoke-particles{font-size:27px;color:#7d91a2;letter-spacing:-8px}.collector{width:25px;height:88px;border-radius:5px;background:#4c8bb3;color:#fff;font-size:7px;display:grid;place-items:center}.spray-gun{width:42px;height:28px;border-radius:6px;background:#e3a14c;color:#fff;font-size:7px;display:grid;place-items:center}.spray-target{width:43px;height:100px;border-radius:5px;background:#7fa6bd}.app-card b{position:absolute;bottom:13px;font-size:9px;color:#31536d}.app-note{position:absolute;left:12px;right:12px;bottom:10px;padding:7px 10px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}.app-card{height:175px}
.potential-energy .field-line-vertical{position:absolute;left:50%;top:45px;bottom:55px;width:3px;background:linear-gradient(180deg,#159b91,#e45f50)}.moving-charge{position:absolute;left:50%;top:90px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:#e45f50;color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}.pe-arrow{position:absolute;left:55%;top:73px;font-size:10px;font-weight:900;color:#159b91}.pe-label{position:absolute;font-size:9px;font-weight:900}.pe-label.high{left:28px;top:53px;color:#159b91}.pe-label.low{right:25px;bottom:68px;color:#e45f50}.physics-stage.playing .moving-charge{animation:chargeDownField 2.8s ease-in-out infinite}@keyframes chargeDownField{0%,100%{top:60px}50%{top:125px}}
.equipotential .field-arrows{position:absolute;left:38px;right:38px;top:38px;display:flex;justify-content:space-around;color:#159b91;font-size:20px}.equip-lines{position:absolute;left:35px;right:35px;top:75px;display:flex;flex-direction:column;gap:26px}.equip-lines i{display:block;height:2px;border-top:2px dashed #7ca6bc}
@media(max-width:420px){.shield-shell{width:120px;height:120px}.electric-field .field-lines{inset:24px 36px}.electrostatic-applications{gap:7px;padding:10px}.app-card{height:170px}}.equip-label{position:absolute;left:18px;font-size:9px;font-weight:900;z-index:2}.equip-label.high{top:36px;color:#159b91}.equip-label.low{bottom:54px;color:#e45f50}
/* wl3-06 to wl3-08 */
.potential-difference,.pd-path,.uniform-field,.field-voltage,.capacitor-charge,.capacitor-factors{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#f8fdff,#e5f0f8);overflow:hidden}.pd-point{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:12px}.pd-point.high{left:60px;top:55px;background:#e45f50}.pd-point.low{right:55px;bottom:65px;background:#4c8bb3}.pd-line{position:absolute;left:80px;top:80px;width:190px;height:2px;background:#8ba8ba;transform:rotate(20deg)}.pd-charge{position:absolute;left:48%;top:90px;width:32px;height:32px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.pd-arrow{position:absolute;left:55%;top:73px;color:#e45f50;font-size:9px;font-weight:900}.pd-formula,.pd-path-note,.uniform-note,.fv-note,.cap-note,.factor-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:2}.pd-formula b,.pd-path-note b,.uniform-note b{color:#ffd08b}.physics-stage.playing .pd-charge{animation:pdMove 2.6s ease-in-out infinite}@keyframes pdMove{0%,100%{transform:translate(-20px,0)}50%{transform:translate(45px,25px)}}
.pd-path .pd-path-line{position:absolute;border:3px dashed;border-radius:50%}.pd-path-line.one{left:75px;top:80px;width:210px;height:100px;border-color:#159b91;border-top-color:transparent;transform:rotate(-5deg)}.pd-path-line.two{left:75px;top:80px;width:210px;height:140px;border-color:#e3a14c;border-bottom-color:transparent;transform:rotate(5deg)}
.uniform-field .field-plate{position:absolute;left:45px;right:45px;height:9px;border-radius:5px;background:#6c91aa;color:#fff;font-size:8px;text-align:center}.uniform-field .top-plate{top:55px;background:#e45f50}.uniform-field .bottom-plate{bottom:65px;background:#4c8bb3}.uniform-arrows{position:absolute;inset:75px 70px;display:flex;justify-content:space-around;color:#159b91;font-size:22px}.uniform-distance{position:absolute;right:38px;top:110px;color:#31536d;font-size:10px;font-weight:900}
.field-voltage{gap:10px;padding:14px}.fv-card{width:50%;height:198px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.fv-plates{width:100px;height:100px;border-left:8px solid #e45f50;border-right:8px solid #4c8bb3;position:relative;display:grid;place-items:center;color:#31536d;font-size:16px;font-weight:900}.fv-plates.far{height:125px}.fv-plates.near{height:62px}.fv-plates i{font-style:normal;position:absolute;right:-17px}.fv-card b{font-size:9px;color:#31536d}.fv-note{justify-content:center;color:#ffd08b}
.capacitor-charge{background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8)}.cap-plate{position:absolute;top:58px;bottom:65px;width:16px;border-radius:5px;display:flex;align-items:flex-start;justify-content:center;color:#fff;font-size:9px;font-weight:900;padding-top:8px}.cap-plate.left{left:35%;background:#e45f50}.cap-plate.right{right:35%;background:#4c8bb3}.cap-field{position:absolute;left:41%;right:41%;top:90px;display:flex;justify-content:space-around;color:#159b91;font-size:18px}.cap-note{justify-content:center;color:#ffd08b}
.capacitor-factors{gap:8px;padding:14px}.factor-card{width:33%;height:190px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.factor-plate{width:70px;height:100px;border-left:6px solid #e45f50;border-right:6px solid #4c8bb3}.factor-plate.wide{width:92px;height:85px}.factor-plate.close{width:55px;height:100px}.factor-plate.dielectric{background:rgba(227,161,76,.28);border-color:#e3a14c}.factor-card b{font-size:9px;color:#31536d}.factor-card span{font-size:10px;font-weight:900;color:#159b91}.factor-note{justify-content:center;color:#ffd08b;z-index:2}
@media(max-width:420px){.potential-difference,.pd-path,.capacitor-charge{padding:10px}.field-voltage{padding:10px}.fv-card{height:192px}.capacitor-factors{gap:5px;padding:10px}.factor-card{height:184px}.factor-plate{width:60px}.factor-plate.wide{width:80px}}
/* wl3-09 charged particles */
.charged-acceleration,.charged-deflection{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.accel-plate{position:absolute;top:56px;bottom:66px;width:15px;border-radius:5px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:12px}.accel-plate.left-plate{left:68px;background:#e45f50}.accel-plate.right-plate{right:68px;background:#4c8bb3}.accel-field{position:absolute;left:45%;top:75px;color:#159b91;font-size:11px;font-weight:900}.accel-charge{position:absolute;left:120px;top:112px;width:36px;height:36px;border-radius:50%;background:#e3a14c;color:#fff;font-size:10px;display:grid;place-items:center;font-weight:900}.accel-path{position:absolute;left:150px;top:129px;width:105px;height:2px;background:#159b91}.accel-note,.deflect-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.accel-note b,.deflect-note b{color:#ffd08b}.physics-stage.playing .accel-charge{animation:chargeAccel 2.6s ease-in-out infinite}@keyframes chargeAccel{0%,100%{transform:translateX(-15px)}50%{transform:translateX(80px)}}
.deflect-plate{position:absolute;left:56px;right:56px;height:9px;border-radius:5px;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center}.deflect-plate.top{top:58px;background:#e45f50}.deflect-plate.bottom{bottom:70px;background:#4c8bb3}.deflect-entry{position:absolute;left:55px;top:105px;font-size:10px;font-weight:900;color:#31536d}.deflect-path{position:absolute;left:82px;top:94px;width:185px;height:70px;border-top:2px dashed #159b91;border-radius:50%;transform:rotate(-7deg)}.deflect-particle{position:absolute;left:95px;top:104px;width:28px;height:28px;border-radius:50%;background:#e45f50;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.deflect-exit{position:absolute;right:25px;top:50px;font-size:8px;color:#61798e}.physics-stage.playing .deflect-particle{animation:deflectParticle 2.8s ease-in-out infinite}@keyframes deflectParticle{0%,20%{left:95px;top:104px;opacity:.7}70%,100%{left:250px;top:53px;opacity:1}}
@media(max-width:420px){.accel-plate.left-plate{left:55px}.accel-plate.right-plate{right:55px}.deflect-plate{left:45px;right:45px}.deflect-path{width:175px}.deflect-exit{right:15px}}
/* wl3-10 to wl3-11 */
.current-flow,.emf-source,.resistance-factors,.resistance-law{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.circuit-loop{width:230px;height:130px;border:4px solid #6c91aa;border-radius:18px}.battery-symbol{position:absolute;left:50%;top:79px;transform:translateX(-50%);padding:5px 9px;border-radius:6px;background:#e3a14c;color:#fff;font-size:9px;font-weight:900}.current-arrow{position:absolute;right:85px;top:52px;color:#159b91;font-size:11px;font-weight:900}.electron-arrow{position:absolute;left:85px;bottom:52px;color:#e45f50;font-size:11px;font-weight:900}.current-note,.emf-note,.law-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.current-note b,.emf-note b{color:#ffd08b}.physics-stage.playing .electron-arrow{animation:electronFlow 2.4s ease-in-out infinite}@keyframes electronFlow{0%,100%{transform:translateX(7px);opacity:.55}50%{transform:translateX(-7px);opacity:1}}
.emf-battery{width:90px;height:55px;border-radius:8px;background:linear-gradient(180deg,#e3a14c,#d57f42);display:grid;place-items:center;color:#fff;font-weight:900;font-size:10px}.emf-force{position:absolute;left:55%;top:81px;font-size:10px;color:#159b91;font-weight:900}.emf-charge{position:absolute;left:48%;top:113px;width:30px;height:30px;border-radius:50%;background:#e45f50;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:900}.emf-energy{position:absolute;right:26px;top:52px;padding:6px 9px;border-radius:9px;background:#fff;color:#31536d;font-size:9px}.physics-stage.playing .emf-charge{animation:emfMove 2.6s ease-in-out infinite}@keyframes emfMove{0%,100%{transform:translate(-28px,15px)}50%{transform:translate(68px,-25px)}}
.resistance-factors{gap:10px;padding:14px}.res-card{width:50%;height:196px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.wire{height:12px;border-radius:6px;background:linear-gradient(180deg,#e3a14c,#c47a3e)}.wire.long{width:140px}.wire.thick{width:80px;height:24px}.res-card b{font-size:9px;color:#31536d;text-align:center}
.resistance-law .wire-3d{width:220px;height:12px;border-radius:8px;background:linear-gradient(180deg,#e3a14c,#bb6e39);transform:rotate(-5deg)}.law-dim{position:absolute;font-size:10px;font-weight:900;color:#31536d}.law-dim.length{left:75px;top:105px}.law-dim.area{right:92px;top:87px}.law-formula{position:absolute;top:55px;left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:10px;background:#123b61;color:#fff;font-size:14px;font-weight:900;display:flex;flex-direction:column;align-items:center}.law-formula small{font-size:8px;color:#ffd08b;font-weight:600}.law-note{justify-content:center;color:#ffd08b}
@media(max-width:420px){.resistance-factors{gap:7px;padding:10px}.res-card{height:190px}.wire.long{width:120px}.resistance-law .wire-3d{width:200px}}
/* wl3-12 to wl3-13 */
.series-circuit,.parallel-circuit,.resistivity-setup,.resistivity-calc{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.circuit-box,.parallel-box{position:relative;width:260px;height:150px;border:4px solid #6c91aa;border-radius:18px}.series-res{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:28px;border-radius:5px;background:#e3a14c;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.series-res.r1{left:65px}.series-res.r2{right:65px}.series-battery,.parallel-battery{position:absolute;left:50%;top:-16px;transform:translateX(-50%);padding:5px 10px;border-radius:6px;background:#123b61;color:#fff;font-size:8px}.series-note,.parallel-note,.setup-note,.calc-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.series-note b,.parallel-note b,.setup-note b,.calc-note b{color:#ffd08b}.physics-stage.playing .series-res{animation:resPulse 2s ease-in-out infinite}@keyframes resPulse{0%,100%{box-shadow:0 0 0 0 rgba(227,161,76,.1)}50%{box-shadow:0 0 0 6px rgba(227,161,76,.16)}}
.parallel-branch{position:absolute;left:50%;transform:translateX(-50%);width:150px;height:32px;border:4px solid #6c91aa;border-radius:14px;background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:8px;color:#31536d;font-weight:900}.parallel-branch.one{top:26px}.parallel-branch.two{bottom:26px}.parallel-wire.main{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#6c91aa;transform:translateX(-50%)}
.resistivity-setup .metal-wire{position:absolute;left:45px;right:45px;top:92px;height:8px;border-radius:4px;background:linear-gradient(180deg,#e3a14c,#b96b38)}.wire-clamp{position:absolute;top:77px;width:14px;height:38px;border-radius:4px;background:#123b61}.wire-clamp.left{left:70px}.wire-clamp.right{right:70px}.meter-box{position:absolute;left:35px;top:30px;padding:6px 9px;border-radius:8px;background:#fff;color:#31536d;font-size:8px}.micrometer{position:absolute;right:30px;top:28px;padding:6px 9px;border-radius:8px;background:#4c8bb3;color:#fff;font-size:8px}.physics-stage.playing .metal-wire{animation:wireGlow 2.4s ease-in-out infinite}@keyframes wireGlow{0%,100%{opacity:.65}50%{opacity:1}}
.resistivity-calc{flex-direction:column;gap:6px}.calc-step{padding:8px 13px;border-radius:9px;background:rgba(255,255,255,.92);color:#31536d;font-size:10px;font-weight:900}.calc-step.result{background:#123b61;color:#ffd08b}.calc-arrow{color:#159b91;font-size:17px}.calc-note{margin-top:4px}
@media(max-width:420px){.circuit-box,.parallel-box{width:240px}.resistivity-setup .meter-box{left:24px}.micrometer{right:20px}}
/* wl3-14 multimeter */
.multimeter-panel,.ohmmeter-measure{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.meter-body{width:150px;height:190px;border-radius:18px;background:#2f526c;border:7px solid #213d54;display:flex;flex-direction:column;align-items:center;padding:10px}.meter-display{width:110px;height:58px;border-radius:7px;background:#dff0e7;display:flex;align-items:center;justify-content:space-around;color:#23445c;font-weight:900;font-size:13px}.meter-knob{width:52px;height:52px;margin-top:12px;border-radius:50%;background:#e3a14c;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:900}.meter-ticks{display:flex;gap:7px;margin-top:8px}.meter-ticks i{width:2px;height:8px;background:#9fb4c4}.meter-probe{position:absolute;font-size:9px;font-weight:900}.meter-probe.red{right:45px;top:52px;color:#e45f50}.meter-probe.black{left:45px;bottom:55px;color:#31536d}.meter-note,.ohm-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.meter-note b,.ohm-note b{color:#ffd08b}.physics-stage.playing .meter-knob{animation:knobTurn 2.6s ease-in-out infinite}@keyframes knobTurn{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(25deg)}}
.ohmmeter-measure{flex-direction:column;gap:7px}.ohm-zero-box,.ohm-resistor,.ohm-result{padding:10px 15px;border-radius:10px;background:#fff;color:#31536d;font-size:10px;font-weight:900}.ohm-resistor{background:#e3a14c;color:#fff}.ohm-result{background:#123b61;color:#ffd08b}.ohm-arrow{color:#159b91;font-size:17px}.physics-stage.playing .ohm-resistor{animation:ohmPulse 2.2s ease-in-out infinite}@keyframes ohmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media(max-width:420px){.meter-body{width:140px;height:184px}.meter-probe.red{right:30px}.meter-probe.black{left:30px}}
/* wl3-15 to wl3-16 */
.electric-power,.motor-energy,.closed-circuit,.terminal-voltage{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.power-bulb{width:80px;height:80px;border-radius:50%;background:#f5c75c;box-shadow:0 0 25px rgba(245,199,92,.45);color:#8f5a1d;font-size:12px;display:grid;place-items:center;font-weight:900}.power-formula{position:absolute;right:55px;top:60px;padding:7px 10px;border-radius:9px;background:#123b61;color:#fff;font-weight:900}.power-bars{position:absolute;left:55px;bottom:65px;display:flex;align-items:center;gap:7px;font-size:9px;color:#31536d}.power-bars i{width:30px;height:8px;border-radius:4px;background:#159b91}.power-note,.motor-note,.closed-note,.uv-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.power-note b,.motor-note b,.closed-note b,.uv-note b{color:#ffd08b}.physics-stage.playing .power-bulb{animation:bulbGlow 2.2s ease-in-out infinite}@keyframes bulbGlow{0%,100%{box-shadow:0 0 18px rgba(245,199,92,.35)}50%{box-shadow:0 0 38px rgba(245,199,92,.65)}}
.motor-energy{flex-direction:column;gap:10px}.motor-shape{width:82px;height:82px;border-radius:50%;border:7px solid #4c8bb3;color:#31536d;display:grid;place-items:center;font-size:24px;font-weight:900}.motor-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;font-size:9px;color:#31536d;font-weight:900}.motor-flow span{padding:6px 9px;border-radius:8px;background:#fff}.motor-flow b{color:#159b91}.motor-note{position:absolute}
.closed-loop{width:230px;height:140px;border:4px solid #6c91aa;border-radius:18px}.emf-box{position:absolute;left:50%;top:60px;transform:translateX(-50%);padding:7px 10px;border-radius:6px;background:#e3a14c;color:#fff;font-size:9px;font-weight:900}.external-r{position:absolute;right:42px;top:105px;color:#31536d;font-size:10px;font-weight:900}.closed-current{position:absolute;left:70px;top:94px;color:#159b91;font-size:10px;font-weight:900}.closed-note{position:absolute}
.terminal-voltage{flex-direction:column;padding:10px 14px}.terminal-voltage svg{width:100%;height:215px}.uv-line{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round}.physics-stage.playing .uv-line{animation:uvDraw 2.4s ease-out infinite}@keyframes uvDraw{0%{stroke-dasharray:260;stroke-dashoffset:260}55%,100%{stroke-dasharray:260;stroke-dashoffset:0}}.uv-note{position:absolute}
@media(max-width:420px){.power-formula{right:30px}.power-bars{left:30px}.closed-loop{width:210px}.terminal-voltage svg{height:205px}}.electric-power-formula{position:absolute;right:55px;top:60px;padding:7px 10px;border-radius:9px;background:#123b61;color:#fff;font-weight:900}
/* wl3-17 to wl3-18 */
.emf-setup,.emf-graph,.energy-flow,.energy-sources{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.emf-circuit{width:230px;height:135px;border:4px solid #6c91aa;border-radius:18px}.emf-battery-small{position:absolute;left:50%;top:67px;transform:translateX(-50%);padding:6px 10px;border-radius:7px;background:#e3a14c;color:#fff;font-size:9px;font-weight:900}.emf-meter{position:absolute;right:45px;top:50px;width:32px;height:32px;border-radius:50%;background:#fff;color:#159b91;display:grid;place-items:center;font-weight:900}.emf-ammeter{position:absolute;left:45px;top:50px;width:32px;height:32px;border-radius:50%;background:#fff;color:#e45f50;display:grid;place-items:center;font-weight:900}.emf-rheostat{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);font-size:8px;color:#526f86}.emf-setup-note,.emf-graph-note,.energy-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.emf-setup-note b,.emf-graph-note b,.energy-note b{color:#ffd08b}.physics-stage.playing .emf-meter{animation:meterPulse 2s ease-in-out infinite}@keyframes meterPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.emf-graph{flex-direction:column;padding:10px 14px}.emf-graph svg{width:100%;height:215px}.emf-line{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round}.physics-stage.playing .emf-line{animation:emfDraw 2.4s ease-out infinite}@keyframes emfDraw{0%{stroke-dasharray:260;stroke-dashoffset:260}55%,100%{stroke-dasharray:260;stroke-dashoffset:0}}.emf-graph-note{position:absolute}
.energy-flow{flex-direction:column;gap:8px}.energy-input,.energy-outputs span{padding:9px 13px;border-radius:9px;background:#fff;color:#31536d;font-size:10px;font-weight:900}.energy-arrow{font-size:20px;color:#159b91}.energy-outputs{display:flex;gap:12px}.energy-outputs span:first-child{background:#dff5ef;color:#118d84}.energy-outputs span:last-child{background:#ffeadc;color:#d06a45}.energy-note{position:absolute}
.energy-sources{gap:10px;padding:14px}.source-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.source-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;background:#7fa6bd}.source-card.renewable .source-icon{background:#e3a14c}.source-card b{font-size:9px;color:#31536d}.source-card span{font-size:8px;color:#7d91a2}.source-note{position:absolute;left:12px;right:12px;bottom:10px;padding:7px 10px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}
@media(max-width:420px){.emf-circuit{width:215px}.emf-meter{right:35px}.emf-ammeter{left:35px}.energy-sources{gap:7px;padding:10px}.source-card{height:184px}}
/* wl3-19 to wl3-20 */
.magnet-lines,.current-field,.magnetic-flux,.flux-angle{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.bar-magnet{width:150px;height:46px;border-radius:6px;display:flex;overflow:hidden;box-shadow:0 8px 18px rgba(18,59,97,.14)}.bar-magnet span{flex:1;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:900}.north{background:#e45f50}.south{background:#4c8bb3}.field-curve{position:absolute;border:2px dashed #159b91;border-radius:50%}.field-curve.c1{width:250px;height:120px}.field-curve.c2{width:220px;height:80px}.field-curve.c3{width:290px;height:160px}.magnet-note,.current-field-note,.flux-angle-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.magnet-note b,.current-field-note b,.flux-angle-note b{color:#ffd08b}.physics-stage.playing .field-curve{animation:fieldFlow 2.6s ease-in-out infinite}@keyframes fieldFlow{0%,100%{opacity:.45}50%{opacity:1}}
.straight-wire{width:5px;height:150px;border-radius:4px;background:#e3a14c}.wire-current{position:absolute;top:38px;right:105px;color:#e45f50;font-size:11px;font-weight:900}.field-circle{position:absolute;border:2px dashed #159b91;border-radius:50%}.field-circle.one{width:80px;height:80px}.field-circle.two{width:145px;height:145px}.field-circle.three{width:215px;height:215px}.physics-stage.playing .field-circle{animation:circlePulse 2.4s ease-in-out infinite}@keyframes circlePulse{0%,100%{opacity:.4}50%{opacity:1}}
.magnetic-flux .flux-surface{width:85px;height:145px;border:4px solid #4c8bb3;border-radius:7px;background:rgba(255,255,255,.65);color:#31536d;display:grid;place-items:center;font-weight:900}.flux-arrows{position:absolute;top:39px;display:flex;gap:34px;color:#159b91;font-size:19px}.flux-formula{position:absolute;right:43px;top:64px;padding:8px 11px;border-radius:9px;background:#123b61;color:#fff;font-weight:900;display:flex;flex-direction:column;align-items:center}.flux-formula small{font-size:8px;color:#ffd08b;font-weight:600}
.flux-angle .coil-surface{width:120px;height:105px;border:4px solid #4c8bb3;border-radius:7px;background:rgba(255,255,255,.6);transform:rotate(-25deg)}.coil-normal{position:absolute;left:50%;top:42px;transform:translateX(-50%) rotate(-25deg);font-size:9px;color:#31536d}.angle-field{position:absolute;right:42px;top:55px;color:#159b91;font-size:11px;font-weight:900}.angle-mark{position:absolute;left:50%;top:91px;color:#e45f50;font-size:10px;font-weight:900}.flux-angle-note{position:absolute}
@media(max-width:420px){.field-curve.c3{width:270px}.field-circle.three{width:200px;height:200px}.flux-formula{right:25px}}
/* wl3-21 to wl3-22 */
.induction-magnet,.flux-change,.lenz-magnet,.lenz-coil{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.induction-coil{width:105px;height:135px;border:8px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:9px;font-weight:900}.induction-magnet-bar,.lenz-magnet-bar{position:absolute;right:48px;top:83px;padding:9px 15px;border-radius:7px;background:linear-gradient(90deg,#e45f50 50%,#4c8bb3 50%);color:#fff;font-weight:900;font-size:12px}.induction-arrow,.lenz-arrow{position:absolute;font-size:10px;font-weight:900}.induction-arrow.in{right:98px;top:57px;color:#e45f50}.induction-arrow.out{right:98px;bottom:68px;color:#159b91}.induction-note,.lenz-note,.lenz-coil-note{position:absolute;left:12px;right:12px;bottom:10px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;text-align:center}.lenz-note b,.lenz-coil-note b{color:#ffd08b}.physics-stage.playing .induction-magnet-bar{animation:magnetIn 2.8s ease-in-out infinite}@keyframes magnetIn{0%,100%{transform:translateX(38px)}50%{transform:translateX(-35px)}}
.flux-change{gap:10px;padding:14px}.flux-change-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.flux-symbol{font-size:24px;font-weight:900;color:#e45f50}.flux-symbol.down{color:#4c8bb3}.flux-change-card b{font-size:9px;color:#31536d}.flux-change-card span{font-size:8px;color:#7d91a2}.flux-change-note{position:absolute;left:12px;right:12px;bottom:10px;padding:7px 10px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}
.lenz-arrow.approach{right:96px;top:58px;color:#e45f50}.lenz-arrow.leave{right:96px;bottom:68px;color:#159b91}.lenz-field{position:absolute;left:85px;top:95px;color:#159b91;font-size:9px;font-weight:900}.physics-stage.playing .lenz-magnet-bar{animation:lenzMove 2.8s ease-in-out infinite}@keyframes lenzMove{0%,100%{transform:translateX(34px)}50%{transform:translateX(-32px)}}
.lenz-loop{width:150px;height:120px;border:7px solid #4c8bb3;border-radius:50%}.shrink-arrow{position:absolute;top:44px;color:#e45f50;font-size:20px;font-weight:900}.lenz-field-arrow{position:absolute;left:45px;bottom:83px;color:#159b91;font-size:9px;font-weight:900}.lenz-coil-note{position:absolute}
@media(max-width:420px){.flux-change{gap:7px;padding:10px}.flux-change-card{height:184px}.induction-magnet-bar,.lenz-magnet-bar{right:36px}.induction-arrow.in,.induction-arrow.out,.lenz-arrow.approach,.lenz-arrow.leave{right:80px}}
/* wl3-23 to wl3-24 */
.faraday-law,.rod-cutting,.em-wave,.em-spectrum{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.faraday-coil{width:115px;height:130px;border:8px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:10px;font-weight:900}.faraday-change{position:absolute;left:55px;top:62px;color:#e45f50;font-size:10px;font-weight:900}.faraday-time{position:absolute;right:48px;top:62px;color:#159b91;font-size:10px;font-weight:900}.faraday-formula{position:absolute;right:35px;top:118px;padding:7px 10px;border-radius:9px;background:#123b61;color:#fff;font-weight:900;font-size:12px}.faraday-note,.rod-note,.wave-note,.spectrum-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.faraday-note b,.rod-note b,.wave-note b,.spectrum-note b{color:#ffd08b}.physics-stage.playing .faraday-coil{animation:coilPulse 2.4s ease-in-out infinite}@keyframes coilPulse{0%,100%{box-shadow:0 0 0 0 rgba(76,139,179,.05)}50%{box-shadow:0 0 0 8px rgba(76,139,179,.12)}}
.rod-rail{position:absolute;left:55px;right:55px;height:5px;background:#6c91aa}.rod-rail.top{top:70px}.rod-rail.bottom{bottom:70px}.cut-rod{position:absolute;left:50%;top:70px;bottom:70px;width:6px;border-radius:4px;background:#e3a14c}.rod-velocity{position:absolute;left:52%;top:40px;color:#159b91;font-size:10px;font-weight:900}.rod-B{position:absolute;right:70px;top:88px;color:#31536d;font-size:12px;font-weight:900}.rod-formula{position:absolute;right:55px;bottom:55px;padding:7px 10px;border-radius:9px;background:#123b61;color:#fff;font-weight:900}.physics-stage.playing .cut-rod{animation:rodMove 2.6s ease-in-out infinite}@keyframes rodMove{0%,100%{transform:translateX(-35px)}50%{transform:translateX(35px)}}
.em-wave .wave-axis{width:250px;height:2px;background:#8ba8ba}.wave-e{position:absolute;left:90px;top:55px;color:#e45f50;font-size:18px;font-weight:900}.wave-b{position:absolute;right:90px;bottom:55px;color:#159b91;font-size:18px;font-weight:900}.wave-prop{position:absolute;right:35px;top:55px;color:#31536d;font-size:10px;font-weight:900}.physics-stage.playing .wave-e{animation:waveFloat 2.2s ease-in-out infinite}.physics-stage.playing .wave-b{animation:waveFloat 2.2s ease-in-out infinite reverse}@keyframes waveFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
.em-spectrum{flex-direction:column;gap:10px;padding:14px}.spectrum-bar{display:flex;width:100%;height:53px;border-radius:10px;overflow:hidden;font-size:7px;font-weight:900}.spectrum-bar span{display:grid;place-items:center;color:#fff;text-align:center}.spectrum-bar span:nth-child(1){flex:1.4;background:#4c8bb3}.spectrum-bar span:nth-child(2){flex:1;background:#7fa6bd}.spectrum-bar span:nth-child(3){flex:.7;background:#e3a14c}.spectrum-bar span:nth-child(4){flex:.7;background:#d98055}.spectrum-bar span:nth-child(5){flex:.8;background:#e45f50}.spectrum-axis{font-size:8px;color:#61798e}.spectrum-note{position:absolute}
@media(max-width:420px){.faraday-change{left:35px}.faraday-time{right:30px}.faraday-formula{right:20px}.rod-rail{left:45px;right:45px}.spectrum-bar{height:49px}}
/* wl4-01 to wl4-02 */
.momentum-vector,.momentum-change,.impulse-graph,.cushion-effect{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.momentum-ball{width:72px;height:72px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900}.momentum-arrow,.momentum-p-arrow{position:absolute;font-size:11px;font-weight:900}.momentum-arrow{right:85px;top:85px;color:#159b91}.momentum-p-arrow{left:85px;bottom:75px;color:#e45f50}.momentum-note,.momentum-change-note,.impulse-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.momentum-note b,.momentum-change-note b,.impulse-note b{color:#ffd08b}
.wall-shape{position:absolute;right:60px;top:58px;bottom:70px;width:15px;border-radius:4px;background:#6c91aa}.ball-before{position:absolute;left:70px;top:73px;font-size:11px;font-weight:900;color:#159b91}.ball-after{position:absolute;left:70px;bottom:70px;font-size:11px;font-weight:900;color:#e45f50}.delta-p{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#fff;font-size:11px;font-weight:900}.momentum-change-note{position:absolute}
.impulse-graph{flex-direction:column;padding:10px 14px}.impulse-graph svg{width:100%;height:215px}.impulse-area{fill:rgba(21,155,145,.18);stroke:none}.impulse-line{stroke:#159b91;stroke-width:4;stroke-linecap:round}.impulse-note{position:absolute}.physics-stage.playing .impulse-area{animation:areaBreathe 2.4s ease-in-out infinite}@keyframes areaBreathe{0%,100%{opacity:.55}50%{opacity:1}}
.cushion-effect{gap:10px;padding:14px}.cushion-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.impact-time{font-size:18px;font-weight:900;color:#e45f50}.cushion-card.soft .impact-time{color:#159b91}.cushion-card b{font-size:9px;color:#31536d}.cushion-card span{font-size:8px;color:#7d91a2}.cushion-note{position:absolute;left:12px;right:12px;bottom:10px;padding:7px 10px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}
@media(max-width:420px){.momentum-arrow{right:55px}.momentum-p-arrow{left:55px}.wall-shape{right:40px}.cushion-effect{gap:7px;padding:10px}.cushion-card{height:184px}}
/* wl4-03 to wl4-04 */
.conservation-carts,.recoil,.momentum-experiment,.momentum-data{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.cart{position:absolute;width:78px;height:42px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.cart.left{left:65px;background:#e3a14c}.cart.right{right:65px;background:#4c8bb3}.collision-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#e45f50;font-size:10px;font-weight:900}.conservation-note,.recoil-note,.momentum-exp-note,.data-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.conservation-note b,.recoil-note b,.momentum-exp-note b,.data-note b{color:#ffd08b}.physics-stage.playing .cart.left{animation:cartLeftMove 2.6s ease-in-out infinite}.physics-stage.playing .cart.right{animation:cartRightMove 2.6s ease-in-out infinite}@keyframes cartLeftMove{0%,100%{transform:translateX(0)}50%{transform:translateX(55px)}}@keyframes cartRightMove{0%,100%{transform:translateX(0)}50%{transform:translateX(-55px)}}
.recoil-cart,.recoil-gas{position:absolute;padding:9px 13px;border-radius:9px;color:#fff;font-size:10px;font-weight:900}.recoil-cart{left:100px;top:80px;background:#e3a14c}.recoil-gas{right:70px;bottom:80px;background:#4c8bb3}.recoil-zero{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#159b91;font-size:16px;font-weight:900}.recoil-note{position:absolute}
.air-track{position:absolute;left:45px;right:45px;top:110px;height:7px;border-radius:4px;background:#8fa9bb}.exp-cart-one,.exp-cart-two{position:absolute;top:76px;width:60px;height:30px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:900}.exp-cart-one{left:80px;background:#e3a14c}.exp-cart-two{right:80px;background:#4c8bb3}.photo-gate{position:absolute;top:47px;padding:5px 7px;border-radius:6px;background:#123b61;color:#fff;font-size:7px}.photo-gate.g1{left:92px}.photo-gate.g2{right:92px}.momentum-exp-note{position:absolute}
.momentum-data{flex-direction:column;gap:7px;padding:14px}.data-row{width:100%;display:flex;justify-content:space-between;padding:12px 14px;border-radius:11px;background:rgba(255,255,255,.92);font-size:9px;color:#31536d}.data-row b{color:#159b91}.data-arrow{color:#e45f50;font-size:18px;font-weight:900}.data-note{position:absolute}
@media(max-width:420px){.cart.left{left:45px}.cart.right{right:45px}.air-track{left:32px;right:32px}.exp-cart-one{left:65px}.exp-cart-two{right:65px}}
/* wl4-05 to wl4-06 */
.collision-types,.elastic-collision,.recoil-cannon,.rocket-momentum{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.collision-types{gap:10px;padding:14px}.collision-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}.collision-balls{font-size:22px;color:#e45f50}.collision-card b{font-size:9px;color:#31536d}.collision-note,.elastic-note,.cannon-note,.rocket-note{position:absolute;left:12px;right:12px;bottom:10px;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;display:flex;justify-content:space-between}.collision-note{justify-content:center;color:#ffd08b}.elastic-note b,.cannon-note b,.rocket-note b{color:#ffd08b}
.elastic-collision{flex-direction:column;gap:10px}.elastic-row{display:flex;gap:22px;padding:10px 15px;border-radius:10px;background:#fff;font-size:15px;font-weight:900;color:#31536d}.elastic-arrow{color:#e45f50;font-size:11px;font-weight:900}.elastic-note{position:absolute}
.recoil-cannon .cannon-body{width:105px;height:48px;border-radius:9px;background:#4c8bb3;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:900}.cannon-shell{position:absolute;right:60px;top:80px;color:#e45f50;font-size:11px;font-weight:900}.cannon-recoil{position:absolute;left:53px;bottom:83px;color:#159b91;font-size:11px;font-weight:900}.cannon-note{position:absolute}.physics-stage.playing .cannon-body{animation:recoilBack 2.4s ease-in-out infinite}@keyframes recoilBack{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
.rocket-momentum .rocket-body{width:58px;height:105px;border-radius:48% 48% 15% 15%;background:linear-gradient(180deg,#f5f7fa,#b9cedd);color:#31536d;display:grid;place-items:center;font-size:10px;font-weight:900}.rocket-flame{position:absolute;bottom:85px;color:#e45f50;font-size:10px;font-weight:900}.rocket-up{position:absolute;top:60px;right:65px;color:#159b91;font-size:11px;font-weight:900}.rocket-note{position:absolute}.physics-stage.playing .rocket-body{animation:rocketUp 2.6s ease-in-out infinite}@keyframes rocketUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:420px){.collision-types{gap:7px;padding:10px}.collision-card{height:184px}.cannon-shell{right:35px}.cannon-recoil{left:35px}.rocket-up{right:45px}}
/* wl4-07 to wl4-08 */
.spring-oscillator,.shm-graph,.shm-parameters,.shm-phase{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.spring-ceiling{position:absolute;left:50%;top:38px;width:95px;height:5px;background:#6c91aa;transform:translateX(-50%)}.spring-coil-v{position:absolute;left:50%;top:43px;width:5px;height:90px;background:repeating-linear-gradient(180deg,#4c8bb3 0 8px,transparent 8px 14px);transform:translateX(-50%)}.spring-mass{position:absolute;left:50%;top:133px;transform:translateX(-50%);width:46px;height:46px;border-radius:8px;background:#e3a14c;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:900}.equilibrium-line{position:absolute;left:80px;right:80px;top:156px;height:2px;border-top:2px dashed #7ca6bc}.spring-force{position:absolute;left:52%;top:104px;color:#e45f50;font-size:9px;font-weight:900}.spring-osc-note,.shm-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.spring-osc-note b,.shm-note b{color:#ffd08b}.physics-stage.playing .spring-mass{animation:springBob 2.6s ease-in-out infinite}.physics-stage.playing .spring-coil-v{animation:springStretchV 2.6s ease-in-out infinite}@keyframes springBob{0%,100%{transform:translateX(-50%) translateY(-12px)}50%{transform:translateX(-50%) translateY(18px)}}@keyframes springStretchV{0%,100%{height:78px}50%{height:108px}}
.shm-graph{flex-direction:column;padding:10px 14px}.shm-graph svg{width:100%;height:215px}.shm-curve{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round}.physics-stage.playing .shm-curve{animation:shmDraw 2.6s ease-out infinite}@keyframes shmDraw{0%{stroke-dasharray:260;stroke-dashoffset:260}55%,100%{stroke-dasharray:260;stroke-dashoffset:0}}.shm-note{position:absolute}
.shm-parameters{gap:10px;padding:14px}.param-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.param-line{width:120px;height:55px;border-left:4px solid #e45f50;border-right:4px solid #e45f50;display:grid;place-items:center;font-size:18px;font-weight:900;color:#31536d}.param-line.period{height:40px;border-color:#159b91}.param-card b{font-size:9px;color:#31536d}.param-card span{font-size:8px;color:#7d91a2}.param-note{position:absolute;left:12px;right:12px;bottom:10px;padding:7px 10px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}
.shm-phase .phase-curve{position:absolute;left:35px;right:35px;height:70px;border-top:3px dashed;border-radius:50%;transform:rotate(5deg)}.phase-curve.one{top:55px;border-color:#159b91}.phase-curve.two{top:95px;border-color:#e3a14c;transform:rotate(-5deg)}.phase-note{position:absolute;left:50%;top:130px;transform:translateX(-50%);font-size:8px;color:#61798e;white-space:nowrap}.phase-formula{position:absolute;right:40px;top:50px;padding:7px 10px;border-radius:9px;background:#123b61;color:#fff;font-size:11px;font-weight:900}
@media(max-width:420px){.spring-ceiling{width:80px}.equilibrium-line{left:60px;right:60px}.shm-parameters{gap:7px;padding:10px}.param-card{height:184px}.param-line{width:100px}}
/* wl4-09 to wl4-10 */
.shm-restoring,.shm-energy,.pendulum-force,.pendulum-period{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.shm-axis{position:absolute;left:65px;right:65px;top:130px;height:2px;border-top:2px dashed #7ca6bc}.shm-mass{width:55px;height:55px;border-radius:8px;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}.shm-force{position:absolute;right:55px;top:75px;color:#e45f50;font-size:10px;font-weight:900}.shm-accel{position:absolute;left:55px;bottom:75px;color:#159b91;font-size:10px;font-weight:900}.shm-restoring-note,.pend-note,.period-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.shm-restoring-note b,.pend-note b,.period-note b{color:#ffd08b}
.shm-energy{gap:10px;padding:14px}.energy-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.energy-bar{width:75px;height:75px;border-radius:50%;background:conic-gradient(#e45f50 0 70%,#f4c3b7 70%)}.energy-bar.ep{background:conic-gradient(#159b91 0 30%,#c6e8e2 30%)}.energy-card b{font-size:9px;color:#31536d}.energy-total{position:absolute;left:12px;right:12px;bottom:10px;padding:7px 10px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}
.pend-pivot{position:absolute;left:50%;top:42px;width:8px;height:8px;border-radius:50%;background:#31536d;transform:translateX(-50%)}.pend-rope{position:absolute;left:50%;top:48px;width:2px;height:120px;background:#6c91aa;transform-origin:top center;transform:rotate(18deg)}.pend-ball{position:absolute;left:50%;top:158px;transform:translateX(-50%) rotate(18deg);width:38px;height:38px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.pend-force{position:absolute;right:58px;bottom:80px;color:#e45f50;font-size:9px;font-weight:900}.physics-stage.playing .pend-rope{animation:pendSwing 2.7s ease-in-out infinite}.physics-stage.playing .pend-ball{animation:pendBallSwing 2.7s ease-in-out infinite}@keyframes pendSwing{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}@keyframes pendBallSwing{0%,100%{transform:translateX(-50%) rotate(18deg)}50%{transform:translateX(-50%) rotate(-18deg)}}
.pendulum-period{gap:10px;padding:14px}.period-card{width:50%;height:185px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#31536d}.period-card.long{background:#e5f3fa;color:#159b91}.period-formula{position:absolute;right:45px;top:55px;padding:7px 10px;border-radius:9px;background:#123b61;color:#fff;font-size:11px;font-weight:900}.period-note{position:absolute}
@media(max-width:420px){.shm-energy,.pendulum-period{gap:7px;padding:10px}.period-card{height:178px}.period-formula{right:20px}}
/* wl4-11 to wl4-12 */
.pendulum-experiment,.pendulum-graph,.wave-formation,.wave-parameters{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.pend-exp-rope{position:absolute;left:50%;top:44px;width:2px;height:115px;background:#6c91aa;transform-origin:top center;transform:rotate(12deg)}.pend-exp-ball{position:absolute;left:50%;top:153px;width:38px;height:38px;border-radius:50%;background:#e3a14c;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.pend-exp-ruler{position:absolute;left:52px;top:74px;color:#31536d;font-size:11px;font-weight:900}.pend-exp-timer{position:absolute;right:45px;top:50px;padding:7px 10px;border-radius:8px;background:#123b61;color:#fff;font-size:9px;font-weight:900}.pend-exp-note,.lt-note,.wave-note,.wave-params-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.pend-exp-note b,.lt-note b,.wave-note b,.wave-params-note b{color:#ffd08b}.physics-stage.playing .pend-exp-rope{animation:pendExpSwing 2.8s ease-in-out infinite}@keyframes pendExpSwing{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-12deg)}}
.pendulum-graph{flex-direction:column;padding:10px 14px}.pendulum-graph svg{width:100%;height:215px}.lt-line{fill:none;stroke:#159b91;stroke-width:4;stroke-linecap:round}.physics-stage.playing .lt-line{animation:ltDraw 2.4s ease-out infinite}@keyframes ltDraw{0%{stroke-dasharray:260;stroke-dashoffset:260}55%,100%{stroke-dasharray:260;stroke-dashoffset:0}}.lt-note{position:absolute}
.wave-source{position:absolute;left:55px;top:65px;padding:7px 10px;border-radius:8px;background:#e3a14c;color:#fff;font-size:9px;font-weight:900}.wave-particles{position:absolute;left:115px;right:55px;top:90px;display:flex;justify-content:space-between}.wave-particles i{width:15px;height:15px;border-radius:50%;background:#4c8bb3;display:block}.wave-particles i:nth-child(1){transform:translateY(22px)}.wave-particles i:nth-child(2){transform:translateY(0)}.wave-particles i:nth-child(3){transform:translateY(-22px)}.wave-particles i:nth-child(4){transform:translateY(0)}.wave-particles i:nth-child(5){transform:translateY(22px)}.wave-particles i:nth-child(6){transform:translateY(0)}.wave-front{position:absolute;right:32px;bottom:60px;font-size:9px;color:#159b91;font-weight:900}.physics-stage.playing .wave-particles i{animation:particleBob 2s ease-in-out infinite}.physics-stage.playing .wave-particles i:nth-child(2n){animation-delay:.2s}.physics-stage.playing .wave-particles i:nth-child(3n){animation-delay:.4s}@keyframes particleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.wave-parameters{flex-direction:column;gap:6px}.wave-sine{width:260px;height:95px;border-top:3px dashed #159b91;border-radius:50%;transform:rotate(2deg)}.lambda-mark{font-size:16px;font-weight:900;color:#e45f50}.wave-speed{font-size:11px;font-weight:900;color:#31536d}.wave-params-note{position:absolute}
@media(max-width:420px){.wave-sine{width:235px}.wave-particles{left:100px;right:40px}.pend-exp-ruler{left:35px}.pend-exp-timer{right:25px}}
/* wl4-13 to wl4-14 */
.wave-description,.wave-graph,.wave-reflection,.wave-diffraction{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.lambda-wave{width:260px;height:95px;border-top:4px solid #159b91;border-radius:50%;transform:rotate(1deg)}.lambda-label{position:absolute;top:85px;color:#e45f50;font-size:18px;font-weight:900}.period-label{position:absolute;right:45px;top:58px;color:#31536d;font-size:10px;font-weight:900}.wave-desc-note,.wave-graph-note,.reflection-note,.diffract-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.wave-desc-note b,.wave-graph-note b,.reflection-note b,.diffract-note b{color:#ffd08b}
.wave-graph .wave-graph-x{position:absolute;right:35px;bottom:60px;font-size:11px;font-weight:900;color:#31536d}.wave-graph-y{position:absolute;left:35px;top:35px;font-size:11px;font-weight:900;color:#31536d}.wave-graph-curve{width:265px;height:95px;border-top:4px dashed #159b91;border-radius:50%;transform:rotate(2deg)}.wave-graph-arrow{position:absolute;right:40px;top:55px;color:#e45f50;font-size:9px;font-weight:900}.physics-stage.playing .wave-graph-curve{animation:waveShift 2.4s ease-in-out infinite}@keyframes waveShift{0%,100%{transform:translateX(-8px) rotate(2deg)}50%{transform:translateX(8px) rotate(2deg)}}
.wave-reflection .interface-line{position:absolute;left:35px;right:35px;top:120px;height:3px;background:#8ba8ba}.incident-ray{position:absolute;left:95px;top:52px;color:#159b91;font-size:10px;font-weight:900;transform:rotate(35deg)}.reflected-ray{position:absolute;right:80px;bottom:75px;color:#e45f50;font-size:10px;font-weight:900;transform:rotate(-35deg)}.normal-line{position:absolute;left:50%;top:55px;height:120px;border-left:2px dashed #7ca6bc}.reflection-note{position:absolute}
.wave-diffraction .barrier{position:absolute;top:50px;bottom:65px;width:16px;background:#6c91aa}.wave-diffraction .barrier.left{left:110px}.wave-diffraction .barrier.right{right:110px}.diffract-wave{position:absolute;left:70px;top:63px;color:#159b91;font-size:16px;font-weight:900}.diffract-arrow{position:absolute;right:45px;bottom:70px;color:#e45f50;font-size:9px;font-weight:900}.diffract-note{position:absolute}
@media(max-width:420px){.lambda-wave,.wave-graph-curve{width:235px}.wave-diffraction .barrier.left{left:95px}.wave-diffraction .barrier.right{right:95px}}
/* wl4-15 to wl4-16 */
.wave-superposition,.interference-pattern,.doppler-source,.doppler-spectrum{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.wave-superposition{gap:10px;padding:14px}.super-wave{width:50%;height:170px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#31536d}.super-wave.two{background:#e8f5fa;color:#159b91}.super-result{padding:8px 12px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:9px;font-weight:900}.super-note,.interference-note,.doppler-note,.shift-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.super-note b,.interference-note b,.doppler-note b,.shift-note b{color:#ffd08b}
.interference-pattern .source-dot{position:absolute;width:34px;height:34px;border-radius:50%;background:#4c8bb3;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.source-dot.s1{left:75px;top:75px}.source-dot.s2{right:75px;top:75px}.interference-lines{position:absolute;left:80px;right:80px;top:100px;bottom:65px;display:flex;justify-content:space-around}.interference-lines i{width:2px;height:100%;border-left:2px dashed #159b91}.interference-note{position:absolute}.physics-stage.playing .interference-lines{animation:interferencePulse 2.4s ease-in-out infinite}@keyframes interferencePulse{0%,100%{opacity:.5}50%{opacity:1}}
.doppler-source-dot{width:70px;height:70px;border-radius:50%;background:#e3a14c;color:#fff;font-size:10px;display:grid;place-items:center;font-weight:900}.doppler-wave{position:absolute;left:45px;top:95px;color:#159b91;font-size:24px;font-weight:900}.doppler-observer{position:absolute;right:55px;top:100px;width:55px;height:55px;border-radius:50%;background:#4c8bb3;color:#fff;font-size:8px;display:grid;place-items:center;font-weight:900}.doppler-arrow{position:absolute;right:125px;top:58px;color:#e45f50;font-size:9px;font-weight:900}.doppler-note{position:absolute}.physics-stage.playing .doppler-source-dot{animation:sourceApproach 2.6s ease-in-out infinite}@keyframes sourceApproach{0%,100%{transform:translateX(-25px)}50%{transform:translateX(25px)}}
.doppler-spectrum .spectrum-shift{position:absolute;width:110px;height:70px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}.spectrum-shift.blue{left:55px;top:75px;background:#4c8bb3}.spectrum-shift.red{right:55px;bottom:75px;background:#e45f50}.spectrum-arrow{color:#31536d;font-size:10px;font-weight:900}.shift-note{position:absolute}
@media(max-width:420px){.source-dot.s1{left:55px}.source-dot.s2{right:55px}.doppler-observer{right:35px}.doppler-arrow{right:100px}.doppler-spectrum .spectrum-shift.blue{left:35px}.doppler-spectrum .spectrum-shift.red{right:35px}}
/* wl4-17 to wl4-18 */
.light-refraction,.refractive-index,.total-reflection,.optical-fiber{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.interface-horizontal{position:absolute;left:35px;right:35px;top:125px;height:3px;background:#8ba8ba}.normal-vertical{position:absolute;left:50%;top:50px;bottom:50px;border-left:2px dashed #7ca6bc}.incident-light{position:absolute;left:90px;top:60px;color:#159b91;font-size:10px;font-weight:900;transform:rotate(35deg)}.refracted-light{position:absolute;right:85px;bottom:65px;color:#e45f50;font-size:10px;font-weight:900;transform:rotate(-25deg)}.refraction-note,.ri-note,.tr-note,.fiber-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.refraction-note b,.ri-note b,.tr-note b,.fiber-note b{color:#ffd08b}
.refractive-index{flex-direction:column;gap:10px}.ri-formula{padding:8px 14px;border-radius:10px;background:#123b61;color:#fff;font-size:16px;font-weight:900}.ri-bars{display:flex;align-items:center;gap:8px;font-size:9px;color:#31536d}.ri-bars i{width:55px;height:9px;border-radius:5px;background:#159b91}
.ri-note{position:absolute}
.total-reflection .tr-incident{position:absolute;left:80px;top:58px;color:#159b91;font-size:10px;font-weight:900;transform:rotate(35deg)}.tr-reflected{position:absolute;right:75px;bottom:70px;color:#e45f50;font-size:10px;font-weight:900;transform:rotate(-35deg)}.tr-angle{position:absolute;left:50%;top:79px;transform:translateX(-50%);color:#e45f50;font-size:11px;font-weight:900}.tr-note{position:absolute}
.optical-fiber .fiber-core{width:280px;height:78px;border-radius:35px;background:linear-gradient(180deg,#dff1f8,#9fc6d8);border:4px solid #4c8bb3}.fiber-ray{position:absolute;width:230px;height:2px;background:#e45f50}.fiber-ray.one{transform:rotate(12deg)}.fiber-ray.two{transform:rotate(-12deg)}.fiber-label{position:absolute;left:50%;top:58px;transform:translateX(-50%);font-size:9px;font-weight:900;color:#31536d}.fiber-note{position:absolute}
@media(max-width:420px){.optical-fiber .fiber-core{width:250px}.fiber-ray{width:205px}.refracted-light{right:60px}.tr-reflected{right:55px}}.total-reflection .tr-incident{left:75px;top:auto;bottom:78px;transform:rotate(-35deg)}.total-reflection .tr-reflected{right:70px;bottom:78px;transform:rotate(35deg)}
/* wl4-19 to wl4-20 */
.double-slit,.interference-fringes,.single-slit-diffraction,.diffraction-pattern{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.slit-screen{position:absolute;left:90px;top:55px;bottom:65px;width:52px;background:#31536d;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:72px}.slit-screen i{width:17px;height:6px;background:#fff;border-radius:3px}.light-rays{position:absolute;left:140px;top:95px;width:120px;height:95px;border-top:2px solid #e45f50;border-bottom:2px solid #e45f50;transform:skewX(-25deg)}.screen-fringes{position:absolute;right:55px;top:55px;bottom:65px;width:32px;background:repeating-linear-gradient(180deg,#e45f50 0 5px,#fff 5px 12px)}.double-slit-note,.single-slit-note,.diff-pattern-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.double-slit-note b,.single-slit-note b,.diff-pattern-note b{color:#ffd08b}
.interference-fringes{flex-direction:column;gap:25px}.fringe-bar{width:280px;height:34px}.fringe-bar.mono{background:repeating-linear-gradient(90deg,#e45f50 0 8px,#fff 8px 18px)}.fringe-bar.white{background:repeating-linear-gradient(90deg,#e45f50 0 8px,#f5b354 8px 16px,#3fa66b 16px 24px,#4c8bb3 24px 32px,#8f63b8 32px 40px,#fff 40px 52px)}.interference-fringes b,.interference-fringes span{position:absolute;left:20px;font-size:9px;color:#31536d}.interference-fringes b{top:87px}.interference-fringes span{top:165px}
.single-slit{position:absolute;left:85px;top:45px;bottom:65px;width:46px;background:#31536d;border-radius:5px}.single-slit:after{content:"";position:absolute;left:18px;top:50%;width:10px;height:20px;background:#fff;border-radius:5px;transform:translateY(-50%)}.diffraction-spread{position:absolute;left:140px;top:62px;color:#e45f50;font-size:10px;font-weight:900}.single-slit-screen{position:absolute;right:55px;top:55px;bottom:65px;width:28px;background:linear-gradient(180deg,#fff 0 10%,#4c8bb3 10% 24%,#fff 24% 36%,#4c8bb3 36% 42%,#fff 42% 58%,#4c8bb3 58% 64%,#fff 64% 76%,#4c8bb3 76% 90%,#fff 90%)}.single-slit-note{position:absolute}
.diffraction-pattern{flex-direction:column}.diff-pattern{display:flex;align-items:center;justify-content:center;gap:8px;height:120px}.diff-pattern i{display:block;height:95px;width:5px;background:#4c8bb3;opacity:.55}.diff-pattern i.center{height:120px;width:20px;opacity:1}.physics-stage.playing .diff-pattern i{animation:diffPulse 2.3s ease-in-out infinite}@keyframes diffPulse{0%,100%{opacity:.45}50%{opacity:1}}.diff-pattern-note{position:absolute}
@media(max-width:420px){.slit-screen{left:70px}.light-rays{left:115px;width:105px}.screen-fringes{right:35px}.single-slit{left:65px}.single-slit-screen{right:35px}.fringe-bar{width:250px}}
/* wl4-21 to wl4-22 */
.light-polarization,.polarizer-angle,.laser-emission,.laser-applications{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.natural-light,.polarized-light{padding:10px 14px;border-radius:9px;background:#fff;color:#31536d;font-size:10px;font-weight:900}.polarized-light{background:#e5f3fa;color:#159b91}.polarizer-plate{position:absolute;width:48px;height:120px;border-radius:6px;background:#31536d;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:900}.natural-light{position:absolute;left:55px}.polarized-light{position:absolute;right:55px}.polarization-note,.polarizer-note,.laser-emission-note,.laser-app-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.polarization-note b,.polarizer-note b,.laser-emission-note b,.laser-app-note b{color:#ffd08b}
.polarizer-angle .polarizer{width:85px;height:115px;border-radius:12px;background:#4c8bb3;color:#fff;font-size:12px;display:grid;place-items:center;font-weight:900}.polarizer-angle .polarizer.two{margin-left:45px;transform:rotate(35deg);background:#7fa6bd}.polarizer-arrow{position:absolute;left:50%;top:50%;color:#e45f50;font-size:12px;font-weight:900}.polarizer-note{position:absolute}
.laser-emission .atom-excited{position:absolute;left:95px;top:78px;width:85px;height:85px;border-radius:50%;background:#e3a14c;color:#fff;font-size:10px;display:grid;place-items:center;font-weight:900}.photon-in{position:absolute;left:35px;top:78px;color:#159b91;font-size:11px;font-weight:900}.photon-out{position:absolute;right:35px;bottom:75px;color:#e45f50;font-size:11px;font-weight:900}.laser-amplify{position:absolute;right:60px;top:72px;color:#31536d;font-size:9px;font-weight:900}.laser-emission-note{position:absolute}
.laser-applications{gap:8px;padding:14px}.laser-app-card{width:25%;height:150px;border-radius:12px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.1);display:grid;place-items:center;font-size:10px;color:#31536d;font-weight:900}.laser-app-note{position:absolute}
@media(max-width:420px){.natural-light{left:30px}.polarized-light{right:30px}.polarizer-angle .polarizer{width:70px;height:108px}.laser-emission .atom-excited{left:70px}.laser-applications{gap:5px;padding:10px}.laser-app-card{height:142px}}
/* wl5-01 to wl5-02 */
.ampere-force,.ampere-angle,.lorentz-force,.lorentz-circle{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}.ampere-wire{width:190px;height:9px;border-radius:5px;background:#e3a14c;color:#31536d;font-size:10px;font-weight:900;display:grid;place-items:center}.ampere-field{position:absolute;left:55px;top:55px;color:#159b91;font-size:14px;font-weight:900}.ampere-arrow{position:absolute;right:65px;bottom:70px;color:#e45f50;font-size:16px;font-weight:900}.ampere-note,.angle-note,.lorentz-note,.circle-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px}.ampere-note b,.angle-note b,.lorentz-note b,.circle-note b{color:#ffd08b}.physics-stage.playing .ampere-wire{animation:ampereSlide 2.4s ease-in-out infinite}@keyframes ampereSlide{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
.ampere-angle{flex-direction:column;gap:25px}.angle-wire{width:220px;padding:10px 12px;border-radius:9px;background:#e3a14c;color:#fff;font-size:10px;font-weight:900;text-align:center}.angle-wire.parallel{transform:rotate(0)}.angle-wire.perpendicular{transform:rotate(90deg) scale(.8)}.angle-note{position:absolute}
.lorentz-field{position:absolute;left:55px;top:58px;color:#159b91;font-size:14px;font-weight:900}.lorentz-charge{width:48px;height:48px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}.lorentz-velocity{position:absolute;right:80px;top:85px;color:#159b91;font-size:11px;font-weight:900}.lorentz-arrow{position:absolute;left:65px;bottom:70px;color:#e45f50;font-size:15px;font-weight:900}.lorentz-note{position:absolute}
.circle-field{position:absolute;left:55px;top:55px;color:#159b91;font-size:14px;font-weight:900}.circle-track{width:180px;height:180px;border:2px dashed #7ca6bc;border-radius:50%}.circle-charge{position:absolute;right:110px;top:52px;width:34px;height:34px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}.circle-velocity{position:absolute;right:60px;top:52px;color:#159b91;font-size:9px;font-weight:900}.circle-force{position:absolute;left:75px;top:65px;color:#e45f50;font-size:9px;font-weight:900}.circle-note{position:absolute}
@media(max-width:420px){.ampere-angle{gap:20px}.angle-wire{width:190px}.circle-track{width:160px;height:160px}.circle-charge{right:95px}.circle-velocity{right:40px}}.ampere-angle{flex-direction:row;gap:10px;padding:14px}.ampere-angle-card{width:50%;height:190px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative}.wire-demo{background:#e3a14c;color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center;border-radius:5px}.wire-demo.vertical{width:10px;height:105px}.wire-demo.horizontal{width:105px;height:10px}.b-demo{font-size:11px;font-weight:900;color:#159b91}.ampere-angle-card b{font-size:9px;color:#31536d}.ampere-angle .angle-note{position:absolute;left:12px;right:12px;bottom:10px;justify-content:center;padding:8px 11px;border-radius:11px;background:#123b61;color:#ffd08b;font-size:8px;text-align:center}
/* wl5-03 to wl5-04 */
.charge-circular,.radius-period,.mass-spectrometer,.cyclotron{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.charge-circular .charge-track{width:178px;height:178px;border:2px dashed #7ca6bc;border-radius:50%;position:relative;box-shadow:inset 0 0 24px rgba(76,139,179,.08)}
.charge-circular .charge-track:after{content:"B ⊗";position:absolute;left:14px;top:15px;color:#159b91;font-size:13px;font-weight:900}
.charge-dot{position:absolute;left:50%;top:50%;width:36px;height:36px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;box-shadow:0 5px 14px rgba(227,161,76,.35);z-index:2}
.charge-velocity{position:absolute;right:37px;top:63px;color:#159b91;font-size:10px;font-weight:900;transform:rotate(-18deg)}
.charge-force{position:absolute;left:49px;bottom:72px;color:#e45f50;font-size:10px;font-weight:900}
.charge-circle-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:4}
.charge-circle-note b{color:#ffd08b}
.physics-stage.playing .charge-dot{animation:chargeOrbit 4.2s linear infinite}
@keyframes chargeOrbit{from{transform:translate(-50%,-50%) rotate(0deg) translateX(86px)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(86px)}}
.radius-period{gap:10px;padding:14px}
.radius-card{width:50%;height:190px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden}
.radius-card b{font-size:9px;color:#31536d;text-align:center;padding:0 8px}
.radius-circle{border:3px solid #159b91;border-radius:50%;background:rgba(21,155,145,.06);box-shadow:inset 0 0 0 8px rgba(21,155,145,.03)}
.radius-circle.small{width:78px;height:78px}
.radius-circle.large{width:122px;height:122px;margin:-22px 0}
.radius-card:nth-child(2):after{content:"T = 2πm/(qB)";position:absolute;bottom:12px;font-size:8px;font-weight:900;color:#e45f50}
.physics-stage.playing .radius-circle.small{animation:radiusPulse 2.8s ease-in-out infinite}
.physics-stage.playing .radius-circle.large{animation:radiusPulse 2.8s ease-in-out infinite .35s}
@keyframes radiusPulse{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.04);opacity:1}}
.mass-spectrometer .selector-box{position:absolute;left:26px;top:58px;width:94px;height:48px;border:2px solid #4c8bb3;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#31536d;font-size:9px;font-weight:900;z-index:2}
.selector-fields{position:absolute;left:34px;top:116px;width:78px;padding:7px 4px;border-radius:8px;background:#e7f3f8;color:#159b91;font-size:9px;font-weight:900;text-align:center}
.analysis-field{position:absolute;right:30px;top:54px;width:126px;height:184px;border:2px solid #8ba8ba;border-left:0;border-radius:0 92px 92px 0;background:linear-gradient(90deg,rgba(76,139,179,.06),rgba(76,139,179,.13));color:#31536d;font-size:9px;font-weight:900;padding:24px 12px;text-align:center}
.mass-hits{position:absolute;right:57px;width:29px;height:29px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900;box-shadow:0 4px 10px rgba(227,161,76,.3);z-index:3}
.mass-hits.one{top:105px;background:#e3a14c}
.mass-hits.two{top:158px;background:#4c8bb3}
.mass-note,.cyclotron-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}
.mass-note b,.cyclotron-note b{color:#ffd08b}
.physics-stage.playing .mass-hits.one{animation:massHitOne 2.8s ease-in-out infinite}
.physics-stage.playing .mass-hits.two{animation:massHitTwo 2.8s ease-in-out infinite .2s}
@keyframes massHitOne{0%,100%{transform:translateX(-10px);opacity:.7}50%{transform:translateX(8px);opacity:1}}
@keyframes massHitTwo{0%,100%{transform:translateX(-10px);opacity:.7}50%{transform:translateX(8px);opacity:1}}
.cyclotron .cyclotron-dee{position:absolute;top:58px;width:116px;height:178px;border:3px solid #4c8bb3;background:rgba(76,139,179,.08);color:#31536d;font-size:12px;font-weight:900;display:flex;align-items:flex-start;justify-content:center;padding-top:15px}
.cyclotron-dee.left{left:38px;border-radius:100px 0 0 100px;border-right:0}
.cyclotron-dee.right{right:38px;border-radius:0 100px 100px 0;border-left:0}
.cyclotron-gap{position:absolute;left:50%;top:67px;transform:translateX(-50%);writing-mode:vertical-rl;color:#e45f50;font-size:8px;font-weight:900;letter-spacing:.12em;z-index:3}
.cyclotron-path{position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);border:2px dashed rgba(21,155,145,.62);border-radius:50%}
.cyclotron-path:after{content:"q⁺";position:absolute;right:8px;top:24px;width:27px;height:27px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900;box-shadow:0 4px 10px rgba(227,161,76,.3)}
.physics-stage.playing .cyclotron-path{animation:cyclotronSpin 5s linear infinite}
.physics-stage.playing .cyclotron-gap{animation:gapPulse 1.2s ease-in-out infinite}
@keyframes cyclotronSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes gapPulse{0%,100%{color:#e45f50;opacity:.65}50%{color:#159b91;opacity:1}}
@media(max-width:420px){.charge-circular .charge-track{width:160px;height:160px}.charge-dot{width:32px;height:32px}.charge-velocity{right:28px;top:58px}.charge-force{left:42px;bottom:67px}.radius-card{height:180px}.radius-circle.large{width:112px;height:112px}.mass-spectrometer .selector-box{left:18px;width:86px}.selector-fields{left:26px;width:72px}.analysis-field{right:18px;width:116px}.mass-hits{right:49px}.cyclotron .cyclotron-dee{width:105px;height:170px}.cyclotron-dee.left{left:28px}.cyclotron-dee.right{right:28px}.cyclotron-path{width:178px;height:178px}}

/* wl5-05 to wl5-06 */
.lenz-direction,.lenz-energy,.faraday-rate,.rod-emf{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.lenz-direction{gap:10px;padding:14px}
.lenz-state{width:50%;height:190px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.lenz-state-ring{width:92px;height:92px;border:5px solid #4c8bb3;border-radius:50%;position:relative;background:rgba(76,139,179,.06)}
.lenz-state-ring span{position:absolute;left:50%;top:50%;width:44px;height:44px;border:2px dashed #e45f50;border-radius:50%;transform:translate(-50%,-50%)}
.lenz-state.grow .lenz-state-ring:after{content:"B感";position:absolute;left:50%;top:-18px;transform:translateX(-50%);color:#e45f50;font-size:8px;font-weight:900}
.lenz-state.shrink .lenz-state-ring:after{content:"B感";position:absolute;left:50%;top:-18px;transform:translateX(-50%);color:#159b91;font-size:8px;font-weight:900}
.lenz-state b{font-size:10px;color:#31536d}.lenz-state em{font-size:14px;font-style:normal;font-weight:900;color:#e45f50}.lenz-state.shrink em{color:#159b91}.lenz-state-result{font-size:8px;color:#6a8093;font-weight:800}
.lenz-direction-note,.lenz-energy-note,.faraday-rate-note,.rod-emf-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.lenz-direction-note b,.lenz-energy-note b,.faraday-rate-note b,.rod-emf-note b{color:#ffd08b}
.physics-stage.playing .lenz-state.grow .lenz-state-ring{animation:lenzGrow 2.8s ease-in-out infinite}.physics-stage.playing .lenz-state.shrink .lenz-state-ring{animation:lenzShrink 2.8s ease-in-out infinite}.physics-stage.playing .lenz-state.grow .lenz-state-ring span{animation:induceReverse 2.8s ease-in-out infinite}.physics-stage.playing .lenz-state.shrink .lenz-state-ring span{animation:induceSame 2.8s ease-in-out infinite}@keyframes lenzGrow{0%,100%{transform:scale(.9)}50%{transform:scale(1.03)}}@keyframes lenzShrink{0%,100%{transform:scale(1.03)}50%{transform:scale(.9)}}@keyframes induceReverse{0%,100%{border-color:#e45f50;transform:translate(-50%,-50%) rotate(0)}50%{border-color:#159b91;transform:translate(-50%,-50%) rotate(180deg)}}@keyframes induceSame{0%,100%{border-color:#159b91;transform:translate(-50%,-50%) rotate(0)}50%{border-color:#e45f50;transform:translate(-50%,-50%) rotate(180deg)}}
.lenz-energy .lenz-energy-coil{width:100px;height:130px;border:8px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:10px;font-weight:900;position:absolute;left:37px;top:72px}
.lenz-energy-magnet{position:absolute;right:50px;top:88px;width:94px;height:38px;border-radius:6px;display:flex;overflow:hidden;box-shadow:0 5px 14px rgba(32,76,120,.16)}.lenz-energy-magnet span{flex:1;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.lenz-energy-magnet span:first-child{background:#e45f50}.lenz-energy-magnet span:last-child{background:#4c8bb3}.lenz-energy-arrow{position:absolute;font-size:9px;font-weight:900}.lenz-energy-arrow.repel{right:47px;top:43px;color:#e45f50}.lenz-energy-arrow.attract{right:47px;bottom:65px;color:#159b91}.lenz-energy-flow{position:absolute;left:50%;top:53px;transform:translateX(-50%);padding:7px 12px;border-radius:99px;background:#fff;color:#31536d;font-size:9px;font-weight:900;box-shadow:0 4px 12px rgba(32,76,120,.1)}.lenz-energy-flow b{color:#e45f50}.lenz-energy-note{position:absolute}.physics-stage.playing .lenz-energy-magnet{animation:magnetHesitate 3s ease-in-out infinite}@keyframes magnetHesitate{0%,100%{transform:translateX(0)}45%{transform:translateX(-25px)}55%{transform:translateX(15px)}}
.faraday-rate svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.faraday-fast,.faraday-slow{position:absolute;right:18px;padding:4px 7px;border-radius:7px;font-size:8px;font-weight:900;color:#fff}.faraday-fast{top:46px;background:#e45f50}.faraday-slow{top:135px;background:#159b91}.faraday-rate-formula{position:absolute;left:30px;bottom:62px;padding:8px 12px;border-radius:10px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.faraday-rate-note{position:absolute}.physics-stage.playing .faraday-fast{animation:rateFlash 1.4s ease-in-out infinite}.physics-stage.playing .faraday-slow{animation:rateFlash 2.2s ease-in-out infinite reverse}@keyframes rateFlash{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.rod-emf .rod-badge{position:absolute;left:28px;top:52px;color:#159b91;font-size:13px;font-weight:900}.rod-rail-line{position:absolute;left:64px;right:55px;height:5px;background:#6c91aa;border-radius:3px}.rod-rail-line.top{top:82px}.rod-rail-line.bottom{bottom:78px}.rod-mover{position:absolute;top:81px;bottom:77px;left:50%;width:8px;border-radius:5px;background:#e3a14c;box-shadow:0 0 0 3px rgba(227,161,76,.14)}.rod-mover span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#31536d;font-size:9px;font-weight:900}.rod-speed{position:absolute;left:55%;top:50px;color:#e45f50;font-size:11px;font-weight:900}.rod-current{position:absolute;right:54px;bottom:58px;color:#159b91;font-size:9px;font-weight:900}.rod-formula-badge{position:absolute;left:72px;bottom:57px;padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.rod-emf-note{position:absolute}.physics-stage.playing .rod-mover{animation:rodScan 2.6s ease-in-out infinite}@keyframes rodScan{0%,100%{transform:translateX(-42px)}50%{transform:translateX(42px)}}
@media(max-width:420px){.lenz-state{height:180px}.lenz-state-ring{width:82px;height:82px}.lenz-energy .lenz-energy-coil{left:28px;width:88px;height:120px}.lenz-energy-magnet{right:38px}.rod-rail-line{left:54px;right:45px}.rod-formula-badge{left:58px}.faraday-rate-formula{left:22px}}

/* wl5-07 to wl5-08 */
.eddy-current,.damping-drive,.mutual-induction,.self-induction{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.eddy-magnet{position:absolute;left:50%;top:45px;transform:translateX(-50%);width:112px;height:34px;border-radius:6px;display:flex;overflow:hidden;box-shadow:0 5px 14px rgba(32,76,120,.18);z-index:2}.eddy-magnet span{flex:1;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:900}.eddy-magnet span:first-child{background:#e45f50}.eddy-magnet span:last-child{background:#4c8bb3}
.eddy-plate{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:238px;height:122px;border-radius:14px;background:linear-gradient(135deg,#dcebf1,#b9d4df);border:2px solid #8ba8ba;box-shadow:inset 0 0 20px rgba(49,83,109,.1)}
.eddy-loop{position:absolute;border:3px dashed #e45f50;border-radius:50%;opacity:.75}.eddy-loop.one{width:74px;height:42px;left:24px;top:28px;transform:rotate(12deg)}.eddy-loop.two{width:54px;height:48px;left:92px;top:40px;transform:rotate(-16deg);border-color:#159b91}.eddy-loop.three{width:62px;height:36px;right:22px;top:55px;transform:rotate(18deg);border-color:#e3a14c}
.eddy-heat{position:absolute;right:29px;top:103px;color:#e45f50;font-size:9px;font-weight:900}.eddy-brake{position:absolute;left:35px;bottom:53px;color:#159b91;font-size:9px;font-weight:900}
.eddy-current-note,.damping-drive-note,.mi-note,.si-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.eddy-current-note b,.damping-drive-note b,.mi-note b,.si-note b{color:#ffd08b}
.physics-stage.playing .eddy-loop.one{animation:eddyPulse 1.8s ease-in-out infinite}.physics-stage.playing .eddy-loop.two{animation:eddyPulse 2.2s ease-in-out infinite reverse}.physics-stage.playing .eddy-loop.three{animation:eddyPulse 2.6s ease-in-out infinite .2s}@keyframes eddyPulse{0%,100%{opacity:.35;transform:scale(.92) rotate(10deg)}50%{opacity:1;transform:scale(1.05) rotate(-6deg)}}
.damping-drive{gap:10px;padding:14px}.dd-card{width:50%;height:190px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:22px;gap:5px}.dd-card b{font-size:10px;color:#31536d}.dd-card em{font-size:8px;font-style:normal;color:#6a8093;text-align:center;padding:0 7px}.dd-plate{position:absolute;left:50%;top:35px;transform:translateX(-50%);width:118px;height:70px;border-radius:10px;background:#b9d4df;border:2px solid #8ba8ba}.dd-magnet{position:absolute;right:18px;top:55px;width:50px;height:24px;border-radius:4px;background:linear-gradient(90deg,#e45f50 50%,#4c8bb3 50%);color:#fff;font-size:7px;display:flex;align-items:center;justify-content:space-around;z-index:3}.dd-force{position:absolute;left:30px;top:112px;color:#e45f50;font-size:8px;font-weight:900}.dd-disk{position:absolute;left:50%;top:28px;transform:translateX(-50%);width:92px;height:92px;border-radius:50%;border:4px solid #8ba8ba;background:repeating-conic-gradient(#dcebf1 0 12deg,#b9d4df 12deg 24deg)}.dd-rotor{position:absolute;left:50%;top:49px;transform:translateX(-50%);width:45px;height:45px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900;z-index:3}.damping-drive-note{position:absolute}.physics-stage.playing .dd-plate{animation:ddBrake 2.6s ease-in-out infinite}.physics-stage.playing .dd-disk{animation:ddDrive 3s linear infinite}.physics-stage.playing .dd-rotor{animation:ddRotor 3s linear infinite}@keyframes ddBrake{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-62%)}}@keyframes ddDrive{to{transform:translateX(-50%) rotate(360deg)}}@keyframes ddRotor{to{transform:translateX(-50%) rotate(360deg)}}
.mutual-induction .mi-coil{position:absolute;top:75px;width:88px;height:112px;border:7px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:9px;font-weight:900}.mi-coil.primary{left:35px}.mi-coil.secondary{right:35px;border-color:#159b91}.mi-flux{position:absolute;left:50%;top:84px;transform:translateX(-50%);color:#e45f50;font-size:12px;font-weight:900}.mi-lamp{position:absolute;right:44px;top:44px;width:35px;height:35px;border-radius:50%;background:#ffd08b;color:#7a5a00;display:grid;place-items:center;font-size:7px;font-weight:900;z-index:3;box-shadow:0 0 16px rgba(245,185,66,.45)}.mi-source{position:absolute;left:31px;bottom:54px;font-size:8px;font-weight:900;color:#e45f50}.mi-note{position:absolute}.physics-stage.playing .mi-coil.primary{animation:miPrimary 2.4s ease-in-out infinite}.physics-stage.playing .mi-lamp{animation:miLamp 2.4s ease-in-out infinite}@keyframes miPrimary{0%,100%{box-shadow:0 0 0 0 rgba(76,139,179,.08)}50%{box-shadow:0 0 0 9px rgba(76,139,179,.12)}}@keyframes miLamp{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.self-induction .si-coil{position:absolute;left:50%;top:68px;transform:translateX(-50%);width:90px;height:118px;border:7px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:14px;font-weight:900}.si-lamp{position:absolute;right:55px;top:78px;width:42px;height:42px;border-radius:50%;background:#ffd08b;color:#7a5a00;display:grid;place-items:center;font-size:8px;font-weight:900;box-shadow:0 0 16px rgba(245,185,66,.35)}.si-switch{position:absolute;left:48px;top:105px;color:#e45f50;font-size:9px;font-weight:900}.si-arrow{position:absolute;left:52%;top:42px;color:#159b91;font-size:12px;font-weight:900}.si-emf{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:9px;font-weight:900}.si-note{position:absolute}.physics-stage.playing .si-coil{animation:siCoil 2.2s ease-in-out infinite}.physics-stage.playing .si-lamp{animation:siLamp 2.2s ease-in-out infinite}@keyframes siCoil{0%,100%{box-shadow:0 0 0 0 rgba(76,139,179,.08)}50%{box-shadow:0 0 0 10px rgba(76,139,179,.15)}}@keyframes siLamp{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:420px){.eddy-plate{width:218px}.eddy-magnet{width:102px}.dd-card{height:180px}.dd-plate{width:104px}.dd-magnet{right:12px}.dd-disk{width:84px;height:84px}.mi-coil{width:78px;height:104px}.mi-coil.primary{left:26px}.mi-coil.secondary{right:26px}.mi-lamp{right:35px}.self-induction .si-coil{width:82px;height:110px}.si-lamp{right:44px}}

/* wl5-09 to wl5-10 */
.ac-generator,.ac-direction,.ac-parameters,.ac-eff-value{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.ac-pole{position:absolute;top:45px;width:47px;height:150px;border-radius:10px;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900;box-shadow:0 6px 16px rgba(32,76,120,.15)}.ac-pole.left{left:24px;background:#e45f50}.ac-pole.right{right:24px;background:#4c8bb3}
.ac-coil{width:136px;height:112px;border:7px solid #e3a14c;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:10px;font-weight:900;transform-style:preserve-3d;box-shadow:0 0 0 4px rgba(227,161,76,.12);z-index:2}.ac-axis{position:absolute;left:50%;top:61px;bottom:63px;border-left:2px dashed #8ba8ba;transform:translateX(-50%)}.ac-slip{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);color:#159b91;font-size:8px;font-weight:900}.ac-gen-wave{position:absolute;right:57px;bottom:60px;width:100px;padding:2px 5px;border-radius:8px;background:rgba(255,255,255,.88)}.ac-gen-wave svg{display:block;width:100%;height:34px}.ac-generator-note,.ac-direction-note,.ac-params-note,.eff-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.ac-generator-note b,.ac-direction-note b,.ac-params-note b,.eff-note b{color:#ffd08b}.physics-stage.playing .ac-coil{animation:acCoilSpin 3.2s linear infinite}@keyframes acCoilSpin{to{transform:rotateY(360deg)}}
.ac-direction{gap:10px;padding:14px 14px 100px}.ac-phase-card{width:50%;height:150px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative}.ac-phase-card b{font-size:9px;color:#31536d}.ac-phase-card em{font-size:8px;font-style:normal;color:#6a8093}.phase-loop{width:94px;height:84px;border:5px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#e45f50;font-size:12px;font-weight:900}.ac-phase-card.late .phase-loop{border-color:#159b91}.ac-phase-card.late span{color:#159b91}.ac-direction-wave{position:absolute;left:16px;right:16px;bottom:39px;width:calc(100% - 32px);height:58px}.ac-direction-note{position:absolute}.physics-stage.playing .phase-loop{animation:phasePulse 1.4s ease-in-out infinite}@keyframes phasePulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.03)}}
.ac-parameters svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.ac-param-peak,.ac-param-period,.ac-param-frequency{position:absolute;padding:4px 7px;border-radius:7px;font-size:9px;font-weight:900;color:#fff}.ac-param-peak{left:75px;top:42px;background:#159b91}.ac-param-period{left:50%;top:123px;transform:translateX(-50%);background:#e3a14c;color:#31536d}.ac-param-frequency{right:24px;top:48px;background:#e45f50}.ac-params-note{position:absolute}.physics-stage.playing .ac-param-peak{animation:paramPulse 1.8s ease-in-out infinite}.physics-stage.playing .ac-param-period{animation:paramPulse 2.2s ease-in-out infinite reverse}@keyframes paramPulse{0%,100%{transform:scale(.95);opacity:.65}50%{transform:scale(1.06);opacity:1}}
.ac-eff-value{gap:8px;padding:14px 14px 100px}.eff-card{width:42%;height:150px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#31536d;font-size:9px;font-weight:900;position:relative}.eff-card b{font-size:9px}.eff-card span{font-size:13px;color:#e45f50}.eff-card.effective span{color:#159b91}.eff-card i{width:42px;height:42px;border-radius:50%;border:3px solid #e3a14c;background:rgba(245,185,66,.14)}.eff-card.effective i{border-color:#159b91;background:rgba(21,155,145,.12)}.eff-equals{font-size:22px;font-weight:900;color:#31536d}.eff-formula{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.eff-note{position:absolute}.physics-stage.playing .eff-card i{animation:heatPulse 1.6s ease-in-out infinite}.physics-stage.playing .eff-card.effective i{animation-delay:.8s}@keyframes heatPulse{0%,100%{transform:scale(.94);box-shadow:0 0 0 0 rgba(245,185,66,.1)}50%{transform:scale(1.06);box-shadow:0 0 0 8px rgba(245,185,66,.08)}}
@media(max-width:420px){.ac-pole{width:40px;height:142px}.ac-pole.left{left:16px}.ac-pole.right{right:16px}.ac-coil{width:122px;height:102px}.ac-gen-wave{right:44px;width:92px}.ac-phase-card{height:142px}.phase-loop{width:84px;height:76px}.eff-card{height:142px}.eff-card span{font-size:11px}}

/* wl5-11 to wl5-12 */
.transformer-core,.transformer-ratio,.power-transmission,.transmission-loss{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.tf-core{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:158px;height:155px;border:14px solid #8ba8ba;border-radius:16px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 8px 18px rgba(32,76,120,.12)}.tf-coil{position:absolute;top:70px;width:38px;height:120px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900;box-shadow:0 5px 14px rgba(32,76,120,.15)}.tf-coil.primary{left:54px;background:repeating-linear-gradient(180deg,#e3a14c 0 10px,#c98630 10px 14px)}.tf-coil.secondary{right:54px;background:repeating-linear-gradient(180deg,#159b91 0 10px,#117b74 10px 14px)}.tf-coil span{background:rgba(18,59,97,.82);padding:3px 5px;border-radius:5px}.tf-flux{position:absolute;left:50%;top:45px;transform:translateX(-50%);color:#e45f50;font-size:17px;font-weight:900;z-index:3}.tf-primary-label{position:absolute;left:42px;top:201px;color:#e3a14c;font-size:9px;font-weight:900}.tf-secondary-label{position:absolute;right:39px;top:201px;color:#159b91;font-size:9px;font-weight:900}.tf-core-note,.tf-ratio-note,.pt-note,.transmission-loss-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.tf-core-note b,.tf-ratio-note b,.pt-note b,.transmission-loss-note b{color:#ffd08b}.physics-stage.playing .tf-flux{animation:fluxTravel 2.2s ease-in-out infinite}.physics-stage.playing .tf-coil.primary{animation:coilPrimary 2.2s ease-in-out infinite}.physics-stage.playing .tf-coil.secondary{animation:coilSecondary 2.2s ease-in-out infinite .3s}@keyframes fluxTravel{0%,100%{transform:translateX(-50%) translateY(0);opacity:.45}50%{transform:translateX(-50%) translateY(46px);opacity:1}}@keyframes coilPrimary{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.15)}}@keyframes coilSecondary{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.2)}}
.transformer-ratio{gap:10px;padding:14px 14px 100px}.tf-ratio-card{width:50%;height:155px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative}.tf-ratio-card b{font-size:10px;color:#31536d}.tf-ratio-card span{font-size:11px;color:#159b91;font-weight:900}.tf-ratio-card em{font-size:9px;font-style:normal;color:#6a8093}.tf-ratio-card.stepdown span{color:#e45f50}.tf-turn-bars{width:70px;height:58px;border-radius:8px;background:repeating-linear-gradient(90deg,#e3a14c 0 7px,transparent 7px 11px);border-bottom:3px solid #8ba8ba}.tf-turn-bars.short{background:repeating-linear-gradient(90deg,#4c8bb3 0 7px,transparent 7px 11px);width:48px}.tf-ratio-formula{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:11px;font-weight:900;white-space:nowrap}.tf-ratio-note{position:absolute}.physics-stage.playing .tf-turn-bars{animation:turnGlow 1.8s ease-in-out infinite}@keyframes turnGlow{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.2)}}
.power-transmission .pt-plant{position:absolute;left:22px;top:76px;width:55px;height:55px;border-radius:10px;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.pt-tower{position:absolute;top:54px;width:36px;height:128px;border-left:3px solid #6c91aa;border-right:3px solid #6c91aa;color:#31536d;font-size:7px;font-weight:900;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}.pt-tower:before,.pt-tower:after{content:"";position:absolute;left:50%;width:44px;height:2px;background:#6c91aa;transform:translateX(-50%)}.pt-tower:before{top:18px}.pt-tower:after{top:48px}.pt-tower.left{left:108px}.pt-tower.right{right:108px}.pt-wire{position:absolute;left:126px;right:126px;top:64px;height:3px;background:#6c91aa}.pt-city{position:absolute;right:18px;top:81px;width:54px;height:50px;border-radius:9px;background:#4c8bb3;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.pt-voltage{position:absolute;left:50%;top:80px;transform:translateX(-50%);padding:5px 7px;border-radius:7px;background:#e45f50;color:#fff;font-size:8px;font-weight:900}.pt-current{position:absolute;left:50%;top:104px;transform:translateX(-50%);color:#159b91;font-size:8px;font-weight:900}.pt-note{position:absolute}.physics-stage.playing .pt-wire{animation:wirePulse 1.3s ease-in-out infinite}@keyframes wirePulse{0%,100%{box-shadow:0 0 0 0 rgba(108,145,170,.05)}50%{box-shadow:0 0 0 4px rgba(108,145,170,.18)}}
.transmission-loss{gap:10px;padding:14px 14px 100px}.tl-case{width:50%;height:162px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.tl-case b{font-size:10px;color:#31536d}.tl-case span{font-size:9px;color:#6a8093}.tl-case em{font-size:9px;font-style:normal;color:#e45f50;font-weight:900}.tl-case.high em{color:#159b91}.tl-loss-bar{width:112px;height:28px;border-radius:7px;background:#e8eef2;overflow:hidden}.tl-loss-bar i{display:block;height:100%;width:84%;background:linear-gradient(90deg,#e45f50,#e3a14c);border-radius:7px}.tl-case.high .tl-loss-bar i{width:24%;background:linear-gradient(90deg,#159b91,#59c5b9)}.tl-formula{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.transmission-loss-note{position:absolute}.physics-stage.playing .tl-case.low .tl-loss-bar i{animation:lossLow 1.5s ease-in-out infinite}.physics-stage.playing .tl-case.high .tl-loss-bar i{animation:lossHigh 2s ease-in-out infinite}@keyframes lossLow{0%,100%{width:72%}50%{width:90%}}@keyframes lossHigh{0%,100%{width:18%}50%{width:28%}}
@media(max-width:420px){.tf-core{width:146px;height:146px}.tf-coil.primary{left:45px}.tf-coil.secondary{right:45px}.tf-ratio-card{height:148px}.pt-tower.left{left:94px}.pt-tower.right{right:94px}.pt-wire{left:110px;right:110px}.tl-case{height:152px}.tl-loss-bar{width:98px}}

/* wl5-13 to wl5-14 */
.lc-oscillation,.lc-energy,.em-field-mutual,.displacement-current{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.lc-wire{position:absolute;left:50%;top:53px;transform:translateX(-50%);width:218px;height:154px;border:4px solid #6c91aa;border-radius:18px}.lc-capacitor{position:absolute;left:112px;top:119px;width:58px;height:40px;display:flex;justify-content:space-between;z-index:2}.lc-capacitor i{width:7px;height:100%;border-radius:3px;background:#e3a14c}.lc-inductor{position:absolute;right:74px;top:105px;width:55px;height:60px;border:5px solid #4c8bb3;border-radius:50%;display:grid;place-items:center;color:#31536d;font-size:12px;font-weight:900;background:rgba(255,255,255,.68);z-index:2}.lc-charge{position:absolute;left:116px;top:79px;color:#e45f50;font-size:10px;font-weight:900}.lc-current{position:absolute;top:65px;font-size:10px;font-weight:900}.lc-current.forward{left:145px;color:#e45f50}.lc-current.reverse{right:145px;color:#159b91}.lc-oscillation-note,.lc-energy-note,.em-field-note,.dc-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.lc-oscillation-note b,.lc-energy-note b,.em-field-note b,.dc-note b{color:#ffd08b}.physics-stage.playing .lc-capacitor{animation:capPulse 1.5s ease-in-out infinite}.physics-stage.playing .lc-current.forward{animation:currentForward 1.5s ease-in-out infinite}.physics-stage.playing .lc-current.reverse{animation:currentReverse 1.5s ease-in-out infinite}@keyframes capPulse{0%,100%{filter:brightness(.9);transform:scale(.96)}50%{filter:brightness(1.15);transform:scale(1.03)}}@keyframes currentForward{0%,100%{opacity:.25;transform:translateX(-8px)}50%{opacity:1;transform:translateX(8px)}}@keyframes currentReverse{0%,100%{opacity:1;transform:translateX(8px)}50%{opacity:.25;transform:translateX(-8px)}}
.lc-energy{gap:8px;padding:14px 14px 100px}.lc-energy-card{width:42%;height:162px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.lc-energy-card b{font-size:9px;color:#31536d}.lc-energy-card span{font-size:7px;color:#6a8093}.lc-energy-gauge{width:92px;height:18px;border-radius:99px;background:#e8eef2;overflow:hidden}.lc-energy-gauge i{display:block;height:100%;width:80%;background:linear-gradient(90deg,#e45f50,#e3a14c);border-radius:99px}.lc-energy-card.magnetic .lc-energy-gauge i{width:28%;background:linear-gradient(90deg,#4c8bb3,#159b91)}.lc-energy-arrow{font-size:18px;font-weight:900;color:#31536d}.lc-energy-formula{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.lc-energy-note{position:absolute}.physics-stage.playing .lc-energy-card.electric .lc-energy-gauge i{animation:energyElectric 2s ease-in-out infinite}.physics-stage.playing .lc-energy-card.magnetic .lc-energy-gauge i{animation:energyMagnetic 2s ease-in-out infinite}@keyframes energyElectric{0%,100%{width:82%}50%{width:20%}}@keyframes energyMagnetic{0%,100%{width:20%}50%{width:82%}}
.em-field-mutual{gap:10px;padding:14px 14px 100px}.em-card{width:42%;height:160px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.em-card b{font-size:9px;color:#31536d}.em-card span{font-size:19px;font-weight:900;color:#e45f50}.em-card.magnetic span{color:#159b91}.em-card em{font-size:8px;font-style:normal;color:#6a8093}.em-loop-arrow{font-size:20px;font-weight:900;color:#e3a14c}.em-loop-arrow.top{position:absolute;left:50%;top:49px;transform:translateX(-50%)}.em-loop-arrow.bottom{position:absolute;left:50%;bottom:101px;transform:translateX(-50%) rotate(180deg)}.em-waves{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:6px}.em-waves i{width:8px;height:8px;border-radius:50%;background:#e3a14c}.em-field-note{position:absolute}.physics-stage.playing .em-card.electric{animation:emElectric 2.2s ease-in-out infinite}.physics-stage.playing .em-card.magnetic{animation:emMagnetic 2.2s ease-in-out infinite}@keyframes emElectric{0%,100%{box-shadow:0 0 0 0 rgba(228,95,80,.05)}50%{box-shadow:0 0 0 8px rgba(228,95,80,.08)}}@keyframes emMagnetic{0%,100%{box-shadow:0 0 0 8px rgba(21,155,145,.08)}50%{box-shadow:0 0 0 0 rgba(21,155,145,.05)}}
.displacement-current .dc-plate{position:absolute;top:67px;width:45px;height:150px;border-radius:8px;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:900}.dc-plate.left{left:52px;background:#e45f50}.dc-plate.right{right:52px;background:#4c8bb3}.dc-field{position:absolute;left:50%;top:71px;transform:translateX(-50%);width:180px;height:142px;display:flex;align-items:center;justify-content:center;gap:16px;color:#159b91;font-size:11px;font-weight:900}.dc-field i{width:2px;height:88px;border-left:2px dashed #159b91}.dc-current{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#ffd08b;color:#7a5a00;font-size:9px;font-weight:900}.dc-formula{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:9px;font-weight:900}.dc-note{position:absolute}.physics-stage.playing .dc-field{animation:dcField 1.8s ease-in-out infinite}.physics-stage.playing .dc-current{animation:dcCurrent 1.8s ease-in-out infinite}@keyframes dcField{0%,100%{opacity:.5;transform:translateX(-50%) scaleY(.94)}50%{opacity:1;transform:translateX(-50%) scaleY(1.03)}}@keyframes dcCurrent{0%,100%{opacity:.45;transform:translateX(-50%) translateY(4px)}50%{opacity:1;transform:translateX(-50%) translateY(-4px)}}
@media(max-width:420px){.lc-wire{width:206px}.lc-capacitor{left:101px}.lc-inductor{right:61px}.lc-current.forward{left:135px}.lc-current.reverse{right:135px}.lc-energy-card,.em-card{height:152px}.dc-plate{width:40px}.dc-plate.left{left:39px}.dc-plate.right{right:39px}.dc-field{width:166px}}

/* wl5-15 to wl5-16 */
.em-wave-propagation,.em-wave-source,.em-spectrum-order,.em-spectrum-app{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.em-wave-propagation svg{position:absolute;inset:8px 8px 38px;width:calc(100% - 16px);height:calc(100% - 46px)}.em-wave-labels{position:absolute;right:20px;top:45px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:#31536d;font-size:8px;font-weight:900}.em-wave-labels b{color:#e45f50}.em-wave-note,.em-wave-source-note,.em-spectrum-note,.em-spectrum-app-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.em-wave-note b,.em-wave-source-note b,.em-spectrum-note b,.em-spectrum-app-note b{color:#ffd08b}.physics-stage.playing .em-wave-propagation svg{animation:emWaveMove 2.2s ease-in-out infinite}@keyframes emWaveMove{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.emw-antenna{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:8px;height:150px;border-radius:4px;background:#e3a14c;z-index:3}.emw-antenna i{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:#e45f50;transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(228,95,80,.12)}.emw-antenna b{position:absolute;left:15px;top:62px;white-space:nowrap;color:#31536d;font-size:8px;font-weight:900}.emw-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px dashed #159b91;border-radius:50%;opacity:.6}.emw-ring.one{width:110px;height:110px}.emw-ring.two{width:180px;height:180px}.emw-ring.three{width:250px;height:250px}.emw-field{position:absolute;font-size:10px;font-weight:900}.emw-field.e{right:48px;top:58px;color:#e45f50}.emw-field.b{left:47px;bottom:82px;color:#159b91}.em-wave-source-note{position:absolute}.physics-stage.playing .emw-ring{animation:emwExpand 2.4s ease-out infinite}.physics-stage.playing .emw-ring.two{animation-delay:.45s}.physics-stage.playing .emw-ring.three{animation-delay:.9s}.physics-stage.playing .emw-antenna i{animation:emwPulse 1.2s ease-in-out infinite}@keyframes emwExpand{0%{transform:translate(-50%,-50%) scale(.5);opacity:.75}100%{transform:translate(-50%,-50%) scale(1.06);opacity:0}}@keyframes emwPulse{0%,100%{box-shadow:0 0 0 3px rgba(228,95,80,.08)}50%{box-shadow:0 0 0 10px rgba(228,95,80,.16)}}
.em-spectrum-order{padding:14px 14px 98px;flex-direction:column;gap:18px}.spectrum-title{font-size:10px;font-weight:900;color:#31536d;letter-spacing:.04em}.spectrum-strip{display:flex;width:100%;height:58px;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(32,76,120,.12)}.spectrum-strip span{flex:1;display:grid;place-items:center;color:#fff;font-size:6px;font-weight:900;text-align:center;padding:2px}.spectrum-strip .radio{background:#395c8a}.spectrum-strip .micro{background:#4c8bb3}.spectrum-strip .infra{background:#e45f50}.spectrum-strip .visible{background:linear-gradient(90deg,#e74c3c,#f39c12,#f1c40f,#2ecc71,#3498db,#8e44ad);flex:1.4}.spectrum-strip .ultra{background:#7d5bb3}.spectrum-strip .xray{background:#526a87}.spectrum-strip .gamma{background:#263448}.spectrum-visible-zoom{width:90%;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;gap:5px;color:#31536d;font-size:9px;font-weight:900}.spectrum-visible-zoom span{font-size:7px;color:#6a8093}.em-spectrum-note{position:absolute}.physics-stage.playing .spectrum-strip{animation:spectrumGlow 2.2s ease-in-out infinite}@keyframes spectrumGlow{0%,100%{filter:brightness(.96)}50%{filter:brightness(1.08)}}
.em-spectrum-app{padding:14px 14px 98px}.spectrum-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%}.spectrum-app-card{height:103px;border-radius:12px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#31536d;font-size:8px;font-weight:900;text-align:center}.spectrum-app-card span{font-size:7px;color:#6a8093}.spectrum-app-card.radio{border-top:4px solid #395c8a}.spectrum-app-card.micro{border-top:4px solid #4c8bb3}.spectrum-app-card.infra{border-top:4px solid #e45f50}.spectrum-app-card.ultra{border-top:4px solid #7d5bb3}.spectrum-app-card.xray{border-top:4px solid #526a87}.spectrum-app-card.gamma{border-top:4px solid #263448}.em-spectrum-app-note{position:absolute}.physics-stage.playing .spectrum-app-card{animation:appCardPulse 2.3s ease-in-out infinite}.physics-stage.playing .spectrum-app-card:nth-child(2){animation-delay:.15s}.physics-stage.playing .spectrum-app-card:nth-child(3){animation-delay:.3s}.physics-stage.playing .spectrum-app-card:nth-child(4){animation-delay:.45s}.physics-stage.playing .spectrum-app-card:nth-child(5){animation-delay:.6s}.physics-stage.playing .spectrum-app-card:nth-child(6){animation-delay:.75s}@keyframes appCardPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:420px){.emw-ring.three{width:232px;height:232px}.spectrum-strip span{font-size:5px}.spectrum-app-card{height:96px}.em-spectrum-app{padding:10px 10px 98px}.spectrum-app-grid{gap:5px}}

/* wl5-17 to wl5-18 */
.sensor-chain,.sensor-types,.sensor-inputs,.sensor-automation{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.sensor-chain{gap:6px;padding:14px 14px 100px}.sensor-node{width:29%;height:124px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.sensor-node b{font-size:8px;color:#31536d}.sensor-node span{font-size:7px;color:#6a8093}.sensor-node.input{border-top:4px solid #e45f50}.sensor-node.sensitive{border-top:4px solid #e3a14c}.sensor-node.convert{border-top:4px solid #159b91}.sensor-arrow{font-size:16px;font-weight:900;color:#8ba8ba}.sensor-output{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:8px;font-weight:900;white-space:nowrap}.sensor-chain-note,.sensor-types-note,.sensor-inputs-note,.sensor-automation-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.sensor-chain-note b,.sensor-types-note b,.sensor-inputs-note b,.sensor-automation-note b{color:#ffd08b}.physics-stage.playing .sensor-node.sensitive{animation:sensorPulse 1.8s ease-in-out infinite}.physics-stage.playing .sensor-node.convert{animation:sensorPulse 1.8s ease-in-out infinite .35s}@keyframes sensorPulse{0%,100%{transform:translateY(0);box-shadow:none}50%{transform:translateY(-4px);box-shadow:0 8px 18px rgba(32,76,120,.12)}}
.sensor-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 14px 100px}.sensor-type-card{height:108px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}.sensor-type-card b{font-size:9px;color:#31536d}.sensor-type-card span{font-size:8px;color:#6a8093}.sensor-type-card em{font-size:7px;font-style:normal;color:#e45f50;font-weight:900}.sensor-type-card.hot{border-top:4px solid #e45f50}.sensor-type-card.light{border-top:4px solid #e3a14c}.sensor-type-card.cap{border-top:4px solid #4c8bb3}.sensor-type-card.hall{border-top:4px solid #159b91}.sensor-types-note{position:absolute}.physics-stage.playing .sensor-type-card{animation:sensorCard 2.2s ease-in-out infinite}.physics-stage.playing .sensor-type-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .sensor-type-card:nth-child(3){animation-delay:.4s}.physics-stage.playing .sensor-type-card:nth-child(4){animation-delay:.6s}@keyframes sensorCard{0%,100%{transform:scale(.98)}50%{transform:scale(1.02)}}
.sensor-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 14px 100px}.sensor-input-card{height:108px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;padding:10px;text-align:center}.sensor-input-card b{grid-column:1/-1;font-size:9px;color:#31536d}.sensor-input-card span{font-size:7px;font-weight:900}.sensor-input-card .in{color:#e45f50}.sensor-input-card .out{color:#159b91}.sensor-input-card i{font-size:12px;font-style:normal;color:#8ba8ba}.sensor-inputs-note{position:absolute}.physics-stage.playing .sensor-input-card .in{animation:inputPulse 1.5s ease-in-out infinite}.physics-stage.playing .sensor-input-card .out{animation:inputPulse 1.5s ease-in-out infinite .3s}@keyframes inputPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.sensor-automation{gap:5px;padding:14px 14px 100px}.auto-node{width:27%;height:120px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}.auto-node b{font-size:7px;color:#31536d}.auto-node span{font-size:6px;color:#6a8093}.auto-node.sensor{border-top:4px solid #e3a14c}.auto-node.control{border-top:4px solid #4c8bb3}.auto-node.relay{border-top:4px solid #159b91}.auto-arrow{font-size:14px;font-weight:900;color:#8ba8ba}.auto-streetlamp{position:absolute;right:20px;bottom:60px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#31536d;font-size:8px;font-weight:900}.auto-streetlamp i{width:28px;height:28px;border-radius:50%;background:#ffd08b;box-shadow:0 0 18px rgba(245,185,66,.55)}.sensor-automation-note{position:absolute}.physics-stage.playing .auto-node.sensor{animation:sensorPulse 1.9s ease-in-out infinite}.physics-stage.playing .auto-node.control{animation:sensorPulse 1.9s ease-in-out infinite .25s}.physics-stage.playing .auto-node.relay{animation:sensorPulse 1.9s ease-in-out infinite .5s}.physics-stage.playing .auto-streetlamp i{animation:lampOn 1.9s ease-in-out infinite}@keyframes lampOn{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:420px){.sensor-node{width:28%;height:116px}.sensor-type-card,.sensor-input-card{height:100px}.sensor-automation{padding-left:8px;padding-right:8px}.auto-node{width:26%;height:112px}.auto-streetlamp{right:12px}}

/* wl5-19 */
.auto-control-design,.auto-control-threshold{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.auto-control-design{gap:4px;padding:14px 8px 100px}.acd-node{width:21%;height:122px;border-radius:13px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}.acd-node b{font-size:7px;color:#31536d}.acd-node span{font-size:6px;color:#6a8093}.acd-node.sensor{border-top:4px solid #e3a14c}.acd-node.control{border-top:4px solid #4c8bb3}.acd-node.relay{border-top:4px solid #159b91}.acd-node.actuator{border-top:4px solid #e45f50}.acd-arrow{font-size:12px;font-weight:900;color:#8ba8ba}.acd-note,.act-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.acd-note b,.act-note b{color:#ffd08b}.physics-stage.playing .acd-node.sensor{animation:acdPulse 2s ease-in-out infinite}.physics-stage.playing .acd-node.control{animation:acdPulse 2s ease-in-out infinite .2s}.physics-stage.playing .acd-node.relay{animation:acdPulse 2s ease-in-out infinite .4s}.physics-stage.playing .acd-node.actuator{animation:acdPulse 2s ease-in-out infinite .6s}@keyframes acdPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.auto-control-threshold svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.act-band{position:absolute;left:44px;top:83px;padding:4px 7px;border-radius:7px;background:#e8eef2;color:#31536d;font-size:7px;font-weight:900}.act-state{position:absolute;padding:4px 7px;border-radius:7px;font-size:7px;font-weight:900;color:#fff}.act-state.on{left:24px;top:54px;background:#159b91}.act-state.off{right:18px;top:190px;background:#e45f50}.act-note{position:absolute}.physics-stage.playing .act-state.on{animation:actPulse 2.4s ease-in-out infinite}.physics-stage.playing .act-state.off{animation:actPulse 2.4s ease-in-out infinite reverse}@keyframes actPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media(max-width:420px){.acd-node{width:20%;height:114px}.auto-control-design{padding-left:4px;padding-right:4px}.acd-arrow{font-size:10px}}

/* wl6-01 to wl6-02 */
.molecular-arrangement,.brownian-motion,.oil-film-setup,.oil-film-calc{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.molecular-arrangement{gap:8px;padding:14px 14px 100px}.mol-state{width:31%;height:156px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.mol-state b{font-size:9px;color:#31536d}.mol-state span{font-size:7px;color:#6a8093}.mol-dots{width:78px;height:58px;position:relative}.mol-dots i{position:absolute;width:13px;height:13px;border-radius:50%;background:#4c8bb3}.mol-dots i:nth-child(1){left:6px;top:5px}.mol-dots i:nth-child(2){left:30px;top:5px}.mol-dots i:nth-child(3){left:55px;top:5px}.mol-dots i:nth-child(4){left:6px;top:36px}.mol-dots i:nth-child(5){left:30px;top:36px}.mol-dots i:nth-child(6){left:55px;top:36px}.mol-state.liquid .mol-dots i{background:#159b91}.mol-state.liquid .mol-dots i:nth-child(1){left:14px;top:10px}.mol-state.liquid .mol-dots i:nth-child(2){left:38px;top:4px}.mol-state.liquid .mol-dots i:nth-child(3){left:59px;top:17px}.mol-state.liquid .mol-dots i:nth-child(4){left:9px;top:42px}.mol-state.liquid .mol-dots i:nth-child(5){left:37px;top:35px}.mol-state.liquid .mol-dots i:nth-child(6){left:57px;top:48px}.mol-state.gas .mol-dots i{background:#e3a14c}.mol-state.gas .mol-dots i:nth-child(1){left:3px;top:3px}.mol-state.gas .mol-dots i:nth-child(2){left:51px;top:8px}.mol-state.gas .mol-dots i:nth-child(3){left:27px;top:25px}.mol-state.gas .mol-dots i:nth-child(4){left:62px;top:41px}.mol-state.gas .mol-dots i:nth-child(5){left:9px;top:43px}.mol-state.gas .mol-dots i:nth-child(6){left:38px;top:53px}.mol-arrangement-note,.brownian-note,.oil-film-setup-note,.oil-film-calc-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.mol-arrangement-note b,.brownian-note b,.oil-film-setup-note b,.oil-film-calc-note b{color:#ffd08b}.physics-stage.playing .mol-state.gas .mol-dots i{animation:molGas 2.4s ease-in-out infinite}.physics-stage.playing .mol-state.gas .mol-dots i:nth-child(2n){animation-delay:.3s}.physics-stage.playing .mol-state.gas .mol-dots i:nth-child(3n){animation-delay:.6s}@keyframes molGas{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-5px)}}
.brownian-box{position:absolute;left:50%;top:43px;transform:translateX(-50%);width:278px;height:202px;border-radius:16px;border:2px solid #8ba8ba;background:rgba(255,255,255,.7);overflow:hidden}.brownian-box svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}.brownian-particle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900;z-index:3;box-shadow:0 5px 14px rgba(227,161,76,.3)}.brownian-box .bm{position:absolute;width:7px;height:7px;border-radius:50%;background:#4c8bb3}.bm.one{left:24px;top:28px}.bm.two{right:34px;top:22px}.bm.three{left:56px;bottom:33px}.bm.four{right:52px;bottom:27px}.bm.five{left:104px;top:31px}.bm.six{right:91px;top:54px}.bm.seven{left:47px;top:87px}.bm.eight{right:66px;bottom:66px}.brownian-note{position:absolute}.physics-stage.playing .brownian-particle{animation:brownianWiggle 2.2s steps(6) infinite}.physics-stage.playing .bm{animation:moleculeJiggle 1.6s ease-in-out infinite}.physics-stage.playing .bm:nth-child(2n){animation-delay:.25s}@keyframes brownianWiggle{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(-64%,-42%)}40%{transform:translate(-38%,-59%)}60%{transform:translate(-57%,-46%)}80%{transform:translate(-43%,-56%)}}@keyframes moleculeJiggle{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-4px)}}
.of-dish{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:270px;height:180px;border:7px solid #8ba8ba;border-top:0;border-radius:0 0 110px 110px;overflow:hidden;background:rgba(255,255,255,.55)}.of-water{position:absolute;left:0;right:0;top:20px;height:130px;background:linear-gradient(180deg,rgba(76,139,179,.18),rgba(76,139,179,.32))}.of-film{position:absolute;left:50%;top:34px;transform:translateX(-50%);width:150px;height:72px;border-radius:50%;background:rgba(227,161,76,.28);border:2px solid #e3a14c}.of-drop{position:absolute;left:50%;top:15px;transform:translateX(-50%);padding:3px 6px;border-radius:99px;background:#e45f50;color:#fff;font-size:6px;font-weight:900;z-index:3}.of-powder{position:absolute;width:4px;height:4px;border-radius:50%;background:#6c91aa}.of-powder.p1{left:65px;top:58px}.of-powder.p2{right:57px;top:60px}.of-powder.p3{left:117px;top:96px}.of-label{position:absolute;font-size:8px;font-weight:900;color:#31536d}.of-label.left{left:34px;bottom:74px}.of-label.right{right:30px;bottom:74px}.oil-film-setup-note{position:absolute}.physics-stage.playing .of-film{animation:filmSpread 2.8s ease-in-out infinite}.physics-stage.playing .of-drop{animation:dropFall 2.8s ease-in-out infinite}@keyframes filmSpread{0%,100%{transform:translateX(-50%) scale(.86)}50%{transform:translateX(-50%) scale(1.04)}}@keyframes dropFall{0%,100%{transform:translateX(-50%) translateY(-3px);opacity:.6}50%{transform:translateX(-50%) translateY(6px);opacity:1}}
.oil-film-calc .of-grid{position:absolute;left:50%;top:42px;transform:translateX(-50%);width:220px;height:142px;border:2px solid #8ba8ba;background:repeating-linear-gradient(0deg,transparent 0 21px,#c8dbea 21px 22px),repeating-linear-gradient(90deg,transparent 0 21px,#c8dbea 21px 22px);border-radius:10px;overflow:hidden}.of-film-shape{position:absolute;left:34px;top:24px;width:145px;height:94px;border-radius:48% 52% 57% 43%;background:rgba(227,161,76,.25);border:2px solid #e3a14c}.of-area{position:absolute;right:39px;top:65px;padding:4px 7px;border-radius:7px;background:#159b91;color:#fff;font-size:9px;font-weight:900}.of-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.of-steps{position:absolute;left:50%;top:196px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;font-size:7px;color:#31536d;font-weight:900}.oil-film-calc-note{position:absolute}.physics-stage.playing .of-film-shape{animation:filmAreaPulse 2.2s ease-in-out infinite}@keyframes filmAreaPulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@media(max-width:420px){.mol-state{height:146px}.mol-dots{transform:scale(.88)}.brownian-box{width:260px;height:190px}.of-dish{width:250px;height:172px}.oil-film-calc .of-grid{width:204px;height:134px}.of-film-shape{left:30px;width:134px;height:88px}}

/* wl6-03 to wl6-04 */
.speed-distribution,.molecular-speed,.kinetic-temperature,.potential-distance{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.speed-distribution svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.speed-legend{position:absolute;right:20px;top:102px;display:flex;flex-direction:column;gap:7px;font-size:8px;font-weight:900}.speed-legend span{display:flex;align-items:center;gap:5px}.speed-legend span:before{content:"";width:18px;height:3px;border-radius:3px}.speed-legend .low{color:#4c8bb3}.speed-legend .low:before{background:#4c8bb3}.speed-legend .high{color:#e45f50}.speed-legend .high:before{background:#e45f50}.speed-distribution-note,.molecular-speed-note,.kinetic-temperature-note,.potential-distance-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.speed-distribution-note b,.molecular-speed-note b,.kinetic-temperature-note b,.potential-distance-note b{color:#ffd08b}.physics-stage.playing .speed-distribution svg{animation:speedCurve 2.4s ease-in-out infinite}@keyframes speedCurve{0%,100%{opacity:.82}50%{opacity:1}}
.molecular-speed .ms-box{position:absolute;left:24px;top:45px;width:214px;height:180px;border:2px solid #8ba8ba;border-radius:15px;background:rgba(255,255,255,.68);overflow:hidden}.ms-box>i{position:absolute;width:10px;height:10px;border-radius:50%;background:#4c8bb3}.ms-box>i:nth-child(1){left:22px;top:30px}.ms-box>i:nth-child(2){left:82px;top:22px}.ms-box>i:nth-child(3){left:154px;top:42px}.ms-box>i:nth-child(4){left:48px;top:84px}.ms-box>i:nth-child(5){left:126px;top:98px}.ms-box>i:nth-child(6){left:184px;top:122px}.ms-box>i:nth-child(7){left:35px;top:145px}.ms-box>i:nth-child(8){left:155px;top:154px}.ms-particle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:65px;height:65px;border-radius:50%;background:rgba(227,161,76,.18);border:2px dashed #e3a14c;display:grid;place-items:center;color:#31536d;font-size:7px;font-weight:900}.ms-bars{position:absolute;right:26px;top:75px;width:76px;height:130px;display:flex;align-items:flex-end;gap:4px;border-bottom:2px solid #8ba8ba}.ms-bars span{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,#e45f50,#e3a14c)}.molecular-speed-note{position:absolute}.physics-stage.playing .ms-box>i{animation:msFloat 2.2s ease-in-out infinite}.physics-stage.playing .ms-box>i:nth-child(2n){animation-delay:.25s}.physics-stage.playing .ms-box>i:nth-child(3n){animation-delay:.5s}@keyframes msFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-5px)}}
.kinetic-temperature{gap:18px;padding:14px 14px 100px}.kt-thermo{display:flex;flex-direction:column;align-items:center;gap:7px;color:#31536d;font-size:8px;font-weight:900}.kt-tube{width:38px;height:138px;border:3px solid #8ba8ba;border-radius:20px;padding:5px;display:flex;align-items:flex-end;background:#fff}.kt-tube i{width:100%;height:48%;border-radius:14px;background:linear-gradient(180deg,#e45f50,#e3a14c);display:block}.kt-arrow{font-size:20px;color:#8ba8ba;font-weight:900}.kt-card{width:145px;height:138px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.kt-card b{font-size:9px;color:#31536d}.kt-card span{font-size:18px;color:#e45f50;font-weight:900}.kt-card em{font-size:7px;font-style:normal;color:#6a8093}.kt-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:8px;font-weight:900;white-space:nowrap}.kinetic-temperature-note{position:absolute}.physics-stage.playing .kt-tube i{animation:ktRise 2.2s ease-in-out infinite}.physics-stage.playing .kt-card span{animation:ktGlow 2.2s ease-in-out infinite}@keyframes ktRise{0%,100%{height:42%}50%{height:78%}}@keyframes ktGlow{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.potential-distance svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.potential-min{position:absolute;left:50%;top:170px;transform:translateX(-50%);padding:4px 7px;border-radius:7px;background:#159b91;color:#fff;font-size:7px;font-weight:900}.potential-distance-note{position:absolute}.physics-stage.playing .potential-distance svg path{animation:potentialGlow 2.2s ease-in-out infinite}@keyframes potentialGlow{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.18)}}
@media(max-width:420px){.speed-legend{right:14px}.molecular-speed .ms-box{width:200px;height:170px}.ms-bars{width:68px}.kt-card{width:132px}.potential-min{top:166px}}

/* wl6-05 to wl6-06 */
.thermal-equilibrium,.temperature-scales,.boyle-law,.boyle-graph{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.thermal-equilibrium{gap:18px;padding:14px 14px 100px}.te-body{width:112px;height:128px;border-radius:16px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-weight:900;box-shadow:0 8px 18px rgba(32,76,120,.13)}.te-body b{font-size:9px}.te-body span{font-size:8px;opacity:.9}.te-body.hot{background:linear-gradient(145deg,#e45f50,#e3a14c)}.te-body.cold{background:linear-gradient(145deg,#4c8bb3,#159b91)}.te-heat-arrow{font-size:9px;font-weight:900;color:#e45f50}.te-result{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:9px;font-weight:900;white-space:nowrap}.thermal-equilibrium-note,.temperature-scales-note,.boyle-law-note,.boyle-graph-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.thermal-equilibrium-note b,.temperature-scales-note b,.boyle-law-note b,.boyle-graph-note b{color:#ffd08b}.physics-stage.playing .te-body.hot{animation:teCool 2.4s ease-in-out infinite}.physics-stage.playing .te-body.cold{animation:teWarm 2.4s ease-in-out infinite}@keyframes teCool{0%,100%{filter:brightness(1.12)}50%{filter:brightness(.92)}}@keyframes teWarm{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.08)}}
.temperature-scales{gap:34px;padding:14px 14px 100px}.ts-scale{display:flex;flex-direction:column;align-items:center;gap:9px;color:#31536d;font-size:8px;font-weight:900}.ts-line{width:96px;height:156px;border-left:3px solid #8ba8ba;display:flex;flex-direction:column;justify-content:space-between;padding-left:9px}.ts-line span{position:relative;font-size:7px}.ts-line span:before{content:"";position:absolute;left:-12px;top:50%;width:8px;border-top:2px solid #8ba8ba}.ts-scale.kelvin .ts-line{border-color:#159b91}.ts-scale.kelvin .ts-line span:before{border-color:#159b91}.ts-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:10px;font-weight:900;white-space:nowrap}.temperature-scales-note{position:absolute}.physics-stage.playing .ts-line{animation:scaleGlow 2s ease-in-out infinite}@keyframes scaleGlow{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
.boyle-law .boyle-cylinder{position:absolute;left:42px;top:48px;width:124px;height:190px;border:4px solid #8ba8ba;border-top:0;border-radius:0 0 12px 12px;background:rgba(255,255,255,.55);overflow:hidden}.boyle-gas{position:absolute;left:0;right:0;bottom:0;height:112px;background:rgba(76,139,179,.18)}.boyle-gas i{position:absolute;width:9px;height:9px;border-radius:50%;background:#4c8bb3}.boyle-gas i:nth-child(1){left:16px;top:14px}.boyle-gas i:nth-child(2){left:46px;top:24px}.boyle-gas i:nth-child(3){left:84px;top:10px}.boyle-gas i:nth-child(4){left:102px;top:48px}.boyle-gas i:nth-child(5){left:31px;top:65px}.boyle-gas i:nth-child(6){left:69px;top:74px}.boyle-gas i:nth-child(7){left:18px;top:101px}.boyle-gas i:nth-child(8){left:96px;top:97px}.boyle-piston{position:absolute;left:-4px;right:-4px;top:112px;height:17px;border-radius:6px;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900}.boyle-gauge{position:absolute;right:48px;top:55px;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #e45f50;display:grid;place-items:center;color:#e45f50;font-size:12px;font-weight:900}.boyle-constant{position:absolute;right:33px;top:121px;padding:7px 9px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:9px;font-weight:900}.boyle-law-note{position:absolute}.physics-stage.playing .boyle-piston{animation:pistonMove 2.6s ease-in-out infinite}.physics-stage.playing .boyle-gas{animation:gasCompress 2.6s ease-in-out infinite}@keyframes pistonMove{0%,100%{transform:translateY(0)}50%{transform:translateY(38px)}}@keyframes gasCompress{0%,100%{height:112px}50%{height:74px}}
.boyle-graph{gap:10px;padding:14px 14px 100px}.bg-panel{width:48%;height:185px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);position:relative;display:flex;align-items:center;justify-content:center}.bg-panel svg{width:100%;height:150px}.bg-panel b{position:absolute;bottom:8px;font-size:7px;color:#31536d}.boyle-graph-note{position:absolute}.physics-stage.playing .bg-panel svg{animation:bgGlow 2.3s ease-in-out infinite}@keyframes bgGlow{0%,100%{filter:brightness(.96)}50%{filter:brightness(1.1)}}
@media(max-width:420px){.te-body{width:102px;height:118px}.te-heat-arrow{font-size:8px}.temperature-scales{gap:24px}.ts-line{width:86px}.boyle-cylinder{left:30px;width:116px}.boyle-gauge{right:35px}.bg-panel{height:176px}}

/* wl6-07 to wl6-08 */
.isobaric-process,.isochoric-process,.solid-structure,.solid-properties{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.iso-cylinder{position:absolute;left:60px;top:48px;width:130px;height:190px;border:4px solid #8ba8ba;border-top:0;border-radius:0 0 12px 12px;background:rgba(255,255,255,.58);overflow:hidden}.iso-gas{position:absolute;left:0;right:0;bottom:0;height:90px;background:rgba(76,139,179,.17)}.iso-gas i{position:absolute;width:9px;height:9px;border-radius:50%;background:#4c8bb3}.iso-gas i:nth-child(1){left:18px;top:14px}.iso-gas i:nth-child(2){left:62px;top:24px}.iso-gas i:nth-child(3){left:102px;top:12px}.iso-gas i:nth-child(4){left:36px;top:54px}.iso-gas i:nth-child(5){left:80px;top:66px}.iso-gas i:nth-child(6){left:19px;top:78px}.iso-piston{position:absolute;left:-4px;right:-4px;top:89px;height:16px;border-radius:6px;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900}.iso-heat{position:absolute;left:90px;bottom:57px;color:#e45f50;font-size:10px;font-weight:900}.iso-formula{position:absolute;right:33px;top:77px;padding:7px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:10px;font-weight:900}.isobaric-process-note,.isochoric-process-note,.solid-structure-note,.solid-properties-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.isobaric-process-note b,.isochoric-process-note b,.solid-structure-note b,.solid-properties-note b{color:#ffd08b}.physics-stage.playing .iso-piston{animation:isoPiston 2.6s ease-in-out infinite}.physics-stage.playing .iso-gas{animation:isoGas 2.6s ease-in-out infinite}@keyframes isoPiston{0%,100%{transform:translateY(0)}50%{transform:translateY(-35px)}}@keyframes isoGas{0%,100%{height:90px}50%{height:126px}}
.isoc-vessel{position:absolute;left:87px;top:55px;width:145px;height:165px;border:5px solid #8ba8ba;border-radius:18px;background:linear-gradient(180deg,rgba(76,139,179,.1),rgba(76,139,179,.22));display:grid;place-items:center;color:#31536d;font-size:9px;font-weight:900}.isoc-gauge{position:absolute;right:46px;top:58px;width:58px;height:58px;border-radius:50%;background:#fff;border:3px solid #e45f50;color:#e45f50;display:grid;place-items:center;font-size:12px;font-weight:900}.isoc-heat{position:absolute;left:95px;bottom:58px;color:#e45f50;font-size:9px;font-weight:900}.isoc-formula{position:absolute;right:30px;bottom:102px;padding:7px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:10px;font-weight:900}.isochoric-process-note{position:absolute}.physics-stage.playing .isoc-gauge{animation:isocGauge 2.2s ease-in-out infinite}@keyframes isocGauge{0%,100%{transform:scale(.94);box-shadow:0 0 0 0 rgba(228,95,80,.1)}50%{transform:scale(1.06);box-shadow:0 0 0 9px rgba(228,95,80,.08)}}
.solid-structure{gap:10px;padding:14px 14px 100px}.solid-panel{width:50%;height:178px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.solid-panel b{font-size:9px;color:#31536d}.solid-panel span{font-size:7px;color:#6a8093}.solid-lattice,.solid-random{width:120px;height:105px;position:relative}.solid-lattice i{position:absolute;width:13px;height:13px;border-radius:50%;background:#4c8bb3;box-shadow:0 0 0 2px rgba(76,139,179,.12)}.solid-lattice i:nth-child(1){left:10px;top:8px}.solid-lattice i:nth-child(2){left:52px;top:8px}.solid-lattice i:nth-child(3){left:94px;top:8px}.solid-lattice i:nth-child(4){left:10px;top:46px}.solid-lattice i:nth-child(5){left:52px;top:46px}.solid-lattice i:nth-child(6){left:94px;top:46px}.solid-lattice i:nth-child(7){left:10px;top:84px}.solid-lattice i:nth-child(8){left:52px;top:84px}.solid-lattice i:nth-child(9){left:94px;top:84px}.solid-random i{position:absolute;width:13px;height:13px;border-radius:50%;background:#e3a14c}.solid-random i:nth-child(1){left:6px;top:12px}.solid-random i:nth-child(2){left:54px;top:4px}.solid-random i:nth-child(3){left:99px;top:24px}.solid-random i:nth-child(4){left:23px;top:47px}.solid-random i:nth-child(5){left:78px;top:51px}.solid-random i:nth-child(6){left:43px;top:79px}.solid-random i:nth-child(7){left:104px;top:77px}.solid-random i:nth-child(8){left:7px;top:90px}.solid-random i:nth-child(9){left:79px;top:94px}.solid-structure-note{position:absolute}.physics-stage.playing .solid-random i{animation:solidRandom 2.3s ease-in-out infinite}.physics-stage.playing .solid-random i:nth-child(2n){animation-delay:.2s}.physics-stage.playing .solid-random i:nth-child(3n){animation-delay:.4s}@keyframes solidRandom{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-4px)}}
.solid-properties{gap:8px;padding:14px 14px 100px}.solid-prop-card{width:31%;height:175px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}.solid-prop-card b{font-size:9px;color:#31536d}.solid-prop-card span{font-size:8px;color:#159b91;font-weight:900}.solid-prop-card em{font-size:7px;font-style:normal;color:#6a8093}.solid-prop-card.single{border-top:4px solid #e45f50}.solid-prop-card.poly{border-top:4px solid #4c8bb3}.solid-prop-card.amor{border-top:4px solid #e3a14c}.solid-properties-note{position:absolute}.physics-stage.playing .solid-prop-card{animation:solidCard 2.2s ease-in-out infinite}.physics-stage.playing .solid-prop-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .solid-prop-card:nth-child(3){animation-delay:.4s}@keyframes solidCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:420px){.iso-cylinder{left:42px;width:120px}.iso-formula{right:20px}.isoc-vessel{left:64px;width:135px}.isoc-gauge{right:28px}.isoc-formula{right:18px}.solid-panel{height:168px}.solid-lattice,.solid-random{transform:scale(.9)}.solid-prop-card{height:164px}}

/* wl6-09 to wl6-10 */
.surface-tension,.capillary-action,.work-internal-energy,.heat-internal-energy{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.st-surface{position:absolute;left:50%;top:93px;transform:translateX(-50%);width:260px;height:80px;border-top:3px solid #4c8bb3;border-radius:50%;background:rgba(76,139,179,.1)}.st-needle{position:absolute;left:50%;top:-8px;transform:translateX(-50%);padding:5px 25px;border-radius:99px;background:#8ba8ba;color:#fff;font-size:8px;font-weight:900}.st-force{position:absolute;width:34px;border-top:3px solid #e45f50;transform-origin:left center}.st-force:after{content:"";position:absolute;right:-4px;top:-4px;border-left:7px solid #e45f50;border-top:4px solid transparent;border-bottom:4px solid transparent}.st-force.a{left:55px;top:21px;transform:rotate(-28deg)}.st-force.b{left:108px;top:72px;transform:rotate(180deg)}.st-force.c{right:52px;top:21px;transform:rotate(28deg)}.st-drop{position:absolute;right:51px;top:52px;width:55px;height:55px;border-radius:52% 48% 58% 42%;background:rgba(21,155,145,.3);border:2px solid #159b91;display:grid;place-items:center;color:#31536d;font-size:8px;font-weight:900}.st-molecules{position:absolute;left:47px;bottom:66px;display:flex;align-items:center;gap:7px;color:#31536d;font-size:7px;font-weight:900}.st-molecules i{width:9px;height:9px;border-radius:50%;background:#4c8bb3}.surface-tension-note,.capillary-action-note,.work-internal-energy-note,.heat-internal-energy-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.surface-tension-note b,.capillary-action-note b,.work-internal-energy-note b,.heat-internal-energy-note b{color:#ffd08b}.physics-stage.playing .st-force{animation:stPulse 1.6s ease-in-out infinite}.physics-stage.playing .st-drop{animation:dropRound 2s ease-in-out infinite}@keyframes stPulse{0%,100%{opacity:.45}50%{opacity:1}}@keyframes dropRound{0%,100%{border-radius:52% 48% 58% 42%;transform:scale(.96)}50%{border-radius:50%;transform:scale(1.03)}}
.capillary-action{gap:40px;padding:14px 14px 100px}.cap-tube{width:82px;height:180px;border-left:3px solid #8ba8ba;border-right:3px solid #8ba8ba;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:15px;color:#31536d;font-size:8px;font-weight:900}.cap-tube .cap-liquid{position:absolute;left:3px;right:3px;bottom:15px;height:82px;background:rgba(76,139,179,.45);border-top:2px solid #4c8bb3;border-radius:50% 50% 0 0}.cap-tube.mercury .cap-liquid{height:115px;background:rgba(227,161,76,.55);border-bottom:2px solid #e3a14c;border-top:0;border-radius:0 0 50% 50%;bottom:15px}.cap-tube b,.cap-tube span{position:relative;z-index:2}.cap-tube span{font-size:6px;color:#6a8093}.capillary-action-note{position:absolute}.physics-stage.playing .cap-tube.water .cap-liquid{animation:capRise 2.2s ease-in-out infinite}.physics-stage.playing .cap-tube.mercury .cap-liquid{animation:capFall 2.2s ease-in-out infinite}@keyframes capRise{0%,100%{height:72px}50%{height:104px}}@keyframes capFall{0%,100%{height:122px}50%{height:98px}}
.work-internal-energy .wie-cylinder{position:absolute;left:60px;top:45px;width:126px;height:188px;border:4px solid #8ba8ba;border-top:0;border-radius:0 0 12px 12px;background:rgba(255,255,255,.6);overflow:hidden}.wie-gas{position:absolute;left:0;right:0;bottom:0;height:110px;background:rgba(76,139,179,.18)}.wie-gas i{position:absolute;width:9px;height:9px;border-radius:50%;background:#4c8bb3}.wie-gas i:nth-child(1){left:16px;top:16px}.wie-gas i:nth-child(2){left:52px;top:28px}.wie-gas i:nth-child(3){left:93px;top:13px}.wie-gas i:nth-child(4){left:29px;top:65px}.wie-gas i:nth-child(5){left:76px;top:74px}.wie-gas i:nth-child(6){left:17px;top:101px}.wie-piston{position:absolute;left:-4px;right:-4px;top:109px;height:16px;border-radius:6px;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900}.wie-work{position:absolute;right:28px;top:57px;color:#e45f50;font-size:9px;font-weight:900}.wie-temp{position:absolute;right:40px;top:96px;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #e45f50;color:#e45f50;display:grid;place-items:center;font-size:10px;font-weight:900}.wie-formula{position:absolute;right:39px;top:163px;padding:7px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:11px;font-weight:900}.work-internal-energy-note{position:absolute}.physics-stage.playing .wie-piston{animation:wiePiston 2.4s ease-in-out infinite}.physics-stage.playing .wie-gas i{animation:wieFast 1.2s ease-in-out infinite}.physics-stage.playing .wie-gas i:nth-child(2n){animation-delay:.2s}@keyframes wiePiston{0%,100%{transform:translateY(0)}50%{transform:translateY(33px)}}@keyframes wieFast{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-5px)}}
.heat-internal-energy .hie-vessel{position:absolute;left:50%;top:54px;transform:translateX(-50%);width:132px;height:140px;border:4px solid #8ba8ba;border-top:0;border-radius:0 0 18px 18px;background:rgba(255,255,255,.58);overflow:hidden}.hie-gas{position:absolute;left:0;right:0;bottom:0;height:95px;background:rgba(76,139,179,.18)}.hie-gas i{position:absolute;width:9px;height:9px;border-radius:50%;background:#4c8bb3}.hie-gas i:nth-child(1){left:18px;top:16px}.hie-gas i:nth-child(2){left:58px;top:28px}.hie-gas i:nth-child(3){left:98px;top:12px}.hie-gas i:nth-child(4){left:38px;top:62px}.hie-gas i:nth-child(5){left:82px;top:73px}.hie-flame{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:28px solid #e45f50}.hie-heat{position:absolute;right:58px;top:65px;color:#e45f50;font-size:11px;font-weight:900}.hie-formula{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:11px;font-weight:900}.heat-internal-energy-note{position:absolute}.physics-stage.playing .hie-gas i{animation:hieFast 1.4s ease-in-out infinite}.physics-stage.playing .hie-gas i:nth-child(2n){animation-delay:.25s}.physics-stage.playing .hie-flame{animation:flamePulse 1s ease-in-out infinite}@keyframes hieFast{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-4px)}}@keyframes flamePulse{0%,100%{transform:translateX(-50%) scale(.9)}50%{transform:translateX(-50%) scale(1.08)}}
@media(max-width:420px){.st-surface{width:238px}.st-drop{right:37px}.capillary-action{gap:28px}.wie-cylinder{left:45px;width:118px}.wie-work,.wie-temp,.wie-formula{right:18px}.hie-heat{right:34px}}

/* wl6-11 to wl6-12 */
.first-law-signs,.thermo-processes,.energy-conservation-chain,.perpetual-motion{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.fl-system{width:130px;height:130px;border-radius:22px;background:#fff;border:3px solid #4c8bb3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#31536d;font-size:10px;font-weight:900;box-shadow:0 8px 20px rgba(32,76,120,.12);z-index:3}.fl-system span{font-size:8px;color:#6a8093}.fl-arrow{position:absolute;font-size:8px;font-weight:900}.fl-arrow.q-in{left:42px;top:52px;color:#e45f50}.fl-arrow.q-out{right:30px;top:82px;color:#e45f50}.fl-arrow.w-in{left:32px;bottom:66px;color:#159b91}.fl-arrow.w-out{right:28px;bottom:66px;color:#159b91}.fl-formula{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:13px;font-weight:900}.first-law-signs-note,.thermo-processes-note,.energy-conservation-note,.perpetual-motion-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.first-law-signs-note b,.thermo-processes-note b,.energy-conservation-note b,.perpetual-motion-note b{color:#ffd08b}.physics-stage.playing .fl-system{animation:flPulse 2s ease-in-out infinite}.physics-stage.playing .fl-arrow{animation:flArrow 1.6s ease-in-out infinite}@keyframes flPulse{0%,100%{box-shadow:0 8px 20px rgba(32,76,120,.12)}50%{box-shadow:0 10px 28px rgba(76,139,179,.24)}}@keyframes flArrow{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
.thermo-processes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 14px 100px}.tp-card{height:106px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}.tp-card b{font-size:9px;color:#31536d}.tp-card span{font-size:8px;color:#e45f50;font-weight:900}.tp-card em{font-size:8px;font-style:normal;color:#159b91;font-weight:900}.thermo-processes-note{position:absolute}.physics-stage.playing .tp-card{animation:tpCard 2s ease-in-out infinite}.physics-stage.playing .tp-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .tp-card:nth-child(3){animation-delay:.4s}.physics-stage.playing .tp-card:nth-child(4){animation-delay:.6s}@keyframes tpCard{0%,100%{transform:scale(.98)}50%{transform:scale(1.02)}}
.energy-conservation-chain{gap:4px;padding:14px 8px 100px}.ec-node{width:21%;height:105px;border-radius:14px;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900;text-align:center;padding:5px}.ec-node.mechanical{background:#e3a14c}.ec-node.electric{background:#4c8bb3}.ec-node.internal{background:#e45f50}.ec-node.chemical{background:#159b91}.ec-arrow{font-size:13px;color:#8ba8ba;font-weight:900}.ec-total{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:9px;font-weight:900;white-space:nowrap}.energy-conservation-note{position:absolute}.physics-stage.playing .ec-node{animation:ecNode 2.2s ease-in-out infinite}.physics-stage.playing .ec-node:nth-child(3){animation-delay:.2s}.physics-stage.playing .ec-node:nth-child(5){animation-delay:.4s}.physics-stage.playing .ec-node:nth-child(7){animation-delay:.6s}@keyframes ecNode{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pm-machine{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:180px;height:135px}.pm-gear{position:absolute;font-size:45px;color:#4c8bb3;line-height:1}.pm-gear.one{left:30px;top:4px}.pm-gear.two{right:28px;top:42px;font-size:38px;color:#e3a14c}.pm-input{position:absolute;left:5px;bottom:5px;font-size:8px;font-weight:900;color:#159b91}.pm-output{position:absolute;right:0;top:5px;font-size:8px;font-weight:900;color:#e45f50}.pm-cross{position:absolute;right:35px;top:55px;font-size:38px;color:#e45f50;font-weight:900;transform:rotate(-12deg)}.pm-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:10px;font-weight:900}.perpetual-motion-note{position:absolute}.physics-stage.playing .pm-gear.one{animation:gearSpin 3s linear infinite}.physics-stage.playing .pm-gear.two{animation:gearSpin 3s linear infinite reverse}@keyframes gearSpin{to{transform:rotate(360deg)}}
@media(max-width:420px){.fl-arrow.q-in{left:25px}.fl-arrow.q-out{right:22px}.fl-arrow.w-in{left:20px}.fl-arrow.w-out{right:15px}.ec-node{width:20%;height:98px}.pm-machine{width:166px}}

/* wl6-13 to wl6-14 */
.heat-flow-direction,.second-law-engine,.blackbody-spectrum,.energy-quanta{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.heat-flow-direction{gap:16px;padding:14px 14px 100px}.hfd-body{width:108px;height:118px;border-radius:16px;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.hfd-body.hot{background:linear-gradient(145deg,#e45f50,#e3a14c)}.hfd-body.cold{background:linear-gradient(145deg,#4c8bb3,#159b91)}.hfd-natural{font-size:9px;font-weight:900;color:#e45f50}.hfd-reverse{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);color:#8ba8ba;font-size:8px;font-weight:900}.hfd-work{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:8px;font-weight:900;white-space:nowrap}.heat-flow-direction-note,.second-law-engine-note,.blackbody-spectrum-note,.energy-quanta-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.heat-flow-direction-note b,.second-law-engine-note b,.blackbody-spectrum-note b,.energy-quanta-note b{color:#ffd08b}.physics-stage.playing .hfd-natural{animation:hfdFlow 1.6s ease-in-out infinite}.physics-stage.playing .hfd-reverse{animation:hfdReverse 2s ease-in-out infinite}@keyframes hfdFlow{0%,100%{opacity:.45;transform:translateX(-4px)}50%{opacity:1;transform:translateX(4px)}}@keyframes hfdReverse{0%,100%{opacity:.35}50%{opacity:1}}
.second-law-engine .sle-hot{position:absolute;left:50%;top:48px;transform:translateX(-50%);padding:8px 13px;border-radius:10px;background:#e45f50;color:#fff;font-size:9px;font-weight:900}.sle-engine{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:82px;height:60px;border-radius:12px;background:#4c8bb3;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}.sle-work{position:absolute;right:44px;top:100px;color:#159b91;font-size:9px;font-weight:900}.sle-cold{position:absolute;left:50%;bottom:83px;transform:translateX(-50%);padding:7px 12px;border-radius:10px;background:#159b91;color:#fff;font-size:8px;font-weight:900}.sle-formula{position:absolute;left:50%;bottom:55px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:10px;font-weight:900}.second-law-engine-note{position:absolute}.physics-stage.playing .sle-engine{animation:enginePulse 2s ease-in-out infinite}.physics-stage.playing .sle-work{animation:workPulse 2s ease-in-out infinite}@keyframes enginePulse{0%,100%{box-shadow:0 0 0 0 rgba(76,139,179,.08)}50%{box-shadow:0 0 0 8px rgba(76,139,179,.13)}}@keyframes workPulse{0%,100%{opacity:.45}50%{opacity:1}}
.blackbody-spectrum svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.bb-legend{position:absolute;right:20px;top:104px;display:flex;flex-direction:column;gap:6px;font-size:7px;font-weight:900}.bb-legend span{display:flex;align-items:center;gap:5px}.bb-legend span:before{content:"";width:17px;height:3px;border-radius:3px}.bb-legend .cool{color:#4c8bb3}.bb-legend .cool:before{background:#4c8bb3}.bb-legend .hot{color:#e45f50}.bb-legend .hot:before{background:#e45f50}.blackbody-spectrum-note{position:absolute}.physics-stage.playing .blackbody-spectrum svg{animation:bbGlow 2.3s ease-in-out infinite}@keyframes bbGlow{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
.energy-quanta .eq-oscillator{position:absolute;left:45px;top:78px;width:88px;height:88px;border-radius:50%;border:3px solid #4c8bb3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#31536d;font-size:8px;font-weight:900}.eq-wave{width:52px;height:25px;border-top:3px solid #159b91;border-radius:50%;transform:rotate(-5deg)}.eq-arrow{position:absolute;left:151px;top:111px;color:#8ba8ba;font-size:18px;font-weight:900}.eq-steps{position:absolute;right:38px;top:59px;width:118px;display:flex;flex-direction:column-reverse;gap:4px}.eq-steps span{padding:4px 6px;border-radius:6px;background:rgba(76,139,179,.12);color:#31536d;font-size:7px;font-weight:900}.eq-steps span:first-child{background:#e3a14c;color:#fff}.eq-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.energy-quanta-note{position:absolute}.physics-stage.playing .eq-steps span{animation:quantumStep 2.2s ease-in-out infinite}.physics-stage.playing .eq-steps span:nth-child(2){animation-delay:.15s}.physics-stage.playing .eq-steps span:nth-child(3){animation-delay:.3s}.physics-stage.playing .eq-steps span:nth-child(4){animation-delay:.45s}.physics-stage.playing .eq-steps span:nth-child(5){animation-delay:.6s}@keyframes quantumStep{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(-4px)}}
@media(max-width:420px){.hfd-body{width:96px}.sle-work{right:24px}.eq-oscillator{left:26px}.eq-steps{right:20px;width:108px}.bb-legend{right:12px}}

/* wl6-15 to wl6-16 */
.photoelectric-effect,.photon-energy-graph,.alpha-scattering,.nuclear-model{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.pe-plate{position:absolute;left:75px;top:66px;width:105px;height:150px;border-radius:12px;background:linear-gradient(135deg,#8ba8ba,#6c91aa);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900;box-shadow:0 8px 18px rgba(32,76,120,.15)}.pe-photon{position:absolute;color:#e45f50;font-size:10px;font-weight:900;animation:pePhoton 2s linear infinite}.pe-photon.one{left:33px;top:72px}.pe-photon.two{left:33px;top:116px;animation-delay:.5s}.pe-photon.three{left:33px;top:158px;animation-delay:1s}.pe-electron{position:absolute;color:#159b91;font-size:10px;font-weight:900;animation:peElectron 2s ease-out infinite}.pe-electron.one{right:69px;top:88px}.pe-electron.two{right:45px;top:144px;animation-delay:.4s}.pe-arrow{position:absolute;right:118px;top:104px;color:#8ba8ba;font-size:20px}.photoelectric-effect-note,.photon-energy-graph-note,.alpha-scattering-note,.nuclear-model-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.photoelectric-effect-note b,.photon-energy-graph-note b,.alpha-scattering-note b,.nuclear-model-note b{color:#ffd08b}@keyframes pePhoton{0%{transform:translateX(0);opacity:.3}50%{opacity:1}100%{transform:translateX(46px);opacity:0}}@keyframes peElectron{0%{transform:translateX(0);opacity:.35}50%{opacity:1}100%{transform:translateX(42px);opacity:0}}
.photon-energy-graph svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.photon-energy-graph-note{position:absolute}.physics-stage.playing .photon-energy-graph svg{animation:peGraph 2.2s ease-in-out infinite}@keyframes peGraph{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
.as-nucleus{position:absolute;left:161px;top:88px;width:20px;height:20px;border-radius:50%;background:#e45f50;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900;z-index:3;box-shadow:0 0 0 5px rgba(228,95,80,.12)}.alpha-scattering svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.as-most{position:absolute;right:24px;top:83px;color:#4c8bb3;font-size:8px;font-weight:900}.as-few{position:absolute;right:30px;bottom:85px;color:#e45f50;font-size:8px;font-weight:900}.alpha-scattering-note{position:absolute}.physics-stage.playing .as-nucleus{animation:nucleusPulse 1.8s ease-in-out infinite}@keyframes nucleusPulse{0%,100%{box-shadow:0 0 0 3px rgba(228,95,80,.08)}50%{box-shadow:0 0 0 10px rgba(228,95,80,.16)}}
.nm-atom{position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(76,139,179,.28)}.nm-nucleus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#e45f50;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900;z-index:3}.nm-nucleus small{position:absolute;top:22px;color:#e45f50;font-size:6px;white-space:nowrap}.nm-orbit{position:absolute;left:50%;top:50%;border:2px solid rgba(76,139,179,.35);border-radius:50%;transform:translate(-50%,-50%)}.nm-orbit.one{width:114px;height:64px;transform:translate(-50%,-50%) rotate(25deg)}.nm-orbit.two{width:114px;height:64px;transform:translate(-50%,-50%) rotate(-35deg)}.nm-orbit.three{width:114px;height:64px;transform:translate(-50%,-50%) rotate(88deg)}.nm-orbit i{position:absolute;left:50%;top:-8px;width:17px;height:17px;border-radius:50%;background:#4c8bb3;color:#fff;display:grid;place-items:center;font-size:6px;font-style:normal;font-weight:900}.nm-scale{position:absolute;left:50%;bottom:59px;transform:translateX(-50%);font-size:8px;color:#31536d;font-weight:900;text-align:center}.nm-scale small{display:block;margin-top:4px;color:#6a8093;font-size:7px}.nuclear-model-note{position:absolute}.physics-stage.playing .nm-orbit.one{animation:orbitOne 5s linear infinite}.physics-stage.playing .nm-orbit.two{animation:orbitTwo 6s linear infinite reverse}.physics-stage.playing .nm-orbit.three{animation:orbitThree 7s linear infinite}@keyframes orbitOne{from{transform:translate(-50%,-50%) rotate(25deg)}to{transform:translate(-50%,-50%) rotate(385deg)}}@keyframes orbitTwo{from{transform:translate(-50%,-50%) rotate(-35deg)}to{transform:translate(-50%,-50%) rotate(325deg)}}@keyframes orbitThree{from{transform:translate(-50%,-50%) rotate(88deg)}to{transform:translate(-50%,-50%) rotate(448deg)}}
@media(max-width:420px){.pe-plate{left:57px;width:95px}.pe-photon.one,.pe-photon.two,.pe-photon.three{left:18px}.nm-atom{width:210px;height:210px}.nm-scale{bottom:57px}}

/* wl6-17 to wl6-18 */
.hydrogen-spectrum,.bohr-transition,.matter-wave,.quantum-probability{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.hs-prism{position:absolute;left:45px;top:47px;width:0;height:0;border-left:35px solid transparent;border-right:35px solid transparent;border-bottom:80px solid rgba(76,139,179,.35)}.hs-spectrum{position:absolute;left:129px;top:72px;width:150px;height:20px;background:linear-gradient(90deg,#6a5acd,#4c8bb3,#e45f50);border-radius:4px;opacity:.28;transform:skewY(-8deg)}.hs-lines{position:absolute;left:145px;top:67px;width:126px;height:30px}.hs-lines i{position:absolute;height:30px;width:3px;border-radius:2px}.hs-lines .one{left:8px;background:#8e44ad}.hs-lines .two{left:47px;background:#3498db}.hs-lines .three{left:73px;background:#e45f50}.hs-lines .four{left:102px;background:#e3a14c}.hs-labels{position:absolute;left:128px;right:35px;top:111px;display:flex;justify-content:space-between;color:#6a8093;font-size:7px;font-weight:900}.hydrogen-spectrum-note,.bohr-transition-note,.matter-wave-note,.quantum-probability-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.hydrogen-spectrum-note b,.bohr-transition-note b,.matter-wave-note b,.quantum-probability-note b{color:#ffd08b}.physics-stage.playing .hs-lines i{animation:hsLine 2.2s ease-in-out infinite}.physics-stage.playing .hs-lines i:nth-child(2){animation-delay:.2s}.physics-stage.playing .hs-lines i:nth-child(3){animation-delay:.4s}.physics-stage.playing .hs-lines i:nth-child(4){animation-delay:.6s}@keyframes hsLine{0%,100%{opacity:.35;transform:scaleY(.75)}50%{opacity:1;transform:scaleY(1.1)}}
.bt-levels{position:absolute;left:70px;top:55px;width:120px;height:160px;display:flex;flex-direction:column;justify-content:space-between;color:#31536d;font-size:8px;font-weight:900}.bt-levels span{padding-left:8px;border-top:2px solid #8ba8ba}.bt-levels .n4{border-color:#7d5bb3}.bt-levels .n3{border-color:#4c8bb3}.bt-levels .n2{border-color:#159b91}.bt-levels .n1{border-color:#e45f50}.bt-electron{position:absolute;right:100px;top:63px;width:24px;height:24px;border-radius:50%;background:#e3a14c;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900;z-index:3}.bt-arrow{position:absolute;right:108px;top:82px;width:2px;height:67px;border-left:3px solid #e45f50;border-bottom:0}.bt-arrow:after{content:"";position:absolute;left:-6px;bottom:-8px;border-top:8px solid #e45f50;border-left:5px solid transparent;border-right:5px solid transparent}.bt-photon{position:absolute;right:30px;bottom:83px;padding:6px 9px;border-radius:8px;background:#ffd08b;color:#7a5a00;font-size:8px;font-weight:900}.bohr-transition-note{position:absolute}.physics-stage.playing .bt-electron{animation:btDrop 2.4s ease-in-out infinite}.physics-stage.playing .bt-photon{animation:btPhoton 2.4s ease-in-out infinite}@keyframes btDrop{0%,100%{transform:translateY(0)}50%{transform:translateY(66px)}}@keyframes btPhoton{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}
.mw-gun{position:absolute;left:25px;top:80px;padding:8px 10px;border-radius:8px;background:#4c8bb3;color:#fff;font-size:8px;font-weight:900}.mw-beam{position:absolute;left:87px;right:150px;top:94px;height:3px;background:#e45f50}.mw-crystal{position:absolute;left:50%;top:76px;transform:translateX(-50%);width:34px;height:70px;border-radius:5px;background:repeating-linear-gradient(45deg,#8ba8ba,#8ba8ba 5px,#dcebf1 5px,#dcebf1 10px)}.mw-screen{position:absolute;right:23px;top:54px;width:76px;height:130px;border:2px solid #8ba8ba;border-radius:8px;background:#fff;display:flex;justify-content:space-around;align-items:center}.mw-screen i{display:block;width:7px;height:88px;border-radius:99px;background:repeating-linear-gradient(0deg,#4c8bb3 0 4px,transparent 4px 10px);opacity:.65}.mw-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:12px;font-weight:900}.matter-wave-note{position:absolute}.physics-stage.playing .mw-screen i{animation:mwFringe 2s ease-in-out infinite}.physics-stage.playing .mw-screen i:nth-child(2){animation-delay:.15s}.physics-stage.playing .mw-screen i:nth-child(3){animation-delay:.3s}.physics-stage.playing .mw-screen i:nth-child(4){animation-delay:.45s}.physics-stage.playing .mw-screen i:nth-child(5){animation-delay:.6s}@keyframes mwFringe{0%,100%{opacity:.25;transform:scaleY(.9)}50%{opacity:.95;transform:scaleY(1.04)}}
.qp-cloud{position:absolute;left:50%;top:50%;width:200px;height:160px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(76,139,179,.18),rgba(76,139,179,.03));border:1px dashed rgba(76,139,179,.35)}.qp-cloud i{position:absolute;width:9px;height:9px;border-radius:50%;background:#4c8bb3}.qp-cloud i:nth-child(1){left:38px;top:36px}.qp-cloud i:nth-child(2){left:78px;top:22px}.qp-cloud i:nth-child(3){left:127px;top:40px}.qp-cloud i:nth-child(4){left:156px;top:75px}.qp-cloud i:nth-child(5){left:49px;top:80px}.qp-cloud i:nth-child(6){left:104px;top:67px}.qp-cloud i:nth-child(7){left:77px;top:112px}.qp-cloud i:nth-child(8){left:137px;top:119px}.qp-cloud i:nth-child(9){left:26px;top:115px}.qp-cloud i:nth-child(10){left:167px;top:110px}.qp-cloud i:nth-child(11){left:58px;top:134px}.qp-cloud i:nth-child(12){left:112px;top:140px}.qp-nucleus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:#e45f50;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900;z-index:3}.qp-prob{position:absolute;right:33px;top:55px;color:#4c8bb3;font-size:8px;font-weight:900}.qp-uncertainty{position:absolute;left:28px;bottom:87px;color:#e45f50;font-size:7px;font-weight:900;text-align:center}.quantum-probability-note{position:absolute}.physics-stage.playing .qp-cloud i{animation:qpCloud 2.4s ease-in-out infinite}.physics-stage.playing .qp-cloud i:nth-child(2n){animation-delay:.25s}.physics-stage.playing .qp-cloud i:nth-child(3n){animation-delay:.5s}@keyframes qpCloud{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:420px){.hs-prism{left:29px}.hs-spectrum{left:105px;width:130px}.hs-lines{left:120px;width:110px}.hs-labels{left:106px}.bt-levels{left:48px}.bt-electron{right:77px}.bt-arrow{right:84px}.bt-photon{right:14px}.mw-gun{left:12px}.mw-beam{left:72px;right:125px}.mw-screen{right:12px;width:68px}.qp-cloud{width:184px}.qp-prob{right:14px}}

/* wl6-19 to wl6-20 */
.nucleus-composition,.isotopes,.decay-types,.half-life{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.nc-nucleus{position:absolute;left:50%;top:54px;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;background:rgba(228,95,80,.08);border:2px dashed #e45f50}.nc-nucleus i{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}.nc-nucleus .p{background:#e45f50}.nc-nucleus .n{background:#4c8bb3}.nc-nucleus .p.one{left:18px;top:20px}.nc-nucleus .p.two{right:18px;top:20px}.nc-nucleus .n.one{left:18px;bottom:20px}.nc-nucleus .n.two{right:18px;bottom:20px}.nc-nucleus .p.three{left:58px;top:58px}.nc-legend{position:absolute;right:30px;top:59px;display:flex;flex-direction:column;gap:7px;font-size:8px;font-weight:900}.nc-legend span{display:flex;align-items:center;gap:5px}.nc-legend span:before{content:"";width:12px;height:12px;border-radius:50%}.nc-legend .p{color:#e45f50}.nc-legend .p:before{background:#e45f50}.nc-legend .n{color:#4c8bb3}.nc-legend .n:before{background:#4c8bb3}.nc-formula{position:absolute;left:50%;bottom:57px;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:13px;font-weight:900}.nucleus-composition-note,.isotopes-note,.decay-types-note,.half-life-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.nucleus-composition-note b,.isotopes-note b,.decay-types-note b,.half-life-note b{color:#ffd08b}.physics-stage.playing .nc-nucleus i{animation:ncPulse 1.8s ease-in-out infinite}.physics-stage.playing .nc-nucleus i:nth-child(2n){animation-delay:.3s}@keyframes ncPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
.isotopes{gap:8px;padding:14px 14px 100px}.iso-atom{width:31%;height:160px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.iso-atom b{font-size:9px;color:#31536d}.iso-atom span{font-size:7px;color:#6a8093}.iso-nuc{width:78px;height:78px;border-radius:50%;border:2px dashed #8ba8ba;position:relative}.iso-nuc i{position:absolute;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:7px;font-weight:900}.iso-nuc .p{background:#e45f50}.iso-nuc .n{background:#4c8bb3}.iso-nuc i:nth-child(1){left:28px;top:27px}.iso-nuc i:nth-child(2){left:10px;top:11px}.iso-nuc i:nth-child(3){right:10px;top:11px}.iso-nuc i:nth-child(4){left:10px;bottom:10px}.isotopes-note{position:absolute}.physics-stage.playing .iso-nuc i{animation:ncPulse 2s ease-in-out infinite}.physics-stage.playing .iso-nuc i:nth-child(2n){animation-delay:.3s}
.decay-types{gap:8px;padding:14px 14px 100px}.dt-card{width:31%;height:170px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}.dt-card b{font-size:9px;color:#31536d}.dt-card span{font-size:8px;color:#e45f50;font-weight:900}.dt-card em{font-size:7px;font-style:normal;color:#6a8093}.dt-card.alpha{border-top:4px solid #e45f50}.dt-card.beta{border-top:4px solid #4c8bb3}.dt-card.gamma{border-top:4px solid #159b91}.decay-types-note{position:absolute}.physics-stage.playing .dt-card{animation:dtCard 2.1s ease-in-out infinite}.physics-stage.playing .dt-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .dt-card:nth-child(3){animation-delay:.4s}@keyframes dtCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.half-life svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.hl-half,.hl-quarter{position:absolute;padding:4px 7px;border-radius:7px;background:#159b91;color:#fff;font-size:8px;font-weight:900}.hl-half{left:78px;top:111px}.hl-quarter{left:148px;top:137px}.half-life-note{position:absolute}.physics-stage.playing .half-life svg{animation:hlGlow 2.2s ease-in-out infinite}@keyframes hlGlow{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
@media(max-width:420px){.nc-legend{right:14px}.iso-atom{height:150px}.iso-nuc{transform:scale(.9)}.dt-card{height:160px}.hl-half{left:64px}.hl-quarter{left:128px}}

/* wl6-21 to wl6-22 */
.nuclear-force,.binding-energy-curve,.nuclear-fission,.nuclear-fusion{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.nf-core{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:150px;height:140px;border-radius:50%;border:2px dashed #8ba8ba}.nf-core i{position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}.nf-core .p{background:#e45f50}.nf-core .n{background:#4c8bb3}.nf-core .p.one{left:26px;top:23px}.nf-core .p.two{right:26px;top:23px}.nf-core .n.one{left:26px;bottom:23px}.nf-core .n.two{right:26px;bottom:23px}.nf-arrow{position:absolute;color:#159b91;font-size:22px;font-weight:900}.nf-arrow.a{left:92px;top:116px}.nf-arrow.b{right:92px;top:116px}.nf-range{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#123b61;color:#ffd08b;font-size:8px;font-weight:900;white-space:nowrap}.nuclear-force-note,.binding-energy-curve-note,.nuclear-fission-note,.nuclear-fusion-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.nuclear-force-note b,.binding-energy-curve-note b,.nuclear-fission-note b,.nuclear-fusion-note b{color:#ffd08b}.physics-stage.playing .nf-core i{animation:nfPulse 1.7s ease-in-out infinite}.physics-stage.playing .nf-core i:nth-child(2n){animation-delay:.2s}@keyframes nfPulse{0%,100%{transform:scale(.95)}50%{transform:scale(1.06)}}
.binding-energy-curve svg{position:absolute;inset:10px 10px 38px;width:calc(100% - 20px);height:calc(100% - 48px)}.bec-fusion{position:absolute;left:98px;bottom:83px;color:#159b91;font-size:8px;font-weight:900}.bec-fission{position:absolute;right:34px;bottom:83px;color:#e45f50;font-size:8px;font-weight:900}.binding-energy-curve-note{position:absolute}.physics-stage.playing .binding-energy-curve svg{animation:becGlow 2.3s ease-in-out infinite}@keyframes becGlow{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
.nuclear-fission .nf-neutron{position:absolute;left:31px;top:99px;width:24px;height:24px;border-radius:50%;background:#159b91;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.nf-uranium{position:absolute;left:93px;top:83px;width:74px;height:58px;border-radius:50%;background:#e45f50;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.nf-fragment{position:absolute;width:54px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:7px;font-weight:900}.nf-fragment.f1{right:114px;top:69px;background:#e3a14c}.nf-fragment.f2{right:116px;bottom:76px;background:#4c8bb3}.nf-out{position:absolute;right:35px;width:19px;height:19px;border-radius:50%;background:#159b91;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:900}.nf-out.n1{top:55px}.nf-out.n2{top:94px}.nf-out.n3{bottom:68px}.nf-energy{position:absolute;right:65px;top:44px;color:#e45f50;font-size:8px;font-weight:900}.nuclear-fission-note{position:absolute}.physics-stage.playing .nf-neutron{animation:nfNeutron 2.3s ease-in-out infinite}.physics-stage.playing .nf-fragment{animation:nfSplit 2.3s ease-in-out infinite}.physics-stage.playing .nf-out{animation:nfOut 2.3s ease-in-out infinite}.physics-stage.playing .nf-out.n2{animation-delay:.2s}.physics-stage.playing .nf-out.n3{animation-delay:.4s}@keyframes nfNeutron{0%,100%{transform:translateX(0)}50%{transform:translateX(48px)}}@keyframes nfSplit{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.03)}}@keyframes nfOut{0%,100%{opacity:.35}50%{opacity:1}}
.nuclear-fusion .nf-d,.nuclear-fusion .nf-t,.nuclear-fusion .nf-he,.nuclear-fusion .nf-n{position:absolute;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}.nf-d{left:47px;top:91px;width:48px;height:48px;background:#4c8bb3}.nf-t{left:126px;top:91px;width:56px;height:56px;background:#e3a14c}.nf-plus{position:absolute;left:105px;top:107px;font-size:18px;color:#8ba8ba}.nf-arrow{position:absolute;left:216px;top:109px;font-size:20px;color:#8ba8ba}.nf-he{right:54px;top:84px;width:62px;height:62px;background:#e45f50}.nf-n{right:17px;top:147px;width:20px;height:20px;background:#159b91;font-size:7px}.nf-energy-fusion{position:absolute;right:33px;bottom:78px;color:#e45f50;font-size:8px;font-weight:900}.nuclear-fusion-note{position:absolute}.physics-stage.playing .nf-d{animation:fusionD 2.4s ease-in-out infinite}.physics-stage.playing .nf-t{animation:fusionT 2.4s ease-in-out infinite}.physics-stage.playing .nf-he{animation:fusionHe 2.4s ease-in-out infinite}.physics-stage.playing .nf-energy-fusion{animation:fusionEnergy 2.4s ease-in-out infinite}@keyframes fusionD{0%,100%{transform:translateX(0)}50%{transform:translateX(25px)}}@keyframes fusionT{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}@keyframes fusionHe{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.04)}}@keyframes fusionEnergy{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:420px){.nf-arrow.a{left:74px}.nf-arrow.b{right:74px}.nuclear-fission .nf-fragment.f1{right:94px}.nuclear-fission .nf-fragment.f2{right:96px}.nf-d{left:32px}.nf-t{left:109px}.nf-he{right:39px}.nuclear-fusion .nf-arrow{left:193px}}

/* wl6-23 */
.particle-family,.quark-hadron{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.particle-family{gap:8px;padding:14px 14px 100px}.pf-card{width:31%;height:165px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:8px}.pf-card b{font-size:9px;color:#31536d}.pf-card span{font-size:7px;color:#6a8093}.pf-card em{font-size:7px;font-style:normal;color:#e45f50;font-weight:900}.pf-card.quarks{border-top:4px solid #e45f50}.pf-card.leptons{border-top:4px solid #4c8bb3}.pf-card.bosons{border-top:4px solid #159b91}.particle-family-note,.quark-hadron-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.particle-family-note b,.quark-hadron-note b{color:#ffd08b}.physics-stage.playing .pf-card{animation:pfCard 2.1s ease-in-out infinite}.physics-stage.playing .pf-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .pf-card:nth-child(3){animation-delay:.4s}@keyframes pfCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.quark-hadron{gap:28px;padding:14px 14px 100px}.qh-card{width:150px;height:170px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.qh-card b{font-size:10px;color:#31536d}.qh-card span{font-size:8px;color:#6a8093;font-weight:900}.qh-particles{display:flex;gap:5px}.qh-particles i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:8px;font-style:normal;font-weight:900}.qh-particles .u{background:#e45f50}.qh-particles .d{background:#4c8bb3}.qh-card.proton{border-top:4px solid #e45f50}.qh-card.neutron{border-top:4px solid #4c8bb3}.quark-hadron-note{position:absolute}.physics-stage.playing .qh-particles i{animation:qhPulse 1.8s ease-in-out infinite}.physics-stage.playing .qh-particles i:nth-child(2){animation-delay:.2s}.physics-stage.playing .qh-particles i:nth-child(3){animation-delay:.4s}@keyframes qhPulse{0%,100%{transform:scale(.95)}50%{transform:scale(1.06)}}
@media(max-width:420px){.pf-card{height:155px}.qh-card{width:136px;height:160px}.quark-hadron{gap:16px}}

/* wl7-01 to wl7-02 */
.mechanics-motion-map,.mechanics-model-choice,.em-field-map,.em-problem-strategy{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.mmm-center,.emf-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;background:#123b61;color:#ffd08b;display:grid;place-items:center;font-size:10px;font-weight:900;z-index:3;box-shadow:0 8px 20px rgba(24,40,72,.18)}.mmm-node,.emf-node{position:absolute;width:90px;height:53px;border-radius:12px;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900;text-align:center;padding:5px}.mmm-node.motion{left:28px;top:44px;background:#e3a14c}.mmm-node.energy{right:28px;top:44px;background:#e45f50}.mmm-node.momentum{left:28px;bottom:78px;background:#4c8bb3}.mmm-node.process{right:28px;bottom:78px;background:#159b91}.mechanics-motion-map-note,.mechanics-model-choice-note,.em-field-map-note,.em-problem-strategy-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.mechanics-motion-map-note b,.mechanics-model-choice-note b,.em-field-map-note b,.em-problem-strategy-note b{color:#ffd08b}.physics-stage.playing .mmm-node,.physics-stage.playing .emf-node{animation:mindPulse 2.2s ease-in-out infinite}.physics-stage.playing .mmm-node:nth-child(3),.physics-stage.playing .emf-node:nth-child(3){animation-delay:.2s}.physics-stage.playing .mmm-node:nth-child(4),.physics-stage.playing .emf-node:nth-child(4){animation-delay:.4s}.physics-stage.playing .mmm-node:nth-child(5),.physics-stage.playing .emf-node:nth-child(5){animation-delay:.6s}@keyframes mindPulse{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}
.mechanics-model-choice,.em-problem-strategy{gap:8px;padding:14px 14px 100px}.mmc-card,.eps-card{width:31%;height:170px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:7px}.mmc-card b,.eps-card b{font-size:9px;color:#31536d}.mmc-card span,.eps-card span{font-size:7px;color:#6a8093}.mmc-card em,.eps-card em{font-size:7px;font-style:normal;color:#e45f50;font-weight:900}.mmc-card.force{border-top:4px solid #e3a14c}.mmc-card.energy{border-top:4px solid #e45f50}.mmc-card.momentum{border-top:4px solid #4c8bb3}.eps-card.force{border-top:4px solid #e3a14c}.eps-card.charge{border-top:4px solid #4c8bb3}.eps-card.energy{border-top:4px solid #159b91}.mechanics-model-choice-note,.em-problem-strategy-note{position:absolute}.physics-stage.playing .mmc-card,.physics-stage.playing .eps-card{animation:mmCard 2.1s ease-in-out infinite}.physics-stage.playing .mmc-card:nth-child(2),.physics-stage.playing .eps-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .mmc-card:nth-child(3),.physics-stage.playing .eps-card:nth-child(3){animation-delay:.4s}@keyframes mmCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.emf-node.field{left:28px;top:44px;background:#e45f50}.emf-node.circuit{right:28px;top:44px;background:#4c8bb3}.emf-node.induction{left:28px;bottom:78px;background:#e3a14c}.emf-node.energy-sys{right:28px;bottom:78px;background:#159b91}.em-field-map-note{position:absolute}
@media(max-width:420px){.mmm-node,.emf-node{width:82px;height:49px}.mmc-card,.eps-card{height:160px}.emf-node.field,.emf-node.induction{left:18px}.emf-node.circuit,.emf-node.energy-sys{right:18px}}

/* wl7-03 to wl7-04 */
.thermal-optics-atomic-map,.cross-topic-strategy,.experiment-loop,.graph-data-processing{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.toa-center,.el-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:#123b61;color:#ffd08b;display:grid;place-items:center;font-size:10px;font-weight:900;z-index:3}.toa-node{position:absolute;width:96px;height:62px;border-radius:12px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:900}.toa-node small{font-size:6px;opacity:.88}.toa-node.thermal{left:26px;top:43px;background:#e45f50}.toa-node.optics{right:26px;top:43px;background:#e3a14c}.toa-node.atomic{left:50%;bottom:45px;transform:translateX(-50%);background:#4c8bb3}.thermal-optics-atomic-map-note,.cross-topic-strategy-note,.experiment-loop-note,.graph-data-processing-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.thermal-optics-atomic-map-note b,.cross-topic-strategy-note b,.experiment-loop-note b,.graph-data-processing-note b{color:#ffd08b}.physics-stage.playing .toa-node,.physics-stage.playing .el-node{animation:toaPulse 2.2s ease-in-out infinite}.physics-stage.playing .toa-node:nth-child(3),.physics-stage.playing .el-node:nth-child(3){animation-delay:.2s}.physics-stage.playing .toa-node:nth-child(4),.physics-stage.playing .el-node:nth-child(4){animation-delay:.4s}@keyframes toaPulse{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}
.cross-topic-strategy{gap:5px;padding:14px 8px 100px}.cts-step{width:20%;height:118px;border-radius:13px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}.cts-step b{font-size:7px;color:#31536d}.cts-step span{font-size:6px;color:#6a8093}.cts-step.one{border-top:4px solid #e45f50}.cts-step.two{border-top:4px solid #e3a14c}.cts-step.three{border-top:4px solid #4c8bb3}.cts-step.four{border-top:4px solid #159b91}.cts-arrow{color:#8ba8ba;font-size:12px;font-weight:900}.cross-topic-strategy-note{position:absolute}.physics-stage.playing .cts-step{animation:ctsPulse 2s ease-in-out infinite}.physics-stage.playing .cts-step:nth-child(3){animation-delay:.2s}.physics-stage.playing .cts-step:nth-child(5){animation-delay:.4s}.physics-stage.playing .cts-step:nth-child(7){animation-delay:.6s}@keyframes ctsPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.el-node{position:absolute;width:84px;height:48px;border-radius:11px;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.el-node.purpose{left:50%;top:37px;transform:translateX(-50%);background:#e45f50}.el-node.principle{right:39px;top:103px;background:#e3a14c}.el-node.operation{right:60px;bottom:68px;background:#4c8bb3}.el-node.data{left:60px;bottom:68px;background:#159b91}.el-node.error{left:39px;top:103px;background:#7d5bb3}.experiment-loop-note{position:absolute}.physics-stage.playing .el-node{animation:toaPulse 2.2s ease-in-out infinite}.physics-stage.playing .el-node.principle{animation-delay:.2s}.physics-stage.playing .el-node.operation{animation-delay:.4s}.physics-stage.playing .el-node.data{animation-delay:.6s}.physics-stage.playing .el-node.error{animation-delay:.8s}
.graph-data-processing{gap:8px;padding:14px 14px 100px}.gdp-table{width:80px;height:154px;border-radius:12px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;place-items:center;font-size:7px;color:#31536d}.gdp-table span{font-weight:900;background:#e8eef2;width:100%;height:100%;display:grid;place-items:center}.gdp-table i{font-style:normal}.graph-data-processing svg{width:190px;height:170px}.gdp-slope{position:absolute;right:39px;top:75px;padding:4px 7px;border-radius:7px;background:#e45f50;color:#fff;font-size:7px;font-weight:900}.graph-data-processing-note{position:absolute}.physics-stage.playing .graph-data-processing svg{animation:gdpGlow 2.2s ease-in-out infinite}@keyframes gdpGlow{0%,100%{filter:brightness(.96)}50%{filter:brightness(1.1)}}
@media(max-width:420px){.toa-node{width:88px}.cross-topic-strategy{padding-left:3px;padding-right:3px}.cts-step{height:110px}.el-node{width:78px}.gdp-table{width:70px}.graph-data-processing svg{width:176px}}

/* wl7-05 */
.exam-strategy-map,.calculation-answer{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#f8fdff,#e5f0f8);overflow:hidden}
.exam-strategy-map{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 14px 100px}.esm-card{height:105px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.esm-card b{font-size:9px;color:#31536d}.esm-card span{font-size:7px;color:#6a8093}.esm-card.choice{border-top:4px solid #e45f50}.esm-card.experiment{border-top:4px solid #e3a14c}.esm-card.calculation{border-top:4px solid #4c8bb3}.esm-card.graph{border-top:4px solid #159b91}.exam-strategy-map-note,.calculation-answer-note{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;padding:8px 11px;border-radius:11px;background:#123b61;color:#fff;font-size:8px;z-index:5}.exam-strategy-map-note b,.calculation-answer-note b{color:#ffd08b}.physics-stage.playing .esm-card{animation:examCard 2.1s ease-in-out infinite}.physics-stage.playing .esm-card:nth-child(2){animation-delay:.2s}.physics-stage.playing .esm-card:nth-child(3){animation-delay:.4s}.physics-stage.playing .esm-card:nth-child(4){animation-delay:.6s}@keyframes examCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.calculation-answer{gap:5px;padding:14px 8px 100px}.ca-step{width:20%;height:118px;border-radius:13px;background:rgba(255,255,255,.92);border:1px solid rgba(32,76,120,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}.ca-step b{font-size:7px;color:#31536d}.ca-step span{font-size:6px;color:#6a8093}.ca-step.one{border-top:4px solid #e45f50}.ca-step.two{border-top:4px solid #e3a14c}.ca-step.three{border-top:4px solid #4c8bb3}.ca-step.four{border-top:4px solid #159b91}.ca-arrow{color:#8ba8ba;font-size:12px;font-weight:900}.calculation-answer-note{position:absolute}.physics-stage.playing .ca-step{animation:caPulse 2s ease-in-out infinite}.physics-stage.playing .ca-step:nth-child(3){animation-delay:.2s}.physics-stage.playing .ca-step:nth-child(5){animation-delay:.4s}.physics-stage.playing .ca-step:nth-child(7){animation-delay:.6s}@keyframes caPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:420px){.exam-strategy-map{padding-left:10px;padding-right:10px}.esm-card{height:98px}.calculation-answer{padding-left:3px;padding-right:3px}.ca-step{height:110px}}