body{margin:0}.color-picker-container{background:#f5f5f5;padding:32px 16px;border-radius:12px;width:fit-content}.color-picker-title{margin:0 0 24px;font-size:24px;font-weight:600;color:#333}.color-picker-content{display:flex;gap:20px}.color-picker-left{display:flex;flex-direction:column;gap:16px}.color-picker-square{width:280px;height:280px;border-radius:12px;position:relative;cursor:crosshair;overflow:hidden}.color-picker-overlay-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent)}.color-picker-overlay-black{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000000)}.color-picker-boundary-box{position:absolute;border:2px dashed rgba(255,255,255,.9);box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006;pointer-events:none;z-index:1}.color-picker-cursor{position:absolute;width:8px;height:8px;border:3px solid #ffffff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;z-index:2}.color-picker-hue{width:280px;height:16px;border-radius:8px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);position:relative;cursor:pointer}.color-picker-hue-cursor{position:absolute;width:20px;height:20px;border:3px solid #ffffff;border-radius:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003}.color-picker-right{display:flex;flex-direction:column;gap:16px}.color-preview{width:120px;height:120px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.color-inputs-column{display:flex;flex-direction:column;gap:16px}.color-input-group{display:flex;flex-direction:column;gap:4px}.color-label{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.color-input{padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;font-family:monospace;background:#fff;color:#333;transition:border-color .2s;outline:none}.color-input:focus{border-color:#4a9eff}.hex-input{width:168px;box-sizing:border-box}.hsb-inputs{display:flex;gap:8px;width:100%}.hsb-input{width:32px;text-align:center;padding:12px 8px}.color-input[type=number]::-webkit-inner-spin-button,.color-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-input[type=number]{-moz-appearance:textfield;appearance:textfield}@media(max-width:768px){.color-picker-content{flex-direction:column}.color-picker-square,.color-picker-hue,.color-preview{width:100%}}.curve-picker-container{background:#f5f5f5;padding:32px;border-radius:12px;width:fit-content}.curve-picker-title{margin:0 0 24px;font-size:24px;font-weight:600;color:#333}.curve-picker-square-wrapper{position:relative}.curve-picker-square{width:280px;height:280px;border-radius:12px;position:relative;overflow:visible;box-shadow:0 2px 8px #0000001a}.curve-picker-overlay-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent);border-radius:12px;pointer-events:none}.curve-picker-overlay-black{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000000);border-radius:12px;pointer-events:none}.curve-picker-color-cursor{position:absolute;width:8px;height:8px;border:3px solid #f3f2f2;background-color:#f3f2f2;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;z-index:5}.curve-picker-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible;border-radius:12px;z-index:1}.curve-point{position:absolute;width:8px;height:8px;transform:translate(-50%,-50%);cursor:grab;z-index:10;transition:transform .1s ease}.curve-point:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2)}.curve-point-inner{width:100%;height:100%;border-radius:50%;box-shadow:0 2px 6px #0000004d}.curve-point-endpoint .curve-point-inner{background:#fff;border:3px solid #4a9eff}.curve-point-endpoint:hover .curve-point-inner{background:#e3f2ff;border-color:#2d7fd6}.curve-point-control .curve-point-inner{background:#fff;border:3px solid #ff6b6b}.curve-point-control:hover .curve-point-inner{background:#ffe3e3;border-color:#f44}@media(max-width:768px){.curve-picker-square{width:100%}}.shades-counter-container{background:#f5f5f5;padding:24px 32px;border-radius:12px;max-width:max-content;box-sizing:border-box;max-width:none}.shades-counter-content{display:flex;align-items:center;justify-content:space-between;gap:20px}.shades-counter-label{font-size:18px;font-weight:600;color:#333;margin:0}.shades-counter-controls{display:flex;align-items:center;gap:16px}.shades-counter-button{width:36px;height:36px;border:2px solid #4a9eff;background:#fff;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#4a9eff}.shades-counter-button:hover:not(:disabled){background:#e3f2ff;border-color:#2d7fd6;transform:scale(1.05)}.shades-counter-button:active:not(:disabled){transform:scale(.95)}.shades-counter-button:disabled{border-color:#ddd;color:#ccc;cursor:not-allowed;opacity:.5}.shades-counter-value{font-size:24px;font-weight:700;color:#333;min-width:40px;text-align:center}@media(max-width:768px){.shades-counter-content{flex-direction:column;align-items:flex-start}}.shades-editor-container{background:#f5f5f5;padding:32px;border-radius:12px;width:fit-content}.shades-editor-title{margin:0 0 24px;font-size:24px;font-weight:600;color:#333}.shades-editor-square-wrapper{position:relative}.shades-editor-square{width:280px;height:280px;border-radius:12px;position:relative;overflow:visible;box-shadow:0 2px 8px #0000001a}.shades-editor-overlay-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent);border-radius:12px;pointer-events:none}.shades-editor-overlay-black{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000000);border-radius:12px;pointer-events:none}.shades-editor-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible;border-radius:12px;z-index:1}.shades-editor-color-cursor{position:absolute;width:8px;height:8px;border:3px solid #f3f2f2;background-color:#f3f2f2;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;z-index:5}.shade-point{position:absolute;width:8px;height:8px;transform:translate(-50%,-50%);cursor:grab;z-index:10;transition:transform .1s ease}.shade-point:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2)}.shade-point-inner{width:100%;height:100%;border-radius:50%;border:2.5px solid #ffffff;box-shadow:0 2px 6px #0006,0 0 0 1px #0003}.shade-point:hover .shade-point-inner{border-width:3px;box-shadow:0 3px 8px #00000080,0 0 0 2px #0000004d}@media(max-width:768px){.shades-editor-square{width:100%}}.section{background:#e7e6e6;border-radius:12px;padding:12px;box-shadow:0 2px 8px #0000001a;max-width:1600px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:24px;font-weight:600;color:#333;margin:0}.lock-button{background:transparent;border:2px solid #ccc;border-radius:6px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.lock-button.locked{border-color:#ff4d4d;color:#ff4d4d;background:#ffe6e6}.lock-button.unlocked{border-color:#4caf50;color:#4caf50;background:#e6f3e6}.lock-button:hover{filter:brightness(90%)}.lock-button.locked:hover{background:#ffd6d6}.lock-button.unlocked:hover{background:#d6e9d6}.section-content{display:grid;grid-template-columns:1fr;gap:8px;transition:opacity .2s ease}.section-content-single-column{grid-template-columns:1fr;gap:12px}@media screen and (min-width:1690px){.section-content{grid-template-columns:repeat(2,1fr)}}.palette-title{font-size:20px;font-weight:700;color:#8e10d2;margin:0}.color-palette-panel{position:fixed;top:12px;right:20px;width:600px;height:calc(100vh - 20px);background:#f4f2f2;box-shadow:-4px 0 12px #0000001a;z-index:1000;overflow-y:auto;border-radius:12px;display:flex}.color-palette-panel-content{padding:4px 24px;height:100%;width:100%;display:flex;flex-direction:column;gap:8px}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.export-button-container{position:relative}.export-button{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#8e10d2;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 6px #8e10d24d}.export-button:hover{background:#7a0db8;box-shadow:0 3px 8px #8e10d266;transform:translateY(-1px)}.export-button:active{transform:translateY(0)}.export-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:4px;min-width:180px;z-index:1001}.export-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background .2s}.export-menu-item:hover{background:#f5f5f5}.export-menu-item svg{flex-shrink:0}.color-section{display:flex;flex-direction:column;gap:8px}.color-section-title{font-size:20px;font-weight:600;color:#333;margin:0}.color-cards-row{display:flex;gap:8px}.color-card{flex:0 0 auto;width:108px;background:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 6px #00000014;display:flex;flex-direction:column;align-items:center;gap:10px}.color-card-square{width:80px;aspect-ratio:1;border-radius:6px;box-shadow:0 1px 4px #0000001a}.color-card-info{display:flex;flex-direction:column;gap:4px}.color-card-name{font-size:14px;font-weight:600;color:#333}.color-card-hex{font-size:12px;font-family:monospace;color:#888;font-weight:500}.color-card-hsb{font-size:12px;font-family:monospace;color:#888}.color-palette-panel::-webkit-scrollbar{width:8px;display:none}.color-palette-panel::-webkit-scrollbar-track{background:#d0d0d0}.color-palette-panel::-webkit-scrollbar-thumb{background:#999;border-radius:4px}.color-palette-panel::-webkit-scrollbar-thumb:hover{background:#777}.shades-grid{display:flex;gap:12px}.shade-column{display:flex;flex-direction:column;gap:8px;flex:1}.shade-column-header{font-size:11px;font-weight:700;color:#666;text-align:center;letter-spacing:.5px}.shade-column-colors{display:flex;flex-direction:column;gap:4px}.shade-box{width:100%;height:36px;border-radius:6px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 1px 3px #0000001a}.shade-box:hover{transform:scale(1.05);box-shadow:0 3px 8px #0003}.shade-box:active{transform:scale(.98)}@media screen and (max-width:1172px){.color-palette-panel{display:none}}.App{min-height:100vh;display:flex;background:#e0e0e0}.app-main-content{flex:1;margin-right:600px;display:flex;align-items:center;justify-content:center;padding:20px}.app-container{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.app-header{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;width:100%}.app-title{font-size:36px;font-weight:700;color:#333;margin:0;text-align:center}.github-link{color:#333;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px}.github-link:hover{color:#8e10d2;background:#8e10d21a;transform:scale(1.1)}.github-link:active{transform:scale(.95)}.start-over-button{padding:12px 24px;background:#c2212f;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #ff47574d}.start-over-button:hover{background:#ff3838;box-shadow:0 4px 12px #ff475766;transform:translateY(-1px)}.start-over-button:active{transform:translateY(0);box-shadow:0 2px 6px #ff47574d}