#settings-modal .settings-motion-card { --settings-accent:#6adbf3;position:relative; }
#settings-modal [data-settings-instrument="matrix"] { --settings-accent:#e8c381; }
#settings-modal [data-settings-instrument="route"] { --settings-accent:#b2a4fa; }
#settings-modal .settings-motion-card h4 { display:flex;align-items:center;gap:10px;min-height:80px;padding-bottom:12px;border-bottom:1px solid rgba(126,170,202,.18); }
.settings-motion-instrument { display:inline-flex;flex:0 0 104px;width:104px;height:80px;color:var(--settings-accent);pointer-events:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--settings-accent) 12%,transparent),transparent 70%); }
.settings-motion-instrument svg { width:100%;height:100%;overflow:visible; }
.settings-motion-orbit { opacity:.55;stroke-dasharray:22 10 3 10;transform-origin:44px 33px;animation:settings-scan 7s linear infinite paused; }
.settings-motion-outline { stroke-width:1.7; }
.settings-motion-route { opacity:.32; }
.settings-motion-trace { stroke-width:3;stroke-linecap:round;stroke-dasharray:32 133;stroke-dashoffset:0;animation:settings-path 3s linear infinite paused; }
.settings-motion-scan { transform-origin:44px 32px;animation:settings-scan 8s linear infinite paused; }
.settings-motion-cursor { animation:settings-matrix 5.6s steps(1,end) infinite paused; }
.settings-motion-orbit--cross { animation-direction:reverse;animation-duration:10s;opacity:.35; }
.settings-motion-panel { transform-origin:44px 32px;animation:settings-shield-left 4.8s ease-in-out infinite paused; }
.settings-motion-panel--right { animation-name:settings-shield-right; }
.settings-motion-lock-scan { animation:settings-lock-scan 3.2s ease-in-out infinite paused; }
.settings-motion-cell { transform-box:fill-box;transform-origin:center;animation:settings-cell 3.6s ease-in-out infinite paused;animation-delay:calc(var(--cell) * -140ms); }
.settings-motion-cursor { fill:currentColor;fill-opacity:.22;stroke-width:2; }
.settings-motion-prism { transform-origin:44px 32px;animation:settings-prism 5s ease-in-out infinite paused; }
.settings-motion-packet { transform:translate(14px,32px);animation:settings-packet 4.2s linear infinite paused;animation-delay:calc(var(--packet) * -1.4s); }
#settings-modal .settings-motion-active .settings-motion-trace,
#settings-modal .settings-motion-active .settings-motion-scan,
#settings-modal .settings-motion-active .settings-motion-orbit,
#settings-modal .settings-motion-active .settings-motion-cursor,
#settings-modal .settings-motion-active .settings-motion-panel,
#settings-modal .settings-motion-active .settings-motion-lock-scan,
#settings-modal .settings-motion-active .settings-motion-cell,
#settings-modal .settings-motion-active .settings-motion-prism,
#settings-modal .settings-motion-active .settings-motion-packet { animation-play-state:running; }
#settings-modal .settings-motion-active h4 { animation:settings-arrive .45s ease-out both; }
#settings-modal .settings-motion-active:focus-within .settings-motion-outline,
#settings-modal .settings-motion-active:hover .settings-motion-outline { animation:settings-focus .6s ease-out; }
@keyframes settings-path { to { stroke-dashoffset:-165; } }
@keyframes settings-scan { to { transform:rotate(360deg); } }
@keyframes settings-matrix { 0%,100% { transform:translate(0,0); } 18% { transform:translate(24px,0); } 36% { transform:translate(24px,8px); } 54% { transform:translate(8px,16px); } 72% { transform:translate(32px,16px); } 90% { transform:translate(16px,24px); } }
@keyframes settings-arrive { from { opacity:.6;transform:translateY(4px); } to { opacity:1;transform:translateY(0); } }
@keyframes settings-focus { 50% { opacity:.6; } }
@keyframes settings-shield-left { 0%,15%,85%,100%{transform:translateX(0) rotate(0)} 45%,60%{transform:translateX(-5px) rotate(-7deg)} }
@keyframes settings-shield-right { 0%,15%,85%,100%{transform:translateX(0) rotate(0)} 45%,60%{transform:translateX(5px) rotate(7deg)} }
@keyframes settings-lock-scan { 0%,100%{transform:translateY(0);opacity:0} 15%,75%{opacity:.9} 85%{transform:translateY(16px);opacity:0} }
@keyframes settings-cell { 0%,15%,80%,100%{opacity:.2;transform:scale(.55)} 40%,55%{opacity:1;transform:scale(1)} }
@keyframes settings-prism { 0%,100%{transform:translateY(2px) rotate(-7deg)} 50%{transform:translateY(-4px) rotate(7deg)} }
@keyframes settings-packet { 0%,100%{transform:translate(14px,32px)} 17%{transform:translate(25px,16px)} 34%{transform:translate(64px,14px)} 51%{transform:translate(76px,32px)} 68%{transform:translate(65px,49px)} 85%{transform:translate(25px,50px)} }
body[data-theme="day"] #settings-modal .settings-motion-card { --settings-accent:#176a87; }
body[data-theme="day"] #settings-modal [data-settings-instrument="matrix"] { --settings-accent:#936023; }
body[data-theme="day"] #settings-modal [data-settings-instrument="route"] { --settings-accent:#6651a5; }
body[data-theme="day"] #settings-modal .settings-motion-card h4 { border-color:rgba(39,96,124,.23); }
@media(max-width:500px) { #settings-modal .settings-motion-card h4 { gap:9px; }.settings-motion-instrument { flex-basis:104px;width:104px;height:80px; } }
@media(prefers-reduced-motion:reduce) { #settings-modal .settings-motion-card * { animation:none!important; } }