:root {
  color: #f2f0e8;
  background: #10130f;
  font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100vh; background: #10130f; }
button { font: inherit; }
.page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 28px clamp(20px,5vw,72px); overflow: hidden; }
.page.is-denied { grid-template-rows: 1fr; }
.page.is-denied .card { width: min(520px,100%); box-shadow: none; }
.page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 15%,rgba(255,107,69,.13),transparent 28%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: auto,46px 46px,46px 46px; }
.header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-label { color: #858c84; font: 500 9px Consolas,monospace; letter-spacing: .12em; text-transform: uppercase; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand > span:last-child { display: grid; grid-template-columns: auto auto; line-height: 1; }
.brand strong, .brand em { font-size: 18px; letter-spacing: -.045em; }
.brand strong { font-weight: 650; }
.brand em { color: #ff6b45; font-style: normal; font-weight: 520; }
.brand small { grid-column: 1 / -1; margin-top: 4px; color: #747c73; font: 500 7px Consolas,monospace; letter-spacing: .15em; text-transform: uppercase; }
.brand-mark { position: relative; width: 35px; height: 35px; }
.brand-mark i, .brand-mark b { position: absolute; width: 23px; height: 16px; border: 2px solid currentColor; }
.brand-mark i { top: 3px; left: 2px; border-right: 0; border-radius: 6px 0 0 2px; }
.brand-mark b { right: 2px; bottom: 3px; border-left: 0; border-radius: 0 2px 6px 0; color: #ff6b45; }
.card { position: relative; z-index: 1; align-self: center; width: min(620px,100%); margin: 58px auto; padding: clamp(34px,6vw,58px); border: 1px solid #3b413a; border-radius: 14px 14px 14px 4px; background: #f7f5ee; color: #161915; box-shadow: 12px 14px 0 rgba(255,107,69,.19); }
.state-icon { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 12px 12px 4px 12px; color: #172017; background: #d8ff70; }
.state-icon span { width: 22px; height: 22px; display: block; border: 2px solid currentColor; border-radius: 50%; }
.state-icon.is-checking, .state-icon.is-downloading { color: #7a8079; background: #e7e4da; }
.state-icon.is-checking span, .state-icon.is-downloading span { border-right-color: transparent; animation: spin 1s linear infinite; }
.state-icon.is-ready span { border-radius: 7px 7px 3px 7px; }
.state-icon.is-complete { color: #fff; background: #27865d; }
.state-icon.is-complete span { width: 25px; height: 14px; border-width: 0 0 3px 3px; border-radius: 0; transform: rotate(-45deg) translate(2px,-2px); }
.state-icon.is-error { color: #fff; background: #c64958; }
.state-icon.is-error span { border: 0; }
.state-icon.is-error span::before { content: "!"; display: block; font-size: 28px; font-weight: 750; line-height: 22px; text-align: center; }
.eyebrow { display: block; margin-bottom: 11px; color: #a74831; font: 600 9px/1 Consolas,monospace; letter-spacing: .15em; text-transform: uppercase; }
h1 { max-width: 500px; margin: 0 0 14px; font-size: clamp(35px,6vw,54px); font-weight: 580; line-height: .96; letter-spacing: -.055em; }
p { max-width: 480px; margin: 0; color: #626961; font-size: 14px; line-height: 1.65; }
dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 30px 0 0; border-top: 1px solid #d2cfc5; border-bottom: 1px solid #d2cfc5; }
dl > div { min-width: 0; padding: 15px 12px 15px 0; border-right: 1px solid #d2cfc5; }
dl > div:not(:first-child) { padding-left: 12px; }
dl > div:last-child { border-right: 0; }
dt { margin-bottom: 6px; color: #858b84; font: 500 8px Consolas,monospace; letter-spacing: .12em; text-transform: uppercase; }
dd { margin: 0; overflow: hidden; font-size: 11px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
#download { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 28px; border: 1px solid #171a16; border-radius: 7px 7px 7px 2px; background: #ff6b45; color: #171a16; box-shadow: 4px 4px 0 #171a16; cursor: pointer; font-size: 13px; font-weight: 700; }
#download:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #171a16; }
#download:focus-visible { outline: 2px solid #ff6b45; outline-offset: 4px; }
.notice { margin-top: 19px; padding: 12px 14px; border: 1px solid #df9ca6; border-radius: 6px; background: #fae8eb; color: #9e3342; font-size: 11px; line-height: 1.5; }
.notice.is-success { display: inline-flex; border-color: #9bc9ae; background: #e8f5ec; color: #246d4b; font-family: Consolas,monospace; font-weight: 600; }
footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: #747c73; font: 500 9px Consolas,monospace; letter-spacing: .06em; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .page { padding: 22px 16px; }
  .header-label { display: none; }
  .card { margin: 38px auto; padding: 30px 23px; box-shadow: 7px 8px 0 rgba(255,107,69,.19); }
  dl { grid-template-columns: 1fr; }
  dl > div, dl > div:not(:first-child) { padding: 11px 0; border-right: 0; border-bottom: 1px solid #d2cfc5; }
  dl > div:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms!important; transition-duration: .01ms!important; } }