.color-picker-container{max-width:1240px}.color-picker-workspace{padding-top:1rem}.color-picker-panel{--picker-base: rgb(255, 140, 66);--picker-base-solid: #ff8c42;--picker-tint: #ffb88f;--picker-shade: #aa5d2c;--picker-on-base: #111111;padding:0;overflow:hidden;overflow:clip;border:0;background:#171717;box-shadow:0 16px 48px #0000006b}.color-picker-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(420px,1fr);align-items:start}.color-picker-stage,.color-picker-inspector{min-width:0;padding:clamp(1.25rem,2.5vw,2rem)}.color-picker-stage{position:sticky;top:0;display:flex;flex-direction:column;min-height:780px;background:#202020}.color-picker-inspector{border-inline-start:1px solid rgba(255,255,255,.09);background:#151515}.color-picker-section-heading,.color-picker-recents-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.color-picker-section-heading{margin-bottom:1rem}.color-picker-section-heading h2,.color-picker-section-heading h3,.color-picker-recents-heading h3{margin:0;color:#fff;font-family:var(--font-montserrat-semi-bold);letter-spacing:-.02em}.color-picker-section-heading h2{font-size:clamp(1.05rem,2vw,1.3rem)}.color-picker-section-heading h3,.color-picker-recents-heading h3{font-size:1rem}.color-picker-primary-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:.75rem}.color-picker-native-control>span{white-space:nowrap}.color-picker-native-control,.color-picker-hex-control{min-width:0;margin:0}.color-picker-native-control>span,.color-picker-hex-control>span,.color-picker-format-row>label,.color-picker-alpha-control>span:first-child,.color-picker-background-control>span:first-child{display:block;margin-bottom:.45rem;color:#ffffffc7;font-family:var(--font-montserrat-semi-bold);font-size:.78rem}.color-picker-native-control input[type=color]{display:block;width:100%;min-width:84px;height:52px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#101010;cursor:pointer}.color-picker-native-control input[type=color]::-webkit-color-swatch-wrapper,.color-picker-background-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-native-control input[type=color]::-webkit-color-swatch,.color-picker-native-control input[type=color]::-moz-color-swatch,.color-picker-background-control input[type=color]::-webkit-color-swatch,.color-picker-background-control input[type=color]::-moz-color-swatch{border:0;border-radius:6px}.color-picker-hex-control .tool-input{width:100%;min-height:52px;border-color:#ffffff29;background:#101010;font-family:var(--font-monospace);font-size:clamp(1.05rem,2.3vw,1.3rem);font-weight:600;letter-spacing:.025em;text-transform:uppercase}.color-picker-eyedropper{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:52px;padding-inline:.9rem;white-space:normal}.color-picker-eyedropper[hidden]{display:none}.color-picker-eyedropper:disabled{cursor:wait;opacity:.62}.color-picker-panel .tool-input::placeholder{color:#ffffff9e}.color-picker-panel .tool-input:focus,.color-picker-panel input[type=color]:focus-visible,.color-picker-panel input[type=range]:focus-visible,.color-picker-panel button:focus-visible,.color-picker-panel a:focus-visible,.color-picker-panel textarea:focus-visible{outline:2px solid #ffb15a;outline-offset:3px}.color-picker-panel .tool-input[aria-invalid=true]{border-color:#ff786e;box-shadow:0 0 0 1px #ff786e33}.color-picker-hint,.color-picker-last-valid,.color-picker-family-help,.color-picker-recents-empty{margin:.55rem 0 0;color:#ffffffb3;font-size:.76rem;line-height:1.5}.color-picker-last-valid{color:#ffd08f}.color-picker-error{min-height:0;margin-top:.65rem;color:#ffb4ab}.color-picker-field-error{margin-top:.5rem;padding:.55rem .75rem;font-size:.78rem;line-height:1.45}.color-picker-error.visible{margin-bottom:0}.color-picker-scene{position:relative;min-height:390px;margin-top:1.35rem;overflow:hidden;border-radius:16px;background-color:#d5d5d5;background-image:linear-gradient(45deg,#f4f4f4 25%,transparent 25%),linear-gradient(-45deg,#f4f4f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f4f4f4 75%),linear-gradient(-45deg,transparent 75%,#f4f4f4 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;box-shadow:0 10px 32px #0000004d}.color-picker-scene:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:var(--picker-base)}.color-picker-scene-chrome{position:absolute;z-index:2;inset-inline:1rem;top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:46px;padding:.65rem .85rem;border-radius:10px;background:#0a0a0ae0;color:#fff;box-shadow:0 6px 18px #00000042}.color-picker-scene-chrome span{color:#ffffffc7;font-size:.76rem}.color-picker-scene-chrome strong{font-family:var(--font-monospace);font-size:.88rem;letter-spacing:.025em}.color-picker-scene-canvas{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end;min-height:390px;padding:5rem clamp(1rem,4vw,2.4rem) clamp(1rem,4vw,2.4rem)}.color-picker-demo-card{width:min(76%,470px);margin:0;padding:clamp(1.1rem,3vw,1.55rem);border:0;border-radius:14px;background:var(--picker-tint);color:var(--picker-shade);box-shadow:0 14px 32px #00000042}.color-picker-demo-topline{display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:var(--picker-shade);font-family:var(--font-montserrat-semi-bold);font-size:.68rem;letter-spacing:.12em}.color-picker-demo-dot{width:12px;height:12px;border-radius:999px;background:var(--picker-base-solid)}.color-picker-demo-card h3{max-width:20ch;margin:2rem 0 .75rem;color:var(--picker-shade);font-family:var(--font-montserrat-bold);font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.13;letter-spacing:-.03em}.color-picker-demo-card p{max-width:43ch;margin:0;color:var(--picker-shade);font-size:.82rem;line-height:1.55}.color-picker-demo-actions{display:flex;align-items:center;justify-content:flex-end;gap:.85rem;margin-top:1.4rem;font-size:.78rem}.color-picker-demo-actions span{color:var(--picker-shade);font-family:var(--font-montserrat-semi-bold)}.color-picker-demo-actions strong{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1rem;border-radius:8px;background:var(--picker-shade);color:var(--picker-tint);font-family:var(--font-montserrat-semi-bold)}.color-picker-panel.is-resolving .color-picker-scene{animation:color-picker-resolve .36s cubic-bezier(.16,1,.3,1)}@keyframes color-picker-resolve{0%{filter:saturate(.72);transform:scale(.993);box-shadow:0 5px 18px #00000038}to{filter:saturate(1);transform:scale(1);box-shadow:0 10px 32px #0000004d}}.color-picker-alpha-control{display:block;margin:1rem 0 0}.color-picker-alpha-control>span:first-child{display:flex;align-items:center;justify-content:space-between}.color-picker-alpha-control output{color:#fff;font-family:var(--font-monospace)}.color-picker-alpha-control input[type=range]{width:100%;height:44px;margin:0;accent-color:#ff9d3d;cursor:pointer}.color-picker-recents{margin-top:.9rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.color-picker-clear-recents{min-height:44px;padding:.35rem .6rem;border:0;border-radius:8px;background:transparent;color:#ffc37d;font-family:var(--font-montserrat-semi-bold);font-size:.75rem;cursor:pointer}.color-picker-clear-recents:disabled{color:#ffffff57;cursor:default}.color-picker-recent-list{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:.5rem;min-height:52px;margin-top:.65rem}.color-picker-recent-swatch{position:relative;min-width:44px;min-height:48px;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:9px;background-color:#d5d5d5;background-image:linear-gradient(45deg,#f4f4f4 25%,transparent 25%),linear-gradient(-45deg,#f4f4f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f4f4f4 75%),linear-gradient(-45deg,transparent 75%,#f4f4f4 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;cursor:pointer}.color-picker-recent-swatch:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:var(--recent-color)}.color-picker-recents-empty[hidden]{display:none}.color-picker-format-list{overflow:hidden;border-block:1px solid rgba(255,255,255,.1)}.color-picker-format-row{display:block;margin:0;padding:.9rem 0}.color-picker-format-row+.color-picker-format-row{border-top:1px solid rgba(255,255,255,.08)}.color-picker-format-control{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:.5rem}.color-picker-format-control .tool-input{width:100%;min-width:0;min-height:44px;border-color:#ffffff24;background:#0d0d0d;font-family:var(--font-monospace);font-size:.86rem}.color-picker-format-control .tool-btn-icon{width:44px;min-width:44px;height:44px;justify-content:center;padding:0}.color-picker-family,.color-picker-contrast,.color-picker-artifact{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}.color-picker-family-help{margin-top:-.45rem;margin-bottom:.8rem}.color-picker-family-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem}.color-picker-family-swatch,.color-picker-base-swatch{min-width:0;min-height:58px;padding:.45rem .35rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:var(--swatch-color);color:var(--swatch-text);cursor:pointer}.color-picker-family-swatch{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.2rem}.color-picker-family-swatch span,.color-picker-base-swatch span{font-family:var(--font-montserrat-semi-bold);font-size:.62rem}.color-picker-family-swatch code,.color-picker-base-swatch code{color:inherit;font-family:var(--font-monospace);font-size:.56rem;white-space:nowrap}.color-picker-base-swatch{display:flex;align-items:center;justify-content:space-between;width:100%;margin:.4rem 0;padding-inline:.75rem}.color-picker-base-swatch[aria-pressed=true]{outline:2px solid rgba(255,255,255,.86);outline-offset:-4px}.color-picker-background-control{display:block;margin:0}.color-picker-background-control>span:last-child{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:.5rem}.color-picker-background-control .tool-input{width:100%;min-width:0;min-height:44px;background:#0d0d0d;font-family:var(--font-monospace);font-size:.86rem;text-transform:uppercase}.color-picker-background-control input[type=color]{width:48px;height:44px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#0d0d0d;cursor:pointer}.color-picker-contrast-preview{display:flex;align-items:center;min-height:84px;margin-top:.75rem;padding:1rem;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#171717;color:var(--picker-base)}.color-picker-contrast-preview p{margin:0;color:inherit;font-family:var(--font-montserrat-semi-bold);font-size:1rem;line-height:1.5}.color-picker-contrast-result{margin-top:.8rem}.color-picker-contrast-result>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.color-picker-contrast-result>div:first-child span{color:#ffffffb8;font-size:.78rem}.color-picker-contrast-result>div:first-child strong{color:#fff;font-family:var(--font-monospace);font-size:1.15rem}.color-picker-contrast-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.7rem}.color-picker-contrast-badge{display:flex;flex-direction:column;gap:.25rem;padding:.6rem .7rem;border-radius:8px;background:#d1504429;color:#ffd0cc;font-size:.72rem}.color-picker-contrast-badge[data-pass=true]{background:#3f93602b;color:#b9f3cd}.color-picker-contrast-badge strong{color:inherit;font-family:var(--font-montserrat-semi-bold)}.color-picker-contrast-result>p{margin:.65rem 0 0;color:#ffffffab;font-size:.72rem;line-height:1.5}.color-picker-css-output{display:block;width:100%;min-height:250px;resize:vertical;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#0d0d0d;color:#f1f1f1;padding:.9rem;font-family:var(--font-monospace);font-size:.74rem;line-height:1.55;white-space:pre}.color-picker-artifact-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.75rem}.color-picker-artifact-actions .tool-btn,.color-picker-artifact-actions .tool-btn-secondary{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding-inline:.65rem;white-space:normal;text-align:center}.color-picker-status{min-height:40px;margin-top:.8rem;padding:.65rem .75rem;border-radius:8px;background:#202020;color:#ffffffc7;font-size:.78rem;line-height:1.45}.color-picker-status[data-state=success]{background:#3f93602b;color:#b9f3cd}.color-picker-status[data-state=error]{background:#d649402b;color:#ffd0cc}.color-picker-context-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;margin-top:1.25rem;padding:1rem;border-radius:12px;background:linear-gradient(120deg,#ff8c4233,#ffc14b14)}.color-picker-context-cta[hidden]{display:none}.color-picker-context-cta h3{margin:0 0 .35rem;color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:.96rem}.color-picker-context-cta p{max-width:52ch;margin:0;color:#ffffffc2;font-size:.76rem;line-height:1.5}.color-picker-context-actions{display:flex;flex-direction:column;gap:.5rem;min-width:176px}.color-picker-context-actions .tool-btn,.color-picker-context-actions .tool-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;text-align:center;text-decoration:none}.color-picker-steps{margin-bottom:1.75rem}.color-picker-cta-actions{display:flex;align-items:center;justify-content:center;gap:1rem}.color-picker-phoenix-cta .tool-text-link{color:#fff}@media (max-width: 1080px){.color-picker-layout{display:flex;flex-direction:column;align-items:stretch;padding:clamp(1.25rem,2.5vw,2rem);background:#1c1c1c}.color-picker-stage,.color-picker-inspector{display:contents}.color-picker-stage>.color-picker-section-heading{order:-6}.color-picker-primary-controls{order:-5}.color-picker-hint{order:-4}#colorPickerColorError{order:-3}.color-picker-last-valid{order:-2}.color-picker-format-list{order:-1;margin-top:1.1rem}.color-picker-inspector>.color-picker-section-heading{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1)}}@media (max-width: 760px){.color-picker-primary-controls{grid-template-columns:auto minmax(0,1fr)}.color-picker-native-control input[type=color]{min-width:74px}.color-picker-eyedropper{grid-column:1 / -1;width:100%}.color-picker-recent-list{grid-template-columns:repeat(4,minmax(44px,1fr))}}@media (max-width: 680px){.color-picker-layout{padding:1rem}.color-picker-scene,.color-picker-scene-canvas{min-height:340px}.color-picker-demo-card{width:92%}.color-picker-family-swatch{min-height:64px}.color-picker-family-swatch code{font-size:.52rem;letter-spacing:-.01em}.color-picker-context-cta{grid-template-columns:minmax(0,1fr)}.color-picker-context-actions{min-width:0}.color-picker-context-actions .tool-btn,.color-picker-context-actions .tool-btn-secondary{width:100%}}@media (max-width: 440px){.color-picker-section-heading{align-items:flex-start}.color-picker-section-heading>.tool-btn-icon{flex-shrink:0;padding-inline:.65rem;white-space:nowrap}.color-picker-primary-controls{grid-template-columns:auto minmax(0,1fr);gap:.55rem}.color-picker-native-control input[type=color]{min-width:64px}.color-picker-hex-control .tool-input{padding-inline:.7rem;font-size:1rem}.color-picker-scene,.color-picker-scene-canvas{min-height:310px}.color-picker-scene-chrome{inset-inline:.7rem;top:.7rem}.color-picker-scene-canvas{padding:4.4rem .7rem .7rem}.color-picker-demo-card{width:100%}.color-picker-demo-card h3{margin-top:1.4rem;font-size:1.35rem}.color-picker-family-swatch span{font-size:.56rem}.color-picker-contrast-badges{grid-template-columns:minmax(0,1fr)}.color-picker-css-output{min-height:230px}.color-picker-cta-actions{align-items:stretch;flex-direction:column}.color-picker-cta-actions a{width:100%;text-align:center}}@media (prefers-reduced-motion: reduce){.color-picker-workspace *,.color-picker-workspace *:before,.color-picker-workspace *:after,.color-picker-phoenix-cta *,.color-picker-phoenix-cta *:before,.color-picker-phoenix-cta *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.color-picker-panel .tool-btn:hover,.color-picker-phoenix-cta .primary-button:hover{transform:none}}@media (forced-colors: active){.color-picker-panel,.color-picker-scene,.color-picker-demo-card,.color-picker-format-list,.color-picker-family,.color-picker-family-swatch,.color-picker-base-swatch,.color-picker-contrast,.color-picker-contrast-preview,.color-picker-contrast-badge,.color-picker-css-output,.color-picker-status,.color-picker-context-cta,.color-picker-recent-swatch{border:1px solid CanvasText;forced-color-adjust:auto}.color-picker-scene:before,.color-picker-family-swatch,.color-picker-base-swatch,.color-picker-recent-swatch:after{forced-color-adjust:none}.color-picker-family-swatch,.color-picker-base-swatch,.color-picker-recent-swatch{outline:1px solid CanvasText;outline-offset:-2px}.color-picker-contrast-badge[data-pass=true]{color:HighlightText;background:Highlight}}