:root {
  color-scheme: dark;
  font: 350 15px/1.4 "Segoe UI Variable Text","Segoe UI",sans-serif;
  background: #090909;
  color: #eee;
}
* { box-sizing: border-box }
body { margin: 0 }
.titlebar { display:flex; align-items:center; gap:10px; padding:0 28px; height:48px; -webkit-app-region:drag }
h1 { margin:0; font-size:21px; font-weight:450; letter-spacing:-1.3px }
.mark { width:19px; height:17px; background:#eee; clip-path:polygon(0 6%,25% 6%,42% 58%,75% 6%,100% 6%,40% 100%) }
main { max-width:760px; margin:auto; padding:18px 28px }
.ratepanel { padding:21px 23px 16px; border:1px solid #303030; border-radius:18px; background:linear-gradient(115deg,#1b1b1b,#111 72%); transition:border-color .22s,box-shadow .22s }
.heading,.setting,.scale { display:flex; justify-content:space-between; align-items:center; gap:12px }
.heading label,legend { font-size:14px; color:#ccc }
#state { display:flex; align-items:center; gap:8px; font-size:12px; color:#c5c5c5 }
#state::before { content:""; width:6px; height:6px; border-radius:50%; background:#888 }
.live #state::before { background:white; box-shadow:0 0 9px 2px #fffa }
.live .ratepanel { border-color:#696969; box-shadow:inset 0 1px 13px #ffffff0b,0 0 20px #ffffff08 }
.readout { display:flex; align-items:baseline; gap:12px; margin:7px 0 5px; color:#a4a4a4; font-size:13px }
#rate { width:4.1ch; padding:0; border:none; color:#fafafa; background:transparent; font:250 78px/1.15 "Segoe UI Variable Display","Segoe UI Light",sans-serif; letter-spacing:-4px; font-variant-numeric:tabular-nums }
#rate::-webkit-inner-spin-button { appearance:none }
#slider { width:100%; height:18px; margin:0; accent-color:#ededed; cursor:pointer }
.scale { font-size:11px; color:#aaa; font-variant-numeric:tabular-nums }
fieldset { border:0; padding:0; margin:21px 0 18px }
legend { padding:0; margin-bottom:9px }
.outputs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.outputs label { position:relative; display:grid; gap:8px; padding:12px 14px; background:#101010; border:1px solid #262626; border-radius:12px; color:#aaa; cursor:pointer; transition:background .16s,border-color .16s }
.outputs label:has(:checked) { color:white; background:#191919; border-color:#414141 }
.outputs label:hover { border-color:#777 }
.outputs i,.mouse { display:grid; place-items:center; width:21px; height:21px; border:1px solid #888; border-radius:5px; font:12px "Segoe UI",sans-serif }
.mouse { width:15px; border-radius:7px; margin-left:2px }
.mouse::before { content:""; align-self:start; height:7px; width:1px; background:#aaa }
.outputs input { position:absolute; right:11px; top:11px; margin:0; accent-color:#ddd }
.settings { background:#111; border:1px solid #292929; border-radius:14px; padding:0 16px }
.setting { min-height:54px; padding:10px 0 }
label.setting { cursor:pointer }
.setting small { display:block; color:#a0a0a0; font-size:12px }
footer { border-top:1px solid #2b2b2b }
:is(#paced,#pinned) { appearance:none; margin:0; width:34px; height:20px; border-radius:12px; background:#393939; cursor:pointer }
:is(#paced,#pinned)::after { content:""; display:block; width:14px; height:14px; margin:3px; border-radius:50%; background:#aaa; transition:transform .16s }
:is(#paced,#pinned):checked { background:#e9e9e9 }
:is(#paced,#pinned):checked::after { transform:translateX(14px); background:#222 }
button { font:inherit; font-size:13px; background:#222; color:white; padding:5px 11px; border:1px solid #505050; border-radius:7px; cursor:pointer }
button:hover { background:#303030 }
#install { margin-top:10px }
#hint { margin-top:6px; color:#bbb; font-size:12px }
:focus-visible { outline:2px solid #eee; outline-offset:3px }
@media (prefers-reduced-motion:reduce) { *,:after { transition:none!important } }

.keytile { position:relative; display:grid; align-content:space-between; padding:10px 14px; border:1px solid #262626; border-radius:12px; background:#101010 }
.keytile:has(:checked) { background:#191919; border-color:#414141 }
.outputs .keytile label { display:block; position:static; background:none; border:0; padding:0 }
.setting + .setting { border-top:1px solid #2b2b2b }

body { isolation:isolate; min-height:100vh }
.orb {
  position:fixed; z-index:-1; pointer-events:none; inset:auto 0 0;
  height:56vh; overflow:hidden;
  background:radial-gradient(ellipse 90% 100% at 50% 104%,#383838 0%,#282828 28%,#191919 55%,#101010 74%,transparent 100%);
}
.orb::after {
  content:""; position:absolute; inset:0 -8% -12%;
  background:radial-gradient(ellipse 76% 92% at 50% 100%,#c9c9c9 0%,#999 14%,#666 32%,#404040 51%,#242424 69%,transparent 100%);
  filter:blur(14px); opacity:0; transition:opacity .65s ease;
  transform-origin:center bottom;
}
.live .orb::after { opacity:1; animation:orb-breathe 4s ease-in-out infinite alternate }
@keyframes orb-breathe { to { transform:scale(1.035,1.055) } }
main { padding-bottom:50px }
legend { margin-bottom:3px; font-weight:500; color:#eee }
.helper { margin:0 0 10px; font-size:12px; color:#b6b6b6 }
.settings { background:linear-gradient(120deg,#131313ed,#161616e3); border-color:#ffffff25 }
#shortcut { min-width:46px; flex-shrink:0 }
#hint:not(:empty) { width:fit-content; background:#131313; border-radius:6px; padding:4px 8px }
@media (prefers-reduced-motion:reduce) {
  .live .orb::after { animation:none }
  .orb::before,.orb::after { transition:none }
}

button,input { font-family:inherit }
.key-picker { display:flex; align-items:center; justify-content:space-between; gap:12px; width:fit-content; min-width:56px; padding:4px 9px; font-weight:500; background:#252525; border-color:#494949 }
.key-picker::after { content:""; width:5px; height:5px; border:solid #bbb; border-width:0 1px 1px 0; transform:translateY(-1px) rotate(45deg) }
.key-picker[aria-expanded=true]::after { transform:translateY(2px) rotate(225deg) }
#key-menu { position:fixed; z-index:4; display:grid; grid-template-columns:repeat(6,34px); gap:4px; padding:9px; border-radius:13px; border:1px solid #535353; background:#181818; box-shadow:0 8px 26px #0009 }
#key-menu[hidden] { display:none }
#key-menu [role=option] { text-align:center; line-height:30px; border-radius:6px; cursor:pointer; font-size:14px; background:#222 }
#key-menu [aria-selected=true] { background:#e6e6e6; color:#111 }
#key-menu .highlight { outline:1px solid #bbb }
#key-menu [aria-disabled=true] { color:#777; cursor:default }
.outputs input[type=checkbox] { appearance:none; width:16px; height:16px; border:1px solid #666; border-radius:5px; cursor:pointer; display:grid; place-items:center }
.outputs input:checked { background:#eee; border-color:#eee }
.outputs input:checked::after { content:""; width:7px; height:4px; border:solid #171717; border-width:0 0 1.6px 1.6px; transform:translateY(-1px) rotate(-45deg) }
#slider { appearance:none; background:transparent }
#slider::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(to right,#ddd var(--fill,50%),#414141 var(--fill,50%)) }
#slider::-webkit-slider-thumb { appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:#eee; box-shadow:0 1px 5px #0008 }
:disabled { opacity:.65; cursor:default }
::-webkit-scrollbar { width:7px }
::-webkit-scrollbar-thumb { background:#454545; border-radius:8px }
.titlebar {
  width:env(titlebar-area-width,calc(100% - 138px));
  padding-right:3px;
}
#settings-button {
  -webkit-app-region:no-drag;
  margin-left:auto;
  width:38px;
  height:34px;
  border:0;
  display:grid;
  place-items:center;
  background:transparent;
  color:#aaa;
}
#settings-button span {
  font:17px "Segoe Fluent Icons","Segoe MDL2 Assets";
  transition:transform .22s ease;
}
#settings-button:hover,#settings-button[aria-expanded=true] { color:#fff; background:#202020 }
#settings-button[aria-expanded=true] span { transform:rotate(30deg) }
#window-settings {
  position:fixed;
  inset:46px auto auto auto;
  margin:0;
  width:min(276px,calc(100vw - 16px));
  border:1px solid #494949;
  border-radius:14px;
  padding:16px;
  background:#181818;
  color:#eee;
  box-shadow:0 12px 38px #0009;
}
#settings-heading { font-size:13px; font-weight:500; margin:0 0 12px; color:#bcbcbc }
#window-settings .setting { padding:12px 0 0; border-top:1px solid #333 }
@media (prefers-reduced-motion:no-preference) {
  @keyframes settle { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:translateY(0) } }
  main { animation:settle .25s ease-out }
  #window-settings:popover-open,#key-menu:not([hidden]) { animation:settle .14s ease-out }
  button,.keytile,.outputs input { transition:background .15s,border-color .15s,transform .15s }
  button:active:not(:disabled) { transform:scale(.96) }
  .keytile:hover { border-color:#707070 }
}
body { user-select:none }
input[type=text],input[type=password],input[type=number] { user-select:text }
[hidden] { display:none!important }
#auth { max-width:410px; margin:clamp(28px,9vh,78px) auto 30px; padding:0 26px }
.auth-mode { display:inline-flex; padding:3px; border:1px solid #383838; border-radius:9px; background:#111 }
.auth-mode button { border:0; border-radius:6px; background:transparent; color:#aaa; padding:5px 14px }
.auth-mode button[aria-pressed=true] { background:#323232; color:#fff }
#auth h2 { font-weight:350; font-size:37px; letter-spacing:-1.5px; margin:22px 0 4px }
#auth p { color:#aaa; font-size:13px; margin:0 0 24px }
#access-form { display:grid; gap:16px }
#access-form label { display:grid; gap:6px; font-size:13px; color:#ccc }
#access-form input { padding:11px 13px; border:1px solid #424242; border-radius:8px; background:#181818; color:#fff; font:inherit; font-size:16px }
#access-form .enter { margin-top:5px; padding:11px; background:#eee; color:#111; font-weight:550 }
#access-form .enter:hover { background:white }
main:focus { outline:none }
@media (prefers-reduced-motion:no-preference) {
  main:not([hidden]) { animation:settle .32s cubic-bezier(.2,.7,.2,1) both }
}
#logout,#uninstall { width:100%; margin-top:14px; text-align:left; padding:8px 11px }
#window-settings { max-height:calc(100vh - 60px); overflow:auto }
#pill-custom { margin-top:10px;border-top:1px solid #383838 }
#pill-custom summary { cursor:pointer;padding:12px 0;font-weight:500 }
#pill-custom label { display:flex;align-items:center;justify-content:space-between;min-height:32px;font-size:13px }
#pill-custom input { accent-color:#ccc }
#pill-custom input[type=range] { width:110px }
#pill-custom button { text-transform:capitalize }
.pill-preview { display:grid;place-items:center;height:56px;border-radius:10px;background:linear-gradient(120deg,#333,#656565);margin-bottom:8px }
@media(prefers-reduced-motion:no-preference) { #pill-custom[open] .pill-preview { animation:settle .2s ease-out } }
.optimizer { display:flex; align-items:center; gap:12px; margin-top:12px }
.optimizer button { flex-shrink:0 }
.optimizer small { font-size:12px; color:#bbb }
#drivers { margin-top:12px }
#driver-panel { width:min(320px,85vw); padding:20px; color:#eee; background:#171717; border:1px solid #444; border-radius:14px; box-shadow:0 12px 36px #0008 }
#driver-panel h2 { margin:0; font-size:18px; font-weight:500 }
#driver-panel p,#driver-status { color:#bbb; font-size:13px }
#driver-list label { display:flex; gap:10px; align-items:center; padding:8px 0 }
#driver-panel footer { display:flex; justify-content:space-between; margin-top:12px;padding-top:12px }
.driver-row { display:flex;align-items:center;gap:5px;margin:8px 0;font-size:12px }
.driver-row input { width:55px }
.driver-row select,.driver-row input { background:#222;color:white;border:1px solid #444;border-radius:5px;padding:5px }
.exit-status { height:100vh;display:grid;place-content:center;gap:16px;text-align:center;color:#e8e8e8 }
.exit-status::before { content:"";width:18px;height:18px;margin:auto;border:2px solid #444;border-top-color:#eee;border-radius:50% }
@media(prefers-reduced-motion:no-preference){.exit-status::before{animation:exit-spin .8s linear infinite}@keyframes exit-spin{to{transform:rotate(360deg)}}}
.live .orb::after {
  background:radial-gradient(ellipse at 50% 103%,#ffb0ce 0%,#c95789 19%,#65243e 43%,transparent 72%);
  animation:none;
}
.live .orb::before {
  content:"";position:absolute;inset:-8% -18% -16%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 103%,transparent 31%,#ffaac539 34%,transparent 38%,transparent 49%,#e77ba329 52%,transparent 56%);
  transform-origin:50% 103%;
}
.live #state::before { background:#ffc1d9;box-shadow:0 0 9px #ff70a9 }
@media(prefers-reduced-motion:no-preference){
  .live .orb::before { animation:water-ring 2.8s ease-out 1 both }
  @keyframes water-ring { from{transform:scale(.66);opacity:0} 22%{opacity:.9} to{transform:scale(1.18);opacity:0} }
}