:root{--paper:#f5f2eb;--white:#fffdf9;--ink:#20302e;--muted:#6e7873;--brand:#ed762b;--brand-dark:#c95a19;--green:#256b55;--mint:#e9f5eb;--line:#e7e3dc;--light:#f8f6f1;--shadow:0 18px 45px rgba(41,48,35,.07);--focus:#ffb758}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:'Aptos','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}a{color:var(--green)}.initial{padding:34px;text-align:center}.app{min-height:100dvh;display:flex;flex-direction:column}.shell{width:min(100%,865px);margin:0 auto;padding:0 25px}.top{padding:19px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:43px;height:43px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#fa974b,#e66b25);border-radius:15px;box-shadow:0 5px 14px #ee772b24;font-size:23px}.brand-words strong{display:block;line-height:1.15;letter-spacing:-.6px;font-size:17px;font-weight:850}.brand-words span{display:block;font-size:10px;font-weight:650;color:var(--muted);letter-spacing:.35px;margin-top:3px}.top-actions{display:flex;align-items:center;gap:7px}.quiet-btn{border:1px solid #dddcd5;background:#fffcf8;color:#53645d;padding:8px 11px;border-radius:12px;font-size:12px;font-weight:750}.mini-pill{font-size:11px;font-weight:750;color:#4b7d64;background:#e9f3e9;border:1px solid #cde4d1;padding:8px 12px;border-radius:30px}.progress-wrap{margin:14px 0 7px}.progress-meta{display:flex;justify-content:space-between;color:#6c7770;font-size:12px;font-weight:800;letter-spacing:.1px;margin-bottom:10px}.progress-track{height:6px;background:#e6e1d9;border-radius:40px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#ed762b,#efa759);border-radius:40px;transition:width .38s ease}.main{width:min(100%,865px);margin:0 auto;flex:1;padding:14px 25px 25px;display:flex;flex-direction:column;justify-content:center}.panel{background:var(--white);border:1px solid #ece8e0;border-radius:27px;box-shadow:var(--shadow);overflow:hidden}.panel-inner{padding:clamp(24px,5vw,54px)}.eyebrow{text-transform:uppercase;letter-spacing:1.3px;font-size:11px;font-weight:850;color:var(--green);margin:0 0 14px}.question{font-weight:880;letter-spacing:-1.4px;line-height:1.13;font-size:clamp(30px,4.9vw,49px);margin:0 0 15px;max-width:665px}.intro-title{font-size:clamp(34px,5.4vw,54px)}.sub{font-size:17px;color:#68756f;margin:0;max-width:585px}.choices{margin-top:28px;display:grid;gap:12px}.choice{width:100%;text-align:left;border:1.5px solid #e8e6df;background:#fdfbf7;border-radius:16px;min-height:69px;display:flex;align-items:center;gap:15px;padding:15px 17px;color:var(--ink);font-weight:775;font-size:17px;transition:transform .12s,border-color .12s,background .12s}.choice:hover{transform:translateY(-1px);border-color:#e9a574;background:#fffbf4}.choice:active{transform:scale(.995)}.choice-emoji{display:grid;place-items:center;flex:none;width:43px;height:43px;background:#f7eee3;border-radius:13px;font-size:23px}.choice-text{flex:1}.choice-arrow{color:#c2b9ac;font-size:22px}.bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px}.secondary{background:transparent;border:0;color:#596b62;font-size:14px;font-weight:775;padding:12px 0;text-decoration:underline;text-decoration-color:#c8cbc3;text-underline-offset:5px}.primary{border:0;border-radius:15px;background:linear-gradient(140deg,#f18c37,#ed762b);color:#fff;padding:16px 25px;font-size:16px;font-weight:825;box-shadow:0 9px 19px rgba(237,118,43,.21);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px}.primary:hover{filter:brightness(.98)}.primary.block{width:100%}.primary.green{background:var(--green);box-shadow:0 9px 19px #286b5422}.ghost{border:1px solid #dfddd4;background:var(--white);color:var(--ink);font-weight:775;border-radius:14px;padding:12px 16px;min-height:49px}.in-form{margin-top:28px;display:grid;gap:12px;max-width:470px}.field{display:block;width:100%;height:69px;border:1.5px solid #dcded6;background:#fff;border-radius:16px;padding:15px 18px;color:var(--ink);font-size:22px;font-weight:750;box-shadow:inset 0 2px 5px #eee9e33d}.field::placeholder{color:#adb3ab;font-weight:500}.unit-line{display:flex;gap:10px;align-items:stretch}.unit-line .field{flex:1;min-width:0}.unit-line select{width:128px;max-width:42%;border:1.5px solid #dcded6;background:#fff;border-radius:16px;padding:12px 7px;color:var(--ink);font-weight:750;font-size:16px}.hint{font-size:13px;color:#69786f;margin-top:12px}.lesson{display:flex;gap:13px;align-items:center;background:#e9f4eb;border:1px solid #d6e8db;border-radius:17px;margin-top:27px;padding:14px 15px}.lesson-icon{background:#fff;width:41px;height:41px;flex:none;display:grid;place-items:center;font-size:23px;border-radius:13px}.lesson-content{flex:1}.lesson-content strong{font-size:14px;display:block;color:#22543f}.lesson-content span{font-size:12px;color:#527561}.play-link{border:0;background:transparent;color:#226d53;text-align:left;font-size:13px;font-weight:850;padding:5px 0;text-decoration:underline;text-underline-offset:4px}.error{color:#ae3434;min-height:16px;font-size:13px;font-weight:700}.footer{width:min(100%,865px);margin:0 auto;padding:5px 25px 22px;text-align:center;color:#879087;font-size:11px}.footer span+span:before{content:' · '}.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(170px,.75fr);align-items:center;gap:25px}.hero .hero-copy{padding:clamp(27px,5vw,54px) 0 clamp(27px,5vw,54px) clamp(28px,5vw,54px)}.hero .sub{margin-bottom:29px}.hero-art{height:100%;min-height:340px;background:linear-gradient(158deg,#fff0d7,#fee0b2);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.art-disc{width:210px;height:210px;border-radius:100%;background:#f8bf7b;display:grid;place-items:center;font-size:105px;animation:bob 3.3s ease-in-out infinite;z-index:1;box-shadow:0 25px 45px #be7e3733}.art-bubble{position:absolute;font-size:33px;filter:drop-shadow(0 6px 8px #a9673522);animation:float 4s ease-in-out infinite}.art-bubble.a{left:8%;top:18%}.art-bubble.b{right:9%;bottom:14%;animation-delay:.9s}.art-bubble.c{left:13%;bottom:12%;animation-delay:1.4s}.inline-guide{margin-top:22px;padding:17px 19px;background:#f5f8ee;border-radius:15px;border:1px solid #e5ebdd;color:#596e5d;font-size:14px}.inline-guide strong{display:block;color:#2a6346;font-size:13px;margin-bottom:5px}.big-money{font-size:clamp(39px,6vw,64px);letter-spacing:-1.6px;font-weight:900;margin:23px 0 3px;line-height:1.15}.money-caption{color:var(--muted);font-size:16px}.unknown{background:#f7f4eb;border:1px solid #eee4d0;border-radius:15px;padding:17px;margin:23px 0 0;max-width:600px;color:#5d645e;font-size:15px}.result-details{display:grid;gap:8px;margin-top:28px;max-width:510px}.result-line{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:11px 0;color:#53645b;font-size:15px}.result-line strong{color:var(--ink)}.notice{margin-top:27px;padding:15px 17px;border-left:4px solid #eaa467;background:#fffaef;color:#766047;font-size:13px;border-radius:0 13px 13px 0}.tag{display:inline-flex;gap:6px;background:#fff0dc;border-radius:99px;color:#9f5a19;font-size:11px;font-weight:850;padding:6px 11px;letter-spacing:.3px}.separ{height:1px;background:var(--line);margin:23px 0}.micro-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}.micro-card{border:1px solid #ebe9e2;border-radius:14px;padding:16px 12px;background:#fcfaf5;text-align:left;cursor:pointer}.micro-card b{display:block;font-size:13px;margin-top:5px}.micro-card span{font-size:12px;color:#697971}.keep-learning{margin-top:24px;border:1px solid #e6ebdf;border-radius:14px;padding:18px;background:#f9fbf6}.keep-learning h3{font-size:16px;letter-spacing:-.25px;margin:0 0 5px}.keep-learning p{margin:0 0 12px;color:var(--muted);font-size:13px}.review-list{display:grid;gap:9px;margin-top:25px}.review-item{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:14px}.review-item strong{font-size:15px}.floating-mobile{display:none}
/* Original in-app animations, always with subtitles. */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,35,29,.67);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}.modal{width:min(100%,570px);max-height:min(93dvh,920px);overflow-y:auto;border-radius:23px;background:#fffdfa;box-shadow:0 25px 90px rgba(0,0,0,.24)}.modal-top{padding:17px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.modal-top .eyebrow{margin:0 0 4px}.modal-top strong{font-size:17px;line-height:1.3;letter-spacing:-.4px}.close{border:1px solid #dfdcd4;background:#fff;padding:5px 12px;font-size:24px;border-radius:12px;color:#41554a}.player{background:linear-gradient(145deg,#eef4e9,#fff0d9);min-height:235px;position:relative;overflow:hidden;border-block:1px solid #ece8e2}.player-scenery{height:209px;display:flex;align-items:center;justify-content:center;gap:7px;position:relative}.actor{font-size:105px;z-index:2;filter:drop-shadow(0 13px 9px #56654920);animation:bob 2.6s infinite}.stage-thing{z-index:3;font-size:65px;animation:bounce .9s .1s both;filter:drop-shadow(0 6px 12px #8f763728)}.stage-label{position:absolute;left:24px;top:18px;background:#fffef7;border:1px solid #e9e3d8;box-shadow:0 7px 15px #48614818;border-radius:14px;padding:9px 15px;font-size:17px;font-weight:880;letter-spacing:-.3px;animation:slidein .45s both}.stage-mark{position:absolute;right:-20px;bottom:-30px;width:155px;height:155px;border-radius:50%;background:#fff5e266}.video-caption{min-height:63px;background:#1e342c;color:#fff;padding:13px 22px;display:grid;place-items:center;text-align:center;font-size:15px;font-weight:700;line-height:1.3}.video-track{height:5px;background:#ddd8cd}.video-fill{height:100%;background:var(--brand);transition:width .2s linear}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:15px 17px}.ctrl{border:1px solid #dcded7;background:#fff;color:#274538;padding:11px 12px;border-radius:12px;font-size:13px;font-weight:825}.ctrl.highlight{background:#e9f4eb;border-color:#bcdac9}.story-detail{padding:3px 22px 24px}.story-detail p{font-size:14px;color:#59675f;margin:8px 0 14px}.story-detail strong{font-size:15px}.story-question{margin-top:13px;border-top:1px solid #eee9e0;padding-top:17px}.story-question h4{font-size:15px;margin:0 0 12px}.small-options{display:grid;gap:9px}.small-option{font-size:14px;text-align:left;background:#fbf9f2;border:1px solid #e6e3db;border-radius:12px;padding:12px 14px;color:#2b4033;font-weight:720}.small-option:hover{border-color:#e4a365}.feedback{padding:12px;border-radius:12px;background:#f1f6ec;color:#345e45;margin-top:10px;font-size:13px;line-height:1.5}.library{display:grid;gap:11px;margin:24px 0}.library-entry{border:1px solid #e7e6dd;border-radius:15px;background:#fffcf9;padding:15px;display:flex;align-items:center;gap:13px;text-align:left;width:100%;color:var(--ink)}.library-entry .icon{width:44px;height:44px;display:grid;place-items:center;background:#f9ecd9;border-radius:14px;font-size:25px}.library-entry strong{display:block;font-size:14px}.library-entry small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.library-level{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--green);font-weight:900;margin:25px 0 10px}.library-level:first-child{margin-top:0}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes bounce{0%{transform:translateX(20px) scale(.78);opacity:.25}70%{transform:translateX(-3px) scale(1.07);opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}@keyframes slidein{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:680px){.shell,.main,.footer{padding-left:15px;padding-right:15px}.top{padding:13px 0 11px}.brand-logo{width:39px;height:39px;border-radius:13px}.brand-words strong{font-size:16px}.brand-words span{font-size:9px}.mini-pill{display:none}.top-actions .quiet-btn{font-size:11px;padding:8px}.main{padding-top:8px;padding-bottom:12px;justify-content:flex-start}.panel{border-radius:24px}.panel-inner{padding:29px 22px}.question{font-size:clamp(30px,8vw,42px);letter-spacing:-1.1px}.intro-title{font-size:36px}.sub{font-size:16px}.choice{font-size:16px;min-height:65px;padding:11px 13px}.choice-emoji{width:40px;height:40px}.hero{grid-template-columns:1fr}.hero .hero-copy{padding:32px 24px 5px}.hero-art{height:165px;min-height:165px;order:-1}.art-disc{height:125px;width:125px;font-size:65px}.art-bubble{font-size:25px}.choices{margin-top:22px;gap:9px}.bottom{margin-top:24px}.primary{padding:15px 20px}.micro-cards{grid-template-columns:1fr}.micro-card{display:flex;align-items:center;gap:12px}.micro-card b{margin-top:0}.modal-backdrop{padding:8px;align-items:flex-end}.modal{max-height:96dvh;border-radius:22px 22px 15px 15px}.player-scenery{height:175px}.player{min-height:199px}.actor{font-size:82px}.stage-thing{font-size:52px}.stage-label{font-size:14px}.video-caption{font-size:14px;min-height:61px}.controls{justify-content:flex-start}.footer{padding-top:10px;font-size:10px}}@media(max-height:690px){.main{justify-content:flex-start}.panel-inner{padding-top:23px;padding-bottom:23px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* v0.4 · Cinematic micro-stories: vector characters, continuous motion and cleaner controls. */
.cinema-modal{width:min(100%,760px);background:#fffdf8;border-radius:22px}
.cinema-top{padding:14px 20px;align-items:center}
.cinema-top .eyebrow{font-size:9px;letter-spacing:1.2px;margin-bottom:3px}
.cinema-top strong{font-size:19px}
.film-player{border:0;background:#f5e6d0;min-height:0}
.cinema-visual{position:relative;overflow:hidden;aspect-ratio:900/510;background:#efd7b8}
.cinema-frame{position:absolute;inset:0;overflow:hidden}
.cinema-frame svg{width:100%;height:100%;display:block}
.cinema-note{position:absolute;top:16px;left:18px;z-index:5;border-radius:30px;font-size:10px;font-weight:900;letter-spacing:.65px;color:#315142;background:rgba(255,255,247,.92);padding:8px 12px;box-shadow:0 6px 18px #49321b19}
.cinema-overlay{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:36px 27px 18px;background:linear-gradient(0deg,#18352ccc 0,transparent 100%);color:#fff}
.cinema-kicker{font-size:10px;letter-spacing:1.8px;font-weight:850;color:#ffe0ab;text-shadow:0 1px 3px #17392e}
.cinema-headline{display:block;margin-top:5px;font-size:clamp(21px,4vw,31px);line-height:1.12;letter-spacing:-.8px;font-weight:900;text-shadow:0 2px 9px #18352c9c}
.cinema-visual .movie-person{transform-origin:185px 330px;animation:person-breathe 2.9s ease-in-out infinite}
.cinema-visual .movie-hand{transform-origin:254px 295px;animation:person-wave 3.1s ease-in-out infinite}
.cinema-visual .movie-object{transform-origin:145px 280px;animation:movie-enter .65s cubic-bezier(.2,.9,.2,1) both,object-breathe 4s 1s ease-in-out infinite}
.cinema-visual .movie-spark{transform-origin:center;animation:movie-twinkle 2s ease-in-out infinite}
.cinema-visual .movie-spoon{transform-origin:185px 204px;animation:person-wave 2.3s ease-in-out infinite}
.cinema-visual .movie-arrow{stroke-dasharray:350;stroke-dashoffset:350;animation:chart-draw 2.2s .4s ease-out forwards}
.cinema-visual .film-stars{animation:movie-twinkle 5s ease-in-out infinite}
.video-caption{min-height:68px;background:#203D32;text-align:left;display:flex;align-items:center;padding:16px 25px;font-weight:740;font-size:17px;line-height:1.42}
.video-fill{background:linear-gradient(90deg,#EAA05A,#F1D49A);height:100%}
.movie-controls{padding:12px 18px;justify-content:flex-start;gap:8px;background:#fffef9}
.movie-controls .ctrl{padding:10px 13px;border-radius:10px;font-size:12px}
.movie-controls .highlight{background:#254C3D;color:white;border-color:#254C3D}
.audio-note{color:#7A847B;font-size:11px;padding:0 20px 12px;line-height:1.4;background:#fffef9}
.story-preview{padding:13px 20px 18px;border-top:1px solid #f0ece5;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:#718076}
.show-takeaway{background:#edf5ee;color:#23593d;border:1px solid #d4e7d6;padding:9px 12px;border-radius:10px;font-weight:800}
.story-detail{padding:17px 22px 24px;border-top:1px solid #f2ecdf}
@keyframes person-breathe{0%,100%{transform:translateY(1px)}50%{transform:translateY(-5px)}}
@keyframes person-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes movie-enter{from{opacity:0;transform:translateY(38px) scale(.86) rotate(-3deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes object-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes movie-twinkle{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes chart-draw{to{stroke-dashoffset:0}}
@media(max-width:680px){
 .cinema-modal{width:100%;max-height:96dvh}
 .cinema-top{padding:12px 15px}
 .cinema-top strong{font-size:16px}
 .cinema-note{font-size:8px;top:10px;left:10px;padding:7px 9px}
 .cinema-overlay{padding:29px 15px 12px}
 .cinema-headline{font-size:23px}
 .cinema-kicker{font-size:9px}
 .video-caption{font-size:14px;min-height:66px;padding:12px 15px}
 .movie-controls{padding:12px;gap:7px}
 .movie-controls .ctrl{padding:9px 11px;font-size:11px}
 .audio-note{font-size:10px;padding:0 13px 10px}
 .story-preview{padding:11px 13px;gap:8px}
}
@media(prefers-reduced-motion:reduce){.cinema-visual *{animation:none!important}}