/* keepsakeplugins.com. The dot site (index) and the plain pages (support, privacy, licence, refunds). */
:root { --paper: #f2f1ed; --ink: #1a1a1a; --mid: #66655f; --rule: #cfcdc6; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── the dot site ── */
.track { position: relative; }
.stage { position: fixed; inset: 0; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hits { position: absolute; inset: 0; }
.hits a { position: absolute; display: block; }
.hits a.off { visibility: hidden; }
.media { position: absolute; background: var(--ink); }
.media video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.hint { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-size: 12px; color: #8a8a86; pointer-events: none; }
/* the words as text: for screen readers, search and anyone without JavaScript */
.text { max-width: 62ch; margin: 0 auto; padding: 40px 16px 60px; }
.dots .text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.dots) .stage, html:not(.dots) .hint { display: none; }
.text section { margin: 0 0 40px; }

/* ── plain pages ── */
.page { max-width: 66ch; margin: 0 auto; padding: 28px 16px 64px; }
.page > header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.page > header a { text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.page > header nav a { font-weight: 400; color: var(--mid); }
h1 { font-size: 18px; margin: 0 0 6px; line-height: 1.3; }
h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin: 36px 0 10px; }
h3 { font-size: 14px; margin: 22px 0 4px; }
p, ul, ol, blockquote { margin: 0 0 12px; }
ul, ol { padding-left: 2.2ch; }
li { margin: 0 0 4px; }
blockquote { border-left: 2px solid var(--rule); padding-left: 1.5ch; margin-left: 0; }
code { font: inherit; background: #e7e5df; padding: 0 .3ch; overflow-wrap: anywhere; }
em.updated, .note { color: var(--mid); }
.page > footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--mid); font-size: 12px; display: flex; gap: 6px 16px; flex-wrap: wrap; }
.page > footer a { color: var(--mid); }
.faq dt { font-weight: 700; margin-top: 18px; }
.faq dd { margin: 4px 0 0; }