@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');
@font-face {
  font-family: 'Final Fantasy Display';
  src: url('assets/fonts/final-fantasy-display.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* Original site typography, with an upright Final Fantasy-style display face for titles. */
:root {
  --bg: #080e1d;
  --panel: #12264a;
  --ink: #f7f5e9;
  --muted: #c0cbe0;
  --gold: #f0d38d;
  --line: #91a9d34a;
  --sans: Manrope, Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --menu-border: #96a9c7;
  --menu-fill: linear-gradient(135deg, #203b69f5, #102548f5 55%, #0b1933fa);
  --menu-shadow: inset 0 0 0 2px #0b142c, inset 0 0 0 3px #b5c6e72e, 0 12px 35px #02061455;
}
body {
  font-size: 15px;
  line-height: 1.8;
  background: radial-gradient(ellipse at 100% 20%, #18315455, transparent 50%),
    linear-gradient(180deg, #0b152a, #080e1d 60%);
  text-shadow: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: var(--sans); }
h1, h2, h3 { font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(42px, 5.8vw, 76px); }
h2 { font-size: clamp(30px, 3.5vw, 44px); }
h3 { font-size: 25px; }
p { color: var(--muted); }
::selection { background: #f0d38d; color: #0b1933; text-shadow: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; color: var(--gold); }
.site-header, .site-header.inner {
  background: linear-gradient(180deg, #111f39ef, #0c1729eb);
  border-bottom: 1px solid #b0bfd582;
  box-shadow: 0 3px 0 #091021, 0 4px 0 #7590b52c;
}
.header-row { gap: 22px; }
.brand-icon { width: 50px; height: 50px; filter: drop-shadow(0 2px 4px #000); }
.brand-name { font-size: 25px; font-weight: 600; letter-spacing: -.035em; color: #fff6d5; }
.brand small { color: #d1dcf2; font-size: 8px; letter-spacing: .2em; margin-top: 4px; }
nav { gap: 23px; }
nav a { font-size: 12px; color: #e0e7f6; font-weight: 600; }
nav a[aria-current=page] { color: #ffe49b; }
nav a[aria-current=page]:after { background: #ffe49b; height: 2px; bottom: -33px; box-shadow: 0 0 8px #f1d59188; }
.header-status { font-size: 11px; }
.header-cta { font-size: 10px; }
.btn {
  border: 1px solid #f3dda7;
  border-radius: 5px;
  background: linear-gradient(#f5dfa7, #d8b36e);
  color: #19243b;
  box-shadow: inset 0 0 0 2px #886d3040, 0 3px 8px #0005;
  font-size: 11px;
  letter-spacing: .075em;
  text-shadow: 0 1px #fff6;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { background: linear-gradient(#fff0c5, #e9c779); transform: none; box-shadow: inset 0 0 0 2px #886d3040, 0 0 20px #e3c88722; }
.btn.ghost { color: var(--ink); border-color: #a5b7d4; background: linear-gradient(#213e6c, #122645); text-shadow: 0 1px 2px #000; box-shadow: var(--menu-shadow); }
.btn.ghost:hover { background: linear-gradient(#2d4d80, #1a345d); color: var(--gold); border-color: #f0d38d; }
.hero { min-height: 770px; height: min(910px, 96vh); border-bottom: 1px solid #9ab0d269; }
.hero:before { background: linear-gradient(90deg, #06112582, #09162c22 65%), linear-gradient(0deg, #080e1d, transparent 26%, #08102033); }
.hero:after { opacity: .07; }
.hero-content { padding-top: 175px; }
.hero-message {
  position: relative;
  max-width: 650px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.hero-message:before { content: none; }
.hero h1 { font-size: clamp(46px, 5.1vw, 68px); margin: 21px 0 22px; max-width: 600px; line-height: 1.06; text-shadow: 0 2px 12px #000a; }
.hero h1 em { display: inline; font-family: inherit; font-style: normal; font-weight: 400; color: #f6dda2; }
.hero .intro { font-size: 15px; line-height: 1.85; color: #e0e8f6; }
.hero-actions { margin-top: 26px; gap: 21px; }
.play { font-size: 12px; font-weight: 600; }
.play span, .icon-btn { background: linear-gradient(#27446dcc, #102646dd); border-color: #bac9e1a3; box-shadow: inset 0 0 0 2px #071329; }
.play:hover, .icon-btn:hover { color: var(--gold); }
.hero-bottom { bottom: 32px; }
.hero-bottom .caption { font-size: 11px; color: #d0d9e9; margin-top: 4px; }
.vertical-note { color: #e1e8f8; font-size: 10px; letter-spacing: .18em; }
.section { padding-block: 80px; }
.section-alt { background: linear-gradient(110deg, #172b4a88, #0b192c88); border-block-color: #91a9d338; }
.homepage-facts, .steps-preview, .status-panel, .contact-panel, .contact-rules, .modal {
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--menu-fill);
  box-shadow: var(--menu-shadow);
}
.homepage-facts { max-width: 1160px; padding: 32px 38px; }
.homepage-facts .eyebrow { font-size: 13px; }
.homepage-facts .fact-table { border-top-color: #a6b8d754; gap: 0 38px; }
.fact { padding: 18px 0; font-size: 13px; border-bottom-color: #91a9d333; }
.fact strong { font-weight: 600; }
.fact span { color: #bfcee7; }
.source-note { font-size: 11px !important; color: #b2c1da; }
.path-grid { gap: 70px; }
.path-grid .getting-started-description { font-size: 16px; line-height: 1.85; color: #d2ddf0; max-width: 520px; }
.steps-preview { padding: 5px 25px; }
.step-preview { gap: 14px; padding-block: 23px; position: relative; }
.step-preview:last-child { border-bottom: 0; }
.step-preview:hover { color: #ffe6a2; }
.step-preview>span { font-size: 21px; font-weight: 700; color: #c4d5f1; }
.step-preview h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.step-preview p { font-size: 12px; color: #bdcce5; }
.step-preview:hover>span { color: var(--gold); }
.callout { padding-block: 65px; }
.callout .eyebrow { font-size: 12px; }
.footer { background: #070e1c; border-top-color: #829abd4d; padding-block: 35px; font-size: 11px; }
.footer .legal { font-size: 10px; color: #a7b5cd; line-height: 1.8; }
.footer-links { gap: 18px; }
.page-heading { background: linear-gradient(120deg, #1d3557b0, #0b172900), radial-gradient(ellipse at 95% 0, #31527d55, transparent 65%); border-bottom-color: #8da4c444; }
.page-heading h1 { font-size: clamp(36px, 4.8vw, 58px); }
.page-heading p { font-size: 15px; max-width: 690px; }
.breadcrumb { font-size: 12px; color: #bccbe1; }
.compact-heading h1.eyebrow { font: 700 14px/1.7 var(--sans); letter-spacing: .16em; margin: 0 0 18px; }
.support-heading .support-description { max-width: 900px; }
.support-description a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.status-heading h1.eyebrow, .about-intro .about-intro-title { font-family: var(--sans); font-size: 14px; }
.status-panel { padding: 38px 44px; }
.service-status-list { margin-top: 27px; }
.service-status-row { padding: 21px 0; border-color: #91a9d333; }
.service-name { font-size: 15px; font-weight: 600; }
.service-state { font-size: 14px; }
.status-legend { font-size: 12px; }
.guide-layout { gap: 50px; }
.guide-nav { background: var(--menu-fill); border: 1px solid var(--menu-border); border-radius: 7px; box-shadow: var(--menu-shadow); padding: 22px 20px; font-size: 12px; }
.guide-nav .eyebrow { font-size: 10px; }
.guide-nav a { padding: 12px 0; }
.guide-nav a:hover { color: #ffe6a2; background: #6e94d312; }
.guide-step h2 { font-size: clamp(29px, 3vw, 38px); margin-top: 13px; }
.guide-step h3 { font-size: 25px; }
.guide-step p, .guide-step li, #account li, .runtime-links li { font-size: 14px; }
.notice { font-size: 13px; background: linear-gradient(105deg, #29436c66, #1b2f4c55); border-left-color: #f0d38d; border-radius: 0 5px 5px 0; color: #d2dcef; }
.setup-table { font-size: 13px; }
.setup-table th { font-size: 12px; }
code, .codebox pre, #report-preview { font-family: Consolas, monospace; font-size: 13px; letter-spacing: .02em; }
.codebox, #report-preview { background: #071127; border: 1px solid #7e98bd66; border-radius: 5px; }
.guide-shot { background: #0a1428; border-color: #8099bd66; border-radius: 6px; }
.guide-shot figcaption { font-size: 12px; color: #bac8e0; }
.guide-shot img { border-radius: 2px; }
.search, #bug-form input, #bug-form select, #bug-form textarea { font-family: var(--sans); font-size: 15px; background: #09162d; color: #f4f6ff; border: 1px solid #859cc27a; border-radius: 4px; box-shadow: inset 0 2px 5px #0004; text-shadow: none; }
.search::placeholder, #bug-form input::placeholder, #bug-form textarea::placeholder { color: #a6b8d5; opacity: 1; }
.filter { font-size: 12px; border-radius: 4px; background: #152c4e; color: #d1def2; border-color: #829abd66; }
.filter.active { background: linear-gradient(#edd69e, #ceab67); color: #15213b; text-shadow: none; }
.faq-count { font-size: 12px; }
details { padding: 23px 22px; border: 1px solid #7f99bf55; border-radius: 5px; background: linear-gradient(110deg, #18345780, #101f3980); margin-bottom: 10px; }
summary { font-size: 16px; font-weight: 600; }
details[open] { border-color: #aebfd78a; background: var(--menu-fill); }
details p { font-size: 14px; }
.about-statement { font-size: 14px; line-height: 1.8; letter-spacing: .06em; color: #f0d38d; }
.about-grid p { font-size: 15px; }
.contact-panel, .contact-rules { padding: 30px; }
.contact-rules h2 { font-size: 27px; }
.contact-panel p, .contact-rules p { font-size: 14px; }
.support-layout { gap: 50px; }
.support-aside { border: 1px solid #8da4c477; border-radius: 7px; background: var(--menu-fill); box-shadow: var(--menu-shadow); padding: 26px; }
.support-aside li, .support-aside p { font-size: 13px; }
#bug-form label { font-size: 14px; color: #e5ecf7; }
.modal { padding: 25px; }
.modal-head h3 { font-size: 26px; }
.modal-close { background: #152c4e; border-color: #9bb0cf; border-radius: 4px; font-size: 13px; }
.modal::backdrop { background: #020817df; backdrop-filter: blur(6px); }
.clip-choice { border-color: #7f99bf66; border-radius: 4px; overflow: hidden; background: #0f2141; }
.clip-choice span { font-size: 12px; }
.clip-choice:hover { border-color: #d3dff2; }
.clip-choice.active { background: #304c70; border-color: #f0d38d; box-shadow: inset 0 0 0 1px #f0d38d55; }
#clip-caption { font-size: 13px; }
.toast { border: 1px solid #c8d6eb; border-radius: 5px; background: var(--menu-fill); color: var(--ink); }
.menu-toggle { border-color: #9bb0cf88; border-radius: 4px; background: #1c365b; }
@media(min-width:1500px) { .hero-content { padding-top: 190px; } }
@media(max-width:1200px) { .header-row { gap: 16px; } nav { gap: 18px; } .header-cta { display: none; } }
@media(max-width:900px) { nav { background: linear-gradient(#1b3154, #101e37); border-bottom: 1px solid #a2b7d2; } .hero-message { max-width: 620px; } .path-grid { gap: 35px; } .support-aside { position: static; } }
@media(max-width:700px) {
  body { font-size: 14px; }
  .brand-name { font-size: 22px; }
  .hero { height: auto; min-height: 790px; }
  .hero-content { padding-top: 136px; padding-bottom: 150px; }
  .hero-message { padding: 0; }
  .hero h1 { font-size: clamp(37px, 8.8vw, 55px); margin-top: 18px; line-height: 1.1; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .hero .intro { font-size: 14px; max-width: none; }
  .hero-actions { gap: 20px; flex-wrap: wrap; }
  .hero-actions .btn { padding: 13px 16px; gap: 15px; font-size: 10px; }
  .hero-bottom { bottom: 28px; gap: 15px; }
  .hero-bottom .caption { font-size: 10px; max-width: 210px; }
  .hero-bottom .eyebrow { font-size: 9px; }
  .media-controls>a { display: none; }
  .section { padding-block: 55px; }
  .homepage-facts { margin-inline: 22px; padding: 25px 22px; }
  .homepage-facts .fact { font-size: 12px; gap: 18px; }
  .fact strong { max-width: 59%; }
  .steps-preview { padding-inline: 20px; }
  .path-grid .getting-started-description { font-size: 15px; }
  .page-heading h1 { font-size: 36px; }
  .guide-nav { padding: 16px 18px; gap: 0 18px; }
  .guide-nav a { font-size: 12px; }
  .guide-step h2 { font-size: 29px; }
  .guide-shot figcaption { font-size: 11px; }
  .status-panel { padding: 25px 22px; }
  .service-name { font-size: 13px; }
  .service-state { font-size: 13px; }
  .support-layout { gap: 30px; }
  .support-aside, .contact-panel, .contact-rules { padding: 24px; }
  .about-statement { font-size: 13px; }
  details { padding: 18px 16px; }
  summary { font-size: 15px; }
  .footer-links { white-space: normal; flex-wrap: wrap; gap: 12px 20px; }
  .clip-library { grid-template-columns: repeat(2, 1fr); }
  .clip-choice img { height: 55px; }
  .clip-choice span { font-size: 11px; }
  .modal { padding: 18px; }
  .modal-head h3 { font-size: 22px; }
  .modal video { max-height: 33dvh; }
}
@media(max-width:450px) {
  .brand-icon { width: 37px; height: 42px; }
  .brand-name { font-size: 20px; }
  .brand small { font-size: 6px; letter-spacing: .12em; }
  .header-status { font-size: 10px; gap: 6px; }
  .header-row { gap: 9px; }
  .hero .eyebrow { font-size: 8px; }
  .hero-message { padding-inline: 0; }
}

/* The original wording remains real text; display capitals match the logo style. */
.hero h1, .page-heading h1:not(.eyebrow) {
  font-family: 'Final Fantasy Display', var(--serif);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .035em;
  font-synthesis: none;
}
.hero h1 { font-size: clamp(76px, 7.8vw, 106px); line-height: 1.02; max-width: 720px; }
.page-heading h1:not(.eyebrow) { font-size: clamp(65px, 7vw, 90px); line-height: 1.08; }
@media(max-width:700px) {
  .hero h1 { font-size: clamp(59px, 14.5vw, 88px); line-height: 1.06; }
  .page-heading h1:not(.eyebrow) { font-size: clamp(54px, 12vw, 75px); }
}