/* Public components and visual variants.
 * camelCase class names; compose layout, component and utility classes in HTML.
 * Rules retain their cascade order; properties use standard CSS syntax.
 */

/* Тема и основные размеры публичной страницы. */
#day7Mods {
  /* Готовые текстуры сохраняют исходные пиксели; хеши в именах обновляют кеш. */
  --d7Grain:url("grainTexture.eba9f579ac73.png");
  --d7Scratches:url("scratchTexture.ecc064005f06.png");
  --d7Distress:url("distressTexture.55cf7ad40116.png");
  --d7Paper:url("paperTexture.377780afc074.png");
  --d7Bg:#111413;
  --d7Panel:#1a1e1c;
  --d7Line:#333a35;
  --d7Text:#eeeae2;
  --d7Dim:#b3b8af;
  --d7Red:#c74840;
  --d7Radius:5px;
  --d7ForestOpacity:1;
  color-scheme: dark;
  background: var(--d7Bg);
  color: var(--d7Text);
  font: 16px/1.65 Arial,sans-serif;
  --d7Gutter:max(5.5%,calc((100% - 1440px)/2));
  width: 100%;
  overflow-wrap: anywhere;
  isolation: isolate;
}

/* Браузер выбирает плотность бумажной текстуры, сохраняя её размер 256 CSS-пикселей. */
@supports (background-image: image-set(url("paperTexture.377780afc074.png") 1x)) {
  #day7Mods {
    --d7Paper:image-set(url("paperTexture.377780afc074.png") 1x,url("paperTexture2x.da98f954ac71.png") 2x);
  }
}

#day7Mods * {
  box-sizing: border-box;
}

#day7Mods [hidden] {
  display: none!important;
}

#day7Mods h1,#day7Mods h2,#day7Mods h3,#day7Mods p {
  margin: 0;
}

#day7Mods button,#day7Mods a,#day7Mods summary {
  color: inherit;
  font: inherit;
}

#day7Mods button,#day7Mods a {
  text-decoration: none;
}

#day7Mods button {
  cursor: inherit;
}

#day7Mods a:focus-visible,#day7Mods button:focus-visible,#day7Mods summary:focus-visible {
  outline: 2px solid #eeeae2;
  outline-offset: 5px;
}

#day7Mods button {
  border: 0;
}

/* Объекты раскладки и текстовые утилиты. */
#day7Mods .d7Shell {
  padding-inline: var(--d7Gutter);
}

#day7Mods .d7Mono {
  font: 11px/1.5 Consolas,monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#day7Mods .d7Dim {
  color: var(--d7Dim);
}

/* Шапка и навигация. */
#day7Mods .d7Header {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--d7Line);
  padding-right: max(100px,5.5%);
}

#day7Mods .d7Logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -1px;
}

#day7Mods .d7LogoSeven {
  color: var(--d7Red);
  font-size: 30px;
  line-height: 1;
  font-style: italic;
  transform: skew(-6deg);
}

#day7Mods .d7Nav {
  display: flex;
  gap: 25px;
  font-size: 14px;
}

#day7Mods .d7Nav a:hover {
  color: var(--d7Text);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Первый экран и декоративный пейзаж. */
#day7Mods .d7Hero {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--d7Line);
}

#day7Mods .d7HeroCopy {
  position: relative;
  z-index: 2;
  padding-block: 46px;
  max-width: 620px;
}

#day7Mods .d7Eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dcb8a9;
  margin-bottom: 18px;
}

#day7Mods .d7Rule {
  width: 26px;
  height: 2px;
  background: var(--d7Red);
}

#day7Mods h1 {
  font-family: Impact,'Arial Narrow',Arial,sans-serif;
  font-size: clamp(34px,5.7vw,62px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 1.2px;
  text-wrap: balance;
}

#day7Mods h1 span {
  color: #d8b8a0;
}

#day7Mods .d7Intro {
  max-width: 400px;
  color: #c2c5bc;
  font-size: 16px;
  margin-top: 18px;
  line-height: 1.7;
}

#day7Mods .d7Actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}

/* Оформление действий; структуру кнопки задаёт общий uiButton. */
#day7Mods .d7Button {
  gap: 12px;
  padding: 12px 20px;
  background: var(--d7Red);
  border: 1px solid transparent;
  border-radius: var(--d7Radius);
  color: #fff7ee;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
}

#day7Mods .d7Button:hover {
  filter: brightness(1.1);
}

#day7Mods .d7Secondary {
  background: transparent;
  border: 1px solid #495047;
  color: var(--d7Text);
}

#day7Mods .d7Small {
  font-size: 12px;
  color: var(--d7Dim);
}

#day7Mods .d7Sky {
  position: absolute;
  inset: 0 0 0 33%;
  background: radial-gradient(ellipse at 68% 35%,#623529 0, #2b2620 35%,#151a17 70%);
  opacity: var(--d7ForestOpacity);
}

#day7Mods .d7Sky:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,var(--d7Bg),transparent 68%),linear-gradient(0deg,var(--d7Bg),transparent 45%);
}

#day7Mods .d7Moon {
  position: absolute;
  width: 210px;
  height: 210px;
  right: 16%;
  top: 35px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 32%,#dd8f63 0,#cc6f50 28%,#9e4e3d 74%,#5c3029 100%);
  box-shadow: 0 0 80px #c7484019;
  overflow: hidden;
}

#day7Mods .d7Moon:after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 25%,#6c362933 0 9%,transparent 11%),radial-gradient(ellipse at 32% 62%,#5e302244 0 16%,transparent 18%),radial-gradient(ellipse at 68% 72%,#df986d44 0 19%,transparent 21%);
  transform: rotate(-20deg);
}

#day7Mods .d7Hills {
  position: absolute;
  inset: 170px -5% -10px 0;
  background: #212d25;
  clip-path: polygon(0 55%,12% 35%,20% 42%,36% 16%,46% 30%,61% 3%,73% 20%,82% 10%,100% 42%,100% 100%,0 100%);
}

#day7Mods .d7Woods {
  position: absolute;
  inset: 100px -2% 0 0;
  background: #17211b;
  clip-path: polygon(0 100%,0 73%,4% 73%,7% 39%,10% 73%,13% 73%,15% 18%,19% 72%,22% 72%,25% 42%,28% 79%,31% 79%,34% 26%,38% 79%,43% 79%,47% 1%,52% 80%,55% 80%,58% 35%,62% 81%,68% 81%,72% 15%,77% 77%,81% 77%,86% 28%,91% 77%,94% 77%,97% 5%,100% 60%,100% 100%);
}

#day7Mods .d7Foreground {
  position: absolute;
  inset: 190px 0 -15px 0;
  background: #0f1713;
  clip-path: polygon(0 100%,0 75%,8% 79%,13% 30%,18% 80%,28% 78%,34% 50%,39% 83%,55% 87%,62% 55%,67% 84%,82% 82%,88% 16%,94% 81%,100% 86%,100% 100%);
}

#day7Mods .d7Day {
  position: absolute;
  right: 7%;
  bottom: 24px;
  color: #a3a79b;
  z-index: 1;
  font: 11px/1 Consolas,monospace;
  letter-spacing: 3px;
}

#day7Mods .d7Strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  min-height: 55px;
  padding-block: 12px;
  border-bottom: 1px solid var(--d7Line);
  color: #b9c0b3;
  font-size: 13px;
}

#day7Mods .d7Strip span {
  display: flex;
  gap: 9px;
  align-items: center;
}

#day7Mods .d7Strip svg {
  width: 15px;
  height: 15px;
  color: #c1b19d;
}

#day7Mods .d7Catalog {
  padding-block: 34px 38px;
}

#day7Mods .d7SectionTop {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 21px;
}

#day7Mods .d7SectionKicker {
  color: #c59f8b;
  font: 11px/1.5 Consolas,monospace;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

#day7Mods h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.6px;
}

#day7Mods .d7Count {
  color: var(--d7Dim);
  font-size: 12px;
  padding-bottom: 4px;
}

/* Карточка мода и блок раскрываемых подробностей. */
#day7Mods .d7Mod {
  display: grid;
  grid-template-columns: minmax(180px,30%) minmax(0,1fr);
  background: var(--d7Panel);
  border: 1px solid var(--d7Line);
  border-radius: var(--d7Radius);
  overflow: hidden;
}

#day7Mods .d7Cover {
  position: relative;
  min-height: 280px;
  background: repeating-linear-gradient(-45deg,transparent 0 32px,#d77a4310 32px 33px),radial-gradient(ellipse at 50% 50%,#634333,#28261f 70%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  color: #eee0c6;
  isolation: isolate;
}

#day7Mods .d7Cover:after {
  content: '7';
  position: absolute;
  z-index: -1;
  right: -18px;
  bottom: -80px;
  font: 350px/.9 Impact,sans-serif;
  opacity: .07;
  transform: rotate(-12deg);
}

#day7Mods .d7CoverTitle {
  font: 500 clamp(30px,3.4vw,43px)/1.08 Impact,'Arial Narrow',sans-serif;
  letter-spacing: .5px;
  overflow-wrap: normal;
}

#day7Mods .d7CoverTitle small {
  display: block;
  font: 11px/1.5 Consolas,monospace;
  letter-spacing: 2px;
  margin-top: 12px;
  color: #d6ae82;
}

#day7Mods .d7CoverFoot {
  font: 11px/1.4 Consolas,monospace;
  letter-spacing: 2px;
  border-top: 1px solid #a57b4c66;
  padding-top: 10px;
}

#day7Mods .d7ModBody {
  padding: 23px 26px;
}

#day7Mods .d7ModLabels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

#day7Mods .d7Tag {
  padding: 3px 7px;
  border: 1px solid #485045;
  border-radius: 3px;
  font: 11px/1.4 Consolas,monospace;
  color: #c5cbbf;
}

#day7Mods .d7TagPrototype {
  border-color: #805b3b;
  color: #e7bf8e;
  background: #76533719;
}

#day7Mods h3 {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.6px;
}

#day7Mods .d7ModDesc {
  margin-top: 10px;
  color: #bfc4b9;
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
  max-width: 650px;
}

#day7Mods .d7VersionLine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-block: 17px;
  font-size: 14px;
  color: #b5bcb0;
}

#day7Mods .d7VersionLine strong {
  color: var(--d7Text);
  font-weight: 500;
}

#day7Mods .d7ModActions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

#day7Mods .d7LinkButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 8px 0;
  color: #d9dbd3;
  font-size: 14px;
}

#day7Mods .d7LinkButton:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

#day7Mods .d7Note {
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #abb2a4;
  margin-top: 13px;
}

#day7Mods .d7Expanded {
  padding: 22px 25px;
  background: #171b18;
  border-top: 1px solid var(--d7Line);
  grid-column: 1/-1;
  font-size: 15px;
  line-height: 1.8;
}

#day7Mods .d7Expanded h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

#day7Mods .d7Expanded p {
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  max-width: 78ch;
  color: #e5decb;
}

#day7Mods .d7Expanded p+p {
  margin-top: 8px;
}

#day7Mods .d7Expanded code {
  overflow-wrap: anywhere;
  color: #dbc5ac;
  font: 12px/1.5 Consolas,monospace;
}

#day7Mods .d7ReleaseHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 9px;
}

#day7Mods .d7ReleaseDetails {
  color: var(--d7Dim);
  margin-block: 10px 15px;
}

#day7Mods .d7Close {
  color: #c5ccbf;
  background: transparent;
  padding: 8px;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

#day7Mods .d7Status {
  color: #e6bf96;
  margin-top: 12px;
  min-height: 20px;
}

/* Инструкция установки и её шаги. */
#day7Mods .d7Guide {
  padding-block: 30px 34px;
  background: #151916;
  border-block: 1px solid var(--d7Line);
}

#day7Mods .d7Steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 25px;
  margin-top: 23px;
}

#day7Mods .d7Step {
  padding-left: 14px;
  border-left: 2px solid #675344;
}

#day7Mods .d7StepNumber {
  font: 11px/1.4 Consolas,monospace;
  color: #c79c7d;
  margin-bottom: 7px;
  letter-spacing: 2px;
}

#day7Mods .d7Step h3 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 6px;
}

#day7Mods .d7Step p {
  font-size: 12px;
  color: var(--d7Dim);
}

#day7Mods .d7Step code {
  font: 11px/1.5 Consolas,monospace;
  color: #d4bea6;
}

/* Ответы на вопросы и подвал. */
#day7Mods .d7Faq {
  padding-block: 30px 28px;
}

#day7Mods .d7Faq h2 {
  font-size: 21px;
  margin-bottom: 14px;
}

#day7Mods details {
  border-top: 1px solid var(--d7Line);
  padding: 13px 0;
}

#day7Mods details:last-of-type {
  border-bottom: 1px solid var(--d7Line);
}

#day7Mods summary {
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

#day7Mods summary:after {
  content: '+';
  color: #c4aa8d;
  font: 20px/1 Consolas,monospace;
}

#day7Mods details[open] summary:after {
  content: '−';
}

#day7Mods details p {
  max-width: 690px;
  padding-top: 10px;
  color: var(--d7Dim);
  font-size: 15px;
}

#day7Mods .d7Footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  padding-block: 20px;
  border-top: 1px solid var(--d7Line);
  font-size: 13px;
  color: #a1aa9c;
}

#day7Mods .d7Footer b {
  font-weight: 500;
  letter-spacing: 1px;
  color: #d0d4c9;
}

#day7Mods svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Адаптивное поведение и пользовательские ограничения отображения. */
@media(max-width:650px) {
  #day7Mods .d7Header {
    padding-right: 100px;
    min-height: 96px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
  }
  #day7Mods .d7Nav {
    gap: 18px;
    font-size: 11px;
  }
  #day7Mods .d7Logo {
    font-size: 20px;
  }
  #day7Mods .d7Hero {
    min-height: 365px;
  }
  #day7Mods .d7HeroCopy {
    padding-block: 35px;
  }
  #day7Mods .d7Sky {
    left: 20%;
    opacity: calc(var(--d7ForestOpacity) * .65);
  }
  #day7Mods .d7Moon {
    right: 8%;
    width: 180px;
    height: 180px;
    top: 25px;
  }
  #day7Mods .d7Intro {
    max-width: 295px;
  }
  #day7Mods .d7Strip {
    gap: 10px 19px;
    font-size: 11px;
  }
  #day7Mods .d7Mod {
    grid-template-columns: 1fr;
  }
  #day7Mods .d7Cover {
    min-height: 180px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
  }
  #day7Mods .d7CoverTitle {
    grid-row: 1/3;
    grid-column: 1;
    font-size: 33px;
  }
  #day7Mods .d7Cover>span {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  #day7Mods .d7CoverFoot {
    grid-column: 2;
    align-self: end;
    grid-row: 2;
    text-align: right;
  }
  #day7Mods .d7CoverTitle small {
    font-size: 11px;
  }
  #day7Mods .d7ModBody {
    padding: 22px;
  }
  #day7Mods .d7Steps {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  #day7Mods .d7Step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0 5px;
  }
  #day7Mods .d7StepNumber {
    grid-row: 1/3;
    padding-top: 2px;
  }
  #day7Mods .d7SectionTop {
    align-items: center;
  }
  #day7Mods h2 {
    font-size: 23px;
  }
  #day7Mods .d7Count {
    white-space: nowrap;
  }
  #day7Mods .d7Day {
    display: none;
  }
}

/* Адаптивное поведение и пользовательские ограничения отображения. */
@media(max-width:400px) {
  #day7Mods .d7Cover {
    display: flex;
    min-height: 210px;
  }
  #day7Mods .d7Cover>span,#day7Mods .d7CoverFoot {
    text-align: left;
    align-self: auto;
  }
}

#day7Mods {
  --d7Bg:#171714;
  --d7Panel:#25251f;
  --d7Line:#514c3c;
  --d7Text:#eae1cc;
  --d7Dim:#c1baa6;
  --d7Red:#b84032;
  --d7Radius:1px;
  --d7Wear:.38;
  position: relative;
  background-color: var(--d7Bg);
  background-image: linear-gradient(110deg,#161813e8,#201f18e8),var(--d7Grain);
  background-size: auto,280px 280px;
}

#day7Mods .d7Header {
  position: relative;
  border-bottom: 2px solid #5f5440;
  background-color: #20221b;
  background-image: linear-gradient(0deg,#0f100dc9,transparent 23%,#d0b47a0c 48%,#0f100d99 100%),var(--d7Grain);
  background-size: auto,240px 240px;
  box-shadow: inset 0 -1px #0a0b08,inset 0 1px #7c70503d;
}

#day7Mods .d7Header:before,#day7Mods .d7Header:after {
  content: '';
  position: absolute;
  left: 17px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(130deg,#8d8163,#312f25 60%,#999076);
  box-shadow: 0 1px 2px #000,0 38px 0 #4c4938;
  pointer-events: none;
}

#day7Mods .d7Header:after {
  left: auto;
  right: 19px;
}

#day7Mods .d7Logo {
  font-family: Impact,'Arial Narrow',sans-serif;
  font-size: 28px;
  letter-spacing: .6px;
  font-weight: 500;
  mask-image: var(--d7Distress);
  mask-size: 440px 280px;
}

#day7Mods .d7LogoSeven {
  font-size: 35px;
  color: var(--d7Red);
  text-shadow: 1px 1px #20100c;
}

#day7Mods .d7Nav {
  color: #d5cbb5;
  letter-spacing: .3px;
}

#day7Mods .d7Nav a {
  padding-block: 10px;
}

#day7Mods .d7Hero {
  min-height: 430px;
  background-color: #171714;
  background-image: linear-gradient(105deg,#202016c7,#15180fa6 58%,#25191333),var(--d7Grain);
  background-size: auto,300px 300px;
  border-bottom: 0;
  overflow: hidden;
}

#day7Mods .d7Hero:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--d7Scratches);
  background-size: 690px 420px;
  opacity: var(--d7Wear);
  mix-blend-mode: screen;
}

#day7Mods .d7Hero:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 16px;
  background: #171714;
  z-index: 2;
  clip-path: polygon(0 55%,2% 70%,4% 45%,7% 60%,10% 20%,12% 65%,14% 40%,18% 70%,23% 25%,25% 40%,30% 15%,34% 65%,38% 45%,42% 80%,45% 35%,49% 65%,52% 20%,56% 45%,61% 80%,65% 35%,69% 65%,73% 40%,77% 70%,80% 20%,83% 55%,87% 25%,91% 60%,95% 45%,98% 70%,100% 30%,100% 100%,0 100%);
}

#day7Mods .d7HeroCopy {
  padding-block: 47px 55px;
  max-width: 645px;
}

#day7Mods .d7Eyebrow {
  color: #d6c19b;
  letter-spacing: 2px;
}

#day7Mods h1 {
  font-size: clamp(36px,5.6vw,62px);
  letter-spacing: 1.2px;
  line-height: 1.06;
  color: #eee1c4;
  mask-image: var(--d7Distress);
  mask-size: 550px 370px;
  text-shadow: 2px 3px 0 #11120d;
}

#day7Mods h1 span {
  color: #c3a77c;
}

#day7Mods .d7Intro {
  color: #c9c4b1;
  max-width: 355px;
}

#day7Mods .d7Small {
  color: #c4bba3;
  font-size: 13px;
}

#day7Mods .d7Sky {
  left: 31%;
  background: radial-gradient(ellipse at 72% 29%,#724636 0,#322b21 38%,#1a2117 74%);
}

#day7Mods .d7Sky:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--d7Grain);
  background-size: 190px 190px;
  opacity: .6;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

#day7Mods .d7Sky:after {
  z-index: 3;
  background: linear-gradient(90deg,#171714 0,#171714ce 15%,#17171422 64%,#17171411),linear-gradient(0deg,#171714,transparent 47%);
}

#day7Mods .d7Moon {
  right: 14%;
  top: 29px;
  width: 225px;
  height: 225px;
  background: radial-gradient(ellipse at 34% 25%,#d38b5f,#b65c42 50%,#7b3d2c 85%,#4f2821);
  box-shadow: 0 0 30px #c3693b22,0 0 100px #c3693b14;
}

#day7Mods .d7Moon:after {
  background-image: radial-gradient(ellipse at 70% 25%,#54282044 0 9%,transparent 11%),radial-gradient(ellipse at 32% 62%,#51281b55 0 16%,transparent 18%),radial-gradient(ellipse at 68% 72%,#df986d44 0 19%,transparent 21%),var(--d7Grain);
  background-size: auto,auto,auto,160px 160px;
}

#day7Mods .d7Hills {
  background: #333b28;
  top: 185px;
}

#day7Mods .d7Woods {
  background: #202d1d;
  top: 124px;
  opacity: .9;
}

#day7Mods .d7Foreground {
  background: #111b12;
  top: 230px;
  opacity: .9;
}

#day7Mods .d7Day {
  font-size: 11px;
  bottom: 32px;
  right: 6%;
  letter-spacing: 2px;
  color: #b5aa8d;
  z-index: 4;
  border: 1px solid #a993644f;
  padding: 9px 12px;
  transform: rotate(-3deg);
  background: #1717146b;
}

#day7Mods .d7Ruins {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .88;
}

#day7Mods .d7House {
  position: absolute;
  right: 11%;
  bottom: 61px;
  width: 125px;
  height: 82px;
  background: #10160f;
  clip-path: polygon(0 43%,12% 43%,12% 34%,21% 34%,25% 28%,27% 33%,44% 9%,48% 9%,50% 0,57% 9%,63% 4%,67% 17%,78% 25%,78% 10%,86% 10%,87% 34%,100% 45%,94% 50%,94% 100%,5% 100%,5% 49%,0 50%);
}

#day7Mods .d7House:before {
  content: '';
  position: absolute;
  left: 23px;
  top: 46px;
  width: 15px;
  height: 16px;
  background: linear-gradient(0deg,transparent 44%,#10160f 44% 55%,transparent 55%),linear-gradient(90deg,#99704466 0 43%,#10160f 43% 57%,#99704466 57%);
  box-shadow: 59px 2px 0 #ae784433;
}

#day7Mods .d7Pole {
  position: absolute;
  bottom: 60px;
  right: 37%;
  height: 205px;
  width: 5px;
  background: #10180f;
  transform: rotate(8deg);
  transform-origin: bottom;
}

#day7Mods .d7Pole:before {
  content: '';
  position: absolute;
  left: -24px;
  top: 18px;
  width: 54px;
  height: 5px;
  background: #10180f;
  box-shadow: 4px 20px 0 #10180f;
}

#day7Mods .d7Pole:after {
  content: '';
  position: absolute;
  top: 30px;
  left: -14px;
  width: 240px;
  height: 45px;
  border-top: 2px solid #11190fe8;
  border-radius: 50%;
  transform: rotate(7deg);
}

#day7Mods .d7PoleSecond {
  right: 4%;
  height: 168px;
  transform: rotate(-7deg);
  opacity: .8;
}

#day7Mods .d7Wire {
  position: absolute;
  left: 50%;
  right: -5%;
  bottom: 35px;
  height: 28px;
  transform: rotate(-7deg);
  z-index: 3;
  background: linear-gradient(0deg,transparent 46%,#b9a27b70 47% 50%,transparent 51%),repeating-linear-gradient(55deg,transparent 0 23px,#c6af8677 23px 24px,transparent 24px 44px),repeating-linear-gradient(-55deg,transparent 0 23px,#c6af8677 23px 24px,transparent 24px 44px);
  opacity: .65;
  pointer-events: none;
}

#day7Mods .d7Button {
  position: relative;
  isolation: isolate;
  background-color: var(--d7Red);
  background-image: linear-gradient(180deg,#dc9d6125,transparent 25%,#3b160c30),var(--d7Grain);
  background-size: auto,220px 220px;
  border: 1px solid #d17c524d;
  box-shadow: inset 0 1px #ebc38b33,inset 0 -2px #34160980,2px 3px 0 #070b0877;
  border-radius: 1px;
  font-weight: 600;
  letter-spacing: .4px;
  min-height: 46px;
  color: #fff0d2;
}

#day7Mods .d7Button:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--d7Scratches);
  background-size: 230px 140px;
  opacity: var(--d7Wear);
  pointer-events: none;
}

#day7Mods .d7Button:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 3px 0 0 #271c1522;
}

#day7Mods .d7Button:hover {
  filter: brightness(1.14);
}

#day7Mods .d7Strip {
  position: relative;
  background-color: #1e2119;
  background-image: linear-gradient(#20221899,#1b201999),var(--d7Grain);
  background-size: auto,190px 190px;
  border-bottom: 1px solid #6c6344;
  box-shadow: inset 0 -1px #0c100a;
  color: #c3c3ac;
  padding-block: 15px;
  min-height: 61px;
}

#day7Mods .d7Strip:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: repeating-linear-gradient(130deg,#c0a06699 0 11px,#15181199 11px 22px);
  opacity: .8;
}

#day7Mods .d7Strip svg {
  color: #c2ab7e;
}

#day7Mods .d7Catalog {
  padding-block: 36px 43px;
  position: relative;
}

#day7Mods .d7Catalog:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--d7Wear) * .2);
  background-image: var(--d7Scratches);
  background-size: 600px 420px;
}

#day7Mods .d7SectionTop {
  position: relative;
}

#day7Mods .d7SectionKicker {
  color: #c1a879;
  letter-spacing: 2px;
}

#day7Mods h2 {
  font-family: Impact,'Arial Narrow',sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .8px;
  line-height: 1.2;
}

#day7Mods .d7Count {
  border: 1px solid #5a573d;
  background: #25271c;
  padding: 5px 9px;
  font: 13px/1.5 Consolas,monospace;
  color: #e0d7bd;
}

#day7Mods .d7Mod {
  position: relative;
  border: 1px solid #76674866;
  border-top: 2px solid #7b654b;
  background-color: #24251d;
  background-image: radial-gradient(circle at 11px 10px,#9b8d6566 0 2px,#15170e 3px,transparent 4px),radial-gradient(circle at calc(100% - 11px) 10px,#9b8d6566 0 2px,#15170e 3px,transparent 4px),linear-gradient(95deg,#5a4e2922,#1d20194d),var(--d7Grain);
  background-size: auto,auto,auto,240px 240px;
  box-shadow: 2px 5px 0 #080b074d,inset 0 0 28px #060a0480;
  border-radius: 1px;
  padding: 8px;
  gap: 0;
}

#day7Mods .d7Cover {
  position: relative;
  margin: 8px 0 8px 8px;
  padding: 22px 19px 20px;
  min-height: 294px;
  color: #2d2b20;
  background-color: #bba678;
  background-image: radial-gradient(ellipse at 10% 85%,#4a381e44,transparent 48%),radial-gradient(ellipse at 90% 5%,#5b3c163d,transparent 40%),repeating-linear-gradient(0deg,transparent 0 3px,#533a1810 3px 4px),var(--d7Grain);
  background-size: auto,auto,auto,230px 230px;
  clip-path: polygon(1% 1%,17% 0,28% 1%,42% 0,59% 1%,77% 0,90% 1%,99% 0,100% 21%,99% 35%,100% 54%,99% 74%,100% 96%,97% 99%,80% 98%,66% 100%,43% 99%,29% 100%,16% 99%,0 100%,1% 77%,0 62%,1% 45%,0 24%);
  box-shadow: inset 0 0 35px #42300f66;
  overflow: hidden;
}

#day7Mods .d7Cover:before {
  content: '';
  position: absolute;
  right: 22%;
  top: -3px;
  width: 80px;
  height: 19px;
  background: #ded3a799;
  transform: rotate(-7deg);
  border-inline: 2px dotted #6e593d44;
  box-shadow: 0 1px 3px #5e462744;
  pointer-events: none;
}

#day7Mods .d7Cover:after {
  content: attr(data-stamp-label);
  z-index: 0;
  right: 12px;
  bottom: 62px;
  font: 500 13px/1.2 Consolas,monospace;
  letter-spacing: 2px;
  color: #832f23;
  border: 2px solid #832f2399;
  padding: 6px 9px;
  opacity: .85;
  transform: rotate(-11deg);
  mask-image: var(--d7Distress);
  mask-size: 180px 180px;
  pointer-events: none;
}

#day7Mods .d7Cover>span {
  font-size: 11px;
  letter-spacing: 1px;
  max-width: 100%;
  color: #4e452e;
}

#day7Mods .d7CoverTitle {
  font-size: clamp(30px,3.5vw,43px);
  letter-spacing: .2px;
  mask-image: var(--d7Distress);
  mask-size: 420px 280px;
  color: #29281e;
}

#day7Mods .d7CoverTitle small {
  font-size: 11px;
  letter-spacing: 1px;
  color: #53432b;
  margin-top: 11px;
}

#day7Mods .d7CoverFoot {
  font-size: 11px;
  letter-spacing: 1px;
  border-top: 1px solid #67563399;
  color: #4d4028;
  padding-top: 10px;
}

#day7Mods .d7ModBody {
  padding: 25px 27px;
  position: relative;
  isolation: isolate;
}

#day7Mods .d7ModBody:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--d7Scratches);
  background-size: 640px 400px;
  opacity: calc(var(--d7Wear) * .25);
  pointer-events: none;
}

#day7Mods .d7Tag {
  border: 1px solid #706449;
  border-radius: 1px;
  color: #cbc3a8;
  background: #171d1399;
  letter-spacing: .5px;
}

#day7Mods .d7TagPrototype {
  color: #d6b377;
  border-color: #9a7644;
  background: #52401e30;
}

#day7Mods .d7ModBody h3 {
  color: #eee0c1;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.5px;
}

#day7Mods .d7ModDesc {
  color: #f0e7d2;
}

#day7Mods .d7VersionLine {
  color: #b9b9a0;
}

#day7Mods .d7LinkButton {
  color: #d8c9a8;
}

#day7Mods .d7Note {
  color: #e0cfaa;
}

#day7Mods .d7Expanded {
  background: #1b2117;
  border-top: 1px dashed #6f6447;
  margin: 0 8px 8px;
}

#day7Mods .d7Expanded h4 {
  color: #e6d8b9;
}

#day7Mods .d7ReleaseDetails {
  color: #c8c1ac;
}

/* Keep the torn-paper clipping on the background, so text paints normally. */
#day7Mods .d7Guide {
  position: relative;
  isolation: isolate;
  margin: 0 2.3%;
  padding-inline: calc(var(--d7Gutter) - 2.3%);
  padding-block: 36px 42px;
  border: 0;
  background: none;
  color: #292b20;
}

#day7Mods .d7Guide:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #cfbf98;
  background-image: radial-gradient(ellipse at 0 0,#75604124,transparent 42%),radial-gradient(ellipse at 100% 100%,#705b2d20,transparent 35%),var(--d7Paper);
  background-size: auto,auto,256px 256px;
  box-shadow: inset 0 0 26px #614a2326;
  clip-path: polygon(0 .8%,8% 0,16% 1%,29% 0,41% .5%,55% 0,68% .8%,80% 0,93% .6%,100% 0,100% 98.3%,97% 99%,94% 98.7%,90% 100%,84% 98.7%,79% 99.4%,74% 98.8%,69% 100%,62% 99.2%,56% 99.8%,51% 98.6%,46% 99.5%,41% 98.8%,37% 100%,32% 99%,27% 99.5%,23% 98.4%,18% 99.2%,13% 98.8%,9% 100%,4% 98.5%,0 99%);
  pointer-events: none;
}

#day7Mods .d7Guide .d7SectionKicker {
  color: #6b3825;
}

#day7Mods .d7Guide h2 {
  font-size: 30px;
  color: #24271d;
}

#day7Mods .d7Step {
  border-left: 2px solid #8e5b34;
}

#day7Mods .d7StepNumber {
  color: #713a26;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

#day7Mods .d7Step h3 {
  color: #25281d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

#day7Mods .d7Step p {
  color: #303226;
  font-family: "Segoe UI",Arial,sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  max-width: 48ch;
}

#day7Mods .d7Step code {
  color: #4e3321;
  background: #6858310d;
}

#day7Mods .d7Faq {
  padding-block: 35px 31px;
}

#day7Mods .d7Faq h2 {
  font-size: 28px;
  color: #e7dcc0;
}

#day7Mods details {
  border-top: 1px dashed #615b40;
  padding: 15px 0;
}

#day7Mods details:last-of-type {
  border-bottom: 1px dashed #615b40;
}

#day7Mods summary {
  color: #e7dfc8;
}

#day7Mods summary:after {
  color: #ba9770;
}

#day7Mods .d7Faq details p {
  color: #cfc8b3;
  font-family: "Segoe UI",Arial,sans-serif;
  font-weight: 600;
}

#day7Mods .d7Footer {
  position: relative;
  background: #20231b;
  border-top: 2px solid #59543a;
  background-image: linear-gradient(#1e2319ba,#1a1e16c9),var(--d7Grain);
  background-size: auto,200px 200px;
  color: #b4b59b;
}

#day7Mods .d7Footer b {
  font: 500 17px/1 Impact,'Arial Narrow',sans-serif;
  letter-spacing: 1px;
  color: #d7c8a9;
  mask-image: var(--d7Distress);
  mask-size: 300px 280px;
}

/* Адаптивное поведение и пользовательские ограничения отображения. */
@media(max-width:650px) {
  #day7Mods .d7Logo {
    font-size: 25px;
  }
  #day7Mods .d7LogoSeven {
    font-size: 31px;
  }
  #day7Mods .d7Header:before {
    left: 10px;
    top: 18px;
    width: 4px;
    height: 4px;
    box-shadow: 0 1px 2px #000,0 56px 0 #4c4938;
  }
  #day7Mods .d7Header:after {
    width: 4px;
    height: 4px;
    top: 18px;
    right: 12px;
    box-shadow: 0 1px 2px #000,0 56px 0 #4c4938;
  }
  #day7Mods .d7Hero {
    min-height: 395px;
  }
  #day7Mods .d7HeroCopy {
    padding-block: 33px 43px;
  }
  #day7Mods .d7Sky {
    left: 10%;
    opacity: calc(var(--d7ForestOpacity) * .75);
  }
  #day7Mods .d7Moon {
    width: 200px;
    height: 200px;
    right: 5%;
    top: 24px;
  }
  #day7Mods .d7Pole {
    right: 28%;
    height: 190px;
  }
  #day7Mods .d7PoleSecond {
    right: 2%;
    height: 160px;
  }
  #day7Mods .d7House {
    right: 5%;
    bottom: 32px;
  }
  #day7Mods .d7Day {
    display: none;
  }
  #day7Mods .d7Wire {
    left: 25%;
    bottom: 28px;
    opacity: .35;
  }
  #day7Mods .d7Strip {
    gap: 10px 18px;
    padding-block: 16px 13px;
  }
  #day7Mods .d7SectionTop {
    gap: 12px;
    align-items: flex-start;
  }
  #day7Mods h2 {
    font-size: 26px;
  }
  #day7Mods .d7Count {
    font-size: 11px;
    white-space: normal;
    max-width: 120px;
    flex-shrink: 0;
    margin-top: 17px;
    padding: 4px 7px;
  }
  #day7Mods .d7Cover {
    margin: 6px 6px 0;
    min-height: 196px;
    padding: 22px 19px;
  }
  #day7Mods .d7Cover:after {
    right: 15px;
    bottom: 60px;
  }
  #day7Mods .d7ModBody {
    padding: 24px 20px;
  }
  #day7Mods .d7CoverTitle {
    font-size: 37px;
  }
  #day7Mods .d7Guide {
    margin-inline: 2%;
    padding-inline: 3.5%;
    padding-block: 29px 39px;
  }
  #day7Mods .d7Guide h2 {
    font-size: 26px;
  }
  #day7Mods .d7StepNumber {
    font-size: 12px;
  }
  #day7Mods .d7Step {
    grid-template-columns: 28px 1fr;
  }
  #day7Mods .d7Step p {
    font-size: 15px;
  }
  #day7Mods .d7Footer b {
    font-size: 17px;
  }
}

/* Адаптивное поведение и пользовательские ограничения отображения. */
@media(max-width:400px) {
  #day7Mods .d7Cover {
    min-height: 230px;
    display: flex;
  }
  #day7Mods .d7Cover:after {
    bottom: 64px;
    right: 20px;
  }
  #day7Mods .d7CoverTitle {
    font-size: 39px;
  }
  #day7Mods .d7Count {
    max-width: 94px;
    margin-top: 18px;
  }
  #day7Mods .d7Hero h1 {
    font-size: 35px;
  }
  #day7Mods .d7Eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
  }
  #day7Mods .d7Catalog .d7SectionKicker {
    font-size: 11px;
    letter-spacing: 1px;
  }
  #day7Mods .d7ModBody h3 {
    font-size: 23px;
  }
}

#day7Mods .d7Sky {
  z-index: 0;
  isolation: isolate;
}

#day7Mods .d7Header {
  background-image: linear-gradient(0deg,#0f100dc9,transparent 23%,#d0b47a0c 48%,#0f100d99 100%),repeating-linear-gradient(0deg,transparent 0 4px,#a48d5622 4px 5px),var(--d7Grain);
  background-size: auto,auto,240px 240px;
}

#day7Mods .d7ModBody {
  background: linear-gradient(120deg,#26271d55,#161e1655);
}

/* Уведомление остаётся компактным и не блокирует каталог до нажатия согласия. */
#day7Mods:has(.d7CookieNotice:not(.d7CookieNoticeInline):not([hidden])) {
  padding-bottom: var(--cookieNoticeSpace,480px);
}

#day7Mods .d7CookieNotice {
  position: fixed;
  z-index: 20;
  inset: auto 24px 24px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 18px 28px;
  max-width: 1120px;
  max-height: 75dvh;
  overflow-y: auto;
  margin-inline: auto;
  padding: 22px 24px;
  border: 1px solid #a78854;
  border-left: 4px solid #bd814a;
  background: linear-gradient(110deg,#24291ff5,#161c16fa),var(--d7Grain);
  color: #eee4cf;
  box-shadow: 0 16px 60px #000b,inset 0 1px #e7c18122;
  font: 15px/1.6 'Segoe UI',Arial,sans-serif;
}

#day7Mods .d7CookieCopy h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font: 700 18px/1.3 'Segoe UI',Arial,sans-serif;
  letter-spacing: 0;
  text-transform: none;
  mask-image: none;
}

#day7Mods .d7CookieCopy h2 svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #d4ac71;
}

#day7Mods .d7CookieCopy p {
  margin-top: 6px;
}

#day7Mods .d7CookieCopy a,
#day7Mods .d7Footer a {
  color: #e1c391;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#day7Mods .d7CookieWarning {
  color: #e8c190;
  font-weight: 600;
}

#day7Mods .d7CookieAccept {
  white-space: nowrap;
  font: 600 15px/1.4 'Segoe UI',Arial,sans-serif;
  padding: 13px 22px;
}

#day7Mods .d7CookieStatus:empty {
  display: none;
}

#day7Mods .d7CookieStatus {
  color: #f3bca5;
}

/* Полный текст соглашения читается на отдельной странице без раскрывающихся блоков. */
#day7Mods .d7CookiePolicyBody {
  max-width: 900px;
  padding: 6px 0 14px;
  font: 16px/1.75 'Segoe UI',Arial,sans-serif;
  color: #ddd7c5;
}

#day7Mods .d7CookiePolicyBody h2 {
  margin-top: 28px;
  font: 600 19px/1.5 'Segoe UI',Arial,sans-serif;
  letter-spacing: 0;
  text-transform: none;
  mask-image: none;
}

#day7Mods .d7CookiePolicyBody p {
  max-width: none;
  padding-top: 8px;
  color: inherit;
  font: inherit;
}

/* Ссылка на условия сервиса различима в тексте и доступна с клавиатуры. */
#day7Mods .d7CookiePolicyBody a {
  color: #e1c391;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#day7Mods .d7CookiePolicyBody a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

#day7Mods.d7LegalPage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#day7Mods .d7LegalMain {
  flex: 1;
  padding-block: 48px 64px;
}

#day7Mods .d7LegalArticle {
  max-width: 960px;
  margin-inline: auto;
}

#day7Mods .d7LegalArticle h1 {
  margin: 12px 0 24px;
  font: clamp(30px,4vw,46px)/1.15 Impact,'Arial Narrow',sans-serif;
  text-transform: uppercase;
  color: #e6d6b4;
}

#day7Mods .d7LegalBack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e1c391;
  font: 600 14px/1.5 'Segoe UI',Arial,sans-serif;
}

#day7Mods .d7LegalBack svg {
  width: 18px;
  height: 18px;
}

#day7Mods .d7LegalReturn {
  margin-top: 24px;
}

/* На странице условий согласие находится под текстом, без наложения на него. */
#day7Mods .d7CookieNoticeInline {
  position: static;
  inset: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 28px 0 0;
}

#day7Mods .d7CookieConfirmed {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid #737c52;
  background: #253021;
  color: #e1e7c8;
  font: 600 16px/1.6 'Segoe UI',Arial,sans-serif;
}

/* На телефоне кнопка занимает строку, текст и предупреждение остаются читаемыми. */
@media(max-width:650px) {
  #day7Mods .d7CookieNotice {
    inset: auto 12px 12px;
    grid-template-columns: minmax(0,1fr);
    gap: 14px;
    padding: 17px 16px;
    font-size: 14px;
    max-height: 80dvh;
  }
  #day7Mods .d7CookieAccept {
    width: 100%;
  }
  #day7Mods .d7CookieNoticeInline {
    max-height: none;
  }
  #day7Mods .d7LegalMain {
    padding-block: 30px 40px;
  }
  #day7Mods.d7LegalPage .d7Header {
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 16px;
  }
  #day7Mods.d7LegalPage .d7Logo {
    font-size: 22px;
  }
  #day7Mods .d7LegalBack {
    font-size: 12px;
  }
}