/* Single Dark Purple Theme - 2011 Retro Edition */
:root {
  /* Dark purple background */
  --color-bg: #1a1520;
  --color-text: #e8e8e8;
  --color-text-muted: #b0a8b8;
  --color-link: #88b8ff;
  --color-link-underline: #6aa0e8;
  --color-link-visited: #c8a8e8;
  --color-border: #4a3f52;
  --color-border-dark: #7a6888;

  /* Accent colors */
  --color-accent: #b088f9;
  --color-accent-glow: rgba(176, 136, 249, 0.4);
  --color-terminal-green: #7fff7f;

  /* Purple gradient colors - glossy 2000s style */
  --color-purple-gradient-start: #4a3858;
  --color-purple-gradient-mid: #352845;
  --color-purple-gradient-end: #251a30;
  --color-purple-accent: #4a3858;
  --color-purple-light: #3d3245;
  --color-purple-hover: #4a3d55;
  --color-purple-border: #5a4070;
  --color-purple-blockquote: #5a407040;

  /* Code syntax highlighting */
  --color-code-bg: #2a2230;
  --color-code-comment: #9a90a0;
  --color-code-constant: #79c0ff;
  --color-code-entity: #d2a8ff;
  --color-code-variable: #d0c8d8;
  --color-code-tag: #7ee787;
  --color-code-keyword: #ff7b72;
  --color-code-string: #a5d6ff;
  --color-code-value: #ffa657;

  /* Quote mark color */
  --color-quote-mark: %239a70b8;

  /* Tag styles */
  --color-tag-bg: #3d3245;
  --color-tag-text: #e8e8e8;
  --color-tag-border: #5a4868;
  --color-tag-count: #b0a8b8;

  /* Search/form */
  --color-search-border: #7a5898;
  --color-search-bg: #5a4070;
  --color-selected-tag-bg: rgba(100, 65, 125, 0.4);

  /* Comments */
  --color-comment-warning-bg: #4a3d55;
  --color-comment-warning-border: #7a5898;

  /* Misc */
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-help-bg: #2a4030;
  --color-help-border: #4a8a4a;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
h5 {
  margin-bottom: 0.7em;
}
q:before,
q:after {
  content: "";
}
pre {
  white-space: pre-wrap;
  overflow: auto;
  width: 98%;
  margin-bottom: 1.6em;
}
a:link {
  color: var(--color-link);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid var(--color-link-underline);
}

.blogmark-image {
  display: block;
  margin: 1em auto;
  box-shadow: 0px 0px 6px 3px var(--color-shadow);
}

a:visited {
  color: var(--color-link-visited);
  border-color: var(--color-link-visited);
}

a:link:focus,
a:link:hover,
a:link:active {
  text-decoration: none;
  border-bottom-style: dotted;
  text-shadow: 0 0 8px rgba(136, 184, 255, 0.4);
}

a.a-img:link,
a.a-img:link:focus,
a.a-img:link:hover,
a.a-img:link:active {
  /* No border on links that just contain an image */
  border-bottom: none;
}

body {
  font-family: "Helvetica Neue", helvetica, sans-serif;
  line-height: 1.45;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
strong {
  font-weight: bold;
}
em,
em strong {
  font-style: italic;
}
dl {
  margin-bottom: 1em;
}
dt {
  font-weight: bold;
}
dd {
  padding-left: 1.5em;
}
p.smallhead-toolbar {
  width: 940px;
  margin: 0 auto 3px auto;
}
a#atomfeedlink {
  float: right;
  border-bottom: none;
}
a#atomfeedlink svg {
  height: 20px;
  width: 20px;
}
p.bighead-toolbar img,
p.smallhead-toolbar img {
  vertical-align: top;
  padding-top: 2px;
}
p.bighead-toolbar a.signin,
p.smallhead-toolbar a.signin {
  text-decoration: none;
}
img.bubble {
  vertical-align: top;
}
.date-and-tags {
  font-size: 0.85rem;
  font-family: georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--color-text-muted);
}
div#sidead {
  margin-top: 2em;
}
div#ft {
  background: linear-gradient(
    to bottom,
    #5a4868 0%,
    var(--color-purple-gradient-start) 10%,
    var(--color-purple-gradient-mid) 49%,
    var(--color-purple-gradient-end) 100%
  );
  text-align: center;
  margin: 15px 0 0.4em 0;
  padding: 10px 0;
  clear: both;
  font-size: 0.85em;
  margin-top: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-top: 1px solid #6a5878;
}
div#ft ul,
div#ft li {
  display: inline;
  padding-right: 1em;
  color: #fff;
}
div#ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 2em;
  padding-right: 2em;
}
div#ft a {
  color: #fff;
  text-decoration: none;
  border-bottom: none;
}
p#previouslyhosted {
  clear: both;
  padding: 0.5em 0 0.5em 35px;
  font-size: 0.8em;
  color: var(--color-text-muted);
}
div#wrapper {
  width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  flex: 1;
  display: flex;
  gap: 35px;
}
div#primary {
  width: 560px;
  flex-shrink: 0;
}
div#primary blockquote,
.item-link blockquote,
div#primary .quote blockquote blockquote {
  margin: 1em 0;
  border-left: 0.75em solid var(--color-purple-blockquote);
  padding-left: 0.75em;
}
div#primary blockquote blockquote,
.item-link blockquote blockquote {
  border-left: none;
  padding-left: 1.5em;
}
div#secondary {
  width: 280px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 60px;
}
div#secondary img.bubble {
  vertical-align: top;
  padding-top: 1px;
}
div#secondary h3 {
  font-family: georgia, serif;
  margin: 0.5em 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 1px rgba(0, 0, 0, 0.3);
}
div#secondary ul li {
  margin-bottom: 0.56em;
  font-size: 0.9em;
}
div#secondary div.photos {
  clear: both;
}
div#secondary a.photolink {
  position: relative;
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  width: 40px;
  height: 40px;
}
div#secondary div.photos img {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  position: absolute;
  top: 0px;
  left: 0px;
}
div#secondary ul {
  clear: both;
  margin-top: 0.5em;
}
.item-quote > blockquote {
  clear: both;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  text-indent: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: 9px -5px;
  word-break: break-word;
}
.item-quote > blockquote p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  padding-right: 25px;
  display: inline;
}
.quote .context {
  font-weight: normal;
}
p.cite {
  text-indent: 16px;
  font-weight: bold;
}
div.metabox {
  font-size: 0.9em;
  background: linear-gradient(to bottom, #453850 0%, #3d3245 50%, #352A3B 100%);
  border: 1px solid #5a4868;
  border-top: 1px solid #7a6888;
  border-left: 1px solid #6a5878;
  border-radius: 5px;
  padding: 12px 15px;
  margin-bottom: 1em;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}
div.metabox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}
div.metabox p {
  margin-bottom: 0.8em;
}
div.metabox h3 {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3em;
  margin-bottom: 0.6em;
}
div.series-info {
  margin: 2em 0;
}
div.series-info li {
  margin-left: 1.5em;
  list-style-type: decimal;
}
div.entryPage {
  border-bottom: none;
}
.entry img,
.blogmark img,
.note img,
.entry video,
.blogmark video,
.note video {
  max-width: 100%;
}
/* Center embedded tweets in articles */
div.entry div.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}
div.entry a {
  word-break: break-word;
}
div.entry table,
div.blogmark table {
  margin: 1em 0;
}
div.entry table th,
div.entry table td,
div.blogmark table th,
div.blogmark table td,
div.note table th,
div.note table td {
  font-size: 0.9em;
  padding-right: 0.5em;
}
div.entry table td,
div.blogmark table td,
div.note table td {
  vertical-align: top;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
}
div.entry table th,
div.blogmark table th,
div.note table th {
  font-weight: bold;
  border-bottom: 1px solid var(--color-border-dark);
}
div.entry span.textago {
  font-family: helvetica, sans-serif;
  color: var(--color-text-muted);
  font-size: 0.75em;
  font-weight: normal;
  white-space: nowrap;
}
div.entry h2 {
  font-size: 1.8em;
  line-height: 1.3;
  font-family: georgia, serif;
  margin: 0 0 0.8em 0;
  font-weight: bold;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 2px rgba(0, 0, 0, 0.4);
}
div.entry h2 a {
  margin-left: -27px;
  padding-left: 27px;
  text-decoration: none;
}
div.entry h2 a:hover {
  background: url(/static/css/img/arrow.png);
  background-repeat: no-repeat;
  background-position: 0 3px;
}
div.entry h3,
div.entry h4 {
  line-height: 1.4;
  font-family: georgia, serif;
  font-size: 1.2em;
  margin: 1.2em 0 0.5em 0;
}
div.segment.entry > h3:first-child {
  margin-top: 0;
}
}
div.entry h4 {
  font-size: 1.1em;
}
div.entry p,
div.day p {
  margin: 0 0 0.8em 0;
}
div.entry ul,
div.entry ol,
div.blogmark ul,
div.blogmark ol,
div.quote ul,
div.quote ol,
div.note ul,
div.note ol {
  margin-bottom: 0.8em;
}
div.entry li,
div.blogmark li,
div.quote li,
div.note li {
  margin-left: 1em;
  list-style-type: square;
}
div.entry ol li,
div.blogmark ol li,
div.note ol li,
div.quote ol li {
  list-style-type: decimal;
  margin-left: 2em;
}
div.entry ol li ul li,
div.blogmark ol li ul li {
  list-style-type: square;
}
div.entry iframe {
  width: 100%;
}
div.entry div.entryFooter {
  font-size: 0.9em;
  margin-top: 1em;
  border-top: 1px solid var(--color-purple-border);
  padding-top: 0.5em;
}
div.entry p.mobile-date {
  color: var(--color-text-muted);
  margin-bottom: 0.5em;
  margin-top: -0.5em;
  display: none;
}
div#bighead {
  width: 940px;
  margin: 0 auto;
  padding: 25px 10px 15px 10px;
}
div#bighead h1 {
  font-size: 1.6em;
  margin-bottom: 0.4em;
  font-size: 2em;
  line-height: 1;
  font-family: georgia, serif;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1),
    0 -1px 2px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}

/* Site logo */
.site-logo {
  height: 1.2em;
  width: auto;
  margin-right: 0.3em;
}
div#bigheadcontainer {
  position: relative;
}
p#currenttags {
  margin-bottom: 0.5em;
  font-family: georgia, "Times New Roman", serif;
  font-style: italic;
}
p#currenttags .item-tag {
  font-style: normal;
  margin-right: 0.3em;
}
div#band {
  background: linear-gradient(
    to bottom,
    #5a4868 0%,
    var(--color-purple-gradient-start) 15%,
    var(--color-purple-gradient-mid) 49%,
    var(--color-purple-gradient-end) 100%
  );
  color: white;
  margin-bottom: -1.55em;
  line-height: 1em;
  height: 1.55em;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
div#secondary div.day {
  border-bottom: 1px solid var(--color-border);
  clear: both;
}
div#searchbox {
  width: 280px;
  position: absolute;
  top: 0px;
  left: 485px;
}
div#searchbox input.text {
  border: 1px solid var(--color-search-border);
  vertical-align: middle;
  width: 150px;
  padding: 1px 1px 2px 1px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
div#searchbox input.image {
  vertical-align: middle;
}
h2.overband,
div#primary h2.overband {
  color: white;
  padding: 4px 0px 3px 0;
  margin: 0;
  line-height: 1em;
  margin-bottom: 0.98em;
  font-weight: normal;
  vertical-align: middle;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(138, 96, 168, 0.3);
}
h2.overband img.feedicon {
  vertical-align: middle;
  position: relative;
  top: -2px;
}
h2.overband span {
  font-size: 0.8em;
  vertical-align: middle;
}
h2.overband a {
  color: #fff;
}
div#smallhead {
  margin-bottom: 15px;
  text-align: left;
  background: linear-gradient(
    to bottom,
    #5a4868 0%,
    var(--color-purple-gradient-start) 10%,
    var(--color-purple-gradient-mid) 49%,
    var(--color-purple-gradient-end) 100%
  );
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid #251a30;
}
div#smallhead #smallhead-inner {
  width: 940px;
  margin: 0 auto;
  padding: 4px 0px 4px 0px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
div#smallhead #smallhead-inner h1 {
  font-weight: normal;
  display: flex;
  align-items: center;
}
div#smallhead #smallhead-inner h1 a {
  display: flex;
  align-items: center;
}
div#smallhead a {
  color: #fff;
  text-decoration: none;
  border: none;
}
#smallhead-about {
  padding-right: 1em;
}
div#smallhead span {
  float: right;
  padding: 2px 5px 1px 0px;
  font-size: 0.9em;
  vertical-align: middle;
}
div#smallhead span u {
  font-family: "courier";
}
div#smallhead span input {
  padding: 0 0 0 5px;
  vertical-align: middle;
}
div#smallhead span form {
  display: inline;
  margin: 0;
  padding: 0;
}
body.smallhead div#smallhead {
  margin-bottom: 0px;
  padding: 2px 0;
}
body.smallhead div#ft {
  margin-top: 0px;
}
body.smallhead h2.band {
  margin-top: 0px;
}
body.smallhead div#wrapper {
  padding: 15px 0;
}
h2.band {
  padding-left: 35px;
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  padding: 3px 0 2px 35px;
  clear: both;
  background-image: url(/static/css/img/purple-gradient.png);
  color: white;
  font-weight: normal;
}
p#commentwarning {
  padding: 0.4em;
  border: 1px dotted var(--color-comment-warning-border);
  background-color: var(--color-comment-warning-bg);
}
div#comment-wrapper {
  width: 940px;
  margin-left: 35px;
}
div#comments {
  float: left;
  width: 620px;
  padding-right: 35px;
  padding-top: 1em;
}
div#comments p {
  overflow: auto;
  margin-bottom: 0.6em;
}
div#comments ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div#comments li {
  margin: 0 0 1em 0;
  font-size: 0.9em;
}
div#comments li li {
  font-size: 1em;
}
div#comments li ul {
  list-style-type: square;
  padding-left: 1em;
}
div#comments li ol {
  padding-left: 1em;
  list-style-type: decimal;
}
div#comments blockquote {
  margin: 1em 1.5em;
}
div#comments em {
  font-style: italic;
}
div#comments q {
  font-style: italic;
}
div#comments p.commentFooter {
  font-size: 0.85em;
  position: relative;
  top: 5px;
  margin: 10px 0 0 45px;
  color: var(--color-text-muted);
}
div#comments ol li {
  background-image: url(/static/css/img/comment-top-grey.gif);
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 0 2em 0;
}
div#comments ol li li {
  background: none;
  margin: 0 0 1em 0;
}
div#comments div.comment {
  padding: 1em 1em 0 1em;
  background-image: url(/static/css/img/comment-bottom-grey.gif);
  background-repeat: no-repeat;
  background-position: bottom;
}
div#comments ol li.openid {
  background-image: url(/static/css/img/comment-top-orange.gif);
}
div#comments ol li.openid div.comment {
  background-image: url(/static/css/img/comment-bottom-orange.gif);
}
div#comments ol li.simon {
  background-image: url(/static/css/img/comment-top-purple.gif);
}
div#comments ol li.simon div.comment {
  background-image: url(/static/css/img/comment-bottom-purple.gif);
}
div#comments p.commentFooter a:link,
div#comments p.commentFooter a:visited {
  color: var(--color-text);
}
div#comments p.commentFooter a:hover,
div#comments p.commentFooter a:active {
  color: var(--color-text-muted);
}
div.commentpreview {
  font-size: 0.9em;
  padding: 0.5em;
  border: 2px solid var(--color-border);
  margin-bottom: 1em;
}
div#addcomment {
  float: left;
  padding: 1em 0;
  width: 280px;
}
div#addcomment p {
  font-size: 0.9em;
}
div#addcomment p.formrow {
  clear: both;
}
div#addcomment p.formrow label {
  float: left;
  width: 70px;
}
div#addcomment input.text {
  border: 1px solid var(--color-search-border);
  font-size: 1.05em;
  float: left;
  width: 206px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
div#addcomment textarea {
  border: 1px solid var(--color-search-border);
  padding: 3px;
  width: 270px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
body form.commentpreview ul.errorlist li {
  list-style-type: none;
  margin: 0;
  background-color: var(--color-purple-accent);
  color: white;
  padding: 3px 3px 1px 3px;
}
form.commentpreview p.formrow {
  margin-top: 5px;
  clear: both;
}
form.commentpreview p.formrow label {
  width: 4em;
  display: block;
  float: left;
}
form.commentpreview ul li {
  list-style-type: none;
  margin: 0 0 0 4em;
}
table.monthcalendar {
  border: 1px solid var(--color-border);
  width: 241px;
  margin-left: 1px;
  margin-bottom: 25px;
}
table.monthcalendar caption {
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
  padding-bottom: 4px;
}
table.monthcalendar caption a.nextprev {
  text-decoration: none;
  padding: 0 7px;
  border-bottom: none;
}
table.monthcalendar td,
table.monthcalendar th {
  font-size: 0.9em;
  border: 1px solid var(--color-border);
  text-align: center;
  width: 14.28%;
}
table.monthcalendar td strong {
  font-size: 1.1em;
}
table.monthcalendar td.today {
  border: 2px solid #888;
}
table.monthcalendar td a {
  display: block;
  padding: 1px 4px 0px 4px;
  text-decoration: none;
  border-bottom: none;
}
table.monthcalendar td a:link:focus,
table.monthcalendar td a:link:hover,
table.monthcalendar td a:link:active {
  border-bottom: none;
}
div#primary h2 {
  margin-bottom: 0.5em;
  line-height: 1.4em;
}
div#primary div.photoset {
  font-size: 0.9em;
  position: relative;
}
div#primary div.photoset p.meta {
  font-size: 0.9em;
}
div#primary div.segment {
  clear: both;
  padding: 12px 15px;
  margin-bottom: 1em;
  background: linear-gradient(to bottom, #3a2d45 0%, #2a2035 50%, #221a2a 100%);
  border: 1px solid #5a4868;
  border-top: 1px solid #7a6888;
  border-left: 1px solid #6a5878;
  border-radius: 5px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}
div#primary div.segment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}
div#primary div.blogmark {
  font-size: 0.9em;
}
div#primary div.blogmark p,
div#primary div.quote p,
div#primary .elsewhere-in-primary p:not(:last-child) {
  margin-bottom: 0.8em;
}
div#primary div.photoset img.primary {
  background-image: url(/static/css/img/set_case.png);
  padding: 8px 8px 12px 8px;
  background-repeat: no-repeat;
  margin-right: 8px;
}
div#primary div.photoset a.primary:link,
div#primary div.photoset a.primary:visited,
div#primary div.photoset a.primary:hover,
div#primary div.photoset a.primary:active {
  float: left;
}
div#primary div.quote > blockquote {
  clear: both;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: 9px -5px;
  border-left: none;
}
/* The text-indent is ignored on the first paragraph if it
is also the last paragraph (because it is inline), so in
the case where there is only one contained paragraph we
indent the blockquote itself. */
div#primary div.quote > blockquote:has(p:only-child),
div#primary div.quote > blockquote p:first-child {
  text-indent: 23px;
}
/* But not on nested blockquote */
div#primary div.quote blockquote blockquote:has(p:only-child),
div#primary div.quote blockquote  blockquote p:first-child {
  text-indent: 0;
}

div#primary div.quote > blockquote p:last-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  padding-right: 25px;
  display: inline;
}
div#primary div.quote p.cite {
  font-size: 0.9em;
  text-indent: 16px;
}

div#primary div.note p:not(.date-and-tags) {
  margin-bottom: 1em;
}

ul#searchorder {
  border-bottom: 1px solid var(--color-text);
  margin: 0 0 0.5em 0;
  padding: 0;
  height: 1em;
}
ul#searchorder li {
  display: block;
  float: left;
  border: 1px solid var(--color-text);
  margin: 0 0 0 1em;
  line-height: 1em;
  position: relative;
  top: -2px;
  padding-top: 1px;
}
ul#searchorder li.selected {
  border-bottom: 1px solid var(--color-bg);
}
ul#searchorder a {
  line-height: 1em;
  padding: 0.2em 1em;
  text-decoration: none;
  font-size: 0.8em;
}
.quote blockquote br,
div#secondary div.day br {
  display: block;
  line-height: 0;
  margin-bottom: 0.3em;
}
div.paginator {
  clear: both;
  padding: 0.5em 0;
  font-size: 0.9em;
}
.pagination {
  margin-bottom: 1em;
}
.paginator a {
  text-decoration: none;
}
.paginate-pages {
  padding: 2px 3px;
  border: 1px solid var(--color-border);
}
.paginate-first,
.paginate-last {
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  font-weight: bold;
}
.paginate-previous,
.paginate-next {
  padding: 2px 3px;
  border: 1px solid var(--color-border);
}
.paginate-link {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
}
.paginate-current {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  font-weight: bold;
  background-color: var(--color-purple-accent);
  color: white;
}
p#tagcloud {
  font-size: 1.2em;
  line-height: 1.9em;
  text-align: center;
  margin-top: 1.5em;
}
p#tagcloud .not-popular-at-all {
  font-size: 0.7em;
}
p#tagcloud .not-very-popular {
  font-size: 0.89em;
}
p#tagcloud .somewhat-popular {
  font-size: 1.07em;
}
p#tagcloud .somewhat-more-popular {
  font-size: 1.26em;
}
p#tagcloud .popular {
  font-size: 1.44em;
}
p#tagcloud .more-than-just-popular {
  font-size: 1.63em;
}
p#tagcloud .very-popular {
  font-size: 1.81em;
}
p#tagcloud .ultra-popular {
  font-size: 2em;
}
p#currenttags .more {
  text-decoration: none;
  border: none;
}
div#wrapper div.wide {
  width: 640px;
}
div.help {
  font-size: 0.9em;
  border: 1px solid var(--color-help-border);
  background-color: var(--color-help-bg);
  padding: 0.5em 45px 0 0.8em;
  background-image: url(/static/css/img/questionmark.png);
  background-repeat: no-repeat;
  background-position: top right;
}
div.help p {
  margin: 0 0 1em 0;
}

.search-input,
.search-submit {
  border: 1px solid var(--color-search-border);
  padding: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
.search-input {
  width: 80%;
  background-color: #1a1220;
  color: var(--color-text);
  border-radius: 4px;
  border: 1px solid #3a2845;
  border-top: 1px solid #2a1835;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
.search-submit {
  background: linear-gradient(to bottom, #8a70a0 0%, #6a5080 40%, #5a4070 60%, #4a3060 100%);
  color: white;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #7a5898;
  border-top: 1px solid #9a78b8;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
  position: relative;
}
.search-submit::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  border-radius: 3px 3px 50% 50%;
  pointer-events: none;
}
.search-submit:hover {
  background: linear-gradient(to bottom, #9a80b0 0%, #7a6090 40%, #6a5080 60%, #5a4070 100%);
}
.search-submit:active {
  background: linear-gradient(to bottom, #4a3060 0%, #5a4070 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.search-submit:active::before {
  display: none;
}
div p.search-selections {
  margin-top: 0.5em;
  font-size: 0.8em;
}
a.selected-tag {
  border: 1px solid var(--color-border-dark);
  text-decoration: none;
  padding: 2px 5px;
  background-color: var(--color-selected-tag-bg);
  color: var(--color-text);
}
div p.search-selections .filters {
  padding-right: 0.6em;
}

.archive-h2 {
  font-size: 1.4em;
}
.top-tags-line {
  font-family: georgia, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 0.8em;
  color: var(--color-text-muted);
}
.top-tags-line a {
  color: var(--color-link);
  font-style: normal;
  font-weight: bold;
}
h3.blog-mixed-list-year {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  font-size: 1.2em;
  font-family: georgia, "Times New Roman", serif;
  color: #e8e8e8;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3em;
}
h3.blog-mixed-list-year a {
  color: #e8e8e8;
}
h3.blog-mixed-list-year:first-child {
  margin-top: 0;
}

.elsewhere-date {
  display: none;
}

#primary .elsewhere-in-primary {
  display: none;
}

/* Fluid layout for medium screens - keeps sidebar but allows shrinking */
@media (max-width: 940px) and (min-width: 801px) {
  div#wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  body.smallhead div#wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
  div#smallhead #smallhead-inner {
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
  div#bighead {
    width: 100%;
    box-sizing: border-box;
  }
  div#primary {
    width: auto;
    flex: 1;
  }
}

@media (max-width: 800px) {
  div.entry {
    max-width: 680px;
  }
  div.entry p.mobile-date {
    display: block;
  }
  #primary .elsewhere-in-primary {
    display: block;
  }
  .elsewhere-date {
    display: inline;
  }
  .hide-secondary-on-mobile {
    display: none;
  }
  div#secondary {
    width: auto;
    padding-top: 15px;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  div#primary {
    width: 100%;
  }
  div#wrapper {
    flex-direction: column;
  }
  div#wrapper {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 10px;
  }
  body.smallhead div#wrapper {
    width: auto;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    background-image: none;
  }
  div#bighead {
    width: 100%;
    box-sizing: border-box;
  }
  div#bighead h1 {
    font-size: 1.5em;
  }
  div#smallhead #smallhead-inner {
    padding-left: 15px;
    width: 100%;
    box-sizing: border-box;
  }
  div#searchbox {
    display: none;
  }
  p.this-is {
    display: none;
  }
  object,
  img {
    max-width: 100%;
  }
  p#currenttags {
    width: auto;
  }
  #secondary h2.overband {
    color: var(--color-text);
    font-weight: bold;
    font-size: 1.2em;
  }
}

/*!
 * GitHub Light v0.5.0
 * Copyright (c) 2012 - 2017 GitHub, Inc.
 * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
 */

.pl-c /* comment, punctuation.definition.comment, string.comment */ {
  color: var(--color-code-comment);
}

.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
  color: var(--color-code-constant);
}

.pl-e /* entity */,
.pl-en /* entity.name */ {
  color: var(--color-code-entity);
}

.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
  color: var(--color-code-variable);
}

.pl-ent /* entity.name.tag, markup.quote */ {
  color: var(--color-code-tag);
}

.pl-k /* keyword, storage, storage.type */ {
  color: var(--color-code-keyword);
}

.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
  color: var(--color-code-string);
}

.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
  color: var(--color-code-value);
}

.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
  color: #b31d28;
}

.pl-ii /* invalid.illegal */ {
  color: #fafbfc;
  background-color: #b31d28;
}

.pl-c2 /* carriage-return */ {
  color: #fafbfc;
  background-color: #d73a49;
}

.pl-c2::before /* carriage-return */ {
  content: "^M";
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  font-weight: bold;
  color: #22863a;
}

.pl-ml /* markup.list */ {
  color: #735c0f;
}

.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
  font-weight: bold;
  color: #005cc5;
}

.pl-mi /* markup.italic */ {
  font-style: italic;
  color: #24292e;
}

.pl-mb /* markup.bold */ {
  font-weight: bold;
  color: #24292e;
}

.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
  color: #b31d28;
  background-color: #ffeef0;
}

.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
  color: #22863a;
  background-color: #f0fff4;
}

.pl-mc /* markup.changed, punctuation.definition.changed */ {
  color: #e36209;
  background-color: #ffebda;
}

.pl-mi2 /* markup.ignored, markup.untracked */ {
  color: #f6f8fa;
  background-color: #005cc5;
}

.pl-mdr /* meta.diff.range */ {
  font-weight: bold;
  color: #6f42c1;
}

.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
  color: #586069;
}

.pl-sg /* sublimelinter.gutter-mark */ {
  color: #959da5;
}

.pl-corl /* constant.other.reference.link, string.other.link */ {
  text-decoration: underline;
  color: #032f62;
}

/* Custom page templates */
.entry-wide div#primary {
  width: auto;
  margin: 0 1em;
  float: none;
  max-width: 98%;
}
.entry-wide div#wrapper {
  overflow: visible;
}

body.homepage .hide-on-homepage {
  display: none;
}

#h1-nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
#h1-nav-wrapper h1 {
  margin-right: 2em;
}
.site-nav {
  font-family: georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 0.5em;
}
.site-nav a {
  font-style: normal;
  color: var(--color-link);
}
.site-nav a:hover {
  color: var(--color-text);
}
#h1-nav-wrapper ul {
  list-style-type: none;
  margin: 0;
  padding: 0 1em 0 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 0.5em;
}
#h1-nav-wrapper li {
  display: inline;
  padding-right: 0.5em;
}
#h1-nav-wrapper li a {
  border-bottom: none;
  font-weight: bold;
}

/* Tag styles */
a.item-tag {
  display: inline-block;
  background: linear-gradient(to bottom, #5a4d65 0%, #4a3d55 40%, #3d3245 60%, #352a3b 100%);
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid #5a4868;
  border-top: 1px solid #7a6888;
  text-decoration: none;
  color: var(--color-tag-text);
  margin-right: 0.3em;
  margin-bottom: 0.5em;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
  position: relative;
}
a.item-tag::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
  border-radius: 8px 8px 50% 50%;
  pointer-events: none;
}
a.item-tag:hover {
  background: linear-gradient(to bottom, #6a5d75 0%, #5a4d65 40%, #4a3d55 60%, #3d3245 100%);
}
#bighead a.item-tag {
  padding: 0px 8px;
}
.item-tag span {
  color: var(--color-tag-count);
  font-size: 0.6em;
  vertical-align: middle;
}

/* Nested lists - used on /2020/ page

/* Inline #3 | http://0.0.0.0:8033/2019/ */

div.entry li li {
  margin-bottom: 0.2em;
}
div.entry ul ul {
  margin-bottom: 0;
}
div.entry li li:first-of-type {
  margin-top: 0.2em;
}

.card-container img {
  display: block;
  max-width: 100%;
}

a:link.photoswipe-img,
a:visited.photoswipe-img,
a:hover.photoswipe-img,
a:focus.photoswipe-img,
a:active.photoswipe-img {
  border: none;
}

div.ea-placement a:link {
  border-bottom: none;
}

.recent-articles {
  margin-top: 1em;
}
.recent-articles li {
  list-style-type: square;
  margin-left: 1em;
  margin-bottom: 0.1em;
}

.tag-description {
  margin-bottom: 1em;
}

/* Theme toggle button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5em;
  color: white;
  opacity: 0.8;
  transition: opacity 0.2s;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}
#theme-toggle:hover {
  opacity: 1;
}
#theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Edit page link */
body div .edit-page-link {
  margin-top: 0.5em;
}
a.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8em;
  padding: 3px 8px;
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}
a.edit-link:hover {
  background-color: var(--color-purple-hover);
}
a.edit-link svg {
  flex-shrink: 0;
}
a.random-post-link {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  padding: 4px 10px;
  margin-top: 0.3em;
  margin-right: 0.75em;
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}
a.random-post-link:hover {
  background-color: var(--color-purple-hover);
  border-bottom: 1px solid var(--color-purple-border);
}
a.random-post-link svg {
  flex-shrink: 0;
}
a.random-tag-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  padding: 4px 10px;
  margin-right: 1em;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}
a.random-tag-nav:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
a.random-tag-nav svg {
  flex-shrink: 0;
}

/* ============================================
   RETRO ENHANCEMENTS - Technical & Playful
   ============================================ */


/* Custom text selection */
::selection {
  background: var(--color-accent);
  color: #1a1520;
  text-shadow: none;
}
::-moz-selection {
  background: var(--color-accent);
  color: #1a1520;
  text-shadow: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #1a1520;
  border-left: 1px solid #3a2845;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #5a4868 0%, #4a3858 50%, #3a2848 100%);
  border: 1px solid #6a5878;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #6a5878 0%, #5a4868 50%, #4a3858 100%);
}
::-webkit-scrollbar-corner {
  background: #1a1520;
}

/* Monospace accents for dates/metadata - terminal feel */
.date-and-tags {
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: -0.02em;
}

/* Card hover lift and tilt effect */
div#primary div.segment {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
div#primary div.segment:hover {
  transform: translateY(-2px) rotate(0.3deg);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 20px rgba(138, 88, 168, 0.1);
}
div#primary div.segment:nth-child(even):hover {
  transform: translateY(-2px) rotate(-0.3deg);
}


/* Accent color on first letter of entry titles */
div.entry h2 a::first-letter,
div.entry h3 a::first-letter {
  color: var(--color-accent);
}

/* Corner decoration on metaboxes */
div.metabox {
  position: relative;
}
div.metabox::after {
  content: '//';
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.7em;
  color: var(--color-accent);
  opacity: 0.6;
}

/* Tag hover glow */
a.item-tag {
  transition: all 0.2s ease;
}
a.item-tag:hover {
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 12px var(--color-accent-glow);
  border-color: var(--color-accent);
}

/* Pixel art style bullets */
div.entry li::marker,
div.blogmark li::marker,
div.note li::marker {
  color: var(--color-accent);
}

/* Link arrow animation on hover */
div.entry h2 a,
div.entry h3 a {
  transition: color 0.2s ease;
}
div.entry h2 a:hover,
div.entry h3 a:hover {
  color: var(--color-accent);
}

/* Decorative line on section headers */
h2.overband::before {
  content: '[';
  margin-right: 0.3em;
  color: var(--color-accent);
  font-family: 'Monaco', 'Consolas', monospace;
}
h2.overband::after {
  content: ']';
  margin-left: 0.3em;
  color: var(--color-accent);
  font-family: 'Monaco', 'Consolas', monospace;
}


/* Retro visitor counter */
.visitor-counter {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.counter-label {
  font-size: 0.85em;
  color: #fff;
}
.counter-digits {
  display: inline-flex;
}
.counter-digit {
  display: inline-block;
  width: 0.6em;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

/* Post views counter in sidebar */
.post-views {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.8em 0;
}

/* Subtle vignette effect */
body {
  background-image: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.15) 100%
  );
  background-attachment: fixed;
}

/* Search input focus glow */
.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 10px var(--color-accent-glow);
}

/* Button press feedback */
.search-submit {
  transition: all 0.1s ease;
}

/* Blockquote styling - more distinctive */
div#primary blockquote,
.item-link blockquote {
  border-left-color: var(--color-accent);
  position: relative;
}
div#primary blockquote::before {
  content: '"';
  position: absolute;
  left: -0.5em;
  top: -0.2em;
  font-size: 2em;
  color: var(--color-accent);
  opacity: 0.3;
  font-family: georgia, serif;
}

/* Code/pre blocks terminal style */
pre {
  background: linear-gradient(to bottom, #1a1220 0%, #150f1a 100%);
  border: 1px solid #3a2848;
  border-left: 3px solid var(--color-accent);
  padding: 1em;
  border-radius: 4px;
}

/* Year headers in blog list */
h3.blog-mixed-list-year {
  position: relative;
  padding-left: 1.5em;
}
h3.blog-mixed-list-year::before {
  content: '#';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-family: 'Monaco', 'Consolas', monospace;
}

/* Easter egg: rainbow on triple-click selected text */
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Subtle breathing glow on header */
div#smallhead {
  animation: headerGlow 4s ease-in-out infinite;
}
@keyframes headerGlow {
  0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  50% { box-shadow: 0 3px 15px rgba(138, 88, 168, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}