@import url("fonts.css");

:root {
  color-scheme: dark;
  --text: #f5f7fb;
  --secondary: #a9b9d8;
  --accent: #a9c9ff;
  --line: rgba(126, 170, 239, .42);
  --panel: rgba(8, 20, 48, .82);
  --font: "LHT Interface", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; color: var(--text); background: #07102a; font-family: var(--font); font-optical-sizing: auto; font-kerning: normal; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #b7d2ff; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.background { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #07102a; }
.background-image { position: absolute; inset: -14px; opacity: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.025); transition: opacity 1200ms ease-in-out; }
.background-image.is-visible { opacity: 1; }
.background-treatment { position: absolute; inset: 0; z-index: 2; background: linear-gradient(118deg, rgba(110, 158, 235, .19), transparent 43%), radial-gradient(circle at 77% 10%, rgba(191, 216, 255, .12), transparent 35%), linear-gradient(to bottom, rgba(3, 14, 48, .52), rgba(2, 8, 28, .78)); box-shadow: inset 0 0 150px rgba(1, 5, 19, .42); }

.stage { position: relative; z-index: 2; height: 100%; padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.glass-clear { color: var(--text); border: 1px solid var(--line); background: rgba(7, 16, 42, .54); box-shadow: 0 12px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(14px) saturate(1.32); backdrop-filter: blur(14px) saturate(1.32); }
.glass-regular { color: var(--text); border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3); }

.navwrap { position: relative; z-index: 8; width: 100%; display: flex; justify-content: center; }
.nav { padding: 5px; border-radius: 999px; }
.navlist { position: relative; display: flex; }
.navbtn { position: relative; z-index: 1; height: 44px; padding: 0 17px; border: 0; border-radius: 22px; color: var(--secondary); background: transparent; font-size: 14px; font-weight: 650; cursor: pointer; }
.navbtn:hover, .navbtn[aria-expanded="true"] { color: var(--text); }
.indicator { position: absolute; top: 0; left: 0; z-index: 0; height: 44px; width: 0; border-radius: 22px; opacity: 0; background: rgba(255, 255, 255, .16); transition: width 160ms ease-out, transform 160ms ease-out, opacity 120ms linear; pointer-events: none; }
.panel { position: absolute; top: calc(100% + 10px); left: 50%; width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 112px); overflow: auto; scrollbar-width: none; -ms-overflow-style: none; border-radius: 26px; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 140ms linear, transform 170ms ease-out, visibility 0s linear 170ms; }
.panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.panel.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 140ms linear, transform 170ms ease-out; }
.panel-content section { padding: 24px; }
.panel-content section.switching { animation: panel-in 170ms ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.panel h2 { margin: 0 0 15px; font-size: 21px; letter-spacing: -.025em; }
.panel-content section[data-panel="team"] > h2 { text-align: center; }
.panel p { max-width: 65ch; margin: 0 0 12px; color: var(--secondary); font-size: 15px; line-height: 1.52; }
.team-groups { display: grid; gap: 17px; }
.team-group { min-width: 0; }
.team-group h3 { margin: 0 0 9px; color: var(--secondary); font-size: 12px; font-weight: 700; letter-spacing: .035em; text-align: center; }
.team-list, .principles { margin: 0; padding: 0; display: grid; list-style: none; gap: 12px; }
.team-list { display: flex; flex-wrap: wrap; justify-content: center; }
.team-list li { min-width: 190px; max-width: 250px; flex: 1 1 190px; padding: 12px; display: flex; align-items: center; gap: 12px; border-radius: 17px; background: rgba(255, 255, 255, .08); }
.avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: white; background: linear-gradient(145deg, #659fff, #1e4296); font-size: 14px; font-weight: 750; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.member { min-width: 0; }
.member b, .member span { display: block; overflow: hidden; text-overflow: ellipsis; }
.member b { font-size: 15px; }
.member span { margin-top: 2px; color: var(--secondary); font-size: 13px; }
.principles { margin-top: 17px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.principles li { padding: 14px; border-radius: 17px; background: rgba(255, 255, 255, .08); }
.principles b, .principles span { display: block; }
.principles b { margin-bottom: 5px; }
.principles span { color: var(--secondary); font-size: 14px; line-height: 1.42; }
.dim { position: fixed; inset: 0; z-index: 7; opacity: 0; pointer-events: none; background: rgba(0, 0, 0, .38); transition: opacity 140ms linear; }
.dim.on { opacity: 1; pointer-events: auto; }

.center { position: relative; flex: 1; min-height: 0; width: 100%; pointer-events: none; }
.greeting-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text); text-align: center; text-shadow: 0 5px 28px rgba(0, 0, 0, .6); }
.greeting-word { opacity: 0; font-size: clamp(64px, 8vw, 116px); font-weight: 680; line-height: .95; letter-spacing: -.055em; }
.greeting-name { position: relative; top: 45px; margin-left: 28px; opacity: 0; color: var(--accent); font-size: clamp(48px, 5.6vw, 82px); font-weight: 620; line-height: 1; letter-spacing: -.035em; }
.greeting-stage.is-animating .greeting-word { animation: greeting-left var(--greeting-duration, 6500ms) ease-in-out both; }
.greeting-stage.is-animating .greeting-name { animation: greeting-right calc(var(--greeting-duration, 6500ms) - var(--name-delay, 350ms)) var(--name-delay, 350ms) ease-in-out both; }
@keyframes greeting-left { 0% { opacity: 0; transform: translateX(-55vw); } 14%, 86% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(9vw); } }
@keyframes greeting-right { 0% { opacity: 0; transform: translateX(55vw); } 13%, 84% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-8vw); } }
.progress { position: absolute; left: 50%; top: 50%; width: min(900px, calc(100vw - 64px)); opacity: 0; transform: translate(-50%, -44%) scale(.98); transition: opacity 300ms ease-out, transform 400ms ease-out; }
.progress.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.progress-main { display: flex; align-items: center; justify-content: center; gap: 42px; }
.progress-title { color: var(--text); font-size: clamp(32px, 3.6vw, 52px); font-weight: 680; line-height: 1; letter-spacing: -.05em; white-space: nowrap; text-shadow: 0 5px 28px rgba(0, 0, 0, .6); }
.progress-title span { display: block; }
.title-first { transform: translateX(-38px); }
.title-second { margin-top: 6px; color: var(--accent); font-weight: 530; transform: translateX(50px); }
.percentage { flex: none; color: var(--text); font-size: clamp(92px, 9vw, 132px); line-height: .78; font-weight: 320; letter-spacing: -.07em; font-variant-numeric: tabular-nums; transform: translateX(14px); text-shadow: 0 5px 28px rgba(0, 0, 0, .6); }
.percentage small { margin-left: 5px; color: var(--accent); font-size: .34em; font-weight: 650; letter-spacing: 0; }

.controls { width: 100%; flex: none; display: flex; justify-content: center; }
.player { min-height: 62px; max-width: 100%; padding: 8px 14px 8px 8px; display: flex; align-items: center; gap: 10px; border-radius: 32px; }
.round-button { width: 44px; height: 44px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.round-button:hover { background: rgba(255, 255, 255, .1); }
.round-button.play { color: #07102a; background: #f5f7fb; }
.round-button.play:hover { background: #dfe8f7; }
.playlist-button { width: 38px; height: 38px; color: var(--secondary); }
.playlist-button:hover { color: var(--text); }
.round-button svg { width: 21px; height: 21px; fill: currentColor; }
.track-info { width: 190px; min-width: 0; display: grid; gap: 3px; }
.track-info b, .track-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-info b { font-size: 14px; }
.track-info span { color: var(--secondary); font-size: 12px; }
.track-progress { height: 3px; margin-top: 2px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.track-progress i { width: 0; height: 100%; display: block; border-radius: 3px; background: var(--text); }
input[type="range"] { --volume: 60%; width: 130px; height: 44px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--text) var(--volume), rgba(255, 255, 255, .18) var(--volume)); }
input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; appearance: none; border: 0; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0, 0, 0, .38); }

@media (max-width: 760px) {
  .stage { padding-inline: 14px; }
  .greeting-stage { flex-direction: column; gap: 18px; }
  .greeting-word { font-size: clamp(48px, 13vw, 78px); white-space: nowrap; }
  .greeting-name { top: 0; margin-left: 0; font-size: clamp(36px, 10vw, 62px); }
  .progress { width: calc(100vw - 32px); }
  .progress-main { gap: 22px; }
  .progress-title { font-size: clamp(20px, 6vw, 34px); }
  .title-first { transform: translateX(-14px); }
  .title-second { transform: translateX(12px); }
  .percentage { font-size: clamp(64px, 17vw, 92px); transform: translateX(3px); }
  input[type="range"] { width: 90px; }
}

@media (max-width: 520px) {
  .track-info { width: min(32vw, 145px); }
  .playlist-button { display: none; }
  input[type="range"] { display: none; }
  .panel-content section { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .background-image, .indicator, .panel, .dim, .progress { transition: none; }
  .panel-content section.switching { animation: none; }
  .greeting-word, .greeting-name { opacity: 1; animation: none !important; }
}

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .glass-clear, .glass-regular { background: #08142f; border-color: #789dd8; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-clear, .glass-regular { background: #08142f; }
}