/* Skin: photocopied edges, pencil lines and restrained colour. */
:root {
  color-scheme: light;
  --p-ink: #2E2E2E;
  --p-paper: #E9E1D4;
  --p-yellow: #B5A642;
  --p-red: #8C2727;
  --p-orange: #A84700;
  --p-blue: #3B5998;
  --p-olive: #6B8E23;
  --p-concrete: #7A7A7A;
}
body { background-color: var(--p-paper); color: var(--p-ink); }
a { color: var(--p-blue); }
button { color: var(--p-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--p-blue); outline-offset: 4px; }
[class$="-header"] { border-bottom: 2px dashed var(--p-red); }
[class$="-masthead"] { color: var(--p-ink); }
[class$="-masthead"] span:last-child { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 6px; }
[class$="-site-role"], [class$="-label"] { color: var(--p-red); }
[class$="-chapter-index"] summary { border: 2px dashed var(--p-ink); background: var(--p-paper); border-radius: 8px; }
[class$="-chapter-index"][open] summary { background: var(--p-yellow); }
[class$="-index-sheet"] { background: var(--p-paper); border: 2px dashed var(--p-red); box-shadow: 7px 7px 0 var(--p-ink); border-radius: 8px; }
[class$="-index-item"] a { color: var(--p-ink); text-decoration: none; border-bottom: 1px solid var(--p-concrete); }
[class$="-index-item"] a:hover { text-decoration: underline; color: var(--p-red); }
[class$="-index-item"] a[aria-current="page"] { background: var(--p-yellow); border-bottom: 2px solid var(--p-ink); }
[class$="-language-button"] { border: 2px solid var(--p-ink); background: transparent; border-radius: 8px; }
[class$="-language-button"][aria-pressed="true"] { background: var(--p-ink); color: var(--p-paper); }
[class$="-skip"] { background: var(--p-paper); color: var(--p-ink); border: 2px solid var(--p-blue); border-radius: 8px; }
[class$="-hero"] { border-bottom: 2px dashed var(--p-concrete); }
[class$="-hero-art"] { background: var(--p-paper); color: var(--p-ink); box-shadow: 4px 5px 0 var(--p-concrete); border: 1px solid var(--p-ink); border-radius: 8px; }
[class$="-hero-art"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; background-image: radial-gradient(var(--p-ink) 0.6px, transparent 0.8px); background-size: 7px 9px; border-radius: 8px; }
[class$="-line-art"] { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; filter: saturate(0.8) contrast(1.3); }
[class$="-ink-scuffs"] { stroke-width: 1; color: var(--p-olive); }
[class$="-paper-tape"] { background: var(--p-yellow); opacity: 0.95; transform: rotate(3deg); z-index: 1; clip-path: polygon(0 10%, 6% 0, 9% 8%, 95% 3%, 100% 15%, 95% 25%, 100% 36%, 96% 53%, 100% 69%, 95% 84%, 98% 100%, 4% 97%, 0 84%, 5% 67%, 0 52%, 5% 37%, 0 23%); }
[class$="-hero-art"] figcaption { position: relative; z-index: 1; color: var(--p-red); }
[class$="-button"] { color: var(--p-paper); background: var(--p-orange); border: 2px solid var(--p-orange); border-radius: 8px; text-decoration: none; }
[class$="-button"]:hover { background: var(--p-red); border-color: var(--p-red); }
[class*="-word-card-"] { text-decoration: none; background: var(--p-paper); border: 2px dashed var(--p-red); color: var(--p-ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--p-concrete); }
[class*="-word-card-"] h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
[class$="-word-card-1"] { background: var(--p-ink); color: var(--p-paper); border-color: var(--p-ink); }
[class$="-word-card-1"] [class$="-label"] { color: var(--p-yellow); }
[class$="-word-card-2"] { border-color: var(--p-blue); }
[class$="-word-card-3"] { background: var(--p-yellow); border-color: var(--p-ink); }
[class$="-word-card-3"] [class$="-label"] { color: var(--p-ink); }
[class$="-word-card-0"]::before { content: ""; display: block; height: 16px; width: 64px; background: var(--p-concrete); position: absolute; top: -8px; right: 24px; transform: rotate(-3deg); }
[class$="-question"] h2 { border-left: 6px solid var(--p-red); padding-left: 16px; }
[class$="-ask-note"] { background: var(--p-yellow); border: 2px dashed var(--p-ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--p-concrete); }
[class$="-ask-note"] [class$="-label"] { color: var(--p-ink); }
[class$="-note-rule"] { border-bottom: 2px solid var(--p-ink); border-top: 1px solid var(--p-ink); transform: rotate(-2deg); }
[class$="-sources-box"] { border: 2px dashed var(--p-blue); border-radius: 8px; background: var(--p-paper); }
[class$="-sources-box"] a { border-bottom: 1px solid var(--p-concrete); }
[class$="-pager"] a { border: 2px solid var(--p-ink); border-radius: 8px; text-decoration: none; color: var(--p-ink); }
[class$="-pager"] a:hover { border-color: var(--p-orange); }
[class$="-pager"] a:hover > span:last-child { text-decoration: underline; }
[class$="-footer"] { border-top: 2px dashed var(--p-ink); }
[class$="-footer-mark"] { color: var(--p-red); }
[data-page="start"] [class$="-hero"] { background: var(--p-ink); color: var(--p-paper); border: 0; border-radius: 8px 8px 0 0; }
[data-page="start"] [class$="-hero"]::after { content: ""; position: absolute; height: 12px; left: 0; right: 0; bottom: -10px; background: var(--p-ink); clip-path: polygon(0 0, 100% 0, 100% 45%, 96% 85%, 94% 25%, 89% 55%, 85% 90%, 80% 35%, 76% 70%, 73% 30%, 67% 95%, 63% 40%, 59% 85%, 54% 25%, 49% 75%, 45% 35%, 41% 95%, 37% 45%, 32% 80%, 28% 20%, 23% 70%, 18% 35%, 13% 95%, 8% 30%, 3% 75%, 0 45%); }
[data-page="start"] [class$="-hero-copy"] [class$="-label"] { color: var(--p-yellow); }
[data-page="start"] [class$="-hero-deck"] { text-decoration: underline; text-decoration-color: var(--p-yellow); text-underline-offset: 8px; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: no-preference) {
  [class$="-hero-copy"] { animation: p-fade-rise 420ms ease-out both; }
  [class*="-word-card-"], [class$="-button"], [class$="-pager"] a, [class$="-language-button"] { transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease; }
  [class*="-word-card-"]:hover, [class$="-button"]:hover, [class$="-pager"] a:hover { transform: translateY(-3px); }
  [class$="-chapter-index"][open] li { animation: p-index-enter 420ms ease-out both; }
  [class$="-chapter-index"][open] li:nth-child(2) { animation-delay: 80ms; }
  [class$="-chapter-index"][open] li:nth-child(3) { animation-delay: 160ms; }
  @keyframes p-fade-rise { from { transform: translateY(6px); opacity: 0.96; } to { transform: translateY(0); opacity: 1; } }
  @keyframes p-index-enter { from { transform: translateX(4px); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  body { background: white; color: black; }
  [data-page="start"] [class$="-hero"] { background: white; color: black; }
  [data-page="start"] [class$="-hero"]::after { display: none; }
  [class$="-ask-note"], [class$="-sources-box"] { background: white; box-shadow: none; }
  [class$="-label"] { color: black !important; }
}