/* Little Log's light theme: blush, lavender and mint with rounded paper cards. */
:root {
  color-scheme: light;
  --page: #fff5fa; --panel: #fce7f1; --panel-deep: #fffdfd;
  --ink: #563b68; --muted: #786080; --pink: #ad3c79; --orchid: #8060af;
  --line: #dac4df;
  --display: 'Comic Sans MS', 'Chalkboard SE', 'Trebuchet MS', sans-serif;
  --body: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --card-shadow: 0 5px 0 #e7d6ed70, 0 10px 28px #9671a012;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 105px; scrollbar-color: #c9afd9 var(--page); }
body { margin: 0; color: var(--ink); font: 15px/1.7 var(--body); background: radial-gradient(circle at 1px 1px, #e5cee566 1.5px, transparent 2px), linear-gradient(135deg, #fff6fa, #f6f2ff 55%, #f0faf6); background-size: 24px 24px, auto; }
a { color: var(--pink); text-underline-offset: 4px; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; }
::selection { background: #e9ddfa; color: var(--ink); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; padding: 12px 20px; color: var(--ink); background: #fff0bc; border-radius: 14px; }
.skip-link:focus { top: 12px; }
.topbar { min-height: 82px; display: flex; align-items: center; gap: 26px; padding: 14px 30px; background: #fff9fd; position: sticky; top: 0; z-index: 4; border-bottom: 1px solid var(--line); box-shadow: 0 3px 16px #9874a01c; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; min-width: 247px; font: 700 23px/1.2 var(--display); letter-spacing: -.4px; white-space: nowrap; }
.brand-logo { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; }
.brand small { display: block; font: 700 11px/1.5 var(--body); letter-spacing: .3px; margin-top: 5px; color: var(--pink); }
.search-trigger { display: flex; align-items: center; gap: 10px; max-width: 435px; width: 100%; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: 14px; padding: 10px 15px; text-align: left; font-size: 13px; }
.search-trigger > span { font-size: 25px; line-height: 1; }
kbd { font: 11px Consolas, monospace; border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; margin-left: auto; }
.play-link { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: none; padding: 10px 14px; border: 1px solid #cf8db0; border-radius: 14px; color: #66334e; background: #f6c8dd; box-shadow: 0 3px 0 #e7accb; }
.play-link span { margin-left: 9px; }
.wiki-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr) 205px; max-width: 1540px; margin: auto; min-height: calc(100vh - 82px); }
.sidebar { padding: 27px 19px 30px; position: sticky; top: 82px; height: calc(100vh - 82px); overflow-y: auto; background: linear-gradient(155deg, #ffedf5, #f0e8fc 60%, #e9f7ef); border-right: 1px solid var(--line); box-shadow: inset -1px 0 #fff; }
.guide-nav summary { display: none; }
.nav-group { font: 700 12px/1.6 var(--body); color: var(--pink); margin: 18px 12px 9px; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li a { display: block; text-decoration: none; color: #705777; padding: 9px 12px; font-size: 13px; margin: 4px 0; border: 1px solid transparent; border-radius: 16px; }
.sidebar a:hover { background: #ffffffb3; }
.sidebar a[aria-current] { color: #963367; font-weight: 700; background: #fff7fc; border-color: #d9acce; box-shadow: 0 3px 0 #e8cfe7; }
.sidebar-note { margin: 29px 12px 0; border-top: 1px solid var(--line); padding-top: 23px; }
.sidebar-note img { display: block; border-radius: 12px; }
.sidebar-note p { color: var(--muted); font: 13px/1.8 var(--display); }
.online-badge { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #416658; }
.online-badge i { width: 7px; height: 7px; border-radius: 50%; background: #5e9380; }
main { min-width: 0; padding: 27px 43px 0; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.page-heading { position: relative; padding-bottom: 27px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.eyebrow { font-size: 11px; font-weight: 700; color: var(--pink); }
.eyebrow > span:first-child { margin: 0 10px; color: var(--orchid); }
h1 { font: 700 clamp(32px, 3.4vw, 49px)/1.2 var(--display); letter-spacing: -.8px; margin: 20px 0; color: var(--ink); text-wrap: balance; white-space: pre-line; }
.lede { font-size: 15px; color: var(--muted); max-width: 540px; line-height: 1.8; margin: 0; }
.page-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 24px; }
.home .page-meta { display: none; }
.home .page-heading { padding: 26px 28px 32px; box-shadow: var(--card-shadow); background: linear-gradient(125deg, #fff0f6, #f6f0fe); border: 1px solid var(--line); border-top: 5px solid #f9cddd; border-radius: 24px; }
.home h1 { max-width: calc(100% - 125px); font-size: clamp(34px, 3.2vw, 46px); margin: 22px 0; }
.home .lede { max-width: calc(100% - 145px); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 25px; }
.button-primary { display: inline-flex; gap: 24px; align-items: center; color: #66334e; background: #f6c8dd; text-decoration: none; padding: 13px 18px; font-size: 13px; font-weight: 700; border: 1px solid #cf8db0; border-radius: 14px; box-shadow: 0 3px 0 #e7accb; }
.button-primary:hover, .play-link:hover { background: #f9dce9; }
.text-link { font-size: 12px; }
.hero-sigil { position: absolute; right: 26px; top: 80px; pointer-events: none; width: 112px; }
.hero-sigil img { display: block; width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 5px 0 #e7d6ed70; transform: rotate(5deg); }
.hero-sigil span { display: block; font: 12px/1.5 var(--display); margin-top: 18px; color: var(--muted); text-align: center; }
.chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
.chapter-card { min-width: 0; background: #fff0f6; border: 1px solid var(--line); border-radius: 20px; padding: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--card-shadow); transition: border-color .15s, background .15s; }
.chapter-card:nth-child(3n+2) { background: #f1ebff; }
.chapter-card:nth-child(3n) { background: #e9f7ef; }
.chapter-card:hover { border-color: #ab77ac; background: #fffdfd; }
.card-top { display: flex; justify-content: space-between; font: 700 15px var(--display); color: var(--pink); margin-bottom: 20px; }
.card-kicker { color: var(--muted); font-size: 11px; font-weight: 700; }
.chapter-card h2 { font: 700 19px/1.3 var(--display); color: var(--ink); margin: 10px 0; letter-spacing: -.3px; }
.chapter-card p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 0; }
.prose { font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.article .prose { padding: 25px 28px; background: var(--panel-deep); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow); }
.prose > h2 { font: 700 25px/1.3 var(--display); letter-spacing: -.5px; color: var(--pink); margin: 40px 0 17px; padding-top: 5px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font: 700 18px/1.4 var(--display); margin: 28px 0 13px; }
.prose p { margin: 15px 0; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 23px; }
.prose li { padding-left: 5px; margin-bottom: 10px; }
.prose li::marker { color: var(--pink); }
.prose code { font-size: .88em; color: #654587; background: #f4ecfc; padding: 2px 5px; border-radius: 5px; }
.prose pre { overflow-x: auto; background: #f4ecfc; padding: 16px; border-radius: 14px; }
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin: 22px 0; background: var(--panel-deep); }
table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.8; }
th { text-align: left; background: #f1ebff; color: #654587; font-weight: 700; }
th, td { padding: 13px 15px; vertical-align: top; border-bottom: 1px solid #e8d9ec; min-width: 115px; }
tr:last-child td { border-bottom: 0; }
.on-this-page { padding: 32px 20px 0 4px; position: sticky; top: 82px; height: calc(100vh - 82px); overflow-y: auto; }
.on-this-page .nav-group { margin-left: 0; margin-bottom: 17px; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc-subheading { padding-left: 12px; }
.toc a { display: block; border-left: 2px solid var(--line); padding: 5px 0 5px 13px; margin-bottom: 5px; text-decoration: none; color: var(--muted); font-size: 12px; line-height: 1.7; }
.toc a:hover, .toc a[aria-current] { color: var(--pink); border-left-color: var(--pink); }
.help-note { border: 1px dashed #d3b982; border-radius: 16px; background: #fffaf0; margin-top: 30px; padding: 16px; font-size: 12px; color: #735925; }
.help-note a { display: block; margin-top: 8px; text-decoration: none; }
.chapter-pagination { display: flex; justify-content: space-between; gap: 20px; margin: 35px 0 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.chapter-pagination a { flex: 1; text-decoration: none; font-size: 13px; }
.chapter-pagination a > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.chapter-pagination a:last-child { text-align: right; }
.page-footer { padding: 21px 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); display: flex; gap: 15px; justify-content: space-between; }
.page-footer a { white-space: nowrap; text-decoration: none; }
/* Search is a native dialog so keyboard focus stays with the active search. */
.search-dialog { width: min(680px, calc(100% - 30px)); max-height: 80vh; padding: 29px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--panel-deep); box-shadow: var(--card-shadow); }
.search-dialog::backdrop { background: #59456770; }
.search-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
.search-header label { font: 700 22px/1.3 var(--display); color: var(--pink); letter-spacing: -.5px; }
.search-close { background: #f4ecfc; color: #624270; border: 1px solid #c9afd9; border-radius: 10px; padding: 5px 10px; font-size: 12px; }
#wiki-search { width: 100%; padding: 13px 15px; background: white; color: var(--ink); border: 1px solid #c8afcf; border-radius: 12px; font-size: 16px; }
#wiki-search::placeholder { color: var(--muted); }
#search-status, .search-tip { font-size: 12px; color: var(--muted); }
#search-results { list-style: none; padding: 0; margin: 0; }
#search-results a { display: block; padding: 13px 12px; text-decoration: none; border: 1px solid transparent; border-radius: 14px; }
#search-results a:hover, #search-results a:focus-visible { background: var(--panel); border-color: #d9acce; }
#search-results strong, #search-results small { display: block; }
#search-results strong { font-size: 14px; }
#search-results small { font-size: 11px; color: var(--muted); margin-top: 2px; }
#search-results p { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.search-tip { border-top: 1px solid var(--line); padding-top: 12px; }
#page-status { padding: 18px; border: 1px solid var(--line); border-radius: 16px; font-size: 14px; background: var(--panel-deep); }
.retry-button { border: 1px solid #cf8db0; border-radius: 12px; color: #66334e; background: #f6c8dd; padding: 7px 12px; font-weight: 700; }
.tutorial-picture { margin: 22px 0 30px; }
.picture-trigger { display: block; max-width: 100%; padding: 0; margin: 0 auto; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #221730; cursor: zoom-in; }
.picture-trigger img { display: block; max-width: 100%; height: auto; }
.picture-trigger:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.tutorial-picture figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.picture-dialog { width: min(1500px, 96vw); max-width: 96vw; max-height: 94vh; padding: 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--page); color: var(--ink); }
.picture-dialog::backdrop { background: #21132de0; }
.picture-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.picture-tools button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
.picture-dialog > p { font-size: 14px; }
.picture-viewport { max-height: 70vh; overflow: auto; }
.picture-viewport img { display: block; max-width: 100%; height: auto; margin: auto; }
.picture-viewport.actual-size img { max-width: none; margin: 0; }
@media (max-width: 1190px) {
  .wiki-layout { grid-template-columns: 225px minmax(0, 1fr); } .on-this-page { display: none; }
  .topbar { gap: 16px; padding-right: 20px; padding-left: 20px; } .brand { min-width: 210px; font-size: 21px; }
  main { padding-right: 30px; padding-left: 30px; } .hero-sigil { display: none; } .home h1, .home .lede { max-width: 100%; }
}
@media (max-width: 760px) {
  .topbar { min-height: 72px; padding: 12px 16px; gap: 12px; }
  .brand { min-width: 0; font-size: 18px; gap: 9px; letter-spacing: -.5px; }
  .brand-logo { width: 36px; height: 36px; } .brand small { font-size: 9px; margin-top: 4px; }
  .search-trigger { margin-left: auto; width: auto; font-size: 0; padding: 7px 10px; gap: 0; } .search-trigger kbd { display: none; } .search-trigger > span { font-size: 24px; }
  .play-link { margin-left: 0; padding: 9px 7px; font-size: 10px; } .play-link span { display: none; }
  .wiki-layout { display: block; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 20px; box-shadow: none; }
  .guide-nav summary { display: flex; justify-content: space-between; padding: 13px 0; font-size: 13px; font-weight: 700; color: var(--pink); cursor: pointer; }
  .guide-nav nav { padding-bottom: 20px; } .sidebar-note { display: none; }
  main { padding: 23px 18px 0; } .breadcrumb { margin-bottom: 23px; } h1 { font-size: 34px; }
  .eyebrow { font-size: 10px; } .eyebrow > span:first-child { margin: 0 5px; }
  .home .page-heading { padding: 24px 21px 27px; } .home h1 { font-size: 34px; } .lede { font-size: 14px; }
  .hero-actions { gap: 16px; } .button-primary { padding: 12px; gap: 12px; font-size: 12px; }
  .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .chapter-card { padding: 15px; } .chapter-card h2 { font-size: 18px; } .chapter-card p { font-size: 12px; }
  .article .prose { padding: 19px 16px; } .prose > h2 { font-size: 25px; }
  th, td { padding: 12px; min-width: 105px; }
  .page-footer { flex-wrap: wrap; } .search-dialog { padding: 22px; max-height: 85vh; }
}
@media (max-width: 370px) { .chapter-grid { grid-template-columns: 1fr; } .home h1 { font-size: 30px; } .play-link { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .topbar, .sidebar, .on-this-page, .search-dialog, .chapter-pagination, .page-footer { display: none !important; } .wiki-layout { display: block; } main { padding: 0; } body, .prose, .article .prose { background: white; color: black; border: 0; box-shadow: none; } .prose strong, .prose h2, .prose h3 { color: black; } .table-scroll { overflow: visible; } }