:root { color-scheme: light; font-family: ui-sans-serif, system-ui, sans-serif; color: #202020; background: #fff; } * { box-sizing: border-box; } body { margin: 0; } .color-rings { width: min(100% - 40px, 640px); margin: 0 auto; padding: 44px 0 36px; } .color-rings h1 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.025em; } .color-rings header p { margin: 8px 0 0; color: #666; font-size: 13px; } .rings { display: block; width: min(100%, 560px); height: auto; margin: 20px auto 24px; } .controls { max-width: 460px; margin: auto; } .control-heading { display: flex; align-items: center; gap: 16px; font-size: 14px; } .control-heading output { margin-left: auto; font-variant-numeric: tabular-nums; } .controls button { font: inherit; color: inherit; background: white; border: 1px solid #bbb; border-radius: 4px; min-height: 44px; padding: 0 14px; cursor: pointer; } .controls input { display: block; width: 100%; height: 44px; margin: 8px 0 0; accent-color: #252525; cursor: pointer; } .controls :focus-visible { outline: 2px solid #202020; outline-offset: 4px; } .range-ends { display: flex; justify-content: space-between; color: #666; font-size: 12px; } .controls select { display: block; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0 10px; font: inherit; color: inherit; background: white; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; } .theme-toggle { display: flex; gap: 10px; margin-top: 14px; } .palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 30px 0 20px; } .palette dt { font-size: 12px; color: #666; } .palette dd { margin: 6px 0 0; font-size: 14px; } .palette code { font-variant-numeric: tabular-nums; } #color-help, noscript p { font-size: 12px; line-height: 1.6; color: #666; margin: 0; } @media (max-width: 400px) { .color-rings { padding-top: 28px; } .rings { margin: 20px auto; } .palette dt { font-size: 11px; } } /* Dark mode: applied via [data-rings-theme="dark"] on . */ html[data-rings-theme="dark"] body, html[data-rings-theme="dark"] { background: #16181d; color: #e8e8e8; } html[data-rings-theme="dark"] .color-rings header p, html[data-rings-theme="dark"] .range-ends, html[data-rings-theme="dark"] .palette dt, html[data-rings-theme="dark"] #color-help, html[data-rings-theme="dark"] noscript p { color: #9a9a9a; } html[data-rings-theme="dark"] .controls button, html[data-rings-theme="dark"] .controls select { background: #232630; color: #e8e8e8; border-color: #3a3f4d; } html[data-rings-theme="dark"] .controls input { accent-color: #e8e8e8; } html[data-rings-theme="dark"] .controls :focus-visible { outline-color: #e8e8e8; }