body {
  font-family: "Source Serif 4", "Georgia", serif;
  margin: auto;
  padding: 2rem 1.5rem;
  max-width: 860px;
  text-align: left;
  background-color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.6;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (max-width: 480px) {
  body {
    padding: 1.5rem 1rem;
  }
}

details > div {
  padding: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  color: #111;
  font-family: "Apple Garamond", "Garamond", "Source Serif 4", serif;
}

h1 { font-weight: 600; }
h2 { font-weight: 600; }

a {
  color: #667eea;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

.title {
  text-decoration: none;
  border: 0;
}

.title h1 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  .title h1 {
    font-size: 1.8rem;
  }
}

.title span {
  font-weight: 400;
}

.bear::before {
  content: "ᕦʕ •ᴥ•ʔᕤ";
  font-weight: 400;
}

.bear:hover::before {
  content: "ᕙʕ ಠᴥಠʔᕗ";
  font-weight: 400;
}

/* Landing page */
.home-main {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  max-width: none;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.home-main .landing {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 0 2rem;
  max-width: 900px;
  animation: landingFadeIn 1.2s ease both;
}

.home-main .landing-image-wrap {
  animation: landingSlideUp 1s ease 0.1s both;
}

.home-main .landing-text {
  animation: landingSlideUp 1s ease 0.3s both;
}

@keyframes landingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes landingSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-main .landing,
  .home-main .landing-image-wrap,
  .home-main .landing-text {
    animation: none;
  }
}

.landing {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 0 2rem;
  max-width: 900px;
}

.landing-image-wrap {
  flex-shrink: 0;
  text-align: center;
}

.landing-image {
  width: clamp(260px, 38vw, 440px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.landing-caption {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #999;
  font-style: italic;
  letter-spacing: 0.02em;
  min-height: 1.2em;
}

.landing-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.landing-name {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
  line-height: 1.1;
  color: #111;
}

.landing-question {
  font-size: 0.95rem;
  font-style: italic;
  color: #777;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  white-space: normal;
}

.landing-question:hover {
  opacity: 0.6;
}

.landing-question.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.landing-nav {
  display: flex;
  gap: 1.5rem;
}

.landing-private-nav {
  margin-top: 0.4rem;
}

/* Snapshot clones strip data-private-nav, so key the hide off the class too —
   the nav rows below set an explicit display that would otherwise win */
[data-private-nav][hidden],
.site-private-nav[hidden],
.landing-private-nav[hidden] {
  display: none;
}

/* Private links share the row with Writing/About. Spacing is an explicit gap
   rather than the old margin-right + collapsed whitespace, which flex drops
   between the two navs and left Music sitting 4px tighter than About. */
.site-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
}

.site-nav,
.site-private-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}

.site-nav-row a {
  margin-right: 0;
}

.landing-nav a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  margin-right: 0;
  transition: color 0.2s ease;
}

.landing-nav a:hover {
  color: #667eea;
  opacity: 1;
}

/* Landing dark colors handled by reveal.js inline styles */

@media (max-width: 640px) {
  .home-main {
    align-items: safe center;
    box-sizing: border-box;
    overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  }
  .landing {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    padding: 0 1rem;
  }
  .landing-text {
    align-items: center;
  }
  .landing-name {
    font-size: 1.5rem;
  }
  .landing-question {
    font-size: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
    max-width: 90vw;
  }
  .landing-image {
    width: clamp(180px, 55vw, 280px);
  }
  .landing-nav {
    gap: 0.25rem 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .landing-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 0.35rem;
  }
  .landing-private-nav {
    margin-top: 0;
  }
  .site-nav-row,
  .site-nav,
  .site-private-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }
  .site-nav a,
  .site-private-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: 0;
  }
}

@media (max-height: 480px) {
  .home-main {
    box-sizing: border-box;
    align-items: flex-start;
    overflow-y: auto;
    padding: max(0.75rem, env(safe-area-inset-top)) 0 max(0.75rem, env(safe-area-inset-bottom));
  }
  .home-main .landing {
    margin: auto 0;
  }
}

/* Contact icons — fixed bottom right */
.contact-icons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 14px;
  z-index: 998;
  align-items: center;
}

.contact-icons a {
  color: #bbb;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.contact-icons a:hover {
  color: #667eea;
  opacity: 1;
}

body.dark-mode .contact-icons a,
body.unlocked-bg .contact-icons a {
  color: #555;
}
body.dark-mode .contact-icons a:hover,
body.unlocked-bg .contact-icons a:hover {
  color: #667eea;
}
/* body.light-mode a (0,1,2) would out-rank .contact-icons a (0,1,1) and
   turn the icons link-blue after any pjax nav applies the mode class */
body.light-mode .contact-icons a {
  color: #bbb;
}
body.light-mode .contact-icons a:hover {
  color: #667eea;
}

nav a {
  margin-right: 14px;
  font-size: 0.9rem;
  color: #666;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #111;
  opacity: 1;
}

textarea,
input:not([type="submit"]) {
  background-color: inherit;
  color: inherit;
  border: 1px dashed;
  padding: 5px;
  font-size: 16px;
}

.full-width textarea,
.full-width input:not([type="submit"], [type="checkbox"], [type="radio"]) {
  width: calc(100% - 15px);
}

.nav-image {
  height: 3.14rem;
  border-radius: 12.5%;
}

textarea:required,
input:required:not([type="submit"]) {
  border: 1px solid;
}

textarea.full-screen {
  position: fixed;
  background-color: white;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: calc(100vw - 30px);
  max-width: 720px;
  border: 10px solid;
  border-width: 10px calc(50vw - 370px);
}

@media only screen and (max-width: 750px) {
  textarea.full-screen {
    border-width: 10px;
  }
}

button.floating {
  position: fixed;
  bottom: 20px;
  right: 25px;
}

button#toggle-full-screen {
  float: right;
}

content {
  line-height: 1.6;
}

table {
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid #e0e0e0;
}

/* hr dark colors handled by .dark-mode/.unlocked-bg rules */

figure img,
figure video,
.centered {
  width: 60%;
  margin: 0 auto;
  display: block;
}

figure figcaption {
  text-align: center;
  font-size: 0.8em;
  padding-top: 0.5em;
}

code {
  font-family: monospace;
  background-color: #2e3e4e;
  color: #eee;
  border-radius: 3px;
  padding: 2px 5px 2px 5px;
}

blockquote {
  border-left: 2px solid #ddd;
  color: #555;
  padding-left: 20px;
  font-style: italic;
  margin-left: 0;
}

footer {
  padding: 25px 0;
  text-align: left;
}

.helptext {
  color: #777;
  font-size: small;
}

.errorlist {
  color: #eba613;
  font-size: small;
}

.footnotes {
  font-size: small;
}

#id_favicon {
  width: 20px;
  text-align: center;
}

#date-range,
#initial-values,
#import-contacts {
  display: none;
}

#date-range:target,
#initial-values:target,
#import-contacts:target {
  display: block;
}

/* dashboard post list and analytics */
ul.post-list {
  list-style-type: none;
  padding: unset;
}

ul.post-list li {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px dashed;
}

ul.post-list li span {
  flex: 0 0 130px;
}

ul.post-list li span.number {
  flex: 0 0 50px;
}

ul.post-list li a {
  flex: max-content;
}

ul.post-list li small {
  text-align: right;
  flex: 0 0 115px;
}

/* blog posts */
ul.blog-posts {
  list-style-type: none;
  padding: unset;
}

ul.blog-posts li {
  display: flex;
  align-items: baseline;
}

ul.blog-posts li span {
  flex: 0 0 130px;
}

ul.blog-posts li span:first-child {
  color: #999;
  font-size: 0.85rem;
}

ul.blog-posts li span:first-child i {
  font-style: normal;
}

ul.blog-posts li a {
  font-size: 1rem;
}

a.page-link.active {
  font-weight: 600;
}

/* discovery feed */
ul.discover-posts {
  list-style-type: none;
  padding: unset;
}

ul.discover-posts li {
  display: flex;
  line-height: 1.2;
}

ul.discover-posts li span {
  flex: 0 0 40px;
}

ul.discover-posts li a:visited {
  color: #8b6fcb;
}

ul.discover-posts li div {
  padding-bottom: 8px;
}

ul.discover-posts li small {
  color: #777 !important;
}

ul.discover-posts li small a {
  color: #777 !important;
}

.highlight,
.code,
pre {
  background-color: #2e3e4e;
  color: #eee;
  border-radius: 3px;
  overflow: auto;
}

pre {
  padding: 1em;
  padding-top: 0.3em;
  margin: 0;
}

.highlight code,
pre code {
  padding: 0;
}

/* Dark mode styles — applied via .dark-mode class, not system preference */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode strong,
body.dark-mode b {
  color: #eee;
}
body.dark-mode a {
  color: #667eea;
}
body.dark-mode nav a {
  color: #999;
}
body.dark-mode nav a:hover {
  color: #eee;
}
body.dark-mode code,
body.dark-mode .highlight,
body.dark-mode .code {
  background-color: #2a2a2a;
}
body.dark-mode pre code {
  color: #ddd;
}
body.dark-mode blockquote {
  border-left-color: #444;
  color: #ccc;
}
body.dark-mode .helptext {
  color: #aaa;
}

/* Unlocked/starry mode inherits same text styles */
body.unlocked-bg h1,
body.unlocked-bg h2,
body.unlocked-bg h3,
body.unlocked-bg h4,
body.unlocked-bg h5,
body.unlocked-bg h6,
body.unlocked-bg strong,
body.unlocked-bg b {
  color: #eee;
}
body.unlocked-bg a {
  color: #667eea;
}
body.unlocked-bg nav a {
  color: #999;
}
body.unlocked-bg nav a:hover {
  color: #eee;
}
body.unlocked-bg code,
body.unlocked-bg .highlight,
body.unlocked-bg .code {
  background-color: #2a2a2a;
}
body.unlocked-bg pre code {
  color: #ddd;
}
body.unlocked-bg blockquote {
  border-left-color: #444;
  color: #ccc;
}
body.unlocked-bg .helptext {
  color: #aaa;
}

ul.blog-posts {
  padding-bottom: 0.61803rem;
}

ul.blog-posts li {
  padding-top: 0.61803rem;
}

@media (max-width: 640px) {
  ul.blog-posts li {
    flex-wrap: wrap;
    gap: 0;
  }
  ul.blog-posts li span {
    flex: 0 0 auto;
  }
  ul.blog-posts li span:first-child {
    flex: 0 0 100%;
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
  }
  ul.blog-posts li a {
    font-size: 0.95rem;
  }
  ul.blog-posts li span:last-child {
    display: none;
  }
}

small a {
  padding-right: 0.61803rem;
}

hr {
  border: none;
  border-top: 1px solid #e0e0e0;
}

/* hr dark colors handled by .dark-mode/.unlocked-bg rules */

small a {
  padding-right: 0.61803rem;
}

.bottom-footer {
  padding: 50px;
  text-align: center;
}

.highlight .hll {
  background-color: #373b41;
}
.highlight .c {
  color: #969896;
} /* Comment */
.highlight .err {
  color: #cc6666;
} /* Error */
.highlight .k {
  color: #b294bb;
} /* Keyword */
.highlight .l {
  color: #de935f;
} /* Literal */
.highlight .n,
.highlight .h {
  color: #ffffff;
} /* Name */
.highlight .o {
  color: #8abeb7;
} /* Operator */
.highlight .p {
  color: #ffffff;
} /* Punctuation */
.highlight .cm {
  color: #969896;
} /* Comment.Multiline */
.highlight .cp {
  color: #969896;
} /* Comment.Preproc */
.highlight .c1 {
  color: #969896;
} /* Comment.Single */
.highlight .cs {
  color: #969896;
} /* Comment.Special */
.highlight .gd {
  color: #cc6666;
} /* Generic.Deleted */
.highlight .ge {
  font-style: italic;
} /* Generic.Emph */
.highlight .gh {
  color: #ffffff;
  font-weight: bold;
} /* Generic.Heading */
.highlight .gi {
  color: #b5bd68;
} /* Generic.Inserted */
.highlight .gp {
  color: #969896;
  font-weight: bold;
} /* Generic.Prompt */
.highlight .gs {
  font-weight: bold;
} /* Generic.Strong */
.highlight .gu {
  color: #8abeb7;
  font-weight: bold;
} /* Generic.Subheading */
.highlight .kc {
  color: #b294bb;
} /* Keyword.Constant */
.highlight .kd {
  color: #b294bb;
} /* Keyword.Declaration */
.highlight .kn {
  color: #8abeb7;
} /* Keyword.Namespace */
.highlight .kp {
  color: #b294bb;
} /* Keyword.Pseudo */
.highlight .kr {
  color: #b294bb;
} /* Keyword.Reserved */
.highlight .kt {
  color: #f0c674;
} /* Keyword.Type */
.highlight .ld {
  color: #b5bd68;
} /* Literal.Date */
.highlight .m {
  color: #de935f;
} /* Literal.Number */
.highlight .s {
  color: #b5bd68;
} /* Literal.String */
.highlight .na {
  color: #81a2be;
} /* Name.Attribute */
.highlight .nb {
  color: #ffffff;
} /* Name.Builtin */
.highlight .nc {
  color: #f0c674;
} /* Name.Class */
.highlight .no {
  color: #cc6666;
} /* Name.Constant */
.highlight .nd {
  color: #8abeb7;
} /* Name.Decorator */
.highlight .ni {
  color: #ffffff;
} /* Name.Entity */
.highlight .ne {
  color: #cc6666;
} /* Name.Exception */
.highlight .nf {
  color: #81a2be;
} /* Name.Function */
.highlight .nl {
  color: #ffffff;
} /* Name.Label */
.highlight .nn {
  color: #f0c674;
} /* Name.Namespace */
.highlight .nx {
  color: #81a2be;
} /* Name.Other */
.highlight .py {
  color: #ffffff;
} /* Name.Property */
.highlight .nt {
  color: #8abeb7;
} /* Name.Tag */
.highlight .nv {
  color: #cc6666;
} /* Name.Variable */
.highlight .ow {
  color: #8abeb7;
} /* Operator.Word */
.highlight .w {
  color: #ffffff;
} /* Text.Whitespace */
.highlight .mf {
  color: #de935f;
} /* Literal.Number.Float */
.highlight .mh {
  color: #de935f;
} /* Literal.Number.Hex */
.highlight .mi {
  color: #de935f;
} /* Literal.Number.Integer */
.highlight .mo {
  color: #de935f;
} /* Literal.Number.Oct */
.highlight .sb {
  color: #b5bd68;
} /* Literal.String.Backtick */
.highlight .sc {
  color: #ffffff;
} /* Literal.String.Char */
.highlight .sd {
  color: #969896;
} /* Literal.String.Doc */
.highlight .s2 {
  color: #b5bd68;
} /* Literal.String.Double */
.highlight .se {
  color: #de935f;
} /* Literal.String.Escape */
.highlight .sh {
  color: #b5bd68;
} /* Literal.String.Heredoc */
.highlight .si {
  color: #de935f;
} /* Literal.String.Interpol */
.highlight .sx {
  color: #b5bd68;
} /* Literal.String.Other */
.highlight .sr {
  color: #b5bd68;
} /* Literal.String.Regex */
.highlight .s1 {
  color: #b5bd68;
} /* Literal.String.Single */
.highlight .ss {
  color: #b5bd68;
} /* Literal.String.Symbol */
.highlight .bp {
  color: #ffffff;
} /* Name.Builtin.Pseudo */
.highlight .vc {
  color: #cc6666;
} /* Name.Variable.Class */
.highlight .vg {
  color: #cc6666;
} /* Name.Variable.Global */
.highlight .vi {
  color: #cc6666;
} /* Name.Variable.Instance */
.highlight .il {
  color: #de935f;
} /* Literal.Number.Integer.Long */

/* Citation block */
.citation-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #999;
  list-style: none;
  display: inline;
}
.citation-details summary::-webkit-details-marker {
  display: none;
}
.citation-details summary:hover {
  color: #667eea;
}
.citation-details[open] {
  flex-basis: 100%;
}
pre.citation {
  background-color: #f5f5f5;
  border: 1px solid #e5e7eb;
  color: #888;
  font-size: 0.8rem;
  padding: 0.75em 1em;
  margin-top: 0.5em;
  line-height: 1.5;
}
pre.citation code {
  background: transparent;
  color: inherit;
}
body.dark-mode pre.citation,
body.unlocked-bg pre.citation {
  background-color: #242424;
  border-color: #333;
  color: #888;
}

/* Copy Code block */
.code-link {
  color: #ffffff80;
  font-size: smaller;
  margin-right: 1em;
}

.code-link:hover {
  color: #f0c674;
}

.code-div {
  margin-bottom: 1em;
}

pre.collapsed {
  max-height: 300px;
}

.page-links-container {
  margin-top: 1em;
}

.table-of-contents {
  margin-top: 1em;
}

#blog-contents > img,
#blog-contents > p > img,
#blog-contents > svg {
  width: 80%;
  display: block;
  margin: auto;
  padding: 1em 0 1em 0;

  text {
    font-size: 25px;
    text-anchor: middle;
  }
}

@media (max-width: 640px) {
  #blog-contents > img,
  #blog-contents > p > img,
  #blog-contents > svg {
    width: 100%;
  }
  figure img,
  figure video,
  .centered {
    width: 100%;
  }
}

.color-a-stroke {
  stroke: #ff0000;
  @media (prefers-color-scheme: dark) {
    stroke: #ff0000;
  }
}
.color-a-fill {
  fill: #ff0000;
  @media (prefers-color-scheme: dark) {
    fill: #ff0000;
  }
}
.color-a {
  color: #ff0000;
  @media (prefers-color-scheme: dark) {
    color: #ff0000;
  }
}
.color-b-stroke {
  stroke: #00aa23;
  @media (prefers-color-scheme: dark) {
    stroke: #00aa23;
  }
}
.color-b-fill {
  fill: #00aa23;
  @media (prefers-color-scheme: dark) {
    fill: #00aa23;
  }
}
.color-b {
  color: #00aa23;
  @media (prefers-color-scheme: dark) {
    color: #00aa23;
  }
}
.color-c-stroke {
  stroke: #17009e;
  @media (prefers-color-scheme: dark) {
    stroke: #8c81cc;
  }
}
.color-c-fill {
  fill: #17009e;
  @media (prefers-color-scheme: dark) {
    fill: #8c81cc;
  }
}
.color-c {
  color: #17009e;
  @media (prefers-color-scheme: dark) {
    color: #8c81cc;
  }
}
.color-d-stroke {
  stroke: #ff00ff;
  @media (prefers-color-scheme: dark) {
    stroke: #ff00ff;
  }
}
.color-d-fill {
  fill: #ff00ff;
  @media (prefers-color-scheme: dark) {
    fill: #ff00ff;
  }
}
.color-d {
  color: #ff00ff;
  @media (prefers-color-scheme: dark) {
    color: #ff00ff;
  }
}
.color-e-stroke {
  stroke: #55d5d5;
  @media (prefers-color-scheme: dark) {
    stroke: #55d5d5;
  }
}
.color-e-fill {
  fill: #55d5d5;
  @media (prefers-color-scheme: dark) {
    fill: #55d5d5;
  }
}
.color-e {
  color: #55d5d5;
  @media (prefers-color-scheme: dark) {
    color: #55d5d5;
  }
}
.color-f-stroke {
  stroke: #f7a949;
  @media (prefers-color-scheme: dark) {
    stroke: #f7a949;
  }
}
.color-f-fill {
  fill: #f7a949;
  @media (prefers-color-scheme: dark) {
    fill: #f7a949;
  }
}
.color-f {
  color: #f7a949;
  @media (prefers-color-scheme: dark) {
    color: #f7a949;
  }
}
.color-g-stroke {
  stroke: #891eca;
  @media (prefers-color-scheme: dark) {
    stroke: #a463cd;
  }
}
.color-g-fill {
  fill: #891eca;
  @media (prefers-color-scheme: dark) {
    fill: #a463cd;
  }
}
.color-g {
  color: #891eca;
  @media (prefers-color-scheme: dark) {
    color: #a463cd;
  }
}
.color-h-stroke {
  stroke: #353639;
  @media (prefers-color-scheme: dark) {
    stroke: #bdc2d1;
  }
}
.color-h-fill {
  fill: #353639;
  @media (prefers-color-scheme: dark) {
    fill: #bdc2d1;
  }
}
.color-h {
  color: #353639;
  @media (prefers-color-scheme: dark) {
    color: #bdc2d1;
  }
}
.color-i-stroke {
  stroke: #bc201e;
  @media (prefers-color-scheme: dark) {
    stroke: #cc5d5b;
  }
}
.color-i-fill {
  fill: #bc201e;
  @media (prefers-color-scheme: dark) {
    fill: #cc5d5b;
  }
}
.color-i {
  color: #bc201e;
  @media (prefers-color-scheme: dark) {
    color: #cc5d5b;
  }
}
.color-j-stroke {
  stroke: #696b94;
  @media (prefers-color-scheme: dark) {
    stroke: #696b94;
  }
}
.color-j-fill {
  fill: #696b94;
  @media (prefers-color-scheme: dark) {
    fill: #696b94;
  }
}
.color-j {
  color: #696b94;
  @media (prefers-color-scheme: dark) {
    color: #696b94;
  }
}

/* Timeline styling for Recent section */
.timeline-entry {
  display: flex;
  margin-bottom: 1.2em;
  line-height: 1.4;
}

.timeline-date {
  flex: 0 0 140px;
  font-weight: bold;
  padding-right: 20px;
}

.timeline-content {
  flex: 1;
  padding-left: 0;
}

@media (max-width: 600px) {
  .timeline-entry {
    flex-direction: column;
    margin-bottom: 1.5em;
  }
  
  .timeline-date {
    flex: none;
    margin-bottom: 0.3em;
  }
  
  .timeline-content {
    padding-left: 0;
  }
}

.light-fill {
  fill: rgb(255, 255, 255);
  @media (prefers-color-scheme: dark) {
    fill: rgb(18, 19, 20);
  }
}
.dark-fill {
  fill: rgb(18, 19, 20);
  @media (prefers-color-scheme: dark) {
    fill: rgb(255, 255, 255);
  }
}
.light-stroke {
  stroke: rgb(255, 255, 255);
  @media (prefers-color-scheme: dark) {
    stroke: rgb(18, 19, 20);
  }
}
.dark-stroke {
  stroke: rgb(18, 19, 20);
  @media (prefers-color-scheme: dark) {
    stroke: rgb(255, 255, 255);
  }
}

/* Puzzle Easter Egg */
#puzzle-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sleepy-cat {
  --topbar-cat-size: 30px;
  width: var(--topbar-cat-size);
  height: var(--topbar-cat-size);
  background-image: url('/assets/images/oneko.gif');
  background-repeat: no-repeat;
  background-size: calc(var(--topbar-cat-size) * 8) calc(var(--topbar-cat-size) * 4);
  background-position: calc(var(--topbar-cat-size) * -2) 0; /* sleeping frame 1 */
  image-rendering: pixelated;
  opacity: 0.72;
  pointer-events: none;
  animation: topbarCatSleep 2.8s steps(1) infinite;
}

body.puzzle-open #puzzle-container .sleepy-cat {
  opacity: 0;
}

@keyframes topbarCatSleep {
  0%, 49% {
    background-position: calc(var(--topbar-cat-size) * -2) 0; /* sleeping frame 1 */
    transform: translateY(0);
  }
  50%, 100% {
    background-position: calc(var(--topbar-cat-size) * -2) calc(var(--topbar-cat-size) * -1); /* sleeping frame 2 */
    transform: translateY(1px);
  }
}

.puzzle-icon {
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.3s ease, color 0.3s ease;
  padding: 8px;
  color: inherit;
}

.puzzle-icon:hover {
  opacity: 0.8;
}

.puzzle-board {
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 4px;
}

body.dark-mode .puzzle-board,
body.unlocked-bg .puzzle-board {
  background: rgba(255, 255, 255, 0.08);
}

.puzzle-tile {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #667eea;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: left 0.15s ease, top 0.15s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.puzzle-tile:hover {
  background: #5a6fd6;
}

body.dark-mode .puzzle-tile,
body.unlocked-bg .puzzle-tile {
  background: #7b8ef0;
}
body.dark-mode .puzzle-tile:hover,
body.unlocked-bg .puzzle-tile:hover {
  background: #6a7de0;
}

.puzzle-tile.puzzle-solved {
  background: #48c774;
  box-shadow: 0 0 12px rgba(72, 199, 116, 0.6);
  animation: puzzlePulse 0.6s ease;
}

@keyframes puzzlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.puzzle-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #666;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.puzzle-close:hover {
  background: #888;
}

/* Ambient canvas + toggle */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

#ambient-canvas.active {
  opacity: 1;
}


/* View toggle — replaces puzzle icon after solve */
.view-toggle {
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.3s ease, color 0.3s ease;
  padding: 8px;
  color: inherit;
}

.view-toggle:hover {
  opacity: 0.8;
}

/* View menu dropdown */
.view-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 1000;
}

.view-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.dark-mode .view-menu,
body.unlocked-bg .view-menu {
  background: rgba(30, 30, 40, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.vm-label {
  padding: 4px 14px 6px;
  font-size: 11px;
  opacity: 0.5;
  font-style: italic;
  white-space: nowrap;
}

.vm-collection-row {
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.vm-collection-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .vm-collection-row:hover,
body.unlocked-bg .vm-collection-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.vm-collection-row.active {
  opacity: 0.5;
  cursor: default;
  font-style: italic;
}

.vm-collection-row.active:hover {
  background: none;
}

.vm-row {
  padding: 4px 14px;
}


.vm-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 0;
}

body.dark-mode .vm-divider,
body.unlocked-bg .vm-divider {
  background: rgba(255, 255, 255, 0.08);
}

.vm-pw-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 11px;
  font-family: monospace;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  color: inherit;
  outline: none;
}

.vm-pw-input::placeholder {
  font-style: italic;
  opacity: 0.4;
}

.vm-pw-input:focus {
  border-color: #667eea;
}

body.dark-mode .vm-pw-input,
body.unlocked-bg .vm-pw-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 480px) {
  #puzzle-container {
    top: 12px;
    right: 12px;
    gap: 1px;
  }
  .sleepy-cat {
    --topbar-cat-size: 27px;
  }
  .puzzle-icon {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  body.dark-mode .puzzle-icon,
  body.unlocked-bg .puzzle-icon {
    background: rgba(0, 0, 0, 0.6);
  }
  .contact-icons {
    bottom: 12px;
    right: 12px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 10px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  body.dark-mode .contact-icons,
  body.unlocked-bg .contact-icons {
    background: rgba(0, 0, 0, 0.6);
  }
  .contact-icons a svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sleepy-cat {
    animation: none;
    background-position: calc(var(--topbar-cat-size) * -2) 0;
  }
}

/* Puzzle expanded wrapper */
.puzzle-expanded {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

body.dark-mode .puzzle-expanded,
body.unlocked-bg .puzzle-expanded {
  background: #1f1f1f;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.puzzle-pw-row {
  margin-top: 8px;
}

.puzzle-pw-row .puzzle-pw-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  font-size: 11px;
  font-family: monospace;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  background: #fff;
  color: #333;
  outline: none;
}

.puzzle-pw-input::placeholder {
  font-style: italic;
}

.puzzle-pw-input:focus {
  border-color: #667eea;
}

body.dark-mode .puzzle-pw-input,
body.unlocked-bg .puzzle-pw-input {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ddd;
}

/* Circle reveal overlay — use inset:0 to match .home-main positioning exactly */
.reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.reveal-overlay .landing {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 0 2rem;
  max-width: 900px;
}

.reveal-overlay .landing-image {
  width: clamp(260px, 38vw, 440px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.reveal-overlay .landing-name {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
  line-height: 1.1;
}

.reveal-overlay .landing-nav {
  display: flex;
  gap: 1.5rem;
}

.reveal-overlay .landing-nav a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: auto;
}

/* Click peek — shows the other state behind */
.click-peek {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 989;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.click-peek.peek-animate {
  animation: peekBounce 1.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes peekBounce {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 1;
  }
  55% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
  }
}

/* Scroll-to-writing: instant preview of the writing page inside the circle,
   mirroring the body box of content pages so it aligns with the real page
   that replaces it */
.circle-nav-preview-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* The preview must sit below the persistent now-playing bar exactly like
   the real page it stands in for */
body.has-now-playing .circle-nav-preview-body {
  padding-top: 5.5rem;
}

@media (max-width: 480px) {
  .circle-nav-preview-body {
    padding: 1.5rem 1rem;
  }
}

@keyframes catPeekIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .reveal-overlay {
    align-items: safe center;
    box-sizing: border-box;
    overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  }
  .reveal-overlay .landing {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    padding: 0 1rem;
  }
  .reveal-overlay .landing-image {
    width: clamp(180px, 55vw, 280px);
  }
  .reveal-overlay .landing-name {
    font-size: 1.5rem;
  }
  .reveal-overlay .landing-nav {
    gap: 0.25rem 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-height: 480px) {
  .reveal-overlay {
    box-sizing: border-box;
    align-items: flex-start;
    overflow-y: auto;
    padding: max(0.75rem, env(safe-area-inset-top)) 0 max(0.75rem, env(safe-area-inset-bottom));
  }
  .reveal-overlay .landing {
    margin: auto 0;
  }
}

/* Unlocked state — starry background */
body.unlocked-bg {
  background-color: transparent !important;
  color: #ddd;
  transition: background-color 1.25s ease, color 1.25s ease;
}

body.unlocked-bg h1,
body.unlocked-bg h2,
body.unlocked-bg h3,
body.unlocked-bg h4,
body.unlocked-bg strong,
body.unlocked-bg b {
  color: #eee;
}

body.unlocked-bg a {
  color: #8e9ef5;
}

body.unlocked-bg nav a {
  color: #aaa;
}

body.unlocked-bg .blog-posts li span:first-child {
  color: #aaa;
}

body.unlocked-bg hr {
  border-top-color: #2a2a3a;
}

body.unlocked-bg .title a {
  color: #eee;
}

/* Dark mode (chosen on homepage, persists to other pages) */
html.dark-mode { background: #1a1a1a; }
html.unlocked-bg { background: #0a0a1a; }

body.dark-mode {
  background-color: #1a1a1a !important;
  color: #ddd;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong,
body.dark-mode b {
  color: #eee;
}

body.dark-mode a {
  color: #8e9ef5;
}

body.dark-mode nav a {
  color: #aaa;
}

body.dark-mode .blog-posts li span:first-child {
  color: #aaa;
}

body.dark-mode hr {
  border-top-color: #333;
}

body.dark-mode .title a {
  color: #eee;
}

/* Explicit light mode — overrides prefers-color-scheme: dark media queries */
body.light-mode {
  background-color: #fff !important;
  color: #111 !important;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode strong,
body.light-mode b {
  color: #111;
}
body.light-mode a {
  color: #4a5aba;
}
body.light-mode nav a {
  color: #999;
}
body.light-mode nav a:hover {
  color: #111;
}
body.light-mode code,
body.light-mode .highlight,
body.light-mode .code {
  background-color: #f4f4f4;
}
body.light-mode pre code {
  color: #111;
}
body.light-mode blockquote {
  border-left-color: #ddd;
  color: #555;
}
body.light-mode .helptext {
  color: #666;
}
body.light-mode .title a {
  color: #111;
}
body.light-mode .blog-posts li span:first-child {
  color: #999;
}
body.light-mode hr {
  border-top-color: #e0e0e0;
}

/* Now Playing — upper left */
.now-playing {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.5s ease, transform 1s ease;
  pointer-events: auto;
  cursor: default;
}

/* Extra top padding when now-playing is visible on non-home pages */
body.has-now-playing {
  padding-top: 5.5rem;
}

.now-playing.active {
  opacity: 1;
  transform: translateY(0);
}

.np-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 16px;
}

.np-bars span {
  display: block;
  width: 2px;
  background: #667eea;
  border-radius: 1px;
  animation: npBar 0.8s ease-in-out infinite alternate;
}

.np-bars.paused span {
  animation-play-state: paused;
}

.np-bars span:nth-child(1) { height: 6px; animation-delay: 0s; }
.np-bars span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.np-bars span:nth-child(3) { height: 4px; animation-delay: 0.3s; }
.np-bars span:nth-child(4) { height: 8px; animation-delay: 0.45s; }

@keyframes npBar {
  0% { height: 3px; }
  100% { height: 14px; }
}

.np-cover {
  flex-shrink: 0;
  cursor: pointer;
}

.np-cover img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  transition: opacity 0.2s ease;
}

.np-cover:hover img {
  opacity: 0.8;
}

.np-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100px;
  min-width: 0;
  overflow: hidden;
}

.np-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
}

.np-title {
  font-size: 0.7rem;
  color: #999;
  font-style: italic;
  white-space: nowrap;
  display: inline-block;
}

.np-title.scrolling {
  animation: npScroll var(--scroll-duration, 6s) linear infinite alternate;
}

@keyframes npScroll {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--scroll-distance, 0px)); }
}

/* Album cover overlay */
.cover-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.cover-overlay img {
  max-width: min(80vw, 500px);
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.cover-overlay-info {
  font-size: 0.85rem;
  color: #999;
  font-style: italic;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .cover-overlay img {
    max-width: 85vw;
    max-height: 60vh;
  }
  .cover-overlay-info {
    font-size: 0.75rem;
    padding: 0 1rem;
    text-align: center;
  }
}

/* Blog unlocked layout — split view */
main.blog-unlocked {
  display: flex;
  gap: 2rem;
  max-width: 1050px;
}

/* The split view needs a wider body than the 860px reading column. unlock.js
   also sets this inline, but pjax clears inline body styles on every swap, so
   the width has to hold on its own or the layout snaps back mid-navigation. */
@media (min-width: 769px) {
  body:has(main.blog-unlocked) {
    max-width: 1050px;
  }
}

main.blog-unlocked .blog-main {
  flex: 1;
  min-width: 0;
}

main.blog-unlocked .blog-main img {
  max-width: 100%;
  height: auto;
}

/* Secret Writings panel */
.secret-writings {
  flex: 0 0 280px;
  padding-top: 2rem;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.6s ease;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 2rem;
}

.secret-writings.visible {
  opacity: 1;
  transform: translateX(0);
}

.sw-header {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #999;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sw-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ccc;
  margin: 0 0 0.8rem 0;
  font-family: "Apple Garamond", "Garamond", "Source Serif 4", serif;
}

.sw-excerpt {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #aaa;
  font-style: italic;
  margin: 0 0 1.2rem 0;
  cursor: pointer;
}

.sw-dots {
  display: flex;
  gap: 2px;
}

.sw-dot {
  width: 6px;
  height: 6px;
  padding: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  background-clip: content-box;
  transition: background-color 0.4s ease;
  cursor: pointer;
}

.sw-dot.active {
  background-color: #667eea;
}

/* Secret writings — light mode */
body.light-mode .secret-writings {
  border-left-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .sw-header {
  color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .sw-title {
  color: #333;
}
body.light-mode .sw-title:hover {
  color: #111;
}
body.light-mode .sw-excerpt {
  color: #666;
}
body.light-mode .sw-dot {
  background-color: rgba(0, 0, 0, 0.15);
}
body.light-mode .sw-dot.active {
  background-color: #667eea;
}
@media (max-width: 768px) {
  main.blog-unlocked {
    flex-direction: column;
    gap: 1rem;
  }
  .secret-writings {
    flex: none;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 0;
    padding-top: 1.5rem;
    transform: none;
  }
  .secret-writings.visible {
    transform: none;
  }
  body.light-mode .secret-writings {
    border-top-color: rgba(0, 0, 0, 0.08);
  }
}

/* Skip button in now-playing */
.np-controls {
  display: flex;
  gap: 2px;
  align-items: center;
}

.np-prev,
.np-pause,
.np-skip {
  color: #555;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-prev:hover,
.np-pause:hover,
.np-skip:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.np-progress {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.5rem;
  color: #999;
  font-variant-numeric: tabular-nums;
}

.np-progress-bar {
  flex: 1;
  height: 2px;
  background: rgba(150, 150, 150, 0.25);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.np-progress-fill {
  height: 100%;
  background: #667eea;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

/* Hide top chrome on scroll down */
body.topbar-hidden .now-playing.active {
  transform: translateY(-80px) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.topbar-hidden #puzzle-container,
body.topbar-hidden .reading-close {
  transform: translateY(-80px);
  opacity: 0 !important;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.now-playing.active,
#puzzle-container,
.reading-close {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 640px) {
  .now-playing {
    top: 10px;
    left: 10px;
    gap: 8px;
    max-width: calc(100vw - 60px);
    background: rgba(255, 255, 255, 0.85);
    padding: 8px 12px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  body.dark-mode .now-playing,
  body.unlocked-bg .now-playing {
    background: rgba(0, 0, 0, 0.6);
  }
  .np-cover img {
    width: 32px;
    height: 32px;
  }
  .np-info {
    width: 80px;
  }
  .np-title {
    font-size: 0.65rem;
  }
  .np-label {
    font-size: 0.5rem;
  }
  .np-prev, .np-pause, .np-skip {
    padding: 2px 4px;
  }
  .np-prev svg, .np-pause svg, .np-skip svg {
    width: 11px;
    height: 11px;
  }
  body.has-now-playing {
    padding-top: 5.5rem; /* clear the bar incl. its progress row */
  }
  .np-progress {
    gap: 4px;
    font-size: 0.45rem;
  }
}

/* Queue / History panel */
.np-queue {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1101;
  cursor: default;
}

.np-queue.open {
  opacity: 1;
  transform: translateY(0);
}

body.dark-mode .np-queue {
  background: rgba(30, 30, 30, 0.95);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

body.unlocked-bg .np-queue {
  background: rgba(12, 12, 30, 0.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.np-queue-header {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  padding: 8px 12px 4px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.np-queue-shuffle {
  cursor: pointer;
  color: #999;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.2s ease, background 0.2s ease;
  line-height: 1;
  display: flex;
  align-items: center;
}

.np-queue-shuffle:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

body.dark-mode .np-queue-header,
body.unlocked-bg .np-queue-header {
  color: #666;
}

.np-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.np-queue-item:hover {
  background: rgba(102, 126, 234, 0.08);
}

body.dark-mode .np-queue-item:hover,
body.unlocked-bg .np-queue-item:hover {
  background: rgba(102, 126, 234, 0.15);
}

.np-queue-item.active {
  background: rgba(102, 126, 234, 0.1);
}

body.dark-mode .np-queue-item.active,
body.unlocked-bg .np-queue-item.active {
  background: rgba(102, 126, 234, 0.2);
}

.np-queue-cover {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.np-queue-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.np-queue-song {
  font-size: 0.72rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .np-queue-song {
  color: #ddd;
}

body.unlocked-bg .np-queue-song {
  color: #ccc;
}

.np-queue-artist {
  font-size: 0.62rem;
  color: #888;
}

body.dark-mode .np-queue-artist,
body.unlocked-bg .np-queue-artist {
  color: #666;
}

.np-queue-playing {
  font-size: 0.7rem;
  color: #667eea;
  flex-shrink: 0;
  margin-left: auto;
}

.np-queue-history {
  opacity: 0.65;
}

.np-queue-history:hover {
  opacity: 1;
}

/* Queue scrollbar */
.np-queue::-webkit-scrollbar {
  width: 4px;
}

.np-queue::-webkit-scrollbar-track {
  background: transparent;
}

.np-queue::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

body.dark-mode .np-queue::-webkit-scrollbar-thumb,
body.unlocked-bg .np-queue::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* Make np-info clickable for queue toggle */
.np-info {
  cursor: pointer;
}

.np-info:hover .np-title {
  color: #667eea;
}

@media (max-width: 480px) {
  .np-queue {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: unset;
    max-height: 55vh;
    margin-top: 0;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }
  .np-queue.open {
    transform: translateY(0);
  }
}

/* Lock background scroll when reading */
body.reading-open {
  overflow: hidden;
}

/* Reading close button — shown when reading overlay is open */
.reading-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  color: #555;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1101;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.2s ease;
  line-height: 32px;
  box-sizing: border-box;
}
.reading-close:hover {
  color: #999;
}
body.light-mode .reading-close {
  color: #999;
}
body.light-mode .reading-close:hover {
  color: #333;
}
@media (max-width: 640px) {
  .reading-close {
    top: 10px;
    right: 10px;
  }
}

.sw-title {
  cursor: pointer;
}

.sw-title:hover {
  color: #ddd;
}

/* Reading navigation arrows (desktop) */
.reading-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 1101;
  transition: color 0.2s ease, opacity 0.3s ease;
  user-select: none;
  padding: 1rem 0.5rem;
  line-height: 1;
}
.reading-nav:hover {
  color: #777;
}
.reading-nav-prev {
  left: 24px;
}
.reading-nav-next {
  right: 24px;
}
body.light-mode .reading-nav {
  color: #ccc;
}
body.light-mode .reading-nav:hover {
  color: #666;
}
@media (max-width: 640px) {
  .reading-nav {
    display: none;
  }
}

/* Full reading overlay */
.reading-overlay {
  overflow-anchor: none; /* no scroll-anchoring surprises when content swaps */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  z-index: 1000;
  background: #05050f;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 4rem 2rem 4rem;
  padding-bottom: env(safe-area-inset-bottom, 2rem);
  -webkit-overflow-scrolling: touch;
}

.reading-back {
  position: fixed;
  top: 28px;
  left: 28px;
  color: #555;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 1001;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.reading-back:hover {
  color: #999;
}

.reading-content {
  max-width: 720px;
  margin: 0 auto;
  color: #bbb;
  line-height: 1.85;
  font-size: 1rem;
}

.reading-content h1 {
  color: #ddd;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
  font-family: "Apple Garamond", "Garamond", "Source Serif 4", serif;
}

.reading-content p {
  margin-bottom: 1.3rem;
}

.reading-content ol,
.reading-content ul {
  margin: 0 0 1.3rem 1.5rem;
  padding: 0;
}

.reading-content li {
  margin-bottom: 0.4rem;
}

.reading-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2.5rem 0;
}

.reading-content img,
.reading-content video {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.reading-content video {
  background: rgba(255, 255, 255, 0.03);
  min-height: 120px;
}

.reading-content video:not([data-loaded]) {
  background: rgba(255, 255, 255, 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23555' stroke-width='2' stroke-dasharray='60 30' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
}

/* Reading overlay — light mode */
body.light-mode .reading-overlay {
  background: rgba(255, 255, 255, 0.97);
}
body.light-mode .reading-content {
  color: #444;
}
body.light-mode .reading-content h1 {
  color: #111;
}
body.light-mode .reading-back {
  color: #999;
}
body.light-mode .reading-back:hover {
  color: #333;
}
body.light-mode .reading-content hr {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Reading overlay — dark mode (not starry) */
body.dark-mode .reading-overlay {
  background: #1a1a1a;
}

/* Reading overlay — starry mode: semi-transparent so stars show through */
body.unlocked-bg .reading-overlay {
  background: rgba(5, 5, 15, 0.88);
}

@media (max-width: 640px) {
  .reading-overlay {
    padding: 5.5rem 1.2rem 6rem;
  }
  .reading-back {
    top: 16px;
    left: 16px;
    font-size: 0.8rem;
  }
  .reading-content {
    font-size: 0.95rem;
    line-height: 1.75;
  }
  .reading-content h1 {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 640px) {
  body.reading-open .reading-overlay {
    padding-top: 5rem;
  }
}

/* Hide UI chrome when printing */
@media print {
  .contact-icons,
  #puzzle-container,
  .view-toggle,
  .cover-overlay,
  .floating-toc,
  nav,
  footer,
  .draft-notice,
  .post-end-rule {
    display: none !important;
  }
}

/* Hide overlay UI (eye toggle, puzzle, contact icons) on mobile post pages */
@media (max-width: 640px) {
  body.page-post .contact-icons,
  body.page-post #puzzle-container,
  body.page-post .view-toggle,
  body.page-post .cover-overlay {
    display: none !important;
  }
}

/* Visually hidden but kept in the rendered DOM: invisible to humans, still
   present as real laid-out text for screen readers and scrapers. The text is
   clipped to a 1px box rather than display:none so it survives render-then-
   extract pipelines that drop non-rendered nodes. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Project share: standalone carousel overlay ─── */
.projects-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #05050f;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden;
}
.projects-overlay.visible { opacity: 1; }
body.unlocked-bg .projects-overlay { background: rgba(5, 5, 15, 0.92); }
body.dark-mode .projects-overlay { background: #141414; }
body.light-mode .projects-overlay { background: #fafafa; }

.pc-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4rem;
  z-index: 2002;
  pointer-events: none;
}
.pc-topbar > * { pointer-events: auto; }
.pc-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #888;
}
.pc-counter {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #666;
  font-variant-numeric: tabular-nums;
}
.pc-close {
  font-size: 1.6rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease;
}
.pc-close:hover { color: #ccc; }
body.light-mode .pc-close:hover { color: #222; }

.pc-scroll {
  position: absolute;
  inset: 52px 0 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 2rem 5rem;
  box-sizing: border-box;
}
.pc-slide {
  max-width: 760px;
  margin: 0 auto;
  color: #bbb;
  transition: opacity 0.16s ease;
}
.pc-slide h1 {
  color: #ddd;
  font-size: 1.5rem;
  margin-bottom: 1.6rem;
}
.pc-slide h2,
.pc-slide h3,
.pc-slide h4,
.pc-slide h5,
.pc-slide h6,
.pc-slide strong,
.pc-slide b {
  color: #eee;
}
body.light-mode .pc-slide {
  color: #444;
}
body.light-mode .pc-slide h1,
body.light-mode .pc-slide h2,
body.light-mode .pc-slide h3,
body.light-mode .pc-slide h4,
body.light-mode .pc-slide h5,
body.light-mode .pc-slide h6,
body.light-mode .pc-slide strong,
body.light-mode .pc-slide b {
  color: #111;
}

.pc-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #555;
  cursor: pointer;
  user-select: none;
  z-index: 2002;
  transition: color 0.2s ease;
}
.pc-arrow:hover { color: #bbb; }
body.light-mode .pc-arrow:hover { color: #222; }
.pc-prev { left: 8px; }
.pc-next { right: 8px; }

.pc-dots {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2002;
  max-width: 80vw;
  flex-wrap: wrap;
  justify-content: center;
}
.pc-dot {
  width: 6px;
  height: 6px;
  padding: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.pc-dot.active { background-color: #667eea; }
body.light-mode .pc-dot { background-color: rgba(0, 0, 0, 0.18); }
body.light-mode .pc-dot.active { background-color: #667eea; }

@media (max-width: 640px) {
  .pc-scroll { padding: 0.5rem 1.1rem 5rem; }
  .pc-arrow { display: none; }
  .pc-slide h1 { font-size: 1.3rem; }
}

/* ─── Project share: toast ─── */
.share-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.share-modal-backdrop.visible { opacity: 1; }

.share-toast {
  position: relative;
  max-width: 460px;
  width: 100%;
  box-sizing: border-box;
  padding: 1.6rem 1.7rem 1.7rem;
  border-radius: 16px;
  background: rgba(24, 24, 36, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.share-modal-backdrop.visible .share-toast { transform: scale(1); }
.share-toast-msg {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #eee;
  padding-right: 1.2rem;
}
.share-toast-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 1.35rem;
  color: #777;
  cursor: pointer;
  line-height: 1;
}
.share-toast-close:hover { color: #ccc; }
.share-toast-actions {
  display: flex;
  gap: 10px;
  margin-top: 1.2rem;
}
.share-toast-btn {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.share-toast-btn.primary {
  background: #667eea;
  color: #fff;
}
.share-toast-btn.primary:hover { background: #5568d8; }
.share-toast-btn.ghost {
  background: transparent;
  color: #aaa;
  border-color: rgba(255, 255, 255, 0.14);
}
.share-toast-btn.ghost:hover { color: #ddd; border-color: rgba(255, 255, 255, 0.28); }

body.light-mode .share-toast {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
body.light-mode .share-toast-msg { color: #333; }
body.light-mode .share-toast-close { color: #999; }
body.light-mode .share-toast-close:hover { color: #333; }
body.light-mode .share-toast-btn.ghost { color: #666; border-color: rgba(0, 0, 0, 0.14); }

/* ─── Project share: subtle persistent pill ─── */
.share-pill {
  position: fixed;
  bottom: 20px;
  left: 18px;
  z-index: 1102;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #bbb;
  height: 16px;
  box-sizing: border-box;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(20, 20, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease, border-color 0.2s ease;
}
.share-pill.visible { opacity: 1; transform: translateY(0); }
.share-pill:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.share-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #667eea;
  box-shadow: 0 0 8px #667eea;
}
body.light-mode .share-pill {
  color: #555;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .share-pill:hover { color: #111; border-color: rgba(0, 0, 0, 0.25); }

@media (max-width: 640px) {
  .share-pill { bottom: 20px; left: 14px; font-size: 0.68rem; }
}

/* Inline code inside the projects carousel / reading overlays */
.pc-slide code,
.reading-content code {
  display: inline;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 0.05em 0.4em;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #eaeaea !important;
  white-space: nowrap;
  vertical-align: baseline;
}
body.light-mode .pc-slide code,
body.light-mode .reading-content code {
  background-color: rgba(0, 0, 0, 0.07) !important;
  color: #333 !important;
}

/* Music wall */
.music-wall-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  color: #222;
}

.dark-mode .music-wall-page {
  background: #171717;
  color: #e8e8e8;
}

.unlocked-bg .music-wall-page {
  background: transparent;
  color: #e8e8ef;
}

.music-wall {
  --music-wall-ink: #5f5f5f;
  --music-wall-active: #5369df;
  --music-wall-resting-opacity: 1;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: auto;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: hidden;
  transform: none;
}

@media (any-pointer: coarse) {
  /* Thumb-drag explores the wall (cover + audio under the finger). Take the
     drag away from the browser's scroll/zoom/pull-to-refresh gestures so it
     streams continuous pointermove events; a stationary tap still opens the
     link. */
  .music-wall {
    touch-action: none;
    -webkit-tap-highlight-color: transparent; /* no grey flash when tapping a line */
  }

  /* No text selection while dragging a thumb across the wall — apply to the whole
     copy so the gaps/delimiters between lines aren't selectable either, not just
     the <a> lines. */
  .music-wall-copy {
    -webkit-user-select: none;
    user-select: none;
  }

  /* iOS otherwise treats each lyric <a> as a draggable link: a thumb-drag pops
     the long-press callout / link-drag preview and hijacks the touch, so the
     pointermove stream never reaches the explore handler (covers + audio stop
     loading). Disable the native link/callout/drag behaviors on the lines. */
  .music-wall .music-wall-line {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }
}

/* The wall owns audio, so the site's upper-left "now playing" player must never
   appear over it — not even for the frame after unlock.js (re)creates it when we
   arrive here via PJAX. Keyed on the page body class so it needs no JS timing. */
body.music-wall-page .now-playing {
  display: none !important;
}

/* Likewise the upper-right chrome: the sleepy cat and the options "eye" live in
   the persistent puzzle container and get re-created by Unlock.reinit() on every
   PJAX nav. Hide them on the wall so it stays a clean full-screen piece. */
body.music-wall-page .sleepy-cat,
body.music-wall-page .view-toggle {
  display: none !important;
}

.music-wall-copy {
  width: 100%;
  color: var(--music-wall-ink);
  font-family: "Apple Garamond", "Garamond", "Source Serif 4", serif;
  font-size: 16px;
  font-weight: 430;
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.035em;
  line-height: 0.97;
  text-align: justify;
  text-align-last: justify;
  text-wrap: wrap;
  /* Hidden until fitCopy() computes the fill-the-screen size and adds
     .is-fitted. Without this the copy paints once at the 16px default and
     visibly jumps up to the fitted size — a flash of too-small text. */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.music-wall-copy.is-fitted {
  opacity: 1;
}

.music-wall .music-wall-line {
  color: inherit;
  opacity: var(--music-wall-resting-opacity);
  text-decoration: none;
  transition: color 48ms linear, opacity 48ms linear;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.music-wall-delimiter {
  opacity: 0.72;
}

.music-wall.has-active-line .music-wall-line {
  opacity: var(--music-wall-resting-opacity);
}

.music-wall .music-wall-line.is-active {
  color: var(--music-wall-active);
  opacity: 1;
}

.music-wall .music-wall-line:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.08em;
}

.music-wall-preview {
  --music-preview-x: 12px;
  --music-preview-y: 12px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: var(--music-preview-width, clamp(88px, 9.5vw, 138px));
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--music-preview-x), var(--music-preview-y), 0) scale(0.96);
  transform-origin: top left;
  /* Position (x/y) is eased in JS, frame by frame, with each step collision-
     checked so the cover never slides across the hovered lyric — hence no CSS
     transition on transform, which couldn't make that guarantee. */
  transition: opacity 55ms ease;
  will-change: opacity, transform;
}

.music-wall-preview.is-cover-pending {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

.music-wall-preview.is-visible {
  opacity: 1;
  transform: translate3d(var(--music-preview-x), var(--music-preview-y), 0) scale(1);
}

.music-wall-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1px;
  background: #111;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  contain: paint;
}

.music-wall-preview figcaption {
  margin-top: 0.18rem;
  padding: 0.16rem 0.24rem 0.18rem;
  overflow: hidden;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  color: #3d3d3d;
  font-size: 0.61rem;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}

.music-wall-preview-caption-viewport {
  display: block;
  width: 100%;
  overflow: hidden;
}

.music-wall-preview-caption-track {
  display: block;
  width: max-content;
  min-width: 100%;
  transform: translate3d(0, 0, 0);
  white-space: nowrap;
}

.music-wall-preview figcaption.is-overflowing .music-wall-preview-caption-track {
  animation: music-wall-caption-pan var(--music-caption-duration, 6s) ease-in-out 550ms infinite alternate;
  will-change: transform;
}

@keyframes music-wall-caption-pan {
  0%, 14% {
    transform: translate3d(0, 0, 0);
  }
  86%, 100% {
    transform: translate3d(var(--music-caption-travel, 0px), 0, 0);
  }
}

.music-wall-audio {
  display: none;
}

/* Full-page "tap anywhere to enable sound" overlay. A dark scrim over the whole
   wall (works on every theme) with a centered prompt; the panel is click-through
   so the entire viewport is the unlock target. */
.music-wall-unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11, 11, 14, 0.64);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease;
}

.music-wall-unlock-overlay[hidden] {
  display: none;
}

.music-wall-unlock-overlay.is-visible {
  opacity: 1;
}

.music-wall-unlock-overlay:focus,
.music-wall-unlock-overlay:focus-visible {
  outline: none;
}

.music-wall-unlock-panel {
  pointer-events: none; /* the whole scrim is the click target, not just the box */
  max-width: min(86vw, 366px);
  padding: 22px 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: rgba(26, 26, 30, 0.74);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  text-align: center;
  transform: scale(0.97);
  transition: transform 200ms ease;
}

.music-wall-unlock-overlay.is-visible .music-wall-unlock-panel {
  transform: scale(1);
}

.music-wall-unlock-title {
  margin: 0;
  color: #f5f5f7;
  font: 500 1.04rem/1.3 "Source Serif 4", serif;
  letter-spacing: 0.004em;
}

.music-wall-unlock-sub {
  margin: 9px 0 0;
  color: rgba(240, 240, 245, 0.6);
  font: 400 0.79rem/1.45 "Source Serif 4", serif;
}

.dark-mode .music-wall {
  --music-wall-ink: #bcbcbc;
  --music-wall-active: #8999f4;
}

.dark-mode .music-wall .music-wall-line {
  color: inherit;
}

.unlocked-bg .music-wall {
  --music-wall-ink: #c3c7d9;
  --music-wall-active: #a5b1ff;
}

.dark-mode .music-wall-preview figcaption,
.unlocked-bg .music-wall-preview figcaption {
  background: rgba(24, 24, 24, 0.88);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.24);
  color: #ddd;
}

.unlocked-bg .music-wall-preview figcaption {
  background: rgba(10, 10, 26, 0.88);
  color: #ededf3;
}

@media (max-width: 640px) {
  .music-wall {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
}

/* (No touch-specific line override: the wall used to hide its cover and flatten
   the active-line color on no-hover devices because it was hover-only. Thumb-drag
   now explores on touch, so touch behaves like desktop — the line under the
   finger highlights in the accent color and its cover shows.) */

@media (prefers-reduced-motion: reduce) {
  .music-wall .music-wall-line,
  .music-wall-preview,
  .music-wall-copy,
  .music-wall-unlock-overlay,
  .music-wall-unlock-panel {
    transition: none;
  }

  .music-wall-preview figcaption.is-overflowing .music-wall-preview-caption-track {
    animation: none;
  }
}

#brutal-way{opacity:.6;transition:opacity .15s}
#brutal-way:hover,#brutal-way:focus-visible{opacity:1}