.color-studio{overflow:visible}.color-studio .tool-header{border-radius:9px 9px 0 0}.color-studio .color-note{color:var(--muted);font-size:.8rem;line-height:1.6}.color-studio .form-range{min-height:32px}.color-studio .form-range::-webkit-slider-runnable-track{background:var(--line)}.color-studio .form-range::-moz-range-track{background:var(--line)}.color-studio .color-fit{width:auto;max-width:100%}.color-studio .color-workbench{padding-block:8px 16px}.color-studio .color-wheel{touch-action:none;width:min(100%,230px);margin:0 auto 12px;display:block}.color-studio .color-wheel-marker{cursor:grab;touch-action:none;outline:none}.color-studio .color-wheel-marker:focus-visible .color-wheel-marker-ring{stroke:var(--accent);stroke-width:4px}.color-studio .color-wheel-marker.is-selected .color-wheel-marker-ring{stroke-width:3px}.color-studio .color-wheel.is-dragging .color-wheel-marker{cursor:grabbing}.color-studio .color-wheel-control{min-width:0}.color-studio .color-wheel-column{align-self:start}.color-studio .color-palette{gap:8px;display:flex}.color-studio .color-palette-item{background:var(--surface);border:2px solid #0000;border-radius:12px;flex:1;min-width:0;padding:3px}.color-studio .color-palette-item.is-selected{border-color:var(--accent)}.color-studio .color-tile{color:var(--ink);text-align:center;background:0 0;border:0;border-radius:7px;width:100%;padding:0;display:block;position:relative;overflow:hidden}.color-studio .color-tile .color-swatch{height:106px}.color-studio .color-tile-number{background:var(--surface);color:var(--ink);pointer-events:none;border-radius:2px;padding-inline:4px;font-size:.7rem;line-height:1.5;position:absolute;top:5px;right:5px}.color-studio .color-tile-label{overflow-wrap:anywhere;padding:9px 0 4px;font:.67rem monospace;display:block}.color-studio .color-lock{color:var(--muted);background:0 0;border:0;border-radius:5px;width:100%;min-height:36px;display:block}.color-studio .color-lock[aria-pressed=true]{color:var(--accent)}.color-studio .color-lock:hover{color:var(--ink)}.color-studio .color-swatch,.color-studio .color-gradient-preview{background:repeating-conic-gradient(#aaa 0% 25%,#eee 0% 50%) 0/14px 14px}.color-studio .color-swatch{width:100%;display:block}.color-studio .color-sliders .form-label{margin:0;font-size:.8rem}.color-studio .color-toolbar{border-bottom:1px solid var(--line);background:var(--paper);padding:12px 24px}.color-studio .color-toolbar .dropdown-menu{min-width:12rem}.color-studio .color-mood-row{border-radius:var(--bs-border-radius-sm);cursor:pointer;align-items:center;gap:.6rem;min-height:40px;margin:0;padding:.5rem .75rem;display:flex}.color-studio .color-mood-row .form-check-input{float:none;cursor:pointer;flex-shrink:0;margin:0}.color-studio .color-mood-row:hover,.color-studio .color-mood-row:focus-within{background:var(--bs-dropdown-link-hover-bg)}.color-studio .color-preset-groups{--bs-accordion-btn-padding-x:.75rem;--bs-accordion-btn-padding-y:.75rem;--bs-accordion-body-padding-x:.5rem;--bs-accordion-body-padding-y:.5rem}.color-studio .color-preset-groups .accordion-button{font-size:.85rem}.color-studio .color-preset{border:1px solid var(--line);border-radius:var(--bs-border-radius);background:var(--paper);width:100%;color:var(--ink);text-align:left;flex-direction:column;gap:7px;padding:6px;font-size:.8rem;display:flex}.color-studio .color-preset:hover{border-color:var(--accent)}.color-studio .color-preset-swatches{border-radius:3px;width:100%;height:40px;display:flex;overflow:hidden}.color-studio .color-preset-swatches .color-swatch{min-width:0;height:100%}.color-studio .color-share{color:var(--muted)}.color-studio .color-share .field-header label{font-size:.8rem;font-weight:400!important}.color-studio .color-share input{color:var(--muted);font-size:.72rem}.color-studio .nav-underline{--bs-nav-underline-link-active-color:var(--accent);gap:.25rem 1.5rem}.color-studio .nav-underline .nav-link{min-height:44px;font-size:.85rem}.color-studio .color-code-dialog{width:min(36rem,100dvw - 2rem);max-height:calc(100dvh - 2rem);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--bs-border-radius-lg);padding:24px;overflow-y:auto}.color-studio .color-code-dialog::backdrop{background:#000000a6}.color-studio .color-conversion{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.color-studio .color-conversion .form-control{font-size:.8rem}.color-studio .color-shades{flex-wrap:wrap;gap:6px;display:flex}.color-studio .color-shade{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;flex:1 0 68px;padding:0;position:relative;overflow:hidden}.color-studio .color-shade .color-swatch{height:90px}.color-studio .color-shade strong,.color-studio .color-shade small{display:block}.color-studio .color-shade strong{padding-top:8px;font-size:.85rem}.color-studio .color-shade small{padding:4px 0 8px;font:.65rem monospace}.color-studio .color-contrast-preview,.color-studio .color-gradient-preview{border-radius:12px;width:100%;height:auto;display:block}.color-studio .color-ratio{justify-content:space-between;align-items:baseline;gap:8px;margin:8px 0;display:flex}.color-studio .color-ratio strong{letter-spacing:-.05em;font-size:2rem}.color-studio .color-ratio span{color:var(--muted);font-size:.8rem}.color-studio .color-checks{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.color-studio .color-checks>div{border:1px solid var(--line);border-radius:9px;flex-direction:column;flex:120px;gap:6px;padding:12px;font-size:.8rem;display:flex}.color-studio .color-checks small{color:var(--muted)}.color-studio .color-picker-group{flex-shrink:0;margin-left:auto;position:relative}.color-studio .color-picker-trigger{min-height:32px;color:var(--accent);white-space:nowrap;background:0 0;border:0;align-items:center;gap:6px;padding:3px 0;font-size:.75rem;display:inline-flex}.color-studio .color-picker-trigger>span:first-of-type{text-underline-offset:4px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.color-studio .color-picker-trigger .bi{font-size:.6rem}.color-studio .color-picker-trigger .color-swatch,.color-studio .color-picker-option .color-swatch{border:1px solid var(--line);border-radius:3px;flex:0 0 20px;width:20px;height:20px}.color-studio .color-picker-popup{overscroll-behavior:contain;z-index:20;border:1px solid var(--line);border-radius:var(--bs-border-radius);background:var(--surface);width:min(17rem,100vw - 3rem);max-height:min(22rem,50dvh - 3rem);color:var(--ink);padding:12px;position:absolute;top:calc(100% + 4px);right:0;overflow-y:auto;box-shadow:0 6px 20px #00000040}.color-studio .color-picker-popup.is-above{top:auto;bottom:calc(100% + 4px)}.color-studio .color-picker-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.color-studio .color-picker-option{border:1px solid var(--line);border-radius:var(--bs-border-radius-sm);background:var(--paper);width:100%;min-width:0;color:var(--ink);flex-direction:column;gap:3px;padding:4px;font-size:.7rem;display:flex;position:relative}.color-studio .color-picker-option .color-swatch{flex-basis:28px;width:100%;height:28px}.color-studio .color-picker-option:hover,.color-studio .color-picker-option[aria-pressed=true]{border-color:var(--accent)}.color-studio .color-picker-number{background:var(--surface);border-radius:2px;padding-inline:3px;position:absolute;top:7px;left:7px}.color-studio .color-picker-hex{white-space:nowrap;font-size:.58rem}.color-studio .color-gradient-endpoints{margin-bottom:.75rem}.color-studio .color-gradient-endpoint:first-child{padding-right:1rem}.color-studio .color-gradient-endpoint+.color-gradient-endpoint{border-left:1px solid var(--line);padding-left:1rem}.color-studio .color-info{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}.color-studio .color-info-button{width:28px;height:28px;color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;padding:0;font-size:.8rem;display:inline-flex}.color-studio .color-info-button:hover{color:var(--accent)}.color-studio .color-info-tip{z-index:30;border:1px solid var(--line);border-radius:var(--bs-border-radius);background:var(--paper);width:min(17rem,100vw - 3rem);color:var(--ink);text-align:left;padding:10px;font-size:.75rem;font-weight:400;line-height:1.6;position:absolute;bottom:100%;right:0;box-shadow:0 3px 12px #0003}.color-studio .color-info-tip.align-start{left:0;right:auto}.color-studio .color-info-tip.align-center{left:50%;right:auto;transform:translate(-50%)}.color-studio .color-info-tip.is-below{top:100%;bottom:auto}.color-studio .color-picker-popup .color-info-tip{width:min(14rem,100vw - 5rem);inset:auto 0 100% auto;transform:none}.color-studio .color-copy-icon{display:inline-block}.color-studio .color-copy-marker{background:var(--surface);width:24px;height:24px;color:var(--ink);opacity:0;border-radius:4px;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:6px;right:6px}.color-studio .color-shade:hover .color-copy-marker,.color-studio .color-shade:focus-visible .color-copy-marker,.color-studio .color-shade.is-copied .color-copy-marker,.color-studio .color-shade.copy-failed .color-copy-marker{opacity:1}.color-studio .is-copied .color-copy-icon,.color-studio .is-copied .color-copy-marker{color:var(--accent);animation:.22s ease-out color-copy-confirm}.color-studio .copy-failed .color-copy-icon,.color-studio .copy-failed .color-copy-marker{color:var(--bs-danger)}@media (hover:none){.color-studio .color-copy-marker{opacity:.8}}@media (prefers-reduced-motion:reduce){.color-studio .is-copied .color-copy-icon,.color-studio .is-copied .color-copy-marker{animation:none}}@media (width<=991.98px){.color-studio .color-gradient-endpoint:first-child{padding-right:0}.color-studio .color-gradient-endpoint+.color-gradient-endpoint{border-left:0;border-top:1px solid var(--line);margin-top:.5rem;padding:.5rem 0 0}}@container (width<=600px){.color-studio .color-gradient-endpoint{width:100%}.color-studio .color-gradient-endpoint:first-child{padding-right:0}.color-studio .color-gradient-endpoint+.color-gradient-endpoint{border-left:0;border-top:1px solid var(--line);margin-top:.5rem;padding:.5rem 0 0}}.color-studio .color-picker-custom{border-top:1px dotted var(--line)}.color-studio .color-picker-trigger:focus-visible,.color-studio .color-picker-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@container (width<=600px){.color-studio .color-wheel-column{flex-wrap:wrap;align-items:center;gap:14px;width:100%;display:flex}.color-studio .color-wheel-control{flex:200px}.color-studio .color-harmony-controls{flex:1;min-width:0}.color-studio .color-workbench>.col-lg-8{width:100%}.color-studio .color-wheel{width:200px;max-width:100%;margin:0 auto 8px}.color-studio .color-tile .color-swatch{height:80px}.color-studio .color-palette{gap:2px}.color-studio .color-palette-item{padding:2px}.color-studio .color-tile-label{font-size:.6rem}}html:has(.color-code-dialog[open]){overflow:hidden}@keyframes color-copy-confirm{0%{opacity:.4;transform:scale(.65)}to{opacity:1;transform:scale(1)}}.color-studio .color-angle-dial{touch-action:none;cursor:crosshair;border-radius:50%;width:140px;max-width:100%;margin-inline:auto;display:block}.color-studio .color-angle-dial:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.color-studio .color-angle-dial text{fill:var(--muted);font-size:8px}.color-studio .color-angle-face{fill:var(--paper);stroke:var(--line);stroke-width:2px}.color-studio .color-angle-ticks{stroke:var(--muted);stroke-width:2px}.color-studio .color-angle-hand{stroke:var(--accent);stroke-width:3px}.color-studio .color-angle-knob{fill:var(--accent)}.color-studio .color-angle-value{min-height:36px;color:var(--accent);text-underline-offset:4px;white-space:nowrap;background:0 0;border:0;padding:4px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.color-studio .color-angle-input{width:6rem}.color-studio .color-preset-dialog{width:min(60rem,100dvw - 2rem)}