:root{color-scheme:dark;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#f6f0e6;background:#0a0c12}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 70% 10%,#3a180866,transparent 50%),radial-gradient(ellipse at 20% 0%,#123a5566,transparent 45%),#0a0c12}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #ffb347;outline-offset:6px}
header,main,footer{width:min(1100px,calc(100% - 48px));margin:auto}
header{display:flex;justify-content:space-between;gap:16px;padding:24px 0;font-size:13px;color:#b7c0cf}
.back:hover,footer a:hover{color:#ffc56d}
.hero{margin:0;border:1px solid #ff9a3c44;overflow:hidden;border-radius:10px;box-shadow:0 20px 60px #00000088}
.hero img{display:block;width:100%;height:auto}
.intro{display:grid;grid-template-columns:1fr 210px;gap:64px;align-items:center;padding:44px 32px 36px}
.brand-row{display:flex;gap:16px;align-items:center;margin:0 0 14px}
.brand-row img{width:64px;height:64px;border-radius:14px;border:1px solid #ffffff22}
.eyebrow{color:#ffb347;letter-spacing:3px;font-size:12px;margin:0}
h1{font-size:40px;letter-spacing:2px;margin:0 0 10px}
h2{font-size:22px;line-height:1.6;font-weight:500;margin:0 0 16px;color:#ffe1b0}
.description{font-size:15px;color:#c5cedb;line-height:1.9;max-width:620px;margin:0 0 18px}
.meta{font-size:13px;color:#93a0b5;margin:0 0 24px}
.play{display:inline-flex;gap:24px;align-items:center;background:linear-gradient(90deg,#ffb347,#ff7a45);color:#1a1208;padding:15px 25px;border-radius:6px;font-size:15px;font-weight:bold;min-height:48px}
.play:hover{filter:brightness(1.08)}
.qr{text-align:center}
.qr img{width:172px;height:172px;border:10px solid white;border-radius:5px;background:white}
.qr p{font-size:14px;margin:14px 0 7px}
.qr span{font-size:12px;color:#93a0b5}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);padding:27px 32px;margin:0;border-top:1px solid #ff9a3c33;border-bottom:1px solid #ff9a3c33;gap:24px}
.steps li{display:flex;gap:18px;align-items:flex-start}
.steps li>span{font-size:27px;color:#ffb347;line-height:1}
h3{font-size:16px;margin:0 0 8px}
.steps p{font-size:13px;color:#93a0b5;margin:0;line-height:1.7}
.gallery{padding:36px 32px 10px}
.gallery h2{font-size:18px;margin:0 0 18px;color:#ffe1b0}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;padding:0;margin:0}
.shots li{margin:0;border:1px solid #ffffff14;border-radius:8px;overflow:hidden;background:#11151d}
.shots img{display:block;width:100%;height:auto}
.shots figcaption{font-size:12px;color:#93a0b5;padding:10px 12px}
.note{padding:8px 32px 28px;font-size:12px;color:#7f8aa0;line-height:1.7}
footer{display:flex;justify-content:space-between;padding:26px 0 36px;font-size:12px;color:#93a0b5}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){header,main,footer{width:calc(100% - 28px)}header{font-size:11px;padding:18px 0}.intro{grid-template-columns:1fr;gap:30px;padding:30px 10px}h1{font-size:32px}h2{font-size:20px}.play{width:100%;justify-content:center}.qr span{display:none}.qr img{width:144px;height:144px}.steps{grid-template-columns:1fr;padding:24px 10px;gap:24px}.gallery{padding:28px 10px 8px}.note{padding:8px 10px 24px}.hero{border-radius:6px}}