:root{font-family:Avenir Next,Avenir,Nunito Sans,sans-serif;color:#17211d;background:#f7f9f5;font-synthesis:none;--ink: #17211d;--muted: #66736d;--line: #d8e0dc;--paper: #ffffff;--forest: #17664e;--forest-dark: #0f523f;--mint: #dff3e9;--amber: #f0bc68;--amber-light: #fff3c4;--coral: #c36340;--coral-light: #ffe4dc;--sky: #dcecff}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;background:#f7f9f5}button,input,textarea,select{font:inherit;letter-spacing:0}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #67aee8;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.48}.preview-banner{position:sticky;top:0;z-index:20;min-height:28px;padding:6px 16px;background:var(--amber-light);border-bottom:1px solid #e5cc78;color:#6a5200;text-align:center;font-size:12px;font-weight:700}.lesson-shell{min-height:calc(100vh - 28px);padding-bottom:144px}.lesson-header{display:grid;grid-template-columns:44px minmax(120px,720px) 58px;justify-content:center;align-items:center;gap:16px;min-height:72px;padding:max(12px,env(safe-area-inset-top)) 20px 10px;background:var(--paper);border-bottom:1px solid var(--line)}.lesson-header>button{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;border-radius:6px;color:var(--muted);cursor:pointer}.lesson-header>button:hover{background:#eef2ef;color:var(--ink)}.progress-track{height:14px;overflow:hidden;border:1px solid #cbd7d1;border-radius:7px;background:#e9eeeb;box-shadow:inset 0 2px #17211d14}.progress-track span{display:block;height:100%;border-radius:6px;background:var(--forest);transition:width .32s cubic-bezier(.2,.8,.2,1)}.energy-count{display:flex;align-items:center;gap:6px;color:var(--coral);font-size:17px}.lesson-meta{display:flex;justify-content:space-between;max-width:760px;margin:0 auto;padding:16px 24px 0;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}.activity-stage{width:min(100% - 40px,700px);margin:0 auto;padding:30px 0 20px}.prompt-block>p,.result-eyebrow{margin:0 0 10px;color:var(--forest);font-size:12px;font-weight:800;text-transform:uppercase}.prompt-block h1,.result-screen h1,.finish-screen h1,.energy-screen h1,.connection-screen h1{margin:0;font-size:34px;line-height:1.16;letter-spacing:0;overflow-wrap:anywhere}.hint-wrap{margin:18px 0 22px}.hint-button,.attachment-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid #bdc9c3;border-radius:6px;background:var(--paper);color:#44514b;font-size:13px;font-weight:700;cursor:pointer}.hint-copy{margin:10px 0 0;padding:12px 14px;border-left:3px solid var(--amber);background:#fff9e8;line-height:1.5}.option-list{display:grid;gap:11px;margin:22px 0 26px}.answer-option{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;min-height:62px;padding:12px 16px;border:2px solid #cbd5d0;border-radius:8px;background:var(--paper);box-shadow:0 3px #cbd5d0;text-align:left;font-weight:700;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.answer-option>span:nth-child(2){min-width:0;overflow-wrap:anywhere}.answer-option:hover{border-color:#8fa59a;transform:translateY(-1px);box-shadow:0 4px #b8c5bf}.answer-option.selected{border-color:var(--forest);background:#eef8f3;box-shadow:0 3px 0 var(--forest)}.option-key{display:grid;place-items:center;width:30px;height:30px;border:1px solid #c4cec9;border-radius:5px;color:var(--muted);font-size:13px}.selected .option-key{border-color:var(--forest);background:var(--forest);color:#fff}.option-check{color:var(--forest)}.submit-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:13px 22px;border:0;border-radius:8px;background:var(--forest);box-shadow:0 5px #0b4735;color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.submit-button:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px #0b4735}.activity-submit{position:fixed;right:20px;bottom:max(14px,env(safe-area-inset-bottom));left:20px;z-index:10;width:auto;max-width:700px;margin-inline:auto}.binary-grid,.recall-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.binary-option{display:flex;min-height:140px;flex-direction:column;align-items:flex-start;justify-content:end;gap:7px;padding:22px;border:2px solid #cbd5d0;border-radius:8px;background:#fff;box-shadow:0 4px #cbd5d0;text-align:left;cursor:pointer}.binary-option span{font-size:26px;font-weight:800}.binary-option small{color:var(--muted)}.binary-option.selected{border-color:var(--forest);background:var(--mint);box-shadow:0 4px 0 var(--forest)}.order-answer{min-height:112px;margin:24px 0 16px;padding:16px;border:2px dashed #b9c7c0;border-radius:8px;background:#fbfcfb}.order-answer p{margin:27px 0;color:var(--muted);text-align:center}.order-answer button{display:flex;width:100%;align-items:center;gap:11px;padding:11px;border:0;border-bottom:1px solid #dfe5e2;background:transparent;text-align:left;font-weight:700;cursor:pointer}.order-answer button span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--forest);color:#fff;font-size:12px}.tile-bank{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}.tile-bank button{min-height:44px;padding:9px 13px;border:1px solid #bdc9c3;border-radius:6px;background:#fff;box-shadow:0 2px #bdc9c3;font-weight:700;cursor:pointer}.match-list,.classify-list{display:grid;gap:12px;margin:24px 0 28px}.match-list label{display:grid;grid-template-columns:minmax(90px,1fr) auto minmax(150px,1.4fr);align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:#fff}.match-list label>span{font-weight:800}select,.field-label input,.field-label textarea,.fill-sentence input{width:100%;border:2px solid #bdc9c3;border-radius:6px;background:#fff;color:var(--ink)}select,.field-label input{min-height:46px;padding:9px 11px}.classify-row{display:grid;gap:11px;padding:14px;border:1px solid var(--line);border-radius:7px;background:#fff}.segment-control{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border:1px solid #c6d1cb;border-radius:6px;background:#eff3f1}.segment-control button{min-height:38px;border:0;border-radius:4px;background:transparent;text-transform:capitalize;cursor:pointer}.segment-control button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #17211d29;color:var(--forest);font-weight:800}.fill-sentence{margin:28px 0;padding:24px;border-left:4px solid var(--amber);background:#fff;font-size:21px;font-weight:700;line-height:2.35}.fill-sentence input{width:150px;min-height:42px;margin:0 7px;padding:5px 10px;border-width:0 0 2px;border-radius:0;background:#f4f8f6;text-align:center}.listen-button{display:flex;width:100%;min-height:112px;align-items:center;justify-content:center;gap:14px;margin:24px 0;border:2px solid #9bc1e8;border-radius:8px;background:var(--sky);color:#174f83;font-size:18px;font-weight:800;cursor:pointer}.field-label{display:grid;gap:9px;margin:20px 0 26px;color:#3d4a44;font-size:13px;font-weight:800}.field-label textarea{min-height:150px;resize:vertical;padding:14px;line-height:1.55}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 28px}.image-grid button{overflow:hidden;padding:0 0 12px;border:2px solid #cbd5d0;border-radius:8px;background:#fff;box-shadow:0 3px #cbd5d0;cursor:pointer}.image-grid button.selected{border-color:var(--forest);box-shadow:0 3px 0 var(--forest)}.image-grid img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:14px;background:#eff6f2}.image-grid span{display:block;padding:11px 6px 0;font-weight:800}.flashcard{display:flex;width:100%;min-height:290px;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin:24px 0 18px;padding:28px;border:2px solid #d6b24d;border-radius:8px;background:var(--amber-light);box-shadow:0 6px #c69928;cursor:pointer}.flashcard.flipped{border-color:#79a995;background:var(--mint);box-shadow-color:var(--forest)}.flashcard small{color:var(--muted);font-weight:800;text-transform:uppercase}.flashcard strong{max-width:530px;font-size:38px;line-height:1.12;overflow-wrap:anywhere}.flashcard span{color:var(--muted)}.recall-grid button{min-height:50px;border:2px solid #bdc9c3;border-radius:7px;background:#fff;font-weight:800;cursor:pointer}.recall-grid button:last-child{border-color:var(--forest);background:var(--mint);color:var(--forest-dark)}.story-dialogue{display:grid;gap:12px;margin:24px 0}.story-dialogue>div{display:flex;align-items:flex-end;gap:10px}.story-dialogue>div>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800}.story-dialogue p{max-width:80%;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:8px 8px 8px 2px;background:#fff;line-height:1.45}.story-dialogue strong{display:block;margin-bottom:3px;color:var(--forest);font-size:12px}.trace-head{display:flex;justify-content:space-between;align-items:center;margin:24px 0 8px;color:var(--muted);font-size:13px;font-weight:700}.trace-head button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--forest);cursor:pointer}.trace-canvas{width:100%;aspect-ratio:7 / 3;margin-bottom:24px;border:2px solid #bdc9c3;border-radius:8px;background-color:#fff;background-image:linear-gradient(#edf1ef 1px,transparent 1px),linear-gradient(90deg,#edf1ef 1px,transparent 1px);background-size:24px 24px;touch-action:none}.scenario-box{margin:24px 0 12px;padding:18px;border-left:4px solid var(--coral);background:var(--coral-light);color:#633c30;font-size:16px;line-height:1.55}.attachment-button{margin:-10px 0 24px}.feedback-panel{position:fixed;right:0;bottom:0;left:0;z-index:15;display:grid;grid-template-columns:minmax(0,700px);justify-content:center;gap:14px;min-height:128px;padding:18px 24px max(20px,env(safe-area-inset-bottom));border-top:1px solid #9fcab8;background:#e4f5ed;box-shadow:0 -8px 24px #17211d14}.feedback-panel.incorrect{border-color:#e3a994;background:#fff0ea}.feedback-panel.neutral{border-color:#c3ccc8;background:#f2f5f3}.feedback-panel>div{display:flex;align-items:center;gap:13px}.feedback-panel>div>span{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--forest);color:#fff}.feedback-panel.incorrect>div>span{background:var(--coral)}.feedback-panel.neutral>div>span{background:#66736d}.feedback-panel strong{display:block;font-size:17px}.feedback-panel p{margin:3px 0 0;color:#53615a;font-size:13px}.feedback-panel .path-signal{display:block;margin-top:5px;color:var(--forest);font-size:12px;font-weight:800}.feedback-panel.incorrect .path-signal{color:#9b4327}.feedback-panel.neutral .path-signal{color:#66736d}.feedback-panel>button{display:flex;width:100%;min-height:46px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:7px;background:var(--forest);color:#fff;font-weight:800;cursor:pointer}.feedback-panel>button svg{transform:rotate(180deg)}.feedback-panel.incorrect>button{background:var(--coral)}.feedback-panel.neutral>button{background:#3f4b45}.selection-guide{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;color:var(--forest);font-size:13px;font-weight:800}.selection-guide span{color:#68766f;font-weight:700}.result-screen,.finish-screen,.energy-screen,.connection-screen,.evaluating-screen{display:flex;width:min(100% - 40px,620px);min-height:100vh;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding:48px 0 max(48px,env(safe-area-inset-bottom));text-align:center}.result-seal,.finish-art,.energy-icon,.brand-mark,.evaluating-mark{display:grid;place-items:center;width:104px;height:104px;margin-bottom:24px;border:2px solid #69a78d;border-radius:50%;background:var(--mint);color:var(--forest);box-shadow:0 7px #a4c9b8}.result-seal.gap,.energy-icon{border-color:#de9d83;background:var(--coral-light);color:var(--coral);box-shadow-color:#e8b6a4}.finish-art{border-color:#d7b447;background:var(--amber-light);color:#8a6800;box-shadow-color:#dec76f}.result-screen>p:not(.result-eyebrow),.finish-screen>p:not(.result-eyebrow),.energy-screen>p:not(.result-eyebrow),.connection-screen>p:not(.result-eyebrow),.evaluating-screen>p:not(.result-eyebrow){max-width:520px;margin:14px 0 26px;color:var(--muted);line-height:1.6}.preview-label{margin-bottom:16px;padding:5px 9px;border:1px solid #ddc868;border-radius:5px;background:var(--amber-light);color:#6d570b;font-size:11px;font-weight:800;text-transform:uppercase}.result-score{display:flex;flex-direction:column;width:150px;height:110px;align-items:center;justify-content:center;margin-bottom:22px;border:1px solid var(--line);border-radius:8px;background:#fff}.result-score strong{font-size:36px;color:var(--forest)}.result-score span{color:var(--muted);font-size:12px}.result-breakdown{width:100%;max-width:520px;margin:0 0 22px;border-top:1px solid var(--line)}.result-breakdown>strong{display:block;padding:12px 0 8px;color:var(--ink)}.result-breakdown>div{display:flex;min-height:42px;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.result-breakdown>div>span{display:grid;min-width:0;gap:3px;padding:8px 0;overflow-wrap:anywhere}.result-breakdown small{color:var(--muted);font-size:12px;line-height:1.4;overflow-wrap:anywhere}.result-breakdown b{font-size:12px}.result-breakdown .proven{color:var(--forest)}.result-breakdown .correct{color:#276aa3}.result-breakdown .review{color:var(--coral)}.result-stats,.finish-summary{display:grid;width:100%;grid-template-columns:repeat(3,1fr);margin-bottom:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.result-stats span,.finish-summary span{display:flex;min-height:70px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px;color:var(--muted);font-size:12px}.result-stats span+span,.finish-summary span+span{border-left:1px solid var(--line)}.result-stats strong,.finish-summary strong{color:var(--ink);font-size:18px}.result-screen .submit-button,.finish-screen .submit-button,.energy-screen .submit-button{max-width:420px}.error-copy{color:#9a3f28!important}.connection-pulse{width:160px;height:8px;overflow:hidden;border-radius:4px;background:#dce4e0}.connection-pulse:after{display:block;width:45%;height:100%;border-radius:4px;background:var(--forest);animation:connect 1.4s ease-in-out infinite;content:""}.connection-pulse.error:after{width:100%;background:var(--coral);animation:none}@keyframes connect{0%{transform:translate(-110%)}to{transform:translate(330%)}}@media (min-width: 720px){.feedback-panel{grid-template-columns:minmax(0,520px) 170px;align-items:center}.feedback-panel>button{grid-column:2;grid-row:1}}@media (max-width: 560px){.lesson-header{grid-template-columns:40px minmax(100px,1fr) 52px;gap:8px;padding-inline:12px}.activity-stage{width:min(100% - 28px,700px);padding-top:24px}.lesson-meta{padding-inline:14px}.prompt-block h1,.result-screen h1,.finish-screen h1,.energy-screen h1,.connection-screen h1,.evaluating-screen h1{font-size:28px}.flashcard strong{font-size:30px}.binary-grid,.image-grid{grid-template-columns:1fr}.binary-option{min-height:100px}.match-list label{grid-template-columns:1fr;gap:7px}.match-list label>svg{display:none}.fill-sentence{padding:17px;font-size:18px}.fill-sentence input{width:120px}.feedback-panel{padding-inline:14px}.activity-submit{right:14px;left:14px}.result-stats,.finish-summary{grid-template-columns:1fr}.result-stats span,.finish-summary span{min-height:52px;flex-direction:row}.result-stats span+span,.finish-summary span+span{border-top:1px solid var(--line);border-left:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}