@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap";.rule{grid-template-columns:22px minmax(150px,1fr) 56px auto 46px 28px 28px 28px}.rule select,.rule button,.rule input{white-space:nowrap}@media (width<=900px){.grid{grid-template-columns:1fr}}.direction-button{cursor:pointer;color:#55515a;background:#f4f3ef;border:1px solid #deddd8;border-radius:6px;min-width:46px;height:30px;font:10px DM Mono,monospace}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body.dark-mode{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#eeeaf2;background:#19181d}body.dark-mode .panel{box-shadow:none;background:#25232b;border-color:#3a3741}body.dark-mode .input-panel textarea{color:#eeeaf2;background:#1e1d23}body.dark-mode select,body.dark-mode .panel input:not([type=range]),body.dark-mode .chip,body.dark-mode .icon-button,body.dark-mode .toggle-button{color:#eeeaf2;background:#2d2a34;border-color:#4b4754}body.dark-mode .add-rule{color:#c9c3d0;border-color:#625d6b}body.dark-mode .muted,body.dark-mode .subtitle,body.dark-mode .badge,body.dark-mode .hexes span,body.dark-mode .total,body.dark-mode .explanation{color:#aaa4b3}.header-actions{align-items:center;gap:8px;display:flex}.theme-button{color:#25232b;cursor:pointer;background:#fff;border:1px solid #deddd8;border-radius:50%;width:43px;height:43px;font-size:21px;line-height:1}body.dark-mode .theme-button{color:#fff;background:#2d2a34;border-color:#4b4754}:root{color:#20202a;font-synthesis:none;background:#f4f3ef;font-family:Space Grotesk,sans-serif}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:48px 24px 80px}header{justify-content:space-between;align-items:end;margin-bottom:42px;display:flex}h1{letter-spacing:-.08em;margin:6px 0 16px;font-size:clamp(2.3rem,5vw,4.6rem);line-height:.9}h2{letter-spacing:-.04em;margin:5px 0}label{letter-spacing:.12em;color:#767477;font:500 11px DM Mono,monospace}.subtitle{color:#77747b;max-width:430px;margin:0;line-height:1.5}.grid{grid-template-columns:1.15fr .85fr;gap:18px;display:grid}.panel{background:#fff;border:1px solid #deddd8;border-radius:16px;padding:22px;box-shadow:0 10px 35px #39332b0b}.input-panel textarea{resize:vertical;color:#36333d;background:#f7f6f3;border:0;border-radius:10px;outline:none;width:100%;min-height:220px;margin:14px 0;padding:18px;font:14px/2 DM Mono,monospace}.swatches{border-radius:10px;gap:0;min-height:48px;display:flex;overflow:hidden}.swatch{cursor:pointer;border:0;flex:1;min-width:35px;transition:transform .15s}.swatch:hover{z-index:1;transform:translateY(-4px)}.preset-list{flex-wrap:wrap;gap:7px;margin:13px 0 25px;display:flex}.chip,.tabs button,.direction button,.button,.reset{color:#55515a;cursor:pointer;font:inherit;background:#fff;border:1px solid #deddd8;border-radius:99px;padding:8px 12px;font-size:12px}.chip:hover,.active{color:#fff!important;background:#25232b!important;border-color:#25232b!important}.tabs,.direction{gap:7px;margin:12px 0 22px;display:flex}.tabs button,.direction button{flex:1}select,.panel input:not([type=range]){width:100%;font:inherit;background:#fff;border:1px solid #deddd8;border-radius:8px;margin:12px 0 20px;padding:11px 12px}.rotation{align-items:center;gap:10px;margin-top:13px;display:flex}.rotation>button:not(.reset){cursor:pointer;background:#eceae5;border:0;border-radius:50%;width:28px;height:28px;font-size:18px}.rotation input{accent-color:#25232b;flex:1}.reset{margin-left:auto}.muted{color:#89868b;font-size:12px}.result{margin-top:18px}.result-heading{justify-content:space-between;align-items:start;margin-bottom:20px;display:flex}.result-heading-actions{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.copy-button{color:#25232b;font:inherit;cursor:pointer;background:#fff;border:1.5px solid #25232b;border-radius:99px;padding:7px 14px;font-size:12px;font-weight:600;transition:background .15s,color .15s}.copy-button:hover{color:#fff;background:#25232b}.copy-button.copied{color:#fff;cursor:default;background:#25232b}body.dark-mode .copy-button{color:#eeeaf2;background:0 0;border-color:#eeeaf2}body.dark-mode .copy-button:hover,body.dark-mode .copy-button.copied{color:#19181d;background:#eeeaf2}.badge{color:#77747b;text-align:right;max-width:300px;font-size:12px}.hexes{flex-wrap:wrap;gap:8px;margin-top:15px;display:flex}.hexes span{color:#77747b;font:12px DM Mono,monospace}.error{color:#b53636;font-size:12px}.inspector{z-index:2;width:min(330px,100% - 50px);position:fixed;bottom:25px;right:25px}.close{cursor:pointer;background:0 0;border:0;font-size:24px;position:absolute;top:12px;right:15px}.big-swatch{border-radius:9px;height:80px;margin-bottom:18px}dl{grid-template-columns:52px 1fr 1fr 1fr;gap:8px 4px;margin:22px 0 0;font-size:12px;display:grid}dt{color:#89868b}dd{text-align:right;margin:0;font-family:DM Mono,monospace}.button{color:#fff;background:#25232b;border-color:#25232b;padding:12px 17px}.rules{margin:12px 0 22px}.rule{grid-template-columns:22px minmax(0,1fr) auto auto auto auto;align-items:center;gap:5px;margin-bottom:7px;display:grid}.rule select{min-width:0;margin:0;padding:9px 7px;font-size:11px}.rule-index{color:#99959c;text-align:center;font:11px DM Mono,monospace}.icon-button{cursor:pointer;color:#55515a;background:#fff;border:1px solid #deddd8;border-radius:6px;min-width:28px;height:30px}.icon-button:disabled{opacity:.3;cursor:default}.icon-button.remove{color:#b53636}.weight{width:56px!important;margin:0!important;padding:8px 4px!important;font:11px DM Mono,monospace!important}.add-rule{color:#5e5a62;cursor:pointer;background:0 0;border:1px dashed #c7c4be;border-radius:8px;width:100%;margin-top:4px;padding:9px}.total,.explanation{color:#77747b;margin:-10px 0 24px;font-size:12px;line-height:1.5}@media (width<=760px){main{padding-top:25px}header{display:block}header .button{margin-top:22px}.grid{grid-template-columns:1fr}.result-heading{display:block}.badge{text-align:left;margin-top:12px}}.grid{grid-template-columns:minmax(0,1fr) minmax(520px,1.25fr)}.rule{grid-template-columns:22px minmax(120px,1fr) 56px auto 46px 28px 28px 28px;min-width:0}.rule select,.rule button,.rule input{white-space:nowrap;min-width:0}.rule .remove{grid-column:auto}.grayscale .swatch{filter:grayscale()contrast(1.15)}.visualizer-select{min-width:190px;margin:5px 0 0}.viewer-heading{border-top:1px solid #deddd8;justify-content:space-between;align-items:end;margin-top:22px;padding-top:18px;display:flex}.viewer-heading p{margin:6px 0 0}.contrast-controls{align-items:center;gap:14px;margin:16px 0 10px;font-size:12px;display:flex}.contrast-toggle{color:#55515a;cursor:pointer;white-space:nowrap;align-items:center;gap:7px;display:inline-flex}.contrast-toggle input{accent-color:#25232b}.contrast-ratio{color:#25232b;margin-top:4px;font:10px DM Mono,monospace;display:block}.swatch{position:relative}.swatch-ratio{color:inherit;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;font:10px DM Mono,monospace;display:flex;position:absolute;inset:0}.swatch-ratio strong{letter-spacing:.08em;font-size:11px;font-weight:900}.foreground-picker{color:#55515a;align-items:center;gap:6px;font-size:12px;display:inline-flex}.foreground-picker input[type=color]{cursor:pointer;border:1px solid #deddd8;border-radius:5px;width:28px;height:24px;padding:0}.foreground-picker code{font:10px DM Mono,monospace}body.dark-mode .foreground-picker{color:#eeeaf2}html.dark-mode,html.dark-mode body{background:#19181d}body.dark-mode .direction button,body.dark-mode .reset,body.dark-mode .rotation>button{color:#eeeaf2;background:#2d2a34;border-color:#5a5565}body.dark-mode .direction button.active{color:#fff!important;background:#8338ec!important;border-color:#8338ec!important}body.dark-mode .rotation input{accent-color:#8338ec}.rotation input{accent-color:#25232b}body.dark-mode .contrast-toggle,body.dark-mode .contrast-ratio{color:#eeeaf2}.empty-result{color:#77747b;margin-bottom:0;font-size:12px}.value-name{color:#aaa6ae;margin-left:4px;font-size:10px}@media (width<=900px){main{display:block}.grid{grid-template-columns:1fr;display:grid}}@media (width>=901px){main{grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);grid-template-areas:"header header""input controls""result controls";align-items:start;gap:18px;display:grid}main>header{grid-area:header}main>.grid{display:contents}main>.grid>.input-panel{grid-area:input}main>.grid>.panel:not(.input-panel){grid-area:controls}main>.result{grid-area:result;margin-top:0}}@media print{*{-webkit-print-color-adjust:exact;print-color-adjust:exact}body{background:#fff}.panel{box-shadow:none}.swatches{break-inside:avoid;border:1px solid #777}.swatch{border-right:1px solid #777;min-height:48px}.swatch:last-child{border-right:0}.button,.theme-button,.inspector,textarea,.rules,.rotation{display:none}}