.hpx-hero{background:radial-gradient(ellipse 55% 50% at 20% 0,rgba(244,81,66,.12),transparent 70%),#0f0f0f;padding:40px 0 96px}.hpx-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:760px}.hpx-h1{font-size:clamp(40px,4.6vw,60px)}.hpx-page .hpx-crumb{color:#949ba4;font-size:13px}.hpx-page .hpx-crumb a{color:#b5bac1}.hpx-page .hpx-crumb a:hover{color:#fff}.hpx-tool{grid-gap:20px 40px;background:#1a1a1a;border-radius:18px;box-shadow:inset 0 0 0 1px #2a2a2a;display:grid;gap:20px 40px;grid-template-areas:"controls out" "swatches out";grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:28px;scroll-margin-top:96px}.hpx-controls{grid-gap:24px;align-items:start;display:grid;gap:24px;grid-area:controls;grid-template-columns:170px minmax(0,1fr)}.hpx-picker{align-items:flex-end;border-radius:16px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.15);cursor:pointer;display:flex;height:170px;justify-content:center;overflow:hidden;position:relative}.hpx-picker input{border:0;cursor:pointer;height:100%;inset:0;opacity:0;padding:0;position:absolute;width:100%}.hpx-picker:focus-within{outline:2px solid #fff;outline-offset:3px}.hpx-picker-tag{background:hsla(0,0%,6%,.75);border-radius:999px;color:#fff;font-size:12px;font-weight:600;margin-bottom:10px;padding:4px 10px;pointer-events:none;position:relative}.hpx-fields{gap:16px;min-width:0}.hpx-field,.hpx-fields{display:flex;flex-direction:column}.hpx-field{gap:6px}.hpx-field label{color:#dbdee1;font-size:13px;font-weight:600}.hpx-input-row{display:flex;gap:8px}.hpx-page .hpx-input{background:#111214;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px #2e3035;box-sizing:border-box;color:#fff;flex:1 1;font-family:Consolas,Menlo,monospace;font-size:18px;height:48px;min-width:0;outline:none;padding:0 14px}.hpx-page .hpx-input:focus{box-shadow:inset 0 0 0 1.5px #f45142}.hpx-page .hpx-input[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px #ff8a7c}.hpx-page .hpx-input-big{font-size:22px;font-weight:700}.hpx-copy{background:#2b2d31;border:0;border-radius:10px;color:#fff;cursor:pointer;flex:none;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;height:48px;min-width:84px;padding:0 14px;transition:background .15s ease}.hpx-copy:hover{background:#35373c}.hpx-copy.is-done{background:#2f9e44}.hpx-error{color:#ff8a7c;font-size:13px}.hpx-page .hpx-rgb{-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";color:#949ba4;font-size:13px;font-variant-numeric:tabular-nums}.hpx-swatches{align-content:flex-start;display:flex;flex-wrap:wrap;gap:8px;grid-area:swatches}.hpx-swatch{align-items:center;background:#222;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px #2e3035;color:#dbdee1;cursor:pointer;display:inline-flex;font-family:Poppins,sans-serif;font-size:13px;font-weight:500;gap:8px;height:36px;padding:0 12px 0 8px}.hpx-swatch span{border-radius:50%;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.2);height:18px;width:18px}.hpx-swatch:hover{background:#2b2b2b}.hpx-swatch.is-on{box-shadow:inset 0 0 0 1.5px #f45142;color:#fff}.hpx-out{gap:14px;grid-area:out;min-width:0}.hpx-embed,.hpx-out{display:flex;flex-direction:column}.hpx-embed{background:#2b2d31;border-left:4px solid #f45142;border-radius:4px;gap:6px;padding:12px 16px;transition:border-color .2s ease}.hpx-json{align-items:center;background:#111214;border-radius:12px;box-shadow:inset 0 0 0 1px #2e3035;display:flex;gap:12px;justify-content:space-between;padding:8px 8px 8px 16px}.hpx-json code{color:#dbdee1;font-family:Consolas,Menlo,monospace;font-size:16px;overflow-wrap:anywhere}.hpx-json .hpx-copy{height:40px}.hpx-sum{display:flex;flex-direction:column;gap:24px;padding:28px}.hpx-pairs{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.hpx-pair{align-items:center;background:#111214;border-radius:12px;box-shadow:inset 0 0 0 1px #2e3035;display:flex;flex-direction:column;gap:4px;padding:14px 8px}.hpx-pair-hex{font-family:Consolas,Menlo,monospace;font-size:26px;font-weight:700;text-transform:uppercase}.hpx-pair-arrow{color:#949ba4}.hpx-pair-num{color:#f45142;font-family:Rajdhani,sans-serif;font-size:28px;font-weight:700;line-height:1}.hpx-pair-name{color:#949ba4;font-size:12px}.hpx-math{-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";color:#b5bac1;display:flex;flex-direction:column;font-family:Consolas,Menlo,monospace;font-size:16px;font-variant-numeric:tabular-nums;gap:6px}.hpx-math-total{align-items:center;box-shadow:inset 0 1px 0 #3a3c42;color:#fff;display:flex;font-size:26px;font-weight:700;gap:10px;margin-top:4px;padding-top:10px}.hpx-dot{border-radius:50%;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.25);display:inline-block;flex:none;height:16px;margin-right:10px;vertical-align:-2px;width:16px}.hpx-math-total .hpx-dot{height:20px;margin-right:0;width:20px}.hpx-where{display:flex;flex-direction:column;gap:24px;max-width:860px}.hpx-page .hpx-where-list{display:flex;flex-direction:column;gap:18px}.hpx-where-list li{color:#b5bac1;font-size:16px;padding-left:20px;position:relative}.hpx-where-list li:before{background:#f45142;border-radius:50%;content:"";height:7px;left:2px;position:absolute;top:.6em;width:7px}.hpx-page code{background:#222327;border-radius:5px;color:#fff;font-family:Consolas,Menlo,monospace;font-size:.92em;padding:1px 6px}.hpx-page .hpx-json code,.hpx-page .hpx-table code{background:none;padding:0}.hpx-table-sec{grid-gap:56px;align-items:start;display:grid;gap:56px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.hpx-table-wrap{overflow:hidden}.hpx-table thead th{color:#949ba4;font-size:13px;font-weight:500}.hpx-table tbody th{color:#fff;font-weight:500;white-space:nowrap}.hpx-table td{-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";color:#dbdee1;font-variant-numeric:tabular-nums}.hpx-use{background:#2b2d31;border:0;border-radius:8px;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:13px;font-weight:600;height:34px;padding:0 14px}.hpx-use:hover{background:#f45142}@media (max-width:960px){.hpx-tool{grid-template-areas:"controls" "swatches" "out"}.hpx-table-sec,.hpx-tool{grid-template-columns:minmax(0,1fr)}.hpx-table-sec{gap:28px}}@media (max-width:600px){.hpx-hero{padding:28px 0 64px}.hpx-tool{margin:0 -8px;padding:16px}.hpx-controls{gap:16px;grid-template-columns:minmax(0,1fr)}.hpx-picker{height:110px}.hpx-sum{padding:18px}.hpx-math-total,.hpx-pair-hex{font-size:22px}.hpx-table td,.hpx-table th{padding:12px 8px}.hpx-table td:nth-child(2),.hpx-table th:nth-child(2){display:none}}.hpx-swatch{height:40px}.hpx-json .hpx-copy{height:44px}.hpx-use{height:40px}