main{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 24px;gap:28px}.layout-grid{width:100%;max-width:680px;display:flex;flex-direction:column;gap:24px}.color-preview-pane{width:100%;height:140px;border-radius:16px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:#00a8ff;transition:background-color .2s,box-shadow .2s;box-shadow:0 8px 32px #00a8ff33;cursor:pointer}.color-preview-pane:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,.06),transparent);pointer-events:none}.color-preview-pane input[type=color]{position:absolute;width:150%;height:150%;opacity:0;cursor:pointer}.color-preview-text{pointer-events:none;color:#fff;font-family:JetBrains Mono,monospace;font-size:24px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8);z-index:2}.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:20px}.card-title{color:#fff;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding-bottom:12px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.input-with-copy{display:flex;gap:8px}input[type=text]{flex:1;background:var(--bg3);border:1px solid var(--border);color:#fff;padding:10px 12px;border-radius:var(--r);outline:none;font-family:JetBrains Mono,monospace;font-size:14px;transition:border-color .2s}input:focus{border-color:var(--accent)}.wcag-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:500px){.wcag-split{grid-template-columns:1fr}}.wcag-metrics-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}.wcag-row{display:flex;justify-content:space-between;align-items:center}.wcag-label{font-size:13px;font-weight:500;color:var(--text)}.wcag-ratio{font-family:JetBrains Mono,monospace;font-size:18px;font-weight:700;color:var(--accent)}.wcag-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase}.wcag-badge.pass{background:#2ea04326;color:var(--success);border:1px solid var(--success)}.wcag-badge.fail{background:#f8514926;color:var(--error);border:1px solid var(--error)}.wcag-preview-sample{grid-column:1 / -1;height:70px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;border:1px solid var(--border)}.harmony-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}.harmony-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .2s,border-color .2s}.harmony-card:hover{transform:translateY(-2px);border-color:var(--accent)}.harmony-color-block{height:60px;width:100%;position:relative}.harmony-color-lbl{padding:10px;text-align:center;font-family:JetBrains Mono,monospace;font-size:12px;color:#fff;font-weight:600}.harmony-type{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:700;text-align:center;padding-bottom:6px}@media(max-width:768px){main{padding:20px 12px;gap:16px}.layout-grid{width:100%;max-width:100%}.card{padding:16px;gap:16px}.harmony-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.harmony-color-block{height:48px}.wcag-split{grid-template-columns:1fr}}