@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root {
    --bg:#10233a;
    --panel:#192f49;
    --panel2:#152a43;
    --line:#3b5b7b;
    --line2:#4d7092;
    --text:#f0f6fc;
    --muted:#bed0e2;
    --cyan:#69ddf4;
    --cyan2:#b9f2ff;
    --mono:'Roboto Mono','IBM Plex Mono',monospace
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:#101d30;
    color:var(--text);
    font-family:var(--mono);
    font-size:14px;
    line-height:1.75
}
.page-frame {
    width:calc(100% - 28px);
    max-width:1580px;
    margin:2px auto 24px;
    border:1px solid var(--line);
    min-height:calc(100vh - 4px);
    padding:18px 18px 0;
    background:linear-gradient(135deg,#142b46 0%,#10243c 48%,#192846 100%)
}
a {
    color:inherit;
    text-decoration:none
}
.site-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:76px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line2);
    position:relative
}
.site-header:after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:80px;
    height:2px;
    background:var(--cyan)
}
.logo {
    width:206px;
    height:76px;
    border:1px solid var(--line2);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:5px 10px;
    line-height:1
}
.logo-main {
    font-size:34px;
    font-weight:700;
    letter-spacing:-2px;
    color:var(--cyan);
    text-shadow:0 0 12px rgba(39,199,244,.16)
}
.logo-sub {
    font-size:11px;
    letter-spacing:10px;
    color:#c0c8d2;
    margin-left:3px;
    margin-top:5px
}
.header-title {
    border-left:3px solid var(--cyan);
    padding:4px 0 4px 15px;
    display:flex;
    flex-direction:column;
    font-size:19px;
    line-height:1.55;
    letter-spacing:.04em
}
.header-title span {
    color:var(--cyan)
}
.header-title b {
    font-weight:700;
    color:#f2f4f8
}
.nav {
    display:flex;
    flex-wrap:wrap;
    gap:9px 22px;
    padding:23px 0 19px;
    border-bottom:1px dashed var(--line2)
}
.nav a {
    font-size:12px;
    font-weight:700;
    color:#e4eaf2;
    text-transform:uppercase;
    white-space:nowrap
}
.nav a:hover,.nav a.active {
    color:var(--cyan);
    text-shadow:0 0 8px rgba(39,199,244,.22)
}
.status-line {
    display:flex;
    gap:24px;
    justify-content:flex-end;
    padding:9px 0 12px;
    color:#93a8bd;
    font-size:9px;
    letter-spacing:.1em
}
.layout {
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(340px,1fr);
    gap:20px;
    padding:10px 0 32px;
    align-items:start
}
.main-panel,.side-panel {
    border:1px solid var(--line2);
    background:linear-gradient(180deg,rgba(25,43,64,.98),rgba(18,34,53,.99));
    box-shadow:inset 0 1px 16px rgba(90,130,170,.035)
}
.main-panel {
    padding:20px
}
.side-panel {
    padding:20px;
    display:grid;
    gap:14px
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    border-bottom:1px solid var(--line);
    padding:0 0 13px
}
.panel-heading h1 {
    margin:0;
    color:var(--cyan);
    font-size:16px;
    line-height:1.55;
    letter-spacing:.08em;
    font-weight:700
}
.panel-mark {
    color:#3c9fc4;
    font-size:17px
}
.square {
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--cyan);
    margin-right:10px;
    vertical-align:1px
}
.meta {
    display:flex;
    gap:12px;
    margin:16px 0 12px
}
.meta span {
    border:1px solid #288bb1;
    padding:4px 12px;
    color:#c9eafa;
    font-size:10px;
    letter-spacing:.1em
}
.lead {
    color:#d1dce8;
    font-size:14px;
    line-height:1.85;
    margin:0 0 22px
}
.content-block {
    margin-top:22px
}
.content-block h2,.side-card h2 {
    font-size:13px;
    line-height:1.5;
    letter-spacing:.08em;
    color:var(--cyan);
    border-bottom:1px solid var(--line);
    padding:0 0 10px;
    margin:0 0 13px;
    text-transform:uppercase
}
.content-block p,.side-card p {
    color:#d0dce9;
    font-size:13px;
    line-height:1.9;
    margin:0 0 14px;
    text-align:justify
}
.side-card {
    border:1px solid var(--line);
    background:rgba(18,35,55,.82);
    padding:15px
}
.side-card p {
    font-size:12px;
    margin-bottom:0
}
.side-intro {
    border-left:3px solid var(--cyan)
}
.related {
    list-style:none;
    padding:0;
    margin:0
}
.related li {
    border-bottom:1px solid rgba(111,143,174,.32);
    padding:8px 0
}
.related li:last-child {
    border:0
}
.related a {
    color:#e4eef8;
    font-size:12px
}
.related a:hover {
    color:var(--cyan)
}
.footer {
    border-top:1px solid var(--line2);
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    color:#9aadc1;
    font-size:9px;
    letter-spacing:.08em
}
.footer a {
    color:var(--cyan)
}
@media(max-width:900px) {
    .layout {
        grid-template-columns:1fr
    }
    .side-panel {
        grid-template-columns:1fr 1fr
    }
    .side-intro {
        grid-column:1/-1
    }
    .header-title {
        font-size:16px
    }
}
@media(max-width:600px) {
    .page-frame {
        width:calc(100% - 10px);
        padding:10px 10px 0
    }
    .site-header {
        min-height:65px
    }
    .logo {
        width:148px;
        height:60px
    }
    .logo-main {
        font-size:27px
    }
    .logo-sub {
        font-size:8px;
        letter-spacing:7px
    }
    .header-title {
        font-size:12px;
        padding-left:9px
    }
    .nav {
        gap:8px 14px;
        padding:16px 0
    }
    .nav a {
        font-size:10px
    }
    .status-line {
        justify-content:flex-start;
        gap:12px;
        flex-wrap:wrap;
        font-size:8px
    }
    .layout {
        gap:12px
    }
    .main-panel,.side-panel {
        padding:13px
    }
    .panel-heading h1 {
        font-size:13px
    }
    .content-block p,.lead {
        font-size:12px;
        text-align:left
    }
    .side-panel {
        grid-template-columns:1fr
    }
    .side-intro {
        grid-column:auto
    }
    .footer {
        align-items:flex-start;
        flex-direction:column;
        padding:15px 0;
        font-size:8px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
}
/* Original holographic wordmark treatment */
.logo {
    position:relative;
    overflow:hidden;
    background:linear-gradient(125deg,rgba(54,137,190,.19),rgba(101,88,190,.13));
    border-color:#5c83a8
}
.logo-main {
    background:linear-gradient(100deg,#78e8ff 0%,#45bfe8 28%,#c1a8ff 54%,#63e2ff 78%,#e1fbff 100%);
    background-size:220% auto;
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    animation:holoShift 7s linear infinite;
    filter:drop-shadow(0 0 8px rgba(67,205,245,.35))
}
.logo:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-35%;
    height:22%;
    background:linear-gradient(180deg,transparent,rgba(167,240,255,.16),transparent);
    animation:holoScan 5.5s ease-in-out infinite;
    pointer-events:none
}
.logo-sub {
    letter-spacing:4px;
    color:#c1d9ee;
    text-shadow:0 0 8px rgba(85,213,239,.28)
}
@keyframes holoShift {
    to {
        background-position:220% center
    }
}
@keyframes holoScan {
    0%,100% {
        transform:translateY(-20px);
        opacity:0
    }
    18%,72% {
        opacity:.8
    }
    55% {
        transform:translateY(115px);
        opacity:.35
    }
}
@media(prefers-reduced-motion:reduce) {
    .logo-main,.logo:after {
        animation:none
    }
}