*, *::before, *::after {

        box-sizing: border-box;
        margin: 0;
        padding: 0;

      }

      /* Root CSS defaults */

      :root {

        --black: #0A0A0A;
        --lime: #39FF14;
        --dim: #1A3D0F;
        --gray: #141414;
        --border: #222;
        --text: #BBB;
        --header-h: 56px;

      }

      @font-face {

        font-family: 'LOGOFONT';
        src: url('0_FONTS/LOGO_FONT.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;

      }

      @font-face {
        
        font-family: 'HEADINGFONT';
        src: url('0_FONTS/HEADING_FONT.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;

      }

      @font-face {
        
        font-family: 'WRITINGFONT';
        src: url('0_FONTS/WRITING_FONT.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;

      }


      BODY {

        background: var(--black);
        color: var(--text);
        font-family: 'WRITINGFONT', monospace;
        font-size: 16px;
        line-height: 1.65;
        min-height: 100vh;

      }

      A {

        color: var(--lime);
        text-decoration: none;

      }

      A:hover {

        text-decoration: underline;

      }

      HEADER {

        position: sticky;
        top: 0;
        z-index: 10;
        height: var(--header-h);
        background: var(--gray);
        border-bottom: 1px solid var(--lime);
        display: flex;
        align-items: center;
        padding: 0 1.5rem;
        gap: 2rem;

      }

      .LOGO {

        font-size: 3rem;
        color: var(--lime);
        letter-spacing: 0.05rem;
        font-family: 'LOGOFONT';

      }

      HEADER NAV {

        display: flex;
        gap: 1.5rem;
        margin-left: auto;

      }

      HEADER NAV A {

        font-size: 1.5rem;
        font-family: 'HEADINGFONT';
        color: var(--text);
        letter-spacing: 0.08rem;

      }

      HEADER NAV A:hover {

        color: var(--lime);
        text-decoration: none;

      }

      .LAYOUT {

        display: grid;
        grid-template-columns: 1fr 260px;
        max-width: 100%;
        margin: 0 0 0 5px;
        min-height: calc(100vh - var(--header-h));

      }

      MAIN {

        padding: 2rem 2rem 2rem 5px;
        border-right: 1px solid var(--border);

      }

      .PAGE_TITLE {

        font-size: 2.5rem;
        font-family: 'HEADINGFONT';
        color: var(--lime);
        letter-spacing: 0.03em;
        margin-bottom: 0.25rem;

      }

      .PAGE_SUB {

        font-family: 'HEADINGFONT';
        font-size: 1.2rem;
        color: #00FF00;
        margin-bottom: 1rem;

      }

      .BLOCK {

        border: 1px solid var(--border);
        border-left: 2px solid var(--lime);
        background: var(--gray);
        padding: 1.1rem 1rem;
        margin-bottom: 1rem;

      }

      .BLOCK H2 {

        font-family: 'LOGOFONT';
        font-size: 2rem;
        color: #FFF;
        margin-bottom: 0.35rem;
        letter-spacing: 0.06em;

      }

      .BLOCK P {

        color: #666;
        font-size: 18px;

      }

      ASIDE {

        padding: 1.5rem 1.25rem;
        background: var(--gray);
        width: 100%;

      }

      .S_SECTION {

        margin-bottom: 1.75rem;

      }

      .S_HEAD {

        font-family: 'HEADINGFONT';
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        color: var(--lime);
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;

      }

      .S_LINK {

        display: block;
        padding: 4px 0;
        font-size: 0.82rem;
        color: var(--text);

      }

      .S_LINK:hover {

        color: var(--lime);
        text-decoration: none;

      }

      .S_NOTE {

        font-size: 1rem;
        color: #555;
        line-height: 1.5;

      }

      .S_NOTE STRONG {

        color: var(--text);

      }

      .AVATAR_WRAP {

        margin-bottom: 1.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;

      }

      .AVATAR_ROW {

        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;

      }

      .AVATAR_ARROW {

        background: none;
        border: 1px solid transparent;
        color: var(--lime);
        font-family: 'Share Tech Mono', monospace;
        font-size: 1rem;
        cursor: pointer;
        padding: 4px 4px;
        flex-shrink: 0;
        transition: border-color 0.1s;
        line-height: 1;
        user-select: none;

      }

      .AVATAR_ARROW:hover {

        border: 1px solid var(--lime);

      }

      .AVATAR_FRAME {

        flex: 1;
        aspect-ratio: 1;
        border: 1px solid var(--lime);
        outline: 3px solid var(--black);
        outline-offset: -5px;
        overflow: hidden;
        position: relative;
        background: #0D0D0D;

      }

      .AVATAR_FRAME IMG {

        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: contrast(1.05) brightness(0.95);

      }

      .AVATAR_DOTS {

        display: flex;
        gap: 5px;
        justify-content: center;

      }

      .AVATAR_DOT {

        width: 5px;
        height: 5px;
        border: 1px solid var(--dim);
        background: transparent;
        cursor: pointer;
        transition: background 0.1s, border-color 0.1s;

      }

      .AVATAR_DOT.ACTIVE {

        background: var(--lime);
        border-color: var(--lime);

      }

      .AVATAR_NAME {

        font-size: 0.75rem;
        color: var(--text);
        letter-spacing: 0.06em;
        text-align: center;

      }

      .AVATAR_HANDLE {

        font-size: 1rem;
        color: var(--lime);
        text-align: center;

      }

      .AVATAR_HANDLE A {

        font-size: 1rem;
        color: var(--lime);
        text-align: center;

      }

      .AVATAR_HANDLE A:hover {

        font-size: 1rem;
        text-decoration: underline;
        color: var(--lime);
        text-align: center;

      }