:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101519;
  color: #f2f7f5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100% - 2rem, 32rem); margin: clamp(2rem, 9vh, 6rem) auto; }
header { margin-bottom: 2rem; }
h1 { font-size: clamp(3rem, 12vw, 5rem); margin: 0; letter-spacing: -.07em; }
h2 { margin: .4rem 0 1.2rem; overflow-wrap: anywhere; }
p { color: #b6c7c5; }
.eyebrow { color: #9ce6c5; font-size: .78rem; font-weight: 700; letter-spacing: .11em; }
form, section { background: #1b252b; border: 1px solid #34444b; border-radius: 1rem; }
form, .details { padding: 1.15rem; }
label { display: block; margin-bottom: .65rem; font-weight: 600; }
input, button { width: 100%; min-height: 3rem; border-radius: .65rem; font: inherit; }
input { padding: .65rem; color: inherit; background: #101519; border: 1px solid #738982; }
button { background: #9ce6c5; color: #10231b; border: 0; font-weight: 750; cursor: pointer; }
#process { margin-top: .8rem; }
.url-field { position: relative; }
.url-field input { padding-right: 4.75rem; }
#clear-url, #paste-url {
  position: absolute;
  inset: 0 0 0 auto;
  width: 3rem;
  background: transparent;
  color: inherit;
}
#clear-url { font-size: 1.6rem; }
#paste-url { width: 4.5rem; color: #9ce6c5; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid #f2f7f5; outline-offset: 3px; }
.activity { display: flex; align-items: center; gap: .65rem; margin: 1em 0; }
#status { min-height: 1.5em; margin: 0; }
#loader {
  flex: 0 0 1.1rem;
  height: 1.1rem;
  border: 2px solid #738982;
  border-top-color: #9ce6c5;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #loader { animation: none; }
}
#status.error { color: #ffb4ab; }
section { overflow: hidden; }
img { display: block; width: 100%; max-height: 18rem; object-fit: contain; background: #101519; }