/* Shared paper for the two pages outside the notebook: the same near-white
   page, near-black ink, Fraunces for anything written and Inter for labels. */
:root{
  --bg:#FFFEFB; --ink:#1C1B19; --muted:#6B6A66; --line:#E9E7E1; --hover:#F6F5F1;
  --danger:#D44C47; --ok:#2E8B57;
  --hand:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html{background:var(--bg);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;
  font-variation-settings:'SOFT' 100,'WONK' 1}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1{font-family:var(--hand);font-weight:400;font-size:30px;line-height:1.2;margin:0 0 26px;letter-spacing:.2px}
.mark{width:40px;height:40px;color:var(--ink);display:block}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  flex:none;display:block}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:0;background:transparent;
  border-radius:8px;color:var(--muted);cursor:pointer;padding:0;flex:none;text-decoration:none}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn:disabled{opacity:.4;cursor:default}
.icon-btn.bad:hover{color:var(--danger)}
.say{margin:20px 0 0;min-height:20px;font-size:14px;color:var(--muted)}
.say.bad{color:var(--danger)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--muted);
  border-radius:50%;animation:t .7s linear infinite;vertical-align:-2px}
@keyframes t{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}