:root{--bswi-navy: #003366;--bswi-lightblue: #00A3E0;--bswi-yellow: #B5E505;--bswi-gray: #333333;--bswi-lightgray: #F5F5F5;--bswi-success: #22c55e;--bswi-error: #ef4444;--bswi-warning: #f59e0b;--card-radius: 12px;--card-shadow: 0 4px 20px rgba(0, 0, 0, .15)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#001a33,#036,#004080);background-attachment:fixed;color:var(--bswi-gray);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#001a33}::-webkit-scrollbar-thumb{background:var(--bswi-lightblue);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0090c7}.app{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.app-header{background:#003366eb;color:#fff;padding:.75rem 2rem;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:2px solid rgba(0,163,224,.3);box-shadow:0 2px 20px #0000004d}.header-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;gap:1rem}.app-header h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}.app-subtitle{font-size:.85rem;opacity:.75;margin-top:.15rem}.header-stats{display:flex;align-items:center;gap:1.25rem;flex-shrink:0}.header-stats .xp-bar{width:120px;height:8px;background:#ffffff26;border-radius:4px;overflow:hidden}.header-stats .xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--bswi-yellow),#d4ff33);border-radius:4px;transition:width .6s cubic-bezier(.22,1,.36,1)}.header-stats .xp-label{font-size:.8rem;font-weight:600;color:var(--bswi-yellow)}.header-stats .streak{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.3rem}.header-nav{display:flex;gap:.5rem;margin-top:.5rem;max-width:1200px;margin-left:auto;margin-right:auto}.header-nav button{background:#ffffff14;color:#fff;border:1px solid rgba(255,255,255,.15);padding:.4rem 1rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.header-nav button:hover{background:#ffffff2e;border-color:var(--bswi-lightblue)}.header-nav button.active{background:var(--bswi-lightblue);border-color:var(--bswi-lightblue);font-weight:600}.level-map{display:grid;grid-template-columns:1fr;gap:1.25rem;animation:fadeIn .4s ease}.level-card{background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.5rem;cursor:pointer;transition:all .25s cubic-bezier(.22,1,.36,1);border:2px solid transparent;position:relative;overflow:hidden}.level-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--bswi-navy),var(--bswi-lightblue));opacity:0;transition:opacity .25s ease}.level-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #0003}.level-card:hover:before{opacity:1}.level-card.locked{filter:grayscale(.6);opacity:.55;cursor:not-allowed;pointer-events:none}.level-card.locked:after{content:"🔒";position:absolute;top:1rem;right:1rem;font-size:1.25rem}.level-card.completed{border-color:var(--bswi-success);border-left-width:5px}.level-card.completed:before{background:linear-gradient(90deg,var(--bswi-success),#86efac);opacity:1}.level-card.current{border-color:var(--bswi-lightblue);box-shadow:0 4px 20px #00a3e040}.level-number{width:48px;height:48px;border-radius:50%;background:var(--bswi-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;flex-shrink:0;margin-bottom:.75rem}.level-card.completed .level-number{background:var(--bswi-success)}.level-title{font-size:1.1rem;font-weight:700;color:var(--bswi-navy);margin-bottom:.25rem}.level-subtitle{font-size:.85rem;color:#666;margin-bottom:.75rem}.level-progress{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin-bottom:.5rem}.level-progress-fill{height:100%;background:linear-gradient(90deg,var(--bswi-lightblue),var(--bswi-yellow));border-radius:3px;transition:width .5s ease}.level-stars{display:flex;gap:.25rem;font-size:1.1rem}.level-stars .star-earned{color:#fbbf24}.level-stars .star-empty{color:#d1d5db}.new-badge{position:absolute;top:.75rem;right:.75rem;background:var(--bswi-yellow);color:var(--bswi-navy);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:10px;animation:pulse 2s ease infinite}.exercise-layout{display:grid;grid-template-columns:1fr;gap:1.5rem;animation:fadeIn .3s ease}.exercise-sidebar{background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.25rem;height:fit-content;position:sticky;top:80px}.exercise-sidebar h3{font-size:.9rem;font-weight:700;color:var(--bswi-navy);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.04em}.exercise-main{min-height:400px}.exercise-main>*{animation:fadeIn .35s ease}.step-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:8px;font-size:.85rem;color:#666;cursor:pointer;transition:all .2s ease}.step-item:hover{background:var(--bswi-lightgray)}.step-item .step-icon{width:22px;height:22px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;transition:all .2s ease}.step-item.completed{color:var(--bswi-success)}.step-item.completed .step-icon{background:var(--bswi-success);border-color:var(--bswi-success);color:#fff}.step-item.active{background:#00a3e014;color:var(--bswi-navy);font-weight:600}.step-item.active .step-icon{border-color:var(--bswi-lightblue);background:#00a3e01a;color:var(--bswi-lightblue)}.hint-box{background:#fffef0;border:1px solid rgba(181,229,5,.4);border-left:4px solid var(--bswi-yellow);border-radius:8px;padding:1rem 1.25rem;margin-top:1rem;font-size:.9rem;color:#555;animation:fadeIn .3s ease}.hint-box strong{color:var(--bswi-navy)}.graph-container{background:#fff;border:1px solid #e5e7eb;border-radius:var(--card-radius);padding:1.25rem;max-width:500px;margin:1rem auto;text-align:center}.graph-container svg,.graph-container canvas{max-width:100%;height:auto}.math-input{font-family:Courier New,Courier,monospace;font-size:1.35rem;font-weight:600;color:var(--bswi-navy);border:2px solid var(--bswi-navy);border-radius:8px;padding:.6rem 1rem;text-align:center;width:100%;max-width:200px;outline:none;transition:all .2s ease;background:#fff}.math-input:focus{border-color:var(--bswi-lightblue);box-shadow:0 0 0 3px #00a3e033}.math-input.correct{border-color:var(--bswi-success);background:#f0fdf4;box-shadow:0 0 0 3px #22c55e26}.math-input.incorrect{border-color:var(--bswi-error);background:#fef2f2;box-shadow:0 0 0 3px #ef444426;animation:shake .4s ease}.step-solver{display:flex;flex-direction:column;gap:.75rem}.step-solver-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.step-solver-row label{font-size:.9rem;font-weight:600;color:var(--bswi-navy);min-width:100px;flex-shrink:0}.step-solver-row .status-icon{font-size:1.2rem;flex-shrink:0;width:28px;text-align:center}.formula-display{text-align:center;font-family:Courier New,Courier,monospace;font-size:1.6rem;font-weight:700;color:var(--bswi-navy);background:#fff;border-radius:var(--card-radius);padding:1.5rem 2rem;box-shadow:var(--card-shadow);margin:1rem 0;letter-spacing:.02em;line-height:1.8}.drag-zone{border:2px dashed #d1d5db;border-radius:var(--card-radius);min-height:80px;padding:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease;background:#ffffff80}.drag-zone.drag-over{border-color:var(--bswi-lightblue);background:#00a3e00f;box-shadow:inset 0 0 0 2px #00a3e01a}.drag-zone.drag-over.error{border-color:var(--bswi-error)}.drag-chip{display:inline-flex;align-items:center;padding:.4rem 1rem;background:var(--bswi-navy);color:#fff;border-radius:20px;font-size:.9rem;font-weight:600;cursor:grab;-webkit-user-select:none;user-select:none;transition:all .15s ease;box-shadow:0 2px 6px #00000026}.drag-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.drag-chip:active{cursor:grabbing}.drag-chip.dragging{opacity:.5;box-shadow:0 8px 20px #00000040;transform:scale(1.05)}.slider-container{padding:1rem 0}.slider-label{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;color:var(--bswi-navy);margin-bottom:.5rem}.slider-label .slider-value{font-family:Courier New,Courier,monospace;font-size:1.2rem;background:var(--bswi-navy);color:#fff;padding:.15rem .6rem;border-radius:6px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background:#e5e7eb;border-radius:4px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-track{height:8px;background:linear-gradient(90deg,var(--bswi-navy),var(--bswi-lightblue));border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;background:var(--bswi-yellow);border:3px solid white;border-radius:50%;box-shadow:0 2px 8px #0003;cursor:pointer;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-track{height:8px;background:linear-gradient(90deg,var(--bswi-navy),var(--bswi-lightblue));border-radius:4px;border:none}input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--bswi-yellow);border:3px solid white;border-radius:50%;box-shadow:0 2px 8px #0003;cursor:pointer}.multiple-choice{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.choice-card{background:#fff;border:2px solid #e5e7eb;border-radius:var(--card-radius);padding:1rem 1.25rem;cursor:pointer;text-align:center;font-size:1rem;font-weight:600;color:var(--bswi-gray);transition:all .2s ease}.choice-card:hover{border-color:var(--bswi-lightblue);background:#00a3e00a;transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.choice-card.selected{border-color:var(--bswi-lightblue);background:#00a3e014;box-shadow:0 0 0 3px #00a3e026}.choice-card.correct{border-color:var(--bswi-success);background:#f0fdf4;color:#166534;box-shadow:0 0 0 3px #22c55e26}.choice-card.incorrect{border-color:var(--bswi-error);background:#fef2f2;color:#991b1b;box-shadow:0 0 0 3px #ef444426;animation:shake .4s ease}.validation-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -4px 20px #00000026;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:90;animation:slideUp .3s ease;border-top:3px solid #e5e7eb}.validation-bar.validation-success{border-top-color:var(--bswi-success);background:linear-gradient(180deg,#f0fdf4,#fff)}.validation-bar.validation-error{border-top-color:var(--bswi-error);background:linear-gradient(180deg,#fef2f2,#fff)}.validation-message{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.validation-success .validation-message{color:#166534}.validation-error .validation-message{color:#991b1b}.btn-check{background:var(--bswi-navy);color:#fff;border:none;border-radius:8px;padding:.75rem 2rem;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-check:hover{background:#004080;transform:translateY(-1px);box-shadow:0 4px 12px #0033664d}.btn-next{background:var(--bswi-success);color:#fff;border:none;border-radius:8px;padding:.75rem 2rem;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-next:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 12px #22c55e4d}.level-complete{max-width:500px;margin:2rem auto;background:#fff;border-radius:var(--card-radius);box-shadow:0 8px 40px #0003;padding:2.5rem 2rem;text-align:center;animation:fadeIn .5s ease}.level-complete h2{font-size:1.6rem;color:var(--bswi-navy);margin-bottom:1.5rem}.stars-display{display:flex;justify-content:center;gap:.75rem;margin-bottom:1.5rem}.star{font-size:3rem;animation:starPop .5s cubic-bezier(.22,1,.36,1) both}.star:nth-child(2){animation-delay:.15s}.star:nth-child(3){animation-delay:.3s}.star.earned{color:#fbbf24;text-shadow:0 0 20px rgba(251,191,36,.4)}.star.empty{color:#d1d5db}.xp-earned{font-size:2rem;font-weight:800;color:var(--bswi-yellow);margin-bottom:.5rem;animation:countUp .6s ease both;animation-delay:.5s}.xp-earned span{font-size:1rem;font-weight:600;color:#666}.badge-unlock{background:linear-gradient(135deg,#fffef0,#fefce8);border:2px solid var(--bswi-yellow);border-radius:var(--card-radius);padding:1rem 1.5rem;margin:1.25rem 0;animation:pulse 2s ease infinite}.badge-unlock .badge-unlock-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bswi-warning);margin-bottom:.25rem}.badge-unlock .badge-unlock-name{font-size:1.2rem;font-weight:700;color:var(--bswi-navy)}.complete-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem}.story-intro{max-width:600px;margin:2rem auto;background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:2.5rem 2rem;text-align:center;animation:fadeIn .5s ease}.story-icon{font-size:4rem;margin-bottom:1rem;display:block}.story-text{font-size:1.15rem;line-height:1.7;color:#444;margin-bottom:1.5rem}.story-text strong{color:var(--bswi-navy)}.btn-start{background:var(--bswi-yellow);color:var(--bswi-navy);border:none;border-radius:10px;padding:1rem 2.5rem;font-size:1.15rem;font-weight:800;cursor:pointer;transition:all .2s ease;animation:pulse 2.5s ease infinite;text-transform:uppercase;letter-spacing:.04em}.btn-start:hover{background:#c8f706;transform:translateY(-2px);box-shadow:0 6px 20px #b5e50566;animation:none}.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.badge-card{background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.5rem 1rem;text-align:center;transition:all .25s ease}.badge-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000002e}.badge-card.locked{filter:grayscale(1);opacity:.45;position:relative}.badge-card.locked:after{content:"?";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:800;color:#0003;background:#ffffff80;border-radius:var(--card-radius)}.badge-icon{font-size:2.5rem;margin-bottom:.5rem;display:block}.badge-name{font-size:.9rem;font-weight:700;color:var(--bswi-navy);margin-bottom:.25rem}.badge-description{font-size:.75rem;color:#888}.profile-card{background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:2rem}.profile-card h2{font-size:1.3rem;color:var(--bswi-navy);margin-bottom:1.25rem}.profile-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.stat-box{background:var(--bswi-lightgray);border-radius:10px;padding:1.25rem .75rem;text-align:center}.stat-box .stat-number{font-size:2rem;font-weight:800;color:var(--bswi-navy);line-height:1;margin-bottom:.25rem}.stat-box .stat-label{font-size:.8rem;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:8px;padding:.6rem 1.25rem;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s ease;text-decoration:none;line-height:1.4}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--bswi-navy);color:#fff}.btn-primary:hover{background:#004080;box-shadow:0 4px 12px #0033664d}.btn-secondary{background:transparent;color:var(--bswi-navy);border:2px solid var(--bswi-navy)}.btn-secondary:hover{background:var(--bswi-navy);color:#fff}.btn-success{background:var(--bswi-success);color:#fff}.btn-success:hover{background:#16a34a;box-shadow:0 4px 12px #22c55e4d}.btn-large{padding:.85rem 2rem;font-size:1.05rem;border-radius:10px}.placeholder{background:#ffffff14;color:#fff;padding:3rem;text-align:center;border-radius:var(--card-radius);font-size:1.1rem;border:1px dashed rgba(255,255,255,.15)}.card{background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.5rem}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes starPop{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}@keyframes countUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 5px #00a3e04d}50%{box-shadow:0 0 20px #00a3e080}}@media(min-width:641px){.level-map{grid-template-columns:repeat(2,1fr)}.exercise-layout{grid-template-columns:280px 1fr}.badge-grid{grid-template-columns:repeat(3,1fr)}.profile-stats{grid-template-columns:repeat(4,1fr)}}@media(min-width:1025px){.level-map{grid-template-columns:repeat(3,1fr)}.exercise-layout{grid-template-columns:300px 1fr}.badge-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:640px){.app-header{padding:.6rem 1rem}.header-content{flex-direction:column;gap:.5rem;text-align:center}.app-header h1{font-size:1.15rem}.header-stats{justify-content:center;flex-wrap:wrap;gap:.75rem}.header-stats .xp-bar{width:100px}.header-nav{justify-content:center;flex-wrap:wrap}.app-main{padding:1rem}.level-map{grid-template-columns:1fr;gap:1rem}.level-card{padding:1.25rem}.level-number{width:40px;height:40px;font-size:1.1rem}.exercise-layout{grid-template-columns:1fr}.exercise-sidebar{position:static}.multiple-choice{grid-template-columns:1fr}.formula-display{font-size:1.2rem;padding:1rem 1.25rem}.math-input{font-size:1.15rem}.validation-bar{flex-direction:column;text-align:center;padding:1rem;gap:.75rem}.level-complete{margin:1rem;padding:2rem 1.5rem}.star{font-size:2.25rem}.story-intro{margin:1rem;padding:2rem 1.5rem}.story-icon{font-size:3rem}.story-text{font-size:1rem}.badge-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.profile-stats{grid-template-columns:repeat(2,1fr)}.complete-actions{flex-direction:column}.complete-actions .btn{width:100%}}@media print{.app-header,.header-nav,.validation-bar{display:none!important}body{background:#fff;color:#000}.app-main{padding:0;max-width:100%}.level-card,.card,.profile-card,.story-intro,.level-complete{box-shadow:none;border:1px solid #ccc}}