:root{
  --text: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.72);
  --soft: rgba(255,255,255,0.14);
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.12);
  --border: rgba(255,255,255,0.18);
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  overflow:hidden;
  font-family:"Inter", sans-serif;
  background:#050608;
  color:var(--text);
}

h1,
h2,
h3{
  margin:0 0 16px;
  font-family:"Marcellus", serif;
  font-weight:400;
  letter-spacing:0.04em;
}

p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.75;
  font-size:16px;
}

a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
}

button,
select,
input{
  font:inherit;
}

.bg{
  position:fixed;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 7s ease, transform 14s ease;
  will-change:opacity, transform;
}

.bg[style*="opacity: 1"]{
  transform:scale(1);
}

.bg-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.38));
}

.welcome-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,4,8,0.34);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  animation:overlayFadeIn 1.6s ease forwards;
  z-index:40;
}

@keyframes overlayFadeIn{
  to{
    opacity:1;
  }
}

.welcome-overlay.is-leaving{
  animation:overlayFadeOut 1.2s ease forwards;
}

@keyframes overlayFadeOut{
  from{
    opacity:1;
    visibility:visible;
  }
  to{
    opacity:0;
    visibility:hidden;
  }
}

.welcome-box{
  width:min(760px, 100%);
  text-align:center;
  padding:42px 34px 36px;
  border-radius:32px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.06)
  );
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.welcome-badge,
.page-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  margin-bottom:20px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.8);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.welcome-box h1{
  font-size:72px;
  line-height:0.95;
  margin-bottom:18px;
  letter-spacing:0.06em;
}

.welcome-lead{
  max-width:620px;
  margin:0 auto 14px;
  font-size:20px;
  line-height:1.7;
  color:rgba(255,255,255,0.9);
}

.welcome-text{
  max-width:650px;
  margin:0 auto 28px;
  font-size:15px;
  line-height:1.9;
  color:rgba(255,255,255,0.74);
}

.enter-btn{
  appearance:none;
  border:none;
  outline:none;
  cursor:pointer;
  padding:16px 30px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.03em;
  color:#fff;
  background:linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.enter-btn:hover{
  transform:translateY(-2px) scale(1.01);
  background:linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10));
  box-shadow:
    0 16px 36px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

.enter-btn:active{
  transform:translateY(0);
}

.enter-btn:disabled,
.enter-btn.is-loading{
  opacity:0.65;
  cursor:wait;
  transform:none;
}

.top-links{
  position:fixed;
  top:18px;
  right:18px;
  display:flex;
  gap:10px;
  z-index:20;
  transition:opacity 0.45s ease, transform 0.45s ease;
}

.top-link-btn{
  appearance:none;
  border:none;
  outline:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,0.9);
  font-size:14px;
  transition:background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.top-link-btn:hover{
  background:rgba(255,255,255,0.13);
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.2);
}

.controls{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:min(92vw, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:28px;
  background:rgba(14,18,24,0.24);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 40px rgba(0,0,0,0.24);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  z-index:20;
  transition:opacity 0.45s ease, transform 0.45s ease;
}

.control-btn,
.controls select{
  appearance:none;
  border:none;
  outline:none;
  height:46px;
  border-radius:999px;
  padding:0 18px;
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.95);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.control-btn{
  cursor:pointer;
}

.control-btn:hover,
.controls select:hover{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}

.control-group{
  display:flex;
  align-items:center;
  gap:10px;
  height:46px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}

.control-group label{
  font-size:13px;
  color:rgba(255,255,255,0.76);
  white-space:nowrap;
}

.volume-group{
  min-width:210px;
}

input[type="range"]{
  width:120px;
  accent-color:#ffffff;
  background:transparent;
}

.panel-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,7,12,0.36);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
  z-index:35;
}

.panel-overlay.visible{
  opacity:1;
  pointer-events:auto;
}

.info-panel{
  position:relative;
  width:min(860px, 100%);
  max-height:min(84vh, 900px);
  overflow:auto;
  padding:34px 30px 28px;
  border-radius:30px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.11),
    rgba(255,255,255,0.06)
  );
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transform:translateY(18px) scale(0.985);
  opacity:0;
  transition:transform 0.4s ease, opacity 0.4s ease;
  display:none;
}

.info-panel.active{
  display:block;
  transform:translateY(0) scale(1);
  opacity:1;
}

.info-panel h1{
  font-size:52px;
  line-height:1;
  margin-bottom:18px;
}

.panel-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  outline:none;
  cursor:pointer;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.9);
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.25s ease, transform 0.25s ease;
}

.panel-close:hover{
  background:rgba(255,255,255,0.14);
  transform:scale(1.04);
}

.hidden{
  display:none !important;
}

.ui-hidden{
  opacity:0;
  pointer-events:none;
}

.controls.ui-hidden{
  transform:translateX(-50%) translateY(14px);
}

.top-links.ui-hidden{
  transform:translateY(-10px);
}

body.panel-open .controls,
body.panel-open .top-links{
  opacity:0;
  pointer-events:none;
}

body.panel-open{
  overflow:hidden;
}

.inner-page-body{
  min-height:100vh;
  overflow:auto;
  padding:32px 20px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(to bottom, #07090d, #10151c 45%, #090b0f);
}

.page{
  max-width:840px;
  margin:40px auto;
}

.page-glass{
  padding:34px 28px;
  border-radius:30px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.05)
  );
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.page h1{
  font-size:56px;
  line-height:1;
  margin-bottom:18px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  margin-top:12px;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  transition:background 0.25s ease, transform 0.25s ease;
}

.back-link:hover{
  background:rgba(255,255,255,0.14);
  transform:translateY(-1px);
}

@media (max-width: 768px){
  .welcome-box{
    padding:30px 22px 26px;
    border-radius:26px;
  }

  .welcome-box h1{
    font-size:52px;
  }

  .welcome-lead{
    font-size:18px;
  }

  .welcome-text{
    font-size:14px;
    line-height:1.8;
  }

  .top-links{
    top:14px;
    right:14px;
    gap:8px;
  }

  .top-link-btn{
    font-size:13px;
    padding:9px 12px;
  }

  .controls{
    width:min(94vw, 94vw);
    bottom:14px;
    padding:12px;
    gap:10px;
  }

  .control-btn,
  .controls select,
  .control-group{
    width:100%;
    justify-content:center;
  }

  .volume-group{
    min-width:unset;
  }

  input[type="range"]{
    width:100%;
    max-width:180px;
  }

  .info-panel{
    padding:28px 18px 22px;
    border-radius:24px;
    max-height:min(86vh, 86vh);
  }

  .info-panel h1,
  .page h1{
    font-size:40px;
  }

  .panel-close{
    top:12px;
    right:12px;
    width:38px;
    height:38px;
  }
}