*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica,Arial,sans-serif;background:#ececec;min-height:100vh;display:flex;justify-content:center;align-items:center}.container{text-align:center;font-size:29px;color:#333;text-shadow:0 1px 0 rgba(255,255,255,.8);line-height:1.6}.container p{margin:.5em 0}.separator-link{display:inline-block;width:40px;height:40px;text-decoration:none;cursor:grab;-webkit-user-select:none;user-select:none;border:1px dashed #999;border-radius:4px;background-repeat:no-repeat;background-position:center;background-size:16px 16px;vertical-align:middle}.separator-link:hover{background-color:#0000000d}.separator-link:active{cursor:grabbing}a{color:#335fa1;text-decoration:none}a:hover{text-decoration:underline}.color-presets{display:flex;gap:8px;justify-content:center;margin-top:30px}.color-preset{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s}.color-preset:hover{transform:scale(1.15)}.color-preset.active{border-color:#333}.color-picker{width:28px;height:28px;border-radius:50%;border:1px dashed #999;cursor:pointer;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;transition:transform .15s}.color-picker::-webkit-color-swatch-wrapper{padding:2px}.color-picker::-webkit-color-swatch{border:none;border-radius:50%}.color-picker:hover{transform:scale(1.15)}.color-picker.no-value{background:radial-gradient(circle,transparent 60%,#ececec 61%),conic-gradient(#e07070,#e0c060,#70c070,#60b0d0,#7070e0,#c070c0,#e07070)}.color-picker.no-value::-webkit-color-swatch{opacity:0}