.spectr-shorts {
  --short-accent: var(--accent, #a986ff);
  --short-text: var(--text, #f6f2ff);
  --short-muted: var(--muted, #9a94ac);
  --short-panel: var(--surface, #191722);
  --short-border: var(--line, #2c2938);
  color: var(--short-text);
  max-width: min(640px, max(470px, 80dvh));
  margin: 0 auto;
}
.spectr-shorts__layout { position: relative; overflow: clip; border-radius: 20px; }
.spectr-shorts__nav { position: absolute; top: 15px; right: 15px; z-index: 3; display: flex; gap: 6px; color: #fff; }
.spectr-shorts__reel {
  position: relative;
  height: clamp(310px, calc(100dvh - var(--header, 67px) - 56px), 810px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  border-radius: 20px;
}
.spectr-shorts__reel::-webkit-scrollbar { display: none; }
.spectr-shorts__frame { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.spectr-shorts__frame + .spectr-shorts__frame { margin-top: 14px; }
.spectr-shorts__video { position: relative; height: 100%; overflow: hidden; isolation: isolate; border: 1px solid #ffffff22; border-radius: 20px; background: radial-gradient(ellipse at top, var(--short-color), #16101c 80%); color: #fff; }
.spectr-shorts__video video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 60%; cursor: pointer; }
.spectr-shorts__video::after { position: absolute; content: ''; inset: 0; background: linear-gradient(0deg, #0b0813f5 0%, #0b0813a6 16%, transparent 44%, transparent 84%, #0b081377 100%), linear-gradient(270deg, #0b081358, transparent 29%); pointer-events: none; }
.spectr-shorts__video-top { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; }
.spectr-shorts__video-top span { font-size: 11px; font-weight: 650; padding: 7px 11px; border-radius: 999px; border: 1px solid #ffffff30; background: #1c122a77; }
.spectr-shorts button { cursor: pointer; color: inherit; font: inherit; }
.spectr-shorts button:focus-visible, .spectr-shorts a:focus-visible, .spectr-shorts__reel:focus-visible, .spectr-shorts input:focus-visible { outline: 2px solid var(--short-accent); outline-offset: 2px; }
.spectr-shorts__reel:focus-visible { outline-offset: -3px; }
.spectr-shorts__nav button, .spectr-shorts__dialog-head button, .spectr-shorts__comments form button { display: inline-grid; place-items: center; padding: 0; width: 42px; height: 42px; border: 1px solid var(--short-border); border-radius: 10px; background: var(--short-panel); }
.spectr-shorts__nav button { background: #120f1a75; border-color: #ffffff30; }
.spectr-shorts__nav button[aria-disabled="true"] { opacity: .42; cursor: default; }
.spectr-shorts__toggle { position: absolute; z-index: 1; display: grid; place-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; border: 1px solid #ffffff44; background: #120b20aa; opacity: 1; transition: opacity .2s ease; }
.spectr-shorts__frame[data-playing] .spectr-shorts__toggle { opacity: 0; }
.spectr-shorts__frame[data-playing] .spectr-shorts__video:hover .spectr-shorts__toggle, .spectr-shorts__frame[data-playing] .spectr-shorts__toggle:focus-visible { opacity: 1; }
.spectr-shorts__info { position: absolute; z-index: 2; left: 19px; right: 92px; bottom: 19px; }
.spectr-shorts__info h2 { font-size: clamp(19px, 2.1vw, 27px); line-height: 1.07; margin: 0 0 7px; letter-spacing: -.03em; }
.spectr-shorts__info p { font-size: 13px; line-height: 1.4; margin: 0 0 7px; color: #f3ebf9; }
.spectr-shorts__info .spectr-shorts__tags { color: #decaff; font-size: 12px; }
.spectr-shorts__info a { color: #d5c9df; text-decoration: underline; font-size: 11px; }
.spectr-shorts__progress { z-index: 2; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #ffffff27; }
.spectr-shorts__progress i { display: block; height: 100%; background: #b995ff; transform-origin: left; transform: scaleX(0); }
.spectr-shorts__actions { position: absolute; z-index: 2; right: 11px; bottom: 15px; display: grid; gap: 8px; }
.spectr-shorts__actions button { display: grid; place-items: center; gap: 3px; width: 66px; min-height: 50px; padding: 4px 0; border: 0; border-radius: 12px; background: transparent; color: #fff; font-size: 10px; font-weight: 650; text-shadow: 0 1px 4px #000, 0 1px 7px #000; }
.spectr-shorts__actions button svg { filter: drop-shadow(0 1px 2px #10071b) drop-shadow(0 1px 3px #10071b); }
.spectr-shorts__actions button:hover { background: #ffffff15; }
.spectr-shorts__actions button[aria-pressed="true"] { color: #ff6a9f; }
.spectr-shorts__actions button[aria-pressed="true"] svg { fill: currentColor; }
.spectr-shorts__actions [data-short-action="like"] svg { transition: transform 150ms ease-out; }
.spectr-shorts__actions [data-short-action="like"][aria-pressed="true"] svg { transform: scale(1.08); }
.spectr-shorts__actions [data-short-action="like"]:active svg { transform: scale(.86); }
.spectr-shorts__dialog-anchor { position: absolute; z-index: 4; inset: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.spectr-shorts__dialog {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: clamp(235px, 54%, 430px);
  max-height: 100%;
  margin: 0;
  padding: 8px clamp(13px, 4vw, 22px) 14px;
  overflow: hidden;
  border: 1px solid var(--short-border);
  border-radius: 20px 20px 0 0;
  background: var(--short-panel);
  color: var(--short-text);
  box-shadow: 0 -10px 35px #0006;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 160ms ease, transform 220ms ease, display 220ms allow-discrete;
}
.spectr-shorts__dialog[open] { display: flex; opacity: 1; transform: none; pointer-events: auto; }
@starting-style {
  .spectr-shorts__dialog[open] { opacity: 0; transform: translateY(100%); }
}
.spectr-shorts__dialog::before { content: ''; flex: none; width: 32px; height: 3px; align-self: center; border-radius: 3px; background: color-mix(in srgb, var(--short-muted) 45%, transparent); }
.spectr-shorts__dialog [hidden] { display: none; }
.spectr-shorts__dialog-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 0 10px; }
.spectr-shorts__dialog-head h2 { font-size: 19px; margin: 0; }
.spectr-shorts__dialog-head button { width: 42px; height: 42px; }
.spectr-shorts__comments { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; }
.spectr-shorts__comment-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.spectr-shorts__comment-empty { margin: 3px 0; font-size: 13px; color: var(--short-muted); }
.spectr-shorts__comment-group { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 7px 0; }
.spectr-shorts__comment-group + .spectr-shorts__comment-group { border-top: 1px solid var(--short-border); }
.spectr-shorts__comment-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--comment-color, var(--short-accent)) 32%, var(--short-panel)); font-size: 10px; font-weight: 700; }
.spectr-shorts__comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spectr-shorts__comment-author { display: block; margin-bottom: 4px; font-size: 12px; overflow-wrap: anywhere; }
.spectr-shorts__comment-entry + .spectr-shorts__comment-entry { margin-top: 5px; }
.spectr-shorts__comment-entry p { margin: 0; font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.spectr-shorts__comment-quote { padding-left: 7px; margin: 2px 0 4px; border-left: 2px solid var(--short-accent); color: var(--short-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spectr-shorts__comment-actions { display: flex; gap: 10px; align-items: center; color: var(--short-muted); }
.spectr-shorts__comment-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 2px 3px; font-size: 11px; }
.spectr-shorts__comment-actions button:hover { color: var(--short-accent); }
.spectr-shorts__comment-actions button[aria-pressed="true"] { color: var(--short-accent); }
.spectr-shorts__comment-actions button[aria-pressed="true"] svg { fill: currentColor; }
.spectr-shorts__comments form { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; padding-top: 8px; border-top: 1px solid var(--short-border); }
.spectr-shorts__reply { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; min-width: 0; padding-left: 8px; border-left: 2px solid var(--short-accent); color: var(--short-muted); font-size: 12px; }
.spectr-shorts__reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spectr-shorts__reply [data-short-action="cancel-reply"] { flex: none; width: 34px; height: 34px; }
.spectr-shorts__comments input, .spectr-shorts__share-link { width: 100%; min-width: 0; }
.spectr-shorts__comments form button { color: var(--short-accent); }
.spectr-shorts__share { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px; }
.spectr-shorts__share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.spectr-shorts__share-link { margin-top: 8px; }
.spectr-shorts__share h3 { font-size: 14px; margin: 0 0 8px; }
.spectr-shorts__recipients { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 12px; padding: 3px; color: var(--short-muted); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.spectr-shorts__recipient { display: grid; flex: 0 0 82px; justify-items: center; gap: 6px; padding: 5px 3px; text-align: center; border-radius: 10px; color: var(--short-text); }
.spectr-shorts__recipient:hover { background: var(--surface-2, #272330); }
.spectr-shorts__recipient:disabled { opacity: .6; cursor: default; }
.spectr-shorts__recipient-name { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
.spectr-shorts__recipient-avatar { display: inline-grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--recipient-color, var(--short-accent)) 35%, var(--short-panel)); color: var(--short-text); font-size: 14px; font-weight: 700; }
.spectr-shorts__external-heading { padding-top: 12px; border-top: 1px solid var(--short-border); }
.spectr-shorts__status { color: var(--short-accent); font-size: 12px; margin: 8px 0 0; }
.spectr-shorts__status:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .spectr-shorts__dialog, .spectr-shorts__toggle, .spectr-shorts__actions [data-short-action="like"] svg { transition: none; }
}
@media (width > 760px) {
  .spectr-shorts {
    --short-stage-height: max(265px, calc(100dvh - var(--header, 67px)));
    --short-gutter: clamp(9px, 2.1dvh, 20px);
    --short-room-height: calc(var(--short-stage-height) - 2 * var(--short-gutter));
    --short-room-width: calc(100cqw - 2 * var(--short-gutter));
    max-width: none;
  }
  .spectr-shorts__layout {
    height: var(--short-stage-height);
    container-type: inline-size;
    isolation: isolate;
    border-radius: 0;
    background: color-mix(in srgb, var(--short-color, #482564) 32%, #0e0c15);
  }
  .spectr-shorts__layout::before, .spectr-shorts__layout::after { position: absolute; content: ''; pointer-events: none; }
  .spectr-shorts__layout::before {
    z-index: -2;
    inset: -12%;
    background: var(--short-poster) center 55% / cover no-repeat;
    filter: blur(50px) saturate(.9);
    opacity: .45;
  }
  .spectr-shorts__layout::after {
    z-index: -1;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%, transparent 18%, #0d0b16b8 92%),
      linear-gradient(0deg, #0e0b16a6, transparent 70%);
  }
  .spectr-shorts__layout, .spectr-shorts__frame {
    --short-media-width: min(var(--short-room-width), calc(var(--short-room-height) * var(--short-aspect, .5625)));
    --short-media-height: min(var(--short-room-height), calc(var(--short-room-width) / var(--short-aspect, .5625)));
  }
  .spectr-shorts__reel { height: 100%; border-radius: 0; }
  .spectr-shorts__frame { display: grid; place-items: center; }
  .spectr-shorts__frame + .spectr-shorts__frame { margin-top: 0; }
  .spectr-shorts__video {
    width: var(--short-media-width);
    height: var(--short-media-height);
    border: 0;
    border-radius: 18px;
    background: #08070c;
    box-shadow: 0 0 0 1px #ffffff21, 0 10px 30px #08051049;
  }
  .spectr-shorts__video video {
    object-fit: contain;
    object-position: center;
  }
  .spectr-shorts__video::after {
    background: linear-gradient(0deg, #08060eea, #08060e99 15%, transparent 38%),
      linear-gradient(180deg, #08060e76, transparent 19%);
  }
  .spectr-shorts__video-top { top: 13px; left: 13px; right: 137px; }
  .spectr-shorts__video-top span {
    min-width: 0;
    padding: 7px 10px;
    overflow: hidden;
    background: #100d18bc;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(12px);
  }
  .spectr-shorts__nav {
    top: calc((var(--short-stage-height) - var(--short-media-height)) / 2 + 13px);
    right: calc((100cqw - var(--short-media-width)) / 2 + 13px);
    gap: 2px;
    padding: 3px;
    border: 1px solid #ffffff36;
    border-radius: 12px;
    background: #100d18bc;
    backdrop-filter: blur(12px);
  }
  .spectr-shorts__nav button { width: 32px; height: 31px; border: 0; border-radius: 8px; background: transparent; }
  .spectr-shorts__nav button:not([aria-disabled="true"]):hover { background: #ffffff24; }
  .spectr-shorts__nav button[data-short-action="mute"] { margin-left: 3px; }
  .spectr-shorts__nav button[data-short-action="mute"]::before {
    position: absolute;
    inset: 8px 38px 8px auto;
    width: 1px;
    content: '';
    background: #ffffff27;
    pointer-events: none;
  }
  .spectr-shorts__info { bottom: 18px; left: 15px; right: 71px; text-shadow: 0 1px 8px #000b; }
  .spectr-shorts__info h2 { font-size: clamp(20px, 2vw, 26px); }
  .spectr-shorts__actions { right: 5px; bottom: 15px; gap: 6px; }
  .spectr-shorts__actions button { width: 61px; font-size: 10px; border-radius: 13px; }
  .spectr-shorts__progress { height: 4px; }
  .spectr-shorts__progress i { background: var(--short-accent); }
  .spectr-shorts__dialog-anchor {
    width: var(--short-media-width);
    height: var(--short-media-height);
    margin: auto;
    border-radius: 18px;
  }
  .spectr-shorts__dialog { width: min(100%, 540px); margin-inline: auto; }
}
@media (width > 760px) and (height <= 560px) {
  .spectr-shorts__video-top { top: 9px; left: 8px; right: 119px; }
  .spectr-shorts__nav {
    top: calc((var(--short-stage-height) - var(--short-media-height)) / 2 + 9px);
    right: calc((100cqw - var(--short-media-width)) / 2 + 8px);
  }
  .spectr-shorts__nav button { width: 27px; height: 28px; }
  .spectr-shorts__nav button[data-short-action="mute"]::before { right: 33px; }
  .spectr-shorts__info { bottom: 13px; left: 9px; right: 51px; }
  .spectr-shorts__info h2 { font-size: 18px; }
  .spectr-shorts__info p { font-size: 11px; }
  .spectr-shorts__actions { right: 2px; bottom: 11px; gap: 4px; }
  .spectr-shorts__actions button { width: 48px; min-height: 39px; font-size: 8px; }
  .spectr-shorts__actions button svg { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
  .spectr-shorts { max-width: none; }
  .spectr-shorts__reel { height: clamp(215px, calc(100dvh - var(--header, 55px) - var(--mobile-nav-space, 66px) - 32px), 780px); }
  .spectr-shorts__info { left: 13px; right: 76px; bottom: 14px; }
  .spectr-shorts__actions { right: 5px; bottom: 11px; gap: 6px; }
  .spectr-shorts__actions button { width: 61px; }
  .spectr-shorts__comments input, .spectr-shorts__share-link { font-size: 16px; }
}