@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@500;700;900&family=Orbitron:wght@500;700;900&family=Oxanium:wght@500;700;800&family=Rajdhani:wght@500;700&display=swap");

      :root {
        --bg: #07090d;
        --panel: rgba(12, 17, 26, 0.78);
        --line: transparent;
        --text: #f2f9ff;
        --muted: #a8b6c4;
        --cyan: #00f0ff;
        --pink: #ff4b9a;
        --acid: #ff4b9a;
        --hero-video-scale: 1.2;
        --font-en-body: "Exo 2";
        --font-en-display: "Oxanium";
        --cut-sm: 8px;
        --cut-md: 14px;
      }
      * { box-sizing: border-box; }
      html, body {
        margin: 0;
        color: var(--text);
        background: var(--bg);
        font-family: "Rajdhani", "Noto Sans JP", sans-serif;
        min-height: 100%;
      }
      body {
        overflow-x: hidden;
        position: relative;
        letter-spacing: 0.01em;
        text-align: center;
      }
      body.splash-active {
        overflow: hidden;
      }
      .scroll-beam {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        z-index: 130;
        background: rgba(255, 75, 154, 0.18);
        pointer-events: none;
      }
      .scroll-beam-fill {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #00f0ff 0%, #ff4b9a 55%, #ff86be 100%);
        box-shadow: 0 0 12px rgba(255, 75, 154, 0.6);
        transition: width 80ms linear;
      }
      /* Keep background video fully visible: force-disable extra overlay layers */
      body::before,
      body::after,
      .hero::before,
      .hero::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
      }
      .site-video-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        background: var(--bg);
        filter: none;
        isolation: isolate;
      }
      .site-video-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
        opacity: 0;
      }
      body.bg-switch-glitch .site-video-bg::after {
        opacity: 1;
        background:
          repeating-linear-gradient(
            180deg,
            rgba(0, 240, 255, 0.2) 0px,
            rgba(0, 240, 255, 0.2) 2px,
            rgba(255, 75, 154, 0.16) 2px,
            rgba(255, 75, 154, 0.16) 5px
          );
        mix-blend-mode: screen;
        animation: bgSwitchGlitch 620ms steps(3, end) 1;
      }
      @keyframes bgSwitchGlitch {
        0% { opacity: 0; transform: translateX(0); filter: hue-rotate(0deg); }
        18% { opacity: 1; transform: translateX(-14px); filter: hue-rotate(18deg); }
        34% { opacity: 0.46; transform: translateX(12px); filter: hue-rotate(-20deg); }
        58% { opacity: 0.78; transform: translateX(-7px); filter: hue-rotate(24deg); }
        82% { opacity: 0.32; transform: translateX(5px); filter: hue-rotate(-12deg); }
        100% { opacity: 0; transform: translateX(0); filter: hue-rotate(0deg); }
      }
      .video-loading {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 50% 45%, rgba(0, 240, 255, 0.12), rgba(0, 0, 0, 0.82) 55%),
          repeating-linear-gradient(
            180deg,
            rgba(0, 240, 255, 0.06) 0px,
            rgba(0, 240, 255, 0.06) 1px,
            transparent 1px,
            transparent 4px
          );
        opacity: 1;
        transition: opacity 260ms ease;
        pointer-events: none;
      }
      .video-loading.is-hidden {
        opacity: 0;
      }
      .video-loading .loader-core {
        width: min(56vw, 280px);
        text-align: center;
        color: var(--cyan);
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.45);
        font-family: "Orbitron", "Rajdhani", sans-serif;
        letter-spacing: 0.08em;
      }
      .video-loading .loader-text {
        font-size: 12px;
        margin-bottom: 10px;
      }
      .video-loading .loader-bar {
        height: 2px;
        border: 1px solid rgba(0, 240, 255, 0.6);
        background: rgba(0, 0, 0, 0.6);
        position: relative;
        overflow: hidden;
      }
      .video-loading .loader-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: -45%;
        width: 45%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 243, 106, 0.9), transparent);
        animation: loaderSweep 1.05s linear infinite;
      }
      .artist-media .video-loading {
        z-index: 2;
        background:
          linear-gradient(180deg, rgba(4, 8, 14, 0.72), rgba(2, 5, 10, 0.84)),
          repeating-linear-gradient(
            180deg,
            rgba(0, 240, 255, 0.06) 0px,
            rgba(0, 240, 255, 0.06) 1px,
            transparent 1px,
            transparent 4px
          );
      }
      .artist-media .video-loading .loader-core {
        width: min(80%, 240px);
      }
      .artist-media .video-loading .loader-text {
        font-size: 10px;
      }
      @keyframes loaderSweep {
        from { left: -45%; }
        to { left: 110%; }
      }
      .splash-screen {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: grid;
        place-items: center;
        background: #05070b;
        opacity: 1;
        transition: opacity 360ms ease;
      }
      .splash-screen.is-hidden {
        opacity: 0;
        pointer-events: none;
      }
      .splash-core {
        width: min(84vw, 720px);
        display: grid;
        gap: 16px;
        justify-items: center;
      }
      .splash-core .hero-logo-glitch {
        width: min(84vw, 720px);
      }
      .splash-meta {
        width: min(72vw, 420px);
        color: var(--cyan);
        font-family: "Orbitron", "Rajdhani", sans-serif;
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
        letter-spacing: 0.08em;
      }
      .splash-meta .txt {
        font-size: 12px;
        margin-bottom: 8px;
      }
      .splash-meta .bar {
        height: 2px;
        border: 1px solid rgba(0, 240, 255, 0.62);
        background: rgba(0, 0, 0, 0.58);
        overflow: hidden;
        position: relative;
      }
      .splash-meta .bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: -40%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 243, 106, 0.92), transparent);
        animation: loaderSweep 1.2s linear infinite;
      }

      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        background: rgba(3, 4, 8, 0.72);
        backdrop-filter: blur(7px);
        border-bottom: 1px solid var(--line);
        z-index: 100;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        clip-path: none;
      }
      main,
      footer {
        position: relative;
        z-index: 1;
      }
      .site-header img { height: 36px; width: auto; cursor: pointer; }
      .site-header nav { display: flex; gap: 10px; flex-wrap: wrap; }
      .site-header nav .lang-switch {
        margin-left: 4px;
      }
      .menu-toggle {
        display: none;
        width: 38px;
        height: 34px;
        border: 1px solid var(--line);
        background: rgba(8, 12, 20, 0.72);
        padding: 0;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
      }
      .menu-toggle .bar {
        width: 16px;
        height: 2px;
        background: var(--text);
        transition: transform 180ms ease, opacity 180ms ease;
      }
      .site-header.nav-open .menu-toggle .bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      .site-header.nav-open .menu-toggle .bar:nth-child(2) {
        opacity: 0;
      }
      .site-header.nav-open .menu-toggle .bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }
      .site-header a {
        color: var(--muted);
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        padding: 3px 7px;
        border: 1px solid transparent;
        transition: 160ms ease;
        text-align: center;
      }
      .site-header a:hover {
        color: var(--text);
        border-color: var(--cyan);
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.62);
      }
.lang-switch {
  display: flex;
  gap: 6px;
}
.lang-switch select {
  border: 1px solid var(--line);
  background: rgba(8, 12, 20, 0.72);
  color: var(--muted);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: 0.06em;
  transition: box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}
.lang-switch select:focus-visible {
  color: #07090d;
  border-color: transparent;
  background: var(--acid);
  box-shadow: inset 0 0 0 1px var(--acid), 0 0 10px rgba(255, 243, 106, 0.28);
  outline: none;
}
.section,
.card,
.spotify-card,
.lang-switch select,
.menu-toggle {
  position: relative;
}

      .hero {
        height: 100vh;
        height: 100svh;
        min-height: 100vh;
        min-height: 100svh;
        display: grid;
        place-items: center;
        padding: 0;
        position: relative;
        overflow: hidden;
        background: transparent;
      }
      .hero-video {
        position: absolute;
        top: 0;
        left: 50%;
        width: 56.25vh;
        width: 56.25svh;
        height: 100vh;
        height: 100svh;
        min-width: 100vw;
        min-width: 100svw;
        min-height: 177.78vw;
        min-height: 177.78svw;
        transform: translate(-50%, 0) scale(var(--hero-video-scale));
        transform-origin: top center;
        border: 0;
        z-index: 1;
      }
      .hero-video.base-video {
        z-index: 1;
        opacity: 1;
        transition: opacity 520ms ease;
      }
      .hero-video.base-video.is-hidden {
        opacity: 0;
      }
      .hero-video.glitch-layer {
        z-index: 2;
        opacity: 0;
        mix-blend-mode: screen;
        will-change: transform, clip-path, opacity;
      }
      .hero-video.glitch-cyan {
        filter: hue-rotate(145deg) saturate(1.8) contrast(1.2);
        animation: videoGlitchCyan 4.4s steps(1, end) infinite;
      }
      .hero-video.glitch-pink {
        filter: hue-rotate(-45deg) saturate(2) contrast(1.2);
        animation: videoGlitchPink 3.8s steps(1, end) infinite;
      }
      @keyframes videoGlitchCyan {
        0%, 82%, 100% {
          opacity: 0;
          clip-path: inset(0 0 0 0);
          transform: translate(-50%, 0) scale(var(--hero-video-scale));
        }
        83% {
          opacity: 0.22;
          clip-path: inset(6% 0 62% 0);
          transform: translate(calc(-50% - 8px), -2px) scale(var(--hero-video-scale));
        }
        85% {
          opacity: 0.3;
          clip-path: inset(41% 0 37% 0);
          transform: translate(calc(-50% + 10px), 1px) scale(var(--hero-video-scale));
        }
        87% {
          opacity: 0.18;
          clip-path: inset(74% 0 8% 0);
          transform: translate(calc(-50% - 5px), 0) scale(var(--hero-video-scale));
        }
      }
      @keyframes videoGlitchPink {
        0%, 72%, 100% {
          opacity: 0;
          clip-path: inset(0 0 0 0);
          transform: translate(-50%, 0) scale(var(--hero-video-scale));
        }
        73% {
          opacity: 0.2;
          clip-path: inset(16% 0 56% 0);
          transform: translate(calc(-50% + 7px), 0) scale(var(--hero-video-scale));
        }
        75% {
          opacity: 0.28;
          clip-path: inset(52% 0 22% 0);
          transform: translate(calc(-50% - 9px), 2px) scale(var(--hero-video-scale));
        }
        77% {
          opacity: 0.16;
          clip-path: inset(84% 0 4% 0);
          transform: translate(calc(-50% + 4px), -1px) scale(var(--hero-video-scale));
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-video.glitch-layer {
          animation: none;
          opacity: 0;
        }
        .card .artist-video {
          animation: none;
          filter: none;
          transform: none;
          clip-path: inset(0 0 0 0);
        }
        .scroll-reveal {
          opacity: 1;
          transform: none;
          filter: none;
          transition: none;
        }
      }
      .hero-fallback {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        z-index: 2;
        padding: 8px 12px;
        font-size: 12px;
        color: #d9e7f6;
        background: rgba(3, 4, 8, 0.75);
        border: 1px solid var(--line);
        display: none;
      }
      .hero-fallback a { color: var(--cyan); text-decoration: underline; }
      .hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 100%;
        margin: 0 auto;
        display: grid;
        place-items: center;
        padding: 64px 12px 24px;
        background: transparent;
      }
      .hero-title {
        margin: 0;
      }
      .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }
      .hero-logo {
        width: min(68vw, 460px);
        height: auto;
        display: block;
        filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.46));
        animation: logoPulse 2.8s ease-in-out infinite;
      }
      .hero-logo-glitch {
        position: relative;
        display: block;
        width: min(68vw, 460px);
      }
      .hero-logo-glitch .hero-logo {
        width: 100%;
      }
      .hero-logo-glitch .hero-logo-layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: auto;
        opacity: 0.42;
        mix-blend-mode: screen;
        pointer-events: none;
      }
      .hero-logo-glitch .hero-logo-layer.cyan {
        filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.65));
        animation: logoGlitchCyan 2.4s steps(1, end) infinite;
      }
      .hero-logo-glitch .hero-logo-layer.pink {
        filter: drop-shadow(0 0 14px rgba(255, 75, 154, 0.65));
        animation: logoGlitchPink 2.1s steps(1, end) infinite;
      }
      @keyframes logoPulse {
        0%, 100% { filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.35)); }
        50% { filter: drop-shadow(0 0 28px rgba(255, 75, 154, 0.62)); }
      }
      @keyframes logoGlitchCyan {
        0%, 84%, 100% { transform: translate(0, 0); opacity: 0; }
        85% { transform: translate(-4px, -1px); opacity: 0.42; }
        87% { transform: translate(5px, 1px); opacity: 0.36; }
        89% { transform: translate(-2px, 0); opacity: 0.2; }
      }
      @keyframes logoGlitchPink {
        0%, 74%, 100% { transform: translate(0, 0); opacity: 0; }
        75% { transform: translate(4px, 0); opacity: 0.34; }
        77% { transform: translate(-5px, -1px); opacity: 0.38; }
        79% { transform: translate(3px, 1px); opacity: 0.22; }
      }
      .section {
        width: min(920px, 78vw);
        margin: 0 auto 22px;
        border: 1px solid var(--line);
        background: var(--panel);
        padding: 20px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        clip-path: polygon(
          calc(100% - var(--cut-md)) 0,
          100% var(--cut-md),
          100% 100%,
          var(--cut-md) 100%,
          0 calc(100% - var(--cut-md)),
          0 0
        );
      }
      .section > h1,
      .section h2 {
        margin: 0 0 12px;
        font-size: 22px;
        font-family: "Orbitron", "Rajdhani", sans-serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--acid);
        text-shadow: 0 0 12px rgba(255, 243, 106, 0.34);
      }
      html:lang(en) body {
        font-family: var(--font-en-body), "Rajdhani", sans-serif;
      }
html:lang(en) .site-header a,
html:lang(en) .section > h1,
html:lang(en) .section h2,
html:lang(en) .card h3,
html:lang(en) .spotify-card h3,
html:lang(en) .lang-switch select,
html:lang(en) .scroll-top-btn {
  font-family: var(--font-en-display), var(--font-en-body), sans-serif;
  letter-spacing: 0.06em;
}
      /* Disable all corner-cut shapes */
.section,
.card,
.spotify-card,
.lang-switch select,
.menu-toggle,
.scroll-top-btn {
  clip-path: none !important;
}
      #contact.section,
      footer.section {
        border: 0;
        background: transparent;
        box-shadow: none;
        clip-path: none;
      }
      .footer-divider {
        color: rgba(168, 182, 196, 0.52);
        margin: 0 8px;
      }
      .footer-link {
        color: var(--muted);
        text-decoration: none;
        border-bottom: 1px dashed rgba(255, 243, 106, 0.35);
        transition: color 160ms ease, border-color 160ms ease;
      }
      .footer-link:hover,
      .footer-link:focus-visible {
        color: var(--text);
        border-color: rgba(255, 243, 106, 0.75);
      }
      .scroll-reveal {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(6px);
        transition:
          opacity 620ms ease,
          transform 620ms cubic-bezier(0.2, 0.85, 0.2, 1),
          filter 620ms ease;
        transition-delay: var(--sr-delay, 0ms);
      }
      .scroll-reveal.is-inview {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      .artist-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .card {
        border: 1px solid var(--line);
        padding: 10px;
        background: linear-gradient(180deg, rgba(10, 14, 22, 0.84), rgba(7, 10, 16, 0.84));
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
        clip-path: polygon(
          calc(100% - var(--cut-sm)) 0,
          100% var(--cut-sm),
          100% 100%,
          var(--cut-sm) 100%,
          0 calc(100% - var(--cut-sm)),
          0 0
        );
      }
      .card:hover,
      .card:focus-within {
        transform: translateY(-3px);
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--acid), 0 0 16px rgba(255, 243, 106, 0.22);
      }
      .card img { width: 100%; height: auto; display: block; }
      .card .artist-media {
        width: 100%;
        aspect-ratio: 9 / 16;
        background: #000;
        overflow: hidden;
      }
      .card .artist-video {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        will-change: transform, clip-path, filter;
        animation: artistVideoGlitch 3.9s steps(1, end) infinite;
      }
      .artist-grid .card:nth-child(2) .artist-video {
        animation-duration: 4.6s;
      }
      .artist-grid .card:nth-child(3) .artist-video {
        animation-duration: 4.1s;
      }
      @keyframes artistVideoGlitch {
        0%, 84%, 100% {
          transform: translate(0, 0) scale(1);
          clip-path: inset(0 0 0 0);
          filter: none;
        }
        85% {
          transform: translate(-4px, 1px) scale(1.01);
          clip-path: inset(8% 0 62% 0);
          filter: hue-rotate(145deg) saturate(1.8);
        }
        87% {
          transform: translate(5px, -1px) scale(1.01);
          clip-path: inset(46% 0 22% 0);
          filter: hue-rotate(-38deg) saturate(1.7);
        }
        89% {
          transform: translate(-2px, 0) scale(1);
          clip-path: inset(76% 0 6% 0);
          filter: contrast(1.25);
        }
      }
      .card h3 {
        margin: 10px 0 6px;
        font-family: "Orbitron", "Rajdhani", sans-serif;
        letter-spacing: 0.04em;
        text-align: center;
      }
      .card small { color: var(--cyan); }
      .card p { color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; }

      .release-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
      }
      .spotify-release {
        display: grid;
        gap: 12px;
      }
      .player-switcher {
        display: inline-flex;
        justify-self: center;
        gap: 8px;
        padding: 4px;
        border: 1px solid var(--line);
        background: rgba(8, 11, 18, 0.62);
      }
      .player-switch-btn {
        border: 1px solid var(--line);
        background: rgba(8, 12, 20, 0.82);
        color: var(--muted);
        font-family: "Orbitron", "Rajdhani", sans-serif;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 7px 12px;
        cursor: pointer;
        transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
      }
      .player-switch-btn:hover,
      .player-switch-btn:focus-visible {
        color: var(--text);
        outline: none;
        border-color: var(--cyan);
      }
      .player-switch-btn.is-active {
        color: #07090d;
        border-color: transparent;
        background: var(--acid);
        box-shadow: inset 0 0 0 1px var(--acid), 0 0 10px rgba(255, 243, 106, 0.26);
      }
      .platform-panel {
        display: none;
      }
      .platform-panel.is-active {
        display: block;
      }
      .platform-panel[data-player-platform="apple"] .spotify-players {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin: 0 auto;
      }
      .platform-panel[data-player-platform="apple"] .spotify-card {
        width: 100%;
      }
      .spotify-players {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 12px;
      }
      .spotify-card {
        border: 1px solid var(--line);
        border-radius: 4px;
        padding: 10px;
        background: rgba(8, 11, 18, 0.62);
        clip-path: polygon(
          calc(100% - var(--cut-sm)) 0,
          100% var(--cut-sm),
          100% 100%,
          var(--cut-sm) 100%,
          0 calc(100% - var(--cut-sm)),
          0 0
        );
        border-radius: 0;
      }
      .spotify-card h3 {
        margin: 0 0 8px;
        font-size: 16px;
        font-family: "Orbitron", "Rajdhani", sans-serif;
        text-align: center;
      }
      .spotify-player {
        width: 100%;
        height: 352px;
        border: 0;
        border-radius: 4px;
        background: #121212;
        transform: translateZ(0);
        backface-visibility: hidden;
      }
      .apple-player {
        background: #101114;
        height: 450px;
        min-height: 450px;
      }
      @media (max-width: 767px) {
        .spotify-players {
          grid-template-columns: 1fr;
        }
      }
      .release img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
      .release p { color: var(--muted); font-size: 13px; line-height: 1.6; }
      .release ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
      .release-links {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        justify-content: center;
      }
      .release-links a {
        width: 30px;
        height: 30px;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
      }
      .release-links svg {
        width: 16px;
        height: 16px;
        fill: var(--text);
      }

      .sns {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .sns a {
        width: 34px;
        height: 34px;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        background: rgba(8, 12, 20, 0.82);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
      }
      .sns a:hover,
      .sns a:focus-visible {
        transform: translateY(-2px);
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--acid), 0 0 12px rgba(255, 243, 106, 0.24);
      }
      .sns-icon {
        width: 18px;
        height: 18px;
        display: block;
      }

      .note { color: #ffcf62; font-size: 12px; }
      .section > h1,
      .section h2,
      .section p,
      .section small {
        text-align: center;
      }
      .journal-shell {
        padding-top: 72px;
      }
      .journal-list {
        display: grid;
        gap: 12px;
      }
      .journal-entry {
        text-align: left;
      }
      .journal-list .journal-entry {
        cursor: pointer;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
      }
      .journal-list .journal-entry:hover,
      .journal-list .journal-entry:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(255, 243, 106, 0.56);
        box-shadow: inset 0 0 0 1px rgba(255, 243, 106, 0.18), 0 0 18px rgba(0, 217, 255, 0.12);
        outline: none;
      }
      .journal-entry-meta {
        display: inline-block;
        color: var(--cyan);
        font-size: 12px;
        margin: 0 0 6px;
      }
      .journal-entry-title {
        margin: 0 0 8px;
        font-family: "Orbitron", "Rajdhani", sans-serif;
        letter-spacing: 0.05em;
      }
      .journal-entry-body p {
        color: var(--muted);
        line-height: 1.7;
        margin: 0 0 12px;
      }
      .journal-entry-body h2 {
        margin: 28px 0 10px;
        font-size: clamp(20px, 2.4vw, 26px);
        line-height: 1.35;
        text-align: left;
      }
      .journal-entry-body h3 {
        margin: 18px 0 8px;
        font-size: 16px;
        line-height: 1.5;
        color: var(--text);
        text-align: left;
      }
      .journal-entry-body ul {
        margin: 0 0 12px;
        padding-left: 20px;
        color: var(--muted);
        line-height: 1.7;
      }
      .journal-entry-body ol {
        margin: 0 0 12px;
        padding-left: 20px;
        color: var(--muted);
        line-height: 1.7;
      }
      .journal-entry-body a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        margin: 4px 6px 4px 0;
        padding: 7px 10px;
        border: 1px solid rgba(255, 243, 106, 0.46);
        background: rgba(255, 243, 106, 0.08);
        color: var(--text);
        font-family: "Rajdhani", sans-serif;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
        vertical-align: middle;
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      }
      .journal-entry-body a::before {
        content: "↗";
        display: inline-grid;
        place-items: center;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        color: var(--acid);
        font-size: 13px;
        line-height: 1;
      }
      .journal-entry-body a[href*="youtube.com"]::before,
      .journal-entry-body a[href*="youtu.be"]::before,
      .journal-entry-body a[href*="instagram.com"]::before,
      .journal-entry-body a[href*="open.spotify.com"]::before,
      .journal-entry-body a[href*="music.apple.com"]::before {
        content: "";
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .journal-entry-body a[href*="youtube.com"]::before,
      .journal-entry-body a[href*="youtu.be"]::before {
        background-image: url("https://cdn.simpleicons.org/youtube/ffffff");
      }
      .journal-entry-body a[href*="instagram.com"]::before {
        background-image: url("https://cdn.simpleicons.org/instagram/ffffff");
      }
      .journal-entry-body a[href*="open.spotify.com"]::before {
        background-image: url("https://cdn.simpleicons.org/spotify/ffffff");
      }
      .journal-entry-body a[href*="music.apple.com"]::before {
        background-image: url("https://cdn.simpleicons.org/applemusic/ffffff");
      }
      .journal-entry-body a:hover,
      .journal-entry-body a:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(255, 243, 106, 0.82);
        background: rgba(255, 243, 106, 0.14);
        outline: none;
      }
      .journal-player-section {
        margin: 28px 0 18px;
      }
      .journal-player-section h2 {
        margin: 0 0 12px;
        text-align: left;
      }
      .journal-player-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
      }
      .journal-player-card {
        margin: 0;
      }
      .journal-player-card .spotify-player {
        min-height: 352px;
      }
      .journal-player-card .apple-player {
        min-height: 450px;
      }
      .journal-media-section {
        display: grid;
        gap: 14px;
        margin: 18px 0 26px;
      }
      .journal-youtube-embed {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 220px;
        border: 1px solid var(--line);
        background: rgba(8, 12, 20, 0.72);
      }
      .journal-social-embed-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px;
      }
      .journal-social-card {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 72px;
        padding: 14px;
        border: 1px solid var(--line);
        background: rgba(8, 12, 20, 0.76);
        color: var(--text);
        text-decoration: none;
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      }
      .journal-social-card:hover,
      .journal-social-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(255, 243, 106, 0.72);
        background: rgba(255, 243, 106, 0.1);
        outline: none;
      }
      .journal-social-icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .journal-social-card.is-youtube .journal-social-icon {
        background-image: url("https://cdn.simpleicons.org/youtube/ffffff");
      }
      .journal-social-card.is-instagram .journal-social-icon {
        background-image: url("https://cdn.simpleicons.org/instagram/ffffff");
      }
      .journal-social-text {
        display: grid;
        gap: 2px;
      }
      .journal-social-text strong {
        font-family: "Orbitron", "Rajdhani", sans-serif;
        font-size: 13px;
        letter-spacing: 0.06em;
      }
      .journal-social-text small {
        color: var(--muted);
        font-size: 12px;
      }
      .journal-lede {
        color: var(--text) !important;
        font-size: 17px;
      }
      .journal-answer,
      .journal-faq {
        margin: 18px 0;
        padding: 16px;
        border: 1px solid var(--line);
        background: rgba(8, 12, 20, 0.66);
      }
      .journal-answer {
        position: relative;
        padding: 18px 18px 18px 22px;
        border-color: rgba(255, 243, 106, 0.36);
        background:
          linear-gradient(90deg, rgba(255, 243, 106, 0.13), rgba(8, 12, 20, 0.72) 38%),
          rgba(8, 12, 20, 0.7);
      }
      .journal-answer::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--acid);
      }
      .journal-answer strong {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 8px;
        margin-bottom: 6px;
        border: 1px solid rgba(255, 243, 106, 0.34);
        background: rgba(255, 243, 106, 0.1);
        color: var(--acid);
        font-family: "Orbitron", "Rajdhani", sans-serif;
        font-size: 12px;
        letter-spacing: 0.08em;
      }
      .journal-answer p {
        color: var(--text);
        font-size: 17px;
        line-height: 1.62;
      }
      .journal-answer p:last-child,
      .journal-faq p:last-child {
        margin-bottom: 0;
      }
      .journal-entry p {
        margin-top: 0;
      }
      .journal-entry-body + .journal-tags,
      .journal-entry .journal-empty,
      .journal-entry .journal-entry-body,
      .journal-entry-summary {
        color: var(--muted);
      }
      .journal-readmore {
        display: inline-block;
        margin-top: 6px;
        color: var(--acid);
        text-decoration: none;
        border-bottom: 1px dashed rgba(255, 243, 106, 0.5);
      }
      .journal-readmore:hover,
      .journal-readmore:focus-visible {
        color: var(--text);
      }
      .journal-tags {
        margin-top: 12px;
        font-size: 12px;
        color: #7f8d9f;
      }
      .journal-return {
        display: inline-block;
        margin-top: 16px;
        color: var(--cyan);
        text-decoration: none;
      }
      .journal-return:hover,
      .journal-return:focus-visible {
        color: var(--text);
      }
      .journal-empty {
        margin: 0;
      }
      .scroll-top-btn {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 30;
        min-width: 58px;
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--line);
        background: rgba(8, 12, 20, 0.88);
        color: var(--acid);
        font-family: "Orbitron", "Rajdhani", sans-serif;
        font-size: 12px;
        letter-spacing: 0.08em;
        cursor: pointer;
        opacity: 0;
        transform: translateY(14px);
        pointer-events: none;
        transition: opacity 220ms ease, transform 220ms ease, border-color 160ms ease;
        clip-path: polygon(
          calc(100% - var(--cut-sm)) 0,
          100% var(--cut-sm),
          100% 100%,
          var(--cut-sm) 100%,
          0 calc(100% - var(--cut-sm)),
          0 0
        );
      }
      .scroll-top-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(
            to bottom right,
            transparent calc(50% - 0.7px),
            var(--line) calc(50% - 0.7px),
            var(--line) calc(50% + 0.7px),
            transparent calc(50% + 0.7px)
          ) top right / var(--cut-sm) var(--cut-sm) no-repeat,
          linear-gradient(
            to bottom right,
            transparent calc(50% - 0.7px),
            var(--line) calc(50% - 0.7px),
            var(--line) calc(50% + 0.7px),
            transparent calc(50% + 0.7px)
          ) bottom left / var(--cut-sm) var(--cut-sm) no-repeat;
      }
      .scroll-top-btn.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .scroll-top-btn:hover {
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--acid), 0 0 12px rgba(255, 243, 106, 0.24);
      }
      .scroll-top-btn:focus-visible {
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--acid), 0 0 12px rgba(255, 243, 106, 0.24);
      }
      .cookie-consent {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 80;
        margin: 0 auto;
        width: min(720px, calc(100vw - 32px));
        padding: 14px;
        border: 1px solid rgba(255, 75, 154, 0.45);
        background: rgba(6, 10, 18, 0.92);
        backdrop-filter: blur(8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        text-align: center;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 220ms ease, transform 220ms ease;
      }
      .cookie-consent.is-hidden {
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
      }
      .cookie-consent p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
      }
      .cookie-actions {
        margin-top: 10px;
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .cookie-btn {
        border: 1px solid rgba(255, 75, 154, 0.55);
        background: rgba(16, 20, 30, 0.8);
        color: var(--text);
        font-family: "Orbitron", "Rajdhani", sans-serif;
        font-size: 12px;
        letter-spacing: 0.05em;
        padding: 8px 12px;
        cursor: pointer;
      }
      .cookie-btn.primary {
        background: rgba(255, 75, 154, 0.16);
      }

      @media (max-aspect-ratio: 1/1) {
        :root {
          --hero-video-scale: 1.08;
        }
      }
      @media (max-width: 767px) {
        .section {
          width: calc(100vw - 16px);
          padding-left: 10px;
          padding-right: 10px;
        }
        .site-video-bg {
          position: fixed;
          inset: 0;
        }
        .menu-toggle {
          display: inline-flex;
          position: fixed;
          top: 10px;
          right: 14px;
          z-index: 36;
          margin: 0;
          clip-path: polygon(
            calc(100% - var(--cut-sm)) 0,
            100% var(--cut-sm),
            100% 100%,
            var(--cut-sm) 100%,
            0 calc(100% - var(--cut-sm)),
            0 0
          );
        }
        .site-header img {
          order: 1;
        }
        .site-header {
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 8px;
        }
        .site-header nav {
          order: 3;
          width: 100%;
          display: none;
          flex-direction: column;
          gap: 8px;
          padding: 8px;
          border: 1px solid var(--line);
          background: rgba(8, 12, 20, 0.88);
          clip-path: none;
        }
        .site-header.nav-open nav {
          display: flex;
        }
        .site-header a {
          font-size: 11px;
          width: 100%;
          padding: 8px 10px;
          border: 1px solid var(--line);
          background: rgba(4, 8, 14, 0.85);
        }
        .site-header nav .lang-switch {
          margin: 12px auto 0;
          justify-content: center;
          width: 100%;
        }
        .section > h1,
        .section h2 { font-size: 20px; }
        .artist-grid {
          grid-template-columns: 1fr;
        }
        .scroll-top-btn {
          right: 12px;
          bottom: 12px;
        }
        .cookie-consent {
          left: 10px;
          right: 10px;
          bottom: 10px;
          width: calc(100vw - 20px);
          padding: 12px;
        }
        .cookie-actions {
          justify-content: center;
        }
      }