/* Small refinements on the original portfolio layout. */
[hidden] { display: none !important; }
#top { scroll-margin-top: 100px; }
:root[data-theme="light"][data-palette="sunbeam"] { --emphasis: #785314; }
:root { --headline-accent: #275b9b; }
:root[data-palette='tangerine'] { --headline-accent: #12657c; }
:root[data-palette='dusk'] { --headline-accent: #826013; }
:root[data-palette='coast'] { --headline-accent: #a44525; }
:root[data-palette='plum'] { --headline-accent: #47701d; }
:root[data-palette='sunbeam'] { --headline-accent: #6547a6; }
:root[data-palette='stone'] { --headline-accent: #96432c; }
:root[data-palette='ember'] { --headline-accent: #006b79; }
:root[data-palette='lagoon'] { --headline-accent: #a53b51; }
:root[data-palette='orchard'] { --headline-accent: #7d469d; }
:root[data-theme='dark'] { --headline-accent: #83b9ff; }
:root[data-theme='dark'][data-palette='tangerine'] { --headline-accent: #74d5ee; }
:root[data-theme='dark'][data-palette='dusk'] { --headline-accent: #efcc73; }
:root[data-theme='dark'][data-palette='coast'] { --headline-accent: #ffab84; }
:root[data-theme='dark'][data-palette='plum'] { --headline-accent: #bce383; }
:root[data-theme='dark'][data-palette='sunbeam'] { --headline-accent: #c5a5ff; }
:root[data-theme='dark'][data-palette='stone'] { --headline-accent: #ffab8b; }
:root[data-theme='dark'][data-palette='ember'] { --headline-accent: #70dbe9; }
:root[data-theme='dark'][data-palette='lagoon'] { --headline-accent: #ff9dae; }
:root[data-theme='dark'][data-palette='orchard'] { --headline-accent: #d7a4f4; }
:is(a, button, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.site-header { height: auto; min-height: 76px; padding: 14px max(24px, calc((100vw - 1160px) / 2)); gap: 24px; background: var(--paper); }
.site-header nav { gap: 26px; }
.site-header::before, .site-header::after { display: none; }
.site-header nav > a { display: inline-block; font-size: 14px; color: var(--ink); }
.site-header nav > a[aria-current='location'] { text-decoration: underline; text-underline-offset: 7px; }
.appearance-menu { position: relative; }
.appearance-menu summary { cursor: pointer; padding: 11px 14px; border: 1px solid var(--line); border-radius: 30px; font-size: 13px; }
.appearance-controls { position: absolute; z-index: 30; top: calc(100% + 12px); right: 0; width: min(340px, calc(100vw - 40px)); padding: 20px; display: grid; gap: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 12px 30px #0002; }
.appearance-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; background: none; }
.appearance-group button, .palette-random { min-height: 40px; font-size: 12px; padding: 9px 12px; color: var(--ink); border: 1px solid var(--line); }
.appearance-group button.is-selected { background: var(--ink); color: var(--paper); }

.hero h1 em, [data-theme='dark'] .hero h1 em { color: var(--headline-accent); }
.hero-actions .button { min-height: 48px; padding: 14px 20px; font-size: 14px; border-radius: 999px; }
.hero-actions .button.primary { box-shadow: none; border: 1px solid color-mix(in srgb, var(--lime) 42%, var(--line)); }
.hero-actions .button.secondary { border: 1px solid var(--button-line); }
.signal { display: grid; grid-template-columns: 10px minmax(0, 1fr) 48px; align-items: center; gap: 14px; padding: 22px; }
.signal > span { margin: 0; }
.signal > div { min-width: 0; }
.signal strong { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.18; overflow-wrap: normal; }
.signal-icon { position: static; width: 48px; height: 48px; margin: 0; align-self: center; object-fit: contain; }
.app-orbit-complete .app-orbit-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); align-items: start; gap: 18px 10px; }
.app-orbit-complete .orbit-app { width: auto; min-width: 0; margin: 0; }
.app-orbit-complete .orbit-app span { opacity: 1; transform: none; font: 11px/1.3 'DM Sans', sans-serif; letter-spacing: 0; min-height: 29px; margin-top: 9px; }
.app-orbit-complete .app-orbit-caption { margin-top: 20px; line-height: 1.6; }
.app-orbit-complete .app-orbit-caption a { display: inline-block; text-underline-offset: 3px; }
.hero-panorama-updated { aspect-ratio: 1.8 / 1; margin-bottom: 44px; }
.hero-panorama-updated .panorama-layer > picture { display: block; }
.hero-panorama-updated .panorama-neon { top: 10%; left: 16%; width: 68%; transform: none; }
.hero-panorama-updated:hover .panorama-neon { transform: none; }
.hero-panorama-updated .panorama-metrics { top: 14%; left: 83%; width: 16%; }
.hero-panorama-updated .panorama-lingua { top: 32%; left: 1%; width: 15%; }
.hero-panorama-updated .panorama-liquid { z-index: 4; top: 41%; left: 71%; width: 15%; }
.panorama-caption { position: absolute; z-index: 5; display: block; top: 100%; left: 50%; width: max-content; max-width: 100%; margin-top: 7px; padding: 3px 0; color: var(--ink); font: 11px/1.4 'DM Mono', monospace; letter-spacing: .035em; text-align: center; text-decoration: none; text-underline-offset: 4px; transform: translateX(-50%); }
.panorama-caption:hover, .panorama-caption:focus-visible { text-decoration: underline; }
.caption-metrics { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 7px; }
.project[id^='project-'] { scroll-margin-top: 110px; }
@media (max-width: 760px) {
  .hero-panorama-updated { aspect-ratio: .9 / 1; margin-bottom: 52px; }
  .hero-panorama-updated .panorama-neon { top: 0; left: 0; width: 100%; }
  .hero-panorama-updated .panorama-lingua { top: 45%; left: 3%; width: 28%; }
  .hero-panorama-updated .panorama-liquid { top: 45%; left: 36%; width: 28%; }
  .hero-panorama-updated .panorama-metrics { top: 45%; left: 69%; width: 28%; }
  .panorama-caption { font-size: 10px; }
  .caption-neon { top: auto; bottom: 100%; margin: 0 0 7px; }
  .caption-metrics { top: 100%; bottom: auto; margin: 7px 0 0; }
}
.project-image.liquid { background: var(--panel); }
.project-image.liquid > picture img { object-fit: contain; object-position: center; }
.project.app-card[data-project='liquid'] { --app-tint: var(--panel); }
.daily-feature-card[data-project='liquid'] { --daily-tint: var(--panel); }
@media (max-width: 600px) {
  .site-header { padding: 12px 18px; gap: 12px; flex-wrap: wrap; }
  .site-header .brand { font-size: 22px; }
  .site-header nav { gap: 16px; flex: 1; justify-content: flex-end; }
  .site-header nav > a { font-size: 13px; }
  .site-header .nav-github { display: none; }
  .appearance-menu summary { font-size: 12px; padding: 10px; }
  .signal { padding: 20px; gap: 12px; }
  .hero-actions { display: flex; flex-wrap: wrap; }
}