.pc-picker *{box-sizing:border-box}.pc-picker{position:fixed;inset:0;z-index:100000;background:#0008;color:#111;font-family:'Courier New',monospace;padding:24px;display:grid;place-items:center;overflow:auto}.pc-picker[hidden]{display:none}.pc-picker .window{width:min(100%,590px);border:3px solid #111;background:#eee;box-shadow:6px 6px 0 #aaa}.pc-picker .bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:3px solid #111;background:repeating-linear-gradient(#d4d4d4 0 5px,#ccc 5px 7px);font-weight:900;font-size:24px}.pc-picker .title{background:#d4d4d4;flex:1}.pc-picker .chrome{display:flex;gap:7px}.pc-picker .chrome span,.pc-picker .close{width:32px;height:32px;border:3px solid #111;background:#ddd;box-shadow:inset 2px 2px #fff;display:grid;place-items:center;font:900 20px monospace}.pc-picker .body{padding:18px}.pc-picker .plane{position:relative;height:265px;border:3px solid #111;touch-action:none;cursor:crosshair;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(209 100% 50%)}.pc-picker .marker{position:absolute;width:22px;height:22px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 2px #111;transform:translate(-50%,-50%);pointer-events:none}.pc-picker .hue-row{display:flex;align-items:center;gap:14px;margin:20px 0}.pc-picker .symbol{border:3px solid #111;padding:10px;font-size:22px;background:#fff}.pc-picker .hue{flex:1;position:relative;height:28px;border:3px solid #111;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:ew-resize}.pc-picker .thumb{position:absolute;top:-8px;height:38px;width:15px;border:3px solid #111;background:#fff;transform:translateX(-50%);pointer-events:none}.pc-picker .fields{display:grid;grid-template-columns:90px repeat(3,minmax(0,1fr));gap:12px;align-items:start}.pc-picker .sample{height:90px;border:3px solid #111;background:#1a90ff}.pc-picker .field{text-align:center;font-weight:bold}.pc-picker .field input{width:100%;height:57px;border:3px solid #111;background:#fff;color:#111;text-align:center;font:900 25px 'Courier New',monospace;border-radius:0;appearance:textfield}.pc-picker .field label{display:block;margin-top:7px}.pc-picker input:focus-visible,.pc-picker button:focus-visible{outline:2px dashed #555;outline-offset:3px}.pc-picker .bottom{display:flex;justify-content:space-between;gap:16px;margin-top:18px}.pc-picker .hex{width:180px;min-width:0;border:3px solid #111;font:900 23px 'Courier New',monospace;text-align:center;height:54px;border-radius:0}.pc-picker .ok{min-width:150px;border:3px solid #111;background:#111;color:#fff;font:900 24px 'Courier New',monospace;cursor:pointer}.pc-picker .note{font:13px/1.6 system-ui;margin:16px 0 0;color:#555}.pc-picker .result{margin:12px 0 0;font:14px system-ui;min-height:22px}.pc-picker .close{cursor:pointer;color:#111}.pc-picker .restore{display:none;padding:18px;border:3px solid #111;font:bold 18px monospace;cursor:pointer}@media(max-width:600px){.pc-picker{padding:14px}.pc-picker .bar{font-size:19px;padding:9px}.pc-picker .chrome span{display:none}.pc-picker .body{padding:14px}.pc-picker .plane{height:225px}.pc-picker .fields{grid-template-columns:65px repeat(3,minmax(0,1fr));gap:8px}.pc-picker .sample{height:72px}.pc-picker .field input{height:48px;font-size:20px}.pc-picker .hex{width:155px;font-size:20px}.pc-picker .ok{min-width:100px}.pc-picker .hue-row{gap:10px}}
.pc-picker .window{width:min(100%,340px);box-shadow:4px 4px 0 #999}
.pc-picker .bar{font-size:16px;padding:7px 9px;gap:6px}
.pc-picker .chrome{gap:4px}
.pc-picker .chrome span,.pc-picker .close{width:24px;height:24px;font-size:16px;border-width:2px}
.pc-picker .body{padding:12px}
.pc-picker .plane{height:155px;border-width:2px}
.pc-picker .marker{width:17px;height:17px;border-width:2px}
.pc-picker .hue-row{margin:12px 0;gap:9px}
.pc-picker .symbol{padding:5px;font-size:18px;border-width:2px}
.pc-picker .hue{height:20px;border-width:2px}
.pc-picker .thumb{height:29px;width:12px;top:-7px;border-width:2px}
.pc-picker .fields{grid-template-columns:48px repeat(3,minmax(0,1fr));gap:7px}
.pc-picker .sample{height:48px;border-width:2px}
.pc-picker .field input{height:35px;font-size:17px;border-width:2px}
.pc-picker .field label{margin-top:4px;font-size:12px}
.pc-picker .bottom{margin-top:12px;gap:10px}
.pc-picker .hex{width:135px;height:38px;font-size:17px;border-width:2px}
.pc-picker .ok{min-width:95px;font-size:18px;border-width:2px}
.pc-picker .result:empty{display:none}
.pc-picker{display:block;padding:0;pointer-events:none;background:transparent;overflow:visible}
.pc-picker .window{position:fixed;pointer-events:auto;width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:#d4d4d4;box-shadow:3px 3px 0 #777;border:2px solid #111}
.pc-picker .bar{background:#d4d4d4;border-bottom:2px solid #111}
.pc-picker .title{font-size:16px;letter-spacing:0;text-transform:none}
.pc-picker .chrome span{display:none}
.pc-picker .body{background:#eee;box-shadow:inset 2px 2px #fff;padding:12px}
.pc-picker .ok{background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff;box-shadow:inset 1px 1px #666;border-radius:0;padding:0 12px;min-height:38px;line-height:1}
.pc-picker .close{padding:0;min-height:24px;line-height:1;border-radius:0}
.pc-picker input:focus,.pc-picker input:focus-visible{outline:none!important;box-shadow:inset 0 0 0 1px #777}
.pc-picker .bottom .hex{width:100%;flex:1}