:root{font-family:Inter,Segoe UI,sans-serif;color:#1d2840}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#fff0bd 0%,transparent 25%),radial-gradient(circle at top right,#dff6ff 0%,transparent 28%),linear-gradient(180deg,#fff9fd,#f3faff)}button,input{font:inherit}.page{max-width:1240px;margin:0 auto;padding:28px 18px 56px}.card{background:#fffffff2;border-radius:30px;box-shadow:0 16px 38px #6f7dc91f;border:3px solid #fff}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}.hero-card{padding:26px}.eyebrow{margin:0;color:#ff6b9e;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero h1{margin:10px 0 14px;font-size:40px;line-height:1.15;color:#31459b}.subtitle{color:#5e6890;font-size:17px;line-height:1.75}.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.hero-badges span{background:linear-gradient(90deg,#fff4c7,#ffe1ef);color:#6d4ca2;border-radius:999px;padding:9px 14px;font-weight:700}.animated-board{min-height:280px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#edf6ff)}.vertical-board{font-family:Courier New,monospace;font-size:30px;font-weight:800;color:#31459b;background:#fff;border-radius:20px;padding:18px 22px;min-width:190px;box-shadow:inset 0 0 0 2px #eef3ff}.line{min-height:38px;text-align:right;white-space:pre}.divider{letter-spacing:1px}.fade{opacity:0;transform:translateY(6px);transition:all .35s ease}.fade.show{opacity:1;transform:translateY(0)}.result{color:#ff6b9e}.play-btn,.speak-btn{border:none;border-radius:18px;padding:12px 18px;font-weight:800;cursor:pointer;margin-top:16px}.play-btn{background:linear-gradient(90deg,#7c8fff,#ff8fb2);color:#fff}.speak-btn{background:linear-gradient(90deg,#ffcf5a,#ff9bc2);color:#50326d}.section{padding:24px;margin-bottom:18px}.section-head h2{margin:0 0 6px;color:#31459b}.section-head p{margin:0 0 16px;color:#647291}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.step-card{background:linear-gradient(180deg,#fffdf7,#f7fbff);border-radius:24px;padding:18px;box-shadow:inset 0 0 0 2px #eef3ff;border:none;text-align:left;cursor:pointer}.step-card.active{outline:3px solid #ff9bc2}.step-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff0b8,#ffd4e7);font-size:24px;margin-bottom:10px}.step-card h3{margin:0 0 8px;font-size:18px;color:#3447a0}.step-card p{margin:0;color:#5d6d8d;line-height:1.6}.learning-card .learn-box{background:linear-gradient(180deg,#fffdf7,#f7fbff);border-radius:24px;padding:20px}.learn-text{font-size:20px;line-height:1.9;color:#47587a;margin-bottom:16px}.learn-actions{display:flex;gap:10px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.example-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.example-tabs button,.practice-inputs button{border:none;border-radius:16px;padding:10px 14px;cursor:pointer;font-weight:700}.example-tabs button{background:#edf2ff;color:#3c4f84}.example-tabs button.active{background:linear-gradient(90deg,#ff8fb2,#7c8fff);color:#fff}.example-box,.practice-box{background:linear-gradient(180deg,#fffdf7,#f7fbff);border-radius:24px;padding:18px}.example-box h3,.practice-question{margin-top:0;color:#31459b;font-size:28px;font-weight:800}.example-box ol{color:#5c6a87;line-height:1.9}.answer-box{margin-top:12px;background:linear-gradient(90deg,#fff4c7,#ffe1ef);padding:12px 14px;border-radius:16px;font-weight:800;color:#6d4ca2}.practice-hint{color:#5f7092;margin-bottom:14px}.practice-inputs{display:flex;gap:10px;flex-wrap:wrap}.practice-inputs input{flex:1;min-width:180px;padding:14px 16px;border:2px solid #e4e9ff;border-radius:18px;outline:none;background:#fffefc}.practice-inputs button{background:linear-gradient(90deg,#ffcf5a,#ff9bc2);color:#50326d}.practice-inputs button.secondary{background:#edf2ff;color:#3c4f84}.practice-result{margin-top:14px;font-weight:700;color:#3447a0}@media (max-width: 980px){.hero,.two-col,.steps-grid{grid-template-columns:1fr}.hero h1{font-size:32px}}