:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e8e6df; background: #191c20; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; grid-template-rows: 42px minmax(0, 1fr); }
.toolbar { display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #202328; border-bottom: 1px solid #393b3b; font-size: 11px; user-select: none; }
.identity { display: flex; align-items: center; gap: 8px; color: #edc373; white-space: nowrap; }
.identity svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.identity .nodes { fill: #202328; }
.identity strong { font-size: 12px; letter-spacing: 1px; }
.subtitle { color: #a3a49e; font-size: 9px; letter-spacing: 1.6px; }
.dimensions { margin-left: auto; color: #92958f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zoom { min-width: 36px; text-align: right; color: #d8c8a8; font-variant-numeric: tabular-nums; }
button { border: 1px solid #665a40; border-radius: 4px; padding: 4px 10px; color: #edc373; background: #30302a; font: inherit; cursor: pointer; }
button:hover { background: #45402f; }
button:focus-visible { outline: 2px solid #edc373; outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; }
main { position: relative; overflow: hidden; cursor: grab; touch-action: none; background-image: radial-gradient(#43433d 0.7px, transparent 0.7px); background-size: 16px 16px; }
main.dragging { cursor: grabbing; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#image { display: block; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; background: repeating-conic-gradient(#f2f1ec 0 25%, #faf9f5 0 50%) 50% / 16px 16px; }
#image:not([src]) { display: none; }
#status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #bdb8a9; text-align: center; font-size: 13px; }
#status.hidden { display: none; }
@media (max-width: 480px), (max-height: 260px) {
  body { grid-template-rows: 30px minmax(0, 1fr); }
  .toolbar { padding: 0 7px; gap: 8px; }
  .subtitle, .dimensions { display: none; }
  .identity svg { width: 18px; height: 18px; }
  .zoom { margin-left: auto; }
  button { padding: 2px 7px; }
  #status { padding: 8px; font-size: 12px; }
}
@media (max-width: 160px) {
  .identity svg, .zoom { display: none; }
  button { margin-left: auto; }
}