@font-face {font-family:'Tektur'; src:url('../fonts/Tektur-Regular.ttf') format('truetype'); font-weight:400; font-display:swap}
@font-face {font-family:'Tektur'; src:url('../fonts/Tektur-Medium.ttf') format('truetype'); font-weight:500; font-display:swap}
@font-face {font-family:'Tektur'; src:url('../fonts/Tektur-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap}
@font-face {font-family:'Tektur'; src:url('../fonts/Tektur-Bold.ttf') format('truetype'); font-weight:700; font-display:swap}
@font-face {font-family:'Tektur'; src:url('../fonts/Tektur-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap}
@font-face {font-family:'Tektur'; src:url('../fonts/Tektur-Black.ttf') format('truetype'); font-weight:900; font-display:swap}
* {margin:0; padding:0; box-sizing:border-box}
html {height:100%}
body {background-color:#184061; color:#fff; font-family:'Tektur',sans-serif; overflow:hidden; height:100vh}
#matrixCanvas {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; display:block}
.scroll-container {position:relative; z-index:10; height:100vh; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none}
.scroll-container::-webkit-scrollbar {display:none}
.slide {height:100vh; display:flex; justify-content:center; align-items:center; scroll-snap-align:start; padding:20px}
.slide-content {padding-bottom:150px}
.content-card {background:transparent; border:2px solid #00ffff; border-radius:40px; padding:25px 20px; max-width:480px; width:90%; text-align:center; box-shadow:inset 0 0 80px rgba(4,8,20,0.9),0 0 40px rgba(0,255,255,0.5); transition:transform 0.2s; display:flex; flex-direction:column; overflow:hidden}
.text-card {background-color:#04141f; border:2px solid #00ffff; box-shadow:inset 0 0 80px rgba(0,255,255,0.05),0 0 40px rgba(0,255,255,0.4)}
.cow-video {width:100%; height:auto; border-radius:30px; display:block; border:none; box-shadow:none; pointer-events:none; animation:emerge 4s ease-in-out infinite alternate}
@keyframes emerge {0% {transform:scale(1); opacity:0.85}
 100% {transform:scale(1.04); opacity:1}
}
.slide-title {font-size:1.4rem; font-weight:600; color:#00ffff; text-shadow:0 0 20px rgba(0,255,255,0.5),0 0 40px rgba(0,255,255,0.2); letter-spacing:2px; margin-bottom:16px; font-family:'Tektur',sans-serif; flex-shrink:0}
.slide-text {font-size:0.9rem; color:#e0f0ff; text-shadow:0 0 8px rgba(0,255,255,0.2); line-height:1.7; opacity:0.9; letter-spacing:0.5px; font-family:'Tektur',sans-serif; text-align:justify; flex-shrink:0}
.slide-text strong {color:#ffffff; text-shadow:0 0 12px #00ffff}
.slide-text.justify {text-align:justify}
.divider {width:60%; height:1px; margin:16px auto; background:linear-gradient(90deg,transparent,#00ffff,transparent); box-shadow:0 0 12px rgba(0,255,255,0.3); flex-shrink:0}
.lang-switcher {position:fixed; top:20px; right:20px; z-index:30; display:flex; gap:10px; background:rgba(4,8,20,0.6); backdrop-filter:blur(6px); padding:8px 12px; border-radius:30px; border:1px solid rgba(0,255,255,0.3); font-family:'Tektur',sans-serif; font-size:0.8rem}
.lang-btn {background:transparent; border:none; color:#e0f0ff; cursor:pointer; padding:4px 10px; border-radius:20px; transition:0.3s; font-family:'Tektur',sans-serif; font-weight:700; letter-spacing:1px; opacity:0.5}
.lang-btn.active {background:#00ffff; color:#04141f; opacity:1; box-shadow:0 0 20px rgba(0,255,255,0.3)}
.lang-btn:hover:not(.active) {opacity:0.9; text-shadow:0 0 10px rgba(0,255,255,0.3)}
.lang-ru,.lang-en {display:none}
.lang-ru.active,.lang-en.active {display:block}
.nav-arrows {position:fixed; bottom:6rem; left:50%; transform:translateX(-50%); display:flex; justify-content:center; align-items:center; gap:20px; z-index:25; pointer-events:none}
.nav-btn {width:52px; height:52px; flex-shrink:0; border-radius:50%; background:rgba(0,255,255,0.12); border:2px solid #00ffff; color:#00ffff; font-size:1.6rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity 0.3s ease,transform 0.3s ease,width 0.3s ease,margin 0.3s ease,border 0.3s ease; backdrop-filter:blur(4px); box-shadow:0 0 20px rgba(0,255,255,0.15); line-height:1; user-select:none; pointer-events:auto; overflow:hidden}
.nav-btn.hidden {opacity:0; width:0; margin:0; border:0; padding:0; pointer-events:none; transform:scale(0)}
.nav-btn:hover:not(.hidden) {background:rgba(0,255,255,0.3); box-shadow:0 0 35px rgba(0,255,255,0.4); transform:scale(1.05)}
.nav-btn .arrow {display:inline-block}
.nav-btn .arrow-down {animation:bounceDown 2s infinite}
.nav-btn .arrow-up {animation:bounceUp 2s infinite}
@keyframes bounceDown {0%,100% {transform:translateY(0)}
 50% {transform:translateY(6px)}
}
@keyframes bounceUp {0%,100% {transform:translateY(0)}
 50% {transform:translateY(-6px)}
}
.footer-credits {position:fixed; bottom:25px; left:0; width:100%; text-align:center; font-family:'Tektur',sans-serif; font-size:0.9rem; color:#e0f0ff; z-index:20; letter-spacing:3px; background:rgba(4,8,20,0.3); padding:12px 0; backdrop-filter:blur(4px); border-top:1px solid rgba(0,255,255,0.1); border-bottom:1px solid rgba(0,255,255,0.1)}
.footer-inner {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; max-width:800px; margin:0 auto; padding:0 16px}
.footer-credits .highlight {color:#00ffff}
.footer-credits .separator {color:rgba(255,255,255,0.2); font-weight:300; user-select:none}
.footer-link {color:#00ffff; text-decoration:none; transition:0.3s; font-weight:600; font-size:0.9rem; letter-spacing:3px}
.footer-link:hover {text-shadow:0 0 15px #00ffff}
.footer-icons {display:flex; align-items:center; gap:10px}
.footer-icon-link {display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; transition:all 0.3s ease; text-decoration:none; position:relative}
.footer-icon-link:hover {background:rgba(0,255,255,0.15); transform:scale(1.1); box-shadow:0 0 20px rgba(0,255,255,0.2)}
.footer-icon {width:25px; height:25px; display:block; opacity:0.7; transition:opacity 0.3s ease; filter:brightness(0) invert(1)}
.footer-icon-link:hover .footer-icon {opacity:1}
.footer-icon-link[title] {position:relative}
.footer-icon-link[title]:hover::after {content:attr(title); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:rgba(0,255,255,0.15); backdrop-filter:blur(8px); color:#ffffff; padding:4px 12px; border-radius:6px; font-size:0.6rem; font-family:'Tektur',sans-serif; letter-spacing:1px; white-space:nowrap; border:1px solid rgba(0,255,255,0.2); box-shadow:0 4px 15px rgba(0,0,0,0.3); pointer-events:none; z-index:100}
.footer-icon-link[title]:hover::before {content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid rgba(0,255,255,0.2); pointer-events:none; z-index:100}
.gate-description {text-align:left; font-size:0.8rem; line-height:1.8; color:#e0f0ff; max-height:60vh; overflow-y:auto; padding-right:10px; scrollbar-width:thin; scrollbar-color:#00ffff transparent}
.gate-description::-webkit-scrollbar {width:4px}
.gate-description::-webkit-scrollbar-track {background:transparent}
.gate-description::-webkit-scrollbar-thumb {background:#00ffff; border-radius:10px}
.gate-description .highlight {color:#00ffff; font-weight:600}
.gate-description .step {display:block; margin:8px 0 8px 20px; padding-left:12px; border-left:2px solid rgba(0,255,255,0.3)}
.gate-description .example {background:rgba(0,255,255,0.05); border:1px solid rgba(0,255,255,0.15); border-radius:12px; padding:12px 16px; margin:10px 0; font-family:'Tektur',monospace; font-size:0.7rem; color:#aaddff}
.gate-description .messenger-list {display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.gate-description .messenger-tag {background:rgba(0,255,255,0.1); border:1px solid rgba(0,255,255,0.2); border-radius:20px; padding:2px 12px; font-size:0.6rem; color:#00ffff; letter-spacing:0.5px}
.gate-description .messenger-tag.active {background:rgba(0,255,255,0.2); border-color:#00ffff; color:#ffffff; box-shadow:0 0 15px rgba(0,255,255,0.15)}
.gate-description .messenger-tag.testing {opacity:0.5; border-color:rgba(0,255,255,0.1)}
.gate-description .rule-diagram {display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:6px 0; padding:8px 10px; background:rgba(0,255,255,0.03); border-radius:12px; border:1px dashed rgba(0,255,255,0.15)}
.gate-description .rule-diagram .node {background:rgba(0,255,255,0.08); padding:4px 12px; border-radius:10px; font-size:0.65rem; color:#00ffff; border:1px solid rgba(0,255,255,0.15); white-space:nowrap}
.gate-description .rule-diagram .arrow-sym {color:#00ffff; font-size:1rem; opacity:0.5}
.gate-description .section-label {color:#88ccff; font-size:0.7rem; letter-spacing:1px; margin-top:10px; margin-bottom:4px}
.gate-description .note {background:rgba(0,255,255,0.04); border-left:3px solid #00ffff; padding:8px 12px; border-radius:8px; margin:8px 0; font-size:0.75rem}
.gate-animation {animation:pulseGlow 3s ease-in-out infinite}
@keyframes pulseGlow {0%,100% {box-shadow:0 0 20px rgba(0,255,255,0.1)}
 50% {box-shadow:0 0 40px rgba(0,255,255,0.25)}
}
.flow-svg {width:100%; max-width:400px; height:60px; margin:8px auto; display:block}
.flow-svg .line-path {stroke-dasharray:1000; stroke-dashoffset:1000; animation:flowLine 4s linear infinite}
@keyframes flowLine {0% {stroke-dashoffset:1000}
 100% {stroke-dashoffset:0}
}
.scenario-block {padding:14px 0; margin:12px 0 16px 0}
.scenario-block .scenario-title {color:#00ffff; font-size:0.95rem; font-weight:600; letter-spacing:1px; margin-bottom:8px}
.scenario-block .scenario-text {font-size:0.85rem; line-height:1.7; color:rgb(224,240,255); text-align:justify}
.scenario-block .scenario-text .hl {color:rgb(255,224,160); font-weight:300}
.scenario-list {list-style:none; margin:6px 0 6px 14px; font-size:0.8rem; color:rgb(224,240,255)}
.scenario-list li {margin:4px 0}
.scenario-list li::before {content:"✓ "; color:rgb(255,224,160)}
.single-scenario-card {max-width:560px}
.single-scenario-card .scenario-block {margin:0}
.single-scenario-card .scenario-text {font-size:0.9rem}
.routes-group {margin:10px 0; padding:8px 12px; background:rgba(0,255,255,0.02); border-radius:12px; border:1px solid rgba(0,255,255,0.06)}
.routes-group-title {font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; color:#88ccff; margin-bottom:6px; text-align:center; opacity:0.7}
.route-row {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); transition:background 0.2s ease; cursor:default}
.route-row:last-child {border-bottom:none}
.route-row:hover {background:rgba(0,255,255,0.04)}
.route-source {font-size:0.75rem; font-weight:500; padding:2px 10px; border-radius:6px; background:rgba(0,255,255,0.08); border-left:3px solid #00ffff; color:#e0f0ff; transition:all 0.2s ease}
.route-dest {font-size:0.75rem; font-weight:500; padding:2px 10px; border-radius:6px; background:rgba(255,170,0,0.08); border-left:3px solid #ffaa00; color:#ffe0a0; transition:all 0.2s ease}
.route-arrow {color:#ffffff; opacity:0.3; font-weight:300; font-size:0.9rem; margin:0 2px; transition:color 0.4s ease,text-shadow 0.4s ease}
.route-row:hover .route-arrow {color:#00ffff; text-shadow:0 0 12px #00ffff,0 0 24px #00ffff,0 0 36px rgba(0,255,255,0.3); opacity:1}
.accordion {flex:1 1 auto; min-height:0; height:auto; max-height:100%; overflow-y:auto; padding-right:5px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#00ffff transparent; -webkit-overflow-scrolling:touch}
.accordion::-webkit-scrollbar {width:4px}
.accordion::-webkit-scrollbar-track {background:transparent}
.accordion::-webkit-scrollbar-thumb {background:#00ffff; border-radius:10px}
.accordion details {background:rgba(0,255,255,0.05); border:1px solid rgba(0,255,255,0.3); border-radius:12px; margin-bottom:10px; overflow:hidden; text-align:left; transition:border 0.3s}
.accordion details[open] {border-color:#00ffff; box-shadow:0 0 10px rgba(0,255,255,0.2)}
.accordion summary {cursor:pointer; padding:15px; font-weight:300; color:#00ffff; list-style:none; display:flex; justify-content:space-between; align-items:center; transition:background 0.3s}
.accordion summary:hover {background:rgba(0,255,255,0.1)}
.accordion summary::after {content:'+'; font-size:1.5rem; line-height:1; color:#00ffff; transition:transform 0.3s}
.accordion details[open] summary::after {content:'-'}
.accordion-content {padding:0 15px 15px; font-size:0.85rem; line-height:1.7; color:rgb(224,240,255); background:rgba(255,255,255,0.02)}
.accordion-content a {color:#00ffff; text-decoration:underline}
.accordion-content a:hover {text-shadow:0 0 15px #00ffff}
.accordion-content .hl {color:rgb(255,224,160); font-weight:300}
.accordion-content .step0-accent {color:rgb(255,224,160); font-weight:300}
.accordion-content .step0-title {color:rgb(255,224,160); font-weight:300}
.accordion-content .step1-accent {color:rgb(255,224,160); font-weight:300; font-size:0.85rem}
.accordion-content ul {list-style:none; padding-left:0; margin:0 0 10px 0; font-size:0.8rem; line-height:1.6}
.accordion-content ul li {margin-bottom:4px}
.accordion-content ul li a {color:#00ffff; text-decoration:underline}
.accordion-content .accent-item {color:rgb(255,224,160); font-weight:300}
.accordion-footnote {margin-top:14px; padding:10px 14px; background:rgba(0,255,255,0.04); border:1px solid rgba(0,255,255,0.12); border-radius:10px; display:flex; align-items:flex-start; gap:10px; font-size:0.75rem; line-height:1.6; color:#c8e0f5; transition:border-color 0.3s ease,box-shadow 0.3s ease}
.accordion-footnote:hover {border-color:rgba(0,255,255,0.3); box-shadow:0 0 20px rgba(0,255,255,0.05)}
.accordion-footnote-alt {background:rgba(255,224,160,0.04); border-color:rgba(255,224,160,0.15)}
.accordion-footnote-alt:hover {border-color:rgba(255,224,160,0.3); box-shadow:0 0 20px rgba(255,224,160,0.05)}
.accordion-footnote-alt .footnote-icon {color:#ffe0a0; opacity:0.7}
.accordion-footnote-alt .footnote-highlight {color:#00ffff; text-shadow:0 0 12px rgba(0,255,255,0.15)}
.footnote-icon {flex-shrink:0; font-size:1rem; color:#00ffff; opacity:0.6; margin-top:1px; font-weight:300}
.footnote-text {font-weight:300; letter-spacing:0.3px; text-align:left; font-size:.8rem}
.footnote-highlight {color:rgb(255,224,160); font-weight:400; text-shadow:0 0 12px rgba(255,224,160,0.15)}
.screenshot-gallery {display:flex; gap:12px; margin:12px 0 16px 0; justify-content:center; flex-wrap:wrap}
.screenshot-item {position:relative; width:calc(50% - 6px); max-width:160px; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid rgba(0,255,255,0.15); transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease; background:rgba(0,255,255,0.03)}
.screenshot-item:hover {transform:scale(1.03); border-color:rgba(0,255,255,0.4); box-shadow:0 0 25px rgba(0,255,255,0.1)}
.screenshot-item img {width:100%; height:auto; display:block; aspect-ratio:887 / 1920; object-fit:cover}
.screenshot-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(4,8,20,0.5); backdrop-filter:blur(2px); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s ease}
.screenshot-item:hover .screenshot-overlay {opacity:1}
.zoom-icon {font-size:1.8rem; color:#00ffff; text-shadow:0 0 20px rgba(0,255,255,0.3); margin-bottom:4px}
.screenshot-label {font-size:0.6rem; color:#e0f0ff; letter-spacing:0.5px; text-align:center; padding:0 6px; font-weight:300}
.modal-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(4,8,20,0.92); backdrop-filter:blur(10px); z-index:1000; justify-content:center; align-items:center; padding:20px; opacity:0; transition:opacity 0.3s ease}
.modal-overlay.active {display:flex; opacity:1}
.modal-content {position:relative; max-width:90%; max-height:90%; background:rgba(0,255,255,0.03); border:1px solid rgba(0,255,255,0.15); border-radius:16px; padding:8px; box-shadow:0 0 60px rgba(0,255,255,0.08)}
.modal-content img {max-width:100%; max-height:80vh; border-radius:10px; display:block}
.modal-close {position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:50%; background:rgba(0,255,255,0.15); border:1px solid rgba(0,255,255,0.3); color:#00ffff; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; backdrop-filter:blur(4px); font-family:'Tektur',sans-serif}
.modal-close:hover {background:rgba(0,255,255,0.3); transform:scale(1.1); box-shadow:0 0 30px rgba(0,255,255,0.2)}
@media (max-width:600px) {.screenshot-item {width:calc(50% - 6px); max-width:130px}
 .screenshot-label {font-size:0.5rem}
 .zoom-icon {font-size:1.4rem}
 .modal-content {max-width:95%; padding:4px}
 .modal-close {width:34px; height:34px; font-size:1.2rem; top:-12px; right:-12px}
}
@media (max-width:480px) {.screenshot-item {width:100%; max-width:160px}
 .screenshot-gallery {gap:10px}
}
.video-gallery {display:flex; gap:12px; margin:12px 0 16px 0; justify-content:center; flex-wrap:wrap}
.video-item {position:relative; width:calc(50% - 6px); max-width:160px; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid rgba(0,255,255,0.15); transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease; background:rgba(0,255,255,0.03)}
.video-item:hover {transform:scale(1.03); border-color:rgba(0,255,255,0.4); box-shadow:0 0 25px rgba(0,255,255,0.1)}
.video-thumb {width:100%; height:auto; display:block; aspect-ratio:9 / 16; object-fit:cover; background:#0a1a2a}
.video-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(4,8,20,0.5); backdrop-filter:blur(2px); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:1; transition:background 0.3s ease; pointer-events:none}
.video-item:hover .video-overlay {background:rgba(4,8,20,0.3)}
.play-icon {font-size:2.4rem; color:#00ffff; text-shadow:0 0 30px rgba(0,255,255,0.4); margin-bottom:4px; transition:transform 0.3s ease}
.video-item:hover .play-icon {transform:scale(1.15)}
.video-label {font-size:0.6rem; color:#e0f0ff; letter-spacing:0.5px; text-align:center; padding:0 6px; font-weight:300; text-shadow:0 0 10px rgba(0,0,0,0.8)}
.modal-overlay-video {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(4,8,20,0.92); backdrop-filter:blur(10px); z-index:1000; justify-content:center; align-items:center; padding:20px; opacity:0; transition:opacity 0.3s ease}
.modal-overlay-video.active {display:flex; opacity:1}
.modal-content-video {position:relative; max-width:90%; max-height:90%; background:rgba(0,255,255,0.03); border:1px solid rgba(0,255,255,0.15); border-radius:16px; padding:8px; box-shadow:0 0 60px rgba(0,255,255,0.08)}
.modal-content-video video {max-width:100%; max-height:80vh; border-radius:10px; display:block}
.modal-close-video {position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:50%; background:rgba(0,255,255,0.15); border:1px solid rgba(0,255,255,0.3); color:#00ffff; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; backdrop-filter:blur(4px); font-family:'Tektur',sans-serif}
.modal-close-video:hover {background:rgba(0,255,255,0.3); transform:scale(1.1); box-shadow:0 0 30px rgba(0,255,255,0.2)}
@media (max-width:600px) {.video-item {width:calc(50% - 6px); max-width:130px}
 .video-label {font-size:0.5rem}
 .play-icon {font-size:1.8rem}
 .modal-content-video {max-width:95%; padding:4px}
 .modal-close-video {width:34px; height:34px; font-size:1.2rem; top:-12px; right:-12px}
}
@media (max-width:480px) {.video-item {width:100%; max-width:160px}
 .video-gallery {gap:10px}
}
.video-single {display:flex; justify-content:center; margin:12px 0 16px 0}
.video-item-single {position:relative; width:100%; max-width:560px; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid rgba(0,255,255,0.15); transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease; background:rgba(0,255,255,0.03)}
.video-item-single:hover {transform:scale(1.02); border-color:rgba(0,255,255,0.4); box-shadow:0 0 25px rgba(0,255,255,0.1)}
.video-thumb-single {width:100%; height:auto; display:block; aspect-ratio:16 / 9; object-fit:cover; background:#0a1a2a}
.video-overlay-single {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(4,8,20,0.5); backdrop-filter:blur(2px); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:1; transition:background 0.3s ease; pointer-events:none}
.video-item-single:hover .video-overlay-single {background:rgba(4,8,20,0.3)}
.video-item-single:hover .play-icon {transform:scale(1.15)}
.video-overlay-single .play-icon {font-size:3rem; color:#00ffff; text-shadow:0 0 30px rgba(0,255,255,0.4); margin-bottom:8px; transition:transform 0.3s ease}
.video-overlay-single .video-label {font-size:0.8rem; color:#e0f0ff; letter-spacing:0.5px; text-align:center; padding:0 10px; font-weight:300; text-shadow:0 0 10px rgba(0,0,0,0.8)}
@media (max-width:600px) {.video-overlay-single .play-icon {font-size:2.4rem}
 .video-overlay-single .video-label {font-size:0.7rem}
 .video-item-single {max-width:100%}
}
@media (max-width:480px) {.video-overlay-single .play-icon {font-size:2rem}
 .video-overlay-single .video-label {font-size:0.6rem}
}
.video-gallery-work {display:flex; gap:12px; margin:12px 0 0 0; justify-content:center; align-items:stretch; flex-wrap:wrap}
.video-item-work {position:relative; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid rgba(0,255,255,0.15); transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease; background:rgba(0,255,255,0.03); flex:0 1 auto; display:flex; flex-direction:column}
.video-item-work:hover {transform:scale(1.03); border-color:rgba(0,255,255,0.4); box-shadow:0 0 25px rgba(0,255,255,0.1)}
.video-item-work:first-child {width:auto; max-width:400px; flex:0 1 auto}
.video-thumb-work {width:100%; height:auto; display:block; background:#0a1a2a}
.video-item-work:first-child .video-thumb-work {aspect-ratio:16 / 9; max-height:280px}
.video-item-work:last-child {width:auto; max-width:160px; flex:0 1 auto}
.video-item-work:last-child .video-thumb-work {aspect-ratio:9 / 16; height:100%; max-height:280px; width:auto; object-fit:cover}
.video-overlay-work {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(4,8,20,0.5); backdrop-filter:blur(2px); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:1; transition:background 0.3s ease; pointer-events:none}
.video-item-work:hover .video-overlay-work {background:rgba(4,8,20,0.3)}
.video-item-work:hover .play-icon {transform:scale(1.15)}
.video-overlay-work .play-icon {font-size:2.8rem; color:#00ffff; text-shadow:0 0 30px rgba(0,255,255,0.4); margin-bottom:6px; transition:transform 0.3s ease}
.video-overlay-work .video-label {font-size:0.7rem; color:#e0f0ff; letter-spacing:0.5px; text-align:center; padding:0 8px; font-weight:300; text-shadow:0 0 10px rgba(0,0,0,0.8)}
@media (max-width:600px) {.video-gallery-work {gap:10px; flex-direction:column; align-items:center}
 .video-item-work:first-child {max-width:100%; width:100%}
 .video-item-work:first-child .video-thumb-work {max-height:none; aspect-ratio:16 / 9}
 .video-item-work:last-child {max-width:160px; width:auto}
 .video-item-work:last-child .video-thumb-work {max-height:260px; height:auto; width:100%; aspect-ratio:9 / 16}
 .video-overlay-work .play-icon {font-size:2rem}
 .video-overlay-work .video-label {font-size:0.6rem}
}
@media (max-width:480px) {.video-gallery-work {gap:8px}
 .video-item-work:first-child {max-width:100%}
 .video-item-work:last-child {max-width:140px}
 .video-item-work:last-child .video-thumb-work {max-height:220px}
 .video-overlay-work .play-icon {font-size:1.6rem}
 .video-overlay-work .video-label {font-size:0.5rem}
}
.anchor-offset {display:block; position:relative; top:-20px; visibility:hidden}
.toc-link {color:#00ffff; text-decoration:none; border-bottom:1px dashed rgba(0,255,255,0.2); transition:0.2s; cursor:pointer}
.toc-link:hover {color:#ffffff; border-bottom-color:#00ffff; text-shadow:0 0 12px #00ffff}
#form.ttm-form {box-shadow:0 25px 40px -12px rgba(0,0,0,0.2); border-radius:30px}
#form.ttm-form .ttm-section * {padding:2px; font-size:1rem; font-weight:300; font-family:'Tektur',sans-serif}
#form.ttm-form .ttm-section .ttm-fieldTitle {height:auto; text-align:left; padding-left:1rem}
#form.ttm-form .ttm-section .ttm-fieldValue {height:auto}
#form.ttm-form .ttm-section .ttm-fieldCell {margin:0 auto}
.ttm-form .ttm-cellValueWrapper {padding:0; min-height:0}
.ttm-form .ttm-tableText {text-align:center; margin:0; padding:0}
.MuiInputBase-root {font-size:1.2em; height:3em}
.ttm-form .ttm-fieldCell .ttm-fieldTitle .ttm-fieldTitleInner {font-size:1rem; font-weight:300; font-family:'Tektur',sans-serif}
.ttm-form .ttm-tableTitle {text-align:center; padding:0}
.MuiInputBase-input {margin:10px}
.ttm-form .ttm-fieldValue {padding:0 !important}
.ttm-form .ttm-help,.ttm-form .ttm-format-text {margin-top:-0.9em; margin-left:10px}
.MuiOutlinedInput-root,.MuiButton-root {border-radius:10px}
.ttm-fieldCell[data-field-name="__save"] .ttm-fieldTitleInner,.ttm-fieldCell[data-field-type="checkbox"] .ttm-fieldTitle,.ttm-fieldCell[data-field-name="soglasie"] .ttm-fieldTitleInner {display:none}
.ttm-form .ttm-fieldCell[data-field-type="checkbox"] {display:inline-flex}
.ttm-form .ttm-fieldCell[data-field-type="checkbox"] .ttm-format-text {margin-top:1em; margin-left:0}
.MuiInputBase-input.MuiOutlinedInput-input.MuiInputBase-inputAdornedStart.MuiOutlinedInput-inputAdornedStart.MuiInputBase-inputMarginDense.MuiOutlinedInput-inputMarginDense {color:#e0f0ff !important; text-indent:.5rem}
.ttm-form .PrivateNotchedOutline-root-1.MuiOutlinedInput-notchedOutline {border:2px solid #00ffff; background-color:rgba(255,255,255,0.1) !important}
.ttm-form .ttm-tableTitle {color:#00ffff !important; text-shadow:0 0 15px rgba(0,255,255,0.5),0 0 20px rgba(0,255,255,0.2); font-weight:400; font-family:'Tektur',sans-serif !important; font-size:1.3rem !important}
.ttm-form .ttm-fieldTitleInner {color:#e0f0ff !important}
.ttm-form {font-size:16px; color:#fff; font-family:'Tektur',sans-serif; margin:0; box-sizing:border-box; background:transparent; border-radius:40px; transition:transform 0.2s; background-color:#04141f !important; box-shadow:inset 0 0 80px rgba(0,255,255,0.05),0 0 40px rgba(0,255,255,0.4)}
.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-fullWidth {border:1px solid #00ffff}
.page-sitemap .nav-arrows {display:none}
#sitemap-tree.tree-card {max-width:800px; width:90%; height:70vh; padding:30px; background:transparent !important; border:none !important; box-shadow:none; transition:none; overflow-y:auto}
#sitemap-tree.tree-card::-webkit-scrollbar {width:6px}
#sitemap-tree.tree-card::-webkit-scrollbar-track {background:rgba(0,255,255,0.05); border-radius:10px}
#sitemap-tree.tree-card::-webkit-scrollbar-thumb {background:#00ffff; border-radius:10px; box-shadow:0 0 10px rgba(0,255,255,0.3)}
#sitemap-tree.tree-card {scrollbar-width:thin; scrollbar-color:#00ffff rgba(0,255,255,0.05)}
#sitemap-tree .tree-container {display:flex; flex-direction:column; gap:20px; padding:10px 0; height:100%; overflow-y:auto}
#sitemap-tree .tree-folder {background:rgba(4,20,31,0.6); border:none; border-radius:16px; overflow:hidden; transition:background 0.3s ease}
#sitemap-tree .tree-folder[open] {background:rgba(4,20,31,0.8)}
#sitemap-tree .tree-summary {cursor:pointer; padding:16px 20px; font-weight:500; font-size:1.2rem; color:#00ffff; list-style:none; display:flex; align-items:center; gap:12px; transition:background 0.3s ease; font-family:'Tektur',sans-serif; letter-spacing:1px; user-select:none}
#sitemap-tree .tree-summary::-webkit-details-marker {display:none}
#sitemap-tree .tree-summary:hover {background:rgba(0,255,255,0.06)}
#sitemap-tree .tree-summary .tree-icon {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; color:rgba(0,255,255,0.6); transition:color 0.3s ease,transform 0.3s ease}
#sitemap-tree .tree-summary .tree-icon svg {width:100%; height:100%; display:block; stroke:currentColor; transition:stroke 0.3s ease}
#sitemap-tree .tree-summary .tree-icon .icon-horizontal {transition:none}
#sitemap-tree .tree-summary .tree-icon .icon-vertical {transform:scale(1) !important; opacity:1 !important; transition:transform 0.3s ease,opacity 0.3s ease; transform-origin:center}
#sitemap-tree .tree-folder[open] > .tree-summary .tree-icon .icon-vertical {transform:rotate(90deg) scale(0) !important; opacity:0 !important}
#sitemap-tree .tree-summary:hover .tree-icon {color:#ffffff; transform:scale(1.1)}
#sitemap-tree .tree-home-link {display:flex; align-items:center; gap:12px; padding:16px 20px; font-weight:500; font-size:1.2rem; color:#00ffff; text-decoration:none; letter-spacing:1px; border-radius:16px; background:rgba(4,20,31,0.6); transition:background 0.3s ease,color 0.3s ease; font-family:'Tektur',sans-serif}
#sitemap-tree .tree-home-link:hover {background:rgba(4,20,31,0.6); color:#ffffff}
#sitemap-tree .tree-home-link .tree-icon {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; color:rgba(0,255,255,0.6); transition:color 0.3s ease,transform 0.3s ease}
#sitemap-tree .tree-home-link:hover .tree-icon {color:#ffffff; transform:scale(1.1)}
#sitemap-tree .tree-link {display:block; text-align:left; color:#e0f0ff; text-decoration:none; font-size:1rem; font-weight:300; padding:6px 12px; border-radius:6px; transition:background 0.25s ease,color 0.25s ease,text-shadow 0.25s ease; line-height:1.5}
#sitemap-tree .tree-link:hover {background:rgba(255,224,160,0.2); color:#ffffff; text-shadow:0 0 12px rgba(255,224,160,0.15)}
#sitemap-tree .tree-children {list-style:none; padding:0 20px 16px 20px; margin:0; display:flex; flex-direction:column; gap:6px}
#sitemap-tree .tree-children li {padding:4px 0 4px 24px; border-left:2px solid rgba(0,255,255,0.12); transition:border-color 0.3s ease}
#sitemap-tree .tree-children li:hover {border-left-color:#00ffff}
@media (max-width:768px) {#sitemap-tree.tree-card {padding:20px !important; max-width:95% !important; height:75vh}
 #sitemap-tree .tree-summary,#sitemap-tree .tree-home-link {font-size:1rem; padding:12px 16px}
 #sitemap-tree .tree-children li {padding-left:16px}
 #sitemap-tree .tree-link {font-size:0.9rem}
 #sitemap-tree .tree-summary .tree-icon,#sitemap-tree .tree-home-link .tree-icon {width:28px; height:28px}
}
@media (max-width:600px) {#sitemap-tree .tree-summary,#sitemap-tree .tree-home-link {font-size:0.9rem; padding:10px 12px}
 #sitemap-tree .tree-children li {padding-left:12px}
 #sitemap-tree .tree-link {font-size:0.8rem}
 #sitemap-tree .tree-summary .tree-icon,#sitemap-tree .tree-home-link .tree-icon {width:24px; height:24px}
}
@media (max-width:480px) {#sitemap-tree .tree-summary,#sitemap-tree .tree-home-link {font-size:0.8rem; padding:8px 10px}
 #sitemap-tree .tree-children li {padding-left:8px}
 #sitemap-tree .tree-link {font-size:0.7rem}
 #sitemap-tree .tree-summary .tree-icon,#sitemap-tree .tree-home-link .tree-icon {width:20px; height:20px}
}
#sitemap-tree .tree-header {text-align:center; margin-bottom:10px}
#sitemap-tree .slide-title {display:inline-block; background:rgba(4,20,31,0.7); backdrop-filter:blur(4px); padding:12px 28px; border-radius:40px; border:1px solid rgba(0,255,255,0.2); box-shadow:0 0 30px rgba(0,255,255,0.05); text-shadow:0 0 30px rgba(0,255,255,0.4); font-size:1.4rem; margin:0}
.content-card.text-card .lang-ru.active,.content-card.text-card .lang-en.active {display:flex !important; flex-direction:column !important; height:100%; overflow:hidden; flex:1 1 auto; min-height:0}
.content-card.text-card .lang-ru.active .accordion,.content-card.text-card .lang-en.active .accordion {flex:1 1 auto; min-height:0; height:auto; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch}
.content-card.text-card.conception-scenarios {display:flex; flex-direction:column; overflow:hidden}
.content-card.text-card.conception-scenarios .lang-ru.active,.content-card.text-card.conception-scenarios .lang-en.active {display:flex !important; flex-direction:column !important; height:100%; overflow:hidden; flex:1 1 auto; min-height:0}
.content-card.text-card.conception-scenarios .accordion {flex:1 1 auto !important; min-height:0 !important; height:auto !important; max-height:100% !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch}
.content-card.text-card[style*="max-height"] {display:flex !important; flex-direction:column !important; overflow:hidden !important}
.content-card.text-card[style*="max-height"] .accordion {flex:1 1 auto !important; min-height:0 !important; height:auto !important; max-height:100% !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch}
.content-card.text-card[style*="max-height"] .slide-title,.content-card.text-card[style*="max-height"] .divider,.content-card.text-card[style*="max-height"] .slide-text {flex-shrink:0}
@supports (-webkit-touch-callout:none) {.content-card.text-card {display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; overflow:hidden; max-height:90vh}
 .content-card.text-card .accordion {-webkit-flex:1 1 auto; flex:1 1 auto; -webkit-flex-basis:auto; flex-basis:auto; min-height:0; height:auto; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch}
 .content-card.text-card .lang-ru.active,.content-card.text-card .lang-en.active {display:-webkit-flex !important; display:flex !important; -webkit-flex-direction:column !important; flex-direction:column !important; height:100%; overflow:hidden; -webkit-flex:1 1 auto; flex:1 1 auto; min-height:0}
 .content-card.text-card[style*="max-height"] {max-height:calc(100vh - 200px) !important; overflow:hidden !important}
 .content-card.text-card[style*="max-height"] .accordion {max-height:100% !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch}
}
.footer-icon-link[href="sitemap"] .footer-icon {animation:iconShimmer 5s ease-in-out infinite; will-change:filter}
@keyframes iconShimmer {0%,100% {filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%) drop-shadow(0 0 0 rgba(0,255,255,0))}
 50% {filter:brightness(0) saturate(100%) invert(67%) sepia(85%) saturate(2878%) hue-rotate(87deg) brightness(119%) contrast(119%) drop-shadow(0 0 6px rgba(0,255,255,0.7))}
}