:root { color-scheme: dark; font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; color: #ecf0ef; background: #101817; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
header { height: 68px; border-bottom: 1px solid #33413d; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1120px)/2)); background: #101817; }
.brand { font-weight: 800; font-size: 21px; text-decoration: none; color: #f8f9f4; }
.brand span { color: #e4bd64; }
nav { display: flex; gap: 26px; }
nav a { text-decoration: none; color: #b9c6c2; font-size: 14px; }
nav a:hover, nav a:focus { color: #f0c974; }
main { width: min(1120px, calc(100% - 48px)); margin: auto; }
.hero { min-height: 510px; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 45px; padding: 56px 0 70px; }
.eyebrow { color: #f0c974; font-size: 13px; font-weight: 700; }
h1 { font-size: 58px; line-height: 1.16; margin: 18px 0; letter-spacing: 0; }
.lead { max-width: 510px; font-size: 18px; line-height: 1.8; color: #b9c6c2; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border: 1px solid #5d7169; background: transparent; color: #f7f8f5; text-decoration: none; border-radius: 5px; font: inherit; font-weight: 600; cursor: pointer; }
.button.primary { background: #e6bd65; border-color: #e6bd65; color: #17201d; }
.button:hover { filter: brightness(1.12); }
.preview { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: #0a0d0d; border: 1px solid #36443f; box-shadow: 0 22px 54px #0008; }
section { border-top: 1px solid #34423d; padding: 60px 0; scroll-margin-top: 24px; }
h2 { font-size: 28px; margin: 0 0 10px; }
.muted { color: #aab9b4; line-height: 1.7; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 30px; }
.features article { border-left: 2px solid #e6bd65; padding-left: 18px; }
h3 { font-size: 18px; margin: 0 0 8px; }
.features p { color: #aab9b4; line-height: 1.7; margin: 0; }
.release-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 0; border-bottom: 1px solid #34423d; }
.release-row strong { display: block; font-size: 17px; margin-bottom: 5px; }
.release-row small { color: #aab9b4; overflow-wrap: anywhere; }
.upload { max-width: 680px; display: grid; gap: 14px; }
.file-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: #aab9b4; overflow-wrap: anywhere; }
.file-row label { cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.visually-hidden:focus-visible + label { outline: 2px solid #f0c974; outline-offset: 3px; }
.upload .button { justify-self: start; }
#upload-status { min-height: 24px; color: #e6bd65; }
footer { border-top: 1px solid #34423d; padding: 28px 24px; text-align: center; color: #899b94; font-size: 13px; }
@media (max-width: 760px) { header { height: auto; min-height: 66px; padding: 14px 24px; gap: 14px; flex-wrap: wrap; } nav { gap: 16px; flex-wrap: wrap; } .hero { grid-template-columns: 1fr; min-height: 0; gap: 25px; padding: 46px 0; } h1 { font-size: 42px; } .preview { max-height: 300px; } .features { grid-template-columns: 1fr; } section { padding: 42px 0; } }