/* paper archive · live post engine styles (shared by index.html and post.html) */
@font-face { font-family: "Paper Mono"; src: url("../fonts/PaperMono-Variable.ttf") format("truetype"); font-weight: 100 800; font-display: block; }

.lv-host { position: relative; overflow: hidden; contain: layout paint; }
.lv-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lv-board { position: relative; overflow: hidden; font-family: var(--lv-font, "Paper Mono"); font-kerning: none; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; isolation: isolate; }
.lv-board [data-edit] { outline: none; cursor: text; border-radius: 1px; transition: box-shadow 160ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) {
  .lv-host:not(.lv-readonly) .lv-board [data-edit]:hover { box-shadow: 0 0 0 2px rgba(128,173,236,.55); }
}
.lv-board [data-edit]:focus { box-shadow: 0 0 0 2px #5D8ED5; caret-color: #5D8ED5; }
.lv-readonly .lv-board [data-edit] { cursor: inherit; }
.lv-board.lv-paused *, .lv-board.lv-paused *::before, .lv-board.lv-paused *::after { animation-play-state: paused !important; }
.lv-grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .13 0 0 0 0 .13 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lv-err { font: 12px/1.4 ui-monospace, monospace; color: #b00; padding: 24px; white-space: pre-wrap; }

/* ── the stamp: FOR THE LOVE / OF ♥♥ DESIGN ───────────────────────────────────────────────
   double rule (outer 1.6px · gap · inner 1px), hard offset shadow, both lines justified to one width */
.ftl { --c: #80ADEC; --g: transparent; --s: 22px; display: inline-grid; gap: calc(var(--s) * .32); padding: calc(var(--s) * 1.25) calc(var(--s) * 1.5);
  font: 500 var(--s)/1 "Paper Mono", ui-monospace, monospace; letter-spacing: 0; color: var(--c); background: var(--g);
  border: calc(var(--s) * .073) solid var(--c);
  box-shadow: inset 0 0 0 calc(var(--s) * .11) var(--g), inset 0 0 0 calc(var(--s) * .16) var(--c), calc(var(--s) * .2) calc(var(--s) * .2) 0 var(--c);
  text-transform: uppercase; white-space: nowrap; user-select: none; }
.ftl-flat { box-shadow: inset 0 0 0 calc(var(--s) * .11) var(--g), inset 0 0 0 calc(var(--s) * .16) var(--c); }
.ftl-row { display: flex; justify-content: space-between; gap: 1.6ch; }
.ftl-h { display: inline-flex; gap: .14em; align-items: center; }
.ftl-h i { width: .78em; height: .67em; background: var(--c); -webkit-mask: var(--heart) center/contain no-repeat; mask: var(--heart) center/contain no-repeat; }
.ftl.beat .ftl-h i { animation: ftl-beat 1.2s steps(1) infinite; }
.ftl.beat .ftl-h i:nth-child(2) { animation-delay: .15s; } .ftl.beat .ftl-h i:nth-child(3) { animation-delay: .3s; }
@keyframes ftl-beat { 0%, 30% { transform: scale(1.15); } 31%, 100% { transform: scale(1); } }

/* ── parameters panel: a precise instrument ─────────────────────────────────────────────── */
.pp { --pp-ink: #222; --pp-dim: #8b8a84; --pp-line: #e3e1d8; --pp-bg: #FBFAF5; --pp-acc: #5D8ED5;
  font: 400 11px/1.2 "Paper Mono", ui-monospace, monospace; color: var(--pp-ink); }
.pp-group { padding: 8px 0 6px; border-top: 1px solid var(--pp-line); }
.pp-group:first-child { border-top: 0; }
.pp-gh { color: var(--pp-dim); text-transform: lowercase; padding: 2px 12px 6px; display: flex; justify-content: space-between; }
.pp-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; padding: 3px 12px; min-height: 26px; }
.pp-l { color: var(--pp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; user-select: none; }
.pp-l[data-scrub] { cursor: ew-resize; }
.pp-l[data-scrub]:hover, .pp-l:focus-visible { color: var(--pp-ink); outline: none; }
body.pp-scrubbing, body.pp-scrubbing * { cursor: ew-resize !important; user-select: none !important; }
.pp-in { font: inherit; color: inherit; background: #fff; border: 1px solid var(--pp-line); border-radius: 3px; padding: 5px 7px; width: 100%; min-width: 0; outline: none;
  transition: border-color 120ms ease; }
.pp-in:focus { border-color: var(--pp-acc); }
.pp-ta { resize: vertical; line-height: 1.35; }
.pp-color { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; }
.pp-color input[type=color] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border: 1px solid var(--pp-line); border-radius: 3px; padding: 0; background: none; cursor: pointer; }
.pp-color input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; } .pp-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 1.5px; }
.pp-range { display: grid; grid-template-columns: 1fr 34px; gap: 8px; align-items: center; }
.pp-track { position: relative; height: 18px; display: block; }
.pp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--pp-line); }
.pp-fill { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--pp-ink); transform-origin: 0 50%; }
.pp-track input { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pp-track:has(input:focus-visible)::after { content: ""; position: absolute; inset: 2px -4px; border: 1px solid var(--pp-acc); border-radius: 3px; }
.pp-out { text-align: right; font-variant-numeric: tabular-nums; }
.pp-seg { display: flex; flex-wrap: wrap; gap: 2px; background: #efeee7; border-radius: 4px; padding: 2px; }
.pp-seg button, .pp-chip { font: inherit; color: var(--pp-dim); background: none; border: 0; border-radius: 3px; padding: 4px 6px; cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, transform 120ms cubic-bezier(.23,1,.32,1); }
.pp-seg button[aria-checked=true] { background: #fff; color: var(--pp-ink); box-shadow: 0 0 0 1px var(--pp-line); }
.pp-seg button:active, .pp-chip:active, .pp-tog:active { transform: scale(.97); }
.pp-tog { width: 28px; height: 16px; border-radius: 3px; border: 1px solid var(--pp-ink); background: none; padding: 0; position: relative; cursor: pointer; }
.pp-tog i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--pp-ink); border-radius: 1px; transition: transform 140ms steps(3); }
.pp-tog[aria-checked=true] { background: var(--pp-ink); } .pp-tog[aria-checked=true] i { transform: translateX(12px); background: var(--pp-bg); }
.pp-presets { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--pp-line); }
.pp-chip { border: 1px solid var(--pp-line); color: var(--pp-ink); }
@media (hover: hover) and (pointer: fine) { .pp-chip:hover, .pp-seg button:hover { color: var(--pp-ink); } }
@media (prefers-reduced-motion: reduce) { .ftl.beat .ftl-h i { animation: none; } }

/* motion tiers (see core.js): below the board's level, tiered CSS animations hold still */
.lv-board[data-motion="1"] [data-tier="2"], .lv-board[data-motion="1"] [data-tier="2"] *,
.lv-board[data-motion="1"] [data-tier="3"], .lv-board[data-motion="1"] [data-tier="3"] *,
.lv-board[data-motion="2"] [data-tier="3"], .lv-board[data-motion="2"] [data-tier="3"] * { animation-play-state: paused !important; }