.color-studio{--ink:#343d43;--muted:#85828b;--accent:#76648e;--line:#e8e3e9;background:#f7f6f2;color:var(--ink);min-height:100vh;padding-bottom:90px!important;font-family:inherit}
.color-studio *{box-sizing:border-box}.color-studio [hidden]{display:none!important}.color-studio .cs-wrap{max-width:1180px;margin:auto;padding:24px}.color-studio .cs-nav{display:flex;justify-content:space-between;align-items:center;font-size:12px}.color-studio a{color:var(--accent)}.color-studio .cs-nav span{letter-spacing:2px;font-size:10px;color:#9a8f80}.color-studio .cs-hero{display:flex;justify-content:space-between;align-items:end;padding:38px 0 28px;gap:20px}.color-studio .cs-hero small{color:#a28b68;font-size:11px;letter-spacing:3px}.color-studio h1{font-size:30px;color:var(--ink);margin:12px 0 0;line-height:1.4}.color-studio h1 span{display:block;font-weight:400;font-size:18px;margin-top:9px}.color-studio .cs-hero p{font-size:13px;color:var(--muted);line-height:1.9;margin:0}.color-studio .cs-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;align-items:start}.color-studio .cs-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;min-width:0}.color-studio .cs-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.color-studio h2{font-size:16px;color:var(--ink);margin:0}.color-studio h2 span{color:#b2a0bd;font-size:12px;margin-right:8px;font-weight:400}.color-studio h3{font-size:13px;color:var(--ink);margin:0}
.color-studio button,.color-studio .cs-button{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:#fff;color:var(--accent);font:inherit;font-size:12px;line-height:1.5;cursor:pointer;margin:0}.color-studio button:hover{background:#f5f1f7}.color-studio .cs-primary{background:#76648e;color:white;border-color:#76648e}.color-studio button:disabled{opacity:.4;cursor:default}.color-studio :is(button,input,select,canvas,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}.color-studio .cs-file{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.color-studio .cs-file:focus-visible+.cs-photo-area{outline:2px solid var(--accent)}
.color-studio .cs-photo-area{border:1px dashed #dcd3e3;border-radius:13px;background:#f8f7f9;min-height:390px;display:flex;align-items:center;justify-content:center;overflow:hidden}.color-studio .cs-photo-area.cs-dragover{background:#eee6f5;border-color:#76648e}.color-studio .cs-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px 12px;cursor:pointer;min-height:390px;width:100%;color:var(--muted);font-size:12px}.color-studio .cs-empty strong{font-size:17px;font-weight:500;color:#60536b}.color-studio .cs-empty small{font-size:11px;line-height:1.9;margin-top:12px}.color-studio .cs-upload-icon{border:1px solid #dfd6e8;color:#8c759e;background:#eee8f3;font-size:30px;line-height:60px;width:60px;height:60px;border-radius:18px;margin-bottom:12px}.color-studio #cs-photo-preview{width:100%;padding:10px}.color-studio .cs-photo-stage{position:relative;width:fit-content;margin:auto;max-width:100%;line-height:0}.color-studio #cs-photo-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:540px;touch-action:none;cursor:crosshair;border-radius:6px}.color-studio #cs-photo-point{position:absolute;width:22px;height:22px;border:2px solid white;box-shadow:0 0 0 1px #303030,0 2px 6px #0006;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.color-studio #cs-photo-point:after{content:'';position:absolute;width:2px;height:2px;background:white;left:8px;top:8px}.color-studio #cs-crop-box{position:absolute;border:2px dashed #fff;box-shadow:0 0 0 1px #665474;background:#76648e22;pointer-events:none}
.color-studio .cs-photo-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px}.color-studio .cs-segment{display:flex;background:#f4f1f6;padding:3px;border-radius:9px;margin-right:auto}.color-studio .cs-segment button{border:0;background:transparent;color:#93879e}.color-studio .cs-segment button[aria-pressed=true]{background:#fff;color:#6e5685;box-shadow:0 1px 4px #40304f13}.color-studio .cs-status{color:var(--accent);font-size:12px;line-height:1.8;margin:10px 0 0}.color-studio .cs-muted{font-size:11px;color:var(--muted);line-height:1.8;margin:8px 0;overflow-wrap:anywhere}.color-studio .cs-palette-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:18px}.color-studio .cs-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}.color-studio .cs-palette>p{grid-column:1/-1;padding:12px 0}.color-studio .cs-swatch{padding:0;overflow:hidden;text-align:left;color:var(--ink)}.color-studio .cs-swatch i{height:48px;display:block}.color-studio .cs-swatch span{display:block;padding:7px 9px;font-size:10px;line-height:1.8}.color-studio .cs-swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
.color-studio .cs-tag{background:#f3eff7;border-radius:20px;padding:3px 8px;font-size:10px;color:#8d779f}.color-studio .cs-picked{display:flex;gap:12px;align-items:center}.color-studio #cs-native-color{width:54px!important;height:54px!important;min-height:0;padding:0!important;border:0;border-radius:10px;background:transparent;cursor:pointer}.color-studio #cs-native-color::-webkit-color-swatch{border:0;border-radius:9px}.color-studio .cs-picked>div{flex:1;min-width:0}.color-studio .cs-picked label{font-size:10px;color:var(--muted);display:block}.color-studio #cs-hex{font-family:monospace;font-size:19px!important;font-weight:600;letter-spacing:1px;padding:0!important;height:28px!important;width:115px;border:0;background:transparent;color:var(--ink)}.color-studio #cs-rgb{display:block;font-size:10px;color:var(--muted)}.color-studio .cs-wheel-wrap{position:relative;width:280px;aspect-ratio:1;max-width:100%;margin:14px auto 0}.color-studio #cs-wheel{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}.color-studio #cs-wheel-dots{position:absolute;inset:0;pointer-events:none}.color-studio .cs-dot{position:absolute;width:10px;height:10px;padding:0;border:1.5px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #343d4355;pointer-events:auto}.color-studio .cs-dot[aria-pressed=true]{width:15px;height:15px;outline:2px solid #343d43;z-index:2}.color-studio .cs-wheel-legend{display:flex;justify-content:center;gap:12px;font-size:10px;color:#847889;margin:0}.color-studio .cs-control-label{font-size:12px;display:block;margin:16px 0 7px}.color-studio #cs-target{width:100%;height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font-size:12px}.color-studio .cs-comparison{background:#f8f6fa;border:1px solid #eee8f2;border-radius:10px;padding:13px;margin-top:12px;font-size:12px;line-height:1.8}.color-studio .cs-comparison strong{display:block;font-size:14px;color:#665077}.color-studio .cs-compare-chips{display:flex;gap:10px;align-items:center;margin:8px 0}.color-studio .cs-compare-chips i{width:30px;height:30px;border-radius:7px;border:1px solid #0001;flex:none}.color-studio .cs-nearest-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px;gap:6px}.color-studio .cs-nearest-title span{font-size:10px;color:var(--muted)}.color-studio .cs-nearest button{display:flex;width:100%;align-items:center;gap:9px;border:0;border-bottom:1px solid #f0ecf2;border-radius:0;text-align:left;padding:10px 0;color:var(--ink)}.color-studio .cs-nearest i{width:24px;height:24px;border-radius:6px;flex:none;border:1px solid #0001}.color-studio .cs-nearest button span{flex:1}.color-studio .cs-nearest b{font-size:11px;font-weight:400;color:#8f7b9e}.color-studio .cs-fine{margin-top:20px;border-top:1px solid var(--line);padding-top:12px;font-size:12px}.color-studio summary{cursor:pointer;color:var(--accent)}.color-studio .cs-fine label{display:flex;justify-content:space-between;margin-top:12px}.color-studio .cs-fine input{display:block;width:100%;height:15px;padding:0;margin:8px 0;accent-color:#76648e}.color-studio .cs-foot{max-width:680px;text-align:center;margin:28px auto 0;color:#938a98;font-size:11px;line-height:1.9}.color-studio .cs-foot strong{font-weight:400;font-size:13px;color:#7d6b8a}.color-studio .cs-foot p{margin:8px 0}
.color-studio .cs-wheel-name{position:absolute;max-width:42%;padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.9);color:#493b55;font-size:10px;font-weight:500;line-height:1.5;overflow-wrap:anywhere;box-shadow:0 1px 3px #0001;pointer-events:none;z-index:3}
.color-studio .cs-pick-hint{font-size:11px;color:var(--muted);margin-right:auto}
.color-studio #cs-crop-box{background:transparent}
.color-studio .cs-crop-handle,.color-studio .cs-crop-move{position:absolute;pointer-events:auto;touch-action:none;z-index:2}
.color-studio .cs-crop-handle{width:26px;height:26px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);border-radius:0}
.color-studio .cs-crop-handle:after{content:'';position:absolute;inset:6px;background:#76648e;border:2px solid white;border-radius:3px;box-shadow:0 0 2px #333}
.color-studio .cs-crop-handle[data-handle=nw]{left:0;top:0;cursor:nwse-resize}.color-studio .cs-crop-handle[data-handle=ne]{left:100%;top:0;cursor:nesw-resize}.color-studio .cs-crop-handle[data-handle=sw]{left:0;top:100%;cursor:nesw-resize}.color-studio .cs-crop-handle[data-handle=se]{left:100%;top:100%;cursor:nwse-resize}
.color-studio .cs-crop-move{left:50%;top:2px;transform:translateX(-50%);padding:5px 8px;font-size:10px;white-space:nowrap;background:#76648e;color:white;border:1px solid white;cursor:move;line-height:1.5}
.color-studio .cs-crop-move:hover{background:#65527e}
.color-studio .cs-photo-readout{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-top:10px;background:#f4f0f7;border-radius:9px;font-size:12px}.color-studio .cs-photo-readout i{width:22px;height:22px;border-radius:5px;flex:none}.color-studio .cs-photo-readout strong{font-family:monospace}.color-studio .cs-photo-readout span{margin-left:auto;font-size:11px;color:#76648e;overflow-wrap:anywhere;min-width:0}
@media(max-width:760px){.color-studio .cs-wrap{padding:18px 14px}.color-studio .cs-hero{display:block;padding:26px 4px 22px}.color-studio .cs-hero p{margin-top:14px;font-size:12px}.color-studio h1{font-size:26px}.color-studio h1 span{font-size:17px}.color-studio .cs-workspace{grid-template-columns:minmax(0,1fr);gap:16px}.color-studio .cs-panel{padding:16px}.color-studio .cs-photo-area,.color-studio .cs-empty{min-height:290px}.color-studio #cs-photo-canvas{max-height:420px}.color-studio .cs-nav span{letter-spacing:1px;font-size:8px}.color-studio .cs-wheel-wrap{width:260px}.color-studio .cs-photo-toolbar{gap:5px}.color-studio .cs-photo-toolbar button{padding:7px 8px}}
.color-studio .cs-color-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.color-studio .cs-color-tile{min-width:0}.color-studio .cs-color-tile i{display:block;height:68px;border-radius:9px;border:1px solid #0001;margin-bottom:7px}.color-studio .cs-color-tile span{display:block;font-size:11px;color:#82758c}.color-studio .cs-color-tile b{font-family:monospace;font-size:13px;font-weight:500}.color-studio .cs-difference-intro{font-size:12px;margin:18px 0 8px;color:#655275}.color-studio .cs-differences{margin-bottom:16px}.color-studio .cs-difference{background:#fff;border:1px solid #eae4ef;border-radius:9px;padding:12px;margin:9px 0}.color-studio .cs-difference-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:12px}.color-studio .cs-difference-heading b{font-size:13px;color:#715587;font-weight:600}.color-studio .cs-meter-row{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:10px;color:#807288}.color-studio .cs-meter-row>span{width:42px;flex:none}.color-studio .cs-meter-row output{width:30px;flex:none;text-align:right;font-variant-numeric:tabular-nums}.color-studio .cs-meter-track{flex:1;height:7px;border-radius:8px;background:#eeeaf1;overflow:hidden}.color-studio .cs-meter-track i{display:block;height:100%;border-radius:8px}.color-studio .cs-meter-current{background:#806293}.color-studio .cs-meter-reference{background:#b5a9be}.color-studio .cs-meter-caption{font-size:10px;color:#95899b;margin:9px 0 0;text-align:right}
.color-studio .cs-color-tile{padding:10px;border:1px solid #ded6e7;border-radius:10px;background:#fff}.color-studio .cs-tile-current{border-top:3px solid #806293}.color-studio .cs-tile-reference{border-top:3px solid #6b8295}.color-studio .cs-color-tile .cs-tile-label{font-size:12px;font-weight:700;color:#674d7b;margin-bottom:5px}.color-studio .cs-tile-reference .cs-tile-label{color:#526b80}.color-studio .cs-color-tile .cs-tile-name{font-size:11px;color:#777;min-height:34px;line-height:1.5;overflow-wrap:anywhere;margin-bottom:7px}.color-studio .cs-meter-row>span{width:60px}.color-studio .cs-meter-reference{background:#6b8295}
.color-studio #cs-photo-canvas{touch-action:pan-y pinch-zoom}
.color-studio #cs-wheel{touch-action:pan-y pinch-zoom}
/* Quiet photo-led layout. */
.color-studio{--accent:#776d80;--line:#e8e5e0;background:#f8f7f3}.color-studio .cs-hero{align-items:center;padding:34px 2px 28px}.color-studio .cs-hero h1{font-size:25px;font-weight:500;letter-spacing:3px;margin:0}.color-studio .cs-hero p{font-size:12px;letter-spacing:3px;color:#a29a8f;margin:0}.color-studio .cs-panel{border-radius:12px}.color-studio .cs-panel-title h2{font-weight:500;letter-spacing:1px}.color-studio .cs-primary{background:#82778a;border-color:#82778a}.color-studio .cs-photo-area{background:#faf9f7;border-color:#e3dfd9;border-radius:8px}.color-studio .cs-empty{gap:8px;min-height:340px}.color-studio .cs-empty strong{font-size:14px;letter-spacing:2px;font-weight:400;color:#817887}.color-studio .cs-upload-icon{background:transparent;border:0;border-radius:0;font-size:28px;margin:0;color:#aaa0ad}.color-studio .cs-status:empty,.color-studio .cs-muted:empty,.color-studio .cs-palette:empty{display:none}.color-studio .cs-palette-heading{margin-top:16px;padding-top:16px}.color-studio .cs-comparison{background:#faf9fb}.color-studio .cs-foot{margin-top:24px}.color-studio .cs-guide{margin:14px auto 0;max-width:530px;text-align:left;border-top:1px solid #e5e1dc;padding-top:12px}.color-studio .cs-guide summary{font-size:11px;color:#999187;text-align:center}.color-studio .cs-guide p{margin:12px 0}.color-studio .cs-photo-toolbar{justify-content:flex-end}.color-studio .cs-wheel-legend{margin-bottom:16px}
@media(max-width:760px){.color-studio .cs-hero{display:flex;padding:26px 2px}.color-studio .cs-hero h1{font-size:23px;letter-spacing:2px}.color-studio .cs-hero p{margin:0;font-size:11px;letter-spacing:1px}.color-studio .cs-empty{min-height:270px}.color-studio .cs-photo-area{min-height:270px}}
.color-studio .cs-swatch{position:relative}.color-studio .cs-swatch-badges{position:absolute;left:6px;top:6px;display:flex;gap:4px;pointer-events:none}.color-studio .cs-swatch-badges em{font-style:normal;font-size:9px;line-height:1.6;padding:1px 5px;border-radius:4px;background:#fffffff0;color:#5d5068;box-shadow:0 1px 3px #0002}.color-studio .cs-swatch-badges .cs-vb-badge{background:#393042e6;color:#fff}
.color-studio .cs-wheel-mine{background:#685477;color:#fff;font-size:9px;padding:2px 5px;white-space:nowrap}
.color-studio button.cs-tile-reference{text-align:left;padding:10px;line-height:1.8;color:var(--ink);border-top:3px solid #6b8295;width:100%}.color-studio button.cs-tile-reference:hover{background:#f3f5f7}.color-studio .cs-card-dialog{position:fixed;inset:0;margin:auto;width:340px;max-width:calc(100vw - 40px);max-height:85dvh;overflow:auto;padding:22px;border:1px solid #e5dfe9;border-radius:14px;background:#fcfbf9;color:#343d43;box-shadow:0 16px 70px #0003}.color-studio .cs-card-dialog::backdrop{background:#29232f66}.color-studio .cs-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.color-studio .cs-dialog-heading h2{font-size:17px;font-weight:500;overflow-wrap:anywhere}.color-studio .cs-dialog-close{font-size:22px;padding:0;width:32px;height:32px;border:0;background:transparent}.color-studio .cs-dialog-swatch{display:block;height:160px;border-radius:9px;border:1px solid #0001}.color-studio .cs-dialog-hex{font-family:monospace;font-size:19px;letter-spacing:1px;margin:16px 0 4px}.color-studio .cs-card-dialog>.cs-primary{width:100%;margin-top:16px;padding:10px}
.color-studio .cs-wheel-handle{position:absolute;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);touch-action:none;cursor:grab;z-index:4}.color-studio .cs-wheel-handle:hover{background:transparent}.color-studio .cs-wheel-handle:active{cursor:grabbing}.color-studio #cs-wheel{cursor:default}
.color-studio .cs-poster-button{display:block;width:100%;margin-top:22px;padding:12px}.color-studio .cs-poster-dialog{width:440px}.color-studio .cs-poster-dialog>img{display:block;width:100%;height:auto;border-radius:6px}.color-studio .cs-poster-download{display:block;text-align:center;margin-top:14px;padding:10px;border-radius:8px;color:#fff;text-decoration:none}.color-studio .cs-poster-dialog>p{text-align:center;font-size:11px;margin:10px 0 0}
.color-studio .cs-poster-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.color-studio .cs-poster-options label{font-size:11px;color:#776b7e}.color-studio .cs-poster-options select{width:100%;min-width:0;font-size:12px;padding:8px 2px;margin-top:5px}.color-studio .cs-poster-toggle{display:flex;align-items:center;gap:5px;grid-column:span 3}.color-studio .cs-poster-options input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:#82778a}.color-studio .cs-poster-swatches{grid-column:1/-1;border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}.color-studio .cs-poster-swatches legend{font-size:11px;margin-bottom:8px}.color-studio .cs-poster-swatches label{display:flex;align-items:center;gap:4px}.color-studio .cs-poster-swatches i{width:22px;height:22px;display:inline-block;border-radius:4px}.color-studio .cs-poster-download:disabled{opacity:.45;pointer-events:none}
.color-studio .cs-poster-dialog>img{max-height:44dvh;object-fit:contain;background:#eeeae4}

.color-studio .cs-poster-result{width:520px}.color-studio .cs-poster-result>img{display:block;width:100%;height:auto;max-height:none;border-radius:6px;-webkit-touch-callout:default;user-select:auto}.color-studio button.cs-poster-download{width:100%}.color-studio .cs-poster-result>p{text-align:center;font-size:12px;margin:0 0 12px}
.color-studio button.cs-primary:hover,.color-studio button.cs-primary:active{background:#82778a;border-color:#82778a;color:#fff;transition:none}.color-studio #cs-poster{position:fixed;right:20px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:99;width:auto;min-width:142px;margin:0;padding:13px 22px;border-radius:28px;box-shadow:0 5px 18px #44334d24;transition:none;-webkit-tap-highlight-color:transparent}.color-studio .cs-foot{padding-bottom:84px}@media(min-width:1200px){.color-studio #cs-poster{right:max(24px,calc((100vw - 1180px)/2))}}
.color-studio .cs-poster-dialog>img{height:clamp(200px,36dvh,340px);max-height:none;object-fit:contain}.color-studio .cs-poster-options{padding:14px;background:#f6f4f0;border:1px solid #e7e2da;border-radius:12px;gap:12px}.color-studio .cs-poster-options :is(label,input,select){transition:none!important;animation:none!important;-webkit-tap-highlight-color:transparent}.color-studio .cs-poster-options select,.color-studio .cs-poster-options input[type=text]{border:1px solid #ddd7ce;border-radius:7px;background:#fff;color:#49434d}.color-studio .cs-poster-toggle{padding:9px 10px;border:1px solid #e3ddd6;background:#fff;border-radius:8px;cursor:pointer}.color-studio .cs-poster-options input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 18px;width:18px;height:18px;margin:0;border:1px solid #b8adbd;border-radius:4px;background:#fff;cursor:pointer;box-shadow:none}.color-studio .cs-poster-options input[type=checkbox]:checked{background:#82778a;border-color:#82778a}.color-studio .cs-poster-options input[type=checkbox]:checked:after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.color-studio .cs-poster-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}.color-studio .cs-poster-swatches label{padding:9px 7px;gap:5px;background:#fff;border:1px solid #ded8e2;border-radius:8px;cursor:pointer;min-width:0}.color-studio .cs-poster-swatches label:has(input:checked){background:#eee9f1;border-color:#a092ad}.color-studio .cs-poster-swatches label span{font-size:10px;white-space:nowrap}.color-studio .cs-poster-swatches i{flex:0 0 22px}.color-studio .cs-poster-dialog .cs-poster-download:disabled{opacity:1;background:#82778a;color:#fff;cursor:wait}.color-studio .cs-poster-dialog>p[role=status]{min-height:18px}
.color-studio .cs-poster-dialog{padding:0;height:min(88dvh,820px);max-height:calc(100dvh - 24px);overflow:hidden}.color-studio .cs-poster-dialog[open]{display:flex;flex-direction:column}.color-studio .cs-poster-dialog>.cs-dialog-heading{flex:none;margin:0;padding:14px 18px;border-bottom:1px solid #e7e2da;background:#fcfbf9}.color-studio .cs-poster-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px;scrollbar-gutter:stable}.color-studio .cs-poster-body>img{display:block;width:100%;height:clamp(180px,32dvh,320px);object-fit:contain;border-radius:6px;background:#eeeae4}.color-studio .cs-poster-footer{flex:none;padding:12px 18px;border-top:1px solid #e7e2da;background:#fcfbf9}.color-studio .cs-poster-footer .cs-poster-download{margin:0;width:100%;min-height:44px}.color-studio .cs-poster-footer>p{min-height:17px;margin:7px 0 0;text-align:center;font-size:11px;line-height:17px}.color-studio .cs-poster-dialog .cs-poster-download,.color-studio .cs-poster-dialog .cs-poster-download:is(:hover,:active,:focus,:disabled){background:#82778a!important;color:#fff!important;border-color:#82778a!important;opacity:1!important;filter:none!important;transform:none!important;box-shadow:none!important;transition:none!important;animation:none!important;-webkit-tap-highlight-color:transparent}.color-studio .cs-poster-dialog,.color-studio .cs-poster-result{animation:none!important;transition:none!important}

/* Keep the legend outside the grid: mobile WebKit sizes grid legends inconsistently. */
.color-studio .cs-poster-swatches{display:block;width:100%;min-width:0;box-sizing:border-box}.color-studio .cs-poster-swatches legend{display:block;float:none;width:100%;max-width:100%;padding:0;margin:0 0 10px;line-height:1.6;white-space:normal;word-break:normal;writing-mode:horizontal-tb}.color-studio .cs-poster-swatch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}


.color-studio .cs-action-dock{position:fixed;right:20px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:99;display:flex;gap:8px;width:min(380px,calc(100vw - 40px))}.color-studio .cs-action-dock[hidden]{display:none}.color-studio .cs-action-dock #cs-poster{position:static;flex:1;min-width:0;padding:13px 12px}.color-studio .cs-reference-shortcut{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;border:1px solid #ddd5e2;border-radius:28px;background:#fff;color:#544a5b;box-shadow:0 5px 18px #44334d18;transition:none;-webkit-tap-highlight-color:transparent}.color-studio .cs-reference-shortcut:is(:hover,:active){background:#fff;color:#544a5b;transform:none}.color-studio .cs-reference-shortcut i,.color-studio .cs-reference-list i{display:block;width:22px;height:22px;border-radius:5px;border:1px solid #0001;flex:none}.color-studio .cs-reference-shortcut span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-studio .cs-reference-list{display:grid;gap:8px;max-height:55dvh;overflow-y:auto;padding:2px}.color-studio .cs-reference-list button{display:flex;align-items:center;gap:10px;text-align:left;min-height:44px;background:#fff;border:1px solid #e7e2ea;border-radius:8px;padding:9px 12px;transition:none}.color-studio .cs-reference-list button[aria-pressed=true]{background:#eee9f1;border-color:#82778a}@media(min-width:1200px){.color-studio .cs-action-dock{right:max(24px,calc((100vw - 1180px)/2))}}


.color-studio .cs-fine input[type=range]{appearance:none!important;-webkit-appearance:none!important;display:block;width:100%;height:32px!important;margin:6px 0 12px;padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;cursor:pointer;--cs-range:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.color-studio .cs-fine input[type=range]::-webkit-slider-runnable-track{height:10px;border:1px solid #0001;border-radius:8px;background:var(--cs-range)}.color-studio .cs-fine input[type=range]::-webkit-slider-thumb{appearance:none!important;-webkit-appearance:none!important;width:22px;height:22px;margin-top:-7px;border:2px solid #82778a;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transform:none}.color-studio .cs-fine input[type=range]::-moz-range-track{height:10px;border:1px solid #0001;border-radius:8px;background:var(--cs-range)}.color-studio .cs-fine input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid #82778a;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002}.color-studio .cs-fine input[type=range]:focus-visible{outline:2px solid #82778a;outline-offset:2px}


.color-studio .cs-picked-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.color-studio .cs-picked-pair .cs-picked,.color-studio .cs-picked-pair .cs-closest{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;min-width:0;padding:12px;border:1px solid #e6e0e9;border-radius:10px;background:#fff;color:var(--ink);text-align:left}.color-studio .cs-picked-pair .cs-picked>label,.color-studio .cs-closest>span:first-child{font-size:11px;color:#82778a;margin:0;line-height:18px}.color-studio .cs-picked-pair #cs-native-color{width:100%!important;height:58px!important;border-radius:8px}.color-studio .cs-closest i{display:block;width:100%;height:58px;border-radius:8px;border:1px solid #0001}.color-studio .cs-picked-pair #cs-hex{max-width:100%;font-size:16px!important;letter-spacing:0}.color-studio .cs-picked-pair #cs-rgb{font-size:9px}.color-studio .cs-picked-pair #cs-copy{align-self:flex-start;font-size:11px;padding:3px 9px}.color-studio .cs-closest strong{font-size:14px;line-height:28px;font-weight:500;overflow-wrap:anywhere}.color-studio .cs-closest>span:last-child{font-size:11px;color:#82778a}.color-studio .cs-closest:is(:hover,:active){background:#fff;transform:none;transition:none}


.color-studio .cs-reference-list .cs-reference-delta{margin-left:auto;flex:none;font-size:11px;color:#82778a;white-space:nowrap;font-variant-numeric:tabular-nums}


.color-studio .cs-manual-preview{display:flex;align-items:center;gap:12px;margin:16px 0 8px}.color-studio .cs-manual-preview i{display:block;width:58px;height:58px;flex:none;border-radius:9px;border:1px solid #0002}.color-studio .cs-manual-preview strong{font-family:monospace;font-size:16px;font-weight:500;color:var(--ink)}


.color-studio .cs-manual-preview input[type=color]{appearance:none;-webkit-appearance:none;display:block;width:58px;height:58px;min-height:58px;flex:0 0 58px;margin:0;padding:0!important;border:1px solid #0002;border-radius:9px;background:transparent;cursor:pointer}.color-studio .cs-manual-preview input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-studio .cs-manual-preview input[type=color]::-webkit-color-swatch{border:0;border-radius:8px}.color-studio .cs-manual-preview input[type=color]::-moz-color-swatch{border:0;border-radius:8px}.color-studio .cs-manual-preview input[type=color]:focus-visible{outline:2px solid #82778a;outline-offset:3px}


.color-studio .cs-manual-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}.color-studio .cs-manual-current,.color-studio .cs-manual-closest{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:12px;border:1px solid #e6e0e9;border-radius:10px;background:#fff;text-align:left;color:var(--ink)}.color-studio .cs-manual-preview input[type=color],.color-studio .cs-manual-preview i{width:100%;height:58px;flex:0 0 58px;box-sizing:border-box}.color-studio .cs-manual-preview span{font-size:11px;color:#82778a}.color-studio .cs-manual-preview strong{font-size:14px;line-height:22px;overflow-wrap:anywhere}.color-studio .cs-manual-closest:is(:hover,:active){background:#fff;transform:none;transition:none}


.color-studio .cs-wheel-expand{display:block;margin:8px auto 12px;padding:7px 14px;border:1px solid #e6e0e9;border-radius:20px;color:#776d80;background:#fff;font-size:12px}.color-studio .cs-wheel-fullscreen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;box-sizing:border-box;margin:0;padding:calc(16px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:0;background:#faf9f6;color:var(--ink);overflow:auto}.color-studio .cs-wheel-fullscreen::backdrop{background:#faf9f6}.color-studio .cs-wheel-fullscreen .cs-dialog-heading{margin-bottom:16px}.color-studio .cs-wheel-done{border:0;border-radius:18px;padding:8px 18px;background:#82778a;color:#fff}.color-studio .cs-fullscreen-preview{display:flex;justify-content:center;align-items:center;gap:12px;margin:16px auto 22px}.color-studio .cs-fullscreen-preview i{display:block;width:52px;height:52px;border:1px solid #0002;border-radius:8px}.color-studio .cs-fullscreen-preview strong{font-family:monospace;font-size:20px}.color-studio .cs-wheel-fullscreen .cs-wheel-wrap{width:min(calc(100vw - 24px),calc(100dvh - 210px));max-width:680px;margin:0 auto}.color-studio .cs-wheel-fullscreen .cs-wheel-handle{min-width:36px;min-height:36px}


.color-studio #cs-target[hidden]{display:none!important}.color-studio .cs-reference-field{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 12px;background:#fff;border:1px solid #e6e0e9;border-radius:8px;text-align:left;color:var(--ink);transition:none}.color-studio .cs-reference-field i{display:block;width:22px;height:22px;border:1px solid #0001;border-radius:5px;flex:none}.color-studio .cs-reference-field .cs-reference-arrow{margin-left:auto}.color-studio .cs-reference-field:is(:hover,:active){background:#fff;transform:none}


.color-studio .cs-wheel-fullscreen .cs-wheel-done,.color-studio .cs-wheel-fullscreen .cs-wheel-done:is(:hover,:active,:focus){background:#82778a!important;color:#fff!important;border-color:#82778a!important;opacity:1;filter:none;transform:none;box-shadow:none;transition:none!important;animation:none!important;-webkit-tap-highlight-color:transparent}.color-studio .cs-wheel-fullscreen .cs-wheel-done:focus-visible{outline:2px solid #665477;outline-offset:3px}


.color-studio .cs-fullscreen-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:440px;margin:12px auto 16px;align-items:stretch}.color-studio .cs-fullscreen-preview>div{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px;border:1px solid #e6e0e9;border-radius:10px;background:#fff;min-width:0}.color-studio .cs-fullscreen-preview i{width:100%;height:46px;box-sizing:border-box}.color-studio .cs-fullscreen-preview span{font-size:11px;color:#82778a}.color-studio .cs-fullscreen-preview strong{font-size:15px;line-height:20px;overflow-wrap:anywhere}.color-studio .cs-wheel-fullscreen .cs-wheel-wrap{width:min(calc(100vw - 24px),calc(100dvh - 280px))}


/* Mobile reading and touch sizes. */
@media(max-width:760px){
.color-studio{font-size:15px;line-height:1.65;--muted:#77717b}
.color-studio .cs-wrap{padding:18px 12px}.color-studio .cs-panel{padding:16px}
.color-studio h2,.color-studio .cs-dialog-heading h2{font-size:19px}.color-studio h3{font-size:16px}
.color-studio .cs-control-label,.color-studio .cs-fine summary,.color-studio .cs-fine label,.color-studio .cs-reference-field,.color-studio .cs-reference-list button{font-size:15px}
.color-studio .cs-picked-pair .cs-picked>label,.color-studio .cs-closest>span:first-child,.color-studio .cs-manual-preview span,.color-studio .cs-fullscreen-preview span{font-size:13px;color:#706776}
.color-studio .cs-picked-pair #cs-hex{font-size:18px!important;height:32px!important}
.color-studio .cs-picked-pair #cs-rgb,.color-studio .cs-closest>span:last-child{font-size:12px;line-height:1.6}
.color-studio .cs-closest strong,.color-studio .cs-manual-preview strong,.color-studio .cs-fullscreen-preview strong{font-size:16px;line-height:1.6}
.color-studio .cs-picked-pair #cs-copy{font-size:14px;min-height:40px;padding:5px 12px}
.color-studio .cs-picked-pair,.color-studio .cs-color-pair{gap:10px}
.color-studio .cs-comparison{font-size:14px;line-height:1.75}.color-studio .cs-comparison strong{font-size:16px}
.color-studio .cs-color-tile .cs-tile-label,.color-studio .cs-color-tile .cs-tile-name,.color-studio .cs-color-tile b{font-size:13px}
.color-studio .cs-difference-intro,.color-studio .cs-difference-heading{font-size:14px}.color-studio .cs-difference-heading{flex-wrap:wrap}.color-studio .cs-difference-heading b{font-size:15px}
.color-studio .cs-meter-row{font-size:12px;gap:8px;margin:12px 0}.color-studio .cs-meter-row>span{width:76px}.color-studio .cs-meter-row output{width:34px}.color-studio .cs-meter-track{height:9px;min-width:12px}
.color-studio .cs-muted,.color-studio .cs-status,.color-studio .cs-wheel-legend,.color-studio .cs-nearest-title span{font-size:13px;line-height:1.75}
.color-studio .cs-nearest button{font-size:15px;min-height:48px}.color-studio .cs-nearest b,.color-studio .cs-reference-list .cs-reference-delta{font-size:12px}
.color-studio .cs-wheel-name{font-size:12px}.color-studio .cs-wheel-wrap{width:min(300px,100%)}
.color-studio .cs-wheel-expand,.color-studio .cs-wheel-done,.color-studio .cs-reference-field,.color-studio .cs-photo-toolbar button,.color-studio .cs-action-dock button{min-height:44px;font-size:14px}
.color-studio .cs-dialog-close{min-width:44px;min-height:44px}
.color-studio .cs-poster-options label{font-size:14px}.color-studio .cs-poster-options select,.color-studio .cs-poster-options input[type=text]{font-size:16px;min-height:44px}
.color-studio .cs-poster-swatches legend{font-size:14px}.color-studio .cs-poster-swatches label span{font-size:12px}.color-studio .cs-poster-swatches label{min-height:44px}
.color-studio .cs-swatch span{font-size:12px;padding:7px;line-height:1.65}.color-studio .cs-tag{font-size:12px}
.color-studio .cs-foot,.color-studio .cs-guide summary,.color-studio .cs-guide p{font-size:13px;line-height:1.8}
}

.color-studio .cs-fullscreen-preview>button{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px;border:1px solid #e6e0e9;border-radius:10px;background:#fff;min-width:0;text-align:left;color:var(--ink);transition:none;animation:none;-webkit-tap-highlight-color:transparent}.color-studio .cs-fullscreen-preview>button:is(:hover,:active){background:#fff;transform:none}.color-studio .cs-panel-title{padding-bottom:14px;border-bottom:1px solid #e8e3ec;margin-bottom:20px;gap:8px}.color-studio .cs-panel-title h2{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:650;letter-spacing:.5px;line-height:1.4}.color-studio .cs-panel-title h2 span{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:0;border-radius:9px;background:#eee8f3;color:#77628c;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.color-studio .cs-panel-title .cs-tag{flex:none}@media(max-width:360px){.color-studio .cs-panel-title h2{font-size:18px;gap:6px}.color-studio .cs-panel-title h2 span{width:28px;height:28px}.color-studio .cs-panel-title .cs-tag{font-size:10px}}