:root {
  --aq: 124, 203, 239;
  --aq-solid: #62B6E0;
  --aq-ink: #8FD6F5;
  --mat-panel: radial-gradient(120% 70% at 0% 0%, rgba(140, 215, 250, .14), rgba(140, 215, 250, 0) 60%), linear-gradient(160deg, rgba(28, 98, 140, .94), rgba(12, 54, 92, .96));
  --mat-pop: radial-gradient(120% 80% at 0% 0%, rgba(140, 215, 250, .14), rgba(140, 215, 250, 0) 60%), linear-gradient(160deg, rgba(26, 92, 132, .92), rgba(12, 52, 88, .94));
  --mat-hud: rgba(12, 24, 38, .56);
  --hair: rgba(255, 255, 255, .10);
  --hair-2: rgba(255, 255, 255, .16);
  --sep: rgba(255, 255, 255, .08);
  --well: rgba(0, 0, 0, .22);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --in: inset 0 1px 3px rgba(0, 0, 0, .32);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .16);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .22), 0 16px 40px rgba(0, 0, 0, .34);
  --sh-3: 0 4px 12px rgba(0, 0, 0, .22), 0 28px 64px rgba(0, 0, 0, .42);
  --focus: 0 0 0 3px rgba(124, 203, 239, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --blur-pop: blur(24px) saturate(1.5);
  --blur-hud: blur(20px) saturate(1.6);
  --r-xl: 24px; --r-l: 18px; --r-m: 14px; --r-c: 12px; --r-s: 10px; --r-xs: 8px; --r-tag: 6px;
  --fg: #fff; --fg-2: rgba(232, 243, 252, .74); --fg-3: rgba(232, 243, 252, .5);
  --fill-1: var(--well); --fill-2: rgba(255, 255, 255, .08); --fill-3: rgba(124, 203, 239, .16);
  --line: var(--sep); --line-2: var(--hair-2);
  --glass: var(--mat-hud); --glass-solid: rgba(18, 56, 88, .96);
  --blue: #62B6E0; --blue-2: #7CCBEF;
  --r-lg: 18px; --r: 12px; --r-sm: 10px;
  --shadow: var(--sh-2);
}
::selection { background: rgba(124, 203, 239, .38); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus); }
input[type="range"], input[type="checkbox"], input[type="date"] { accent-color: #6EC3EA; }
* { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .28); }
.logo-mark { --logo-1: #fff; --logo-2: rgba(255, 255, 255, .78); }

:root {
  --spring-snappy: linear(0, 0.001 0.5%, 0.007 1.5%, 0.023 2.8%, 0.053 4.4%, 0.100 6.4%, 0.163 8.5%, 0.241 10.9%, 0.330 13.5%, 0.426 16.3%, 0.524 19.3%, 0.620 22.4%, 0.709 25.8%, 0.788 29.3%, 0.855 33.0%, 0.909 36.8%, 0.951 40.8%, 0.981 45.0%, 1.001 49.3%, 1.013 53.8%, 1.019 58.4%, 1.020 63.1%, 1.018 68.0%, 1.015 73.0%, 1.012 78.1%, 1.008 83.4%, 1.005 88.8%, 1.003 94.3%, 1);
  --spring-smooth: linear(0, 0.001 0.5%, 0.007 1.5%, 0.024 2.8%, 0.056 4.4%, 0.103 6.4%, 0.165 8.5%, 0.238 10.9%, 0.319 13.5%, 0.404 16.3%, 0.489 19.3%, 0.570 22.4%, 0.645 25.8%, 0.712 29.3%, 0.771 33.0%, 0.821 36.8%, 0.862 40.8%, 0.896 45.0%, 0.922 49.3%, 0.943 53.8%, 0.959 58.4%, 0.971 63.1%, 0.979 68.0%, 0.986 73.0%, 0.990 78.1%, 0.993 83.4%, 0.996 88.8%, 0.997 94.3%, 1);
  --ease-in: cubic-bezier(.32, 0, .6, 1);
}
@keyframes skPopIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes skFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes skSheetIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes skPanelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes skToastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.btn-primary, .btn-secondary, .search-row button, .btn-assign, .btn-invert, .btn-clear, .seg button, .tab, .icon-btn, .help-btn, .chip-click, #hudWeather,
#rowDjiRc .dji-pick > summary, #searchResults .result-item, #searchResults2 .result-item {
  transition: background-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), scale .41s var(--spring-snappy);
}
.btn-primary:active, .btn-secondary:active, .search-row button:active, .btn-assign:active, .btn-invert:active, .btn-clear:active,
.seg button:active, .tab:active, .icon-btn:active, .help-btn:active { scale: .96; transition-duration: .16s, .16s, .16s, .16s, .16s, .08s; }

#startScreen { background: radial-gradient(110% 85% at 15% 10%, #0f3050 0%, #081a2e 45%, #04070d 100%); backdrop-filter: none; }
.overlay { background: rgba(2, 8, 16, .62); backdrop-filter: none; }

.start-card {
  background: var(--mat-panel); border: 1px solid var(--hair); border-radius: var(--r-xl);
  box-shadow: var(--sh-3), var(--hi); backdrop-filter: var(--blur-pop); color: var(--fg);
}
.start-card h1, .start-card h2, .help-card h2 { color: var(--fg); }
.subtitle { color: var(--fg-2); }
.note, .hint { color: var(--fg-3); }
.form-row label { color: rgba(255, 255, 255, .88); }
.form-row label.sub { color: var(--fg-2); }
.start-actions { background: transparent; backdrop-filter: none; }
.start-actions.stuck { background: linear-gradient(rgba(13, 57, 95, 0), rgba(13, 57, 95, .97) 8px); box-shadow: 0 16px 0 rgba(13, 57, 95, .97); }
.help-head { background: rgba(26, 94, 136, .97); border-radius: 23px 23px 0 0; border-bottom-color: var(--sep); }
.help-card .help-body { scrollbar-gutter: stable; }

.side-panel {
  background: var(--mat-panel); border-left: 1px solid var(--hair); border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow: -16px 0 40px rgba(0, 0, 0, .34), inset 1px 0 0 rgba(255, 255, 255, .05); backdrop-filter: var(--blur-pop); color: var(--fg);
}
.panel-header h2 { color: var(--fg); }
.panel-header .icon-btn { background: rgba(255, 255, 255, .08); border: 1px solid var(--hair); box-shadow: none; backdrop-filter: none; color: var(--fg-2); }
.panel-header .icon-btn:hover { background: rgba(255, 255, 255, .14); color: var(--fg); }
.tab-page { padding-left: 20px; padding-right: 20px; }
.tab-page .sec { color: var(--fg-3); margin-top: 22px; margin-bottom: 8px; }
.tab-page > .sec:first-child { margin-top: 4px; }
.tab-page hr { border-top-color: var(--sep); }
.side-panel .form-row { margin-bottom: 16px; }
.credits-body, .credits-body h3 { color: var(--fg); }
.credits-body li, .credits-body p { color: var(--fg-2); }
.credits-body a { color: var(--aq-ink); text-decoration-color: rgba(143, 214, 245, .4); text-underline-offset: 2px; }

.panel-tabs, .seg {
  background: var(--well); border: 1px solid var(--sep); border-radius: var(--r-c); box-shadow: var(--in);
}
.tab, .seg button { color: var(--fg-2); border-radius: var(--r-s); text-shadow: none; }
.tab:hover, .seg button:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.tab.active, .seg button.active {
  background: rgba(124, 203, 239, .2); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.form-row input[type="text"], .form-row input[type="password"], .form-row input[type="number"],
.form-row select, .form-row input.num-inline, .rate-in, .search-row input, .search-row select, .fm-pop input, .fm-pop select {
  background-color: var(--well); border: 1px solid var(--sep); border-radius: var(--r-c); color: var(--fg); box-shadow: var(--in); text-shadow: none;
}
.form-row input.num-inline, .rate-in { border-radius: var(--r-xs); }
.form-row input::placeholder, .search-row input::placeholder, .fm-pop input::placeholder { color: var(--fg-3); }
.form-row input:focus, .form-row select:focus, .rate-in:focus, .search-row input:focus, .fm-pop input:focus, .fm-pop select:focus {
  outline: none; border-color: rgba(124, 203, 239, .6); box-shadow: var(--in), var(--focus);
}
.form-row select, .search-row select, .fm-pop select {
  -webkit-appearance: none; appearance: none; background-color: #0E3A5E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cfe9f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; padding-right: 32px;
}
option, optgroup { background-color: #0E3A5E; color: #fff; }
optgroup { color: var(--aq-ink); }
#searchResults .result-item, #searchResults2 .result-item {
  background: var(--well); border: 1px solid var(--sep); border-radius: var(--r-s); color: var(--fg);
}
#searchResults .result-item:hover, #searchResults2 .result-item:hover { background: rgba(124, 203, 239, .14); border-color: rgba(124, 203, 239, .3); }

.btn-primary {
  background: linear-gradient(180deg, rgba(124, 203, 239, .34), rgba(124, 203, 239, .18)); color: #fff; border-radius: 999px; text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(124, 203, 239, .42), inset 0 1px 0 rgba(255, 255, 255, .16), var(--sh-1);
}
.btn-primary:hover { filter: none; background: linear-gradient(180deg, rgba(124, 203, 239, .44), rgba(124, 203, 239, .24));
  box-shadow: inset 0 0 0 1px rgba(124, 203, 239, .58), inset 0 1px 0 rgba(255, 255, 255, .2), var(--sh-1), 0 0 16px rgba(124, 203, 239, .22); }
.btn-primary::before { content: "○"; margin-right: .45em; font-weight: 700; line-height: 0; }
.help-head .btn-primary::before { content: none; }
#btnStart::before { content: none; }
.search-row button, .btn-secondary, .btn-assign, .btn-invert, .btn-clear, #miniZoom button {
  background: rgba(255, 255, 255, .08); border: 1px solid var(--hair); border-radius: var(--r-c); color: #fff; text-shadow: none;
  box-shadow: var(--hi), 0 1px 2px rgba(0, 0, 0, .2);
}
.search-row button:hover, .btn-secondary:hover, .btn-assign:hover, .btn-invert:hover, .btn-clear:hover, #miniZoom button:hover {
  background: rgba(255, 255, 255, .14); border-color: var(--hair-2);
}
.search-row button:disabled, .btn-secondary:disabled { opacity: .4; }
.start-actions .btn-secondary, .btn-assign, .btn-invert, .btn-clear, .help-head .btn-secondary, #trialEnd .btn-secondary { border-radius: 999px; }
.btn-invert.on { background: rgba(124, 203, 239, .32); border-color: rgba(124, 203, 239, .55); color: #fff; }
.btn-assign.listening { background: rgba(255, 176, 72, .9); border-color: transparent; color: #2a1800; }
.btn-danger { background: rgba(255, 92, 80, .12); border: 1px solid rgba(255, 120, 108, .32); border-radius: 999px; color: #FFB3AA; box-shadow: var(--hi); }
.btn-danger:hover { background: rgba(255, 92, 80, .2); border-color: rgba(255, 120, 108, .5); }
.btn-danger.confirm { background: #E5534B; border-color: transparent; color: #fff; }
.gp-grid .gp-del, .btn-secondary.gp-del { color: #FFB3AA; border-color: rgba(255, 120, 108, .3); }

.help-btn { background: rgba(255, 255, 255, .08); border: 1px solid var(--hair-2); color: var(--fg-2); box-shadow: none; }
.help-btn:hover, .help-btn.open { background: rgba(124, 203, 239, .36); border-color: rgba(124, 203, 239, .6); color: #fff; }
.help-box {
  background: var(--well); border: 1px solid var(--sep); border-left-width: 1px; border-radius: var(--r-c);
  padding: 12px 14px; color: var(--fg-2); line-height: 1.7; box-shadow: var(--in);
}
.info-box, .sc-gp { background: var(--well); border: 1px solid var(--sep); border-radius: var(--r-c); color: var(--fg-2); box-shadow: var(--in); }
.sc-gp.sc-ok { border-color: rgba(110, 220, 150, .4); color: var(--fg); }
details.adv { border-top: 1px solid var(--sep); }
details.adv.adv-item { border-top: 0; border-bottom: 1px solid var(--sep); }
details.adv > summary { list-style: none; color: var(--fg-2); }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0;
  transform: rotate(-45deg); transition: transform .41s var(--spring-snappy); opacity: .8;
}
details.adv[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
details.adv > summary:hover, details.adv[open] > summary { color: var(--fg); }
kbd { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-bottom-color: rgba(255, 255, 255, .08); border-radius: var(--r-tag); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.badge { border-radius: var(--r-tag); }
.axis-meter { background: transparent; border-color: transparent; position: relative; }
.axis-meter::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 10px; margin-top: -5px; border-radius: 999px; background: var(--well); box-shadow: var(--in); }
.axis-meter > div { background: var(--aq-solid); border-radius: 999px; z-index: 1; }
#rowDjiRc .dji-pick > summary { background: rgba(255, 255, 255, .08); border: 1px solid var(--hair); border-radius: var(--r-c); color: #fff; box-shadow: var(--hi); text-shadow: none; }
#rowDjiRc .dji-pick > summary:hover { background: rgba(255, 255, 255, .14); border-color: var(--hair-2); }
#rowDjiRc .dji-pick > summary::after { color: var(--fg-2); }
.rate-graph { border-radius: var(--r-c); }
.help-g { background: rgba(0, 0, 0, .14); border: 1px solid var(--sep); border-radius: var(--r-m); box-shadow: none; }
.help-g h3, .help-shot-txt h3, #startCtrl h3.sec { color: var(--fg); }
.help-g dd, .help-g p, .help-g ol, .help-sub, .help-shot-legend li { color: var(--fg-2); }
.help-g h3 .ico, #startCtrl h3.sec .ico, .help-shot-txt h3 .ico { color: var(--aq-ink); }
.help-shot-img img { border: 1px solid var(--hair); border-radius: var(--r-c); }
.help-shot-legend li { border-radius: var(--r-xs); }
.help-shot-legend li:hover, .help-shot-legend li.on { color: var(--fg); background: rgba(255, 255, 255, .06); }
.hs-n, .help-shot-legend li::before {
  background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 6px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px) saturate(1.6); -webkit-backdrop-filter: blur(8px) saturate(1.6); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); font-weight: 600;
}
.help-shot-legend li:hover::before, .help-shot-legend li.on::before, .hs-n.on { background: rgba(255, 255, 255, .92); color: #0B2A44; text-shadow: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.help-head-act .btn-tut { background: rgba(255, 255, 255, .08); border: 1px solid var(--hair); border-radius: 999px; color: #fff; box-shadow: var(--hi); }
.help-head-act .btn-tut:hover { background: rgba(255, 255, 255, .14); }
.help-head-act .tut-help-note { color: var(--fg-3); }

.fm-pop {
  background: var(--mat-pop); border: 1px solid var(--hair); border-radius: var(--r-l); padding: 10px;
  box-shadow: var(--sh-2), var(--hi); backdrop-filter: var(--blur-pop); color: var(--fg);
}
#ghostPop { padding: 8px; border-radius: var(--r-m); }
#ghostPop .gp-grid button { border-radius: var(--r-tag); }
#coursePop .fm-row > input, #coursePop .fm-row > select, #coursePop .fm-row > .btn-secondary, #coursePop #cpLaps {
  height: 30px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
#coursePop .fm-row > input { padding-left: 10px; padding-right: 10px; }
#coursePop .fm-row > .btn-secondary { display: inline-flex; align-items: center; padding-left: 10px; padding-right: 10px; }
#coursePop #cpLaps { height: auto; align-self: stretch; padding-left: 10px; }
#coursePop .cp-times { color: var(--fg-2); }
#coursePop .cp-times b { color: var(--fg); }
.fm-lbl { color: var(--fg); }
.fm-row.hint, .fm-pop .hint { color: var(--fg-3); }
.fm-pop .seg { border-radius: var(--r-s); }
.fm-pop .seg button { border-radius: var(--r-xs); }
.gp-grid button, .fm-pop .btn-secondary { border-radius: var(--r-xs); }
.fm-pop input, .fm-pop select { border-radius: var(--r-xs); }

#toast {
  background: var(--mat-pop); border: 1px solid var(--hair); border-radius: var(--r-l); color: var(--fg);
  box-shadow: var(--sh-2), var(--hi); backdrop-filter: var(--blur-pop);
}
#loadingBar { background: var(--mat-pop); border: 1px solid var(--hair); border-radius: 999px; color: var(--fg); box-shadow: var(--sh-1), var(--hi); backdrop-filter: var(--blur-pop); }
.spinner { border-color: rgba(255, 255, 255, .16); border-top-color: var(--aq-ink); }
#pauseOverlay .pause-card { background: var(--mat-pop); border: 1px solid var(--hair); border-radius: 999px; box-shadow: var(--sh-1), var(--hi); backdrop-filter: var(--blur-pop); }
#pauseOverlay .pause-card span { color: var(--fg-2); }
.shot-result, #trialEnd .trial-card { background: var(--mat-pop); border: 1px solid var(--hair); border-radius: var(--r-l); box-shadow: var(--sh-2), var(--hi); backdrop-filter: var(--blur-pop); color: var(--fg); }
.shot-result .grade { color: var(--aq-ink); }

.chip, #hudWeather, #hudAltWarn, #shotHud {
  background: var(--mat-hud); border: 1px solid var(--hair); border-radius: 999px; color: #fff;
  box-shadow: var(--sh-1), var(--hi); backdrop-filter: var(--blur-hud); text-shadow: none;
}
.chip-mode { background: rgba(46, 140, 196, .88); border-color: rgba(143, 214, 245, .35); color: #fff; }
.chip-arm { color: #94E8AE; }
.chip-disarm { color: #FFA59C; }
.chip-rec { background: rgba(214, 52, 44, .9); border-color: rgba(255, 160, 150, .4); color: #fff; }
#hudWeather:hover, .chip-click:hover { background: rgba(40, 64, 88, .7); filter: none; }
#hudClock, .wx-wu, .wx-edit { color: var(--fg-2); }
.icon-btn { background: var(--mat-hud); border: 1px solid var(--hair); border-radius: 50%; color: #fff; box-shadow: var(--sh-1), var(--hi); backdrop-filter: var(--blur-hud); filter: none; }
.icon-btn:hover { background: rgba(40, 64, 88, .72); filter: none; }
.icon-btn.icon-on { background: rgba(124, 203, 239, .34); border-color: rgba(143, 214, 245, .5); box-shadow: var(--sh-1), 0 0 12px rgba(124, 203, 239, .35); }
.icon-btn.icon-rec { background: rgba(214, 52, 44, .9); border-color: rgba(255, 160, 150, .4); }
#hudInstruments { background: var(--mat-hud); border: 1px solid var(--hair); border-radius: var(--r-l); box-shadow: var(--sh-1), var(--hi); backdrop-filter: var(--blur-hud); }
.inst-v { color: #fff; }
.inst-v2, .inst-v3 { color: var(--fg-2); }
.inst-ico, .inst-u, .inst-lbl { color: var(--fg-3); }
#cgLabel, .cg-track, #camGauge #zoomChip { background: var(--mat-hud); border: 1px solid var(--hair); box-shadow: var(--sh-1); backdrop-filter: var(--blur-hud); color: #fff; }
#cgLabel { border-radius: var(--r-xs); }
.cg-track { border-radius: 999px; }
#camGauge #zoomChip { border-radius: var(--r-s); }
.cg-marker { background: #fff; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
#miniWrap { border: 1px solid var(--hair-2); border-radius: var(--r-m); box-shadow: var(--sh-2); }
#miniZoom button { border-radius: var(--r-xs); background: var(--mat-hud); backdrop-filter: var(--blur-hud); }
#hudWarning { background: rgba(70, 18, 18, .74); border: 1px solid rgba(255, 130, 118, .4); border-radius: var(--r-l); color: #FFB3AA; box-shadow: var(--sh-2), var(--hi); backdrop-filter: var(--blur-hud); }
#hudAltWarn.lv-hit { background: rgba(70, 18, 18, .74); border-color: rgba(255, 130, 118, .45); color: #FFB3AA; }

#tutCard.tut-card, #tutCard {
  background: var(--mat-pop); border: 1px solid var(--hair); border-radius: var(--r-l); padding: 16px 18px;
  box-shadow: var(--sh-2), var(--hi); backdrop-filter: var(--blur-pop); color: var(--fg);
}
#tutCard .tut-step { color: var(--aq-ink); }
#tutCard .tut-body { color: rgba(255, 255, 255, .9); }
#tutCard .tut-skip { color: var(--fg-3); }
#tutCard .tut-skip:hover { color: var(--fg); }
#tutCard .tut-bar { background: var(--well); border-radius: 999px; box-shadow: var(--in); }
#tutCard .tut-bar > i { background: var(--aq-solid); border-radius: 999px; }
#tutCard .tut-act .btn-primary, #tutCard .tut-act .tut-sec { border-radius: 999px; }
#tutCard .tut-pad { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .22); }
#tutCard .tut-pad.on { stroke: var(--aq-ink); }
#tutCard .tut-dot, #tutCard .tut-arr { fill: var(--aq-ink); stroke: none; }
#tutCard .tut-dot.off { fill: rgba(255, 255, 255, .3); }
#tutRing { border: 2px solid var(--aq-ink); border-radius: var(--r-m); box-shadow: 0 0 0 4px rgba(124, 203, 239, .16), 0 0 18px rgba(124, 203, 239, .45); animation: skRing 1.6s ease-in-out infinite; }
@keyframes skRing { 50% { box-shadow: 0 0 0 7px rgba(124, 203, 239, .08), 0 0 24px rgba(124, 203, 239, .6); } }

.fm-pop, #hud > .fm-pop { transform-origin: top right; transition: opacity .16s var(--ease), scale .41s var(--spring-snappy), translate .41s var(--spring-snappy), display .41s allow-discrete; }
#fmPopover { transform-origin: top left; }
.fm-pop[style*="display: none"], .fm-pop[style*="display:none"], #hud > .fm-pop[style*="display: none"], #hud > .fm-pop[style*="display:none"] {
  opacity: 0; scale: .96; translate: 0 -4px; pointer-events: none;
  transition: opacity .12s ease-in, scale .16s var(--ease-in), translate .16s var(--ease-in), display .16s allow-discrete;
}
@starting-style { .fm-pop { opacity: 0; scale: .9; translate: 0 -8px; } }

.side-panel { transition: translate .57s var(--spring-smooth), display .57s allow-discrete; }
.side-panel[style*="display: none"], .side-panel[style*="display:none"] { translate: calc(100% + 24px) 0; pointer-events: none; transition: translate .3s var(--ease-in), display .3s allow-discrete; }
@starting-style { .side-panel { translate: calc(100% + 24px) 0; } }
.tab-page { transition: opacity .22s var(--ease), translate .57s var(--spring-smooth); }
@starting-style { .tab-page { opacity: 0; translate: 0 6px; } }

.overlay:not(#titleScreen) { transition: opacity .24s var(--ease), display .3s allow-discrete; }
.overlay:not(#titleScreen)[style*="display: none"], .overlay:not(#titleScreen)[style*="display:none"] { opacity: 0; pointer-events: none; transition: opacity .22s ease-in, display .22s allow-discrete; }
@starting-style { #helpPanel, #creditsPanel { opacity: 0; } }
.overlay:not(#titleScreen) .start-card { transition: opacity .24s var(--ease), scale .57s var(--spring-smooth), translate .57s var(--spring-smooth); }
.overlay:not(#titleScreen)[style*="display: none"] .start-card, .overlay:not(#titleScreen)[style*="display:none"] .start-card {
  scale: .98; translate: 0 6px; transition: opacity .2s ease-in, scale .22s var(--ease-in), translate .22s var(--ease-in);
}
@starting-style { .overlay:not(#titleScreen) .start-card { opacity: 0; scale: .97; translate: 0 18px; } }

#toast, #loadingBar, #pauseOverlay, .shot-result, #trialEnd, #tutCard {
  transition: opacity .18s var(--ease), scale .41s var(--spring-snappy), translate .41s var(--spring-snappy), display .41s allow-discrete;
}
#toast[style*="display: none"], #toast[style*="display:none"], #loadingBar[style*="display: none"], #loadingBar[style*="display:none"], .shot-result[style*="display: none"], .shot-result[style*="display:none"], #tutCard[style*="display: none"], #tutCard[style*="display:none"], #pauseOverlay[hidden], #trialEnd[hidden] {
  opacity: 0; scale: .97; pointer-events: none;
  transition: opacity .16s ease-in, scale .18s var(--ease-in), translate .18s var(--ease-in), display .18s allow-discrete;
}
#toast[style*="display: none"], #toast[style*="display:none"] { translate: 0 6px; }
#loadingBar[style*="display: none"], #loadingBar[style*="display:none"] { translate: 0 -6px; }
@starting-style {
  #pauseOverlay, .shot-result, #trialEnd, #tutCard { opacity: 0; scale: .94; }
  #toast { opacity: 0; scale: .96; translate: 0 12px; }
  #loadingBar { opacity: 0; scale: .96; translate: 0 -10px; }
}

.help-box {
  interpolate-size: allow-keywords; overflow: hidden;
  transition: height .57s var(--spring-smooth), padding-block .57s var(--spring-smooth), margin-top .57s var(--spring-smooth), opacity .24s var(--ease), display .57s allow-discrete;
}
.help-box[hidden] {
  height: 0; padding-block: 0; margin-top: 0; opacity: 0;
  transition: height .2s var(--ease-in), padding-block .2s var(--ease-in), margin-top .2s var(--ease-in), opacity .12s ease-in, display .2s allow-discrete;
}
@starting-style { .help-box { height: 0; padding-block: 0; margin-top: 0; opacity: 0; } }

details.adv, #rowDjiRc details.dji-pick { interpolate-size: allow-keywords; }
details.adv::details-content, #rowDjiRc details.dji-pick::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .2s var(--ease-in), opacity .12s ease-in, content-visibility .2s allow-discrete;
}
details.adv[open]::details-content, #rowDjiRc details.dji-pick[open]::details-content {
  block-size: auto; opacity: 1;
  transition: block-size .57s var(--spring-smooth), opacity .24s var(--ease), content-visibility .57s allow-discrete;
}

#hud { transition: opacity .4s var(--ease); }
@starting-style { #hud { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fm-pop, .side-panel, .tab-page, .overlay .start-card, #toast, #loadingBar, #pauseOverlay, .shot-result, #trialEnd, #tutCard,
  .btn-primary, .btn-secondary, .search-row button, .btn-assign, .btn-invert, .btn-clear, .seg button, .tab, .icon-btn, .help-btn { translate: none !important; scale: none !important; }
  .side-panel { transition: opacity .2s var(--ease), display .2s allow-discrete; }
  .side-panel[style*="display: none"], .side-panel[style*="display:none"] { opacity: 0; transition: opacity .16s ease-in, display .16s allow-discrete; }
  .help-box, .help-box[hidden], details.adv::details-content, #rowDjiRc details.dji-pick::details-content { transition-duration: 0s !important; }
  #tutRing { animation: none; }
  details.adv > summary::before { transition: none; }
  @starting-style { .side-panel { opacity: 0; } }
}

#titleScreen {
  --fg: #f5f6f8; --fg-2: rgba(235, 238, 245, .62); --fg-3: rgba(235, 238, 245, .38);
  --fill-1: rgba(255, 255, 255, .05); --fill-2: rgba(255, 255, 255, .08); --fill-3: rgba(255, 255, 255, .13);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --glass: rgba(24, 27, 34, .72); --glass-solid: rgba(24, 27, 34, .92);
  --blue: #0a84ff; --blue-2: #409cff;
  --r-lg: 18px; --r: 12px; --r-sm: 9px; --shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
#titleScreen .title-item:focus-visible { box-shadow: none; outline: 2px solid var(--blue-2); outline-offset: -2px; }