:root{--green: #65cc48;--green-light: #f0fdf4;--green-dark: #3ba323;--blue: #4f9cf9;--blue-light: #edf5ff;--blue-dark: #277ae2;--orange: #ff8c42;--orange-light: #fff5e8;--cream: #fcfcfc;--white: #ffffff;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-700: #334155;--gray-900: #0f172a;--red: #ef4444;--red-light: #fef2f2;--radius: 18px;--radius-sm: 12px;--shadow: 0 8px 24px rgba(0, 0, 0, .04);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .08);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--top-bar-height: 64px;--progress-height: 4px;--bottom-nav-height: 56px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;touch-action:manipulation}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:17px;line-height:1.6;color:var(--gray-900);background:var(--cream);min-height:100vh;min-height:100dvh;overflow-x:hidden}#top-bar{position:sticky;top:0;left:0;right:0;z-index:100;background:#fcfcfcd9;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.04);color:var(--gray-900);padding-top:var(--safe-top);transition:all .4s cubic-bezier(.16,1,.3,1)}#top-bar.scrolled{background:#fcfcfcf2;box-shadow:0 4px 20px #0000000d}.top-bar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:auto;min-height:var(--top-bar-height);padding:8px 16px;width:100%}.brand-block{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;grid-column:2;gap:4px;transition:all .4s cubic-bezier(.16,1,.3,1);transform-origin:top center;opacity:1}#top-bar.scrolled .brand-block{opacity:0;transform:scaleY(0);height:0;pointer-events:none;overflow:hidden;margin:0;padding:0}.brand-title-row{display:flex;flex-direction:column;align-items:center;gap:4px}.brand-logo{max-width:140px;height:auto;display:block;transition:max-width .4s cubic-bezier(.16,1,.3,1)}#top-bar.scrolled .brand-logo{max-width:0px}.menu-btn-container{grid-column:3;display:flex;justify-content:flex-end}.title-main{font-family:Outfit,Iowan Old Style,Palatino Linotype,serif;font-weight:700;font-size:1.5rem;line-height:1.2}.title-chapter{font-weight:600;font-size:12px;background:var(--blue-light);color:var(--blue-dark);padding:2px 8px;border-radius:12px}.icon-btn{background:none;border:none;color:inherit;font-size:24px;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.icon-btn:active{background:#0000000d;transform:scale(.95)}#progress-bar{height:var(--progress-height);background:var(--gray-200)}#progress-fill{height:100%;background:linear-gradient(90deg,var(--green),#34d399);width:0%;transition:width .6s cubic-bezier(.16,1,.3,1);border-radius:0 4px 4px 0}#content{padding-top:calc(var(--top-bar-height) + var(--progress-height) + var(--safe-top));padding-bottom:calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px);padding-left:16px;padding-right:16px;min-height:100vh;min-height:100dvh}#bottom-nav{position:fixed;left:50%;right:auto;bottom:14px;transform:translate(-50%);width:min(760px,calc(100vw - 24px));height:auto;background:#ffffffd9;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(0,0,0,.06);border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px calc(var(--safe-bottom) + 10px);z-index:100;box-shadow:0 8px 32px #00000014;transition:transform .4s cubic-bezier(.16,1,.3,1)}#bottom-nav.hidden-keyboard{transform:translateY(100%)}.nav-btn{background:none;border:none;color:var(--green);font-size:16px;font-weight:600;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:var(--radius-sm)}.nav-btn:active{background:var(--green-light)}#nav-counter{font-size:14px;color:var(--gray-700);font-weight:500}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#00000080;display:flex;align-items:flex-end;justify-content:center}.overlay.hidden{display:none}.overlay-content{background:var(--white);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:500px;max-height:80vh;overflow-y:auto;padding:16px;padding-bottom:calc(16px + var(--safe-bottom))}.overlay-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.overlay-header h2{font-size:20px;color:var(--gray-900)}#overview-list{list-style:none}#overview-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 8px;border-bottom:1px solid var(--gray-200);cursor:pointer;border-radius:var(--radius-sm)}#overview-list li:active{background:var(--gray-100)}.overview-num{font-weight:700;color:var(--green);width:32px;flex-shrink:0}.overview-title{flex:1;font-size:15px;margin-right:8px}.overview-score{font-size:13px;color:var(--gray-500);flex-shrink:0}.overview-score.completed{color:var(--green)}.overview-current{background:var(--green-light)!important}.exercise-header{margin-bottom:20px}.exercise-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--orange);color:var(--white);font-weight:700;font-size:16px;margin-right:8px;vertical-align:middle}.exercise-title{font-size:20px;font-weight:700;color:var(--gray-900);display:inline;vertical-align:middle}.exercise-instruction{margin-top:8px;font-size:16px;color:var(--gray-700);line-height:1.5}.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600}.badge-speaking{background:var(--blue-light);color:var(--blue)}.badge-grammar{background:var(--orange-light);color:var(--orange)}.badge-audio{background:var(--green-light);color:var(--green)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:none;border-radius:var(--radius-sm);font-size:16px;font-weight:600;cursor:pointer;min-height:44px;transition:all .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.btn:active{opacity:.8;transform:scale(.97)}.btn-primary{background:var(--blue);color:var(--white)}.btn-secondary{background:var(--gray-200);color:var(--gray-900)}.btn-orange{background:var(--orange);color:var(--white)}.btn-green{background:var(--green);color:var(--white)}.btn-block{display:flex;width:100%}.btn:disabled{opacity:.5;cursor:default}.btn-check,.btn-done{margin-top:20px}.btn-tts{background:none;border:2px solid var(--green);color:var(--green);min-width:44px;min-height:44px;border-radius:50%;cursor:pointer;font-size:20px;display:inline-flex;align-items:center;justify-content:center;padding:0}.btn-tts:active{background:var(--green-light)}.card{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px;border:1px solid rgba(0,0,0,.02);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.grammar-card{background:var(--orange-light);border-left:4px solid var(--orange)}.grammar-card h3{color:var(--orange);font-size:18px;margin-bottom:12px}.grammar-table{width:100%;border-collapse:collapse;font-size:15px}.grammar-table th,.grammar-table td{padding:8px 12px;text-align:left;border-bottom:1px solid rgba(232,115,42,.2)}.grammar-table th{color:var(--orange);font-weight:600}.grammar-highlight{color:var(--orange);font-weight:700}.reading-text{font-size:17px;line-height:1.7}.reading-text .highlight{background:var(--orange-light);padding:2px 4px;border-radius:4px;font-weight:600}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.image-grid-item{background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius);padding:8px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}.image-grid-item.selected{border-color:var(--green);background:var(--green-light)}.image-grid-item .label{font-size:13px;margin-top:6px;line-height:1.3}.image-grid-item svg{width:60px;height:60px}.checkbox-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);overflow:hidden}.checkbox-table th{background:var(--gray-100);color:var(--gray-700);padding:12px 8px;font-size:14px;text-align:center;font-weight:600;border-bottom:2px solid var(--gray-200)}.checkbox-table td{padding:12px 8px;border-bottom:1px solid var(--gray-200);text-align:center;background:var(--white);transition:background .2s ease}.checkbox-table tr:hover td{background:var(--gray-100)}.checkbox-table td:first-child{text-align:left}.checkbox-table input[type=checkbox]{width:22px;height:22px;accent-color:var(--green)}.fill-sentence{font-size:17px;line-height:2;margin-bottom:12px}.fill-input{display:inline-block;border:2px solid var(--gray-300);border-radius:8px;background:var(--white);font-size:17px;font-family:inherit;padding:4px 12px;width:120px;text-align:center;outline:none;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 4px #00000005}.fill-input:focus{border-color:var(--green);box-shadow:0 0 0 3px #10b9811a}.fill-input.correct{border-color:var(--green);color:var(--green);background:var(--green-light)}.fill-input.incorrect{border-color:var(--red);color:var(--red);background:var(--red-light)}.radio-table{width:100%;border-collapse:collapse;font-size:15px}.radio-table th{padding:8px 4px;font-size:12px;text-align:center;color:var(--gray-700);font-weight:600}.radio-table td{padding:10px 4px;border-bottom:1px solid var(--gray-200);text-align:center}.radio-table td:first-child{text-align:left;font-size:15px}.radio-table input[type=radio]{width:22px;height:22px;accent-color:var(--green)}.conjugation-table{width:100%;border-collapse:collapse;margin-bottom:16px}.conjugation-table th{background:var(--green);color:var(--white);padding:10px;font-size:14px;text-align:center}.conjugation-table td{padding:8px;border-bottom:1px solid var(--gray-200);text-align:center}.conjugation-table td:first-child{font-weight:600;text-align:left;color:var(--gray-700)}.conj-input{border:none;border-bottom:2px solid var(--gray-400);background:transparent;font-size:16px;font-family:inherit;text-align:center;width:80px;padding:4px;outline:none}.conj-input:focus{border-color:var(--green)}.conj-input.correct{border-color:var(--green);color:var(--green)}.conj-input.incorrect{border-color:var(--red);color:var(--red)}.conj-given{color:var(--gray-700);font-style:italic}.word-bank{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;padding:16px;background:var(--gray-100);border-radius:var(--radius);min-height:44px;border:1px dashed var(--gray-300)}.word-chip{display:inline-flex;align-items:center;padding:10px 18px;background:var(--white);border:1px solid var(--gray-200);border-radius:24px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 12px #00000008;user-select:none;-webkit-user-select:none}.word-chip:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0000000f;border-color:var(--gray-300)}.word-chip:active{transform:scale(.95)}.word-chip.used{opacity:.4;pointer-events:none}.word-chip.placed{background:var(--green-light);border-color:var(--green)}.blank-slot{display:inline-flex;align-items:center;justify-content:center;min-width:90px;min-height:40px;border:2px dashed var(--gray-300);border-radius:20px;padding:6px 12px;margin:0 4px;font-size:15px;cursor:pointer;vertical-align:middle;background:var(--gray-100);transition:all .2s cubic-bezier(.16,1,.3,1)}.blank-slot.filled{border-style:solid;border-color:var(--green);background:var(--green-light);color:var(--green-dark);font-weight:500;box-shadow:0 2px 8px #10b9811a}.blank-slot.correct{border-color:var(--green);background:var(--green-light)}.blank-slot.incorrect{border-color:var(--red);background:var(--red-light)}.word-order-area{display:flex;flex-wrap:wrap;gap:8px;min-height:50px;padding:12px;border:2px dashed var(--gray-300);border-radius:var(--radius);margin-bottom:12px}.word-order-area.drop-target{border-color:var(--green);background:var(--green-light)}.mc-option{display:flex;align-items:center;padding:14px 20px;background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);margin-bottom:12px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1);min-height:52px}.mc-option:hover{border-color:var(--gray-300);transform:translate(4px)}.mc-option:active{transform:scale(.98)}.mc-option.selected{border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 4px #10b9811a}.mc-option.correct{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}.mc-option.incorrect{border-color:var(--red);background:var(--red-light);color:#b91c1c}.mc-option .mc-letter{font-weight:700;margin-right:16px;color:var(--gray-400);background:var(--gray-100);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:14px}.mc-option.selected .mc-letter{color:var(--green)}.inline-options{display:inline-flex;gap:4px;margin:0 4px;vertical-align:middle}.inline-opt-btn{padding:4px 12px;border:2px solid var(--gray-300);border-radius:16px;background:var(--white);font-size:15px;cursor:pointer;min-height:32px;transition:all .2s}.inline-opt-btn.selected{border-color:var(--orange);background:var(--orange-light);color:var(--orange);font-weight:600}.inline-opt-btn.correct{border-color:var(--green);background:var(--green-light);color:var(--green)}.inline-opt-btn.incorrect{border-color:var(--red);background:var(--red-light);color:var(--red)}.sound-pair{display:flex;align-items:center;gap:12px;padding:12px;background:var(--white);border-radius:var(--radius);margin-bottom:8px;box-shadow:var(--shadow)}.sound-pair .pair-num{font-weight:700;color:var(--green);width:24px}.sound-pair .pair-words{flex:1;font-size:16px}.sound-btns{display:flex;gap:6px}.sound-btn{padding:6px 14px;border:2px solid var(--gray-300);border-radius:16px;background:var(--white);font-size:14px;cursor:pointer;min-height:36px}.sound-btn.selected{border-color:var(--green);background:var(--green-light)}.sort-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sort-column{background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius);padding:12px;min-height:120px}.sort-column-header{font-weight:700;text-align:center;padding:8px;margin-bottom:8px;border-bottom:2px solid var(--gray-200);color:var(--green)}.sort-word-pool{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding:12px;background:var(--gray-100);border-radius:var(--radius);min-height:50px}.error-sentence{font-size:17px;line-height:2;margin-bottom:12px;padding:12px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow)}.error-sentence .word{display:inline-block;padding:2px 4px;cursor:pointer;border-radius:4px;transition:all .2s}.error-sentence .word:active{background:var(--gray-200)}.error-sentence .word.marked{background:var(--red-light);color:var(--red);text-decoration:line-through}.correction-input{display:inline-block;border:2px solid var(--orange);border-radius:var(--radius-sm);padding:4px 8px;font-size:16px;font-family:inherit;width:120px;margin-left:8px;outline:none}.letter-tiles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px}.letter-tile{width:40px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius-sm);font-size:20px;font-weight:700;cursor:pointer;user-select:none;-webkit-user-select:none;transition:all .2s}.letter-tile:active{transform:scale(.9)}.letter-tile.used{opacity:.3}.answer-tiles{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:16px;min-height:48px;padding:8px;border:2px dashed var(--gray-300);border-radius:var(--radius)}.answer-tile{width:40px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--green-light);border:2px solid var(--green);border-radius:var(--radius-sm);font-size:20px;font-weight:700;cursor:pointer}.crossword-grid{display:inline-grid;gap:1px;background:var(--gray-900);border:2px solid var(--gray-900);border-radius:4px;margin-bottom:16px}.crossword-cell{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--white);position:relative}.crossword-cell.black{background:var(--gray-900)}.crossword-cell input{width:100%;height:100%;border:none;text-align:center;font-size:18px;font-weight:700;text-transform:uppercase;outline:none;font-family:inherit;background:transparent}.crossword-cell input:focus{background:var(--green-light)}.crossword-cell .cell-number{position:absolute;top:1px;left:2px;font-size:9px;color:var(--gray-700);pointer-events:none}.crossword-clues{font-size:15px;line-height:1.6}.crossword-clues h4{color:var(--green);margin:12px 0 8px}.crossword-clues ol{margin-left:20px}.image-writing-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.image-writing-item{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.image-writing-item .img-container{height:100px;display:flex;align-items:center;justify-content:center;background:var(--gray-100)}.image-writing-item textarea{width:100%;border:none;padding:8px;font-size:15px;font-family:inherit;resize:none;min-height:60px;outline:none}.image-writing-item textarea:focus{background:var(--green-light)}.three-col{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}.match-item{padding:10px;background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius-sm);text-align:center;font-size:15px;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;transition:all .2s}.match-item.active{border-color:var(--orange);background:var(--orange-light)}.match-item.matched{border-color:var(--green);background:var(--green-light)}.match-connector{width:24px;display:flex;align-items:center;justify-content:center;color:var(--gray-400)}.sentence-builder{margin-bottom:16px}.sentence-parts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.sentence-result{min-height:44px;padding:12px;border:2px dashed var(--gray-300);border-radius:var(--radius);font-size:16px;line-height:1.6}.image-label-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.image-label-item{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-align:center}.image-label-item .img-container{height:80px;display:flex;align-items:center;justify-content:center;background:var(--gray-100)}.image-label-item .label-slot{padding:8px;min-height:40px;border-top:1px solid var(--gray-200);cursor:pointer;font-size:14px}.prompt-card{background:var(--blue-light);border:2px solid var(--blue);border-radius:var(--radius);padding:20px;text-align:center}.prompt-card .prompt-icon{font-size:48px;margin-bottom:12px}.prompt-card .prompt-text{font-size:17px;line-height:1.6;color:var(--gray-900)}.feedback{padding:12px 16px;border-radius:var(--radius);margin-top:12px;font-size:15px;font-weight:500}.feedback-success{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green)}.feedback-error{background:var(--red-light);color:var(--red);border:1px solid var(--red)}.feedback-score{font-size:20px;font-weight:700}.correction-text{font-size:13px;color:var(--green);display:block;margin-top:2px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.text-center{text-align:center}.text-muted{color:var(--gray-500)}.text-sm{font-size:14px}.flex-center{display:flex;align-items:center;justify-content:center}.gap-8{gap:8px}.gap-12{gap:12px}@media(min-width:500px){#content{max-width:500px;margin:0 auto}}body.keyboard-open #bottom-nav{transform:translateY(100%)}:root{--ink: #16332c;--ink-soft: #4b655d;--surface: rgba(255, 251, 245, .82);--surface-strong: #fffdf8;--line: rgba(22, 51, 44, .1);--accent: #d86d31;--accent-soft: #ffe3d2;--success: #1f8f67;--shadow-soft: 0 24px 60px rgba(34, 47, 38, .12);--shadow-card: 0 14px 34px rgba(16, 40, 33, .08);--radius-lg: 26px;--radius-xl: 34px}html{background:radial-gradient(circle at top left,rgba(216,109,49,.18),transparent 28%),radial-gradient(circle at top right,rgba(45,125,70,.14),transparent 32%),linear-gradient(180deg,#f4ead7,#f7f3eb 28%,#f7f3eb)}body{font-family:Outfit,Avenir Next,Trebuchet MS,sans-serif;color:var(--ink);background:transparent}body:before,body:after{content:"";position:fixed;border-radius:999px;pointer-events:none;filter:blur(6px);opacity:.7}body:before{width:18rem;height:18rem;top:-7rem;right:-5rem;background:radial-gradient(circle,rgba(216,109,49,.22),transparent 70%)}body:after{width:16rem;height:16rem;left:-4rem;bottom:4rem;background:radial-gradient(circle,rgba(45,125,70,.16),transparent 70%)}.app-shell{width:min(840px,calc(100vw - 24px));margin:0 auto;padding:calc(var(--safe-top) + 18px) 0 calc(var(--bottom-nav-height) + var(--safe-bottom) + 30px)}.top-bar-inner{height:auto;padding:0;align-items:flex-start;gap:16px}.brand-block{display:flex;flex-direction:column;gap:8px}.brand-logo{width:clamp(160px,24vw,220px);height:auto;display:block;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(16,40,33,.1))}.brand-eyebrow,.hero-kicker,.section-eyebrow,.metric-label,.overview-subtitle,.overlay-copy,.overview-status{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.brand-eyebrow,.hero-kicker,.section-eyebrow,.overlay-copy{color:var(--ink-soft)}.brand-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.title-main{font-family:Outfit,Iowan Old Style,Palatino Linotype,serif;font-size:clamp(2rem,4vw,2.85rem);font-weight:700;line-height:.95;color:var(--ink)}.title-chapter{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#ffffffbd;border:1px solid rgba(22,51,44,.08);color:var(--ink);font-size:13px;font-weight:700;margin-left:0}.menu-btn,.close-btn{min-width:auto;padding:0 16px;border:1px solid rgba(22,51,44,.12);background:#ffffffb8;color:var(--ink);font-size:15px;font-weight:700;box-shadow:var(--shadow-card)}.app-main{display:grid;gap:22px}.hero-panel,.exercise-shell,.overlay-content{background:var(--surface);border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:24px;padding:24px;border-radius:var(--radius-xl)}.hero-copy h1{font-family:Outfit,Iowan Old Style,Palatino Linotype,serif;font-size:clamp(2rem,5vw,3.45rem);font-weight:800;line-height:.98;margin:10px 0 12px}.hero-copy p:last-child{max-width:54ch;color:var(--ink-soft);font-size:16px}.hero-stats{display:grid;gap:14px}.metric-card{display:grid;gap:10px;padding:18px;border-radius:var(--radius-lg);background:#ffffffad;border:1px solid var(--line);box-shadow:var(--shadow-card)}.metric-card strong{font-size:1.6rem;line-height:1}.metric-card p{color:var(--ink-soft)}.metric-card-primary{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fffdf8;border-color:#277ae233}.metric-card-primary .metric-label,.metric-card-primary p{color:#fffdf8cc}#progress-bar{height:10px;border-radius:999px;overflow:hidden;background:#ffffff38}#progress-fill{background:linear-gradient(90deg,#ffd87a,#ffb159);border-radius:inherit}.exercise-shell{padding:20px;border-radius:var(--radius-xl)}.exercise-shell-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}.exercise-shell-head h2{font-family:Outfit,Iowan Old Style,Palatino Linotype,serif;font-weight:700;font-size:1.8rem}.section-summary{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:#ffffffbf;border:1px solid var(--line);color:var(--ink-soft);font-weight:700}#content{padding:0;min-height:auto;max-width:none}body.keyboard-open #bottom-nav{transform:translate(-50%,130%)}.nav-btn{color:var(--blue-dark);font-weight:700;padding:0 18px;min-height:48px}.nav-btn:disabled{color:var(--gray-400)}.nav-btn-primary{background:var(--blue);color:var(--white)}#nav-counter{color:var(--gray-700);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.overlay{align-items:stretch;padding:20px 12px;background:#111e185c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.overlay-content{max-width:760px;margin:auto;border-radius:32px;padding:22px}.overlay-header{margin-bottom:10px}.overlay-copy{margin-bottom:16px}#overview-list{display:grid;gap:10px;margin-bottom:16px}#overview-list li{padding:0;border:none}.overview-item{width:100%;border:1px solid rgba(22,51,44,.08);border-radius:22px;background:#ffffffb8;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px;text-align:left;cursor:pointer}.overview-item-current{border-color:#65cc4859;background:linear-gradient(135deg,#65cc481f,#4f9cf917)}.overview-leading{display:flex;align-items:center;gap:14px;min-width:0}.overview-num{width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:800}.overview-title{display:block;margin-right:0;font-size:15px;color:var(--ink)}.overview-subtitle{display:block;margin-top:2px;color:var(--ink-soft)}.overview-status{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:8px 10px;border-radius:999px;background:#16332c0f;color:var(--ink-soft)}.overview-status.done{background:#1f8f671f;color:var(--success)}.reset-btn{background:#16332c12}.exercise-header{margin-bottom:24px}.exercise-number{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,#d86d31,#f09d58);box-shadow:0 10px 22px #d86d3138}.exercise-title{display:inline-block;font-family:Outfit,Iowan Old Style,Palatino Linotype,serif;font-size:clamp(1.8rem,3vw,2.25rem);font-weight:700;line-height:1.05;max-width:18ch}.exercise-instruction{margin-top:12px;max-width:58ch;color:var(--ink-soft)}.btn{min-height:50px;border-radius:16px;box-shadow:var(--shadow-card)}.btn-primary{background:linear-gradient(135deg,#17483c,#2d7d46)}.btn-secondary{background:#16332c14}.btn-tts{background:#ffffffd1;border-color:#2d7d4647;box-shadow:var(--shadow-card)}.card{background:var(--surface-strong);border:1px solid rgba(22,51,44,.06);border-radius:24px;box-shadow:var(--shadow-card)}.reading-text,.fill-sentence{color:var(--ink)}.fill-input,.conj-input,.image-label-input,.sentence-input,.error-input,.conjunction-select,.crossword-cell input,textarea,input[type=text]{border-radius:12px;border:1px solid rgba(22,51,44,.12);background:#f6f2ebbd}.fill-input,.conj-input,.image-label-input,.sentence-input,.error-input,.crossword-cell input,input[type=text]{min-height:42px}.image-grid{gap:14px}.image-grid-item{min-height:126px;border:1px solid rgba(22,51,44,.09);background:#ffffffd6;box-shadow:var(--shadow-card)}.image-grid-item.selected{background:linear-gradient(180deg,#2d7d4624,#2d7d4614)}.writing-textarea{width:100%;min-height:108px;padding:12px 14px;resize:vertical;font:inherit;color:var(--ink)}.writing-textarea.correct{border-color:#1f8f676b;background:#1f8f6714}.writing-textarea.incorrect{border-color:#d32f2f4d;background:#ffebeec7}.writing-feedback{margin-top:10px;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.45}.writing-feedback-positive{background:#1f8f671a;color:var(--success)}.writing-feedback-warning{background:#d86d311f;color:#9d4c1b}.checkbox-table,.radio-table,.conjugation-table,.grammar-table{overflow:hidden;border-radius:18px}.checkbox-table th,.conjugation-table th{background:#17483c}.feedback{border-radius:18px;box-shadow:var(--shadow-card)}@media(max-width:840px){.app-shell{width:min(100vw - 16px,100%);padding-top:calc(var(--safe-top) + 12px)}.hero-panel{grid-template-columns:1fr;padding:18px}.exercise-shell{padding:16px}.exercise-shell-head{flex-direction:column;align-items:flex-start}.exercise-title{max-width:none}}@media(max-width:640px){.brand-logo{width:150px}.title-main{font-size:2rem}.hero-copy h1{font-size:2.4rem}.image-grid{grid-template-columns:repeat(2,1fr)}#bottom-nav{padding-left:8px;padding-right:8px}.nav-btn{padding:0 10px;font-size:14px}}