.vc {
  --accent:#17559b;
  --soft:#e8f0fb;
  --ink:#18283b;
  --muted:#526376;
  --surface:#fff;
  margin:0;
  background:#f4f6f9;
  color:var(--ink);
  font:1rem/1.55 system-ui,sans-serif;
}
.vc[data-theme="knh"] {
  --accent:#683994;
  --soft:#f2eafa;
  --ink:#2b2036;
  --muted:#675970;
  background:#f7f4fa;
}
.vc * {
  box-sizing:border-box;
}
.vc [hidden] {
  display:none !important;
}
.vc a {
  color:var(--accent);
  text-underline-offset:.2em;
}
.vc button,.vc input,.vc select {
  font:inherit;
}
.vc button,.vc select,.vc input {
  border:1px solid #738196;
  border-radius:.5rem;
  background:var(--surface);
  color:var(--ink);
  padding:.65rem .8rem;
}
.vc button {
  cursor:pointer;
}
.vc button:hover {
  background:var(--soft);
}
.vc button:disabled {
  cursor:default;
  opacity:.5;
}
.vc :focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
}
.vc .vc-skip {
  position:absolute;
  top:-5rem;
  left:1rem;
  background:white;
  padding:1rem;
  z-index:5;
}
.vc .vc-skip:focus {
  top:1rem;
}
.vc .vc-header,.vc main,.vc footer {
  max-width:88rem;
  margin:auto;
  padding:2rem clamp(1rem,4vw,4rem);
}
.vc .vc-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  border-bottom:1px solid #cdd4de;
}
.vc .vc-brand {
  display:flex;
  align-items:center;
  gap:1rem;
}
.vc #logo {
  max-width:8rem;
  max-height:4rem;
}
.vc .vc-eyebrow {
  color:var(--accent);
  font-size:.75rem;
  font-weight:750;
  letter-spacing:.15em;
  margin:0;
}
.vc h1 {
  font-size:clamp(1.5rem,4vw,2.6rem);
  line-height:1.2;
  margin:.25rem 0;
}
.vc .vc-intro {
  margin:0 0 2rem;
  color:var(--muted);
  max-width:50rem;
}
.vc #controls {
  padding:1.5rem;
  background:var(--surface);
  border:1px solid #d1d9e3;
  border-radius:1rem;
}
.vc .vc-toolbar {
  display:flex;
  gap:1rem;
  align-items:end;
}
.vc label {
  display:block;
  font-weight:650;
  font-size:.9rem;
  margin-bottom:.35rem;
}
.vc .vc-search {
  flex:1;
}
.vc #query {
  width:100%;
  min-width:0;
}
.vc fieldset {
  margin:1.5rem 0 0;
  padding:0;
  border:0;
}
.vc legend {
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.65rem;
}
.vc .vc-categories {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.vc .vc-category {
  display:flex;
  align-items:center;
  gap:.4rem;
  background:var(--soft);
  border-radius:2rem;
  padding:.4rem .75rem;
  margin:0;
}
.vc .vc-category input {
  accent-color:var(--accent);
}
.vc #status {
  margin:1.5rem 0;
  font-weight:650;
}
.vc .vc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
  gap:1.4rem;
}
.vc .vc-card {
  overflow:hidden;
  background:var(--surface);
  border:1px solid #d1d9e3;
  border-radius:.8rem;
  display:flex;
  flex-direction:column;
}
.vc .vc-thumbnail {
  aspect-ratio:16/9;
  background:var(--soft);
  display:grid;
  place-items:center;
  color:var(--muted);
  overflow:hidden;
}
.vc .vc-thumbnail img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.vc .vc-card-body {
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  flex:1;
  align-items:start;
}
.vc h2 {
  font-size:1.1rem;
  line-height:1.45;
  margin:0 0 .75rem;
  overflow-wrap:anywhere;
}
.vc .vc-meta {
  color:var(--muted);
  font-size:.85rem;
  margin:0 0 .7rem;
}
.vc .vc-tags {
  color:var(--accent);
  font-size:.85rem;
  margin:0 0 1rem;
}
.vc .vc-card button {
  margin-top:auto;
  background:var(--accent);
  color:white;
  border-color:var(--accent);
}
.vc #pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin:2rem 0;
}
.vc footer {
  border-top:1px solid #cdd4de;
  display:flex;
  gap:1rem 1.5rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.85rem;
}
.vc footer p {
  flex-basis:100%;
  margin:0;
}
.vc dialog {
  width:min(58rem,calc(100% - 2rem));
  max-height:calc(100dvh - 2rem);
  padding:1rem;
  border:1px solid #738196;
  border-radius:1rem;
  color:var(--ink);
  background:var(--surface);
}
.vc dialog::backdrop {
  background:#101827c9;
}
.vc .vc-dialog-header {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:.8rem;
  margin-bottom:1rem;
}
.vc .vc-player {
  width:100%;
  min-width:200px;
  min-height:200px;
  aspect-ratio:16/9;
  background:var(--soft);
  display:grid;
  place-items:center;
  padding:1rem;
  text-align:center;
}
.vc .vc-player:has(iframe) {
  padding:0;
}
.vc iframe {
  display:block;
  border:0;
  width:100%;
  height:100%;
  min-width:200px;
  min-height:200px;
}
.vc .vc-description {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media(max-width:600px) {
  .vc .vc-header {
    align-items:start;
    flex-direction:column;
  }
  .vc .vc-toolbar {
    flex-direction:column;
    align-items:stretch;
  }
  .vc #controls {
    padding:1rem;
  }
  .vc dialog {
    width:calc(100% - 1rem);
    padding:.75rem;
  }
}

.vc[data-theme="enaxos"] {
  --accent:#00c8ff;
  --soft:#08213d;
  --ink:#f3f7fc;
  --muted:#aebfd2;
  --surface:#04152c;
  --line:rgba(174,191,210,.22);
  background:#020a18;
  font-family:Arial,sans-serif;
}
.vc[data-theme="knh"] {
  --accent:#ff6a25;
  --soft:#211810;
  --ink:#e9e2d8;
  --muted:#b0a99f;
  --surface:#101112;
  --line:#33312d;
  background:#070809;
  font-family:'Courier New',monospace;
}
.vc[data-theme="enaxos"] h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(2rem,5vw,4.1rem);
  letter-spacing:-.04em;
}
.vc[data-theme="knh"] h1 {
  font-family:Impact,'Arial Narrow',sans-serif;
  font-weight:500;
  font-size:clamp(2.2rem,5vw,4.3rem);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.vc[data-theme="enaxos"] .vc-header {
  background:linear-gradient(115deg,#020a18,#071e37);
  border-bottom-color:var(--line);
}
.vc[data-theme="knh"] .vc-header {
  border-bottom-color:var(--accent);
}
.vc:is([data-theme="enaxos"],[data-theme="knh"]) button,
.vc:is([data-theme="enaxos"],[data-theme="knh"]) input,
.vc:is([data-theme="enaxos"],[data-theme="knh"]) select,
.vc:is([data-theme="enaxos"],[data-theme="knh"]) #controls,
.vc:is([data-theme="enaxos"],[data-theme="knh"]) .vc-card,
.vc:is([data-theme="enaxos"],[data-theme="knh"]) dialog {
  border-color:var(--line);
  border-radius:0;
}
.vc:is([data-theme="enaxos"],[data-theme="knh"]) .vc-card button {
  border-color:var(--accent);
  color:var(--ink);
  background:transparent;
}
.vc:is([data-theme="enaxos"],[data-theme="knh"]) .vc-card button:hover {
  color:#020a18;
  background:var(--accent);
}
.vc:is([data-theme="enaxos"],[data-theme="knh"]) input[type="checkbox"] {
  accent-color:var(--accent);
}
.vc:is([data-theme="enaxos"],[data-theme="knh"]) footer {
  border-top-color:var(--line);
}
.vc:is([data-theme="enaxos"],[data-theme="knh"]) .vc-skip {
  color:#020a18;
}
.vc main > h2 {
  margin-top:2rem;
}

.vc .vc-card-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:auto;
}
.vc .vc-watch {
  display:inline-block;
  padding:.65rem .8rem;
  border:1px solid var(--accent);
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.vc .vc-watch:hover {
  background:var(--soft);
}