: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); }

@keyframes jpPopIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes jpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes jpSheetIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes jpPanelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes jpToastIn { 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,
html #jzRec button, #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), transform .12s var(--ease);
}
.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, html #jzRec button:active { transform: scale(.97); }

#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);
}
.overlay .start-card { animation: jpSheetIn .22s var(--ease); }
.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; }
.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);
  animation: jpPanelIn .22s var(--ease);
}
.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, html #jzRecDlg .jz-rate {
  -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(--fg-3); }
#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; }
.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); animation: jpPopIn .18s var(--ease); transform-origin: top left;
}
.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 .18s var(--ease); 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);
  animation: jpPopIn .18s var(--ease); transform-origin: top center;
}
#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); animation: jpToastIn .2s var(--ease);
}
#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); animation: jpToastIn .2s var(--ease); }
.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); animation: jpPopIn .18s var(--ease); }
#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); animation: jpPopIn .2s var(--ease); }
.shot-result .grade { color: var(--aq-ink); }

.chip, #hudWeather, #hudAltWarn, #shotHud, html #jpZone, html #jzRec button {
  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;
}
html #jpZone { border-radius: var(--r-m); }
.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, html #jzRec .on { background: rgba(214, 52, 44, .9); border-color: rgba(255, 160, 150, .4); color: #fff; }
#hudWeather:hover, .chip-click:hover, html #jzRec button: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); }
.stick-box::before {
  left: 4px; right: 4px; top: 4px; bottom: 4px; width: auto; height: auto; box-shadow: none; opacity: .85;
  background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8));
}
.stick-box::after { content: none; }
.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); animation: jpFadeIn .2s var(--ease);
}
#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: jpRing 1.6s ease-in-out infinite; }
@keyframes jpRing { 50% { box-shadow: 0 0 0 7px rgba(124, 203, 239, .08), 0 0 24px rgba(124, 203, 239, .6); } }

html #jpZone .jz-row i { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
html #jpZone .jz-row em, html #jpZone .jz-ok { color: var(--fg-2); opacity: 1; }
html #jzRecDlg { background: rgba(2, 8, 16, .5); animation: jpFadeIn .18s var(--ease); }
html #jzRecDlg .jz-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); animation: jpSheetIn .22s var(--ease); }
html #jzRecDlg .jz-head { padding: 12px 16px; border-bottom-color: var(--sep); }
html #jzRecDlg .jz-list { padding: 8px; border-right-color: var(--sep); }
html #jzRecDlg .jz-item { border-radius: var(--r-s); padding: 8px 10px; color: var(--fg-2); }
html #jzRecDlg .jz-item b { color: var(--fg); }
html #jzRecDlg .jz-item:hover { background: rgba(255, 255, 255, .06); }
html #jzRecDlg .jz-item.sel { background: rgba(124, 203, 239, .18); color: var(--fg); box-shadow: none; }
html #jzRecDlg .jz-item .jz-sp { color: #FFB86B; }
html #jzRecDlg .jz-detail { padding: 14px 16px; }
html #jzRecDlg .jz-sum div { color: var(--fg); opacity: 1; }
html #jzRecDlg .jz-sum span { color: var(--fg-3); opacity: 1; }
html #jzRecDlg .jz-perm { background: var(--well); border: 1px solid var(--sep); border-radius: var(--r-m); box-shadow: var(--in); padding: 10px 12px; }
html #jzRecDlg .jz-perm h4 { color: #FFB86B; }
html #jzRecDlg .jz-perm .jz-law { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-perm li.now { background: rgba(124, 203, 239, .18); border-radius: var(--r-tag); box-shadow: -6px 0 0 rgba(124, 203, 239, .18), 6px 0 0 rgba(124, 203, 239, .18); }
html #jzRecDlg .jz-mapw { border-radius: var(--r-c); box-shadow: 0 0 0 1px var(--hair); }
html #jzRecDlg .jz-mapmsg { color: var(--fg-2); }
html #jzRecDlg .jz-play .jz-pbtn { border-radius: 999px; }
html #jzRecDlg .jz-ptime { color: var(--fg); }
html #jzRecDlg .jz-seek { accent-color: #6EC3EA; }
html #jzRecDlg .jz-rate { color: var(--fg); border: 1px solid var(--sep); border-radius: var(--r-s); box-shadow: var(--in); padding-top: 4px; padding-bottom: 4px; }
html #jzRecDlg .jz-legend, html #jzRecDlg .jz-note { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-chart canvas { background: rgba(0, 0, 0, .18); border-radius: var(--r-c); box-shadow: inset 0 0 0 1px var(--sep); }
html #jzRecDlg .btn-secondary { border-radius: 999px; }
html #jzRecDlg .jz-hud, html #jzRecDlg .jz-now {
  background: rgba(10, 22, 36, .78); color: #fff; border-radius: var(--r-m); text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--hair), var(--hi), var(--sh-1); backdrop-filter: var(--blur-hud);
}
html #jzRecDlg .jz-hh { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-mode { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 0 8px; }
html #jzRecDlg .jz-mode:hover { background: rgba(255, 255, 255, .18); }
html #jzRecDlg .jz-stk i { background-color: rgba(0, 0, 0, .28); background-image: none; border: 1px solid var(--sep); border-radius: var(--r-s); box-shadow: var(--in); }
html #jzRecDlg .jz-stk i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .16; pointer-events: none;
  background: linear-gradient(#fff, #fff) center / 1px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1px no-repeat; }
html #jzRecDlg .jz-stk b { background: var(--aq-ink); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 8px rgba(124, 203, 239, .6); }
html #jzRecDlg .jz-stk span { color: var(--fg-2); opacity: 1; }
html #jzRecDlg .jz-now .jz-c { border-radius: 999px; padding: 1px 9px; }
html #jzRecDlg .jz-now .p { background: var(--aq-ink); color: #06263D; }
html #jzRecDlg .jz-now .w { background: rgba(255, 255, 255, .14); color: #fff; }
html #jzRecDlg .jz-now .x { background: #E5534B; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fm-pop, .help-box, #toast, #loadingBar, #pauseOverlay .pause-card, .shot-result, #trialEnd .trial-card, #tutCard, #tutRing, .side-panel,
  .overlay .start-card, html #jzRecDlg, html #jzRecDlg .jz-card { animation: none; }
  .btn-primary, .btn-secondary, .search-row button, .btn-assign, .btn-invert, .btn-clear, .seg button, .tab, .icon-btn, .help-btn, html #jzRec button { transition: none; }
  details.adv > summary::before { transition: none; }
}

#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; }