html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0;padding:0}body{background-color:var(--light-color)}.article-wrapper p{max-width:65ch}p{margin-top:0;margin-bottom:1rem;color:#374151;line-height:1.6;font-size:1.125rem}header{background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:100}header img{border-radius:0;margin:0;box-shadow:none}header .container{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;height:65px}.container{width:100%;max-width:1100px;margin:0 auto}.logo h1{font-size:18px;font-weight:600;color:var(--primary-color);margin:0 auto}a{text-decoration:none;color:var(--primary-color);transition:var(--transition)}header nav ul{display:flex;margin:0 auto}ul{list-style:none}header nav ul li{margin-left:8px}header nav ul li a{color:var(--dark-color);font-weight:500;padding:5px 6px;border-radius:4px;font-size:14px}.menu-toggle{display:none}:root{--primary-color:#3498db;--secondary-color:#2c3e50;--accent-color:#e74c3c;--light-color:#f5f5f5;--dark-color:#333;--gray-color:#7f8c8d;--border-color:#ddd;--success-color:#2ecc71;--warning-color:#f39c12;--danger-color:#e74c3c;--shadow:0 2px 10px rgba(0, 0, 0, 0.1);--transition:all 0.3s ease}@media(min-width:769px) and (max-width:1024px){header nav ul li a{font-size:14px;padding:4px 8px}.logo h1{font-size:20px!important}}@media(max-width:768px){header .container{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;flex-wrap:wrap;position:relative}.logo{order:1}.menu-toggle{order:2;display:block;font-size:18px;cursor:pointer;flex-shrink:0}header nav{order:3;width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;margin-top:-5px;display:none;background-color:#fff;z-index:100;position:relative}header nav.active{display:block}header nav ul{flex-direction:column;width:100%;padding:0}header nav ul li{margin:0}header nav ul li a{display:block;padding:10px 20px}.hero-content{padding-right:40px;flex:1}.hero-content h2{font-size:42px;font-weight:700;margin-bottom:15px;color:var(--secondary-color)}.hero-content p{font-size:18px;margin-bottom:30px;color:var(--gray-color)}.hero-buttons{display:flex;gap:15px}.primary-btn{background-color:var(--primary-color);color:#fff}.secondary-btn{background-color:var(--secondary-color);color:#fff}.secondary-btn:hover{background-color:#1a2530;color:#fff}.btn{display:inline-block;cursor:pointer;font-size:16px;font-weight:600;text-align:center;padding:10px 20px;border-radius:5px;text-decoration:none;transition:var(--transition)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.hero-image img{max-width:100%;border-radius:10px;box-shadow:var(--shadow)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:50px}.feature-card{background-color:#fff;padding:30px;border-radius:10px;box-shadow:var(--shadow);text-align:center;transition:var(--transition)}.feature-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,.15)}.feature-card i{font-size:40px;color:var(--primary-color);margin-bottom:15px}.feature-card h3{font-size:22px;margin-bottom:10px;color:var(--secondary-color)}.feature-card p{color:var(--gray-color);line-height:1.6}.leaderboard-preview{background-color:#fff;padding:40px;border-radius:10px;box-shadow:var(--shadow);margin-bottom:50px}.leaderboard-preview h2{text-align:center;margin-bottom:30px;color:var(--secondary-color)}.leaderboard-header,.leaderboard-row{display:grid;grid-template-columns:60px 1fr 100px 100px;padding:15px;gap:15px}.leaderboard-header{background-color:var(--primary-color);color:#fff;font-weight:600;border-radius:5px;text-align:center}.leaderboard-row{border-bottom:1px solid var(--border-color);transition:var(--transition);cursor:pointer}.leaderboard-row:hover{background-color:rgba(52,152,219,5%)}.leaderboard-preview .btn{display:block;width:200px;margin:20px auto 0}}.streak-badge{display:inline-flex;align-items:center;gap:6px;margin:0 auto 0 16px;padding:5px 12px;border-radius:999px;border:1.5px solid #f3c58a;background:#fff7ec;color:#b35900;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap}.streak-badge[hidden]{display:none}.streak-badge:hover{background:#ffefd9;color:#b35900}.streak-badge-label{font-weight:600}.streak-badge-start{border-color:#cfe3f3;background:#f2f8fd;color:#2c6e9e}.streak-badge-start:hover{background:#e6f2fb;color:#2c6e9e}.streak-badge-risk{border-color:#e67c00;background:#e67c00;color:#fff;animation:streak-badge-pulse 2.4s ease-in-out infinite}.streak-badge-risk:hover{background:#cf6f00;color:#fff}.streak-badge-done{border-color:#b9e6c8;background:#effaf2;color:#1e7d3a}.streak-badge-done:hover{background:#e2f6e8;color:#1e7d3a}@keyframes streak-badge-pulse{0%,100%{box-shadow:0 0 rgba(230,124,0,.35)}50%{box-shadow:0 0 0 5px rgba(230,124,0,0)}}@media(prefers-reduced-motion:reduce){.streak-badge-risk{animation:none}}@media(max-width:768px){.streak-badge{order:1;margin:0 12px 0 auto;padding:4px 10px;font-size:13px}}header .logo{flex-shrink:0}@media(max-width:1100px){.streak-badge-risk .streak-badge-label{display:none}}@media(max-width:520px){.streak-badge-label{display:none}}.streak-banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding:9px 44px 9px 16px;position:relative;background:#fff1df;border-bottom:1.5px solid #f3c58a;color:#8a4400;font-size:15px;font-weight:700;line-height:1.35;text-align:center}.streak-banner[hidden]{display:none}.streak-banner-freeze{background:#e8f6fc;border-bottom-color:#9fd3ea;color:#1d5f7d}.streak-banner-play{padding:4px 14px;border-radius:999px;background:#e67c00;color:#fff;text-decoration:none;white-space:nowrap}.streak-banner-play:hover{background:#cf6f00;color:#fff}.streak-banner-play[hidden]{display:none}.streak-banner-freeze .streak-banner-play{background:#2c86ad}.streak-banner-close{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:none;background:0 0;color:inherit;font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;opacity:.7}.streak-banner-close:hover{opacity:1}@media(max-width:768px){.streak-banner{font-size:14px}}