:root{--paper:#f7f3e9;--ink:#33372e;--butter:#f5d99c;--moss:#c0b05b;--palm:#657652;--guava:#f2b6a3;--sunset:#e89c73;--sangria:#e36559;--seabreeze:#e5e9eb;--lagoon:#94bebb;--odyssey:#23617e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'Courier New',monospace;overflow:hidden}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2385755b' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,input,textarea{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--odyssey);outline-offset:5px}header,footer{position:fixed;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>* ,footer>*{pointer-events:auto}header{top:0;padding:24px 34px;background:linear-gradient(var(--paper),transparent)}.wordmark{font-family:Georgia,serif;font-style:italic;font-size:35px;color:var(--ink);text-decoration:none;letter-spacing:-4px}.wordmark span{font-style:normal;color:var(--sangria);font-size:30px;margin-left:8px}.header-note{font-size:11px;letter-spacing:1px}.pill{border:1px solid #454b3f;border-radius:100px;background:var(--paper);padding:13px 19px;font-size:12px}.pill span{padding-left:16px}.pill:hover{background:var(--butter)}footer{bottom:0;padding:22px 32px;background:linear-gradient(transparent,var(--paper))}footer button{border:0;background:none;font-size:11px;text-decoration:underline;text-underline-offset:4px}#hint{font-size:10px;opacity:.65}#universe{position:fixed;inset:0;touch-action:none;cursor:grab;outline:none;overflow:hidden}#universe.dragging{cursor:grabbing}#world{position:absolute;left:50%;top:50%}.tile{position:absolute;width:1440px;height:1040px;contain:layout style}.journal-title{transform:translateX(-50%);position:absolute;width:540px;text-align:center;left:-270px;top:-150px;pointer-events:none}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:3px}.journal-title h1{font:italic 116px/.83 'Snell Roundhand','Apple Chancery','URW Chancery L',cursive;letter-spacing:-7px;font-weight:400;margin:32px 0 23px;transform:rotate(-7deg)}.journal-title p{font:12px/1.8 'Courier New',monospace}.journal-title .edition{font-size:9px;letter-spacing:2px;margin-top:22px}.entry{position:absolute;width:210px;background:none;border:0;text-align:center;padding:15px 0;color:var(--ink)}.entry .entry-title{font:italic 24px/1.15 Georgia,serif;display:block;white-space:normal}.entry small{display:block;font-size:9px;letter-spacing:1px;margin-top:10px;opacity:.55}.star{position:absolute;pointer-events:none;animation:twinkle 5s ease-in-out infinite;transform-origin:center}.star svg{width:100%;height:100%;overflow:visible}.bunny{position:absolute;border:0;background:none;white-space:pre;font:bold 17px/1.05 monospace;text-align:center;padding:10px;transition:transform .2s}.bunny:hover{transform:translateY(-7px) rotate(-5deg)}.bunny small{display:block;font:9px/2 monospace;letter-spacing:1px;color:var(--ink);opacity:0}.bunny:hover small,.bunny:focus small{opacity:1}@keyframes twinkle{0%,100%{transform:scale(1) rotate(-7deg);opacity:.85}50%{transform:scale(.82) rotate(10deg);opacity:.5}}.window{position:fixed;top:50%;left:50%;width:440px;max-width:calc(100vw - 30px);max-height:calc(100dvh - 110px);transform:translate(-50%,-50%) rotate(-1deg);border:1px solid var(--ink);background:var(--paper);box-shadow:7px 8px 0 #65765226;display:flex;flex-direction:column;z-index:30}.window:nth-child(even){transform:translate(-50%,-50%) rotate(1deg)}.window-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--ink);font-size:10px;letter-spacing:1px;cursor:move;touch-action:none;background:var(--butter)}.close{background:transparent;border:0;font-size:23px;line-height:1;padding:0 3px}.window-body{padding:30px;overflow:auto;overscroll-behavior:contain}.window h2{font:italic 35px/1.1 Georgia,serif;margin:8px 0 24px;font-weight:400}.window p{line-height:1.9;white-space:pre-wrap}.meta{font-size:10px;color:var(--palm);line-height:1.6}.form label{display:block;font-size:11px;margin:16px 0 7px}.form input,.form textarea{display:block;width:100%;border:0;border-bottom:1px solid #65765270;background:#ffffff55;padding:10px;border-radius:0}.form textarea{height:130px;resize:vertical}.form .pill{margin-top:20px;background:var(--butter)}.form-note{font-size:10px;line-height:1.6}.game-status{font-size:12px;min-height:32px;line-height:1.5;margin-bottom:15px}.game-board{display:grid;gap:4px;width:100%;aspect-ratio:1}.game-board button{border:1px solid #65765244;background:var(--butter);font:36px Georgia,serif;min-width:0;padding:0}.game-board.checkers{gap:0}.checkers button{border:0;background:var(--paper);font:24px Georgia,serif}.checkers button.dark{background:#c0b05b77}.piece{display:block;border-radius:50%;width:78%;height:78%;margin:auto;border:2px solid var(--paper);box-shadow:0 1px 2px #3335;align-content:center;font-size:18px}.piece.you{background:var(--sangria);color:white}.piece.cpu{background:var(--palm);color:white}.checkers button.selected{box-shadow:inset 0 0 0 3px var(--odyssey)}.checkers button.target{box-shadow:inset 0 0 0 3px var(--sunset)}.game-control{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}.game-control button{background:transparent;border:1px solid #65765277;padding:8px 13px;border-radius:22px}.game-canvas{display:block;width:100%;height:auto;border:1px solid #65765270;background:#f5edda;touch-action:none}.scramble{font:italic 36px Georgia,serif;letter-spacing:8px;text-align:center;padding:20px 0;color:var(--palm)}#toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:13px 20px;z-index:100;display:none;max-width:90vw;font-size:12px}@media(prefers-reduced-motion:reduce){.star{animation:none}*{scroll-behavior:auto!important}}@media(max-width:650px){header{padding:18px}.header-note{display:none}.pill{padding:11px 13px;font-size:11px}footer{padding:18px 12px}#hint{display:none}.journal-title{width:360px;left:-180px;top:-120px}.journal-title h1{font-size:85px}.journal-title .eyebrow{font-size:8px}.entry{width:145px}.entry .entry-title{font-size:20px}.window-body{padding:24px}.window{max-height:calc(100dvh - 100px)}}

/* Rounded sans serif titles and a header caption centered on the viewport. */
:root {
  --title-font: 'Chalkboard SE', 'Chalkboard', 'Trebuchet MS', sans-serif;
}

.header-note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  text-align: center;
  white-space: nowrap;
}

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.window h2 {
  font-family: var(--title-font);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .header-note { display: none; }
}

@media (max-width: 650px) {
  .entry .entry-title { font-size: 18px; }
  .window h2 { font-size: 26px; }
}

/* A pencil oval is revealed clockwise around the title, without extra markup. */
.entry .entry-title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
  text-decoration: none;
}

.entry .entry-title::after {
  content: '';
  position: absolute;
  inset: -13px -17px -12px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2345483d%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M150%208%20C222%203%20286%2019%20291%2046%20C300%2072%20235%2094%20155%2093%20C77%2096%2011%2079%208%2053%20C2%2026%2065%205%20146%208%20C179%208%20204%2011%20221%2016%22%20stroke-width%3D%221.35%22%20opacity%3D%22.78%22%2F%3E%3Cpath%20d%3D%22M151%2010%20C227%205%20287%2024%20288%2049%20C290%2074%20227%2092%20153%2091%20C74%2094%2014%2076%2011%2051%20C9%2028%2070%208%20146%2010%22%20stroke-width%3D%22.65%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M27%2032%20C54%2016%2097%209%20133%209%20M231%2084%20C252%2078%20271%2071%20281%2061%22%20stroke-width%3D%22.6%22%20opacity%3D%22.27%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: rotate(-3deg);
}

.entry:is(:hover, :focus-visible) .entry-title {
  text-decoration: none;
}

.entry:is(:hover, :focus-visible) .entry-title::after {
  opacity: 1;
  animation: pencil-circle 275ms linear both;
}

@keyframes pencil-circle {
  0% { clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
  12.5% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
  25% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%); }
  37.5% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); }
  50% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%); }
  62.5% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%); }
  75% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%, 0% 50%); }
  87.5% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%, 0% 0%); }
  100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%, 50% 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .entry:is(:hover, :focus-visible) .entry-title::after {
    animation: none;
    clip-path: none;
  }
}