*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

hr {
  height: 3px;
  border: none;
  background-color: #928585;
  margin-bottom: 3rem;
}

pre {
  color: #928585;
  font-family: "Times New Roman", Times, serif;
}

div.blog-tags {
  color: #928585 !important;
  font-weight: bolder !important;
  font-style: oblique !important;
}

.posts-list h5 {
  color: #928585 !important;
  font-weight: bolder !important;
  font-style: oblique !important;
}

.posts-list p {
  text-align: center;
  font-style: inherit;
  color: #ffb255;
  font-size: 15px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  color: #928585;
}

body.light-mode p {
  color: #0a1f44;
}

img {
  width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 50px;
}

.xyz {
  text-align: center;
  position: relative;
  z-index: 1;
  color: #928585; /* Example color for text against video background */
}

.container {
  max-width: 90ch;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 2rem auto;
  padding: 2rem 1.25rem;
  counter-reset: theorem definition sidenote-counter;
}

.container h6 {
  color: #928585;
  font-weight: bold;
}

/* Tag title styling */
.tag-title {
  text-align: left;
  text-decoration: none;
  color: #928585;
}

.tag-title a {
  text-decoration: none;
  color: #928585;
}

body.light-mode .tag-title,
body.light-mode .tag-title a {
  color: #0a1f44;
}

.tag-title {
  transition: all 0.3s ease;
}

.tag-title:hover {
  transform: scale(1.05);
}

#abdisalam-sharif-ali {
  text-align: center;
}

.toc {
  font-weight: lighter;
  font-family: "source-code-pro", sans-serif;
  color: #928585;
}

/* Preview/content styling */

#TableOfContents li {
  text-decoration: double;
  color: #ffb255 !important;
}

#TableOfContents li {
  transition: all 0.4s ease;
}

#TableOfContents li:hover {
  transform: scale(1.02); /* Slightly increase the size */
}

#TableOfContents li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  padding-right: 0.85rem;
}

#TableOfContents > ul {
  counter-reset: item;
  list-style-type: none;
}

.checkbox {
  display: flex;
  margin: 0.2rem 0 0 0.8rem;
  align-items: top;
  color: #ffb255;
}

.box {
  width: 1rem;
  height: 0.8rem;
  margin: 0.5rem 1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffb255;
}

.checked .box {
  background-color: #40280b;
  color: #928585;
}

/* Light Mode */
body.light-mode {
  background-color: #FBFBFA;
  color: #002266; /* Darker/bolder blue text (was #0a1f44) */
}

/* Update headings in light mode */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: #002266;
}

/* Update other light mode text colors */
body.light-mode .posts-list h5,
body.light-mode div.blog-tags,
body.light-mode pre,
body.light-mode .xyz,
body.light-mode .container h6,
body.light-mode .toc,
body.light-mode .site-header,
body.light-mode .navbar {
  color: #002266 !important;
}

/* Default link color for both light and dark modes */
a {
  color: #ffb255;
  text-decoration: none;
}

/* Light mode link color - keeping gold */
body.light-mode a {
  color: #0044cc; /* Bolder blue links (was #ffb255 override) */
}

/* Book section specific styles */
.book-entry a {
  color: #ffb255;
}

body.light-mode .book-entry a {
  color: #0044cc; /* Bolder blue for book links in light mode */
}

.book-link {
  color: #ffb255;
}

body.light-mode .book-link {
  color: #0044cc; /* Bolder blue for book links in light mode */
}

/* Box and checkbox styles */
body.light-mode .box {
  border: 1px solid #002266;
}

body.light-mode .checkbox {
  color: #002266;
}

/* Reset some basic elements for a clean slate */
:root {
  --background-color: #090b09;
  --text-color: #928585;
  --link-color: #ffb255;
  --border-color: #777777;
  --button-color: var(--background-color);
}

/* Checking github update */

/* Light mode overrides */
:root.light-mode {
  --background-color: #FBFBFA;
  --text-color: #000000;
  --link-color: #0044cc; /* Thicker/bolder blue (was #1a73e8) */
  --border-color: #cccccc;
  --button-color: var(--background-color);
}

/* Dark mode explicit overrides */
body:not(.light-mode) {
  --text-color: #928585; /* Light gray for better readability */
  --link-color: #ffb255; /* Keep gold color for links */
}

body:not(.light-mode) h1,
body:not(.light-mode) h2,
body:not(.light-mode) h3,
body:not(.light-mode) h4,
body:not(.light-mode) h5,
body:not(.light-mode) h6,
body:not(.light-mode) p,
body:not(.light-mode) a {
  color: var(--text-color) !important; /* Ensure it applies */
}

body:not(.light-mode) .spinning-a,
body:not(.light-mode) .h1-text,
body:not(.light-mode) .p-text {
  color: var(--text-color) !important;
}

/* Ensure site title updates */
body:not(.light-mode) .top-title h1,
body:not(.light-mode) .top-title a {
  color: var(--text-color) !important;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Times New Roman", Times, serif;
  line-height: 1.8;
  overflow-x: hidden;
  margin: 2rem auto;
  padding: 2rem 1.25rem;
  counter-reset: theorem definition sidenote-counter;

  text-rendering: optimizeLegibility;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure it only fills the viewport */
  margin: 0; /* Prevent unnecessary margins */
  padding: 0;
}

/* end */

/*book section */

/* Books page */
.hoverable:hover {
  font-weight: bold;
}

.hidden {
  display: none;
}

.text-highlight {
  /* your special styles */
  color: #f7be71;
}
.book-description {
  margin: 1rem 1rem 1.5rem 1.5rem;
}

.sub {
  border: 1px dashed;
  border-color: #191919;
  margin-left: 0rem;
}

.post-content-books {
  overflow: visible;
}

.books-page-shell {
  position: relative;
  padding-right: 10.5rem;
}

.post-content-books h2 {
  scroll-margin-top: 7rem;
}

.books-page-main {
  min-width: 0;
}

.books-right-rail {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
}

.books-right-rail-inner {
  position: fixed;
  top: 10.5rem;
  right: max(1.5rem, calc((100vw - 90ch) / 2 - 7.75rem));
  width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-left: 1.1rem;
}

.books-right-rail-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 1px;
  background: rgba(255, 178, 85, 0.38);
}

.books-rail-kicker {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #928585;
}

.books-rail-mobile-trigger {
  display: none;
}

.books-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.books-rail-nav a {
  position: relative;
  padding-left: 1rem;
  font-size: 0.88rem;
  color: #928585;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.books-rail-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.45rem;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.75;
}

.books-rail-nav a:hover {
  color: #ffb255;
  transform: translateX(0.15rem);
}

.books-rail-note {
  margin: 0;
  max-width: 7rem;
  font-size: 0.74rem;
  line-height: 1.7;
  color: rgba(146, 133, 133, 0.9);
}

.books-rail-backdrop {
  display: none;
}

/* Desktop: mobile stack is transparent to layout; panel + chrome hidden */
.books-rail-mobile-stack {
  display: contents;
}

.books-rail-menu-panel {
  display: contents;
}

.books-rail-divider,
.books-rail-close {
  display: none;
}

body.light-mode .books-right-rail-inner::before {
  background: rgba(0, 68, 204, 0.26);
}

body.light-mode .books-rail-kicker,
body.light-mode .books-rail-nav a {
  color: #002266;
}

body.light-mode .books-rail-nav a:hover {
  color: #1a73e8;
}

body.light-mode .books-rail-note {
  color: rgba(10, 31, 68, 0.8);
}
/* end */

h1 {
  text-align: center;
}

#theme-toggle {
  font-family: "Times New Roman", Times, serif;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #090b09; /* Dark background in dark mode */
  color: #948779; /* Text color */
  border: none;
  border-radius: 10%;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  cursor: pointer;
  width: 120px;
  line-height: 10px;
  height: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, transform 0.4s ease;
  z-index: 9999;
}

#theme-toggle:hover {
  font-family: "Times New Roman", Times, serif;
  transform: scale(1.2);
}

#theme-toggle:active {
  transform: scale(0.85);
}

.home-emblem {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9999;
  line-height: 0;
  transition: transform 0.4s ease;
}

.home-emblem:hover {
  transform: scale(1.08);
}

.home-emblem-image {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Light mode override for theme toggle */
body.light-mode #theme-toggle {
  background-color: #FBFBFA;
  color: #002266;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

article hr {
  margin-left: 0rem;
}

/* Article headings */
article h1 {
  margin-left: 0rem;
  color: #928585;
}

article h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  color: #928585;
}

body.light-mode article h1,
body.light-mode article h2 {
  color: #002266;
}

/* Article links */
article a {
  text-decoration: none;
  color: #ffb255;
}

body.light-mode article a {
  color: #0044cc;
}

article a:hover {
  text-decoration: underline;
}

.site-header a {
  text-decoration: none;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 90ch;
  margin: 0 auto;
  padding: 1rem 1.25rem 0.5rem;
  transition: transform 0.3s ease;
}

.site-header .site-logo {
  flex: 1;
  min-width: 0;
}

.site-header .logo {
  margin: 0;
  text-align: left;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  line-height: 1.2;
}

.site-header-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 0;
}

.site-header-image {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.site-header:hover {
  transform: scale(1.02);
}

.text-center {
  text-align: center;
}

article {
  display: block;
  unicode-bidi: isolate;
}

.spinning-a {
  font-size: 3em;
  color: #928585;
  margin-bottom: 20px;
  animation: spin 5s linear infinite, scaleInOut 5s ease-in-out infinite;
  transform-origin: center;
}
.h1-text {
  font-size: 2em;
  color: #928585; /* Change color as needed */
  margin: 0 0 10px;
  animation: blink-caret 0.75s step-end infinite;
}

.text-color {
  color: #928585; /* Change this to your desired color */
}

.p-text {
  font-size: 1.2em;
  color: #928585; /* Text color */
  margin: 0;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowing text */
  border-right: 0.15em solid #2b2a2a; /* Blinking cursor effect */
  animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;

  /* Default alignment and direction */
  text-align: left;
  direction: ltr;
}

/* RTL-specific styling */
.p-text[dir="rtl"] {
  text-align: right; /* Align text to the right */
  direction: rtl; /* Set right-to-left direction */
}

footer .theme-by {
  text-align: center;
  margin: 100px 0 0;
}

/* nav bar */

.navbar {
  margin-top: 20px;
}

.navbar .homelist {
  list-style-type: none;
  padding: 0;
}

.navbar .homelist li {
  display: inline;
  margin-right: 20px;
}

.navbar .homelist li a {
  text-decoration: none;
  color: #6f6666; /* White color for the links */
  font-size: 1.3em; /* Adjust the font size as needed */
  transition: color 0.3s ease;
}

.navbar .homelist li a:hover {
  color: #928585; /* Lighter shade on hover */
}

/* Social Media Icons */
.social-media {
  position: absolute;
  bottom: 20px; /* Adjust vertical position */
  left: 50%; /* Center horizontally relative to the page */
  transform: translateX(
    -50%
  ); /* Shift the element back by half its width to truly center it */
  text-align: center; /* Ensure content inside the container is centered */
}

.social-icon {
  margin: 0 10px; /* Adjust spacing as needed */
  display: inline-block;
}

.social-icon img {
  width: 30px; /* Adjust size as needed */
  height: 30px; /* Adjust size as needed */
  filter: invert(34%) sepia(3%) saturate(0%) hue-rotate(200deg) brightness(96%)
    contrast(91%); /* Match icon color with your theme */
  transition: filter 0.3s ease;
}

.social-icon img:hover {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(200deg)
    brightness(100%) contrast(100%); /* Hover effect */
}

/* Change the color to match the h1 element */
.social-icon img {
  color: #2b2a2a; /* Same color as h1 */
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #2b2a2a;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin-reverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.spinning-a:hover {
  animation: spin-reverse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite,
    scaleInOut 2s ease-in-out infinite;
}

/* Animation for fading in and out */
@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Responsive Design */

@media (max-width: 768px) {
  /* Adjustments for smaller screens */
  .spinning-a {
    font-size: 2em; /* Decrease font size */
    margin-bottom: 10px; /* Adjust spacing */
  }

  #h1-text {
    font-size: 1.5em; /* Decrease font size */
  }

  #p-text {
    font-size: 1em; /* Decrease font size */
  }
}

/* About page-specific override */
.about-page {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Times New Roman", Times, serif;
  background-color: var(--background-color);
  overflow: auto;
}

/* About page title styling */
.top-title {
  position: absolute; /* Absolute positioning for fine control */
  top: 20px; /* Align it 20px from the top */
  left: 50%;
  transform: translate(-50%, 0); /* Horizontally center */
  text-align: center;
  z-index: 999;
}

.top-title h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
}

.top-title a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
p,
a {
  color: var(--text-color); /* Use text color variable for all text elements */
}

/* Media query for smaller screens (phones) */
@media screen and (max-width: 768px) {
  .top-title {
    margin: 70px 0 20px; /* Increase the top margin on smaller screens */
  }
}

@media screen and (max-width: 480px) {
  .top-title {
    margin: 120px 0 20px; /* Increase the margin even more on very small screens */
    font-size: 2rem; /* Reduce the size of the title slightly */
  }
}

/* About page content styling */
.about-content {
  max-width: 700px; /* Allow content to scale */
  margin: 50px auto; /* Center the block vertically and horizontally */
  padding: 20px;
  line-height: 1.6; /* Improve text readability */
  text-align: justify; /* Justify text alignment */
}

/* Centering the image in the about-content */
.centered-photo {
  display: block;
  margin: 20px auto; /* Center image */
  max-width: 80%; /* Adjust to fit parent container */
  height: auto; /* Maintain aspect ratio */
}

/* Media query for tablets and smaller devices */
@media screen and (max-width: 768px) {
  .centered-photo {
    max-width: 70%; /* Increase the image width relative to the smaller screen size */
  }
}

/* Media query for very small screens like phones */
@media screen and (max-width: 480px) {
  .centered-photo {
    max-width: 30%; /* Further increase the width for phones to maintain visibility */
  }
}

@media (max-width: 1024px) {
  #theme-toggle {
    top: 0.9rem;
    left: 0.9rem;
    width: auto;
    min-width: 4.5rem;
    height: 2.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 999px;
  }

  .container img {
    width: 100%; /* Make the image fill its container */
    max-height: 300px; /* Optional: Restrict the height */
    object-fit: cover; /* Ensure the image scales without distortion */
  }

  .books-page-shell {
    padding-right: 0;
  }

  .books-page-main {
    padding-bottom: 5.5rem;
  }

  .books-rail-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .books-right-rail.is-open .books-rail-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.light-mode .books-rail-backdrop {
    background: transparent;
  }

  /* Aside stays in document flow (no height) so fixed children anchor to the viewport */
  .books-right-rail {
    position: static;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    transform: none;
  }

  .books-right-rail.is-open {
    pointer-events: auto;
  }

  .books-right-rail-inner {
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    pointer-events: none;
  }

  .books-right-rail.is-open .books-right-rail-inner {
    z-index: 55;
  }

  .books-rail-mobile-stack {
    position: fixed;
    left: auto;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: auto;
    max-width: none;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .books-right-rail-inner::before {
    display: none;
  }

  .books-rail-kicker {
    display: none;
  }

  .books-rail-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.72rem;
    padding: 0 0.72rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #2a2a2a;
    color: #fafafa;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
  }

  @media (hover: hover) {
    .books-rail-mobile-trigger:hover {
      background: #2d2d2d;
      border-color: rgba(255, 255, 255, 0.085);
    }
  }

  .books-rail-mobile-trigger:active {
    transform: scale(0.98);
  }

  .books-rail-menu-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    right: 0;
    bottom: 0;
    transform-origin: bottom right;
    min-width: 8.5rem;
    max-width: min(10rem, 78vw);
    padding: 0.2rem 0 0.18rem;
    border-radius: 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #1a1a1a;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.28),
      0 8px 22px rgba(0, 0, 0, 0.22);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.86) translateY(6px);
    pointer-events: none;
    transition:
      opacity 0.2s ease-in,
      transform 0.26s cubic-bezier(0.52, 0, 0.86, 0.44),
      visibility 0s linear 0.26s;
  }

  .books-right-rail.is-open .books-rail-menu-panel {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.22s ease-out,
      transform 0.4s cubic-bezier(0.28, 1.65, 0.48, 1),
      visibility 0s linear 0s;
  }

  .books-right-rail.is-open .books-rail-mobile-trigger {
    display: none;
  }

  .books-rail-nav {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.08rem 0.12rem 0;
    margin: 0;
    min-width: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    filter: none;
    transform: none;
  }

  .books-rail-nav a {
    display: block;
    padding: 0.3rem 0.65rem;
    margin: 0;
    border: none;
    border-radius: 1rem;
    background: transparent;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #8c8c8c;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .books-rail-nav a.is-active {
    color: #f2f2f2;
    background: transparent;
    box-shadow: none;
  }

  .books-rail-nav a:focus-visible {
    outline: none;
    color: #9a9a9a;
    background-color: rgba(255, 255, 255, 0.018);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
  }

  @media (hover: hover) {
    .books-rail-nav a:hover {
      color: #949494;
      background-color: rgba(255, 255, 255, 0.014);
    }
  }

  .books-rail-nav a::before,
  .books-rail-nav a::after {
    display: none !important;
  }

  .books-rail-divider {
    display: block;
    height: 1px;
    margin: 0.12rem 0.65rem 0.14rem;
    border: none;
    background: rgba(255, 255, 255, 0.07);
  }

  .books-rail-close {
    display: block;
    margin: 0 0.12rem 0.12rem;
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 1rem;
    background: transparent;
    color: #8c8c8c;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    transition: color 0.18s ease, background-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .books-rail-close:focus-visible {
    outline: none;
    color: #9a9a9a;
    background-color: rgba(255, 255, 255, 0.018);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
  }

  @media (hover: hover) {
    .books-rail-close:hover {
      color: #949494;
      background-color: rgba(255, 255, 255, 0.014);
    }
  }

  .books-rail-note {
    display: none;
  }

  body.light-mode .books-rail-mobile-trigger {
    background: #ececec;
    color: #141414;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.035);
  }

  @media (hover: hover) {
    body.light-mode .books-rail-mobile-trigger:hover {
      background: #eaeaea;
      border-color: rgba(0, 0, 0, 0.065);
    }
  }

  body.light-mode .books-rail-menu-panel {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.04),
      0 8px 22px rgba(0, 0, 0, 0.07);
  }

  body.light-mode .books-rail-nav a {
    color: #6b6b6b;
  }

  body.light-mode .books-rail-nav a.is-active {
    color: #0a0a0a;
  }

  body.light-mode .books-rail-nav a:focus-visible {
    color: #525252;
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 0 1px rgba(0, 68, 204, 0.12);
  }

  @media (hover: hover) {
    body.light-mode .books-rail-nav a:hover {
      color: #5c5c5c;
      background-color: rgba(0, 0, 0, 0.024);
    }
  }

  body.light-mode .books-rail-divider {
    background: rgba(0, 0, 0, 0.07);
  }

  body.light-mode .books-rail-close {
    color: #6b6b6b;
  }

  body.light-mode .books-rail-close:focus-visible {
    color: #525252;
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 0 1px rgba(0, 68, 204, 0.12);
  }

  @media (hover: hover) {
    body.light-mode .books-rail-close:hover {
      color: #5c5c5c;
      background-color: rgba(0, 0, 0, 0.024);
    }
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .books-rail-backdrop,
  .books-rail-mobile-trigger,
  .books-rail-nav a,
  .books-rail-close {
    transition-duration: 0.08s !important;
  }

  .books-rail-menu-panel {
    transform: translateY(4px) scale(0.96) !important;
    transition:
      opacity 0.12s ease !important,
      transform 0.12s ease !important,
      visibility 0s linear 0.12s !important;
  }

  .books-right-rail.is-open .books-rail-menu-panel {
    transform: translateY(0) scale(1) !important;
    transition:
      opacity 0.12s ease !important,
      transform 0.12s ease !important,
      visibility 0s linear 0s !important;
  }
}

/* Custom Audio Player Styling */
.audio-player-wrapper {
  margin: 2rem 0;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.audio-caption {
  margin-bottom: 0.5rem;
  color: #ffb255;
  font-family: "Source Code Pro", monospace;
  font-size: 0.9rem;
  text-align: center;
}

body.light-mode .audio-caption {
  color: #1a73e8;
}

.custom-audio-player {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  background-color: rgba(146, 133, 133, 0.08);
  border-radius: 50px; /* Pill shape */
  border: 1px solid rgba(146, 133, 133, 0.2);
  transition: all 0.3s ease;
}

body.light-mode .custom-audio-player {
  background-color: rgba(0, 34, 102, 0.05);
  border-color: rgba(0, 68, 204, 0.2);
}

.play-pause-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #ffb255;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s ease;
}

body.light-mode .play-pause-btn {
  color: #0044cc;
}

.play-pause-btn:hover {
  transform: scale(1.1);
}

.progress-container {
  flex-grow: 1;
  height: 100%; /* Match the height of the player wrapper */
  position: absolute; /* Absolute positioning to fill the pill */
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  z-index: 0; /* Behind the controls */
}

.progress-bar {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

body.light-mode .progress-bar {
  background-color: transparent;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background-color: rgba(255, 178, 85, 0.3); /* Solid gold tint, increased opacity */
  border-radius: 0; /* Fill the container */
  transition: width 0.1s linear;
  background-image: none; /* Remove liquid pattern */
  animation: none; /* Remove liquid animation */
}

body.light-mode .progress-fill {
  background-color: rgba(0, 68, 204, 0.3); /* Solid blue tint, increased opacity */
  background-image: none;
}

/* Ensure controls are on top */
.play-pause-btn,
.time-display {
  position: relative;
  z-index: 2;
  font-weight: bold;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
}

.time-display.duration {
  /* Initially centered */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  white-space: nowrap; /* Prevent wrapping */
}

.time-display.current-time {
  /* Initially hidden */
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.8); /* Slightly smaller start */
  opacity: 0;
  white-space: nowrap; /* Prevent wrapping */
  pointer-events: none;
}

/* Playing state: Duration moves right, Current Time fades in at center */
.custom-audio-player.playing .time-display.duration {
  left: auto; /* Release left constraint */
  right: 1.5rem; /* Anchor to right */
  transform: translateX(0); /* Reset transform */
}

.custom-audio-player.playing .time-display.current-time {
  opacity: 1;
  transform: translateX(-50%) scale(1); /* Full size, centered */
  pointer-events: auto;
}

/* Make the wrapper relative for absolute positioning of progress bar */
.custom-audio-player {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space out controls */
  gap: 1rem;
  padding: 0.8rem 1.5rem; /* Add more padding */
  background-color: rgba(146, 133, 133, 0.08);
  border-radius: 50px; /* Pill shape */
  border: 1px solid rgba(146, 133, 133, 0.2);
  transition: all 0.3s ease;
  overflow: hidden; /* Contain the progress bar */
  height: 60px; /* Fixed height to ensure consistency */
  opacity: 0.7; /* Dim by default */
}

.custom-audio-player:hover,
.custom-audio-player.playing {
  opacity: 1; /* Full opacity on hover or when playing */
  background-color: rgba(146, 133, 133, 0.15); /* Slightly darker background on hover */
  border-color: rgba(146, 133, 133, 0.4);
  transform: scale(1.02); /* Subtle pop effect */
}

body.light-mode .custom-audio-player:hover,
body.light-mode .custom-audio-player.playing {
  background-color: rgba(0, 34, 102, 0.1);
  border-color: rgba(0, 68, 204, 0.4);
}


/* Book styling */
.book-entry {
  margin: 1rem 0;
  padding-left: 2rem;
  position: relative;
}

.book-entry::before {
  content: "1. ";
  position: absolute;
  left: 1rem;
  color: var(--text-color);
}

.book-entry a {
  color: #ffb255;
  text-decoration: none;
}

.book-entry a:hover {
  text-decoration: underline;
}

body.light-mode .book-entry a {
  color: #1a73e8;
}

.book-entry span {
  color: var(--text-color);
}

/* Book section headings */
.article h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--text-color);
  font-size: 1.5rem;
}

/* Book list styling */
.book-list {
  list-style: none;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.book-item {
  margin: 0.8rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.book-item::before {
  content: "•";
  color: var(--text-color);
  margin-right: 0.5rem;
}

.book-link {
  color: #ffb255;
  text-decoration: none;
}

.book-link:hover {
  text-decoration: underline;
}

body.light-mode .book-link {
  color: #1a73e8;
}

/* Book section headings */
.article h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  text-decoration: underline;
}

/* Header and navigation links */
.site-header a,
.navbar a,
.navbar .homelist li a {
  text-decoration: none !important;
}

.site-header a:hover,
.navbar a:hover,
.navbar .homelist li a:hover {
  text-decoration: none !important;
}

/* Default link styles */
a {
  color: #ffb255;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Book section specific styles */
.book-entry a {
  color: #ffb255;
}

body.light-mode .book-entry a {
  color: #1a73e8;
}

/* Remove underline from site title and navigation */
.top-title a,
.top-title a:hover {
  text-decoration: none !important;
}

blockquote {
  border-left: #928585 solid;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  padding: 1rem 1rem 1rem 3rem;
  margin: 2.3rem;
}

/* Core light mode styles - ensure these have high specificity */
html body.light-mode {
  background-color: #FBFBFA !important;
  color: #0a1f44 !important;
}

/* Ensure all containers inherit the background color */
body.light-mode .container,
body.light-mode .wrapper,
body.light-mode .content,
body.light-mode main,
body.light-mode article,
body.light-mode section,
body.light-mode .xyz,
body.light-mode #container,
body.light-mode .about-page,
body.light-mode .about-content {
  background-color: inherit !important;
}

/* Ensure the toggle button has the correct styles */
body.light-mode #theme-toggle {
  background-color: #FBFBFA !important;
  color: #40280b !important;
}

body:not(.light-mode) #theme-toggle {
  background-color: #090b09 !important;
  color: #948779 !important;
}

/* Quick thoughts styling */
.quick-thought-toggle {
  cursor: pointer;
  color: #ffb255;
  margin-left: 5px;
}

body.light-mode .quick-thought-toggle {
  color: #0044cc;
}

.quick-thought-content {
  margin: 0.5rem 0 0.5rem 1rem;
  padding: 0.5rem;
  border-left: 2px solid #ffb255;
  font-size: 0.85em;
  color: #928585;
  max-width: 80%;
}

body.light-mode .quick-thought-content {
  border-left-color: #0044cc;
  color: #002266;
}

.quick-thought-content.visible {
  display: block !important;
}

.article h6 {
  font-size: 1em; /* it seems pretty normal to me for now this size */
  margin-top: 1.2em;
  margin-bottom: 0.8em;
  color: #928585;
  font-weight: normal;
}

@media (max-width: 768px) {
  .navbar .homelist {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    overflow-x: auto;
  }

  .navbar .homelist li {
    white-space: nowrap;
    margin: 0 0px;
  }

  .navbar .homelist li a {
    display: block;
    font-size: 0.2em; /* Smaller font size */
    padding: 4px 0px; /* Adjust padding as needed */
  }
}

/* Project figure styling */
.project-figure {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-image {
  max-width: 100%;
  height: auto;
  border: 2px solid var(--text-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-color);
  text-align: center;
}

.resume-page {
  margin-top: 1.5rem;
}

.resume-page-shell {
  position: relative;
  padding-right: 0;
}

.resume-page-main {
  min-width: 0;
}

.resume-page-main .resume-section {
  scroll-margin-top: 7rem;
}

.resume-actions {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.resume-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--link-color);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.resume-action:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.resume-action--secondary {
  border-color: var(--border-color);
}

.resume-sheet {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.resume-hero {
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(146, 133, 133, 0.3);
  text-align: center;
}

.resume-name {
  margin: 0 0 0.35rem;
  color: inherit;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.resume-contact {
  margin: 0;
  font-size: 0.97rem;
}

.resume-section + .resume-section {
  margin-top: 2rem;
}

.resume-section-title {
  margin: 0 0 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(146, 133, 133, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
}

.resume-entry + .resume-entry {
  margin-top: 1rem;
}

.resume-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.resume-entry-title {
  font-weight: 700;
  color: inherit;
}

.resume-entry-meta,
.resume-entry-date {
  font-size: 0.95rem;
  color: var(--text-color);
}

.resume-entry-submeta {
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: var(--text-color);
}

.resume-skill-list,
.resume-bullets {
  margin: 0.55rem 0 0;
  padding-left: 1.2rem;
}

.resume-skill-list li,
.resume-bullets li {
  margin: 0.28rem 0;
  color: inherit;
}

.resume-right-rail {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: auto;
}

.resume-guide-menu {
  position: relative;
}

.resume-guide-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(146, 133, 133, 0.28);
  border-radius: 999px;
  background: rgba(9, 11, 9, 0.72);
  backdrop-filter: blur(14px);
  color: inherit;
  cursor: pointer;
  list-style: none;
}

.resume-guide-trigger::-webkit-details-marker {
  display: none;
}

.resume-guide-trigger::after {
  content: "+";
  margin-left: 0.55rem;
  font-size: 0.95rem;
}

.resume-guide-menu[open] .resume-guide-trigger::after {
  content: "−";
}

.resume-guide-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  border: 1px solid rgba(146, 133, 133, 0.24);
  border-radius: 1rem;
  background: rgba(9, 11, 9, 0.58);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.resume-guide-panel a {
  display: block;
  padding: 0.45rem 0.55rem;
  border-radius: 0.65rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.resume-guide-panel a:hover {
  background: rgba(255, 178, 85, 0.1);
  text-decoration: none;
  transform: translateX(0.1rem);
}

body.light-mode .resume-sheet {
  background: transparent;
}

body.light-mode .resume-hero,
body.light-mode .resume-section-title {
  border-color: rgba(0, 34, 102, 0.16);
}

body.light-mode .resume-guide-trigger,
body.light-mode .resume-guide-panel {
  border-color: rgba(0, 34, 102, 0.14);
  background: rgba(251, 251, 250, 0.72);
}

body.light-mode .resume-guide-panel a:hover {
  background: rgba(0, 68, 204, 0.08);
}

body.light-mode .resume-entry-meta,
body.light-mode .resume-entry-date,
body.light-mode .resume-entry-submeta {
  color: #0a1f44;
}

@media (max-width: 1040px) {
  .resume-right-rail {
    left: 0.9rem;
    bottom: 0.9rem;
  }
}

@media (max-width: 820px) {
  .site-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .site-header .site-logo {
    flex: 0 0 100%;
  }

  .resume-sheet {
    padding: 0;
  }

  .resume-guide-trigger {
    min-width: 0;
    padding: 0.68rem 0.92rem;
    font-size: 0.92rem;
  }

  .resume-guide-panel {
    min-width: 10rem;
    max-width: min(14rem, calc(100vw - 1.8rem));
  }

  .resume-entry-head {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* Enhanced Blog Layout Styles */
.blog-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(146, 133, 133, 0.5);
}

body.light-mode .blog-header {
  border-bottom-color: rgba(0, 34, 102, 0.5);
}

.blog-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #928585;
}

body.light-mode .blog-title {
  color: #002266;
}

.blog-subtitle {
  font-size: 1.1rem;
  color: #928585;
  font-style: italic;
  margin: 0;
}

body.light-mode .blog-subtitle {
  color: #002266;
}

.blog-stats {
  text-align: center;
  margin-bottom: 2rem;
}

.post-count {
  font-size: 0.9rem;
  color: #928585;
  font-style: italic;
}

body.light-mode .post-count {
  color: #002266;
}

/* Tag Filter */
.tag-filter {
  text-align: center;
  margin-bottom: 3rem;
  padding: 1rem;
  background-color: rgba(146, 133, 133, 0.05);
  border-radius: 8px;
}

body.light-mode .tag-filter {
  background-color: rgba(0, 34, 102, 0.05);
}

.filter-label {
  font-size: 0.9rem;
  color: #928585;
  margin-right: 1rem;
  font-weight: bold;
}

body.light-mode .filter-label {
  color: #002266;
}

.tag-link {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  margin: 0.2rem;
  border: 1px solid #928585;
  border-radius: 15px;
  color: #928585;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.tag-link:hover,
.tag-link.active {
  background-color: #ffb255;
  color: #090b09;
  border-color: #ffb255;
}

body.light-mode .tag-link {
  border-color: #0044cc;
  color: #0044cc;
}

body.light-mode .tag-link:hover,
body.light-mode .tag-link.active {
  background-color: #0044cc;
  color: #FBFBFA;
}

/* Post Preview Styling */
.post-preview {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}

.post-meta {
  font-size: 0.85rem;
  color: #928585;
  margin-bottom: 0.5rem;
}

body.light-mode .post-meta {
  color: #002266;
}

.post-date {
  font-weight: bold;
}

.reading-time {
  margin-left: 1rem;
}

.meta-separator {
  margin: 0 0.5rem;
  opacity: 0.7;
}

.post-title {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.8rem;
  line-height: 1.3;
}

.post-title a {
  color: #928585;
  text-decoration: none;
}

.post-title a:hover {
  text-decoration: none;
}

body.light-mode .post-title a {
  color: #002266;
}

.post-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #928585;
  margin-bottom: 1rem;
}

body.light-mode .post-description {
  color: #002266;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.tags-label {
  font-size: 0.85rem;
  color: #928585;
  font-weight: bold;
  margin-right: 0.5rem;
}

body.light-mode .tags-label {
  color: #002266;
}

.post-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background-color: rgba(255, 178, 85, 0.1);
  border: 1px solid #ffb255;
  border-radius: 12px;
  color: #ffb255;
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.post-tag:hover {
  background-color: #ffb255;
  color: #090b09;
}

body.light-mode .post-tag {
  background-color: rgba(0, 68, 204, 0.1);
  border-color: #0044cc;
  color: #0044cc;
}

body.light-mode .post-tag:hover {
  background-color: #0044cc;
  color: #FBFBFA;
}

/* Enhanced Single Post Styles */
.post-nav {
  margin-bottom: 2rem;
}

.back-to-blog {
  color: #928585;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.back-to-blog:hover {
  color: #ffb255;
}

body.light-mode .back-to-blog {
  color: #002266;
}

body.light-mode .back-to-blog:hover {
  color: #0044cc;
}

.post-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 178, 85, 0.4);
}

body.light-mode .post-header {
  border-bottom-color: rgba(0, 68, 204, 0.4);
}

.post-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #928585;
  line-height: 1.2;
}

body.light-mode .post-title {
  color: #002266;
}

.post-content {
  margin-bottom: 3rem;
}

/* Favorite quotes — body sized for comfortable reading */
.post-content .quotes-page {
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 38rem;
}

.post-content .quotes-page p {
  margin: 1.15rem 0 0.35rem;
  line-height: 1.62;
}

.post-content .quotes-page p:first-child {
  margin-top: 0;
}

.post-content .quotes-page > div[id$="-thoughts"] {
  margin-bottom: 0.35rem;
}

.post-header--compact .post-title {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.post-header--compact .post-description {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  line-height: 1.45;
}

.post-header--compact .post-description a {
  color: #ffb255;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

body.light-mode .post-header--compact .post-description a {
  color: #0044cc;
}

.personal-records-table {
  width: 100%;
  max-width: 32rem;
  margin: 1rem 0 2rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.45;
  border: 1px solid rgba(146, 133, 133, 0.45);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(20, 20, 20, 0.35);
}

.personal-records-table thead {
  background: rgba(146, 133, 133, 0.14);
}

.personal-records-table th,
.personal-records-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(146, 133, 133, 0.28);
}

.personal-records-table tbody tr:last-child td {
  border-bottom: none;
}

.personal-records-table th {
  font-weight: 600;
  color: #ffb255;
  letter-spacing: 0.02em;
}

.personal-records-table td {
  color: #c4b8b8;
}

.personal-records-table td:first-child {
  width: 42%;
  color: #a89898;
}

.personal-records-table a {
  color: #ffb255;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.personal-records-table a:hover {
  color: #ffc46e;
}

body.light-mode .personal-records-table {
  border-color: rgba(0, 34, 102, 0.35);
  background: rgba(255, 255, 255, 0.6);
}

body.light-mode .personal-records-table thead {
  background: rgba(0, 68, 204, 0.08);
}

body.light-mode .personal-records-table th,
body.light-mode .personal-records-table td {
  border-bottom-color: rgba(0, 34, 102, 0.15);
}

body.light-mode .personal-records-table th {
  color: #0044cc;
}

body.light-mode .personal-records-table td {
  color: #333333;
}

body.light-mode .personal-records-table td:first-child {
  color: #555555;
}

body.light-mode .personal-records-table a {
  color: #0044cc;
}

body.light-mode .personal-records-table a:hover {
  color: #003399;
}

.post-footer {
  border-top: 1px solid rgba(255, 178, 85, 0.3);
  padding-top: 2rem;
}

body.light-mode .post-footer {
  border-top-color: rgba(0, 68, 204, 0.3);
}

/* Post Navigation */
.post-navigation {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.nav-previous {
  text-align: left;
}

.nav-next {
  text-align: right;
}

.nav-link {
  display: block;
  color: #928585;
  text-decoration: none;
  padding: 1rem;
  border: 1px solid rgba(146, 133, 133, 0.4);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  border-color: #ffb255;
  background-color: rgba(255, 178, 85, 0.05);
}

body.light-mode .nav-link {
  color: #002266;
  border-color: rgba(0, 34, 102, 0.4);
}

body.light-mode .nav-link:hover {
  border-color: #0044cc;
  background-color: rgba(0, 68, 204, 0.05);
}

.nav-label {
  display: block;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 0.3rem;
}

.nav-title {
  display: block;
  font-weight: bold;
  line-height: 1.3;
}

/* No posts message */
.no-posts {
  text-align: center;
  padding: 3rem;
  color: #928585;
  font-style: italic;
}

body.light-mode .no-posts {
  color: #002266;
}

/* Responsive Design for Blog */
@media (max-width: 768px) {
  .blog-title {
    font-size: 2rem;
  }
  
  .post-title {
    font-size: 1.5rem;
  }
  
  .post-navigation {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .nav-next {
    text-align: left;
  }
  
  .tag-filter {
    text-align: left;
  }
  
  .filter-label {
    display: block;
    margin-bottom: 0.5rem;
  }
}

/* Gallery Styles */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 16 / 9;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* Override default image border-radius */
}
/* Tiny Bottom Navbar */
.tiny-navbar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 0.5rem 1.5rem;
    background-color: rgba(9, 11, 9, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(146, 133, 133, 0.2);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.tiny-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.tiny-nav-list li {
    display: inline-block;
}

.tiny-nav-list li a {
    text-decoration: none;
    color: #928585;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.tiny-nav-list li a:hover {
    color: #ffb255;
    opacity: 1;
    transform: translateY(-1px);
}

/* Light mode overrides */
body.light-mode .tiny-navbar {
    background-color: rgba(255, 241, 225, 0.7);
    border-color: rgba(0, 68, 204, 0.2);
    box-shadow: 0 4px 20px rgba(0, 34, 102, 0.1);
}

body.light-mode .tiny-nav-list li a {
    color: #002266;
}

body.light-mode .tiny-nav-list li a:hover {
    color: #0044cc;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tiny-navbar {
        bottom: 1.5rem;
        padding: 0.5rem 1rem;
        width: 90%;
        max-width: 400px;
        justify-content: center;
        display: flex;
    }
    
    .tiny-nav-list {
        gap: 1rem;
        justify-content: space-between;
        width: 100%;
    }
    
    .tiny-nav-list li a {
        font-size: 0.8rem;
    }
}

/* Active state for tiny navbar with bubble tint effect */
.tiny-nav-list li a {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
}

.tiny-nav-list li.active a {
    background: rgba(255, 178, 85, 0.15); /* Subtle gold tint */
    box-shadow: inset 0 0 8px rgba(255, 178, 85, 0.1);
    color: #ffb255;
    opacity: 1;
    font-weight: bold;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Light mode active state */
body.light-mode .tiny-nav-list li.active a {
    background: rgba(0, 68, 204, 0.1); /* Subtle blue tint */
    box-shadow: inset 0 0 8px rgba(0, 68, 204, 0.1);
    color: #002266;
}

/* New Blog Post Notification */
.new-post-notification {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    margin: 1rem auto 1.5rem auto;
    padding: 0.4rem 1rem;
    background-color: transparent;
    border: 1px solid rgba(146, 133, 133, 0.25);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.new-post-notification:hover {
    border-color: #ffb255;
    text-decoration: none;
}

.notification-text {
    font-size: 0.8rem;
    color: #928585;
}

.notification-title {
    font-size: 0.8rem;
    color: #ffb255;
}

/* Light mode styles */
body.light-mode .new-post-notification {
    border-color: rgba(0, 68, 204, 0.25);
}

body.light-mode .new-post-notification:hover {
    border-color: #0044cc;
}

body.light-mode .notification-text {
    color: #002266;
}

body.light-mode .notification-title {
    color: #0044cc;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .new-post-notification {
        padding: 0.25rem 0.6rem; /* reduced padding */
        margin: 0.5rem auto 0.8rem auto; /* reduced margin */
        gap: 0.25rem; /* reduced gap */
        max-width: 85%; /* limit width to prevent excessive length */
        flex-wrap: wrap; /* allow wrapping on very small screens */
        justify-content: center;
    }
    
    .notification-text,
    .notification-title {
        font-size: 0.7rem; /* slightly smaller font */
        line-height: 1.2;
    }
}

/* --- Code Block Styling (Caramel Coffee) --- */

/* Base code block styling */
pre {
  background-color: #1e1e1e;  /* Slightly lighter dark background */
  color: #d4d4d4;
  padding: 1.5rem;
  border-radius: 3px; /* Reduced from 12px for sharper look */
  overflow-x: auto;
  font-family: 'Source Code Pro', monospace;
  font-size: 0.95rem;
  line-height: 1.6; /* Improved readability */
  margin: 2.5rem 0;
  border: 1px solid #333;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Deeper shadow for depth */
}

/* Light Mode Code Blocks - Creamy/Caramel Premium */
body.light-mode pre {
  background-color: #fffaf5; /* Warmer, richer cream */
  color: #40280b; /* Dark coffee text */
  border-color: rgba(230, 210, 181, 0.6); /* Soft caramel border */
  box-shadow: 0 8px 24px rgba(146, 133, 133, 0.12); /* Soft, diffused shadow */
}

/* Inline code styling */
code {
  font-family: 'Source Code Pro', monospace;
  background-color: rgba(255, 178, 85, 0.15);
  color: #ffb255;
  padding: 0.2rem 0.4rem;
  border-radius: 4px; /* Reduced from 6px */
  font-size: 0.9em;
}

body.light-mode code {
  background-color: rgba(255, 178, 85, 0.2); /* Warm caramel tint */
  color: #b45309; /* Deep caramel text */
}

/* Override inline code inside pre blocks */
pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Syntax Highlighting Colors (Chroma/Hugo Compatible Classes) */

/* Comments - Warm Grey */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs { color: #858585; font-style: italic; }

/* Keywords - Soft Pink/Red */
.chroma .k, .chroma .kd, .chroma .kp, .chroma .kr, .chroma .kt { color: #ff5c57; font-weight: bold; }

/* Strings - Warm Gold */
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: #f3f99d; }

/* Numbers - Purple */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { color: #bd93f9; }

/* Operators */
.chroma .o, .chroma .ow { color: #ff5c57; }

/* Functions - Green/Blue */
.chroma .n, .chroma .na, .chroma .nb, .chroma .nc, .chroma .no, .chroma .nd, .chroma .ni, .chroma .ne, .chroma .nf, .chroma .nl, .chroma .nn, .chroma .nt, .chroma .nv, .chroma .nx { color: #5af78e; }


/* Light Mode Syntax Overrides (Caramel Coffee Palette) - Refined */

/* Comments (Light Mode) - Warm Taupe */
body.light-mode .chroma .c, 
body.light-mode .chroma .ch, 
body.light-mode .chroma .cm, 
body.light-mode .chroma .c1, 
body.light-mode .chroma .cs { color: #a89f91; font-style: italic; }

/* Keywords (Light Mode) - Burnt Orange / Rust */
body.light-mode .chroma .k, 
body.light-mode .chroma .kd, 
body.light-mode .chroma .kp, 
body.light-mode .chroma .kr, 
body.light-mode .chroma .kt { color: #c05621; font-weight: bold; }

/* Strings (Light Mode) - Olive / Gold */
body.light-mode .chroma .s, 
body.light-mode .chroma .sa, 
body.light-mode .chroma .sb, 
body.light-mode .chroma .sc, 
body.light-mode .chroma .dl, 
body.light-mode .chroma .sd, 
body.light-mode .chroma .s2, 
body.light-mode .chroma .se, 
body.light-mode .chroma .sh, 
body.light-mode .chroma .si, 
body.light-mode .chroma .sx, 
body.light-mode .chroma .sr, 
body.light-mode .chroma .s1, 
body.light-mode .chroma .ss { color: #857f26; }

/* Numbers (Light Mode) - Deep Purple */
body.light-mode .chroma .m, 
body.light-mode .chroma .mb, 
body.light-mode .chroma .mf, 
body.light-mode .chroma .mh, 
body.light-mode .chroma .mi, 
body.light-mode .chroma .il, 
body.light-mode .chroma .mo { color: #6b46c1; }

/* Operators (Light Mode) - Dark Roast */
body.light-mode .chroma .o, 
body.light-mode .chroma .ow { color: #40280b; }

/* Functions (Light Mode) - Strong Coffee */
body.light-mode .chroma .n, 
body.light-mode .chroma .na, 
body.light-mode .chroma .nb, 
body.light-mode .chroma .nc, 
body.light-mode .chroma .no, 
body.light-mode .chroma .nd, 
body.light-mode .chroma .ni, 
body.light-mode .chroma .ne, 
body.light-mode .chroma .nf, 
body.light-mode .chroma .nl, 
body.light-mode .chroma .nn, 
body.light-mode .chroma .nt, 
body.light-mode .chroma .nv, 
body.light-mode .chroma .nx { color: #2c5282; }

/* --- End Code Block Styling --- */

/* --- Side-by-Side Images (Blog Post) --- */
.side-by-side-images {
  display: flex;
  gap: 15px; /* Space between images */
  width: 100%;
  margin: 2.5rem 0;
  justify-content: center;
}

.side-by-side-images img {
  width: 48%; /* Roughly half width */
  border-radius: 0 !important; /* No rounded corners as requested */
  height: auto;
  margin: 0;
  max-width: none; /* Allow them to scale up */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Slight shadow for lift */
  transition: transform 0.3s ease;
}

.side-by-side-images img:hover {
  transform: scale(1.02);
}

/* Response for mobile */
@media (max-width: 768px) {
  .side-by-side-images {
    flex-direction: column;
    gap: 1rem;
  }
  .side-by-side-images img {
    width: 100%;
  }
}

/* --- Lightbox / Modal Feature --- */
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(9, 11, 9, 0.85); /* Slightly darker/transparent */
  backdrop-filter: blur(8px); /* Blur effect */
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.lightbox-image {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 8px; /* Slight round for modal image */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox-overlay.active .lightbox-image {
  transform: scale(1);
}

.lightbox-caption {
  color: #ffb255; /* Gold text */
  margin-top: 1.5rem;
  font-family: 'Source Code Pro', monospace;
  font-size: 1.1rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

body.light-mode .lightbox-caption {
  color: #FBFBFA; /* Light mode caption text */
  background-color: rgba(64, 40, 11, 0.8); /* Dark coffee bg */
}

/* Cursor pointer on clickable images */
.side-by-side-images img {
  cursor: zoom-in;
  /* Fix specific sandwiched issue by preventing full vertical stretch */
  align-self: flex-start; /* Or center, prevents stretching height */
  height: auto; 
  /* Also force aspect ratio if needed, but flex-start usually fixes distortion */
  object-fit: contain;
}

/* --- Side-by-Side Images (Blog Post) --- */
.side-by-side-images {
  display: flex;
  gap: 15px; /* Space between images */
  width: 100%;
  margin: 2.5rem 0;
  justify-content: center;
}

.side-by-side-images img {
  width: 48%; /* Roughly half width */
  border-radius: 0 !important; /* No rounded corners as requested */
  height: auto;
  margin: 0;
  max-width: none; /* Allow them to scale up */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Slight shadow for lift */
  transition: transform 0.3s ease;
  cursor: zoom-in;
  object-fit: cover;
}

.side-by-side-images img:hover {
  transform: scale(1.02);
}

/* Response for mobile */
@media (max-width: 768px) {
  .side-by-side-images {
    flex-direction: column;
    gap: 1rem;
  }
  .side-by-side-images img {
    width: 100%;
  }
}

/* --- Lightbox / Modal Feature --- */
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(9, 11, 9, 0.85); /* Slightly darker/transparent */
  backdrop-filter: blur(8px); /* Blur effect */
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); /* Faster transition for zoom */
  border-radius: 0; /* Sharp corners for modal image too */
  cursor: zoom-in;
}

.lightbox-overlay.active .lightbox-image {
  transform: scale(1);
}

.lightbox-caption {
  color: #ffb255; /* Gold text */
  margin-top: 1.5rem;
  font-family: 'Source Code Pro', monospace;
  font-size: 1.1rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  pointer-events: auto; /* Ensure caption is clickable */
}

body.light-mode .lightbox-caption {
  color: #FBFBFA; /* Light mode caption text */
  background-color: rgba(64, 40, 11, 0.8); /* Dark coffee bg */
}

:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#090b09;color:#b4a7a0;font:17px/1.65 Georgia,serif}main{max-width:1000px;margin:0 auto;padding:35px 24px 90px}header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #484038;padding-bottom:20px}a{color:#ffb255;text-underline-offset:4px}h1,h2,h3{line-height:1.2}h1{font-size:clamp(30px,5vw,48px)}.label{font:12px monospace;text-transform:uppercase;letter-spacing:2px;color:#bcb0a0}.login{max-width:460px;margin:12vh auto}.login input{display:block;width:100%;padding:14px;margin:10px 0 20px;border:1px solid #74644e;border-radius:6px;background:#222;color:#fff;font:inherit}button,.node{border:1px solid #64503b;border-radius:6px;padding:10px 16px;background:#26211c;color:#ffb255;font:inherit;cursor:pointer}.node{display:block;margin:12px 0;text-decoration:none}.node:hover,button:hover{background:#3b2d20}.muted{color:#b6aea3;font-size:14px}.error{color:#ffc1b8}blockquote,aside{border-left:3px solid #ffb255;padding:8px 18px;background:#23201d}pre{overflow:auto;background:#242424;padding:18px}table{border-collapse:collapse;width:100%;font-size:15px}td,th{border:1px solid #51483e;padding:10px;text-align:left;vertical-align:top}.table{overflow:auto}details{margin:14px 0}summary{cursor:pointer}section{margin:20px 0}.property{margin:4px 0}.children{margin-left:18px}form{margin:0}hr{border:0;border-top:1px solid #51483e;margin:28px 0}

main{max-width:1480px}.workspace-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:48px}.workspace-nav{position:sticky;top:25px;align-self:start;padding-top:35px}.workspace-nav .node{font-size:15px}.workspace-reading{min-width:0}.archive-search{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:22px 0 35px}.archive-search label{display:grid;gap:6px;font-size:14px}.archive-search input,.archive-search select{background:#171612;color:#c1b3a9;border:1px solid #51483e;padding:10px;font:inherit;max-width:100%}.archive-entry{padding:0 0 18px;border-bottom:1px solid #3d352c}.archive-entry .node{font-size:21px;border:0;margin-bottom:0}.entry-meta{display:flex;flex-wrap:wrap;gap:5px 22px;font-size:14px;color:#928585}.workspace-nav{background:transparent}@media(max-width:850px){.workspace-shell{grid-template-columns:1fr;gap:12px}.workspace-nav{position:static;display:flex;flex-wrap:wrap;gap:0 18px;padding:20px 0;border-bottom:1px solid #3d352c}.workspace-nav .label{width:100%}.workspace-nav .node{padding:5px 0;margin:0}}header>a{font-weight:bold;color:#928585}article{margin-top:32px}h1{color:#928585;font-family:Georgia,serif}h2,h3,h4{color:#c1b3a9;scroll-margin-top:24px}h2{font-size:29px;margin:44px 0 18px}h3{font-size:23px;margin:30px 0 14px}h4{font-size:18px;margin:18px 0 12px}p{white-space:pre-wrap;margin:10px 0}strong{color:#d3c4b9}ul,ol{padding-left:25px;margin:10px 0}li{padding-left:4px;margin:7px 0}li>ul,li>ol{margin-top:8px}.columns{display:flex;gap:30px;margin:24px 0 36px;align-items:stretch}.column{flex:1;min-width:0}.columns>.column:first-child{padding-right:24px;border-right:1px solid #3d352c}.column h4{font:600 14px/1.5 monospace;letter-spacing:.04em;color:#ffb255;border-bottom:1px solid #3d352c;padding-bottom:12px}.callout{display:flex;gap:14px;padding:16px 20px;border:1px solid #3d352c;border-radius:5px;margin:18px 0;background:#171612}.callout-content{min-width:0;flex:1}.callout-icon{font-size:22px}.callout-content>:first-child{margin-top:0}.callout-content>:last-child{margin-bottom:0}.quote{border-left:2px solid #928585;background:transparent}.toc{border:1px solid #3d352c;padding:18px 22px;margin:24px 0}.toc a{display:block;font-size:15px;text-decoration:none;padding:3px 0}.toc .level-2{padding-left:18px}.toc .level-3{padding-left:36px}.todo{display:flex;gap:10px}.todo span:first-child{color:#ffb255}.page-properties{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 25px;border-bottom:1px solid #3d352c;padding-bottom:22px;margin-bottom:28px}.property strong{color:#928585}.note-image{max-width:100%;height:auto;border-radius:4px}figure{margin:22px 0}figcaption{font-size:14px;color:#928585}.table th{background:#1c1914;color:#d3c4b9}.table td,.table th{white-space:pre-wrap;min-width:120px}details{border-bottom:1px solid #3d352c;padding:14px 0}summary{color:#c1b3a9}details>.children{padding-top:10px}.node{border:0;border-bottom:1px solid #3d352c;border-radius:0;background:transparent;padding:14px 0}span[class$="-bg"]{padding:1px 4px;border-radius:3px}@media(max-width:700px){main{padding:24px 18px 60px}header{align-items:flex-start;font-size:14px}.columns{display:block}.columns>.column:first-child{border-right:0;border-left:2px solid #ffb255;padding:1px 16px;background:#15140f;margin-bottom:18px}.column{width:100%!important}.page-properties{grid-template-columns:1fr}h2{font-size:25px}}
.workspace-home{max-width:740px;margin:75px auto 100px;text-align:center}.workspace-home h1{font-size:clamp(36px,6vw,60px);margin:18px 0;color:#928585}.home-intro{color:#928585;margin:0 0 45px}.home-shortcuts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 30px}.workspace-home .node{border:0;background:transparent;padding:6px 0;margin:0;font-size:17px}.workspace-home .node span{display:none}.workspace-home .node:hover{text-decoration:underline;background:transparent}.home-courses{border-top:1px solid #302c28;margin:48px 0 0;padding-top:30px}.home-courses nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 25px}.home-courses .node{font:14px/1.7 monospace;letter-spacing:.03em}.home-detail{margin-top:55px;font-size:14px;color:#928585}.home-detail a{color:#928585}.workspace-home~hr{display:none}@media(max-width:600px){.workspace-home{margin:50px auto 60px}.home-shortcuts{gap:12px 20px}}
#theme-toggle{position:fixed;bottom:22px;right:22px;z-index:5;font:13px monospace;border:1px solid #51483e;padding:8px 12px;background:#090b09}.light-mode{color-scheme:light}.light-mode body{background:#FBFBFA;color:#3d3834}.light-mode h1,.light-mode h2,.light-mode h3,.light-mode h4,.light-mode strong,.light-mode summary{color:#40280b}.light-mode a{color:#0044cc}.light-mode header>a,.light-mode .label,.light-mode .muted,.light-mode .home-intro,.light-mode .entry-meta{color:#746b63}.light-mode button,.light-mode input,.light-mode select{background:#FBFBFA;color:#40280b;border-color:#ccc}.light-mode .node{background:transparent}.light-mode .callout{background:#f2efe9;border-color:#ded8ce}.light-mode pre{background:#efede8}.light-mode .table th{background:#efede8;color:#40280b}.light-mode .columns>.column:first-child{background:transparent}.light-mode .home-courses,.light-mode header,.light-mode .archive-entry,.light-mode .node,.light-mode .column h4,.light-mode .page-properties,.light-mode .toc,.light-mode details{border-color:#ddd5cb}.archive-entries .entry-meta span{display:none}.archive-entries .entry-meta span:first-child{display:inline}.archive-search{margin-bottom:20px}.archive-entry{margin:0;padding-bottom:12px}.archive-entry .node{font-size:18px}.course-notes{margin:36px 0}.course-notes h2{margin-top:0}.course-syllabus{margin:30px 0}.workspace-nav .node{border:0;padding:7px 0;margin:0}
body{font-family:"Times New Roman",Times,serif;line-height:1.8;margin:2rem auto;padding:2rem 1.25rem;color:#928585}main{max-width:90ch;padding:2rem 1.25rem;margin:2rem auto}header.site-header{max-width:90ch;margin:0 auto;padding:1rem 1.25rem .5rem;border:0;gap:1rem}header.site-header .site-logo{flex:1;min-width:0}header.site-header .logo{margin:0;text-align:left;font-family:"Times New Roman",Times,serif;font-size:clamp(1.1rem,3vw,1.6rem);line-height:1.2}header.site-header .site-header-mark{flex-shrink:0;display:flex;align-items:center;line-height:0}header.site-header .site-header-image{display:block;width:2.5rem;height:2.5rem;object-fit:contain}.workspace-home h1,h1,h2,h3,h4{font-family:"Times New Roman",Times,serif}.workspace-home h1{font-size:2.4em}.workspace-home{margin:35px auto 80px}.workspace-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px;font-size:14px}.workspace-tools button{background:none;border:none;padding:0;color:#928585;font-size:14px}.workspace-shell{display:block}.workspace-nav{position:static;display:flex;flex-wrap:wrap;gap:6px 20px;border-bottom:1px solid #302c28;padding:0 0 20px;margin-bottom:30px}.workspace-nav .label{display:none}.workspace-nav .node{font-size:14px;border:0;padding:0}.workspace-reading article{margin-top:0}.home-courses .node,.column h4{font-family:"Times New Roman",Times,serif}.column h4{font-size:18px;letter-spacing:0}.home-courses .node{font-size:16px}.home-detail{font-size:14px}#theme-toggle{bottom:auto;right:auto;font:inherit}#theme-toggle {
  font-family: "Times New Roman", Times, serif;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #090b09; /* Dark background in dark mode */
  color: #948779; /* Text color */
  border: none;
  border-radius: 10%;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  cursor: pointer;
  width: 120px;
  line-height: 10px;
  height: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, transform 0.4s ease;
  z-index: 9999;
}#theme-toggle:hover {
  font-family: "Times New Roman", Times, serif;
  transform: scale(1.2);
}#theme-toggle:active {
  transform: scale(0.85);
}@media(max-width:600px){body{padding:2rem .5rem}main{padding:1rem .5rem}header.site-header{margin-top:35px;flex-wrap:nowrap;align-items:center}header.site-header .site-logo{flex:1}#theme-toggle{font-size:1.4em;width:90px;height:40px;padding:8px 12px}.workspace-tools{margin-top:12px}.workspace-home{margin-top:25px}}
main{max-width:1160px}.site-header{max-width:1160px!important}.os-navigation{display:flex;gap:24px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #302c28;padding:0 0 18px;margin:0 0 32px;font-size:16px}.os-navigation .node{border:0;margin:0;padding:0}.os-navigation .node span{display:none}.course-menu{position:relative;border:0;margin:0;padding:0}.course-menu summary{color:#ffb255}.course-menu>div{position:absolute;top:35px;left:0;min-width:160px;background:#11140f;border:1px solid #40382f;padding:14px;z-index:3}.course-menu>div .node{display:block;margin:6px 0}.workspace-reading{max-width:1040px;margin:auto}.note-document{max-width:76ch;margin:auto;font-size:18px;line-height:1.85}.note-document.cornell-note{max-width:1040px}.note-document h1{text-align:left;font-size:clamp(30px,4vw,42px);line-height:1.25;margin:18px 0 25px}.note-document h2{font-size:29px;margin-top:44px}.note-document h3{font-size:23px;margin-top:34px}.note-document .column h4{font-size:18px;margin-top:8px}.note-document p,.note-document li{color:#b5aaa2!important;font-weight:normal}.note-document a{color:#ffb255!important}.note-document .columns{gap:30px;margin:22px 0 40px}.note-document .columns>.column:first-child{flex:0.35}.note-document .columns>.column:last-child{flex:0.65}.page-properties{display:flex;flex-wrap:wrap;gap:5px 22px;font-size:14px;color:#928585;margin-bottom:26px;padding-bottom:14px}.page-properties .property{margin:0}.note-breadcrumb{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px;font-size:14px}.note-breadcrumb .node{border:0;margin:0;padding:0;font-size:14px}.note-breadcrumb .node span{display:none}.note-row{display:grid;grid-template-columns:110px 1fr;gap:18px;border-bottom:1px solid #302c28;padding:13px 0;align-items:baseline}.note-row time{font-size:14px;color:#928585}.note-row .node{margin:0;padding:0;border:0;font-size:18px}.note-row .node span{display:none}.archive-entry .entry-meta{font-weight:normal}.note-document .toc{padding:16px 22px}.note-document .toc a{font-weight:normal}.light-mode .note-document p,.light-mode .note-document li{color:#403b36!important}.light-mode .note-document a{color:#0044cc!important}.light-mode .course-menu summary{color:#0044cc}.light-mode .course-menu>div{background:#FBFBFA;border-color:#ddd}.light-mode .os-navigation,.light-mode .note-row{border-color:#ddd5cb}@media(max-width:700px){.os-navigation{gap:12px 22px}.note-document{font-size:17px}.note-row{grid-template-columns:1fr;gap:2px}.course-menu>div{top:30px}.note-document .columns{display:block}.note-document .column{width:auto!important}.note-document .columns>.column:first-child{padding:12px 16px;border-left:2px solid #ffb255;border-right:0}}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.calendar-heading h1{font-size:32px;text-align:left;margin:0 0 20px}.calendar-heading nav{display:flex;gap:18px;font-size:14px;white-space:nowrap}.calendar-filter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 22px;font-size:14px}.calendar-filter label{display:flex;align-items:center;gap:7px}.calendar-filter input,.calendar-filter select{font:inherit;background:transparent;color:inherit;padding:6px;border:1px solid #51483e}.calendar-filter button{font-size:14px;padding:4px 10px;background:transparent}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #39332b;border-left:1px solid #39332b}.weekday{text-align:center;padding:8px;font-size:13px;color:#928585;border-right:1px solid #39332b;border-bottom:1px solid #39332b}.calendar-day,.calendar-empty{min-height:130px;border-right:1px solid #39332b;border-bottom:1px solid #39332b;margin:0;padding:10px 8px}.day-number{font-size:14px;color:#928585}.today .day-number{color:#ffb255;border-bottom:2px solid #ffb255}.calendar-event{margin-top:9px}.calendar-event .node{font-size:14px!important;line-height:1.35;border:0;margin:0;padding:0;overflow-wrap:anywhere}.calendar-event .node span{display:none}.calendar-event small{display:block;font-size:11px;line-height:1.4;color:#928585;margin-top:4px}.calendar-event.complete{opacity:.65}.calendar-event.complete .node{text-decoration:line-through}.mobile-date{display:none}.calendar-footer{margin-top:25px;font-size:14px}.light-mode .calendar-grid,.light-mode .calendar-day,.light-mode .calendar-empty,.light-mode .weekday{border-color:#ddd5cb}.light-mode .calendar-filter label{display:flex;align-items:center;gap:7px}.calendar-filter input,.calendar-filter select{color:#403b36}.light-mode .today .day-number{color:#0044cc;border-color:#0044cc}@media(max-width:700px){.calendar-heading{align-items:flex-start;flex-wrap:wrap}.calendar-heading h1{font-size:25px}.calendar-heading nav{gap:12px;font-size:14px}.calendar-grid{display:block;border:0}.weekday,.calendar-empty,.calendar-day:not(.has-assignments){display:none}.calendar-day{min-height:0;border:0;border-top:1px solid #39332b;padding:14px 0}.mobile-date{display:inline}.day-number{display:none}.calendar-event .node{font-size:17px!important}.calendar-event small{font-size:13px}.calendar-event{margin-top:10px}}
.note-image-link{display:block;width:fit-content;max-width:100%;margin:auto;cursor:zoom-in}.note-image-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}.note-image-link img{margin:0;border-radius:4px}.image-viewer{width:calc(100vw - 32px);max-width:1400px;height:calc(100vh - 40px);height:calc(100dvh - 40px);max-height:none;padding:0;border:1px solid #51483e;border-radius:5px;background:#090b09;color:#b5aaa2;overflow:hidden}.image-viewer[open]{display:flex;flex-direction:column}.image-viewer::backdrop{background:rgba(0,0,0,.82)}.image-viewer-tools{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #51483e;font:14px/1.4 monospace}.image-viewer-tools button{padding:6px 10px;background:transparent;border:1px solid #51483e;font:inherit}.image-viewer-tools output{min-width:4ch;text-align:center}.image-close{margin-left:auto}.image-viewer-stage{flex:1;min-height:0;overflow:auto;padding:16px;display:block}.image-viewer-stage img{display:block;max-width:none!important;max-height:none!important;height:auto!important;margin:auto!important;border-radius:0!important;flex:none}.image-viewer-caption{margin:0;padding:10px 16px;font-size:14px;max-height:15vh;overflow:auto}.image-viewer-caption:empty{display:none}.image-viewer-open{overflow:hidden}.light-mode .image-viewer{background:#FBFBFA;color:#40280b;border-color:#ddd5cb}.light-mode .image-viewer-tools,.light-mode .image-viewer-tools button{border-color:#ddd5cb}@media(max-width:600px){.image-viewer{width:calc(100vw - 12px);height:calc(100dvh - 20px)}.image-viewer-tools{gap:8px;padding:10px 8px;font-size:12px}.image-viewer-tools button{padding:6px}.image-original{display:none}}
/* Notion emphasis uses the blog's gold / blue accents in each mode. */
:root{--note-accent:#ffb255;--note-highlight:rgba(255,178,85,.10)}
.light-mode{--note-accent:#0044cc;--note-highlight:rgba(0,68,204,.07)}
.workspace-reading :is(.notion-gray,.notion-brown,.notion-orange,.notion-yellow,.notion-green,.notion-blue,.notion-purple,.notion-pink,.notion-red){color:var(--note-accent)!important}
.workspace-reading :is(.notion-gray,.notion-brown,.notion-orange,.notion-yellow,.notion-green,.notion-blue,.notion-purple,.notion-pink,.notion-red) :is(strong,em){color:inherit!important}
.workspace-reading :is(.notion-gray-bg,.notion-brown-bg,.notion-orange-bg,.notion-yellow-bg,.notion-green-bg,.notion-blue-bg,.notion-purple-bg,.notion-pink-bg,.notion-red-bg){background:var(--note-highlight)}
.workspace-reading span:is(.notion-gray-bg,.notion-brown-bg,.notion-orange-bg,.notion-yellow-bg,.notion-green-bg,.notion-blue-bg,.notion-purple-bg,.notion-pink-bg,.notion-red-bg){color:var(--note-accent)!important;padding:.06em .22em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.workspace-reading span:is(.notion-gray-bg,.notion-brown-bg,.notion-orange-bg,.notion-yellow-bg,.notion-green-bg,.notion-blue-bg,.notion-purple-bg,.notion-pink-bg,.notion-red-bg) :is(strong,em){color:inherit!important}
.workspace-reading .callout{background:var(--note-highlight);border:0;border-left:2px solid var(--note-accent);border-radius:0;padding:14px 18px}

.math-inline{display:inline-block;vertical-align:middle;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:5px 1px;line-height:normal}.math-block{max-width:100%;overflow-x:auto;padding:18px 4px;margin:18px 0;font-size:1.12em;line-height:normal}.math-inline math,.math-block math{font-family:"Cambria Math","STIX Two Math",math;font-size:1.08em;color:inherit;white-space:normal}.math-block math{margin:0 auto}.table td:has(math){min-width:240px}.math-source{white-space:pre-wrap;overflow-wrap:anywhere}
.note-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:36px;align-items:start}
.note-layout>.note-document{width:100%;min-width:0}
.note-guide{position:sticky;top:24px;min-width:0;align-self:start;font:14px/1.5 "Times New Roman",Times,serif}
.note-guide details{border:0;padding:0;margin:0}
.note-guide summary{font:12px/1.5 monospace;text-transform:uppercase;letter-spacing:1px;color:#928585;list-style:none;cursor:default;padding:4px 0 12px}
.note-guide summary::-webkit-details-marker{display:none}
.note-guide nav{max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:8px}
.note-guide a{display:block;border-left:1px solid #3d352c;padding:6px 0 6px 12px;color:#928585;text-decoration:none;overflow-wrap:anywhere}
.note-guide a.guide-level-2{padding-left:22px}.note-guide a.guide-level-3{padding-left:32px}
.note-guide a.guide-top{font-size:12px;padding-bottom:12px}
.note-guide a:hover,.note-guide a[aria-current="location"]{color:#ffb255;border-color:currentColor}
.note-guide a[aria-current="location"]{font-weight:bold}
.note-guide a:focus-visible{outline:1px solid currentColor;outline-offset:-1px}
.note-document [id]{scroll-margin-top:24px}.note-document h1:focus{outline:none}
.light-mode .note-guide a{color:#746b63;border-color:#ddd5cb}
.light-mode .note-guide a:hover,.light-mode .note-guide a[aria-current="location"]{color:#0044cc;border-color:currentColor}
@media(max-width:900px){
 .note-layout{display:block}.note-guide{top:0;z-index:4;background:#090b09;border-bottom:1px solid #3d352c;margin-bottom:24px}
 .note-guide summary{cursor:pointer;padding:12px 0;color:#b5aaa2}
 .note-guide summary::after{content:' +';float:right}.note-guide details[open] summary::after{content:' −'}
 .note-guide nav{max-height:45dvh;padding-bottom:12px}.note-guide a{padding-top:8px;padding-bottom:8px}
 .note-document [id]{scroll-margin-top:64px}
 .light-mode .note-guide{background:#FBFBFA;border-color:#ddd5cb}.light-mode .note-guide summary{color:#746b63}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Wikipedia-inspired article layout using the blog design language. */
.workspace-reading{max-width:1120px}
.note-layout{grid-template-columns:176px minmax(0,1fr);gap:42px}
.note-layout>.note-document{max-width:82ch}
.note-layout>.note-document.cornell-note{max-width:920px}
.note-guide{top:22px;font-size:13px;line-height:1.42}
.note-guide summary{font-family:"Times New Roman",Times,serif;font-size:15px;font-weight:bold;text-transform:none;letter-spacing:0;color:#b5aaa2;border-bottom:1px solid #3d352c;padding:0 0 8px;margin-bottom:5px}
.note-guide a{border-left:0;padding:5px 4px;color:#928585}
.note-guide a.guide-top{font-size:12px;color:#746f6c}
.note-guide a:hover,.note-guide a[aria-current="location"]{background:var(--note-highlight);color:var(--note-accent);padding-left:8px}
.note-guide a[aria-current="location"]{border-left:2px solid var(--note-accent);font-weight:normal}
.note-document{font-size:17px;line-height:1.74}
.note-document>h1{font-size:clamp(32px,4vw,44px);font-weight:500;letter-spacing:-.015em;border-bottom:1px solid #51483e;padding-bottom:10px;margin-bottom:8px}
.note-document>.note-breadcrumb{margin-bottom:12px}
.note-document>.page-properties{display:flex;gap:3px 18px;border:0;padding:5px 0 17px;margin:0 0 24px;color:#928585;font-size:13px}
.note-document>.page-properties:empty{display:none}
.note-document>.page-properties .property{position:relative}
.note-document>.page-properties .property:not(:last-child)::after{content:'·';position:absolute;right:-11px;color:#51483e}
.note-document h2{font-size:27px;font-weight:500;line-height:1.25;border-bottom:1px solid #51483e;padding-bottom:6px;margin:42px 0 16px}
.note-document h3{font-size:21px;font-weight:600;line-height:1.3;margin:29px 0 10px}
.note-document h4{font-size:17px;font-weight:600;margin-top:22px}
.note-document p{margin:8px 0 13px}
.note-document ul,.note-document ol{margin:7px 0 15px;padding-left:27px}
.note-document li{margin:4px 0}
.note-document blockquote.quote{font-size:1.03em;color:#928585;margin:20px 0;padding:5px 18px}
.note-document .table{border:1px solid #51483e;margin:20px 0 27px;background:rgba(255,255,255,.012)}
.note-document .table table{margin:0;font-size:14px;line-height:1.5}
.note-document .table th{background:var(--note-highlight);color:#d3c4b9;font-weight:600}
.note-document .table td,.note-document .table th{border:0;border-right:1px solid #51483e;border-bottom:1px solid #51483e;padding:9px 11px}
.note-document .table tr:last-child td{border-bottom:0}.note-document .table td:last-child,.note-document .table th:last-child{border-right:0}
.note-document details{margin:12px 0;border:1px solid #3d352c;padding:0;background:rgba(255,255,255,.012)}
.note-document details>summary{padding:10px 13px;color:var(--note-accent);font-weight:600}
.note-document details>.children{padding:2px 16px 14px;margin-left:0}
.note-document details[open]>summary{border-bottom:1px solid #3d352c;background:var(--note-highlight)}
.note-document details.course-syllabus{margin-top:30px}
.note-document .columns{margin:20px 0 34px}
.note-document .columns>.column:first-child{background:rgba(255,255,255,.012);border:1px solid #3d352c;padding:13px 18px}
.note-document .columns>.column:first-child h4{border-color:#51483e;margin-top:0;padding-bottom:8px}
.light-mode .note-guide summary,.light-mode .note-document>h1,.light-mode .note-document h2{border-color:#d8d3cc;color:#322d29}
.light-mode .note-guide a.guide-top{color:#746b63}
.light-mode .note-document>.page-properties .property:not(:last-child)::after{color:#bdb5ab}
.light-mode .note-document .table,.light-mode .note-document .table td,.light-mode .note-document .table th,.light-mode .note-document details,.light-mode .note-document details[open]>summary,.light-mode .note-document .columns>.column:first-child{border-color:#d8d3cc}
.light-mode .note-document .table{background:#fff}.light-mode .note-document .table th{color:#322d29}
.light-mode .note-document details,.light-mode .note-document .columns>.column:first-child{background:#fff}
@media(max-width:900px){
 .note-layout{display:block}.note-guide{top:0;background:#090b09;border:1px solid #3d352c;margin:0 0 25px;padding:0 13px}
 .note-guide summary{border:0;margin:0;padding:11px 0;font-size:14px}.note-guide nav{border-top:1px solid #3d352c;padding:6px 0 10px}
 .light-mode .note-guide{background:#FBFBFA;border-color:#d8d3cc}.light-mode .note-guide nav{border-color:#d8d3cc}
}
@media(max-width:700px){
 .note-document{font-size:16px;line-height:1.7}.note-document>h1{font-size:31px}.note-document h2{font-size:24px}
 .note-document>.page-properties{display:block}.note-document>.page-properties .property::after{display:none}
 .note-document .table{margin-left:-5px;margin-right:-5px}
}

/* Course pages use the full workspace width; notes retain their reading measure. */
main:has(.course-page){max-width:1320px}
.workspace-reading:has(>.course-page){max-width:1200px}
.note-document.course-page{max-width:none;width:100%;min-width:0}
.course-page .course-syllabus-content{padding:12px 24px 26px;min-width:0;overflow-wrap:anywhere}
.course-page .course-syllabus-content>p,.course-page .course-syllabus-content>ul,.course-page .course-syllabus-content>ol{max-width:95ch}
.course-page .course-syllabus-content>.table{max-width:100%}
.course-page .course-syllabus-content>:last-child{margin-bottom:0}
@media(max-width:700px){.course-page .course-syllabus-content{padding:8px 14px 20px}}

/* Inline PDF previews keep documents inside the note reading flow. */
.note-pdf{margin:24px 0 30px}
.note-pdf-frame{display:block;width:100%;height:min(76vh,760px);min-height:520px;border:1px solid #51483e;border-radius:3px;background:#fff}
.note-pdf figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:#928585}
.note-pdf figcaption a{margin-left:auto}
.light-mode .note-pdf-frame{border-color:#d8d3cc}
@media(max-width:700px){.note-pdf-frame{height:66dvh;min-height:430px}.note-pdf figcaption{font-size:13px}.note-pdf figcaption a{margin-left:0}}


.note-fragment{min-height:2.5rem;padding:5px 0;color:#928585;font-size:14px}
.note-fragment p{margin:4px 0!important}.note-fragment button{font:inherit;color:var(--note-accent);background:transparent;border:0;padding:0;cursor:pointer}