@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";:root{--color-primary: #79B574;--color-primary-dark: #5a9455;--color-primary-light: #a8d4a4;--color-text: #393d45;--color-text-light: #666;--color-bg: #f5f7fa;--color-card: #fff;--color-border: #e2e5ea;--color-correct: #4caf50;--color-incorrect: #e53935;--color-warning: #ff9800;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .12);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--max-content: 900px;--toc-width: 280px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.6;min-height:100vh}.app{display:flex;min-height:100vh;position:relative}.slide-container{flex:1;display:flex;flex-direction:column;min-height:100vh;margin-left:var(--toc-width);transition:margin-left .3s ease}.slide-header{position:sticky;top:0;z-index:10;background:var(--color-card);border-bottom:1px solid var(--color-border);padding:12px 24px 0}.header-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}.module-label{font-weight:600;font-size:.95rem;color:var(--color-primary-dark)}.slide-counter{font-size:.85rem;color:var(--color-text-light)}.progress-bar{height:3px;background:var(--color-border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--color-primary);transition:width .3s ease}.slide-content{flex:1;display:flex;justify-content:center;padding:32px 24px}.content-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:40px;max-width:var(--max-content);width:100%}.content-heading{color:var(--color-text);margin-bottom:16px}h1.content-heading{font-size:1.75rem;font-weight:700;border-bottom:3px solid var(--color-primary);padding-bottom:12px;margin-bottom:24px}h2.content-heading{font-size:1.35rem;font-weight:600}h3.content-heading{font-size:1.1rem;font-weight:600}.content-paragraph{margin-bottom:16px;line-height:1.7;color:var(--color-text)}.rich-text p{margin:0}.rich-text>*+*{margin-top:12px}.rich-text ul,.rich-text ol{margin:8px 0;padding-left:22px}.rich-text ul{list-style:disc}.rich-text ol{list-style:decimal}.rich-text li+li{margin-top:6px}.rich-text strong{font-weight:700}.rich-text em{font-style:italic}.content-image{margin:20px 0;text-align:center}.content-image img{max-width:100%;height:auto;border-radius:var(--radius-md)}.info-box{padding:16px 20px;border-radius:var(--radius-md);margin:16px 0;border-left:4px solid}.info-box--tip{background:#e8f5e9;border-color:var(--color-correct)}.info-box--warning{background:#fff3e0;border-color:var(--color-warning)}.info-box--note{background:#e3f2fd;border-color:#1976d2}.accordion{margin:16px 0}.accordion-item{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden}.accordion-title{padding:14px 18px;cursor:pointer;font-weight:500;background:#fafbfc;list-style:none}.accordion-title::-webkit-details-marker{display:none}.accordion-title:before{content:"▸ ";color:var(--color-primary)}details[open] .accordion-title:before{content:"▾ "}.accordion-content{padding:14px 18px;border-top:1px solid var(--color-border)}.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0}.icon-grid-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px;background:#fff;border-radius:4px;border:1px solid var(--color-border);min-height:140px}.icon-grid-icon{width:64px;height:64px;margin-bottom:12px}.icon-grid-label{font-size:.9rem;font-weight:500;color:var(--color-text)}.icon-grid-item--link{transition:border-color .2s,box-shadow .2s}.icon-grid-item--link:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.click-to-reveal{margin:20px 0}.reveal-instruction{font-style:italic;color:var(--color-text-light);margin-bottom:16px}.reveal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:16px}.reveal-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px;background:#fafbfc;border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--color-text);min-height:70px}.reveal-item:hover{border-color:var(--color-primary-light);background:#f0f8ef;box-shadow:var(--shadow-sm)}.reveal-item--active{border-color:var(--color-primary);background:#e8f3e7;box-shadow:var(--shadow-md)}.reveal-item--visited:after{content:"✓";position:absolute;top:6px;right:8px;font-size:.75rem;font-weight:700;color:#fff;background:var(--color-primary);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}.reveal-item-label{pointer-events:none}.reveal-item-media{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3 / 2;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;overflow:hidden}.reveal-item-image{width:100%;height:100%;object-fit:cover}.click-to-reveal--with-images .reveal-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.click-to-reveal--with-images .reveal-item{min-height:0;gap:12px;padding:14px;align-items:stretch}.reveal-panel{background:#fafbfc;border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);padding:20px;animation:revealFadeIn .25s ease}.reveal-panel-title{display:block;margin-bottom:8px;font-size:1rem;color:var(--color-primary-dark)}.reveal-panel-body{line-height:1.7;color:var(--color-text)}@keyframes revealFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.click-to-reveal--visual .reveal-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-bottom:16px}.click-to-reveal--visual .reveal-image{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#edf4ed 0%,transparent 70%);border-radius:var(--radius-lg);padding:24px}.click-to-reveal--visual .reveal-image img{max-width:360px;width:100%;height:auto;opacity:.85}.reveal-hotspot{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:var(--color-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000040;transition:transform .2s,background .2s,box-shadow .2s;z-index:2;padding:0;font-family:inherit}.reveal-hotspot:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary-light);animation:hotspotPulse 2s ease-in-out infinite}.reveal-hotspot:hover{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 3px 12px #0000004d}.reveal-hotspot--active{background:var(--color-primary-dark);transform:translate(-50%,-50%) scale(1.15);box-shadow:0 3px 12px #0000004d}.reveal-hotspot--active:after{animation:none;border-color:var(--color-primary-dark)}.reveal-hotspot--visited{background:var(--color-primary-dark)}.reveal-hotspot--visited:after{animation:none;border-color:transparent}.reveal-hotspot-num{font-size:.75rem;font-weight:700;line-height:1;pointer-events:none}@keyframes hotspotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}.click-to-reveal--visual .reveal-items-col{display:flex;flex-direction:column;gap:10px}.click-to-reveal--visual .reveal-item{flex-direction:row;justify-content:flex-start;text-align:left;padding:14px 18px;min-height:0;gap:12px}.click-to-reveal--visual .reveal-item-badge{display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.8rem;font-weight:700}.click-to-reveal--visual .reveal-item--visited .reveal-item-badge{background:var(--color-primary-dark)}.click-to-reveal--visual .reveal-panel{grid-column:1 / -1}@media(max-width:600px){.click-to-reveal--visual .reveal-layout{grid-template-columns:1fr}.click-to-reveal--visual .reveal-image img{max-width:220px}}.quiz-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:40px;max-width:var(--max-content);width:100%}.quiz-question{font-size:1.3rem;font-weight:600;margin-bottom:8px;color:var(--color-text)}.quiz-hint{font-size:.85rem;color:var(--color-text-light);margin-bottom:20px;font-style:italic}.quiz-answers{display:flex;flex-direction:column;gap:10px;margin:20px 0}.quiz-option{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color .2s,background .2s}.quiz-option:hover{border-color:var(--color-primary-light);background:#f8faf8}.quiz-option input{margin-top:3px;accent-color:var(--color-primary)}.quiz-option input:checked~.quiz-option-text{font-weight:500}.quiz-option:has(input:checked){border-color:var(--color-primary);background:#f0f8ef}.quiz-option--correct{border-color:var(--color-correct)!important;background:#e8f5e9!important}.quiz-option--incorrect{border-color:var(--color-incorrect)!important;background:#ffebee!important}.quiz-option-text{flex:1;line-height:1.5}.quiz-feedback{padding:12px 18px;border-radius:var(--radius-sm);margin-top:16px;font-weight:500}.quiz-feedback--correct{background:#e8f5e9;color:#2e7d32}.quiz-feedback--incorrect{background:#ffebee;color:#c62828}.result-card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:48px 40px;max-width:var(--max-content);width:100%;text-align:center}.result-title{font-size:1.5rem;margin-bottom:32px}.result-score{margin-bottom:24px}.result-percentage{display:block;font-size:4rem;font-weight:700;line-height:1.1}.result-passed{color:var(--color-correct)}.result-failed{color:var(--color-incorrect)}.result-detail{display:block;font-size:1.1rem;color:var(--color-text-light);margin-top:8px}.result-status{padding:16px 24px;border-radius:var(--radius-md);font-weight:500;margin-bottom:24px}.result-status--passed{background:#e8f5e9;color:#2e7d32}.result-status--failed{background:#ffebee;color:#c62828}.result-retry-info,.result-attempt,.result-no-retry,.result-info{color:var(--color-text-light);margin-bottom:16px}.btn{display:inline-block;padding:12px 28px;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s,transform .1s}.btn:active{transform:scale(.98)}.btn-submit,.btn-check,.btn-retry{background:var(--color-primary);color:#fff}.btn-submit:hover,.btn-check:hover,.btn-retry:hover{background:var(--color-primary-dark)}.slide-footer{display:flex;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--color-border);background:var(--color-card)}.nav-btn{padding:10px 24px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s}.nav-btn:hover:not(:disabled){background:var(--color-primary-dark)}.nav-btn:disabled{background:var(--color-border);color:#999;cursor:not-allowed}.toc-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--toc-width);background:var(--color-card);border-right:1px solid var(--color-border);overflow-y:auto;z-index:20;padding:20px 0;transition:transform .3s ease}.toc-title{padding:0 20px 16px;font-weight:700;font-size:1.1rem;color:var(--color-primary-dark);border-bottom:1px solid var(--color-border);margin-bottom:8px}.toc-toggle{position:fixed;top:12px;left:12px;z-index:25;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:40px;height:40px;font-size:1.4rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.toc-section{margin-bottom:4px}.toc-module{display:block;width:100%;text-align:left;padding:10px 20px;border:none;background:none;font-size:.9rem;font-weight:600;color:var(--color-text);cursor:pointer;transition:background .15s}.toc-module:hover{background:#f0f2f5}.toc-module--active{color:var(--color-primary-dark);background:#f0f8ef;border-left:3px solid var(--color-primary)}.toc-module--completed:after{content:" ✓";color:var(--color-correct)}.toc-slides{list-style:none;padding:0}.toc-slide{display:block;width:100%;text-align:left;padding:6px 20px 6px 36px;border:none;background:none;font-size:.82rem;color:var(--color-text-light);cursor:pointer;transition:background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toc-slide:hover{background:#f0f2f5}.toc-slide--active{color:var(--color-primary-dark);font-weight:600;background:#f0f8ef}.toc-slide--visited{color:var(--color-text)}.toc-overlay{display:none;position:fixed;inset:0;background:#0006;z-index:15}@media(max-width:768px){.toc-sidebar{transform:translate(-100%)}.toc-toggle{display:flex}.slide-container{margin-left:0}.toc-open .toc-sidebar{transform:translate(0)}.toc-open .toc-overlay{display:block}.content-card,.quiz-card,.result-card{padding:24px 16px;border-radius:var(--radius-md)}.slide-content{padding:16px 12px}h1.content-heading{font-size:1.4rem}}