:root{color:#172033;background:#f5f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}.app-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:32px 0 48px}.intro{display:flex;justify-content:space-between;gap:24px;margin-bottom:20px}.intro h1{margin:0;font-size:clamp(2rem,5vw,3.8rem);line-height:1}.intro p{max-width:650px;margin:12px 0 0;color:#526070;font-size:1.05rem}.eyebrow{margin:0 0 8px;color:#3566d6;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.setup-form,.exercise-panel,.steps-panel,.results-panel{border:1px solid #dce3ef;border-radius:8px;background:#fff;padding:20px;box-shadow:0 10px 30px #1720330f}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.field,.check-field{display:flex;gap:8px}.field{flex-direction:column}.field span,.array-label{color:#334155;font-size:.88rem;font-weight:700}.field input,.field select{width:100%;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#172033;padding:11px 12px}.field input:focus,.field select:focus,.array-cell:focus{border-color:#3566d6;outline:3px solid rgba(53,102,214,.16)}.wide-field,.check-field{margin-top:14px}.check-field{align-items:center;color:#465568;font-size:.95rem}.primary-button,.secondary-button{border:0;border-radius:8px;cursor:pointer;font-weight:800}.primary-button{margin-top:18px;background:#3566d6;color:#fff;padding:12px 18px}.secondary-button{margin-top:18px;border:1px solid #cbd5e1;background:#fff;color:#172033;padding:11px 16px}.primary-button:hover{background:#2856bd}.secondary-button:hover{background:#f8fafc}.error-banner,.error-text{color:#a61b1b}.error-banner{margin-top:12px;border:1px solid #fecaca;border-radius:8px;background:#fff1f2;padding:12px;font-weight:700}.exercise-panel,.results-panel{margin-top:20px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.section-heading h2{margin:0;font-size:1.35rem}.section-heading p{margin:0;color:#526070}.initial-array{color:#172033;font-weight:800}.step-list{display:grid;gap:14px}.step-item{border-top:1px solid #edf1f7;padding-top:14px}.step-details{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.step-details span,.result-detail{border:1px solid #dbe6fb;border-radius:999px;background:#f4f7ff;color:#2856bd;font-size:.78rem;font-weight:800;padding:4px 8px}.array-input{display:grid;gap:8px}.array-row{display:flex;flex-wrap:wrap;gap:8px}.cell-wrap{display:grid;gap:4px}.array-cell{width:56px;min-height:44px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#172033;text-align:center;font-weight:800}.array-cell:disabled{opacity:1}.cell-correct{border-color:#22a06b;background:#ecfdf5;color:#146c49}.cell-incorrect{border-color:#dc2626;background:#fff1f2;color:#991b1b}.cell-hint{max-width:72px;color:#991b1b;font-size:.72rem;line-height:1.15}.error-text{margin-top:6px;font-size:.88rem;font-weight:700}.score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.score-grid div{border:1px solid #dce3ef;border-radius:8px;padding:14px}.score-grid span,.score-grid small{display:block;color:#526070}.score-grid strong{display:block;margin:4px 0;font-size:1.8rem}.comparison-table{display:grid;grid-template-columns:70px minmax(240px,1.4fr) minmax(180px,1fr) 120px;overflow-x:auto;border:1px solid #dce3ef;border-radius:8px}.table-header,.table-cell{border-bottom:1px solid #dce3ef;padding:12px}.table-header{background:#f8fafc;color:#334155;font-weight:800}.table-row{display:contents}.table-row:last-child .table-cell{border-bottom:0}.step-number,.answer-text,.result-badge{font-weight:800}.result-detail{display:inline-block;margin:0 0 8px}.result-badge.good{color:#146c49}.result-badge.bad{color:#991b1b}.watermark{margin-top:24px;padding:14px 0 0;color:#64748b;font-size:.92rem;font-weight:700;text-align:center}.watermark a{color:#3566d6;text-decoration:none}.watermark a:hover{text-decoration:underline}.celebration-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 20% 20%,rgba(53,102,214,.24),transparent 26%),radial-gradient(circle at 80% 25%,rgba(34,160,107,.22),transparent 24%),#080f20bd;padding:24px}.confetti-field{position:absolute;inset:0;pointer-events:none}.confetti-piece{position:absolute;left:var(--x);top:-24px;width:10px;height:18px;border-radius:3px;background:#f7c948;animation:confetti-fall var(--duration) linear var(--delay) infinite}.confetti-piece:nth-child(3n){background:#ef476f}.confetti-piece:nth-child(4n){background:#22a06b}.confetti-piece:nth-child(5n){background:#56ccf2}.celebration-card{position:relative;width:min(440px,100%);border:1px solid rgba(255,255,255,.72);border-radius:8px;background:#fff;padding:34px 28px 28px;text-align:center;box-shadow:0 24px 80px #00000047;animation:message-pop .56s cubic-bezier(.16,1.35,.45,1) both}.celebration-kicker{margin:0 0 6px;color:#3566d6;font-size:.8rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.celebration-card h2{margin:0;color:#172033;font-size:clamp(2.2rem,8vw,4rem);line-height:1;animation:headline-pop .7s cubic-bezier(.16,1.35,.45,1) .08s both}.celebration-card p{color:#526070}.celebration-button{border:0;border-radius:8px;background:#3566d6;color:#fff;cursor:pointer;font-weight:800;padding:12px 18px}.celebration-button:hover{background:#2856bd}@keyframes message-pop{0%{opacity:0;transform:scale(.58) translateY(34px)}65%{opacity:1;transform:scale(1.08) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes headline-pop{0%{transform:scale(.72)}60%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes confetti-fall{0%{transform:translateY(-40px) rotate(0)}to{transform:translateY(calc(100vh + 80px)) rotate(calc(var(--spin) * 520deg))}}@media(prefers-reduced-motion:reduce){.celebration-card,.celebration-card h2,.confetti-piece{animation:none}}@media(max-width:820px){.app-shell{width:min(100% - 20px,1120px);padding-top:18px}.form-grid,.score-grid{grid-template-columns:1fr}.section-heading{display:block}.section-heading p{margin-top:8px}.comparison-table{grid-template-columns:58px minmax(220px,1.4fr) minmax(160px,1fr) 110px}}