*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, p, ul, ol {
  margin: 0;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
}

img, svg {
  display: block;
}

img {
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

:root, .dark {
  --background:#111210;
  --foreground:#f2f1ea;
  --card:#1b1c18;
  --card-foreground:#f2f1ea;
  --popover:#22231e;
  --popover-foreground:#f2f1ea;
  --primary:#f4c568;
  --primary-foreground:#211a0d;
  --secondary:#24251f;
  --secondary-foreground:#e6e5dc;
  --muted:#24251f;
  --muted-foreground:#a7a99b;
  --accent:#303128;
  --accent-foreground:#f2f1ea;
  --destructive:#df6761;
  --border:#36372e;
  --input:#3d3e34;
  --ring:#f4c568;
  --radius:.9rem;
  --sidebar:#171813;
  --sidebar-foreground:#f2f1ea;
  --sidebar-primary:#f4c568;
  --sidebar-primary-foreground:#211a0d;
  --sidebar-accent:#303128;
  --sidebar-accent-foreground:#f2f1ea;
  --sidebar-border:#36372e;
  --sidebar-ring:#f4c568;
  color-scheme:dark;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}

body {
  margin:0;
  background:#111210;
  color:var(--foreground);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

button,a,input,textarea {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

a,button,input,textarea {
  outline-offset:5px;
}

a:focus-visible,button:focus-visible {
  outline:2px solid #f4c568;
}

a {
  text-decoration:none;
}

button,input,textarea {
  font:inherit;
}

.shell {
  width:min(1240px,calc(100% - 72px));
  margin-inline:auto;
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:108px;
  gap:28px;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#f6f3e9;
  flex-shrink:0;
  font-size:23px;
  font-weight:720;
  letter-spacing:-.7px;
  line-height:1.15;
}

.brand img {
  width:49px;
  height:56px;
  object-fit:contain;
}

.brand-sub {
  display:block;
  font-size:8px;
  font-weight:550;
  letter-spacing:2px;
  margin-top:6px;
  color:#b2b3a9;
}

.site-header nav {
  display:flex;
  gap:31px;
  font-size:13px;
  color:#a5a79c;
}

.site-header nav a {
  padding:12px 0;
  transition:color .2s;
}

.site-header nav a:hover,.site-header .nav-active {
  color:#f7d492;
}

.header-telegram {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  border:1px solid #4a4531;
  border-radius:12px;
  padding:12px 16px;
  color:#ebc780;
  transition:background .25s;
}

.header-telegram:hover {
  background:#2b281e;
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:510px;
  border-radius:28px;
  overflow:hidden;
  background:#242017;
  border:1px solid #343127;
}

.hero-art {
  position:absolute;
  inset:0 0 0 auto;
  width:76%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  z-index:-3;
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#1a1b16 2%,#1a1b16f5 25%,#1a1b169e 47%,#18170f08 77%),linear-gradient(0deg,#161711c4,transparent 35%);
  z-index:-2;
}

.hero-copy {
  padding:49px 48px 82px;
  position:relative;
  max-width:720px;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:650;
  letter-spacing:1.7px;
  color:#ebc17a;
  line-height:1.5;
}

.tiny-sun {
  width:7px;
  height:7px;
  border-radius:100%;
  background:#edbd60;
  box-shadow:0 0 14px #e2b36a83;
}

.hero h1 {
  font-size:clamp(40px,4.3vw,61px);
  font-weight:730;
  letter-spacing:-2.7px;
  line-height:1.1;
  margin:22px 0 19px;
}

em {
  font-style:normal;
  color:#ecc16e;
}

.hero p {
  font-size:14px;
  color:#bcbdb0;
  line-height:1.75;
  margin:0 0 28px;
}

.gold-button {
  height:46px;
  padding:0 21px;
  border-radius:12px;
  background:#f4c568;
  color:#272014;
  font-weight:650;
  font-size:13px;
  box-shadow:0 4px 18px #09090015;
  transition:background .22s,transform .22s;
  gap:10px;
}

.gold-button:hover {
  background:#ffda90;
  color:#211a0d;
  transform:translateY(-1px);
}

.soft-button {
  height:42px;
  border:1px solid #414137;
  border-radius:11px;
  background:#26271f;
  color:#dedfd4;
  font-size:13px;
}

.soft-button:hover {
  background:#34352b;
  color:#fff;
}

.hero-feature {
  position:absolute;
  right:25px;
  bottom:25px;
  padding:13px 17px;
  display:flex;
  align-items:center;
  gap:15px;
  border:1px solid #ffffff26;
  border-radius:16px;
  background:#191a15ba;
  backdrop-filter:blur(12px);
  text-align:left;
  max-width:42%;
  transition:background .2s,transform .2s;
}

.hero-feature:hover {
  background:#25261ef0;
  transform:translateY(-3px);
}

.hero-feature small {
  display:block;
  font-size:8px;
  color:#cccaaf;
  letter-spacing:1.3px;
}

.hero-feature strong {
  display:block;
  font-size:14px;
  font-weight:600;
  margin-top:3px;
}

.feature-play {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  color:#f4cf89;
  border:1px solid #e5cb8540;
  flex-shrink:0;
}

.hero-bottom {
  position:absolute;
  bottom:23px;
  left:48px;
  color:#b5b6a5;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:.3px;
}

.catalog-section {
  padding-block:65px 46px;
}

.section-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.muted-eyebrow {
  color:#8f9483;
  font-size:9px;
  letter-spacing:1.8px;
}

h2 {
  font-size:34px;
  font-weight:650;
  letter-spacing:-1.15px;
  line-height:1.2;
}

.section-top h2 {
  margin:6px 0 0;
}

.gold-dot {
  color:#f4c568;
}

.search-box {
  display:flex;
  align-items:center;
  gap:10px;
  width:334px;
  border:1px solid #3a3d30;
  background:#1a1c16;
  border-radius:13px;
  padding:0 15px;
  color:#929886;
  height:47px;
}

.search-box:focus-within {
  border-color:#c49e57;
}

.search-box input {
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  font-size:12px;
  height:44px;
  min-width:0;
}

.search-box input:focus-visible {
  box-shadow:none;
  outline:none;
}

.search-box svg {
  flex-shrink:0;
}

.clear-search {
  display:grid;
  place-items:center;
  width:22px;
  height:28px;
}

.catalog-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:28px 0 20px;
}

.category-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.category {
  padding:8px 17px;
  border-radius:10px;
  background:#1b1d17;
  border:1px solid #2b2e24;
  color:#a8ad9b;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:7px;
  transition:color .2s,background .2s;
}

.category:hover {
  color:#f2d28b;
  background:#282a21;
}

.category.active {
  background:#e9bf6e;
  color:#282114;
  border-color:#e9bf6e;
  font-weight:650;
}

.sort-select {
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#a9ad9e;
  font-size:11px;
  width:160px;
}

.catalog-count {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#949a87;
  font-size:10px;
  margin-bottom:19px;
}

.catalog-count span {
  display:flex;
  align-items:center;
  gap:7px;
  color:#737b67;
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:29px 23px;
}

.project-card {
  display:block;
  text-align:left;
  width:100%;
  min-width:0;
  border-radius:18px;
  animation:reveal .55s both;
  transition:transform .28s;
}

.project-card:hover {
  transform:translateY(-4px);
}

.poster-wrap {
  position:relative;
  aspect-ratio:1.52;
  border-radius:16px;
  overflow:hidden;
  background:#272922;
  border:1px solid #3c3f303b;
}

.poster-wrap:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#0c100aca,transparent 46%);
  pointer-events:none;
}

.poster-wrap>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%;
  transition:transform .6s,filter .4s;
  filter:saturate(.85);
}

.project-card:hover .poster-wrap>img {
  transform:scale(1.055);
  filter:saturate(1.05);
}

.poster-wrap>img.poster-moonlit-dusk {
  object-position:center 65%;
}

.poster-wrap>img.poster-yona {
  object-position:center 38%;
}

.poster-wrap>img.poster-dress-up-live {
  object-position:center;
}

.type-badge {
  position:absolute;
  top:13px;
  left:13px;
  border:1px solid #e8e4cf24;
  border-radius:7px;
  background:#1119108a;
  backdrop-filter:blur(8px);
  font-size:9px;
  letter-spacing:.3px;
  color:#f1f2e7;
  padding:3px 8px;
  z-index:2;
}

.studio-badge {
  position:absolute;
  bottom:13px;
  left:15px;
  color:#ecdbb4;
  font-size:10px;
  font-weight:550;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:2;
}

.card-play {
  position:absolute;
  display:grid;
  place-items:center;
  left:50%;
  top:50%;
  width:53px;
  height:53px;
  border-radius:100%;
  border:1px solid #f6ddae75;
  background:#e8bf60de;
  color:#262316;
  opacity:0;
  transform:translate(-50%,-40%);
  transition:opacity .25s,transform .25s;
  z-index:2;
}

.project-card:hover .card-play,.project-card:focus-visible .card-play {
  opacity:1;
  transform:translate(-50%,-50%);
}

.card-info {
  padding:12px 2px 0;
}

.card-meta {
  font-size:10px;
  color:#9da48c;
  line-height:1.6;
}

.card-info h3 {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:3px 0 0;
  font-size:17px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:-.2px;
}

.card-info h3 svg {
  flex-shrink:0;
  margin-top:5px;
  color:#778365;
  transition:color .2s;
}

.project-card:hover h3 svg {
  color:#e4bd70;
}

.poster-fallback {
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:radial-gradient(ellipse at center,#493b215c,#23251b 65%);
  color:#cdb47d;
  font-size:8px;
  letter-spacing:3px;
}

.poster-fallback img {
  height:75%;
  width:70%;
  object-fit:contain;
  opacity:.86;
}

.poster-fallback span {
  padding-bottom:18px;
}

.catalog-more {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:34px;
  color:#aab197;
  font-size:11px;
  padding:14px;
  border-top:1px solid #292e21;
}

.catalog-more:hover {
  color:#e5c584;
}

.empty-state {
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  min-height:340px;
  text-align:center;
  gap:12px;
  background:#191c15;
  border:1px dashed #3d4530;
  border-radius:20px;
  padding:35px;
}

.empty-state h3 {
  font-size:26px;
  line-height:1.25;
}

.empty-state p {
  color:#9ea78e;
  font-size:14px;
  max-width:450px;
}

.empty-state>a {
  display:flex;
  align-items:center;
  gap:6px;
  color:#b9c0a9;
  font-size:12px;
}

.empty-icon {
  display:flex;
  color:#dcb774;
  gap:3px;
  padding:15px;
}

.empty-state .gold-button {
  margin-top:6px;
}

.about-section {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:center;
  padding:41px 56px 50px;
  border-top:1px solid #2c3023;
}

.about-mark {
  min-height:290px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:radial-gradient(circle,#46392332 0,transparent 68%);
}

.about-mark img {
  width:220px;
  height:240px;
  object-fit:contain;
}

.about-mark span {
  font-size:8px;
  letter-spacing:4px;
  color:#8e9a7b;
  margin-top:15px;
}

.about-copy h2 {
  font-size:38px;
  line-height:1.16;
  margin:15px 0 20px;
  font-weight:650;
}

.about-copy p {
  font-size:13px;
  line-height:1.8;
  color:#a3ac93;
  margin-bottom:12px;
  max-width:485px;
}

.about-sign {
  display:flex;
  align-items:center;
  gap:8px;
  color:#c9be9b;
  font-size:10px;
  margin-top:23px;
}

.contact-section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:linear-gradient(112deg,#303022,#24281c);
  border:1px solid #3a422b;
  border-radius:22px;
  padding:32px 38px;
  margin-top:5px;
}

.contact-section .eyebrow {
  font-size:8px;
  color:#b9ba9a;
}

.contact-section h2 {
  font-size:28px;
  margin:7px 0 9px;
}

.contact-section p {
  font-size:12px;
  color:#a9b394;
}

.contact-telegram {
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #69704a;
  border-radius:14px;
  padding:17px 20px;
  background:#353b25;
  color:#eed093;
  min-width:290px;
  transition:background .2s;
}

.contact-telegram:hover {
  background:#444a30;
}

.contact-telegram small {
  display:block;
  font-size:8px;
  color:#aeb992;
  letter-spacing:1.2px;
  margin-bottom:4px;
}

.contact-telegram span {
  font-size:15px;
  font-weight:600;
  flex:1;
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-block:30px 26px;
  font-size:9px;
  color:#869175;
}

.site-footer>a {
  display:flex;
  align-items:center;
  gap:4px;
  color:#849071;
}

.site-footer a:hover {
  color:#f0ca80;
}

.footer-sun {
  color:#f4c568;
  margin-left:8px;
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  background:#f4c568;
  color:#111;
  padding:12px 20px;
  border-radius:10px;
  z-index:100;
}

.skip-link:focus {
  top:12px;
}

.project-dialog,.editor-dialog {
  max-width:min(820px,calc(100% - 32px))!important;
  max-height:90dvh;
  overflow-y:auto;
  border-radius:24px;
  padding:30px;
  background:#1b1e16;
  border-color:#424833;
  gap:20px;
}

.dialog-close {
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:#292e20e8;
  border-radius:50%;
  z-index:2;
  color:#c2ccb2;
}

.detail-heading {
  display:grid;
  grid-template-columns:135px 1fr;
  gap:24px;
  align-items:center;
  padding-right:15px;
}

.detail-poster {
  height:190px;
  overflow:hidden;
  border-radius:12px;
  background:#272d20;
}

.detail-poster>img {
  height:100%;
  width:100%;
  object-fit:cover;
}

.detail-title {
  font-size:27px;
  font-weight:650;
  line-height:1.22;
  letter-spacing:-.5px;
  margin:8px 0 13px;
}

.detail-description {
  font-size:13px;
  line-height:1.8;
  color:#acb69c;
}

.voice-tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#d5bd8c;
  margin-top:15px;
}

.episode-row {
  display:flex;
  align-items:center;
  gap:15px;
}

.episode-row>label {
  font-size:12px;
  white-space:nowrap;
}

.episode-row>button {
  min-width:150px;
  max-width:380px;
}

.player-wrap {
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#0c1008;
  border:1px solid #3c442f;
}

.player-wrap iframe {
  width:100%;
  height:100%;
  border:0;
}

.player-start {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  gap:14px;
  color:#bcbe9e;
}

.player-start small {
  color:#8d9b7a;
  font-size:10px;
}

.watch-panel {
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
  background:#242c1c;
  border:1px solid #3c492e;
  border-radius:14px;
}

.watch-icon {
  display:grid;
  place-items:center;
  color:#e5bf75;
  background:#41482b;
  width:50px;
  height:50px;
  border-radius:50%;
  flex-shrink:0;
}

.watch-panel h3 {
  font-size:17px;
  font-weight:600;
}

.watch-panel p {
  font-size:12px;
  color:#aab998;
  margin-top:4px;
}

.watch-links {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.watch-links a:not([data-slot]) {
  display:flex;
  gap:6px;
  align-items:center;
  color:#e5c27a;
  font-size:13px;
}

.player-note {
  font-size:11px;
  color:#99a888;
  line-height:1.7;
  margin:0;
}

.admin-shell {
  padding-block:26px 80px;
}

.admin-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:50px;
}

.admin-header>a:last-child {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#cdbd90;
}

.admin-shell h1 {
  font-size:35px;
  font-weight:650;
  letter-spacing:-1px;
  margin:12px 0;
}

.muted {
  color:#a5ae97;
  font-size:12px;
}

.admin-list {
  display:grid;
  gap:12px;
  margin-top:28px;
}

.admin-row {
  display:flex;
  gap:18px;
  align-items:center;
  padding:15px;
  border:1px solid #343d29;
  background:#1b2116;
  border-radius:16px;
}

.admin-thumb {
  width:80px;
  height:80px;
  overflow:hidden;
  flex-shrink:0;
  border-radius:10px;
}

.admin-thumb>img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.admin-row-copy {
  flex:1;
  min-width:0;
}

.admin-row h2 {
  font-size:17px;
  letter-spacing:0;
  margin:3px 0;
}

.admin-row-copy>.muted {
  font-size:10px;
}

.editor-guide {
  margin:27px 0;
  background:#252a1d;
  border:1px solid #414a30;
  border-radius:14px;
  padding:17px 20px;
  font-size:12px;
  color:#b4bfa4;
}

.editor-guide summary {
  cursor:pointer;
  color:#e3c587;
  font-size:13px;
  font-weight:550;
}

.editor-guide ol {
  list-style:decimal;
  padding-left:20px;
  display:grid;
  gap:10px;
  margin:17px 0;
}

.editor-guide p {
  color:#929f80;
}

.editor-dialog {
  max-width:min(750px,calc(100% - 28px))!important;
  gap:9px;
}

.editor-dialog>.detail-title {
  padding-right:20px;
}

.project-form fieldset {
  display:grid;
  gap:17px;
  margin:20px 0;
}

.project-form label {
  display:grid;
  gap:7px;
  font-size:12px;
  color:#d7ddcc;
  min-width:0;
}

.project-form input,.project-form textarea {
  font-size:13px;
  background:#141b0f;
  border-color:#434e33;
  border-radius:10px;
  min-height:42px;
}

.project-form small {
  color:#929f80;
  font-size:10px;
}

.project-form h3 {
  font-size:17px;
  font-weight:600;
  margin-top:10px;
}

.form-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.form-columns label>button {
  width:100%;
  height:42px;
}

.episodes-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.episodes-heading .muted {
  font-size:10px;
  max-width:380px;
  margin-top:5px;
}

.episode-edit {
  display:grid;
  gap:15px;
  border:1px solid #414d31;
  border-radius:14px;
  padding:16px;
  background:#222b1a;
}

.episode-edit-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#c4d3b1;
}

.project-form .checkbox-label {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  line-height:1.6;
}

.test-player {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:#e9c781;
}

.editor-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:16px;
  border-top:1px solid #414a33;
}

.error-message {
  background:#4b2625;
  color:#f0b9b3;
  border:1px solid #743f39;
  padding:12px 15px;
  border-radius:11px;
  font-size:12px;
}

.success-message {
  display:flex;
  gap:9px;
  align-items:center;
  background:#283d1f;
  border:1px solid #4e693a;
  color:#c6e2b0;
  padding:12px 16px;
  border-radius:12px;
  margin:20px 0;
  font-size:13px;
}

.success-message button {
  margin-left:auto;
}

.admin-access {
  padding:40px 0;
}

.admin-access section {
  max-width:620px;
  margin:100px auto;
}

.admin-access h1 {
  font-size:46px;
  letter-spacing:-1.8px;
  line-height:1.2;
  margin:20px 0;
}

.admin-access p {
  color:#a8b499;
  font-size:14px;
  line-height:1.9;
  margin:20px 0 30px;
}

.inline-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.back-link {
  display:block;
  color:#c3c9b0;
  font-size:12px;
  margin-top:28px;
}

@keyframes reveal {
  from {
    opacity:0;
    transform:translateY(14px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1600px) {
  .hero h1 {
    font-size:62px;
  }
}

@media(max-width:1000px) {
  .shell {
    width:calc(100% - 48px);
  }
  .site-header {
    gap:20px;
    height:96px;
  }
  .site-header nav {
    gap:20px;
  }
  .brand {
    font-size:20px;
  }
  .brand-sub {
    font-size:7px;
    letter-spacing:1.6px;
  }
  .header-telegram {
    padding:10px 13px;
  }
  .header-telegram>svg:last-child {
    display:none;
  }
  .hero-copy {
    padding-left:35px;
  }
  .hero-bottom {
    left:35px;
  }
  .hero h1 {
    font-size:49px;
  }
  .hero-art {
    width:83%;
  }
  .project-grid {
    gap:25px 18px;
  }
  .poster-wrap {
    aspect-ratio:1.3;
  }
  .about-section {
    padding-inline:25px;
    gap:35px;
  }
  .contact-telegram {
    min-width:255px;
  }
  .card-info h3 {
    font-size:16px;
  }
  .category {
    padding:8px 13px;
  }
}

@media(max-width:780px) {
  .shell {
    width:calc(100% - 36px);
  }
  .site-header nav {
    display:none;
  }
  .site-header {
    height:88px;
  }
  .hero {
    min-height:490px;
  }
  .hero-copy {
    padding:37px 28px 115px;
  }
  .hero h1 {
    font-size:46px;
    letter-spacing:-2px;
  }
  .hero-art {
    width:100%;
    opacity:.65;
    object-position:62% center;
  }
  .hero-shade {
    background:linear-gradient(90deg,#1a1b16fa,#1a1b16ad 55%,#1a1b1650),linear-gradient(0deg,#161711b0,transparent);
  }
  .hero-feature {
    right:20px;
    bottom:19px;
    max-width:55%;
    padding:10px 12px;
    gap:10px;
  }
  .hero-feature strong {
    font-size:12px;
  }
  .hero-feature small {
    font-size:7px;
  }
  .hero-bottom {
    left:28px;
    max-width:30%;
    font-size:9px;
    line-height:1.4;
  }
  .hero-bottom svg {
    flex-shrink:0;
  }
  .catalog-section {
    padding-top:43px;
  }
  .section-top {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
  }
  .search-box {
    width:100%;
  }
  .catalog-toolbar {
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
  }
  .category-list {
    gap:7px;
  }
  .category {
    font-size:11px;
    padding:7px 11px;
  }
  .sort-select {
    margin-left:auto;
  }
  .catalog-count {
    margin-top:-3px;
  }
  .catalog-count span {
    display:none;
  }
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px 16px;
  }
  .poster-wrap {
    aspect-ratio:1.35;
  }
  .card-info h3 {
    font-size:15px;
  }
  .about-section {
    padding:25px 10px 38px;
    gap:20px;
    grid-template-columns:.75fr 1.25fr;
  }
  .about-mark img {
    width:150px;
    height:180px;
  }
  .about-mark span {
    font-size:6px;
    letter-spacing:2px;
  }
  .about-copy h2 {
    font-size:30px;
  }
  .about-copy p {
    font-size:12px;
  }
  .contact-section {
    padding:27px;
    align-items:flex-start;
    flex-direction:column;
    gap:22px;
  }
  .contact-telegram {
    width:100%;
    min-width:0;
  }
  .site-footer {
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .site-footer>span:nth-child(2) {
    display:none;
  }
  .project-dialog {
    padding:24px;
  }
  .detail-heading {
    grid-template-columns:95px 1fr;
    gap:16px;
  }
  .detail-poster {
    height:150px;
  }
  .detail-title {
    font-size:23px;
  }
  .detail-description {
    font-size:12px;
  }
  .detail-heading .eyebrow {
    font-size:8px;
  }
  .admin-row {
    gap:10px;
  }
  .admin-row h2 {
    font-size:14px;
  }
  .admin-row .soft-button {
    font-size:11px;
    padding:0 10px;
  }
  .admin-thumb {
    width:56px;
    height:70px;
  }
  .admin-row-copy>.muted {
    display:none;
  }
  .admin-shell h1 {
    font-size:30px;
  }
  .admin-header {
    margin-bottom:35px;
  }
}

@media(max-width:480px) {
  .brand {
    font-size:20px;
    gap:6px;
  }
  .brand img {
    width:40px;
    height:48px;
  }
  .brand-sub {
    font-size:6px;
    letter-spacing:1.4px;
  }
  .header-telegram {
    padding:10px;
    gap:7px;
    font-size:10px;
  }
  .header-telegram span {
    display:none;
  }
  .hero {
    border-radius:22px;
    min-height:501px;
  }
  .hero-copy {
    padding:30px 23px 105px;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
  }
  .hero h1 {
    font-size:41px;
    letter-spacing:-1.9px;
    margin-top:22px;
  }
  .hero p {
    font-size:12px;
    line-height:1.8;
    max-width:260px;
  }
  .desktop-only {
    display:none;
  }
  .hero-feature {
    left:22px;
    right:22px;
    max-width:none;
    bottom:20px;
    padding:10px 14px;
  }
  .hero-feature>svg {
    margin-left:auto;
  }
  .hero-bottom {
    display:none;
  }
  .hero-feature strong {
    font-size:13px;
  }
  .hero-art {
    object-position:59% center;
    opacity:.6;
  }
  .hero-copy .gold-button {
    height:43px;
    font-size:12px;
  }
  .section-top h2 {
    font-size:30px;
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:27px;
  }
  .poster-wrap {
    aspect-ratio:1.5;
  }
  .card-info h3 {
    font-size:18px;
  }
  .card-meta {
    font-size:11px;
  }
  .catalog-more {
    font-size:10px;
    line-height:1.8;
    text-align:center;
  }
  .catalog-more svg {
    flex-shrink:0;
  }
  .about-section {
    grid-template-columns:1fr;
    gap:5px;
    padding:14px 9px 34px;
  }
  .about-mark {
    min-height:190px;
    order:2;
    margin-top:12px;
  }
  .about-mark img {
    width:150px;
    height:165px;
  }
  .about-copy h2 {
    font-size:35px;
  }
  .about-copy p {
    font-size:13px;
  }
  .about-copy .eyebrow {
    font-size:8px;
  }
  .contact-section {
    padding:26px 23px;
  }
  .contact-section h2 {
    font-size:25px;
  }
  .contact-section p {
    font-size:11px;
  }
  .site-footer {
    font-size:8px;
  }
  .detail-heading {
    grid-template-columns:1fr;
    padding-right:4px;
  }
  .detail-poster {
    display:none;
  }
  .detail-title {
    font-size:26px;
    padding-right:18px;
  }
  .project-dialog {
    padding:24px 20px;
    border-radius:18px;
  }
  .watch-panel {
    padding:19px 16px;
    gap:12px;
  }
  .watch-panel h3 {
    font-size:16px;
  }
  .watch-panel p {
    font-size:11px;
  }
  .watch-links>* {
    width:100%;
  }
  .player-start {
    gap:9px;
  }
  .player-start>svg {
    display:none;
  }
  .player-start small {
    font-size:8px;
  }
  .episode-row {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .episode-row>button {
    width:100%;
    max-width:none;
  }
  .editor-dialog {
    padding:25px 18px;
  }
  .form-columns {
    gap:10px;
  }
  .admin-row {
    flex-wrap:wrap;
    padding:12px;
  }
  .admin-row-copy {
    width:70%;
    flex:auto;
  }
  .admin-row>.soft-button {
    margin-left:auto;
  }
  .admin-row h2 {
    font-size:15px;
  }
  .admin-access h1 {
    font-size:36px;
  }
  .admin-access section {
    margin:65px auto;
  }
  .episodes-heading {
    align-items:flex-start;
  }
  .episodes-heading p {
    max-width:220px;
  }
  .project-form .checkbox-label {
    align-items:flex-start;
  }
  .checkbox-label button {
    margin-top:3px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

@media(max-width:480px) {
  .hero h1 {
    font-size:36px;
    letter-spacing:-1.6px;
  }
  .hero-copy {
    padding-bottom:117px;
  }
}


.gold-button,.soft-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;
  flex-shrink:0;
}

.gold-button {
  border:1px solid transparent;
}

.soft-button {
  padding:0 17px;
  transition:background .2s,color .2s;
}

button:disabled {
  opacity:.45;
  pointer-events:none;
}

select {
  border:1px solid var(--input);
  border-radius:10px;
  background:#22271d;
  color:#e2e7d8;
  padding:9px 32px 9px 12px;
  max-width:100%;
  min-width:0;
  cursor:pointer;
}

select option {
  background:#24271e;
  color:#f2f1ea;
}

.search-box input {
  width:100%;
  color:#f2f1ea;
  outline:0;
  min-width:0;
}

.search-box input::-webkit-search-cancel-button {
  display:none;
}

.search-box input::placeholder {
  color:#a0a690;
}

.sort-select {
  width:165px;
  appearance:auto;
  padding-inline:4px;
  font:inherit;
  font-size:11px;
}

.poster-content {
  width:100%;
  height:100%;
}

.poster-content>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%;
  transition:transform .6s,filter .4s;
  filter:saturate(.85);
}

.project-card:hover .poster-wrap .poster-content>img {
  transform:scale(1.055);
  filter:saturate(1.05);
}

.poster-content>img.poster-moonlit-dusk {
  object-position:center 65%;
}

.poster-content>img.poster-yona {
  object-position:center 38%;
}

.poster-content>img.poster-dress-up-live {
  object-position:center;
}

.poster-content.poster-fallback>img {
  height:75%;
  width:70%;
  object-fit:contain;
  opacity:.86;
  filter:none;
}

.hero-bottom svg,.about-sign svg {
  width:17px;
  height:17px;
}

.catalog-count svg {
  width:13px;
  height:13px;
}

.site-footer svg {
  width:13px;
  height:13px;
}

.category svg {
  width:15px;
  height:15px;
}

.contact-telegram>svg {
  width:24px;
  height:24px;
}

.icon-button {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:10px;
  color:#c8d1b8;
  flex-shrink:0;
}

.icon-button:hover {
  background:#343b29;
  color:#e4bd70;
}

body:has(dialog[open]) {
  overflow:hidden;
}

dialog {
  position:fixed;
  inset:0;
  margin:auto;
  height:fit-content;
  color:var(--foreground);
  border:1px solid #424833;
  box-shadow:0 24px 90px #0008;
}

dialog[open] {
  animation:dialog-in .2s ease-out;
}

dialog::backdrop {
  background:#060904bf;
  backdrop-filter:blur(6px);
}

.project-dialog {
  width:820px;
}

.editor-dialog {
  width:750px;
}

#project-detail {
  display:grid;
  gap:20px;
}

.detail-poster .poster-content>img {
  object-position:center;
}

.episode-row select {
  min-width:180px;
  max-width:100%;
}

.project-form fieldset {
  border:0;
  padding:0;
  min-width:0;
}

.project-form input,.project-form textarea {
  width:100%;
  padding:9px 12px;
  border:1px solid #434e33;
  color:#e9eddf;
  font:inherit;
  font-size:13px;
  outline-offset:3px;
}

.project-form textarea {
  resize:vertical;
  line-height:1.7;
}

.project-form input::placeholder,.project-form textarea::placeholder {
  color:#849077;
}

.project-form input:focus-visible,.project-form textarea:focus-visible {
  outline:2px solid #b99c5c;
  border-color:#c0a063;
}

.form-columns select {
  height:42px;
  width:100%;
}

.project-form .checkbox-label input {
  width:17px;
  height:17px;
  min-height:0;
  margin:0;
  flex-shrink:0;
  accent-color:#f4c568;
}

.verify-group,.episode-fields {
  display:grid;
  gap:15px;
}

.test-player[aria-disabled="true"] {
  pointer-events:none;
  opacity:.45;
}

.editor-file-notice {
  padding:20px 23px;
  border:1px solid #534c32;
  border-radius:15px;
  background:#2b2a1d;
  margin:25px 0 18px;
  color:#d8d1b5;
  font-size:13px;
  line-height:1.8;
}

.editor-file-notice strong {
  display:block;
  color:#f0cd86;
  font-size:15px;
  margin-bottom:5px;
}

.editor-file-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.editor-file-actions output {
  width:100%;
  font-size:11px;
  color:#b1bd9f;
  margin-top:3px;
}

.import-label {
  position:relative;
  font-size:13px;
  cursor:pointer;
}

.import-label:focus-within {
  outline:2px solid var(--primary);
  outline-offset:4px;
}

.visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.confirm-dialog {
  width:min(470px,calc(100% - 32px));
  max-height:90dvh;
  overflow:auto;
  border-radius:20px;
  padding:25px;
  background:#1b1e16;
}

.confirm-dialog h2 {
  font-size:23px;
  letter-spacing:-.4px;
  line-height:1.3;
  margin-bottom:15px;
}

.confirm-dialog p {
  font-size:13px;
  color:#aebba0;
  line-height:1.8;
  margin-bottom:22px;
}

code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.93em;
  color:#edd09a;
  overflow-wrap:anywhere;
}

.success-message,.error-message {
  line-height:1.7;
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(8px) scale(.99);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@media(max-width:780px) {
  .admin-row .soft-button {
    font-size:11px;
  }
  .admin-row .soft-button svg {
    display:none;
  }
}

@media(max-width:480px) {
  .episode-row select {
    width:100%;
  }
  .editor-file-actions>.gold-button {
    width:100%;
  }
  .editor-file-actions .soft-button {
    font-size:11px;
    padding:0 12px;
  }
  .confirm-dialog .editor-actions {
    flex-wrap:wrap;
  }
  .editor-actions {
    gap:7px;
  }
  .editor-actions .gold-button,.editor-actions .soft-button {
    font-size:12px;
    padding:0 13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  dialog[open] {
    animation:none;
  }
}

.watch-links a.gold-button,
.watch-links a.gold-button:visited,
.watch-links a.gold-button:hover {
  color: #211a0d;
}


.home-support {
  display:flex;
  justify-content:center;
  margin-top:26px;
}

.home-support .home-support-button {
  width:min(100%,320px);
  height:auto;
  min-height:58px;
  padding:15px 24px;
  border-radius:16px;
  gap:12px;
  font-size:15px;
  line-height:1.5;
  white-space:normal;
  text-align:center;
}

.home-support .home-support-button,
.home-support .home-support-button:visited,
.home-support .home-support-button:hover {
  color:#211a0d;
}

@media(max-width:480px) {
  .home-support { margin-top:22px; }
  .home-support .home-support-button { padding-inline:18px; }
}

@media(prefers-reduced-motion:reduce) {
  .home-support .home-support-button { transition:none; }
  .home-support .home-support-button:hover { transform:none; }
}
@media (max-width: 780px) {
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
  }

  .site-footer > span:nth-child(2) {
    display: block;
    flex-basis: auto;
    order: 0;
    margin-left: auto;
    text-align: right;
  }

  .site-footer > a {
    flex-basis: 100%;
    order: 1;
    justify-content: flex-end;
  }
}

.hero-inline-feature .hero-copy { padding-bottom:78px; }
.hero-inline-feature .hero-copy .hero-feature {
  position:static;
  inset:auto;
  width:fit-content;
  min-width:min(100%,280px);
  max-width:100%;
  padding:13px 17px;
  gap:15px;
  border-color:#d3b77755;
  background:#1c2119d9;
}
.hero-inline-feature .hero-copy .hero-feature:hover { background:#2b3123ed; border-color:#d3b77799; }
.hero-inline-feature .hero-feature > span:nth-child(2) { flex:1; min-width:0; }
.hero-inline-feature .hero-feature strong { overflow-wrap:anywhere; }
.hero-inline-feature .hero-feature > svg:last-child { margin-left:auto; flex-shrink:0; }
.hero-inline-feature .hero-bottom { max-width:calc(100% - 96px); }
.hero-support + .catalog-section { padding-top:44px; }


.project-tags {
  position:absolute;
  top:13px;
  right:13px;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
  max-width:calc(100% - 120px);
  pointer-events:none;
}
.project-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 7px;
  border:1px solid #d9c79566;
  border-radius:7px;
  background:#22281eeb;
  color:#f6e9c9;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.2px;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.project-tag--adult { background:#3c201deF; border-color:#d4957866; color:#ffe0ce; }
.project-tag--gl { background:#32233beF; border-color:#bf94ce66; color:#f2dfff; }
.project-tag--bl { background:#1d2d3deF; border-color:#81acc966; color:#d4ebff; }
.detail-project-tags,.admin-project-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.detail-project-tags { margin-bottom:8px; }


.project-form .editor-project-tags { padding:16px; border:1px solid #3d4731; border-radius:14px; background:#1b2216; }
.project-form .editor-project-tags h3 { margin:0 0 6px; font-size:14px; }
.editor-project-tags .muted { font-size:11px; line-height:1.65; }
.project-tag-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.project-form .project-tag-option { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid #4b533b; border-radius:10px; background:#242d1e; cursor:pointer; }
.project-form .project-tag-option:hover,.project-form .project-tag-option:focus-within { border-color:#bba166; }
.project-form .project-tag-option input { width:18px; height:18px; min-height:0; padding:0; margin:0; flex-shrink:0; accent-color:#f4c568; }
.project-tag-option input:checked + span { color:#f4c568; }
@media(max-width:780px) {
  .hero-inline-feature .hero-bottom { max-width:calc(100% - 56px); }
  .hero-support + .catalog-section { padding-top:36px; }
}
@media(max-width:480px) {
  .hero-inline-feature .hero-copy { padding-bottom:30px; }
  .hero-inline-feature .hero-copy .hero-feature { width:100%; padding:12px 14px; gap:12px; }
}