*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f5f7fb;color:#172033;line-height:1.65}a{color:inherit;text-decoration:none}.container{width:min(1160px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:#111827;color:#fff;box-shadow:0 8px 24px #0002}.nav{min-height:72px;display:flex;align-items:center;gap:28px}.brand{font-size:1.35rem;font-weight:900;letter-spacing:.5px;color:#67e8f9}.menu{display:flex;gap:8px;flex:1}.drop{position:relative}.drop>a,.plain{display:block;padding:14px 12px;border-radius:10px;font-weight:700}.drop:hover>a,.plain:hover{background:#ffffff16}.submenu{display:none;position:absolute;top:100%;left:0;background:#fff;color:#172033;width:260px;padding:10px;border-radius:14px;box-shadow:0 18px 60px #0003;max-height:70vh;overflow:auto}.drop:hover .submenu{display:block}.submenu a{display:block;padding:9px 11px;border-radius:8px;font-size:.92rem}.submenu a:hover{background:#ecfeff;color:#0e7490}.menu-toggle{display:none;border:0;background:#ffffff18;color:#fff;padding:10px 13px;border-radius:10px;font-size:1.2rem}.hero{padding:54px 0 26px;background:radial-gradient(circle at top right,#cffafe 0,transparent 35%),linear-gradient(180deg,#fff,#f5f7fb)}.hero h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.08;margin:0 0 12px}.hero p{max-width:760px;color:#4b5563;font-size:1.08rem}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:28px 0 54px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 10px 30px #0f172a0d}.tool{padding:26px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;text-align:center;padding:14px}.stat b{display:block;font-size:1.65rem;color:#0891b2}.stat span{font-size:.8rem;text-transform:uppercase;font-weight:800;color:#64748b}.click-zone{user-select:none;min-height:250px;border:3px dashed #22d3ee;border-radius:20px;display:grid;place-items:center;text-align:center;padding:28px;background:linear-gradient(135deg,#ecfeff,#f0fdfa);cursor:pointer;transition:.12s;touch-action:manipulation}.click-zone:active{transform:scale(.994);background:#cffafe}.click-zone strong{font-size:clamp(1.4rem,3vw,2.15rem);color:#0e7490}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:800;cursor:pointer;background:#0e7490;color:#fff}.btn.alt{background:#e2e8f0;color:#1f2937}.time-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.time-links a{font-size:.8rem;padding:8px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font-weight:800}.best{margin-top:16px;padding:14px;border-radius:12px;background:#fff7ed;color:#9a3412;font-weight:800}.sidebar{display:flex;flex-direction:column;gap:18px}.side-card{padding:20px}.side-card h3{margin-top:0}.side-card a{display:block;padding:9px 0;border-bottom:1px solid #eef2f7;color:#475569}.content{padding:30px;margin-top:22px}.content h2{font-size:1.65rem;margin-top:1.5em}.content h3{font-size:1.2rem}.content li{margin:.4em 0}.typing-text{font-size:1.12rem;padding:18px;background:#f8fafc;border-radius:14px;border:1px solid #e2e8f0}.typing-input{width:100%;min-height:150px;margin-top:14px;padding:15px;border:2px solid #cbd5e1;border-radius:13px;font:inherit;resize:vertical}.wheel-zone{height:280px;display:grid;place-items:center;border:3px dashed #a78bfa;border-radius:20px;background:#f5f3ff;text-align:center}.modal{display:none;position:fixed;inset:0;background:#0f172acc;z-index:100;place-items:center;padding:20px}.modal.show{display:grid}.modal-box{background:#fff;width:min(480px,100%);padding:28px;border-radius:22px;text-align:center}.modal-score{font-size:3rem;font-weight:900;color:#0891b2}.site-footer{background:#111827;color:#cbd5e1;padding:36px 0}.footer-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.notice{padding:14px;border-left:4px solid #06b6d4;background:#ecfeff;border-radius:8px}.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.post{padding:22px}.post h2{font-size:1.25rem;margin-top:0}@media(max-width:850px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}.menu-toggle{display:block;margin-left:auto}.menu{display:none;position:absolute;top:72px;left:0;right:0;background:#111827;padding:14px;flex-direction:column}.menu.open{display:flex}.drop:hover .submenu{display:none}.drop.open .submenu{display:block;position:static;width:100%;margin-top:4px}.nav{position:relative}.stats{grid-template-columns:1fr 1fr 1fr}}@media(max-width:560px){.container{width:min(100% - 20px,1160px)}.hero{padding-top:34px}.tool,.content{padding:18px}.stats{gap:7px}.stat{padding:10px 5px}.stat b{font-size:1.3rem}.sidebar,.blog-grid{grid-template-columns:1fr}.click-zone{min-height:220px}.footer-row{display:block}}