@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,750&family=Quicksand:wght@400;600;700&display=swap";:root{--bg: #fbfbfd;--bg-soft: #f4f6fb;--surface: rgba(255, 255, 255, .96);--surface-alt: rgba(255, 255, 255, .94);--border: rgba(15, 15, 15, .08);--ink: rgba(15, 15, 15, .9);--text: var(--ink);--muted: rgba(15, 15, 15, .58);--accent: #41c7b1;--accent-hover: #2fb49f;--accent-2: #7aa7ff;--accent-soft: rgba(65, 199, 177, .12);--correct: #19a565;--wrong: #e4556f;--radius-lg: 26px;--radius-md: 16px;--radius-sm: 12px;--shadow-sm: 0 10px 28px rgba(15, 15, 15, .05);--shadow-md: 0 24px 68px rgba(15, 15, 15, .07);--shadow-sticker: 0 0 0 rgba(0, 0, 0, 0);--ring: rgba(122, 167, 255, .24);--title-font: "Fraunces", ui-serif, Georgia, serif;--body-font: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}input,textarea,button,select{font-family:inherit}body{margin:0;font-family:var(--body-font);color:var(--text);line-height:1.55;min-height:100vh;background:radial-gradient(circle at 14% 14%,rgba(65,199,177,.14),transparent 42%),radial-gradient(circle at 86% 18%,rgba(122,167,255,.14),transparent 44%),radial-gradient(circle at 50% 86%,rgba(15,15,15,.03),transparent 44%),linear-gradient(180deg,#fbfbfd,#f7f9ff)}#root{max-width:780px;margin:1.4rem auto 2rem;padding:1.6rem;background:linear-gradient(180deg,#fffffffa,#fffffff0);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);animation:fade-up .45s ease-out;isolation:isolate}h1{font-size:clamp(1.4rem,2.5vw,1.95rem);font-weight:750;margin:0 0 .45rem;letter-spacing:.01em;color:var(--ink);font-family:var(--title-font);font-variation-settings:"opsz" 72}.subtitle{color:var(--muted);font-size:.93rem;margin:0 0 1.45rem;max-width:68ch}.app-header{margin-bottom:.2rem}.mode-tabs button:focus-visible,.option-btn:focus-visible,.fill-input:focus-visible,.fill-submit:focus-visible,.reset-btn:focus-visible,.diary-toggle:focus-visible,.diary-clear:focus-visible,.voice-row button:focus-visible,.submit-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}.mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-bottom:1.2rem;padding:.45rem;border-radius:var(--radius-md);background:transparent;border:none;box-shadow:none}.mode-tabs button{border:none;border-radius:14px;padding:.7rem .9rem;background:#ffffffd9;color:var(--muted);font-size:.92rem;font-weight:600;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;box-shadow:0 12px 30px #0f0f0f0f}.mode-tabs button.active{background:linear-gradient(135deg,#41c7b12e,#7aa7ff2e);color:#0f0f0feb;box-shadow:inset 0 0 0 1px #0f0f0f0a,0 14px 34px #0f0f0f14}.mode-tabs button:hover:not(.active){background:#41c7b11a;color:#202529d1;transform:translateY(-1px)}.input-section{margin-bottom:1.2rem}.input-section label{display:block;margin-bottom:.46rem;color:#5f7b72;font-size:.84rem}.input-section textarea{width:100%;min-height:112px;padding:.84rem .96rem;border:1px solid rgba(15,15,15,.08);border-radius:14px;background:var(--surface);color:var(--text);font-size:.97rem;resize:vertical;transition:border-color .2s ease,box-shadow .2s ease}.input-section textarea::placeholder{color:#20252961}.input-section textarea:focus,.input-section textarea:focus-visible{outline:none;border-color:#41c7b147;box-shadow:0 0 0 2px #41c7b117}.voice-row{margin-top:.62rem;display:flex;flex-direction:column;gap:.55rem}.voice-row button,.submit-btn{width:100%;border:none;border-radius:16px;padding:.74rem 1rem;font-size:.95rem;font-weight:600;cursor:pointer;color:#0f0f0feb;background:linear-gradient(135deg,#41c7b124,#7aa7ff24);box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.voice-row button:hover,.submit-btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px #0f0f0f1a;filter:saturate(1.06)}.voice-row button.recording{background:#41c7b129}.voice-row .voice-hint{font-size:.82rem;color:var(--muted)}.submit-btn{margin-top:.72rem}.submit-btn:disabled,.voice-row button:disabled{opacity:.62;cursor:not-allowed;transform:none;box-shadow:none}.loading{text-align:center;margin-top:.6rem;padding:1.3rem;border-radius:12px;background:#edf8f3;color:#5c887b;box-shadow:none;border:none}.error-msg{margin:.95rem 0;padding:.72rem .9rem;border-radius:10px;border:1px solid rgba(228,124,135,.35);background:#fff4f5;color:#bf5c69;font-size:.9rem}.highlighted-sentence-wrap,.question-card,.reveal-box,.diary-item{background:var(--surface);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.highlighted-sentence-wrap{margin-top:1rem;margin-bottom:.75rem;padding:1rem 1.08rem}.highlighted-sentence-label{display:block;margin-bottom:.45rem;font-size:.82rem;color:var(--muted)}.highlighted-sentence{font-size:1.03rem}.highlighted-sentence .sentence-highlight{padding:.1em .28em;border-radius:999px;background:#ffd65c8c;color:#202529db;box-shadow:inset 0 0 0 2px #20252914}.questions-section{margin-top:1.35rem}.question-card{margin-bottom:.86rem;padding:1.05rem;animation:fade-up .32s ease-out both}.question-card h3{margin:0 0 .46rem;font-size:.82rem;color:var(--muted)}.question-card .q-text{margin-bottom:.9rem;font-size:.98rem}.options{display:flex;flex-direction:column;gap:.48rem}.option-btn{text-align:left;border:2px solid var(--border);border-radius:14px;padding:.58rem .82rem;background:var(--surface-alt);color:var(--text);font-size:.93rem;cursor:pointer;transition:border-color .2s ease,transform .2s ease,background .2s ease}.option-btn:hover:not(:disabled){border-color:#2bb3a48c;transform:translate(2px);background:#2bb3a414}.option-btn.correct{border-color:#19a5658c;background:#19a56524;color:#0b7044eb;font-weight:700;box-shadow:inset 0 0 0 2px #19a56529}.option-btn.wrong{border-color:#e4556f8c;background:#e4556f1f;color:#9f2135eb;font-weight:700;box-shadow:inset 0 0 0 2px #e4556f24}.option-btn:disabled{cursor:default}.fill-input{width:100%;margin-bottom:.7rem;padding:.58rem .82rem;border:2px solid var(--border);border-radius:14px;background:#ffffffd6;color:var(--text);font-size:.92rem;transition:border-color .2s ease,box-shadow .2s ease}.fill-input:focus{outline:none;border-color:#2bb3a48c;box-shadow:0 0 0 3px #2bb3a41f}.fill-submit,.reset-btn,.diary-toggle,.diary-clear{border-radius:14px;border:2px solid var(--border);background:#ffffffbf;color:#202529c7;cursor:pointer;transition:all .2s ease}.fill-submit{padding:.48rem .9rem;font-size:.88rem}.fill-submit:hover,.reset-btn:hover,.diary-toggle:hover{border-color:#2bb3a48c;background:#2bb3a41f;color:#202529db}.explanation{margin-top:.92rem;padding-top:.85rem;border-top:2px dashed rgba(32,37,41,.14);font-size:.9rem;color:#202529ad}.explanation strong{color:#202529d6}.reveal-box{margin-top:1.25rem;padding:1.08rem;background:linear-gradient(180deg,#fffffff5,#f3f3f199)}.reveal-box h3{margin:0 0 .58rem;color:#5d7f74;font-size:.87rem}.reveal-box .better-sentence{margin-bottom:.45rem;color:#13784d;font-weight:700;font-size:1.02rem}.reveal-box .zh-translation{margin-bottom:.82rem;font-size:.96rem}.reveal-box .structure-list{margin:0;padding:0;list-style:none;color:#66867c;font-size:.89rem}.reveal-box .structure-list li{position:relative;padding:.22rem 0 .22rem .95rem}.reveal-box .structure-list li:before{content:"-";position:absolute;left:0;color:#63c7af}.reset-btn{margin-top:1.15rem;padding:.56rem 1.08rem;font-size:.88rem}.diary-section{margin-top:2.5rem;padding-top:1.5rem;border-top:2px dashed rgba(32,37,41,.14)}.diary-toggle{padding:.5rem 1rem;font-size:.9rem}.diary-clear{margin-left:.75rem;padding:.35rem .75rem;border-radius:999px;border:2px solid var(--border);background:transparent;color:var(--muted);font-size:.8rem;cursor:pointer}.diary-clear:hover{color:var(--wrong);border-color:var(--wrong);background:transparent}.diary-list{list-style:none;margin:1rem 0 0;padding:0}.diary-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:none;padding:1rem;margin-bottom:.75rem}.diary-time{display:block;margin-bottom:.35rem;color:var(--muted);font-size:.8rem}.diary-mode{color:var(--accent);font-size:.75rem;margin-right:.5rem}.diary-content{margin-top:.5rem;font-size:.9rem}.diary-original{margin-bottom:.25rem;color:var(--muted)}.diary-better{color:var(--text)}.diary-zh{color:var(--text);margin-bottom:.35rem}.diary-structure{margin:.35rem 0 0;padding:0;list-style:none;color:var(--muted);font-size:.85rem}.diary-structure li{padding-left:1rem;position:relative}.diary-structure li:before{content:"•";position:absolute;left:0;color:var(--accent)}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){*{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}@media (max-width: 680px){#root{margin:.65rem;min-height:100vh;border-radius:18px;border-left:1px solid rgba(214,235,225,.95);border-right:1px solid rgba(214,235,225,.95);padding:1.05rem}h1{font-size:1.32rem}.subtitle{font-size:.87rem}.mode-tabs button{font-size:.88rem;padding:.66rem .75rem}.question-card,.reveal-box,.highlighted-sentence-wrap{padding:.92rem}}@media (max-width: 420px){#root{margin:.8rem;padding:.96rem}.mode-tabs{gap:.36rem;padding:.38rem}}