@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,sans-serif;background:#f5f5f7;color:#1d1d1f;line-height:1.6;overflow:auto;height:100%}body.modal-open{overflow:hidden;position:fixed;width:100%;height:100%;top:0;left:0;touch-action:none}.app{max-width:960px;margin:0 auto;padding:20px}.app-header{margin-bottom:24px}.app-header h1{font-size:24px;font-weight:700;color:#1d1d1f}.tabs{display:flex;border-bottom:2px solid #e5e5e7;margin-bottom:24px}.tab{flex:1;padding:12px 0;text-align:center;cursor:pointer;font-size:16px;font-weight:600;color:#86868b;border-bottom:3px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none}.tab.active{color:#5856d6;border-bottom-color:#5856d6}.tab:hover{color:#5856d6}.topic-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.topic-header h2{font-size:14px;color:#86868b;font-weight:500}.btn{padding:8px 16px;border-radius:8px;border:1px solid #d2d2d7;background:#fff;cursor:pointer;font-size:14px;transition:all .15s}.btn:hover{background:#f5f5f7}.btn-primary{background:#5856d6;color:#fff;border-color:#5856d6}.btn-primary:hover{background:#4a48c4}.btn-success{background:#34c759;color:#fff;border-color:#34c759}.btn-success:hover{background:#2db84e}.btn-outline{background:transparent;color:#5856d6;border-color:#5856d6}.btn-sm{padding:4px 12px;font-size:13px}.chunks-display{background:#fff;border-radius:12px;padding:24px;border:1px dashed #d2d2d7;margin-bottom:24px;line-height:1.8;font-size:16px}.chunk-wrapper{display:inline}.chunk-badge{display:inline-block;border:1.5px solid #d2d2d7;border-radius:6px;padding:1px 5px;margin:1px 0;cursor:pointer;transition:all .2s;vertical-align:baseline;background:#fff;position:relative}.chunk-badge:has(.chunk-english){padding-top:14px}.chunk-badge.in-progress{border-color:#ff9500;background:#fff8f0;border-style:dashed}.chunk-badge:hover{border-color:#5856d6;background:#f0f0ff}.chunk-badge.completed{border-color:#b8dfc6;background:#f8fcf9}.chunk-badge.active{border-color:#5856d6;background:#f0f0ff;box-shadow:0 0 0 2px #5856d633}.chunk-japanese{font-size:inherit;color:inherit;line-height:inherit}.chunk-english{position:absolute;top:1px;left:5px;right:5px;font-size:9px;color:#aaa;font-weight:400;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connector-text{color:#86868b;font-size:15px}.selectable-text-segment{color:#1d1d1f;font-size:16px;line-height:2.2}.selectable-text-segment::selection{background:#d4d0ff}.selection-tooltip{animation:tooltipFadeIn .15s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,-90%)}to{opacity:1;transform:translate(-50%,-100%)}}.topic-buttons{display:flex;gap:8px;margin-bottom:24px}.topic-btn{flex:1;padding:12px;border:1px solid #d2d2d7;border-radius:8px;background:#fff;cursor:pointer;font-size:14px;transition:all .15s}.topic-btn:hover{border-color:#5856d6;background:#f0f0ff}.topic-btn.active{background:#ede7f6;border-color:#5856d6;color:#5856d6;font-weight:600}.input-section{margin-bottom:24px}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.input-header h3{font-size:14px;font-weight:500}.char-count{font-size:13px;color:#86868b}.english-input{width:100%;min-height:100px;padding:16px;border:1px solid #d2d2d7;border-radius:12px;font-size:16px;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s}.english-input:focus{border-color:#5856d6}.english-input::placeholder{color:#c7c7cc}.hint-area{text-align:center;padding:24px;color:#c7c7cc;font-size:14px}.hint-content{background:#fff8e1;border:1px solid #ffcc02;border-radius:12px;padding:16px;margin-top:12px;text-align:left;font-size:14px;color:#1d1d1f}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:#fff;border-radius:16px;width:90%;max-width:600px;max-height:85vh;box-shadow:0 20px 60px #0003;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e5e7}.modal-header h2{font-size:20px;color:#ff6b35;font-weight:700}.modal-close{width:32px;height:32px;border-radius:50%;border:1px solid #d2d2d7;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.modal-body{padding:24px;overflow-y:auto;overflow-x:hidden}.modal-footer{display:flex;gap:12px;padding:20px 24px;border-top:1px solid #e5e5e7}.modal-footer .btn{flex:1;padding:14px;font-size:16px;font-weight:600;border-radius:12px}.practice-japanese{background:#f0f0ff;border:2px solid #5856d6;border-radius:12px;padding:16px;font-size:18px;color:#5856d6;margin-bottom:16px;text-align:center}.practice-label{font-size:13px;color:#86868b;margin-bottom:8px}.practice-input{width:100%;min-height:80px;padding:16px;border:2px solid #d2d2d7;border-radius:12px;font-size:16px;font-family:inherit;resize:none;outline:none;margin-bottom:0}.practice-input:focus{border-color:#5856d6}.feedback-card{border-radius:12px;padding:16px;margin-bottom:16px}.feedback-good{background:#f0faf3;border:1px solid #34c759}.feedback-improve{background:#fff3e0;border:1px solid #ff9500}.feedback-score{font-size:24px;font-weight:700;text-align:center;margin:12px 0}.score-high{color:#34c759}.score-mid{color:#ff9500}.score-low{color:#ff3b30}.chat-panel{position:fixed;bottom:0;right:20px;width:380px;max-height:500px;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 20px #0000001a;display:flex;flex-direction:column;z-index:90}.chat-panel.collapsed{max-height:48px;overflow:hidden}.chat-header{padding:12px 16px;background:#5856d6;color:#fff;border-radius:16px 16px 0 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600}.chat-messages{flex:1;overflow-y:auto;padding:16px;min-height:200px;max-height:350px}.chat-message{margin-bottom:12px;display:flex;flex-direction:column}.chat-message.user{align-items:flex-end}.chat-message.assistant{align-items:flex-start}.chat-bubble{max-width:85%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5}.chat-message.user .chat-bubble{background:#5856d6;color:#fff}.chat-message.assistant .chat-bubble{background:#fff;color:#1d1d1f;border:1px solid #e5e5e7;font-size:14px;line-height:1.8;white-space:pre-wrap}.chat-input-area{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #e5e5e7}.chat-input{flex:1;padding:10px 14px;border:1px solid #d2d2d7;border-radius:20px;font-size:14px;outline:none}.chat-input:focus{border-color:#5856d6}.voice-btn{width:40px;height:40px;border-radius:50%;border:none;background:#ff3b30;color:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.voice-btn.recording{animation:pulse 1s infinite;background:#ff3b30}.voice-btn.idle{background:#86868b}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.send-btn{width:40px;height:40px;border-radius:50%;border:none;background:#5856d6;color:#fff;cursor:pointer;font-size:16px}.action-row{display:flex;gap:8px;justify-content:flex-end;margin-bottom:16px}.loading-dots{display:inline-flex;gap:4px}.loading-dots span{width:8px;height:8px;background:#5856d6;border-radius:50%;animation:dotBounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes dotBounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.review-section{background:#fff;border-radius:12px;padding:24px;margin-bottom:16px}.review-section h3{font-size:16px;margin-bottom:12px}.corrected-text{background:#f0faf3;border-radius:8px;padding:16px;font-size:15px;line-height:1.8;white-space:pre-wrap}.generate-section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;text-align:center}.category-selector{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}.category-chip{padding:8px 16px;border-radius:20px;border:1px solid #d2d2d7;background:#fff;cursor:pointer;font-size:13px;transition:all .15s}.category-chip:hover,.category-chip.active{background:#5856d6;color:#fff;border-color:#5856d6}.text-editor-area{width:100%;min-height:150px;padding:16px;border:1px solid #d2d2d7;border-radius:12px;font-size:16px;font-family:inherit;resize:vertical;outline:none}.text-editor-area:focus{border-color:#5856d6}.demo-banner{background:#ff9500;color:#fff;text-align:center;padding:8px;font-size:13px;font-weight:600}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.stat-card{background:#fff;border-radius:12px;padding:16px;text-align:center}.stat-value{font-size:28px;font-weight:700;color:#5856d6}.stat-label{font-size:13px;color:#86868b;margin-top:4px}.streaming-text{white-space:pre-wrap}.streaming-cursor{display:inline-block;width:2px;height:1em;background:#5856d6;animation:blink 1s infinite;vertical-align:text-bottom}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.ai-loading{color:#86868b;font-size:13px}.ai-loading:after{content:"";animation:dots 1.4s infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}