:root{color-scheme:light;font-family:PingFang SC,Microsoft YaHei,Helvetica Neue,Roboto,Droid Sans Fallback,WenQuanYi Micro Hei,sans-serif;color:#192135;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}.app{min-height:100vh;display:grid;gap:16px;padding:22px 28px 32px;background:linear-gradient(135deg,#2a8aff1a,#ffb24c24),#f5f7fb}.hero,.lesson-module{width:min(1180px,100%);margin:0 auto;border:1px solid rgba(25,33,53,.1);border-radius:8px;background:#ffffffe6;box-shadow:0 18px 40px #2b3e5d1a}.hero{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px}.hero h1{margin:0;display:flex;align-items:center;gap:20px;font-size:clamp(2.8rem,7vw,5rem);line-height:.95;letter-spacing:0}.eyebrow{margin:0 0 8px;color:#5f6f8c;font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.inputs{display:flex;align-items:center;gap:12px}.fraction-input{display:grid;gap:6px;justify-items:center;color:#5f6f8c;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.fraction-input__stack{width:76px;display:grid;gap:5px;padding:8px 10px;border-radius:8px;background:#17213a}.fraction-input__stack input{width:100%;border:none;border-radius:6px;background:#fff;color:#17213a;font:inherit;font-size:1rem;font-weight:900;text-align:center}.fraction-input__stack input:first-child{border-bottom:2px solid #d8dee9}.fraction{min-width:.72em;display:inline-grid;grid-template-rows:auto auto;align-items:center;justify-items:center;line-height:.95;vertical-align:middle}.fraction span:first-child{width:100%;padding:0 .12em .08em;border-bottom:.08em solid currentColor}.fraction span:last-child{padding-top:.08em}.operator{display:inline-flex;align-items:center;font-weight:900}.lesson-module{--rect-width: 340px;display:grid;gap:14px;padding:18px 22px 20px}.module-title{display:flex;align-items:center;gap:12px}.module-index{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#17213a;color:#fff;font-weight:900}.fraction-card--interactive:focus-visible{outline:3px solid rgba(42,138,255,.4);outline-offset:4px}.module-title h2,.fraction-card h2{margin:0}.module-title h2{font-size:clamp(1.35rem,2.4vw,1.8rem);letter-spacing:0}.rect-row{display:grid;gap:18px;align-items:end;justify-content:center}.rect-row--three{grid-template-columns:repeat(3,var(--rect-width))}.rect-row--two{grid-template-columns:repeat(2,var(--rect-width))}.fraction-card{display:grid;gap:10px;align-content:start}.fraction-card--interactive{cursor:pointer;border-radius:8px}.fraction-card--interactive:hover .fraction-grid{box-shadow:0 0 0 4px #2a8aff1f}.fraction-card h2{font-size:1.1rem}.fraction-grid{position:relative;width:100%;aspect-ratio:12 / 5;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));border:4px solid #17213a;border-radius:8px;background:#fff;overflow:hidden}.fraction-grid--horizontal{border-color:#ff9e2c}.fraction-grid--vertical{border-color:#2a8aff}.fraction-grid--both{border-color:#17213a}.fraction-cell{position:relative;z-index:1;border-right:2px solid #17213a;border-bottom:2px solid #17213a}.fraction-grid--both .fraction-cell{border-right-color:#2a8aff;border-bottom-color:#ff9e2c}.fraction-grid--horizontal .fraction-cell{border-right:none;border-bottom-color:#ff9e2c}.fraction-grid--vertical .fraction-cell{border-right-color:#2a8aff;border-bottom:none}.fraction-cell--last-column{border-right:none}.fraction-cell--last-row{border-bottom:none}.fraction-cell--first{background:#ffb24c}.fraction-cell--second{background:#2a8aff}.cut-overlays{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.cut-line{position:absolute;display:block;background:currentColor}.cut-line--vertical{top:0;bottom:0;width:2px;color:#2a8aff;transform:translate(-1px) scaleY(0);transform-origin:top;animation:draw-vertical .72s ease-out forwards}.cut-line--horizontal{left:0;right:0;height:2px;color:#ff9e2c;transform:translateY(-1px) scaleX(0);transform-origin:left;animation:draw-horizontal .72s ease-out forwards}@keyframes draw-vertical{to{transform:translate(-1px) scaleY(1)}}@keyframes draw-horizontal{to{transform:translateY(-1px) scaleX(1)}}.sum-equation{display:flex;flex-wrap:wrap;gap:18px;align-items:end;justify-content:center}.sum-equation .fraction-card{width:var(--rect-width)}.final-result{flex-basis:100%;margin:0 auto;width:fit-content;display:flex;align-items:center;gap:14px;padding:10px 18px;border-radius:8px;background:#17213a;color:#fff;font-size:clamp(1.4rem,4vw,2.1rem);font-weight:900}.app--spotlight{width:min(980px,100%);margin:0 auto}.app__header{max-width:680px;text-align:center;margin:0 auto}.app__eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:#5f6f8c;margin-bottom:8px}.app__subtitle,.app__caption{color:#53617a}.app__panel{background:#fff;border:1px solid rgba(25,33,53,.1);border-radius:8px;padding:22px 24px;box-shadow:0 12px 24px #2b3e5d1a;display:grid;gap:14px}.app__panel h2{margin:0;font-size:1.25rem}.app__list{margin:0;padding-left:18px;text-align:left;display:grid;gap:8px;color:#53617a}.app__caption{margin:0}.shot-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.shot-card{border-radius:8px;border:1px solid rgba(25,33,53,.1);background:#fbfcff;padding:12px;display:grid;gap:8px}.shot-card h3{margin:0;font-size:.98rem;color:#192135}.shot-card p{margin:0;color:#53617a;font-size:.88rem}.shot-placeholder{aspect-ratio:16 / 9;border-radius:8px;border:2px solid #17213a;background:linear-gradient(to right,transparent 49%,rgba(42,138,255,.24) 49%,rgba(42,138,255,.24) 51%,transparent 51%),linear-gradient(to bottom,transparent 32%,rgba(255,178,76,.28) 32%,rgba(255,178,76,.28) 34%,transparent 34%,transparent 66%,rgba(255,178,76,.28) 66%,rgba(255,178,76,.28) 68%,transparent 68%),#fff;display:grid;place-items:center;color:#17213a;font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media (max-width: 860px){.app{padding:16px}.hero,.module-title{display:grid}.answer-pill{width:100%;margin-left:0}.rect-row--three,.rect-row--two,.sum-equation,.shot-grid{grid-template-columns:1fr}.plus{padding:0;text-align:center}.final-result{width:100%;justify-content:center;text-align:center}}@media (prefers-reduced-motion: reduce){.cut-line--vertical,.cut-line--horizontal{animation:none;transform:translate(-1px) scaleY(1)}.cut-line--horizontal{transform:translateY(-1px) scaleX(1)}}