/* ============================================================
   RESET
   ============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body       { line-height: 1; }
ol, ul     { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================
   CSS VARIABLES & ROOT
   ============================================================ */
:root {
  --background-height: 100vh;
  --site-language-alignment: left;
  --site-language-direction: ltr;
  --site-language-flex-alignment: flex-start;
  --site-language-indent-left: 1;
  --site-language-indent-right: 0;
  --site-language-margin-left: 0;
  --site-language-margin-right: auto;
  --viewport-height: 100vh;
}
html { font-size: 16pt; }

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-text-size-adjust: none;
  line-height: 1.0;
  min-height: var(--viewport-height);
  min-width: 320px;
  overflow-x: hidden;
  word-wrap: break-word;
  background-color: #FAFAFA;
}

/* Cross-hatch background pattern */
body::before {
  background-attachment: scroll;
  content: '';
  display: block;
  height: var(--background-height);
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: scale(1);
  width: 100vw;
  z-index: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20d%3D%22M%200%200%20L%20512%20512%20M%20512%200%20L%200%20512%22%20stroke%3D%22rgba(0,0,0,0.051)%22%20stroke-width%3D%223.01px%22%20vector-effect%3D%22non-scaling-stroke%22%20stroke-linecap%3D%22square%22%20fill-rule%3D%22nonzero%22%20%2F%3E%3C%2Fsvg%3E");
  background-size: 553px;
  background-position: center;
  background-repeat: repeat;
}

/* Page-load fade overlay */
body::after {
  background-color: #FFFFFF;
  content: '';
  display: block;
  pointer-events: none;
  position: fixed;
  transform: scale(1);
  z-index: 1;
  height: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  transition: opacity 0.5s ease-in-out 0s, visibility 0.5s 0s;
  visibility: hidden;
  width: 100%;
}
body.is-loading::after  { opacity: 1; visibility: visible; }
body.is-loading         { pointer-events: none; }

/* Loader */
body #loader {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 5.25rem;
  left: calc(50% - 2.625rem);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: calc(50% - 2.625rem);
  transition: opacity 1s ease, visibility 1s;
  visibility: hidden;
  width: 5.25rem;
  z-index: 100000;
}
body.with-loader #loader {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5yZWN0IHsgZmlsbDogIzAwMDAwMDsgfTwvc3R5bGU+PHJlY3QgeD0iNCIgeT0iMzYiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iMiIgcnk9IjIiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgYmVnaW49IjBzIiBkdXI9IjFzIiB2YWx1ZXM9IjI0OzY0OzI0OzI0OzI0IiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYmVnaW49IjBzIiBkdXI9IjFzIiB2YWx1ZXM9IjM2OzE2OzM2OzM2OzM2IiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PC9yZWN0PjxyZWN0IHg9IjI0IiB5PSIzNiIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBiZWdpbj0iMC4ycyIgZHVyPSIxcyIgdmFsdWVzPSIyNDs2NDsyNDsyNDsyNCIgcmVwZWF0RHVyPSJpbmRlZmluaXRlIiAvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGJlZ2luPSIwLjJzIiBkdXI9IjFzIiB2YWx1ZXM9IjM2OzE2OzM2OzM2OzM2IiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PC9yZWN0PjxyZWN0IHg9IjQ0IiB5PSIzNiIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBiZWdpbj0iMC40cyIgZHVyPSIxcyIgdmFsdWVzPSIyNDs2NDsyNDsyNDsyNCIgcmVwZWF0RHVyPSJpbmRlZmluaXRlIiAvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGJlZ2luPSIwLjRzIiBkdXI9IjFzIiB2YWx1ZXM9IjM2OzE2OzM2OzM2OzM2IiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PC9yZWN0PjxyZWN0IHg9IjY0IiB5PSIzNiIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBiZWdpbj0iMC42cyIgZHVyPSIxcyIgdmFsdWVzPSIyNDs2NDsyNDsyNDsyNCIgcmVwZWF0RHVyPSJpbmRlZmluaXRlIiAvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGJlZ2luPSIwLjZzIiBkdXI9IjFzIiB2YWx1ZXM9IjM2OzE2OzM2OzM2OzM2IiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PC9yZWN0PjxyZWN0IHg9Ijg0IiB5PSIzNiIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSIyIiByeT0iMiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBiZWdpbj0iMC44cyIgZHVyPSIxcyIgdmFsdWVzPSIyNDs2NDsyNDsyNDsyNCIgcmVwZWF0RHVyPSJpbmRlZmluaXRlIiAvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGJlZ2luPSIwLjhzIiBkdXI9IjFzIiB2YWx1ZXM9IjM2OzE2OzM2OzM2OzM2IiByZXBlYXREdXI9ImluZGVmaW5pdGUiIC8+PC9yZWN0Pjwvc3ZnPg==");
  opacity: 1;
  transform: scale(1.0);
  visibility: visible;
}
body.is-playing.with-loader #loader {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.75s ease, visibility 0.25s;
  visibility: hidden;
}
body.is-instant #main,
body.is-instant #main > .inner > *,
body.is-instant #main > .inner > section > * { transition: none !important; }
body.is-instant::after { display: none !important; transition: none !important; }

/* ============================================================
   TYPOGRAPHY & INLINE ELEMENTS
   ============================================================ */
u   { text-decoration: underline; }
strong { color: inherit; font-weight: bolder; }
em  { font-style: italic; }
code {
  background-color: rgba(144, 144, 144, 0.25);
  border-radius: 0.25em;
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: 0.9em;
  font-weight: normal;
  letter-spacing: 0;
  margin: 0 0.25em;
  padding: 0.25em 0.5em;
  text-indent: 0;
}
mark { background-color: rgba(144, 144, 144, 0.25); }
s    { text-decoration: line-through; }
sub  { font-size: smaller; vertical-align: sub; }
sup  { font-size: smaller; vertical-align: super; }
a    { color: inherit; text-decoration: underline; transition: color 0.25s ease; }
a[onclick]:not([href]) { cursor: pointer; }
unloaded-script { display: none; }

spoiler-text {
  -webkit-text-stroke: 0;
  background-color: rgba(32, 32, 32, 0.75);
  text-shadow: none;
  text-stroke: 0;
  color: transparent;
  cursor: pointer;
  transition: color 0.1s ease-in-out;
}
spoiler-text.active { color: #FFFFFF; cursor: text; }

/* ============================================================
   WRAPPER & MAIN
   ============================================================ */
#wrapper {
  -webkit-overflow-scrolling: touch;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--viewport-height);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

#main {
  --alignment: center;
  --flex-alignment: center;
  --indent-left: 1;
  --indent-right: 1;
  --margin-left: auto;
  --margin-right: auto;
  --border-radius-tl: 0;
  --border-radius-tr: 0;
  --border-radius-br: 0;
  --border-radius-bl: 0;
  align-items: center;
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  max-width: 100%;
  position: relative;
  text-align: var(--alignment);
  z-index: 1;
  transition: opacity 0.75s ease-in-out 0s;
}

#main > .inner {
  --padding-horizontal: 3rem;
  --padding-vertical: 3rem;
  --spacing: 0rem;
  --width: 35rem;
  border-radius: var(--border-radius-tl) var(--border-radius-tr) var(--border-radius-br) var(--border-radius-bl);
  max-width: 100%;
  position: relative;
  width: var(--width);
  z-index: 1;
  padding: var(--padding-vertical) var(--padding-horizontal);
}
#main > .inner > *         { margin-top: var(--spacing); margin-bottom: var(--spacing); }
#main > .inner > :first-child { margin-top: 0 !important; }
#main > .inner > :last-child  { margin-bottom: 0 !important; }
#main > .inner > .full {
  margin-left: calc(var(--padding-horizontal) * -1);
  max-width: calc(100% + calc(var(--padding-horizontal) * 2) + 0.4725px);
  width: calc(100% + calc(var(--padding-horizontal) * 2) + 0.4725px);
}
#main > .inner > .full:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  margin-top: calc(var(--padding-vertical) * -1) !important;
}
#main > .inner > .full:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  margin-bottom: calc(var(--padding-vertical) * -1) !important;
}
#main > .inner > .full.screen {
  border-radius: 0 !important;
  max-width: 100vw;
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  right: auto;
}
body.is-loading #main { opacity: 0; }

/* ============================================================
   IMAGE
   ============================================================ */
.image { display: block; line-height: 0; max-width: 100%; position: relative; }
.image .frame {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
  width: 100%;
}
.image .frame img { border-radius: 0 !important; max-width: 100%; vertical-align: top; width: inherit; }
.image.full .frame { display: block; }
.image.full:first-child .frame { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.image.full:last-child  .frame { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

.image.style1 { text-align: center; }
.image.style1 .frame {
  width: 7.5rem;
  border-radius: 0.5rem;
  border-color: #000000;
  border-style: solid;
  border-width: 3px;
  transition: none;
}
.image.style1 .frame img:first-child { border-radius: calc(0.5rem - 3px) !important; }
.image.style1 .frame img { transition: none; }

/* ============================================================
   DIVIDER
   ============================================================ */
hr {
  align-items: center;
  border: 0;
  display: flex;
  justify-content: var(--flex-alignment);
  min-height: 1rem;
  padding: 0;
  position: relative;
  width: 100%;
}
hr::before { content: ''; }

hr.style1 { justify-content: center; }
hr.style1::before {
  height: 3rem;
  background-color: #000000;
  width: 3px;
  border-radius: 0px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.buttons {
  cursor: default;
  display: flex;
  justify-content: var(--flex-alignment);
  letter-spacing: 0;
  padding: 0;
}
.buttons li { max-width: 100%; text-align: var(--alignment); }
.buttons li a {
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.buttons.style1 { gap: 2rem; flex-direction: row; flex-wrap: wrap; }
.buttons.style1 li a {
  display: inline-flex;
  width: 100vw;
  height: 3rem;
  line-height: calc(3rem - 6px);
  padding: 0 1.5rem;
  vertical-align: middle;
  font-family: 'Sometype Mono', monospace;
  font-size: 1em;
  font-weight: 500;
  border-radius: 0.5rem;
  border-color: #000000;
  border-style: solid;
  border-width: 3px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.buttons.style1 li a svg {
  display: block;
  fill: #000000;
  flex-grow: 0;
  flex-shrink: 0;
  height: 100%;
  min-width: 16px;
  pointer-events: none;
  width: 1.25em;
  margin-left: 0.5em;
  margin-right: calc(-0.125em + 0rem);
  transition: fill 0.25s ease;
}
.buttons.style1 li a .label {
  direction: var(--site-language-direction);
  overflow: hidden;
  flex-grow: 1;
  flex-shrink: 1;
  text-align: left;
  width: 100%;
}
.buttons.style1 .button { background-color: #FEDB8A; color: #000000; }
.buttons.style1 .button:hover { background-color: #FEA878 !important; }
.buttons.style1 li a:hover { transform: scale(1.025); }

#buttons01 .n01 { background-color: #FFFFFF; }
#buttons01 .n02 { background-color: #FFFFFF; }
#buttons01 .n03 { background-color: #FFFFFF; }
#buttons01 .n04 { background-color: #1DB954; color: #FFFFFF; border-color: #1DB954; }
#buttons01 .n04 svg { fill: #FFFFFF; }
#buttons01 .n04:hover { background-color: #1aa34a !important; border-color: #1aa34a !important; }

/* ============================================================
   SPOTIFY EMBED PLAYER
   ============================================================ */
.spotify-embed {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 3px solid #000000;
  margin-top: 2rem;
  box-shadow: 4px 4px 0px #000000;
  background-color: #1f1f1f;
}
.spotify-embed iframe {
  display: block;
  border-radius: 0;
}

#buttons01{
  padding-bottom: 2rem;
}

/* ============================================================
   ICON BUTTONS
   ============================================================ */
.icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--flex-alignment);
  letter-spacing: 0;
  padding: 0;
}
.icons li { position: relative; z-index: 1; }
.icons li a { align-items: center; display: flex; justify-content: center; }
.icons li a svg { display: block; pointer-events: none; position: relative; }
.icons li a + svg {
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.icons li a .label { display: none; }

.icons.style1 { justify-content: center; font-size: 1.5em; gap: 2rem; }
.icons.style1 li a {
  border-radius: 0.5rem;
  height: 2em;
  width: 2em;
  border-color: #000000;
  border-style: solid;
  border-width: 3px;
  transition: transform 0.125s ease, color 0.125s ease, background-color 0.125s ease, border-color 0.125s ease;
}
.icons.style1 li a svg { height: 60%; width: 60%; transition: fill 0.125s ease; }
.icons.style1 a {
  background-color: #FEDB8A;
  background-image: linear-gradient(128deg, #FFFFFF 0%, rgba(254,219,138,0.008) 0%);
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: cover;
}
.icons.style1 a svg { fill: #000000; }
.icons.style1 a:hover { background-color: #FEA878 !important; }
.icons.style1 li a + svg { transition: transform 0.125s ease, fill 0.125s ease, stroke 0.125s ease; }
.icons.style1 li a:hover { transform: scale(1.095); }
.icons.style1 li a:hover + svg { transform: scale(1.095); }

#icons01 .n01 { background-color: #FFFFFF; }
#icons01 .n01 svg { fill: #000000; }
#icons01 .n01:hover { background-color: #FFFFFF !important; }
#icons01 .n02 { background-color: #BFF6FD; }
#icons01 .n03 { background-color: #FFFFFF; }
#icons01 .n03:hover { background-color: #FFFFFF !important; }

/* ============================================================
   CREDITS
   ============================================================ */
.icc-credits { display: block; opacity: 1 !important; position: relative; transition-delay: 0s !important; }
.icc-credits span {
  border-radius: 24px;
  cursor: pointer;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  text-decoration: none;
  width: auto;
}
.icc-credits span a { display: inline-block; padding: 0.5em 0.375em; position: relative; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; z-index: 1; }
.icc-credits span a::before { content: '( '; opacity: 1; transition: opacity 0.25s ease; }
.icc-credits span a::after  { content: ' )'; opacity: 1; transition: opacity 0.25s ease; }
.icc-credits span::after {
  background-image: linear-gradient(30deg, #A464A1 15%, #3B5DAD 85%);
  border-radius: inherit;
  box-shadow: 0 0.25em 1.25em 0 rgba(0,0,0,0.25);
  content: '';
  display: block;
  height: calc(100% + 2px);
  left: -1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: -1px;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  width: calc(100% + 2px);
}
.icc-credits span:hover { text-transform: none !important; }
.icc-credits span:hover a { color: #ffffff !important; transform: scale(1.1) translateY(-0.05rem); }
.icc-credits span:hover a::before { opacity: 0; }
.icc-credits span:hover a::after  { opacity: 0; }
.icc-credits span:hover::after { opacity: 1; transform: scale(1.1) translateY(-0.05rem); }
#credits span { color: rgba(122,122,122,0.498); margin-top: 1.5rem !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1680px) { html { font-size: 12pt; } }
@media (max-width: 1280px) { html { font-size: 12pt; } }
@media (max-width: 980px)  { html { font-size: 10pt; } }

@media (max-width: 736px) {
  html { font-size: 14pt; }
  #main > .inner { --padding-horizontal: 2rem; --padding-vertical: 3rem; --spacing: 0rem; }
  .image.style1 .frame { width: 6rem; }
  hr.style1::before { height: 2rem; }
  .buttons.style1 { gap: 1.25rem; }
  .buttons.style1 li a { letter-spacing: 0rem; font-size: 1em; }
  .buttons.style1 li a svg { width: 1.25em; }
  .icons.style1 { font-size: 1.5em; gap: 1.25rem; }
}

@media (max-width: 480px) {
  #main > .inner { --spacing: 0rem; }
  .buttons.style1 { flex-direction: column; flex-wrap: nowrap; }
  .buttons.style1 li a { max-width: 100%; width: 100%; }
}

@media (max-width: 360px) {
  #main > .inner { --padding-horizontal: 1.5rem; --padding-vertical: 2.25rem; --spacing: 0rem; }
  .buttons.style1 { gap: 0.9375rem; }
  .icons.style1 { gap: 0.9375rem; }
}

/* ============================================================
   ANIMATION SAFETY NET
   If scroll detection doesn't fire within 2s (e.g. no-scroll
   single-viewport pages), force everything visible.
   ============================================================ */
body.anim-fallback .image.style1,
body.anim-fallback .buttons.style1 li,
body.anim-fallback .spotify-embed,
body.anim-fallback .icons.style1 {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  mask-size: 110% 110% !important;
  transition: none !important;
}

/* ============================================================
   NO-JS FALLBACK
   ============================================================ */
@media (scripting: none) {
  body::after { display: none !important; }
  #main > .inner { opacity: 1.0 !important; }
  #main { opacity: 1.0 !important; transform: none !important; transition: none !important; filter: none !important; }
}