@charset "UTF-8";
@font-face { font-family: 'Meie Script'; src: url('./fonts/meie-script.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: dark; --panel-background: #0c0810; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--panel-background); }
body { margin: 0; background: var(--panel-background); color: #d9d5df; font: 20px/1.5 'Times New Roman', Times, serif; }
.enclosure {
  min-height: 100svh;
  padding: 7px;
  overflow: clip;
  border: 1px solid #777;
  border-right-color: #333;
  border-bottom-color: #333;
  background: linear-gradient(135deg, #aaa, #666 24%, #292929 51%, #999 76%, #444);
  box-shadow: inset 2px 3px 4px #ccc8, inset -2px -4px 5px #171717, 0 3px 6px #000b;
}
.machine { position: relative; isolation: isolate; display: grid; min-height: calc(100svh - 16px); grid-template-columns: minmax(28px, 1fr) minmax(0, 636px) minmax(28px, 1fr); grid-template-rows: 150px minmax(0, 1fr); background: #100a12; }
#matter { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); z-index: 4; pointer-events: none; filter: drop-shadow(1px 3px 2px #140816bb); }
.chamber {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  background: #161616;
  border: 1px solid #373737;
  box-shadow: inset 3px 3px 5px #280b1b;
  overflow: hidden;
}
.masthead { position: relative; grid-area: 1 / 2 / 2 / 3; min-width: 0; }
.chamber-top { position: absolute; inset: 0; }
.title-plate { position: absolute; z-index: 3; left: 22px; bottom: 19px; width: min(264px, calc(100% - 44px)); padding: 8px 15px; background: var(--panel-background); border: 1px solid transparent; }
.chamber-left { grid-area: 1 / 1 / 3 / 2; }
.chamber-right { grid-area: 1 / 3 / 3 / 4; }
.reading-panel { position: relative; z-index: 3; grid-area: 2 / 2 / 3 / 3; min-width: 0; padding: 24px 26px; background: var(--panel-background); border: 1px solid #4e3347; }
.post { color: #d9d5df; font: 400 20px/1.5 'Times New Roman', Times, serif; overflow-wrap: anywhere; }
.post h2 { margin: 0; min-height: 44px; color: #d9d5df; font: 400 44px/1.3 'Meie Script', cursive; }
.post-byline { margin: -2px 0 0; min-height: 24px; font-size: 16px; }
.post-author { color: #aa9bb7; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body { margin: 24px 0 0; }
.site-title { position: relative; margin: 0; height: 54px; font: 400 64px/1.25 'Meie Script', cursive; color: #d9d5df; }
.pixel-text { position: relative; }
.pixel-text canvas { display: none; max-width: 100%; image-rendering: pixelated; }
.pixel-text.is-rendered canvas { display: block; }
.pixel-text.is-rendered > .text-source { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.text-pending .site-title, .text-pending .post { visibility: hidden; }
.no-webgl .chamber { background: #222 url('./fallback.svg') center / cover; filter: grayscale(1); }
.no-webgl .chamber-top { background-size: auto 260%; }
@media (max-width: 560px) {
  .title-plate { left: 14px; bottom: 17px; width: min(264px, calc(100% - 28px)); }
  .reading-panel { padding: 22px 19px; }
}