:root{color-scheme:light;--bg:#fbf6e9;--fg:#1c1914;--muted:#4c4536;--link:#7b1e10;--panel:#f4ecd8;--line:#6f6552;--focus:#7b1e10;--found-bg:#ffdc66;--found-fg:#1c1914;--selecting-bg:#f0dcae;--selecting-fg:#1c1914;--accent:#7b1e10;--on-accent:#ffffff;--paper:#fffdf6;--cell-line:#ddd2b8;--shadow:#e6dcc3}
@media screen{:root[data-theme="dark"]{color-scheme:dark;--bg:#1b1712;--fg:#f4eddd;--muted:#cfc5af;--link:#f2b39f;--panel:#27211a;--line:#8f8469;--focus:#f2b39f;--found-bg:#5f4900;--found-fg:#ffffff;--selecting-bg:#4a3b1e;--selecting-fg:#f4eddd;--accent:#f2b39f;--on-accent:#1b1712;--paper:#231e17;--cell-line:#4b4335;--shadow:#0f0d0a}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1.25rem;line-height:1.5}
a{color:var(--link)}
a:focus-visible,button:focus-visible,.grid td:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--bg);padding:.5rem 1rem}
.skip-link:focus{left:1rem;top:1rem}
.wrap{max-width:46rem;margin:0 auto;padding:0 1rem}
.site-header{border-bottom:2px solid var(--line);padding:.75rem 0}
.site-name{font-weight:700;font-size:1.375rem;color:var(--fg);text-decoration:none}
h1{font-size:2rem;line-height:1.2;margin:1.25rem 0 .5rem}
h2{font-size:1.5rem;line-height:1.3;margin:1.5rem 0 .5rem}
.variant{display:inline-block;font-size:1.125rem;font-weight:600;padding:.1rem .6rem;border:2px solid var(--fg);border-radius:999px;vertical-align:middle}
.crumbs ol{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;font-size:1.125rem}
.crumbs li+li::before{content:"\203A";margin-right:.5rem;color:var(--muted)}
.intro{margin:.5rem 0 1rem}
.howto{background:var(--panel);border:2px solid var(--line);border-radius:.75rem;padding:1rem 1.25rem;margin:1rem 0}
.howto h2{margin:0 0 .5rem;font-size:1.5rem}
.howto ol{margin:0 0 .75rem;padding-left:1.5rem}
.howto li{margin:.35rem 0}
.toolbar{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}
button{font:inherit;font-size:1.125rem;min-height:48px;padding:.5rem 1.1rem;border:2px solid var(--fg);border-radius:.5rem;background:var(--panel);color:var(--fg);cursor:pointer}
.status{min-height:1.5em;font-weight:600;margin:.5rem 0}
.timer{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}
.grid{--cells:12;border-collapse:collapse;table-layout:fixed;width:min(100%, var(--cells) * 56px);margin:0 auto;border:3px solid var(--fg);background:var(--bg);-webkit-user-select:none;user-select:none;touch-action:none}
.grid td{height:calc(min(100vw - 2rem, 44rem, var(--cells) * 56px) / var(--cells));font-size:max(20px, calc(min(100vw - 2rem, 44rem, var(--cells) * 56px) / var(--cells) * .62));padding:0;text-align:center;vertical-align:middle;font-weight:700;line-height:1;cursor:pointer}
.grid td.start{outline:3px solid var(--focus);outline-offset:-3px}
.grid td.selecting{background:var(--selecting-bg);color:var(--selecting-fg)}
.grid td.hint{outline:4px solid var(--focus);outline-offset:-4px;background:var(--found-bg);color:var(--found-fg)}
.grid td.found{background:var(--found-bg);color:var(--found-fg)}
.words{columns:3 8rem;list-style:none;margin:0;padding:0;font-weight:600;letter-spacing:.04em}
.words li{padding:.15rem 0;break-inside:avoid}
.words li.found{text-decoration:line-through;color:var(--muted)}
.other{margin:1.5rem 0}
.answers{display:none}
.themes{list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.themes li{background:var(--panel);border:2px solid var(--line);border-radius:.75rem;padding:1rem}
.themes h2{margin:0 0 .25rem;font-size:1.375rem}
.themes p{margin:0 0 .5rem;color:var(--muted)}
.themes a{display:inline-block;min-height:44px;padding:.4rem 0;margin-right:1rem;font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-footer{border-top:2px solid var(--line);margin-top:3rem;padding:1rem 0;color:var(--muted);font-size:1.125rem}
.site-footer ul{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-wrap:wrap;gap:1rem}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.cards li{background:var(--panel);border:2px solid var(--line);border-radius:.75rem;padding:.75rem 1rem}
.cards h3{margin:0 0 .25rem;font-size:1.25rem}
.cards p{margin:0;color:var(--muted)}
.category{margin:1.5rem 0}
.category h2 a{color:var(--fg)}
.featured{background:var(--panel);border:2px solid var(--focus);border-radius:.75rem;padding:1rem 1.25rem;margin:1.5rem 0}
.featured p{margin:0 0 .75rem;color:var(--muted)}
.level-filter{margin:1rem 0}
.level-filter ul,.levels-nav ul,.puzzle-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.level-filter a,.levels-nav a{display:inline-block;min-height:44px;line-height:44px;font-weight:600}
.level-group{margin:1rem 0}
.level-group h3{font-size:1.375rem;margin:1rem 0 .5rem}
.level-group li{margin:.35rem 0}
.puzzle-nav{margin:1.25rem 0;padding:.75rem 0;border-top:2px solid var(--line)}
.puzzle-nav .position{font-weight:700;margin:0 0 .4rem}
.questions h3{font-size:1.25rem;margin:1rem 0 .25rem}
.questions p{margin:0}
/* The Puzzle Page design (step P3a): warm paper, ink and a serif masthead. Screen only: the printed sheet has its own rules. */
@media screen {
  body { font-family: Georgia, "Noto Serif", "DejaVu Serif", "Times New Roman", serif; font-size: 1.3125rem; line-height: 1.55; }
  a { text-underline-offset: .15em; }
  .wrap { max-width: 72rem; padding: 0 clamp(1rem, 3vw, 2rem); }
  main.wrap { padding-bottom: 2rem; }
  main > p, main > ol, main > ul:not(.cards):not(.words) { max-width: 48rem; }
  h2 { font-size: 1.75rem; }

  /* The masthead */
  .site-header { border-bottom: 0; padding: 1.5rem 0 0; text-align: center; }
  .head-row { display: flex; flex-flow: column wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; }
  .site-name { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; min-height: 44px; color: inherit; line-height: 1.15; }
  .brand-name { font-size: clamp(2.125rem, 9.5vw, 4.25rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.05; }
  .brand-tag { font-size: 1.25rem; font-style: italic; font-weight: 400; color: var(--muted); }
  .top-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2.5rem; width: 100%; border-top: 4px double var(--fg); border-bottom: 1px solid var(--fg); }
  .top-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .9rem; color: inherit; font-size: 1.375rem; font-weight: 700; font-variant: small-caps; letter-spacing: .06em; text-decoration: none; }
  .top-nav a:hover { text-decoration: underline; }
  .theme-toggle { min-height: 44px; margin-left: .5rem; padding: 0 .9rem; background: none; border: 1.5px solid var(--fg); color: inherit; font-size: 1.125rem; font-weight: 700; align-self: center; }
  .page-puzzle .site-header { padding: .6rem 0; border-bottom: 4px double var(--fg); }
  .page-puzzle .head-row { flex-direction: row; }
  .page-puzzle .site-name { align-items: flex-start; }
  .page-puzzle .brand-name { font-size: 2rem; }
  .page-puzzle .brand-tag { display: none; }
  .page-puzzle .top-nav { width: auto; border: 0; gap: .25rem 1rem; }

  /* Links big enough to tap */
  .puzzle-nav a, .category .puzzles a, .site-footer a, .crumbs a { display: inline-block; padding-block: .65rem; line-height: 1.5; }
  .crumbs ol, .puzzle-nav ul { align-items: baseline; }

  /* A puzzle already solved: a tick on its link */
  .solved-link::after { content: ""; display: inline-block; width: .42em; height: .78em; margin-left: .5em; border: solid currentColor; border-width: 0 .15em .15em 0; transform: rotate(45deg) translate(-.08em, -.08em); }
  .number-row a.solved-link { position: relative; background: var(--found-bg); color: var(--found-fg); }
  .number-row a.solved-link::after { position: absolute; top: .22em; right: .3em; margin: 0; font-size: .75em; }

  /* The finished puzzle: the panel, the stamp and the wave across the letters */
  .grid-box { position: relative; }
  .solved { margin: 1rem 0 .5rem; padding: 1rem 1.25rem; background: var(--panel); border: 2px solid var(--fg); }
  .solved h2 { margin: 0; font-size: 1.75rem; font-variant: small-caps; letter-spacing: .03em; }
  .solved p { margin: .25rem 0 0; }
  .solved .btn { margin-top: .6rem; }
  .is-solved .quick-hint { display: none; }
  .stamp { display: none; }
  .celebrate .stamp { display: block; position: absolute; top: 50%; left: 50%; padding: .12em .42em .18em; background: var(--paper); border: .1em solid var(--accent); border-radius: .1em; color: var(--accent); font-size: clamp(2.75rem, 12vw, 5.25rem); font-weight: 700; font-variant: small-caps; letter-spacing: .04em; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; animation: stamp 2.9s ease-out .85s; }
  @keyframes stamp {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); }
    12% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.94); }
    18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
    82% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  }
  .celebrate .grid td { animation: wave .55s ease-in-out calc((var(--r, 0) + var(--c, 0)) * 40ms); }
  @keyframes wave { 40% { transform: translateY(-12%) scale(1.16); background-color: var(--found-bg); color: var(--found-fg); } }
  .grid tr:nth-child(2) { --r: 1; } .grid tr:nth-child(3) { --r: 2; } .grid tr:nth-child(4) { --r: 3; } .grid tr:nth-child(5) { --r: 4; }
  .grid tr:nth-child(6) { --r: 5; } .grid tr:nth-child(7) { --r: 6; } .grid tr:nth-child(8) { --r: 7; } .grid tr:nth-child(9) { --r: 8; }
  .grid tr:nth-child(10) { --r: 9; } .grid tr:nth-child(11) { --r: 10; } .grid tr:nth-child(12) { --r: 11; } .grid tr:nth-child(13) { --r: 12; }
  .grid td:nth-child(2) { --c: 1; } .grid td:nth-child(3) { --c: 2; } .grid td:nth-child(4) { --c: 3; } .grid td:nth-child(5) { --c: 4; }
  .grid td:nth-child(6) { --c: 5; } .grid td:nth-child(7) { --c: 6; } .grid td:nth-child(8) { --c: 7; } .grid td:nth-child(9) { --c: 8; }
  .grid td:nth-child(10) { --c: 9; } .grid td:nth-child(11) { --c: 10; } .grid td:nth-child(12) { --c: 11; } .grid td:nth-child(13) { --c: 12; }
  @media (prefers-reduced-motion: reduce) { .celebrate .grid td { animation: none; } .celebrate .stamp { display: none; } }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: .5rem 1.6rem; border: 2px solid var(--fg); border-radius: 2px; color: var(--fg); font-weight: 700; line-height: 1.2; text-decoration: none; }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  button { background: var(--paper); border-radius: 2px; font-family: inherit; }
  button[data-action="print"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

  /* Home */
  .hero { display: grid; gap: 2rem; margin: 2.25rem 0 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--fg); }
  .hero h1 { font-size: clamp(2.5rem, 5.5vw, 3.75rem); line-height: 1.08; margin: 0 0 1rem; }
  .lede { font-size: 1.375rem; margin: 0; max-width: 40rem; }
  .cta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 0; }
  .hero-art { width: 100%; max-width: 27rem; margin-inline: auto; }
  .mini { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--paper); border: 3px solid var(--fg); box-shadow: 8px 8px 0 var(--shadow); font-size: clamp(1.25rem, 3.4vw, 1.875rem); font-weight: 700; line-height: 1; }
  .mini span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); }
  .mini .hit { background: var(--found-bg); color: var(--found-fg); }
  @media (min-width: 56rem) {
    .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 3.5rem; }
  }
  .featured { padding: 1.1rem 1.5rem 1.25rem; background: var(--panel); border: 2px solid var(--fg); border-radius: 0; }
  .featured h2 { margin: 0; font-variant: small-caps; letter-spacing: .03em; }
  .featured .cards li { border-bottom-color: var(--line); }
  .levels-nav { margin: 1.75rem 0; }
  .levels-nav ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
  .levels-nav a { display: flex; align-items: center; justify-content: center; min-height: 66px; padding: .5rem 1rem; background: var(--paper); border: 2px solid var(--fg); color: var(--fg); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; }
  .levels-nav a:hover { background: var(--fg); color: var(--bg); }
  .themes-note { margin: 0 0 1rem; color: var(--muted); }
  .how-it-works { margin-top: 3rem; border-top: 3px solid var(--fg); }
  .how-it-works h2 { margin-top: .4rem; font-variant: small-caps; }
  .how-it-works ol { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .how-it-works li { counter-increment: step; }
  .how-it-works li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .6rem; border: 2px solid var(--fg); border-radius: 50%; font-size: 1.5rem; font-weight: 700; }

  /* Index entries: the whole entry is the link */
  .cards { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 2.5rem; }
  .cards li { position: relative; padding: .7rem 0; background: none; border: 0; border-bottom: 1px solid var(--cell-line); border-radius: 0; }
  .cards h3 { margin: 0; font-size: 1.4375rem; font-weight: 400; line-height: 1.25; }
  .cards h3 a { color: var(--fg); text-decoration: none; }
  .cards h3 a::after { content: ""; position: absolute; inset: 0; }
  .cards h3 a:focus-visible { outline: none; }
  .cards h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
  .cards li:hover h3 a { text-decoration: underline; }
  .category { margin: 2.25rem 0; }
  .category h2 { margin: 0 0 .4rem; padding-top: .4rem; border-top: 3px solid var(--fg); font-variant: small-caps; letter-spacing: .03em; }
  .category h2 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; }
  .category .puzzles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: .15rem 2rem; }
  .category .puzzles li { padding: .3rem 0; }

  /* Theme page */
  .levels-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin: 1rem 0 2rem; }
  .level-group { display: flex; flex-direction: column; margin: 0; padding: 1.25rem 0 1.5rem; border-top: 3px solid var(--fg); }
  .level-group h3 { margin: 0; font-size: 1.5rem; }
  .level-desc { margin: .25rem 0 1rem; color: var(--muted); font-size: 1.125rem; line-height: 1.4; }
  .number-row { list-style: none; padding: 0; margin: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(3.25rem, 1fr)); gap: .6rem; }
  .number-row li { margin: 0; }
  .number-row a { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--paper); border: 2px solid var(--fg); color: var(--fg); font-family: "Palatino Linotype", Palatino, "Book Antiqua", Cambria, "Noto Serif", "Times New Roman", serif; font-size: 1.875rem; font-weight: 700; line-height: 1; text-decoration: none; }
  .number-row a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .theme-info { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--fg); }
  .theme-info h2 { margin: 0 0 .4rem; padding-top: 1rem; font-size: 1.5rem; break-after: avoid; }
  .theme-info p, .theme-info ol, .theme-info li, .theme-info h3 { break-inside: avoid; }
  @media (min-width: 60rem) {
    .level-filter { display: none; }
    .theme-info { columns: 2; column-gap: 3rem; }
  }

  /* Puzzle page: on a phone it reads top to bottom in page order; on a wide screen the words sit beside the grid */
  main[class*="sheet-"] > * { min-width: 0; }
  main[class*="sheet-"] > h1 { margin: .75rem 0 .5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); }
  main[class*="sheet-"] > .intro { color: var(--muted); }
  .quick-hint { margin: 0 0 .5rem; }
  #words-heading { margin: 1.5rem 0 .5rem; }
  .variant { border-width: 1.5px; font-size: 1.1875rem; font-variant: small-caps; }
  .words li { letter-spacing: .03em; }
  .grid { background: var(--paper); border: 3px solid var(--fg); }
  .grid td { border: 1px solid var(--cell-line); font-family: Georgia, "Noto Serif", "DejaVu Serif", serif; }
  .toolbar { gap: .6rem; }
  .toolbar button { min-height: 54px; }
  .howto { margin-top: 2rem; border-radius: 0; }
  @media (min-width: 64rem) {
    main[class*="sheet-"] {
      display: grid; column-gap: 2.75rem; align-items: start;
      grid-template-columns: auto minmax(18rem, 1fr);
      grid-template-rows: repeat(7, auto) 1fr;
      grid-template-areas:
        "crumbs crumbs" "title title" "grid hint" "grid status" "grid timer" "grid wh" "grid words" "grid tools"
        "howto howto" "nav nav" "intro intro" "ans ans";
    }
    main[class*="sheet-"] > .crumbs { grid-area: crumbs; }
    main[class*="sheet-"] > h1 { grid-area: title; }
    main[class*="sheet-"] > .quick-hint { grid-area: hint; }
    main[class*="sheet-"] > .status { grid-area: status; margin-top: 0; }
    main[class*="sheet-"] > .timer { grid-area: timer; }
    main[class*="sheet-"] > .grid-box { grid-area: grid; }
    main[class*="sheet-"] > .solved { grid-area: hint; margin-top: 0; }
    main[class*="sheet-"] > #words-heading { grid-area: wh; margin-top: 0; }
    main[class*="sheet-"] > .words { grid-area: words; columns: 2 7.5rem; }
    main[class*="sheet-"] > .toolbar { grid-area: tools; margin: 1.25rem 0 0; }
    main[class*="sheet-"] > .howto { grid-area: howto; }
    main[class*="sheet-"] > .puzzle-nav { grid-area: nav; }
    main[class*="sheet-"] > .intro { grid-area: intro; }
    main[class*="sheet-"] > .answers { grid-area: ans; }
    .grid { --cell: clamp(2.75rem, calc((100vh - 15rem) / var(--cells)), 3.5rem); width: calc(var(--cell) * var(--cells)); margin: 0; }
    .grid td { height: var(--cell); font-size: calc(var(--cell) * .62); }
  }
  @media (hover: hover) {
    .grid td:hover { background: var(--selecting-bg); }
    .grid td.found:hover { background: var(--found-bg); }
  }
}
@page { size: letter; margin: 0.5in; }
@media print{
body{background:#fff;color:#000;font-size:12pt}
.site-header,.site-footer,.crumbs,.intro,.toolbar,.status,.timer,.howto,.other,.skip-link{display:none !important}
.puzzle-nav,.level-filter,.levels-nav,.featured,.questions,.quick-hint,.hero-art,.cta,.solved,.stamp{display:none !important}
.grid{background:none}
.wrap{max-width:none;padding:0}
h1{font-size:24pt;line-height:1.4;margin:0 0 0.2in}
.variant{font-size:14pt;border:1.5pt solid #000}
h2{font-size:18pt;line-height:1.4;margin:0.3in 0 0.15in}
.grid{width:auto;margin:0 auto;border:2pt solid #000}
.grid td,.grid td.found,.grid td.start,.grid td.hint,.grid td.selecting{color:#000;background:none;outline:none}
.sheet-easy .grid td{width:0.62in;height:0.62in;font-size:30pt}
.sheet-easy .words{columns:3}
.sheet-medium .grid td{width:0.52in;height:0.52in;font-size:24pt}
.sheet-medium .words{columns:3}
.sheet-hard .grid td{width:0.48in;height:0.48in;font-size:24pt}
.sheet-hard .words{columns:3}
.sheet-easy .answer-wrap{width:6.200in}
.sheet-medium .answer-wrap{width:6.240in}
.sheet-hard .answer-wrap{width:6.240in}
.words{font-size:18pt;line-height:1.4}
.words li{padding:0}
.words li.found{text-decoration:none;color:#000}
.answers{display:block;break-before:page}
.answers h2{margin-top:0}
.answer-wrap{box-sizing:content-box;position:relative;margin:0 auto;border:2pt solid #000}
.answer-wrap .rings{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.answer-grid{position:relative;z-index:1;border:0;background:none}
.answer-grid td{background:none;color:#595959;font-weight:400}
.answer-grid td.hit{background:none;color:#000;font-weight:900}
}