:root{--color-background: #F4FBF5;--color-primary: #3C9D5D;--color-primary-dark: #2F7D4A;--color-secondary: #8FBCA9;--color-secondary-dark: #7BA893;--color-surface: #FFFFFF;--color-surface-interactive: #E5F5E8;--color-surface-alt: #f8f9fa;--color-surface-dark: #0D0D0D;--color-text: #0D0D0D;--color-text-strong: #1a1a1a;--color-text-muted: #3f3f3f;--color-on-dark-surface: #FFFFFF;--color-border: #0D0D0D;--color-border-subtle: #dee2e6;--color-danger: #dc2626;--color-danger-dark: #b91c1c;--color-success: #15803d;--color-success-dark: #166534;--color-warning: #d97706;--color-warning-dark: #b45309;--color-info: #2563eb;--color-info-dark: #1d4ed8;--chart-lcp: 255, 99, 132;--chart-fid: 54, 162, 235;--chart-cls: 255, 206, 86;--chart-inp: 75, 192, 192;--chart-ttfb: 153, 102, 255;--chart-fcp: 255, 159, 64;--chart-html: 255, 99, 71;--chart-image: 65, 105, 225;--chart-js: 255, 215, 0;--chart-css: 50, 205, 50;--chart-total: 138, 43, 226;--color-focus-ring: #62C084;--color-gray-50: #fafafa;--color-gray-100: #f5f5f5;--color-gray-200: #e5e5e5;--color-gray-300: #d4d4d4;--color-gray-400: #a3a3a3;--color-gray-500: #737373;--color-gray-600: #525252;--color-gray-700: #404040;--color-gray-800: #262626;--color-gray-900: #171717;--color-error-surface: #fef2f2;--color-success-surface: #f0fdf4;--color-warning-surface: #fffbeb;--color-info-surface: #eff6ff;--font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--spacing-unit: 8px;--space-0: 0;--space-px: 1px;--space-0-5: calc(.5 * var(--spacing-unit));--space-1: var(--spacing-unit);--space-1-5: calc(1.5 * var(--spacing-unit));--space-2: calc(2 * var(--spacing-unit));--space-2-5: calc(2.5 * var(--spacing-unit));--space-3: calc(3 * var(--spacing-unit));--space-3-5: calc(3.5 * var(--spacing-unit));--space-4: calc(4 * var(--spacing-unit));--space-5: calc(5 * var(--spacing-unit));--space-6: calc(6 * var(--spacing-unit));--space-7: calc(7 * var(--spacing-unit));--space-8: calc(8 * var(--spacing-unit));--space-10: calc(10 * var(--spacing-unit));--space-12: calc(12 * var(--spacing-unit));--space-16: calc(16 * var(--spacing-unit));--space-20: calc(20 * var(--spacing-unit));--max-width: 1400px;--border-width-0: 0;--border-width: 1px;--border-width-2: 2px;--border-width-4: 4px;--border-radius-none: 0;--border-radius-sm: 4px;--border-radius: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 20px;--border-radius-full: 9999px;--box-shadow-offset: 4px;--box-shadow-sm: calc(var(--box-shadow-offset) / 2) calc(var(--box-shadow-offset) / 2) 0px var(--color-border);--box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) 0px var(--color-border);--box-shadow-md: calc(var(--box-shadow-offset) * 1.5) calc(var(--box-shadow-offset) * 1.5) 0px var(--color-border);--box-shadow-lg: calc(var(--box-shadow-offset) * 2) calc(var(--box-shadow-offset) * 2) 0px var(--color-border);--transition-duration-fast: .15s;--transition-duration: .2s;--transition-duration-slow: .3s;--transition-timing-function: ease-in-out;--transition-timing-bounce: cubic-bezier(.68, -.55, .265, 1.55);--transition-colors: color var(--transition-duration) var(--transition-timing-function), background-color var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function);--transition-transform: transform var(--transition-duration) var(--transition-timing-function);--transition-shadow: box-shadow var(--transition-duration) var(--transition-timing-function);--transition-all: all var(--transition-duration) var(--transition-timing-function)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:100%;scroll-behavior:smooth}body{font-family:var(--font-family-sans);color:var(--color-text);background-color:var(--color-background);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}main{flex-grow:1;padding:var(--space-4) var(--space-3)}.container{max-width:var(--max-width, 1400px);width:100%;margin:0 auto;padding:0 var(--space-2)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:1.2;margin-bottom:var(--space-2);a{color:var(--color-text)}}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-duration) var(--transition-timing-function)}a:hover,a:focus{color:var(--color-primary-dark);text-decoration:underline}input:not([type=range]),select,textarea{font-family:inherit;font-size:var(--font-size-base);padding:var(--space-2) var(--space-3);border:var(--border-width-2) solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-surface);color:var(--color-text);box-shadow:var(--box-shadow);transition:var(--transition-colors),var(--transition-shadow);width:100%}input:not([type=range]):focus,select:focus,textarea:focus{outline:var(--border-width-2) solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-primary-dark);box-shadow:var(--box-shadow)}input[type=checkbox],input[type=radio]{width:var(--space-3);height:var(--space-3);border-radius:var(--border-radius-sm);border:var(--border-width-2) solid var(--color-border);background-color:var(--color-surface);box-shadow:var(--box-shadow);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;flex-shrink:0}input[type=radio]{border-radius:var(--border-radius-full)}input[type=checkbox]:focus,input[type=radio]:focus{outline:var(--border-width-2) solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-primary-dark);box-shadow:var(--box-shadow)}input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--color-primary);border-color:var(--color-primary)}input[type=checkbox]:checked:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:18px;border:solid var(--color-surface);border-width:0 3px 3px 0;transform:translate(-50%,-50%) rotate(45deg)}input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:var(--border-radius-full);background-color:var(--color-surface);transform:translate(-50%,-50%)}input[type=checkbox]:hover:not(:disabled),input[type=radio]:hover:not(:disabled){border-color:var(--color-primary)}input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}.input-help{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.form-group{display:flex;flex-direction:column;gap:var(--space-1)}.form-label{color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--space-1)}.form-input{width:100%}.error-message{background-color:var(--color-error-surface);color:var(--color-danger);padding:var(--space-3);border-radius:var(--border-radius);font-size:var(--font-size-sm);margin-bottom:var(--space-2);border:var(--border-width) solid var(--color-danger)}.success-message{background-color:var(--color-success-surface);color:var(--color-success);padding:var(--space-3);border-radius:var(--border-radius);font-size:var(--font-size-sm);margin-bottom:var(--space-2);border:var(--border-width) solid var(--color-success)}.warning-message{background-color:var(--color-warning-surface);color:var(--color-warning);padding:var(--space-3);border-radius:var(--border-radius);font-size:var(--font-size-sm);margin-bottom:var(--space-2);border:var(--border-width) solid var(--color-warning)}.info-message{background-color:var(--color-info-surface);color:var(--color-info);padding:var(--space-3);border-radius:var(--border-radius);font-size:var(--font-size-sm);margin-bottom:var(--space-2);border:var(--border-width) solid var(--color-info)}.btn,button{display:inline-block;cursor:pointer;background-color:var(--color-primary);color:var(--color-surface);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-decoration:none;padding:var(--space-1) var(--space-2);border:var(--border-width-2) solid var(--color-primary);border-radius:var(--border-radius);box-shadow:var(--box-shadow);text-align:center;line-height:var(--line-height-tight);transition:var(--transition-colors),var(--transition-transform),var(--transition-shadow)}.btn:hover,button:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--box-shadow-md);color:var(--color-surface)}.btn:focus,button:focus{outline:var(--border-width-2) solid var(--color-focus-ring);outline-offset:2px}.btn:active,button:active{transform:translateY(1px);box-shadow:var(--box-shadow-sm)}.btn-secondary{background-color:var(--color-secondary);border-color:var(--color-secondary)}.btn-secondary:hover{background-color:var(--color-secondary-dark);border-color:var(--color-secondary-dark)}.btn-danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-surface)}.btn-danger:hover{background-color:var(--color-danger-dark);border-color:var(--color-danger-dark)}.btn-success{background-color:var(--color-success);border-color:var(--color-success);color:var(--color-surface)}.btn-success:hover{background-color:var(--color-success-dark);border-color:var(--color-success-dark)}.btn-outline{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}.btn-outline:hover{background-color:var(--color-primary);color:var(--color-surface)}.btn-sm{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);border-radius:var(--border-radius-sm)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--font-size-lg);border-radius:var(--border-radius-md)}.card{background-color:var(--color-surface);border:var(--border-width-2) solid var(--color-border);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:var(--space-5);margin-bottom:var(--space-4)}.card-interactive{background-color:var(--color-surface-interactive)}.card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);border-bottom:var(--border-width) solid var(--color-border);margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-3) calc(-1 * var(--space-5))}.card-header h2{font-size:var(--font-size-xl);color:var(--color-text-strong);margin:0}.card-body{padding:var(--space-4)}.card-footer{padding:var(--space-3);border-top:var(--border-width) solid var(--color-border-subtle);margin:var(--space-3) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) calc(-1 * var(--space-5))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.metric-card{background-color:var(--color-surface-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--border-radius);padding:var(--space-3);transition:var(--transition-colors)}.metric-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.metric-card-name{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.metric-card-severity{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:var(--space-0-5) var(--space-1);border-radius:var(--border-radius-sm);text-transform:capitalize}.metric-card-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--space-1)}.metric-card-description{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:var(--line-height-relaxed);margin:0}.metric-card.good{background-color:var(--color-success-surface);border-color:var(--color-success)}.metric-card.good .metric-card-name,.metric-card.good .metric-card-value{color:var(--color-success)}.metric-card.good .metric-card-severity{background-color:var(--color-success);color:var(--color-surface)}.metric-card.needs-improvement{background-color:var(--color-warning-surface);border-color:var(--color-warning)}.metric-card.needs-improvement .metric-card-name,.metric-card.needs-improvement .metric-card-value{color:var(--color-warning)}.metric-card.needs-improvement .metric-card-severity{background-color:var(--color-warning);color:var(--color-surface)}.metric-card.poor{background-color:var(--color-danger-surface);border-color:var(--color-danger)}.metric-card.poor .metric-card-name,.metric-card.poor .metric-card-value{color:var(--color-danger)}.metric-card.poor .metric-card-severity{background-color:var(--color-danger);color:var(--color-surface)}.metric-card-compact{background-color:var(--color-surface-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--border-radius);padding:var(--space-2);display:flex;flex-direction:column;min-width:80px;transition:var(--transition-colors)}.metric-card-compact .metric-card-name{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);margin-bottom:var(--space-0-5)}.metric-card-compact .metric-card-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}.metric-card-compact.good{background-color:var(--color-success-surface);border-color:var(--color-success);color:var(--color-success)}.metric-card-compact.needs-improvement{background-color:var(--color-warning-surface);border-color:var(--color-warning);color:var(--color-warning)}.metric-card-compact.poor{background-color:var(--color-danger-surface);border-color:var(--color-danger);color:var(--color-danger)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.metrics-grid-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2)}.html-content{ul,ol{margin-left:var(--space-2)}}