@font-face { font-family: 'ABC Areal Mono'; src: url('./fonts/ABCArealMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root { font-family: 'ABC Areal Mono', monospace; font-size: 100%; color: #000; background: #fff; color-scheme: light; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; font-size: .75rem; line-height: 1.6; }
h1,h2,h3,p,button,input,textarea,a { font: inherit; color: inherit; }
h1,h2,h3 { font-weight: 400; }
button,a,input,textarea { -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; }
button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; min-height: 2.75rem; text-align: left; }
button:hover,a:hover { text-decoration: underline; text-underline-offset: .25rem; }
button:disabled { cursor: wait; opacity: .5; }
:focus-visible { outline: 1px solid #000; outline-offset: .35rem; }
[hidden] { display: none !important; }
header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; padding: 2rem 2.5rem; gap: 2rem; }
header a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.activity { margin: .75rem 0 0; text-align: right; }
.activity time { display: block; }
footer { position: relative; z-index: 2; display: flex; gap: 2rem; padding: 1rem 2.5rem; }
body[data-page=collection] { display: flex; flex-direction: column; }
.space-main { flex: 1; position: relative; min-height: 40rem; height: calc(100svh - 12rem); }
.invitation { position: absolute; left: 12%; top: 2%; z-index: 1; pointer-events: none; }
.invitation p { margin: 0 0 1.5rem; }
#space { position: absolute; inset: 7% 6% 22%; }
.room { position: absolute; inset: 13% 8% 10%; opacity: .18; pointer-events: none; }
.room svg { width: 100%; height: 100%; overflow: visible; }
.room path { fill: none; stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
#particles { position: absolute; inset: 0; overflow: hidden; }
.particle { position: absolute; top: 0; left: 0; margin: 0; padding: 0; min-height: 0; line-height: 1.2; white-space: pre; cursor: pointer; will-change: transform; font-size: .75rem; }
.particle:hover { z-index: 4; background: #fff; opacity: 1 !important; }
.redaction { display: inline-block; height: .88em; max-width: 100%; background: #000; vertical-align: baseline; user-select: none; }
.space-status { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; }
.space-status p { white-space: pre-line; }
.space-status button { pointer-events: auto; }
.collection-tools { position: absolute; left: 12%; bottom: 15%; display: flex; gap: 2rem; z-index: 2; }
.entry-point { position: absolute; right: 12%; bottom: 1%; z-index: 2; }
.entry-point p { margin: .75rem 0; }
.primary-action { display: inline-flex; min-height: 2.75rem; align-items: center; border-bottom: 1px solid #000; }
#reading { position: absolute; z-index: 5; right: 8%; top: 8%; width: min(32rem, 84%); max-height: 78%; overflow: auto; padding: 1.25rem 1.75rem; border: 1px solid #000; background: #fff; }
#reading-close { float: right; }
#reading-label { margin-bottom: 2rem; }
.public-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
#reading .public-copy { clear: both; }
.submission-main { width: min(34rem, calc(100% - 3rem)); margin: 4rem auto 7rem; min-height: 27rem; }
.submission-main h1,.submission-main h2 { margin: 0 0 2rem; }
.form-intro { margin-bottom: 2.5rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.outcome-options { display: flex; gap: 2rem; margin-bottom: 2rem; }
.outcome-options button[aria-pressed=true] { text-decoration: underline; text-underline-offset: .4rem; }
label { display: block; margin-bottom: .75rem; }
textarea,input { border: 1px solid #000; border-radius: 0; background: #fff; padding: .75rem; }
textarea { display: block; width: 100%; min-height: 12rem; resize: vertical; }
textarea::placeholder,input::placeholder { color: #000; opacity: .55; }
.days-line { display: flex; align-items: center; gap: 1rem; }
#days { width: 9rem; min-height: 2.75rem; }
#processing-note { margin: 2rem 0 1rem; }
#processing-note button { display: inline; min-height: auto; text-decoration: underline; }
#error:empty,#form-status:empty,#confirm-error:empty { display: none; }
#error,#confirm-error { border-left: .2rem solid #000; padding-left: .75rem; margin-top: 1.5rem; }
#preview-text { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 1.5rem 0; margin-bottom: 2rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-top: 2rem; }
dialog { color: #000; background: #fff; width: min(36rem, calc(100% - 2rem)); max-height: 85svh; border: 1px solid #000; padding: 1.5rem 2rem 2rem; }
dialog::backdrop { background: rgb(255 255 255 / 93%); }
dialog h2 { margin: 4rem 0 2rem; }
dialog p { margin: 1.5rem 0 0; }
.close { float: right; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  header { padding: 1rem 1.25rem; gap: 1rem; }
  .activity { max-width: 12rem; }
  footer { padding: 1rem 1.25rem; gap: 1.5rem; }
  .space-main { height: calc(100svh - 10rem); min-height: 36rem; }
  .invitation { left: 7%; top: 2%; }
  #space { inset: 17% 2% 31%; }
  .room { inset: 8% 2%; }
  .collection-tools { left: 7%; bottom: 24%; gap: 1.5rem; }
  .entry-point { left: 7%; right: 7%; bottom: 1%; }
  .entry-point p:last-child { max-width: 30ch; }
  .submission-main { margin-top: 2.5rem; }
  #reading { top: 4%; right: 4%; width: 92%; max-height: 90%; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }