*{margin: 0px; padding: 0px; box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
code{font-family: var(--mono); color: var(--accent); font-weight: 500;}
.row{display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
html, body{font-family: Inter, sans-serif; font-weight: 400; font-size: 16px; -webkit-font-smoothing: antialiased;}
ul, li{padding: 0px; margin: 0px; list-style: none;}
a{text-decoration: none !important;}
h1, h2, h3, h4, h5, h6{margin: 0px;}
p{font-size: 1rem;}
.header-area{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1000; height: 80px; display: flex; align-items: center; justify-content: center; backdrop-filter: none; box-shadow: none; user-select: none; transition: transform 0.5s, opacity 0.5s, background 0.3s; background: transparent !important;}
.header-logo{position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 1002; pointer-events: auto;}
.header-area .logo{padding: 0px; margin: 0px; height: auto; line-height: 1; display: block; cursor: pointer;}
.header-area .logo img{height: 1.4em; display: block;}
.benchmark-lightbox{display: none; position: fixed; z-index: 2000; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; cursor: pointer;}
.benchmark-lightbox.active{display: flex; flex-direction: column;}
.benchmark-lightbox img{max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: 8px;}
@media (max-width: 600px) {.header-logo{left: 16px;}}
@media (max-width: 360px) {.header-logo{display: none;}}
:root{--bg: #0b0d10; --bg-elevated: #151821; --border: #262b3a; --accent: #bfd3e6; --accent-soft: rgba(171, 193, 213, 0.12); --accent-warm: #e8a05c; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text: #f3f4f6; --muted: #9ca3af; --radius: 12px; --grid-size: 10px; --line-width: 2px; --line-color: rgba(3, 6, 23, 0.5);}
html{min-height: 100%; background: rgb(1, 2, 10);}
body{min-height: 100vh; display: flex; flex-direction: column; color: var(--text); overflow-x: hidden; background: transparent;}
body::before{content: ""; position: fixed; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(circle at 28% 42%, rgba(11, 45, 78, 0.55), transparent 34%), radial-gradient(circle at 70% 58%, rgba(27, 31, 54, 0.45), transparent 32%), radial-gradient(at center bottom, rgb(7, 27, 49) 0%, rgb(9, 15, 51) 30%, rgb(27, 31, 54) 60%, rgb(1, 2, 10) 100%); animation: 12s ease-in-out 0s infinite alternate none running background-drift;}
body::after{content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(to right,
      var(--line-color) 0,
      var(--line-color) var(--line-width),
      transparent var(--line-width),
      transparent var(--grid-size)),
    /* horizontal grid lines */
    repeating-linear-gradient(to bottom,
      var(--line-color) 0,
      var(--line-color) var(--line-width),
      transparent var(--line-width),
      transparent var(--grid-size)); background-size: var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size);}
@keyframes background-drift {
  0% { transform: scale(1) translate3d(-2%, -1%, 0px); opacity: 0.82; }
  100% { transform: scale(1.18) translate3d(3%, 2%, 0px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {body::before{animation: auto ease 0s 1 normal none running none;}}
@media (max-width: 768px) {.main-content-wrapper{padding-bottom: 40px;}}
.page-section{padding-top: 80px; opacity: 0; visibility: hidden; position: relative; display: none !important;}
.page-section.active{flex: 1 0 auto; display: block !important; opacity: 1 !important; visibility: visible !important;}
.main-content-wrapper{max-width: 1300px; margin: 0px auto; padding: 32px;}
@keyframes subtleGlow {
  0%, 100% { filter: brightness(1) drop-shadow(rgba(171, 193, 213, 0.3) 0px 0px 15px); }
  50% { filter: brightness(1.1) drop-shadow(rgba(171, 193, 213, 0.5) 0px 0px 25px); }
}
.section-heading{font-size: 2.2rem; color: var(--accent); font-weight: 700; letter-spacing: 2px; text-shadow: rgba(171, 193, 213, 0.3) 0px 0px 15px, rgba(171, 193, 213, 0.15) 0px 0px 30px; background: linear-gradient(135deg, rgb(191, 211, 230) 0%, rgb(231, 238, 245) 50%, rgb(191, 211, 230) 100%) text; -webkit-text-fill-color: transparent; position: relative; display: block; animation: 3s ease-in-out 0s infinite normal none running subtleGlow; padding-bottom: 15px; border-bottom: 2px solid rgba(171, 193, 213, 0.2); box-sizing: border-box; width: calc(100% - 64px); margin: 0px 32px 20px; text-align: left;}
@keyframes newsScroll {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.details-section{background: linear-gradient(135deg, rgba(17, 24, 39, 0.5), rgba(2, 6, 23, 0.3)); backdrop-filter: blur(10px); border-radius: 16px; padding: 32px; margin-bottom: 16px; scroll-margin-top: 80px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px, rgba(171, 193, 213, 0.18) 0px 0px 0px 1px, rgba(171, 193, 213, 0.05) 0px 0px 18px 4px;}
.details-section h2{color: var(--accent); font-size: 2.2rem; margin-bottom: 28px; font-weight: 400; letter-spacing: 1px;}
.details-section h4{color: var(--accent); font-size: 1.4rem; margin: 0px 0px 10px; font-weight: 400; letter-spacing: 0.5px;}
.details-section p{color: var(--muted); line-height: 1.4; margin-bottom: 12px; font-size: 1rem; font-weight: 400;}
.details-section img, .details-section canvas{border-radius: 12px; border: 3px solid rgba(171, 193, 213, 0.4); box-shadow: rgba(171, 193, 213, 0.4) 0px 0px 30px, rgba(171, 193, 213, 0.2) 0px 0px 60px, rgba(0, 0, 0, 0.4) 0px 8px 30px; transition: 0.4s; background: linear-gradient(135deg, rgba(171, 193, 213, 0.05), rgba(171, 193, 213, 0.02)); padding: 2px;}
.details-section ul, .details-section ol{color: var(--muted); line-height: 1.8; margin: 24px 0px; padding-left: 0px; list-style: none;}
.details-section ul li, .details-section ol li{margin-bottom: 16px; padding-left: 32px; position: relative; font-size: 1.05rem; line-height: 1.7;}
.details-section ul li::before{content: "▸"; position: absolute; left: 0px; top: 0.1em; color: var(--accent); font-size: 1.3em; font-weight: 700; line-height: 1;}
.details-section ol{counter-reset: ol-counter 0;}
.details-section ol li::before{counter-increment: ol-counter 1; content: counter(ol-counter) "."; position: absolute; left: 0px; top: 0px; color: var(--accent); font-size: 1.05em; font-weight: 700; line-height: 1.7;}
.details-section ul li b, .details-section ol li b, .details-section ul li strong, .details-section ol li strong{color: var(--text); font-weight: 700;}
.details-section ul li p, .details-section ol li p{margin-top: 8px; margin-bottom: 0px; padding-left: 0px; font-size: 1rem; line-height: 1.6;}
.details-section img{max-width: 90%; border-radius: 8px; margin: 30px 0px; background: rgba(255, 255, 255, 0.95); padding: 20px; position: relative; left: 5%;}
.details-section object{max-width: 90%; background: rgba(255, 255, 255, 0.95); margin: 30px 0px; padding: 20px; border-radius: 8px; position: relative; left: 5%;}
.details-section .table{color: var(--text); background: rgba(15, 23, 42, 0.6); border-radius: 8px; margin: 30px 0px; overflow: hidden; position: relative;}
.details-section .table th{background: rgba(171, 193, 213, 0.1); color: var(--accent); border-bottom: 1px solid rgba(171, 193, 213, 0.25); border-right: 1px solid rgba(171, 193, 213, 0.15); padding: 15px;}
.details-section .table th:last-child{border-right-width: medium; border-right-style: none; border-right-color: currentcolor;}
.details-section .table td{border-bottom: 1px solid rgba(171, 193, 213, 0.15); border-right: 1px solid rgba(171, 193, 213, 0.15); padding: 12px 15px;}
.details-section .table td:last-child{border-right-width: medium; border-right-style: none; border-right-color: currentcolor;}
.details-section .table tr:last-child td{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;}
footer{border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 1; flex-shrink: 0; color: white !important;}
footer a{transition: color 0.2s; text-decoration: none; color: white !important;}
footer a:hover{color: var(--accent) !important;}
.legal-content h4{margin-top: 24px; margin-bottom: 8px;}
.legal-content h4:first-of-type{margin-top: 0px;}
#page-compression .card h2{font-size: 1rem; margin-bottom: 12px;}
#page-compression label{color: rgb(156, 163, 175); font-size: 0.8rem;}
@media (max-width: 1024px) {html{width: 100%; overflow-x: hidden;}
body{width: 100%; overflow-x: hidden;}}