.tool-color .tool-drop.is-compact{clip-path:inset(50%);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.color-coderow{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.color-coderow__label{color:var(--t-muted,#5d6b7c);font-size:14px}.color-code{flex:120px;min-width:0}.color-native{border:1px solid var(--t-border,#dde3ea);background:var(--t-bg,#fff);cursor:pointer;border-radius:10px;width:48px;height:44px;padding:2px}@media (max-width:480px){.color-coderow__label{flex-basis:100%}.color-coderow .tool-btn{padding-left:12px;padding-right:12px}}.color-msg{color:var(--t-warn,#b45309)}.color-stage{gap:10px;min-width:0;display:grid}.color-view{background:repeating-conic-gradient(var(--t-surface,#f5f7fa) 0 25%, var(--t-bg,#fff) 0 50%) 0 0 / 16px 16px;border-radius:10px;place-items:center;min-width:0;padding:8px;display:grid}.color-wrap{width:-moz-fit-content;width:fit-content;max-width:100%;line-height:0;position:relative}.color-canvas{cursor:crosshair;touch-action:none;width:auto;max-width:100%;height:auto;max-height:62vh;display:block}@media (max-width:480px){.color-canvas{max-height:52vh}}.color-marker{pointer-events:none;border:2px solid #fff;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;box-shadow:0 0 0 1px #000000b3,inset 0 0 0 1px #00000080}.color-loupe{z-index:2;pointer-events:none;background:var(--t-bg,#fff);border:2px solid #fff;border-radius:12px;width:132px;line-height:1.2;position:absolute;overflow:hidden;box-shadow:0 4px 18px #00000059}.color-loupe__canvas{width:132px;height:132px;image-rendering:pixelated;display:block}.color-loupe__hex{text-align:center;font:600 13px/1.3 var(--t-mono,ui-monospace, SFMono-Regular, Consolas, monospace);color:var(--t-text,#1c2430);padding:3px 0}.color-card{grid-template-columns:minmax(110px,160px) 1fr;align-items:stretch;gap:14px;min-width:0;display:grid}.color-swatch{min-height:120px;font:600 15px/1.2 var(--t-mono,ui-monospace, SFMono-Regular, Consolas, monospace);border:1px solid var(--t-border,#dde3ea);border-radius:12px;place-items:end start;padding:10px;display:grid}.color-info{align-content:start;gap:6px;min-width:0;display:grid}.color-name{font-size:20px;font-weight:700;line-height:1.25}.color-near{color:var(--t-muted,#5d6b7c);font-size:14px}.color-codes{gap:6px;display:grid}.color-coderow-btn{appearance:none;text-align:left;width:100%;min-height:44px;font:inherit;cursor:pointer;border:1px solid var(--t-border,#dde3ea);background:var(--t-surface,#f5f7fa);color:var(--t-text,#1c2430);border-radius:10px;grid-template-columns:5.5em 1fr auto;align-items:center;gap:8px;padding:6px 10px;display:grid}.color-coderow-btn:hover{border-color:var(--t-accent,#2563eb)}.color-coderow-btn.is-done{border-color:var(--t-ok,#15803d)}.color-codes__label{color:var(--t-muted,#5d6b7c);font-size:14px}.color-codes__value{font:15px/1.3 var(--t-mono,ui-monospace, SFMono-Regular, Consolas, monospace);overflow-wrap:anywhere}.color-copy{color:var(--t-accent,#2563eb);white-space:nowrap;font-size:13px}.color-coderow-btn.is-done .color-copy{color:var(--t-ok,#15803d)}.color-coderow-btn.is-fail .color-copy{color:var(--t-warn,#b45309);white-space:normal}@media (max-width:480px){.color-card{grid-template-columns:1fr}.color-swatch{min-height:72px}.color-coderow-btn{grid-template-columns:4.6em 1fr}.color-copy{display:none}.color-coderow-btn.is-done .color-copy,.color-coderow-btn.is-fail .color-copy{grid-column:1/-1;display:inline}}.color-block{gap:8px;min-width:0;display:grid}.color-block__head{justify-content:space-between;align-items:center;gap:10px;display:flex}.color-small{min-height:36px;padding:6px 12px;font-size:14px}.color-swatches{flex-wrap:wrap;gap:8px;display:flex}.color-chip{appearance:none;cursor:pointer;border:1px solid var(--t-border,#dde3ea);background:var(--t-bg,#fff);width:92px;color:var(--t-text,#1c2430);font:inherit;border-radius:10px;justify-items:start;gap:2px;padding:0 0 6px;display:grid;overflow:hidden}.color-chip:hover{border-color:var(--t-accent,#2563eb)}.color-chip__sw{width:100%;height:44px;display:block}.color-chip__hex{font:12px/1.3 var(--t-mono,ui-monospace, SFMono-Regular, Consolas, monospace);padding:0 8px}.color-chip__sub{color:var(--t-muted,#5d6b7c);padding:0 8px;font-size:12px}.color-history .color-chip{width:64px}.color-clip{position:fixed;top:0;left:-9999px}.tool-color{container-type:inline-size}.color-layout{gap:12px;min-width:0;display:grid}.color-side{align-content:start;gap:12px;min-width:0;display:grid}.color-empty{border:2px dashed var(--t-border,#dde3ea);color:var(--t-muted,#5d6b7c);border-radius:12px;gap:4px;padding:14px 16px;font-size:15px;display:grid}.color-empty b{color:var(--t-text,#1c2430);font-size:17px}@container (width>=720px){.color-layout.is-photo{grid-template-columns:minmax(0,1fr) minmax(250px,300px);align-items:start;gap:16px}.color-layout.is-photo .color-card{grid-template-columns:1fr}.color-layout.is-photo .color-swatch{min-height:88px}.color-layout.is-photo .color-coderow-btn{grid-template-columns:4.6em 1fr auto}}