*,*:before,*:after{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{min-height:100vh;margin:0;overflow-x:hidden;color:#2e3338;background:#f8fafc;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid rgb(30 167 253 / .32);outline-offset:2px}.app-root{--page-gutter: 1.5rem;min-height:100vh;background:var(--brand-slate-50);color:var(--brand-slate-800);font-family:var(--brand-font-sans)}.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:10;transform:translateY(-150%);border-radius:5px;background:var(--brand-blue-600);color:var(--brand-white);font-weight:700;padding:.625rem .875rem;text-decoration:none;transition:transform .15s ease-out}.skip-link:focus{transform:translateY(0)}.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;padding:0 var(--page-gutter);background:var(--brand-white);border-bottom:1px solid var(--brand-border)}.brand-link{display:inline-flex;align-items:center;min-width:0;color:inherit;text-decoration:none}.brand-link img{display:block;height:32px;width:auto}.site-nav{display:flex;align-items:center;gap:.75rem}.app-container{width:100%;max-width:1168px;margin:0 auto;padding:4rem var(--page-gutter) 5rem}.intro{max-width:700px;margin-bottom:2rem}.app-title{margin:0;color:var(--brand-slate-800);font-size:2.5rem;font-weight:800;line-height:1.12}.app-subtitle{max-width:42rem;margin:.875rem 0 0;color:var(--brand-slate-600);font-size:1.125rem;line-height:1.6}.tool-panel{max-width:100%;background:var(--brand-white);border:1px solid var(--brand-border);border-radius:6px;box-shadow:0 1px 3px #0000000d}.controls-panel{padding:1.5rem;margin-bottom:1.25rem}.workspace-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}.canvas-panel{min-width:0}.controls-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.controls-heading h2{margin:0;color:var(--brand-slate-800);font-size:1rem;font-weight:800;line-height:1.35}.controls-heading p{margin:.25rem 0 0;color:var(--brand-slate-600);font-size:.875rem;line-height:1.45}.baseline-heading,.comparison-heading,.diff-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--brand-border)}.baseline-heading h2,.comparison-heading h2,.diff-heading h2{margin:0;color:var(--brand-slate-800);font-size:1rem;font-weight:800;line-height:1.35}.baseline-heading p,.comparison-heading p,.diff-heading p{margin:.25rem 0 0;color:var(--brand-slate-600);font-size:.875rem;line-height:1.45}.panel-tag{flex:0 0 auto;border-radius:4px;background:var(--brand-slate-100);color:var(--brand-slate-600);font-size:.75rem;font-weight:800;line-height:1;padding:.375rem .5rem}.panel-tag.is-changed{background:var(--brand-red-50);color:var(--brand-red-600)}.panel-tag.is-clean{background:var(--brand-green-50);color:var(--brand-green-600)}.canvas-wrap{background:var(--brand-slate-100);border:1px solid var(--brand-border);border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:10rem;margin:.75rem 1.5rem 1.5rem}.canvas-wrap canvas{display:block;max-width:100%}.field-group{display:grid;gap:.5rem}.field-label{display:block;color:var(--brand-slate-700);font-size:.875rem;font-weight:800}.field-help{margin:0;color:var(--brand-slate-600);font-size:.8125rem;line-height:1.5}.threshold-input-wrap{display:flex;align-items:stretch;min-width:0;min-height:48px;overflow:hidden;background:var(--brand-white);border:1px solid var(--brand-slate-300);border-radius:5px;transition:border-color .15s ease-out,box-shadow .15s ease-out}.threshold-input-wrap:focus-within{border-color:var(--brand-blue-500);box-shadow:0 0 0 3px #1ea7fd2e}.threshold-prefix{display:inline-flex;align-items:center;padding:0 .875rem;background:var(--brand-slate-100);border-right:1px solid var(--brand-slate-300);color:var(--brand-slate-600);font-family:var(--brand-font-mono);font-size:.8125rem;font-weight:700;-webkit-user-select:none;user-select:none;white-space:nowrap}.threshold-input{flex:1;min-width:0;border:0;outline:0;padding:.75rem .875rem;color:var(--brand-slate-800);font-family:var(--brand-font-mono);font-size:.9375rem;line-height:1.4}.threshold-input::-webkit-outer-spin-button,.threshold-input::-webkit-inner-spin-button{-webkit-appearance:none}.slider-wrap{display:flex;align-items:center;gap:.75rem;margin-top:.25rem}.range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;background:var(--brand-slate-200);border-radius:999px;outline:none;cursor:pointer}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand-orange-500);border:2px solid var(--brand-white);box-shadow:0 0 0 1px var(--brand-orange-500);cursor:pointer;transition:transform .1s ease-out}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.range-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand-orange-500);border:2px solid var(--brand-white);cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:var(--brand-slate-500);font-size:.75rem;line-height:1.4}.sensitivity-badge{flex:0 0 auto;border-radius:4px;font-size:.75rem;font-weight:800;line-height:1;padding:.375rem .5rem}.sensitivity-badge.is-green{background:var(--brand-green-50);color:var(--brand-green-600)}.sensitivity-badge.is-yellow{background:var(--brand-yellow-50, #FFF7E4);color:var(--brand-yellow-600, #E39D07)}.sensitivity-badge.is-orange{background:var(--brand-orange-50);color:var(--brand-orange-500)}.sensitivity-badge.is-red{background:var(--brand-red-50);color:var(--brand-red-600)}.preset-group{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem}.preset-label{display:block;color:var(--brand-slate-700);font-size:.875rem;font-weight:800;margin-right:.25rem}.preset-button{min-width:0;min-height:34px;border:1px solid var(--brand-border);border-radius:5px;background:var(--brand-white);color:var(--brand-slate-700);font-size:.8125rem;font-weight:700;line-height:1;padding:0 .75rem;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,transform .15s ease-out}.preset-button:hover{border-color:var(--brand-blue-500);color:var(--brand-blue-700);transform:translateY(-1px)}.preset-button:active{transform:translateY(0)}.preset-button.is-active{border-color:var(--brand-blue-500);background:var(--brand-blue-50);color:var(--brand-blue-700)}.preset-default-tag{display:inline-block;margin-left:.3rem;padding:1px 5px;border-radius:3px;background:var(--brand-orange-50);color:var(--brand-orange-500);font-size:.625rem;font-weight:800;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}.upload-group{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem}.upload-label{display:block;color:var(--brand-slate-700);font-size:.875rem;font-weight:800;margin-right:.25rem}.upload-button{display:inline-flex;align-items:center;min-width:10rem;min-height:34px;border:1px solid var(--brand-border);border-radius:5px;background:var(--brand-white);color:var(--brand-slate-700);font-size:.8125rem;font-weight:700;padding:0 .75rem;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,transform .15s ease-out;cursor:pointer}.upload-button:hover{border-color:var(--brand-blue-500);color:var(--brand-blue-700);transform:translateY(-1px)}.upload-button:active{transform:translateY(0)}.upload-button.has-file{border-color:var(--brand-green-600);background:var(--brand-green-50);color:var(--brand-green-600)}.sample-button{display:inline-flex;align-items:center;min-width:10rem;min-height:34px;border:1px dashed var(--brand-slate-300);border-radius:5px;background:var(--brand-white);color:var(--brand-slate-600);font-size:.8125rem;font-weight:700;padding:0 .75rem;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out;cursor:pointer}.sample-button:hover{border-color:var(--brand-blue-500);color:var(--brand-blue-700)}.sample-button.is-active{border-style:solid;border-color:var(--brand-green-600);background:var(--brand-green-50);color:var(--brand-green-600)}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem}.stat-panel{padding:1.25rem 1.5rem}.stat-number{color:var(--brand-slate-800);font-family:var(--brand-font-mono);font-size:1.25rem;font-weight:800;line-height:1.2}.stat-number.is-diff{color:var(--brand-red-600)}.stat-number.is-aa{color:var(--brand-yellow-600, #E39D07)}.stat-label{margin:.25rem 0 0;color:var(--brand-slate-600);font-size:.8125rem;line-height:1.45}.results-footer{display:flex;align-items:center;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--brand-border)}.results-bar{flex:1;height:.375rem;overflow:hidden;border-radius:999px;background:var(--brand-slate-200)}.results-bar-fill{height:100%;border-radius:inherit;background:var(--brand-green-600);transition:width .2s ease-out}.results-pct{color:var(--brand-slate-600);font-family:var(--brand-font-mono);font-size:.8125rem;font-weight:700;white-space:nowrap}.explanation-panel{padding:1.25rem 1.5rem;margin-top:1.25rem}.explanation-text{margin:0;color:var(--brand-slate-600);font-size:.9375rem;line-height:1.65}.legend{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.25rem}.legend-item{display:flex;align-items:center;gap:.4rem;color:var(--brand-slate-600);font-size:.8125rem;font-weight:700}.legend-dot{width:.5rem;height:.5rem;border-radius:999px;flex-shrink:0}.legend-dot.is-diff{background:var(--brand-red-600)}.legend-dot.is-aa{background:#d4a017}.empty-state{display:grid;min-height:14rem;place-items:center;border:1px dashed var(--brand-slate-300);border-radius:5px;background:var(--brand-slate-50);color:var(--brand-slate-600);font-size:.9375rem;font-weight:700;padding:1.5rem;text-align:center}.empty-state p{margin:.5rem 0 0;font-size:.875rem;font-weight:400;max-width:28rem}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}@media(max-width:900px){.workspace-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}}@media(max-width:800px){.app-root{--page-gutter: 1rem}.site-header{min-height:64px}.app-container{padding:2.5rem var(--page-gutter) 3rem}.app-title{font-size:2rem}.app-subtitle{font-size:1rem}.controls-panel{padding:1rem}}@media(max-width:520px){.stats-row{grid-template-columns:1fr 1fr}.upload-group{flex-direction:column;align-items:flex-start}.preset-button{flex:1 1 calc(50% - .25rem)}}