*{box-sizing:border-box;margin:0;padding:0}body{-webkit-user-select:none;user-select:none;color:#3a3a5c;background:linear-gradient(135deg,#fdf6ff 0%,#f0f4ff 50%,#fef9f0 100%);min-height:100vh;font-family:Segoe UI,Arial,sans-serif;overflow-x:hidden}.loading-screen{flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100vh;display:flex}.loading-screen h1{color:#7c5cbf;font-size:24px}.category-screen{max-width:960px;margin:0 auto;padding:40px 30px}.categories-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;margin-top:10px;display:grid}.category-card{text-align:center;cursor:pointer;background:#fff;border-radius:20px;padding:30px 20px;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 12px #6c4fa01a}.category-card:hover{transform:translateY(-4px);box-shadow:0 6px 24px #6c4fa033}.category-card.empty{opacity:.5;cursor:default}.category-card.empty:hover{transform:none;box-shadow:0 2px 12px #6c4fa01a}.category-icon{margin-bottom:14px;font-size:56px}.category-title{color:#4a3a6b;margin-bottom:6px;font-size:20px;font-weight:600}.category-description{color:#9b8abd;margin-bottom:10px;font-size:14px}.category-count{color:#9b59b6;font-size:14px;font-weight:600}.work-list-screen{max-width:960px;margin:0 auto;padding:40px 30px}.list-header{justify-content:center;align-items:center;margin-bottom:30px;display:flex;position:relative}.list-header h1{text-align:center;color:#6b4fa0;flex:1;margin:0;font-size:28px}.list-header .back-btn{position:absolute;left:0}.settings-btn{cursor:pointer;background:0 0;border:2px solid #d4a8f5;border-radius:50%;width:44px;height:44px;font-size:20px;transition:background .2s}.list-header>.settings-btn{position:absolute;right:0}.settings-btn:hover{background:#f0e6ff}.works-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;display:grid}.work-card{text-align:center;cursor:pointer;background:#fff;border-radius:18px;padding:24px 18px;transition:transform .2s,box-shadow .2s;position:relative;box-shadow:0 2px 12px #6c4fa01a}.work-card:hover{transform:translateY(-4px);box-shadow:0 6px 24px #6c4fa033}.work-card.completed{background:linear-gradient(135deg,#f8f0ff,#fff0fb);border:2px solid #d4a8f5}.work-card-icon{margin-bottom:12px;font-size:48px}.work-card-title{color:#4a3a6b;margin-bottom:6px;font-size:17px;font-weight:600;line-height:1.3}.work-card-author{color:#8a7aaa;font-size:14px}.work-card-badge{color:#9b59b6;margin-top:10px;font-size:13px;font-weight:600}.progress-badge{color:#e67e22}.reset-btn{color:#9b8abd;cursor:pointer;background:#fff;border:1px solid #d4c8e8;border-radius:10px;margin-top:10px;padding:6px 16px;font-size:13px;transition:background .2s,color .2s}.reset-btn:hover{color:#6b4fa0;background:#f0e6ff}.session-screen{flex-direction:column;height:100vh;padding:16px 24px;display:flex;overflow:hidden}.session-header{border-bottom:2px solid #ede5f5;flex-shrink:0;align-items:center;gap:16px;padding-bottom:12px;display:flex}.back-btn{color:#7c5cbf;cursor:pointer;background:0 0;border:none;border-radius:10px;padding:6px 12px;font-size:18px;transition:background .2s}.back-btn:hover{background:#f0e6ff}.session-title{color:#4a3a6b;flex:1;font-size:20px;font-weight:600}.episode-progress{align-items:center;gap:6px;display:flex}.dot{color:#ccc;font-size:16px}.dot.done{font-size:18px}.dot.current{color:#9b59b6;font-size:18px}.episode-label{color:#9b59b6;font-size:15px;font-weight:600}.unicorn-progress{letter-spacing:4px;font-size:22px;transition:transform .3s}.unicorn-progress.pop{animation:.4s unicornPop}@keyframes unicornPop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.teacher-area{flex:1;justify-content:center;align-items:center;min-height:0;padding:24px 0;display:flex;overflow-y:auto}.teacher-bubble{color:#3a3a5c;text-align:center;background:#fff;border-radius:24px;width:100%;max-width:700px;padding:28px 36px;font-size:22px;line-height:1.5;position:relative;box-shadow:0 4px 20px #6c4fa01f}.teacher-bubble:after{content:"";border-top:14px solid #fff;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.loading-dots span{animation:1.4s infinite both blink}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:0}40%{opacity:1}}.child-area{flex-shrink:0;justify-content:center;align-items:center;min-height:60px;padding:10px 0;display:flex}.transcript{color:#6b5b8a;text-align:center;max-width:600px;font-size:18px;font-style:italic}.controls{flex-shrink:0;justify-content:center;align-items:center;gap:20px;padding:16px 0;display:flex}.mic-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:36px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 16px #9b59b666}.mic-btn:hover{transform:scale(1.08)}.mic-btn.listening{background:linear-gradient(135deg,#e74c3c,#c0392b);animation:1.2s ease-in-out infinite pulse;box-shadow:0 4px 24px #e74c3c80}.mic-btn.processing{cursor:wait;background:linear-gradient(135deg,#f39c12,#e67e22);animation:1.2s ease-in-out infinite pulse;box-shadow:0 4px 24px #f39c1280}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.mic-icon{pointer-events:none}.repeat-btn{cursor:pointer;background:#fff;border:2px solid #d4a8f5;border-radius:50%;width:52px;height:52px;font-size:22px;transition:background .2s}.repeat-btn:hover{background:#f8f0ff}.stop-btn{cursor:pointer;background:#fff;border:2px solid #27ae60;border-radius:50%;width:52px;height:52px;font-size:22px;transition:background .2s}.stop-btn:hover{background:#eafaf1}.hidden{display:none!important}.mic-hint{text-align:center;color:#9b8abd;flex-shrink:0;padding:4px 0;font-size:16px}.text-input-area{gap:10px;width:100%;max-width:600px;margin:0 auto;padding:8px 0 16px;display:flex}.text-input-area input{color:#3a3a5c;border:2px solid #e0d4f0;border-radius:14px;outline:none;flex:1;padding:12px 18px;font-size:16px;transition:border-color .2s}.text-input-area input:focus{border-color:#9b59b6}.text-input-area button{color:#fff;cursor:pointer;background:#9b59b6;border:none;border-radius:14px;width:48px;height:48px;font-size:20px;transition:background .2s}.text-input-area button:hover{background:#8e44ad}.completion-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100vh;padding:40px;display:flex}.completion-screen h1{color:#6b4fa0;font-size:36px}.completion-screen p{color:#5a4a7a;font-size:22px}.completion-subtitle{color:#9b8abd!important;font-size:16px!important}.unicorns{font-size:64px;animation:1s ease-in-out infinite bounce}.unicorn-big{font-size:96px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}.primary-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:16px;margin-top:20px;padding:16px 40px;font-size:20px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #9b59b64d}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #9b59b666}.primary-btn:disabled,.secondary-btn:disabled,.mic-btn:disabled,.stop-btn:disabled,.repeat-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}.secondary-btn{color:#7c5cbf;cursor:pointer;background:#fff;border:2px solid #d4a8f5;border-radius:16px;margin-top:20px;padding:14px 32px;font-size:18px;transition:background .2s}.secondary-btn:hover{background:#f8f0ff}.summary-screen{flex-direction:column;height:100vh;padding:16px 24px;display:flex}.summary-intro{text-align:center;padding:20px 0 10px}.summary-intro h2{color:#6b4fa0;margin-bottom:8px;font-size:24px}.summary-subtitle{color:#9b8abd;font-size:17px}.summary-text{color:#3a3a5c;background:#fff;border-radius:20px;flex:1;align-self:center;width:100%;max-width:750px;margin:16px 0;padding:28px 32px;font-size:19px;line-height:1.7;overflow-y:auto;box-shadow:0 2px 16px #6c4fa01a}.summary-text p{margin-bottom:14px}.summary-text p:last-child{margin-bottom:0}.summary-actions{text-align:center;padding:10px 0 20px}.retelling-screen .retelling-collected{background:#fff;border-radius:18px;flex:1;align-self:center;width:100%;max-width:700px;margin:10px 0;padding:20px 24px;overflow-y:auto;box-shadow:0 2px 12px #6c4fa014}.retelling-label{color:#9b8abd;margin-bottom:10px;font-size:15px;font-weight:600}.retelling-text{color:#3a3a5c;font-size:18px;line-height:1.6}.retelling-placeholder{color:#c4b5d8;font-style:italic}.retelling-actions{text-align:center;padding:8px 0 16px}.finish-btn{margin-top:12px}.plan-screen{box-sizing:border-box;flex-direction:column;gap:8px;height:100vh;padding:8px 16px 12px;display:flex;overflow:hidden}.plan-layout{flex:auto;align-self:center;gap:16px;width:100%;max-width:1200px;min-height:0;display:flex}.plan-left,.plan-right{flex-direction:column;flex:1 1 0;gap:8px;min-width:0;min-height:0;display:flex}.plan-intro{color:#6c4fa0;text-align:center;flex-shrink:0;font-size:clamp(14px,2vh,18px);font-weight:600}.plan-list{flex-direction:column;flex:auto;justify-content:center;gap:clamp(4px,.8vh,8px);min-height:0;margin:0;padding:0;list-style:none;display:flex}.plan-item{color:#2b2b2b;opacity:0;background:linear-gradient(135deg,#f3edff 0%,#e3d6ff 100%);border:2px solid #c4a6f5;border-radius:12px;align-items:center;gap:10px;padding:clamp(6px,1vh,10px) 16px;font-size:clamp(14px,2vh,20px);font-weight:600;transition:opacity .4s,transform .4s;display:flex;transform:translateY(6px)}.plan-item.visible{opacity:1;transform:translateY(0)}.plan-num{color:#6c4fa0;flex-shrink:0;font-weight:700}.plan-text{flex:1}.plan-right .teacher-bubble{flex-shrink:0;padding:10px 14px;font-size:clamp(13px,1.8vh,16px)}.plan-right .retelling-collected{background:#fff;border-radius:14px;flex:auto;min-height:0;padding:12px 16px;overflow-y:auto;box-shadow:0 2px 12px #6c4fa014}.plan-right .retelling-label{margin-bottom:6px;font-size:13px}.plan-right .retelling-text{font-size:clamp(14px,1.9vh,17px);line-height:1.5}.plan-controls{flex-shrink:0;align-items:center;gap:12px;display:flex}.plan-controls .mic-btn{flex-shrink:0}.plan-controls .mic-hint{color:#7a6a99;flex:1;font-size:13px}.plan-right .text-input-area{flex-shrink:0;gap:6px;display:flex}.plan-right .text-input-area input{flex:1;min-width:0}.plan-right .finish-btn{flex-shrink:0;margin-top:0}@media (width<=720px){.plan-layout{flex-direction:column;gap:8px}.plan-left,.plan-right{flex:none}}.review-screen{flex-direction:column;height:100vh;padding:16px 24px;display:flex;overflow-y:auto}.review-rating{text-align:center;padding:24px 0 16px}.review-emoji{margin-bottom:10px;font-size:56px}.review-text{font-size:22px;font-weight:600}.rating-excellent .review-text{color:#27ae60}.rating-good .review-text{color:#6b4fa0}.rating-ok .review-text{color:#e67e22}.review-errors{background:#fff9f0;border:2px solid #f5d5a0;border-radius:16px;width:100%;max-width:700px;margin:0 auto 16px;padding:20px 24px}.review-errors h3{color:#d4880f;margin-bottom:12px;font-size:18px}.review-errors ul{padding:0;list-style:none}.review-errors li{color:#5a4a3a;border-bottom:1px solid #f0e8d8;padding:8px 0;font-size:17px;line-height:1.5}.review-errors li:last-child{border-bottom:none}.review-retelling{background:#fff;border-radius:16px;width:100%;max-width:700px;margin:0 auto 16px;padding:20px 24px;box-shadow:0 2px 12px #6c4fa014}.review-retelling h3{color:#9b8abd;margin-bottom:10px;font-size:16px}.review-retelling p{color:#3a3a5c;font-size:17px;line-height:1.6}.review-stats{text-align:center;color:#9b8abd;padding:8px 0;font-size:15px}.review-actions{justify-content:center;gap:16px;padding:10px 0 24px;display:flex}.modal-overlay{z-index:100;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:20px;flex-direction:column;min-width:400px;max-width:560px;max-height:70vh;padding:28px 32px;display:flex;box-shadow:0 8px 40px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-header h2{color:#4a3a6b;margin:0;font-size:22px}.modal-close{color:#999;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:22px}.modal-close:hover{color:#6b4fa0;background:#f0e6ff}.mic-list{flex-direction:column;gap:8px;margin-bottom:20px;display:flex;overflow-y:auto}.mic-option{cursor:pointer;border:2px solid #ede5f5;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;transition:border-color .2s,background .2s;display:flex}.mic-option:hover{background:#faf6ff}.mic-option.selected{background:#f8f0ff;border-color:#9b59b6}.mic-option input[type=radio]{accent-color:#9b59b6;width:18px;height:18px}.mic-name{color:#3a3a5c;font-size:15px}.no-devices{text-align:center;color:#999;padding:20px 0;font-size:16px}.modal-actions{justify-content:flex-end;display:flex}.profile-screen{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:40px 30px;display:flex}.profile-screen h1{color:#6b4fa0;margin-bottom:40px;font-size:32px}.profiles-grid{flex-wrap:wrap;justify-content:center;gap:28px;max-width:700px;display:flex}.profile-card{text-align:center;cursor:pointer;background:#fff;border-radius:20px;width:150px;padding:28px 24px;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 12px #6c4fa01a}.profile-card:hover{transform:translateY(-4px);box-shadow:0 6px 24px #6c4fa033}.profile-card.last-used{border:2px solid #d4a8f5}.profile-card .profile-avatar{margin-bottom:10px;font-size:64px}.profile-card .profile-name{color:#4a3a6b;font-size:18px;font-weight:600}.profile-add-card{background:0 0;border:2px dashed #d4c8e8}.profile-add-card .profile-avatar{color:#c4b5d8;font-size:48px}.profile-add-card .profile-name{color:#9b8abd}.profile-add-card:hover{background:#faf6ff;border-color:#9b59b6}.create-profile-screen{flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:100vh;padding:40px 30px;display:flex}.create-profile-screen h1{color:#6b4fa0;font-size:28px}.name-input{text-align:center;color:#3a3a5c;border:2px solid #e0d4f0;border-radius:16px;outline:none;width:300px;padding:14px 20px;font-size:18px;transition:border-color .2s}.name-input:focus{border-color:#9b59b6}.avatar-picker{flex-wrap:wrap;justify-content:center;gap:14px;max-width:400px;display:flex}.avatar-option{cursor:pointer;background:#fff;border:3px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:40px;transition:border-color .2s,transform .2s;display:flex;box-shadow:0 2px 8px #6c4fa01a}.avatar-option:hover{transform:scale(1.1)}.avatar-option.selected{border-color:#9b59b6;box-shadow:0 4px 16px #9b59b64d}.profile-indicator{cursor:pointer;border-radius:12px;align-items:center;gap:8px;padding:4px 12px;transition:background .2s;display:flex;position:absolute;left:0}.profile-indicator:hover{background:#f0e6ff}.profile-indicator-avatar{font-size:28px}.profile-indicator-name{color:#6b4fa0;text-overflow:ellipsis;white-space:nowrap;max-width:100px;font-size:15px;font-weight:600;overflow:hidden}.header-actions{align-items:center;gap:8px;display:flex;position:absolute;right:0}.stats-btn{cursor:pointer;background:0 0;border:2px solid #d4a8f5;border-radius:50%;width:44px;height:44px;font-size:20px;transition:background .2s}.stats-btn:hover{background:#f0e6ff}.stats-screen{max-width:700px;margin:0 auto;padding:40px 30px}.stats-header-info{text-align:center;margin-bottom:28px}.stats-header-info .profile-avatar{font-size:64px}.stats-header-info .profile-name{color:#4a3a6b;margin-top:6px;font-size:22px;font-weight:600}.stats-summary{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:36px;display:flex}.stat-card{text-align:center;background:#fff;border-radius:18px;flex:1;min-width:140px;max-width:200px;padding:24px 20px;box-shadow:0 2px 12px #6c4fa01a}.stat-card.streak{background:linear-gradient(135deg,#fff5e6,#fff0f0);border:2px solid #ffd699}.stat-number{color:#6b4fa0;margin-bottom:4px;font-size:36px;font-weight:700}.stat-label{color:#9b8abd;font-size:14px}.category-progress-section h2{color:#6b4fa0;margin-bottom:16px;font-size:20px}.category-progress-item{border-bottom:1px solid #ede5f5;align-items:center;gap:14px;padding:12px 0;display:flex}.category-progress-item:last-child{border-bottom:none}.category-progress-icon{flex-shrink:0;font-size:28px}.category-progress-info{flex:1;min-width:0}.category-progress-title{color:#4a3a6b;margin-bottom:6px;font-size:16px;font-weight:600}.progress-bar{background:#ede5f5;border-radius:5px;height:10px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#9b59b6,#d4a8f5);border-radius:5px;height:100%;transition:width .3s}.category-progress-count{color:#9b8abd;flex-shrink:0;font-size:15px;font-weight:600}.completion-streak{font-weight:700;color:#e67e22!important;font-size:24px!important}.chunks-screen{box-sizing:border-box;flex-direction:column;width:100%;max-width:1100px;height:100vh;margin:0 auto;padding:12px 24px 16px;display:flex}.chunks-intro{text-align:center;color:#6b4fa0;margin:8px 0 12px;font-size:17px;font-weight:600}.chunks-layout{flex:1;grid-template-columns:1fr 1fr;gap:20px;min-height:0;margin-bottom:12px;display:grid;overflow:hidden}.chunks-slots{flex-direction:column;gap:6px;min-width:0;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.chunks-pool-section{flex-direction:column;min-height:0;display:flex}.chunk-slot{background:#f5eefc;border:2px dashed #d4a8f5;border-radius:12px;align-items:stretch;gap:8px;min-height:52px;padding:6px;transition:background .2s,border-color .2s;display:flex}.chunk-slot.correct{background:#eef9ee;border:2px solid #4caf50}.chunk-slot.wrong{background:#fdecec;border:2px solid #e57373;animation:.4s chunk-shake}.chunk-slot.locked .chunk-card.placed{cursor:default}@keyframes chunk-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.chunk-slot-num{color:#6b4fa0;background:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;font-size:20px;font-weight:700;display:flex}.chunk-slot-empty{color:#b8a8d4;flex:1;justify-content:center;align-items:center;padding:6px;font-size:14px;font-style:italic;display:flex}.chunks-pool-label{color:#9b8abd;flex-shrink:0;margin-bottom:8px;font-size:15px}.chunks-pool{flex-direction:column;flex:1;gap:8px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.chunks-pool-empty{color:#b8a8d4;padding:8px 4px;font-size:15px;font-style:italic}.chunk-card{color:#3a3a5c;cursor:grab;-webkit-user-select:none;user-select:none;text-align:left;overflow-wrap:break-word;background:#fff;border:2px solid #d4a8f5;border-radius:10px;min-width:0;padding:8px 12px;font-family:inherit;font-size:15px;line-height:1.3;transition:transform .12s,box-shadow .12s,background .12s;box-shadow:0 2px 8px #6c4fa014}.chunk-card:hover{background:#faf4ff;transform:translateY(-1px);box-shadow:0 4px 12px #6c4fa029}.chunk-card:active{cursor:grabbing}.chunk-card.dragging{opacity:.4;cursor:grabbing}.chunk-card.placed{background:#fff;border-color:#b8a0e0;flex:1}.chunk-slot.correct .chunk-card.placed{cursor:default}.chunk-slot.locked .chunk-card.placed,.chunk-slot.correct .chunk-card.placed{pointer-events:none}.chunk-slot.drop-over{background:#f0e0fa;border-style:solid;border-color:#7c5cbf}.chunks-pool.drop-over{outline-offset:4px;border-radius:12px;outline:2px dashed #9b59b6}.grouping-screen.chunks-screen{height:auto;min-height:100vh;overflow:visible}.grouping-zones{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px;display:grid}.grouping-zones.cols-1{grid-template-columns:1fr}.grouping-zones.cols-2{grid-template-columns:1fr 1fr}.group-zone{background:#f5eefc;border:2px dashed #d4a8f5;border-radius:14px;flex-direction:column;min-height:120px;padding:10px;transition:background .15s,border-color .15s;display:flex}.group-zone.drop-over{background:#f0e0fa;border-style:solid;border-color:#7c5cbf}.group-zone-label{text-align:center;color:#6b4fa0;margin-bottom:10px;font-size:17px;font-weight:700}.group-zone-items{flex-wrap:wrap;align-content:flex-start;gap:8px;display:flex}.group-zone-items .chunk-card{overflow-wrap:break-word;flex:0 auto;max-width:100%}.group-zone-empty{color:#b8a8d4;text-align:center;padding:8px;font-size:14px;font-style:italic}.grouping-screen .chunks-pool{flex-flow:wrap;align-content:flex-start;gap:10px;display:flex}.grouping-screen .chunks-pool .chunk-card{overflow-wrap:break-word;flex:0 auto;max-width:100%}.chunk-card.mark-correct{pointer-events:none;background:#eef9ee;border-color:#4caf50}.chunk-card.mark-wrong{background:#fdecec;border-color:#e57373;animation:.4s chunk-shake}.takeaway-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.takeaway-emoji{margin-bottom:24px;font-size:96px;animation:1.2s ease-in-out infinite takeaway-pulse}.takeaway-text{color:#6b4fa0;max-width:700px;margin-bottom:32px;font-size:36px;font-weight:800;line-height:1.3}@keyframes takeaway-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.imagine-screen{box-sizing:border-box;flex-direction:column;width:100%;max-width:900px;min-height:100vh;margin:0 auto;padding:12px 24px 20px;display:flex}.imagine-screen .episode-count{color:#9b8abd;margin-top:2px;font-size:12px;display:block}.imagine-progress{justify-content:center;gap:10px;margin:8px 0 18px;display:flex}.imagine-dot{background:#e0d4f2;border-radius:50%;width:12px;height:12px;transition:background .2s}.imagine-dot.active{background:#9b59b6}.imagine-stage{text-align:center;flex-direction:column;flex:1;align-items:center;gap:20px;display:flex}.imagine-stage.close-eyes{color:#fff;background:linear-gradient(#1e1547 0%,#3a2369 100%);border-radius:24px;justify-content:center;margin-bottom:20px;padding:40px 30px;position:relative;overflow:hidden}.imagine-starfield{pointer-events:none;background-image:radial-gradient(2px 2px at 4% 4%,#fff,#0000 60%),radial-gradient(2px 2px at 12% 6%,#fff,#0000 60%),radial-gradient(2.5px 2.5px at 22% 3%,#fff,#0000 60%),radial-gradient(2px 2px at 33% 7%,#fff8c2,#0000 60%),radial-gradient(2.5px 2.5px at 45% 10%,#fff,#0000 60%),radial-gradient(2px 2px at 56% 2%,#fff,#0000 60%),radial-gradient(2px 2px at 66% 9%,#d8d4ff,#0000 60%),radial-gradient(2px 2px at 78% 4%,#fff8c2,#0000 60%),radial-gradient(2px 2px at 88% 14%,#fff,#0000 60%),radial-gradient(2px 2px at 96% 8%,#fff,#0000 60%),radial-gradient(2px 2px at 30% 18%,#d8d4ff,#0000 60%),radial-gradient(2px 2px at 18% 16%,#fff,#0000 60%),radial-gradient(2px 2px at 50% 22%,#ffeaa7,#0000 60%),radial-gradient(2px 2px at 72% 18%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 2% 12%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 6% 22%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 9% 30%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 14% 26%,#d8d4ff,#0000 60%),radial-gradient(1.5px 1.5px at 22% 8%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 26% 24%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 30% 32%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 36% 14%,#fff8c2,#0000 60%),radial-gradient(1.5px 1.5px at 38% 4%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 42% 26%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 46% 34%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 50% 30%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 54% 8%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 58% 16%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 62% 30%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 68% 24%,#ffeaa7,#0000 60%),radial-gradient(1.5px 1.5px at 74% 32%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 78% 12%,#d8d4ff,#0000 60%),radial-gradient(1.5px 1.5px at 82% 28%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 86% 22%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 92% 32%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 94% 10%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 98% 26%,#fff,#0000 60%),radial-gradient(1.5px 1.5px at 16% 32%,#fff,#0000 60%),radial-gradient(1px 1px at 3% 8%,#fff,#0000 60%),radial-gradient(1px 1px at 8% 14%,#fff,#0000 60%),radial-gradient(1px 1px at 11% 20%,#fff,#0000 60%),radial-gradient(1px 1px at 13% 4%,#fff,#0000 60%),radial-gradient(1px 1px at 17% 12%,#fff,#0000 60%),radial-gradient(1px 1px at 19% 24%,#fff,#0000 60%),radial-gradient(1px 1px at 24% 16%,#fff,#0000 60%),radial-gradient(1px 1px at 28% 12%,#fff,#0000 60%),radial-gradient(1px 1px at 31% 22%,#fff,#0000 60%),radial-gradient(1px 1px at 34% 30%,#fff,#0000 60%),radial-gradient(1px 1px at 39% 18%,#fff,#0000 60%),radial-gradient(1px 1px at 41% 8%,#fff,#0000 60%),radial-gradient(1px 1px at 44% 14%,#fff,#0000 60%),radial-gradient(1px 1px at 48% 18%,#fff,#0000 60%),radial-gradient(1px 1px at 52% 4%,#fff,#0000 60%),radial-gradient(1px 1px at 55% 24%,#fff,#0000 60%),radial-gradient(1px 1px at 60% 12%,#fff,#0000 60%),radial-gradient(1px 1px at 64% 6%,#fff,#0000 60%),radial-gradient(1px 1px at 67% 20%,#fff,#0000 60%),radial-gradient(1px 1px at 70% 14%,#fff,#0000 60%),radial-gradient(1px 1px at 73% 28%,#fff,#0000 60%),radial-gradient(1px 1px at 76% 8%,#fff,#0000 60%),radial-gradient(1px 1px at 80% 22%,#fff,#0000 60%),radial-gradient(1px 1px at 84% 16%,#fff,#0000 60%),radial-gradient(1px 1px at 87% 30%,#fff,#0000 60%),radial-gradient(1px 1px at 91% 18%,#fff,#0000 60%),radial-gradient(1px 1px at 95% 28%,#fff,#0000 60%),radial-gradient(1px 1px at 5% 40%,#fff,#0000 60%),radial-gradient(1px 1px at 10% 44%,#fff,#0000 60%),radial-gradient(1px 1px at 15% 38%,#fff,#0000 60%),radial-gradient(1px 1px at 20%,#fff,#0000 60%),radial-gradient(1px 1px at 26% 44%,#fff,#0000 60%),radial-gradient(1px 1px at 32% 38%,#d8d4ff,#0000 60%),radial-gradient(1px 1px at 38%,#fff,#0000 60%),radial-gradient(1px 1px at 42% 38%,#d8d4ff,#0000 60%),radial-gradient(1px 1px at 47% 46%,#fff,#0000 60%),radial-gradient(1px 1px at 53% 38%,#fff,#0000 60%),radial-gradient(1px 1px at 60% 42%,#fff,#0000 60%),radial-gradient(1px 1px at 64%,#fff,#0000 60%),radial-gradient(1px 1px at 68% 38%,#fff,#0000 60%),radial-gradient(1px 1px at 74% 36%,#fff,#0000 60%),radial-gradient(1px 1px at 79% 44%,#fff,#0000 60%),radial-gradient(1px 1px at 85% 38%,#fff,#0000 60%),radial-gradient(1px 1px at 90% 46%,#fff,#0000 60%),radial-gradient(1px 1px at 96% 40%,#fff,#0000 60%),radial-gradient(1px 1px at 12% 52%,#fff,#0000 60%),radial-gradient(1px 1px at 18% 60%,#fff,#0000 60%),radial-gradient(1px 1px at 28% 54%,#fff,#0000 60%),radial-gradient(1px 1px at 36% 56%,#fff,#0000 60%),radial-gradient(1px 1px at 44% 62%,#fff,#0000 60%),radial-gradient(1px 1px at 52% 56%,#fff,#0000 60%),radial-gradient(1px 1px at 60% 64%,#fff,#0000 60%),radial-gradient(1px 1px at 70% 58%,#fff,#0000 60%),radial-gradient(1px 1px at 78% 54%,#fff,#0000 60%),radial-gradient(1px 1px at 86% 62%,#fff,#0000 60%),radial-gradient(1px 1px at 94% 56%,#fff,#0000 60%),radial-gradient(1px 1px at 8% 70%,#fff,#0000 60%),radial-gradient(1px 1px at 20% 68%,#fff,#0000 60%),radial-gradient(1px 1px at 34% 74%,#fff,#0000 60%),radial-gradient(1px 1px at 50% 76%,#fff,#0000 60%),radial-gradient(1px 1px at 64% 72%,#fff,#0000 60%),radial-gradient(1px 1px at 80% 70%,#fff,#0000 60%),radial-gradient(1px 1px at 92% 78%,#fff,#0000 60%);background-repeat:no-repeat;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0% 35%,#0000008c 60%,#00000026 85%,#0000 100%);mask-image:linear-gradient(#000 0% 35%,#0000008c 60%,#00000026 85%,#0000 100%)}.imagine-stage.close-eyes .imagine-prompt,.imagine-stage.close-eyes .imagine-next-btn{z-index:1;position:relative}.imagine-emoji-big{filter:drop-shadow(0 4px 12px #ffffc84d);margin-bottom:8px;font-size:84px}.imagine-prompt{color:#fff;max-width:640px;font-size:22px;font-weight:500;line-height:1.5}.imagine-question{color:#6b4fa0;margin-top:10px;font-size:24px;font-weight:700}.imagine-tags{flex-wrap:wrap;justify-content:center;gap:12px;max-width:700px;display:flex}.imagine-tag{color:#3a3a5c;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #d4a8f5;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-family:inherit;font-size:17px;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex;box-shadow:0 2px 8px #6c4fa014}.imagine-tag:hover{transform:translateY(-1px);box-shadow:0 4px 14px #6c4fa02e}.imagine-tag.checked{background:#f0e0fa;border-color:#7c5cbf;font-weight:600}.imagine-tag-emoji{font-size:22px;line-height:1}.imagine-tag-check{color:#4caf50;font-weight:700}.imagine-hint{color:#9b8abd;font-size:14px;font-style:italic}.imagine-emotions{flex-wrap:wrap;justify-content:center;gap:16px;max-width:700px;display:flex}.imagine-emotion{cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #d4a8f5;border-radius:16px;flex-direction:column;align-items:center;gap:4px;min-width:90px;padding:14px 18px;font-family:inherit;transition:transform .12s,box-shadow .12s,background .12s;display:flex;box-shadow:0 2px 8px #6c4fa014}.imagine-emotion:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6c4fa033}.imagine-emotion.checked{background:#f0e0fa;border-color:#7c5cbf;transform:translateY(-2px);box-shadow:0 6px 16px #6c4fa040}.imagine-emotion-emoji{font-size:38px;line-height:1}.imagine-emotion-label{color:#6b4fa0;font-size:14px}.imagine-next-btn{margin-top:10px}.chunks-actions{text-align:center;flex-shrink:0}.chunks-actions .primary-btn{margin-top:0;padding:12px 32px;font-size:18px}@media (width<=720px){.chunks-layout{grid-template-columns:1fr;gap:12px}}.causal-loading{padding:20px}.causal-loading-body{color:#555;justify-content:center;align-items:center;min-height:240px;font-size:22px;display:flex}.causal-chain-screen{box-sizing:border-box;flex-direction:column;align-items:center;gap:6px;height:100vh;padding:12px 20px 16px;display:flex;overflow:hidden}.causal-chain-intro{color:#555;text-align:center;flex-shrink:0;margin:4px 0;font-size:clamp(14px,2vh,20px)}.causal-chain-list{flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:clamp(2px,.8vh,6px);width:100%;max-width:540px;min-height:0;display:flex}.causal-link{color:#2b2b2b;text-align:center;box-sizing:border-box;opacity:0;background:linear-gradient(135deg,#fff7e6 0%,#ffe9c2 100%);border:2px solid #f0c674;border-radius:12px;width:100%;padding:clamp(6px,1.2vh,12px) 18px;font-size:clamp(14px,2.2vh,22px);font-weight:600;transition:opacity .4s,transform .4s;transform:translateY(6px)}.causal-link.visible{opacity:1;transform:translateY(0)}.causal-arrow{color:#f0a040;opacity:0;font-size:clamp(18px,2.6vh,28px);line-height:1;transition:opacity .3s,transform .3s;transform:scale(.6)}.causal-arrow.visible{opacity:1;transform:scale(1)}.causal-chain-actions{flex-shrink:0;margin-top:8px}@media (width<=900px){.causal-chain-list{gap:clamp(2px,.6vh,5px)}.causal-link{padding:clamp(4px,.9vh,9px) 16px;font-size:clamp(13px,1.8vh,20px);line-height:1.25}.causal-arrow{font-size:clamp(14px,1.8vh,22px)}}.causal-screen .episode-count{color:#7a5b14;background:#fff3d4;border-radius:12px;margin-left:8px;padding:4px 10px;font-size:14px}.mode-select-screen{box-sizing:border-box;flex-direction:column;align-items:center;min-height:100vh;padding:20px;display:flex}.mode-select-screen .session-author{color:#888;text-align:center;margin-top:2px;font-size:16px}.mode-select-intro{color:#333;text-align:center;margin:32px 0 24px;font-size:26px;font-weight:600}.mode-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;width:100%;max-width:920px;display:grid}.mode-card{cursor:pointer;background:#fff;border:3px solid #e0d4a8;border-radius:20px;flex-direction:column;align-items:center;gap:10px;padding:28px 20px;font-family:inherit;transition:transform .15s,border-color .2s,box-shadow .2s;display:flex;position:relative}.mode-card:hover{border-color:#f0a040;transform:translateY(-4px);box-shadow:0 8px 24px #f0a0402e}.mode-emoji{font-size:64px;line-height:1}.mode-title{color:#2b2b2b;font-size:26px;font-weight:700}.mode-hint{color:#777;text-align:center;font-size:15px}.mode-card-done{background:linear-gradient(135deg,#f0fff5 0%,#d8f5e3 100%);border-color:#6fcf97}.mode-done{color:#4a9c66;font-size:24px;font-weight:700;position:absolute;top:10px;right:14px}.read-screen{box-sizing:border-box;flex-direction:column;height:100vh;padding:12px 20px 16px;display:flex}.read-body{background:#fffbf2;border:2px solid #f0e0b8;border-radius:14px;flex:auto;margin:12px 0;padding:20px 28px;overflow-y:auto}.read-para{color:#2b2b2b;cursor:pointer;border-radius:8px;margin:0 0 14px;padding:8px 10px;font-size:22px;line-height:1.55;transition:background .2s}.read-para:hover{background:#fff3d4}.read-para.reading{background:#ffe9b8;border-left:4px solid #f0a040;padding-left:14px}.read-actions{flex-shrink:0;justify-content:center;gap:12px;display:flex}.work-card.level-read{background:linear-gradient(135deg,#f5faff 0%,#e6f0fb 100%);border-color:#b8d4f0}.work-card.level-talked{background:linear-gradient(135deg,#fffbe6 0%,#fff3c4 100%);border-color:#f5d480}.work-card-badge.level-read{color:#2a5d8f;background:#d6e8f7}.work-card-badge.level-talked{color:#8a6a14;background:#fff0b8}.completion-actions{flex-direction:column;align-items:center;gap:10px;margin-top:16px;display:flex}.login-screen .login-subtitle{color:#8a7fb0;margin-bottom:20px}.login-error{color:#d33;text-align:center;max-width:340px;margin:10px 0}.profile-details{gap:10px;margin:6px 0 14px;display:flex}.profile-details select,.profile-details input{color:inherit;background:#fff;border:2px solid #d9d0f0;border-radius:12px;padding:10px 12px;font-size:16px}.profile-details input{width:110px}.mic-picker{text-align:center;margin-top:6px}.mic-picker-toggle{color:#a99fd0;cursor:pointer;background:0 0;border:none;font-size:13px}.mic-picker-body select{border:1px solid #d9d0f0;border-radius:8px;max-width:260px;margin-left:6px;padding:4px 8px;font-size:13px}.mic-picker-error{color:#a99fd0;margin-left:6px;font-size:13px}.profile-card{position:relative}.profile-edit-btn{cursor:pointer;opacity:.45;background:0 0;border:none;padding:4px;font-size:16px;position:absolute;top:8px;right:8px}.profile-edit-btn:hover{opacity:1}.profile-delete-btn{color:#b8a8c8;cursor:pointer;background:0 0;border:none;margin-top:20px;font-size:14px;text-decoration:underline}.profile-delete-btn.confirm{color:#fff;background:#d9534f;border-radius:12px;padding:10px 18px;font-weight:600;text-decoration:none}.badges-section{margin-top:26px}.badges-section h2{color:#6b4fa0;margin-bottom:12px;font-size:20px}.badges-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.badge-card{text-align:center;background:linear-gradient(135deg,#fff7e6 0%,#ffe9c2 100%);border:2px solid #f0c674;border-radius:16px;padding:14px 10px;box-shadow:0 2px 10px #6c4fa01a}.badge-emoji{margin-bottom:6px;font-size:34px;line-height:1}.badge-title{color:#3a3a5c;font-size:14px;font-weight:700}.badge-hint{color:#8a7fb0;margin-top:3px;font-size:12px}.badge-card.badge-goal{box-shadow:none;background:#f7f3fc;border:2px dashed #d9d0f0}.badge-card.badge-goal .badge-emoji{filter:grayscale();opacity:.55}.badge-progress{height:8px;margin-top:8px}.badge-progress-label{color:#8a7fb0;margin-top:3px;font-size:11px}.chunks-screen .chunk-card{touch-action:none;-webkit-user-select:none;user-select:none}.chunk-card.drag-overlay{cursor:grabbing;opacity:.95;box-shadow:0 8px 20px #6c4fa04d}.causal-chain-list{justify-content:center;overflow:hidden}@supports (height:100dvh){body,.profile-screen,.create-profile-screen,.grouping-screen.chunks-screen,.takeaway-screen,.imagine-screen,.mode-select-screen{min-height:100dvh}.loading-screen,.session-screen,.completion-screen,.summary-screen,.plan-screen,.review-screen,.chunks-screen,.causal-chain-screen,.read-screen{height:100dvh}.grouping-screen.chunks-screen{height:auto}}@media (width<=900px){.category-screen{padding:20px 16px}.list-header h1{padding:0 96px;font-size:19px;line-height:1.25}.categories-grid{gap:14px}.category-card{padding:20px 14px}.chunks-screen{padding:10px 12px 12px}.imagine-screen,.mode-select-screen{padding-left:14px;padding-right:14px}.plan-screen{height:auto;min-height:100dvh;overflow:visible}.plan-layout{flex-direction:column;gap:8px}.plan-left,.plan-right{flex:none}.plan-right .retelling-collected{min-height:90px}.session-screen,.summary-screen,.review-screen{height:auto;min-height:100dvh}}button,.category-card,.work-card,.profile-card,.mode-card,.imagine-tag,.imagine-emotion{touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media (pointer:coarse){.back-btn,.settings-btn,.stats-btn,.reset-btn,.modal-close,.mic-picker-toggle,.text-input-area input,.text-input-area button{min-width:44px;min-height:44px}.primary-btn,.secondary-btn,.mic-option{min-height:48px}.category-card:hover,.work-card:hover,.profile-card:hover,.chunk-card:hover,.primary-btn:hover,.mic-btn:hover,.avatar-option:hover{transform:none}}