:root {
  --bg: #101010;
  --surface: #171717;
  --surface-raised: #202020;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f2f2f2;
  --muted: #a9a9a9;
  --accent: #edb049;
  --accent-line: rgba(237, 176, 73, 0.48);
  --shadow-accent-soft: rgba(237, 176, 73, 0.1);
  --shadow-accent: rgba(237, 176, 73, 0.16);
  --shadow-accent-strong: rgba(237, 176, 73, 0.22);
}

:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}

.content-label {
  display: block;
  width: fit-content;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.view-controls {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1600;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.control-group {
  display: flex;
  gap: 5px;
}

.resize-buttons.control-group {
  flex-direction: column;
}

.view-controls .resize-buttons {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  margin: 0;
}

.theme-buttons.control-group {
  flex-direction: column;
}

.view-control-button,
.resize-button,
.theme-button {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.resize-button {
  width: 40px;
  font-size: 20px;
}

.theme-button {
  width: 40px;
  padding: 0;
  font-size: 16px;
}

.view-control-button:hover,
.view-control-button:focus-visible,
.view-control-button.active {
  border-color: var(--accent-line);
  background-color: var(--surface-raised);
  color: var(--accent);
}

:where(.article-card, .code-project-card, .photo-collection-card, .photo-card, .thumbnail):is(:hover, :focus-visible, :focus-within) {
  border-color: var(--accent-line) !important;
}

:where(.article-card, .code-project-card, .photo-collection-card):is(:hover, :focus-visible, :focus-within) .content-label {
  color: var(--accent) !important;
}

:where(.nav-button, .social-icons a, .view-control-button, .resize-button, .theme-button, .project-back-button, .back-to-top-button, .photo-nav-button, .photo-action, .code-project-action, .article-back, .photography-collection-back, .link-button):is(:hover, :focus-visible) {
  color: var(--accent) !important;
}

body.theme-light {
  --bg: #f5f3ee;
  --surface: #ece9e1;
  --surface-raised: #ffffff;
  --line: rgba(23, 23, 23, 0.16);
  --text: #171717;
  --muted: #5f5a53;
  --accent: #a46312;
  --accent-line: rgba(164, 99, 18, 0.48);
  --shadow-accent-soft: rgba(164, 99, 18, 0.1);
  --shadow-accent: rgba(164, 99, 18, 0.14);
  --shadow-accent-strong: rgba(164, 99, 18, 0.18);
  background: var(--bg);
  color: var(--text);
}

body.theme-light .container,
body.theme-light .main-container,
body.theme-light .top-container,
body.theme-light .info-container,
body.theme-light .productions-panel,
body.theme-light .photo-detail-info,
body.theme-light.photography-project-mode,
body.theme-light.photography-project-mode .main-container,
body.theme-light.photography-project-mode .bottom-container,
body.theme-light.photography-project-mode .photo-detail,
body.theme-light.photography-project-mode .photo-detail-info {
  background: var(--bg);
  color: var(--text);
}

body.theme-light .bottom-container,
body.theme-light .media-container,
body.theme-light #project-media,
body.theme-light .recommendations-panel,
body.theme-light .production-subpanel,
body.theme-light .skills-panel,
body.theme-light .thumbnail,
body.theme-light .thumbnail img,
body.theme-light .photo-card,
body.theme-light .photo-card img,
body.theme-light .photo-detail-media,
body.theme-light.photography-project-mode .photo-detail-media {
  background: var(--surface);
}

body.theme-light .nav-button.active,
body.theme-light .nav-button:hover,
body.theme-light .nav-button:focus-visible,
body.theme-light .software-tag,
body.theme-light.photography-project-mode .software-tag,
body.theme-light .view-control-button {
  background: var(--surface-raised);
  color: var(--accent);
}

body.theme-light .nav-button,
body.theme-light h2,
body.theme-light .user-info-panel h2,
body.theme-light .user-intro,
body.theme-light .user-location-container,
body.theme-light .material-symbols-outlined,
body.theme-light .photography-count,
body.theme-light p,
body.theme-light .media-description,
body.theme-light .recommendation h3,
body.theme-light .recommendation-date,
body.theme-light .recommendation-quote,
body.theme-light .production-subpanel p,
body.theme-light .project-description-container p,
body.theme-light .stat,
body.theme-light.photography-project-mode .project-description-container p,
body.theme-light.photography-project-mode .stat {
  color: var(--muted) !important;
}

body.theme-light .user-info-panel h1,
body.theme-light .recommendation h2,
body.theme-light .user-name-link:hover,
body.theme-light .user-name-link:focus-visible,
body.theme-light .photo-back-link,
body.theme-light .photo-action,
body.theme-light .social-icons a:hover,
body.theme-light .social-icons a:focus-visible {
  color: var(--accent) !important;
}

body.theme-light .thumbnail,
body.theme-light .photo-card,
body.theme-light .photo-detail-media {
  border-color: var(--line);
}

body.theme-light h1,
body.theme-light h3,
body.theme-light .panel-title,
body.theme-light .production-subpanel h2,
body.theme-light .photography-heading h1,
body.theme-light .project-description-container h1,
body.theme-light.photography-project-mode .project-description-container h1,
body.theme-light.photography-project-mode h3 {
  color: var(--text);
}

body.theme-light .photo-action,
body.theme-light .photo-action-secondary {
  border-color: rgba(164, 99, 18, 0.28);
  background: rgba(164, 99, 18, 0.08);
}

.summary-panel p,
.recommendation h3,
.recommendation-date,
.recommendation-quote,
.production-subpanel p,
.project-description-container p,
.media-description,
.stat {
  color: var(--muted);
}

.recommendations-panel,
.skills-panel,
.production-subpanel {
  border: 1px solid var(--line);
  background: var(--surface);
}

.panel-title,
.production-subpanel h2,
.project-description-container h1,
.info-container h3 {
  color: var(--text);
}

.recommendation h2 {
  color: var(--accent);
}

.media-container,
#project-media {
  background: var(--surface);
}

.info-container {
  border-left: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.software-tag {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
}

.link-button {
  border: 1px solid var(--accent-line);
  background: rgba(237, 176, 73, 0.1);
  color: var(--accent);
}

@media (max-width: 700px) {
  .view-controls {
    right: 12px;
    bottom: 12px;
  }

  .theme-button,
  .eink-button {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .resize-button {
    width: 34px;
    height: 34px;
  }
}
body.theme-light .project-back-button,
body.theme-light #prev-project,
body.theme-light #next-project,
body.theme-light .back-to-top-button {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(255, 255, 255, 0.86);
  color: #171717;
  box-shadow: 0 8px 24px var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.theme-light .project-back-button:hover,
body.theme-light .project-back-button:focus-visible,
body.theme-light #prev-project:hover,
body.theme-light #next-project:hover,
body.theme-light #prev-project:focus-visible,
body.theme-light #next-project:focus-visible,
body.theme-light .back-to-top-button:hover,
body.theme-light .back-to-top-button:focus-visible {
  color: var(--accent);
  background: rgba(255, 246, 229, 0.76);
  border-color: rgba(164, 99, 18, 0.48);
}
body.theme-light .social-icons a {
  color: var(--muted) !important;
}

body.theme-light .link-button {
  background: rgba(164, 99, 18, 0.12);
  color: var(--accent);
}

body.theme-light .stat-icon,
body.theme-light .stat-info-icon {
  color: var(--muted);
}

body.theme-light .tooltip {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px var(--shadow-accent-soft);
}

body.theme-light .tooltip::after {
  border-color: #ffffff transparent transparent transparent;
}
body.theme-light .thumbnail::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.62));
}

body.theme-light .thumbnail-title,
body.theme-light .overlay-icon {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

body.theme-light .horizontal-container {
  background: transparent;
}

.eink-button {
  width: 40px;
  padding: 0;
  font-size: 15px;
}

body.eink-refreshing .eink-flash-target {
  animation: eink-region-waveform var(--eink-element-duration, 640ms) steps(1, end) var(--eink-element-delay, 0ms) both;
  backface-visibility: hidden;
  will-change: filter, opacity;
}

@keyframes eink-region-waveform {
  0% {
    filter: none;
    opacity: 1;
  }
  11% {
    filter: grayscale(1) contrast(2.4) invert(1);
    opacity: 1;
  }
  27% {
    filter: grayscale(1) contrast(3.1) brightness(0.08);
    opacity: 0.96;
  }
  44% {
    filter: grayscale(1) contrast(2.8) invert(1) brightness(1.55);
    opacity: 1;
  }
  62% {
    filter: grayscale(1) contrast(2.2) brightness(0.58);
    opacity: 0.94;
  }
  79% {
    filter: grayscale(1) contrast(1.42) brightness(1.12);
    opacity: 0.8;
  }
  91% {
    filter: grayscale(1) contrast(1.08);
    opacity: 0.95;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.eink-refreshing .eink-flash-target {
    animation: none;
    filter: none;
    opacity: 1;
  }
}