/* ========================================================================== DESIGN TOKENS Every colour, font and timing the HUD reuses lives here. Changing the theme is a single-block edit instead of a find-and-replace across the file. ========================================================================== */ :root { /* Palette */ --cyan: #00ffff; --green: #00ff00; --magenta: #ff00ff; --amber: #ffaa00; --red: #ff0000; --red-soft: #ff6666; --white: #fff; --black: #000; /* Indigo/violet accent used by the AI surfaces */ --ai-indigo: #6366f1; --ai-violet: #8b5cf6; --ai-lavender: #a78bfa; /* Neutrals */ --text-muted: #a0a0a0; --text-dim: #ccc; --text-body: #e0e0e0; --border-dim: #444; --border-mid: #666; /* Surfaces */ --panel-bg: rgba(0, 20, 40, 0.85); --panel-bg-solid: rgba(0, 20, 40, 0.95); --row-bg: rgba(0, 50, 100, 0.3); --row-bg-hover: rgba(0, 50, 100, 0.5); --input-bg: rgba(0, 50, 100, 0.8); --scrim: rgba(0, 0, 0, 0.85); /* Type */ --font-mono: 'Courier New', monospace; /* Motion */ --transition: all 0.3s; /* Layering — named so stacking order is reviewable in one place */ --z-map: 1; --z-credit: 500; --z-panel: 1000; --z-mobile-overlay: 1999; --z-fab: 2000; --z-error: 2000; --z-modal: 3000; /* Minimum comfortable touch target (WCAG 2.5.5 / Apple HIG) */ --tap-target: 44px; } /* ========================================================================== RESET & BASE ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-mono); background-color: var(--black); color: var(--green); overflow: hidden; } /* ========================================================================== UTILITIES ========================================================================== */ .icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 8px; } .icon-lg { width: 20px; height: 20px; } /* The definitions at the top of . Hidden, but still referable by . */ .svg-sprite { display: none; } /* Shown only when JavaScript is disabled, so it is styled here rather than with an inline style block. */ .noscript-box { max-width: 640px; margin: 40px auto; padding: 24px; font-family: var(--font-mono); color: var(--green); background: var(--black); border: 1px solid var(--green); } .noscript-box h2 { margin-bottom: 12px; } .noscript-box p { margin-bottom: 10px; line-height: 1.5; } /* Content available to screen readers but visually hidden. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== MAP ========================================================================== */ #map { position: absolute; top: 0; left: 0; width: 100%; /* dvh tracks the *small* viewport on mobile, so the map bottom (and the Leaflet attribution) is never hidden under a collapsing browser toolbar. The vh value is the fallback for browsers without dvh support. */ height: 100vh; height: 100dvh; z-index: var(--z-map); /* Zoomed all the way out the world no longer fills a tall phone screen; without this, Leaflet's default light-grey container shows through. */ background: var(--black); } /* Map popups quote attacker-controlled strings (usernames, city names). */ .leaflet-popup-content { overflow-wrap: anywhere; } /* Popup body — was an inline style string built per marker in JS. */ .popup-body { font-family: var(--font-mono); color: var(--black); } .popup-title { color: var(--red); } /* ========================================================================== HUD PANELS ========================================================================== */ .hud-panel { position: absolute; background: var(--panel-bg); border: 2px solid var(--cyan); border-radius: 8px; padding: 15px; z-index: var(--z-panel); backdrop-filter: blur(10px); box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } .hud-panel h2 { color: var(--cyan); font-size: 18px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid var(--cyan); padding-bottom: 5px; } /* Panel placement (desktop) */ #stats-panel { top: 90px; /* Moved down to avoid zoom controls */ left: 20px; width: 340px; } #target-panel { top: 20px; right: 20px; width: 280px; } #username-panel { top: 240px; right: 20px; width: 280px; } #history-panel { bottom: 20px; right: 20px; width: 320px; } #ai-panel { bottom: 20px; left: 20px; width: 380px; max-height: 500px; overflow-y: auto; } /* ========================================================================== LEADERBOARD (top attacking countries) ========================================================================== */ .leaderboard-item { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; padding: 8px; background: var(--row-bg); border-left: 3px solid var(--cyan); border-radius: 4px; transition: var(--transition); } .leaderboard-item:hover { background: var(--row-bg-hover); border-left-width: 5px; } .leaderboard-rank { font-size: 18px; font-weight: bold; color: var(--cyan); min-width: 30px; } .leaderboard-country { flex: 1; color: var(--green); font-size: 14px; margin: 0 10px; /* Long GeoIP names ("Venezuela, Bolivarian Republic of") wrap safely. */ min-width: 0; overflow-wrap: anywhere; } .leaderboard-count { color: var(--red-soft); font-weight: bold; font-size: 16px; min-width: 60px; text-align: right; flex-shrink: 0; white-space: nowrap; } .leaderboard-bar { height: 4px; background: linear-gradient(90deg, var(--red), var(--red-soft)); margin-top: 4px; border-radius: 2px; transition: width 0.5s ease; } /* ========================================================================== USERNAME LEADERBOARD ========================================================================== */ .username-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; padding: 6px 8px; background: rgba(50, 0, 100, 0.3); border-left: 3px solid var(--magenta); border-radius: 4px; font-size: 13px; transition: var(--transition); cursor: pointer; } .username-item:hover { background: rgba(50, 0, 100, 0.5); border-left-width: 5px; transform: translateX(3px); } .username-name { color: var(--magenta); font-weight: bold; font-family: var(--font-mono); /* Usernames are attacker-controlled and can be long unbroken strings (e.g. BC_PUEBLA@HOTMAIL.COM) — wrap them instead of pushing the count off the right edge of the panel on mobile. */ min-width: 0; overflow-wrap: anywhere; } .username-count { color: var(--amber); font-weight: bold; /* Keep "N IPs" on one line and never let it get shoved off-screen. */ flex-shrink: 0; white-space: nowrap; } /* ========================================================================== TARGET INFO PANEL ========================================================================== */ #target-panel p { color: var(--green); font-size: 14px; margin: 5px 0; } .target-label { color: var(--cyan); font-weight: bold; } .status-online { color: var(--green); } /* ========================================================================== FORM CONTROLS One shared date-input style; #date-picker and the AI modal inputs differ only by accent colour. ========================================================================== */ .date-input { width: 100%; padding: 8px; background: var(--input-bg); border: 1px solid var(--cyan); color: var(--green); font-family: var(--font-mono); border-radius: 4px; cursor: pointer; /* Native date widgets have an intrinsic minimum width on iOS; never let them force their container wider than the panel. */ min-width: 0; max-width: 100%; } .date-input::-webkit-calendar-picker-indicator { filter: invert(1); } .field-label { display: block; margin-bottom: 5px; color: #888; font-size: 12px; } #date-picker { margin-top: 10px; } .mode-indicator { display: inline-block; padding: 3px 8px; background: var(--green); color: var(--black); font-size: 11px; border-radius: 3px; font-weight: bold; margin-left: 10px; } .mode-indicator.live { background: var(--green); animation: pulse 2s infinite; } .mode-indicator.history { background: var(--amber); } /* ========================================================================== META ROWS (auto-refresh countdown + last updated) ========================================================================== */ .auto-refresh, .update-time { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0, 255, 255, 0.2); font-size: 11px; color: var(--text-muted); } .auto-refresh { display: flex; align-items: center; gap: 8px; } .update-time { margin-top: 15px; border-top-color: rgba(0, 255, 255, 0.3); text-align: center; } .auto-refresh strong, .update-time-value { color: var(--cyan); font-weight: bold; } /* ========================================================================== AI PANEL + MODAL CONTROLS ========================================================================== */ .ai-blurb { color: var(--text-dim); font-size: 12px; margin-bottom: 10px; } .btn-ai-open { width: 100%; padding: 10px; background: rgba(99, 102, 241, 0.2); border: 1px solid var(--ai-indigo); color: var(--ai-lavender); border-radius: 4px; cursor: pointer; font-family: var(--font-mono); font-weight: bold; transition: var(--transition); } .btn-ai-open:hover { background: rgba(99, 102, 241, 0.35); color: var(--white); } .ai-controls { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; justify-content: center; margin-bottom: 20px; background: var(--row-bg); padding: 20px; border-radius: 6px; } .ai-date-group { flex: 1; min-width: 140px; } .ai-controls .date-input { padding: 10px; border-color: var(--ai-indigo); color: var(--white); } .ai-vs { color: var(--ai-indigo); font-weight: bold; font-size: 18px; padding-bottom: 8px; /* Visual alignment with inputs */ } #ai-compare-btn { width: 100%; /* Force the button onto its own full-width row inside the flex .ai-controls */ flex-basis: 100%; padding: 12px; margin-top: 10px; background: linear-gradient(135deg, var(--ai-indigo), var(--ai-violet)); border: none; color: var(--white); font-family: var(--font-mono); font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px; } #ai-compare-btn:hover { background: linear-gradient(135deg, var(--ai-violet), var(--ai-lavender)); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); } #ai-compare-btn:disabled { background: var(--border-dim); cursor: not-allowed; transform: none; box-shadow: none; } /* The button's icon slot: JS swaps the icon for a spinner and hides the label while a request is in flight, so it never rebuilds the button's markup. */ #ai-compare-btn .btn-icon { display: inline-flex; align-items: center; } #ai-compare-btn .btn-icon .icon { margin-right: 0; } #ai-compare-btn.is-loading .btn-label { display: none; } /* ========================================================================== AI RESULTS ========================================================================== */ #ai-results-area { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-dim); border-radius: 6px; padding: 20px; min-height: 200px; max-height: 400px; overflow-y: auto; margin-bottom: 20px; font-size: 14px; line-height: 1.6; color: var(--text-body); /* AI output quotes attacker data (long usernames, IPv6 addresses). overflow-wrap inherits, so every generated element wraps long tokens instead of stretching the grid past the modal edge on phones. */ overflow-wrap: anywhere; } /* Grid/flex children may never refuse to shrink inside the results area. */ #ai-results-area * { min-width: 0; } #ai-results-area h1, #ai-results-area h2, #ai-results-area h3 { color: var(--ai-lavender); margin: 15px 0 10px; } #ai-results-area ul { margin-left: 25px; margin-bottom: 15px; } #ai-results-area li { margin-bottom: 5px; } #ai-results-area strong { color: var(--cyan); } /* Placeholder + result blocks — previously inline styles built in JS. */ .ai-placeholder { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--text-muted); font-style: italic; } .ai-summary { margin-bottom: 20px; padding: 15px; background: rgba(99, 102, 241, 0.1); border-left: 4px solid var(--ai-indigo); border-radius: 4px; } .ai-summary h4 { margin: 0 0 5px; color: var(--ai-lavender); text-transform: uppercase; font-size: 12px; } .ai-summary p { margin: 0; color: var(--white); font-size: 15px; font-weight: 500; } .ai-sections { display: grid; gap: 20px; } .ai-section h4 { color: var(--cyan); margin-bottom: 8px; border-bottom: 1px solid rgba(0, 255, 255, 0.2); padding-bottom: 4px; } .ai-loading { display: flex; align-items: center; gap: 10px; color: var(--ai-lavender); } /* Centred, stacked variant used while the analysis request is in flight. */ .ai-loading-full { justify-content: center; height: 100%; flex-direction: column; } .ai-loading-full .ai-spinner { width: 40px; height: 40px; border-width: 4px; margin-bottom: 15px; } .ai-loading-label { color: var(--ai-lavender); font-size: 16px; } .ai-spinner { width: 20px; height: 20px; border: 2px solid var(--ai-indigo); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .ai-error { color: var(--red-soft); padding: 10px; background: rgba(255, 0, 0, 0.1); border-radius: 4px; } .ai-error-full { text-align: center; margin-top: 50px; } /* ========================================================================== MODALS #username-modal and #ai-modal were near-identical; the shared behaviour now lives on .modal / .modal-content and each modal only sets its accent. ========================================================================== */ .modal { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; } /* Open state is a class rather than an inline style written from JS, which keeps every visual rule in this file. */ .modal.is-open { display: flex; } .modal-content { background: var(--panel-bg-solid); border: 2px solid var(--accent); border-radius: 8px; padding: 25px; width: 90%; max-height: 70vh; overflow-y: auto; box-shadow: 0 0 20px var(--accent-glow); /* Titles and rows quote attacker-controlled usernames/IPs — wrap them. */ overflow-wrap: anywhere; } .modal-content h3 { color: var(--accent); margin-bottom: 15px; font-size: 20px; border-bottom: 2px solid var(--accent); padding-bottom: 10px; } .modal-content::-webkit-scrollbar, .modal-content *::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track, .modal-content *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5); } .modal-content::-webkit-scrollbar-thumb, .modal-content *::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } /* Username modal — magenta accent */ #username-modal { --accent: var(--magenta); --accent-glow: rgba(255, 0, 255, 0.3); } /* Header / scrolling list / footer, instead of scrolling the whole dialog: the IP list can run to 90+ rows, which pushed the Close button ~7000px down and made it unreachable without scrolling past every row. */ #username-modal-content { max-width: 600px; display: flex; flex-direction: column; overflow: hidden; } #username-modal-list { overflow-y: auto; /* min-height:0 lets this flex child actually shrink so the footer stays put. */ min-height: 0; } /* AI modal — indigo accent, taller and column-flexed for the results pane */ #ai-modal { --accent: var(--ai-indigo); --accent-glow: rgba(99, 102, 241, 0.4); } #ai-modal-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; } #ai-modal-content h3 { color: var(--ai-lavender); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .username-detail-item { background: var(--row-bg); border-left: 3px solid var(--cyan); padding: 10px; margin: 8px 0; border-radius: 4px; } .username-detail-item .ip { color: var(--red-soft); font-weight: bold; font-size: 14px; } .username-detail-item .location { color: var(--green); font-size: 13px; } .username-detail-item .attempts { color: var(--amber); font-size: 13px; } .empty-note { color: #888; } #username-modal-close { margin-top: 20px; padding: 10px 20px; background: rgba(255, 0, 255, 0.2); border: 1px solid var(--magenta); color: var(--magenta); cursor: pointer; border-radius: 4px; font-family: var(--font-mono); width: 100%; min-height: var(--tap-target); transition: var(--transition); } #username-modal-close:hover { background: rgba(255, 0, 255, 0.4); } .modal-buttons { display: flex; justify-content: flex-end; gap: 10px; /* On a short screen the AI dialog's own content can overflow; pinning the footer keeps Close on screen instead of below the scroll. */ position: sticky; bottom: 0; background: var(--panel-bg-solid); padding-top: 10px; } .btn-secondary { background: transparent; border: 1px solid var(--border-mid); color: var(--text-dim); padding: 10px 20px; border-radius: 6px; cursor: pointer; transition: var(--transition); font-family: var(--font-mono); min-height: var(--tap-target); } .btn-secondary:hover { border-color: var(--white); color: var(--white); } /* ========================================================================== ERROR MESSAGE ========================================================================== */ #error-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(139, 0, 0, 0.9); color: var(--white); padding: 20px 40px; border: 2px solid var(--red); border-radius: 8px; z-index: var(--z-error); display: none; text-align: center; /* Never let a long error string overflow a phone screen. */ max-width: min(90vw, 480px); overflow-wrap: anywhere; } #error-message h3 { margin-bottom: 10px; color: var(--red-soft); } .error-icon { display: block; margin: 0 auto 10px; } /* ========================================================================== LOADING INDICATOR ========================================================================== */ .loading { color: var(--cyan); font-style: italic; animation: blink 1s infinite; } /* ========================================================================== MARKERS & CLUSTERS ========================================================================== */ .attack-marker { animation: markerGlow 0.8s ease-out; filter: drop-shadow(0 0 8px currentColor); transform-box: fill-box; transform-origin: center; /* No `will-change` here: it was promoting every one of ~100+ markers to its own compositor layer permanently, for a one-shot 0.8s entry animation. That is a large, persistent GPU-memory cost on phones for no benefit. */ } /* Severity drives the glow via `color` (the drop-shadow above uses currentColor). Doing it in CSS replaced a per-marker 'add' listener that wrote element.style.color for all ~100+ markers on every refresh. */ .attack-marker.sev-critical { color: #ff0000; } .attack-marker.sev-high { color: #ff6600; } .attack-marker.sev-medium { color: #ffaa00; } .attack-marker.sev-low { color: #00ff00; } .marker-cluster { border: 2px solid var(--white); box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); } .marker-cluster div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 15px; font: 12px var(--font-mono); font-weight: bold; color: var(--black); line-height: 30px; } .marker-cluster-small { background-color: rgba(0, 255, 0, 0.6); } .marker-cluster-small div { background-color: rgba(0, 255, 0, 0.8); } .marker-cluster-medium { background-color: rgba(255, 170, 0, 0.6); } .marker-cluster-medium div { background-color: rgba(255, 170, 0, 0.8); } .marker-cluster-large { background-color: rgba(255, 0, 0, 0.6); } .marker-cluster-large div { background-color: rgba(255, 0, 0, 0.8); } /* ========================================================================== MOBILE TOGGLE (FAB) ========================================================================== */ #mobile-toggle { display: none; position: fixed; /* viewport-fit=cover lets the page extend under the iOS home indicator; the inset keeps the button clear of it. */ bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), #0088ff); border: 3px solid var(--white); box-shadow: 0 4px 20px rgba(0, 255, 255, 0.6); z-index: var(--z-fab); cursor: pointer; align-items: center; justify-content: center; transition: var(--transition); } #mobile-toggle:active { transform: scale(0.9); } #mobile-toggle svg { width: 28px; height: 28px; stroke: var(--black); stroke-width: 2.5; fill: none; } /* The FAB doubles as the close control, so it swaps to an X while open. */ #mobile-toggle .icon-close, body.mobile-open #mobile-toggle .icon-open { display: none; } body.mobile-open #mobile-toggle .icon-close { display: block; } /* ========================================================================== MOBILE LAYOUT On mobile the single set of HUD panels is reflowed into a scrollable overlay toggled by #mobile-toggle (body.mobile-open). No cloning — one set of panels, so no duplicate element IDs. The max-height clause matters as much as max-width: a landscape phone is ~844x390, which is WIDER than 768px, so a width-only query left it on the desktop layout — five absolutely-positioned panels stacked into 390px of height, overflowing a that has overflow:hidden and therefore cannot be scrolled to reach them. ========================================================================== */ @media (max-width: 768px), (max-height: 500px) { #mobile-toggle { display: flex; } /* While the overlay is open the FAB moves to the top-right, where the overlay reserves empty space for it. Pinned bottom-right it sat on top of the panel rows (it was covering the username counts mid-scroll). */ body.mobile-open #mobile-toggle { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; right: calc(12px + env(safe-area-inset-right, 0px)); } /* Hide the corner HUD panels until the mobile menu is opened */ .hud-panel { display: none; } body.mobile-open #hud-panels { position: fixed; inset: 0; z-index: var(--z-mobile-overlay); overflow-y: auto; -webkit-overflow-scrolling: touch; /* Don't chain the overlay's scroll to the map/page behind it. */ overscroll-behavior: contain; background: rgba(0, 0, 0, 0.9); /* Top padding clears the docked FAB; bottom clears the home indicator. */ padding: calc(80px + env(safe-area-inset-top, 0px)) 15px calc(40px + env(safe-area-inset-bottom, 0px)); animation: fadeIn 0.2s; } body.mobile-open #hud-panels .hud-panel { display: block; position: static; width: 100%; margin-bottom: 15px; font-size: 12px; padding: 12px; /* #ai-panel carries a desktop max-height/overflow-y; inside the overlay that would make a second scroll region nested in the first. */ max-height: none; overflow: visible; } body.mobile-open #hud-panels .hud-panel h2 { font-size: 14px; } /* Username rows are tappable (role="button"); 27px was well under the 44px minimum touch target. */ .username-item { min-height: var(--tap-target); padding: 10px 8px; } #username-modal-content { max-width: 90%; padding: 15px; } /* Give the AI modal nearly the full phone width and trim its padding so the date controls and results have room to breathe. */ #ai-modal-content { width: calc(100% - 20px); padding: 15px; max-height: 90vh; } .ai-controls { padding: 12px; } /* Two 140px date groups plus "VS" cannot share a ~307px row, so the flex row wrapped "VS" alongside the baseline input. Stack them instead and centre "VS" on its own row between the two dates. */ .ai-date-group { flex: 1 1 100%; min-width: 0; } .ai-vs { flex-basis: 100%; text-align: center; padding-bottom: 0; } /* 16px stops iOS Safari from auto-zooming the page when a date field is focused — the zoomed viewport is what made the AI tool and Historical Data panel look like they overflowed off the right edge of the screen. */ .date-input { font-size: 16px; min-height: var(--tap-target); } /* The two primary actions came out at 37px and 40px, under the minimum. (The panel's 12px mobile font shrinks the padding-driven height.) */ .btn-ai-open, #ai-compare-btn { min-height: var(--tap-target); } /* Leaflet ships 30px zoom buttons — too small for a thumb. */ .leaflet-touch .leaflet-bar a, .leaflet-control-zoom a { width: var(--tap-target); height: var(--tap-target); line-height: var(--tap-target); font-size: 20px; } } /* ========================================================================== SITE CREDIT ========================================================================== */ #site-credit { position: fixed; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: var(--z-credit); font-family: var(--font-mono); font-size: 11px; color: var(--green); opacity: 0.65; pointer-events: none; padding: 2px 8px; background: rgba(0, 0, 0, 0.45); border-radius: 4px; /* keep clear of iOS home indicator / notch */ margin-bottom: env(safe-area-inset-bottom, 0); } #site-credit a { color: var(--green); text-decoration: underline; pointer-events: auto; } #site-credit a:hover { color: var(--white); } /* On mobile the Leaflet attribution fills the bottom edge, so move the credit up to the top-center where there is clear space (avoids overlapping attribution). */ @media (max-width: 768px), (max-height: 500px) { #site-credit { bottom: auto; top: calc(8px + env(safe-area-inset-top, 0px)); margin-bottom: 0; } } /* ========================================================================== ANIMATIONS ========================================================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.5; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes markerGlow { 0% { opacity: 0; filter: drop-shadow(0 0 0px currentColor); } 50% { opacity: 0.8; filter: drop-shadow(0 0 20px currentColor); } 100% { opacity: 1; filter: drop-shadow(0 0 8px currentColor); } } /* ========================================================================== ACCESSIBILITY ========================================================================== */ /* Visible keyboard focus indicator across all interactive elements. */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Respect users who prefer reduced motion (disables pulse/blink/spin/glow). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }