.onyx-registration {
    --registration-gold: #fbd181;
    --registration-ink: #f6eff7;
    --registration-muted: #c6baca;
    --registration-panel: #201a27;
    --registration-edge: #594452;
    width: min(100%, 71rem);
    margin: clamp(1.15rem, 4vw, 3.5rem) auto 0;
    color: var(--registration-ink);
    font-family: 'DINNextW1G', sans-serif;
}

.onyx-registration-frame {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    border: 1px solid var(--registration-edge);
    border-radius: 1.15rem;
    overflow: hidden;
    background: var(--registration-panel);
    box-shadow: 0 1.5rem 4rem #08050cb8;
}

.onyx-registration-art {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.5rem, 3.8vw, 3rem);
    border-inline-end: 1px solid #a9744d61;
    background: #201619;
}

.onyx-registration-art img,
.onyx-registration-art::before,
.onyx-registration-art::after {
    position: absolute;
    pointer-events: none;
}

.onyx-registration-art img {
    z-index: -3;
    inset: -28% 0 auto;
    width: 100%;
    height: 140%;
    object-fit: cover;
    object-position: 47% center;
}

.onyx-registration-art::before {
    content: '';
    z-index: -2;
    inset: 0;
    background: linear-gradient(180deg, #170f1460, transparent 24%, #190f1938 42%, #150e17f0 81%, #150e17);
}

.onyx-registration-art::after {
    content: '';
    z-index: -1;
    inset: .85rem;
    border: 1px solid #ffca8352;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 1.5rem 1.5rem, 1.5rem calc(100% - 1.5rem), calc(100% - 1.5rem) calc(100% - 1.5rem), calc(100% - 1.5rem) 1.5rem, 1.5rem 1.5rem);
}

.onyx-registration-realm {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border-bottom: 1px solid #dcaa6966;
    padding: 0 0 .65rem;
    color: var(--registration-gold);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.onyx-registration-art-title {
    margin: .9rem 0 .65rem;
    color: #fff0db;
    font: 400 clamp(2.2rem, 4.2vw, 4.1rem)/.98 'albertus', Georgia, serif;
    text-shadow: 0 .2rem .95rem #100a16;
}

.onyx-registration-art-detail {
    max-width: 17rem;
    margin: 0;
    color: #e9d8d6;
    font-size: 1rem;
    line-height: 1.45;
}

.onyx-registration-panel {
    min-width: 0;
    padding: clamp(1.4rem, 4vw, 3rem);
    background: linear-gradient(155deg, #322633 0, transparent 55%), var(--registration-panel);
}

.onyx-registration-heading {
    margin-bottom: 1.65rem;
}

.onyx-registration-heading h1 {
    margin: 0 0 .4rem;
    color: var(--registration-ink);
    font: 400 clamp(2.05rem, 4vw, 3.2rem)/1.1 'albertus', Georgia, serif;
}

.onyx-registration-heading p {
    margin: 0;
    color: var(--registration-muted);
    font-size: .98rem;
}

.onyx-access { width: min(100%, 59rem); }
.onyx-registration.onyx-access .onyx-auth-fields { grid-template-columns: minmax(0, 1fr); }
.onyx-access .onyx-registration-art img { inset: 0; height: 100%; object-position: 68% center; }
.onyx-access .onyx-registration-art-title { font-size: clamp(1.8rem, 3.75vw, 3.15rem); }

.onyx-registration-heading a,
.onyx-registration .onyx-links a {
    color: var(--registration-gold);
    text-decoration: underline;
    text-underline-offset: .21em;
}

.onyx-registration-heading a:hover,
.onyx-registration .onyx-links a:hover,
.onyx-registration .onyx-consent a:hover {
    color: #fff0ce;
}

.onyx-registration-heading a i {
    margin-inline-start: .2rem;
    font-size: .7em;
}

.onyx-registration .onyx-form {
    max-width: none;
    margin: 0;
    gap: 1.25rem;
}

.onyx-registration .onyx-auth-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: .95rem 1rem;
}

.onyx-registration .onyx-field {
    min-width: 0;
    gap: .3rem;
}

.onyx-registration .onyx-field label {
    margin: 0;
    color: var(--registration-ink);
    font-size: .96rem;
    line-height: 1.25;
}

.onyx-registration .onyx-field small {
    color: var(--registration-muted);
    line-height: 1.25;
}

.onyx-registration .onyx-auth-control {
    position: relative;
}

.onyx-registration .onyx-field-icon {
    position: absolute;
    top: 50%;
    left: .9rem;
    z-index: 1;
    transform: translateY(-50%);
    color: #c7a580;
    font-size: .88rem;
    pointer-events: none;
}

.onyx-registration .onyx-form .form-control {
    width: 100%;
    min-height: 3rem;
    padding-inline: 2.35rem .8rem;
    border-radius: .5rem;
    color-scheme: dark;
    font-size: 1rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.onyx-registration .onyx-auth-control:has(.onyx-password-toggle:not([hidden])) .form-control {
    padding-inline-end: 3rem;
}

.onyx-password-toggle:not([hidden]) {
    position: absolute;
    inset: .22rem .25rem .22rem auto;
    display: grid;
    width: 2.5rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: #d7c6d3;
    cursor: pointer;
}

.onyx-password-toggle:is(:hover, [aria-pressed="true"]) {
    background: #3b2d3c;
    color: var(--registration-gold);
}

.onyx-registration #onyx-username-status:empty {
    position: absolute;
}

.onyx-registration #onyx-username-status[data-state="available"] { color: #a8dcaf; }
.onyx-registration #onyx-username-status[data-state="taken"] { color: #ffaaa1; }

.onyx-registration-code {
    grid-column: 1 / -1;
    border-block: 1px solid #b392a338;
}

.onyx-registration-code summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.65rem;
    color: #edd0a3;
    font-size: .95rem;
    cursor: pointer;
    list-style: none;
}

.onyx-registration-code summary::-webkit-details-marker { display: none; }
.onyx-registration-code summary .fa-chevron-down {
    margin-inline-start: auto;
    font-size: .72rem;
    transition: transform .16s ease;
}
.onyx-registration-code[open] summary .fa-chevron-down { transform: rotate(180deg); }
.onyx-registration-code summary:hover { color: #fff0ce; }
.onyx-registration-code .onyx-field { padding-block: .1rem .85rem; }

.onyx-registration .onyx-auth-consents {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.onyx-registration .onyx-auth-consents legend {
    width: auto;
    margin-bottom: .35rem;
    color: var(--registration-ink);
    font-size: .93rem;
    font-weight: 700;
}

.onyx-registration .onyx-consent {
    align-items: flex-start;
    gap: .65rem;
    min-height: 1.6rem;
    color: var(--registration-muted);
    font-size: .9rem;
    line-height: 1.4;
}

.onyx-registration .onyx-consent input {
    width: 1rem;
    height: 1rem;
    margin-top: .12rem;
}

.onyx-registration .onyx-consent label {
    margin: 0;
    cursor: pointer;
}

.onyx-registration .onyx-consent a {
    color: #e8cdad;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.onyx-registration .onyx-registration-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .8rem 1rem;
    border: 1px solid #f9d797;
    border-radius: .5rem;
    background: linear-gradient(110deg, #e1a763, #f5d493);
    color: #261823;
    font: 700 1.02rem/1.15 'DINNextW1G', sans-serif;
    text-transform: none;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.onyx-registration .onyx-registration-submit:is(:hover, :focus-visible) {
    border-color: #ffe7b6;
    background: #ffe0a5;
    color: #261823;
    box-shadow: 0 0 1.15rem #fbd18136;
}

.onyx-registration .onyx-registration-submit:active {
    background: #d9a065;
}

.onyx-registration .onyx-registration-links {
    margin: 1rem 0 0;
    font-size: .88rem;
}

.onyx-registration :is(summary, button, a, input):focus-visible {
    outline: 2px solid var(--registration-gold);
    outline-offset: 3px;
}

@media (max-width: 780px) {
    .onyx-registration-frame { grid-template-columns: 1fr; }
    .onyx-registration-art {
        min-height: 13rem;
        border-inline-end: 0;
        border-bottom: 1px solid #a9744d61;
        padding: 1.3rem;
    }
    .onyx-registration-art img { object-position: 29% center; }
    .onyx-registration-art::before {
        background: linear-gradient(90deg, #170f16f7, #170f16b8 37%, transparent 81%), linear-gradient(0deg, #150e17, transparent 42%);
    }
    .onyx-registration-art::after { inset: .6rem; }
    .onyx-registration-art-title { font-size: clamp(2rem, 6vw, 2.8rem); }
    .onyx-registration-art-detail { max-width: min(16rem, 64%); font-size: .86rem; }
}

@media (max-width: 480px) {
    .onyx-registration-art { min-height: 11.5rem; }
    .onyx-registration-panel { padding: 1.35rem 1rem; }
    .onyx-registration-heading { margin-bottom: 1.15rem; }
    .onyx-registration .onyx-auth-fields { grid-template-columns: 1fr; gap: .85rem; }
}