:root{color-scheme:light;--paper:#f5f2eb;--card:#fffcf7;--ink:#282d28;--muted:#72756c;--line:#deded3;--accent:#be6f52;--focus:#435c93;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-synthesis:none;font-weight:400;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:not-allowed}button,canvas,input{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{color:inherit}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}h1,h2,h3,p{margin:0}button{border:0}button:not(:disabled){transition:background-color .15s,color .15s,box-shadow .15s}::selection{background:#dfcdbd;color:var(--ink)}
.workbench{width:min(1280px,calc(100% - 96px));margin:auto}.masthead{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.identity{display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:2.4px;font-weight:650}.brand-divider{margin:0 8px;color:#acafa4}.brand-mark{display:flex;align-items:center;width:36px}.brand-mark i{width:15px;height:15px;border-radius:50%;display:block;flex:none;background:#cb775c}.brand-mark i+i{margin-left:-5px;background:#8eaa99}.brand-mark i+i+i{background:#737fad}.edition{font-size:11px;letter-spacing:1.4px;color:var(--muted)}.intro{display:flex;align-items:center;justify-content:space-between;padding:49px 0 36px}.eyebrow{font-size:11px;letter-spacing:3.1px;color:var(--muted);margin-bottom:12px}h1{font-size:64px;font-weight:750;letter-spacing:-2.2px;line-height:1.15}.title-dot{color:var(--accent);font-family:Georgia,serif;margin-left:7px}.lede{font-size:14px;line-height:1.9;color:#656b61;margin-top:18px;letter-spacing:.5px}.mobile-break{display:none}.intro-note{display:flex;gap:18px;align-items:flex-start;padding-right:7px}.intro-note p{font-size:12px;line-height:2.1;letter-spacing:1.1px;color:#7c7f74}.note-line{width:29px;height:1px;background:#9b9f91;margin-top:12px}
.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-label h2{font-size:12px;font-weight:600;letter-spacing:1px}.section-label>span{font-size:11px;color:var(--muted)}.comparison-strip{display:flex;min-height:90px;border-radius:11px;overflow:hidden;box-shadow:0 0 0 1px #00000006}.comparison-color{flex:1;min-width:0;display:flex;align-items:flex-end;padding:13px 17px;transition:background-color .1s}.comparison-color span{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.6px;overflow:hidden;white-space:nowrap}.comparison-strip.many .comparison-color{padding:10px 6px;justify-content:center}.comparison-strip.many .comparison-color span{font-size:9px;writing-mode:vertical-rl}.editor{margin-top:33px}.editor-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:17px}.editor-heading{display:flex;align-items:center;gap:12px}.editor-heading h2{font-size:17px;letter-spacing:.4px;font-weight:650}.count{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);background:#e9e9df;border:1px solid #dddfd3;border-radius:20px;padding:4px 8px}.toolbar-actions{display:flex;gap:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;padding:10px 15px;min-height:42px;font-size:12px;font-weight:550;white-space:nowrap}.secondary{background:transparent;border:1px solid #ced1c4}.secondary:hover:not(:disabled){background:#e9e9e0}.primary{background:var(--ink);color:#fffdf6;border:1px solid var(--ink)}.primary:hover:not(:disabled){background:#454d41}.secondary>span{font-size:18px;line-height:16px}
.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}.color-card{border:1px solid #dcded3;border-radius:12px;background:var(--card);overflow:hidden;min-width:0;box-shadow:0 2px 4px #222d2003}.card-top{display:flex;align-items:center;justify-content:space-between;padding:11px 17px 10px;gap:8px}.card-title{font-size:12px;font-weight:550;letter-spacing:1px}.card-number{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;margin-left:5px;color:var(--muted)}.card-actions{display:flex;align-items:center;gap:4px}.quiet-button{font-size:11px;background:transparent;padding:8px 5px;color:#686f62;border-radius:4px}.quiet-button:hover:not(:disabled){background:#edeee5;color:var(--ink)}.remove:hover:not(:disabled){color:#a64235}.action-divider{height:10px;width:1px;background:var(--line);margin:0 3px}.color-preview{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.preview-hex{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.8px}.preview-dot{height:12px;width:12px;border:1px solid currentColor;border-radius:50%;opacity:.65}.card-body{padding:17px 19px 19px}.plane-heading,.plane-axis{display:flex;justify-content:space-between;font-size:10px;line-height:1.5;color:var(--muted);letter-spacing:.2px}.plane-heading{margin-bottom:7px}.plane-heading b,.plane-axis b{font-weight:400;margin-left:3px;color:#999d92}.plane-axis{margin-top:7px}.plane-axis>span:last-child{display:flex;gap:5px}.plane-wrap{position:relative;isolation:isolate}.color-plane{display:block;width:100%;height:auto;aspect-ratio:361/221;border-radius:5px;cursor:crosshair;touch-action:none;box-shadow:0 0 0 1px #0000000a;outline-offset:4px}.selection-ring{position:absolute;width:17px;height:17px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1.5px #242824,0 1px 4px #0007;transform:translate(-50%,-50%);pointer-events:none}.sliders{display:flex;flex-direction:column;gap:16px;margin-top:21px}.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.slider-label label{font-size:11px;letter-spacing:.4px}.slider-label label span{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#8b9185;margin-left:5px}.slider-label output{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;color:#60685a;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:9px;border-radius:8px;border:1px solid #00000012;margin:9px 0 5px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;background:#fffcf7;border:1px solid #7c8276;border-radius:50%;box-shadow:0 1px 2px #0002}input[type=range]::-moz-range-thumb{width:15px;height:15px;background:#fffcf7;border:1px solid #7c8276;border-radius:50%;box-shadow:0 1px 2px #0002}input[type=range]::-moz-range-track{background:transparent}.hex-row{display:flex;align-items:stretch;gap:7px;margin-top:24px}.hex-field{display:flex;align-items:center;border:1px solid #d9ddd1;border-radius:6px;background:#f7f8f0;min-width:0;flex:1;padding:0 11px}.hex-field:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}.hex-label{font-size:9px;letter-spacing:1.2px;color:#70786a;flex:none}.hex-input{padding:12px 0 12px 12px;border:0;background:transparent;min-width:0;width:100%;color:var(--ink);font:13px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.6px}.hex-input:focus-visible{outline:none}.hex-field:has([aria-invalid=true]){border-color:#b04e3e;background:#fff2eb}.hex-error{color:#a63b2d;font-size:11px;line-height:1.7;margin-top:8px}.copy-button{display:flex;justify-content:center;align-items:center;flex:none;width:42px;background:#eef0e6;border:1px solid #d9ddd1;border-radius:6px;color:#58624f}.copy-button:hover{background:#e1e6d6}.footer{margin:27px 0 12px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;font-size:10px;color:var(--muted);line-height:1.8;letter-spacing:.3px}.footer p:first-child{display:flex;align-items:center;gap:7px}.footer p:last-child span{margin:0 7px}.status-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#8eaa99;flex:none}.footer .warning{color:#a05131}.keyboard-help{font-size:10px;color:#7c8274;line-height:1.8;padding-bottom:26px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border-radius:8px;background:var(--ink);color:#fffdf6;box-shadow:0 4px 20px #0002;padding:12px 20px;z-index:5;max-width:calc(100% - 32px);width:max-content;font-size:13px;line-height:1.6;pointer-events:none;opacity:0;transition:opacity .15s}.toast.visible{opacity:1}.notice{padding:20px;color:#a03a2c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1500px){.intro{padding-top:56px;padding-bottom:43px}.comparison-strip{min-height:100px}}@media(max-width:1100px){.workbench{width:calc(100% - 56px)}.color-grid{gap:14px}.card-body{padding:15px}.intro{padding-top:37px}h1{font-size:58px}.card-top{padding-left:14px;padding-right:10px}}@media(max-width:900px) and (min-width:641px){.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.workbench{width:calc(100% - 36px)}.masthead{height:69px}.identity{font-size:10px;letter-spacing:1.7px;gap:9px}.edition{font-size:9px;letter-spacing:.5px}.intro{padding:32px 0 28px}.intro-note{display:none}.eyebrow{font-size:10px;letter-spacing:2.5px}h1{font-size:54px}.lede{font-size:12px;margin-top:13px;line-height:1.9}.mobile-break{display:block}.section-label>span{font-size:10px}.comparison-strip{min-height:80px}.comparison-color{padding:11px 9px}.comparison-color span{font-size:10px;letter-spacing:0}.comparison-strip.many{min-height:94px}.editor{margin-top:27px}.editor-toolbar{flex-wrap:wrap;gap:14px;margin-bottom:15px}.editor-heading h2{font-size:16px}.toolbar-actions{gap:7px}.button{font-size:11px;padding:9px 11px;min-height:40px}.button svg{width:15px;height:15px}.editor-heading{gap:7px}.count{font-size:10px;padding:3px 6px}.color-grid{grid-template-columns:minmax(0,1fr);gap:20px}.card-body{padding:18px 21px 21px}.card-top{padding:10px 18px}.card-title{font-size:13px}.quiet-button{font-size:12px;min-height:34px;padding:8px}.color-preview{height:52px}.plane-heading,.plane-axis{font-size:11px}.slider-label label,.slider-label output{font-size:12px}.sliders{gap:19px}input[type=range]{height:11px;margin-top:13px;margin-bottom:7px}input[type=range]::-webkit-slider-thumb{width:21px;height:21px}input[type=range]::-moz-range-thumb{width:19px;height:19px}.hex-input{padding-top:14px;padding-bottom:14px;font-size:14px}.copy-button{width:45px}.footer{flex-direction:column;gap:3px;margin-top:25px}.keyboard-help{font-size:9px}.toast{bottom:16px}}@media(max-width:380px){.toolbar-actions{width:100%}.toolbar-actions .button{flex:1}.edition{display:none}.comparison-color span{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}