:root {
  --border: 1px;
  --depth: .4;
}

html,body{overflow-x:hidden}
body{font-size:17px}
#page:focus{outline:none}
#page h2{font-family:var(--font-display);font-size:1.6em;line-height:1.2;margin:1.2em 0 .4em;font-weight:600}
#page p{margin:0 0 1em}
#page blockquote{border-left:2px solid var(--color-primary);padding-left:1em;font-style:italic;color:oklch(0.4 0.02 120);margin:1.2em 0}
#page ul{list-style:disc;padding-left:1.4em;margin:0 0 1em}
#page a{color:var(--color-accent);text-decoration:underline}
.tb{min-width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--radius-selector);font-family:var(--font-mono);font-size:13px;color:oklch(0.4 0.02 120);transition:background .15s,color .15s}
.tb[aria-pressed=true]{background:var(--color-secondary);color:var(--color-base-content)}
@media (hover:hover){.tb:hover{background:var(--color-base-200);color:var(--color-base-content)}}
.tb:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.quiet{transition:opacity .4s}
body.writing .quiet{opacity:.25}
body.writing .quiet:hover,body.writing .quiet:focus-within{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}