html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body { color: #fff; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#rig { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); box-sizing: border-box; }
#bezel { background: #17140f; border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 2px #2a251c, 0 0 0 1px #000; }
#glass { position: relative; background: #000; border-radius: 6px; overflow: hidden; }
#glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(var(--px, 4px) - 1px), rgba(0,0,0,.14) calc(var(--px, 4px) - 1px), rgba(0,0,0,.14) var(--px, 4px));
  box-shadow: inset 0 0 40px rgba(0,0,0,.55); }
#screen, #bootc { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#boot { position: absolute; inset: 0; background: #000; z-index: 5; }
#boot.gone { display: none; }
#reader { position: absolute; inset: 0; background: #000; overflow-y: auto; overflow-x: hidden; z-index: 3; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
#reader::-webkit-scrollbar { display: none; }
#reader .in { width: 100%; padding: 0 0 calc(var(--px, 4px) * 8); box-sizing: border-box; }
#reader canvas.t { display: block; image-rendering: pixelated; image-rendering: crisp-edges; margin: 0; }
#reader .row { cursor: pointer; }
#reader .row:hover canvas, #reader .row:focus-visible canvas { filter: invert(1); background: #000; }
#reader .row:focus { outline: none; }
#reader:focus { outline: none; }
/* the landmark's picture heads its page, small enough that the name and the work start in the first view */
#reader img.scene { display: block; width: min(100%, calc(var(--gh, 768px) * .58 * 280 / 192)); margin: calc(var(--px, 4px) * 3) auto 0; image-rendering: pixelated; image-rendering: crisp-edges; }
#reader .gap { height: calc(var(--px, 4px) * 5); }
#reader a { display: block; color: inherit; }
#keys { display: none; grid-template-columns: repeat(6, 1fr); gap: 6px; width: min(94vw, 420px); }
#keys button { font: 600 15px/1 ui-monospace, Menlo, monospace; color: #3b3326; background: #d9cfb6; border: 0; border-radius: 5px; height: 42px; box-shadow: 0 3px 0 #8f8570; padding: 0; user-select: none; -webkit-user-select: none; touch-action: none; }
#keys button:active, #keys button.on { transform: translateY(2px); box-shadow: 0 1px 0 #8f8570; }
#keys button.wide { grid-column: span 2; }
#keys button.dark { background: #7a705c; color: #f1ead7; box-shadow: 0 3px 0 #3d372c; }
body.touch #keys { display: grid; }
body.touch #bezel { padding: 6px; border-radius: 10px; }
#typer { position: fixed; left: -200px; top: 0; width: 100px; height: 20px; opacity: 0; font-size: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.touch #reader .row { padding: 5px 0; }
/* the case study: the media kit (kit/ab-media.css) dressed for the screen; its words are redrawn in the screen's characters */
#reader { color-scheme: dark; }
#reader .ab-media { --ab-gap: calc(var(--px, 4px) * 3); --ab-chrome: var(--chrome, 120px); --ab-fg: #fff; --ab-muted: #fff; --ab-accent: #14f53c; gap: calc(var(--px, 4px) * 5); }
#reader .ab-section { gap: calc(var(--px, 4px) * 3); }
#reader .ab-films, #reader .ab-group, #reader .ab-sounds { margin: 0 calc(var(--px, 4px) * 7); }
#reader .ab-films, #reader .ab-group { gap: calc(var(--px, 4px) * 6); }
#reader .ab-frame { outline: var(--px, 4px) solid #fff; }
#reader .ab-image img { outline: var(--px, 4px) solid #fff; background: #111; }
#reader .ab-media figcaption { margin-top: calc(var(--px, 4px) * 2.5); }
#reader .ab-media canvas.t { display: block; }
#reader .ab-audio audio { margin-top: var(--px, 4px); }
/* reading on a phone, only the SPACE BAR stays below the screen: it closes the page */
body.touch.reading #keys button:not([data-k="space"]) { display: none; }
body.touch.reading #keys button[data-k="space"] { grid-column: 1 / -1 !important; }