html:root {

    --white            : #fff;
    --black            : #000;
    --pretty-dark-gray : #202123;
    
    --gray-50  : #f9f9f9;
    --gray-100 : #ececec;
    --gray-200 : #e3e3e3;
    --gray-300 : #cdcdcd;
    --gray-400 : #b4b4b4;
    --gray-500 : #9b9b9b;
    --gray-600 : #676767;
    --gray-700 : #424242;
    --gray-750 : #2f2f2f;
    --gray-800 : #212121;
    --gray-900 : #171717;
    --gray-950 : #0d0d0d;

    --red-500 : #ef4444;
    --red-700 : #b91c1c;

    --brand-purple : #ab68ff;

    --openai-dot-com-background : #f9f9f9;

    --platform-green : #10a37f;
    --platform-error : #d00e17;

    --accent-blue : #3e68ff;

    --scrim : rgba( 0, 0, 0, .4 );

    --dialog-shadow :
    
        0px 20px 25px -5px rgba( 0, 0, 0, .1 ),
        0px 8px 10px -6px rgba( 0, 0, 0, .1 )
        
    ;

    --popover-shadow : 0px 8px 32px 0px rgba( 0, 0, 0, .2 );

    --menu-primary-surface-item-hover : rgba( 0, 0, 0, .05 );
    --menu-primary-surface-item-press : rgba( 0, 0, 0, .1 );

    --icon-default-tertiary : #a4a4a4;

    --text-primary    : var( --gray-950 );
    --text-secondary  : #5d5d5d;
    --text-tertiary   : var( --gray-400 );
    --text-quaternary : var( --gray-300 );
    --text-selection  : var( --white );
    --text-error      : #f93a37;
    --text-warning    : #e25507;

    --surface-error : 249 58 55;

    --border-xlight   : rgb( 0 0 0 / 5% );
    --border-light    : rgb( 0 0 0 / 10% );
    --border-medium   : rgb( 0 0 0 / 15% );
    --border-heavy    : rgb( 0 0 0 / 20% );
    --border-xheavy   : rgb( 0 0 0 / 25% );
    --border-sharp    : rgb( 0 0 0 / 5% );
    --border-warning  : rgba( 226, 85, 7, .5 );
    --border-white-10 : rgb( 255 255 255 / 10% );

    --main-surface-primary   : var( --white );
    --main-surface-secondary : var( --gray-50 );
    --main-surface-tertiary  : var( --gray-100 );

    --sidebar-surface-primary   : var( --gray-50 );
    --sidebar-surface-secondary : var( --gray-100 );
    --sidebar-surface-tertiary  : var( --gray-200 );
    
    --promo-surface : #edf6ff;
    --promo-primary : #0285ff;
    --promo-border  : rgba( 2, 133, 255, .1 );
    
    --main-page-background : var( --main-surface-primary );
    
    --primary : var( --accent-blue );

    --selection      : var( --selection-blue );
    --selection-blue : #007aff;

    --link : var( --accent-blue );

    --field-border-radius : var( --radius-circle );

    --button-primary-background : #131313;
    --button-primary-hover      : #333333;
    --button-outline-hover      : #ececec;
    --button-link-text-hover    : #555555;
    --button-text-on-primary    : #ffffff;
    --button-focus-ring-color   : rgb( 155, 155, 155 );

    --padding-2XL : 2rem;
    --padding-XL  : 1.5rem;
    --padding-LG  : 1rem;
    --padding-MD  : .75rem;
    --padding-SM  : .5rem;
    --padding-XS  : .25rem;

    --gap-2XL : 2rem;
    --gap-XL  : 1.5rem;
    --gap-LG  : 1rem;
    --gap-MD  : .75rem;
    --gap-SM  : .5rem;
    --gap-XS  : .25rem;

    --spacing-2   : .125rem;
    --spacing-4   : .25rem;
    --spacing-6   : .375rem;
    --spacing-8   : .5rem;
    --spacing-10  : .625rem;
    --spacing-12  : .75rem;
    --spacing-14  : .875rem;
    --spacing-16  : 1rem;
    --spacing-18  : 1.125rem;
    --spacing-20  : 1.25rem;
    --spacing-24  : 1.5rem;
    --spacing-28  : 1.75rem;
    --spacing-32  : 2rem;
    --spacing-36  : 2.25rem;
    --spacing-40  : 2.5rem;
    --spacing-44  : 2.75rem;
    --spacing-48  : 3rem;
    --spacing-56  : 3.5rem;
    --spacing-64  : 4rem;
    --spacing-72  : 4.5rem;
    --spacing-80  : 5rem;
    --spacing-96  : 6rem;
    --spacing-112 : 7rem;
    --spacing-128 : 8rem;
    --spacing-144 : 9rem;

    --radius-xxsmall  : .1875rem;
    --radius-xsmall   : .375rem;
    --radius-small    : .5rem;
    --radius-medium   : .75rem;
    --radius-large    : 1rem;
    --radius-xlarge   : 1.5rem;
    --radius-xxlarge  : 2rem;
    --radius-xxxlarge : 2.5rem;
    --radius-circle   : 99999px;

    --transition : 180ms ease;

    --font-family :
    
        'Helvetica Neue Cyr',
        'Roboto',
        'system-ui',
        '-apple-system',
        'Segoe UI',
        'sans-serif'
        
    ;

    & > body {

        font-family : var( --font-family );

        width : 100vw;

        height : 100vh;

        margin : unset;
        
        & s_segment {

            display : flex;

            justify-content : center;

            align-items : center;

            &.vertical { flex-direction : column }

            &.long { width : 100% }

            &.wide { height : 100% }

            &.fluid {
                
                width : 100%;

                height : 100%;
            
            }

        }

        & s_menu {}

        & s_form {

            display : flex;

            flex-direction : column;
            
            justify-content : center;

            align-items : center;
            
            & s_field {
                
                display : flex;

                align-items : center;

                width : 100%;

                height : 3.25rem;

                padding : 0 var( --spacing-20 );

                line-height : 1.5rem;

                font-size : 1rem;
                
                color : var( --text-primary );

                border : 1px solid var( --input-state-color, var( --border-medium ) );

                border-radius : var( --field-border-radius );

                outline : none;

                &:focus::before { transform : translateY( -50% ) }

                &::before {

                    content : attr( title );

                    display : flex;

                    align-items : center;

                    height : inherit;

                    padding : 10px;

                    background-color : #fff;

                    transition : var( --placeholder-transition );

                }

            }
        
        }

    }

}

@font-face { font-family : 'Helvetica Neue'; src : local( 'Helvetica Neue Condensed Bold' ),  local( 'Helvetica Neue Bold Condensed' ),  url( 'font/helvetica_neue/helvetica_neue_bold_condensed.woff2' )  format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_bold_condensed.woff' )  format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_bold_condensed.ttf' )  format( 'truetype' ); font-weight : 700; font-style : normal; font-display : swap; }
@font-face { font-family : 'Helvetica Neue'; src : local( 'Helvetica Neue Condensed Black' ), local( 'Helvetica Neue Black Condensed' ), url( 'font/helvetica_neue/helvetica_neue_black_condensed.woff2' ) format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_black_condensed.woff' ) format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_black_condensed.ttf' ) format( 'truetype' ); font-weight : 900; font-style : normal; font-display : swap; }

@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Roman' ),        url( 'font/helvetica_neue/helvetica_neue_cyr_roman.woff2' )        format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_roman.woff' )        format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_roman.ttf' )        format( 'truetype' ); font-weight : 400; font-style : normal; font-display : swap; }
@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Bold' ),         url( 'font/helvetica_neue/helvetica_neue_cyr_bold.woff2' )         format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_bold.woff' )         format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_bold.ttf' )         format( 'truetype' ); font-weight : 700; font-style : normal; font-display : swap; }
@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Italic' ),       url( 'font/helvetica_neue/helvetica_neue_cyr_italic.woff2' )       format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_italic.woff' )       format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_italic.ttf' )       format( 'truetype' ); font-weight : 500; font-style : italic; font-display : swap; }
@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Light' ),        url( 'font/helvetica_neue/helvetica_neue_cyr_light.woff2' )        format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_light.woff' )        format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_light.ttf' )        format( 'truetype' ); font-weight : 300; font-style : normal; font-display : swap; }
@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Light Italic' ), url( 'font/helvetica_neue/helvetica_neue_cyr_light_italic.woff2' ) format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_light_italic.woff' ) format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_light_italic.ttf' ) format( 'truetype' ); font-weight : 300; font-style : italic; font-display : swap; }
@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Black' ),        url( 'font/helvetica_neue/helvetica_neue_cyr_black.woff2' )        format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_black.woff' )        format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_black.ttf' )        format( 'truetype' ); font-weight : 900; font-style : normal; font-display : swap; }
@font-face { font-family : 'Helvetica Neue Cyr'; src : local( 'Helvetica Neue Cyr Black Italic' ), url( 'font/helvetica_neue/helvetica_neue_cyr_black_italic.woff2' ) format( 'woff2' ), url( 'font/helvetica_neue/helvetica_neue_cyr_black_italic.woff' ) format( 'woff' ), url( 'font/helvetica_neue/helvetica_neue_cyr_black_italic.ttf' ) format( 'truetype' ); font-weight : 900; font-style : italic; font-display : swap; }