/* iOS-inspired glass, spring feedback and presentation transitions for the web. */
:root{--ios-spring:cubic-bezier(.22,1.06,.36,1);--ios-ease:cubic-bezier(.16,1,.3,1)}
.header{box-shadow:inset 0 1px 0 #ffffff15,0 12px 36px #0004!important}
:is(.share-dialog,.explorer,.photo-viewer,.style-panel,.music-shell){border-color:#ffffff20;box-shadow:inset 0 1px 0 #ffffff18,0 24px 70px #0006}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
 .header,.header.scrolled{background:rgba(12,16,29,.78)!important;backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
 :is(.share-dialog,.explorer,.photo-viewer,.style-panel,.music-shell){background:rgba(16,21,35,.9);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
 #ntjr.ios-game-menu{background:rgba(27,27,34,.92);backdrop-filter:blur(28px) saturate(1.25);-webkit-backdrop-filter:blur(28px) saturate(1.25)}
}
.ios-tactile{position:relative;isolation:isolate;overflow:hidden;transition:scale .46s var(--ios-spring),box-shadow .3s,border-color .3s,background .3s}
.ios-tactile:active{scale:.975;transition-duration:110ms}
@media(hover:hover) and (pointer:fine){.ios-tactile:hover{scale:1.012}.ios-tactile:active{scale:.975}}
.ios-tap-wave{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#ffffff30,#ffffff08 58%,transparent 70%);transform:translate(-50%,-50%) scale(.08);opacity:0;animation:ios-tap-wave .62s var(--ios-ease) forwards;z-index:3}
@keyframes ios-tap-wave{0%{opacity:.8;transform:translate(-50%,-50%) scale(.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.journal-entry,.score-card,.code-workbench,.donate-panel,.contact-panel,.timeline{position:relative;isolation:isolate}
.launch-card::after,.journal-entry::before,.score-card::before,.code-workbench::before,.donate-panel::before,.contact-panel::before,.timeline::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--glass-x,22%) var(--glass-y,15%),rgba(255,255,255,.07),rgba(var(--first-rgb,126,232,238),.09) 35%,transparent 72%);opacity:var(--glass-visible,0);transition:opacity .24s var(--ios-ease);z-index:1}
html:not([data-fx=calm]) :is(.share-dialog,.explorer,.photo-viewer,.nt-scores-dialog)[open]{animation:ios-present .48s var(--ios-ease) both;transform-origin:50% 65%}
html:not([data-fx=calm]) #ntjr:not([hidden]){animation:ios-menu-present .4s var(--ios-ease) both}
#ntjr[hidden]{pointer-events:none}
html:not([data-fx=calm]) .style-panel.is-open{animation:ios-present .28s var(--ios-ease) both;transform-origin:10% 100%}
@keyframes ios-present{from{opacity:0;scale:.975;translate:0 18px}to{opacity:1;scale:1;translate:0 0}}
@keyframes ios-menu-present{from{opacity:0;translate:0 20px;scale:.975}to{opacity:1;translate:0 0;scale:1}}
html:not([data-fx=calm]) :is(.share-dialog,.explorer,.photo-viewer,.nt-scores-dialog,#ntjr)[open]::backdrop{animation:ios-backdrop .25s ease-out both}
@keyframes ios-backdrop{from{opacity:0}to{opacity:1}}
.code-tabs button[aria-selected=true],.journal-filters button[aria-pressed=true]{box-shadow:inset 0 1px 0 #ffffff35,0 4px 14px #0002}
#ntjr .ntjr-row input[type=checkbox]{transition:background .22s ease,box-shadow .22s ease}
#ntjr .ntjr-row input[type=checkbox]::after{transition:transform .28s var(--ios-spring),width .15s ease}
#ntjr .ntjr-row input[type=checkbox]:checked{box-shadow:0 0 14px #30d15815}
#ntjr .ntjr-row input[type=checkbox]:active::after{width:29px}
#ntjr .ntjr-row input[type=checkbox]:checked:active::after{transform:translateX(16px)}
.ios-content-in{animation:ios-content-in .36s var(--ios-ease) both}
@keyframes ios-content-in{from{opacity:.45;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:600px){html:not([data-fx=calm]) #ntjr:not([hidden]){animation:ios-sheet-present .42s var(--ios-ease) both}@keyframes ios-sheet-present{from{opacity:.7;translate:0 32px}to{opacity:1;translate:0 0;scale:1}}}
@media(pointer:coarse){.launch-card::after,.journal-entry::before,.score-card::before,.code-workbench::before{display:none}.header,.header.scrolled{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
html[data-fx=calm] .ios-tactile:is(:hover,:active){scale:1}
html[data-fx=calm] .ios-tap-wave{display:none}
html[data-fx=calm] :is(.ios-content-in,dialog[open],.style-panel.is-open,#ntjr:not([hidden])){animation:none!important}
html[data-fx=calm] :is(.launch-card::after,.journal-entry::before,.score-card::before,.code-workbench::before){opacity:0!important}
@media(prefers-reduced-motion:reduce){.ios-tactile{transition:none}.ios-tactile:is(:hover,:active){scale:1}.ios-tap-wave{display:none}.ios-content-in,dialog[open],.style-panel.is-open,#ntjr:not([hidden]),dialog[open]::backdrop{animation:none!important}#ntjr input[type=checkbox]::after{transition:none}}
@media(prefers-reduced-transparency:reduce){.header,.header.scrolled,:is(.share-dialog,.explorer,.photo-viewer,.style-panel,.music-shell),#ntjr.ios-game-menu{background:#111725!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}