.dynamic-tutorial-container{background:var(--color-surface);border:1px solid var(--color-border);border-radius:24px;padding:2.5rem;box-shadow:0 10px 30px #0000000d;display:flex;flex-direction:column;gap:2rem;position:relative;margin:2rem 0}.dynamic-tutorial-container:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}.tutorial-mascot-area{display:flex;align-items:flex-end;gap:1.5rem;position:relative;z-index:10}.tutorial-mascot{width:120px;height:auto;animation:floatingMascot 3s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.1))}@keyframes floatingMascot{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.speech-bubble{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-primary);padding:1.5rem 2rem;border-radius:20px 20px 20px 4px;font-size:1.25rem;font-weight:500;line-height:1.5;position:relative;box-shadow:0 8px 24px #0000001a;max-width:500px;transition:all .3s cubic-bezier(.4,0,.2,1)}.speech-bubble:before{content:"";position:absolute;bottom:-2px;left:-17px;width:0;height:0;border:15px solid transparent;border-right-color:var(--color-primary);border-bottom:0;margin-top:-15px;margin-bottom:5px}.speech-bubble p{margin:0}.speech-bubble .btn-next-step{margin-top:1rem;margin-left:auto;display:flex}.pop-in{animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}.pop-out{animation:popOut .3s ease-in forwards}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes popOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tutorial-interactive-area{background:var(--color-background);border-radius:16px;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:2rem;border:1px dashed var(--color-border)}.tutorial-soroban-wrapper{position:relative;transform:scale(1.2);transform-origin:top center;margin-bottom:2rem;transition:all .5s ease;z-index:5;pointer-events:auto}.highlight-heaven .soroban-row.heaven{animation:pulseGlowHeaven 2s infinite;z-index:10;position:relative}.highlight-earth .soroban-row.earth{animation:pulseGlowEarth 2s infinite;z-index:10;position:relative}@keyframes pulseGlowHeaven{0%,to{box-shadow:0 0 #f59e0b00}50%{box-shadow:0 0 20px 10px #f59e0b4d;background:#f59e0b1a;border-radius:8px}}@keyframes pulseGlowEarth{0%,to{box-shadow:0 0 #10b98100}50%{box-shadow:0 0 20px 10px #10b9814d;background:#10b9811a;border-radius:8px}}.value-hint{position:absolute;display:flex;align-items:center;gap:8px;font-weight:800;pointer-events:none;z-index:20;animation:bounceHorizontalHint 2s infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.value-hint .hint-text{background:#fff;padding:4px 12px;border-radius:12px;font-size:1.1rem;border:2px solid;white-space:nowrap}.value-hint .hint-arrow{font-size:2rem;line-height:1}.mobile-arrow{display:none}.heaven-value-hint{right:-130px;top:15px;color:#f59e0b}.heaven-value-hint .hint-text{border-color:#f59e0b;color:#b45309}.earth-value-hint{right:-130px;bottom:80px;color:#10b981}.earth-value-hint .hint-text{border-color:#10b981;color:#047857}@keyframes bounceHorizontalHint{0%,to{transform:translate(0)}50%{transform:translate(-10px)}}.highlight-beam .soroban-beam{animation:pulseGlowBeam 2s infinite}@keyframes pulseGlowBeam{0%,to{filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}50%{filter:drop-shadow(0 0 20px rgba(239,68,68,.9)) brightness(1.2);fill:#ef4444}}.tutorial-controls{display:flex;justify-content:space-between;align-items:center;width:100%}.tutorial-progress{display:flex;gap:.5rem}.progress-dot{width:12px;height:12px;border-radius:50%;background:var(--color-border);transition:all .3s ease;cursor:pointer}.progress-dot.active{background:var(--color-primary);transform:scale(1.3)}.progress-dot.completed{background:var(--color-accent)}@media(max-width:768px){.tutorial-mascot-area{flex-direction:column;align-items:center;text-align:center}.speech-bubble:before{left:50%;bottom:100%;top:-15px;border-color:transparent transparent var(--color-primary) transparent;margin:0 0 0 -15px}.speech-bubble{border-radius:4px 4px 20px 20px}.tutorial-soroban-wrapper{transform:scale(1)}}html[dir=rtl] .heaven-value-hint,html[dir=rtl] .earth-value-hint{right:auto;left:-130px}html[dir=rtl] .value-hint{animation:bounceHorizontalHintRTL 2s infinite}html[dir=rtl] .value-hint .desktop-arrow{transform:scaleX(-1)}@keyframes bounceHorizontalHintRTL{0%,to{transform:translate(0)}50%{transform:translate(10px)}}@media(max-width:768px){.tutorial-soroban-wrapper{margin-top:4.5rem;margin-bottom:4.5rem}.value-hint,html[dir=rtl] .value-hint{flex-direction:column;gap:0}.value-hint .hint-arrow{display:inline-block;line-height:.8}.desktop-arrow{display:none!important}.mobile-arrow{display:inline-block!important;line-height:1}.heaven-value-hint,html[dir=rtl] .heaven-value-hint{right:auto;left:50%;top:-65px;animation:bounceVerticalHintHeaven 2s infinite}.heaven-value-hint .hint-text{order:1}.heaven-value-hint .hint-arrow,html[dir=rtl] .heaven-value-hint .hint-arrow{order:2;margin-top:4px}.earth-value-hint,html[dir=rtl] .earth-value-hint{right:auto;left:50%;bottom:-75px;animation:bounceVerticalHintEarth 2s infinite}.earth-value-hint .hint-text{order:2}.earth-value-hint .hint-arrow,html[dir=rtl] .earth-value-hint .hint-arrow{order:1;margin-bottom:4px}}@keyframes bounceVerticalHintHeaven{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,8px)}}@keyframes bounceVerticalHintEarth{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-8px)}}.learn-page-container{padding:var(--spacing-xl) var(--spacing-md);max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:3rem}.learn-page-header{margin-bottom:2rem}.learn-title{color:var(--color-text);margin-bottom:1rem;position:relative;display:inline-block}.learn-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:2px}.learn-tutorial-section{width:100%}.learn-content-grid{display:grid;grid-template-columns:1fr 350px;gap:2rem;align-items:start}.premium-card{background:var(--color-surface);border:1px solid rgba(0,0,0,.05);border-radius:24px;padding:2rem;box-shadow:0 10px 30px #00000008;transition:transform .3s ease,box-shadow .3s ease;margin-bottom:2rem}.premium-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px #00000014}.learn-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;position:relative}.learn-card-icon-wrapper{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#747bff1a,#747bff33);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.learn-card-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0}.learn-step-badge{position:absolute;right:0;top:0;font-size:3rem;font-weight:900;color:var(--color-border);opacity:.3;line-height:1}.learn-card-content{color:var(--color-text-light);line-height:1.7;font-size:1.1rem}.learn-diagram-container{margin-top:2rem;padding:2rem;background:var(--color-background);border-radius:16px;display:flex;justify-content:center}.glass-panel{background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);padding:1.5rem;border-radius:16px;box-shadow:0 8px 32px #0000000d}.diagram-column{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:max-content}.diagram-bead{font-size:2rem;line-height:1}.diagram-bead.heaven{color:#ef4444}.diagram-bead.earth{color:#10b981}.diagram-bar{color:#8b7355;font-weight:700;letter-spacing:-2px}.diagram-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.heaven-label{color:#ef4444}.earth-label{color:#10b981}.diagram-beads-row{display:flex;flex-direction:column;gap:.25rem}.sticky-reference{position:sticky;top:2rem}.reference-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border)}.reference-icon{font-size:1.5rem}.learn-ref-title{font-size:1.25rem;font-weight:700;margin:0}.learn-ref-table-wrapper{overflow-x:auto}.learn-ref-table{width:100%;border-collapse:separate;border-spacing:0}.learn-ref-table th{text-align:left;padding:.75rem .5rem;color:var(--color-text-light);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.learn-ref-table td{padding:.75rem .5rem;vertical-align:middle;font-size:.95rem}.val-badge{background:var(--color-background);padding:.25rem .75rem;border-radius:12px;font-weight:700;color:var(--color-primary)}.bead-dots{letter-spacing:2px;font-weight:900}.heaven-color{color:#ef4444}.earth-color{color:#10b981}.row-divider td{height:1px;padding:0;background:var(--color-border);opacity:.5}.animate-fade-in{opacity:0;animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.highlight-pulse{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}@media(max-width:1024px){.learn-content-grid{grid-template-columns:1fr}.sticky-reference{position:static}}@media(max-width:640px){.learn-page-container{padding:var(--spacing-lg) var(--spacing-sm)}.premium-card{padding:1.5rem}}.learn-seo-article{margin-top:3rem;padding:3rem;background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.learn-seo-article h2{color:var(--color-primary);font-size:2rem;margin-bottom:2rem;text-align:center}.seo-article-content h3{color:var(--color-text);font-size:1.4rem;margin-top:2rem;margin-bottom:1rem}.seo-article-content p{color:var(--color-text-muted);font-size:1.1rem;line-height:1.8;margin-bottom:1.5rem}.seo-article-content ul{list-style-type:none;padding-left:0;margin-bottom:2rem}.seo-article-content li{background:var(--color-background);margin-bottom:1rem;padding:1.25rem;border-radius:var(--radius-lg);border-left:4px solid var(--color-primary);color:var(--color-text-muted);font-size:1.05rem;line-height:1.6}.seo-article-content li strong{color:var(--color-text);font-size:1.1rem;display:inline-block;margin-bottom:.25rem}.dark-mode .learn-seo-article{background:#1e293b66;border-color:#33415599}.dark-mode .seo-article-content li{background:#0f172a80}