@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/sf-pro-display_semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/sf-pro-display_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('/fonts/sf-pro-text_semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('/fonts/sf-pro-text_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('/fonts/sf-pro-text_regular-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

:root {
    --gray-50: #141414;
    --white-09: hsla(0, 0%, 100%, 0.80);
    --main-color: #03A9F4;
    --secondary-color: #027FB7;
    --typo-color: #F5F5F7;
    --typo-body-color: #F5F5F7;
    --background-body: #000;
    --btn-secondary-color: #F5F5F7;
    --aside-note: #696969;
    --aside-note-background: #323232;
    --aside-note-border: #9a9a9e;
    --aside-important: #936d00;
    --aside-important-background: #2b2000;
    --aside-important-border: #ad8200;
    --font-display: "SF Pro Display", "Helvetica Neue", "Helvetica", -apple-system-font, BlinkMacSystemFont, "Arial", sans-serif;
    --font-text: "SF Pro Text", "Helvetica Neue", "Helvetica", -apple-system-font, BlinkMacSystemFont, "Arial", sans-serif;
    --font-default: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --button-width: 138px;
    --button-height: 45px;
    --bradius-18: 18px
}

html {
    font-family: var(--font-default)
}

body {
    font-family: var(--font-default)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-default)
}

html.fonts-loaded {
    font-family: var(--font-text)
}

html.fonts-loaded body {
    font-family: var(--font-text)
}

html.fonts-loaded h1,
html.fonts-loaded h2,
html.fonts-loaded h3,
html.fonts-loaded h4,
html.fonts-loaded h5,
html.fonts-loaded h6 {
    font-family: var(--font-display)
}

body {
    margin: 0;
    min-height: 100%;
    background-color: var(--background-body);
    color: var(--typo-body-color);
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: var(--font-text)
}

:focus,
button:focus {
    outline: 0
}

hr {
    border-color: #98a2b3
}

a {
    background-color: transparent;
    color: var(--main-color);
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out
}

a:hover {
    color: var(--secondary-color)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display)
}

h4 {
    margin-top: 1.25em;
    margin-bottom: .5em;
    color: var(--typo-color);
    font-size: 2.5rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .009em
}

h3 {
    margin-top: 1em;
    margin-bottom: .5em;
    color: var(--typo-color);
    font-size: 1.25em;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .009em
}

h2 {
    margin-top: 1em;
    margin-bottom: .5em;
    color: var(--typo-color);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .009em
}

p {
    margin-top: 0;
    margin-bottom: 1em
}

.button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    color: #fff;
    font-weight: 500;
    letter-spacing: .5px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer
}

.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
    -webkit-box-shadow: none;
    box-shadow: none
}

.text-primary-700 {
    color: var(--main-color)
}

.display-sm {
    margin-top: 0;
    margin-bottom: .5em;
    color: var(--typo-color);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600
}

.text-sm {
    margin-top: 0;
    font-size: .875rem;
    line-height: 1.5
}

.background-gray-50 {
    background-color: var(--gray-50)
}

.border-radius-23 {
    border-radius: 23px
}

.sr .hero-buttons,
.sr .quick-select,
.sr .scroll-cards,
.sr .sr-base,
.sr .sr-middle,
.sr .sr-top,
.sr .typography-hero-headline,
.sr .typography-intro {
    visibility: hidden
}

.navbar .navbar-toggler {
    border: 0;
    color: var(--typo-color)
}

.nav-link {
    -webkit-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
    color: #eaecf0;
    font-weight: 500;
    text-decoration: none
}

.nav-link:hover {
    color: var(--secondary-color)
}

.left-col img {
    max-width: 100px
}

.right-col-wrap h3 {
    font-size: 18px;
    margin: 0
}

.text-wrap p {
    margin-top: .4em;
    margin-bottom: .3em
}

.text-wrap .lighter {
    color: #667085
}

.divider-bottom {
    border-bottom: 1px solid #303030;
    padding: 20px 0
}

.divider-bottom:last-child {
    border: 0
}

.modal-scrollable {
    overflow-y: initial
}

.modal-scrollable .modal-body {
    max-height: 70vh;
    overflow-y: auto
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: var(--main-color);
    font-weight: 600
}

.offcanvas {
    background-color: #151516;
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    -o-transition: transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease
}

.offcanvas.offcanvas-end {
    width: 320px
}

.offcanvas-backdrop {
    background: 0 0
}

.offcanvas-backdrop.show {
    opacity: 1;
    background-color: hsla(0, 0%, 7%, .66)
}

.durum {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 5px
}

.durum.circle,
.durum.circle:before {
    background-color: #027a48
}

.durum:before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: pulse 1.5s infinite linear
}

@keyframes pulse {
    from {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

.modal-dialog {
    max-width: 450px
}

.modal-body {
    padding: 10px 25px 25px 25px
}

.modal-header {
    padding-left: 25px
}

.modal-body .btns,
.modal-content .btns {
    width: 100%
}

.modal-content {
    background-color: #1d1d1f;
    border-radius: 16px
}

.modal-backdrop {
    background-color: transparent;
    -webkit-transition: .25s ease 0s;
    -o-transition: .25s ease 0s;
    transition: .25s ease 0s
}

.modal-backdrop.show {
    opacity: 1;
    background-color: hsl(0deg 0% 7% / 74%)
}

.modal.fade .modal-dialog {
    visibility: hidden;
    opacity: 0;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transform: translateY(30px) scale(.85, .85);
    -ms-transform: translateY(30px) scale(.85, .85);
    transform: translateY(30px) scale(.85, .85);
    transition-delay: 0s;
    transition-duration: .35s;
    transition-timing-function: ease;
    -webkit-transition-property: opacity, visibility, -webkit-transform;
    transition-property: opacity, visibility, -webkit-transform;
    -o-transition-property: transform, opacity, visibility;
    transition-property: transform, opacity, visibility;
    transition-property: transform, opacity, visibility, -webkit-transform
}

.modal.fade.show .modal-dialog {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0) scale(1, 1);
    -ms-transform: translateY(0) scale(1, 1);
    transform: translateY(0) scale(1, 1)
}

.feature-icon-round {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 72px;
    height: 72px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 1px #f2f4f7, 0 2px 4px -2px rgb(16 24 40 / 6%), 0 4px 8px -2px rgb(16 24 40 / 10%);
    box-shadow: 0 0 0 1px #f2f4f7, 0 2px 4px -2px rgb(16 24 40 / 6%), 0 4px 8px -2px rgb(16 24 40 / 10%)
}

.feature-icon-round.feature-icon {
    margin: 25px 0 14px 25px
}

.feature-icon-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url(../img/web-icon/donate.jpg);
    background-position: 50% 50%;
    background-size: 72px;
    background-repeat: no-repeat;
    -webkit-box-shadow: inset 0 0 3px 1px rgb(16 24 40 / 5%);
    box-shadow: inset 0 0 3px 1px rgb(16 24 40 / 5%)
}

.modal-buttons {
    padding: 0 25px
}

.feature-icon-img.warning-profiles-install {
    background-image: url(/img/web-icon/warning.jpg)
}

.feature-icon-img.icon-donate {
    background-image: url(/img/web-icon/donate.jpg)
}

.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.parallel-section {
    width: 100%
}

.image_wrap {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.artwork {
    z-index: 0;
    height: 850px;
    max-height: 315px
}

.layer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.layer img {
    width: auto;
    height: 100%
}

.simple-parallax-initialized {
    width: 100%;
    height: 100%
}

.hello-hero {
    background-image: url(../img/WWDC22/main/webp/wwdc22-dark-mobile.webp)
}

.no-webp .hello-hero {
    background-image: url(../img/WWDC22/main/wwdc22-dark-mobile.jpg)
}

.hello-hero {
    position: absolute;
    width: 100%;
    height: 608px;
    background-repeat: no-repeat;
    background-size: 400px 267px;
    background-position: center 197px;
    max-width: 1200px
}

.section-hello {
    min-height: 528px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 4em
}

.section-content {
    z-index: 999
}

.typography-hero-headline {
    color: #09f;
    background: linear-gradient(315deg, #09f 0, #0cf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    line-height: 1.08349;
    font-weight: 600;
    letter-spacing: -.003em;
    font-family: var(--font-display)
}

.typography-intro {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: .012em;
    font-family: var(--font-display)
}

.btns {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 20px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    background-color: var(--main-color);
    -webkit-box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    color: #fff;
    font-weight: 500;
    letter-spacing: .5px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer
}

.btns:hover {
    border-color: #0398dc;
    background-color: #0398dc;
    opacity: 1;
    color: #fff
}

.btns.btn-secondary-grey {
    border-color: rgb(62 62 65);
    background-color: rgb(44 44 46 / 40%);
    -webkit-box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    color: var(--btn-secondary-color)
}

.btns.btn-secondary-grey:hover {
    background-color: rgb(58 58 60 / 62%)
}

.btns.btn-sm {
    padding: 10px 18px;
    font-size: .875em;
    line-height: 20px
}

.btns.btn-danger {
    border-color: #d92d20;
    background-color: #d92d20;
    color: #fff
}

.btns.btn-danger:hover {
    background-color: #b42318
}

.quick-select a {
    font-size: 13px;
    line-height: 1.09091;
    font-weight: 400;
    letter-spacing: .005em;
    color: #86868b;
    text-decoration: none
}

.quick-select ul {
    grid-column-gap: 40px
}

.select-icon {
    width: 35px;
    height: 35px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center
}

.select-icon.ios {
    background-image: url(/img/svg/ios.svg)
}

.select-icon.ipados {
    background-image: url(/img/svg/ipados.svg)
}

.select-icon.watchos {
    background-image: url(/img/svg/watchos.svg)
}

.select-icon.tvos {
    background-image: url(/img/svg/tvos.svg)
}

.select-icon.macos {
    background-image: url(/img/svg/macos.svg)
}

.select-icon.block {
    background-image: url(/img/svg/tvos.svg)
}

.section-profiles {
    padding-top: 4em;
    padding-bottom: 4em
}

.choose-a-beta {
    width: 191px;
    height: 23px;
    background-image: url(/img/choose-a-beta.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    background-size: 191px 23px;
    margin-bottom: 25px
}

.choose-beta {
    border-radius: 5000px;
    background-color: #151516;
    height: var(--button-height);
    border: 1px solid rgb(57 57 60 / 51%)
}

@media only screen and (max-width: 400px) {
    .choose-beta {
        max-width: 375px
    }
}

.choose-beta .nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    font-size: 17px;
    line-height: 1.2353641176;
    font-weight: 600;
    letter-spacing: -.022em
}

.choose-beta .nav-link {
    color: #86868b
}

.choose-beta .nav-link:hover {
    color: #fff
}

.choose-beta .nav-link.active,
.choose-beta .show>.nav-link {
    background-color: #2e2e2f;
    border-radius: 980px;
    height: var(--button-height);
    -webkit-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out
}

.developer-headline {
    color: #ff7c00;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: -o-linear-gradient(340.4deg, #ffc230 11.2%, #ff7c00 100.2%);
    background-image: linear-gradient(109.6deg, #ffc230 11.2%, #ff7c00 100.2%)
}

.public-headline {
    color: #ff7c00;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: -o-linear-gradient(359.6deg, #f834f6 .6%, #9826fc 90%);
    background-image: linear-gradient(90.4deg, #f834f6 .6%, #9826fc 90%)
}

.tab-pane {
    -webkit-animation: slide-down .5s ease-out;
    animation: slide-down .5s ease-out
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

#seclect-dl.form-select {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.21053;
    font-weight: 600;
    letter-spacing: .012em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border: 0;
    padding-left: 0;
    color: var(--typo-color);
    background-color: var(--background-body);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F5F5F7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.form-select:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.seclect-dl-subsection {
    max-width: 100%
}

.profile-card {
    background-color: #151516;
    color: #e1e3eb;
    border: 1px solid rgb(57 57 60 / 51%);
    border-radius: 23px;
    transition-property: transform, transition-delay, filter, box-shadow, -webkit-transform, -webkit-transition-delay, -o-transition-delay, -webkit-filter, -webkit-box-shadow;
    -webkit-transition: .6s cubic-bezier(.165, .84, .44, 1);
    -o-transition: .6s cubic-bezier(.165, .84, .44, 1);
    transition: .6s cubic-bezier(.165, .84, .44, 1)
}

.profile-card h3 {
    color: #f5f5f7
}

.image-card-wrapper .image-card {
    width: 60px;
    height: 60px;
    background-size: 60px 60px;
    background-repeat: no-repeat;
    position: relative;
    left: 50%;
    margin-left: -30px
}

.image-card.lazy-background.visible {
    background-image: url(/img/svg/beta-profiles-logo-white.svg)
}

.ios figure.image-card.lazy-background.visible {
    background-image: url(/img/svg/ios_white.svg)
}

.ipados figure.image-card.lazy-background.visible {
    background-image: url(/img/svg/ipados_white.svg)
}

.watchos figure.image-card.lazy-background.visible {
    background-image: url(/img/svg/watchos_white.svg)
}

.macos figure.image-card.lazy-background.visible {
    background-image: url(/img/svg/macos_white.svg)
}

.tvos figure.image-card.lazy-background.visible {
    background-image: url(/img/svg/tvos_white.svg)
}

.homepod figure.image-card.lazy-background.visible {
    background-image: url(/img/svg/audioos_white.svg)
}

.violator {
    border: 1px solid #f56300;
    color: #f56300;
    font-size: 14px;
    border-radius: 550px;
    padding: 3px 11px;
    line-height: 1.3333733333;
    letter-spacing: -.01em;
    top: -4px;
    left: 5px
}

.profile-version {
    border: 1px solid #515151;
    font-size: 13px !important
}

.version {
    background-color: rgb(81 81 81 / 42%)
}

.profile-card p {
    max-width: 75%;
    color: #e1e3eb
}

.tile-gradient {
    background-image: conic-gradient(from 45deg, #BB64FF, #F28, #FF8B00 28%, #F2416B, #e750de 60%, #0096FF, #BB64FF);
    border-radius: inherit
}

.tile-gradient:before {
    content: "";
    display: block;
    background-color: #000;
    position: absolute;
    inset: 38px;
    box-shadow: 0 0 32px 40px #000;
    border-radius: 9px
}

.profile-button {
    grid-column-gap: 12px
}

small {
    font-size: 130%;
    padding-top: 8px;
    padding-bottom: 5px;
    display: block;
}

ol li {
    font-size: 16px;
}

.background-gray-50 .text-light {
    color: #fff;
}

.profile-btn-dl {
    font-size: 16px;
    line-height: 1.17648;
    font-weight: 400;
    line-height: 0;
    background-color: #0071e3;
    color: #fff;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 11px;
    padding-bottom: 11px;
    gap: 9px;
}

.profile-btn-dl:hover {
    background-color: #0071e3;
    color: #fff
}

.profile-btn-dl.ipsw {
    background-color: rgb(81 81 81 / 42%);
    color: var(--btn-secondary-color)
}

.profile-btn-dl.ipsw:hover,
.profile-btn-dl:hover {
    -webkit-filter: brightness(1.05) contrast(1.05);
    filter: brightness(1.05) contrast(1.05)
}

.linksmart {
    -webkit-transition: .4s cubic-bezier(.2, .8, .2, 1.2);
    -o-transition: .4s cubic-bezier(.2, .8, .2, 1.2);
    transition: .4s cubic-bezier(.2, .8, .2, 1.2)
}

.linksmart:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}

.linksmart:active {
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98);
    opacity: .8
}

.image-device {
    background-size: cover;
    width: 390px;
    height: 293px;
    left: 50%;
    margin-left: -195px;
    margin-bottom: 0;
    background-repeat: no-repeat;
    position: relative;
    background-position-x: center
}

.image-card-wrapper .image-card,
.image-device {
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.lazy-background.visible.image-card,
.lazy-background.visible.image-device {
    opacity: 1
}

.lazy-background {
    background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
}

.no-webp .lazy-background {
    background-image: url("data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAFAJiWkAANwAP79NmgA")
}

.ios .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-14-opacity-color.webp)
}

.no-webp .ios .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-14-opacity-color.png)
}

.ios-18 .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-15-ios-18-opacity-color.webp)
}

.no-webp .ios-18 .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-15-ios-18-opacity-color.png)
}

.ios-17 .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-14-ios-17-opacity-color.webp)
}

.no-webp .ios-17 .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-14-ios-17-opacity-color.png)
}

.ios-15 .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-13-opacity.webp)
}

.no-webp .ios-15 .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-13-opacity.png)
}

.ipados .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-opacity-color.webp)
}

.no-webp .ipados .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-opacity-color.png)
}

.ipados-18 .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-pro-ipados-18-opacity-color.webp)
}

.no-webp .ipados-18 .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-pro-ipados-18-opacity-color.png)
}

.ipados-17 .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-ipados-17-opacity-color.webp)
}

.no-webp .ipados-17 .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-ipados-17-opacity-color.png)
}

.watchos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-watch/apple-watch-opacity-color.webp)
}

.no-webp .watchos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-watch/apple-watch-opacity-color.png)
}

.macos .lazy-background.visible.image-device {
    background-image: url(../img/devices/mac/imac-opacity-color.webp)
}

.no-webp .macos .lazy-background.visible.image-device {
    background-image: url(../img/devices/mac/imac-opacity-color.png)
}

.tvos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-tv/apple-tv-opacity-color.webp)
}

.no-webp .tvos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-tv/apple-tv-opacity-color.png)
}

.homepod .lazy-background.visible.image-device {
    background-image: url(../img/devices/homepod/homepod-opacity-color.webp)
}

.no-webp .homepod .lazy-background.visible.image-device {
    background-image: url(../img/devices/homepod/homepod-opacity-color.png)
}

.airpods .lazy-background.visible.image-device {
    background-image: url(../img/devices/airpods/airpods-pro-opacity-color.webp)
}

.no-webp .airpods .lazy-background.visible.image-device {
    background-image: url(../img/devices/airpods/airpods-pro-opacity-color.png)
}

.block-ota .lazy-background.visible.image-device {
    background-image: url(../img/devices/betaprofiles-logo-card-color.webp)
}

.no-webp .block-ota .lazy-background.visible.image-device {
    background-image: url(../img/devices/betaprofiles-logo-card-color.png)
}

.xcode-14 .lazy-background.visible.image-device {
    background-image: url(../img/developer-tools/xcode-opacity.webp)
}

.no-webp .xcode-14 .lazy-background.visible.image-device {
    background-image: url(../img/developer-tools/xcode-opacity.png)
}

.safari .lazy-background.visible.image-device {
    background-image: url(../img/developer-tools/safari-beta.webp)
}

.no-webp .safari .lazy-background.visible.image-device {
    background-image: url(../img/developer-tools/safari-beta.jpg)
}

.profile-card.ios-16 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #9c7924, #0000);
    background-repeat: no-repeat
}

.profile-card.ios-16 h3 {
    color: #c28011;
    background: linear-gradient(132deg, #efc856 10%, #c28011 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.ios-17 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #e3460d, #0000);
    background-repeat: no-repeat
}

.profile-card.ios-17 h3 {
    color: #e24f0d;
    background: linear-gradient(132deg, #d58612 10%, #e3460d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.ios-18 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #d16b61, #0000);
    background-repeat: no-repeat
}

.profile-card.ios-18 h3 {
    color: #e79890;
    background: linear-gradient(132deg, #efd1cf 10%, #f38f85 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card strong {
    color: #fff
}

.profile-card.ipados-16 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #037ecb, #0000);
    background-repeat: no-repeat
}

.profile-card.ipados-16 h3 {
    color: #0297f2;
    background: linear-gradient(132deg, #55c5f8 0, #0297f2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.ipados-17 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #177b69, #0000);
    background-repeat: no-repeat
}

.profile-card.ipados-17 h3 {
    color: #0297f2;
    background: linear-gradient(132deg, #a9e76f 0, #008c7b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.ipados-18 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #5a4bd4, #0000);
    background-repeat: no-repeat
}

.profile-card.ipados-18 h3 {
    color: #5d51d8;
    background: linear-gradient(132deg, #a8c0fa 10%, #5d51d8 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.watchos-9 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #3e7e18, #0000);
    background-repeat: no-repeat
}

.profile-card.watchos-9 h3 {
    color: #356e14;
    background: linear-gradient(132deg, #87d449 0, #356e14 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.macos-13 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #b93087, #0000);
    background-repeat: no-repeat
}

.profile-card.macos-13 h3 {
    color: #b93087;
    background: linear-gradient(132deg, #f3a2cc 0, #b93087 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.tvos-16 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #9f44d3, #0000);
    background-repeat: no-repeat
}

.profile-card.tvos-16 h3 {
    color: #9f44d3;
    background: linear-gradient(132deg, #e2b0ff 0, #9f44d3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.airpods-pro,
.profile-card.homepod-16 {
    background-image: radial-gradient(circle 35vh at 50% 110%, #e82e41, #0000);
    background-repeat: no-repeat
}

.profile-card.airpods-pro h3,
.profile-card.homepod-16 h3 {
    color: #e82e41;
    background: linear-gradient(132deg, #eb76b2 0, #e82e41 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.profile-card.safari-16,
.profile-card.xcode-14 {
    background: -webkit-gradient(linear, left bottom, left top, from(#1761df), to(#1bb7ef));
    background: -o-linear-gradient(bottom, #1761df 0, #1bb7ef 100%);
    background: linear-gradient(to top, #1761df 0, #1bb7ef 100%)
}

.safari-16 strong,
.xcode-14 strong {
    color: #1a96e8
}

.profile-card.ios-15 {
    background: -o-radial-gradient(5% 5%, ellipse, #fb6200, rgb(251 98 0/0%) 75%), -o-radial-gradient(95% 5%, ellipse, #ffb800 0, #ffb80000 75%), -o-radial-gradient(95% 95%, ellipse, #2a3b4f 0, rgb(42 59 79/0%) 75%), -o-radial-gradient(5% 95%, ellipse, #76a8d5 0, #76a8d500 75%);
    background: radial-gradient(ellipse at 5% 5%, #fb6200, rgb(251 98 0/0%) 75%), radial-gradient(ellipse at 95% 5%, #ffb800 0, #ffb80000 75%), radial-gradient(ellipse at 95% 95%, #2a3b4f 0, rgb(42 59 79/0%) 75%), radial-gradient(ellipse at 5% 95%, #76a8d5 0, #76a8d500 75%);
    border: 0 none
}

.ios-15 strong {
    color: #e4580f
}

.ios-15 .version {
    background-color: var(--white-09)
}

.ios-15 .profile-version {
    border: 1px solid hsla(0, 0%, 100%, .8)
}

.profile-card.ipados-15 {
    background: -webkit-gradient(linear, left bottom, right top, from(#1f2d3d), to(#75a3cf));
    background: -o-linear-gradient(bottom left, #1f2d3d, #75a3cf);
    background: linear-gradient(to top right, #1f2d3d, #75a3cf)
}

.ipados-15 strong {
    color: #4c5b6d
}

.profile-card.watchos-8 {
    background: -o-linear-gradient(115deg, #06686e 5%, #00c2a7 50%, #4ff2e9 100%);
    background: linear-gradient(-25deg, #06686e 5%, #00c2a7 50%, #4ff2e9 100%)
}

.watchos-8 strong {
    color: #30b69d
}

.profile-card.macos-12 {
    background: -o-linear-gradient(115deg, #531da8 5%, #c246ce 50%, #ffabd6 100%);
    background: linear-gradient(-25deg, #531da8 5%, #c246ce 50%, #ffabd6 100%)
}

.macos-12 strong {
    color: #cb56cf
}

.profile-card.tvos-15 {
    background: -webkit-gradient(linear, left top, right bottom, from(#ffae1b), to(#c00));
    background: -o-linear-gradient(top left, #ffae1b, #c00);
    background: linear-gradient(to bottom right, #ffae1b, #c00)
}

.tvos-15 strong {
    color: #ef7c4f
}

.profile-card.block-ota {
    background-image: radial-gradient(circle 35vh at 50% 110%, #cc34c0, #0000);
    background-repeat: no-repeat
}

.profile-card.block-ota h3 {
    color: #8b19b4;
    background: linear-gradient(132deg, #cc34c0 0, #8b19b4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.public-beta {
    background-color: #1d1d1f;
    color: var(--typo-color);
    -webkit-box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06)
}

.public-beta h3 {
    color: var(--typo-color)
}

.public-beta .profile-version {
    background-color: #1c1c1e;
    border-color: #48484a
}

.public-beta .version {
    background-color: #3a3a3c
}

.public-ios .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-ios-16.webp)
}

.no-webp .public-ios .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-ios-16.png)
}

.public-ipados .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-pro-ipados-16.webp)
}

.no-webp .public-ipados .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-pro-ipados-16.png)
}

.public-watchos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-watch/apple-watch-watchos-9.webp)
}

.no-webp .public-watchos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-watch/apple-watch-watchos-9.png)
}

.public-macos .lazy-background.visible.image-device {
    background-image: url(../img/devices/mac/imac-macos-13.webp)
}

.no-webp .public-macos .lazy-background.visible.image-device {
    background-image: url(../img/devices/mac/imac-macos-13.png)
}

.public-tvos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-tv/apple-tv-4k.webp)
}

.no-webp .public-tvos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-tv/apple-tv-4k.png)
}

.public-homepod .lazy-background.visible.image-device {
    background-image: url(../img/devices/homepod/homepod-mini.webp)
}

.no-webp .public-homepod .lazy-background.visible.image-device {
    background-image: url(../img/devices/homepod/homepod-mini.png)
}

.public-ios .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ios-16-logo.webp)
}

.no-webp .public-ios .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ios-16-logo.png)
}

.public-ipados .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ipados-16-logo.webp)
}

.no-webp .public-ipados .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ipados-16-logo.png)
}

.public-watchos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/watchos-9-logo.webp)
}

.no-webp .public-watchos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/watchos-9-logo.png)
}

.public-macos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/macos-13-logo.webp)
}

.no-webp .public-macos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/macos-13-logo.png)
}

.public-tvos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/tvos-16-logo.webp)
}

.no-webp .public-tvos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/tvos-16-logo.png)
}

.public-homepod .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/audioos-16-logo.webp)
}

.no-webp .public-homepod .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/audioos-16-logo.png)
}

.wwdc23-ios .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ios-17-logo.webp)
}

.no-webp .wwdc23-ios .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ios-17-logo.png)
}

.wwdc23-ipados .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ipados-17-logo.webp)
}

.no-webp .wwdc23-ipados .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/ipados-17-logo.png)
}

.wwdc23-watchos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/watchos-10-logo.webp)
}

.no-webp .wwdc23-watchos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/watchos-10-logo.png)
}

.wwdc23-macos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/macos-14-logo.webp)
}

.no-webp .wwdc23-macos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/macos-14-logo.png)
}

.wwdc23-tvos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/tvos-17-logo.webp)
}

.no-webp .wwdc23-tvos .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/tvos-17-logo.png)
}

.wwdc23-homepod .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/audioos-17-logo.webp)
}

.no-webp .wwdc23-homepod .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/audioos-17-logo.png)
}

.studio-display .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/apple-studio-display-firmware.webp)
}

.no-webp .studio-display .lazy-background.visible.image-card {
    background-image: url(../img/os-logo/apple-studio-display-firmware.png)
}

.wwdc23-ios .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-ios-17.webp)
}

.no-webp .wwdc23-ios .lazy-background.visible.image-device {
    background-image: url(../img/devices/iphone/iphone-ios-17.png)
}

.wwdc23-ipados .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-pro-ipados-17.webp)
}

.no-webp .wwdc23-ipados .lazy-background.visible.image-device {
    background-image: url(../img/devices/ipad/ipad-pro-ipados-17.png)
}

.wwdc23-watchos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-watch/apple-watch-watchos-10.webp)
}

.no-webp .wwdc23-watchos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-watch/apple-watch-watchos-10.png)
}

.wwdc23-macos .lazy-background.visible.image-device {
    background-image: url(../img/devices/mac/macbook-pro-macos-14.webp)
}

.no-webp .wwdc23-macos .lazy-background.visible.image-device {
    background-image: url(../img/devices/mac/macbook-pro-macos-14.png)
}

.wwdc23-visionos .lazy-background.visible.image-device {
    background-image: url(../img/devices/vision/apple-vision-pro-visionos-1.webp)
}

.no-webp .wwdc23-visionos .lazy-background.visible.image-device {
    background-image: url(../img/devices/vision/apple-vision-pro-visionos-1.png)
}

.wwdc23-tvos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-tv/apple-tv-4k-2022.webp)
}

.no-webp .wwdc23-tvos .lazy-background.visible.image-device {
    background-image: url(../img/devices/apple-tv/apple-tv-4k-2022.png)
}

.wwdc23-homepod .lazy-background.visible.image-device {
    background-image: url(../img/devices/homepod/homepod-2-and-homepod-mini.webp)
}

.no-webp .wwdc23-homepod .lazy-background.visible.image-device {
    background-image: url(../img/devices/homepod/homepod-2-and-homepod-mini.png)
}

.wwdc23-airpods .lazy-background.visible.image-device {
    background-image: url(../img/devices/airpods/airpods-pro-2.webp)
}

.no-webp .wwdc23-airpods .lazy-background.visible.image-device {
    background-image: url(../img/devices/airpods/airpods-pro-2.png)
}

.studio-display .lazy-background.visible.image-device {
    background-image: url(../img/devices/display/studio-display.webp)
}

.no-webp .studio-display .lazy-background.visible.image-device {
    background-image: url(../img/devices/display/studio-display.png)
}

.xcode .lazy-background.visible.image-device {
    background-image: url(../img/developer-tools/xcode-beta.webp)
}

.no-webp .xcode .lazy-background.visible.image-device {
    background-image: url(../img/developer-tools/xcode-beta.jpg)
}

.donate-content {
    padding-top: 43px
}

section.donate {
    margin: 30px 0
}

.donate-right h2 {
    font-size: 32px;
    line-height: 1.0834933333;
    font-weight: 600;
    letter-spacing: -.003em
}

.donate-inner {
    width: 381px;
    height: 318px;
    padding-top: 65px;
    position: relative;
    margin-left: auto;
    margin-right: auto
}

.donate-inner picture {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    line-height: 0;
    display: initial
}

.profile-card-stack {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.donate-os-logo {
    z-index: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 352px
}

.profile-card-front {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 5.5%;
    width: 100%;
    height: 100%;
    will-change: transform, opacity
}

@media only screen and (max-width: 734px) {
    .donate-inner {
        width: 247px;
        left: auto
    }
}

@media only screen and (max-width: 1068px) {
    .donate-inner {
        width: 241px;
        padding-top: 44px
    }

    .donate-os-logo {
        top: 70px
    }
}

.card .card-image {
    padding: 40px
}

.card {
    border-radius: var(--bradius-18)
}

.card .card-content {
    padding: 0 20px 30px 40px;
    border-radius: var(--bradius-18)
}

.card .card-content .card-title,
.card-reveal .card-title {
    font-size: 24px;
    line-height: 1.1666666667;
    font-weight: 600;
    letter-spacing: .009em;
    font-family: var(--font-display)
}

.card .card-reveal {
    padding: 24% 40px 0 25px;
    position: absolute;
    width: 100%;
    overflow-y: auto;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
    display: none;
    border-radius: var(--bradius-18)
}

.card .card-reveal .card-title {
    margin: 10px
}

.card .card-reveal p {
    color: #cecece;
    margin: 10px
}

.howto-headline {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.00029em;
    color: #cecece
}

.text-blue-gradient {
    color: #09f;
    background: -o-linear-gradient(135deg, #09f 0, #0cf 100%);
    background: linear-gradient(315deg, #09f 0, #0cf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.tile-button {
    z-index: 999
}

.tile-button {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out
}

.tile-button.current {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.section-header {
    padding-top: 150px;
    padding-bottom: 10px
}

.section-heading {
    max-width: 768px;
    margin-bottom: 64px
}

.typography-page-headline {
    margin-top: 0;
    margin-bottom: .5em;
    color: var(--typo-color);
    font-size: 36px;
    line-height: 1.25;
    font-weight: 600
}

.text-xl {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px;
}

.section-heading.align-centre {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: auto;
    margin-bottom: 48px;
    margin-left: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.content.content-lg {
    max-width: 640px
}

.sharesheet a {
    color: #a1a1a6
}

.sharesheet .btn {
    border: none !important;
    outline: 0 !important
}

.counter-1 {
    counter-reset: ol-counter
}

.counter-1 h4::before {
    content: counter(ol-counter, decimal);
    counter-increment: ol-counter
}

.content .counter-1 h4,
.content .counter-2 h4,
.content.counter-1 h4 {
    position: relative;
    padding-left: 48px
}

.counter-1 h4:before,
.counter-2 h4:before {
    text-align: center;
    color: #fefefe;
    line-height: 30px;
    background: #168bff;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    border-radius: 50%;
    padding: 5px;
    font-size: 20px
}

.accordion-button,
.accordion-item {
    background-color: transparent
}

#accordionChangelog h2 button,
#accordionFlushFAQ h2 button {
    color: #fff;
    border-color: rgba(255, 255, 255, .08)
}

.accordion-item {
    color: #a1a1a6;
    border: 1px solid rgba(255, 255, 255, .1)
}

.accordion-button::after,
.btn-close {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

#accordionFlushFAQ h2 button {
    font-size: 20px;
    line-height: 1.19048;
    font-weight: 600;
    letter-spacing: .011em
}

.accordion-body,
.accordion-button {
    padding: 20px 0
}

.accordion-button:not(.collapsed) {
    background-color: transparent
}

.accordion-button:focus {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.accordion-button:not(.collapsed) {
    color: #000;
    -webkit-box-shadow: none;
    box-shadow: none
}

.devices-list-wrap {
    padding: 25px;
    height: 100%
}

.feature-icon-round.feature-icon-supported {
    margin-bottom: 45px
}

figure.model-find-image.lazy-background.visible {
    background-image: url(/img/ipad-settings.png)
}

figure.model-find-image {
    width: 100%;
    height: 121px;
    background-size: 320px 121px;
    background-repeat: no-repeat;
    margin-bottom: 0;
    background-position: center
}

.check-model-text {
    padding: 4rem;
    max-width: 40rem;
    margin: 0
}

.device-list h2 {
    font-size: 24px
}

.feature-icon-img.ios-16.lazy-background.visible {
    background-image: url(/img/os-logo/ios-16-logo.png)
}

.feature-icon-img.ipados-16.lazy-background.visible {
    background-image: url(/img/os-logo/ipados-16-logo.png)
}

.feature-icon-img.watchos-9.lazy-background.visible {
    background-image: url(/img/os-logo/watchos-9-logo.png)
}

.feature-icon-img.macos-13.lazy-background.visible {
    background-image: url(/img/os-logo/macos-13-logo.png)
}

.feature-icon-img.tvos-16.lazy-background.visible {
    background-image: url(/img/os-logo/tvos-16-logo.png)
}

.community-text p {
    max-width: 520px
}

.website-report {
    grid-auto-columns: 1fr;
    grid-column-gap: 32px;
    grid-row-gap: 0px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    padding: 40px;
    max-width: 958px
}

.website-report>:first-child {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.website-report-text {
    max-width: 580px
}

.feature-icon-img.icon-twitter.lazy-background.visible {
    background-image: url(/img/web-icon/twitter.jpg)
}

.feature-icon-img.icon-mail.lazy-background.visible {
    background-image: url(/img/web-icon/mail.jpg)
}

.avatars__item {
    background-color: #596376;
    border: 3px solid #fff;
    border-radius: 100%;
    color: #fff;
    display: block;
    height: 65px;
    width: 65px;
    line-height: 1;
    text-align: center;
    -webkit-transition: margin .1s ease-in-out;
    -o-transition: margin .1s ease-in-out;
    transition: margin .1s ease-in-out;
    overflow: hidden;
    margin-left: -10px;
    -webkit-box-shadow: 0 5px 3px 1px rgb(16 24 40 / 5%);
    box-shadow: 0 5px 3px 1px rgb(16 24 40 / 5%)
}

.avatars__item:first-child {
    z-index: 5
}

.avatars__item:nth-child(2) {
    z-index: 4
}

.avatars__item:nth-child(3) {
    z-index: 5;
    height: 80px;
    width: 80px
}

.avatars__item:nth-child(4) {
    z-index: 6;
    height: 100px;
    width: 100px
}

.avatars__item:nth-child(5) {
    z-index: 1;
    height: 80px;
    width: 80px
}

.avatars__item:last-child {
    z-index: 0
}

.avatars__item img {
    width: 100%
}

.avatars:hover .avatars__item {
    margin-right: 10px
}

aside {
    margin-bottom: 1.6em;
    border-radius: 15px;
    padding: .94118rem;
    border: 1px solid;
    border-left-width: 1px
}

aside .label {
    font-size: 1rem;
    line-height: 1.52944;
    font-weight: 600;
    letter-spacing: -.021em
}

aside.note {
    background-color: var(--aside-note-background);
    border-color: var(--aside-note-border);
    -webkit-box-shadow: 0 0 1px 0 var(--aside-note-border) inset, 0 0 1px 0 var(--aside-note-border);
    box-shadow: 0 0 1px 0 var(--aside-note-border) inset, 0 0 1px 0 var(--aside-note-border)
}

aside.note .label {
    color: var(--aside-note-border)
}

aside.important {
    background-color: var(--aside-important-background);
    border-color: var(--aside-important-border);
    -webkit-box-shadow: 0 0 1px 0 var(--aside-important-border) inset, 0 0 1px 0 var(--aside-important-border);
    box-shadow: 0 0 1px 0 var(--aside-important-border) inset, 0 0 1px 0 var(--aside-important-border)
}

aside.important .label {
    color: var(--aside-important-border)
}

#unenroll {
    top: 72px;
    z-index: 1;
    margin-bottom: 40px;
    padding: 6px 4px;
    border: 1px solid #1c1c1e;
    border-radius: 12px;
    background-color: #000;
    -webkit-backdrop-filter: saturate(150%) blur(24px);
    backdrop-filter: saturate(150%) blur(24px);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto
}

.nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    -webkit-transition: border-color .2s, box-shadow .2s, background-color .2s;
    -webkit-transition: border-color .2s, background-color .2s, -webkit-box-shadow .2s;
    transition: border-color .2s, background-color .2s, -webkit-box-shadow .2s;
    -o-transition: border-color .2s, box-shadow .2s, background-color .2s;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    transition: border-color .2s, box-shadow .2s, background-color .2s, -webkit-box-shadow .2s;
    color: var(--typo-color);
    font-weight: 500
}

.nav-tabs .nav-link.active {
    border: 1px solid #3a3a3c;
    background-color: #2c2c2e;
    -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05);
    color: var(--typo-color);
    border-radius: 8px
}

.nav-tabs .nav-link {
    color: rgb(133 133 134);
    border-radius: 8px
}

.nav-tabs .nav-link:hover {
    border-color: #48484a
}

.counter-2 {
    counter-reset: counter-2
}

.counter-2 h4:before {
    content: counter(counter-2, decimal);
    counter-increment: counter-2
}

.footer {
    font-size: .875em;
    line-height: 1.33337;
    font-weight: 400;
    letter-spacing: -.01em;
    color: #98a2b3
}

.footer-bottom-right {
    color: #98a2b3
}

.footer-top-left h3 {
    margin-top: 0;
    font-size: .875rem;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--typo-color)
}

.footer-link {
    -webkit-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
    color: #a1a1a6;
    font-size: .875em;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap
}

.footer-top-right .socials a {
    color: #a1a1a6
}

.footer-top-left ul li {
    margin-bottom: .8em
}

.footer-link-icon {
    opacity: 0;
    -webkit-transform: translate3d(-4px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transform: translate3d(-4px, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.footer-link:hover .footer-link-icon {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.feature-icon-img.icon-copyright {
    background-image: url(/img//web-icon/copyright.jpg)
}

@media (min-width: 768px) {
    h3 {
        font-size: 1.5rem
    }

    h2 {
        font-size: 1.875em
    }

    .navbar {
        min-height: 72px
    }

    .section-hello {
        min-height: 640px
    }

    .hello-hero {
        background-size: 768px 513px;
        background-position-y: 113px
    }

    .artwork {
        max-height: 578px
    }

    .typography-hero-headline {
        font-size: 56px;
        line-height: 1.08349;
        font-weight: 600;
        letter-spacing: -.003em
    }

    .typography-intro {
        font-size: 34px
    }

    .text-xl {
        font-size: 1.8em
    }

    .section-header {
        padding-top: 80px;
        padding-bottom: 28px
    }

    .typography-page-headline {
        font-size: 48px;
        line-height: 1.08349;
        font-weight: 600;
        letter-spacing: -.003em
    }

    .choose-beta {
        width: calc(var(--button-width)*3)
    }

    .choose-beta .nav-link.active,
    .choose-beta .show>.nav-link {
        width: var(--button-width)
    }

    .howto-headline {
        font-size: 48px;
        letter-spacing: -.00043em
    }

    .card .card-reveal {
        padding-top: 28%;
        padding-right: 65px
    }

    #accordionFlushFAQ h2 button {
        font-size: 21px;
        line-height: 1.19048;
        letter-spacing: .011em
    }

    figure.model-find-image {
        height: 176px;
        background-size: 465px 176px
    }

    .violator {
        font-size: 15px;
        top: -5px
    }
}

@media (min-width: 992px) {
    h3 {
        font-size: 1.875rem
    }

    h2 {
        font-size: 2.25em
    }

    .display-sm {
        font-size: 1.875rem
    }

    .artwork {
        max-height: 927px
    }

    .hello-hero {
        background-image: url(/img/WWDC22/main/webp/wwdc22-dark-desktop.webp);
        background-size: 1000px 563px;
        height: 700px;
        background-position-y: 106px
    }

    .no-webp .hello-hero {
        background-image: url(../img/WWDC22/main/wwdc22-dark-desktop.jpeg)
    }

    .section-hello {
        min-height: 696px
    }

    .seclect-dl-subsection {
        max-width: 60%
    }

    .donate-os-logo {
        top: 100px
    }

    .section-header {
        padding-top: 150px;
        padding-bottom: 0px
    }

    .profile-card:hover {
        -webkit-transform: translateY(-10px) scale(1.01);
        -ms-transform: translateY(-10px) scale(1.01);
        transform: translateY(-10px) scale(1.01);
        -webkit-transition-delay: .1s;
        -o-transition-delay: .1s;
        transition-delay: .1s;
        -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
    }

    .profile-card:hover .image-card-wrapper {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-filter: drop-shadow(15px 15px 18px rgba(0, 0, 0, .2));
        filter: drop-shadow(15px 15px 18px rgba(0, 0, 0, .2))
    }

    .profile-card:hover .violator,
    .profile-card:hover h3 {
        -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    .profile-card:hover .updated_at {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    .profile-card:hover .profile-version {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    .profile-card:hover p {
        -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        transform: translateY(-3px)
    }

    .profile-card * {
        -webkit-transition-property: -webkit-transform, -webkit-filter;
        -o-transition-property: transform, filter;
        transition-property: transform, filter, -webkit-transform, -webkit-filter;
        -webkit-transition: .8s cubic-bezier(.2, .8, .2, 1);
        -o-transition: .8s cubic-bezier(.2, .8, .2, 1);
        transition: .8s cubic-bezier(.2, .8, .2, 1)
    }

    .howto-headline {
        font-size: 64px;
        letter-spacing: -.0009em
    }

    figure.model-find-image {
        height: 216px;
        background-size: 570px 216px
    }

    .website-report {
        -ms-grid-columns: 1fr auto;
        grid-template-columns: 1fr auto
    }
}

@media (min-width: 1200px) {
    .hello-hero {
        background-size: 1200px 675px;
        height: 785px
    }

    .section-hello {
        min-height: 790px
    }

    .typography-hero-headline {
        font-size: 74px;
        line-height: 1.0625;
        font-weight: 600;
        letter-spacing: -.009em
    }

    .donate-content {
        padding-bottom: 116px
    }

    .popup-twitter,
    .popup_facebook {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        left: -54px;
        top: -144px;
        width: 134px;
        height: 134px;
        padding: 14px;
        background-color: #fff;
        border-radius: 4px;
        -webkit-box-shadow: 0 4px 12px #d7def3;
        box-shadow: 0 4px 12px #d7def3;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease
    }

    .popup-twitter img,
    .popup_facebook img {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .typography-page-headline {
        font-size: 64px;
        line-height: 1.0625;
        font-weight: 600;
        letter-spacing: -.009em
    }

    #accordionFlushFAQ h2 button {
        font-size: 24px;
        line-height: 1.16667;
        letter-spacing: .009em
    }

    .devices-list-wrap {
        padding: 50px
    }
}

@media (min-width: 1400px) {
    .donate-right {
        padding-top: 122px
    }
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
    gap: 20px;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-content-center {
    justify-content: center !important;
}