.gh-color{background:#fff;border:1px solid #e3e3e3;border-radius:10px;margin:1.4em 0;padding:16px 18px 18px}.gh-color__cap{color:#222;margin-bottom:14px;font-size:17px;font-weight:700}.gh-color__target{background:#fafafa;border:1px solid #ececec;border-radius:8px;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;display:flex}.gh-color__target-lead{color:#888;text-transform:uppercase;letter-spacing:.04em;font-size:13px}.gh-color__term{text-align:center;flex-direction:column;align-items:center;gap:6px;min-width:0;display:inline-flex}.gh-color__chip{cursor:pointer;border-radius:8px;transition:transform .12s,box-shadow .12s;display:block;box-shadow:inset 0 0 0 1px #0000001f}.gh-color__chip:hover{transform:scale(1.06);box-shadow:inset 0 0 0 1px #0000002e,0 2px 8px #00000026}.gh-color__chip--sm{width:40px;height:40px}.gh-color__chip--md{width:56px;height:56px}.gh-color__chip--lg{border-radius:10px;width:72px;height:72px}.gh-color__chip--empty{cursor:default;background:repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 6px,#e0e0e0 6px 12px)}.gh-color__chip--empty:hover{transform:none;box-shadow:inset 0 0 0 1px #0000001f}.gh-color__info{flex-direction:column;align-items:center;gap:2px;line-height:1.2;display:flex}.gh-color__name{color:#333;font-size:13px;font-weight:600}.gh-color__hex{color:#999;background:0 0;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.gh-color__mixes{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.gh-color__mix{background:#fcfcfc;border:1px solid #eee;border-radius:8px;padding:14px}.gh-color__equation{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:10px 8px;display:flex}.gh-color__op{color:#b0b0b0;-webkit-user-select:none;user-select:none;align-self:center;margin-top:16px;font-size:22px;font-weight:400}.gh-color__op--eq{color:#ff5401;font-weight:700}.gh-color__term--result .gh-color__chip{box-shadow:inset 0 0 0 1px #0000001f,0 0 0 3px #ff54012e}.gh-color__term--result .gh-color__name{color:#ff5401}.gh-color__meta{border-top:1px dashed #e6e6e6;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:12px;padding-top:10px;font-size:13px;display:flex}.gh-color__ratio{color:#0f8f6e;font-weight:600}.gh-color__note{color:#777}.gh-color__shades{border-top:1px solid #ececec;margin-top:18px;padding-top:16px}.gh-color__shades-title{color:#333;margin-bottom:12px;font-size:15px;font-weight:700}.gh-color__shade-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.gh-color__shade{text-align:center;background:#fcfcfc;border:1px solid #eee;border-radius:8px;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;display:flex}.gh-color__how{color:#777;font-size:12px;line-height:1.3}.gh-color__hublink{margin:.8em 0 1.4em;font-size:14px}.gh-color__hublink a{color:#0f8f6e;border-bottom:1px solid #0f8f6e59;font-weight:600;text-decoration:none}.gh-color__hublink a:hover{border-bottom-color:#0f8f6e}.gh-color__chip.is-copied{position:relative}.gh-color__chip.is-copied:after{content:"Скопійовано";white-space:nowrap;color:#fff;pointer-events:none;z-index:2;background:#17c699;border-radius:5px;padding:3px 8px;font-size:11px;font-weight:600;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}@media (width<=560px){.gh-color__chip--md{width:46px;height:46px}.gh-color__chip--lg{width:60px;height:60px}.gh-color__op{margin-top:12px;font-size:18px}.gh-color__shade-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}