:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, sans-serif;
  background: #102326;
  color: #f0f8f5;
  font-size: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100%, 88rem); margin: auto; padding: 1.2rem clamp(.75rem, 3vw, 2rem) 2rem; }
h1 { margin: 0; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.2; letter-spacing: -.045em; }
p { line-height: 1.6; }
.intro { margin: .25rem 0 .9rem; color: #bacfca; font-size: .85rem; }
.panel { padding: .7rem; background: #173236; border: 1px solid #345458; border-radius: .75rem; }
.files { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pick, button, .download { display: grid; place-items: center; min-height: 2.75rem; padding: .35rem .8rem; border-radius: .55rem; font: inherit; font-size: .9rem; font-weight: 700; }
.pick { position: relative; flex: 0 0 auto; color: #102326; background: #b1f7da; cursor: pointer; }
.pick:focus-within, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.pick:has(input:disabled) { opacity: .55; cursor: default; }
input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: inherit; }
#filename { flex: 1 1 10rem; min-width: 0; color: #bacfca; margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
#status { margin: .5rem 0 0; font-size: .86rem; overflow-wrap: anywhere; }
#progress[data-tone="error"] { color: #ffcbc2; }
progress { width: 100%; accent-color: #b1f7da; }
dl { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; max-width: 28rem; margin: .7rem 0 1rem; font-size: .92rem; }
dt { color: #bacfca; }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
button, .download { color: #eafff7; border: 1px solid #619387; background: #21464a; text-decoration: none; cursor: pointer; }
#cancel { margin-top: .5rem; }
.drawing { position: relative; margin-top: .75rem; height: max(52svh, calc(100svh - 15rem)); background: #091416; border: 1px solid #345458; border-radius: .75rem; overflow: hidden; }
#viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }
#viewport canvas { display: block; touch-action: none; }
.empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: #bacfca; pointer-events: none; text-align: center; }
.tools { position: absolute; right: .65rem; bottom: .65rem; display: flex; gap: .4rem; }
.tools button { min-width: 2.75rem; background: #173236; }
#warnings { padding-left: 1.3rem; color: #ffdcaa; font-size: .86rem; }
details { margin-top: .5rem; color: #bacfca; font-size: .86rem; }
summary { min-height: 2.75rem; line-height: 2.75rem; cursor: pointer; }
details a { color: #b1f7da; }
.source-links { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 34rem) {
  #filename { flex-basis: 100%; order: 2; }
}