/* Typography, colours and dotted panels from ruby.sh. */
@font-face { font-family: Cherish; src: url('fonts/Cherish.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Basiic; src: url('fonts/basiic.woff2') format('woff2'); font-display: swap; }

:root {
  color-scheme: dark;
  --background: #241b30;
  --text: #f2f2e3;
  --link: #ff00f6;
  --hover: #b300ad;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 0 16px; background: var(--background); color: var(--text); font: 16px/1.5 Basiic, sans-serif; }
a, button { color: var(--link); }
a { text-decoration: none; }
a:hover, button:hover { color: var(--hover); }
button, input { font: inherit; }
button { border: 0; padding: 0; background: none; cursor: pointer; }
button:disabled { color: var(--text); opacity: .45; cursor: default; }
:focus-visible { outline: 2px dotted var(--link); outline-offset: 4px; }
h1, h2 { margin: 0; font-family: Cherish, sans-serif; font-weight: bold; }
h1 { padding: 24px 32px; font-size: clamp(64px, 12vw, 112px); line-height: 1.1; }
h2 { font-size: 24px; line-height: 1.35; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
.back { display: block; width: fit-content; margin: 24px auto; text-align: center; }
.masthead { display: flex; justify-content: center; margin-bottom: 24px; }
.panel { border: 2px dotted var(--text); }
main { max-width: 720px; margin: auto; padding: 16px; }
hr { width: 83.333%; margin: 24px auto; border: 0; border-top: 2px dotted var(--text); }
input[type=file] { display: block; width: 100%; margin: 8px 0 12px; }
input::file-selector-button { background: transparent; color: var(--link); border: 1px dotted var(--text); padding: 6px 10px; margin-right: 12px; cursor: pointer; font: inherit; }
fieldset { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.patch { display: flex; gap: 10px; margin-bottom: 16px; cursor: pointer; }
.patch input { flex: none; margin: 5px 0 0; width: 16px; height: 16px; accent-color: var(--link); }
#activity { margin-top: 20px; }
progress { display: block; width: 100%; accent-color: var(--link); }
#log { list-style: none; padding: 0; margin: 8px 0 0; max-height: 144px; overflow: auto; font-size: 14px; }
#download { margin-top: 16px; }
footer { text-align: center; padding: 24px 8px; }
@media (max-width: 480px) {
  h1 { padding: 20px 16px; }
  main { padding: 12px; }
}