@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root { --ink:#171714; --acid:#d8ff35; --paper:#ebe7dc; }
* { box-sizing:border-box; }
html,body { width:100%; min-width:320px; min-height:100%; margin:0; }
body { overflow:hidden; background:var(--ink); }

.bare-instrument { position:relative; width:100vw; height:100dvh; display:grid; place-items:center; overflow:hidden; }
.viewport { position:relative; width:min(100vw,100dvh); aspect-ratio:1; overflow:hidden; background:var(--paper); }
#splat-svg { display:block; width:100%; height:100%; shape-rendering:geometricPrecision; }

#seed-text {
  position:absolute;
  z-index:2;
  bottom:clamp(18px,4%,32px);
  left:50%;
  width:min(360px,calc(100% - 48px));
  margin:0;
  padding:10px 8px 11px;
  transform:translateX(-50%);
  border:0;
  border-bottom:1px solid rgba(23,23,20,.38);
  border-radius:0;
  outline:0;
  background:rgba(235,231,220,.62);
  color:var(--ink);
  caret-color:var(--ink);
  font:400 clamp(14px,1.4vw,17px)/1.15 "DM Mono",monospace;
  letter-spacing:.04em;
  text-align:center;
  -webkit-backdrop-filter:blur(9px) saturate(.75);
  backdrop-filter:blur(9px) saturate(.75);
  transition:background-color 160ms ease,border-color 160ms ease;
}
#seed-text:focus { border-bottom-color:var(--ink); background:rgba(235,231,220,.82); }
#seed-text::selection { background:var(--ink); color:var(--paper); }

@media (max-width:600px) {
  #seed-text { bottom:14px; width:calc(100% - 32px); padding:9px 6px 10px; }
}