@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400; 600; 700&display=swap"); html,body {margin:0; padding:0; min-height:100vh; font-family:"Open Sans",sans-serif; color:#fff}body {display:flex; background:linear-gradient(135deg,#093028 0,#237a57 100%) no-repeat center; overflow-x:hidden}.sidebar {position:fixed; inset:0 auto 0 0; width:380px; height:100%; padding-top:40px; background:rgba(0,0,0,0.4); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; box-sizing:border-box; transition:transform 0.3s ease; z-index:1000}.sidebar h2 {margin-bottom:40px; font-weight:700; text-align:center}.nav-link {width:220px; padding:12px 16px; margin:8px auto; text-decoration:none; color:inherit; background:rgba(255,255,255,0.1); border-radius:8px; text-align:center; transition:background 0.3s}.nav-link:hover,.nav-link.active {background:rgba(255,255,255,0.3)}.main-content {margin-left:380px; flex:1; padding:40px; min-height:100vh; display:flex; flex-direction:column; align-items:center; box-sizing:border-box}.footer {margin-top:auto; padding:20px; font-size:0.9rem; color:rgba(255,255,255,0.6); text-align:center}.hero {width:100%; padding:60px 20px; margin-bottom:40px; background:rgba(0,0,0,0.2); border-radius:12px; margin-bottom:40px; text-align:center}.hero h1 {font-size:2.8rem; font-weight:700; margin-bottom:15px; letter-spacing:1px}.hero p {font-size:1.2rem; opacity:0.8; max-width:700px; margin:0 auto}.features {display:flex; justify-content:center; flex-wrap:wrap; padding:20px; gap:20px}.feature {box-sizing:border-box; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.3); padding:20px; max-width:280px; flex:1; transition:transform 0.3s,box-shadow 0.3s; text-align:center}.feature:hover {transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.45)}.feature i {font-size:2.8rem; margin-bottom:10px; color:#27ae60}.feature h3 {font-size:1.4rem; margin-bottom:10px}.cta {text-align:center; padding:30px}.btn-start {padding:14px 28px; font-size:1.1rem; color:#fff; background:#2980b9; border-radius:8px; text-decoration:none; transition:background 0.3s; display:inline-block}.btn-start:hover {background:#3498db}.cta .btn-start {background:#27ae60 !important; font-size:1.15rem !important; margin:0 auto; display:inline-block}.cta .btn-start:hover {background:#2ecc71 !important}.article-nav {display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:20px auto 30px}.article-nav a {padding:12px 20px; background:rgba(255,255,255,0.1); color:#fff; border-radius:8px; text-decoration:none; font-weight:600; text-align:center; transition:background 0.3s}.article-nav a:hover,.article-nav a.active {background:rgba(255,255,255,0.3)}.article-card {max-width:800px; width:100%; padding:30px; background:rgba(255,255,255,0.1); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 8px 32px rgba(31,38,135,0.37); margin-bottom:40px; overflow-x:auto}.round-card {display:flex; background:rgba(255,255,255,0.1); border-radius:12px; margin-bottom:15px; box-shadow:0 4px 10px rgba(0,0,0,0.2); transition:transform 0.3s,background 0.3s}.round-header {background:#27ae60; padding:15px; border-radius:12px 0 0 12px; font-weight:600; width:120px; text-align:center; flex-shrink:0}.round-content {padding:15px; flex-grow:1}table {width:100%; border-collapse:collapse; margin-top:20px}th,td {padding:10px; text-align:left}thead {background:rgba(255,255,255,0.1)}tr:nth-child(even) td {background:rgba(255,255,255,0.1)}tr:hover td {background:rgba(255,255,255,0.2)}article table {width:100%; border-collapse:collapse; margin-top:20px; display:block; overflow-x:auto; min-width:100%}article th,article td {padding:10px; text-align:left; word-break:break-word}article thead {background:rgba(255,255,255,0.1)}article tr:nth-child(even) td {background:rgba(255,255,255,0.1)}article tr:hover td {background:rgba(255,255,255,0.2)}.suit-heart,.suit-diamond {color:red}.suit-spade,.suit-club {color:black}.feature,.feature:link,.feature:visited,.mobile-title,.mobile-title:link,.mobile-title:visited {color:inherit; text-decoration:none}.mobile-title:hover {text-decoration:none}.mobile-header {display:none; z-index:1300}.mobile-title {font-size:1rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.mobile-burger {width:40px; height:40px; display:flex; justify-content:center; align-items:center; background:none; border:none; color:inherit; font-size:22px; cursor:pointer}@media (max-width:1224px) {.features {display:grid !important; grid-template-columns:repeat(2,1fr); gap:20px; justify-items:center} .feature {flex:none !important; width:100% !important; max-width:none !important}}@media (max-width:900px) {.hero {width:100%; padding:1rem 1rem 1.5rem; margin-bottom:20px; text-align:center} .hero h1 {font-size:clamp(1.5rem,5.5vw,1.9rem)} .hero p {font-size:0.9rem} .features {flex-direction:column; align-items:center; gap:16px} .feature {text-align:center; width:95%; max-width:360px; padding:16px} .feature i {font-size:2rem} .sidebar {width:min(80vw,320px); transform:translateX(-100%)} .sidebar.active {transform:translateX(0)} .sidebar.active::before {content:""; position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(2px); z-index:-1} .mobile-header {display:flex; position:fixed; top:0; left:0; right:0; height:48px; padding:0 12px; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); z-index:1050; align-items:center; justify-content:space-between} .main-content {margin-left:0; padding:60px 20px 20px} .cta {padding:20px 0 30px} .cta .btn-start {width:95%; max-width:360px} article th,article td {padding:12px 10px}}@media (min-width:601px) and (max-width:900px) {.features {display:grid !important; grid-template-columns:repeat(2,1fr); gap:20px; justify-items:center} .feature {width:100% !important; max-width:none !important; flex:none !important; padding:18px; text-align:center} .feature i {font-size:2.2rem} .cta .btn-start {width:auto; max-width:360px; text-align:center}}@media (max-width:600px) {.hero h1 {font-size:1.6rem} .hero p {font-size:0.85rem} .feature h3 {font-size:1rem} .feature h3 {font-size:1rem} .feature {text-align:center} .feature p {overflow-wrap:anywhere} .features {display:flex !important; flex-direction:column !important; align-items:center !important; gap:16px !important} .btn-start {text-align:center} .footer {font-size:0.8rem} .hero {margin-bottom:0} .cta {display:none} .article-card,.article-card p,.article-card li,.article-card td,.article-card th {font-size:0.75rem; line-height:1.4} .article-card {padding:20px} .article-card h2 {font-size:1.3rem; margin-bottom:0.6rem} .article-card h3 {font-size:1.1rem; margin-bottom:0.5rem} .round-card {flex-direction:column} .round-header {width:100%; border-radius:12px 12px 0 0}.article-nav {flex-direction:column; gap:8px; align-items:stretch}.article-nav a {width:100%; max-width:none; padding:10px; text-align:center}}