.color-picker{color:#35432b;flex-direction:column;gap:7px;width:min(100%,780px);min-height:0;margin-inline:auto;padding:0 0 5px;display:flex}.color-result{flex-shrink:0;justify-content:center;align-items:center;gap:15px;min-height:83px;display:flex}.color-swatch{background:#db8d69;border-radius:18px;flex-shrink:0;width:64px;height:64px;box-shadow:inset 0 0 0 1px #0002}.color-result output{font-variant-numeric:tabular-nums;display:block}.color-hex{letter-spacing:-1.8px;font-size:clamp(30px,7vw,44px);font-weight:550;line-height:1.1}.color-rgb{color:#66705d;margin-top:7px;font-size:12px}.color-stage{background:#f0f0e9;border:1px solid #dce0d2;border-radius:12px;flex:1;min-width:0;min-height:130px;position:relative;overflow:hidden}.color-board{aspect-ratio:3/2;touch-action:none;cursor:crosshair;outline-offset:2px;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-board canvas{pointer-events:none;width:100%;height:100%;display:block}.color-marker{pointer-events:none;border:2px solid #fff;border-radius:50%;width:23px;height:23px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #222,0 1px 7px #2226}.color-marker:after{content:"";background:#fff;border:1px solid #222;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-loupe{pointer-events:none;border:3px solid #faf9f6;border-radius:13px;width:78px;height:78px;position:absolute;top:9px;right:9px;overflow:hidden;box-shadow:0 2px 8px #0002}.color-loupe canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.color-loupe span{pointer-events:none;border:1px solid #fff;outline:1px solid #232323;width:9.0909%;height:9.0909%;position:absolute;top:45.4545%;left:45.4545%}.color-image-label{color:#566347;letter-spacing:.9px;pointer-events:none;background:#faf9f6e8;border-radius:4px;padding:4px 6px;font-size:8px;font-weight:650;position:absolute;bottom:8px;left:9px}.color-fine{flex-shrink:0;justify-content:center;align-items:center;gap:5px;display:flex}.color-fine>span{color:#68715d;margin-right:7px;font-size:11px}.color-fine button{color:#435230;background:#f4f5ee;border:1px solid #cbd4ba;border-radius:8px;min-width:44px;min-height:44px;padding:0;font-size:20px;line-height:1}.color-copy{flex-shrink:0;justify-content:center;gap:7px;display:flex}.color-copy button{color:#435230;background:0 0;border:1px solid #cbd4ba;border-radius:8px;flex:1;max-width:210px;min-height:44px;font-size:12px}.color-status{text-align:center;color:#656e59;flex-shrink:0;min-height:16px;font-size:11px;line-height:1.4}.color-actions{flex-shrink:0;justify-content:center;gap:8px;display:flex}.color-actions button{color:#435230;background:0 0;border:1px solid #cbd4ba;border-radius:8px;min-height:44px;padding:7px 17px;font-size:12px}.color-actions .color-primary{color:#fff;background:#35442a;border-color:#35442a;flex:1;max-width:430px;font-weight:550}.color-private{text-align:center;color:#747b68;flex-shrink:0;font-size:10px;line-height:1.4}.color-picker button:disabled{opacity:.5;cursor:default}.color-fallback{color:#536144;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:6px;font-size:11px;display:flex}.color-fallback label{width:100%}.color-fallback input{color:#35442a;background:#fff;border:1px solid #aab797;border-radius:6px;flex:1;min-width:0;min-height:44px;padding:8px;font-size:13px}.color-fallback button{color:#35442a;background:0 0;border:1px solid #cbd4ba;border-radius:6px;min-width:44px;min-height:44px;font-size:22px}.color-picker [hidden]{display:none!important}@media (height<=650px){.color-picker{gap:5px}.color-result{gap:11px;min-height:65px}.color-swatch{border-radius:12px;width:48px;height:48px}.color-hex{font-size:31px}.color-rgb{margin-top:4px;font-size:11px}.color-loupe{width:66px;height:66px;top:7px;right:7px}.color-private{font-size:9px}.color-stage{min-height:115px}}@media (width<=350px){.instrument-header h1{margin-left:11px;font-size:12px}.color-fine>span{margin-right:3px;font-size:10px}.color-fine{gap:4px}}@media (orientation:landscape) and (height<=500px){.color-picker{grid-template-rows:1fr 44px 44px auto 44px auto;grid-template-columns:minmax(225px,.9fr) minmax(200px,1.5fr);gap:4px 18px;max-width:1000px;display:grid}.color-result{grid-column:1;min-height:53px}.color-stage{grid-area:1/2/7;min-height:190px}.color-fine,.color-copy,.color-status,.color-actions,.color-private{grid-column:1}.color-swatch{border-radius:10px;width:42px;height:42px}.color-hex{font-size:29px}.color-fine{gap:4px}.color-fine>span{display:none}.color-copy button,.color-actions button{font-size:11px}.color-status{font-size:10px}.color-fallback{grid-area:7/1/auto/-1}.color-private{font-size:9px}}