/* Shared styles - edit here to update all pages */
* {
      box-sizing: border-box;
    }

a {
      color: var(--accent);
      text-decoration: none;
    }

a:hover {
      color: #9dffe0;
      text-decoration: underline;
    }

.wrapper {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 16px 14px 40px;
    }

header {
      margin-bottom: 18px;
    }

.logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: 18px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      text-decoration: none;
      white-space: nowrap;
      min-width: 0;
      flex: 0 1 auto;
    }

.logo span {
      text-shadow: 0 0 12px rgba(32, 255, 175, 0.7);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      min-width: 0;
    }

.logo img {
      width: 32px;
      height: 32px;
      border-radius: 11px;
      border: 1px solid rgba(32, 255, 175, 0.5);
      box-shadow: 0 0 16px rgba(32, 255, 175, 0.9);
      background: radial-gradient(circle at 30% 0, #ffffff, #20ffaf 45%, #0c1f1a);
      object-fit: cover;
      flex-shrink: 0;
    }

nav {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      min-width: 0;
    }

.nav-list {
      list-style: none;
      display: flex;
      gap: 6px;
      padding: 0;
      margin: 0;
      min-width: 0;
    }

.nav-item {
      display: flex;
    }

.nav-link .jp {
      font-family: "DotGothic16", system-ui;
      font-size: 11px;
      opacity: 0.83;
    }

.nav-link .en {
      font-family: "Orbitron", system-ui;
      font-size: 10px;
      opacity: 0.72;
    }

.nav-link:hover {
      border-color: rgba(32, 255, 175, 0.7);
      background: radial-gradient(circle at 0 0, rgba(32, 255, 175, 0.28), transparent 60%);
      box-shadow: 0 0 16px rgba(32, 255, 175, 0.45);
      text-decoration: none;
    }

.burger {
      display: none;
      border: none;
      background: transparent;
      color: var(--text-main);
      padding: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

.burger svg {
      width: 22px;
      height: 22px;
      display: block;
    }

@media (max-width: 480px) {
      .wrapper {
        padding-left: 10px;
        padding-right: 10px;
      }

      .bar {
        padding: 9px 10px;
        gap: 8px;
      }

      .logo {
        font-size: 12px;
      }

      .logo span {
        max-width: 100%;
      }

      nav {
        top: calc(100% + 6px);
      }

      .nav-list {
        padding: 8px;
      }

      .nav-link {
        padding: 10px 12px;
      }
    }

.panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 0 20%, rgba(32, 255, 175, 0.09), transparent 80% 100%);
      opacity: 0.9;
      pointer-events: none;
    }

.panel > * {
      position: relative;
      z-index: 1;
    }

.panel .head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(32, 255, 175, 0.42);
      background:
        radial-gradient(circle at 0 0, rgba(32, 255, 175, 0.2), transparent 60%),
        rgba(1, 7, 12, 0.96);
    }

.panel .head h2 {
      margin: 0;
      font-family: "Orbitron", system-ui;
      font-size: 15px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

.panel .head .dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: radial-gradient(circle at 35% 0, #ffffff, #20ffaf 52%, #066a55);
      box-shadow: var(--shadow-strong);
    }

.hero-main {
      font-family: "DotGothic16", system-ui;
      font-size: 22px;
      letter-spacing: 0.06em;
      margin: 0 0 6px;
    }

footer {
      margin-top: 24px;
      padding: 14px 4px 10px;
      border-top: 1px solid rgba(32, 255, 175, 0.35);
      font-size: 11px;
      color: var(--text-muted);
    }

.foot {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 14px;
    }

.to-top {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(32,255,175,0.7);
      background: rgba(3,8,14,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease-out;
      z-index: 50;
    }

.to-top.visible {
      opacity: 1;
      pointer-events: auto;
    }

.to-top svg {
      display: block;
    }

.panel .body h2,
    .panel .body h3,
    .panel .body h4 {
      font-family: "DotGothic16", system-ui, sans-serif;
      letter-spacing: 0.06em;
      font-weight: 400;
      margin-top: 16px;
      margin-bottom: 6px;
      color: var(--text-main);
    }

.panel .body h2 {
      font-size: 18px;
      border-left: 4px solid var(--accent);
      padding-left: 8px;
    }

.panel .body h3 {
      font-size: 16px;
    }

.panel .body h4 {
      font-size: 14px;
      color: var(--text-muted);
    }

/* Site-wide content typography: heading hierarchy (navigation excluded) */
main .panel .head h2 {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.4;
  font-weight: 700;
}
main .panel .body h2 {
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.45;
  font-weight: 700;
}
main .panel .body h3 {
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.5;
  font-weight: 700;
}
main .panel .body p,
main .panel .body li {
  font-size: 14px;
  line-height: 1.8;
}
@media (max-width: 600px) {
  main .panel .head h2 { font-size: 19px; }
  main .panel .body h2 { font-size: 18px; }
  main .panel .body h3 { font-size: 16px; }
  main .panel .body p, main .panel .body li { font-size: 13px; }
}