/* 21.9 P13 — your page as a gallery. */
body.gallery { margin: 0; background: #000; color: #e6e6e6; overflow: hidden; font-family: ui-monospace, Menlo, monospace; }
#field { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.g-top { position: fixed; top: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 16px 0; z-index: 2; }
.g-brand { letter-spacing: .18em; font-size: 16px; color: #9fd4ec; }
.g-dim { color: #8a8a8a; }
.g-enter { color: #ffb000; border: 1px solid #ffb000; padding: 6px 12px; text-decoration: none; font-weight: bold; min-height: 24px; }
.g-enter[hidden] { display: none; }
.g-title { position: fixed; top: 64px; inset-inline: 0; text-align: center; letter-spacing: .2em; color: #9fd4ec; z-index: 2; padding: 0 16px; }
.g-menu { position: fixed; left: 0; right: 0; bottom: 0; max-height: 38vh; overflow-y: auto; z-index: 2; background: linear-gradient(transparent, rgba(0,0,0,.85) 18%); padding: 24px 0 16px; }
.g-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: #e6e6e6; font: inherit; font-size: 13px; min-height: 24px; padding: 4px 16px; cursor: pointer; }
.g-menu button.is-head { color: #8a8a8a; }
.g-menu button.is-on { color: #9fd4ec; }
@media (min-width: 900px) { .g-menu { left: auto; right: 0; top: 96px; bottom: auto; width: 320px; max-height: calc(100vh - 120px); background: rgba(0,0,0,.6); } }