*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background-color:#fafafa;min-height:100vh;padding:64px 24px 40px 24px}.header{text-align:center;margin-bottom:48px}.header h1{font-size:42px;font-weight:700;color:#111827;margin-bottom:12px;letter-spacing:-.02em}.header p{color:#6b7280;font-size:16px;font-weight:400}.container{display:flex;flex-direction:row;width:100%;max-width:1024px;margin:0 auto}.left-section{width:50%;padding:24px;background-color:#fff;border-top-left-radius:12px;border-bottom-left-radius:12px;border:1px solid #e5e7eb;border-right:none}.separator{width:1px;background-color:#e5e7eb}.right-section{width:50%;padding:24px;background-color:#fff;border-top-right-radius:12px;border-bottom-right-radius:12px;border:1px solid #e5e7eb;border-left:none}.colour-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.input-group label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:10px}.input-wrapper{position:relative}.input-wrapper input[type="text"]{width:100%;padding:10px 48px 10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:monospace}.colour-picker-wrapper{position:absolute;right:8px;top:50%;transform:translateY(-50%)}.colour-picker-wrapper input[type="color"]{width:32px;height:32px;border-radius:6px;cursor:pointer;border:1px solid #d1d5db;opacity:0;position:absolute}.colour-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;pointer-events:none;border:1px solid #e5e7eb}.preview-section h3{font-size:14px;font-weight:600;color:#374151;margin-bottom:10px}.preview-box{padding:24px;border-radius:8px;border:1px solid #d1d5db;min-height:250px}.preview-box h2{font-size:24px;font-weight:600;margin-bottom:16px}.preview-box .p1{font-size:16px;margin-bottom:14px;line-height:1.6}.preview-box .p2{font-size:14px;margin-bottom:10px;line-height:1.5}.preview-box .p3{font-size:12px;opacity:.9;line-height:1.5}.contrast-ratio{margin-bottom:28px}.ratio-number{font-size:48px;font-weight:700;letter-spacing:-.02em}.ratio-label{font-size:14px;color:#6b7280;margin-top:6px;font-weight:500}.standards h4{font-size:14px;font-weight:600;color:#374151;margin-bottom:12px}.standard-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:8px;background-color:#f9fafb;border:1px solid #f3f4f6;margin-bottom:10px}.standard-item span{font-size:14px;font-weight:500;color:#374151}.badge{padding:6px 12px;font-size:13px;font-weight:500;border-radius:6px}.badge.pass{background-color:#dcfce7;color:#166534}.badge.fail{background-color:#fee2e2;color:#991b1b}.footer{text-align:center;margin-top:48px}.footer p{font-size:14px;color:#9ca3af;max-width:672px;margin:0 auto 16px auto;padding:0 16px;line-height:1.6}.footer a{color:#4f46e5;text-decoration:none;display:inline-flex;align-items:center;gap:4px}.footer .branding{font-size:13px;color:#6b7280;font-weight:500}.footer .branding a{color:#111827;text-decoration:none}.external-icon{width:12px;height:12px;display:inline-block;vertical-align:middle}@media (max-width:768px){body{padding:48px 16px 32px 16px}.header h1{font-size:32px}.container{flex-direction:column}.left-section{width:100%;border-radius:12px 12px 0 0;border-right:1px solid #e5e7eb;border-bottom:none}.separator{width:100%;height:1px}.right-section{width:100%;border-radius:0 0 12px 12px;border-left:1px solid #e5e7eb;border-top:none}.colour-inputs{grid-template-columns:1fr}}