/* Neutral display-only dimming. The app keeps its existing palette and layout.
   Source artwork, canvas data and exported files are never modified. */
.connected-root .topbar .live-top-actions .easy-on-eyes-button{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:5px;border:1px solid var(--live-line);border-radius:13px;background:var(--live-paper);color:var(--live-title);touch-action:manipulation}
.easy-on-eyes-button .icon{width:18px;height:18px;stroke-width:1.8}
.easy-on-eyes-switch{display:block;position:relative;width:14px;height:8px;border:1px solid currentColor;border-radius:9px;flex:none}
.easy-on-eyes-switch::after{content:"";position:absolute;left:1px;top:1px;width:4px;height:4px;border-radius:50%;background:currentColor}
.easy-on-eyes-button[aria-pressed="true"] .easy-on-eyes-switch::after{left:7px}
.easy-on-eyes-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.easy-on-eyes-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 28px));padding:26px;border:1px solid var(--line);border-radius:23px;background:var(--paper);color:var(--ink);font:15px/1.65 var(--getaway-ui,system-ui,sans-serif)}
.easy-on-eyes-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px}.easy-on-eyes-heading .icon{width:28px;height:28px;color:var(--purple)}
.easy-on-eyes-dialog h2{font:650 24px/1.2 var(--getaway-ui,system-ui,sans-serif);letter-spacing:-.6px}
.easy-on-eyes-dialog p+p{margin-top:12px}.easy-on-eyes-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.easy-on-eyes-actions button{min-height:44px;padding:10px 16px;border:1px solid var(--purple);border-radius:12px;background:var(--purple);color:#fff;font-weight:650}
.easy-on-eyes-actions [data-easy-close]{background:transparent;color:var(--ink)}
/* The root is deliberately filtered instead of body/an app wrapper: the root
   does not establish a new containing block for fixed-position descendants.
   Native modal dialogs live in the top layer (as siblings of the root's box),
   so each is dimmed once separately. Do not target [open] non-modal dialogs:
   those are already included in the root composite.
   A single equal RGB multiplier dims without recoloring. No overlays are added.
   Screen-only leaves printing/export rendering and forced-color preferences alone. */
@media screen and (forced-colors:none){
 html[data-easy-on-eyes="on"]{filter:brightness(.72)}
 html[data-easy-on-eyes="on"] dialog:modal,
 html[data-easy-on-eyes="on"] dialog:modal::backdrop{filter:brightness(.72)}
}
@media(forced-colors:active){.easy-on-eyes-button,.easy-on-eyes-dialog,.easy-on-eyes-actions button{background:Canvas!important;color:CanvasText!important;border:1px solid ButtonText!important}.easy-on-eyes-button[aria-pressed="true"]{outline:2px solid Highlight}.easy-on-eyes-switch::after{background:ButtonText}}