(function() { var savedTheme = 'system'; try { savedTheme = localStorage.getItem('theme-mode') || 'system'; } catch (error) {} var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; var isDark = !window.__zetcardLightOnly && (savedTheme === 'dark' || (savedTheme === 'system' && systemPrefersDark)); var docEl = document.documentElement; var normalizedPath = window.location.pathname.replace(/\/+$/, '') || '/'; var stackQuery = new URLSearchParams(window.location.search).get('stack'); var stackPages = stackQuery ? stackQuery.split(',') : []; var topPage = stackPages.length > 0 ? stackPages[stackPages.length - 1] : 'myCard'; var isInitialMyCardRoute = normalizedPath === '/app' && topPage === 'myCard'; var defaultBackgroundColor = isDark ? '#000000' : '#ffffff'; var initialMyCardBackgroundColor = defaultBackgroundColor; var initialMyCardBackgroundType = 'default'; var myCardBackgroundTraceStorageKey = 'zetcard:trace-mycard-bg'; var myCardBackgroundTraceQueryKeys = ['trace_mycard_bg', 'debug_mycard_bg']; var bootstrapMeshGradientConfigs = {"cool-summer":{"backgroundColor":"hsla(197,92%,60%,1)","layers":[{"id":"mesh-layer-0","x":96,"y":96,"color":"hsla(55,93%,54%,0.85)","start":5,"end":86},{"id":"mesh-layer-1","x":5,"y":90,"color":"hsla(229,71%,68%,1)","start":13,"end":65},{"id":"mesh-layer-2","x":57,"y":73,"color":"hsla(308,93%,51%,1)","start":3,"end":89},{"id":"mesh-layer-3","x":20,"y":4,"color":"hsla(318,60%,76%,1)","start":22,"end":56},{"id":"mesh-layer-4","x":74,"y":15,"color":"hsla(324,92%,59%,1)","start":13,"end":57}]},"sunset-vibes":{"backgroundColor":"#ff9a9e","layers":[{"id":"mesh-layer-0","x":50,"y":100,"color":"#fad0c4","start":0,"end":50},{"id":"mesh-layer-1","x":80,"y":20,"color":"#ffecd2","start":0,"end":40},{"id":"mesh-layer-2","x":10,"y":30,"color":"#fbc2eb","start":0,"end":60}]},"northern-lights":{"backgroundColor":"#000000","layers":[{"id":"mesh-layer-0","x":50,"y":0,"color":"#4facfe","start":0,"end":70},{"id":"mesh-layer-1","x":0,"y":50,"color":"#00f2fe","start":0,"end":50},{"id":"mesh-layer-2","x":100,"y":50,"color":"#43e97b","start":0,"end":50},{"id":"mesh-layer-3","x":50,"y":100,"color":"#38f9d7","start":0,"end":70}]},"mystic-nebula":{"backgroundColor":"#17052f","layers":[{"id":"mesh-layer-0","x":18,"y":78,"color":"rgba(125, 211, 252, 0.95)","start":0,"end":52},{"id":"mesh-layer-1","x":82,"y":18,"color":"rgba(244, 114, 182, 0.96)","start":0,"end":48},{"id":"mesh-layer-2","x":50,"y":54,"color":"rgba(250, 204, 21, 0.72)","start":0,"end":44},{"id":"mesh-layer-3","x":34,"y":18,"color":"rgba(139, 92, 246, 0.78)","start":0,"end":42}]},"spring-bloom":{"backgroundColor":"#a8edea","layers":[{"id":"mesh-layer-0","x":0,"y":0,"color":"#fed6e3","start":0,"end":50},{"id":"mesh-layer-1","x":100,"y":100,"color":"#d299c2","start":0,"end":50},{"id":"mesh-layer-2","x":50,"y":50,"color":"#fef9d7","start":0,"end":60}]},"deep-ocean":{"backgroundColor":"#0f2027","layers":[{"id":"mesh-layer-1","x":50,"y":0,"color":"#3a7bd5","start":0,"end":70}]},"glass-morphism":{"backgroundColor":"rgba(255, 255, 255, 0.4)","layers":[{"id":"mesh-layer-0","x":10,"y":10,"color":"rgba(255, 255, 255, 0.8)","start":0,"end":20},{"id":"mesh-layer-1","x":90,"y":90,"color":"rgba(255, 255, 255, 0.8)","start":0,"end":20}]},"mesh-sublime":{"backgroundColor":"#FC5C7D","layers":[{"id":"mesh-layer-0","x":10,"y":20,"color":"#6A82FB","start":0,"end":50},{"id":"mesh-layer-1","x":90,"y":80,"color":"#FC5C7D","start":0,"end":50},{"id":"mesh-layer-2","x":50,"y":50,"color":"#FF9A9E","start":0,"end":60},{"id":"mesh-layer-3","x":80,"y":10,"color":"#A18CD1","start":0,"end":40}]},"mesh-vice-city":{"backgroundColor":"#3494E6","layers":[{"id":"mesh-layer-0","x":0,"y":100,"color":"#EC6EAD","start":0,"end":60},{"id":"mesh-layer-1","x":100,"y":0,"color":"#3494E6","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#9B59B6","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":20,"color":"#E55D87","start":0,"end":40}]},"mesh-cosmic-fusion":{"backgroundColor":"#ff00cc","layers":[{"id":"mesh-layer-0","x":80,"y":90,"color":"#333399","start":0,"end":70},{"id":"mesh-layer-1","x":10,"y":10,"color":"#ff00cc","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#9900FF","start":0,"end":50},{"id":"mesh-layer-3","x":90,"y":10,"color":"#6600CC","start":0,"end":40}]},"mesh-citrus":{"backgroundColor":"#FDC830","layers":[{"id":"mesh-layer-0","x":90,"y":90,"color":"#F37335","start":0,"end":70},{"id":"mesh-layer-1","x":10,"y":10,"color":"#FDC830","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#FFB75E","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":80,"color":"#FF8C00","start":0,"end":40}]},"mesh-summer-dog":{"backgroundColor":"#a8ff78","layers":[{"id":"mesh-layer-0","x":100,"y":100,"color":"#78ffd6","start":0,"end":60},{"id":"mesh-layer-1","x":0,"y":0,"color":"#a8ff78","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#6DD5FA","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":90,"color":"#11998e","start":0,"end":30}]},"mesh-purple-love":{"backgroundColor":"#cc2b5e","layers":[{"id":"mesh-layer-0","x":90,"y":90,"color":"#753a88","start":0,"end":70},{"id":"mesh-layer-1","x":10,"y":10,"color":"#cc2b5e","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#8E44AD","start":0,"end":50},{"id":"mesh-layer-3","x":80,"y":20,"color":"#D2B4DE","start":0,"end":40}]},"mesh-electric-violet":{"backgroundColor":"#4776E6","layers":[{"id":"mesh-layer-0","x":100,"y":0,"color":"#8E54E9","start":0,"end":70},{"id":"mesh-layer-1","x":0,"y":100,"color":"#4776E6","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#9B59B6","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":20,"color":"#5B86E5","start":0,"end":40}]},"mesh-amin":{"backgroundColor":"#8E2DE2","layers":[{"id":"mesh-layer-0","x":100,"y":100,"color":"#4A00E0","start":0,"end":70},{"id":"mesh-layer-1","x":0,"y":0,"color":"#8E2DE2","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#800080","start":0,"end":50},{"id":"mesh-layer-3","x":90,"y":10,"color":"#4B0082","start":0,"end":40}]},"mesh-titanium":{"backgroundColor":"#283048","layers":[{"id":"mesh-layer-0","x":50,"y":100,"color":"#859398","start":0,"end":80},{"id":"mesh-layer-1","x":50,"y":0,"color":"#283048","start":0,"end":60},{"id":"mesh-layer-2","x":0,"y":50,"color":"#485563","start":0,"end":50},{"id":"mesh-layer-3","x":100,"y":50,"color":"#29323c","start":0,"end":50}]},"mesh-wiretap":{"backgroundColor":"hsla(0, 0%, 100%, 1)","layers":[{"id":"mesh-layer-0","x":85,"y":80,"color":"hsla(150, 36%, 88%, 1)","start":9,"end":55},{"id":"mesh-layer-1","x":60,"y":24,"color":"hsla(219, 70%, 87%, 1)","start":5,"end":72},{"id":"mesh-layer-2","x":13,"y":82,"color":"hsla(297, 70%, 76%, 0.49)","start":5,"end":52},{"id":"mesh-layer-3","x":24,"y":7,"color":"hsla(182, 50%, 78%, 1)","start":13,"end":68}]},"mesh-warm":{"backgroundColor":"hsla(52, 51%, 88%, 1)","layers":[{"id":"mesh-layer-0","x":31,"y":78,"color":"hsla(175, 58%, 78%, 1)","start":3,"end":75},{"id":"mesh-layer-1","x":88,"y":93,"color":"hsla(101, 68%, 100%, 1)","start":3,"end":83},{"id":"mesh-layer-2","x":99,"y":8,"color":"hsla(84, 62%, 87%, 1)","start":5,"end":67},{"id":"mesh-layer-3","x":41,"y":0,"color":"hsla(36, 47%, 87%, 1)","start":8,"end":61},{"id":"mesh-layer-4","x":19,"y":59,"color":"hsla(189, 44%, 92%, 1)","start":16,"end":88}]},"mesh-ocean":{"backgroundColor":"hsla(258, 57%, 79%, 1)","layers":[{"id":"mesh-layer-0","x":11,"y":96,"color":"hsla(181, 55%, 66%, 1)","start":37,"end":90},{"id":"mesh-layer-1","x":92,"y":89,"color":"hsla(258, 70%, 75%, 1)","start":31,"end":84},{"id":"mesh-layer-2","x":58,"y":7,"color":"hsla(202, 66%, 68%, 1)","start":41,"end":61},{"id":"mesh-layer-3","x":62,"y":35,"color":"hsla(225, 53%, 66%, 1)","start":22,"end":59},{"id":"mesh-layer-4","x":2,"y":63,"color":"hsla(218, 56%, 94%, 1)","start":19,"end":70}]}}; var bootstrapMeshGradientPresetStyles = {"cool-summer":{"backgroundImage":"\n radial-gradient(circle at 96% 96%, hsla(55,93%,54%,0.85) 5%, transparent 86%),\n radial-gradient(circle at 5% 90%, hsla(229,71%,68%,1) 13%, transparent 65%),\n radial-gradient(circle at 57% 73%, hsla(308,93%,51%,1) 3%, transparent 89%),\n radial-gradient(circle at 20% 4%, hsla(318,60%,76%,1) 22%, transparent 56%),\n radial-gradient(circle at 74% 15%, hsla(324,92%,59%,1) 13%, transparent 57%)\n ","backgroundBlendMode":"normal, normal, normal, normal, normal"},"sunset-vibes":{"backgroundImage":"\n radial-gradient(circle at 50% 100%, #fad0c4 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, #ffecd2 0%, transparent 40%),\n radial-gradient(circle at 10% 30%, #fbc2eb 0%, transparent 60%)\n ","backgroundBlendMode":"normal, normal, normal"},"northern-lights":{"backgroundImage":"\n radial-gradient(circle at 50% -20%, #4facfe 0%, transparent 70%),\n radial-gradient(circle at 0% 50%, #00f2fe 0%, transparent 50%),\n radial-gradient(circle at 100% 50%, #43e97b 0%, transparent 50%),\n radial-gradient(circle at 50% 100%, #38f9d7 0%, transparent 70%)\n ","backgroundBlendMode":"screen, screen, screen, screen"},"mystic-nebula":{"backgroundImage":"\n radial-gradient(circle at 18% 78%, rgba(125, 211, 252, 0.95) 0%, transparent 52%),\n radial-gradient(circle at 82% 18%, rgba(244, 114, 182, 0.96) 0%, transparent 48%),\n radial-gradient(circle at 50% 54%, rgba(250, 204, 21, 0.72) 0%, transparent 44%),\n radial-gradient(circle at 34% 18%, rgba(139, 92, 246, 0.78) 0%, transparent 42%),\n linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(76, 29, 149, 0.52) 45%, rgba(12, 10, 24, 0.9) 100%)\n ","backgroundBlendMode":"screen, screen, soft-light, color-dodge, normal"},"spring-bloom":{"backgroundImage":"\n radial-gradient(circle at 0% 0%, #fed6e3 0%, transparent 50%),\n radial-gradient(circle at 100% 100%, #d299c2 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, #fef9d7 0%, transparent 60%)\n ","backgroundBlendMode":"multiply, multiply, multiply"},"deep-ocean":{"backgroundImage":"\n linear-gradient(to right, #203a43, #2c5364),\n radial-gradient(circle at 50% 0%, #3a7bd5 0%, transparent 70%)\n ","backgroundBlendMode":"overlay, screen"},"glass-morphism":{"backgroundImage":"\n radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),\n radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%)\n ","backgroundBlendMode":""},"mesh-sublime":{"backgroundImage":"\n radial-gradient(circle at 10% 20%, #6A82FB 0%, transparent 50%),\n radial-gradient(circle at 90% 80%, #FC5C7D 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, #FF9A9E 0%, transparent 60%),\n radial-gradient(circle at 80% 10%, #A18CD1 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, screen, overlay"},"mesh-vice-city":{"backgroundImage":"\n radial-gradient(circle at 0% 100%, #EC6EAD 0%, transparent 60%),\n radial-gradient(circle at 100% 0%, #3494E6 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #9B59B6 0%, transparent 50%),\n radial-gradient(circle at 20% 20%, #E55D87 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-cosmic-fusion":{"backgroundImage":"\n radial-gradient(circle at 80% 90%, #333399 0%, transparent 70%),\n radial-gradient(circle at 10% 10%, #ff00cc 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #9900FF 0%, transparent 50%),\n radial-gradient(circle at 90% 10%, #6600CC 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, overlay, color-dodge"},"mesh-citrus":{"backgroundImage":"\n radial-gradient(circle at 90% 90%, #F37335 0%, transparent 70%),\n radial-gradient(circle at 10% 10%, #FDC830 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #FFB75E 0%, transparent 50%),\n radial-gradient(circle at 20% 80%, #FF8C00 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-summer-dog":{"backgroundImage":"\n radial-gradient(circle at 100% 100%, #78ffd6 0%, transparent 60%),\n radial-gradient(circle at 0% 0%, #a8ff78 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #6DD5FA 0%, transparent 50%),\n radial-gradient(circle at 20% 90%, #11998e 0%, transparent 30%)\n ","backgroundBlendMode":"normal, normal, overlay, soft-light"},"mesh-purple-love":{"backgroundImage":"\n radial-gradient(circle at 90% 90%, #753a88 0%, transparent 70%),\n radial-gradient(circle at 10% 10%, #cc2b5e 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #8E44AD 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, #D2B4DE 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-electric-violet":{"backgroundImage":"\n radial-gradient(circle at 100% 0%, #8E54E9 0%, transparent 70%),\n radial-gradient(circle at 0% 100%, #4776E6 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #9B59B6 0%, transparent 50%),\n radial-gradient(circle at 20% 20%, #5B86E5 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, overlay, color-dodge"},"mesh-amin":{"backgroundImage":"\n radial-gradient(circle at 100% 100%, #4A00E0 0%, transparent 70%),\n radial-gradient(circle at 0% 0%, #8E2DE2 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #800080 0%, transparent 50%),\n radial-gradient(circle at 90% 10%, #4B0082 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-titanium":{"backgroundImage":"\n radial-gradient(circle at 50% 100%, #859398 0%, transparent 80%),\n radial-gradient(circle at 50% 0%, #283048 0%, transparent 60%),\n radial-gradient(circle at 0% 50%, #485563 0%, transparent 50%),\n radial-gradient(circle at 100% 50%, #29323c 0%, transparent 50%)\n ","backgroundBlendMode":"normal, normal, overlay, soft-light"},"mesh-wiretap":{"backgroundImage":"\n radial-gradient(circle at 85% 80%, hsla(150, 36%, 88%, 1) 9%, transparent 55%),\n radial-gradient(circle at 60% 24%, hsla(219, 70%, 87%, 1) 5%, transparent 72%),\n radial-gradient(circle at 13% 82%, hsla(297, 70%, 76%, 0.49) 5%, transparent 52%),\n radial-gradient(circle at 24% 7%, hsla(182, 50%, 78%, 1) 13%, transparent 68%)\n ","backgroundBlendMode":"normal, normal, normal, normal"},"mesh-warm":{"backgroundImage":"\n radial-gradient(circle at 31% 78%, hsla(175, 58%, 78%, 1) 3%, transparent 75%),\n radial-gradient(circle at 88% 93%, hsla(101, 68%, 100%, 1) 3%, transparent 83%),\n radial-gradient(circle at 99% 8%, hsla(84, 62%, 87%, 1) 5%, transparent 67%),\n radial-gradient(circle at 41% 0%, hsla(36, 47%, 87%, 1) 8%, transparent 61%),\n radial-gradient(circle at 19% 59%, hsla(189, 44%, 92%, 1) 16%, transparent 88%)\n ","backgroundBlendMode":"normal"},"mesh-ocean":{"backgroundImage":"\n radial-gradient(circle at 11% 96%, hsla(181, 55%, 66%, 1) 37%, transparent 90%),\n radial-gradient(circle at 92% 89%, hsla(258, 70%, 75%, 1) 31%, transparent 84%),\n radial-gradient(circle at 58% 7%, hsla(202, 66%, 68%, 1) 41%, transparent 61%),\n radial-gradient(circle at 62% 35%, hsla(225, 53%, 66%, 1) 22%, transparent 59%),\n radial-gradient(circle at 2% 63%, hsla(218, 56%, 94%, 1) 19%, transparent 70%)\n ","backgroundBlendMode":"normal"}}; var MIN_SAMPLE_SIZE_PX = 48; var MAX_SAMPLE_SIDE_PX = 320; function normalizeTraceFlag(value) { return value === '1' || value === 'true' || value === 'on' || value === 'yes'; } function isMyCardBackgroundTraceEnabled() { try { if (window.__ZETCARD_TRACE_MYCARD_BACKGROUND__) { return true; } } catch (error) {} try { var params = new URLSearchParams(window.location.search); for (var index = 0; index < myCardBackgroundTraceQueryKeys.length; index += 1) { var queryValue = params.get(myCardBackgroundTraceQueryKeys[index]); if (queryValue === null) { continue; } var normalizedValue = String(queryValue).trim().toLowerCase(); var isEnabled = normalizedValue === '' || normalizeTraceFlag(normalizedValue); window.localStorage.setItem(myCardBackgroundTraceStorageKey, isEnabled ? 'true' : 'false'); return isEnabled; } } catch (error) {} try { var storedValue = window.localStorage.getItem(myCardBackgroundTraceStorageKey); if (storedValue) { return normalizeTraceFlag(String(storedValue).trim().toLowerCase()); } } catch (error) {} return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'; } function traceMyCardBackgroundMutation(source, rows) { if (!isMyCardBackgroundTraceEnabled() || !rows || rows.length === 0) { return; } var timeMs = typeof performance !== 'undefined' ? Math.round(performance.now() * 100) / 100 : undefined; var route = window.location.pathname + window.location.search; var tableRows = rows.map(function(row) { return { timeMs: timeMs, route: route, source: source, target: row.target || 'documentElement', action: row.action, property: row.property, value: row.value || '', inlineAfter: row.inlineAfter || '', backgroundType: row.backgroundType || '', reason: row.reason || '', stack: row.stack || '' }; }); var summary = tableRows.map(function(row) { return row.action + ' ' + row.property + (row.value ? '=' + row.value : ''); }).join(', '); console.groupCollapsed('[mycard-bg] ' + source + ': ' + summary); console.table(tableRows); console.groupEnd(); traceMyCardBackgroundSnapshot(source, 'after mutation'); } function getMyCardBackgroundTraceStack() { try { return String(new Error().stack || '') .split('\n') .slice(2, 8) .map(function(line) { return line.trim(); }) .join(' | '); } catch (error) { return ''; } } function getMyCardBackgroundStyleTarget(style) { if (style === document.documentElement.style) { return 'documentElement'; } if (document.body && style === document.body.style) { return 'body'; } var splash = document.getElementById('splash-screen'); if (splash && style === splash.style) { return '#splash-screen'; } return 'CSSStyleDeclaration'; } function installMyCardBackgroundPropertyTrace() { if (!isMyCardBackgroundTraceEnabled() || !window.CSSStyleDeclaration) { return; } var prototype = window.CSSStyleDeclaration.prototype; if (prototype.__zetcardMyCardBackgroundTracePatched) { return; } var originalSetProperty = prototype.setProperty; var originalRemoveProperty = prototype.removeProperty; Object.defineProperty(prototype, '__zetcardMyCardBackgroundTracePatched', { value: true, configurable: true }); prototype.setProperty = function(propertyName, value, priority) { var result = originalSetProperty.call(this, propertyName, value, priority); try { if (String(propertyName || '').indexOf('--mycard-page-background-') === 0 || String(propertyName || '') === '--mycard-splash-background-color') { traceMyCardBackgroundMutation('CSSStyleDeclaration.setProperty', [{ action: 'set', property: String(propertyName), value: String(value || ''), inlineAfter: this.getPropertyValue(propertyName), target: getMyCardBackgroundStyleTarget(this), reason: 'global hook: every myCard/splash background var write', stack: getMyCardBackgroundTraceStack() }]); } } catch (error) {} return result; }; prototype.removeProperty = function(propertyName) { var previousValue = originalRemoveProperty.call(this, propertyName); try { if (String(propertyName || '').indexOf('--mycard-page-background-') === 0 || String(propertyName || '') === '--mycard-splash-background-color') { traceMyCardBackgroundMutation('CSSStyleDeclaration.removeProperty', [{ action: 'remove', property: String(propertyName), value: previousValue || '', inlineAfter: this.getPropertyValue(propertyName), target: getMyCardBackgroundStyleTarget(this), reason: 'global hook: every myCard/splash background var removal', stack: getMyCardBackgroundTraceStack() }]); } } catch (error) {} return previousValue; }; } function truncateMyCardBackgroundTraceValue(value) { value = String(value || ''); return value.length > 220 ? value.slice(0, 220) + '...' : value; } function getMyCardBackgroundElementLabel(element, fallback) { if (!element) { return fallback; } var id = element.id ? '#' + element.id : ''; var className = ''; try { className = typeof element.className === 'string' ? element.className.trim().replace(/\s+/g, '.') : ''; } catch (error) {} var classSelector = className ? '.' + truncateMyCardBackgroundTraceValue(className).slice(0, 80) : ''; return String(element.tagName || 'element').toLowerCase() + id + classSelector; } function readMyCardBackgroundComputedRow(element, label) { if (!element || typeof window.getComputedStyle !== 'function') { return null; } var computedStyle = window.getComputedStyle(element); var inlineStyle = element.style || {}; return { element: label, node: getMyCardBackgroundElementLabel(element, label), inlineBackgroundColor: inlineStyle.getPropertyValue ? inlineStyle.getPropertyValue('background-color') : '', inlineBackgroundImage: inlineStyle.getPropertyValue ? truncateMyCardBackgroundTraceValue(inlineStyle.getPropertyValue('background-image')) : '', computedBackgroundColor: computedStyle.backgroundColor, computedBackgroundImage: truncateMyCardBackgroundTraceValue(computedStyle.backgroundImage), computedBackgroundSize: computedStyle.backgroundSize, computedBackgroundPosition: computedStyle.backgroundPosition, computedBackgroundRepeat: computedStyle.backgroundRepeat, computedOpacity: computedStyle.opacity, computedZIndex: computedStyle.zIndex, cssMycardColor: computedStyle.getPropertyValue('--mycard-page-background-color').trim(), cssMycardImage: truncateMyCardBackgroundTraceValue(computedStyle.getPropertyValue('--mycard-page-background-image').trim()), cssSplashColor: computedStyle.getPropertyValue('--mycard-splash-background-color').trim() }; } function traceMyCardBackgroundSnapshot(source, reason) { if (!isMyCardBackgroundTraceEnabled()) { return; } var viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0; var viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0; var topPoint = viewportWidth > 0 && document.elementFromPoint ? document.elementFromPoint(Math.round(viewportWidth / 2), 1) : null; var centerPoint = viewportWidth > 0 && viewportHeight > 0 && document.elementFromPoint ? document.elementFromPoint(Math.round(viewportWidth / 2), Math.round(viewportHeight / 2)) : null; var rows = [ readMyCardBackgroundComputedRow(document.documentElement, 'html'), readMyCardBackgroundComputedRow(document.body, 'body'), readMyCardBackgroundComputedRow(document.getElementById('splash-screen'), '#splash-screen'), readMyCardBackgroundComputedRow(topPoint, 'elementFromPoint(top)'), readMyCardBackgroundComputedRow(centerPoint, 'elementFromPoint(center)') ].filter(Boolean); console.groupCollapsed('[mycard-bg-snapshot] ' + source + ': ' + reason); console.table(rows); console.groupEnd(); } function scheduleMyCardBackgroundSnapshot(reason, delayMs) { if (!isMyCardBackgroundTraceEnabled()) { return; } window.setTimeout(function() { traceMyCardBackgroundSnapshot('RootLayout:bootstrap-observer', reason); }, delayMs); } function installMyCardBackgroundObserver() { if (!isMyCardBackgroundTraceEnabled() || typeof MutationObserver === 'undefined') { return; } var scheduled = false; var observer = new MutationObserver(function(mutations) { var relevantMutation = mutations.some(function(mutation) { return mutation.type === 'attributes' && (mutation.attributeName === 'style' || mutation.attributeName === 'class' || String(mutation.attributeName || '').indexOf('data-') === 0); }); if (!relevantMutation || scheduled) { return; } scheduled = true; window.requestAnimationFrame(function() { scheduled = false; traceMyCardBackgroundSnapshot('RootLayout:mutation-observer', 'html/body/splash attributes changed'); }); }); var observeTarget = function(target) { if (target) { observer.observe(target, { attributes: true, attributeFilter: ['style', 'class', 'data-edit-pages-opening-hold', 'data-route-transition-mode', 'data-route-transition-scope', 'data-route-transition-direction', 'data-card-opening-splash-pending'] }); } }; observeTarget(document.documentElement); observeTarget(document.body); observeTarget(document.getElementById('splash-screen')); window.setTimeout(function() { observer.disconnect(); }, 5000); } installMyCardBackgroundPropertyTrace(); scheduleMyCardBackgroundSnapshot('after head bootstrap script', 0); scheduleMyCardBackgroundSnapshot('after 100ms', 100); scheduleMyCardBackgroundSnapshot('after 500ms', 500); scheduleMyCardBackgroundSnapshot('after 1500ms', 1500); window.addEventListener('DOMContentLoaded', function() { installMyCardBackgroundObserver(); traceMyCardBackgroundSnapshot('RootLayout:DOMContentLoaded', 'body/splash now available'); }, { once: true }); window.addEventListener('load', function() { traceMyCardBackgroundSnapshot('RootLayout:load', 'window load'); }, { once: true }); function clampUnit(value) { if (!isFinite(value)) return 0; return Math.max(0, Math.min(1, value)); } function clampByte(value) { return Math.min(255, Math.max(0, Math.round(value))); } function parseChannel(value) { var normalizedValue = String(value || '').trim(); if (normalizedValue.endsWith('%')) { return clampByte((parseFloat(normalizedValue) / 100) * 255); } return clampByte(parseFloat(normalizedValue)); } function parseAlpha(value) { if (value == null) return 1; var normalizedValue = String(value).trim(); if (normalizedValue.endsWith('%')) { return clampUnit(parseFloat(normalizedValue) / 100); } return clampUnit(parseFloat(normalizedValue)); } function normalizeHue(value) { var normalizedValue = value % 360; return normalizedValue < 0 ? normalizedValue + 360 : normalizedValue; } function hslToRgb(hue, saturation, lightness) { var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation; var huePrime = hue / 60; var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1)); var red = 0; var green = 0; var blue = 0; if (huePrime >= 0 && huePrime < 1) { red = chroma; green = secondComponent; } else if (huePrime >= 1 && huePrime < 2) { red = secondComponent; green = chroma; } else if (huePrime >= 2 && huePrime < 3) { green = chroma; blue = secondComponent; } else if (huePrime >= 3 && huePrime < 4) { green = secondComponent; blue = chroma; } else if (huePrime >= 4 && huePrime < 5) { red = secondComponent; blue = chroma; } else { red = chroma; blue = secondComponent; } var matchLightness = lightness - (chroma / 2); return { r: clampByte((red + matchLightness) * 255), g: clampByte((green + matchLightness) * 255), b: clampByte((blue + matchLightness) * 255) }; } function parseHexColor(color) { var hexValue = color.slice(1).trim(); if ([3, 4, 6, 8].indexOf(hexValue.length) === -1) { return null; } if (hexValue.length <= 4) { hexValue = hexValue.split('').map(function(char) { return char + char; }).join(''); } var red = parseInt(hexValue.slice(0, 2), 16); var green = parseInt(hexValue.slice(2, 4), 16); var blue = parseInt(hexValue.slice(4, 6), 16); var alpha = hexValue.length === 8 ? parseInt(hexValue.slice(6, 8), 16) / 255 : 1; if ([red, green, blue, alpha].some(function(value) { return Number.isNaN(value); })) { return null; } return { r: red, g: green, b: blue, a: clampUnit(alpha) }; } function parseCssColor(color) { if (!color) return null; var normalizedColor = String(color).trim(); if (!normalizedColor) return null; if (normalizedColor.startsWith('#')) { return parseHexColor(normalizedColor); } var rgbMatch = normalizedColor.match(/^rgba?(s*([^,]+)s*,s*([^,]+)s*,s*([^,]+)s*(?:,s*([^)]+))?)$/i); if (rgbMatch) { return { r: parseChannel(rgbMatch[1]), g: parseChannel(rgbMatch[2]), b: parseChannel(rgbMatch[3]), a: parseAlpha(rgbMatch[4]) }; } var hslMatch = normalizedColor.match(/^hsla?(s*([+-]?d*.?d+)(?:deg)?s*,s*([+-]?d*.?d+)%s*,s*([+-]?d*.?d+)%s*(?:,s*([^)]+))?)$/i); if (hslMatch) { var rgbColor = hslToRgb( normalizeHue(parseFloat(hslMatch[1])), clampUnit(parseFloat(hslMatch[2]) / 100), clampUnit(parseFloat(hslMatch[3]) / 100) ); return { r: rgbColor.r, g: rgbColor.g, b: rgbColor.b, a: parseAlpha(hslMatch[4]) }; } return null; } function stringifyColor(color) { if (!color) return ''; if (color.a >= 0.999) { return 'rgb(' + Math.round(color.r) + ', ' + Math.round(color.g) + ', ' + Math.round(color.b) + ')'; } return 'rgba(' + Math.round(color.r) + ', ' + Math.round(color.g) + ', ' + Math.round(color.b) + ', ' + Number(color.a.toFixed(4)) + ')'; } function normalizeSampleSize(viewportWidth, viewportHeight) { var safeViewportWidth = Math.max(1, Math.round(viewportWidth || 1)); var safeViewportHeight = Math.max(1, Math.round(viewportHeight || 1)); var dominantSide = Math.max(safeViewportWidth, safeViewportHeight); var scale = dominantSide > MAX_SAMPLE_SIDE_PX ? MAX_SAMPLE_SIDE_PX / dominantSide : 1; return { width: Math.max(MIN_SAMPLE_SIZE_PX, Math.round(safeViewportWidth * scale)), height: Math.max(MIN_SAMPLE_SIZE_PX, Math.round(safeViewportHeight * scale)) }; } function createSamplingCanvas(width, height) { if (typeof OffscreenCanvas !== 'undefined') { return new OffscreenCanvas(width, height); } var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; return canvas; } function get2dContext(canvas) { return canvas.getContext('2d', { willReadFrequently: true }); } function samplePixelColor(context, width, y) { var pixelData = context.getImageData(Math.max(0, Math.floor(width / 2)), Math.max(0, Math.floor(y || 0)), 1, 1).data; var alpha = pixelData[3] / 255; if (alpha >= 0.999) { return 'rgb(' + pixelData[0] + ', ' + pixelData[1] + ', ' + pixelData[2] + ')'; } return 'rgba(' + pixelData[0] + ', ' + pixelData[1] + ', ' + pixelData[2] + ', ' + Number(alpha.toFixed(4)) + ')'; } function splitTopLevelLayers(value) { var layers = []; var depth = 0; var start = 0; for (var index = 0; index < value.length; index += 1) { var char = value[index]; if (char === '(') { depth += 1; continue; } if (char === ')') { depth = Math.max(0, depth - 1); continue; } if (char === ',' && depth === 0) { layers.push(value.slice(start, index).trim()); start = index + 1; } } var finalLayer = value.slice(start).trim(); if (finalLayer) { layers.push(finalLayer); } return layers; } function getFarthestCornerRadius(centerX, centerY, width, height) { return Math.max( Math.hypot(centerX, centerY), Math.hypot(width - centerX, centerY), Math.hypot(centerX, height - centerY), Math.hypot(width - centerX, height - centerY) ); } function toTransparentColor(color) { var parsedColor = parseCssColor(color); if (!parsedColor) { return 'rgba(0, 0, 0, 0)'; } return 'rgba(' + parsedColor.r + ', ' + parsedColor.g + ', ' + parsedColor.b + ', 0)'; } function buildLinearGradientFillFromAngle(context, width, height, angle, stops) { var radians = (angle * Math.PI) / 180; var directionX = Math.sin(radians); var directionY = -Math.cos(radians); var halfWidth = width / 2; var halfHeight = height / 2; var extent = Math.min( directionX === 0 ? Number.POSITIVE_INFINITY : halfWidth / Math.abs(directionX), directionY === 0 ? Number.POSITIVE_INFINITY : halfHeight / Math.abs(directionY) ); var centerX = halfWidth; var centerY = halfHeight; var gradient = context.createLinearGradient( centerX - (directionX * extent), centerY - (directionY * extent), centerX + (directionX * extent), centerY + (directionY * extent) ); stops.forEach(function(stop) { gradient.addColorStop(Math.max(0, Math.min(1, (stop.position || 0) / 100)), stop.color); }); return gradient; } function buildRadialGradientFill(context, width, height, centerX, centerY, stops) { var radius = Math.max(1, getFarthestCornerRadius(centerX, centerY, width, height)); var gradient = context.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius); stops.forEach(function(stop) { gradient.addColorStop(Math.max(0, Math.min(1, (stop.position || 0) / 100)), stop.color); }); return gradient; } function parseRadialGradientLayer(layerValue) { var normalizedValue = layerValue.replace(/s+/g, ' ').trim(); var match = normalizedValue.match(/^radial-gradient(s*circle ats*([-d.]+)%s*([-d.]+)%,s*(.+?)s+([-d.]+)%,s*transparents+([-d.]+)%s*)$/i); if (!match) { return null; } return { x: Math.max(0, Math.min(100, parseFloat(match[1]))), y: Math.max(0, Math.min(100, parseFloat(match[2]))), color: match[3].trim(), start: Math.max(0, Math.min(100, parseFloat(match[4]))), end: Math.max(0, Math.min(100, parseFloat(match[5]))) }; } function buildMeshRadialGradientFill(context, width, height, layer) { var centerX = (Math.max(0, Math.min(100, layer.x)) / 100) * width; var centerY = (Math.max(0, Math.min(100, layer.y)) / 100) * height; var radius = Math.max(1, getFarthestCornerRadius(centerX, centerY, width, height)); var gradient = context.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius); var startPosition = Math.max(0, Math.min(1, (layer.start || 0) / 100)); var endPosition = Math.max(startPosition, Math.max(0, Math.min(1, (layer.end || 0) / 100))); var transparentColor = toTransparentColor(layer.color); gradient.addColorStop(0, layer.color); if (startPosition > 0) { gradient.addColorStop(startPosition, layer.color); } gradient.addColorStop(endPosition, transparentColor); if (endPosition < 1) { gradient.addColorStop(1, transparentColor); } return gradient; } function parseLinearGradientStop(stopValue) { var trimmedValue = stopValue.trim(); if (!trimmedValue) { return null; } var match = trimmedValue.match(/^(.*?)(?:s+([+-]?d*.?d+)%)?$/); if (!match) { return null; } return { color: match[1].trim(), position: match[2] === undefined ? undefined : Math.max(0, Math.min(1, parseFloat(match[2]) / 100)) }; } function normalizeLinearGradientStops(stops) { if (!stops.length) { return []; } var normalizedStops = stops.map(function(stop) { return { color: stop.color, position: stop.position }; }); if (normalizedStops[0].position === undefined) { normalizedStops[0].position = 0; } if (normalizedStops[normalizedStops.length - 1].position === undefined) { normalizedStops[normalizedStops.length - 1].position = 1; } var previousDefinedIndex = 0; for (var index = 1; index < normalizedStops.length; index += 1) { if (normalizedStops[index].position === undefined) { continue; } var previousPosition = normalizedStops[previousDefinedIndex].position || 0; var currentPosition = normalizedStops[index].position || previousPosition; var gap = index - previousDefinedIndex; if (gap > 1) { for (var gapIndex = 1; gapIndex < gap; gapIndex += 1) { var progress = gapIndex / gap; normalizedStops[previousDefinedIndex + gapIndex].position = previousPosition + ((currentPosition - previousPosition) * progress); } } previousDefinedIndex = index; } for (var trailingIndex = 0; trailingIndex < normalizedStops.length; trailingIndex += 1) { if (normalizedStops[trailingIndex].position !== undefined) { continue; } normalizedStops[trailingIndex].position = normalizedStops[trailingIndex - 1] && normalizedStops[trailingIndex - 1].position !== undefined ? normalizedStops[trailingIndex - 1].position : 0; } return normalizedStops; } function parseLinearGradientLayer(layerValue) { var normalizedValue = layerValue.replace(/s+/g, ' ').trim(); var match = normalizedValue.match(/^linear-gradient((.*))$/i); if (!match) { return null; } var argumentsList = splitTopLevelLayers(match[1]); if (!argumentsList.length) { return null; } var firstArgument = (argumentsList[0] || '').trim(); var hasExplicitDirection = firstArgument.indexOf('to ') === 0 || /[+-]?d*.?d+deg$/i.test(firstArgument); var stopArguments = hasExplicitDirection ? argumentsList.slice(1) : argumentsList; var parsedStops = normalizeLinearGradientStops( stopArguments .map(parseLinearGradientStop) .filter(Boolean) ); if (!parsedStops.length) { return null; } return { direction: hasExplicitDirection ? firstArgument : '180deg', stops: parsedStops }; } function getLinearGradientVector(direction) { var normalizedDirection = String(direction || '').trim().toLowerCase(); if (normalizedDirection.indexOf('to ') === 0) { var x = 0; var y = 0; normalizedDirection.slice(3).split(/s+/).forEach(function(part) { if (part === 'left') x -= 1; if (part === 'right') x += 1; if (part === 'top') y -= 1; if (part === 'bottom') y += 1; }); var magnitude = Math.hypot(x, y) || 1; return { x: x / magnitude, y: y / magnitude }; } var angleMatch = normalizedDirection.match(/([+-]?d*.?d+)deg/); var angle = angleMatch ? parseFloat(angleMatch[1]) : 180; var radians = (angle * Math.PI) / 180; return { x: Math.sin(radians), y: -Math.cos(radians) }; } function buildLinearGradientFillFromDirection(context, width, height, direction, stops) { var directionVector = getLinearGradientVector(direction); var halfWidth = width / 2; var halfHeight = height / 2; var extent = Math.min( directionVector.x === 0 ? Number.POSITIVE_INFINITY : halfWidth / Math.abs(directionVector.x), directionVector.y === 0 ? Number.POSITIVE_INFINITY : halfHeight / Math.abs(directionVector.y) ); var centerX = halfWidth; var centerY = halfHeight; var gradient = context.createLinearGradient( centerX - (directionVector.x * extent), centerY - (directionVector.y * extent), centerX + (directionVector.x * extent), centerY + (directionVector.y * extent) ); stops.forEach(function(stop) { gradient.addColorStop(Math.max(0, Math.min(1, stop.position != null ? stop.position : 0)), stop.color); }); return gradient; } function getCompositeOperation(blendMode) { var normalizedBlendMode = String(blendMode || '').trim().toLowerCase(); if (!normalizedBlendMode || normalizedBlendMode === 'normal') { return 'source-over'; } return normalizedBlendMode; } function getMeshEdgeTintColor(background, edge) { var resolvedMeshConfig = background && background.meshConfig && Array.isArray(background.meshConfig.layers) ? background.meshConfig : (background && background.meshId ? bootstrapMeshGradientConfigs[background.meshId] : null); var presetStyle = background && background.meshId ? bootstrapMeshGradientPresetStyles[background.meshId] : null; if (!resolvedMeshConfig || !presetStyle) { return undefined; } var sampleSize = normalizeSampleSize(window.innerWidth, window.innerHeight); var canvas = createSamplingCanvas(sampleSize.width, sampleSize.height); var context = canvas ? get2dContext(canvas) : null; if (!context) { return resolvedMeshConfig.backgroundColor; } var sequence = splitTopLevelLayers(String(presetStyle.backgroundImage || '')); var blendModes = String(presetStyle.backgroundBlendMode || '').split(',').map(function(item) { return item.trim(); }).filter(Boolean); var sequenceItems = []; var radialLayerIndex = 0; sequence.forEach(function(sequenceValue) { var radialLayer = parseRadialGradientLayer(sequenceValue); if (radialLayer) { sequenceItems.push({ kind: 'radial', layer: Array.isArray(resolvedMeshConfig.layers) ? resolvedMeshConfig.layers[radialLayerIndex] || radialLayer : radialLayer }); radialLayerIndex += 1; return; } var linearGradientLayer = parseLinearGradientLayer(sequenceValue); if (linearGradientLayer) { sequenceItems.push({ kind: 'linear', layer: linearGradientLayer }); } }); context.clearRect(0, 0, sampleSize.width, sampleSize.height); context.globalCompositeOperation = 'source-over'; context.fillStyle = resolvedMeshConfig.backgroundColor; context.fillRect(0, 0, sampleSize.width, sampleSize.height); for (var sequenceIndex = sequenceItems.length - 1; sequenceIndex >= 0; sequenceIndex -= 1) { var sequenceItem = sequenceItems[sequenceIndex]; var fillStyle = null; if (sequenceItem.kind === 'radial') { fillStyle = buildMeshRadialGradientFill(context, sampleSize.width, sampleSize.height, sequenceItem.layer); } else if (sequenceItem.kind === 'linear') { fillStyle = buildLinearGradientFillFromDirection(context, sampleSize.width, sampleSize.height, sequenceItem.layer.direction, sequenceItem.layer.stops); } if (!fillStyle) { continue; } context.save(); context.globalCompositeOperation = getCompositeOperation(blendModes[sequenceIndex]); context.fillStyle = fillStyle; context.fillRect(0, 0, sampleSize.width, sampleSize.height); context.restore(); } return samplePixelColor(context, sampleSize.width, edge === 'bottom' ? sampleSize.height - 1 : 0) || resolvedMeshConfig.backgroundColor; } function getMeshTopEdgeTintColor(background) { return getMeshEdgeTintColor(background, 'top'); } function getMeshBottomEdgeTintColor(background) { return getMeshEdgeTintColor(background, 'bottom'); } function getEdgeTintColor(background, edge) { if (!background || background.type === 'none') { return undefined; } if (background.type === 'color') { return background.color; } if ( background.type === 'gradient' && background.gradient && Array.isArray(background.gradient.stops) && background.gradient.stops.length > 0 ) { var sortedStops = background.gradient.stops.slice().sort(function(left, right) { return (left.position || 0) - (right.position || 0); }); var sampleSize = normalizeSampleSize(window.innerWidth, window.innerHeight); var canvas = createSamplingCanvas(sampleSize.width, sampleSize.height); var context = canvas ? get2dContext(canvas) : null; if (!context) { return edge === 'bottom' ? ((sortedStops[sortedStops.length - 1] && sortedStops[sortedStops.length - 1].color) || (sortedStops[0] && sortedStops[0].color)) : (sortedStops[0] && sortedStops[0].color); } context.clearRect(0, 0, sampleSize.width, sampleSize.height); context.fillStyle = background.gradient.type === 'radial' ? buildRadialGradientFill(context, sampleSize.width, sampleSize.height, sampleSize.width / 2, sampleSize.height / 2, sortedStops) : buildLinearGradientFillFromAngle(context, sampleSize.width, sampleSize.height, background.gradient.angle != null ? background.gradient.angle : 90, sortedStops); context.fillRect(0, 0, sampleSize.width, sampleSize.height); return samplePixelColor(context, sampleSize.width, edge === 'bottom' ? sampleSize.height - 1 : 0) || (edge === 'bottom' ? ((sortedStops[sortedStops.length - 1] && sortedStops[sortedStops.length - 1].color) || (sortedStops[0] && sortedStops[0].color)) : (sortedStops[0] && sortedStops[0].color)); } if (background.type === 'mesh') { return edge === 'bottom' ? getMeshBottomEdgeTintColor(background) : getMeshTopEdgeTintColor(background); } return undefined; } function getTopEdgeTintColor(background) { return getEdgeTintColor(background, 'top'); } if (isDark) { docEl.classList.add('dark'); } else { docEl.classList.remove('dark'); } if (isInitialMyCardRoute) { try { var bootstrapLocale = (window.navigator.languages && window.navigator.languages[0] ? window.navigator.languages[0] : window.navigator.language || '').toLowerCase().indexOf('ko') === 0 ? 'ko' : 'en'; var rawLandingCache = window.sessionStorage.getItem('zetcard:landing-cards:v3:' + bootstrapLocale); if (rawLandingCache) { var parsedLandingCache = JSON.parse(rawLandingCache); var cachedCards = Array.isArray(parsedLandingCache) ? parsedLandingCache : (parsedLandingCache && Array.isArray(parsedLandingCache.cards) ? parsedLandingCache.cards : []); var firstCachedCard = cachedCards[0]; var firstCachedBackground = firstCachedCard && firstCachedCard.pageBackground; if (firstCachedBackground) { initialMyCardBackgroundType = firstCachedBackground.type || 'unknown'; var topEdgeTintColor = getTopEdgeTintColor(firstCachedBackground); if (topEdgeTintColor) { initialMyCardBackgroundColor = topEdgeTintColor; } } } } catch (error) {} docEl.style.setProperty('--mycard-page-background-color', initialMyCardBackgroundColor); docEl.style.setProperty('--mycard-splash-background-color', initialMyCardBackgroundColor); docEl.style.removeProperty('--mycard-page-background-image'); docEl.style.removeProperty('--mycard-page-background-size'); docEl.style.removeProperty('--mycard-page-background-position'); docEl.style.removeProperty('--mycard-page-background-repeat'); docEl.style.removeProperty('--mycard-page-background-blend-mode'); docEl.style.removeProperty('--mycard-page-background-attachment'); traceMyCardBackgroundMutation('RootLayout:bootstrap-initial-mycard-route', [ { action: 'set', property: '--mycard-page-background-color', value: initialMyCardBackgroundColor, inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-color'), backgroundType: initialMyCardBackgroundType, reason: 'initial myCard route before React hydration' }, { action: 'set', property: '--mycard-splash-background-color', value: initialMyCardBackgroundColor, inlineAfter: docEl.style.getPropertyValue('--mycard-splash-background-color'), backgroundType: initialMyCardBackgroundType, reason: 'lock splash color so page background handoff cannot repaint fading splash' }, { action: 'remove', property: '--mycard-page-background-image', inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-image'), backgroundType: initialMyCardBackgroundType, reason: 'reset non-color bootstrap background fields' }, { action: 'remove', property: '--mycard-page-background-size', inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-size'), backgroundType: initialMyCardBackgroundType, reason: 'reset non-color bootstrap background fields' }, { action: 'remove', property: '--mycard-page-background-position', inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-position'), backgroundType: initialMyCardBackgroundType, reason: 'reset non-color bootstrap background fields' }, { action: 'remove', property: '--mycard-page-background-repeat', inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-repeat'), backgroundType: initialMyCardBackgroundType, reason: 'reset non-color bootstrap background fields' }, { action: 'remove', property: '--mycard-page-background-blend-mode', inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-blend-mode'), backgroundType: initialMyCardBackgroundType, reason: 'reset non-color bootstrap background fields' }, { action: 'remove', property: '--mycard-page-background-attachment', inlineAfter: docEl.style.getPropertyValue('--mycard-page-background-attachment'), backgroundType: initialMyCardBackgroundType, reason: 'reset non-color bootstrap background fields' } ]); return; } })();