:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);
}

body {
    background: #000;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.safe {
    padding-top: calc(20px + var(--sat));
    padding-bottom: calc(24px + var(--sab));
    padding-left: max(16px, var(--sal));
    padding-right: max(16px, var(--sar));
}

.glass {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 22px 80px rgba(0, 0, 0, .55);
    backdrop-filter: blur(10px);
}

.muted {
    color: rgba(255, 255, 255, .65);
}

.thin {
    color: rgba(255, 255, 255, .45);
}

.chip {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.ring-soft {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset;
}

.icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
}

.icon {
    width: 20px;
    height: 20px;
    opacity: .9;
}