@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#080c0d;
  --surface:#101719;
  --ink:#f0f1eb;
  --muted:#9ca8a9;
  --cyan:#15e0e4;
  --line:#ffffff24;
  --gutter:clamp(22px,5.5vw,96px);
  font-family:Arial,Helvetica,sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:22px
}
body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default
}
img {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
a,button,input,select,summary {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:5px
}
a:hover {
  color:var(--cyan)
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:-80px;
  left:16px;
  padding:12px 20px;
  background:var(--cyan);
  color:#080c0d;
  z-index:100
}
.skip-link:focus {
  top:12px
}
.preview-banner {
  padding:10px var(--gutter);
  font-size:12px;
  text-align:center;
  background:#173b3d;
  color:#c9ffff;
  border-bottom:1px solid #42d9df55
}
.site-header {
  height:94px;
  border-bottom:1px solid var(--line);
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.wordmark {
  display:inline-flex;
  align-items:center;
  font-size:24px;
  letter-spacing:-1.5px;
  font-weight:900;
  line-height:1
}
.wordmark>span:first-child {
  color:var(--cyan)
}
.brand-star {
  color:var(--cyan);
  width:24px;
  height:24px;
  margin-left:12px;
  flex:none;
}
.site-header nav {
  display:flex;
  gap:32px;
  font-size:12px;
  color:#b9c3c3
}
.site-header nav a {
  padding:12px 0
}
.header-channel {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  border:1px solid #5b6667;
  border-radius:4px;
  padding:11px 15px
}
.youtube-icon {
  display:inline-grid;
  place-items:center;
  width:21px;
  height:15px;
  border-radius:4px;
  background:var(--cyan);
  color:var(--bg);
  font-size:9px
}
.hero {
  position:relative;
  min-height:760px;
  display:grid;
  grid-template-columns:1.18fr 1fr;
  align-items:center;
  padding:82px var(--gutter) 110px;
  isolation:isolate;
  overflow:hidden;
  border-bottom:1px solid var(--line)
}
.hero-grid {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#080c0d 7%,transparent 90%),linear-gradient(#080c0d11,#080c0d 100%),repeating-linear-gradient(0deg,transparent 0 71px,#21d3d909 72px),repeating-linear-gradient(90deg,transparent 0 71px,#21d3d909 72px)
}
.hero-content {
  z-index:2;
  position:relative
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:25px
}
.signal {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px #15e0e477;
  flex:none
}
.hero h1 {
  font-size:clamp(55px,6.1vw,100px);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.067em;
  max-width:850px
}
.hero h1 em {
  font-style:normal;
  color:var(--cyan)
}
.hero-copy {
  font-size:16px;
  line-height:1.75;
  color:#aebaba;
  margin-top:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  border:0;
  border-radius:3px;
  padding:16px 22px;
  min-height:52px;
  font-size:12px;
  font-weight:700;
  transition:transform .2s,background-color .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-cyan {
  background:var(--cyan);
  color:var(--bg)
}
.button-cyan:hover {
  background:#83ffff;
  color:var(--bg)
}
.button-dark {
  background:var(--bg);
  color:var(--ink)
}
.button-dark:hover {
  background:#1c2e30;
  color:#fff
}
.button-outline {
  border:1px solid #687677;
  background:none
}
.button-outline:hover {
  background:#15292a
}
.underlink {
  font-size:12px;
  border-bottom:1px solid #839494;
  padding-bottom:7px;
  display:inline-flex;
  align-items:center;
  gap:20px;
  width:fit-content
}
.underlink>span {
  color:var(--cyan)
}
.hero-stats {
  display:flex;
  gap:38px;
  margin:42px 0 0;
  padding-top:23px;
  border-top:1px solid var(--line);
  max-width:570px
}
.hero-stats>div+div {
  padding-left:34px;
  border-left:1px solid var(--line)
}
.hero-stats dt {
  font-size:27px;
  font-weight:700;
  letter-spacing:-1px;
  line-height:1.15
}
.hero-stats dd {
  font-size:9px;
  color:var(--muted);
  margin:8px 0 0;
  text-transform:uppercase;
  letter-spacing:.08em
}
.hero-stats .stats-manifesto dt {
  font-size:23px;
  color:var(--cyan)
}
.data-note {
  color:#8c9c9d;
  font-size:10px;
  margin-top:14px
}
.hero-visual {
  position:relative;
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:-10px
}
.hero-logo {
  width:100%;
  max-width:570px;
  height:auto;
  position:relative;
  mix-blend-mode:screen;
  z-index:1
}
.orbit {
  position:absolute;
  inset:7% -8%;
  border:1px solid #21e5e221;
  border-radius:50%;
  transform:rotate(-30deg);
  z-index:-1
}
.orbit-two {
  inset:16% -18%;
  transform:rotate(30deg);
  border-color:#21e5e214
}
.hero-visual:before {
  content:"";
  position:absolute;
  inset:10%;
  background:radial-gradient(ellipse,#00d4d81a,transparent 70%);
  z-index:-1
}
.art-coordinate,.art-caption {
  font:9px monospace;
  letter-spacing:.14em;
  color:#6e9193;
  position:absolute
}
.art-coordinate {
  right:0;
  top:0
}
.art-caption {
  bottom:0;
  right:0;
  display:flex;
  gap:36px
}
.art-caption span {
  color:var(--cyan)
}
.hero-scroll {
  position:absolute;
  bottom:27px;
  left:var(--gutter);
  display:flex;
  gap:15px;
  align-items:center;
  font-size:9px;
  letter-spacing:.12em;
  color:var(--muted)
}
.hero-scroll span {
  color:var(--cyan);
  font-size:20px
}
.frequency-strip {
  background:var(--cyan);
  color:var(--bg);
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:26px;
  padding:20px 24px;
  overflow:hidden;
  white-space:nowrap
}
.frequency-strip span {
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em
}
.frequency-strip i {
  font-size:22px;
  font-style:normal;
  line-height:1
}
.section {
  padding:92px var(--gutter)
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:42px
}
.section-heading .eyebrow {
  margin-bottom:18px
}
.section h2,.about-section h2 {
  font-size:clamp(38px,4.1vw,66px);
  line-height:1.04;
  letter-spacing:-.055em;
  font-weight:700
}
.section h2 em,.about-section h2 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--cyan)
}
.section-aside {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  text-align:right
}
.video-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px 24px
}
.video-card {
  min-width:0
}
.card-art {
  aspect-ratio:16/9;
  position:relative;
  display:block;
  overflow:hidden;
  background:#142326;
  border:1px solid #ffffff12;
  border-radius:3px
}
.card-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s,filter .45s;
  filter:saturate(.85)
}
.card-art:hover img {
  transform:scale(1.04);
  filter:saturate(1.1)
}
.card-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 58%,#0009)
}
.card-play {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:1;
  opacity:0;
  transition:opacity .2s
}
.card-play span {
  display:grid;
  place-items:center;
  border:1px solid #ffffff99;
  border-radius:50%;
  width:48px;
  height:48px;
  background:#07101099;
  backdrop-filter:blur(4px);
  font-size:13px
}
.card-art:hover .card-play,.card-art:focus-visible .card-play {
  opacity:1
}
.duration {
  position:absolute;
  bottom:10px;
  right:10px;
  background:#030909b8;
  color:#fff;
  padding:2px 5px;
  font:10px monospace;
  z-index:2
}
.card-rank {
  position:absolute;
  top:10px;
  left:12px;
  font:11px monospace;
  color:#fff;
  z-index:2;
  background:#031112a6;
  padding:4px 7px
}
.card-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 7px;
  font-size:9px;
  letter-spacing:.065em;
  text-transform:uppercase;
  color:var(--muted)
}
.card-meta>span:first-child {
  color:var(--cyan)
}
.video-card h3 {
  font-size:17px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.02em
}
.video-card h3 a {
  display:block
}
.section-bottom-link {
  margin-top:38px
}
.player-section {
  background:#111b1d;
  border-block:1px solid var(--line)
}
.player-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:baseline;
  margin-bottom:24px
}
.player-heading .eyebrow {
  margin:0
}
.small-label {
  font:9px monospace;
  letter-spacing:.12em;
  color:#84989a
}
.player-layout {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:45px;
  align-items:center
}
.video-frame {
  position:relative;
  aspect-ratio:16/9;
  background:#050809;
  box-shadow:0 20px 50px #0003;
  border:1px solid #41656a
}
.video-frame iframe {
  width:100%;
  height:100%;
  border:0;
  position:absolute;
  inset:0
}
.player-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  background:radial-gradient(ellipse at 50% 0%,#164446,#070d0e 75%);
  padding:30px;
  text-align:center
}
.player-placeholder img {
  width:130px;
  mix-blend-mode:screen
}
.player-placeholder p {
  font-size:12px;
  color:#9bb2b3
}
.player-info h2 {
  font-size:clamp(25px,2.6vw,43px);
  line-height:1.08;
  overflow-wrap:anywhere
}
.player-info>p:not(.eyebrow) {
  font-size:12px;
  line-height:1.8;
  color:#aab9ba;
  margin-top:18px
}
.player-info .eyebrow {
  color:var(--cyan);
  margin-bottom:15px
}
.player-tags {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:22px 0
}
.player-tags span {
  font:10px monospace;
  padding:5px 8px;
  border:1px solid #ffffff2a;
  color:#b2c5c6;
  border-radius:2px
}
.subscribe-link {
  display:block;
  width:fit-content;
  margin-top:23px;
  font-size:11px;
  color:#9bb2b3
}
.latest {
  border-bottom:1px solid var(--line)
}
.latest .section-heading {
  align-items:center
}
.discover {
  background:#0b1112
}
.catalogue-controls {
  display:flex;
  justify-content:space-between;
  gap:28px;
  margin:35px 0 22px
}
.search-field {
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid #657475;
  width:min(480px,100%)
}
.search-field>span:first-child {
  font-size:25px;
  color:var(--cyan)
}
.search-field input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--ink);
  padding:13px 0;
  font-size:13px;
  border-radius:0
}
.search-field input::placeholder {
  color:#94a2a3;
  opacity:1
}
.sort-field {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:11px;
  color:var(--muted)
}
.sort-field select {
  -webkit-appearance:none;
  appearance:none;
  -webkit-text-fill-color:#0b1516;
  color-scheme:light;
  padding:12px 30px 12px 12px;
  background:#e9eae3;
  border:1px solid var(--line);
  color:#0b1516;
  border-radius:3px;
  max-width:100%
}
.genre-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 27px
}
.genre-filters button {
  padding:10px 16px;
  min-height:42px;
  border:1px solid #ffffff30;
  border-radius:3px;
  background:transparent;
  font-size:10px;
  color:#b2c1c2;
  transition:background .2s,color .2s
}
.genre-filters button[aria-pressed=true] {
  background:var(--cyan);
  color:#061416;
  border-color:var(--cyan)
}
.genre-filters button:hover {
  border-color:var(--cyan)
}
.catalogue-status {
  border-top:1px solid var(--line);
  padding:17px 0 24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.catalogue-status p {
  font-size:11px;
  color:#a2b0b1
}
.load-more-wrap {
  text-align:center;
  margin-top:40px
}
.empty-state,.no-script {
  padding:25px 0;
  color:var(--muted);
  font-size:13px
}
.no-script a {
  text-decoration:underline
}
.about-section {
  padding:90px var(--gutter);
  background:#e9eae3;
  color:#0b1516
}
.about-section .eyebrow {
  color:#546365
}
.about-layout {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:70px
}
.about-section h2 em {
  color:#14868c
}
.about-copy {
  font-size:14px;
  line-height:1.85;
  color:#46595b;
  max-width:490px
}
.about-copy p+p {
  margin-top:18px
}
.about-copy .underlink {
  margin-top:25px;
  color:#0b1516;
  border-color:#4a6366
}
.about-copy .underlink span {
  color:#14868c
}
.join-section {
  padding:65px var(--gutter);
  background:var(--cyan);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.join-section .eyebrow {
  color:#194648;
  margin-bottom:17px
}
.join-section h2 {
  font-size:clamp(32px,4.4vw,72px);
  line-height:1;
  letter-spacing:-.065em
}
.join-section h2 em {
  font-style:normal
}
.join-section .button {
  flex:none
}
footer {
  padding:40px var(--gutter) 20px
}
.footer-top {
  display:flex;
  align-items:center;
  gap:32px;
  padding-bottom:32px;
  font-size:11px
}
.footer-top p {
  flex:1;
  color:var(--muted)
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:22px;
  font-size:10px;
  color:#91a1a3
}
.footer-bottom>span {
  font:9px monospace;
  letter-spacing:.12em
}
.privacy {
  margin-top:25px;
  border-top:1px solid #ffffff12;
  padding-top:15px;
  font-size:10px;
  color:#91a1a3
}
.privacy summary {
  cursor:pointer;
  min-height:35px;
  padding-top:5px;
  width:fit-content
}
.privacy>div {
  max-width:850px;
  line-height:1.8
}
.privacy p {
  margin:10px 0
}
.privacy a {
  text-decoration:underline
}
.empty-card {
  color:var(--muted);
  font-size:14px;
  grid-column:1/-1;
  padding:30px 0
}
.no-script {
  margin-bottom:10px
}
@media(min-width:1600px) {
  .hero {
    min-height:850px
  }
  .hero h1 {
    font-size:110px
  }
  .hero-logo {
    max-width:640px
  }
  .hero-copy {
    font-size:18px
  }
}
@media(max-width:1100px) {
  .hero {
    grid-template-columns:1.3fr 1fr;
    min-height:680px;
    padding-top:65px
  }
  .hero-stats {
    gap:22px
  }
  .hero-stats>div+div {
    padding-left:20px
  }
  .hero-stats dt {
    font-size:23px
  }
  .hero-stats .stats-manifesto dt {
    font-size:19px
  }
  .hero-actions {
    gap:20px
  }
  .hero h1 {
    font-size:clamp(52px,6.7vw,80px)
  }
  .hero-logo {
    width:115%;
    max-width:none
  }
  .hero-visual {
    margin-right:-30px
  }
  .section {
    padding-block:74px
  }
  .player-layout {
    gap:28px;
    grid-template-columns:1.5fr 1fr
  }
  .frequency-strip {
    justify-content:flex-start
  }
  .frequency-strip span {
    font-size:11px
  }
  .about-layout {
    gap:40px
  }
  .video-card h3 {
    font-size:15px
  }
  .join-section {
    flex-wrap:wrap
  }
}
@media(max-width:780px) {
  .site-header {
    height:78px
  }
  .site-header nav {
    gap:20px;
    font-size:11px
  }
  .wordmark {
    font-size:21px
  }
  .hero {
    padding-top:52px;
    grid-template-columns:1fr;
    min-height:auto;
    padding-bottom:90px
  }
  .hero-content {
    max-width:660px
  }
  .hero h1 {
    font-size:clamp(60px,10vw,80px)
  }
  .hero-visual {
    position:absolute;
    width:46%;
    right:-30px;
    top:110px;
    opacity:.2;
    margin:0;
    z-index:-1
  }
  .hero-logo {
    width:100%
  }
  .art-caption,.art-coordinate,.orbit {
    display:none
  }
  .hero-stats {
    max-width:530px
  }
  .hero-copy {
    font-size:15px
  }
  .hero-actions {
    margin-top:28px
  }
  .hero-stats {
    margin-top:34px
  }
  .video-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 18px
  }
  .player-layout {
    grid-template-columns:1fr
  }
  .player-info h2 {
    max-width:650px;
    font-size:32px
  }
  .player-info>p:not(.eyebrow) {
    max-width:640px
  }
  .player-heading>.small-label {
    display:none
  }
  .section-heading {
    align-items:flex-start
  }
  .section-aside {
    max-width:170px
  }
  .section {
    padding-block:65px
  }
  .about-section {
    padding-block:65px
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .about-copy {
    max-width:610px
  }
  .join-section {
    padding-block:48px
  }
  .footer-top {
    gap:25px;
    flex-wrap:wrap
  }
  .footer-top p {
    min-width:40%
  }
  .footer-bottom>span {
    display:none
  }
  .catalogue-controls {
    gap:20px
  }
  .sort-field {
    gap:8px;
    flex-shrink:0
  }
  .sort-field>span {
    display:none
  }
}
@media(max-width:500px) {
  .site-header {
    gap:10px
  }
  .site-header nav {
    display:none
  }
  .header-channel {
    padding:10px 12px
  }
  .hero {
    padding-top:45px
  }
  .hero h1 {
    font-size:clamp(43px,11.2vw,61px)
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.1em
  }
  .hero-visual {
    width:67%;
    right:-60px;
    top:70px;
    opacity:.14
  }
  .hero-copy {
    font-size:14px
  }
  .hero-actions {
    gap:20px;
    flex-wrap:wrap
  }
  .button {
    gap:18px
  }
  .hero-actions .underlink {
    font-size:11px
  }
  .hero-stats {
    gap:20px;
    justify-content:space-between
  }
  .hero-stats>div+div {
    padding-left:15px
  }
  .hero-stats dt {
    font-size:24px
  }
  .hero-stats dd {
    font-size:8px;
    letter-spacing:0
  }
  .hero-stats .stats-manifesto {
    display:none
  }
  .hero-scroll {
    font-size:8px
  }
  .frequency-strip {
    padding-block:17px
  }
  .section h2,.about-section h2 {
    font-size:39px
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-aside {
    text-align:left;
    margin-top:20px;
    max-width:none
  }
  .section-aside br {
    display:none
  }
  .video-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .popular-grid .video-card:nth-child(n+7) {
    display:none
  }
  .video-card h3 {
    font-size:17px
  }
  .card-play {
    opacity:1
  }
  .card-play span {
    width:40px;
    height:40px;
    font-size:11px
  }
  .card-meta {
    font-size:10px
  }
  .latest .section-heading .underlink {
    margin-top:24px
  }
  .catalogue-controls {
    display:block
  }
  .search-field {
    width:100%
  }
  .sort-field {
    justify-content:flex-end;
    margin-top:20px
  }
  .sort-field>span {
    display:block
  }
  .genre-filters {
    gap:7px
  }
  .genre-filters button {
    font-size:10px;
    padding:9px 12px
  }
  .catalogue-status>.small-label {
    display:none
  }
  .player-info h2 {
    font-size:30px
  }
  .player-heading .eyebrow {
    font-size:9px
  }
  .player-placeholder img {
    width:90px
  }
  .player-placeholder {
    gap:6px;
    padding:20px
  }
  .player-placeholder p {
    font-size:10px
  }
  .join-section h2 {
    font-size:37px
  }
  .join-section .button {
    width:100%
  }
  .footer-top p {
    order:3;
    flex-basis:100%
  }
  .footer-top {
    justify-content:space-between
  }
  .preview-banner {
    font-size:10px
  }
  .data-note {
    max-width:260px;
    line-height:1.6
  }
  .underlink {
    min-height:32px
  }
  .hero-stats .stats-manifesto dt {
    font-size:18px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}
@media(max-width:780px) {
  .search-field input,.sort-field select {
    font-size:16px
  }
}

.frequency-strip svg {
  flex:none;
}