@font-face {
    font-family: "C-BOLD";
    src: url("/assets/fonts/CURSIVE LIST/C,BOLD.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "C-MED";
    src: url("/assets/fonts/CURSIVE LIST/C,MED.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "C-REG";
    src: url("/assets/fonts/CURSIVE LIST/C,REG.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "C-SEMI-BOLD";
    src: url("/assets/fonts/CURSIVE LIST/C,SEMI,BOLD.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "C-VARIABLE";
    src: url("/assets/fonts/CURSIVE LIST/C,VARIABLE.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PIXEL-BLACK";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,BLACK.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-BOLD";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,BOLD.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-TRANS-";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,TRANS-.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-MAXBOLD";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,MAXBOLD.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-MEDIUM";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,MEDIUM.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-REG";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,REG.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-SEMIBOLD";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,SEMIBOLD.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-TRANS";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,TRANS.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-TRANS+";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,TRANS+.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PIXEL-VARIABLE";
    src: url("/assets/fonts/PIXEL LIST/PIXEL,VARIABLE.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FREAKY HORROR";
    src: url("/assets/fonts/FREAKY HORROR.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "HR";
    src: url("/assets/fonts/HR.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "HRF";
    src: url("/assets/fonts/HRF.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "RBR";
    src: url("/assets/fonts/RBR.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "SER";
    src: url("/assets/fonts/SER.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.font-C-BOLD {
    font-family:"C-BOLD", cursive;
}

.font-C-MED {
    font-family:"C-MED", cursive;
}

.font-C-REG {
    font-family:"C-REG", cursive;
}

.font-C-SEMI-BOLD {
    font-family:"C-SEMI-BOLD", cursive;
}

.font-C-VARIABLE {
    font-family:"C-VARIABLE", cursive;
}

.font-PIXEL-BLACK {
    font-family:"PIXEL-BLACK", monospace;
}

.font-PIXEL-BOLD {
    font-family:"PIXEL-BOLD", monospace;
}

.font-PIXEL-MAXBOLD {
    font-family:"PIXEL-MAXBOLD", monospace;
}

.font-PIXEL-MEDIUM {
    font-family:"PIXEL-MEDIUM", monospace;
}

.font-PIXEL-REG {
    font-family:"PIXEL-REG", monospace;
}

.font-PIXEL-SEMIBOLD {
    font-family:"PIXEL-SEMIBOLD", monospace;
}

.font-PIXEL-TRANS {
    font-family:"PIXEL-TRANS", monospace;
}

.font-PIXEL-TRANS-MINUS {
    font-family:"PIXEL-TRANS-", monospace;
}

.font-PIXEL-TRANS-PLUS {
    font-family:"PIXEL-TRANS+", monospace;
}

.font-PIXEL-VARIABLE {
    font-family:"PIXEL-VARIABLE", monospace;
}

.font-FREAKY-HORROR {
    font-family:"FREAKY HORROR", cursive;
}

.font-HR {
    font-family:"HR", sans-serif;
}

.font-HRF {
    font-family:"HRF", sans-serif;
}

.font-RBR {
    font-family:"RBR", "Segoe Print", cursive;
}

.font-SER {
    font-family:"SER", "Courier New", monospace;
}

body {
    margin:0;
    min-height:100vh;

    background:#020202;

    color:#ff5a00;

    font-family:"Courier New", monospace;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    overflow-y:auto;

    padding:30px 0;

}



/* BACKGROUND */

.bg-image {

    position:fixed;

    inset:0;

    background:url('/images/Background 2.jpg');

    background-size:cover;

    background-position:center;

    opacity:.15;

    z-index:-3;

}



.crt-scanlines {

    position:fixed;

    inset:0;

    background:
    linear-gradient(
    rgba(18,16,16,0) 50%,
    rgba(0,0,0,.25) 50%
    );

    background-size:100% 4px;

    z-index:-2;

}





/* MAIN GRID */

.screen-wrapper {

    width:95vw;

    min-height:1215px;

    display:grid;

    grid-template-columns:220px 620px 220px;

    grid-template-rows:100px 640px 180px 220px;

    gap:25px;

    justify-content:center;

    align-items:center;

    position:relative;

}

.screen-wrapper::before {

    content:"";

    position:absolute;

    inset:-40px;

    background:
    radial-gradient(
        ellipse,
        rgba(255,90,0,.18),
        transparent 70%
    );

    z-index:-1;

    pointer-events:none;

}



/* TOP BOX */

.top-panel {

    grid-column:1 / 4;

    grid-row:1;

    height:100px;
  
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

    border:2px solid #ff5a00;

    background:rgba(0,0,0,.85);

    color:#ff5a00;

    box-shadow:

    0 0 20px rgba(255,90,0,.5);

    font-size:12px;

    letter-spacing:2px;
 
    overflow:hidden;

}

/* TOP LOGO */

.top-logo {

    display:block;

    width:100%;

    height:100px;

    object-fit:contain;

    object-position:left center;

    filter:
    drop-shadow(0 0 10px #ff5a00);

}


.top-banner {

    position:absolute;

    right:0px;

    top:0px;

    width:300px;

    height:100px;

    object-fit:contain;

    object-position:right center;

     filter:
    drop-shadow(0 0 10px #ff5a00);

}
/* TOP SEARCH TERMINAL */

.search-box {

    position:absolute;

    right:25px;

    top:58px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:5px;

}


.search-box input {

    width:150px;

    background:#020202;

    border:1px solid #ff5a00;

    color:#ff5a00;

    font-family:"Courier New", monospace;

    font-size:11px;

    padding:5px;

    filter:
    drop-shadow(0 0 10px #ff5a00);

}


.search-box input::placeholder {

    color:#666;

}


.search-box button {

    background:#020202;

    border:1px solid #ff5a00;

    color:#ff5a00;

    font-family:"Courier New", monospace;

    font-size:11px;

    padding:5px 8px;

    cursor:pointer;

}


.search-box button:hover {

    background:#ff5a00;

    color:#000;

    box-shadow:0 0 10px #ff5a00;

}

/* TOP ACCOUNT TERMINAL */

.top-session-controls {
    position:absolute;
    right:18px;
    bottom:10px;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    max-width:300px;
    font-family:"PIXEL-VARIABLE", "Courier New", monospace;
    font-size:9px;
    letter-spacing:1px;
}

.top-session-user {
    display:inline-block;
    max-width:115px;
    overflow:hidden;
    color:#ddd;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.top-session-user:hover,
.top-session-user:focus-visible {
    color:#ff5a00;
}

.top-session-separator {
    color:#ff5a00;
}

.top-session-link,
.top-session-button {
    display:inline-block;
    padding:5px 7px;
    border:1px solid #ff5a00;
    background:rgba(0,0,0,.92);
    color:#ff5a00;
    font:inherit;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
}

.top-session-form {
    margin:0;
}

.top-session-link:hover,
.top-session-button:hover,
.top-session-link:focus-visible,
.top-session-button:focus-visible {
    background:#ff5a00;
    color:#020202;
    box-shadow:0 0 10px rgba(255,90,0,.75);
}




/* CANTI FRAME */

.canti-head-frame {

    position:absolute;

    width:532px;

    height:500px;

    left:50%;

    top:420px;

    transform:translate(-50%,-50%);

    z-index:1;

    pointer-events:none;

    overflow:hidden;

    border-radius:

    60px 40px 50px 80px /

    50px 60px 40px 70px;

}



.canti-head-frame img {

    width:100%;

    height:100%;

    object-fit:cover;

}





/* CENTER SCREEN */

.portal {

    grid-column:2;

    grid-row:2;

    z-index:2;


    width:540px;

    height:500px;


    padding:20px 30px;

    box-sizing:border-box;


    justify-self:center;

    transform:translateY(-25px);


    background:rgba(10,3,0,.85);


    border:3px solid #ff5a00;


    border-radius:

    60px 40px 50px 80px /

    50px 60px 40px 70px;


    overflow:hidden;


    box-shadow:

    0 0 25px rgba(255,90,0,.6);


    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

}





/* SIDE PANELS */

.side-panel {

    z-index:3;

    height:380px;

    padding:20px;

    background:rgba(0,0,0,.85);

    border:2px solid #ff5a00;

    border-radius:35px;

    box-shadow:

    0 0 20px rgba(255,90,0,.4);


    color:#ff5a00;

    font-size:12px;

}



.left-panel {

    grid-column:1;

    grid-row:2;

}



.right-panel {

    grid-column:3;

    grid-row:2;

}





.panel-title {

    border-bottom:1px dashed #ff5a00;

    padding-bottom:8px;

    margin-bottom:15px;

    letter-spacing:3px;

}


.bottom-panel .panel-title {

    text-align:center;

}



.side-panel p {

    color:#888;

}
/* RETRO CAROUSEL KNOBS */

.carousel-knob {

    width:70px;
    height:70px;

    border-radius:50%;

    background:
    radial-gradient(
        circle at 35% 35%,
        #444,
        #111 45%,
        #000 75%
    );

    border:3px solid #ff5a00;

    box-shadow:
    0 0 10px rgba(255,90,0,.6),
    inset 0 0 12px #000;

    cursor:pointer;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;

    transition:.15s;

}


/* ORANGE POINTER LINE */

.carousel-knob span {

    position:absolute;

    width:4px;

    height:20px;

    background:#ff5a00;

    top:5px;

    border-radius:2px;

    box-shadow:
    0 0 8px #ff5a00;

}


/* POINTER DIRECTIONS */

.left-knob span {

    transform:rotate(0deg);

}


.right-knob span {

    transform:rotate(0deg);

}



/* ROTATION FEEL */

.left-knob:active {

    transform:rotate(-360deg) scale(.92);

}


.right-knob:active {

    transform:rotate(360deg) scale(.92);

}



/* GLOW */

.carousel-knob:hover {

    box-shadow:

    0 0 20px #ff5a00,
    inset 0 0 15px #ff5a00;

}
/* BOTTOM INTERACTIVE CAROUSEL */

.bottom-panel {

    grid-column:1 / 4;

    grid-row:3;

    width:720px;

    justify-self:center;

    padding:15px;

    box-sizing:border-box;

    border:2px solid #ff5a00;

    border-radius:
    30px 30px 50px 50px;

    background:rgba(10,3,0,.75);

    color:#ff5a00;

    box-shadow:

    0 0 20px rgba(255,90,0,.5),

    inset 0 0 15px rgba(255,90,0,.3);

}

/* LOWER FULL WIDTH WINDOW */

.lower-terminal {

    grid-column:1 / 4;

    grid-row:4;

    width:95%;

    justify-self:center;

    min-height:200px;

    padding:20px;

    box-sizing:border-box;

    background:rgba(0,0,0,.85);

    border:2px solid #ff5a00;

    border-radius:35px;

    color:#ff5a00;

    box-shadow:

    0 0 20px rgba(255,90,0,.5),

    inset 0 0 20px rgba(255,90,0,.2);

}


.carousel {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-top:10px;

}



.carousel img {

    width:500px;

    height:120px;

    object-fit:contain;

    background:#020202;

    border:2px solid #ff5a00;

    border-radius:20px;

    transition:.2s;

}



.carousel img:hover {

    box-shadow:

    0 0 20px #ff5a00;

}


#carousel-text {

    margin-top:10px;

    text-align:center;

    font-size:12px;

    letter-spacing:3px;

    color:#ff5a00;

}

/* TEXT */

.os-header {

    width:100%;

    display:flex;

    justify-content:space-between;

    font-size:9px;

}



.warning {

    font-size:10px;

    letter-spacing:3px;

}



h1 {

    margin:0;

    text-align:center;

    font-size:38px;

    letter-spacing:5px;


    animation:signal-breathe 3.2s ease-in-out infinite;


    text-shadow:

    0 0 10px #ff5a00,

    0 0 20px #ff5a00;

}



.subtitle {

    color:white;

    font-size:11px;

}



.divider {

    width:90%;

    height:1px;

    background:#ff5a00;

}



.menu-matrix {

    display:flex;

    flex-direction:column;

    gap:5px;

}



.menu-item {

    color:#ff5a00;

    text-decoration:none;

}



.menu-item:hover {

    color:white;

}



.terminal {

    width:90%;

    font-size:11px;

    color:#888;

}


.terminal-link {

    display:block;

    color:#aaa;

    text-decoration:none;

    margin-bottom:6px;

}



.status {

    font-size:11px;

}



.status span {

    color:#00ff66;

}



.button {

    padding:6px 20px;

    border:2px solid #ff5a00;

    color:#ff5a00;

    text-decoration:none;

    font-size:11px;

}



.button:hover {

    background:#ff5a00;

    color:#000;

}

.orange {

    color:#ff5a00;

}



/* TITLE ANIMATION: SLOW SIGNAL / NEON BREATH */

@keyframes signal-breathe {

    0%, 100% {

        opacity:.92;

        text-shadow:
        0 0 5px #ff5a00,
        0 0 11px rgba(255,90,0,.55);

        transform:translateY(0);

    }


    50% {

        opacity:1;

        text-shadow:
        0 0 10px #ff5a00,
        0 0 24px rgba(255,90,0,.8),
        0 0 38px rgba(255,90,0,.35);

        transform:translateY(-1px);

    }


    }


/* SHARED INNER-PAGE TEMPLATE */

.content-page {
    width:min(900px, calc(100vw - 40px));
    margin:40px auto;
    padding:clamp(24px, 5vw, 56px);
    box-sizing:border-box;
    border:2px solid #ff5a00;
    border-radius:35px;
    background:rgba(0,0,0,.9);
    box-shadow:
        0 0 25px rgba(255,90,0,.5),
        inset 0 0 20px rgba(255,90,0,.12);
}

.content-page-header {
    padding-bottom:24px;
    margin-bottom:28px;
    border-bottom:1px dashed #ff5a00;
}

.content-page-header h1 {
    margin:8px 0 18px;
    text-align:center;
}

.content-page-header p,
.content-page-panel p {
    color:#aaa;
    line-height:1.7;
}

.content-page-kicker {
    margin:0;
    color:#ff5a00 !important;
    font-size:12px;
    letter-spacing:3px;
}

.content-page-panel {
    margin-bottom:30px;
}

.content-page-panel h2 {
    margin-top:0;
    color:#ff5a00;
    letter-spacing:2px;
}

.page-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-top:24px;
}

.page-link,
.page-home-link {
    display:inline-block;
    padding:10px 18px;
    border:1px solid #ff5a00;
    color:#ff5a00;
    text-decoration:none;
    font-weight:bold;
}

.page-link:hover,
.page-home-link:hover {
    background:#ff5a00;
    color:#020202;
    box-shadow:0 0 12px rgba(255,90,0,.7);
}

.content-page-error {
    max-width:680px;
    text-align:center;
}

.content-page-error .content-page-header h1 {
    text-align:center;
}

@media (max-width:700px) {
    body {
        padding:15px 0;
    }

    .content-page {
        width:calc(100vw - 24px);
        margin:12px auto;
        border-radius:22px;
    }

    .content-page-header h1 {
        font-size:30px;
        letter-spacing:3px;
    }

    .page-actions {
        flex-direction:column;
    }

    .page-link {
        text-align:center;
    }
}


/* SHARED PAGE FRAME AND TOP PANEL */

.standard-page-shell {
    width:min(1060px, calc(100vw - 30px));
}

.standard-page-shell .top-panel {
    width:100%;
    box-sizing:border-box;
}

.standard-page-shell > .site-footer-nav {
    width:100%;
    margin:0;
    border-top:0;
}

.top-logo-link {
    position:absolute;
    left:0;
    top:0;
    width:300px;
    height:100px;
    z-index:2;
    color:inherit;
}

.home-link-label {
    position:absolute;
    left:10px;
    bottom:8px;
    padding:4px 8px;
    border:1px solid #ff5a00;
    background:rgba(0,0,0,.9);
    color:#ff5a00;
    font-size:10px;
    font-weight:bold;
    letter-spacing:2px;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .15s, transform .15s;
}

.top-logo-link:hover .home-link-label,
.top-logo-link:focus-visible .home-link-label {
    opacity:1;
    transform:translateY(0);
}

.top-logo-link:focus-visible,
.site-footer-nav a:focus-visible,
.page-link:focus-visible,
.system-card:focus-visible {
    outline:3px solid #fff;
    outline-offset:4px;
}

.top-page-title {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    max-width:420px;
    text-align:center;
    text-shadow:0 0 10px rgba(255,90,0,.8);
}

.top-page-title > .mamimi-line {
    color:#888;
    font-size:14px;
    letter-spacing:.14em;
    line-height:1;
    animation:none;
}

.top-page-title .mamimi-line > span {
    color:inherit;
    font-size:inherit;
    letter-spacing:inherit;
    animation:none;
}

.top-page-title strong {
    display:block;
    color:#ff5a00;

    font-family:"PIXEL-MAXBOLD", monospace;
    font-size:22px;
    font-style:normal;
    font-weight:400;

    letter-spacing:2px;
    line-height:1.1;
    text-transform:uppercase;

    animation:signal-breathe 3.2s ease-in-out infinite;
}

.content-page-header h1 {
    font-family:"PIXEL-BOLD", "Courier New", monospace;
}

#search-results {
    position:absolute;
    right:25px;
    bottom:4px;
    color:#aaa;
    font-size:9px;
}

.visually-hidden {
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}


/* SYSTEM CATALOG */

.system-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:18px;
}

.system-card {
    display:flex;
    flex-direction:column;
    min-height:150px;
    border:1px solid #ff5a00;
    background:rgba(255,90,0,.04);
    color:#ff5a00;
    text-decoration:none;
    transition:transform .15s, box-shadow .15s, background .15s;
}

.system-card:hover {
    transform:translateY(-3px);
    background:rgba(255,90,0,.11);
    box-shadow:0 0 16px rgba(255,90,0,.45);
}

.system-card img {
    width:100%;
    height:105px;
    object-fit:contain;

    background:#020202;
}

.system-card span {
    padding:14px;
    text-align:center;
    letter-spacing:1px;
}

.system-detail-image {
    display:block;
    width:min(100%, 680px);
    max-height:260px;
    margin:0 auto 32px;
    object-fit:contain;
    border:2px solid #ff5a00;
    border-radius:24px;
    background:#020202;
}

.system-pagination {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:18px;
    padding-top:24px;
    border-top:1px dashed #ff5a00;
}

.system-pagination a {
    color:#ff5a00;
    text-decoration:none;
}

.system-pagination a:last-child {
    text-align:center;
}

.top-panel,
.side-panel,
.portal,
.bottom-panel,
.lower-terminal,
.panel-title,
.terminal,
.terminal-link,
.site-footer-nav,
.content-page,
.content-page-panel,
.faq-list,
.project-grid,
#n-o-chatbot-root {
    text-align:center;
}

.os-header span {
    flex:1;
    text-align:center;
}

.project-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:24px;
}

.project-grid .content-page-panel {
    padding:22px;
    border:1px dashed #ff5a00;
}

.faq-list {
    display:grid;
    gap:14px;
}

.faq-list details {
    padding:18px;
    border:1px solid #ff5a00;
    background:rgba(255,90,0,.04);
}

.faq-list summary {
    cursor:pointer;
    color:#ff5a00;
    font-weight:bold;
}

.faq-list p {
    color:#aaa;
    line-height:1.7;
}


/* GLOBAL FOOTER NAVIGATION */

.site-footer-nav {
    width:min(1060px, calc(100vw - 30px));
    margin:12px auto 8px;
    padding:18px;
    box-sizing:border-box;
    border:2px solid #ff5a00;
    background:rgba(0,0,0,.78);
}

.screen-wrapper > .site-footer-nav {
    position:absolute;
    top:100px;
    left:50%;
    width:min(1110px, 100%);
    margin:0;
    padding:9px 18px;
    border-top:0;
    transform:translateX(-50%);
    z-index:5;
}

.site-menu-toggle {
    display:none;
}

.site-nav-links {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px 18px;
}

.site-nav-links a {
    color:#ff5a00;
    text-decoration:none;
    font-weight:bold;
}

.site-nav-links a:hover {
    color:#fff;
}

.site-nav-auth-form {
    margin:0;
}

.site-nav-auth-button {
    padding:0;
    border:0;
    background:transparent;
    color:#ff5a00;
    font:inherit;
    font-weight:bold;
    cursor:pointer;
}

.site-nav-auth-button:hover,
.site-nav-auth-button:focus-visible {
    color:#fff;
    outline:2px solid #fff;
    outline-offset:4px;
}


/* RESPONSIVE HOME AND SHARED COMPONENTS */

@media (max-width:900px) {
    .screen-wrapper {
        display:flex;
        flex-direction:column;
        width:calc(100vw - 24px);
        min-height:0;
        gap:18px;
    }

    .screen-wrapper > .site-footer-nav {
        position:static;
        width:100%;
        margin:0;
        transform:none;
        border-top:0;
    }

    .side-panel,
    .lower-terminal,
    .side-panel .panel-title,
    .lower-terminal .panel-title {
        text-align:center;
    }

    .side-panel .terminal,
    .lower-terminal .terminal {
        margin-right:auto;
        margin-left:auto;
    }

    .screen-wrapper > .top-panel,
    .screen-wrapper > .side-panel,
    .screen-wrapper > .portal,
    .screen-wrapper > .bottom-panel,
    .screen-wrapper > .lower-terminal {
        width:100%;
        height:auto;
        min-height:0;
        box-sizing:border-box;
        transform:none;
    }

    .screen-wrapper > .portal {
        min-height:520px;
    }

    .canti-head-frame {
        display:none;
    }

    .top-logo-link,
    .top-banner {
        width:180px;
    }

    .top-page-title {
        max-width:300px;
    }

    .search-box,
    #search-results,
    .top-session-controls {
        display:none;
    }

    .carousel img {
        width:min(500px, 58vw);
    }
}

@media (max-width:600px) {
    .top-panel {
        justify-content:flex-end;
        padding:12px 18px 12px 150px;
        gap:0;
    }

    .top-logo-link {
        width:140px;
    }

    .top-banner {
        display:none;
    }

    .top-page-title {
        align-items:center;
        text-align:center;
    }

    .top-page-title strong {
        font-size:14px;
        letter-spacing:2px;
    }

    .top-page-title > .mamimi-line {
        font-size:11px;
        letter-spacing:.1em;
    }

    .portal {
        padding:18px;
    }

    .carousel {
        gap:8px;
    }

    .carousel-knob {
        width:48px;
        height:48px;
        flex:0 0 48px;
    }

    .carousel img {
        width:calc(100vw - 150px);
        height:100px;
    }

    .system-pagination {
        grid-template-columns:1fr;
        text-align:center;
    }

    .system-pagination a:last-child {
        text-align:center;
    }

    .site-footer-nav {
        text-align:center;
    }

    .site-menu-toggle {
        display:block;
        width:100%;
        padding:10px;
        border:1px solid #ff5a00;
        background:#020202;
        color:#ff5a00;
        font:inherit;
        font-weight:bold;
        cursor:pointer;
    }

    .site-nav-links {
        display:none;
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
        padding-top:18px;
    }

    .site-nav-links.is-open {
        display:grid;
    }

    .site-nav-auth-button {
        width:100%;
    }
}

@media (prefers-reduced-motion:reduce) {
    h1,
    .top-page-title strong {
        animation:none;
    }
}

@media (hover:none), (pointer:coarse) {
    .home-link-label {
        opacity:1;
        transform:none;
    }
}