.demo { display: grid; justify-items: center; gap: 0; }

.yt { position: relative; isolation: isolate; width: 100%; max-width: 960px; }
.yt__glow {
  position: absolute; inset: 6% 4%; z-index: -1; border-radius: 40px;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(20, 184, 166, .55), transparent),
    radial-gradient(closest-side at 70% 60%, rgba(59, 130, 246, .45), transparent);
  filter: blur(60px); opacity: 0; transform: scale(.9);
  transition: opacity 1s ease, transform 1s ease;
}
.demo.is-on .yt__glow { opacity: .55; transform: scale(1.12); animation: yt-glow 8s ease-in-out infinite alternate; }
@keyframes yt-glow { to { transform: scale(1.18) rotate(4deg); } }

.yt__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; background: #000;
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
}
.yt__ph { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at center, #141416 0%, #08080a 100%); opacity: .9; transition: opacity .5s ease; }
.demo.is-on .yt__ph { opacity: 0; }
.yt__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.demo.is-on .yt__video { filter: brightness(.9); animation: yt-zoom 17s ease-in-out infinite alternate; }
@keyframes yt-zoom { to { transform: scale(1.03); } }

.yt__spinner {
  position: absolute; top: 50%; left: 50%; z-index: 6; transform: translate(-50%, -50%);
  pointer-events: none; transition: opacity .3s ease, visibility .3s ease;
}
.demo.is-on .yt__spinner { opacity: 0; visibility: hidden; }
.yt__spinner svg { display: block; width: 64px; height: 64px; animation: yt-rot 2s linear infinite; }
.yt__spinner circle { stroke: #fff; stroke-linecap: round; animation: yt-dash 1.5s ease-in-out infinite; }
@keyframes yt-rot { to { transform: rotate(360deg); } }
@keyframes yt-dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
  100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}

.yt__badge {
  position: absolute; top: 20px; right: 18px; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45);
  font: 600 12px/1 var(--font); color: #e4e4e7;
  opacity: 0; transform: translateY(-5px); transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.demo.is-on .yt__badge { opacity: 1; transform: none; }
.yt__badge svg { width: 14px; height: 14px; color: var(--accent); }
.yt__eq { display: flex; align-items: flex-end; gap: 3px; height: 14px; margin-right: 2px; }
.yt__eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--accent); transform-origin: bottom; animation: yt-eq 1.2s ease-in-out infinite alternate; }
.yt__eq i:nth-child(2) { animation-delay: .2s; animation-duration: .8s; }
.yt__eq i:nth-child(3) { animation-delay: .4s; animation-duration: 1.4s; }
.yt__eq i:nth-child(4) { animation-delay: .1s; animation-duration: 1s; }
.yt__eq i:nth-child(5) { animation-delay: .3s; animation-duration: 1.1s; }
@keyframes yt-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

.yt__chrome {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; height: 52px; padding: 0 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 60%, transparent);
  opacity: .45; transition: opacity .3s ease;
}
.yt__screen:hover .yt__chrome { opacity: 1; }
.yt__bar { position: relative; height: 3px; margin: 4px 0; background: rgba(255, 255, 255, .2); }
.yt__played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #f00; }
.demo.is-on .yt__played { animation: yt-progress 17s linear infinite; }
@keyframes yt-progress { to { width: 100%; } }
.yt__controls { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.yt__side { display: flex; align-items: center; gap: 6px; }
.yt__btn { display: block; width: 36px; height: 36px; padding: 0; opacity: .85; color: #fff; }
.yt__btn--sm { width: 36px; height: 18px; }
.yt__gear { position: relative; }
.yt__gear b { position: absolute; top: -4px; right: 4px; padding: 1px 2px; border-radius: 1px; background: #f00; color: #fff; font: 900 7px/1 Arial, sans-serif; }
.yt__time { margin-left: 8px; font: 400 12px/1 Arial, sans-serif; color: #ddd; }
.yt__now::after { content: "0:00"; }
.demo.is-on .yt__now::after { animation: yt-time 17s steps(1) infinite; }
@keyframes yt-time {
  0% { content: "0:00"; } 5.9% { content: "0:01"; } 11.8% { content: "0:02"; } 17.6% { content: "0:03"; }
  23.5% { content: "0:04"; } 29.4% { content: "0:05"; } 35.3% { content: "0:06"; } 41.2% { content: "0:07"; }
  47.1% { content: "0:08"; } 52.9% { content: "0:09"; } 58.8% { content: "0:10"; } 64.7% { content: "0:11"; }
  70.6% { content: "0:12"; } 76.5% { content: "0:13"; } 82.4% { content: "0:14"; } 88.2% { content: "0:15"; }
  94.1% { content: "0:16"; } 100% { content: "0:17"; }
}

.demo__hint { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 72px 0 36px; text-align: center; transition: opacity .5s; }
.demo__hint h3 { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.03em; }
.demo__sub { font-size: 17px; color: var(--muted); }
.demo__hint svg { width: 26px; height: 26px; margin-top: 10px; color: var(--accent-text); animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(7px); } }
.demo.is-on .demo__hint { opacity: .4; }
.demo.is-on .demo__hint svg { animation: none; }

.live { width: 100%; max-width: 880px; }
.live__scale { position: relative; height: calc(680px * var(--s, 1)); }

.xw {
  --x-bg: #161616;
  --x-head: #1e1e1e;
  --x-border: #2a2a2d;
  --x-text: #f0f0f0;
  --x-muted: #888;
  --x-green: #22c55e;
  --x-red: #ef4444;
  --x-blue: #3b82f6;
  --x-yellow: #eab308;
  --x-accent: var(--x-red);
  --x-ring: #444;
  --x-icon: #71717a;

  position: absolute; top: 0; left: 0;
  width: 880px; height: 680px;
  transform: scale(var(--s, 1)); transform-origin: 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--x-border);
  background: var(--x-bg); color: var(--x-text);
  font: 400 13px/1.45 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-align: left;
  box-shadow: 0 50px 100px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05);
  user-select: none;
  transition: box-shadow 1s ease;
}
.xw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .02), transparent 40%); pointer-events: none; }
.xw[data-state="connecting"] { --x-accent: var(--x-blue); --x-ring: var(--x-blue); --x-icon: var(--x-blue); }
.xw[data-state="on"] {
  --x-accent: var(--x-green); --x-ring: var(--x-green); --x-icon: var(--x-green);
  box-shadow: 0 50px 100px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05), 0 0 140px -30px rgba(34, 197, 94, .35);
}
.xw svg { flex: none; }

.xw__head { flex: none; display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 16px; background: var(--x-head); border-bottom: 1px solid var(--x-border); }
.xw__left, .xw__right { display: flex; align-items: center; }
.xw__right { gap: 12px; }
.xw__logo { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.xw__by { margin: 0 12px 0 4px; font-size: 10px; color: var(--x-muted); }
.xw__dots { display: flex; gap: 10px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .06); }
.xw__dots span { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--x-muted); transition: background-color .3s, box-shadow .3s; }
.dot.on { background: var(--x-green); box-shadow: 0 0 5px var(--x-green); }
.xw__nav { display: flex; align-items: center; gap: 3px; }
.xw__nav span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 600; color: var(--x-muted); }
.xw__nav span.is-active { color: var(--x-text); background: rgba(255, 255, 255, .05); }
.xw__nav svg { width: 12px; height: 12px; }
.xw__nav .xw__gear { width: 26px; height: 26px; padding: 0; justify-content: center; }
.xw__gear svg { width: 13px; height: 13px; }
.xw__win { display: flex; gap: 8px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .06); color: var(--x-muted); }
.xw__win svg { width: 13px; height: 13px; }

.xw__content { position: relative; z-index: 1; flex: 1; min-height: 0; }
.xw__center { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 20px; }
.xw__aurora {
  position: absolute; top: 50%; left: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--x-accent) 12%, transparent) 0%, transparent 70%);
  filter: blur(30px); pointer-events: none;
  transition: background 1.5s cubic-bezier(.16, 1, .3, 1);
}
.xw__title { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 800 24px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: -.03em; }
.xw__title svg { width: 20px; height: 20px; color: var(--x-accent); transition: color .5s; }
.xw__subtitle { position: relative; z-index: 2; margin-bottom: 14px; font-size: 12px; color: var(--x-muted); }

.xw__power {
  position: relative; z-index: 2; flex: none; width: 176px; height: 176px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 10px solid #0e0e10; background: #18181b; color: inherit; font: inherit;
  cursor: pointer; outline: none; box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.xw__power:hover { transform: scale(1.03); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.xw__power:active { transform: scale(.97); }
.xw__power:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.xw[data-state="connecting"] .xw__power { cursor: progress; }
.xw__ring {
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  border: 3.5px solid var(--x-ring);
  transition: border-color .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}
.xw:not([data-state="off"]) .xw__ring { box-shadow: 0 0 16px var(--x-ring); }
.xw[data-state="connecting"] .xw__ring { border-color: rgba(59, 130, 246, .25); border-top-color: var(--x-blue); animation: xw-spin 1s linear infinite; }
@keyframes xw-spin { to { transform: rotate(360deg); } }
.xw[data-state="off"] .xw__power::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--x-green);
  animation: xw-pulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes xw-pulse { 0% { transform: scale(.94); opacity: .55; } 100% { transform: scale(1.2); opacity: 0; } }
.xw__inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xw__picon { width: 44px; height: 44px; color: var(--x-icon); transition: color .5s ease; }
.xw__pstatus { font-size: 13px; font-weight: 700; }
.xw__ptimer { font: 400 11px/1 var(--mono); color: var(--x-muted); }

.xw__stats { position: absolute; top: 55px; right: 0; bottom: 0; z-index: 2; width: 220px; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.xw__stat { display: flex; align-items: center; gap: 12px; }
.xw__stat > svg { width: 14px; height: 14px; color: var(--x-muted); }
.xw__stat > span { display: flex; flex-direction: column; }
.xw__stat small { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); }
.xw__stat b { font: 800 15px/1.3 var(--mono); }
.xw__stat i { font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--x-muted); }
.xw__refresh { width: 10px; height: 10px; margin-left: -6px; color: var(--x-muted); }

.xw__status { flex: none; height: 38px; padding: 0 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.xw__progress { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.xw__progress span { display: block; height: 100%; width: var(--p, 0%); background: var(--x-accent); transition: width .3s ease, background-color .5s ease; }
.xw__line { font-size: 11px; color: var(--x-muted); }

.xw__status { position: relative; z-index: 2; }
.xw__log { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; padding: 14px 24px 24px; border-top: 1px solid var(--x-border); }
.xw__loghead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.xw__loghead b { font-size: 12px; }
.xw__loghead > span { display: flex; gap: 16px; font-size: 11px; font-weight: 500; color: var(--x-muted); }
.xw__view {
  height: 235px; padding: 14px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 10px; background: #1e1e1e; border: 1px solid var(--x-border);
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.xw__lines { font: 400 11.5px/1.6 var(--mono); color: #a1a1aa; word-break: break-word; }
.xw__lines > div { min-height: 18px; animation: xw-line .3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes xw-line { from { opacity: 0; transform: translateX(-5px); } }
.xw__lines .t { margin-right: 6px; color: #52525b; }
.xw__lines .p { margin-right: 6px; font-weight: 500; color: #71717a; }
.xw__lines .p.ok, .xw__lines .s-ok { font-weight: 700; color: var(--x-green); }
.xw__lines .p.err { font-weight: 700; color: var(--x-red); }
.xw__lines .p.warn, .xw__lines .s-warn { font-weight: 700; color: var(--x-yellow); }
.xw__lines .s-ok, .xw__lines .s-warn { white-space: nowrap; }
.xw__lines .bold { font-weight: 700; color: var(--x-text); }
.xw__lines .err { color: var(--x-red); }
.xw__lines .indent { padding-left: 78px; }
.xw__lines .rocket { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-weight: 700; color: var(--x-green); }
.xw__lines .rocket svg { width: 13px; height: 13px; }
.xw__lines a { color: var(--x-green); text-decoration: underline; }

@media (max-width: 760px) {
  .yt__glow { inset: 10% 6%; filter: blur(34px); border-radius: 24px; }
  .yt__screen { border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
  .yt__spinner svg { width: 44px; height: 44px; }
  .yt__badge { top: 10px; right: 8px; gap: 6px; padding: 5px 9px 5px 8px; font-size: 10.5px; }
  .yt__badge svg { width: 12px; height: 12px; }
  .yt__eq { height: 11px; }
  .yt__chrome { height: 42px; padding: 0 6px; opacity: 1; }
  .yt__controls { height: 32px; }
  .yt__btn { width: 28px; height: 28px; }
  .yt__btn--sm { width: 26px; height: 16px; }
  .yt__time { margin-left: 4px; font-size: 10.5px; }
  .yt__side + .yt__side > *:nth-child(1),
  .yt__side + .yt__side > *:nth-child(3) { display: none; }

  .demo__hint { margin: 36px 0 22px; }
  .demo__hint h3 { font-size: clamp(26px, 7.4vw, 40px); }
  .demo__sub { font-size: 15.5px; }
  .demo__hint svg { width: 22px; height: 22px; margin-top: 6px; }

  .live { max-width: none; }
  .live__scale { height: auto; }
  .live .xw {
    position: relative; width: 100%; height: auto;
    transform: none; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
  }
  .live .xw[data-state="on"] {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05), 0 0 90px -30px rgba(34, 197, 94, .4);
  }

  .live .xw__head { height: auto; min-height: 44px; padding: 9px 12px; }
  .live .xw__left { flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
  .live .xw__right { display: none; }
  .live .xw__by { margin: 0 0 0 6px; }
  .live .xw__left { justify-content: center; }
  .live .xw__dots { width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding-left: 0; border-left: 0; }

  .live .xw__content { display: flex; flex-direction: column; }
  .live .xw__center { height: auto; padding: 26px 16px 22px; }
  .live .xw__aurora { width: 380px; height: 380px; filter: blur(26px); }
  .live .xw__title { justify-content: center; margin-bottom: 6px; font-size: 19px; text-align: center; }
  .live .xw__title svg { width: 17px; height: 17px; }
  .live .xw__subtitle { margin-bottom: 18px; text-align: center; }
  .live .xw__power { width: 150px; height: 150px; border-width: 8px; }
  .live .xw__picon { width: 38px; height: 38px; }

  .live .xw__stats {
    position: static; width: auto; padding: 14px 16px;
    flex-direction: row; justify-content: space-between; gap: 10px;
    border-top: 1px solid var(--x-border);
  }
  .live .xw__stat { flex: 1; min-width: 0; justify-content: center; gap: 8px; }
  .live .xw__stat > svg { width: 13px; height: 13px; }
  .live .xw__stat > span { min-width: 0; }
  .live .xw__stat b { font-size: 13.5px; }
  .live .xw__stat b i { display: block; }
  .live .xw__refresh { display: none; }

  .live .xw__status { height: auto; padding: 10px 16px; }
  .live .xw__log { padding: 12px 14px 16px; }
  .live .xw__loghead > span { gap: 12px; }
  .live .xw__view { height: 184px; padding: 12px; overflow: hidden; }
  .live .xw__lines { font-size: 11px; line-height: 1.55; }
  .live .xw__lines .indent { padding-left: 24px; }
  .live .xw__lines .t { display: none; }
}

@media (max-width: 420px) {
  .live .xw__head { padding: 8px 10px; }
  .live .xw__logo { font-size: 13.5px; }
  .live .xw__center { padding: 22px 12px 18px; }
  .live .xw__title { font-size: 17px; }
  .live .xw__power { width: 132px; height: 132px; border-width: 7px; }
  .live .xw__picon { width: 34px; height: 34px; }
  .live .xw__stats { padding: 12px; gap: 6px; }
  .live .xw__stat { gap: 6px; }
  .live .xw__stat > svg { display: none; }
  .live .xw__stat b { font-size: 12.5px; }
  .live .xw__status { padding: 8px 12px; }
  .live .xw__log { padding: 10px 10px 14px; }
  .live .xw__view { height: 164px; padding: 10px; }
  .live .xw__lines { font-size: 10.5px; }
}