:root{--bg:#fafaf8;--surface:#fff;--text:#222;--text-light:#666;--border:#ececec;--primary:#111827;--radius:16px;--shadow:0 10px 30px #0000000d;--max-width:1180px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Inter,HarmonyOS Sans SC,PingFang SC,sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{max-width:var(--max-width);margin:auto;padding:0 32px}section{margin:120px 0}h1{font-size:64px;font-weight:700;line-height:1.2}h2{margin-bottom:24px;font-size:40px}p{color:var(--text-light)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;transition:all .3s}.card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}.button{color:#fff;background:#111;border-radius:999px;align-items:center;gap:8px;padding:12px 24px;transition:all .25s;display:inline-flex}.button:hover{opacity:.85}.grid{gap:32px;display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}@media (width<=900px){h1{font-size:42px}h2{font-size:30px}.grid-2,.grid-3{grid-template-columns:1fr}.container{padding:20px}}.navbar{border-bottom:1px solid var(--border)}.navbar-inner{justify-content:space-between;align-items:center;height:72px;display:flex}.logo{align-items:center;font-size:24px;font-weight:700;display:flex}.logo img{border-radius:6px;height:auto;max-height:60px;margin-right:20px;display:block}.logo:hover img{animation:1.2s ease-in 1.4s forwards shakeAndDrop}@keyframes shakeAndDrop{0%{opacity:1;transform:translate(0)rotate(0)}20%{transform:translate(-10px)rotate(-4deg)}40%{transform:translate(10px)rotate(4deg)}60%{opacity:.8;transform:translate(-6px)rotate(-2deg)translateY(30px)}80%{opacity:.4;transform:translate(4px)rotate(1deg)translateY(120px)}to{opacity:0;transform:translate(0)rotate(0)translateY(300px)}}.seaside-text{color:#c5c5c5;text-shadow:0 0 #0000;align-items:center;gap:0;font-size:min(3.5vw,48px);font-weight:700;transition:color .4s,text-shadow .4s;display:inline-flex}.logo:hover .seaside-text{color:#1a1a1a;text-shadow:0 0 8px #466e4666,0 0 20px #325a324d,0 0 40px #1e462833,0 0 80px #5a46321a;animation:4s ease-in-out 3.6s infinite crabMove}.crab-left,.crab-center,.crab-right{align-items:center;gap:0;display:inline-flex}.crab-left span,.crab-right span{display:inline-block}.crab-left,.crab-right{gap:0;transform:translate(0)}.crab-left span,.crab-right span{transform:translateY(0)}.logo:hover .crab-left{animation:3.6s ease-out forwards leftClawSequence}@keyframes leftClawSequence{0%{gap:0;transform:translate(0)}16.7%{gap:.1em;transform:translate(-18px)}38.9%{gap:.1em;transform:translate(-18px)}44.4%{gap:.1em;transform:translate(-40px)}77.8%{gap:.1em;transform:translate(-40px)}88.9%{gap:.1em;transform:translate(-18px)}to{gap:.1em;transform:translate(-18px)}}.logo:hover .crab-right{gap:.1em;transition:transform .6s cubic-bezier(.34,1.56,.64,1),gap .6s;transform:translate(18px)}.logo:hover .crab-center{animation:.8s ease-in-out .6s forwards bodyShake}@keyframes bodyShake{0%{transform:translate(0)}10%{transform:translate(-10px,-6px)}20%{transform:translate(10px,6px)}30%{transform:translate(-6px,10px)}40%{transform:translate(6px,-10px)}50%{transform:translate(-12px,-4px)}60%{transform:translate(12px,4px)}70%{transform:translate(-4px,12px)}80%{transform:translate(4px,-12px)}to{transform:translate(0)}}.logo:hover .crab-left span,.logo:hover .crab-right span{animation:.6s ease-in-out infinite legFloat;animation-delay:calc(3.6s + var(--delay,0s))}.logo:hover .crab-left span:first-child{--delay:0s}.logo:hover .crab-left span:nth-child(2){--delay:.2s}.logo:hover .crab-left span:nth-child(3){--delay:.4s}.logo:hover .crab-right span:first-child{--delay:.1s}.logo:hover .crab-right span:nth-child(2){--delay:.3s}.logo:hover .crab-right span:nth-child(3){--delay:.5s}.logo:hover .crab-right span:nth-child(4){--delay:.7s}@keyframes legFloat{0%{transform:translateY(0)}25%{transform:translateY(-7px)}50%{transform:translateY(0)}75%{transform:translateY(7px)}to{transform:translateY(0)}}@keyframes crabMove{0%{transform:translate(0)}25%{transform:translate(32px)}50%{transform:translate(-32px)}75%{transform:translate(32px)}to{transform:translate(0)}}nav{gap:28px;display:flex}nav a{color:#666}nav a:hover{color:#111}.footer{border-top:1px solid var(--border);margin-top:100px;padding:48px 0}.footer .container{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex}.footer-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;display:flex}.footer-links a{color:var(--text-light)}.footer-copy,.footer-icp,.footer-gongan{text-align:center;width:100%}.footer-icp a,.footer-gongan a{color:#999;font-size:13px;display:inline-block}.footer-icp a:hover,.footer-gongan a:hover{color:var(--text)}