:root {
    --sk-sky: #cfe9f7;
    --sk-sky-2: #dff2ee;
    --sk-sky-3: #fbe7f2;
    --sk-paper: #fdf4e0;
    --sk-paper-2: #f6e8cb;
    --sk-cream-white: #fffaf0;
    --sk-ink: #3a2b33;
    --sk-muted: #6d5762;
    --sk-heading: #2f2430;
    --sk-link: #a92c58;
    --sk-visited: #7d4a72;
    --sk-accent: #d9436a;
    --sk-accent-deep: #8e2140;
    --sk-line: #3a2b33;
    --sk-lemon: #ffe08a;
    --sk-mint: #b7e8d0;
    --sk-pink: #f9c7d9;
    --sk-sky-chip: #bfe0f7;
    --sk-grape: #ddd0f5;
    --sk-shadow: rgba(58, 43, 51, 0.18);
  }
  
  html {
    background-color: var(--sk-sky);
    scrollbar-color: var(--sk-accent-deep) var(--sk-sky);
  }
  
  body {
    min-width: 0;
    margin: 0;
    background-color: var(--sk-sky);
    background-image: linear-gradient(#cfe9f7 0px, #dff2ee 260px, #fbe7f2 560px, #fdf4e0 100%);
    color: var(--sk-ink);
    font-size: 16px;
    line-height: 1.55;
  }
  
  body,
  input,
  button,
  select,
  textarea {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
  }
  
  #outer.wrapper,
  #inner.wrapper {
    background-color: transparent;
    background-image: none;
  }
  
  #inner.wrapper {
    padding-top: 0.75em;
    padding-bottom: 2em;
  }
  
  ::selection {
    background-color: var(--sk-accent-deep);
    color: var(--sk-paper);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .heading {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--sk-heading);
    font-weight: bold;
    letter-spacing: 0.01em;
  }
  
  a,
  a:link {
    color: var(--sk-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  
  a:visited {
    color: var(--sk-visited);
  }
  
  a:hover,
  a:focus,
  a:visited:hover {
    color: var(--sk-accent-deep);
    border-bottom-color: currentcolor;
  }
  
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid var(--sk-accent-deep);
  }
  
  code,
  kbd,
  tt,
  samp,
  var,
  pre {
    font-family: Consolas, Monaco, "Courier New", monospace;
    background-color: var(--sk-paper-2);
    color: var(--sk-ink);
  }
  
  #header {
    background-color: transparent;
  }
  
  #header,
  #header h1,
  #header .heading {
    color: var(--sk-ink);
  }
  
  #header .heading {
    padding: 0.3em 0.45em 0.15em;
  }
  
  #header .heading a {
    display: inline-block;
    padding: 0.1em 0.5em;
    background-color: var(--sk-lemon);
    background-image: none;
    border: 3px solid var(--sk-line);
    border-radius: 0.5em;
    box-shadow: 4px 4px 0 var(--sk-line);
    color: var(--sk-heading);
    font-size: 1.714em;
    line-height: 1.55em;
  }
  
  #header .heading a:visited {
    color: var(--sk-heading);
  }
  
  #header .heading a:hover {
    color: var(--sk-accent-deep);
    border-bottom-color: var(--sk-line);
  }
  
  #header .primary {
    box-sizing: border-box;
    background-color: var(--sk-pink);
    background-image: repeating-linear-gradient(115deg, #f9c7d9 0px, #f9c7d9 18px, #fff6e2 18px, #fff6e2 36px);
    border-top: 3px solid var(--sk-line);
    border-bottom: 3px solid var(--sk-line);
    box-shadow: 0 5px 0 var(--sk-line);
  }
  
  #header .primary > li > a {
    display: block;
    margin: 0.35em 0.18em;
    padding: 0.32em 0.75em;
    background-color: var(--sk-sky-chip);
    background-image: none;
    border: 2px solid var(--sk-line);
    border-radius: 0.6em;
    box-shadow: 3px 3px 0 var(--sk-line);
    color: var(--sk-ink);
    font-weight: bold;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  
  #header .primary > li:nth-child(1) > a {
    background-color: var(--sk-lemon);
  }
  
  #header .primary > li:nth-child(2) > a {
    background-color: var(--sk-mint);
  }
  
  #header .primary > li:nth-child(3) > a {
    background-color: var(--sk-sky-chip);
  }
  
  #header .primary > li:nth-child(4) > a {
    background-color: var(--sk-grape);
  }
  
  #header .primary > li:nth-child(5) > a {
    background-color: var(--sk-pink);
  }
  
  #header .primary > li > a:hover,
  #header .primary > li > a:focus,
  #header .primary > li.dropdown:hover > a,
  #header .primary > li.open > a {
    background-color: var(--sk-accent-deep);
    background-image: none;
    color: var(--sk-paper);
    box-shadow: 1px 1px 0 var(--sk-line);
    border-bottom-color: var(--sk-line);
  }
  
  #header .menu,
  #header .dropdown:hover .menu,
  #header .dropdown.open .menu {
    background-color: var(--sk-paper);
    background-image: none;
    border: 2px solid var(--sk-line);
    border-radius: 0.5em;
    box-shadow: 4px 4px 0 var(--sk-line);
  }
  
  #header .menu a,
  #header .primary .menu a,
  #header .dropdown .menu a {
    color: var(--sk-ink);
  }
  
  #header .menu a:hover,
  #header .primary .menu a:hover {
    background-color: var(--sk-paper-2);
    background-image: none;
    color: var(--sk-accent-deep);
  }
  
  #header .dropdown:hover .menu,
  #header .dropdown.open .menu,
  #header .open .menu {
    display: block;
  }
  
  #header #search .text,
  #header #search .button {
    background-color: var(--sk-cream-white);
    background-image: none;
    color: var(--sk-ink);
    border: 2px solid var(--sk-line);
    border-radius: 0.5em;
    box-shadow: 2px 2px 0 var(--sk-line);
  }
  
  #header #search .button,
  #header #search input[type="submit"] {
    background-color: var(--sk-lemon);
    font-weight: bold;
  }
  
  #dashboard,
  #dashboard.own {
    background-color: var(--sk-paper);
    color: var(--sk-ink);
    border-top-color: var(--sk-accent-deep);
    border-bottom-color: var(--sk-accent-deep);
  }
  
  #dashboard a,
  #dashboard span {
    color: var(--sk-ink);
  }
  
  #dashboard a:hover {
    background-color: var(--sk-paper-2);
    color: var(--sk-accent-deep);
  }
  
  #dashboard ul {
    border-top-color: var(--sk-line);
  }
  
  #dashboard .current {
    background-color: var(--sk-paper-2);
    color: var(--sk-accent-deep);
  }
  
  #main,
  #main.region {
    box-sizing: border-box;
    background-color: var(--sk-paper);
    background-image: repeating-linear-gradient(90deg, rgba(58, 43, 51, 0) 0px, rgba(58, 43, 51, 0) 44px, rgba(58, 43, 51, 0.05) 44px, rgba(58, 43, 51, 0.05) 46px);
    border: 2px solid var(--sk-line);
    border-radius: 1em;
    box-shadow: 6px 6px 0 var(--sk-line);
    color: var(--sk-ink);
  }
  
  li.blurb,
  .listbox li.blurb,
  .index li.blurb {
    background-color: var(--sk-cream-white);
    border: 2px solid var(--sk-line);
    border-top: 0.5em solid var(--sk-lemon);
    border-radius: 0.9em;
    box-shadow: 4px 4px 0 var(--sk-line);
  }
  
  li.blurb:nth-of-type(3n+2) {
    border-top-color: var(--sk-pink);
  }
  
  li.blurb:nth-of-type(3n) {
    border-top-color: var(--sk-mint);
  }
  
  .blurb .header .heading,
  .blurb .header .heading a,
  .blurb .header .heading a:link {
    color: var(--sk-accent-deep);
  }
  
  .blurb .header .heading a:hover {
    color: var(--sk-accent-deep);
    border-bottom-color: var(--sk-accent-deep);
  }
  
  .blurb .datetime {
    color: var(--sk-muted);
  }
  
  .blurb blockquote,
  .blurb .userstuff {
    color: var(--sk-ink);
  }
  
  .blurb dl.stats {
    color: var(--sk-muted);
  }
  
  a.tag,
  ul.tags a.tag,
  ul.commas a.tag,
  dl.meta a.tag,
  li.warnings a.tag,
  li.relationships a.tag,
  li.characters a.tag,
  li.freeforms a.tag,
  .blurb .fandoms a.tag {
    color: var(--sk-link);
    background-color: var(--sk-cream-white);
    border: 1px solid var(--sk-line);
    border-radius: 0.8em;
    padding: 0 0.4em;
  }
  
  li.warnings a.tag {
    color: var(--sk-accent-deep);
    background-color: #fbe0e4;
  }
  
  li.relationships a.tag {
    background-color: #e4f6ec;
  }
  
  li.characters a.tag {
    background-color: #e2f1fb;
  }
  
  li.freeforms a.tag {
    background-color: #fdf1cd;
  }
  
  .blurb .fandoms a.tag {
    background-color: var(--sk-paper-2);
  }
  
  a.tag:hover,
  ul.tags a.tag:hover,
  ul.commas a.tag:hover,
  dl.meta a.tag:hover {
    background-color: var(--sk-accent-deep);
    background-image: none;
    color: var(--sk-paper);
    border-color: var(--sk-line);
  }
  
  a.cloud1,
  a.cloud2,
  a.cloud3,
  a.cloud4 {
    color: var(--sk-muted);
  }
  
  a.cloud5,
  a.cloud6,
  a.cloud7,
  a.cloud8 {
    color: var(--sk-accent-deep);
  }
  
  dl.meta,
  .news dl.meta,
  .listbox,
  fieldset.listbox {
    background-color: var(--sk-paper);
    border: 2px solid var(--sk-line);
    border-radius: 0.75em;
    box-shadow: 3px 3px 0 var(--sk-line);
  }
  
  dl.stats,
  .blurb dl.stats {
    color: var(--sk-muted);
  }
  
  dl.stats .bookmarks,
  dl.stats .hits,
  dl.stats .comments {
    color: var(--sk-accent-deep);
  }
  
  dl.stats a,
  .listbox a {
    color: var(--sk-link);
  }
  
  .listbox .heading {
    color: var(--sk-heading);
  }
  
  fieldset,
  form dl {
    box-sizing: border-box;
    background-color: var(--sk-paper-2);
    border: 2px solid var(--sk-line);
    border-radius: 0.6em;
    box-shadow: none;
  }
  
  input,
  textarea,
  select {
    box-sizing: border-box;
    background-color: var(--sk-cream-white);
    color: var(--sk-ink);
    border: 2px solid var(--sk-line);
    border-radius: 0.45em;
    box-shadow: none;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    background-color: #fffdf6;
  }
  
  .actions a,
  .actions a:link,
  .action,
  .action:link,
  .actions button,
  .actions input,
  input[type="submit"],
  button,
  .actions label,
  #main .actions a,
  #main .action,
  #main .actions button,
  #main input[type="submit"] {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
    background-color: var(--sk-cream-white);
    background-image: none;
    border: 2px solid var(--sk-line);
    border-radius: 0.6em;
    box-shadow: 2px 2px 0 var(--sk-line);
    color: var(--sk-ink);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  
  .actions a:hover,
  .action:hover,
  .actions button:hover,
  input[type="submit"]:hover,
  button:hover,
  #main .actions a:hover,
  #main input[type="submit"]:hover {
    background-color: var(--sk-accent-deep);
    background-image: none;
    border-color: var(--sk-line);
    box-shadow: 1px 1px 0 var(--sk-line);
    color: var(--sk-paper);
  }
  
  .actions a:active,
  .current,
  a.current,
  a:link.current,
  #main .current {
    background-color: var(--sk-accent-deep);
    background-image: none;
    border-color: var(--sk-line);
    box-shadow: 1px 1px 0 var(--sk-line);
    color: var(--sk-paper);
  }
  
  .actions a:active,
  button:active,
  #main .actions a:active {
    transform: translate(1px, 1px);
  }
  
  form.filters {
    box-sizing: border-box;
    background-color: var(--sk-paper);
    border: 2px solid var(--sk-line);
    border-radius: 0.75em;
    box-shadow: 4px 4px 0 var(--sk-line);
    padding: 0.6em;
  }
  
  form.filters .expander {
    background-color: var(--sk-cream-white);
    color: var(--sk-ink);
    border: 2px solid var(--sk-line);
    border-radius: 0.5em;
    font-weight: bold;
  }
  
  form.filters .expander:focus {
    outline: 2px solid var(--sk-accent-deep);
  }
  
  #main .userstuff {
    font-family: Georgia, Palatino, "Book Antiqua", "Times New Roman", serif;
    color: var(--sk-ink);
    line-height: 1.75;
  }
  
  .userstuff p {
    margin-top: 0;
    margin-bottom: 1.1em;
  }
  
  .userstuff blockquote {
    background-color: var(--sk-paper-2);
    border-left: 0.35em solid var(--sk-accent);
    border-radius: 0.5em;
    color: var(--sk-ink);
    padding: 0.2em 1em;
  }
  
  .userstuff h1,
  .userstuff h2,
  .userstuff h3 {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--sk-heading);
    border-bottom-color: var(--sk-line);
  }
  
  .userstuff h3 {
    border-bottom: 0.25em double var(--sk-line);
  }
  
  .preface .summary .heading,
  .preface .notes .heading {
    color: var(--sk-accent-deep);
  }
  
  #chapters .chapter > .userstuff > p:first-of-type:first-letter {
    float: left;
    color: var(--sk-accent);
    font-size: 3.1em;
    line-height: 0.82em;
    padding: 0.05em 0.1em 0 0;
    font-weight: bold;
  }
  
  div.preface,
  .chapter .preface {
    background-color: transparent;
    border-color: var(--sk-line);
  }
  
  .chapter .preface {
    border-top: 2px solid var(--sk-line);
  }
  
  div.preface .title,
  div.preface .byline,
  div.preface .byline a {
    color: var(--sk-heading);
  }
  
  div.preface .title a {
    color: var(--sk-accent-deep);
  }
  
  .preface h3 {
    border-bottom-color: var(--sk-line);
  }
  
  #chapters .chapter .title {
    color: var(--sk-heading);
  }
  
  #main .feedback {
    border-top: 2px solid var(--sk-line);
    padding-top: 0.75em;
  }
  
  #feedback p.kudos {
    color: var(--sk-muted);
  }
  
  #feedback .character_counter {
    color: var(--sk-muted);
  }
  
  textarea.comment_form {
    min-height: 9em;
  }
  
  .pagination a {
    font-weight: bold;
  }
  
  div.comment,
  li.comment {
    background-color: var(--sk-cream-white);
    border: 2px solid var(--sk-line);
    border-radius: 0.75em;
  }
  
  .comment h4.byline {
    background-color: var(--sk-paper-2);
    color: var(--sk-ink);
  }
  
  .comment div.icon {
    border-bottom-color: var(--sk-line);
  }
  
  .thread .even {
    background-color: var(--sk-paper-2);
  }
  
  .flash .notice,
  .notice,
  div.notice {
    background-color: var(--sk-paper-2);
    border: 2px solid var(--sk-line);
    border-radius: 0.6em;
    color: var(--sk-ink);
  }
  
  .flash .error,
  .error,
  div.error {
    background-color: #fbe0e4;
    border: 2px solid #8e2140;
    border-radius: 0.6em;
    color: #5f1a2c;
  }
  
  .flash .caution,
  .caution,
  div.caution {
    background-color: #fdf1cd;
    border: 2px solid #8a6a12;
    border-radius: 0.6em;
    color: #5b4412;
  }
  
  #footer {
    box-sizing: border-box;
    background-color: var(--sk-accent-deep);
    background-image: none;
    border-top: 4px solid var(--sk-line);
    color: var(--sk-paper);
  }
  
  #footer a,
  #footer a:visited,
  #footer button {
    color: var(--sk-paper);
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    text-decoration: underline;
  }
  
  #footer a:hover,
  #footer button:hover {
    color: var(--sk-paper);
    background-color: transparent;
    background-image: none;
    border: 0;
  }
  
  #footer .heading {
    color: var(--sk-paper);
  }