@font-face {
    font-family: 'MinecraftTenCyrillic';
    src: url('../fonts/MinecraftTenCyrillic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MinecraftSeven';
    src: url('../fonts/MinecraftSeven.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --font-heading: 'MinecraftTenCyrillic', system-ui, sans-serif;
    --font-body:    'MinecraftSeven', system-ui, sans-serif;

    --primary:        #c70036;
    --primary-color:  #c70036;
    --primary-hover:  #a50036;

    --bg:             #0a0a0a;
    --card:           #141414;
    --card-hover:     #1c1c1c;
    --border:         rgba(255,255,255,0.07);
    --border-strong:  rgba(255,255,255,0.12);

    --text:           #f0f0f0;
    --text-muted:     #888;
    --text-faint:     #555;

    --navbar-h:       76px;
    --banner-h:       38px;
    --radius-sm:      10px;

    --transition:     0.2s ease;
    --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    --card-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --card-border-hover: rgba(199,0,54,0.35);
    --px:            4px;
    --accent:         var(--primary);
    --accent-dark:    var(--primary-hover);
    --accent-light:   color-mix(in oklch, var(--primary), white 25%);
    --line:           color-mix(in srgb, var(--accent-light) 40%, transparent);
    --line-strong:    color-mix(in srgb, var(--accent-light) 70%, transparent);
    --surface:        color-mix(in oklch, var(--primary) 12%, #0f0d0e);
    --surface-hover:  color-mix(in oklch, var(--primary) 18%, #0f0d0e);
    --px-muted:       rgba(255,255,255,.65);
    --px-clip: polygon(
        0 var(--px), var(--px) var(--px), var(--px) 0,
        calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
        100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
        calc(100% - var(--px)) 100%, var(--px) 100%,
        var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
    --px-clip-2: polygon(
        0 2px, 2px 2px, 2px 0,
        calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
        100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
        calc(100% - 2px) 100%, 2px 100%,
        2px calc(100% - 2px), 0 calc(100% - 2px));
}
:root {
  --px-block: 32px;
  --px-edge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 3' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='2'/%3E%3Crect x='3' y='1' width='1' height='2'/%3E%3Crect x='4' y='1' width='1' height='2'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='8' y='2' width='1' height='1'/%3E%3Crect x='9' y='2' width='1' height='1'/%3E%3Crect x='10' y='2' width='1' height='1'/%3E%3Crect x='11' y='1' width='1' height='2'/%3E%3Crect x='12' y='0' width='1' height='3'/%3E%3Crect x='13' y='1' width='1' height='2'/%3E%3Crect x='14' y='2' width='1' height='1'/%3E%3Crect x='15' y='2' width='1' height='1'/%3E%3Crect x='17' y='2' width='1' height='1'/%3E%3Crect x='18' y='2' width='1' height='1'/%3E%3Crect x='19' y='1' width='1' height='2'/%3E%3Crect x='20' y='1' width='1' height='2'/%3E%3Crect x='21' y='2' width='1' height='1'/%3E%3Crect x='22' y='2' width='1' height='1'/%3E%3Crect x='23' y='2' width='1' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='16' y='1' width='1' height='1'/%3E%3C/svg%3E");
  --px-edge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 3' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='2'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='6' y='0' width='1' height='2'/%3E%3Crect x='7' y='0' width='1' height='2'/%3E%3Crect x='8' y='0' width='1' height='1'/%3E%3Crect x='9' y='0' width='1' height='1'/%3E%3Crect x='10' y='0' width='1' height='2'/%3E%3Crect x='11' y='0' width='1' height='3'/%3E%3Crect x='12' y='0' width='1' height='3'/%3E%3Crect x='13' y='0' width='1' height='2'/%3E%3Crect x='14' y='0' width='1' height='1'/%3E%3Crect x='17' y='0' width='1' height='1'/%3E%3Crect x='18' y='0' width='1' height='1'/%3E%3Crect x='19' y='0' width='1' height='1'/%3E%3Crect x='20' y='0' width='1' height='2'/%3E%3Crect x='21' y='0' width='1' height='1'/%3E%3Crect x='22' y='0' width='1' height='1'/%3E%3Crect x='23' y='0' width='1' height='2'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='15' y='2' width='1' height='1'/%3E%3C/svg%3E");
  --px-solid: linear-gradient(#000 0 0);
}
:root { --section-pad: 120px; }
@media (max-width: 991.98px) { :root { --px-block: 24px; --section-pad: 80px; } }
@media (max-width: 575.98px) { :root { --px-block: 16px; --section-pad: 64px; } }

.px-section {
  --px-edge-h: calc(var(--px-block) * 3);
  --px-tile: calc(var(--px-block) * 24) var(--px-edge-h);
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--px-edge-h) + var(--section-pad));
}

.px-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--section-bg, #1a0f13);
  background-size: cover;
  background-position: center;

  -webkit-mask:
    var(--px-edge-top) top left / var(--px-tile) repeat-x,
    var(--px-solid) center / 100% calc(100% - 2 * var(--px-edge-h) + 2px) no-repeat,
    var(--px-edge-bottom) bottom left / var(--px-tile) repeat-x;
  mask:
    var(--px-edge-top) top left / var(--px-tile) repeat-x,
    var(--px-solid) center / 100% calc(100% - 2 * var(--px-edge-h) + 2px) no-repeat,
    var(--px-edge-bottom) bottom left / var(--px-tile) repeat-x;
}
.px-section--top::before {
  -webkit-mask:
    var(--px-edge-top) top left / var(--px-tile) repeat-x,
    var(--px-solid) bottom / 100% calc(100% - var(--px-edge-h) + 1px) no-repeat;
  mask:
    var(--px-edge-top) top left / var(--px-tile) repeat-x,
    var(--px-solid) bottom / 100% calc(100% - var(--px-edge-h) + 1px) no-repeat;
}
.px-section--top { padding-bottom: var(--section-pad); }
.px-section--overlap { margin-top: calc(var(--px-block) * -3); z-index: 1; }
.no-px-edges .px-section::before { -webkit-mask: none; mask: none; }
.no-px-edges .px-section--overlap { margin-top: 0; }
.hero-section.atmo-bg {
    --px-edge-h: calc(var(--px-block) * 3);
    padding-bottom: var(--px-edge-h);
    position: relative;
    z-index: 0;
}
.howto-card {
    transition: border-color 0.6s var(--card-ease) !important, opacity 0.7s var(--card-ease) !important, margin-top 0.7s var(--card-ease) !important;
}
.howto-card:hover {
    border-color: var(--card-border-hover) !important;
}
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6,
.modal-title, .dropdown-header, .brand-name {
    font-family: var(--font-heading);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-hover); }

img { max-width: 100%; height: auto; }
.atmo-bg {
    position: relative;
    isolation: isolate;
    background-color: var(--bg);
    background-size: cover;
    background-position: center;
}
.hero-section.atmo-bg::before {
    content: '';
    position: absolute;
    inset: -6px;
    z-index: -2;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(3px);
}
.atmo-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 900px 650px at 0% 45%, rgba(199,0,54,0.40) 0%, rgba(199,0,54,0.12) 45%, transparent 72%),
        radial-gradient(ellipse 700px 550px at 100% 15%, rgba(199,0,54,0.22) 0%, transparent 65%),
        linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.8) 100%);
    pointer-events: none;
}
@keyframes atmoBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}
.hero-section.atmo-bg::after { animation: atmoBreathe 12s ease-in-out infinite; }
.hero-section.atmo-bg::after {
    background:
        linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.1) 75%),
        linear-gradient(0deg, rgba(10,10,10,1) 0%, transparent 25%);
}
.reveal {
    opacity: 0;
    margin-top: 24px;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
    opacity: 1;
    margin-top: 0;
}
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }
h1, h2, h3, h4, h5, h6 { color: #fff; }
p { color: var(--text-muted); }
strong, b { color: var(--text); }
hr { border-color: var(--border) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: #fff !important; }
.content {
    min-height: 60vh;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}
.px-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.px-icon--dim { opacity: .6; }
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    vertical-align: middle;
    border: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    image-rendering: pixelated;
}