/* The desk, the folder on it, the pages inside, the screen of documents to pick from, and the controls.
   Everything on the desk is drawn at a fixed size (the folder body is 620 x 900, pages 560 x 820) and app.js moves one
   camera over it, so a page holds exactly the same text on every screen. The wood, the keyboard and the paper grain
   are drawn once by app.js (--wood, --kbd, --grain). Editing has its own stylesheet, editor.css. */

:root {
  --paper: #ebe7da;
  --ink: #1b1b1b;
  --red: #c8232a;
  --open: 1.05s;      /* how long the cover takes to swing open (app.js waits the same) */
  --close: .95s;
  --hud-font: Bahnschrift, "DIN Alternate", "DIN 2014", "Roboto Condensed", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #000; color: #fff; overflow: hidden; overscroll-behavior: none; }
body { font: 15px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
.nojs { position: fixed; inset: auto 0 12% 0; margin: 0; text-align: center; color: #bbb; z-index: 9; }

/* ---------- the view ---------- */
/* One perspective for the whole scene. #cam is the camera: app.js tilts, turns, moves and scales it every frame. */
#stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; background: #000; perspective: 2000px; perspective-origin: 50% 46%; }
#cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 72% 68% at 50% 46%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .62) 100%);
}

/* ---------- the desk and what is lying on it ---------- */
#table {
  position: absolute; left: -2200px; top: -1600px; width: 4400px; height: 3200px; transform: translateZ(-3px);
  background:
    radial-gradient(ellipse 2000px 1450px at 50% 50%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, .92) 100%),          /* it falls away into the dark */
    radial-gradient(ellipse 1150px 860px at 50% 45%, rgba(255, 212, 160, .11), rgba(255, 212, 160, 0) 70%),     /* the lamp */
    var(--wood, linear-gradient(#2c241f, #2c241f));
  background-size: auto, auto, 1024px 512px;
  background-color: #2c241f;
}
#table > * { position: absolute; }
/* a keyboard, top left, half out of the light */
.kbd {
  left: calc(50% - 1470px); top: calc(50% - 760px); width: 730px; height: 312px; border-radius: 18px; transform: rotate(-13deg);
  background: var(--kbd, #15181c) center / 100% 100% no-repeat;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .7), 0 4px 8px rgba(0, 0, 0, .5);
}
/* other folders, at the right; the one being read comes off the top of this pile */
.pile { left: calc(50% + 690px); top: calc(50% - 480px); width: 676px; height: 900px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)); }
.pile i {
  position: absolute; inset: 0;
  clip-path: path("M10 0H531Q541 0 541 10V28Q541 38 551 38H660Q676 38 676 54V290Q676 306 660 306H636Q620 306 620 322V890Q620 900 610 900H10Q0 900 0 890V10Q0 0 10 0Z");
  background: var(--grain, none), linear-gradient(135deg, #bda27a, #a2885f);
}
.pile i:nth-child(1) { transform: rotate(19deg) translate(60px, 40px); filter: brightness(.66); }
.pile i:nth-child(2) { transform: rotate(6deg) translate(18px, 16px); filter: brightness(.8); }
.pile i:nth-child(3) { transform: rotate(11deg); filter: brightness(.92); }
/* a small radio, top right, its lights still on */
.radio {
  left: calc(50% + 470px); top: calc(50% - 770px); width: 150px; height: 250px; border-radius: 26px 26px 20px 20px; transform: rotate(22deg);
  background: linear-gradient(160deg, #24272c, #121417 70%); box-shadow: 0 0 0 2px #0a0b0d, 10px 16px 26px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .06);
}
.radio::before {   /* its aerial */
  content: ''; position: absolute; left: 22px; top: -120px; width: 14px; height: 130px; border-radius: 7px;
  background: linear-gradient(90deg, #0d0e10, #2a2d32 50%, #0d0e10); box-shadow: 4px 6px 10px rgba(0, 0, 0, .6);
}
.radio .grille {
  position: absolute; left: 22px; right: 22px; top: 100px; bottom: 26px; border-radius: 10px;
  background: repeating-linear-gradient(180deg, #0b0c0e 0 6px, #1d2024 6px 11px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.radio .led { position: absolute; top: 34px; width: 16px; height: 16px; border-radius: 50%; }
.radio .led.a { left: 34px; background: #b46cff; box-shadow: 0 0 10px 3px rgba(180, 108, 255, .75), 0 0 34px 10px rgba(150, 80, 255, .35); }
.radio .led.b { left: 66px; background: #5ab0ff; box-shadow: 0 0 10px 3px rgba(90, 176, 255, .7), 0 0 30px 8px rgba(70, 150, 255, .3); }

/* ---------- the folder ---------- */
/* #rig carries the folder across the desk: it waits on the pile (.away) and slides to the middle when it is picked. */
#rig { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .75, .2, 1); }
#rig.away { transform: translate3d(1028px, -30px, 6px) rotate(11deg); }
#folder {
  position: absolute; left: -338px; top: -450px; width: 676px; height: 900px;
  transform-style: preserve-3d; transition: transform var(--open) cubic-bezier(.3, .6, .2, 1);
  -webkit-user-select: none; user-select: none;
}
#folder.open { transform: translateX(310px); }
body.editing #folder.showing { -webkit-user-select: text; user-select: text; }

/* (soft dark shapes rather than box-shadows: in the middle of a 3D turn Chrome paints a box-shadow solid inside its box) */
.fsh {
  position: absolute; top: 10px; height: 896px; border-radius: 18px; background: rgba(0, 0, 0, .66); filter: blur(20px);
  transform: translateZ(-2px); pointer-events: none;
}
.body-sh { left: 6px; width: 646px; }
.cover-sh { left: -614px; width: 610px; opacity: 0; }
#folder.open .cover-sh { opacity: 1; }
#folder.opening .cover-sh { animation: cover-sh var(--open) both; }
#folder.closing .cover-sh { animation: cover-sh var(--close) both reverse; }
@keyframes cover-sh { 0%, 40% { opacity: 0; } 83%, 100% { opacity: 1; } }
.panel.back { position: absolute; left: 0; top: 0; width: 676px; height: 900px; }
.cover { position: absolute; left: 0; top: 0; width: 620px; height: 900px; transform-origin: 0 50%; transform-style: preserve-3d; }
#folder.open .cover { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.in { transform: rotateY(180deg); }
.face.out { cursor: pointer; outline: none; }
.face.out:focus-visible .edge path { stroke: #7fb2ff; stroke-width: 5; }

.shape {
  position: absolute; inset: 0;
  background: var(--grain, none), radial-gradient(130% 100% at 28% 16%, #c2a67d 0%, #b29770 42%, #9e845b 100%);
}
.back .shape, .cast { clip-path: path("M10 0H531Q541 0 541 10V28Q541 38 551 38H660Q676 38 676 54V290Q676 306 660 306H636Q620 306 620 322V890Q620 900 610 900H10Q0 900 0 890V10Q0 0 10 0Z"); }
.face.out .shape { clip-path: path("M10 0H531Q541 0 541 10V28Q541 38 551 38H610Q620 38 620 48V890Q620 900 610 900H10Q0 900 0 890V10Q0 0 10 0Z"); }
.face.in .shape {
  clip-path: path("M610 0H89Q79 0 79 10V28Q79 38 69 38H10Q0 38 0 48V890Q0 900 10 900H610Q620 900 620 890V10Q620 0 610 0Z");
  background: var(--grain, none), radial-gradient(130% 100% at 72% 16%, #bda179 0%, #af946c 42%, #9b8159 100%);
}
.face.out:hover .shape { filter: brightness(1.05); }
.edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.edge path { fill: none; stroke: rgba(58, 38, 12, .6); stroke-width: 2; }

/* the crease down the middle of the open folder */
.panel.back::after, .face.in::after { content: ''; position: absolute; top: 0; bottom: 0; width: 46px; pointer-events: none; z-index: 2; }
.panel.back::after { left: 0; background: linear-gradient(90deg, rgba(40, 24, 6, .44), rgba(40, 24, 6, 0)); }
.face.in::after { right: 0; background: linear-gradient(270deg, rgba(40, 24, 6, .44), rgba(40, 24, 6, 0)); }
/* the shadow the cover throws across the right-hand page while it is in the air */
.cast { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .32) 62%, rgba(0, 0, 0, .12)); }

/* the word on the front */
.stamp {
  position: absolute; left: 34px; top: 262px; min-width: 40px; min-height: 62px; white-space: pre;
  font: 900 62px/1 "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: 1px;
  color: var(--red); opacity: .93; text-shadow: 0 0 1.5px rgba(150, 10, 16, .55);
}
/* a steel paperclip over the top edge, next to the spine: a dark wire, its lit side, and a thin glint */
.clip { position: absolute; top: -50px; width: 42px; height: 126px; overflow: visible; pointer-events: none; z-index: 3; filter: drop-shadow(1.5px 3px 1.4px rgba(0, 0, 0, .5)); }
.clip path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.clip .w1 { stroke: #3f444a; stroke-width: 3; }
.clip .w2 { stroke: #9aa1a8; stroke-width: 2; }
.clip .w3 { stroke: rgba(255, 255, 255, .9); stroke-width: .7; transform: translate(-.5px, -.4px); }
.face.out .clip { left: 26px; transform: rotate(-4deg); }
.face.in .clip { right: 26px; transform: rotate(4deg) scaleX(-1); }
/* the label on the tab: the folder's name, read sideways */
.tab-label {
  position: absolute; left: 632px; top: 58px; width: 30px; height: 210px; overflow: hidden; z-index: 1;
  background: linear-gradient(90deg, #e6e2d6, #f8f6f0 45%, #e9e5da); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(60, 48, 30, .28), 1px 2px 3px rgba(0, 0, 0, .35);
  writing-mode: vertical-rl; white-space: pre; text-align: center;
  font: 700 18px/30px "Courier New", Courier, "Liberation Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #1c1c1c;
}

/* ---------- the pages ---------- */
.sheet, .under { position: absolute; top: 50px; width: 560px; height: 820px; }
.back .sheet, .back .under { left: 26px; }
.face.in .sheet, .face.in .under { left: 34px; }
.under { background: #d9d4c6; box-shadow: 0 0 0 1px rgba(40, 32, 20, .4), 0 2px 4px rgba(30, 18, 4, .4); transform: rotate(.7deg); }
.face.in .under { transform: rotate(-.6deg); }
.sheet {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1.5px rgba(38, 30, 20, .62), 0 2px 3px rgba(30, 18, 4, .35), 0 10px 18px rgba(40, 25, 5, .2);
  font: 15px/21px "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", "Cutive Mono", monospace;
  text-shadow: 0 0 .35px rgba(0, 0, 0, .5);
}
.sheet::before { content: ''; position: absolute; inset: 0; background-image: var(--grain, none); opacity: .42; pointer-events: none; }
.sheet .body { position: absolute; inset: 0; padding: 36px 42px 30px; overflow: hidden; transition: opacity .2s ease; }
.sheet ::selection { background: rgba(40, 110, 255, .3); }
#folder:not(.showing) .sheet, #folder:not(.showing) .under { visibility: hidden; }
#folder.swapping .sheet .body { opacity: 0; }                  /* turning to another pair of pages */
#folder.pending .sheet .body { opacity: 0; }                   /* what is written inside hasn't arrived yet */
.pageno { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 11px; line-height: 14px; color: #5a5a5a; }

/* a letterhead: the logo (the null banner unless it has its own), then the name in big letters and the division */
.t-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.t-head .logo { height: 64px; min-width: 40px; flex: none; display: grid; place-items: center; }
.t-head .logo img { max-width: 140px; max-height: 64px; display: block; }
.t-head .logo img:not([src]) { visibility: hidden; }
/* the null mark: the banner's white dot, pixel for pixel, with a dark edge so it shows on paper */
.t-head .logo .emblem { width: 56px; height: 56px; display: block; }
.t-head .logo.x { width: 56px; height: 56px; align-self: center; background: #131313; }   /* a logo that was blacked out */
.emblem rect { shape-rendering: crispEdges; }
.emblem .w { fill: #f4f2ec; }
.emblem .g { fill: #a9aba9; }
.emblem .k { fill: #1b1b1d; }
.t-head .titles { min-width: 0; flex: 1; text-shadow: none; }
.t-head .title {
  font: 900 40px/1 "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: 1px;
  text-transform: uppercase; white-space: pre; min-height: 40px;
}
.t-head .title::first-letter { font-size: 1.22em; }
.t-head .sub {
  font: 700 12px/1.2 Arial, "Helvetica Neue", sans-serif; letter-spacing: .42em; text-transform: uppercase;
  margin-top: 6px; white-space: pre; min-height: 14px;
}

/* photographs */
.t-imgs { display: flex; gap: 10px; margin: 0 0 12px; }
.t-imgs figure { margin: 0; flex: 1 1 0; min-width: 0; position: relative; }
.t-imgs.n2 figure:first-child { flex: 1.8 1 0; }
.ph { position: relative; height: 150px; background: #0c1016; border: 1px solid #0a0a0a; overflow: hidden; }
.size-s .ph { height: 104px; }
.size-l .ph { height: 236px; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph img:not([src]) { visibility: hidden; }
.ph.empty, .thumb.empty { background: repeating-linear-gradient(135deg, #111720 0 10px, #0c1016 10px 20px); }
.ph.x { background: #131313; border-color: #131313; }                  /* a photo that was blacked out */
.none {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; text-align: center;
  font: 700 10px/1.3 "Courier New", Courier, monospace; letter-spacing: .18em; color: #66717f; text-shadow: none;
}
.ph.loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 70%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* a file's front, between two lines: a big photo, a tall photo beside it, and the title in big type under the big one */
.t-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 35%; grid-template-rows: auto auto; gap: 8px 10px;
  border-top: 3px solid #1b1b1b; border-bottom: 2px solid #1b1b1b; padding: 10px 0 8px; margin: 0 0 14px;
}
.t-hero figure { margin: 0; position: relative; min-width: 0; }
.t-hero .main { grid-column: 1; grid-row: 1; }
.t-hero .main .ph { height: 176px; }
.t-hero .side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.t-hero .side .ph { flex: 1 1 auto; height: auto; min-height: 176px; }
.t-hero .subject {
  grid-column: 1; grid-row: 2; align-self: end; margin: 0; min-height: 38px; white-space: pre; overflow: hidden;
  font: 400 34px/38px "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", monospace; letter-spacing: -.01em;
}
.t-imgs figcaption { font-size: 11.5px; line-height: 15px; margin-top: 4px; color: #2c2c2c; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 15px; }

/* headings and typed text */
.t-h h2 {
  font: inherit; font-weight: 700; font-size: 19px; line-height: 24px; margin: 0 0 9px; min-height: 24px;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.t-p p { margin: 0 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 21px; }
.m-h { background: #f5d033; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.m-b { font-weight: 700; }
.m-u { text-decoration: underline; text-underline-offset: 2px; }
.m-x { background: #131313; color: #131313; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the footer, at the bottom of a document's last page: a line across it, a note under it, and the badge beside the note */
.t-foot { position: absolute; left: 42px; right: 42px; bottom: 26px; }
.t-foot .rule { border-top: 2.5px solid #1b1b1b; margin: 0 0 10px; }
.t-foot .frow { display: flex; align-items: center; gap: 16px; }
.t-foot .note { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 19px; }
/* the footer's badge: the dot on a dark seven-sided middle, inside a stamped double circle, in the same ink as the text */
.dot-emblem { flex: none; width: 88px; height: 88px; }
.dot-emblem .ring, .dot-emblem .core { fill: #1b1b1b; }
.dot-emblem .ring2 { fill: none; stroke: #1b1b1b; stroke-width: 1.9; }
.dot-emblem .px rect { shape-rendering: crispEdges; }
.dot-emblem .px .w { fill: #f4f2ec; }
.dot-emblem .px .g { fill: #a9aba9; }
/* on the page with the footer, writing stops above it */
.sheet .body:has(> .t-foot) { padding-bottom: 160px; }

/* ---------- opening and closing ---------- */
/* The cover is lifted, tips over, falls and gives a small bounce off the desk; closing is the same the other way.
   While it moves it is a real 3D turn. Once it has landed the folder is laid out flat (the same picture, with no 3D
   inside it), which keeps the text sharp however far the reader zooms in. */
#folder.opening .cover { animation: cover-open var(--open) both; }
#folder.closing .cover { animation: cover-close var(--close) both; }
@keyframes cover-open {
  0%   { transform: rotateY(0deg); animation-timing-function: cubic-bezier(.32, 0, .5, 1); }
  50%  { transform: rotateY(-97deg); animation-timing-function: cubic-bezier(.55, 0, .95, .62); }
  83%  { transform: rotateY(-180deg); animation-timing-function: ease-out; }
  91%  { transform: rotateY(-174deg); animation-timing-function: ease-in; }
  100% { transform: rotateY(-180deg); }
}
@keyframes cover-close {
  0%   { transform: rotateY(-180deg); animation-timing-function: cubic-bezier(.32, 0, .5, 1); }
  50%  { transform: rotateY(-83deg); animation-timing-function: cubic-bezier(.55, 0, .95, .62); }
  83%  { transform: rotateY(0deg); animation-timing-function: ease-out; }
  91%  { transform: rotateY(-6deg); animation-timing-function: ease-in; }
  100% { transform: rotateY(0deg); }
}
#folder.opening .face, #folder.closing .face { animation: turn-shade var(--open) ease both; }
@keyframes turn-shade { 48% { filter: brightness(.62); } }
#folder.opening .cast { animation: cast-open var(--open) linear both; }
#folder.closing .cast { animation: cast-open var(--close) linear both reverse; }
@keyframes cast-open { 0% { opacity: .9; } 46% { opacity: .5; } 62% { opacity: 0; } 100% { opacity: 0; } }
#folder.flat { transform-style: flat; }
#folder.flat .cover { transform: translateX(-100%); transform-style: flat; }
#folder.flat .face.in { transform: none; -webkit-backface-visibility: visible; backface-visibility: visible; }
#folder.flat .face.out { display: none; }
.notrans, .notrans * { transition: none !important; animation: none !important; }

/* ---------- the first screen: the documents, as buttons on black ---------- */
#library {
  position: fixed; inset: 0; z-index: 3; display: flex; justify-content: center; background: #000;
  transition: opacity .38s ease, visibility 0s linear 0s;
}
body:not(.on-lib) #library { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .38s ease, visibility 0s linear .38s; }
.lib-box {
  width: min(930px, 94vw); margin: 8vh 0 9vh; padding: 16px 14px 16px 6px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .7) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.card {
  position: relative; aspect-ratio: 218 / 275; overflow: hidden; background: #0b0d10; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  outline: 3px solid rgba(240, 246, 255, 0); outline-offset: -3px; transition: outline-color .1s ease;
  animation: card-in .3s ease both;
}
@keyframes card-in { from { opacity: 0; } }
.card:hover, .card:focus-visible, .card.sel { outline-color: #f0f6ff; z-index: 1; }
.card:focus-visible { outline-color: #ffffff; }
.card:active { filter: brightness(.9); }
.card .thumb { position: absolute; inset: 0; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb img:not([src]) { visibility: hidden; }
.card::after { content: ''; position: absolute; inset: 52% 0 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85)); }
.card .name {
  position: absolute; left: 9px; right: 9px; bottom: 8px; z-index: 1; color: #fff; text-align: left;
  font: 400 15px/1.25 ui-monospace, "Cascadia Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; letter-spacing: .02em;
  text-shadow: 0 1px 2px #000; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card.ghost { cursor: default; outline: none; animation: ghost 1.4s ease-in-out infinite alternate; }
@keyframes ghost { from { opacity: .2; } to { opacity: .45; } }
.lib-none {
  grid-column: 1 / -1; margin: 22vh 0 0; text-align: center; color: #6f7782;
  font: 700 13px/1.4 "Courier New", Courier, monospace; letter-spacing: .22em;
}

/* ---------- controls, bottom right: what each does, and its key or mouse action ---------- */
#hud {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; z-index: 5;
  -webkit-user-select: none; user-select: none;
}
#hud .row {
  all: unset; position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; color: #f3f3f3; touch-action: manipulation;
  font: 400 20px/1 var(--hud-font); letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .8);
  animation: hud-in .3s ease both;
}
#hud .row:nth-child(2) { animation-delay: .04s; }
#hud .row:nth-child(3) { animation-delay: .08s; }
#hud .row:nth-child(n+4) { animation-delay: .12s; }
@keyframes hud-in { from { opacity: 0; } }
/* no room beside the page: just the icons, with each name showing while its icon is pointed at */
#hud.compact .row span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
#hud.compact .row { gap: 0; }
#hud.compact .row:hover span, #hud.compact .row:focus-visible span { opacity: 1; }
#hud .ic {
  box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: #101215; border: 2px solid #e8ebee; box-shadow: 0 2px 5px rgba(0, 0, 0, .55);
  text-shadow: none; transition: background .1s ease, border-color .1s ease;
}
#hud .ic svg { width: 26px; height: 26px; }
#hud .ic svg .ln { fill: none; stroke: #fff; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
#hud .ic svg .on { fill: #fff; stroke: none; }
#hud .ic.key { border-radius: 9px; font: 600 19px/1 var(--hud-font); color: #fff; }
#hud .row:hover .ic { background: #2a2e34; border-color: #fff; }
#hud .row:focus-visible .ic { box-shadow: 0 0 0 3px #7fb2ff; }
#hud .row:active .ic { transform: translateY(1px); }

.grecaptcha-badge { visibility: hidden !important; }
/* (helper frames that sign-in adds to the page are never meant to be seen) */
body > iframe { position: absolute !important; top: -100px !important; width: 1px !important; height: 1px !important; border: 0 !important; opacity: 0 !important; }

/* reading (not editing): no mouse pointer anywhere, and a small dot in the middle of the screen marks where you look */
#dot {
  display: none; position: fixed; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  z-index: 6; pointer-events: none; background: radial-gradient(circle, #ffffff 0 42%, #d6d6d6 50% 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 5px rgba(0, 0, 0, .55);
}
body.on-read:not(.editing) #dot { display: block; }
html:has(> body.on-read:not(.editing)), body.on-read:not(.editing), body.on-read:not(.editing) * { cursor: none !important; }
/* ... and nothing can be selected or long-pressed: no highlight, no caret, no menu */
body.on-read:not(.editing), body.on-read:not(.editing) * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
body.on-read:not(.editing) dialog input { -webkit-user-select: text !important; user-select: text !important; }
body.on-read:not(.editing) dialog, body.on-read:not(.editing) dialog * { cursor: auto !important; }

/* the unmarked corner */
#hot {
  position: fixed; top: 0; right: 0; width: 72px; height: 72px; z-index: 8; background: transparent; cursor: default;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
body.editing #hot { display: none; }

/* ---------- messages and dialogs (only an admin ever sees these) ---------- */
#toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 30; pointer-events: none; width: min(560px, calc(100vw - 24px)); }
.toast {
  background: #15171a; color: #f1f1f3; border: 1px solid #33363c; border-radius: 4px; padding: 10px 14px; font-size: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6); animation: toast-in .18s ease both; max-width: 100%;
}
.toast.bad { border-color: #7a2a2f; background: #24130f; }
.toast.good { border-color: #2c6a3f; background: #11201a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

dialog.dlg {
  border: 1px solid #2c2f36; background: #121417; color: #e8e8ea; border-radius: 6px; padding: 22px;
  width: min(390px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}
dialog.dlg::backdrop { background: rgba(0, 0, 0, .78); }
.dlg h2 { margin: 0 0 4px; font: 600 19px/1.3 var(--hud-font); }
.dlg .sub { margin: 0 0 14px; color: #9a9da6; font-size: 13.5px; }
.dlg label { display: block; font-size: 12.5px; color: #b9bcc4; margin: 12px 0 5px; }
.dlg input[type=text], .dlg input[type=password] {
  width: 100%; background: #0b0c0e; border: 1px solid #30333b; color: #fff; border-radius: 4px; padding: 10px 12px; font: inherit;
}
.dlg input:focus { outline: 2px solid #4c8dff; outline-offset: 0; border-color: transparent; }
.dlg .err { min-height: 18px; margin: 10px 0 0; color: #ff8080; font-size: 13px; }
.dlg .btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dlg .fine { margin: 14px 0 0; font-size: 11.5px; line-height: 1.45; color: #74777f; }
.dlg .fine a { color: #8f939c; }
.btn {
  -webkit-appearance: none; appearance: none; border: 1px solid #3a3e46; background: #1c1f24; color: #eee; border-radius: 4px;
  padding: 9px 14px; font: 600 14px/1.1 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #262a31; }
.btn:focus-visible { outline: 2px solid #7fb2ff; outline-offset: 1px; }
.btn.primary { background: #e9ebee; border-color: #e9ebee; color: #101215; }
.btn.primary:hover { background: #ffffff; }
.btn.danger { background: #5a1f24; border-color: #7a2a2f; }
.btn.danger:hover { background: #6c262c; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.grow { flex: 1 1 auto; }

/* ---------- small screens, and people who asked for less motion ---------- */
@media (max-width: 860px) { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  #hud { gap: 9px; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  #hud .row { font-size: 16px; gap: 10px; }
  #hud .ic { width: 34px; height: 34px; }
  #hud .ic svg { width: 21px; height: 21px; }
  #hud .ic.key { font-size: 16px; border-radius: 8px; }
}
@media (max-width: 560px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-box { margin: 5vh 0 9vh; }
  .card .name { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --open: .01s; --close: .01s; }
  #rig { transition: none; }
  .ph.loading::after, .card, .card.ghost, #hud .row { animation: none; }
}