.paint-chip{width:2.75rem;height:1.75rem;box-shadow:0 1px 2px color-mix(in srgb,var(--shade-tight)22%,transparent);border-radius:.5rem;flex-shrink:0;display:flex;position:relative;overflow:hidden}.paint-chip--now{--p-page:var(--color-ink-50);--p-ink:var(--color-ink-900);--p-accent:var(--color-solar-500);border-radius:.3125rem;width:1.75rem;height:1.125rem}.paint-chip>i:first-child{background:var(--p-page);width:60%}.paint-chip>i:nth-child(2){background:var(--p-ink);width:30%}.paint-chip>i:nth-child(3){background:var(--p-accent);width:10%}.paint-chip:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-ink-900)22%,transparent);background:linear-gradient(#ffffff5c,#fff0 54%);position:absolute;inset:0}.paint-gleam{z-index:100;pointer-events:none;view-transition-name:paint-gleam;position:fixed;inset:0}:root[data-painting]::view-transition-old(root){mix-blend-mode:normal;animation:none}:root[data-painting]::view-transition-new(root){mix-blend-mode:normal;animation:none}:root[data-painting]::view-transition-new(root){animation:paint-coat var(--paint-time,.9s)cubic-bezier(.62,.04,.26,1)both;-webkit-mask-image:linear-gradient(to bottom left,#000 44.4%,#0000 55.6%);mask-image:linear-gradient(to bottom left,#000 44.4%,#0000 55.6%);-webkit-mask-size:225% 225%;mask-size:225% 225%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:root[data-painting]::view-transition-old(paint-gleam){display:none}:root[data-painting]::view-transition-new(paint-gleam){mix-blend-mode:normal;background-image:linear-gradient(to bottom left,transparent 46.2%,color-mix(in srgb,var(--color-solar-400)16%,transparent)48.6%,#ffffff52 50%,color-mix(in srgb,var(--color-solar-400)16%,transparent)51.4%,transparent 53.8%);animation:paint-gleam var(--paint-time,.9s)cubic-bezier(.62,.04,.26,1)calc(var(--paint-time,.9s)*.16)both;background-repeat:no-repeat;background-size:225% 225%}@keyframes paint-coat{0%{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:100% 0;mask-position:100% 0}}@keyframes paint-gleam{0%{background-position:0 100%}to{background-position:100% 0}}
