/*
@font-face {
    font-family: 'Lit';
    src: url('/static/fonts/LiterataTT_var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-optical-sizing: 7 72;
}

@font-face {
    font-family: 'Lit';
    src: url('/static/fonts/LiterataTT_var-Italic.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-optical-sizing: 7 72;
}

@font-face {
  font-family: "iA Writer Mono V";
  src: url('/static/fonts/iAWriterMonoV.ttf');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "iA Writer Mono V";
  src: url('/static/fonts/iAWriterMonoV.ttf');
  font-weight: 100 900;
  font-style: italic;
}
*/
@font-face {
  font-family: "mdlorien";
  src: url("/static/fonts/MDLorienTrial-Book.otf");
  font-style: normal;
}
@font-face {
  font-family: "mdlorien";
  src: url("/static/fonts/MDLorienTrial-BookItalic.otf");
  font-style: italic;
}
* {
  box-sizing: border-box;
  font-family: mdlorien, Iowan Old Style, Charter, Georgia, Times New Roman;
  font-variation-settings: "opsz" 25;
  font-weight: 380;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

::selection {
  background: #3b485a;
  color: #bbb;
}

.container {
  margin: 0px auto;
  max-width: 640px;
  padding: 0 20px;
  width: 100%;
}

.button {
  background: #0099cc;
  border-radius: 1em;
  color: #444;
  padding: 3px 15px 5px;
  text-decoration: none;
}
.button:hover {
  background: #777;
}

hr {
  background: #ccc;
  border-width: 0;
  height: 1px;
  margin: 2em auto;
  text-align: center;
  width: 80%;
}

.links {
  color: #bbb;
}
.links a {
  color: #0099cc;
  text-decoration: none;
}
.links a:hover {
  color: #777;
}

/* Navigation */
/* -------------------------------------------------- */
nav[role=menu] {
  transition: transform 0.15s cubic-bezier(0.2, 0.3, 0.25, 0.9);
  -webkit-overflow-scrolling: touch;
  transform: translate3d(320px, 0, 0);
  background: #fff;
  bottom: 0;
  right: 0;
  position: fixed;
  top: 0;
  width: 320px;
  z-index: 500000;
  display: flex;
  height: 100%;
  flex-direction: column;
}
nav[role=menu] .group.scene {
  border-bottom: solid 1px #ddd;
  padding-bottom: 1.5em;
}
nav[role=menu] .group.scene .revision {
  font-size: 0.8em;
  line-height: 1.5em;
}
nav[role=menu] .group.story {
  border-bottom: solid 1px #ddd;
  padding-bottom: 1.5em;
}
nav[role=menu] .group.stories {
  font-size: 1.1em;
  font-style: italic;
  line-height: 1.8em;
}
nav[role=menu] .group.stories a {
  color: #111;
}
nav[role=menu] .group.stories a:hover {
  color: #6baf60;
}
nav[role=menu] .group + .group {
  margin-top: 1.5em;
}
@media screen and (min-width: 700px) {
  nav[role=menu] {
    width: 390px;
    transform: translate3d(390px, 0, 0);
  }
}

#page {
  transition: filter 0.4s, box-shadow 0.4s;
}

body.active-nav nav[role=menu] {
  box-shadow: 0 0 25px 15px;
  transform: translate3d(0, 0, 0);
}
body.active-nav #page {
  filter: blur(7px);
  position: fixed;
  width: 100%;
  height: 100%;
}
body.active-nav #page .mask {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 5000000000;
}

/* Header */
/* -------------------------------------------------- */
header[role=banner] {
  border-bottom: solid 2px #aad1a3;
}
header[role=banner] > .container {
  -webkit-display: flex;
  display: flex;
}
header[role=banner] > .container a {
  color: #6baf60;
  display: block;
  font-size: 1.1rem;
  text-decoration: none;
}
header[role=banner] > .container a:hover {
  color: #777;
}
header[role=banner] > .container span.words {
  color: #4d4f50;
}
header[role=banner] > .container span.words span {
  color: #858585;
}
header[role=banner] > .container .left {
  -webkit-flex: 1;
  flex: 1;
}
header[role=banner] > .container .right {
  text-align: right;
}
header[role=banner] > .container h1 {
  align-items: baseline;
  display: flex;
  font-size: 1em;
  font-weight: normal;
  justify-content: space-between;
  margin: 0;
  padding: 0.8em 0 0.1rem;
  width: 100%;
}
header[role=banner] > .container h1 a {
  color: #6baf60;
}
header[role=banner] > h1.container {
  color: #999;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.7em;
  margin-top: 0;
}
header[role=banner] > h1.container span {
  color: #111;
}
header[role=banner] > h1.container a {
  color: #111;
  font-size: 1em;
  padding: 0;
}
header[role=banner] > h1.container a:hover {
  color: #6baf60;
}
header[role=banner] > .summary.container {
  color: #888;
  display: block;
  font-size: 0.9em;
  font-style: italic;
  line-height: 1.3em;
  margin-bottom: 0.5em;
  margin-top: -0.5em;
}

/* Tray */
/* -------------------------------------------------- */
#tray {
  border-bottom: solid 2px #aad1a3;
  display: none;
}
#tray textarea {
  -webkit-overflow-scrolling: touch;
  border: none;
  font-size: 1.4em;
  height: 250px;
  line-height: 1.35em;
  overflow-y: scroll;
  padding: 1em 0;
  resize: none;
  width: 100%;
}
#tray textarea:focus {
  outline: none;
}
#tray .controls {
  overflow: hidden;
  padding: 0 0 1em;
  text-align: right;
}
#tray .controls .button {
  display: inline-block;
}

/* Dashboard */
/* -------------------------------------------------- */
.dashboard .daily-words {
  background: #17181c;
  color: #636979;
  font-size: 1.3em;
  padding-bottom: 0.6em;
  padding-top: 0.5em;
}
.dashboard .daily-words span {
  color: #ddd;
}
.dashboard .story {
  /*
  &:first-of-type {
    border-top: solid 1px hsl(20, 5%, 13%);
  }

  border-bottom: solid 1px hsl(20, 5%, 13%);
  */
}
.dashboard .story a {
  color: #111;
  display: block;
  text-decoration: none;
}
.dashboard .story a:hover {
  color: #6baf60;
}
.dashboard .story a h2 {
  font-size: 1.2rem;
  font-weight: normal;
  margin: 0;
}
.dashboard .story a .info {
  color: #888;
  font-style: italic;
  margin-top: 2px;
}
.dashboard .story a .excerpt {
  color: #504b49;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 1pt;
}
.dashboard .backburnered {
  margin-top: 2em;
}
.dashboard .backburnered h3 {
  color: #888;
  font-weight: 400;
  margin-bottom: 0.2em;
  margin-top: 0;
}
.dashboard .backburnered .story {
  border: none;
  font-size: 0.9rem;
}
.dashboard .backburnered .story a h2 {
  padding: 0.1rem 0;
}

/* Story detail */
/* -------------------------------------------------- */
.scene > a {
  -webkit-display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  border-top: solid 1px #ddd;
  color: #111;
  display: flex;
  padding-bottom: 0.2em;
  padding-top: 0.2em;
  text-decoration: none;
}
.scene > a:hover {
  color: #6baf60;
}
.scene .num {
  color: #b68f76;
  font-size: 0.8em;
  line-height: 24px;
  width: 2em;
}
.scene .info {
  flex: 1;
}
.scene .info h3 {
  font-weight: 400;
  margin: 0;
}
.scene .info .meta {
  color: #999;
  font-size: 0.8em;
  line-height: 1.3em;
  margin-top: 2px;
}
.scene .info .meta a {
  color: #555;
}
.scene .chapter {
  color: #666;
  font-size: 1em;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 0.2em;
  margin-top: 1.4em;
}
.scene h2 {
  color: #999;
  font-size: 1.1em;
  font-style: italic;
  font-weight: normal;
}
.scene p + h2 {
  margin-top: 2em;
}
.scene.chapter {
  display: flex;
  margin-top: 0.75em;
}
.scene.chapter:first-of-type {
  margin-top: 0;
}
.scene.chapter .chapter {
  font-size: 0.8em;
  margin: 0;
  width: 40px;
}
.scene.chapter .chapter + a {
  margin-left: 7px;
}
.scene.chapter > a {
  flex: 1;
}
.scene > a:first-child {
  flex: 1;
}

.story-detail .scenes {
  margin-top: 1.5rem;
}
.story-detail .scenes .scene {
  display: flex;
}
.story-detail .scenes .scene .scene-wrapper {
  flex: 1;
}
.story-detail .scenes .scene .handle {
  color: #f00;
}
.story-detail .scenes .scene + .scene {
  margin-top: 1rem;
}
.story-detail .scenes .scene h2 {
  margin-bottom: 0;
  margin-right: 17px;
  margin-top: 0.5em;
  width: 42px;
}
.story-detail .scenes .scene h2.chapter {
  background: #222;
  border-radius: 5px;
  color: #555;
  font-size: 0.7em;
  letter-spacing: 0.04em;
  padding-top: 3px;
  text-align: center;
}
.story-detail .scenes .scene h2.chapter .number {
  color: #999;
  display: block;
  font-size: 1.7em;
  letter-spacing: 0;
}
.story-detail .scenes .scene a.scene-data {
  flex: 1;
  text-decoration: none;
}
.story-detail .scenes .scene + .scene.chapter {
  border-top: solid 1px #333;
  margin-top: 5px;
  padding-top: 5px;
}
.story-detail .scenes.sortable .scene:first-child > a {
  border-top: none;
}
.story-detail .scenes.sortable .handle {
  -webkit-align-items: center;
  -webkit-display: flex;
  align-items: center;
  background: #eee;
  border-radius: 3px;
  color: #555;
  cursor: pointer;
  display: flex;
  padding: 2px 15px 11px;
  text-align: center;
}
.story-detail .scenes.sortable .handle:hover {
  background: #444;
  color: #fff;
}

@media screen and (min-width: 600px) {
  .story-detail .summary {
    font-size: 1.1em;
  }
  .story-detail .scene {
    font-size: 1.1em;
    line-height: 1.45em;
  }
}
/* Drafts */
/* -------------------------------------------------- */
.story-lists {
  border-top: solid 1px #181818;
  padding-bottom: 2em;
  padding-top: 1rem;
}
.story-lists h2 {
  color: #666;
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 0;
}
.story-lists h2 a {
  font-size: 1rem;
  margin-left: 0.5em;
}
.story-lists ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.story-lists li {
  line-height: 1.1em;
}
.story-lists li + li {
  margin-top: 0.5em;
}
.story-lists a {
  color: #0099cc;
  text-decoration: none;
}
.story-lists a:hover {
  color: #777;
}

/* Scene detail */
/* -------------------------------------------------- */
.scene-detail .summary {
  color: #444;
  line-height: 1.4em;
  padding: 0.7em 0 0.7em;
}
.scene-detail .summary .scene {
  -webkit-display: flex;
  border-bottom: solid 1px #ddd;
  display: flex;
  padding-bottom: 0.6em;
}
.scene-detail .text {
  font-size: 1.2em;
  line-height: 1.45em;
  padding-bottom: 1.4em;
  padding-top: 0.7em;
}
.scene-detail .text p {
  margin: 0;
}
.scene-detail .text p + p {
  text-indent: 1.25em;
}
.scene-detail .text hr + p {
  text-indent: 0;
}
.scene-detail .text .comment {
  color: #999;
  font-style: italic;
  margin: 2em 0;
  padding: 0 1em 0 1.25em;
}
.scene-detail .fragment + .fragment {
  border-top: solid 1px #ddd;
  margin-top: 2em;
  padding-top: 2em;
}

@media screen and (min-width: 650px) {
  .scene-detail .text {
    font-size: 1.3em;
    line-height: 1.45em;
  }
}
/* Control bar setup */
/* -------------------------------------------------- */
.wrapper {
  height: 100%;
}

#page {
  -webkit-display: flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#pageframe {
  -webkit-flex: 1;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}
#pageframe #content {
  padding-bottom: 5em;
}
#pageframe .content {
  -webkit-display: flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
  height: 100%;
}
#pageframe .content .text {
  height: 100%;
  width: 100%;
}
#pageframe .content textarea {
  -webkit-flex: 1;
  -webkit-overflow-scrolling: touch;
  border: none;
  flex: 1;
  font-size: 1.2em;
  height: 100%;
  line-height: 1.45em;
  overflow-y: scroll;
  padding: 1em 2px 4em;
  resize: none;
  width: 100%;
}
#pageframe .content textarea:focus {
  outline: none;
}

#frame {
  border: none;
  font-size: 1.2em;
  line-height: 1.45em;
  padding: 1em 20px 4em;
  resize: none;
  width: 100%;
}
@media screen and (min-width: 700px) {
  #frame {
    padding-top: 1.8em;
  }
}
#frame:focus {
  outline: none;
}

/* Media queries */
@media screen and (min-width: 640px) {
  #frame {
    font-size: 1.3em;
    line-height: 1.45em;
    padding-bottom: 100px;
    padding-left: calc((100% - 600px) / 2);
    padding-right: calc((100% - 600px) / 2);
    /*		padding-top: 25px; */
  }
}
footer#footer {
  background: #0c0707;
  font-size: 1.1em;
  z-index: 69000;
}
footer#footer.local-storage {
  background: #24291e;
  border-top-color: #000 !important;
}
footer#footer.local-storage .controls a, footer#footer.local-storage .controls a.menu, footer#footer.local-storage .controls .button {
  color: #59674c;
}
footer#footer.local-storage .controls a.menu:hover, footer#footer.local-storage .controls a.cancel:hover {
  color: #c8ff61;
}
footer#footer.local-storage .controls .button:hover {
  color: #c8ff61;
}
footer#footer.local-storage .daily-word-count {
  color: #59674c;
}
footer#footer .controls {
  -webkit-align-items: center;
  -webkit-display: flex;
  align-items: center;
  display: flex;
  padding-bottom: 7px;
  padding-top: 7px;
}
footer#footer .controls .button:first-of-type {
  flex: 1;
  margin-left: 0;
}
footer#footer .controls a.menu, footer#footer .controls a.cancel {
  color: #3c3f49;
  padding-bottom: 6px;
  text-decoration: none;
}
footer#footer .controls a.menu:hover, footer#footer .controls a.cancel:hover {
  color: #fff;
}
footer#footer .controls .button {
  color: #3c3f49;
  background: none;
  margin-left: 2em;
  padding: 2px 0px 6px;
}
footer#footer .controls .button:hover {
  color: #fff;
}

/* Scene edit */
/* -------------------------------------------------- */
.scene-edit {
  height: 100%;
}

/* Story edit */
/* -------------------------------------------------- */
.story-edit {
  height: 100%;
}

/* Inbox */
/* -------------------------------------------------- */
.inbox .links {
  margin-bottom: 2em;
}
.inbox .links .move-inbox {
  float: right;
}
.inbox textarea.inbox-text {
  font-size: 1.2em;
  min-height: 500px;
  width: 100%;
}

/* Full draft */
/* -------------------------------------------------- */
.full-draft {
  font-size: 1.3em;
  line-height: 1.45em;
  padding: 1.4em 0;
}
.full-draft p {
  margin: 0;
}
.full-draft p + p {
  text-indent: 1.25em;
}
.full-draft .divider {
  font-size: 0.6em;
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: center;
}
.full-draft .scene:first-child .chapter {
  margin-top: 2em;
}
.full-draft .chapter {
  margin-top: 3em;
  margin-bottom: 1em;
}
.full-draft .comment {
  color: #999;
  font-style: italic;
  margin: 2em 0;
  padding: 0 1em 0 1.25em;
}
.full-draft .placeholder {
  color: #666;
  font-style: italic;
}
.full-draft .placeholder .synopsis {
  font-size: 0.9em;
  line-height: 1.4em;
}
.full-draft h5.end {
  font-size: 1em;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 5em;
  text-align: right;
}

@media screen and (min-width: 650px) {
  .full-draft {
    font-size: 1.4em;
    line-height: 1.45em;
  }
}
/* Full draft */
/* -------------------------------------------------- */
.characters {
  margin-top: 1em;
}
.characters .character h2 {
  font-size: 1.3em;
  font-weight: normal;
  margin: 0;
}
.characters .character a {
  color: #6baf60;
  text-decoration: none;
}
.characters .character a:hover {
  color: #777;
}
.characters .character ul.scenes {
  margin: 0;
  margin-top: 0.25em;
}
.characters .character + .character {
  border-top: solid 1px #ddd;
  margin-top: 1.5em;
  padding-top: 1.5em;
}

/* Login page */
#login-form {
  margin-top: 1em;
}
#login-form h1 {
  font-weight: 400;
}
#login-form form.login {
  margin-top: 5rem;
  padding-bottom: 1em;
}
#login-form form.login .group label {
  color: #444;
  display: block;
  margin-bottom: 0.2em;
}
#login-form form.login .group section {
  margin-bottom: 1em;
}
#login-form form.login .group section input[type=text] {
  background: #181818;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.4rem 0.8rem 0.5rem;
  width: 100%;
}
#login-form form.login .group section input[type=password] {
  background: #181818;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.4rem 0.8rem 0.5rem;
  width: 100%;
}
#login-form form.login input.button {
  background: #435a3f;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  margin-top: 1rem;
  padding: 0.5rem 0.8rem 0.7rem;
  width: 100%;
  -webkit-appearance: none;
}
#login-form form.login input.button:hover {
  background: #444;
}

body.dark {
  background: #201e1d;
  /*
  .daily-word-count {
    color: #333;
    font-size: 0.8em;
    line-height: 1.2;
    background: none;
    border-bottom: solid 1px #1a1a1a;
    margin-bottom: 15px;
    padding: 5px 0 15px;

    @media (screen and min-width:700px) {
      font-size: 0.8em;
    }

    span {
      color: #333;

      .num {
        color: #666;
      }
    }
  }
  */
}
body.dark header[role=banner] {
  background: inherit;
  border-bottom: none;
  /* solid 2px #2c342b; */
  padding-bottom: 0.5em;
}
body.dark header[role=banner] > .container h1 a {
  color: #3e503e;
}
body.dark header[role=banner] > .container h1 a:hover {
  color: #fff;
}
body.dark header[role=banner] > .container a {
  color: #759a64;
}
body.dark header[role=banner] > .container a:hover {
  color: #fff;
}
body.dark header[role=banner] > h1.container {
  color: #4c525d;
}
body.dark header[role=banner] > h1.container span {
  color: #ddd;
}
body.dark header[role=banner] > h1.story-title {
  display: flex;
  align-items: baseline;
  margin-top: 0.5rem;
}
body.dark header[role=banner] > h1.story-title .branch {
  color: #8d9a70;
  font-size: 1.1rem;
  margin-left: 15px;
}
body.dark header[role=banner] > h1.story-title .status {
  color: #333;
  font-size: 1.1rem;
  margin-left: 15px;
}
body.dark header[role=banner] > h1.story-title a.admin-link {
  font-size: 0.9rem;
  margin-left: 15px;
}
body.dark header[role=banner] > .summary.container {
  color: #515151;
}
body.dark .links {
  background: none;
  color: #4c525d;
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 0.5em;
  padding-top: 0;
  padding-bottom: 0;
}
body.dark .links a {
  color: #759a64;
  padding: 0;
  padding-right: 5px;
}
body.dark .links a:last-child {
  padding-left: 5px;
}
body.dark .links a:hover {
  color: #fff;
}
body.dark .scene > a {
  border-top: none;
  font-size: 1em;
  line-height: 1.4em;
}
body.dark .scene > a:hover .info h3 {
  color: #fff;
}
body.dark .scene > a:hover .info .meta {
  color: #fff;
}
body.dark .scene .num {
  color: #3b3a3a;
}
body.dark .scene .info h3 {
  color: #ddd;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-right: 15px;
}
body.dark .scene .info h3:hover {
  color: #fff;
}
body.dark .scene .info .meta {
  color: #555;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.3;
  margin-top: 3pt;
}
@media screen and (min-width: 700px) {
  body.dark .scene .info h3 {
    font-size: 1.4rem;
  }
  body.dark .scene .info .meta {
    font-size: 1.1rem;
  }
}
body.dark .story-lists {
  border-top-color: #000;
  color: #555;
  font-size: 0.9rem;
  margin-top: 4em;
  padding-top: 1rem;
}
body.dark .story-lists a {
  color: #759a64;
}
body.dark #frame {
  background: #201e1d;
  color: #d1cac7;
  font-size: 1.45rem;
  line-height: 1.4;
  padding-bottom: 0;
}
@media screen and (min-width: 1100px) {
  body.dark #frame {
    font-size: 1.65rem;
    line-height: 1.4;
    padding-left: calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }
}
@media screen and (min-width: 1100px) {
  body.dark .container {
    max-width: 740px;
  }
}
body.dark .word-count {
  background: #19191d;
  color: #2e2e35;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.7em;
  padding: 3px 0;
  text-align: center;
  z-index: 39029023;
}
body.dark .word-count .num {
  color: #40404b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body.dark #tray {
  border-bottom-color: #293327;
}
body.dark #tray textarea {
  background: none;
  color: #ddd;
}
body.dark #tray .button {
  background: #33804c;
  font-size: 1.4em;
}
body.dark .scene-detail {
  background: #111;
}
body.dark .scene-detail .summary .scene {
  border-bottom: solid 1px #444;
}
body.dark .scene-detail .text {
  color: #999;
  font-size: 1.4em;
  line-height: 1.45em;
}
@media screen and (min-width: 1100px) {
  body.dark .scene-detail .text {
    font-size: 1.55em;
    line-height: 1.45em;
  }
}
body.dark footer#footer:not(.local-storage) {
  background: #1a1919;
}
body.dark footer#footer .controls {
  padding-top: 0;
  padding-bottom: 0;
  z-index: 392903923;
  position: relative;
}
body.dark footer#footer .controls a.menu, body.dark footer#footer .controls a.cancel {
  padding-top: 11px;
  padding-bottom: 80px;
}
@media screen and (min-width: 700px) {
  body.dark footer#footer .controls a.menu, body.dark footer#footer .controls a.cancel {
    padding-bottom: 15px;
  }
}
body.dark footer#footer .controls a.button {
  padding-top: 11px;
  padding-bottom: 80px;
}
@media screen and (min-width: 700px) {
  body.dark footer#footer .controls a.button {
    padding-bottom: 15px;
  }
}
body.dark .dashboard .weekly-stats {
  color: #999;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  columns: 4;
  padding-top: 0.2em;
}
body.dark .dashboard .weekly-stats * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body.dark .dashboard .weekly-stats li {
  align-items: baseline;
  list-style: none;
  display: flex;
  flex-direction: row;
  font-variant-numeric: tabular-nums;
  gap: 3pt;
  margin-bottom: 3px;
}
body.dark .dashboard .weekly-stats li .label {
  color: #504b49;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
}
body.dark .dashboard .weekly-stats li .value {
  color: #867d79;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03rem;
}
body.dark .dashboard .weekly-stats li .value.empty {
  color: #7a5252;
}
body.dark .dashboard .story a {
  padding: 0.5rem 0 0.5rem;
}
body.dark .dashboard .story a:hover h2 {
  color: #fff;
}
body.dark .dashboard .story a:hover .info {
  color: #fff;
}
body.dark .dashboard .story a h2 {
  color: #b6b1af;
  flex: 1;
  display: inline;
  margin-right: 0.5rem;
}
body.dark .dashboard .story a h2 .status {
  color: #363230;
}
body.dark .dashboard .story a .info {
  color: #6b6461;
  display: inline;
  font-size: 0.8rem;
  align-items: center;
  line-height: 1.2em;
}
body.dark .dashboard .backburnered a {
  color: #363230;
}
body.dark .dashboard .backburnered a:hover {
  color: #888;
}
body.dark .dashboard .backburnered h3 {
  color: #504b49;
}
body.dark .dashboard .backburnered .story a:hover h2 {
  color: #fff;
}
body.dark .dashboard .backburnered .story a h2 {
  color: #504b49;
}
body.dark .dashboard .add-story {
  margin-top: 2rem;
}
body.dark .dashboard .add-story h2 {
  color: #363230;
  font-size: 1rem;
}
body.dark .dashboard .add-story input[name=new-story-title] {
  background: inherit;
  border: solid 1px #504b49;
  color: #8c7b73;
  font-size: 1rem;
  padding: 2px 4px;
}
body.dark .dashboard .add-story input[name=new-story-title]:focus {
  outline: none;
}
body.dark .dashboard .add-story a {
  background: #363230;
  border-radius: 2px;
  border: none;
  color: #8c7b73;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  padding: 3px 8px 4px;
}
body.dark .dashboard .add-story a:hover {
  background: #1b1918;
}
body.dark .full-draft {
  color: #ddd;
}
body.dark .full-draft .links {
  font-size: 0.9em;
}
body.dark nav[role=menu] {
  background: rgba(0, 0, 0, 0.3);
  font-size: 1.2em;
  line-height: 1.45em;
}
body.dark nav[role=menu] a {
  color: #759a64;
}
body.dark nav[role=menu] a:hover {
  color: #eee;
}
body.dark nav[role=menu] .group.story {
  border-bottom-color: #333;
}
body.dark .story-detail .scenes.sortable .handle {
  background: #181818;
}
body.dark .story-detail .scenes.sortable .handle:hover {
  background: #444;
}
body.dark.active-nav #page .mask {
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (min-width: 600px) {
  body.dark .story-detail .scenes .scene h2 {
    margin-right: 35px;
  }
  body.dark .story-detail .scenes .scene h2.chapter {
    line-height: 1.6em;
    padding-top: 1px;
  }
  body.dark .story-detail .scenes .scene a .num {
    line-height: 31px;
    width: 2.5em;
  }
}
body.dark .daily-word-count {
  color: #333846;
  font-size: 0.9rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  padding: 0 20px;
  z-index: 0;
}
@media screen and (min-width: 700px) {
  body.dark .daily-word-count {
    bottom: 17px;
  }
}

nav[role=menu] .edit-menu {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  overflow-y: scroll;
  padding: 25px;
  padding-top: 5px;
}
nav[role=menu] .edit-menu * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
nav[role=menu] .edit-menu h1 {
  color: #333;
  display: flex;
  font-size: 1em;
  font-weight: 400;
  margin: 0;
}
nav[role=menu] .edit-menu h1 span {
  color: #ccc;
  flex: 1;
  margin-left: 2px;
}
nav[role=menu] .edit-menu h1 span.version {
  color: #444;
  display: inline-flex;
  flex: inherit;
  font-size: 0.85em;
  text-align: right;
}
nav[role=menu] .edit-menu .summary {
  color: #333;
  display: block;
  font-size: 0.7em;
  margin-top: 0.5em;
  line-height: 1.3em;
}
nav[role=menu] .edit-menu .summary span {
  color: #888;
}
nav[role=menu] .edit-menu .summary + .scenes {
  margin-top: 1em;
}
nav[role=menu] .edit-menu .scenes {
  font-size: 0.8em;
}
nav[role=menu] .edit-menu .drafts {
  font-size: 0.6em;
}
nav[role=menu] .edit-menu .drafts h2 {
  color: #222;
  line-height: 1.1;
  margin: 0;
}
nav[role=menu] .edit-menu .drafts ul {
  font-size: 0.9rem;
  padding-left: 0px;
}
nav[role=menu] .edit-menu .drafts ul li {
  line-height: 1.4;
  list-style: none;
  color: #444;
}
nav[role=menu] .edit-menu .drafts ul a {
  color: #555;
  display: inline-block;
}
nav[role=menu] .edit-menu .drafts ul a:hover {
  color: #fff;
}
@media screen and (min-width: 700px) {
  nav[role=menu] .edit-menu {
    padding-top: 20px;
  }
}
nav[role=menu] .links {
  background: rgba(20, 20, 20, 0.4);
  margin: 0;
  padding: 20px 25px 20px 25px;
}
nav[role=menu] .links * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
nav[role=menu] .links h4 {
  display: inline-block;
  flex: 1;
  font-size: 0.7em;
  font-weight: normal;
  margin: 0;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #383838;
}
nav[role=menu] .links .group {
  align-items: center;
  display: flex;
}
nav[role=menu] .links .group + .group {
  margin-top: 0.5em;
}
nav[role=menu] .links .group.story {
  border-bottom: none;
  padding-bottom: 0;
}
nav[role=menu] .links .group a {
  background: none;
  color: #666;
  border: solid 1px #222;
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.1;
  margin-right: 10px;
  margin-bottom: 4px;
  padding: 8px 12px 11px;
  border-radius: 5px;
}
nav[role=menu] .links .group a:hover {
  color: #fff;
}

/* Block list page */
.blocks {
  color: #999;
  padding: 20px;
}

.block-tags {
  color: #999;
  padding: 20px;
}

/* Block detail page */
.block-detail {
  color: #999;
  padding: 20px;
}

.block-detail details {
  color: #444;
  margin-left: 1rem;
}

.block-detail > details {
  margin-left: 0;
}

.block-detail details summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
}

.block-detail details summary .display-panel,
.block-detail details summary .display-panel > * {
  display: inline;
  user-select: none;
}

.block-detail details summary .display-panel {
  color: #999;
  font-size: 1.3rem;
  line-height: 1.3;
}

.block-detail details summary .edit-panel {
  display: none;
}

.block-detail details.edit summary .display-panel {
  display: none;
}

.block-detail details.edit summary .edit-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-right: 0.1rem;
}

.block-detail details summary nav a {
  color: #333;
}

.block-detail details.edit summary nav a.edit-link {
  display: none;
}

.block-detail textarea {
  background: #080808;
  border: none;
  color: #999;
  font-size: 1.3rem;
  line-height: 1.3;
  padding: 0;
  resize: none;
}

.branches {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: solid 1px #000;
}

.branches h2 {
  color: #666;
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
  margin-bottom: 1rem;
}

.branches button {
  background: #2e2925;
  border: none;
  color: #635e5a;
  cursor: pointer;
  padding: 6px 15px 8px;
  border-radius: 5pt;
  margin-bottom: 5px;
  font-size: 1rem;
}

.branches button:hover {
  background: #3e3935;
  color: #736e6a;
}

.branches .branch-list {
  margin-top: 1rem;
}

.branches .branch-list .self {
  background: #345;
  color: #789;
}

.add-scene {
  color: #759a64;
  display: block;
  margin-top: 1rem;
  text-decoration: none;
}

.misc {
  border-top: solid 1px #000;
  margin-top: 2rem;
  padding-bottom: 2em;
  padding-top: 1rem;
}
.misc h2 {
  color: #666;
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 0;
}
.misc a {
  color: #759a64;
}

/*# sourceMappingURL=style.css.map */