:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#29292e;background:#fcfcfd;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}#app{min-height:100svh;max-width:1080px;margin:auto;padding:28px 40px 16px;display:grid;grid-template-rows:auto 1fr;--colour: #1c1c24;--alpha: 1}header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}h1{font-size:19px;font-weight:550;letter-spacing:-.6px;margin:0 0 7px}header p{color:#74747c;font-size:14px;line-height:1.5;margin:0}header a{color:#65656e;text-decoration:none;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:10px}header a:hover{color:#222}.stage{display:grid;place-items:center;padding:24px 0 4px}.picker{width:min(100%,340px)}.field{height:clamp(160px,calc(100svh - 460px),340px);position:relative;border-radius:12px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);box-shadow:inset 0 0 0 1px #00000012;touch-action:none;cursor:crosshair}.cursor{position:absolute;width:19px;height:19px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0005;transform:translate(-50%,-50%);pointer-events:none}.track{display:block;height:40px;position:relative;margin-top:4px}.track:before{content:"";position:absolute;left:0;right:0;top:13px;height:14px;border-radius:5px}.hue:before{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha{margin-top:0}.alpha:before{background:linear-gradient(to right,transparent,var(--colour)),repeating-conic-gradient(#ccc,#ccc 25%,#fff 0%,#fff 50%) 0 / 10px 10px}.track input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:40px;margin:0;background:transparent;position:relative;cursor:pointer}.track input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:21px;height:21px;border-radius:50%;border:2px solid white;background:transparent;box-shadow:0 0 0 1px #0006}.track input::-moz-range-thumb{width:17px;height:17px;border-radius:50%;border:2px solid white;background:transparent;box-shadow:0 0 0 1px #0006}.entry{position:relative;display:flex;align-items:center;min-height:46px;gap:8px;border:1px solid #dedee4;border-radius:10px;padding:0 13px;margin-top:9px;background:#fff;box-shadow:0 1px 2px #00000003}.entry:focus-within{outline:3px solid #e8e8ed;border-color:#96969f}.entry input{font:inherit;font-size:15px;min-width:0;width:100%;height:44px;border:none;background:none;outline:none;color:inherit}.entry input::placeholder{color:#8a8a93;font-size:14px}.phrase-help{flex-shrink:0;margin-inline-end:-13px}#help-button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:9px;background:transparent;color:#60606a;cursor:pointer}#help-button:focus-visible{outline:2px solid #29292e;outline-offset:-4px}@media(hover:hover){#help-button:hover{background:#f0f0f4}}#phrase-help{position:absolute;z-index:1;inset-inline:0;bottom:100%;padding:12px 14px;border:1px solid #dedee4;border-radius:10px;background:#fff;box-shadow:0 4px 16px #00000012;color:#55555f;font-size:13px;line-height:1.5}.examples{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px 0 16px}.examples button{min-height:32px;padding:5px 10px;border:1px solid #e7e7ec;border-radius:7px;background:transparent;color:#60606a;font:inherit;font-size:12px;line-height:20px;white-space:nowrap;cursor:pointer;transition:background-color .15s,scale .15s}.examples button:hover{color:#29292e;background:#f0f0f4}.examples button:active{scale:.96}#result-label{margin:0 0 4px;color:#72727a;font-size:12px;line-height:18px}.result{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid #e9e9ee;padding-top:6px}.swatch{width:23px;height:23px;flex-shrink:0;border-radius:6px;position:relative;background:repeating-conic-gradient(#ddd,#ddd 25%,#fff 0%,#fff 50%) 0 / 8px 8px;overflow:hidden}.swatch:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--colour);opacity:var(--alpha);box-shadow:inset 0 0 0 1px #0001;border-radius:inherit}#hex{min-width:0;flex:1;width:110px;border:0;background:transparent;color:inherit;font:13px ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;height:36px}#copy{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;width:85px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:#55555f;font:inherit;font-size:12px;cursor:pointer;transition:background-color .15s,scale .15s}#copy:hover{background-color:#f0f0f4}#copy:active{scale:.96}.copy-icons{position:relative;width:18px;height:18px}.copy-icons svg{position:absolute;top:0;right:0;bottom:0;left:0;width:18px;height:18px;transition:opacity .3s cubic-bezier(.2,0,0,1),scale .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1)}.check-icon,.copied .copy-icon{opacity:0;scale:.25;filter:blur(4px)}.copied .check-icon{opacity:1;scale:1;filter:blur(0)}#status{min-height:36px;margin:5px 0 0;font-size:11px;line-height:1.5;color:#72727a}.loading{width:15px;height:15px;flex-shrink:0;border:1.5px solid #bbb;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}:focus-visible{outline:2px solid #7773ab;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:600px){#app{padding:20px 24px 8px}header p{max-width:230px;font-size:13px}.stage{padding-top:20px}.field{height:clamp(140px,calc(100svh - 460px),320px)}.entry input{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}