:root {
  --color-accent: 100, 150, 255;
  --color-sub-text: 180, 200, 230;
  --color-highlight: 220, 230, 245;
  --color-link: 130, 170, 255;
  --color-heading: 255, 255, 255;
  --color-bg-body: #050508;

  --kesson-font-serif-display: "Noto Serif JP", "Yu Mincho", "MS PMincho", serif;
  --kesson-font-serif-ui: 'Georgia', "Noto Serif JP", serif;
  --kesson-font-mono-ui: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --kesson-font-size-ui-xs: 0.80rem;
  --kesson-font-size-ui-sm: 0.80rem;
  --kesson-font-size-ui-arrow: clamp(0.7rem, 3.5vmin, 1.2rem);
  --reports-font-step: 0rem;
  --kesson-letter-ui-tight: 0.03em;
  --kesson-letter-ui-normal: 0.06em;
  --kesson-letter-ui-wide: 0.1em;
  --kesson-letter-ui-heading: 0.15em;

  --kesson-radius-sm: 2px;
  --kesson-radius-md: 3px;
  --kesson-radius-lg: 4px;
  --kesson-transition-standard: 0.3s ease;
  --kesson-transition-snappy: 0.2s ease;

  --kesson-focus-ring: rgba(var(--color-accent), 0.86);
  --kesson-focus-ring-soft: rgba(var(--color-accent), 0.8);
  --kesson-ui-label-color: rgba(var(--color-sub-text), 0.3);
  --kesson-ui-arrow-color: rgba(var(--color-sub-text), 0.25);
  --kesson-ui-label-hover-color: rgba(var(--color-sub-text), 0.6);
  --kesson-action-bg: rgba(var(--color-accent), 0.1);
  --kesson-action-border: rgba(var(--color-accent), 0.2);
  --kesson-action-text: rgba(var(--color-sub-text), 0.5);
  --kesson-action-bg-hover: rgba(var(--color-accent), 0.2);
  --kesson-action-text-hover: rgba(var(--color-highlight), 0.7);
  --kesson-card-border: rgba(var(--color-accent), 0.1);
  --kesson-card-border-strong: rgba(var(--color-accent), 0.28);
  --kesson-card-shadow-soft: 0 4px 12px rgba(var(--color-accent), 0.15);
  --kesson-card-shadow-rich: 0 8px 24px rgba(0, 0, 0, 0.38), 0 0 12px rgba(var(--color-accent), 0.15);
  --kesson-error-color: #f87171;
  --kesson-error-size: 0.8rem;
  --kesson-scrollbar-thumb: #1e293b;

  --kesson-offcanvas-text: #94a3b8;
  --kesson-offcanvas-heading: #e2e8f0;
  --kesson-offcanvas-link: #f59e0b;
  --kesson-viewer-overlay-closed: rgba(5, 10, 20, 0);
  --kesson-viewer-overlay-open: rgba(5, 10, 20, 0.5);
  --kesson-viewer-glass-bg: rgba(12, 18, 30, 0.88);
  --kesson-viewer-glass-border: rgba(var(--color-accent), 0.06);

  --kesson-md-provenance: rgba(140, 160, 200, 0.4);
  --kesson-md-h1: rgba(240, 245, 255, 0.92);
  --kesson-md-h1-strong: rgba(240, 245, 255, 0.95);
  --kesson-md-h2: rgba(230, 240, 255, 0.88);
  --kesson-md-h3: rgba(220, 230, 250, 0.85);
  --kesson-md-h4: rgba(210, 225, 245, 0.8);
  --kesson-md-link: rgba(var(--color-link), 0.85);
  --kesson-md-link-hover: rgba(160, 195, 255, 1);
  --kesson-md-quote: rgba(200, 215, 240, 0.7);
  --kesson-md-inline-code: rgba(180, 210, 255, 0.85);
  --kesson-md-inline-code-bg: rgba(60, 90, 150, 0.12);
  --kesson-md-table-head-bg: rgba(40, 60, 100, 0.2);
  --kesson-md-table-head-text: rgba(220, 230, 250, 0.9);
  --kesson-md-table-cell-text: rgba(200, 215, 240, 0.75);
  --kesson-md-strong: rgba(240, 245, 255, 0.95);
  --kesson-md-em: rgba(200, 215, 240, 0.8);
  --kesson-md-pre-bg: rgba(8, 12, 24, 0.6);
  --kesson-md-pdf-link: rgba(160, 185, 240, 0.7);
  --kesson-md-pdf-link-hover: rgba(200, 220, 255, 0.9);
  --kesson-md-pdf-link-hover-bg: rgba(60, 90, 150, 0.1);
  --kesson-viewer-glass-shadow:
    0 0 60px rgba(0, 0, 0, 0.4),
    0 0 120px rgba(30, 60, 120, 0.1),
    inset 0 0 60px rgba(20, 40, 80, 0.05);
  --kesson-viewer-x-handle: rgba(200, 215, 245, 0.7);

  --kesson-dev-toggle-bg: rgba(20, 30, 50, 0.7);
  --kesson-dev-toggle-bg-hover: rgba(30, 45, 70, 0.82);
  --kesson-dev-toggle-border: rgba(var(--color-accent), 0.15);
  --kesson-dev-toggle-text: rgba(180, 200, 255, 0.75);
  --kesson-dev-toggle-text-hover: rgba(210, 225, 255, 0.95);
  --kesson-dev-panel-bg: rgba(7, 12, 24, 0.96);
  --kesson-dev-panel-border: rgba(140, 178, 255, 0.3);
  --kesson-dev-panel-header-border: rgba(140, 178, 255, 0.25);
  --kesson-dev-panel-title-color: rgba(223, 236, 255, 0.95);
  --kesson-dev-panel-accordion-bg: rgba(26, 40, 70, 0.5);
  --kesson-dev-panel-accordion-text: rgba(222, 235, 255, 0.92);
  --kesson-dev-panel-accordion-active-bg: rgba(46, 72, 116, 0.7);
  --kesson-dev-panel-body-bg: rgba(11, 20, 38, 0.75);
  --kesson-dev-panel-label-color: rgba(188, 211, 245, 0.95);
  --kesson-dev-panel-help-color: rgba(176, 201, 238, 0.82);
  --kesson-dev-panel-help-sub-color: rgba(162, 188, 228, 0.72);
  --kesson-dev-panel-value-color: rgba(201, 221, 255, 0.86);
  --kesson-dev-panel-status-color: rgba(201, 221, 255, 0.8);
  --kesson-dev-panel-empty-bg: rgba(11, 20, 38, 0.6);
  --kesson-dev-panel-empty-border: rgba(140, 178, 255, 0.25);
  --kesson-dev-panel-empty-text: rgba(201, 221, 255, 0.85);
  --kesson-dev-hud-border: rgba(120, 164, 235, 0.42);
  --kesson-dev-hud-bg: rgba(8, 14, 26, 0.84);
  --kesson-dev-hud-text: rgba(205, 224, 255, 0.92);
  --kesson-dev-hud-btn-border: rgba(130, 170, 240, 0.45);
  --kesson-dev-hud-btn-bg: rgba(100, 152, 246, 0.2);
  --kesson-dev-hud-btn-text: rgba(238, 246, 255, 0.96);
  --kesson-dev-hud-btn-bg-hover: rgba(116, 165, 244, 0.32);
  --kesson-dev-hud-input-border: rgba(130, 170, 240, 0.35);
  --kesson-dev-hud-input-bg: rgba(10, 18, 32, 0.88);
  --kesson-dev-hud-input-text: rgba(220, 235, 255, 0.95);

  --kesson-section-content-padding: 1rem 1.5rem 0;
  --kesson-section-grid-margin-top: 1.5rem;
  --kesson-card-bg: rgba(20, 25, 40, 0.9);
  --kesson-offcanvas-width: 85%;
  --kesson-offcanvas-bg: rgba(10, 14, 26, 0.98);

  --kesson-topbar-main-title-size: clamp(0.96rem, 1.85vw, 1.38rem);
  --kesson-topbar-main-title-size-sm: 0.86rem;
  --kesson-topbar-title-size: clamp(0.80rem, 1.0vw, 0.88rem);
  --kesson-topbar-subtitle-size: var(--kesson-topbar-title-size);
  --kesson-topbar-subtitle-size-md: 0.80rem;
  --kesson-topbar-link-size: 0.80rem;
  --kesson-topbar-note-size: 0.80rem;
  --kesson-topbar-note-size-sm: var(--kesson-topbar-note-size);
  --kesson-topbar-credit-size: 0.80rem;
  --kesson-topbar-meta-size: 0.80rem;
  --kesson-topbar-meta-author-size: 0.80rem;
  --kesson-topbar-bg-start: rgba(10, 14, 24, var(--kesson-topbar-alpha-strong));
  --kesson-topbar-bg-end: rgba(10, 14, 24, var(--kesson-topbar-alpha-soft));
  --kesson-topbar-border-color: rgba(130, 170, 240, var(--kesson-topbar-border-alpha));
  --kesson-topbar-divider-color: rgba(170, 192, 228, 0.42);
  --kesson-topbar-title-color: rgba(228, 238, 255, 0.92);
  --kesson-topbar-title-hover-color: rgba(242, 248, 255, 1);
  --kesson-topbar-subtitle-color: rgba(205, 220, 244, 0.76);
  --kesson-topbar-meta-color: rgba(186, 204, 234, 0.72);
  --kesson-topbar-meta-author-color: rgba(184, 203, 234, 0.74);
  --kesson-topbar-link-color: rgba(205, 220, 244, 0.78);
  --kesson-topbar-link-hover-color: rgba(236, 244, 255, 0.98);
  --kesson-topbar-link-hover-bg: rgba(120, 165, 240, 0.2);
  --kesson-topbar-note-divider-color: rgba(130, 170, 240, 0.2);
  --kesson-topbar-note-color: rgba(165, 214, 255, 0.74);
  --kesson-topbar-lang-color: rgba(218, 232, 255, 0.9);
  --kesson-topbar-lang-border: rgba(130, 170, 240, 0.25);
  --kesson-topbar-lang-bg: rgba(70, 102, 160, 0.16);
  --kesson-topbar-nav-bg: rgba(9, 13, 24, 0.82);
  --kesson-topbar-nav-border: rgba(130, 170, 240, 0.2);
  --kesson-topbar-toggler-border: rgba(145, 178, 242, 0.55);
  --kesson-topbar-toggler-focus: rgba(140, 180, 252, 0.35);

  --kesson-section-heading: 0.80rem;
  --kesson-card-title: 0.8rem;
  --kesson-card-text: 0.8rem;
  --kesson-card-summary: 0.80rem;
  --kesson-overlay-tagline: 0.80rem;
  --kesson-overlay-tagline-en: 0.80rem;
  --kesson-control-guide: 0.80rem;
  --kesson-footer-line: 0.80rem;
  --kesson-surface-btn: 0.80rem;
  --kesson-dev-hud-font-size: 0.80rem;
  --kesson-footer-signature-size: 0.80rem;
  --kesson-topbar-height: 3.25rem;
  --kesson-topbar-alpha-strong: 0.10;
  --kesson-topbar-alpha-soft: 0.10;
  --kesson-topbar-border-alpha: 0.22;
  --kesson-topbar-shadow-alpha: 0.26;
  --kesson-topbar-blur: 14px;
  --kesson-topbar-saturate: 145%;
  --kesson-h1-size: clamp(1.0rem, 5.5vmin, 2.0rem);
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-bg-body);
  font-family: var(--kesson-font-serif-display);
}

#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#alt-graphic-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#graphic-switcher {
  position: fixed;
  top: calc(var(--kesson-topbar-height) + 0.55rem);
  left: 0.95rem;
  z-index: 58;
  border-radius: 999px;
  padding: 0.2rem;
  background: rgba(10, 14, 24, 0.62);
  border: 1px solid rgba(130, 170, 240, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}

#graphic-switcher .btn {
  border-radius: 999px;
  border-color: rgba(130, 170, 240, 0.5);
  color: rgba(220, 235, 255, 0.82);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: var(--kesson-font-size-ui-sm, 0.80rem);
  letter-spacing: 0.08em;
  text-transform: none;
  padding: 0.23rem 0.62rem;
  min-width: 3.7rem;
  background: transparent;
}

#graphic-switcher .btn:hover,
#graphic-switcher .btn:focus-visible {
  color: rgba(240, 248, 255, 0.96);
  border-color: rgba(150, 190, 250, 0.78);
  background: rgba(116, 165, 244, 0.18);
  box-shadow: none;
}

#graphic-switcher .btn.active {
  color: rgba(245, 250, 255, 0.98);
  border-color: rgba(166, 202, 255, 0.94);
  background: linear-gradient(
    135deg,
    rgba(100, 152, 246, 0.3),
    rgba(92, 142, 212, 0.42)
  );
}

.nav-label {
  position: fixed;
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: rgba(var(--color-heading), 0.9);
  font-family: "Noto Serif JP", "Yu Mincho", "MS PMincho", serif;
  font-size: clamp(0.80rem, 2.8vmin, 1.1rem);
  letter-spacing: clamp(0.05em, 0.4vmin, 0.15em);
  text-shadow: 0 0 12px rgba(var(--color-accent), 0.5), 0 0 4px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -100%);
  white-space: nowrap;
  transition: filter 0.15s ease, opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
  will-change: filter;
}

.nav-label:hover {
  filter: blur(0px) !important;
  color: rgba(var(--color-heading), 1.0);
}

.nav-label:focus-visible,
.nav-label.is-nav-focused {
  outline: 2px solid var(--kesson-focus-ring);
  outline-offset: 4px;
  filter: blur(0px) !important;
  text-shadow: 0 0 18px rgba(110, 160, 255, 0.72), 0 0 6px rgba(0, 0, 0, 0.85);
}

.nav-label--gem {
  color: rgba(180, 195, 240, 0.85);
  text-shadow: 0 0 12px rgba(123, 143, 232, 0.5), 0 0 4px rgba(0, 0, 0, 0.8);
}

.nav-label--gem:hover,
.nav-label--gem:focus-visible,
.nav-label--gem.is-nav-focused {
  color: rgba(200, 215, 255, 1.0);
}

.nav-label--x {
  color: rgba(220, 225, 240, 0.85);
  text-shadow: 0 0 12px rgba(180, 190, 220, 0.5), 0 0 4px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

.nav-label--x:hover,
.nav-label--x:focus-visible,
.nav-label--x.is-nav-focused {
  color: rgba(240, 245, 255, 1.0);
}

.nav-label--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

#credit {
  position: fixed;
  top: 3%;
  left: 3%;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#credit .credit-line {
  font-size: 0.80rem;
  color: rgba(var(--color-sub-text), 0.45);
  font-family: 'Georgia', 'Noto Serif JP', serif;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-shadow: 0 0 8px rgba(60, 100, 180, 0.2);
}

#credit .credit-signature {
  font-size: var(--kesson-footer-signature-size, 0.80rem);
  color: rgba(150, 175, 210, 0.35);
  font-family: 'Georgia', serif;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

#overlay {
  position: fixed;
  bottom: 8%;
  left: 5%;
  z-index: 10;
  pointer-events: none;
  text-align: left;
  opacity: 0.1;
  filter: blur(3px);
  transform: scale(0.95);
  transform-origin: left bottom;
  will-change: opacity, filter, transform;
}

#overlay a {
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
}

h1 {
  color: rgba(var(--color-heading), 0.95);
  font-family: "Noto Serif JP", "Yu Mincho", "MS PMincho", serif;
  font-weight: 400;
  font-size: var(--kesson-h1-size);
  letter-spacing: clamp(0.15em, 1.2vmin, 0.5em);
  line-height: 1.6;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 30px rgba(var(--color-accent), 0.3);
  transition: color 0.4s ease;
}

#overlay a:hover h1 {
  color: rgba(var(--color-heading), 1.0);
}

#taglines {
  margin-bottom: 1rem;
}

.tagline {
  font-size: var(--kesson-overlay-tagline, 0.80rem);
  color: rgba(var(--color-heading), 0.75);
  font-family: var(--kesson-font-serif-display);
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-shadow: 0 0 30px rgba(var(--color-accent), 0.3);
}

.tagline-en {
  font-size: var(--kesson-overlay-tagline-en, 0.80rem);
  color: rgba(var(--color-heading), 0.55);
  font-family: var(--kesson-font-serif-ui);
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-shadow: 0 0 30px rgba(var(--color-accent), 0.3);
}

html[lang="en"] h1 {
  font-size: clamp(0.85rem, 5.0vmin, 1.8rem);
  letter-spacing: clamp(0.05em, 0.4vmin, 0.15em);
  line-height: 1.3;
  margin-bottom: 0.4rem;
  font-family: var(--kesson-font-serif-ui);
}

html[lang="en"] #taglines {
  margin-bottom: 0.8rem;
}

#hero-spacer {
  position: relative;
  height: 125vh;
  z-index: 5;
  pointer-events: none;
}

#articles-spacer {
  position: relative;
  height: 80vh;
  z-index: 5;
  pointer-events: none;
}

#scroll-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#scroll-hint.visible {
  opacity: 1;
  visibility: visible;
  animation: scrollHintPulse 3s ease-in-out infinite;
}

#scroll-hint span,
#scroll-hint-top span,
#left-kesson-link span {
  display: block;
  font-size: var(--kesson-font-size-ui-xs, 0.80rem);
  color: var(--kesson-ui-label-color);
  font-family: var(--kesson-font-serif-ui);
  letter-spacing: var(--kesson-letter-ui-wide);
}

#scroll-hint span,
#left-kesson-link span {
  margin-bottom: 4px;
}

#scroll-hint .arrow,
#scroll-hint-top .arrow,
#left-kesson-link .arrow {
  font-size: var(--kesson-font-size-ui-arrow, clamp(0.7rem, 3.5vmin, 1.2rem));
  color: var(--kesson-ui-arrow-color);
}

#left-kesson-link {
  position: fixed;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  z-index: 15;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#left-kesson-link .arrow {
  display: inline-block;
  transform: rotate(90deg);
  margin-top: 0;
}

#left-kesson-link:hover span,
#left-kesson-link:hover .arrow {
  color: var(--kesson-ui-label-hover-color);
}

#left-kesson-link:focus-visible {
  outline: 2px solid var(--kesson-focus-ring-soft);
  outline-offset: 3px;
}

#scroll-hint-top {
  position: fixed;
  top: calc(var(--kesson-topbar-height) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#scroll-hint-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: scrollHintTopPulse 3s ease-in-out infinite;
}

#scroll-hint-top span {
  margin-top: 4px;
}

#scroll-hint-top:hover span,
#scroll-hint-top:hover .arrow {
  color: var(--kesson-ui-label-hover-color);
}

#control-guide {
  position: fixed;
  top: calc(var(--kesson-topbar-height) + 2.1rem);
  right: 3%;
  z-index: 10;
  pointer-events: none;
  text-align: right;
  transition: opacity 0.6s ease;
}

#control-guide .guide-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5em;
  margin-bottom: 3px;
}

#control-guide .guide-key {
  font-size: var(--kesson-control-guide, 0.80rem);
  color: rgba(var(--color-sub-text), 0.35);
  font-family: var(--kesson-font-mono-ui);
  letter-spacing: var(--kesson-letter-ui-tight);
  white-space: nowrap;
}

#control-guide .guide-sep {
  font-size: 0.80rem;
  color: rgba(var(--color-sub-text), 0.2);
}

#control-guide .guide-action {
  font-size: var(--kesson-control-guide, 0.80rem);
  color: rgba(var(--color-sub-text), 0.3);
  font-family: var(--kesson-font-serif-ui);
  letter-spacing: var(--kesson-letter-ui-normal);
  white-space: nowrap;
}

#control-guide .guide-touch {
  display: none;
}

#control-guide .guide-desktop {
  display: flex;
}

.card.kesson-card {
  --bs-card-bg: var(--kesson-card-bg);
  background-color: var(--bs-card-bg);
  background-image: none;
  border: 1px solid rgba(var(--color-accent), 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.card.kesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-accent), 0.15);
}

.card.kesson-card .card-body {
  background-color: transparent;
}

.kesson-card .card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kesson-card .card-title {
  color: #fff;
  font-size: var(--kesson-card-title, 0.8rem);
}

.kesson-card .card-body small,
.kesson-card .card-text {
  color: rgba(var(--color-heading), 0.5);
  font-size: var(--kesson-card-text, 0.8rem);
}

#surface-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  --bs-btn-color: var(--kesson-action-text);
  --bs-btn-bg: var(--kesson-action-bg);
  --bs-btn-border-color: var(--kesson-action-border);
  --bs-btn-hover-color: var(--kesson-action-text-hover);
  --bs-btn-hover-bg: var(--kesson-action-bg-hover);
  --bs-btn-hover-border-color: rgba(var(--color-accent), 0.32);
  --bs-btn-active-color: var(--kesson-action-text-hover);
  --bs-btn-active-bg: var(--kesson-action-bg-hover);
  --bs-btn-active-border-color: rgba(var(--color-accent), 0.36);
  --bs-btn-focus-shadow-rgb: var(--color-accent);
  font-family: var(--kesson-font-serif-ui);
  font-size: var(--kesson-surface-btn, 0.80rem);
  letter-spacing: var(--kesson-letter-ui-wide);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, background 0.3s ease, color 0.3s ease;
}

.section-content-wrap {
  position: relative;
  z-index: 20;
  padding: var(--kesson-section-content-padding);
}

.section-heading {
  font-size: var(--kesson-section-heading, 0.80rem);
  font-weight: 400;
  color: rgba(var(--color-sub-text), 0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  margin: 0 0 0.85rem;
}

.section-heading-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.section-heading-link:visited,
.section-heading-link:hover,
.section-heading-link:active {
  text-decoration: none;
}

.section-heading-link:hover {
  color: rgba(200, 220, 250, 0.72);
}

.section-heading-link:focus-visible {
  outline: 1px solid rgba(150, 190, 255, 0.7);
  outline-offset: 4px;
}

.section-heading-jump-link {
  margin-left: 0.6em;
  color: rgba(var(--color-sub-text), 0.45);
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  vertical-align: baseline;
}

.section-heading-jump-link:visited,
.section-heading-jump-link:active {
  color: rgba(var(--color-sub-text), 0.45);
  text-decoration: none;
}

.section-heading-jump-link:hover {
  color: rgba(200, 220, 250, 0.72);
  text-decoration: none;
}

.section-heading-jump-link:focus-visible {
  outline: 1px solid rgba(150, 190, 255, 0.7);
  outline-offset: 4px;
}

#tech-footer {
  position: relative;
  z-index: 5;
  text-align: left;
  padding: 2rem 3% 1.5rem;
  pointer-events: none;
}

.tech-footer-line {
  font-size: var(--kesson-footer-line, 0.80rem);
  color: rgba(150, 175, 210, 0.25);
  font-family: var(--kesson-font-mono-ui);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.footer-signature {
  margin-top: 0.55rem;
  font-size: var(--kesson-footer-signature-size, 0.80rem);
  color: rgba(195, 214, 241, 0.68);
  font-family: var(--kesson-font-serif-ui);
  letter-spacing: 0.06em;
  line-height: 1.5;
}

@keyframes scrollHintPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}

@keyframes scrollHintTopPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

@media (max-height: 500px) and (orientation: landscape) {
  #taglines {
    margin-bottom: 0.4rem;
  }

  #overlay {
    bottom: 6%;
  }
}

@media (hover: none) and (pointer: coarse) {
  #control-guide .guide-touch {
    display: flex;
  }

  #control-guide .guide-desktop {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #graphic-switcher {
    top: calc(var(--kesson-topbar-height) + 0.5rem);
    left: 0.6rem;
    padding: 0.16rem;
  }

  #graphic-switcher .btn {
    font-size: var(--kesson-font-size-ui-sm, 0.80rem);
    min-width: 3.3rem;
    padding: 0.2rem 0.44rem;
  }
}