/* ============================================================================= Theme Service — effects.css (finalized). The "90s skating rink" neon recipes, expressed purely as tokens so they work identically across every theme. Pair with theme.css (colors) + components.css (component styles). Scoped to :root so it applies app-wide once included. The token blocks below also list [data-palette]. Custom properties compute WHERE THEY ARE DECLARED, so a glow derived at :root would bake in :root's accents and inherit that one result everywhere. The palette discovery page (discovery/draft-N/index.html) puts a different set of --accent-* on each [data-palette] section and no colors on :root at all, so it needs the derivation to happen again on those elements. Nothing else changes: a consuming app has no [data-palette] anywhere, and this is what lets the discovery page run THIS file instead of a fork of it. ============================================================================= */ /* --glow-strength is theme.css's to set — 1 on dark themes, 0.35 on light. The declaration below is only a fallback for effects.css loaded WITHOUT theme.css, so it has to LOSE to every [data-theme] block. :where() is what makes it lose. Declared plainly in the :root block below it tied with [data-theme="…"] — both are specificity (0,1,0) — and won on source order, because every page loads effects.css after theme.css. That pinned the whole site to full glow and made the light themes' 0.35 dead code for as long as it stood. :where() drops this to (0,0,0), so any theme now overrides it and the fallback still applies when no theme.css is present. The discovery page's generated palette files declare their own per section, and must win the same way. */ :where(:root, [data-palette]) { --glow-strength: 1; } :root, [data-palette] { /* Motion gate: 1 = animations on, 0 = off (flipped by reduced-motion + toggle below). No theme sets it, and the reduced-motion rules that flip it are in this file. */ --motion: 1; /* Retro crossing-gradient grid backdrop colors (subdued). */ --grid-line-h: color-mix(in srgb, var(--accent-blue) 10%, transparent); --grid-line-v: color-mix(in srgb, var(--accent-pink) 8%, transparent); /* Text-shadow neon glow (tight core + wide halo), per accent — for HEADINGS. */ --tglow-pink: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 45%, transparent); --tglow-green: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 45%, transparent); --tglow-blue: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 45%, transparent); --tglow-purple: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple)45%, transparent); /* Per heading level (.t-h1 … .t-h4). --accent-h1 … h4 are whichever accents the theme names for them (palette field `headings`; pink, green, blue, purple unless set); the fallbacks keep a theme.css built before those tokens existed on them. */ --tglow-h1: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-h1, var(--accent-pink)) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-h1, var(--accent-pink)) 45%, transparent); --tglow-h2: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-h2, var(--accent-green)) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-h2, var(--accent-green)) 45%, transparent); --tglow-h3: 0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--accent-h3, var(--accent-blue)) 90%, transparent), 0 0 calc(15px * var(--glow-strength)) color-mix(in srgb, var(--accent-h3, var(--accent-blue)) 45%, transparent); --tglow-h4-sm: 0 0 calc(4px * var(--glow-strength)) color-mix(in srgb, var(--accent-h4, var(--accent-purple)) 40%, transparent); /* Reduced glow for SMALL text (labels, notices, badges, status, mono). */ --tglow-pink-sm: 0 0 calc(4px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 40%, transparent); --tglow-green-sm: 0 0 calc(4px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 40%, transparent); --tglow-blue-sm: 0 0 calc(4px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 40%, transparent); --tglow-purple-sm: 0 0 calc(4px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple) 40%, transparent); /* Box-shadow "lit tube" glow (outer + inset), per accent. */ --bglow-pink: 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 55%, transparent), inset 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 18%, transparent); --bglow-green: 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 55%, transparent), inset 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 18%, transparent); --bglow-blue: 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 55%, transparent), inset 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 18%, transparent); --bglow-purple: 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple) 55%, transparent), inset 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple) 18%, transparent); /* Doubled glow for :hover on solid/outline controls. */ --bglow-pink-hi: 0 0 calc(16px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 70%, transparent), inset 0 0 calc(12px * var(--glow-strength)) color-mix(in srgb, var(--accent-pink) 25%, transparent); --bglow-green-hi: 0 0 calc(16px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 70%, transparent), inset 0 0 calc(12px * var(--glow-strength)) color-mix(in srgb, var(--accent-green) 25%, transparent); --bglow-blue-hi: 0 0 calc(16px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 70%, transparent), inset 0 0 calc(12px * var(--glow-strength)) color-mix(in srgb, var(--accent-blue) 25%, transparent); --bglow-purple-hi: 0 0 calc(16px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple) 70%, transparent), inset 0 0 calc(12px * var(--glow-strength)) color-mix(in srgb, var(--accent-purple) 25%, transparent); } /* ----------------------------------------------------------------------------- Motion off — two ways, both resolve to --motion: 0. Our components gate motion through this token (see --dur / --press in components.css), so no blanket !important reset is needed — a host app's own animations are left untouched. The [data-palette] halves are for the discovery page only: because that page's sections re-declare --motion above, an ancestor's 0 would not reach them. ----------------------------------------------------------------------------- */ [data-motion="off"], [data-motion="off"] [data-palette] { --motion: 0; } @media (prefers-reduced-motion: reduce) { :root, [data-palette] { --motion: 0; } } /* ----------------------------------------------------------------------------- Reusable effect classes ----------------------------------------------------------------------------- */ /* Page backdrop — decorative, non-interactive. Each theme picks its pattern: - the retro grid (the default): faint crossing neon lines; - rain: falling columns of glyphs, as in The Matrix. A theme turns it on by setting --fx-backdrop-image: none, --fx-backdrop-color (the glyphs' color), --fx-backdrop-mask: var(--fx-rain) and --fx-backdrop-anim: fx-rain; theme.css does this for a palette with `backdrop: 'rain'`, and resets all four to `initial` (the grid) for every other. --fx-grid-opacity is the strength of either (0 = off, ~0.4 = pronounced; default 0.22). The rain's brightest glyph over the page is validated like a surface (tools/palette-checks.mjs), since text sits straight on it. It falls only while motion is on: the motion toggle and prefers-reduced-motion both hold it still, which is the pause WCAG 2.2.2 asks of anything moving for more than five seconds. */ :root { /* rain:begin */ /* GENERATED by tools/rain.mjs — edit that file, then `node tools/rain.mjs --write`. */ --fx-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='640'%3E%3Cstyle%3Etext{font:13px 'MS Gothic','Hiragino Kaku Gothic ProN','Noto Sans Mono CJK JP',monospace}.a1{fill-opacity:0.05}.a2{fill-opacity:0.1}.a3{fill-opacity:0.15}.a4{fill-opacity:0.2}.a5{fill-opacity:0.25}.a6{fill-opacity:0.3}.a7{fill-opacity:0.35}.a8{fill-opacity:0.4}.a9{fill-opacity:0.45}.a10{fill-opacity:0.5}.a11{fill-opacity:0.55}.a12{fill-opacity:0.6}.a13{fill-opacity:0.65}.a14{fill-opacity:0.7}%3C/style%3E%3Cg transform='matrix(-1 0 0 1 440 0)'%3E%3Cg transform='translate(2)'%3E%3Ctext y='397'%3E&%2365409;%3C/text%3E%3Ctext y='381' class='a13'%3E:%3C/text%3E%3Ctext y='365' class='a12'%3E&%2365403;%3C/text%3E%3Ctext y='349' class='a11'%3E&%2365399;%3C/text%3E%3Ctext y='333' class='a10'%3E&%2365421;%3C/text%3E%3Ctext y='317' class='a9'%3E&%2365390;%3C/text%3E%3Ctext y='301' class='a9'%3E1%3C/text%3E%3Ctext y='285' class='a8'%3E&%2365410;%3C/text%3E%3Ctext y='269' class='a7'%3E&%2365387;%3C/text%3E%3Ctext y='253' class='a6'%3E&%2365415;%3C/text%3E%3Ctext y='237' class='a5'%3E.%3C/text%3E%3Ctext y='221' class='a5'%3E&%2365402;%3C/text%3E%3Ctext y='205' class='a4'%3E>%3C/text%3E%3Ctext y='189' class='a3'%3E&%2365433;%3C/text%3E%3Ctext y='173' class='a2'%3E&%2365407;%3C/text%3E%3Ctext y='157' class='a2'%3E&%2365433;%3C/text%3E%3Ctext y='141' class='a1'%3E8%3C/text%3E%3Ctext y='77'%3E&%2365404;%3C/text%3E%3Ctext y='61' class='a13'%3EZ%3C/text%3E%3Ctext y='45' class='a12'%3E&%2365420;%3C/text%3E%3Ctext y='29' class='a11'%3E&%2365436;%3C/text%3E%3Ctext y='13' class='a10'%3E&%2365411;%3C/text%3E%3Ctext y='637' class='a9'%3E&%2365395;%3C/text%3E%3Ctext y='621' class='a8'%3E4%3C/text%3E%3Ctext y='605' class='a7'%3E&%2365436;%3C/text%3E%3Ctext y='589' class='a6'%3E&%2365419;%3C/text%3E%3Ctext y='573' class='a5'%3E&%2365399;%3C/text%3E%3Ctext y='557' class='a4'%3E&%2365436;%3C/text%3E%3Ctext y='541' class='a3'%3E-%3C/text%3E%3Ctext y='525' class='a3'%3E&%2365433;%3C/text%3E%3Ctext y='509' class='a2'%3E"%3C/text%3E%3Ctext y='493' class='a1'%3E&%2365435;%3C/text%3E%3Ctext y='477' class='a1'%3E&%2365399;%3C/text%3E%3C/g%3E%3Cg transform='translate(24)'%3E%3Ctext y='541'%3E&%2365389;%3C/text%3E%3Ctext y='525' class='a13'%3E&%2365399;%3C/text%3E%3Ctext y='509' class='a12'%3E&%2365394;%3C/text%3E%3Ctext y='493' class='a11'%3E&%2365400;%3C/text%3E%3Ctext y='477' class='a10'%3E1%3C/text%3E%3Ctext y='461' class='a9'%3E&%2365427;%3C/text%3E%3Ctext y='445' class='a9'%3E&%2365405;%3C/text%3E%3Ctext y='429' class='a8'%3E1%3C/text%3E%3Ctext y='413' class='a7'%3E&%2365394;%3C/text%3E%3Ctext y='397' class='a6'%3E&%2365426;%3C/text%3E%3Ctext y='381' class='a5'%3E&%2365407;%3C/text%3E%3Ctext y='365' class='a5'%3E&%2365399;%3C/text%3E%3Ctext y='349' class='a4'%3E&%2365382;%3C/text%3E%3Ctext y='333' class='a3'%3E&%2365430;%3C/text%3E%3Ctext y='317' class='a2'%3E&%2365425;%3C/text%3E%3Ctext y='301' class='a2'%3E&%2365395;%3C/text%3E%3Ctext y='285' class='a1'%3E&%2365382;%3C/text%3E%3Ctext y='253'%3E&%2365436;%3C/text%3E%3Ctext y='237' class='a11'%3E*%3C/text%3E%3Ctext y='221' class='a9'%3E&%2365430;%3C/text%3E%3Ctext y='205' class='a6'%3E"%3C/text%3E%3Ctext y='189' class='a4'%3E&%2365433;%3C/text%3E%3Ctext y='173' class='a2'%3E4%3C/text%3E%3C/g%3E%3Cg transform='translate(46)'%3E%3Ctext y='413'%3E2%3C/text%3E%3Ctext y='397' class='a13'%3E-%3C/text%3E%3Ctext y='381' class='a12'%3E&%2365422;%3C/text%3E%3Ctext y='365' class='a11'%3E&%2365402;%3C/text%3E%3Ctext y='349' class='a10'%3E5%3C/text%3E%3Ctext y='333' class='a9'%3E4%3C/text%3E%3Ctext y='317' class='a8'%3E&%2365408;%3C/text%3E%3Ctext y='301' class='a7'%3E3%3C/text%3E%3Ctext y='285' class='a6'%3EZ%3C/text%3E%3Ctext y='269' class='a5'%3E&%2365395;%3C/text%3E%3Ctext y='253' class='a4'%3E&%2365415;%3C/text%3E%3Ctext y='237' class='a3'%3E&%2365420;%3C/text%3E%3Ctext y='221' class='a3'%3E&%2365383;%3C/text%3E%3Ctext y='205' class='a2'%3E&%2365414;%3C/text%3E%3Ctext y='189' class='a1'%3E&%2365385;%3C/text%3E%3Ctext y='173' class='a1'%3E&%2365427;%3C/text%3E%3Ctext y='13'%3E&%2365386;%3C/text%3E%3Ctext y='637' class='a13'%3E&%2365392;%3C/text%3E%3Ctext y='621' class='a11'%3E&%2365424;%3C/text%3E%3Ctext y='605' class='a10'%3E&%2365421;%3C/text%3E%3Ctext y='589' class='a9'%3E0%3C/text%3E%3Ctext y='573' class='a8'%3E"%3C/text%3E%3Ctext y='557' class='a7'%3E&%2365383;%3C/text%3E%3Ctext y='541' class='a6'%3E&%2365418;%3C/text%3E%3Ctext y='525' class='a4'%3E&%2365410;%3C/text%3E%3Ctext y='509' class='a3'%3E&%2365400;%3C/text%3E%3Ctext y='493' class='a2'%3E+%3C/text%3E%3Ctext y='477' class='a1'%3E&%2365393;%3C/text%3E%3Ctext y='461' class='a1'%3E&%2365416;%3C/text%3E%3C/g%3E%3Cg transform='translate(68)'%3E%3Ctext y='125'%3E&%2365427;%3C/text%3E%3Ctext y='109' class='a11'%3E&%2365419;%3C/text%3E%3Ctext y='93' class='a9'%3E6%3C/text%3E%3Ctext y='77' class='a6'%3E&%2365395;%3C/text%3E%3Ctext y='61' class='a4'%3E>%3C/text%3E%3Ctext y='45' class='a2'%3E&%2365408;%3C/text%3E%3Ctext y='509'%3E+%3C/text%3E%3Ctext y='493' class='a13'%3E>%3C/text%3E%3Ctext y='477' class='a12'%3E&%2365419;%3C/text%3E%3Ctext y='461' class='a11'%3E&%2365417;%3C/text%3E%3Ctext y='445' class='a10'%3E&%2365399;%3C/text%3E%3Ctext y='429' class='a9'%3E8%3C/text%3E%3Ctext y='413' class='a8'%3E&%2365405;%3C/text%3E%3Ctext y='397' class='a7'%3E9%3C/text%3E%3Ctext y='381' class='a7'%3E&%2365426;%3C/text%3E%3Ctext y='365' class='a6'%3E<%3C/text%3E%3Ctext y='349' class='a5'%3E&%2365427;%3C/text%3E%3Ctext y='333' class='a4'%3E&%2365385;%3C/text%3E%3Ctext y='317' class='a3'%3E*%3C/text%3E%3Ctext y='301' class='a2'%3E&%2365419;%3C/text%3E%3Ctext y='285' class='a2'%3E&%2365430;%3C/text%3E%3Ctext y='269' class='a1'%3E&%2365430;%3C/text%3E%3C/g%3E%3Cg transform='translate(90)'%3E%3Ctext y='141'%3E2%3C/text%3E%3Ctext y='125' class='a13'%3E&%2365394;%3C/text%3E%3Ctext y='109' class='a11'%3E&%2365391;%3C/text%3E%3Ctext y='93' class='a10'%3E&%2365385;%3C/text%3E%3Ctext y='77' class='a9'%3E&%2365434;%3C/text%3E%3Ctext y='61' class='a7'%3E&%2365413;%3C/text%3E%3Ctext y='45' class='a6'%3E&%2365437;%3C/text%3E%3Ctext y='29' class='a5'%3E&%2365382;%3C/text%3E%3Ctext y='13' class='a4'%3E|%3C/text%3E%3Ctext y='637' class='a3'%3E&%2365411;%3C/text%3E%3Ctext y='621' class='a2'%3E&%2365407;%3C/text%3E%3Ctext y='605' class='a1'%3E+%3C/text%3E%3C/g%3E%3Cg transform='translate(134)'%3E%3Ctext y='477'%3E&%2365399;%3C/text%3E%3Ctext y='461' class='a13'%3E&%2365426;%3C/text%3E%3Ctext y='445' class='a11'%3E-%3C/text%3E%3Ctext y='429' class='a10'%3E&%2365401;%3C/text%3E%3Ctext y='413' class='a9'%3E&%2365436;%3C/text%3E%3Ctext y='397' class='a8'%3E&%2365420;%3C/text%3E%3Ctext y='381' class='a7'%3E6%3C/text%3E%3Ctext y='365' class='a6'%3E=%3C/text%3E%3Ctext y='349' class='a4'%3E:%3C/text%3E%3Ctext y='333' class='a3'%3E&%2365428;%3C/text%3E%3Ctext y='317' class='a2'%3E&%2365431;%3C/text%3E%3Ctext y='301' class='a1'%3E=%3C/text%3E%3Ctext y='285' class='a1'%3E&%2365382;%3C/text%3E%3Ctext y='141'%3E2%3C/text%3E%3Ctext y='125' class='a12'%3E<%3C/text%3E%3Ctext y='109' class='a11'%3E=%3C/text%3E%3Ctext y='93' class='a10'%3E2%3C/text%3E%3Ctext y='77' class='a8'%3E&%2365435;%3C/text%3E%3Ctext y='61' class='a7'%3E&%2365425;%3C/text%3E%3Ctext y='45' class='a5'%3E&%2365389;%3C/text%3E%3Ctext y='29' class='a4'%3E&%2365415;%3C/text%3E%3Ctext y='13' class='a3'%3E&%2365432;%3C/text%3E%3Ctext y='637' class='a2'%3E&%2365429;%3C/text%3E%3Ctext y='621' class='a1'%3E&%2365384;%3C/text%3E%3C/g%3E%3Cg transform='translate(156)'%3E%3Ctext y='413'%3E&%2365383;%3C/text%3E%3Ctext y='397' class='a13'%3E.%3C/text%3E%3Ctext y='381' class='a12'%3E"%3C/text%3E%3Ctext y='365' class='a11'%3E&%2365422;%3C/text%3E%3Ctext y='349' class='a10'%3E&%2365416;%3C/text%3E%3Ctext y='333' class='a9'%3E&%2365383;%3C/text%3E%3Ctext y='317' class='a9'%3E&%2365393;%3C/text%3E%3Ctext y='301' class='a8'%3E&%2365422;%3C/text%3E%3Ctext y='285' class='a7'%3E&%2365397;%3C/text%3E%3Ctext y='269' class='a6'%3E&%2365391;%3C/text%3E%3Ctext y='253' class='a5'%3E&%2365392;%3C/text%3E%3Ctext y='237' class='a5'%3E&%2365388;%3C/text%3E%3Ctext y='221' class='a4'%3E&%2365415;%3C/text%3E%3Ctext y='205' class='a3'%3E&%2365391;%3C/text%3E%3Ctext y='189' class='a2'%3E&%2365388;%3C/text%3E%3Ctext y='173' class='a2'%3E&%2365418;%3C/text%3E%3Ctext y='157' class='a1'%3E>%3C/text%3E%3Ctext y='125'%3E>%3C/text%3E%3Ctext y='109' class='a12'%3E8%3C/text%3E%3Ctext y='93' class='a11'%3E&%2365384;%3C/text%3E%3Ctext y='77' class='a9'%3E.%3C/text%3E%3Ctext y='61' class='a8'%3E&%2365403;%3C/text%3E%3Ctext y='45' class='a6'%3E<%3C/text%3E%3Ctext y='29' class='a5'%3E&%2365430;%3C/text%3E%3Ctext y='13' class='a3'%3E&%2365428;%3C/text%3E%3Ctext y='637' class='a2'%3E&%2365397;%3C/text%3E%3Ctext y='621' class='a1'%3E&%2365399;%3C/text%3E%3C/g%3E%3Cg transform='translate(178)'%3E%3Ctext y='109'%3E&%2365419;%3C/text%3E%3Ctext y='93' class='a12'%3EZ%3C/text%3E%3Ctext y='77' class='a10'%3E&%2365400;%3C/text%3E%3Ctext y='61' class='a8'%3E&%2365435;%3C/text%3E%3Ctext y='45' class='a6'%3E.%3C/text%3E%3Ctext y='29' class='a4'%3E&%2365426;%3C/text%3E%3Ctext y='13' class='a3'%3E=%3C/text%3E%3Ctext y='637' class='a1'%3E&%2365409;%3C/text%3E%3C/g%3E%3Cg transform='translate(200)'%3E%3Ctext y='461'%3E&%2365383;%3C/text%3E%3Ctext y='445' class='a11'%3E&%2365406;%3C/text%3E%3Ctext y='429' class='a9'%3E&%2365419;%3C/text%3E%3Ctext y='413' class='a6'%3EZ%3C/text%3E%3Ctext y='397' class='a4'%3E-%3C/text%3E%3Ctext y='381' class='a2'%3E*%3C/text%3E%3C/g%3E%3Cg transform='translate(222)'%3E%3Ctext y='157'%3E&%2365397;%3C/text%3E%3Ctext y='141' class='a12'%3E*%3C/text%3E%3Ctext y='125' class='a9'%3E|%3C/text%3E%3Ctext y='109' class='a7'%3E&%2365395;%3C/text%3E%3Ctext y='93' class='a5'%3E&%2365436;%3C/text%3E%3Ctext y='77' class='a3'%3E&%2365430;%3C/text%3E%3Ctext y='61' class='a1'%3E|%3C/text%3E%3Ctext y='429'%3E&%2365432;%3C/text%3E%3Ctext y='413' class='a13'%3E&%2365391;%3C/text%3E%3Ctext y='397' class='a12'%3E&%2365390;%3C/text%3E%3Ctext y='381' class='a11'%3E&%2365398;%3C/text%3E%3Ctext y='365' class='a10'%3E&%2365430;%3C/text%3E%3Ctext y='349' class='a9'%3E&%2365399;%3C/text%3E%3Ctext y='333' class='a8'%3E&%2365408;%3C/text%3E%3Ctext y='317' class='a7'%3E=%3C/text%3E%3Ctext y='301' class='a7'%3E&%2365405;%3C/text%3E%3Ctext y='285' class='a6'%3E&%2365382;%3C/text%3E%3Ctext y='269' class='a5'%3E&%2365390;%3C/text%3E%3Ctext y='253' class='a4'%3E<%3C/text%3E%3Ctext y='237' class='a3'%3E.%3C/text%3E%3Ctext y='221' class='a2'%3E&%2365414;%3C/text%3E%3Ctext y='205' class='a2'%3E&%2365406;%3C/text%3E%3Ctext y='189' class='a1'%3E>%3C/text%3E%3C/g%3E%3Cg transform='translate(244)'%3E%3Ctext y='541'%3E&%2365433;%3C/text%3E%3Ctext y='525' class='a13'%3E0%3C/text%3E%3Ctext y='509' class='a12'%3E&%2365432;%3C/text%3E%3Ctext y='493' class='a11'%3E&%2365396;%3C/text%3E%3Ctext y='477' class='a11'%3E&%2365423;%3C/text%3E%3Ctext y='461' class='a10'%3E&%2365385;%3C/text%3E%3Ctext y='445' class='a9'%3E&%2365384;%3C/text%3E%3Ctext y='429' class='a8'%3E&%2365421;%3C/text%3E%3Ctext y='413' class='a7'%3E&%2365408;%3C/text%3E%3Ctext y='397' class='a6'%3E6%3C/text%3E%3Ctext y='381' class='a6'%3E&%2365388;%3C/text%3E%3Ctext y='365' class='a5'%3E&%2365393;%3C/text%3E%3Ctext y='349' class='a4'%3E&%2365414;%3C/text%3E%3Ctext y='333' class='a4'%3E&%2365388;%3C/text%3E%3Ctext y='317' class='a3'%3E&%2365420;%3C/text%3E%3Ctext y='301' class='a2'%3E&%2365400;%3C/text%3E%3Ctext y='285' class='a2'%3E&%2365424;%3C/text%3E%3Ctext y='269' class='a1'%3E&%2365414;%3C/text%3E%3Ctext y='189'%3E&%2365432;%3C/text%3E%3Ctext y='173' class='a13'%3E&%2365429;%3C/text%3E%3Ctext y='157' class='a11'%3E&%2365429;%3C/text%3E%3Ctext y='141' class='a10'%3E&%2365383;%3C/text%3E%3Ctext y='125' class='a9'%3E&%2365403;%3C/text%3E%3Ctext y='109' class='a8'%3EZ%3C/text%3E%3Ctext y='93' class='a7'%3E"%3C/text%3E%3Ctext y='77' class='a6'%3E9%3C/text%3E%3Ctext y='61' class='a4'%3E4%3C/text%3E%3Ctext y='45' class='a3'%3E&%2365385;%3C/text%3E%3Ctext y='29' class='a2'%3E&%2365421;%3C/text%3E%3Ctext y='13' class='a1'%3E&%2365435;%3C/text%3E%3Ctext y='637' class='a1'%3E&%2365384;%3C/text%3E%3C/g%3E%3Cg transform='translate(288)'%3E%3Ctext y='221'%3E&%2365421;%3C/text%3E%3Ctext y='205' class='a13'%3E&%2365400;%3C/text%3E%3Ctext y='189' class='a12'%3E&%2365402;%3C/text%3E%3Ctext y='173' class='a10'%3E&%2365382;%3C/text%3E%3Ctext y='157' class='a9'%3E&%2365396;%3C/text%3E%3Ctext y='141' class='a8'%3E&%2365400;%3C/text%3E%3Ctext y='125' class='a7'%3E&%2365405;%3C/text%3E%3Ctext y='109' class='a6'%3EZ%3C/text%3E%3Ctext y='93' class='a5'%3E&%2365398;%3C/text%3E%3Ctext y='77' class='a4'%3E&%2365392;%3C/text%3E%3Ctext y='61' class='a3'%3E&%2365398;%3C/text%3E%3Ctext y='45' class='a2'%3E1%3C/text%3E%3Ctext y='29' class='a1'%3E&%2365395;%3C/text%3E%3Ctext y='13' class='a1'%3E&%2365389;%3C/text%3E%3Ctext y='477'%3E&%2365400;%3C/text%3E%3Ctext y='461' class='a13'%3E&%2365395;%3C/text%3E%3Ctext y='445' class='a11'%3E*%3C/text%3E%3Ctext y='429' class='a10'%3E&%2365425;%3C/text%3E%3Ctext y='413' class='a9'%3E=%3C/text%3E%3Ctext y='397' class='a8'%3E*%3C/text%3E%3Ctext y='381' class='a7'%3E&%2365422;%3C/text%3E%3Ctext y='365' class='a6'%3E&%2365385;%3C/text%3E%3Ctext y='349' class='a4'%3E&%2365397;%3C/text%3E%3Ctext y='333' class='a3'%3E&%2365392;%3C/text%3E%3Ctext y='317' class='a2'%3E-%3C/text%3E%3Ctext y='301' class='a1'%3E&%2365391;%3C/text%3E%3Ctext y='285' class='a1'%3E&%2365413;%3C/text%3E%3C/g%3E%3Cg transform='translate(310)'%3E%3Ctext y='285'%3E&%2365409;%3C/text%3E%3Ctext y='269' class='a12'%3E&%2365418;%3C/text%3E%3Ctext y='253' class='a10'%3E&%2365433;%3C/text%3E%3Ctext y='237' class='a8'%3EZ%3C/text%3E%3Ctext y='221' class='a6'%3E&%2365436;%3C/text%3E%3Ctext y='205' class='a4'%3E&%2365437;%3C/text%3E%3Ctext y='189' class='a3'%3E&%2365403;%3C/text%3E%3Ctext y='173' class='a1'%3E&%2365432;%3C/text%3E%3Ctext y='589'%3E&%2365395;%3C/text%3E%3Ctext y='573' class='a11'%3E&%2365383;%3C/text%3E%3Ctext y='557' class='a9'%3E&%2365400;%3C/text%3E%3Ctext y='541' class='a6'%3E4%3C/text%3E%3Ctext y='525' class='a4'%3E&%2365432;%3C/text%3E%3Ctext y='509' class='a2'%3E&%2365408;%3C/text%3E%3C/g%3E%3Cg transform='translate(354)'%3E%3Ctext y='301'%3E&%2365403;%3C/text%3E%3Ctext y='285' class='a13'%3E*%3C/text%3E%3Ctext y='269' class='a12'%3E&%2365425;%3C/text%3E%3Ctext y='253' class='a11'%3E=%3C/text%3E%3Ctext y='237' class='a10'%3E*%3C/text%3E%3Ctext y='221' class='a9'%3E&%2365422;%3C/text%3E%3Ctext y='205' class='a8'%3E&%2365412;%3C/text%3E%3Ctext y='189' class='a7'%3E&%2365384;%3C/text%3E%3Ctext y='173' class='a6'%3E&%2365388;%3C/text%3E%3Ctext y='157' class='a5'%3E9%3C/text%3E%3Ctext y='141' class='a4'%3E&%2365404;%3C/text%3E%3Ctext y='125' class='a3'%3E&%2365390;%3C/text%3E%3Ctext y='109' class='a3'%3E&%2365389;%3C/text%3E%3Ctext y='93' class='a2'%3E&%2365398;%3C/text%3E%3Ctext y='77' class='a1'%3E&%2365390;%3C/text%3E%3Ctext y='61' class='a1'%3E&%2365426;%3C/text%3E%3Ctext y='557'%3E&%2365425;%3C/text%3E%3Ctext y='541' class='a12'%3E:%3C/text%3E%3Ctext y='525' class='a9'%3E&%2365414;%3C/text%3E%3Ctext y='509' class='a7'%3E&%2365433;%3C/text%3E%3Ctext y='493' class='a5'%3E&%2365406;%3C/text%3E%3Ctext y='477' class='a3'%3E&%2365417;%3C/text%3E%3Ctext y='461' class='a1'%3E&%2365396;%3C/text%3E%3C/g%3E%3Cg transform='translate(376)'%3E%3Ctext y='461'%3E&%2365420;%3C/text%3E%3Ctext y='445' class='a12'%3E&%2365399;%3C/text%3E%3Ctext y='429' class='a9'%3E4%3C/text%3E%3Ctext y='413' class='a7'%3E&%2365420;%3C/text%3E%3Ctext y='397' class='a5'%3E|%3C/text%3E%3Ctext y='381' class='a3'%3E=%3C/text%3E%3Ctext y='365' class='a1'%3E&%2365417;%3C/text%3E%3Ctext y='77'%3E&%2365435;%3C/text%3E%3Ctext y='61' class='a13'%3E6%3C/text%3E%3Ctext y='45' class='a12'%3E&%2365405;%3C/text%3E%3Ctext y='29' class='a11'%3E4%3C/text%3E%3Ctext y='13' class='a10'%3E&%2365390;%3C/text%3E%3Ctext y='637' class='a9'%3E&%2365413;%3C/text%3E%3Ctext y='621' class='a8'%3E.%3C/text%3E%3Ctext y='605' class='a7'%3E&%2365388;%3C/text%3E%3Ctext y='589' class='a6'%3E&%2365388;%3C/text%3E%3Ctext y='573' class='a5'%3E&%2365426;%3C/text%3E%3Ctext y='557' class='a4'%3E&%2365411;%3C/text%3E%3Ctext y='541' class='a3'%3E&%2365415;%3C/text%3E%3Ctext y='525' class='a2'%3E&%2365401;%3C/text%3E%3Ctext y='509' class='a1'%3E&%2365402;%3C/text%3E%3Ctext y='493' class='a1'%3E&%2365419;%3C/text%3E%3C/g%3E%3Cg transform='translate(398)'%3E%3Ctext y='573'%3E"%3C/text%3E%3Ctext y='557' class='a13'%3E&%2365410;%3C/text%3E%3Ctext y='541' class='a12'%3E&%2365427;%3C/text%3E%3Ctext y='525' class='a11'%3E&%2365394;%3C/text%3E%3Ctext y='509' class='a10'%3E2%3C/text%3E%3Ctext y='493' class='a9'%3E&%2365406;%3C/text%3E%3Ctext y='477' class='a8'%3E&%2365396;%3C/text%3E%3Ctext y='461' class='a7'%3E&%2365417;%3C/text%3E%3Ctext y='445' class='a6'%3EZ%3C/text%3E%3Ctext y='429' class='a5'%3E&%2365413;%3C/text%3E%3Ctext y='413' class='a4'%3E&%2365400;%3C/text%3E%3Ctext y='397' class='a3'%3E4%3C/text%3E%3Ctext y='381' class='a2'%3E<%3C/text%3E%3Ctext y='365' class='a1'%3E&%2365427;%3C/text%3E%3Ctext y='349' class='a1'%3E&%2365402;%3C/text%3E%3C/g%3E%3Cg transform='translate(420)'%3E%3Ctext y='573'%3E&%2365409;%3C/text%3E%3Ctext y='557' class='a12'%3E&%2365390;%3C/text%3E%3Ctext y='541' class='a9'%3E+%3C/text%3E%3Ctext y='525' class='a7'%3E&%2365391;%3C/text%3E%3Ctext y='509' class='a5'%3E&%2365429;%3C/text%3E%3Ctext y='493' class='a3'%3E&%2365398;%3C/text%3E%3Ctext y='477' class='a1'%3E&%2365395;%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='832'%3E%3Cstyle%3Etext{font:13px 'MS Gothic','Hiragino Kaku Gothic ProN','Noto Sans Mono CJK JP',monospace}.a1{fill-opacity:0.05}.a2{fill-opacity:0.1}.a3{fill-opacity:0.15}.a4{fill-opacity:0.2}.a5{fill-opacity:0.25}.a6{fill-opacity:0.3}.a7{fill-opacity:0.35}.a8{fill-opacity:0.4}.a9{fill-opacity:0.45}.a10{fill-opacity:0.5}.a11{fill-opacity:0.55}.a12{fill-opacity:0.6}.a13{fill-opacity:0.65}.a14{fill-opacity:0.7}%3C/style%3E%3Cg transform='matrix(-1 0 0 1 440 0)'%3E%3Cg transform='translate(13)'%3E%3Ctext y='269'%3E6%3C/text%3E%3Ctext y='253' class='a13'%3E&%2365423;%3C/text%3E%3Ctext y='237' class='a12'%3E&%2365393;%3C/text%3E%3Ctext y='221' class='a11'%3E=%3C/text%3E%3Ctext y='205' class='a10'%3E&%2365419;%3C/text%3E%3Ctext y='189' class='a9'%3E9%3C/text%3E%3Ctext y='173' class='a8'%3E1%3C/text%3E%3Ctext y='157' class='a7'%3E5%3C/text%3E%3Ctext y='141' class='a6'%3E&%2365405;%3C/text%3E%3Ctext y='125' class='a5'%3E&%2365432;%3C/text%3E%3Ctext y='109' class='a4'%3E&%2365407;%3C/text%3E%3Ctext y='93' class='a3'%3E&%2365421;%3C/text%3E%3Ctext y='77' class='a3'%3E&%2365407;%3C/text%3E%3Ctext y='61' class='a2'%3E2%3C/text%3E%3Ctext y='45' class='a1'%3E&%2365393;%3C/text%3E%3Ctext y='29' class='a1'%3E&%2365433;%3C/text%3E%3C/g%3E%3Cg transform='translate(35)'%3E%3Ctext y='157'%3E&%2365417;%3C/text%3E%3Ctext y='141' class='a12'%3E&%2365415;%3C/text%3E%3Ctext y='125' class='a10'%3E&%2365416;%3C/text%3E%3Ctext y='109' class='a9'%3E1%3C/text%3E%3Ctext y='93' class='a7'%3E&%2365426;%3C/text%3E%3Ctext y='77' class='a5'%3E&%2365432;%3C/text%3E%3Ctext y='61' class='a4'%3E&%2365399;%3C/text%3E%3Ctext y='45' class='a2'%3E"%3C/text%3E%3Ctext y='29' class='a1'%3E"%3C/text%3E%3C/g%3E%3Cg transform='translate(57)'%3E%3Ctext y='749'%3E&%2365418;%3C/text%3E%3Ctext y='733' class='a13'%3E+%3C/text%3E%3Ctext y='717' class='a12'%3E&%2365406;%3C/text%3E%3Ctext y='701' class='a11'%3E&%2365425;%3C/text%3E%3Ctext y='685' class='a10'%3E4%3C/text%3E%3Ctext y='669' class='a9'%3E&%2365426;%3C/text%3E%3Ctext y='653' class='a8'%3E&%2365425;%3C/text%3E%3Ctext y='637' class='a7'%3E&%2365418;%3C/text%3E%3Ctext y='621' class='a7'%3E1%3C/text%3E%3Ctext y='605' class='a6'%3E&%2365430;%3C/text%3E%3Ctext y='589' class='a5'%3E0%3C/text%3E%3Ctext y='573' class='a4'%3E&%2365395;%3C/text%3E%3Ctext y='557' class='a3'%3E&%2365407;%3C/text%3E%3Ctext y='541' class='a2'%3E.%3C/text%3E%3Ctext y='525' class='a2'%3E3%3C/text%3E%3Ctext y='509' class='a1'%3E|%3C/text%3E%3C/g%3E%3Cg transform='translate(79)'%3E%3Ctext y='541'%3E&%2365435;%3C/text%3E%3Ctext y='525' class='a13'%3E&%2365411;%3C/text%3E%3Ctext y='509' class='a12'%3E&%2365424;%3C/text%3E%3Ctext y='493' class='a11'%3E&%2365418;%3C/text%3E%3Ctext y='477' class='a10'%3E"%3C/text%3E%3Ctext y='461' class='a9'%3E&%2365425;%3C/text%3E%3Ctext y='445' class='a8'%3E&%2365392;%3C/text%3E%3Ctext y='429' class='a7'%3E&%2365410;%3C/text%3E%3Ctext y='413' class='a7'%3E&%2365389;%3C/text%3E%3Ctext y='397' class='a6'%3E&%2365428;%3C/text%3E%3Ctext y='381' class='a5'%3E&%2365413;%3C/text%3E%3Ctext y='365' class='a4'%3E4%3C/text%3E%3Ctext y='349' class='a3'%3E:%3C/text%3E%3Ctext y='333' class='a2'%3E&%2365427;%3C/text%3E%3Ctext y='317' class='a2'%3E9%3C/text%3E%3Ctext y='301' class='a1'%3E-%3C/text%3E%3C/g%3E%3Cg transform='translate(123)'%3E%3Ctext y='493'%3E&%2365396;%3C/text%3E%3Ctext y='477' class='a12'%3E&%2365387;%3C/text%3E%3Ctext y='461' class='a9'%3E+%3C/text%3E%3Ctext y='445' class='a7'%3E|%3C/text%3E%3Ctext y='429' class='a5'%3E0%3C/text%3E%3Ctext y='413' class='a3'%3E&%2365386;%3C/text%3E%3Ctext y='397' class='a1'%3E&%2365418;%3C/text%3E%3Ctext y='45'%3E&%2365423;%3C/text%3E%3Ctext y='29' class='a13'%3E&%2365421;%3C/text%3E%3Ctext y='13' class='a12'%3E&%2365426;%3C/text%3E%3Ctext y='829' class='a11'%3E.%3C/text%3E%3Ctext y='813' class='a10'%3E&%2365433;%3C/text%3E%3Ctext y='797' class='a9'%3E&%2365389;%3C/text%3E%3Ctext y='781' class='a8'%3E&%2365417;%3C/text%3E%3Ctext y='765' class='a7'%3E&%2365429;%3C/text%3E%3Ctext y='749' class='a6'%3E0%3C/text%3E%3Ctext y='733' class='a5'%3E&%2365437;%3C/text%3E%3Ctext y='717' class='a4'%3E&%2365421;%3C/text%3E%3Ctext y='701' class='a3'%3E9%3C/text%3E%3Ctext y='685' class='a3'%3E&%2365417;%3C/text%3E%3Ctext y='669' class='a2'%3E=%3C/text%3E%3Ctext y='653' class='a1'%3E"%3C/text%3E%3Ctext y='637' class='a1'%3E&%2365389;%3C/text%3E%3C/g%3E%3Cg transform='translate(145)'%3E%3Ctext y='397'%3E&%2365397;%3C/text%3E%3Ctext y='381' class='a13'%3E&%2365421;%3C/text%3E%3Ctext y='365' class='a12'%3E&%2365392;%3C/text%3E%3Ctext y='349' class='a11'%3E1%3C/text%3E%3Ctext y='333' class='a10'%3E&%2365384;%3C/text%3E%3Ctext y='317' class='a9'%3E&%2365394;%3C/text%3E%3Ctext y='301' class='a8'%3E&%2365434;%3C/text%3E%3Ctext y='285' class='a7'%3E&%2365425;%3C/text%3E%3Ctext y='269' class='a6'%3E&%2365437;%3C/text%3E%3Ctext y='253' class='a5'%3E&%2365431;%3C/text%3E%3Ctext y='237' class='a4'%3E&%2365415;%3C/text%3E%3Ctext y='221' class='a3'%3E&%2365404;%3C/text%3E%3Ctext y='205' class='a3'%3E&%2365416;%3C/text%3E%3Ctext y='189' class='a2'%3E&%2365384;%3C/text%3E%3Ctext y='173' class='a1'%3E&%2365390;%3C/text%3E%3Ctext y='157' class='a1'%3E&%2365392;%3C/text%3E%3Ctext y='717'%3E+%3C/text%3E%3Ctext y='701' class='a13'%3E2%3C/text%3E%3Ctext y='685' class='a12'%3E&%2365391;%3C/text%3E%3Ctext y='669' class='a11'%3E&%2365383;%3C/text%3E%3Ctext y='653' class='a11'%3E&%2365410;%3C/text%3E%3Ctext y='637' class='a10'%3E&%2365424;%3C/text%3E%3Ctext y='621' class='a9'%3E&%2365399;%3C/text%3E%3Ctext y='605' class='a8'%3E&%2365436;%3C/text%3E%3Ctext y='589' class='a7'%3E&%2365385;%3C/text%3E%3Ctext y='573' class='a6'%3E&%2365427;%3C/text%3E%3Ctext y='557' class='a6'%3E"%3C/text%3E%3Ctext y='541' class='a5'%3E&%2365401;%3C/text%3E%3Ctext y='525' class='a4'%3E"%3C/text%3E%3Ctext y='509' class='a4'%3EZ%3C/text%3E%3Ctext y='493' class='a3'%3E&%2365396;%3C/text%3E%3Ctext y='477' class='a2'%3E&%2365415;%3C/text%3E%3Ctext y='461' class='a2'%3E&%2365429;%3C/text%3E%3Ctext y='445' class='a1'%3E&%2365417;%3C/text%3E%3C/g%3E%3Cg transform='translate(167)'%3E%3Ctext y='317'%3E&%2365399;%3C/text%3E%3Ctext y='301' class='a13'%3E&%2365411;%3C/text%3E%3Ctext y='285' class='a12'%3E&%2365422;%3C/text%3E%3Ctext y='269' class='a11'%3E&%2365426;%3C/text%3E%3Ctext y='253' class='a10'%3E&%2365419;%3C/text%3E%3Ctext y='237' class='a9'%3E&%2365431;%3C/text%3E%3Ctext y='221' class='a8'%3E&%2365390;%3C/text%3E%3Ctext y='205' class='a7'%3E6%3C/text%3E%3Ctext y='189' class='a7'%3E&%2365396;%3C/text%3E%3Ctext y='173' class='a6'%3E&%2365390;%3C/text%3E%3Ctext y='157' class='a5'%3E&%2365400;%3C/text%3E%3Ctext y='141' class='a4'%3E<%3C/text%3E%3Ctext y='125' class='a3'%3E&%2365412;%3C/text%3E%3Ctext y='109' class='a2'%3E&%2365420;%3C/text%3E%3Ctext y='93' class='a2'%3E&%2365397;%3C/text%3E%3Ctext y='77' class='a1'%3E&%2365383;%3C/text%3E%3C/g%3E%3Cg transform='translate(189)'%3E%3Ctext y='45'%3E&%2365428;%3C/text%3E%3Ctext y='29' class='a13'%3E8%3C/text%3E%3Ctext y='13' class='a12'%3E8%3C/text%3E%3Ctext y='829' class='a12'%3E&%2365390;%3C/text%3E%3Ctext y='813' class='a11'%3E&%2365418;%3C/text%3E%3Ctext y='797' class='a10'%3E>%3C/text%3E%3Ctext y='781' class='a9'%3E&%2365382;%3C/text%3E%3Ctext y='765' class='a8'%3E2%3C/text%3E%3Ctext y='749' class='a8'%3E&%2365390;%3C/text%3E%3Ctext y='733' class='a7'%3E&%2365414;%3C/text%3E%3Ctext y='717' class='a6'%3E2%3C/text%3E%3Ctext y='701' class='a5'%3E&%2365413;%3C/text%3E%3Ctext y='685' class='a5'%3E&%2365437;%3C/text%3E%3Ctext y='669' class='a4'%3E&%2365392;%3C/text%3E%3Ctext y='653' class='a3'%3E&%2365410;%3C/text%3E%3Ctext y='637' class='a3'%3E7%3C/text%3E%3Ctext y='621' class='a2'%3E&%2365402;%3C/text%3E%3Ctext y='605' class='a1'%3E&%2365414;%3C/text%3E%3Ctext y='589' class='a1'%3E&%2365400;%3C/text%3E%3C/g%3E%3Cg transform='translate(211)'%3E%3Ctext y='781'%3E&%2365385;%3C/text%3E%3Ctext y='765' class='a13'%3E&%2365388;%3C/text%3E%3Ctext y='749' class='a12'%3E&%2365400;%3C/text%3E%3Ctext y='733' class='a11'%3E&%2365415;%3C/text%3E%3Ctext y='717' class='a10'%3E7%3C/text%3E%3Ctext y='701' class='a9'%3E&%2365435;%3C/text%3E%3Ctext y='685' class='a8'%3E&%2365414;%3C/text%3E%3Ctext y='669' class='a7'%3E&%2365423;%3C/text%3E%3Ctext y='653' class='a6'%3E>%3C/text%3E%3Ctext y='637' class='a5'%3E|%3C/text%3E%3Ctext y='621' class='a4'%3E.%3C/text%3E%3Ctext y='605' class='a3'%3E&%2365410;%3C/text%3E%3Ctext y='589' class='a2'%3E&%2365426;%3C/text%3E%3Ctext y='573' class='a1'%3E&%2365386;%3C/text%3E%3Ctext y='557' class='a1'%3E-%3C/text%3E%3Ctext y='429'%3E&%2365384;%3C/text%3E%3Ctext y='413' class='a12'%3E&%2365422;%3C/text%3E%3Ctext y='397' class='a9'%3E"%3C/text%3E%3Ctext y='381' class='a7'%3E&%2365387;%3C/text%3E%3Ctext y='365' class='a5'%3E|%3C/text%3E%3Ctext y='349' class='a3'%3E5%3C/text%3E%3Ctext y='333' class='a1'%3E3%3C/text%3E%3C/g%3E%3Cg transform='translate(233)'%3E%3Ctext y='381'%3E&%2365400;%3C/text%3E%3Ctext y='365' class='a12'%3E&%2365416;%3C/text%3E%3Ctext y='349' class='a11'%3E0%3C/text%3E%3Ctext y='333' class='a10'%3E&%2365434;%3C/text%3E%3Ctext y='317' class='a8'%3E&%2365408;%3C/text%3E%3Ctext y='301' class='a7'%3E&%2365422;%3C/text%3E%3Ctext y='285' class='a5'%3E&%2365429;%3C/text%3E%3Ctext y='269' class='a4'%3E&%2365436;%3C/text%3E%3Ctext y='253' class='a3'%3E2%3C/text%3E%3Ctext y='237' class='a2'%3E&%2365392;%3C/text%3E%3Ctext y='221' class='a1'%3E7%3C/text%3E%3Ctext y='765'%3E&%2365400;%3C/text%3E%3Ctext y='749' class='a13'%3E|%3C/text%3E%3Ctext y='733' class='a12'%3E&%2365383;%3C/text%3E%3Ctext y='717' class='a12'%3E&%2365401;%3C/text%3E%3Ctext y='701' class='a11'%3E&%2365431;%3C/text%3E%3Ctext y='685' class='a10'%3E&%2365413;%3C/text%3E%3Ctext y='669' class='a9'%3E&%2365425;%3C/text%3E%3Ctext y='653' class='a8'%3E&%2365391;%3C/text%3E%3Ctext y='637' class='a8'%3E&%2365421;%3C/text%3E%3Ctext y='621' class='a7'%3E&%2365418;%3C/text%3E%3Ctext y='605' class='a6'%3E&%2365385;%3C/text%3E%3Ctext y='589' class='a5'%3E&%2365407;%3C/text%3E%3Ctext y='573' class='a5'%3E&%2365415;%3C/text%3E%3Ctext y='557' class='a4'%3E&%2365384;%3C/text%3E%3Ctext y='541' class='a3'%3E+%3C/text%3E%3Ctext y='525' class='a3'%3E&%2365405;%3C/text%3E%3Ctext y='509' class='a2'%3E*%3C/text%3E%3Ctext y='493' class='a1'%3E&%2365412;%3C/text%3E%3Ctext y='477' class='a1'%3E&%2365425;%3C/text%3E%3C/g%3E%3Cg transform='translate(255)'%3E%3Ctext y='429'%3E3%3C/text%3E%3Ctext y='413' class='a12'%3E&%2365415;%3C/text%3E%3Ctext y='397' class='a11'%3E&%2365393;%3C/text%3E%3Ctext y='381' class='a9'%3EZ%3C/text%3E%3Ctext y='365' class='a8'%3E6%3C/text%3E%3Ctext y='349' class='a6'%3E6%3C/text%3E%3Ctext y='333' class='a5'%3E&%2365419;%3C/text%3E%3Ctext y='317' class='a3'%3E&%2365420;%3C/text%3E%3Ctext y='301' class='a2'%3E&%2365407;%3C/text%3E%3Ctext y='285' class='a1'%3E&%2365437;%3C/text%3E%3C/g%3E%3Cg transform='translate(277)'%3E%3Ctext y='61'%3E&%2365408;%3C/text%3E%3Ctext y='45' class='a12'%3E&%2365406;%3C/text%3E%3Ctext y='29' class='a11'%3E&%2365409;%3C/text%3E%3Ctext y='13' class='a10'%3E&%2365382;%3C/text%3E%3Ctext y='829' class='a8'%3E:%3C/text%3E%3Ctext y='813' class='a7'%3E&%2365387;%3C/text%3E%3Ctext y='797' class='a5'%3E&%2365395;%3C/text%3E%3Ctext y='781' class='a4'%3E&%2365399;%3C/text%3E%3Ctext y='765' class='a3'%3E&%2365419;%3C/text%3E%3Ctext y='749' class='a2'%3E&%2365426;%3C/text%3E%3Ctext y='733' class='a1'%3E&%2365385;%3C/text%3E%3C/g%3E%3Cg transform='translate(299)'%3E%3Ctext y='13'%3E&%2365408;%3C/text%3E%3Ctext y='829' class='a13'%3E3%3C/text%3E%3Ctext y='813' class='a11'%3E&%2365391;%3C/text%3E%3Ctext y='797' class='a10'%3E&%2365425;%3C/text%3E%3Ctext y='781' class='a9'%3E"%3C/text%3E%3Ctext y='765' class='a7'%3E=%3C/text%3E%3Ctext y='749' class='a6'%3E&%2365387;%3C/text%3E%3Ctext y='733' class='a5'%3EZ%3C/text%3E%3Ctext y='717' class='a4'%3E&%2365424;%3C/text%3E%3Ctext y='701' class='a3'%3E&%2365382;%3C/text%3E%3Ctext y='685' class='a2'%3E&%2365428;%3C/text%3E%3Ctext y='669' class='a1'%3E=%3C/text%3E%3Ctext y='461'%3E&%2365410;%3C/text%3E%3Ctext y='445' class='a11'%3E<%3C/text%3E%3Ctext y='429' class='a9'%3E*%3C/text%3E%3Ctext y='413' class='a6'%3E&%2365428;%3C/text%3E%3Ctext y='397' class='a4'%3E&%2365405;%3C/text%3E%3Ctext y='381' class='a2'%3E0%3C/text%3E%3C/g%3E%3Cg transform='translate(321)'%3E%3Ctext y='525'%3E&%2365409;%3C/text%3E%3Ctext y='509' class='a13'%3E&%2365425;%3C/text%3E%3Ctext y='493' class='a12'%3E.%3C/text%3E%3Ctext y='477' class='a11'%3E&%2365427;%3C/text%3E%3Ctext y='461' class='a10'%3E&%2365412;%3C/text%3E%3Ctext y='445' class='a9'%3E&%2365423;%3C/text%3E%3Ctext y='429' class='a8'%3E7%3C/text%3E%3Ctext y='413' class='a7'%3E&%2365410;%3C/text%3E%3Ctext y='397' class='a6'%3E&%2365390;%3C/text%3E%3Ctext y='381' class='a5'%3E&%2365412;%3C/text%3E%3Ctext y='365' class='a4'%3E&%2365382;%3C/text%3E%3Ctext y='349' class='a3'%3E&%2365403;%3C/text%3E%3Ctext y='333' class='a2'%3E&%2365426;%3C/text%3E%3Ctext y='317' class='a1'%3E&%2365403;%3C/text%3E%3Ctext y='301' class='a1'%3E3%3C/text%3E%3Ctext y='77'%3E&%2365393;%3C/text%3E%3Ctext y='61' class='a11'%3E&%2365386;%3C/text%3E%3Ctext y='45' class='a9'%3E&%2365398;%3C/text%3E%3Ctext y='29' class='a6'%3E&%2365426;%3C/text%3E%3Ctext y='13' class='a4'%3E&%2365391;%3C/text%3E%3Ctext y='829' class='a2'%3E&%2365385;%3C/text%3E%3C/g%3E%3Cg transform='translate(343)'%3E%3Ctext y='685'%3E*%3C/text%3E%3Ctext y='669' class='a13'%3E&%2365412;%3C/text%3E%3Ctext y='653' class='a11'%3E&%2365436;%3C/text%3E%3Ctext y='637' class='a10'%3E&%2365389;%3C/text%3E%3Ctext y='621' class='a9'%3E&%2365400;%3C/text%3E%3Ctext y='605' class='a8'%3E&%2365425;%3C/text%3E%3Ctext y='589' class='a7'%3E&%2365401;%3C/text%3E%3Ctext y='573' class='a6'%3E&%2365420;%3C/text%3E%3Ctext y='557' class='a4'%3E"%3C/text%3E%3Ctext y='541' class='a3'%3E&%2365404;%3C/text%3E%3Ctext y='525' class='a2'%3E&%2365405;%3C/text%3E%3Ctext y='509' class='a1'%3E&%2365397;%3C/text%3E%3Ctext y='493' class='a1'%3E>%3C/text%3E%3C/g%3E%3Cg transform='translate(365)'%3E%3Ctext y='397'%3E&%2365403;%3C/text%3E%3Ctext y='381' class='a13'%3E&%2365403;%3C/text%3E%3Ctext y='365' class='a12'%3E|%3C/text%3E%3Ctext y='349' class='a11'%3E7%3C/text%3E%3Ctext y='333' class='a10'%3E&%2365387;%3C/text%3E%3Ctext y='317' class='a9'%3E&%2365418;%3C/text%3E%3Ctext y='301' class='a8'%3E<%3C/text%3E%3Ctext y='285' class='a7'%3E:%3C/text%3E%3Ctext y='269' class='a6'%3E&%2365410;%3C/text%3E%3Ctext y='253' class='a5'%3E&%2365403;%3C/text%3E%3Ctext y='237' class='a4'%3E&%2365428;%3C/text%3E%3Ctext y='221' class='a3'%3E&%2365386;%3C/text%3E%3Ctext y='205' class='a3'%3E&%2365420;%3C/text%3E%3Ctext y='189' class='a2'%3E1%3C/text%3E%3Ctext y='173' class='a1'%3E&%2365399;%3C/text%3E%3Ctext y='157' class='a1'%3E&%2365405;%3C/text%3E%3Ctext y='765'%3E&%2365409;%3C/text%3E%3Ctext y='749' class='a13'%3E&%2365414;%3C/text%3E%3Ctext y='733' class='a12'%3E&%2365397;%3C/text%3E%3Ctext y='717' class='a11'%3E&%2365411;%3C/text%3E%3Ctext y='701' class='a10'%3E4%3C/text%3E%3Ctext y='685' class='a9'%3E&%2365424;%3C/text%3E%3Ctext y='669' class='a9'%3E&%2365408;%3C/text%3E%3Ctext y='653' class='a8'%3E&%2365437;%3C/text%3E%3Ctext y='637' class='a7'%3E&%2365398;%3C/text%3E%3Ctext y='621' class='a6'%3E&%2365434;%3C/text%3E%3Ctext y='605' class='a5'%3E&%2365382;%3C/text%3E%3Ctext y='589' class='a5'%3E4%3C/text%3E%3Ctext y='573' class='a4'%3E5%3C/text%3E%3Ctext y='557' class='a3'%3E&%2365436;%3C/text%3E%3Ctext y='541' class='a2'%3E&%2365408;%3C/text%3E%3Ctext y='525' class='a2'%3E&%2365428;%3C/text%3E%3Ctext y='509' class='a1'%3E&%2365413;%3C/text%3E%3C/g%3E%3Cg transform='translate(387)'%3E%3Ctext y='717'%3E&%2365437;%3C/text%3E%3Ctext y='701' class='a12'%3E&%2365430;%3C/text%3E%3Ctext y='685' class='a10'%3E&%2365422;%3C/text%3E%3Ctext y='669' class='a8'%3E9%3C/text%3E%3Ctext y='653' class='a6'%3E*%3C/text%3E%3Ctext y='637' class='a4'%3E&%2365437;%3C/text%3E%3Ctext y='621' class='a3'%3E&%2365427;%3C/text%3E%3Ctext y='605' class='a1'%3E&%2365400;%3C/text%3E%3C/g%3E%3Cg transform='translate(409)'%3E%3Ctext y='61'%3E&%2365403;%3C/text%3E%3Ctext y='45' class='a13'%3EZ%3C/text%3E%3Ctext y='29' class='a11'%3E&%2365423;%3C/text%3E%3Ctext y='13' class='a10'%3E9%3C/text%3E%3Ctext y='829' class='a9'%3E|%3C/text%3E%3Ctext y='813' class='a7'%3E&%2365385;%3C/text%3E%3Ctext y='797' class='a6'%3E&%2365390;%3C/text%3E%3Ctext y='781' class='a5'%3E&%2365418;%3C/text%3E%3Ctext y='765' class='a4'%3E&%2365398;%3C/text%3E%3Ctext y='749' class='a3'%3E&%2365387;%3C/text%3E%3Ctext y='733' class='a2'%3E1%3C/text%3E%3Ctext y='717' class='a1'%3E&%2365408;%3C/text%3E%3C/g%3E%3Cg transform='translate(431)'%3E%3Ctext y='301'%3E&%2365408;%3C/text%3E%3Ctext y='285' class='a13'%3E:%3C/text%3E%3Ctext y='269' class='a12'%3E&%2365397;%3C/text%3E%3Ctext y='253' class='a11'%3E&%2365407;%3C/text%3E%3Ctext y='237' class='a10'%3E&%2365409;%3C/text%3E%3Ctext y='221' class='a9'%3E&%2365426;%3C/text%3E%3Ctext y='205' class='a8'%3E&%2365420;%3C/text%3E%3Ctext y='189' class='a7'%3E&%2365402;%3C/text%3E%3Ctext y='173' class='a6'%3E&%2365429;%3C/text%3E%3Ctext y='157' class='a5'%3E.%3C/text%3E%3Ctext y='141' class='a4'%3E&%2365435;%3C/text%3E%3Ctext y='125' class='a3'%3E&%2365403;%3C/text%3E%3Ctext y='109' class='a2'%3E<%3C/text%3E%3Ctext y='93' class='a1'%3E&%2365392;%3C/text%3E%3Ctext y='77' class='a1'%3E&%2365431;%3C/text%3E%3Ctext y='621'%3E4%3C/text%3E%3Ctext y='605' class='a13'%3E&%2365404;%3C/text%3E%3Ctext y='589' class='a11'%3E&%2365420;%3C/text%3E%3Ctext y='573' class='a10'%3E&%2365409;%3C/text%3E%3Ctext y='557' class='a9'%3E"%3C/text%3E%3Ctext y='541' class='a8'%3E&%2365407;%3C/text%3E%3Ctext y='525' class='a7'%3E&%2365417;%3C/text%3E%3Ctext y='509' class='a6'%3E+%3C/text%3E%3Ctext y='493' class='a4'%3E0%3C/text%3E%3Ctext y='477' class='a3'%3E&%2365388;%3C/text%3E%3Ctext y='461' class='a2'%3E&%2365405;%3C/text%3E%3Ctext y='445' class='a1'%3E.%3C/text%3E%3Ctext y='429' class='a1'%3E=%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --fx-rain-size: 440px 640px, 440px 832px; --fx-rain-fall: 0 640px, 0 832px; /* rain:end */ } .fx-grid { position: relative; isolation: isolate; } .fx-grid::before { content: ""; position: absolute; inset: 0; background-image: var(--fx-backdrop-image, linear-gradient(transparent calc(100% - 1px), var(--grid-line-h) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), var(--grid-line-v) calc(100% - 1px))); background-size: 32px 32px; background-color: var(--fx-backdrop-color, transparent); -webkit-mask-image: var(--fx-backdrop-mask, none); mask-image: var(--fx-backdrop-mask, none); -webkit-mask-size: var(--fx-rain-size); mask-size: var(--fx-rain-size); opacity: var(--fx-grid-opacity, 0.22); /* Two tiles of different heights moved by their own heights in the same time: two speeds from one animation. Stepped to ~16 repaints a second — at this speed that is still one pixel a step, and it keeps a full-page layer cheap. */ animation: var(--fx-backdrop-anim, none) 60s steps(960) infinite; pointer-events: none; z-index: -1; } @keyframes fx-rain { to { -webkit-mask-position: var(--fx-rain-fall); mask-position: var(--fx-rain-fall); } } [data-motion="off"] .fx-grid::before { animation: none; } @media (prefers-reduced-motion: reduce) { .fx-grid::before { animation: none; } } /* Mirrored diagonal gradient bars (header 135deg / footer 315deg). */ .fx-bar-top { background: linear-gradient(135deg, var(--bg-panel) 0%, color-mix(in srgb, var(--accent-purple) 22%, var(--bg-panel)) 55%, var(--bg-panel) 100%); border-bottom: 2px solid var(--accent-pink); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-pink) calc(35% * var(--glow-strength)), transparent); } .fx-bar-bottom { background: linear-gradient(315deg, var(--bg-panel) 0%, color-mix(in srgb, var(--accent-blue) 20%, var(--bg-panel)) 55%, var(--bg-panel) 100%); border-top: 2px solid var(--accent-blue); box-shadow: 0 -2px 12px color-mix(in srgb, var(--accent-blue) calc(30% * var(--glow-strength)), transparent); } /* Themed pink→purple→blue neon scrollbars. IMPORTANT: do NOT set standard scrollbar-width/scrollbar-color — Chromium 121+ ignores ::-webkit-scrollbar rules when those are present, which kills the gradient. Chrome/Edge/Safari get the gradient thumb; Firefox falls back to its default (accessible) scrollbar. Add class `fx-scroll` to any scroll container. */ .fx-scroll::-webkit-scrollbar { width: 11px; height: 11px; } .fx-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 6px; } .fx-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-pink), var(--accent-purple) 55%, var(--accent-blue)); border: 2px solid var(--bg-panel); border-radius: 6px; background-clip: padding-box; box-shadow: 0 0 8px color-mix(in srgb, var(--accent-pink) calc(60% * var(--glow-strength)), transparent); } .fx-scroll::-webkit-scrollbar-thumb:hover { filter: brightness(1.12); } /* Optional subtle glow pulse — opt-in, motion-gated (stops when motion is off). */ @keyframes fx-pulse { from { filter: brightness(1); } to { filter: brightness(1.12); } } .fx-pulse { animation: fx-pulse 1.8s ease-in-out infinite alternate; } [data-motion="off"] .fx-pulse { animation: none; } @media (prefers-reduced-motion: reduce) { .fx-pulse { animation: none; } }