@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../webfonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../webfonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../webfonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../webfonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../webfonts/cormorant-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../webfonts/cormorant-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../webfonts/cormorant-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../webfonts/cormorant-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #17110e;
  --bg-2: #110c0a;
  --fill: #27201c;
  --fill-2: #352e28;
  --screen: #0d0907;
  --line: rgba(255, 236, 214, .08);
  --line-2: rgba(255, 236, 214, .22);
  --head: rgba(0, 0, 0, .14);
  --veil: rgba(0, 0, 0, .7);
  --shade: rgba(0, 0, 0, .35);
  --white: #fff;
  --tx: #f2e8dc;
  --tx-2: #b8aa99;
  --tx-3: #9c8d7e;
  --accent: #e5793f;
  --accent-2: #f29159;
  --main: #bd5720;
  --main-2: #ad4f1c;
  --yes: #6fc794;
  --no: #e25b4b;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --f-xs: 12px;
  --f-s: 14px;
  --f-m: 16px;
  --f-l: 24px;
  --f-xl: 34px;
  --f-xxl: 56px;
  --f-input: 16px;
  --lh-1: 1;
  --lh-tight: 1.1;
  --lh-sub: 1.2;
  --lh-head: 1.35;
  --lh: 1.6;
  --lh-text: 1.7;
  --ls-caps: .12em;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 72px;
  --gutter: 24px;

  --h-sm: 32px;
  --h: 40px;
  --h-lg: 48px;
  --h-badge: 24px;
  --h-bar: 4px;
  --h-area: 128px;
  --top: 72px;

  --r: 5px;
  --r-bar: 2px;
  --bw: 1px;
  --bw-2: 2px;
  --px: 1px;

  --i-xs: 14px;
  --i-s: 16px;
  --i: 18px;
  --i-l: 36px;
  --i-close: 12px;

  --wide: 1120px;
  --read: 720px;
  --hero: 1600px;
  --hero-text: 600px;
  --side: 320px;
  --modal: 400px;
  --pop-cell: 104px;
  --dl-label: 96px;
  --thumb: 160px;
  --gallery: 96px;
  --field-s: 200px;
  --row-min: 200px;
  --score: 160px;
  --trim: 160px;
  --menu-min: 180px;
  --suggest: 360px;
  --num: 2ch;
  --dialog-h: 70vh;
  --xf-l: 30%;
  --xf-r: 70%;

  --cols: 5;
  --cols-news: 3;
  --pop-cols: 3;
  --panel-cols: 3;
  --links-cols: 2;
  --acts-cols: auto;
  --clamp: 3;
  --split: minmax(0, 1fr) var(--side);
  --split-gap: var(--s4);
  --gap-x: var(--s2);
  --grid-gap: var(--s3) var(--gap-x);
  --news-gap: var(--s3) var(--s2);
  --media-gap: var(--s3);
  --ratio: 16 / 9;
  --ratio-sq: 1;

  --t: .15s;
  --t-m: .2s;
  --t-l: .3s;
  --op-off: .35;
  --zoom: 1.05;
  --turn: 180deg;
  --off: -9999px;

  --z-1: 1;
  --z-2: 2;
  --z-head: 5;
  --z-pop: 10;
  --z-star: 17;
  --z-ui: 1000;
  --z-suggest: 2200;

  --shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 var(--bw) var(--line);
  --shadow-screen: 0 30px 80px -20px var(--veil);
  --shadow-text: 0 2px 24px var(--shade);
  --focus: inset 0 0 0 var(--bw-2) var(--accent);
  --error: inset 0 0 0 var(--bw-2) var(--no);
  --frame: inset 0 0 0 var(--bw) var(--line-2);
  --veil-spread: 100vmax;

  --hero-focus: 65% top;
  --mask-hero: none;
  --grad-hero: linear-gradient(90deg, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 75%, transparent) 30%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, color-mix(in srgb, var(--bg) 10%, transparent) 80%, transparent 100%), linear-gradient(0deg, var(--bg) 0%, var(--bg) 4%, color-mix(in srgb, var(--bg) 92%, transparent) 14%, color-mix(in srgb, var(--bg) 75%, transparent) 26%, color-mix(in srgb, var(--bg) 52%, transparent) 40%, color-mix(in srgb, var(--bg) 30%, transparent) 55%, color-mix(in srgb, var(--bg) 12%, transparent) 70%, transparent 85%);
  --backdrop-h: 1100px;
  --bleed: 60px;
  --mask-backdrop: linear-gradient(#000 45%, transparent 90%);
  --grad-backdrop: linear-gradient(180deg, color-mix(in srgb, var(--bg) 15%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 35%, color-mix(in srgb, var(--bg) 85%, transparent) 60%, var(--bg) 80%);
  --filter-backdrop: blur(36px) saturate(1.2) brightness(1.5);
  --filter-backdrop-dim: blur(44px) saturate(.85) brightness(.75);
  --op-backdrop: .9;
  --op-backdrop-dim: .5;
  --screen-bleed: 5%;
  --filter-screen: blur(16px) brightness(.5);
  --filter-hover: brightness(.6);

  --star: 23px;

  color-scheme: dark;
}

@media (min-width: 1600px) {
  :root { --mask-hero: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .15) 6%, rgba(0, 0, 0, .5) 13%, rgba(0, 0, 0, .85) 20%, #000 25%, #000 75%, rgba(0, 0, 0, .85) 80%, rgba(0, 0, 0, .5) 87%, rgba(0, 0, 0, .15) 94%, transparent 100%); }
}

@media (max-width: 1000px) {
  :root {
    --cols: 4;
    --split: minmax(0, 1fr);
    --split-gap: var(--s3);
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --s4: 48px;
    --h-sm: 28px;
    --h: 36px;
    --h-lg: 44px;
    --h-badge: 22px;
    --top: 56px;
    --f-xs: 11px;
    --f-s: 13px;
    --f-m: 14px;
    --f-l: 20px;
    --f-xl: 24px;
    --f-xxl: 30px;
    --i-s: 14px;
    --i: 16px;
    --i-l: 28px;
    --thumb: 120px;
    --cols: 2;
    --cols-news: 1;
    --acts-cols: repeat(2, minmax(0, 1fr));
    --gap-x: var(--s1);
    --grid-gap: var(--s2) var(--gap-x);
    --news-gap: var(--s3);
    --media-gap: var(--s2);
    --backdrop-h: 760px;
    --grad-hero: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 45%, color-mix(in srgb, var(--bg) 55%, transparent) 100%);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { position: relative; min-height: 100vh; background: var(--bg); color: var(--tx); font-family: var(--sans); font-size: var(--f-m); font-weight: var(--fw-r); line-height: var(--lh); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; width: var(--i); height: var(--i); flex: none; }
:focus-visible { outline: var(--bw-2) solid var(--accent); outline-offset: var(--bw-2); border-radius: var(--r); }
[hidden] { display: none !important; }
.sr { position: absolute; width: var(--px); height: var(--px); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.h1, .h2, .h3 { font-family: var(--serif); font-weight: var(--fw-b); line-height: var(--lh-tight); text-wrap: balance; }
.h1 { font-size: var(--f-xxl); }
.h2 { font-size: var(--f-xl); }
.h3 { font-size: var(--f-l); }
.h4, .h5 { font-weight: var(--fw-sb); line-height: var(--lh-head); }
.h4 { font-size: var(--f-m); }
.h5 { font-size: var(--f-s); }
.h2 .count { margin-left: var(--s1); font-family: var(--sans); font-size: var(--f-s); font-weight: var(--fw-m); color: var(--tx-3); }
.sub { font-family: var(--serif); font-size: var(--f-l); font-weight: var(--fw-sb); line-height: var(--lh-sub); color: var(--accent); }
.kicker { font-size: var(--f-s); font-weight: var(--fw-sb); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--tx-2); }
.text { font-size: var(--f-m); line-height: var(--lh-text); color: var(--tx-2); }
.small { font-size: var(--f-s); color: var(--tx-2); }
.tiny { font-size: var(--f-xs); color: var(--tx-3); }
.accent { color: var(--accent); }
.link { font-size: var(--f-s); font-weight: var(--fw-sb); color: var(--accent); transition: color var(--t); }
.link:hover { color: var(--accent-2); }

.prose { font-size: var(--f-m); line-height: var(--lh-text); color: var(--tx-2); overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--s2); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--s3); font-family: var(--serif); font-size: var(--f-l); font-weight: var(--fw-b); line-height: var(--lh-tight); color: var(--tx); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--s3); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s1); }
.prose li::marker { color: var(--accent); }
.prose a:not(.btn) { color: var(--accent); }
.prose a:not(.btn):hover { color: var(--accent-2); }
.prose b, .prose strong { color: var(--tx); }
.prose img { border-radius: var(--r); }
.prose blockquote { padding-left: var(--s2); border-left: var(--bw-2) solid var(--accent); }

.wide { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.read { width: min(100% - 2 * var(--gutter), var(--read)); margin-inline: auto; }
.sect { margin-top: var(--s4); }
.sect-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.sect-head > :first-child { margin-right: auto; min-width: 0; }
.sect-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.sect-head.is-center > :first-child, .sect-head.is-inline > :first-child { margin-right: 0; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--grid-gap); }
.grid-3 { grid-template-columns: repeat(var(--cols-news), minmax(0, 1fr)); gap: var(--news-gap); }
.grid > #dle-content { display: contents; }
.grid > :not(.card):not(.news), .grid > #dle-content > :not(.card):not(.news) { grid-column: 1 / -1; }
.grid-reel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.grid-reel::-webkit-scrollbar { display: none; }
.grid-reel > * { scroll-snap-align: start; }
.split { display: grid; grid-template-columns: var(--split); gap: var(--split-gap); align-items: start; }
.split img { width: 100%; border-radius: var(--r); }

.btn, input[type="button"], input[type="submit"], .bbcodes, .pager a, .pager-pages > span, .tags a, .ui-dialog .ui-dialog-buttonset button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-width: 0; height: var(--h); padding: 0 var(--s2); border: 0; border-radius: var(--r); background: var(--fill); font-size: var(--f-s); font-weight: var(--fw-sb); line-height: var(--lh-1); color: var(--tx); white-space: nowrap; cursor: pointer; transition: background var(--t), color var(--t); }
.pager a, .pager-pages > span { min-width: var(--h); }
.btn:hover, input[type="button"]:hover, input[type="submit"]:hover, .bbcodes:hover, .pager a:hover, .tags a:hover, .ui-dialog .ui-dialog-buttonset button:hover { background: var(--fill-2); }
.btn.is-active, .btn[aria-current], .btn[aria-selected="true"], .pager-pages > span { background: var(--main); color: var(--white); }
.btn-main, .ui-dialog .ui-dialog-buttonset button:last-child { background: var(--main); color: var(--white); }
.btn-main:hover, .ui-dialog .ui-dialog-buttonset button:last-child:hover { background: var(--main-2); }
.btn-ghost, .pager-pages > span.nav_ext { background: none; color: var(--white); }
.pager-pages > span.nav_ext { color: var(--tx-3); }
.btn-ghost:hover, .btn-ghost.is-open, .btn-ghost.is-active, .btn-ghost[aria-current] { background: var(--fill); color: var(--white); }
.ui-dialog .ui-dialog-buttonset button.ui-button-delete { background: var(--no); color: var(--white); }
.btn:disabled, .btn.is-disabled { opacity: var(--op-off); cursor: default; pointer-events: none; }
.btn-sm { height: var(--h-sm); font-size: var(--f-xs); }
.btn-lg { height: var(--h-lg); padding: 0 var(--s3); font-size: var(--f-m); }
.btn-sq { width: var(--h); padding: 0; }
.btn-sm.btn-sq { width: var(--h-sm); }
.btn-lg.btn-sq { width: var(--h-lg); }
.btn-block { width: 100%; }
.btn-trim > span { max-width: var(--trim); overflow: hidden; text-overflow: ellipsis; }
.btn .arrow { width: var(--i-xs); height: var(--i-xs); transition: transform var(--t-m); }
.btn.is-open .arrow { transform: rotate(var(--turn)); }
.btn .yes { color: var(--yes); }
.btn .no { color: var(--no); }

.tabs { display: flex; flex-wrap: wrap; gap: var(--s1); }
.tabs-fill { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }

.field, input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="url"], select, textarea { width: 100%; height: var(--h-lg); padding: 0 var(--s2); border: 0; border-radius: var(--r); background: var(--fill); font-size: var(--f-input); color: var(--tx); outline: none; transition: box-shadow var(--t), background var(--t); }
textarea { display: block; height: auto; min-height: var(--h-area); padding: var(--s2); resize: vertical; line-height: var(--lh); }
select[multiple] { height: auto; min-height: var(--h-area); padding: var(--s1) var(--s2); }
select option { background: var(--bg); }
input::placeholder, textarea::placeholder { color: var(--tx-3); }
.field:hover, input:hover, select:hover, textarea:hover { background: var(--fill-2); }
.field:focus, input:focus, select:focus, textarea:focus { background: var(--fill-2); box-shadow: var(--focus); }
.field.is-error, .ui-state-error { box-shadow: var(--error) !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input:disabled, select:disabled, textarea:disabled { opacity: var(--op-off); cursor: default; }
input[type="file"] { max-width: 100%; font-size: var(--f-s); color: var(--tx-2); }

.check, label[for="allow_subscribe"], [data-write-form] label:has(> #allow_subscribe) { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--f-s); font-weight: var(--fw-sb); color: var(--tx-2); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: var(--i); height: var(--i); accent-color: var(--accent); cursor: pointer; }

.form { display: grid; gap: var(--s2); }
.row { display: grid; gap: var(--s1); }
.row > label, .label { font-size: var(--f-s); font-weight: var(--fw-sb); color: var(--tx-2); }
.row-line { display: flex; flex-wrap: wrap; gap: var(--s2); }
.row-line > * { flex: 1 1 var(--row-min); width: auto; min-width: 0; }
.row-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); }
.row-end > :first-child:not(:last-child) { margin-right: auto; }

[data-write-form] br { display: none; }
[data-write-form] label:has(> #allow_subscribe), [data-write-form] label[for="allow_subscribe"] { min-height: var(--h-lg); justify-self: start; }
[data-write-form]:has(> #allow_subscribe) { grid-template-columns: auto minmax(0, 1fr); column-gap: 0; }
[data-write-form]:has(> #allow_subscribe) > * { grid-column: 1 / -1; }
[data-write-form]:has(> #allow_subscribe) > #allow_subscribe, [data-write-form]:has(> #allow_subscribe) > label[for="allow_subscribe"] { grid-column: auto; align-self: center; }
[data-write-form] #allow_subscribe { margin: 0 var(--s1) 0 0; vertical-align: middle; }
[data-write-form] label:has(> #allow_subscribe) #allow_subscribe { margin: 0; }
[data-write-form]:has(#allow_subscribe) > .row-end { align-self: start; margin-top: calc(-1 * (var(--h-lg) + var(--s2))); pointer-events: none; }
[data-write-form]:has(#allow_subscribe) > .row-end > * { pointer-events: auto; }
.captcha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.captcha input { width: var(--field-s); }
.captcha img { border-radius: var(--r); }
.g-recaptcha iframe { color-scheme: normal; }
.warn { font-size: var(--f-s); color: var(--no); }

.drop { position: relative; display: flex; justify-content: center; }
.pop { position: absolute; top: calc(100% + var(--s1)); z-index: var(--z-pop); padding: var(--s1); border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow); }
.pop-grid { display: grid; grid-template-columns: repeat(var(--pop-cols), var(--pop-cell)); gap: var(--s1); }
.pop-grid > li, .panel-grid > li { display: grid; }

.modal { width: min(var(--modal), 100% - 2 * var(--s2)); max-height: calc(100% - 2 * var(--s2)); margin: auto; padding: var(--s3); border: 0; border-radius: var(--r); background: var(--bg); color: var(--tx); box-shadow: var(--shadow); overflow: auto; }
.modal::backdrop { background: var(--veil); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.modal-body { display: grid; gap: var(--s2); }
.modal-links { display: grid; grid-template-columns: repeat(var(--links-cols), minmax(0, 1fr)); gap: var(--s1); }
.modal-links:empty { display: none; }

.card { min-width: 0; }
.card a { display: grid; gap: var(--s1); min-width: 0; }
.card-img { position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--r); background: var(--fill); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-l), filter var(--t-l); }
.card-img svg { position: relative; width: var(--i-l); height: var(--i-l); color: var(--white); opacity: 0; transition: opacity var(--t-m); }
.card a:hover .card-img img { transform: scale(var(--zoom)); filter: var(--filter-hover); }
.card a:hover .card-img svg { opacity: 1; }
.card-text { display: grid; min-width: 0; }
.card-num { font-size: var(--f-xs); color: var(--tx-3); white-space: nowrap; }
.card-name { overflow: hidden; font-size: var(--f-s); font-weight: var(--fw-sb); line-height: var(--lh-head); white-space: nowrap; text-overflow: ellipsis; transition: color var(--t); }
.card a:hover .card-name, .card.is-current .card-name { color: var(--accent); }

.news { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.news-img { grid-row: 1; grid-column: 1; display: block; aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--r); background: var(--fill); }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-l); }
.news:hover .news-img img { transform: scale(var(--zoom)); }
.news-body { display: contents; }
.news-date { position: relative; z-index: var(--z-1); grid-row: 1; grid-column: 1; align-self: end; justify-self: start; margin: var(--s1); background: var(--bg); pointer-events: none; }
.news-name { margin-top: var(--s1); font-size: var(--f-m); font-weight: var(--fw-sb); line-height: var(--lh-head); }
.news-name a:hover { color: var(--accent); }
.news-text { display: -webkit-box; margin-top: var(--s1); overflow: hidden; font-size: var(--f-s); line-height: var(--lh); color: var(--tx-2); -webkit-line-clamp: var(--clamp); -webkit-box-orient: vertical; }

.dl > div { display: grid; grid-template-columns: var(--dl-label) minmax(0, 1fr); gap: var(--s2); padding: var(--s1) 0; border-top: var(--bw) solid var(--line); font-size: var(--f-s); }
.dl dt { color: var(--tx-3); }
.dl dd { color: var(--tx); }

.badges { display: flex; flex-wrap: wrap; gap: var(--s1); }
.badge { display: inline-flex; align-items: center; height: var(--h-badge); padding: 0 var(--s1); border-radius: var(--r); box-shadow: var(--frame); font-size: var(--f-s); font-weight: var(--fw-sb); line-height: var(--lh-1); color: var(--tx-2); white-space: nowrap; }

.pane { margin-top: var(--s3); }

.note { padding: var(--s3); border-radius: var(--r); background: var(--fill); font-size: var(--f-s); color: var(--tx-2); }
.note b { display: block; margin-bottom: var(--s1); font-size: var(--f-m); color: var(--tx); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s1); margin-top: var(--s3); }
.pager-pages { display: contents; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s1); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s1); font-size: var(--f-s); color: var(--tx-3); }
.crumbs a:hover { color: var(--tx); }

.site-head { position: relative; z-index: var(--z-head); background: var(--head); }
.site-head:has(.panel.is-open) { background: var(--bg); }
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); height: var(--top); }
.logo { justify-self: start; font-family: var(--serif); font-size: var(--f-l); font-weight: var(--fw-b); white-space: nowrap; }
.menu { display: flex; align-items: center; gap: var(--s1); }
.top-right { justify-self: end; display: flex; align-items: center; gap: var(--s1); }
.menu-btn { display: none; }

.panel { display: none; }
.panel-grid { display: grid; grid-template-columns: repeat(var(--panel-cols), minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s1); }

.hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--top)); }
.hero-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: min(100%, var(--hero)); margin-inline: auto; -webkit-mask-image: var(--mask-hero); mask-image: var(--mask-hero); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus); }
.hero-bg::after { content: ""; position: absolute; inset: 0 0 calc(-1 * var(--bw-2)) 0; background: var(--grad-hero); }
.hero-in { position: relative; padding-top: calc(var(--top) + var(--s4)); }
.hero-body { display: grid; gap: var(--s2); max-width: var(--hero-text); }
.hero-name { display: grid; gap: var(--s1); }

.title { text-align: center; }
.title .h1 { text-shadow: var(--shadow-text); }
.title .sub, .h1 .sub { margin-top: var(--s1); }
.h1 .sub { display: block; }

.backdrop { position: absolute; top: 0; left: 0; right: 0; height: var(--backdrop-h); z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: var(--mask-backdrop); mask-image: var(--mask-backdrop); }
.backdrop::before { content: ""; position: absolute; inset: calc(-1 * var(--bleed)); background: var(--img) center 30% / cover no-repeat; filter: var(--filter-backdrop); opacity: var(--op-backdrop); }
.backdrop-dim::before { filter: var(--filter-backdrop-dim); opacity: var(--op-backdrop-dim); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: var(--grad-backdrop); }

.screen { position: relative; aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--r); background: var(--screen); box-shadow: var(--shadow-screen); }
.screen::before { content: ""; position: absolute; inset: calc(-1 * var(--screen-bleed)); background: var(--img) center / cover no-repeat; filter: var(--filter-screen); }
.screen-pane { position: absolute; inset: 0; z-index: var(--z-1); }
.screen-pane video-player, .screen-pane iframe { display: block; width: 100%; height: 100%; border: 0; }
.switch { position: relative; z-index: var(--z-1); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s1); }
.switch:not(:has([rel="prev"])) { grid-template-columns: auto minmax(0, 1fr); }
.switch:not(:has([rel="next"])) { grid-template-columns: minmax(0, 1fr) auto; }
.switch [rel="prev"] { justify-content: flex-start; }
.switch [rel="next"] { justify-content: flex-end; }
.under { position: relative; z-index: var(--z-1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.rate { display: flex; align-items: center; gap: var(--s1); }
.rate > a { display: flex; }
.rate .btn span { font-variant-numeric: tabular-nums; }
.score { display: grid; gap: var(--s1); width: var(--score); font-size: var(--f-s); font-weight: var(--fw-b); }
.score-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.score-head b { color: var(--white); }
.score-bar, .pm_progress_bar { height: var(--h-bar); border-radius: var(--r-bar); overflow: hidden; }
.score-bar { background: var(--no); }
.score-bar i { display: block; width: 0; height: 100%; background: var(--yes); }
.rate:not(.has-votes) .score-bar { background: var(--fill-2); }
.acts { display: flex; flex-wrap: wrap; gap: var(--s1); }

.thread { margin-top: var(--s3); }
.c { padding: var(--s3) 0; border-top: var(--bw) solid var(--line); }
.c-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.c-text { margin-top: var(--s1); font-size: var(--f-m); line-height: var(--lh); color: var(--tx-2); overflow-wrap: anywhere; }
.c-text img { border-radius: var(--r); }
.c-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s1); font-size: var(--f-s); font-weight: var(--fw-sb); color: var(--tx-3); }
.c-acts a, .c-acts a > span { display: inline-flex; align-items: center; gap: var(--s1); transition: color var(--t); }
.c-acts a:hover { color: var(--tx); }
.c-acts svg { width: var(--i-s); height: var(--i-s); }
.c-acts .yes svg { color: var(--yes); }
.c-acts .no svg { color: var(--no); }
.c-acts .end { margin-left: auto; }
.c-num { min-width: var(--num); font-weight: var(--fw-b); font-variant-numeric: tabular-nums; }
.c-admin { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s1); font-size: var(--f-xs); color: var(--tx-3); }
.comments-tree-list .comments-tree-list { margin-left: var(--s3); padding-left: var(--s3); border-left: var(--bw-2) solid var(--accent); }
.comments-tree-list .comments-tree-list .c:first-child { border-top: 0; }
.ratingplus { color: var(--yes); }
.ratingminus { color: var(--no); }
.ratingzero { color: var(--tx-3); }

.media { display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr); gap: var(--media-gap); align-items: start; padding: var(--s3) 0; border-top: var(--bw) solid var(--line); }
.media:first-child { border-top: 0; padding-top: 0; }
.media-img { display: block; aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--r); background: var(--fill); }
.media-img.is-square { aspect-ratio: var(--ratio-sq); }
.media-img img { width: 100%; height: 100%; object-fit: cover; }
.media-body { display: grid; gap: var(--s1); min-width: 0; }

.foot { margin-top: var(--s4); padding: var(--s3) 0; background: var(--bg-2); }
.foot-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s3); }
.foot-in > .crumbs { grid-column: 1 / -1; }
.foot .h3 { white-space: nowrap; }
.counter { position: absolute; width: var(--px); height: var(--px); overflow: hidden; }

.tableform, table.xfields, .xfields_table, .searchtable table { width: 100%; border-collapse: collapse; }
.tableform td, table.xfields td, .xfields_table td, .searchtable td { padding: var(--s1) 0; vertical-align: top; }
.xfieldsrow { padding-top: var(--s1); clear: both; }
.xfieldscolleft { float: left; width: var(--xf-l); padding-top: var(--s2); font-size: var(--f-s); color: var(--tx-2); }
.xfieldscolright { float: left; width: var(--xf-r); }
.xfieldsnote, .xfieldsdescr { font-size: var(--f-xs); color: var(--tx-3); }
.xfieldimagegallery, .comments-image-gallery { display: flex; flex-wrap: wrap; gap: var(--s1); }
.xfieldimagegallery img, .comments-image-gallery img { width: var(--gallery); height: var(--gallery); object-fit: cover; border-radius: var(--r); }
.table-wrap { overflow-x: auto; }
.table-wrap td, .table-wrap th, .userstop td, .userstop th { padding: var(--s1) var(--s2); border-top: var(--bw) solid var(--line); font-size: var(--f-s); text-align: left; }
.pm_progress_bar { margin-top: var(--s1); background: var(--fill-2); }
.pm_progress_bar span { display: block; height: 100%; background: var(--accent); }
#loading-layer { padding: var(--s1) var(--s2); border-radius: var(--r); background: var(--fill); color: var(--tx); box-shadow: var(--shadow); }
.quote, .title_quote, .title_spoiler, .text_spoiler, .scriptcode, .hide { padding: var(--s2); background: var(--fill); }
.quote { margin: var(--s2) 0; border-left: var(--bw-2) solid var(--accent); border-radius: 0 var(--r) var(--r) 0; }
.title_quote { margin-top: var(--s2); border-left: var(--bw-2) solid var(--accent); font-weight: var(--fw-sb); }
.title_spoiler { margin-top: var(--s2); border-radius: var(--r) var(--r) 0 0; font-weight: var(--fw-sb); }
.title_spoiler img { display: inline; margin-right: var(--s1); vertical-align: middle; }
.text_spoiler { margin-bottom: var(--s2); border-radius: 0 0 var(--r) var(--r); }
.title_spoiler + .text_spoiler { margin-top: 0; border-top: var(--bw) solid var(--line); }
.scriptcode, .hide { border-radius: var(--r); }
.scriptcode { font-family: var(--mono); font-size: var(--f-s); white-space: pre-wrap; }
.rating, .unit-rating { width: calc(5 * var(--star)); height: var(--star); }
.unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating { background-image: url("../dleimages/rating.png"); background-size: var(--star) auto; }
.unit-rating { position: relative; background-position: 0 calc(-2 * var(--star)); }
.unit-rating li { float: left; text-indent: var(--off); }
.unit-rating li a { position: absolute; z-index: var(--z-star); display: block; width: var(--star); height: var(--star); text-indent: var(--off); }
.unit-rating li a:hover { left: 0; z-index: var(--z-2); background-position: 0 calc(-1 * var(--star)); }
.unit-rating a.r1-unit { left: 0; }
.unit-rating a.r1-unit:hover { width: var(--star); }
.unit-rating a.r2-unit { left: var(--star); }
.unit-rating a.r2-unit:hover { width: calc(2 * var(--star)); }
.unit-rating a.r3-unit { left: calc(2 * var(--star)); }
.unit-rating a.r3-unit:hover { width: calc(3 * var(--star)); }
.unit-rating a.r4-unit { left: calc(3 * var(--star)); }
.unit-rating a.r4-unit:hover { width: calc(4 * var(--star)); }
.unit-rating a.r5-unit { left: calc(4 * var(--star)); }
.unit-rating a.r5-unit:hover { width: calc(5 * var(--star)); }
.unit-rating li.current-rating { position: absolute; z-index: var(--z-1); display: block; height: var(--star); text-indent: var(--off); background-position: 0 0; }
#dropmenudiv, #searchsuggestions, .ui-menu { padding: var(--s1); border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow); font-size: var(--f-s); }
#dropmenudiv { min-width: var(--menu-min); }
#dropmenudiv a, .ui-menu .ui-menu-item a, .ui-menu .ui-menu-item div, #searchsuggestions a, #searchsuggestions span.notfound { display: block; padding: var(--s1) var(--s2); border-radius: var(--r); }
#dropmenudiv a, .ui-menu .ui-menu-item a, .ui-menu .ui-menu-item div { white-space: nowrap; }
#dropmenudiv a:hover, .ui-menu .ui-state-focus, .ui-menu .ui-state-active, #searchsuggestions a:hover { background: var(--fill); }
#searchsuggestions { z-index: var(--z-suggest); width: var(--suggest); max-width: calc(100vw - 2 * var(--s3)); }
#searchsuggestions a span { display: block; }
#searchsuggestions span.searchheading { font-weight: var(--fw-sb); }
#searchsuggestions .break { display: none; }
.ui-autocomplete { position: absolute; z-index: var(--z-suggest); cursor: default; }
.ui-front { z-index: var(--z-ui); }
.ui-widget-overlay { position: fixed; inset: 0; background: var(--veil); }
.ui-helper-clearfix::after { content: ""; display: block; clear: both; }
.ui-helper-hidden-accessible { display: none; }
.ui-dialog { position: absolute; width: var(--modal); max-width: calc(100vw - 2 * var(--s2)); overflow: hidden; padding: var(--s3); border-radius: var(--r); background: var(--bg); color: var(--tx); box-shadow: var(--shadow); outline: none; }
.ui-dialog.modalfixed { box-shadow: var(--shadow), 0 0 0 var(--veil-spread) var(--veil); }
.ui-dialog .ui-dialog-titlebar { position: relative; display: flex; align-items: center; min-height: var(--h); margin-bottom: var(--s3); padding-right: calc(var(--h) + var(--s2)); }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-dialog .ui-dialog-title { font-family: var(--serif); font-size: var(--f-l); font-weight: var(--fw-b); line-height: var(--lh-tight); }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; top: 0; right: 0; display: block; width: var(--h) !important; height: var(--h) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--r); background: var(--fill) !important; cursor: pointer; }
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--fill-2) !important; }
.ui-dialog .ui-dialog-titlebar-close .ui-icon, .ui-dialog .ui-dialog-titlebar-close .ui-button-text { position: absolute; inset: 0; display: block; overflow: hidden; text-indent: var(--off); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f2e8dc'%3e%3cpath d='M.3.3a1 1 0 0 1 1.4 0L8 6.6 14.3.3a1 1 0 1 1 1.4 1.4L9.4 8l6.3 6.3a1 1 0 0 1-1.4 1.4L8 9.4l-6.3 6.3a1 1 0 0 1-1.4-1.4L6.6 8 .3 1.7a1 1 0 0 1 0-1.4z'/%3e%3c/svg%3e") center / var(--i-close) no-repeat; }
.ui-icon, .ui-button-icon-only { overflow: hidden; text-indent: var(--off); }
.ui-dialog .ui-dialog-content { position: relative; height: auto !important; max-height: var(--dialog-h); overflow: auto; font-size: var(--f-m); color: var(--tx-2); }
.ui-dialog .ui-dialog-content textarea, .ui-dialog .ui-dialog-content input[type="text"] { width: 100% !important; }
.ui-dialog-content h2 { display: inline; font-size: inherit; }
.ui-dialog .ui-dialog-buttonpane { margin-top: var(--s3); }
.ui-dialog .ui-dialog-buttonset { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); }
.loginbox.ui-dialog, .loginbox .ui-dialog-content { overflow: visible !important; }

@media (max-width: 760px) {
  .tabs-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .tabs-scroll::-webkit-scrollbar { display: none; }
  .tabs-fill.tabs-scroll { display: flex; }
  .tabs-scroll .btn { flex: none; width: var(--h-lg); }
  .hide-m { display: none !important; }
  .btn-m-sq { width: var(--h); padding: 0; }
  .btn-lg.btn-m-sq { width: var(--h-lg); }
  .btn-m-sq > span { display: none; }
  .btn-lg { padding: 0 var(--s2); font-size: var(--f-s); }
  .btn-m-block { flex: auto; }
  .screen { width: 100vw; margin-left: calc(-1 * var(--gutter)); border-radius: 0; }
  .under { flex-direction: column; align-items: stretch; }
  .rate { width: 100%; }
  .score { flex: auto; width: auto; min-width: 0; }
  .acts-half { display: grid; grid-template-columns: var(--acts-cols); }
  .acts-half > a, .acts-half .btn { width: 100%; }
  .row-line > * { flex-basis: 100%; }
  .row-end .btn { width: 100%; }
  [data-write-form]:has(#allow_subscribe) > .row-end { margin-top: 0; }
  .comments-tree-list .comments-tree-list { margin-left: var(--s1); padding-left: var(--s2); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .top { display: flex; gap: var(--s1); }
  .top > .menu { display: none; }
  .top-right { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .panel.is-open { display: grid; gap: var(--s2); padding-bottom: var(--s3); }
}

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