*{box-sizing:border-box}body{margin:0;background:#f7f5ed;color:#273f35;font-family:Trebuchet MS,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #e68b51;outline-offset:4px}header{height:92px;border-bottom:1px solid #dedfd4;display:flex;align-items:center;gap:30px;padding:0 5%}.brand{color:inherit;text-decoration:none;font-size:31px;font-weight:900;letter-spacing:-1.4px;position:relative;padding-left:45px}.paw{position:absolute;left:0;color:#e48153;font-size:46px;top:-6px}.by{display:block;font-size:9px;letter-spacing:2.4px;margin-top:3px}.tag{font-size:13px;color:#788276;margin-left:auto}header button{background:#e9ecdf;border-radius:30px;padding:11px 16px;font-size:12px}main{max-width:1360px;margin:auto;padding:36px 5%}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold;color:#75826d}h1{font-size:43px;letter-spacing:-1.8px;margin:12px 0 8px}h1 i{font-family:Georgia,serif;font-weight:normal;color:#658666}.heading p{font-size:13px;color:#788276;margin:0}.record{border:1px solid #d9ddce;border-radius:14px;padding:15px 25px;font-size:10px;letter-spacing:1px}.record strong{display:block;font-size:24px;margin-top:7px;letter-spacing:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.game{position:relative;overflow:hidden;border-radius:22px;background:#b0d6c3;aspect-ratio:1.3;box-shadow:0 8px 24px #263c3510}canvas{width:100%;height:100%;display:block}.hud{position:absolute;left:20px;right:20px;top:18px;display:flex;align-items:center;gap:10px}.hud>span{background:#fffdf0e8;padding:10px 17px;border-radius:30px;font-size:15px;box-shadow:0 2px 0 #294a3d18}.hud>span:first-child{color:#b67d19}.hud button{margin-left:auto;background:#fffdf0e8;color:#284c3c;width:40px;height:40px;border-radius:50%;font-weight:bold}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#dfeee9ef 0%,#dfeee9b8 42%,#dfeee900 75%);display:flex;align-items:center;padding:7%;z-index:2}.overlay.hidden{display:none}.intro{max-width:410px}.pill{font-size:9px;letter-spacing:1.3px;font-weight:bold;display:inline-block;background:#fff9e5c9;border-radius:30px;padding:9px 13px}h2{margin:0}.intro h2{font-size:clamp(38px,5.3vw,70px);line-height:1.03;letter-spacing:-2px;margin:19px 0}.intro em{font-family:Georgia,serif;font-weight:normal;color:#547459}.intro p{font-size:14px;line-height:1.7}.primary{background:#e98b51;color:#233e31;padding:16px 24px;border-radius:12px;font-weight:bold;font-size:17px;box-shadow:0 5px 0 #c66e39;margin:9px 0 18px;min-width:190px;display:flex;justify-content:space-between;gap:20px}.primary:hover{background:#f4a570;transform:translateY(-1px)}small{font-size:9px}.intro>small{display:block;color:#5c7464}.location{position:absolute;bottom:83px;left:20px;color:#ffffff;background:#244a3c9c;border-radius:20px;padding:7px 12px;font-size:10px;pointer-events:none}.touch{position:absolute;bottom:17px;left:20px;right:20px;display:flex;justify-content:center;gap:8px}.touch button{border:1px solid #ffffff66;color:#fff;background:#294d3dd9;border-radius:12px;height:48px;min-width:55px;font-size:22px;box-shadow:0 3px 0 #183c2f}.touch small{display:block;font-size:8px}.touch button:nth-child(2),.touch button:nth-child(3){min-width:80px}.meet{background:#e9eddf;border-radius:18px;overflow:hidden}.photowrap{height:195px;position:relative}.photowrap img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}.photowrap span{position:absolute;bottom:13px;left:16px;background:#fff7df;border-radius:20px;padding:6px 10px;font-size:8px;letter-spacing:1.2px}.meettext{padding:21px}.meet h2{font-family:Georgia,serif;font-size:25px;font-weight:normal;line-height:1.1}.meet p{font-size:12px;color:#677664;line-height:1.6}.signature{font-family:Georgia,serif;font-style:italic;font-size:20px}.how{padding:7px 3px}.how h3{font-size:14px;margin-bottom:15px}.how>div{display:flex;gap:5px;margin-bottom:8px;align-items:center}.how>div span{font-size:11px;margin-left:8px}kbd{background:#fff;border:1px solid #deded3;border-bottom-width:3px;border-radius:5px;padding:3px 7px;font-family:inherit;font-size:11px}.how p{font-size:10px;color:#788276;line-height:1.7}.tips{display:flex;justify-content:space-between;margin:25px 0 10px;gap:20px}.tips>div{display:flex;align-items:center;gap:12px}.tips>div>span{background:#e9eddf;border-radius:14px;width:42px;height:42px;display:grid;place-items:center;font-size:21px;color:#bd9235}.tips p{font-size:10px;color:#7d8579;line-height:1.8}.tips b{display:block;color:#354c3d;font-size:12px}footer{margin:15px 5% 0;padding:24px 0;display:flex;gap:30px;justify-content:space-between;border-top:1px solid #dedfd4;font-size:10px;color:#8b9183}footer b{font-size:17px;letter-spacing:-1px}#effect{position:absolute;top:70px;left:20px;color:#fff;background:#28523bba;border-radius:15px;padding:6px 12px;font-size:11px}#effect:empty{display:none}@media(min-width:1450px){.game{max-height:680px}}@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr) 220px}.tag{display:none}header button{margin-left:auto}h1{font-size:34px}.game{aspect-ratio:.95}.photowrap{height:170px}.intro h2{font-size:48px}.tips{gap:10px}.tips b{font-size:10px}}@media(max-width:650px){header{height:75px}.brand{font-size:26px}.by{font-size:7px}.heading{align-items:flex-start;gap:8px}h1{font-size:29px;max-width:230px}.heading p{font-size:11px;max-width:240px}.record{padding:10px;font-size:8px;white-space:nowrap}.record strong{font-size:18px}.layout{display:block}.game{aspect-ratio:.74;border-radius:18px;max-height:76vh}.intro h2{font-size:55px}.intro p{font-size:13px}.intro .pill{font-size:8px}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.photowrap{height:150px}.meettext{padding:15px}.meet h2{font-size:22px}.meet p{font-size:11px}.how{padding:0}.tips{flex-wrap:wrap}.tips>div{min-width:44%}footer{flex-wrap:wrap;gap:12px}.hud{left:12px;right:12px}.touch{left:12px;right:12px}main{padding-top:25px}}
