@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Karantina:wght@300;400;700&display=swap');


:root{
  --background:#edfaee;
  --surface:#edfaee;
  --surface-container:#dcecdf;
  --surface-container-low:#e6f5e8;
  --surface-container-high:#d6e7d8;
  --surface-container-highest:#cfe2d2;
  --surface-container-lowest:#ffffff;
  --primary:#705900;
  --primary-dim:#624d00;
  --primary-container:#fdd34d;
  --primary-fixed:#fdd34d;
  --secondary:#04647d;
  --secondary-dim:#00576e;
  --secondary-container:#9ae1ff;
  --tertiary:#785246;
  --tertiary-container:#ffccbc;
  --on-surface:#263129;
  --on-surface-variant:#525e55;
  --outline:#6e7a70;
  --outline-variant:#a4b0a5;
  --on-primary:#fff2d4;
  --on-primary-container:#5c4900;
  --on-secondary:#e3f6ff;
  --on-secondary-container:#005267;
  --mint-shadow:0 32px 64px -20px rgba(38,49,41,.12);
  --mint-shadow-soft:0 18px 44px -24px rgba(38,49,41,.18);
  --card-shadow:0 24px 48px -24px rgba(38,49,41,.12);
  --glass:rgba(255,255,255,.40);
  --radius-sm:1rem;
  --radius-md:2rem;
  --radius-lg:3rem;
  --radius-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body {
    min-height: 100vh;
    font-family: "Heebo",Arial,Helvetica,sans-serif;
    background: radial-gradient(circle at top right, rgb(16 16 16), transparent 28%), radial-gradient(circle at bottom left, rgb(41 41 41), transparent 30%), #1e1343;
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{font-family:inherit}
body.app-shell{overflow-x:hidden}
body.menu-open{overflow:hidden}
body.menu-open .side-menu{transform:translateX(0)}
body.menu-open .menu-backdrop{opacity:1;pointer-events:auto}

.mobile-app-frame{
  width:min(100%,1440px);
  margin:0 auto;
  min-height:100vh;
}
.page-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 0px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 32%);
}
a.top-menu-item {
    color: #ffffffad;
    font-size: 14px;
    padding-right: 40px;
}

a.top-menu-item:hover {
    color: #fff;
}
.top-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.topbar-side,.topbar-actions,.brand{display:flex;align-items:center;gap:14px;     padding-right: 0px;}
.brand {
    background: transparent;
	
}
.brand-logo,.brand-badge{
  width:52px;height:52px;border-radius:20px;flex:0 0 auto;
}
.brand-logo {
    object-fit: contain;
    background: transparent;
    padding: 0px;
    width: 100%;
}
.brand-badge{
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-container));
  color:var(--on-primary);font-weight:900;letter-spacing:-.03rem;
}
.brand-text{
  font-size:1.18rem;
  font-weight:900;
  color:var(--primary);
  letter-spacing:-.03rem;
}

.menu-toggle, .icon-btn, .menu-close {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 5px;
    background: rgba(164,176,165,.16);
    box-shadow: var(--mint-shadow-soft);
    color: #a7a7a7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.menu-toggle:hover,.icon-btn:hover,.menu-close:hover,
.pill-btn:hover,.secondary-btn:hover,.primary-btn:hover,
.bottom-nav a:hover,.media-card:hover,.floating-chip:hover,
.admin-sidebar a:hover,.admin-table tbody tr:hover,
.avatar-card:hover,.category-card:hover,.production-card:hover{transform:translateY(-2px)}
.menu-toggle:active,.icon-btn:active,.menu-close:active,
.pill-btn:active,.secondary-btn:active,.primary-btn:active,
.bottom-nav a:active{transform:scale(.95)}
.menu-toggle span{
  display:block;width:22px;height:2.5px;background:var(--secondary);border-radius:999px;
}
.menu-toggle span+span{margin-top:5px}

.icon-btn{font-size:1.2rem;font-weight:800}
.header-search {
    min-width: min(32vw,360px);
    background: rgb(255 255 255 / 8%);
    border-radius: 30px;
    padding: 2px 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ffffff21;
}
.header-search input{
  min-height:50px;border:none;background:transparent;padding:0 10px;outline:none;
}
.header-search button {
    min-width: 50px;
    min-height: 50px;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: #ffffffc9;
    font-weight: 900;
    cursor: pointer;
}

.pill-btn,.secondary-btn,.primary-btn{
  min-height:56px;padding:0 22px;border:none;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;letter-spacing:-.01rem;cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.pill-btn, .secondary-btn {
    background: rgb(0 0 0 / 58%);
    color: #ffffff9e;
    box-shadow: var(--mint-shadow-soft);
}
.primary-btn {
    background: #47bd00;
    color: var(--on-primary);
}
.primary-btn.light{
  color:var(--on-primary-container);
}
.secondary-btn.glass{
  background:rgba(255,255,255,.20);
  color:#fff;
  backdrop-filter:blur(20px);
}

.flash{
  padding:16px 18px;border-radius:24px;margin-bottom:12px;font-weight:800;
  box-shadow:var(--mint-shadow-soft);
}
.flash.success{background:#f3fff7;color:#196949}
.flash.error{background:#fff2f1;color:#a5300e}

.hero,.media-card,.panel,.auth-card,.empty-state,.stats-grid article,.floating-banner,.admin-card,.admin-table-wrap,
.avatar-card,.category-card,.production-card,.playlist-panel,.floating-player-card{
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
}
.hero,.panel,.stats-grid article,.media-card,.auth-card,.empty-state,.admin-card,.admin-table-wrap,
.avatar-card,.category-card,.production-card,.playlist-panel,.floating-player-card{
  border:1px solid rgba(164,176,165,.15);
}

.hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 24px;
    padding: 34px;
    grid-auto-flow: row;
    height: 400px;
    border: 0;
    border-radius: 50px;
    width: 70%;
}
.hero::before{
  content:"";
  position:absolute;inset:auto auto 16px 18px;
  width:140px;height:140px;border-radius:50%;
  background:rgba(154,225,255,.18);
  filter:blur(10px);
}
.hero::after {
    content: "";
    /* position: absolute; */
    /* top: -36px; */
    /* left: 18%; */
    /* width: 220px; */
    /* height: 220px; */
    /* border-radius: 38%; */
    /* transform: rotate(12deg); */
}
.hero-copy,.hero-art{position:relative;z-index:1}
.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
}
.eyebrow, .label-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: #000000;
    color: var(--on-primary-container);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 14px !important;
}
.hero h1{margin:14px 0 10px;font-size:clamp(2.1rem,5vw,4rem);line-height:.96;letter-spacing:-.04rem}
.hero p {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.25;
    max-width: 720px;
}
.hero-side {
    width: 29%;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-art {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    z-index: 0;
}
.hero-card,.floating-banner{
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.38);
}
.hero-card{
  width:min(100%,360px);min-height:280px;
  border-radius:38px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--primary);font-size:2.4rem;font-weight:900;
  transform:rotate(-2deg);
}
.hero-card strong{font-size:4rem;line-height:1}
.hero-card small{font-size:1rem;color:var(--on-surface-variant)}
.hero-image {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 0px 0px 50px 50px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 50px -28px rgba(38,49,41,.32);
}
.hero-image.tilt-alt{transform:rotate(-1.3deg)}
.bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.42)}
.bubble.big{width:180px;height:180px;top:12px;right:10px}
.bubble.small{width:92px;height:92px;left:32px;bottom:26px}
.floating-banner{
  position:absolute;left:18px;bottom:18px;
  padding:14px 18px;border-radius:28px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--mint-shadow-soft);
}
.floating-banner strong{display:block;font-size:1rem}
.floating-banner span{font-size:.85rem;color:var(--on-surface-variant)}

.chip-row,.chips-scroll,.quick-filters{display:flex;gap:10px;flex-wrap:wrap}
.chips-scroll{overflow:auto hidden;padding-bottom:4px}
.floating-chip, .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 15px;
    border-radius: var(--radius-pill);
    background: var(--surface-container-high);
    color: var(--secondary);
    font-weight: 600;
    white-space: nowrap;
    transition: transform .18s var(--ease), background .22s var(--ease), color .22s var(--ease);
    font-size: 14px;
}
.floating-chip.is-active,.chip{
  background:var(--primary-container);color:var(--on-primary-container);
}
span.top-four-line {
    color: #999;
    font-size: 12px;
    margin-bottom: 15px;
}
.chip.alt{background:var(--secondary-container);color:var(--on-secondary-container)}
.chip-character{background:var(--tertiary-container);color:var(--tertiary)}

.section-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-inline:4px;
}
.section-head h1, .section-head h2 {
    margin: 0;
    font-size: clamp(1.35rem,3vw,2rem);
    letter-spacing: -.03rem;
    color: rgba(38,49,41,.28);
}.section-head a{font-weight:800;color:var(--secondary)}

.stats-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.stats-grid article{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.94));
  padding:22px;text-align:right;position:relative;overflow:hidden;
}
.stats-grid article:nth-child(2n){transform:rotate(.8deg)}
.stats-grid article:nth-child(2n+1){transform:rotate(-.7deg)}
.stats-grid strong{display:block;font-size:2rem;line-height:1;margin-bottom:8px;color:var(--primary)}
.stats-grid span{display:block;color:var(--on-surface-variant);font-weight:700}

.panel,.auth-card,.empty-state,.media-card,.admin-card,.admin-table-wrap,.avatar-card,.category-card,.production-card,.playlist-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.97));
}
.panel{padding:24px}
.panel.soft{background:linear-gradient(180deg,var(--surface-container-low),rgba(255,255,255,.84))}
.panel h3,.panel h2,.panel h1{margin-top:0;letter-spacing:-.02rem}

.search-panel {
    display: grid;
    gap: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(230,245,232,.92));
    margin-top: 125px;
}
.search-input-shell{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-container-lowest);
  border-radius:999px;padding:8px;box-shadow:var(--mint-shadow-soft);
}
.search-input-shell input{
  min-height:60px;border:none;background:transparent;padding:0 16px;font-size:1.1rem;outline:none;
}
.search-input-shell button{
  min-width:60px;min-height:60px;border:none;border-radius:20px;
  background:linear-gradient(135deg,var(--primary),var(--primary-container));cursor:pointer;
  color:var(--on-primary-container);font-size:1.25rem;font-weight:900;
}

.card-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
}
.card-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.media-card{
  display:block;padding:14px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.media-card:nth-child(3n+1){transform:rotate(-1deg)}
.media-card:nth-child(3n+2){transform:rotate(.8deg)}
.media-card:nth-child(3n){transform:rotate(-.35deg)}
.media-card:hover{box-shadow:0 34px 64px -34px rgba(38,49,41,.26)}
.thumb {
    position: relative;
    overflow: hidden;
    height: 350px;
    border-radius: 32px;
    background: linear-gradient(135deg,var(--secondary),var(--secondary-container));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 900;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.category-strip {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
}
.thumb::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.26));
}
.thumb::after{
  content:"▶";
  position:absolute;left:18px;bottom:16px;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.82);
  color:var(--primary);
  font-size:1.25rem;font-weight:900;
  box-shadow:0 18px 28px -18px rgba(38,49,41,.42);
  transition:transform .18s var(--ease);
}
.media-card:hover .thumb::after{transform:scale(1.08)}
.image-thumb{color:transparent}
.gradient-thumb{background:linear-gradient(135deg,var(--secondary),#4cc0ff)}
.media-body{padding:16px 8px 8px}
.media-body h3{margin:0 0 10px;font-size:1.12rem;line-height:1.35;letter-spacing:-.02rem}
.media-body p{margin:0;color:var(--on-surface-variant);line-height:1.6}
.media-body small{display:block;margin-top:10px;color:var(--secondary);font-weight:700}
.meta-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}

.rounded-section-grid,
.category-grid,
.production-grid{
  display:grid;
  gap:18px;
}
.rounded-section-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.production-grid {
    grid-template-columns: repeat(13,minmax(0,1fr));
}

.avatar-card,
.category-card,
.production-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:18px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.avatar-card:nth-child(2n){transform:rotate(.85deg)}
.avatar-card:nth-child(2n+1){transform:rotate(-.85deg)}
.category-card:nth-child(2n){transform:rotate(.55deg)}
.category-card:nth-child(2n+1){transform:rotate(-.55deg)}
.production-card:nth-child(2n){transform:rotate(.7deg)}
.production-card:nth-child(2n+1){transform:rotate(-.7deg)}

.avatar-visual{
  width:112px;
  height:112px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,var(--secondary),var(--secondary-container));
  box-shadow:0 18px 32px -22px rgba(38,49,41,.34);
  border:6px solid rgba(255,255,255,.76);
  display:grid;
  place-items:center;
  font-size:2rem;
  font-weight:900;
  color:#fff;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.avatar-name,
.category-name,
.production-name{
  font-size:1.02rem;
  font-weight:900;
  text-align:center;
  line-height:1.35;
  letter-spacing:-.02rem;
}
.avatar-subtitle,
.category-subtitle,
.production-subtitle{
  color:var(--on-surface-variant);
  font-size:.92rem;
  line-height:1.5;
  text-align:center;
}
.category-icon{
  width:84px;
  height:84px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary-container),#fff4bf);
  color:var(--on-primary-container);
  font-size:1.8rem;
  font-weight:900;
}
.production-logo {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: transparent;
    padding: 0;
    border-radius: 100px;
}
a.production-card.reveal.in-view {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.production-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: 0;
    border-radius: 100px;
}
.production-logo-fallback{
  font-size:1.7rem;
  font-weight:900;
  color:var(--secondary);
}

input,select,textarea{
  width:100%;
  min-height:54px;
  border:1px solid rgba(164,176,165,.18);
  border-radius:22px;
  padding:14px 16px;
  background:var(--surface-container-lowest);
  color:var(--on-surface);
  outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(253,211,77,.76);
  box-shadow:0 0 0 4px rgba(253,211,77,.20);
}
textarea{min-height:140px;resize:vertical}
label{display:grid;gap:8px;font-weight:800;color:var(--on-surface)}
label small,.field-help,small{color:var(--on-surface-variant)}

.filters-form,.admin-form{display:grid;gap:16px}
.admin-grid{display:grid;gap:16px}
.admin-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.checkbox-inline{display:flex;align-items:center;gap:10px}
.checkbox-inline input{width:22px;min-height:22px;height:22px}
.with-margin{margin-top:22px}

.video-page {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr);
    gap: 20px;
    align-items: start;
    margin-top: 125px;
}
.app-player-card{padding:14px;background:transparent;border:none;box-shadow:none}
.player-shell{display:grid;gap:16px}
.player-inline-slot{width:100%}
.native-player{
  position:relative;overflow:hidden;border-radius:42px;background:#000;aspect-ratio:16/9;
  box-shadow:0 34px 60px -30px rgba(38,49,41,.34);
}
.native-player-video,
.native-player iframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;border:0;
}
.native-player-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:26px;z-index:3;transition:opacity .25s ease,visibility .25s ease;
}
.native-player-overlay:not(.is-visible){opacity:0;visibility:hidden;pointer-events:none}
.native-player-poster{position:absolute;inset:0;background-size:cover;background-position:center}
.native-player-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,100,125,.06),rgba(0,0,0,.12) 35%,rgba(0,0,0,.76))}
.native-copy{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;color:#fff;max-width:72%;
}
.native-copy strong{font-size:clamp(1.2rem,3vw,2rem);line-height:1.1;letter-spacing:-.03rem}
.native-copy small{font-size:.95rem;opacity:.92;color:#fff}
.native-badge{
  display:inline-flex;align-items:center;width:max-content;min-height:38px;padding:0 14px;
  border-radius:999px;background:rgba(255,241,168,.96);color:var(--on-primary-container);font-weight:900;font-size:.8rem;
}
.native-big-play,.player-control,.playlist-toggle,.floating-mini-btn{
  border:none;cursor:pointer;transition:transform .18s var(--ease), background .22s var(--ease);
}
.native-big-play,.player-control{
  border-radius:999px;
}
.native-big-play{
  position:relative;z-index:2;width:96px;height:96px;
  background:linear-gradient(135deg,#fff,var(--primary-container));color:var(--primary);
  font-size:2rem;font-weight:900;
  box-shadow:0 26px 42px -24px rgba(38,49,41,.28);
}
.native-big-play:active,.player-control:active,.playlist-toggle:active,.floating-mini-btn:active{transform:scale(.95)}
.play-icon{position:relative;left:2px}
.native-player-controls{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:4;
  display:flex;align-items:center;gap:10px;padding:12px;
  border-radius:999px;background:rgba(253,253,253,.22);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
}
.player-control{
  width:44px;height:44px;background:#fff;color:var(--primary);font-size:1rem;font-weight:900;flex:0 0 auto;
}
.native-progress{
  height:12px;flex:1;background:rgba(255,255,255,.24);border-radius:999px;overflow:hidden;position:relative;cursor:pointer
}
.native-progress.is-static{cursor:default}
.native-progress-bar{height:100%;width:0%;background:var(--secondary);border-radius:999px;transition:width .15s linear}
.native-time{color:#fff;font-weight:800;font-size:.84rem;white-space:nowrap;min-width:90px;text-align:center}
.video-meta{
  position:sticky;top:100px;
}
.video-meta h1{margin:12px 0;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.03rem}
.like-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.playlist-panel{
  padding:18px 18px 10px;
}
.playlist-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;
}
.playlist-head strong{
  display:block;font-size:1rem;letter-spacing:-.02rem;
}
.playlist-head span{
  display:block;color:var(--on-surface-variant);font-size:.88rem;margin-top:4px;
}
.playlist-toggle,.floating-mini-btn{
  min-height:40px;padding:0 14px;border-radius:999px;background:var(--surface-container-high);color:var(--secondary);font-weight:800;
}
.playlist-drawer,
.floating-playlist-drawer{
  display:none;gap:10px;
}
.playlist-drawer.is-open,
.floating-playlist-drawer.is-open{
  display:grid;
}
.playlist-item{
  display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;
  padding:10px;border-radius:24px;background:rgba(255,255,255,.78);
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.playlist-item:hover{transform:translateY(-2px)}
.playlist-item.is-current{
  background:linear-gradient(135deg,rgba(253,211,77,.38),rgba(154,225,255,.26));
}
.playlist-thumb{
  height:58px;border-radius:18px;background:linear-gradient(135deg,var(--secondary),var(--secondary-container));
  background-size:cover;background-position:center;display:grid;place-items:center;color:#fff;font-weight:900;
}
.playlist-copy strong{
  display:block;font-size:.95rem;line-height:1.35;letter-spacing:-.02rem;
}
.playlist-copy span{
  display:block;margin-top:4px;color:var(--on-surface-variant);font-size:.84rem;
}

.floating-player-dock{
  position:fixed;
  left:18px;
  bottom:94px;
  z-index:70;
  width:min(420px,calc(100vw - 28px));
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.96);
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.floating-player-dock.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.floating-player-card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  padding:12px;
}
.floating-player-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 4px 10px;
}
.floating-player-topbar strong{
  font-size:.95rem;letter-spacing:-.02rem;
}
.floating-player-actions{
  display:flex;align-items:center;gap:8px;
}
.floating-player-slot .native-player{
  border-radius:28px;
  box-shadow:0 18px 34px -20px rgba(38,49,41,.28);
}
.floating-player-slot .native-player-controls{
  left:10px;right:10px;bottom:10px;padding:9px;gap:8px;
}
.floating-player-slot .player-control{
  width:38px;height:38px;
}
.floating-player-slot .native-big-play{
  width:72px;height:72px;font-size:1.55rem;
}
.floating-player-slot .native-copy strong{
  font-size:1rem;
}
.floating-player-slot .native-copy small,
.floating-player-slot .native-badge{
  display:none;
}
.floating-playlist-drawer{
  margin-top:10px;
  max-height:280px;
  overflow:auto;
  padding-left:2px;
}
.floating-playlist-drawer::-webkit-scrollbar{width:8px}
.floating-playlist-drawer::-webkit-scrollbar-thumb{
  background:rgba(164,176,165,.45);
  border-radius:999px;
}

.empty-state{padding:34px;text-align:center;color:var(--on-surface-variant);font-weight:800}

.bottom-nav{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 32px),940px);
  padding:10px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);
  border:1px solid rgba(164,176,165,.18);border-radius:999px;
  box-shadow:var(--mint-shadow);display:grid;grid-template-columns:repeat(5,1fr);gap:8px;z-index:40
}
.bottom-nav a{
  min-height:56px;padding:0 10px;text-align:center;border-radius:999px;font-weight:800;color:var(--on-surface-variant);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.bottom-nav a.is-active {
    background: linear-gradient(135deg, #1ea6ff, #d24dfd);
    color: #ffffff;
}

.menu-backdrop{
  position:fixed;inset:0;background:rgba(6,16,10,.18);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:59;
}
.side-menu{
  position:fixed;top:0;right:0;height:100vh;width:min(92vw,410px);z-index:60;
  padding:24px 20px 28px;
  background:linear-gradient(180deg,rgba(237,250,238,.98),rgba(255,255,255,.96));
  box-shadow:-24px 0 60px -30px rgba(38,49,41,.24);
  transform:translateX(105%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;gap:18px;overflow:auto;
}
.side-menu-head,.side-menu-brand,.menu-user-link,.menu-auth-actions{display:flex;align-items:center;gap:14px}
.side-menu-head{justify-content:space-between}
.side-menu-brand strong{display:block;letter-spacing:-.02rem}
.side-menu-brand small,.menu-user-meta small{color:var(--on-surface-variant)}
.menu-user-card,.menu-section,.menu-top-video,.admin-card{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.94));
  border-radius:30px;border:1px solid rgba(164,176,165,.14);box-shadow:var(--mint-shadow-soft);
}
.menu-user-card{padding:14px}
.menu-user-link{align-items:center}
.menu-user-avatar{
  width:60px;height:60px;border-radius:20px;object-fit:cover;border:4px solid rgba(253,211,77,.28);
}
.menu-user-avatar-fallback{
  display:grid;place-items:center;background:linear-gradient(135deg,var(--secondary),var(--secondary-container));color:#fff;font-weight:900;
}
.menu-user-meta strong{display:block}
.side-menu-nav{display:grid;gap:14px}
.menu-link{
  min-height:56px;padding:0 18px;border-radius:999px;
  background:var(--surface-container-low);
  color:var(--secondary);font-weight:800;
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.menu-link.is-active{background:linear-gradient(135deg,var(--primary),var(--primary-container));color:var(--on-primary-container)}
.menu-link-danger{background:#fff2f1;color:#b93b17}
.menu-section{padding:18px}
.menu-section-title{
  margin-bottom:12px;font-size:.82rem;font-weight:900;letter-spacing:.08rem;text-transform:uppercase;color:var(--secondary);
}
.menu-sub-links{display:flex;gap:10px;flex-wrap:wrap}
.menu-sublink{
  min-height:40px;padding:0 14px;border-radius:999px;background:var(--surface-container-high);color:var(--secondary);font-weight:800
}
.menu-top-videos{display:grid;gap:12px}
.menu-top-video-image{
  min-height:82px;padding:16px;border-radius:24px;background:linear-gradient(135deg,var(--secondary),var(--secondary-container));
  color:#fff;background-size:cover;background-position:center;display:flex;align-items:flex-end;font-weight:900;
}

.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-wrap{width:min(100%,480px)}
.auth-card{padding:28px}
.auth-card h1{margin-top:0;font-size:2rem;letter-spacing:-.03rem}
.profile-list{display:grid;gap:12px;margin-bottom:18px}

/* admin */
.admin-body{
  background:
    radial-gradient(circle at top left, rgba(154,225,255,.24), transparent 22%),
    radial-gradient(circle at bottom right, rgba(255,204,188,.18), transparent 20%),
    var(--surface);
}
.admin-shell{
  display:grid;grid-template-columns:300px 1fr;min-height:100vh;gap:20px;padding:20px;
}
.admin-sidebar{
  position:sticky;top:20px;height:calc(100vh - 40px);overflow:auto;
  background:linear-gradient(180deg,#ffffff,#eef8f0);
  border-radius:38px;padding:22px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--mint-shadow);border:1px solid rgba(164,176,165,.16);
}
.admin-brand-wrap{
  display:flex;align-items:center;gap:14px;padding:8px 4px 16px;
}
.admin-brand-badge{
  width:58px;height:58px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-container));color:var(--on-primary-container);font-weight:900;
}
.admin-brand{font-size:1.28rem;font-weight:900;letter-spacing:-.03rem;color:var(--primary)}
.admin-brand small{display:block;font-size:.9rem;color:var(--on-surface-variant);font-weight:700}
.admin-sidebar a{
  min-height:54px;padding:0 18px;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--secondary);font-weight:800;
  background:transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.admin-sidebar a.is-active{
  background:linear-gradient(135deg,var(--primary),var(--primary-container));
  color:var(--on-primary-container);
}
.admin-sidebar-footer{margin-top:auto;padding-top:10px}
.admin-main{
  min-width:0;
  display:flex;flex-direction:column;gap:20px;
}
.admin-topbar{
  position:sticky;top:20px;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px);
  border-radius:30px;box-shadow:var(--mint-shadow-soft);border:1px solid rgba(164,176,165,.16);
}
.admin-topbar h1{margin:0;font-size:1.15rem}
.admin-topbar p{margin:4px 0 0;color:var(--on-surface-variant);font-weight:700}
.admin-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-actions .pill-btn{min-height:50px}
.admin-grid-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.admin-card{padding:22px}
.admin-card h3,.admin-card h2{margin:0 0 8px}
.admin-card p{margin:0;color:var(--on-surface-variant);line-height:1.65}
.admin-card strong{font-size:2rem;color:var(--primary);letter-spacing:-.03rem}
.admin-card .label-badge{margin-bottom:12px}

.admin-table-wrap{overflow:hidden;padding:8px}
.admin-table{
  width:100%;border-collapse:separate;border-spacing:0 10px;background:transparent;
}
.admin-table th,.admin-table td{
  padding:16px 14px;text-align:right;vertical-align:middle;
}
.admin-table thead th{
  color:var(--on-surface-variant);font-size:.83rem;letter-spacing:.05rem;text-transform:uppercase;font-weight:900;
}
.admin-table tbody tr{
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 30px -28px rgba(38,49,41,.24);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.admin-table tbody td:first-child{border-radius:22px 0 0 22px}
.admin-table tbody td:last-child{border-radius:0 22px 22px 0}
.status-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 12px;border-radius:999px;font-weight:900;font-size:.82rem;
  background:var(--surface-container-high);color:var(--secondary);
}
.status-pill.published,.status-pill.active{background:#e9fff1;color:#1d7b56}
.status-pill.hidden{background:#f4f6f7;color:#68766b}
.status-pill.draft{background:#fff4d6;color:#8d6700}
.status-pill.archived,.status-pill.inactive{background:#f1eeee;color:#6a6464}
.admin-thumb-sm{
  width:62px;height:62px;border-radius:18px;object-fit:cover;border:1px solid rgba(164,176,165,.16);
}
.admin-thumb-preview{
  display:block;width:180px;height:110px;object-fit:cover;border-radius:22px;margin-top:10px;border:1px solid rgba(164,176,165,.16);
}
.inline-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.text-link{color:var(--secondary);font-weight:800}
.kicker{color:var(--secondary);font-size:.9rem;font-weight:900;letter-spacing:.08rem;text-transform:uppercase}

.reveal{
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.reveal.in-view{opacity:1;transform:none}

@media (max-width:1180px){
  .card-grid,.admin-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-page{grid-template-columns:1fr}
  .video-meta{position:static}
  .rounded-section-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .category-grid,.production-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .mobile-app-frame{padding:18px 18px 120px}
  .hero{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid,.admin-grid.three,.admin-shell,.admin-grid-cards{grid-template-columns:1fr}
  .admin-grid.two{grid-template-columns:1fr}
  .admin-shell{padding:14px}
  .admin-sidebar{position:relative;top:0;height:auto}
  .topbar{padding-top:10px}
  .header-search{min-width:0;flex:1}
  .rounded-section-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-grid,.production-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
	.category-name {
    margin-top: -60px;
    color: #fff;
    font-size: 20px;
    text-shadow: 1px 1px 8px #000;
}
  .mobile-app-frame{padding:14px 14px 112px}
  .brand{padding-inline:8px 12px}
  .brand-text{font-size:1rem}
  .header-search{display:none}
  .hero,.panel,.media-card,.auth-card,.empty-state,.admin-card,.admin-sidebar,.admin-topbar,.admin-table-wrap,
  .avatar-card,.category-card,.production-card,.playlist-panel,.floating-player-card{border-radius:28px}
.hero {
    padding: 22px;
    border-radius: 0px 0px 50px 50px;
    margin-top: 16px;
}
  .hero-card{width:100%;min-height:220px}
  .hero-image{min-height:240px}
  .stats-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .thumb{height:210px}
  .bottom-nav{width:min(calc(100% - 18px),900px);bottom:10px}
  .bottom-nav a{min-height:52px;font-size:.9rem}
  .native-player-controls{left:10px;right:10px;bottom:10px;padding:10px;gap:8px}
  .native-time{display:none}
  .side-menu{width:min(100vw,390px)}

  .card-grid,
  .stats-grid,
  .rounded-section-grid,
  .category-grid,
  .production-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(78%,78%);
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    gap:14px;
    padding:4px 4px 10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .card-grid::-webkit-scrollbar,
  .stats-grid::-webkit-scrollbar,
  .rounded-section-grid::-webkit-scrollbar,
  .category-grid::-webkit-scrollbar,
  .production-grid::-webkit-scrollbar{
    display:none;
  }
.card-grid > *, .stats-grid > *, .rounded-section-grid > *, .category-grid > *, .production-grid > * {
    scroll-snap-align: start;
    width: 70vw;
}

  .stats-grid{grid-auto-columns:minmax(72%,72%)}
  .rounded-section-grid{grid-auto-columns:minmax(46%,46%)}
  .category-grid{grid-auto-columns:minmax(58%,58%)}
  .production-grid{grid-auto-columns:minmax(28%,58%)}

  .avatar-visual{
    width:96px;
    height:96px;
  }
  .production-logo{
    width:104px;
    height:104px;
    border-radius:28px;
  }

  .floating-player-dock{
    left:10px;
    right:10px;
    width:auto;
    bottom:82px;
  }
  .floating-player-slot .native-player{
    border-radius:24px;
  }
}

.global-player-shell{
  position:fixed;
  left:18px;
  bottom:94px;
  z-index:120;
  width:min(430px,calc(100vw - 28px));
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.96);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.global-player-shell.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.global-player-card{
  border-radius:3rem;
  box-shadow:0 24px 48px -24px rgba(38,49,41,.18);
  border:1px solid rgba(164,176,165,.15);
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(18px);
  padding:12px;
}

.global-player-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 4px 10px;
}

.global-player-meta strong{
  display:block;
  font-size:.95rem;
  letter-spacing:-.02rem;
}

.global-player-meta span{
  display:block;
  color:#525e55;
  font-size:.84rem;
  margin-top:4px;
}

.global-player-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.global-player-video-host .native-player-video,
.global-player-video-host iframe,
.global-player-video-host video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.global-player-stage{
  overflow:hidden;
  border-radius:24px;
  background:#000;
  aspect-ratio:16/9;
  margin-bottom:10px;
}

.global-player-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

@media (max-width:720px){
  .global-player-shell{
    left:10px;
    right:10px;
    width:auto;
    bottom:82px;
  }
}


a.category-pill {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0px 5px;
    height: 100px;
}

.category-icon {
    width: 100%;
	height:100%;
}

.category-name {
    margin-top: -60px;
    color: #fff;
    font-size: 30px;
    text-shadow: 1px 1px 8px #000;
}

@media (max-width:720px){
	.category-name {
    margin-top: -60px;
    color: #fff;
    font-size: 20px;
    text-shadow: 1px 1px 8px #000;
}
}
.color-swatch{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  border:1px solid rgba(0,0,0,.08);
}

.single-row-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.home-split-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}

.home-main-column.seventy{
  min-width:0;
}

.home-main-column.full-width{
  min-width:0;
}

.home-widget-column{
  display:grid;
  gap:16px;
}

.home-widget-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 0;
    border-right: 1px solid rgb(255 255 255 / 23%);
    height: 100%;
    align-content: start;
}

.widget-kicker {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    border-right: 5px solid #9f67fa;
    padding-right: 10px;
}
span.trend-thumb.image-thumb {
    width: 70px;
    height: 100px;
    border-radius: 8px;
}
.widget-thumb{
  min-height:160px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--secondary),var(--secondary-container));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.home-widget-card strong{
  font-size:1.05rem;
  line-height:1.35;
}

.home-widget-card small{
  color:var(--on-surface-variant);
}

.trends-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.trends-list li a {
    display: flex;
    gap: 14px;
    padding: 0;
    border-radius: 20px;
    background: transparent;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border: none;
    margin-bottom: 10px;
}
span.trend-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
h3 {
    padding: 0;
    margin: 5px 0px 0px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.trends-list li strong{
  font-size:.96rem;
}

@media (min-width:981px){
  .home-split-layout{
    grid-template-columns:minmax(0,7fr) minmax(260px,3fr);
    align-items:start;
  }

  .home-main-column.full-width{
    grid-column:1 / -1;
  }
}

@media (max-width:1180px){
  .single-row-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:980px){
  .single-row-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .single-row-grid,
  .home-widget-column{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(78%,78%);
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    gap:14px;
    padding:4px 4px 10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .single-row-grid::-webkit-scrollbar,
  .home-widget-column::-webkit-scrollbar{
    display:none;
  }

  .single-row-grid > *,
  .home-widget-column > *{
    scroll-snap-align:start;
  }
}


.home-autoload-status{
  display:none;
  margin-top:14px;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  color:var(--secondary);
  font-weight:800;
  text-align:center;
}

.home-autoload-status.is-visible{
  display:block;
}

#home-feed-sentinel{
  width:100%;
  height:2px;
}

.four-up-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.home-series-row{
  margin-bottom:22px;
}

.section-head--embedded{
  margin-bottom:14px;
}

.home-interesting-section{
  margin-top:10px;
}

.interesting-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
section.hero-section {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}
@media (max-width:1180px){
  .four-up-grid,
  .interesting-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:980px){
  .four-up-grid,
  .interesting-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .four-up-grid,
  .interesting-grid{
    grid-template-columns:1fr;
  }
}

.character-inline-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff57;
    /* box-shadow: 0 10px 30px rgba(15,23,42,.08); */
    text-decoration: none;
    color: inherit;
    /* border: 1px solid rgba(15,23,42,.06); */
    width: 100px;
    flex-direction: column;
}
.character-inline-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,23,42,.12)}
.character-inline-avatar{width:84px;height:84px;min-width:84px;border-radius:999px;overflow:hidden;background:linear-gradient(135deg,#ffd54f,#ff8a65);display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:700}
.character-inline-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .media-thumb-image{width:100%;height:100%;object-fit:cover;display:block}
.character-inline-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.character-inline-copy strong {
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}.character-inline-copy small{display:block;color:#667085;font-size:14px;line-height:1.45}
.home-series-row + .home-series-row{margin-top:24px}
.interesting-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){
  .characters-inline-list{grid-template-columns:1fr}
  .interesting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .character-inline-card{padding:12px}
  .character-inline-avatar{width:68px;height:68px;min-width:68px}
  .interesting-grid{grid-template-columns:1fr}
.reveal.in-view {
    opacity: 1;
    transform: none;
    width: 100%;
}
.category-strip {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
.hero-side {
    width: 100%;
}
ul.trends-list {
    display: flex;
    overflow-x: scroll;
}
a.media-card.reveal.in-view {
    width: 200px;
    margin-bottom: 30px;
}
a.category-pill {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0px 5px;
    height: 100px;
}
.top-menu {
    display: none;
}
section.hero-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    margin-top: -36px;
}
.hero p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.25;
    max-width: 720px;
    font-weight: 500;
}

}
.characters-inline-list {
    display: flex;
    gap: 5px;
    margin: 0 0 28px;
    overflow-x: auto;
    padding-bottom: 10px;
    grid-auto-flow: column;
    flex-direction: row;
    scrollbar-color: rgb(38 49 41 / 20%) rgb(38 49 41 / 8%);
    scrollbar-width: thin;
}