* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background-color: var(--ludissey-pattern-base);
    background-image: var(--ludissey-pattern);
    color: var(--ludissey-text-primary);
    font: 400 var(--ludissey-font-body)/normal var(--ludissey-font-family);
    -webkit-font-smoothing: antialiased;
}
h1 {
    margin: 0 0 var(--ludissey-space-s6);
    font-size: var(--ludissey-font-page-title);
    font-weight: 300;
    text-shadow: var(--ludissey-emboss-light);
    line-height: normal;
}
h2 {
    margin: 0;
    font-size: var(--ludissey-font-section-title);
    font-weight: 700;
    color: var(--ludissey-text-secondary);
    text-shadow: var(--ludissey-emboss-light);
    line-height: normal;
}
h3 {
    margin: 0 0 var(--ludissey-space-s3) var(--ludissey-space-s6);
    font-size: var(--ludissey-font-label);
    font-weight: 700;
    color: var(--ludissey-text-secondary);
    text-shadow: var(--ludissey-emboss-light);
    line-height: normal;
}
small {
    font-size: var(--ludissey-font-small);
    color: var(--ludissey-text-tertiary);
}
p {
    margin: 0;
}
a {
    color: var(--ludissey-link);
    text-decoration: none;
}
[hidden] {
    display: none!important;
}
.grow {
    flex: 1 1 auto;
}
.muted {
    color: var(--ludissey-text-tertiary);
}
.error {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s2);
    margin: 0;
    color: var(--ludissey-danger);
    font-size: var(--ludissey-font-small);
}
.error:empty {
    display: none;
}
.skip {
    position: absolute;
    left: calc(0px - var(--ludissey-size-content));
    top: 0;
}
.skip:focus {
    left: 0;
    z-index: 5;
    padding: var(--ludissey-space-s4);
    background: var(--ludissey-surface);
}
.icon {
    display: block;
    flex: none;
    width: var(--ludissey-icon-normal);
    height: var(--ludissey-icon-normal);
}
.pack {
    display: block;
    flex: none;
}
.brand {
    display: block;
    width: auto;
    height: var(--ludissey-size-header-logo);
    color: var(--ludissey-header-text);
}
.gap {
    height: var(--ludissey-space-s8);
}
button,
.button {
    margin: 0;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--ludissey-space-s3);
    height: var(--ludissey-size-button);
    padding: 0 var(--ludissey-space-s8);
    border: 0;
    border-radius: var(--ludissey-radius-button);
    background: var(--ludissey-gloss-white);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-white-border), var(--ludissey-shadow-highlight);
    color: var(--ludissey-link);
    font: 700 var(--ludissey-font-button)/normal var(--ludissey-font-family);
    text-shadow: var(--ludissey-emboss-light);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
button:active:not(:disabled),
.button:active {
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-white-border), var(--ludissey-shadow-pressed);
}
button:disabled {
    opacity: var(--ludissey-opacity-disabled);
    cursor: default;
}
.purple,
.green,
.red,
.black {
    color: var(--ludissey-text-on-accent);
    text-shadow: var(--ludissey-emboss-dark);
}
.purple {
    background: var(--ludissey-gloss-purple);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-purple-border), var(--ludissey-shadow-highlight);
}
.green {
    background: var(--ludissey-gloss-green);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-green-border), var(--ludissey-shadow-highlight);
}
.red {
    background: var(--ludissey-gloss-red);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-red-border), var(--ludissey-shadow-highlight);
}
.black {
    background: var(--ludissey-gloss-black);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-black-border), var(--ludissey-shadow-highlight);
}
.small {
    height: var(--ludissey-size-button-small);
    padding: 0 var(--ludissey-space-s6);
    border-radius: var(--ludissey-radius-bar);
    font-size: var(--ludissey-font-button-small);
}
.large {
    height: var(--ludissey-size-button-large);
    padding: 0 var(--ludissey-space-s12);
    border-radius: var(--ludissey-radius-button-large);
    font-size: var(--ludissey-font-action);
}
.wide {
    width: 100%;
}
button.plain {
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ludissey-link);
    font-size: var(--ludissey-font-small);
    font-weight: 400;
    text-shadow: none;
}
input {
    font: 400 var(--ludissey-font-body)/normal var(--ludissey-font-family);
    color: var(--ludissey-text-primary);
}
textarea,
input:not([type=checkbox]) {
    height: var(--ludissey-size-text-field);
    padding: 0 var(--ludissey-space-s4);
    border: 0;
    border-radius: var(--ludissey-radius-field);
    background: var(--ludissey-surface);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-border), var(--ludissey-shadow-field);
    outline: 0;
}
textarea:focus,
input:focus {
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-focus), var(--ludissey-shadow-field);
}
textarea::placeholder,
input::placeholder {
    color: var(--ludissey-text-tertiary);
}
.popup {
    position: relative;
    display: inline-flex;
    flex: none;
    width: var(--ludissey-size-menu);
    height: var(--ludissey-size-button-small);
    border-radius: var(--ludissey-radius-button);
    overflow: hidden;
    background: var(--ludissey-gloss-white);
}
.popup::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-white-border);
    pointer-events: none;
}
.popup select {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 calc(var(--ludissey-size-popup-tip) + var(--ludissey-space-s6)) 0 var(--ludissey-space-s6);
    border: 0;
    background: transparent;
    color: var(--ludissey-text-primary);
    font: 700 var(--ludissey-font-small)/normal var(--ludissey-font-family);
    text-shadow: var(--ludissey-emboss-light);
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
}
.popup i {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ludissey-size-popup-tip);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ludissey-gloss-purple);
    box-shadow: inset var(--ludissey-border-width) 0 0 var(--ludissey-gloss-purple-border);
    color: var(--ludissey-text-on-accent);
    pointer-events: none;
}
.popup i .icon {
    width: var(--ludissey-icon-chevron);
    height: var(--ludissey-icon-chevron);
    margin: calc(0px - var(--ludissey-space-s1)) 0;
}
.topnav {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--ludissey-size-navigation-bar);
    padding: 0 var(--ludissey-space-s8);
    background: var(--ludissey-gloss-bar);
    box-shadow: inset 0 var(--ludissey-border-width) 0 rgba(255, 255, 255, var(--ludissey-opacity-bar-light)), inset 0 calc(0px - var(--ludissey-border-width)) 0 var(--ludissey-gloss-bar-border), var(--ludissey-shadow-bar);
}
.topnav .logo {
    display: flex;
    margin-right: var(--ludissey-space-s6);
}
.topnav .logo .brand,
.loginbar .brand,
.pitch .brand {
    filter: drop-shadow(var(--ludissey-emboss-dark));
}
.topnav > .grow {
    min-width: var(--ludissey-space-s4);
}
.navgroup {
    display: flex;
    align-items: center;
}
.navlink {
    display: inline-flex;
    padding: 0 var(--ludissey-space-s1);
    color: var(--ludissey-header-text);
    font-size: var(--ludissey-font-navigation);
    font-weight: 700;
    white-space: nowrap;
    text-shadow: var(--ludissey-emboss-dark);
}
.navlink .face {
    display: inline-flex;
    align-items: center;
    gap: var(--ludissey-space-s2);
    height: var(--ludissey-size-bar-button);
    padding: 0 var(--ludissey-space-s6);
    border-radius: var(--ludissey-radius-toggle);
}
.navlink:hover .face {
    background: rgba(255, 255, 255, var(--ludissey-shadow-utility-hover));
}
.navlink[aria-current=page] .face {
    background: linear-gradient(color-mix(in srgb, var(--ludissey-surface-navigation-active-top) calc(var(--ludissey-opacity-navigation-top) * 100%), transparent), color-mix(in srgb, var(--ludissey-surface-navigation-active-bottom) calc(var(--ludissey-opacity-navigation-bottom) * 100%), transparent));
    box-shadow: var(--ludissey-shadow-pressed);
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ludissey-size-badge);
    height: var(--ludissey-size-badge);
    padding: 0 var(--ludissey-space-s3);
    border-radius: calc(var(--ludissey-size-badge) / 2);
    background: var(--ludissey-gloss-badge);
    box-shadow: inset 0 0 0 var(--ludissey-border-focus) var(--ludissey-surface), 0 var(--ludissey-shadow-field-dy) var(--ludissey-shadow-bar-blur) rgba(0, 0, 0, var(--ludissey-shadow-button-opacity));
    color: var(--ludissey-text-on-accent);
    font: 700 var(--ludissey-font-button-small)/normal var(--ludissey-font-family);
    text-shadow: var(--ludissey-emboss-dark);
}
.search {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s3);
    width: var(--ludissey-size-search-wide);
    height: var(--ludissey-size-header-search);
    margin-right: var(--ludissey-space-s4);
    padding: 0 var(--ludissey-space-s6) 0 var(--ludissey-space-s4);
    border-radius: calc(var(--ludissey-size-header-search) / 2);
    background: var(--ludissey-surface);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-search-border), inset 0 var(--ludissey-shadow-field-dy) var(--ludissey-shadow-pressed-blur) rgba(0, 0, 0, var(--ludissey-opacity-search-shade));
}
.search input:not([type=checkbox]) {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--ludissey-font-button);
}
.search .pack {
    width: var(--ludissey-icon-small);
    height: var(--ludissey-icon-small);
}
.bar {
    position: relative;
    min-width: var(--ludissey-size-bar-button);
    height: var(--ludissey-size-bar-button);
    margin-right: var(--ludissey-space-s3);
    padding: 0 var(--ludissey-space-s4);
    border-radius: var(--ludissey-radius-bar);
    background: var(--ludissey-gloss-bar-button);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-bar-button-border), var(--ludissey-shadow-highlight);
    color: var(--ludissey-text-on-accent);
    font-size: var(--ludissey-font-button-small);
    text-shadow: var(--ludissey-emboss-dark);
}
.bar[aria-expanded=true],
.bar:active {
    background: var(--ludissey-gloss-bar-button-on);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-bar-button-on-border), var(--ludissey-shadow-pressed);
}
.bar .pack {
    width: var(--ludissey-icon-bar);
    height: var(--ludissey-icon-bar);
}
.bar .badge {
    position: absolute;
    top: calc(0px - var(--ludissey-space-s4));
    right: calc(0px - var(--ludissey-space-s4));
}
.menu-toggle,
.search-toggle,
.login-toggle {
    display: none;
}
.download {
    display: inline-flex;
    align-items: center;
    height: var(--ludissey-size-bar-button);
    margin-right: var(--ludissey-space-s4);
    padding: 0 var(--ludissey-space-s6);
    border-radius: var(--ludissey-radius-bar);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-header-text);
    color: var(--ludissey-header-text);
    font-weight: 700;
    font-size: var(--ludissey-font-button-small);
    text-shadow: var(--ludissey-emboss-dark);
}
.dropdown-wrap {
    position: relative;
    display: flex;
}
.profile {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    height: var(--ludissey-size-bar-button);
    margin-left: var(--ludissey-space-s2);
    padding: 0 var(--ludissey-space-s4);
    border-radius: var(--ludissey-radius-toggle);
    color: var(--ludissey-header-text);
    font-size: var(--ludissey-font-navigation);
    font-weight: 700;
    text-shadow: var(--ludissey-emboss-dark);
}
.profile:hover {
    background: rgba(255, 255, 255, var(--ludissey-shadow-utility-hover));
}
.profile .who {
    white-space: nowrap;
}
.bust {
    position: relative;
    display: block;
    flex: none;
    overflow: hidden;
    border-radius: var(--ludissey-radius-bust);
    background: var(--ludissey-surface-muted);
}
.bust::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) color-mix(in srgb, var(--ludissey-bust-edge) calc(var(--ludissey-opacity-bust-edge) * 100%), transparent);
}
.bust img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bust.size-header {
    width: var(--ludissey-size-header-avatar);
    height: var(--ludissey-size-header-avatar);
}
.bust.size-friend {
    width: var(--ludissey-size-friend-bust);
    height: var(--ludissey-size-friend-bust);
}
.bust.size-headshot {
    width: var(--ludissey-size-headshot);
    height: var(--ludissey-size-headshot);
}
.popover {
    position: fixed;
    top: calc(var(--ludissey-size-navigation-bar) - var(--ludissey-space-s2) + var(--ludissey-size-popover-arrow));
    right: var(--ludissey-space-s4);
    z-index: 4;
    width: var(--ludissey-size-popover-width);
    padding: 0 var(--ludissey-space-s3) var(--ludissey-space-s3);
    border-radius: var(--ludissey-radius-popover);
    background: linear-gradient(var(--ludissey-surface-popover-top), var(--ludissey-gloss-bar-button-on-bottom) var(--ludissey-size-popover-header), var(--ludissey-surface-popover-bottom));
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-surface-popover-border), inset 0 var(--ludissey-border-width) 0 rgba(255, 255, 255, var(--ludissey-opacity-shine-top)), var(--ludissey-shadow-popover);
}
.popover.menu {
    width: var(--ludissey-size-menu);
    padding-top: var(--ludissey-space-s3);
}
.popover .arrow {
    position: absolute;
    top: calc(0px - var(--ludissey-size-popover-arrow));
    left: calc(var(--arrow, 50%) - var(--ludissey-size-popover-arrow));
    width: calc(2 * var(--ludissey-size-popover-arrow));
    height: var(--ludissey-size-popover-arrow);
    overflow: hidden;
}
.popover .arrow::before {
    content: "";
    position: absolute;
    left: calc(var(--ludissey-size-popover-arrow) * 0.3);
    top: calc(var(--ludissey-size-popover-arrow) * 0.3);
    width: calc(var(--ludissey-size-popover-arrow) * 1.4);
    height: calc(var(--ludissey-size-popover-arrow) * 1.4);
    transform: rotate(45deg);
    background: var(--ludissey-surface-popover-top);
    box-shadow: inset var(--ludissey-border-width) var(--ludissey-border-width) 0 var(--ludissey-surface-popover-border);
}
.ph {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    height: var(--ludissey-size-popover-header);
    padding: 0 var(--ludissey-space-s6);
    color: var(--ludissey-text-on-accent);
    font-size: var(--ludissey-font-label);
    text-shadow: var(--ludissey-emboss-black);
}
.ph .bar {
    margin: 0;
    padding: 0 var(--ludissey-space-s4);
    font-weight: 700;
}
.pbody {
    overflow: hidden;
    border-radius: calc(var(--ludissey-radius-button) - var(--ludissey-border-width));
    background: var(--ludissey-surface);
}
.notifications .pbody {
    max-height: var(--ludissey-size-popover-width);
    overflow-y: auto;
}
.note {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    padding: var(--ludissey-space-s4) var(--ludissey-space-s6);
}
.note + .note {
    margin-top: var(--ludissey-border-width);
    box-shadow: 0 calc(0px - var(--ludissey-border-width)) 0 var(--ludissey-border-subtle);
}
.note .pack {
    width: var(--ludissey-icon-large);
    height: var(--ludissey-icon-large);
}
.note .name {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s1);
    min-width: 0;
}
.note b {
    font-size: var(--ludissey-font-body);
}
.note b.read {
    font-weight: 400;
}
.note small {
    font-size: var(--ludissey-font-small);
    color: var(--ludissey-text-secondary);
}
.note small.when {
    font-size: var(--ludissey-font-caption);
    color: var(--ludissey-text-tertiary);
}
.note .unread {
    flex: none;
    width: var(--ludissey-space-s6);
    height: var(--ludissey-space-s6);
    border-radius: 50%;
    background: var(--ludissey-gloss-purple);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-purple-border);
}
.note .close {
    width: var(--ludissey-icon-small);
    height: var(--ludissey-icon-small);
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ludissey-text-tertiary);
}
.note .close .icon {
    width: var(--ludissey-icon-small);
    height: var(--ludissey-icon-small);
}
.none {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    padding: var(--ludissey-space-s6);
    color: var(--ludissey-text-secondary);
}
.none .pack {
    width: var(--ludissey-icon-large);
    height: var(--ludissey-icon-large);
}
.menurow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: var(--ludissey-size-list-row);
    padding: 0 var(--ludissey-space-s6);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ludissey-text-primary);
    font-size: var(--ludissey-font-label);
    text-shadow: none;
}
.menurow + .menurow {
    margin-top: var(--ludissey-border-width);
    box-shadow: 0 calc(0px - var(--ludissey-border-width)) 0 var(--ludissey-border-subtle);
}
.menurow:hover {
    background: var(--ludissey-surface-selection);
    color: var(--ludissey-text-on-accent);
}
main#content {
    max-width: calc(var(--ludissey-size-content) + 2 * var(--ludissey-space-s12));
    margin: 0 auto;
    padding: var(--ludissey-space-s12);
}
.status {
    margin: 0 0 var(--ludissey-space-s6);
    padding: var(--ludissey-space-s4) var(--ludissey-space-s6);
    border-radius: var(--ludissey-radius-group);
    background: var(--ludissey-surface);
}
.status.error {
    color: var(--ludissey-danger);
}
.group,
.card {
    background: var(--ludissey-surface);
    border-radius: var(--ludissey-radius-group);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-border), var(--ludissey-shadow-group);
}
.empty {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s6);
    padding: var(--ludissey-space-s8);
    color: var(--ludissey-text-secondary);
}
.empty .pack {
    width: var(--ludissey-icon-empty);
    height: var(--ludissey-icon-empty);
}
.hello {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s8);
    padding-bottom: var(--ludissey-space-s4);
}
.headshot .bust {
    box-shadow: var(--ludissey-shadow-app-icon);
}
.greeting {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s2);
    min-width: 0;
}
.greeting h1 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.greeting small {
    font-size: var(--ludissey-font-small);
    text-shadow: var(--ludissey-emboss-light);
}
.shelfhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ludissey-space-s4);
    padding: var(--ludissey-space-s8) 0 var(--ludissey-space-s4);
}
.friendrow {
    display: flex;
    gap: var(--ludissey-space-s6);
    padding: var(--ludissey-space-s6);
}
.friend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ludissey-space-s3);
    width: calc(var(--ludissey-size-friend-bust) + var(--ludissey-space-s12));
}
.friend small {
    width: 100%;
    overflow: hidden;
    color: var(--ludissey-text-primary);
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pair {
    position: relative;
}
.pair .dot {
    position: absolute;
    right: calc(0px - var(--ludissey-space-s2));
    bottom: calc(0px - var(--ludissey-space-s2));
}
.dot {
    display: inline-block;
    flex: none;
    width: var(--ludissey-size-presence);
    height: var(--ludissey-size-presence);
    border-radius: 50%;
    background: radial-gradient(ellipse 25% 21% at 45% 33%, rgba(255, 255, 255, var(--ludissey-opacity-dot-highlight)) 99%, transparent 100%), var(--ludissey-border-strong);
    box-shadow: inset 0 0 0 var(--ludissey-border-focus) var(--ludissey-surface), 0 var(--ludissey-shadow-field-dy) var(--ludissey-shadow-field-blur) rgba(0, 0, 0, var(--ludissey-shadow-button-opacity));
}
.dot.online {
    background: radial-gradient(ellipse 25% 21% at 45% 33%, rgba(255, 255, 255, var(--ludissey-opacity-dot-highlight)) 99%, transparent 100%), var(--ludissey-online);
}
.shelfrow {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s8);
    padding-top: var(--ludissey-space-s3);
}
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ludissey-space-s3);
    width: var(--ludissey-size-tile-standard);
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ludissey-text-primary);
    font-weight: 400;
    text-shadow: none;
}
.tile:active:not(:disabled) {
    box-shadow: none;
}
.tile .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ludissey-space-s1);
    width: 100%;
    text-shadow: var(--ludissey-emboss-light);
}
.tile strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--ludissey-font-tile-title);
    text-align: center;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tile small {
    font-size: var(--ludissey-font-caption);
}
.appicon {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--ludissey-radius-app-icon);
    background: var(--tint);
    box-shadow: var(--ludissey-shadow-app-icon);
}
.appicon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) color-mix(in srgb, var(--ludissey-shadow-app-icon-color) calc(var(--ludissey-opacity-icon-edge) * 100%), transparent);
}
.appicon::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-icon-top)), rgba(255, 255, 255, var(--ludissey-opacity-icon-bottom)) 46%);
    -webkit-mask-image: radial-gradient(ellipse 80% 52% at 50% -6%, var(--ludissey-gloss-black-border) 99%, transparent 100%);
}
.appicon .brand {
    width: 42%;
    height: auto;
    color: var(--ludissey-header-text);
}
.appicon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.appicon.shelf {
    width: var(--ludissey-size-tile-icon);
    height: var(--ludissey-size-tile-icon);
}
.appicon.list {
    width: var(--ludissey-size-list-icon);
    height: var(--ludissey-size-list-icon);
}
.appicon.detail {
    width: var(--ludissey-size-detail-icon);
    height: var(--ludissey-size-detail-icon);
}
.rows {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s6);
}
.rows .group {
    flex: 1;
    min-width: 0;
}
.group > .row + .row,
.group > .rowlink + .rowlink {
    margin-top: var(--ludissey-border-width);
    box-shadow: 0 calc(0px - var(--ludissey-border-width)) 0 var(--ludissey-border-subtle);
}
.row {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    min-height: var(--ludissey-size-list-row);
    padding: var(--ludissey-space-s3) var(--ludissey-space-s6);
}
.row .words {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s1);
    min-width: 0;
}
.row .words b {
    font-size: var(--ludissey-font-label);
}
.row .words small {
    font-size: var(--ludissey-font-small);
}
.row.app {
    padding: var(--ludissey-space-s4);
}
.row.app .open {
    gap: var(--ludissey-space-s6);
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ludissey-text-primary);
    font-weight: 400;
    text-align: left;
    text-shadow: none;
}
.row.app .words b {
    font-size: var(--ludissey-font-label);
}
.row.app em {
    color: var(--ludissey-success);
    font-size: var(--ludissey-font-small);
    font-style: normal;
    font-weight: 700;
}
.rowlink {
    display: block;
    color: inherit;
}
.rowlink .value {
    color: var(--ludissey-value);
    font-size: var(--ludissey-font-body);
}
.rowlink .icon {
    width: var(--ludissey-icon-small);
    height: var(--ludissey-icon-small);
    color: var(--ludissey-text-tertiary);
}
.listhead {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    padding-bottom: var(--ludissey-space-s8);
}
.listhead h1 {
    margin: 0;
}
.listhead small {
    text-shadow: var(--ludissey-emboss-light);
}
.back {
    position: relative;
    height: var(--ludissey-size-bar-button);
    margin-bottom: var(--ludissey-space-s8);
    padding: 0 var(--ludissey-space-s8) 0 calc(var(--ludissey-size-back-arrow) + var(--ludissey-space-s4));
    border-radius: 0 var(--ludissey-radius-bar) var(--ludissey-radius-bar) 0;
    background: var(--ludissey-gloss-white-border);
    box-shadow: none;
    font-size: var(--ludissey-font-back-button);
    clip-path: polygon(0 50%, var(--ludissey-size-back-arrow) 0, 100% 0, 100% 100%, var(--ludissey-size-back-arrow) 100%);
}
.back::before {
    content: "";
    position: absolute;
    inset: var(--ludissey-border-width);
    border-radius: 0 calc(var(--ludissey-radius-bar) - var(--ludissey-border-width)) calc(var(--ludissey-radius-bar) - var(--ludissey-border-width)) 0;
    background: var(--ludissey-gloss-white);
    clip-path: polygon(0 50%, calc(var(--ludissey-size-back-arrow) - var(--ludissey-border-width)) 0, 100% 0, 100% 100%, calc(var(--ludissey-size-back-arrow) - var(--ludissey-border-width)) 100%);
}
.back span {
    position: relative;
}
.back:active:not(:disabled) {
    box-shadow: none;
}
.detail {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s12);
    padding-bottom: var(--ludissey-space-s6);
}
.picture {
    display: flex;
    flex: none;
    flex-direction: column;
}
.frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ludissey-radius-frame);
    box-shadow: var(--ludissey-shadow-button);
}
.frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-white-border);
    pointer-events: none;
}
.mirror {
    display: block;
    height: var(--ludissey-size-reflection);
    margin-top: var(--ludissey-border-focus);
    border-radius: var(--ludissey-radius-frame) var(--ludissey-radius-frame) 0 0;
    background: linear-gradient(color-mix(in srgb, var(--tint) calc(var(--ludissey-opacity-reflection) * 100%), transparent), transparent);
}
.frame:has(.cover.loaded) {
    -webkit-box-reflect: below var(--ludissey-border-focus) linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-reflection)), transparent var(--ludissey-size-reflection));
}
.frame:has(.cover.loaded) + .mirror {
    background: none;
}
.cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ludissey-size-cover-wide);
    height: calc(var(--ludissey-size-cover-wide) * 9 / 16);
    background: var(--tint);
}
.cover .brand {
    width: 42%;
    height: auto;
    max-height: 42%;
    color: var(--ludissey-header-text);
}
.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s6);
    min-width: 0;
}
.heading {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s6);
}
.heading > span {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s2);
    min-width: 0;
}
.heading h1 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--ludissey-font-display);
    font-weight: 700;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.byline {
    display: flex;
    align-items: baseline;
    gap: var(--ludissey-space-s2);
}
.byline .author {
    color: var(--ludissey-value);
    font-size: var(--ludissey-font-body);
}
.play-button {
    width: 100%;
    height: var(--ludissey-size-play-button);
    gap: var(--ludissey-space-s4);
    border-radius: var(--ludissey-radius-button-large);
    background: var(--ludissey-gloss-green);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-green-border), var(--ludissey-shadow-highlight);
    color: var(--ludissey-text-on-accent);
    font-size: var(--ludissey-font-play);
    text-shadow: var(--ludissey-emboss-dark);
}
.play-button .icon {
    width: var(--ludissey-icon-large);
    height: var(--ludissey-icon-large);
}
.statbar {
    display: flex;
    margin-bottom: var(--ludissey-space-s8);
}
.statbar div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ludissey-space-s1);
    min-width: 0;
    padding: var(--ludissey-space-s4) var(--ludissey-space-s2);
}
.statbar div + div {
    box-shadow: inset var(--ludissey-border-width) 0 0 var(--ludissey-border-subtle);
}
.statbar small,
.statbar b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.statbar b {
    font-size: var(--ludissey-font-section-title);
}
.centered {
    display: flex;
    justify-content: center;
    padding-bottom: var(--ludissey-space-s8);
}
.description.group {
    padding: var(--ludissey-space-s6);
}
.servers-head {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
    padding-bottom: var(--ludissey-space-s3);
}
.servers-head h3 {
    margin-bottom: 0;
}
.row.server .pack {
    width: var(--ludissey-icon-large);
    height: var(--ludissey-icon-large);
}
.row.server {
    gap: var(--ludissey-space-s6);
}
.loading {
    color: var(--ludissey-text-secondary);
    font-size: var(--ludissey-font-small);
}
.seg {
    position: relative;
    display: inline-flex;
    flex: none;
    overflow: hidden;
    border-radius: var(--ludissey-radius-segmented);
    vertical-align: top;
}
.seg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-segment-border);
    pointer-events: none;
}
.seg button {
    height: var(--ludissey-size-segmented);
    padding: 0 var(--ludissey-space-s8);
    border-radius: 0;
    background: var(--ludissey-gloss-segment);
    box-shadow: none;
    color: var(--ludissey-text-secondary);
    font-size: var(--ludissey-font-small);
}
.seg button + button {
    border-left: var(--ludissey-border-width) solid var(--ludissey-gloss-segment-border);
}
.seg button[aria-selected=true] {
    background: var(--ludissey-gloss-segment-on);
    box-shadow: var(--ludissey-shadow-pressed);
    color: var(--ludissey-text-on-accent);
    text-shadow: var(--ludissey-emboss-dark);
}
.seg.small button {
    height: var(--ludissey-size-segmented-small);
    font-size: var(--ludissey-font-button-small);
}
.avatar-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s12);
}
.avatar-preview {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--ludissey-size-avatar-preview-width);
    height: var(--ludissey-size-avatar-preview-height);
    background: var(--ludissey-surface-alt);
}
.avatar-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ludissey-space-s8);
    min-width: 0;
}
.avatar-controls .group.empty {
    align-self: stretch;
}
.avatar-controls h2 {
    padding: var(--ludissey-space-s8) 0 var(--ludissey-space-s4);
}
.avatar-controls .catalog {
    align-self: stretch;
}
.bodyrow {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s12);
}
.field {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s3);
}
.field b {
    color: var(--ludissey-text-secondary);
    font-size: var(--ludissey-font-label);
    text-shadow: var(--ludissey-emboss-light);
}
.field input {
    width: var(--ludissey-size-field);
}
.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--ludissey-size-item-width));
    gap: var(--ludissey-space-s6);
    align-self: stretch;
}
.item {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--ludissey-space-s3);
    width: var(--ludissey-size-item-width);
    height: var(--ludissey-size-item-height);
    padding: var(--ludissey-space-s3);
    border-radius: var(--ludissey-radius-group);
    background: var(--ludissey-surface);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-border);
    color: var(--ludissey-text-primary);
    font-weight: 400;
    text-shadow: none;
}
.item.selected {
    box-shadow: inset 0 0 0 var(--ludissey-border-focus) var(--ludissey-accent);
}
.item .shot {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--ludissey-radius-bust);
    background: var(--ludissey-surface-alt);
}
.item .shot.skin {
    background: var(--skin);
}
.item .shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.item b {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--ludissey-font-small);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equip-row {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s3);
}
.equip-row b {
    color: var(--ludissey-text-secondary);
    font-size: var(--ludissey-font-label);
    text-shadow: var(--ludissey-emboss-light);
}
.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ludissey-space-s2);
}
.swatch {
    position: relative;
    width: calc(var(--ludissey-size-swatch) + var(--ludissey-space-s3));
    height: calc(var(--ludissey-size-swatch) + var(--ludissey-space-s3));
    padding: 0;
    overflow: hidden;
    border-radius: var(--ludissey-radius-bust);
    background: var(--swatch);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) color-mix(in srgb, var(--ludissey-bust-edge) calc(var(--ludissey-opacity-bust-edge) * 100%), transparent);
}
.swatch span {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-icon-top)), rgba(255, 255, 255, var(--ludissey-opacity-icon-bottom)) 46%);
    -webkit-mask-image: radial-gradient(ellipse 80% 52% at 50% -6%, var(--ludissey-gloss-black-border) 99%, transparent 100%);
}
.swatch[aria-pressed=true] {
    outline: var(--ludissey-border-focus) solid var(--ludissey-accent);
    outline-offset: var(--ludissey-border-width);
}
.actions {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
}
.inline {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s4);
}
#friend-name {
    width: var(--ludissey-size-field);
}
h1 + .inline {
    padding-bottom: var(--ludissey-space-s8);
}
.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(var(--ludissey-size-friend-card) + var(--ludissey-space-s12)));
    gap: var(--ludissey-space-s8);
    margin-top: var(--ludissey-space-s8);
}
.person {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ludissey-space-s3);
    padding: var(--ludissey-space-s6);
}
.person b {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--ludissey-font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.person small {
    display: flex;
    align-items: center;
    gap: var(--ludissey-space-s2);
    font-size: var(--ludissey-font-caption);
}
.person .remove {
    position: absolute;
    top: var(--ludissey-space-s3);
    right: var(--ludissey-space-s3);
    opacity: 0;
}
.person:hover .remove,
.person .remove:focus-visible {
    opacity: 1;
}
.person.wide {
    grid-column: span 2;
}
.pairbuttons {
    display: flex;
    gap: var(--ludissey-space-s2);
}
.settings {
    max-width: var(--ludissey-size-settings);
    margin: 0 auto;
}
.settings > .seg {
    margin-bottom: var(--ludissey-space-s8);
}
.settings .field-row {
    padding: 0 var(--ludissey-space-s6) var(--ludissey-space-s6);
}
.settings .field-row input {
    flex: 1;
    min-width: 0;
}
.settings .bio {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s4);
    padding: var(--ludissey-space-s6);
}
.footnote {
    padding: var(--ludissey-space-s3) var(--ludissey-space-s6) 0;
    color: var(--ludissey-text-tertiary);
    font-size: var(--ludissey-font-small);
    text-align: center;
    text-shadow: var(--ludissey-emboss-light);
}
.switch {
    position: relative;
    display: inline-flex;
    flex: none;
    width: var(--ludissey-size-toggle-width);
    height: var(--ludissey-size-toggle-height);
    overflow: hidden;
    border-radius: var(--ludissey-radius-toggle);
    background: linear-gradient(var(--ludissey-surface-switch-off-top), var(--ludissey-surface-switch-off-bottom));
    box-shadow: inset 0 calc(2 * var(--ludissey-shadow-pressed-dy)) var(--ludissey-shadow-pressed-blur) rgba(0, 0, 0, var(--ludissey-shadow-field-opacity));
    cursor: pointer;
}
.switch.on {
    background: linear-gradient(var(--ludissey-surface-switch-on-top), var(--ludissey-surface-switch-on-bottom));
    box-shadow: inset 0 calc(2 * var(--ludissey-shadow-pressed-dy)) var(--ludissey-shadow-pressed-blur) var(--ludissey-shadow-pressed-color);
}
.switch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-surface-switch-on-border);
    pointer-events: none;
}
.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.switch .track {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ludissey-size-toggle-width) - var(--ludissey-size-switch-knob));
    color: var(--ludissey-text-tertiary);
    font-size: var(--ludissey-font-body);
    font-weight: 700;
    text-shadow: var(--ludissey-emboss-light);
}
.switch.on .track {
    right: auto;
    left: 0;
    color: var(--ludissey-text-on-accent);
    text-shadow: var(--ludissey-emboss-dark);
}
.switch .knob {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ludissey-size-switch-knob);
    border-radius: calc(var(--ludissey-radius-toggle) - var(--ludissey-border-width));
    background: var(--ludissey-gloss-knob);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-knob-border);
}
.switch.on .knob {
    left: auto;
    right: 0;
}
main#content.authwrap {
    max-width: none;
    padding: 0;
}
.authwrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, var(--ludissey-shadow-login-fade)), transparent calc(var(--ludissey-shadow-login-fade-reach) * 100%)), var(--ludissey-header) url(backgrounds/Login.jpg) center/cover no-repeat;
}
.loginbar {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s4);
    height: var(--ludissey-size-login-bar);
    padding: var(--ludissey-space-s4) var(--ludissey-space-s12) 0;
    background: linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-black-top)), rgba(255, 255, 255, var(--ludissey-opacity-black-mid)) 50%, transparent 50%), color-mix(in srgb, var(--ludissey-gloss-black-bottom) calc(var(--ludissey-shadow-black-bar) * 100%), transparent);
    box-shadow: inset 0 var(--ludissey-border-width) 0 rgba(255, 255, 255, var(--ludissey-opacity-black-edge)), inset 0 calc(0px - var(--ludissey-border-width)) 0 rgba(0, 0, 0, var(--ludissey-opacity-black-shade));
}
.loginbar .brand {
    height: calc(var(--ludissey-size-header-logo) + var(--ludissey-space-s3));
    margin-top: var(--ludissey-space-s2);
}
.loginbar .download {
    margin: 0;
}
.inline-login {
    display: flex;
    align-items: flex-start;
    gap: var(--ludissey-space-s4);
}
.inline-login input:not([type=checkbox]) {
    width: var(--ludissey-size-login-field);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-gloss-black-border), var(--ludissey-shadow-field);
}
.secret {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ludissey-space-s2);
}
.forgot,
.forgot:active:not(:disabled) {
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ludissey-header-text);
    font-size: var(--ludissey-font-caption);
    font-weight: 400;
    text-shadow: none;
}
.under {
    align-self: flex-end;
    margin: 0 var(--ludissey-space-s12);
    padding: var(--ludissey-space-s3) var(--ludissey-space-s6);
    background: color-mix(in srgb, var(--ludissey-gloss-black-bottom) calc(var(--ludissey-shadow-black-bar) * 100%), transparent);
    color: var(--ludissey-header-text);
}
.hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ludissey-space-s8);
    width: 100%;
    max-width: var(--ludissey-size-content);
    margin: 0 auto;
    padding: var(--ludissey-space-s12);
}
.pitch {
    color: var(--ludissey-header-text);
}
.pitch .brand {
    height: var(--ludissey-size-login-logo);
    margin-bottom: var(--ludissey-space-s8);
}
.pitch p {
    font-size: var(--ludissey-font-slogan);
    font-weight: 700;
    text-shadow: 0 var(--ludissey-border-focus) var(--ludissey-border-focus) rgba(0, 0, 0, var(--ludissey-shadow-text));
}
.pitch p span {
    display: block;
    white-space: nowrap;
}
.authcard {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--ludissey-space-s6);
    width: var(--ludissey-size-login);
    padding: var(--ludissey-space-s12);
    border-radius: var(--ludissey-radius-registration);
    background: rgba(255, 255, 255, var(--ludissey-shadow-login-panel));
    box-shadow: var(--ludissey-shadow-alert);
}
.authcard h1 {
    margin: 0;
    font-size: var(--ludissey-font-login-title);
    font-weight: 700;
    text-shadow: none;
}
.authcard p.muted {
    color: var(--ludissey-text-secondary);
    font-size: var(--ludissey-font-small);
}
.entry {
    cursor: text;
}
.entry b {
    flex: none;
    width: var(--ludissey-size-login-label);
    font-size: var(--ludissey-font-label);
}
.entry input:not([type=checkbox]) {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}
.group > .entry + .entry {
    margin-top: var(--ludissey-border-width);
    box-shadow: 0 calc(0px - var(--ludissey-border-width)) 0 var(--ludissey-border-subtle);
}
.characters {
    display: flex;
    flex-direction: column;
    gap: var(--ludissey-space-s3);
}
.characters > b {
    color: var(--ludissey-text-secondary);
    font-size: var(--ludissey-font-label);
}
.character-row {
    display: flex;
    gap: var(--ludissey-space-s6);
}
.character {
    position: relative;
    flex: 1;
    flex-direction: column;
    gap: var(--ludissey-space-s3);
    height: auto;
    padding: var(--ludissey-space-s4);
    border-radius: var(--ludissey-radius-group);
    background: var(--ludissey-surface);
    box-shadow: inset 0 0 0 var(--ludissey-border-width) var(--ludissey-border);
    color: var(--ludissey-text-primary);
    font-size: var(--ludissey-font-body);
    text-shadow: none;
}
.character.selected {
    background: var(--ludissey-accent-surface);
    box-shadow: inset 0 0 0 var(--ludissey-border-focus) var(--ludissey-accent);
}
.character .skin {
    position: relative;
    display: flex;
    width: var(--ludissey-size-face);
    height: var(--ludissey-size-face);
    overflow: hidden;
    border-radius: var(--ludissey-radius-bust);
    background: var(--skin);
}
.character .skin::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ludissey-border-width) color-mix(in srgb, var(--ludissey-bust-edge) calc(var(--ludissey-opacity-bust-edge) * 100%), transparent);
}
.character .skin img {
    width: 100%;
    height: 100%;
}
.character .check {
    position: absolute;
    top: calc(0px - var(--ludissey-space-s3));
    right: calc(0px - var(--ludissey-space-s3));
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--ludissey-size-badge);
    height: var(--ludissey-size-badge);
    border-radius: 50%;
    background: var(--ludissey-gloss-purple);
    box-shadow: inset 0 0 0 var(--ludissey-border-focus) var(--ludissey-surface), 0 var(--ludissey-shadow-field-dy) var(--ludissey-shadow-field-blur) rgba(0, 0, 0, var(--ludissey-shadow-button-opacity));
    color: var(--ludissey-text-on-accent);
}
.character.selected .check {
    display: flex;
}
.character .check .icon {
    width: calc(var(--ludissey-size-badge) * 0.6);
    height: calc(var(--ludissey-size-badge) * 0.6);
}
.downloads {
    max-width: calc(var(--ludissey-size-content) + 2 * var(--ludissey-space-s12));
    margin: 0 auto;
    padding: var(--ludissey-space-s12);
}
#page .downloads {
    padding: 0;
}
.download-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ludissey-space-s12);
}
.download-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ludissey-space-s4);
    min-width: var(--ludissey-size-field);
    padding: var(--ludissey-space-s12);
}
.download-card h2 {
    color: var(--ludissey-text-primary);
}
.download-card .button,
.download-card button {
    margin-top: var(--ludissey-space-s4);
}
.connection-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.connection-screen .panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ludissey-space-s6);
}
.connection-screen .brand {
    height: var(--ludissey-size-login-logo);
    color: var(--ludissey-brand);
}
dialog {
    position: fixed;
    width: var(--ludissey-size-alert-width);
    max-width: calc(100vw - 2 * var(--ludissey-space-s8));
    padding: var(--ludissey-space-s8) var(--ludissey-space-s6) var(--ludissey-space-s6);
    overflow: hidden;
    border: 0;
    border-radius: var(--ludissey-radius-alert);
    background: color-mix(in srgb, var(--ludissey-alertColor-fill) calc(var(--ludissey-shadow-alert-fill) * 100%), transparent);
    box-shadow: inset 0 0 0 var(--ludissey-border-focus) rgba(255, 255, 255, var(--ludissey-opacity-alert-edge)), var(--ludissey-shadow-alert);
    color: var(--ludissey-text-on-accent);
    text-align: center;
}
dialog::backdrop {
    background: rgba(0, 0, 0, var(--ludissey-shadow-scrim));
}
dialog .shine {
    position: absolute;
    left: -40%;
    top: calc(0px - 2 * var(--ludissey-space-s16));
    width: 180%;
    height: calc(4 * var(--ludissey-space-s16));
    border-radius: 50%;
    background: linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-shine-top)), rgba(255, 255, 255, var(--ludissey-opacity-shine-bottom)));
    pointer-events: none;
}
dialog .alert-icon {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: var(--ludissey-space-s4);
}
dialog .alert-icon .pack {
    width: var(--ludissey-icon-alert);
    height: var(--ludissey-icon-alert);
}
dialog h2 {
    position: relative;
    margin: 0 0 var(--ludissey-space-s4);
    color: var(--ludissey-text-on-accent);
    font-size: var(--ludissey-font-heading);
    text-shadow: var(--ludissey-emboss-black);
}
dialog p {
    position: relative;
    margin: 0 0 var(--ludissey-space-s4);
    font-size: var(--ludissey-font-label);
    text-shadow: var(--ludissey-emboss-black);
}
dialog .actions {
    position: relative;
    display: flex;
    gap: var(--ludissey-space-s4);
    padding-top: var(--ludissey-space-s4);
}
dialog .ab {
    flex: 1;
    height: var(--ludissey-size-alert-button);
    background: linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-alert-button-top)), rgba(255, 255, 255, var(--ludissey-opacity-alert-button-mid)) 50%, rgba(255, 255, 255, var(--ludissey-opacity-alert-button-split)) 50%, rgba(255, 255, 255, var(--ludissey-opacity-alert-button-bottom)));
    box-shadow: inset 0 0 0 var(--ludissey-border-width) rgba(0, 0, 0, var(--ludissey-opacity-alert-button-edge)), inset 0 var(--ludissey-border-width) 0 rgba(255, 255, 255, var(--ludissey-opacity-shine-top));
    color: var(--ludissey-text-on-accent);
    font-size: var(--ludissey-font-alert-button);
    text-shadow: var(--ludissey-emboss-black);
}
dialog .ab.default {
    background: linear-gradient(rgba(255, 255, 255, var(--ludissey-opacity-alert-default-top)), rgba(255, 255, 255, var(--ludissey-opacity-alert-default-mid)) 50%, rgba(255, 255, 255, var(--ludissey-opacity-alert-default-split)) 50%, rgba(255, 255, 255, var(--ludissey-opacity-alert-default-bottom)));
}
noscript {
    display: block;
    padding: var(--ludissey-space-s12);
}
@media (max-width:1179px) {
    .search {
        width: var(--ludissey-size-search-narrow);
    }
    .tile {
        width: var(--ludissey-size-tile-compact);
    }
    .cover {
        width: var(--ludissey-size-cover-compact);
        height: calc(var(--ludissey-size-cover-compact) * 9 / 16);
    }
}
@media (max-width:979px) {
    .search {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--ludissey-size-navigation-bar);
        width: auto;
        height: var(--ludissey-size-navigation-bar);
        margin: 0;
        border-radius: 0;
    }
    .search.open {
        display: flex;
    }
    .search-toggle {
        display: inline-flex;
    }
    .profile .who {
        display: none;
    }
    .avatar-preview {
        width: var(--ludissey-size-avatar-preview-narrow);
    }
    .inline-login input:not([type=checkbox]) {
        width: calc(var(--ludissey-size-login-field) - var(--ludissey-space-s12));
    }
}
@media (max-width:871px) {
    .pitch {
        display: none;
    }
    .hero {
        justify-content: center;
    }
}
@media (max-width:639px) {
    .avatar-layout {
        flex-direction: column;
    }
    .menu-toggle {
        display: inline-flex;
    }
    .navgroup {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--ludissey-size-navigation-bar);
        flex-direction: column;
        align-items: stretch;
        padding: var(--ludissey-space-s2);
        background: var(--ludissey-gloss-bar-bottom);
    }
    .topnav.open .navgroup {
        display: flex;
    }
    .navlink .face {
        height: var(--ludissey-size-list-row);
    }
    .login-toggle {
        display: inline-flex;
    }
    .inline-login {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--ludissey-size-login-bar);
        flex-wrap: wrap;
        padding: var(--ludissey-space-s4) var(--ludissey-space-s8);
        background: color-mix(in srgb, var(--ludissey-gloss-black-bottom) calc(var(--ludissey-shadow-black-bar) * 100%), transparent);
    }
    .inline-login.open {
        display: flex;
    }
    .hero {
        flex-direction: column;
    }
    .authcard {
        width: 100%;
    }
    .tile {
        width: calc(50% - var(--ludissey-space-s4));
    }
    .shelfrow {
        flex-wrap: wrap;
    }
    .rows {
        flex-direction: column;
        align-items: stretch;
    }
    .detail {
        flex-direction: column;
    }
    .picture,
    .cover {
        width: 100%;
    }
    .statbar {
        flex-wrap: wrap;
    }
    .statbar div {
        flex: 1 0 33%;
    }
    main#content {
        padding: var(--ludissey-space-s8);
    }
    .seg {
        display: flex;
        max-width: 100%;
    }
    .seg button {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 var(--ludissey-space-s3);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bodyrow {
        flex-wrap: wrap;
    }
    .field input,
    #friend-name {
        width: 100%;
        min-width: 0;
    }
    .inline {
        flex-wrap: wrap;
    }
    .popup {
        max-width: 100%;
    }
}
.navlink .face > span:first-child,
.profile .who {
    margin-top: calc(0px - var(--ludissey-space-s1));
}
textarea {
    height: var(--ludissey-size-multiline-field);
    padding: var(--ludissey-space-s3) var(--ludissey-space-s4);
    font: 400 var(--ludissey-font-body)/normal var(--ludissey-font-family);
    color: var(--ludissey-text-primary);
    resize: none;
}