:root {
  color-scheme: dark;
  --bg: #080808;
  --text: #f7f7f7;
  --hover: #d36b00;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Courier New", Courier, monospace; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); user-select: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
::selection { background: var(--text); color: var(--bg); }

.main { min-height: 100svh; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 80px 24px 50px; }
.homepage-content { width: min(80vw, 1100px); min-width: 800px; position: relative; z-index: 2; transform: translateY(-78px); }
.date-time { color: var(--text); position: fixed; z-index: 4; top: 1.3rem; right: 2rem; font-size: 18px; letter-spacing: 0; white-space: nowrap; }
.welcome { width: max-content; margin: 0 auto 18px; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--text); font-size: 16px; line-height: 1.25; }


.actions { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 32px; position: relative; z-index: 3; }
.ascii-button { appearance: none; border: 0; background: transparent; color: var(--text); padding: 4px 5px; font-size: 16px; line-height: 1.25; cursor: pointer; letter-spacing: 0; transition: color .28s ease, transform .28s ease, text-shadow .28s ease; }
.ascii-button:hover, .ascii-button:focus-visible { color: var(--hover); transform: translateY(-2px); text-shadow: 0 0 10px rgba(211,107,0,.22); }
.download-button.is-missing { color: #777; cursor: not-allowed; pointer-events: none; }
.download-button.is-missing:hover { color: #777; transform: none; text-shadow: none; }

.faq-panel { width: min(620px, 100%); margin: 24px auto 0; padding: 18px 18px 16px; border-top: 1px solid #444; border-bottom: 1px solid #444; background: rgba(8,8,8,.96); opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .4s ease, max-height .45s ease, transform .4s ease, margin-top .45s ease; }
.faq-panel.is-open { opacity: 1; max-height: 700px; pointer-events: auto; transform: translateY(0); }
.faq-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.faq-heading h2 { font-size: 14px; line-height: 1.4; font-weight: 400; }
.faq-item { border-top: 1px dotted #343434; }
.faq-question { width: 100%; display: flex; justify-content: space-between; gap: 20px; align-items: center; border: 0; background: transparent; color: var(--text); padding: 12px 0 10px; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.faq-question::after { content: "+"; color: #777; transition: transform .3s ease, color .3s ease; }
.faq-item.is-open .faq-question::after { content: "−"; color: var(--hover); }
.faq-question:hover { color: var(--hover); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease, opacity .35s ease; opacity: 0; }
.faq-answer-inner { overflow: hidden; color: #bcbcbc; font-size: 13px; line-height: 1.5; padding-right: 30px; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-item.is-open .faq-answer-inner { padding-bottom: 12px; }

.ascii-art { position: fixed; z-index: 1; right: -24px; bottom: -4px; margin: 0; color: #f7f7f7; font-size: calc(clamp(2px, .34vw, 5.5px) * var(--ascii-scale, 1)); line-height: .88; letter-spacing: 0; white-space: pre; opacity: .84; pointer-events: none; text-shadow: 0 0 8px rgba(255,255,255,.08); animation: ascii-drift 18s ease-in-out infinite; }
.ascii-logo { position: fixed; z-index: 3; top: 1.25rem; left: 2rem; margin: 0; color: #f7f7f7; font-size: calc(clamp(4px, .58vw, 8px) * var(--logo-scale, 1)); line-height: .95; letter-spacing: 0; white-space: pre; opacity: .86; pointer-events: none; text-shadow: 0 0 8px rgba(255,255,255,.06); }
.download-status { position: fixed; z-index: 5; left: 50%; bottom: 24px; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; border-top: 1px solid #555; padding-top: 7px; color: #aaa; font-size: 12px; white-space: nowrap; transition: opacity .25s ease, transform .25s ease; }
.download-status.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes ascii-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-8px, -7px, 0); } }
@media (max-width: 980px) {
  .homepage-content { width: 100%; min-width: 0; }
  .ascii-art { right: -20px; opacity: .42; font-size: calc(clamp(2px, .42vw, 5px) * var(--ascii-scale, 1)); }
    .ascii-logo { left: 1.25rem; top: 1rem; font-size: calc(clamp(3px, .78vw, 6px) * var(--logo-scale, 1)); opacity: .7; }
}

@media (max-width: 700px) {
  .main { align-items: flex-start; padding: 118px 20px 40px; }
  .date-time { top: 1.1rem; right: 1.1rem; font-size: 14px; }
  .homepage-content { transform: translateY(-44px); }
  .actions { margin-top: 30px; gap: 20px; }
  .ascii-button { font-size: 15px; }
  .faq-panel { margin-top: 22px; padding-left: 13px; padding-right: 13px; }
  .faq-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ascii-art { right: -12px; bottom: -4px; opacity: .24; font-size: calc(clamp(1.6px, .6vw, 4px) * var(--ascii-scale, 1)); }
  .download-status { max-width: calc(100vw - 30px); overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
}

@media (max-width: 400px) {
  .main { padding-left: 16px; padding-right: 16px; }
  .date-time { font-size: 12px; }
  .ascii-logo { left: .9rem; top: .85rem; font-size: calc(clamp(2.5px, 1vw, 5px) * var(--logo-scale, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}