:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #111111;
  background: #ffffff;
  font-size: 15px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; color: #111111; }
button { font: inherit; }
a { color: #0000ee; }
a:visited { color: #551a8b; }
:focus-visible { outline: 2px solid #0000ee; outline-offset: 2px; }

.skip-link { position: fixed; top: -48px; left: 12px; padding: 6px 10px; background: #ffffff; border: 1px solid #999999; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

.topbar { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #cccccc; background: #ffffff; }
.topbar-inner { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.brand { color: #111111; font-size: .95rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; }
[id] { scroll-margin-top: 52px; }
.desktop-nav { font-size: .88rem; }
.desktop-nav a { margin-right: 6px; }
.desktop-nav a:not(:last-child)::after { content: "·"; margin-left: 6px; color: #777777; }
.menu-toggle, .mobile-nav { display: none; }

main { padding: 16px 0 24px; }
section { margin: 0 0 20px; }
h1, h2, h3 { line-height: 1.25; }
h1 { margin: 0 0 4px; font-size: 29px; }
h2 { margin: 0 0 8px; font-size: 21px; }
h3 { margin: 0; font-size: 17px; }
p, li, td, th { line-height: 1.45; }
p { margin: 0 0 8px; }
.lead { max-width: 700px; }
.hero, .page-hero { border-bottom: 1px solid #cccccc; padding-bottom: 16px; }
.hero-grid, .page-hero .wrap { padding: 0; }
.hero-stage, .chapter-band { display: none; }

.release-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 6px; }
.release-row span:not([hidden]) ~ span:not([hidden])::before { content: "·"; margin-right: 8px; color: #777777; }
.release-row .button { margin-left: 4px; }
.quick-links { font-size: .88rem; }
.quick-links a:not(:last-child)::after { content: "·"; margin-left: 6px; color: #777777; }
.button { display: inline-block; padding: 5px 9px; border: 1px solid #999999; border-radius: 0; background: #f3f3f3; color: #111111; font-size: .9rem; text-decoration: none; }
.button:hover { background: #e8e8e8; }
.button-disabled, .button-disabled:hover { color: #555555; cursor: not-allowed; }

.section { border-bottom: 1px solid #cccccc; padding-bottom: 16px; }
.compact-list { margin: 0; padding-left: 20px; }
.compact-list li { margin: 0 0 4px; }
.compact-list li:last-child { margin-bottom: 0; }
.metadata { color: #555555; font-size: .9rem; }
.metadata span:not(:last-child)::after { content: "·"; margin-left: 6px; color: #777777; }
details { margin: 0 0 6px; }
summary { cursor: pointer; }
summary + p, summary + ul, summary + ol { margin-top: 6px; }

.download-layout { max-width: 900px; margin: 0 auto; padding: 16px 16px 0; }
.release-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .9rem; }
.release-table th, .release-table td { padding: 6px 8px; border: 1px solid #cccccc; text-align: left; vertical-align: middle; }
.release-table th { background: #f3f3f3; font-weight: 700; }
.release-table .button { white-space: nowrap; }
.notice { margin: 0 0 16px; color: #555555; font-size: .9rem; }
.download-notes { border-top: 1px solid #cccccc; padding-top: 16px; }
.download-notes h2 { margin-bottom: 4px; }
.download-notes ul { margin: 0; padding-left: 20px; }

.feedback-layout { max-width: 900px; margin: 0 auto; padding: 16px 16px 0; }
.feedback-layout form { max-width: 600px; }
.feedback-layout label { display: block; margin: 14px 0 4px; font-weight: 700; }
.feedback-layout input:not([type="file"]), .feedback-layout select, .feedback-layout textarea { display: block; width: 100%; padding: 7px 8px; border: 1px solid #999999; border-radius: 0; background: #ffffff; color: #111111; font: inherit; }
.feedback-layout textarea { resize: vertical; }
.feedback-layout input[type="file"] { display: block; max-width: 100%; }
.field-hint { margin-top: 4px; color: #555555; font-size: .85rem; }
.feedback-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.feedback-status { margin: 0; }
.feedback-verification { margin-top: 16px; padding-top: 4px; border-top: 1px solid #cccccc; }
.consent-dialog { width: min(520px, calc(100% - 32px)); border: 1px solid #777777; padding: 20px; color: #111111; background: #ffffff; }
.consent-dialog::backdrop { background: rgb(0 0 0 / .45); }
.consent-dialog h2 { margin-top: 0; }
.consent-choice { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; }
.consent-choice input { margin-top: 3px; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; }
.button:disabled { opacity: .55; cursor: not-allowed; }

.legal { max-width: 900px; margin: 0 auto; padding: 16px 16px 0; }
.legal .notice { padding: 6px 8px; border: 1px solid #cccccc; }
.legal section { border-bottom: 1px solid #cccccc; padding-bottom: 12px; margin-bottom: 16px; }
.legal h2 { margin-bottom: 4px; }

.footer { border-top: 1px solid #cccccc; padding: 12px 0; font-size: .85rem; }
.footer-top { margin-bottom: 8px; }
.footer-links a { margin-right: 6px; }
.footer-links a:not(:last-child)::after { content: "·"; margin-left: 6px; color: #777777; }
.footer-bottom { color: #555555; font-size: .8rem; }
.footer-bottom span + span::before { content: " · "; }

@media (max-width: 620px) {
  .topbar-inner { justify-content: space-between; min-height: 40px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-block; padding: 3px 7px; border: 1px solid #999999; border-radius: 0; background: #f3f3f3; color: #111111; font-size: .82rem; }
  .mobile-nav.is-open { display: block; padding: 0 16px 8px; }
  .mobile-nav a { display: block; margin: 5px 0; font-size: .88rem; }
  main { padding-top: 12px; }
  section { margin-bottom: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .release-row { display: block; margin: 10px 0 6px; }
  .release-row span { display: inline; }
  .release-row .button { display: inline-block; margin: 8px 0 0; }
  .release-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
