/* Sprit3Runn3r | MOTION INSTRUMENT | 2026-10-12
   Distinct graphite / spectral-indigo console treatment. UI chrome only.
   Pixels, viewport geometry, render targets, playback and workers untouched. */
:root{
 --sr-graphite:#090d19;
 --sr-violet:#a598ff;
 --sr-ultraviolet:#776df0;
 --sr-signal:#88e9e6;
 --sr-line:rgba(155,157,241,.29);
 --sr-soft:#b7c7dc;
 --cyan:#a9b0ff;
 --line:#535d99;
 --line2:#39476c;
 --panel:#131b2b;
 --panel2:#151d31;
 --glass:rgba(15,23,39,.94);
 --muted:#b4bdce;
}
html,body{background:#090d17!important;color:#f2f2ff}
html body .console{
 background:radial-gradient(ellipse 80% 40% at 50% -7%,rgba(95,98,169,.10),transparent 80%),#090d17;
}
html body .console-header,
html body :is(.screen,.panel,.timeline,.statusbar){
 border-color:rgba(151,157,233,.31)!important;
 background:linear-gradient(156deg,#192438f5,#0e1524f9 67%,#101625f9)!important;
 box-shadow:inset 0 1px rgba(225,224,255,.10),0 8px 24px #0005!important;
}
html body .console-header{
 background:linear-gradient(110deg,#25304af9,#121a2cfb 58%,#121b35f9)!important;
 border-color:rgba(177,176,247,.43)!important;
}
html body .brand h1{
 color:#f6f4ff!important;
 font-weight:850!important;
 letter-spacing:.095em!important;
}
html body .brand h1 span{color:#c7baff!important}
html body .brand small{color:#adb6ce!important;letter-spacing:.06em}
html body .brand-logo{
 border:1px solid rgba(159,150,247,.27);
 box-shadow:inset 0 1px rgba(246,238,255,.14),0 5px 17px #0005;
 background:#111a2d;
}
html body .online-dot{background:#83e7dc!important;box-shadow:0 0 8px #78e8dc58!important}
html body :is(.screen-header,.panel-head,.inspector-tabs){
 background:linear-gradient(105deg,#28314bf9,#141e30f9)!important;
 border-bottom-color:rgba(164,161,241,.30)!important;
}
html body :is(.screen-header i,.panel-head i){
 background:#9a9efb!important;box-shadow:0 0 8px rgba(156,157,249,.47)!important;
}
html body :is(.key,.tool,.module-button,.screen-actions button,.transport button,.inspector-tabs button,.timeline-actions button){
 border-color:rgba(145,151,221,.29)!important;
 background:linear-gradient(155deg,#27324b,#131d2f)!important;
 color:#dce1f3!important;
 box-shadow:inset 0 1px #eff3ff0c,0 3px 11px #0004;
}
html body :is(.key.primary,.tool.active,.module-button.primary,.mode-deck button.active,.inspector-tabs button.active,.frame-chip.active){
 background:linear-gradient(150deg,#39396a,#1c2a43)!important;
 color:#eeeaff!important;
 border-color:rgba(180,177,255,.80)!important;
 box-shadow:inset 0 1px #f2eaff20,0 0 0 1px #a6a0ff12!important;
}
html body :is(.inspector-tabs button.active,.frame-chip.active){color:#d3cdff!important}
html body :is(.screen,.panel,.timeline,.statusbar){border-radius:14px}
html body .canvas-wrap{
 /* Workspace is the dark matte; artwork canvases retain their original pixels. */
 background-color:#0d1524!important;
 border-color:rgba(121,140,206,.15);
}
html body .preview-wrap{background:#090f1c!important}
html body .cursor-readout{
 background:rgba(12,18,32,.95)!important;
 color:#c7ccfb!important;
 border-color:rgba(143,151,244,.40)!important;
 font-variant-numeric:tabular-nums;
}
html body .inspector{
 border-color:rgba(154,151,223,.34)!important;
 scrollbar-color:#444b79 #12192a;
}
html body .tab-panel{
 color:#dbe0f0;
}
html body :is(.tab-panel h2,.tab-panel h3,.panel-head){
 letter-spacing:.07em;
}
html body :is(.layer-list,.frame-strip){scrollbar-color:#535c89 #101a28}
html body .frame-chip{
 border-color:rgba(147,151,229,.28)!important;
 background:linear-gradient(148deg,#242b41,#111927)!important;
 color:#e5e9ff!important;
}
html body .frame-chip.active{border-color:#b7b0ff!important}
html body :is(.frame-chip b,.preview-counter,.telemetry b){
 font-variant-numeric:tabular-nums;
}
/* Clear selected functions without the harsher persistent neon glow. */
html body :is(.key,.tool,.module-button,.frame-chip):focus-visible,
html body #runn3rEdgeDock :is(button):focus-visible{
 outline:2px solid #beb8ff!important;
 outline-offset:3px!important;
}
html body .empty-state{color:#b1bace!important}
html body .empty-state span{color:#b2b4ff!important}
html body .empty-state button{
 border-color:#898de3!important;
 background:linear-gradient(145deg,#353864,#17253c)!important;
 color:#f0ecff!important;
}
html body .help-grid span{
 border-color:rgba(145,150,237,.30)!important;
 background:#151f31;
 color:#d3dbeb;
}
html body #helpDialog{
 border:1px solid rgba(155,150,243,.48)!important;
 background:linear-gradient(145deg,#242b44,#101a2c 69%)!important;
 box-shadow:0 24px 68px #000a,inset 0 1px rgba(240,237,255,.12);
}
/* The floating control instrument: clean chamfered lavender light,
   matching Pan3l's ergonomics but NOT Pan3l's material palette. */
html body #runn3rEdgeDock .rd-tab,
html body #runn3rEdgeDock .rd-capsule{
 background:linear-gradient(148deg,#313a5cfa,#121d32fd 58%,#121729fb)!important;
 border-color:rgba(164,160,245,.70)!important;
 box-shadow:inset 0 1px rgba(233,235,255,.20),inset 0 -2px rgba(91,96,185,.16),0 13px 38px #000b!important;
 color:#f4f1ff!important;
}
html body #runn3rEdgeDock .rd-grip{
 background:linear-gradient(145deg,#423f79,#252c50)!important;
 border-color:rgba(162,163,247,.52)!important;
 color:#e4dfff!important;
}
html body #runn3rEdgeDock .rd-heading{
 color:#cbc3ff!important;letter-spacing:.19em;font-variant-numeric:tabular-nums;
}
html body #runn3rEdgeDock :is(.rd-control,.rd-nav button,.rd-action,.rd-foot button){
 color:#e4e7ff!important;
 background:linear-gradient(140deg,#293651,#151e32)!important;
 border-color:rgba(147,154,232,.38)!important;
}
html body #runn3rEdgeDock .rd-nav button.selected{
 color:#f2eeff!important;
 background:linear-gradient(135deg,#4c477f,#263658)!important;
 border-color:rgba(189,180,255,.80)!important;
}
html body #runn3rEdgeDock .rd-action span:first-child{color:#aef4eb!important}
html body :is(.atelier-palette-dialog,.runn3r-clarity-menu){
 background:linear-gradient(155deg,#26304a,#101827 68%)!important;
 border-color:rgba(171,166,243,.51)!important;
 color:#f4f4ff!important;
}
html body .runn3r-clarity-group h3{color:#bcb7ff!important}
html body .runn3r-clarity-group button{
 background:#19283c!important;
 border-color:rgba(156,154,229,.33)!important;
}
html body .creator-recovery-status{
 color:#c6dddf!important;
 border-color:rgba(131,226,221,.34)!important;
 background:#153039!important;
}
html body :is(.runn3r-mode-switch button[aria-pressed="true"],.runn3r-mode-switch button.active){
 color:#d9d1ff!important;
 border-color:rgba(163,158,248,.70)!important;
}
@media(hover:hover) and (pointer:fine){
 html body :is(.tool,.module-button,.key,.frame-chip):hover:not(:disabled){
  border-color:rgba(199,189,255,.72)!important;
 }
 html body #runn3rEdgeDock .rd-action:hover{border-color:#afa9ff!important}
}
@media(max-width:650px){
 html body #runn3rEdgeDock .rd-capsule{border-radius:20px}
 html body .console-header .brand h1{letter-spacing:.05em!important}
}
@media(prefers-reduced-motion:reduce){
 html body :is(.tool,.key,.rd-action,.module-button){animation:none!important;transition:none!important}
}


/* PRIME SIGNATURE | Motion workstation Studio chrome authority.
   Retain the original canvas, rendering, and inspector behavior. */
html[data-runn3r-app="sprite"][data-runn3r-effective="studio"] body .console-header{
 background:linear-gradient(112deg,#303553f8,#141c2efb 58%,#161c38fa)!important;
 border-color:rgba(170,163,247,.45)!important;
 box-shadow:inset 0 1px rgba(241,237,255,.16),0 9px 28px #0006!important;
}
html[data-runn3r-app="sprite"][data-runn3r-effective="studio"] body :is(.screen,.panel,.timeline,.statusbar){
 background:linear-gradient(150deg,#1a243af7,#0d1525fc 75%)!important;
 border-color:rgba(156,151,238,.34)!important;
 box-shadow:inset 0 1px rgba(222,219,255,.10),0 7px 22px #0005!important;
}
html[data-runn3r-app="sprite"][data-runn3r-effective="studio"] body :is(.screen-header,.panel-head,.inspector-tabs){
 background:linear-gradient(105deg,#2d3253,#151d30 68%)!important;
 border-bottom-color:rgba(173,162,247,.37)!important;
}
html[data-runn3r-app="sprite"][data-runn3r-effective="studio"] body .inspector{
 border-color:rgba(173,162,244,.42)!important;
}
html[data-runn3r-app="sprite"][data-runn3r-effective="studio"] body :is(.console-header .key,.tool-rail .tool,.inspector-tabs button){
 border-color:rgba(150,152,230,.34)!important;
 background:linear-gradient(145deg,#293451,#151e32)!important;
 color:#e8e9fc!important;
}
html[data-runn3r-app="sprite"][data-runn3r-effective="studio"] body :is(.tool-rail .tool.active,.inspector-tabs button.active,.console-header .key.primary){
 border-color:rgba(193,182,255,.77)!important;
 background:linear-gradient(145deg,#4b457e,#233451)!important;
 color:#f7f1ff!important;
}